@warp-ds/elements 2.8.0-next.2 → 2.8.0-next.3

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.8.0-next.1",
+  "version": "2.8.0-next.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -395,6 +395,165 @@
             "events": []
           }
         },
+        {
+          "name": "w-checkbox",
+          "description": "\n---\n\n\n### **Events:**\n - **change**\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the checkbox passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the browser's validation message if invalid",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The value of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "indeterminate",
+              "description": "Draws the checkbox in an indeterminate state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "checked",
+              "description": "Draws the checkbox in a checked state (reflected to attribute).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the checkbox.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the checkbox a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "invalid",
+              "description": "Draws the checkbox in an invalid state.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [{ "name": "change", "type": "Event" }],
+          "js": {
+            "properties": [
+              { "name": "input", "type": "HTMLInputElement | null" },
+              {
+                "name": "name",
+                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The value of the checkbox, submitted as a name/value pair with form data.",
+                "type": "string | null"
+              },
+              {
+                "name": "indeterminate",
+                "description": "Draws the checkbox in an indeterminate state.",
+                "type": "boolean"
+              },
+              {
+                "name": "checked",
+                "description": "Draws the checkbox in a checked state (reflected to attribute).",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the checkbox.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Makes the checkbox a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "invalid",
+                "description": "Draws the checkbox in an invalid state.",
+                "type": "boolean"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Returns the validation message if the checkbox is invalid, otherwise an empty string",
+                "type": "string"
+              },
+              {
+                "name": "validity",
+                "description": "Returns the validity state of the checkbox",
+                "type": "ValidityState"
+              }
+            ],
+            "events": [{ "name": "change", "type": "Event" }]
+          }
+        },
+        {
+          "name": "w-checkbox-group",
+          "description": "\n---\n\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the group passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the validation message if invalid\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox group.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The group label displayed above the checkboxes.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "name",
+              "description": "The name applied to child checkboxes when they do not provide one.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "optional",
+              "description": "Whether to show optional text next to the label.",
+              "value": { "type": "boolean" }
+            },
+            { "name": "help-text", "value": { "type": "string" } },
+            {
+              "name": "required",
+              "description": "Makes the checkbox group required.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "invalid",
+              "description": "Marks the checkbox group as invalid.",
+              "value": { "type": "boolean" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "The group label displayed above the checkboxes.",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "The name applied to child checkboxes when they do not provide one.",
+                "type": "string"
+              },
+              {
+                "name": "optional",
+                "description": "Whether to show optional text next to the label.",
+                "type": "boolean"
+              },
+              { "name": "helpText", "type": "string" },
+              {
+                "name": "required",
+                "description": "Makes the checkbox group required.",
+                "type": "boolean"
+              },
+              {
+                "name": "invalid",
+                "description": "Marks the checkbox group as invalid.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "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",
@@ -891,540 +1050,372 @@
           }
         },
         {
-          "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",
+          "name": "w-radio",
+          "description": "\n---\n\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the radio passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the browser's validation message if invalid",
           "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" }
-            },
-            {
-              "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": "name",
+              "description": "The name of the radio, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "label",
-              "description": "The content to disply as the label",
-              "value": { "type": "string" }
+              "name": "value",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "value": { "type": "string | null", "default": "null" }
             },
             {
-              "name": "optional",
-              "description": "Whether to show optional text",
-              "value": { "type": "boolean" }
+              "name": "checked",
+              "description": "Draws the radio in a checked state (reflected to attribute).",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "disabled",
-              "description": "Renders the field in a disabled state.",
-              "value": { "type": "boolean" }
+              "description": "Disables the radio.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "read-only",
-              "description": "Renders the field in a readonly state.",
-              "value": { "type": "boolean" }
+              "name": "required",
+              "description": "Makes the radio a required field.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "readonly",
-              "description": "Renders the field in a readonly state.",
-              "value": { "type": "boolean" }
-            },
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } }
+              "name": "invalid",
+              "description": "Draws the radio in an invalid state.",
+              "value": { "type": "boolean", "default": "false" }
+            }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "autoFocus",
-                "description": "Whether the element should receive focus on render.",
-                "type": "boolean"
+                "name": "name",
+                "description": "The name of the radio, submitted as a name/value pair with form data.",
+                "type": "string"
               },
               {
-                "name": "autofocus",
-                "description": "Whether the element should receive focus on render",
-                "type": "boolean"
+                "name": "value",
+                "description": "The radio's value. When selected, the radio group will receive this value.",
+                "type": "string | null"
               },
               {
-                "name": "helpText",
-                "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
-                "type": "string"
+                "name": "checked",
+                "description": "Draws the radio in a checked state (reflected to attribute).",
+                "type": "boolean"
               },
               {
-                "name": "invalid",
-                "description": "Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.",
+                "name": "disabled",
+                "description": "Disables the radio.",
                 "type": "boolean"
               },
               {
-                "name": "always",
-                "description": "Whether to always show a hint.",
+                "name": "required",
+                "description": "Makes the radio a required field.",
                 "type": "boolean"
               },
               {
-                "name": "hint",
-                "description": "The content displayed as the help text.",
-                "type": "string"
+                "name": "invalid",
+                "description": "Draws the radio in an invalid state.",
+                "type": "boolean"
               },
               {
-                "name": "label",
-                "description": "The content to disply as the label",
+                "name": "validationMessage",
+                "description": "Returns the validation message if the radio is invalid, otherwise an empty string",
                 "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": "readonly",
-                "description": "Renders the field in a readonly state.",
-                "type": "boolean"
-              },
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" }
+                "name": "validity",
+                "description": "Returns the validity state of the radio",
+                "type": "ValidityState"
+              }
             ],
             "events": []
           }
         },
         {
-          "name": "w-step",
-          "description": "Individual step component that shows a single step in a process\n---\n",
+          "name": "w-radio-group",
+          "description": "\n---\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio group.\n\n### **Slots:**\n - **label** - Alternative to the `label` attribute should you need custom HTML.\n- **help-text** - Alternative to the `help-text` attribute should you need custom HTML.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "active",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "label",
+              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "completed",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "active", "type": "boolean" },
-              { "name": "completed", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "w-step-indicator",
-          "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)\n---\n",
-          "doc-url": "",
-          "attributes": [
+              "name": "help-text",
+              "description": "The radio group's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
-              "name": "horizontal",
+              "name": "optional",
+              "description": "Optional indicator for the label.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "right",
+              "name": "invalid",
+              "description": "Marks the radio group as invalid.",
               "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": "name",
+              "description": "The name of the radio group",
+              "value": { "type": "string | null", "default": "null" }
             },
             {
               "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",
-          "doc-url": "",
-          "attributes": [
-            { "name": "for", "value": { "type": "string", "default": "''" } },
-            {
-              "name": "active",
+              "description": "Disables the radio group and all child radios.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "over",
+              "name": "required",
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "for", "type": "string" },
-              { "name": "active", "type": "boolean" },
-              { "name": "over", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "w-tab-panel",
-          "description": "Tab panel component that holds content for individual tabs.\nEach tab panel should have a name that matches a corresponding tab.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n",
-          "doc-url": "",
-          "attributes": [
+          "slots": [
             {
-              "name": "hidden",
-              "value": { "type": "boolean", "default": "true" }
+              "name": "label",
+              "description": "Alternative to the `label` attribute should you need custom HTML."
+            },
+            {
+              "name": "help-text",
+              "description": "Alternative to the `help-text` attribute should you need custom HTML."
             }
           ],
           "events": [],
-          "js": {
-            "properties": [{ "name": "hidden", "type": "boolean" }],
-            "events": []
-          }
-        },
-        {
-          "name": "w-tabs",
-          "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n\n\n### **Events:**\n - **change**",
-          "doc-url": "",
-          "attributes": [
-            { "name": "active", "value": { "type": "string", "default": "''" } }
-          ],
-          "events": [{ "name": "change", "type": "CustomEvent" }],
           "js": {
             "properties": [
-              { "name": "active", "type": "string" },
-              { "name": "tabs" },
-              { "name": "activeTab" }
-            ],
-            "events": [{ "name": "change", "type": "CustomEvent" }]
-          }
-        },
-        {
-          "name": "w-textarea",
-          "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)\n---\n\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": "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": "hasInteracted", "type": "boolean" },
               {
-                "name": "validationMessage",
-                "description": "Returns the validation message if the textarea is invalid, otherwise an empty string",
+                "name": "label",
+                "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
                 "type": "string"
               },
               {
-                "name": "validity",
-                "description": "Returns the validity state of the textarea",
-                "type": "ValidityState"
+                "name": "helpText",
+                "description": "The radio group's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "optional",
+                "description": "Optional indicator for the label.",
+                "type": "boolean"
+              },
+              {
+                "name": "invalid",
+                "description": "Marks the radio group as invalid.",
+                "type": "boolean"
+              },
+              {
+                "name": "name",
+                "description": "The name of the radio group",
+                "type": "string | null"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the radio group and all child radios.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+                "type": "boolean"
+              },
+              {
+                "name": "validationTarget",
+                "description": "We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on\nthe first radio element."
               }
             ],
             "events": []
           }
         },
         {
-          "name": "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-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": "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": "auto-focus",
+              "description": "Whether the element should receive focus on render.",
+              "value": { "type": "boolean" }
             },
-            { "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": "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": [] }
-        },
-        {
-          "name": "w-checkbox",
-          "description": "\n---\n\n\n### **Events:**\n - **change**\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the checkbox passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the browser's validation message if invalid",
-          "doc-url": "",
-          "attributes": [
+              "name": "autofocus",
+              "description": "Whether the element should receive focus on render",
+              "value": { "type": "boolean" }
+            },
             {
-              "name": "name",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
+              "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": "value",
-              "description": "The value of the checkbox, submitted as a name/value pair with form data.",
-              "value": { "type": "string | null", "default": "null" }
+              "name": "invalid",
+              "description": "Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.",
+              "value": { "type": "boolean" }
             },
             {
-              "name": "indeterminate",
-              "description": "Draws the checkbox in an indeterminate state.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "always",
+              "description": "Whether to always show a hint.",
+              "value": { "type": "boolean" }
             },
             {
-              "name": "checked",
-              "description": "Draws the checkbox in a checked state (reflected to attribute).",
-              "value": { "type": "boolean", "default": "false" }
+              "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": "Disables the checkbox.",
-              "value": { "type": "boolean", "default": "false" }
+              "description": "Renders the field in a disabled state.",
+              "value": { "type": "boolean" }
             },
             {
-              "name": "required",
-              "description": "Makes the checkbox a required field.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "read-only",
+              "description": "Renders the field in a readonly state.",
+              "value": { "type": "boolean" }
             },
             {
-              "name": "invalid",
-              "description": "Draws the checkbox in an invalid state.",
-              "value": { "type": "boolean", "default": "false" }
-            }
+              "name": "readonly",
+              "description": "Renders the field in a readonly state.",
+              "value": { "type": "boolean" }
+            },
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } }
           ],
-          "events": [{ "name": "change", "type": "Event" }],
+          "events": [],
           "js": {
             "properties": [
-              { "name": "input", "type": "HTMLInputElement | null" },
               {
-                "name": "name",
-                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-                "type": "string"
+                "name": "autoFocus",
+                "description": "Whether the element should receive focus on render.",
+                "type": "boolean"
               },
               {
-                "name": "value",
-                "description": "The value of the checkbox, submitted as a name/value pair with form data.",
-                "type": "string | null"
+                "name": "autofocus",
+                "description": "Whether the element should receive focus on render",
+                "type": "boolean"
               },
               {
-                "name": "indeterminate",
-                "description": "Draws the checkbox in an indeterminate state.",
-                "type": "boolean"
+                "name": "helpText",
+                "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
+                "type": "string"
               },
               {
-                "name": "checked",
-                "description": "Draws the checkbox in a checked state (reflected to attribute).",
+                "name": "invalid",
+                "description": "Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.",
                 "type": "boolean"
               },
               {
-                "name": "disabled",
-                "description": "Disables the checkbox.",
+                "name": "always",
+                "description": "Whether to always show a hint.",
                 "type": "boolean"
               },
               {
-                "name": "required",
-                "description": "Makes the checkbox a required field.",
+                "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": "invalid",
-                "description": "Draws the checkbox in an invalid state.",
+                "name": "disabled",
+                "description": "Renders the field in a disabled state.",
                 "type": "boolean"
               },
               {
-                "name": "validationMessage",
-                "description": "Returns the validation message if the checkbox is invalid, otherwise an empty string",
-                "type": "string"
+                "name": "readOnly",
+                "description": "Renders the field in a readonly state.",
+                "type": "boolean"
               },
               {
-                "name": "validity",
-                "description": "Returns the validity state of the checkbox",
-                "type": "ValidityState"
-              }
+                "name": "readonly",
+                "description": "Renders the field in a readonly state.",
+                "type": "boolean"
+              },
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "string" }
             ],
-            "events": [{ "name": "change", "type": "Event" }]
+            "events": []
           }
         },
         {
-          "name": "w-checkbox-group",
-          "description": "\n---\n\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the group passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the validation message if invalid\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox group.",
+          "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": "label",
-              "description": "The group label displayed above the checkboxes.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "name",
-              "description": "The name applied to child checkboxes when they do not provide one.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "optional",
-              "description": "Whether to show optional text next to the label.",
-              "value": { "type": "boolean" }
-            },
+            { "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": "required",
-              "description": "Makes the checkbox group 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": "invalid",
-              "description": "Marks the checkbox group as invalid.",
-              "value": { "type": "boolean" }
+              "name": "autocomplete",
+              "value": { "type": "string | undefined" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "label",
-                "description": "The group label displayed above the checkboxes.",
-                "type": "string"
-              },
-              {
-                "name": "name",
-                "description": "The name applied to child checkboxes when they do not provide one.",
-                "type": "string"
-              },
-              {
-                "name": "optional",
-                "description": "Whether to show optional text next to the label.",
-                "type": "boolean"
-              },
+              { "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": "required",
-                "description": "Makes the checkbox group required.",
-                "type": "boolean"
-              },
-              {
-                "name": "invalid",
-                "description": "Marks the checkbox group as invalid.",
-                "type": "boolean"
+                "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": []
@@ -1602,6 +1593,196 @@
             ],
             "events": []
           }
+        },
+        {
+          "name": "w-step",
+          "description": "Individual step component that shows a single step in a process\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "active",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "completed",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "active", "type": "boolean" },
+              { "name": "completed", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-step-indicator",
+          "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "horizontal",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "right",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "horizontal", "type": "boolean" },
+              { "name": "right", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-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",
+          "doc-url": "",
+          "attributes": [
+            { "name": "for", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "active",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "over",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "for", "type": "string" },
+              { "name": "active", "type": "boolean" },
+              { "name": "over", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-tab-panel",
+          "description": "Tab panel component that holds content for individual tabs.\nEach tab panel should have a name that matches a corresponding tab.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "hidden",
+              "value": { "type": "boolean", "default": "true" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "hidden", "type": "boolean" }],
+            "events": []
+          }
+        },
+        {
+          "name": "w-tabs",
+          "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n\n\n### **Events:**\n - **change**",
+          "doc-url": "",
+          "attributes": [
+            { "name": "active", "value": { "type": "string", "default": "''" } }
+          ],
+          "events": [{ "name": "change", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              { "name": "active", "type": "string" },
+              { "name": "tabs" },
+              { "name": "activeTab" }
+            ],
+            "events": [{ "name": "change", "type": "CustomEvent" }]
+          }
+        },
+        {
+          "name": "w-textarea",
+          "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)\n---\n\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": "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": "validationMessage",
+                "description": "Returns the validation message if the textarea is invalid, otherwise an empty string",
+                "type": "string"
+              },
+              {
+                "name": "validity",
+                "description": "Returns the validity state of the textarea",
+                "type": "ValidityState"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-toast-container",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
         }
       ]
     },