@brandsync/wc 1.18.0 → 1.20.0

package/dist/cjs/bs-radio-group.cjs.entry.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var index = require('./index-BFxk-bY6.js');
+
+const bsRadioGroupCss = () => `:host{display:block;--bs-radio-group-gap:var(--bs-spacing-50);--bs-radio-group-options-gap:var(--bs-spacing-0);--bs-radio-group-label-color:var(--bs-text-default);--bs-radio-group-description-color:var(--bs-text-secondary);--bs-radio-group-error-color:var(--bs-text-error)}:host([orientation='horizontal']){--bs-radio-group-options-gap:var(--bs-spacing-300)}.bs-radio-group{display:flex;flex-direction:column;gap:var(--bs-radio-group-gap);font-family:inherit}.bs-radio-group__label{font-size:var(--bs-font-size-md);font-weight:var(--bs-font-weight-medium);color:var(--bs-radio-group-label-color)}.bs-radio-group__options{display:flex;flex-direction:column;align-items:flex-start;gap:var(--bs-radio-group-options-gap)}:host([orientation='horizontal']) .bs-radio-group__options{flex-direction:row;flex-wrap:wrap;align-items:center}.bs-radio-group__description,.bs-radio-group__error{font-size:var(--bs-font-size-xs)}.bs-radio-group__description{color:var(--bs-radio-group-description-color)}.bs-radio-group__error{color:var(--bs-radio-group-error-color)}`;
+
+let uid = 0;
+const BsRadioGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsChange = index.createEvent(this, "bsChange");
+    }
+    get el() { return index.getElement(this); }
+    id = `bs-radio-group-${++uid}`;
+    /** Visible group label, also the accessible name of the group. */
+    label;
+    /** Helper text under the options. Replaced by `error` while that is set. */
+    description;
+    /** Error message. Sets `aria-invalid`, replaces the helper text and is announced with the group. */
+    error;
+    /** Layout of the radios. */
+    orientation = 'vertical';
+    /** `name` given to every radio in the group. Defaults to a generated, unique name. */
+    name;
+    /** `value` of the checked radio. Setting it checks the matching radio (and unchecks the rest). */
+    value;
+    /** Marks the group as required: sets `aria-required` and shows an asterisk after the label. */
+    required = false;
+    /** Check the first enabled radio when none is checked, so a choice is always made. Off by default so a form can start empty. */
+    selectFirst = false;
+    /** Emitted with the new `value` when the user checks a radio. Replaces the radios' own `bsChange`, which does not reach listeners outside the group. */
+    bsChange;
+    radios() {
+        return Array.from(this.el.querySelectorAll('bs-radio'));
+    }
+    onValueOrName() {
+        this.sync(true);
+    }
+    componentWillLoad() {
+        this.sync(false);
+    }
+    /** Shared name on every radio, then reconcile checked state with `value`. */
+    sync(fromValue) {
+        const radios = this.radios();
+        const name = this.name ?? this.id;
+        radios.forEach(r => (r.name = name));
+        const checked = radios.filter(r => r.checked);
+        let target;
+        if (fromValue || (this.value !== undefined && this.value !== null)) {
+            target = radios.find(r => r.value === this.value);
+        }
+        if (!target)
+            target = checked[0];
+        if (!target && this.selectFirst)
+            target = radios.find(r => !r.disabled);
+        radios.forEach(r => {
+            const should = r === target;
+            if (r.checked !== should)
+                r.checked = should;
+        });
+        const next = target?.value;
+        if (next !== this.value && (target || fromValue))
+            this.value = next;
+    }
+    onSlotchange = () => this.sync(false);
+    onRadioChange(ev) {
+        if (ev.target === this.el)
+            return; // our own event
+        ev.stopImmediatePropagation();
+        this.value = ev.detail;
+        this.bsChange.emit(ev.detail);
+    }
+    render() {
+        const labelId = `${this.id}-label`;
+        const descId = `${this.id}-desc`;
+        const note = this.error || this.description;
+        return (index.h("div", { key: 'c7083540ebf734f8b78a3ee20480e32d5448f2d2', part: "group", class: { 'bs-radio-group': true, 'bs-radio-group--error': !!this.error }, role: "radiogroup", "aria-labelledby": this.label ? labelId : undefined, "aria-describedby": note ? descId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined }, this.label && (index.h("span", { key: '604f60844e305a5057f42e2cebbf5ec80d04952d', id: labelId, part: "label", class: "bs-radio-group__label" }, this.label, this.required && index.h("span", { key: '196ce4747d209610f45afe5eabc1d629220e9560', "aria-hidden": "true" }, " *"))), index.h("div", { key: 'b3c30a8aa04a56227033d76f905166a7c556ed4a', part: "options", class: "bs-radio-group__options" }, index.h("slot", { key: '70f9d26d4c52ce386a3c25fe9ca7297fe49ea77c', onSlotchange: this.onSlotchange })), note && (index.h("span", { key: '9252a1a05bfe98719612aac2a6ff5c72ddff7621', id: descId, part: this.error ? 'error' : 'description', class: this.error ? 'bs-radio-group__error' : 'bs-radio-group__description' }, this.error || this.description))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueOrName": 0
+            }],
+        "name": [{
+                "onValueOrName": 0
+            }]
+    }; }
+};
+BsRadioGroup.style = bsRadioGroupCss();
+
+exports.bs_radio_group = BsRadioGroup;

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
-const bsRadioCss = () => `:host{display:inline-block;--bs-radio-size:var(--bs-spacing-300);--bs-radio-border-width:2px;--bs-radio-state-layer-size:40px;--bs-radio-hit-area-size:48px;--bs-radio-gap:var(--bs-spacing-100)}.bs-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bs-radio-gap);font-family:inherit;cursor:pointer}.bs-radio--disabled{cursor:not-allowed}.bs-radio__input{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}.bs-radio__input:disabled{cursor:not-allowed}.bs-radio__hit-area{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--bs-radio-hit-area-size);height:var(--bs-radio-hit-area-size)}.bs-radio__state-layer{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:var(--bs-radio-state-layer-size);height:var(--bs-radio-state-layer-size);border-radius:50%;background:var(--bs-radio-bg-default)}.bs-radio__circle{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--bs-radio-size);height:var(--bs-radio-size);border:var(--bs-radio-border-width) solid var(--bs-radio-enabled-border-default);border-radius:50%;background:transparent}.bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-default)}.bs-radio__dot{width:50%;height:50%;border-radius:50%;background:var(--bs-radio-icon-checked)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-hover)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-enabled-border-hover)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-hover)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__circle--selected .bs-radio__dot{background:var(--bs-radio-icon-hover)}.bs-radio__input:focus-visible~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-focus);outline:2px solid var(--bs-radio-focus-ring);outline-offset:2px}.bs-radio__input:focus-visible~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-enabled-border-focus)}.bs-radio__input:focus-visible~.bs-radio__hit-area .bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-focus)}.bs-radio__input:active:not(:disabled)~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-pressed)}.bs-radio__input:active:not(:disabled)~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-enabled-border-pressed)}.bs-radio__input:active:not(:disabled)~.bs-radio__hit-area .bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-pressed)}.bs-radio__input:disabled~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-disabled)}.bs-radio__input:disabled~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-border-disabled)}.bs-radio__input:disabled~.bs-radio__hit-area .bs-radio__circle--selected .bs-radio__dot{background:var(--bs-radio-icon-disabled)}.bs-radio__label{font-size:var(--bs-font-size-md);color:var(--bs-radio-label-default)}.bs-radio--disabled .bs-radio__label{color:var(--bs-radio-label-disabled)}@media (forced-colors: active){.bs-radio__circle{border:2px solid ButtonText;forced-color-adjust:none;background:Canvas}.bs-radio__dot{background:Highlight}}`;
+const bsRadioCss = () => `:host{display:inline-block;--bs-radio-size:var(--bs-spacing-300);--bs-radio-border-width:2px;--bs-radio-state-layer-size:40px;--bs-radio-hit-area-size:48px;--bs-radio-gap:var(--bs-spacing-100)}.bs-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bs-radio-gap);font-family:inherit;cursor:pointer}.bs-radio--disabled{cursor:not-allowed}.bs-radio__input{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}.bs-radio__input:disabled{cursor:not-allowed}.bs-radio__hit-area{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--bs-radio-hit-area-size);height:var(--bs-radio-hit-area-size)}.bs-radio__state-layer{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:var(--bs-radio-state-layer-size);height:var(--bs-radio-state-layer-size);border-radius:50%;background:var(--bs-radio-bg-default)}.bs-radio__circle{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--bs-radio-size);height:var(--bs-radio-size);border:var(--bs-radio-border-width) solid var(--bs-radio-enabled-border-default);border-radius:50%;background:transparent}.bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-default)}.bs-radio__dot{width:50%;height:50%;border-radius:50%;background:var(--bs-radio-icon-checked)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-hover)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-enabled-border-hover)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-hover)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__circle--selected .bs-radio__dot{background:var(--bs-radio-icon-hover)}.bs-radio__input:focus-visible~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-focus);outline:2px solid var(--bs-radio-focus-ring);outline-offset:2px}.bs-radio__input:focus-visible~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-enabled-border-focus)}.bs-radio__input:focus-visible~.bs-radio__hit-area .bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-focus)}.bs-radio__input:active:not(:disabled)~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-pressed)}.bs-radio__input:active:not(:disabled)~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-enabled-border-pressed)}.bs-radio__input:active:not(:disabled)~.bs-radio__hit-area .bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-pressed)}.bs-radio__input:disabled~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-disabled)}.bs-radio__input:disabled~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-border-disabled)}.bs-radio__input:disabled~.bs-radio__hit-area .bs-radio__circle--selected .bs-radio__dot{background:var(--bs-radio-icon-disabled)}.bs-radio__label{font-size:var(--bs-font-size-md);color:var(--bs-radio-label-default)}.bs-radio--disabled .bs-radio__label{color:var(--bs-radio-label-disabled)}@media (forced-colors: active){.bs-radio__circle{border:2px solid ButtonText;forced-color-adjust:none;background:Canvas}.bs-radio__dot{background:Highlight}}.bs-radio__ripple{border-radius:50%;--bs-ripple-color:var(--bs-color-primary-default)}`;
 
 const BsRadio = class {
     constructor(hostRef) {
@@ -26,6 +26,10 @@ const BsRadio = class {
     /** The native radio input's `value` attribute -- read from `event.target.value`, or used when
      * wiring the group up to a form. */
     value;
+    /** Accessible name for the radio, set as `aria-label` on the native input. Use it when the radio
+     * has no slotted label text (an icon-only choice) or its visible label lives elsewhere. Same as
+     * `bs-checkbox` / `bs-switch`. */
+    ariaLabel = null;
     /** Whether the radio is checked. Mutable so clicking the label/input sets it directly. */
     checked = false;
     /** Disables the radio: sets the native `disabled` attribute, suppresses hover/focus styling, and
@@ -49,7 +53,7 @@ const BsRadio = class {
         return Array.from(root.querySelectorAll('bs-radio')).filter(r => r.name === this.name);
     }
     onCheckedChange() {
-        this.internals?.setFormValue?.(this.checked ? this.value ?? 'on' : null);
+        this.internals?.setFormValue?.(this.checked ? (this.value ?? 'on') : null);
         if (this.checked) {
             this.groupMembers().forEach(r => {
                 if (r !== this.el && r.checked)
@@ -66,7 +70,7 @@ const BsRadio = class {
     }
     componentWillLoad() {
         this.initialChecked = this.checked;
-        this.internals?.setFormValue?.(this.checked ? this.value ?? 'on' : null);
+        this.internals?.setFormValue?.(this.checked ? (this.value ?? 'on') : null);
     }
     componentDidLoad() {
         this.refreshGroupState();
@@ -100,7 +104,7 @@ const BsRadio = class {
         }
     };
     render() {
-        return (index.h("label", { key: '886be8e0972dcb7d918447186ac6972a9132eb02', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, index.h("input", { key: 'd82e6e5d9a5a283bf3a0590add040cfb8f153fb7', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), index.h("span", { key: '3844f7c165afc6c2de1b4befbe0d6aa5b89dab42', class: "bs-radio__hit-area" }, index.h("span", { key: 'd710b061715195882f889284e4b13dc872df03be', class: "bs-radio__state-layer" }, index.h("span", { key: 'd7eaa53202cfd9884ea6f890ff609e678d043fb0', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && index.h("span", { key: 'c4942a1f370d7822a88e05a5d150bc5cb9cdd426', part: "dot", class: "bs-radio__dot" })))), index.h("span", { key: '79b5334b22ffe48a63bff43b0a8ce3df8c57e9cb', part: "label", class: "bs-radio__label" }, index.h("slot", { key: 'f71e839a6afe980e2ef54d40c4b40d6513ff0540' }))));
+        return (index.h("label", { key: '1dfd58a24e299fe2a26e16dbfeb7d7246b7ae061', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, index.h("input", { key: '3fd3733f26e706e37721bc7e5444aeba2f9ca635', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.ariaLabel, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), index.h("span", { key: 'c3a5a1e790748393f384525413a4cf59be9d1885', class: "bs-radio__hit-area" }, index.h("bs-ripple", { key: '20b0b6b017644e259a3935ab88b9a512ea9471b7', part: "ripple", class: "bs-radio__ripple", centered: true, triggerSelector: ".bs-radio", disabled: this.disabled }), index.h("span", { key: '0bed296533c97c2e94260969a5486c76b905e205', class: "bs-radio__state-layer" }, index.h("span", { key: 'a8f71a9aecdaff2329d3179de0d37797c53a79d6', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && index.h("span", { key: '0409d98b080ac54541353068548d149fb22e0dba', part: "dot", class: "bs-radio__dot" })))), index.h("span", { key: 'ce380ae5ab8ccb1b0b033d04095bb53dd2090be4', part: "label", class: "bs-radio__label" }, index.h("slot", { key: '39b83b5fd4a2337379cfbba0dd931a93e9c379e3' }))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

package/dist/cjs/bs-search-item.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
-const bsSearchItemCss = () => `:host{display:block;width:100%;box-sizing:border-box;--bs-search-item-min-height:var(--bs-spacing-600);--bs-search-item-padding-y:var(--bs-spacing-100);--bs-search-item-padding-x:var(--bs-spacing-150);--bs-search-item-gap:var(--bs-spacing-100);--bs-search-item-radius:var(--bs-border-radius-100);--bs-search-item-bg:transparent;--bs-search-item-bg-active:var(--bs-surface-hover);--bs-search-item-bg-pressed:var(--bs-surface-pressed);--bs-search-item-color:var(--bs-text-default);--bs-search-item-color-muted:var(--bs-text-muted);--bs-search-item-color-disabled:var(--bs-text-on-disabled);--bs-search-item-icon-color:var(--bs-icon-default)}.bs-search-item{box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-search-item-gap);width:100%;min-height:var(--bs-search-item-min-height);padding:var(--bs-search-item-padding-y) var(--bs-search-item-padding-x);border-radius:var(--bs-search-item-radius);background:var(--bs-search-item-bg);color:var(--bs-search-item-color);font-family:inherit;cursor:pointer;transition:background-color 120ms ease}:host([active]) .bs-search-item,.bs-search-item:hover{background:var(--bs-search-item-bg-active)}.bs-search-item:active{background:var(--bs-search-item-bg-pressed)}:host([disabled]) .bs-search-item{background:var(--bs-search-item-bg);color:var(--bs-search-item-color-disabled);cursor:default}.bs-search-item__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--bs-search-item-icon-color)}.bs-search-item__icon--hidden,.bs-search-item__description--hidden,.bs-search-item__trailing--hidden{display:none}.bs-search-item__icon ::slotted(svg){width:24px;height:24px}.bs-search-item__content{flex:1 1 0;min-width:0;display:flex;flex-direction:column}.bs-search-item__label{font-size:var(--bs-font-size-md);font-weight:var(--bs-font-weight-regular);line-height:24px}.bs-search-item__label ::slotted(b),.bs-search-item__label ::slotted(strong){font-weight:var(--bs-font-weight-semibold)}.bs-search-item__description{color:var(--bs-search-item-color-muted);font-size:var(--bs-font-size-sm);line-height:20px}.bs-search-item__trailing{flex:0 0 auto;color:var(--bs-search-item-color-muted);font-size:var(--bs-font-size-sm);line-height:20px;white-space:nowrap}:host([disabled]) .bs-search-item__description,:host([disabled]) .bs-search-item__trailing{color:var(--bs-search-item-color-disabled)}@media (prefers-reduced-motion: reduce){.bs-search-item{transition:none}}`;
+const bsSearchItemCss = () => `:host{display:block;width:100%;box-sizing:border-box;--bs-search-item-min-height:var(--bs-spacing-600);--bs-search-item-padding-y:var(--bs-spacing-100);--bs-search-item-padding-x:var(--bs-spacing-150);--bs-search-item-gap:var(--bs-spacing-100);--bs-search-item-radius:var(--bs-border-radius-100);--bs-search-item-bg:transparent;--bs-search-item-bg-active:var(--bs-surface-hover);--bs-search-item-bg-pressed:var(--bs-surface-pressed);--bs-search-item-color:var(--bs-text-default);--bs-search-item-color-muted:var(--bs-text-muted);--bs-search-item-color-disabled:var(--bs-text-on-disabled);--bs-search-item-icon-color:var(--bs-icon-default)}.bs-search-item{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-search-item-gap);width:100%;min-height:var(--bs-search-item-min-height);padding:var(--bs-search-item-padding-y) var(--bs-search-item-padding-x);border-radius:var(--bs-search-item-radius);background:var(--bs-search-item-bg);color:var(--bs-search-item-color);font-family:inherit;cursor:pointer;transition:background-color 120ms ease}:host([active]) .bs-search-item,.bs-search-item:hover{background:var(--bs-search-item-bg-active)}.bs-search-item:active{background:var(--bs-search-item-bg-pressed)}:host([disabled]) .bs-search-item{background:var(--bs-search-item-bg);color:var(--bs-search-item-color-disabled);cursor:default}.bs-search-item__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--bs-search-item-icon-color)}.bs-search-item__icon--hidden,.bs-search-item__description--hidden,.bs-search-item__trailing--hidden{display:none}.bs-search-item__icon ::slotted(svg){width:24px;height:24px}.bs-search-item__content{flex:1 1 0;min-width:0;display:flex;flex-direction:column}.bs-search-item__label{font-size:var(--bs-font-size-md);font-weight:var(--bs-font-weight-regular);line-height:24px}.bs-search-item__label ::slotted(b),.bs-search-item__label ::slotted(strong){font-weight:var(--bs-font-weight-semibold)}.bs-search-item__description{color:var(--bs-search-item-color-muted);font-size:var(--bs-font-size-sm);line-height:20px}.bs-search-item__trailing{flex:0 0 auto;color:var(--bs-search-item-color-muted);font-size:var(--bs-font-size-sm);line-height:20px;white-space:nowrap}:host([disabled]) .bs-search-item__description,:host([disabled]) .bs-search-item__trailing{color:var(--bs-search-item-color-disabled)}@media (prefers-reduced-motion: reduce){.bs-search-item{transition:none}}`;
 
 const BsSearchItem = class {
     constructor(hostRef) {
@@ -39,7 +39,7 @@ const BsSearchItem = class {
     slotFilled = (set) => (ev) => set(ev.target.assignedNodes().length > 0);
     render() {
         const role = this.selectionRole ?? undefined;
-        return (index.h("div", { key: 'ff15a6983c32e576c3a1475b058b8b98c7b26906', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": role && this.disabled ? 'true' : undefined }, index.h("span", { key: 'a7d9ce608a6354301292b3a5581b598459d1e748', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, index.h("slot", { key: '842835090311c9139a58058db8b813dd08cefe63', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), index.h("span", { key: '49593768f387d0c6c551a02c5a45c7f9907d48cc', part: "content", class: "bs-search-item__content" }, index.h("span", { key: '88f041e7c4ff60001c3b29beb0b60272ac8f5ab8', part: "label", class: "bs-search-item__label" }, index.h("slot", { key: 'd987b5809b3aa4acafe7d3fe99e477adf3ef94c1' })), index.h("span", { key: '54be04f167f1b95b0930755f33a827fe6b0be69d', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, index.h("slot", { key: '1f5557fe80ba24b69d9b8879be119edb4602c881', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), index.h("span", { key: '5a6a5fc58a12cc02f8ab4555bc580f63af137232', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, index.h("slot", { key: '89514db103242c48b2d062340558aa6ded0d157b', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
+        return (index.h("div", { key: '4e02263a2d377be0989f3469555f19f9b4933840', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": role && this.disabled ? 'true' : undefined }, !this.disabled && index.h("bs-ripple", { key: '00523f734a7d994cf448df045a73d4588da1c00c', part: "ripple" }), index.h("span", { key: '2d030afeec12e555c72d1659f0ac7d2ecb4df70a', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, index.h("slot", { key: 'ab14918cfcb5425b33c1489232ea18bf940dc49d', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), index.h("span", { key: 'eee1f17e15fa4195f3a65fa7bc7f3ad12d839b7c', part: "content", class: "bs-search-item__content" }, index.h("span", { key: '75cd5ada24d085dce96331782c4e71317d0d8ed4', part: "label", class: "bs-search-item__label" }, index.h("slot", { key: '47fbf5d269d2a23eb824ba32084886efdad2aa96' })), index.h("span", { key: 'b2e4154147a02059d08505bc9f452931bbcff2bf', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, index.h("slot", { key: '8b72f89b59fa15c21c0d02b3db88b3e291d72f81', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), index.h("span", { key: 'e0b5675b2d71fe5e740fd90ff2aea5eecca2f9eb', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, index.h("slot", { key: 'c0dc999d7b4da6b670690b72071f5b844b86b35b', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
     }
 };
 BsSearchItem.style = bsSearchItemCss();

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

@@ -0,0 +1,234 @@
+'use strict';
+
+var index = require('./index-BFxk-bY6.js');
+
+const bsSelectCss = () => `:host{display:block;position:relative;--bs-select-radius:var(--bs-border-radius-100);--bs-select-height:var(--bs-spacing-550);--bs-select-padding-x:var(--bs-spacing-150);--bs-select-stack-gap:var(--bs-spacing-50);--bs-select-icon-size:var(--bs-spacing-300);--bs-select-field-bg:var(--bs-input-bg-default);--bs-select-field-bg-disabled:var(--bs-input-bg-disabled);--bs-select-field-border:var(--bs-input-border-default);--bs-select-field-border-hover:var(--bs-input-border-hover);--bs-select-field-border-focus:var(--bs-input-border-focus);--bs-select-field-border-error:var(--bs-input-border-error);--bs-select-field-text:var(--bs-input-text);--bs-select-field-text-disabled:var(--bs-input-text-disabled);--bs-select-placeholder-color:var(--bs-input-placeholder);--bs-select-icon-color:var(--bs-icon-muted);--bs-select-label-color:var(--bs-input-label);--bs-select-description-color:var(--bs-input-description);--bs-select-error-color:var(--bs-input-error);--bs-select-listbox-bg:var(--bs-surface-raised);--bs-select-listbox-radius:var(--bs-border-radius-100);--bs-select-listbox-shadow:var(--bs-shadow-md);--bs-select-listbox-max-height:var(--bs-scale-3200);--bs-select-listbox-z-index:var(--bs-z-index-popover);--bs-select-option-height:var(--bs-spacing-550);--bs-select-option-hover:var(--bs-color-neutral-container-hover);--bs-select-option-selected:var(--bs-surface-selected);--bs-select-option-color:var(--bs-text-default);--bs-select-option-color-disabled:var(--bs-text-on-disabled);--bs-select-check-color:var(--bs-icon-action);--bs-select-focus-ring-color:var(--bs-border-neutral-focus)}.bs-select{display:flex;flex-direction:column;gap:var(--bs-select-stack-gap);font-family:inherit}.bs-select__label{font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);color:var(--bs-select-label-color)}.bs-select__required{color:var(--bs-select-error-color);margin-inline-start:2px}.bs-select__wrapper{position:relative}.bs-select__field{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bs-spacing-100);height:var(--bs-select-height);padding:0 var(--bs-select-padding-x);border:1px solid var(--bs-select-field-border);border-radius:var(--bs-select-radius);background:var(--bs-select-field-bg);color:var(--bs-select-field-text);font-size:var(--bs-font-size-md);cursor:pointer;outline:none}.bs-select__field:hover:not(.bs-select__field--disabled){border-color:var(--bs-select-field-border-hover)}.bs-select__field:focus-visible,.bs-select__field--open{border-color:var(--bs-select-field-border-focus)}.bs-select__field:focus-visible{outline:2px solid var(--bs-select-focus-ring-color);outline-offset:2px}.bs-select__field--error{border-color:var(--bs-select-field-border-error)}.bs-select__field--disabled{background:var(--bs-select-field-bg-disabled);color:var(--bs-select-field-text-disabled);cursor:not-allowed}.bs-select__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bs-select__value--placeholder{color:var(--bs-select-placeholder-color)}.bs-select__chevron{flex-shrink:0;width:var(--bs-select-icon-size);height:var(--bs-select-icon-size);color:var(--bs-select-icon-color);transition:transform 0.15s ease}.bs-select__field--open .bs-select__chevron{transform:rotate(180deg)}.bs-select__listbox{box-sizing:border-box;position:absolute;inset-inline:0;top:calc(100% + var(--bs-spacing-50));z-index:var(--bs-select-listbox-z-index);margin:0;padding:var(--bs-spacing-50) 0;list-style:none;max-height:var(--bs-select-listbox-max-height);overflow-y:auto;background:var(--bs-select-listbox-bg);border-radius:var(--bs-select-listbox-radius);box-shadow:var(--bs-select-listbox-shadow)}.bs-select__listbox[hidden]{display:none}.bs-select__option{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bs-spacing-100);min-height:var(--bs-select-option-height);padding:var(--bs-spacing-100) var(--bs-select-padding-x);color:var(--bs-select-option-color);font-size:var(--bs-font-size-md);cursor:pointer}.bs-select__option--active{background:var(--bs-select-option-hover)}.bs-select__option--selected{background:var(--bs-select-option-selected);font-weight:var(--bs-font-weight-semibold)}.bs-select__option--selected.bs-select__option--active{background:var(--bs-select-option-hover)}.bs-select__option--disabled{color:var(--bs-select-option-color-disabled);cursor:not-allowed}.bs-select__check{flex-shrink:0;width:var(--bs-select-icon-size);height:var(--bs-select-icon-size);color:var(--bs-select-check-color)}.bs-select__description,.bs-select__error{font-size:var(--bs-font-size-sm)}.bs-select__description{color:var(--bs-select-description-color)}.bs-select__error{color:var(--bs-select-error-color)}@media (forced-colors: active){.bs-select__field{border-color:ButtonText}.bs-select__option--active{background:Highlight;color:HighlightText}}`;
+
+let selectId = 0;
+const BsSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsChange = index.createEvent(this, "bsChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    internals;
+    uid = ++selectId;
+    initialValue = '';
+    typeahead = '';
+    typeaheadTimer;
+    listEl;
+    fieldEl;
+    /** Name the value is submitted under in a surrounding `<form>`. */
+    name;
+    /** The selected option's `value`. */
+    value = '';
+    /** The options. Must be set as a JS property, not an attribute. */
+    options = [];
+    /** Visible label. */
+    label;
+    /** Accessible name when there is no visible `label`. */
+    ariaLabel = null;
+    /** Text shown while no option is selected. */
+    placeholder = 'Select';
+    /** Helper text below the field (replaced by `error` when set). */
+    description;
+    /** Error message; puts the field in its error state. */
+    error;
+    /** Disables the select. */
+    disabled = false;
+    /** Marks the field required (native form validation + asterisk). */
+    required = false;
+    /** Whether the listbox is open. */
+    open = false;
+    /** Emitted when the user picks an option, with the new value. */
+    bsChange;
+    activeIndex = -1;
+    syncForm() {
+        this.internals?.setFormValue?.(this.value || null);
+        if (this.required && !this.value) {
+            this.internals?.setValidity?.({ valueMissing: true }, 'Please select an item in the list.', this.fieldEl);
+        }
+        else {
+            this.internals?.setValidity?.({});
+        }
+    }
+    onOpen(next) {
+        if (next) {
+            const sel = this.options.findIndex(o => o.value === this.value && !o.disabled);
+            this.activeIndex = sel >= 0 ? sel : this.step(-1, 1);
+            document.addEventListener('click', this.onDocClick, true);
+        }
+        else {
+            document.removeEventListener('click', this.onDocClick, true);
+        }
+    }
+    formResetCallback() {
+        this.value = this.initialValue;
+        this.open = false;
+    }
+    componentWillLoad() {
+        this.initialValue = this.value;
+        this.syncForm();
+    }
+    componentDidRender() {
+        if (this.open && this.activeIndex >= 0) {
+            const el = this.listEl?.children[this.activeIndex];
+            el?.scrollIntoView?.({ block: 'nearest' });
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.onDocClick, true);
+    }
+    onDocClick = (ev) => {
+        if (!ev.composedPath().includes(this.el))
+            this.open = false;
+    };
+    /** Next enabled index after `from` in direction `dir`; stays on `from` (or -1) when none. */
+    step(from, dir) {
+        for (let i = from + dir; i >= 0 && i < this.options.length; i += dir) {
+            if (!this.options[i].disabled)
+                return i;
+        }
+        return from >= 0 && from < this.options.length && !this.options[from].disabled ? from : -1;
+    }
+    commit(index) {
+        const opt = this.options[index];
+        if (!opt || opt.disabled)
+            return;
+        const changed = opt.value !== this.value;
+        this.value = opt.value;
+        this.open = false;
+        if (changed)
+            this.bsChange.emit(opt.value);
+    }
+    selectedIndex() {
+        return this.options.findIndex(o => o.value === this.value);
+    }
+    findByPrefix(prefix, start) {
+        const n = this.options.length;
+        for (let k = 0; k < n; k++) {
+            const i = (start + k) % n;
+            const o = this.options[i];
+            if (!o.disabled && o.label.toLowerCase().startsWith(prefix))
+                return i;
+        }
+        return -1;
+    }
+    onKeyDown = (ev) => {
+        if (this.disabled || ev.altKey || ev.ctrlKey || ev.metaKey)
+            return;
+        const k = ev.key;
+        const current = this.open ? this.activeIndex : this.selectedIndex();
+        // Open: move the highlight. Closed: change the selection directly (native select behaviour).
+        const move = (i) => {
+            if (i < 0)
+                return;
+            if (this.open)
+                this.activeIndex = i;
+            else
+                this.commit(i);
+        };
+        if (!this.open && (k === 'Enter' || k === ' ')) {
+            ev.preventDefault();
+            this.open = true;
+            return;
+        }
+        switch (k) {
+            case 'ArrowDown':
+                ev.preventDefault();
+                if (!this.open)
+                    this.open = true;
+                else
+                    move(this.step(current, 1));
+                return;
+            case 'ArrowUp':
+                ev.preventDefault();
+                if (!this.open)
+                    this.open = true;
+                else
+                    move(this.step(current, -1));
+                return;
+            case 'Home':
+                ev.preventDefault();
+                move(this.step(-1, 1));
+                return;
+            case 'End':
+                ev.preventDefault();
+                move(this.step(this.options.length, -1));
+                return;
+            case 'Enter':
+            case ' ':
+                ev.preventDefault();
+                this.commit(this.activeIndex);
+                return;
+            case 'Escape':
+                if (this.open) {
+                    ev.preventDefault();
+                    this.open = false;
+                }
+                return;
+            case 'Tab':
+                this.open = false;
+                return;
+        }
+        if (k.length === 1 && /\S/.test(k)) {
+            ev.preventDefault();
+            clearTimeout(this.typeaheadTimer);
+            this.typeahead += k.toLowerCase();
+            this.typeaheadTimer = setTimeout(() => (this.typeahead = ''), 600);
+            // Repeating one letter cycles through matches; otherwise match the growing prefix.
+            const single = this.typeahead.split('').every(c => c === this.typeahead[0]);
+            const prefix = single ? this.typeahead[0] : this.typeahead;
+            const start = current < 0 ? 0 : single && this.typeahead.length > 1 ? current + 1 : current;
+            move(this.findByPrefix(prefix, start));
+        }
+    };
+    onFieldClick = () => {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+    };
+    onBlur = () => {
+        if (this.open)
+            this.open = false;
+    };
+    render() {
+        const labelId = `bs-select-label-${this.uid}`;
+        const listId = `bs-select-list-${this.uid}`;
+        const msgId = `bs-select-msg-${this.uid}`;
+        const selected = this.options.find(o => o.value === this.value);
+        const optId = (i) => `bs-select-opt-${this.uid}-${i}`;
+        const fieldClasses = ['bs-select__field', this.error ? 'bs-select__field--error' : '', this.disabled ? 'bs-select__field--disabled' : '', this.open ? 'bs-select__field--open' : '']
+            .filter(Boolean)
+            .join(' ');
+        return (index.h("div", { key: 'b966bfa9b43400d8e96ea994e4899690f41a3b25', class: `bs-select ${this.error ? 'bs-select--error' : ''}` }, this.label && (index.h("span", { key: 'e5b3827d0e15beacd42b13c1e02bbb5b8eec724f', part: "label", id: labelId, class: "bs-select__label", onClick: () => !this.disabled && this.fieldEl?.focus() }, this.label, this.required && (index.h("span", { key: '69edf6965f73dd1380bebf7ce6a19d2d3456c495', class: "bs-select__required", "aria-hidden": "true" }, "*")))), index.h("div", { key: '3f66523ef85b2274c60775bd3700649551fb1777', class: "bs-select__wrapper" }, index.h("div", { key: 'e234bc7060b6f121ca4425d5359ec74221626418', part: "field", class: fieldClasses, ref: el => (this.fieldEl = el), role: "combobox", tabindex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.open), "aria-controls": listId, "aria-labelledby": this.label ? labelId : undefined, "aria-label": this.label ? undefined : this.ariaLabel, "aria-activedescendant": this.open && this.activeIndex >= 0 ? optId(this.activeIndex) : undefined, "aria-describedby": this.error || this.description ? msgId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onFieldClick, onKeyDown: this.onKeyDown, onBlur: this.onBlur }, index.h("span", { key: '800c4eff295238e60c2cb976e2118d968cd30851', part: "value", class: `bs-select__value ${selected ? '' : 'bs-select__value--placeholder'}` }, selected ? selected.label : this.placeholder), index.h("svg", { key: 'cfa09749f81c702957b7bc45f1f418f0d90c4eb8', part: "icon", class: "bs-select__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { key: 'b166df87f7112440d1adea4c07ef7a3ec08ea59d', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("ul", { key: '883dc5c400045f43c40faad9b1113f3fd479e2e4', part: "listbox", id: listId, class: "bs-select__listbox", role: "listbox", "aria-labelledby": this.label ? labelId : undefined, "aria-label": this.label ? undefined : this.ariaLabel, hidden: !this.open, ref: el => (this.listEl = el), onMouseDown: (ev) => ev.preventDefault() }, this.options.map((o, i) => (index.h("li", { part: "option", id: optId(i), key: o.value, role: "option", "aria-selected": String(o.value === this.value), "aria-disabled": o.disabled ? 'true' : undefined, class: ['bs-select__option', i === this.activeIndex ? 'bs-select__option--active' : '', o.disabled ? 'bs-select__option--disabled' : '', o.value === this.value ? 'bs-select__option--selected' : '']
+                .filter(Boolean)
+                .join(' '), onClick: () => this.commit(i), onMouseMove: () => !o.disabled && this.activeIndex !== i && (this.activeIndex = i) }, index.h("span", { class: "bs-select__option-label" }, o.label), o.value === this.value && (index.h("svg", { class: "bs-select__check", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { d: "M3.5 8.5L6.5 11.5L12.5 4.5", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.error ? (index.h("span", { id: msgId, part: "error", class: "bs-select__error" }, this.error)) : this.description ? (index.h("span", { id: msgId, part: "description", class: "bs-select__description" }, this.description)) : null));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "syncForm": 0
+            }],
+        "required": [{
+                "syncForm": 0
+            }],
+        "options": [{
+                "syncForm": 0
+            }],
+        "open": [{
+                "onOpen": 0
+            }]
+    }; }
+};
+BsSelect.style = bsSelectCss();
+
+exports.bs_select = BsSelect;

package/dist/cjs/bs-session-timeout.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
 const bsSessionTimeoutCss = () => `:host{display:block;width:var(--bs-session-timeout-width);min-width:var(--bs-session-timeout-min-width);max-width:var(--bs-session-timeout-max-width);--bs-session-timeout-width:440px;--bs-session-timeout-min-width:380px;--bs-session-timeout-max-width:560px;--bs-session-timeout-bg:var(--bs-paper-bg-base);--bs-session-timeout-radius:var(--bs-border-radius-150);--bs-session-timeout-padding:var(--bs-spacing-200);--bs-session-timeout-gap:var(--bs-spacing-150);--bs-session-timeout-shadow:0 8px 8px var(--bs-elevation-higher);--bs-session-timeout-color:var(--bs-text-default);--bs-session-timeout-color-secondary:var(--bs-text-secondary);--bs-session-timeout-countdown-bg:var(--bs-surface-container);--bs-session-timeout-countdown-fill:var(--bs-color-warning-default);--bs-session-timeout-countdown-track:var(--bs-surface-hover);--bs-session-timeout-rule:var(--bs-border-default)}.bs-session-timeout{--bs-card-bg:var(--bs-session-timeout-bg);--bs-card-radius:var(--bs-session-timeout-radius);--bs-card-padding:var(--bs-session-timeout-padding);--bs-card-shadow:var(--bs-session-timeout-shadow);color:var(--bs-session-timeout-color)}.bs-session-timeout__body{display:flex;flex-direction:column;align-items:stretch;gap:var(--bs-session-timeout-gap)}bs-icon-tile{align-self:flex-start}.bs-session-timeout__glyph,::slotted([slot='icon']){width:24px;height:24px}.bs-session-timeout__heading-group{display:flex;flex-direction:column;gap:6px}.bs-session-timeout__heading{margin:0;font-size:var(--bs-font-size-2xl);font-weight:var(--bs-font-weight-bold);line-height:32px}.bs-session-timeout__description{margin:0;color:var(--bs-session-timeout-color-secondary);font-size:var(--bs-font-size-md);line-height:24px}.bs-session-timeout__countdown{display:flex;flex-direction:column;gap:var(--bs-spacing-100);padding:var(--bs-spacing-200);border-radius:var(--bs-border-radius-100);background:var(--bs-session-timeout-countdown-bg)}.bs-session-timeout__countdown bs-progress-linear{--bs-progress-linear-fill:var(--bs-session-timeout-countdown-fill);--bs-progress-linear-track:var(--bs-session-timeout-countdown-track)}.bs-session-timeout__time-row{display:flex;align-items:flex-end;gap:var(--bs-spacing-100)}.bs-session-timeout__time{font-size:var(--bs-font-size-3xl);font-weight:var(--bs-font-weight-bold);line-height:40px;font-variant-numeric:tabular-nums}.bs-session-timeout__unit{padding-bottom:6px;color:var(--bs-session-timeout-color-secondary);font-size:var(--bs-font-size-sm);line-height:20px}.bs-session-timeout__saved{display:flex;align-items:center;gap:var(--bs-spacing-100);margin:0;color:var(--bs-session-timeout-color-secondary);font-size:var(--bs-font-size-sm);line-height:20px}.bs-session-timeout__saved-icon{flex:none;width:16px;height:16px}.bs-session-timeout__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--bs-spacing-100)}.bs-session-timeout__actions bs-button,.bs-session-timeout__alternatives bs-button,.bs-session-timeout__block-button{--bs-button-height-md:var(--bs-spacing-550)}.bs-session-timeout__account{display:flex;align-items:center;gap:var(--bs-spacing-200);padding:var(--bs-spacing-150) var(--bs-spacing-200);border:1px solid var(--bs-session-timeout-rule);border-radius:var(--bs-border-radius-100)}.bs-session-timeout__account-text{display:flex;flex-direction:column;gap:var(--bs-spacing-25);min-width:0;line-height:24px}.bs-session-timeout__account-name{font-weight:var(--bs-font-weight-semibold)}.bs-session-timeout__account-email{overflow-wrap:anywhere}.bs-session-timeout__actions--stacked{flex-direction:column;align-items:stretch;justify-content:flex-start}.bs-session-timeout__block-button,.bs-session-timeout__alternatives bs-button,.bs-session-timeout__actions--stacked bs-button{--bs-button-width:100%}.bs-session-timeout__text-button{--bs-button-subtle-color:var(--bs-text-action);--bs-button-height-lg:var(--bs-spacing-600)}.bs-session-timeout__password{display:block;--bs-input-label-font-size:var(--bs-font-size-md);--bs-input-label-font-weight:var(--bs-font-weight-semibold);--bs-input-label-line-height:calc(var(--bs-line-height-body-md) * 1px);margin-bottom:calc(var(--bs-spacing-200) - var(--bs-session-timeout-gap))}.bs-session-timeout__divider{display:flex;align-items:center;gap:var(--bs-spacing-100);align-self:center;width:320px;max-width:100%;color:var(--bs-session-timeout-color-secondary);font-size:var(--bs-font-size-xs);line-height:16px}.bs-session-timeout__rule{flex:1 1 0;height:1px;background:var(--bs-session-timeout-rule)}.bs-session-timeout__alternatives{display:grid;grid-template-columns:repeat(auto-fit, minmax(0, 1fr));gap:var(--bs-spacing-100)}.bs-session-timeout__sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}`;
 
@@ -160,7 +160,7 @@ const BsSessionTimeout = class {
         const description = this.description ?? d.description;
         const primary = this.primaryLabel ?? d.primary;
         const secondary = this.secondaryLabel ?? d.secondary;
-        return (index.h("bs-card", { key: '417d136aee9e7681c3f2688812551e7959afd08e', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, index.h("div", { key: '9ba89446e15520a424f57c45ef64b85096999ce7', class: "bs-session-timeout__body" }, !this.hideIcon && (index.h("bs-icon-tile", { key: '4dc5931a2592b6a8fb31a39ffd8798ec719e9507', part: "art", intent: d.intent, size: "lg" }, index.h("slot", { key: '23d73a04db2be77202d11b2fc0c8eefa35e020f8', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (index.h("p", { key: 'd3e939b8029a13b96f20b3b72065f6dc725f1644', part: "saved", class: "bs-session-timeout__saved" }, index.h(InfoIcon, { key: 'aa89f53279f9fa3db8de1374b6e9706996b0dcd6' }), index.h("span", { key: 'c2f192016e62865413684b5adf38ace82a3283ca' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (index.h("div", { key: '11fa6269c05185c4d5261416e8baa67d0474820a', part: "actions", class: "bs-session-timeout__actions" }, secondary && (index.h("bs-button", { key: '8e804826c0ebb62007a7b4235639a24d162552f8', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (index.h("bs-button", { key: '3eff5c096263d3a79e897196a04ab57584dcf78d', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (index.h("div", { key: 'b52dd407d444e940fb772b1d5db23e29d6783ce3', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (index.h("bs-button", { key: 'f226901ff4b92180cf6955dbfd3347311e5a3704', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (index.h("bs-button", { key: '8a048139dd6a4211c56764388ee17dc599048725', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), index.h("div", { key: 'a9dd14df0ba32c8bfaa042ad316a3a71faed7a43', class: "bs-session-timeout__sr-only", role: "status", "aria-live": "polite" }, this.announcement))));
+        return (index.h("bs-card", { key: '62d189825b91f610d76413f186aa5cd46f535553', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, index.h("div", { key: '658dcf88fb5e6b46184d2bd1d7211f2f3b70cedc', class: "bs-session-timeout__body" }, !this.hideIcon && (index.h("bs-icon-tile", { key: '5355eb08e32eeb42edcccd0e078bdae383aba564', part: "art", intent: d.intent, size: "lg" }, index.h("slot", { key: 'cf1169b6f28504292026bd99189fae658001c76b', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (index.h("p", { key: 'c5327542b3737b79fc986aed5103db57d699d92b', part: "saved", class: "bs-session-timeout__saved" }, index.h(InfoIcon, { key: 'faa674e2a70d71591efbe4fd7eb94b39851f315d' }), index.h("span", { key: '399c78c01aafe8d79ec69b28e5451e2a06fba836' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (index.h("div", { key: '42987f730c2767ef88b57ae3e28c08db804085de', part: "actions", class: "bs-session-timeout__actions" }, secondary && (index.h("bs-button", { key: 'f758266373ef8f94edd5d53de97397b6498af3ac', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (index.h("bs-button", { key: 'eaced5b60ea1a15398c3beea9d8d1522fc60792e', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (index.h("div", { key: '9e731177eb48665ef99c64a564be0ba8340b79f3', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (index.h("bs-button", { key: 'f7bfa81c52bc83c0d9e4009c4aecb2584632b95d', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (index.h("bs-button", { key: '6fe76eeaefdd48288e2c4821991f12ee12bbe358', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), index.h("div", { key: '77bd8a11863bccceaae1ab0103ef81771ca9f1f1', class: "bs-session-timeout__sr-only", role: "status", "aria-live": "polite" }, this.announcement))));
     }
     static get watchers() { return {
         "countdown": [{

package/dist/cjs/bs-shortcut-row.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
 const bsShortcutRowCss = () => `:host{display:block;width:100%;box-sizing:border-box;--bs-shortcut-row-height:36px;--bs-shortcut-row-padding-x:var(--bs-spacing-100);--bs-shortcut-row-gap:var(--bs-spacing-100);--bs-shortcut-row-radius:var(--bs-border-radius-75);--bs-shortcut-row-color:var(--bs-text-default);--bs-shortcut-row-color-disabled:var(--bs-text-on-disabled)}.bs-shortcut-row{box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-shortcut-row-gap);width:100%;height:var(--bs-shortcut-row-height);padding-inline:var(--bs-shortcut-row-padding-x);border-radius:var(--bs-shortcut-row-radius);color:var(--bs-shortcut-row-color);font-family:inherit;font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-regular);line-height:calc(var(--bs-line-height-body-sm) * 1px)}:host([disabled]) .bs-shortcut-row{color:var(--bs-shortcut-row-color-disabled)}.bs-shortcut-row__action{flex:1 1 0;min-width:0}.bs-shortcut-row__keys{display:flex;align-items:center;flex-shrink:0}`;
 
@@ -19,7 +19,7 @@ const BsShortcutRow = class {
     /** Set by the parent list (`"listitem"`). Standalone rows have no role. */
     selectionRole = null;
     render() {
-        return (index.h("div", { key: '019d1b17a212cfc3732533c31eb45d53adcecff3', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined }, index.h("span", { key: '21fe3aa23547e79bdb9a9bb436f593b059ffaefc', part: "action", class: "bs-shortcut-row__action" }, index.h("slot", { key: '98e36778be62584ef1bf5f021392f978cc52cf6d' }, this.action)), index.h("span", { key: '73470e43a024637de6dbb8fcd27917247233caea', part: "keys", class: "bs-shortcut-row__keys" }, index.h("slot", { key: 'c004ffae40b85181aaf35e1d5f5e3581eb386700', name: "keys" }, index.h("bs-key-caps", { key: 'd5bea5cfc5e156cd6789950e691896b6c50a62e0', keys: this.keys, label: this.label, disabled: this.disabled })))));
+        return (index.h("div", { key: 'e7f79909833204fb269402972500a9d97401665d', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined }, index.h("span", { key: '68dae2196bda22cd09bbc0b07958f8f2be66e332', part: "action", class: "bs-shortcut-row__action" }, index.h("slot", { key: '892a107840f1861f3c4ef5ae03e781839dead497' }, this.action)), index.h("span", { key: '06637079e74f4c944984133ab5cd897b40d64fd1', part: "keys", class: "bs-shortcut-row__keys" }, index.h("slot", { key: 'a21d5b51332d383a8d3670a0531e536f240c8e09', name: "keys" }, index.h("bs-key-caps", { key: '231389f5cf6d712a14b68a84bd9c02ce65be0ff7', keys: this.keys, label: this.label, disabled: this.disabled })))));
     }
 };
 BsShortcutRow.style = bsShortcutRowCss();

package/dist/cjs/bs-side-panel.cjs.entry.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
+var motion = require('./motion-DOlI71lc.js');
 
-const bsSidePanelCss = () => `:host{--bs-side-panel-bg:var(--bs-surface-raised);--bs-side-panel-width:calc(var(--bs-scale-1600) * 3);--bs-side-panel-padding:var(--bs-spacing-200);--bs-side-panel-shadow:var(--bs-shadow-md);--bs-side-panel-overlay-bg:var(--bs-surface-overlay);--bs-side-panel-color:var(--bs-text-default);--bs-side-panel-z-index:var(--bs-z-index-modal)}.bs-side-panel{position:fixed;inset:0;z-index:var(--bs-side-panel-z-index);pointer-events:none}.bs-side-panel__overlay{position:absolute;inset:0;background:var(--bs-side-panel-overlay-bg);pointer-events:auto}.bs-side-panel__panel{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;box-sizing:border-box;width:var(--bs-side-panel-width);max-width:100%;background:var(--bs-side-panel-bg);color:var(--bs-side-panel-color);box-shadow:var(--bs-side-panel-shadow);pointer-events:auto;outline:none}.bs-side-panel--start .bs-side-panel__panel{left:0}.bs-side-panel--end .bs-side-panel__panel{right:0}.bs-side-panel__header{display:flex;align-items:center;justify-content:space-between;gap:var(--bs-spacing-100);padding:var(--bs-side-panel-padding)}.bs-side-panel__heading{margin:0;font-size:var(--bs-font-size-lg);font-weight:var(--bs-font-weight-semibold)}.bs-side-panel__actions{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-side-panel__body{flex:1;overflow-y:auto;padding:0 var(--bs-side-panel-padding)}.bs-side-panel__footer{padding:var(--bs-side-panel-padding)}`;
+const bsSidePanelCss = () => `:host{--bs-side-panel-bg:var(--bs-surface-raised);--bs-side-panel-width:calc(var(--bs-scale-1600) * 3);--bs-side-panel-padding:var(--bs-spacing-200);--bs-side-panel-shadow:var(--bs-shadow-md);--bs-side-panel-overlay-bg:var(--bs-surface-overlay);--bs-side-panel-color:var(--bs-text-default);--bs-side-panel-z-index:var(--bs-z-index-modal);--bs-side-panel-duration:var(--bs-duration-slow);--bs-side-panel-easing:var(--bs-easing-standard)}.bs-side-panel{position:fixed;inset:0;z-index:var(--bs-side-panel-z-index);pointer-events:none}.bs-side-panel__overlay{position:absolute;inset:0;background:var(--bs-side-panel-overlay-bg);pointer-events:auto}.bs-side-panel__panel{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;box-sizing:border-box;width:var(--bs-side-panel-width);max-width:100%;background:var(--bs-side-panel-bg);color:var(--bs-side-panel-color);box-shadow:var(--bs-side-panel-shadow);pointer-events:auto;outline:none}.bs-side-panel--start .bs-side-panel__panel{left:0}.bs-side-panel--end .bs-side-panel__panel{right:0}.bs-side-panel__header{display:flex;align-items:center;justify-content:space-between;gap:var(--bs-spacing-100);padding:var(--bs-side-panel-padding)}.bs-side-panel__heading{margin:0;font-size:var(--bs-font-size-lg);font-weight:var(--bs-font-weight-semibold)}.bs-side-panel__actions{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-side-panel__body{flex:1;overflow-y:auto;padding:0 var(--bs-side-panel-padding)}.bs-side-panel__footer{padding:var(--bs-side-panel-padding)}.bs-side-panel--closing .bs-side-panel__overlay,.bs-side-panel--closing .bs-side-panel__panel{pointer-events:none}`;
 
 let panelId = 0;
 const BsSidePanel = class {
@@ -28,7 +29,24 @@ const BsSidePanel = class {
     panelEl;
     /** Elements we set `inert` on (so we only undo our own changes). */
     inertified = [];
+    /** True while the slide-out plays after `open` went false, so the panel stays mounted for it. */
+    closing = false;
+    overlayEl;
+    enterPending = false;
+    exitPending = false;
+    motionRun = 0;
+    wasRendered = false;
     onOpenChange(next) {
+        this.motionRun++;
+        motion.cancelMotion(this.overlayEl, this.panelEl);
+        if (next) {
+            this.closing = false;
+            this.enterPending = true;
+        }
+        else if (this.wasRendered && motion.readMotion(this.el, 'bs-side-panel').ms > 0) {
+            this.closing = true;
+            this.exitPending = true;
+        }
         if (next) {
             this.previouslyFocused = document.activeElement ?? null;
             this.applyInert();
@@ -122,7 +140,38 @@ const BsSidePanel = class {
             first.focus();
         }
     }
+    /** Where the panel sits when hidden: fully past its own edge. Physical, like the panel's own left/right. */
+    offscreen() {
+        return this.side === 'start' ? 'translateX(-100%)' : 'translateX(100%)';
+    }
+    playEnter() {
+        const { ms, easing } = motion.readMotion(this.el, 'bs-side-panel');
+        if (ms === 0)
+            return;
+        motion.play(this.overlayEl, [{ opacity: 0 }, { opacity: 1 }], ms, easing);
+        motion.play(this.panelEl, [{ transform: this.offscreen() }, { transform: 'none' }], ms, easing);
+    }
+    playExit() {
+        const { ms, easing } = motion.readMotion(this.el, 'bs-side-panel');
+        const run = ++this.motionRun;
+        Promise.all([
+            motion.play(this.overlayEl, [{ opacity: 1 }, { opacity: 0 }], ms, easing, 'forwards'),
+            motion.play(this.panelEl, [{ transform: 'none' }, { transform: this.offscreen() }], ms, easing, 'forwards'),
+        ]).then(() => {
+            if (run === this.motionRun)
+                this.closing = false;
+        });
+    }
     componentDidRender() {
+        this.wasRendered = this.open || this.closing;
+        if (this.open && this.enterPending) {
+            this.enterPending = false;
+            this.playEnter();
+        }
+        else if (!this.open && this.closing && this.exitPending) {
+            this.exitPending = false;
+            this.playExit();
+        }
         if (this.open && this.panelEl && !this.focusedIn) {
             this.focusedIn = true;
             this.panelEl.focus();
@@ -146,9 +195,9 @@ const BsSidePanel = class {
         }
     };
     render() {
-        if (!this.open)
+        if (!this.open && !this.closing)
             return null;
-        return (index.h("div", { class: `bs-side-panel bs-side-panel--${this.side}`, onKeyDown: this.onKeyDown }, this.overlay && index.h("div", { part: "overlay", class: "bs-side-panel__overlay", onClick: this.close }), index.h("div", { part: "panel", class: "bs-side-panel__panel", role: "dialog", "aria-modal": "true", "aria-labelledby": this.headingId, tabindex: "-1", ref: el => (this.panelEl = el) }, index.h("div", { part: "header", class: "bs-side-panel__header" }, index.h("h2", { part: "heading", id: this.headingId, class: "bs-side-panel__heading" }, this.heading), index.h("div", { class: "bs-side-panel__actions" }, index.h("slot", { name: "header-actions" }), index.h("bs-icon-button", { variant: "subtle", ariaLabel: this.closeLabel, onClick: this.close }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { d: "M6 6L18 18M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }))))), index.h("div", { part: "body", class: "bs-side-panel__body" }, index.h("slot", null)), index.h("div", { part: "footer", class: "bs-side-panel__footer" }, index.h("slot", { name: "footer" })))));
+        return (index.h("div", { class: `bs-side-panel bs-side-panel--${this.side} ${this.open ? '' : 'bs-side-panel--closing'}`, onKeyDown: this.onKeyDown }, this.overlay && index.h("div", { part: "overlay", class: "bs-side-panel__overlay", onClick: this.close, ref: el => (this.overlayEl = el) }), index.h("div", { part: "panel", class: "bs-side-panel__panel", role: "dialog", "aria-modal": "true", "aria-labelledby": this.headingId, tabindex: "-1", ref: el => (this.panelEl = el) }, index.h("div", { part: "header", class: "bs-side-panel__header" }, index.h("h2", { part: "heading", id: this.headingId, class: "bs-side-panel__heading" }, this.heading), index.h("div", { class: "bs-side-panel__actions" }, index.h("slot", { name: "header-actions" }), index.h("bs-icon-button", { variant: "subtle", ariaLabel: this.closeLabel, onClick: this.close }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { d: "M6 6L18 18M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }))))), index.h("div", { part: "body", class: "bs-side-panel__body" }, index.h("slot", null)), index.h("div", { part: "footer", class: "bs-side-panel__footer" }, index.h("slot", { name: "footer" })))));
     }
     static get watchers() { return {
         "open": [{