@warp-ds/elements 2.5.1 → 2.6.0-next.2

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.5.0",
+  "version": "2.6.0-next.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -350,292 +350,351 @@
           }
         },
         {
-          "name": "w-expandable",
-          "description": "Expandable is a layout component used for creating expandable content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)\n---\n\n\n### **Slots:**\n - **title** - Alternative to the `title` attribute should you need to provide some additional markup.",
+          "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": "expanded",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "options",
+              "description": "The available options to select from",
+              "value": { "type": "ComboboxOption[]", "default": "[]" }
             },
-            { "name": "title", "value": { "type": "string" } },
             {
-              "name": "box",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "label",
+              "description": "Label above input",
+              "value": { "type": "string | undefined" }
             },
             {
-              "name": "bleed",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "placeholder",
+              "description": "Input placeholder",
+              "value": { "type": "string | undefined" }
             },
-            { "name": "button-class", "value": { "type": "string" } },
-            { "name": "content-class", "value": { "type": "string" } },
             {
-              "name": "no-chevron",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "value",
+              "description": "The input value",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "animated",
+              "name": "open-on-focus",
+              "description": "Whether the popover opens when focus is on the text field",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "heading-level", "value": { "type": "number" } },
             {
-              "name": "_hasTitle",
+              "name": "select-on-blur",
+              "description": "Select active option on blur",
               "value": { "type": "boolean", "default": "true" }
             },
             {
-              "name": "_showChevronUp",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "title",
-              "description": "Alternative to the `title` attribute should you need to provide some additional markup."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "expanded", "type": "boolean" },
-              { "name": "title", "type": "string" },
-              { "name": "box", "type": "boolean" },
-              { "name": "bleed", "type": "boolean" },
-              { "name": "buttonClass", "type": "string" },
-              { "name": "contentClass", "type": "string" },
-              { "name": "noChevron", "type": "boolean" },
-              { "name": "animated", "type": "boolean" },
-              { "name": "headingLevel", "type": "number" },
-              { "name": "_hasTitle", "type": "boolean" },
-              { "name": "_showChevronUp", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "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[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-pill--docs)\n---\n\n\n### **Events:**\n - **w-pill-click**\n- **w-pill-close**",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "can-close",
+              "name": "match-text-segments",
+              "description": "Whether the matching text segments in the options should be highlighted",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "suggestion",
+              "name": "disable-static-filtering",
+              "description": "Disable client-side static filtering",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "open-sr-label", "value": { "type": "string" } },
-            { "name": "open-aria-label", "value": { "type": "string" } },
-            { "name": "close-sr-label", "value": { "type": "string" } },
-            { "name": "close-aria-label", "value": { "type": "string" } }
-          ],
-          "events": [
-            { "name": "w-pill-click", "type": "CustomEvent" },
-            { "name": "w-pill-close", "type": "CustomEvent" }
-          ],
-          "js": {
-            "properties": [
-              { "name": "canClose", "type": "boolean" },
-              { "name": "suggestion", "type": "boolean" },
-              { "name": "openSrLabel", "type": "string" },
-              { "name": "openAriaLabel", "type": "string" },
-              { "name": "closeSrLabel", "type": "string" },
-              { "name": "closeAriaLabel", "type": "string" },
-              { "name": "openFilterSrText" },
-              { "name": "removeFilterSrText" }
-            ],
-            "events": [
-              { "name": "w-pill-click", "type": "CustomEvent" },
-              { "name": "w-pill-close", "type": "CustomEvent" }
-            ]
-          }
-        },
-        {
-          "name": "w-select",
-          "description": "A dropdown component for selecting a single value.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "auto-focus",
-              "description": "Whether the element should receive focus on render.",
-              "value": { "type": "boolean" }
-            },
-            {
-              "name": "autofocus",
-              "description": "Whether the element should receive focus on render",
-              "value": { "type": "boolean" }
-            },
-            {
-              "name": "help-text",
-              "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
-              "value": { "type": "string" }
-            },
             {
               "name": "invalid",
-              "description": "Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.",
-              "value": { "type": "boolean" }
+              "description": "Renders the input field in an invalid state",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "always",
-              "description": "Whether to always show a hint.",
-              "value": { "type": "boolean" }
+              "name": "help-text",
+              "description": "The content to display as the help text",
+              "value": { "type": "string | undefined" }
             },
             {
-              "name": "hint",
-              "description": "The content displayed as the help text.",
-              "value": { "type": "string" }
+              "name": "disabled",
+              "description": "Whether the element is disabled",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "label",
-              "description": "The content to disply as the label",
-              "value": { "type": "string" }
+              "name": "required",
+              "description": "Whether the element is required",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "optional",
               "description": "Whether to show optional text",
-              "value": { "type": "boolean" }
-            },
-            {
-              "name": "disabled",
-              "description": "Renders the field in a disabled state.",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "read-only",
-              "description": "Renders the field in a readonly state.",
-              "value": { "type": "boolean" }
+              "name": "name",
+              "description": "Name attribute for form submission",
+              "value": { "type": "string | undefined" }
             },
             {
-              "name": "readonly",
-              "description": "Renders the field in a readonly state.",
-              "value": { "type": "boolean" }
-            },
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } }
+              "name": "autocomplete",
+              "description": "Autocomplete attribute for the input field",
+              "value": { "type": "string | undefined", "default": "'off'" }
+            }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "autoFocus",
-                "description": "Whether the element should receive focus on render.",
-                "type": "boolean"
+                "name": "options",
+                "description": "The available options to select from",
+                "type": "ComboboxOption[]"
               },
               {
-                "name": "autofocus",
-                "description": "Whether the element should receive focus on render",
-                "type": "boolean"
+                "name": "label",
+                "description": "Label above input",
+                "type": "string | undefined"
               },
               {
-                "name": "helpText",
-                "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
+                "name": "placeholder",
+                "description": "Input placeholder",
+                "type": "string | undefined"
+              },
+              {
+                "name": "value",
+                "description": "The input value",
                 "type": "string"
               },
               {
-                "name": "invalid",
-                "description": "Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.",
+                "name": "openOnFocus",
+                "description": "Whether the popover opens when focus is on the text field",
                 "type": "boolean"
               },
               {
-                "name": "always",
-                "description": "Whether to always show a hint.",
+                "name": "selectOnBlur",
+                "description": "Select active option on blur",
                 "type": "boolean"
               },
               {
-                "name": "hint",
-                "description": "The content displayed as the help text.",
-                "type": "string"
+                "name": "matchTextSegments",
+                "description": "Whether the matching text segments in the options should be highlighted",
+                "type": "boolean"
               },
               {
-                "name": "label",
-                "description": "The content to disply as the label",
-                "type": "string"
+                "name": "disableStaticFiltering",
+                "description": "Disable client-side static filtering",
+                "type": "boolean"
               },
               {
-                "name": "optional",
-                "description": "Whether to show optional text",
+                "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": "Renders the field in a disabled state.",
+                "description": "Whether the element is disabled",
                 "type": "boolean"
               },
               {
-                "name": "readOnly",
-                "description": "Renders the field in a readonly state.",
+                "name": "required",
+                "description": "Whether the element is required",
                 "type": "boolean"
               },
               {
-                "name": "readonly",
-                "description": "Renders the field in a readonly state.",
+                "name": "optional",
+                "description": "Whether to show optional text",
                 "type": "boolean"
               },
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" }
+              {
+                "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-textfield",
-          "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",
+          "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",
           "doc-url": "",
           "attributes": [
-            { "name": "disabled", "value": { "type": "boolean" } },
-            { "name": "invalid", "value": { "type": "boolean" } },
-            { "name": "id", "value": { "type": "string" } },
             { "name": "label", "value": { "type": "string" } },
-            { "name": "help-text", "value": { "type": "string" } },
-            { "name": "size", "value": { "type": "string" } },
-            { "name": "max", "value": { "type": "number" } },
-            { "name": "min", "value": { "type": "number" } },
-            { "name": "min-length", "value": { "type": "number" } },
-            { "name": "max-length", "value": { "type": "number" } },
-            { "name": "pattern", "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": "type",
-              "value": { "type": "string", "default": "'text'" }
+              "name": "lang",
+              "description": "Takes precedence over the `<html>` lang attribute.",
+              "value": { "type": "string" }
             },
-            { "name": "value", "value": { "type": "string" } },
             { "name": "name", "value": { "type": "string" } },
-            { "name": "step", "value": { "type": "number" } },
+            { "name": "value", "value": { "type": "string" } },
             {
-              "name": "autocomplete",
-              "value": { "type": "string | undefined" }
+              "name": "header-format",
+              "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+              "value": { "type": "string", "default": "'MMMM yyyy'" }
+            },
+            {
+              "name": "weekday-format",
+              "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+              "value": { "type": "string", "default": "'EEEEEE'" }
+            },
+            {
+              "name": "day-format",
+              "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+              "value": { "type": "string", "default": "'PPPP'" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "disabled", "type": "boolean" },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "id", "type": "string" },
               { "name": "label", "type": "string" },
-              { "name": "helpText", "type": "string" },
-              { "name": "size", "type": "string" },
-              { "name": "max", "type": "number" },
-              { "name": "min", "type": "number" },
-              { "name": "minLength", "type": "number" },
-              { "name": "maxLength", "type": "number" },
-              { "name": "pattern", "type": "string" },
-              { "name": "placeholder", "type": "string" },
-              { "name": "readOnly", "type": "boolean" },
-              { "name": "readonly", "type": "boolean" },
-              { "name": "required", "type": "boolean" },
-              { "name": "type", "type": "string" },
-              { "name": "value", "type": "string" },
+              {
+                "name": "lang",
+                "description": "Takes precedence over the `<html>` lang attribute.",
+                "type": "string"
+              },
               { "name": "name", "type": "string" },
-              { "name": "step", "type": "number" },
-              { "name": "autocomplete", "type": "string | undefined" },
+              { "name": "value", "type": "string" },
               {
-                "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",
-                "type": "(value: string) => string"
+                "name": "headerFormat",
+                "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+                "type": "string"
+              },
+              {
+                "name": "weekdayFormat",
+                "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+                "type": "string"
+              },
+              {
+                "name": "isDayDisabled",
+                "description": "Lets you control if a date in the calendar should be disabled.\n\nThis needs to be set on the element instance in JavaScript, not as an HTML attribute.",
+                "type": "(day: Date) => boolean"
+              },
+              {
+                "name": "dayFormat",
+                "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+                "type": "string"
+              },
+              { "name": "isCalendarOpen", "type": "boolean" },
+              { "name": "navigationDate", "type": "Date" },
+              { "name": "selectedDate", "type": "Date | null" },
+              { "name": "month" },
+              { "name": "weeks" },
+              { "name": "calendar", "type": "HTMLDivElement" },
+              { "name": "input", "type": "HTMLInputElement" },
+              { "name": "toggleButton", "type": "HTMLButtonElement" },
+              { "name": "wrapper", "type": "HTMLDivElement" },
+              {
+                "name": "previousMonthButton",
+                "description": "This is the first focusable element, needed for the modal focus trap.\n\nDon't cache this and other `@query` fields from inside the calendar modal.\nThey work the first time, but once the calendar is closed and reopened\nthe query will point to an element that doesn't exist anymore.",
+                "type": "HTMLButtonElement"
+              },
+              { "name": "todayCell", "type": "HTMLTableCellElement" },
+              { "name": "selectedCell", "type": "HTMLTableCellElement" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-expandable",
+          "description": "Expandable is a layout component used for creating expandable content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)\n---\n\n\n### **Slots:**\n - **title** - Alternative to the `title` attribute should you need to provide some additional markup.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "expanded",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "title", "value": { "type": "string" } },
+            {
+              "name": "box",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "bleed",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "button-class", "value": { "type": "string" } },
+            { "name": "content-class", "value": { "type": "string" } },
+            {
+              "name": "no-chevron",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "animated",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "heading-level", "value": { "type": "number" } },
+            {
+              "name": "_hasTitle",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "_showChevronUp",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "title",
+              "description": "Alternative to the `title` attribute should you need to provide some additional markup."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "expanded", "type": "boolean" },
+              { "name": "title", "type": "string" },
+              { "name": "box", "type": "boolean" },
+              { "name": "bleed", "type": "boolean" },
+              { "name": "buttonClass", "type": "string" },
+              { "name": "contentClass", "type": "string" },
+              { "name": "noChevron", "type": "boolean" },
+              { "name": "animated", "type": "boolean" },
+              { "name": "headingLevel", "type": "number" },
+              { "name": "_hasTitle", "type": "boolean" },
+              { "name": "_showChevronUp", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-icon",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "Icon filename (without .svg)",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "Size: small, medium, large or pixel value (e.g. \"32px\")",
+              "value": {
+                "type": "'small' | 'medium' | 'large' | string",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "locale",
+              "description": "Locale used in CDN URL",
+              "value": { "type": "string", "default": "'en'" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "Icon filename (without .svg)",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "Size: small, medium, large or pixel value (e.g. \"32px\")",
+                "type": "'small' | 'medium' | 'large' | string"
+              },
+              {
+                "name": "locale",
+                "description": "Locale used in CDN URL",
+                "type": "string"
               }
             ],
             "events": []
@@ -683,6 +742,14 @@
             ]
           }
         },
+        {
+          "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.",
@@ -713,324 +780,316 @@
           }
         },
         {
-          "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",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": { "properties": [], "events": [] }
-        },
-        {
-          "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",
+          "name": "w-page-indicator",
+          "description": "A page indicator component that displays a series of dots representing pages.\nOne dot is highlighted to indicate the currently selected page.\n---\n",
           "doc-url": "",
           "attributes": [
-            { "name": "label", "value": { "type": "string" } },
             {
-              "name": "lang",
-              "description": "Takes precedence over the `<html>` lang attribute.",
-              "value": { "type": "string" }
-            },
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
-            {
-              "name": "header-format",
-              "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
-              "value": { "type": "string", "default": "'MMMM yyyy'" }
-            },
-            {
-              "name": "weekday-format",
-              "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
-              "value": { "type": "string", "default": "'EEEEEE'" }
+              "name": "selected-page",
+              "description": "Currently selected page (1-based index, clamped to valid range)",
+              "value": { "type": "number", "default": "1" }
             },
             {
-              "name": "day-format",
-              "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
-              "value": { "type": "string", "default": "'PPPP'" }
+              "name": "page-count",
+              "description": "Total number of pages (minimum 1)",
+              "value": { "type": "number", "default": "1" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "label", "type": "string" },
-              {
-                "name": "lang",
-                "description": "Takes precedence over the `<html>` lang attribute.",
-                "type": "string"
-              },
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" },
               {
-                "name": "headerFormat",
-                "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
-                "type": "string"
-              },
-              {
-                "name": "weekdayFormat",
-                "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
-                "type": "string"
-              },
-              {
-                "name": "isDayDisabled",
-                "description": "Lets you control if a date in the calendar should be disabled.\n\nThis needs to be set on the element instance in JavaScript, not as an HTML attribute.",
-                "type": "(day: Date) => boolean"
-              },
-              {
-                "name": "dayFormat",
-                "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
-                "type": "string"
+                "name": "selectedPage",
+                "description": "Currently selected page (1-based index, clamped to valid range)",
+                "type": "number"
               },
-              { "name": "isCalendarOpen", "type": "boolean" },
-              { "name": "navigationDate", "type": "Date" },
-              { "name": "selectedDate", "type": "Date | null" },
-              { "name": "month" },
-              { "name": "weeks" },
-              { "name": "calendar", "type": "HTMLDivElement" },
-              { "name": "input", "type": "HTMLInputElement" },
-              { "name": "toggleButton", "type": "HTMLButtonElement" },
-              { "name": "wrapper", "type": "HTMLDivElement" },
               {
-                "name": "previousMonthButton",
-                "description": "This is the first focusable element, needed for the modal focus trap.\n\nDon't cache this and other `@query` fields from inside the calendar modal.\nThey work the first time, but once the calendar is closed and reopened\nthe query will point to an element that doesn't exist anymore.",
-                "type": "HTMLButtonElement"
-              },
-              { "name": "todayCell", "type": "HTMLTableCellElement" },
-              { "name": "selectedCell", "type": "HTMLTableCellElement" }
+                "name": "pageCount",
+                "description": "Total number of pages (minimum 1)",
+                "type": "number"
+              }
             ],
             "events": []
           }
         },
         {
-          "name": "w-switch",
-          "description": "\n---\n\n\n### **Events:**\n - **change**",
+          "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": "name", "value": { "type": "string", "default": "''" } },
-            { "name": "value", "value": { "type": "string", "default": "''" } },
+            { "name": "base-url", "value": { "type": "string" } },
+            { "name": "pages", "value": { "type": "number" } },
             {
-              "name": "checked",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "current-page",
+              "value": { "type": "number", "default": "1" }
             },
             {
-              "name": "disabled",
-              "value": { "type": "boolean", "default": "false" }
+              "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."
             }
           ],
-          "events": [{ "name": "change", "type": "CustomEvent" }],
           "js": {
             "properties": [
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" },
-              { "name": "checked", "type": "boolean" },
-              { "name": "disabled", "type": "boolean" }
+              { "name": "baseUrl", "type": "string" },
+              { "name": "pages", "type": "number" },
+              { "name": "currentPageNumber", "type": "number" },
+              { "name": "visiblePages", "type": "number" }
             ],
-            "events": [{ "name": "change", "type": "CustomEvent" }]
+            "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-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",
+          "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[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-pill--docs)\n---\n\n\n### **Events:**\n - **w-pill-click**\n- **w-pill-close**",
           "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": "can-close",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "open-on-focus",
-              "description": "Whether the popover opens when focus is on the text field",
+              "name": "suggestion",
               "value": { "type": "boolean", "default": "false" }
             },
+            { "name": "open-sr-label", "value": { "type": "string" } },
+            { "name": "open-aria-label", "value": { "type": "string" } },
+            { "name": "close-sr-label", "value": { "type": "string" } },
+            { "name": "close-aria-label", "value": { "type": "string" } }
+          ],
+          "events": [
+            { "name": "w-pill-click", "type": "CustomEvent" },
+            { "name": "w-pill-close", "type": "CustomEvent" }
+          ],
+          "js": {
+            "properties": [
+              { "name": "canClose", "type": "boolean" },
+              { "name": "suggestion", "type": "boolean" },
+              { "name": "openSrLabel", "type": "string" },
+              { "name": "openAriaLabel", "type": "string" },
+              { "name": "closeSrLabel", "type": "string" },
+              { "name": "closeAriaLabel", "type": "string" },
+              { "name": "openFilterSrText" },
+              { "name": "removeFilterSrText" }
+            ],
+            "events": [
+              { "name": "w-pill-click", "type": "CustomEvent" },
+              { "name": "w-pill-close", "type": "CustomEvent" }
+            ]
+          }
+        },
+        {
+          "name": "w-select",
+          "description": "A dropdown component for selecting a single value.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
             {
-              "name": "select-on-blur",
-              "description": "Select active option on blur",
-              "value": { "type": "boolean", "default": "true" }
+              "name": "auto-focus",
+              "description": "Whether the element should receive focus on render.",
+              "value": { "type": "boolean" }
             },
             {
-              "name": "match-text-segments",
-              "description": "Whether the matching text segments in the options should be highlighted",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "autofocus",
+              "description": "Whether the element should receive focus on render",
+              "value": { "type": "boolean" }
             },
             {
-              "name": "disable-static-filtering",
-              "description": "Disable client-side static filtering",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "help-text",
+              "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
+              "value": { "type": "string" }
             },
             {
               "name": "invalid",
-              "description": "Renders the input field in an invalid state",
-              "value": { "type": "boolean", "default": "false" }
+              "description": "Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.",
+              "value": { "type": "boolean" }
             },
             {
-              "name": "help-text",
-              "description": "The content to display as the help text",
-              "value": { "type": "string | undefined" }
+              "name": "always",
+              "description": "Whether to always show a hint.",
+              "value": { "type": "boolean" }
             },
             {
-              "name": "disabled",
-              "description": "Whether the element is disabled",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "hint",
+              "description": "The content displayed as the help text.",
+              "value": { "type": "string" }
             },
             {
-              "name": "required",
-              "description": "Whether the element is required",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "label",
+              "description": "The content to disply as the label",
+              "value": { "type": "string" }
             },
             {
               "name": "optional",
               "description": "Whether to show optional text",
-              "value": { "type": "boolean", "default": "false" }
+              "value": { "type": "boolean" }
             },
             {
-              "name": "name",
-              "description": "Name attribute for form submission",
-              "value": { "type": "string | undefined" }
+              "name": "disabled",
+              "description": "Renders the field in a disabled state.",
+              "value": { "type": "boolean" }
             },
             {
-              "name": "autocomplete",
-              "description": "Autocomplete attribute for the input field",
-              "value": { "type": "string | undefined", "default": "'off'" }
-            }
+              "name": "read-only",
+              "description": "Renders the field in a readonly state.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "readonly",
+              "description": "Renders the field in a readonly state.",
+              "value": { "type": "boolean" }
+            },
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } }
           ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "options",
-                "description": "The available options to select from",
-                "type": "ComboboxOption[]"
-              },
+          "events": [],
+          "js": {
+            "properties": [
               {
-                "name": "label",
-                "description": "Label above input",
-                "type": "string | undefined"
+                "name": "autoFocus",
+                "description": "Whether the element should receive focus on render.",
+                "type": "boolean"
               },
               {
-                "name": "placeholder",
-                "description": "Input placeholder",
-                "type": "string | undefined"
+                "name": "autofocus",
+                "description": "Whether the element should receive focus on render",
+                "type": "boolean"
               },
               {
-                "name": "value",
-                "description": "The input value",
+                "name": "helpText",
+                "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
                 "type": "string"
               },
               {
-                "name": "openOnFocus",
-                "description": "Whether the popover opens when focus is on the text field",
+                "name": "invalid",
+                "description": "Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.",
                 "type": "boolean"
               },
               {
-                "name": "selectOnBlur",
-                "description": "Select active option on blur",
+                "name": "always",
+                "description": "Whether to always show a hint.",
                 "type": "boolean"
               },
               {
-                "name": "matchTextSegments",
-                "description": "Whether the matching text segments in the options should be highlighted",
-                "type": "boolean"
+                "name": "hint",
+                "description": "The content displayed as the help text.",
+                "type": "string"
               },
               {
-                "name": "disableStaticFiltering",
-                "description": "Disable client-side static filtering",
-                "type": "boolean"
+                "name": "label",
+                "description": "The content to disply as the label",
+                "type": "string"
               },
               {
-                "name": "invalid",
-                "description": "Renders the input field in an invalid state",
+                "name": "optional",
+                "description": "Whether to show optional text",
                 "type": "boolean"
               },
-              {
-                "name": "helpText",
-                "description": "The content to display as the help text",
-                "type": "string | undefined"
-              },
               {
                 "name": "disabled",
-                "description": "Whether the element is disabled",
+                "description": "Renders the field in a disabled state.",
                 "type": "boolean"
               },
               {
-                "name": "required",
-                "description": "Whether the element is required",
+                "name": "readOnly",
+                "description": "Renders the field in a readonly state.",
                 "type": "boolean"
               },
               {
-                "name": "optional",
-                "description": "Whether to show optional text",
+                "name": "readonly",
+                "description": "Renders the field in a readonly state.",
                 "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"
-              }
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "string" }
             ],
             "events": []
           }
         },
         {
-          "name": "w-page-indicator",
-          "description": "A page indicator component that displays a series of dots representing pages.\nOne dot is highlighted to indicate the currently selected page.\n---\n",
+          "name": "w-step",
+          "description": "Individual step component that shows a single step in a process\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "selected-page",
-              "description": "Currently selected page (1-based index, clamped to valid range)",
-              "value": { "type": "number", "default": "1" }
+              "name": "active",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "page-count",
-              "description": "Total number of pages (minimum 1)",
-              "value": { "type": "number", "default": "1" }
+              "name": "completed",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "selectedPage",
-                "description": "Currently selected page (1-based index, clamped to valid range)",
-                "type": "number"
-              },
-              {
-                "name": "pageCount",
-                "description": "Total number of pages (minimum 1)",
-                "type": "number"
-              }
+              { "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-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-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",
@@ -1090,50 +1149,127 @@
           }
         },
         {
-          "name": "w-icon",
-          "description": "\n---\n",
+          "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\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": [
-            {
-              "name": "name",
-              "description": "Icon filename (without .svg)",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "size",
-              "description": "Size: small, medium, large or pixel value (e.g. \"32px\")",
-              "value": {
-                "type": "'small' | 'medium' | 'large' | string",
-                "default": "'medium'"
-              }
-            },
-            {
-              "name": "locale",
-              "description": "Locale used in CDN URL",
-              "value": { "type": "string", "default": "'en'" }
-            }
+            { "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" },
               {
-                "name": "name",
-                "description": "Icon filename (without .svg)",
+                "name": "validationMessage",
+                "description": "Returns the validation message if the textarea is invalid, otherwise an empty string",
                 "type": "string"
               },
               {
-                "name": "size",
-                "description": "Size: small, medium, large or pixel value (e.g. \"32px\")",
-                "type": "'small' | 'medium' | 'large' | string"
-              },
+                "name": "validity",
+                "description": "Returns the validity state of the textarea",
+                "type": "ValidityState"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-textfield",
+          "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": "id", "value": { "type": "string" } },
+            { "name": "label", "value": { "type": "string" } },
+            { "name": "help-text", "value": { "type": "string" } },
+            { "name": "size", "value": { "type": "string" } },
+            { "name": "max", "value": { "type": "number" } },
+            { "name": "min", "value": { "type": "number" } },
+            { "name": "min-length", "value": { "type": "number" } },
+            { "name": "max-length", "value": { "type": "number" } },
+            { "name": "pattern", "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": "type",
+              "value": { "type": "string", "default": "'text'" }
+            },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "step", "value": { "type": "number" } },
+            {
+              "name": "autocomplete",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "disabled", "type": "boolean" },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "id", "type": "string" },
+              { "name": "label", "type": "string" },
+              { "name": "helpText", "type": "string" },
+              { "name": "size", "type": "string" },
+              { "name": "max", "type": "number" },
+              { "name": "min", "type": "number" },
+              { "name": "minLength", "type": "number" },
+              { "name": "maxLength", "type": "number" },
+              { "name": "pattern", "type": "string" },
+              { "name": "placeholder", "type": "string" },
+              { "name": "readOnly", "type": "boolean" },
+              { "name": "readonly", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              { "name": "type", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "name", "type": "string" },
+              { "name": "step", "type": "number" },
+              { "name": "autocomplete", "type": "string | undefined" },
               {
-                "name": "locale",
-                "description": "Locale used in CDN URL",
-                "type": "string"
+                "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",
+                "type": "(value: string) => string"
               }
             ],
             "events": []
           }
+        },
+        {
+          "name": "w-toast-container",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
         }
       ]
     },