@warp-ds/elements 2.2.0-next.17 → 2.2.0-next.19

package/dist/index.d.ts

@@ -1,110 +1,1826 @@
-import { WarpAffix } from './packages/affix/index';
-import { WarpAlert } from './packages/alert/index';
-import { WarpAttention } from './packages/attention/index';
-import { WarpBadge } from './packages/badge/index';
-import { WarpBox } from './packages/box/index';
-import { WarpBreadcrumbs } from './packages/breadcrumbs/index';
-import { WarpButton } from './packages/button/index';
-import { WarpCard } from './packages/card/index';
-import { WarpCombobox } from './packages/combobox/index';
-import { WarpDatepicker } from './packages/datepicker/datepicker';
-import { WarpDeadToggle } from './packages/dead-toggle/index';
-import { WarpExpandable } from './packages/expandable/index';
-import { WarpLink } from './packages/link/index';
-import { ModalFooter } from './packages/modal/modal-footer';
-import { ModalHeader } from './packages/modal/modal-header';
-import { ModalMain } from './packages/modal/modal-main';
-import { WarpPageIndicator } from './packages/pageindicator/index';
-import { WarpPagination } from './packages/pagination/index';
-import { WarpPill } from './packages/pill/index';
-import { WCheckbox } from './packages/rip-and-tear-checkbox/checkbox';
-import { WRadio } from './packages/rip-and-tear-radio/radio';
-import { WRadioGroup } from './packages/rip-and-tear-radio/radio-group';
-import { WarpSelect } from './packages/select/index';
-import { WarpSlider } from './packages/slider/slider';
-import { WarpSliderThumb } from './packages/slider/slider-thumb';
-import { WarpSteps, WarpStep } from './packages/steps/index';
-import { WarpSwitch } from './packages/switch/index';
-import { WarpTab, WarpTabs, WarpTabPanel } from './packages/tabs/index';
-import { WarpTextField } from './packages/textfield/index';
-import { WarpToastContainer, WarpToast } from './packages/toast/index';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'w-badge': WarpBadge;
-    'w-affix': WarpAffix;
-    'w-alert': WarpAlert;
-    'w-attention': WarpAttention;
-    'w-box': WarpBox;
-    'w-breadcrumbs': WarpBreadcrumbs;
-    'w-button': WarpButton;
-    'w-card': WarpCard;
-    'w-combobox': WarpCombobox;
-    'w-datepicker': WarpDatepicker;
-    'w-dead-toggle': WarpDeadToggle;
-    'w-expandable': WarpExpandable;
-    'w-link': WarpLink;
-    'w-modal': ModalMain;
-    'w-modal-header': ModalHeader;
-    'w-modal-footer': ModalFooter;
-    'w-pageindicator': WarpPageIndicator;
-    'w-pagination': WarpPagination;
-    'w-pill': WarpPill;
-    'w-checkbox': WCheckbox;
-    'w-radio': WRadio;
-    'w-radio-group': WRadioGroup;
-    'w-select': WarpSelect;
-    'w-slider': WarpSlider;
-    'w-slider-thumb': WarpSliderThumb;
-    'w-steps': WarpSteps;
-    'w-step': WarpStep;
-    'w-switch': WarpSwitch;
-    'w-tab': WarpTab;
-    'w-tabs': WarpTabs;
-    'w-tab-panel': WarpTabPanel;
-    'w-textfield': WarpTextField;
-    'w-toast-container': WarpToastContainer;
-    'w-toast': WarpToast;
+import type { ccSuffix, ccPrefix, WarpAffix } from "./packages/affix/index.ts";
+import type { ccAttention, WarpAttention } from "./packages/attention/index.ts";
+import type { WarpAlert } from "./packages/alert/index.ts";
+import type { WarpBadge } from "./packages/badge/index.ts";
+import type { WarpBox } from "./packages/box/index.ts";
+import type { ccBreadcrumbs, WarpBreadcrumbs } from "./packages/breadcrumbs/index.ts";
+import type { WarpLink } from "./packages/link/index.ts";
+import type { ccButton, WarpButton } from "./packages/button/index.ts";
+import type { ccCard, WarpCard } from "./packages/card/index.ts";
+import type { ccCombobox, WarpCombobox } from "./packages/combobox/index.ts";
+import type { WarpDatepicker } from "./packages/datepicker/datepicker.ts";
+import type { WarpDeadToggle } from "./packages/dead-toggle/index.ts";
+import type { ccBox, ccExpandable, WarpExpandable } from "./packages/expandable/index.ts";
+import type { ModalFooter } from "./packages/modal/modal-footer.ts";
+import type { ModalHeader } from "./packages/modal/modal-header.ts";
+import type { ModalMain } from "./packages/modal/modal-main.ts";
+import type { WarpPageIndicator } from "./packages/pageindicator/index.ts";
+import type { WarpPagination } from "./packages/pagination/index.ts";
+import type { pillStyles, WarpPill } from "./packages/pill/index.ts";
+import type { WCheckbox } from "./packages/rip-and-tear-checkbox/checkbox.ts";
+import type { WRadio } from "./packages/rip-and-tear-radio/radio.ts";
+import type { WRadioGroup } from "./packages/rip-and-tear-radio/radio-group.ts";
+import type { ccSelect, ccLabel, ccHelpText, WarpSelect } from "./packages/select/index.ts";
+import type { ccinput, WarpTextField } from "./packages/textfield/index.ts";
+import type { WarpSliderThumb } from "./packages/slider/slider-thumb.ts";
+import type { WarpSlider } from "./packages/slider/slider.ts";
+import type { WarpSteps, WarpStep } from "./packages/steps/index.ts";
+import type { WarpSwitch } from "./packages/switch/index.ts";
+import type { WarpTabs } from "./packages/tabs/tabs.ts";
+import type { WarpTab } from "./packages/tabs/tab.ts";
+import type { WarpTabPanel } from "./packages/tabs/tab-panel.ts";
+
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
+ *
+ * declare module "my-library" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'test-', ''> {}
+ *   }
+ * }
+ * ```
+ *
+ * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
+ */
+export type ScopedElements<
+  Prefix extends string = "",
+  Suffix extends string = ""
+> = {
+  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
+};
+
+type BaseProps<T extends HTMLElement> = {
+
+  /** Content added between the opening and closing tags of the element */
+  children?: any;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  className?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** For <label> and <output>, lets you associate the label with some control. */
+  htmlFor?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Keys tell React which array item each component corresponds to */
+  key?: string | number;
+  /** Specifies the language of the element. */
+  lang?: string;
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: T | ((e: T) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: Record<string, string | number>;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+  /** The popover global attribute is used to designate an element as a popover element. */
+  popover?: "auto" | "hint" | "manual";
+  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
+  popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
+  /** Specifies the action to be performed on a popover element being controlled by a control element. */
+  popovertargetaction?: "show" | "hide" | "toggle";
+
+} ;
+
+type BaseEvents = {
+
+
+};
+
+
+
+export type WarpAffixProps = {
+  /**  */
+  "aria-label"?: WarpAffix['ariaLabel'];
+  /**  */
+  "ariaLabel"?: WarpAffix['ariaLabel'];
+  /** Add this property to render a clickable Warp close icon.
+
+Set an `aria-label` that explains the action when using this. */
+  "clear"?: WarpAffix['clear'];
+  /** Add this property to render a clickable Warp search icon.
+
+Set an `aria-label` that explains the action when using this. */
+  "search"?: WarpAffix['search'];
+  /**  */
+  "label"?: WarpAffix['label'];
+
+
+}
+
+
+export type WarpAttentionProps = {
+  /**  */
+  "show"?: WarpAttention['show'];
+  /**  */
+  "placement"?: WarpAttention['placement'];
+  /**  */
+  "tooltip"?: WarpAttention['tooltip'];
+  /**  */
+  "callout"?: WarpAttention['callout'];
+  /**  */
+  "popover"?: WarpAttention['popover'];
+  /**  */
+  "highlight"?: WarpAttention['highlight'];
+  /**  */
+  "can-close"?: WarpAttention['canClose'];
+  /**  */
+  "canClose"?: WarpAttention['canClose'];
+  /**  */
+  "no-arrow"?: WarpAttention['noArrow'];
+  /**  */
+  "noArrow"?: WarpAttention['noArrow'];
+  /**  */
+  "distance"?: WarpAttention['distance'];
+  /**  */
+  "skidding"?: WarpAttention['skidding'];
+  /**  */
+  "flip"?: WarpAttention['flip'];
+  /**  */
+  "cross-axis"?: WarpAttention['crossAxis'];
+  /**  */
+  "crossAxis"?: WarpAttention['crossAxis'];
+  /**  */
+  "fallback-placements"?: WarpAttention['fallbackPlacements'];
+  /**  */
+  "fallbackPlacements"?: WarpAttention['fallbackPlacements'];
+  /**  */
+  "_initialPlacement"?: WarpAttention['_initialPlacement'];
+  /**  */
+  "_actualDirection"?: WarpAttention['_actualDirection'];
+
+
+}
+
+
+export type WarpAlertProps = {
+  /**  */
+  "variant"?: WarpAlert['variant'];
+  /**  */
+  "show"?: WarpAlert['show'];
+  /**  */
+  "role"?: WarpAlert['role'];
+
+
+}
+
+
+export type WarpBadgeProps = {
+  /**  */
+  "variant"?: WarpBadge['variant'];
+  /**  */
+  "position"?: WarpBadge['position'];
+
+
+}
+
+
+export type WarpBoxProps = {
+  /**  */
+  "bleed"?: WarpBox['bleed'];
+  /**  */
+  "bordered"?: WarpBox['bordered'];
+  /**  */
+  "info"?: WarpBox['info'];
+  /**  */
+  "neutral"?: WarpBox['neutral'];
+  /**  */
+  "role"?: WarpBox['role'];
+
+
+}
+
+
+export type WarpBreadcrumbsProps = {
+  /**  */
+  "aria-label"?: WarpBreadcrumbs['ariaLabel'];
+  /**  */
+  "ariaLabel"?: WarpBreadcrumbs['ariaLabel'];
+
+
+}
+
+
+export type WarpLinkProps = {
+  /**  */
+  "autofocus"?: WarpLink['autofocus'];
+  /**  */
+  "variant"?: WarpLink['variant'];
+  /**  */
+  "quiet"?: WarpLink['quiet'];
+  /**  */
+  "small"?: WarpLink['small'];
+  /**  */
+  "href"?: WarpLink['href'];
+  /**  */
+  "disabled"?: WarpLink['disabled'];
+  /**  */
+  "target"?: WarpLink['target'];
+  /**  */
+  "rel"?: WarpLink['rel'];
+  /**  */
+  "full-width"?: WarpLink['fullWidth'];
+  /**  */
+  "fullWidth"?: WarpLink['fullWidth'];
+  /**  */
+  "button-class"?: WarpLink['buttonClass'];
+  /**  */
+  "buttonClass"?: WarpLink['buttonClass'];
+  /**  */
+  "name"?: WarpLink['name'];
+  /**  */
+  "classes"?: WarpLink['classes'];
+
+
+}
+
+
+export type WarpButtonProps = {
+  /**  */
+  "type"?: WarpButton['type'];
+  /**  */
+  "autofocus"?: WarpButton['autofocus'];
+  /**  */
+  "variant"?: WarpButton['variant'];
+  /**  */
+  "quiet"?: WarpButton['quiet'];
+  /**  */
+  "small"?: WarpButton['small'];
+  /**  */
+  "loading"?: WarpButton['loading'];
+  /**  */
+  "href"?: WarpButton['href'];
+  /**  */
+  "target"?: WarpButton['target'];
+  /**  */
+  "rel"?: WarpButton['rel'];
+  /**  */
+  "full-width"?: WarpButton['fullWidth'];
+  /**  */
+  "fullWidth"?: WarpButton['fullWidth'];
+  /**  */
+  "button-class"?: WarpButton['buttonClass'];
+  /**  */
+  "buttonClass"?: WarpButton['buttonClass'];
+  /**  */
+  "name"?: WarpButton['name'];
+  /**  */
+  "value"?: WarpButton['value'];
+  /**  */
+  "ariaValueTextLoading"?: WarpButton['ariaValueTextLoading'];
+
+
+}
+
+
+export type WarpCardProps = {
+  /**  */
+  "selected"?: WarpCard['selected'];
+  /**  */
+  "flat"?: WarpCard['flat'];
+  /**  */
+  "clickable"?: WarpCard['clickable'];
+  /**  */
+  "buttonText"?: WarpCard['buttonText'];
+
+
+}
+
+
+export type WarpComboboxProps = {
+  /** The available options to select from */
+  "options"?: WarpCombobox['options'];
+  /** Label above input */
+  "label"?: WarpCombobox['label'];
+  /** Input placeholder */
+  "placeholder"?: WarpCombobox['placeholder'];
+  /** The input value */
+  "value"?: WarpCombobox['value'];
+  /** Whether the popover opens when focus is on the text field */
+  "open-on-focus"?: WarpCombobox['openOnFocus'];
+  /** Whether the popover opens when focus is on the text field */
+  "openOnFocus"?: WarpCombobox['openOnFocus'];
+  /** Select active option on blur */
+  "select-on-blur"?: WarpCombobox['selectOnBlur'];
+  /** Select active option on blur */
+  "selectOnBlur"?: WarpCombobox['selectOnBlur'];
+  /** Whether the matching text segments in the options should be highlighted */
+  "match-text-segments"?: WarpCombobox['matchTextSegments'];
+  /** Whether the matching text segments in the options should be highlighted */
+  "matchTextSegments"?: WarpCombobox['matchTextSegments'];
+  /** Disable client-side static filtering */
+  "disable-static-filtering"?: WarpCombobox['disableStaticFiltering'];
+  /** Disable client-side static filtering */
+  "disableStaticFiltering"?: WarpCombobox['disableStaticFiltering'];
+  /** Renders the input field in an invalid state */
+  "invalid"?: WarpCombobox['invalid'];
+  /** The content to display as the help text */
+  "help-text"?: WarpCombobox['helpText'];
+  /** The content to display as the help text */
+  "helpText"?: WarpCombobox['helpText'];
+  /** Whether the element is disabled */
+  "disabled"?: WarpCombobox['disabled'];
+  /** Whether the element is required */
+  "required"?: WarpCombobox['required'];
+  /** Whether to show optional text */
+  "optional"?: WarpCombobox['optional'];
+  /** Additional container styling */
+  "class-name"?: WarpCombobox['containerClassName'];
+  /** Additional container styling */
+  "containerClassName"?: WarpCombobox['containerClassName'];
+  /** Additional list styling */
+  "list-class-name"?: WarpCombobox['listClassName'];
+  /** Additional list styling */
+  "listClassName"?: WarpCombobox['listClassName'];
+  /** Name attribute for form submission */
+  "name"?: WarpCombobox['name'];
+
+
+}
+
+
+export type WarpDatepickerProps = {
+  /**  */
+  "label"?: WarpDatepicker['label'];
+  /** Takes precedence over the `<html>` lang attribute. */
+  "lang"?: WarpDatepicker['lang'];
+  /**  */
+  "name"?: WarpDatepicker['name'];
+  /**  */
+  "value"?: WarpDatepicker['value'];
+  /** Decides the format of the date as shown in the calendar header.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "header-format"?: WarpDatepicker['headerFormat'];
+  /** Decides the format of the date as shown in the calendar header.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "headerFormat"?: WarpDatepicker['headerFormat'];
+  /** Decides the format of the weekday as shown above the grid of dates in the calendar.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "weekday-format"?: WarpDatepicker['weekdayFormat'];
+  /** Decides the format of the weekday as shown above the grid of dates in the calendar.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "weekdayFormat"?: WarpDatepicker['weekdayFormat'];
+  /** Decides the format of the day in the calendar as read to screen readers.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "day-format"?: WarpDatepicker['dayFormat'];
+  /** Decides the format of the day in the calendar as read to screen readers.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "dayFormat"?: WarpDatepicker['dayFormat'];
+  /** Lets you control if a date in the calendar should be disabled.
+
+This needs to be set on the element instance in JavaScript, not as an HTML attribute. */
+  "isDayDisabled"?: WarpDatepicker['isDayDisabled'];
+  /**  */
+  "isCalendarOpen"?: WarpDatepicker['isCalendarOpen'];
+  /**  */
+  "navigationDate"?: WarpDatepicker['navigationDate'];
+  /**  */
+  "calendar"?: WarpDatepicker['calendar'];
+  /**  */
+  "input"?: WarpDatepicker['input'];
+  /**  */
+  "toggleButton"?: WarpDatepicker['toggleButton'];
+  /**  */
+  "wrapper"?: WarpDatepicker['wrapper'];
+  /** This is the first focusable element, needed for the modal focus trap.
+
+Don't cache this and other `@query` fields from inside the calendar modal.
+They work the first time, but once the calendar is closed and reopened
+the query will point to an element that doesn't exist anymore. */
+  "previousMonthButton"?: WarpDatepicker['previousMonthButton'];
+  /**  */
+  "todayCell"?: WarpDatepicker['todayCell'];
+  /**  */
+  "selectedCell"?: WarpDatepicker['selectedCell'];
+
+
+}
+
+
+export type WarpDeadToggleProps = {
+  /**  */
+  "type"?: WarpDeadToggle['type'];
+  /**  */
+  "checked"?: WarpDeadToggle['checked'];
+  /**  */
+  "indeterminate"?: WarpDeadToggle['indeterminate'];
+  /**  */
+  "invalid"?: WarpDeadToggle['invalid'];
+
+
+}
+
+
+export type WarpExpandableProps = {
+  /**  */
+  "expanded"?: WarpExpandable['expanded'];
+  /**  */
+  "title"?: WarpExpandable['title'];
+  /**  */
+  "box"?: WarpExpandable['box'];
+  /**  */
+  "bleed"?: WarpExpandable['bleed'];
+  /**  */
+  "button-class"?: WarpExpandable['buttonClass'];
+  /**  */
+  "buttonClass"?: WarpExpandable['buttonClass'];
+  /**  */
+  "content-class"?: WarpExpandable['contentClass'];
+  /**  */
+  "contentClass"?: WarpExpandable['contentClass'];
+  /**  */
+  "no-chevron"?: WarpExpandable['noChevron'];
+  /**  */
+  "noChevron"?: WarpExpandable['noChevron'];
+  /**  */
+  "animated"?: WarpExpandable['animated'];
+  /**  */
+  "heading-level"?: WarpExpandable['headingLevel'];
+  /**  */
+  "headingLevel"?: WarpExpandable['headingLevel'];
+  /**  */
+  "_hasTitle"?: WarpExpandable['_hasTitle'];
+  /**  */
+  "_showChevronUp"?: WarpExpandable['_showChevronUp'];
+
+
+}
+
+
+export type ModalFooterProps = {
+
+
+}
+
+
+export type ModalHeaderProps = {
+  /**  */
+  "title"?: ModalHeader['title'];
+  /**  */
+  "back"?: ModalHeader['back'];
+  /**  */
+  "no-close"?: ModalHeader['noClose'];
+  /**  */
+  "noClose"?: ModalHeader['noClose'];
+  /**  */
+  "titleEl"?: ModalHeader['titleEl'];
+
+  /**  */
+  "onbackClicked"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type ModalMainProps = {
+  /**  */
+  "show"?: ModalMain['show'];
+  /**  */
+  "content-id"?: ModalMain['contentId'];
+  /**  */
+  "contentId"?: ModalMain['contentId'];
+  /**  */
+  "ignore-backdrop-clicks"?: ModalMain['ignoreBackdropClicks'];
+  /**  */
+  "ignoreBackdropClicks"?: ModalMain['ignoreBackdropClicks'];
+  /**  */
+  "dialogEl"?: ModalMain['dialogEl'];
+  /**  */
+  "dialogInnerEl"?: ModalMain['dialogInnerEl'];
+  /**  */
+  "contentEl"?: ModalMain['contentEl'];
+
+  /**  */
+  "onshown"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onhidden"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type WarpPageIndicatorProps = {
+  /** Currently selected page (1-based index) */
+  "selected-page"?: WarpPageIndicator['selectedPage'];
+  /** Currently selected page (1-based index) */
+  "selectedPage"?: WarpPageIndicator['selectedPage'];
+  /** Total number of pages */
+  "page-count"?: WarpPageIndicator['pageCount'];
+  /** Total number of pages */
+  "pageCount"?: WarpPageIndicator['pageCount'];
+
+
+}
+
+
+export type WarpPaginationProps = {
+  /**  */
+  "base-url"?: WarpPagination['baseUrl'];
+  /**  */
+  "baseUrl"?: WarpPagination['baseUrl'];
+  /**  */
+  "pages"?: WarpPagination['pages'];
+  /**  */
+  "current-page"?: WarpPagination['currentPageNumber'];
+  /**  */
+  "currentPageNumber"?: WarpPagination['currentPageNumber'];
+  /**  */
+  "visible-pages"?: WarpPagination['visiblePages'];
+  /**  */
+  "visiblePages"?: WarpPagination['visiblePages'];
+
+  /** Triggered when a link button in the pagination is clicked. Contains the page number in `string` form. */
+  "onpage-click"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type WarpPillProps = {
+  /**  */
+  "can-close"?: WarpPill['canClose'];
+  /**  */
+  "canClose"?: WarpPill['canClose'];
+  /**  */
+  "suggestion"?: WarpPill['suggestion'];
+  /** @deprecated Used "open-arial-label" instead.  */
+  "open-sr-label"?: WarpPill['openSrLabel'];
+  /** @deprecated Used "open-arial-label" instead.  */
+  "openSrLabel"?: WarpPill['openSrLabel'];
+  /**  */
+  "open-aria-label"?: WarpPill['openAriaLabel'];
+  /**  */
+  "openAriaLabel"?: WarpPill['openAriaLabel'];
+  /** @deprecated Used "close-arial-label" instead.  */
+  "close-sr-label"?: WarpPill['closeSrLabel'];
+  /** @deprecated Used "close-arial-label" instead.  */
+  "closeSrLabel"?: WarpPill['closeSrLabel'];
+  /**  */
+  "close-aria-label"?: WarpPill['closeAriaLabel'];
+  /**  */
+  "closeAriaLabel"?: WarpPill['closeAriaLabel'];
+  /**  */
+  "openFilterSrText"?: WarpPill['openFilterSrText'];
+  /**  */
+  "removeFilterSrText"?: WarpPill['removeFilterSrText'];
+
+  /**  */
+  "onw-pill-click"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onw-pill-close"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type WCheckboxProps = {
+  /**  */
+  "title"?: WCheckbox['title'];
+  /** The name of the checkbox, submitted as a name/value pair with form data. */
+  "name"?: WCheckbox['name'];
+  /** The value of the checkbox, submitted as a name/value pair with form data. */
+  "value"?: WCheckbox['value'];
+  /** The checkbox's size. */
+  "size"?: WCheckbox['size'];
+  /** Disables the checkbox. */
+  "disabled"?: WCheckbox['disabled'];
+  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
+  "indeterminate"?: WCheckbox['indeterminate'];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  "checked"?: WCheckbox['defaultChecked'];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  "defaultChecked"?: WCheckbox['defaultChecked'];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  "form"?: WCheckbox['form'];
+  /** Makes the checkbox a required field. */
+  "required"?: WCheckbox['required'];
+  /** The checkbox's hint. If you need to display HTML, use the `hint` slot instead. */
+  "hint"?: WCheckbox['hint'];
+  /**  */
+  "input"?: WCheckbox['input'];
+
+  /**  */
+  "onchange"?: (e: CustomEvent<Event>) => void;
+}
+
+
+export type WRadioProps = {
+  /** The string pointing to a form's id. */
+  "form"?: WRadio['form'];
+  /** The radio's value. When selected, the radio group will receive this value. */
+  "value"?: WRadio['value'];
+  /** The radio's value. When selected, the radio group will receive this value. */
+  "appearance"?: WRadio['appearance'];
+  /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
+attribute can typically be omitted. */
+  "size"?: WRadio['size'];
+  /** Disables the radio. */
+  "disabled"?: WRadio['disabled'];
+  /**  */
+  "checked"?: WRadio['checked'];
+
+
+}
+
+
+export type WRadioGroupProps = {
+  /** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+instead. */
+  "label"?: WRadioGroup['label'];
+  /** The radio groups's hint. If you need to display HTML, use the `hint` slot instead. */
+  "hint"?: WRadioGroup['hint'];
+  /** The name of the radio group, submitted as a name/value pair with form data. */
+  "name"?: WRadioGroup['name'];
+  /** Disables the radio group and all child radios. */
+  "disabled"?: WRadioGroup['disabled'];
+  /** The orientation in which to show radio items. */
+  "orientation"?: WRadioGroup['orientation'];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  "value"?: WRadioGroup['defaultValue'];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  "defaultValue"?: WRadioGroup['defaultValue'];
+  /** The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden. */
+  "size"?: WRadioGroup['size'];
+  /** Ensures a child radio is checked before allowing the containing form to submit. */
+  "required"?: WRadioGroup['required'];
+  /** Used for SSR. if true, will show slotted label on initial render. */
+  "with-label"?: WRadioGroup['withLabel'];
+  /** Used for SSR. if true, will show slotted label on initial render. */
+  "withLabel"?: WRadioGroup['withLabel'];
+  /** Used for SSR. if true, will show slotted hint on initial render. */
+  "with-hint"?: WRadioGroup['withHint'];
+  /** Used for SSR. if true, will show slotted hint on initial render. */
+  "withHint"?: WRadioGroup['withHint'];
+  /**  */
+  "hasRadioButtons"?: WRadioGroup['hasRadioButtons'];
+  /**  */
+  "defaultSlot"?: WRadioGroup['defaultSlot'];
+
+  /**  */
+  "oninput"?: (e: CustomEvent<InputEvent>) => void;
+  /**  */
+  "onchange"?: (e: CustomEvent<Event>) => void;
+}
+
+
+export type WarpSelectProps = {
+  /** Whether the element should receive focus on render */
+  "auto-focus"?: WarpSelect['autoFocus'];
+  /** Whether the element should receive focus on render */
+  "autoFocus"?: WarpSelect['autoFocus'];
+  /** Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error */
+  "invalid"?: WarpSelect['invalid'];
+  /** Whether to always show a hint */
+  "always"?: WarpSelect['always'];
+  /** The content displayed as the help text */
+  "hint"?: WarpSelect['hint'];
+  /** The content to disply as the label */
+  "label"?: WarpSelect['label'];
+  /** Whether to show optional text */
+  "optional"?: WarpSelect['optional'];
+  /** Renders the field in a disabled state. */
+  "disabled"?: WarpSelect['disabled'];
+  /** Renders the field in a readonly state. */
+  "read-only"?: WarpSelect['readOnly'];
+  /** Renders the field in a readonly state. */
+  "readOnly"?: WarpSelect['readOnly'];
+  /**  */
+  "_options"?: WarpSelect['_options'];
+  /**  */
+  "name"?: WarpSelect['name'];
+  /**  */
+  "value"?: WarpSelect['value'];
+
+
+}
+
+
+export type WarpTextFieldProps = {
+  /**  */
+  "disabled"?: WarpTextField['disabled'];
+  /**  */
+  "invalid"?: WarpTextField['invalid'];
+  /**  */
+  "id"?: WarpTextField['id'];
+  /**  */
+  "label"?: WarpTextField['label'];
+  /**  */
+  "help-text"?: WarpTextField['helpText'];
+  /**  */
+  "helpText"?: WarpTextField['helpText'];
+  /**  */
+  "size"?: WarpTextField['size'];
+  /**  */
+  "max"?: WarpTextField['max'];
+  /**  */
+  "min"?: WarpTextField['min'];
+  /**  */
+  "min-length"?: WarpTextField['minLength'];
+  /**  */
+  "minLength"?: WarpTextField['minLength'];
+  /**  */
+  "max-length"?: WarpTextField['maxLength'];
+  /**  */
+  "maxLength"?: WarpTextField['maxLength'];
+  /**  */
+  "pattern"?: WarpTextField['pattern'];
+  /**  */
+  "placeholder"?: WarpTextField['placeholder'];
+  /**  */
+  "read-only"?: WarpTextField['readOnly'];
+  /**  */
+  "readOnly"?: WarpTextField['readOnly'];
+  /**  */
+  "required"?: WarpTextField['required'];
+  /**  */
+  "type"?: WarpTextField['type'];
+  /**  */
+  "value"?: WarpTextField['value'];
+  /**  */
+  "name"?: WarpTextField['name'];
+  /** Function to format value when the input field.
+
+Only active when the input field does not have focus,
+similar to the accessible input masking example from Filament Group
+
+https://css-tricks.com/input-masking/
+https://filamentgroup.github.io/politespace/demo/demo.html */
+  "formatter"?: WarpTextField['formatter'];
+
+
+}
+
+
+export type WarpSliderThumbProps = {
+  /**  */
+  "aria-label"?: WarpSliderThumb['ariaLabel'];
+  /**  */
+  "ariaLabel"?: WarpSliderThumb['ariaLabel'];
+  /**  */
+  "aria-description"?: WarpSliderThumb['ariaDescription'];
+  /**  */
+  "ariaDescription"?: WarpSliderThumb['ariaDescription'];
+  /**  */
+  "label"?: WarpSliderThumb['label'];
+  /**  */
+  "name"?: WarpSliderThumb['name'];
+  /**  */
+  "value"?: WarpSliderThumb['value'];
+  /**  */
+  "disabled"?: WarpSliderThumb['disabled'];
+  /** Set by `<w-slider>` */
+  "markers"?: WarpSliderThumb['markers'];
+  /** Set by `<w-slider>` */
+  "required"?: WarpSliderThumb['required'];
+  /** Set by `<w-slider>` */
+  "step"?: WarpSliderThumb['step'];
+  /** Set by `<w-slider>` */
+  "min"?: WarpSliderThumb['min'];
+  /** Set by `<w-slider>` */
+  "max"?: WarpSliderThumb['max'];
+  /** Set by `<w-slider>` */
+  "suffix"?: WarpSliderThumb['suffix'];
+  /** JS hook to help you format the numeric value how you want. */
+  "formatter"?: WarpSliderThumb['formatter'];
+  /**  */
+  "range"?: WarpSliderThumb['range'];
+  /**  */
+  "textfield"?: WarpSliderThumb['textfield'];
+
+  /**  */
+  "onslidervalidity"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type WarpSliderProps = {
+  /** The slider fieldset label. Required for proper accessibility.
+
+If you need to display HTML, use the `label` slot instead. */
+  "label"?: WarpSlider['label'];
+  /**  */
+  "disabled"?: WarpSlider['disabled'];
+  /**  */
+  "invalid"?: WarpSlider['invalid'];
+  /** Ensures a child slider thumb has a value before allowing the containing form to submit. */
+  "required"?: WarpSlider['required'];
+  /**  */
+  "min"?: WarpSlider['min'];
+  /**  */
+  "max"?: WarpSlider['max'];
+  /** Pass a value similar to step to create visual markers at that interval */
+  "markers"?: WarpSlider['markers'];
+  /**  */
+  "step"?: WarpSlider['step'];
+  /** Suffix used in text input fields and for the min and max values of the slider. */
+  "suffix"?: WarpSlider['suffix'];
+  /** Function to format the to- and from labels and value in the slider thumb tooltip. */
+  "formatter"?: WarpSlider['formatter'];
+
+
+}
+
+
+export type WarpStepsProps = {
+  /**  */
+  "horizontal"?: WarpSteps['horizontal'];
+  /**  */
+  "right"?: WarpSteps['right'];
+
+
+}
+
+
+export type WarpStepProps = {
+  /**  */
+  "active"?: WarpStep['active'];
+  /**  */
+  "completed"?: WarpStep['completed'];
+
+
+}
+
+
+export type WarpSwitchProps = {
+  /**  */
+  "value"?: WarpSwitch['value'];
+  /**  */
+  "disabled"?: WarpSwitch['disabled'];
+
+  /**  */
+  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type WarpTabsProps = {
+  /**  */
+  "active"?: WarpTabs['active'];
+  /**  */
+  "tab-class"?: WarpTabs['tabClass'];
+  /**  */
+  "tabClass"?: WarpTabs['tabClass'];
+
+  /**  */
+  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type WarpTabProps = {
+  /**  */
+  "name"?: WarpTab['name'];
+  /**  */
+  "label"?: WarpTab['label'];
+  /**  */
+  "active"?: WarpTab['active'];
+  /**  */
+  "over"?: WarpTab['over'];
+  /**  */
+  "tab-class"?: WarpTab['tabClass'];
+  /**  */
+  "tabClass"?: WarpTab['tabClass'];
+
+
+}
+
+
+export type WarpTabPanelProps = {
+  /**  */
+  "name"?: WarpTabPanel['name'];
+  /**  */
+  "hidden"?: WarpTabPanel['hidden'];
+
+
+}
+
+  export type CustomElements = {
+
+
+  /**
+     * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `aria-label`/`ariaLabel`: undefined 
+ * - `clear`: Add this property to render a clickable Warp close icon.
+ * 
+ * Set an `aria-label` that explains the action when using this. 
+ * - `search`: Add this property to render a clickable Warp search icon.
+ * 
+ * Set an `aria-label` that explains the action when using this. 
+ * - `label`: undefined 
+  */
+    "w-affix": Partial<WarpAffixProps & BaseProps<WarpAffix> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `show`: undefined 
+ * - `placement`: undefined 
+ * - `tooltip`: undefined 
+ * - `callout`: undefined 
+ * - `popover`: undefined 
+ * - `highlight`: undefined 
+ * - `can-close`/`canClose`: undefined 
+ * - `no-arrow`/`noArrow`: undefined 
+ * - `distance`: undefined 
+ * - `skidding`: undefined 
+ * - `flip`: undefined 
+ * - `cross-axis`/`crossAxis`: undefined 
+ * - `fallback-placements`/`fallbackPlacements`: undefined 
+ * - `_initialPlacement`: undefined (property only)
+ * - `_actualDirection`: undefined (property only)
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `handleDone() => void`: undefined
+ * - `pointingAtDirection() => void`: undefined
+ * - `activeAttentionType() => void`: undefined
+ * - `defaultAriaLabel() => void`: undefined
+ * - `setAriaLabels() => void`: undefined
+ * - `close() => void`: undefined
+ * - `keypressed(e: KeyboardEvent) => void`: undefined
+  */
+    "w-attention": Partial<WarpAttentionProps & BaseProps<WarpAttention> & BaseEvents>;
+
+
+  /**
+     * Alert is an inline component used for displaying different types of messages.
+ * 
+ * For accessibility reasons, alert should appear close to the element that triggered it.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `variant`: undefined 
+ * - `show`: undefined 
+ * - `role`: undefined 
+  */
+    "w-alert": Partial<WarpAlertProps & BaseProps<WarpAlert> & BaseEvents>;
+
+
+  /**
+     * `w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `variant`: undefined 
+ * - `position`: undefined 
+  */
+    "w-badge": Partial<WarpBadgeProps & BaseProps<WarpBadge> & BaseEvents>;
+
+
+  /**
+     * Box is a layout component used for separating content areas on a page.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `bleed`: undefined 
+ * - `bordered`: undefined 
+ * - `info`: undefined 
+ * - `neutral`: undefined 
+ * - `role`: undefined 
+  */
+    "w-box": Partial<WarpBoxProps & BaseProps<WarpBox> & BaseEvents>;
+
+
+  /**
+     * Breadcrumbs show the navigation structure for the current location.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `aria-label`/`ariaLabel`: undefined 
+  */
+    "w-breadcrumbs": Partial<WarpBreadcrumbsProps & BaseProps<WarpBreadcrumbs> & BaseEvents>;
+
+
+  /**
+     * Buttons are used to perform actions, with different visuals for different needs.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `autofocus`: undefined 
+ * - `variant`: undefined 
+ * - `quiet`: undefined 
+ * - `small`: undefined 
+ * - `href`: undefined 
+ * - `disabled`: undefined 
+ * - `target`: undefined 
+ * - `rel`: undefined 
+ * - `full-width`/`fullWidth`: undefined 
+ * - `button-class`/`buttonClass`: undefined 
+ * - `name`: undefined 
+ * - `classes`: undefined (property only)
+  */
+    "w-link": Partial<WarpLinkProps & BaseProps<WarpLink> & BaseEvents>;
+
+
+  /**
+     * Buttons are used to perform actions, widh different visuals for different needs.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `type`: undefined 
+ * - `autofocus`: undefined 
+ * - `variant`: undefined 
+ * - `quiet`: undefined 
+ * - `small`: undefined 
+ * - `loading`: undefined 
+ * - `href`: undefined 
+ * - `target`: undefined 
+ * - `rel`: undefined 
+ * - `full-width`/`fullWidth`: undefined 
+ * - `button-class`/`buttonClass`: undefined 
+ * - `name`: undefined 
+ * - `value`: undefined 
+ * - `ariaValueTextLoading`: undefined (property only)
+  */
+    "w-button": Partial<WarpButtonProps & BaseProps<WarpButton> & BaseEvents>;
+
+
+  /**
+     * Card is a layout component used for separating content areas on a page.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `selected`: undefined 
+ * - `flat`: undefined 
+ * - `clickable`: undefined 
+ * - `buttonText`: undefined (property only)
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `keypressed(e: KeyboardEvent) => void`: undefined
+  */
+    "w-card": Partial<WarpCardProps & BaseProps<WarpCard> & BaseEvents>;
+
+
+  /**
+     * A combobox element for text input with selectable options.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `options`: The available options to select from 
+ * - `label`: Label above input 
+ * - `placeholder`: Input placeholder 
+ * - `value`: The input value 
+ * - `open-on-focus`/`openOnFocus`: Whether the popover opens when focus is on the text field 
+ * - `select-on-blur`/`selectOnBlur`: Select active option on blur 
+ * - `match-text-segments`/`matchTextSegments`: Whether the matching text segments in the options should be highlighted 
+ * - `disable-static-filtering`/`disableStaticFiltering`: Disable client-side static filtering 
+ * - `invalid`: Renders the input field in an invalid state 
+ * - `help-text`/`helpText`: The content to display as the help text 
+ * - `disabled`: Whether the element is disabled 
+ * - `required`: Whether the element is required 
+ * - `optional`: Whether to show optional text 
+ * - `class-name`/`containerClassName`: Additional container styling 
+ * - `list-class-name`/`listClassName`: Additional list styling 
+ * - `name`: Name attribute for form submission 
+  */
+    "w-combobox": Partial<WarpComboboxProps & BaseProps<WarpCombobox> & BaseEvents>;
+
+
+  /**
+     * An input for dates.
+ * 
+ * Uses the `lang` attribute on either the element or on `<html>` to determine the locale options.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `label`: undefined 
+ * - `lang`: Takes precedence over the `<html>` lang attribute. 
+ * - `name`: undefined 
+ * - `value`: undefined 
+ * - `header-format`/`headerFormat`: Decides the format of the date as shown in the calendar header.
+ * 
+ * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). 
+ * - `weekday-format`/`weekdayFormat`: Decides the format of the weekday as shown above the grid of dates in the calendar.
+ * 
+ * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). 
+ * - `day-format`/`dayFormat`: Decides the format of the day in the calendar as read to screen readers.
+ * 
+ * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). 
+ * - `isDayDisabled`: Lets you control if a date in the calendar should be disabled.
+ * 
+ * This needs to be set on the element instance in JavaScript, not as an HTML attribute. (property only)
+ * - `isCalendarOpen`: undefined (property only)
+ * - `navigationDate`: undefined (property only)
+ * - `selectedDate`: undefined (property only) (readonly)
+ * - `month`: undefined (property only) (readonly)
+ * - `weeks`: undefined (property only) (readonly)
+ * - `calendar`: undefined (property only)
+ * - `input`: undefined (property only)
+ * - `toggleButton`: undefined (property only)
+ * - `wrapper`: undefined (property only)
+ * - `previousMonthButton`: This is the first focusable element, needed for the modal focus trap.
+ * 
+ * Don't cache this and other `@query` fields from inside the calendar modal.
+ * They work the first time, but once the calendar is closed and reopened
+ * the query will point to an element that doesn't exist anymore. (property only)
+ * - `todayCell`: undefined (property only)
+ * - `selectedCell`: undefined (property only)
+  */
+    "w-datepicker": Partial<WarpDatepickerProps & BaseProps<WarpDatepicker> & BaseEvents>;
+
+
+  /**
+     * Dead toggle can be used where the appearance of a checkbox or radio is needed - but for accessibility purposes an actual input element should not be present.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-dead-toggle--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `type`: undefined 
+ * - `checked`: undefined 
+ * - `indeterminate`: undefined 
+ * - `invalid`: undefined 
+  */
+    "w-dead-toggle": Partial<WarpDeadToggleProps & BaseProps<WarpDeadToggle> & BaseEvents>;
+
+
+  /**
+     * Expandable is a layout component used for creating expandable content areas on a page.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `expanded`: undefined 
+ * - `title`: undefined 
+ * - `box`: undefined 
+ * - `bleed`: undefined 
+ * - `button-class`/`buttonClass`: undefined 
+ * - `content-class`/`contentClass`: undefined 
+ * - `no-chevron`/`noChevron`: undefined 
+ * - `animated`: undefined 
+ * - `heading-level`/`headingLevel`: undefined 
+ * - `_hasTitle`: undefined 
+ * - `_showChevronUp`: undefined 
+ * 
+ * ## Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `title`: Alternative to the `title` attribute should you need to provide some additional markup.
+  */
+    "w-expandable": Partial<WarpExpandableProps & BaseProps<WarpExpandable> & 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>;
+
+
+  /**
+     * 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)
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `backClicked`: undefined
+ * 
+ * ## Slots
+ * 
+ * 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>;
+
+
+  /**
+     * 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 
+ * - `content-id`/`contentId`: undefined 
+ * - `ignore-backdrop-clicks`/`ignoreBackdropClicks`: undefined 
+ * - `dialogEl`: undefined (property only)
+ * - `dialogInnerEl`: undefined (property only)
+ * - `contentEl`: undefined (property only)
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `shown`: undefined
+ * - `hidden`: undefined
+ * 
+ * ## Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `header`: Typically where you would use the `w-modal-header` component.
+ * - `content`: The main content of the modal.
+ * - `footer`: Typically where you would use the `w-modal-footer` component, for things like actions.
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `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>;
+
+
+  /**
+     * 
+ * 
+ * ## 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) 
+ * - `page-count`/`pageCount`: Total number of pages 
+  */
+    "w-pageindicator": Partial<WarpPageIndicatorProps & BaseProps<WarpPageIndicator> & BaseEvents>;
+
+
+  /**
+     * 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 
+ * 
+ * ## 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.
+  */
+    "w-pagination": Partial<WarpPaginationProps & BaseProps<WarpPagination> & BaseEvents>;
+
+
+  /**
+     * 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 
+ * - `open-sr-label`/`openSrLabel`: undefined 
+ * - `open-aria-label`/`openAriaLabel`: undefined 
+ * - `close-sr-label`/`closeSrLabel`: undefined 
+ * - `close-aria-label`/`closeAriaLabel`: undefined 
+ * - `openFilterSrText`: undefined (property only)
+ * - `removeFilterSrText`: undefined (property only)
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `w-pill-click`: undefined
+ * - `w-pill-close`: undefined
+  */
+    "w-pill": Partial<WarpPillProps & BaseProps<WarpPill> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `title`: undefined 
+ * - `name`: The name of the checkbox, submitted as a name/value pair with form data. 
+ * - `value`: The value of the checkbox, submitted as a name/value pair with form data. 
+ * - `size`: The checkbox's size. 
+ * - `disabled`: Disables the checkbox. 
+ * - `indeterminate`: Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+ * all/none" behavior when associated checkboxes have a mix of checked and unchecked states. 
+ * - `checked`/`defaultChecked`: The default value of the form control. Primarily used for resetting the form control. 
+ * - `form`: By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+ * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+ * the same document or shadow root for this to work. 
+ * - `required`: Makes the checkbox a required field. 
+ * - `hint`: The checkbox's hint. If you need to display HTML, use the `hint` slot instead. 
+ * - `input`: undefined (property only)
+ * - `checked`: Draws the checkbox in a checked state. (property only)
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `change`: undefined
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `handleDefaultCheckedChange() => void`: undefined
+ * - `handleValueOrCheckedChange() => void`: undefined
+ * - `handleStateChange() => void`: undefined
+ * - `handleDisabledChange() => void`: undefined
+ * - `formResetCallback() => void`: undefined
+ * - `click() => void`: Simulates a click on the checkbox.
+ * - `focus(options?: FocusOptions) => void`: Sets focus on the checkbox.
+ * - `blur() => void`: Removes focus from the checkbox.
+  */
+    "w-checkbox": Partial<WCheckboxProps & BaseProps<WCheckbox> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `form`: The string pointing to a form's id. 
+ * - `value`: The radio's value. When selected, the radio group will receive this value. 
+ * - `appearance`: The radio's value. When selected, the radio group will receive this value. 
+ * - `size`: The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
+ * attribute can typically be omitted. 
+ * - `disabled`: Disables the radio. 
+ * - `checked`: undefined (property only)
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `setValue() => void`: undefined
+  */
+    "w-radio": Partial<WRadioProps & BaseProps<WRadio> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `label`: The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+ * instead. 
+ * - `hint`: The radio groups's hint. If you need to display HTML, use the `hint` slot instead. 
+ * - `name`: The name of the radio group, submitted as a name/value pair with form data. 
+ * - `disabled`: Disables the radio group and all child radios. 
+ * - `orientation`: The orientation in which to show radio items. 
+ * - `value`/`defaultValue`: The default value of the form control. Primarily used for resetting the form control. 
+ * - `size`: The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden. 
+ * - `required`: Ensures a child radio is checked before allowing the containing form to submit. 
+ * - `with-label`/`withLabel`: Used for SSR. if true, will show slotted label on initial render. 
+ * - `with-hint`/`withHint`: Used for SSR. if true, will show slotted hint on initial render. 
+ * - `hasRadioButtons`: undefined (property only)
+ * - `defaultSlot`: undefined (property only)
+ * - `value`: The current value of the radio group, submitted as a name/value pair with form data. (property only)
+ * - `validationTarget`: We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on
+ * the first radio element. (property only) (readonly)
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `input`: undefined
+ * - `change`: undefined
+ * 
+ * ## Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `label`: Alternative to the `label` attribute should you need custom HTML.
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `formResetCallback(args: Parameters<BaseFormAssociatedElement['formResetCallback']>) => void`: undefined
+ * - `focus(options?: FocusOptions) => void`: Sets focus on the radio group.
+  */
+    "w-radio-group": Partial<WRadioGroupProps & BaseProps<WRadioGroup> & 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 
+ * - `invalid`: Renders the field in an invalid state. Often paired with `hint` 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 
+ * - `disabled`: Renders the field in a disabled state. 
+ * - `read-only`/`readOnly`: Renders the field in a readonly state. 
+ * - `_options`: undefined 
+ * - `name`: undefined 
+ * - `value`: undefined 
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `handleKeyDown(event: KeyboardEvent) => void`: undefined
+ * - `onChange({ target }) => void`: undefined
+  */
+    "w-select": Partial<WarpSelectProps & BaseProps<WarpSelect> & BaseEvents>;
+
+
+  /**
+     * A single line text input element.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `disabled`: undefined 
+ * - `invalid`: undefined 
+ * - `id`: undefined 
+ * - `label`: undefined 
+ * - `help-text`/`helpText`: undefined 
+ * - `size`: undefined 
+ * - `max`: undefined 
+ * - `min`: undefined 
+ * - `min-length`/`minLength`: undefined 
+ * - `max-length`/`maxLength`: undefined 
+ * - `pattern`: undefined 
+ * - `placeholder`: undefined 
+ * - `read-only`/`readOnly`: undefined 
+ * - `required`: undefined 
+ * - `type`: undefined 
+ * - `value`: undefined 
+ * - `name`: undefined 
+ * - `formatter`: Function to format value when the input field.
+ * 
+ * Only active when the input field does not have focus,
+ * similar to the accessible input masking example from Filament Group
+ * 
+ * https://css-tricks.com/input-masking/
+ * https://filamentgroup.github.io/politespace/demo/demo.html (property only)
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `handler(e: Event) => void`: undefined
+ * - `prefixSlotChange() => void`: undefined
+ * - `suffixSlotChange() => void`: undefined
+  */
+    "w-textfield": Partial<WarpTextFieldProps & BaseProps<WarpTextField> & BaseEvents>;
+
+
+  /**
+     * Component to place inside a `<w-slider>`.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `aria-label`/`ariaLabel`: undefined 
+ * - `aria-description`/`ariaDescription`: undefined 
+ * - `label`: undefined 
+ * - `name`: undefined 
+ * - `value`: undefined 
+ * - `disabled`: undefined 
+ * - `markers`: Set by `<w-slider>` (property only)
+ * - `required`: Set by `<w-slider>` (property only)
+ * - `step`: Set by `<w-slider>` (property only)
+ * - `min`: Set by `<w-slider>` (property only)
+ * - `max`: Set by `<w-slider>` (property only)
+ * - `suffix`: Set by `<w-slider>` (property only)
+ * - `formatter`: JS hook to help you format the numeric value how you want. (property only)
+ * - `range`: undefined (property only)
+ * - `textfield`: undefined (property only)
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `slidervalidity`: undefined
+  */
+    "w-slider-thumb": Partial<WarpSliderThumbProps & BaseProps<WarpSliderThumb> & BaseEvents>;
+
+
+  /**
+     * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `label`: The slider fieldset label. Required for proper accessibility.
+ * 
+ * If you need to display HTML, use the `label` slot instead. 
+ * - `disabled`: undefined 
+ * - `invalid`: undefined 
+ * - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit. 
+ * - `min`: undefined 
+ * - `max`: undefined 
+ * - `markers`: Pass a value similar to step to create visual markers at that interval 
+ * - `step`: undefined 
+ * - `suffix`: Suffix used in text input fields and for the min and max values of the slider. 
+ * - `formatter`: Function to format the to- and from labels and value in the slider thumb tooltip. (property only)
+ * 
+ * ## Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: For single sliders place a `<w-slider-thumb>` in the default slot.
+ * - `label`: Label for the slider or range slider as a whole.
+ * - `description`: Optional description between the label and slider.
+ * - `from`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+ * - `to`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+  */
+    "w-slider": Partial<WarpSliderProps & BaseProps<WarpSlider> & BaseEvents>;
+
+
+  /**
+     * Steps are used to show progress through a process or to guide users through a multi-step task.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `horizontal`: undefined 
+ * - `right`: undefined 
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `updateStepsContext() => void`: undefined
+  */
+    "w-steps": Partial<WarpStepsProps & BaseProps<WarpSteps> & BaseEvents>;
+
+
+  /**
+     * Individual step component that shows a single step in a process
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `active`: undefined 
+ * - `completed`: undefined 
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `setContext(context: StepsContext) => void`: undefined
+ * - `getAriaLabel() => void`: undefined
+  */
+    "w-step": Partial<WarpStepProps & BaseProps<WarpStep> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `value`: undefined 
+ * - `disabled`: undefined 
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `change`: undefined
+  */
+    "w-switch": Partial<WarpSwitchProps & BaseProps<WarpSwitch> & BaseEvents>;
+
+
+  /**
+     * Tabs are used to organize content by grouping similar information on the same page.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `active`: undefined 
+ * - `tab-class`/`tabClass`: undefined 
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `change`: undefined
+  */
+    "w-tabs": Partial<WarpTabsProps & BaseProps<WarpTabs> & BaseEvents>;
+
+
+  /**
+     * Individual tab component used within w-tabs container.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `name`: undefined 
+ * - `label`: undefined 
+ * - `active`: undefined 
+ * - `over`: undefined 
+ * - `tab-class`/`tabClass`: undefined 
+  */
+    "w-tab": Partial<WarpTabProps & BaseProps<WarpTab> & BaseEvents>;
+
+
+  /**
+     * Tab panel component that holds content for individual tabs.
+ * Each tab panel should have a name that matches a corresponding tab.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `name`: undefined 
+ * - `hidden`: undefined 
+  */
+    "w-tab-panel": Partial<WarpTabPanelProps & BaseProps<WarpTabPanel> & BaseEvents>;
   }
+
+export type CustomCssProperties = {
+
 }
 
-declare module 'react/jsx-runtime' {
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module '@builder.io/qwik' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module '@stencil/core' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module 'hono' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module 'react-native' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare global {
   namespace JSX {
-    interface IntrinsicElements {
-      'w-badge': WarpBadge;
-      'w-affix': WarpAffix;
-      'w-alert': WarpAlert;
-      'w-attention': WarpAttention;
-      'w-box': WarpBox;
-      'w-breadcrumbs': WarpBreadcrumbs;
-      'w-button': WarpButton;
-      'w-card': WarpCard;
-      'w-combobox': WarpCombobox;
-      'w-datepicker': WarpDatepicker;
-      'w-dead-toggle': WarpDeadToggle;
-      'w-expandable': WarpExpandable;
-      'w-link': WarpLink;
-      'w-modal': ModalMain;
-      'w-modal-header': ModalHeader;
-      'w-modal-footer': ModalFooter;
-      'w-pageindicator': WarpPageIndicator;
-      'w-pagination': WarpPagination;
-      'w-pill': WarpPill;
-      'w-checkbox': WCheckbox;
-      'w-radio': WRadio;
-      'w-radio-group': WRadioGroup;
-      'w-select': WarpSelect;
-      'w-slider': WarpSlider;
-      'w-slider-thumb': WarpSliderThumb;
-      'w-steps': WarpSteps;
-      'w-step': WarpStep;
-      'w-switch': WarpSwitch;
-      'w-tab': WarpTab;
-      'w-tabs': WarpTabs;
-      'w-tab-panel': WarpTabPanel;
-      'w-textfield': WarpTextField;
-      'w-toast-container': WarpToastContainer;
-      'w-toast': WarpToast;
-    }
+    interface IntrinsicElements extends CustomElements {}
   }
+  export interface CSSProperties extends CustomCssProperties {}
 }