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

package/dist/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.10.0-next.24",
+  "version": "2.10.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "w-textfield",
-          "description": "A single-line input component used for entering and editing textual or numeric data.\n---\n\n\n### **Slots:**\n - **suffix** - Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).\n- **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.",
+          "description": "A single-line input component used for entering and editing textual or numeric data.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)\n---\n\n\n### **Slots:**\n - **suffix** - Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).\n- **prefix** - Use with `<w-affix>` to include a prefix, for example a search icon.",
           "doc-url": "",
           "attributes": [
             {
@@ -122,7 +122,7 @@
             },
             {
               "name": "prefix",
-              "description": "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."
+              "description": "Use with `<w-affix>` to include a prefix, for example a search icon."
             }
           ],
           "events": [],
@@ -237,7 +237,7 @@
         },
         {
           "name": "w-icon",
-          "description": "\n---\n",
+          "description": "[Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -283,7 +283,7 @@
         },
         {
           "name": "w-affix",
-          "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n## Accessibility Note\nDue to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)\ncannot reference elements across shadow boundaries. This means:\n- Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA\n- Interactive affixes (buttons) must have their own `aria-label` (already implemented)\n- Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work\n\nFor non-interactive labels (e.g., currency symbols), consider including the information in the\nmain label or placeholder instead of relying on ARIA to announce affix content.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)\n---\n",
+          "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/text-field/frameworks/elements#prefix-label)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -332,7 +332,7 @@
         },
         {
           "name": "w-alert",
-          "description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)\n---\n",
+          "description": "Alert is an inline component used for displaying different types of messages.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/alert/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -366,7 +366,7 @@
         },
         {
           "name": "w-link",
-          "description": "Buttons are used to perform actions, with different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)\n---\n",
+          "description": "Link component to use when creating links that look like buttons.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/link/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -461,7 +461,7 @@
         },
         {
           "name": "w-button",
-          "description": "Performs an action or renders a link with button styling.\nUse button variants to match action priority, risk, and context.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)\n---\n",
+          "description": "Performs an action or renders a link with button styling.\n\nUse button variants to match action priority, risk, and context.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/button/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -646,7 +646,7 @@
         },
         {
           "name": "w-attention",
-          "description": "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.\n\nThe 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.\n\nNote: 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.\n---\n",
+          "description": "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.\n\nAttention 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.\n\nThe 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.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tooltip/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -837,7 +837,7 @@
         },
         {
           "name": "w-box",
-          "description": "Box is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)\n---\n",
+          "description": "Box is a layout component used for separating content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/box/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -900,7 +900,7 @@
         },
         {
           "name": "w-breadcrumbs",
-          "description": "Shows the navigation structure for the current page.\nRenders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)\n---\n",
+          "description": "Shows the navigation structure for the current page.\n\nRenders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [],
           "events": [],
@@ -917,7 +917,7 @@
         },
         {
           "name": "w-breadcrumb-item",
-          "description": "Represents one item in a `w-breadcrumbs` trail.\nRenders 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.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb label content.",
+          "description": "Represents one item in a `w-breadcrumbs` trail.\nRenders 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.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb label content.",
           "doc-url": "",
           "attributes": [
             {
@@ -953,7 +953,7 @@
         },
         {
           "name": "w-card",
-          "description": "Card is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)\n---\n",
+          "description": "Card is a layout component used for separating content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -997,7 +997,7 @@
         },
         {
           "name": "w-checkbox",
-          "description": "\n---\n\n\n### **Events:**\n - **change**\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the checkbox passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the browser's validation message if invalid",
+          "description": "Checkboxes allow users to select one or more options from a number of choices.\n\nWrap individual checkboxes in a checkbox group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)\n---\n\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the checkbox passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the browser's validation message if invalid",
           "doc-url": "",
           "attributes": [
             {
@@ -1036,7 +1036,7 @@
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [{ "name": "change", "type": "Event" }],
+          "events": [],
           "js": {
             "properties": [
               { "name": "input", "type": "HTMLInputElement" },
@@ -1091,12 +1091,12 @@
                 "type": "ValidityState"
               }
             ],
-            "events": [{ "name": "change", "type": "Event" }]
+            "events": []
           }
         },
         {
           "name": "w-checkbox-group",
-          "description": "Checkboxes allow users to select multiple options from a list of choices.\n\nUse with `w-checkbox`.\n\n## Architecture Note\nThis component uses a <div> wrapper instead of the more semantic <fieldset> element.\nNote that w-radio-group uses <fieldset>, which provides better accessibility and follows\nHTML best practices. This inconsistency exists for historical reasons and may be addressed\nin a future major version to align both on the more semantic approach.\n\nTODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing\nbackwards compatibility implications (CSS selectors, etc.).\n---\n\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the group passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the validation message if invalid\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox group.",
+          "description": "Checkboxes allow users to select one or more options from a number of choices.\n\nWrap individual checkboxes in a checkbox group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)\n---\n\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the group passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the validation message if invalid\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox group.",
           "doc-url": "",
           "attributes": [
             {
@@ -1169,7 +1169,7 @@
         },
         {
           "name": "w-combobox",
-          "description": "A combobox element for text input with selectable options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)\n---\n",
+          "description": "A combobox element for text input with selectable options.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/combo-box/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -1332,7 +1332,7 @@
         },
         {
           "name": "w-datepicker",
-          "description": "An input for dates.\n\nUses the `lang` attribute on either the element or on `<html>` to determine the locale options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)\n---\n",
+          "description": "A date picker allows the user to select a specific calendar date.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/date-picker/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -1436,7 +1436,7 @@
         },
         {
           "name": "w-expandable",
-          "description": "Expandable is a layout component used for creating expandable content areas on a page.\n---\n\n\n### **Slots:**\n - **title** - Alternative to the `title` attribute should you need to provide some additional markup.",
+          "description": "Expandable is a layout component used for creating expandable content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)\n---\n\n\n### **Slots:**\n - **title** - Alternative to the `title` attribute should you need to provide some additional markup.",
           "doc-url": "",
           "attributes": [
             {
@@ -1543,7 +1543,7 @@
         },
         {
           "name": "w-modal",
-          "description": "Modals (or dialogs) display important information that users need to acknowledge.\n---\n\n\n### **Events:**\n - **shown**\n- **hidden**\n\n### **Slots:**\n - **header** - Typically where you would use the `w-modal-header` component.\n- **content** - The main content of the modal.\n- **footer** - Typically where you would use the `w-modal-footer` component, for things like actions.\n\n### **CSS Properties:**\n - **--w-c-modal-backdrop-color** - undefined _(default: undefined)_\n- **--w-c-modal-bg** - undefined _(default: undefined)_\n- **--w-c-modal-box-shadow** - undefined _(default: undefined)_\n- **--w-c-modal-color** - undefined _(default: undefined)_\n- **--w-c-modal-height** - undefined _(default: undefined)_\n- **--w-c-modal-max-height** - undefined _(default: undefined)_\n- **--w-c-modal-min-height** - undefined _(default: undefined)_\n- **--w-c-modal-translate-distance** - undefined _(default: undefined)_\n- **--w-c-modal-width** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **dialog** - the root element inside the component (`<dialog>` element).\n- **wrapper** - container for all elements, direct child of `<dialog>`.\n- **content** - the container for the `content` slot items (children).",
+          "description": "Modals (or dialogs) display important information that users need to acknowledge.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)\n---\n\n\n### **Events:**\n - **shown**\n- **hidden**\n\n### **Slots:**\n - **header** - Typically where you would use the `w-modal-header` component.\n- **content** - The main content of the modal.\n- **footer** - Typically where you would use the `w-modal-footer` component, for things like actions.\n\n### **CSS Properties:**\n - **--w-c-modal-backdrop-color** - undefined _(default: undefined)_\n- **--w-c-modal-bg** - undefined _(default: undefined)_\n- **--w-c-modal-box-shadow** - undefined _(default: undefined)_\n- **--w-c-modal-color** - undefined _(default: undefined)_\n- **--w-c-modal-height** - undefined _(default: undefined)_\n- **--w-c-modal-max-height** - undefined _(default: undefined)_\n- **--w-c-modal-min-height** - undefined _(default: undefined)_\n- **--w-c-modal-translate-distance** - undefined _(default: undefined)_\n- **--w-c-modal-width** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **dialog** - the root element inside the component (`<dialog>` element).\n- **wrapper** - container for all elements, direct child of `<dialog>`.\n- **content** - the container for the `content` slot items (children).",
           "doc-url": "",
           "attributes": [
             {
@@ -1598,7 +1598,7 @@
         },
         {
           "name": "w-modal-footer",
-          "description": "The footer section of a modal, typically where you place actions.\n---\n\n\n### **CSS Properties:**\n - **--w-c-modal-footer-gap** -  adjusts the flex gap between actions in the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **footer** - the container for slotted items (children).",
+          "description": "The footer section of a modal, typically where you place actions.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)\n---\n\n\n### **CSS Properties:**\n - **--w-c-modal-footer-gap** -  adjusts the flex gap between actions in the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **footer** - the container for slotted items (children).",
           "doc-url": "",
           "attributes": [],
           "events": [],
@@ -1606,7 +1606,7 @@
         },
         {
           "name": "w-modal-header",
-          "description": "The header section of a modal, typically where you place the title and a close button.\n---\n\n\n### **Events:**\n - **backClicked**\n\n### **Slots:**\n - **top** - Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.\n\n### **CSS Properties:**\n - **--w-c-modal-header-font-size** - undefined _(default: undefined)_\n- **--w-c-modal-header-line-height** - undefined _(default: undefined)_\n- **--w-c-modal-header-margin-bottom** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **header** - the root element inside the component.\n- **top** - the container for the image (`top` slot).\n- **back** - the back button, if visible.\n- **title** - the title element.\n- **close** - the close button, if visible.",
+          "description": "The header section of a modal, typically where you place the title and a close button.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)\n---\n\n\n### **Events:**\n - **backClicked**\n\n### **Slots:**\n - **top** - Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.\n\n### **CSS Properties:**\n - **--w-c-modal-header-font-size** - undefined _(default: undefined)_\n- **--w-c-modal-header-line-height** - undefined _(default: undefined)_\n- **--w-c-modal-header-margin-bottom** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **header** - the root element inside the component.\n- **top** - the container for the image (`top` slot).\n- **back** - the back button, if visible.\n- **title** - the title element.\n- **close** - the close button, if visible.",
           "doc-url": "",
           "attributes": [
             {
@@ -1655,7 +1655,7 @@
         },
         {
           "name": "w-page-indicator",
-          "description": "A page indicator component that displays a series of dots representing pages.\n\nOne dot is highlighted to indicate the currently selected page.\n---\n",
+          "description": "A page indicator component that displays a series of dots representing pages.\n\nOne dot is highlighted to indicate the currently selected page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/page-indicator/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -1688,7 +1688,7 @@
         },
         {
           "name": "w-pagination",
-          "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n---\n\n\n### **Events:**\n - **page-click** - Triggered when a link in the pagination is clicked. Contains the page number in `string` form.",
+          "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/pagination/frameworks/elements)\n---\n\n\n### **Events:**\n - **page-click** - Triggered when a link in the pagination is clicked. Contains the page number in `string` form.",
           "doc-url": "",
           "attributes": [
             {
@@ -1753,7 +1753,7 @@
         },
         {
           "name": "w-pill",
-          "description": "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.\n---\n\n\n### **Events:**\n - **w-pill-click** - Fires when the pill itself is clicked.\n- **w-pill-close** - Fires when the pill's close button is clicked.",
+          "description": "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.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/pill/frameworks/elements)\n---\n\n\n### **Events:**\n - **w-pill-click** - Fires when the pill itself is clicked.\n- **w-pill-close** - Fires when the pill's close button is clicked.",
           "doc-url": "",
           "attributes": [
             {
@@ -1838,7 +1838,7 @@
         },
         {
           "name": "w-radio",
-          "description": "\n---\n",
+          "description": "Radios allow users to select a single option from a list of choices.\n\nWrap individual radio components in a radio group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -1911,7 +1911,7 @@
         },
         {
           "name": "w-radio-group",
-          "description": "Radios allow users to select a single option from a list of choices.\n\nUse with `w-radio`.\n---\n\n\n### **Slots:**\n - **label** - Alternative to the `label` attribute should you need custom HTML.\n- **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.).",
+          "description": "Radios allow users to select a single option from a list of choices.\n\nWrap individual radio components in a radio group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)\n---\n\n\n### **Slots:**\n - **label** - Alternative to the `label` attribute should you need custom HTML.\n- **help-text** - Alternative to the `help-text` attribute should you need custom HTML.",
           "doc-url": "",
           "attributes": [
             {
@@ -1957,7 +1957,7 @@
             },
             {
               "name": "help-text",
-              "description": "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.)."
+              "description": "Alternative to the `help-text` attribute should you need custom HTML."
             }
           ],
           "events": [],
@@ -2004,7 +2004,7 @@
         },
         {
           "name": "w-select",
-          "description": "A dropdown component for selecting a single value.\n---\n\n\n### **Events:**\n - **change**",
+          "description": "A dropdown component for selecting a single value.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/select/frameworks/elements)\n---\n\n\n### **Events:**\n - **change**",
           "doc-url": "",
           "attributes": [
             {
@@ -2232,7 +2232,7 @@
         },
         {
           "name": "w-slider",
-          "description": "Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.\n---\n\n\n### **Slots:**\n - _default_ - For single sliders place a `<w-slider-thumb>` in the default slot.\n- **label** - Label for the slider or range slider as a whole.\n- **description** - Optional description between the label and slider.\n- **from** - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.\n- **to** - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.",
+          "description": "Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/slider/frameworks/elements)\n---\n\n\n### **Slots:**\n - _default_ - For single sliders place a `<w-slider-thumb>` in the default slot.\n- **label** - Label for the slider or range slider as a whole.\n- **description** - Optional description between the label and slider.\n- **from** - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.\n- **to** - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.",
           "doc-url": "",
           "attributes": [
             {
@@ -2418,7 +2418,7 @@
         },
         {
           "name": "w-snackbar-item",
-          "description": "An item to show in a `w-snackbar`.\n\nSee the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.\n---\n\n\n### **Methods:**\n - **close(): _void_** - Remove the snackbar item from the document.\n\nMoves focus to the last focused element outside of the snackbar item, if available.\n\n### **Slots:**\n - **default** - the snackbar message.\n- **icon** - icon preceeding the message.\n- **action** - action following the message.\n\n### **CSS Properties:**\n - **--w-c-snackbar-item-radius** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-max-width** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-min-width** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-padding** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-bg** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-bg-active** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-bg-hover** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-color** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-color-active** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-color-hover** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-box-shadow** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **item** - the container wrapping the message, icon and actions.\n- **icon** - the icon for the variant.\n- **message** - the default slot, body of the snackbar item.\n- **action** - close and action button.",
+          "description": "An item to show in a `w-snackbar`.\n\nSee the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)\n---\n\n\n### **Methods:**\n - **close(): _void_** - Remove the snackbar item from the document.\n\nMoves focus to the last focused element outside of the snackbar item, if available.\n\n### **Slots:**\n - **default** - the snackbar message.\n- **icon** - icon preceeding the message.\n- **action** - action following the message.\n\n### **CSS Properties:**\n - **--w-c-snackbar-item-radius** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-max-width** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-min-width** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-padding** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-bg** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-bg-active** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-bg-hover** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-color** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-color-active** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-color-hover** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-box-shadow** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **item** - the container wrapping the message, icon and actions.\n- **icon** - the icon for the variant.\n- **message** - the default slot, body of the snackbar item.\n- **action** - close and action button.",
           "doc-url": "",
           "attributes": [
             {
@@ -2456,7 +2456,7 @@
         },
         {
           "name": "w-snackbar",
-          "description": "A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.\n\nInclude one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.\n---\n\n\n### **Methods:**\n - **create(message: _string_, options: _CreateSnackbarOptions_): __** - Creates a snackbar item and immediately adds it to the snackbar.\n\nBy default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).\n\nIf you include an `action` in the options the default `duration` is\nset to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.\n\nA `duration` of 10 seconds or longer forces the close button to be visible.\n\nThe default `variant` is `neutral` which does not have an icon.\n\nSet `duration` to `SnackbarDuration.Infinite` if you want a persistent message.\n\n### **Slots:**\n - **default** - `w-snackbar-item` gets placed inside the default slot by the `create` function.\n\n### **CSS Properties:**\n - **--w-c-snackbar-container-gap** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-bottom** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-left** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-right** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-top** - undefined _(default: undefined)_\n- **--w-c-snackbar-z-index** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - the live region that positions messages on the screen.",
+          "description": "A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.\n\nInclude one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)\n---\n\n\n### **Methods:**\n - **create(message: _string_, options: _CreateSnackbarOptions_): __** - Creates a snackbar item and immediately adds it to the snackbar.\n\nBy default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).\n\nIf you include an `action` in the options the default `duration` is\nset to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.\n\nA `duration` of 10 seconds or longer forces the close button to be visible.\n\nThe default `variant` is `neutral` which does not have an icon.\n\nSet `duration` to `SnackbarDuration.Infinite` if you want a persistent message.\n\n### **Slots:**\n - **default** - `w-snackbar-item` gets placed inside the default slot by the `create` function.\n\n### **CSS Properties:**\n - **--w-c-snackbar-container-gap** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-bottom** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-left** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-right** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-top** - undefined _(default: undefined)_\n- **--w-c-snackbar-z-index** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - the live region that positions messages on the screen.",
           "doc-url": "",
           "attributes": [],
           "slots": [
@@ -2470,7 +2470,7 @@
         },
         {
           "name": "w-step",
-          "description": "Individual step component that shows a single step in a process\n---\n",
+          "description": "Individual step component that shows a single step in a process.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -2503,7 +2503,7 @@
         },
         {
           "name": "w-step-indicator",
-          "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n---\n",
+          "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -2536,7 +2536,7 @@
         },
         {
           "name": "w-switch",
-          "description": "The Switch component allows users to toggle between two states.\n---\n\n\n### **Events:**\n - **change** - Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`.",
+          "description": "The Switch component allows users to toggle between two states.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/switch/frameworks/elements)\n---\n\n\n### **Events:**\n - **change** - Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`.",
           "doc-url": "",
           "attributes": [
             {
@@ -2601,7 +2601,7 @@
         },
         {
           "name": "w-tab",
-          "description": "Individual tab component used within w-tabs container.\n---\n",
+          "description": "Individual tab component used within w-tabs container.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -2634,7 +2634,7 @@
         },
         {
           "name": "w-tab-panel",
-          "description": "Tab panel component that holds content for individual tabs.\nEach tab panel should have a name that matches a corresponding tab.\n---\n",
+          "description": "Tab panel component that holds content for individual tabs.\n\nEach tab panel should have a name that matches a corresponding tab.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -2657,7 +2657,7 @@
         },
         {
           "name": "w-tabs",
-          "description": "Tabs are used to organize content by grouping similar information on the same page.\n---\n\n\n### **Events:**\n - **change** - Includes `details.panelId` with the now active tab's ID",
+          "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)\n---\n\n\n### **Events:**\n - **change** - Includes `details.panelId` with the now active tab panel's ID",
           "doc-url": "",
           "attributes": [
             {
@@ -2673,7 +2673,7 @@
             {
               "name": "change",
               "type": "WarpTabsChangeEvent",
-              "description": "Includes `details.panelId` with the now active tab's ID"
+              "description": "Includes `details.panelId` with the now active tab panel's ID"
             }
           ],
           "js": {
@@ -2688,14 +2688,14 @@
               {
                 "name": "change",
                 "type": "WarpTabsChangeEvent",
-                "description": "Includes `details.panelId` with the now active tab's ID"
+                "description": "Includes `details.panelId` with the now active tab panel's ID"
               }
             ]
           }
         },
         {
           "name": "w-textarea",
-          "description": "A multi-line text input with built-in form validation, auto-resizing, and styling support.\n\nThe component automatically handles:\n - Form integration\n - Auto-resizing based on content and row constraints\n - Built-in validation with customizable error messages\n - Accessibility attributes and labeling\n---\n\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the textarea passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the browser's validation message if invalid\n- **setCustomValidity(message: _string_): _void_** - Sets a custom validation message. Pass an empty string to clear.",
+          "description": "A multi-line text input with built-in form validation, auto-resizing, and styling support.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)\n---\n\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the textarea passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the browser's validation message if invalid\n- **setCustomValidity(message: _string_): _void_** - Sets a custom validation message. Pass an empty string to clear.",
           "doc-url": "",
           "attributes": [
             {