@brandsync/wc 0.0.12 → 1.0.0

package/dist/collection/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.css

@@ -0,0 +1,93 @@
+/**
+ * @prop --bs-breadcrumb-gap: Gap between the separator icon and this crumb's own content. Aliased to --bs-spacing-50.
+ * @prop --bs-breadcrumb-separator-color: Separator icon color. Aliased to --bs-icon-default.
+ * @prop --bs-breadcrumb-color-default: Text color, non-current crumb. Aliased to --bs-text-muted.
+ * @prop --bs-breadcrumb-color-hover: Text color, non-current link crumb on hover/focus. Aliased to --bs-text-default.
+ * @prop --bs-breadcrumb-color-current: Text color, the current-page crumb. Aliased to --bs-text-default.
+ * @prop --bs-breadcrumb-font-size: Aliased to --bs-font-size-md.
+ * @prop --bs-breadcrumb-line-height: Aliased to --bs-line-height-body-md.
+ * @prop --bs-breadcrumb-font-size-sm: Font size at size="sm". Aliased to --bs-font-size-sm.
+ * @prop --bs-breadcrumb-line-height-sm: Line height at size="sm". Aliased to --bs-line-height-body-sm.
+ * @prop --bs-breadcrumb-font-weight-default: Font weight, non-current crumb. Aliased to --bs-font-weight-regular.
+ * @prop --bs-breadcrumb-font-weight-current: Font weight, the current-page crumb. Aliased to --bs-font-weight-semibold.
+ * @prop --bs-breadcrumb-focus-ring-color: Focus ring color for a link crumb. Aliased to --bs-border-neutral-focus.
+ * @prop --bs-breadcrumb-radius: Border radius for a link crumb's focus ring. Aliased to --bs-border-radius-50.
+ */
+:host {
+  display: inline-flex;
+  align-items: center;
+
+  --bs-breadcrumb-gap: var(--bs-spacing-50);
+
+  --bs-breadcrumb-separator-color: var(--bs-icon-default);
+
+  --bs-breadcrumb-color-default: var(--bs-text-muted);
+  --bs-breadcrumb-color-hover: var(--bs-text-default);
+  --bs-breadcrumb-color-current: var(--bs-text-default);
+
+  --bs-breadcrumb-font-size: var(--bs-font-size-md);
+  --bs-breadcrumb-line-height: var(--bs-line-height-body-md);
+  --bs-breadcrumb-font-size-sm: var(--bs-font-size-sm);
+  --bs-breadcrumb-line-height-sm: var(--bs-line-height-body-sm);
+  --bs-breadcrumb-font-weight-default: var(--bs-font-weight-regular);
+  --bs-breadcrumb-font-weight-current: var(--bs-font-weight-semibold);
+
+  --bs-breadcrumb-focus-ring-color: var(--bs-border-neutral-focus);
+  --bs-breadcrumb-radius: var(--bs-border-radius-50);
+
+  gap: var(--bs-breadcrumb-gap);
+  font-family: inherit;
+  font-size: var(--bs-breadcrumb-font-size);
+  line-height: calc(var(--bs-breadcrumb-line-height) * 1px);
+}
+
+/* This crumb is visually first in the trail -- pure DOM position (not :first-of-type, which only
+   counts same-tag siblings and would wrongly also match a bs-breadcrumb immediately following a
+   bs-breadcrumb-overflow). See bs-breadcrumb-overflow.css for the identical rule. */
+:host(:first-child) .bs-breadcrumb__separator {
+  display: none;
+}
+
+/* size="sm" scales font-size/line-height only -- the separator icon's pixel size is unchanged,
+   since Figma didn't specify a sm icon size (see the `size` prop's doc comment in bs-breadcrumb.tsx). */
+:host([size='sm']) {
+  font-size: var(--bs-breadcrumb-font-size-sm);
+  line-height: calc(var(--bs-breadcrumb-line-height-sm) * 1px);
+}
+
+.bs-breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--bs-breadcrumb-separator-color);
+}
+
+.bs-breadcrumb__separator svg {
+  width: 16px;
+  height: 16px;
+}
+
+.bs-breadcrumb__link {
+  color: var(--bs-breadcrumb-color-default);
+  font-weight: var(--bs-breadcrumb-font-weight-default);
+  text-decoration: none;
+  border-radius: var(--bs-breadcrumb-radius);
+  transition: color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+a.bs-breadcrumb__link:hover {
+  color: var(--bs-breadcrumb-color-hover);
+}
+
+a.bs-breadcrumb__link:focus-visible {
+  outline: 2px solid var(--bs-breadcrumb-focus-ring-color);
+  outline-offset: 2px;
+}
+
+.bs-breadcrumb__current {
+  color: var(--bs-breadcrumb-color-current);
+  font-weight: var(--bs-breadcrumb-font-weight-current);
+}

package/dist/collection/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.js

@@ -0,0 +1,130 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A single crumb within a `<bs-breadcrumbs>` trail: a leading separator icon plus either a link,
+ * plain text, or the current-page label, depending on `current`/`href`.
+ *
+ * Rendering follows the W3C ARIA Authoring Practices breadcrumb pattern
+ * (https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/): the current page is marked
+ * `aria-current="page"` and is never a link -- this holds even when `href` is also set, unlike
+ * Carbon Design System's `cds-breadcrumb-item`, which allows a link on the current item.
+ *
+ * Sets `role="listitem"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`
+ * -- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the
+ * accessibility tree needs this explicit role to preserve the list's semantics.
+ *
+ * ## When to use
+ * - As one crumb inside a `<bs-breadcrumbs>` trail.
+ *
+ * ## When not to use
+ * - Standalone, outside a `<bs-breadcrumbs>` wrapper -- its `<ol>`/`<nav>` context and
+ *   first-child-aware separator hiding depend on that parent structure.
+ *
+ * @slot - Default slot: the crumb's label content/text.
+ * @part separator - The leading separator icon wrapper.
+ * @part link - The anchor (or, when there's no `href`, plain `<span>`) for a non-current crumb.
+ * @part current - The current-page text element.
+ */
+// Note: this component's CSS Custom Properties (--bs-breadcrumb-*) are documented via @prop
+// comments in bs-breadcrumb.css, not here -- see bs-tab.tsx's identical note.
+export class BsBreadcrumb {
+    /** Destination for a non-current crumb. Ignored when `current` is true -- the current page is
+     * never a link, even if `href` is set (see the class JSDoc). */
+    href;
+    /** Whether this crumb is the current page. Renders as plain (non-link) text marked
+     * `aria-current="page"`, reflected as an attribute so consumers/CSS can target
+     * `bs-breadcrumb[current]`. */
+    current = false;
+    /** Size variant. Normally set automatically by a parent `<bs-breadcrumbs size="...">` -- the
+     * container propagates its own `size` as a JS property to every slotted `bs-breadcrumb`/
+     * `bs-breadcrumb-overflow` child (see `bs-breadcrumbs.tsx`'s `propagateSize`), since CSS custom
+     * properties can't carry an enum that switches rules on their own. Can also be set directly on a
+     * standalone crumb. `sm` scales down font-size/line-height only -- the separator icon's pixel
+     * size is unchanged, since Figma didn't specify a `sm` icon size and guessing one risked drifting
+     * off-brand. Reflected so consumers/CSS can target `bs-breadcrumb[size="sm"]`. */
+    size = 'md';
+    render() {
+        return (h(Host, { key: '631ab305f75d905c7e54facdc55348b84095530d', role: "listitem" }, h("span", { key: 'a84c1b0b123d5e930c27fc5a10e0bde66003e99b', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '540d161da72801edb9d308c2023da7dd76042912' })), this.current ? (h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, h("slot", null))) : this.href ? (h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href }, h("slot", null))) : (h("span", { part: "link", class: "bs-breadcrumb__link" }, h("slot", null)))));
+    }
+    static get is() { return "bs-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-breadcrumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Destination for a non-current crumb. Ignored when `current` is true -- the current page is\nnever a link, even if `href` is set (see the class JSDoc)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this crumb is the current page. Renders as plain (non-link) text marked\n`aria-current=\"page\"`, reflected as an attribute so consumers/CSS can target\n`bs-breadcrumb[current]`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsBreadcrumbSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "BsBreadcrumbSize": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.tsx",
+                            "id": "src/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.tsx::BsBreadcrumbSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant. Normally set automatically by a parent `<bs-breadcrumbs size=\"...\">` -- the\ncontainer propagates its own `size` as a JS property to every slotted `bs-breadcrumb`/\n`bs-breadcrumb-overflow` child (see `bs-breadcrumbs.tsx`'s `propagateSize`), since CSS custom\nproperties can't carry an enum that switches rules on their own. Can also be set directly on a\nstandalone crumb. `sm` scales down font-size/line-height only -- the separator icon's pixel\nsize is unchanged, since Figma didn't specify a `sm` icon size and guessing one risked drifting\noff-brand. Reflected so consumers/CSS can target `bs-breadcrumb[size=\"sm\"]`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+}
+const CaretRightIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.cmp.test.js

@@ -0,0 +1,118 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const items = [
+    { label: 'Products', href: '/products' },
+    { label: 'Category', href: '/products/category' },
+];
+describe('bs-breadcrumb-overflow', () => {
+    it('sets role="listitem" on the host', async () => {
+        const { root } = await render(h("bs-breadcrumb-overflow", { items: items }));
+        expect(root).toEqualAttribute('role', 'listitem');
+    });
+    it('is a real button with aria-haspopup="menu" and starts closed', async () => {
+        const { root } = await render(h("bs-breadcrumb-overflow", { items: items }));
+        const ellipsis = root.shadowRoot.querySelector('[part="ellipsis"]');
+        expect(ellipsis).not.toBeNull();
+        expect(ellipsis.tagName).toBe('BUTTON');
+        expect(ellipsis).toEqualAttribute('aria-haspopup', 'menu');
+        expect(ellipsis).toEqualAttribute('aria-expanded', 'false');
+        expect(root.shadowRoot.querySelector('bs-menu')).toBeNull();
+    });
+    it('reflects the overflowLabel prop as the ellipsis button aria-label', async () => {
+        const { root } = await render(h("bs-breadcrumb-overflow", { items: items, overflowLabel: "See hidden crumbs" }));
+        const ellipsis = root.shadowRoot.querySelector('[part="ellipsis"]');
+        expect(ellipsis).toEqualAttribute('aria-label', 'See hidden crumbs');
+    });
+    it('clicking the ellipsis opens the popup with exactly the given items, in order', async () => {
+        const { root, waitForChanges } = await render(h("bs-breadcrumb-overflow", { items: items }));
+        const ellipsis = root.shadowRoot.querySelector('[part="ellipsis"]');
+        ellipsis.click();
+        await waitForChanges();
+        expect(ellipsis).toEqualAttribute('aria-expanded', 'true');
+        const menu = root.shadowRoot.querySelector('bs-menu');
+        expect(menu).not.toBeNull();
+        const rows = menu.querySelectorAll('[part="link"]');
+        expect(rows.length).toBe(items.length);
+        rows.forEach((row, index) => {
+            expect(row.textContent.trim()).toBe(items[index].label);
+        });
+    });
+    it('renders an item with href as a real <a href>, not a bs-menu-item/button', async () => {
+        const { root, waitForChanges } = await render(h("bs-breadcrumb-overflow", { items: items }));
+        const ellipsis = root.shadowRoot.querySelector('[part="ellipsis"]');
+        ellipsis.click();
+        await waitForChanges();
+        const rows = root.shadowRoot.querySelectorAll('[part="link"]');
+        expect(rows[0].tagName).toBe('A');
+        expect(rows[0]).toEqualAttribute('href', items[0].href);
+        expect(root.shadowRoot.querySelector('bs-menu-item')).toBeNull();
+        expect(root.shadowRoot.querySelector('bs-menu button')).toBeNull();
+    });
+    it('renders an item without href as plain non-interactive text', async () => {
+        const noHrefItems = [{ label: 'No Link' }, { label: 'Category', href: '/products/category' }];
+        const { root, waitForChanges } = await render(h("bs-breadcrumb-overflow", { items: noHrefItems }));
+        const ellipsis = root.shadowRoot.querySelector('[part="ellipsis"]');
+        ellipsis.click();
+        await waitForChanges();
+        const rows = root.shadowRoot.querySelectorAll('[part="link"]');
+        expect(rows[0].tagName).toBe('SPAN');
+        expect(rows[0].hasAttribute('href')).toBe(false);
+    });
+    it('closes on Escape', async () => {
+        const { root, waitForChanges } = await render(h("bs-breadcrumb-overflow", { items: items }));
+        const ellipsis = root.shadowRoot.querySelector('[part="ellipsis"]');
+        ellipsis.click();
+        await waitForChanges();
+        expect(root.shadowRoot.querySelector('bs-menu')).not.toBeNull();
+        root.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }));
+        await waitForChanges();
+        expect(ellipsis).toEqualAttribute('aria-expanded', 'false');
+        expect(root.shadowRoot.querySelector('bs-menu')).toBeNull();
+    });
+    it('closes on focusout when relatedTarget is outside the host', async () => {
+        const { root, waitForChanges } = await render(h("bs-breadcrumb-overflow", { items: items }));
+        const ellipsis = root.shadowRoot.querySelector('[part="ellipsis"]');
+        ellipsis.click();
+        await waitForChanges();
+        const outside = document.createElement('div');
+        document.body.appendChild(outside);
+        root.dispatchEvent(new FocusEvent('focusout', { relatedTarget: outside, bubbles: true, composed: true }));
+        await waitForChanges();
+        expect(ellipsis).toEqualAttribute('aria-expanded', 'false');
+        expect(root.shadowRoot.querySelector('bs-menu')).toBeNull();
+        outside.remove();
+    });
+    it('does not close on focusout when relatedTarget is still inside the host', async () => {
+        const { root, waitForChanges } = await render(h("bs-breadcrumb-overflow", { items: items }));
+        const ellipsis = root.shadowRoot.querySelector('[part="ellipsis"]');
+        ellipsis.click();
+        await waitForChanges();
+        const insideLink = root.shadowRoot.querySelector('[part="link"]');
+        root.dispatchEvent(new FocusEvent('focusout', { relatedTarget: insideLink, bubbles: true, composed: true }));
+        await waitForChanges();
+        expect(ellipsis).toEqualAttribute('aria-expanded', 'true');
+        expect(root.shadowRoot.querySelector('bs-menu')).not.toBeNull();
+    });
+    describe('first-child separator hiding', () => {
+        it("hides its own separator when it is the first child, even alone", async () => {
+            const { root } = await render(h("bs-breadcrumb-overflow", { items: items }));
+            const separator = root.shadowRoot.querySelector('[part="separator"]');
+            expect(getComputedStyle(separator).display).toBe('none');
+        });
+        it('shows its separator when a bs-breadcrumb precedes it', async () => {
+            const { root } = await render(h("bs-breadcrumbs", null, h("bs-breadcrumb", { href: "/" }, "Home"), h("bs-breadcrumb-overflow", { items: items })));
+            const overflow = root.querySelector('bs-breadcrumb-overflow');
+            const separator = overflow.shadowRoot.querySelector('[part="separator"]');
+            expect(getComputedStyle(separator).display).not.toBe('none');
+        });
+    });
+    describe('size', () => {
+        it('defaults to "md" and reflects the attribute', async () => {
+            const { root } = await render(h("bs-breadcrumb-overflow", { items: items }));
+            expect(root).toEqualAttribute('size', 'md');
+        });
+        it('reflects a "sm" size', async () => {
+            const { root } = await render(h("bs-breadcrumb-overflow", { items: items, size: "sm" }));
+            expect(root).toEqualAttribute('size', 'sm');
+        });
+    });
+});

package/dist/collection/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.css

@@ -0,0 +1,125 @@
+/**
+ * @prop --bs-breadcrumb-overflow-gap: Gap between the separator icon and the ellipsis, and the popup's offset below the button. Aliased to --bs-spacing-50.
+ * @prop --bs-breadcrumb-overflow-separator-color: Separator icon color. Aliased to --bs-icon-default.
+ * @prop --bs-breadcrumb-overflow-ellipsis-color: Ellipsis icon color. Aliased to --bs-icon-muted.
+ * @prop --bs-breadcrumb-overflow-radius: Border radius of each row in the popup. Aliased to --bs-border-radius-100.
+ * @prop --bs-breadcrumb-overflow-padding-y: Top/bottom padding of each row in the popup. Aliased to --bs-spacing-100.
+ * @prop --bs-breadcrumb-overflow-padding-x: Left/right padding of each row in the popup. Aliased to --bs-spacing-150.
+ * @prop --bs-breadcrumb-overflow-hover: Background color of a row in the popup on hover/focus. Aliased to --bs-color-neutral-container-hover.
+ * @prop --bs-breadcrumb-overflow-color: Text color of a row in the popup. Aliased to --bs-text-muted.
+ * @prop --bs-breadcrumb-overflow-font-size: Aliased to --bs-font-size-md.
+ * @prop --bs-breadcrumb-overflow-line-height: Aliased to --bs-line-height-body-md.
+ * @prop --bs-breadcrumb-overflow-font-size-sm: Popup row font size at size="sm". Aliased to --bs-font-size-sm.
+ * @prop --bs-breadcrumb-overflow-line-height-sm: Popup row line height at size="sm". Aliased to --bs-line-height-body-sm.
+ */
+:host {
+  display: inline-flex;
+  align-items: center;
+
+  --bs-breadcrumb-overflow-gap: var(--bs-spacing-50);
+
+  --bs-breadcrumb-overflow-separator-color: var(--bs-icon-default);
+  --bs-breadcrumb-overflow-ellipsis-color: var(--bs-icon-muted);
+
+  --bs-breadcrumb-overflow-radius: var(--bs-border-radius-100);
+  --bs-breadcrumb-overflow-padding-y: var(--bs-spacing-100);
+  --bs-breadcrumb-overflow-padding-x: var(--bs-spacing-150);
+  --bs-breadcrumb-overflow-hover: var(--bs-color-neutral-container-hover);
+  --bs-breadcrumb-overflow-color: var(--bs-text-muted);
+  --bs-breadcrumb-overflow-font-size: var(--bs-font-size-md);
+  --bs-breadcrumb-overflow-line-height: var(--bs-line-height-body-md);
+  --bs-breadcrumb-overflow-font-size-sm: var(--bs-font-size-sm);
+  --bs-breadcrumb-overflow-line-height-sm: var(--bs-line-height-body-sm);
+
+  gap: var(--bs-breadcrumb-overflow-gap);
+}
+
+/* This element is visually first in the trail -- pure DOM position (not :first-of-type, which
+   only counts same-tag siblings and would wrongly fail to hide the separator when a bs-breadcrumb
+   is literally first and this element immediately follows it). See bs-breadcrumb.css for the
+   identical rule. */
+:host(:first-child) .bs-breadcrumb-overflow__separator {
+  display: none;
+}
+
+/* size="sm" scales the popup rows' font-size/line-height only -- the separator/ellipsis icons'
+   pixel sizes are unchanged, matching bs-breadcrumb's identical sm rule. */
+:host([size='sm']) .bs-breadcrumb-overflow__link {
+  font-size: var(--bs-breadcrumb-overflow-font-size-sm);
+  line-height: calc(var(--bs-breadcrumb-overflow-line-height-sm) * 1px);
+}
+
+.bs-breadcrumb-overflow__separator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--bs-breadcrumb-overflow-separator-color);
+}
+
+.bs-breadcrumb-overflow__separator svg {
+  width: 16px;
+  height: 16px;
+}
+
+.bs-breadcrumb-overflow__wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.bs-breadcrumb-overflow__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--bs-breadcrumb-overflow-ellipsis-color);
+  border-radius: var(--bs-breadcrumb-overflow-radius);
+}
+
+.bs-breadcrumb-overflow__ellipsis:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+}
+
+.bs-breadcrumb-overflow__ellipsis svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-breadcrumb-overflow__menu {
+  position: absolute;
+  top: calc(100% + var(--bs-breadcrumb-overflow-gap));
+  left: 0;
+  z-index: 1;
+  white-space: nowrap;
+}
+
+.bs-breadcrumb-overflow__link {
+  display: block;
+  box-sizing: border-box;
+  padding: var(--bs-breadcrumb-overflow-padding-y) var(--bs-breadcrumb-overflow-padding-x);
+  border-radius: var(--bs-breadcrumb-overflow-radius);
+  color: var(--bs-breadcrumb-overflow-color);
+  font-size: var(--bs-breadcrumb-overflow-font-size);
+  line-height: calc(var(--bs-breadcrumb-overflow-line-height) * 1px);
+  text-decoration: none;
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+a.bs-breadcrumb-overflow__link:hover,
+a.bs-breadcrumb-overflow__link:focus-visible {
+  background: var(--bs-breadcrumb-overflow-hover);
+}
+
+a.bs-breadcrumb-overflow__link:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: -2px;
+}

package/dist/collection/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.js

@@ -0,0 +1,192 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A manually-placed collapsed-items disclosure for a `<bs-breadcrumbs>` trail: a leading separator
+ * plus an icon-only ellipsis button that reveals a `bs-menu` popup listing every hidden crumb.
+ *
+ * `items` is JS-property-only -- must be set as a JS property (`el.items = [...]`), not an HTML
+ * attribute, since attributes can only carry strings. See CONVENTIONS.md.
+ *
+ * Unlike an earlier `bs-breadcrumbs`-owned automatic `maxItems` collapse, this component does no
+ * collapsing logic itself -- the consumer decides which crumbs to hide and places this element
+ * wherever they want the disclosure, exactly matching Carbon Design System's own approach (Carbon
+ * doesn't auto-collapse breadcrumbs either; a consumer there manually decides what's visible).
+ *
+ * Hidden items with an `href` render as real `<a href>` rows inside the popup, not `bs-menu-item`
+ * (which renders a `<button>`) -- this matters because consuming apps commonly use client-side
+ * routers that intercept clicks on real `<a>` tags to do `preventDefault` + push-state navigation.
+ * Rendering hidden links any other way (e.g. `window.location`) would silently break client-side
+ * routing for hidden crumbs while working fine for visible ones. Hidden items without an `href`
+ * render as plain non-interactive text, matching how `bs-breadcrumb` itself handles link vs.
+ * no-link crumbs.
+ *
+ * Sets `role="listitem"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`
+ * -- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the
+ * accessibility tree needs this explicit role to preserve the list's semantics.
+ *
+ * ## When to use
+ * - Inside a `<bs-breadcrumbs>` trail, wherever the consumer wants an interactive disclosure for
+ *   crumbs they've chosen not to render directly.
+ *
+ * ## When not to use
+ * - As an automatic collapsing mechanism -- there is none; the consumer decides what's hidden.
+ *
+ * @slot - None: `items` fully drives the popup's contents.
+ * @part separator - The leading separator icon wrapper.
+ * @part ellipsis - The icon-only disclosure button.
+ * @part menu - The `bs-menu` popup revealed by the ellipsis button.
+ * @part link - Each anchor/span row inside the popup.
+ */
+// Note: this component's CSS Custom Properties (--bs-breadcrumb-overflow-*) are documented via
+// @prop comments in bs-breadcrumb-overflow.css, not here -- see bs-tab.tsx's identical note.
+export class BsBreadcrumbOverflow {
+    el;
+    /** Array prop -- must be set as a JS property (`el.items = [...]`), not an HTML attribute, since
+     * attributes can only carry strings. See CONVENTIONS.md. The hidden crumbs reachable via this
+     * disclosure -- no collapsing logic here, the consumer decides what goes in this list. */
+    items = [];
+    /** Accessible name (`aria-label`) for the icon-only ellipsis trigger button. */
+    overflowLabel = 'Show hidden breadcrumbs';
+    /** Size variant. Normally set automatically by a parent `<bs-breadcrumbs size="...">` -- see
+     * `bs-breadcrumb`'s identical `size` prop doc comment for why this is propagated as a JS
+     * property rather than inherited via CSS. Scales the popup rows' font-size/line-height only; the
+     * separator/ellipsis icons' pixel sizes are unchanged. Reflected so consumers/CSS can target
+     * `bs-breadcrumb-overflow[size="sm"]`. */
+    size = 'md';
+    /** Whether the overflow popup is open. */
+    open = false;
+    onEllipsisToggle = () => {
+        this.open = !this.open;
+    };
+    /** Closes the overflow popup on Escape, from anywhere within the component -- host is the
+     * default @Listen target, so this fires whether focus is on the ellipsis button itself or on a
+     * link inside the popup. Mirrors `bs-input`'s `type="dropdown"` `onHostKeydown`. */
+    onHostKeydown(ev) {
+        if (this.open && ev.key === 'Escape') {
+            this.open = false;
+        }
+    }
+    /** Closes the overflow popup once focus leaves the component entirely (e.g. Tab away, or a click
+     * outside that moves focus elsewhere) -- `focusout` is composed, so it bubbles across the
+     * `bs-menu` shadow boundary too. Mirrors `bs-input`'s `type="dropdown"` `onHostFocusOut`. */
+    onHostFocusOut(ev) {
+        if (!this.open)
+            return;
+        const related = ev.relatedTarget;
+        if (!related || !this.el.contains(related)) {
+            this.open = false;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'a688f0759da177fa76c44694f2c55966e08f609d', role: "listitem" }, h("span", { key: '9c40bec2a10521160ee99889e083b0131d26020c', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '936d785bfcfd6b4f857bff8471ab92a292503208' })), h("span", { key: '2cc66274a1b0d58a1532d53784eeeef2dd94586e', class: "bs-breadcrumb-overflow__wrapper" }, h("button", { key: 'ffcd37213c27ae6286a8b258b58ad1197e9bee3e', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, h(DotsThreeIcon, { key: '381db917ca9bd23b794e7bf57364a7743e60da26' })), this.open && this.items.length > 0 && (h("bs-menu", { key: 'f41bd68b27971f7dcb3ab1f5af82dc7ed8373a6c', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href }, item.label)) : (h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
+    }
+    static get is() { return "bs-breadcrumb-overflow"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-breadcrumb-overflow.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-breadcrumb-overflow.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsBreadcrumbOverflowItem[]",
+                    "resolved": "BsBreadcrumbOverflowItem[]",
+                    "references": {
+                        "BsBreadcrumbOverflowItem": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.tsx",
+                            "id": "src/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.tsx::BsBreadcrumbOverflowItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array prop -- must be set as a JS property (`el.items = [...]`), not an HTML attribute, since\nattributes can only carry strings. See CONVENTIONS.md. The hidden crumbs reachable via this\ndisclosure -- no collapsing logic here, the consumer decides what goes in this list."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "overflowLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name (`aria-label`) for the icon-only ellipsis trigger button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overflow-label",
+                "defaultValue": "'Show hidden breadcrumbs'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsBreadcrumbSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "BsBreadcrumbSize": {
+                            "location": "import",
+                            "path": "../bs-breadcrumb/bs-breadcrumb",
+                            "id": "src/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.tsx::BsBreadcrumbSize",
+                            "referenceLocation": "BsBreadcrumbSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant. Normally set automatically by a parent `<bs-breadcrumbs size=\"...\">` -- see\n`bs-breadcrumb`'s identical `size` prop doc comment for why this is propagated as a JS\nproperty rather than inherited via CSS. Scales the popup rows' font-size/line-height only; the\nseparator/ellipsis icons' pixel sizes are unchanged. Reflected so consumers/CSS can target\n`bs-breadcrumb-overflow[size=\"sm\"]`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onHostKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onHostFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+const CaretRightIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const DotsThreeIcon = () => (h("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M12 13.125C12.6213 13.125 13.125 12.6213 13.125 12C13.125 11.3787 12.6213 10.875 12 10.875C11.3787 10.875 10.875 11.3787 10.875 12C10.875 12.6213 11.3787 13.125 12 13.125Z" }), h("path", { fill: "currentColor", d: "M18.375 13.125C18.9963 13.125 19.5 12.6213 19.5 12C19.5 11.3787 18.9963 10.875 18.375 10.875C17.7537 10.875 17.25 11.3787 17.25 12C17.25 12.6213 17.7537 13.125 18.375 13.125Z" }), h("path", { fill: "currentColor", d: "M5.625 13.125C6.24632 13.125 6.75 12.6213 6.75 12C6.75 11.3787 6.24632 10.875 5.625 10.875C5.00368 10.875 4.5 11.3787 4.5 12C4.5 12.6213 5.00368 13.125 5.625 13.125Z" })));