@warp-ds/elements 2.9.1 → 2.10.0-next.1

package/dist/index.d.ts

@@ -14,14 +14,23 @@ import type { 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";
-import type { ModalMain } from "./packages/modal/modal.ts";
-import type { ModalFooter } from "./packages/modal-footer/modal-footer.ts";
-import type { ModalHeader } from "./packages/modal-header/modal-header.ts";
+import type { WarpModal, ModalMain } from "./packages/modal/modal.ts";
+import type {
+  WarpModalFooter,
+  ModalFooter,
+} from "./packages/modal-footer/modal-footer.ts";
+import type {
+  WarpModalHeader,
+  ModalHeader,
+} from "./packages/modal-header/modal-header.ts";
 import type { WarpPageIndicator } from "./packages/page-indicator/page-indicator.ts";
 import type { WarpPagination } from "./packages/pagination/pagination.ts";
 import type { WarpPill } from "./packages/pill/pill.ts";
-import type { WRadio } from "./packages/radio/radio.ts";
-import type { WRadioGroup } from "./packages/radio-group/radio-group.ts";
+import type { WarpRadio, WRadio } from "./packages/radio/radio.ts";
+import type {
+  WarpRadioGroup,
+  WRadioGroup,
+} from "./packages/radio-group/radio-group.ts";
 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";
@@ -381,85 +390,125 @@ export type WarpLinkSolidJsProps = {
 };
 
 export type WarpButtonProps = {
-  /**  */
+  /** Native button type.
+Controls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`. */
   type?: WarpButton["type"];
-  /**  */
+  /** Focuses the button when it is first rendered.
+Applies only when the component renders a native button. Link buttons with `href` do not autofocus through this component. */
   autofocus?: WarpButton["autofocus"];
-  /**  */
+  /** Visual style of the button.
+Defaults to `secondary`. Use the variant that matches the action priority, risk, and placement. */
   variant?: WarpButton["variant"];
-  /** @deprecated Use `variant="quiet"` instead  */
+  /** @deprecated Use `variant="quiet"` instead - Deprecated quiet visual treatment flag
+Use `variant="quiet"` instead. */
   quiet?: WarpButton["quiet"];
-  /**  */
+  /** Marks the button as icon-only.
+Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name. */
   "icon-only"?: WarpButton["iconOnly"];
-  /**  */
+  /** Marks the button as icon-only.
+Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name. */
   iconOnly?: WarpButton["iconOnly"];
-  /**  */
+  /** Renders the compact button size.
+Use this in dense layouts where the default button size is too large. */
   small?: WarpButton["small"];
-  /**  */
+  /** Shows the loading state.
+Use after the user has triggered an action and the action is in progress. */
   loading?: WarpButton["loading"];
-  /**  */
+  /** URL for rendering the button as a link.
+When set, the component renders `w-link` instead of a native `button`. */
   href?: WarpButton["href"];
-  /**  */
+  /** Link browsing context.
+Passed to the rendered link when `href` is set. */
   target?: WarpButton["target"];
-  /**  */
+  /** Visually disables the button.
+Disabled buttons are discouraged because they can hide the reason an action is unavailable. */
   disabled?: WarpButton["disabled"];
-  /**  */
+  /** Link relationship.
+Passed to the rendered link when `href` is set. If `target="_blank"` is set and `rel` is omitted, `noopener` is used. */
   rel?: WarpButton["rel"];
-  /**  */
+  /** Makes the button fill its parent width.
+Useful in narrow layouts where the button should span the available inline space. */
   "full-width"?: WarpButton["fullWidth"];
-  /**  */
+  /** Makes the button fill its parent width.
+Useful in narrow layouts where the button should span the available inline space. */
   fullWidth?: WarpButton["fullWidth"];
-  /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button.  */
+  /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. - Deprecated class applied to the internal control
+This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance. */
   "button-class"?: WarpButton["buttonClass"];
-  /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button.  */
+  /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. - Deprecated class applied to the internal control
+This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance. */
   buttonClass?: WarpButton["buttonClass"];
-  /**  */
+  /** Form control name.
+Used when the button participates in form handling. */
   name?: WarpButton["name"];
-  /**  */
+  /** Form control value.
+Used with `name` when the button participates in form handling. Resets to its initial value when the form is reset. */
   value?: WarpButton["value"];
-  /**  */
-  ariaValueTextLoading?: WarpButton["ariaValueTextLoading"];
+  /** The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. */
+  commandfor?: WarpButton["commandfor"];
+  /** The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. */
+  command?: WarpButton["command"];
 };
 
 export type WarpButtonSolidJsProps = {
-  /**  */
+  /** Native button type.
+Controls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`. */
   "prop:type"?: WarpButton["type"];
-  /**  */
+  /** Focuses the button when it is first rendered.
+Applies only when the component renders a native button. Link buttons with `href` do not autofocus through this component. */
   "prop:autofocus"?: WarpButton["autofocus"];
-  /**  */
+  /** Visual style of the button.
+Defaults to `secondary`. Use the variant that matches the action priority, risk, and placement. */
   "prop:variant"?: WarpButton["variant"];
-  /** @deprecated Use `variant="quiet"` instead  */
+  /** @deprecated Use `variant="quiet"` instead - Deprecated quiet visual treatment flag
+Use `variant="quiet"` instead. */
   "prop:quiet"?: WarpButton["quiet"];
-  /**  */
+  /** Marks the button as icon-only.
+Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name. */
   "bool:icon-only"?: WarpButton["iconOnly"];
-  /**  */
+  /** Marks the button as icon-only.
+Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name. */
   "prop:iconOnly"?: WarpButton["iconOnly"];
-  /**  */
+  /** Renders the compact button size.
+Use this in dense layouts where the default button size is too large. */
   "prop:small"?: WarpButton["small"];
-  /**  */
+  /** Shows the loading state.
+Use after the user has triggered an action and the action is in progress. */
   "prop:loading"?: WarpButton["loading"];
-  /**  */
+  /** URL for rendering the button as a link.
+When set, the component renders `w-link` instead of a native `button`. */
   "prop:href"?: WarpButton["href"];
-  /**  */
+  /** Link browsing context.
+Passed to the rendered link when `href` is set. */
   "prop:target"?: WarpButton["target"];
-  /**  */
+  /** Visually disables the button.
+Disabled buttons are discouraged because they can hide the reason an action is unavailable. */
   "prop:disabled"?: WarpButton["disabled"];
-  /**  */
+  /** Link relationship.
+Passed to the rendered link when `href` is set. If `target="_blank"` is set and `rel` is omitted, `noopener` is used. */
   "prop:rel"?: WarpButton["rel"];
-  /**  */
+  /** Makes the button fill its parent width.
+Useful in narrow layouts where the button should span the available inline space. */
   "bool:full-width"?: WarpButton["fullWidth"];
-  /**  */
+  /** Makes the button fill its parent width.
+Useful in narrow layouts where the button should span the available inline space. */
   "prop:fullWidth"?: WarpButton["fullWidth"];
-  /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button.  */
+  /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. - Deprecated class applied to the internal control
+This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance. */
   "attr:button-class"?: WarpButton["buttonClass"];
-  /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button.  */
+  /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. - Deprecated class applied to the internal control
+This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance. */
   "prop:buttonClass"?: WarpButton["buttonClass"];
-  /**  */
+  /** Form control name.
+Used when the button participates in form handling. */
   "prop:name"?: WarpButton["name"];
-  /**  */
+  /** Form control value.
+Used with `name` when the button participates in form handling. Resets to its initial value when the form is reset. */
   "prop:value"?: WarpButton["value"];
-  /**  */
-  "prop:ariaValueTextLoading"?: WarpButton["ariaValueTextLoading"];
+  /** The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. */
+  "prop:commandfor"?: WarpButton["commandfor"];
+  /** The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. */
+  "prop:command"?: WarpButton["command"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1076,23 +1125,19 @@ export type WarpExpandableSolidJsProps = {
   textContent?: string | number;
 };
 
-export type ModalMainProps = {
-  /**  */
-  show?: ModalMain["show"];
-  /**  */
-  "content-id"?: ModalMain["contentId"];
-  /**  */
-  contentId?: ModalMain["contentId"];
-  /**  */
-  "ignore-backdrop-clicks"?: ModalMain["ignoreBackdropClicks"];
-  /**  */
-  ignoreBackdropClicks?: ModalMain["ignoreBackdropClicks"];
-  /**  */
-  dialogEl?: ModalMain["dialogEl"];
+export type WarpModalProps = {
+  /** Controls if the modal should show or hide.
+
+You can also call the `open()` and `close()` methods. */
+  show?: WarpModal["show"];
   /**  */
-  dialogInnerEl?: ModalMain["dialogInnerEl"];
+  "content-id"?: WarpModal["contentId"];
   /**  */
-  contentEl?: ModalMain["contentEl"];
+  contentId?: WarpModal["contentId"];
+  /** Ignores clicks to the backdrop when set */
+  "ignore-backdrop-clicks"?: WarpModal["ignoreBackdropClicks"];
+  /** Ignores clicks to the backdrop when set */
+  ignoreBackdropClicks?: WarpModal["ignoreBackdropClicks"];
 
   /**  */
   onshown?: (e: CustomEvent) => void;
@@ -1100,23 +1145,19 @@ export type ModalMainProps = {
   onhidden?: (e: CustomEvent) => void;
 };
 
-export type ModalMainSolidJsProps = {
-  /**  */
-  "prop:show"?: ModalMain["show"];
-  /**  */
-  "attr:content-id"?: ModalMain["contentId"];
-  /**  */
-  "prop:contentId"?: ModalMain["contentId"];
-  /**  */
-  "bool:ignore-backdrop-clicks"?: ModalMain["ignoreBackdropClicks"];
-  /**  */
-  "prop:ignoreBackdropClicks"?: ModalMain["ignoreBackdropClicks"];
-  /**  */
-  "prop:dialogEl"?: ModalMain["dialogEl"];
+export type WarpModalSolidJsProps = {
+  /** Controls if the modal should show or hide.
+
+You can also call the `open()` and `close()` methods. */
+  "prop:show"?: WarpModal["show"];
   /**  */
-  "prop:dialogInnerEl"?: ModalMain["dialogInnerEl"];
+  "attr:content-id"?: WarpModal["contentId"];
   /**  */
-  "prop:contentEl"?: ModalMain["contentEl"];
+  "prop:contentId"?: WarpModal["contentId"];
+  /** Ignores clicks to the backdrop when set */
+  "bool:ignore-backdrop-clicks"?: WarpModal["ignoreBackdropClicks"];
+  /** Ignores clicks to the backdrop when set */
+  "prop:ignoreBackdropClicks"?: WarpModal["ignoreBackdropClicks"];
   /**  */
   "on:shown"?: (e: CustomEvent) => void;
   /**  */
@@ -1128,42 +1169,38 @@ export type ModalMainSolidJsProps = {
   textContent?: string | number;
 };
 
-export type ModalFooterProps = {};
+export type WarpModalFooterProps = {};
 
-export type ModalFooterSolidJsProps = {
+export type WarpModalFooterSolidJsProps = {
   /** Set the innerHTML of the element */
   innerHTML?: string;
   /** Set the textContent of the element */
   textContent?: string | number;
 };
 
-export type ModalHeaderProps = {
-  /**  */
-  title?: ModalHeader["title"];
-  /**  */
-  back?: ModalHeader["back"];
-  /**  */
-  "no-close"?: ModalHeader["noClose"];
-  /**  */
-  noClose?: ModalHeader["noClose"];
-  /**  */
-  titleEl?: ModalHeader["titleEl"];
+export type WarpModalHeaderProps = {
+  /** A short but descriptive title for the modal */
+  title?: WarpModalHeader["title"];
+  /** Whether the modal header should have a back button */
+  back?: WarpModalHeader["back"];
+  /** Lets you hide the close button in the header */
+  "no-close"?: WarpModalHeader["noClose"];
+  /** Lets you hide the close button in the header */
+  noClose?: WarpModalHeader["noClose"];
 
   /**  */
   onbackClicked?: (e: CustomEvent) => void;
 };
 
-export type ModalHeaderSolidJsProps = {
-  /**  */
-  "prop:title"?: ModalHeader["title"];
-  /**  */
-  "prop:back"?: ModalHeader["back"];
-  /**  */
-  "bool:no-close"?: ModalHeader["noClose"];
-  /**  */
-  "prop:noClose"?: ModalHeader["noClose"];
-  /**  */
-  "prop:titleEl"?: ModalHeader["titleEl"];
+export type WarpModalHeaderSolidJsProps = {
+  /** A short but descriptive title for the modal */
+  "prop:title"?: WarpModalHeader["title"];
+  /** Whether the modal header should have a back button */
+  "prop:back"?: WarpModalHeader["back"];
+  /** Lets you hide the close button in the header */
+  "bool:no-close"?: WarpModalHeader["noClose"];
+  /** Lets you hide the close button in the header */
+  "prop:noClose"?: WarpModalHeader["noClose"];
   /**  */
   "on:backClicked"?: (e: CustomEvent) => void;
 
@@ -1174,24 +1211,24 @@ export type ModalHeaderSolidJsProps = {
 };
 
 export type WarpPageIndicatorProps = {
-  /** Currently selected page (1-based index, clamped to valid range) */
+  /** Currently selected page (1-based index) */
   "selected-page"?: WarpPageIndicator["selectedPage"];
-  /** Currently selected page (1-based index, clamped to valid range) */
+  /** Currently selected page (1-based index) */
   selectedPage?: WarpPageIndicator["selectedPage"];
-  /** Total number of pages (minimum 1) */
+  /** Total number of pages */
   "page-count"?: WarpPageIndicator["pageCount"];
-  /** Total number of pages (minimum 1) */
+  /** Total number of pages */
   pageCount?: WarpPageIndicator["pageCount"];
 };
 
 export type WarpPageIndicatorSolidJsProps = {
-  /** Currently selected page (1-based index, clamped to valid range) */
+  /** Currently selected page (1-based index) */
   "attr:selected-page"?: WarpPageIndicator["selectedPage"];
-  /** Currently selected page (1-based index, clamped to valid range) */
+  /** Currently selected page (1-based index) */
   "prop:selectedPage"?: WarpPageIndicator["selectedPage"];
-  /** Total number of pages (minimum 1) */
+  /** Total number of pages */
   "attr:page-count"?: WarpPageIndicator["pageCount"];
-  /** Total number of pages (minimum 1) */
+  /** Total number of pages */
   "prop:pageCount"?: WarpPageIndicator["pageCount"];
 
   /** Set the innerHTML of the element */
@@ -1201,41 +1238,49 @@ export type WarpPageIndicatorSolidJsProps = {
 };
 
 export type WarpPaginationProps = {
-  /**  */
+  /** The base URL used to construct page links, for example `/search?page=`.
+
+The page number is appended to this URL. */
   "base-url"?: WarpPagination["baseUrl"];
-  /**  */
+  /** The base URL used to construct page links, for example `/search?page=`.
+
+The page number is appended to this URL. */
   baseUrl?: WarpPagination["baseUrl"];
-  /**  */
+  /** The total number of pages. */
   pages?: WarpPagination["pages"];
-  /**  */
+  /** The currently active page number. */
   "current-page"?: WarpPagination["currentPageNumber"];
-  /**  */
+  /** The currently active page number. */
   currentPageNumber?: WarpPagination["currentPageNumber"];
-  /**  */
+  /** The maximum number of page numbers visible. */
   "visible-pages"?: WarpPagination["visiblePages"];
-  /**  */
+  /** The maximum number of page numbers visible. */
   visiblePages?: WarpPagination["visiblePages"];
 
-  /** Triggered when a link button in the pagination is clicked. Contains the page number in `string` form. */
+  /** Triggered when a link in the pagination is clicked. Contains the page number in `string` form. */
   "onpage-click"?: (e: CustomEvent) => void;
 };
 
 export type WarpPaginationSolidJsProps = {
-  /**  */
+  /** The base URL used to construct page links, for example `/search?page=`.
+
+The page number is appended to this URL. */
   "attr:base-url"?: WarpPagination["baseUrl"];
-  /**  */
+  /** The base URL used to construct page links, for example `/search?page=`.
+
+The page number is appended to this URL. */
   "prop:baseUrl"?: WarpPagination["baseUrl"];
-  /**  */
+  /** The total number of pages. */
   "prop:pages"?: WarpPagination["pages"];
-  /**  */
+  /** The currently active page number. */
   "attr:current-page"?: WarpPagination["currentPageNumber"];
-  /**  */
+  /** The currently active page number. */
   "prop:currentPageNumber"?: WarpPagination["currentPageNumber"];
-  /**  */
+  /** The maximum number of page numbers visible. */
   "attr:visible-pages"?: WarpPagination["visiblePages"];
-  /**  */
+  /** The maximum number of page numbers visible. */
   "prop:visiblePages"?: WarpPagination["visiblePages"];
-  /** Triggered when a link button in the pagination is clicked. Contains the page number in `string` form. */
+  /** Triggered when a link in the pagination is clicked. Contains the page number in `string` form. */
   "on:page-click"?: (e: CustomEvent) => void;
 
   /** Set the innerHTML of the element */
@@ -1245,69 +1290,61 @@ export type WarpPaginationSolidJsProps = {
 };
 
 export type WarpPillProps = {
-  /**  */
+  /** Whether the pill should be removable via a close button. */
   "can-close"?: WarpPill["canClose"];
-  /**  */
+  /** Whether the pill should be removable via a close button. */
   canClose?: WarpPill["canClose"];
-  /**  */
+  /** Whether the pill should be rendered as a suggestion. */
   suggestion?: WarpPill["suggestion"];
   /** @deprecated Used "open-arial-label" instead.  */
   "open-sr-label"?: WarpPill["openSrLabel"];
   /** @deprecated Used "open-arial-label" instead.  */
   openSrLabel?: WarpPill["openSrLabel"];
-  /**  */
+  /** Label read by screen readers when targeting the pill. */
   "open-aria-label"?: WarpPill["openAriaLabel"];
-  /**  */
+  /** Label read by screen readers when targeting the pill. */
   openAriaLabel?: WarpPill["openAriaLabel"];
   /** @deprecated Used "close-arial-label" instead.  */
   "close-sr-label"?: WarpPill["closeSrLabel"];
   /** @deprecated Used "close-arial-label" instead.  */
   closeSrLabel?: WarpPill["closeSrLabel"];
-  /**  */
+  /** Label read by screen readers when targeting the close button. */
   "close-aria-label"?: WarpPill["closeAriaLabel"];
-  /**  */
+  /** Label read by screen readers when targeting the close button. */
   closeAriaLabel?: WarpPill["closeAriaLabel"];
-  /**  */
-  openFilterSrText?: WarpPill["openFilterSrText"];
-  /**  */
-  removeFilterSrText?: WarpPill["removeFilterSrText"];
 
-  /**  */
+  /** Fires when the pill itself is clicked. */
   "onw-pill-click"?: (e: CustomEvent) => void;
-  /**  */
+  /** Fires when the pill's close button is clicked. */
   "onw-pill-close"?: (e: CustomEvent) => void;
 };
 
 export type WarpPillSolidJsProps = {
-  /**  */
+  /** Whether the pill should be removable via a close button. */
   "bool:can-close"?: WarpPill["canClose"];
-  /**  */
+  /** Whether the pill should be removable via a close button. */
   "prop:canClose"?: WarpPill["canClose"];
-  /**  */
+  /** Whether the pill should be rendered as a suggestion. */
   "prop:suggestion"?: WarpPill["suggestion"];
   /** @deprecated Used "open-arial-label" instead.  */
   "attr:open-sr-label"?: WarpPill["openSrLabel"];
   /** @deprecated Used "open-arial-label" instead.  */
   "prop:openSrLabel"?: WarpPill["openSrLabel"];
-  /**  */
+  /** Label read by screen readers when targeting the pill. */
   "attr:open-aria-label"?: WarpPill["openAriaLabel"];
-  /**  */
+  /** Label read by screen readers when targeting the pill. */
   "prop:openAriaLabel"?: WarpPill["openAriaLabel"];
   /** @deprecated Used "close-arial-label" instead.  */
   "attr:close-sr-label"?: WarpPill["closeSrLabel"];
   /** @deprecated Used "close-arial-label" instead.  */
   "prop:closeSrLabel"?: WarpPill["closeSrLabel"];
-  /**  */
+  /** Label read by screen readers when targeting the close button. */
   "attr:close-aria-label"?: WarpPill["closeAriaLabel"];
-  /**  */
+  /** Label read by screen readers when targeting the close button. */
   "prop:closeAriaLabel"?: WarpPill["closeAriaLabel"];
-  /**  */
-  "prop:openFilterSrText"?: WarpPill["openFilterSrText"];
-  /**  */
-  "prop:removeFilterSrText"?: WarpPill["removeFilterSrText"];
-  /**  */
+  /** Fires when the pill itself is clicked. */
   "on:w-pill-click"?: (e: CustomEvent) => void;
-  /**  */
+  /** Fires when the pill's close button is clicked. */
   "on:w-pill-close"?: (e: CustomEvent) => void;
 
   /** Set the innerHTML of the element */
@@ -1316,46 +1353,34 @@ export type WarpPillSolidJsProps = {
   textContent?: string | number;
 };
 
-export type WRadioProps = {
+export type WarpRadioProps = {
   /** The name of the radio, submitted as a name/value pair with form data. */
-  name?: WRadio["name"];
+  name?: WarpRadio["name"];
   /** The radio's value. When selected, the radio group will receive this value. */
-  value?: WRadio["value"];
+  value?: WarpRadio["value"];
   /** Draws the radio in a checked state (reflected to attribute). */
-  checked?: WRadio["checked"];
+  checked?: WarpRadio["checked"];
   /** Disables the radio. */
-  disabled?: WRadio["disabled"];
+  disabled?: WarpRadio["disabled"];
   /** Makes the radio a required field. */
-  required?: WRadio["required"];
+  required?: WarpRadio["required"];
   /** Draws the radio in an invalid state. */
-  invalid?: WRadio["invalid"];
-  /** Override tabIndex setter to set _groupTabIndex (for backwards compatibility).
-Radio-group should use _groupTabIndex directly for clarity. */
-  tabIndex?: WRadio["tabIndex"];
-  /** Internal tabindex for standalone radios (not in a group).
-Non-reflecting to avoid DOM changes during hydration. */
-  _standaloneTabIndex?: WRadio["_standaloneTabIndex"];
+  invalid?: WarpRadio["invalid"];
 };
 
-export type WRadioSolidJsProps = {
+export type WarpRadioSolidJsProps = {
   /** The name of the radio, submitted as a name/value pair with form data. */
-  "prop:name"?: WRadio["name"];
+  "prop:name"?: WarpRadio["name"];
   /** The radio's value. When selected, the radio group will receive this value. */
-  "prop:value"?: WRadio["value"];
+  "prop:value"?: WarpRadio["value"];
   /** Draws the radio in a checked state (reflected to attribute). */
-  "prop:checked"?: WRadio["checked"];
+  "prop:checked"?: WarpRadio["checked"];
   /** Disables the radio. */
-  "prop:disabled"?: WRadio["disabled"];
+  "prop:disabled"?: WarpRadio["disabled"];
   /** Makes the radio a required field. */
-  "prop:required"?: WRadio["required"];
+  "prop:required"?: WarpRadio["required"];
   /** Draws the radio in an invalid state. */
-  "prop:invalid"?: WRadio["invalid"];
-  /** Override tabIndex setter to set _groupTabIndex (for backwards compatibility).
-Radio-group should use _groupTabIndex directly for clarity. */
-  "prop:tabIndex"?: WRadio["tabIndex"];
-  /** Internal tabindex for standalone radios (not in a group).
-Non-reflecting to avoid DOM changes during hydration. */
-  "prop:_standaloneTabIndex"?: WRadio["_standaloneTabIndex"];
+  "prop:invalid"?: WarpRadio["invalid"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1363,46 +1388,50 @@ Non-reflecting to avoid DOM changes during hydration. */
   textContent?: string | number;
 };
 
-export type WRadioGroupProps = {
-  /**  */
-  label?: WRadioGroup["label"];
-  /**  */
-  "help-text"?: WRadioGroup["helpText"];
-  /**  */
-  helpText?: WRadioGroup["helpText"];
-  /**  */
-  optional?: WRadioGroup["optional"];
-  /**  */
-  invalid?: WRadioGroup["invalid"];
-  /**  */
-  name?: WRadioGroup["name"];
-  /**  */
-  disabled?: WRadioGroup["disabled"];
-  /**  */
-  required?: WRadioGroup["required"];
-  /**  */
-  hasInteracted?: WRadioGroup["hasInteracted"];
-};
+export type WarpRadioGroupProps = {
+  /** Label for the radio group. */
+  label?: WarpRadioGroup["label"];
+  /** Help text for the radio group.
 
-export type WRadioGroupSolidJsProps = {
-  /**  */
-  "prop:label"?: WRadioGroup["label"];
-  /**  */
-  "attr:help-text"?: WRadioGroup["helpText"];
-  /**  */
-  "prop:helpText"?: WRadioGroup["helpText"];
-  /**  */
-  "prop:optional"?: WRadioGroup["optional"];
-  /**  */
-  "prop:invalid"?: WRadioGroup["invalid"];
-  /**  */
-  "prop:name"?: WRadioGroup["name"];
-  /**  */
-  "prop:disabled"?: WRadioGroup["disabled"];
-  /**  */
-  "prop:required"?: WRadioGroup["required"];
-  /**  */
-  "prop:hasInteracted"?: WRadioGroup["hasInteracted"];
+If you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute. */
+  "help-text"?: WarpRadioGroup["helpText"];
+  /** Help text for the radio group.
+
+If you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute. */
+  helpText?: WarpRadioGroup["helpText"];
+  /** Whether to show optional text next to the label. */
+  optional?: WarpRadioGroup["optional"];
+  /** Marks the radio group as invalid. */
+  invalid?: WarpRadioGroup["invalid"];
+  /** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form. */
+  name?: WarpRadioGroup["name"];
+  /** Disables the radio group and all child radios. */
+  disabled?: WarpRadioGroup["disabled"];
+  /** Makes selecting a radio in the the group required. */
+  required?: WarpRadioGroup["required"];
+};
+
+export type WarpRadioGroupSolidJsProps = {
+  /** Label for the radio group. */
+  "prop:label"?: WarpRadioGroup["label"];
+  /** Help text for the radio group.
+
+If you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute. */
+  "attr:help-text"?: WarpRadioGroup["helpText"];
+  /** Help text for the radio group.
+
+If you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute. */
+  "prop:helpText"?: WarpRadioGroup["helpText"];
+  /** Whether to show optional text next to the label. */
+  "prop:optional"?: WarpRadioGroup["optional"];
+  /** Marks the radio group as invalid. */
+  "prop:invalid"?: WarpRadioGroup["invalid"];
+  /** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form. */
+  "prop:name"?: WarpRadioGroup["name"];
+  /** Disables the radio group and all child radios. */
+  "prop:disabled"?: WarpRadioGroup["disabled"];
+  /** Makes selecting a radio in the the group required. */
+  "prop:required"?: WarpRadioGroup["required"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1417,19 +1446,25 @@ export type WarpSelectProps = {
   autoFocus?: WarpSelect["autoFocus"];
   /** Whether the element should receive focus on render */
   autofocus?: WarpSelect["autofocus"];
-  /** The content displayed as the help text. Paired with `invalid` to show the text as a validation error. */
+  /** The content displayed as the help text.
+
+Paired with `invalid` to show the text as a validation error. */
   "help-text"?: WarpSelect["helpText"];
-  /** The content displayed as the help text. Paired with `invalid` to show the text as a validation error. */
+  /** The content displayed as the help text.
+
+Paired with `invalid` to show the text as a validation error. */
   helpText?: WarpSelect["helpText"];
-  /** Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error. */
+  /** Renders the field in an invalid state.
+
+Paired with `help-text` to provide feedback about the error. */
   invalid?: WarpSelect["invalid"];
   /** @deprecated Use `help-text` instead and only set it if you want to display the help text. - Whether to always show a hint. */
   always?: WarpSelect["always"];
   /** @deprecated Use `help-text` instead. - The content displayed as the help text. */
   hint?: WarpSelect["hint"];
-  /** The content to disply as the label */
+  /** The content to display as the label. */
   label?: WarpSelect["label"];
-  /** Whether to show optional text */
+  /** Whether to show the optional indicator after the label. */
   optional?: WarpSelect["optional"];
   /** Renders the field in a disabled state. */
   disabled?: WarpSelect["disabled"];
@@ -1439,9 +1474,9 @@ export type WarpSelectProps = {
   readOnly?: WarpSelect["readOnly"];
   /** Renders the field in a readonly state. */
   readonly?: WarpSelect["readonly"];
-  /**  */
+  /** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form. */
   name?: WarpSelect["name"];
-  /**  */
+  /** Lets you set the current value. */
   value?: WarpSelect["value"];
 
   /**  */
@@ -1455,19 +1490,25 @@ export type WarpSelectSolidJsProps = {
   "prop:autoFocus"?: WarpSelect["autoFocus"];
   /** Whether the element should receive focus on render */
   "prop:autofocus"?: WarpSelect["autofocus"];
-  /** The content displayed as the help text. Paired with `invalid` to show the text as a validation error. */
+  /** The content displayed as the help text.
+
+Paired with `invalid` to show the text as a validation error. */
   "attr:help-text"?: WarpSelect["helpText"];
-  /** The content displayed as the help text. Paired with `invalid` to show the text as a validation error. */
+  /** The content displayed as the help text.
+
+Paired with `invalid` to show the text as a validation error. */
   "prop:helpText"?: WarpSelect["helpText"];
-  /** Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error. */
+  /** Renders the field in an invalid state.
+
+Paired with `help-text` to provide feedback about the error. */
   "prop:invalid"?: WarpSelect["invalid"];
   /** @deprecated Use `help-text` instead and only set it if you want to display the help text. - Whether to always show a hint. */
   "prop:always"?: WarpSelect["always"];
   /** @deprecated Use `help-text` instead. - The content displayed as the help text. */
   "prop:hint"?: WarpSelect["hint"];
-  /** The content to disply as the label */
+  /** The content to display as the label. */
   "prop:label"?: WarpSelect["label"];
-  /** Whether to show optional text */
+  /** Whether to show the optional indicator after the label. */
   "prop:optional"?: WarpSelect["optional"];
   /** Renders the field in a disabled state. */
   "prop:disabled"?: WarpSelect["disabled"];
@@ -1477,9 +1518,9 @@ export type WarpSelectSolidJsProps = {
   "prop:readOnly"?: WarpSelect["readOnly"];
   /** Renders the field in a readonly state. */
   "prop:readonly"?: WarpSelect["readonly"];
-  /**  */
+  /** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form. */
   "prop:name"?: WarpSelect["name"];
-  /**  */
+  /** Lets you set the current value. */
   "prop:value"?: WarpSelect["value"];
   /**  */
   "on:change"?: (e: CustomEvent) => void;
@@ -2003,7 +2044,8 @@ export type CustomElements = {
   "w-link": Partial<WarpLinkProps & BaseProps<WarpLink> & BaseEvents>;
 
   /**
-   * Buttons are used to perform actions, widh different visuals for different needs.
+   * Performs an action or renders a link with button styling.
+   * Use button variants to match action priority, risk, and context.
    *
    * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
    *
@@ -2011,22 +2053,38 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `type`: undefined
-   * - `autofocus`: undefined
-   * - `variant`: undefined
-   * - `quiet`: undefined
-   * - `icon-only`/`iconOnly`: undefined
-   * - `small`: undefined
-   * - `loading`: undefined
-   * - `href`: undefined
-   * - `target`: undefined
-   * - `disabled`: undefined
-   * - `rel`: undefined
-   * - `full-width`/`fullWidth`: undefined
-   * - `button-class`/`buttonClass`: undefined
-   * - `name`: undefined
-   * - `value`: undefined
-   * - `ariaValueTextLoading`: undefined (property only)
+   * - `type`: Native button type.
+   * Controls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.
+   * - `autofocus`: Focuses the button when it is first rendered.
+   * Applies only when the component renders a native button. Link buttons with `href` do not autofocus through this component.
+   * - `variant`: Visual style of the button.
+   * Defaults to `secondary`. Use the variant that matches the action priority, risk, and placement.
+   * - `quiet`: Deprecated quiet visual treatment flag
+   * Use `variant="quiet"` instead.
+   * - `icon-only`/`iconOnly`: Marks the button as icon-only.
+   * Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name.
+   * - `small`: Renders the compact button size.
+   * Use this in dense layouts where the default button size is too large.
+   * - `loading`: Shows the loading state.
+   * Use after the user has triggered an action and the action is in progress.
+   * - `href`: URL for rendering the button as a link.
+   * When set, the component renders `w-link` instead of a native `button`.
+   * - `target`: Link browsing context.
+   * Passed to the rendered link when `href` is set.
+   * - `disabled`: Visually disables the button.
+   * Disabled buttons are discouraged because they can hide the reason an action is unavailable.
+   * - `rel`: Link relationship.
+   * Passed to the rendered link when `href` is set. If `target="_blank"` is set and `rel` is omitted, `noopener` is used.
+   * - `full-width`/`fullWidth`: Makes the button fill its parent width.
+   * Useful in narrow layouts where the button should span the available inline space.
+   * - `button-class`/`buttonClass`: Deprecated class applied to the internal control
+   * This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance.
+   * - `name`: Form control name.
+   * Used when the button participates in form handling.
+   * - `value`: Form control value.
+   * Used with `name` when the button participates in form handling. Resets to its initial value when the form is reset.
+   * - `commandfor`: The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
+   * - `command`: The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
    *
    * ## Methods
    *
@@ -2361,18 +2419,15 @@ export type CustomElements = {
   /**
    * Modals (or dialogs) display important information that users need to acknowledge.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `show`: undefined
+   * - `show`: Controls if the modal should show or hide.
+   *
+   * You can also call the `open()` and `close()` methods.
    * - `content-id`/`contentId`: undefined
-   * - `ignore-backdrop-clicks`/`ignoreBackdropClicks`: undefined
-   * - `dialogEl`: undefined (property only)
-   * - `dialogInnerEl`: undefined (property only)
-   * - `contentEl`: undefined (property only)
+   * - `ignore-backdrop-clicks`/`ignoreBackdropClicks`: Ignores clicks to the backdrop when set
    *
    * ## Events
    *
@@ -2395,39 +2450,26 @@ export type CustomElements = {
    *
    * - `open() => void`: undefined
    * - `close() => void`: undefined
-   * - `handleListeners(verb = 'addEventListener') => void`: undefined
-   * - `eventPreventer(evt: Event) => void`: undefined
-   * - `closeOnBackdropClick(evt: MouseEvent) => void`: undefined
-   * - `interceptEscape(evt: KeyboardEvent) => void`: undefined
-   * - `modifyBorderRadius() => void`: undefined
    */
-  "w-modal": Partial<ModalMainProps & BaseProps<ModalMain> & BaseEvents>;
+  "w-modal": Partial<WarpModalProps & BaseProps<WarpModal> & BaseEvents>;
 
   /**
    * The footer section of a modal, typically where you place actions.
-   *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
    */
   "w-modal-footer": Partial<
-    ModalFooterProps & BaseProps<ModalFooter> & BaseEvents
+    WarpModalFooterProps & BaseProps<WarpModalFooter> & BaseEvents
   >;
 
   /**
    * The header section of a modal, typically where you place the title and a close button.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `title`: undefined
-   * - `back`: undefined
-   * - `no-close`/`noClose`: undefined
-   * - `titleEl`: undefined (property only)
-   * - `titleClasses`: undefined (property only) (readonly)
-   * - `backButton`: undefined (property only) (readonly)
-   * - `closeButton`: undefined (property only) (readonly)
+   * - `title`: A short but descriptive title for the modal
+   * - `back`: Whether the modal header should have a back button
+   * - `no-close`/`noClose`: Lets you hide the close button in the header
    *
    * ## Events
    *
@@ -2440,28 +2482,22 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `top`: Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `emitBack() => void`: undefined
-   * - `handleTopSlotChange(slotEvent) => void`: undefined
    */
   "w-modal-header": Partial<
-    ModalHeaderProps & BaseProps<ModalHeader> & BaseEvents
+    WarpModalHeaderProps & BaseProps<WarpModalHeader> & BaseEvents
   >;
 
   /**
    * A page indicator component that displays a series of dots representing pages.
+   *
    * One dot is highlighted to indicate the currently selected page.
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `selected-page`/`selectedPage`: Currently selected page (1-based index, clamped to valid range)
-   * - `page-count`/`pageCount`: Total number of pages (minimum 1)
+   * - `selected-page`/`selectedPage`: Currently selected page (1-based index)
+   * - `page-count`/`pageCount`: Total number of pages
    */
   "w-page-indicator": Partial<
     WarpPageIndicatorProps & BaseProps<WarpPageIndicator> & BaseEvents
@@ -2470,22 +2506,22 @@ export type CustomElements = {
   /**
    * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `base-url`/`baseUrl`: undefined
-   * - `pages`: undefined
-   * - `current-page`/`currentPageNumber`: undefined
-   * - `visible-pages`/`visiblePages`: undefined
+   * - `base-url`/`baseUrl`: The base URL used to construct page links, for example `/search?page=`.
+   *
+   * The page number is appended to this URL.
+   * - `pages`: The total number of pages.
+   * - `current-page`/`currentPageNumber`: The currently active page number.
+   * - `visible-pages`/`visiblePages`: The maximum number of page numbers visible.
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `page-click`: Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
+   * - `page-click`: Triggered when a link in the pagination is clicked. Contains the page number in `string` form.
    */
   "w-pagination": Partial<
     WarpPaginationProps & BaseProps<WarpPagination> & BaseEvents
@@ -2494,27 +2530,23 @@ export type CustomElements = {
   /**
    * Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-pill--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `can-close`/`canClose`: undefined
-   * - `suggestion`: undefined
+   * - `can-close`/`canClose`: Whether the pill should be removable via a close button.
+   * - `suggestion`: Whether the pill should be rendered as a suggestion.
    * - `open-sr-label`/`openSrLabel`: undefined
-   * - `open-aria-label`/`openAriaLabel`: undefined
+   * - `open-aria-label`/`openAriaLabel`: Label read by screen readers when targeting the pill.
    * - `close-sr-label`/`closeSrLabel`: undefined
-   * - `close-aria-label`/`closeAriaLabel`: undefined
-   * - `openFilterSrText`: undefined (property only)
-   * - `removeFilterSrText`: undefined (property only)
+   * - `close-aria-label`/`closeAriaLabel`: Label read by screen readers when targeting the close button.
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `w-pill-click`: undefined
-   * - `w-pill-close`: undefined
+   * - `w-pill-click`: Fires when the pill itself is clicked.
+   * - `w-pill-close`: Fires when the pill's close button is clicked.
    */
   "w-pill": Partial<WarpPillProps & BaseProps<WarpPill> & BaseEvents>;
 
@@ -2531,39 +2563,27 @@ export type CustomElements = {
    * - `disabled`: Disables the radio.
    * - `required`: Makes the radio a required field.
    * - `invalid`: Draws the radio in an invalid state.
-   * - `tabIndex`: Override tabIndex setter to set _groupTabIndex (for backwards compatibility).
-   * Radio-group should use _groupTabIndex directly for clarity. (property only)
-   * - `validationMessage`: Returns the validation message if the radio is invalid, otherwise an empty string (property only) (readonly)
-   * - `validity`: Returns the validity state of the radio (property only) (readonly)
-   * - `_standaloneTabIndex`: Internal tabindex for standalone radios (not in a group).
-   * Non-reflecting to avoid DOM changes during hydration. (property only)
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `resetFormControl() => void`: undefined
-   * - `checkValidity() => boolean`: Checks whether the radio passes constraint validation
-   * - `reportValidity() => boolean`: Checks validity and shows the browser's validation message if invalid
    */
-  "w-radio": Partial<WRadioProps & BaseProps<WRadio> & BaseEvents>;
+  "w-radio": Partial<WarpRadioProps & BaseProps<WarpRadio> & BaseEvents>;
 
   /**
+   * Radios allow users to select a single option from a list of choices.
    *
+   * Use with `w-radio`.
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `label`: undefined
-   * - `help-text`/`helpText`: undefined
-   * - `optional`: undefined
-   * - `invalid`: undefined
-   * - `name`: undefined
-   * - `disabled`: undefined
-   * - `required`: undefined
-   * - `hasInteracted`: undefined (property only)
-   * - `validationTarget`: undefined (property only) (readonly)
+   * - `label`: Label for the radio group.
+   * - `help-text`/`helpText`: Help text for the radio group.
+   *
+   * If you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute.
+   * - `optional`: Whether to show optional text next to the label.
+   * - `invalid`: Marks the radio group as invalid.
+   * - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.
+   * - `disabled`: Disables the radio group and all child radios.
+   * - `required`: Makes selecting a radio in the the group required.
    *
    * ## Slots
    *
@@ -2571,57 +2591,41 @@ export type CustomElements = {
    *
    * - `label`: Alternative to the `label` attribute should you need custom HTML.
    * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `resetFormControl() => void`: undefined
-   * - `focus(options?: FocusOptions) => void`: undefined
-   * - `checkValidity() => void`: undefined
-   * - `reportValidity() => void`: undefined
    */
   "w-radio-group": Partial<
-    WRadioGroupProps & BaseProps<WRadioGroup> & BaseEvents
+    WarpRadioGroupProps & BaseProps<WarpRadioGroup> & BaseEvents
   >;
 
   /**
    * A dropdown component for selecting a single value.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `auto-focus`/`autoFocus`: Whether the element should receive focus on render.
    * - `autofocus`: Whether the element should receive focus on render
-   * - `help-text`/`helpText`: The content displayed as the help text. Paired with `invalid` to show the text as a validation error.
-   * - `invalid`: Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.
+   * - `help-text`/`helpText`: The content displayed as the help text.
+   *
+   * Paired with `invalid` to show the text as a validation error.
+   * - `invalid`: Renders the field in an invalid state.
+   *
+   * Paired with `help-text` to provide feedback about the error.
    * - `always`: Whether to always show a hint.
    * - `hint`: The content displayed as the help text.
-   * - `label`: The content to disply as the label
-   * - `optional`: Whether to show optional text
+   * - `label`: The content to display as the label.
+   * - `optional`: Whether to show the optional indicator after the label.
    * - `disabled`: Renders the field in a disabled state.
    * - `read-only`/`readOnly`: Renders the field in a readonly state.
    * - `readonly`: Renders the field in a readonly state.
-   * - `name`: undefined
-   * - `value`: undefined
+   * - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.
+   * - `value`: Lets you set the current value.
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
    * - `change`: undefined
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `resetFormControl() => void`: undefined
-   * - `formStateRestoreCallback(state: string | File | FormData | null, _reason: 'autocomplete' | 'restore') => void`: undefined
-   * - `handleKeyDown(event: KeyboardEvent) => void`: undefined
-   * - `onChange(event: Event) => void`: undefined
    */
   "w-select": Partial<WarpSelectProps & BaseProps<WarpSelect> & BaseEvents>;
 
@@ -3003,7 +3007,8 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * Buttons are used to perform actions, widh different visuals for different needs.
+   * Performs an action or renders a link with button styling.
+   * Use button variants to match action priority, risk, and context.
    *
    * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
    *
@@ -3011,22 +3016,38 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `type`: undefined
-   * - `autofocus`: undefined
-   * - `variant`: undefined
-   * - `quiet`: undefined
-   * - `icon-only`/`iconOnly`: undefined
-   * - `small`: undefined
-   * - `loading`: undefined
-   * - `href`: undefined
-   * - `target`: undefined
-   * - `disabled`: undefined
-   * - `rel`: undefined
-   * - `full-width`/`fullWidth`: undefined
-   * - `button-class`/`buttonClass`: undefined
-   * - `name`: undefined
-   * - `value`: undefined
-   * - `ariaValueTextLoading`: undefined (property only)
+   * - `type`: Native button type.
+   * Controls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.
+   * - `autofocus`: Focuses the button when it is first rendered.
+   * Applies only when the component renders a native button. Link buttons with `href` do not autofocus through this component.
+   * - `variant`: Visual style of the button.
+   * Defaults to `secondary`. Use the variant that matches the action priority, risk, and placement.
+   * - `quiet`: Deprecated quiet visual treatment flag
+   * Use `variant="quiet"` instead.
+   * - `icon-only`/`iconOnly`: Marks the button as icon-only.
+   * Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name.
+   * - `small`: Renders the compact button size.
+   * Use this in dense layouts where the default button size is too large.
+   * - `loading`: Shows the loading state.
+   * Use after the user has triggered an action and the action is in progress.
+   * - `href`: URL for rendering the button as a link.
+   * When set, the component renders `w-link` instead of a native `button`.
+   * - `target`: Link browsing context.
+   * Passed to the rendered link when `href` is set.
+   * - `disabled`: Visually disables the button.
+   * Disabled buttons are discouraged because they can hide the reason an action is unavailable.
+   * - `rel`: Link relationship.
+   * Passed to the rendered link when `href` is set. If `target="_blank"` is set and `rel` is omitted, `noopener` is used.
+   * - `full-width`/`fullWidth`: Makes the button fill its parent width.
+   * Useful in narrow layouts where the button should span the available inline space.
+   * - `button-class`/`buttonClass`: Deprecated class applied to the internal control
+   * This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance.
+   * - `name`: Form control name.
+   * Used when the button participates in form handling.
+   * - `value`: Form control value.
+   * Used with `name` when the button participates in form handling. Resets to its initial value when the form is reset.
+   * - `commandfor`: The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
+   * - `command`: The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
    *
    * ## Methods
    *
@@ -3392,18 +3413,15 @@ export type CustomElementsSolidJs = {
   /**
    * Modals (or dialogs) display important information that users need to acknowledge.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `show`: undefined
+   * - `show`: Controls if the modal should show or hide.
+   *
+   * You can also call the `open()` and `close()` methods.
    * - `content-id`/`contentId`: undefined
-   * - `ignore-backdrop-clicks`/`ignoreBackdropClicks`: undefined
-   * - `dialogEl`: undefined (property only)
-   * - `dialogInnerEl`: undefined (property only)
-   * - `contentEl`: undefined (property only)
+   * - `ignore-backdrop-clicks`/`ignoreBackdropClicks`: Ignores clicks to the backdrop when set
    *
    * ## Events
    *
@@ -3426,44 +3444,31 @@ export type CustomElementsSolidJs = {
    *
    * - `open() => void`: undefined
    * - `close() => void`: undefined
-   * - `handleListeners(verb = 'addEventListener') => void`: undefined
-   * - `eventPreventer(evt: Event) => void`: undefined
-   * - `closeOnBackdropClick(evt: MouseEvent) => void`: undefined
-   * - `interceptEscape(evt: KeyboardEvent) => void`: undefined
-   * - `modifyBorderRadius() => void`: undefined
    */
   "w-modal": Partial<
-    ModalMainProps & ModalMainSolidJsProps & BaseProps<ModalMain> & BaseEvents
+    WarpModalProps & WarpModalSolidJsProps & BaseProps<WarpModal> & BaseEvents
   >;
 
   /**
    * The footer section of a modal, typically where you place actions.
-   *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
    */
   "w-modal-footer": Partial<
-    ModalFooterProps &
-      ModalFooterSolidJsProps &
-      BaseProps<ModalFooter> &
+    WarpModalFooterProps &
+      WarpModalFooterSolidJsProps &
+      BaseProps<WarpModalFooter> &
       BaseEvents
   >;
 
   /**
    * The header section of a modal, typically where you place the title and a close button.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `title`: undefined
-   * - `back`: undefined
-   * - `no-close`/`noClose`: undefined
-   * - `titleEl`: undefined (property only)
-   * - `titleClasses`: undefined (property only) (readonly)
-   * - `backButton`: undefined (property only) (readonly)
-   * - `closeButton`: undefined (property only) (readonly)
+   * - `title`: A short but descriptive title for the modal
+   * - `back`: Whether the modal header should have a back button
+   * - `no-close`/`noClose`: Lets you hide the close button in the header
    *
    * ## Events
    *
@@ -3476,31 +3481,25 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `top`: Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `emitBack() => void`: undefined
-   * - `handleTopSlotChange(slotEvent) => void`: undefined
    */
   "w-modal-header": Partial<
-    ModalHeaderProps &
-      ModalHeaderSolidJsProps &
-      BaseProps<ModalHeader> &
+    WarpModalHeaderProps &
+      WarpModalHeaderSolidJsProps &
+      BaseProps<WarpModalHeader> &
       BaseEvents
   >;
 
   /**
    * A page indicator component that displays a series of dots representing pages.
+   *
    * One dot is highlighted to indicate the currently selected page.
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `selected-page`/`selectedPage`: Currently selected page (1-based index, clamped to valid range)
-   * - `page-count`/`pageCount`: Total number of pages (minimum 1)
+   * - `selected-page`/`selectedPage`: Currently selected page (1-based index)
+   * - `page-count`/`pageCount`: Total number of pages
    */
   "w-page-indicator": Partial<
     WarpPageIndicatorProps &
@@ -3512,22 +3511,22 @@ export type CustomElementsSolidJs = {
   /**
    * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `base-url`/`baseUrl`: undefined
-   * - `pages`: undefined
-   * - `current-page`/`currentPageNumber`: undefined
-   * - `visible-pages`/`visiblePages`: undefined
+   * - `base-url`/`baseUrl`: The base URL used to construct page links, for example `/search?page=`.
+   *
+   * The page number is appended to this URL.
+   * - `pages`: The total number of pages.
+   * - `current-page`/`currentPageNumber`: The currently active page number.
+   * - `visible-pages`/`visiblePages`: The maximum number of page numbers visible.
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `page-click`: Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
+   * - `page-click`: Triggered when a link in the pagination is clicked. Contains the page number in `string` form.
    */
   "w-pagination": Partial<
     WarpPaginationProps &
@@ -3539,27 +3538,23 @@ export type CustomElementsSolidJs = {
   /**
    * Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-pill--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `can-close`/`canClose`: undefined
-   * - `suggestion`: undefined
+   * - `can-close`/`canClose`: Whether the pill should be removable via a close button.
+   * - `suggestion`: Whether the pill should be rendered as a suggestion.
    * - `open-sr-label`/`openSrLabel`: undefined
-   * - `open-aria-label`/`openAriaLabel`: undefined
+   * - `open-aria-label`/`openAriaLabel`: Label read by screen readers when targeting the pill.
    * - `close-sr-label`/`closeSrLabel`: undefined
-   * - `close-aria-label`/`closeAriaLabel`: undefined
-   * - `openFilterSrText`: undefined (property only)
-   * - `removeFilterSrText`: undefined (property only)
+   * - `close-aria-label`/`closeAriaLabel`: Label read by screen readers when targeting the close button.
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `w-pill-click`: undefined
-   * - `w-pill-close`: undefined
+   * - `w-pill-click`: Fires when the pill itself is clicked.
+   * - `w-pill-close`: Fires when the pill's close button is clicked.
    */
   "w-pill": Partial<
     WarpPillProps & WarpPillSolidJsProps & BaseProps<WarpPill> & BaseEvents
@@ -3578,41 +3573,29 @@ export type CustomElementsSolidJs = {
    * - `disabled`: Disables the radio.
    * - `required`: Makes the radio a required field.
    * - `invalid`: Draws the radio in an invalid state.
-   * - `tabIndex`: Override tabIndex setter to set _groupTabIndex (for backwards compatibility).
-   * Radio-group should use _groupTabIndex directly for clarity. (property only)
-   * - `validationMessage`: Returns the validation message if the radio is invalid, otherwise an empty string (property only) (readonly)
-   * - `validity`: Returns the validity state of the radio (property only) (readonly)
-   * - `_standaloneTabIndex`: Internal tabindex for standalone radios (not in a group).
-   * Non-reflecting to avoid DOM changes during hydration. (property only)
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `resetFormControl() => void`: undefined
-   * - `checkValidity() => boolean`: Checks whether the radio passes constraint validation
-   * - `reportValidity() => boolean`: Checks validity and shows the browser's validation message if invalid
    */
   "w-radio": Partial<
-    WRadioProps & WRadioSolidJsProps & BaseProps<WRadio> & BaseEvents
+    WarpRadioProps & WarpRadioSolidJsProps & BaseProps<WarpRadio> & BaseEvents
   >;
 
   /**
+   * Radios allow users to select a single option from a list of choices.
    *
+   * Use with `w-radio`.
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `label`: undefined
-   * - `help-text`/`helpText`: undefined
-   * - `optional`: undefined
-   * - `invalid`: undefined
-   * - `name`: undefined
-   * - `disabled`: undefined
-   * - `required`: undefined
-   * - `hasInteracted`: undefined (property only)
-   * - `validationTarget`: undefined (property only) (readonly)
+   * - `label`: Label for the radio group.
+   * - `help-text`/`helpText`: Help text for the radio group.
+   *
+   * If you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute.
+   * - `optional`: Whether to show optional text next to the label.
+   * - `invalid`: Marks the radio group as invalid.
+   * - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.
+   * - `disabled`: Disables the radio group and all child radios.
+   * - `required`: Makes selecting a radio in the the group required.
    *
    * ## Slots
    *
@@ -3620,60 +3603,44 @@ export type CustomElementsSolidJs = {
    *
    * - `label`: Alternative to the `label` attribute should you need custom HTML.
    * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `resetFormControl() => void`: undefined
-   * - `focus(options?: FocusOptions) => void`: undefined
-   * - `checkValidity() => void`: undefined
-   * - `reportValidity() => void`: undefined
    */
   "w-radio-group": Partial<
-    WRadioGroupProps &
-      WRadioGroupSolidJsProps &
-      BaseProps<WRadioGroup> &
+    WarpRadioGroupProps &
+      WarpRadioGroupSolidJsProps &
+      BaseProps<WarpRadioGroup> &
       BaseEvents
   >;
 
   /**
    * A dropdown component for selecting a single value.
    *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)
-   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `auto-focus`/`autoFocus`: Whether the element should receive focus on render.
    * - `autofocus`: Whether the element should receive focus on render
-   * - `help-text`/`helpText`: The content displayed as the help text. Paired with `invalid` to show the text as a validation error.
-   * - `invalid`: Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.
+   * - `help-text`/`helpText`: The content displayed as the help text.
+   *
+   * Paired with `invalid` to show the text as a validation error.
+   * - `invalid`: Renders the field in an invalid state.
+   *
+   * Paired with `help-text` to provide feedback about the error.
    * - `always`: Whether to always show a hint.
    * - `hint`: The content displayed as the help text.
-   * - `label`: The content to disply as the label
-   * - `optional`: Whether to show optional text
+   * - `label`: The content to display as the label.
+   * - `optional`: Whether to show the optional indicator after the label.
    * - `disabled`: Renders the field in a disabled state.
    * - `read-only`/`readOnly`: Renders the field in a readonly state.
    * - `readonly`: Renders the field in a readonly state.
-   * - `name`: undefined
-   * - `value`: undefined
+   * - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.
+   * - `value`: Lets you set the current value.
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
    * - `change`: undefined
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `resetFormControl() => void`: undefined
-   * - `formStateRestoreCallback(state: string | File | FormData | null, _reason: 'autocomplete' | 'restore') => void`: undefined
-   * - `handleKeyDown(event: KeyboardEvent) => void`: undefined
-   * - `onChange(event: Event) => void`: undefined
    */
   "w-select": Partial<
     WarpSelectProps &