@brandsync/wc 1.21.0 → 1.22.1

package/dist/collection/components/bs-compact-menu-block/bs-compact-menu-block.js

@@ -27,7 +27,7 @@ export class BsCompactMenuBlock {
     name;
     render() {
         const common = { part: 'container', class: 'bs-compact-menu-block' };
-        return (h("button", { key: 'e97588e286f39cdd4d61e8bee3ec91ae192242c2', ...common, type: "button" }, this.name));
+        return (h("button", { key: '052b33458aa66b3a56bef4f35bb26c93d627c881', ...common, type: "button" }, this.name));
     }
     static get is() { return "bs-compact-menu-block"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-compact-menu-block/bs-compact-menu-block.stories.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-compact-menu-block',
+    title: 'Components/Menus and overlays/bs-compact-menu-block',
     parameters: { layout: 'padded', docs: { description: { component: componentDescription('bs-compact-menu-block') } } },
     argTypes: { name: { control: 'text' } },
     args: { name: 'Payments' },

package/dist/collection/components/bs-company-switcher/bs-company-switcher.js

@@ -234,10 +234,10 @@ export class BsCompanySwitcher {
         const empty = !!this.q && groups.length === 0;
         const listId = `${this.id}-listbox`;
         const total = groups.reduce((n, g) => n + g.items.length, 0);
-        return (h("bs-popover", { key: '48e99f7fe5b6f6fbb7d70f30eb11d929e3e93ae6', class: "bs-company-switcher", open: this.open, placement: "bottom-start", onBsOpenChange: this.onPopoverOpenChange }, this.renderTrigger(), h("bs-card", { key: 'b14bd8f8c3e0666c4526b3ab7bb45be674def1ee', part: "panel", class: "bs-company-switcher__panel", surface: "base" }, h("div", { key: '0a1874d70f6702be9a159415597a58ed59cefac4', class: "bs-company-switcher__search", onMouseDown: (ev) => ev.preventDefault() }, h("div", { key: 'd1d3cd795aec21ccf0e2acb2ac05fbf51dc49a73', part: "search", role: "combobox", "aria-label": this.searchPlaceholder, "aria-expanded": groups.length ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": groups.length ? listId : undefined, "aria-activedescendant": this.activeId ?? undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: '84868f1a5641c314d5777dea0a0edc6e2d723328', ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput }))), groups.length > 0 && (h("div", { key: 'fe8bc69ac3f65664b33dbe2c3ee2700c96b1703b', id: listId, part: "list", class: "bs-company-switcher__list", role: "listbox", "aria-label": this.listLabel, onMouseDown: (ev) => ev.preventDefault(), onMouseLeave: () => (this.activeId = null) }, groups.map(g => {
+        return (h("bs-popover", { key: 'd11bbc30320f1149597d384efa16fe236289f65e', class: "bs-company-switcher", open: this.open, placement: "bottom-start", onBsOpenChange: this.onPopoverOpenChange }, this.renderTrigger(), h("bs-card", { key: 'e8863bccb0870f151f337870dc33993ac4f3debe', part: "panel", class: "bs-company-switcher__panel", surface: "base" }, h("div", { key: '247c8fc7be7beed6f80a241ee336a17d7ca026a8', class: "bs-company-switcher__search", onMouseDown: (ev) => ev.preventDefault() }, h("div", { key: 'c5592e600c4d9c641314c2fdbf5f5b0b2364c173', part: "search", role: "combobox", "aria-label": this.searchPlaceholder, "aria-expanded": groups.length ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": groups.length ? listId : undefined, "aria-activedescendant": this.activeId ?? undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: '0b5c505a6774c559a395ea36aa0cf6a4b95cbdfb', ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput }))), groups.length > 0 && (h("div", { key: 'e9d041450109a8a7a15a67d06c3500845edaf277', id: listId, part: "list", class: "bs-company-switcher__list", role: "listbox", "aria-label": this.listLabel, onMouseDown: (ev) => ev.preventDefault(), onMouseLeave: () => (this.activeId = null) }, groups.map(g => {
             const hid = `${this.id}-h-${g.key}`;
             return (h("div", { part: "group", class: "bs-company-switcher__group", role: "group", "aria-labelledby": hid }, h("div", { part: "group-header", id: hid, class: "bs-company-switcher__group-header" }, g.header), g.items.map(c => this.renderRow(c))));
-        }))), empty && (h("bs-empty-state", { key: 'ff3af7847fa2b6355ef464b03d7e2dae9af74e15', part: "empty", class: "bs-company-switcher__empty", heading: this.emptyHeading.replace('{query}', this.query.trim()), description: this.emptyDescription }, h("svg", { key: '43ee6aed173cf88d57bbfd0e92f724d782b15963', slot: "icon", ...svgProps }, h("circle", { key: '4834a47d151c62739bfd2019a4b761b49995d422', cx: "11", cy: "11", r: "7" }), h("path", { key: 'aefafbcdd557cfaf2493558a59a380090b6edc08', d: "m20 20-3.5-3.5" })))), h("bs-divider", { key: '08a39c4e8e5dbaf731579afd4d1e611fe30c361b', class: "bs-company-switcher__divider", decorative: true }), h("div", { key: 'e76be7acc1cde67c5dd3fb59a2033ec3a4d42674', part: "footer", class: "bs-company-switcher__footer" }, h("bs-button", { key: 'a05c921783996a3762635a25f3861ed55692e7b4', variant: "subtle", size: "sm", onClick: () => this.bsManageCompanies.emit() }, h("svg", { key: 'c402e76faa03fb68d303ce0e9dd1eb21c439d66f', slot: "icon", ...svgProps }, h("circle", { key: '27a640d8953fd9541d304c53ead6089a1f433886', cx: "12", cy: "12", r: "3" }), h("path", { key: 'd791ff4ac79664dfd91da361b07e03975e697d09', d: "M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" })), this.manageLabel), h("bs-button", { key: '125ced539bfc749c8bceaa5f3ed1c7dece3a5bde', variant: "subtle", size: "sm", onClick: () => this.bsAddCompanies.emit() }, h("svg", { key: '57af672d2154bcec2698f5885fc1db529d36e83c', slot: "icon", ...svgProps }, h("path", { key: '26ac9276c6a4af2abcb927b29e938ea4c3b93a02', d: "M12 5v14M5 12h14" })), this.addLabel)), h("span", { key: '474d0275c005bdf8c9436eaf8962ee1681c70f6c', class: "bs-company-switcher__live", "aria-live": "polite" }, this.open && this.q ? (empty ? this.emptyHeading.replace('{query}', this.query.trim()) : `${total} ${total === 1 ? this.matchLabel : this.matchesLabel}`) : ''))));
+        }))), empty && (h("bs-empty-state", { key: '96d9854ad53c58eaa152405bbd9302d18446dfd8', part: "empty", class: "bs-company-switcher__empty", heading: this.emptyHeading.replace('{query}', this.query.trim()), description: this.emptyDescription }, h("svg", { key: 'fe88ba53de8a745f83abfb6b8dfae1e76693c178', slot: "icon", ...svgProps }, h("circle", { key: 'a734e837732ec01b47faebe30adf04260d546eb9', cx: "11", cy: "11", r: "7" }), h("path", { key: 'a14d03774137f2cca3e033ca032602722616559a', d: "m20 20-3.5-3.5" })))), h("bs-divider", { key: '19426bcf9148145aa584be5cac0c290fccc3704d', class: "bs-company-switcher__divider", decorative: true }), h("div", { key: 'bfbe49c7a1ef1cfbd827908b155b3f63e1848738', part: "footer", class: "bs-company-switcher__footer" }, h("bs-button", { key: 'f8b581a0845ced7a5999d4d03a7b64b31acb8a89', variant: "subtle", size: "sm", onClick: () => this.bsManageCompanies.emit() }, h("svg", { key: '4b70940075e40182ae8da27259e6c0ff6b7cdf23', slot: "icon", ...svgProps }, h("circle", { key: '52d07fdf30c0655385cbbd4b30b1393b6135baaa', cx: "12", cy: "12", r: "3" }), h("path", { key: 'be2c017be4c51b5b87470a5f5ca41828d2a11e04', d: "M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" })), this.manageLabel), h("bs-button", { key: '57a62b20be2320442187cf151ed99d981906578b', variant: "subtle", size: "sm", onClick: () => this.bsAddCompanies.emit() }, h("svg", { key: '91d8bba01ddcce3100f0ceadf567424abed233c3', slot: "icon", ...svgProps }, h("path", { key: 'af95aa039f2e42e35468cd71797623623aae39af', d: "M12 5v14M5 12h14" })), this.addLabel)), h("span", { key: '68ee68de092a3c42613e4127136c42249dcedc5a', class: "bs-company-switcher__live", "aria-live": "polite" }, this.open && this.q ? (empty ? this.emptyHeading.replace('{query}', this.query.trim()) : `${total} ${total === 1 ? this.matchLabel : this.matchesLabel}`) : ''))));
     }
     static get is() { return "bs-company-switcher"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-company-switcher/bs-company-switcher.stories.js

@@ -12,7 +12,7 @@ export const COMPANIES = [
 export const RECENT_IDS = ['fjord', 'aurora'];
 const meta = {
     excludeStories: /^[A-Z0-9_]+$/,
-    title: 'Components/bs-company-switcher',
+    title: 'Components/App and onboarding/bs-company-switcher',
     parameters: { layout: 'padded', docs: { description: { component: componentDescription('bs-company-switcher') } } },
     argTypes: {
         currentId: { control: 'select', options: COMPANIES.map(c => c.id) },

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

@@ -234,7 +234,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: '7815de5b26e3b9c1afeb413378f1ead5b6f37353', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '8c7ecc7606e590cfc2b2c7750d7437610b1c454d', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '56fe3b213e36289e7f9a0738824e19396dd552c5', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '3a1bd77a1bba71464807832e9746ea40f09d3766', class: "bs-composer__text-row" }, h("textarea", { key: '133470cf3a81530602439f5d6d50969c47da8be2', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, maxLength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: '0dd2e0ef0a89f300910a422c6e4cdcb2e77034b5', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: '679d8b7b4d7746478f3e72cdab7ebf4e01971379', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: '10823628845def9ee1012f3e03835ffd480d1010' }))), 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" })), !this.hideMic && (h("button", { key: 'dcea5fdc083162c99d0deb6b28e4d79ddf27729e', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? this.stopRecordingLabel : this.micLabel, disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null))), h("button", { key: '82d6694869eef61d66e92d0eb1b183c5ed086ec0', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, "aria-busy": this.loading && this.state === 'idle' ? 'true' : undefined, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '9691f66fd87500bce4f9abc9da7d3b27994cf47f', name: "actions-end" }))));
+        return (h("div", { key: '24d3a9aa9ab3687c12b784bc41b854cb4323b219', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '74fe953b1e7b35237a92b54ec91941856351a563', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '4864037635968b614b226fa9fd01ad5c7c32979a', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: 'b6d8a813f35063a9e34720239be9be3ffa0652fa', class: "bs-composer__text-row" }, h("textarea", { key: '1400425dad745b7b03a7d0f5744fd52c404f0018', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, maxLength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: '3b9c62eeef6bf72ef7e26832ce25d85646d67f2b', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: '4b649a2a688e1029765338871c5741f27c0398f3', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: 'cad329db88a489ce140206540524ab28d7670a0a' }))), 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" })), !this.hideMic && (h("button", { key: '11e07294f1d57d9acc35533c317f5978297728a2', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? this.stopRecordingLabel : this.micLabel, disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null))), h("button", { key: '5ee8bd6bfdb9c6fbdf4ed36fb0a4b6ac079f9cb1', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, "aria-busy": this.loading && this.state === 'idle' ? 'true' : undefined, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '35909e0be6e5956652cb5847448136d0b3e5907b', 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

@@ -113,7 +113,7 @@ export class BsComposerStatusBanner {
         return this.type === 'error' || this.type === 'warning' ? h(WarningIcon, null) : h(ClockIcon, null);
     }
     render() {
-        return (h("div", { key: 'ebbd0bf0fd48f4f7dd498f63c0c47530752adfd0', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '9af3ef0c5afcba7c4ab3fdad3442ea5696c509c2', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '35ad9aa2b1909c24f9b0741287f97b233266bcff', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '6969bf12d42bb6e8d9fcd01c217eee35bee6d9b9', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '73d5fc2bc36eccd275669765c160b1d80f8d7a8b', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '153406f12ee8b431d15d554ba41ab17925063e87', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '13f9ffa9c73e02edc4290f6ef6085c2f035834fb', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '29836806cc1abff20fc163792ad45f5ecd891f2b' })))));
+        return (h("div", { key: '9da54bea799093962b8b0729be1b80b219213c45', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '39fc0df3b940290de9e406a45b9c8b9208aa719a', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '95e7a097cee4dcc0c8dc523aa28767f1362fcf40', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '5430c6cfab05814151d1976e6f9debe633c30497', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '423b89df3933051de31c48ee5d73a91c732f9e83', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '20d3c2140eb6bf6af0f135d550316a904a3fd97a', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '05febdc3aa4e26bdb0ca0ec1dd3c7454b385d917', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '5ccf6d69574fab9155a9a9668d902e0dade3c051' })))));
     }
     static get is() { return "bs-composer-status-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class BsContainer {
     padding = '300';
     render() {
         const pad = SPACING_TOKENS.includes(String(this.padding)) ? String(this.padding) : '300';
-        return (h(Host, { key: '459962926408474dee1da84fad17a66a5e849490', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '395c3e7c75e153c25acb045211df7cd9da67e302' })));
+        return (h(Host, { key: '476ec570e46dc2f875cf4634b7fb874c5dff4d92', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '4874712ddb0fc91ba76f803b116167fcc4026044' })));
     }
     static get is() { return "bs-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-container/bs-container.stories.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-container',
+    title: 'Components/Layout/bs-container',
     parameters: { docs: { description: { component: componentDescription('bs-container') } } },
     render: args => html `
     <bs-container size=${args.size} padding=${args.padding}>

package/dist/collection/components/bs-cookie-consent/bs-cookie-consent.stories.js

@@ -34,7 +34,7 @@ const PREFERENCE_CATEGORIES = [
     },
 ];
 const meta = {
-    title: 'Components/bs-cookie-consent',
+    title: 'Components/Feedback/bs-cookie-consent',
     parameters: { docs: { description: { component: componentDescription('bs-cookie-consent') } } },
     decorators: [story => html `<div style="padding: 16px; background: var(--bs-color-neutral-container);">${story()}</div>`],
     render: args => html `

package/dist/collection/components/bs-data-table/bs-data-table.cmp.test.js

@@ -18,6 +18,15 @@ describe('bs-data-table', () => {
             expect(selectAll.checked).toBe(false);
             expect(selectAll.indeterminate).toBe(false);
         });
+        it('gives each row checkbox an accessible name, configurable via selectRowLabel', async () => {
+            const { root } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const rowBoxes = Array.from(root.shadowRoot.querySelectorAll('tbody input[type="checkbox"]'));
+            expect(rowBoxes.length).toBe(rows.length);
+            expect(rowBoxes.every(b => b.getAttribute('aria-label') === 'Select row')).toBe(true);
+            root.selectRowLabel = 'Vælg række';
+            await new Promise(r => setTimeout(r, 50));
+            expect(root.shadowRoot.querySelector('tbody input[type="checkbox"]').getAttribute('aria-label')).toBe('Vælg række');
+        });
         it('does not render a select-all checkbox when not selectable', async () => {
             const { root } = await render(h("bs-data-table", { columns: columns, rows: rows }));
             expect(root.shadowRoot.querySelector('thead input[type="checkbox"]')).toBeNull();

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

@@ -38,6 +38,8 @@ export class BsDataTable {
     sortDirection = 'asc';
     /** Accessible name of the select-all checkbox in the header (when `selectable`). */
     selectAllLabel = 'Select all rows';
+    /** Accessible name of each row's checkbox (when `selectable`). */
+    selectRowLabel = 'Select row';
     selectable = false;
     /** Alternates the row background (even rows use `--bs-data-table-stripe-bg`) so wide tables are
      * easier to scan. Follows dark mode through the token. Row hover still wins. */
@@ -98,11 +100,11 @@ export class BsDataTable {
         }
     }
     render() {
-        return (h("table", { key: '3d8e5b69b6d41002e5af375573f47aec0e117a38', part: "table", class: "bs-data-table" }, h("thead", { key: 'ea97468d460ec2b7ef4b238a335fe05f049a1f0f', part: "head" }, h("tr", { key: 'cb73245678610583887157e314aa89c080390022' }, this.selectable && (h("th", { key: '45df220057b0b2e6698ebc29424dc6c6055799c4', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: '542ee807044a65c5ccf8e9285ece9584f921dff2', type: "checkbox", "aria-label": this.selectAllLabel, 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: '86d56c6fb30816c7ff0035b6d53fafc999bc1266', part: "table", class: "bs-data-table" }, h("thead", { key: '058e68b03dafaad071168a093978664405caf545', part: "head" }, h("tr", { key: '2621d2f1d4bc20bc152d99157b6f3682b7f8c52d' }, this.selectable && (h("th", { key: '3c701733d816861d9f18996fc02e42fe9e5e2a7c', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: '21985f46def70a01a0a1556b0fe0aef0a954ab25', type: "checkbox", "aria-label": this.selectAllLabel, 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: 'cd2b2ef74629630e166b0c9b4dc0a4ea339d4de6', 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: 'a80faf9643c27ea641794f117ad9ffcdf7caed7f', 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", "aria-label": this.selectRowLabel, 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.
@@ -232,6 +234,26 @@ export class BsDataTable {
                 "attribute": "select-all-label",
                 "defaultValue": "'Select all rows'"
             },
+            "selectRowLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of each row's checkbox (when `selectable`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-row-label",
+                "defaultValue": "'Select row'"
+            },
             "selectable": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -1,6 +1,6 @@
 import { componentDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-data-table',
+    title: 'Components/Data display/bs-data-table',
     parameters: { docs: { description: { component: componentDescription('bs-data-table') } } },
 };
 export default meta;

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

@@ -340,7 +340,7 @@ export class BsDatepicker {
             : this.defaultTabbable(days);
         const isInRange = (iso) => !!selectedStart && !!previewEnd && iso > selectedStart && iso < previewEnd;
         const weekdays = this.weekdays();
-        return (h("bs-card", { key: 'b3223172226fd0235de02a345dd50ac01668f201', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: '071b0d1398a2af8c991fa734652ca5e642570113', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '46dc879cb539d250fba48796dbfafd99983c7014', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '7973540e1b7263f3a0df95b650c7b7481503d4d6', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: 'e853ca7c87f32493da791883c36c9039a1752994', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'e9f6f3e3bc2d0c82ce00cbd30873a53777007d6c', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: 'a7af2ef7a4a05bd69d5ba8d19a6c79826a865490', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: 'e7f3122a2ca398cd3d4274918f9244368ac8166c', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '32e3810f46adddff1b1081bab573a01918b05c69', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '12086f1d7d8c52a25fe257d0bf2565760019a9c3', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '47b30d7d4f56a94947418b92fe6346640dd60d69', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '6a36e8becdfb932c3a25614f46df71a6bc6419f8', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
+        return (h("bs-card", { key: 'deee020382c8f61b97601d7e5504fb8c0f174616', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: '041f26feb5c2d0d20a3257ff8b5589fd09c8133b', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '5122a1de7c9f3914d740a909b3b7b099919817ae', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: 'dd9edd71723f2bdb4fcd883ba3374604976f146d', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: 'c897bf4dcfa3b1fad4cdc4febb8d4d4c617f36c0', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '17d0119479910876f10a67409a882542fec28d76', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '3052745c0ff62588aab848e0327ab423f4f4469d', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '83da87b4463d4501b9fc0ab755d6f743962093da', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '5065a4344e6477e895810d42863104c91c7b290f', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'ad4523bb1b76235c4a89a3781f671f2f48ef1490', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'c0653817a489424cf1177eb90edf1a3f5498e13c', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '13d86c20c7f3ec07f2e06f6aaa7dea3d9a68c1c5', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
             const row = days.slice(r * 7, r * 7 + 7);
             return (h("div", { class: "bs-datepicker__row", role: "row" }, row.map((d, c) => {
                 const iso = toIso(d);

package/dist/collection/components/bs-datepicker/bs-datepicker.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { componentDescription, propDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-datepicker',
+    title: 'Components/Forms/bs-datepicker',
     parameters: { docs: { description: { component: componentDescription('bs-datepicker') } } },
     render: args => html `
     <bs-datepicker

package/dist/collection/components/bs-description-item/bs-description-item.js

@@ -32,7 +32,7 @@ export class BsDescriptionItem {
     /** Set by the parent `bs-description-list`: `stacked` (term above detail) or `horizontal` (side by side). */
     layout = 'stacked';
     render() {
-        return (h("dl", { key: '732403f417d234e6d8b43aa6fbb2d1096fe817bd', part: "container", class: "bs-description-item" }, h("div", { key: '35fb60b1130d54ed72ff2aa6c7af109861490705', class: "bs-description-item__group" }, h("dt", { key: '1371a6cde4d09830bd734db6c30f240fa7f4cdc0', part: "term", class: "bs-description-item__term" }, h("slot", { key: '386095bd4b98b51f254db2cbb4524bcb2cdfb667', name: "term" }, this.term)), h("dd", { key: '074a3115bcd11b34b3eb35ff3b69460172352280', part: "description", class: "bs-description-item__description" }, h("slot", { key: 'fd34a6f7152805500b80e9983ec57e0805edff4c' }, this.description)))));
+        return (h("dl", { key: 'aec70759575194366c0b4c4a55ceba043b5dddd1', part: "container", class: "bs-description-item" }, h("div", { key: '9e58afccdcaad5c33403fb01261c81251b801a1d', class: "bs-description-item__group" }, h("dt", { key: 'c2ab08452ff2996050d3a87b62fef543d9f68c65', part: "term", class: "bs-description-item__term" }, h("slot", { key: '3e8a9fb9a9a3fa6ae183a2b9c934f73b1abf7d54', name: "term" }, this.term)), h("dd", { key: '130bdfa0996d78c4aedaf8f11080edf40773dea1', part: "description", class: "bs-description-item__description" }, h("slot", { key: '51a5f57b2a198ff07f4a913cb576849cef5f98e1' }, this.description)))));
     }
     static get is() { return "bs-description-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-description-list/bs-description-list.js

@@ -39,7 +39,7 @@ export class BsDescriptionList {
             .forEach(i => (i.layout = this.layout));
     }
     render() {
-        return (h("div", { key: 'defde2a3579750c2fcfd049009f2b274c236c760', part: "list", class: "bs-description-list", role: "group", "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: 'e9d3604c0df86f94a0c1e7b0f2ed7c92852ced91', onSlotchange: () => this.sync() })));
+        return (h("div", { key: '77af76f001bc7d507dc5a0b6a79e406e0081346c', part: "list", class: "bs-description-list", role: "group", "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: '15e49c33a811c43599523838852394a5a6dbd5a2', onSlotchange: () => this.sync() })));
     }
     static get is() { return "bs-description-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-description-list/bs-description-list.stories.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-description-list',
+    title: 'Components/Data display/bs-description-list',
     parameters: { docs: { description: { component: componentDescription('bs-description-list') } } },
     argTypes: {
         layout: { control: 'select', options: ['stacked', 'horizontal'] },

package/dist/collection/components/bs-dialog/bs-dialog.stories.js

@@ -1,6 +1,6 @@
 import { componentDescription, propDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-dialog',
+    title: 'Components/Menus and overlays/bs-dialog',
     parameters: {
         docs: {
             description: { component: componentDescription('bs-dialog') },

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

@@ -28,7 +28,7 @@ export class BsDivider {
         const a11y = this.decorative
             ? { role: 'none', 'aria-hidden': 'true' }
             : { role: 'separator', 'aria-orientation': orientation };
-        return (h(Host, { key: 'b21a5efb3d519b388b2219e4be93b731e4efadce', ...a11y }, h("div", { key: '92e98b2b345cec22215effc6dc6fcd35bf9e196b', class: "line", part: "line" })));
+        return (h(Host, { key: 'c17bc1539b81bcfd278936591d38a343bce89df3', ...a11y }, h("div", { key: '412a79f1f95808a3ab9624c68c70082c842dae65', class: "line", part: "line" })));
     }
     static get is() { return "bs-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-divider/bs-divider.stories.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-divider',
+    title: 'Components/Layout/bs-divider',
     parameters: { docs: { description: { component: componentDescription('bs-divider') } } },
     render: args => html `
     <div style="display: flex; flex-direction: ${args.orientation === 'vertical' ? 'row' : 'column'}; gap: var(--bs-spacing-200); height: 80px; width: 320px">

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

@@ -96,7 +96,7 @@ export class BsDropdown {
         this.open = ev.detail;
     };
     render() {
-        return (h("bs-popover", { key: '1d6d773e2fb666d3471b5097d1ba3816cea2f838', part: "popover", open: this.open, placement: this.placement, onBsOpenChange: this.onPopoverOpenChange }, h("slot", { key: '8b3306ec9fb0ff3f8738734dfdbf86aa2ee11316', name: "trigger", slot: "trigger", onSlotchange: this.syncTrigger, ref: el => (this.triggerSlot = el) }), h("slot", { key: '357ae81d2b344310c51e4b05f7be0dc1eb6ab0f1' })));
+        return (h("bs-popover", { key: '5fdcaae63de66b9c00e9970029eebde4678df1b2', part: "popover", open: this.open, placement: this.placement, onBsOpenChange: this.onPopoverOpenChange }, h("slot", { key: 'a995087e58089577fd6cecbde3d523f970474915', name: "trigger", slot: "trigger", onSlotchange: this.syncTrigger, ref: el => (this.triggerSlot = el) }), h("slot", { key: 'a4f86e6af89b10a92c523db2ae5543d57ea36b2e' })));
     }
     static get is() { return "bs-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-dropdown/bs-dropdown.stories.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-dropdown',
+    title: 'Components/Menus and overlays/bs-dropdown',
     parameters: { docs: { description: { component: componentDescription('bs-dropdown') } } },
     render: args => html `
     <div style="padding: 24px 160px 160px;">

package/dist/collection/components/bs-empty-state/bs-empty-state.js

@@ -68,7 +68,7 @@ export class BsEmptyState {
     render() {
         const level = Math.min(6, Math.max(2, Math.round(Number(this.headingLevel)) || 3));
         const Heading = `h${level}`;
-        return (h("div", { key: '142a329392b2d99b356be8debc4e8597c6f6f84e', part: "container", class: "bs-empty-state" }, this.hasIllustration ? (h("div", { part: "illustration", class: "bs-empty-state__illustration" }, h("slot", { name: "illustration" }))) : (h("bs-icon-tile", { part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { name: "icon" }))), this.heading && (h(Heading, { key: '961136e1fdffce443965fabbc654756ae5ad5924', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: 'f9b8343a64b4a631bddb8eb4a5d7bb6848306854', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '3fe746161c32b08af3d60cf5c362034e7341c854', part: "action", class: "bs-empty-state__action" }, h("slot", { key: '6b2cfbdac1f7a5183ed1a55a7da0f00ef1805aa8', name: "action" })))));
+        return (h("div", { key: 'c428179001f47749afe31700b517ca1cd122d14d', part: "container", class: "bs-empty-state" }, this.hasIllustration ? (h("div", { part: "illustration", class: "bs-empty-state__illustration" }, h("slot", { name: "illustration" }))) : (h("bs-icon-tile", { part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { name: "icon" }))), this.heading && (h(Heading, { key: 'c2182d743973786df9efb6fe19c7e5d4093ead7f', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: '9e76a034b08e884856729920d7828340ea68ca6b', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '190a141493fb58257c6b7dcb6b9175139eb080b3', part: "action", class: "bs-empty-state__action" }, h("slot", { key: '991d9fa6926c83b4806b6fb0824dbc9b1dfa1a4f', name: "action" })))));
     }
     static get is() { return "bs-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-empty-state/bs-empty-state.stories.js

@@ -3,7 +3,7 @@ import { componentDescription } from "../../stories-utils";
 const SEARCH_ICON = html `<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>`;
 const WARNING_ICON = html `<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M12 7.5v5M12 16.2v.1" /></svg>`;
 const meta = {
-    title: 'Components/bs-empty-state',
+    title: 'Components/Feedback/bs-empty-state',
     parameters: { docs: { description: { component: componentDescription('bs-empty-state') } } },
     argTypes: {
         heading: { control: 'text' },

package/dist/collection/components/bs-error-page/bs-error-page.js

@@ -65,7 +65,7 @@ export class BsErrorPage {
         const primary = this.primaryLabel ?? d.primary;
         const secondary = this.secondaryLabel ?? d.secondary;
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
-        return (h("bs-card", { key: 'bb20d902ed1c197bfc61b1052f92d6226a8412d7', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: '5be90fc6fb83875fa8518808c10269cefb72940c', class: "bs-error-page__body" }, h("div", { key: '76fedaef28a480a01ec1d33e9f95a5389a5e3d67', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: 'ad58c97bad019254db2d0b0fb5c659d77a6a3b90', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: 'ca2740bc44806d2fa74ad4927e43587e6b526c3d', name: "icon" }, d.glyph())), code && (h("span", { key: '45593b82fefc69fec1bb64bd103cd57cdf642b87', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: '9fc68fab74d9b138fe22ad8126ee5a01e6f48e15', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: '97f420c71d67766083d32176539e7531d56ae7f8', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'fcb1b99dea4a6a10edb996ee52fe2f11a66cfa75', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '0e79f04999dd9f78a8c3d610e039e8f7b2eabcca', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: '8b60aed28e215b822e05ce8dc498088181683f67', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+        return (h("bs-card", { key: '959ae769b28e34f8b2e7809d9995e62104137d35', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: '2c9e26e9a09f8fa5deb4b90087f21b11a147ba22', class: "bs-error-page__body" }, h("div", { key: 'b78be284e49c08a2ff3b42c7b21cb4ae082a88af', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '39fdd05129fa456456a2a5d3ff5e45141c88b58b', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: 'b770488128fb8229b2e47966e0c63ee0e8a11499', name: "icon" }, d.glyph())), code && (h("span", { key: '0892446d1291ae8ac8c6954a6f667a6690793a5c', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'ed69d26275e6233d5ab63aa9c3d5ae4559fa2c60', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: '60efdbce69379afadb78c9447fd5fb25d251cae0', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: '08ab35c6149a1c89b8a174395bc1634be79d535a', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'a4883e2c8fe7f1e19a868c2210d35bf39d03e08a', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: 'b99d0b503bbc103851829f41cc70c71d87b76fd5', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
     }
     static get is() { return "bs-error-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-error-page/bs-error-page.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { componentDescription, propDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-error-page',
+    title: 'Components/Feedback/bs-error-page',
     parameters: { docs: { description: { component: componentDescription('bs-error-page') } } },
     render: args => html `
     <bs-error-page

package/dist/collection/components/bs-file-upload/bs-file-upload.js

@@ -112,7 +112,7 @@ export class BsFileUpload {
             this.handleFiles(files);
     };
     render() {
-        return (h("div", { key: '7097cdbe1555c09f01a24b6d8612746ec1a06c9e', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: '3af10df2bb885e3e6cbb3c083d323ce6722adaac', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: '51c41410ce9702cb4645563e073e3c382c473001', name: "icon" }, h(UploadIcon, { key: '9459a3634f6d22c9dd73cfddb388ef98ad4ea756' }))), h("div", { key: 'e5a0e2d2a207154918805317d48a9ec89cbb8584', class: "bs-file-upload__content" }, h("div", { key: '248e47855e5faf5094646acec3c16e12c80062de', class: "bs-file-upload__text" }, this.heading && (h("span", { key: 'c06b5534f79feea1d69b030e968cbeb4a1529fab', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'aa5c4095e807d4842f05cd97577f983be4f68ac8', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: '144dca8f0bbcffe846ea8d6fb297f2122970c83b', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '12aefd76b33175fb69ebc00b02f1939d1c0ee84a', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
+        return (h("div", { key: 'd54357deba77860925d31e4afc6fa461c5cda79f', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: '31a01730260ee7fc808d78f38d7b5b3a013d5f55', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: '8808f036a93739ee60394c4a7c7d3aaf59b0b154', name: "icon" }, h(UploadIcon, { key: 'c40b6bc26a59b9d15ffcc41df9a9deecca91e027' }))), h("div", { key: '728bac5a8c8270c33e6469664c40e2a521153710', class: "bs-file-upload__content" }, h("div", { key: '0d95caaeb98bbda8519614ee02161ea8fa13f089', class: "bs-file-upload__text" }, this.heading && (h("span", { key: 'cf383bfa3622108a08fc9382b8b36d911f9a35e8', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'bedcf6d80b3246fe8864151c649e4eb6e1f831d2', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: '3072c4dcd99973839e3aab145f27295e61ca227b', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: 'c41931e65ef8aecdc3f49dd7141f4f9aeae25dc0', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
     }
     static get is() { return "bs-file-upload"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-file-upload/bs-file-upload.stories.js

@@ -2,7 +2,7 @@ import { html, render } from "lit";
 import { componentDescription, propDescription } from "../../stories-utils";
 const directions = ['horizontal', 'vertical'];
 const meta = {
-    title: 'Components/bs-file-upload',
+    title: 'Components/Forms/bs-file-upload',
     parameters: { docs: { description: { component: componentDescription('bs-file-upload') } } },
     render: args => html `
     <bs-file-upload

package/dist/collection/components/bs-file-upload-item/bs-file-upload-item.js

@@ -86,7 +86,7 @@ export class BsFileUploadItem {
     }
     render() {
         const removing = this.state === 'success';
-        return (h("div", { key: '3050c182622707760aa9e9d448f0da195526c68f', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: 'b2c516ed23a14e7bfc1a5987ca19722e49694768', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: 'fb13e169ff6083fdf8a24ee1ac848a7c1a18ef4e', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'ea045c9503e4ba50b44cdadb2d207680b649494a', class: "bs-file-upload-item__content" }, h("div", { key: 'fbe744afdf97ab1919868418ace733b19043ca8d', class: "bs-file-upload-item__meta" }, h("span", { key: '624c5d30fb30b7f4f3ba036db0431c7b1251c9cb', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: 'f9206de4e5eadfb8d5639de8fb0a372c4d89a224', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: 'e528e00e232aecd0aeff616e5d086e9b9dad0466', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
+        return (h("div", { key: '76c6eec0456ffea46333327b2758f4e90b4df15d', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '1b79696442c06b562c3a5e004d85f52b11890704', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '7c7436f2afaab8a6a642e7ead5b3568c88ac11d9', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: '112da43807c703eeba751a26e946196a4f014e91', class: "bs-file-upload-item__content" }, h("div", { key: 'ae7cb642892239fe199e62c08058bd9858f32641', class: "bs-file-upload-item__meta" }, h("span", { key: 'e0c3eea1f905470f471c76a53d28152b20d33fed', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '0836c13dc7e37379f42c700cb452fc5814d54e5a', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '29f1eb7e8f057cc6bf3ed026ff0b7c5626ebf951', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
     }
     static get is() { return "bs-file-upload-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-file-upload-item/bs-file-upload-item.stories.js

@@ -10,7 +10,7 @@ const hideOnAction = (ev) => {
     ev.currentTarget.style.display = 'none';
 };
 const meta = {
-    title: 'Components/bs-file-upload-item',
+    title: 'Components/Forms/bs-file-upload-item',
     parameters: { docs: { description: { component: componentDescription('bs-file-upload-item') } } },
     render: args => html `
     <bs-file-upload-item

package/dist/collection/components/bs-global-search/bs-global-search.js

@@ -342,10 +342,10 @@ export class BsGlobalSearch {
         const listId = `${this.id}-listbox`;
         const isList = this.status === 'default' || this.status === 'results';
         const showFooter = this.showFooter && isList;
-        return (h("div", { key: 'a1130242c3066d405a965b6f12b0d8a5599aaf9d', class: "bs-global-search" }, h("div", { key: 'ceb372cb4f91ebfc982c87c8ae68f93ead1af968', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: '8b6ffe6b1a9cb02c9b0337d51bee28fdaa9985f7', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: 'be1e96068830019ec49ff74e76c81105e6a9252d', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: '9b0b20314cdecfbb2a8508d0b559bab523bc2d01', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
+        return (h("div", { key: 'de908b4834fb2768314aece670e6f92dc0b8b516', class: "bs-global-search" }, h("div", { key: '6263cdf890dca0e36b263d29909e07d79b365f1c', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: '8a60460c8df0a45edb262f6d7f077cc15d8705ff', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: '52b1a17c333182757023c92fc97b8af30c5878e6', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: 'e9bf01e0294183cfb518327fce070de74d8c6bee', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
             const hid = `${this.id}-h-${s}`;
             return (h("div", { part: "section", class: "bs-global-search__section", role: "group", "aria-labelledby": hid }, h("div", { part: "section-header", id: hid, class: "bs-global-search__section-header" }, this.sectionLabel(s)), h("slot", { name: s })));
-        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: '4b7efc2118e676b9f6c356eb04f74b0343cac360', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
+        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: 'b71973514a9676083122a92c3534ec7ddfcbc1ae', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
     }
     static get is() { return "bs-global-search"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-global-search/bs-global-search.stories.js

@@ -47,7 +47,7 @@ const searchInItems = () => SEARCH_IN.map(s => html `<bs-search-item slot="searc
 const meta = {
     // The shared story data constants are exported for the tests; keep them out of the sidebar.
     excludeStories: /^[A-Z0-9_]+$/,
-    title: 'Components/bs-global-search',
+    title: 'Components/Navigation/bs-global-search',
     parameters: { layout: 'padded', docs: { description: { component: componentDescription('bs-global-search') } } },
     argTypes: {
         value: { control: 'text' },

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

@@ -59,12 +59,12 @@ export class BsGrid {
         const row = this.rowGap ? this.token(this.rowGap) : gapValue;
         const col = this.columnGap ? this.token(this.columnGap) : gapValue;
         const align = ALIGNS.includes(this.align) ? this.align : 'stretch';
-        return (h("div", { key: 'ce19818147e46e05e3f8bdbe0ec66791f7291514', class: "bs-grid", part: "container", style: {
+        return (h("div", { key: '6eb1a4c6cc206966b652daf26406d3b55c2dae23', class: "bs-grid", part: "container", style: {
                 gridTemplateColumns: this.template(),
                 rowGap: `var(--bs-grid-row-gap, ${row})`,
                 columnGap: `var(--bs-grid-column-gap, ${col})`,
                 alignItems: align,
-            } }, h("slot", { key: 'a0350d01ee8d538d92f125faaa94536498e80736' })));
+            } }, h("slot", { key: '202c36abcef55d2982f4a2b35563a7fe43308e64' })));
     }
     static get is() { return "bs-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-grid/bs-grid.stories.js

@@ -5,7 +5,7 @@ const cell = (n, h = 64) => html `
   <div style="background: var(--bs-surface-container); padding: var(--bs-spacing-200); height: ${h}px">Item ${n}</div>
 `;
 const meta = {
-    title: 'Components/bs-grid',
+    title: 'Components/Layout/bs-grid',
     parameters: { docs: { description: { component: componentDescription('bs-grid') } } },
     render: args => html `
     <bs-grid

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

@@ -31,7 +31,7 @@ export class BsHeading {
         const level = Math.min(6, Math.max(1, Number(this.level) || 2));
         const Tag = (this.as ?? `h${level}`);
         const size = this.size ?? String(level);
-        return (h(Tag, { key: 'ef59e0b219eb1ca65817ed8c942c0a99635b0ec9', part: "heading", class: `bs-heading bs-heading--${size}` }, h("slot", { key: 'b1cbfba6f8b3842cd77fa1741d48db77ddac7682' })));
+        return (h(Tag, { key: 'ad994ea3888c1d9c1a51677ac350f81590ad1a75', part: "heading", class: `bs-heading bs-heading--${size}` }, h("slot", { key: 'f9a5595d9b9d5ace4c9bbef398d94fb1164081d1' })));
     }
     static get is() { return "bs-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-heading/bs-heading.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { componentDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-heading',
+    title: 'Components/Typography and media/bs-heading',
     parameters: { docs: { description: { component: componentDescription('bs-heading') } } },
     render: args => html `<bs-heading level=${args.level} size=${ifDefined(args.size || undefined)} tone=${args.tone}>${args.text}</bs-heading>`,
     argTypes: {

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

@@ -40,7 +40,7 @@ export class BsIcon {
         const filled = typeof markup === 'object';
         const inner = typeof markup === 'string' ? markup : markup?.body;
         const labelled = !!this.label;
-        return (h("span", { key: 'b5a98541e91d0143d696707c0221458146e20a25', part: "icon", class: "bs-icon", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, markup ? (h("svg", { viewBox: filled ? markup.viewBox : '0 0 24 24', fill: filled ? 'currentColor' : 'none', stroke: filled ? undefined : 'currentColor', "stroke-width": filled ? undefined : '2', "stroke-linecap": filled ? undefined : 'round', "stroke-linejoin": filled ? undefined : 'round', "aria-hidden": "true", focusable: "false", ref: (svg) => {
+        return (h("span", { key: '8c4cccfecdf14d66fff16ae8222dea030615e64b', part: "icon", class: "bs-icon", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, markup ? (h("svg", { viewBox: filled ? markup.viewBox : '0 0 24 24', fill: filled ? 'currentColor' : 'none', stroke: filled ? undefined : 'currentColor', "stroke-width": filled ? undefined : '2', "stroke-linecap": filled ? undefined : 'round', "stroke-linejoin": filled ? undefined : 'round', "aria-hidden": "true", focusable: "false", ref: (svg) => {
                 if (svg && svg.innerHTML !== inner)
                     svg.innerHTML = inner;
             } })) : (h("slot", null))));

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

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
 const NAMES = ['menu', 'arrow-right', 'arrow-left', 'check', 'close', 'chevron-down', 'external-link', 'copy', 'search'];
 const meta = {
-    title: 'Components/bs-icon',
+    title: 'Components/Typography and media/bs-icon',
     parameters: { docs: { description: { component: componentDescription('bs-icon') } } },
     render: args => html `<bs-icon name=${args.name} size=${args.size} tone=${args.tone} label=${args.label || ''}></bs-icon>`,
     argTypes: {

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

@@ -46,8 +46,8 @@ export class BsIconTile {
     render() {
         const labelled = !!this.label;
         return [
-            h("div", { key: '93e750f5adc2334319281b7db3b49e45d6e477ec', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '345d80c8400f37db8bfc4001a1aad6193b423390', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: '05c4f47cb4ae96b73af3ca73348e10f91c4fdf0d', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
-            h("span", { key: 'a26e45ecd93f0989728d83c1def3ad18271a7376', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: 'a477971ec0476c444b165ebb88d4b961210325d2', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
+            h("div", { key: 'a9269d578576879e678be7f9b446b48433b7fd67', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '299f4298a3fd52db71f49ed4a2f85367049dc91a', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: '169432812651904452a6829bbfaf887d6d5524d3', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            h("span", { key: '6275125b69e1273ef26ca56193ce3d9be8349d86', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: 'fdc51493b1c2dca36c3fa556d93ec2d5539094a8', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
         ];
     }
     static get is() { return "bs-icon-tile"; }

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

@@ -4,7 +4,7 @@ import { componentDescription, propDescription } from "../../stories-utils";
 const INTENTS = ['default', 'success', 'warning', 'error', 'brand', 'information'];
 const SIZES = ['sm', 'md', 'lg'];
 const meta = {
-    title: 'Components/bs-icon-tile',
+    title: 'Components/Typography and media/bs-icon-tile',
     parameters: { docs: { description: { component: componentDescription('bs-icon-tile') } } },
     render: args => html `<bs-icon-tile size=${args.size} intent=${args.intent} label=${ifDefined(args.label || undefined)}></bs-icon-tile>`,
     argTypes: {