@brandsync/wc 0.0.12 → 1.0.0

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

@@ -0,0 +1,197 @@
+/**
+ * @prop --bs-avatar-size-xs: Width/height at size="xs". 24px, matching Figma's own six-step scale.
+ * @prop --bs-avatar-size-sm: Width/height at size="sm". 32px.
+ * @prop --bs-avatar-size-md: Width/height at size="md". 44px.
+ * @prop --bs-avatar-size-lg: Width/height at size="lg". 64px.
+ * @prop --bs-avatar-size-xl: Width/height at size="xl". 96px.
+ * @prop --bs-avatar-size-xxl: Width/height at size="xxl". 128px.
+ * @prop --bs-avatar-radius: Corner radius -- always a full circle regardless of size. Aliased to
+ *   --bs-border-radius-full.
+ * @prop --bs-avatar-border-width: Border width at every size except xxl. Aliased to
+ *   --bs-border-width-thin (1px).
+ * @prop --bs-avatar-border-width-xxl: Border width at size="xxl" specifically -- Figma specs this
+ *   one size a hair thicker (1.333px) than the other five, not a rounding artifact.
+ * @prop --bs-avatar-bg-dafault: Background, resting. Aliased to --bs-surface-raised. Named
+ *   "dafault" (not a typo introduced here) -- this is this library's own vendored
+ *   brandsync-tokens token verbatim; see CLAUDE.md's note on pre-existing malformed vendored
+ *   token names.
+ * @prop --bs-avatar-bg-hover: Background on hover. Aliased to --bs-surface-raised -- identical to
+ *   the resting value; only the border recolors on hover (see below).
+ * @prop --bs-avatar-bg-pressed: Background while pressed. Aliased to --bs-surface-raised, same
+ *   reasoning as hover.
+ * @prop --bs-avatar-bg-focused: Background while focused. Aliased to --bs-surface-raised, same
+ *   reasoning as hover.
+ * @prop --bs-avatar-border-primary: Border color, resting. Aliased to
+ *   --bs-border-neutral-container.
+ * @prop --bs-avatar-border-hover: Border color on hover. Aliased to
+ *   --bs-border-neutral-container-hover.
+ * @prop --bs-avatar-border-pressed: Border color while pressed. Aliased to
+ *   --bs-border-neutral-container-pressed.
+ * @prop --bs-avatar-border-focused: Border color while focused -- Figma keeps this identical to
+ *   the resting --bs-avatar-border-primary; the focus ring (--bs-avatar-border-focus below) is a
+ *   separate, additional ring, not a border recolor.
+ * @prop --bs-avatar-border-focus: Focus ring color -- a separate ring drawn just outside the
+ *   avatar's own border, not the border's own color (see --bs-avatar-border-focused above).
+ *   Aliased to --bs-border-neutral-focus.
+ * @prop --bs-avatar-icon-primary: Fallback user-icon color (type="icon"). Aliased to
+ *   --bs-icon-muted.
+ * @prop --bs-avatar-text-default: Initials text color (type="initials"). Aliased to
+ *   --bs-text-default.
+ *
+ * All of the --bs-avatar-* custom properties above are this library's existing vendored
+ * brandsync-tokens tokens (see tokens.css), not new ones invented for this component --
+ * brandsync-tokens already ships a full avatar-specific token set, referenced here directly
+ * rather than re-aliased through component-local names the way most other components in this
+ * library do, since there's nothing left to add a layer of indirection over.
+ */
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+
+  --bs-avatar-size-xs: 24px;
+  --bs-avatar-size-sm: 32px;
+  --bs-avatar-size-md: 44px;
+  --bs-avatar-size-lg: 64px;
+  --bs-avatar-size-xl: 96px;
+  --bs-avatar-size-xxl: 128px;
+
+  --bs-avatar-radius: var(--bs-border-radius-full);
+  --bs-avatar-border-width: var(--bs-border-width-thin);
+  --bs-avatar-border-width-xxl: 1.333px;
+}
+
+.bs-avatar {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--bs-avatar-radius);
+  border: var(--bs-avatar-border-width) solid var(--bs-avatar-border-primary);
+  background: var(--bs-avatar-bg-dafault);
+  flex-shrink: 0;
+  /* Prevents the initials text (or a stray click-drag anywhere in the circle) from highlighting
+     like ordinary selectable text -- this component is meant to read as a single glyph/photo, not
+     text content, especially once a consuming app makes it interactive (see the class doc in
+     bs-avatar.tsx). Same convention already used for bs-data-table's own clickable sort header. */
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.bs-avatar--xs {
+  width: var(--bs-avatar-size-xs);
+  height: var(--bs-avatar-size-xs);
+}
+
+.bs-avatar--sm {
+  width: var(--bs-avatar-size-sm);
+  height: var(--bs-avatar-size-sm);
+}
+
+.bs-avatar--md {
+  width: var(--bs-avatar-size-md);
+  height: var(--bs-avatar-size-md);
+}
+
+.bs-avatar--lg {
+  width: var(--bs-avatar-size-lg);
+  height: var(--bs-avatar-size-lg);
+}
+
+.bs-avatar--xl {
+  width: var(--bs-avatar-size-xl);
+  height: var(--bs-avatar-size-xl);
+}
+
+.bs-avatar--xxl {
+  width: var(--bs-avatar-size-xxl);
+  height: var(--bs-avatar-size-xxl);
+  border-width: var(--bs-avatar-border-width-xxl);
+}
+
+/* type="image" */
+.bs-avatar__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* type="icon" -- proportional to the container regardless of size, so one shared viewBox scales
+   cleanly across all six sizes without needing a per-size icon custom property. */
+.bs-avatar__icon {
+  width: 60%;
+  height: 60%;
+  color: var(--bs-avatar-icon-primary);
+}
+
+/* type="initials" -- font styling genuinely varies per size, not a simple linear scale (xs/sm
+   share one tier, lg sits between md and xl/xxl using a different font family/weight despite
+   matching md's font SIZE) -- matching Figma's own per-size type styles exactly rather than
+   interpolating a "cleaner" scale of our own. */
+.bs-avatar__initials {
+  color: var(--bs-avatar-text-default);
+  font-family: var(--bs-typography-font-family-body);
+  font-weight: var(--bs-font-weight-medium);
+  text-align: center;
+  white-space: nowrap;
+}
+
+.bs-avatar--xs .bs-avatar__initials,
+.bs-avatar--sm .bs-avatar__initials {
+  font-size: var(--bs-fontsize-caption-sm);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+.bs-avatar--md .bs-avatar__initials {
+  font-family: var(--bs-typography-font-family-heading);
+  font-weight: var(--bs-font-weight-bold);
+  font-size: var(--bs-fontsize-heading-h6);
+  line-height: calc(var(--bs-line-height-heading-h6) * 1px);
+}
+
+.bs-avatar--lg .bs-avatar__initials {
+  font-size: var(--bs-fontsize-body-md);
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+}
+
+.bs-avatar--xl .bs-avatar__initials,
+.bs-avatar--xxl .bs-avatar__initials {
+  font-family: var(--bs-typography-font-family-heading);
+  font-weight: var(--bs-font-weight-bold);
+  font-size: var(--bs-fontsize-heading-h4);
+  line-height: calc(var(--bs-line-height-heading-h4) * 1px);
+}
+
+/* Interaction states -- real :hover/:focus-visible/:active on the HOST itself (not a wrapping
+   button this component doesn't render), so a consuming app gets this treatment for free just by
+   making the <bs-avatar> element itself interactive (a click handler + tabindex, or wrapping it in
+   their own <button>) -- see the class doc in bs-avatar.tsx for why. Guarded by :not([disabled])
+   so a disabled avatar never shows a hover/focus/pressed treatment even if a consumer's own
+   wrapping control still lets these pseudo-classes match. */
+:host(:hover:not([disabled])) .bs-avatar {
+  background: var(--bs-avatar-bg-hover);
+  border-color: var(--bs-avatar-border-hover);
+}
+
+:host(:active:not([disabled])) .bs-avatar {
+  background: var(--bs-avatar-bg-pressed);
+  border-color: var(--bs-avatar-border-pressed);
+}
+
+/* Focus keeps the resting border color (--bs-avatar-border-focused is identical to
+   --bs-avatar-border-primary in Figma) and adds a separate ring just outside it instead of
+   recoloring the border itself -- unlike hover/pressed above. */
+:host(:focus-visible:not([disabled])) {
+  outline: none;
+}
+
+:host(:focus-visible:not([disabled])) .bs-avatar {
+  background: var(--bs-avatar-bg-focused);
+  border-color: var(--bs-avatar-border-focused);
+  box-shadow: 0 0 0 3px var(--bs-avatar-border-focus);
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+}

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