@brandsync/wc 1.6.0 → 1.8.0

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-chatbot-response-action/bs-chatbot-response-action.js

@@ -105,7 +105,7 @@ export class BsChatbotResponseAction {
     };
     render() {
         const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
-        return (h("div", { key: '111e7a42e8fc38d4fd5a816cdfded9eaaa854411', class: "bs-chatbot-response-action" }, h("button", { key: 'def8fd139a1e29cf5410c00227e0f3daa713fe71', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '78e5c9b817fe4828e2a52cd49474d54400a8e930', name: "like-icon" }, h(ThumbsUpIcon, { key: 'e74d4efb615839af2a1b5b1a0fe739c37f0830ed' }))), h("button", { key: '19a4569619e2f9bcc4058622f5534d5aff1be914', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: '0f6fab436dc26c3cd019934cbb99073c0cd2176f', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '000bae3349daf25dd7f2af3b0848461158452e58' }))), h("button", { key: '92e013b636bf8d6a0d316b998e01acb3039f283a', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: 'd575f671a480dae59bbefb0a255209a537b24f4d', name: "copy-icon" }, h(CopyIcon, { key: 'becca3443cdd1a6245d84b806f9186da8756bef8' }))), h("button", { key: '3e48fb0dbef6c181fbc1e4800f079786f38f7294', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '2bf713515b8503186d4d17e47ad0a7baf424be00', name: "regenerate-icon" }, h(RegenerateIcon, { key: '86f25451600b70f5d8e7148f5ee46c9c8fda4674' }))), h("div", { key: '3815f620d0ee123aeb23e99d664d40aae2168616', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: 'f53c9236453217611a1b3b3ee195ad9e5d5079e0', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: 'ac264f44c88115a8dc5d52a5c149ac0981ee0177', name: "menu-icon" }, h(MenuIcon, { key: '66c03b5a3cf26d1f8aebbe93d10ea90ed61277bf' }))), this.menuOpen && (h("div", { key: '004fd6280505e156ff0353714e4d36e3b7273d5e', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '33e54635fe65fe4fb52a0bbd642c822e5a50e9a6', name: "menu" })))), hasSources && (h("button", { key: 'da4095a96f3920f2723f1b84be98f8b31ba55f5a', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'a7c526dcbfb1037c66830602b0457db0d3f160a1', name: "sources-icon" }, h(SourcesIcon, { key: '4e76ba5f77ddf3ad438f4b537e06caddb0adf613' })), h("span", { key: 'c648b364219f65b63c2abd325a4112c581906b31', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
+        return (h("div", { key: 'cbd257d7e8028f159bd8034217c3996d44cdf8ff', class: "bs-chatbot-response-action" }, h("button", { key: 'b1727aa3c799a5f7847784bbb5bee5abb9021800', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: 'a39db9d1411f5923415f2f4576d715b7d44f5746', name: "like-icon" }, h(ThumbsUpIcon, { key: 'ad66ffbe937780037b25842da79ed34cede4fb8a' }))), h("button", { key: 'dd3fff82e054acba64d469aa939fe5d9e948ee86', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: '4d63753fca15dd1c9def17dd723fdbe549e286ea', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '5985ecd4c1174a1d853dcafd27662eb0065f6a2f' }))), h("button", { key: '9a42c214ad271dd393deb319ae15815297970296', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: '9b59e4e174e146e933683cb1e8f5b8887e17171b', name: "copy-icon" }, h(CopyIcon, { key: '73ed83f0056a5acb93ca731a69f5d0d320e2806c' }))), h("button", { key: '435980b95cfd5bd5c0c082520c9d2507357a481f', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '1f536807ea55e6332bb4c98314e747f1ff775ea4', name: "regenerate-icon" }, h(RegenerateIcon, { key: '461ce99ba4bb70ca07810a5883e00d96f6ff3e6c' }))), h("div", { key: '086174d1bc011ad39bf100ffb0ce39b7815c50e2', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: 'd1d52de0d6becf762e7f754f65cbd4430de168aa', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: 'e70c2b467bb50751afd3b84874b653d1124fc3e5', name: "menu-icon" }, h(MenuIcon, { key: 'b73c887976b2e143638d61c0b9ea41ebb2e388bd' }))), this.menuOpen && (h("div", { key: '18891a0da434a7f50b6050806c2953e5e5e21484', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '288b3280f09def47f5065b4e85e91142ddd3d2a6', name: "menu" })))), hasSources && (h("button", { key: 'cfa661c9c2096975d250aa3a0b28b36ff3a397a1', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'a7b610479f2efaded9714c2ad75cd1fd168df55b', name: "sources-icon" }, h(SourcesIcon, { key: '49b12b3ab6011131147909158ec88518a86ce706' })), h("span", { key: 'f063468b3e386f1b88d41a668ac470a601322b51', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
     }
     static get is() { return "bs-chatbot-response-action"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.js

@@ -57,7 +57,7 @@ export class BsChatbotSourcesDrawer {
     };
     render() {
         const displayCount = this.count ?? this.slottedCount;
-        return (h("div", { key: '42d5d4160e8c2cac61d124f9359d2f6996658ce1', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '81d4a4bef6bdc625d7bcfe57f4338fc97c0403ca', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: 'db44bbebef2b2c59ae1a6755d6dd68ea55b81196', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '573c29a65b188805621f8eb35d2489987d05451b', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '24a009a10e789ea33ad2603dad89ed590564e92b', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '1ba25a50ca7a7910fcac94ff10eeb1a694e2ddd5', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: '7ccaf79b7d19ecf3f6871787a75110304d1a5237', name: "collapse-icon" }, h(CaretRightIcon, { key: 'fde18a59c4e7a9436fe4b1044ae7272eb7ee4d5a' })))), h("div", { key: 'aa70054cb4da766d19f4c646a71bcb4e0d2b4195', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'd2bef9a375eccda347f9e26942bb4f33a689933f', onSlotchange: this.onSlotchange }))));
+        return (h("div", { key: '124930cad859a46032214d2025a6d0dc0601bd7e', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'edac48bbd2236fc8382595d0bb3fab2029d5471b', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '67c816b8604c8a7bdba2939162d9296f4213d8d0', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '998b580f25800c4d25a288c60d78313ebb18ba96', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '7f04669f0c8a4df3383f4d37502620cee268249e', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '3e672753a8eb658b5f63878411f4e98b8f0e9aeb', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: '032e644f385e92882837386e02fcf04f4d4f7818', name: "collapse-icon" }, h(CaretRightIcon, { key: 'eed919d8fac971c37c45dbee46c3395e36dbd436' })))), h("div", { key: '7901e0b8eb2c904a779735dc613040bab1cec881', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '511ac408aae665461103da7b88664636a773f043', onSlotchange: this.onSlotchange }))));
     }
     static get is() { return "bs-chatbot-sources-drawer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class BsChatbotSuggestionButton {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: 'fe0298f0e80e18da93468635ab1263a243700fe9', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '0fcc15a4165b0e2c7b990adbb061d2fb54378c82' })));
+        return (h("button", { key: 'ae54b5a19bb4ad4d215c34df56018f49fd1907a9', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '950eefcbff22f6f09547b805bb72b6bc7599d060' })));
     }
     static get is() { return "bs-chatbot-suggestion-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,7 +33,7 @@ export class BsCheckboxSkeleton {
      * (unusual) default `bs-checkbox` itself uses. */
     size = 'lg';
     render() {
-        return (h("span", { key: '50a436a6ede8ae40310191029037b3be08981fba', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": "Loading" }, h("span", { key: 'f76fc56bb1e6fea2bd6a4fc41c336930c2b23044', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: 'd80b2ac1c5b9eba7a8b150a0e344909a46b18c39', part: "label", class: "bs-checkbox-skeleton__label" })));
+        return (h("span", { key: '8797658f07231a6da75540109d31a0046e87391e', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": "Loading" }, h("span", { key: '5476c7e0b6fbfa41c2b9aabe64452665841c516d', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: 'f0d9bf8dee42ce498f8f627ed5a536e0ec8029c4', part: "label", class: "bs-checkbox-skeleton__label" })));
     }
     static get is() { return "bs-checkbox-skeleton"; }
     static get encapsulation() { return "shadow"; }

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: '0c4ef7d5dc0c10a76382a25f503e50a9698f74b0', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: '1bcbe7899e41e5c4bb1a09602eec0f852ae4a2e7', 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: 'e7f5d9b4374aa6c718a76353a6671878564d366e', part: "box", class: boxClasses }, showIcon && (h("svg", { key: 'c73163dcba81418174924221259b1ab37cb0a2e8', 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: '3511affcb7f222032c726591a6f35c15cbcb3225', part: "label", class: "bs-checkbox__label" }, h("slot", { key: '1103d622b8d1295d9e82a63660cb6ab0939c6edf' }))));
+        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-filter/bs-chip-filter.js

@@ -70,7 +70,7 @@ export class BsChipFilter {
         // label-only edge gets more -- except when NEITHER edge has a glyph, where both edges use a
         // third, larger value rather than the label-only one (see bs-chip-filter.css's own comment).
         const paddingVariant = this.hasIcon && this.dropdown ? 'icon-dropdown' : this.hasIcon ? 'icon-only' : this.dropdown ? 'dropdown-only' : 'text-only';
-        return (h("button", { key: '4cc3cc573ec2a0f742a5ba5e76a8f5dee7eb0997', type: "button", class: `bs-chip-filter bs-chip-filter--${this.size} bs-chip-filter--${paddingVariant} ${this.selected ? 'bs-chip-filter--selected' : ''}`, disabled: this.disabled, "aria-pressed": String(this.selected), "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '6767cb949257461abde1872ef35d5551fe86017b', part: "icon", class: `bs-chip-filter__icon ${this.hasIcon ? 'bs-chip-filter__icon--visible' : ''}` }, h("slot", { key: 'a106df348c1078bbd73c062d6217d3467327664a', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'bf1007a48f1bdfa2ddcf5df9eddee84b276f3494', part: "label", class: "bs-chip-filter__label" }, h("slot", { key: '1f23a2853946b770f76683dae314263cc4f3c5b2' })), this.dropdown && (h("span", { key: '483fb2cabd9dfc930fa44ee626a4532f5fec4cc3', part: "caret", class: "bs-chip-filter__caret", "aria-hidden": "true" }, h(ChevronDownIcon, { key: '8197912443813d3d3e7c705e303301a993bb2ce1' })))));
+        return (h("button", { key: 'c1b7395764984baadd0d32d5bd6a3d8d61cb637a', type: "button", class: `bs-chip-filter bs-chip-filter--${this.size} bs-chip-filter--${paddingVariant} ${this.selected ? 'bs-chip-filter--selected' : ''}`, disabled: this.disabled, "aria-pressed": String(this.selected), "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'db74ff2a992268bb95564dc1631e54d00208255f', part: "icon", class: `bs-chip-filter__icon ${this.hasIcon ? 'bs-chip-filter__icon--visible' : ''}` }, h("slot", { key: '9319387acc35131d0555f9ad84c1f733034920d7', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '06291c8712d77d43c3c823e4b90d99218618db35', part: "label", class: "bs-chip-filter__label" }, h("slot", { key: '3c72fcc1085239ba9c45ee6e89f5b8e8b4cc0ce8' })), this.dropdown && (h("span", { key: 'd2efca03ed06d2341aec986cca2c0d27bdce5a75', part: "caret", class: "bs-chip-filter__caret", "aria-hidden": "true" }, h(ChevronDownIcon, { key: '8bb9383201632e567f662909559702fcf391790e' })))));
     }
     static get is() { return "bs-chip-filter"; }
     static get encapsulation() { return "shadow"; }

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-informative/bs-chip-informative.js

@@ -44,7 +44,7 @@ export class BsChipInformative {
     };
     render() {
         const paddingVariant = this.hasIcon ? 'icon' : 'text';
-        return (h(Host, { key: '099676c8f874c17836d65797d10683fa1184043b', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}` }, h("span", { key: 'ff570bf489c3a8ea8350bc550e720bfcdc5d4bdf', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: '170e80a2665111b2a6212088b58a7c2c1008110a', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd87cd059d67b8d56d04bc7e9f39d3ab497e49f8a', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: '983e6f32115957222a078f91683bc5f59aefe185' }))));
+        return (h(Host, { key: 'ee5706f8c040b01f97e44b9dba4d74a3b023005c', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}` }, h("span", { key: '611cc7bec3b22cc2e7de25fc8aa49e8d4eca3cba', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: '5945478d567c7b6a6e4ff602c2edd6465d3b7778', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '7e78fb0f2e5cfc2d232aa04f0c9edf94044f8eca', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: 'fcec1018222e0da3f0adc6da13e0699c0bad764b' }))));
     }
     static get is() { return "bs-chip-informative"; }
     static get encapsulation() { return "shadow"; }

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-chip/bs-chip-input/bs-chip-input.js

@@ -77,7 +77,7 @@ export class BsChipInput {
     };
     render() {
         const paddingVariant = this.hasIcon ? 'icon' : 'text';
-        return (h(Host, { key: '3e0b49c24f5f2c696c4b28fbdddf3abb5cbb54f4', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: '3bb4e5e2cdea9cb828d2f3efe0a1f7e6e199ea13', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("span", { key: 'a8845467b470c0f0bb1f48a588f6b10c34c48aea', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: '80f2daa48102e47dff6a1c37f36058f1a7825d0f', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'abc1a83bac760ac9cc993cfa46e08b67b543c7e0', part: "label", class: "bs-chip-input__label" }, h("slot", { key: 'cf2914c6ec7096fb4c6182f22457790b6b581da9', onSlotchange: this.onLabelSlotchange }))), h("button", { key: '2db0595805b4c1faf61f8c15c8bede6d5d59d6ae', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `Remove ${this.labelText}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: '24df652ec4dd9ac7dcdc203d5fd1584e8dd5556c' }))));
+        return (h(Host, { key: 'bb8adc7ac62df562155d169a119d0bf3100f4c9f', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: '92a509d98f93873738bed6db0fe0d5dc5bb9a7e4', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("span", { key: '179d8713dd8be5a8340848eddb1de24ce7561d09', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: '0b47b10606ef75c91b5374dc0032772993419ede', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'c2b678ecd9863d53c5ab52bd257122f298aafa62', part: "label", class: "bs-chip-input__label" }, h("slot", { key: '806fb8ea8e284a80d5faeef4905d1758c66f3ef0', onSlotchange: this.onLabelSlotchange }))), h("button", { key: 'a61df73d4a372dd0dce8b045feb6180853c209d2', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `Remove ${this.labelText}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: '6e14762d31caae9473603449dd47a158859d28f6' }))));
     }
     static get is() { return "bs-chip-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -206,7 +206,7 @@ export class BsComposer {
         const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
         const disabled = this.state === 'disabled';
         const recording = this.state === 'recording';
-        return (h("div", { key: '80b15558a6c64dad187e5f83ff969f0ce738c959', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: 'e29e99d27f37a1ed12d5a648615fe904aab3d850', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '3b83ae56fceeed1221beab79a739ee59cb35db71', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: 'aa087015ad3a0ecec2f5fd7142633e12a00fc2cc', class: "bs-composer__text-row" }, h("textarea", { key: '695417d0ea46dd9016a27f967bb1ac4cff28531e', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: '3087c098baef6f6a5886b23e2c6e54b71dce6923', class: "bs-composer__controls-row" }, h("button", { key: '75c132d161e468a999c72a96c88356473e760650', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'c7ff05366636234093b94a3e6f8980772444c546' })), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), h("button", { key: '5aadfaad74e8fa0c612be85a79a8ecaff851f06b', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: '1c7922626005c71fdef12adb12d7413c983df7d7', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: 'd38d63ecf9dd3c7ce7df06cec854ff5ae92b1077', name: "actions-end" }))));
+        return (h("div", { key: '8313dc19fa583114e96203cb07be9ac114afe6f2', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '2aaef774ce964d33342bce9126c4537dd8c3f844', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'fd673d9316b78516f3b828585a264005306c42f2', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: 'b3dbfc51f3451ae573443865487b6cd5cf20edb3', class: "bs-composer__text-row" }, h("textarea", { key: '10318ae3174f0491ead324fec41a12cc5135407a', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: 'e298d4239e7868c97599c430397e8dedde4926c2', class: "bs-composer__controls-row" }, h("button", { key: 'a39c4810329fe7e198645e5e0ab29003916dd6d8', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: '9d58e6a54c91eb6d2c658ee203eb6ae37eeabea5' })), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), h("button", { key: '21f7f81e1273b240dc0bb35f96dac43976d76672', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: '76f9d399d49c5f7248770a5a2845a2ab8b2e26e1', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '4de2116117e03382f89c1a409fcb2ecb38aa89ff', name: "actions-end" }))));
     }
     static get is() { return "bs-composer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.js

@@ -106,7 +106,7 @@ export class BsComposerStatusBanner {
         return this.type === 'error' || this.type === 'warning' ? h(WarningIcon, null) : h(ClockIcon, null);
     }
     render() {
-        return (h("div", { key: '237f3ec194ddb9057b1b0773e4a8062a9e58f457', role: this.roleForType(), class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '6a1fadb9f08f2ce383216a750743321383528649', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '54dc45c13ab939249e66754389323d857d191bb5', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '023ee815d57914a9f46b39b5253229e3a89c1f2d', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '3bf23bc657922338767dcc63da4236469ff2c3f0', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: 'efb2fcc8eb96388b395275c39021fa718f08ae2b', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: 'f97e8fba154e5bcc7e9778b2f31f136ca81a7d94', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: 'eb56b6b6a2fddac3e13eac6db129f0da3572e8ec' })))));
+        return (h("div", { key: '9e0569099d74f708f475b502625a2fd000cbbbf5', role: this.roleForType(), class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '8d6de7446b8bb53bc45ab9d4f110963425559f50', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '6f9964755ae030e577b356290ad2d972e024ace1', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '56d50ba748d0ad4cbcbcd73a6f4b8cb1a50613b8', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: 'fed8249da75a688b2f125e5f9ca1787dc885b891', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '48eb50ca73f76bfd404bbd5b2a7bce3ced2da7ac', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: 'f644669b00b8077b36ba9eb88ffffaba0e675fb4', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: '3b42ae94449658eae8e9af5617abc3268c215325' })))));
     }
     static get is() { return "bs-composer-status-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,11 +71,11 @@ export class BsDataTable {
         }
     }
     render() {
-        return (h("table", { key: '0b894a3cac62202447a21d4dd982236ef60b4ed0', part: "table", class: "bs-data-table" }, h("thead", { key: '9af94643a3cd4702a7b6fcbe2f713a3fea6773a9', part: "head" }, h("tr", { key: '3f5680cea9daeecf078a11d19f7a77f3e4de3145' }, this.selectable && (h("th", { key: '053da4081fdd79727c5cee13f11f725e4b92e1cb', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'd45b4e81976dca3fc114c9685deb53e0f27ec8f5', 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: '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 => {
             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: '8d3183f03ef2a4f39e8f4f8cdad66c8c57df5dca', 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: '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 ? (
         // 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.

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-file-upload/bs-file-upload.cmp.test.js

@@ -0,0 +1,119 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+const file = (name, type) => new File(['x'], name, { type });
+const dt = (...files) => {
+    const d = new DataTransfer();
+    files.forEach(f => d.items.add(f));
+    return d;
+};
+const drop = (el, ...files) => el.dispatchEvent(new DragEvent('drop', { dataTransfer: dt(...files), bubbles: true, cancelable: true, composed: true }));
+const zone = (root) => root.shadowRoot.querySelector('[part="dropzone"]');
+const input = (root) => root.shadowRoot.querySelector('input[type="file"]');
+describe('bs-file-upload', () => {
+    it('has no axe-core violations (both directions)', async () => {
+        for (const direction of ['horizontal', 'vertical']) {
+            const { root } = await render(h("bs-file-upload", { direction: direction, heading: "Upload documents", description: "PDF, up to 8MB" }));
+            await runAxeCheck(root);
+        }
+    });
+    it('exposes its documented shadow parts', async () => {
+        const { root } = await render(h("bs-file-upload", { heading: "H", description: "D" }));
+        assertShadowParts(root.shadowRoot, ['dropzone', 'icon', 'heading', 'description', 'browse']);
+    });
+    it('renders the heading, description and the Browse file button', async () => {
+        const { root } = await render(h("bs-file-upload", { heading: "Upload", description: "Guidelines" }));
+        expect(root.shadowRoot.querySelector('[part="heading"]').textContent).toBe('Upload');
+        expect(root.shadowRoot.querySelector('[part="description"]').textContent).toBe('Guidelines');
+        expect(root.shadowRoot.querySelector('[part="browse"]').textContent).toBe('Browse file');
+    });
+    it('buttonLabel overrides the browse button text', async () => {
+        const { root } = await render(h("bs-file-upload", { buttonLabel: "V\u00E6lg fil" }));
+        expect(root.shadowRoot.querySelector('[part="browse"]').textContent).toBe('Vælg fil');
+    });
+    it('pressing Browse opens the native file picker', async () => {
+        const { root } = await render(h("bs-file-upload", null));
+        let clicked = 0;
+        input(root).addEventListener('click', () => clicked++);
+        root.shadowRoot.querySelector('[part="browse"]').shadowRoot.querySelector('button').click();
+        expect(clicked).toBe(1);
+    });
+    it('picking files through the input emits bsFilesSelect', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-file-upload", { multiple: true }));
+        const spy = spyOnEvent('bsFilesSelect');
+        input(root).files = dt(file('a.pdf', 'application/pdf'), file('b.png', 'image/png')).files;
+        input(root).dispatchEvent(new Event('change', { bubbles: true }));
+        await waitForChanges();
+        expect(spy).toHaveReceivedEventTimes(1);
+        expect(spy.lastEvent.detail.map((f) => f.name)).toEqual(['a.pdf', 'b.png']);
+    });
+    it('dropping files emits bsFilesSelect', async () => {
+        const { root, spyOnEvent } = await render(h("bs-file-upload", { multiple: true }));
+        const spy = spyOnEvent('bsFilesSelect');
+        drop(zone(root), file('a.pdf', 'application/pdf'));
+        expect(spy.lastEvent.detail.map((f) => f.name)).toEqual(['a.pdf']);
+    });
+    it('without multiple, only the first file is taken and the rest are rejected', async () => {
+        const { root, spyOnEvent } = await render(h("bs-file-upload", null));
+        const select = spyOnEvent('bsFilesSelect');
+        const reject = spyOnEvent('bsFilesReject');
+        drop(zone(root), file('a.pdf', 'application/pdf'), file('b.pdf', 'application/pdf'));
+        expect(select.lastEvent.detail.map((f) => f.name)).toEqual(['a.pdf']);
+        expect(reject.lastEvent.detail.map((f) => f.name)).toEqual(['b.pdf']);
+    });
+    it('accept filters dropped files (extensions, MIME types and wildcards) and rejects the rest', async () => {
+        const { root, spyOnEvent } = await render(h("bs-file-upload", { multiple: true, accept: ".pdf, image/*, text/csv" }));
+        const select = spyOnEvent('bsFilesSelect');
+        const reject = spyOnEvent('bsFilesReject');
+        drop(zone(root), file('a.PDF', ''), file('b.png', 'image/png'), file('c.csv', 'text/csv'), file('d.exe', 'application/octet-stream'));
+        expect(select.lastEvent.detail.map((f) => f.name)).toEqual(['a.PDF', 'b.png', 'c.csv']);
+        expect(reject.lastEvent.detail.map((f) => f.name)).toEqual(['d.exe']);
+    });
+    it('passes accept/multiple to the native input', async () => {
+        const { root } = await render(h("bs-file-upload", { accept: ".pdf", multiple: true }));
+        expect(input(root).accept).toBe('.pdf');
+        expect(input(root).multiple).toBe(true);
+    });
+    it('shows the Drop state while dragging over and clears it on drop and on leaving', async () => {
+        const { root, waitForChanges } = await render(h("bs-file-upload", null));
+        const host = root;
+        zone(root).dispatchEvent(new DragEvent('dragover', { bubbles: true, cancelable: true, dataTransfer: dt() }));
+        await waitForChanges();
+        expect(host.dragging).toBe(true);
+        expect(zone(root)).toHaveClass('bs-file-upload--dragging');
+        zone(root).dispatchEvent(new DragEvent('dragleave', { bubbles: true, relatedTarget: document.body }));
+        await waitForChanges();
+        expect(host.dragging).toBe(false);
+        zone(root).dispatchEvent(new DragEvent('dragover', { bubbles: true, cancelable: true, dataTransfer: dt() }));
+        drop(zone(root), file('a.pdf', 'application/pdf'));
+        await waitForChanges();
+        expect(host.dragging).toBe(false);
+    });
+    it('dragleave between its own children does not clear the Drop state', async () => {
+        const { root, waitForChanges } = await render(h("bs-file-upload", { heading: "H" }));
+        const host = root;
+        zone(root).dispatchEvent(new DragEvent('dragover', { bubbles: true, cancelable: true, dataTransfer: dt() }));
+        zone(root).dispatchEvent(new DragEvent('dragleave', { bubbles: true, relatedTarget: root.shadowRoot.querySelector('[part="heading"]') }));
+        await waitForChanges();
+        expect(host.dragging).toBe(true);
+    });
+    it('disabled: ignores drops, never enters the Drop state, and disables the button and input', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-file-upload", { disabled: true }));
+        const spy = spyOnEvent('bsFilesSelect');
+        zone(root).dispatchEvent(new DragEvent('dragover', { bubbles: true, cancelable: true, dataTransfer: dt() }));
+        drop(zone(root), file('a.pdf', 'application/pdf'));
+        await waitForChanges();
+        expect(spy).not.toHaveReceivedEvent();
+        expect(root.dragging).toBe(false);
+        expect(input(root).disabled).toBe(true);
+        expect(root.shadowRoot.querySelector('[part="browse"]').disabled).toBe(true);
+    });
+    it('dragging can be set from outside to show the Drop state statically', async () => {
+        const { root } = await render(h("bs-file-upload", { dragging: true }));
+        expect(zone(root)).toHaveClass('bs-file-upload--dragging');
+    });
+    it('the icon slot replaces the default icon', async () => {
+        const { root } = await render(h("bs-file-upload", null, h("span", { slot: "icon", id: "custom" }, "*")));
+        const slot = root.shadowRoot.querySelector('slot[name="icon"]');
+        expect(slot.assignedElements()[0].id).toBe('custom');
+    });
+});