@brandsync/wc 1.3.0 → 1.5.0

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

@@ -0,0 +1,174 @@
+/**
+ * @prop --bs-accordion-radius: Corner radius of the whole component. Aliased to --bs-border-radius-100.
+ * @prop --bs-accordion-header-padding-y-medium: Header vertical padding, size="medium". Aliased to --bs-spacing-150.
+ * @prop --bs-accordion-header-padding-y-large: Header vertical padding, size="large". Aliased to --bs-spacing-250.
+ * @prop --bs-accordion-header-padding-x: Header horizontal padding (both edges, Icon=Yes). Aliased to --bs-spacing-200.
+ * @prop --bs-accordion-content-padding-bottom: Body content bottom padding. Aliased to --bs-spacing-150.
+ * @prop --bs-accordion-content-padding-right: Body content right padding. Aliased to --bs-spacing-200.
+ * @prop --bs-accordion-content-padding-left: Body content left padding, Icon=Yes (aligns under the label, past the icon box). Aliased to --bs-spacing-800.
+ * @prop --bs-accordion-content-padding-left-no-icon: Body content left padding, Icon=No. Aliased to --bs-spacing-200.
+ * @prop --bs-accordion-icon-width-medium: Leading icon box width, size="medium". Aliased to --bs-spacing-800.
+ * @prop --bs-accordion-icon-height-medium: Leading icon box height, size="medium". Not square -- 48px, no 150-scale token matches exactly so this is set directly in px, matching Figma's own spec.
+ * @prop --bs-accordion-icon-size-large: Leading icon box width/height, size="large" (square). Aliased to --bs-spacing-800.
+ * @prop --bs-accordion-font-size: Label font size. Aliased to --bs-font-size-md.
+ * @prop --bs-accordion-line-height: Label line height. Aliased to --bs-line-height-body-md.
+ * @prop --bs-accordion-font-weight: Label font weight. Aliased to --bs-font-weight-semibold.
+ * @prop --bs-accordion-text-default: Label/content color, enabled. Aliased to --bs-text-default.
+ * @prop --bs-accordion-bg-hover: Header background, hover/active/focus-visible (Figma renders hover and pressed identically). Aliased to --bs-surface-hover.
+ * @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.
+ */
+:host {
+  display: block;
+
+  --bs-accordion-radius: var(--bs-border-radius-100);
+  --bs-accordion-header-padding-y-medium: var(--bs-spacing-150);
+  --bs-accordion-header-padding-y-large: var(--bs-spacing-250);
+  --bs-accordion-header-padding-x: var(--bs-spacing-200);
+  --bs-accordion-content-padding-bottom: var(--bs-spacing-150);
+  --bs-accordion-content-padding-right: var(--bs-spacing-200);
+  --bs-accordion-content-padding-left: var(--bs-spacing-800);
+  --bs-accordion-content-padding-left-no-icon: var(--bs-spacing-200);
+  --bs-accordion-icon-width-medium: var(--bs-spacing-800);
+  --bs-accordion-icon-height-medium: 48px;
+  --bs-accordion-icon-size-large: var(--bs-spacing-800);
+  --bs-accordion-font-size: var(--bs-font-size-md);
+  --bs-accordion-line-height: var(--bs-line-height-body-md);
+  --bs-accordion-font-weight: var(--bs-font-weight-semibold);
+  --bs-accordion-text-default: var(--bs-text-default);
+  --bs-accordion-bg-hover: var(--bs-surface-hover);
+  --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 {
+  display: block;
+  border-radius: var(--bs-accordion-radius);
+  overflow: hidden;
+  font-family: inherit;
+}
+
+.bs-accordion__header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: var(--bs-accordion-text-default);
+  padding: 0 var(--bs-accordion-header-padding-x);
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+  border-radius: var(--bs-accordion-radius);
+}
+
+.bs-accordion__header--medium {
+  padding-top: var(--bs-accordion-header-padding-y-medium);
+  padding-bottom: var(--bs-accordion-header-padding-y-medium);
+}
+
+.bs-accordion__header--large {
+  padding-top: var(--bs-accordion-header-padding-y-large);
+  padding-bottom: var(--bs-accordion-header-padding-y-large);
+}
+
+/* Icon=No: no icon box reserving space on the left -- the label gets the symmetric padding
+   directly, confirmed against Figma's Icon=No variant. */
+.bs-accordion__header--no-icon {
+  padding-left: var(--bs-accordion-header-padding-x);
+}
+
+.bs-accordion__header:hover,
+.bs-accordion__header:active {
+  background: var(--bs-accordion-bg-hover);
+}
+
+.bs-accordion__header:focus-visible {
+  background: var(--bs-accordion-bg-hover);
+  outline: 2px solid var(--bs-accordion-focus-ring);
+  outline-offset: -2px;
+  /* Ring radius = component radius + 2px, so the ring visually hugs the component's own rounded
+     corners instead of looking squared-off relative to them. */
+  border-radius: calc(var(--bs-accordion-radius) + 2px);
+}
+
+.bs-accordion__header:disabled {
+  background: var(--bs-accordion-bg-disabled);
+  color: var(--bs-accordion-text-disabled);
+  cursor: default;
+}
+
+.bs-accordion__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.bs-accordion__icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-accordion__icon--medium {
+  width: var(--bs-accordion-icon-width-medium);
+  height: var(--bs-accordion-icon-height-medium);
+}
+
+.bs-accordion__icon--large {
+  width: var(--bs-accordion-icon-size-large);
+  height: var(--bs-accordion-icon-size-large);
+}
+
+.bs-accordion__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--bs-accordion-font-size);
+  line-height: calc(var(--bs-accordion-line-height) * 1px);
+  font-weight: var(--bs-accordion-font-weight);
+}
+
+.bs-accordion__caret {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.bs-accordion__caret svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-accordion__content {
+  padding-top: 0;
+  padding-bottom: var(--bs-accordion-content-padding-bottom);
+  padding-right: var(--bs-accordion-content-padding-right);
+  padding-left: var(--bs-accordion-content-padding-left);
+  color: var(--bs-accordion-text-default);
+  font-size: var(--bs-accordion-font-size);
+  line-height: calc(var(--bs-accordion-line-height) * 1px);
+}
+
+.bs-accordion__content--no-icon {
+  padding-left: var(--bs-accordion-content-padding-left-no-icon);
+}
+
+/* Collapsed + showPreview: pure CSS truncation of the SAME slotted content to a single line --
+   not different content. */
+.bs-accordion__content--collapsed {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bs-accordion--disabled .bs-accordion__content {
+  background: var(--bs-accordion-bg-disabled);
+  color: var(--bs-accordion-text-disabled);
+}

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

@@ -0,0 +1,203 @@
+import { h } from "@stencil/core";
+/**
+ * A single collapsible section -- a clickable header (optional leading icon, label, trailing
+ * caret) that reveals or hides a body content area.
+ *
+ * This component renders exactly one section. A consumer stacks multiple `bs-accordion` elements
+ * (optionally managing which one(s) are expanded, e.g. "only one open at a time") themselves --
+ * there's no accordion-group wrapper here, matching Figma's component which only specs the single
+ * section, not a group behavior.
+ *
+ * @slot - Default slot: the body/content area, shown below the header when expanded (and, unless
+ * `showPreview` is `false`, truncated to one line when collapsed).
+ * @slot label - The header's title text.
+ * @slot icon - Optional leading icon, overriding the default Plus glyph. Only rendered when
+ * `showIcon` is `true`.
+ * @part container - The outer wrapper.
+ * @part header - The clickable header row.
+ * @part icon - The leading icon wrapper.
+ * @part label - The label wrapper.
+ * @part caret - The trailing caret wrapper.
+ * @part content - The body content wrapper.
+ */
+export class BsAccordion {
+    /** 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
+     * the requested new value. If the consumer doesn't echo the change back via this prop (e.g.
+     * some validation rejects it), the rendering stays exactly as `expanded` says, rather than
+     * drifting into an internally-tracked truth -- same lesson as bs-chip-filter's `selected` prop.
+     * Reflected so consumers can target `bs-accordion[expanded]` via CSS. NOT `mutable: true`. */
+    expanded = false;
+    /** Sizing scale. Controls the leading icon box's dimensions and the header's vertical padding --
+     * the body content area's padding stays constant across sizes, matching the Figma spec. */
+    size = 'medium';
+    /** Disables the header: suppresses hover/focus/pressed styling, prevents toggling via click or
+     * keyboard, and removes it from the tab order. */
+    disabled = false;
+    /** Shows the leading icon area (default Plus glyph, or the `icon` slot's content). When
+     * `false`, no icon box is reserved and the header/body padding tighten to the left edge. */
+    showIcon = true;
+    /** When collapsed, renders the body content truncated to a single line (pure CSS truncation of
+     * the same slotted content, not different content) instead of rendering nothing. Has no effect
+     * while expanded -- the full content always renders then, regardless of this prop. */
+    showPreview = true;
+    /** Emitted when the header is activated (click, or Enter/Space while focused), with the
+     * REQUESTED new expanded value (`!expanded`). Never fires while `disabled`. */
+    bsToggle;
+    onActivate = () => {
+        if (this.disabled)
+            return;
+        this.bsToggle.emit(!this.expanded);
+    };
+    render() {
+        // A native <button> wraps the whole header row (icon + label + caret) rather than a
+        // `<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: '0b0c7d891e30aa3d45f70d7ff1c79e93ae0dfd6c', part: "label", class: "bs-accordion__label" }, h("slot", { key: '21cc50e1f368663dc1a980c9dd96522265c8c433', name: "label" })), h("span", { key: 'b9506bf3fa94a5ad05083b5cda4eafa29de0369f', part: "caret", class: "bs-accordion__caret", "aria-hidden": "true" }, this.expanded ? h(CaretUpIcon, null) : h(CaretDownIcon, null))), (this.expanded || this.showPreview) && (h("div", { key: '36db0dc0bdf61286d61136be6c3d4292e64e9a51', 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: '51747175592ba93a1e41d4cf98f9e1bf1630d847' })))));
+    }
+    static get is() { return "bs-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-accordion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "expanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the section is expanded. This is the single source of truth for the component's\nvisual state -- a controlled component, like a controlled `<input>`. Clicking (or\nkeyboard-activating) the header never mutates this prop itself; it only emits `bsToggle` with\nthe requested new value. If the consumer doesn't echo the change back via this prop (e.g.\nsome validation rejects it), the rendering stays exactly as `expanded` says, rather than\ndrifting into an internally-tracked truth -- same lesson as bs-chip-filter's `selected` prop.\nReflected so consumers can target `bs-accordion[expanded]` via CSS. NOT `mutable: true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsAccordionSize",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {
+                        "BsAccordionSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-accordion/bs-accordion.tsx",
+                            "id": "src/components/bs-accordion/bs-accordion.tsx::BsAccordionSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale. Controls the leading icon box's dimensions and the header's vertical padding --\nthe body content area's padding stays constant across sizes, matching the Figma spec."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the header: suppresses hover/focus/pressed styling, prevents toggling via click or\nkeyboard, and removes it from the tab order."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the leading icon area (default Plus glyph, or the `icon` slot's content). When\n`false`, no icon box is reserved and the header/body padding tighten to the left edge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon",
+                "defaultValue": "true"
+            },
+            "showPreview": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When collapsed, renders the body content truncated to a single line (pure CSS truncation of\nthe same slotted content, not different content) instead of rendering nothing. Has no effect\nwhile expanded -- the full content always renders then, regardless of this prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-preview",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsToggle",
+                "name": "bsToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the header is activated (click, or Enter/Space while focused), with the\nREQUESTED new expanded value (`!expanded`). Never fires while `disabled`."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+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/bs-accordion.stories.js

@@ -0,0 +1,63 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const sizes = ['medium', 'large'];
+// Demonstrates a real consumer echoing the change back -- the component itself never mutates
+// `expanded` (see the class JSDoc: it's a controlled prop). Without this, clicking the header
+// would visibly do nothing in the story even though `bsToggle` did fire.
+const echoToggle = (ev) => {
+    ev.currentTarget.toggleAttribute('expanded', ev.detail);
+};
+const meta = {
+    title: 'Components/bs-accordion',
+    parameters: { docs: { description: { component: componentDescription('bs-accordion') } } },
+    render: args => html `
+    <bs-accordion
+      ?expanded=${args.expanded}
+      size=${args.size}
+      ?disabled=${args.disabled}
+      ?show-icon=${args.showIcon}
+      ?show-preview=${args.showPreview}
+      @bsToggle=${echoToggle}
+    >
+      <span slot="label">${args.label}</span>
+      ${args.content}
+    </bs-accordion>
+  `,
+    argTypes: {
+        expanded: { control: 'boolean', description: propDescription('bs-accordion', 'expanded') },
+        size: { control: { type: 'select' }, options: sizes, description: propDescription('bs-accordion', 'size') },
+        disabled: { control: 'boolean', description: propDescription('bs-accordion', 'disabled') },
+        showIcon: { control: 'boolean', description: propDescription('bs-accordion', 'show-icon') },
+        showPreview: { control: 'boolean', description: propDescription('bs-accordion', 'show-preview') },
+        label: { control: 'text', description: 'Slotted header title (not a real attribute -- see the `label` slot).' },
+        content: { control: 'text', description: 'Slotted body content (not a real attribute -- see the default slot).' },
+    },
+    args: {
+        expanded: false,
+        size: 'medium',
+        disabled: false,
+        showIcon: true,
+        showPreview: true,
+        label: 'Section title',
+        content: 'This is the body content shown when the section is expanded, or truncated to one line as a preview while collapsed.',
+    },
+};
+export default meta;
+export const Default = {};
+export const Expanded = {
+    args: { expanded: true },
+};
+export const Large = {
+    args: { size: 'large' },
+};
+export const NoIcon = {
+    name: 'No icon',
+    args: { showIcon: false },
+};
+export const NoPreview = {
+    name: 'No preview',
+    args: { showPreview: false },
+};
+export const Disabled = {
+    args: { disabled: true },
+};

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: '4f97fed2aa1612c2c93d03696c9fa8f33fc2c380', class: "bs-ai-disclaimer" }, h("p", { key: 'efcb8ec3df0edfe94d34b0fdd780b2b8a385bad2', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: 'c2ca831b256929422fbf5f2ce053c827405302e4' }))));
+         return (h("div", { key: 'b79f8540dbf4563a831fa687f55710f5e5a55037', class: "bs-ai-disclaimer" }, h("p", { key: '82f3cc3744e1012201953eaa0b73a0ac5dc4bcd4', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: 'f4413eaf53353f3635ae6ec1e2a4af263e0bf67f' }))));
     }
     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: '7d6dd7d98e9b3516e2aff3abe671a15ae1e32ec2', class: "bs-ai-greeting" }, h("div", { key: 'e7a11b044039367fcde413cd9632ed0c6c9a37f4', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '50573beb3d35965a6e58c1454630991911f099bb', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: '238ee90e74c49a3714baf36083f88654f0e27fe7', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: 'dbed3603ab646f0d5dc88a845d944089d1d2b134', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
+        return (h("div", { key: 'eeb2acbb2c6aa8daa803dab57c343b35995200b3', class: "bs-ai-greeting" }, h("div", { key: 'ece228ba66ee9b783a768258a5c52c1270297962', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: 'f316e250f35b05dda813f5b517f42373eebcde45', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: '99ac26f89ec8fb3fba000025975c95920faca41a', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: '3326155e697a1dd0d0512574d0405f5e176d3967', 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: '3098d1bcfbba354869496949c32b7029ef6bd3a0', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: '84f044cbacd3688152f9de7286e5aff9554c8e91', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: 'a66438fb6f75d993b5930c8ba1c1061ade66c74d', part: "label", class: "bs-ai-thinking__label" }, this.label)));
+        return (h("div", { key: '29dcf35868288138ffdd7e1a59ecd48396b45ce7', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: 'ca7354850cc25b2c55b2901f7d34ce216fe79d76', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '888e38812266e053a58ad91932d4a7df804e52da', 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.js

@@ -50,7 +50,7 @@ export class BsAttachment {
     };
     render() {
         const isImage = this.type === 'image';
-        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' })))));
+        return (h("div", { key: '824fb2e4d386156dbf23a58118c82fe02bb37f81', 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: 'f7665d54bd9c14185c53cff66ff3fc913358f865', part: "remove", class: "bs-attachment__remove", size: "xs", variant: "neutral", ariaLabel: `Remove attachment: ${this.fileName}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: '508cb34b696b733bbc78e84af32072439c2d1665' })))));
     }
     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: 'f0ae8f5ebc9949e9c5b799f4567b9e562bf7691a', class: "bs-attachment-list" }, h("div", { key: 'b0e4b97c9eefa51fb9eed6cf670ecda4587384b8', 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: '176636c8e97cfd174204d6e74d1daaa743af5b2c', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: '0254f23dc3571e7e3470b9ffdbbf2d5b10f8dce3', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
+        return (h("div", { key: '5508a6c6185bf836d4b30e7341f29f80ba06f2c3', class: "bs-attachment-list" }, h("div", { key: 'c8652402e683f80aee373adad7ad41590dd7fbaf', 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: 'fb838b763b7047419d072c2c9f2cbe81046041e4', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: 'faaf4be7542539a32675fb2046b26840e539d509', 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-badge/bs-badge.js

@@ -17,7 +17,7 @@ export class BsBadge {
     /** Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets. */
     variant = 'default';
     render() {
-        return (h("span", { key: '33a4103fad2c535c1eeb787a4ba8e7633ef92082', part: "container", class: `bs-badge bs-badge--${this.variant}` }, h("slot", { key: '68c95c6e9dd8a90fbec5853f7274f5ff2859faa3' })));
+        return (h("span", { key: '91c12085eda1d9599e50542a273bab640e7f348f', part: "container", class: `bs-badge bs-badge--${this.variant}` }, h("slot", { key: '21f0edd06967e4f608cc16f27c52d3eec0794eb0' })));
     }
     static get is() { return "bs-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,7 +43,7 @@ export class BsBreadcrumb {
      * off-brand. Reflected so consumers/CSS can target `bs-breadcrumb[size="sm"]`. */
     size = 'md';
     render() {
-        return (h(Host, { key: '631ab305f75d905c7e54facdc55348b84095530d', role: "listitem" }, h("span", { key: 'a84c1b0b123d5e930c27fc5a10e0bde66003e99b', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '540d161da72801edb9d308c2023da7dd76042912' })), this.current ? (h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, h("slot", null))) : this.href ? (h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href }, h("slot", null))) : (h("span", { part: "link", class: "bs-breadcrumb__link" }, h("slot", null)))));
+        return (h(Host, { key: 'f9c93eed4d4844e03cdfc50c9efbee238c188257', role: "listitem" }, h("span", { key: 'e0f26700582662cd4269bd786a9c81fd8031716e', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '77e8ed02ffd367e9b7ca39869ab41a95759450e4' })), this.current ? (h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, h("slot", null))) : this.href ? (h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href }, h("slot", null))) : (h("span", { part: "link", class: "bs-breadcrumb__link" }, h("slot", null)))));
     }
     static get is() { return "bs-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,7 +77,7 @@ export class BsBreadcrumbOverflow {
         }
     }
     render() {
-        return (h(Host, { key: 'a688f0759da177fa76c44694f2c55966e08f609d', role: "listitem" }, h("span", { key: '9c40bec2a10521160ee99889e083b0131d26020c', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '936d785bfcfd6b4f857bff8471ab92a292503208' })), h("span", { key: '2cc66274a1b0d58a1532d53784eeeef2dd94586e', class: "bs-breadcrumb-overflow__wrapper" }, h("button", { key: 'ffcd37213c27ae6286a8b258b58ad1197e9bee3e', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, h(DotsThreeIcon, { key: '381db917ca9bd23b794e7bf57364a7743e60da26' })), this.open && this.items.length > 0 && (h("bs-menu", { key: 'f41bd68b27971f7dcb3ab1f5af82dc7ed8373a6c', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href }, item.label)) : (h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
+        return (h(Host, { key: '6219cabef08760aa3940d9a4e12d6e5ecd21e407', role: "listitem" }, h("span", { key: '59261696d02c49b1ea81b29d822d6d42c4fbafd5', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '62921ade525de21d7e74e732e0736c345fef87b7' })), h("span", { key: '0a8e9a9dc472ab9d1b63bdd497ceda12e04a736a', class: "bs-breadcrumb-overflow__wrapper" }, h("button", { key: '6930b4b341ee5b810eae5ffe32e33022402a01d3', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, h(DotsThreeIcon, { key: 'c9cf273fa51bac2bf11953d294184be641a47a9f' })), this.open && this.items.length > 0 && (h("bs-menu", { key: '1a1948a75569ad7639131d2982c8ebdf28027f85', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href }, item.label)) : (h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
     }
     static get is() { return "bs-breadcrumb-overflow"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@ export class BsBreadcrumbs {
         });
     }
     render() {
-        return (h("nav", { key: '1d2a884ed591fec3dd164c8bdf2a3050187f2fac', "aria-label": this.label }, h("ol", { key: '1b839b42f72a06a739733ca3a75303c0454f3a97', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: '58c829377cf81e2a429d103a7f372d2d5dadf8a5', onSlotchange: this.onSlotChange }))));
+        return (h("nav", { key: '5ff4734b3de9444f7347443acdc0dcea94bb43a1', "aria-label": this.label }, h("ol", { key: '0aebf74594c40b9268576cf1ccdb872dc3866ab3', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: '998f3aeb715ef1fdf4e602cb50e612f9125832af', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "bs-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,8 +46,17 @@
      step family, matching --bs-button-neutral-container (--bs-color-neutral-container) itself. */
   --bs-button-neutral-hover: var(--bs-color-neutral-container-hover);
   --bs-button-neutral-pressed: var(--bs-color-neutral-container-pressed);
-  --bs-button-outlined-border: var(--bs-border-primary);
-  --bs-button-outlined-border-hover: var(--bs-border-primary-hover);
+  /* Verified against Figma node 2842:50233/50230/50227/50224 (Style=Outline, States=Enabled/
+     Hovered/Focused/Pressed): border/text colors step through brand-600 -> 700 -> 800 across
+     enabled -> hover -> pressed, NOT a single "hover" color reused for both hover and pressed
+     (that was this variant's previous bug -- hover and pressed were indistinguishable, and
+     neither matched the enabled color Figma actually specifies). Text color matches
+     --bs-text-action-hover (brand-700) on BOTH hover and pressed per the spec -- pressed does NOT
+     get its own darker text color, only the border does. */
+  --bs-button-outlined-border: var(--bs-color-primary-default);
+  --bs-button-outlined-border-hover: var(--bs-color-primary-hover);
+  --bs-button-outlined-border-pressed: var(--bs-color-primary-pressed);
+  --bs-button-outlined-text-hover: var(--bs-text-action-hover);
   --bs-button-outlined-focus: var(--bs-border-primary-focus);
   --bs-button-outlined-container: var(--bs-color-primary-container);
 }
@@ -231,16 +240,17 @@
 .bs-button--outlined {
   background: transparent;
   color: var(--bs-color-primary-default);
-  border: 1.5px solid var(--bs-button-outlined-border);
+  border: 1px solid var(--bs-button-outlined-border);
 }
 .bs-button--outlined:hover:not(:disabled) {
   background: var(--bs-button-outlined-container);
   border-color: var(--bs-button-outlined-border-hover);
+  color: var(--bs-button-outlined-text-hover);
 }
 .bs-button--outlined:active:not(:disabled) {
   background: var(--bs-button-outlined-container);
-  color: var(--bs-color-primary-pressed);
-  border-color: var(--bs-button-outlined-border-hover);
+  color: var(--bs-button-outlined-text-hover);
+  border-color: var(--bs-button-outlined-border-pressed);
 }
 .bs-button--outlined:disabled {
   opacity: var(--bs-opacity-disabled);

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

@@ -105,7 +105,7 @@ export class BsButton {
     };
     render() {
         const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
-        return (h("button", { key: '3820c965cff86109613dac0d6ffaf5ee0a926f26', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: 'b8fb25e26d96168d6676acc0c3fa1b4f3429e974', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: 'cd5e33cf19f19b89c2f87153d20d32bf0d3dabb9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '91c9fd334013c495d2ec836619b9aecebc3c8e20', part: "label", class: "bs-button__label" }, h("slot", { key: 'c363d5d5004d2b2e9e5a4e09fa6cbe2ab87d9fff', onSlotchange: this.onLabelSlotchange })), h("span", { key: '29c1b4457efcfb9c11b0095279b77f3e97fa9988', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '9a6d3c0fcc16d8b546e225d88ae4d6014e9b2e45', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
+        return (h("button", { key: '08e40944935e444c596287a6ff6c57da0e3918f1', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: 'c6499f182e59e2ea19370fe2b5ff3f767f3ed95e', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '0f73b8af02609430f1a4d9c148cfc5c26e3d85b3', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '5d9c542387b6e012acc0f83fb6ecf96f9f86155d', part: "label", class: "bs-button__label" }, h("slot", { key: '97ef5087ea966548db790f1bfd0c6d88c961ba67', onSlotchange: this.onLabelSlotchange })), h("span", { key: '893c0d7ad7f1a3cc80d770e914a1dfe7f7d21205', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '0125dedf6e415dd43a1075d2ac8c03e911320ec5', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
     }
     static get is() { return "bs-button"; }
     static get encapsulation() { return "shadow"; }