@warp-ds/elements 2.4.0-next.4 → 2.4.0-next.6

package/dist/index.d.ts

@@ -19,6 +19,20 @@ 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";
+import type { WarpDeadToggle } from "./packages/deadtoggle/index.ts";
+import type { WarpPageIndicator } from "./packages/pageindicator/index.ts";
+import type { WarpPagination } from "./packages/pagination/index.ts";
+import type { WRadio } from "./packages/radio/radio.ts";
+import type { WRadioGroup } from "./packages/radio/radio-group.ts";
+import type { WCheckbox } from "./packages/checkbox/checkbox.ts";
+import type { WCheckboxGroup } from "./packages/checkbox/checkbox-group.ts";
+import type { WarpSliderThumb } from "./packages/slider/slider-thumb.ts";
+import type { WarpSlider } from "./packages/slider/slider.ts";
+import type { WarpStepIndicator, WarpStep } from "./packages/stepindicator/index.ts";
+import type { WarpTab } from "./packages/tabs/tab.ts";
+import type { WarpTabPanel } from "./packages/tabs/tab-panel.ts";
+import type { WarpTabs } from "./packages/tabs/tabs.ts";
+import type { WarpTextarea } from "./packages/textarea/textarea.ts";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -634,6 +648,346 @@ export type WarpComboboxProps = {
   "autocomplete"?: WarpCombobox['autocomplete'];
 
 
+}
+
+
+export type WarpDeadToggleProps = {
+  /**  */
+  "type"?: WarpDeadToggle['type'];
+  /**  */
+  "checked"?: WarpDeadToggle['checked'];
+  /**  */
+  "indeterminate"?: WarpDeadToggle['indeterminate'];
+  /**  */
+  "invalid"?: WarpDeadToggle['invalid'];
+  /**  */
+  "disabled"?: WarpDeadToggle['disabled'];
+
+
+}
+
+
+export type WarpPageIndicatorProps = {
+  /** Currently selected page (1-based index) */
+  "selected-page"?: WarpPageIndicator['selectedPage'];
+  /** Currently selected page (1-based index) */
+  "selectedPage"?: WarpPageIndicator['selectedPage'];
+  /** Total number of pages */
+  "page-count"?: WarpPageIndicator['pageCount'];
+  /** Total number of pages */
+  "pageCount"?: WarpPageIndicator['pageCount'];
+
+
+}
+
+
+export type WarpPaginationProps = {
+  /**  */
+  "base-url"?: WarpPagination['baseUrl'];
+  /**  */
+  "baseUrl"?: WarpPagination['baseUrl'];
+  /**  */
+  "pages"?: WarpPagination['pages'];
+  /**  */
+  "current-page"?: WarpPagination['currentPageNumber'];
+  /**  */
+  "currentPageNumber"?: WarpPagination['currentPageNumber'];
+  /**  */
+  "visible-pages"?: WarpPagination['visiblePages'];
+  /**  */
+  "visiblePages"?: WarpPagination['visiblePages'];
+
+  /** Triggered when a link button in the pagination is clicked. Contains the page number in `string` form. */
+  "onpage-click"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type WRadioProps = {
+  /** The string pointing to a form's id. */
+  "form"?: WRadio['form'];
+  /** The radio's value. When selected, the radio group will receive this value. */
+  "value"?: WRadio['value'];
+  /** The radio's value. When selected, the radio group will receive this value. */
+  "appearance"?: WRadio['appearance'];
+  /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
+attribute can typically be omitted. */
+  "size"?: WRadio['size'];
+  /** Disables the radio. */
+  "disabled"?: WRadio['disabled'];
+  /**  */
+  "checked"?: WRadio['checked'];
+
+
+}
+
+
+export type WRadioGroupProps = {
+  /** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+instead. */
+  "label"?: WRadioGroup['label'];
+  /** The radio groups's hint. If you need to display HTML, use the `hint` slot instead. */
+  "hint"?: WRadioGroup['hint'];
+  /** The name of the radio group, submitted as a name/value pair with form data. */
+  "name"?: WRadioGroup['name'];
+  /** Disables the radio group and all child radios. */
+  "disabled"?: WRadioGroup['disabled'];
+  /** The orientation in which to show radio items. */
+  "orientation"?: WRadioGroup['orientation'];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  "value"?: WRadioGroup['defaultValue'];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  "defaultValue"?: WRadioGroup['defaultValue'];
+  /** The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden. */
+  "size"?: WRadioGroup['size'];
+  /** Ensures a child radio is checked before allowing the containing form to submit. */
+  "required"?: WRadioGroup['required'];
+  /** Used for SSR. if true, will show slotted label on initial render. */
+  "with-label"?: WRadioGroup['withLabel'];
+  /** Used for SSR. if true, will show slotted label on initial render. */
+  "withLabel"?: WRadioGroup['withLabel'];
+  /** Used for SSR. if true, will show slotted hint on initial render. */
+  "with-hint"?: WRadioGroup['withHint'];
+  /** Used for SSR. if true, will show slotted hint on initial render. */
+  "withHint"?: WRadioGroup['withHint'];
+  /**  */
+  "hasRadioButtons"?: WRadioGroup['hasRadioButtons'];
+  /**  */
+  "defaultSlot"?: WRadioGroup['defaultSlot'];
+
+  /**  */
+  "oninput"?: (e: CustomEvent<InputEvent>) => void;
+  /**  */
+  "onchange"?: (e: CustomEvent<Event>) => void;
+}
+
+
+export type WCheckboxProps = {
+  /**  */
+  "title"?: WCheckbox['title'];
+  /** The name of the checkbox, submitted as a name/value pair with form data. */
+  "name"?: WCheckbox['name'];
+  /** The value of the checkbox, submitted as a name/value pair with form data. */
+  "value"?: WCheckbox['value'];
+  /** The checkbox's size. */
+  "size"?: WCheckbox['size'];
+  /** Disables the checkbox. */
+  "disabled"?: WCheckbox['disabled'];
+  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
+  "indeterminate"?: WCheckbox['indeterminate'];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  "checked"?: WCheckbox['defaultChecked'];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  "defaultChecked"?: WCheckbox['defaultChecked'];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  "form"?: WCheckbox['form'];
+  /** Makes the checkbox a required field. */
+  "required"?: WCheckbox['required'];
+  /** The checkbox's hint. If you need to display HTML, use the `hint` slot instead. */
+  "hint"?: WCheckbox['hint'];
+  /**  */
+  "input"?: WCheckbox['input'];
+
+  /**  */
+  "onchange"?: (e: CustomEvent<Event>) => void;
+}
+
+
+export type WCheckboxGroupProps = {
+
+
+}
+
+
+export type WarpSliderThumbProps = {
+  /**  */
+  "aria-label"?: WarpSliderThumb['ariaLabel'];
+  /**  */
+  "ariaLabel"?: WarpSliderThumb['ariaLabel'];
+  /**  */
+  "aria-description"?: WarpSliderThumb['ariaDescription'];
+  /**  */
+  "ariaDescription"?: WarpSliderThumb['ariaDescription'];
+  /**  */
+  "label"?: WarpSliderThumb['label'];
+  /**  */
+  "name"?: WarpSliderThumb['name'];
+  /**  */
+  "value"?: WarpSliderThumb['value'];
+  /**  */
+  "disabled"?: WarpSliderThumb['disabled'];
+  /**  */
+  "invalid"?: WarpSliderThumb['invalid'];
+  /** Set by `<w-slider>` */
+  "allowValuesOutsideRange"?: WarpSliderThumb['allowValuesOutsideRange'];
+  /** Set by `<w-slider>` */
+  "markers"?: WarpSliderThumb['markers'];
+  /** Set by `<w-slider>` */
+  "required"?: WarpSliderThumb['required'];
+  /** Set by `<w-slider>` */
+  "step"?: WarpSliderThumb['step'];
+  /** Set by `<w-slider>` */
+  "min"?: WarpSliderThumb['min'];
+  /** Set by `<w-slider>` */
+  "max"?: WarpSliderThumb['max'];
+  /** Set by `<w-slider>` */
+  "suffix"?: WarpSliderThumb['suffix'];
+  /** JS hook to help you format the numeric value how you want. */
+  "formatter"?: WarpSliderThumb['formatter'];
+  /**  */
+  "range"?: WarpSliderThumb['range'];
+  /**  */
+  "textfield"?: WarpSliderThumb['textfield'];
+
+  /**  */
+  "onslidervalidity"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type WarpSliderProps = {
+  /** The slider fieldset label. Required for proper accessibility.
+
+If you need to display HTML, use the `label` slot instead. */
+  "label"?: WarpSlider['label'];
+  /**  */
+  "disabled"?: WarpSlider['disabled'];
+  /**  */
+  "allow-values-outside-range"?: WarpSlider['allowValuesOutsideRange'];
+  /**  */
+  "allowValuesOutsideRange"?: WarpSlider['allowValuesOutsideRange'];
+  /**  */
+  "error"?: WarpSlider['error'];
+  /**  */
+  "help-text"?: WarpSlider['helpText'];
+  /**  */
+  "helpText"?: WarpSlider['helpText'];
+  /**  */
+  "invalid"?: WarpSlider['invalid'];
+  /** Ensures a child slider thumb has a value before allowing the containing form to submit. */
+  "required"?: WarpSlider['required'];
+  /**  */
+  "min"?: WarpSlider['min'];
+  /**  */
+  "max"?: WarpSlider['max'];
+  /** Pass a value similar to step to create visual markers at that interval */
+  "markers"?: WarpSlider['markers'];
+  /**  */
+  "step"?: WarpSlider['step'];
+  /** Suffix used in text input fields and for the min and max values of the slider. */
+  "suffix"?: WarpSlider['suffix'];
+  /** Function to format the to- and from labels and value in the slider thumb tooltip. */
+  "formatter"?: WarpSlider['formatter'];
+  /**  */
+  "_invalidMessage"?: WarpSlider['_invalidMessage'];
+  /**  */
+  "_hasInternalError"?: WarpSlider['_hasInternalError'];
+
+
+}
+
+
+export type WarpStepIndicatorProps = {
+  /**  */
+  "horizontal"?: WarpStepIndicator['horizontal'];
+  /**  */
+  "right"?: WarpStepIndicator['right'];
+
+
+}
+
+
+export type WarpStepProps = {
+  /**  */
+  "active"?: WarpStep['active'];
+  /**  */
+  "completed"?: WarpStep['completed'];
+
+
+}
+
+
+export type WarpTabProps = {
+  /**  */
+  "for"?: WarpTab['for'];
+  /**  */
+  "label"?: WarpTab['label'];
+  /**  */
+  "active"?: WarpTab['active'];
+  /**  */
+  "over"?: WarpTab['over'];
+  /**  */
+  "tab-class"?: WarpTab['tabClass'];
+  /**  */
+  "tabClass"?: WarpTab['tabClass'];
+
+
+}
+
+
+export type WarpTabPanelProps = {
+  /**  */
+  "hidden"?: WarpTabPanel['hidden'];
+
+
+}
+
+
+export type WarpTabsProps = {
+  /**  */
+  "active"?: WarpTabs['active'];
+  /**  */
+  "tab-class"?: WarpTabs['tabClass'];
+  /**  */
+  "tabClass"?: WarpTabs['tabClass'];
+
+  /**  */
+  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type WarpTextareaProps = {
+  /**  */
+  "disabled"?: WarpTextarea['disabled'];
+  /**  */
+  "invalid"?: WarpTextarea['invalid'];
+  /**  */
+  "label"?: WarpTextarea['label'];
+  /**  */
+  "help-text"?: WarpTextarea['helpText'];
+  /**  */
+  "helpText"?: WarpTextarea['helpText'];
+  /**  */
+  "maximum-rows"?: WarpTextarea['maxRows'];
+  /**  */
+  "maxRows"?: WarpTextarea['maxRows'];
+  /**  */
+  "minimum-rows"?: WarpTextarea['minRows'];
+  /**  */
+  "minRows"?: WarpTextarea['minRows'];
+  /**  */
+  "name"?: WarpTextarea['name'];
+  /**  */
+  "placeholder"?: WarpTextarea['placeholder'];
+  /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`.  */
+  "read-only"?: WarpTextarea['readOnly'];
+  /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`.  */
+  "readOnly"?: WarpTextarea['readOnly'];
+  /**  */
+  "readonly"?: WarpTextarea['readonly'];
+  /**  */
+  "required"?: WarpTextarea['required'];
+  /**  */
+  "value"?: WarpTextarea['value'];
+  /**  */
+  "optional"?: WarpTextarea['optional'];
+  /**  */
+  "minHeight"?: WarpTextarea['minHeight'];
+  /**  */
+  "maxHeight"?: WarpTextarea['maxHeight'];
+
+
 }
 
   export type CustomElements = {
@@ -1201,6 +1555,404 @@ export type WarpComboboxProps = {
  * - `resetFormControl() => void`: undefined
   */
     "w-combobox": Partial<WarpComboboxProps & BaseProps<WarpCombobox> & BaseEvents>;
+
+
+  /**
+     * Dead toggle can be used where the appearance of a checkbox or radio is needed - but for accessibility purposes an actual input element should not be present.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-dead-toggle--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `type`: undefined 
+ * - `checked`: undefined 
+ * - `indeterminate`: undefined 
+ * - `invalid`: undefined 
+ * - `disabled`: undefined 
+  */
+    "w-dead-toggle": Partial<WarpDeadToggleProps & BaseProps<WarpDeadToggle> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `selected-page`/`selectedPage`: Currently selected page (1-based index) 
+ * - `page-count`/`pageCount`: Total number of pages 
+  */
+    "w-pageindicator": Partial<WarpPageIndicatorProps & BaseProps<WarpPageIndicator> & BaseEvents>;
+
+
+  /**
+     * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `base-url`/`baseUrl`: undefined 
+ * - `pages`: undefined 
+ * - `current-page`/`currentPageNumber`: undefined 
+ * - `visible-pages`/`visiblePages`: undefined 
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `page-click`: Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
+  */
+    "w-pagination": Partial<WarpPaginationProps & BaseProps<WarpPagination> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `form`: The string pointing to a form's id. 
+ * - `value`: The radio's value. When selected, the radio group will receive this value. 
+ * - `appearance`: The radio's value. When selected, the radio group will receive this value. 
+ * - `size`: The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
+ * attribute can typically be omitted. 
+ * - `disabled`: Disables the radio. 
+ * - `checked`: undefined (property only)
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `setValue() => void`: undefined
+  */
+    "w-radio": Partial<WRadioProps & BaseProps<WRadio> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `label`: The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+ * instead. 
+ * - `hint`: The radio groups's hint. If you need to display HTML, use the `hint` slot instead. 
+ * - `name`: The name of the radio group, submitted as a name/value pair with form data. 
+ * - `disabled`: Disables the radio group and all child radios. 
+ * - `orientation`: The orientation in which to show radio items. 
+ * - `value`/`defaultValue`: The default value of the form control. Primarily used for resetting the form control. 
+ * - `size`: The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden. 
+ * - `required`: Ensures a child radio is checked before allowing the containing form to submit. 
+ * - `with-label`/`withLabel`: Used for SSR. if true, will show slotted label on initial render. 
+ * - `with-hint`/`withHint`: Used for SSR. if true, will show slotted hint on initial render. 
+ * - `hasRadioButtons`: undefined (property only)
+ * - `defaultSlot`: undefined (property only)
+ * - `value`: The current value of the radio group, submitted as a name/value pair with form data. (property only)
+ * - `validationTarget`: We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on
+ * the first radio element. (property only) (readonly)
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `input`: undefined
+ * - `change`: undefined
+ * 
+ * ## Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `label`: Alternative to the `label` attribute should you need custom HTML.
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `formResetCallback(args: Parameters<BaseFormAssociatedElement['formResetCallback']>) => void`: undefined
+ * - `focus(options?: FocusOptions) => void`: Sets focus on the radio group.
+  */
+    "w-radio-group": Partial<WRadioGroupProps & BaseProps<WRadioGroup> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `title`: undefined 
+ * - `name`: The name of the checkbox, submitted as a name/value pair with form data. 
+ * - `value`: The value of the checkbox, submitted as a name/value pair with form data. 
+ * - `size`: The checkbox's size. 
+ * - `disabled`: Disables the checkbox. 
+ * - `indeterminate`: Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+ * all/none" behavior when associated checkboxes have a mix of checked and unchecked states. 
+ * - `checked`/`defaultChecked`: The default value of the form control. Primarily used for resetting the form control. 
+ * - `form`: By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+ * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+ * the same document or shadow root for this to work. 
+ * - `required`: Makes the checkbox a required field. 
+ * - `hint`: The checkbox's hint. If you need to display HTML, use the `hint` slot instead. 
+ * - `input`: undefined (property only)
+ * - `checked`: Draws the checkbox in a checked state. (property only)
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `change`: undefined
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `handleDefaultCheckedChange() => void`: undefined
+ * - `handleValueOrCheckedChange() => void`: undefined
+ * - `handleStateChange() => void`: undefined
+ * - `handleDisabledChange() => void`: undefined
+ * - `formResetCallback() => void`: undefined
+ * - `click() => void`: Simulates a click on the checkbox.
+ * - `focus(options?: FocusOptions) => void`: Sets focus on the checkbox.
+ * - `blur() => void`: Removes focus from the checkbox.
+  */
+    "w-checkbox": Partial<WCheckboxProps & BaseProps<WCheckbox> & BaseEvents>;
+
+
+  /**
+     * 
+  */
+    "w-checkbox-group": Partial<WCheckboxGroupProps & BaseProps<WCheckboxGroup> & BaseEvents>;
+
+
+  /**
+     * Component to place inside a `<w-slider>`.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `aria-label`/`ariaLabel`: undefined 
+ * - `aria-description`/`ariaDescription`: undefined 
+ * - `label`: undefined 
+ * - `name`: undefined 
+ * - `value`: undefined 
+ * - `disabled`: undefined 
+ * - `invalid`: undefined 
+ * - `allowValuesOutsideRange`: Set by `<w-slider>` (property only)
+ * - `markers`: Set by `<w-slider>` (property only)
+ * - `required`: Set by `<w-slider>` (property only)
+ * - `step`: Set by `<w-slider>` (property only)
+ * - `min`: Set by `<w-slider>` (property only)
+ * - `max`: Set by `<w-slider>` (property only)
+ * - `suffix`: Set by `<w-slider>` (property only)
+ * - `formatter`: JS hook to help you format the numeric value how you want. (property only)
+ * - `range`: undefined (property only)
+ * - `textfield`: undefined (property only)
+ * - `boundaryValue`: undefined (property only) (readonly)
+ * - `textFieldDisplayValue`: Value to display in the textfield (shows boundary when focused on empty value) (property only) (readonly)
+ * - `tooltipDisplayValue`: Value to display in the tooltip (property only) (readonly)
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `slidervalidity`: undefined
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `resetFormControl() => void`: undefined
+ * - `updateFieldAfterValidation() => void`: undefined
+  */
+    "w-slider-thumb": Partial<WarpSliderThumbProps & BaseProps<WarpSliderThumb> & BaseEvents>;
+
+
+  /**
+     * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `label`: The slider fieldset label. Required for proper accessibility.
+ * 
+ * If you need to display HTML, use the `label` slot instead. 
+ * - `disabled`: undefined 
+ * - `allow-values-outside-range`/`allowValuesOutsideRange`: undefined 
+ * - `error`: undefined 
+ * - `help-text`/`helpText`: undefined 
+ * - `invalid`: undefined 
+ * - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit. 
+ * - `min`: undefined 
+ * - `max`: undefined 
+ * - `markers`: Pass a value similar to step to create visual markers at that interval 
+ * - `step`: undefined 
+ * - `suffix`: Suffix used in text input fields and for the min and max values of the slider. 
+ * - `formatter`: Function to format the to- and from labels and value in the slider thumb tooltip. (property only)
+ * - `_invalidMessage`: undefined (property only)
+ * - `_hasInternalError`: undefined (property only)
+ * - `edgeMin`: undefined (property only) (readonly)
+ * - `edgeMax`: undefined (property only) (readonly)
+ * - `componentHasError`: undefined (property only) (readonly)
+ * - `errorText`: undefined (property only) (readonly)
+ * 
+ * ## Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: For single sliders place a `<w-slider-thumb>` in the default slot.
+ * - `label`: Label for the slider or range slider as a whole.
+ * - `description`: Optional description between the label and slider.
+ * - `from`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+ * - `to`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+  */
+    "w-slider": Partial<WarpSliderProps & BaseProps<WarpSlider> & BaseEvents>;
+
+
+  /**
+     * Steps are used to show progress through a process or to guide users through a multi-step task.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `horizontal`: undefined 
+ * - `right`: undefined 
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `updateStepsContext() => void`: undefined
+  */
+    "w-step-indicator": Partial<WarpStepIndicatorProps & BaseProps<WarpStepIndicator> & BaseEvents>;
+
+
+  /**
+     * Individual step component that shows a single step in a process
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `active`: undefined 
+ * - `completed`: undefined 
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `setContext(context: StepsContext) => void`: undefined
+ * - `getAriaLabel() => void`: undefined
+  */
+    "w-step": Partial<WarpStepProps & BaseProps<WarpStep> & BaseEvents>;
+
+
+  /**
+     * 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 
+ * - `label`: undefined 
+ * - `active`: undefined 
+ * - `over`: undefined 
+ * - `tab-class`/`tabClass`: undefined 
+  */
+    "w-tab": Partial<WarpTabProps & BaseProps<WarpTab> & BaseEvents>;
+
+
+  /**
+     * Tab panel component that holds content for individual tabs.
+ * Each tab panel should have a name that matches a corresponding tab.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `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 
+ * - `tab-class`/`tabClass`: 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 
+ * - `label`: undefined 
+ * - `help-text`/`helpText`: undefined 
+ * - `maximum-rows`/`maxRows`: undefined 
+ * - `minimum-rows`/`minRows`: undefined 
+ * - `name`: undefined 
+ * - `placeholder`: undefined 
+ * - `read-only`/`readOnly`: undefined 
+ * - `readonly`: undefined 
+ * - `required`: undefined 
+ * - `value`: undefined 
+ * - `optional`: undefined 
+ * - `minHeight`: undefined (property only)
+ * - `maxHeight`: undefined (property only)
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `resetFormControl() => void`: undefined
+ * - `handler(e: InputEvent) => void`: undefined
+  */
+    "w-textarea": Partial<WarpTextareaProps & BaseProps<WarpTextarea> & BaseEvents>;
   }
 
 export type CustomCssProperties = {