@warp-ds/elements 2.3.2 → 2.4.0-next.10

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.3.1",
+  "version": "2.4.0-next.9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -603,7 +603,11 @@
             },
             { "name": "value", "value": { "type": "string" } },
             { "name": "name", "value": { "type": "string" } },
-            { "name": "step", "value": { "type": "number" } }
+            { "name": "step", "value": { "type": "number" } },
+            {
+              "name": "autocomplete",
+              "value": { "type": "string | undefined" }
+            }
           ],
           "events": [],
           "js": {
@@ -627,6 +631,7 @@
               { "name": "value", "type": "string" },
               { "name": "name", "type": "string" },
               { "name": "step", "type": "number" },
+              { "name": "autocomplete", "type": "string | undefined" },
               {
                 "name": "formatter",
                 "description": "Function to format value when the input field.\n\nOnly active when the input field does not have focus,\nsimilar to the accessible input masking example from Filament Group\n\nhttps://css-tricks.com/input-masking/\nhttps://filamentgroup.github.io/politespace/demo/demo.html",
@@ -636,43 +641,6 @@
             "events": []
           }
         },
-        {
-          "name": "w-modal-footer",
-          "description": "The footer section of a modal, typically where you place actions.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": { "properties": [], "events": [] }
-        },
-        {
-          "name": "w-modal-header",
-          "description": "The header section of a modal, typically where you place the title and a close button.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)\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.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "title", "value": { "type": "string" } },
-            { "name": "back", "value": { "type": "boolean" } },
-            { "name": "no-close", "value": { "type": "boolean" } }
-          ],
-          "slots": [
-            {
-              "name": "top",
-              "description": "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."
-            }
-          ],
-          "events": [{ "name": "backClicked", "type": "CustomEvent" }],
-          "js": {
-            "properties": [
-              { "name": "title", "type": "string" },
-              { "name": "back", "type": "boolean" },
-              { "name": "noClose", "type": "boolean" },
-              { "name": "titleEl", "type": "HTMLElement" },
-              { "name": "titleClasses" },
-              { "name": "backButton" },
-              { "name": "closeButton" }
-            ],
-            "events": [{ "name": "backClicked", "type": "CustomEvent" }]
-          }
-        },
         {
           "name": "w-modal",
           "description": "Modals (or dialogs) display important information that users need to acknowledge.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)\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.",
@@ -715,6 +683,43 @@
             ]
           }
         },
+        {
+          "name": "w-modal-header",
+          "description": "The header section of a modal, typically where you place the title and a close button.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)\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.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "title", "value": { "type": "string" } },
+            { "name": "back", "value": { "type": "boolean" } },
+            { "name": "no-close", "value": { "type": "boolean" } }
+          ],
+          "slots": [
+            {
+              "name": "top",
+              "description": "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."
+            }
+          ],
+          "events": [{ "name": "backClicked", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              { "name": "title", "type": "string" },
+              { "name": "back", "type": "boolean" },
+              { "name": "noClose", "type": "boolean" },
+              { "name": "titleEl", "type": "HTMLElement" },
+              { "name": "titleClasses" },
+              { "name": "backButton" },
+              { "name": "closeButton" }
+            ],
+            "events": [{ "name": "backClicked", "type": "CustomEvent" }]
+          }
+        },
+        {
+          "name": "w-modal-footer",
+          "description": "The footer section of a modal, typically where you place actions.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "w-toast-container",
           "description": "\n---\n",
@@ -802,6 +807,980 @@
             ],
             "events": []
           }
+        },
+        {
+          "name": "w-switch",
+          "description": "\n---\n\n\n### **Events:**\n - **change**",
+          "doc-url": "",
+          "attributes": [
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            { "name": "value", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "checked",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [{ "name": "change", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "checked", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" }
+            ],
+            "events": [{ "name": "change", "type": "CustomEvent" }]
+          }
+        },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "options",
+              "description": "The available options to select from",
+              "value": { "type": "ComboboxOption[]", "default": "[]" }
+            },
+            {
+              "name": "label",
+              "description": "Label above input",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Input placeholder",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "value",
+              "description": "The input value",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "open-on-focus",
+              "description": "Whether the popover opens when focus is on the text field",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "select-on-blur",
+              "description": "Select active option on blur",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "match-text-segments",
+              "description": "Whether the matching text segments in the options should be highlighted",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disable-static-filtering",
+              "description": "Disable client-side static filtering",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "invalid",
+              "description": "Renders the input field in an invalid state",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "help-text",
+              "description": "The content to display as the help text",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "disabled",
+              "description": "Whether the element is disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Whether the element is required",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "optional",
+              "description": "Whether to show optional text",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "name",
+              "description": "Name attribute for form submission",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "autocomplete",
+              "description": "Autocomplete attribute for the input field",
+              "value": { "type": "string | undefined", "default": "'off'" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "options",
+                "description": "The available options to select from",
+                "type": "ComboboxOption[]"
+              },
+              {
+                "name": "label",
+                "description": "Label above input",
+                "type": "string | undefined"
+              },
+              {
+                "name": "placeholder",
+                "description": "Input placeholder",
+                "type": "string | undefined"
+              },
+              {
+                "name": "value",
+                "description": "The input value",
+                "type": "string"
+              },
+              {
+                "name": "openOnFocus",
+                "description": "Whether the popover opens when focus is on the text field",
+                "type": "boolean"
+              },
+              {
+                "name": "selectOnBlur",
+                "description": "Select active option on blur",
+                "type": "boolean"
+              },
+              {
+                "name": "matchTextSegments",
+                "description": "Whether the matching text segments in the options should be highlighted",
+                "type": "boolean"
+              },
+              {
+                "name": "disableStaticFiltering",
+                "description": "Disable client-side static filtering",
+                "type": "boolean"
+              },
+              {
+                "name": "invalid",
+                "description": "Renders the input field in an invalid state",
+                "type": "boolean"
+              },
+              {
+                "name": "helpText",
+                "description": "The content to display as the help text",
+                "type": "string | undefined"
+              },
+              {
+                "name": "disabled",
+                "description": "Whether the element is disabled",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Whether the element is required",
+                "type": "boolean"
+              },
+              {
+                "name": "optional",
+                "description": "Whether to show optional text",
+                "type": "boolean"
+              },
+              {
+                "name": "name",
+                "description": "Name attribute for form submission",
+                "type": "string | undefined"
+              },
+              {
+                "name": "autocomplete",
+                "description": "Autocomplete attribute for the input field",
+                "type": "string | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-dead-toggle",
+          "description": "Dead toggle can be used where the appearance of a checkbox or radio is needed - but for accessibility purposes an actual input element should not be present.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-dead-toggle--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "type",
+              "value": { "type": "'radio' | 'checkbox'", "default": "'radio'" }
+            },
+            {
+              "name": "checked",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "indeterminate",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "invalid",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "type", "type": "'radio' | 'checkbox'" },
+              { "name": "checked", "type": "boolean" },
+              { "name": "indeterminate", "type": "boolean" },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-page-indicator",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "selected-page",
+              "description": "Currently selected page (1-based index)",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "page-count",
+              "description": "Total number of pages",
+              "value": { "type": "number", "default": "1" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "selectedPage",
+                "description": "Currently selected page (1-based index)",
+                "type": "number"
+              },
+              {
+                "name": "pageCount",
+                "description": "Total number of pages",
+                "type": "number"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)\n---\n\n\n### **Events:**\n - **page-click** - Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "base-url", "value": { "type": "string" } },
+            { "name": "pages", "value": { "type": "number" } },
+            {
+              "name": "current-page",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "visible-pages",
+              "value": { "type": "number", "default": "7" }
+            }
+          ],
+          "events": [
+            {
+              "name": "page-click",
+              "type": "CustomEvent",
+              "description": "Triggered when a link button in the pagination is clicked. Contains the page number in `string` form."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "baseUrl", "type": "string" },
+              { "name": "pages", "type": "number" },
+              { "name": "currentPageNumber", "type": "number" },
+              { "name": "visiblePages", "type": "number" }
+            ],
+            "events": [
+              {
+                "name": "page-click",
+                "type": "CustomEvent",
+                "description": "Triggered when a link button in the pagination is clicked. Contains the page number in `string` form."
+              }
+            ]
+          }
+        },
+        {
+          "name": "w-radio",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "form",
+              "description": "The string pointing to a form's id.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "value",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "appearance",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "value": {
+                "type": "'default' | 'button' | 'clickable'",
+                "default": "'default'"
+              }
+            },
+            {
+              "name": "size",
+              "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the radio.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "checked", "type": "boolean" },
+              {
+                "name": "form",
+                "description": "The string pointing to a form's id.",
+                "type": "string | null"
+              },
+              {
+                "name": "value",
+                "description": "The radio's value. When selected, the radio group will receive this value.",
+                "type": "string"
+              },
+              {
+                "name": "appearance",
+                "description": "The radio's value. When selected, the radio group will receive this value.",
+                "type": "'default' | 'button' | 'clickable'"
+              },
+              {
+                "name": "size",
+                "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the radio.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-radio-group",
+          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio group.\n\n### **Slots:**\n - **label** - Alternative to the `label` attribute should you need custom HTML.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "hint",
+              "description": "The radio groups's hint. If you need to display HTML, use the `hint` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "name",
+              "description": "The name of the radio group, submitted as a name/value pair with form data.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the radio group and all child radios.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "orientation",
+              "description": "The orientation in which to show radio items.",
+              "value": {
+                "type": "'horizontal' | 'vertical'",
+                "default": "'vertical'"
+              }
+            },
+            {
+              "name": "value",
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
+              "value": { "type": "string | null" }
+            },
+            {
+              "name": "size",
+              "description": "The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "required",
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "with-label",
+              "description": "Used for SSR. if true, will show slotted label on initial render.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "with-hint",
+              "description": "Used for SSR. if true, will show slotted hint on initial render.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "label",
+              "description": "Alternative to the `label` attribute should you need custom HTML."
+            }
+          ],
+          "events": [
+            { "name": "input", "type": "InputEvent" },
+            { "name": "change", "type": "Event" }
+          ],
+          "js": {
+            "properties": [
+              { "name": "hasRadioButtons", "type": "boolean" },
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              {
+                "name": "label",
+                "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+                "type": "string"
+              },
+              {
+                "name": "hint",
+                "description": "The radio groups's hint. If you need to display HTML, use the `hint` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "The name of the radio group, submitted as a name/value pair with form data.",
+                "type": "string | null"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the radio group and all child radios.",
+                "type": "boolean"
+              },
+              {
+                "name": "orientation",
+                "description": "The orientation in which to show radio items.",
+                "type": "'horizontal' | 'vertical'"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the radio group, submitted as a name/value pair with form data."
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string | null"
+              },
+              {
+                "name": "size",
+                "description": "The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "required",
+                "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+                "type": "boolean"
+              },
+              {
+                "name": "withLabel",
+                "description": "Used for SSR. if true, will show slotted label on initial render.",
+                "type": "boolean"
+              },
+              {
+                "name": "withHint",
+                "description": "Used for SSR. if true, will show slotted hint on initial render.",
+                "type": "boolean"
+              },
+              {
+                "name": "validationTarget",
+                "description": "We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on\nthe first radio element."
+              }
+            ],
+            "events": [
+              { "name": "input", "type": "InputEvent" },
+              { "name": "change", "type": "Event" }
+            ]
+          }
+        },
+        {
+          "name": "w-checkbox",
+          "description": "\n---\n\n\n### **Events:**\n - **change**\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "title", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "name",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The value of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string | null" }
+            },
+            {
+              "name": "size",
+              "description": "The checkbox's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the checkbox.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "indeterminate",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "checked",
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "value": { "type": "null", "default": "null" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the checkbox a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hint",
+              "description": "The checkbox's hint. If you need to display HTML, use the `hint` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [{ "name": "change", "type": "Event" }],
+          "js": {
+            "properties": [
+              { "name": "input", "type": "HTMLInputElement" },
+              { "name": "title", "type": "string" },
+              {
+                "name": "name",
+                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The value of the checkbox, submitted as a name/value pair with form data.",
+                "type": "string | null"
+              },
+              {
+                "name": "size",
+                "description": "The checkbox's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the checkbox.",
+                "type": "boolean"
+              },
+              {
+                "name": "indeterminate",
+                "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+                "type": "boolean"
+              },
+              {
+                "name": "checked",
+                "description": "Draws the checkbox in a checked state.",
+                "type": "boolean"
+              },
+              {
+                "name": "defaultChecked",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "boolean"
+              },
+              {
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+                "type": "null"
+              },
+              {
+                "name": "required",
+                "description": "Makes the checkbox a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "hint",
+                "description": "The checkbox's hint. If you need to display HTML, use the `hint` slot instead.",
+                "type": "string"
+              }
+            ],
+            "events": [{ "name": "change", "type": "Event" }]
+          }
+        },
+        {
+          "name": "w-checkbox-group",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
+        {
+          "name": "w-slider-thumb",
+          "description": "Component to place inside a `<w-slider>`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)\n---\n\n\n### **Events:**\n - **slidervalidity**",
+          "doc-url": "",
+          "attributes": [
+            { "name": "aria-label", "value": { "type": "string" } },
+            { "name": "aria-description", "value": { "type": "string" } },
+            { "name": "label", "value": { "type": "string" } },
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "disabled", "value": { "type": "boolean" } },
+            {
+              "name": "invalid",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [{ "name": "slidervalidity", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              { "name": "ariaLabel", "type": "string" },
+              { "name": "ariaDescription", "type": "string" },
+              { "name": "label", "type": "string" },
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "invalid", "type": "boolean" },
+              {
+                "name": "allowValuesOutsideRange",
+                "description": "Set by `<w-slider>`",
+                "type": "boolean"
+              },
+              {
+                "name": "markers",
+                "description": "Set by `<w-slider>`",
+                "type": "string"
+              },
+              {
+                "name": "required",
+                "description": "Set by `<w-slider>`",
+                "type": "boolean"
+              },
+              {
+                "name": "step",
+                "description": "Set by `<w-slider>`",
+                "type": "number"
+              },
+              {
+                "name": "min",
+                "description": "Set by `<w-slider>`",
+                "type": "string"
+              },
+              {
+                "name": "max",
+                "description": "Set by `<w-slider>`",
+                "type": "string"
+              },
+              {
+                "name": "suffix",
+                "description": "Set by `<w-slider>`",
+                "type": "string"
+              },
+              {
+                "name": "formatter",
+                "description": "JS hook to help you format the numeric value how you want.",
+                "type": "(value: string, type: 'from' | 'to') => string"
+              },
+              { "name": "range", "type": "HTMLInputElement" },
+              { "name": "textfield", "type": "WarpTextField" },
+              { "name": "boundaryValue", "type": "string" },
+              {
+                "name": "textFieldDisplayValue",
+                "description": "Value to display in the textfield (shows boundary when focused on empty value)"
+              },
+              {
+                "name": "tooltipDisplayValue",
+                "description": "Value to display in the tooltip",
+                "type": "string | number"
+              }
+            ],
+            "events": [{ "name": "slidervalidity", "type": "CustomEvent" }]
+          }
+        },
+        {
+          "name": "w-slider",
+          "description": "Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)\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": [
+            {
+              "name": "label",
+              "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "allow-values-outside-range",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "error", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "help-text",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "invalid",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Ensures a child slider thumb has a value before allowing the containing form to submit.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "min", "value": { "type": "string" } },
+            { "name": "max", "value": { "type": "string" } },
+            {
+              "name": "markers",
+              "description": "Pass a value similar to step to create visual markers at that interval",
+              "value": { "type": "number" }
+            },
+            { "name": "step", "value": { "type": "number" } },
+            {
+              "name": "suffix",
+              "description": "Suffix used in text input fields and for the min and max values of the slider.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "For single sliders place a `<w-slider-thumb>` in the default slot."
+            },
+            {
+              "name": "label",
+              "description": "Label for the slider or range slider as a whole."
+            },
+            {
+              "name": "description",
+              "description": "Optional description between the label and slider."
+            },
+            {
+              "name": "from",
+              "description": "Range sliders need to place a `<w-slider-thumb>` in the from and to slots."
+            },
+            {
+              "name": "to",
+              "description": "Range sliders need to place a `<w-slider-thumb>` in the from and to slots."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead.",
+                "type": "string"
+              },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "allowValuesOutsideRange", "type": "boolean" },
+              { "name": "error", "type": "string" },
+              { "name": "helpText", "type": "string" },
+              { "name": "invalid", "type": "boolean" },
+              {
+                "name": "required",
+                "description": "Ensures a child slider thumb has a value before allowing the containing form to submit.",
+                "type": "boolean"
+              },
+              { "name": "min", "type": "string" },
+              { "name": "max", "type": "string" },
+              {
+                "name": "markers",
+                "description": "Pass a value similar to step to create visual markers at that interval",
+                "type": "number"
+              },
+              { "name": "step", "type": "number" },
+              {
+                "name": "suffix",
+                "description": "Suffix used in text input fields and for the min and max values of the slider.",
+                "type": "string"
+              },
+              {
+                "name": "formatter",
+                "description": "Function to format the to- and from labels and value in the slider thumb tooltip.",
+                "type": "(value: string, type: 'to' | 'from') => string"
+              },
+              { "name": "_invalidMessage", "type": "string" },
+              { "name": "_hasInternalError", "type": "boolean" },
+              { "name": "edgeMin" },
+              { "name": "edgeMax" },
+              { "name": "componentHasError", "type": "boolean" },
+              { "name": "errorText", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-step",
+          "description": "Individual step component that shows a single step in a process\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "active",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "completed",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "active", "type": "boolean" },
+              { "name": "completed", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "horizontal",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "right",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "horizontal", "type": "boolean" },
+              { "name": "right", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-tab",
+          "description": "Individual tab component used within w-tabs container.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "for", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "active",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "over",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "for", "type": "string" },
+              { "name": "active", "type": "boolean" },
+              { "name": "over", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "hidden",
+              "value": { "type": "boolean", "default": "true" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "hidden", "type": "boolean" }],
+            "events": []
+          }
+        },
+        {
+          "name": "w-tabs",
+          "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n\n\n### **Events:**\n - **change**",
+          "doc-url": "",
+          "attributes": [
+            { "name": "active", "value": { "type": "string", "default": "''" } }
+          ],
+          "events": [{ "name": "change", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              { "name": "active", "type": "string" },
+              { "name": "tabs" },
+              { "name": "activeTab" }
+            ],
+            "events": [{ "name": "change", "type": "CustomEvent" }]
+          }
+        },
+        {
+          "name": "w-textarea",
+          "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "disabled", "value": { "type": "boolean" } },
+            { "name": "invalid", "value": { "type": "boolean" } },
+            { "name": "label", "value": { "type": "string" } },
+            { "name": "help-text", "value": { "type": "string" } },
+            { "name": "maximum-rows", "value": { "type": "number" } },
+            { "name": "minimum-rows", "value": { "type": "number" } },
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "placeholder", "value": { "type": "string" } },
+            { "name": "read-only", "value": { "type": "boolean" } },
+            { "name": "readonly", "value": { "type": "boolean" } },
+            { "name": "required", "value": { "type": "boolean" } },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "optional", "value": { "type": "boolean" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "disabled", "type": "boolean" },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "label", "type": "string" },
+              { "name": "helpText", "type": "string" },
+              { "name": "maxRows", "type": "number" },
+              { "name": "minRows", "type": "number" },
+              { "name": "name", "type": "string" },
+              { "name": "placeholder", "type": "string" },
+              { "name": "readOnly", "type": "boolean" },
+              { "name": "readonly", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              { "name": "value", "type": "string" },
+              { "name": "optional", "type": "boolean" },
+              { "name": "minHeight" },
+              { "name": "maxHeight" }
+            ],
+            "events": []
+          }
         }
       ]
     },