@warp-ds/elements 2.10.0-next.3 → 2.10.0-next.5

package/dist/index.d.ts

@@ -9,8 +9,11 @@ import type { WarpBadge } from "./packages/badge/badge.ts";
 import type { WarpBox } from "./packages/box/box.ts";
 import type { WarpBreadcrumbs } from "./packages/breadcrumbs/breadcrumbs.ts";
 import type { WarpCard } from "./packages/card/card.ts";
-import type { WCheckbox } from "./packages/checkbox/checkbox.ts";
-import type { WCheckboxGroup } from "./packages/checkbox-group/checkbox-group.ts";
+import type { WarpCheckbox, WCheckbox } from "./packages/checkbox/checkbox.ts";
+import type {
+  WarpCheckboxGroup,
+  WCheckboxGroup,
+} from "./packages/checkbox-group/checkbox-group.ts";
 import type { WarpCombobox } from "./packages/combobox/combobox.ts";
 import type { WarpDatepicker } from "./packages/datepicker/datepicker.ts";
 import type { WarpExpandable } from "./packages/expandable/expandable.ts";
@@ -773,73 +776,73 @@ When set, the card becomes keyboard focusable and Enter or Space triggers a clic
   textContent?: string | number;
 };
 
-export type WCheckboxProps = {
+export type WarpCheckboxProps = {
   /** The name of the checkbox.
 
 When the checkbox is checked and belongs to a form, this name is submitted with the checkbox value. If the checkbox is inside a `w-checkbox-group` with a name, the group name is used when the checkbox does not have its own name. */
-  name?: WCheckbox["name"];
+  name?: WarpCheckbox["name"];
   /** The value submitted when the checkbox is checked.
 
 If no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value. */
-  value?: WCheckbox["value"];
+  value?: WarpCheckbox["value"];
   /** Whether the checkbox is visually indeterminate.
 
 Use this for parent options that represent a mixed set of child selections. Clicking the checkbox clears the indeterminate state and sets the checkbox to checked. */
-  indeterminate?: WCheckbox["indeterminate"];
+  indeterminate?: WarpCheckbox["indeterminate"];
   /** Whether the checkbox is checked.
 
 Checked checkboxes submit their value with form data. The property is reflected to the `checked` attribute. */
-  checked?: WCheckbox["checked"];
+  checked?: WarpCheckbox["checked"];
   /** Whether the checkbox is disabled.
 
 Disabled checkboxes cannot be focused, changed, or submitted with form data. */
-  disabled?: WCheckbox["disabled"];
+  disabled?: WarpCheckbox["disabled"];
   /** Whether the checkbox must be checked before form submission.
 
 A required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`. */
-  required?: WCheckbox["required"];
+  required?: WarpCheckbox["required"];
   /** Whether the checkbox is visually invalid.
 
 Use this to show an externally managed validation error. Required validation also sets the invalid state after the user interacts with the checkbox or tries to submit the form. */
-  invalid?: WCheckbox["invalid"];
+  invalid?: WarpCheckbox["invalid"];
   /**  */
-  input?: WCheckbox["input"];
+  input?: WarpCheckbox["input"];
 
   /**  */
   onchange?: (e: Event) => void;
 };
 
-export type WCheckboxSolidJsProps = {
+export type WarpCheckboxSolidJsProps = {
   /** The name of the checkbox.
 
 When the checkbox is checked and belongs to a form, this name is submitted with the checkbox value. If the checkbox is inside a `w-checkbox-group` with a name, the group name is used when the checkbox does not have its own name. */
-  "prop:name"?: WCheckbox["name"];
+  "prop:name"?: WarpCheckbox["name"];
   /** The value submitted when the checkbox is checked.
 
 If no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value. */
-  "prop:value"?: WCheckbox["value"];
+  "prop:value"?: WarpCheckbox["value"];
   /** Whether the checkbox is visually indeterminate.
 
 Use this for parent options that represent a mixed set of child selections. Clicking the checkbox clears the indeterminate state and sets the checkbox to checked. */
-  "prop:indeterminate"?: WCheckbox["indeterminate"];
+  "prop:indeterminate"?: WarpCheckbox["indeterminate"];
   /** Whether the checkbox is checked.
 
 Checked checkboxes submit their value with form data. The property is reflected to the `checked` attribute. */
-  "prop:checked"?: WCheckbox["checked"];
+  "prop:checked"?: WarpCheckbox["checked"];
   /** Whether the checkbox is disabled.
 
 Disabled checkboxes cannot be focused, changed, or submitted with form data. */
-  "prop:disabled"?: WCheckbox["disabled"];
+  "prop:disabled"?: WarpCheckbox["disabled"];
   /** Whether the checkbox must be checked before form submission.
 
 A required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`. */
-  "prop:required"?: WCheckbox["required"];
+  "prop:required"?: WarpCheckbox["required"];
   /** Whether the checkbox is visually invalid.
 
 Use this to show an externally managed validation error. Required validation also sets the invalid state after the user interacts with the checkbox or tries to submit the form. */
-  "prop:invalid"?: WCheckbox["invalid"];
+  "prop:invalid"?: WarpCheckbox["invalid"];
   /**  */
-  "prop:input"?: WCheckbox["input"];
+  "prop:input"?: WarpCheckbox["input"];
   /**  */
   "on:change"?: (e: Event) => void;
 
@@ -849,66 +852,66 @@ Use this to show an externally managed validation error. Required validation als
   textContent?: string | number;
 };
 
-export type WCheckboxGroupProps = {
+export type WarpCheckboxGroupProps = {
   /** The group label displayed above the checkboxes.
 
 Use this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies. */
-  label?: WCheckboxGroup["label"];
+  label?: WarpCheckboxGroup["label"];
   /** The name applied to child checkboxes when they do not provide one.
 
 Use this when the grouped checkboxes should submit values under the same form field name. Individual checkboxes can still override the group name with their own `name`. */
-  name?: WCheckboxGroup["name"];
+  name?: WarpCheckboxGroup["name"];
   /** Whether to show optional text next to the label.
 
 Use this to indicate that selecting an option from the group is not required. */
-  optional?: WCheckboxGroup["optional"];
+  optional?: WarpCheckboxGroup["optional"];
   /** Help text displayed below the checkbox group.
 
 Use this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message. */
-  "help-text"?: WCheckboxGroup["helpText"];
+  "help-text"?: WarpCheckboxGroup["helpText"];
   /** Help text displayed below the checkbox group.
 
 Use this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message. */
-  helpText?: WCheckboxGroup["helpText"];
+  helpText?: WarpCheckboxGroup["helpText"];
   /** Whether at least one checkbox in the group must be selected.
 
 Required validation is managed by the group. The individual checkboxes provide the submitted form values. */
-  required?: WCheckboxGroup["required"];
+  required?: WarpCheckboxGroup["required"];
   /** Whether the checkbox group is visually invalid.
 
 Use this to show an externally managed validation error for the group. The invalid state is also shared with child checkboxes for consistent styling and accessibility state. */
-  invalid?: WCheckboxGroup["invalid"];
+  invalid?: WarpCheckboxGroup["invalid"];
 };
 
-export type WCheckboxGroupSolidJsProps = {
+export type WarpCheckboxGroupSolidJsProps = {
   /** The group label displayed above the checkboxes.
 
 Use this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies. */
-  "prop:label"?: WCheckboxGroup["label"];
+  "prop:label"?: WarpCheckboxGroup["label"];
   /** The name applied to child checkboxes when they do not provide one.
 
 Use this when the grouped checkboxes should submit values under the same form field name. Individual checkboxes can still override the group name with their own `name`. */
-  "prop:name"?: WCheckboxGroup["name"];
+  "prop:name"?: WarpCheckboxGroup["name"];
   /** Whether to show optional text next to the label.
 
 Use this to indicate that selecting an option from the group is not required. */
-  "prop:optional"?: WCheckboxGroup["optional"];
+  "prop:optional"?: WarpCheckboxGroup["optional"];
   /** Help text displayed below the checkbox group.
 
 Use this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message. */
-  "attr:help-text"?: WCheckboxGroup["helpText"];
+  "attr:help-text"?: WarpCheckboxGroup["helpText"];
   /** Help text displayed below the checkbox group.
 
 Use this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message. */
-  "prop:helpText"?: WCheckboxGroup["helpText"];
+  "prop:helpText"?: WarpCheckboxGroup["helpText"];
   /** Whether at least one checkbox in the group must be selected.
 
 Required validation is managed by the group. The individual checkboxes provide the submitted form values. */
-  "prop:required"?: WCheckboxGroup["required"];
+  "prop:required"?: WarpCheckboxGroup["required"];
   /** Whether the checkbox group is visually invalid.
 
 Use this to show an externally managed validation error for the group. The invalid state is also shared with child checkboxes for consistent styling and accessibility state. */
-  "prop:invalid"?: WCheckboxGroup["invalid"];
+  "prop:invalid"?: WarpCheckboxGroup["invalid"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1088,41 +1091,49 @@ Defaults to `off`. Set this when browser autocomplete should be enabled or scope
 };
 
 export type WarpDatepickerProps = {
-  /**  */
+  /** The label displayed above the date input.
+
+Use this to give the datepicker a visible and accessible name. */
   label?: WarpDatepicker["label"];
-  /** Takes precedence over the `<html>` lang attribute. */
+  /** The locale used for calendar labels and date formatting.
+
+This takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`. */
   lang?: WarpDatepicker["lang"];
-  /**  */
+  /** The name submitted with the date value.
+
+Use this when the datepicker belongs to a form and its value should be included in form data. */
   name?: WarpDatepicker["name"];
-  /**  */
+  /** The selected date value.
+
+Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets. */
   value?: WarpDatepicker["value"];
-  /** Decides the format of the date as shown in the calendar header.
+  /** The date format used in the calendar header.
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   "header-format"?: WarpDatepicker["headerFormat"];
-  /** Decides the format of the date as shown in the calendar header.
+  /** The date format used in the calendar header.
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   headerFormat?: WarpDatepicker["headerFormat"];
-  /** Decides the format of the weekday as shown above the grid of dates in the calendar.
+  /** The weekday format shown above the calendar grid.
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   "weekday-format"?: WarpDatepicker["weekdayFormat"];
-  /** Decides the format of the weekday as shown above the grid of dates in the calendar.
+  /** The weekday format shown above the calendar grid.
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   weekdayFormat?: WarpDatepicker["weekdayFormat"];
-  /** Decides the format of the day in the calendar as read to screen readers.
+  /** The date format used for calendar day accessible names.
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   "day-format"?: WarpDatepicker["dayFormat"];
-  /** Decides the format of the day in the calendar as read to screen readers.
+  /** The date format used for calendar day accessible names.
 
 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.
+  /** Function used to disable dates in the calendar.
 
-This needs to be set on the element instance in JavaScript, not as an HTML attribute. */
+Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar. */
   isDayDisabled?: WarpDatepicker["isDayDisabled"];
   /**  */
   isCalendarOpen?: WarpDatepicker["isCalendarOpen"];
@@ -1149,41 +1160,49 @@ the query will point to an element that doesn't exist anymore. */
 };
 
 export type WarpDatepickerSolidJsProps = {
-  /**  */
+  /** The label displayed above the date input.
+
+Use this to give the datepicker a visible and accessible name. */
   "prop:label"?: WarpDatepicker["label"];
-  /** Takes precedence over the `<html>` lang attribute. */
+  /** The locale used for calendar labels and date formatting.
+
+This takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`. */
   "prop:lang"?: WarpDatepicker["lang"];
-  /**  */
+  /** The name submitted with the date value.
+
+Use this when the datepicker belongs to a form and its value should be included in form data. */
   "prop:name"?: WarpDatepicker["name"];
-  /**  */
+  /** The selected date value.
+
+Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets. */
   "prop:value"?: WarpDatepicker["value"];
-  /** Decides the format of the date as shown in the calendar header.
+  /** The date format used in the calendar header.
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   "attr:header-format"?: WarpDatepicker["headerFormat"];
-  /** Decides the format of the date as shown in the calendar header.
+  /** The date format used in the calendar header.
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   "prop:headerFormat"?: WarpDatepicker["headerFormat"];
-  /** Decides the format of the weekday as shown above the grid of dates in the calendar.
+  /** The weekday format shown above the calendar grid.
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   "attr:weekday-format"?: WarpDatepicker["weekdayFormat"];
-  /** Decides the format of the weekday as shown above the grid of dates in the calendar.
+  /** The weekday format shown above the calendar grid.
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   "prop:weekdayFormat"?: WarpDatepicker["weekdayFormat"];
-  /** Decides the format of the day in the calendar as read to screen readers.
+  /** The date format used for calendar day accessible names.
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   "attr:day-format"?: WarpDatepicker["dayFormat"];
-  /** Decides the format of the day in the calendar as read to screen readers.
+  /** The date format used for calendar day accessible names.
 
 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.
+  /** Function used to disable dates in the calendar.
 
-This needs to be set on the element instance in JavaScript, not as an HTML attribute. */
+Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar. */
   "prop:isDayDisabled"?: WarpDatepicker["isDayDisabled"];
   /**  */
   "prop:isCalendarOpen"?: WarpDatepicker["isCalendarOpen"];
@@ -1215,31 +1234,31 @@ the query will point to an element that doesn't exist anymore. */
 };
 
 export type WarpExpandableProps = {
-  /**  */
+  /** Controls component's expanded state */
   expanded?: WarpExpandable["expanded"];
-  /**  */
+  /** Component title. Used to display the title value which is always present regardless of whether the component is open or closed. */
   title?: WarpExpandable["title"];
-  /**  */
+  /** Will make the expandable a Box */
   box?: WarpExpandable["box"];
-  /**  */
+  /** Will make the expandable full-width on the sm breakpoint size */
   bleed?: WarpExpandable["bleed"];
-  /**  */
+  /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.  */
   "button-class"?: WarpExpandable["buttonClass"];
-  /**  */
+  /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.  */
   buttonClass?: WarpExpandable["buttonClass"];
-  /**  */
+  /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.  */
   "content-class"?: WarpExpandable["contentClass"];
-  /**  */
+  /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.  */
   contentClass?: WarpExpandable["contentClass"];
-  /**  */
+  /** Controls chevron visibility */
   "no-chevron"?: WarpExpandable["noChevron"];
-  /**  */
+  /** Controls chevron visibility */
   noChevron?: WarpExpandable["noChevron"];
-  /**  */
+  /** Will animate the expansion/collapse */
   animated?: WarpExpandable["animated"];
-  /**  */
+  /** Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. */
   "heading-level"?: WarpExpandable["headingLevel"];
-  /**  */
+  /** Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. */
   headingLevel?: WarpExpandable["headingLevel"];
   /**  */
   _hasTitle?: WarpExpandable["_hasTitle"];
@@ -1248,31 +1267,31 @@ export type WarpExpandableProps = {
 };
 
 export type WarpExpandableSolidJsProps = {
-  /**  */
+  /** Controls component's expanded state */
   "prop:expanded"?: WarpExpandable["expanded"];
-  /**  */
+  /** Component title. Used to display the title value which is always present regardless of whether the component is open or closed. */
   "prop:title"?: WarpExpandable["title"];
-  /**  */
+  /** Will make the expandable a Box */
   "prop:box"?: WarpExpandable["box"];
-  /**  */
+  /** Will make the expandable full-width on the sm breakpoint size */
   "prop:bleed"?: WarpExpandable["bleed"];
-  /**  */
+  /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.  */
   "attr:button-class"?: WarpExpandable["buttonClass"];
-  /**  */
+  /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.  */
   "prop:buttonClass"?: WarpExpandable["buttonClass"];
-  /**  */
+  /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.  */
   "attr:content-class"?: WarpExpandable["contentClass"];
-  /**  */
+  /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.  */
   "prop:contentClass"?: WarpExpandable["contentClass"];
-  /**  */
+  /** Controls chevron visibility */
   "bool:no-chevron"?: WarpExpandable["noChevron"];
-  /**  */
+  /** Controls chevron visibility */
   "prop:noChevron"?: WarpExpandable["noChevron"];
-  /**  */
+  /** Will animate the expansion/collapse */
   "prop:animated"?: WarpExpandable["animated"];
-  /**  */
+  /** Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. */
   "attr:heading-level"?: WarpExpandable["headingLevel"];
-  /**  */
+  /** Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. */
   "prop:headingLevel"?: WarpExpandable["headingLevel"];
   /**  */
   "prop:_hasTitle"?: WarpExpandable["_hasTitle"];
@@ -2454,7 +2473,9 @@ export type CustomElements = {
    * - `checkValidity() => boolean`: Checks whether the checkbox passes constraint validation
    * - `reportValidity() => boolean`: Checks validity and shows the browser's validation message if invalid
    */
-  "w-checkbox": Partial<WCheckboxProps & BaseProps<WCheckbox> & BaseEvents>;
+  "w-checkbox": Partial<
+    WarpCheckboxProps & BaseProps<WarpCheckbox> & BaseEvents
+  >;
 
   /**
    *
@@ -2491,7 +2512,7 @@ export type CustomElements = {
    * - `focus(options?: FocusOptions) => void`: Sets focus on the checkbox group.
    */
   "w-checkbox-group": Partial<
-    WCheckboxGroupProps & BaseProps<WCheckboxGroup> & BaseEvents
+    WarpCheckboxGroupProps & BaseProps<WarpCheckboxGroup> & BaseEvents
   >;
 
   /**
@@ -2570,22 +2591,30 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `label`: undefined
-   * - `lang`: Takes precedence over the `<html>` lang attribute.
-   * - `name`: undefined
-   * - `value`: undefined
-   * - `header-format`/`headerFormat`: Decides the format of the date as shown in the calendar header.
+   * - `label`: The label displayed above the date input.
+   *
+   * Use this to give the datepicker a visible and accessible name.
+   * - `lang`: The locale used for calendar labels and date formatting.
+   *
+   * This takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.
+   * - `name`: The name submitted with the date value.
+   *
+   * Use this when the datepicker belongs to a form and its value should be included in form data.
+   * - `value`: The selected date value.
+   *
+   * Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.
+   * - `header-format`/`headerFormat`: The date format used in the calendar header.
    *
    * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
-   * - `weekday-format`/`weekdayFormat`: Decides the format of the weekday as shown above the grid of dates in the calendar.
+   * - `weekday-format`/`weekdayFormat`: The weekday format shown above the calendar grid.
    *
    * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
-   * - `day-format`/`dayFormat`: Decides the format of the day in the calendar as read to screen readers.
+   * - `day-format`/`dayFormat`: The date format used for calendar day accessible names.
    *
    * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
-   * - `isDayDisabled`: Lets you control if a date in the calendar should be disabled.
+   * - `isDayDisabled`: Function used to disable dates in the calendar.
    *
-   * This needs to be set on the element instance in JavaScript, not as an HTML attribute. (property only)
+   * Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar. (property only)
    * - `isCalendarOpen`: undefined (property only)
    * - `navigationDate`: undefined (property only)
    * - `selectedDate`: undefined (property only) (readonly)
@@ -2616,21 +2645,19 @@ export type CustomElements = {
   /**
    * Expandable is a layout component used for creating expandable content areas on a page.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `expanded`: undefined
-   * - `title`: undefined
-   * - `box`: undefined
-   * - `bleed`: undefined
+   * - `expanded`: Controls component's expanded state
+   * - `title`: Component title. Used to display the title value which is always present regardless of whether the component is open or closed.
+   * - `box`: Will make the expandable a Box
+   * - `bleed`: Will make the expandable full-width on the sm breakpoint size
    * - `button-class`/`buttonClass`: undefined
    * - `content-class`/`contentClass`: undefined
-   * - `no-chevron`/`noChevron`: undefined
-   * - `animated`: undefined
-   * - `heading-level`/`headingLevel`: undefined
+   * - `no-chevron`/`noChevron`: Controls chevron visibility
+   * - `animated`: Will animate the expansion/collapse
+   * - `heading-level`/`headingLevel`: Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.
    * - `_hasTitle`: undefined
    * - `_showChevronUp`: undefined
    *
@@ -3503,7 +3530,10 @@ export type CustomElementsSolidJs = {
    * - `reportValidity() => boolean`: Checks validity and shows the browser's validation message if invalid
    */
   "w-checkbox": Partial<
-    WCheckboxProps & WCheckboxSolidJsProps & BaseProps<WCheckbox> & BaseEvents
+    WarpCheckboxProps &
+      WarpCheckboxSolidJsProps &
+      BaseProps<WarpCheckbox> &
+      BaseEvents
   >;
 
   /**
@@ -3541,9 +3571,9 @@ export type CustomElementsSolidJs = {
    * - `focus(options?: FocusOptions) => void`: Sets focus on the checkbox group.
    */
   "w-checkbox-group": Partial<
-    WCheckboxGroupProps &
-      WCheckboxGroupSolidJsProps &
-      BaseProps<WCheckboxGroup> &
+    WarpCheckboxGroupProps &
+      WarpCheckboxGroupSolidJsProps &
+      BaseProps<WarpCheckboxGroup> &
       BaseEvents
   >;
 
@@ -3626,22 +3656,30 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `label`: undefined
-   * - `lang`: Takes precedence over the `<html>` lang attribute.
-   * - `name`: undefined
-   * - `value`: undefined
-   * - `header-format`/`headerFormat`: Decides the format of the date as shown in the calendar header.
+   * - `label`: The label displayed above the date input.
+   *
+   * Use this to give the datepicker a visible and accessible name.
+   * - `lang`: The locale used for calendar labels and date formatting.
+   *
+   * This takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.
+   * - `name`: The name submitted with the date value.
+   *
+   * Use this when the datepicker belongs to a form and its value should be included in form data.
+   * - `value`: The selected date value.
+   *
+   * Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.
+   * - `header-format`/`headerFormat`: The date format used in the calendar header.
    *
    * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
-   * - `weekday-format`/`weekdayFormat`: Decides the format of the weekday as shown above the grid of dates in the calendar.
+   * - `weekday-format`/`weekdayFormat`: The weekday format shown above the calendar grid.
    *
    * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
-   * - `day-format`/`dayFormat`: Decides the format of the day in the calendar as read to screen readers.
+   * - `day-format`/`dayFormat`: The date format used for calendar day accessible names.
    *
    * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
-   * - `isDayDisabled`: Lets you control if a date in the calendar should be disabled.
+   * - `isDayDisabled`: Function used to disable dates in the calendar.
    *
-   * This needs to be set on the element instance in JavaScript, not as an HTML attribute. (property only)
+   * Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar. (property only)
    * - `isCalendarOpen`: undefined (property only)
    * - `navigationDate`: undefined (property only)
    * - `selectedDate`: undefined (property only) (readonly)
@@ -3675,21 +3713,19 @@ export type CustomElementsSolidJs = {
   /**
    * Expandable is a layout component used for creating expandable content areas on a page.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `expanded`: undefined
-   * - `title`: undefined
-   * - `box`: undefined
-   * - `bleed`: undefined
+   * - `expanded`: Controls component's expanded state
+   * - `title`: Component title. Used to display the title value which is always present regardless of whether the component is open or closed.
+   * - `box`: Will make the expandable a Box
+   * - `bleed`: Will make the expandable full-width on the sm breakpoint size
    * - `button-class`/`buttonClass`: undefined
    * - `content-class`/`contentClass`: undefined
-   * - `no-chevron`/`noChevron`: undefined
-   * - `animated`: undefined
-   * - `heading-level`/`headingLevel`: undefined
+   * - `no-chevron`/`noChevron`: Controls chevron visibility
+   * - `animated`: Will animate the expansion/collapse
+   * - `heading-level`/`headingLevel`: Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.
    * - `_hasTitle`: undefined
    * - `_showChevronUp`: undefined
    *

package/dist/packages/affix/affix.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 import './affix.js';
 describe('w-affix React SSR hydration', () => {

package/dist/packages/alert/alert.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 import './alert.js';
 describe('w-alert React SSR hydration', () => {

package/dist/packages/attention/attention.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 // Import the custom element definition
 import './attention.js';