@brandsync/wc 1.7.0 → 1.8.0

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

@@ -32,6 +32,9 @@ export class BsSlider {
      * and `segmented` use one thumb (`value`). `segmented` additionally draws `segments` tick marks
      * along the track. */
     type = 'default';
+    /** The `name` the value is submitted under in a surrounding `<form>`'s `FormData`. `type="range"`
+     * submits two entries under this name: the start value, then the end value. */
+    name;
     /** Shows/hides the "Label" text and editable percentage field(s) above the track, and the
      * static min/max bound labels flanking it. When `false`, only the bare track (and its
      * knob/knobs) renders. */
@@ -78,6 +81,33 @@ export class BsSlider {
     /** Emitted when `valueStart`/`valueEnd` changes via user interaction, with both current values.
      * Only fires for `type="range"`. */
     bsRangeChange;
+    internals;
+    initial = { value: 0, valueStart: undefined, valueEnd: undefined };
+    componentWillLoad() {
+        this.initial = { value: this.value, valueStart: this.valueStart, valueEnd: this.valueEnd };
+        this.syncFormValue();
+    }
+    syncFormValue() {
+        if (!this.internals?.setFormValue)
+            return;
+        if (this.type === 'range') {
+            const data = new FormData();
+            if (this.name) {
+                data.append(this.name, String(this.effectiveValueStart));
+                data.append(this.name, String(this.effectiveValueEnd));
+            }
+            this.internals.setFormValue(data);
+        }
+        else {
+            this.internals.setFormValue(String(this.value));
+        }
+    }
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback() {
+        this.value = this.initial.value;
+        this.valueStart = this.initial.valueStart;
+        this.valueEnd = this.initial.valueEnd;
+    }
     get effectiveValueStart() {
         return this.valueStart ?? this.min;
     }
@@ -199,11 +229,12 @@ export class BsSlider {
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (h("div", { key: '602cadcb8377457bc5911161b238c612545592b4', class: rootClasses }, this.showLabel && (h("div", { key: '02b4d3d785665b4563dd04708a5926e116c8f5d7', class: "bs-slider__header" }, h("span", { key: '6a1ddf9c9a50b823231c779610fcbd2cef944701', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '841a41446845737e38d88ca122ec5c626da5ba53', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'a978c0bf50a02ae281925ecd2a21d4aec6458be8', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: 'beb8e6ffb9113c9e6d1185f67db27fd77e6eec4c', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: 'f2db9b3d88d97f4183227dca165e4943586100b7', class: rootClasses }, this.showLabel && (h("div", { key: 'b5898da538670e481c1e0c0120f8ac67fec49ffe', class: "bs-slider__header" }, h("span", { key: '3f0257ee85b18fdce7a51825f9e3005b7c8c8985', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '74adbfd1c596cb0de4bf484cd2ffbc2f283d9074', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '334f03095f5246d4156e7853a1b9d3ddcb594f0a', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '5173a19292bd029121cf9412a2087383700ec61b', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["bs-slider.css"]
@@ -242,6 +273,25 @@ export class BsSlider {
                 "attribute": "type",
                 "defaultValue": "'default'"
             },
+            "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`. `type=\"range\"`\nsubmits two entries under this name: the start value, then the end value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
             "showLabel": {
                 "type": "boolean",
                 "mutable": false,
@@ -436,7 +486,7 @@ export class BsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -496,4 +546,20 @@ export class BsSlider {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncFormValue"
+            }, {
+                "propName": "valueStart",
+                "methodName": "syncFormValue"
+            }, {
+                "propName": "valueEnd",
+                "methodName": "syncFormValue"
+            }, {
+                "propName": "type",
+                "methodName": "syncFormValue"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }

package/dist/collection/components/bs-source-link/bs-source-link.css

@@ -24,7 +24,7 @@
   border: none;
   border-radius: var(--bs-source-link-radius);
   font-family: inherit;
-  text-align: left;
+  text-align: start;
   text-decoration: none;
   cursor: pointer;
   transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
@@ -84,7 +84,7 @@
   display: flex;
   align-items: center;
   gap: var(--bs-spacing-50);
-  padding-left: 22px;
+  padding-inline-start: 22px;
 }
 
 .bs-source-link__source,

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 /**
  * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
  * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or
@@ -61,7 +61,8 @@ export class BsStepper {
         });
     }
     render() {
-        return h("slot", { key: '5e707b38009031a71566e20ec8b9d1df55462e27', onSlotchange: this.onSlotChange });
+        // role="list" so each bs-stepper-step's role="listitem" has the required parent.
+        return (h(Host, { key: 'a9c1838c549b0c3ea9cc145624bc38e9edb32a51', role: "list" }, h("slot", { key: '549a18512ad246b5988008b8d2b6a9142e5380a5', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "bs-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-stepper/bs-stepper-step/bs-stepper-step.css

@@ -147,7 +147,7 @@
    the icon's own right edge to .top's right edge with no positioning assumptions to get wrong. */
 :host(.bs-stepper-step--horizontal) .bs-stepper-step__connector {
   flex: 1 1 auto;
-  margin-left: var(--bs-stepper-step-gap);
+  margin-inline-start: var(--bs-stepper-step-gap);
 }
 
 :host(.bs-stepper-step--vertical) .bs-stepper-step__connector {
@@ -218,8 +218,8 @@
 }
 
 :host(.bs-stepper-step--vertical) .bs-stepper-step__label {
-  margin-left: var(--bs-stepper-step-gap);
-  text-align: left;
+  margin-inline-start: var(--bs-stepper-step-gap);
+  text-align: start;
 }
 
 /* white-space: nowrap -- .label is deliberately narrowed to just the icon's width (see .label's own

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

@@ -85,7 +85,7 @@
 .bs-switch__input {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   margin: 0;
@@ -194,3 +194,12 @@
 .bs-switch--disabled .bs-switch__label {
   color: var(--bs-switch-label-color-disabled);
 }
+
+/* Windows High Contrast: track outline + knob in system colors; checked = Highlight. */
+@media (forced-colors: active) {
+  .bs-switch__track { border: 2px solid ButtonText; forced-color-adjust: none; background: Canvas; }
+  .bs-switch__track--checked { background: Highlight; border-color: Highlight; }
+  .bs-switch__knob { background: ButtonText; }
+  .bs-switch__track--checked .bs-switch__knob { background: HighlightText; }
+  .bs-switch__track--disabled { border-color: GrayText; }
+}

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,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: '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: '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: '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: '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: '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: '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-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"; }

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: '4f39df22dc1027094a67c3d331021a90c471bef6', class: "bs-navigation-drawer", "aria-label": this.heading }, this.showLogo && (h("div", { key: '68101afc424bba6fd56d6b155d8130b77fcb42a9', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '7ec295e0411d6fe6ed33ea67e632fcda72a49611', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: 'ee9db23aeb0c7ad6297bed6a4baa17dbe4b2f6d4', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: 'e69f31b910c3302d2c5851ae9bfdbfec1999fd4e', variant: "mark", background: this.logoBackground }))), h("div", { key: '8d69e56009e183c1745ddafebc75417ce6ea5bdc', class: "bs-navigation-drawer__title-row" }, h("span", { key: '434dd310adc86473876e125fab81f97b0beb5c4b', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '27508cb2c5f417d450b1a059b8e07d47396d3e69', 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: '96ee586ecd6edc378a95a0afcc114919230a52af' })))), h("div", { key: '3b20ffc4e837b7a2e7229ba575b429e54fc9f3ac', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: 'f62aae2397c1eada4c0d52fd6d4cba778f475a58', name: "search" })), h("button", { key: 'a00b4871692f612c62d5e1b6de9511ca7ce7ebe3', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '8402ace02e086a862bcc3bc92beb324940f7fda0' })), h("div", { key: '3ac74499c23530d89061d04fa23c4fd6a7e8c7b4', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '89baa650f1449c813f7a1e9f29f6525dcf6e2699' }))));
+        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: 'bb51c715175ff08caa34b5c2e3c5f7fecdd92059', class: "bs-navigation-drawer-item__root" }, h("button", { key: '799bb1bd74e830e8630c5a8bebe91ffa8e988c07', 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: '78cf9b9281f94d44928b8f7e93de4ed327ca2e6e', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: '94b6037e69f7f1aa77a5abf3c726ae1f02eb55e0', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: 'f7b355c4ef9b4a1d115083fbcb19003aee1a56a4', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '68ad8fb87791f5533a13eafa1348990f0acff6d4' })), this.expandable && (h("span", { key: 'd0f2ef997e4ee619013d63a0793008bb797b2776', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '20286773f2ec74c370335bdcb30b36cd868c3a58' })))), this.expandable && (h("span", { key: 'e9b7a658742af43fcc570c33e82f28bbb87b5a05', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '172adb88df778a8411cbe3de3250af1917564b5d', 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"; }