@brandsync/wc 0.0.11 → 0.1.0

package/dist/collection/components/bs-ai-chatbot/bs-ai-chatbot.stories.js

@@ -23,18 +23,32 @@ const PANEL_STYLE = `
   background: var(--bs-surface-base);
   font-family: var(--bs-typography-font-family-body), sans-serif;
 `;
+// Page padding per the Genie Chatbot pattern spec (16px left/right, 24px top/bottom -- not a flat
+// 16px on every side). No uniform \`gap\` here: the user-bubble-to-AI-response spacing below is a
+// distinct, much larger value (40px) than any other spacing within a single AI turn, so it's set
+// explicitly per-element instead of via one flex gap.
 const TRANSCRIPT_STYLE = `
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: var(--bs-spacing-200);
-  padding: var(--bs-spacing-200);
+  padding: var(--bs-spacing-300) var(--bs-spacing-200);
 `;
+// The gap from a user's message bubble to the AI's response that follows it, per the Genie
+// Chatbot pattern spec's conversationWindow.userBubbleToAiResponsePx (40px) -- deliberately much
+// larger than ordinary internal spacing (e.g. the 4px gap between an AI response's own text and
+// its action row below).
+const AI_RESPONSE_GAP_STYLE = `margin-top: var(--bs-spacing-500);`;
+// margin: 0 on both -- these render as <p> tags, and this Storybook environment has no CSS reset
+// zeroing the browser's default <p> margin (~1em top/bottom). Left unset, that default margin
+// silently added to the intentional 40px user-bubble-to-AI-response gap (AI_RESPONSE_GAP_STYLE
+// above), measuring 56px instead of the spec's 40px -- confirmed via getBoundingClientRect before
+// this fix.
 const USER_BUBBLE_STYLE = `
   align-self: flex-end;
   max-width: 80%;
+  margin: 0;
   padding: var(--bs-spacing-100) var(--bs-spacing-150);
   border-radius: var(--bs-border-radius-150);
   background: var(--bs-color-primary-container);
@@ -44,6 +58,7 @@ const USER_BUBBLE_STYLE = `
 `;
 const AI_RESPONSE_STYLE = `
   max-width: 100%;
+  margin: 0;
   color: var(--bs-text-default);
   font-size: var(--bs-font-size-md);
   line-height: 1.5;
@@ -62,7 +77,7 @@ export const EmptyState = {
         </div>
       </div>
       <bs-composer aria-label="Message" style="margin: var(--bs-spacing-100) var(--bs-spacing-200) 0;"></bs-composer>
-      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-150) 0 var(--bs-spacing-100);">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
     </div>
   `,
 };
@@ -73,7 +88,7 @@ export const ActiveConversation = {
       <bs-chatbot-header heading="Genie"></bs-chatbot-header>
       <div style=${TRANSCRIPT_STYLE}>
         <p style=${USER_BUBBLE_STYLE}>How do I submit a ByggSøk application?</p>
-        <div style="display: flex; flex-direction: column; gap: var(--bs-spacing-50);">
+        <div style="${AI_RESPONSE_GAP_STYLE} display: flex; flex-direction: column; gap: var(--bs-spacing-50);">
           <p style=${AI_RESPONSE_STYLE}>
             You can submit a ByggSøk application through the municipal portal. Log in with your ID, select "New
             application", and attach your building plans before submitting for review.
@@ -82,7 +97,7 @@ export const ActiveConversation = {
         </div>
       </div>
       <bs-composer aria-label="Message" style="margin: var(--bs-spacing-100) var(--bs-spacing-200) 0;"></bs-composer>
-      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-150) 0 var(--bs-spacing-100);">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
     </div>
   `,
 };
@@ -93,10 +108,10 @@ export const Thinking = {
       <bs-chatbot-header heading="Genie"></bs-chatbot-header>
       <div style=${TRANSCRIPT_STYLE}>
         <p style=${USER_BUBBLE_STYLE}>How do I submit a ByggSøk application?</p>
-        <bs-ai-thinking label="Retrieving sources"></bs-ai-thinking>
+        <bs-ai-thinking label="Retrieving sources" style=${AI_RESPONSE_GAP_STYLE}></bs-ai-thinking>
       </div>
       <bs-composer aria-label="Message" state="generating" style="margin: var(--bs-spacing-100) var(--bs-spacing-200) 0;"></bs-composer>
-      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-150) 0 var(--bs-spacing-100);">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
     </div>
   `,
 };
@@ -107,7 +122,7 @@ export const WithSourcesDrawerOpen = {
       <bs-chatbot-header heading="Genie"></bs-chatbot-header>
       <div style=${TRANSCRIPT_STYLE}>
         <p style=${USER_BUBBLE_STYLE}>How do I submit a ByggSøk application?</p>
-        <div style="display: flex; flex-direction: column; gap: var(--bs-spacing-50);">
+        <div style="${AI_RESPONSE_GAP_STYLE} display: flex; flex-direction: column; gap: var(--bs-spacing-50);">
           <p style=${AI_RESPONSE_STYLE}>
             You can submit a ByggSøk application through the municipal portal. Log in with your ID, select "New
             application", and attach your building plans before submitting for review.
@@ -116,7 +131,7 @@ export const WithSourcesDrawerOpen = {
         </div>
       </div>
       <bs-composer aria-label="Message" style="margin: var(--bs-spacing-100) var(--bs-spacing-200) 0;"></bs-composer>
-      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-150) 0 var(--bs-spacing-100);">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
 
       <!-- Backdrop -->
       <div style="position: absolute; inset: 0; background: rgba(33, 38, 46, 0.32);"></div>
@@ -152,7 +167,7 @@ export const UploadingAttachments = {
           </bs-attachment-list>
         </bs-composer>
       </div>
-      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-150) 0 var(--bs-spacing-100);">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
     </div>
   `,
 };
@@ -174,7 +189,7 @@ export const SendFailed = {
         ></bs-composer-status-banner>
         <bs-composer aria-label="Message"></bs-composer>
       </div>
-      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-150) 0 var(--bs-spacing-100);">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
     </div>
   `,
 };

package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.js

@@ -24,7 +24,8 @@ import { h } from "@stencil/core";
  */
 export class BsAiDisclaimer {
     render() {
-        return (h("div", { key: 'ea1210d75f9f55f4ce31f0ecd434e28a0c3a6ae5', class: "bs-ai-disclaimer" }, h("p", { key: 'a4379d06096623a33254466c83d7a8342a1a61f6', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: '4ceb6be62b06ddeae050ce84c92d511218791219' }))));
+        https: //images.unsplash.com/photo-1512917774080-9991f1c4c750?w=200&h=200&fit=crop
+         return (h("div", { key: '4ef6ca1bd71846f361322763d4a8a9b629da9c33', class: "bs-ai-disclaimer" }, h("p", { key: '62ae8fe04dfcba8c357a4bc2e540a86c02faa961', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: '229c78f58ac3a9868492e82434ff894a20f29613' }))));
     }
     static get is() { return "bs-ai-disclaimer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.js

@@ -43,7 +43,7 @@ export class BsAiGreeting {
         const subtext = this.productName
             ? `How can I help you with ${this.productName} today?`
             : 'How can I help you today?';
-        return (h("div", { key: '34a137d8c2dd17240a2015e9f4571d438924f5ba', class: "bs-ai-greeting" }, h("div", { key: 'be999e806a9ee740b01d6aa2e5531e45c89ea9fb', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '37b906288175467937c66961dcc2f08f911c0566', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: '2973043c2ae6646a0dff1bc905cb7f2eaf9d5251', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: 'd981c73b805a3f27cd3dcb22e58f0058ff6b4f1c', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
+        return (h("div", { key: 'f3cfd0ecf060abf18c9f043f8ebbe7d93926e044', class: "bs-ai-greeting" }, h("div", { key: 'e1cb5cba1752e5261a750734db768e32f8ce7723', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '31e0f592eb17a6c48f407837e37b29cd8b580cde', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: 'd35c3fb4df5d90eccef75638881f27e37d379ded', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: 'cb7d9a8081c0128f8e24eb165cf7857bcb82cdeb', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
     }
     static get is() { return "bs-ai-greeting"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.js

@@ -29,7 +29,7 @@ export class BsAiThinking {
     /** The status text shown next to the icon, e.g. "Retrieving", "Thinking", "Searching". */
     label = 'Thinking';
     render() {
-        return (h("div", { key: '3fb5e1a21daa9244f595c20b19968249388ac027', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: 'be5a7f7a2b64da982d8e61dc02668d57d713f6f5', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '2581cdf1609ba8ff7c653cb2dae959946ef83dac', part: "label", class: "bs-ai-thinking__label" }, this.label)));
+        return (h("div", { key: '312409b5eb383fc321814784c036841e43b6311e', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: 'c98b5fdff23e9911cb946774e98b2f308838cf4d', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '65d4193a343877b05e031c36e03c9faa5a439db6', part: "label", class: "bs-ai-thinking__label" }, this.label)));
     }
     static get is() { return "bs-ai-thinking"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,10 +7,6 @@
   --bs-attachment-filename-color: var(--bs-text-default);
   --bs-attachment-badge-bg-pdf: var(--bs-badge-bg-error);
   --bs-attachment-badge-bg-document: var(--bs-badge-bg-info);
-  --bs-attachment-remove-bg: var(--bs-button-neutral-container);
-  --bs-attachment-remove-hover: var(--bs-button-neutral-hover);
-  --bs-attachment-remove-pressed: var(--bs-button-neutral-pressed);
-  --bs-attachment-remove-focus: var(--bs-border-neutral-focus);
 }
 
 .bs-attachment {
@@ -98,35 +94,23 @@
   background: var(--bs-attachment-badge-bg-document);
 }
 
-/* --- Remove button --- */
+/* --- Remove button ---
+   bs-icon-button owns its own background/color/radius/hover/pressed/focus styling internally
+   (variant="neutral" size="xs") -- this component only positions it (absolute, top-right corner)
+   and drives the hover/focus-revealed opacity, both external layout concerns bs-icon-button
+   itself has no opinion on. */
 
 .bs-attachment__remove {
-  box-sizing: border-box;
   position: absolute;
-  top: var(--bs-spacing-50);
-  right: var(--bs-spacing-50);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  background: var(--bs-attachment-remove-bg);
-  border: none;
-  border-radius: var(--bs-border-radius-50);
-  color: var(--bs-icon-default);
-  cursor: pointer;
+  /* Verified against Figma node 2513:32843 (EG Genie UI Kit v1.0): the remove button's own 32x32
+     hit-target box sits flush at the thumbnail's top-right corner (top:0, right:0), with the
+     *visible* 16px button centered inside it (8px inset on every side) -- so the visible button's
+     real offset from the thumbnail's corner is 8px, not 4px. */
+  top: var(--bs-spacing-100);
+  right: var(--bs-spacing-100);
   opacity: 0;
   pointer-events: none;
-  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard), opacity var(--bs-duration-fast) var(--bs-easing-standard);
-}
-
-.bs-attachment__remove:hover {
-  background: var(--bs-attachment-remove-hover);
-}
-
-.bs-attachment__remove:active {
-  background: var(--bs-attachment-remove-pressed);
+  transition: opacity var(--bs-duration-fast) var(--bs-easing-standard);
 }
 
 .bs-attachment:hover .bs-attachment__remove,
@@ -135,11 +119,6 @@
   pointer-events: auto;
 }
 
-.bs-attachment__remove:focus-visible {
-  outline: 2px solid var(--bs-attachment-remove-focus);
-  outline-offset: 1px;
-}
-
 /* --- Spinner --- */
 
 .bs-attachment__spinner {

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

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 /**
  * A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
  * with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
- * a hover/focus-revealed remove button.
+ * a hover/focus-revealed remove button (a `bs-icon-button` with `size="xs"` `variant="neutral"` --
+ * the same 16x16px compact tier `bs-icon-button` documents as meant for exactly this kind of
+ * chip/tag "remove" control).
  *
  * ## When to use
  * - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
@@ -27,14 +29,6 @@ import { h } from "@stencil/core";
  * @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
  * @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
  *   `--bs-badge-bg-info`.
- * @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
- *   Aliased to `--bs-button-neutral-container`.
- * @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
- *   `--bs-button-neutral-hover`.
- * @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
- *   `--bs-button-neutral-pressed`.
- * @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
- *   `--bs-border-neutral-focus`.
  */
 export class BsAttachment {
     /** Which kind of attachment preview to render. */
@@ -56,7 +50,7 @@ export class BsAttachment {
     };
     render() {
         const isImage = this.type === 'image';
-        return (h("div", { key: '7cebfc51b0453ac6c1fa57d38856b4b54f15def9', class: { 'bs-attachment': true, 'bs-attachment--loading': this.loading }, "aria-busy": this.loading ? 'true' : 'false' }, isImage ? this.renderImage() : this.renderCard(), this.removable && (h("button", { key: '935eb0f9507a9c9d24a1a6121c2fcd0575ac9d16', type: "button", part: "remove", class: "bs-attachment__remove", "aria-label": "Remove attachment", onClick: this.onRemoveClick }, h(CloseIcon, { key: '00e45c411ec831a66dd29d039568f57fc97b3930' })))));
+        return (h("div", { key: '54b6d63b3e3fa98e5ec10444253b145080facc97', class: { 'bs-attachment': true, 'bs-attachment--loading': this.loading }, "aria-busy": this.loading ? 'true' : 'false' }, isImage ? this.renderImage() : this.renderCard(), this.removable && (h("bs-icon-button", { key: 'bc0c6cd660a361886447f38b56578a2271384e99', part: "remove", class: "bs-attachment__remove", size: "xs", variant: "neutral", ariaLabel: `Remove attachment: ${this.fileName}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: 'fc932382233dfe20c46666705f1c79540bc08d35' })))));
     }
     renderImage() {
         return (h("div", { part: "thumbnail", class: "bs-attachment__thumbnail" }, h("img", { class: "bs-attachment__image", src: this.imageSrc, alt: this.imageAlt }), this.loading && h(Spinner, { class: "bs-attachment__spinner bs-attachment__spinner--overlay", size: 16 })));

package/dist/collection/components/bs-attachment-list/bs-attachment-list.js

@@ -58,7 +58,7 @@ export class BsAttachmentList {
         this.canScrollRight = row.scrollWidth - row.clientWidth - row.scrollLeft > 1;
     };
     render() {
-        return (h("div", { key: 'ccf4970df6d8dc81ccd4d717d8ec1c295a7910e7', class: "bs-attachment-list" }, h("div", { key: 'd05b1553540c47825b023cf99ba7acdc11e87b4c', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: 'e140bbe3047910cf9a237724d342c720e40889d6', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: '42a3588c41a3dc63a41e6dea9ba95f267c72d61e', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
+        return (h("div", { key: '41159aec889d4dfa26d368b1d24f8678856da661', class: "bs-attachment-list" }, h("div", { key: '0e3c29de5f945209e9b91b406bd287524f41d801', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: '657b063a8a38e176bf8bae6234f9db02b18ab7c4', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: '1331fa30ed368f253e95812343356fc22a0280c7', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
     }
     static get is() { return "bs-attachment-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,54 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-avatar', () => {
+    it('defaults to type="icon" size="md"', async () => {
+        const { root } = await render(h("bs-avatar", null));
+        const container = root.shadowRoot.querySelector('[part="container"]');
+        expect(container).toHaveClass('bs-avatar--icon');
+        expect(container).toHaveClass('bs-avatar--md');
+        expect(container).toEqualAttribute('role', 'img');
+    });
+    it('renders the fallback user icon for type="icon"', async () => {
+        const { root } = await render(h("bs-avatar", { type: "icon" }));
+        expect(root.shadowRoot.querySelector('[part="icon"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="initials"]')).toBeNull();
+        expect(root.shadowRoot.querySelector('[part="image"]')).toBeNull();
+    });
+    it('renders the initials text for type="initials"', async () => {
+        const { root } = await render(h("bs-avatar", { type: "initials", initials: "SL" }));
+        const initials = root.shadowRoot.querySelector('[part="initials"]');
+        expect(initials).not.toBeNull();
+        expect(initials.textContent).toBe('SL');
+        expect(root.shadowRoot.querySelector('[part="icon"]')).toBeNull();
+    });
+    it('renders a real <img> with src/alt for type="image", with no outer role/aria-label', async () => {
+        const { root } = await render(h("bs-avatar", { type: "image", src: "https://example.com/photo.jpg", alt: "Sam Lee" }));
+        const img = root.shadowRoot.querySelector('[part="image"]');
+        expect(img).not.toBeNull();
+        expect(img.tagName).toBe('IMG');
+        expect(img).toEqualAttribute('src', 'https://example.com/photo.jpg');
+        expect(img).toEqualAttribute('alt', 'Sam Lee');
+        const container = root.shadowRoot.querySelector('[part="container"]');
+        expect(container.hasAttribute('role')).toBe(false);
+        expect(container.hasAttribute('aria-label')).toBe(false);
+    });
+    it('falls back to alt="" (not a missing attribute) when alt is not provided for type="image"', async () => {
+        const { root } = await render(h("bs-avatar", { type: "image", src: "https://example.com/photo.jpg" }));
+        const img = root.shadowRoot.querySelector('[part="image"]');
+        expect(img).toEqualAttribute('alt', '');
+    });
+    it('sets aria-label from ariaLabel for type="icon"/"initials"', async () => {
+        const { root } = await render(h("bs-avatar", { type: "initials", initials: "SL", ariaLabel: "Sam Lee" }));
+        expect(root.shadowRoot.querySelector('[part="container"]')).toEqualAttribute('aria-label', 'Sam Lee');
+    });
+    it('applies the correct size class for every size value', async () => {
+        const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+        for (const size of sizes) {
+            const { root } = await render(h("bs-avatar", { size: size }));
+            expect(root.shadowRoot.querySelector('[part="container"]')).toHaveClass(`bs-avatar--${size}`);
+        }
+    });
+    it('reflects disabled as a host attribute', async () => {
+        const { root } = await render(h("bs-avatar", { disabled: true }));
+        expect(root.hasAttribute('disabled')).toBe(true);
+    });
+});

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