From 6afc6e928cfd94dac58ef8cc09faa0c6b4d1e5f8 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 12 May 2025 10:51:49 -0400
Subject: [PATCH] remove ssr attributes since we're not using ssr (#917)

---
 docs/_includes/theme-showcase.njk             |  4 +--
 docs/assets/scripts/hydration-errors.js       |  2 +-
 docs/docs/components/card.md                  | 14 +++++-----
 docs/docs/components/dialog.md                | 20 +++++++-------
 docs/docs/components/drawer.md                | 26 +++++++++----------
 .../components/page-samples/documentation.md  |  6 ++---
 docs/docs/components/page.md                  |  6 ++---
 docs/docs/experimental/themer.md              |  4 +--
 docs/docs/patterns/app/activity-log.md        |  2 +-
 docs/docs/patterns/app/comments.md            |  4 +--
 docs/docs/patterns/app/empty-state.md         |  2 +-
 docs/docs/patterns/app/grid-list.md           | 20 +++++++-------
 docs/docs/patterns/app/permissions.md         |  2 +-
 docs/docs/patterns/blog.md                    |  6 ++---
 .../patterns/ecommerce/product-preview.md     |  2 +-
 docs/docs/patterns/ecommerce/shopping-cart.md |  2 +-
 docs/docs/patterns/news.md                    |  2 +-
 docs/docs/utilities/frame.md                  |  8 +++---
 src/components/card/card.test.ts              | 22 ++++++++--------
 src/components/dialog/dialog.test.ts          | 18 ++++++-------
 src/components/drawer/drawer.test.ts          |  2 +-
 src/components/page/page.ts                   |  2 --
 22 files changed, 87 insertions(+), 89 deletions(-)

diff --git a/docs/_includes/theme-showcase.njk b/docs/_includes/theme-showcase.njk
index 66bfa4e2f..64945da36 100644
--- a/docs/_includes/theme-showcase.njk
+++ b/docs/_includes/theme-showcase.njk
@@ -1,6 +1,6 @@
 <div class="showcase-examples-wrapper" aria-hidden="true" data-no-outline>
   <div class="showcase-examples">
-    <wa-card with-header with-footer>
+    <wa-card>
       <div slot="header" class="wa-split">
         <h3 class="wa-heading-m">Your Cart</h3>
         <wa-icon-button name="xmark" tabindex="-1"></wa-icon-button>
@@ -69,7 +69,7 @@
         <a href="#" tabindex="-1" class="wa-body-s">I forgot my password</a>
       </div>
     </wa-card>
-    <wa-card with-footer>
+    <wa-card>
       <div class="wa-stack">
         <div class="wa-split">
           <h3 class="wa-heading-m">To-Do</h3>
diff --git a/docs/assets/scripts/hydration-errors.js b/docs/assets/scripts/hydration-errors.js
index 67c6d0d1a..30b076666 100644
--- a/docs/assets/scripts/hydration-errors.js
+++ b/docs/assets/scripts/hydration-errors.js
@@ -51,7 +51,7 @@
       <button class="diff-dialog-toggle">
         Show Hydration Mismatch
       </button>
-      <wa-dialog class="diff-dialog" with-header light-dismiss>
+      <wa-dialog class="diff-dialog" light-dismiss>
         <div class="diff-grid">
           <div>
             <div>Server</div>
diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
index daf427d79..dc607939e 100644
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -6,7 +6,7 @@ icon: card
 ---
 
 ```html {.example}
-<wa-card with-image with-footer class="card-overview">
+<wa-card class="card-overview">
   <img
     slot="image"
     src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
@@ -54,7 +54,7 @@ Headers can be used to display titles and more.
 If using SSR, you need to also use the `with-header` attribute to add a header to the card (if not, it is added automatically).
 
 ```html {.example}
-<wa-card with-header class="card-header">
+<wa-card class="card-header">
   <div slot="header" class="wa-split">
     Header Title
     <wa-icon-button name="gear" variant="solid" label="Settings" class="wa-size-m"></wa-icon-button>
@@ -80,7 +80,7 @@ Footers can be used to display actions, summaries, or other relevant content.
 If using SSR, you need to also use the `with-footer` attribute to add a footer to the card (if not, it is added automatically).
 
 ```html {.example}
-<wa-card with-footer class="card-footer">
+<wa-card class="card-footer">
   This card has a footer. You can put all sorts of things in it!
 
   <div slot="footer" class="wa-split">
@@ -102,7 +102,7 @@ Card images are displayed atop the card and will stretch to fit.
 If using SSR, you need to also use the `with-image` attribute to add an image to the card (if not, it is added automatically).
 
 ```html {.example}
-<wa-card with-image class="card-image">
+<wa-card class="card-image">
   <img
     slot="image"
     src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
@@ -124,7 +124,7 @@ Use the `size` attribute to change a card's size.
 
 ```html {.example}
 <div class="wa-stack">
-<wa-card with-footer size="small">
+<wa-card size="small">
   This is a small card.
 
   <footer slot="footer" class="wa-split">
@@ -133,7 +133,7 @@ Use the `size` attribute to change a card's size.
   </footer>
 </wa-card>
 
-<wa-card with-footer size="medium">
+<wa-card size="medium">
   This is a medium card (default).
 
   <footer slot="footer" class="wa-split">
@@ -142,7 +142,7 @@ Use the `size` attribute to change a card's size.
   </footer>
 </wa-card>
 
-<wa-card with-footer size="large">
+<wa-card size="large">
   This is a large card.
 
   <footer slot="footer" class="wa-split">
diff --git a/docs/docs/components/dialog.md b/docs/docs/components/dialog.md
index b661cc175..9a76105bd 100644
--- a/docs/docs/components/dialog.md
+++ b/docs/docs/components/dialog.md
@@ -10,7 +10,7 @@ keywords: modal
 <!-- cspell:dictionaries lorem-ipsum -->
 
 ```html {.example}
-<wa-dialog label="Dialog" with-header with-footer id="dialog-overview">
+<wa-dialog label="Dialog" id="dialog-overview">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
 </wa-dialog>
@@ -32,7 +32,7 @@ keywords: modal
 Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the dialog.
 
 ```html {.example}
-<wa-dialog label="Dialog" with-header class="dialog-header">
+<wa-dialog label="Dialog" class="dialog-header">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </wa-dialog>
 
@@ -51,7 +51,7 @@ Headers can be used to display titles and more. Use the `with-header` attribute
 Footers can be used to display titles and more. Use the `with-footer` attribute to add a footer to the dialog.
 
 ```html {.example}
-<wa-dialog label="Dialog" with-footer class="dialog-footer">
+<wa-dialog label="Dialog" class="dialog-footer">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
 </wa-dialog>
@@ -71,7 +71,7 @@ Footers can be used to display titles and more. Use the `with-footer` attribute
 You can add the special `data-dialog="close"` attribute to a button inside the dialog to tell it to close without additional JavaScript. Alternatively, you can set the `open` property to `false` to close the dialog programmatically.
 
 ```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-dismiss">
+<wa-dialog label="Dialog" class="dialog-dismiss">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
 </wa-dialog>
@@ -91,7 +91,7 @@ You can add the special `data-dialog="close"` attribute to a button inside the d
 Just use the `--width` custom property to set the dialog's width.
 
 ```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-width" style="--width: 50vw;">
+<wa-dialog label="Dialog" class="dialog-width" style="--width: 50vw;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
 </wa-dialog>
@@ -111,7 +111,7 @@ Just use the `--width` custom property to set the dialog's width.
 By design, a dialog's height will never exceed that of the viewport. As such, dialogs will not scroll with the page ensuring the header and footer are always accessible to the user.
 
 ```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-scrolling">
+<wa-dialog label="Dialog" class="dialog-scrolling">
   <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-border); padding: 0 1rem;">
     <p>Scroll down and give it a try! 👇</p>
   </div>
@@ -133,7 +133,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
 The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/docs/components/icon-button) if needed.
 
 ```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-header-actions">
+<wa-dialog label="Dialog" class="dialog-header-actions">
   <wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
@@ -156,7 +156,7 @@ The header shows a functional close button by default. You can use the `header-a
 If you want the dialog to close when the user clicks on the overlay, add the `light-dismiss` attribute.
 
 ```html {.example}
-<wa-dialog label="Dialog" light-dismiss with-header with-footer class="dialog-light-dismiss">
+<wa-dialog label="Dialog" light-dismiss class="dialog-light-dismiss">
   This dialog will close when you click on the overlay.
   <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
 </wa-dialog>
@@ -180,7 +180,7 @@ To keep the dialog open in such cases, you can cancel the `wa-hide` event. When
 You can use `event.detail.source` to determine which element triggered the request to close. This example prevents the dialog from closing when the overlay is clicked, but allows the close button or [[Escape]] to dismiss it.
 
 ```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-deny-close">
+<wa-dialog label="Dialog" class="dialog-deny-close">
   This dialog will only close when you click the button below.
   <wa-button slot="footer" variant="brand" data-dialog="close">Only this button will close it</wa-button>
 </wa-dialog>
@@ -208,7 +208,7 @@ You can use `event.detail.source` to determine which element triggered the reque
 To give focus to a specific element when the dialog opens, use the `autofocus` attribute.
 
 ```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-focus">
+<wa-dialog label="Dialog" class="dialog-focus">
   <wa-input autofocus placeholder="I will have focus when the dialog is opened"></wa-input>
   <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
 </wa-dialog>
diff --git a/docs/docs/components/drawer.md b/docs/docs/components/drawer.md
index 298a706e5..e5927f955 100644
--- a/docs/docs/components/drawer.md
+++ b/docs/docs/components/drawer.md
@@ -8,7 +8,7 @@ icon: drawer
 <!-- cspell:dictionaries lorem-ipsum -->
 
 ```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-overview">
+<wa-drawer label="Drawer" class="drawer-overview">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
@@ -30,7 +30,7 @@ icon: drawer
 Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the drawer.
 
 ```html {.example}
-<wa-drawer label="Drawer" with-header class="drawer-header">
+<wa-drawer label="Drawer" class="drawer-header">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </wa-drawer>
 
@@ -49,7 +49,7 @@ Headers can be used to display titles and more. Use the `with-header` attribute
 Footers can be used to display titles and more. Use the `with-footer` attribute to add a footer to the drawer.
 
 ```html {.example}
-<wa-drawer label="Drawer" with-footer class="drawer-footer">
+<wa-drawer label="Drawer" class="drawer-footer">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
@@ -69,7 +69,7 @@ Footers can be used to display titles and more. Use the `with-footer` attribute
 You can add the special `data-drawer="close"` attribute to a button inside the drawer to tell it to close without additional JavaScript. Alternatively, you can set the `open` property to `false` to close the drawer programmatically.
 
 ```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-dismiss">
+<wa-drawer label="Drawer" class="drawer-dismiss">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
@@ -89,7 +89,7 @@ You can add the special `data-drawer="close"` attribute to a button inside the d
 By default, drawers slide in from the end. To make the drawer slide in from the start, set the `placement` attribute to `start`.
 
 ```html {.example}
-<wa-drawer label="Drawer" with-header with-footer placement="start" class="drawer-placement-start">
+<wa-drawer label="Drawer" placement="start" class="drawer-placement-start">
   This drawer slides in from the start.
   <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
@@ -109,7 +109,7 @@ By default, drawers slide in from the end. To make the drawer slide in from the
 To make the drawer slide in from the top, set the `placement` attribute to `top`.
 
 ```html {.example}
-<wa-drawer label="Drawer" with-header with-footer placement="top" class="drawer-placement-top">
+<wa-drawer label="Drawer" placement="top" class="drawer-placement-top">
   This drawer slides in from the top.
   <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
@@ -129,7 +129,7 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
 To make the drawer slide in from the bottom, set the `placement` attribute to `bottom`.
 
 ```html {.example}
-<wa-drawer label="Drawer" with-header with-footer placement="bottom" class="drawer-placement-bottom">
+<wa-drawer label="Drawer" placement="bottom" class="drawer-placement-bottom">
   This drawer slides in from the bottom.
   <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
@@ -149,7 +149,7 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
 Use the `--size` custom property to set the drawer's size. This will be applied to the drawer's width or height depending on its `placement`.
 
 ```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-custom-size" style="--size: 50vw;">
+<wa-drawer label="Drawer" class="drawer-custom-size" style="--size: 50vw;">
   This drawer is always 50% of the viewport.
   <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
@@ -169,7 +169,7 @@ Use the `--size` custom property to set the drawer's size. This will be applied
 By design, a drawer's height will never exceed 100% of its container. As such, drawers will not scroll with the page to ensure the header and footer are always accessible to the user.
 
 ```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-scrolling">
+<wa-drawer label="Drawer" class="drawer-scrolling">
   <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-border); padding: 0 1rem;">
     <p>Scroll down and give it a try! 👇</p>
   </div>
@@ -191,7 +191,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
 The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/docs/components/icon-button) if needed.
 
 ```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-header-actions">
+<wa-drawer label="Drawer" class="drawer-header-actions">
   <wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
@@ -214,7 +214,7 @@ The header shows a functional close button by default. You can use the `header-a
 If you want the drawer to close when the user clicks on the overlay, add the `light-dismiss` attribute.
 
 ```html {.example}
-<wa-drawer label="Drawer" light-dismiss with-header with-footer class="drawer-light-dismiss">
+<wa-drawer label="Drawer" light-dismiss class="drawer-light-dismiss">
   This drawer will close when you click on the overlay.
   <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
@@ -238,7 +238,7 @@ To keep the drawer open in such cases, you can cancel the `wa-hide` event. When
 You can use `event.detail.source` to determine what triggered the request to close. This example prevents the drawer from closing when the overlay is clicked, but allows the close button or [[Escape]] to dismiss it.
 
 ```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-deny-close">
+<wa-drawer label="Drawer" class="drawer-deny-close">
   This drawer will only close when you click the button below.
   <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
@@ -266,7 +266,7 @@ You can use `event.detail.source` to determine what triggered the request to clo
 By default, the drawer's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the `autofocus` attribute to it as shown below.
 
 ```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-focus">
+<wa-drawer label="Drawer" class="drawer-focus">
   <wa-input autofocus placeholder="I will have focus when the drawer is opened"></wa-input>
   <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
diff --git a/docs/docs/components/page-samples/documentation.md b/docs/docs/components/page-samples/documentation.md
index f5f989bf4..94196af1c 100644
--- a/docs/docs/components/page-samples/documentation.md
+++ b/docs/docs/components/page-samples/documentation.md
@@ -176,7 +176,7 @@ eleventyExcludeFromCollections: true
   </footer>
   <aside slot="aside">
     <h2 class="wa-heading-m">Discover More Birds</h2>
-    <wa-card with-image>
+    <wa-card>
       <div slot="image" class="wa-frame">
         <img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
       </div>
@@ -185,7 +185,7 @@ eleventyExcludeFromCollections: true
         <span class="wa-caption-s" lang="la"><em>Asio otus</em></span>
       </div>
     </wa-card>
-    <wa-card with-image>
+    <wa-card>
       <div slot="image" class="wa-frame">
         <img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
       </div>
@@ -194,7 +194,7 @@ eleventyExcludeFromCollections: true
         <span class="wa-caption-s" lang="la"><em>Surnia ulula</em></span>
       </div>
     </wa-card>
-    <wa-card with-image>
+    <wa-card>
       <div slot="image" class="wa-frame">
         <img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
       </div>
diff --git a/docs/docs/components/page.md b/docs/docs/components/page.md
index 3f780d15c..a81ad9cbd 100644
--- a/docs/docs/components/page.md
+++ b/docs/docs/components/page.md
@@ -168,7 +168,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
   </footer>
   <aside slot="aside" class="wa-desktop-only">
     <h2 class="wa-heading-m">Discover More Birds</h2>
-    <wa-card with-image>
+    <wa-card>
       <div slot="image" class="wa-frame">
         <img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
       </div>
@@ -177,7 +177,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
         <span class="wa-caption-s" lang="la"><em>Asio otus</em></span>
       </div>
     </wa-card>
-    <wa-card with-image>
+    <wa-card>
       <div slot="image" class="wa-frame">
         <img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
       </div>
@@ -186,7 +186,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
         <span class="wa-caption-s" lang="la"><em>Surnia ulula</em></span>
       </div>
     </wa-card>
-    <wa-card with-image>
+    <wa-card>
       <div slot="image" class="wa-frame">
         <img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
       </div>
diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md
index 3772181bf..c142c3576 100644
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -667,7 +667,7 @@ hasOutline: false
   </wa-details>
 </form>
 
-<wa-dialog id="icon-chooser" label="Browse Icons" with-header>
+<wa-dialog id="icon-chooser" label="Browse Icons">
   <div style="display: grid; grid-template-rows: minmax(0, auto) minmax(0, 1fr); height: 100%; gap: 1rem;">
     <div style="display: flex; gap: 1.25rem;">
       <wa-input name="icon-search" autofocus placeholder="Search Icons" clearable style="flex: 1 1 auto;">
@@ -2139,7 +2139,7 @@ hasOutline: false
       </div>
     </section>
     <section class="strata message-composer">
-      <wa-card with-header with-footer class="card-header card-footer">
+      <wa-card class="card-header card-footer">
         <div slot="header">
           <div class="grouped-buttons">
             <wa-icon-button id="bold" name="bold" label="Bold"></wa-icon-button>
diff --git a/docs/docs/patterns/app/activity-log.md b/docs/docs/patterns/app/activity-log.md
index 1b5cd30a2..ddbb75ca4 100644
--- a/docs/docs/patterns/app/activity-log.md
+++ b/docs/docs/patterns/app/activity-log.md
@@ -268,7 +268,7 @@ description: 'Track and organize recent user actions or events.'
 
 ## Divider Separated
 ```html {.example}
-<wa-card with-header style="max-width: 54ch; margin: 0 auto;">
+<wa-card style="max-width: 54ch; margin: 0 auto;">
   <div slot="header" class="wa-split">
     <div>
       <span>Notifications</span>
diff --git a/docs/docs/patterns/app/comments.md b/docs/docs/patterns/app/comments.md
index cabc4759a..fa46e825a 100644
--- a/docs/docs/patterns/app/comments.md
+++ b/docs/docs/patterns/app/comments.md
@@ -101,7 +101,7 @@ isPro: true
 ## Rich Card with Multiple Actions
 
 ```html {.example}
-<wa-card with-header with-footer style="max-width: 60ch; margin: auto">
+<wa-card style="max-width: 60ch; margin: auto">
   <div slot="header">
     <h3 class="wa-heading-s">I watched...</h3>
   </div>
@@ -139,7 +139,7 @@ isPro: true
 ## With Preview Pane
 ```html{.example}
 <div style="max-width: 60ch; margin: 0 auto;">
-  <wa-card class="wa-border-radius-square" with-footer>
+  <wa-card class="wa-border-radius-square">
     <h3 class="wa-heading-m">Add a comment</h3>
     <wa-tab-group>
       <wa-tab panel="write">Write</wa-tab>
diff --git a/docs/docs/patterns/app/empty-state.md b/docs/docs/patterns/app/empty-state.md
index ae9417b08..bb11f8d1e 100644
--- a/docs/docs/patterns/app/empty-state.md
+++ b/docs/docs/patterns/app/empty-state.md
@@ -31,7 +31,7 @@ isPro: true
 ## With Templates
 
 ```html {.example}
-<wa-card with-header with-footer style="max-width: 70ch; margin: auto">
+<wa-card style="max-width: 70ch; margin: auto">
   <div slot="header" class="wa-stack wa-gap-xs">
     <h2 class="wa-heading-m">Projects</h2>
   </div>
diff --git a/docs/docs/patterns/app/grid-list.md b/docs/docs/patterns/app/grid-list.md
index 3d979797d..0de1fa46b 100644
--- a/docs/docs/patterns/app/grid-list.md
+++ b/docs/docs/patterns/app/grid-list.md
@@ -8,7 +8,7 @@ isPro: true
 
 ```html {.example}
 <div class="wa-grid" style="--min-column-size: 30ch;">
-  <wa-card with-footer>
+  <wa-card>
     <div class="wa-flank:end">
       <div class="wa-stack wa-gap-xs">
         <div class="wa-cluster wa-gap-xs">
@@ -30,7 +30,7 @@ isPro: true
       </wa-button>
     </div>
   </wa-card>
-  <wa-card with-footer>
+  <wa-card>
     <div class="wa-flank:end">
       <div class="wa-stack wa-gap-xs">
         <div class="wa-cluster wa-gap-xs">
@@ -52,7 +52,7 @@ isPro: true
       </wa-button>
     </div>
   </wa-card>
-  <wa-card with-footer>
+  <wa-card>
     <div class="wa-flank:end">
       <div class="wa-stack wa-gap-xs">
         <h3 class="wa-heading-s">Rex Tailwag</h3 class="wa-heading-s">
@@ -71,7 +71,7 @@ isPro: true
       </wa-button>
     </div>
   </wa-card>
-  <wa-card with-footer>
+  <wa-card>
     <div class="wa-flank:end">
       <div class="wa-stack wa-gap-xs">
         <h3 class="wa-heading-s">Luna Sniffington</h3 class="wa-heading-s">
@@ -90,7 +90,7 @@ isPro: true
       </wa-button>
     </div>
   </wa-card>
-  <wa-card with-footer>
+  <wa-card>
     <div class="wa-flank:end">
       <div class="wa-stack wa-gap-xs">
         <h3 class="wa-heading-s">Charlie Drooler</h3 class="wa-heading-s">
@@ -109,7 +109,7 @@ isPro: true
       </wa-button>
     </div>
   </wa-card>
-  <wa-card with-footer>
+  <wa-card>
     <div class="wa-flank:end">
       <div class="wa-stack wa-gap-xs">
         <h3 class="wa-heading-s">Daisy Zoomley</h3 class="wa-heading-s">
@@ -135,7 +135,7 @@ isPro: true
 
 ```html {.example}
 <div class="wa-grid" style="--min-column-size: 29ch;">
-  <wa-card with-footer>
+  <wa-card>
     <div class="wa-stack wa-align-items-center wa-gap-xs">
       <div class="wa-frame wa-border-radius-circle">
         <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
@@ -154,7 +154,7 @@ isPro: true
       </wa-button>
     </div>
   </wa-card>
-  <wa-card with-footer>
+  <wa-card>
     <div class="wa-stack wa-align-items-center wa-gap-xs">
       <div class="wa-frame wa-border-radius-circle">
         <img src="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
@@ -173,7 +173,7 @@ isPro: true
       </wa-button>
     </div>
   </wa-card>
-  <wa-card with-footer>
+  <wa-card>
     <div class="wa-stack wa-align-items-center wa-gap-xs">
       <div class="wa-frame wa-border-radius-circle">
         <img src="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
@@ -192,7 +192,7 @@ isPro: true
       </wa-button>
     </div>
   </wa-card>
-<wa-card with-footer>
+<wa-card>
     <div class="wa-stack wa-align-items-center wa-gap-xs">
       <div class="wa-frame wa-border-radius-circle">
         <img src="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
diff --git a/docs/docs/patterns/app/permissions.md b/docs/docs/patterns/app/permissions.md
index dabc27b03..da64f1fd9 100644
--- a/docs/docs/patterns/app/permissions.md
+++ b/docs/docs/patterns/app/permissions.md
@@ -6,7 +6,7 @@ isPro: true
 
 ## With Form Inputs
 ```html{.example}
-<wa-card with-header style="max-width: 72ch; margin: 0 auto;">
+<wa-card style="max-width: 72ch; margin: 0 auto;">
   <div slot="header" class="wa-split">
     <h2 class="wa-heading-m">Invite Team Members</h2>
     <wa-icon name="close"></wa-icon>
diff --git a/docs/docs/patterns/blog.md b/docs/docs/patterns/blog.md
index 62024d8e7..5af951cec 100644
--- a/docs/docs/patterns/blog.md
+++ b/docs/docs/patterns/blog.md
@@ -145,7 +145,7 @@ TODO Page Description
 
 ### Posts List
 ```html{.example}
-<wa-card with-header>
+<wa-card>
   <div slot="header">
     Recent Articles
   </div>
@@ -234,7 +234,7 @@ TODO Page Description
 
 ### Related Posts
 ```html{.example}
-<wa-card with-image with-footer class="card-overview">
+<wa-card class="card-overview">
   <img
     slot="image"
     src="https://plus.unsplash.com/premium_photo-1661382011487-cd3d6b1d9dff?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDc0ODd8&ixlib=rb-4.0.3&q=80&w=1080"
@@ -316,7 +316,7 @@ TODO Page Description
 
 ### Horizontal
 ```html{.example}
-<wa-card with-header with-footer class="social-share-horizontal">
+<wa-card class="social-share-horizontal">
   <div slot="header">
     Share this Article
   </div>
diff --git a/docs/docs/patterns/ecommerce/product-preview.md b/docs/docs/patterns/ecommerce/product-preview.md
index 0a2437c22..e3a7059cf 100644
--- a/docs/docs/patterns/ecommerce/product-preview.md
+++ b/docs/docs/patterns/ecommerce/product-preview.md
@@ -8,7 +8,7 @@ isPro: true
 ## With Product Options
 
 ```html {.example}
-<wa-card with-header>
+<wa-card>
   <div class="wa-split" slot="header">
     <h3 class="wa-heading-l">Stan Smith® Camo Tongue Tee</h3>
     <wa-icon-button name="close" label="Close Preview"></wa-icon-button>
diff --git a/docs/docs/patterns/ecommerce/shopping-cart.md b/docs/docs/patterns/ecommerce/shopping-cart.md
index 0632e8af3..a6544f00b 100644
--- a/docs/docs/patterns/ecommerce/shopping-cart.md
+++ b/docs/docs/patterns/ecommerce/shopping-cart.md
@@ -200,7 +200,7 @@ isPro: true
 ## Drawer
 
 ```html {.example viewport}
-<wa-drawer label="Shopping Cart" with-header with-footer open>
+<wa-drawer label="Shopping Cart" open>
   <div class="wa-stack">
     <article class="wa-flank" style="--flank-size: 6rem">
       <div class="wa-frame wa-border-radius-m">
diff --git a/docs/docs/patterns/news.md b/docs/docs/patterns/news.md
index 29db0ab9a..ee155d87c 100644
--- a/docs/docs/patterns/news.md
+++ b/docs/docs/patterns/news.md
@@ -12,7 +12,7 @@ TODO Page Description
 
 ```html{.example}
 <div>
-  <wa-dialog label="You've run out of free articles... loser" with-header class="dialog-header">
+  <wa-dialog label="You've run out of free articles..." class="dialog-header">
     <wa-button href="#">Register</wa-button>
   Already a subscriber? <a href="#">Login</a>
 </wa-dialog>
diff --git a/docs/docs/utilities/frame.md b/docs/docs/utilities/frame.md
index e86ab1c8f..251f202e2 100644
--- a/docs/docs/utilities/frame.md
+++ b/docs/docs/utilities/frame.md
@@ -48,7 +48,7 @@ Frames are well-suited for images and image placeholders.
 
 ```html {.example}
 <div class="wa-grid" style="--min-column-size: 25ch;">
-  <wa-card with-image>
+  <wa-card>
     <div class="wa-frame:landscape" slot="image">
       <img src="https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?q=20" alt="Grey and white tabby kitten" />
     </div>
@@ -62,7 +62,7 @@ Frames are well-suited for images and image placeholders.
       </div>
     </div>
   </wa-card>
-  <wa-card with-header>
+  <wa-card>
     <div class="wa-frame:landscape" slot="header">
       <div class="wa-stack wa-align-items-center wa-gap-xs wa-caption-m">
         <wa-icon name="paw"></wa-icon>
@@ -79,7 +79,7 @@ Frames are well-suited for images and image placeholders.
       </div>
     </div>
   </wa-card>
-  <wa-card with-image>
+  <wa-card>
     <div class="wa-frame:landscape" slot="image">
       <img src="https://images.unsplash.com/photo-1445499348736-29b6cdfc03b9?q=20" alt="Diluted calico kitten" />
     </div>
@@ -93,7 +93,7 @@ Frames are well-suited for images and image placeholders.
       </div>
     </div>
   </wa-card>
-  <wa-card with-image>
+  <wa-card>
     <div class="wa-frame:landscape" slot="image">
       <img src="https://images.unsplash.com/photo-1517451330947-7809dead78d5?q=20" alt="Short-haired tabby cat" />
     </div>
diff --git a/src/components/card/card.test.ts b/src/components/card/card.test.ts
index 21435f4b5..85ef490c0 100644
--- a/src/components/card/card.test.ts
+++ b/src/components/card/card.test.ts
@@ -27,7 +27,7 @@ describe('<wa-card>', () => {
       describe('when provided an element in the slot "header" to render a header', () => {
         it('should pass accessibility tests', async () => {
           const el = await fixture<WaCard>(
-            html`<wa-card with-header>
+            html`<wa-card>
               <div slot="header">Header Title</div>
               This card has a header. You can put all sorts of things in it!
             </wa-card>`,
@@ -37,7 +37,7 @@ describe('<wa-card>', () => {
 
         it('should render the child content provided.', async () => {
           const el = await fixture<WaCard>(
-            html`<wa-card with-header>
+            html`<wa-card>
               <div slot="header">Header Title</div>
               This card has a header. You can put all sorts of things in it!
             </wa-card>`,
@@ -47,7 +47,7 @@ describe('<wa-card>', () => {
 
         it('render the header content provided.', async () => {
           const el = await fixture<WaCard>(
-            html`<wa-card with-header>
+            html`<wa-card>
               <div slot="header">Header Title</div>
               This card has a header. You can put all sorts of things in it!
             </wa-card>`,
@@ -58,7 +58,7 @@ describe('<wa-card>', () => {
 
         it('accept "header" as an assigned child in the shadow root.', async () => {
           const el = await fixture<WaCard>(
-            html`<wa-card with-header>
+            html`<wa-card>
               <div slot="header">Header Title</div>
               This card has a header. You can put all sorts of things in it!
             </wa-card>`,
@@ -73,7 +73,7 @@ describe('<wa-card>', () => {
       describe('when provided an element in the slot "footer" to render a footer', () => {
         it('should pass accessibility tests', async () => {
           const el = await fixture<WaCard>(
-            html`<wa-card with-footer>
+            html`<wa-card>
               This card has a footer. You can put all sorts of things in it!
 
               <div slot="footer">Footer Content</div>
@@ -84,7 +84,7 @@ describe('<wa-card>', () => {
 
         it('should render the child content provided.', async () => {
           const el = await fixture<WaCard>(
-            html`<wa-card with-footer>
+            html`<wa-card>
               This card has a footer. You can put all sorts of things in it!
 
               <div slot="footer">Footer Content</div>
@@ -95,7 +95,7 @@ describe('<wa-card>', () => {
 
         it('render the footer content provided.', async () => {
           const el = await fixture<WaCard>(
-            html`<wa-card with-footer>
+            html`<wa-card>
               This card has a footer. You can put all sorts of things in it!
 
               <div slot="footer">Footer Content</div>
@@ -107,7 +107,7 @@ describe('<wa-card>', () => {
 
         it('accept "footer" as an assigned child in the shadow root.', async () => {
           const el = await fixture<WaCard>(
-            html`<wa-card with-footer>
+            html`<wa-card>
               This card has a footer. You can put all sorts of things in it!
 
               <div slot="footer">Footer Content</div>
@@ -123,7 +123,7 @@ describe('<wa-card>', () => {
       describe('when provided an element in the slot "image" to render a image', () => {
         it('should pass accessibility tests', async () => {
           const el = await fixture<WaCard>(
-            html`<wa-card with-image>
+            html`<wa-card>
               <img
                 slot="image"
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
@@ -138,7 +138,7 @@ describe('<wa-card>', () => {
 
         it('should render the child content provided.', async () => {
           const el = await fixture<WaCard>(
-            html`<wa-card with-image>
+            html`<wa-card>
               <img
                 slot="image"
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
@@ -155,7 +155,7 @@ describe('<wa-card>', () => {
 
         it('accept "image" as an assigned child in the shadow root.', async () => {
           const el = await fixture<WaCard>(
-            html`<wa-card with-image>
+            html`<wa-card>
               <img
                 slot="image"
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
diff --git a/src/components/dialog/dialog.test.ts b/src/components/dialog/dialog.test.ts
index c9d7482e2..91004e64b 100644
--- a/src/components/dialog/dialog.test.ts
+++ b/src/components/dialog/dialog.test.ts
@@ -12,7 +12,7 @@ describe('<wa-dialog>', () => {
     describe(`with "${fixture.type}" rendering`, () => {
       it('should be visible with the open attribute', async () => {
         const el = await fixture<WaDialog>(html`
-          <wa-dialog with-header open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
+          <wa-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
         `);
 
         expect(getComputedStyle(el).display).to.not.equal('none');
@@ -20,7 +20,7 @@ describe('<wa-dialog>', () => {
 
       it('should not be visible without the open attribute', async () => {
         const el = await fixture<WaDialog>(html`
-          <wa-dialog with-header>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
+          <wa-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
         `);
 
         expect(getComputedStyle(el).display).to.equal('none');
@@ -28,7 +28,7 @@ describe('<wa-dialog>', () => {
 
       it('should emit wa-show and wa-after-show when calling show()', async () => {
         const el = await fixture<WaDialog>(html`
-          <wa-dialog with-header>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
+          <wa-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
         `);
         const showHandler = sinon.spy();
         const afterShowHandler = sinon.spy();
@@ -47,7 +47,7 @@ describe('<wa-dialog>', () => {
 
       it('should emit wa-hide and wa-after-hide when calling hide()', async () => {
         const el = await fixture<WaDialog>(html`
-          <wa-dialog with-header open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
+          <wa-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
         `);
         const hideHandler = sinon.spy();
         const afterHideHandler = sinon.spy();
@@ -66,7 +66,7 @@ describe('<wa-dialog>', () => {
 
       it('should emit wa-show and wa-after-show when setting open = true', async () => {
         const el = await fixture<WaDialog>(html`
-          <wa-dialog with-header>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
+          <wa-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
         `);
         const showHandler = sinon.spy();
         const afterShowHandler = sinon.spy();
@@ -85,7 +85,7 @@ describe('<wa-dialog>', () => {
 
       it('should emit wa-hide and wa-after-hide when setting open = false', async () => {
         const el = await fixture<WaDialog>(html`
-          <wa-dialog with-header open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
+          <wa-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
         `);
         const hideHandler = sinon.spy();
         const afterHideHandler = sinon.spy();
@@ -104,7 +104,7 @@ describe('<wa-dialog>', () => {
 
       it('should not close when wa-hide is prevented', async () => {
         const el = await fixture<WaDialog>(html`
-          <wa-dialog with-header open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
+          <wa-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
         `);
 
         const spy = sinon.spy();
@@ -120,7 +120,7 @@ describe('<wa-dialog>', () => {
       });
 
       it('should allow initial focus to be set', async () => {
-        const el = await fixture<WaDialog>(html` <wa-dialog with-header><wa-input autofocus></wa-input></wa-dialog> `);
+        const el = await fixture<WaDialog>(html` <wa-dialog><wa-input autofocus></wa-input></wa-dialog> `);
         const input = el.querySelector('wa-input')!;
 
         el.open = true;
@@ -131,7 +131,7 @@ describe('<wa-dialog>', () => {
       it('should close when pressing Escape', async () => {
         const hideHandler = sinon.spy();
 
-        const el = await fixture<WaDialog>(html` <wa-dialog with-header open></wa-dialog> `);
+        const el = await fixture<WaDialog>(html` <wa-dialog open></wa-dialog> `);
         el.addEventListener('wa-after-hide', hideHandler);
 
         await clickOnElement(el); // Chromium wants the page to have been clicked prior to closing the dialog.
diff --git a/src/components/drawer/drawer.test.ts b/src/components/drawer/drawer.test.ts
index eae5d7aab..7a9bdd4f1 100644
--- a/src/components/drawer/drawer.test.ts
+++ b/src/components/drawer/drawer.test.ts
@@ -116,7 +116,7 @@ describe('<wa-drawer>', () => {
       });
 
       it('should allow initial focus to be set', async () => {
-        const el = await fixture<WaDrawer>(html` <wa-drawer with-header><wa-input autofocus></wa-input></wa-drawer> `);
+        const el = await fixture<WaDrawer>(html` <wa-drawer><wa-input autofocus></wa-input></wa-drawer> `);
         const input = el.querySelector('wa-input')!;
 
         el.open = true;
diff --git a/src/components/page/page.ts b/src/components/page/page.ts
index 43e3795bc..b9ce7e8f9 100644
--- a/src/components/page/page.ts
+++ b/src/components/page/page.ts
@@ -348,8 +348,6 @@ export default class WaPage extends WebAwesomeElement {
           footer:drawer__footer
         "
         class="navigation-drawer"
-        with-header
-        with-footer
       >
         <slot slot="label" part="navigation-header" name="mobile-navigation-header">
           <slot name=${this.view === 'mobile' ? 'navigation-header' : '___'}></slot>