@brandsync/wc 1.7.0 → 1.8.0

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

@@ -35,6 +35,7 @@ import { h } from "@stencil/core";
  */
 export class BsButton {
     el;
+    internals;
     /**
      * Visual style. Maps directly to the brandsync-tokens `--bs-button-*` semantic set.
      * `error` is for destructive/irreversible actions per BrandSync guidance, not a stronger
@@ -45,7 +46,8 @@ export class BsButton {
     size = 'md';
     /** Disables the button and applies the disabled token set. */
     disabled = false;
-    /** Native `<button>` type. */
+    /** Button type. `submit` submits the surrounding `<form>` (via `requestSubmit()`, so validation
+     * runs); `reset` resets it; `button` (default) does nothing on its own. */
     type = 'button';
     /**
      * Accessible name for the button. Required for icon-only usage (no visible label text via the
@@ -103,13 +105,23 @@ export class BsButton {
     onLabelSlotchange = (ev) => {
         this.hasLabel = ev.target.assignedNodes().length > 0;
     };
+    onClick = () => {
+        const form = this.internals?.form;
+        if (!form || this.disabled)
+            return;
+        if (this.type === 'submit')
+            form.requestSubmit();
+        else if (this.type === 'reset')
+            form.reset();
+    };
     render() {
         const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
-        return (h("button", { key: '08e40944935e444c596287a6ff6c57da0e3918f1', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: 'c6499f182e59e2ea19370fe2b5ff3f767f3ed95e', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '0f73b8af02609430f1a4d9c148cfc5c26e3d85b3', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '5d9c542387b6e012acc0f83fb6ecf96f9f86155d', part: "label", class: "bs-button__label" }, h("slot", { key: '97ef5087ea966548db790f1bfd0c6d88c961ba67', onSlotchange: this.onLabelSlotchange })), h("span", { key: '893c0d7ad7f1a3cc80d770e914a1dfe7f7d21205', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '0125dedf6e415dd43a1075d2ac8c03e911320ec5', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
+        return (h("button", { key: 'c218d6df7ccdbb753a2965e6f25a2ed7c0fd73fc', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '8b664e7aae4d4558aeb9fa2d5bc39c0445bd6e1d', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '708b742030c8f4aaeeea36ce68c0c9bc3d9839f9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'db1a5517c7a68d3dafd884b3ebf590e53d911782', part: "label", class: "bs-button__label" }, h("slot", { key: 'ba58f01560f81165e24624b5511848d42b602965', onSlotchange: this.onLabelSlotchange })), h("span", { key: '78f6f131f9b6ea390b1f18929053040e93b688f3', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: 'ee1c230a9f4099e625623173ab429c76664ee64e', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
     }
     static get is() { return "bs-button"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["bs-button.css"]
@@ -206,7 +218,7 @@ export class BsButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Native `<button>` type."
+                    "text": "Button type. `submit` submits the surrounding `<form>` (via `requestSubmit()`, so validation\nruns); `reset` resets it; `button` (default) does nothing on its own."
                 },
                 "getter": false,
                 "setter": false,
@@ -244,4 +256,5 @@ export class BsButton {
         };
     }
     static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "internals"; }
 }

package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.js

@@ -28,6 +28,7 @@ import { h } from "@stencil/core";
 // CSS file comments, not the class-level JSDoc (see bs-tab.css's/bs-inline-tab.css's equivalent note).
 export class BsIconButton {
     el;
+    internals;
     /**
      * Visual style. Maps to the same semantic token families as `bs-button`'s `variant`.
      * `error` is for destructive/irreversible actions per BrandSync guidance, not a stronger
@@ -41,7 +42,8 @@ export class BsIconButton {
     size = 'md';
     /** Disables the button and applies the disabled token set. */
     disabled = false;
-    /** Native `<button>` type. */
+    /** Button type. `submit` submits the surrounding `<form>` (via `requestSubmit()`, so validation
+     * runs); `reset` resets it; `button` (default) does nothing on its own. */
     type = 'button';
     /**
      * Accessible name for the button. Required -- this component is always icon-only, so there's
@@ -49,12 +51,22 @@ export class BsIconButton {
      * prop to the `aria-label` HTML attribute automatically.
      */
     ariaLabel = null;
+    onClick = () => {
+        const form = this.internals?.form;
+        if (!form || this.disabled)
+            return;
+        if (this.type === 'submit')
+            form.requestSubmit();
+        else if (this.type === 'reset')
+            form.reset();
+    };
     render() {
-        return (h("button", { key: '0721387caf111462e6ae846647ba1c48363158aa', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: '8c69f815b6ca603cfcfab34e3530f4c783da0ee7', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '8533f8ecfae182d6bd7d7e0dd6af328015948864' }))));
+        return (h("button", { key: '1d0525e3ad0b90e723cab2c9cd0217046a905a5e', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '1c94ad4a861dde9e4942f6795a2a868161c0b4a1', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '9cd3a6aa2d9cbfebaa1d0e70fc10448af4ef4429' }))));
     }
     static get is() { return "bs-icon-button"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["bs-icon-button.css"]
@@ -151,7 +163,7 @@ export class BsIconButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Native `<button>` type."
+                    "text": "Button type. `submit` submits the surrounding `<form>` (via `requestSubmit()`, so validation\nruns); `reset` resets it; `button` (default) does nothing on its own."
                 },
                 "getter": false,
                 "setter": false,
@@ -182,4 +194,5 @@ export class BsIconButton {
         };
     }
     static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -67,3 +67,7 @@
 .bs-card__footer ::slotted(*) {
   margin: var(--bs-spacing-100) 0 0 0;
 }
+
+@media (forced-colors: active) {
+  .bs-card { border: 1px solid CanvasText; }
+}

package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.css

@@ -41,7 +41,7 @@
   box-sizing: border-box;
   position: absolute;
   top: var(--bs-spacing-100);
-  right: var(--bs-spacing-100);
+  inset-inline-end: var(--bs-spacing-100);
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.css

@@ -72,7 +72,7 @@
 .bs-chatbot-response-action__menu-popup {
   position: absolute;
   top: calc(100% + var(--bs-spacing-50));
-  left: 0;
+  inset-inline-start: 0;
   z-index: 1;
 }
 
@@ -90,8 +90,8 @@
   gap: var(--bs-chatbot-response-action-sources-gap);
   border-radius: var(--bs-chatbot-response-action-button-radius);
   height: var(--bs-chatbot-response-action-button-size);
-  padding-left: var(--bs-chatbot-response-action-sources-padding-left);
-  padding-right: var(--bs-chatbot-response-action-sources-padding-right);
+  padding-inline-start: var(--bs-chatbot-response-action-sources-padding-left);
+  padding-inline-end: var(--bs-chatbot-response-action-sources-padding-right);
   flex-shrink: 0;
   transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
 }

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

@@ -85,7 +85,7 @@
 .bs-checkbox__input {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   margin: 0;
@@ -197,3 +197,10 @@
 .bs-checkbox:not(.bs-checkbox--disabled) .bs-checkbox__box--error ~ .bs-checkbox__label {
   color: var(--bs-checkbox-label-color-error);
 }
+
+/* Windows High Contrast: keep the box outline and show the checked state with system colors. */
+@media (forced-colors: active) {
+  .bs-checkbox__box { border: 2px solid ButtonText; forced-color-adjust: none; background: Canvas; color: ButtonText; }
+  .bs-checkbox__box--selected { background: Highlight; border-color: Highlight; color: HighlightText; }
+  .bs-checkbox__box--disabled { border-color: GrayText; color: GrayText; }
+}

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

@@ -22,7 +22,15 @@ import { h } from "@stencil/core";
 // comments, not the class-level JSDoc (see bs-input.tsx's equivalent note).
 export class BsCheckbox {
     el;
+    internals;
     inputEl;
+    initialChecked = false;
+    /** The `name` the value is submitted under in a surrounding `<form>`'s `FormData`. */
+    name;
+    /** The value submitted when checked (native checkbox default: `"on"`). */
+    value = 'on';
+    /** Marks the checkbox as required: the surrounding form fails validation while unchecked. */
+    required = false;
     /** Sizing scale. Controls the box's width/height and border width; corner radius is constant
      * across all sizes. */
     size = 'lg';
@@ -58,6 +66,26 @@ export class BsCheckbox {
     bsChange;
     /** Keeps the native input's `.indeterminate` JS property in sync -- this can't be expressed as a
      * JSX attribute in Stencil, it must be set imperatively on the element. */
+    syncFormValue() {
+        if (!this.internals?.setFormValue)
+            return;
+        this.internals.setFormValue(this.checked ? this.value : null);
+        if (this.required && !this.checked) {
+            this.internals.setValidity({ valueMissing: true }, 'Please check this box if you want to proceed.', this.inputEl);
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback() {
+        this.checked = this.initialChecked;
+        this.indeterminate = false;
+    }
+    componentWillLoad() {
+        this.initialChecked = this.checked;
+        this.syncFormValue();
+    }
     onIndeterminateChange() {
         if (this.inputEl) {
             this.inputEl.indeterminate = this.indeterminate;
@@ -92,11 +120,12 @@ export class BsCheckbox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: '9e2bdce74ff8d1fb74fe4cab1a42259b24ccd579', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: '63f6c1390851acfb0c1692eaacc60ee460cd4ec7', ref: el => (this.inputEl = el), class: "bs-checkbox__input", type: "checkbox", checked: this.checked, disabled: this.disabled, "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '7feb1d3c1f4df28630a00bc270385b869d6981ab', part: "box", class: boxClasses }, showIcon && (h("svg", { key: '458f2fc8694f6da74cc6116a5388f15ced2e7f77', part: "icon", class: "bs-checkbox__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, this.indeterminate ? (h("path", { d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })) : (h("path", { d: "M3 8.5L6.2 11.5L13 4.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("span", { key: 'f72ec816bd8338412579ae32c3d1b8282f177837', part: "label", class: "bs-checkbox__label" }, h("slot", { key: 'f12afc3bbef5728df6385703be048ee9f0275e8b' }))));
+        return (h("label", { key: '98b2c7da5530c74c5632f28a770096201df43f1f', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: '1765be1adab7001f6b8c6ca79c9da8ca3a67bb77', ref: el => (this.inputEl = el), class: "bs-checkbox__input", type: "checkbox", checked: this.checked, disabled: this.disabled, required: this.required, "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'ffae4c14191d40da029aaa058d0a11f1170e8c00', part: "box", class: boxClasses }, showIcon && (h("svg", { key: 'ef0ddf8663a8d1a517b3604c8fa3a98ff1ba7187', part: "icon", class: "bs-checkbox__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, this.indeterminate ? (h("path", { d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })) : (h("path", { d: "M3 8.5L6.2 11.5L13 4.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("span", { key: '9fda5d8e25fecbc6d4ebe9339f63fae58e8bac26', part: "label", class: "bs-checkbox__label" }, h("slot", { key: '95d6e3a55c81444feb8d1221bb080b9c49a8cf46' }))));
     }
     static get is() { return "bs-checkbox"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["bs-checkbox.css"]
@@ -109,6 +138,65 @@ export class BsCheckbox {
     }
     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 checked (native checkbox default: `\"on\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the checkbox as required: the surrounding form fails validation while unchecked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -191,7 +279,7 @@ export class BsCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -258,8 +346,18 @@ export class BsCheckbox {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "checked",
+                "methodName": "syncFormValue"
+            }, {
+                "propName": "value",
+                "methodName": "syncFormValue"
+            }, {
+                "propName": "required",
+                "methodName": "syncFormValue"
+            }, {
                 "propName": "indeterminate",
                 "methodName": "onIndeterminateChange"
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }

package/dist/collection/components/bs-chip/bs-chip-filter/bs-chip-filter.css

@@ -69,13 +69,13 @@
 }
 
 .bs-chip-filter--icon-only {
-  padding-left: var(--bs-chip-filter-padding-x-glyph-side);
-  padding-right: var(--bs-chip-filter-padding-x-plain-side);
+  padding-inline-start: var(--bs-chip-filter-padding-x-glyph-side);
+  padding-inline-end: var(--bs-chip-filter-padding-x-plain-side);
 }
 
 .bs-chip-filter--dropdown-only {
-  padding-left: var(--bs-chip-filter-padding-x-plain-side);
-  padding-right: var(--bs-chip-filter-padding-x-glyph-side);
+  padding-inline-start: var(--bs-chip-filter-padding-x-plain-side);
+  padding-inline-end: var(--bs-chip-filter-padding-x-glyph-side);
 }
 
 .bs-chip-filter--text-only {

package/dist/collection/components/bs-chip/bs-chip-informative/bs-chip-informative.css

@@ -69,13 +69,13 @@
 }
 
 :host(.bs-chip-informative--icon) {
-  padding-left: var(--bs-chip-informative-padding-x-glyph-side);
-  padding-right: var(--bs-chip-informative-padding-right-icon-variant);
+  padding-inline-start: var(--bs-chip-informative-padding-x-glyph-side);
+  padding-inline-end: var(--bs-chip-informative-padding-right-icon-variant);
 }
 
 :host(.bs-chip-informative--text) {
-  padding-left: var(--bs-chip-informative-padding-x-plain-side);
-  padding-right: var(--bs-chip-informative-padding-x-plain-side);
+  padding-inline-start: var(--bs-chip-informative-padding-x-plain-side);
+  padding-inline-end: var(--bs-chip-informative-padding-x-plain-side);
 }
 
 .bs-chip-informative__icon {

package/dist/collection/components/bs-chip/bs-chip-input/bs-chip-input.css

@@ -69,20 +69,20 @@
 
 .bs-chip-input__body {
   gap: var(--bs-chip-input-gap);
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 
 :host(.bs-chip-input--icon) .bs-chip-input__body {
-  padding-left: var(--bs-chip-input-padding-x-glyph-side);
+  padding-inline-start: var(--bs-chip-input-padding-x-glyph-side);
 }
 
 :host(.bs-chip-input--text) .bs-chip-input__body {
-  padding-left: var(--bs-chip-input-padding-x-plain-side);
+  padding-inline-start: var(--bs-chip-input-padding-x-plain-side);
 }
 
 .bs-chip-input__remove {
-  padding-left: 0;
-  padding-right: var(--bs-chip-input-padding-x-glyph-side);
+  padding-inline-start: 0;
+  padding-inline-end: var(--bs-chip-input-padding-x-glyph-side);
 }
 
 .bs-chip-input__icon {

package/dist/collection/components/bs-data-table/bs-data-table.css

@@ -13,7 +13,7 @@
 }
 
 .bs-data-table__header-cell {
-  text-align: left;
+  text-align: start;
   padding: var(--bs-data-table-cell-padding-y) var(--bs-data-table-cell-padding-x);
   border-bottom: 1px solid var(--bs-border-default);
   font-weight: var(--bs-font-weight-semibold);

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

@@ -70,7 +70,7 @@
 .bs-dialog__close--floating {
   position: absolute;
   top: var(--bs-spacing-200);
-  right: var(--bs-spacing-200);
+  inset-inline-end: var(--bs-spacing-200);
   z-index: 1;
 }
 
@@ -128,3 +128,7 @@
   justify-content: center;
   text-align: center;
 }
+
+@media (forced-colors: active) {
+  .bs-dialog__dialog { border: 1px solid CanvasText; }
+}

package/dist/collection/components/bs-form-association.cmp.test.js

@@ -0,0 +1,172 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+// Cross-component coverage for native <form> participation (FormData, validation, reset) and the
+// radio group keyboard pattern. Lives beside the components, not in one of them, since it exercises
+// several together inside a real <form>.
+async function renderForm(children) {
+    const { root, waitForChanges } = await render(h("form", null, children));
+    return { form: root, waitForChanges };
+}
+describe('form association', () => {
+    it('bs-input submits its value under name', async () => {
+        const { form, waitForChanges } = await renderForm(h("bs-input", { name: "email", value: "a@b.co" }));
+        await waitForChanges();
+        expect(new FormData(form).get('email')).toBe('a@b.co');
+    });
+    it('bs-input updates FormData as the user types, and resets with the form', async () => {
+        const { form, waitForChanges } = await renderForm(h("bs-input", { name: "q", value: "start" }));
+        const input = form.querySelector('bs-input').shadowRoot.querySelector('input');
+        input.value = 'typed';
+        input.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        await waitForChanges();
+        expect(new FormData(form).get('q')).toBe('typed');
+        form.reset();
+        await waitForChanges();
+        expect(new FormData(form).get('q')).toBe('start');
+    });
+    it('a required, empty bs-input makes the form invalid', async () => {
+        const { form, waitForChanges } = await renderForm(h("bs-input", { name: "n", required: true }));
+        await waitForChanges();
+        expect(form.checkValidity()).toBe(false);
+    });
+    it('bs-checkbox and bs-switch submit only while checked', async () => {
+        const { form, waitForChanges } = await renderForm(h("div", null, h("bs-checkbox", { name: "terms", value: "yes" }), h("bs-switch", { name: "alerts", checked: true })));
+        await waitForChanges();
+        expect(new FormData(form).get('terms')).toBeNull();
+        expect(new FormData(form).get('alerts')).toBe('on');
+        form.querySelector('bs-checkbox').shadowRoot.querySelector('input').click();
+        await waitForChanges();
+        expect(new FormData(form).get('terms')).toBe('yes');
+        form.reset();
+        await waitForChanges();
+        expect(new FormData(form).get('terms')).toBeNull();
+    });
+    it('a required, unchecked bs-checkbox makes the form invalid', async () => {
+        const { form, waitForChanges } = await renderForm(h("bs-checkbox", { name: "t", required: true }));
+        await waitForChanges();
+        expect(form.checkValidity()).toBe(false);
+    });
+});
+describe('bs-radio group', () => {
+    const group = () => (h("div", null, h("bs-radio", { name: "fruit", value: "a" }), h("bs-radio", { name: "fruit", value: "b" }), h("bs-radio", { name: "fruit", value: "c", disabled: true })));
+    const inputOf = (r) => r.shadowRoot.querySelector('input');
+    it('checking one unchecks the others and submits its value', async () => {
+        const { form, waitForChanges } = await renderForm(group());
+        const [a, b] = Array.from(form.querySelectorAll('bs-radio'));
+        inputOf(a).click();
+        await waitForChanges();
+        inputOf(b).click();
+        await waitForChanges();
+        expect(a.checked).toBe(false);
+        expect(b.checked).toBe(true);
+        expect(new FormData(form).get('fruit')).toBe('b');
+    });
+    it('arrow keys move selection to the next enabled radio, wrapping', async () => {
+        const { form, waitForChanges } = await renderForm(group());
+        const [a, b] = Array.from(form.querySelectorAll('bs-radio'));
+        inputOf(a).click();
+        await waitForChanges();
+        inputOf(a).dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, composed: true, cancelable: true }));
+        await waitForChanges();
+        expect(b.checked).toBe(true);
+        inputOf(b).dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true, cancelable: true }));
+        await waitForChanges();
+        expect(a.checked).toBe(true); // skipped the disabled third radio and wrapped
+    });
+    it('only the checked radio is in the tab order once the group has a selection', async () => {
+        const { form, waitForChanges } = await renderForm(group());
+        const [a, b] = Array.from(form.querySelectorAll('bs-radio'));
+        inputOf(a).click();
+        await waitForChanges();
+        expect(inputOf(a).tabIndex).toBe(0);
+        expect(inputOf(b).tabIndex).toBe(-1);
+    });
+});
+describe('bs-button / bs-icon-button inside a form', () => {
+    const click = (el) => el.shadowRoot.querySelector('button').click();
+    it('type="submit" submits the surrounding form (and runs validation first)', async () => {
+        let submits = 0;
+        const { root, waitForChanges } = await render(h("form", { onSubmit: (e) => { e.preventDefault(); submits++; } }, h("bs-input", { name: "n", required: true }), h("bs-button", { type: "submit" }, "Go"), h("bs-icon-button", { type: "submit", ariaLabel: "Go" }, "x")));
+        const form = root;
+        await waitForChanges();
+        click(form.querySelector('bs-button'));
+        click(form.querySelector('bs-icon-button'));
+        expect(submits).toBe(0); // required field empty -> blocked by validation
+        form.querySelector('bs-input').value = 'x';
+        await waitForChanges();
+        click(form.querySelector('bs-button'));
+        click(form.querySelector('bs-icon-button'));
+        expect(submits).toBe(2);
+    });
+    it('type="reset" resets the form; type="button" does neither', async () => {
+        let submits = 0;
+        const { root, waitForChanges } = await render(h("form", { onSubmit: (e) => { e.preventDefault(); submits++; } }, h("bs-input", { name: "q", value: "start" }), h("bs-button", { type: "reset" }, "Reset"), h("bs-button", null, "Plain")));
+        const form = root;
+        await waitForChanges();
+        form.querySelector('bs-input').value = 'changed';
+        await waitForChanges();
+        click(form.querySelectorAll('bs-button')[1]);
+        expect(submits).toBe(0);
+        expect(new FormData(form).get('q')).toBe('changed');
+        click(form.querySelectorAll('bs-button')[0]);
+        await waitForChanges();
+        expect(new FormData(form).get('q')).toBe('start');
+    });
+});
+// The Angular ControlValueAccessors and Vue v-model bindings (generated in stencil.config.ts) read
+// `event.target.value` / `.checked` straight off the host inside the `bsChange` handler. That only
+// works if the host property is already updated when `bsChange` fires -- pin that contract here.
+describe('bsChange framework-binding contract', () => {
+    it('bs-input: host.value is already the new value inside bsChange', async () => {
+        const { root, waitForChanges } = await render(h("bs-input", null));
+        const seen = [];
+        root.addEventListener('bsChange', (e) => seen.push(e.target.value));
+        const input = root.shadowRoot.querySelector('input');
+        input.value = 'hello';
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+        await waitForChanges();
+        expect(seen).toEqual(['hello']);
+    });
+    it('bs-checkbox and bs-switch: host.checked is already updated inside bsChange', async () => {
+        const { root, waitForChanges } = await render(h("div", null, h("bs-checkbox", null), h("bs-switch", null)));
+        const seen = [];
+        root.addEventListener('bsChange', (e) => seen.push(e.target.checked));
+        root.querySelector('bs-checkbox').shadowRoot.querySelector('input').click();
+        root.querySelector('bs-switch').shadowRoot.querySelector('input').click();
+        await waitForChanges();
+        expect(seen).toEqual([true, true]);
+    });
+    it('bs-slider: host.value is already updated inside bsChange', async () => {
+        const { root, waitForChanges } = await render(h("bs-slider", { value: 10 }));
+        const seen = [];
+        root.addEventListener('bsChange', (e) => seen.push(e.target.value));
+        const range = root.shadowRoot.querySelector('input[type="range"]');
+        range.value = '55';
+        range.dispatchEvent(new Event('input', { bubbles: true }));
+        range.dispatchEvent(new Event('change', { bubbles: true }));
+        await waitForChanges();
+        expect(seen.length).toBeGreaterThan(0);
+        expect(seen[seen.length - 1]).toBe(55);
+    });
+});
+const keysOf = (f) => {
+    const keys = [];
+    new FormData(f).forEach((_v, k) => keys.push(k));
+    return keys;
+};
+describe('disabled controls', () => {
+    it('a disabled control is excluded from FormData and validation, like a native disabled input', async () => {
+        const { root, waitForChanges } = await render(h("form", null, h("bs-input", { name: "i", value: "x", required: true, disabled: true }), h("bs-checkbox", { name: "c", checked: true, disabled: true }), h("bs-switch", { name: "s", checked: true, disabled: true }), h("bs-radio", { name: "r", value: "a", checked: true, disabled: true }), h("bs-slider", { name: "v", value: 20, disabled: true })));
+        const form = root;
+        await waitForChanges();
+        expect(keysOf(form)).toEqual([]);
+        expect(form.checkValidity()).toBe(true);
+        Array.from(form.querySelectorAll('bs-input, bs-checkbox, bs-switch, bs-radio, bs-slider')).forEach(el => (el.disabled = false));
+        await waitForChanges();
+        expect(keysOf(form).sort()).toEqual(['c', 'i', 'r', 's', 'v']);
+    });
+    it('a control inside <fieldset disabled> is excluded from FormData', async () => {
+        const { root, waitForChanges } = await render(h("form", null, h("fieldset", { disabled: true }, h("bs-input", { name: "fs", value: "x" }))));
+        await waitForChanges();
+        expect(keysOf(root)).toEqual([]);
+    });
+});

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

@@ -84,7 +84,7 @@
 
 .bs-input__required {
   color: var(--bs-input-error-color);
-  margin-left: 2px;
+  margin-inline-start: 2px;
 }
 
 .bs-input__field {
@@ -148,7 +148,7 @@
   visibility: hidden;
   pointer-events: none;
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
 }
 
 .bs-input__control::-webkit-textfield-decoration-container {
@@ -282,8 +282,8 @@
 .bs-input__dropdown-menu {
   position: absolute;
   top: calc(100% + var(--bs-input-stack-gap));
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   z-index: 1;
 }
 
@@ -450,3 +450,9 @@
 .bs-input__field--pin.bs-input__field--error .bs-input__pin-cell {
   border-color: var(--bs-input-field-border-error);
 }
+
+/* Windows High Contrast: keep the field boundary visible. */
+@media (forced-colors: active) {
+  .bs-input__control { border: 1px solid FieldText; }
+  .bs-input__control:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
+}