@brandsync/wc 0.0.1

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

@@ -0,0 +1,116 @@
+'use strict';
+
+var index = require('./index-nyOcuVbF.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) {
+        index.registerInstance(this, hostRef);
+        this.bsInput = index.createEvent(this, "bsInput");
+        this.bsSubmit = index.createEvent(this, "bsSubmit");
+        this.bsStop = index.createEvent(this, "bsStop");
+        this.bsVoiceConfirm = index.createEvent(this, "bsVoiceConfirm");
+        this.bsAttach = index.createEvent(this, "bsAttach");
+        this.bsMicToggle = index.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 index.h(StopIcon, null);
+        if (this.state === 'recording')
+            return index.h(CheckIcon, null);
+        return index.h(SendIcon, null);
+    }
+    render() {
+        const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
+        const disabled = this.state === 'disabled';
+        const recording = this.state === 'recording';
+        return (index.h("div", { key: '785b4da8ddb23f4762ac7ea379b3ecdaa9584f40', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, index.h("div", { key: '5b470cc47221f93ce9852ebaeaf9a35d740d5df1', class: "bs-composer__text-row" }, index.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 })), index.h("div", { key: '21103c8d6ac108e705487f670aeb4aaf89d45981', class: "bs-composer__controls-row" }, index.h("button", { key: '570ef86150f5b0072008fb0215ed1f0affac7af4', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, index.h(PlusIcon, { key: 'ea030569c8b5d2bafaae3ecfe29b956a54921f34' })), recording ? (index.h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (index.h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (index.h("span", { class: "bs-composer__spacer" })), index.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 ? index.h(StopIcon, null) : index.h(MicIcon, null)), index.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 = () => (index.h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M8 2.5V13.5M2.5 8H13.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+const MicIcon = () => (index.h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.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" }), index.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" }), index.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 = () => (index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M13.5 12H7.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.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 = () => (index.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("rect", { x: "6", y: "6", width: "8", height: "8", rx: "1.5", fill: "currentColor" })));
+const CheckIcon = () => (index.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.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();
+
+exports.bs_composer = BsComposer;

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

@@ -0,0 +1,62 @@
+'use strict';
+
+var index = require('./index-nyOcuVbF.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) {
+        index.registerInstance(this, hostRef);
+        this.bsSort = index.createEvent(this, "bsSort");
+        this.bsRowSelect = index.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 (index.h("table", { key: '9d51da1ed65a523ac8008fde2f77673a68e4e39e', part: "table", class: "bs-data-table" }, index.h("thead", { key: 'e1baef3845a07af164e2c91cd3979d1ff76eb767', part: "head" }, index.h("tr", { key: '930648d2ced662352ddfb7dfc9748501324e7bf3' }, this.selectable && index.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 (index.h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (index.h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && index.h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
+        }))), index.h("tbody", { key: '2015f29ec50c9e99ce63366ea06a4d9082fc638d', part: "body" }, this.rows.map(row => (index.h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (index.h("td", { class: "bs-data-table__select-col" }, index.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.
+        index.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.
+        index.h("td", { part: "cell", class: "bs-data-table__cell" }, String(row[column.key] ?? ''))))))))));
+    }
+};
+BsDataTable.style = bsDataTableCss();
+
+exports.bs_data_table = BsDataTable;

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

@@ -0,0 +1,42 @@
+'use strict';
+
+var index = require('./index-nyOcuVbF.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) {
+        index.registerInstance(this, hostRef);
+        this.bsInput = index.createEvent(this, "bsInput");
+        this.bsChange = index.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 (index.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.
+        index.h("label", { key: '3760b135aaf4002b86e0552af5e3cad110b45afe', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), index.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 ? (index.h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, this.error)) : this.description ? (index.h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+    }
+    static get delegatesFocus() { return true; }
+};
+BsInput.style = bsInputCss();
+
+exports.bs_input = BsInput;

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

@@ -0,0 +1,69 @@
+'use strict';
+
+var index = require('./index-nyOcuVbF.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) {
+        index.registerInstance(this, hostRef);
+        this.bsClose = index.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 (index.h("div", { part: "backdrop", class: "bs-modal__backdrop", onClick: this.onBackdropClick }, index.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 }, index.h("div", { part: "header", class: "bs-modal__header" }, index.h("span", { class: "bs-modal__heading" }, this.heading), index.h("button", { part: "close", class: "bs-modal__close", "aria-label": "Close", onClick: this.close }, "\u00D7")), index.h("div", { part: "body", class: "bs-modal__body" }, index.h("slot", null)), index.h("div", { part: "footer", class: `bs-modal__footer ${this.hasFooter ? 'bs-modal__footer--visible' : ''}` }, index.h("slot", { name: "footer", onSlotchange: this.onFooterSlotchange })))));
+    }
+};
+BsModal.style = bsModalCss();
+
+exports.bs_modal = BsModal;