@brandsync/wc 1.14.0 → 1.16.0

package/dist/collection/components/bs-app-shell/bs-app-shell.js

@@ -0,0 +1,79 @@
+import { h } from "@stencil/core";
+/**
+ * The page frame: a header across the top, and below it a navigation | main | aside row, laid out
+ * with CSS grid. The main column scrolls independently of the header and the side columns.
+ *
+ * Layout only. Compose it from the existing shell components: put a `bs-navigation-header`
+ * (usually `alignment="with-navigation-drawer"`) in `header` and a `bs-navigation-drawer` in
+ * `navigation`. The drawer sizes itself (expanded or collapsed rail); the shell reserves an `auto`
+ * track for it, so there is no `navigationWidth` prop. `bs-navigation-header` has no `collapsed`
+ * prop, so there is no collapse state to mirror and the shell does not listen to `bsCollapse`: the
+ * auto track follows the drawer's width on its own.
+ *
+ * The shell creates no landmarks besides `<main>`; the slotted header and drawer bring their own
+ * `banner` and `navigation` roles.
+ *
+ * ## When to use
+ * - The outer frame of an application page with a header and side navigation.
+ *
+ * ## When not to use
+ * - Content layout inside the page (use `bs-grid`) or resizable panes (use `bs-split-pane`).
+ * - Pages that already have their own `<main>`; the shell would add a duplicate landmark.
+ *
+ * @slot header - A `bs-navigation-header`, spanning the full width.
+ * @slot navigation - A `bs-navigation-drawer`.
+ * @slot - The main content, rendered inside `<main>`; scrolls independently.
+ * @slot aside - Optional right column.
+ * @part container - The grid element.
+ * @part header - Wrapper around the header slot.
+ * @part navigation - Wrapper around the navigation slot.
+ * @part main - The `<main>` element.
+ * @part aside - Wrapper around the aside slot.
+ * @prop --bs-app-shell-bg - Shell background. Aliased to `--bs-surface-base`.
+ * @prop --bs-app-shell-color - Text colour. Aliased to `--bs-text-default`.
+ * @prop --bs-app-shell-main-padding - Padding of the main area. Aliased to `--bs-spacing-400`.
+ * @prop --bs-app-shell-aside-width - Width of the aside column. Defaults to `auto` (zero when empty).
+ */
+export class BsAppShell {
+    /** When true the host is `height: 100%`; when false it is content-sized with `min-height: 100vh`. */
+    fullHeight = true;
+    render() {
+        return (h("div", { key: '4ae586c70cc00e4eb8d498176c2e1a0ae442ce08', class: "bs-app-shell", part: "container" }, h("div", { key: '63976f08557ba9bcffa6502aa9d84c0369b8794c', class: "bs-app-shell__header", part: "header" }, h("slot", { key: '20582e1a41e6135ea8723f6b70fd992c82bff546', name: "header" })), h("div", { key: '394e505bf3e223f1898f200366a990165f57cbd2', class: "bs-app-shell__navigation", part: "navigation" }, h("slot", { key: '03d93ce4aff4606cf07e0279923ac55ee4572a30', name: "navigation" })), h("main", { key: 'b86613dccbb96fe6dffd0cc98969b9d6bfe75229', class: "bs-app-shell__main", part: "main" }, h("slot", { key: '90c2ec9781341722978c416a1e835cc0d8045a49' })), h("div", { key: 'dc94b2704168de28ea7fa686a58a18d0408e491b', class: "bs-app-shell__aside", part: "aside" }, h("slot", { key: 'fc5e9a0646144edd2461c2b49f5256e9b5937df5', name: "aside" }))));
+    }
+    static get is() { return "bs-app-shell"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-app-shell.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-app-shell.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fullHeight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the host is `height: 100%`; when false it is content-sized with `min-height: 100vh`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-height",
+                "defaultValue": "true"
+            }
+        };
+    }
+}

package/dist/collection/components/bs-app-shell/bs-app-shell.stories.js

@@ -0,0 +1,34 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const page = html `
+  <bs-grid min-column-width="240px" gap="200">
+    ${[1, 2, 3, 4].map(n => html `<div style="background: var(--bs-surface-container); padding: var(--bs-spacing-300); height: 120px">Card ${n}</div>`)}
+  </bs-grid>
+  <div style="height: 800px"></div>
+`;
+const meta = {
+    title: 'Components/bs-app-shell',
+    parameters: { layout: 'fullscreen', docs: { description: { component: componentDescription('bs-app-shell') } } },
+    render: args => html `
+    <div style="height: 100vh">
+      <bs-app-shell ?full-height=${args.fullHeight}>
+        <bs-navigation-header slot="header" alignment="with-navigation-drawer"></bs-navigation-header>
+        <bs-navigation-drawer slot="navigation" heading="Main Menu">
+          <bs-navigation-drawer-item selected>Dashboard</bs-navigation-drawer-item>
+          <bs-navigation-drawer-item>Reports</bs-navigation-drawer-item>
+          <bs-navigation-drawer-item>Settings</bs-navigation-drawer-item>
+        </bs-navigation-drawer>
+        ${page}
+        ${args.aside
+        ? html `<div slot="aside" style="width: 280px; padding: var(--bs-spacing-300)">Aside content</div>`
+        : ''}
+      </bs-app-shell>
+    </div>
+  `,
+    argTypes: { fullHeight: { control: 'boolean' }, aside: { control: 'boolean' } },
+    args: { fullHeight: true, aside: false },
+};
+export default meta;
+export const Default = {};
+export const WithAside = { args: { aside: true } };
+export const MinHeightViewport = { args: { fullHeight: false } };

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

@@ -58,7 +58,7 @@ export class BsAttachmentList {
         this.canScrollRight = row.scrollWidth - row.clientWidth - row.scrollLeft > 1;
     };
     render() {
-        return (h("div", { key: '86886f373a6a28533b3ad79debd2f6e9729d7a43', class: "bs-attachment-list" }, h("div", { key: 'b242f340394d6fab2f0d8ad7c1a4c0d52495c2fe', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: 'c086182c394a4339b93eaa7606131518abd4fbf8', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: '2ec0247d1c8850cb2f03baf06d3b9333ab0850cd', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
+        return (h("div", { key: '21ad2c7adedce7817859deacd348b5c79465bc4d', class: "bs-attachment-list" }, h("div", { key: '928518998d8a3c613d0cbf8c9527d575aad1af9b', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: '7016f855534d7be13806a43bc7220b5db3895f6b', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: '426f5a159ffb85e5c2c5eeb55d230751397fd09e', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
     }
     static get is() { return "bs-attachment-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.js

@@ -54,7 +54,7 @@ export class BsBreadcrumbs {
         });
     }
     render() {
-        return (h("nav", { key: '601a53dcb505cf95cd60b3ec0bc4dba88b79b82c', "aria-label": this.label }, h("ol", { key: 'ed1e51dc3035eb4de7901de736aa3e1de2c3369f', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: '8307352b1aa135507f9fe4e6bb442e3f6d227e92', onSlotchange: this.onSlotChange }))));
+        return (h("nav", { key: '13f218ab2558e3b5bc11b393c3150b6070c21f72', "aria-label": this.label }, h("ol", { key: '222784839ee0b6693604800ad01e78e0f65ebb13', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: '2b588f42ed80e2758236e65572b1cfc14380f027', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "bs-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,7 +62,7 @@ export class BsIconButton {
             form.reset();
     };
     render() {
-        return (h("button", { key: '3ac84a834ff924589ebf317bff14576905091bb7', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '2b913f9fdfa8bc0b5bbbd9ef55b2dc73718d260c', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '6cbb10e814b9b179f9a3b99fae0e662ce351c607' }))));
+        return (h("button", { key: '285e98b32bc33089125e07f14c84b8c72cdc853b', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'd91ec40e2d3e99ee3894e5c5c58f5b209b2ef545', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '6718a31a0f5f20bed9a5c682ddf0e6d1b703748b' }))));
     }
     static get is() { return "bs-icon-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class BsButtonSkeleton {
     /** Accessible name announced for the loading placeholder. */
     loadingLabel = 'Loading';
     render() {
-        return h("span", { key: 'cdcad4b17ffefb2c677c57116450f2efbbd7f7ee', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": this.loadingLabel });
+        return h("span", { key: 'a3122d410d69635b4a4d2aacdd9d7adc6e304289', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": this.loadingLabel });
     }
     static get is() { return "bs-button-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -139,7 +139,7 @@ export class BsChatbotFeedback {
     }
     render() {
         const stars = [1, 2, 3, 4, 5];
-        return (h("div", { key: 'fb1fcd6d5a4418686d146afabfedc2153c41cc50', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '8b6269cab2d3528db0a950c29afe3c24b2852e0f', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '7597109d6a2a5d1aeec1ac2937fb196b1687fe94' })), h("div", { key: 'd58c1d655802372016c5738150cad2ff0f7ca760', class: "bs-chatbot-feedback__top" }, h("div", { key: '9b6b17d9a7ecf5eebc08dffef2a634cc36598445', class: "bs-chatbot-feedback__text" }, h("p", { key: 'df876305bdc9daf51fa30a34ec50031d682b7659', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'ecb66eeb92b7d8ffcb8c30336d2d7416153b218a', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '066246d2be93871901daf8cadc7cedfe33694276', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": this.ratingLabel }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} ${value > 1 ? this.starsLabel : this.starLabel}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: '4a194ad30e60243a170538b76c32aaddcd81ce4a', class: "bs-chatbot-feedback__field" }, h("label", { key: '2477a8841011d8f361c2c6b9f919b1d1954e58f6', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, this.commentLabel), h("textarea", { key: '1fd34c6230f8d0e5807ffdd392b1316a4070f2bf', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: this.commentPlaceholder, value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: 'be913ac5827f98868ffdd64d883dbede26b88c44', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: 'cf15d26acd54707c110056d55120119f648ea481', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: 'eea4eb9d2272aa0bdc3d85d075bb93e0a530c8f1', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: 'f08cb743220f5b81d0ede08489212c2402db7218' }), this.submitLabel)), h("button", { key: '2398a72e7d84c6114bd4018d83c9bb2776372efa', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: 'b317890dd5338d01e56956aaa25e821306fe5c85' }), this.newChatLabel))));
+        return (h("div", { key: 'b5ecff5747f951bbd12737ae3b228c4ebe5e3c1a', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: 'c2f7229ed44ef138176e729ab1bc75a3caeb86f9', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '45cbc05895d53bd52111af0e6c604bd33e8d4fe2' })), h("div", { key: 'b390a7523806a89f30f8e53e9be8514b4dfa68aa', class: "bs-chatbot-feedback__top" }, h("div", { key: '90c8eb690bed06bdf5cc9cd0337379a50240af7a', class: "bs-chatbot-feedback__text" }, h("p", { key: '36017d422b64a1c3b5e2d8f282730328b9d9099d', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'bf7bc4f57de5c72abf271696c06447a9698274b3', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '5456d1ad9a761d8b5bdfb6b3e1d4a73d1f15beb9', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": this.ratingLabel }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} ${value > 1 ? this.starsLabel : this.starLabel}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: 'b4ac38b78a0c219ff4f5f9526242ad69141ca8bc', class: "bs-chatbot-feedback__field" }, h("label", { key: '26d7f278507bc567bfa926f01adf99115a10ef86', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, this.commentLabel), h("textarea", { key: 'dc6e76aca6288e38f282460b9dc1ebf29923ecaf', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: this.commentPlaceholder, value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: '681069b3738f6839f47295398695a9ec7d453970', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: '1f2cc57d14a95bd4ffca6d2bef8c438f22be24ee', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: '3ec8c2ca290271dab663deb3bc043836097cff7f', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: 'b33754c134ea3b53b01f31abf5242f4d6e4d6c50' }), this.submitLabel)), h("button", { key: '87d2a12e10211553f84d90c390739b69a340bd65', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: '438a73c14ea12d59a89d18afc3a200fa457f900f' }), this.newChatLabel))));
     }
     static get is() { return "bs-chatbot-feedback"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.js

@@ -93,7 +93,7 @@ export class BsChatbotHeader {
         this.bsClose.emit();
     };
     render() {
-        return (h("div", { key: '067f844bdce44a53ba20f8dd8cf0b3b49685b561', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: '47f00dc2c9911f3ac826c0095343c1b5411a05e9', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: 'b4659173574263a69005e87b5eb32ac7e0a7f8a4', class: "bs-chatbot-header__actions" }, h("slot", { key: '34f1bdfc64a741c177d1bd2cb59dbe7784174326', name: "actions" }), !this.hideNewChat && (h("span", { key: '6016641b3c32578aa8facf5c43bdafd185663286', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '401a7059f3771d652ec1b45a9ddb36acfee4527c', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": this.newChatLabel, onClick: this.onNewChatClick }, h("slot", { key: '556a2d99ef5c1610e05a7a5197bc7e00c50e7e67', name: "new-chat-icon" }, h(NewChatIcon, { key: '919eaa87751f9535c178e615af60a5c648f2340d' }))), h("bs-tooltip", { key: '2513109ec089fb11dcbf158e57d7cc99a9419dc3', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.newChatLabel))), !this.hideHistory && (h("span", { key: '5e4464efdbc17c1c256486442e2c82e013b2c2a8', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '5006fe5eebd4c4dc6438c8f5c3a8a3b7a81d2c62', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": this.historyLabel, onClick: this.onHistoryClick }, h("slot", { key: '8a85cc6206d120b4d18df7b26812c79133de6aac', name: "history-icon" }, h(HistoryIcon, { key: '2cf98a72b3ae266894939f4966606fbfd5aaa024' }))), h("bs-tooltip", { key: 'bb78255428ab17ab4ed99a0c32c8e4c965bc81a3', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.historyLabel))), !this.hideExpand && (h("span", { key: 'cecbc8377fedccc22b181dc225511c915372c332', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '4b1312a7b0124935fe4c9ac18132edcd4d70dc23', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? this.collapseLabel : this.expandLabel, "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: 'a248a25a55155816aeb85cc7aac4f0e7e8e4eb6f', name: "expand-icon" }, h(ExpandIcon, { key: '2f929f0e1417582903ab86b081ebf425c61b04ee' }))), h("bs-tooltip", { key: 'f7597d0c2f10309a6600b743fa72e82d15d31b62', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? this.collapseLabel : this.expandLabel))), !this.hideClose && (h("span", { key: '439063f4783010fc160ddb2353693621d53728e9', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'cb6a069d004ab472f3f4d78c406c61a95da4b9b0', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h("slot", { key: '06e232992b67435162d33dab2783f7e8bd9b0f5d', name: "close-icon" }, h(CloseIcon, { key: 'e4d9191b0060305f1890f5a3c24eec65e243db35' }))), h("bs-tooltip", { key: '88f7c355b900614920a8d3f8d1350f4b238092cf', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.closeLabel))))));
+        return (h("div", { key: '1e82711dbca1c2c7f545269154707743d3c39bc2', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: '67ac0df20f227710987066ba897c593c6728d8bd', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: 'da9b259095c349802c07ef133970482d5d27f7c1', class: "bs-chatbot-header__actions" }, h("slot", { key: 'f8eae11a4ec06a0f0ce1b73ea36deb4276fc447e', name: "actions" }), !this.hideNewChat && (h("span", { key: '72e65dd88d7be443db68d229ed1b33c333c5d2cd', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'f2dcdf530a7f4ebb591a6431c11414f5df9ed40e', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": this.newChatLabel, onClick: this.onNewChatClick }, h("slot", { key: 'f993c37591df27c604f771b65f11c015bd5cfa29', name: "new-chat-icon" }, h(NewChatIcon, { key: '001e9ab9fefc81499e457102ebb03ab10121f89f' }))), h("bs-tooltip", { key: 'd2c0a848bd204cf1a374d3a3f60162f52c8f3fb1', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.newChatLabel))), !this.hideHistory && (h("span", { key: 'bd7111e541b03d7c2ab9214457708e3ecdb6120d', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'b80ffb1d4c9f55fb5faceb138b56af4cd4bbcc25', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": this.historyLabel, onClick: this.onHistoryClick }, h("slot", { key: 'b80e223143dbdc67d08ac2bdba79a25e19e1c92b', name: "history-icon" }, h(HistoryIcon, { key: '30dfe6c3925be30cb3ae32d9415bed6283e289c5' }))), h("bs-tooltip", { key: 'e3f63c2a31fb7aa2ef8baa7fd69a9b491d31e5e9', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.historyLabel))), !this.hideExpand && (h("span", { key: 'a4a8eec0d3e79c843747714a5e1ac4916107eb6e', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'c5b6b5766f829f8b09c205ef9ee2b22db86757d6', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? this.collapseLabel : this.expandLabel, "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: 'a4e94ff355a6a059e19d834e31e8e82e2a444847', name: "expand-icon" }, h(ExpandIcon, { key: '8c7e91c88e9b0e6f763ccd01ba1fcfbb6c7310c7' }))), h("bs-tooltip", { key: '5e6594e602dff820748ff4b87edebba43ee45ff6', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? this.collapseLabel : this.expandLabel))), !this.hideClose && (h("span", { key: '2a34f85167c05fbcc0cb367d4717076c9ac6fa4b', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'a7ceffef02d0dd8aaf4e5fd88fdecea5c784db44', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h("slot", { key: 'fa8c5ad4b665f406bd8431eb859ccc665e9e4b1f', name: "close-icon" }, h(CloseIcon, { key: 'bdc09f3721c0b0e46589245f44a8e84625ca4012' }))), h("bs-tooltip", { key: '73d7debb7de3e57425c8af1c01f57d2a1b66c237', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.closeLabel))))));
     }
     static get is() { return "bs-chatbot-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -127,7 +127,7 @@ export class BsChatbotResponseAction {
     };
     render() {
         const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
-        return (h("div", { key: '4614a3168dbf9ce1db1584c86c3db10b35df119e', class: "bs-chatbot-response-action" }, h("button", { key: '90fbcf40c8860dd4f22e5c97411f151ef86cb116', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": this.likeLabel, "aria-pressed": this.liked ? 'true' : 'false', onClick: this.onLikeClick }, h("slot", { key: 'e10152f4d2be972b8aeca87205c43b06ca441939', name: "like-icon" }, h(ThumbsUpIcon, { key: 'e28b734e0d92c44930d0374933a28adc398f9ea2' }))), h("button", { key: '2bf2bd404e013a244dd417680185012b711bffd1', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": this.dislikeLabel, "aria-pressed": this.disliked ? 'true' : 'false', onClick: this.onDislikeClick }, h("slot", { key: 'f9b7ef8348ad7e461bd965307aeca091e737c26f', name: "dislike-icon" }, h(ThumbsDownIcon, { key: 'd6d7512ddc9dee63406afd17e6feda7f5af24606' }))), h("button", { key: '2cff63f4f000274fc559a4d8365230dd5edf1e40', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": this.copyLabel, onClick: this.onCopyClick }, h("slot", { key: '97209f7fe43823e7d6a58e6d87d8ea741915add0', name: "copy-icon" }, h(CopyIcon, { key: 'b08778e433e211f4189de8b79e3238041cc6c531' }))), !this.hideRegenerate && (h("button", { key: '0dd5aa376078347cd3fb815fd2a58d631189298c', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": this.regenerateLabel, onClick: this.onRegenerateClick }, h("slot", { key: '0937709ec50f9f8fa9a26f98c9be05edd16ffc29', name: "regenerate-icon" }, h(RegenerateIcon, { key: '2e8043acad10150471127a43443033d5a554d7a3' })))), h("div", { key: 'dea60a2562bd5dc6cf898908cf7c890e9e77ff50', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '59ddd22e26d274938bbed3f961ff9877a0b4c996', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": this.menuLabel, "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: 'fcabbee23c6a3c67a5e16751b336baebc2249d64', name: "menu-icon" }, h(MenuIcon, { key: '546a1aaacd0ec3d4eb9b7a1cf2db7dde54b33fc0' }))), this.menuOpen && (h("div", { key: 'f869b271717473e1d32ac7c1d56d76cad1c5ec08', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '83048ee1e615a448281bf72904fcd3763b88449a', name: "menu" })))), hasSources && (h("button", { key: '268057d50ca3b68395c94c41773a426e082a00ba', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: '0b291aaa71524f9ee664eac509d42055c82a4560', name: "sources-icon" }, h(SourcesIcon, { key: 'fe935c9fcf5e98f432778a92454678dffbe581eb' })), h("span", { key: '6a75a557e6798cbed50602e149c77c13e3f25611', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? this.sourceLabel : this.sourcesLabel)))));
+        return (h("div", { key: '7a3c8e560657192aa3981af225500f1b5012df99', class: "bs-chatbot-response-action" }, h("button", { key: '4f7376d5cc1d9a43fc87b8aaef743709d73a4845', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": this.likeLabel, "aria-pressed": this.liked ? 'true' : 'false', onClick: this.onLikeClick }, h("slot", { key: 'eb9673716d469f1e3ab0ebb70f850bdf2699f38f', name: "like-icon" }, h(ThumbsUpIcon, { key: 'bb1295906269d4fc9e1f5b7fc611cb4730c39dbf' }))), h("button", { key: 'f4c17bde7dd7729e0b22adc3323b916855192ddf', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": this.dislikeLabel, "aria-pressed": this.disliked ? 'true' : 'false', onClick: this.onDislikeClick }, h("slot", { key: '50f786a78edb25f454087365b29d7f68507fe16c', name: "dislike-icon" }, h(ThumbsDownIcon, { key: 'a0ee507eb51b6d5b1bd91d4c44847ab1655cf59a' }))), h("button", { key: 'd484d6ff7f91eefd84ebd9c9a7752ab44ec04989', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": this.copyLabel, onClick: this.onCopyClick }, h("slot", { key: 'df62c8aabf9e05261c79da6900c10c42ffd9695d', name: "copy-icon" }, h(CopyIcon, { key: '11184b8ec93fbe5bced51597d9a42a197562ede0' }))), !this.hideRegenerate && (h("button", { key: 'a96709842dbfde9cc6d68db20b489f540ebb589b', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": this.regenerateLabel, onClick: this.onRegenerateClick }, h("slot", { key: '7a6f1c7c9ea89c1856a3e3488345455e5aab0d1d', name: "regenerate-icon" }, h(RegenerateIcon, { key: 'eb3179faa96df184c488954c809666b7b0b78ecf' })))), h("div", { key: 'f11dd91afcaf4611999ff0858cdc7f1fd8848f9a', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: 'd2bfd06a3c625cfc8677b505bb10828dbb60a924', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": this.menuLabel, "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: '5caeafa6c2b1ec6f74b91da7f0e96e59d26792c2', name: "menu-icon" }, h(MenuIcon, { key: '9e8d9764fa30764f8db04efce6f119971b8c33b2' }))), this.menuOpen && (h("div", { key: '0af7a8b59c9f3b2ec2e5e44be2966281c0ec54d6', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '521382ac34c12811097eb3295b05bae34e3cb912', name: "menu" })))), hasSources && (h("button", { key: '38f5d0ea3ea28fb1bdfdd71f9176e82900f1c372', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: '7187d6bc56c1d75974ed7a1a0a8a3857a3c7608f', name: "sources-icon" }, h(SourcesIcon, { key: 'd3c96a09a399efc1c3a5b2b96b7ac0cc025fc23f' })), h("span", { key: '34cfb2ad8385edecd59a76b0d26268498f236363', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? this.sourceLabel : this.sourcesLabel)))));
     }
     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

@@ -59,7 +59,7 @@ export class BsChatbotSourcesDrawer {
     };
     render() {
         const displayCount = this.count ?? this.slottedCount;
-        return (h("div", { key: 'a3e560658dc81c26fb8c4dd0bade5f30ab3e4f2c', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '48e21675c96175ba0f71f60da383fc4d4f460849', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '0ba172eaa3573e503d8084bd046efbae1118781c', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '557ec12934dba00d0d21fc9da2f761c39d1f2092', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '9ee8926ffaccc7f0581046d913a442c33d44b20b', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '884ef26ff326c817082e0043af5530b025c18815', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": this.collapseLabel, onClick: this.onCollapseClick }, h("slot", { key: 'b537118af444041aef0964ef05f1f604b4f314d2', name: "collapse-icon" }, h(CaretRightIcon, { key: '413f9632c6963bfdb53520f28a9d1bb08a7c40e4' })))), h("div", { key: '31ef8089cc21b5ce22806fc3e7b2de386a8602ee', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'e51ae20a57d1132a176427bd4ded776ce6207c64', onSlotchange: this.onSlotchange }))));
+        return (h("div", { key: '6309d2770d544e58e3e4e99a16ae6a5e16c2545d', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '8a3bf1faf5d91a5f833d8de442a5b15a09b2a339', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: 'dfb8ff476939e3f723895de97991b14f9806e8fd', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: 'c817cb00b439026a8ea142441382cf090ddb0a37', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '016eb007b496e1355404145a9e294e66d6b8e0f0', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '03bb83d11d15d24d0246d98ee6510201fa33f8b7', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": this.collapseLabel, onClick: this.onCollapseClick }, h("slot", { key: '5cae68793cfb35f532f552f154a3badf5e19a1a4', name: "collapse-icon" }, h(CaretRightIcon, { key: '9352aa0f35b8b756a4363b19e57a2cfff37a938e' })))), h("div", { key: 'd9891a9d984f1dfaaba988a4297919888a74a209', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '03dcd69d2aefb0a3db9b461baa4751ae6925ddef', 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

@@ -42,7 +42,7 @@ export class BsChatbotSuggestionButton {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: 'd81d8e30c8c4c7b242b93d2b011bf93fee259f9f', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'dc3c9994a193e37284375891671a895d7dd44cd6' })));
+        return (h("button", { key: '5d7d706b1cbe7e4e99bfe16db3482979387e7a6a', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'ba5bf8860c3f93c5391f0dbd6742cb4adb978304' })));
     }
     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

@@ -35,7 +35,7 @@ export class BsCheckboxSkeleton {
     /** Accessible name announced for the loading placeholder. */
     loadingLabel = 'Loading';
     render() {
-        return (h("span", { key: '4d4c58ea0aadd109e966d29e4d66eade3039467f', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": this.loadingLabel }, h("span", { key: '3ced469a5005e0d0e49e2f6d6872fcc72fb5ac71', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: '19698771c87d936c07c7c4f6e300d8e14109e507', part: "label", class: "bs-checkbox-skeleton__label" })));
+        return (h("span", { key: '5a5e8fb0a06e52c522228d5f3ee461ecfb4124b5', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": this.loadingLabel }, h("span", { key: '64b0151623c813be1a752e042bbb0f616c256c64', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: '7045443cd3fa14efbf0be76163ffe499b2a4bf24', part: "label", class: "bs-checkbox-skeleton__label" })));
     }
     static get is() { return "bs-checkbox-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-citation-preview/bs-citation-preview.js

@@ -38,7 +38,7 @@ export class BsCitationPreview {
     bsOpen;
     render() {
         const hasPage = this.page !== undefined && this.page !== null && this.page !== '';
-        return (h("bs-card", { key: 'e36c3d18f75f3d7a90aa18896889e135903dd646', part: "container", class: "bs-citation-preview", surface: "base" }, h("div", { key: 'f4e41670ebf4db3e335ce67b34d4f074af171be9', class: "bs-citation-preview__body" }, h("bs-source-link", { key: '4ec6c8a5c43eccb5d2f5a5bc725d4a43140e2fa2', part: "header", fileName: this.fileName, sourceName: this.sourceName, href: this.href, onBsOpen: () => this.bsOpen.emit() }), h("div", { key: '187e76af345603c54639211e287fd5d6c9f7c5b0', part: "snippet", class: "bs-citation-preview__snippet" }, h("slot", { key: 'af7cc7f6020888416c4efef5068584337f93e3af' })), h("div", { key: '75e18be6c910a8d1dd9953b8640c2a446c41b6a0', class: "bs-citation-preview__footer" }, h("slot", { key: '109bc862aa76158bddfc0474464a5fbcebbbae62', name: "footer" }, hasPage && (h("span", { key: 'de8bdfd079b158f9a7c9dbfb0c96f72e6e5ed35b', part: "page", class: "bs-citation-preview__page" }, "Page ", this.page)))))));
+        return (h("bs-card", { key: '1295f42db1fb35c289d6cc1477b8430cedf7cbd1', part: "container", class: "bs-citation-preview", surface: "base" }, h("div", { key: '84d861992e3491b5acdba5c828942104080115ae', class: "bs-citation-preview__body" }, h("bs-source-link", { key: 'b84d4965c3f6c4dc0b6c2ffb5c5d2e3ebad1e9c4', part: "header", fileName: this.fileName, sourceName: this.sourceName, href: this.href, onBsOpen: () => this.bsOpen.emit() }), h("div", { key: 'de597e072c72c67600f1b3e8d73681cded0624e6', part: "snippet", class: "bs-citation-preview__snippet" }, h("slot", { key: '5513cf9dcb44ed5ced270437118584a229971de0' })), h("div", { key: '1b6a5620ed09d8690908daa17065fb901c0bdfb1', class: "bs-citation-preview__footer" }, h("slot", { key: 'feabf442256e6d3b26e1f6d309a35c9f96899ab5', name: "footer" }, hasPage && (h("span", { key: '925008ee116c57ea9ab6940054ee42b33883c577', part: "page", class: "bs-citation-preview__page" }, "Page ", this.page)))))));
     }
     static get is() { return "bs-citation-preview"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,59 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const mount = (props = {}) => render(h("div", { style: { width: '2000px' } }, h("bs-container", { ...props }, h("div", null, "content"))));
+const tokenPx = (name) => {
+    const probe = document.createElement('div');
+    probe.style.width = `var(${name})`;
+    document.body.appendChild(probe);
+    const w = getComputedStyle(probe).width;
+    probe.remove();
+    return parseFloat(w);
+};
+describe('bs-container', () => {
+    it('defaults to xl and is centred', async () => {
+        const { root } = await mount();
+        const el = root.querySelector('bs-container');
+        expect(el).toEqualAttribute('size', 'xl');
+        const r = el.getBoundingClientRect();
+        const parent = el.parentElement.getBoundingClientRect();
+        expect(Math.round(r.width)).toBe(tokenPx('--bs-breakpoint-xl') || 1280);
+        expect(Math.round(r.left - parent.left)).toBe(Math.round(parent.right - r.right));
+    });
+    it('applies each size from the breakpoint tokens', async () => {
+        const expected = { sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 };
+        for (const size of Object.keys(expected)) {
+            const { root } = await mount({ size });
+            const w = root.querySelector('bs-container').getBoundingClientRect().width;
+            expect(Math.round(w)).toBe(expected[size]);
+        }
+    });
+    it('fluid has no max width', async () => {
+        const { root } = await mount({ size: 'fluid' });
+        expect(Math.round(root.querySelector('bs-container').getBoundingClientRect().width)).toBe(2000);
+    });
+    it('padding prop sets horizontal padding, falling back for invalid names', async () => {
+        const { root, waitForChanges } = await mount({ padding: '500' });
+        const el = root.querySelector('bs-container');
+        const pad = () => parseFloat(getComputedStyle(el).paddingLeft);
+        const p500 = pad();
+        expect(p500).toBeGreaterThan(0);
+        el.setAttribute('padding', '300');
+        await waitForChanges();
+        const p300 = pad();
+        expect(p300).toBeLessThan(p500);
+        el.setAttribute('padding', 'bogus');
+        await waitForChanges();
+        expect(pad()).toBe(p300);
+    });
+    it('box-sizing is border-box and width never exceeds the parent', async () => {
+        const { root } = await render(h("div", { style: { width: '500px' } }, h("bs-container", { size: "2xl" })));
+        const el = root.querySelector('bs-container');
+        expect(getComputedStyle(el).boxSizing).toBe('border-box');
+        expect(Math.round(el.getBoundingClientRect().width)).toBe(500);
+    });
+    it('--bs-container-max-width / --bs-container-padding can be overridden', async () => {
+        const { root } = await render(h("div", { style: { width: '2000px' } }, h("bs-container", { style: { '--bs-container-max-width': '400px', '--bs-container-padding': '10px' } })));
+        const el = root.querySelector('bs-container');
+        expect(Math.round(el.getBoundingClientRect().width)).toBe(400);
+        expect(getComputedStyle(el).paddingLeft).toBe('10px');
+    });
+});

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

@@ -0,0 +1,16 @@
+/* --bs-container-max-width / --bs-container-padding are public overrides; the -token / -size
+   variants below are the defaults set from the props (host-scoped, so a consumer rule wins). */
+:host {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  margin-inline: auto;
+  max-width: var(--bs-container-max-width, var(--bs-container-size, var(--bs-breakpoint-xl)));
+  padding-inline: var(--bs-container-padding, var(--bs-container-padding-token, var(--bs-spacing-300)));
+}
+:host([size='sm']) { --bs-container-size: var(--bs-breakpoint-sm); }
+:host([size='md']) { --bs-container-size: var(--bs-breakpoint-md); }
+:host([size='lg']) { --bs-container-size: var(--bs-breakpoint-lg); }
+:host([size='xl']) { --bs-container-size: var(--bs-breakpoint-xl); }
+:host([size='2xl']) { --bs-container-size: var(--bs-breakpoint-2xl); }
+:host([size='fluid']) { --bs-container-size: none; }

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

@@ -0,0 +1,88 @@
+import { Host, h } from "@stencil/core";
+const SPACING_TOKENS = ['0', '25', '50', '75', '100', '150', '200', '250', '300', '350', '400', '500', '550', '600', '700', '800', '1000', '1200', '1500'];
+/**
+ * A centred wrapper that limits content width to a breakpoint and adds horizontal padding.
+ *
+ * ## When to use
+ * - Constraining page or section content to a readable, consistent maximum width.
+ *
+ * ## When not to use
+ * - Arranging children relative to each other (use `bs-stack`).
+ * - Full-bleed regions such as hero backgrounds (use `size="fluid"` or no container).
+ *
+ * @slot - Content to constrain.
+ * @prop --bs-container-max-width - Maximum width. Aliased to the `--bs-breakpoint-*` token for `size`; `none` for `fluid`.
+ * @prop --bs-container-padding - Horizontal padding. Aliased to the `padding` spacing token (default `--bs-spacing-300`).
+ */
+export class BsContainer {
+    /** Maximum width, taken from the breakpoint tokens. `fluid` removes the limit. */
+    size = 'xl';
+    /** Spacing token name for horizontal padding (e.g. `300` => `--bs-spacing-300`). Invalid values fall back to `300`. */
+    padding = '300';
+    render() {
+        const pad = SPACING_TOKENS.includes(String(this.padding)) ? String(this.padding) : '300';
+        return (h(Host, { key: '001d2089d9e69657dad10a4d95c550900bdb5252', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '8f983ed8ad608a386d84468682296d9318089d28' })));
+    }
+    static get is() { return "bs-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-container.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsContainerSize",
+                    "resolved": "\"2xl\" | \"fluid\" | \"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {
+                        "BsContainerSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-container/bs-container.tsx",
+                            "id": "src/components/bs-container/bs-container.tsx::BsContainerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width, taken from the breakpoint tokens. `fluid` removes the limit."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'xl'"
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing token name for horizontal padding (e.g. `300` => `--bs-spacing-300`). Invalid values fall back to `300`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding",
+                "defaultValue": "'300'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,24 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-container',
+    parameters: { docs: { description: { component: componentDescription('bs-container') } } },
+    render: args => html `
+    <bs-container size=${args.size} padding=${args.padding}>
+      <div style="background: var(--bs-surface-container); padding: var(--bs-spacing-200)">Container content (${args.size})</div>
+    </bs-container>
+  `,
+    argTypes: {
+        size: { control: 'select', options: ['sm', 'md', 'lg', 'xl', '2xl', 'fluid'] },
+        padding: { control: 'select', options: ['0', '25', '50', '75', '100', '150', '200', '250', '300', '350', '400', '500', '550', '600', '700', '800', '1000', '1200', '1500'] },
+    },
+    args: { size: 'xl', padding: '300' },
+};
+export default meta;
+export const Default = {};
+export const Small = { args: { size: 'sm' } };
+export const Medium = { args: { size: 'md' } };
+export const Large = { args: { size: 'lg' } };
+export const ExtraLarge2x = { args: { size: '2xl' } };
+export const Fluid = { args: { size: 'fluid' } };
+export const WidePadding = { args: { size: 'md', padding: '600' } };

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

@@ -87,11 +87,11 @@ export class BsDataTable {
         }
     }
     render() {
-        return (h("table", { key: '1d9ca0e7153818331ea760d70a2e2f15b1be67bc', part: "table", class: "bs-data-table" }, h("thead", { key: 'af48bd83574fc4d358010b3091f14bc04db5f935', part: "head" }, h("tr", { key: '0cc77b6e5c46c175444b14dcfdb6c43b41a02d01' }, this.selectable && (h("th", { key: 'a8140bfad21744d05b02065d4034b85228f75da0', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: '634a2b62fb9f26b0684622c6794170aaf5080b3e', 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: '5b61e4f581c2ab0da069cabf9a612285f98b0865', part: "table", class: "bs-data-table" }, h("thead", { key: 'c3bed54d42e2e2c3d54cfa9754251ab0d34c55fd', part: "head" }, h("tr", { key: '8f0aaa90b06650719423de98e05f39ffce407a67' }, this.selectable && (h("th", { key: 'ed065c125b50493c621c8922cdd3d7ca26222b8e', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: '0e4f29de07f7818e7024714281f5faadcd288c88', 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: 'a90a9e866a63f9da370a6d20a4381b15bec14c82', 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: 'b993a2e1c22d094936c49ad33486b2ecc02861c8', 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-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: 'cd66b2bc8f611383ea5df6d01e29b03a940bc06b', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: '7020d13ee4ea5f05c2548966cb56c20b59eb067b', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '4ed03f1fb642d2a3a226a27e6e86001a478eab4c', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: 'e844a021afa02f834026ebb4237f5b2f5b9d1a4c', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: 'f68be6b62a9deb6334b63c6e7152b4968ebdbeab', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'a7ee70143ce7b839c44483c1d15daf2714306bf7', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '7eb7fd38ca59a4a6ba9692180bcd5096f54ac783', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '1e515d27746a10acfe9f04f08c4a09753cb5b98b', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: 'f5dde56a61d31b93aa9877b0fc473264d40305ba', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '765b53c7f7e8618618622a5121ecab294610bf8a', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'e56fa1a425055d77ae04039890758b823f14ee8d', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '2471a9291aa29111217aaaa1f02f2cfc8861e49e', 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: 'd2794a112b72b3dc871360b1e57273c9ef097fc4', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: 'bee55a1cd06aa44171f40babae77b1f2f742d160', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: 'd4ab1cfd76fcea8b64daeb951da7b36300c036f0', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '5fcbb3f928db51049fd034beb3519400afe4f128', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: '18889f8f9dd9364bd73595635b72515b91d35ade', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '3d648cd4be611ef4de37cc08f9017809388d36e3', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: 'c0647871f1c140472807ae51e04604c6d87ccaa4', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: 'ec3d33aeea146534d6640ac336905a002d0e7dc2', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '5cbac8630a30064d940e5f03ce767b525c09dd7c', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '2c47ca0911b8b42cd3590ff053905df327363e9f', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '91a6942792287f3044962fd278e36ed04ec03878', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '445e0548f0913426fe2eb730f291423d9165f839', 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-divider/bs-divider.cmp.test.js

@@ -0,0 +1,47 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-divider', () => {
+    it('defaults to a horizontal separator with ARIA', async () => {
+        const { root } = await render(h("div", null, h("bs-divider", null)));
+        const el = root.querySelector('bs-divider');
+        expect(el).toEqualAttribute('orientation', 'horizontal');
+        expect(el).toEqualAttribute('variant', 'default');
+        expect(el).toEqualAttribute('role', 'separator');
+        expect(el).toEqualAttribute('aria-orientation', 'horizontal');
+    });
+    it('decorative removes separator semantics', async () => {
+        const { root } = await render(h("div", null, h("bs-divider", { decorative: true })));
+        const el = root.querySelector('bs-divider');
+        expect(el).toEqualAttribute('role', 'none');
+        expect(el).toEqualAttribute('aria-hidden', 'true');
+        expect(el.hasAttribute('aria-orientation')).toBe(false);
+    });
+    it('vertical orientation sets aria-orientation and stretches to container height', async () => {
+        const { root } = await render(h("div", { style: { display: 'flex', height: '80px', width: '200px' } }, h("bs-divider", { orientation: "vertical" })));
+        const el = root.querySelector('bs-divider');
+        expect(el).toEqualAttribute('aria-orientation', 'vertical');
+        const r = el.getBoundingClientRect();
+        expect(Math.round(r.height)).toBe(80);
+        expect(Math.round(r.width)).toBe(1);
+    });
+    it('horizontal divider is full width and 1px thick', async () => {
+        const { root } = await render(h("div", { style: { width: '300px' } }, h("bs-divider", null)));
+        const r = root.querySelector('bs-divider').getBoundingClientRect();
+        expect(Math.round(r.width)).toBe(300);
+        expect(Math.round(r.height)).toBe(1);
+    });
+    it('inset indents the line', async () => {
+        const { root } = await render(h("div", { style: { width: '300px' } }, h("bs-divider", { id: "s", inset: "start" }), h("bs-divider", { id: "b", inset: "both" }), h("bs-divider", { id: "n" })));
+        const line = (id) => root.querySelector(`#${id}`).shadowRoot.querySelector('.line').getBoundingClientRect();
+        expect(Math.round(line('n').width)).toBe(300);
+        const start = line('s');
+        const both = line('b');
+        expect(start.width).toBeLessThan(300);
+        expect(both.width).toBeLessThan(start.width);
+        expect(Math.round(start.left - line('n').left)).toBeGreaterThan(0);
+    });
+    it('subtle variant uses a different colour than default', async () => {
+        const { root } = await render(h("div", null, h("bs-divider", { id: "d" }), h("bs-divider", { id: "s", variant: "subtle" })));
+        const bg = (id) => getComputedStyle(root.querySelector(`#${id}`).shadowRoot.querySelector('.line')).backgroundColor;
+        expect(bg('s')).not.toBe(bg('d'));
+    });
+});