@warp-ds/elements 2.3.0-next.1 → 2.3.0-next.3

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 
 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";
@@ -15,9 +16,17 @@ 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 { WarpCombobox } from "./packages/combobox/index.ts";
+import type { WarpDatepicker } from "./packages/datepicker/datepicker.ts";
+import type { WarpDeadToggle } from "./packages/dead-toggle/index.ts";
+import type { WarpPageIndicator } from "./packages/pageindicator/index.ts";
 import type { WarpPagination } from "./packages/pagination/index.ts";
 import type { WarpSliderThumb } from "./packages/slider/slider-thumb.ts";
 import type { WarpSlider } from "./packages/slider/slider.ts";
+import type { WarpSteps, WarpStep } from "./packages/steps/index.ts";
+import type { WarpSwitch } from "./packages/switch/index.ts";
+import type { WarpTab } from "./packages/tabs/tab.ts";
+import type { WarpTabs } from "./packages/tabs/tabs.ts";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -130,6 +139,40 @@ export type WarpAlertProps = {
 }
 
 
+export type WarpLinkProps = {
+  /**  */
+  "autofocus"?: WarpLink['autofocus'];
+  /**  */
+  "variant"?: WarpLink['variant'];
+  /**  */
+  "quiet"?: WarpLink['quiet'];
+  /**  */
+  "small"?: WarpLink['small'];
+  /**  */
+  "href"?: WarpLink['href'];
+  /**  */
+  "disabled"?: WarpLink['disabled'];
+  /**  */
+  "target"?: WarpLink['target'];
+  /**  */
+  "rel"?: WarpLink['rel'];
+  /**  */
+  "full-width"?: WarpLink['fullWidth'];
+  /**  */
+  "fullWidth"?: WarpLink['fullWidth'];
+  /**  */
+  "button-class"?: WarpLink['buttonClass'];
+  /**  */
+  "buttonClass"?: WarpLink['buttonClass'];
+  /**  */
+  "name"?: WarpLink['name'];
+  /**  */
+  "classes"?: WarpLink['classes'];
+
+
+}
+
+
 export type WarpButtonProps = {
   /**  */
   "type"?: WarpButton['type'];
@@ -473,6 +516,152 @@ export type WarpToastContainerProps = {
 }
 
 
+export type WarpComboboxProps = {
+  /** The available options to select from */
+  "options"?: WarpCombobox['options'];
+  /** Label above input */
+  "label"?: WarpCombobox['label'];
+  /** Input placeholder */
+  "placeholder"?: WarpCombobox['placeholder'];
+  /** The input value */
+  "value"?: WarpCombobox['value'];
+  /** Whether the popover opens when focus is on the text field */
+  "open-on-focus"?: WarpCombobox['openOnFocus'];
+  /** Whether the popover opens when focus is on the text field */
+  "openOnFocus"?: WarpCombobox['openOnFocus'];
+  /** Select active option on blur */
+  "select-on-blur"?: WarpCombobox['selectOnBlur'];
+  /** Select active option on blur */
+  "selectOnBlur"?: WarpCombobox['selectOnBlur'];
+  /** Whether the matching text segments in the options should be highlighted */
+  "match-text-segments"?: WarpCombobox['matchTextSegments'];
+  /** Whether the matching text segments in the options should be highlighted */
+  "matchTextSegments"?: WarpCombobox['matchTextSegments'];
+  /** Disable client-side static filtering */
+  "disable-static-filtering"?: WarpCombobox['disableStaticFiltering'];
+  /** Disable client-side static filtering */
+  "disableStaticFiltering"?: WarpCombobox['disableStaticFiltering'];
+  /** Renders the input field in an invalid state */
+  "invalid"?: WarpCombobox['invalid'];
+  /** The content to display as the help text */
+  "help-text"?: WarpCombobox['helpText'];
+  /** The content to display as the help text */
+  "helpText"?: WarpCombobox['helpText'];
+  /** Whether the element is disabled */
+  "disabled"?: WarpCombobox['disabled'];
+  /** Whether the element is required */
+  "required"?: WarpCombobox['required'];
+  /** Whether to show optional text */
+  "optional"?: WarpCombobox['optional'];
+  /** Additional container styling */
+  "class-name"?: WarpCombobox['containerClassName'];
+  /** Additional container styling */
+  "containerClassName"?: WarpCombobox['containerClassName'];
+  /** Additional list styling */
+  "list-class-name"?: WarpCombobox['listClassName'];
+  /** Additional list styling */
+  "listClassName"?: WarpCombobox['listClassName'];
+  /** Name attribute for form submission */
+  "name"?: WarpCombobox['name'];
+
+
+}
+
+
+export type WarpDatepickerProps = {
+  /**  */
+  "label"?: WarpDatepicker['label'];
+  /** Takes precedence over the `<html>` lang attribute. */
+  "lang"?: WarpDatepicker['lang'];
+  /**  */
+  "name"?: WarpDatepicker['name'];
+  /**  */
+  "value"?: WarpDatepicker['value'];
+  /** Decides the format of the date as shown in the calendar header.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "header-format"?: WarpDatepicker['headerFormat'];
+  /** Decides the format of the date as shown in the calendar header.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "headerFormat"?: WarpDatepicker['headerFormat'];
+  /** Decides the format of the weekday as shown above the grid of dates in the calendar.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "weekday-format"?: WarpDatepicker['weekdayFormat'];
+  /** Decides the format of the weekday as shown above the grid of dates in the calendar.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "weekdayFormat"?: WarpDatepicker['weekdayFormat'];
+  /** Decides the format of the day in the calendar as read to screen readers.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "day-format"?: WarpDatepicker['dayFormat'];
+  /** Decides the format of the day in the calendar as read to screen readers.
+
+The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
+  "dayFormat"?: WarpDatepicker['dayFormat'];
+  /** Lets you control if a date in the calendar should be disabled.
+
+This needs to be set on the element instance in JavaScript, not as an HTML attribute. */
+  "isDayDisabled"?: WarpDatepicker['isDayDisabled'];
+  /**  */
+  "isCalendarOpen"?: WarpDatepicker['isCalendarOpen'];
+  /**  */
+  "navigationDate"?: WarpDatepicker['navigationDate'];
+  /**  */
+  "calendar"?: WarpDatepicker['calendar'];
+  /**  */
+  "input"?: WarpDatepicker['input'];
+  /**  */
+  "toggleButton"?: WarpDatepicker['toggleButton'];
+  /**  */
+  "wrapper"?: WarpDatepicker['wrapper'];
+  /** This is the first focusable element, needed for the modal focus trap.
+
+Don't cache this and other `@query` fields from inside the calendar modal.
+They work the first time, but once the calendar is closed and reopened
+the query will point to an element that doesn't exist anymore. */
+  "previousMonthButton"?: WarpDatepicker['previousMonthButton'];
+  /**  */
+  "todayCell"?: WarpDatepicker['todayCell'];
+  /**  */
+  "selectedCell"?: WarpDatepicker['selectedCell'];
+
+
+}
+
+
+export type WarpDeadToggleProps = {
+  /**  */
+  "type"?: WarpDeadToggle['type'];
+  /**  */
+  "checked"?: WarpDeadToggle['checked'];
+  /**  */
+  "indeterminate"?: WarpDeadToggle['indeterminate'];
+  /**  */
+  "invalid"?: WarpDeadToggle['invalid'];
+  /**  */
+  "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'];
@@ -560,6 +749,68 @@ If you need to display HTML, use the `label` slot instead. */
   "formatter"?: WarpSlider['formatter'];
 
 
+}
+
+
+export type WarpStepsProps = {
+  /**  */
+  "horizontal"?: WarpSteps['horizontal'];
+  /**  */
+  "right"?: WarpSteps['right'];
+
+
+}
+
+
+export type WarpStepProps = {
+  /**  */
+  "active"?: WarpStep['active'];
+  /**  */
+  "completed"?: WarpStep['completed'];
+
+
+}
+
+
+export type WarpSwitchProps = {
+  /**  */
+  "value"?: WarpSwitch['value'];
+  /**  */
+  "disabled"?: WarpSwitch['disabled'];
+
+  /**  */
+  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type WarpTabProps = {
+  /**  */
+  "name"?: WarpTab['name'];
+  /**  */
+  "label"?: WarpTab['label'];
+  /**  */
+  "active"?: WarpTab['active'];
+  /**  */
+  "over"?: WarpTab['over'];
+  /**  */
+  "tab-class"?: WarpTab['tabClass'];
+  /**  */
+  "tabClass"?: WarpTab['tabClass'];
+
+
+}
+
+
+export type WarpTabsProps = {
+  /**  */
+  "active"?: WarpTabs['active'];
+  /**  */
+  "tab-class"?: WarpTabs['tabClass'];
+  /**  */
+  "tabClass"?: WarpTabs['tabClass'];
+
+  /**  */
+  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
 }
 
   export type CustomElements = {
@@ -604,6 +855,31 @@ If you need to display HTML, use the `label` slot instead. */
     "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 
+ * - `quiet`: undefined 
+ * - `small`: undefined 
+ * - `href`: undefined 
+ * - `disabled`: undefined 
+ * - `target`: undefined 
+ * - `rel`: undefined 
+ * - `full-width`/`fullWidth`: undefined 
+ * - `button-class`/`buttonClass`: undefined 
+ * - `name`: undefined 
+ * - `classes`: undefined (property only)
+  */
+    "w-link": Partial<WarpLinkProps & BaseProps<WarpLink> & BaseEvents>;
+
+
   /**
      * Buttons are used to perform actions, widh different visuals for different needs.
  * 
@@ -980,6 +1256,113 @@ If you need to display HTML, use the `label` slot instead. */
     "w-toast-container": Partial<WarpToastContainerProps & BaseProps<WarpToastContainer> & BaseEvents>;
 
 
+  /**
+     * A combobox element for text input with selectable options.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `options`: The available options to select from 
+ * - `label`: Label above input 
+ * - `placeholder`: Input placeholder 
+ * - `value`: The input value 
+ * - `open-on-focus`/`openOnFocus`: Whether the popover opens when focus is on the text field 
+ * - `select-on-blur`/`selectOnBlur`: Select active option on blur 
+ * - `match-text-segments`/`matchTextSegments`: Whether the matching text segments in the options should be highlighted 
+ * - `disable-static-filtering`/`disableStaticFiltering`: Disable client-side static filtering 
+ * - `invalid`: Renders the input field in an invalid state 
+ * - `help-text`/`helpText`: The content to display as the help text 
+ * - `disabled`: Whether the element is disabled 
+ * - `required`: Whether the element is required 
+ * - `optional`: Whether to show optional text 
+ * - `class-name`/`containerClassName`: Additional container styling 
+ * - `list-class-name`/`listClassName`: Additional list styling 
+ * - `name`: Name attribute for form submission 
+  */
+    "w-combobox": Partial<WarpComboboxProps & BaseProps<WarpCombobox> & BaseEvents>;
+
+
+  /**
+     * An input for dates.
+ * 
+ * Uses the `lang` attribute on either the element or on `<html>` to determine the locale options.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `label`: undefined 
+ * - `lang`: Takes precedence over the `<html>` lang attribute. 
+ * - `name`: undefined 
+ * - `value`: undefined 
+ * - `header-format`/`headerFormat`: Decides the format of the date as shown in the calendar header.
+ * 
+ * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). 
+ * - `weekday-format`/`weekdayFormat`: Decides the format of the weekday as shown above the grid of dates in the calendar.
+ * 
+ * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). 
+ * - `day-format`/`dayFormat`: Decides the format of the day in the calendar as read to screen readers.
+ * 
+ * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). 
+ * - `isDayDisabled`: Lets you control if a date in the calendar should be disabled.
+ * 
+ * This needs to be set on the element instance in JavaScript, not as an HTML attribute. (property only)
+ * - `isCalendarOpen`: undefined (property only)
+ * - `navigationDate`: undefined (property only)
+ * - `selectedDate`: undefined (property only) (readonly)
+ * - `month`: undefined (property only) (readonly)
+ * - `weeks`: undefined (property only) (readonly)
+ * - `calendar`: undefined (property only)
+ * - `input`: undefined (property only)
+ * - `toggleButton`: undefined (property only)
+ * - `wrapper`: undefined (property only)
+ * - `previousMonthButton`: This is the first focusable element, needed for the modal focus trap.
+ * 
+ * Don't cache this and other `@query` fields from inside the calendar modal.
+ * They work the first time, but once the calendar is closed and reopened
+ * the query will point to an element that doesn't exist anymore. (property only)
+ * - `todayCell`: undefined (property only)
+ * - `selectedCell`: undefined (property only)
+  */
+    "w-datepicker": Partial<WarpDatepickerProps & BaseProps<WarpDatepicker> & BaseEvents>;
+
+
+  /**
+     * Dead toggle can be used where the appearance of a checkbox or radio is needed - but for accessibility purposes an actual input element should not be present.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-dead-toggle--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `type`: undefined 
+ * - `checked`: undefined 
+ * - `indeterminate`: undefined 
+ * - `invalid`: undefined 
+ * - `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.
  * 
@@ -1070,6 +1453,107 @@ If you need to display HTML, use the `label` slot instead. */
  * - `to`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
   */
     "w-slider": Partial<WarpSliderProps & BaseProps<WarpSlider> & BaseEvents>;
+
+
+  /**
+     * Steps are used to show progress through a process or to guide users through a multi-step task.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `horizontal`: undefined 
+ * - `right`: undefined 
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `updateStepsContext() => void`: undefined
+  */
+    "w-steps": Partial<WarpStepsProps & BaseProps<WarpSteps> & BaseEvents>;
+
+
+  /**
+     * Individual step component that shows a single step in a process
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `active`: undefined 
+ * - `completed`: undefined 
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `setContext(context: StepsContext) => void`: undefined
+ * - `getAriaLabel() => void`: undefined
+  */
+    "w-step": Partial<WarpStepProps & BaseProps<WarpStep> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `value`: undefined 
+ * - `disabled`: undefined 
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `change`: undefined
+  */
+    "w-switch": Partial<WarpSwitchProps & BaseProps<WarpSwitch> & BaseEvents>;
+
+
+  /**
+     * Individual tab component used within w-tabs container.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `name`: undefined 
+ * - `label`: undefined 
+ * - `active`: undefined 
+ * - `over`: undefined 
+ * - `tab-class`/`tabClass`: undefined 
+  */
+    "w-tab": Partial<WarpTabProps & BaseProps<WarpTab> & BaseEvents>;
+
+
+  /**
+     * 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>;
   }
 
 export type CustomCssProperties = {

package/dist/packages/combobox/combobox.react.stories.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Combobox } from './react';
+declare const _default: {
+    title: string;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpCombobox, {
+        onSelect: string;
+        onselect: string;
+        onChange: string;
+        onchange: string;
+    }>;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpCombobox>, "label" | "onchange" | "onselect" | "onChange" | "onSelect" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "name" | "value" | "invalid" | "optional" | "helpText" | "placeholder" | "required" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering" | "containerClassName" | "listClassName"> & {
+        onSelect?: (e: Event) => void;
+        onselect?: (e: Event) => void;
+        onChange?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+    } & Partial<Omit<import(".").WarpCombobox, keyof HTMLElement>> & React.RefAttributes<import(".").WarpCombobox>): React.JSX.Element;
+};
+export default _default;
+export type Story = StoryObj<typeof Combobox>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const OpenOnFocus: Story;
+export declare const WithTextMatching: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+export declare const Optional: Story;
+export declare const DisableStaticFiltering: Story;

package/dist/packages/combobox/combobox.react.stories.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Combobox } from './react';
+export default {
+    title: 'Forms/Combobox',
+    component: Combobox,
+    render(args) {
+        return React.createElement(Combobox, { ...args, options: sampleOptions });
+    },
+};
+const sampleOptions = [
+    { value: 'Apple', label: 'Apple' },
+    { value: 'Banana', label: 'Banana' },
+    { value: 'Orange', label: 'Orange' },
+    { value: 'Grape', label: 'Grape' },
+    { value: 'Strawberry', label: 'Strawberry' },
+    { value: 'Pineapple', label: 'Pineapple' },
+    { value: 'Mango', label: 'Mango' },
+];
+export const Default = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+    },
+};
+export const WithValue = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        value: 'Apple',
+    },
+};
+export const OpenOnFocus = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        openOnFocus: true,
+    },
+};
+export const WithTextMatching = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        matchTextSegments: true,
+    },
+};
+export const Invalid = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        value: 'Invalid fruit',
+        helpText: 'Please select a valid fruit from the list',
+        invalid: true,
+    },
+};
+export const Disabled = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        value: 'Apple',
+        disabled: true,
+    },
+};
+export const Optional = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        optional: true,
+    },
+};
+export const DisableStaticFiltering = {
+    render: () => {
+        const [options, setOptions] = React.useState(sampleOptions);
+        const [val, setVal] = React.useState('');
+        return (React.createElement(Combobox, { id: "combobox-dynamic", label: "Select a fruit (dynamic)", placeholder: "Type to search...", disableStaticFiltering: true, value: val, options: options, onChange: (e) => {
+                setVal(e.detail.value);
+                // Simulate dynamic filtering
+                const filteredOptions = sampleOptions.filter((option) => option.value.toLowerCase().includes(e.detail.value.toLowerCase()));
+                setOptions(filteredOptions);
+            }, onSelect: (e) => {
+                setVal(e.detail.value);
+            } }));
+    },
+};

package/dist/packages/combobox/combobox.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './index.js';
+import '../textfield/index.js';
+import type { WarpCombobox } from './index.js';
+declare const args: Partial<WarpCombobox> & {
+    [key: string]: any;
+};
+declare const meta: Meta<typeof args>;
+export default meta;
+type Story = StoryObj<WarpCombobox>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const OpenOnFocus: Story;
+export declare const WithTextMatching: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+export declare const Optional: Story;
+export declare const DisableStaticFiltering: Story;