@cordwainer/cw-elements 1.5.0-alpha.3 → 1.5.0-alpha.5

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

@@ -65,11 +65,14 @@ import type { CwRelativeTime } from "../../components/relative-time/relative-tim
 import type { CwResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
 import type { CwSecondaryNavigation } from "../../components/secondary-navigation/secondary-navigation.component.js";
 import type { CwSecondaryNavigationItem } from "../../components/secondary-navigation-item/secondary-navigation-item.component.js";
+import type { CwSegmentedButton } from "../../components/segmented-button/segmented-button.component.js";
 import type { CwSelect } from "../../components/select/select.component.js";
 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";
@@ -1659,6 +1662,42 @@ component has no router/URL awareness — consumers set this explicitly based on
   current?: CwSecondaryNavigationItem["current"];
 };
 
+type CwSegmentedButtonProps = {
+  /** A label to use for the segmented button. This won't be displayed on the screen, but it will be announced by
+assistive devices when interacting with the control and is strongly recommended. */
+  label?: CwSegmentedButton["label"];
+  /** The name of the segmented button, submitted as a name/value pair with form data. */
+  name?: CwSegmentedButton["name"];
+  /** The current value of the segmented button, submitted as a name/value pair with form data. */
+  value?: CwSegmentedButton["value"];
+  /** The segmented button's size. Applied to every child `<cw-radio-button>`. */
+  size?: CwSegmentedButton["size"];
+  /** Disables the entire segmented button, blocking interaction and excluding it from constraint validation. */
+  disabled?: CwSegmentedButton["disabled"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be
+in the same document or shadow root for this to work. */
+  form?: CwSegmentedButton["form"];
+  /** Ensures a segment is selected before allowing the containing form to submit. */
+  required?: CwSegmentedButton["required"];
+  /**  */
+  defaultSlot?: CwSegmentedButton["defaultSlot"];
+  /**  */
+  validationInput?: CwSegmentedButton["validationInput"];
+  /**  */
+  defaultValue?: CwSegmentedButton["defaultValue"];
+  /** Gets the validity state object. */
+  validity?: CwSegmentedButton["validity"];
+  /** Gets the validation message. */
+  validationMessage?: CwSegmentedButton["validationMessage"];
+  /** Emitted when the selected value changes. */
+  "oncw-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the segmented button receives user input. */
+  "oncw-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "oncw-invalid"?: (e: CustomEvent<never>) => void;
+};
+
 type CwSelectProps = {
   /** The name of the select, submitted as a name/value pair with form data. */
   name?: CwSelect["name"];
@@ -1803,6 +1842,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"];
@@ -3643,6 +3721,33 @@ export type CustomElements = {
    */
   "cw-secondary-navigation-item": DefineComponent<CwSecondaryNavigationItemProps>;
 
+  /**
+   * Segmented buttons let the user select a single option from a set, styled as a joined row of buttons —
+   * visually like a [button group](/components/button-group), but behaves like a [radio group](/components/radio-group)
+   * (single selection, form-associated value).
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **cw-change** - Emitted when the selected value changes.
+   * - **cw-input** - Emitted when the segmented button receives user input.
+   * - **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the segmented button.
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<cw-radio-button>` elements to display as segments.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "cw-segmented-button": DefineComponent<CwSegmentedButtonProps>;
+
   /**
    * Selects allow you to choose items from a menu of predefined options.
    * ---
@@ -3772,6 +3877,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

@@ -2815,6 +2815,57 @@
         }
       ]
     },
+    {
+      "name": "cw-segmented-button",
+      "description": "Segmented buttons let the user select a single option from a set, styled as a joined row of buttons —\nvisually like a [button group](/components/button-group), but behaves like a [radio group](/components/radio-group)\n(single selection, form-associated value).\n---\n\n\n### **Events:**\n - **cw-change** - Emitted when the selected value changes.\n- **cw-input** - Emitted when the segmented button receives user input.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the segmented button.\n\n### **Slots:**\n - _default_ - One or more `<cw-radio-button>` elements to display as segments.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "A label to use for the segmented button. This won't be displayed on the screen, but it will be announced by\nassistive devices when interacting with the control and is strongly recommended.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name of the segmented button, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The current value of the segmented button, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The segmented button's size. Applied to every child `<cw-radio-button>`.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the entire segmented button, blocking interaction and excluding it from constraint validation.",
+          "values": []
+        },
+        {
+          "name": "form",
+          "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Ensures a segment is selected before allowing the containing form to submit.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/segmented-button"
+        }
+      ]
+    },
     {
       "name": "cw-select",
       "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **cw-change** - Emitted when the control's value changes.\n- **cw-clear** - Emitted when the control's value is cleared.\n- **cw-input** - Emitted when the control receives input.\n- **cw-focus** - Emitted when the control gains focus.\n- **cw-blur** - Emitted when the control loses focus.\n- **cw-show** - Emitted when the select's menu opens.\n- **cw-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **cw-hide** - Emitted when the select's menu closes.\n- **cw-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\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- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<cw-option>` elements. You can use `<cw-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
@@ -3055,6 +3106,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,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@cordwainer/cw-elements",
-  "version": "1.5.0-alpha.3",
+  "version": "1.5.0-alpha.5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -6400,6 +6400,135 @@
             "events": []
           }
         },
+        {
+          "name": "cw-segmented-button",
+          "description": "Segmented buttons let the user select a single option from a set, styled as a joined row of buttons —\nvisually like a [button group](/components/button-group), but behaves like a [radio group](/components/radio-group)\n(single selection, form-associated value).\n---\n\n\n### **Events:**\n - **cw-change** - Emitted when the selected value changes.\n- **cw-input** - Emitted when the segmented button receives user input.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the segmented button.\n\n### **Slots:**\n - _default_ - One or more `<cw-radio-button>` elements to display as segments.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "A label to use for the segmented button. This won't be displayed on the screen, but it will be announced by\nassistive devices when interacting with the control and is strongly recommended.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "name",
+              "description": "The name of the segmented button, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "'option'" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the segmented button, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "The segmented button's size. Applied to every child `<cw-radio-button>`.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the entire segmented button, blocking interaction and excluding it from constraint validation.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "Ensures a segment is selected before allowing the containing form to submit.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more `<cw-radio-button>` elements to display as segments."
+            }
+          ],
+          "events": [
+            {
+              "name": "cw-change",
+              "description": "Emitted when the selected value changes."
+            },
+            {
+              "name": "cw-input",
+              "description": "Emitted when the segmented button receives user input."
+            },
+            {
+              "name": "cw-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "validationInput", "type": "HTMLInputElement" },
+              {
+                "name": "label",
+                "description": "A label to use for the segmented button. This won't be displayed on the screen, but it will be announced by\nassistive devices when interacting with the control and is strongly recommended.",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "The name of the segmented button, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the segmented button, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "The segmented button's size. Applied to every child `<cw-radio-button>`.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the entire segmented button, blocking interaction and excluding it from constraint validation.",
+                "type": "boolean"
+              },
+              {
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.",
+                "type": "string"
+              },
+              {
+                "name": "required",
+                "description": "Ensures a segment is selected before allowing the containing form to submit.",
+                "type": "boolean"
+              },
+              { "name": "defaultValue", "type": "string" },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object."
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message."
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-change",
+                "description": "Emitted when the selected value changes."
+              },
+              {
+                "name": "cw-input",
+                "description": "Emitted when the segmented button receives user input."
+              },
+              {
+                "name": "cw-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              }
+            ]
+          }
+        },
         {
           "name": "cw-select",
           "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **cw-change** - Emitted when the control's value changes.\n- **cw-clear** - Emitted when the control's value is cleared.\n- **cw-input** - Emitted when the control receives input.\n- **cw-focus** - Emitted when the control gains focus.\n- **cw-blur** - Emitted when the control loses focus.\n- **cw-show** - Emitted when the select's menu opens.\n- **cw-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **cw-hide** - Emitted when the select's menu closes.\n- **cw-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\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- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<cw-option>` elements. You can use `<cw-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
@@ -6958,6 +7087,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.",