@warp-ds/elements 2.9.0-next.5 → 2.9.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.9.0-next.4",
+  "version": "2.9.0-next.6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -51,74 +51,217 @@
         },
         {
           "name": "w-textfield",
-          "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)\n---\n",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
               "name": "disabled",
+              "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "invalid",
+              "description": "Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem.",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "id", "value": { "type": "string" } },
-            { "name": "label", "value": { "type": "string" } },
-            { "name": "help-text", "value": { "type": "string" } },
-            { "name": "size", "value": { "type": "string" } },
-            { "name": "max", "value": { "type": "number" } },
-            { "name": "min", "value": { "type": "number" } },
+            {
+              "name": "label",
+              "description": "Either a `label` or an `aria-label` must be provided.",
+              "value": { "type": "string" }
+            },
+            {
+              "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" }
+            },
+            {
+              "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" }
+            },
+            {
+              "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" }
+            },
+            {
+              "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" }
+            },
             { "name": "min-length", "value": { "type": "number" } },
+            {
+              "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" }
+            },
             { "name": "max-length", "value": { "type": "number" } },
-            { "name": "pattern", "value": { "type": "string" } },
-            { "name": "placeholder", "value": { "type": "string" } },
+            {
+              "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" }
+            },
+            {
+              "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" }
+            },
+            {
+              "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" }
+            },
             {
               "name": "read-only",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "readonly",
+              "description": "Whether the input can be selected but not changed by the user.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required",
+              "description": "Whether user input is required on the input before form submission.",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "type", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "step", "value": { "type": "number" } },
+            {
+              "name": "type",
+              "description": "The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "value",
+              "description": "Lets you set the current value.",
+              "value": { "type": "string" }
+            },
+            {
+              "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" }
+            },
+            {
+              "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" }
+            },
             {
               "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" }
             }
           ],
+          "slots": [
+            {
+              "name": "suffix",
+              "description": "Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek)."
+            },
+            {
+              "name": "prefix",
+              "description": "Use with `<w-affix>` to include a prefix, for example a search icon."
+            }
+          ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "disabled", "type": "boolean" },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "id", "type": "string" },
-              { "name": "label", "type": "string" },
-              { "name": "helpText", "type": "string" },
-              { "name": "size", "type": "string" },
-              { "name": "max", "type": "number" },
-              { "name": "min", "type": "number" },
+              {
+                "name": "disabled",
+                "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.",
+                "type": "boolean"
+              },
+              {
+                "name": "invalid",
+                "description": "Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "Either a `label` or an `aria-label` must be provided.",
+                "type": "string"
+              },
+              {
+                "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"
+              },
+              {
+                "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"
+              },
+              {
+                "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"
+              },
+              {
+                "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"
+              },
               { "name": "minLength", "type": "number" },
+              {
+                "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"
+              },
               { "name": "maxLength", "type": "number" },
-              { "name": "pattern", "type": "string" },
-              { "name": "placeholder", "type": "string" },
+              {
+                "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"
+              },
+              {
+                "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"
+              },
+              {
+                "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"
+              },
               { "name": "readOnly", "type": "boolean" },
-              { "name": "readonly", "type": "boolean" },
-              { "name": "required", "type": "boolean" },
-              { "name": "type", "type": "string" },
-              { "name": "value", "type": "string" },
-              { "name": "name", "type": "string" },
-              { "name": "step", "type": "number" },
-              { "name": "autocomplete", "type": "string | undefined" },
-              { "name": "formatter", "type": "(value: string) => string" },
-              { "name": "_hasPrefix" },
-              { "name": "_hasSuffix" }
+              {
+                "name": "readonly",
+                "description": "Whether the input can be selected but not changed by the user.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Whether user input is required on the input before form submission.",
+                "type": "boolean"
+              },
+              {
+                "name": "type",
+                "description": "The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "Lets you set the current value.",
+                "type": "string"
+              },
+              {
+                "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"
+              },
+              {
+                "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"
+              },
+              {
+                "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"
+              },
+              {
+                "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"
+              }
             ],
             "events": []
           }
@@ -151,31 +294,19 @@
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "ariaLabel",
-                "description": "Used to override the default `aria-label`s for the internal button when `search` or `clear` is enabled.",
-                "type": "string | null"
-              },
+              { "name": "ariaLabel", "type": "string | null" },
               {
                 "name": "clear",
-                "description": "Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.",
+                "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.",
                 "type": "boolean"
               },
               {
                 "name": "search",
-                "description": "Shows a clickable search icon, typically in a prefix slot for search fields.",
+                "description": "Add this property to render a clickable Warp search icon.",
                 "type": "boolean"
               },
-              {
-                "name": "label",
-                "description": "Displays plain text such as a currency or unit label (for example `kr` or `%`) instead of an icon button.",
-                "type": "string"
-              },
-              {
-                "name": "icon",
-                "description": "Displays a non-interactive `w-icon` in the affix area using the provided icon name (for example `Search` or `Close`) instead of text.",
-                "type": "string | null"
-              },
+              { "name": "label", "type": "string" },
+              { "name": "icon", "type": "string | null" },
               { "name": "_icon" }
             ],
             "events": []
@@ -207,19 +338,10 @@
             "properties": [
               {
                 "name": "variant",
-                "description": "Controls both the color treatment and icon used by the component. Accepted values are `info`, `warning`, `positive`, and `negative`. Use the variant that matches the message severity so users can quickly distinguish informative messages from warnings, errors, and confirmations.",
                 "type": "'negative' | 'positive' | 'warning' | 'info'"
               },
-              {
-                "name": "show",
-                "description": "Alerts are hidden by default (`false`). Set this to `true` to render and expand the content. This is reflected as an attribute, so visibility can be controlled from markup (`show`) or from JavaScript (`element.show = true`).",
-                "type": "boolean"
-              },
-              {
-                "name": "role",
-                "description": "Defaults to `alert` so urgent changes are announced by screen readers. Override this only when your use case requires a different announcement behavior, for example a less assertive live region strategy.",
-                "type": "string"
-              }
+              { "name": "show", "type": "boolean" },
+              { "name": "role", "type": "string" }
             ],
             "events": []
           }
@@ -351,78 +473,143 @@
         },
         {
           "name": "w-attention",
-          "description": "\n---\n",
+          "description": "Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights.\n\nThe component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs.\n\nNote: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.\n---\n",
           "doc-url": "",
           "attributes": [
             {
               "name": "show",
+              "description": "Controls whether the attention panel is visible.\nSet to `true` to show the attention content and `false` to hide it.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "placement",
+              "description": "Preferred placement relative to the trigger element.\nSets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.",
               "value": { "type": "Directions", "default": "'bottom'" }
             },
             {
               "name": "tooltip",
+              "description": "Renders the component with tooltip styling and behavior.\nUse for compact, non-modal contextual hints anchored to another element.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "callout",
+              "description": "Renders the component as an inline callout.\nCallout mode is used for always-in-flow informational content instead of floating overlay behavior.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "popover",
+              "description": "Enables native popover behavior for the attention element.\nWhen enabled, the component uses popover semantics and styling suitable for floating surface UI.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "highlight",
+              "description": "Renders the component with highlight styling.\nUse highlight mode to visually emphasize important contextual information.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "can-close",
+              "description": "Shows a close button inside the attention component.\nAdds an internal dismiss action that lets users close the attention panel.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "no-arrow",
+              "description": "Hides the directional arrow of the attention component.\nDisable the arrow when the visual connection to the trigger should not be shown.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "distance",
+              "description": "Distance offset between trigger and attention panel.\nDefines the main-axis spacing in pixels from the anchor element.",
               "value": { "type": "number", "default": "8" }
             },
             {
               "name": "skidding",
+              "description": "Cross-axis offset for fine-grained positioning.\nMoves the panel along the cross axis in pixels to adjust alignment with the trigger.",
               "value": { "type": "number", "default": "0" }
             },
             {
               "name": "flip",
+              "description": "Enables automatic flipping when placement has no space.\nAllows the component to choose an alternative side if the preferred placement would overflow.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "cross-axis",
+              "description": "Allows overflow checks on the cross axis when flipping.\nUse with `flip` to improve collision handling when space is constrained horizontally or vertically.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "fallback-placements",
-              "value": { "type": "Directions[]" }
+              "description": "Ordered list of fallback placements.\nProvides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.",
+              "value": { "type": "Directions[]", "default": "[]" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "show", "type": "boolean" },
-              { "name": "placement", "type": "Directions" },
-              { "name": "tooltip", "type": "boolean" },
-              { "name": "callout", "type": "boolean" },
-              { "name": "popover", "type": "boolean" },
-              { "name": "highlight", "type": "boolean" },
-              { "name": "canClose", "type": "boolean" },
-              { "name": "noArrow", "type": "boolean" },
-              { "name": "distance", "type": "number" },
-              { "name": "skidding", "type": "number" },
-              { "name": "flip", "type": "boolean" },
-              { "name": "crossAxis", "type": "boolean" },
-              { "name": "fallbackPlacements", "type": "Directions[]" },
+              {
+                "name": "show",
+                "description": "Controls whether the attention panel is visible.\nSet to `true` to show the attention content and `false` to hide it.",
+                "type": "boolean"
+              },
+              {
+                "name": "placement",
+                "description": "Preferred placement relative to the trigger element.\nSets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.",
+                "type": "Directions"
+              },
+              {
+                "name": "tooltip",
+                "description": "Renders the component with tooltip styling and behavior.\nUse for compact, non-modal contextual hints anchored to another element.",
+                "type": "boolean"
+              },
+              {
+                "name": "callout",
+                "description": "Renders the component as an inline callout.\nCallout mode is used for always-in-flow informational content instead of floating overlay behavior.",
+                "type": "boolean"
+              },
+              {
+                "name": "popover",
+                "description": "Enables native popover behavior for the attention element.\nWhen enabled, the component uses popover semantics and styling suitable for floating surface UI.",
+                "type": "boolean"
+              },
+              {
+                "name": "highlight",
+                "description": "Renders the component with highlight styling.\nUse highlight mode to visually emphasize important contextual information.",
+                "type": "boolean"
+              },
+              {
+                "name": "canClose",
+                "description": "Shows a close button inside the attention component.\nAdds an internal dismiss action that lets users close the attention panel.",
+                "type": "boolean"
+              },
+              {
+                "name": "noArrow",
+                "description": "Hides the directional arrow of the attention component.\nDisable the arrow when the visual connection to the trigger should not be shown.",
+                "type": "boolean"
+              },
+              {
+                "name": "distance",
+                "description": "Distance offset between trigger and attention panel.\nDefines the main-axis spacing in pixels from the anchor element.",
+                "type": "number"
+              },
+              {
+                "name": "skidding",
+                "description": "Cross-axis offset for fine-grained positioning.\nMoves the panel along the cross axis in pixels to adjust alignment with the trigger.",
+                "type": "number"
+              },
+              {
+                "name": "flip",
+                "description": "Enables automatic flipping when placement has no space.\nAllows the component to choose an alternative side if the preferred placement would overflow.",
+                "type": "boolean"
+              },
+              {
+                "name": "crossAxis",
+                "description": "Allows overflow checks on the cross axis when flipping.\nUse with `flip` to improve collision handling when space is constrained horizontally or vertically.",
+                "type": "boolean"
+              },
+              {
+                "name": "fallbackPlacements",
+                "description": "Ordered list of fallback placements.\nProvides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.",
+                "type": "Directions[]"
+              },
               { "name": "_initialPlacement" },
               { "name": "_actualDirection" }
             ],
@@ -431,31 +618,41 @@
         },
         {
           "name": "w-badge",
-          "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)\n---\n",
+          "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n---\n\n\n### **Slots:**\n - _default_ - The content of the badge, which is typically a short string like \"New\" or \"4\".",
           "doc-url": "",
           "attributes": [
             {
               "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'"
               }
             },
             {
               "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'"
               }
             }
           ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The content of the badge, which is typically a short string like \"New\" or \"4\"."
+            }
+          ],
           "events": [],
           "js": {
             "properties": [
               {
                 "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'"
               },
               {
                 "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'"
               }
             ],
@@ -782,21 +979,81 @@
           "events": [],
           "js": {
             "properties": [
-              { "name": "options", "type": "ComboboxOption[]" },
-              { "name": "label", "type": "string | undefined" },
-              { "name": "placeholder", "type": "string | undefined" },
-              { "name": "value", "type": "string" },
-              { "name": "openOnFocus", "type": "boolean" },
-              { "name": "selectOnBlur", "type": "boolean" },
-              { "name": "matchTextSegments", "type": "boolean" },
-              { "name": "disableStaticFiltering", "type": "boolean" },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "helpText", "type": "string | undefined" },
-              { "name": "disabled", "type": "boolean" },
-              { "name": "required", "type": "boolean" },
-              { "name": "optional", "type": "boolean" },
-              { "name": "name", "type": "string | undefined" },
-              { "name": "autocomplete", "type": "string | undefined" }
+              {
+                "name": "options",
+                "description": "The available options to select from",
+                "type": "ComboboxOption[]"
+              },
+              {
+                "name": "label",
+                "description": "Label above input",
+                "type": "string | undefined"
+              },
+              {
+                "name": "placeholder",
+                "description": "Input placeholder",
+                "type": "string | undefined"
+              },
+              {
+                "name": "value",
+                "description": "The input value",
+                "type": "string"
+              },
+              {
+                "name": "openOnFocus",
+                "description": "Whether the popover opens when focus is on the text field",
+                "type": "boolean"
+              },
+              {
+                "name": "selectOnBlur",
+                "description": "Select active option on blur",
+                "type": "boolean"
+              },
+              {
+                "name": "matchTextSegments",
+                "description": "Whether the matching text segments in the options should be highlighted",
+                "type": "boolean"
+              },
+              {
+                "name": "disableStaticFiltering",
+                "description": "Disable client-side static filtering",
+                "type": "boolean"
+              },
+              {
+                "name": "invalid",
+                "description": "Renders the input field in an invalid state",
+                "type": "boolean"
+              },
+              {
+                "name": "helpText",
+                "description": "The content to display as the help text",
+                "type": "string | undefined"
+              },
+              {
+                "name": "disabled",
+                "description": "Whether the element is disabled",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Whether the element is required",
+                "type": "boolean"
+              },
+              {
+                "name": "optional",
+                "description": "Whether to show optional text",
+                "type": "boolean"
+              },
+              {
+                "name": "name",
+                "description": "Name attribute for form submission",
+                "type": "string | undefined"
+              },
+              {
+                "name": "autocomplete",
+                "description": "Autocomplete attribute for the input field",
+                "type": "string | undefined"
+              }
             ],
             "events": []
           }
@@ -834,13 +1091,33 @@
           "js": {
             "properties": [
               { "name": "label", "type": "string" },
-              { "name": "lang", "type": "string" },
+              {
+                "name": "lang",
+                "description": "Takes precedence over the `<html>` lang attribute.",
+                "type": "string"
+              },
               { "name": "name", "type": "string" },
               { "name": "value", "type": "string" },
-              { "name": "headerFormat", "type": "string" },
-              { "name": "weekdayFormat", "type": "string" },
-              { "name": "isDayDisabled", "type": "(day: Date) => boolean" },
-              { "name": "dayFormat", "type": "string" },
+              {
+                "name": "headerFormat",
+                "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+                "type": "string"
+              },
+              {
+                "name": "weekdayFormat",
+                "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+                "type": "string"
+              },
+              {
+                "name": "isDayDisabled",
+                "description": "Lets you control if a date in the calendar should be disabled.\n\nThis needs to be set on the element instance in JavaScript, not as an HTML attribute.",
+                "type": "(day: Date) => boolean"
+              },
+              {
+                "name": "dayFormat",
+                "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+                "type": "string"
+              },
               { "name": "isCalendarOpen", "type": "boolean" },
               { "name": "navigationDate", "type": "Date" },
               { "name": "selectedDate", "type": "Date | null" },
@@ -1033,8 +1310,16 @@
           "events": [],
           "js": {
             "properties": [
-              { "name": "selectedPage", "type": "number" },
-              { "name": "pageCount", "type": "number" }
+              {
+                "name": "selectedPage",
+                "description": "Currently selected page (1-based index, clamped to valid range)",
+                "type": "number"
+              },
+              {
+                "name": "pageCount",
+                "description": "Total number of pages (minimum 1)",
+                "type": "number"
+              }
             ],
             "events": []
           }
@@ -1327,20 +1612,63 @@
           "events": [{ "name": "change", "type": "CustomEvent" }],
           "js": {
             "properties": [
-              { "name": "autoFocus", "type": "boolean" },
-              { "name": "autofocus", "type": "boolean" },
-              { "name": "helpText", "type": "string" },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "always", "type": "boolean" },
-              { "name": "hint", "type": "string" },
-              { "name": "label", "type": "string" },
-              { "name": "optional", "type": "boolean" },
-              { "name": "disabled", "type": "boolean" },
-              { "name": "readOnly", "type": "boolean" },
-              { "name": "readonly", "type": "boolean" },
+              {
+                "name": "autoFocus",
+                "description": "Whether the element should receive focus on render.",
+                "type": "boolean"
+              },
+              {
+                "name": "autofocus",
+                "description": "Whether the element should receive focus on render",
+                "type": "boolean"
+              },
+              {
+                "name": "helpText",
+                "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
+                "type": "string"
+              },
+              {
+                "name": "invalid",
+                "description": "Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.",
+                "type": "boolean"
+              },
+              {
+                "name": "always",
+                "description": "Whether to always show a hint.",
+                "type": "boolean"
+              },
+              {
+                "name": "hint",
+                "description": "The content displayed as the help text.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "The content to disply as the label",
+                "type": "string"
+              },
+              {
+                "name": "optional",
+                "description": "Whether to show optional text",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Renders the field in a disabled state.",
+                "type": "boolean"
+              },
+              {
+                "name": "readOnly",
+                "description": "Renders the field in a readonly state.",
+                "type": "boolean"
+              },
+              {
+                "name": "readonly",
+                "description": "Renders the field in a readonly state.",
+                "type": "boolean"
+              },
               { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" },
-              { "name": "_options" }
+              { "name": "value", "type": "string" }
             ],
             "events": [{ "name": "change", "type": "CustomEvent" }]
           }
@@ -1380,13 +1708,7 @@
                 "description": "Value to display in the tooltip",
                 "type": "string | number"
               },
-              { "name": "ariaDescriptionText" },
-              { "name": "disabled" },
-              { "name": "invalid" },
-              { "name": "openEnded" },
-              { "name": "valueFormatter" },
-              { "name": "tooltipFormatter" },
-              { "name": "labelFormatter" }
+              { "name": "ariaDescriptionText" }
             ],
             "events": [
               { "name": "thumbreset", "type": "CustomEvent" },
@@ -1467,29 +1789,52 @@
           "events": [],
           "js": {
             "properties": [
-              { "name": "label", "type": "string" },
+              {
+                "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"
+              },
               { "name": "disabled", "type": "boolean" },
-              { "name": "openEnded", "type": "boolean" },
+              {
+                "name": "openEnded",
+                "description": "Whether or not to allow values outside the range such as \"Before 1950\" and \"2025+\".",
+                "type": "boolean"
+              },
               { "name": "error", "type": "string" },
               { "name": "helpText", "type": "string" },
               { "name": "invalid", "type": "boolean" },
-              { "name": "required", "type": "boolean" },
+              {
+                "name": "required",
+                "description": "Ensures a child slider thumb has a value before allowing the containing form to submit.",
+                "type": "boolean"
+              },
               { "name": "min", "type": "string" },
               { "name": "max", "type": "string" },
-              { "name": "markers", "type": "number" },
+              {
+                "name": "markers",
+                "description": "Pass a value similar to step to create visual markers at that interval",
+                "type": "number"
+              },
               { "name": "step", "type": "number" },
-              { "name": "suffix", "type": "string" },
+              {
+                "name": "suffix",
+                "description": "Suffix used in text input fields and for the min and max values of the slider.",
+                "type": "string"
+              },
               { "name": "hiddenTextfield", "type": "boolean" },
               {
                 "name": "valueFormatter",
+                "description": "Formatter for the tooltip and input mask values.",
                 "type": "(value: string, slot: SliderSlot) => string"
               },
               {
                 "name": "tooltipFormatter",
+                "description": "Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example \"300+ hk\" instead of \"Max\" in the tooltip.",
                 "type": "(value: string, slot: SliderSlot) => string"
               },
               {
                 "name": "labelFormatter",
+                "description": "Formatter for the min and max labels below the range.",
                 "type": "(slot: SliderSlot) => string"
               },
               { "name": "fieldset", "type": "HTMLFieldSetElement" },
@@ -1619,9 +1964,7 @@
               },
               { "name": "ariaSelected", "type": "'true' | 'false'" },
               { "name": "active", "type": "boolean" },
-              { "name": "over", "type": "boolean" },
-              { "name": "_parentTabIndex" },
-              { "name": "_parentAriaSelected" }
+              { "name": "over", "type": "boolean" }
             ],
             "events": []
           }
@@ -1644,9 +1987,7 @@
                 "name": "active",
                 "description": "Whether this panel is active (visible).\nSet by parent w-tabs via the _parentActive property.",
                 "type": "boolean"
-              },
-              { "name": "_parentActive" },
-              { "name": "_parentAriaLabelledBy" }
+              }
             ],
             "events": []
           }
@@ -1668,59 +2009,138 @@
         },
         {
           "name": "w-textarea",
-          "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)\n---\n\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the textarea passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the browser's validation message if invalid\n- **setCustomValidity(message: _string_): _void_** - Sets a custom validation message. Pass an empty string to clear.",
+          "description": "A multi-line text input with built-in form validation, auto-resizing, and styling support.\n\nThe component automatically handles:\n - Form integration\n - Auto-resizing based on content and row constraints\n - Built-in validation with customizable error messages\n - Accessibility attributes and labeling\n---\n\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the textarea passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the browser's validation message if invalid\n- **setCustomValidity(message: _string_): _void_** - Sets a custom validation message. Pass an empty string to clear.",
           "doc-url": "",
           "attributes": [
             {
               "name": "disabled",
+              "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "invalid",
+              "description": "Mark the form field as invalid.\n\nMake sure to also set a `help-text` to help users fix the validation problem.",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "label", "value": { "type": "string" } },
-            { "name": "help-text", "value": { "type": "string" } },
-            { "name": "maximum-rows", "value": { "type": "number" } },
-            { "name": "minimum-rows", "value": { "type": "number" } },
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "placeholder", "value": { "type": "string" } },
+            {
+              "name": "label",
+              "description": "Either a `label` or an `aria-label` must be provided.",
+              "value": { "type": "string" }
+            },
+            {
+              "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" }
+            },
+            {
+              "name": "maximum-rows",
+              "description": "Sets the maximum number of text rows before the content starts scrolling.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "minimum-rows",
+              "description": "Sets the minimum number of text rows the textarea should display",
+              "value": { "type": "number" }
+            },
+            {
+              "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" }
+            },
+            {
+              "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" }
+            },
             {
               "name": "read-only",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "readonly",
+              "description": "Whether the input can be selected but not changed by the user",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required",
+              "description": "Whether user input is required on the input before form submission",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "value", "value": { "type": "string" } },
+            {
+              "name": "value",
+              "description": "Lets you set the current value",
+              "value": { "type": "string" }
+            },
             {
               "name": "optional",
+              "description": "Show an icon behind the label indicating the field is optional",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "disabled", "type": "boolean" },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "label", "type": "string" },
-              { "name": "helpText", "type": "string" },
-              { "name": "maxRows", "type": "number" },
-              { "name": "minRows", "type": "number" },
-              { "name": "name", "type": "string" },
-              { "name": "placeholder", "type": "string" },
+              {
+                "name": "disabled",
+                "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.",
+                "type": "boolean"
+              },
+              {
+                "name": "invalid",
+                "description": "Mark the form field as invalid.\n\nMake sure to also set a `help-text` to help users fix the validation problem.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "Either a `label` or an `aria-label` must be provided.",
+                "type": "string"
+              },
+              {
+                "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"
+              },
+              {
+                "name": "maxRows",
+                "description": "Sets the maximum number of text rows before the content starts scrolling.",
+                "type": "number"
+              },
+              {
+                "name": "minRows",
+                "description": "Sets the minimum number of text rows the textarea should display",
+                "type": "number"
+              },
+              {
+                "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"
+              },
+              {
+                "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"
+              },
               { "name": "readOnly", "type": "boolean" },
-              { "name": "readonly", "type": "boolean" },
-              { "name": "required", "type": "boolean" },
-              { "name": "value", "type": "string" },
-              { "name": "optional", "type": "boolean" },
-              { "name": "minHeight" },
-              { "name": "maxHeight" },
+              {
+                "name": "readonly",
+                "description": "Whether the input can be selected but not changed by the user",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Whether user input is required on the input before form submission",
+                "type": "boolean"
+              },
+              {
+                "name": "value",
+                "description": "Lets you set the current value",
+                "type": "string"
+              },
+              {
+                "name": "optional",
+                "description": "Show an icon behind the label indicating the field is optional",
+                "type": "boolean"
+              },
               {
                 "name": "validationMessage",
                 "description": "Returns the validation message if the textarea is invalid, otherwise an empty string",