@brandsync/wc 0.0.1

package/dist/esm/bs-badge.entry.js

@@ -0,0 +1,17 @@
+import { r as registerInstance, h } from './index-BOj_41o9.js';
+
+const bsBadgeCss = () => `:host{display:inline-block}.bs-badge{display:inline-flex;align-items:center;height:var(--bs-spacing-400);padding:0 var(--bs-spacing-200);border-radius:var(--bs-border-radius-full);font-size:var(--bs-font-size-xs);font-weight:var(--bs-font-weight-medium);font-family:inherit;white-space:nowrap}.bs-badge--default{background:var(--bs-badge-bg-default);color:var(--bs-badge-text-default)}.bs-badge--primary{background:var(--bs-badge-bg-primary-container);color:var(--bs-badge-text-primary)}.bs-badge--success{background:var(--bs-badge-bg-success-container);color:var(--bs-badge-text-success)}.bs-badge--warning{background:var(--bs-badge-bg-warning-container);color:var(--bs-badge-text-warning)}.bs-badge--info{background:var(--bs-badge-bg-info-container);color:var(--bs-badge-text-info)}.bs-badge--error{background:var(--bs-badge-bg-error-container);color:var(--bs-badge-text-error)}.bs-badge--neutral{background:var(--bs-badge-bg-neutral-container);color:var(--bs-badge-text-neutral)}.bs-badge--inverse{background:var(--bs-badge-bg-inverse);color:var(--bs-badge-text-inverse)}`;
+
+const BsBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets. */
+    variant = 'default';
+    render() {
+        return (h("span", { key: '9cc06bddba11f57edf97209456e25141a3b80bea', part: "container", class: `bs-badge bs-badge--${this.variant}` }, h("slot", { key: '7c0e4054e99a3dedc94f2a7250075fcb76c115b6' })));
+    }
+};
+BsBadge.style = bsBadgeCss();
+
+export { BsBadge as bs_badge };

package/dist/esm/bs-button-skeleton.entry.js

@@ -0,0 +1,17 @@
+import { r as registerInstance, h } from './index-BOj_41o9.js';
+
+const bsButtonSkeletonCss = () => `:host{display:inline-block;--bs-button-skeleton-height-sm:var(--bs-spacing-500);--bs-button-skeleton-height-md:var(--bs-spacing-600);--bs-button-skeleton-height-lg:var(--bs-spacing-700);--bs-button-skeleton-width:96px}.bs-button-skeleton{display:inline-block;border-radius:var(--bs-border-radius-100);width:var(--bs-button-skeleton-width);background:var(--bs-color-neutral-container);animation:bs-button-skeleton-pulse 1.5s ease-in-out infinite}.bs-button-skeleton--sm{height:var(--bs-button-skeleton-height-sm)}.bs-button-skeleton--md{height:var(--bs-button-skeleton-height-md)}.bs-button-skeleton--lg{height:var(--bs-button-skeleton-height-lg)}@keyframes bs-button-skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@media (prefers-reduced-motion: reduce){.bs-button-skeleton{animation:none}}`;
+
+const BsButtonSkeleton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Sizing scale, matching the `bs-button` size it stands in for. */
+    size = 'md';
+    render() {
+        return h("span", { key: 'c54e42fcf6eb065a1a33f2dee8518d12c5797cf3', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
+    }
+};
+BsButtonSkeleton.style = bsButtonSkeletonCss();
+
+export { BsButtonSkeleton as bs_button_skeleton };

package/dist/esm/bs-button.entry.js

@@ -0,0 +1,86 @@
+import { r as registerInstance, a as getElement, h } from './index-BOj_41o9.js';
+
+const bsButtonCss = () => `:host{display:inline-block;--bs-button-height-sm:var(--bs-spacing-500);--bs-button-height-md:var(--bs-spacing-600);--bs-button-height-lg:var(--bs-spacing-700);--bs-button-radius:var(--bs-border-radius-100);--bs-button-error-default:var(--bs-color-error-default);--bs-button-error-hover:var(--bs-color-error-hover);--bs-button-error-focus:var(--bs-border-error-focus);--bs-button-error-pressed:var(--bs-color-error-pressed);--bs-button-error-disabled:var(--bs-surface-action-disabled);--bs-button-success-default:var(--bs-color-success-default);--bs-button-success-hover:var(--bs-color-success-hover);--bs-button-success-focus:var(--bs-border-success-focus);--bs-button-success-pressed:var(--bs-color-success-pressed);--bs-button-success-disabled:var(--bs-surface-action-disabled);--bs-button-warning-default:var(--bs-color-warning-default);--bs-button-warning-hover:var(--bs-color-warning-hover);--bs-button-warning-focus:var(--bs-border-warning-focus);--bs-button-warning-pressed:var(--bs-color-warning-pressed);--bs-button-warning-disabled:var(--bs-surface-action-disabled);--bs-button-info-default:var(--bs-color-info-default);--bs-button-info-hover:var(--bs-color-info-hover);--bs-button-info-focus:var(--bs-border-info-focus);--bs-button-info-pressed:var(--bs-color-info-pressed);--bs-button-info-disabled:var(--bs-surface-action-disabled);--bs-button-subtle-hover:var(--bs-color-neutral-container);--bs-button-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-button-subtle-focus:var(--bs-border-primary-focus);--bs-button-outlined-border:var(--bs-border-primary);--bs-button-outlined-border-hover:var(--bs-border-primary-hover);--bs-button-outlined-focus:var(--bs-border-primary-focus);--bs-button-outlined-container:var(--bs-color-primary-container)}.bs-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;border-radius:var(--bs-button-radius);font-family:inherit;font-weight:var(--bs-font-weight-semibold);cursor:pointer;transition:background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease)}.bs-button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-button:disabled{cursor:not-allowed}.bs-button--sm{height:var(--bs-button-height-sm);padding:0 var(--bs-spacing-300);font-size:var(--bs-font-size-sm)}.bs-button--md{height:var(--bs-button-height-md);padding:0 var(--bs-spacing-400);font-size:var(--bs-font-size-md)}.bs-button--lg{height:var(--bs-button-height-lg);padding:0 var(--bs-spacing-500);font-size:var(--bs-font-size-lg)}.bs-button--primary{background:var(--bs-button-primary-default);color:var(--bs-text-on-action)}.bs-button--primary:hover:not(:disabled){background:var(--bs-button-primary-hover)}.bs-button--primary:active:not(:disabled){background:var(--bs-button-primary-pressed)}.bs-button--primary:disabled{background:var(--bs-button-primary-disabled);color:var(--bs-text-on-disabled)}.bs-button--neutral{background:var(--bs-button-neutral-container);color:var(--bs-text-default)}.bs-button--neutral:hover:not(:disabled){background:var(--bs-button-neutral-hover)}.bs-button--neutral:active:not(:disabled){background:var(--bs-button-neutral-pressed)}.bs-button--neutral:disabled{background:var(--bs-button-neutral-disabled);color:var(--bs-text-on-disabled)}.bs-button--error{background:var(--bs-button-error-default);color:var(--bs-text-on-action)}.bs-button--error:hover:not(:disabled){background:var(--bs-button-error-hover)}.bs-button--error:active:not(:disabled){background:var(--bs-button-error-pressed)}.bs-button--error:disabled{background:var(--bs-button-error-disabled);color:var(--bs-text-on-disabled)}.bs-button--error:focus-visible{outline-color:var(--bs-button-error-focus)}.bs-button--success{background:var(--bs-button-success-default);color:var(--bs-text-on-action)}.bs-button--success:hover:not(:disabled){background:var(--bs-button-success-hover)}.bs-button--success:active:not(:disabled){background:var(--bs-button-success-pressed)}.bs-button--success:disabled{background:var(--bs-button-success-disabled);color:var(--bs-text-on-disabled)}.bs-button--success:focus-visible{outline-color:var(--bs-button-success-focus)}.bs-button--warning{background:var(--bs-button-warning-default);color:var(--bs-text-default)}.bs-button--warning:hover:not(:disabled){background:var(--bs-button-warning-hover)}.bs-button--warning:active:not(:disabled){background:var(--bs-button-warning-pressed)}.bs-button--warning:disabled{background:var(--bs-button-warning-disabled);color:var(--bs-text-on-disabled)}.bs-button--warning:focus-visible{outline-color:var(--bs-button-warning-focus)}.bs-button--info{background:var(--bs-button-info-default);color:var(--bs-text-on-action)}.bs-button--info:hover:not(:disabled){background:var(--bs-button-info-hover)}.bs-button--info:active:not(:disabled){background:var(--bs-button-info-pressed)}.bs-button--info:disabled{background:var(--bs-button-info-disabled);color:var(--bs-text-on-disabled)}.bs-button--info:focus-visible{outline-color:var(--bs-button-info-focus)}.bs-button--subtle{background:transparent;color:var(--bs-color-neutral-default)}.bs-button--subtle:hover:not(:disabled){background:var(--bs-button-subtle-hover)}.bs-button--subtle:active:not(:disabled){background:var(--bs-button-subtle-pressed)}.bs-button--subtle:disabled{background:transparent;color:var(--bs-text-on-disabled)}.bs-button--subtle:focus-visible{outline-color:var(--bs-button-subtle-focus);background:var(--bs-button-subtle-hover)}.bs-button--outlined{background:transparent;color:var(--bs-color-primary-default);border:1.5px 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)}.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)}.bs-button--outlined:disabled{opacity:var(--bs-opacity-disabled);cursor:not-allowed}.bs-button--outlined:focus-visible{outline-color:var(--bs-button-outlined-focus)}.bs-button__icon--visible{margin-right:var(--bs-spacing-100)}.bs-button__end-icon--visible{margin-left:var(--bs-spacing-100)}.bs-button__icon ::slotted(*),.bs-button__end-icon ::slotted(*){display:block;width:1em;height:1em}.bs-button--icon-only{padding:0;aspect-ratio:1 / 1}.bs-button--icon-only .bs-button__icon--visible{margin-right:0}.bs-button--icon-only .bs-button__end-icon--visible{margin-left:0}`;
+
+const BsButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Visual style. Maps directly to the brandsync-tokens `--bs-button-*` semantic set.
+     * `error` is for destructive/irreversible actions per BrandSync guidance, not a stronger
+     * emphasis alternative to `primary`.
+     */
+    variant = 'primary';
+    /** Sizing scale. */
+    size = 'md';
+    /** Disables the button and applies the disabled token set. */
+    disabled = false;
+    /** Native `<button>` type. */
+    type = 'button';
+    /**
+     * Accessible name for the button. Required for icon-only usage (no visible label text via the
+     * default slot) so screen readers still announce what the button does. Stencil reflects this
+     * camelCase prop to the `aria-label` HTML attribute automatically.
+     */
+    ariaLabel = null;
+    /** Tracks whether the `icon` slot has assigned content, so the icon/label gap only
+     * applies when there's actually an icon. */
+    hasIcon = false;
+    /** Tracks whether the `end-icon` slot has assigned content, so the icon/label gap only
+     * applies when there's actually a trailing icon. */
+    hasEndIcon = false;
+    /**
+     * Tracks whether the default (label) slot has assigned content, so an icon-only button can be
+     * styled/sized differently (see `bs-button--icon-only`).
+     *
+     * Known edge case (not fixed, same simplification `hasIcon`/similar flags elsewhere in this
+     * codebase already make): a default slot containing only whitespace (e.g. a lone space text
+     * node) still counts as `hasLabel = true`, since checking for assigned nodes doesn't
+     * distinguish whitespace-only text nodes from real content.
+     */
+    hasLabel = false;
+    /**
+     * Computes the initial `hasIcon`/`hasEndIcon`/`hasLabel` state directly from the host's light
+     * DOM children, before first render.
+     *
+     * This can't be left to the `slotchange` handlers below alone: `slotchange` only fires when a
+     * slot's *assigned nodes* change, and a slot that starts out with zero assigned nodes and stays
+     * that way never fires it (nothing changed). Relying on `slotchange` alone left an icon-only
+     * button (default slot empty from the start) permanently stuck on its initial `hasLabel`
+     * default, so `bs-button--icon-only` never applied.
+     */
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('icon');
+        this.hasEndIcon = this.hasSlottedContent('end-icon');
+        this.hasLabel = this.hasSlottedContent(null);
+    }
+    hasSlottedContent(slotName) {
+        return Array.from(this.el.childNodes).some(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                return node.getAttribute('slot') === slotName;
+            }
+            // Only elements can carry a `slot` attribute -- any other node type (text, comments) can
+            // only ever be assigned to the default slot.
+            return slotName === null;
+        });
+    }
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onEndIconSlotchange = (ev) => {
+        this.hasEndIcon = ev.target.assignedNodes().length > 0;
+    };
+    onLabelSlotchange = (ev) => {
+        this.hasLabel = ev.target.assignedNodes().length > 0;
+    };
+    render() {
+        const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
+        return (h("button", { key: 'eae5915f036d18b43b9b1ff94272fe27aa119d0e', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: 'ee58ccc6f8390663e67a7d7a03fe6113782805e7', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '526ec7b4fd274bbdb6dc1edb38c33917c26337ee', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '3e0121dc4dc975b449b03e5ac5f55d1f6001e806', part: "label", class: "bs-button__label" }, h("slot", { key: '4ab00b8b91f0513af74faac4ae7b39f9a975dde5', onSlotchange: this.onLabelSlotchange })), h("span", { key: '3f64f1122c5ed1da1bb9cb869490395f1e11b3fb', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: 'ca79d7ed3cd80c6abc3f17c4f9d215ed69c13059', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
+    }
+    static get delegatesFocus() { return true; }
+};
+BsButton.style = bsButtonCss();
+
+export { BsButton as bs_button };

package/dist/esm/bs-card.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h } from './index-BOj_41o9.js';
+
+const bsCardCss = () => `:host{display:block}.bs-card{border:1px solid var(--bs-paper-border-surface);border-radius:var(--bs-border-radius-150);padding:var(--bs-spacing-400);font-family:inherit}.bs-card--base{background:var(--bs-paper-bg-base)}.bs-card--raised{background:var(--bs-paper-bg-raised);box-shadow:var(--bs-shadow-sm)}.bs-card--container{background:var(--bs-paper-bg-container)}.bs-card__header ::slotted(*){margin:0 0 var(--bs-spacing-300) 0}.bs-card__footer ::slotted(*){margin:var(--bs-spacing-300) 0 0 0}`;
+
+const BsCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Maps to the brandsync-tokens `--bs-paper-bg-*` set — Brandsync's tokens don't have a
+     * dedicated "card" component yet, so this reuses the existing Paper surface tokens. */
+    surface = 'raised';
+    render() {
+        return (h("div", { key: '6c74e846c97f02a39ce1f2b215c87fbb9cd42055', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: 'ef89eb6ea19be13daf403b010a93e1f5a82691d4', part: "header", class: "bs-card__header" }, h("slot", { key: '4627d1f598def9298e0b7d251a523892bb0b97cf', name: "header" })), h("div", { key: 'a599746c11f92d2a535985abdcadbc9cc3036fdd', part: "body", class: "bs-card__body" }, h("slot", { key: 'f8d46c5f6aefeb870796c4efa37663e698fdd5c7' })), h("div", { key: '7f928a259fb159b6eb7d742cbfe6c1aacbef6e36', part: "footer", class: "bs-card__footer" }, h("slot", { key: 'fddc69aedbc10f4397bb1db62265c657ec2642ab', name: "footer" }))));
+    }
+};
+BsCard.style = bsCardCss();
+
+export { BsCard as bs_card };

package/dist/esm/bs-composer.entry.js

@@ -0,0 +1,114 @@
+import { r as registerInstance, c as createEvent, h } from './index-BOj_41o9.js';
+
+const bsComposerCss = () => `:host{display:block;--bs-composer-radius:var(--bs-border-radius-150);--bs-composer-button-radius:var(--bs-border-radius-100);--bs-composer-button-size:var(--bs-spacing-600);--bs-composer-bg:var(--bs-input-bg-default);--bs-composer-border:var(--bs-input-border-default);--bs-composer-border-focus:var(--bs-input-border-focus);--bs-composer-action-bg:var(--bs-color-primary-default);--bs-composer-action-bg-hover:var(--bs-color-primary-hover);--bs-composer-action-bg-pressed:var(--bs-color-primary-pressed);--bs-composer-action-bg-disabled:var(--bs-surface-action-disabled);--bs-composer-action-icon:var(--bs-text-on-action);--bs-composer-action-icon-disabled:var(--bs-text-on-disabled);--bs-composer-attach-icon:var(--bs-icon-default);--bs-composer-mic-icon:var(--bs-icon-default);--bs-composer-mic-icon-disabled:var(--bs-icon-disabled);--bs-composer-mic-recording-icon:var(--bs-icon-default);--bs-composer-subtle-hover:var(--bs-color-neutral-container);--bs-composer-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-composer-waveform-color:var(--bs-border-default)}.bs-composer{box-sizing:border-box;display:flex;flex-direction:column;border:1px solid var(--bs-composer-border);border-radius:var(--bs-composer-radius);background:var(--bs-composer-bg);font-family:inherit}.bs-composer--human{border-style:dashed}.bs-composer:focus-within{border-color:var(--bs-composer-border-focus)}.bs-composer__text-row{display:flex;align-items:center;gap:var(--bs-spacing-150);padding:var(--bs-spacing-150)}.bs-composer__input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--bs-input-text);font-family:inherit;font-size:var(--bs-font-size-md)}.bs-composer__input::placeholder{color:var(--bs-input-placeholder)}.bs-composer__input:disabled{color:var(--bs-input-text-disabled);cursor:not-allowed}.bs-composer__waveform{display:inline-flex;flex:1;min-width:0;align-items:center;justify-content:center;gap:3px;overflow:hidden}.bs-composer__waveform-bar{display:inline-block;flex-shrink:0;width:2.5px;border-radius:1.5px;background:var(--bs-composer-waveform-color);height:var(--bs-composer-bar-height, 6px)}.bs-composer__controls-row{display:flex;align-items:center;gap:var(--bs-spacing-200);padding:var(--bs-spacing-150)}.bs-composer__spacer{flex:1}.bs-composer__attach,.bs-composer__mic,.bs-composer__action{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;padding:0;cursor:pointer;font-family:inherit;border-radius:var(--bs-composer-button-radius);width:var(--bs-composer-button-size);height:var(--bs-composer-button-size);flex-shrink:0;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-composer__attach:focus-visible,.bs-composer__mic:focus-visible,.bs-composer__action:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-composer__attach svg,.bs-composer__mic svg,.bs-composer__action svg{width:24px;height:24px}.bs-composer__attach,.bs-composer__mic{background:transparent}.bs-composer__attach:hover:not(:disabled),.bs-composer__mic:hover:not(:disabled){background:var(--bs-composer-subtle-hover)}.bs-composer__attach:active:not(:disabled),.bs-composer__mic:active:not(:disabled){background:var(--bs-composer-subtle-pressed)}.bs-composer__attach{color:var(--bs-composer-attach-icon)}.bs-composer__mic{color:var(--bs-composer-mic-icon)}.bs-composer__mic--recording{color:var(--bs-composer-mic-recording-icon)}.bs-composer__mic:disabled{color:var(--bs-composer-mic-icon-disabled);cursor:not-allowed}.bs-composer__action{background:var(--bs-composer-action-bg);color:var(--bs-composer-action-icon)}.bs-composer__action:hover:not(:disabled){background:var(--bs-composer-action-bg-hover)}.bs-composer__action:active:not(:disabled){background:var(--bs-composer-action-bg-pressed)}.bs-composer__action:disabled{background:var(--bs-composer-action-bg-disabled);color:var(--bs-composer-action-icon-disabled);cursor:not-allowed}`;
+
+const DEFAULT_PLACEHOLDERS = {
+    ai: 'Ask Genie something...',
+    human: 'Message your support agent...',
+};
+// Static (non-animated) placeholder audio-level bar heights in px, sampled from the Figma
+// "Audio Waveform" reference (60 bars, 2.5px wide, 3px gap) -- a real analyzer would drive these
+// from actual audio input, this just reproduces the designed look.
+const WAVEFORM_BAR_HEIGHTS = [
+    6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 18, 14, 34, 22, 22, 10, 28, 18, 12, 24, 6, 20, 30, 14, 8, 26, 16,
+    32, 10, 22, 18, 12, 28, 8, 20, 14, 24, 10, 16, 30, 12, 22, 6, 18, 26, 8, 14, 32, 20, 10, 24, 6,
+];
+const BsComposer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsInput = createEvent(this, "bsInput");
+        this.bsSubmit = createEvent(this, "bsSubmit");
+        this.bsStop = createEvent(this, "bsStop");
+        this.bsVoiceConfirm = createEvent(this, "bsVoiceConfirm");
+        this.bsAttach = createEvent(this, "bsAttach");
+        this.bsMicToggle = createEvent(this, "bsMicToggle");
+    }
+    /**
+     * Which flavor of composer this is: changes the *default* placeholder text (set `placeholder`
+     * directly to override it) and, per the Figma design, renders the container border dashed
+     * instead of solid for `'human'` -- a deliberate visual cue distinguishing a human-support
+     * composer from the AI one, not a layout/token difference.
+     */
+    variant = 'ai';
+    /** Overrides the variant's default placeholder. */
+    placeholder;
+    /** Current text value. Native `input` events don't cross the Shadow DOM boundary, so this
+     * component re-dispatches them as a `bsInput` custom event instead. */
+    value = '';
+    /**
+     * Which of the four mutually-exclusive composer states to render: `idle` (send, enabled),
+     * `generating` (stop, while the AI is responding), `disabled` (send, but not interactive), or
+     * `recording` (voice input in progress -- shows a waveform and a confirm action).
+     */
+    state = 'idle';
+    /**
+     * Accessible name for the text field. This component has no visible `<label>` (chat composers
+     * don't show one in the design), so `ariaLabel` is the only way a consumer gives the textbox an
+     * accessible name -- set it in every real usage.
+     */
+    ariaLabel = null;
+    /** Fires on every keystroke in the text field, with the current value. */
+    bsInput;
+    /** Fires when the primary action button is clicked while `state="idle"`. */
+    bsSubmit;
+    /** Fires when the primary action button is clicked while `state="generating"`. */
+    bsStop;
+    /** Fires when the primary action button is clicked while `state="recording"`. */
+    bsVoiceConfirm;
+    /** Fires when the "+" attach button is clicked. */
+    bsAttach;
+    /** Fires when the mic/stop-recording button is clicked. The consumer decides what that means
+     * (e.g. start recording when idle/generating, or stop recording when `state="recording"`). */
+    bsMicToggle;
+    onInput = (ev) => {
+        const value = ev.target.value;
+        this.bsInput.emit(value);
+    };
+    onAttachClick = () => {
+        this.bsAttach.emit();
+    };
+    onMicClick = () => {
+        this.bsMicToggle.emit();
+    };
+    onActionClick = () => {
+        if (this.state === 'idle') {
+            this.bsSubmit.emit();
+        }
+        else if (this.state === 'generating') {
+            this.bsStop.emit();
+        }
+        else if (this.state === 'recording') {
+            this.bsVoiceConfirm.emit();
+        }
+    };
+    actionLabel() {
+        if (this.state === 'generating')
+            return 'Stop';
+        if (this.state === 'recording')
+            return 'Confirm';
+        return 'Send';
+    }
+    renderActionIcon() {
+        if (this.state === 'generating')
+            return h(StopIcon, null);
+        if (this.state === 'recording')
+            return h(CheckIcon, null);
+        return h(SendIcon, null);
+    }
+    render() {
+        const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
+        const disabled = this.state === 'disabled';
+        const recording = this.state === 'recording';
+        return (h("div", { key: '785b4da8ddb23f4762ac7ea379b3ecdaa9584f40', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '5b470cc47221f93ce9852ebaeaf9a35d740d5df1', class: "bs-composer__text-row" }, h("input", { key: '3f4093d98bc0a0ba8440da9fec1d5cb2e302b746', part: "input", class: "bs-composer__input", type: "text", value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: '21103c8d6ac108e705487f670aeb4aaf89d45981', class: "bs-composer__controls-row" }, h("button", { key: '570ef86150f5b0072008fb0215ed1f0affac7af4', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'ea030569c8b5d2bafaae3ecfe29b956a54921f34' })), 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: '1906485b13395c9c730f7091176dab4e81ecbcb9', 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: '3486957673a3bbf7c3dbac41fd5c19e8dbb6258a', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()))));
+    }
+    static get delegatesFocus() { return true; }
+};
+const PlusIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8 2.5V13.5M2.5 8H13.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+const MicIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8 9.5C9.10457 9.5 10 8.60457 10 7.5V3.5C10 2.39543 9.10457 1.5 8 1.5C6.89543 1.5 6 2.39543 6 3.5V7.5C6 8.60457 6.89543 9.5 8 9.5Z", stroke: "currentColor", "stroke-width": "1.4" }), h("path", { d: "M3.5 7V7.5C3.5 9.98528 5.51472 12 8 12C10.4853 12 12.5 9.98528 12.5 7.5V7", stroke: "currentColor", "stroke-width": "1.4", "stroke-linecap": "round" }), h("path", { d: "M8 12V14.5", stroke: "currentColor", "stroke-width": "1.4", "stroke-linecap": "round" })));
+// Exact "PaperPlaneRight" path from the Figma design (node 45:95), not a hand-drawn approximation.
+const SendIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M13.5 12H7.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M4.54594 20.745C4.4932 20.889 4.48589 21.0457 4.52499 21.1941C4.56409 21.3424 4.64771 21.4751 4.76459 21.5744C4.88147 21.6737 5.02599 21.7348 5.17866 21.7494C5.33133 21.7641 5.48482 21.7315 5.61844 21.6562L21.3684 12.6478C21.4857 12.583 21.5834 12.4879 21.6514 12.3725C21.7195 12.2571 21.7553 12.1255 21.7553 11.9916C21.7553 11.8576 21.7195 11.7261 21.6514 11.6107C21.5834 11.4952 21.4857 11.4002 21.3684 11.3353L5.61844 2.34937C5.48523 2.27487 5.33245 2.24278 5.18052 2.2574C5.02859 2.27201 4.88474 2.33264 4.76817 2.43117C4.65161 2.5297 4.56788 2.66145 4.52817 2.80882C4.48846 2.9562 4.49466 3.11218 4.54594 3.25594L7.5 12L4.54594 20.745Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const StopIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("rect", { x: "6", y: "6", width: "8", height: "8", rx: "1.5", fill: "currentColor" })));
+const CheckIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M4.5 10.5L8 14L15.5 6", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+BsComposer.style = bsComposerCss();
+
+export { BsComposer as bs_composer };

package/dist/esm/bs-data-table.entry.js

@@ -0,0 +1,60 @@
+import { r as registerInstance, c as createEvent, h } from './index-BOj_41o9.js';
+
+const bsDataTableCss = () => `:host{display:block}.bs-data-table{width:100%;border-collapse:collapse;font-family:inherit;font-size:var(--bs-font-size-sm);color:var(--bs-text-default)}.bs-data-table__header-cell{text-align:left;padding:var(--bs-spacing-200) var(--bs-spacing-300);border-bottom:1px solid var(--bs-border-default);font-weight:var(--bs-font-weight-semibold);color:var(--bs-text-secondary);white-space:nowrap}.bs-data-table__sort-button{display:inline-flex;align-items:center;border:none;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;user-select:none}.bs-data-table__sort-button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-data-table__sort-indicator{color:var(--bs-text-action)}.bs-data-table__row:hover{background:var(--bs-surface-hover)}.bs-data-table__cell{padding:var(--bs-spacing-200) var(--bs-spacing-300);border-bottom:1px solid var(--bs-border-default)}.bs-data-table__select-col{width:var(--bs-spacing-500);padding:var(--bs-spacing-200) var(--bs-spacing-300);border-bottom:1px solid var(--bs-border-default)}`;
+
+const BsDataTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsSort = createEvent(this, "bsSort");
+        this.bsRowSelect = createEvent(this, "bsRowSelect");
+    }
+    /** Array prop -- must be set as a JS property (`el.columns = [...]`), not an HTML attribute,
+     * since attributes can only carry strings. See CONVENTIONS.md. */
+    columns = [];
+    /** Array prop -- same JS-property-only rule as `columns`. */
+    rows = [];
+    sortColumn;
+    sortDirection = 'asc';
+    selectable = false;
+    /** Optional custom cell renderer, e.g. for an actions column. Function props are JS-property-only,
+     * same as array props -- there is no attribute equivalent. Falls back to the raw cell value. */
+    cellRenderer;
+    bsSort;
+    bsRowSelect;
+    selectedIds = new Set();
+    onHeaderClick = (column) => {
+        if (!column.sortable)
+            return;
+        const direction = this.sortColumn === column.key && this.sortDirection === 'asc' ? 'desc' : 'asc';
+        this.bsSort.emit({ column: column.key, direction });
+    };
+    onRowCheckboxChange = (row, ev) => {
+        const selected = ev.target.checked;
+        const next = new Set(this.selectedIds);
+        if (selected) {
+            next.add(row.id);
+        }
+        else {
+            next.delete(row.id);
+        }
+        this.selectedIds = next;
+        this.bsRowSelect.emit({ id: row.id, selected });
+    };
+    render() {
+        return (h("table", { key: '9d51da1ed65a523ac8008fde2f77673a68e4e39e', part: "table", class: "bs-data-table" }, h("thead", { key: 'e1baef3845a07af164e2c91cd3979d1ff76eb767', part: "head" }, h("tr", { key: '930648d2ced662352ddfb7dfc9748501324e7bf3' }, this.selectable && h("th", { key: 'd61beed09258e8ba9c087d4d922eebb6591735e9', 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: '2015f29ec50c9e99ce63366ea06a4d9082fc638d', 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.
+        h("td", { part: "cell", class: "bs-data-table__cell", innerHTML: this.cellRenderer(row, column) })) : (
+        // Default path renders raw cell values as plain text so untrusted row data
+        // (e.g. user-submitted names) can never be interpreted as HTML.
+        h("td", { part: "cell", class: "bs-data-table__cell" }, String(row[column.key] ?? ''))))))))));
+    }
+};
+BsDataTable.style = bsDataTableCss();
+
+export { BsDataTable as bs_data_table };

package/dist/esm/bs-input.entry.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, c as createEvent, h } from './index-BOj_41o9.js';
+
+const bsInputCss = () => `:host{display:block}.bs-input{display:flex;flex-direction:column;gap:var(--bs-spacing-100);font-family:inherit}.bs-input__label{font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);color:var(--bs-input-label)}.bs-input__control{height:var(--bs-spacing-600);padding:0 var(--bs-spacing-300);border:1px solid var(--bs-input-border-default);border-radius:var(--bs-border-radius-100);background:var(--bs-input-bg-default);color:var(--bs-input-text);font-size:var(--bs-font-size-md);font-family:inherit}.bs-input__control::placeholder{color:var(--bs-input-placeholder)}.bs-input__control:hover:not(:disabled){border-color:var(--bs-input-border-hover)}.bs-input__control:focus-visible{outline:none;border-color:var(--bs-input-border-focus)}.bs-input__control:disabled{background:var(--bs-input-bg-disabled);color:var(--bs-input-text-disabled);cursor:not-allowed}.bs-input--error .bs-input__control{border-color:var(--bs-input-border-error)}.bs-input--error .bs-input__label{color:var(--bs-input-label)}.bs-input__description{font-size:var(--bs-font-size-xs);color:var(--bs-input-description)}.bs-input__error{font-size:var(--bs-font-size-xs);color:var(--bs-input-error)}`;
+
+const BsInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsInput = createEvent(this, "bsInput");
+        this.bsChange = createEvent(this, "bsChange");
+    }
+    /** Current value. Native `input`/`change` events don't cross the Shadow DOM boundary, so this
+     * component re-dispatches them as `bsInput`/`bsChange` custom events instead. */
+    value = '';
+    type = 'text';
+    label;
+    placeholder;
+    description;
+    error;
+    disabled = false;
+    bsInput;
+    bsChange;
+    onInput = (ev) => {
+        const value = ev.target.value;
+        this.bsInput.emit(value);
+    };
+    onChange = (ev) => {
+        const value = ev.target.value;
+        this.bsChange.emit(value);
+    };
+    render() {
+        return (h("div", { key: '94a90f72a348259c9e54b1eb61ca694baf7c0386', 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: '3760b135aaf4002b86e0552af5e3cad110b45afe', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), h("input", { key: '761d594818ee8ad917562b9dbe945e5ea8d9210c', id: "control", part: "control", class: "bs-input__control", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+    }
+    static get delegatesFocus() { return true; }
+};
+BsInput.style = bsInputCss();
+
+export { BsInput as bs_input };

package/dist/esm/bs-modal.entry.js

@@ -0,0 +1,67 @@
+import { r as registerInstance, c as createEvent, h } from './index-BOj_41o9.js';
+
+const bsModalCss = () => `.bs-modal__backdrop{position:fixed;inset:0;z-index:var(--bs-z-index-modal);display:flex;align-items:center;justify-content:center;background:rgba(0, 0, 0, 0.4)}.bs-modal__dialog{display:flex;flex-direction:column;max-height:calc(100vh - var(--bs-spacing-800));background:var(--bs-surface-raised);border-radius:var(--bs-border-radius-200);box-shadow:var(--bs-shadow-xl);font-family:inherit}.bs-modal__dialog--sm{width:360px}.bs-modal__dialog--md{width:560px}.bs-modal__dialog--lg{width:800px}.bs-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--bs-spacing-400);border-bottom:1px solid var(--bs-border-default)}.bs-modal__heading{font-size:var(--bs-font-size-lg);font-weight:var(--bs-font-weight-semibold);color:var(--bs-text-default)}.bs-modal__close{border:none;background:none;font-size:var(--bs-font-size-xl);line-height:1;color:var(--bs-icon-muted, var(--bs-text-secondary));cursor:pointer;padding:var(--bs-spacing-100)}.bs-modal__body{padding:var(--bs-spacing-400);overflow-y:auto}.bs-modal__footer--visible{display:flex;justify-content:flex-end;gap:var(--bs-spacing-200);padding:var(--bs-spacing-400);border-top:1px solid var(--bs-border-default)}`;
+
+const BsModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsClose = createEvent(this, "bsClose");
+    }
+    /** Mutable + reflected so the component can close itself (backdrop click, Escape, close button)
+     * the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to. */
+    open = false;
+    heading;
+    size = 'md';
+    bsClose;
+    /** Tracks whether the `footer` slot has assigned content, so the footer bar (border + padding)
+     * only renders when there's actually something to put in it. */
+    hasFooter = false;
+    onFooterSlotchange = (ev) => {
+        this.hasFooter = ev.target.assignedNodes().length > 0;
+    };
+    dialogRef;
+    previouslyFocused;
+    wasOpen = false;
+    close = () => {
+        this.open = false;
+        this.bsClose.emit();
+    };
+    onKeydown(ev) {
+        if (this.open && ev.key === 'Escape') {
+            this.close();
+        }
+    }
+    onBackdropClick = (ev) => {
+        if (ev.target === ev.currentTarget) {
+            this.close();
+        }
+    };
+    // Simple focus containment: rather than manually enumerating focusable elements (which can't
+    // 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.
+    onFocusIn(ev) {
+        if (this.open && this.dialogRef && !ev.composedPath().includes(this.dialogRef)) {
+            this.dialogRef.focus();
+        }
+    }
+    componentDidRender() {
+        if (this.open && !this.wasOpen) {
+            this.previouslyFocused = document.activeElement;
+            this.dialogRef?.focus();
+        }
+        else if (!this.open && this.wasOpen) {
+            this.previouslyFocused?.focus();
+        }
+        this.wasOpen = this.open;
+    }
+    render() {
+        if (!this.open) {
+            return null;
+        }
+        return (h("div", { part: "backdrop", class: "bs-modal__backdrop", onClick: this.onBackdropClick }, h("div", { ref: el => (this.dialogRef = el), tabIndex: -1, part: "dialog", class: `bs-modal__dialog bs-modal__dialog--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.heading }, h("div", { part: "header", class: "bs-modal__header" }, h("span", { class: "bs-modal__heading" }, this.heading), h("button", { part: "close", class: "bs-modal__close", "aria-label": "Close", onClick: this.close }, "\u00D7")), h("div", { part: "body", class: "bs-modal__body" }, h("slot", null)), h("div", { part: "footer", class: `bs-modal__footer ${this.hasFooter ? 'bs-modal__footer--visible' : ''}` }, h("slot", { name: "footer", onSlotchange: this.onFooterSlotchange })))));
+    }
+};
+BsModal.style = bsModalCss();
+
+export { BsModal as bs_modal };