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 6e100c9c9..095195c85 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 668308790..c112a55bc 100644
--- a/packages/webawesome/docs/docs/components/button.md
+++ b/packages/webawesome/docs/docs/components/button.md
@@ -185,12 +185,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 5507da62f..05b2f4ea9 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 d7b592fd3..861ed38d9 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/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 220ae2e41..e6ad8a2ba 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -29,14 +29,12 @@ Many of these changes and improvements were the direct result of feedback from u
   - Removed `.wa-button`, `.wa-callout` classes
   - Removed `themes/native/*.css` files; use `native.css` to opt into native styles
   - Clarified which utilities classes can be applied to which native elements
-- Renamed the `classic` theme to `shoelace`
-- Removed `<wa-icon-button>`; use `<wa-button><wa-icon name="..." label="..."></wa-icon></wa-button>` instead
-- Completely reworked `<wa-dropdown>` to be easier to use
-  - Added `<wa-dropdown-item>`, greatly simplifying the dropdown's markup structure
-  - Removed `<wa-menu>`, `<wa-menu-item>`, and `<wa-menu-label>`; use `<wa-dropdown-item>` and native headings instead
-- Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"`
-- Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform
-- Renamed certain boolean attributes to be more consistent using the `with-*` and `without-*` pattern:
+- 🚨 BREAKING: Removed the extra dash in the `<wa-carousel>` CSS part name `pagination-item--active` => `pagination-item-active`
+- 🚨 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 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>
               `