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

package/dist/docs/affix/affix.md

@@ -144,14 +144,16 @@ Clicking the clear button will reset the textfield
 
 </elements-example>
 
-## API Documentation
+## `<w-affix>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| _icon | `unknown` | `-` | - |
-| ariaLabel | `string \| null` | `null` | Accessible label for icon-button variants. |
+| _icon (JS only) | `unknown` | `-` | - |
+| aria-label | `string \| null` | `null` | Accessible label for icon-button variants. |
 | clear | `boolean` | `false` | Renders a clear icon button. |
 | icon | `string \| null` | `null` | Icon name rendered as prefix/suffix content. |
 | label | `string` | `''` | Text label shown as prefix/suffix content. |
@@ -159,18 +161,18 @@ Clicking the clear button will reset the textfield
 
 ### Property Details
 
-#### _icon
+#### _icon (JS only)
 
 
 
 - Type: `unknown`
 - Default: `-`
 
-#### ariaLabel
+#### aria-label
 
 
 
-- Type: `string \| null`
+- Type: `string | null`
 - Default: `null`
 
 #### clear
@@ -186,7 +188,7 @@ Set an `aria-label` that explains the action when using this.
 
 
 
-- Type: `string \| null`
+- Type: `string | null`
 - Default: `null`
 
 #### label
@@ -203,6 +205,3 @@ Add this property to render a clickable Warp search icon.
 - Type: `boolean`
 - Default: `false`
 
-### Types
-
-No types documented.

package/dist/docs/affix/api.md

@@ -1,11 +1,13 @@
-## API Documentation
+## `<w-affix>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| _icon | `unknown` | `-` | - |
-| ariaLabel | `string \| null` | `null` | Accessible label for icon-button variants. |
+| _icon (JS only) | `unknown` | `-` | - |
+| aria-label | `string \| null` | `null` | Accessible label for icon-button variants. |
 | clear | `boolean` | `false` | Renders a clear icon button. |
 | icon | `string \| null` | `null` | Icon name rendered as prefix/suffix content. |
 | label | `string` | `''` | Text label shown as prefix/suffix content. |
@@ -13,18 +15,18 @@
 
 ### Property Details
 
-#### _icon
+#### _icon (JS only)
 
 
 
 - Type: `unknown`
 - Default: `-`
 
-#### ariaLabel
+#### aria-label
 
 
 
-- Type: `string \| null`
+- Type: `string | null`
 - Default: `null`
 
 #### clear
@@ -40,7 +42,7 @@ Set an `aria-label` that explains the action when using this.
 
 
 
-- Type: `string \| null`
+- Type: `string | null`
 - Default: `null`
 
 #### label
@@ -57,6 +59,3 @@ Add this property to render a clickable Warp search icon.
 - Type: `boolean`
 - Default: `false`
 
-### Types
-
-No types documented.

package/dist/docs/alert/alert.md

@@ -152,7 +152,9 @@ attribute on [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/AR
 </script>
 ```
 
-## API Documentation
+## `<w-alert>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
@@ -189,5 +191,5 @@ attribute on [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/AR
 
 #### AlertVariants
 
-`'negative' \| 'positive' \| 'warning' \| 'info'`
+`'negative' | 'positive' | 'warning' | 'info'`
 

package/dist/docs/alert/api.md

@@ -1,4 +1,6 @@
-## API Documentation
+## `<w-alert>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
@@ -35,5 +37,5 @@
 
 #### AlertVariants
 
-`'negative' \| 'positive' \| 'warning' \| 'info'`
+`'negative' | 'positive' | 'warning' | 'info'`
 

package/dist/docs/attention/api.md

@@ -1,19 +1,21 @@
-## API Documentation
+## `<w-attention>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| _actualDirection | `unknown` | `-` | - |
-| _initialPlacement | `unknown` | `-` | - |
+| _actualDirection (JS only) | `unknown` | `-` | - |
+| _initialPlacement (JS only) | `unknown` | `-` | - |
 | callout | `boolean` | `false` | Renders the component as an inline callout. |
-| canClose | `boolean` | `false` | Shows a close button inside the attention component. |
-| crossAxis | `boolean` | `false` | Allows overflow checks on the cross axis when flipping. |
+| can-close | `boolean` | `false` | Shows a close button inside the attention component. |
+| cross-axis | `boolean` | `false` | Allows overflow checks on the cross axis when flipping. |
 | distance | `number` | `8` | Distance offset between trigger and attention panel. |
-| fallbackPlacements | `Directions[]` | `[]` | Ordered list of fallback placements. |
+| fallback-placements | `Directions[]` | `[]` | Ordered list of fallback placements. |
 | flip | `boolean` | `false` | Enables automatic flipping when placement has no space. |
 | highlight | `boolean` | `false` | Renders the component with highlight styling. |
-| noArrow | `boolean` | `false` | Hides the directional arrow of the attention component. |
+| no-arrow | `boolean` | `false` | Hides the directional arrow of the attention component. |
 | placement | [`Directions`](#directions) | `'bottom'` | Preferred placement relative to the trigger element. |
 | popover | `boolean` | `false` | Enables native popover behavior for the attention element. |
 | show | `boolean` | `false` | Controls whether the attention panel is visible. |
@@ -22,14 +24,14 @@
 
 ### Property Details
 
-#### _actualDirection
+#### _actualDirection (JS only)
 
 
 
 - Type: `unknown`
 - Default: `-`
 
-#### _initialPlacement
+#### _initialPlacement (JS only)
 
 
 
@@ -44,7 +46,7 @@ Callout mode is used for always-in-flow informational content instead of floatin
 - Type: `boolean`
 - Default: `false`
 
-#### canClose
+#### can-close
 
 Shows a close button inside the attention component.
 Adds an internal dismiss action that lets users close the attention panel.
@@ -52,7 +54,7 @@ Adds an internal dismiss action that lets users close the attention panel.
 - Type: `boolean`
 - Default: `false`
 
-#### crossAxis
+#### cross-axis
 
 Allows overflow checks on the cross axis when flipping.
 Use with `flip` to improve collision handling when space is constrained horizontally or vertically.
@@ -68,7 +70,7 @@ Defines the main-axis spacing in pixels from the anchor element.
 - Type: `number`
 - Default: `8`
 
-#### fallbackPlacements
+#### fallback-placements
 
 Ordered list of fallback placements.
 Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.
@@ -92,7 +94,7 @@ Use highlight mode to visually emphasize important contextual information.
 - Type: `boolean`
 - Default: `false`
 
-#### noArrow
+#### no-arrow
 
 Hides the directional arrow of the attention component.
 Disable the arrow when the visual connection to the trigger should not be shown.
@@ -144,5 +146,5 @@ Use for compact, non-modal contextual hints anchored to another element.
 
 #### Directions
 
-`'top' \| 'top-start' \| 'top-end' \| 'right' \| 'right-start' \| 'right-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end'`
+`'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`
 

package/dist/docs/attention/attention.md

@@ -246,22 +246,24 @@ When `can-close` is used, ensure your app listens to the `close` event and updat
 
 </elements-example>
 
-## API Documentation
+## `<w-attention>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| _actualDirection | `unknown` | `-` | - |
-| _initialPlacement | `unknown` | `-` | - |
+| _actualDirection (JS only) | `unknown` | `-` | - |
+| _initialPlacement (JS only) | `unknown` | `-` | - |
 | callout | `boolean` | `false` | Renders the component as an inline callout. |
-| canClose | `boolean` | `false` | Shows a close button inside the attention component. |
-| crossAxis | `boolean` | `false` | Allows overflow checks on the cross axis when flipping. |
+| can-close | `boolean` | `false` | Shows a close button inside the attention component. |
+| cross-axis | `boolean` | `false` | Allows overflow checks on the cross axis when flipping. |
 | distance | `number` | `8` | Distance offset between trigger and attention panel. |
-| fallbackPlacements | `Directions[]` | `[]` | Ordered list of fallback placements. |
+| fallback-placements | `Directions[]` | `[]` | Ordered list of fallback placements. |
 | flip | `boolean` | `false` | Enables automatic flipping when placement has no space. |
 | highlight | `boolean` | `false` | Renders the component with highlight styling. |
-| noArrow | `boolean` | `false` | Hides the directional arrow of the attention component. |
+| no-arrow | `boolean` | `false` | Hides the directional arrow of the attention component. |
 | placement | [`Directions`](#directions) | `'bottom'` | Preferred placement relative to the trigger element. |
 | popover | `boolean` | `false` | Enables native popover behavior for the attention element. |
 | show | `boolean` | `false` | Controls whether the attention panel is visible. |
@@ -270,14 +272,14 @@ When `can-close` is used, ensure your app listens to the `close` event and updat
 
 ### Property Details
 
-#### _actualDirection
+#### _actualDirection (JS only)
 
 
 
 - Type: `unknown`
 - Default: `-`
 
-#### _initialPlacement
+#### _initialPlacement (JS only)
 
 
 
@@ -292,7 +294,7 @@ Callout mode is used for always-in-flow informational content instead of floatin
 - Type: `boolean`
 - Default: `false`
 
-#### canClose
+#### can-close
 
 Shows a close button inside the attention component.
 Adds an internal dismiss action that lets users close the attention panel.
@@ -300,7 +302,7 @@ Adds an internal dismiss action that lets users close the attention panel.
 - Type: `boolean`
 - Default: `false`
 
-#### crossAxis
+#### cross-axis
 
 Allows overflow checks on the cross axis when flipping.
 Use with `flip` to improve collision handling when space is constrained horizontally or vertically.
@@ -316,7 +318,7 @@ Defines the main-axis spacing in pixels from the anchor element.
 - Type: `number`
 - Default: `8`
 
-#### fallbackPlacements
+#### fallback-placements
 
 Ordered list of fallback placements.
 Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.
@@ -340,7 +342,7 @@ Use highlight mode to visually emphasize important contextual information.
 - Type: `boolean`
 - Default: `false`
 
-#### noArrow
+#### no-arrow
 
 Hides the directional arrow of the attention component.
 Disable the arrow when the visual connection to the trigger should not be shown.
@@ -392,5 +394,5 @@ Use for compact, non-modal contextual hints anchored to another element.
 
 #### Directions
 
-`'top' \| 'top-start' \| 'top-end' \| 'right' \| 'right-start' \| 'right-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end'`
+`'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`
 

package/dist/docs/badge/api.md

@@ -1,4 +1,6 @@
-## API Documentation
+## `<w-badge>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
@@ -15,7 +17,7 @@ Positions the badge in a corner of a parent element.
 Use this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.
 Use this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.
 
-- Type: `'top-left' \| 'top-right' \| 'bottom-right' \| 'bottom-left'`
+- Type: `'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'`
 - Default: `-`
 
 #### variant
@@ -24,9 +26,6 @@ Controls the badge color treatment.
 If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
 Accepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
 
-- Type: `'neutral' \| 'info' \| 'positive' \| 'warning' \| 'negative' \| 'disabled' \| 'price' \| 'sponsored'`
+- Type: `'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'`
 - Default: `-`
 
-### Types
-
-No types documented.

package/dist/docs/badge/badge.md

@@ -176,7 +176,9 @@ If the same information is already available in nearby accessible text and the b
 
 </elements-example>
 
-## API Documentation
+## `<w-badge>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
@@ -193,7 +195,7 @@ Positions the badge in a corner of a parent element.
 Use this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.
 Use this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.
 
-- Type: `'top-left' \| 'top-right' \| 'bottom-right' \| 'bottom-left'`
+- Type: `'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'`
 - Default: `-`
 
 #### variant
@@ -202,9 +204,6 @@ Controls the badge color treatment.
 If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
 Accepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
 
-- Type: `'neutral' \| 'info' \| 'positive' \| 'warning' \| 'negative' \| 'disabled' \| 'price' \| 'sponsored'`
+- Type: `'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'`
 - Default: `-`
 
-### Types
-
-No types documented.

package/dist/docs/box/api.md

@@ -1,4 +1,6 @@
-## API Documentation
+## `<w-box>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
@@ -52,6 +54,3 @@ Defaults to a role of `region`. Set `role="none"` to override this behaviour for
 - Type: `string`
 - Default: `'region'`
 
-### Types
-
-No types documented.

package/dist/docs/box/box.md

@@ -185,7 +185,9 @@ If you must use box for a purely visual grouping, set role none:
 </w-box>
 ```
 
-## API Documentation
+## `<w-box>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
@@ -239,6 +241,3 @@ Defaults to a role of `region`. Set `role="none"` to override this behaviour for
 - Type: `string`
 - Default: `'region'`
 
-### Types
-
-No types documented.

package/dist/docs/breadcrumbs/accessibility.md

@@ -1 +1,47 @@
 ## Accessibility
+
+Breadcrumbs are exposed as navigation so assistive technology users can identify the path to the current page.
+
+### Label The Navigation
+
+The component has a localized default accessible label. Use `aria-label` when the default label is not specific enough, especially if the page has more than one breadcrumb trail or other navigation landmarks nearby.
+
+```html
+<w-breadcrumbs aria-label="Product category path">
+  <a href="/marketplace">Marketplace</a>
+  <a href="/marketplace/furniture">Furniture</a>
+  <span aria-current="page">Sofas</span>
+</w-breadcrumbs>
+```
+
+### Mark The Current Page
+
+The last breadcrumb item should represent the current page and include `aria-current="page"`.
+
+Use a non-link element for the current page when it should not be clickable:
+
+```html
+<w-breadcrumbs aria-label="You are here">
+  <a href="/real-estate">Real estate</a>
+  <a href="/real-estate/homes">Homes for sale</a>
+  <span aria-current="page">Oslo</span>
+</w-breadcrumbs>
+```
+
+If the current page remains a link, keep `aria-current="page"` on that link:
+
+```html
+<w-breadcrumbs aria-label="You are here">
+  <a href="/real-estate">Real estate</a>
+  <a href="/real-estate/homes">Homes for sale</a>
+  <a href="/real-estate/homes/oslo" aria-current="page">Oslo</a>
+</w-breadcrumbs>
+```
+
+### Keep The Trail Predictable
+
+Order breadcrumb items from the broadest parent to the current page. Use concise link text that names the destination.
+
+Do not include separator characters in the markup. The component adds visual separators between items.
+
+Breadcrumbs should support orientation within the site hierarchy. They should not be used as the only way to navigate the site or as a replacement for a page heading.

package/dist/docs/breadcrumbs/api.md

@@ -1,20 +1,20 @@
-## API Documentation
+## `<w-breadcrumbs>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| ariaLabel | `unknown` | `-` | - |
+| ariaLabel (JS only) | `string \| null` | `-` | Accessible label for the breadcrumb navigation. |
 
 ### Property Details
 
-#### ariaLabel
-
+#### ariaLabel (JS only)
 
+Accessible label for the breadcrumb navigation.
+Defaults to the localized "You are here" label. Set `aria-label` when the default label is not specific enough for the page.
 
-- Type: `unknown`
+- Type: `string | null`
 - Default: `-`
 
-### Types
-
-No types documented.

package/dist/docs/breadcrumbs/breadcrumbs.md

@@ -2,33 +2,151 @@
 
 ## Description
 
-Breadcrumbs show the navigation structure for the current location.
+Shows the navigation structure for the current page.
+Renders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.
 
 [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
 
 ## Usage
 
+Breadcrumbs show where the current page sits in a site hierarchy and let users move back to parent pages.
+
+Use `w-breadcrumbs` near the top of a page or section, before the main page heading or primary content. Add each breadcrumb item as a direct child. The component adds separators automatically.
+
+### Basic Breadcrumbs
+
+Use links for parent pages and mark the current page with `aria-current="page"`.
+
+```html
+<w-breadcrumbs aria-label="You are here">
+  <a href="/real-estate">Real estate</a>
+  <a href="/real-estate/homes">Homes for sale</a>
+  <span aria-current="page">Oslo</span>
+</w-breadcrumbs>
+```
+
+### Current Page
+
+The current page should be the last breadcrumb item.
+
+Use a `span` when the current page should not be clickable:
+
+```html
+<w-breadcrumbs aria-label="You are here">
+  <a href="/real-estate">Real estate</a>
+  <a href="/real-estate/homes">Homes for sale</a>
+  <span aria-current="page">Oslo</span>
+</w-breadcrumbs>
+```
+
+### Content Guidelines
+
+Keep breadcrumb labels short and ordered from broadest section to most specific page. Do not add slash separators yourself; the component inserts them between items.
+
+Breadcrumbs should not replace the page heading, primary navigation, or step navigation in a process.
+
 ## Accessibility
 
+Breadcrumbs are exposed as navigation so assistive technology users can identify the path to the current page.
+
+### Label The Navigation
+
+The component has a localized default accessible label. Use `aria-label` when the default label is not specific enough, especially if the page has more than one breadcrumb trail or other navigation landmarks nearby.
+
+```html
+<w-breadcrumbs aria-label="Product category path">
+  <a href="/marketplace">Marketplace</a>
+  <a href="/marketplace/furniture">Furniture</a>
+  <span aria-current="page">Sofas</span>
+</w-breadcrumbs>
+```
+
+### Mark The Current Page
+
+The last breadcrumb item should represent the current page and include `aria-current="page"`.
+
+Use a non-link element for the current page when it should not be clickable:
+
+```html
+<w-breadcrumbs aria-label="You are here">
+  <a href="/real-estate">Real estate</a>
+  <a href="/real-estate/homes">Homes for sale</a>
+  <span aria-current="page">Oslo</span>
+</w-breadcrumbs>
+```
+
+If the current page remains a link, keep `aria-current="page"` on that link:
+
+```html
+<w-breadcrumbs aria-label="You are here">
+  <a href="/real-estate">Real estate</a>
+  <a href="/real-estate/homes">Homes for sale</a>
+  <a href="/real-estate/homes/oslo" aria-current="page">Oslo</a>
+</w-breadcrumbs>
+```
+
+### Keep The Trail Predictable
+
+Order breadcrumb items from the broadest parent to the current page. Use concise link text that names the destination.
+
+Do not include separator characters in the markup. The component adds visual separators between items.
+
+Breadcrumbs should support orientation within the site hierarchy. They should not be used as the only way to navigate the site or as a replacement for a page heading.
+
 ## Examples
 
-## API Documentation
+### Basic
+
+<elements-example>
+```html
+  <w-breadcrumbs>
+    <a href="#/real-estate">Real estate</a>
+    <a href="#/real-estate/homes">Homes for sale</a>
+    <span aria-current="page">Oslo</span>
+  </w-breadcrumbs>
+```
+</elements-example>
+
+### Custom Accessible Label
+
+<elements-example>
+```html
+  <w-breadcrumbs aria-label="Product category path">
+    <a href="#/marketplace">Marketplace</a>
+    <a href="#/marketplace/furniture">Furniture</a>
+    <span aria-current="page">Sofas</span>
+  </w-breadcrumbs>
+```
+</elements-example>
+
+### Short Path
+
+<elements-example>
+```html
+  <w-breadcrumbs>
+    <a href="#/help">Help</a>
+    <span aria-current="page">Contact us</span>
+  </w-breadcrumbs>
+```
+</elements-example>
+
+## `<w-breadcrumbs>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| ariaLabel | `unknown` | `-` | - |
+| ariaLabel (JS only) | `string \| null` | `-` | Accessible label for the breadcrumb navigation. |
 
 ### Property Details
 
-#### ariaLabel
-
+#### ariaLabel (JS only)
 
+Accessible label for the breadcrumb navigation.
+Defaults to the localized "You are here" label. Set `aria-label` when the default label is not specific enough for the page.
 
-- Type: `unknown`
+- Type: `string | null`
 - Default: `-`
 
-### Types
-
-No types documented.