@warp-ds/elements 2.10.0 → 2.10.1-next.1

package/dist/index.d.ts

@@ -929,9 +929,6 @@ When set, the card becomes keyboard focusable and Enter or Space triggers a clic
   textContent?: string | number;
 };
 
-/** `WarpCheckbox` component event */
-export type WarpCheckboxElementEvent<E = Event> = TypedEvent<WarpCheckbox, E>;
-
 export type WarpCheckboxProps = {
   /** The name of the checkbox.
 
@@ -963,9 +960,6 @@ Use this to show an externally managed validation error. Required validation als
   invalid?: WarpCheckbox["invalid"];
   /**  */
   input?: WarpCheckbox["input"];
-
-  /**  */
-  onchange?: (e: WarpCheckboxElementEvent) => void;
 };
 
 export type WarpCheckboxSolidJsProps = {
@@ -999,8 +993,6 @@ Use this to show an externally managed validation error. Required validation als
   "prop:invalid"?: WarpCheckbox["invalid"];
   /**  */
   "prop:input"?: WarpCheckbox["input"];
-  /**  */
-  "on:change"?: (e: WarpCheckboxElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -2204,14 +2196,14 @@ export type WarpTabsProps = {
   /** The `id` of the panel that should be active. */
   active?: WarpTabs["active"];
 
-  /** Includes `details.panelId` with the now active tab's ID */
+  /** Includes `details.panelId` with the now active tab panel's ID */
   onchange?: (e: WarpTabsChangeElementEvent) => void;
 };
 
 export type WarpTabsSolidJsProps = {
   /** The `id` of the panel that should be active. */
   "prop:active"?: WarpTabs["active"];
-  /** Includes `details.panelId` with the now active tab's ID */
+  /** Includes `details.panelId` with the now active tab panel's ID */
   "on:change"?: (e: WarpTabsChangeElementEvent) => void;
 
   /** Set the innerHTML of the element */
@@ -2323,6 +2315,8 @@ export type CustomElements = {
   /**
    * A single-line input component used for entering and editing textual or numeric data.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -2369,7 +2363,7 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `suffix`: Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).
-   * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support.
+   * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon.
    *
    * ## Methods
    *
@@ -2385,7 +2379,7 @@ export type CustomElements = {
   >;
 
   /**
-   *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2402,17 +2396,7 @@ export type CustomElements = {
   /**
    * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
    *
-   * ## Accessibility Note
-   * Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)
-   * cannot reference elements across shadow boundaries. This means:
-   * - Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA
-   * - Interactive affixes (buttons) must have their own `aria-label` (already implemented)
-   * - Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work
-   *
-   * For non-interactive labels (e.g., currency symbols), consider including the information in the
-   * main label or placeholder instead of relying on ARIA to announce affix content.
-   *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/text-field/frameworks/elements#prefix-label)
    *
    * ## Attributes & Properties
    *
@@ -2432,9 +2416,7 @@ export type CustomElements = {
   /**
    * Alert is an inline component used for displaying different types of messages.
    *
-   * For accessibility reasons, alert should appear close to the element that triggered it.
-   *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/alert/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2447,9 +2429,9 @@ export type CustomElements = {
   "w-alert": Partial<WarpAlertProps & BaseProps<WarpAlert> & BaseEvents>;
 
   /**
-   * Buttons are used to perform actions, with different visuals for different needs.
+   * Link component to use when creating links that look like buttons.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/link/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2472,9 +2454,10 @@ export type CustomElements = {
 
   /**
    * Performs an action or renders a link with button styling.
+   *
    * Use button variants to match action priority, risk, and context.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/button/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2522,11 +2505,13 @@ export type CustomElements = {
   "w-button": Partial<WarpButtonProps & BaseProps<WarpButton> & BaseEvents>;
 
   /**
+   * Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.
+   *
    * Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights.
    *
    * The component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs.
    *
-   * Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.
+   * [Warp component reference](https://warp-ds.github.io/docs/components/tooltip/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2601,7 +2586,7 @@ export type CustomElements = {
   /**
    * Box is a layout component used for separating content areas on a page.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/box/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2622,9 +2607,10 @@ export type CustomElements = {
 
   /**
    * Shows the navigation structure for the current page.
+   *
    * Renders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2641,7 +2627,7 @@ export type CustomElements = {
    * Represents one item in a `w-breadcrumbs` trail.
    * Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2665,7 +2651,7 @@ export type CustomElements = {
   /**
    * Card is a layout component used for separating content areas on a page.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2691,7 +2677,11 @@ export type CustomElements = {
   "w-card": Partial<WarpCardProps & BaseProps<WarpCard> & BaseEvents>;
 
   /**
+   * Checkboxes allow users to select one or more options from a number of choices.
    *
+   * Wrap individual checkboxes in a checkbox group.
+   *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2723,12 +2713,6 @@ export type CustomElements = {
    * - `validationMessage`: Returns the validation message if the checkbox is invalid, otherwise an empty string (property only) (readonly)
    * - `validity`: Returns the validity state of the checkbox (property only) (readonly)
    *
-   * ## Events
-   *
-   * Events that will be emitted by the component.
-   *
-   * - `change`: undefined
-   *
    * ## Methods
    *
    * Methods that can be called to access component functionality.
@@ -2745,18 +2729,11 @@ export type CustomElements = {
   >;
 
   /**
-   * Checkboxes allow users to select multiple options from a list of choices.
+   * Checkboxes allow users to select one or more options from a number of choices.
    *
-   * Use with `w-checkbox`.
+   * Wrap individual checkboxes in a checkbox group.
    *
-   * ## Architecture Note
-   * This component uses a <div> wrapper instead of the more semantic <fieldset> element.
-   * Note that w-radio-group uses <fieldset>, which provides better accessibility and follows
-   * HTML best practices. This inconsistency exists for historical reasons and may be addressed
-   * in a future major version to align both on the more semantic approach.
-   *
-   * TODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing
-   * backwards compatibility implications (CSS selectors, etc.).
+   * [Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2796,7 +2773,7 @@ export type CustomElements = {
   /**
    * A combobox element for text input with selectable options.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/combo-box/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2859,11 +2836,9 @@ export type CustomElements = {
   >;
 
   /**
-   * An input for dates.
-   *
-   * Uses the `lang` attribute on either the element or on `<html>` to determine the locale options.
+   * A date picker allows the user to select a specific calendar date.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/date-picker/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2923,6 +2898,8 @@ export type CustomElements = {
   /**
    * Expandable is a layout component used for creating expandable content areas on a page.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -2952,6 +2929,8 @@ export type CustomElements = {
   /**
    * Modals (or dialogs) display important information that users need to acknowledge.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3011,6 +2990,8 @@ export type CustomElements = {
   /**
    * The footer section of a modal, typically where you place actions.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
+   *
    * ## CSS Custom Properties
    *
    * CSS variables available for styling the component.
@@ -3030,6 +3011,8 @@ export type CustomElements = {
   /**
    * The header section of a modal, typically where you place the title and a close button.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3077,6 +3060,8 @@ export type CustomElements = {
    *
    * One dot is highlighted to indicate the currently selected page.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/page-indicator/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3091,6 +3076,8 @@ export type CustomElements = {
   /**
    * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/pagination/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3115,6 +3102,8 @@ export type CustomElements = {
   /**
    * Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/pill/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3136,7 +3125,11 @@ export type CustomElements = {
   "w-pill": Partial<WarpPillProps & BaseProps<WarpPill> & BaseEvents>;
 
   /**
+   * Radios allow users to select a single option from a list of choices.
+   *
+   * Wrap individual radio components in a radio group.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -3154,7 +3147,9 @@ export type CustomElements = {
   /**
    * Radios allow users to select a single option from a list of choices.
    *
-   * Use with `w-radio`.
+   * Wrap individual radio components in a radio group.
+   *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -3175,7 +3170,7 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `label`: Alternative to the `label` attribute should you need custom HTML.
-   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.).
+   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
    */
   "w-radio-group": Partial<
     WarpRadioGroupProps & BaseProps<WarpRadioGroup> & BaseEvents
@@ -3184,6 +3179,8 @@ export type CustomElements = {
   /**
    * A dropdown component for selecting a single value.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/select/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3248,6 +3245,8 @@ export type CustomElements = {
   /**
    * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/slider/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3292,6 +3291,8 @@ export type CustomElements = {
    *
    * See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3349,6 +3350,8 @@ export type CustomElements = {
    *
    * Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)
+   *
    * ## Slots
    *
    * Areas where markup can be added to the component.
@@ -3394,7 +3397,9 @@ export type CustomElements = {
   >;
 
   /**
-   * Individual step component that shows a single step in a process
+   * Individual step component that shows a single step in a process.
+   *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -3419,6 +3424,8 @@ export type CustomElements = {
   /**
    * Steps are used to show progress through a process or to guide users through a multi-step task.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3433,6 +3440,8 @@ export type CustomElements = {
   /**
    * The Switch component allows users to toggle between two states.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/switch/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3461,6 +3470,8 @@ export type CustomElements = {
   /**
    * Individual tab component used within w-tabs container.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3472,8 +3483,11 @@ export type CustomElements = {
 
   /**
    * Tab panel component that holds content for individual tabs.
+   *
    * Each tab panel should have a name that matches a corresponding tab.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3487,6 +3501,8 @@ export type CustomElements = {
   /**
    * Tabs are used to organize content by grouping similar information on the same page.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3497,18 +3513,14 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
-   * - `change`: Includes `details.panelId` with the now active tab's ID
+   * - `change`: Includes `details.panelId` with the now active tab panel's ID
    */
   "w-tabs": Partial<WarpTabsProps & BaseProps<WarpTabs> & BaseEvents>;
 
   /**
    * A multi-line text input with built-in form validation, auto-resizing, and styling support.
    *
-   * The component automatically handles:
-   *  - Form integration
-   *  - Auto-resizing based on content and row constraints
-   *  - Built-in validation with customizable error messages
-   *  - Accessibility attributes and labeling
+   * [Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -3664,6 +3676,8 @@ export type CustomElementsSolidJs = {
   /**
    * A single-line input component used for entering and editing textual or numeric data.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3710,7 +3724,7 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `suffix`: Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).
-   * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support.
+   * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon.
    *
    * ## Methods
    *
@@ -3729,7 +3743,7 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -3748,17 +3762,7 @@ export type CustomElementsSolidJs = {
   /**
    * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
    *
-   * ## Accessibility Note
-   * Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)
-   * cannot reference elements across shadow boundaries. This means:
-   * - Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA
-   * - Interactive affixes (buttons) must have their own `aria-label` (already implemented)
-   * - Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work
-   *
-   * For non-interactive labels (e.g., currency symbols), consider including the information in the
-   * main label or placeholder instead of relying on ARIA to announce affix content.
-   *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/text-field/frameworks/elements#prefix-label)
    *
    * ## Attributes & Properties
    *
@@ -3780,9 +3784,7 @@ export type CustomElementsSolidJs = {
   /**
    * Alert is an inline component used for displaying different types of messages.
    *
-   * For accessibility reasons, alert should appear close to the element that triggered it.
-   *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/alert/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -3797,9 +3799,9 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * Buttons are used to perform actions, with different visuals for different needs.
+   * Link component to use when creating links that look like buttons.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/link/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -3824,9 +3826,10 @@ export type CustomElementsSolidJs = {
 
   /**
    * Performs an action or renders a link with button styling.
+   *
    * Use button variants to match action priority, risk, and context.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/button/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -3879,11 +3882,13 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
+   * Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.
+   *
    * Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights.
    *
    * The component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs.
    *
-   * Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.
+   * [Warp component reference](https://warp-ds.github.io/docs/components/tooltip/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -3963,7 +3968,7 @@ export type CustomElementsSolidJs = {
   /**
    * Box is a layout component used for separating content areas on a page.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/box/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -3986,9 +3991,10 @@ export type CustomElementsSolidJs = {
 
   /**
    * Shows the navigation structure for the current page.
+   *
    * Renders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -4008,7 +4014,7 @@ export type CustomElementsSolidJs = {
    * Represents one item in a `w-breadcrumbs` trail.
    * Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -4035,7 +4041,7 @@ export type CustomElementsSolidJs = {
   /**
    * Card is a layout component used for separating content areas on a page.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -4063,7 +4069,11 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
+   * Checkboxes allow users to select one or more options from a number of choices.
+   *
+   * Wrap individual checkboxes in a checkbox group.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -4095,12 +4105,6 @@ export type CustomElementsSolidJs = {
    * - `validationMessage`: Returns the validation message if the checkbox is invalid, otherwise an empty string (property only) (readonly)
    * - `validity`: Returns the validity state of the checkbox (property only) (readonly)
    *
-   * ## Events
-   *
-   * Events that will be emitted by the component.
-   *
-   * - `change`: undefined
-   *
    * ## Methods
    *
    * Methods that can be called to access component functionality.
@@ -4120,18 +4124,11 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * Checkboxes allow users to select multiple options from a list of choices.
+   * Checkboxes allow users to select one or more options from a number of choices.
    *
-   * Use with `w-checkbox`.
+   * Wrap individual checkboxes in a checkbox group.
    *
-   * ## Architecture Note
-   * This component uses a <div> wrapper instead of the more semantic <fieldset> element.
-   * Note that w-radio-group uses <fieldset>, which provides better accessibility and follows
-   * HTML best practices. This inconsistency exists for historical reasons and may be addressed
-   * in a future major version to align both on the more semantic approach.
-   *
-   * TODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing
-   * backwards compatibility implications (CSS selectors, etc.).
+   * [Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -4174,7 +4171,7 @@ export type CustomElementsSolidJs = {
   /**
    * A combobox element for text input with selectable options.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/combo-box/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -4240,11 +4237,9 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * An input for dates.
-   *
-   * Uses the `lang` attribute on either the element or on `<html>` to determine the locale options.
+   * A date picker allows the user to select a specific calendar date.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)
+   * [Warp component reference](https://warp-ds.github.io/docs/components/date-picker/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -4307,6 +4302,8 @@ export type CustomElementsSolidJs = {
   /**
    * Expandable is a layout component used for creating expandable content areas on a page.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4339,6 +4336,8 @@ export type CustomElementsSolidJs = {
   /**
    * Modals (or dialogs) display important information that users need to acknowledge.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4400,6 +4399,8 @@ export type CustomElementsSolidJs = {
   /**
    * The footer section of a modal, typically where you place actions.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
+   *
    * ## CSS Custom Properties
    *
    * CSS variables available for styling the component.
@@ -4422,6 +4423,8 @@ export type CustomElementsSolidJs = {
   /**
    * The header section of a modal, typically where you place the title and a close button.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4472,6 +4475,8 @@ export type CustomElementsSolidJs = {
    *
    * One dot is highlighted to indicate the currently selected page.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/page-indicator/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4489,6 +4494,8 @@ export type CustomElementsSolidJs = {
   /**
    * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/pagination/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4516,6 +4523,8 @@ export type CustomElementsSolidJs = {
   /**
    * Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/pill/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4539,7 +4548,11 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
+   * Radios allow users to select a single option from a list of choices.
+   *
+   * Wrap individual radio components in a radio group.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -4559,7 +4572,9 @@ export type CustomElementsSolidJs = {
   /**
    * Radios allow users to select a single option from a list of choices.
    *
-   * Use with `w-radio`.
+   * Wrap individual radio components in a radio group.
+   *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -4580,7 +4595,7 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `label`: Alternative to the `label` attribute should you need custom HTML.
-   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.).
+   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
    */
   "w-radio-group": Partial<
     WarpRadioGroupProps &
@@ -4592,6 +4607,8 @@ export type CustomElementsSolidJs = {
   /**
    * A dropdown component for selecting a single value.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/select/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4664,6 +4681,8 @@ export type CustomElementsSolidJs = {
   /**
    * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/slider/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4713,6 +4732,8 @@ export type CustomElementsSolidJs = {
    *
    * See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4773,6 +4794,8 @@ export type CustomElementsSolidJs = {
    *
    * Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)
+   *
    * ## Slots
    *
    * Areas where markup can be added to the component.
@@ -4821,7 +4844,9 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * Individual step component that shows a single step in a process
+   * Individual step component that shows a single step in a process.
+   *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -4848,6 +4873,8 @@ export type CustomElementsSolidJs = {
   /**
    * Steps are used to show progress through a process or to guide users through a multi-step task.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4865,6 +4892,8 @@ export type CustomElementsSolidJs = {
   /**
    * The Switch component allows users to toggle between two states.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/switch/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4898,6 +4927,8 @@ export type CustomElementsSolidJs = {
   /**
    * Individual tab component used within w-tabs container.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4911,8 +4942,11 @@ export type CustomElementsSolidJs = {
 
   /**
    * Tab panel component that holds content for individual tabs.
+   *
    * Each tab panel should have a name that matches a corresponding tab.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4929,6 +4963,8 @@ export type CustomElementsSolidJs = {
   /**
    * Tabs are used to organize content by grouping similar information on the same page.
    *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4939,7 +4975,7 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
-   * - `change`: Includes `details.panelId` with the now active tab's ID
+   * - `change`: Includes `details.panelId` with the now active tab panel's ID
    */
   "w-tabs": Partial<
     WarpTabsProps & WarpTabsSolidJsProps & BaseProps<WarpTabs> & BaseEvents
@@ -4948,11 +4984,7 @@ export type CustomElementsSolidJs = {
   /**
    * A multi-line text input with built-in form validation, auto-resizing, and styling support.
    *
-   * The component automatically handles:
-   *  - Form integration
-   *  - Auto-resizing based on content and row constraints
-   *  - Built-in validation with customizable error messages
-   *  - Accessibility attributes and labeling
+   * [Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)
    *
    * ## Attributes & Properties
    *