@brandsync/wc 0.0.11 → 0.1.0

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

@@ -0,0 +1,251 @@
+import { h } from "@stencil/core";
+/**
+ * A circular representation of a person or entity -- a photo, initials, or (as a fallback when
+ * neither is available) a generic user-silhouette icon.
+ *
+ * ## When to use
+ * - Representing a specific user or account: in a header, a comment, a member list, etc.
+ * - `type="initials"` when a photo isn't available but a name is (e.g. "Sam Lee" -> "SL").
+ * - `type="icon"` (the default) as the generic fallback when neither a photo nor a name/initials
+ *   is available yet.
+ *
+ * ## When not to use
+ * - A company/brand logo -- use `bs-logo` instead.
+ *
+ * This component is decorative/informational by default, not an interactive control -- it renders
+ * a plain `<span>`/`<img>`, not a `<button>`. Figma's own component set includes hover/focused/
+ * pressed states (e.g. for an account-switcher trigger use case), which this implements as real
+ * `:hover`/`:focus-visible`/`:active` CSS on the host itself -- so wrapping this in your own
+ * `<button>`, or setting `tabindex` and a click handler on the `<bs-avatar>` element directly, gets
+ * the matching visual treatment for free with no extra wiring. Left genuinely non-interactive
+ * (no implicit role/tabindex of its own) so it doesn't misrepresent a purely decorative avatar
+ * (e.g. next to a comment) as a control when it isn't one.
+ *
+ * @part container - The circular wrapper (all three `type`s render this; `image` additionally
+ *   wraps a real `<img>` inside it, since the border/background/radius treatment is identical
+ *   across types and factoring it into one shared part keeps `::part(container)` overrides
+ *   consistent regardless of which `type` ends up rendering).
+ * @part image - The `<img>` itself. Only rendered for `type="image"`.
+ * @part initials - The initials text. Only rendered for `type="initials"`.
+ * @part icon - The fallback user-silhouette icon. Only rendered for `type="icon"`.
+ */
+// Note: this component's CSS Custom Properties are documented via @prop comments in bs-avatar.css,
+// not here -- see bs-navigation-header.css's identical note. Most of them are this library's
+// existing vendored --bs-avatar-* tokens (see tokens.css), not new ones invented for this
+// component -- brandsync-tokens already ships a full avatar-specific token set.
+export class BsAvatar {
+    /** What to render inside the circle. `icon` (default) is the generic fallback for when neither
+     * a photo nor initials are available yet. */
+    type = 'icon';
+    /** Sizing scale -- `xs` (24px) through `xxl` (128px), matching Figma's own six-step scale. */
+    size = 'md';
+    /** `type="initials"` only: the initials text to display (e.g. `"SL"` for "Sam Lee"). Ignored
+     * for `icon`/`image`. */
+    initials = null;
+    /** `type="image"` only: the photo URL. This component does not fetch it itself -- network
+     * calls, loading/error states, and caching are the consuming app's responsibility, same
+     * convention as `bs-logo`'s own `src` prop. Ignored for `icon`/`initials`. */
+    src = null;
+    /** `type="image"` only: accessible alt text for the photo, set directly on the real `<img>`
+     * this renders -- a person's photo is meaningful content, not decorative, so pass something
+     * real (e.g. their name). Falls back to `alt=""` (decorative to assistive tech) when unset,
+     * rather than omitting the attribute entirely, but don't rely on that fallback. Ignored for
+     * `icon`/`initials` -- see `ariaLabel` for those instead. */
+    alt = null;
+    /** `type="icon"`/`"initials"` only: accessible name for the avatar, set as `aria-label` on the
+     * `role="img"` wrapper this renders (neither is a real `<img>`, so there's no native `alt` to
+     * set). Setting a plain `aria-label` attribute on the `<bs-avatar>` host does NOT work for this
+     * -- that attribute stays on the light-DOM host and never crosses into the shadow DOM, so the
+     * actual `role="img"` element stays nameless. Same pattern as `bs-checkbox`'s identical
+     * `ariaLabel` prop. Ignored for `image` -- see `alt` for that instead. */
+    ariaLabel = null;
+    /** Applies the disabled treatment (50% opacity) and suppresses the hover/focus/pressed CSS
+     * states -- this doesn't set a native `disabled` attribute (this component renders no native
+     * form control), it's purely a visual/interaction-state flag for when a consuming app has
+     * wrapped this in its own disabled control. Reflected so the `:host([disabled])` CSS selector
+     * that drives all of the above still matches when a consumer sets the JS property directly
+     * (`el.disabled = true`) rather than the HTML attribute. */
+    disabled = false;
+    render() {
+        const classes = `bs-avatar bs-avatar--${this.type} bs-avatar--${this.size}`;
+        if (this.type === 'image') {
+            return (h("span", { part: "container", class: classes }, h("img", { part: "image", class: "bs-avatar__image", src: this.src ?? undefined, alt: this.alt ?? '' })));
+        }
+        return (h("span", { part: "container", class: classes, role: "img", "aria-label": this.ariaLabel ?? undefined }, this.type === 'initials' ? (h("span", { part: "initials", class: "bs-avatar__initials" }, this.initials)) : (h(UserIcon, null))));
+    }
+    static get is() { return "bs-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-avatar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsAvatarType",
+                    "resolved": "\"icon\" | \"image\" | \"initials\"",
+                    "references": {
+                        "BsAvatarType": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-avatar/bs-avatar.tsx",
+                            "id": "src/components/bs-avatar/bs-avatar.tsx::BsAvatarType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "What to render inside the circle. `icon` (default) is the generic fallback for when neither\na photo nor initials are available yet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'icon'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsAvatarSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\"",
+                    "references": {
+                        "BsAvatarSize": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-avatar/bs-avatar.tsx",
+                            "id": "src/components/bs-avatar/bs-avatar.tsx::BsAvatarSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale -- `xs` (24px) through `xxl` (128px), matching Figma's own six-step scale."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "initials": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`type=\"initials\"` only: the initials text to display (e.g. `\"SL\"` for \"Sam Lee\"). Ignored\nfor `icon`/`image`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initials",
+                "defaultValue": "null"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`type=\"image\"` only: the photo URL. This component does not fetch it itself -- network\ncalls, loading/error states, and caching are the consuming app's responsibility, same\nconvention as `bs-logo`'s own `src` prop. Ignored for `icon`/`initials`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src",
+                "defaultValue": "null"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`type=\"image\"` only: accessible alt text for the photo, set directly on the real `<img>`\nthis renders -- a person's photo is meaningful content, not decorative, so pass something\nreal (e.g. their name). Falls back to `alt=\"\"` (decorative to assistive tech) when unset,\nrather than omitting the attribute entirely, but don't rely on that fallback. Ignored for\n`icon`/`initials` -- see `ariaLabel` for those instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "null"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`type=\"icon\"`/`\"initials\"` only: accessible name for the avatar, set as `aria-label` on the\n`role=\"img\"` wrapper this renders (neither is a real `<img>`, so there's no native `alt` to\nset). Setting a plain `aria-label` attribute on the `<bs-avatar>` host does NOT work for this\n-- that attribute stays on the light-DOM host and never crosses into the shadow DOM, so the\nactual `role=\"img\"` element stays nameless. Same pattern as `bs-checkbox`'s identical\n`ariaLabel` prop. Ignored for `image` -- see `alt` for that instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Applies the disabled treatment (50% opacity) and suppresses the hover/focus/pressed CSS\nstates -- this doesn't set a native `disabled` attribute (this component renders no native\nform control), it's purely a visual/interaction-state flag for when a consuming app has\nwrapped this in its own disabled control. Reflected so the `:host([disabled])` CSS selector\nthat drives all of the above still matches when a consumer sets the JS property directly\n(`el.disabled = true`) rather than the HTML attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+// A generic, standard "user" silhouette (head + shoulders bust) -- not a pixel port of Figma's own
+// exported icon asset (a plain raster/vector glyph this common isn't a proprietary brand asset
+// worth treating as a fixed image import, unlike e.g. bs-logo's actual wordmark), same
+// inline-icon-helper-function pattern as bs-chatbot-header.tsx's NewChatIcon/ExpandIcon/etc. Single
+// shared viewBox scales cleanly to every avatar size via plain CSS width/height, so one glyph
+// covers all six sizes.
+const UserIcon = () => (h("svg", { part: "icon", class: "bs-avatar__icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "8", r: "4", fill: "currentColor" }), h("path", { d: "M4 20.5C4 16.634 7.582 13.5 12 13.5C16.418 13.5 20 16.634 20 20.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })));

package/dist/collection/components/bs-avatar/bs-avatar.stories.js

@@ -0,0 +1,67 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const types = ['icon', 'initials', 'image'];
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+// A placeholder photo for the "image" demo stories -- this component never fetches a photo
+// itself (see its own class doc), this is purely story content standing in for a real user photo
+// a consuming app would supply.
+const PLACEHOLDER_PHOTO = 'https://i.pravatar.cc/256?img=68';
+const meta = {
+    title: 'Components/bs-avatar',
+    parameters: { docs: { description: { component: componentDescription('bs-avatar') } } },
+    render: args => html `
+    <bs-avatar
+      type=${args.type}
+      size=${args.size}
+      initials=${args.initials}
+      src=${args.src}
+      alt=${args.alt}
+      aria-label=${args.ariaLabel}
+      ?disabled=${args.disabled}
+    ></bs-avatar>
+  `,
+    argTypes: {
+        type: { control: 'select', options: types, description: propDescription('bs-avatar', 'type') },
+        size: { control: 'select', options: sizes, description: propDescription('bs-avatar', 'size') },
+        initials: { control: 'text', description: propDescription('bs-avatar', 'initials') },
+        src: { control: 'text', description: propDescription('bs-avatar', 'src') },
+        alt: { control: 'text', description: propDescription('bs-avatar', 'alt') },
+        ariaLabel: { control: 'text', description: propDescription('bs-avatar', 'ariaLabel') },
+        disabled: { control: 'boolean', description: propDescription('bs-avatar', 'disabled') },
+    },
+    args: {
+        type: 'icon',
+        size: 'md',
+        initials: 'SL',
+        src: '',
+        alt: '',
+        ariaLabel: 'Sam Lee',
+        disabled: false,
+    },
+};
+export default meta;
+export const Icon = {};
+export const Initials = {
+    args: { type: 'initials' },
+};
+export const Image = {
+    args: { type: 'image', src: PLACEHOLDER_PHOTO, alt: 'Sam Lee' },
+};
+export const Sizes = {
+    render: args => html `
+    <div style="display:flex; gap:16px; align-items:center;">
+      ${sizes.map(size => html `<bs-avatar type=${args.type} size=${size} initials=${args.initials} aria-label=${args.ariaLabel}></bs-avatar>`)}
+    </div>
+  `,
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+// Not a special prop -- this just sets tabindex="0" directly on the element (a consuming app's
+// own choice to make an avatar interactive, e.g. an account-switcher trigger) to demonstrate that
+// the real :hover/:focus-visible/:active CSS states apply with no extra wiring -- see the class
+// doc in bs-avatar.tsx for why. Tab to it (or click/hold it) to see the states.
+export const Interactive = {
+    args: { type: 'initials' },
+    render: args => html `<bs-avatar type=${args.type} size=${args.size} initials=${args.initials} aria-label=${args.ariaLabel} tabindex="0"></bs-avatar>`,
+};

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

@@ -0,0 +1,62 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-breadcrumb', () => {
+    it('sets role="listitem" on the host', async () => {
+        const { root } = await render(h("bs-breadcrumb", { href: "/" }, "Home"));
+        expect(root).toEqualAttribute('role', 'listitem');
+    });
+    it('renders a separator marked aria-hidden', async () => {
+        const { root } = await render(h("bs-breadcrumb", { href: "/" }, "Home"));
+        const separator = root.shadowRoot.querySelector('[part="separator"]');
+        expect(separator).not.toBeNull();
+        expect(separator).toEqualAttribute('aria-hidden', 'true');
+    });
+    it('current renders a non-link <span aria-current="page">, even when href is also set', async () => {
+        const { root } = await render(h("bs-breadcrumb", { href: "/should-be-ignored", current: true }, "Edit"));
+        const current = root.shadowRoot.querySelector('[part="current"]');
+        expect(current).not.toBeNull();
+        expect(current.tagName).toBe('SPAN');
+        expect(current).toEqualAttribute('aria-current', 'page');
+        // `current`'s own shadow-DOM textContent is empty -- it only contains a <slot>, and
+        // `Element.textContent` doesn't traverse slotted/assigned light-DOM nodes. Check the host's
+        // textContent instead, which does include its own light-DOM children.
+        expect(root.textContent.trim()).toBe('Edit');
+        expect(root.shadowRoot.querySelector('a')).toBeNull();
+    });
+    it('href (not current) renders a real <a href>', async () => {
+        const { root } = await render(h("bs-breadcrumb", { href: "/settings" }, "Settings"));
+        const link = root.shadowRoot.querySelector('[part="link"]');
+        expect(link).not.toBeNull();
+        expect(link.tagName).toBe('A');
+        expect(link).toEqualAttribute('href', '/settings');
+    });
+    it('neither href nor current renders a plain, non-interactive <span>', async () => {
+        const { root } = await render(h("bs-breadcrumb", null, "No Link"));
+        const link = root.shadowRoot.querySelector('[part="link"]');
+        expect(link).not.toBeNull();
+        expect(link.tagName).toBe('SPAN');
+        expect(root.shadowRoot.querySelector('a')).toBeNull();
+    });
+    it("hides the first crumb's separator, regardless of tag, and shows the second's", async () => {
+        const { root } = await render(h("bs-breadcrumbs", null, h("bs-breadcrumb", { href: "/" }, "Home"), h("bs-breadcrumb", { href: "/settings" }, "Settings")));
+        const crumbs = root.querySelectorAll('bs-breadcrumb');
+        const [first, second] = Array.from(crumbs);
+        const firstSeparator = first.shadowRoot.querySelector('[part="separator"]');
+        const secondSeparator = second.shadowRoot.querySelector('[part="separator"]');
+        expect(getComputedStyle(firstSeparator).display).toBe('none');
+        expect(getComputedStyle(secondSeparator).display).not.toBe('none');
+    });
+    describe('size', () => {
+        it('defaults to "md" and reflects the attribute', async () => {
+            const { root } = await render(h("bs-breadcrumb", { href: "/" }, "Home"));
+            expect(root).toEqualAttribute('size', 'md');
+        });
+        it('reflects a "sm" size and scales down the computed font-size', async () => {
+            const mdRender = await render(h("bs-breadcrumb", { href: "/" }, "Home"));
+            const smRender = await render(h("bs-breadcrumb", { href: "/", size: "sm" }, "Home"));
+            expect(smRender.root).toEqualAttribute('size', 'sm');
+            const mdFontSize = getComputedStyle(mdRender.root).fontSize;
+            const smFontSize = getComputedStyle(smRender.root).fontSize;
+            expect(smFontSize).not.toBe(mdFontSize);
+        });
+    });
+});

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" })));