@warp-ds/elements 2.1.1 → 2.2.0-next.10

package/dist/web-types.json

@@ -0,0 +1,949 @@
+{
+  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
+  "name": "@warp-ds/elements",
+  "version": "2.2.0-next.9",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "w-affix",
+          "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "aria-label", "value": { "type": "string" } },
+            {
+              "name": "clear",
+              "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "search",
+              "description": "Add this property to render a clickable Warp search icon.\n\nSet an `aria-label` that explains the action when using this.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "label", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "ariaLabel", "type": "string" },
+              {
+                "name": "clear",
+                "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.",
+                "type": "boolean"
+              },
+              {
+                "name": "search",
+                "description": "Add this property to render a clickable Warp search icon.\n\nSet an `aria-label` that explains the action when using this.",
+                "type": "boolean"
+              },
+              { "name": "label", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-attention",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "show",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placement",
+              "value": { "type": "Directions", "default": "'bottom'" }
+            },
+            {
+              "name": "tooltip",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "callout",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "popover",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "highlight",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "can-close",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-arrow",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "distance",
+              "value": { "type": "number", "default": "8" }
+            },
+            {
+              "name": "skidding",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "flip",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "cross-axis",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "fallback-placements",
+              "value": { "type": "Directions[]" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "show", "type": "boolean" },
+              { "name": "placement", "type": "Directions" },
+              { "name": "tooltip", "type": "boolean" },
+              { "name": "callout", "type": "boolean" },
+              { "name": "popover", "type": "boolean" },
+              { "name": "highlight", "type": "boolean" },
+              { "name": "canClose", "type": "boolean" },
+              { "name": "noArrow", "type": "boolean" },
+              { "name": "distance", "type": "number" },
+              { "name": "skidding", "type": "number" },
+              { "name": "flip", "type": "boolean" },
+              { "name": "crossAxis", "type": "boolean" },
+              { "name": "fallbackPlacements", "type": "Directions[]" },
+              { "name": "_initialPlacement" },
+              { "name": "_actualDirection" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-alert",
+          "description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "value": {
+                "type": "'negative' | 'positive' | 'warning' | 'info'",
+                "default": "'info'"
+              }
+            },
+            {
+              "name": "show",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "role",
+              "value": { "type": "string", "default": "'alert'" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "type": "'negative' | 'positive' | 'warning' | 'info'"
+              },
+              { "name": "show", "type": "boolean" },
+              { "name": "role", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-badge",
+          "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "value": {
+                "type": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'",
+                "default": "'neutral'"
+              }
+            },
+            {
+              "name": "position",
+              "value": {
+                "type": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "type": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'"
+              },
+              {
+                "name": "position",
+                "type": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-box",
+          "description": "Box is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "bleed", "value": { "type": "boolean" } },
+            { "name": "bordered", "value": { "type": "boolean" } },
+            { "name": "info", "value": { "type": "boolean" } },
+            { "name": "neutral", "value": { "type": "boolean" } },
+            { "name": "role", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "bleed", "type": "boolean" },
+              { "name": "bordered", "type": "boolean" },
+              { "name": "info", "type": "boolean" },
+              { "name": "neutral", "type": "boolean" },
+              { "name": "role", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-breadcrumbs",
+          "description": "Breadcrumbs show the navigation structure for the current location.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "aria-label", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "ariaLabel", "type": "string" }],
+            "events": []
+          }
+        },
+        {
+          "name": "w-link",
+          "description": "Buttons are used to perform actions, with different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "autofocus", "value": { "type": "boolean" } },
+            {
+              "name": "variant",
+              "value": {
+                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'",
+                "default": "'secondary'"
+              }
+            },
+            { "name": "quiet", "value": { "type": "boolean" } },
+            { "name": "small", "value": { "type": "boolean" } },
+            { "name": "href", "value": { "type": "string" } },
+            { "name": "disabled", "value": { "type": "boolean" } },
+            { "name": "target", "value": { "type": "string" } },
+            { "name": "rel", "value": { "type": "string" } },
+            { "name": "full-width", "value": { "type": "boolean" } },
+            { "name": "button-class", "value": { "type": "string" } },
+            { "name": "name", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "autofocus", "type": "boolean" },
+              {
+                "name": "variant",
+                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
+              },
+              { "name": "quiet", "type": "boolean" },
+              { "name": "small", "type": "boolean" },
+              { "name": "href", "type": "string" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "target", "type": "string" },
+              { "name": "rel", "type": "string" },
+              { "name": "fullWidth", "type": "boolean" },
+              { "name": "buttonClass", "type": "string" },
+              { "name": "name", "type": "string" },
+              { "name": "classes", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-button",
+          "description": "Buttons are used to perform actions, widh different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "type",
+              "value": {
+                "type": "'button' | 'submit' | 'reset'",
+                "default": "'button'"
+              }
+            },
+            { "name": "autofocus", "value": { "type": "boolean" } },
+            {
+              "name": "variant",
+              "value": {
+                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'",
+                "default": "'secondary'"
+              }
+            },
+            { "name": "quiet", "value": { "type": "boolean" } },
+            { "name": "small", "value": { "type": "boolean" } },
+            { "name": "loading", "value": { "type": "boolean" } },
+            { "name": "href", "value": { "type": "string" } },
+            { "name": "target", "value": { "type": "string" } },
+            { "name": "rel", "value": { "type": "string" } },
+            { "name": "full-width", "value": { "type": "boolean" } },
+            { "name": "button-class", "value": { "type": "string" } },
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "type", "type": "'button' | 'submit' | 'reset'" },
+              { "name": "autofocus", "type": "boolean" },
+              {
+                "name": "variant",
+                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
+              },
+              { "name": "quiet", "type": "boolean" },
+              { "name": "small", "type": "boolean" },
+              { "name": "loading", "type": "boolean" },
+              { "name": "href", "type": "string" },
+              { "name": "target", "type": "string" },
+              { "name": "rel", "type": "string" },
+              { "name": "fullWidth", "type": "boolean" },
+              { "name": "buttonClass", "type": "string" },
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "ariaValueTextLoading" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-card",
+          "description": "Card is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "selected",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "flat",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "clickable",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "selected", "type": "boolean" },
+              { "name": "flat", "type": "boolean" },
+              { "name": "clickable", "type": "boolean" },
+              { "name": "buttonText" }
+            ],
+            "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",
+          "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": "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": "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": "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-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" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "type", "type": "'radio' | 'checkbox'" },
+              { "name": "checked", "type": "boolean" },
+              { "name": "indeterminate", "type": "boolean" },
+              { "name": "invalid", "type": "boolean" }
+            ],
+            "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-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.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "show", "value": { "type": "boolean" } },
+            { "name": "content-id", "value": { "type": "string" } },
+            { "name": "ignore-backdrop-clicks", "value": { "type": "boolean" } }
+          ],
+          "slots": [
+            {
+              "name": "header",
+              "description": "Typically where you would use the `w-modal-header` component."
+            },
+            {
+              "name": "content",
+              "description": "The main content of the modal."
+            },
+            {
+              "name": "footer",
+              "description": "Typically where you would use the `w-modal-footer` component, for things like actions."
+            }
+          ],
+          "events": [
+            { "name": "shown", "type": "CustomEvent" },
+            { "name": "hidden", "type": "CustomEvent" }
+          ],
+          "js": {
+            "properties": [
+              { "name": "show", "type": "boolean" },
+              { "name": "contentId", "type": "string" },
+              { "name": "ignoreBackdropClicks", "type": "boolean" },
+              { "name": "dialogEl", "type": "HTMLDialogElement" },
+              { "name": "dialogInnerEl", "type": "HTMLElement" },
+              { "name": "contentEl", "type": "HTMLElement" }
+            ],
+            "events": [
+              { "name": "shown", "type": "CustomEvent" },
+              { "name": "hidden", "type": "CustomEvent" }
+            ]
+          }
+        },
+        {
+          "name": "w-pageindicator",
+          "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-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",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "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": "auto-focus",
+              "description": "Whether the element should receive focus on render",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "invalid",
+              "description": "Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "always",
+              "description": "Whether to always show a hint",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "hint",
+              "description": "The content displayed as the help text",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "label",
+              "description": "The content to disply as the label",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "optional",
+              "description": "Whether to show optional text",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "disabled",
+              "description": "Renders the field in a disabled state.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "read-only",
+              "description": "Renders the field in a readonly state.",
+              "value": { "type": "boolean" }
+            },
+            { "name": "_options", "value": { "type": "string" } },
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "autoFocus",
+                "description": "Whether the element should receive focus on render",
+                "type": "boolean"
+              },
+              {
+                "name": "invalid",
+                "description": "Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error",
+                "type": "boolean"
+              },
+              {
+                "name": "always",
+                "description": "Whether to always show a hint",
+                "type": "boolean"
+              },
+              {
+                "name": "hint",
+                "description": "The content displayed as the help text",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "The content to disply as the label",
+                "type": "string"
+              },
+              {
+                "name": "optional",
+                "description": "Whether to show optional text",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Renders the field in a disabled state.",
+                "type": "boolean"
+              },
+              {
+                "name": "readOnly",
+                "description": "Renders the field in a readonly state.",
+                "type": "boolean"
+              },
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "_options" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-steps",
+          "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-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-switch",
+          "description": "\n---\n\n\n### **Events:**\n - **change**",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [{ "name": "change", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              { "name": "value", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" }
+            ],
+            "events": [{ "name": "change", "type": "CustomEvent" }]
+          }
+        },
+        {
+          "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": "required", "value": { "type": "boolean" } },
+            {
+              "name": "type",
+              "value": { "type": "string", "default": "'text'" }
+            },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "name", "value": { "type": "string" } }
+          ],
+          "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": "required", "type": "boolean" },
+              { "name": "type", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "name", "type": "string" }
+            ],
+            "events": []
+          }
+        }
+      ]
+    },
+    "css": {
+      "properties": [],
+      "pseudo-elements": []
+    }
+  }
+}