@brandsync/wc 0.1.0 → 1.1.0

package/dist/collection/components/bs-chip/bs-chip-input/bs-chip-input.css

@@ -0,0 +1,172 @@
+/**
+ * @prop --bs-chip-input-height-md: Height at size="md". Aliased to --bs-spacing-300.
+ * @prop --bs-chip-input-height-lg: Height at size="lg". Aliased to --bs-spacing-400.
+ * @prop --bs-chip-input-gap: Gap between icon/label/remove. Aliased to --bs-spacing-50.
+ * @prop --bs-chip-input-padding-x-glyph-side: Horizontal padding on an edge adjacent to a glyph
+ * (the icon on the left, or the remove button on the right, which is always present). Aliased to
+ * --bs-spacing-100.
+ * @prop --bs-chip-input-padding-x-plain-side: Left-edge padding when there's no leading icon.
+ * Aliased to --bs-spacing-150.
+ * @prop --bs-chip-input-font-size: Aliased to --bs-font-size-sm.
+ * @prop --bs-chip-input-line-height: Aliased to --bs-line-height-body-sm.
+ * @prop --bs-chip-input-font-weight: Aliased to --bs-font-weight-regular.
+ *
+ * Color (background/text per selected/hover/focus/pressed/disabled state) comes directly from
+ * brandsync-tokens' own pre-built chip token set (--bs-chip-bg-..., --bs-chip-text-...,
+ * --bs-chip-border-...) below -- shared across the whole bs-chip family, not local to this
+ * component, consumed directly rather than re-aliased under a bs-chip-input-specific name.
+ */
+:host {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  gap: var(--bs-chip-input-gap);
+  border-radius: var(--bs-border-radius-full);
+  font-family: inherit;
+  font-size: var(--bs-chip-input-font-size);
+  font-weight: var(--bs-chip-input-font-weight);
+  line-height: calc(var(--bs-chip-input-line-height) * 1px);
+  white-space: nowrap;
+  background: var(--bs-chip-bg-primary-container);
+  color: var(--bs-chip-text-primary);
+  transition: background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease);
+
+  --bs-chip-input-height-md: var(--bs-spacing-300);
+  --bs-chip-input-height-lg: var(--bs-spacing-400);
+  --bs-chip-input-gap: var(--bs-spacing-50);
+  --bs-chip-input-padding-x-glyph-side: var(--bs-spacing-100);
+  --bs-chip-input-padding-x-plain-side: var(--bs-spacing-150);
+  --bs-chip-input-font-size: var(--bs-font-size-sm);
+  --bs-chip-input-line-height: var(--bs-line-height-body-sm);
+  --bs-chip-input-font-weight: var(--bs-font-weight-regular);
+}
+
+:host(.bs-chip-input--md) {
+  height: var(--bs-chip-input-height-md);
+}
+
+:host(.bs-chip-input--lg) {
+  height: var(--bs-chip-input-height-lg);
+}
+
+/* Reset -- both are plain, borderless, transparent flex items. Background/color/focus-ring all
+   live on :host (see below), so the whole pill reacts uniformly no matter which button is
+   actually hovered/focused/pressed -- :hover/:focus-within/:active on a host all match whenever
+   the pointer/focus is on any shadow-DOM descendant, not just the host element itself. */
+.bs-chip-input__body,
+.bs-chip-input__remove {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.bs-chip-input__body {
+  gap: var(--bs-chip-input-gap);
+  padding-right: 0;
+}
+
+:host(.bs-chip-input--icon) .bs-chip-input__body {
+  padding-left: var(--bs-chip-input-padding-x-glyph-side);
+}
+
+:host(.bs-chip-input--text) .bs-chip-input__body {
+  padding-left: var(--bs-chip-input-padding-x-plain-side);
+}
+
+.bs-chip-input__remove {
+  padding-left: 0;
+  padding-right: var(--bs-chip-input-padding-x-glyph-side);
+}
+
+.bs-chip-input__icon {
+  display: none;
+  flex-shrink: 0;
+}
+
+.bs-chip-input__icon--visible {
+  display: flex;
+  align-items: center;
+}
+
+/* Defaults slotted content to 16px, matching bs-chip-filter's icon slot -- a plain <svg> with no
+   intrinsic width/height otherwise collapses to 0x0 as a flex item (confirmed by measuring a real
+   render). bs-avatar is exempted: Figma specs it at 24px with its own border ring matching
+   --chip/border-inverse exactly (verified, --bs-border-neutral-container resolves to the same
+   #c2c7d3 hex), so it needs to keep sizing itself via its own `size` prop instead. */
+.bs-chip-input__icon ::slotted(*) {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.bs-chip-input__icon ::slotted(bs-avatar) {
+  width: auto;
+  height: auto;
+}
+
+.bs-chip-input__label {
+  display: flex;
+  align-items: center;
+}
+
+.bs-chip-input__remove svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+/* Unselected (default): the light "container" background set. :active is declared AFTER
+   :focus-within so a mouse click's pressed background wins the cascade -- a mousedown makes both
+   equally true at once (clicking a button focuses it too), and with matching specificity the
+   later rule otherwise wins, which put the focused (not pressed) color on a plain click
+   (confirmed via a real computed-style check). The focus outline itself still applies regardless
+   of source order, since the active rule below only ever sets background. */
+:host(:hover:not([disabled])) {
+  background: var(--bs-chip-bg-primary-container-hover);
+}
+
+:host(:focus-within:not([disabled])) {
+  background: var(--bs-chip-bg-primary-container-focused);
+  outline: 2px solid var(--bs-chip-border-focus);
+  outline-offset: 2px;
+}
+
+:host(:active:not([disabled])) {
+  background: var(--bs-chip-bg-primary-container-pressed);
+}
+
+/* Selected: the dark "primary" background set, inverse (white) text -- swaps every state above
+   to its --primary-* (not --primary-container-*) counterpart. */
+:host([selected]) {
+  background: var(--bs-chip-bg-primary);
+  color: var(--bs-chip-text-inverse);
+}
+
+:host([selected]:hover:not([disabled])) {
+  background: var(--bs-chip-bg-primary-hover);
+}
+
+:host([selected]:focus-within:not([disabled])) {
+  background: var(--bs-chip-bg-primary-focused);
+}
+
+:host([selected]:active:not([disabled])) {
+  background: var(--bs-chip-bg-primary-pressed);
+}
+
+:host([disabled]) {
+  background: var(--bs-chip-bg-disabled);
+  color: var(--bs-chip-text-disabled);
+}
+
+.bs-chip-input__body:disabled,
+.bs-chip-input__remove:disabled {
+  cursor: not-allowed;
+}

package/dist/collection/components/bs-chip/bs-chip-input/bs-chip-input.js

@@ -0,0 +1,208 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A pill-shaped, removable representation of a discrete piece of user-entered data (e.g. a tag,
+ * a selected filter value, an invited email address), optionally paired with a leading icon or
+ * avatar. Unlike `bs-chip-filter`, this is a compound control -- the body toggles `selected`, and
+ * a separate trailing button removes the chip entirely.
+ *
+ * ## When to use
+ * - Representing one entry in a list the user built themselves (tags, recipients, multi-select
+ *   values) that they need to be able to remove individually.
+ *
+ * ## When not to use
+ * - A single toggleable filter, with no removal affordance -- use `bs-chip-filter`.
+ * - A static, non-interactive status/category label -- use `bs-badge`.
+ *
+ * @slot - Default slot: the chip's label content.
+ * @slot icon - Optional leading visual. Defaults to 16px (a plain icon), except a
+ *   `<bs-avatar size="xs">` specifically keeps its own natural 24px sizing instead -- Figma specs
+ *   a plain icon and an avatar (with its own existing border ring) at two different sizes.
+ * @part body - The button that toggles `selected`.
+ * @part icon - The icon wrapper element.
+ * @part label - The text label element.
+ * @part remove - The trailing remove button.
+ */
+export class BsChipInput {
+    el;
+    /** Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay
+     * constant across sizes, matching the Figma spec exactly. */
+    size = 'lg';
+    /** Whether the chip reads as toggled on. Mutable so clicking the body toggles directly, and
+     * reflected so consumers can target `bs-chip-input[selected]` via CSS. */
+    selected = false;
+    /** Disables both the body and the remove button, and reflected so `:host([disabled])` can
+     * apply the disabled token set (a plain CSS pseudo-class can't target the host itself here,
+     * since :host isn't a native form control). */
+    disabled = false;
+    /** Tracks whether the `icon` slot has assigned content, so the icon/label gap and left-edge
+     * padding only apply when there's actually a leading icon/avatar. */
+    hasIcon = false;
+    /** The label's current text content, read from the default slot -- used to build the remove
+     * button's accessible name ("Remove {label}"), same reasoning as bs-input's identical
+     * `Remove ${chip}` pattern for its own inline chip-entry mode. */
+    labelText = '';
+    /** Emitted when `selected` changes via clicking the body, with the new value. */
+    bsChange;
+    /** Emitted when the remove button is clicked. No payload -- unlike bs-input's own chip-entry
+     * mode (which tracks a `chips: string[]` array internally and can identify which string was
+     * removed), a standalone chip doesn't know its own "value" to a consumer; whatever's rendering
+     * a list of these already has that context via closure/key. */
+    bsRemove;
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('icon');
+        this.labelText = this.getLabelText();
+    }
+    hasSlottedContent(slotName) {
+        return Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === slotName);
+    }
+    getLabelText() {
+        return Array.from(this.el.childNodes)
+            .filter(node => !(node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('slot')))
+            .map(node => node.textContent)
+            .join('')
+            .trim();
+    }
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onLabelSlotchange = () => {
+        this.labelText = this.getLabelText();
+    };
+    onBodyClick = () => {
+        this.selected = !this.selected;
+        this.bsChange.emit(this.selected);
+    };
+    onRemoveClick = () => {
+        this.bsRemove.emit();
+    };
+    render() {
+        const paddingVariant = this.hasIcon ? 'icon' : 'text';
+        return (h(Host, { key: 'd11302f69f8732c0c1c5c52e25a43ed894bba9d3', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: 'e6621eb9e757f639d18287a56ffcbd75131ece65', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("span", { key: '3bc20f30643dc95905778053ad892bd728005e41', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: '1082ebd7f6e5fee0da8864f15eff7a645097fec9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '6b93d2229962e9362bf827a127dd0af3b5125059', part: "label", class: "bs-chip-input__label" }, h("slot", { key: 'c53a759951afbe131472252ec3ca45b9ba15200a', onSlotchange: this.onLabelSlotchange }))), h("button", { key: 'e9c0a6d76f6e6be0c7f3fcf4004207d045eb5b6c', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `Remove ${this.labelText}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: 'f14475776429fa95759f9d6050579bce60d27d13' }))));
+    }
+    static get is() { return "bs-chip-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-chip-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-chip-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsChipInputSize",
+                    "resolved": "\"lg\" | \"md\"",
+                    "references": {
+                        "BsChipInputSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-chip/bs-chip-input/bs-chip-input.tsx",
+                            "id": "src/components/bs-chip/bs-chip-input/bs-chip-input.tsx::BsChipInputSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay\nconstant across sizes, matching the Figma spec exactly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'lg'"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the chip reads as toggled on. Mutable so clicking the body toggles directly, and\nreflected so consumers can target `bs-chip-input[selected]` via CSS."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables both the body and the remove button, and reflected so `:host([disabled])` can\napply the disabled token set (a plain CSS pseudo-class can't target the host itself here,\nsince :host isn't a native form control)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "labelText": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when `selected` changes via clicking the body, with the new value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "bsRemove",
+                "name": "bsRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the remove button is clicked. No payload -- unlike bs-input's own chip-entry\nmode (which tracks a `chips: string[]` array internally and can identify which string was\nremoved), a standalone chip doesn't know its own \"value\" to a consumer; whatever's rendering\na list of these already has that context via closure/key."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+// Same icon already established for this exact purpose in bs-dialog -- reused verbatim rather
+// than pulling in Figma's own X asset, per this library's existing icon for this purpose.
+const CloseIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M12.5 3.5L3.5 12.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M12.5 12.5L3.5 3.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-chip/bs-chip-input/bs-chip-input.stories.js

@@ -0,0 +1,67 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../../stories-utils";
+const PLACEHOLDER_PHOTO = 'https://i.pravatar.cc/256?img=68';
+const meta = {
+    title: 'Components/bs-chip/bs-chip-input',
+    parameters: { docs: { description: { component: componentDescription('bs-chip-input') } } },
+    render: args => html ` <bs-chip-input size=${args.size} ?selected=${args.selected} ?disabled=${args.disabled}>${args.label}</bs-chip-input> `,
+    argTypes: {
+        size: { control: { type: 'select' }, options: ['md', 'lg'], description: propDescription('bs-chip-input', 'size') },
+        selected: { control: 'boolean', description: propDescription('bs-chip-input', 'selected') },
+        disabled: { control: 'boolean', description: propDescription('bs-chip-input', 'disabled') },
+        label: { control: 'text', description: 'Slotted label content (not a real attribute -- see the default slot).' },
+    },
+    args: {
+        size: 'lg',
+        selected: false,
+        disabled: false,
+        label: 'Label',
+    },
+};
+export default meta;
+export const Default = {};
+export const Selected = {
+    args: { selected: true },
+};
+export const WithIcon = {
+    name: 'With icon',
+    render: args => html `
+    <bs-chip-input size=${args.size} ?selected=${args.selected} ?disabled=${args.disabled}>
+      <svg slot="icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <rect x="3" y="2" width="10" height="12" rx="1.5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M7 12H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+      ${args.label}
+    </bs-chip-input>
+  `,
+};
+export const WithAvatar = {
+    name: 'With avatar',
+    render: args => html `
+    <bs-chip-input size=${args.size} ?selected=${args.selected} ?disabled=${args.disabled}>
+      <bs-avatar slot="icon" size="xs" type="image" src=${PLACEHOLDER_PHOTO} alt="Sam Lee"></bs-avatar>
+      ${args.label}
+    </bs-chip-input>
+  `,
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+export const Medium = {
+    args: { size: 'md' },
+};
+export const AllVariants = {
+    name: 'All variants',
+    render: () => html `
+    <div style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
+      <bs-chip-input>Label</bs-chip-input>
+      <bs-chip-input selected>Label</bs-chip-input>
+      <bs-chip-input disabled>Label</bs-chip-input>
+      <bs-chip-input size="md">Label</bs-chip-input>
+      <bs-chip-input>
+        <bs-avatar slot="icon" size="xs" type="image" src=${PLACEHOLDER_PHOTO} alt="Sam Lee"></bs-avatar>
+        Label
+      </bs-chip-input>
+    </div>
+  `,
+};

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

@@ -183,7 +183,7 @@ export class BsComposer {
         const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
         const disabled = this.state === 'disabled';
         const recording = this.state === 'recording';
-        return (h("div", { key: 'ee8e0a250798b3b5f9da6acde497779581c3b9ca', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: 'fe37e3bd240379513c97022b77635121ae100826', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'c6237cef8ebf742d6a68d513bd4366226317ec43', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: 'e88d294aba83e6a4c11f35095ae4efd58aeb9586', class: "bs-composer__text-row" }, h("textarea", { key: 'c6a123b0134e74fed67ec590a7ee9c0eaa238318', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: 'aab617b78bfd3bcd33d43f08669f6f1688238388', class: "bs-composer__controls-row" }, h("button", { key: 'db8147a8841c08786c725052fdbaa366718c9a2e', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'cc13f52bfc496bd2a530012917b098fe10dff27b' })), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), h("button", { key: '372d2751ea5dab5793314aa4469ef80ab28536a5', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: '4694605f9e970097290d0eabbc1d4815c3b3bfe2', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '71976baf242f384a2c69ef8561dda47d0a3739ae', name: "actions-end" }))));
+        return (h("div", { key: 'f4676a3c110cd683f745e3b0e4d37d8abcab06c5', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '7970d493b0c0f9ef19f00fea2d33b58085f589e6', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '4b53a6cfd1d7d0e7cf0fa0d5e4f37fb551f4bcd4', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '44fa49b002b657accd21a01e75cd5458dba337a8', class: "bs-composer__text-row" }, h("textarea", { key: '8fde6e735be83c28a38a59437ad9b2453bc6d074', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: '6f7a9e1a33d642e3ce847c8df03bc7e119696bbe', class: "bs-composer__controls-row" }, h("button", { key: '3b98d1c4e50373318b64d91e259e22d54cced5a7', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'e80e96ec1ea18d5eec08f77d9601c174382aafbd' })), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), h("button", { key: '6dc198b201f3df52a9646146ea4ddfc3d921ca72', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: 'a7e626d35aa9cc0b9e2bd67ced5961671cdd7850', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '3f81510829b313a0088b7a4ea6f70c41dce16e77', name: "actions-end" }))));
     }
     static get is() { return "bs-composer"; }
     static get encapsulation() { return "shadow"; }
@@ -209,7 +209,7 @@ export class BsComposer {
                     "references": {
                         "BsComposerVariant": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-composer/bs-composer.tsx",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-composer/bs-composer.tsx",
                             "id": "src/components/bs-composer/bs-composer.tsx::BsComposerVariant"
                         }
                     }
@@ -274,7 +274,7 @@ export class BsComposer {
                     "references": {
                         "BsComposerState": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-composer/bs-composer.tsx",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-composer/bs-composer.tsx",
                             "id": "src/components/bs-composer/bs-composer.tsx::BsComposerState"
                         }
                     }

package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.js

@@ -106,7 +106,7 @@ export class BsComposerStatusBanner {
         return this.type === 'error' || this.type === 'warning' ? h(WarningIcon, null) : h(ClockIcon, null);
     }
     render() {
-        return (h("div", { key: 'f8f5ae2de96dc534f4e9c9a5f46fe28e3da57939', role: this.roleForType(), class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '28d77b1058c375afaba827f4dd4563b6cff058e4', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: 'aaa867907b3610a1e2a9be087d2d077cd1252503', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '1d0db69c42e4a23978655e86e16b9624f05a8edb', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: 'bdad9aaf7efa1d96afd07c9d214d7a2ee369c010', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: 'cf949f6cada1c35d91ebc7ec81c56ea9e9255c30', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '5108346a07f7bb3c23ea94c213f395212497b4e8', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: '7651748165308c30394ea312f227ff83eb7b1d1a' })))));
+        return (h("div", { key: '74c67ad03135f3437bed5d267bf61d76e526e258', role: this.roleForType(), class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '451147bf0c994383f67739be91c1e7208188e268', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '759e731cd0d26516eae83b5f224791043586b9d3', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: 'cb3e16644aea43208f3112a6c3305490ce0a9bc8', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '098ffc238f023ba1ea42e26828b845a0a09ff368', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '2bbaefea9de874d4f141566809bc77a3bf1aeae9', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '4ba7f094f0435a15612a38ef1bd770d2c3b90453', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: 'd8d6e340f64a3fae396763f1d7897fdc8c02936a' })))));
     }
     static get is() { return "bs-composer-status-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -131,7 +131,7 @@ export class BsComposerStatusBanner {
                     "references": {
                         "BsComposerStatusBannerType": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-composer-status-banner/bs-composer-status-banner.tsx",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-composer-status-banner/bs-composer-status-banner.tsx",
                             "id": "src/components/bs-composer-status-banner/bs-composer-status-banner.tsx::BsComposerStatusBannerType"
                         }
                     }

package/dist/collection/components/bs-data-table/bs-data-table.js

@@ -54,11 +54,11 @@ export class BsDataTable {
         this.bsRowSelect.emit({ id: row.id, selected });
     };
     render() {
-        return (h("table", { key: 'fa798fc4873097b91f1e5527836c9607630535ad', part: "table", class: "bs-data-table" }, h("thead", { key: '4ce731b46239412e2f87167ca678c0a9376a67dd', part: "head" }, h("tr", { key: '74fd0fb91c96b62e7ea97f85fb9e215ab5883af5' }, this.selectable && h("th", { key: '595ffb64be9ddb12851acc704e503653c623a385', class: "bs-data-table__select-col" }), this.columns.map(column => {
+        return (h("table", { key: 'c997c047867ae5d446eda4f2ad5260bd956b4255', part: "table", class: "bs-data-table" }, h("thead", { key: 'bdbe3f8c07ef23115d3a8a32a15e84a02e162894', part: "head" }, h("tr", { key: '84f7e89fefe44c680b397bd92bf2b8070e9b943d' }, this.selectable && h("th", { key: '925dbfa36580ef0818e2739ba602161668eedfd5', class: "bs-data-table__select-col" }), this.columns.map(column => {
             const isSorted = this.sortColumn === column.key;
             const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
             return (h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), h("tbody", { key: '1e46254b85803cbd3925b6a4bbc9ca0205816753', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), h("tbody", { key: '96985dc5ace9126094984bd1b876c5eb5209bb39', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
         // cellRenderer is a developer-supplied, trusted function (JS-property-only, never
         // derived from untrusted input) -- its HTML output is intentionally not escaped,
         // same trust model as React's dangerouslySetInnerHTML.
@@ -90,7 +90,7 @@ export class BsDataTable {
                     "references": {
                         "BsDataTableColumn": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-data-table/bs-data-table.tsx",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-data-table/bs-data-table.tsx",
                             "id": "src/components/bs-data-table/bs-data-table.tsx::BsDataTableColumn"
                         }
                     }
@@ -114,7 +114,7 @@ export class BsDataTable {
                     "references": {
                         "BsDataTableRow": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-data-table/bs-data-table.tsx",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-data-table/bs-data-table.tsx",
                             "id": "src/components/bs-data-table/bs-data-table.tsx::BsDataTableRow"
                         }
                     }
@@ -197,12 +197,12 @@ export class BsDataTable {
                     "references": {
                         "BsDataTableRow": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-data-table/bs-data-table.tsx",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-data-table/bs-data-table.tsx",
                             "id": "src/components/bs-data-table/bs-data-table.tsx::BsDataTableRow"
                         },
                         "BsDataTableColumn": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-data-table/bs-data-table.tsx",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-data-table/bs-data-table.tsx",
                             "id": "src/components/bs-data-table/bs-data-table.tsx::BsDataTableColumn"
                         }
                     }

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

@@ -2,6 +2,12 @@ import { render, h, describe, it, expect, afterEach } from "@stencil/vitest";
 describe('bs-dialog', () => {
     afterEach(() => {
         document.querySelectorAll('button[data-test-trigger]').forEach(el => el.remove());
+        // render() doesn't unmount the previous test's element on its own -- without this, a dialog
+        // left open by one test stays connected (and its document-level focusin listener stays live)
+        // into the next test, silently stealing focus meant for that test's own elements. Confirmed
+        // directly: a later test's plain `<button>.focus()` call was losing focus to a completely
+        // unrelated *previous* test's still-open `<bs-dialog>`.
+        document.querySelectorAll('bs-dialog').forEach(el => el.remove());
     });
     it('renders nothing when closed (default)', async () => {
         const { root } = await render(h("bs-dialog", { heading: "Confirm booking" }, "Body"));

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

@@ -87,15 +87,25 @@ export class BsDialog {
     // reliably walk into slotted children's own Shadow DOM anyway), redirect any focus that lands
     // outside the dialog back to it. composedPath() correctly reports elements across Shadow DOM
     // boundaries, unlike a plain `.contains()` check.
+    //
+    // isConnected guard: without it, a dialog instance that's been removed from the document (e.g.
+    // a consumer swapping it out for another) but hasn't finished Stencil's disconnect teardown yet
+    // would still redirect page-wide focusin events into its own, no-longer-visible dialog.
     onFocusIn(ev) {
-        if (this.open && this.dialogRef && !ev.composedPath().includes(this.dialogRef)) {
+        if (this.open && this.dialogRef?.isConnected && !ev.composedPath().includes(this.dialogRef)) {
             this.dialogRef.focus();
         }
     }
     componentDidRender() {
         if (this.open && !this.wasOpen) {
             this.previouslyFocused = document.activeElement;
-            this.dialogRef?.focus();
+            // Deferred to the next frame -- calling .focus() synchronously here, in the same task as
+            // the dialog's shadow tree first connecting, silently fails (confirmed directly: the ref is
+            // valid, connected, and has tabindex="-1" at this exact point, yet the shadow root's
+            // activeElement stays null right after the call). This is a known class of browser quirk --
+            // focusing an element in the same synchronous pass as its own connection doesn't reliably
+            // take effect until the browser's finished the layout/connection work for it.
+            requestAnimationFrame(() => this.dialogRef?.focus());
             // Locks the page behind the dialog from scrolling while it's open -- a fixed-position
             // backdrop/dialog doesn't block scroll on its own, since scroll input still targets whatever
             // element is under the pointer/has focus, not the topmost painted layer.
@@ -188,7 +198,7 @@ export class BsDialog {
                     "references": {
                         "BsDialogSize": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-dialog/bs-dialog.tsx",
+                            "path": "/home/runner/work/Brandsync-web-components/Brandsync-web-components/packages/wc/src/components/bs-dialog/bs-dialog.tsx",
                             "id": "src/components/bs-dialog/bs-dialog.tsx::BsDialogSize"
                         }
                     }

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

@@ -341,10 +341,10 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: '3647d132e96c281ba68522647ab422040c6752c2', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '10554d997d7c52834c033e68f1b0b30e823844d6', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '95eb3e3308a746797565480318b35ea2f20c36d0', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '5c30e73a9e474ac3138aff9868e6b98d42d3771c', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: 'd5819ef4b34973a510dc7582e32baae4a6da4119', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '6c066e8c528133288be0f050f8e7ca5527561cba', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }