
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 { WarpDatepicker } from "./packages/datepicker/datepicker.ts";
import type { WarpSwitch } from "./packages/switch/index.ts";
import type { WarpCombobox } from "./packages/combobox/index.ts";

/**
 * This type can be used to create scoped tags for your components.
 *
 * Usage:
 *
 * ```ts
 * import type { ScopedElements } from "path/to/library/jsx-integration";
 *
 * declare module "my-library" {
 *   namespace JSX {
 *     interface IntrinsicElements
 *       extends ScopedElements<'test-', ''> {}
 *   }
 * }
 * ```
 *
 * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
 */
export type ScopedElements<
  Prefix extends string = "",
  Suffix extends string = ""
> = {
  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
};

type BaseProps<T extends HTMLElement> = {

  /** Content added between the opening and closing tags of the element */
  children?: any;
  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
  class?: string;
  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
  className?: string;
  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
  classList?: Record<string, boolean | undefined>;
  /** Specifies the text direction of the element. */
  dir?: "ltr" | "rtl";
  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
  exportparts?: string;
  /** For <label> and <output>, lets you associate the label with some control. */
  htmlFor?: string;
  /** Specifies whether the element should be hidden. */
  hidden?: boolean | string;
  /** A unique identifier for the element. */
  id?: string;
  /** Keys tell React which array item each component corresponds to */
  key?: string | number;
  /** Specifies the language of the element. */
  lang?: string;
  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
  part?: string;
  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
  ref?: T | ((e: T) => void);
  /** Adds a reference for a custom element slot */
  slot?: string;
  /** Prop for setting inline styles */
  style?: Record<string, string | number>;
  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
  tabIndex?: number;
  /** Specifies the tooltip text for the element. */
  title?: string;
  /** Passing 'no' excludes the element content from being translated. */
  translate?: "yes" | "no";
  /** The popover global attribute is used to designate an element as a popover element. */
  popover?: "auto" | "hint" | "manual";
  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
  popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
  /** Specifies the action to be performed on a popover element being controlled by a control element. */
  popovertargetaction?: "show" | "hide" | "toggle";

} ;

type BaseEvents = {


};



export type WarpAffixProps = {
  /**  */
  "aria-label"?: WarpAffix['ariaLabel'];
  /**  */
  "ariaLabel"?: WarpAffix['ariaLabel'];
  /** Add this property to render a clickable Warp close icon.

Set an `aria-label` that explains the action when using this. */
  "clear"?: WarpAffix['clear'];
  /** Add this property to render a clickable Warp search icon.

Set an `aria-label` that explains the action when using this. */
  "search"?: WarpAffix['search'];
  /**  */
  "label"?: WarpAffix['label'];


}


export type WarpAlertProps = {
  /**  */
  "variant"?: WarpAlert['variant'];
  /**  */
  "show"?: WarpAlert['show'];
  /**  */
  "role"?: WarpAlert['role'];


}


export type WarpLinkProps = {
  /**  */
  "autofocus"?: WarpLink['autofocus'];
  /**  */
  "variant"?: WarpLink['variant'];
  /**  */
  "small"?: WarpLink['small'];
  /**  */
  "href"?: WarpLink['href'];
  /**  */
  "disabled"?: WarpLink['disabled'];
  /**  */
  "target"?: WarpLink['target'];
  /**  */
  "rel"?: WarpLink['rel'];
  /**  */
  "full-width"?: WarpLink['fullWidth'];
  /**  */
  "fullWidth"?: WarpLink['fullWidth'];


}


export type WarpButtonProps = {
  /**  */
  "type"?: WarpButton['type'];
  /**  */
  "autofocus"?: WarpButton['autofocus'];
  /**  */
  "variant"?: WarpButton['variant'];
  /**  */
  "quiet"?: WarpButton['quiet'];
  /**  */
  "small"?: WarpButton['small'];
  /**  */
  "loading"?: WarpButton['loading'];
  /**  */
  "href"?: WarpButton['href'];
  /**  */
  "target"?: WarpButton['target'];
  /**  */
  "rel"?: WarpButton['rel'];
  /**  */
  "full-width"?: WarpButton['fullWidth'];
  /**  */
  "fullWidth"?: WarpButton['fullWidth'];
  /**  */
  "button-class"?: WarpButton['buttonClass'];
  /**  */
  "buttonClass"?: WarpButton['buttonClass'];
  /**  */
  "name"?: WarpButton['name'];
  /**  */
  "value"?: WarpButton['value'];
  /**  */
  "ariaValueTextLoading"?: WarpButton['ariaValueTextLoading'];


}


export type WarpAttentionProps = {
  /**  */
  "show"?: WarpAttention['show'];
  /**  */
  "placement"?: WarpAttention['placement'];
  /**  */
  "tooltip"?: WarpAttention['tooltip'];
  /**  */
  "callout"?: WarpAttention['callout'];
  /**  */
  "popover"?: WarpAttention['popover'];
  /**  */
  "highlight"?: WarpAttention['highlight'];
  /**  */
  "can-close"?: WarpAttention['canClose'];
  /**  */
  "canClose"?: WarpAttention['canClose'];
  /**  */
  "no-arrow"?: WarpAttention['noArrow'];
  /**  */
  "noArrow"?: WarpAttention['noArrow'];
  /**  */
  "distance"?: WarpAttention['distance'];
  /**  */
  "skidding"?: WarpAttention['skidding'];
  /**  */
  "flip"?: WarpAttention['flip'];
  /**  */
  "cross-axis"?: WarpAttention['crossAxis'];
  /**  */
  "crossAxis"?: WarpAttention['crossAxis'];
  /**  */
  "fallback-placements"?: WarpAttention['fallbackPlacements'];
  /**  */
  "fallbackPlacements"?: WarpAttention['fallbackPlacements'];
  /**  */
  "_initialPlacement"?: WarpAttention['_initialPlacement'];
  /**  */
  "_actualDirection"?: WarpAttention['_actualDirection'];


}


export type WarpBadgeProps = {
  /**  */
  "variant"?: WarpBadge['variant'];
  /**  */
  "position"?: WarpBadge['position'];


}


export type WarpBoxProps = {
  /**  */
  "bleed"?: WarpBox['bleed'];
  /**  */
  "bordered"?: WarpBox['bordered'];
  /**  */
  "info"?: WarpBox['info'];
  /**  */
  "neutral"?: WarpBox['neutral'];
  /**  */
  "role"?: WarpBox['role'];


}


export type WarpBreadcrumbsProps = {
  /**  */
  "aria-label"?: WarpBreadcrumbs['ariaLabel'];
  /**  */
  "ariaLabel"?: WarpBreadcrumbs['ariaLabel'];


}


export type WarpCardProps = {
  /**  */
  "selected"?: WarpCard['selected'];
  /**  */
  "flat"?: WarpCard['flat'];
  /**  */
  "clickable"?: WarpCard['clickable'];
  /**  */
  "buttonText"?: WarpCard['buttonText'];


}


export type WarpExpandableProps = {
  /**  */
  "expanded"?: WarpExpandable['expanded'];
  /**  */
  "title"?: WarpExpandable['title'];
  /**  */
  "box"?: WarpExpandable['box'];
  /**  */
  "bleed"?: WarpExpandable['bleed'];
  /**  */
  "button-class"?: WarpExpandable['buttonClass'];
  /**  */
  "buttonClass"?: WarpExpandable['buttonClass'];
  /**  */
  "content-class"?: WarpExpandable['contentClass'];
  /**  */
  "contentClass"?: WarpExpandable['contentClass'];
  /**  */
  "no-chevron"?: WarpExpandable['noChevron'];
  /**  */
  "noChevron"?: WarpExpandable['noChevron'];
  /**  */
  "animated"?: WarpExpandable['animated'];
  /**  */
  "heading-level"?: WarpExpandable['headingLevel'];
  /**  */
  "headingLevel"?: WarpExpandable['headingLevel'];
  /**  */
  "_hasTitle"?: WarpExpandable['_hasTitle'];
  /**  */
  "_showChevronUp"?: WarpExpandable['_showChevronUp'];


}


export type WarpPillProps = {
  /**  */
  "can-close"?: WarpPill['canClose'];
  /**  */
  "canClose"?: WarpPill['canClose'];
  /**  */
  "suggestion"?: WarpPill['suggestion'];
  /** @deprecated Used "open-arial-label" instead.  */
  "open-sr-label"?: WarpPill['openSrLabel'];
  /** @deprecated Used "open-arial-label" instead.  */
  "openSrLabel"?: WarpPill['openSrLabel'];
  /**  */
  "open-aria-label"?: WarpPill['openAriaLabel'];
  /**  */
  "openAriaLabel"?: WarpPill['openAriaLabel'];
  /** @deprecated Used "close-arial-label" instead.  */
  "close-sr-label"?: WarpPill['closeSrLabel'];
  /** @deprecated Used "close-arial-label" instead.  */
  "closeSrLabel"?: WarpPill['closeSrLabel'];
  /**  */
  "close-aria-label"?: WarpPill['closeAriaLabel'];
  /**  */
  "closeAriaLabel"?: WarpPill['closeAriaLabel'];
  /**  */
  "openFilterSrText"?: WarpPill['openFilterSrText'];
  /**  */
  "removeFilterSrText"?: WarpPill['removeFilterSrText'];

  /**  */
  "onw-pill-click"?: (e: CustomEvent<CustomEvent>) => void;
  /**  */
  "onw-pill-close"?: (e: CustomEvent<CustomEvent>) => void;
}


export type WarpSelectProps = {
  /** @deprecated Use the native `autofocus` attribute instead. - Whether the element should receive focus on render. */
  "auto-focus"?: WarpSelect['autoFocus'];
  /** @deprecated Use the native `autofocus` attribute instead. - Whether the element should receive focus on render. */
  "autoFocus"?: WarpSelect['autoFocus'];
  /** Whether the element should receive focus on render */
  "autofocus"?: WarpSelect['autofocus'];
  /** The content displayed as the help text. Paired with `invalid` to show the text as a validation error. */
  "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'];
  /** Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error. */
  "invalid"?: WarpSelect['invalid'];
  /** @deprecated Use `help-text` instead and only set it if you want to display the help text. - Whether to always show a hint. */
  "always"?: WarpSelect['always'];
  /** @deprecated Use `help-text` instead. - The content displayed as the help text. */
  "hint"?: WarpSelect['hint'];
  /** The content to disply as the label */
  "label"?: WarpSelect['label'];
  /** Whether to show optional text */
  "optional"?: WarpSelect['optional'];
  /** Renders the field in a disabled state. */
  "disabled"?: WarpSelect['disabled'];
  /** @deprecated Use the native readonly attribute instead. - Renders the field in a readonly state. */
  "read-only"?: WarpSelect['readOnly'];
  /** @deprecated Use the native readonly attribute instead. - Renders the field in a readonly state. */
  "readOnly"?: WarpSelect['readOnly'];
  /** Renders the field in a readonly state. */
  "readonly"?: WarpSelect['readonly'];
  /**  */
  "name"?: WarpSelect['name'];
  /**  */
  "value"?: WarpSelect['value'];


}


export type WarpTextFieldProps = {
  /**  */
  "disabled"?: WarpTextField['disabled'];
  /**  */
  "invalid"?: WarpTextField['invalid'];
  /**  */
  "id"?: WarpTextField['id'];
  /**  */
  "label"?: WarpTextField['label'];
  /**  */
  "help-text"?: WarpTextField['helpText'];
  /**  */
  "helpText"?: WarpTextField['helpText'];
  /**  */
  "size"?: WarpTextField['size'];
  /**  */
  "max"?: WarpTextField['max'];
  /**  */
  "min"?: WarpTextField['min'];
  /**  */
  "min-length"?: WarpTextField['minLength'];
  /**  */
  "minLength"?: WarpTextField['minLength'];
  /**  */
  "max-length"?: WarpTextField['maxLength'];
  /**  */
  "maxLength"?: WarpTextField['maxLength'];
  /**  */
  "pattern"?: WarpTextField['pattern'];
  /**  */
  "placeholder"?: WarpTextField['placeholder'];
  /** @deprecated Use the native readonly attribute instead.  */
  "read-only"?: WarpTextField['readOnly'];
  /** @deprecated Use the native readonly attribute instead.  */
  "readOnly"?: WarpTextField['readOnly'];
  /**  */
  "readonly"?: WarpTextField['readonly'];
  /**  */
  "required"?: WarpTextField['required'];
  /**  */
  "type"?: WarpTextField['type'];
  /**  */
  "value"?: WarpTextField['value'];
  /**  */
  "name"?: WarpTextField['name'];
  /**  */
  "step"?: WarpTextField['step'];
  /**  */
  "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

https://css-tricks.com/input-masking/
https://filamentgroup.github.io/politespace/demo/demo.html */
  "formatter"?: WarpTextField['formatter'];


}


export type ModalFooterProps = {


}


export type ModalHeaderProps = {
  /**  */
  "title"?: ModalHeader['title'];
  /**  */
  "back"?: ModalHeader['back'];
  /**  */
  "no-close"?: ModalHeader['noClose'];
  /**  */
  "noClose"?: ModalHeader['noClose'];
  /**  */
  "titleEl"?: ModalHeader['titleEl'];

  /**  */
  "onbackClicked"?: (e: CustomEvent<CustomEvent>) => void;
}


export type ModalMainProps = {
  /**  */
  "show"?: ModalMain['show'];
  /**  */
  "content-id"?: ModalMain['contentId'];
  /**  */
  "contentId"?: ModalMain['contentId'];
  /**  */
  "ignore-backdrop-clicks"?: ModalMain['ignoreBackdropClicks'];
  /**  */
  "ignoreBackdropClicks"?: ModalMain['ignoreBackdropClicks'];
  /**  */
  "dialogEl"?: ModalMain['dialogEl'];
  /**  */
  "dialogInnerEl"?: ModalMain['dialogInnerEl'];
  /**  */
  "contentEl"?: ModalMain['contentEl'];

  /**  */
  "onshown"?: (e: CustomEvent<CustomEvent>) => void;
  /**  */
  "onhidden"?: (e: CustomEvent<CustomEvent>) => void;
}


export type WarpToastContainerProps = {


}


export type WarpDatepickerProps = {
  /**  */
  "label"?: WarpDatepicker['label'];
  /** Takes precedence over the `<html>` lang attribute. */
  "lang"?: WarpDatepicker['lang'];
  /**  */
  "name"?: WarpDatepicker['name'];
  /**  */
  "value"?: WarpDatepicker['value'];
  /** Decides the format of the date as shown in the calendar header.

The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
  "header-format"?: WarpDatepicker['headerFormat'];
  /** Decides the format of the date as shown in the calendar header.

The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
  "headerFormat"?: WarpDatepicker['headerFormat'];
  /** Decides the format of the weekday as shown above the grid of dates in the calendar.

The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
  "weekday-format"?: WarpDatepicker['weekdayFormat'];
  /** Decides the format of the weekday as shown above the grid of dates in the calendar.

The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
  "weekdayFormat"?: WarpDatepicker['weekdayFormat'];
  /** Decides the format of the day in the calendar as read to screen readers.

The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
  "day-format"?: WarpDatepicker['dayFormat'];
  /** Decides the format of the day in the calendar as read to screen readers.

The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
  "dayFormat"?: WarpDatepicker['dayFormat'];
  /** Lets you control if a date in the calendar should be disabled.

This needs to be set on the element instance in JavaScript, not as an HTML attribute. */
  "isDayDisabled"?: WarpDatepicker['isDayDisabled'];
  /**  */
  "isCalendarOpen"?: WarpDatepicker['isCalendarOpen'];
  /**  */
  "navigationDate"?: WarpDatepicker['navigationDate'];
  /**  */
  "calendar"?: WarpDatepicker['calendar'];
  /**  */
  "input"?: WarpDatepicker['input'];
  /**  */
  "toggleButton"?: WarpDatepicker['toggleButton'];
  /**  */
  "wrapper"?: WarpDatepicker['wrapper'];
  /** This is the first focusable element, needed for the modal focus trap.

Don't cache this and other `@query` fields from inside the calendar modal.
They work the first time, but once the calendar is closed and reopened
the query will point to an element that doesn't exist anymore. */
  "previousMonthButton"?: WarpDatepicker['previousMonthButton'];
  /**  */
  "todayCell"?: WarpDatepicker['todayCell'];
  /**  */
  "selectedCell"?: WarpDatepicker['selectedCell'];


}


export type WarpSwitchProps = {
  /**  */
  "name"?: WarpSwitch['name'];
  /**  */
  "value"?: WarpSwitch['value'];
  /**  */
  "checked"?: WarpSwitch['checked'];
  /**  */
  "disabled"?: WarpSwitch['disabled'];

  /**  */
  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
}


export type WarpComboboxProps = {
  /** The available options to select from */
  "options"?: WarpCombobox['options'];
  /** Label above input */
  "label"?: WarpCombobox['label'];
  /** Input placeholder */
  "placeholder"?: WarpCombobox['placeholder'];
  /** The input value */
  "value"?: WarpCombobox['value'];
  /** Whether the popover opens when focus is on the text field */
  "open-on-focus"?: WarpCombobox['openOnFocus'];
  /** Whether the popover opens when focus is on the text field */
  "openOnFocus"?: WarpCombobox['openOnFocus'];
  /** Select active option on blur */
  "select-on-blur"?: WarpCombobox['selectOnBlur'];
  /** Select active option on blur */
  "selectOnBlur"?: WarpCombobox['selectOnBlur'];
  /** Whether the matching text segments in the options should be highlighted */
  "match-text-segments"?: WarpCombobox['matchTextSegments'];
  /** Whether the matching text segments in the options should be highlighted */
  "matchTextSegments"?: WarpCombobox['matchTextSegments'];
  /** Disable client-side static filtering */
  "disable-static-filtering"?: WarpCombobox['disableStaticFiltering'];
  /** Disable client-side static filtering */
  "disableStaticFiltering"?: WarpCombobox['disableStaticFiltering'];
  /** Renders the input field in an invalid state */
  "invalid"?: WarpCombobox['invalid'];
  /** The content to display as the help text */
  "help-text"?: WarpCombobox['helpText'];
  /** The content to display as the help text */
  "helpText"?: WarpCombobox['helpText'];
  /** Whether the element is disabled */
  "disabled"?: WarpCombobox['disabled'];
  /** Whether the element is required */
  "required"?: WarpCombobox['required'];
  /** Whether to show optional text */
  "optional"?: WarpCombobox['optional'];
  /** Name attribute for form submission */
  "name"?: WarpCombobox['name'];
  /** Autocomplete attribute for the input field */
  "autocomplete"?: WarpCombobox['autocomplete'];


}

  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>;


  /**
     * 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>;


  /**
     * 
 * 
 * ## 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>;


  /**
     * 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>;


  /**
     * 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>;


  /**
     * 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>;


  /**
     * 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>;


  /**
     * The footer section of a modal, typically where you place actions.
 * 
 * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
  */
    "w-modal-footer": Partial<ModalFooterProps & BaseProps<ModalFooter> & BaseEvents>;


  /**
     * The header section of a modal, typically where you place the title and a close button.
 * 
 * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
 * 
 * ## Attributes & Properties
 * 
 * Component attributes and properties that can be applied to the element or by using JavaScript.
 * 
 * - `title`: undefined 
 * - `back`: undefined 
 * - `no-close`/`noClose`: undefined 
 * - `titleEl`: undefined (property only)
 * - `titleClasses`: undefined (property only) (readonly)
 * - `backButton`: undefined (property only) (readonly)
 * - `closeButton`: undefined (property only) (readonly)
 * 
 * ## Events
 * 
 * Events that will be emitted by the component.
 * 
 * - `backClicked`: undefined
 * 
 * ## Slots
 * 
 * Areas where markup can be added to the component.
 * 
 * - `top`: Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.
 * 
 * ## Methods
 * 
 * Methods that can be called to access component functionality.
 * 
 * - `emitBack() => void`: undefined
 * - `handleTopSlotChange(slotEvent) => void`: undefined
  */
    "w-modal-header": Partial<ModalHeaderProps & BaseProps<ModalHeader> & BaseEvents>;


  /**
     * Modals (or dialogs) display important information that users need to acknowledge.
 * 
 * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
 * 
 * ## Attributes & Properties
 * 
 * Component attributes and properties that can be applied to the element or by using JavaScript.
 * 
 * - `show`: undefined 
 * - `content-id`/`contentId`: undefined 
 * - `ignore-backdrop-clicks`/`ignoreBackdropClicks`: undefined 
 * - `dialogEl`: undefined (property only)
 * - `dialogInnerEl`: undefined (property only)
 * - `contentEl`: undefined (property only)
 * 
 * ## Events
 * 
 * Events that will be emitted by the component.
 * 
 * - `shown`: undefined
 * - `hidden`: undefined
 * 
 * ## Slots
 * 
 * Areas where markup can be added to the component.
 * 
 * - `header`: Typically where you would use the `w-modal-header` component.
 * - `content`: The main content of the modal.
 * - `footer`: Typically where you would use the `w-modal-footer` component, for things like actions.
 * 
 * ## Methods
 * 
 * Methods that can be called to access component functionality.
 * 
 * - `open() => void`: undefined
 * - `close() => void`: undefined
 * - `handleListeners(verb = 'addEventListener') => void`: undefined
 * - `eventPreventer(evt: Event) => void`: undefined
 * - `closeOnBackdropClick(evt: MouseEvent) => void`: undefined
 * - `interceptEscape(evt: KeyboardEvent) => void`: undefined
 * - `modifyBorderRadius() => void`: undefined
  */
    "w-modal": Partial<ModalMainProps & BaseProps<ModalMain> & BaseEvents>;


  /**
     * 
 * 
 * ## 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>;


  /**
     * 
 * 
 * ## 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>;
  }

export type CustomCssProperties = {

}


declare module 'react' {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module 'preact' {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module '@builder.io/qwik' {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module '@stencil/core' {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module 'hono/jsx' {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module 'react-native' {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare global {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}
