@brandsync/wc 1.18.0 → 1.20.0

package/dist/collection/components/bs-select/bs-select.js

@@ -0,0 +1,506 @@
+import { h } from "@stencil/core";
+let selectId = 0;
+/**
+ * A single-choice select: a field-shaped combobox that opens a scrollable listbox of options. Same
+ * label / helper text / error chrome as `bs-input`.
+ *
+ * Follows the WAI-ARIA select-only combobox pattern: focus stays on the combobox and the
+ * highlighted option is exposed through `aria-activedescendant`.
+ *
+ * Built from: the field/label/description/error styling language of `bs-input` (same `--bs-input-*`
+ * tokens). The listbox rows are hand-built leaf elements: `bs-menu-item` is a `role="menuitem"`
+ * button and `bs-popover` moves focus into its popup, neither of which fits the combobox/listbox
+ * pattern where focus must stay on the field.
+ *
+ * ## When to use
+ * - Choosing exactly one value from a known list of roughly 4-15 options.
+ *
+ * ## When not to use
+ * - 2-3 options that should all be visible (use radios or `bs-toggle-button-group`).
+ * - Very long or searchable lists (use `bs-input type="dropdown"` or a search pattern).
+ *
+ * @part label - The label element.
+ * @part field - The bordered combobox element.
+ * @part value - The selected label (or placeholder).
+ * @part icon - The chevron.
+ * @part listbox - The popup listbox.
+ * @part option - A single option row.
+ * @part description - Helper text (hidden when `error` is set).
+ * @part error - Error message.
+ */
+// Note: CSS Custom Properties (--bs-select-*) are documented via @prop comments in bs-select.css.
+export class BsSelect {
+    el;
+    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 (h("div", { key: 'b966bfa9b43400d8e96ea994e4899690f41a3b25', class: `bs-select ${this.error ? 'bs-select--error' : ''}` }, this.label && (h("span", { key: 'e5b3827d0e15beacd42b13c1e02bbb5b8eec724f', part: "label", id: labelId, class: "bs-select__label", onClick: () => !this.disabled && this.fieldEl?.focus() }, this.label, this.required && (h("span", { key: '69edf6965f73dd1380bebf7ce6a19d2d3456c495', class: "bs-select__required", "aria-hidden": "true" }, "*")))), h("div", { key: '3f66523ef85b2274c60775bd3700649551fb1777', class: "bs-select__wrapper" }, 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 }, h("span", { key: '800c4eff295238e60c2cb976e2118d968cd30851', part: "value", class: `bs-select__value ${selected ? '' : 'bs-select__value--placeholder'}` }, selected ? selected.label : this.placeholder), h("svg", { key: 'cfa09749f81c702957b7bc45f1f418f0d90c4eb8', part: "icon", class: "bs-select__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'b166df87f7112440d1adea4c07ef7a3ec08ea59d', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), 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) => (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) }, h("span", { class: "bs-select__option-label" }, o.label), o.value === this.value && (h("svg", { class: "bs-select__check", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, 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 ? (h("span", { id: msgId, part: "error", class: "bs-select__error" }, this.error)) : this.description ? (h("span", { id: msgId, part: "description", class: "bs-select__description" }, this.description)) : null));
+    }
+    static get is() { return "bs-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name the value is submitted under in a surrounding `<form>`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected option's `value`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSelectOption[]",
+                    "resolved": "BsSelectOption[]",
+                    "references": {
+                        "BsSelectOption": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-select/bs-select.tsx",
+                            "id": "src/components/bs-select/bs-select.tsx::BsSelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The options. Must be set as a JS property, not an attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name when there is no visible `label`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown while no option is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text below the field (replaced by `error` when set)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message; puts the field in its error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the field required (native form validation + asterisk)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the listbox is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user picks an option, with the new value."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncForm"
+            }, {
+                "propName": "required",
+                "methodName": "syncForm"
+            }, {
+                "propName": "options",
+                "methodName": "syncForm"
+            }, {
+                "propName": "open",
+                "methodName": "onOpen"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/bs-select/bs-select.stories.js

@@ -0,0 +1,58 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const fruit = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Banana', value: 'banana' },
+    { label: 'Blueberry (sold out)', value: 'blueberry', disabled: true },
+    { label: 'Cherry', value: 'cherry' },
+    { label: 'Grape', value: 'grape' },
+];
+const meta = {
+    title: 'Components/bs-select',
+    parameters: { docs: { description: { component: componentDescription('bs-select') } } },
+    render: args => html `
+    <div style="width: 280px; min-height: 260px;">
+      <bs-select
+        .options=${fruit}
+        label=${args.label}
+        placeholder=${args.placeholder}
+        description=${args.description}
+        error=${args.error}
+        value=${args.value}
+        ?disabled=${args.disabled}
+        ?required=${args.required}
+      ></bs-select>
+    </div>
+  `,
+    argTypes: {
+        label: { control: 'text', description: propDescription('bs-select', 'label') },
+        placeholder: { control: 'text', description: propDescription('bs-select', 'placeholder') },
+        description: { control: 'text', description: propDescription('bs-select', 'description') },
+        error: { control: 'text', description: propDescription('bs-select', 'error') },
+        disabled: { control: 'boolean', description: propDescription('bs-select', 'disabled') },
+        required: { control: 'boolean', description: propDescription('bs-select', 'required') },
+        value: { control: 'select', options: ['', ...fruit.map(f => f.value)], description: propDescription('bs-select', 'value') },
+    },
+    args: { label: 'Fruit', placeholder: 'Select a fruit', description: '', error: '', disabled: false, required: false, value: '' },
+};
+export default meta;
+export const Default = {};
+export const WithHelperText = {
+    name: 'With helper text',
+    args: { description: 'Pick the fruit you want in the box.' },
+};
+export const Selected = { args: { value: 'banana' } };
+export const Error = { args: { error: 'Please choose a fruit.', required: true } };
+export const Disabled = { args: { disabled: true, value: 'apple' } };
+export const LongList = {
+    name: 'Long list (scrolls)',
+    render: () => html `
+    <div style="width: 280px; min-height: 320px;">
+      <bs-select
+        label="Country"
+        .options=${Array.from({ length: 40 }, (_, i) => ({ label: `Country ${i + 1}`, value: String(i) }))}
+        open
+      ></bs-select>
+    </div>
+  `,
+};

package/dist/collection/components/bs-session-timeout/bs-session-timeout.js

@@ -196,7 +196,7 @@ export class BsSessionTimeout {
         const description = this.description ?? d.description;
         const primary = this.primaryLabel ?? d.primary;
         const secondary = this.secondaryLabel ?? d.secondary;
-        return (h("bs-card", { key: '417d136aee9e7681c3f2688812551e7959afd08e', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { key: '9ba89446e15520a424f57c45ef64b85096999ce7', class: "bs-session-timeout__body" }, !this.hideIcon && (h("bs-icon-tile", { key: '4dc5931a2592b6a8fb31a39ffd8798ec719e9507', part: "art", intent: d.intent, size: "lg" }, h("slot", { key: '23d73a04db2be77202d11b2fc0c8eefa35e020f8', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (h("p", { key: 'd3e939b8029a13b96f20b3b72065f6dc725f1644', part: "saved", class: "bs-session-timeout__saved" }, h(InfoIcon, { key: 'aa89f53279f9fa3db8de1374b6e9706996b0dcd6' }), h("span", { key: 'c2f192016e62865413684b5adf38ace82a3283ca' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (h("div", { key: '11fa6269c05185c4d5261416e8baa67d0474820a', part: "actions", class: "bs-session-timeout__actions" }, secondary && (h("bs-button", { key: '8e804826c0ebb62007a7b4235639a24d162552f8', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { key: '3eff5c096263d3a79e897196a04ab57584dcf78d', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (h("div", { key: 'b52dd407d444e940fb772b1d5db23e29d6783ce3', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (h("bs-button", { key: 'f226901ff4b92180cf6955dbfd3347311e5a3704', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '8a048139dd6a4211c56764388ee17dc599048725', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), h("div", { key: 'a9dd14df0ba32c8bfaa042ad316a3a71faed7a43', class: "bs-session-timeout__sr-only", role: "status", "aria-live": "polite" }, this.announcement))));
+        return (h("bs-card", { key: '62d189825b91f610d76413f186aa5cd46f535553', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { key: '658dcf88fb5e6b46184d2bd1d7211f2f3b70cedc', class: "bs-session-timeout__body" }, !this.hideIcon && (h("bs-icon-tile", { key: '5355eb08e32eeb42edcccd0e078bdae383aba564', part: "art", intent: d.intent, size: "lg" }, h("slot", { key: 'cf1169b6f28504292026bd99189fae658001c76b', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (h("p", { key: 'c5327542b3737b79fc986aed5103db57d699d92b', part: "saved", class: "bs-session-timeout__saved" }, h(InfoIcon, { key: 'faa674e2a70d71591efbe4fd7eb94b39851f315d' }), h("span", { key: '399c78c01aafe8d79ec69b28e5451e2a06fba836' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (h("div", { key: '42987f730c2767ef88b57ae3e28c08db804085de', part: "actions", class: "bs-session-timeout__actions" }, secondary && (h("bs-button", { key: 'f758266373ef8f94edd5d53de97397b6498af3ac', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { key: 'eaced5b60ea1a15398c3beea9d8d1522fc60792e', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (h("div", { key: '9e731177eb48665ef99c64a564be0ba8340b79f3', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (h("bs-button", { key: 'f7bfa81c52bc83c0d9e4009c4aecb2584632b95d', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '6fe76eeaefdd48288e2c4821991f12ee12bbe358', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), h("div", { key: '77bd8a11863bccceaae1ab0103ef81771ca9f1f1', class: "bs-session-timeout__sr-only", role: "status", "aria-live": "polite" }, this.announcement))));
     }
     static get is() { return "bs-session-timeout"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-shortcut-row/bs-shortcut-row.js

@@ -36,7 +36,7 @@ export class BsShortcutRow {
     /** Set by the parent list (`"listitem"`). Standalone rows have no role. */
     selectionRole = null;
     render() {
-        return (h("div", { key: '019d1b17a212cfc3732533c31eb45d53adcecff3', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined }, h("span", { key: '21fe3aa23547e79bdb9a9bb436f593b059ffaefc', part: "action", class: "bs-shortcut-row__action" }, h("slot", { key: '98e36778be62584ef1bf5f021392f978cc52cf6d' }, this.action)), h("span", { key: '73470e43a024637de6dbb8fcd27917247233caea', part: "keys", class: "bs-shortcut-row__keys" }, h("slot", { key: 'c004ffae40b85181aaf35e1d5f5e3581eb386700', name: "keys" }, h("bs-key-caps", { key: 'd5bea5cfc5e156cd6789950e691896b6c50a62e0', keys: this.keys, label: this.label, disabled: this.disabled })))));
+        return (h("div", { key: 'e7f79909833204fb269402972500a9d97401665d', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined }, h("span", { key: '68dae2196bda22cd09bbc0b07958f8f2be66e332', part: "action", class: "bs-shortcut-row__action" }, h("slot", { key: '892a107840f1861f3c4ef5ae03e781839dead497' }, this.action)), h("span", { key: '06637079e74f4c944984133ab5cd897b40d64fd1', part: "keys", class: "bs-shortcut-row__keys" }, h("slot", { key: 'a21d5b51332d383a8d3670a0531e536f240c8e09', name: "keys" }, h("bs-key-caps", { key: '231389f5cf6d712a14b68a84bd9c02ce65be0ff7', keys: this.keys, label: this.label, disabled: this.disabled })))));
     }
     static get is() { return "bs-shortcut-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-side-panel/bs-side-panel.cmp.test.js

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 describe('bs-side-panel', () => {
     it('renders nothing when closed', async () => {
         const { root } = await render(h("bs-side-panel", { heading: "History" }, "Body"));
@@ -114,4 +115,22 @@ describe('bs-side-panel', () => {
         expect(plain.inert).toBe(false);
         plain.remove();
     });
+    describe('open/close motion', () => {
+        it('stays mounted while it slides out, then unmounts', async () => {
+            const { root, waitForChanges } = await render(h("bs-side-panel", { open: true, heading: "History", style: { '--bs-side-panel-duration': '150ms' } }, "Body"));
+            root.open = false;
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="dialog"]')).not.toBeNull();
+            expect(root.shadowRoot.querySelector('.bs-side-panel')).toHaveClass('bs-side-panel--closing');
+            await wait(400);
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="dialog"]')).toBeNull();
+        });
+        it('unmounts immediately when the duration is 0ms', async () => {
+            const { root, waitForChanges } = await render(h("bs-side-panel", { open: true, heading: "History", style: { '--bs-side-panel-duration': '0ms' } }, "Body"));
+            root.open = false;
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="dialog"]')).toBeNull();
+        });
+    });
 });

package/dist/collection/components/bs-side-panel/bs-side-panel.css

@@ -6,6 +6,8 @@
   --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 {
@@ -75,3 +77,9 @@
 .bs-side-panel__footer {
   padding: var(--bs-side-panel-padding);
 }
+
+/* On its way out: neither the panel nor the backdrop may take clicks. */
+.bs-side-panel--closing .bs-side-panel__overlay,
+.bs-side-panel--closing .bs-side-panel__panel {
+  pointer-events: none;
+}