@warp-ds/elements 2.9.2-next.1 → 2.10.0-next.2

package/dist/index.d.ts

@@ -14,9 +14,15 @@ 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";
@@ -384,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;
@@ -677,22 +723,34 @@ Defaults to the localized "You are here" label. Set `aria-label` when the defaul
 };
 
 export type WarpCardProps = {
-  /**  */
+  /** Whether the card is visually selected.
+
+Use this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes. */
   selected?: WarpCard["selected"];
-  /**  */
+  /** Whether the card uses the flat visual treatment.
+
+Flat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface. */
   flat?: WarpCard["flat"];
-  /**  */
+  /** Whether the whole card is interactive.
+
+When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice. */
   clickable?: WarpCard["clickable"];
   /**  */
   buttonText?: WarpCard["buttonText"];
 };
 
 export type WarpCardSolidJsProps = {
-  /**  */
+  /** Whether the card is visually selected.
+
+Use this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes. */
   "prop:selected"?: WarpCard["selected"];
-  /**  */
+  /** Whether the card uses the flat visual treatment.
+
+Flat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface. */
   "prop:flat"?: WarpCard["flat"];
-  /**  */
+  /** Whether the whole card is interactive.
+
+When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice. */
   "prop:clickable"?: WarpCard["clickable"];
   /**  */
   "prop:buttonText"?: WarpCard["buttonText"];
@@ -1079,23 +1137,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;
@@ -1103,23 +1157,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;
   /**  */
@@ -1131,42 +1181,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;
 
@@ -1177,24 +1223,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 */
@@ -1204,41 +1250,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 */
@@ -1248,69 +1302,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 */
@@ -2010,7 +2056,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)
    *
@@ -2018,22 +2065,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
    *
@@ -2168,9 +2231,15 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `selected`: undefined
-   * - `flat`: undefined
-   * - `clickable`: undefined
+   * - `selected`: Whether the card is visually selected.
+   *
+   * Use this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes.
+   * - `flat`: Whether the card uses the flat visual treatment.
+   *
+   * Flat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface.
+   * - `clickable`: Whether the whole card is interactive.
+   *
+   * When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.
    * - `buttonText`: undefined (property only)
    *
    * ## Methods
@@ -2368,18 +2437,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
    *
@@ -2402,39 +2468,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
    *
@@ -2447,28 +2500,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
@@ -2477,22 +2524,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
@@ -2501,27 +2548,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>;
 
@@ -2982,7 +3025,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)
    *
@@ -2990,22 +3034,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
    *
@@ -3155,9 +3215,15 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `selected`: undefined
-   * - `flat`: undefined
-   * - `clickable`: undefined
+   * - `selected`: Whether the card is visually selected.
+   *
+   * Use this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes.
+   * - `flat`: Whether the card uses the flat visual treatment.
+   *
+   * Flat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface.
+   * - `clickable`: Whether the whole card is interactive.
+   *
+   * When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.
    * - `buttonText`: undefined (property only)
    *
    * ## Methods
@@ -3371,18 +3437,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
    *
@@ -3405,44 +3468,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
    *
@@ -3455,31 +3505,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 &
@@ -3491,22 +3535,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 &
@@ -3518,27 +3562,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