@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.20

package/dist/web-types.json

@@ -1,57 +1,14 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.10.0-next.1",
+  "version": "2.10.0-next.19",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
-        {
-          "name": "w-icon",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "name",
-              "description": "Icon filename (without .svg)",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "size",
-              "description": "Size: small, medium, large or pixel value (e.g. \"32px\")",
-              "value": { "type": "'small' | 'medium' | 'large' | string" }
-            },
-            {
-              "name": "locale",
-              "description": "Locale used in CDN URL",
-              "value": { "type": "string" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "name",
-                "description": "Icon filename (without .svg)",
-                "type": "string"
-              },
-              {
-                "name": "size",
-                "description": "Size: small, medium, large or pixel value (e.g. \"32px\")",
-                "type": "'small' | 'medium' | 'large' | string"
-              },
-              {
-                "name": "locale",
-                "description": "Locale used in CDN URL",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "w-textfield",
-          "description": "A single-line input component used for entering and editing textual or numeric data.\n---\n\n\n### **Slots:**\n - **suffix** - Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).\n- **prefix** - Use with `<w-affix>` to include a prefix, for example a search icon.",
+          "description": "A single-line input component used for entering and editing textual or numeric data.\n---\n\n\n### **Slots:**\n - **suffix** - Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).\n- **prefix** - Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support.",
           "doc-url": "",
           "attributes": [
             {
@@ -67,49 +24,54 @@
             {
               "name": "label",
               "description": "Either a `label` or an `aria-label` must be provided.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "help-text",
               "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "optional",
+              "description": "Whether to show the optional indicator after the label.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "size",
               "description": "Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "max",
               "description": "Use with `type=\"number\"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).",
-              "value": { "type": "number" }
+              "value": { "type": "number | undefined" }
             },
             {
               "name": "min",
               "description": "Use with `type=\"number\"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).",
-              "value": { "type": "number" }
+              "value": { "type": "number | undefined" }
             },
-            { "name": "min-length", "value": { "type": "number" } },
+            { "name": "min-length", "value": { "type": "number | undefined" } },
             {
               "name": "minlength",
               "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required.",
-              "value": { "type": "number" }
+              "value": { "type": "number | undefined" }
             },
-            { "name": "max-length", "value": { "type": "number" } },
+            { "name": "max-length", "value": { "type": "number | undefined" } },
             {
               "name": "maxlength",
               "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [maximum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) allowed.",
-              "value": { "type": "number" }
+              "value": { "type": "number | undefined" }
             },
             {
               "name": "pattern",
               "description": "Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern)",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "placeholder",
               "description": "Set a text that is shown in the textfield when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "read-only",
@@ -128,27 +90,29 @@
             {
               "name": "type",
               "description": "The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "value",
               "description": "Lets you set the current value.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "name",
               "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "step",
               "description": "When used with `number` this attribute forces inputs to be a whole number of `step`.\n\nFor example with a `step=\"5\"` only values that divide evenly on 5 are allowed.\nUsing arrow up and down in the input field increments and decrements by 5.",
-              "value": { "type": "number" }
+              "value": { "type": "number | undefined" }
             },
             {
               "name": "autocomplete",
               "description": "A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.",
-              "value": { "type": "string | undefined" }
+              "value": {
+                "type": "HTMLInputElement[\"autocomplete\"] | undefined"
+              }
             }
           ],
           "slots": [
@@ -158,7 +122,7 @@
             },
             {
               "name": "prefix",
-              "description": "Use with `<w-affix>` to include a prefix, for example a search icon."
+              "description": "Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support."
             }
           ],
           "events": [],
@@ -177,49 +141,54 @@
               {
                 "name": "label",
                 "description": "Either a `label` or an `aria-label` must be provided.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "helpText",
                 "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.",
-                "type": "string"
+                "type": "string | undefined"
+              },
+              {
+                "name": "optional",
+                "description": "Whether to show the optional indicator after the label.",
+                "type": "boolean"
               },
               {
                 "name": "size",
                 "description": "Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "max",
                 "description": "Use with `type=\"number\"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).",
-                "type": "number"
+                "type": "number | undefined"
               },
               {
                 "name": "min",
                 "description": "Use with `type=\"number\"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).",
-                "type": "number"
+                "type": "number | undefined"
               },
-              { "name": "minLength", "type": "number" },
+              { "name": "minLength", "type": "number | undefined" },
               {
                 "name": "minlength",
                 "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required.",
-                "type": "number"
+                "type": "number | undefined"
               },
-              { "name": "maxLength", "type": "number" },
+              { "name": "maxLength", "type": "number | undefined" },
               {
                 "name": "maxlength",
                 "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [maximum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) allowed.",
-                "type": "number"
+                "type": "number | undefined"
               },
               {
                 "name": "pattern",
                 "description": "Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern)",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "placeholder",
                 "description": "Set a text that is shown in the textfield when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.",
-                "type": "string"
+                "type": "string | undefined"
               },
               { "name": "readOnly", "type": "boolean" },
               {
@@ -235,32 +204,78 @@
               {
                 "name": "type",
                 "description": "The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "value",
                 "description": "Lets you set the current value.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "name",
                 "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "step",
                 "description": "When used with `number` this attribute forces inputs to be a whole number of `step`.\n\nFor example with a `step=\"5\"` only values that divide evenly on 5 are allowed.\nUsing arrow up and down in the input field increments and decrements by 5.",
-                "type": "number"
+                "type": "number | undefined"
               },
               {
                 "name": "autocomplete",
                 "description": "A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.",
-                "type": "string | undefined"
+                "type": "HTMLInputElement[\"autocomplete\"] | 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](https://filamentgroup.github.io/politespace/demo/demo.html).",
-                "type": "(value: string) => string"
+                "type": "((value: string) => string) | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-icon",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "Icon filename (without .svg)",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "size",
+              "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
+              "value": {
+                "type": "'small' | 'medium' | 'large' | `${number}px` | undefined",
+                "default": "\"medium\""
+              }
+            },
+            {
+              "name": "locale",
+              "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
+              "value": { "type": "string" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "Icon filename (without .svg)",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
+                "type": "'small' | 'medium' | 'large' | `${number}px` | undefined"
+              },
+              {
+                "name": "locale",
+                "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
+                "type": "string"
               }
             ],
             "events": []
@@ -268,7 +283,7 @@
         },
         {
           "name": "w-affix",
-          "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)\n---\n",
+          "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n## Accessibility Note\nDue to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)\ncannot reference elements across shadow boundaries. This means:\n- Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA\n- Interactive affixes (buttons) must have their own `aria-label` (already implemented)\n- Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work\n\nFor non-interactive labels (e.g., currency symbols), consider including the information in the\nmain label or placeholder instead of relying on ARIA to announce affix content.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -285,7 +300,10 @@
               "description": "Add this property to render a clickable Warp search icon.",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "label", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "icon",
               "value": { "type": "string | null", "default": "null" }
@@ -321,7 +339,7 @@
               "name": "variant",
               "value": {
                 "type": "'negative' | 'positive' | 'warning' | 'info'",
-                "default": "'info'"
+                "default": "\"info\""
               }
             },
             {
@@ -330,7 +348,7 @@
             },
             {
               "name": "role",
-              "value": { "type": "string", "default": "'alert'" }
+              "value": { "type": "string", "default": "\"alert\"" }
             }
           ],
           "events": [],
@@ -353,44 +371,90 @@
           "attributes": [
             {
               "name": "autofocus",
+              "description": "Focus the link after it is rendered",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "variant",
+              "description": "Visual style for the link/button.",
               "value": {
-                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet'"
+                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | undefined"
               }
             },
             {
               "name": "small",
+              "description": "Render a smaller version",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "href", "value": { "type": "string" } },
+            {
+              "name": "href",
+              "description": "The URL the link points to",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "disabled",
+              "description": "Applies disabled styling, but you need to disable clicks on your own.\n\nThe component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "target", "value": { "type": "string" } },
-            { "name": "rel", "value": { "type": "string" } },
+            {
+              "name": "target",
+              "description": "Where to display the linked URL (e.g. `_blank`)",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rel",
+              "description": "Relationship of the linked URL.\n\nIf `target=\"_blank\"` and `rel` is not provided, the component uses `noopener`.",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "full-width",
+              "description": "Makes the link take up the full width of its parent",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "autofocus", "type": "boolean" },
+              {
+                "name": "autofocus",
+                "description": "Focus the link after it is rendered",
+                "type": "boolean"
+              },
               {
                 "name": "variant",
-                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet'"
+                "description": "Visual style for the link/button.",
+                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | undefined"
               },
-              { "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": "small",
+                "description": "Render a smaller version",
+                "type": "boolean"
+              },
+              {
+                "name": "href",
+                "description": "The URL the link points to",
+                "type": "string | undefined"
+              },
+              {
+                "name": "disabled",
+                "description": "Applies disabled styling, but you need to disable clicks on your own.\n\nThe component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.",
+                "type": "boolean"
+              },
+              {
+                "name": "target",
+                "description": "Where to display the linked URL (e.g. `_blank`)",
+                "type": "string | undefined"
+              },
+              {
+                "name": "rel",
+                "description": "Relationship of the linked URL.\n\nIf `target=\"_blank\"` and `rel` is not provided, the component uses `noopener`.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "fullWidth",
+                "description": "Makes the link take up the full width of its parent",
+                "type": "boolean"
+              }
             ],
             "events": []
           }
@@ -403,7 +467,7 @@
             {
               "name": "type",
               "description": "Native button type.\nControls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.",
-              "value": { "type": "'button' | 'submit' | 'reset'" }
+              "value": { "type": "'button' | 'submit' | 'reset' | undefined" }
             },
             {
               "name": "autofocus",
@@ -414,7 +478,7 @@
               "name": "variant",
               "description": "Visual style of the button.\nDefaults to `secondary`. Use the variant that matches the action priority, risk, and placement.",
               "value": {
-                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link'"
+                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link' | undefined"
               }
             },
             {
@@ -440,12 +504,12 @@
             {
               "name": "href",
               "description": "URL for rendering the button as a link.\nWhen set, the component renders `w-link` instead of a native `button`.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "target",
               "description": "Link browsing context.\nPassed to the rendered link when `href` is set.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "disabled",
@@ -455,7 +519,7 @@
             {
               "name": "rel",
               "description": "Link relationship.\nPassed to the rendered link when `href` is set. If `target=\"_blank\"` is set and `rel` is omitted, `noopener` is used.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "full-width",
@@ -465,27 +529,27 @@
             {
               "name": "button-class",
               "description": "Deprecated class applied to the internal control\nThis class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "name",
               "description": "Form control name.\nUsed when the button participates in form handling.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "value",
               "description": "Form control value.\nUsed with `name` when the button participates in form handling. Resets to its initial value when the form is reset.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "commandfor",
               "description": "The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "command",
               "description": "The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             }
           ],
           "events": [],
@@ -494,7 +558,7 @@
               {
                 "name": "type",
                 "description": "Native button type.\nControls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.",
-                "type": "'button' | 'submit' | 'reset'"
+                "type": "'button' | 'submit' | 'reset' | undefined"
               },
               {
                 "name": "autofocus",
@@ -504,7 +568,7 @@
               {
                 "name": "variant",
                 "description": "Visual style of the button.\nDefaults to `secondary`. Use the variant that matches the action priority, risk, and placement.",
-                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link'"
+                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link' | undefined"
               },
               {
                 "name": "quiet",
@@ -529,12 +593,12 @@
               {
                 "name": "href",
                 "description": "URL for rendering the button as a link.\nWhen set, the component renders `w-link` instead of a native `button`.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "target",
                 "description": "Link browsing context.\nPassed to the rendered link when `href` is set.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "disabled",
@@ -544,7 +608,7 @@
               {
                 "name": "rel",
                 "description": "Link relationship.\nPassed to the rendered link when `href` is set. If `target=\"_blank\"` is set and `rel` is omitted, `noopener` is used.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "fullWidth",
@@ -554,27 +618,27 @@
               {
                 "name": "buttonClass",
                 "description": "Deprecated class applied to the internal control\nThis class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "name",
                 "description": "Form control name.\nUsed when the button participates in form handling.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "value",
                 "description": "Form control value.\nUsed with `name` when the button participates in form handling. Resets to its initial value when the form is reset.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "commandfor",
                 "description": "The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "command",
                 "description": "The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.",
-                "type": "string"
+                "type": "string | undefined"
               }
             ],
             "events": []
@@ -595,7 +659,7 @@
               "description": "Preferred placement relative to the trigger element.\nSets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.",
               "value": {
                 "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'",
-                "default": "'bottom'"
+                "default": "\"bottom\""
               }
             },
             {
@@ -737,14 +801,14 @@
               "name": "variant",
               "description": "Controls the badge color treatment.\nIf omitted, the badge uses neutral styling without reflecting a `variant` attribute.\nAccepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.",
               "value": {
-                "type": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'"
+                "type": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored' | undefined"
               }
             },
             {
               "name": "position",
               "description": "Positions the badge in a corner of a parent element.\nUse this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.\nUse this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.",
               "value": {
-                "type": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"
+                "type": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' | undefined"
               }
             }
           ],
@@ -760,12 +824,12 @@
               {
                 "name": "variant",
                 "description": "Controls the badge color treatment.\nIf omitted, the badge uses neutral styling without reflecting a `variant` attribute.\nAccepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.",
-                "type": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'"
+                "type": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored' | undefined"
               },
               {
                 "name": "position",
                 "description": "Positions the badge in a corner of a parent element.\nUse this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.\nUse this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.",
-                "type": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"
+                "type": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' | undefined"
               }
             ],
             "events": []
@@ -799,7 +863,7 @@
             {
               "name": "role",
               "description": "ARIA role for the box wrapper.\nDefaults to a role of `region`. Set `role=\"none\"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.",
-              "value": { "type": "string", "default": "'region'" }
+              "value": { "type": "string", "default": "\"region\"" }
             }
           ],
           "events": [],
@@ -851,6 +915,42 @@
             "events": []
           }
         },
+        {
+          "name": "w-breadcrumb-item",
+          "description": "Represents one item in a `w-breadcrumbs` trail.\nRenders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb label content.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "current-page",
+              "description": "Marks this item as the current page.\nUse this on the final breadcrumb item so it exposes `aria-current=\"page\"` and does not render a trailing separator.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "href",
+              "description": "URL for linked breadcrumb items.\nWhen omitted, the item renders as non-focusable text.",
+              "value": { "type": "string | null", "default": "null" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The breadcrumb label content." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "currentPage",
+                "description": "Marks this item as the current page.\nUse this on the final breadcrumb item so it exposes `aria-current=\"page\"` and does not render a trailing separator.",
+                "type": "boolean"
+              },
+              {
+                "name": "href",
+                "description": "URL for linked breadcrumb items.\nWhen omitted, the item renders as non-focusable text.",
+                "type": "string | null"
+              }
+            ],
+            "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",
@@ -902,77 +1002,77 @@
           "attributes": [
             {
               "name": "name",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "description": "The name of the checkbox.\n\nWhen the checkbox is checked and belongs to a form, this name is submitted with the checkbox value. If the checkbox is inside a `w-checkbox-group` with a name, the group name is used when the checkbox does not have its own name.",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "value",
-              "description": "The value of the checkbox, submitted as a name/value pair with form data.",
+              "description": "The value submitted when the checkbox is checked.\n\nIf no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value.",
               "value": { "type": "string | null", "default": "null" }
             },
             {
               "name": "indeterminate",
-              "description": "Draws the checkbox in an indeterminate state.",
+              "description": "Whether the checkbox is visually indeterminate.\n\nUse this for parent options that represent a mixed set of child selections. Clicking the checkbox clears the indeterminate state and sets the checkbox to checked.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "checked",
-              "description": "Draws the checkbox in a checked state (reflected to attribute).",
+              "description": "Whether the checkbox is checked.\n\nChecked checkboxes submit their value with form data. The property is reflected to the `checked` attribute.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "disabled",
-              "description": "Disables the checkbox.",
+              "description": "Whether the checkbox is disabled.\n\nDisabled checkboxes cannot be focused, changed, or submitted with form data.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required",
-              "description": "Makes the checkbox a required field.",
+              "description": "Whether the checkbox must be checked before form submission.\n\nA required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "invalid",
-              "description": "Draws the checkbox in an invalid state.",
+              "description": "Whether the checkbox is visually invalid.\n\nUse this to show an externally managed validation error. Required validation also sets the invalid state after the user interacts with the checkbox or tries to submit the form.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [{ "name": "change", "type": "Event" }],
           "js": {
             "properties": [
-              { "name": "input", "type": "HTMLInputElement | null" },
+              { "name": "input", "type": "HTMLInputElement" },
               {
                 "name": "name",
-                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+                "description": "The name of the checkbox.\n\nWhen the checkbox is checked and belongs to a form, this name is submitted with the checkbox value. If the checkbox is inside a `w-checkbox-group` with a name, the group name is used when the checkbox does not have its own name.",
                 "type": "string | undefined"
               },
               {
                 "name": "value",
-                "description": "The value of the checkbox, submitted as a name/value pair with form data.",
+                "description": "The value submitted when the checkbox is checked.\n\nIf no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value.",
                 "type": "string | null"
               },
               {
                 "name": "indeterminate",
-                "description": "Draws the checkbox in an indeterminate state.",
+                "description": "Whether the checkbox is visually indeterminate.\n\nUse this for parent options that represent a mixed set of child selections. Clicking the checkbox clears the indeterminate state and sets the checkbox to checked.",
                 "type": "boolean"
               },
               {
                 "name": "checked",
-                "description": "Draws the checkbox in a checked state (reflected to attribute).",
+                "description": "Whether the checkbox is checked.\n\nChecked checkboxes submit their value with form data. The property is reflected to the `checked` attribute.",
                 "type": "boolean"
               },
               {
                 "name": "disabled",
-                "description": "Disables the checkbox.",
+                "description": "Whether the checkbox is disabled.\n\nDisabled checkboxes cannot be focused, changed, or submitted with form data.",
                 "type": "boolean"
               },
               {
                 "name": "required",
-                "description": "Makes the checkbox a required field.",
+                "description": "Whether the checkbox must be checked before form submission.\n\nA required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`.",
                 "type": "boolean"
               },
               {
                 "name": "invalid",
-                "description": "Draws the checkbox in an invalid state.",
+                "description": "Whether the checkbox is visually invalid.\n\nUse this to show an externally managed validation error. Required validation also sets the invalid state after the user interacts with the checkbox or tries to submit the form.",
                 "type": "boolean"
               },
               {
@@ -996,33 +1096,37 @@
         },
         {
           "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.",
+          "description": "Checkboxes allow users to select multiple options from a list of choices.\n\nUse with `w-checkbox`.\n\n## Architecture Note\nThis component uses a <div> wrapper instead of the more semantic <fieldset> element.\nNote that w-radio-group uses <fieldset>, which provides better accessibility and follows\nHTML best practices. This inconsistency exists for historical reasons and may be addressed\nin a future major version to align both on the more semantic approach.\n\nTODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing\nbackwards compatibility implications (CSS selectors, etc.).\n---\n\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the group passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the validation message if invalid\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox group.",
           "doc-url": "",
           "attributes": [
             {
               "name": "label",
-              "description": "The group label displayed above the checkboxes.",
-              "value": { "type": "string" }
+              "description": "The group label displayed above the checkboxes.\n\nUse this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies.",
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "name",
-              "description": "The name applied to child checkboxes when they do not provide one.",
-              "value": { "type": "string" }
+              "description": "The name applied to child checkboxes when they do not provide one.\n\nUse this when the grouped checkboxes should submit values under the same form field name. Individual checkboxes can still override the group name with their own `name`.",
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "optional",
-              "description": "Whether to show optional text next to the label.",
+              "description": "Whether to show optional text next to the label.\n\nUse this to indicate that selecting an option from the group is not required.",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "help-text", "value": { "type": "string" } },
+            {
+              "name": "help-text",
+              "description": "Help text displayed below the checkbox group.\n\nUse this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message.",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "required",
-              "description": "Makes the checkbox group required.",
+              "description": "Whether at least one checkbox in the group must be selected.\n\nRequired validation is managed by the group. The individual checkboxes provide the submitted form values.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "invalid",
-              "description": "Marks the checkbox group as invalid.",
+              "description": "Whether the checkbox group is visually invalid.\n\nUse this to show an externally managed validation error for the group. The invalid state is also shared with child checkboxes for consistent styling and accessibility state.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
@@ -1031,28 +1135,32 @@
             "properties": [
               {
                 "name": "label",
-                "description": "The group label displayed above the checkboxes.",
-                "type": "string"
+                "description": "The group label displayed above the checkboxes.\n\nUse this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies.",
+                "type": "string | undefined"
               },
               {
                 "name": "name",
-                "description": "The name applied to child checkboxes when they do not provide one.",
-                "type": "string"
+                "description": "The name applied to child checkboxes when they do not provide one.\n\nUse this when the grouped checkboxes should submit values under the same form field name. Individual checkboxes can still override the group name with their own `name`.",
+                "type": "string | undefined"
               },
               {
                 "name": "optional",
-                "description": "Whether to show optional text next to the label.",
+                "description": "Whether to show optional text next to the label.\n\nUse this to indicate that selecting an option from the group is not required.",
                 "type": "boolean"
               },
-              { "name": "helpText", "type": "string" },
+              {
+                "name": "helpText",
+                "description": "Help text displayed below the checkbox group.\n\nUse this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message.",
+                "type": "string | undefined"
+              },
               {
                 "name": "required",
-                "description": "Makes the checkbox group required.",
+                "description": "Whether at least one checkbox in the group must be selected.\n\nRequired validation is managed by the group. The individual checkboxes provide the submitted form values.",
                 "type": "boolean"
               },
               {
                 "name": "invalid",
-                "description": "Marks the checkbox group as invalid.",
+                "description": "Whether the checkbox group is visually invalid.\n\nUse this to show an externally managed validation error for the group. The invalid state is also shared with child checkboxes for consistent styling and accessibility state.",
                 "type": "boolean"
               }
             ],
@@ -1066,78 +1174,78 @@
           "attributes": [
             {
               "name": "options",
-              "description": "The available options to select from",
+              "description": "The available options to select from.\n\nUse this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements.",
               "value": { "type": "ComboboxOption[]", "default": "[]" }
             },
             {
               "name": "label",
-              "description": "Label above input",
-              "value": { "type": "string | undefined", "default": "''" }
+              "description": "The label displayed above the input.\n\nUse this to give the combobox a visible and accessible name.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "placeholder",
-              "description": "Input placeholder",
-              "value": { "type": "string | undefined", "default": "''" }
+              "description": "Placeholder text displayed when the input is empty.\n\nUse this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "value",
-              "description": "The input value",
-              "value": { "type": "string", "default": "''" }
+              "description": "The selected or typed value.\n\nWhen an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.",
+              "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "open-on-focus",
-              "description": "Whether the popover opens when focus is on the text field",
+              "description": "Whether the option list opens when the input receives focus.\n\nUse this when users should see available options before they start typing.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "select-on-blur",
-              "description": "Select active option on blur",
+              "description": "Whether the active option is selected when the input loses focus.\n\nWhen enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur.",
               "value": { "type": "boolean", "default": "true" }
             },
             {
               "name": "match-text-segments",
-              "description": "Whether the matching text segments in the options should be highlighted",
+              "description": "Whether matching text segments in options are highlighted.\n\nUse this to visually emphasize the part of each option that matches the current input value.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "disable-static-filtering",
-              "description": "Disable client-side static filtering",
+              "description": "Whether built-in client-side filtering is disabled.\n\nUse this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "invalid",
-              "description": "Renders the input field in an invalid state",
+              "description": "Whether the combobox is visually invalid.\n\nUse this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "help-text",
-              "description": "The content to display as the help text",
-              "value": { "type": "string | undefined", "default": "''" }
+              "description": "Help text displayed below the input.\n\nUse this for supporting guidance or validation feedback.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "disabled",
-              "description": "Whether the element is disabled",
+              "description": "Whether the combobox is disabled.\n\nDisabled comboboxes cannot be focused, changed, or submitted with form data.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required",
-              "description": "Whether the element is required",
+              "description": "Whether the combobox is required before form submission.\n\nUse this when the user must provide a value before submitting the form.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "optional",
-              "description": "Whether to show optional text",
+              "description": "Whether to show optional text next to the label.\n\nUse this to indicate that the combobox is not required.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "name",
-              "description": "Name attribute for form submission",
-              "value": { "type": "string | undefined", "default": "''" }
+              "description": "The name submitted with the combobox value.\n\nUse this when the combobox belongs to a form and its value should be included in form data.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "autocomplete",
-              "description": "Autocomplete attribute for the input field",
-              "value": { "type": "string | undefined", "default": "'off'" }
+              "description": "The autocomplete attribute passed to the internal input.\n\nDefaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.",
+              "value": { "type": "string | undefined", "default": "\"off\"" }
             }
           ],
           "events": [],
@@ -1145,77 +1253,77 @@
             "properties": [
               {
                 "name": "options",
-                "description": "The available options to select from",
+                "description": "The available options to select from.\n\nUse this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements.",
                 "type": "ComboboxOption[]"
               },
               {
                 "name": "label",
-                "description": "Label above input",
+                "description": "The label displayed above the input.\n\nUse this to give the combobox a visible and accessible name.",
                 "type": "string | undefined"
               },
               {
                 "name": "placeholder",
-                "description": "Input placeholder",
+                "description": "Placeholder text displayed when the input is empty.\n\nUse this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.",
                 "type": "string | undefined"
               },
               {
                 "name": "value",
-                "description": "The input value",
+                "description": "The selected or typed value.\n\nWhen an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.",
                 "type": "string"
               },
               {
                 "name": "openOnFocus",
-                "description": "Whether the popover opens when focus is on the text field",
+                "description": "Whether the option list opens when the input receives focus.\n\nUse this when users should see available options before they start typing.",
                 "type": "boolean"
               },
               {
                 "name": "selectOnBlur",
-                "description": "Select active option on blur",
+                "description": "Whether the active option is selected when the input loses focus.\n\nWhen enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur.",
                 "type": "boolean"
               },
               {
                 "name": "matchTextSegments",
-                "description": "Whether the matching text segments in the options should be highlighted",
+                "description": "Whether matching text segments in options are highlighted.\n\nUse this to visually emphasize the part of each option that matches the current input value.",
                 "type": "boolean"
               },
               {
                 "name": "disableStaticFiltering",
-                "description": "Disable client-side static filtering",
+                "description": "Whether built-in client-side filtering is disabled.\n\nUse this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided.",
                 "type": "boolean"
               },
               {
                 "name": "invalid",
-                "description": "Renders the input field in an invalid state",
+                "description": "Whether the combobox is visually invalid.\n\nUse this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error.",
                 "type": "boolean"
               },
               {
                 "name": "helpText",
-                "description": "The content to display as the help text",
+                "description": "Help text displayed below the input.\n\nUse this for supporting guidance or validation feedback.",
                 "type": "string | undefined"
               },
               {
                 "name": "disabled",
-                "description": "Whether the element is disabled",
+                "description": "Whether the combobox is disabled.\n\nDisabled comboboxes cannot be focused, changed, or submitted with form data.",
                 "type": "boolean"
               },
               {
                 "name": "required",
-                "description": "Whether the element is required",
+                "description": "Whether the combobox is required before form submission.\n\nUse this when the user must provide a value before submitting the form.",
                 "type": "boolean"
               },
               {
                 "name": "optional",
-                "description": "Whether to show optional text",
+                "description": "Whether to show optional text next to the label.\n\nUse this to indicate that the combobox is not required.",
                 "type": "boolean"
               },
               {
                 "name": "name",
-                "description": "Name attribute for form submission",
+                "description": "The name submitted with the combobox value.\n\nUse this when the combobox belongs to a form and its value should be included in form data.",
                 "type": "string | undefined"
               },
               {
                 "name": "autocomplete",
-                "description": "Autocomplete attribute for the input field",
+                "description": "The autocomplete attribute passed to the internal input.\n\nDefaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.",
                 "type": "string | undefined"
               }
             ],
@@ -1227,59 +1335,83 @@
           "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": "label",
+              "description": "The label displayed above the date input.\n\nUse this to give the datepicker a visible and accessible name.",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "lang",
-              "description": "Takes precedence over the `<html>` lang attribute.",
+              "description": "The locale used for calendar labels and date formatting.\n\nThis takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.",
               "value": { "type": "string" }
             },
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
+            {
+              "name": "name",
+              "description": "The name submitted with the date value.\n\nUse this when the datepicker belongs to a form and its value should be included in form data.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "value",
+              "description": "The selected date value.\n\nUse an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "header-format",
-              "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
-              "value": { "type": "string", "default": "'MMMM yyyy'" }
+              "description": "The date format used 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'" }
+              "description": "The weekday format shown above the calendar grid.\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'" }
+              "description": "The date format used for calendar day accessible names.\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": "label",
+                "description": "The label displayed above the date input.\n\nUse this to give the datepicker a visible and accessible name.",
+                "type": "string | undefined"
+              },
               {
                 "name": "lang",
-                "description": "Takes precedence over the `<html>` lang attribute.",
+                "description": "The locale used for calendar labels and date formatting.\n\nThis takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.",
                 "type": "string"
               },
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" },
+              {
+                "name": "name",
+                "description": "The name submitted with the date value.\n\nUse this when the datepicker belongs to a form and its value should be included in form data.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "value",
+                "description": "The selected date value.\n\nUse an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.",
+                "type": "string | undefined"
+              },
               {
                 "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).",
+                "description": "The date format used 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).",
+                "description": "The weekday format shown above the calendar grid.\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"
+                "description": "Function used to disable dates in the calendar.\n\nSet this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar.",
+                "type": "((day: Date) => boolean) | undefined"
               },
               {
                 "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).",
+                "description": "The date format used for calendar day accessible names.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
                 "type": "string"
               },
               { "name": "isCalendarOpen", "type": "boolean" },
@@ -1304,33 +1436,52 @@
         },
         {
           "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.",
+          "description": "Expandable is a layout component used for creating expandable content areas on a page.\n---\n\n\n### **Slots:**\n - **title** - Alternative to the `title` attribute should you need to provide some additional markup.",
           "doc-url": "",
           "attributes": [
             {
               "name": "expanded",
+              "description": "Controls component's expanded state",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "title", "value": { "type": "string" } },
+            {
+              "name": "title",
+              "description": "Component title. Used to display the title value which is always present regardless of whether the component is open or closed.",
+              "value": { "type": "string" }
+            },
             {
               "name": "box",
+              "description": "Will make the expandable a Box",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "bleed",
+              "description": "Will make the expandable full-width on the sm breakpoint size",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "button-class", "value": { "type": "string" } },
-            { "name": "content-class", "value": { "type": "string" } },
+            {
+              "name": "button-class",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "content-class",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "no-chevron",
+              "description": "Controls chevron visibility",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "animated",
+              "description": "Will animate the expansion/collapse",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "heading-level", "value": { "type": "number" } },
+            {
+              "name": "heading-level",
+              "description": "Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.",
+              "value": { "type": "number | undefined" }
+            },
             {
               "name": "_hasTitle",
               "value": { "type": "boolean", "default": "true" }
@@ -1349,17 +1500,43 @@
           "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" }
+              {
+                "name": "expanded",
+                "description": "Controls component's expanded state",
+                "type": "boolean"
+              },
+              {
+                "name": "title",
+                "description": "Component title. Used to display the title value which is always present regardless of whether the component is open or closed.",
+                "type": "string"
+              },
+              {
+                "name": "box",
+                "description": "Will make the expandable a Box",
+                "type": "boolean"
+              },
+              {
+                "name": "bleed",
+                "description": "Will make the expandable full-width on the sm breakpoint size",
+                "type": "boolean"
+              },
+              { "name": "buttonClass", "type": "string | undefined" },
+              { "name": "contentClass", "type": "string | undefined" },
+              {
+                "name": "noChevron",
+                "description": "Controls chevron visibility",
+                "type": "boolean"
+              },
+              {
+                "name": "animated",
+                "description": "Will animate the expansion/collapse",
+                "type": "boolean"
+              },
+              {
+                "name": "headingLevel",
+                "description": "Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.",
+                "type": "number | undefined"
+              }
             ],
             "events": []
           }
@@ -1374,7 +1551,7 @@
               "description": "Controls if the modal should show or hide.\n\nYou can also call the `open()` and `close()` methods.",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "content-id", "value": { "type": "string" } },
+            { "name": "content-id", "value": { "type": "string | undefined" } },
             {
               "name": "ignore-backdrop-clicks",
               "description": "Ignores clicks to the backdrop when set",
@@ -1406,7 +1583,7 @@
                 "description": "Controls if the modal should show or hide.\n\nYou can also call the `open()` and `close()` methods.",
                 "type": "boolean"
               },
-              { "name": "contentId", "type": "string" },
+              { "name": "contentId", "type": "string | undefined" },
               {
                 "name": "ignoreBackdropClicks",
                 "description": "Ignores clicks to the backdrop when set",
@@ -1517,12 +1694,12 @@
             {
               "name": "base-url",
               "description": "The base URL used to construct page links, for example `/search?page=`.\n\nThe page number is appended to this URL.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "pages",
               "description": "The total number of pages.",
-              "value": { "type": "number" }
+              "value": { "type": "number", "default": "0" }
             },
             {
               "name": "current-page",
@@ -1547,7 +1724,7 @@
               {
                 "name": "baseUrl",
                 "description": "The base URL used to construct page links, for example `/search?page=`.\n\nThe page number is appended to this URL.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "pages",
@@ -1589,17 +1766,23 @@
               "description": "Whether the pill should be rendered as a suggestion.",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "open-sr-label", "value": { "type": "string" } },
+            {
+              "name": "open-sr-label",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "open-aria-label",
               "description": "Label read by screen readers when targeting the pill.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "close-sr-label",
+              "value": { "type": "string | undefined" }
             },
-            { "name": "close-sr-label", "value": { "type": "string" } },
             {
               "name": "close-aria-label",
               "description": "Label read by screen readers when targeting the close button.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             }
           ],
           "events": [
@@ -1626,17 +1809,17 @@
                 "description": "Whether the pill should be rendered as a suggestion.",
                 "type": "boolean"
               },
-              { "name": "openSrLabel", "type": "string" },
+              { "name": "openSrLabel", "type": "string | undefined" },
               {
                 "name": "openAriaLabel",
                 "description": "Label read by screen readers when targeting the pill.",
-                "type": "string"
+                "type": "string | undefined"
               },
-              { "name": "closeSrLabel", "type": "string" },
+              { "name": "closeSrLabel", "type": "string | undefined" },
               {
                 "name": "closeAriaLabel",
                 "description": "Label read by screen readers when targeting the close button.",
-                "type": "string"
+                "type": "string | undefined"
               }
             ],
             "events": [
@@ -1728,18 +1911,18 @@
         },
         {
           "name": "w-radio-group",
-          "description": "Radios allow users to select a single option from a list of choices.\n\nUse with `w-radio`.\n---\n\n\n### **Slots:**\n - **label** - Alternative to the `label` attribute should you need custom HTML.\n- **help-text** - Alternative to the `help-text` attribute should you need custom HTML.",
+          "description": "Radios allow users to select a single option from a list of choices.\n\nUse with `w-radio`.\n---\n\n\n### **Slots:**\n - **label** - Alternative to the `label` attribute should you need custom HTML.\n- **help-text** - Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.).",
           "doc-url": "",
           "attributes": [
             {
               "name": "label",
               "description": "Label for the radio group.",
-              "value": { "type": "string", "default": "''" }
+              "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "help-text",
               "description": "Help text for the radio group.\n\nIf you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute.",
-              "value": { "type": "string", "default": "''" }
+              "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "optional",
@@ -1774,7 +1957,7 @@
             },
             {
               "name": "help-text",
-              "description": "Alternative to the `help-text` attribute should you need custom HTML."
+              "description": "Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.)."
             }
           ],
           "events": [],
@@ -1837,7 +2020,7 @@
             {
               "name": "help-text",
               "description": "The content displayed as the help text.\n\nPaired with `invalid` to show the text as a validation error.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "invalid",
@@ -1852,12 +2035,12 @@
             {
               "name": "hint",
               "description": "The content displayed as the help text.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "label",
               "description": "The content to display as the label.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "optional",
@@ -1882,12 +2065,12 @@
             {
               "name": "name",
               "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "value",
               "description": "Lets you set the current value.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             }
           ],
           "events": [{ "name": "change", "type": "CustomEvent" }],
@@ -1906,7 +2089,7 @@
               {
                 "name": "helpText",
                 "description": "The content displayed as the help text.\n\nPaired with `invalid` to show the text as a validation error.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "invalid",
@@ -1921,12 +2104,12 @@
               {
                 "name": "hint",
                 "description": "The content displayed as the help text.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "label",
                 "description": "The content to display as the label.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "optional",
@@ -1951,12 +2134,12 @@
               {
                 "name": "name",
                 "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "value",
                 "description": "Lets you set the current value.",
-                "type": "string"
+                "type": "string | undefined"
               }
             ],
             "events": [{ "name": "change", "type": "CustomEvent" }]
@@ -1970,30 +2153,27 @@
             {
               "name": "aria-label",
               "description": "Label for the range input.",
-              "value": {
-                "type": "string",
-                "default": "`label` from `w-slider`"
-              }
+              "value": { "type": "string | null", "default": "null" }
             },
             {
               "name": "aria-description",
               "description": "Contextual information for assistive technology, should it be needed",
-              "value": { "type": "string" }
+              "value": { "type": "string | null", "default": "null" }
             },
             {
               "name": "name",
               "description": "The name of this input field in the form. The canonical source of the value is the text field.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "value",
               "description": "The initial value, if any",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "placeholder",
               "description": "Placeholder in empty text fields",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             }
           ],
           "events": [
@@ -2013,27 +2193,27 @@
               {
                 "name": "ariaLabel",
                 "description": "Label for the range input.",
-                "type": "string"
+                "type": "string | null"
               },
               {
                 "name": "ariaDescription",
                 "description": "Contextual information for assistive technology, should it be needed",
-                "type": "string"
+                "type": "string | null"
               },
               {
                 "name": "name",
                 "description": "The name of this input field in the form. The canonical source of the value is the text field.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "value",
                 "description": "The initial value, if any",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "placeholder",
                 "description": "Placeholder in empty text fields",
-                "type": "string"
+                "type": "string | undefined"
               }
             ],
             "events": [
@@ -2058,7 +2238,7 @@
             {
               "name": "label",
               "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead (f. ex. `<legend class=\"sr-only\" slot=\"label\">Production year</legend>`)",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "disabled",
@@ -2072,12 +2252,12 @@
             {
               "name": "error",
               "description": "Validation error text, if any",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "help-text",
               "description": "Additional description to show below the fieldset",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "invalid",
@@ -2092,27 +2272,27 @@
             {
               "name": "min",
               "description": "The minimum allowed value in the range inputs",
-              "value": { "type": "string", "default": "0" }
+              "value": { "type": "string | undefined", "default": "0" }
             },
             {
               "name": "max",
               "description": "The maximum allowed value in the range inputs",
-              "value": { "type": "string", "default": "100" }
+              "value": { "type": "string | undefined", "default": "100" }
             },
             {
               "name": "markers",
               "description": "Pass a value similar to step to create visual markers at that interval",
-              "value": { "type": "number" }
+              "value": { "type": "number | undefined" }
             },
             {
               "name": "step",
               "description": "ets step on the range input to jump between values when dragging",
-              "value": { "type": "number" }
+              "value": { "type": "number | undefined" }
             },
             {
               "name": "suffix",
               "description": "Suffix used in text input fields and for the min and max values of the slider",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "hidden-textfield",
@@ -2148,7 +2328,7 @@
               {
                 "name": "label",
                 "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead (f. ex. `<legend class=\"sr-only\" slot=\"label\">Production year</legend>`)",
-                "type": "string"
+                "type": "string | undefined"
               },
               { "name": "disabled", "type": "boolean" },
               {
@@ -2159,12 +2339,12 @@
               {
                 "name": "error",
                 "description": "Validation error text, if any",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "helpText",
                 "description": "Additional description to show below the fieldset",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "invalid",
@@ -2179,27 +2359,27 @@
               {
                 "name": "min",
                 "description": "The minimum allowed value in the range inputs",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "max",
                 "description": "The maximum allowed value in the range inputs",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "markers",
                 "description": "Pass a value similar to step to create visual markers at that interval",
-                "type": "number"
+                "type": "number | undefined"
               },
               {
                 "name": "step",
                 "description": "ets step on the range input to jump between values when dragging",
-                "type": "number"
+                "type": "number | undefined"
               },
               {
                 "name": "suffix",
                 "description": "Suffix used in text input fields and for the min and max values of the slider",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "hiddenTextfield",
@@ -2209,22 +2389,74 @@
               {
                 "name": "valueFormatter",
                 "description": "Formatter for the tooltip and input mask values",
-                "type": "(value: string, slot: SliderSlot) => string"
+                "type": "((value: string, slot: SliderSlot) => string) | undefined"
               },
               {
                 "name": "tooltipFormatter",
                 "description": "Overrides valueFormatter for the tooltip.\n\nUse in open-ended sliders to show for example \"300+ hk\" instead of \"Max\" in the tooltip.",
-                "type": "(value: string, slot: SliderSlot) => string"
+                "type": "((value: string, slot: SliderSlot) => string) | undefined"
               },
               {
                 "name": "labelFormatter",
                 "description": "Formatter for the min and max labels below the range.",
-                "type": "(slot: SliderSlot) => string"
+                "type": "((slot: SliderSlot) => string) | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-snackbar-item",
+          "description": "An item to show in a `w-snackbar`.\n\nSee the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.\n---\n\n\n### **Methods:**\n - **close(): _void_** - Remove the snackbar item from the document.\n\nMoves focus to the last focused element outside of the snackbar item, if available.\n\n### **Slots:**\n - **default** - the snackbar message.\n- **icon** - icon preceeding the message.\n- **action** - action following the message.\n\n### **CSS Properties:**\n - **--w-c-snackbar-item-radius** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-max-width** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-min-width** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-padding** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-bg** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-bg-active** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-bg-hover** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-color** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-color-active** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-color-hover** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-box-shadow** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **item** - the container wrapping the message, icon and actions.\n- **icon** - the icon for the variant.\n- **message** - the default slot, body of the snackbar item.\n- **action** - close and action button.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "action-placement",
+              "description": "The placement of the action and close buttons.",
+              "value": { "type": "'inline' | 'block'", "default": "\"inline\"" }
+            },
+            {
+              "name": "duration",
+              "description": "How long the message should stay in the document before removing itself.",
+              "value": { "type": "number" }
+            }
+          ],
+          "slots": [
+            { "name": "default", "description": "the snackbar message." },
+            { "name": "icon", "description": "icon preceeding the message." },
+            { "name": "action", "description": "action following the message." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "actionPlacement",
+                "description": "The placement of the action and close buttons.",
+                "type": "'inline' | 'block'"
+              },
+              {
+                "name": "duration",
+                "description": "How long the message should stay in the document before removing itself.",
+                "type": "number"
               }
             ],
             "events": []
           }
         },
+        {
+          "name": "w-snackbar",
+          "description": "A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.\n\nInclude one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.\n---\n\n\n### **Methods:**\n - **create(message: _string_, options: _CreateSnackbarOptions_): __** - Creates a snackbar item and immediately adds it to the snackbar.\n\nBy default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).\n\nIf you include an `action` in the options the default `duration` is\nset to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.\n\nA `duration` of 10 seconds or longer forces the close button to be visible.\n\nThe default `variant` is `neutral` which does not have an icon.\n\nSet `duration` to `SnackbarDuration.Infinite` if you want a persistent message.\n\n### **Slots:**\n - **default** - `w-snackbar-item` gets placed inside the default slot by the `create` function.\n\n### **CSS Properties:**\n - **--w-c-snackbar-container-gap** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-bottom** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-left** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-right** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-top** - undefined _(default: undefined)_\n- **--w-c-snackbar-z-index** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - the live region that positions messages on the screen.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "default",
+              "description": "`w-snackbar-item` gets placed inside the default slot by the `create` function."
+            }
+          ],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "w-step",
           "description": "Individual step component that shows a single step in a process\n---\n",
@@ -2421,7 +2653,7 @@
               "name": "active",
               "description": "The `id` of the panel that should be active.",
               "value": {
-                "type": "string",
+                "type": "string | undefined",
                 "default": "\"\" (Shows the first tab)"
               }
             }
@@ -2438,7 +2670,7 @@
               {
                 "name": "active",
                 "description": "The `id` of the panel that should be active.",
-                "type": "string"
+                "type": "string | undefined"
               }
             ],
             "events": [
@@ -2468,32 +2700,32 @@
             {
               "name": "label",
               "description": "Either a `label` or an `aria-label` must be provided.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "help-text",
               "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "maximum-rows",
               "description": "Sets the maximum number of text rows before the content starts scrolling.",
-              "value": { "type": "number" }
+              "value": { "type": "number | undefined" }
             },
             {
               "name": "minimum-rows",
               "description": "Sets the minimum number of text rows the textarea should display",
-              "value": { "type": "number" }
+              "value": { "type": "number | undefined" }
             },
             {
               "name": "name",
               "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "placeholder",
               "description": "Set a text that is shown in the textarea when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "read-only",
@@ -2512,7 +2744,7 @@
             {
               "name": "value",
               "description": "Lets you set the current value",
-              "value": { "type": "string" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "optional",
@@ -2536,32 +2768,32 @@
               {
                 "name": "label",
                 "description": "Either a `label` or an `aria-label` must be provided.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "helpText",
                 "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "maxRows",
                 "description": "Sets the maximum number of text rows before the content starts scrolling.",
-                "type": "number"
+                "type": "number | undefined"
               },
               {
                 "name": "minRows",
                 "description": "Sets the minimum number of text rows the textarea should display",
-                "type": "number"
+                "type": "number | undefined"
               },
               {
                 "name": "name",
                 "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "placeholder",
                 "description": "Set a text that is shown in the textarea when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.",
-                "type": "string"
+                "type": "string | undefined"
               },
               { "name": "readOnly", "type": "boolean" },
               {
@@ -2577,7 +2809,7 @@
               {
                 "name": "value",
                 "description": "Lets you set the current value",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "optional",
@@ -2601,8 +2833,41 @@
       ]
     },
     "css": {
-      "properties": [],
-      "pseudo-elements": []
+      "properties": [
+        { "name": "--w-c-snackbar-item-radius" },
+        { "name": "--w-c-snackbar-item-max-width" },
+        { "name": "--w-c-snackbar-item-min-width" },
+        { "name": "--w-c-snackbar-item-padding" },
+        { "name": "--w-c-snackbar-item-bg" },
+        { "name": "--w-c-snackbar-item-action-bg-active" },
+        { "name": "--w-c-snackbar-item-action-bg-hover" },
+        { "name": "--w-c-snackbar-item-color" },
+        { "name": "--w-c-snackbar-item-action-color-active" },
+        { "name": "--w-c-snackbar-item-action-color-hover" },
+        { "name": "--w-c-snackbar-item-box-shadow" },
+        { "name": "--w-c-snackbar-container-gap" },
+        { "name": "--w-c-snackbar-position-bottom" },
+        { "name": "--w-c-snackbar-position-left" },
+        { "name": "--w-c-snackbar-position-right" },
+        { "name": "--w-c-snackbar-position-top" },
+        { "name": "--w-c-snackbar-z-index" }
+      ],
+      "pseudo-elements": [
+        {
+          "name": "part(item)",
+          "description": "the container wrapping the message, icon and actions."
+        },
+        { "name": "part(icon)", "description": "the icon for the variant." },
+        {
+          "name": "part(message)",
+          "description": "the default slot, body of the snackbar item."
+        },
+        { "name": "part(action)", "description": "close and action button." },
+        {
+          "name": "part(container)",
+          "description": "the live region that positions messages on the screen."
+        }
+      ]
     }
   }
 }