@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.18

package/dist/docs/alert/alert.md

@@ -160,9 +160,9 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| role | `string` | `'alert'` | ARIA role announced to assistive technology. |
+| role | `string` | `"alert"` | ARIA role announced to assistive technology. |
 | show | `boolean` | `false` | Whether the alert is visible. |
-| variant | [`AlertVariants`](#alertvariants) | `'info'` | Visual style of the alert. |
+| variant | [`AlertVariants`](#alertvariants) | `"info"` | Visual style of the alert. |
 
 ### Property Details
 
@@ -171,7 +171,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 
 - Type: `string`
-- Default: `'alert'`
+- Default: `"alert"`
 
 #### show
 
@@ -185,7 +185,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 
 - Type: [`AlertVariants`](#alertvariants)
-- Default: `'info'`
+- Default: `"info"`
 
 ### Types
 

package/dist/docs/alert/api.md

@@ -6,9 +6,9 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| role | `string` | `'alert'` | ARIA role announced to assistive technology. |
+| role | `string` | `"alert"` | ARIA role announced to assistive technology. |
 | show | `boolean` | `false` | Whether the alert is visible. |
-| variant | [`AlertVariants`](#alertvariants) | `'info'` | Visual style of the alert. |
+| variant | [`AlertVariants`](#alertvariants) | `"info"` | Visual style of the alert. |
 
 ### Property Details
 
@@ -17,7 +17,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 
 - Type: `string`
-- Default: `'alert'`
+- Default: `"alert"`
 
 #### show
 
@@ -31,7 +31,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 
 - Type: [`AlertVariants`](#alertvariants)
-- Default: `'info'`
+- Default: `"info"`
 
 ### Types
 

package/dist/docs/attention/api.md

@@ -21,7 +21,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | highlight | `boolean` | `false` | Renders the component with highlight styling. |
 | keypressed (JS only) | `keypressed(e: KeyboardEvent) => void` | `-` | - |
 | no-arrow | `boolean` | `false` | Hides the directional arrow of the attention component. |
-| placement | [`Directions`](#directions) | `'bottom'` | Preferred placement relative to the trigger element. |
+| placement | [`Directions`](#directions) | `"bottom"` | Preferred placement relative to the trigger element. |
 | pointingAtDirection (JS only) | `pointingAtDirection() => void` | `-` | - |
 | popover | `boolean` | `false` | Enables native popover behavior for the attention element. |
 | show | `boolean` | `false` | Controls whether the attention panel is visible. |
@@ -149,7 +149,7 @@ Preferred placement relative to the trigger element.
 Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.
 
 - Type: [`Directions`](#directions)
-- Default: `'bottom'`
+- Default: `"bottom"`
 
 #### pointingAtDirection (JS only)
 

package/dist/docs/attention/attention.md

@@ -271,7 +271,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | highlight | `boolean` | `false` | Renders the component with highlight styling. |
 | keypressed (JS only) | `keypressed(e: KeyboardEvent) => void` | `-` | - |
 | no-arrow | `boolean` | `false` | Hides the directional arrow of the attention component. |
-| placement | [`Directions`](#directions) | `'bottom'` | Preferred placement relative to the trigger element. |
+| placement | [`Directions`](#directions) | `"bottom"` | Preferred placement relative to the trigger element. |
 | pointingAtDirection (JS only) | `pointingAtDirection() => void` | `-` | - |
 | popover | `boolean` | `false` | Enables native popover behavior for the attention element. |
 | show | `boolean` | `false` | Controls whether the attention panel is visible. |
@@ -399,7 +399,7 @@ Preferred placement relative to the trigger element.
 Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.
 
 - Type: [`Directions`](#directions)
-- Default: `'bottom'`
+- Default: `"bottom"`
 
 #### pointingAtDirection (JS only)
 

package/dist/docs/badge/api.md

@@ -6,8 +6,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' \| undefined` | `-` | Positions the badge in a corner of a parent element. |
-| variant | `'neutral' \| 'info' \| 'positive' \| 'warning' \| 'negative' \| 'disabled' \| 'price' \| 'sponsored' \| undefined` | `-` | 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
 
@@ -17,7 +29,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' | undefined`
+- Type: [`| "top-left"
+		| "top-right"
+		| "bottom-right"
+		| "bottom-left"
+		| undefined`](#top-left-top-right-bottom-right-bottom-left-undefined)
 - Default: `-`
 
 #### variant
@@ -26,6 +42,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' | undefined`
+- 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/badge.md

@@ -186,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' \| undefined` | `-` | Positions the badge in a corner of a parent element. |
-| variant | `'neutral' \| 'info' \| 'positive' \| 'warning' \| 'negative' \| 'disabled' \| 'price' \| 'sponsored' \| undefined` | `-` | 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
 
@@ -197,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' | undefined`
+- Type: [`| "top-left"
+		| "top-right"
+		| "bottom-right"
+		| "bottom-left"
+		| undefined`](#top-left-top-right-bottom-right-bottom-left-undefined)
 - Default: `-`
 
 #### variant
@@ -206,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' | undefined`
+- 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/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,39 @@ Breadcrumbs should support orientation within the site hierarchy. They should no
 
 ## Styling API
 
+### Breadcrumbs
+
+The styling API for the Breadcrumbs component is under construction.
+
+### Breadcrumb Item
+
+The w-breadcrumb-item component supports styling through **parts**.
+
+#### 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.
+
 ## `<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,34 @@
 ## Styling API
+
+### Breadcrumbs
+
+The styling API for the Breadcrumbs component is under construction.
+
+### Breadcrumb Item
+
+The w-breadcrumb-item component supports styling through **parts**.
+
+#### 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.

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>
 ```