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

package/dist/custom-elements.json

@@ -2222,6 +2222,14 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_defaultLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "ariaLabel",
@@ -2230,6 +2238,15 @@
               },
               "description": "Accessible label for the breadcrumb navigation.\nDefaults to the localized \"You are here\" label. Set `aria-label` when the default label is not specific enough for the page."
             },
+            {
+              "kind": "field",
+              "name": "_label",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "_children",
@@ -2269,6 +2286,95 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "packages/breadcrumb-item/breadcrumb-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Represents one item in a `w-breadcrumbs` trail.\nRenders 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.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)",
+          "name": "WarpBreadcrumbItem",
+          "slots": [
+            {
+              "description": "The breadcrumb label content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "currentPage",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks this item as the current page.\nUse this on the final breadcrumb item so it exposes `aria-current=\"page\"` and does not render a trailing separator.",
+              "attribute": "current-page"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "URL for linked breadcrumb items.\nWhen omitted, the item renders as non-focusable text.",
+              "attribute": "href"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "current-page",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks this item as the current page.\nUse this on the final breadcrumb item so it exposes `aria-current=\"page\"` and does not render a trailing separator.",
+              "fieldName": "currentPage"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "URL for linked breadcrumb items.\nWhen omitted, the item renders as non-focusable text.",
+              "fieldName": "href"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "parent": {
+            "name": "w-breadcrumbs",
+            "description": ""
+          },
+          "tagName": "w-breadcrumb-item",
+          "customElement": true,
+          "modulePath": "packages/breadcrumb-item/breadcrumb-item.ts",
+          "definitionPath": "packages/breadcrumb-item/breadcrumb-item.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "w-breadcrumb-item",
+          "declaration": {
+            "name": "WarpBreadcrumbItem",
+            "module": "packages/breadcrumb-item/breadcrumb-item.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpBreadcrumbItem",
+          "declaration": {
+            "name": "WarpBreadcrumbItem",
+            "module": "packages/breadcrumb-item/breadcrumb-item.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "packages/card/card.ts",

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

package/dist/docs/index.md

@@ -14,6 +14,7 @@ Generated by `pnpm build:docs`. This file indexes the Markdown documentation shi
 | 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) |

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import type { WarpAttention } from "./packages/attention/attention.ts";
 import type { WarpBadge } from "./packages/badge/badge.ts";
 import type { WarpBox } from "./packages/box/box.ts";
 import type { WarpBreadcrumbs } from "./packages/breadcrumbs/breadcrumbs.ts";
+import type { WarpBreadcrumbItem } from "./packages/breadcrumb-item/breadcrumb-item.ts";
 import type { WarpCard } from "./packages/card/card.ts";
 import type { WarpCheckbox, WCheckbox } from "./packages/checkbox/checkbox.ts";
 import type {
@@ -856,6 +857,35 @@ Defaults to the localized "You are here" label. Set `aria-label` when the defaul
   textContent?: string | number;
 };
 
+export type WarpBreadcrumbItemProps = {
+  /** 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. */
+  "current-page"?: WarpBreadcrumbItem["currentPage"];
+  /** 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. */
+  currentPage?: WarpBreadcrumbItem["currentPage"];
+  /** URL for linked breadcrumb items.
+When omitted, the item renders as non-focusable text. */
+  href?: WarpBreadcrumbItem["href"];
+};
+
+export type WarpBreadcrumbItemSolidJsProps = {
+  /** 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. */
+  "bool:current-page"?: WarpBreadcrumbItem["currentPage"];
+  /** 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. */
+  "prop:currentPage"?: WarpBreadcrumbItem["currentPage"];
+  /** URL for linked breadcrumb items.
+When omitted, the item renders as non-focusable text. */
+  "prop:href"?: WarpBreadcrumbItem["href"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
 export type WarpCardProps = {
   /** Whether the card is visually selected.
 
@@ -2588,6 +2618,31 @@ export type CustomElements = {
     WarpBreadcrumbsProps & BaseProps<WarpBreadcrumbs> & BaseEvents
   >;
 
+  /**
+   * 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.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `current-page`/`currentPage`: 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.
+   * - `href`: URL for linked breadcrumb items.
+   * When omitted, the item renders as non-focusable text.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The breadcrumb label content.
+   */
+  "w-breadcrumb-item": Partial<
+    WarpBreadcrumbItemProps & BaseProps<WarpBreadcrumbItem> & BaseEvents
+  >;
+
   /**
    * Card is a layout component used for separating content areas on a page.
    *
@@ -3457,6 +3512,7 @@ type CustomElementInstances = {
   "w-badge": WarpBadge;
   "w-box": WarpBox;
   "w-breadcrumbs": WarpBreadcrumbs;
+  "w-breadcrumb-item": WarpBreadcrumbItem;
   "w-card": WarpCard;
   "w-checkbox": WarpCheckbox;
   "w-checkbox-group": WarpCheckboxGroup;
@@ -3496,6 +3552,7 @@ type CustomElementComponentProps = {
   "w-badge": WarpBadgeProps;
   "w-box": WarpBoxProps;
   "w-breadcrumbs": WarpBreadcrumbsProps;
+  "w-breadcrumb-item": WarpBreadcrumbItemProps;
   "w-card": WarpCardProps;
   "w-checkbox": WarpCheckboxProps;
   "w-checkbox-group": WarpCheckboxGroupProps;
@@ -3863,6 +3920,34 @@ export type CustomElementsSolidJs = {
       BaseEvents
   >;
 
+  /**
+   * 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.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `current-page`/`currentPage`: 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.
+   * - `href`: URL for linked breadcrumb items.
+   * When omitted, the item renders as non-focusable text.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The breadcrumb label content.
+   */
+  "w-breadcrumb-item": Partial<
+    WarpBreadcrumbItemProps &
+      WarpBreadcrumbItemSolidJsProps &
+      BaseProps<WarpBreadcrumbItem> &
+      BaseEvents
+  >;
+
   /**
    * Card is a layout component used for separating content areas on a page.
    *

package/dist/packages/breadcrumb-item/breadcrumb-item.d.ts

@@ -0,0 +1,29 @@
+import { LitElement, nothing } from "lit";
+/**
+ * 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.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
+ *
+ * @parent w-breadcrumbs
+ * @slot - The breadcrumb label content.
+ */
+declare class WarpBreadcrumbItem extends LitElement {
+    /**
+     * 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.
+     */
+    currentPage: boolean;
+    /**
+     * URL for linked breadcrumb items.
+     * When omitted, the item renders as non-focusable text.
+     */
+    href: string | null;
+    static styles: import("lit").CSSResult[];
+    /** @internal */
+    get link(): import("lit").TemplateResult<1>;
+    /** @internal */
+    get separator(): import("lit").TemplateResult<1> | typeof nothing;
+    render(): import("lit").TemplateResult<1>;
+}
+export { WarpBreadcrumbItem };