@brandsync/wc 1.18.0 → 1.20.0

package/dist/cjs/motion-DOlI71lc.js

@@ -0,0 +1,43 @@
+'use strict';
+
+/**
+ * Small helpers for the enter/exit motion of overlay components (dialog, popover, side panel).
+ * The lengths and curves come from CSS custom properties on the host, which alias the shared
+ * `--bs-duration-*` / `--bs-easing-*` tokens. Under `prefers-reduced-motion: reduce` those duration
+ * tokens are `0ms`, so every helper here reports 0 and callers skip the motion entirely.
+ */
+/** Parses a CSS time (`200ms`, `0.2s`) to milliseconds. Anything else is 0. */
+function parseMs(value) {
+    const v = value.trim();
+    if (v.endsWith('ms'))
+        return parseFloat(v);
+    if (v.endsWith('s'))
+        return parseFloat(v) * 1000;
+    return 0;
+}
+/** Reads a component's motion length (ms), curve and travel distance (px) from custom properties on `host`. */
+function readMotion(host, prefix) {
+    const style = getComputedStyle(host);
+    return {
+        ms: parseMs(style.getPropertyValue(`--${prefix}-duration`)),
+        easing: style.getPropertyValue(`--${prefix}-easing`).trim() || 'ease',
+        distance: parseFloat(style.getPropertyValue(`--${prefix}-distance`)) || 0,
+    };
+}
+/**
+ * Plays `frames` on `el` and resolves when the animation finishes or is cancelled. `fill: 'forwards'`
+ * (the default for exits) keeps the end state until the caller removes the element.
+ */
+function play(el, frames, ms, easing, fill = 'none') {
+    if (!el)
+        return Promise.resolve();
+    return el.animate(frames, { duration: ms, easing, fill }).finished.then(() => undefined, () => undefined);
+}
+/** Cancels every running animation on the given elements (restores their normal style). */
+function cancelMotion(...els) {
+    els.forEach(el => el?.getAnimations().forEach(a => a.cancel()));
+}
+
+exports.cancelMotion = cancelMotion;
+exports.play = play;
+exports.readMotion = readMotion;

package/dist/collection/collection-manifest.json

@@ -12,6 +12,7 @@
     "components/bs-card/bs-card.js",
     "components/bs-carousel/bs-carousel.js",
     "components/bs-checkbox/bs-checkbox.js",
+    "components/bs-checkbox-group/bs-checkbox-group.js",
     "components/bs-chip/bs-chip-filter/bs-chip-filter.js",
     "components/bs-chip/bs-chip-informative/bs-chip-informative.js",
     "components/bs-chip/bs-chip-input/bs-chip-input.js",
@@ -25,24 +26,31 @@
     "components/bs-datepicker/bs-datepicker.js",
     "components/bs-dialog/bs-dialog.js",
     "components/bs-divider/bs-divider.js",
+    "components/bs-popover/bs-popover.js",
+    "components/bs-dropdown/bs-dropdown.js",
     "components/bs-icon-tile/bs-icon-tile.js",
     "components/bs-error-page/bs-error-page.js",
     "components/bs-file-upload/bs-file-upload.js",
     "components/bs-file-upload-item/bs-file-upload-item.js",
     "components/bs-global-search/bs-global-search.js",
     "components/bs-grid/bs-grid.js",
+    "components/bs-heading/bs-heading.js",
+    "components/bs-icon/bs-icon.js",
     "components/bs-button/bs-icon-button/bs-icon-button.js",
     "components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.js",
+    "components/bs-link/bs-link.js",
     "components/bs-logo/bs-logo.js",
     "components/bs-mega-menu/bs-mega-menu.js",
     "components/bs-message/bs-message.js",
     "components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.js",
     "components/bs-onboarding-checklist/bs-onboarding-checklist.js",
-    "components/bs-popover/bs-popover.js",
+    "components/bs-presence/bs-presence.js",
     "components/bs-product-tour/bs-product-tour.js",
     "components/bs-progress/bs-progress.js",
     "components/bs-progress-linear/bs-progress-linear.js",
     "components/bs-qr-code/bs-qr-code.js",
+    "components/bs-radio-group/bs-radio-group.js",
+    "components/bs-select/bs-select.js",
     "components/bs-session-timeout/bs-session-timeout.js",
     "components/bs-side-panel/bs-side-panel.js",
     "components/bs-skeleton/bs-skeleton.js",
@@ -51,12 +59,18 @@
     "components/bs-spinner/bs-spinner.js",
     "components/bs-split-pane/bs-split-pane.js",
     "components/bs-stack/bs-stack.js",
+    "components/bs-stat/bs-stat.js",
     "components/bs-stepper/bs-stepper-step/bs-stepper-step.js",
     "components/bs-switch/bs-switch.js",
     "components/bs-tab/bs-tab/bs-tab.js",
+    "components/bs-table-of-contents/bs-table-of-contents.js",
     "components/bs-tab/bs-tabs/bs-tabs.js",
+    "components/bs-tag/bs-tag.js",
+    "components/bs-text/bs-text.js",
     "components/bs-timepicker/bs-timepicker.js",
     "components/bs-toast/bs-toast.js",
+    "components/bs-toggle-button/bs-toggle-button.js",
+    "components/bs-toolbar/bs-toolbar.js",
     "components/bs-tooltip-trigger/bs-tooltip-trigger.js",
     "components/bs-whats-new-entry/bs-whats-new-entry.js",
     "components/bs-whats-new/bs-whats-new.js",
@@ -76,7 +90,10 @@
     "components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.js",
     "components/bs-checkbox/bs-checkbox-skeleton/bs-checkbox-skeleton.js",
     "components/bs-citation-preview/bs-citation-preview.js",
+    "components/bs-code-block/bs-code-block.js",
     "components/bs-compact-menu-block/bs-compact-menu-block.js",
+    "components/bs-description-item/bs-description-item.js",
+    "components/bs-description-list/bs-description-list.js",
     "components/bs-empty-state/bs-empty-state.js",
     "components/bs-input/bs-input.js",
     "components/bs-key/bs-key.js",
@@ -90,11 +107,14 @@
     "components/bs-page-header/bs-page-header.js",
     "components/bs-pagination/bs-pagination.js",
     "components/bs-radio/bs-radio.js",
+    "components/bs-ripple/bs-ripple.js",
     "components/bs-search-item/bs-search-item.js",
     "components/bs-shortcut-row/bs-shortcut-row.js",
+    "components/bs-skip-link/bs-skip-link.js",
     "components/bs-source-link/bs-source-link.js",
     "components/bs-stepper/bs-stepper/bs-stepper.js",
     "components/bs-tab/bs-inline-tab/bs-inline-tab.js",
+    "components/bs-toggle-button-group/bs-toggle-button-group.js",
     "components/bs-tooltip/bs-tooltip.js",
     "components/bs-tree/bs-tree.js",
     "components/bs-tree-item/bs-tree-item.js",

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

@@ -16,6 +16,12 @@ describe('axe: form controls', () => {
     axeOf('bs-checkbox', () => h("bs-checkbox", null, "Agree"));
     axeOf('bs-checkbox (icon-only)', () => h("bs-checkbox", { ariaLabel: "Select row" }));
     axeOf('bs-switch', () => h("bs-switch", null, "Alerts"));
+    axeOf('bs-select', () => h("bs-select", { label: "Fruit", description: "Pick one", options: [{ label: 'Apple', value: 'a' }, { label: 'Banana', value: 'b' }], value: "a" }));
+    axeOf('bs-select (open, error)', () => h("bs-select", { label: "Fruit", error: "Required", open: true, options: [{ label: 'Apple', value: 'a' }, { label: 'Banana', value: 'b' }] }));
+    axeOf('bs-toggle-button-group (single)', () => (h("bs-toggle-button-group", { ariaLabel: "View", value: "a" }, h("bs-toggle-button", { value: "a" }, "List"), h("bs-toggle-button", { value: "b" }, "Grid"))));
+    axeOf('bs-toggle-button-group (multiple, icon-only)', () => (h("bs-toggle-button-group", { ariaLabel: "Format", multiple: true }, h("bs-toggle-button", { value: "b", ariaLabel: "Bold" }, h("svg", { slot: "icon", viewBox: "0 0 8 8", "aria-hidden": "true" })), h("bs-toggle-button", { value: "i", ariaLabel: "Italic" }, h("svg", { slot: "icon", viewBox: "0 0 8 8", "aria-hidden": "true" })))));
+    axeOf('bs-link', () => h("bs-link", { href: "/docs" }, "Docs"));
+    axeOf('bs-link (external, button)', () => h("bs-link", { href: "https://example.com", target: "_blank", variant: "button" }, "Open"));
     axeOf('bs-radio group', () => (h("div", { role: "radiogroup", "aria-label": "Fruit" }, h("bs-radio", { name: "f", value: "a", checked: true }, "A"), h("bs-radio", { name: "f", value: "b" }, "B"))));
 });
 describe('axe: actions & navigation', () => {
@@ -60,6 +66,9 @@ describe('axe: display & feedback', () => {
     axeOf('bs-badge', () => h("bs-badge", null, "3"));
     axeOf('bs-card', () => h("bs-card", null, "Content"));
     axeOf('bs-chip-informative', () => h("bs-chip-informative", null, "Tag"));
+    axeOf('bs-tag', () => (h("bs-tag", { removable: true, color: "info" }, "Design")));
+    axeOf('bs-stat', () => h("bs-stat", { label: "Active users", value: "1,284", trend: "up", trendValue: "12%" }));
+    axeOf('bs-description-list', () => (h("bs-description-list", { ariaLabel: "Details", layout: "horizontal", dividers: true }, h("bs-description-item", { term: "Owner", description: "Sam Lee" }))));
     axeOf('bs-logo', () => h("bs-logo", null));
     axeOf('bs-progress', () => h("bs-progress", { value: 40, ariaLabel: "Uploading" }));
     axeOf('bs-progress-linear', () => h("bs-progress-linear", { value: 40, ariaLabel: "Uploading" }));

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

@@ -1,5 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
-import { runAxeCheck } from "../../test/helpers/conventions";
+import { assertCssCustomProperties, runAxeCheck } from "../../test/helpers/conventions";
 describe('bs-accordion', () => {
     it('has no axe-core accessibility violations', async () => {
         const { root } = await render(h("bs-accordion", null, h("span", { slot: "label" }, "Title"), "Body content"));
@@ -18,15 +18,30 @@ describe('bs-accordion', () => {
         });
     });
     describe('caret direction', () => {
-        it('shows CaretDown when collapsed', async () => {
+        it('is not rotated when collapsed', async () => {
             const { root } = await render(h("bs-accordion", null, "Body"));
-            const caret = root.shadowRoot.querySelector('[part="caret"]');
-            expect(caret.innerHTML).toContain('9.75L12 15.75');
+            expect(root.shadowRoot.querySelector('[part="caret"]')).not.toHaveClass('bs-accordion__caret--open');
         });
-        it('shows CaretUp when expanded', async () => {
+        it('rotates (open class) when expanded, and uses a single glyph', async () => {
             const { root } = await render(h("bs-accordion", { expanded: true }, "Body"));
             const caret = root.shadowRoot.querySelector('[part="caret"]');
-            expect(caret.innerHTML).toContain('14.25L12 8.25');
+            expect(caret).toHaveClass('bs-accordion__caret--open');
+            expect(caret.querySelectorAll('svg').length).toBe(1);
+        });
+    });
+    describe('motion', () => {
+        it('keeps the body mounted while collapsing without a preview, then removes it', async () => {
+            const { root, waitForChanges } = await render(h("bs-accordion", { expanded: true, showPreview: false }, "Body content"));
+            root.expanded = false;
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[part="content"]')).not.toBeNull();
+            await new Promise(resolve => setTimeout(resolve, 600));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[part="content"]')).toBeNull();
+        });
+        it('exposes its duration and easing custom properties', async () => {
+            const { root } = await render(h("bs-accordion", null, "Body"));
+            assertCssCustomProperties(root, ['--bs-accordion-duration', '--bs-accordion-easing']);
         });
     });
     describe('controlled expanded prop', () => {

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

@@ -18,6 +18,8 @@
  * @prop --bs-accordion-bg-disabled: Header/content background, disabled. Aliased to --bs-surface-action-disabled.
  * @prop --bs-accordion-text-disabled: Label/content color, disabled. Aliased to --bs-text-on-disabled.
  * @prop --bs-accordion-focus-ring: Focus-visible outer ring color. Aliased to --bs-border-neutral-focus.
+ * @prop --bs-accordion-duration: Expand/collapse and caret rotation length. Aliased to --bs-duration-default.
+ * @prop --bs-accordion-easing: Expand/collapse and caret rotation curve. Aliased to --bs-easing-standard.
  */
 :host {
   display: block;
@@ -41,6 +43,8 @@
   --bs-accordion-bg-disabled: var(--bs-surface-action-disabled);
   --bs-accordion-text-disabled: var(--bs-text-on-disabled);
   --bs-accordion-focus-ring: var(--bs-border-neutral-focus);
+  --bs-accordion-duration: var(--bs-duration-default);
+  --bs-accordion-easing: var(--bs-easing-standard);
 }
 
 .bs-accordion {
@@ -48,6 +52,7 @@
   border-radius: var(--bs-accordion-radius);
   overflow: hidden;
   font-family: inherit;
+  transition: background-color var(--bs-accordion-duration) var(--bs-accordion-easing);
 }
 
 /* Hover/pressed/focus-visible highlight the WHOLE item (header + content together), not just the
@@ -163,6 +168,14 @@
   color: inherit;
 }
 
+.bs-accordion__caret {
+  transition: transform var(--bs-accordion-duration) var(--bs-accordion-easing);
+}
+
+.bs-accordion__caret--open {
+  transform: rotate(180deg);
+}
+
 .bs-accordion__caret svg {
   width: 24px;
   height: 24px;
@@ -179,6 +192,8 @@
 }
 
 .bs-accordion__content {
+  /* border-box so the animated height includes the padding, matching what getBoundingClientRect reads. */
+  box-sizing: border-box;
   padding-top: 0;
   padding-bottom: var(--bs-accordion-content-padding-bottom);
   padding-inline-end: var(--bs-accordion-content-padding-right);

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

@@ -19,8 +19,14 @@ import { h } from "@stencil/core";
  * @part label - The label wrapper.
  * @part caret - The trailing caret wrapper.
  * @part content - The body content wrapper.
+ * @prop --bs-accordion-duration - Length of the expand/collapse motion. Aliased to `--bs-duration-default`.
+ * @prop --bs-accordion-easing - Curve of the expand/collapse motion. Aliased to `--bs-easing-standard`.
+ *
+ * Expanding and collapsing animate the body's height and rotate the caret. Under
+ * `prefers-reduced-motion: reduce` the duration token is `0ms`, so the body snaps.
  */
 export class BsAccordion {
+    el;
     /** Whether the section is expanded. This is the single source of truth for the component's
      * visual state -- a controlled component, like a controlled `<input>`. Clicking (or
      * keyboard-activating) the header never mutates this prop itself; it only emits `bsToggle` with
@@ -45,6 +51,58 @@ export class BsAccordion {
     /** Emitted when the header is activated (click, or Enter/Space while focused), with the
      * REQUESTED new expanded value (`!expanded`). Never fires while `disabled`. */
     bsToggle;
+    /** Keeps the body mounted while it animates closed when `showPreview` is `false`. */
+    closing = false;
+    contentEl;
+    animation;
+    fromHeight = 0;
+    fromPadding = '0px';
+    pendingAnimation = false;
+    /**
+     * Runs before the re-render that follows an `expanded` change, so the body's current height can
+     * be read while it is still in its old state. `componentDidRender` then animates from that height
+     * to the new one. Reading the live height (not a stored one) also makes interrupting a running
+     * animation start from wherever it currently is.
+     */
+    onExpandedChange(expanded) {
+        const content = this.contentEl;
+        this.fromHeight = content ? content.getBoundingClientRect().height : 0;
+        this.fromPadding = content ? getComputedStyle(content).paddingBottom : '0px';
+        this.animation?.cancel();
+        this.pendingAnimation = true;
+        if (!expanded && !this.showPreview)
+            this.closing = true;
+    }
+    componentDidRender() {
+        if (!this.pendingAnimation)
+            return;
+        this.pendingAnimation = false;
+        const content = this.contentEl;
+        const style = getComputedStyle(this.el);
+        const ms = this.toMs(style.getPropertyValue('--bs-accordion-duration'));
+        if (!content || ms === 0) {
+            this.closing = false;
+            return;
+        }
+        const toZero = !this.expanded && !this.showPreview;
+        const toHeight = toZero ? 0 : content.getBoundingClientRect().height;
+        const toPadding = toZero ? '0px' : getComputedStyle(content).paddingBottom;
+        this.animation = content.animate([
+            { height: `${this.fromHeight}px`, paddingBottom: this.fromPadding, overflow: 'hidden' },
+            { height: `${toHeight}px`, paddingBottom: toPadding, overflow: 'hidden' },
+        ], { duration: ms, easing: style.getPropertyValue('--bs-accordion-easing').trim() || 'ease' });
+        this.animation.onfinish = () => {
+            this.closing = false;
+        };
+    }
+    toMs(value) {
+        const v = value.trim();
+        if (v.endsWith('ms'))
+            return parseFloat(v);
+        if (v.endsWith('s'))
+            return parseFloat(v) * 1000;
+        return 0;
+    }
     onActivate = () => {
         if (this.disabled)
             return;
@@ -55,7 +113,7 @@ export class BsAccordion {
         // `<div role="button">`: it gets click, keyboard activation (Enter/Space), focus-visible
         // styling, and `disabled` semantics (not focusable, no events) for free, and flexbox handles
         // laying out its children as easily as a <div>'s -- no layout reason to hand-roll any of that.
-        return (h("div", { key: '2774538f3bc8d52e5a295edafbdad5e2a12dddda', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}` }, h("button", { key: '7e1942dca9082ac653dd7e3d55d9b919790bcd5b', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (h("span", { key: 'abd274cb295ae34e9220846a1e8466623f65663a', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, h("slot", { key: 'd9c4c429852c77f4a10c05eb247a9d3d35559ef6', name: "icon" }, h(PlusIcon, { key: '2fb492c43754a517e4e98b684f811be21777e849' })))), h("span", { key: 'a02484f1a47148493fbc193bc4b9daa8e4c634e7', part: "label", class: `bs-accordion__label ${this.showIcon ? '' : 'bs-accordion__label--no-icon'}` }, h("slot", { key: '8241ccee7233e85c2d69c225c07e67b982674ef7', name: "label" })), h("span", { key: '6e36ee8dbd22ca924f9d8ea8b5c3017c5478f058', part: "caret", class: `bs-accordion__caret bs-accordion__caret--${this.size}`, "aria-hidden": "true" }, this.expanded ? h(CaretUpIcon, null) : h(CaretDownIcon, null))), (this.expanded || this.showPreview) && (h("div", { key: '1e3ad6fe654c633a4094ea9014ef79d82feae2db', part: "content", class: `bs-accordion__content ${this.showIcon ? '' : 'bs-accordion__content--no-icon'} ${this.expanded ? 'bs-accordion__content--expanded' : 'bs-accordion__content--collapsed'}` }, h("slot", { key: '6a60fd12ed4ec7e3b4ab0e56414e0a90c4f5d889' })))));
+        return (h("div", { key: 'b7645b3be5116d906a2aa6e4e680859a9c19323f', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}` }, h("button", { key: 'a1c824c54a529b2214dbb47cb93adea5cdadee84', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (h("span", { key: '5d35f4e2c05704a6bef532919301e765f8195aa7', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, h("slot", { key: '137280692f375379ef43be918094192d6030e2ad', name: "icon" }, h(PlusIcon, { key: '8826de2813774382dcf21e856288ff936eb12425' })))), h("span", { key: '57f370d082a86b7488bf309a114b82077d1f6711', part: "label", class: `bs-accordion__label ${this.showIcon ? '' : 'bs-accordion__label--no-icon'}` }, h("slot", { key: '5563063582ee2e1fb79d02acdc3d0feb5ac07eec', name: "label" })), h("span", { key: '8d8afd4433823aa8122b2ed167fd5ed3c32dc21a', part: "caret", class: `bs-accordion__caret bs-accordion__caret--${this.size} ${this.expanded ? 'bs-accordion__caret--open' : ''}`, "aria-hidden": "true" }, h(CaretDownIcon, { key: '51dfcbdfa5ccff5c3e6a6c2f983fc4d7fb460c18' }))), (this.expanded || this.showPreview || this.closing) && (h("div", { key: '8d62decaf3dc7a98f91eaea1723fc26a8fc520a4', ref: el => (this.contentEl = el), part: "content", class: `bs-accordion__content ${this.showIcon ? '' : 'bs-accordion__content--no-icon'} ${this.expanded ? 'bs-accordion__content--expanded' : 'bs-accordion__content--collapsed'}` }, h("slot", { key: '56493eb5b425134b38ac60f481219a823379626e' })))));
     }
     static get is() { return "bs-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -179,6 +237,11 @@ export class BsAccordion {
             }
         };
     }
+    static get states() {
+        return {
+            "closing": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bsToggle",
@@ -197,7 +260,13 @@ export class BsAccordion {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "expanded",
+                "methodName": "onExpandedChange"
+            }];
+    }
 }
 const PlusIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M12 5V19", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M5 12H19", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
 const CaretDownIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M6 9.75L12 15.75L18 9.75", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
-const CaretUpIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M6 14.25L12 8.25L18 14.25", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-accordion-group/bs-accordion-group.js

@@ -35,7 +35,7 @@ export class BsAccordionGroup {
         }
     }
     render() {
-        return (h("div", { key: '6424b834f6d3b9a06b4cb227bf97850d7b07df97', part: "group", class: "bs-accordion-group" }, h("slot", { key: '9f1e0a012b0b240542f202f0242b09ca50c977c2' })));
+        return (h("div", { key: '56384f2124a0950a70906c7cc581fe084d5ccfd5', part: "group", class: "bs-accordion-group" }, h("slot", { key: '8b6cc577ccd33cb10d7b393cf2acd0b6d0cf11df' })));
     }
     static get is() { return "bs-accordion-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ import { h } from "@stencil/core";
 export class BsAiDisclaimer {
     render() {
         https: //images.unsplash.com/photo-1512917774080-9991f1c4c750?w=200&h=200&fit=crop
-         return (h("div", { key: '40d8b2e77afc19a9e7ef192e2cff44e6589dd693', class: "bs-ai-disclaimer" }, h("p", { key: 'a9702343421808cdbb6e6d9e3a5c6d66e7b43f8a', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: '62950b55efe5c08769790c095c2ed3a082a36201' }))));
+         return (h("div", { key: '42b8ec6acacf3cc88ca6ab26e6799e4cfbde3306', class: "bs-ai-disclaimer" }, h("p", { key: '91208bcb6b163418762194ffea845b8f7ad603ba', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: 'b8062d0ad625601e6766729d94d0111385b29380' }))));
     }
     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: 'b9a60d4da5d2a8bf7564e405c5c8856ef18db3a0', class: "bs-ai-greeting" }, h("div", { key: 'ef9a401361f1c360f78e7de73027b4572054c88f', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '358ee1dceb08dd256283fa2a413c7d9bfae502ec', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: '752c4c2c7824c75a239f82dc5e6f3075b629d654', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: 'b4a78b43e7b0b073b67069e223124e022efe611e', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
+        return (h("div", { key: '1f79a81a945a8035c3e0e8b6ebf7b007bd9c6715', class: "bs-ai-greeting" }, h("div", { key: '069645a7530d7cdbc1fc84f5d5642f42be3a3bf0', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '4e4f8f2a8f8e3dc9e8d8ebfabe50044bacbe80b0', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: 'fab76105a61cc5f005e3d2b055296aff48cb73cd', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: 'b59877f8be280fd6f3384b1320bc4a7f41874a08', 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: '4d30265a3514c027259e7552abc31bbe44b2408c', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: 'a46bdd8751c55e9f06dc7ae5ec88a15e65ba0502', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '970d16be73ab87b7a62efdde4a37a795dfb57b73', part: "label", class: "bs-ai-thinking__label" }, this.label)));
+        return (h("div", { key: '6cde3a4e39f20988a64e8e5e12bded17881e3759', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: '8607373a20a5b2b3710fef1e72ac65255a7a6e67', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '93ddd0850764dc02032f79bef90042f524d37806', 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-app-recent-item/bs-app-recent-item.js

@@ -63,10 +63,10 @@ export class BsAppRecentItem {
             onClick: this.onClick,
         };
         const body = [
-            h("bs-icon-tile", { key: '40dc2e9a479cc0e8bf897776efbb6c9562e59397', part: "icon", class: "bs-app-recent-item__icon", size: "md" }, this.icon ? h("span", { class: "bs-app-recent-item__glyph", style: { '--bs-app-recent-item-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
-            h("span", { key: 'e41fab5b55dd1c678853adbdc759d256d2d7e295', class: "bs-app-recent-item__text" }, h("span", { key: '0592bd9f18ab68d112a49421e34a04a61dbfc75c', part: "name", class: "bs-app-recent-item__name" }, this.name), this.description && (h("span", { key: 'fd6f0cc5b13b4c1fabb537588a22e23312f8d013', part: "description", class: "bs-app-recent-item__description" }, this.description))),
+            h("bs-icon-tile", { key: 'dba9c2186088e32388156d6cba1fb2d4bb63909a', part: "icon", class: "bs-app-recent-item__icon", size: "md" }, this.icon ? h("span", { class: "bs-app-recent-item__glyph", style: { '--bs-app-recent-item-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
+            h("span", { key: '1c5c4e8cee96487647c89f688b8ec34ca8f46ff6', class: "bs-app-recent-item__text" }, h("span", { key: '49477af6347c0852d60990053c45e81a8a9ad5a5', part: "name", class: "bs-app-recent-item__name" }, this.name), this.description && (h("span", { key: 'be09443548bdb0740e9374572e85a272b6c2ee46', part: "description", class: "bs-app-recent-item__description" }, this.description))),
         ];
-        return (h("button", { key: '251c32943d99ff2580c16df173609b821dd1992d', ...common, type: "button" }, body));
+        return (h("button", { key: 'a705988cedb88540ad48acc4f15387e468499968', ...common, type: "button" }, body));
     }
     static get is() { return "bs-app-recent-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-app-shell/bs-app-shell.js

@@ -38,7 +38,7 @@ export class BsAppShell {
     /** When true the host is `height: 100%`; when false it is content-sized with `min-height: 100vh`. */
     fullHeight = true;
     render() {
-        return (h("div", { key: 'e81aecf9ac19aff77ce4f6024bb48d051a9240a7', class: "bs-app-shell", part: "container" }, h("div", { key: '3bd113852f0db029d2515d9fe88292746e85764f', class: "bs-app-shell__header", part: "header" }, h("slot", { key: 'a538e654c63deb0bc3ad6075fc85ecde683e7587', name: "header" })), h("div", { key: '3b36be978c2db51d44fa807799e96aadc082fb77', class: "bs-app-shell__navigation", part: "navigation" }, h("slot", { key: 'eb74b091c1810fd6f981b3d1b553a17f01d9d3fc', name: "navigation" })), h("main", { key: 'f822e4277e77ec40d66e9ae49cf4bbf812c49ff3', class: "bs-app-shell__main", part: "main" }, h("slot", { key: '5fc343fcbfb1ed1e058ce27ca7be2d518b911927' })), h("div", { key: 'cee504b33b4cb5b4c38d3c4e61da8f31277fb865', class: "bs-app-shell__aside", part: "aside" }, h("slot", { key: '1c7cb896f2b9ef2b7aeccc5ed0b14c9c1317218c', name: "aside" }))));
+        return (h("div", { key: '413d1ca357dc8f965c2c126ea8cc923d533678b4', class: "bs-app-shell", part: "container" }, h("div", { key: 'e03fcf75e89168ab64f2abf068ce5f764bedd793', class: "bs-app-shell__header", part: "header" }, h("slot", { key: 'cec39829282c89b37bd1c08ac50f9740ae4e2800', name: "header" })), h("div", { key: 'e10cbea46eb0bc25f55201990ee412123111878e', class: "bs-app-shell__navigation", part: "navigation" }, h("slot", { key: '8d4b764e76e7e96ac0605886fc40b1b2edd5703c', name: "navigation" })), h("main", { key: 'c89a3db0a2c160bc397d5fa6ffab9ef8ab88f99e', class: "bs-app-shell__main", part: "main" }, h("slot", { key: '0a6250177f2a20b7fe4c1edd667afe1e5803658f' })), h("div", { key: '1a8d637f15be869915b815903c2a590e8504c057', class: "bs-app-shell__aside", part: "aside" }, h("slot", { key: 'c6e13833e120dca04961105d8c083072f035d5ff', name: "aside" }))));
     }
     static get is() { return "bs-app-shell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-app-switcher/bs-app-switcher.js

@@ -235,7 +235,7 @@ export class BsAppSwitcher {
     }
     render() {
         const headingId = `${this.id}-heading`;
-        return (h("bs-card", { key: 'eca37058ac18a9a7faa40caa37aa2291503753c2', part: "panel", class: "bs-app-switcher", surface: "base", role: "region", "aria-labelledby": headingId }, h("div", { key: 'bd0ec6ec6d065d09a6854cd7f93314963d94fcb5', part: "header", class: "bs-app-switcher__header" }, h("h2", { key: '8aa69807c51467c75627e20cad79caad6b42505d', part: "heading", id: headingId, class: "bs-app-switcher__heading" }, this.heading), this.renderLink('manage', 'bs-app-switcher__manage', this.manageHref, this.manageLabel, () => this.bsManage.emit())), h("bs-divider", { key: '1cb1791cf9ab0eb09b772bcb53bb42cf8457c882', decorative: true }), this.renderBody(), h("bs-divider", { key: 'cf069a35387e0c5263f391278b962a464835414b', decorative: true }), h("div", { key: '16764053a5b74e6afb90bf29e27cc76e107c8e4a', part: "footer", class: "bs-app-switcher__footer" }, this.renderLink('browse', 'bs-app-switcher__browse', this.browseHref, this.browseLabel, () => this.bsBrowseAll.emit(), h("svg", { class: "bs-app-switcher__external", ...svgProps }, h("path", { d: "M7 17 17 7M8 7h9v9" })))), h("span", { key: '943b9d2acca5e67fa8ff481bcf381c3bf9842641', class: "bs-app-switcher__live", role: "status" }, this.liveText())));
+        return (h("bs-card", { key: '8257b65b618a40aa48c5e4e6ea464cd0e730b822', part: "panel", class: "bs-app-switcher", surface: "base", role: "region", "aria-labelledby": headingId }, h("div", { key: '99756a738b6954a8f6d6b4dae25115d9ba132be2', part: "header", class: "bs-app-switcher__header" }, h("h2", { key: '61ac20db2636acdf82c495e4aa1afaad047e5241', part: "heading", id: headingId, class: "bs-app-switcher__heading" }, this.heading), this.renderLink('manage', 'bs-app-switcher__manage', this.manageHref, this.manageLabel, () => this.bsManage.emit())), h("bs-divider", { key: 'f68ea80899a97f097dd26a4d4ff311a0c958c7a9', decorative: true }), this.renderBody(), h("bs-divider", { key: '05db5ca0047deb646a0b0bf68afec0663e7b132f', decorative: true }), h("div", { key: 'b32e86a8ba520756bce064384502f4ce71ada4ba', part: "footer", class: "bs-app-switcher__footer" }, this.renderLink('browse', 'bs-app-switcher__browse', this.browseHref, this.browseLabel, () => this.bsBrowseAll.emit(), h("svg", { class: "bs-app-switcher__external", ...svgProps }, h("path", { d: "M7 17 17 7M8 7h9v9" })))), h("span", { key: '1de45b23ef4e79e1b7af1f438304260f264e0489', class: "bs-app-switcher__live", role: "status" }, this.liveText())));
     }
     static get is() { return "bs-app-switcher"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-app-tile/bs-app-tile.js

@@ -62,10 +62,10 @@ export class BsAppTile {
             onClick: this.onClick,
         };
         const body = [
-            h("bs-icon-tile", { key: '712e5209c8201201fd6e61ced1f6f53aeebe0a6c', part: "icon", class: "bs-app-tile__icon", size: this.size === 'grid' ? 'lg' : 'md' }, this.icon ? h("span", { class: "bs-app-tile__glyph", style: { '--bs-app-tile-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
-            h("span", { key: '65eca3956b52fd13a3d3994f189dbc4a56fdc0ba', part: "label", class: "bs-app-tile__label" }, this.name),
+            h("bs-icon-tile", { key: '6404044d9a208e22f557cb71fbfdfc91c78b3b0c', part: "icon", class: "bs-app-tile__icon", size: this.size === 'grid' ? 'lg' : 'md' }, this.icon ? h("span", { class: "bs-app-tile__glyph", style: { '--bs-app-tile-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
+            h("span", { key: '0bb976f0b075ad63f52cd9f07fe541bc826a69cd', part: "label", class: "bs-app-tile__label" }, this.name),
         ];
-        return (h("button", { key: 'ff6a0f97191dadd903f8b49bc4090e4665a0b591', ...common, type: "button" }, body));
+        return (h("button", { key: 'c6dc2a317c93fd4fa2c39a42d6c194e1345c4720', ...common, type: "button" }, body));
     }
     static get is() { return "bs-app-tile"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,4 +38,14 @@ describe('bs-attachment', () => {
         const { root } = await render(h("bs-attachment", { removable: false }));
         expect(root.shadowRoot.querySelector('[part="remove"]')).toBeNull();
     });
+    it('places the VISIBLE dismiss button 12px from the thumbnail top and right edge', async () => {
+        const { root } = await render(h("bs-attachment", { "image-src": "data:image/gif;base64,R0lGODlhAQABAAAAACw=", "image-alt": "x", "file-name": "a.png", removable: true, style: { display: 'block', width: '200px' } }));
+        const host = root.shadowRoot.querySelector('.bs-attachment');
+        const ib = root.shadowRoot.querySelector('[part="remove"]');
+        const a = host.getBoundingClientRect();
+        const b = ib.shadowRoot.querySelector('button').getBoundingClientRect();
+        expect(b.width).toBe(16);
+        expect(b.top - a.top).toBe(12);
+        expect(a.right - b.right).toBe(12);
+    });
 });

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

@@ -102,12 +102,12 @@
 
 .bs-attachment__remove {
   position: absolute;
-  /* 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);
-  inset-inline-end: var(--bs-spacing-100);
+  /* Design review (#50): the VISIBLE 16px button sits 12px (spacing-150) from the thumbnail's top and
+     right edges (this supersedes the earlier 8px Figma reading). display:flex removes the inline
+     line-box strut that otherwise pushed the button ~3px lower than the right inset. */
+  display: flex;
+  top: var(--bs-spacing-150);
+  inset-inline-end: var(--bs-spacing-150);
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--bs-duration-fast) var(--bs-easing-standard);

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

@@ -54,7 +54,7 @@ export class BsAttachment {
     };
     render() {
         const isImage = this.type === 'image';
-        return (h("div", { key: '1b70040e8fc2199fed52e81d97701199ed060900', 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: '7fcb8dcc715c2439ce62219e693fc416025b1359', part: "remove", class: "bs-attachment__remove", size: "xs", variant: "neutral", ariaLabel: `${this.removeLabel}: ${this.fileName}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: 'c9fc3e64c2b1ef2e9ec4c3d5dcb20aebea4950e4' })))));
+        return (h("div", { key: '397e7570d4765a1e4dfb410666c0fb0b78c06686', 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: '738b5e3dbf1e2b0856bb20dc5eb3027d1cd87ef5', part: "remove", class: "bs-attachment__remove", size: "xs", variant: "neutral", ariaLabel: `${this.removeLabel}: ${this.fileName}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: 'd21c9d3832f170c5af2d01e2d76b83be3acd3da7' })))));
     }
     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, label: this.uploadingLabel })));

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: '437edaeda096e7ba3617040279b8eb5c79c6aa33', class: "bs-attachment-list" }, h("div", { key: 'a09ccfec9b8f9fe3d08e0d6a13d190307fe6bf69', 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: 'c64a44ba2710dac5d8cb3ff80ee519354dfd44af', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: 'da532064127af89debc42d5c3af870e35aa3fed0', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
+        return (h("div", { key: 'ff420857d6be7d6db3643759dfd328edc473f8b0', class: "bs-attachment-list" }, h("div", { key: '3c62c72f7d4a7477baa07eb4b3d358f23729395e', 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: '4b510eca2db2a3fdf4992fdcf1c5fe95d4089aad', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: 'fcb930e61971ed1225b9da2706e8ad66c9db2628', 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

@@ -9,7 +9,10 @@ describe('bs-avatar', () => {
     });
     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();
+        const icon = root.shadowRoot.querySelector('[part="icon"]');
+        expect(icon).not.toBeNull();
+        expect(icon.tagName.toLowerCase()).toBe('bs-icon');
+        expect(icon).toEqualAttribute('name', 'user');
         expect(root.shadowRoot.querySelector('[part="initials"]')).toBeNull();
         expect(root.shadowRoot.querySelector('[part="image"]')).toBeNull();
     });
@@ -51,4 +54,11 @@ describe('bs-avatar', () => {
         const { root } = await render(h("bs-avatar", { disabled: true }));
         expect(root.hasAttribute('disabled')).toBe(true);
     });
+    it('scales the fallback icon to 60% of each avatar size', async () => {
+        for (const [size, px] of [['xs', 24], ['md', 44], ['xxl', 128]]) {
+            const { root } = await render(h("bs-avatar", { size: size }));
+            const icon = root.shadowRoot.querySelector('[part="icon"]');
+            expect(Math.round(icon.getBoundingClientRect().width)).toBe(Math.round(px * 0.6));
+        }
+    });
 });

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

@@ -81,31 +81,37 @@
 .bs-avatar--xs {
   width: var(--bs-avatar-size-xs);
   height: var(--bs-avatar-size-xs);
+  --bs-avatar-icon-size: calc(var(--bs-avatar-size-xs) * 0.6);
 }
 
 .bs-avatar--sm {
   width: var(--bs-avatar-size-sm);
   height: var(--bs-avatar-size-sm);
+  --bs-avatar-icon-size: calc(var(--bs-avatar-size-sm) * 0.6);
 }
 
 .bs-avatar--md {
   width: var(--bs-avatar-size-md);
   height: var(--bs-avatar-size-md);
+  --bs-avatar-icon-size: calc(var(--bs-avatar-size-md) * 0.6);
 }
 
 .bs-avatar--lg {
   width: var(--bs-avatar-size-lg);
   height: var(--bs-avatar-size-lg);
+  --bs-avatar-icon-size: calc(var(--bs-avatar-size-lg) * 0.6);
 }
 
 .bs-avatar--xl {
   width: var(--bs-avatar-size-xl);
   height: var(--bs-avatar-size-xl);
+  --bs-avatar-icon-size: calc(var(--bs-avatar-size-xl) * 0.6);
 }
 
 .bs-avatar--xxl {
   width: var(--bs-avatar-size-xxl);
   height: var(--bs-avatar-size-xxl);
+  --bs-avatar-icon-size: calc(var(--bs-avatar-size-xxl) * 0.6);
   border-width: var(--bs-avatar-border-width-xxl);
 }
 
@@ -117,11 +123,10 @@
   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. */
+/* type="icon" -- Phosphor `user` via bs-icon (tone="inherit" = currentColor). Its size is 60% of the
+   avatar, set per size above through --bs-avatar-icon-size. */
 .bs-avatar__icon {
-  width: 60%;
-  height: 60%;
+  --bs-icon-size: var(--bs-avatar-icon-size);
   color: var(--bs-avatar-icon-primary);
 }