@brandsync/wc 0.0.8 → 0.0.10

package/dist/esm/bs-chatbot-sources-drawer.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-nLORuTUY.js';
+
+const bsChatbotSourcesDrawerCss = () => `:host{display:block;--bs-chatbot-sources-drawer-bg:var(--bs-surface-raised);--bs-chatbot-sources-drawer-header-shadow:var(--bs-shadow-xs);--bs-chatbot-sources-drawer-header-padding-x:var(--bs-spacing-200);--bs-chatbot-sources-drawer-header-padding-top:var(--bs-spacing-150);--bs-chatbot-sources-drawer-header-padding-bottom:var(--bs-spacing-100);--bs-chatbot-sources-drawer-heading-color:var(--bs-text-default);--bs-chatbot-sources-drawer-count-bg:var(--bs-badge-bg-neutral-container);--bs-chatbot-sources-drawer-count-color:var(--bs-badge-text-neutral);--bs-chatbot-sources-drawer-collapse-hover:var(--bs-surface-hover);--bs-chatbot-sources-drawer-section-gap:var(--bs-spacing-200);--bs-chatbot-sources-drawer-list-padding:var(--bs-spacing-200);--bs-chatbot-sources-drawer-list-gap:var(--bs-spacing-50)}.bs-chatbot-sources-drawer{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-chatbot-sources-drawer-section-gap);width:100%;height:100%;background:var(--bs-chatbot-sources-drawer-bg);font-family:inherit}.bs-chatbot-sources-drawer__header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:var(--bs-chatbot-sources-drawer-header-padding-top) var(--bs-chatbot-sources-drawer-header-padding-x) var(--bs-chatbot-sources-drawer-header-padding-bottom);box-shadow:var(--bs-chatbot-sources-drawer-header-shadow)}.bs-chatbot-sources-drawer__title-group{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-chatbot-sources-drawer__heading{margin:0;color:var(--bs-chatbot-sources-drawer-heading-color);font-size:var(--bs-font-size-2xl);font-weight:var(--bs-font-weight-bold);line-height:calc(var(--bs-line-height-heading-h4) * 1px)}.bs-chatbot-sources-drawer__count{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:16px;max-width:34px;padding:var(--bs-spacing-50) var(--bs-spacing-100);background:var(--bs-chatbot-sources-drawer-count-bg);border-radius:var(--bs-border-radius-50);color:var(--bs-chatbot-sources-drawer-count-color);font-size:var(--bs-font-size-xs);line-height:calc(var(--bs-line-height-caption-sm) * 1px)}.bs-chatbot-sources-drawer__collapse{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:none;border:none;border-radius:var(--bs-border-radius-100);color:var(--bs-icon-default);cursor:pointer}.bs-chatbot-sources-drawer__collapse:hover{background:var(--bs-chatbot-sources-drawer-collapse-hover)}.bs-chatbot-sources-drawer__collapse:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:1px}.bs-chatbot-sources-drawer__list{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-chatbot-sources-drawer-list-gap);padding:0 var(--bs-chatbot-sources-drawer-list-padding) var(--bs-chatbot-sources-drawer-list-padding);overflow-y:auto}`;
+
+const BsChatbotSourcesDrawer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsCollapse = createEvent(this, "bsCollapse");
+    }
+    get el() { return getElement(this); }
+    /** The panel title. */
+    heading = 'Sources';
+    /**
+     * Overrides the auto-detected count badge. By default the badge reflects the number of slotted
+     * `bs-source-link` children, so most consumers don't need to set this.
+     */
+    count;
+    /** Fires when the collapse chevron is clicked. The consuming app owns actually hiding the panel. */
+    bsCollapse;
+    slottedCount = 0;
+    onSlotchange = (event) => {
+        const slot = event.target;
+        this.slottedCount = slot.assignedElements().filter(el => el.tagName.toLowerCase() === 'bs-source-link').length;
+    };
+    onCollapseClick = () => {
+        this.bsCollapse.emit();
+    };
+    render() {
+        const displayCount = this.count ?? this.slottedCount;
+        return (h("div", { key: '54cb56455b630d5ed30dd2a925728f2803143b17', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'd24eabd0ac2c36ec4033a9b5c361aa32225fa78a', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '0bec3fb848552496e1884b4731c5e1964570c70d', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '955389bd4f3ba1950c9af404e5880a6837298384', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '40d83288bbd257504ef814247c7bd4664df9e169', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '56a15c64faea80790387d4918843c806b684268b', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: 'c321f53482f0265357a6a29fc40e0ff3766f0b74', name: "collapse-icon" }, h(CaretRightIcon, { key: 'c3d4c17bebd2611b27c3e7f87d359e4b46c41d4f' })))), h("div", { key: 'd6c4b8e3660f765112f0c33dd72021af118332d9', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '19759a01d921ed2517cbca2b01ea53741a207b8b', onSlotchange: this.onSlotchange }))));
+    }
+};
+const CaretRightIcon = () => (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M7.5 4.375L13.125 10L7.5 15.625", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+BsChatbotSourcesDrawer.style = bsChatbotSourcesDrawerCss();
+
+export { BsChatbotSourcesDrawer as bs_chatbot_sources_drawer };

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

@@ -15,7 +15,7 @@ const BsChatbotSuggestionButton = class {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: 'fc87dab75d560ce5f6612c2bf61875d574eddd1f', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '27ae5b010dcac9ebbb3924c72299cbb5a067ce6b' })));
+        return (h("button", { key: '2a5213dc81a29dd68f99717b93e6f5396db5c5da', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '28b5ac8ddcdab80fb377a897dc1af62257473385' })));
     }
 };
 BsChatbotSuggestionButton.style = bsChatbotSuggestionButtonCss();

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

@@ -0,0 +1,41 @@
+import { r as registerInstance, c as createEvent, h } from './index-nLORuTUY.js';
+
+const bsComposerStatusBannerCss = () => `:host{display:block;--bs-composer-status-banner-radius:var(--bs-border-radius-150);--bs-composer-status-banner-padding-x:var(--bs-spacing-150);--bs-composer-status-banner-padding-top:var(--bs-spacing-100);--bs-composer-status-banner-padding-bottom:var(--bs-spacing-200);--bs-composer-status-banner-gap:var(--bs-spacing-100);--bs-composer-status-banner-icon-gap:var(--bs-spacing-75);--bs-composer-status-banner-error-bg:var(--bs-color-error-container);--bs-composer-status-banner-error-text:var(--bs-text-error);--bs-composer-status-banner-error-action-bg:var(--bs-color-error-default);--bs-composer-status-banner-error-action-bg-hover:var(--bs-color-error-hover);--bs-composer-status-banner-info-bg:var(--bs-color-info-container);--bs-composer-status-banner-info-text:var(--bs-text-info);--bs-composer-status-banner-info-action-bg:var(--bs-color-info-default);--bs-composer-status-banner-info-action-bg-hover:var(--bs-color-info-hover);--bs-composer-status-banner-neutral-bg:var(--bs-color-neutral-container);--bs-composer-status-banner-neutral-text:var(--bs-text-default);--bs-composer-status-banner-neutral-action-bg:var(--bs-color-neutral-container);--bs-composer-status-banner-neutral-action-bg-hover:var(--bs-color-neutral-container-hover);--bs-composer-status-banner-neutral-action-border:var(--bs-border-neutral-container);--bs-composer-status-banner-warning-bg:var(--bs-color-warning-container);--bs-composer-status-banner-warning-text:var(--bs-text-warning);--bs-composer-status-banner-warning-action-bg:var(--bs-color-warning-default);--bs-composer-status-banner-warning-action-bg-hover:var(--bs-color-warning-hover);--bs-composer-status-banner-close-hover-bg:var(--bs-color-neutral-container-hover)}.bs-composer-status-banner{box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-composer-status-banner-gap);padding:var(--bs-composer-status-banner-padding-top) var(--bs-composer-status-banner-padding-x) var(--bs-composer-status-banner-padding-bottom);border-radius:var(--bs-composer-status-banner-radius) var(--bs-composer-status-banner-radius) 0 0;font-family:inherit}.bs-composer-status-banner--error{background:var(--bs-composer-status-banner-error-bg);color:var(--bs-composer-status-banner-error-text)}.bs-composer-status-banner--info{background:var(--bs-composer-status-banner-info-bg);color:var(--bs-composer-status-banner-info-text)}.bs-composer-status-banner--neutral{background:var(--bs-composer-status-banner-neutral-bg);color:var(--bs-composer-status-banner-neutral-text)}.bs-composer-status-banner--warning{background:var(--bs-composer-status-banner-warning-bg);color:var(--bs-composer-status-banner-warning-text)}.bs-composer-status-banner__message-group{box-sizing:border-box;display:flex;align-items:center;flex:1 0 0;min-width:0;gap:var(--bs-composer-status-banner-icon-gap)}.bs-composer-status-banner__icon{display:inline-flex;flex-shrink:0;width:20px;height:20px}.bs-composer-status-banner__icon ::slotted(*){display:block;width:100%;height:100%}.bs-composer-status-banner__message{margin:0;flex:1 0 0;min-width:0;font-size:var(--bs-font-size-md);line-height:calc(var(--bs-line-height-body-md) * 1px);word-break:break-word}.bs-composer-status-banner__action{box-sizing:border-box;flex-shrink:0;height:32px;padding:0 var(--bs-spacing-150);border:none;border-radius:var(--bs-border-radius-100);color:var(--bs-text-on-action);font-family:inherit;font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);line-height:calc(var(--bs-line-height-body-sm) * 1px);cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-composer-status-banner--error .bs-composer-status-banner__action{background:var(--bs-composer-status-banner-error-action-bg)}.bs-composer-status-banner--error .bs-composer-status-banner__action:hover{background:var(--bs-composer-status-banner-error-action-bg-hover)}.bs-composer-status-banner--info .bs-composer-status-banner__action{background:var(--bs-composer-status-banner-info-action-bg)}.bs-composer-status-banner--info .bs-composer-status-banner__action:hover{background:var(--bs-composer-status-banner-info-action-bg-hover)}.bs-composer-status-banner--warning .bs-composer-status-banner__action{background:var(--bs-composer-status-banner-warning-action-bg)}.bs-composer-status-banner--warning .bs-composer-status-banner__action:hover{background:var(--bs-composer-status-banner-warning-action-bg-hover)}.bs-composer-status-banner--neutral .bs-composer-status-banner__action{background:var(--bs-composer-status-banner-neutral-action-bg);border:var(--bs-border-width-thin) solid var(--bs-composer-status-banner-neutral-action-border);color:var(--bs-text-default)}.bs-composer-status-banner--neutral .bs-composer-status-banner__action:hover{background:var(--bs-composer-status-banner-neutral-action-bg-hover)}.bs-composer-status-banner__close{box-sizing:border-box;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:var(--bs-border-radius-100);color:inherit;cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-composer-status-banner__close:hover{background:var(--bs-composer-status-banner-close-hover-bg)}.bs-composer-status-banner__close svg{width:20px;height:20px}.bs-composer-status-banner__close:focus-visible,.bs-composer-status-banner__action:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:1px}`;
+
+const BsComposerStatusBanner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsAction = createEvent(this, "bsAction");
+        this.bsClose = createEvent(this, "bsClose");
+    }
+    /** Which severity/style to render. Drives background, text/icon color, and the action button's color. */
+    type = 'error';
+    /** The message text. */
+    message = 'This is a message';
+    /** Whether the leading icon (default: clock) is rendered. */
+    showIcon = true;
+    /** Whether the "Continue"-style action button is rendered. */
+    showButton = false;
+    /** Label for the action button, only rendered when `showButton` is true. */
+    actionLabel = 'Continue';
+    /** Whether the close button is rendered. */
+    allowClose = true;
+    /** Fires when the action button is clicked. Only relevant when `showButton` is true. */
+    bsAction;
+    /** Fires when the close button is clicked. Only relevant when `allowClose` is true. */
+    bsClose;
+    onActionClick = () => {
+        this.bsAction.emit();
+    };
+    onCloseClick = () => {
+        this.bsClose.emit();
+    };
+    render() {
+        return (h("div", { key: 'b51067b9af0210682fc60b5340560bf6ee42d655', class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: 'a6774d57e22e1b39fe0c9add8d96ed1c349bfeae', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '6a2b131a63a2d2cbe33f62519d1602752bc98204', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '6123c6a61652dfb504cf2e140a012fcba27e7468', name: "icon" }, h(ClockIcon, { key: '5415d7c71e2976a552955606e7288a4b806f1dbe' })))), h("p", { key: '1580b9f2b53390c32e38763c0cef23cb5d7ffa4c', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: 'bb08fce8f48253787015308bfc66e04835069670', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: 'b9d64c66155cb8c5b884b48a442c9e0d09be9111', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: '2779b3af1d5348ee510cd1fe4978cbfbbfb33c5e' })))));
+    }
+};
+const ClockIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("circle", { cx: "10", cy: "10", r: "7.25", stroke: "currentColor", "stroke-width": "1.3" }), h("path", { d: "M10 5.83V10L12.5 11.67", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const CloseIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M15 5L5 15", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M15 15L5 5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+BsComposerStatusBanner.style = bsComposerStatusBannerCss();
+
+export { BsComposerStatusBanner as bs_composer_status_banner };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-nLORuTUY.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-nLORuTUY.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 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__attachments-row{display:none}.bs-composer__attachments-row--visible{display:block}.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...',
@@ -23,6 +23,7 @@ const BsComposer = class {
         this.bsAttach = createEvent(this, "bsAttach");
         this.bsMicToggle = createEvent(this, "bsMicToggle");
     }
+    get el() { return getElement(this); }
     /**
      * 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
@@ -47,6 +48,10 @@ const BsComposer = class {
      * accessible name -- set it in every real usage.
      */
     ariaLabel = null;
+    /** Tracks whether the `attachments` slot has assigned content, so the row above the text field
+     * (padding, border) only takes up space when a consumer has actually put something there --
+     * same reasoning/pattern as `hasIcon`/`hasLabel` in `bs-attachment`. */
+    hasAttachments = false;
     /** Fires on every keystroke in the text field, with the current value. */
     bsInput;
     /** Fires when the primary action button is clicked while `state="idle"`. */
@@ -60,6 +65,15 @@ const BsComposer = class {
     /** 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;
+    /** Computes the initial `hasAttachments` state directly from the host's light DOM children,
+     * before first render -- same reasoning as `bs-attachment`'s `componentWillLoad`: `slotchange`
+     * alone never fires for a slot that starts out empty and stays that way. */
+    componentWillLoad() {
+        this.hasAttachments = Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'attachments');
+    }
+    onAttachmentsSlotchange = (ev) => {
+        this.hasAttachments = ev.target.assignedNodes().length > 0;
+    };
     onInput = (ev) => {
         const value = ev.target.value;
         this.bsInput.emit(value);
@@ -99,7 +113,7 @@ const BsComposer = class {
         const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
         const disabled = this.state === 'disabled';
         const recording = this.state === 'recording';
-        return (h("div", { key: '04c250520759948faa89bd625646a62c79cc6cee', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '8d5d99b90141d3dbeff1b31851cbbb5eaae3d920', class: "bs-composer__text-row" }, h("input", { key: '4eb1ef1b51a41de86da466c8a2c9ea93a7746b43', 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: '8a733762c56ae3f4de7f2af1d89fb05d521b1d17', class: "bs-composer__controls-row" }, h("button", { key: 'b4cd13546ec447f2650a02f43dc2fc0b6d65c8ef', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'af8da06a2550d5c37d3737b145ad70c006e1ce66' })), 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: '18b81bf7dd6057c3954566cd12994bb8589ff4ee', 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: 'a1cf9435fa7dc8e52db7ae148e07fde06971f27c', 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: '6779413b48314161a75ec75be273e72fe4d622c3', name: "actions-end" }))));
+        return (h("div", { key: '5b367f64f2cfe04d7815b52d6abc3baebf46453e', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: 'f1e7dbeb16e8f2cd0b4e2345f6c5fc03bcc5177c', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '6e59f2f3857c81a132c5873d9a32dbed27eb2c02', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '79a0a03a7f66b654f5ab8379447cf00459c7a6c3', class: "bs-composer__text-row" }, h("input", { key: 'b9560af8433d186fdadd5b05368290d077c5e8ce', 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: '5b9a8edd0412e1a86efd33afae37fb73559a89f6', class: "bs-composer__controls-row" }, h("button", { key: '5c405e009e9f61902ca6623e09efa238e71737a3', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: '5832b29579d3c8c855237f286366944aeb6553f6' })), 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: 'b4006fe5d452d02d0093d1dba0b65e6f33e5a65b', 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: 'b647f1dd0c40dc795b96da5cad695300b0c9dfd3', 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: '2c78b5641091024925e84ca1a779ac1fc37fc0ae', name: "actions-end" }))));
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -41,11 +41,11 @@ const BsDataTable = class {
         this.bsRowSelect.emit({ id: row.id, selected });
     };
     render() {
-        return (h("table", { key: '8276a72f6539690dd8189cd29e42993c3d61862c', part: "table", class: "bs-data-table" }, h("thead", { key: '2d3e42222eec0bcbe3d06f26f7a3ae53dd5ccdc0', part: "head" }, h("tr", { key: '45994ea59d9a1a347bb8abdf25d7b1b919822a61' }, this.selectable && h("th", { key: '05d5efa74feee1545e1c4b9dfc45acd7ffd10e6a', class: "bs-data-table__select-col" }), this.columns.map(column => {
+        return (h("table", { key: '9b16ade44ff85120e9629722de8e8c1738835c1b', part: "table", class: "bs-data-table" }, h("thead", { key: '644eed606e68782ada42c289bb7bfc8d6de4affb', part: "head" }, h("tr", { key: '4e4ea75018796c77f14703c1c1402022f8c8cde9' }, this.selectable && h("th", { key: '85460f7c2eab6ad0f3604f72bcd81a4aa8699c03', 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: '9c1dc006341b63e5d22df655836f326ba27e7b9d', 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: '024cb8a25cc6471e7074d119b78e6a8e22f86450', 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.

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

@@ -1,15 +1,22 @@
-import { r as registerInstance, c as createEvent, h } from './index-nLORuTUY.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-nLORuTUY.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 bsInputCss = () => `:host{display:block;--bs-input-radius:var(--bs-border-radius-100);--bs-input-height:var(--bs-spacing-600);--bs-input-padding-x:var(--bs-spacing-150);--bs-input-padding-y:var(--bs-spacing-100);--bs-input-gap:var(--bs-spacing-200);--bs-input-icon-size:var(--bs-spacing-300);--bs-input-stack-gap:var(--bs-spacing-50);--bs-input-error-icon-size:var(--bs-spacing-250);--bs-input-field-bg:var(--bs-input-bg-default);--bs-input-field-bg-disabled:var(--bs-input-bg-disabled);--bs-input-field-border:var(--bs-input-border-default);--bs-input-field-border-hover:var(--bs-input-border-hover);--bs-input-field-border-focus:var(--bs-input-border-focus);--bs-input-field-border-error:var(--bs-input-border-error);--bs-input-field-text:var(--bs-input-text);--bs-input-field-placeholder:var(--bs-input-placeholder);--bs-input-label-color:var(--bs-input-label);--bs-input-description-color:var(--bs-input-description);--bs-input-error-color:var(--bs-input-error);--bs-input-icon-color:var(--bs-icon-muted);--bs-input-icon-color-error:var(--bs-input-icon-error);--bs-input-icon-color-disabled:var(--bs-input-icon-disabled);--bs-input-chip-bg:var(--bs-input-bg-disabled);--bs-input-chip-text:var(--bs-input-text)}.bs-input{display:flex;flex-direction:column;gap:var(--bs-input-stack-gap);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-color)}.bs-input__required{color:var(--bs-input-error-color);margin-left:2px}.bs-input__field{box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-input-gap);height:var(--bs-input-height);padding:var(--bs-input-padding-y) var(--bs-input-padding-x);border:1px solid var(--bs-input-field-border);border-radius:var(--bs-input-radius);background:var(--bs-input-field-bg)}.bs-input__field:hover:not(.bs-input__field--disabled){border-color:var(--bs-input-field-border-hover)}.bs-input__field:focus-within{border-color:var(--bs-input-field-border-focus)}.bs-input__field--error{border-color:var(--bs-input-field-border-error)}.bs-input__field--disabled{background:var(--bs-input-field-bg-disabled);cursor:not-allowed}.bs-input__control{flex:1;min-width:0;border:none;outline:none;padding:0;background:transparent;color:var(--bs-input-field-text);font-size:var(--bs-font-size-md);font-family:inherit}.bs-input__control::placeholder{color:var(--bs-input-field-placeholder)}.bs-input__control:disabled{color:var(--bs-input-text-disabled);cursor:not-allowed}.bs-input__control::-webkit-strong-password-auto-fill-button,.bs-input__control::-webkit-credentials-auto-fill-button{display:none !important;visibility:hidden;pointer-events:none;position:absolute;right:0}.bs-input__control::-webkit-textfield-decoration-container{visibility:hidden}.bs-input__control::-ms-reveal,.bs-input__control::-ms-clear{display:none}.bs-input--error .bs-input__label{color:var(--bs-input-label-color)}.bs-input__icon,.bs-input__end-icon{display:none;align-items:center;flex-shrink:0;color:var(--bs-input-icon-color)}.bs-input__icon--visible,.bs-input__end-icon--visible{display:flex}.bs-input__icon ::slotted(*),.bs-input__end-icon ::slotted(*){display:block;width:var(--bs-input-icon-size);height:var(--bs-input-icon-size)}.bs-input__field--error .bs-input__icon,.bs-input__field--error .bs-input__end-icon{color:var(--bs-input-icon-color-error)}.bs-input__field--disabled .bs-input__icon,.bs-input__field--disabled .bs-input__end-icon{color:var(--bs-input-icon-color-disabled)}.bs-input__description{font-size:var(--bs-font-size-xs);color:var(--bs-input-description-color)}.bs-input__error{display:flex;align-items:center;gap:var(--bs-input-stack-gap);font-size:var(--bs-font-size-xs);color:var(--bs-input-error-color)}.bs-input__error-icon{flex-shrink:0;width:var(--bs-input-error-icon-size);height:var(--bs-input-error-icon-size)}.bs-input__field--textarea{height:auto;align-items:flex-start}.bs-input__control--textarea{resize:vertical}.bs-input__stepper{display:flex;flex-direction:column}.bs-input__stepper-btn{display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;padding:0;cursor:pointer}.bs-input__stepper-btn:disabled{cursor:not-allowed}.bs-input__password-toggle{display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;padding:0;cursor:pointer;width:var(--bs-input-icon-size);height:var(--bs-input-icon-size)}.bs-input__password-toggle:disabled{cursor:not-allowed}.bs-input__password-toggle svg{width:100%;height:100%}.bs-input__chevron{width:var(--bs-input-icon-size);height:var(--bs-input-icon-size)}.bs-input__field-wrapper{position:relative;width:100%}.bs-input__dropdown-menu{position:absolute;top:calc(100% + var(--bs-input-stack-gap));left:0;right:0;z-index:1}.bs-input__calendar{width:var(--bs-input-icon-size);height:var(--bs-input-icon-size)}.bs-input__search-icon{width:var(--bs-input-icon-size);height:var(--bs-input-icon-size)}.bs-input__field--chip{flex-wrap:wrap;height:auto;min-height:var(--bs-input-height)}.bs-input__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bs-spacing-100);flex:1;min-width:0}.bs-input__chip{display:inline-flex;align-items:center;gap:4px;background:var(--bs-input-chip-bg);color:var(--bs-input-chip-text);border-radius:var(--bs-input-radius);padding:2px 6px;font-size:var(--bs-font-size-sm)}.bs-input__chip-remove{border:none;background:transparent;color:inherit;cursor:pointer;padding:0;line-height:1}.bs-input__chip-input{flex:1;min-width:60px}.bs-input__title-select,.bs-input__country-select{flex-shrink:0;width:auto;border:none;outline:none;background:transparent;color:var(--bs-input-field-text);font-size:var(--bs-font-size-md);font-family:inherit}.bs-input__field--pin{border:none;padding:0;background:transparent;gap:var(--bs-input-gap)}.bs-input__pin-cell{box-sizing:border-box;width:var(--bs-input-height);height:var(--bs-input-height);text-align:center;border:1px solid var(--bs-input-field-border);border-radius:var(--bs-input-radius);background:var(--bs-input-field-bg);color:var(--bs-input-field-text);font-size:var(--bs-font-size-md);font-family:inherit;outline:none}.bs-input__pin-cell:focus{border-color:var(--bs-input-field-border-focus)}.bs-input__field--pin.bs-input__field--disabled .bs-input__pin-cell{background:var(--bs-input-field-bg-disabled);cursor:not-allowed}`;
 
 const BsInput = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.bsInput = createEvent(this, "bsInput");
         this.bsChange = createEvent(this, "bsChange");
+        this.bsOpen = createEvent(this, "bsOpen");
+        this.bsChipAdd = createEvent(this, "bsChipAdd");
+        this.bsChipRemove = createEvent(this, "bsChipRemove");
+        this.bsTitleChange = createEvent(this, "bsTitleChange");
+        this.bsCountryChange = createEvent(this, "bsCountryChange");
     }
+    get el() { return getElement(this); }
     /** 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. */
+     * component re-dispatches them as `bsInput`/`bsChange` custom events instead. Mutable so the
+     * `number` type's stepper buttons can update it directly. */
     value = '';
     type = 'text';
     label;
@@ -17,8 +24,83 @@ const BsInput = class {
     description;
     error;
     disabled = false;
+    /** Marks the field as required: renders a red `*` after the label and sets `aria-required="true"`
+     * on the control. Applies regardless of `type`. */
+    required = false;
+    /** Step size for `type="number"`'s increment/decrement stepper buttons. */
+    step = 1;
+    /** Minimum value for `type="number"`'s stepper buttons. */
+    min;
+    /** Maximum value for `type="number"`'s stepper buttons. */
+    max;
+    /** Options for `type="select"` (rendered as native `<option>`s) and `type="dropdown"` (rendered
+     * as a `bs-menu` of `bs-menu-item`s when `open`). Must be set as a JS property, not an HTML
+     * attribute -- see CONVENTIONS.md's non-string props rule. */
+    options = [];
+    /** Number of visible rows for `type="textarea"`. */
+    rows = 3;
+    /** Current chips for `type="chip"`. Must be set as a JS property, not an HTML attribute -- see
+     * CONVENTIONS.md's non-string props rule. */
+    chips = [];
+    /** Title select options for `type="initials"` (e.g. `['Mrs.', 'Mr.', 'Dr.']`). Must be set as a
+     * JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule. */
+    titleOptions = [];
+    /** Current selected title for `type="initials"`. Named `initialsTitle` rather than `title` --
+     * `title` is a reserved standard HTML attribute (tooltip text) inherited by every element, and
+     * Stencil warns against shadowing it with a component `@Prop`. */
+    initialsTitle = '';
+    /** Country select options for `type="country"`. Must be set as a JS property, not an HTML
+     * attribute -- see CONVENTIONS.md's non-string props rule. */
+    countryOptions = [];
+    /** Current selected country code for `type="country"`. */
+    country = '';
+    /** Number of cells for `type="pin"`. */
+    length = 4;
+    /** Whether the `type="dropdown"` trigger is open. Reflects to an attribute so consumers can style
+     * an open state via CSS. When `options` is non-empty, this also controls whether the `bs-menu`
+     * of `bs-menu-item`s is rendered below the field. */
+    open = false;
     bsInput;
     bsChange;
+    /** Emitted when `type="dropdown"`'s trigger is toggled. See `open`'s doc comment for this type's
+     * shell-only limitation. */
+    bsOpen;
+    /** Emitted when a chip is committed (Enter pressed in the draft input) for `type="chip"`. */
+    bsChipAdd;
+    /** Emitted when a chip's remove button is clicked for `type="chip"`. */
+    bsChipRemove;
+    /** Emitted when the title `<select>` changes for `type="initials"`. */
+    bsTitleChange;
+    /** Emitted when the country `<select>` changes for `type="country"`. */
+    bsCountryChange;
+    /** Tracks whether the `icon` slot has assigned content, so the leading icon wrapper only takes
+     * up space in the field when there's actually an icon (same pattern as `bs-button`). */
+    hasIcon = false;
+    /** Tracks whether the `end-icon` slot has assigned content, so the trailing icon wrapper only
+     * takes up space in the field when there's actually a trailing icon. */
+    hasEndIcon = false;
+    /** Whether `type="password"`'s native input is currently rendered as `type="text"` (revealed). The
+     * `type` prop itself stays `'password'` -- this only toggles the rendered native input's type. */
+    passwordVisible = false;
+    /** Draft text for `type="chip"`'s trailing input, committed to a chip on Enter. */
+    chipDraft = '';
+    pinInputs = [];
+    /** Computes the initial `hasIcon`/`hasEndIcon` state directly from the host's light DOM
+     * children, before first render -- see `bs-button`'s `componentWillLoad` for why `slotchange`
+     * alone isn't enough for a slot that starts (and stays) empty. */
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('icon');
+        this.hasEndIcon = this.hasSlottedContent('end-icon');
+    }
+    hasSlottedContent(slotName) {
+        return Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === slotName);
+    }
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onEndIconSlotchange = (ev) => {
+        this.hasEndIcon = ev.target.assignedNodes().length > 0;
+    };
     onInput = (ev) => {
         const value = ev.target.value;
         this.bsInput.emit(value);
@@ -27,11 +109,195 @@ const BsInput = class {
         const value = ev.target.value;
         this.bsChange.emit(value);
     };
+    clampNumber(n) {
+        if (this.min !== undefined && n < this.min)
+            n = this.min;
+        if (this.max !== undefined && n > this.max)
+            n = this.max;
+        return n;
+    }
+    onStepperIncrement = () => {
+        if (this.disabled)
+            return;
+        const next = this.clampNumber((parseFloat(this.value) || 0) + this.step);
+        this.value = String(next);
+        this.bsChange.emit(this.value);
+    };
+    onStepperDecrement = () => {
+        if (this.disabled)
+            return;
+        const next = this.clampNumber((parseFloat(this.value) || 0) - this.step);
+        this.value = String(next);
+        this.bsChange.emit(this.value);
+    };
+    onTogglePasswordVisibility = () => {
+        this.passwordVisible = !this.passwordVisible;
+    };
+    onDropdownToggle = () => {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+        this.bsOpen.emit(this.open);
+    };
+    onDropdownKeydown = (ev) => {
+        if (ev.key === 'Enter' || ev.key === ' ') {
+            ev.preventDefault();
+            this.onDropdownToggle();
+        }
+    };
+    onDropdownOptionSelect = (option) => () => {
+        this.value = option.label;
+        this.open = false;
+        this.bsChange.emit(this.value);
+    };
+    /** Closes the `type="dropdown"` menu on Escape, from anywhere within the component (host is the
+     * default @Listen target, and both keydown from the native control and from `bs-menu-item`
+     * buttons bubble/compose up to it). */
+    onHostKeydown(ev) {
+        if (this.type === 'dropdown' && this.open && ev.key === 'Escape') {
+            this.open = false;
+        }
+    }
+    /** Closes the `type="dropdown"` menu once focus leaves the component entirely (e.g. Tab away, or
+     * a click outside that moves focus elsewhere) -- `focusout` is composed, so it bubbles across
+     * the `bs-menu-item` shadow boundary too. */
+    onHostFocusOut(ev) {
+        if (this.type !== 'dropdown' || !this.open)
+            return;
+        const related = ev.relatedTarget;
+        if (!related || !this.el.contains(related)) {
+            this.open = false;
+        }
+    }
+    onChipDraftInput = (ev) => {
+        this.chipDraft = ev.target.value;
+    };
+    onChipDraftKeydown = (ev) => {
+        if (ev.key === 'Enter') {
+            ev.preventDefault();
+            const value = this.chipDraft.trim();
+            if (value) {
+                this.bsChipAdd.emit(value);
+                this.chipDraft = '';
+            }
+        }
+    };
+    onChipRemove = (chip) => () => {
+        this.bsChipRemove.emit(chip);
+    };
+    onTitleChange = (ev) => {
+        this.bsTitleChange.emit(ev.target.value);
+    };
+    onCountryChange = (ev) => {
+        this.bsCountryChange.emit(ev.target.value);
+    };
+    onPinInput = (index) => (ev) => {
+        const input = ev.target;
+        let value = input.value;
+        if (value.length > 1) {
+            value = value.slice(-1);
+            input.value = value;
+        }
+        if (value && index < this.length - 1) {
+            this.pinInputs[index + 1]?.focus();
+        }
+        this.bsChange.emit(this.pinInputs.map(i => i?.value ?? '').join(''));
+    };
+    onPinKeydown = (index) => (ev) => {
+        if (ev.key === 'Backspace' && !ev.target.value && index > 0) {
+            this.pinInputs[index - 1]?.focus();
+        }
+    };
+    get showsEndIconArea() {
+        return (this.type === 'number' || this.type === 'password' || this.type === 'dropdown' || this.type === 'date' || this.hasEndIcon);
+    }
+    get showsIconArea() {
+        return (this.type === 'search' && !this.hasIcon) || this.hasIcon;
+    }
+    renderIconContent() {
+        if (this.type === 'search' && !this.hasIcon) {
+            return (h("svg", { class: "bs-input__search-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", "stroke-width": "1.3" }), h("path", { d: "M11 11L14.5 14.5", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round" })));
+        }
+        return h("slot", { name: "icon", onSlotchange: this.onIconSlotchange });
+    }
+    renderEndIconContent() {
+        if (this.type === 'number') {
+            return (h("span", { class: "bs-input__stepper" }, h("button", { type: "button", part: "control", class: "bs-input__stepper-btn", "aria-label": "Increment", tabIndex: -1, disabled: this.disabled, onClick: this.onStepperIncrement }, h("svg", { viewBox: "0 0 10 6", width: "10", height: "6", "aria-hidden": "true" }, h("path", { d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.3", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { type: "button", part: "control", class: "bs-input__stepper-btn", "aria-label": "Decrement", tabIndex: -1, disabled: this.disabled, onClick: this.onStepperDecrement }, h("svg", { viewBox: "0 0 10 6", width: "10", height: "6", "aria-hidden": "true" }, h("path", { d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.3", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        }
+        if (this.type === 'password') {
+            return (h("button", { type: "button", part: "control", class: "bs-input__password-toggle", "aria-label": this.passwordVisible ? 'Hide password' : 'Show password', disabled: this.disabled, onClick: this.onTogglePasswordVisibility }, this.passwordVisible ? (h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 8C2.2 5.5 4.9 3 8 3C11.1 3 13.8 5.5 15 8C13.8 10.5 11.1 13 8 13C4.9 13 2.2 10.5 1 8Z", stroke: "currentColor", "stroke-width": "1.2", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M2 2L14 14", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }))) : (h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 8C2.2 5.5 4.9 3 8 3C11.1 3 13.8 5.5 15 8C13.8 10.5 11.1 13 8 13C4.9 13 2.2 10.5 1 8Z", stroke: "currentColor", "stroke-width": "1.2", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" })))));
+        }
+        if (this.type === 'dropdown') {
+            return (h("svg", { class: "bs-input__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+        }
+        if (this.type === 'date' && !this.hasEndIcon) {
+            return (h("svg", { class: "bs-input__calendar", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("rect", { x: "2", y: "3", width: "12", height: "11", rx: "1", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M2 6.5H14", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M5 1.5V4M11 1.5V4", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" })));
+        }
+        return h("slot", { name: "end-icon", onSlotchange: this.onEndIconSlotchange });
+    }
+    renderStandardControl() {
+        const nativeType = this.type === 'password' ? (this.passwordVisible ? 'text' : 'password') : this.type === 'dropdown' ? 'text' : this.type;
+        return (h("input", { id: "control", part: "control", class: "bs-input__control", type: nativeType, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.type === 'dropdown', min: this.type === 'number' ? this.min : undefined, max: this.type === 'number' ? this.max : undefined, step: this.type === 'number' ? this.step : undefined, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
+    }
+    renderSelectControl() {
+        return (h("select", { id: "control", part: "control", class: "bs-input__control", disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }, this.options.map(opt => (h("option", { value: opt.value, selected: opt.value === this.value }, opt.label)))));
+    }
+    renderTextareaControl() {
+        return (h("textarea", { id: "control", part: "control", class: "bs-input__control bs-input__control--textarea", rows: this.rows, 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, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
+    }
+    renderChipControl() {
+        return (h("div", { class: "bs-input__chips" }, this.chips.map(chip => (h("span", { part: "chip", class: "bs-input__chip" }, chip, h("button", { type: "button", class: "bs-input__chip-remove", "aria-label": `Remove ${chip}`, onClick: this.onChipRemove(chip) }, "\u00D7")))), h("input", { id: "control", part: "control", class: "bs-input__control bs-input__chip-input", type: "text", value: this.chipDraft, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onChipDraftInput, onKeyDown: this.onChipDraftKeydown })));
+    }
+    renderInitialsControl() {
+        return [
+            h("select", { part: "control", class: "bs-input__control bs-input__title-select", disabled: this.disabled, onChange: this.onTitleChange }, this.titleOptions.map(opt => (h("option", { value: opt, selected: opt === this.initialsTitle }, opt)))),
+            h("input", { id: "control", part: "control", class: "bs-input__control", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }),
+        ];
+    }
+    renderCountryControl() {
+        return [
+            h("select", { part: "control", class: "bs-input__control bs-input__country-select", disabled: this.disabled, onChange: this.onCountryChange }, this.countryOptions.map(opt => (h("option", { value: opt.code, selected: opt.code === this.country }, opt.flagIcon ? `${opt.flagIcon} ` : '', opt.code, " ", opt.label)))),
+            h("input", { id: "control", part: "control", class: "bs-input__control", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }),
+        ];
+    }
+    renderControl() {
+        switch (this.type) {
+            case 'select':
+                return this.renderSelectControl();
+            case 'textarea':
+                return this.renderTextareaControl();
+            case 'chip':
+                return this.renderChipControl();
+            case 'initials':
+                return this.renderInitialsControl();
+            case 'country':
+                return this.renderCountryControl();
+            default:
+                return this.renderStandardControl();
+        }
+    }
+    renderField() {
+        const fieldClasses = [
+            'bs-input__field',
+            this.error ? 'bs-input__field--error' : '',
+            this.disabled ? 'bs-input__field--disabled' : '',
+            this.type === 'textarea' ? 'bs-input__field--textarea' : '',
+            this.type === 'chip' ? 'bs-input__field--chip' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const isDropdown = this.type === 'dropdown';
+        return (h("div", { class: "bs-input__field-wrapper" }, h("div", { part: "field", class: fieldClasses, onClick: isDropdown ? this.onDropdownToggle : undefined, onKeyDown: isDropdown ? this.onDropdownKeydown : undefined, "aria-haspopup": isDropdown ? 'listbox' : undefined, "aria-expanded": isDropdown ? String(this.open) : undefined }, h("span", { part: "icon", class: `bs-input__icon ${this.showsIconArea ? 'bs-input__icon--visible' : ''}` }, this.renderIconContent()), this.renderControl(), h("span", { part: "end-icon", class: `bs-input__end-icon ${this.showsEndIconArea ? 'bs-input__end-icon--visible' : ''}` }, this.renderEndIconContent())), isDropdown && this.open && this.options.length > 0 && (h("bs-menu", { part: "menu", class: "bs-input__dropdown-menu", role: "listbox" }, this.options.map(option => (h("bs-menu-item", { key: option.value, onBsSelect: this.onDropdownOptionSelect(option) }, option.label)))))));
+    }
+    renderPinField() {
+        this.pinInputs = [];
+        return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${this.disabled ? 'bs-input__field--disabled' : ''}` }, 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: '2c6b38b4594ccde2536515fcd252831bacb6aaeb', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: 'a929eee8f7b100f372763a259f5d5fed298c8dff', 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: '9df0fae013470d8a77b0cc6288c8178b1ac62e0d', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), h("input", { key: 'a6ddc857d33c4e51a4c64b422a7df5b6261f5180', 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));
+        h("label", { key: 'fba27eccc9a351caa58fd849aad54e9388de361c', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: 'd4852798433e75b6c4cac34a9fbc5f9c23c8925d', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : 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 delegatesFocus() { return true; }
 };

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

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, c as createEvent } from './index-nLORuTUY.js';
+
+const bsMenuCss = () => `:host{display:block;--bs-menu-bg:var(--bs-surface-raised);--bs-menu-radius:var(--bs-border-radius-100);--bs-menu-padding-y:var(--bs-spacing-50);--bs-menu-gap:var(--bs-spacing-50);--bs-menu-shadow:var(--bs-shadow-sm)}.bs-menu{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-menu-gap);background:var(--bs-menu-bg);border-radius:var(--bs-menu-radius);padding:var(--bs-menu-padding-y) 0;box-shadow:var(--bs-menu-shadow);font-family:inherit}`;
+
+const BsMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h("div", { key: 'e49c52a18ea8c10399d818a00e0c6b748f0c9b8f', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '7e8cef2af1a068d0ab31fc3aee0abf8b59645a08' })));
+    }
+};
+BsMenu.style = bsMenuCss();
+
+const bsMenuItemCss = () => `:host{display:block;--bs-menu-item-radius:var(--bs-border-radius-100);--bs-menu-item-padding-y:var(--bs-spacing-100);--bs-menu-item-padding-x:var(--bs-spacing-150);--bs-menu-item-gap:var(--bs-spacing-100);--bs-menu-item-hover:var(--bs-color-neutral-container-hover);--bs-menu-item-pressed:var(--bs-color-neutral-container-pressed);--bs-menu-item-disabled-bg:var(--bs-surface-action-disabled);--bs-menu-item-icon-color:var(--bs-icon-default);--bs-menu-item-icon-color-disabled:var(--bs-icon-disabled);--bs-menu-item-color:var(--bs-text-muted);--bs-menu-item-color-disabled:var(--bs-text-on-disabled);--bs-menu-item-font-size:var(--bs-font-size-md);--bs-menu-item-line-height:var(--bs-line-height-body-md)}.bs-menu-item{box-sizing:border-box;display:flex;align-items:center;width:100%;height:48px;border:none;cursor:pointer;background:transparent;color:var(--bs-menu-item-color);font-family:inherit;border-radius:var(--bs-menu-item-radius);padding:var(--bs-menu-item-padding-y) var(--bs-menu-item-padding-x);gap:var(--bs-menu-item-gap);transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-menu-item:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-menu-item:hover{background:var(--bs-menu-item-hover)}.bs-menu-item:active{background:var(--bs-menu-item-pressed)}.bs-menu-item--disabled{background:var(--bs-menu-item-disabled-bg);color:var(--bs-menu-item-color-disabled);cursor:not-allowed}.bs-menu-item--disabled:hover,.bs-menu-item--disabled:active{background:var(--bs-menu-item-disabled-bg)}.bs-menu-item--disabled .bs-menu-item__icon{color:var(--bs-menu-item-icon-color-disabled)}.bs-menu-item__icon{display:none;width:24px;height:24px;flex-shrink:0;color:var(--bs-menu-item-icon-color)}.bs-menu-item__icon--has-content{display:inline-flex;align-items:center;justify-content:center}.bs-menu-item__icon ::slotted(svg){width:24px;height:24px}.bs-menu-item__label{font-size:var(--bs-menu-item-font-size);line-height:calc(var(--bs-menu-item-line-height) * 1px);white-space:nowrap}`;
+
+const BsMenuItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsSelect = createEvent(this, "bsSelect");
+    }
+    /** Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by
+     * keyboard tabbing, and clicking it does not emit `bsSelect`. */
+    disabled = false;
+    /** Tracks whether the `icon` slot has assigned content, so the icon wrapper (and its gap) only
+     * renders when there's actually an icon to show. */
+    hasIcon = false;
+    /** Fires when the item is clicked. */
+    bsSelect;
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onClick = () => {
+        if (this.disabled)
+            return;
+        this.bsSelect.emit();
+    };
+    render() {
+        return (h("button", { key: 'ddd19d6211c8fe3be1567f67ac74076ccd664235', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: 'bee75c968706c83503a3461f263640c3fbfa12a9', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '521e1f06cd42794e78e17de93f1318f2998f67bd', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '0f65b70e59b7dbaa3e455a3f2ff73b50dcdb1b61', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '31f5e8c8ce0996bfe26051918b378de82dffa63c' }))));
+    }
+};
+BsMenuItem.style = bsMenuItemCss();
+
+export { BsMenu as bs_menu, BsMenuItem as bs_menu_item };