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

package/dist/index.d.ts

@@ -1634,16 +1634,24 @@ Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the
 };
 
 export type WarpStepProps = {
-  /**  */
+  /** Whether this step is active.
+
+The active step displays a filled indicator. */
   active?: WarpStep["active"];
-  /**  */
+  /** Whether this step is completed.
+
+Completed steps display a checkmark icon and a filled indicator. */
   completed?: WarpStep["completed"];
 };
 
 export type WarpStepSolidJsProps = {
-  /**  */
+  /** Whether this step is active.
+
+The active step displays a filled indicator. */
   "prop:active"?: WarpStep["active"];
-  /**  */
+  /** Whether this step is completed.
+
+Completed steps display a checkmark icon and a filled indicator. */
   "prop:completed"?: WarpStep["completed"];
 
   /** Set the innerHTML of the element */
@@ -1653,16 +1661,16 @@ export type WarpStepSolidJsProps = {
 };
 
 export type WarpStepIndicatorProps = {
-  /**  */
+  /** Display steps horizontally instead of vertically */
   horizontal?: WarpStepIndicator["horizontal"];
-  /**  */
+  /** Align steps to the right (vertical layout only) */
   right?: WarpStepIndicator["right"];
 };
 
 export type WarpStepIndicatorSolidJsProps = {
-  /**  */
+  /** Display steps horizontally instead of vertically */
   "prop:horizontal"?: WarpStepIndicator["horizontal"];
-  /**  */
+  /** Align steps to the right (vertical layout only) */
   "prop:right"?: WarpStepIndicator["right"];
 
   /** Set the innerHTML of the element */
@@ -1672,30 +1680,34 @@ export type WarpStepIndicatorSolidJsProps = {
 };
 
 export type WarpSwitchProps = {
-  /**  */
+  /** Name used when submitting an HTML form. */
   name?: WarpSwitch["name"];
-  /**  */
+  /** Value submitted when the switch is checked.
+
+The component reports `null` as the value in the `change` event when `value` is an empty string. */
   value?: WarpSwitch["value"];
-  /**  */
+  /** Whether the switch is on (checked). */
   checked?: WarpSwitch["checked"];
-  /**  */
+  /** Whether the switch is disabled. */
   disabled?: WarpSwitch["disabled"];
 
-  /**  */
-  onchange?: (e: CustomEvent) => void;
+  /** Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`. */
+  onchange?: (e: WarpSwitchChangeEvent) => void;
 };
 
 export type WarpSwitchSolidJsProps = {
-  /**  */
+  /** Name used when submitting an HTML form. */
   "prop:name"?: WarpSwitch["name"];
-  /**  */
+  /** Value submitted when the switch is checked.
+
+The component reports `null` as the value in the `change` event when `value` is an empty string. */
   "prop:value"?: WarpSwitch["value"];
-  /**  */
+  /** Whether the switch is on (checked). */
   "prop:checked"?: WarpSwitch["checked"];
-  /**  */
+  /** Whether the switch is disabled. */
   "prop:disabled"?: WarpSwitch["disabled"];
-  /**  */
-  "on:change"?: (e: CustomEvent) => void;
+  /** Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`. */
+  "on:change"?: (e: WarpSwitchChangeEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -2691,8 +2703,12 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `active`: undefined
-   * - `completed`: undefined
+   * - `active`: Whether this step is active.
+   *
+   * The active step displays a filled indicator.
+   * - `completed`: Whether this step is completed.
+   *
+   * Completed steps display a checkmark icon and a filled indicator.
    *
    * ## Methods
    *
@@ -2706,42 +2722,36 @@ export type CustomElements = {
   /**
    * 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
+   * - `horizontal`: Display steps horizontally instead of vertically
+   * - `right`: Align steps to the right (vertical layout only)
    */
   "w-step-indicator": Partial<
     WarpStepIndicatorProps & BaseProps<WarpStepIndicator> & BaseEvents
   >;
 
   /**
-   *
+   * The Switch component allows users to toggle between two states.
    *
    * ## 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
+   * - `name`: Name used when submitting an HTML form.
+   * - `value`: Value submitted when the switch is checked.
+   *
+   * The component reports `null` as the value in the `change` event when `value` is an empty string.
+   * - `checked`: Whether the switch is on (checked).
+   * - `disabled`: Whether the switch is disabled.
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `change`: undefined
+   * - `change`: Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`.
    *
    * ## Methods
    *
@@ -3758,8 +3768,12 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `active`: undefined
-   * - `completed`: undefined
+   * - `active`: Whether this step is active.
+   *
+   * The active step displays a filled indicator.
+   * - `completed`: Whether this step is completed.
+   *
+   * Completed steps display a checkmark icon and a filled indicator.
    *
    * ## Methods
    *
@@ -3775,20 +3789,12 @@ export type CustomElementsSolidJs = {
   /**
    * 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
+   * - `horizontal`: Display steps horizontally instead of vertically
+   * - `right`: Align steps to the right (vertical layout only)
    */
   "w-step-indicator": Partial<
     WarpStepIndicatorProps &
@@ -3798,22 +3804,24 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   *
+   * The Switch component allows users to toggle between two states.
    *
    * ## 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
+   * - `name`: Name used when submitting an HTML form.
+   * - `value`: Value submitted when the switch is checked.
+   *
+   * The component reports `null` as the value in the `change` event when `value` is an empty string.
+   * - `checked`: Whether the switch is on (checked).
+   * - `disabled`: Whether the switch is disabled.
    *
    * ## Events
    *
    * Events that will be emitted by the component.
    *
-   * - `change`: undefined
+   * - `change`: Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`.
    *
    * ## Methods
    *

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

@@ -2,7 +2,9 @@ import { StoryObj } from '@storybook/react';
 import { Affix } from './react';
 declare const _default: {
     title: string;
-    component: import("@lit/react").ReactWebComponent<import("./affix").WarpAffix, {}>;
+    component: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").HTMLAttributes<import("./affix").WarpAffix>, "form" | "label" | "search" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "clear" | "icon" | "_classBase" | "_classes" | "resetContainingTextField" | "submitContainingForm" | "_searchButton" | "_clearButton" | "_icon" | "_text" | "_markup"> & {} & Partial<Omit<import("./affix").WarpAffix, keyof HTMLElement>> & import("react").RefAttributes<import("./affix").WarpAffix>, "ref">, "aria-label"> & {
+        ariaLabel?: string | null;
+    } & import("react").RefAttributes<import("./affix").WarpAffix>>;
 };
 export default _default;
 export type Story = StoryObj<typeof Affix>;

package/dist/packages/affix/affix.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/affix/affix.react.test.js

@@ -0,0 +1,3 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { Affix } from './react.js';
+describeReactSsrAttributeMapping('Affix', Affix, [{ propName: 'ariaLabel', attrName: 'aria-label', value: 'Label' }]);

package/dist/packages/affix/react.d.ts

@@ -1,2 +1,5 @@
+import React from 'react';
 import { WarpAffix } from './affix.js';
-export declare const Affix: import("@lit/react").ReactWebComponent<WarpAffix, {}>;
+export declare const Affix: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpAffix>, "form" | "label" | "search" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "clear" | "icon" | "_classBase" | "_classes" | "resetContainingTextField" | "submitContainingForm" | "_searchButton" | "_clearButton" | "_icon" | "_text" | "_markup"> & {} & Partial<Omit<WarpAffix, keyof HTMLElement>> & React.RefAttributes<WarpAffix>, "ref">, "aria-label"> & {
+    ariaLabel?: string | null;
+} & React.RefAttributes<WarpAffix>>;

package/dist/packages/affix/react.js

@@ -5,7 +5,7 @@ import React from 'react';
 // they should be getting it from Eik.
 class Component extends LitElement {
 }
-export const Affix = createComponent({
+const BaseAffix = createComponent({
     tagName: 'w-affix',
     // This tricks TS into thinking the stub we created above is still the actual implementation
     // This ensures devs can import the react wrapper and use it with the full intellisense experience
@@ -13,3 +13,9 @@ export const Affix = createComponent({
     elementClass: Component,
     react: React,
 });
+export const Affix = React.forwardRef(({ ariaLabel, ...props }, ref) => React.createElement(BaseAffix, {
+    ...props,
+    ...(ariaLabel !== undefined ? { 'aria-label': ariaLabel } : {}),
+    ref,
+}));
+Affix.displayName = 'Affix';

package/dist/packages/attention/attention.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/attention/attention.react.test.js

@@ -0,0 +1,8 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { Attention } from './react.js';
+describeReactSsrAttributeMapping('Attention', Attention, [
+    { propName: 'canClose', attrName: 'can-close' },
+    { propName: 'noArrow', attrName: 'no-arrow' },
+    { propName: 'crossAxis', attrName: 'cross-axis' },
+    { propName: 'fallbackPlacements', attrName: 'fallback-placements', value: ['top', 'bottom'] },
+]);

package/dist/packages/attention/react.d.ts

@@ -7,8 +7,8 @@ declare const BaseAttention: import("@lit/react").ReactWebComponent<Component, {
     onClose: string;
     onclose: string;
 }>;
-type BaseProps = React.ComponentProps<typeof BaseAttention>;
-export type AttentionProps = Omit<BaseProps, 'popover'> & {
+type BaseProps = React.ComponentPropsWithoutRef<typeof BaseAttention>;
+export type AttentionProps = Omit<BaseProps, 'popover' | 'can-close' | 'no-arrow' | 'cross-axis' | 'fallback-placements'> & {
     popover?: boolean;
 } & Partial<Omit<WarpAttention, keyof HTMLElement>>;
 export declare const Attention: React.FC<AttentionProps>;

package/dist/packages/attention/react.js

@@ -14,4 +14,13 @@ const BaseAttention = createComponent({
         onclose: 'close',
     },
 });
-export const Attention = BaseAttention;
+const ForwardedAttention = React.forwardRef(({ canClose, noArrow, crossAxis, fallbackPlacements, ...props }, ref) => React.createElement(BaseAttention, {
+    ...props,
+    ...(canClose ? { 'can-close': true } : {}),
+    ...(noArrow ? { 'no-arrow': true } : {}),
+    ...(crossAxis ? { 'cross-axis': true } : {}),
+    ...(fallbackPlacements !== undefined ? { 'fallback-placements': JSON.stringify(fallbackPlacements) } : {}),
+    ref,
+}));
+export const Attention = ForwardedAttention;
+Attention.displayName = 'Attention';

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

@@ -3,8 +3,14 @@ import React from 'react';
 import { Button } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "ariaValueTextLoading" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>): React.JSX.Element;
-    component: import("@lit/react").ReactWebComponent<import("./button").WarpButton, {}>;
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "ariaValueTextLoading" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
+        fullWidth?: boolean;
+        iconOnly?: boolean;
+    } & React.RefAttributes<import("./button").WarpButton>): React.JSX.Element;
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "ariaValueTextLoading" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
+        fullWidth?: boolean;
+        iconOnly?: boolean;
+    } & React.RefAttributes<import("./button").WarpButton>>;
 };
 export default _default;
 export type Story = StoryObj<typeof Button>;

package/dist/packages/button/button.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/button/button.react.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import { Button } from './react.js';
+describe('Button React SSR', () => {
+    test('renders fullWidth as the full-width attribute', () => {
+        const html = renderToString(React.createElement(Button, { fullWidth: true }, 'Full width'));
+        expect(html).toContain('full-width');
+        expect(html).not.toContain('fullWidth');
+    });
+    test('renders iconOnly as the icon-only attribute', () => {
+        const html = renderToString(React.createElement(Button, { iconOnly: true }, 'Icon only'));
+        expect(html).toContain('icon-only');
+        expect(html).not.toContain('iconOnly');
+    });
+});

package/dist/packages/button/react.d.ts

@@ -1,2 +1,6 @@
+import React from 'react';
 import { WarpButton } from './button.js';
-export declare const Button: import("@lit/react").ReactWebComponent<WarpButton, {}>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "ariaValueTextLoading" | "_handleButtonClick"> & {} & Partial<Omit<WarpButton, keyof HTMLElement>> & React.RefAttributes<WarpButton>, "ref">, "full-width" | "icon-only"> & {
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+} & React.RefAttributes<WarpButton>>;

package/dist/packages/button/react.js

@@ -4,8 +4,15 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const Button = createComponent({
+const BaseButton = createComponent({
     tagName: 'w-button',
     elementClass: Component,
     react: React,
 });
+export const Button = React.forwardRef(({ fullWidth, iconOnly, ...props }, ref) => React.createElement(BaseButton, {
+    ...props,
+    ...(fullWidth ? { 'full-width': true } : {}),
+    ...(iconOnly ? { 'icon-only': true } : {}),
+    ref,
+}));
+Button.displayName = 'Button';

package/dist/packages/checkbox-group/checkbox-group.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/checkbox-group/checkbox-group.react.test.js

@@ -0,0 +1,5 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { CheckboxGroup } from './react.js';
+describeReactSsrAttributeMapping('CheckboxGroup', CheckboxGroup, [
+    { propName: 'helpText', attrName: 'help-text', value: 'Help text' },
+]);

package/dist/packages/checkbox-group/react.d.ts

@@ -1,2 +1,5 @@
+import React from 'react';
 import { WCheckboxGroup } from './checkbox-group.js';
-export declare const CheckboxGroup: import("@lit/react").ReactWebComponent<WCheckboxGroup, {}>;
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WCheckboxGroup>, "form" | "label" | "name" | "invalid" | "helpText" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "reportValidity" | "optional"> & {} & Partial<Omit<WCheckboxGroup, keyof HTMLElement>> & React.RefAttributes<WCheckboxGroup>, "ref">, "help-text"> & {
+    helpText?: string;
+} & React.RefAttributes<WCheckboxGroup>>;

package/dist/packages/checkbox-group/react.js

@@ -4,8 +4,14 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const CheckboxGroup = createComponent({
+const BaseCheckboxGroup = createComponent({
     tagName: 'w-checkbox-group',
     elementClass: Component,
     react: React,
 });
+export const CheckboxGroup = React.forwardRef(({ helpText, ...props }, ref) => React.createElement(BaseCheckboxGroup, {
+    ...props,
+    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
+    ref,
+}));
+CheckboxGroup.displayName = 'CheckboxGroup';

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

@@ -3,18 +3,30 @@ import React from 'react';
 import { Combobox } from './react';
 declare const _default: {
     title: string;
-    component: import("@lit/react").ReactWebComponent<import("./combobox").WarpCombobox, {
-        onSelect: string;
-        onselect: string;
-        onChange: string;
-        onchange: string;
-    }>;
-    render(args: Omit<React.HTMLAttributes<import("./combobox").WarpCombobox>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "required" | "autocomplete" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "onselect" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "onSelect" | "optional" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering"> & {
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./combobox").WarpCombobox>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "required" | "autocomplete" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "onselect" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "onSelect" | "optional" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering"> & {
         onSelect?: (e: Event) => void;
         onselect?: (e: Event) => void;
         onChange?: (e: Event) => void;
         onchange?: (e: Event) => void;
-    } & Partial<Omit<import("./combobox").WarpCombobox, keyof HTMLElement>> & React.RefAttributes<import("./combobox").WarpCombobox>): React.JSX.Element;
+    } & Partial<Omit<import("./combobox").WarpCombobox, keyof HTMLElement>> & React.RefAttributes<import("./combobox").WarpCombobox>, "ref">, "help-text" | "open-on-focus" | "select-on-blur" | "match-text-segments" | "disable-static-filtering"> & {
+        openOnFocus?: boolean;
+        selectOnBlur?: boolean;
+        matchTextSegments?: boolean;
+        disableStaticFiltering?: boolean;
+        helpText?: string;
+    } & React.RefAttributes<import("./combobox").WarpCombobox>>;
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./combobox").WarpCombobox>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "required" | "autocomplete" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "onselect" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "onSelect" | "optional" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering"> & {
+        onSelect?: (e: Event) => void;
+        onselect?: (e: Event) => void;
+        onChange?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+    } & Partial<Omit<import("./combobox").WarpCombobox, keyof HTMLElement>> & React.RefAttributes<import("./combobox").WarpCombobox>, "ref">, "help-text" | "open-on-focus" | "select-on-blur" | "match-text-segments" | "disable-static-filtering"> & {
+        openOnFocus?: boolean;
+        selectOnBlur?: boolean;
+        matchTextSegments?: boolean;
+        disableStaticFiltering?: boolean;
+        helpText?: string;
+    } & React.RefAttributes<import("./combobox").WarpCombobox>): React.JSX.Element;
 };
 export default _default;
 export type Story = StoryObj<typeof Combobox>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { Combobox } from './react.js';
+describeReactSsrAttributeMapping('Combobox', Combobox, [
+    { propName: 'openOnFocus', attrName: 'open-on-focus' },
+    { propName: 'selectOnBlur', attrName: 'select-on-blur' },
+    { propName: 'matchTextSegments', attrName: 'match-text-segments' },
+    { propName: 'disableStaticFiltering', attrName: 'disable-static-filtering' },
+    { propName: 'helpText', attrName: 'help-text', value: 'Help text' },
+]);

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

@@ -1,7 +1,14 @@
+import React from 'react';
 import { WarpCombobox } from './combobox.js';
-export declare const Combobox: import("@lit/react").ReactWebComponent<WarpCombobox, {
-    onSelect: string;
-    onselect: string;
-    onChange: string;
-    onchange: string;
-}>;
+export declare const Combobox: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpCombobox>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "required" | "autocomplete" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "onselect" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "onSelect" | "optional" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering"> & {
+    onSelect?: (e: Event) => void;
+    onselect?: (e: Event) => void;
+    onChange?: (e: Event) => void;
+    onchange?: (e: Event) => void;
+} & Partial<Omit<WarpCombobox, keyof HTMLElement>> & React.RefAttributes<WarpCombobox>, "ref">, "help-text" | "open-on-focus" | "select-on-blur" | "match-text-segments" | "disable-static-filtering"> & {
+    openOnFocus?: boolean;
+    selectOnBlur?: boolean;
+    matchTextSegments?: boolean;
+    disableStaticFiltering?: boolean;
+    helpText?: string;
+} & React.RefAttributes<WarpCombobox>>;

package/dist/packages/combobox/react.js

@@ -4,7 +4,7 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const Combobox = createComponent({
+const BaseCombobox = createComponent({
     tagName: 'w-combobox',
     elementClass: Component,
     react: React,
@@ -15,3 +15,13 @@ export const Combobox = createComponent({
         onchange: 'change',
     },
 });
+export const Combobox = React.forwardRef(({ openOnFocus, selectOnBlur, matchTextSegments, disableStaticFiltering, helpText, ...props }, ref) => React.createElement(BaseCombobox, {
+    ...props,
+    ...(openOnFocus ? { 'open-on-focus': true } : {}),
+    ...(selectOnBlur ? { 'select-on-blur': true } : {}),
+    ...(matchTextSegments ? { 'match-text-segments': true } : {}),
+    ...(disableStaticFiltering ? { 'disable-static-filtering': true } : {}),
+    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
+    ref,
+}));
+Combobox.displayName = 'Combobox';

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

@@ -3,22 +3,30 @@ import React from 'react';
 import { DatePicker } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./datepicker").WarpDatepicker>, "value" | "input" | "form" | "label" | "name" | "locale" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "oninput" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onBlur" | "onChange" | "onInput" | "month" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "selectedDate" | "weeks" | "toggleButton" | "previousMonthButton" | "todayCell" | "selectedCell"> & {
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./datepicker").WarpDatepicker>, "value" | "input" | "form" | "label" | "name" | "locale" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "oninput" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onBlur" | "onChange" | "onInput" | "month" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "selectedDate" | "weeks" | "toggleButton" | "previousMonthButton" | "todayCell" | "selectedCell"> & {
         onChange?: (e: Event) => void;
         onchange?: (e: Event) => void;
         onBlur?: (e: Event) => void;
         onblur?: (e: Event) => void;
         onInput?: (e: Event) => void;
         oninput?: (e: Event) => void;
-    } & Partial<Omit<import("./datepicker").WarpDatepicker, keyof HTMLElement>> & React.RefAttributes<import("./datepicker").WarpDatepicker>): React.JSX.Element;
-    component: import("@lit/react").ReactWebComponent<import("./datepicker").WarpDatepicker, {
-        onChange: string;
-        onchange: string;
-        onBlur: string;
-        onblur: string;
-        onInput: string;
-        oninput: string;
-    }>;
+    } & Partial<Omit<import("./datepicker").WarpDatepicker, keyof HTMLElement>> & React.RefAttributes<import("./datepicker").WarpDatepicker>, "ref">, "header-format" | "weekday-format" | "day-format"> & {
+        headerFormat?: string;
+        weekdayFormat?: string;
+        dayFormat?: string;
+    } & React.RefAttributes<import("./datepicker").WarpDatepicker>): React.JSX.Element;
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./datepicker").WarpDatepicker>, "value" | "input" | "form" | "label" | "name" | "locale" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "oninput" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onBlur" | "onChange" | "onInput" | "month" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "selectedDate" | "weeks" | "toggleButton" | "previousMonthButton" | "todayCell" | "selectedCell"> & {
+        onChange?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+        onBlur?: (e: Event) => void;
+        onblur?: (e: Event) => void;
+        onInput?: (e: Event) => void;
+        oninput?: (e: Event) => void;
+    } & Partial<Omit<import("./datepicker").WarpDatepicker, keyof HTMLElement>> & React.RefAttributes<import("./datepicker").WarpDatepicker>, "ref">, "header-format" | "weekday-format" | "day-format"> & {
+        headerFormat?: string;
+        weekdayFormat?: string;
+        dayFormat?: string;
+    } & React.RefAttributes<import("./datepicker").WarpDatepicker>>;
 };
 export default _default;
 export type Story = StoryObj<typeof DatePicker>;

package/dist/packages/datepicker/datepicker.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/datepicker/datepicker.react.test.js

@@ -0,0 +1,7 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { DatePicker } from './react.js';
+describeReactSsrAttributeMapping('DatePicker', DatePicker, [
+    { propName: 'headerFormat', attrName: 'header-format', value: 'short' },
+    { propName: 'weekdayFormat', attrName: 'weekday-format', value: 'narrow' },
+    { propName: 'dayFormat', attrName: 'day-format', value: 'numeric' },
+]);