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

package/dist/index.d.ts

@@ -129,117 +129,141 @@ export type WIconSolidJsProps = {
 };
 
 export type WarpTextFieldProps = {
-  /**  */
+  /** Keep in mind that using disabled in its current form is an anti-pattern.
+
+There 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.
+
+Please consider more informative alternatives before choosing to use disabled on an element. */
   disabled?: WarpTextField["disabled"];
-  /**  */
+  /** Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem. */
   invalid?: WarpTextField["invalid"];
-  /**  */
-  id?: WarpTextField["id"];
-  /**  */
+  /** Either a `label` or an `aria-label` must be provided. */
   label?: WarpTextField["label"];
-  /**  */
+  /** Use in combination with `invalid` to show as a validation error message,
+or on its own to show a help text. */
   "help-text"?: WarpTextField["helpText"];
-  /**  */
+  /** Use in combination with `invalid` to show as a validation error message,
+or on its own to show a help text. */
   helpText?: WarpTextField["helpText"];
-  /**  */
+  /** 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. */
   size?: WarpTextField["size"];
-  /**  */
+  /** Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength). */
   max?: WarpTextField["max"];
-  /**  */
+  /** Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength). */
   min?: WarpTextField["min"];
-  /**  */
+  /** @deprecated Use the native `minlength` attribute  */
   "min-length"?: WarpTextField["minLength"];
-  /**  */
+  /** @deprecated Use the native `minlength` attribute  */
   minLength?: WarpTextField["minLength"];
-  /**  */
+  /** 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. */
+  minlength?: WarpTextField["minlength"];
+  /** @deprecated Use the native `maxlength` attribute  */
   "max-length"?: WarpTextField["maxLength"];
-  /**  */
+  /** @deprecated Use the native `maxlength` attribute  */
   maxLength?: WarpTextField["maxLength"];
-  /**  */
+  /** 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. */
+  maxlength?: WarpTextField["maxlength"];
+  /** 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) */
   pattern?: WarpTextField["pattern"];
-  /**  */
+  /** Set a text that is shown in the textfield when it doesn't have a value.
+
+Placeholder text should not be used as a substitute for labeling the element with a visible label. */
   placeholder?: WarpTextField["placeholder"];
   /** @deprecated Use the native readonly attribute instead.  */
   "read-only"?: WarpTextField["readOnly"];
   /** @deprecated Use the native readonly attribute instead.  */
   readOnly?: WarpTextField["readOnly"];
-  /**  */
+  /** Whether the input can be selected but not changed by the user. */
   readonly?: WarpTextField["readonly"];
-  /**  */
+  /** Whether user input is required on the input before form submission. */
   required?: WarpTextField["required"];
-  /**  */
+  /** The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types). */
   type?: WarpTextField["type"];
-  /**  */
+  /** Lets you set the current value. */
   value?: WarpTextField["value"];
-  /**  */
+  /** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form. */
   name?: WarpTextField["name"];
-  /**  */
+  /** When used with `number` this attribute forces inputs to be a whole number of `step`.
+
+For example with a `step="5"` only values that divide evenly on 5 are allowed.
+Using arrow up and down in the input field increments and decrements by 5. */
   step?: WarpTextField["step"];
-  /**  */
+  /** 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. */
   autocomplete?: WarpTextField["autocomplete"];
-  /**  */
+  /** Function to format value when the input field.
+
+Only active when the input field does not have focus,
+similar to the accessible input [masking example from Filament Group](https://filamentgroup.github.io/politespace/demo/demo.html). */
   formatter?: WarpTextField["formatter"];
-  /**  */
-  _hasPrefix?: WarpTextField["_hasPrefix"];
-  /**  */
-  _hasSuffix?: WarpTextField["_hasSuffix"];
 };
 
 export type WarpTextFieldSolidJsProps = {
-  /**  */
+  /** Keep in mind that using disabled in its current form is an anti-pattern.
+
+There 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.
+
+Please consider more informative alternatives before choosing to use disabled on an element. */
   "prop:disabled"?: WarpTextField["disabled"];
-  /**  */
+  /** Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem. */
   "prop:invalid"?: WarpTextField["invalid"];
-  /**  */
-  "prop:id"?: WarpTextField["id"];
-  /**  */
+  /** Either a `label` or an `aria-label` must be provided. */
   "prop:label"?: WarpTextField["label"];
-  /**  */
+  /** Use in combination with `invalid` to show as a validation error message,
+or on its own to show a help text. */
   "attr:help-text"?: WarpTextField["helpText"];
-  /**  */
+  /** Use in combination with `invalid` to show as a validation error message,
+or on its own to show a help text. */
   "prop:helpText"?: WarpTextField["helpText"];
-  /**  */
+  /** 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. */
   "prop:size"?: WarpTextField["size"];
-  /**  */
+  /** Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength). */
   "prop:max"?: WarpTextField["max"];
-  /**  */
+  /** Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength). */
   "prop:min"?: WarpTextField["min"];
-  /**  */
+  /** @deprecated Use the native `minlength` attribute  */
   "attr:min-length"?: WarpTextField["minLength"];
-  /**  */
+  /** @deprecated Use the native `minlength` attribute  */
   "prop:minLength"?: WarpTextField["minLength"];
-  /**  */
+  /** 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. */
+  "prop:minlength"?: WarpTextField["minlength"];
+  /** @deprecated Use the native `maxlength` attribute  */
   "attr:max-length"?: WarpTextField["maxLength"];
-  /**  */
+  /** @deprecated Use the native `maxlength` attribute  */
   "prop:maxLength"?: WarpTextField["maxLength"];
-  /**  */
+  /** 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. */
+  "prop:maxlength"?: WarpTextField["maxlength"];
+  /** 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) */
   "prop:pattern"?: WarpTextField["pattern"];
-  /**  */
+  /** Set a text that is shown in the textfield when it doesn't have a value.
+
+Placeholder text should not be used as a substitute for labeling the element with a visible label. */
   "prop:placeholder"?: WarpTextField["placeholder"];
   /** @deprecated Use the native readonly attribute instead.  */
   "bool:read-only"?: WarpTextField["readOnly"];
   /** @deprecated Use the native readonly attribute instead.  */
   "prop:readOnly"?: WarpTextField["readOnly"];
-  /**  */
+  /** Whether the input can be selected but not changed by the user. */
   "prop:readonly"?: WarpTextField["readonly"];
-  /**  */
+  /** Whether user input is required on the input before form submission. */
   "prop:required"?: WarpTextField["required"];
-  /**  */
+  /** The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types). */
   "prop:type"?: WarpTextField["type"];
-  /**  */
+  /** Lets you set the current value. */
   "prop:value"?: WarpTextField["value"];
-  /**  */
+  /** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form. */
   "prop:name"?: WarpTextField["name"];
-  /**  */
+  /** When used with `number` this attribute forces inputs to be a whole number of `step`.
+
+For example with a `step="5"` only values that divide evenly on 5 are allowed.
+Using arrow up and down in the input field increments and decrements by 5. */
   "prop:step"?: WarpTextField["step"];
-  /**  */
+  /** 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. */
   "prop:autocomplete"?: WarpTextField["autocomplete"];
-  /**  */
+  /** Function to format value when the input field.
+
+Only active when the input field does not have focus,
+similar to the accessible input [masking example from Filament Group](https://filamentgroup.github.io/politespace/demo/demo.html). */
   "prop:formatter"?: WarpTextField["formatter"];
-  /**  */
-  "prop:_hasPrefix"?: WarpTextField["_hasPrefix"];
-  /**  */
-  "prop:_hasSuffix"?: WarpTextField["_hasSuffix"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -444,39 +468,56 @@ export type WarpButtonSolidJsProps = {
 };
 
 export type WarpAttentionProps = {
-  /**  */
+  /** Controls whether the attention panel is visible.
+Set to `true` to show the attention content and `false` to hide it. */
   show?: WarpAttention["show"];
-  /**  */
+  /** Preferred placement relative to the trigger element.
+Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants. */
   placement?: WarpAttention["placement"];
-  /**  */
+  /** Renders the component with tooltip styling and behavior.
+Use for compact, non-modal contextual hints anchored to another element. */
   tooltip?: WarpAttention["tooltip"];
-  /**  */
+  /** Renders the component as an inline callout.
+Callout mode is used for always-in-flow informational content instead of floating overlay behavior. */
   callout?: WarpAttention["callout"];
-  /**  */
+  /** Enables native popover behavior for the attention element.
+When enabled, the component uses popover semantics and styling suitable for floating surface UI. */
   popover?: WarpAttention["popover"];
-  /**  */
+  /** Renders the component with highlight styling.
+Use highlight mode to visually emphasize important contextual information. */
   highlight?: WarpAttention["highlight"];
-  /**  */
+  /** Shows a close button inside the attention component.
+Adds an internal dismiss action that lets users close the attention panel. */
   "can-close"?: WarpAttention["canClose"];
-  /**  */
+  /** Shows a close button inside the attention component.
+Adds an internal dismiss action that lets users close the attention panel. */
   canClose?: WarpAttention["canClose"];
-  /**  */
+  /** Hides the directional arrow of the attention component.
+Disable the arrow when the visual connection to the trigger should not be shown. */
   "no-arrow"?: WarpAttention["noArrow"];
-  /**  */
+  /** Hides the directional arrow of the attention component.
+Disable the arrow when the visual connection to the trigger should not be shown. */
   noArrow?: WarpAttention["noArrow"];
-  /**  */
+  /** Distance offset between trigger and attention panel.
+Defines the main-axis spacing in pixels from the anchor element. */
   distance?: WarpAttention["distance"];
-  /**  */
+  /** Cross-axis offset for fine-grained positioning.
+Moves the panel along the cross axis in pixels to adjust alignment with the trigger. */
   skidding?: WarpAttention["skidding"];
-  /**  */
+  /** Enables automatic flipping when placement has no space.
+Allows the component to choose an alternative side if the preferred placement would overflow. */
   flip?: WarpAttention["flip"];
-  /**  */
+  /** Allows overflow checks on the cross axis when flipping.
+Use with `flip` to improve collision handling when space is constrained horizontally or vertically. */
   "cross-axis"?: WarpAttention["crossAxis"];
-  /**  */
+  /** Allows overflow checks on the cross axis when flipping.
+Use with `flip` to improve collision handling when space is constrained horizontally or vertically. */
   crossAxis?: WarpAttention["crossAxis"];
-  /**  */
+  /** Ordered list of fallback placements.
+Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit. */
   "fallback-placements"?: WarpAttention["fallbackPlacements"];
-  /**  */
+  /** Ordered list of fallback placements.
+Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit. */
   fallbackPlacements?: WarpAttention["fallbackPlacements"];
   /**  */
   _initialPlacement?: WarpAttention["_initialPlacement"];
@@ -485,39 +526,56 @@ export type WarpAttentionProps = {
 };
 
 export type WarpAttentionSolidJsProps = {
-  /**  */
+  /** Controls whether the attention panel is visible.
+Set to `true` to show the attention content and `false` to hide it. */
   "prop:show"?: WarpAttention["show"];
-  /**  */
+  /** Preferred placement relative to the trigger element.
+Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants. */
   "prop:placement"?: WarpAttention["placement"];
-  /**  */
+  /** Renders the component with tooltip styling and behavior.
+Use for compact, non-modal contextual hints anchored to another element. */
   "prop:tooltip"?: WarpAttention["tooltip"];
-  /**  */
+  /** Renders the component as an inline callout.
+Callout mode is used for always-in-flow informational content instead of floating overlay behavior. */
   "prop:callout"?: WarpAttention["callout"];
-  /**  */
+  /** Enables native popover behavior for the attention element.
+When enabled, the component uses popover semantics and styling suitable for floating surface UI. */
   "prop:popover"?: WarpAttention["popover"];
-  /**  */
+  /** Renders the component with highlight styling.
+Use highlight mode to visually emphasize important contextual information. */
   "prop:highlight"?: WarpAttention["highlight"];
-  /**  */
+  /** Shows a close button inside the attention component.
+Adds an internal dismiss action that lets users close the attention panel. */
   "bool:can-close"?: WarpAttention["canClose"];
-  /**  */
+  /** Shows a close button inside the attention component.
+Adds an internal dismiss action that lets users close the attention panel. */
   "prop:canClose"?: WarpAttention["canClose"];
-  /**  */
+  /** Hides the directional arrow of the attention component.
+Disable the arrow when the visual connection to the trigger should not be shown. */
   "bool:no-arrow"?: WarpAttention["noArrow"];
-  /**  */
+  /** Hides the directional arrow of the attention component.
+Disable the arrow when the visual connection to the trigger should not be shown. */
   "prop:noArrow"?: WarpAttention["noArrow"];
-  /**  */
+  /** Distance offset between trigger and attention panel.
+Defines the main-axis spacing in pixels from the anchor element. */
   "prop:distance"?: WarpAttention["distance"];
-  /**  */
+  /** Cross-axis offset for fine-grained positioning.
+Moves the panel along the cross axis in pixels to adjust alignment with the trigger. */
   "prop:skidding"?: WarpAttention["skidding"];
-  /**  */
+  /** Enables automatic flipping when placement has no space.
+Allows the component to choose an alternative side if the preferred placement would overflow. */
   "prop:flip"?: WarpAttention["flip"];
-  /**  */
+  /** Allows overflow checks on the cross axis when flipping.
+Use with `flip` to improve collision handling when space is constrained horizontally or vertically. */
   "bool:cross-axis"?: WarpAttention["crossAxis"];
-  /**  */
+  /** Allows overflow checks on the cross axis when flipping.
+Use with `flip` to improve collision handling when space is constrained horizontally or vertically. */
   "prop:crossAxis"?: WarpAttention["crossAxis"];
-  /**  */
+  /** Ordered list of fallback placements.
+Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit. */
   "attr:fallback-placements"?: WarpAttention["fallbackPlacements"];
-  /**  */
+  /** Ordered list of fallback placements.
+Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit. */
   "prop:fallbackPlacements"?: WarpAttention["fallbackPlacements"];
   /**  */
   "prop:_initialPlacement"?: WarpAttention["_initialPlacement"];
@@ -531,16 +589,24 @@ export type WarpAttentionSolidJsProps = {
 };
 
 export type WarpBadgeProps = {
-  /**  */
+  /** Controls the badge color treatment.
+If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
+Accepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute. */
   variant?: WarpBadge["variant"];
-  /**  */
+  /** Positions the badge in a corner of a parent element.
+Use 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.
+Use this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`. */
   position?: WarpBadge["position"];
 };
 
 export type WarpBadgeSolidJsProps = {
-  /**  */
+  /** Controls the badge color treatment.
+If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
+Accepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute. */
   "prop:variant"?: WarpBadge["variant"];
-  /**  */
+  /** Positions the badge in a corner of a parent element.
+Use 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.
+Use this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`. */
   "prop:position"?: WarpBadge["position"];
 
   /** Set the innerHTML of the element */
@@ -833,7 +899,9 @@ The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/form
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   dayFormat?: WarpDatepicker["dayFormat"];
-  /**  */
+  /** Lets you control if a date in the calendar should be disabled.
+
+This needs to be set on the element instance in JavaScript, not as an HTML attribute. */
   isDayDisabled?: WarpDatepicker["isDayDisabled"];
   /**  */
   isCalendarOpen?: WarpDatepicker["isCalendarOpen"];
@@ -892,7 +960,9 @@ The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/form
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   "prop:dayFormat"?: WarpDatepicker["dayFormat"];
-  /**  */
+  /** Lets you control if a date in the calendar should be disabled.
+
+This needs to be set on the element instance in JavaScript, not as an HTML attribute. */
   "prop:isDayDisabled"?: WarpDatepicker["isDayDisabled"];
   /**  */
   "prop:isCalendarOpen"?: WarpDatepicker["isCalendarOpen"];
@@ -1361,8 +1431,6 @@ export type WarpSelectProps = {
   name?: WarpSelect["name"];
   /**  */
   value?: WarpSelect["value"];
-  /**  */
-  _options?: WarpSelect["_options"];
 
   /**  */
   onchange?: (e: CustomEvent) => void;
@@ -1402,8 +1470,6 @@ export type WarpSelectSolidJsProps = {
   /**  */
   "prop:value"?: WarpSelect["value"];
   /**  */
-  "prop:_options"?: WarpSelect["_options"];
-  /**  */
   "on:change"?: (e: CustomEvent) => void;
 
   /** Set the innerHTML of the element */
@@ -1433,18 +1499,6 @@ export type WarpSliderThumbProps = {
   tooltipTarget?: WarpSliderThumb["tooltipTarget"];
   /**  */
   textfield?: WarpSliderThumb["textfield"];
-  /**  */
-  disabled?: WarpSliderThumb["disabled"];
-  /**  */
-  invalid?: WarpSliderThumb["invalid"];
-  /**  */
-  openEnded?: WarpSliderThumb["openEnded"];
-  /**  */
-  valueFormatter?: WarpSliderThumb["valueFormatter"];
-  /**  */
-  tooltipFormatter?: WarpSliderThumb["tooltipFormatter"];
-  /**  */
-  labelFormatter?: WarpSliderThumb["labelFormatter"];
 
   /**  */
   onthumbreset?: (e: CustomEvent) => void;
@@ -1474,18 +1528,6 @@ export type WarpSliderThumbSolidJsProps = {
   /**  */
   "prop:textfield"?: WarpSliderThumb["textfield"];
   /**  */
-  "prop:disabled"?: WarpSliderThumb["disabled"];
-  /**  */
-  "prop:invalid"?: WarpSliderThumb["invalid"];
-  /**  */
-  "prop:openEnded"?: WarpSliderThumb["openEnded"];
-  /**  */
-  "prop:valueFormatter"?: WarpSliderThumb["valueFormatter"];
-  /**  */
-  "prop:tooltipFormatter"?: WarpSliderThumb["tooltipFormatter"];
-  /**  */
-  "prop:labelFormatter"?: WarpSliderThumb["labelFormatter"];
-  /**  */
   "on:thumbreset"?: (e: CustomEvent) => void;
   /**  */
   "on:slidervalidity"?: (e: CustomEvent) => void;
@@ -1531,11 +1573,11 @@ If you need to display HTML, use the `label` slot instead (f. ex. `<legend class
   "hidden-textfield"?: WarpSlider["hiddenTextfield"];
   /**  */
   hiddenTextfield?: WarpSlider["hiddenTextfield"];
-  /**  */
+  /** Formatter for the tooltip and input mask values. */
   valueFormatter?: WarpSlider["valueFormatter"];
-  /**  */
+  /** Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. */
   tooltipFormatter?: WarpSlider["tooltipFormatter"];
-  /**  */
+  /** Formatter for the min and max labels below the range. */
   labelFormatter?: WarpSlider["labelFormatter"];
   /**  */
   fieldset?: WarpSlider["fieldset"];
@@ -1584,11 +1626,11 @@ If you need to display HTML, use the `label` slot instead (f. ex. `<legend class
   "bool:hidden-textfield"?: WarpSlider["hiddenTextfield"];
   /**  */
   "prop:hiddenTextfield"?: WarpSlider["hiddenTextfield"];
-  /**  */
+  /** Formatter for the tooltip and input mask values. */
   "prop:valueFormatter"?: WarpSlider["valueFormatter"];
-  /**  */
+  /** Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. */
   "prop:tooltipFormatter"?: WarpSlider["tooltipFormatter"];
-  /**  */
+  /** Formatter for the min and max labels below the range. */
   "prop:labelFormatter"?: WarpSlider["labelFormatter"];
   /**  */
   "prop:fieldset"?: WarpSlider["fieldset"];
@@ -1696,10 +1738,6 @@ export type WarpTabProps = {
   over?: WarpTab["over"];
   /** Override tabIndex setter to set _parentTabIndex (for backwards compatibility). */
   tabIndex?: WarpTab["tabIndex"];
-  /**  */
-  _parentTabIndex?: WarpTab["_parentTabIndex"];
-  /**  */
-  _parentAriaSelected?: WarpTab["_parentAriaSelected"];
 };
 
 export type WarpTabSolidJsProps = {
@@ -1721,10 +1759,6 @@ export type WarpTabSolidJsProps = {
   "prop:over"?: WarpTab["over"];
   /** Override tabIndex setter to set _parentTabIndex (for backwards compatibility). */
   "prop:tabIndex"?: WarpTab["tabIndex"];
-  /**  */
-  "prop:_parentTabIndex"?: WarpTab["_parentTabIndex"];
-  /**  */
-  "prop:_parentAriaSelected"?: WarpTab["_parentAriaSelected"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1736,20 +1770,12 @@ export type WarpTabPanelProps = {
   /** Whether this panel is active (visible).
 Set by parent w-tabs via the _parentActive property. */
   active?: WarpTabPanel["active"];
-  /**  */
-  _parentActive?: WarpTabPanel["_parentActive"];
-  /**  */
-  _parentAriaLabelledBy?: WarpTabPanel["_parentAriaLabelledBy"];
 };
 
 export type WarpTabPanelSolidJsProps = {
   /** Whether this panel is active (visible).
 Set by parent w-tabs via the _parentActive property. */
   "prop:active"?: WarpTabPanel["active"];
-  /**  */
-  "prop:_parentActive"?: WarpTabPanel["_parentActive"];
-  /**  */
-  "prop:_parentAriaLabelledBy"?: WarpTabPanel["_parentAriaLabelledBy"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1778,85 +1804,97 @@ export type WarpTabsSolidJsProps = {
 };
 
 export type WarpTextareaProps = {
-  /**  */
+  /** Keep in mind that using disabled in its current form is an anti-pattern.
+
+There 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.
+
+Please consider more informative alternatives before choosing to use disabled on an element. */
   disabled?: WarpTextarea["disabled"];
-  /**  */
+  /** Mark the form field as invalid.
+
+Make sure to also set a `help-text` to help users fix the validation problem. */
   invalid?: WarpTextarea["invalid"];
-  /**  */
+  /** Either a `label` or an `aria-label` must be provided. */
   label?: WarpTextarea["label"];
-  /**  */
+  /** Use in combination with `invalid` to show as a validation error message,
+or on its own to show a help text. */
   "help-text"?: WarpTextarea["helpText"];
-  /**  */
+  /** Use in combination with `invalid` to show as a validation error message,
+or on its own to show a help text. */
   helpText?: WarpTextarea["helpText"];
-  /**  */
+  /** Sets the maximum number of text rows before the content starts scrolling. */
   "maximum-rows"?: WarpTextarea["maxRows"];
-  /**  */
+  /** Sets the maximum number of text rows before the content starts scrolling. */
   maxRows?: WarpTextarea["maxRows"];
-  /**  */
+  /** Sets the minimum number of text rows the textarea should display */
   "minimum-rows"?: WarpTextarea["minRows"];
-  /**  */
+  /** Sets the minimum number of text rows the textarea should display */
   minRows?: WarpTextarea["minRows"];
-  /**  */
+  /** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form */
   name?: WarpTextarea["name"];
-  /**  */
+  /** Set a text that is shown in the textarea when it doesn't have a value.
+
+Placeholder text should not be used as a substitute for labeling the element with a visible label. */
   placeholder?: WarpTextarea["placeholder"];
-  /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`.  */
+  /** @deprecated Use the native `readonly` attribute instead  */
   "read-only"?: WarpTextarea["readOnly"];
-  /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`.  */
+  /** @deprecated Use the native `readonly` attribute instead  */
   readOnly?: WarpTextarea["readOnly"];
-  /**  */
+  /** Whether the input can be selected but not changed by the user */
   readonly?: WarpTextarea["readonly"];
-  /**  */
+  /** Whether user input is required on the input before form submission */
   required?: WarpTextarea["required"];
-  /**  */
+  /** Lets you set the current value */
   value?: WarpTextarea["value"];
-  /**  */
+  /** Show an icon behind the label indicating the field is optional */
   optional?: WarpTextarea["optional"];
-  /**  */
-  minHeight?: WarpTextarea["minHeight"];
-  /**  */
-  maxHeight?: WarpTextarea["maxHeight"];
 };
 
 export type WarpTextareaSolidJsProps = {
-  /**  */
+  /** Keep in mind that using disabled in its current form is an anti-pattern.
+
+There 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.
+
+Please consider more informative alternatives before choosing to use disabled on an element. */
   "prop:disabled"?: WarpTextarea["disabled"];
-  /**  */
+  /** Mark the form field as invalid.
+
+Make sure to also set a `help-text` to help users fix the validation problem. */
   "prop:invalid"?: WarpTextarea["invalid"];
-  /**  */
+  /** Either a `label` or an `aria-label` must be provided. */
   "prop:label"?: WarpTextarea["label"];
-  /**  */
+  /** Use in combination with `invalid` to show as a validation error message,
+or on its own to show a help text. */
   "attr:help-text"?: WarpTextarea["helpText"];
-  /**  */
+  /** Use in combination with `invalid` to show as a validation error message,
+or on its own to show a help text. */
   "prop:helpText"?: WarpTextarea["helpText"];
-  /**  */
+  /** Sets the maximum number of text rows before the content starts scrolling. */
   "attr:maximum-rows"?: WarpTextarea["maxRows"];
-  /**  */
+  /** Sets the maximum number of text rows before the content starts scrolling. */
   "prop:maxRows"?: WarpTextarea["maxRows"];
-  /**  */
+  /** Sets the minimum number of text rows the textarea should display */
   "attr:minimum-rows"?: WarpTextarea["minRows"];
-  /**  */
+  /** Sets the minimum number of text rows the textarea should display */
   "prop:minRows"?: WarpTextarea["minRows"];
-  /**  */
+  /** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form */
   "prop:name"?: WarpTextarea["name"];
-  /**  */
+  /** Set a text that is shown in the textarea when it doesn't have a value.
+
+Placeholder text should not be used as a substitute for labeling the element with a visible label. */
   "prop:placeholder"?: WarpTextarea["placeholder"];
-  /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`.  */
+  /** @deprecated Use the native `readonly` attribute instead  */
   "bool:read-only"?: WarpTextarea["readOnly"];
-  /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`.  */
+  /** @deprecated Use the native `readonly` attribute instead  */
   "prop:readOnly"?: WarpTextarea["readOnly"];
-  /**  */
+  /** Whether the input can be selected but not changed by the user */
   "prop:readonly"?: WarpTextarea["readonly"];
-  /**  */
+  /** Whether user input is required on the input before form submission */
   "prop:required"?: WarpTextarea["required"];
-  /**  */
+  /** Lets you set the current value */
   "prop:value"?: WarpTextarea["value"];
-  /**  */
+  /** Show an icon behind the label indicating the field is optional */
   "prop:optional"?: WarpTextarea["optional"];
-  /**  */
-  "prop:minHeight"?: WarpTextarea["minHeight"];
-  /**  */
-  "prop:maxHeight"?: WarpTextarea["maxHeight"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1879,37 +1917,54 @@ export type CustomElements = {
   "w-icon": Partial<WIconProps & BaseProps<WIcon> & BaseEvents>;
 
   /**
-   * A single line text input element.
-   *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+   * A single-line input component used for entering and editing textual or numeric data.
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `disabled`: undefined
-   * - `invalid`: undefined
-   * - `id`: undefined
-   * - `label`: undefined
-   * - `help-text`/`helpText`: undefined
-   * - `size`: undefined
-   * - `max`: undefined
-   * - `min`: undefined
+   * - `disabled`: Keep in mind that using disabled in its current form is an anti-pattern.
+   *
+   * There 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.
+   *
+   * Please consider more informative alternatives before choosing to use disabled on an element.
+   * - `invalid`: Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem.
+   * - `label`: Either a `label` or an `aria-label` must be provided.
+   * - `help-text`/`helpText`: Use in combination with `invalid` to show as a validation error message,
+   * or on its own to show a help text.
+   * - `size`: 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.
+   * - `max`: Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).
+   * - `min`: Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).
    * - `min-length`/`minLength`: undefined
+   * - `minlength`: 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.
    * - `max-length`/`maxLength`: undefined
-   * - `pattern`: undefined
-   * - `placeholder`: undefined
+   * - `maxlength`: 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.
+   * - `pattern`: 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)
+   * - `placeholder`: Set a text that is shown in the textfield when it doesn't have a value.
+   *
+   * Placeholder text should not be used as a substitute for labeling the element with a visible label.
    * - `read-only`/`readOnly`: undefined
-   * - `readonly`: undefined
-   * - `required`: undefined
-   * - `type`: undefined
-   * - `value`: undefined
-   * - `name`: undefined
-   * - `step`: undefined
-   * - `autocomplete`: undefined
-   * - `formatter`: undefined (property only)
-   * - `_hasPrefix`: undefined (property only)
-   * - `_hasSuffix`: undefined (property only)
+   * - `readonly`: Whether the input can be selected but not changed by the user.
+   * - `required`: Whether user input is required on the input before form submission.
+   * - `type`: The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
+   * - `value`: Lets you set the current value.
+   * - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.
+   * - `step`: When used with `number` this attribute forces inputs to be a whole number of `step`.
+   *
+   * For example with a `step="5"` only values that divide evenly on 5 are allowed.
+   * Using arrow up and down in the input field increments and decrements by 5.
+   * - `autocomplete`: 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.
+   * - `formatter`: Function to format value when the input field.
+   *
+   * Only active when the input field does not have focus,
+   * similar to the accessible input [masking example from Filament Group](https://filamentgroup.github.io/politespace/demo/demo.html). (property only)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `suffix`: Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).
+   * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon.
    *
    * ## Methods
    *
@@ -2016,25 +2071,42 @@ export type CustomElements = {
   "w-button": Partial<WarpButtonProps & BaseProps<WarpButton> & BaseEvents>;
 
   /**
+   * 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.
+   *
+   * The 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.
    *
+   * Note: 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.
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `show`: undefined
-   * - `placement`: undefined
-   * - `tooltip`: undefined
-   * - `callout`: undefined
-   * - `popover`: undefined
-   * - `highlight`: undefined
-   * - `can-close`/`canClose`: undefined
-   * - `no-arrow`/`noArrow`: undefined
-   * - `distance`: undefined
-   * - `skidding`: undefined
-   * - `flip`: undefined
-   * - `cross-axis`/`crossAxis`: undefined
-   * - `fallback-placements`/`fallbackPlacements`: undefined
+   * - `show`: Controls whether the attention panel is visible.
+   * Set to `true` to show the attention content and `false` to hide it.
+   * - `placement`: Preferred placement relative to the trigger element.
+   * Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.
+   * - `tooltip`: Renders the component with tooltip styling and behavior.
+   * Use for compact, non-modal contextual hints anchored to another element.
+   * - `callout`: Renders the component as an inline callout.
+   * Callout mode is used for always-in-flow informational content instead of floating overlay behavior.
+   * - `popover`: Enables native popover behavior for the attention element.
+   * When enabled, the component uses popover semantics and styling suitable for floating surface UI.
+   * - `highlight`: Renders the component with highlight styling.
+   * Use highlight mode to visually emphasize important contextual information.
+   * - `can-close`/`canClose`: Shows a close button inside the attention component.
+   * Adds an internal dismiss action that lets users close the attention panel.
+   * - `no-arrow`/`noArrow`: Hides the directional arrow of the attention component.
+   * Disable the arrow when the visual connection to the trigger should not be shown.
+   * - `distance`: Distance offset between trigger and attention panel.
+   * Defines the main-axis spacing in pixels from the anchor element.
+   * - `skidding`: Cross-axis offset for fine-grained positioning.
+   * Moves the panel along the cross axis in pixels to adjust alignment with the trigger.
+   * - `flip`: Enables automatic flipping when placement has no space.
+   * Allows the component to choose an alternative side if the preferred placement would overflow.
+   * - `cross-axis`/`crossAxis`: Allows overflow checks on the cross axis when flipping.
+   * Use with `flip` to improve collision handling when space is constrained horizontally or vertically.
+   * - `fallback-placements`/`fallbackPlacements`: Ordered list of fallback placements.
+   * Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.
    * - `_initialPlacement`: undefined (property only)
    * - `_actualDirection`: undefined (property only)
    *
@@ -2056,14 +2128,22 @@ export type CustomElements = {
   /**
    * `w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `variant`: undefined
-   * - `position`: undefined
+   * - `variant`: Controls the badge color treatment.
+   * If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
+   * Accepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
+   * - `position`: Positions the badge in a corner of a parent element.
+   * Use 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.
+   * Use this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The content of the badge, which is typically a short string like "New" or "4".
    */
   "w-badge": Partial<WarpBadgeProps & BaseProps<WarpBadge> & BaseEvents>;
 
@@ -2244,7 +2324,9 @@ export type CustomElements = {
    * - `day-format`/`dayFormat`: Decides the format of the day in the calendar as read to screen readers.
    *
    * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
-   * - `isDayDisabled`: undefined (property only)
+   * - `isDayDisabled`: Lets you control if a date in the calendar should be disabled.
+   *
+   * This needs to be set on the element instance in JavaScript, not as an HTML attribute. (property only)
    * - `isCalendarOpen`: undefined (property only)
    * - `navigationDate`: undefined (property only)
    * - `selectedDate`: undefined (property only) (readonly)
@@ -2552,7 +2634,6 @@ export type CustomElements = {
    * - `readonly`: Renders the field in a readonly state.
    * - `name`: undefined
    * - `value`: undefined
-   * - `_options`: undefined (property only)
    *
    * ## Events
    *
@@ -2592,12 +2673,6 @@ export type CustomElements = {
    * - `textFieldDisplayValue`: Value to display in the textfield (shows boundary when focused on empty value) (property only) (readonly)
    * - `tooltipDisplayValue`: Value to display in the tooltip (property only) (readonly)
    * - `ariaDescriptionText`: undefined (property only) (readonly)
-   * - `disabled`: undefined (property only)
-   * - `invalid`: undefined (property only)
-   * - `openEnded`: undefined (property only)
-   * - `valueFormatter`: undefined (property only)
-   * - `tooltipFormatter`: undefined (property only)
-   * - `labelFormatter`: undefined (property only)
    *
    * ## Events
    *
@@ -2641,9 +2716,9 @@ export type CustomElements = {
    * - `step`: undefined
    * - `suffix`: Suffix used in text input fields and for the min and max values of the slider.
    * - `hidden-textfield`/`hiddenTextfield`: undefined
-   * - `valueFormatter`: undefined (property only)
-   * - `tooltipFormatter`: undefined (property only)
-   * - `labelFormatter`: undefined (property only)
+   * - `valueFormatter`: Formatter for the tooltip and input mask values. (property only)
+   * - `tooltipFormatter`: Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. (property only)
+   * - `labelFormatter`: Formatter for the min and max labels below the range. (property only)
    * - `fieldset`: undefined (property only)
    * - `_invalidMessage`: undefined (property only)
    * - `_hasInternalError`: undefined (property only)
@@ -2750,8 +2825,6 @@ export type CustomElements = {
    * - `over`: undefined
    * - `tabIndex`: Override tabIndex setter to set _parentTabIndex (for backwards compatibility). (property only)
    * - `_computedAriaSelected`: Computed aria-selected: prefers parent-managed, falls back to own property (property only) (readonly)
-   * - `_parentTabIndex`: undefined (property only)
-   * - `_parentAriaSelected`: undefined (property only)
    */
   "w-tab": Partial<WarpTabProps & BaseProps<WarpTab> & BaseEvents>;
 
@@ -2767,8 +2840,6 @@ export type CustomElements = {
    *
    * - `active`: Whether this panel is active (visible).
    * Set by parent w-tabs via the _parentActive property.
-   * - `_parentActive`: undefined (property only)
-   * - `_parentAriaLabelledBy`: undefined (property only)
    */
   "w-tab-panel": Partial<
     WarpTabPanelProps & BaseProps<WarpTabPanel> & BaseEvents
@@ -2796,29 +2867,40 @@ export type CustomElements = {
   "w-tabs": Partial<WarpTabsProps & BaseProps<WarpTabs> & BaseEvents>;
 
   /**
-   * A single line text input element.
+   * A multi-line text input with built-in form validation, auto-resizing, and styling support.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+   * The component automatically handles:
+   *  - Form integration
+   *  - Auto-resizing based on content and row constraints
+   *  - Built-in validation with customizable error messages
+   *  - Accessibility attributes and labeling
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `disabled`: undefined
-   * - `invalid`: undefined
-   * - `label`: undefined
-   * - `help-text`/`helpText`: undefined
-   * - `maximum-rows`/`maxRows`: undefined
-   * - `minimum-rows`/`minRows`: undefined
-   * - `name`: undefined
-   * - `placeholder`: undefined
+   * - `disabled`: Keep in mind that using disabled in its current form is an anti-pattern.
+   *
+   * There 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.
+   *
+   * Please consider more informative alternatives before choosing to use disabled on an element.
+   * - `invalid`: Mark the form field as invalid.
+   *
+   * Make sure to also set a `help-text` to help users fix the validation problem.
+   * - `label`: Either a `label` or an `aria-label` must be provided.
+   * - `help-text`/`helpText`: Use in combination with `invalid` to show as a validation error message,
+   * or on its own to show a help text.
+   * - `maximum-rows`/`maxRows`: Sets the maximum number of text rows before the content starts scrolling.
+   * - `minimum-rows`/`minRows`: Sets the minimum number of text rows the textarea should display
+   * - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form
+   * - `placeholder`: Set a text that is shown in the textarea when it doesn't have a value.
+   *
+   * Placeholder text should not be used as a substitute for labeling the element with a visible label.
    * - `read-only`/`readOnly`: undefined
-   * - `readonly`: undefined
-   * - `required`: undefined
-   * - `value`: undefined
-   * - `optional`: undefined
-   * - `minHeight`: undefined (property only)
-   * - `maxHeight`: undefined (property only)
+   * - `readonly`: Whether the input can be selected but not changed by the user
+   * - `required`: Whether user input is required on the input before form submission
+   * - `value`: Lets you set the current value
+   * - `optional`: Show an icon behind the label indicating the field is optional
    * - `validationMessage`: Returns the validation message if the textarea is invalid, otherwise an empty string (property only) (readonly)
    * - `validity`: Returns the validity state of the textarea (property only) (readonly)
    *
@@ -2854,37 +2936,54 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * A single line text input element.
-   *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+   * A single-line input component used for entering and editing textual or numeric data.
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `disabled`: undefined
-   * - `invalid`: undefined
-   * - `id`: undefined
-   * - `label`: undefined
-   * - `help-text`/`helpText`: undefined
-   * - `size`: undefined
-   * - `max`: undefined
-   * - `min`: undefined
+   * - `disabled`: Keep in mind that using disabled in its current form is an anti-pattern.
+   *
+   * There 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.
+   *
+   * Please consider more informative alternatives before choosing to use disabled on an element.
+   * - `invalid`: Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem.
+   * - `label`: Either a `label` or an `aria-label` must be provided.
+   * - `help-text`/`helpText`: Use in combination with `invalid` to show as a validation error message,
+   * or on its own to show a help text.
+   * - `size`: 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.
+   * - `max`: Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).
+   * - `min`: Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).
    * - `min-length`/`minLength`: undefined
+   * - `minlength`: 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.
    * - `max-length`/`maxLength`: undefined
-   * - `pattern`: undefined
-   * - `placeholder`: undefined
+   * - `maxlength`: 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.
+   * - `pattern`: 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)
+   * - `placeholder`: Set a text that is shown in the textfield when it doesn't have a value.
+   *
+   * Placeholder text should not be used as a substitute for labeling the element with a visible label.
    * - `read-only`/`readOnly`: undefined
-   * - `readonly`: undefined
-   * - `required`: undefined
-   * - `type`: undefined
-   * - `value`: undefined
-   * - `name`: undefined
-   * - `step`: undefined
-   * - `autocomplete`: undefined
-   * - `formatter`: undefined (property only)
-   * - `_hasPrefix`: undefined (property only)
-   * - `_hasSuffix`: undefined (property only)
+   * - `readonly`: Whether the input can be selected but not changed by the user.
+   * - `required`: Whether user input is required on the input before form submission.
+   * - `type`: The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
+   * - `value`: Lets you set the current value.
+   * - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.
+   * - `step`: When used with `number` this attribute forces inputs to be a whole number of `step`.
+   *
+   * For example with a `step="5"` only values that divide evenly on 5 are allowed.
+   * Using arrow up and down in the input field increments and decrements by 5.
+   * - `autocomplete`: 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.
+   * - `formatter`: Function to format value when the input field.
+   *
+   * Only active when the input field does not have focus,
+   * similar to the accessible input [masking example from Filament Group](https://filamentgroup.github.io/politespace/demo/demo.html). (property only)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `suffix`: Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).
+   * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon.
    *
    * ## Methods
    *
@@ -3005,25 +3104,42 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
+   * 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.
    *
+   * The 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.
+   *
+   * Note: 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.
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `show`: undefined
-   * - `placement`: undefined
-   * - `tooltip`: undefined
-   * - `callout`: undefined
-   * - `popover`: undefined
-   * - `highlight`: undefined
-   * - `can-close`/`canClose`: undefined
-   * - `no-arrow`/`noArrow`: undefined
-   * - `distance`: undefined
-   * - `skidding`: undefined
-   * - `flip`: undefined
-   * - `cross-axis`/`crossAxis`: undefined
-   * - `fallback-placements`/`fallbackPlacements`: undefined
+   * - `show`: Controls whether the attention panel is visible.
+   * Set to `true` to show the attention content and `false` to hide it.
+   * - `placement`: Preferred placement relative to the trigger element.
+   * Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.
+   * - `tooltip`: Renders the component with tooltip styling and behavior.
+   * Use for compact, non-modal contextual hints anchored to another element.
+   * - `callout`: Renders the component as an inline callout.
+   * Callout mode is used for always-in-flow informational content instead of floating overlay behavior.
+   * - `popover`: Enables native popover behavior for the attention element.
+   * When enabled, the component uses popover semantics and styling suitable for floating surface UI.
+   * - `highlight`: Renders the component with highlight styling.
+   * Use highlight mode to visually emphasize important contextual information.
+   * - `can-close`/`canClose`: Shows a close button inside the attention component.
+   * Adds an internal dismiss action that lets users close the attention panel.
+   * - `no-arrow`/`noArrow`: Hides the directional arrow of the attention component.
+   * Disable the arrow when the visual connection to the trigger should not be shown.
+   * - `distance`: Distance offset between trigger and attention panel.
+   * Defines the main-axis spacing in pixels from the anchor element.
+   * - `skidding`: Cross-axis offset for fine-grained positioning.
+   * Moves the panel along the cross axis in pixels to adjust alignment with the trigger.
+   * - `flip`: Enables automatic flipping when placement has no space.
+   * Allows the component to choose an alternative side if the preferred placement would overflow.
+   * - `cross-axis`/`crossAxis`: Allows overflow checks on the cross axis when flipping.
+   * Use with `flip` to improve collision handling when space is constrained horizontally or vertically.
+   * - `fallback-placements`/`fallbackPlacements`: Ordered list of fallback placements.
+   * Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.
    * - `_initialPlacement`: undefined (property only)
    * - `_actualDirection`: undefined (property only)
    *
@@ -3048,14 +3164,22 @@ export type CustomElementsSolidJs = {
   /**
    * `w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `variant`: undefined
-   * - `position`: undefined
+   * - `variant`: Controls the badge color treatment.
+   * If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
+   * Accepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
+   * - `position`: Positions the badge in a corner of a parent element.
+   * Use 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.
+   * Use this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The content of the badge, which is typically a short string like "New" or "4".
    */
   "w-badge": Partial<
     WarpBadgeProps & WarpBadgeSolidJsProps & BaseProps<WarpBadge> & BaseEvents
@@ -3253,7 +3377,9 @@ export type CustomElementsSolidJs = {
    * - `day-format`/`dayFormat`: Decides the format of the day in the calendar as read to screen readers.
    *
    * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
-   * - `isDayDisabled`: undefined (property only)
+   * - `isDayDisabled`: Lets you control if a date in the calendar should be disabled.
+   *
+   * This needs to be set on the element instance in JavaScript, not as an HTML attribute. (property only)
    * - `isCalendarOpen`: undefined (property only)
    * - `navigationDate`: undefined (property only)
    * - `selectedDate`: undefined (property only) (readonly)
@@ -3588,7 +3714,6 @@ export type CustomElementsSolidJs = {
    * - `readonly`: Renders the field in a readonly state.
    * - `name`: undefined
    * - `value`: undefined
-   * - `_options`: undefined (property only)
    *
    * ## Events
    *
@@ -3633,12 +3758,6 @@ export type CustomElementsSolidJs = {
    * - `textFieldDisplayValue`: Value to display in the textfield (shows boundary when focused on empty value) (property only) (readonly)
    * - `tooltipDisplayValue`: Value to display in the tooltip (property only) (readonly)
    * - `ariaDescriptionText`: undefined (property only) (readonly)
-   * - `disabled`: undefined (property only)
-   * - `invalid`: undefined (property only)
-   * - `openEnded`: undefined (property only)
-   * - `valueFormatter`: undefined (property only)
-   * - `tooltipFormatter`: undefined (property only)
-   * - `labelFormatter`: undefined (property only)
    *
    * ## Events
    *
@@ -3685,9 +3804,9 @@ export type CustomElementsSolidJs = {
    * - `step`: undefined
    * - `suffix`: Suffix used in text input fields and for the min and max values of the slider.
    * - `hidden-textfield`/`hiddenTextfield`: undefined
-   * - `valueFormatter`: undefined (property only)
-   * - `tooltipFormatter`: undefined (property only)
-   * - `labelFormatter`: undefined (property only)
+   * - `valueFormatter`: Formatter for the tooltip and input mask values. (property only)
+   * - `tooltipFormatter`: Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. (property only)
+   * - `labelFormatter`: Formatter for the min and max labels below the range. (property only)
    * - `fieldset`: undefined (property only)
    * - `_invalidMessage`: undefined (property only)
    * - `_hasInternalError`: undefined (property only)
@@ -3809,8 +3928,6 @@ export type CustomElementsSolidJs = {
    * - `over`: undefined
    * - `tabIndex`: Override tabIndex setter to set _parentTabIndex (for backwards compatibility). (property only)
    * - `_computedAriaSelected`: Computed aria-selected: prefers parent-managed, falls back to own property (property only) (readonly)
-   * - `_parentTabIndex`: undefined (property only)
-   * - `_parentAriaSelected`: undefined (property only)
    */
   "w-tab": Partial<
     WarpTabProps & WarpTabSolidJsProps & BaseProps<WarpTab> & BaseEvents
@@ -3828,8 +3945,6 @@ export type CustomElementsSolidJs = {
    *
    * - `active`: Whether this panel is active (visible).
    * Set by parent w-tabs via the _parentActive property.
-   * - `_parentActive`: undefined (property only)
-   * - `_parentAriaLabelledBy`: undefined (property only)
    */
   "w-tab-panel": Partial<
     WarpTabPanelProps &
@@ -3862,29 +3977,40 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * A single line text input element.
+   * A multi-line text input with built-in form validation, auto-resizing, and styling support.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+   * The component automatically handles:
+   *  - Form integration
+   *  - Auto-resizing based on content and row constraints
+   *  - Built-in validation with customizable error messages
+   *  - Accessibility attributes and labeling
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `disabled`: undefined
-   * - `invalid`: undefined
-   * - `label`: undefined
-   * - `help-text`/`helpText`: undefined
-   * - `maximum-rows`/`maxRows`: undefined
-   * - `minimum-rows`/`minRows`: undefined
-   * - `name`: undefined
-   * - `placeholder`: undefined
+   * - `disabled`: Keep in mind that using disabled in its current form is an anti-pattern.
+   *
+   * There 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.
+   *
+   * Please consider more informative alternatives before choosing to use disabled on an element.
+   * - `invalid`: Mark the form field as invalid.
+   *
+   * Make sure to also set a `help-text` to help users fix the validation problem.
+   * - `label`: Either a `label` or an `aria-label` must be provided.
+   * - `help-text`/`helpText`: Use in combination with `invalid` to show as a validation error message,
+   * or on its own to show a help text.
+   * - `maximum-rows`/`maxRows`: Sets the maximum number of text rows before the content starts scrolling.
+   * - `minimum-rows`/`minRows`: Sets the minimum number of text rows the textarea should display
+   * - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form
+   * - `placeholder`: Set a text that is shown in the textarea when it doesn't have a value.
+   *
+   * Placeholder text should not be used as a substitute for labeling the element with a visible label.
    * - `read-only`/`readOnly`: undefined
-   * - `readonly`: undefined
-   * - `required`: undefined
-   * - `value`: undefined
-   * - `optional`: undefined
-   * - `minHeight`: undefined (property only)
-   * - `maxHeight`: undefined (property only)
+   * - `readonly`: Whether the input can be selected but not changed by the user
+   * - `required`: Whether user input is required on the input before form submission
+   * - `value`: Lets you set the current value
+   * - `optional`: Show an icon behind the label indicating the field is optional
    * - `validationMessage`: Returns the validation message if the textarea is invalid, otherwise an empty string (property only) (readonly)
    * - `validity`: Returns the validity state of the textarea (property only) (readonly)
    *