@brandsync/wc 1.7.0 → 1.9.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.cmp.test.js

@@ -80,4 +80,24 @@ describe('bs-icon-button', () => {
         expect(iconWrapper.querySelector('slot')).not.toBeNull();
         expect(root.querySelector('svg.my-icon')).not.toBeNull();
     });
+    describe('icon-font glyphs', () => {
+        // Issue: a slotted icon-font glyph (<i class="ph-bold ...">) ignored the size prop, because
+        // glyphs are sized by font-size and only width/height were being set.
+        for (const [size, px] of [
+            ['xs', 8],
+            ['sm', 16],
+            ['md', 20],
+            ['lg', 24],
+        ]) {
+            it(`size="${size}" sizes a slotted glyph to ${px}px via font-size`, async () => {
+                const { root } = await render(h("bs-icon-button", { size: size, ariaLabel: "Bell" }, h("i", { class: "glyph" }, "A")));
+                const glyph = root.querySelector('i.glyph');
+                expect(getComputedStyle(glyph).fontSize).toBe(`${px}px`);
+            });
+        }
+        it('does not override a font-size the consumer sets on the glyph themselves', async () => {
+            const { root } = await render(h("bs-icon-button", { size: "md", ariaLabel: "Bell" }, h("i", { class: "glyph", style: { fontSize: '30px' } }, "A")));
+            expect(getComputedStyle(root.querySelector('i.glyph')).fontSize).toBe('30px');
+        });
+    });
 });

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

@@ -2,14 +2,14 @@
  * @prop --bs-icon-button-radius: Corner radius, size="sm"/"md"/"lg". Aliased to --bs-border-radius-100.
  * @prop --bs-icon-button-radius-xs: Corner radius, size="xs" -- a smaller radius than --bs-icon-button-radius, since --bs-border-radius-100 (8px) on a 16px box would look nearly circular. Aliased to --bs-border-radius-50.
  * @prop --bs-icon-button-size-xs: Container width/height at size="xs". 16px.
- * @prop --bs-icon-button-icon-size-xs: Slotted icon width/height at size="xs". 8px.
+ * @prop --bs-icon-button-icon-size-xs: Slotted icon width/height (and font-size, for icon-font glyphs) at size="xs". 8px.
  * @prop --bs-icon-button-padding-xs: Padding on all sides, size="xs" only -- distinct from --bs-icon-button-padding, since 16px/8px icon math (4px) differs from the sm/md/lg constant (12px). Aliased to --bs-spacing-50.
  * @prop --bs-icon-button-size-sm: Container width/height at size="sm". 40px.
  * @prop --bs-icon-button-size-md: Container width/height at size="md". 44px.
  * @prop --bs-icon-button-size-lg: Container width/height at size="lg". 48px.
- * @prop --bs-icon-button-icon-size-sm: Slotted icon width/height at size="sm". 16px.
- * @prop --bs-icon-button-icon-size-md: Slotted icon width/height at size="md". 20px.
- * @prop --bs-icon-button-icon-size-lg: Slotted icon width/height at size="lg". 24px.
+ * @prop --bs-icon-button-icon-size-sm: Slotted icon width/height (and font-size, for icon-font glyphs) at size="sm". 16px.
+ * @prop --bs-icon-button-icon-size-md: Slotted icon width/height (and font-size, for icon-font glyphs) at size="md". 20px.
+ * @prop --bs-icon-button-icon-size-lg: Slotted icon width/height (and font-size, for icon-font glyphs) at size="lg". 24px.
  * @prop --bs-icon-button-padding: Padding on all sides, all sizes (constant -- centers the icon
  * inside the container at every size). Aliased to --bs-spacing-150.
  * @prop --bs-icon-button-primary-default: Background, variant="primary", default. Aliased to --bs-color-primary-default.
@@ -161,6 +161,9 @@
 .bs-icon-button--xs .bs-icon-button__icon {
   width: var(--bs-icon-button-icon-size-xs);
   height: var(--bs-icon-button-icon-size-xs);
+  /* Icon-font glyphs (e.g. <i class="ph-bold ph-bell">) are sized by font-size, not width/height,
+     so they follow the same token as SVG icons do. */
+  font-size: var(--bs-icon-button-icon-size-xs);
 }
 
 .bs-icon-button--sm {
@@ -170,6 +173,9 @@
 .bs-icon-button--sm .bs-icon-button__icon {
   width: var(--bs-icon-button-icon-size-sm);
   height: var(--bs-icon-button-icon-size-sm);
+  /* Icon-font glyphs (e.g. <i class="ph-bold ph-bell">) are sized by font-size, not width/height,
+     so they follow the same token as SVG icons do. */
+  font-size: var(--bs-icon-button-icon-size-sm);
 }
 
 .bs-icon-button--md {
@@ -179,6 +185,9 @@
 .bs-icon-button--md .bs-icon-button__icon {
   width: var(--bs-icon-button-icon-size-md);
   height: var(--bs-icon-button-icon-size-md);
+  /* Icon-font glyphs (e.g. <i class="ph-bold ph-bell">) are sized by font-size, not width/height,
+     so they follow the same token as SVG icons do. */
+  font-size: var(--bs-icon-button-icon-size-md);
 }
 
 .bs-icon-button--lg {
@@ -188,6 +197,9 @@
 .bs-icon-button--lg .bs-icon-button__icon {
   width: var(--bs-icon-button-icon-size-lg);
   height: var(--bs-icon-button-icon-size-lg);
+  /* Icon-font glyphs (e.g. <i class="ph-bold ph-bell">) are sized by font-size, not width/height,
+     so they follow the same token as SVG icons do. */
+  font-size: var(--bs-icon-button-icon-size-lg);
 }
 
 .bs-icon-button__icon {
@@ -195,12 +207,17 @@
   align-items: center;
   justify-content: center;
   color: inherit;
+  line-height: 1;
 }
 
 .bs-icon-button__icon ::slotted(*) {
   display: block;
   width: 100%;
   height: 100%;
+  /* Make a slotted icon font glyph take the wrapper's font-size (above) rather than whatever the
+     page's inherited size happens to be. */
+  font-size: inherit;
+  line-height: 1;
 }
 
 .bs-icon-button--primary {

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

@@ -20,7 +20,8 @@ import { h } from "@stencil/core";
  * just conditionally, unlike `bs-button`) -- there's no visible label text to fall back on for an
  * accessible name.
  *
- * @slot - Default slot: the icon content. Exactly one icon, no label.
+ * @slot - Default slot: the icon content. Exactly one icon, no label -- an inline SVG, or an icon-font
+ * glyph (sized by `font-size`, which this component sets from the `size` prop).
  * @part icon - The icon wrapper element.
  */
 // Note: this component's CSS Custom Properties (--bs-icon-button-*) are documented via @prop
@@ -28,6 +29,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 +43,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 +52,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: '538cd121df25e20ea7e21a7b5269e73d275f8bff', 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: '35548fe082134edb85dbdcb0caf820ec3b5233c2', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '7f16ef5f2c08fc5d2bb852bd5c36598be5aa1175' }))));
     }
     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 +164,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 +195,5 @@ export class BsIconButton {
         };
     }
     static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -42,6 +42,16 @@ export const Sizes = {
     </div>
   `,
 };
+// An icon-font glyph in the slot (here a plain text glyph, so the story needs no icon-font
+// dependency) scales with `size` exactly like the SVG above -- no manual font-size needed.
+export const IconFontGlyph = {
+    name: 'Icon-font glyph',
+    render: args => html `
+    <div style="display:flex; gap:12px; align-items:center;">
+      ${['xs', 'sm', 'md', 'lg'].map(size => html `<bs-icon-button size=${size} aria-label=${args.ariaLabel}><i style="font-style: normal;">★</i></bs-icon-button>`)}
+    </div>
+  `,
+};
 export const Disabled = {
     args: { disabled: true },
 };

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.cmp.test.js

@@ -99,6 +99,25 @@ describe('bs-data-table', () => {
             expect(cell.querySelector('img')).toBeNull();
             expect(cell.textContent).toBe('<img src=x onerror="window.__xss = true">');
         });
+        it('renders rich cell content: a link and a web component become real elements', async () => {
+            const { root, waitForChanges } = await render(h("bs-data-table", { columns: columns, rows: rows, cellRenderer: (row) => `<a href="/users/${row.id}">Open</a><bs-badge variant="success">Active</bs-badge>` }));
+            await waitForChanges();
+            const cell = root.shadowRoot.querySelector('tbody td');
+            expect(cell.querySelector('a')).toEqualAttribute('href', '/users/1');
+            const badge = cell.querySelector('bs-badge');
+            expect(badge).not.toBeNull();
+            expect(badge.shadowRoot).not.toBeNull(); // upgraded: it is a live component, not inert text
+        });
+        it('applies cellRenderer to every cell, and does NOT escape what it returns (the caller must)', async () => {
+            const unsafeRows = [{ id: 1, name: '<img src=x onerror="window.__xss2 = true">', status: 'Active' }];
+            const unsafe = await render(h("bs-data-table", { columns: columns, rows: unsafeRows, cellRenderer: (row, col) => String(row[col.key]) }));
+            expect(unsafe.root.shadowRoot.querySelector('tbody td').querySelector('img')).not.toBeNull();
+            const esc = (v) => String(v).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+            const safe = await render(h("bs-data-table", { columns: columns, rows: unsafeRows, cellRenderer: (row, col) => esc(row[col.key]) }));
+            const cell = safe.root.shadowRoot.querySelector('tbody td');
+            expect(cell.querySelector('img')).toBeNull();
+            expect(cell.textContent).toBe('<img src=x onerror="window.__xss2 = true">');
+        });
         it('still allows cellRenderer to render trusted custom HTML when explicitly supplied', async () => {
             const { root } = await render(h("bs-data-table", { columns: columns, rows: rows, cellRenderer: () => '<button type="button">Edit</button>' }));
             const cell = root.shadowRoot.querySelector('tbody td');

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-data-table/bs-data-table.js

@@ -29,8 +29,22 @@ export class BsDataTable {
     sortColumn;
     sortDirection = 'asc';
     selectable = false;
-    /** Optional custom cell renderer, e.g. for an actions column. Function props are JS-property-only,
-     * same as array props -- there is no attribute equivalent. Falls back to the raw cell value. */
+    /** Optional custom cell renderer, for rich cells such as a status badge, a link or an actions
+     * column. It returns an **HTML string** that is inserted into the cell as real markup
+     * (`innerHTML`), so links, buttons, `<img>` and other web components (e.g. `<bs-badge>`) all render.
+     *
+     * **When set it renders every cell, not just the special ones** -- return the plain value for
+     * ordinary columns too. And **the returned string is not escaped or sanitized** (same trust
+     * model as React's `dangerouslySetInnerHTML`): escape any untrusted row data you put in it, plain
+     * columns included, or it will be interpreted as HTML. Without a `cellRenderer`, values are
+     * rendered as escaped text.
+     *
+     * The markup is static HTML -- attach behavior yourself, e.g. one `click` listener on the table
+     * that reads `event.composedPath()[0]` (events from inside the shadow root are retargeted to the
+     * table itself).
+     *
+     * Function props are JS-property-only, same as array props -- there is no attribute equivalent.
+     * Falls back to the raw cell value (as escaped text) when unset. */
     cellRenderer;
     bsSort;
     bsRowSelect;
@@ -71,11 +85,11 @@ export class BsDataTable {
         }
     }
     render() {
-        return (h("table", { key: 'a1a9d0c92eb2af12f8f9cab9ba4ae0994a10958a', part: "table", class: "bs-data-table" }, h("thead", { key: '2b51500b221465d750b55c31e00af94684367eb2', part: "head" }, h("tr", { key: '57aa25ca9b255213f155b5b30841e284d1eebaf8' }, this.selectable && (h("th", { key: '44b709a7cd1f2072934efe8fef44a63b2ed20d62', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: '084d099453c53333d77c60786b7eb6bedfa21ef3', type: "checkbox", "aria-label": "Select all rows", checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
+        return (h("table", { key: '7ea79a70148513512cdba2f8cb8d5a5c7ae09706', part: "table", class: "bs-data-table" }, h("thead", { key: 'e9cf73cbba196e9caf4b03a837866a5370c13e19', part: "head" }, h("tr", { key: 'a33fbd57f1925e34c6e7ce292b6945d2ee5c6113' }, this.selectable && (h("th", { key: '876948b66e54ae68d6aa6148c962781223fa0441', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'cf8f26258bcee486190e3ac4b3d5ce4715784d5f', type: "checkbox", "aria-label": "Select all rows", checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
             const isSorted = this.sortColumn === column.key;
             const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
             return (h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), h("tbody", { key: '0438897652b9f8909ff67ae9f7b22d0950f1e5e8', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), h("tbody", { key: '3a0c2ce6fea27797b855ee2b3c724d0e99471d28', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
         // cellRenderer is a developer-supplied, trusted function (JS-property-only, never
         // derived from untrusted input) -- its HTML output is intentionally not escaped,
         // same trust model as React's dangerouslySetInnerHTML.
@@ -228,7 +242,7 @@ export class BsDataTable {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional custom cell renderer, e.g. for an actions column. Function props are JS-property-only,\nsame as array props -- there is no attribute equivalent. Falls back to the raw cell value."
+                    "text": "Optional custom cell renderer, for rich cells such as a status badge, a link or an actions\ncolumn. It returns an **HTML string** that is inserted into the cell as real markup\n(`innerHTML`), so links, buttons, `<img>` and other web components (e.g. `<bs-badge>`) all render.\n\n**When set it renders every cell, not just the special ones** -- return the plain value for\nordinary columns too. And **the returned string is not escaped or sanitized** (same trust\nmodel as React's `dangerouslySetInnerHTML`): escape any untrusted row data you put in it, plain\ncolumns included, or it will be interpreted as HTML. Without a `cellRenderer`, values are\nrendered as escaped text.\n\nThe markup is static HTML -- attach behavior yourself, e.g. one `click` listener on the table\nthat reads `event.composedPath()[0]` (events from inside the shadow root are retargeted to the\ntable itself).\n\nFunction props are JS-property-only, same as array props -- there is no attribute equivalent.\nFalls back to the raw cell value (as escaped text) when unset."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/bs-data-table/bs-data-table.stories.js

@@ -44,11 +44,18 @@ export const WithCustomCellRenderer = {
         const table = document.createElement('bs-data-table');
         table.columns = [...columns, { key: 'actions', label: 'Actions' }];
         table.rows = rows;
+        // cellRenderer renders EVERY cell and its output is not escaped, so plain columns are escaped
+        // here too -- copying `String(row[column.key])` unescaped would make untrusted row data HTML.
+        const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
         table.cellRenderer = (row, column) => {
             if (column.key === 'actions') {
                 return `<button type="button">Edit</button>`;
             }
-            return String(row[column.key] ?? '');
+            if (column.key === 'status') {
+                // Rich content: a web component in the cell.
+                return `<bs-badge variant="${row.status === 'Active' ? 'success' : 'neutral'}">${escapeHtml(row.status)}</bs-badge>`;
+            }
+            return escapeHtml(row[column.key]);
         };
         return table;
     },