@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.21

package/dist/docs/badge/badge.md

@@ -176,6 +176,8 @@ If the same information is already available in nearby accessible text and the b
 
 </elements-example>
 
+## Styling API
+
 ## `<w-badge>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -184,8 +186,20 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| position | `'top-left' \| 'top-right' \| 'bottom-right' \| 'bottom-left'` | `-` | Positions the badge in a corner of a parent element. |
-| variant | `'neutral' \| 'info' \| 'positive' \| 'warning' \| 'negative' \| 'disabled' \| 'price' \| 'sponsored'` | `-` | Controls the badge color treatment. |
+| position | [`\| "top-left"
+		\| "top-right"
+		\| "bottom-right"
+		\| "bottom-left"
+		\| undefined`](#top-left-top-right-bottom-right-bottom-left-undefined) | `-` | Positions the badge in a corner of a parent element. |
+| variant | [`\| "neutral"
+		\| "info"
+		\| "positive"
+		\| "warning"
+		\| "negative"
+		\| "disabled"
+		\| "price"
+		\| "sponsored"
+		\| undefined`](#neutral-info-positive-warning-negative-disabled-price-sponsored-undefined) | `-` | Controls the badge color treatment. |
 
 ### Property Details
 
@@ -195,7 +209,11 @@ 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"
+		| undefined`](#top-left-top-right-bottom-right-bottom-left-undefined)
 - Default: `-`
 
 #### variant
@@ -204,6 +222,36 @@ 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"
+		| undefined`](#neutral-info-positive-warning-negative-disabled-price-sponsored-undefined)
 - Default: `-`
 
+### Types
+
+#### | "neutral"
+		| "info"
+		| "positive"
+		| "warning"
+		| "negative"
+		| "disabled"
+		| "price"
+		| "sponsored"
+		| undefined
+
+`'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored' | undefined`
+
+#### | "top-left"
+		| "top-right"
+		| "bottom-right"
+		| "bottom-left"
+		| undefined
+
+`'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' | undefined`
+

package/dist/docs/badge/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/box/api.md

@@ -10,7 +10,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | bordered | `boolean` | `false` | Shows the box as a bordered surface. |
 | info | `boolean` | `false` | Shows the box with information styling. |
 | neutral | `boolean` | `false` | Shows the box with neutral styling. |
-| role | `string` | `'region'` | ARIA role for the box wrapper. |
+| role | `string` | `"region"` | ARIA role for the box wrapper. |
 
 ### Property Details
 
@@ -52,5 +52,5 @@ ARIA role for the box wrapper.
 Defaults to a role of `region`. Set `role="none"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.
 
 - Type: `string`
-- Default: `'region'`
+- Default: `"region"`
 

package/dist/docs/box/box.md

@@ -4,8 +4,6 @@
 
 Box is a layout component used for separating content areas on a page.
 
-[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)
-
 ## Usage
 
 Box is a layout component for visually separating a section of content from the surrounding page.
@@ -89,13 +87,8 @@ If you must use box for a purely visual grouping, set role none:
 
 ### Basic
 
-<style-isolate>
-  <w-box aria-labelledby="delivery-heading">
-    <h2 id="delivery-heading">Delivery</h2>
-    <p>Choose how you want the item delivered.</p>
-  </w-box>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <w-box aria-labelledby="delivery-heading">
   <h2 id="delivery-heading">Delivery</h2>
@@ -103,14 +96,11 @@ If you must use box for a purely visual grouping, set role none:
 </w-box>
 ```
 
+</elements-example>
+
 ### Neutral
 
-<style-isolate>
-  <w-box neutral aria-labelledby="order-summary-heading">
-    <h2 id="order-summary-heading">Order summary</h2>
-    <p>Review the item price, delivery, and total before continuing.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box neutral aria-labelledby="order-summary-heading">
@@ -119,14 +109,11 @@ If you must use box for a purely visual grouping, set role none:
 </w-box>
 ```
 
+</elements-example>
+
 ### Info
 
-<style-isolate>
-  <w-box info aria-labelledby="good-to-know-heading">
-    <h2 id="good-to-know-heading">Good to know</h2>
-    <p>You can change the delivery method before payment.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box info aria-labelledby="good-to-know-heading">
@@ -135,14 +122,11 @@ If you must use box for a purely visual grouping, set role none:
 </w-box>
 ```
 
+</elements-example>
+
 ### Bordered
 
-<style-isolate>
-  <w-box bordered aria-labelledby="contact-seller-heading">
-    <h2 id="contact-seller-heading">Contact seller</h2>
-    <p>Send a message to ask about pickup times.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box bordered aria-labelledby="contact-seller-heading">
@@ -151,16 +135,11 @@ If you must use box for a purely visual grouping, set role none:
 </w-box>
 ```
 
+</elements-example>
+
 ### Bleed
 
-<style-isolate>
-  <div style="padding: 0 16px;">
-    <w-box neutral bleed aria-labelledby="summary-heading">
-      <h2 id="summary-heading">Summary</h2>
-      <p>This box extends into the horizontal gutter on narrow screens.</p>
-    </w-box>
-  </div>
-</style-isolate>
+<elements-example>
 
 ```html
 <div style="padding: 0 16px;">
@@ -171,13 +150,12 @@ If you must use box for a purely visual grouping, set role none:
 </div>
 ```
 
+</elements-example>
+
+
 ### Visual Grouping Without Accessibility Landmarking
 
-<style-isolate>
-  <w-box role="none">
-    <p>This box is only a visual container.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box role="none">
@@ -185,6 +163,10 @@ If you must use box for a purely visual grouping, set role none:
 </w-box>
 ```
 
+</elements-example>
+
+## Styling API
+
 ## `<w-box>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -197,7 +179,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | bordered | `boolean` | `false` | Shows the box as a bordered surface. |
 | info | `boolean` | `false` | Shows the box with information styling. |
 | neutral | `boolean` | `false` | Shows the box with neutral styling. |
-| role | `string` | `'region'` | ARIA role for the box wrapper. |
+| role | `string` | `"region"` | ARIA role for the box wrapper. |
 
 ### Property Details
 
@@ -239,5 +221,5 @@ ARIA role for the box wrapper.
 Defaults to a role of `region`. Set `role="none"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.
 
 - Type: `string`
-- Default: `'region'`
+- Default: `"region"`
 

package/dist/docs/box/examples.md

@@ -2,13 +2,8 @@
 
 ### Basic
 
-<style-isolate>
-  <w-box aria-labelledby="delivery-heading">
-    <h2 id="delivery-heading">Delivery</h2>
-    <p>Choose how you want the item delivered.</p>
-  </w-box>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <w-box aria-labelledby="delivery-heading">
   <h2 id="delivery-heading">Delivery</h2>
@@ -16,14 +11,11 @@
 </w-box>
 ```
 
+</elements-example>
+
 ### Neutral
 
-<style-isolate>
-  <w-box neutral aria-labelledby="order-summary-heading">
-    <h2 id="order-summary-heading">Order summary</h2>
-    <p>Review the item price, delivery, and total before continuing.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box neutral aria-labelledby="order-summary-heading">
@@ -32,14 +24,11 @@
 </w-box>
 ```
 
+</elements-example>
+
 ### Info
 
-<style-isolate>
-  <w-box info aria-labelledby="good-to-know-heading">
-    <h2 id="good-to-know-heading">Good to know</h2>
-    <p>You can change the delivery method before payment.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box info aria-labelledby="good-to-know-heading">
@@ -48,14 +37,11 @@
 </w-box>
 ```
 
+</elements-example>
+
 ### Bordered
 
-<style-isolate>
-  <w-box bordered aria-labelledby="contact-seller-heading">
-    <h2 id="contact-seller-heading">Contact seller</h2>
-    <p>Send a message to ask about pickup times.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box bordered aria-labelledby="contact-seller-heading">
@@ -64,16 +50,11 @@
 </w-box>
 ```
 
+</elements-example>
+
 ### Bleed
 
-<style-isolate>
-  <div style="padding: 0 16px;">
-    <w-box neutral bleed aria-labelledby="summary-heading">
-      <h2 id="summary-heading">Summary</h2>
-      <p>This box extends into the horizontal gutter on narrow screens.</p>
-    </w-box>
-  </div>
-</style-isolate>
+<elements-example>
 
 ```html
 <div style="padding: 0 16px;">
@@ -84,16 +65,17 @@
 </div>
 ```
 
+</elements-example>
+
+
 ### Visual Grouping Without Accessibility Landmarking
 
-<style-isolate>
-  <w-box role="none">
-    <p>This box is only a visual container.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box role="none">
   <p>This box is only a visual container.</p>
 </w-box>
 ```
+
+</elements-example>

package/dist/docs/box/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/breadcrumb-item/api.md

@@ -0,0 +1,27 @@
+### `<w-breadcrumb-item>` API
+
+#### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| current-page | `boolean` | `false` | Marks this item as the current page. |
+| href | `string \| null` | `null` | URL for linked breadcrumb items. |
+
+#### Property Details
+
+##### current-page
+
+Marks this item as the current page.
+Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator.
+
+- Type: `boolean`
+- Default: `false`
+
+##### href
+
+URL for linked breadcrumb items.
+When omitted, the item renders as non-focusable text.
+
+- Type: `string | null`
+- Default: `null`
+

package/dist/docs/breadcrumb-item/breadcrumb-item.md

@@ -0,0 +1,34 @@
+# BreadcrumbItem (w-breadcrumb-item)
+
+## Description
+
+Represents one item in a `w-breadcrumbs` trail.
+Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.
+
+### `<w-breadcrumb-item>` API
+
+#### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| current-page | `boolean` | `false` | Marks this item as the current page. |
+| href | `string \| null` | `null` | URL for linked breadcrumb items. |
+
+#### Property Details
+
+##### current-page
+
+Marks this item as the current page.
+Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator.
+
+- Type: `boolean`
+- Default: `false`
+
+##### href
+
+URL for linked breadcrumb items.
+When omitted, the item renders as non-focusable text.
+
+- Type: `string | null`
+- Default: `null`
+

package/dist/docs/breadcrumbs/accessibility.md

@@ -8,33 +8,23 @@ The component has a localized default accessible label. Use `aria-label` when th
 
 ```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-breadcrumb-item href="/marketplace">Marketplace</w-breadcrumb-item>
+  <w-breadcrumb-item href="/marketplace/furniture">Furniture</w-breadcrumb-item>
+  <w-breadcrumb-item href="/marketplace/furniture/1234566" current-page>Sofas</w-breadcrumb-item>
 </w-breadcrumbs>
 ```
 
 ### Mark The Current Page
 
-The last breadcrumb item should represent the current page and include `aria-current="page"`.
+The last breadcrumb item should represent the current page and include the current-page attribute which in turn ensures correct accessibility semantics are used.
 
-Use a non-link element for the current page when it should not be clickable:
+Omit an href attribute 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-breadcrumb-item href="/real-estate">Real estate</w-breadcrumb-item>
+  <w-breadcrumb-item href="/real-estate/homes">Homes for sale</w-breadcrumb-item>
+  <w-breadcrumb-item current-page>Oslo</w-breadcrumb-item>
 </w-breadcrumbs>
 ```