@cordwainer/cw-elements 1.5.0-alpha.2 → 1.5.0-alpha.4

package/cdn/types/vue/index.d.ts

@@ -1,5 +1,7 @@
 import type { DefineComponent } from "vue";
 
+import type { CwAccordion } from "../../components/accordion/accordion.component.js";
+import type { CwAccordionItem } from "../../components/accordion-item/accordion-item.component.js";
 import type { CwAlert } from "../../components/alert/alert.component.js";
 import type { CwAnimatedImage } from "../../components/animated-image/animated-image.component.js";
 import type { CwAnimation } from "../../components/animation/animation.component.js";
@@ -68,6 +70,8 @@ import type { CwSkeleton } from "../../components/skeleton/skeleton.component.js
 import type { CwSocialLink } from "../../components/social-link/social-link.component.js";
 import type { CwSpinner } from "../../components/spinner/spinner.component.js";
 import type { CwSplitPanel } from "../../components/split-panel/split-panel.component.js";
+import type { CwStepper } from "../../components/stepper/stepper.component.js";
+import type { CwStepperItem } from "../../components/stepper-item/stepper-item.component.js";
 import type { CwSwitch } from "../../components/switch/switch.component.js";
 import type { CwTab } from "../../components/tab/tab.component.js";
 import type { CwTabGroup } from "../../components/tab-group/tab-group.component.js";
@@ -80,6 +84,35 @@ import type { CwTree } from "../../components/tree/tree.component.js";
 import type { CwTreeItem } from "../../components/tree-item/tree-item.component.js";
 import type { CwVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
 
+type CwAccordionProps = {
+  /** When set, more than one accordion item can be open at the same time. By default, opening one closes the rest. */
+  multiple?: CwAccordion["multiple"];
+  /**  */
+  defaultSlot?: CwAccordion["defaultSlot"];
+};
+
+type CwAccordionItemProps = {
+  /** Indicates whether or not the accordion item is open. You can toggle this attribute to show and hide the item, or
+you can use the `show()` and `hide()` methods and this attribute will reflect the item's open state. */
+  open?: CwAccordionItem["open"];
+  /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
+  summary?: CwAccordionItem["summary"];
+  /** Disables the accordion item so it can't be toggled. */
+  disabled?: CwAccordionItem["disabled"];
+  /**  */
+  header?: CwAccordionItem["header"];
+  /**  */
+  body?: CwAccordionItem["body"];
+  /** Emitted when the accordion item opens. */
+  "oncw-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the accordion item opens and all animations are complete. */
+  "oncw-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the accordion item closes. */
+  "oncw-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the accordion item closes and all animations are complete. */
+  "oncw-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type CwAlertProps = {
   /** Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the alert's open state. */
@@ -1772,6 +1805,45 @@ or a function which takes in a `SnapFunctionParams`, and returns a position to s
   "oncw-reposition"?: (e: CustomEvent<never>) => void;
 };
 
+type CwStepperProps = {
+  /** The orientation the steps are laid out in. */
+  orientation?: CwStepper["orientation"];
+  /** In linear mode, a step can only be activated if every step before it is completed (or it's the very next step
+after the last completed one) — this prevents jumping ahead in a required sequence. Off by default, so any step
+can be activated at any time. */
+  linear?: CwStepper["linear"];
+  /**  */
+  defaultSlot?: CwStepper["defaultSlot"];
+};
+
+type CwStepperItemProps = {
+  /** Indicates whether or not this is the current step. Only one step in a `<cw-stepper>` should be active at a time
+— the stepper manages this for you as steps are activated, but you can also set it directly. */
+  active?: CwStepperItem["active"];
+  /** Indicates that this step has been completed. Steppers in `linear` mode use this to gate which steps can be reached. */
+  completed?: CwStepperItem["completed"];
+  /** Disables the step so it can't be activated. */
+  disabled?: CwStepperItem["disabled"];
+  /** Indicates that this step has an error, shown as a distinct visual state on the indicator. */
+  error?: CwStepperItem["error"];
+  /** The step's position within its `<cw-stepper>`, 1-based. Set automatically by the parent stepper — you shouldn't
+need to set this yourself. */
+  index?: CwStepperItem["index"];
+  /** The orientation of the stepper this item belongs to, used to draw the connecting line to the next step. Set
+automatically by the parent stepper — you shouldn't need to set this yourself. */
+  orientation?: CwStepperItem["orientation"];
+  /**  */
+  header?: CwStepperItem["header"];
+  /** Emitted when the step becomes active. */
+  "oncw-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the step becomes active. */
+  "oncw-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the step is no longer active. */
+  "oncw-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the step is no longer active. */
+  "oncw-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type CwSwitchProps = {
   /**  */
   title?: CwSwitch["title"];
@@ -2127,6 +2199,51 @@ type CwTreeItemProps = {
 type CwVisuallyHiddenProps = {};
 
 export type CustomElements = {
+  /**
+   * Accordions group multiple [accordion items](/components/accordion-item), optionally keeping only one
+   * expanded at a time.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<cw-accordion-item>` elements to display.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "cw-accordion": DefineComponent<CwAccordionProps>;
+
+  /**
+   * Accordion items are collapsible panels used inside an [accordion](/components/accordion) — each shows a
+   * brief summary and expands to show additional content.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **cw-show** - Emitted when the accordion item opens.
+   * - **cw-after-show** - Emitted after the accordion item opens and all animations are complete.
+   * - **cw-hide** - Emitted when the accordion item closes.
+   * - **cw-after-hide** - Emitted after the accordion item closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the accordion item.
+   * - **hide()** - Hides the accordion item.
+   *
+   * ### **Slots:**
+   *  - _default_ - The accordion item's main content.
+   * - **summary** - The accordion item's summary. Alternatively, you can use the `summary` attribute.
+   * - **expand-icon** - Optional expand icon to use instead of the default. Works best with `<cw-icon>`.
+   * - **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<cw-icon>`.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **header** - The header that wraps both the summary and the expand/collapse icon.
+   * - **summary** - The container that wraps the summary.
+   * - **summary-icon** - The container that wraps the expand/collapse icons.
+   * - **content** - The accordion item's content.
+   */
+  "cw-accordion-item": DefineComponent<CwAccordionItemProps>;
+
   /**
    * Alerts are used to display important messages inline or as toast notifications.
    * ---
@@ -3696,6 +3813,51 @@ export type CustomElements = {
    */
   "cw-split-panel": DefineComponent<CwSplitPanelProps>;
 
+  /**
+   * Steppers show progress through a sequence of steps — a step indicator for multi-step forms, checkouts,
+   * and onboarding flows.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<cw-stepper-item>` elements to display.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "cw-stepper": DefineComponent<CwStepperProps>;
+
+  /**
+   * Stepper items are individual steps used inside a [stepper](/components/stepper) — a step indicator for
+   * multi-step forms, checkouts, and onboarding flows.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **cw-show** - Emitted when the step becomes active.
+   * - **cw-after-show** - Emitted after the step becomes active.
+   * - **cw-hide** - Emitted when the step is no longer active.
+   * - **cw-after-hide** - Emitted after the step is no longer active.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Moves focus to the step's header.
+   * - **blur()** - Removes focus from the step's header.
+   * - **show()** - Activates the step, making it the current one.
+   * - **hide()** - Deactivates the step. Only the parent `<cw-stepper>` normally needs to call this.
+   *
+   * ### **Slots:**
+   *  - _default_ - The step's label.
+   * - **completed-icon** - Optional icon to use instead of the default checkmark when the step is completed.
+   * - **error-icon** - Optional icon to use instead of the default when the step has an error.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **header** - The clickable header containing the indicator and label.
+   * - **indicator** - The circular indicator showing the step number, or a completed/error icon.
+   * - **label** - The container that wraps the step's label.
+   */
+  "cw-stepper-item": DefineComponent<CwStepperItemProps>;
+
   /**
    * Switches allow the user to toggle an option on or off.
    * ---

package/cdn/vscode.html-custom-data.json

@@ -2,6 +2,50 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
+    {
+      "name": "cw-accordion",
+      "description": "Accordions group multiple [accordion items](/components/accordion-item), optionally keeping only one\nexpanded at a time.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<cw-accordion-item>` elements to display.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "multiple",
+          "description": "When set, more than one accordion item can be open at the same time. By default, opening one closes the rest.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/accordion"
+        }
+      ]
+    },
+    {
+      "name": "cw-accordion-item",
+      "description": "Accordion items are collapsible panels used inside an [accordion](/components/accordion) — each shows a\nbrief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the accordion item opens.\n- **cw-after-show** - Emitted after the accordion item opens and all animations are complete.\n- **cw-hide** - Emitted when the accordion item closes.\n- **cw-after-hide** - Emitted after the accordion item closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion item.\n- **hide()** - Hides the accordion item.\n\n### **Slots:**\n - _default_ - The accordion item's main content.\n- **summary** - The accordion item's summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<cw-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<cw-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The accordion item's content.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the accordion item is open. You can toggle this attribute to show and hide the item, or\nyou can use the `show()` and `hide()` methods and this attribute will reflect the item's open state.",
+          "values": []
+        },
+        {
+          "name": "summary",
+          "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the accordion item so it can't be toggled.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/accordion-item"
+        }
+      ]
+    },
     {
       "name": "cw-alert",
       "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the alert opens.\n- **cw-after-show** - Emitted after the alert opens and all animations are complete.\n- **cw-hide** - Emitted when the alert closes.\n- **cw-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<cw-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<cw-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
@@ -3011,6 +3055,70 @@
         }
       ]
     },
+    {
+      "name": "cw-stepper",
+      "description": "Steppers show progress through a sequence of steps — a step indicator for multi-step forms, checkouts,\nand onboarding flows.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<cw-stepper-item>` elements to display.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "orientation",
+          "description": "The orientation the steps are laid out in.",
+          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
+        },
+        {
+          "name": "linear",
+          "description": "In linear mode, a step can only be activated if every step before it is completed (or it's the very next step\nafter the last completed one) — this prevents jumping ahead in a required sequence. Off by default, so any step\ncan be activated at any time.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/stepper"
+        }
+      ]
+    },
+    {
+      "name": "cw-stepper-item",
+      "description": "Stepper items are individual steps used inside a [stepper](/components/stepper) — a step indicator for\nmulti-step forms, checkouts, and onboarding flows.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the step becomes active.\n- **cw-after-show** - Emitted after the step becomes active.\n- **cw-hide** - Emitted when the step is no longer active.\n- **cw-after-hide** - Emitted after the step is no longer active.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Moves focus to the step's header.\n- **blur()** - Removes focus from the step's header.\n- **show()** - Activates the step, making it the current one.\n- **hide()** - Deactivates the step. Only the parent `<cw-stepper>` normally needs to call this.\n\n### **Slots:**\n - _default_ - The step's label.\n- **completed-icon** - Optional icon to use instead of the default checkmark when the step is completed.\n- **error-icon** - Optional icon to use instead of the default when the step has an error.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The clickable header containing the indicator and label.\n- **indicator** - The circular indicator showing the step number, or a completed/error icon.\n- **label** - The container that wraps the step's label.",
+      "attributes": [
+        {
+          "name": "active",
+          "description": "Indicates whether or not this is the current step. Only one step in a `<cw-stepper>` should be active at a time\n— the stepper manages this for you as steps are activated, but you can also set it directly.",
+          "values": []
+        },
+        {
+          "name": "completed",
+          "description": "Indicates that this step has been completed. Steppers in `linear` mode use this to gate which steps can be reached.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the step so it can't be activated.",
+          "values": []
+        },
+        {
+          "name": "error",
+          "description": "Indicates that this step has an error, shown as a distinct visual state on the indicator.",
+          "values": []
+        },
+        {
+          "name": "index",
+          "description": "The step's position within its `<cw-stepper>`, 1-based. Set automatically by the parent stepper — you shouldn't\nneed to set this yourself.",
+          "values": []
+        },
+        {
+          "name": "orientation",
+          "description": "The orientation of the stepper this item belongs to, used to draw the connecting line to the next step. Set\nautomatically by the parent stepper — you shouldn't need to set this yourself.",
+          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/stepper-item"
+        }
+      ]
+    },
     {
       "name": "cw-switch",
       "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the control loses focus.\n- **cw-change** - Emitted when the control's checked state changes.\n- **cw-input** - Emitted when the control receives input.\n- **cw-focus** - Emitted when the control gains focus.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The switch's label.\n- **help-text** - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--width** - The width of the switch. _(default: undefined)_\n- **--height** - The height of the switch. _(default: undefined)_\n- **--thumb-size** - The size of the thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The control that houses the switch's thumb.\n- **thumb** - The switch's thumb.\n- **label** - The switch's label.\n- **form-control-help-text** - The help text's wrapper.",

package/cdn/web-types.json

@@ -1,11 +1,135 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@cordwainer/cw-elements",
-  "version": "1.5.0-alpha.2",
+  "version": "1.5.0-alpha.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
+        {
+          "name": "cw-accordion",
+          "description": "Accordions group multiple [accordion items](/components/accordion-item), optionally keeping only one\nexpanded at a time.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<cw-accordion-item>` elements to display.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "multiple",
+              "description": "When set, more than one accordion item can be open at the same time. By default, opening one closes the rest.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more `<cw-accordion-item>` elements to display."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              {
+                "name": "multiple",
+                "description": "When set, more than one accordion item can be open at the same time. By default, opening one closes the rest.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "cw-accordion-item",
+          "description": "Accordion items are collapsible panels used inside an [accordion](/components/accordion) — each shows a\nbrief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the accordion item opens.\n- **cw-after-show** - Emitted after the accordion item opens and all animations are complete.\n- **cw-hide** - Emitted when the accordion item closes.\n- **cw-after-hide** - Emitted after the accordion item closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion item.\n- **hide()** - Hides the accordion item.\n\n### **Slots:**\n - _default_ - The accordion item's main content.\n- **summary** - The accordion item's summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<cw-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<cw-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The accordion item's content.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the accordion item is open. You can toggle this attribute to show and hide the item, or\nyou can use the `show()` and `hide()` methods and this attribute will reflect the item's open state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "summary",
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the accordion item so it can't be toggled.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The accordion item's main content." },
+            {
+              "name": "summary",
+              "description": "The accordion item's summary. Alternatively, you can use the `summary` attribute."
+            },
+            {
+              "name": "expand-icon",
+              "description": "Optional expand icon to use instead of the default. Works best with `<cw-icon>`."
+            },
+            {
+              "name": "collapse-icon",
+              "description": "Optional collapse icon to use instead of the default. Works best with `<cw-icon>`."
+            }
+          ],
+          "events": [
+            {
+              "name": "cw-show",
+              "description": "Emitted when the accordion item opens."
+            },
+            {
+              "name": "cw-after-show",
+              "description": "Emitted after the accordion item opens and all animations are complete."
+            },
+            {
+              "name": "cw-hide",
+              "description": "Emitted when the accordion item closes."
+            },
+            {
+              "name": "cw-after-hide",
+              "description": "Emitted after the accordion item closes and all animations are complete."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "header", "type": "HTMLElement" },
+              { "name": "body", "type": "HTMLElement" },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the accordion item is open. You can toggle this attribute to show and hide the item, or\nyou can use the `show()` and `hide()` methods and this attribute will reflect the item's open state.",
+                "type": "boolean"
+              },
+              {
+                "name": "summary",
+                "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the accordion item so it can't be toggled.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-show",
+                "description": "Emitted when the accordion item opens."
+              },
+              {
+                "name": "cw-after-show",
+                "description": "Emitted after the accordion item opens and all animations are complete."
+              },
+              {
+                "name": "cw-hide",
+                "description": "Emitted when the accordion item closes."
+              },
+              {
+                "name": "cw-after-hide",
+                "description": "Emitted after the accordion item closes and all animations are complete."
+              }
+            ]
+          }
+        },
         {
           "name": "cw-alert",
           "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the alert opens.\n- **cw-after-show** - Emitted after the alert opens and all animations are complete.\n- **cw-hide** - Emitted when the alert closes.\n- **cw-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<cw-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<cw-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
@@ -6834,6 +6958,171 @@
             ]
           }
         },
+        {
+          "name": "cw-stepper",
+          "description": "Steppers show progress through a sequence of steps — a step indicator for multi-step forms, checkouts,\nand onboarding flows.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<cw-stepper-item>` elements to display.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "orientation",
+              "description": "The orientation the steps are laid out in.",
+              "value": {
+                "type": "'horizontal' | 'vertical'",
+                "default": "'horizontal'"
+              }
+            },
+            {
+              "name": "linear",
+              "description": "In linear mode, a step can only be activated if every step before it is completed (or it's the very next step\nafter the last completed one) — this prevents jumping ahead in a required sequence. Off by default, so any step\ncan be activated at any time.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more `<cw-stepper-item>` elements to display."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              {
+                "name": "orientation",
+                "description": "The orientation the steps are laid out in.",
+                "type": "'horizontal' | 'vertical'"
+              },
+              {
+                "name": "linear",
+                "description": "In linear mode, a step can only be activated if every step before it is completed (or it's the very next step\nafter the last completed one) — this prevents jumping ahead in a required sequence. Off by default, so any step\ncan be activated at any time.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "cw-stepper-item",
+          "description": "Stepper items are individual steps used inside a [stepper](/components/stepper) — a step indicator for\nmulti-step forms, checkouts, and onboarding flows.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the step becomes active.\n- **cw-after-show** - Emitted after the step becomes active.\n- **cw-hide** - Emitted when the step is no longer active.\n- **cw-after-hide** - Emitted after the step is no longer active.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Moves focus to the step's header.\n- **blur()** - Removes focus from the step's header.\n- **show()** - Activates the step, making it the current one.\n- **hide()** - Deactivates the step. Only the parent `<cw-stepper>` normally needs to call this.\n\n### **Slots:**\n - _default_ - The step's label.\n- **completed-icon** - Optional icon to use instead of the default checkmark when the step is completed.\n- **error-icon** - Optional icon to use instead of the default when the step has an error.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The clickable header containing the indicator and label.\n- **indicator** - The circular indicator showing the step number, or a completed/error icon.\n- **label** - The container that wraps the step's label.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "active",
+              "description": "Indicates whether or not this is the current step. Only one step in a `<cw-stepper>` should be active at a time\n— the stepper manages this for you as steps are activated, but you can also set it directly.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "completed",
+              "description": "Indicates that this step has been completed. Steppers in `linear` mode use this to gate which steps can be reached.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the step so it can't be activated.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "error",
+              "description": "Indicates that this step has an error, shown as a distinct visual state on the indicator.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "index",
+              "description": "The step's position within its `<cw-stepper>`, 1-based. Set automatically by the parent stepper — you shouldn't\nneed to set this yourself.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "orientation",
+              "description": "The orientation of the stepper this item belongs to, used to draw the connecting line to the next step. Set\nautomatically by the parent stepper — you shouldn't need to set this yourself.",
+              "value": {
+                "type": "'horizontal' | 'vertical'",
+                "default": "'horizontal'"
+              }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The step's label." },
+            {
+              "name": "completed-icon",
+              "description": "Optional icon to use instead of the default checkmark when the step is completed."
+            },
+            {
+              "name": "error-icon",
+              "description": "Optional icon to use instead of the default when the step has an error."
+            }
+          ],
+          "events": [
+            {
+              "name": "cw-show",
+              "description": "Emitted when the step becomes active."
+            },
+            {
+              "name": "cw-after-show",
+              "description": "Emitted after the step becomes active."
+            },
+            {
+              "name": "cw-hide",
+              "description": "Emitted when the step is no longer active."
+            },
+            {
+              "name": "cw-after-hide",
+              "description": "Emitted after the step is no longer active."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "header", "type": "HTMLElement" },
+              {
+                "name": "active",
+                "description": "Indicates whether or not this is the current step. Only one step in a `<cw-stepper>` should be active at a time\n— the stepper manages this for you as steps are activated, but you can also set it directly.",
+                "type": "boolean"
+              },
+              {
+                "name": "completed",
+                "description": "Indicates that this step has been completed. Steppers in `linear` mode use this to gate which steps can be reached.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the step so it can't be activated.",
+                "type": "boolean"
+              },
+              {
+                "name": "error",
+                "description": "Indicates that this step has an error, shown as a distinct visual state on the indicator.",
+                "type": "boolean"
+              },
+              {
+                "name": "index",
+                "description": "The step's position within its `<cw-stepper>`, 1-based. Set automatically by the parent stepper — you shouldn't\nneed to set this yourself.",
+                "type": "number"
+              },
+              {
+                "name": "orientation",
+                "description": "The orientation of the stepper this item belongs to, used to draw the connecting line to the next step. Set\nautomatically by the parent stepper — you shouldn't need to set this yourself.",
+                "type": "'horizontal' | 'vertical'"
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-show",
+                "description": "Emitted when the step becomes active."
+              },
+              {
+                "name": "cw-after-show",
+                "description": "Emitted after the step becomes active."
+              },
+              {
+                "name": "cw-hide",
+                "description": "Emitted when the step is no longer active."
+              },
+              {
+                "name": "cw-after-hide",
+                "description": "Emitted after the step is no longer active."
+              }
+            ]
+          }
+        },
         {
           "name": "cw-switch",
           "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the control loses focus.\n- **cw-change** - Emitted when the control's checked state changes.\n- **cw-input** - Emitted when the control receives input.\n- **cw-focus** - Emitted when the control gains focus.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The switch's label.\n- **help-text** - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--width** - The width of the switch. _(default: undefined)_\n- **--height** - The height of the switch. _(default: undefined)_\n- **--thumb-size** - The size of the thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The control that houses the switch's thumb.\n- **thumb** - The switch's thumb.\n- **label** - The switch's label.\n- **form-control-help-text** - The help text's wrapper.",