@warp-ds/elements 2.10.0-next.17 → 2.10.0-next.19

package/dist/docs/affix/styling.md

@@ -1 +1,108 @@
+# Affix Styling
+
+The affix component provides a comprehensive styling API through CSS custom properties (tokens).
+
 ## Styling API
+
+### Wrapper Tokens
+
+Customize the appearance of the affix wrapper container:
+
+```css
+--w-c-affix-wrapper-bg: transparent;
+--w-c-affix-wrapper-border-radius: 0.4rem;
+--w-c-affix-wrapper-padding-left: 1.2rem;
+--w-c-affix-wrapper-padding-right: 1.2rem;
+--w-c-affix-wrapper-width-with-label: max-content;
+--w-c-affix-wrapper-width-with-icon: 4rem;
+```
+
+### Label Tokens
+
+Customize the appearance of text labels (when `label` property is used):
+
+```css
+--w-c-affix-label-color: var(--w-s-color-text);
+--w-c-affix-label-font-size: var(--w-font-size-xs);
+--w-c-affix-label-line-height: var(--w-line-height-xs);
+--w-c-affix-label-font-weight: 700;
+--w-c-affix-label-cursor: default;
+```
+
+## Parts
+
+For advanced styling needs beyond tokens, you can target internal elements using CSS parts:
+
+- `::part(wrapper)` - The container element (either `<div>` or `<button>` depending on variant)
+- `::part(label)` - The text label element (when using `label` property)
+
+```css
+w-affix::part(wrapper) {
+  /* Custom styling for the wrapper */
+  background-color: var(--w-s-color-background-subtle);
+}
+
+w-affix::part(label) {
+  /* Custom styling for text labels */
+  text-transform: uppercase;
+}
+```
+
+## Example Usage
+
+### Customizing Label Color
+
+```css
+w-affix {
+  --w-c-affix-label-color: var(--w-s-color-text-primary);
+}
+```
+
+### Customizing Wrapper Background
+
+```css
+w-affix {
+  --w-c-affix-wrapper-bg: var(--w-s-color-background-subtle);
+  --w-c-affix-wrapper-padding-left: 1.6rem;
+  --w-c-affix-wrapper-padding-right: 1.6rem;
+}
+```
+
+### Adjusting Icon/Label Widths
+
+```css
+w-affix {
+  --w-c-affix-wrapper-width-with-icon: 5rem;
+  --w-c-affix-wrapper-width-with-label: auto;
+}
+```
+
+### Styling by Slot Position
+
+Target prefix and suffix affixes differently:
+
+```css
+/* Style only prefix affixes */
+w-affix[slot='prefix'] {
+  --w-c-affix-wrapper-padding-left: 2rem;
+}
+
+/* Style only suffix affixes */
+w-affix[slot='suffix'] {
+  --w-c-affix-wrapper-padding-right: 2rem;
+}
+```
+
+### Using Parts for Advanced Customization
+
+```css
+/* Add a border to the wrapper */
+w-affix::part(wrapper) {
+  border-left: 1px solid var(--w-s-color-border);
+}
+
+/* Make labels italic */
+w-affix::part(label) {
+  font-style: italic;
+}
+```

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

package/dist/docs/index.md

@@ -9,11 +9,12 @@ Generated by `pnpm build:docs`. This file indexes the Markdown documentation shi
 
 | Component | Element / API | Package | Summary | Docs |
 |-|-|-|-|-|
-| Affix | `<w-affix>` | `affix` | This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`. | [affix.md](./affix/affix.md) |
+| Affix | `<w-affix>` | `affix` | This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`. ## Accessibility Note Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`) cannot reference elements across shadow boundaries. This means: - Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA - Interactive affixes (buttons) must have their own `aria-label` (already implemented) - Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work For non-interactive labels (e.g., currency symbols), consider including the information in the main label or placeholder instead of relying on ARIA to announce affix content. | [affix.md](./affix/affix.md) |
 | Alert | `<w-alert>` | `alert` | Alert is an inline component used for displaying different types of messages. For accessibility reasons, alert should appear close to the element that triggered it. | [alert.md](./alert/alert.md) |
 | Attention | `<w-attention>` | `attention` | Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights. The component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs. Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior. | [attention.md](./attention/attention.md) |
 | Badge | `<w-badge>` | `badge` | `w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count. | [badge.md](./badge/badge.md) |
 | Box | `<w-box>` | `box` | Box is a layout component used for separating content areas on a page. | [box.md](./box/box.md) |
+| Breadcrumb Item | `<w-breadcrumb-item>` | `breadcrumb-item` | 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. | [breadcrumb-item.md](./breadcrumb-item/breadcrumb-item.md) |
 | Breadcrumbs | `<w-breadcrumbs>` | `breadcrumbs` | 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. | [breadcrumbs.md](./breadcrumbs/breadcrumbs.md) |
 | Button | `<w-button>` | `button` | Performs an action or renders a link with button styling. Use button variants to match action priority, risk, and context. | [button.md](./button/button.md) |
 | Card | `<w-card>` | `card` | Card is a layout component used for separating content areas on a page. | [card.md](./card/card.md) |