From 453e8ff50163cb82252d2210aa9cd6952ae64012 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 26 Jun 2025 13:11:00 -0400
Subject: [PATCH] rename caret => with-caret (#1079)

---
 .../docs/_includes/visual-tests/size.njk      | 12 +++++-----
 .../docs/docs/components/button-group.md      |  2 +-
 .../webawesome/docs/docs/components/button.md |  8 +++----
 .../docs/docs/components/divider.md           |  2 +-
 .../docs/docs/components/dropdown.md          | 22 +++++++++----------
 .../webawesome/docs/docs/experimental/size.md |  8 +++----
 .../docs/docs/experimental/themer.md          | 10 ++++-----
 .../docs/docs/resources/changelog.md          |  3 ++-
 .../src/components/button/button.test.ts      |  4 ++--
 .../src/components/button/button.ts           |  6 ++---
 10 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/packages/webawesome/docs/_includes/visual-tests/size.njk b/packages/webawesome/docs/_includes/visual-tests/size.njk
index df0bc6f15..418159dad 100644
--- a/packages/webawesome/docs/_includes/visual-tests/size.njk
+++ b/packages/webawesome/docs/_includes/visual-tests/size.njk
@@ -258,14 +258,14 @@
       <th><code>small</code>/<code>s</code></th>
       <td>
         <wa-dropdown size="small">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
+          <wa-button slot="trigger" with-caret>Dropdown</wa-button>
           <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
           <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
         </wa-dropdown>
       </td>
       <td>
         <wa-dropdown class="wa-size-s">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
+          <wa-button slot="trigger" with-caret>Dropdown</wa-button>
           <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
           <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
         </wa-dropdown>
@@ -275,14 +275,14 @@
       <th><code>medium</code>/<code>m</code></th>
       <td>
         <wa-dropdown size="medium">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
+          <wa-button slot="trigger" with-caret>Dropdown</wa-button>
           <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
           <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
         </wa-dropdown>
       </td>
       <td>
         <wa-dropdown class="wa-size-m">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
+          <wa-button slot="trigger" with-caret>Dropdown</wa-button>
           <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
           <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
         </wa-dropdown>
@@ -292,14 +292,14 @@
       <th><code>large</code>/<code>l</code></th>
       <td>
         <wa-dropdown size="large">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
+          <wa-button slot="trigger" with-caret>Dropdown</wa-button>
           <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
           <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
         </wa-dropdown>
       </td>
       <td>
         <wa-dropdown class="wa-size-l">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
+          <wa-button slot="trigger" with-caret>Dropdown</wa-button>
           <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
           <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
         </wa-dropdown>
diff --git a/packages/webawesome/docs/docs/components/button-group.md b/packages/webawesome/docs/docs/components/button-group.md
index afe4070a2..e20b80324 100644
--- a/packages/webawesome/docs/docs/components/button-group.md
+++ b/packages/webawesome/docs/docs/components/button-group.md
@@ -165,7 +165,7 @@ Dropdowns can be placed into button groups.
 <wa-button-group label="Example Button Group">
   <wa-button>Button</wa-button>
   <wa-dropdown>
-    <wa-button slot="trigger" caret>Dropdown</wa-button>
+    <wa-button slot="trigger" with-caret>Dropdown</wa-button>
     <wa-dropdown-item>Item 1</wa-dropdown-item>
     <wa-dropdown-item>Item 2</wa-dropdown-item>
     <wa-dropdown-item>Item 3</wa-dropdown-item>
diff --git a/packages/webawesome/docs/docs/components/button.md b/packages/webawesome/docs/docs/components/button.md
index 8866958e0..f3a2ed7db 100644
--- a/packages/webawesome/docs/docs/components/button.md
+++ b/packages/webawesome/docs/docs/components/button.md
@@ -186,12 +186,12 @@ Use the `start` and `end` slots to add presentational elements like `<wa-icon>`
 
 ### Caret
 
-Use the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
+Use the `with-caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
 
 ```html {.example}
-<wa-button size="small" caret>Small</wa-button>
-<wa-button size="medium" caret>Medium</wa-button>
-<wa-button size="large" caret>Large</wa-button>
+<wa-button size="small" with-caret>Small</wa-button>
+<wa-button size="medium" with-caret>Medium</wa-button>
+<wa-button size="large" with-caret>Large</wa-button>
 ```
 
 ### Loading
diff --git a/packages/webawesome/docs/docs/components/divider.md b/packages/webawesome/docs/docs/components/divider.md
index 22533eadb..60da1dd55 100644
--- a/packages/webawesome/docs/docs/components/divider.md
+++ b/packages/webawesome/docs/docs/components/divider.md
@@ -59,7 +59,7 @@ Use dividers in [menus](/docs/components/menu) to visually group menu items.
 
 ```html {.example}
 <wa-dropdown style="max-width: 200px;">
-  <wa-button slot="trigger" caret>Menu</wa-button>
+  <wa-button slot="trigger" with-caret>Menu</wa-button>
   <wa-dropdown-item value="1">Option 1</wa-dropdown-item>
   <wa-dropdown-item value="2">Option 2</wa-dropdown-item>
   <wa-dropdown-item value="3">Option 3</wa-dropdown-item>
diff --git a/packages/webawesome/docs/docs/components/dropdown.md b/packages/webawesome/docs/docs/components/dropdown.md
index 4c6cee2f0..7c07c97b4 100644
--- a/packages/webawesome/docs/docs/components/dropdown.md
+++ b/packages/webawesome/docs/docs/components/dropdown.md
@@ -11,7 +11,7 @@ Dropdowns are designed to work well with [dropdown items](/docs/components/dropd
 
 ```html {.example}
 <wa-dropdown>
-  <wa-button slot="trigger" caret>Dropdown</wa-button>
+  <wa-button slot="trigger" with-caret>Dropdown</wa-button>
 
   <wa-dropdown-item>
     <wa-icon slot="icon" name="scissors"></wa-icon>
@@ -51,7 +51,7 @@ When an item is selected, the `wa-select` event will be emitted by the dropdown.
 ```html {.example}
 <div class="dropdown-selection">
   <wa-dropdown>
-    <wa-button slot="trigger" caret>View</wa-button>
+    <wa-button slot="trigger" with-caret>View</wa-button>
     <wa-dropdown-item value="full-screen">Enter full screen</wa-dropdown-item>
     <wa-dropdown-item value="actual">Actual size</wa-dropdown-item>
     <wa-dropdown-item value="zoom-in">Zoom in</wa-dropdown-item>
@@ -79,7 +79,7 @@ Use the `icon` slot to add icons to [dropdown items](/docs/components/dropdown-i
 
 ```html {.example}
 <wa-dropdown>
-  <wa-button slot="trigger" caret>Edit</wa-button>
+  <wa-button slot="trigger" with-caret>Edit</wa-button>
 
   <wa-dropdown-item value="cut">
     <wa-icon slot="icon" name="scissors"></wa-icon>
@@ -109,7 +109,7 @@ Use any heading, e.g. `<h1>`–`<h6>` to add labels and the [`<wa-divider>`](/do
 
 ```html {.example}
 <wa-dropdown>
-  <wa-button slot="trigger" caret>Device</wa-button>
+  <wa-button slot="trigger" with-caret>Device</wa-button>
 
   <h3>Type</h3>
   <wa-dropdown-item value="phone">Phone</wa-dropdown-item>
@@ -128,7 +128,7 @@ Use the `details` slot to display details, such as keyboard shortcuts, inside [d
 
 ```html {.example}
 <wa-dropdown>
-  <wa-button slot="trigger" caret>Message</wa-button>
+  <wa-button slot="trigger" with-caret>Message</wa-button>
 
   <wa-dropdown-item value="reply">
     Reply
@@ -166,7 +166,7 @@ You can turn a [dropdown item](/docs/components/dropdown-item) into a checkable
 ```html {.example}
 <div class="dropdown-checkboxes">
   <wa-dropdown>
-    <wa-button slot="trigger" caret>View</wa-button>
+    <wa-button slot="trigger" with-caret>View</wa-button>
 
     <wa-dropdown-item type="checkbox" value="canvas" checked>Show canvas</wa-dropdown-item>
     <wa-dropdown-item type="checkbox" value="grid" checked>Show grid</wa-dropdown-item>
@@ -204,7 +204,7 @@ Add `variant="danger"` to any [dropdown item](/docs/components/dropdown-item) to
 
 ```html {.example}
 <wa-dropdown>
-  <wa-button slot="trigger" caret>Project</wa-button>
+  <wa-button slot="trigger" with-caret>Project</wa-button>
 
   <wa-dropdown-item value="share">
     <wa-icon slot="icon" name="share"></wa-icon>
@@ -258,7 +258,7 @@ The distance from the panel to the trigger can be customized using the `distance
 
 ```html {.example}
 <wa-dropdown distance="30">
-  <wa-button slot="trigger" caret>Edit</wa-button>
+  <wa-button slot="trigger" with-caret>Edit</wa-button>
 
   <wa-dropdown-item>Cut</wa-dropdown-item>
   <wa-dropdown-item>Copy</wa-dropdown-item>
@@ -277,7 +277,7 @@ The offset of the panel along the trigger can be customized using the `offset` a
 
 ```html {.example}
 <wa-dropdown offset="30">
-  <wa-button slot="trigger" caret>Edit</wa-button>
+  <wa-button slot="trigger" with-caret>Edit</wa-button>
 
   <wa-dropdown-item>Cut</wa-dropdown-item>
   <wa-dropdown-item>Copy</wa-dropdown-item>
@@ -297,7 +297,7 @@ To create submenus, nest [dropdown items](/docs/components/dropdown-item) inside
 ```html {.example}
 <div class="dropdown-submenus">
   <wa-dropdown>
-    <wa-button slot="trigger" caret>Export</wa-button>
+    <wa-button slot="trigger" with-caret>Export</wa-button>
 
     <wa-dropdown-item>
       Documents
@@ -359,7 +359,7 @@ Add the `disabled` attribute to any [dropdown item](/docs/components/dropdown-it
 
 ```html {.example}
 <wa-dropdown>
-  <wa-button slot="trigger" caret>Payment method</wa-button>
+  <wa-button slot="trigger" with-caret>Payment method</wa-button>
 
   <wa-dropdown-item value="cash">Cash</wa-dropdown-item>
   <wa-dropdown-item value="check" disabled>Personal check</wa-dropdown-item>
diff --git a/packages/webawesome/docs/docs/experimental/size.md b/packages/webawesome/docs/docs/experimental/size.md
index 4c91e30c9..e667c3d04 100644
--- a/packages/webawesome/docs/docs/experimental/size.md
+++ b/packages/webawesome/docs/docs/experimental/size.md
@@ -39,7 +39,7 @@ Dropdown:
 <p>
   Small dropdown:
   <wa-dropdown size="small">
-    <wa-button slot="trigger" caret>Dropdown</wa-button>
+    <wa-button slot="trigger" with-caret>Dropdown</wa-button>
     <wa-dropdown-item>Dropdown Item 1</wa-dropdown-item>
     <wa-dropdown-item>Dropdown Item 2</wa-dropdown-item>
     <wa-dropdown-item>Dropdown Item 3</wa-dropdown-item>
@@ -49,7 +49,7 @@ Dropdown:
 <p>
   Small menu:
   <wa-dropdown>
-    <wa-button slot="trigger" caret>Dropdown</wa-button>
+    <wa-button slot="trigger" with-caret>Dropdown</wa-button>
     <wa-dropdown-item size="small">Dropdown Item 1</wa-dropdown-item>
     <wa-dropdown-item size="small">Dropdown Item 2</wa-dropdown-item>
     <wa-dropdown-item size="small">Dropdown Item 3</wa-dropdown-item>
@@ -59,7 +59,7 @@ Dropdown:
 <p>
   Small menu item:
   <wa-dropdown>
-    <wa-button slot="trigger" caret>Dropdown</wa-button>
+    <wa-button slot="trigger" with-caret>Dropdown</wa-button>
     <wa-dropdown-item size="small">Dropdown Item 1</wa-dropdown-item>
     <wa-dropdown-item size="small">Dropdown Item 2</wa-dropdown-item>
     <wa-dropdown-item size="small">Dropdown Item 3</wa-dropdown-item>
@@ -69,7 +69,7 @@ Dropdown:
 <p>
   No size:
   <wa-dropdown>
-    <wa-button slot="trigger" caret>Dropdown</wa-button>
+    <wa-button slot="trigger" with-caret>Dropdown</wa-button>
     <wa-dropdown-item>Dropdown Item 1</wa-dropdown-item>
     <wa-dropdown-item>Dropdown Item 2</wa-dropdown-item>
     <wa-dropdown-item>Dropdown Item 3</wa-dropdown-item>
diff --git a/packages/webawesome/docs/docs/experimental/themer.md b/packages/webawesome/docs/docs/experimental/themer.md
index e7806e740..22b214cf7 100644
--- a/packages/webawesome/docs/docs/experimental/themer.md
+++ b/packages/webawesome/docs/docs/experimental/themer.md
@@ -2319,7 +2319,7 @@ hasOutline: false
             <td style="text-align: center;"><wa-tag variant="warning" size="small">Pending</wa-tag></td>
             <td>
               <wa-dropdown>
-                <wa-button slot="trigger" caret size="small">Action</wa-button>
+                <wa-button slot="trigger" with-caret size="small">Action</wa-button>
                 <wa-dropdown-item>
                   <wa-icon slot="start" name="check" variant="regular"></wa-icon>
                   Resolved
@@ -2347,7 +2347,7 @@ hasOutline: false
             <td style="text-align: center;"><wa-tag variant="success" size="small">Resolved</wa-tag></td>
             <td>
               <wa-dropdown>
-                <wa-button slot="trigger" caret size="small">Action</wa-button>
+                <wa-button slot="trigger" with-caret size="small">Action</wa-button>
                 <wa-dropdown-item>
                   <wa-icon slot="start" name="check" variant="regular"></wa-icon>
                   Resolved
@@ -2375,7 +2375,7 @@ hasOutline: false
             <td style="text-align: center;"><wa-tag variant="warning" size="small">Pending</wa-tag></td>
             <td>
               <wa-dropdown>
-                <wa-button slot="trigger" caret size="small">Action</wa-button>
+                <wa-button slot="trigger" with-caret size="small">Action</wa-button>
                 <wa-dropdown-item>
                   <wa-icon slot="start" name="check" variant="regular"></wa-icon>
                   Resolved
@@ -2403,7 +2403,7 @@ hasOutline: false
             <td style="text-align: center;"><wa-tag variant="danger" size="small">Bounced</wa-tag></td>
             <td>
               <wa-dropdown>
-                <wa-button slot="trigger" caret size="small">Action</wa-button>
+                <wa-button slot="trigger" with-caret size="small">Action</wa-button>
                 <wa-dropdown-item>
                   <wa-icon slot="start" name="check" variant="regular"></wa-icon>
                   Resolved
@@ -2431,7 +2431,7 @@ hasOutline: false
             <td style="text-align: center;"><wa-tag variant="neutral" size="small">Expired</wa-tag></td>
             <td>
               <wa-dropdown>
-                <wa-button slot="trigger" caret size="small">Action</wa-button>
+                <wa-button slot="trigger" with-caret size="small">Action</wa-button>
                 <wa-dropdown-item>
                   <wa-icon slot="start" name="check" variant="regular"></wa-icon>
                   Resolved
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 03995163a..231056b09 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -23,7 +23,8 @@ During the alpha period, things might break! We take breaking changes very serio
 - 🚨 BREAKING: Renamed the `classic` theme to `shoelace`
 - 🚨 BREAKING: Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
 - 🚨 BREAKING: Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
-- 🚨 BREAKING: Renamed certain boolean attributes to be more consistent using the `with-*` and `without-*` pattern:
+- 🚨 BREAKING: Renamed certain boolean attributes to be consistent using the `with-*` and `without-*` pattern:
+  - `<wa-button caret>` => `<wa-button with-caret>`
   - `<wa-color-picker no-format-toggle>` => `<wa-color-picker without-format-toggle>`
   - `<wa-format-number no-grouping>` => `<wa-format-number without-grouping>`
   - `<wa-input no-spin-buttons>` => `<wa-input without-spin-buttons>`
diff --git a/packages/webawesome/src/components/button/button.test.ts b/packages/webawesome/src/components/button/button.test.ts
index 5edae480d..d1198848e 100644
--- a/packages/webawesome/src/components/button/button.test.ts
+++ b/packages/webawesome/src/components/button/button.test.ts
@@ -75,9 +75,9 @@ describe('<wa-button>', () => {
         });
       });
 
-      describe('when caret', () => {
+      describe('when with-caret', () => {
         it('should have a caret present', async () => {
-          const el = await fixture<WaButton>(html` <wa-button caret>Button Label</wa-button> `);
+          const el = await fixture<WaButton>(html` <wa-button with-caret>Button Label</wa-button> `);
           expect(el.shadowRoot!.querySelector('[part~="caret"]')).to.exist;
         });
       });
diff --git a/packages/webawesome/src/components/button/button.ts b/packages/webawesome/src/components/button/button.ts
index 8b6afe395..61d096ea9 100644
--- a/packages/webawesome/src/components/button/button.ts
+++ b/packages/webawesome/src/components/button/button.ts
@@ -81,7 +81,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
   /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
-  @property({ type: Boolean, reflect: true }) caret = false;
+  @property({ attribute: 'with-caret', type: Boolean, reflect: true }) withCaret = false;
 
   /** Disables the button. Does not apply to link buttons. */
   @property({ type: Boolean }) disabled = false;
@@ -258,7 +258,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
         part="base"
         class=${classMap({
           button: true,
-          caret: this.caret,
+          caret: this.withCaret,
           disabled: this.disabled,
           loading: this.loading,
           rtl: this.localize.dir() === 'rtl',
@@ -286,7 +286,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
         <slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
         <slot name="end" part="end" class="end"></slot>
         ${
-          this.caret
+          this.withCaret
             ? html`
                 <wa-icon part="caret" class="caret" library="system" name="chevron-down" variant="solid"></wa-icon>
               `