@brandsync/wc 0.0.10 → 0.0.12

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

@@ -0,0 +1,94 @@
+'use strict';
+
+var index = require('./index-B3sdhEGk.js');
+
+const bsCheckboxCss = () => `:host{display:inline-block;--bs-checkbox-radius:var(--bs-border-radius-50);--bs-checkbox-gap:var(--bs-spacing-100);--bs-checkbox-size-sm:var(--bs-spacing-200);--bs-checkbox-size-md:var(--bs-spacing-250);--bs-checkbox-size-lg:var(--bs-spacing-300);--bs-checkbox-border-width-sm:1.333px;--bs-checkbox-border-width-md:1.667px;--bs-checkbox-border-width-lg:2px;--bs-checkbox-border-default:var(--bs-border-default);--bs-checkbox-bg-hover:var(--bs-surface-hover);--bs-checkbox-border-hover:var(--bs-border-neutral-hover);--bs-checkbox-bg-focus:var(--bs-surface-raised);--bs-checkbox-border-focus:var(--bs-border-neutral-hover);--bs-checkbox-focus-ring-color:var(--bs-border-neutral-focus);--bs-checkbox-bg-disabled:var(--bs-surface-action-disabled);--bs-checkbox-border-disabled:var(--bs-border-neutral-disabled);--bs-checkbox-border-error:var(--bs-border-error);--bs-checkbox-bg-selected:var(--bs-color-primary-default);--bs-checkbox-border-selected:var(--bs-color-primary-default);--bs-checkbox-bg-selected-hover:var(--bs-color-primary-hover);--bs-checkbox-border-selected-hover:var(--bs-color-primary-hover);--bs-checkbox-bg-selected-error:var(--bs-icon-error);--bs-checkbox-border-selected-error:var(--bs-icon-error);--bs-checkbox-icon-color:var(--bs-icon-static-white);--bs-checkbox-icon-color-disabled:var(--bs-icon-disabled);--bs-checkbox-label-color:var(--bs-text-default);--bs-checkbox-label-color-disabled:var(--bs-text-on-disabled);--bs-checkbox-label-color-error:var(--bs-text-error)}.bs-checkbox{position:relative;display:inline-flex;align-items:center;gap:var(--bs-checkbox-gap);font-family:inherit;cursor:pointer}.bs-checkbox--disabled{cursor:not-allowed}.bs-checkbox__input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}.bs-checkbox__input:disabled{cursor:not-allowed}.bs-checkbox__box{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--bs-checkbox-size-lg);height:var(--bs-checkbox-size-lg);border:var(--bs-checkbox-border-width-lg) solid var(--bs-checkbox-border-default);border-radius:var(--bs-checkbox-radius);background:transparent;color:var(--bs-checkbox-icon-color)}.bs-checkbox__box--md{width:var(--bs-checkbox-size-md);height:var(--bs-checkbox-size-md);border-width:var(--bs-checkbox-border-width-md)}.bs-checkbox__box--sm{width:var(--bs-checkbox-size-sm);height:var(--bs-checkbox-size-sm);border-width:var(--bs-checkbox-border-width-sm)}.bs-checkbox__box--selected{background:var(--bs-checkbox-bg-selected);border-color:var(--bs-checkbox-border-selected)}.bs-checkbox__input:hover:not(:disabled)~.bs-checkbox__box{background:var(--bs-checkbox-bg-hover);border-color:var(--bs-checkbox-border-hover)}.bs-checkbox__input:hover:not(:disabled)~.bs-checkbox__box--selected{background:var(--bs-checkbox-bg-selected-hover);border-color:var(--bs-checkbox-border-selected-hover)}.bs-checkbox__input:focus-visible~.bs-checkbox__box{background:var(--bs-checkbox-bg-focus);border-color:var(--bs-checkbox-border-focus);outline:2px solid var(--bs-checkbox-focus-ring-color);outline-offset:2px}.bs-checkbox__input:focus-visible~.bs-checkbox__box--selected{background:var(--bs-checkbox-bg-selected-hover);border-color:var(--bs-checkbox-border-selected-hover)}.bs-checkbox__box--error{border-color:var(--bs-checkbox-border-error)}.bs-checkbox__box--error.bs-checkbox__box--selected{background:var(--bs-checkbox-bg-selected-error);border-color:var(--bs-checkbox-border-selected-error)}.bs-checkbox__box--disabled{background:var(--bs-checkbox-bg-disabled);border-color:var(--bs-checkbox-border-disabled);color:var(--bs-checkbox-icon-color-disabled)}.bs-checkbox__box--disabled.bs-checkbox__box--selected{background:var(--bs-checkbox-bg-disabled);border-color:var(--bs-checkbox-border-disabled)}.bs-checkbox__icon{width:80%;height:80%}.bs-checkbox__label{font-size:var(--bs-font-size-md);color:var(--bs-checkbox-label-color)}.bs-checkbox__box--sm~.bs-checkbox__label{font-size:var(--bs-font-size-sm)}.bs-checkbox--disabled .bs-checkbox__label{color:var(--bs-checkbox-label-color-disabled)}.bs-checkbox:not(.bs-checkbox--disabled) .bs-checkbox__box--error~.bs-checkbox__label{color:var(--bs-checkbox-label-color-error)}`;
+
+const BsCheckbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsChange = index.createEvent(this, "bsChange");
+    }
+    get el() { return index.getElement(this); }
+    inputEl;
+    /** Sizing scale. Controls the box's width/height and border width; corner radius is constant
+     * across all sizes. */
+    size = 'lg';
+    /** Whether the checkbox is checked. Mutable so clicking the label/input toggles it directly.
+     * When `indeterminate` is also true, `indeterminate` wins visually (shows the minus icon)
+     * regardless of this value -- same as native checkboxes. */
+    checked = false;
+    /** Whether the checkbox is in the indeterminate ("partially selected") state -- shows a minus
+     * icon instead of a check, and takes visual precedence over `checked`. Unlike `checked`, native
+     * checkboxes have no `indeterminate` HTML attribute; it can only be set as a JS property on the
+     * element. This `@Prop` still works as an attribute for the *host* (`<bs-checkbox>`) since that's
+     * this component's own reflected state, not the native control's -- the native `<input>` inside
+     * has its `.indeterminate` property set imperatively in `componentDidLoad`/`componentDidUpdate`. */
+    indeterminate = false;
+    /** Disables the checkbox: sets the native `disabled` attribute, suppresses hover/focus styling,
+     * and prevents toggling. */
+    disabled = false;
+    /** Applies the error border/label-color treatment. This component's spec has no error message
+     * text of its own (unlike `bs-input`'s `error: string`), so it's a plain boolean. */
+    error = false;
+    /**
+     * Accessible name for the checkbox. Required whenever the default (label) slot is empty (e.g. a
+     * bare "select row" checkbox in a table) -- without it, the internal native `<input>` has no
+     * accessible name at all. Setting `aria-label` directly on the `<bs-checkbox>` host does NOT
+     * work for this: that attribute stays on the light-DOM host and is never forwarded into the
+     * shadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays
+     * nameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and
+     * `bs-tab`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own internal
+     * focusable element for the same reason.
+     */
+    ariaLabel = null;
+    /** Emitted when the checked state changes via user interaction, with the new `checked` value. */
+    bsChange;
+    /** Keeps the native input's `.indeterminate` JS property in sync -- this can't be expressed as a
+     * JSX attribute in Stencil, it must be set imperatively on the element. */
+    onIndeterminateChange() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    componentDidLoad() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    componentDidUpdate() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    onChange = (ev) => {
+        const checked = ev.target.checked;
+        this.checked = checked;
+        // Clicking a native checkbox always clears indeterminate, regardless of what it was before --
+        // match that here so the visual state (icon) tracks the real native behavior.
+        this.indeterminate = false;
+        this.bsChange.emit(checked);
+    };
+    render() {
+        const showIcon = this.checked || this.indeterminate;
+        const boxClasses = [
+            'bs-checkbox__box',
+            `bs-checkbox__box--${this.size}`,
+            showIcon ? 'bs-checkbox__box--selected' : '',
+            this.disabled ? 'bs-checkbox__box--disabled' : '',
+            this.error ? 'bs-checkbox__box--error' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (index.h("label", { key: '04fb1da55eb6a0e91fd705db9217f5e2c0992f89', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, index.h("input", { key: '06b83f45f7dfe52cd81eab603742d04d74135c7a', ref: el => (this.inputEl = el), class: "bs-checkbox__input", type: "checkbox", checked: this.checked, disabled: this.disabled, "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), index.h("span", { key: 'a8a8b45074eef7cfcb5f579eff0fb7b27b71d25a', part: "box", class: boxClasses }, showIcon && (index.h("svg", { key: '78cf717b4cd7fbf8c56a76788a22c8aecf7fcc28', part: "icon", class: "bs-checkbox__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, this.indeterminate ? (index.h("path", { d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })) : (index.h("path", { d: "M3 8.5L6.2 11.5L13 4.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), index.h("span", { key: '2d78205d8091c89ac3a6d07cbb74b6d6a9c09971', part: "label", class: "bs-checkbox__label" }, index.h("slot", { key: '7da0c6d1f84b788b242b95b11d78e566f482b48c' }))));
+    }
+    static get delegatesFocus() { return true; }
+    static get watchers() { return {
+        "indeterminate": [{
+                "onIndeterminateChange": 0
+            }]
+    }; }
+};
+BsCheckbox.style = bsCheckboxCss();
+
+exports.bs_checkbox = BsCheckbox;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CVh-sqA_.js');
+var index = require('./index-B3sdhEGk.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}`;
 
@@ -32,11 +32,23 @@ const BsComposerStatusBanner = class {
     onCloseClick = () => {
         this.bsClose.emit();
     };
+    /** `error`/`warning` need immediate, interrupting announcement (`alert`); `info`/`neutral` only
+     * need a polite one (`status`) -- matches the Figma Accessibility guidelines for this component. */
+    roleForType() {
+        return this.type === 'error' || this.type === 'warning' ? 'alert' : 'status';
+    }
+    /** Clock reads as "waiting/pending", a reasonable default for info/neutral notices -- but is a
+     * weak match for error/warning, which get a warning-triangle icon instead. Either default is
+     * still overridable via the `icon` slot. */
+    renderDefaultIcon() {
+        return this.type === 'error' || this.type === 'warning' ? index.h(WarningIcon, null) : index.h(ClockIcon, null);
+    }
     render() {
-        return (index.h("div", { key: 'b51067b9af0210682fc60b5340560bf6ee42d655', class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, index.h("div", { key: 'a6774d57e22e1b39fe0c9add8d96ed1c349bfeae', class: "bs-composer-status-banner__message-group" }, this.showIcon && (index.h("span", { key: '6a2b131a63a2d2cbe33f62519d1602752bc98204', part: "icon", class: "bs-composer-status-banner__icon" }, index.h("slot", { key: '6123c6a61652dfb504cf2e140a012fcba27e7468', name: "icon" }, index.h(ClockIcon, { key: '5415d7c71e2976a552955606e7288a4b806f1dbe' })))), index.h("p", { key: '1580b9f2b53390c32e38763c0cef23cb5d7ffa4c', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (index.h("button", { key: 'bb08fce8f48253787015308bfc66e04835069670', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (index.h("button", { key: 'b9d64c66155cb8c5b884b48a442c9e0d09be9111', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, index.h(CloseIcon, { key: '2779b3af1d5348ee510cd1fe4978cbfbbfb33c5e' })))));
+        return (index.h("div", { key: '1c8597f28e99e0900448fade97c53fd21a945b68', role: this.roleForType(), class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, index.h("div", { key: 'f4d0b098780368863d92c43bac129d58cea2ccfd', class: "bs-composer-status-banner__message-group" }, this.showIcon && (index.h("span", { key: 'a713386fa868bdc244f9b84780fe1672c0a8f60e', part: "icon", class: "bs-composer-status-banner__icon" }, index.h("slot", { key: '8aa2007e7f744712c142f26d21bba54f6fa9dec7', name: "icon" }, this.renderDefaultIcon()))), index.h("p", { key: '000009a01e08ea49bd73f2d3490f1f13bfa9d597', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (index.h("button", { key: 'd323a702a0f3f4f3cb16c23bb75d0f26a2b13b4b', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (index.h("button", { key: 'b62fa5da8b4fb8c40004f955b9368b71ae0b054c', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, index.h(CloseIcon, { key: '4c8396f98eff345569ca9ca8940115aa4bc7c3f8' })))));
     }
 };
 const ClockIcon = () => (index.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("circle", { cx: "10", cy: "10", r: "7.25", stroke: "currentColor", "stroke-width": "1.3" }), index.h("path", { d: "M10 5.83V10L12.5 11.67", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const WarningIcon = () => (index.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M10 3L18 17H2L10 3Z", stroke: "currentColor", "stroke-width": "1.3", "stroke-linejoin": "round" }), index.h("path", { d: "M10 8V11.5", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round" }), index.h("circle", { cx: "10", cy: "14", r: "0.75", fill: "currentColor" })));
 const CloseIcon = () => (index.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M15 5L5 15", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M15 15L5 5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
 BsComposerStatusBanner.style = bsComposerStatusBannerCss();
 

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CVh-sqA_.js');
+var index = require('./index-B3sdhEGk.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__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 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-input-max-lines:10}.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;box-sizing:border-box;padding:0;border:none;outline:none;resize:none;background:transparent;color:var(--bs-input-text);font-family:inherit;font-size:var(--bs-font-size-md);line-height:calc(var(--bs-line-height-body-md) * 1px);max-height:calc(var(--bs-composer-input-max-lines) * var(--bs-line-height-body-md) * 1px);overflow-y:auto}.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...',
@@ -26,6 +26,7 @@ const BsComposer = class {
         this.bsMicToggle = index.createEvent(this, "bsMicToggle");
     }
     get el() { return index.getElement(this); }
+    inputEl;
     /**
      * 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
@@ -36,7 +37,12 @@ const BsComposer = class {
     /** 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. */
+     * component re-dispatches them as a `bsInput` custom event instead.
+     *
+     * The field is a `<textarea>` (not a single-line `<input>`) that grows with its content, up to
+     * `--bs-composer-input-max-lines` (10 by default) -- beyond that it scrolls internally instead
+     * of growing further. Setting `value` as a prop (not just typing) also re-triggers the resize,
+     * so e.g. programmatically clearing the field after submit correctly shrinks it back down. */
     value = '';
     /**
      * Which of the four mutually-exclusive composer states to render: `idle` (send, enabled),
@@ -73,11 +79,38 @@ const BsComposer = class {
     componentWillLoad() {
         this.hasAttachments = Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'attachments');
     }
+    componentDidLoad() {
+        this.resizeInput();
+    }
+    /** Re-runs the auto-grow calculation after every re-render -- notably including a `value` prop
+     * change from the outside (e.g. a consumer clearing the field after submit, or pre-filling it),
+     * not just while the user is typing. This has to be `componentDidUpdate`, not a `@Watch('value')`
+     * callback: `@Watch` fires as soon as the prop is reassigned, which is BEFORE Stencil's next
+     * render actually pushes the new value into the textarea's DOM `.value` -- reading `scrollHeight`
+     * at that point still reflects the OLD content, so the resize would silently no-op. */
+    componentDidUpdate() {
+        this.resizeInput();
+    }
+    /**
+     * Grows the textarea to fit its content, up to `--bs-composer-input-max-lines` worth of height
+     * (CSS `max-height` clamps the visual result and `overflow-y: auto` takes over beyond that --
+     * see bs-composer.css). Resetting `height` to `auto` first is required before reading
+     * `scrollHeight`, otherwise a shrinking edit (e.g. deleting a line) would never shrink the
+     * textarea back down -- `scrollHeight` only ever reports the larger of "current height" and
+     * "content height" if the height isn't cleared first.
+     */
+    resizeInput() {
+        if (!this.inputEl)
+            return;
+        this.inputEl.style.height = 'auto';
+        this.inputEl.style.height = `${this.inputEl.scrollHeight}px`;
+    }
     onAttachmentsSlotchange = (ev) => {
         this.hasAttachments = ev.target.assignedNodes().length > 0;
     };
     onInput = (ev) => {
         const value = ev.target.value;
+        this.resizeInput();
         this.bsInput.emit(value);
     };
     onAttachClick = () => {
@@ -115,7 +148,7 @@ const BsComposer = class {
         const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
         const disabled = this.state === 'disabled';
         const recording = this.state === 'recording';
-        return (index.h("div", { key: '5b367f64f2cfe04d7815b52d6abc3baebf46453e', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, index.h("div", { key: 'f1e7dbeb16e8f2cd0b4e2345f6c5fc03bcc5177c', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, index.h("slot", { key: '6e59f2f3857c81a132c5873d9a32dbed27eb2c02', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), index.h("div", { key: '79a0a03a7f66b654f5ab8379447cf00459c7a6c3', class: "bs-composer__text-row" }, index.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 })), index.h("div", { key: '5b9a8edd0412e1a86efd33afae37fb73559a89f6', class: "bs-composer__controls-row" }, index.h("button", { key: '5c405e009e9f61902ca6623e09efa238e71737a3', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, index.h(PlusIcon, { key: '5832b29579d3c8c855237f286366944aeb6553f6' })), 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: '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 ? index.h(StopIcon, null) : index.h(MicIcon, null)), index.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()), index.h("slot", { key: '2c78b5641091024925e84ca1a779ac1fc37fc0ae', name: "actions-end" }))));
+        return (index.h("div", { key: '4d6ea6241693e45065388f34f9fe2c141eb6379f', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, index.h("div", { key: '952853cd4a36c5dc6057186825432616c5c99b38', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, index.h("slot", { key: '65311f5b1f1b8fd1e6c9f33741a53c94bbe292b0', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), index.h("div", { key: '8699568430ff2140b0869a004a253e6c01e1984f', class: "bs-composer__text-row" }, index.h("textarea", { key: '5505815f7bb6ff19191ffea375fcd7fb856371fd', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), index.h("div", { key: 'fd65f7928117afd583e3f1e2372cbb66305a530e', class: "bs-composer__controls-row" }, index.h("button", { key: '4e691d7ca567a4ece45601f47836d1ac7c5e2a1d', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, index.h(PlusIcon, { key: 'e363bbfcd346090dbceafd20d893af0903952223' })), 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: 'e0f113e189ec7ded494c7ef7cf91fe3e13df01bc', 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: '3603219c2c3781a9e2894142313f84dfa52c21ed', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), index.h("slot", { key: '3d143aa3f254310dba537c19a6ac4c40205a405d', name: "actions-end" }))));
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CVh-sqA_.js');
+var index = require('./index-B3sdhEGk.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)}`;
 
@@ -43,11 +43,11 @@ const BsDataTable = class {
         this.bsRowSelect.emit({ id: row.id, selected });
     };
     render() {
-        return (index.h("table", { key: '9b16ade44ff85120e9629722de8e8c1738835c1b', part: "table", class: "bs-data-table" }, index.h("thead", { key: '644eed606e68782ada42c289bb7bfc8d6de4affb', part: "head" }, index.h("tr", { key: '4e4ea75018796c77f14703c1c1402022f8c8cde9' }, this.selectable && index.h("th", { key: '85460f7c2eab6ad0f3604f72bcd81a4aa8699c03', class: "bs-data-table__select-col" }), this.columns.map(column => {
+        return (index.h("table", { key: 'b22d3029ddc85bd7125d69b53be2ed427cc7e3c4', part: "table", class: "bs-data-table" }, index.h("thead", { key: '469ff536b8e09ed6f866b1a883ad06f9df75f003', part: "head" }, index.h("tr", { key: '8394e3bfe1259bb2342a324ded83dfac41eb8271' }, this.selectable && index.h("th", { key: '9d2b97169b92b9e45209f91f855431901e8897c1', 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: '024cb8a25cc6471e7074d119b78e6a8e22f86450', 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 ? (
+        }))), index.h("tbody", { key: '8a9fa723abcb83820c489b8f07eab58ee306e491', 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.

package/dist/cjs/bs-icon-button.cjs.entry.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var index = require('./index-B3sdhEGk.js');
+
+const bsIconButtonCss = () => `:host{display:inline-block;--bs-icon-button-radius:var(--bs-border-radius-100);--bs-icon-button-size-sm:40px;--bs-icon-button-size-md:44px;--bs-icon-button-size-lg:48px;--bs-icon-button-icon-size-sm:16px;--bs-icon-button-icon-size-md:20px;--bs-icon-button-icon-size-lg:24px;--bs-icon-button-padding:var(--bs-spacing-150);--bs-icon-button-radius-xs:var(--bs-border-radius-50);--bs-icon-button-size-xs:16px;--bs-icon-button-icon-size-xs:8px;--bs-icon-button-padding-xs:var(--bs-spacing-50);--bs-icon-button-primary-default:var(--bs-color-primary-default);--bs-icon-button-primary-hover:var(--bs-color-primary-hover);--bs-icon-button-primary-pressed:var(--bs-color-primary-pressed);--bs-icon-button-primary-disabled:var(--bs-surface-action-disabled);--bs-icon-button-neutral-container:var(--bs-color-neutral-container);--bs-icon-button-neutral-hover:var(--bs-color-neutral-container-hover);--bs-icon-button-neutral-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-neutral-border:var(--bs-border-neutral-container);--bs-icon-button-neutral-border-hover:var(--bs-border-neutral-container-hover);--bs-icon-button-neutral-border-pressed:var(--bs-border-neutral-container-pressed);--bs-icon-button-subtle-hover:var(--bs-color-neutral-container);--bs-icon-button-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-subtle-focus:var(--bs-border-primary-focus);--bs-icon-button-outlined-border:var(--bs-border-primary);--bs-icon-button-outlined-border-hover:var(--bs-border-primary-hover);--bs-icon-button-outlined-container:var(--bs-color-primary-container);--bs-icon-button-outlined-focus:var(--bs-border-primary-focus);--bs-icon-button-success-default:var(--bs-color-success-default);--bs-icon-button-success-hover:var(--bs-color-success-hover);--bs-icon-button-success-pressed:var(--bs-color-success-pressed);--bs-icon-button-success-disabled:var(--bs-surface-action-disabled);--bs-icon-button-success-focus:var(--bs-border-success-focus);--bs-icon-button-warning-default:var(--bs-color-warning-default);--bs-icon-button-warning-hover:var(--bs-color-warning-hover);--bs-icon-button-warning-pressed:var(--bs-color-warning-pressed);--bs-icon-button-warning-disabled:var(--bs-surface-action-disabled);--bs-icon-button-warning-focus:var(--bs-border-warning-focus);--bs-icon-button-info-default:var(--bs-color-info-default);--bs-icon-button-info-hover:var(--bs-color-info-hover);--bs-icon-button-info-pressed:var(--bs-color-info-pressed);--bs-icon-button-info-disabled:var(--bs-surface-action-disabled);--bs-icon-button-info-focus:var(--bs-border-info-focus);--bs-icon-button-error-default:var(--bs-color-error-default);--bs-icon-button-error-hover:var(--bs-color-error-hover);--bs-icon-button-error-pressed:var(--bs-color-error-pressed);--bs-icon-button-error-disabled:var(--bs-surface-action-disabled);--bs-icon-button-error-focus:var(--bs-border-error-focus)}.bs-icon-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;border-radius:var(--bs-icon-button-radius);padding:var(--bs-icon-button-padding);cursor:pointer;transition:background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease)}.bs-icon-button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-icon-button:disabled{cursor:not-allowed}.bs-icon-button--xs{width:var(--bs-icon-button-size-xs);height:var(--bs-icon-button-size-xs);padding:var(--bs-icon-button-padding-xs);border-radius:var(--bs-icon-button-radius-xs)}.bs-icon-button--xs .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-xs);height:var(--bs-icon-button-icon-size-xs)}.bs-icon-button--sm{width:var(--bs-icon-button-size-sm);height:var(--bs-icon-button-size-sm)}.bs-icon-button--sm .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-sm);height:var(--bs-icon-button-icon-size-sm)}.bs-icon-button--md{width:var(--bs-icon-button-size-md);height:var(--bs-icon-button-size-md)}.bs-icon-button--md .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-md);height:var(--bs-icon-button-icon-size-md)}.bs-icon-button--lg{width:var(--bs-icon-button-size-lg);height:var(--bs-icon-button-size-lg)}.bs-icon-button--lg .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-lg);height:var(--bs-icon-button-icon-size-lg)}.bs-icon-button__icon{display:inline-flex;align-items:center;justify-content:center;color:inherit}.bs-icon-button__icon ::slotted(*){display:block;width:100%;height:100%}.bs-icon-button--primary{background:var(--bs-icon-button-primary-default);color:var(--bs-text-on-action)}.bs-icon-button--primary:hover:not(:disabled){background:var(--bs-icon-button-primary-hover)}.bs-icon-button--primary:active:not(:disabled){background:var(--bs-icon-button-primary-pressed)}.bs-icon-button--primary:disabled{background:var(--bs-icon-button-primary-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--neutral{background:var(--bs-icon-button-neutral-container);color:var(--bs-text-default);border:1px solid var(--bs-icon-button-neutral-border)}.bs-icon-button--neutral:hover:not(:disabled){background:var(--bs-icon-button-neutral-hover);border-color:var(--bs-icon-button-neutral-border-hover)}.bs-icon-button--neutral:active:not(:disabled){background:var(--bs-icon-button-neutral-pressed);border-color:var(--bs-icon-button-neutral-border-pressed)}.bs-icon-button--neutral:disabled{background:var(--bs-icon-button-neutral-container);color:var(--bs-text-on-disabled);border-color:var(--bs-icon-button-neutral-border)}.bs-icon-button--error{background:var(--bs-icon-button-error-default);color:var(--bs-text-on-action)}.bs-icon-button--error:hover:not(:disabled){background:var(--bs-icon-button-error-hover)}.bs-icon-button--error:active:not(:disabled){background:var(--bs-icon-button-error-pressed)}.bs-icon-button--error:disabled{background:var(--bs-icon-button-error-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--error:focus-visible{outline-color:var(--bs-icon-button-error-focus)}.bs-icon-button--success{background:var(--bs-icon-button-success-default);color:var(--bs-text-on-action)}.bs-icon-button--success:hover:not(:disabled){background:var(--bs-icon-button-success-hover)}.bs-icon-button--success:active:not(:disabled){background:var(--bs-icon-button-success-pressed)}.bs-icon-button--success:disabled{background:var(--bs-icon-button-success-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--success:focus-visible{outline-color:var(--bs-icon-button-success-focus)}.bs-icon-button--warning{background:var(--bs-icon-button-warning-default);color:var(--bs-text-on-action)}.bs-icon-button--warning:hover:not(:disabled){background:var(--bs-icon-button-warning-hover)}.bs-icon-button--warning:active:not(:disabled){background:var(--bs-icon-button-warning-pressed)}.bs-icon-button--warning:disabled{background:var(--bs-icon-button-warning-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--warning:focus-visible{outline-color:var(--bs-icon-button-warning-focus)}.bs-icon-button--info{background:var(--bs-icon-button-info-default);color:var(--bs-text-on-action)}.bs-icon-button--info:hover:not(:disabled){background:var(--bs-icon-button-info-hover)}.bs-icon-button--info:active:not(:disabled){background:var(--bs-icon-button-info-pressed)}.bs-icon-button--info:disabled{background:var(--bs-icon-button-info-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--info:focus-visible{outline-color:var(--bs-icon-button-info-focus)}.bs-icon-button--subtle{background:transparent;color:var(--bs-icon-neutral-default)}.bs-icon-button--subtle:hover:not(:disabled){background:var(--bs-icon-button-subtle-hover)}.bs-icon-button--subtle:active:not(:disabled){background:var(--bs-icon-button-subtle-pressed)}.bs-icon-button--subtle:disabled{background:transparent;color:var(--bs-text-on-disabled)}.bs-icon-button--subtle:focus-visible{outline-color:var(--bs-icon-button-subtle-focus);background:var(--bs-icon-button-subtle-hover)}.bs-icon-button--outlined{background:transparent;color:var(--bs-color-primary-default);border:1.5px solid var(--bs-icon-button-outlined-border)}.bs-icon-button--outlined:hover:not(:disabled){background:var(--bs-icon-button-outlined-container);border-color:var(--bs-icon-button-outlined-border-hover)}.bs-icon-button--outlined:active:not(:disabled){background:var(--bs-icon-button-outlined-container);color:var(--bs-color-primary-pressed);border-color:var(--bs-icon-button-outlined-border-hover)}.bs-icon-button--outlined:disabled{opacity:var(--bs-opacity-disabled);cursor:not-allowed}.bs-icon-button--outlined:focus-visible{outline-color:var(--bs-icon-button-outlined-focus)}`;
+
+const BsIconButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Visual style. Maps to the same semantic token families as `bs-button`'s `variant`.
+     * `error` is for destructive/irreversible actions per BrandSync guidance, not a stronger
+     * emphasis alternative to `primary`.
+     */
+    variant = 'primary';
+    /** Sizing scale. `xs` (16px, an 8px icon) is a distinct, much smaller tier meant for compact
+     * chip/tag "remove" controls, not just a smaller toolbar button -- verified against a separate
+     * Figma redline (EG BrandSync UI Kit v1.5, node 20731:18427) from the one `sm`/`md`/`lg` were
+     * built against. */
+    size = 'md';
+    /** Disables the button and applies the disabled token set. */
+    disabled = false;
+    /** Native `<button>` type. */
+    type = 'button';
+    /**
+     * Accessible name for the button. Required -- this component is always icon-only, so there's
+     * no visible label text for screen readers to fall back on. Stencil reflects this camelCase
+     * prop to the `aria-label` HTML attribute automatically.
+     */
+    ariaLabel = null;
+    render() {
+        return (index.h("button", { key: '1551d4e87c9bdedfc51a1a325c93ea9849aa9702', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, index.h("span", { key: '3966f47ff21fef8687d6d04289863039c2837f10', part: "icon", class: "bs-icon-button__icon" }, index.h("slot", { key: 'c673adaf051d568be40b13ddad39447994935b2b' }))));
+    }
+    static get delegatesFocus() { return true; }
+};
+BsIconButton.style = bsIconButtonCss();
+
+exports.bs_icon_button = BsIconButton;

package/dist/cjs/bs-inline-tab.cjs.entry.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var index = require('./index-B3sdhEGk.js');
+
+const bsInlineTabCss = () => `:host{display:inline-block;--bs-inline-tab-radius:var(--bs-border-radius-full);--bs-inline-tab-padding-y:var(--bs-spacing-100);--bs-inline-tab-padding-x:var(--bs-spacing-200);--bs-inline-tab-padding-left-with-icon:var(--bs-spacing-150);--bs-inline-tab-padding-right-with-icon:var(--bs-spacing-200);--bs-inline-tab-gap:var(--bs-spacing-50);--bs-inline-tab-bg-default:var(--bs-color-neutral-container);--bs-inline-tab-color-default:var(--bs-text-secondary);--bs-inline-tab-bg-hover:var(--bs-color-neutral-container-hover);--bs-inline-tab-color-hover:var(--bs-text-default);--bs-inline-tab-bg-focus:var(--bs-color-neutral-container-focused);--bs-inline-tab-bg-pressed:var(--bs-color-neutral-container-pressed);--bs-inline-tab-focus-ring-color:var(--bs-border-neutral-focus);--bs-inline-tab-bg-disabled:var(--bs-surface-action-disabled);--bs-inline-tab-color-disabled:var(--bs-text-on-disabled);--bs-inline-tab-bg-selected:var(--bs-color-primary-default);--bs-inline-tab-color-selected:var(--bs-text-on-action);--bs-inline-tab-bg-selected-hover:var(--bs-color-primary-hover);--bs-inline-tab-bg-selected-focus:var(--bs-color-primary-focused);--bs-inline-tab-bg-selected-pressed:var(--bs-color-primary-pressed);--bs-inline-tab-font-size:var(--bs-font-size-sm);--bs-inline-tab-font-weight:var(--bs-font-weight-semibold);--bs-inline-tab-line-height:var(--bs-line-height-body-sm)}.bs-inline-tab{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-family:inherit;border-radius:var(--bs-inline-tab-radius);padding:var(--bs-inline-tab-padding-y) var(--bs-inline-tab-padding-x);background:var(--bs-inline-tab-bg-default);color:var(--bs-inline-tab-color-default);transition:color var(--bs-duration-fast) var(--bs-easing-standard),     background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-inline-tab--has-icon{padding-top:var(--bs-inline-tab-padding-y);padding-bottom:var(--bs-inline-tab-padding-y);padding-left:var(--bs-inline-tab-padding-left-with-icon);padding-right:var(--bs-inline-tab-padding-right-with-icon);gap:var(--bs-inline-tab-gap)}.bs-inline-tab:focus-visible{outline:2px solid var(--bs-inline-tab-focus-ring-color);outline-offset:2px}.bs-inline-tab:not(.bs-inline-tab--selected):not(.bs-inline-tab--disabled):hover{background:var(--bs-inline-tab-bg-hover);color:var(--bs-inline-tab-color-hover)}.bs-inline-tab:not(.bs-inline-tab--selected):not(.bs-inline-tab--disabled):focus-visible{background:var(--bs-inline-tab-bg-focus);color:var(--bs-inline-tab-color-hover)}.bs-inline-tab:not(.bs-inline-tab--selected):not(.bs-inline-tab--disabled):active{background:var(--bs-inline-tab-bg-pressed);color:var(--bs-inline-tab-color-hover)}.bs-inline-tab--selected{background:var(--bs-inline-tab-bg-selected);color:var(--bs-inline-tab-color-selected)}.bs-inline-tab--selected:not(.bs-inline-tab--disabled):hover{background:var(--bs-inline-tab-bg-selected-hover)}.bs-inline-tab--selected:not(.bs-inline-tab--disabled):focus-visible{background:var(--bs-inline-tab-bg-selected-focus)}.bs-inline-tab--selected:not(.bs-inline-tab--disabled):active{background:var(--bs-inline-tab-bg-selected-pressed)}.bs-inline-tab--disabled{background:var(--bs-inline-tab-bg-disabled);color:var(--bs-inline-tab-color-disabled);cursor:not-allowed}.bs-inline-tab__icon{display:none;width:24px;height:24px;flex-shrink:0;color:inherit}.bs-inline-tab__icon--has-content{display:inline-flex;align-items:center;justify-content:center}.bs-inline-tab__icon ::slotted(svg){width:24px;height:24px}.bs-inline-tab__label{display:none;font-size:var(--bs-inline-tab-font-size);font-weight:var(--bs-inline-tab-font-weight);line-height:calc(var(--bs-inline-tab-line-height) * 1px);white-space:nowrap}.bs-inline-tab__label--has-content{display:inline-block}`;
+
+const BsInlineTab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsSelect = index.createEvent(this, "bsSelect");
+    }
+    get el() { return index.getElement(this); }
+    /** Whether this tab is the currently active one. NOT mutable and NOT self-toggling -- see the
+     * "Known gap" note in the class JSDoc. Still reflected as an attribute so consumers/CSS can
+     * target `bs-inline-tab[selected]`. */
+    selected = false;
+    /** Disables the tab: sets the native `disabled` attribute, suppresses hover/focus styling, and
+     * prevents clicking from emitting `bsSelect`. */
+    disabled = false;
+    /** Accessible name for the tab. Required for icon-only usage (no visible label text via the
+     * default slot) so screen readers still announce what the tab does -- without it, an icon-only
+     * tab has no discernible name at all (axe-core flags this as a critical `button-name`
+     * violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
+     * automatically, same as `bs-tab`'s identical prop. */
+    ariaLabel = null;
+    /** Tracks whether the `icon` slot has assigned content. */
+    hasIcon = false;
+    /** Tracks whether the default (label) slot has assigned content. */
+    hasLabel = false;
+    /** Fires when the tab is clicked. Does not toggle `selected` itself -- see the class JSDoc. */
+    bsSelect;
+    /**
+     * Computes the initial `hasIcon`/`hasLabel` state directly from the host's light DOM children,
+     * before first render -- same reasoning as `bs-tab.componentWillLoad` (a slot with zero assigned
+     * nodes from the start never fires `slotchange`).
+     */
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('icon');
+        this.hasLabel = this.hasSlottedContent(null);
+    }
+    hasSlottedContent(slotName) {
+        return Array.from(this.el.childNodes).some(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                return node.getAttribute('slot') === slotName;
+            }
+            // Only elements can carry a `slot` attribute -- any other node type (text, comments) can
+            // only ever be assigned to the default slot.
+            return slotName === null;
+        });
+    }
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onLabelSlotchange = (ev) => {
+        this.hasLabel = ev.target.assignedNodes().length > 0;
+    };
+    onClick = () => {
+        if (this.disabled)
+            return;
+        this.bsSelect.emit();
+    };
+    render() {
+        const iconOnly = this.hasIcon && !this.hasLabel;
+        return (index.h("button", { key: 'a0a20d6cb582852ae0276ae2dd91bc5c7708cbfa', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, index.h("span", { key: 'e2fea17db42da65d9ff8ff6d59749572a25c3eb2', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, index.h("slot", { key: '4551fc4b092105be399277e42bf343390ae18ff8', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: '99de7b930a840f482e0ad2c5e6eaf1b759c6f9ed', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, index.h("slot", { key: 'dbedcadbb5b1b51c47d0fa44b8a41f67d6ef4ef0', onSlotchange: this.onLabelSlotchange }))));
+    }
+};
+BsInlineTab.style = bsInlineTabCss();
+
+exports.bs_inline_tab = BsInlineTab;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CVh-sqA_.js');
+var index = require('./index-B3sdhEGk.js');
 
 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}`;
 
@@ -296,10 +296,10 @@ const BsInput = class {
         return (index.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) => (index.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 (index.h("div", { key: 'a929eee8f7b100f372763a259f5d5fed298c8dff', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (index.h("div", { key: '766dae0bf2565f45a9fffffc9684a83c89cea122', 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: 'fba27eccc9a351caa58fd849aad54e9388de361c', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (index.h("span", { key: 'd4852798433e75b6c4cac34a9fbc5f9c23c8925d', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.renderField(), this.error ? (index.h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, index.h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), index.h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), index.h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (index.h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        index.h("label", { key: '7935c91837b4882a9b2a416e43f43b1e0d311c8f', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (index.h("span", { key: '4db3ccc8647ebb5e0fb6635fb9c0e6050872b10c', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.renderField(), this.error ? (index.h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, index.h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), index.h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), index.h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), 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; }
 };