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

package/dist/packages/tab/react.js

@@ -4,7 +4,7 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const Tab = createComponent({
+const BaseTab = createComponent({
     tagName: 'w-tab',
     elementClass: Component,
     react: React,
@@ -15,3 +15,9 @@ export const Tab = createComponent({
         onclick: 'click',
     },
 });
+export const Tab = React.forwardRef(({ ariaSelected, ...props }, ref) => React.createElement(BaseTab, {
+    ...props,
+    ...(ariaSelected !== undefined ? { 'aria-selected': ariaSelected } : {}),
+    ref,
+}));
+Tab.displayName = 'Tab';

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

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

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

@@ -0,0 +1,3 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { Tab } from './react.js';
+describeReactSsrAttributeMapping('Tab', Tab, [{ propName: 'ariaSelected', attrName: 'aria-selected', value: 'true' }]);

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

@@ -1,11 +1,17 @@
+import React from 'react';
 import { WarpTextarea } from './textarea.js';
-export declare const Textarea: import("@lit/react").ReactWebComponent<WarpTextarea, {
-    onBlur: string;
-    onblur: string;
-    onChange: string;
-    onchange: string;
-    onInput: string;
-    oninput: string;
-    onFocus: string;
-    onfocus: string;
-}>;
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "optional" | "setCustomValidity" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
+    onBlur?: (e: Event) => void;
+    onblur?: (e: Event) => void;
+    onChange?: (e: Event) => void;
+    onchange?: (e: Event) => void;
+    onInput?: (e: Event) => void;
+    oninput?: (e: Event) => void;
+    onFocus?: (e: Event) => void;
+    onfocus?: (e: Event) => void;
+} & Partial<Omit<WarpTextarea, keyof HTMLElement>> & React.RefAttributes<WarpTextarea>, "ref">, "help-text" | "read-only" | "maximum-rows" | "minimum-rows"> & {
+    helpText?: string;
+    maxRows?: number;
+    minRows?: number;
+    readOnly?: boolean;
+} & React.RefAttributes<WarpTextarea>>;

package/dist/packages/textarea/react.js

@@ -4,7 +4,7 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const Textarea = createComponent({
+const BaseTextarea = createComponent({
     tagName: 'w-textarea',
     elementClass: Component,
     react: React,
@@ -19,3 +19,12 @@ export const Textarea = createComponent({
         onfocus: 'focus',
     },
 });
+export const Textarea = React.forwardRef(({ helpText, maxRows, minRows, readOnly, ...props }, ref) => React.createElement(BaseTextarea, {
+    ...props,
+    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
+    ...(maxRows !== undefined ? { 'maximum-rows': maxRows } : {}),
+    ...(minRows !== undefined ? { 'minimum-rows': minRows } : {}),
+    ...(readOnly ? { 'read-only': true } : {}),
+    ref,
+}));
+Textarea.displayName = 'Textarea';

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Textarea } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "optional" | "setCustomValidity" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "optional" | "setCustomValidity" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
         onBlur?: (e: Event) => void;
         onblur?: (e: Event) => void;
         onChange?: (e: Event) => void;
@@ -12,17 +12,27 @@ declare const _default: {
         oninput?: (e: Event) => void;
         onFocus?: (e: Event) => void;
         onfocus?: (e: Event) => void;
-    } & Partial<Omit<import("./textarea").WarpTextarea, keyof HTMLElement>> & React.RefAttributes<import("./textarea").WarpTextarea>): React.JSX.Element;
-    component: import("@lit/react").ReactWebComponent<import("./textarea").WarpTextarea, {
-        onBlur: string;
-        onblur: string;
-        onChange: string;
-        onchange: string;
-        onInput: string;
-        oninput: string;
-        onFocus: string;
-        onfocus: string;
-    }>;
+    } & Partial<Omit<import("./textarea").WarpTextarea, keyof HTMLElement>> & React.RefAttributes<import("./textarea").WarpTextarea>, "ref">, "help-text" | "read-only" | "maximum-rows" | "minimum-rows"> & {
+        helpText?: string;
+        maxRows?: number;
+        minRows?: number;
+        readOnly?: boolean;
+    } & React.RefAttributes<import("./textarea").WarpTextarea>): React.JSX.Element;
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "optional" | "setCustomValidity" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
+        onBlur?: (e: Event) => void;
+        onblur?: (e: Event) => void;
+        onChange?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+        onInput?: (e: Event) => void;
+        oninput?: (e: Event) => void;
+        onFocus?: (e: Event) => void;
+        onfocus?: (e: Event) => void;
+    } & Partial<Omit<import("./textarea").WarpTextarea, keyof HTMLElement>> & React.RefAttributes<import("./textarea").WarpTextarea>, "ref">, "help-text" | "read-only" | "maximum-rows" | "minimum-rows"> & {
+        helpText?: string;
+        maxRows?: number;
+        minRows?: number;
+        readOnly?: boolean;
+    } & React.RefAttributes<import("./textarea").WarpTextarea>>;
 };
 export default _default;
 export type Story = StoryObj<typeof Textarea>;

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

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

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

@@ -0,0 +1,8 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { Textarea } from './react.js';
+describeReactSsrAttributeMapping('Textarea', Textarea, [
+    { propName: 'helpText', attrName: 'help-text', value: 'Help text' },
+    { propName: 'maxRows', attrName: 'maximum-rows', value: 5 },
+    { propName: 'minRows', attrName: 'minimum-rows', value: 2 },
+    { propName: 'readOnly', attrName: 'read-only' },
+]);

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

@@ -1,11 +1,17 @@
+import React from 'react';
 import { WarpTextField } from './textfield.js';
-export declare const TextField: import("@lit/react").ReactWebComponent<WarpTextField, {
-    onBlur: string;
-    onblur: string;
-    onChange: string;
-    onchange: string;
-    onInput: string;
-    oninput: string;
-    onFocus: string;
-    onfocus: string;
-}>;
+export declare const TextField: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpTextField>, "value" | "form" | "label" | "mask" | "pattern" | "name" | "size" | "disabled" | "invalid" | "helpText" | "max" | "min" | "minLength" | "minlength" | "maxLength" | "maxlength" | "placeholder" | "readOnly" | "readonly" | "required" | "type" | "step" | "autocomplete" | "formatter" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "_hasPrefix" | "_hasSuffix" | "updated" | "firstUpdated" | "resetFormControl" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput"> & {
+    onBlur?: (e: Event) => void;
+    onblur?: (e: Event) => void;
+    onChange?: (e: Event) => void;
+    onchange?: (e: Event) => void;
+    onInput?: (e: Event) => void;
+    oninput?: (e: Event) => void;
+    onFocus?: (e: Event) => void;
+    onfocus?: (e: Event) => void;
+} & Partial<Omit<WarpTextField, keyof HTMLElement>> & React.RefAttributes<WarpTextField>, "ref">, "help-text" | "min-length" | "max-length" | "read-only"> & {
+    helpText?: string;
+    minLength?: number;
+    maxLength?: number;
+    readOnly?: boolean;
+} & React.RefAttributes<WarpTextField>>;

package/dist/packages/textfield/react.js

@@ -4,7 +4,7 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const TextField = createComponent({
+const BaseTextField = createComponent({
     tagName: 'w-textfield',
     elementClass: Component,
     react: React,
@@ -19,3 +19,12 @@ export const TextField = createComponent({
         onfocus: 'focus',
     },
 });
+export const TextField = React.forwardRef(({ helpText, minLength, maxLength, readOnly, ...props }, ref) => React.createElement(BaseTextField, {
+    ...props,
+    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
+    ...(minLength !== undefined ? { 'min-length': minLength } : {}),
+    ...(maxLength !== undefined ? { 'max-length': maxLength } : {}),
+    ...(readOnly ? { 'read-only': true } : {}),
+    ref,
+}));
+TextField.displayName = 'TextField';

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { TextField } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./textfield").WarpTextField>, "value" | "form" | "label" | "mask" | "pattern" | "name" | "size" | "disabled" | "invalid" | "helpText" | "max" | "min" | "minLength" | "minlength" | "maxLength" | "maxlength" | "placeholder" | "readOnly" | "readonly" | "required" | "type" | "step" | "autocomplete" | "formatter" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "_hasPrefix" | "_hasSuffix" | "updated" | "firstUpdated" | "resetFormControl" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput"> & {
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./textfield").WarpTextField>, "value" | "form" | "label" | "mask" | "pattern" | "name" | "size" | "disabled" | "invalid" | "helpText" | "max" | "min" | "minLength" | "minlength" | "maxLength" | "maxlength" | "placeholder" | "readOnly" | "readonly" | "required" | "type" | "step" | "autocomplete" | "formatter" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "_hasPrefix" | "_hasSuffix" | "updated" | "firstUpdated" | "resetFormControl" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput"> & {
         onBlur?: (e: Event) => void;
         onblur?: (e: Event) => void;
         onChange?: (e: Event) => void;
@@ -12,17 +12,27 @@ declare const _default: {
         oninput?: (e: Event) => void;
         onFocus?: (e: Event) => void;
         onfocus?: (e: Event) => void;
-    } & Partial<Omit<import("./textfield").WarpTextField, keyof HTMLElement>> & React.RefAttributes<import("./textfield").WarpTextField>): React.JSX.Element;
-    component: import("@lit/react").ReactWebComponent<import("./textfield").WarpTextField, {
-        onBlur: string;
-        onblur: string;
-        onChange: string;
-        onchange: string;
-        onInput: string;
-        oninput: string;
-        onFocus: string;
-        onfocus: string;
-    }>;
+    } & Partial<Omit<import("./textfield").WarpTextField, keyof HTMLElement>> & React.RefAttributes<import("./textfield").WarpTextField>, "ref">, "help-text" | "min-length" | "max-length" | "read-only"> & {
+        helpText?: string;
+        minLength?: number;
+        maxLength?: number;
+        readOnly?: boolean;
+    } & React.RefAttributes<import("./textfield").WarpTextField>): React.JSX.Element;
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./textfield").WarpTextField>, "value" | "form" | "label" | "mask" | "pattern" | "name" | "size" | "disabled" | "invalid" | "helpText" | "max" | "min" | "minLength" | "minlength" | "maxLength" | "maxlength" | "placeholder" | "readOnly" | "readonly" | "required" | "type" | "step" | "autocomplete" | "formatter" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "_hasPrefix" | "_hasSuffix" | "updated" | "firstUpdated" | "resetFormControl" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput"> & {
+        onBlur?: (e: Event) => void;
+        onblur?: (e: Event) => void;
+        onChange?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+        onInput?: (e: Event) => void;
+        oninput?: (e: Event) => void;
+        onFocus?: (e: Event) => void;
+        onfocus?: (e: Event) => void;
+    } & Partial<Omit<import("./textfield").WarpTextField, keyof HTMLElement>> & React.RefAttributes<import("./textfield").WarpTextField>, "ref">, "help-text" | "min-length" | "max-length" | "read-only"> & {
+        helpText?: string;
+        minLength?: number;
+        maxLength?: number;
+        readOnly?: boolean;
+    } & React.RefAttributes<import("./textfield").WarpTextField>>;
 };
 export default _default;
 export type Story = StoryObj<typeof TextField>;

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

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

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

@@ -0,0 +1,8 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { TextField } from './react.js';
+describeReactSsrAttributeMapping('TextField', TextField, [
+    { propName: 'helpText', attrName: 'help-text', value: 'Help text' },
+    { propName: 'minLength', attrName: 'min-length', value: 2 },
+    { propName: 'maxLength', attrName: 'max-length', value: 10 },
+    { propName: 'readOnly', attrName: 'read-only' },
+]);

package/dist/tests/react-ssr-attributes.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type SsrAttributeCase = {
+    attrName: string;
+    propName: string;
+    value?: unknown;
+};
+export declare function describeReactSsrAttributeMapping(componentName: string, Component: React.ElementType, cases: SsrAttributeCase[]): void;
+export {};

package/dist/tests/react-ssr-attributes.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+export function describeReactSsrAttributeMapping(componentName, Component, cases) {
+    describe(`${componentName} React SSR`, () => {
+        test.each(cases)('renders $propName as the $attrName attribute', ({ attrName, propName, value = true }) => {
+            const html = renderToString(React.createElement(Component, { [propName]: value }, componentName));
+            expect(html).toContain(attrName);
+            expect(html).not.toContain(propName);
+        });
+    });
+}

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.9.1-next.4",
+  "version": "2.9.1-next.5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1983,70 +1983,128 @@
           "attributes": [
             {
               "name": "active",
+              "description": "Whether this step is active.\n\nThe active step displays a filled indicator.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "completed",
+              "description": "Whether this step is completed.\n\nCompleted steps display a checkmark icon and a filled indicator.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "active", "type": "boolean" },
-              { "name": "completed", "type": "boolean" }
+              {
+                "name": "active",
+                "description": "Whether this step is active.\n\nThe active step displays a filled indicator.",
+                "type": "boolean"
+              },
+              {
+                "name": "completed",
+                "description": "Whether this step is completed.\n\nCompleted steps display a checkmark icon and a filled indicator.",
+                "type": "boolean"
+              }
             ],
             "events": []
           }
         },
         {
           "name": "w-step-indicator",
-          "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)\n---\n",
+          "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n---\n",
           "doc-url": "",
           "attributes": [
             {
               "name": "horizontal",
+              "description": "Display steps horizontally instead of vertically",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "right",
+              "description": "Align steps to the right (vertical layout only)",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "horizontal", "type": "boolean" },
-              { "name": "right", "type": "boolean" }
+              {
+                "name": "horizontal",
+                "description": "Display steps horizontally instead of vertically",
+                "type": "boolean"
+              },
+              {
+                "name": "right",
+                "description": "Align steps to the right (vertical layout only)",
+                "type": "boolean"
+              }
             ],
             "events": []
           }
         },
         {
           "name": "w-switch",
-          "description": "\n---\n\n\n### **Events:**\n - **change**",
+          "description": "The Switch component allows users to toggle between two states.\n---\n\n\n### **Events:**\n - **change** - Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`.",
           "doc-url": "",
           "attributes": [
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
+            {
+              "name": "name",
+              "description": "Name used when submitting an HTML form.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "value",
+              "description": "Value submitted when the switch is checked.\n\nThe component reports `null` as the value in the `change` event when `value` is an empty string.",
+              "value": { "type": "string" }
+            },
             {
               "name": "checked",
+              "description": "Whether the switch is on (checked).",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "disabled",
+              "description": "Whether the switch is disabled.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [{ "name": "change", "type": "CustomEvent" }],
+          "events": [
+            {
+              "name": "change",
+              "type": "WarpSwitchChangeEvent",
+              "description": "Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`."
+            }
+          ],
           "js": {
             "properties": [
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" },
-              { "name": "checked", "type": "boolean" },
-              { "name": "disabled", "type": "boolean" }
+              {
+                "name": "name",
+                "description": "Name used when submitting an HTML form.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "Value submitted when the switch is checked.\n\nThe component reports `null` as the value in the `change` event when `value` is an empty string.",
+                "type": "string"
+              },
+              {
+                "name": "checked",
+                "description": "Whether the switch is on (checked).",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Whether the switch is disabled.",
+                "type": "boolean"
+              }
             ],
-            "events": [{ "name": "change", "type": "CustomEvent" }]
+            "events": [
+              {
+                "name": "change",
+                "type": "WarpSwitchChangeEvent",
+                "description": "Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`."
+              }
+            ]
           }
         },
         {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.9.1-next.5",
+  "version": "2.9.1-next.6",
   "packageManager": "pnpm@10.33.2",
   "description": "Custom elements for Warp",
   "exports": {

package/dist/docs/step/accessibility.md

@@ -1 +0,0 @@
-## Accessibility

package/dist/docs/step/examples.md

@@ -1 +0,0 @@
-## Examples

package/dist/docs/step/usage.md

@@ -1 +0,0 @@
-## Usage