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

package/dist/index.d.ts

@@ -903,8 +903,6 @@ Flat cards use a bordered surface instead of the default elevated surface. Use t
 
 When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice. */
   clickable?: WarpCard["clickable"];
-  /**  */
-  buttonText?: WarpCard["buttonText"];
 };
 
 export type WarpCardSolidJsProps = {
@@ -920,8 +918,6 @@ Flat cards use a bordered surface instead of the default elevated surface. Use t
 
 When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice. */
   "prop:clickable"?: WarpCard["clickable"];
-  /**  */
-  "prop:buttonText"?: WarpCard["buttonText"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -929,9 +925,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 +956,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 +989,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 +2192,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 +2311,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 +2359,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 +2375,7 @@ export type CustomElements = {
   >;
 
   /**
-   *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -2402,17 +2392,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 +2412,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 +2425,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 +2450,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 +2501,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 +2582,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 +2603,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 +2623,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
    *
@@ -2663,9 +2645,9 @@ export type CustomElements = {
   >;
 
   /**
-   * Card is a layout component used for separating content areas on a page.
+   * Card is a layout component used for grouping interactive 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
    *
@@ -2680,7 +2662,6 @@ export type CustomElements = {
    * - `clickable`: Whether the whole card is interactive.
    *
    * When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.
-   * - `buttonText`: undefined (property only)
    *
    * ## Methods
    *
@@ -2691,7 +2672,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 +2708,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 +2724,11 @@ export type CustomElements = {
   >;
 
   /**
-   * Checkboxes allow users to select multiple options from a list of choices.
-   *
-   * Use with `w-checkbox`.
+   * Checkboxes allow users to select one or more options from a number of choices.
    *
-   * ## 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.
+   * Wrap individual checkboxes in a checkbox group.
    *
-   * 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 +2768,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 +2831,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 +2893,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 +2924,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 +2985,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 +3006,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 +3055,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 +3071,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 +3097,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 +3120,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 +3142,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 +3165,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 +3174,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 +3240,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 +3286,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 +3345,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 +3392,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 +3419,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 +3435,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 +3465,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 +3478,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 +3496,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 +3508,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 +3671,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 +3719,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 +3738,7 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   *
+   * [Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)
    *
    * ## Attributes & Properties
    *
@@ -3748,17 +3757,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 +3779,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 +3794,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 +3821,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 +3877,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 +3963,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 +3986,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 +4009,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
    *
@@ -4033,9 +4034,9 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * Card is a layout component used for separating content areas on a page.
+   * Card is a layout component used for grouping interactive 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
    *
@@ -4050,7 +4051,6 @@ export type CustomElementsSolidJs = {
    * - `clickable`: Whether the whole card is interactive.
    *
    * When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.
-   * - `buttonText`: undefined (property only)
    *
    * ## Methods
    *
@@ -4063,7 +4063,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 +4099,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 +4118,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 +4165,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 +4231,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 +4296,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 +4330,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 +4393,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 +4417,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 +4469,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 +4488,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 +4517,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 +4542,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 +4566,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 +4589,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 +4601,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 +4675,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 +4726,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 +4788,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 +4838,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 +4867,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 +4886,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 +4921,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 +4936,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 +4957,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 +4969,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 +4978,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
    *