@arbor-education/design-system.components 0.25.2 → 0.25.4

package/.gather/skills/write-stories/README.md

@@ -1,6 +1,6 @@
 <!-- gather-import-meta
 gather_source: .claude/skills/write-stories/README.md
-gather_imported_at: 2026-04-24T08:53:14.233978+00:00
+gather_imported_at: 2026-06-24T08:46:27.890924+00:00
 -->
 
 # Write Stories Skill

package/.gather/skills/write-stories/SKILL.md

@@ -118,7 +118,7 @@ Look up designer guidance for this component using the Atlassian MCP tools. Use
 
 ### Step 4 — Read the Component Library Manifest
 
-Read `.claude/component-library.md` for a comprehensive overview of the component's role in the design system, use cases, and known relationships to other components.
+Read `/component-library.md` for a comprehensive overview of the component's role in the design system, use cases, and known relationships to other components.
 
 If it contains guidance about when to use this component vs. alternatives, note it — it goes into the story description.
 

package/.gather/skills/write-stories/meta.md

@@ -1,4 +1,4 @@
 <!-- gather-import-meta
 gather_source: .claude/skills/write-stories/SKILL.md
-gather_imported_at: 2026-04-24T08:53:14.244591+00:00
+gather_imported_at: 2026-06-24T08:46:27.891131+00:00
 -->

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.25.4
+
+### Patch Changes
+
+- [#218](https://github.com/arbor-education/design-system.components/pull/218) [`c64c66e`](https://github.com/arbor-education/design-system.components/commit/c64c66e26e6071e53c655b811039c7a2260ed227) Thanks [@Alex-DN-SP](https://github.com/Alex-DN-SP)! - MIS-70982 Added base skeleton component
+
+- [#202](https://github.com/arbor-education/design-system.components/pull/202) [`1fef4aa`](https://github.com/arbor-education/design-system.components/commit/1fef4aa06f0ce20ff0a8d0dc0353d2749a68473c) Thanks [@Alex-DN-SP](https://github.com/Alex-DN-SP)! - MIS-64732 Breadcrumbs Component
+
+## 0.25.3
+
+### Patch Changes
+
+- [#219](https://github.com/arbor-education/design-system.components/pull/219) [`263e11a`](https://github.com/arbor-education/design-system.components/commit/263e11af1fb329c81365538f483c90025a538f3a) Thanks [@Alex-DN-SP](https://github.com/Alex-DN-SP)! - MIS-70565 Added support for links in Row component
+
 ## 0.25.2
 
 ### Patch Changes

package/component-library.md

@@ -2,7 +2,7 @@
 
 > Auto-generated reference for AI agents (Sophia, analyze-design, etc.)
 > Source: `src/components/` · Public API: `src/index.ts`
-> Last updated: 2026-05-05
+> Last updated: 2026-06-24
 
 ---
 
@@ -1247,6 +1247,30 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 
 ---
 
+### 40a. Skeleton
+
+**File:** `src/components/skeleton/Skeleton.tsx` · **Public export:** Yes
+**Also exports:** `SkeletonProps`, `Skeleton.Props` types
+
+**Use case:** Loading placeholder that wraps real content. When `loading={true}`, renders an animated skeleton block sized to the content (or explicit `width`/`height`). When `loading={false}`, renders `children` unchanged — no DOM wrapper.
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `loading` | `boolean` | No | `true` | When `true`, renders the skeleton; when `false`, renders children directly |
+| `width` | `string \| number` | No | — | Explicit skeleton width (CSS value or px number); use when children are unknown at load time |
+| `height` | `string \| number` | No | — | Explicit skeleton height |
+| `children` | `ReactNode` | No | — | Real content shown once `loading={false}`; also sizes the skeleton when `loading={true}` |
+| `className` | `string` | No | — | Additional CSS class on the skeleton `<span>` |
+| `style` | `CSSProperties` | No | — | Inline styles (merged with width/height) |
+| `...rest` | `HTMLAttributes<HTMLSpanElement>` | No | — | Any `<span>` attribute |
+
+**Key features:**
+- When `loading={true}`: renders `<span aria-hidden="true" class="ds-skeleton">` wrapping children so the skeleton takes the same dimensions as the real content
+- When `loading={false}`: returns `<>{children}</>` with no wrapping element
+- CSS: `ds-skeleton` — animated shimmer via CSS
+
+---
+
 ## Utility / Infrastructure (publicly exported)
 
 | Export | File | Description |
@@ -1316,3 +1340,4 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 | `Toggle` | Yes | on/off switch; controlled or uncontrolled | Radix Switch |
 | `Row` | Yes | clickable or static; label/value/note | — |
 | `SingleUser` | Yes | avatar + name label; size variants | — |
+| `Skeleton` | Yes | loading/loaded toggle; wraps children for size inference | — |

package/dist/components/breadcrumbs/BreadcrumbCopyButton.d.ts

@@ -0,0 +1,3 @@
+import type { BreadcrumbCopyButtonProps } from './types.js';
+export declare const BreadcrumbCopyButton: (props: BreadcrumbCopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BreadcrumbCopyButton.d.ts.map

package/dist/components/breadcrumbs/BreadcrumbCopyButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbCopyButton.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/BreadcrumbCopyButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAG5D,eAAO,MAAM,oBAAoB,GAAI,OAAO,yBAAyB,4CAqBpE,CAAC"}

package/dist/components/breadcrumbs/BreadcrumbCopyButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../button/Button.js';
+import { TooltipWrapper } from '../tooltip/TooltipWrapper.js';
+import classNames from 'classnames';
+export const BreadcrumbCopyButton = (props) => {
+    const { isClicked, onClick, ...rest } = props;
+    const iconName = isClicked ? 'check' : 'link';
+    const screenReaderText = isClicked ? 'Breadcrumb path copied' : 'Copy breadcrumb path';
+    return (_jsx(TooltipWrapper, { tooltipContent: screenReaderText, children: _jsx(Button, { ...rest, onClick: onClick, iconLeftName: iconName, "aria-label": screenReaderText, size: "S", className: classNames('ds-breadcrumbs__copy-icon', {
+                'ds-breadcrumbs__copy-icon--clicked': isClicked,
+            }) }) }));
+};
+//# sourceMappingURL=BreadcrumbCopyButton.js.map

package/dist/components/breadcrumbs/BreadcrumbCopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbCopyButton.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/BreadcrumbCopyButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAE,EAAE;IACvE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAE9C,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAE9C,MAAM,gBAAgB,GAAG,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,sBAAsB,CAAC;IAEvF,OAAO,CACL,KAAC,cAAc,IAAC,cAAc,EAAE,gBAAgB,YAC9C,KAAC,MAAM,OACD,IAAI,EACR,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,QAAQ,gBACV,gBAAgB,EAC5B,IAAI,EAAC,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,2BAA2B,EAAE;gBACjD,oCAAoC,EAAE,SAAS;aAChD,CAAC,GACF,GACa,CAClB,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/breadcrumbs/BreadcrumbDropdown.d.ts

@@ -0,0 +1,3 @@
+import type { BreadcrumbDropdownProps } from './types.js';
+export declare const BreadcrumbDropdown: (props: BreadcrumbDropdownProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BreadcrumbDropdown.d.ts.map

package/dist/components/breadcrumbs/BreadcrumbDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/BreadcrumbDropdown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAG1D,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,4CAsBhE,CAAC"}

package/dist/components/breadcrumbs/BreadcrumbDropdown.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown } from '../dropdown/Dropdown.js';
+import { BreadcrumbLink } from './BreadcrumbLink.js';
+export const BreadcrumbDropdown = (props) => {
+    const { item } = props;
+    return (_jsxs(Dropdown, { children: [_jsx(Dropdown.Trigger, { children: _jsx(BreadcrumbLink, { item: item, isDropdown: true, isActive: false }) }), _jsx(Dropdown.Content, { children: item.dropdownOptions?.map((option, index) => (_jsx(Dropdown.Item, { asChild: true, children: _jsx("a", { href: option.href, onClick: () => option.onClick?.(), children: option.label }) }, `${option.label}-${index}`))) })] }));
+};
+//# sourceMappingURL=BreadcrumbDropdown.js.map

package/dist/components/breadcrumbs/BreadcrumbDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbDropdown.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/BreadcrumbDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACnE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACvB,OAAO,CACL,MAAC,QAAQ,eACP,KAAC,QAAQ,CAAC,OAAO,cACf,KAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,KAAK,GACf,GACe,EACnB,KAAC,QAAQ,CAAC,OAAO,cACd,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,KAAC,QAAQ,CAAC,IAAI,IAAC,OAAO,kBACpB,YAAG,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,YACpD,MAAM,CAAC,KAAK,GACX,IAHsB,GAAG,MAAM,CAAC,KAAK,IAAI,KAAK,EAAE,CAItC,CACjB,CAAC,GACe,IACV,CACZ,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/breadcrumbs/BreadcrumbEllipsis.d.ts

@@ -0,0 +1,3 @@
+import type { BreadcrumbEllipsisProps } from './types.js';
+export declare const BreadcrumbEllipsis: (props: BreadcrumbEllipsisProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BreadcrumbEllipsis.d.ts.map

package/dist/components/breadcrumbs/BreadcrumbEllipsis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbEllipsis.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/BreadcrumbEllipsis.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,4CAYhE,CAAC"}

package/dist/components/breadcrumbs/BreadcrumbEllipsis.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../button/Button.js';
+export const BreadcrumbEllipsis = (props) => {
+    const { screenReaderText, ...rest } = props;
+    return (_jsx(Button, { ...rest, size: "S", iconLeftName: "ellipsis", "aria-label": screenReaderText, className: "ds-breadcrumbs__ellipsis-button" }));
+};
+//# sourceMappingURL=BreadcrumbEllipsis.js.map

package/dist/components/breadcrumbs/BreadcrumbEllipsis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbEllipsis.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/BreadcrumbEllipsis.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACnE,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAE5C,OAAO,CACL,KAAC,MAAM,OACD,IAAI,EACR,IAAI,EAAC,GAAG,EACR,YAAY,EAAC,UAAU,gBACX,gBAAgB,EAC5B,SAAS,EAAC,iCAAiC,GAC3C,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/breadcrumbs/BreadcrumbItemSeparator.d.ts

@@ -0,0 +1,2 @@
+export declare const BreadcrumbItemSeparator: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BreadcrumbItemSeparator.d.ts.map

package/dist/components/breadcrumbs/BreadcrumbItemSeparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbItemSeparator.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/BreadcrumbItemSeparator.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,+CAEnC,CAAC"}

package/dist/components/breadcrumbs/BreadcrumbItemSeparator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const BreadcrumbItemSeparator = () => {
+    return _jsx("span", { className: "ds-breadcrumbs__separator", "aria-hidden": "true", children: "/" });
+};
+//# sourceMappingURL=BreadcrumbItemSeparator.js.map

package/dist/components/breadcrumbs/BreadcrumbItemSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbItemSeparator.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/BreadcrumbItemSeparator.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,OAAO,eAAM,SAAS,EAAC,2BAA2B,iBAAa,MAAM,kBAAS,CAAC;AACjF,CAAC,CAAC"}

package/dist/components/breadcrumbs/BreadcrumbLink.d.ts

@@ -0,0 +1,6 @@
+export declare const BreadcrumbLink: import("react").ForwardRefExoticComponent<{
+    item: import("./types.js").BreadcrumbItem;
+    isDropdown?: boolean;
+    isActive?: boolean;
+} & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=BreadcrumbLink.d.ts.map

package/dist/components/breadcrumbs/BreadcrumbLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbLink.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/BreadcrumbLink.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc;;;;+GAsBzB,CAAC"}

package/dist/components/breadcrumbs/BreadcrumbLink.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Icon } from '../icon/Icon.js';
+export const BreadcrumbLink = forwardRef((props, ref) => {
+    const { item, isDropdown, isActive, onClick, ...rest } = props;
+    return (_jsxs("a", { ...rest, ref: ref, href: isDropdown || isActive ? undefined : item.href, tabIndex: isDropdown ? 0 : undefined, "aria-current": isActive ? 'page' : undefined, role: isDropdown ? 'button' : undefined, className: "ds-breadcrumbs__link", "aria-haspopup": isDropdown ? 'menu' : undefined, onClick: onClick, children: [_jsx("span", { className: "ds-breadcrumbs__label", children: item.label }), isDropdown && _jsx(Icon, { name: "chevron-down", size: 12 })] }));
+});
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+//# sourceMappingURL=BreadcrumbLink.js.map

package/dist/components/breadcrumbs/BreadcrumbLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbLink.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/BreadcrumbLink.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG5C,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAGtC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAE/D,OAAO,CACL,gBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,UAAU,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EACpD,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,kBACtB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3C,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvC,SAAS,EAAC,sBAAsB,mBACjB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC9C,OAAO,EAAE,OAAO,aAEhB,eAAM,SAAS,EAAC,uBAAuB,YAAE,IAAI,CAAC,KAAK,GAAQ,EAC1D,UAAU,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAE,EAAE,GAAI,IACnD,CACL,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}

package/dist/components/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,21 @@
+import type { BreadcrumbsProps, BreadcrumbLinkProps, BreadcrumbEllipsisProps, BreadcrumbDropdownProps, BreadcrumbCopyButtonProps, BreadcrumbItem } from './types.js';
+export declare const Breadcrumbs: {
+    (props: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+    Link: import("react").ForwardRefExoticComponent<{
+        item: BreadcrumbItem;
+        isDropdown?: boolean;
+        isActive?: boolean;
+    } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+    Ellipsis: (props: BreadcrumbEllipsisProps) => import("react/jsx-runtime").JSX.Element;
+    ItemSeparator: () => import("react/jsx-runtime").JSX.Element;
+    Dropdown: (props: BreadcrumbDropdownProps) => import("react/jsx-runtime").JSX.Element;
+    CopyButton: (props: BreadcrumbCopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+};
+export declare namespace Breadcrumbs {
+    type Props = BreadcrumbsProps;
+    type LinkProps = BreadcrumbLinkProps;
+    type EllipsisProps = BreadcrumbEllipsisProps;
+    type DropdownProps = BreadcrumbDropdownProps;
+    type CopyButtonProps = BreadcrumbCopyButtonProps;
+}
+//# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/components/breadcrumbs/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,gBAAgB,EAChB,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,yBAAyB,EACzB,cAAc,EACf,MAAM,YAAY,CAAC;AAkBpB,eAAO,MAAM,WAAW;YAAW,gBAAgB;;;;;;;;;;CAgDlD,CAAC;AAQF,yBAAiB,WAAW,CAAC;IAC3B,KAAY,KAAK,GAAG,gBAAgB,CAAC;IACrC,KAAY,SAAS,GAAG,mBAAmB,CAAC;IAC5C,KAAY,aAAa,GAAG,uBAAuB,CAAC;IACpD,KAAY,aAAa,GAAG,uBAAuB,CAAC;IACpD,KAAY,eAAe,GAAG,yBAAyB,CAAC;CACzD"}

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BreadcrumbLink } from './BreadcrumbLink.js';
+import { BreadcrumbEllipsis } from './BreadcrumbEllipsis.js';
+import { BreadcrumbItemSeparator } from './BreadcrumbItemSeparator.js';
+import { BreadcrumbDropdown } from './BreadcrumbDropdown.js';
+import classNames from 'classnames';
+import { BreadcrumbCopyButton } from './BreadcrumbCopyButton.js';
+import { useEffect, useRef, useState } from 'react';
+const COPY_FEEDBACK_DURATION_MS = 2000;
+const renderLink = (item, isLast) => {
+    const hasDropdownOptions = Boolean(item.dropdownOptions?.length);
+    if (item.isEllipsis) {
+        return _jsx(BreadcrumbEllipsis, { screenReaderText: item.label, onClick: item.onClick });
+    }
+    if (hasDropdownOptions) {
+        return _jsx(BreadcrumbDropdown, { item: item });
+    }
+    return _jsx(BreadcrumbLink, { item: item, isActive: isLast });
+};
+export const Breadcrumbs = (props) => {
+    const { items, breadcrumbLabel = 'Breadcrumbs', className, copyText, ...rest } = props;
+    const [copyButtonClicked, setCopyButtonClicked] = useState(false);
+    const copyTimerRef = useRef(undefined);
+    useEffect(() => () => clearTimeout(copyTimerRef.current), []);
+    const handleCopyButtonClick = () => {
+        if (!navigator.clipboard) {
+            return;
+        }
+        setCopyButtonClicked(true);
+        navigator.clipboard
+            .writeText(copyText ?? items.filter(item => !item.isEllipsis).map(item => item.label).join(' > '))
+            .catch(() => { })
+            .finally(() => {
+            copyTimerRef.current = setTimeout(() => {
+                setCopyButtonClicked(false);
+            }, COPY_FEEDBACK_DURATION_MS);
+        });
+    };
+    return (_jsx("nav", { ...rest, "aria-label": breadcrumbLabel, className: classNames('ds-breadcrumbs__container', className), children: _jsx("ol", { className: "ds-breadcrumbs__list", children: items.map((item, index) => {
+                const isLast = index === items.length - 1;
+                return (_jsxs("li", { className: "ds-breadcrumbs__item", children: [renderLink(item, isLast), isLast
+                            ? (!item.isEllipsis && _jsx(BreadcrumbCopyButton, { isClicked: copyButtonClicked, onClick: handleCopyButtonClick }))
+                            : (_jsx(BreadcrumbItemSeparator, {}))] }, `${item.label}-${index}`));
+            }) }) }));
+};
+Breadcrumbs.Link = BreadcrumbLink;
+Breadcrumbs.Ellipsis = BreadcrumbEllipsis;
+Breadcrumbs.ItemSeparator = BreadcrumbItemSeparator;
+Breadcrumbs.Dropdown = BreadcrumbDropdown;
+Breadcrumbs.CopyButton = BreadcrumbCopyButton;
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/components/breadcrumbs/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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"}

package/dist/components/breadcrumbs/Breadcrumbs.stories.d.ts

@@ -0,0 +1,81 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Breadcrumbs } from './Breadcrumbs.js';
+import type { BreadcrumbItem } from './types.js';
+declare function BreadcrumbsDocsPage(): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: {
+        (props: import("./types.js").BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+        Link: import("react").ForwardRefExoticComponent<{
+            item: BreadcrumbItem;
+            isDropdown?: boolean;
+            isActive?: boolean;
+        } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+        Ellipsis: (props: import("./types.js").BreadcrumbEllipsisProps) => import("react/jsx-runtime").JSX.Element;
+        ItemSeparator: () => import("react/jsx-runtime").JSX.Element;
+        Dropdown: (props: import("./types.js").BreadcrumbDropdownProps) => import("react/jsx-runtime").JSX.Element;
+        CopyButton: (props: import("./types.js").BreadcrumbCopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            page: typeof BreadcrumbsDocsPage;
+        };
+    };
+    argTypes: {
+        items: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        breadcrumbLabel: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        copyText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
+export declare const Default: Story;
+export declare const TwoItems: Story;
+export declare const LongTrail: Story;
+export declare const WithDropdown: Story;
+export declare const MultipleDropdowns: Story;
+export declare const WithEllipsis: Story;
+export declare const ExpandableEllipsis: Story;
+export declare const WithDropdownAndEllipsis: Story;
+export declare const EllipsisAsLastItem: Story;
+export declare const WithBreadcrumbLabel: Story;
+export declare const ActiveItemAriaCurrent: Story;
+//# sourceMappingURL=Breadcrumbs.stories.d.ts.map

package/dist/components/breadcrumbs/Breadcrumbs.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAU5D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAoGjD,iBAAS,mBAAmB,4CAmB3B;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiD0B,CAAC;AAErC,eAAe,IAAI,CAAC;AAGpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AA2J1C,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAkCtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAkDvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA6D1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAkF/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA6C1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAmDhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KA2DrC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAmChC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA+BjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAoCnC,CAAC"}