@brandsync/wc 1.6.0 → 1.8.0

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

@@ -20,6 +20,12 @@ import { h } from "@stencil/core";
 // bs-switch.css, not here.
 export class BsSwitch {
     el;
+    internals;
+    initialChecked = false;
+    /** The `name` the value is submitted under in a surrounding `<form>`'s `FormData`. */
+    name;
+    /** The value submitted when on (native checkbox default: `"on"`). */
+    value = 'on';
     /** Sizing scale. Controls the track's width/height and the knob's diameter. */
     size = 'lg';
     /** Whether the switch is on. Mutable so clicking the label/input toggles it directly, and
@@ -41,6 +47,17 @@ export class BsSwitch {
     ariaLabel = null;
     /** Emitted when the checked state changes via user interaction, with the new `checked` value. */
     bsChange;
+    syncFormValue() {
+        this.internals?.setFormValue?.(this.checked ? this.value : null);
+    }
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback() {
+        this.checked = this.initialChecked;
+    }
+    componentWillLoad() {
+        this.initialChecked = this.checked;
+        this.syncFormValue();
+    }
     onChange = (ev) => {
         const checked = ev.target.checked;
         this.checked = checked;
@@ -58,11 +75,12 @@ export class BsSwitch {
         const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: 'd14520f82e184fed9405b5e03ff448650b3d90c8', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '955e57c616ab4a9af52ef344cbc881965ae416fd', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '4b936b1a6d57e2e571f257ee87d82a786137e568', part: "track", class: trackClasses }, h("span", { key: '0a9ae24240823947be1f179d1218f4382507143c', part: "knob", class: knobClasses })), h("span", { key: '8750083e783f61164c383cf54bdf4b7a3d881e9c', part: "label", class: "bs-switch__label" }, h("slot", { key: '320cad772ce9efe18c3c30cabcb258326036e32b' }))));
+        return (h("label", { key: '37466aa7ca1b18c07b92bd7855fd974d62ad5845', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: 'f4e0073dd9a322692003593385da04a9289ea848', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'f8cbdb6bb25964ba79e9cb09d82beab0c3946a14', part: "track", class: trackClasses }, h("span", { key: '7e8598698e08a95d1ada9829264df99abd507d81', part: "knob", class: knobClasses })), h("span", { key: '11d464eaf95f555f3874524adc5fb2373b1fd056', part: "label", class: "bs-switch__label" }, h("slot", { key: '2409cb732d23f613c2595fa62e9fd7539bb2041e' }))));
     }
     static get is() { return "bs-switch"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["bs-switch.css"]
@@ -75,6 +93,45 @@ export class BsSwitch {
     }
     static get properties() {
         return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `name` the value is submitted under in a surrounding `<form>`'s `FormData`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value submitted when on (native checkbox default: `\"on\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -137,7 +194,7 @@ export class BsSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -182,4 +239,14 @@ export class BsSwitch {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "syncFormValue"
+            }, {
+                "propName": "value",
+                "methodName": "syncFormValue"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.css

@@ -78,8 +78,8 @@
 .bs-inline-tab--has-icon {
   padding-top: var(--bs-inline-tab-padding-y);
   padding-bottom: var(--bs-inline-tab-padding-y);
-  padding-left: var(--bs-inline-tab-padding-left-with-icon);
-  padding-right: var(--bs-inline-tab-padding-right-with-icon);
+  padding-inline-start: var(--bs-inline-tab-padding-left-with-icon);
+  padding-inline-end: var(--bs-inline-tab-padding-right-with-icon);
   gap: var(--bs-inline-tab-gap);
 }
 

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js

@@ -48,6 +48,10 @@ export class BsInlineTab {
      * violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
      * automatically, same as `bs-tab`'s identical prop. */
     ariaLabel = null;
+    /** Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the
+     * Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays
+     * a normal tab stop. */
+    tabbable;
     /** Tracks whether the `icon` slot has assigned content. */
     hasIcon = false;
     /** Tracks whether the default (label) slot has assigned content. */
@@ -86,7 +90,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: 'fd90e4759427dccc1457496dc1f8d155643597db', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'c89be07dc694dd6e12401d9d047cc156f80129a9', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '4a2e0f0d3a732b8e78778d50c3a4d800f55e8ed9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '4d7ea29c763bdfb3dc3ffda9f4227f558fab392a', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'c8670f670fc4138c062a433c6037bd7bc7b0e0bc', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: '72a2298b0dff31e192dc679ee153d1d87e6a8723', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: '25679b5cfc3bfec29f91b12f6180048429706b86', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'f5c996ae38a4e5ace60c8b1145dfb64114097600', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '101ac663fa1b05e3f4f2faaaff865e02ecbd4e90', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'a705183b26ad7d7ad3e286939b256cfbafb78580', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -161,6 +165,25 @@ export class BsInlineTab {
                 "reflect": false,
                 "attribute": "aria-label",
                 "defaultValue": "null"
+            },
+            "tabbable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the\nTab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays\na normal tab stop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tabbable"
             }
         };
     }

package/dist/collection/components/bs-tab/bs-tab/bs-tab.css

@@ -207,8 +207,8 @@
    enabled/selected/hover state above sets its background. */
 .bs-tab__indicator {
   position: absolute;
-  left: var(--bs-tab-padding-x);
-  right: var(--bs-tab-padding-x);
+  inset-inline-start: var(--bs-tab-padding-x);
+  inset-inline-end: var(--bs-tab-padding-x);
   bottom: 0;
   height: 2px;
   background: transparent;

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

@@ -53,6 +53,10 @@ export class BsTab {
      * violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
      * automatically, same as `bs-button`'s identical prop. */
     ariaLabel = null;
+    /** Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the
+     * Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays
+     * a normal tab stop. */
+    tabbable;
     /** Tracks whether the `icon` slot has assigned content. */
     hasIcon = false;
     /** Tracks whether the default (label) slot has assigned content. */
@@ -99,7 +103,7 @@ export class BsTab {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: '44461677d403c17f9620ed3b873c03423278a8fe', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '4090ea19a107552b3d2b4ab218b182df3c21c3fd', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '0f350012f0c19cb4f7729ca477b6e5f8d2b6e535', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '3abe39744a5b972921a3c45005d44b69b3087302', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'afe75dc14e75691b6255f99e04ba9bd183b29482', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'c39a77802a099ba26327dcd4115c2cbcf10fdd3a', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'b3807d61b9dec5e46ed591642b42ab0039971103', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '07901fbc8d0e7c1c554e5a4814dfc794cdb7f7c4', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: '368a2f20536d169e06e47500dcca4d6a54f17dde', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: '3b22e92a5d6bca27c0b12b6f80ef29af06bcc564', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'd75cb8cc85547a8c6a8be3bca3fc82a61d3cfa38', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '43ff4feb2425f1b0dd9485f323b1886b42e10a32', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '74a0af9a35043faa3baa2415c3b4a204f5745155', onSlotchange: this.onLabelSlotchange })), h("span", { key: '22b5c4671b7a7c93abffae5a34a4e3bb600d8ed3', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '17b123826ca4b78ff00b89d3a0944e1d805ad4fe', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: 'd51f23caa9d0fd0abddd37c7394994e1ffef0586', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -200,6 +204,25 @@ export class BsTab {
                 "reflect": false,
                 "attribute": "aria-label",
                 "defaultValue": "null"
+            },
+            "tabbable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the\nTab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays\na normal tab stop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tabbable"
             }
         };
     }

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.js

@@ -47,10 +47,54 @@ export class BsTabs {
         tabs.forEach(tab => {
             tab.selected = tab === ev.target;
         });
+        this.syncRovingTabindex();
+    }
+    componentDidLoad() {
+        this.syncRovingTabindex();
+    }
+    syncRovingTabindex() {
+        const tabs = this.tabs();
+        const anySelected = tabs.some(t => t.selected);
+        const firstEnabled = tabs.find(t => !t.disabled);
+        tabs.forEach(t => {
+            t.tabbable = anySelected ? t.selected : t === firstEnabled;
+        });
+    }
+    tabs() {
+        return Array.from(this.el.querySelectorAll(':scope > bs-tab, :scope > bs-inline-tab'));
+    }
+    /** WAI-ARIA tabs pattern (automatic activation): arrows move focus *and* selection to the
+     * previous/next enabled tab (wrapping), Home/End jump to the first/last. Arrow axis follows
+     * `orientation`; in RTL the horizontal arrows are mirrored. */
+    onKeyDown(ev) {
+        const vertical = this.orientation === 'vertical';
+        const rtl = getComputedStyle(this.el).direction === 'rtl';
+        const prevKey = vertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
+        const nextKey = vertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
+        if (![prevKey, nextKey, 'Home', 'End'].includes(ev.key))
+            return;
+        const enabled = this.tabs().filter(t => !t.disabled);
+        const current = enabled.findIndex(t => t === ev.target || t.contains(ev.target));
+        if (current === -1 || enabled.length === 0)
+            return;
+        ev.preventDefault();
+        let nextIdx = current;
+        if (ev.key === nextKey)
+            nextIdx = (current + 1) % enabled.length;
+        else if (ev.key === prevKey)
+            nextIdx = (current - 1 + enabled.length) % enabled.length;
+        else if (ev.key === 'Home')
+            nextIdx = 0;
+        else
+            nextIdx = enabled.length - 1;
+        const target = enabled[nextIdx];
+        const button = target.shadowRoot?.querySelector('button');
+        button?.focus();
+        button?.click();
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: '46c293778047abc247a655f8c69752997d041864', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'e956063f2db1078f51eb2b73c8a68a00ae7af5f5' })));
+        return (h("div", { key: '81b3b46d54d4acc074b0c59d0da5e3e971e7b62e', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'ba296a99062629de3e331cd7de1ebc41548c77f9', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -121,6 +165,12 @@ export class BsTabs {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "orientation",
+                "methodName": "syncRovingTabindex"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "bsSelect",
@@ -128,6 +178,12 @@ export class BsTabs {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }

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

@@ -25,7 +25,7 @@ export class BsToast {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '6c10abc0222e203614ad99d98616dc8b935e03c1', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '645bfc43dde223d90bfca859a96f10c2749581f4', class: "bs-toast__content" }, h("span", { key: 'ea8811097930e6c71fbe809ccbf9476b8cb0a3c4', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: 'c461de63f4b2e3944c00fab296bcdd1b2a6cb3cb', state: this.state })), h("span", { key: 'f88feb3cd5167b7296017ce45a6990fe021ee917', part: "message", class: "bs-toast__message" }, h("slot", { key: '218b8cb0defc7e86245937074bab4e6cf8b09cc3' }))), h("div", { key: 'eb9ba6a28d3cb4667ae9c5875b65f93ffddbdb58', class: "bs-toast__actions" }, h("button", { key: '7f4ed2510675ab40fbfe84e196496701ce6e5693', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '22241204ebdcc27a537e92deb38fb7aee8db8800' })))));
+        return (h("div", { key: '238f177a44aa2bd735432fe8f3fd1d761065d023', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '717e222c7b271db0ff5aa57db8ce0efa15bfaf50', class: "bs-toast__content" }, h("span", { key: '316106f6efbcc8abe6bb155e77ec21343b93287c', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '5973febbe8d7be889fd14cac847c417a22acb111', state: this.state })), h("span", { key: '1d16db1ba5c010ac5af237b4b399e0dda6f6df59', part: "message", class: "bs-toast__message" }, h("slot", { key: '40e97271fec790a850491be58ae87e54b4765a6a' }))), h("div", { key: '16744b9b6ad79d13aec16afa6593ab0de1ec5ee2', class: "bs-toast__actions" }, h("button", { key: '87adace9953b2dca831543132f3fe5590bc4c52f', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'dcf5ffe7a5553ec2792d801c7f62ed367d1454ef' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: '24502b9b6826956764a5c291eb14f82662c2d3d5', class: "bs-tooltip" }, h("span", { key: 'f8d8bcc3fa8e5e4cc7ea69ff58eb9c05c797c8eb', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '458407140a9303d7d857fb82ea532e3138669ca8', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '123d7b06fa1a8be09da871fcca9f7d021ddc66f2' }))));
+        return (h("div", { key: 'b7c2ee57db3a4e36cdd106d78f0f8d54c45a04c6', class: "bs-tooltip" }, h("span", { key: '22b738a760e9967233052ce4540c77da4ac9563e', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '69a8b07711478e699be4c8151d9f7dfd2e4e0bf4', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: 'b32c75a06582b8e8f99b973889450e9100b75323' }))));
     }
     static get is() { return "bs-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/forms.stories.js

@@ -0,0 +1,63 @@
+import { html } from "lit";
+// Live examples for the Forms guide (forms.mdx). Not a component -- it shows how the
+// form-associated controls behave inside a plain native <form>.
+// Prints exactly what the browser would send, so the story shows the real FormData rather than a
+// mocked-up result.
+const showFormData = (ev) => {
+    ev.preventDefault();
+    const form = ev.currentTarget;
+    const out = form.parentElement?.querySelector('pre');
+    if (!out)
+        return;
+    const lines = [];
+    new FormData(form).forEach((value, key) => lines.push(`${key} = ${JSON.stringify(value)}`));
+    out.textContent = lines.length ? lines.join('\n') : '(no entries)';
+};
+const meta = {
+    title: 'Guides/Forms',
+    parameters: { layout: 'padded' },
+};
+export default meta;
+const output = html `<pre style="margin: 16px 0 0; padding: 12px; background: #f4f4f4; color: #111; border-radius: 4px; min-height: 3em;">
+Submit to see the FormData…</pre
+>`;
+export const Default = {
+    render: () => html `
+    <div style="max-width: 420px;">
+      <form @submit=${showFormData} style="display: flex; flex-direction: column; gap: 16px;">
+        <bs-input name="email" type="email" label="Email" required></bs-input>
+        <bs-input name="notes" type="textarea" label="Notes"></bs-input>
+        <div role="radiogroup" aria-label="Plan" style="display: flex; flex-direction: column; gap: 8px;">
+          <bs-radio name="plan" value="free" checked>Free</bs-radio>
+          <bs-radio name="plan" value="pro">Pro</bs-radio>
+        </div>
+        <bs-checkbox name="terms" value="accepted" required>I accept the terms</bs-checkbox>
+        <bs-switch name="alerts" checked>Email alerts</bs-switch>
+        <bs-slider name="volume" label="Volume" value="40" aria-label="Volume"></bs-slider>
+        <div style="display: flex; gap: 8px;">
+          <bs-button type="submit">Submit</bs-button>
+          <bs-button type="reset" variant="outlined">Reset</bs-button>
+        </div>
+      </form>
+      ${output}
+    </div>
+  `,
+};
+// Required fields: submitting with an empty required bs-input or an unchecked required bs-checkbox is
+// blocked by the browser (requestSubmit runs validation), and the form reports invalid.
+export const Validation = {
+    render: () => html `
+    <div style="max-width: 420px;">
+      <form
+        @submit=${showFormData}
+        @invalid=${(ev) => ev.preventDefault()}
+        style="display: flex; flex-direction: column; gap: 16px;"
+      >
+        <bs-input name="name" label="Name" required></bs-input>
+        <bs-checkbox name="terms" required>I accept the terms</bs-checkbox>
+        <bs-button type="submit">Submit (blocked until valid)</bs-button>
+      </form>
+      ${output}
+    </div>
+  `,
+};

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.js

@@ -117,7 +117,7 @@ export class BsNavigationDrawer {
         this.bsSearchClick.emit();
     };
     render() {
-        return (h("nav", { key: 'c83954ea480337504cf645444c95ddcfe61946d2', class: "bs-navigation-drawer", "aria-label": this.heading }, this.showLogo && (h("div", { key: '85c798aa7271162f902437ed87479d48f81b446a', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '75e784e5898719b6e39a5d8cabb61e7cbddf8208', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '036972797f4fe635da03d4174a99756f1764f986', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '64163e12bb7adf39665e7fdc46014ddd10c83745', variant: "mark", background: this.logoBackground }))), h("div", { key: '21424e734140dcb7cb0dc9ea009dcae4d3908720', class: "bs-navigation-drawer__title-row" }, h("span", { key: 'f4fc69204720e2bd748081c7c7fd7c1f5d7a8aa6', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '5813a13995c020a20b4a63b4669fce63b9e8d76b', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: 'b9d22c0c33dfcab172bd1abe1c37efa9ffc73325' })))), h("div", { key: 'd93ae5bd0ac78f6e1f1e3de6172f5e30da0ea2b7', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '3bafa80f2e068c296f98ffdc306a088fa277a054', name: "search" })), h("button", { key: 'de9e7abe49f48aaf5a3e547589a8f0619b29cad5', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: 'e1eb6daea0a7309b2c98215614bb7dc525f2a68b' })), h("div", { key: '5781c0e192332e223a539c300fdb7f004782f27a', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: 'be8c25989b8ba3ea7529012f56ffd4976173e6dd' }))));
+        return (h("nav", { key: '8be5fb4e45d6919408ff7057b963c2d95281b470', class: "bs-navigation-drawer", "aria-label": this.heading }, this.showLogo && (h("div", { key: 'f66ec1272c4c226d1a67fb7321b1247c3be54fb1', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '88cddd1d8696f895b33dd141bc2f5bfd3bd260b4', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '89b4efebeac6b934cbdd6cf3d25caaf5a36c86e8', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '4f9ef53f8a02d9bb21b134e6a73caf28d9e864fc', variant: "mark", background: this.logoBackground }))), h("div", { key: '841040ad4770b0590ce632db1ce7122766c27ef6', class: "bs-navigation-drawer__title-row" }, h("span", { key: '857e9420aae428b44c2086bec5a2b4205a3dda04', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: 'c109b6f3b54268cf729e114a249864fbd57203cc', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: 'e46c9d2569b59e76398772d7a48e7a02d6b36ba3' })))), h("div", { key: '88031f0fd6cffb8480f2a086efb93a9d6418b4fc', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: 'c86cb8c32f754fe81d91b76d8e1a352f9de5b31b', name: "search" })), h("button", { key: '90ade94c988aac8a1b2c855da7b193167b4eeee6', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: 'ff02c6f7f07de15b98bc5799914756e2245e36b9' })), h("div", { key: '41203613ef27dba8768c2755b8653d17c65d02c6', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: 'd120d4a7477e748f5be81a5af742bfa558bf00bd' }))));
     }
     static get is() { return "bs-navigation-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.js

@@ -131,7 +131,7 @@ export class BsNavigationDrawerItem {
         // incorrectly also toggle this parent row on every child click. Both are wrapped in a
         // `display: contents` container so render() still returns a single root node (this codebase's
         // convention, e.g. bs-input.tsx) without that wrapper affecting layout at all.
-        return (h("div", { key: '63556b4635d1c66bc1698868e5941561db1ca84f', class: "bs-navigation-drawer-item__root" }, h("button", { key: 'b96648001c7af054955c7a18c47f0d6d5e157888', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (h("span", { key: '6304dcc2d21a463479865ce7de84007cb3b0aee1', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: '2797dc8bcb4933b1ce2b32670f7b648739fc5242', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: '01f493c86d00a4bef716d41a18f842eff7a68362', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: 'a47dee4db7a1b516bae6db422bb61bcea5e1594e' })), this.expandable && (h("span", { key: 'be177fb373023438a3bb3c2189c244b49b91ceb9', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '7537f4757219d98708e87fc1d3db0dacade0f861' })))), this.expandable && (h("span", { key: '72aef8d1730d727d5cf211a7a47073a4cf64bde8', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '2de65d49b494ba8e0d1d35470bc0ff5c8e8f25ee', name: "children" })))));
+        return (h("div", { key: 'ff4a72a5d5c8b37fa92ff244398153ca81b7f864', class: "bs-navigation-drawer-item__root" }, h("button", { key: 'f8c1d1e9c72aba5b6012f4f9d7fdc5956b919dff', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (h("span", { key: 'cf46152a1d7e0f4783a3ee29fd9eb7ae2a566c68', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: '32a1ea999456bf584bebf03e73aab3e7c01281cc', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: '496a7d21f7a3878bd58fd4bdbb978b3bde40f588', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '3b1d65cd36d19c3714174a3a05a1b68ec3910042' })), this.expandable && (h("span", { key: '041b8fc587482288c4adf7b023edc7b7057a2fda', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '0957e9218a1360b35726ee346e1e3718eb1b3eff' })))), this.expandable && (h("span", { key: 'df4d3384410c6eaffd7e42aa17380740710db0ad', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '273844338141f5429aa7b53f55a06fca4293fa2a', name: "children" })))));
     }
     static get is() { return "bs-navigation-drawer-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.js

@@ -61,7 +61,7 @@ export class BsNavigationHeader {
     render() {
         const showLogo = this.alignment !== 'with-navigation-drawer';
         const rootClasses = `bs-navigation-header bs-navigation-header--${this.alignment}`;
-        return (h("header", { key: '47c0da7831345484bcbab2e07299de27fefa50be', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (h("a", { key: '9139e689848434a39fa5ff5950e3f1ff3612a03d', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (h("bs-logo", { key: 'd19e1a132b90e93f63fabf5c815550062ad3fd4a', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), h("div", { key: 'ce82683ee631dde1ccf5ca5bbd2c1f1a8591117a', part: "left", class: "bs-navigation-header__left" }, h("slot", { key: 'c52c854c21de184dddbb5826e5b195d3a154cddd', name: "left" })), h("div", { key: '60a3a79131b1e84ff90bc83cb95ec6313c9d6753', part: "right", class: "bs-navigation-header__right" }, h("slot", { key: '04900b4d9cb7b3a969b0466854c414251c8fecac', name: "right" }))));
+        return (h("header", { key: '0dc99abb8f2db96f0befe1b838a2db037636a75c', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (h("a", { key: '1f906366d5398aa62d2485afdb1c9cf350354f05', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (h("bs-logo", { key: 'c735b4647acc92ff5b6725dc72bfbab421230a9c', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), h("div", { key: '845c1d60319daf2aa7aa57f0f8ba71e0f633598e', part: "left", class: "bs-navigation-header__left" }, h("slot", { key: '67436745b63a843e86a79163f927f2b563b6e2e4', name: "left" })), h("div", { key: '4c6d514d7cf238b5be8476f9fede7292b1dc1c10', part: "right", class: "bs-navigation-header__right" }, h("slot", { key: 'a6c12231c6cc728314fdfc076a48fd1ce0f79ede', name: "right" }))));
     }
     static get is() { return "bs-navigation-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/test/helpers/conventions.js

@@ -0,0 +1,46 @@
+import axe from "axe-core";
+import { expect } from "vitest";
+// Operationalizes CONVENTIONS.md's three customization channels so every component test can
+// assert the contract directly, instead of relying on each author remembering the naming rules.
+const STATE_WORDS = ['hover', 'active', 'focus', 'disabled', 'selected', 'expanded', 'checked', 'pressed'];
+/**
+ * CSS Custom Properties: `--bs-<component>-<property>[-<state>]`, always aliased to a
+ * brandsync-tokens value (never a hardcoded literal) -- CONVENTIONS.md lines 8-10, 25.
+ * We can't inspect the token source from computed style alone, so this checks the property
+ * actually resolves to a non-empty value (i.e. the component really defines it, rather than the
+ * consumer having to guess it exists) and that the name itself follows the naming convention.
+ */
+export function assertCssCustomProperties(el, expectedProps) {
+    const style = getComputedStyle(el);
+    for (const prop of expectedProps) {
+        expect(prop, `CSS custom property "${prop}" must start with --bs-`).toMatch(/^--bs-[a-z0-9-]+$/);
+        const value = style.getPropertyValue(prop).trim();
+        expect(value, `CSS custom property "${prop}" must resolve to a non-empty value on ${el.tagName}`).not.toBe('');
+    }
+}
+/**
+ * Shadow Parts: singular, lowercase, structural noun -- no state-based names (CONVENTIONS.md
+ * lines 28-29). Confirms each expected part exists in the shadow root and that its name doesn't
+ * smuggle state into the identifier (e.g. `::part(icon-hovered)` is disallowed; a consumer should
+ * style state via `::part(icon):hover`/CSS, not a different part name per state).
+ */
+export function assertShadowParts(shadowRoot, expectedParts) {
+    for (const name of expectedParts) {
+        expect(name, `Shadow part "${name}" must be lowercase, hyphenated, no state words`).toMatch(/^[a-z][a-z0-9-]*$/);
+        for (const stateWord of STATE_WORDS) {
+            expect(name.includes(stateWord), `Shadow part "${name}" must not encode state ("${stateWord}") in its name`).toBe(false);
+        }
+        const found = shadowRoot.querySelector(`[part~="${name}"]`);
+        expect(found, `Expected shadow part "${name}" not found in shadow root`).not.toBeNull();
+    }
+}
+/**
+ * Runs axe-core directly against the given root (real browser context, since Vitest's browser
+ * mode executes test code in-browser via @vitest/browser-playwright) and fails with a readable
+ * list of violations rather than a raw axe result dump.
+ */
+export async function runAxeCheck(root = document) {
+    const results = await axe.run(root);
+    const violations = results.violations.map(v => `${v.id} (${v.impact}): ${v.help} -- ${v.nodes.length} node(s)`);
+    expect(violations, `axe-core found accessibility violations:\n${violations.join('\n')}`).toEqual([]);
+}

package/dist/collection/test/helpers/conventions.unit.test.js

@@ -0,0 +1,38 @@
+import { describe, it, expect } from "vitest";
+import { assertCssCustomProperties, assertShadowParts } from "./conventions";
+// Pure logic checks for the convention helpers themselves -- naming-pattern enforcement doesn't
+// need a real browser/shadow root, so this runs in the lightweight `unit` vitest project rather
+// than `browser`. The in-browser behavior (resolving computed styles, finding real shadow parts)
+// is exercised indirectly by every .cmp.test.tsx file that calls these helpers.
+describe('assertCssCustomProperties', () => {
+    it('rejects a property name not starting with --bs-', () => {
+        const fakeEl = {};
+        expect(() => assertCssCustomProperties(fakeEl, ['--button-height'])).toThrow();
+    });
+});
+describe('assertShadowParts', () => {
+    function fakeShadowRoot(partNames) {
+        return {
+            querySelector: (selector) => {
+                const match = selector.match(/\[part~="([^"]+)"\]/);
+                return match && partNames.includes(match[1]) ? {} : null;
+            },
+        };
+    }
+    it('rejects an uppercase or non-hyphenated part name', () => {
+        const root = fakeShadowRoot(['Icon']);
+        expect(() => assertShadowParts(root, ['Icon'])).toThrow();
+    });
+    it('rejects a part name that encodes state', () => {
+        const root = fakeShadowRoot(['icon-hovered']);
+        expect(() => assertShadowParts(root, ['icon-hovered'])).toThrow();
+    });
+    it('passes for a valid structural-noun part that exists in the shadow root', () => {
+        const root = fakeShadowRoot(['icon']);
+        expect(() => assertShadowParts(root, ['icon'])).not.toThrow();
+    });
+    it('fails when the expected part is missing from the shadow root', () => {
+        const root = fakeShadowRoot([]);
+        expect(() => assertShadowParts(root, ['icon'])).toThrow();
+    });
+});

package/dist/components/bs-accordion.js

@@ -1 +1 @@
-import{t as o,p as a,H as i,c as e,h as c}from"./p-mnGJPH85.js";const n=a(class extends i{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.bsToggle=e(this,"bsToggle")}expanded=!1;size="medium";disabled=!1;showIcon=!0;showPreview=!0;bsToggle;onActivate=()=>{this.disabled||this.bsToggle.emit(!this.expanded)};render(){return c("div",{key:"2774538f3bc8d52e5a295edafbdad5e2a12dddda",part:"container",class:`bs-accordion bs-accordion--${this.size} ${this.disabled?"bs-accordion--disabled":""}`},c("button",{key:"7e1942dca9082ac653dd7e3d55d9b919790bcd5b",type:"button",part:"header",class:`bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon?"":"bs-accordion__header--no-icon"}`,disabled:this.disabled,"aria-expanded":this.expanded+"",onClick:this.onActivate},this.showIcon&&c("span",{key:"abd274cb295ae34e9220846a1e8466623f65663a",part:"icon",class:"bs-accordion__icon bs-accordion__icon--"+this.size,"aria-hidden":"true"},c("slot",{key:"d9c4c429852c77f4a10c05eb247a9d3d35559ef6",name:"icon"},c(d,{key:"2fb492c43754a517e4e98b684f811be21777e849"}))),c("span",{key:"a02484f1a47148493fbc193bc4b9daa8e4c634e7",part:"label",class:"bs-accordion__label "+(this.showIcon?"":"bs-accordion__label--no-icon")},c("slot",{key:"8241ccee7233e85c2d69c225c07e67b982674ef7",name:"label"})),c("span",{key:"6e36ee8dbd22ca924f9d8ea8b5c3017c5478f058",part:"caret",class:"bs-accordion__caret bs-accordion__caret--"+this.size,"aria-hidden":"true"},c(this.expanded?s:r,null))),(this.expanded||this.showPreview)&&c("div",{key:"1e3ad6fe654c633a4094ea9014ef79d82feae2db",part:"content",class:`bs-accordion__content ${this.showIcon?"":"bs-accordion__content--no-icon"} ${this.expanded?"bs-accordion__content--expanded":"bs-accordion__content--collapsed"}`},c("slot",{key:"6a60fd12ed4ec7e3b4ab0e56414e0a90c4f5d889"})))}static get style(){return":host{display:block;--bs-accordion-radius:var(--bs-border-radius-100);--bs-accordion-header-padding-y-medium:var(--bs-spacing-150);--bs-accordion-header-padding-y-large:var(--bs-spacing-250);--bs-accordion-header-padding-x:var(--bs-spacing-200);--bs-accordion-content-padding-bottom:var(--bs-spacing-150);--bs-accordion-content-padding-right:var(--bs-spacing-200);--bs-accordion-content-padding-left:var(--bs-spacing-800);--bs-accordion-content-padding-left-no-icon:var(--bs-spacing-200);--bs-accordion-icon-width-medium:var(--bs-spacing-800);--bs-accordion-icon-height-medium:48px;--bs-accordion-icon-size-large:var(--bs-spacing-800);--bs-accordion-font-size:var(--bs-font-size-md);--bs-accordion-line-height:var(--bs-line-height-body-md);--bs-accordion-font-weight:var(--bs-font-weight-semibold);--bs-accordion-text-default:var(--bs-text-default);--bs-accordion-bg-hover:var(--bs-surface-hover);--bs-accordion-bg-disabled:var(--bs-surface-action-disabled);--bs-accordion-text-disabled:var(--bs-text-on-disabled);--bs-accordion-focus-ring:var(--bs-border-neutral-focus)}.bs-accordion{display:block;border-radius:var(--bs-accordion-radius);overflow:hidden;font-family:inherit}.bs-accordion:has(.bs-accordion__header:hover),.bs-accordion:has(.bs-accordion__header:active){background:var(--bs-accordion-bg-hover)}.bs-accordion:has(.bs-accordion__header:focus-visible){background:var(--bs-accordion-bg-hover);outline:2px solid var(--bs-accordion-focus-ring);outline-offset:2px;border-radius:calc(var(--bs-accordion-radius) + 2px)}.bs-accordion__header{display:flex;align-items:center;width:100%;border:none;background:transparent;color:var(--bs-accordion-text-default);padding:0;cursor:pointer;font-family:inherit;text-align:left}.bs-accordion__header:focus-visible{outline:none}.bs-accordion__header--medium{padding-top:var(--bs-accordion-header-padding-y-medium);padding-bottom:var(--bs-accordion-header-padding-y-medium)}.bs-accordion__header--large{padding-top:var(--bs-accordion-header-padding-y-large);padding-bottom:var(--bs-accordion-header-padding-y-large)}.bs-accordion__header:disabled{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled);cursor:default}.bs-accordion__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__icon svg{width:24px;height:24px}.bs-accordion__icon--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__icon--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__label{flex:1 1 auto;min-width:0;font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px);font-weight:var(--bs-accordion-font-weight)}.bs-accordion__label--no-icon{padding-left:var(--bs-accordion-header-padding-x)}.bs-accordion__caret{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__caret svg{width:24px;height:24px}.bs-accordion__caret--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__caret--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__content{padding-top:0;padding-bottom:var(--bs-accordion-content-padding-bottom);padding-right:var(--bs-accordion-content-padding-right);padding-left:var(--bs-accordion-content-padding-left);color:var(--bs-accordion-text-default);font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px)}.bs-accordion__content--no-icon{padding-left:var(--bs-accordion-content-padding-left-no-icon)}.bs-accordion__content--collapsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bs-accordion--disabled .bs-accordion__content{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled)}"}},[769,"bs-accordion",{expanded:[516],size:[1],disabled:[4],showIcon:[4,"show-icon"],showPreview:[4,"show-preview"]}]),d=()=>c("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},c("path",{d:"M12 5V19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}),c("path",{d:"M5 12H19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),r=()=>c("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},c("path",{d:"M6 9.75L12 15.75L18 9.75",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),s=()=>c("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},c("path",{d:"M6 14.25L12 8.25L18 14.25",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));function t(){"undefined"!=typeof customElements&&["bs-accordion"].forEach((a=>{"bs-accordion"===a&&(customElements.get(o(a))||customElements.define(o(a),n))}))}t();const b=n,l=t;export{b as BsAccordion,l as defineCustomElement}
+import{t as o,p as a,H as i,c as e,h as c}from"./p-JYlmcxBn.js";const n=a(class extends i{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.bsToggle=e(this,"bsToggle")}expanded=!1;size="medium";disabled=!1;showIcon=!0;showPreview=!0;bsToggle;onActivate=()=>{this.disabled||this.bsToggle.emit(!this.expanded)};render(){return c("div",{key:"2774538f3bc8d52e5a295edafbdad5e2a12dddda",part:"container",class:`bs-accordion bs-accordion--${this.size} ${this.disabled?"bs-accordion--disabled":""}`},c("button",{key:"7e1942dca9082ac653dd7e3d55d9b919790bcd5b",type:"button",part:"header",class:`bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon?"":"bs-accordion__header--no-icon"}`,disabled:this.disabled,"aria-expanded":this.expanded+"",onClick:this.onActivate},this.showIcon&&c("span",{key:"abd274cb295ae34e9220846a1e8466623f65663a",part:"icon",class:"bs-accordion__icon bs-accordion__icon--"+this.size,"aria-hidden":"true"},c("slot",{key:"d9c4c429852c77f4a10c05eb247a9d3d35559ef6",name:"icon"},c(d,{key:"2fb492c43754a517e4e98b684f811be21777e849"}))),c("span",{key:"a02484f1a47148493fbc193bc4b9daa8e4c634e7",part:"label",class:"bs-accordion__label "+(this.showIcon?"":"bs-accordion__label--no-icon")},c("slot",{key:"8241ccee7233e85c2d69c225c07e67b982674ef7",name:"label"})),c("span",{key:"6e36ee8dbd22ca924f9d8ea8b5c3017c5478f058",part:"caret",class:"bs-accordion__caret bs-accordion__caret--"+this.size,"aria-hidden":"true"},c(this.expanded?s:r,null))),(this.expanded||this.showPreview)&&c("div",{key:"1e3ad6fe654c633a4094ea9014ef79d82feae2db",part:"content",class:`bs-accordion__content ${this.showIcon?"":"bs-accordion__content--no-icon"} ${this.expanded?"bs-accordion__content--expanded":"bs-accordion__content--collapsed"}`},c("slot",{key:"6a60fd12ed4ec7e3b4ab0e56414e0a90c4f5d889"})))}static get style(){return":host{display:block;--bs-accordion-radius:var(--bs-border-radius-100);--bs-accordion-header-padding-y-medium:var(--bs-spacing-150);--bs-accordion-header-padding-y-large:var(--bs-spacing-250);--bs-accordion-header-padding-x:var(--bs-spacing-200);--bs-accordion-content-padding-bottom:var(--bs-spacing-150);--bs-accordion-content-padding-right:var(--bs-spacing-200);--bs-accordion-content-padding-left:var(--bs-spacing-800);--bs-accordion-content-padding-left-no-icon:var(--bs-spacing-200);--bs-accordion-icon-width-medium:var(--bs-spacing-800);--bs-accordion-icon-height-medium:48px;--bs-accordion-icon-size-large:var(--bs-spacing-800);--bs-accordion-font-size:var(--bs-font-size-md);--bs-accordion-line-height:var(--bs-line-height-body-md);--bs-accordion-font-weight:var(--bs-font-weight-semibold);--bs-accordion-text-default:var(--bs-text-default);--bs-accordion-bg-hover:var(--bs-surface-hover);--bs-accordion-bg-disabled:var(--bs-surface-action-disabled);--bs-accordion-text-disabled:var(--bs-text-on-disabled);--bs-accordion-focus-ring:var(--bs-border-neutral-focus)}.bs-accordion{display:block;border-radius:var(--bs-accordion-radius);overflow:hidden;font-family:inherit}.bs-accordion:has(.bs-accordion__header:hover),.bs-accordion:has(.bs-accordion__header:active){background:var(--bs-accordion-bg-hover)}.bs-accordion:has(.bs-accordion__header:focus-visible){background:var(--bs-accordion-bg-hover);outline:2px solid var(--bs-accordion-focus-ring);outline-offset:2px;border-radius:calc(var(--bs-accordion-radius) + 2px)}.bs-accordion__header{display:flex;align-items:center;width:100%;border:none;background:transparent;color:var(--bs-accordion-text-default);padding:0;cursor:pointer;font-family:inherit;text-align:start}.bs-accordion__header:focus-visible{outline:none}.bs-accordion__header--medium{padding-top:var(--bs-accordion-header-padding-y-medium);padding-bottom:var(--bs-accordion-header-padding-y-medium)}.bs-accordion__header--large{padding-top:var(--bs-accordion-header-padding-y-large);padding-bottom:var(--bs-accordion-header-padding-y-large)}.bs-accordion__header:disabled{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled);cursor:default}.bs-accordion__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__icon svg{width:24px;height:24px}.bs-accordion__icon--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__icon--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__label{flex:1 1 auto;min-width:0;font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px);font-weight:var(--bs-accordion-font-weight)}.bs-accordion__label--no-icon{padding-inline-start:var(--bs-accordion-header-padding-x)}.bs-accordion__caret{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__caret svg{width:24px;height:24px}.bs-accordion__caret--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__caret--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__content{padding-top:0;padding-bottom:var(--bs-accordion-content-padding-bottom);padding-inline-end:var(--bs-accordion-content-padding-right);padding-inline-start:var(--bs-accordion-content-padding-left);color:var(--bs-accordion-text-default);font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px)}.bs-accordion__content--no-icon{padding-inline-start:var(--bs-accordion-content-padding-left-no-icon)}.bs-accordion__content--collapsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bs-accordion--disabled .bs-accordion__content{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled)}"}},[769,"bs-accordion",{expanded:[516],size:[1],disabled:[4],showIcon:[4,"show-icon"],showPreview:[4,"show-preview"]}]),d=()=>c("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},c("path",{d:"M12 5V19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}),c("path",{d:"M5 12H19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),r=()=>c("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},c("path",{d:"M6 9.75L12 15.75L18 9.75",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),s=()=>c("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},c("path",{d:"M6 14.25L12 8.25L18 14.25",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));function t(){"undefined"!=typeof customElements&&["bs-accordion"].forEach((a=>{"bs-accordion"===a&&(customElements.get(o(a))||customElements.define(o(a),n))}))}t();const b=n,l=t;export{b as BsAccordion,l as defineCustomElement}

package/dist/components/bs-ai-disclaimer.js

@@ -1 +1 @@
-import{t as i,p as e,H as s,h as a}from"./p-mnGJPH85.js";const t=e(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow()}render(){return a("div",{key:"b79f8540dbf4563a831fa687f55710f5e5a55037",class:"bs-ai-disclaimer"},a("p",{key:"82f3cc3744e1012201953eaa0b73a0ac5dc4bcd4",part:"text",class:"bs-ai-disclaimer__text"},a("slot",{key:"f4413eaf53353f3635ae6ec1e2a4af263e0bf67f"})))}static get style(){return":host{display:block;--bs-ai-disclaimer-padding-x:var(--bs-spacing-200);--bs-ai-disclaimer-text-color:var(--bs-text-secondary);--bs-ai-disclaimer-font-size:var(--bs-font-size-sm);--bs-ai-disclaimer-line-height:var(--bs-line-height-body-sm)}.bs-ai-disclaimer{box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 var(--bs-ai-disclaimer-padding-x);font-family:inherit}.bs-ai-disclaimer__text{margin:0;flex:1 0 0;min-width:0;color:var(--bs-ai-disclaimer-text-color);font-size:var(--bs-ai-disclaimer-font-size);line-height:calc(var(--bs-ai-disclaimer-line-height) * 1px);text-align:center;word-break:break-word}"}},[257,"bs-ai-disclaimer"]);function r(){"undefined"!=typeof customElements&&["bs-ai-disclaimer"].forEach((e=>{"bs-ai-disclaimer"===e&&(customElements.get(i(e))||customElements.define(i(e),t))}))}r();const c=t,n=r;export{c as BsAiDisclaimer,n as defineCustomElement}
+import{t as i,p as e,H as s,h as a}from"./p-JYlmcxBn.js";const t=e(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow()}render(){return a("div",{key:"2df50141b934d044d68015cc40b0cc525f374ec7",class:"bs-ai-disclaimer"},a("p",{key:"42e735a432c16d16c4daa786bbd3e2757d298e68",part:"text",class:"bs-ai-disclaimer__text"},a("slot",{key:"fe037a3b1bd4bf6135448abd6ce2de8aa4cec6d5"})))}static get style(){return":host{display:block;--bs-ai-disclaimer-padding-x:var(--bs-spacing-200);--bs-ai-disclaimer-text-color:var(--bs-text-secondary);--bs-ai-disclaimer-font-size:var(--bs-font-size-sm);--bs-ai-disclaimer-line-height:var(--bs-line-height-body-sm)}.bs-ai-disclaimer{box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 var(--bs-ai-disclaimer-padding-x);font-family:inherit}.bs-ai-disclaimer__text{margin:0;flex:1 0 0;min-width:0;color:var(--bs-ai-disclaimer-text-color);font-size:var(--bs-ai-disclaimer-font-size);line-height:calc(var(--bs-ai-disclaimer-line-height) * 1px);text-align:center;word-break:break-word}"}},[257,"bs-ai-disclaimer"]);function r(){"undefined"!=typeof customElements&&["bs-ai-disclaimer"].forEach((e=>{"bs-ai-disclaimer"===e&&(customElements.get(i(e))||customElements.define(i(e),t))}))}r();const c=t,d=r;export{c as BsAiDisclaimer,d as defineCustomElement}

package/dist/components/bs-ai-greeting.js

@@ -1 +1 @@
-import{t as e,p as i,H as t,h as a}from"./p-mnGJPH85.js";const n=i(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}assistantName="Genie";productName;render(){const e=this.productName?`How can I help you with ${this.productName} today?`:"How can I help you today?";return a("div",{key:"eeb2acbb2c6aa8daa803dab57c343b35995200b3",class:"bs-ai-greeting"},a("div",{key:"ece228ba66ee9b783a768258a5c52c1270297962",part:"heading",class:"bs-ai-greeting__heading"},a("p",{key:"f316e250f35b05dda813f5b517f42373eebcde45",class:"bs-ai-greeting__heading-line"},"Hi. I'm ",this.assistantName,","),a("p",{key:"99ac26f89ec8fb3fba000025975c95920faca41a",class:"bs-ai-greeting__heading-line"},"your AI assistant.")),a("p",{key:"3326155e697a1dd0d0512574d0405f5e176d3967",part:"subtext",class:"bs-ai-greeting__subtext"},e))}static get style(){return":host{display:block;--bs-ai-greeting-gap:var(--bs-spacing-200);--bs-ai-greeting-max-width:490px;--bs-ai-greeting-heading-color:var(--bs-text-default);--bs-ai-greeting-heading-font-size:var(--bs-font-size-4xl);--bs-ai-greeting-heading-line-height:var(--bs-line-height-body-lg);--bs-ai-greeting-heading-weight:var(--bs-font-weight-bold);--bs-ai-greeting-heading-gap:var(--bs-spacing-200);--bs-ai-greeting-subtext-color:var(--bs-text-secondary);--bs-ai-greeting-subtext-font-size:var(--bs-font-size-xl);--bs-ai-greeting-subtext-line-height:var(--bs-line-height-body-lg)}.bs-ai-greeting{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--bs-ai-greeting-gap);max-width:var(--bs-ai-greeting-max-width);margin:0 auto;text-align:center;font-family:inherit}.bs-ai-greeting__heading{display:flex;flex-direction:column;gap:var(--bs-ai-greeting-heading-gap);color:var(--bs-ai-greeting-heading-color);font-size:var(--bs-ai-greeting-heading-font-size);font-weight:var(--bs-ai-greeting-heading-weight);line-height:calc(var(--bs-ai-greeting-heading-line-height) * 1px)}.bs-ai-greeting__heading-line{margin:0}.bs-ai-greeting__subtext{margin:0;color:var(--bs-ai-greeting-subtext-color);font-size:var(--bs-ai-greeting-subtext-font-size);font-weight:var(--bs-font-weight-regular);line-height:calc(var(--bs-ai-greeting-subtext-line-height) * 1px)}"}},[513,"bs-ai-greeting",{assistantName:[1,"assistant-name"],productName:[1,"product-name"]}]);function s(){"undefined"!=typeof customElements&&["bs-ai-greeting"].forEach((i=>{"bs-ai-greeting"===i&&(customElements.get(e(i))||customElements.define(e(i),n))}))}s();const g=n,r=s;export{g as BsAiGreeting,r as defineCustomElement}
+import{t as e,p as i,H as t,h as a}from"./p-JYlmcxBn.js";const n=i(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}assistantName="Genie";productName;render(){const e=this.productName?`How can I help you with ${this.productName} today?`:"How can I help you today?";return a("div",{key:"36ef1fa16f576af16387a9119c6fb3003fde61de",class:"bs-ai-greeting"},a("div",{key:"397127700354b1a9b46b3adc5c4e7bec3803b5cf",part:"heading",class:"bs-ai-greeting__heading"},a("p",{key:"3bf51034fa5fc1ea28856e1d44b629f6614cdf1a",class:"bs-ai-greeting__heading-line"},"Hi. I'm ",this.assistantName,","),a("p",{key:"b718d68dfb5c602eb035950b9ff661ab569b9302",class:"bs-ai-greeting__heading-line"},"your AI assistant.")),a("p",{key:"1d271a06cfc0909c8c8c6487a05da3aebf925c09",part:"subtext",class:"bs-ai-greeting__subtext"},e))}static get style(){return":host{display:block;--bs-ai-greeting-gap:var(--bs-spacing-200);--bs-ai-greeting-max-width:490px;--bs-ai-greeting-heading-color:var(--bs-text-default);--bs-ai-greeting-heading-font-size:var(--bs-font-size-4xl);--bs-ai-greeting-heading-line-height:var(--bs-line-height-body-lg);--bs-ai-greeting-heading-weight:var(--bs-font-weight-bold);--bs-ai-greeting-heading-gap:var(--bs-spacing-200);--bs-ai-greeting-subtext-color:var(--bs-text-secondary);--bs-ai-greeting-subtext-font-size:var(--bs-font-size-xl);--bs-ai-greeting-subtext-line-height:var(--bs-line-height-body-lg)}.bs-ai-greeting{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--bs-ai-greeting-gap);max-width:var(--bs-ai-greeting-max-width);margin:0 auto;text-align:center;font-family:inherit}.bs-ai-greeting__heading{display:flex;flex-direction:column;gap:var(--bs-ai-greeting-heading-gap);color:var(--bs-ai-greeting-heading-color);font-size:var(--bs-ai-greeting-heading-font-size);font-weight:var(--bs-ai-greeting-heading-weight);line-height:calc(var(--bs-ai-greeting-heading-line-height) * 1px)}.bs-ai-greeting__heading-line{margin:0}.bs-ai-greeting__subtext{margin:0;color:var(--bs-ai-greeting-subtext-color);font-size:var(--bs-ai-greeting-subtext-font-size);font-weight:var(--bs-font-weight-regular);line-height:calc(var(--bs-ai-greeting-subtext-line-height) * 1px)}"}},[513,"bs-ai-greeting",{assistantName:[1,"assistant-name"],productName:[1,"product-name"]}]);function s(){"undefined"!=typeof customElements&&["bs-ai-greeting"].forEach((i=>{"bs-ai-greeting"===i&&(customElements.get(e(i))||customElements.define(e(i),n))}))}s();const g=n,r=s;export{g as BsAiGreeting,r as defineCustomElement}