feat(card)!: add <pf-v6-card>

.changeset/calm-cards-roll.md

@@ -0,0 +1,33 @@
+---
+"@patternfly/elements": major
+---
+
+`<pf-v6-card>`: replaces `<pf-v5-card>` with PatternFly v6 design specs.
+
+```html
+<pf-v6-card selectable selection="single" name="cards" accessible-label="First card">
+  <h2 slot="header">First card</h2>
+  <span slot="subtitle">Subtitle</span>
+  <pf-v6-card-body>This card is selectable.</pf-v6-card-body>
+  <span slot="footer">Footer</span>
+</pf-v6-card>
+```
+
+**Breaking Changes from v5**
+
+- Renamed tag from `<pf-v5-card>` to `<pf-v6-card>`
+- CSS custom properties renamed from `--pf-v5-c-card--*` to `--pf-v6-c-card--*`
+- Removed `flat` and `rounded` attributes. v6 cards are rounded and bordered by default; use `plain` to remove the background and border.
+- The shadow DOM no longer renders an `<article>` landmark. Cards are used in multiples, so the host is the card container to avoid landmark pollution.
+- `size` remains `compact` / `large`.
+
+**New features**
+
+- `selectable`, `selection`, `selected`, `hide-input`, and `name` for checkbox and radio cards, with form association (`value` submits with the form)
+- `clickable`, `href`, and `target` for full-card buttons and links
+- `expandable` and `expanded` with a header toggle and cancelable `expand` / `collapse` events
+- `variant="secondary"`, `glass`, and `header-wrap` modifiers
+- `header`, `title`, `subtitle`, `actions`, and `expandable-content` slots
+- `no-offset` and `toggle-right` header options
+- `pf-v6-card-body` element for multiple body sections and `no-fill`
+- `change` event for selectable cards; `header`, `actions`, `body`, `expandable-content`, `footer`, and `toggle` CSS parts

brand/styles.css

@@ -17,13 +17,13 @@ h1 {
     height: 36px;
 }
 
-pf-card .img-link {
+pf-v6-card .img-link {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-pf-card h2 {
+pf-v6-card h2 {
     margin-bottom: 0;
     padding-bottom: .5rem;
     margin-top: 0;
@@ -44,17 +44,17 @@ pf-card h2 {
     margin-bottom: 0;
 }
 
-pf-card h2,
-pf-card h3 {
+pf-v6-card h2,
+pf-v6-card h3 {
     margin-top: 8px;
 }
 
-pf-card h3 {
+pf-v6-card h3 {
     font-weight: 700;
     margin-bottom: 16px;
 }
 
-pf-card .cta {
+pf-v6-card .cta {
     min-width: 100%;
 }
 

docs/_includes/layout-blog-index.njk

@@ -9,7 +9,7 @@ layout: layout-base.njk
 
   <div class="posts">
     {% for post in collections.blog | reverse %}
-      <pf-v5-card>
+      <pf-v6-card>
         <h2 slot="header">{{ post.data.title }}</h2>
         {% if post.data.tagline %}
           <p class="tagline"><a href="{{ post.data.page.url }}">{{ post.data.tagline }}</a></p>{% endif %}
@@ -18,7 +18,7 @@ layout: layout-base.njk
         {% endif %}
         <a slot="footer" class="cta" href="{{ post.data.page.url }}">Read Post</a>
         <time slot="footer" datetime="{{ post.data.page.date }}">{{ post.data.page.date | prettyDate }}</time>
-      </pf-v5-card>
+      </pf-v6-card>
     {% endfor %}
   </div>
 </main>
@@ -34,7 +34,8 @@ layout: layout-base.njk
     gap: 2rem;
   }
 
-  pf-v5-card::part(footer) {
+  pf-v6-card::part(footer) {
+    display: flex;
     justify-content: space-between;
     align-items: center;
   }

docs/_snippets/card-html.md

@@ -1,12 +1,12 @@
 ```html
-<script type="module" src="https://esm.sh/@patternfly/elements/pf-v5-card/pf-v5-card.js"></script>
+<script type="module" src="https://esm.sh/@patternfly/elements/pf-v6-card/pf-v6-card.js"></script>
 
-<pf-v5-card border>
+<pf-v6-card>
   <h2 slot="header">Card component</h2>
   <p>PatternFly Elements are custom HTML elements that work everywhere.
     The Card element has <code>header</code> and <code>footer</code> slots for things like 
     titles and actions.
   </p>
-  <a class="cta" slot="footer" href="components/card">More about <code>pf-v5-card</code></a>
-</pf-v5-card>
+  <a class="cta" slot="footer" href="components/card">More about <code>pf-v6-card</code></a>
+</pf-v6-card>
 ```

docs/docs/develop/import-maps.md

@@ -31,14 +31,14 @@ Example:
 <script type="importmap">
 {
   "imports": {
-    "@patternfly/elements/pf-v5-card/pf-v5-card.js": "path/to/pf-card.js"
+    "@patternfly/elements/pf-v6-card/pf-v6-card.js": "path/to/pf-v6-card.js"
   }
 }
 </script>
 
 <!-- //  Bare module import specifier -->
 <script type="module">
-import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
+import '@patternfly/elements/pf-v6-card/pf-v6-card.js';
 </script>
 ```
 
@@ -65,7 +65,7 @@ Once you've generated your import map and added it to your project, you can use
 <script type="importmap">
 {
   "imports": {
-    "@patternfly/elements/pf-v5-card/pf-v5-card.js": "https://ga.jspm.io/npm:@patternfly/elements@2.5.0/pf-card/pf-card.js"
+    "@patternfly/elements/pf-v6-card/pf-v6-card.js": "https://ga.jspm.io/npm:@patternfly/elements@6.0.0/pf-v6-card/pf-v6-card.js"
   },
   "scopes": {
     "https://ga.jspm.io/": {
@@ -86,8 +86,8 @@ Once you've generated your import map and added it to your project, you can use
 
 ```javascript
 <script type="module">
-  // resolves to https://ga.jspm.io/npm:@patternfly/elements@2.5.0/pf-card/pf-card.js
-  import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
+  // resolves to https://ga.jspm.io/npm:@patternfly/elements@6.0.0/pf-v6-card/pf-v6-card.js
+  import '@patternfly/elements/pf-v6-card/pf-v6-card.js';
 </script>
 ```
 

docs/docs/develop/setup.md

@@ -107,7 +107,7 @@ npm run new -- --tagName pf-v5-cool-element
   Running that command launches the demo app in a new browser tab, and refreshes the page on save.
 
   From there you can navigate to the demo page of the element you're working on.
-  For example, if you want to preview the `pf-v5-card` component, then navigate in the browser to `http://localhost:8000/demo/pf-v5-card/`.
+  For example, if you want to preview the `pf-v6-card` component, then navigate in the browser to `http://localhost:8000/components/v6-card/demo/`.
 {% endband %}
 
 {% band header="Testing" %}

docs/framework-integration/index.md

@@ -24,32 +24,32 @@ title: Framework integration
 </header>
 
 <section id="framework">
-  <pf-v5-card color-palette="lightest" border>
+  <pf-v6-card>
     <h3 slot="header" class="push-bottom">
       <a href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-react-app-fe079be262ed">Using
         PatternFly Elements in your React App</a>
     </h3>
     <p>To get web components to work with React it’s pretty easy and straightforward. If you’d like to follow
       along, go ahead and...</p>
     <a class="cta" slot="footer" href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-react-app-fe079be262ed">Read on Medium</a>
-  </pf-v5-card>
-  <pf-v5-card color-palette="lightest" border>
+  </pf-v6-card>
+  <pf-v6-card>
     <h3 slot="header" class="push-bottom">
       <a href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-vue-app-340fc9a9d7e5">Using
         PatternFly Elements in your Vue App</a>
     </h3>
     <p>To get web components to work with Vue, it’s pretty easy and straightforward. If you’d like to follow
       along, go ahead and...</p>
     <a class="cta" slot="footer" href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-vue-app-340fc9a9d7e5">Read on Medium</a>
-  </pf-v5-card>
-  <pf-v5-card color-palette="lightest" border>
+  </pf-v6-card>
+  <pf-v6-card>
     <h3 slot="header" class="push-bottom">
       <a href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-angular-app-4b18b1c9c363">Using
         PatternFly Elements in your Angular App</a>
     </h3>
     <p>To get web components to work with Angular, there are a few steps that we need to take. If you’d like to
       follow along, go ahead and...</p>
     <a class="cta" slot="footer" href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-angular-app-4b18b1c9c363">Read on Medium</a>
-  </pf-v5-card>
+  </pf-v6-card>
 </section>  
 

docs/framework-integration/react.md

@@ -129,15 +129,15 @@ tags:
   import { useState } from "react";
 
   import { Button } from "@patternfly/elements/react/pf-v5-button/pf-v5-button.js";
-  import { Card } from "@patternfly/elements/react/pf-v5-card/pf-v5-card.js";
+  import { Card } from "@patternfly/elements/react/pf-v6-card/pf-v6-card.js";
   import { Switch } from "@patternfly/elements/react/pf-v6-switch/pf-v6-switch.js";
   import { Popover } from "@patternfly/elements/react/pf-v5-popover/pf-v5-popover.js";
   import { Tooltip } from "@patternfly/elements/react/pf-v6-tooltip/pf-v6-tooltip.js";
 
   import "./App.css";
   ```
 
-  Let’s use [`pf-v5-button`][pf-v5-button] and [`pf-v5-card`][pf-v5-card] component in the 
+  Let’s use [`pf-v5-button`][pf-v5-button] and [`pf-v6-card`][pf-v6-card] component in the 
   `App` function in the `App.tsx` file to see that our Card and Button are 
   working. We are updating the local state and showing it in the UI after 
   clicking the button.
@@ -354,7 +354,7 @@ tags:
 [react-lifecycle]: https://legacy.reactjs.org/docs/state-and-lifecycle.html
 [vite]: https://vitejs.dev/guide/#scaffolding-your-first-vite-project
 [pf-v5-button]: https://patternflyelements.org/components/button/
-[pf-v5-card]: https://patternflyelements.org/components/card/
+[pf-v6-card]: https://patternflyelements.org/components/card/
 [pf-v6-switch]: https://patternflyelements.org/components/switch/
 [pf-v6-tooltip]: https://patternflyelements.org/components/tooltip/
 [pf-v5-popover]: https://patternflyelements.org/components/popover/

docs/framework-integration/vue.md

@@ -41,7 +41,7 @@ tags:
 {% band header="Adding PatternFly Elements" %}
   With the setup complete, let’s add a couple of PatternFly Elements web 
   components to our application to make sure everything is hooked up properly. 
-  We’re going to add a card ([pf-v5-card](/components/card)). Later, we’ll add an 
+  We’re going to add a card ([pf-v6-card](/components/card)). Later, we’ll add an 
   accordion ([pf-v5-accordion](/components/accordion)) and some CSS to help with 
   our layout.
 
@@ -60,7 +60,7 @@ tags:
 
   ```html
   <script>
-    import "@patternfly/elements/pf-v5-card/pf-v5-card.js";
+    import "@patternfly/elements/pf-v6-card/pf-v6-card.js";
     export default {
       name: "HelloWorld",
       props: {
@@ -71,16 +71,16 @@ tags:
   ```
 
   Let’s add some simple markup in the `template` section of the 
-  `HellowWorld.vue` file to see that our pf-v5-card is working.
+  `HellowWorld.vue` file to see that our pf-v6-card is working.
 
   ```html
   <template>
     <div>
       <h1>PatternFly Elements with Vue</h1>
-      <pf-v5-card>
+      <pf-v6-card>
         <img alt="From https://picsum.photos/" src="https://picsum.photos/id/1019/300/200">
         <p>
-          This is the light pf-v5-card and
+          This is the light pf-v6-card and
           <a href="#">a link</a>.
         </p>
         <p>
@@ -94,7 +94,7 @@ tags:
           innovation via workplace diversity and empowerment.
         </p>
         <pf-v5-button slot="footer" variant="link" href="#">Learn more</pf-v5-button>
-      </pf-v5-card>
+      </pf-v6-card>
     </div>
   </template>
   ```