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

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import type { WIcon } from "./packages/icon/icon.ts";
 import type { WarpTextField } from "./packages/textfield/textfield.ts";
+import type { WarpIcon, WIcon } from "./packages/icon/icon.ts";
 import type { WarpAffix } from "./packages/affix/affix.ts";
 import type { WarpAlert } from "./packages/alert/alert.ts";
 import type { WarpLink } from "./packages/link/link.ts";
@@ -8,9 +8,13 @@ import type { WarpAttention } from "./packages/attention/attention.ts";
 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 { WarpBreadcrumbItem } from "./packages/breadcrumb-item/breadcrumb-item.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";
@@ -34,6 +38,8 @@ import type {
 import type { WarpSelect } from "./packages/select/select.ts";
 import type { WarpSliderThumb } from "./packages/slider-thumb/slider-thumb.ts";
 import type { WarpSlider } from "./packages/slider/slider.ts";
+import type { WarpSnackbarItem } from "./packages/snackbar-item/snackbar-item.ts";
+import type { WarpSnackbar } from "./packages/snackbar/snackbar.ts";
 import type { WarpStep } from "./packages/step/step.ts";
 import type { WarpStepIndicator } from "./packages/step-indicator/step-indicator.ts";
 import type { WarpSwitch } from "./packages/switch/switch.ts";
@@ -67,6 +73,15 @@ export type ScopedElements<
   [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
 };
 
+/**
+ * A generic type for strongly typing custom events with their targets
+ * @template T - The type of the event target (extends EventTarget)
+ * @template D - The type of the detail payload for the custom event
+ */
+type TypedEvent<T extends EventTarget, E = Event> = E & {
+  target: T;
+};
+
 type BaseProps<T extends HTMLElement> = {
   /** Content added between the opening and closing tags of the element */
   children?: any;
@@ -90,6 +105,8 @@ type BaseProps<T extends HTMLElement> = {
   key?: string | number;
   /** Specifies the language of the element. */
   lang?: string;
+  /** Defines the element's semantic role for accessibility APIs. */
+  role?: string;
   /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
   part?: string;
   /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
@@ -112,29 +129,112 @@ type BaseProps<T extends HTMLElement> = {
   popovertargetaction?: "show" | "hide" | "toggle";
 };
 
-type BaseEvents = {};
-
-export type WIconProps = {
-  /** Icon filename (without .svg) */
-  name?: WIcon["name"];
-  /** Size: small, medium, large or pixel value (e.g. "32px") */
-  size?: WIcon["size"];
-  /** Locale used in CDN URL */
-  locale?: WIcon["locale"];
-};
-
-export type WIconSolidJsProps = {
-  /** Icon filename (without .svg) */
-  "prop:name"?: WIcon["name"];
-  /** Size: small, medium, large or pixel value (e.g. "32px") */
-  "prop:size"?: WIcon["size"];
-  /** Locale used in CDN URL */
-  "prop:locale"?: WIcon["locale"];
-
-  /** Set the innerHTML of the element */
-  innerHTML?: string;
-  /** Set the textContent of the element */
-  textContent?: string | number;
+type BaseEvents = {
+  // Mouse Events
+
+  /** Triggered when the element is clicked by the user by mouse or keyboard. */
+  onClick?: (event: MouseEvent) => void;
+  /** Fired when the context menu is triggered, often by right-clicking. */
+  onContextMenu?: (event: MouseEvent) => void;
+  /** Fired when the element is double-clicked. */
+  onDoubleClick?: (event: MouseEvent) => void;
+  /** Fired repeatedly as the draggable element is being dragged. */
+  onDrag?: (event: DragEvent) => void;
+  /** Fired when the dragging of a draggable element is finished. */
+  onDragEnd?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection enters a valid drop target. */
+  onDragEnter?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragExit?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragLeave?: (event: DragEvent) => void;
+  /** Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds). */
+  onDragOver?: (event: DragEvent) => void;
+  /** Fired when a draggable element starts being dragged. */
+  onDragStart?: (event: DragEvent) => void;
+  /** Fired when a dragged element is dropped onto a drop target. */
+  onDrop?: (event: DragEvent) => void;
+  /** Fired when a mouse button is pressed down on the element. */
+  onMouseDown?: (event: MouseEvent) => void;
+  /** Fired when the mouse cursor enters the element. */
+  onMouseEnter?: (event: MouseEvent) => void;
+  /** Triggered when the mouse cursor leaves the element. */
+  onMouseLeave?: (event: MouseEvent) => void;
+  /** Fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it. */
+  onMouseMove?: (event: MouseEvent) => void;
+  /** Fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children. */
+  onMouseOut?: (event: MouseEvent) => void;
+  /** Fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements. */
+  onMouseOver?: (event: MouseEvent) => void;
+  /** Fired when a mouse button is released on the element. */
+  onMouseUp?: (event: MouseEvent) => void;
+
+  // Keyboard Events
+
+  /** Fired when a key is pressed down. */
+  onKeyDown?: (event: KeyboardEvent) => void;
+  /** Fired when a key is released.. */
+  onKeyUp?: (event: KeyboardEvent) => void;
+  /** Fired when a key is pressed down. */
+  onKeyPressed?: (event: KeyboardEvent) => void;
+
+  // Focus Events
+
+  /** Fired when the element receives focus, often triggered by tab navigation. */
+  onFocus?: (event: FocusEvent) => void;
+  /** Fired when the element loses focus. */
+  onBlur?: (event: FocusEvent) => void;
+
+  // Form Events
+
+  /** Fired when the value of an input element changes, such as with text inputs or select elements. */
+  onChange?: (event: Event) => void;
+  /** Fires when the value of an <input>, <select>, or <textarea> element has been changed. */
+  onInput?: (event: Event) => void;
+  /** Fired when a form is submitted, usually on pressing Enter in a text input. */
+  onSubmit?: (event: Event) => void;
+  /** Fired when a form is reset. */
+  onReset?: (event: Event) => void;
+
+  // UI Events
+
+  /** Fired when the content of an element is scrolled. */
+  onScroll?: (event: UIEvent) => void;
+
+  // Wheel Events
+
+  /** Fired when the mouse wheel is scrolled while the element is focused. */
+  onWheel?: (event: WheelEvent) => void;
+
+  // Animation Events
+
+  /** Fired when a CSS animation starts. */
+  onAnimationStart?: (event: AnimationEvent) => void;
+  /** Fired when a CSS animation completes. */
+  onAnimationEnd?: (event: AnimationEvent) => void;
+  /** Fired when a CSS animation completes one iteration. */
+  onAnimationIteration?: (event: AnimationEvent) => void;
+
+  // Transition Events
+
+  /** Fired when a CSS transition has completed. */
+  onTransitionEnd?: (event: TransitionEvent) => void;
+
+  // Media Events
+
+  /** Fired when an element (usually an image) finishes loading */
+  onLoad?: (event: Event) => void;
+  /** Fired when an error occurs during the loading of an element, like an image not being found. */
+  onError?: (event: Event) => void;
+
+  // Clipboard Events
+
+  /** Fires when the user initiates a copy action through the browser's user interface. */
+  onCopy?: (event: ClipboardEvent) => void;
+  /** Fired when the user has initiated a "cut" action through the browser's user interface. */
+  onCut?: (event: ClipboardEvent) => void;
+  /** Fired when the user has initiated a "paste" action through the browser's user interface. */
+  onPaste?: (event: ClipboardEvent) => void;
 };
 
 export type WarpTextFieldProps = {
@@ -154,6 +254,8 @@ or on its own to show a help text. */
   /** Use in combination with `invalid` to show as a validation error message,
 or on its own to show a help text. */
   helpText?: WarpTextField["helpText"];
+  /** Whether to show the optional indicator after the label. */
+  optional?: WarpTextField["optional"];
   /** 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). */
@@ -223,6 +325,8 @@ or on its own to show a help text. */
   /** 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"];
+  /** Whether to show the optional indicator after the label. */
+  "prop:optional"?: WarpTextField["optional"];
   /** 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). */
@@ -280,6 +384,33 @@ similar to the accessible input [masking example from Filament Group](https://fi
   textContent?: string | number;
 };
 
+export type WarpIconProps = {
+  /** Icon filename (without .svg) */
+  name?: WarpIcon["name"];
+  /** Size: small, medium, large or pixel value (e.g. "32px"). */
+  size?: WarpIcon["size"];
+  /** Locale used for `<title>` text.
+
+Reads the `lang` attribute from `<html>`, falls back to 'en'. */
+  locale?: WarpIcon["locale"];
+};
+
+export type WarpIconSolidJsProps = {
+  /** Icon filename (without .svg) */
+  "prop:name"?: WarpIcon["name"];
+  /** Size: small, medium, large or pixel value (e.g. "32px"). */
+  "prop:size"?: WarpIcon["size"];
+  /** Locale used for `<title>` text.
+
+Reads the `lang` attribute from `<html>`, falls back to 'en'. */
+  "prop:locale"?: WarpIcon["locale"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
 export type WarpAffixProps = {
   /**  */
   "aria-label"?: WarpAffix["ariaLabel"];
@@ -343,44 +474,52 @@ export type WarpAlertSolidJsProps = {
 };
 
 export type WarpLinkProps = {
-  /**  */
+  /** Focus the link after it is rendered */
   autofocus?: WarpLink["autofocus"];
-  /**  */
+  /** Visual style for the link/button. */
   variant?: WarpLink["variant"];
-  /**  */
+  /** Render a smaller version */
   small?: WarpLink["small"];
-  /**  */
+  /** The URL the link points to */
   href?: WarpLink["href"];
-  /**  */
+  /** Applies disabled styling, but you need to disable clicks on your own.
+
+The component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior. */
   disabled?: WarpLink["disabled"];
-  /**  */
+  /** Where to display the linked URL (e.g. `_blank`) */
   target?: WarpLink["target"];
-  /**  */
+  /** Relationship of the linked URL.
+
+If `target="_blank"` and `rel` is not provided, the component uses `noopener`. */
   rel?: WarpLink["rel"];
-  /**  */
+  /** Makes the link take up the full width of its parent */
   "full-width"?: WarpLink["fullWidth"];
-  /**  */
+  /** Makes the link take up the full width of its parent */
   fullWidth?: WarpLink["fullWidth"];
 };
 
 export type WarpLinkSolidJsProps = {
-  /**  */
+  /** Focus the link after it is rendered */
   "prop:autofocus"?: WarpLink["autofocus"];
-  /**  */
+  /** Visual style for the link/button. */
   "prop:variant"?: WarpLink["variant"];
-  /**  */
+  /** Render a smaller version */
   "prop:small"?: WarpLink["small"];
-  /**  */
+  /** The URL the link points to */
   "prop:href"?: WarpLink["href"];
-  /**  */
+  /** Applies disabled styling, but you need to disable clicks on your own.
+
+The component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior. */
   "prop:disabled"?: WarpLink["disabled"];
-  /**  */
+  /** Where to display the linked URL (e.g. `_blank`) */
   "prop:target"?: WarpLink["target"];
-  /**  */
+  /** Relationship of the linked URL.
+
+If `target="_blank"` and `rel` is not provided, the component uses `noopener`. */
   "prop:rel"?: WarpLink["rel"];
-  /**  */
+  /** Makes the link take up the full width of its parent */
   "bool:full-width"?: WarpLink["fullWidth"];
-  /**  */
+  /** Makes the link take up the full width of its parent */
   "prop:fullWidth"?: WarpLink["fullWidth"];
 
   /** Set the innerHTML of the element */
@@ -722,6 +861,35 @@ Defaults to the localized "You are here" label. Set `aria-label` when the defaul
   textContent?: string | number;
 };
 
+export type WarpBreadcrumbItemProps = {
+  /** Marks this item as the current page.
+Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
+  "current-page"?: WarpBreadcrumbItem["currentPage"];
+  /** Marks this item as the current page.
+Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
+  currentPage?: WarpBreadcrumbItem["currentPage"];
+  /** URL for linked breadcrumb items.
+When omitted, the item renders as non-focusable text. */
+  href?: WarpBreadcrumbItem["href"];
+};
+
+export type WarpBreadcrumbItemSolidJsProps = {
+  /** Marks this item as the current page.
+Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
+  "bool:current-page"?: WarpBreadcrumbItem["currentPage"];
+  /** Marks this item as the current page.
+Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
+  "prop:currentPage"?: WarpBreadcrumbItem["currentPage"];
+  /** URL for linked breadcrumb items.
+When omitted, the item renders as non-focusable text. */
+  "prop:href"?: WarpBreadcrumbItem["href"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
 export type WarpCardProps = {
   /** Whether the card is visually selected.
 
@@ -761,47 +929,78 @@ When set, the card becomes keyboard focusable and Enter or Space triggers a clic
   textContent?: string | number;
 };
 
-export type WCheckboxProps = {
-  /** The name of the checkbox, submitted as a name/value pair with form data. */
-  name?: WCheckbox["name"];
-  /** The value of the checkbox, submitted as a name/value pair with form data. */
-  value?: WCheckbox["value"];
-  /** Draws the checkbox in an indeterminate state. */
-  indeterminate?: WCheckbox["indeterminate"];
-  /** Draws the checkbox in a checked state (reflected to attribute). */
-  checked?: WCheckbox["checked"];
-  /** Disables the checkbox. */
-  disabled?: WCheckbox["disabled"];
-  /** Makes the checkbox a required field. */
-  required?: WCheckbox["required"];
-  /** Draws the checkbox in an invalid state. */
-  invalid?: WCheckbox["invalid"];
-  /**  */
-  input?: WCheckbox["input"];
-
-  /**  */
-  onchange?: (e: Event) => void;
-};
-
-export type WCheckboxSolidJsProps = {
-  /** The name of the checkbox, submitted as a name/value pair with form data. */
-  "prop:name"?: WCheckbox["name"];
-  /** The value of the checkbox, submitted as a name/value pair with form data. */
-  "prop:value"?: WCheckbox["value"];
-  /** Draws the checkbox in an indeterminate state. */
-  "prop:indeterminate"?: WCheckbox["indeterminate"];
-  /** Draws the checkbox in a checked state (reflected to attribute). */
-  "prop:checked"?: WCheckbox["checked"];
-  /** Disables the checkbox. */
-  "prop:disabled"?: WCheckbox["disabled"];
-  /** Makes the checkbox a required field. */
-  "prop:required"?: WCheckbox["required"];
-  /** Draws the checkbox in an invalid state. */
-  "prop:invalid"?: WCheckbox["invalid"];
-  /**  */
-  "prop:input"?: WCheckbox["input"];
-  /**  */
-  "on:change"?: (e: Event) => void;
+/** `WarpCheckbox` component event */
+export type WarpCheckboxElementEvent<E = Event> = TypedEvent<WarpCheckbox, E>;
+
+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?: 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?: 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?: WarpCheckbox["indeterminate"];
+  /** Whether the checkbox is checked.
+
+Checked checkboxes submit their value with form data. The property is reflected to the `checked` attribute. */
+  checked?: WarpCheckbox["checked"];
+  /** Whether the checkbox is disabled.
+
+Disabled checkboxes cannot be focused, changed, or submitted with form data. */
+  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?: 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?: WarpCheckbox["invalid"];
+  /**  */
+  input?: WarpCheckbox["input"];
+
+  /**  */
+  onchange?: (e: WarpCheckboxElementEvent) => void;
+};
+
+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"?: 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"?: 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"?: 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"?: WarpCheckbox["checked"];
+  /** Whether the checkbox is disabled.
+
+Disabled checkboxes cannot be focused, changed, or submitted with form data. */
+  "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"?: 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"?: WarpCheckbox["invalid"];
+  /**  */
+  "prop:input"?: WarpCheckbox["input"];
+  /**  */
+  "on:change"?: (e: WarpCheckboxElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -809,38 +1008,66 @@ export type WCheckboxSolidJsProps = {
   textContent?: string | number;
 };
 
-export type WCheckboxGroupProps = {
-  /** The group label displayed above the checkboxes. */
-  label?: WCheckboxGroup["label"];
-  /** The name applied to child checkboxes when they do not provide one. */
-  name?: WCheckboxGroup["name"];
-  /** Whether to show optional text next to the label. */
-  optional?: WCheckboxGroup["optional"];
-  /**  */
-  "help-text"?: WCheckboxGroup["helpText"];
-  /**  */
-  helpText?: WCheckboxGroup["helpText"];
-  /** Makes the checkbox group required. */
-  required?: WCheckboxGroup["required"];
-  /** Marks the checkbox group as invalid. */
-  invalid?: WCheckboxGroup["invalid"];
+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?: 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?: 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?: 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"?: 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?: 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?: 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?: WarpCheckboxGroup["invalid"];
 };
 
-export type WCheckboxGroupSolidJsProps = {
-  /** The group label displayed above the checkboxes. */
-  "prop:label"?: WCheckboxGroup["label"];
-  /** The name applied to child checkboxes when they do not provide one. */
-  "prop:name"?: WCheckboxGroup["name"];
-  /** Whether to show optional text next to the label. */
-  "prop:optional"?: WCheckboxGroup["optional"];
-  /**  */
-  "attr:help-text"?: WCheckboxGroup["helpText"];
-  /**  */
-  "prop:helpText"?: WCheckboxGroup["helpText"];
-  /** Makes the checkbox group required. */
-  "prop:required"?: WCheckboxGroup["required"];
-  /** Marks the checkbox group as invalid. */
-  "prop:invalid"?: WCheckboxGroup["invalid"];
+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"?: 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"?: 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"?: 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"?: 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"?: 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"?: 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"?: WarpCheckboxGroup["invalid"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -849,88 +1076,168 @@ export type WCheckboxGroupSolidJsProps = {
 };
 
 export type WarpComboboxProps = {
-  /** The available options to select from */
+  /** The available options to select from.
+
+Use this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements. */
   options?: WarpCombobox["options"];
-  /** Label above input */
+  /** The label displayed above the input.
+
+Use this to give the combobox a visible and accessible name. */
   label?: WarpCombobox["label"];
-  /** Input placeholder */
+  /** Placeholder text displayed when the input is empty.
+
+Use this as a short hint for the expected input. Do not use placeholder text as a replacement for a label. */
   placeholder?: WarpCombobox["placeholder"];
-  /** The input value */
+  /** The selected or typed value.
+
+When an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label. */
   value?: WarpCombobox["value"];
-  /** Whether the popover opens when focus is on the text field */
+  /** Whether the option list opens when the input receives focus.
+
+Use this when users should see available options before they start typing. */
   "open-on-focus"?: WarpCombobox["openOnFocus"];
-  /** Whether the popover opens when focus is on the text field */
+  /** Whether the option list opens when the input receives focus.
+
+Use this when users should see available options before they start typing. */
   openOnFocus?: WarpCombobox["openOnFocus"];
-  /** Select active option on blur */
+  /** Whether the active option is selected when the input loses focus.
+
+When enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur. */
   "select-on-blur"?: WarpCombobox["selectOnBlur"];
-  /** Select active option on blur */
+  /** Whether the active option is selected when the input loses focus.
+
+When enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur. */
   selectOnBlur?: WarpCombobox["selectOnBlur"];
-  /** Whether the matching text segments in the options should be highlighted */
+  /** Whether matching text segments in options are highlighted.
+
+Use this to visually emphasize the part of each option that matches the current input value. */
   "match-text-segments"?: WarpCombobox["matchTextSegments"];
-  /** Whether the matching text segments in the options should be highlighted */
+  /** Whether matching text segments in options are highlighted.
+
+Use this to visually emphasize the part of each option that matches the current input value. */
   matchTextSegments?: WarpCombobox["matchTextSegments"];
-  /** Disable client-side static filtering */
+  /** Whether built-in client-side filtering is disabled.
+
+Use this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided. */
   "disable-static-filtering"?: WarpCombobox["disableStaticFiltering"];
-  /** Disable client-side static filtering */
+  /** Whether built-in client-side filtering is disabled.
+
+Use this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided. */
   disableStaticFiltering?: WarpCombobox["disableStaticFiltering"];
-  /** Renders the input field in an invalid state */
+  /** Whether the combobox is visually invalid.
+
+Use this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error. */
   invalid?: WarpCombobox["invalid"];
-  /** The content to display as the help text */
+  /** Help text displayed below the input.
+
+Use this for supporting guidance or validation feedback. */
   "help-text"?: WarpCombobox["helpText"];
-  /** The content to display as the help text */
+  /** Help text displayed below the input.
+
+Use this for supporting guidance or validation feedback. */
   helpText?: WarpCombobox["helpText"];
-  /** Whether the element is disabled */
+  /** Whether the combobox is disabled.
+
+Disabled comboboxes cannot be focused, changed, or submitted with form data. */
   disabled?: WarpCombobox["disabled"];
-  /** Whether the element is required */
+  /** Whether the combobox is required before form submission.
+
+Use this when the user must provide a value before submitting the form. */
   required?: WarpCombobox["required"];
-  /** Whether to show optional text */
+  /** Whether to show optional text next to the label.
+
+Use this to indicate that the combobox is not required. */
   optional?: WarpCombobox["optional"];
-  /** Name attribute for form submission */
+  /** The name submitted with the combobox value.
+
+Use this when the combobox belongs to a form and its value should be included in form data. */
   name?: WarpCombobox["name"];
-  /** Autocomplete attribute for the input field */
+  /** The autocomplete attribute passed to the internal input.
+
+Defaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token. */
   autocomplete?: WarpCombobox["autocomplete"];
 };
 
 export type WarpComboboxSolidJsProps = {
-  /** The available options to select from */
+  /** The available options to select from.
+
+Use this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements. */
   "prop:options"?: WarpCombobox["options"];
-  /** Label above input */
+  /** The label displayed above the input.
+
+Use this to give the combobox a visible and accessible name. */
   "prop:label"?: WarpCombobox["label"];
-  /** Input placeholder */
+  /** Placeholder text displayed when the input is empty.
+
+Use this as a short hint for the expected input. Do not use placeholder text as a replacement for a label. */
   "prop:placeholder"?: WarpCombobox["placeholder"];
-  /** The input value */
+  /** The selected or typed value.
+
+When an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label. */
   "prop:value"?: WarpCombobox["value"];
-  /** Whether the popover opens when focus is on the text field */
+  /** Whether the option list opens when the input receives focus.
+
+Use this when users should see available options before they start typing. */
   "bool:open-on-focus"?: WarpCombobox["openOnFocus"];
-  /** Whether the popover opens when focus is on the text field */
+  /** Whether the option list opens when the input receives focus.
+
+Use this when users should see available options before they start typing. */
   "prop:openOnFocus"?: WarpCombobox["openOnFocus"];
-  /** Select active option on blur */
+  /** Whether the active option is selected when the input loses focus.
+
+When enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur. */
   "bool:select-on-blur"?: WarpCombobox["selectOnBlur"];
-  /** Select active option on blur */
+  /** Whether the active option is selected when the input loses focus.
+
+When enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur. */
   "prop:selectOnBlur"?: WarpCombobox["selectOnBlur"];
-  /** Whether the matching text segments in the options should be highlighted */
+  /** Whether matching text segments in options are highlighted.
+
+Use this to visually emphasize the part of each option that matches the current input value. */
   "bool:match-text-segments"?: WarpCombobox["matchTextSegments"];
-  /** Whether the matching text segments in the options should be highlighted */
+  /** Whether matching text segments in options are highlighted.
+
+Use this to visually emphasize the part of each option that matches the current input value. */
   "prop:matchTextSegments"?: WarpCombobox["matchTextSegments"];
-  /** Disable client-side static filtering */
+  /** Whether built-in client-side filtering is disabled.
+
+Use this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided. */
   "bool:disable-static-filtering"?: WarpCombobox["disableStaticFiltering"];
-  /** Disable client-side static filtering */
+  /** Whether built-in client-side filtering is disabled.
+
+Use this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided. */
   "prop:disableStaticFiltering"?: WarpCombobox["disableStaticFiltering"];
-  /** Renders the input field in an invalid state */
+  /** Whether the combobox is visually invalid.
+
+Use this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error. */
   "prop:invalid"?: WarpCombobox["invalid"];
-  /** The content to display as the help text */
+  /** Help text displayed below the input.
+
+Use this for supporting guidance or validation feedback. */
   "attr:help-text"?: WarpCombobox["helpText"];
-  /** The content to display as the help text */
+  /** Help text displayed below the input.
+
+Use this for supporting guidance or validation feedback. */
   "prop:helpText"?: WarpCombobox["helpText"];
-  /** Whether the element is disabled */
+  /** Whether the combobox is disabled.
+
+Disabled comboboxes cannot be focused, changed, or submitted with form data. */
   "prop:disabled"?: WarpCombobox["disabled"];
-  /** Whether the element is required */
+  /** Whether the combobox is required before form submission.
+
+Use this when the user must provide a value before submitting the form. */
   "prop:required"?: WarpCombobox["required"];
-  /** Whether to show optional text */
+  /** Whether to show optional text next to the label.
+
+Use this to indicate that the combobox is not required. */
   "prop:optional"?: WarpCombobox["optional"];
-  /** Name attribute for form submission */
+  /** The name submitted with the combobox value.
+
+Use this when the combobox belongs to a form and its value should be included in form data. */
   "prop:name"?: WarpCombobox["name"];
-  /** Autocomplete attribute for the input field */
+  /** The autocomplete attribute passed to the internal input.
+
+Defaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token. */
   "prop:autocomplete"?: WarpCombobox["autocomplete"];
 
   /** Set the innerHTML of the element */
@@ -940,41 +1247,49 @@ export type WarpComboboxSolidJsProps = {
 };
 
 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"];
@@ -1001,41 +1316,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"];
@@ -1067,31 +1390,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"];
@@ -1100,31 +1423,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"];
@@ -1137,6 +1460,9 @@ export type WarpExpandableSolidJsProps = {
   textContent?: string | number;
 };
 
+/** `WarpModal` component event */
+export type WarpModalElementEvent<E = Event> = TypedEvent<WarpModal, E>;
+
 export type WarpModalProps = {
   /** Controls if the modal should show or hide.
 
@@ -1152,9 +1478,9 @@ You can also call the `open()` and `close()` methods. */
   ignoreBackdropClicks?: WarpModal["ignoreBackdropClicks"];
 
   /**  */
-  onshown?: (e: CustomEvent) => void;
+  onshown?: (e: WarpModalElementEvent) => void;
   /**  */
-  onhidden?: (e: CustomEvent) => void;
+  onhidden?: (e: WarpModalElementEvent) => void;
 };
 
 export type WarpModalSolidJsProps = {
@@ -1171,9 +1497,9 @@ You can also call the `open()` and `close()` methods. */
   /** Ignores clicks to the backdrop when set */
   "prop:ignoreBackdropClicks"?: WarpModal["ignoreBackdropClicks"];
   /**  */
-  "on:shown"?: (e: CustomEvent) => void;
+  "on:shown"?: (e: WarpModalElementEvent) => void;
   /**  */
-  "on:hidden"?: (e: CustomEvent) => void;
+  "on:hidden"?: (e: WarpModalElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1190,6 +1516,12 @@ export type WarpModalFooterSolidJsProps = {
   textContent?: string | number;
 };
 
+/** `WarpModalHeader` component event */
+export type WarpModalHeaderElementEvent<E = Event> = TypedEvent<
+  WarpModalHeader,
+  E
+>;
+
 export type WarpModalHeaderProps = {
   /** A short but descriptive title for the modal */
   title?: WarpModalHeader["title"];
@@ -1201,7 +1533,7 @@ export type WarpModalHeaderProps = {
   noClose?: WarpModalHeader["noClose"];
 
   /**  */
-  onbackClicked?: (e: CustomEvent) => void;
+  onbackClicked?: (e: WarpModalHeaderElementEvent) => void;
 };
 
 export type WarpModalHeaderSolidJsProps = {
@@ -1214,7 +1546,7 @@ export type WarpModalHeaderSolidJsProps = {
   /** Lets you hide the close button in the header */
   "prop:noClose"?: WarpModalHeader["noClose"];
   /**  */
-  "on:backClicked"?: (e: CustomEvent) => void;
+  "on:backClicked"?: (e: WarpModalHeaderElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1249,6 +1581,12 @@ export type WarpPageIndicatorSolidJsProps = {
   textContent?: string | number;
 };
 
+/** `WarpPagination` component event */
+export type WarpPaginationElementEvent<E = Event> = TypedEvent<
+  WarpPagination,
+  E
+>;
+
 export type WarpPaginationProps = {
   /** The base URL used to construct page links, for example `/search?page=`.
 
@@ -1270,7 +1608,7 @@ The page number is appended to this URL. */
   visiblePages?: WarpPagination["visiblePages"];
 
   /** Triggered when a link in the pagination is clicked. Contains the page number in `string` form. */
-  "onpage-click"?: (e: CustomEvent) => void;
+  "onpage-click"?: (e: WarpPaginationElementEvent) => void;
 };
 
 export type WarpPaginationSolidJsProps = {
@@ -1293,7 +1631,7 @@ The page number is appended to this URL. */
   /** The maximum number of page numbers visible. */
   "prop:visiblePages"?: WarpPagination["visiblePages"];
   /** Triggered when a link in the pagination is clicked. Contains the page number in `string` form. */
-  "on:page-click"?: (e: CustomEvent) => void;
+  "on:page-click"?: (e: WarpPaginationElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1301,6 +1639,9 @@ The page number is appended to this URL. */
   textContent?: string | number;
 };
 
+/** `WarpPill` component event */
+export type WarpPillElementEvent<E = Event> = TypedEvent<WarpPill, E>;
+
 export type WarpPillProps = {
   /** Whether the pill should be removable via a close button. */
   "can-close"?: WarpPill["canClose"];
@@ -1326,9 +1667,9 @@ export type WarpPillProps = {
   closeAriaLabel?: WarpPill["closeAriaLabel"];
 
   /** Fires when the pill itself is clicked. */
-  "onw-pill-click"?: (e: CustomEvent) => void;
+  "onw-pill-click"?: (e: WarpPillElementEvent) => void;
   /** Fires when the pill's close button is clicked. */
-  "onw-pill-close"?: (e: CustomEvent) => void;
+  "onw-pill-close"?: (e: WarpPillElementEvent) => void;
 };
 
 export type WarpPillSolidJsProps = {
@@ -1355,9 +1696,9 @@ export type WarpPillSolidJsProps = {
   /** Label read by screen readers when targeting the close button. */
   "prop:closeAriaLabel"?: WarpPill["closeAriaLabel"];
   /** Fires when the pill itself is clicked. */
-  "on:w-pill-click"?: (e: CustomEvent) => void;
+  "on:w-pill-click"?: (e: WarpPillElementEvent) => void;
   /** Fires when the pill's close button is clicked. */
-  "on:w-pill-close"?: (e: CustomEvent) => void;
+  "on:w-pill-close"?: (e: WarpPillElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1451,6 +1792,9 @@ If you set `required` and `invalid` the group gets a default error message, but
   textContent?: string | number;
 };
 
+/** `WarpSelect` component event */
+export type WarpSelectElementEvent<E = Event> = TypedEvent<WarpSelect, E>;
+
 export type WarpSelectProps = {
   /** @deprecated Use the native `autofocus` attribute instead. - Whether the element should receive focus on render. */
   "auto-focus"?: WarpSelect["autoFocus"];
@@ -1492,7 +1836,7 @@ Paired with `help-text` to provide feedback about the error. */
   value?: WarpSelect["value"];
 
   /**  */
-  onchange?: (e: CustomEvent) => void;
+  onchange?: (e: WarpSelectElementEvent) => void;
 };
 
 export type WarpSelectSolidJsProps = {
@@ -1535,7 +1879,7 @@ Paired with `help-text` to provide feedback about the error. */
   /** Lets you set the current value. */
   "prop:value"?: WarpSelect["value"];
   /**  */
-  "on:change"?: (e: CustomEvent) => void;
+  "on:change"?: (e: WarpSelectElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1543,6 +1887,12 @@ Paired with `help-text` to provide feedback about the error. */
   textContent?: string | number;
 };
 
+/** `WarpSliderThumb` component event */
+export type WarpSliderThumbElementEvent<E = Event> = TypedEvent<
+  WarpSliderThumb,
+  E
+>;
+
 export type WarpSliderThumbProps = {
   /** Label for the range input. */
   "aria-label"?: WarpSliderThumb["ariaLabel"];
@@ -1560,9 +1910,9 @@ export type WarpSliderThumbProps = {
   placeholder?: WarpSliderThumb["placeholder"];
 
   /** Internal event used by (and stopped by) `w-slider`. */
-  onthumbreset?: (e: CustomEvent) => void;
+  onthumbreset?: (e: WarpSliderThumbElementEvent) => void;
   /** Internal event used by (and stopped by) `w-slider`. */
-  onslidervalidity?: (e: CustomEvent) => void;
+  onslidervalidity?: (e: WarpSliderThumbElementEvent) => void;
 };
 
 export type WarpSliderThumbSolidJsProps = {
@@ -1581,9 +1931,9 @@ export type WarpSliderThumbSolidJsProps = {
   /** Placeholder in empty text fields */
   "prop:placeholder"?: WarpSliderThumb["placeholder"];
   /** Internal event used by (and stopped by) `w-slider`. */
-  "on:thumbreset"?: (e: CustomEvent) => void;
+  "on:thumbreset"?: (e: WarpSliderThumbElementEvent) => void;
   /** Internal event used by (and stopped by) `w-slider`. */
-  "on:slidervalidity"?: (e: CustomEvent) => void;
+  "on:slidervalidity"?: (e: WarpSliderThumbElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1612,6 +1962,8 @@ If you need to display HTML, use the `label` slot instead (f. ex. `<legend class
   invalid?: WarpSlider["invalid"];
   /** Ensures a child slider thumb has a value before allowing the containing form to submit */
   required?: WarpSlider["required"];
+  /** Whether to show the optional indicator after the label. */
+  optional?: WarpSlider["optional"];
   /** The minimum allowed value in the range inputs */
   min?: WarpSlider["min"];
   /** The maximum allowed value in the range inputs */
@@ -1657,6 +2009,8 @@ If you need to display HTML, use the `label` slot instead (f. ex. `<legend class
   "prop:invalid"?: WarpSlider["invalid"];
   /** Ensures a child slider thumb has a value before allowing the containing form to submit */
   "prop:required"?: WarpSlider["required"];
+  /** Whether to show the optional indicator after the label. */
+  "prop:optional"?: WarpSlider["optional"];
   /** The minimum allowed value in the range inputs */
   "prop:min"?: WarpSlider["min"];
   /** The maximum allowed value in the range inputs */
@@ -1686,6 +2040,38 @@ Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the
   textContent?: string | number;
 };
 
+export type WarpSnackbarItemProps = {
+  /** The placement of the action and close buttons. */
+  "action-placement"?: WarpSnackbarItem["actionPlacement"];
+  /** The placement of the action and close buttons. */
+  actionPlacement?: WarpSnackbarItem["actionPlacement"];
+  /** How long the message should stay in the document before removing itself. */
+  duration?: WarpSnackbarItem["duration"];
+};
+
+export type WarpSnackbarItemSolidJsProps = {
+  /** The placement of the action and close buttons. */
+  "attr:action-placement"?: WarpSnackbarItem["actionPlacement"];
+  /** The placement of the action and close buttons. */
+  "prop:actionPlacement"?: WarpSnackbarItem["actionPlacement"];
+  /** How long the message should stay in the document before removing itself. */
+  "prop:duration"?: WarpSnackbarItem["duration"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
+export type WarpSnackbarProps = {};
+
+export type WarpSnackbarSolidJsProps = {
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
 export type WarpStepProps = {
   /** Whether this step is active.
 
@@ -1732,6 +2118,12 @@ export type WarpStepIndicatorSolidJsProps = {
   textContent?: string | number;
 };
 
+/** `WarpSwitch` component event */
+export type WarpSwitchElementEvent<E = Event> = TypedEvent<WarpSwitch, E>;
+/** `change` event type */
+export type WarpSwitchChangeElementEvent =
+  WarpSwitchElementEvent<WarpSwitchChangeEvent>;
+
 export type WarpSwitchProps = {
   /** Name used when submitting an HTML form. */
   name?: WarpSwitch["name"];
@@ -1745,7 +2137,7 @@ The component reports `null` as the value in the `change` event when `value` is
   disabled?: WarpSwitch["disabled"];
 
   /** Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`. */
-  onchange?: (e: WarpSwitchChangeEvent) => void;
+  onchange?: (e: WarpSwitchChangeElementEvent) => void;
 };
 
 export type WarpSwitchSolidJsProps = {
@@ -1760,7 +2152,7 @@ The component reports `null` as the value in the `change` event when `value` is
   /** Whether the switch is disabled. */
   "prop:disabled"?: WarpSwitch["disabled"];
   /** Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`. */
-  "on:change"?: (e: WarpSwitchChangeEvent) => void;
+  "on:change"?: (e: WarpSwitchChangeElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1802,19 +2194,25 @@ export type WarpTabPanelSolidJsProps = {
   textContent?: string | number;
 };
 
+/** `WarpTabs` component event */
+export type WarpTabsElementEvent<E = Event> = TypedEvent<WarpTabs, E>;
+/** `change` event type */
+export type WarpTabsChangeElementEvent =
+  WarpTabsElementEvent<WarpTabsChangeEvent>;
+
 export type WarpTabsProps = {
   /** The `id` of the panel that should be active. */
   active?: WarpTabs["active"];
 
   /** Includes `details.panelId` with the now active tab's ID */
-  onchange?: (e: WarpTabsChangeEvent) => void;
+  onchange?: (e: WarpTabsChangeElementEvent) => void;
 };
 
 export type WarpTabsSolidJsProps = {
   /** The `id` of the panel that should be active. */
   "prop:active"?: WarpTabs["active"];
   /** Includes `details.panelId` with the now active tab's ID */
-  "on:change"?: (e: WarpTabsChangeEvent) => void;
+  "on:change"?: (e: WarpTabsChangeElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1922,19 +2320,6 @@ Placeholder text should not be used as a substitute for labeling the element wit
 };
 
 export type CustomElements = {
-  /**
-   *
-   *
-   * ## Attributes & Properties
-   *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
-   *
-   * - `name`: Icon filename (without .svg)
-   * - `size`: Size: small, medium, large or pixel value (e.g. "32px")
-   * - `locale`: Locale used in CDN URL
-   */
-  "w-icon": Partial<WIconProps & BaseProps<WIcon> & BaseEvents>;
-
   /**
    * A single-line input component used for entering and editing textual or numeric data.
    *
@@ -1951,6 +2336,7 @@ export type CustomElements = {
    * - `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.
+   * - `optional`: Whether to show the optional indicator after the label.
    * - `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).
@@ -1983,7 +2369,7 @@ export type CustomElements = {
    * 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.
+   * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support.
    *
    * ## Methods
    *
@@ -1998,9 +2384,34 @@ export type CustomElements = {
     WarpTextFieldProps & BaseProps<WarpTextField> & BaseEvents
   >;
 
+  /**
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `name`: Icon filename (without .svg)
+   * - `size`: Size: small, medium, large or pixel value (e.g. "32px").
+   * - `locale`: Locale used for `<title>` text.
+   *
+   * Reads the `lang` attribute from `<html>`, falls back to 'en'.
+   */
+  "w-icon": Partial<WarpIconProps & BaseProps<WarpIcon> & BaseEvents>;
+
   /**
    * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
    *
+   * ## Accessibility Note
+   * Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)
+   * cannot reference elements across shadow boundaries. This means:
+   * - Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA
+   * - Interactive affixes (buttons) must have their own `aria-label` (already implemented)
+   * - Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work
+   *
+   * For non-interactive labels (e.g., currency symbols), consider including the information in the
+   * main label or placeholder instead of relying on ARIA to announce affix content.
+   *
    * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
    *
    * ## Attributes & Properties
@@ -2044,14 +2455,18 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `autofocus`: undefined
-   * - `variant`: undefined
-   * - `small`: undefined
-   * - `href`: undefined
-   * - `disabled`: undefined
-   * - `target`: undefined
-   * - `rel`: undefined
-   * - `full-width`/`fullWidth`: undefined
+   * - `autofocus`: Focus the link after it is rendered
+   * - `variant`: Visual style for the link/button.
+   * - `small`: Render a smaller version
+   * - `href`: The URL the link points to
+   * - `disabled`: Applies disabled styling, but you need to disable clicks on your own.
+   *
+   * The component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.
+   * - `target`: Where to display the linked URL (e.g. `_blank`)
+   * - `rel`: Relationship of the linked URL.
+   *
+   * If `target="_blank"` and `rel` is not provided, the component uses `noopener`.
+   * - `full-width`/`fullWidth`: Makes the link take up the full width of its parent
    */
   "w-link": Partial<WarpLinkProps & BaseProps<WarpLink> & BaseEvents>;
 
@@ -2222,6 +2637,31 @@ export type CustomElements = {
     WarpBreadcrumbsProps & BaseProps<WarpBreadcrumbs> & BaseEvents
   >;
 
+  /**
+   * Represents one item in a `w-breadcrumbs` trail.
+   * Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `current-page`/`currentPage`: Marks this item as the current page.
+   * Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator.
+   * - `href`: URL for linked breadcrumb items.
+   * When omitted, the item renders as non-focusable text.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The breadcrumb label content.
+   */
+  "w-breadcrumb-item": Partial<
+    WarpBreadcrumbItemProps & BaseProps<WarpBreadcrumbItem> & BaseEvents
+  >;
+
   /**
    * Card is a layout component used for separating content areas on a page.
    *
@@ -2257,15 +2697,29 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `name`: The name of the checkbox, submitted as a name/value pair with form data.
-   * - `value`: The value of the checkbox, submitted as a name/value pair with form data.
-   * - `indeterminate`: Draws the checkbox in an indeterminate state.
-   * - `checked`: Draws the checkbox in a checked state (reflected to attribute).
-   * - `disabled`: Disables the checkbox.
-   * - `required`: Makes the checkbox a required field.
-   * - `invalid`: Draws the checkbox in an invalid state.
-   * - `input`: undefined (property only)
-   * - `_computedInvalid`: Computed invalid state: combines own invalid with group invalid (property only) (readonly)
+   * - `name`: 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.
+   * - `value`: 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.
+   * - `indeterminate`: 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.
+   * - `checked`: Whether the checkbox is checked.
+   *
+   * Checked checkboxes submit their value with form data. The property is reflected to the `checked` attribute.
+   * - `disabled`: Whether the checkbox is disabled.
+   *
+   * Disabled checkboxes cannot be focused, changed, or submitted with form data.
+   * - `required`: 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`.
+   * - `invalid`: 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.
+   * - `input`: undefined (property only)
+   * - `_computedInvalid`: Computed invalid state: combines own invalid with group invalid (property only) (readonly)
    * - `validationMessage`: Returns the validation message if the checkbox is invalid, otherwise an empty string (property only) (readonly)
    * - `validity`: Returns the validity state of the checkbox (property only) (readonly)
    *
@@ -2286,21 +2740,46 @@ 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
+  >;
 
   /**
+   * Checkboxes allow users to select multiple options from a list of choices.
+   *
+   * Use with `w-checkbox`.
+   *
+   * ## Architecture Note
+   * This component uses a <div> wrapper instead of the more semantic <fieldset> element.
+   * Note that w-radio-group uses <fieldset>, which provides better accessibility and follows
+   * HTML best practices. This inconsistency exists for historical reasons and may be addressed
+   * in a future major version to align both on the more semantic approach.
    *
+   * TODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing
+   * backwards compatibility implications (CSS selectors, etc.).
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `label`: 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.
    * - `name`: 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`.
    * - `optional`: Whether to show optional text next to the label.
-   * - `help-text`/`helpText`: undefined
-   * - `required`: Makes the checkbox group required.
-   * - `invalid`: Marks the checkbox group as invalid.
+   *
+   * Use this to indicate that selecting an option from the group is not required.
+   * - `help-text`/`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.
+   * - `required`: 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.
+   * - `invalid`: 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.
    *
    * ## Methods
    *
@@ -2311,7 +2790,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
   >;
 
   /**
@@ -2323,21 +2802,51 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `options`: The available options to select from
-   * - `label`: Label above input
-   * - `placeholder`: Input placeholder
-   * - `value`: The input value
-   * - `open-on-focus`/`openOnFocus`: Whether the popover opens when focus is on the text field
-   * - `select-on-blur`/`selectOnBlur`: Select active option on blur
-   * - `match-text-segments`/`matchTextSegments`: Whether the matching text segments in the options should be highlighted
-   * - `disable-static-filtering`/`disableStaticFiltering`: Disable client-side static filtering
-   * - `invalid`: Renders the input field in an invalid state
-   * - `help-text`/`helpText`: The content to display as the help text
-   * - `disabled`: Whether the element is disabled
-   * - `required`: Whether the element is required
-   * - `optional`: Whether to show optional text
-   * - `name`: Name attribute for form submission
-   * - `autocomplete`: Autocomplete attribute for the input field
+   * - `options`: The available options to select from.
+   *
+   * Use this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements.
+   * - `label`: The label displayed above the input.
+   *
+   * Use this to give the combobox a visible and accessible name.
+   * - `placeholder`: Placeholder text displayed when the input is empty.
+   *
+   * Use this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.
+   * - `value`: The selected or typed value.
+   *
+   * When an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.
+   * - `open-on-focus`/`openOnFocus`: Whether the option list opens when the input receives focus.
+   *
+   * Use this when users should see available options before they start typing.
+   * - `select-on-blur`/`selectOnBlur`: Whether the active option is selected when the input loses focus.
+   *
+   * When enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur.
+   * - `match-text-segments`/`matchTextSegments`: Whether matching text segments in options are highlighted.
+   *
+   * Use this to visually emphasize the part of each option that matches the current input value.
+   * - `disable-static-filtering`/`disableStaticFiltering`: Whether built-in client-side filtering is disabled.
+   *
+   * Use this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided.
+   * - `invalid`: Whether the combobox is visually invalid.
+   *
+   * Use this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error.
+   * - `help-text`/`helpText`: Help text displayed below the input.
+   *
+   * Use this for supporting guidance or validation feedback.
+   * - `disabled`: Whether the combobox is disabled.
+   *
+   * Disabled comboboxes cannot be focused, changed, or submitted with form data.
+   * - `required`: Whether the combobox is required before form submission.
+   *
+   * Use this when the user must provide a value before submitting the form.
+   * - `optional`: Whether to show optional text next to the label.
+   *
+   * Use this to indicate that the combobox is not required.
+   * - `name`: The name submitted with the combobox value.
+   *
+   * Use this when the combobox belongs to a form and its value should be included in form data.
+   * - `autocomplete`: The autocomplete attribute passed to the internal input.
+   *
+   * Defaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.
    *
    * ## Methods
    *
@@ -2360,22 +2869,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)
@@ -2406,21 +2923,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
    *
@@ -2608,7 +3123,7 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `label`: Alternative to the `label` attribute should you need custom HTML.
-   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
+   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.).
    */
   "w-radio-group": Partial<
     WarpRadioGroupProps & BaseProps<WarpRadioGroup> & BaseEvents
@@ -2694,6 +3209,7 @@ export type CustomElements = {
    * - `help-text`/`helpText`: Additional description to show below the fieldset
    * - `invalid`: Sets the form fields and fieldset in an invalid state
    * - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit
+   * - `optional`: Whether to show the optional indicator after the label.
    * - `min`: The minimum allowed value in the range inputs
    * - `max`: The maximum allowed value in the range inputs
    * - `markers`: Pass a value similar to step to create visual markers at that interval
@@ -2705,6 +3221,7 @@ export type CustomElements = {
    *
    * 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)
+   * - `_label`: undefined (property only) (readonly)
    *
    * ## Slots
    *
@@ -2718,6 +3235,112 @@ export type CustomElements = {
    */
   "w-slider": Partial<WarpSliderProps & BaseProps<WarpSlider> & BaseEvents>;
 
+  /**
+   * An item to show in a `w-snackbar`.
+   *
+   * See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `action-placement`/`actionPlacement`: The placement of the action and close buttons.
+   * - `duration`: How long the message should stay in the document before removing itself.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `default`: the snackbar message.
+   * - `icon`: icon preceeding the message.
+   * - `action`: action following the message.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `close() => void`: Remove the snackbar item from the document.
+   *
+   * Moves focus to the last focused element outside of the snackbar item, if available.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-snackbar-item-radius`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-max-width`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-min-width`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-padding`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-bg`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-bg-active`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-bg-hover`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-color`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-color-active`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-color-hover`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-box-shadow`: undefined (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `item`: the container wrapping the message, icon and actions.
+   * - `icon`: the icon for the variant.
+   * - `message`: the default slot, body of the snackbar item.
+   * - `action`: close and action button.
+   */
+  "w-snackbar-item": Partial<
+    WarpSnackbarItemProps & BaseProps<WarpSnackbarItem> & BaseEvents
+  >;
+
+  /**
+   * A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.
+   *
+   * Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `default`: `w-snackbar-item` gets placed inside the default slot by the `create` function.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `create(message: string, options: CreateSnackbarOptions = {}) => void`: Creates a snackbar item and immediately adds it to the snackbar.
+   *
+   * By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
+   *
+   * If you include an `action` in the options the default `duration` is
+   * set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
+   *
+   * A `duration` of 10 seconds or longer forces the close button to be visible.
+   *
+   * The default `variant` is `neutral` which does not have an icon.
+   *
+   * Set `duration` to `SnackbarDuration.Infinite` if you want a persistent message.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-snackbar-container-gap`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-bottom`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-left`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-right`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-top`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-z-index`: undefined (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `container`: the live region that positions messages on the screen.
+   */
+  "w-snackbar": Partial<
+    WarpSnackbarProps & BaseProps<WarpSnackbar> & BaseEvents
+  >;
+
   /**
    * Individual step component that shows a single step in a process
    *
@@ -2879,22 +3502,113 @@ export type CustomElements = {
   >;
 };
 
-export type CustomElementsSolidJs = {
-  /**
-   *
-   *
-   * ## Attributes & Properties
-   *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
-   *
-   * - `name`: Icon filename (without .svg)
-   * - `size`: Size: small, medium, large or pixel value (e.g. "32px")
-   * - `locale`: Locale used in CDN URL
-   */
-  "w-icon": Partial<
-    WIconProps & WIconSolidJsProps & BaseProps<WIcon> & BaseEvents
+type ReactElementProps<T extends HTMLElement> = import("react").DOMAttributes<T> &
+  import("react").AriaAttributes &
+  import("react").RefAttributes<T> &
+  Pick<
+    import("react").HTMLAttributes<T>,
+    | "className"
+    | "style"
+    | "suppressContentEditableWarning"
+    | "suppressHydrationWarning"
   >;
 
+// Merge order matters: component props must win over React/global/base props
+// when names collide, e.g. w-attention's boolean popover prop.
+type ReactCustomElementProps<T extends HTMLElement, Props> = Omit<
+  BaseProps<T> & BaseEvents,
+  keyof ReactElementProps<T> | keyof Props
+> &
+  Omit<ReactElementProps<T>, keyof Props> &
+  Props;
+
+type CustomElementInstances = {
+  "w-textfield": WarpTextField;
+  "w-icon": WarpIcon;
+  "w-affix": WarpAffix;
+  "w-alert": WarpAlert;
+  "w-link": WarpLink;
+  "w-button": WarpButton;
+  "w-attention": WarpAttention;
+  "w-badge": WarpBadge;
+  "w-box": WarpBox;
+  "w-breadcrumbs": WarpBreadcrumbs;
+  "w-breadcrumb-item": WarpBreadcrumbItem;
+  "w-card": WarpCard;
+  "w-checkbox": WarpCheckbox;
+  "w-checkbox-group": WarpCheckboxGroup;
+  "w-combobox": WarpCombobox;
+  "w-datepicker": WarpDatepicker;
+  "w-expandable": WarpExpandable;
+  "w-modal": WarpModal;
+  "w-modal-footer": WarpModalFooter;
+  "w-modal-header": WarpModalHeader;
+  "w-page-indicator": WarpPageIndicator;
+  "w-pagination": WarpPagination;
+  "w-pill": WarpPill;
+  "w-radio": WarpRadio;
+  "w-radio-group": WarpRadioGroup;
+  "w-select": WarpSelect;
+  "w-slider-thumb": WarpSliderThumb;
+  "w-slider": WarpSlider;
+  "w-snackbar-item": WarpSnackbarItem;
+  "w-snackbar": WarpSnackbar;
+  "w-step": WarpStep;
+  "w-step-indicator": WarpStepIndicator;
+  "w-switch": WarpSwitch;
+  "w-tab": WarpTab;
+  "w-tab-panel": WarpTabPanel;
+  "w-tabs": WarpTabs;
+  "w-textarea": WarpTextarea;
+};
+
+type CustomElementComponentProps = {
+  "w-textfield": WarpTextFieldProps;
+  "w-icon": WarpIconProps;
+  "w-affix": WarpAffixProps;
+  "w-alert": WarpAlertProps;
+  "w-link": WarpLinkProps;
+  "w-button": WarpButtonProps;
+  "w-attention": WarpAttentionProps;
+  "w-badge": WarpBadgeProps;
+  "w-box": WarpBoxProps;
+  "w-breadcrumbs": WarpBreadcrumbsProps;
+  "w-breadcrumb-item": WarpBreadcrumbItemProps;
+  "w-card": WarpCardProps;
+  "w-checkbox": WarpCheckboxProps;
+  "w-checkbox-group": WarpCheckboxGroupProps;
+  "w-combobox": WarpComboboxProps;
+  "w-datepicker": WarpDatepickerProps;
+  "w-expandable": WarpExpandableProps;
+  "w-modal": WarpModalProps;
+  "w-modal-footer": WarpModalFooterProps;
+  "w-modal-header": WarpModalHeaderProps;
+  "w-page-indicator": WarpPageIndicatorProps;
+  "w-pagination": WarpPaginationProps;
+  "w-pill": WarpPillProps;
+  "w-radio": WarpRadioProps;
+  "w-radio-group": WarpRadioGroupProps;
+  "w-select": WarpSelectProps;
+  "w-slider-thumb": WarpSliderThumbProps;
+  "w-slider": WarpSliderProps;
+  "w-snackbar-item": WarpSnackbarItemProps;
+  "w-snackbar": WarpSnackbarProps;
+  "w-step": WarpStepProps;
+  "w-step-indicator": WarpStepIndicatorProps;
+  "w-switch": WarpSwitchProps;
+  "w-tab": WarpTabProps;
+  "w-tab-panel": WarpTabPanelProps;
+  "w-tabs": WarpTabsProps;
+  "w-textarea": WarpTextareaProps;
+};
+
+export type ReactCustomElements = {
+  [Tag in keyof CustomElementComponentProps]: Tag extends keyof CustomElementInstances
+    ? Partial<ReactCustomElementProps<CustomElementInstances[Tag], CustomElementComponentProps[Tag]>>
+    : never;
+};
+
+export type CustomElementsSolidJs = {
   /**
    * A single-line input component used for entering and editing textual or numeric data.
    *
@@ -2911,6 +3625,7 @@ export type CustomElementsSolidJs = {
    * - `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.
+   * - `optional`: Whether to show the optional indicator after the label.
    * - `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).
@@ -2943,7 +3658,7 @@ export type CustomElementsSolidJs = {
    * 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.
+   * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support.
    *
    * ## Methods
    *
@@ -2961,9 +3676,36 @@ export type CustomElementsSolidJs = {
       BaseEvents
   >;
 
+  /**
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `name`: Icon filename (without .svg)
+   * - `size`: Size: small, medium, large or pixel value (e.g. "32px").
+   * - `locale`: Locale used for `<title>` text.
+   *
+   * Reads the `lang` attribute from `<html>`, falls back to 'en'.
+   */
+  "w-icon": Partial<
+    WarpIconProps & WarpIconSolidJsProps & BaseProps<WarpIcon> & BaseEvents
+  >;
+
   /**
    * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
    *
+   * ## Accessibility Note
+   * Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)
+   * cannot reference elements across shadow boundaries. This means:
+   * - Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA
+   * - Interactive affixes (buttons) must have their own `aria-label` (already implemented)
+   * - Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work
+   *
+   * For non-interactive labels (e.g., currency symbols), consider including the information in the
+   * main label or placeholder instead of relying on ARIA to announce affix content.
+   *
    * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
    *
    * ## Attributes & Properties
@@ -3011,14 +3753,18 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `autofocus`: undefined
-   * - `variant`: undefined
-   * - `small`: undefined
-   * - `href`: undefined
-   * - `disabled`: undefined
-   * - `target`: undefined
-   * - `rel`: undefined
-   * - `full-width`/`fullWidth`: undefined
+   * - `autofocus`: Focus the link after it is rendered
+   * - `variant`: Visual style for the link/button.
+   * - `small`: Render a smaller version
+   * - `href`: The URL the link points to
+   * - `disabled`: Applies disabled styling, but you need to disable clicks on your own.
+   *
+   * The component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.
+   * - `target`: Where to display the linked URL (e.g. `_blank`)
+   * - `rel`: Relationship of the linked URL.
+   *
+   * If `target="_blank"` and `rel` is not provided, the component uses `noopener`.
+   * - `full-width`/`fullWidth`: Makes the link take up the full width of its parent
    */
   "w-link": Partial<
     WarpLinkProps & WarpLinkSolidJsProps & BaseProps<WarpLink> & BaseEvents
@@ -3206,6 +3952,34 @@ export type CustomElementsSolidJs = {
       BaseEvents
   >;
 
+  /**
+   * Represents one item in a `w-breadcrumbs` trail.
+   * Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `current-page`/`currentPage`: Marks this item as the current page.
+   * Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator.
+   * - `href`: URL for linked breadcrumb items.
+   * When omitted, the item renders as non-focusable text.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The breadcrumb label content.
+   */
+  "w-breadcrumb-item": Partial<
+    WarpBreadcrumbItemProps &
+      WarpBreadcrumbItemSolidJsProps &
+      BaseProps<WarpBreadcrumbItem> &
+      BaseEvents
+  >;
+
   /**
    * Card is a layout component used for separating content areas on a page.
    *
@@ -3243,13 +4017,27 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `name`: The name of the checkbox, submitted as a name/value pair with form data.
-   * - `value`: The value of the checkbox, submitted as a name/value pair with form data.
-   * - `indeterminate`: Draws the checkbox in an indeterminate state.
-   * - `checked`: Draws the checkbox in a checked state (reflected to attribute).
-   * - `disabled`: Disables the checkbox.
-   * - `required`: Makes the checkbox a required field.
-   * - `invalid`: Draws the checkbox in an invalid state.
+   * - `name`: 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.
+   * - `value`: 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.
+   * - `indeterminate`: 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.
+   * - `checked`: Whether the checkbox is checked.
+   *
+   * Checked checkboxes submit their value with form data. The property is reflected to the `checked` attribute.
+   * - `disabled`: Whether the checkbox is disabled.
+   *
+   * Disabled checkboxes cannot be focused, changed, or submitted with form data.
+   * - `required`: 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`.
+   * - `invalid`: 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.
    * - `input`: undefined (property only)
    * - `_computedInvalid`: Computed invalid state: combines own invalid with group invalid (property only) (readonly)
    * - `validationMessage`: Returns the validation message if the checkbox is invalid, otherwise an empty string (property only) (readonly)
@@ -3273,22 +4061,48 @@ 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
   >;
 
   /**
+   * Checkboxes allow users to select multiple options from a list of choices.
+   *
+   * Use with `w-checkbox`.
    *
+   * ## Architecture Note
+   * This component uses a <div> wrapper instead of the more semantic <fieldset> element.
+   * Note that w-radio-group uses <fieldset>, which provides better accessibility and follows
+   * HTML best practices. This inconsistency exists for historical reasons and may be addressed
+   * in a future major version to align both on the more semantic approach.
+   *
+   * TODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing
+   * backwards compatibility implications (CSS selectors, etc.).
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `label`: 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.
    * - `name`: 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`.
    * - `optional`: Whether to show optional text next to the label.
-   * - `help-text`/`helpText`: undefined
-   * - `required`: Makes the checkbox group required.
-   * - `invalid`: Marks the checkbox group as invalid.
+   *
+   * Use this to indicate that selecting an option from the group is not required.
+   * - `help-text`/`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.
+   * - `required`: 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.
+   * - `invalid`: 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.
    *
    * ## Methods
    *
@@ -3299,9 +4113,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
   >;
 
@@ -3314,21 +4128,51 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `options`: The available options to select from
-   * - `label`: Label above input
-   * - `placeholder`: Input placeholder
-   * - `value`: The input value
-   * - `open-on-focus`/`openOnFocus`: Whether the popover opens when focus is on the text field
-   * - `select-on-blur`/`selectOnBlur`: Select active option on blur
-   * - `match-text-segments`/`matchTextSegments`: Whether the matching text segments in the options should be highlighted
-   * - `disable-static-filtering`/`disableStaticFiltering`: Disable client-side static filtering
-   * - `invalid`: Renders the input field in an invalid state
-   * - `help-text`/`helpText`: The content to display as the help text
-   * - `disabled`: Whether the element is disabled
-   * - `required`: Whether the element is required
-   * - `optional`: Whether to show optional text
-   * - `name`: Name attribute for form submission
-   * - `autocomplete`: Autocomplete attribute for the input field
+   * - `options`: The available options to select from.
+   *
+   * Use this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements.
+   * - `label`: The label displayed above the input.
+   *
+   * Use this to give the combobox a visible and accessible name.
+   * - `placeholder`: Placeholder text displayed when the input is empty.
+   *
+   * Use this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.
+   * - `value`: The selected or typed value.
+   *
+   * When an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.
+   * - `open-on-focus`/`openOnFocus`: Whether the option list opens when the input receives focus.
+   *
+   * Use this when users should see available options before they start typing.
+   * - `select-on-blur`/`selectOnBlur`: Whether the active option is selected when the input loses focus.
+   *
+   * When enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur.
+   * - `match-text-segments`/`matchTextSegments`: Whether matching text segments in options are highlighted.
+   *
+   * Use this to visually emphasize the part of each option that matches the current input value.
+   * - `disable-static-filtering`/`disableStaticFiltering`: Whether built-in client-side filtering is disabled.
+   *
+   * Use this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided.
+   * - `invalid`: Whether the combobox is visually invalid.
+   *
+   * Use this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error.
+   * - `help-text`/`helpText`: Help text displayed below the input.
+   *
+   * Use this for supporting guidance or validation feedback.
+   * - `disabled`: Whether the combobox is disabled.
+   *
+   * Disabled comboboxes cannot be focused, changed, or submitted with form data.
+   * - `required`: Whether the combobox is required before form submission.
+   *
+   * Use this when the user must provide a value before submitting the form.
+   * - `optional`: Whether to show optional text next to the label.
+   *
+   * Use this to indicate that the combobox is not required.
+   * - `name`: The name submitted with the combobox value.
+   *
+   * Use this when the combobox belongs to a form and its value should be included in form data.
+   * - `autocomplete`: The autocomplete attribute passed to the internal input.
+   *
+   * Defaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.
    *
    * ## Methods
    *
@@ -3354,22 +4198,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)
@@ -3403,21 +4255,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
    *
@@ -3626,7 +4476,7 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `label`: Alternative to the `label` attribute should you need custom HTML.
-   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
+   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.).
    */
   "w-radio-group": Partial<
     WarpRadioGroupProps &
@@ -3723,6 +4573,7 @@ export type CustomElementsSolidJs = {
    * - `help-text`/`helpText`: Additional description to show below the fieldset
    * - `invalid`: Sets the form fields and fieldset in an invalid state
    * - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit
+   * - `optional`: Whether to show the optional indicator after the label.
    * - `min`: The minimum allowed value in the range inputs
    * - `max`: The maximum allowed value in the range inputs
    * - `markers`: Pass a value similar to step to create visual markers at that interval
@@ -3734,6 +4585,7 @@ export type CustomElementsSolidJs = {
    *
    * 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)
+   * - `_label`: undefined (property only) (readonly)
    *
    * ## Slots
    *
@@ -3752,6 +4604,118 @@ export type CustomElementsSolidJs = {
       BaseEvents
   >;
 
+  /**
+   * An item to show in a `w-snackbar`.
+   *
+   * See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `action-placement`/`actionPlacement`: The placement of the action and close buttons.
+   * - `duration`: How long the message should stay in the document before removing itself.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `default`: the snackbar message.
+   * - `icon`: icon preceeding the message.
+   * - `action`: action following the message.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `close() => void`: Remove the snackbar item from the document.
+   *
+   * Moves focus to the last focused element outside of the snackbar item, if available.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-snackbar-item-radius`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-max-width`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-min-width`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-padding`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-bg`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-bg-active`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-bg-hover`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-color`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-color-active`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-color-hover`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-box-shadow`: undefined (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `item`: the container wrapping the message, icon and actions.
+   * - `icon`: the icon for the variant.
+   * - `message`: the default slot, body of the snackbar item.
+   * - `action`: close and action button.
+   */
+  "w-snackbar-item": Partial<
+    WarpSnackbarItemProps &
+      WarpSnackbarItemSolidJsProps &
+      BaseProps<WarpSnackbarItem> &
+      BaseEvents
+  >;
+
+  /**
+   * A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.
+   *
+   * Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `default`: `w-snackbar-item` gets placed inside the default slot by the `create` function.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `create(message: string, options: CreateSnackbarOptions = {}) => void`: Creates a snackbar item and immediately adds it to the snackbar.
+   *
+   * By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
+   *
+   * If you include an `action` in the options the default `duration` is
+   * set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
+   *
+   * A `duration` of 10 seconds or longer forces the close button to be visible.
+   *
+   * The default `variant` is `neutral` which does not have an icon.
+   *
+   * Set `duration` to `SnackbarDuration.Infinite` if you want a persistent message.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-snackbar-container-gap`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-bottom`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-left`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-right`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-top`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-z-index`: undefined (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `container`: the live region that positions messages on the screen.
+   */
+  "w-snackbar": Partial<
+    WarpSnackbarProps &
+      WarpSnackbarSolidJsProps &
+      BaseProps<WarpSnackbar> &
+      BaseEvents
+  >;
+
   /**
    * Individual step component that shows a single step in a process
    *
@@ -3933,11 +4897,46 @@ export type CustomElementsSolidJs = {
   >;
 };
 
-export type CustomCssProperties = {};
+export type CustomCssProperties = {
+  /**  */
+  "--w-c-snackbar-item-radius"?: string;
+  /**  */
+  "--w-c-snackbar-item-max-width"?: string;
+  /**  */
+  "--w-c-snackbar-item-min-width"?: string;
+  /**  */
+  "--w-c-snackbar-item-padding"?: string;
+  /**  */
+  "--w-c-snackbar-item-bg"?: string;
+  /**  */
+  "--w-c-snackbar-item-action-bg-active"?: string;
+  /**  */
+  "--w-c-snackbar-item-action-bg-hover"?: string;
+  /**  */
+  "--w-c-snackbar-item-color"?: string;
+  /**  */
+  "--w-c-snackbar-item-action-color-active"?: string;
+  /**  */
+  "--w-c-snackbar-item-action-color-hover"?: string;
+  /**  */
+  "--w-c-snackbar-item-box-shadow"?: string;
+  /**  */
+  "--w-c-snackbar-container-gap"?: string;
+  /**  */
+  "--w-c-snackbar-position-bottom"?: string;
+  /**  */
+  "--w-c-snackbar-position-left"?: string;
+  /**  */
+  "--w-c-snackbar-position-right"?: string;
+  /**  */
+  "--w-c-snackbar-position-top"?: string;
+  /**  */
+  "--w-c-snackbar-z-index"?: string;
+};
 
 declare module "react" {
   namespace JSX {
-    interface IntrinsicElements extends CustomElements {}
+    interface IntrinsicElements extends ReactCustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }