@warp-ds/elements 2.4.0 → 2.5.0-next.2

package/dist/index.d.ts

@@ -1,24 +1,28 @@
-
-import type { WarpAffix } from "./packages/affix/index.ts";
-import type { WarpAlert } from "./packages/alert/index.ts";
-import type { WarpLink } from "./packages/link/index.ts";
-import type { WarpButton } from "./packages/button/index.ts";
-import type { WarpAttention } from "./packages/attention/index.ts";
-import type { WarpBadge } from "./packages/badge/index.ts";
-import type { WarpBox } from "./packages/box/index.ts";
-import type { WarpBreadcrumbs } from "./packages/breadcrumbs/index.ts";
-import type { WarpCard } from "./packages/card/index.ts";
-import type { WarpExpandable } from "./packages/expandable/index.ts";
-import type { WarpPill } from "./packages/pill/index.ts";
-import type { WarpSelect } from "./packages/select/index.ts";
-import type { WarpTextField } from "./packages/textfield/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 { WarpToastContainer } from "./packages/toast/toast-container.ts";
+import type { WarpAffix } from "./packages/affix/affix.ts";
+import type { WarpAlert } from "./packages/alert/alert.ts";
+import type { WarpLink } from "./packages/link/link.ts";
+import type { WarpButton } from "./packages/button/button.ts";
+import type { WarpAttention } from "./packages/attention/attention.ts";
+import type { WarpBadge } from "./packages/badge/badge.ts";
+import type { WarpBox } from "./packages/box/box.ts";
+import type { WarpBreadcrumbs } from "./packages/breadcrumbs/breadcrumbs.ts";
+import type { WarpCard } from "./packages/card/card.ts";
+import type { WarpExpandable } from "./packages/expandable/expandable.ts";
+import type { WarpPill } from "./packages/pill/pill.ts";
+import type { WarpSelect } from "./packages/select/select.ts";
+import type { WarpTextField } from "./packages/textfield/textfield.ts";
+import type { ModalMain } from "./packages/modal/modal.ts";
+import type { ModalHeader } from "./packages/modal-header/modal-header.ts";
+import type { ModalFooter } from "./packages/modal-footer/modal-footer.ts";
+import type { WarpToastContainer } from "./packages/toast-container/toast-container.ts";
 import type { WarpDatepicker } from "./packages/datepicker/datepicker.ts";
-import type { WarpSwitch } from "./packages/switch/index.ts";
-import type { WarpCombobox } from "./packages/combobox/index.ts";
+import type { WarpSwitch } from "./packages/switch/switch.ts";
+import type { WarpCombobox } from "./packages/combobox/combobox.ts";
+import type { WarpPageIndicator } from "./packages/page-indicator/page-indicator.ts";
+import type { WarpTab } from "./packages/tab/tab.ts";
+import type { WarpTabPanel } from "./packages/tab-panel/tab-panel.ts";
+import type { WarpTabs } from "./packages/tabs/tabs.ts";
+import type { WIcon } from "./packages/icon/icon.ts";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -40,13 +44,12 @@ import type { WarpCombobox } from "./packages/combobox/index.ts";
  */
 export type ScopedElements<
   Prefix extends string = "",
-  Suffix 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) */
@@ -89,362 +92,644 @@ type BaseProps<T extends HTMLElement> = {
   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 = {
-
-
 };
 
-
+type BaseEvents = {};
 
 export type WarpAffixProps = {
   /**  */
-  "aria-label"?: WarpAffix['ariaLabel'];
+  "aria-label"?: WarpAffix["ariaLabel"];
   /**  */
-  "ariaLabel"?: 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'];
+  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'];
+  search?: WarpAffix["search"];
   /**  */
-  "label"?: WarpAffix['label'];
+  label?: WarpAffix["label"];
+};
 
+export type WarpAffixSolidJsProps = {
+  /**  */
+  "attr:aria-label"?: WarpAffix["ariaLabel"];
+  /**  */
+  "prop:ariaLabel"?: WarpAffix["ariaLabel"];
+  /** Add this property to render a clickable Warp close icon.
 
-}
+Set an `aria-label` that explains the action when using this. */
+  "prop:clear"?: WarpAffix["clear"];
+  /** Add this property to render a clickable Warp search icon.
+
+Set an `aria-label` that explains the action when using this. */
+  "prop:search"?: WarpAffix["search"];
+  /**  */
+  "prop:label"?: WarpAffix["label"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpAlertProps = {
   /**  */
-  "variant"?: WarpAlert['variant'];
+  variant?: WarpAlert["variant"];
   /**  */
-  "show"?: WarpAlert['show'];
+  show?: WarpAlert["show"];
   /**  */
-  "role"?: WarpAlert['role'];
-
+  role?: WarpAlert["role"];
+};
 
-}
+export type WarpAlertSolidJsProps = {
+  /**  */
+  "prop:variant"?: WarpAlert["variant"];
+  /**  */
+  "prop:show"?: WarpAlert["show"];
+  /**  */
+  "prop:role"?: WarpAlert["role"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpLinkProps = {
   /**  */
-  "autofocus"?: WarpLink['autofocus'];
+  autofocus?: WarpLink["autofocus"];
   /**  */
-  "variant"?: WarpLink['variant'];
+  variant?: WarpLink["variant"];
   /**  */
-  "small"?: WarpLink['small'];
+  small?: WarpLink["small"];
   /**  */
-  "href"?: WarpLink['href'];
+  href?: WarpLink["href"];
   /**  */
-  "disabled"?: WarpLink['disabled'];
+  disabled?: WarpLink["disabled"];
   /**  */
-  "target"?: WarpLink['target'];
+  target?: WarpLink["target"];
   /**  */
-  "rel"?: WarpLink['rel'];
+  rel?: WarpLink["rel"];
   /**  */
-  "full-width"?: WarpLink['fullWidth'];
+  "full-width"?: WarpLink["fullWidth"];
   /**  */
-  "fullWidth"?: WarpLink['fullWidth'];
-
+  fullWidth?: WarpLink["fullWidth"];
+};
 
-}
+export type WarpLinkSolidJsProps = {
+  /**  */
+  "prop:autofocus"?: WarpLink["autofocus"];
+  /**  */
+  "prop:variant"?: WarpLink["variant"];
+  /**  */
+  "prop:small"?: WarpLink["small"];
+  /**  */
+  "prop:href"?: WarpLink["href"];
+  /**  */
+  "prop:disabled"?: WarpLink["disabled"];
+  /**  */
+  "prop:target"?: WarpLink["target"];
+  /**  */
+  "prop:rel"?: WarpLink["rel"];
+  /**  */
+  "bool:full-width"?: WarpLink["fullWidth"];
+  /**  */
+  "prop:fullWidth"?: WarpLink["fullWidth"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpButtonProps = {
   /**  */
-  "type"?: WarpButton['type'];
+  type?: WarpButton["type"];
   /**  */
-  "autofocus"?: WarpButton['autofocus'];
+  autofocus?: WarpButton["autofocus"];
   /**  */
-  "variant"?: WarpButton['variant'];
+  variant?: WarpButton["variant"];
   /**  */
-  "quiet"?: WarpButton['quiet'];
+  quiet?: WarpButton["quiet"];
   /**  */
-  "small"?: WarpButton['small'];
+  small?: WarpButton["small"];
   /**  */
-  "loading"?: WarpButton['loading'];
+  loading?: WarpButton["loading"];
   /**  */
-  "href"?: WarpButton['href'];
+  href?: WarpButton["href"];
   /**  */
-  "target"?: WarpButton['target'];
+  target?: WarpButton["target"];
   /**  */
-  "rel"?: WarpButton['rel'];
+  rel?: WarpButton["rel"];
   /**  */
-  "full-width"?: WarpButton['fullWidth'];
+  "full-width"?: WarpButton["fullWidth"];
   /**  */
-  "fullWidth"?: WarpButton['fullWidth'];
+  fullWidth?: WarpButton["fullWidth"];
   /**  */
-  "button-class"?: WarpButton['buttonClass'];
+  "button-class"?: WarpButton["buttonClass"];
   /**  */
-  "buttonClass"?: WarpButton['buttonClass'];
+  buttonClass?: WarpButton["buttonClass"];
   /**  */
-  "name"?: WarpButton['name'];
+  name?: WarpButton["name"];
   /**  */
-  "value"?: WarpButton['value'];
+  value?: WarpButton["value"];
   /**  */
-  "ariaValueTextLoading"?: WarpButton['ariaValueTextLoading'];
-
+  ariaValueTextLoading?: WarpButton["ariaValueTextLoading"];
+};
 
-}
+export type WarpButtonSolidJsProps = {
+  /**  */
+  "prop:type"?: WarpButton["type"];
+  /**  */
+  "prop:autofocus"?: WarpButton["autofocus"];
+  /**  */
+  "prop:variant"?: WarpButton["variant"];
+  /**  */
+  "prop:quiet"?: WarpButton["quiet"];
+  /**  */
+  "prop:small"?: WarpButton["small"];
+  /**  */
+  "prop:loading"?: WarpButton["loading"];
+  /**  */
+  "prop:href"?: WarpButton["href"];
+  /**  */
+  "prop:target"?: WarpButton["target"];
+  /**  */
+  "prop:rel"?: WarpButton["rel"];
+  /**  */
+  "bool:full-width"?: WarpButton["fullWidth"];
+  /**  */
+  "prop:fullWidth"?: WarpButton["fullWidth"];
+  /**  */
+  "attr:button-class"?: WarpButton["buttonClass"];
+  /**  */
+  "prop:buttonClass"?: WarpButton["buttonClass"];
+  /**  */
+  "prop:name"?: WarpButton["name"];
+  /**  */
+  "prop:value"?: WarpButton["value"];
+  /**  */
+  "prop:ariaValueTextLoading"?: WarpButton["ariaValueTextLoading"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpAttentionProps = {
   /**  */
-  "show"?: WarpAttention['show'];
+  show?: WarpAttention["show"];
   /**  */
-  "placement"?: WarpAttention['placement'];
+  placement?: WarpAttention["placement"];
   /**  */
-  "tooltip"?: WarpAttention['tooltip'];
+  tooltip?: WarpAttention["tooltip"];
   /**  */
-  "callout"?: WarpAttention['callout'];
+  callout?: WarpAttention["callout"];
   /**  */
-  "popover"?: WarpAttention['popover'];
+  popover?: WarpAttention["popover"];
   /**  */
-  "highlight"?: WarpAttention['highlight'];
+  highlight?: WarpAttention["highlight"];
   /**  */
-  "can-close"?: WarpAttention['canClose'];
+  "can-close"?: WarpAttention["canClose"];
   /**  */
-  "canClose"?: WarpAttention['canClose'];
+  canClose?: WarpAttention["canClose"];
   /**  */
-  "no-arrow"?: WarpAttention['noArrow'];
+  "no-arrow"?: WarpAttention["noArrow"];
   /**  */
-  "noArrow"?: WarpAttention['noArrow'];
+  noArrow?: WarpAttention["noArrow"];
   /**  */
-  "distance"?: WarpAttention['distance'];
+  distance?: WarpAttention["distance"];
   /**  */
-  "skidding"?: WarpAttention['skidding'];
+  skidding?: WarpAttention["skidding"];
   /**  */
-  "flip"?: WarpAttention['flip'];
+  flip?: WarpAttention["flip"];
   /**  */
-  "cross-axis"?: WarpAttention['crossAxis'];
+  "cross-axis"?: WarpAttention["crossAxis"];
   /**  */
-  "crossAxis"?: WarpAttention['crossAxis'];
+  crossAxis?: WarpAttention["crossAxis"];
   /**  */
-  "fallback-placements"?: WarpAttention['fallbackPlacements'];
+  "fallback-placements"?: WarpAttention["fallbackPlacements"];
   /**  */
-  "fallbackPlacements"?: WarpAttention['fallbackPlacements'];
+  fallbackPlacements?: WarpAttention["fallbackPlacements"];
   /**  */
-  "_initialPlacement"?: WarpAttention['_initialPlacement'];
+  _initialPlacement?: WarpAttention["_initialPlacement"];
   /**  */
-  "_actualDirection"?: WarpAttention['_actualDirection'];
-
+  _actualDirection?: WarpAttention["_actualDirection"];
+};
 
-}
+export type WarpAttentionSolidJsProps = {
+  /**  */
+  "prop:show"?: WarpAttention["show"];
+  /**  */
+  "prop:placement"?: WarpAttention["placement"];
+  /**  */
+  "prop:tooltip"?: WarpAttention["tooltip"];
+  /**  */
+  "prop:callout"?: WarpAttention["callout"];
+  /**  */
+  "prop:popover"?: WarpAttention["popover"];
+  /**  */
+  "prop:highlight"?: WarpAttention["highlight"];
+  /**  */
+  "bool:can-close"?: WarpAttention["canClose"];
+  /**  */
+  "prop:canClose"?: WarpAttention["canClose"];
+  /**  */
+  "bool:no-arrow"?: WarpAttention["noArrow"];
+  /**  */
+  "prop:noArrow"?: WarpAttention["noArrow"];
+  /**  */
+  "prop:distance"?: WarpAttention["distance"];
+  /**  */
+  "prop:skidding"?: WarpAttention["skidding"];
+  /**  */
+  "prop:flip"?: WarpAttention["flip"];
+  /**  */
+  "bool:cross-axis"?: WarpAttention["crossAxis"];
+  /**  */
+  "prop:crossAxis"?: WarpAttention["crossAxis"];
+  /**  */
+  "attr:fallback-placements"?: WarpAttention["fallbackPlacements"];
+  /**  */
+  "prop:fallbackPlacements"?: WarpAttention["fallbackPlacements"];
+  /**  */
+  "prop:_initialPlacement"?: WarpAttention["_initialPlacement"];
+  /**  */
+  "prop:_actualDirection"?: WarpAttention["_actualDirection"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpBadgeProps = {
   /**  */
-  "variant"?: WarpBadge['variant'];
+  variant?: WarpBadge["variant"];
   /**  */
-  "position"?: WarpBadge['position'];
-
+  position?: WarpBadge["position"];
+};
 
-}
+export type WarpBadgeSolidJsProps = {
+  /**  */
+  "prop:variant"?: WarpBadge["variant"];
+  /**  */
+  "prop:position"?: WarpBadge["position"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpBoxProps = {
   /**  */
-  "bleed"?: WarpBox['bleed'];
+  bleed?: WarpBox["bleed"];
   /**  */
-  "bordered"?: WarpBox['bordered'];
+  bordered?: WarpBox["bordered"];
   /**  */
-  "info"?: WarpBox['info'];
+  info?: WarpBox["info"];
   /**  */
-  "neutral"?: WarpBox['neutral'];
+  neutral?: WarpBox["neutral"];
   /**  */
-  "role"?: WarpBox['role'];
-
+  role?: WarpBox["role"];
+};
 
-}
+export type WarpBoxSolidJsProps = {
+  /**  */
+  "prop:bleed"?: WarpBox["bleed"];
+  /**  */
+  "prop:bordered"?: WarpBox["bordered"];
+  /**  */
+  "prop:info"?: WarpBox["info"];
+  /**  */
+  "prop:neutral"?: WarpBox["neutral"];
+  /**  */
+  "prop:role"?: WarpBox["role"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpBreadcrumbsProps = {
   /**  */
-  "aria-label"?: WarpBreadcrumbs['ariaLabel'];
+  "aria-label"?: WarpBreadcrumbs["ariaLabel"];
   /**  */
-  "ariaLabel"?: WarpBreadcrumbs['ariaLabel'];
-
+  ariaLabel?: WarpBreadcrumbs["ariaLabel"];
+};
 
-}
+export type WarpBreadcrumbsSolidJsProps = {
+  /**  */
+  "attr:aria-label"?: WarpBreadcrumbs["ariaLabel"];
+  /**  */
+  "prop:ariaLabel"?: WarpBreadcrumbs["ariaLabel"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpCardProps = {
   /**  */
-  "selected"?: WarpCard['selected'];
+  selected?: WarpCard["selected"];
   /**  */
-  "flat"?: WarpCard['flat'];
+  flat?: WarpCard["flat"];
   /**  */
-  "clickable"?: WarpCard['clickable'];
+  clickable?: WarpCard["clickable"];
   /**  */
-  "buttonText"?: WarpCard['buttonText'];
-
+  buttonText?: WarpCard["buttonText"];
+};
 
-}
+export type WarpCardSolidJsProps = {
+  /**  */
+  "prop:selected"?: WarpCard["selected"];
+  /**  */
+  "prop:flat"?: WarpCard["flat"];
+  /**  */
+  "prop:clickable"?: WarpCard["clickable"];
+  /**  */
+  "prop:buttonText"?: WarpCard["buttonText"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpExpandableProps = {
   /**  */
-  "expanded"?: WarpExpandable['expanded'];
+  expanded?: WarpExpandable["expanded"];
   /**  */
-  "title"?: WarpExpandable['title'];
+  title?: WarpExpandable["title"];
   /**  */
-  "box"?: WarpExpandable['box'];
+  box?: WarpExpandable["box"];
   /**  */
-  "bleed"?: WarpExpandable['bleed'];
+  bleed?: WarpExpandable["bleed"];
   /**  */
-  "button-class"?: WarpExpandable['buttonClass'];
+  "button-class"?: WarpExpandable["buttonClass"];
   /**  */
-  "buttonClass"?: WarpExpandable['buttonClass'];
+  buttonClass?: WarpExpandable["buttonClass"];
   /**  */
-  "content-class"?: WarpExpandable['contentClass'];
+  "content-class"?: WarpExpandable["contentClass"];
   /**  */
-  "contentClass"?: WarpExpandable['contentClass'];
+  contentClass?: WarpExpandable["contentClass"];
   /**  */
-  "no-chevron"?: WarpExpandable['noChevron'];
+  "no-chevron"?: WarpExpandable["noChevron"];
   /**  */
-  "noChevron"?: WarpExpandable['noChevron'];
+  noChevron?: WarpExpandable["noChevron"];
   /**  */
-  "animated"?: WarpExpandable['animated'];
+  animated?: WarpExpandable["animated"];
   /**  */
-  "heading-level"?: WarpExpandable['headingLevel'];
+  "heading-level"?: WarpExpandable["headingLevel"];
   /**  */
-  "headingLevel"?: WarpExpandable['headingLevel'];
+  headingLevel?: WarpExpandable["headingLevel"];
   /**  */
-  "_hasTitle"?: WarpExpandable['_hasTitle'];
+  _hasTitle?: WarpExpandable["_hasTitle"];
   /**  */
-  "_showChevronUp"?: WarpExpandable['_showChevronUp'];
-
+  _showChevronUp?: WarpExpandable["_showChevronUp"];
+};
 
-}
+export type WarpExpandableSolidJsProps = {
+  /**  */
+  "prop:expanded"?: WarpExpandable["expanded"];
+  /**  */
+  "prop:title"?: WarpExpandable["title"];
+  /**  */
+  "prop:box"?: WarpExpandable["box"];
+  /**  */
+  "prop:bleed"?: WarpExpandable["bleed"];
+  /**  */
+  "attr:button-class"?: WarpExpandable["buttonClass"];
+  /**  */
+  "prop:buttonClass"?: WarpExpandable["buttonClass"];
+  /**  */
+  "attr:content-class"?: WarpExpandable["contentClass"];
+  /**  */
+  "prop:contentClass"?: WarpExpandable["contentClass"];
+  /**  */
+  "bool:no-chevron"?: WarpExpandable["noChevron"];
+  /**  */
+  "prop:noChevron"?: WarpExpandable["noChevron"];
+  /**  */
+  "prop:animated"?: WarpExpandable["animated"];
+  /**  */
+  "attr:heading-level"?: WarpExpandable["headingLevel"];
+  /**  */
+  "prop:headingLevel"?: WarpExpandable["headingLevel"];
+  /**  */
+  "prop:_hasTitle"?: WarpExpandable["_hasTitle"];
+  /**  */
+  "prop:_showChevronUp"?: WarpExpandable["_showChevronUp"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpPillProps = {
   /**  */
-  "can-close"?: WarpPill['canClose'];
+  "can-close"?: WarpPill["canClose"];
   /**  */
-  "canClose"?: WarpPill['canClose'];
+  canClose?: WarpPill["canClose"];
   /**  */
-  "suggestion"?: WarpPill['suggestion'];
+  suggestion?: WarpPill["suggestion"];
   /** @deprecated Used "open-arial-label" instead.  */
-  "open-sr-label"?: WarpPill['openSrLabel'];
+  "open-sr-label"?: WarpPill["openSrLabel"];
   /** @deprecated Used "open-arial-label" instead.  */
-  "openSrLabel"?: WarpPill['openSrLabel'];
+  openSrLabel?: WarpPill["openSrLabel"];
   /**  */
-  "open-aria-label"?: WarpPill['openAriaLabel'];
+  "open-aria-label"?: WarpPill["openAriaLabel"];
   /**  */
-  "openAriaLabel"?: WarpPill['openAriaLabel'];
+  openAriaLabel?: WarpPill["openAriaLabel"];
   /** @deprecated Used "close-arial-label" instead.  */
-  "close-sr-label"?: WarpPill['closeSrLabel'];
+  "close-sr-label"?: WarpPill["closeSrLabel"];
   /** @deprecated Used "close-arial-label" instead.  */
-  "closeSrLabel"?: WarpPill['closeSrLabel'];
+  closeSrLabel?: WarpPill["closeSrLabel"];
   /**  */
-  "close-aria-label"?: WarpPill['closeAriaLabel'];
+  "close-aria-label"?: WarpPill["closeAriaLabel"];
   /**  */
-  "closeAriaLabel"?: WarpPill['closeAriaLabel'];
+  closeAriaLabel?: WarpPill["closeAriaLabel"];
   /**  */
-  "openFilterSrText"?: WarpPill['openFilterSrText'];
+  openFilterSrText?: WarpPill["openFilterSrText"];
   /**  */
-  "removeFilterSrText"?: WarpPill['removeFilterSrText'];
+  removeFilterSrText?: WarpPill["removeFilterSrText"];
 
   /**  */
-  "onw-pill-click"?: (e: CustomEvent<CustomEvent>) => void;
+  "onw-pill-click"?: (e: CustomEvent) => void;
   /**  */
-  "onw-pill-close"?: (e: CustomEvent<CustomEvent>) => void;
-}
+  "onw-pill-close"?: (e: CustomEvent) => void;
+};
 
+export type WarpPillSolidJsProps = {
+  /**  */
+  "bool:can-close"?: WarpPill["canClose"];
+  /**  */
+  "prop:canClose"?: WarpPill["canClose"];
+  /**  */
+  "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"];
+  /**  */
+  "attr:open-aria-label"?: WarpPill["openAriaLabel"];
+  /**  */
+  "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"];
+  /**  */
+  "attr:close-aria-label"?: WarpPill["closeAriaLabel"];
+  /**  */
+  "prop:closeAriaLabel"?: WarpPill["closeAriaLabel"];
+  /**  */
+  "prop:openFilterSrText"?: WarpPill["openFilterSrText"];
+  /**  */
+  "prop:removeFilterSrText"?: WarpPill["removeFilterSrText"];
+  /**  */
+  "on:w-pill-click"?: (e: CustomEvent) => void;
+  /**  */
+  "on:w-pill-close"?: (e: CustomEvent) => void;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpSelectProps = {
   /** @deprecated Use the native `autofocus` attribute instead. - Whether the element should receive focus on render. */
-  "auto-focus"?: WarpSelect['autoFocus'];
+  "auto-focus"?: WarpSelect["autoFocus"];
   /** @deprecated Use the native `autofocus` attribute instead. - Whether the element should receive focus on render. */
-  "autoFocus"?: WarpSelect['autoFocus'];
+  autoFocus?: WarpSelect["autoFocus"];
   /** Whether the element should receive focus on render */
-  "autofocus"?: WarpSelect['autofocus'];
+  autofocus?: WarpSelect["autofocus"];
   /** The content displayed as the help text. Paired with `invalid` to show the text as a validation error. */
-  "help-text"?: WarpSelect['helpText'];
+  "help-text"?: WarpSelect["helpText"];
   /** The content displayed as the help text. Paired with `invalid` to show the text as a validation error. */
-  "helpText"?: WarpSelect['helpText'];
+  helpText?: WarpSelect["helpText"];
   /** Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error. */
-  "invalid"?: WarpSelect['invalid'];
+  invalid?: WarpSelect["invalid"];
   /** @deprecated Use `help-text` instead and only set it if you want to display the help text. - Whether to always show a hint. */
-  "always"?: WarpSelect['always'];
+  always?: WarpSelect["always"];
   /** @deprecated Use `help-text` instead. - The content displayed as the help text. */
-  "hint"?: WarpSelect['hint'];
+  hint?: WarpSelect["hint"];
   /** The content to disply as the label */
-  "label"?: WarpSelect['label'];
+  label?: WarpSelect["label"];
   /** Whether to show optional text */
-  "optional"?: WarpSelect['optional'];
+  optional?: WarpSelect["optional"];
   /** Renders the field in a disabled state. */
-  "disabled"?: WarpSelect['disabled'];
+  disabled?: WarpSelect["disabled"];
   /** @deprecated Use the native readonly attribute instead. - Renders the field in a readonly state. */
-  "read-only"?: WarpSelect['readOnly'];
+  "read-only"?: WarpSelect["readOnly"];
   /** @deprecated Use the native readonly attribute instead. - Renders the field in a readonly state. */
-  "readOnly"?: WarpSelect['readOnly'];
+  readOnly?: WarpSelect["readOnly"];
   /** Renders the field in a readonly state. */
-  "readonly"?: WarpSelect['readonly'];
+  readonly?: WarpSelect["readonly"];
   /**  */
-  "name"?: WarpSelect['name'];
+  name?: WarpSelect["name"];
   /**  */
-  "value"?: WarpSelect['value'];
-
+  value?: WarpSelect["value"];
+};
 
-}
+export type WarpSelectSolidJsProps = {
+  /** @deprecated Use the native `autofocus` attribute instead. - Whether the element should receive focus on render. */
+  "bool:auto-focus"?: WarpSelect["autoFocus"];
+  /** @deprecated Use the native `autofocus` attribute instead. - Whether the element should receive focus on render. */
+  "prop:autoFocus"?: WarpSelect["autoFocus"];
+  /** Whether the element should receive focus on render */
+  "prop:autofocus"?: WarpSelect["autofocus"];
+  /** The content displayed as the help text. Paired with `invalid` to show the text as a validation error. */
+  "attr:help-text"?: WarpSelect["helpText"];
+  /** The content displayed as the help text. Paired with `invalid` to show the text as a validation error. */
+  "prop:helpText"?: WarpSelect["helpText"];
+  /** Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error. */
+  "prop:invalid"?: WarpSelect["invalid"];
+  /** @deprecated Use `help-text` instead and only set it if you want to display the help text. - Whether to always show a hint. */
+  "prop:always"?: WarpSelect["always"];
+  /** @deprecated Use `help-text` instead. - The content displayed as the help text. */
+  "prop:hint"?: WarpSelect["hint"];
+  /** The content to disply as the label */
+  "prop:label"?: WarpSelect["label"];
+  /** Whether to show optional text */
+  "prop:optional"?: WarpSelect["optional"];
+  /** Renders the field in a disabled state. */
+  "prop:disabled"?: WarpSelect["disabled"];
+  /** @deprecated Use the native readonly attribute instead. - Renders the field in a readonly state. */
+  "bool:read-only"?: WarpSelect["readOnly"];
+  /** @deprecated Use the native readonly attribute instead. - Renders the field in a readonly state. */
+  "prop:readOnly"?: WarpSelect["readOnly"];
+  /** Renders the field in a readonly state. */
+  "prop:readonly"?: WarpSelect["readonly"];
+  /**  */
+  "prop:name"?: WarpSelect["name"];
+  /**  */
+  "prop:value"?: WarpSelect["value"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpTextFieldProps = {
   /**  */
-  "disabled"?: WarpTextField['disabled'];
+  disabled?: WarpTextField["disabled"];
   /**  */
-  "invalid"?: WarpTextField['invalid'];
+  invalid?: WarpTextField["invalid"];
   /**  */
-  "id"?: WarpTextField['id'];
+  id?: WarpTextField["id"];
   /**  */
-  "label"?: WarpTextField['label'];
+  label?: WarpTextField["label"];
   /**  */
-  "help-text"?: WarpTextField['helpText'];
+  "help-text"?: WarpTextField["helpText"];
   /**  */
-  "helpText"?: WarpTextField['helpText'];
+  helpText?: WarpTextField["helpText"];
   /**  */
-  "size"?: WarpTextField['size'];
+  size?: WarpTextField["size"];
   /**  */
-  "max"?: WarpTextField['max'];
+  max?: WarpTextField["max"];
   /**  */
-  "min"?: WarpTextField['min'];
+  min?: WarpTextField["min"];
   /**  */
-  "min-length"?: WarpTextField['minLength'];
+  "min-length"?: WarpTextField["minLength"];
   /**  */
-  "minLength"?: WarpTextField['minLength'];
+  minLength?: WarpTextField["minLength"];
   /**  */
-  "max-length"?: WarpTextField['maxLength'];
+  "max-length"?: WarpTextField["maxLength"];
   /**  */
-  "maxLength"?: WarpTextField['maxLength'];
+  maxLength?: WarpTextField["maxLength"];
   /**  */
-  "pattern"?: WarpTextField['pattern'];
+  pattern?: WarpTextField["pattern"];
   /**  */
-  "placeholder"?: WarpTextField['placeholder'];
+  placeholder?: WarpTextField["placeholder"];
   /** @deprecated Use the native readonly attribute instead.  */
-  "read-only"?: WarpTextField['readOnly'];
+  "read-only"?: WarpTextField["readOnly"];
   /** @deprecated Use the native readonly attribute instead.  */
-  "readOnly"?: WarpTextField['readOnly'];
+  readOnly?: WarpTextField["readOnly"];
   /**  */
-  "readonly"?: WarpTextField['readonly'];
+  readonly?: WarpTextField["readonly"];
   /**  */
-  "required"?: WarpTextField['required'];
+  required?: WarpTextField["required"];
   /**  */
-  "type"?: WarpTextField['type'];
+  type?: WarpTextField["type"];
   /**  */
-  "value"?: WarpTextField['value'];
+  value?: WarpTextField["value"];
   /**  */
-  "name"?: WarpTextField['name'];
+  name?: WarpTextField["name"];
   /**  */
-  "step"?: WarpTextField['step'];
+  step?: WarpTextField["step"];
   /**  */
-  "autocomplete"?: WarpTextField['autocomplete'];
+  autocomplete?: WarpTextField["autocomplete"];
   /** Function to format value when the input field.
 
 Only active when the input field does not have focus,
@@ -452,804 +737,1946 @@ 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'];
-
+  formatter?: WarpTextField["formatter"];
+};
 
-}
+export type WarpTextFieldSolidJsProps = {
+  /**  */
+  "prop:disabled"?: WarpTextField["disabled"];
+  /**  */
+  "prop:invalid"?: WarpTextField["invalid"];
+  /**  */
+  "prop:id"?: WarpTextField["id"];
+  /**  */
+  "prop:label"?: WarpTextField["label"];
+  /**  */
+  "attr:help-text"?: WarpTextField["helpText"];
+  /**  */
+  "prop:helpText"?: WarpTextField["helpText"];
+  /**  */
+  "prop:size"?: WarpTextField["size"];
+  /**  */
+  "prop:max"?: WarpTextField["max"];
+  /**  */
+  "prop:min"?: WarpTextField["min"];
+  /**  */
+  "attr:min-length"?: WarpTextField["minLength"];
+  /**  */
+  "prop:minLength"?: WarpTextField["minLength"];
+  /**  */
+  "attr:max-length"?: WarpTextField["maxLength"];
+  /**  */
+  "prop:maxLength"?: WarpTextField["maxLength"];
+  /**  */
+  "prop:pattern"?: WarpTextField["pattern"];
+  /**  */
+  "prop:placeholder"?: WarpTextField["placeholder"];
+  /** @deprecated Use the native readonly attribute instead.  */
+  "bool:read-only"?: WarpTextField["readOnly"];
+  /** @deprecated Use the native readonly attribute instead.  */
+  "prop:readOnly"?: WarpTextField["readOnly"];
+  /**  */
+  "prop:readonly"?: WarpTextField["readonly"];
+  /**  */
+  "prop:required"?: WarpTextField["required"];
+  /**  */
+  "prop:type"?: WarpTextField["type"];
+  /**  */
+  "prop:value"?: WarpTextField["value"];
+  /**  */
+  "prop:name"?: WarpTextField["name"];
+  /**  */
+  "prop:step"?: WarpTextField["step"];
+  /**  */
+  "prop:autocomplete"?: WarpTextField["autocomplete"];
+  /** 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
 
-export type ModalFooterProps = {
+https://css-tricks.com/input-masking/
+https://filamentgroup.github.io/politespace/demo/demo.html */
+  "prop:formatter"?: WarpTextField["formatter"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  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"];
+  /**  */
+  dialogInnerEl?: ModalMain["dialogInnerEl"];
+  /**  */
+  contentEl?: ModalMain["contentEl"];
 
+  /**  */
+  onshown?: (e: CustomEvent) => void;
+  /**  */
+  onhidden?: (e: CustomEvent) => void;
+};
 
-export type ModalHeaderProps = {
+export type ModalMainSolidJsProps = {
   /**  */
-  "title"?: ModalHeader['title'];
+  "prop:show"?: ModalMain["show"];
   /**  */
-  "back"?: ModalHeader['back'];
+  "attr:content-id"?: ModalMain["contentId"];
   /**  */
-  "no-close"?: ModalHeader['noClose'];
+  "prop:contentId"?: ModalMain["contentId"];
   /**  */
-  "noClose"?: ModalHeader['noClose'];
+  "bool:ignore-backdrop-clicks"?: ModalMain["ignoreBackdropClicks"];
   /**  */
-  "titleEl"?: ModalHeader['titleEl'];
-
+  "prop:ignoreBackdropClicks"?: ModalMain["ignoreBackdropClicks"];
   /**  */
-  "onbackClicked"?: (e: CustomEvent<CustomEvent>) => void;
-}
+  "prop:dialogEl"?: ModalMain["dialogEl"];
+  /**  */
+  "prop:dialogInnerEl"?: ModalMain["dialogInnerEl"];
+  /**  */
+  "prop:contentEl"?: ModalMain["contentEl"];
+  /**  */
+  "on:shown"?: (e: CustomEvent) => void;
+  /**  */
+  "on:hidden"?: (e: CustomEvent) => void;
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
-export type ModalMainProps = {
+export type ModalHeaderProps = {
+  /**  */
+  title?: ModalHeader["title"];
+  /**  */
+  back?: ModalHeader["back"];
   /**  */
-  "show"?: ModalMain['show'];
+  "no-close"?: ModalHeader["noClose"];
   /**  */
-  "content-id"?: ModalMain['contentId'];
+  noClose?: ModalHeader["noClose"];
   /**  */
-  "contentId"?: ModalMain['contentId'];
+  titleEl?: ModalHeader["titleEl"];
+
   /**  */
-  "ignore-backdrop-clicks"?: ModalMain['ignoreBackdropClicks'];
+  onbackClicked?: (e: CustomEvent) => void;
+};
+
+export type ModalHeaderSolidJsProps = {
   /**  */
-  "ignoreBackdropClicks"?: ModalMain['ignoreBackdropClicks'];
+  "prop:title"?: ModalHeader["title"];
   /**  */
-  "dialogEl"?: ModalMain['dialogEl'];
+  "prop:back"?: ModalHeader["back"];
   /**  */
-  "dialogInnerEl"?: ModalMain['dialogInnerEl'];
+  "bool:no-close"?: ModalHeader["noClose"];
   /**  */
-  "contentEl"?: ModalMain['contentEl'];
-
+  "prop:noClose"?: ModalHeader["noClose"];
   /**  */
-  "onshown"?: (e: CustomEvent<CustomEvent>) => void;
+  "prop:titleEl"?: ModalHeader["titleEl"];
   /**  */
-  "onhidden"?: (e: CustomEvent<CustomEvent>) => void;
-}
+  "on:backClicked"?: (e: CustomEvent) => void;
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
-export type WarpToastContainerProps = {
+export type ModalFooterProps = {};
 
+export type ModalFooterSolidJsProps = {
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
-}
+export type WarpToastContainerProps = {};
 
+export type WarpToastContainerSolidJsProps = {
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpDatepickerProps = {
   /**  */
-  "label"?: WarpDatepicker['label'];
+  label?: WarpDatepicker["label"];
   /** Takes precedence over the `<html>` lang attribute. */
-  "lang"?: WarpDatepicker['lang'];
+  lang?: WarpDatepicker["lang"];
   /**  */
-  "name"?: WarpDatepicker['name'];
+  name?: WarpDatepicker["name"];
   /**  */
-  "value"?: WarpDatepicker['value'];
+  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'];
+  "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'];
+  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'];
+  "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'];
+  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'];
+  "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'];
+  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'];
+  isDayDisabled?: WarpDatepicker["isDayDisabled"];
   /**  */
-  "isCalendarOpen"?: WarpDatepicker['isCalendarOpen'];
+  isCalendarOpen?: WarpDatepicker["isCalendarOpen"];
   /**  */
-  "navigationDate"?: WarpDatepicker['navigationDate'];
+  navigationDate?: WarpDatepicker["navigationDate"];
   /**  */
-  "calendar"?: WarpDatepicker['calendar'];
+  calendar?: WarpDatepicker["calendar"];
   /**  */
-  "input"?: WarpDatepicker['input'];
+  input?: WarpDatepicker["input"];
   /**  */
-  "toggleButton"?: WarpDatepicker['toggleButton'];
+  toggleButton?: WarpDatepicker["toggleButton"];
   /**  */
-  "wrapper"?: WarpDatepicker['wrapper'];
+  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'];
+  previousMonthButton?: WarpDatepicker["previousMonthButton"];
   /**  */
-  "todayCell"?: WarpDatepicker['todayCell'];
+  todayCell?: WarpDatepicker["todayCell"];
   /**  */
-  "selectedCell"?: WarpDatepicker['selectedCell'];
+  selectedCell?: WarpDatepicker["selectedCell"];
+};
 
+export type WarpDatepickerSolidJsProps = {
+  /**  */
+  "prop:label"?: WarpDatepicker["label"];
+  /** Takes precedence over the `<html>` lang attribute. */
+  "prop:lang"?: WarpDatepicker["lang"];
+  /**  */
+  "prop:name"?: WarpDatepicker["name"];
+  /**  */
+  "prop: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). */
+  "attr: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). */
+  "prop: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). */
+  "attr: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). */
+  "prop: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). */
+  "attr: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). */
+  "prop: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. */
+  "prop:isDayDisabled"?: WarpDatepicker["isDayDisabled"];
+  /**  */
+  "prop:isCalendarOpen"?: WarpDatepicker["isCalendarOpen"];
+  /**  */
+  "prop:navigationDate"?: WarpDatepicker["navigationDate"];
+  /**  */
+  "prop:calendar"?: WarpDatepicker["calendar"];
+  /**  */
+  "prop:input"?: WarpDatepicker["input"];
+  /**  */
+  "prop:toggleButton"?: WarpDatepicker["toggleButton"];
+  /**  */
+  "prop: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. */
+  "prop:previousMonthButton"?: WarpDatepicker["previousMonthButton"];
+  /**  */
+  "prop:todayCell"?: WarpDatepicker["todayCell"];
+  /**  */
+  "prop:selectedCell"?: WarpDatepicker["selectedCell"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpSwitchProps = {
   /**  */
-  "name"?: WarpSwitch['name'];
+  name?: WarpSwitch["name"];
   /**  */
-  "value"?: WarpSwitch['value'];
+  value?: WarpSwitch["value"];
   /**  */
-  "checked"?: WarpSwitch['checked'];
+  checked?: WarpSwitch["checked"];
   /**  */
-  "disabled"?: WarpSwitch['disabled'];
+  disabled?: WarpSwitch["disabled"];
 
   /**  */
-  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
-}
+  onchange?: (e: CustomEvent) => void;
+};
+
+export type WarpSwitchSolidJsProps = {
+  /**  */
+  "prop:name"?: WarpSwitch["name"];
+  /**  */
+  "prop:value"?: WarpSwitch["value"];
+  /**  */
+  "prop:checked"?: WarpSwitch["checked"];
+  /**  */
+  "prop:disabled"?: WarpSwitch["disabled"];
+  /**  */
+  "on:change"?: (e: CustomEvent) => void;
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type WarpComboboxProps = {
   /** The available options to select from */
-  "options"?: WarpCombobox['options'];
+  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"];
+  /** Name attribute for form submission */
+  name?: WarpCombobox["name"];
+  /** Autocomplete attribute for the input field */
+  autocomplete?: WarpCombobox["autocomplete"];
+};
+
+export type WarpComboboxSolidJsProps = {
+  /** The available options to select from */
+  "prop:options"?: WarpCombobox["options"];
   /** Label above input */
-  "label"?: WarpCombobox['label'];
+  "prop:label"?: WarpCombobox["label"];
   /** Input placeholder */
-  "placeholder"?: WarpCombobox['placeholder'];
+  "prop:placeholder"?: WarpCombobox["placeholder"];
   /** The input value */
-  "value"?: WarpCombobox['value'];
+  "prop:value"?: WarpCombobox["value"];
   /** Whether the popover opens when focus is on the text field */
-  "open-on-focus"?: WarpCombobox['openOnFocus'];
+  "bool:open-on-focus"?: WarpCombobox["openOnFocus"];
   /** Whether the popover opens when focus is on the text field */
-  "openOnFocus"?: WarpCombobox['openOnFocus'];
+  "prop:openOnFocus"?: WarpCombobox["openOnFocus"];
   /** Select active option on blur */
-  "select-on-blur"?: WarpCombobox['selectOnBlur'];
+  "bool:select-on-blur"?: WarpCombobox["selectOnBlur"];
   /** Select active option on blur */
-  "selectOnBlur"?: WarpCombobox['selectOnBlur'];
+  "prop:selectOnBlur"?: WarpCombobox["selectOnBlur"];
   /** Whether the matching text segments in the options should be highlighted */
-  "match-text-segments"?: WarpCombobox['matchTextSegments'];
+  "bool:match-text-segments"?: WarpCombobox["matchTextSegments"];
   /** Whether the matching text segments in the options should be highlighted */
-  "matchTextSegments"?: WarpCombobox['matchTextSegments'];
+  "prop:matchTextSegments"?: WarpCombobox["matchTextSegments"];
   /** Disable client-side static filtering */
-  "disable-static-filtering"?: WarpCombobox['disableStaticFiltering'];
+  "bool:disable-static-filtering"?: WarpCombobox["disableStaticFiltering"];
   /** Disable client-side static filtering */
-  "disableStaticFiltering"?: WarpCombobox['disableStaticFiltering'];
+  "prop:disableStaticFiltering"?: WarpCombobox["disableStaticFiltering"];
   /** Renders the input field in an invalid state */
-  "invalid"?: WarpCombobox['invalid'];
+  "prop:invalid"?: WarpCombobox["invalid"];
   /** The content to display as the help text */
-  "help-text"?: WarpCombobox['helpText'];
+  "attr:help-text"?: WarpCombobox["helpText"];
   /** The content to display as the help text */
-  "helpText"?: WarpCombobox['helpText'];
+  "prop:helpText"?: WarpCombobox["helpText"];
   /** Whether the element is disabled */
-  "disabled"?: WarpCombobox['disabled'];
+  "prop:disabled"?: WarpCombobox["disabled"];
   /** Whether the element is required */
-  "required"?: WarpCombobox['required'];
+  "prop:required"?: WarpCombobox["required"];
   /** Whether to show optional text */
-  "optional"?: WarpCombobox['optional'];
+  "prop:optional"?: WarpCombobox["optional"];
   /** Name attribute for form submission */
-  "name"?: WarpCombobox['name'];
+  "prop:name"?: WarpCombobox["name"];
   /** Autocomplete attribute for the input field */
-  "autocomplete"?: WarpCombobox['autocomplete'];
+  "prop:autocomplete"?: WarpCombobox["autocomplete"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
-}
+export type WarpPageIndicatorProps = {
+  /** Currently selected page (1-based index, clamped to valid range) */
+  "selected-page"?: WarpPageIndicator["selectedPage"];
+  /** Currently selected page (1-based index, clamped to valid range) */
+  selectedPage?: WarpPageIndicator["selectedPage"];
+  /** Total number of pages (minimum 1) */
+  "page-count"?: WarpPageIndicator["pageCount"];
+  /** Total number of pages (minimum 1) */
+  pageCount?: WarpPageIndicator["pageCount"];
+};
+
+export type WarpPageIndicatorSolidJsProps = {
+  /** Currently selected page (1-based index, clamped to valid range) */
+  "attr:selected-page"?: WarpPageIndicator["selectedPage"];
+  /** Currently selected page (1-based index, clamped to valid range) */
+  "prop:selectedPage"?: WarpPageIndicator["selectedPage"];
+  /** Total number of pages (minimum 1) */
+  "attr:page-count"?: WarpPageIndicator["pageCount"];
+  /** Total number of pages (minimum 1) */
+  "prop:pageCount"?: WarpPageIndicator["pageCount"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
-  export type CustomElements = {
+export type WarpTabProps = {
+  /**  */
+  for?: WarpTab["for"];
+  /**  */
+  active?: WarpTab["active"];
+  /**  */
+  over?: WarpTab["over"];
+};
 
+export type WarpTabSolidJsProps = {
+  /**  */
+  "prop:for"?: WarpTab["for"];
+  /**  */
+  "prop:active"?: WarpTab["active"];
+  /**  */
+  "prop:over"?: WarpTab["over"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
+export type WarpTabPanelProps = {
+  /**  */
+  hidden?: WarpTabPanel["hidden"];
+};
+
+export type WarpTabPanelSolidJsProps = {
+  /**  */
+  "prop:hidden"?: WarpTabPanel["hidden"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
+export type WarpTabsProps = {
+  /**  */
+  active?: WarpTabs["active"];
+
+  /**  */
+  onchange?: (e: CustomEvent) => void;
+};
+
+export type WarpTabsSolidJsProps = {
+  /**  */
+  "prop:active"?: WarpTabs["active"];
+  /**  */
+  "on:change"?: (e: CustomEvent) => void;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
+export type WIconProps = {
+  /** Icon filename (without .svg) */
+  name?: WIcon["name"];
+  /** Size: small, medium, large or pixel value (e.g. "32px") */
+  size?: WIcon["size"];
+  /** Locale used in CDN URL */
+  locale?: WIcon["locale"];
+};
+
+export type WIconSolidJsProps = {
+  /** Icon filename (without .svg) */
+  "prop:name"?: WIcon["name"];
+  /** Size: small, medium, large or pixel value (e.g. "32px") */
+  "prop:size"?: WIcon["size"];
+  /** Locale used in CDN URL */
+  "prop:locale"?: WIcon["locale"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
+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>;
+   * 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>;
 
+  /**
+   * 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>;
 
   /**
-     * 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>;
+   * 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
+   * - `small`: undefined
+   * - `href`: undefined
+   * - `disabled`: undefined
+   * - `target`: undefined
+   * - `rel`: undefined
+   * - `full-width`/`fullWidth`: undefined
+   */
+  "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)
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   */
+  "w-button": Partial<WarpButtonProps & BaseProps<WarpButton> & 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 
- * - `small`: undefined 
- * - `href`: undefined 
- * - `disabled`: undefined 
- * - `target`: undefined 
- * - `rel`: undefined 
- * - `full-width`/`fullWidth`: undefined 
-  */
-    "w-link": Partial<WarpLinkProps & BaseProps<WarpLink> & 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
+  >;
 
+  /**
+   * `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>;
 
   /**
-     * 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)
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `resetFormControl() => void`: undefined
-  */
-    "w-button": Partial<WarpButtonProps & BaseProps<WarpButton> & 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
+  >;
 
   /**
-     * 
- * 
- * ## 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>;
+   * 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>;
 
+  /**
+   * 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
+  >;
 
   /**
-     * `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>;
+   * 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>;
 
+  /**
+   * A dropdown component for selecting a single value.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `auto-focus`/`autoFocus`: Whether the element should receive focus on render.
+   * - `autofocus`: Whether the element should receive focus on render
+   * - `help-text`/`helpText`: The content displayed as the help text. Paired with `invalid` to show the text as a validation error.
+   * - `invalid`: Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.
+   * - `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.
+   * - `readonly`: Renders the field in a readonly state.
+   * - `name`: undefined
+   * - `value`: undefined
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   * - `handleKeyDown(event: KeyboardEvent) => void`: undefined
+   * - `onChange({ target }) => void`: undefined
+   */
+  "w-select": Partial<WarpSelectProps & BaseProps<WarpSelect> & 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>;
+   * 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
+   * - `readonly`: undefined
+   * - `required`: undefined
+   * - `type`: undefined
+   * - `value`: undefined
+   * - `name`: undefined
+   * - `step`: undefined
+   * - `autocomplete`: 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.
+   *
+   * - `resetFormControl() => void`: undefined
+   * - `handler(e: Event) => void`: undefined
+   * - `prefixSlotChange() => void`: undefined
+   * - `suffixSlotChange() => void`: undefined
+   */
+  "w-textfield": Partial<
+    WarpTextFieldProps & BaseProps<WarpTextField> & 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>;
 
   /**
-     * 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>;
+   * 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
+  >;
 
+  /**
+   * 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
+  >;
 
   /**
-     * 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>;
+   *
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `init() => void`: undefined
+   * - `get(id: string | number) => ToastInternal | undefined`: undefined
+   * - `set(toast: ToastOptions) => Map<string | number, ToastInternal>`: undefined
+   * - `del(id: string | number) => Promise<boolean>`: undefined
+   */
+  "w-toast-container": Partial<
+    WarpToastContainerProps & BaseProps<WarpToastContainer> & 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)
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   */
+  "w-datepicker": Partial<
+    WarpDatepickerProps & BaseProps<WarpDatepicker> & 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>;
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `name`: undefined
+   * - `value`: undefined
+   * - `checked`: undefined
+   * - `disabled`: undefined
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `change`: undefined
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   */
+  "w-switch": Partial<WarpSwitchProps & BaseProps<WarpSwitch> & 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
+   * - `name`: Name attribute for form submission
+   * - `autocomplete`: Autocomplete attribute for the input field
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   */
+  "w-combobox": Partial<
+    WarpComboboxProps & BaseProps<WarpCombobox> & 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>;
+   * 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)
+   */
+  "w-page-indicator": Partial<
+    WarpPageIndicatorProps & BaseProps<WarpPageIndicator> & 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.
+   *
+   * - `for`: undefined
+   * - `active`: undefined
+   * - `over`: undefined
+   */
+  "w-tab": Partial<WarpTabProps & BaseProps<WarpTab> & BaseEvents>;
 
   /**
-     * A dropdown component for selecting a single value.
- * 
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `auto-focus`/`autoFocus`: Whether the element should receive focus on render. 
- * - `autofocus`: Whether the element should receive focus on render 
- * - `help-text`/`helpText`: The content displayed as the help text. Paired with `invalid` to show the text as a validation error. 
- * - `invalid`: Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error. 
- * - `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. 
- * - `readonly`: Renders the field in a readonly state. 
- * - `name`: undefined 
- * - `value`: undefined 
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `resetFormControl() => void`: undefined
- * - `handleKeyDown(event: KeyboardEvent) => void`: undefined
- * - `onChange({ target }) => void`: undefined
-  */
-    "w-select": Partial<WarpSelectProps & BaseProps<WarpSelect> & 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.
+   *
+   * - `hidden`: undefined
+   */
+  "w-tab-panel": Partial<
+    WarpTabPanelProps & BaseProps<WarpTabPanel> & 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
+   * - `tabs`: undefined (property only) (readonly)
+   * - `activeTab`: undefined (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `change`: undefined
+   */
+  "w-tabs": Partial<WarpTabsProps & BaseProps<WarpTabs> & 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 
- * - `readonly`: undefined 
- * - `required`: undefined 
- * - `type`: undefined 
- * - `value`: undefined 
- * - `name`: undefined 
- * - `step`: undefined 
- * - `autocomplete`: 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.
- * 
- * - `resetFormControl() => void`: undefined
- * - `handler(e: Event) => void`: undefined
- * - `prefixSlotChange() => void`: undefined
- * - `suffixSlotChange() => void`: undefined
-  */
-    "w-textfield": Partial<WarpTextFieldProps & BaseProps<WarpTextField> & BaseEvents>;
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `name`: Icon filename (without .svg)
+   * - `size`: Size: small, medium, large or pixel value (e.g. "32px")
+   * - `locale`: Locale used in CDN URL
+   */
+  "w-icon": Partial<WIconProps & BaseProps<WIcon> & BaseEvents>;
+};
 
+export type CustomElementsSolidJs = {
+  /**
+   * 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 & WarpAffixSolidJsProps & BaseProps<WarpAffix> & 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>;
+   * 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 & WarpAlertSolidJsProps & BaseProps<WarpAlert> & 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
+   * - `small`: undefined
+   * - `href`: undefined
+   * - `disabled`: undefined
+   * - `target`: undefined
+   * - `rel`: undefined
+   * - `full-width`/`fullWidth`: undefined
+   */
+  "w-link": Partial<
+    WarpLinkProps & WarpLinkSolidJsProps & BaseProps<WarpLink> & 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>;
+   * 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)
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   */
+  "w-button": Partial<
+    WarpButtonProps &
+      WarpButtonSolidJsProps &
+      BaseProps<WarpButton> &
+      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 &
+      WarpAttentionSolidJsProps &
+      BaseProps<WarpAttention> &
+      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>;
+   * `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 & WarpBadgeSolidJsProps & 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 & WarpBoxSolidJsProps & BaseProps<WarpBox> & BaseEvents
+  >;
 
   /**
-     * 
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `init() => void`: undefined
- * - `get(id: string | number) => ToastInternal | undefined`: undefined
- * - `set(toast: ToastOptions) => Map<string | number, ToastInternal>`: undefined
- * - `del(id: string | number) => Promise<boolean>`: undefined
-  */
-    "w-toast-container": Partial<WarpToastContainerProps & BaseProps<WarpToastContainer> & 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 &
+      WarpBreadcrumbsSolidJsProps &
+      BaseProps<WarpBreadcrumbs> &
+      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 & WarpCardSolidJsProps & BaseProps<WarpCard> & 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)
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `resetFormControl() => void`: undefined
-  */
-    "w-datepicker": Partial<WarpDatepickerProps & BaseProps<WarpDatepicker> & 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 &
+      WarpExpandableSolidJsProps &
+      BaseProps<WarpExpandable> &
+      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 & WarpPillSolidJsProps & BaseProps<WarpPill> & BaseEvents
+  >;
 
   /**
-     * 
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `name`: undefined 
- * - `value`: undefined 
- * - `checked`: undefined 
- * - `disabled`: undefined 
- * 
- * ## Events
- * 
- * Events that will be emitted by the component.
- * 
- * - `change`: undefined
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `resetFormControl() => void`: undefined
-  */
-    "w-switch": Partial<WarpSwitchProps & BaseProps<WarpSwitch> & BaseEvents>;
+   * A dropdown component for selecting a single value.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `auto-focus`/`autoFocus`: Whether the element should receive focus on render.
+   * - `autofocus`: Whether the element should receive focus on render
+   * - `help-text`/`helpText`: The content displayed as the help text. Paired with `invalid` to show the text as a validation error.
+   * - `invalid`: Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.
+   * - `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.
+   * - `readonly`: Renders the field in a readonly state.
+   * - `name`: undefined
+   * - `value`: undefined
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   * - `handleKeyDown(event: KeyboardEvent) => void`: undefined
+   * - `onChange({ target }) => void`: undefined
+   */
+  "w-select": Partial<
+    WarpSelectProps &
+      WarpSelectSolidJsProps &
+      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
+   * - `readonly`: undefined
+   * - `required`: undefined
+   * - `type`: undefined
+   * - `value`: undefined
+   * - `name`: undefined
+   * - `step`: undefined
+   * - `autocomplete`: 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.
+   *
+   * - `resetFormControl() => void`: undefined
+   * - `handler(e: Event) => void`: undefined
+   * - `prefixSlotChange() => void`: undefined
+   * - `suffixSlotChange() => void`: undefined
+   */
+  "w-textfield": Partial<
+    WarpTextFieldProps &
+      WarpTextFieldSolidJsProps &
+      BaseProps<WarpTextField> &
+      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 
- * - `name`: Name attribute for form submission 
- * - `autocomplete`: Autocomplete attribute for the input field 
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `resetFormControl() => void`: undefined
-  */
-    "w-combobox": Partial<WarpComboboxProps & BaseProps<WarpCombobox> & 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 & ModalMainSolidJsProps & BaseProps<ModalMain> & BaseEvents
+  >;
 
-export type CustomCssProperties = {
+  /**
+   * 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 &
+      ModalHeaderSolidJsProps &
+      BaseProps<ModalHeader> &
+      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> &
+      BaseEvents
+  >;
 
+  /**
+   *
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `init() => void`: undefined
+   * - `get(id: string | number) => ToastInternal | undefined`: undefined
+   * - `set(toast: ToastOptions) => Map<string | number, ToastInternal>`: undefined
+   * - `del(id: string | number) => Promise<boolean>`: undefined
+   */
+  "w-toast-container": Partial<
+    WarpToastContainerProps &
+      WarpToastContainerSolidJsProps &
+      BaseProps<WarpToastContainer> &
+      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)
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   */
+  "w-datepicker": Partial<
+    WarpDatepickerProps &
+      WarpDatepickerSolidJsProps &
+      BaseProps<WarpDatepicker> &
+      BaseEvents
+  >;
+
+  /**
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `name`: undefined
+   * - `value`: undefined
+   * - `checked`: undefined
+   * - `disabled`: undefined
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `change`: undefined
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   */
+  "w-switch": Partial<
+    WarpSwitchProps &
+      WarpSwitchSolidJsProps &
+      BaseProps<WarpSwitch> &
+      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
+   * - `name`: Name attribute for form submission
+   * - `autocomplete`: Autocomplete attribute for the input field
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   */
+  "w-combobox": Partial<
+    WarpComboboxProps &
+      WarpComboboxSolidJsProps &
+      BaseProps<WarpCombobox> &
+      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)
+   */
+  "w-page-indicator": Partial<
+    WarpPageIndicatorProps &
+      WarpPageIndicatorSolidJsProps &
+      BaseProps<WarpPageIndicator> &
+      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.
+   *
+   * - `for`: undefined
+   * - `active`: undefined
+   * - `over`: undefined
+   */
+  "w-tab": Partial<
+    WarpTabProps & WarpTabSolidJsProps & 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.
+   *
+   * - `hidden`: undefined
+   */
+  "w-tab-panel": Partial<
+    WarpTabPanelProps &
+      WarpTabPanelSolidJsProps &
+      BaseProps<WarpTabPanel> &
+      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
+   * - `tabs`: undefined (property only) (readonly)
+   * - `activeTab`: undefined (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `change`: undefined
+   */
+  "w-tabs": Partial<
+    WarpTabsProps & WarpTabsSolidJsProps & BaseProps<WarpTabs> & BaseEvents
+  >;
+
+  /**
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `name`: Icon filename (without .svg)
+   * - `size`: Size: small, medium, large or pixel value (e.g. "32px")
+   * - `locale`: Locale used in CDN URL
+   */
+  "w-icon": Partial<
+    WIconProps & WIconSolidJsProps & BaseProps<WIcon> & BaseEvents
+  >;
+};
 
-declare module 'react' {
+export type CustomCssProperties = {};
+
+declare module "react" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'preact' {
+declare module "preact" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module '@builder.io/qwik' {
+declare module "@builder.io/qwik" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module '@stencil/core' {
+declare module "@stencil/core" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'hono/jsx' {
+declare module "hono/jsx" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'react-native' {
+declare module "react-native" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
+declare module "solid-js" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElementsSolidJs {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
 declare global {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}