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

package/dist/docs/step/step.md

@@ -4,35 +4,31 @@
 
 Individual step component that shows a single step in a process
 
-## Usage
+### `<w-step>` API
 
-## Accessibility
-
-## Examples
-
-## `<w-step>` API
-
-Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
-
-### Properties
+#### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| active | `boolean` | `false` | - |
-| completed | `boolean` | `false` | - |
+| active | `boolean` | `false` | Whether this step is active. |
+| completed | `boolean` | `false` | Whether this step is completed. |
 
-### Property Details
+#### Property Details
 
-#### active
+##### active
 
+Whether this step is active.
 
+The active step displays a filled indicator.
 
 - Type: `boolean`
 - Default: `false`
 
-#### completed
+##### completed
 
+Whether this step is completed.
 
+Completed steps display a checkmark icon and a filled indicator.
 
 - Type: `boolean`
 - Default: `false`

package/dist/docs/step-indicator/api.md

@@ -6,21 +6,21 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| horizontal | `boolean` | `false` | - |
-| right | `boolean` | `false` | - |
+| horizontal | `boolean` | `false` | Display steps horizontally instead of vertically |
+| right | `boolean` | `false` | Align steps to the right (vertical layout only) |
 
 ### Property Details
 
 #### horizontal
 
-
+Display steps horizontally instead of vertically
 
 - Type: `boolean`
 - Default: `false`
 
 #### right
 
-
+Align steps to the right (vertical layout only)
 
 - Type: `boolean`
 - Default: `false`

package/dist/docs/step-indicator/examples.md

@@ -1 +1,82 @@
 ## Examples
+
+<elements-example>
+
+```html
+<w-step-indicator>
+  <w-step completed>
+    <h4>Step one</h4>
+    <p>This step is completed</p>
+  </w-step>
+  <w-step active>
+    <h4>Step two</h4>
+    <p>This is the current step</p>
+  </w-step>
+  <w-step>
+    <h4>Step three</h4>
+    <p>This step is upcoming</p>
+  </w-step>
+</w-step-indicator>
+
+<script type="module">
+  // Update step states programmatically
+  const steps = document.querySelectorAll('w-step');
+
+  // Mark a step as completed
+  steps[0].completed = true;
+
+  // Mark a step as active
+  steps[1].active = true;
+</script>
+```
+
+</elements-example>
+
+### Horizontal steps
+
+<elements-example>
+
+
+```html
+<w-step-indicator horizontal>
+  <w-step completed>
+    <h4>Step 1</h4>
+    <p>Completed</p>
+  </w-step>
+  <w-step active>
+    <h4>Step 2</h4>
+    <p>In progress</p>
+  </w-step>
+  <w-step>
+    <h4>Step 3</h4>
+    <p>Upcoming</p>
+  </w-step>
+</w-step-indicator>
+```
+
+</elements-example>
+
+### Right-aligned vertical steps
+
+`right` can not be used with `horizontal` (`horizontal` wins).
+
+<elements-example>
+
+```html
+<w-step-indicator right>
+  <w-step completed>
+    <h4>Step 1</h4>
+    <p>Completed</p>
+  </w-step>
+  <w-step active>
+    <h4>Step 2</h4>
+    <p>In progress</p>
+  </w-step>
+  <w-step>
+    <h4>Step 3</h4>
+    <p>Upcoming</p>
+  </w-step>
+</w-step-indicator>
+```
+
+</elements-example>

package/dist/docs/step-indicator/step-indicator.md

@@ -4,14 +4,105 @@
 
 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)
-
 ## Usage
 
+The steps component consists of two custom elements that work together:
+
+- `<w-step-indicator>` - The container that manages step layout and orientation
+- `<w-step>` - Individual step items within the indicator
+
+Each `<w-step>` can be marked as `active` or `completed` to indicate progress. The `<w-step-indicator>` component automatically handles:
+
+- Vertical and horizontal layouts
+- Left and right alignment (for vertical layout)
+- Visual connecting lines between steps
+- ARIA attributes for accessibility
+
 ## Accessibility
 
 ## Examples
 
+<elements-example>
+
+```html
+<w-step-indicator>
+  <w-step completed>
+    <h4>Step one</h4>
+    <p>This step is completed</p>
+  </w-step>
+  <w-step active>
+    <h4>Step two</h4>
+    <p>This is the current step</p>
+  </w-step>
+  <w-step>
+    <h4>Step three</h4>
+    <p>This step is upcoming</p>
+  </w-step>
+</w-step-indicator>
+
+<script type="module">
+  // Update step states programmatically
+  const steps = document.querySelectorAll('w-step');
+
+  // Mark a step as completed
+  steps[0].completed = true;
+
+  // Mark a step as active
+  steps[1].active = true;
+</script>
+```
+
+</elements-example>
+
+### Horizontal steps
+
+<elements-example>
+
+
+```html
+<w-step-indicator horizontal>
+  <w-step completed>
+    <h4>Step 1</h4>
+    <p>Completed</p>
+  </w-step>
+  <w-step active>
+    <h4>Step 2</h4>
+    <p>In progress</p>
+  </w-step>
+  <w-step>
+    <h4>Step 3</h4>
+    <p>Upcoming</p>
+  </w-step>
+</w-step-indicator>
+```
+
+</elements-example>
+
+### Right-aligned vertical steps
+
+`right` can not be used with `horizontal` (`horizontal` wins).
+
+<elements-example>
+
+```html
+<w-step-indicator right>
+  <w-step completed>
+    <h4>Step 1</h4>
+    <p>Completed</p>
+  </w-step>
+  <w-step active>
+    <h4>Step 2</h4>
+    <p>In progress</p>
+  </w-step>
+  <w-step>
+    <h4>Step 3</h4>
+    <p>Upcoming</p>
+  </w-step>
+</w-step-indicator>
+```
+
+</elements-example>
+
 ## `<w-step-indicator>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -20,21 +111,21 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| horizontal | `boolean` | `false` | - |
-| right | `boolean` | `false` | - |
+| horizontal | `boolean` | `false` | Display steps horizontally instead of vertically |
+| right | `boolean` | `false` | Align steps to the right (vertical layout only) |
 
 ### Property Details
 
 #### horizontal
 
-
+Display steps horizontally instead of vertically
 
 - Type: `boolean`
 - Default: `false`
 
 #### right
 
-
+Align steps to the right (vertical layout only)
 
 - Type: `boolean`
 - Default: `false`

package/dist/docs/step-indicator/usage.md

@@ -1 +1,13 @@
 ## Usage
+
+The steps component consists of two custom elements that work together:
+
+- `<w-step-indicator>` - The container that manages step layout and orientation
+- `<w-step>` - Individual step items within the indicator
+
+Each `<w-step>` can be marked as `active` or `completed` to indicate progress. The `<w-step-indicator>` component automatically handles:
+
+- Vertical and horizontal layouts
+- Left and right alignment (for vertical layout)
+- Visual connecting lines between steps
+- ARIA attributes for accessibility

package/dist/docs/switch/accessibility.md

@@ -1 +1,3 @@
 ## Accessibility
+
+The internal control is rendered as a native `button` with `role="switch"` and `aria-checked` / `aria-disabled`.

package/dist/docs/switch/api.md

@@ -6,45 +6,39 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| checked | `boolean` | `false` | - |
-| disabled | `boolean` | `false` | - |
-| name | `string` | `-` | - |
-| shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
-| value | `string` | `-` | - |
+| checked | `boolean` | `false` | Whether the switch is on (checked). |
+| disabled | `boolean` | `false` | Whether the switch is disabled. |
+| name | `string` | `-` | Name used when submitting an HTML form. |
+| value | `string` | `-` | Value submitted when the switch is checked. |
 
 ### Property Details
 
 #### checked
 
-
+Whether the switch is on (checked).
 
 - Type: `boolean`
 - Default: `false`
 
 #### disabled
 
-
+Whether the switch is disabled.
 
 - Type: `boolean`
 - Default: `false`
 
 #### name
 
-
+Name used when submitting an HTML form.
 
 - Type: `string`
 - Default: `-`
 
-#### shadowRootOptions (JS only)
-
-
-
-- Type: `object`
-- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
-
 #### 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.
 
 - Type: `string`
 - Default: `-`
@@ -53,8 +47,8 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 #### change
 
+Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`.
 
-
-- Type: `CustomEvent`
+- Type: `WarpSwitchChangeEvent`
 
 

package/dist/docs/switch/examples.md

@@ -1 +1,17 @@
 ## Examples
+
+<elements-example>
+
+```html
+<w-switch id="demo-switch" name="marketing" value="yes"></w-switch>
+
+<script>
+  const el = document.querySelector('#demo-switch');
+  el.addEventListener('change', (event) => {
+    // event.detail = { checked: boolean, value: string | null }
+    console.log('changed', event.detail);
+  });
+</script>
+```
+
+</elements-example>

package/dist/docs/switch/switch.md

@@ -2,14 +2,38 @@
 
 ## Description
 
-
+The Switch component allows users to toggle between two states.
 
 ## Usage
 
+`<w-switch>` is a form-associated toggle component.
+
+- It reflects its `name`, `value`, `checked`, and `disabled` properties to attributes.
+- It dispatches a bubbling `change` `CustomEvent` when toggled (when not disabled).
+- When used in a form, the control submits `value` only when `checked` is `true` (otherwise it submits nothing).
+
 ## Accessibility
 
+The internal control is rendered as a native `button` with `role="switch"` and `aria-checked` / `aria-disabled`.
+
 ## Examples
 
+<elements-example>
+
+```html
+<w-switch id="demo-switch" name="marketing" value="yes"></w-switch>
+
+<script>
+  const el = document.querySelector('#demo-switch');
+  el.addEventListener('change', (event) => {
+    // event.detail = { checked: boolean, value: string | null }
+    console.log('changed', event.detail);
+  });
+</script>
+```
+
+</elements-example>
+
 ## `<w-switch>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -18,45 +42,39 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| checked | `boolean` | `false` | - |
-| disabled | `boolean` | `false` | - |
-| name | `string` | `-` | - |
-| shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
-| value | `string` | `-` | - |
+| checked | `boolean` | `false` | Whether the switch is on (checked). |
+| disabled | `boolean` | `false` | Whether the switch is disabled. |
+| name | `string` | `-` | Name used when submitting an HTML form. |
+| value | `string` | `-` | Value submitted when the switch is checked. |
 
 ### Property Details
 
 #### checked
 
-
+Whether the switch is on (checked).
 
 - Type: `boolean`
 - Default: `false`
 
 #### disabled
 
-
+Whether the switch is disabled.
 
 - Type: `boolean`
 - Default: `false`
 
 #### name
 
-
+Name used when submitting an HTML form.
 
 - Type: `string`
 - Default: `-`
 
-#### shadowRootOptions (JS only)
-
-
-
-- Type: `object`
-- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
-
 #### 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.
 
 - Type: `string`
 - Default: `-`
@@ -65,8 +83,8 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 #### change
 
+Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`.
 
-
-- Type: `CustomEvent`
+- Type: `WarpSwitchChangeEvent`
 
 

package/dist/docs/switch/usage.md

@@ -1 +1,7 @@
 ## Usage
+
+`<w-switch>` is a form-associated toggle component.
+
+- It reflects its `name`, `value`, `checked`, and `disabled` properties to attributes.
+- It dispatches a bubbling `change` `CustomEvent` when toggled (when not disabled).
+- When used in a form, the control submits `value` only when `checked` is `true` (otherwise it submits nothing).