@warp-ds/elements 2.10.0-next.9 → 2.10.0

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

@@ -179,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
 
@@ -221,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/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>
 ```
 

package/dist/docs/breadcrumbs/breadcrumbs.md

@@ -13,13 +13,13 @@ Use `w-breadcrumbs` near the top of a page or section, before the main page head
 
 ### Basic Breadcrumbs
 
-Use links for parent pages and mark the current page with `aria-current="page"`.
+Use w-breadcrumb-item components with an href for parent pages and mark the current page with the current-page attribute.
 
 ```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-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>
 ```
 
@@ -27,13 +27,13 @@ Use links for parent pages and mark the current page with `aria-current="page"`.
 
 The current page should be the last breadcrumb item.
 
-Use a `span` when the current page should not be clickable:
+By default the current-page will not be presented as a link, setting href will change it to a 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>
-  <span aria-current="page">Oslo</span>
+  <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 href="/real-estate/homes/12345612" current-page>Oslo</w-breadcrumb-item>
 </w-breadcrumbs>
 ```
 
@@ -53,33 +53,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>
 ```
 
@@ -99,9 +89,9 @@ Breadcrumbs should support orientation within the site hierarchy. They should no
 
 ```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-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>
 ```
 
@@ -113,9 +103,9 @@ Breadcrumbs should support orientation within the site hierarchy. They should no
 
 ```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 current-page>Sofas</w-breadcrumb-item>
   </w-breadcrumbs>
 ```
 
@@ -127,8 +117,8 @@ Breadcrumbs should support orientation within the site hierarchy. They should no
 
 ```html
   <w-breadcrumbs>
-    <a href="#/help">Help</a>
-    <span aria-current="page">Contact us</span>
+    <w-breadcrumb-item href="#/help">Help</w-breadcrumb-item>
+    <w-breadcrumb-item current-page>Contact us</w-breadcrumb-item>
   </w-breadcrumbs>
 ```
 
@@ -136,6 +126,102 @@ Breadcrumbs should support orientation within the site hierarchy. They should no
 
 ## Styling API
 
+### Breadcrumbs
+
+The breadcrumbs components support styling through **component tokens** (CSS custom properties with a `--w-c-` prefix) and **parts**.
+
+`w-breadcrumbs` does not expose component-specific tokens. Set `w-breadcrumb-item` tokens on `w-breadcrumbs` or another ancestor to style all items in a breadcrumb trail.
+
+```css
+w-breadcrumbs {
+	--w-c-breadcrumb-item-link-color: var(--w-s-color-text-link);
+	--w-c-breadcrumb-item-separator-spacing: 1.2rem;
+}
+```
+
+### Breadcrumb Item
+
+The `w-breadcrumb-item` component supports styling through **component tokens** and **parts**.
+
+#### Component tokens
+
+Set these on `w-breadcrumb-item` to override one item, or on `w-breadcrumbs` to let the values inherit into all item children.
+
+```css
+w-breadcrumb-item {
+	--w-c-breadcrumb-item-link-color-hover: var(--w-s-color-text-link-hover);
+	--w-c-breadcrumb-item-font-weight: 700;
+}
+```
+
+##### Layout and typography
+
+| Token                               | Purpose                                 | Default             |
+| ----------------------------------- | --------------------------------------- | ------------------- |
+| `--w-c-breadcrumb-item-font-size`   | Font size for the label and separator   | inherited font size |
+| `--w-c-breadcrumb-item-line-height` | Line height for the label and separator | `1.5`               |
+| `--w-c-breadcrumb-item-font-weight` | Font weight for the label and separator | `400`               |
+| `--w-c-breadcrumb-item-padding-x`   | Inline padding for linked items         | `0`                 |
+| `--w-c-breadcrumb-item-padding-y`   | Block padding for linked items          | `0`                 |
+
+##### Link color
+
+| Token                                     | Purpose                                    | Default                      |
+| ----------------------------------------- | ------------------------------------------ | ---------------------------- |
+| `--w-c-breadcrumb-item-link-color`        | Color for linked items                     | `var(--w-s-color-text-link)` |
+| `--w-c-breadcrumb-item-link-color-hover`  | Color for linked items on hover            | link color                   |
+| `--w-c-breadcrumb-item-link-color-active` | Color for linked items in the active state | link color                   |
+
+##### Text color
+
+| Token                              | Purpose                    | Default                 |
+| ---------------------------------- | -------------------------- | ----------------------- |
+| `--w-c-breadcrumb-item-text-color` | Color for non-linked items | `var(--w-s-color-text)` |
+
+##### Separator
+
+| Token                                     | Purpose                                     | Default                 |
+| ----------------------------------------- | ------------------------------------------- | ----------------------- |
+| `--w-c-breadcrumb-item-separator-color`   | Color for the separator                     | `var(--w-s-color-icon)` |
+| `--w-c-breadcrumb-item-separator-spacing` | Inline margin on each side of the separator | `0.8rem`                |
+
+The separator uses `--w-c-breadcrumb-item-font-size`, `--w-c-breadcrumb-item-line-height`, and `--w-c-breadcrumb-item-font-weight`.
+
+##### Focus
+
+| Token                                  | Purpose                               | Default              |
+| -------------------------------------- | ------------------------------------- | -------------------- |
+| `--w-c-breadcrumb-item-outline-width`  | Focus outline width for linked items  | native focus outline |
+| `--w-c-breadcrumb-item-outline-color`  | Focus outline color for linked items  | native focus outline |
+| `--w-c-breadcrumb-item-outline-offset` | Focus outline offset for linked items | native focus outline |
+
+#### Parts
+
+Use `::part(...)` from outside the component.
+
+- `link` - the link element rendered when `href` is set.
+- `text` - the text element rendered when `href` is omitted.
+- `separator` - the separator rendered after non-current items.
+
+Example:
+
+```css
+w-breadcrumb-item::part(link) {
+	text-decoration-thickness: 2px;
+}
+
+w-breadcrumb-item::part(separator) {
+	margin-inline: 1.2rem;
+}
+```
+
+#### Notes
+
+- `separator` is not rendered when `current-page` is set.
+- Use `link` for linked breadcrumb items and `text` for non-linked breadcrumb items.
+- Link color, padding, and focus tokens apply only when `href` is set.
+- Focus tokens do not make non-linked breadcrumb items keyboard-focusable.
+
 ## `<w-breadcrumbs>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/breadcrumbs/examples.md

@@ -6,9 +6,9 @@
 
 ```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-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>
 ```
 
@@ -20,9 +20,9 @@
 
 ```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 current-page>Sofas</w-breadcrumb-item>
   </w-breadcrumbs>
 ```
 
@@ -34,8 +34,8 @@
 
 ```html
   <w-breadcrumbs>
-    <a href="#/help">Help</a>
-    <span aria-current="page">Contact us</span>
+    <w-breadcrumb-item href="#/help">Help</w-breadcrumb-item>
+    <w-breadcrumb-item current-page>Contact us</w-breadcrumb-item>
   </w-breadcrumbs>
 ```
 

package/dist/docs/breadcrumbs/styling.md

@@ -1 +1,97 @@
 ## Styling API
+
+### Breadcrumbs
+
+The breadcrumbs components support styling through **component tokens** (CSS custom properties with a `--w-c-` prefix) and **parts**.
+
+`w-breadcrumbs` does not expose component-specific tokens. Set `w-breadcrumb-item` tokens on `w-breadcrumbs` or another ancestor to style all items in a breadcrumb trail.
+
+```css
+w-breadcrumbs {
+	--w-c-breadcrumb-item-link-color: var(--w-s-color-text-link);
+	--w-c-breadcrumb-item-separator-spacing: 1.2rem;
+}
+```
+
+### Breadcrumb Item
+
+The `w-breadcrumb-item` component supports styling through **component tokens** and **parts**.
+
+#### Component tokens
+
+Set these on `w-breadcrumb-item` to override one item, or on `w-breadcrumbs` to let the values inherit into all item children.
+
+```css
+w-breadcrumb-item {
+	--w-c-breadcrumb-item-link-color-hover: var(--w-s-color-text-link-hover);
+	--w-c-breadcrumb-item-font-weight: 700;
+}
+```
+
+##### Layout and typography
+
+| Token                               | Purpose                                 | Default             |
+| ----------------------------------- | --------------------------------------- | ------------------- |
+| `--w-c-breadcrumb-item-font-size`   | Font size for the label and separator   | inherited font size |
+| `--w-c-breadcrumb-item-line-height` | Line height for the label and separator | `1.5`               |
+| `--w-c-breadcrumb-item-font-weight` | Font weight for the label and separator | `400`               |
+| `--w-c-breadcrumb-item-padding-x`   | Inline padding for linked items         | `0`                 |
+| `--w-c-breadcrumb-item-padding-y`   | Block padding for linked items          | `0`                 |
+
+##### Link color
+
+| Token                                     | Purpose                                    | Default                      |
+| ----------------------------------------- | ------------------------------------------ | ---------------------------- |
+| `--w-c-breadcrumb-item-link-color`        | Color for linked items                     | `var(--w-s-color-text-link)` |
+| `--w-c-breadcrumb-item-link-color-hover`  | Color for linked items on hover            | link color                   |
+| `--w-c-breadcrumb-item-link-color-active` | Color for linked items in the active state | link color                   |
+
+##### Text color
+
+| Token                              | Purpose                    | Default                 |
+| ---------------------------------- | -------------------------- | ----------------------- |
+| `--w-c-breadcrumb-item-text-color` | Color for non-linked items | `var(--w-s-color-text)` |
+
+##### Separator
+
+| Token                                     | Purpose                                     | Default                 |
+| ----------------------------------------- | ------------------------------------------- | ----------------------- |
+| `--w-c-breadcrumb-item-separator-color`   | Color for the separator                     | `var(--w-s-color-icon)` |
+| `--w-c-breadcrumb-item-separator-spacing` | Inline margin on each side of the separator | `0.8rem`                |
+
+The separator uses `--w-c-breadcrumb-item-font-size`, `--w-c-breadcrumb-item-line-height`, and `--w-c-breadcrumb-item-font-weight`.
+
+##### Focus
+
+| Token                                  | Purpose                               | Default              |
+| -------------------------------------- | ------------------------------------- | -------------------- |
+| `--w-c-breadcrumb-item-outline-width`  | Focus outline width for linked items  | native focus outline |
+| `--w-c-breadcrumb-item-outline-color`  | Focus outline color for linked items  | native focus outline |
+| `--w-c-breadcrumb-item-outline-offset` | Focus outline offset for linked items | native focus outline |
+
+#### Parts
+
+Use `::part(...)` from outside the component.
+
+- `link` - the link element rendered when `href` is set.
+- `text` - the text element rendered when `href` is omitted.
+- `separator` - the separator rendered after non-current items.
+
+Example:
+
+```css
+w-breadcrumb-item::part(link) {
+	text-decoration-thickness: 2px;
+}
+
+w-breadcrumb-item::part(separator) {
+	margin-inline: 1.2rem;
+}
+```
+
+#### Notes
+
+- `separator` is not rendered when `current-page` is set.
+- Use `link` for linked breadcrumb items and `text` for non-linked breadcrumb items.
+- Link color, padding, and focus tokens apply only when `href` is set.
+- Focus tokens do not make non-linked breadcrumb items keyboard-focusable.

package/dist/docs/breadcrumbs/usage.md

@@ -6,13 +6,13 @@ Use `w-breadcrumbs` near the top of a page or section, before the main page head
 
 ### Basic Breadcrumbs
 
-Use links for parent pages and mark the current page with `aria-current="page"`.
+Use w-breadcrumb-item components with an href for parent pages and mark the current page with the current-page attribute.
 
 ```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-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>
 ```
 
@@ -20,13 +20,13 @@ Use links for parent pages and mark the current page with `aria-current="page"`.
 
 The current page should be the last breadcrumb item.
 
-Use a `span` when the current page should not be clickable:
+By default the current-page will not be presented as a link, setting href will change it to a 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>
-  <span aria-current="page">Oslo</span>
+  <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 href="/real-estate/homes/12345612" current-page>Oslo</w-breadcrumb-item>
 </w-breadcrumbs>
 ```