@brandsync/wc 1.7.0 → 1.9.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: 'b726eda9fd90c67368ff44f288d39a80516ac68c', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: 'ff95ba83169aae65ec57068f2b461b23fe344903', 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: 'e09834a43eb922bcf973b880da3baa1694389ca0', part: "track", class: trackClasses }, h("span", { key: 'dc6c409faddb65511847a941331926ae736ce9ec', part: "knob", class: knobClasses })), h("span", { key: '2943c9fb029632360d21aaaa544d7674322cafc6', part: "label", class: "bs-switch__label" }, h("slot", { key: '55ef83bfb72ed4b463b854eff1fd9472048dcfc4' }))));
+        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,14 @@ 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;
+    /** Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's
+     * `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its
+     * zero-based position in the group (`"0"`, `"1"`...). */
+    value;
+    /** 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 +94,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: '5fafbb8734ddd3d5b155ebdaac9c3aa5ecae6309', 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: '26381015d527bbb2d7b598e117dd61512b5acdac', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '9902a6a2263b7bac63063817859924decd8b3518', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '1982f864c34bb1869085c46237eb1620da47449d', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '5029733093fd8dd68565af803bb74444e5470eef', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: '0d6927b0b39a7d84add287e6473681e5052b5f2d', 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: '866660f0f79927cd018df42286719f2f48262cbb', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '58e11c8a0a57646644cb0b7c950d73f5cee52310', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '38d2e1df2b4e494f68d3c4b9ea34d7a317401953', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '51fb6ec04479b18af787bca4e64f8105a0b19311', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -161,6 +169,44 @@ export class BsInlineTab {
                 "reflect": false,
                 "attribute": "aria-label",
                 "defaultValue": "null"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's\n`value`, and `bsChange` reports it. Optional -- a tab without one is identified by its\nzero-based position in the group (`\"0\"`, `\"1\"`...)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "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,14 @@ 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;
+    /** Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's
+     * `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its
+     * zero-based position in the group (`"0"`, `"1"`...). */
+    value;
+    /** 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 +107,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: 'b70b65a38774feac31afb3c742c1c347d0d8f009', 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: 'bae69ab5499b9e8f695cf0bc559fa395097ae7dc', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'b6f545c119b1e53520ee0a62b51d84071aace11f', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '6c8cf0dd0394ebfc9a5825d01713628ce20d1c2d', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '7eddcdcc73576ac8fc4f640e3f9cdc8c5cc04eb8', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'acf5cd096bb0ff3a7c2bd898759995dc73b261f5', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'f97ae6b3b7760883b3ce9c20a0e7ec29dd43677e', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '2db637b4b3f398b8d300731565b0accd1138fe88', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: '383cf44dfcf1feb5404e6a392318c8ce5a8a1178', 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: '8b3a6b9ee663c2957c206024478ee76abf4fb905', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'b46fd73bac532345e747bb214f8c91f32b04810c', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '9d3e69f4dc96e20a327ebccdbdf934f07a4892c0', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'e724d44bec76845b64e8e0ebb5c883dc47ff11a3', onSlotchange: this.onLabelSlotchange })), h("span", { key: '1cb4e5a8056ebac8b1b098c350c4a5d89bd2968a', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '46a6bbf2c8702645b85062012294eedf3facceac', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '38845ccafeddfe79af64c3e291197e88bbced150', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -200,6 +208,44 @@ export class BsTab {
                 "reflect": false,
                 "attribute": "aria-label",
                 "defaultValue": "null"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's\n`value`, and `bsChange` reports it. Optional -- a tab without one is identified by its\nzero-based position in the group (`\"0\"`, `\"1\"`...)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "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.cmp.test.js

@@ -58,4 +58,92 @@ describe('bs-tabs', () => {
         expect(first.selected).toBe(true);
         expect(second.selected).toBe(false);
     });
+    describe('value and bsChange', () => {
+        const btn = (el) => el.shadowRoot.querySelector('button');
+        const key = (el, k) => el.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, composed: true, cancelable: true }));
+        const group = () => (h("bs-tabs", null, h("bs-tab", { value: "overview" }, "Overview"), h("bs-tab", { value: "details" }, "Details"), h("bs-tab", { value: "history" }, "History")));
+        it('a click selects the tab, updates the group value and emits bsChange with it', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(group());
+            const spy = spyOnEvent('bsChange');
+            const tabs = Array.from(root.querySelectorAll('bs-tab'));
+            btn(tabs[1]).click();
+            await waitForChanges();
+            expect(root.value).toBe('details');
+            expect(root.getAttribute('value')).toBe('details'); // reflected
+            expect(tabs[1].selected).toBe(true);
+            expect(spy).toHaveReceivedEventTimes(1);
+            expect(spy).toHaveReceivedEventDetail({ value: 'details' });
+        });
+        it('does not emit again when the already-selected tab is clicked', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(group());
+            const spy = spyOnEvent('bsChange');
+            const tabs = Array.from(root.querySelectorAll('bs-tab'));
+            btn(tabs[1]).click();
+            await waitForChanges();
+            btn(tabs[1]).click();
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+        it('a tab without a value is identified by its zero-based index as a string', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-tabs", null, h("bs-tab", null, "One"), h("bs-tab", null, "Two")));
+            const spy = spyOnEvent('bsChange');
+            btn(root.querySelectorAll('bs-tab')[1]).click();
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail({ value: '1' });
+            expect(root.value).toBe('1');
+        });
+        it('an initial value selects the matching tab on load', async () => {
+            const { root, waitForChanges } = await render(h("bs-tabs", { value: "history" }, h("bs-tab", { value: "overview" }, "Overview"), h("bs-tab", { value: "details" }, "Details"), h("bs-tab", { value: "history" }, "History")));
+            await waitForChanges();
+            const tabs = Array.from(root.querySelectorAll('bs-tab'));
+            expect(tabs.map(t => t.selected)).toEqual([false, false, true]);
+            // roving tabindex follows the selection
+            expect(btn(tabs[2]).tabIndex).toBe(0);
+            expect(btn(tabs[0]).tabIndex).toBe(-1);
+        });
+        it('setting value from outside selects the matching tab and does NOT emit bsChange', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(group());
+            const spy = spyOnEvent('bsChange');
+            root.value = 'details';
+            await waitForChanges();
+            const tabs = Array.from(root.querySelectorAll('bs-tab'));
+            expect(tabs.map(t => t.selected)).toEqual([false, true, false]);
+            expect(spy).not.toHaveReceivedEvent();
+        });
+        it('with no value set, reports the tab the consumer already marked selected (without emitting)', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-tabs", null, h("bs-tab", { value: "a" }, "A"), h("bs-tab", { value: "b", selected: true }, "B")));
+            const spy = spyOnEvent('bsChange');
+            await waitForChanges();
+            expect(root.value).toBe('b');
+            expect(spy).not.toHaveReceivedEvent();
+        });
+        it('keyboard navigation emits bsChange too (arrow keys select the next tab)', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(group());
+            const spy = spyOnEvent('bsChange');
+            const tabs = Array.from(root.querySelectorAll('bs-tab'));
+            btn(tabs[0]).click();
+            await waitForChanges();
+            key(btn(tabs[0]), 'ArrowRight');
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail({ value: 'details' });
+        });
+        it('still emits bsSelect on the tab itself', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(group());
+            const spy = spyOnEvent('bsSelect');
+            btn(root.querySelectorAll('bs-tab')[2]).click();
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+        it('works for bs-inline-tab groups', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-tabs", { type: "bs-inline-tab" }, h("bs-inline-tab", { value: "x" }, "X"), h("bs-inline-tab", { value: "y" }, "Y")));
+            const spy = spyOnEvent('bsChange');
+            btn(root.querySelectorAll('bs-inline-tab')[1]).click();
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail({ value: 'y' });
+        });
+        it('a tab\'s value prop is reflected as an attribute', async () => {
+            const { root } = await render(group());
+            expect(root.querySelector('bs-tab').getAttribute('value')).toBe('overview');
+        });
+    });
 });

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

@@ -35,6 +35,16 @@ export class BsTabs {
     /** Layout direction of the tab bar itself. Sets `aria-orientation` on the internal wrapper and
      * switches `flex-direction`. */
     orientation = 'horizontal';
+    /** The selected tab's `value`. Mutable and reflected: it follows the user's selection, and
+     * setting it from outside (attribute or property) selects the matching tab -- without emitting
+     * `bsChange`, which only fires for user-driven changes. A tab's value is its own `value` prop,
+     * or, for a tab without one, its zero-based position in the group as a string (`"0"`, `"1"`...).
+     * If unset, it is read from whichever tab is already `selected` once the group loads. */
+    value;
+    /** Fires when the user selects a different tab (click, or arrow/Home/End), with the new
+     * `value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab
+     * still fires as before. */
+    bsChange;
     /**
      * Catches `bsSelect` bubbling up from any slotted `<bs-tab>`/`<bs-inline-tab>` (Stencil's
      * `@Event()` defaults to `bubbles: true, composed: true`, and `@Listen` without a target listens
@@ -43,14 +53,89 @@ export class BsTabs {
      * `if (this.disabled) return;`), so no special-casing is needed here.
      */
     onTabSelect(ev) {
-        const tabs = this.el.querySelectorAll(':scope > bs-tab, :scope > bs-inline-tab');
+        const tabs = this.tabs();
         tabs.forEach(tab => {
             tab.selected = tab === ev.target;
         });
+        this.syncRovingTabindex();
+        const index = tabs.findIndex(tab => tab === ev.target);
+        if (index === -1)
+            return;
+        const value = this.tabValue(tabs[index], index);
+        if (value !== this.value) {
+            this.value = value;
+            this.bsChange.emit({ value });
+        }
+    }
+    componentDidLoad() {
+        if (this.value !== undefined) {
+            this.applyValue();
+        }
+        else {
+            // Uncontrolled: report whichever tab the consumer already marked `selected`.
+            const tabs = this.tabs();
+            const index = tabs.findIndex(t => t.selected);
+            if (index !== -1)
+                this.value = this.tabValue(tabs[index], index);
+        }
+        this.syncRovingTabindex();
+    }
+    tabValue(tab, index) {
+        return tab.value ?? String(index);
+    }
+    /** Selects the tab whose value matches `this.value` (and deselects the rest). */
+    applyValue() {
+        this.tabs().forEach((tab, i) => {
+            tab.selected = this.tabValue(tab, i) === this.value;
+        });
+        this.syncRovingTabindex();
+    }
+    onValueChange() {
+        this.applyValue();
+    }
+    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: '3d45234fd7f253c692fe4bbc150e5e31c3c0144d', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '1872fc2d82a5cde90b9e5b7fc76976f1083a3563' })));
+        return (h("div", { key: '251521d36dcf4d6960df344285bc9a060ff87abb', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '02216f048eaedb13f00891c30e1c49d15a509c1d', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -117,10 +202,56 @@ export class BsTabs {
                 "reflect": false,
                 "attribute": "orientation",
                 "defaultValue": "'horizontal'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected tab's `value`. Mutable and reflected: it follows the user's selection, and\nsetting it from outside (attribute or property) selects the matching tab -- without emitting\n`bsChange`, which only fires for user-driven changes. A tab's value is its own `value` prop,\nor, for a tab without one, its zero-based position in the group as a string (`\"0\"`, `\"1\"`...).\nIf unset, it is read from whichever tab is already `selected` once the group loads."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the user selects a different tab (click, or arrow/Home/End), with the new\n`value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab\nstill fires as before."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "orientation",
+                "methodName": "syncRovingTabindex"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "bsSelect",
@@ -128,6 +259,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-tab/bs-tabs/bs-tabs.stories.js

@@ -37,3 +37,27 @@ export const InlineTabGroup = {
 export const Vertical = {
     args: { orientation: 'vertical' },
 };
+// The group's `value` follows the selection, and `bsChange` reports user-driven changes: the panel
+// below switches in response to it, with no per-tab selection wiring.
+export const WithValueAndPanels = {
+    name: 'With value and panels',
+    render: () => {
+        const panels = {
+            overview: 'Overview content',
+            details: 'Details content',
+            history: 'History content',
+        };
+        const onChange = (ev) => {
+            const panel = ev.currentTarget.nextElementSibling;
+            panel.textContent = panels[ev.detail.value];
+        };
+        return html `
+      <bs-tabs value="overview" @bsChange=${onChange}>
+        <bs-tab value="overview">Overview</bs-tab>
+        <bs-tab value="details">Details</bs-tab>
+        <bs-tab value="history">History</bs-tab>
+      </bs-tabs>
+      <p role="tabpanel" style="margin: 16px 0 0;">Overview content</p>
+    `;
+    },
+};

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: '81d300180aa98431ab694c50e76bb7e55a65efb0', class: "bs-tooltip" }, h("span", { key: '42e53b74b32dab5418e1e7ce37210316fd14341e', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '9b118fbb55282ef4cc7ccdf45da46c1939e25147', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '52f128c55db4da2bbdc6b94c254ab80fb7dcc53f' }))));
+        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"; }