@brandsync/wc 0.0.12 → 0.1.0

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

@@ -0,0 +1,64 @@
+:host {
+  display: inline-block;
+
+  --bs-checkbox-skeleton-size-sm: var(--bs-spacing-200);
+  --bs-checkbox-skeleton-size-md: var(--bs-spacing-250);
+  --bs-checkbox-skeleton-size-lg: var(--bs-spacing-300);
+  --bs-checkbox-skeleton-gap: var(--bs-spacing-100);
+  --bs-checkbox-skeleton-label-width: 96px;
+}
+
+.bs-checkbox-skeleton {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-checkbox-skeleton-gap);
+}
+
+.bs-checkbox-skeleton__box,
+.bs-checkbox-skeleton__label {
+  background: var(--bs-color-neutral-container);
+  animation: bs-checkbox-skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.bs-checkbox-skeleton__box {
+  flex-shrink: 0;
+  border-radius: var(--bs-border-radius-50);
+}
+
+.bs-checkbox-skeleton__box--sm {
+  width: var(--bs-checkbox-skeleton-size-sm);
+  height: var(--bs-checkbox-skeleton-size-sm);
+}
+
+.bs-checkbox-skeleton__box--md {
+  width: var(--bs-checkbox-skeleton-size-md);
+  height: var(--bs-checkbox-skeleton-size-md);
+}
+
+.bs-checkbox-skeleton__box--lg {
+  width: var(--bs-checkbox-skeleton-size-lg);
+  height: var(--bs-checkbox-skeleton-size-lg);
+}
+
+.bs-checkbox-skeleton__label {
+  width: var(--bs-checkbox-skeleton-label-width);
+  height: 16px;
+  border-radius: var(--bs-border-radius-50);
+}
+
+@keyframes bs-checkbox-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-checkbox-skeleton__box,
+  .bs-checkbox-skeleton__label {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,81 @@
+import { h } from "@stencil/core";
+/**
+ * A shape-matched loading placeholder for `bs-checkbox`, shown while the real label text isn't
+ * known yet (e.g. still being fetched from an API). Renders a small square (matching the
+ * checkbox's own box) beside a text-bar placeholder (standing in for the label), both pulsing
+ * together, sized to match `bs-checkbox`'s `sm`/`md`/`lg` box dimensions so layout doesn't shift
+ * once the real checkbox renders.
+ *
+ * ## When to use
+ * - In place of a `bs-checkbox` whose label/checked state depends on data that hasn't loaded yet.
+ *
+ * ## When not to use
+ * - While a checkbox's own change handler is running (e.g. a save request in flight) -- render the
+ *   real `bs-checkbox` itself; this component is not a saving-in-progress spinner.
+ *
+ * @part container - The outer wrapper holding both placeholder pieces.
+ * @part box - The pulsing placeholder standing in for the checkbox's own box.
+ * @part label - The pulsing placeholder bar standing in for the label text.
+ * @prop --bs-checkbox-skeleton-size-sm - Box width/height at `size="sm"`. Aliased to
+ *   `--bs-spacing-200`, mirroring `bs-checkbox`'s own `--bs-checkbox-size-sm` -- not read directly
+ *   from it, since these are two separate shadow roots.
+ * @prop --bs-checkbox-skeleton-size-md - Box width/height at `size="md"`. Aliased to
+ *   `--bs-spacing-250`.
+ * @prop --bs-checkbox-skeleton-size-lg - Box width/height at `size="lg"`. Aliased to
+ *   `--bs-spacing-300`.
+ * @prop --bs-checkbox-skeleton-gap - Gap between the box and label placeholders. Aliased to
+ *   `--bs-spacing-100`, mirroring `bs-checkbox`'s own `--bs-checkbox-gap`.
+ * @prop --bs-checkbox-skeleton-label-width - Width of the label placeholder bar. Defaults to
+ *   `96px`.
+ */
+export class BsCheckboxSkeleton {
+    /** Sizing scale, matching the `bs-checkbox` size it stands in for. Defaults to `lg`, the same
+     * (unusual) default `bs-checkbox` itself uses. */
+    size = 'lg';
+    render() {
+        return (h("span", { key: '3ce0fec776997d16edcb84d3fe46c461721230b1', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": "Loading" }, h("span", { key: 'b59ec36ba925cb95545a4836bfa3b631a5ac54f6', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: '847024bd9c5d30157fe2e2cf3ef7421c8741dc21', part: "label", class: "bs-checkbox-skeleton__label" })));
+    }
+    static get is() { return "bs-checkbox-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-checkbox-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-checkbox-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsCheckboxSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BsCheckboxSize": {
+                            "location": "import",
+                            "path": "../bs-checkbox",
+                            "id": "src/components/bs-checkbox/bs-checkbox.tsx::BsCheckboxSize",
+                            "referenceLocation": "BsCheckboxSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale, matching the `bs-checkbox` size it stands in for. Defaults to `lg`, the same\n(unusual) default `bs-checkbox` itself uses."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'lg'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,25 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../../stories-utils";
+const sizes = ['sm', 'md', 'lg'];
+const meta = {
+    title: 'Components/bs-checkbox-skeleton',
+    parameters: { docs: { description: { component: componentDescription('bs-checkbox-skeleton') } } },
+    render: args => html `<bs-checkbox-skeleton size=${args.size}></bs-checkbox-skeleton>`,
+    argTypes: {
+        size: { control: 'select', options: sizes, description: propDescription('bs-checkbox-skeleton', 'size') },
+    },
+    args: {
+        size: 'lg',
+    },
+};
+export default meta;
+export const Default = {};
+export const Sizes = {
+    render: () => html `
+    <div style="display:flex; flex-direction:column; gap:12px; align-items:flex-start;">
+      <bs-checkbox-skeleton size="sm"></bs-checkbox-skeleton>
+      <bs-checkbox-skeleton size="md"></bs-checkbox-skeleton>
+      <bs-checkbox-skeleton size="lg"></bs-checkbox-skeleton>
+    </div>
+  `,
+};

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

@@ -92,7 +92,7 @@ export class BsCheckbox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: '04fb1da55eb6a0e91fd705db9217f5e2c0992f89', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: '06b83f45f7dfe52cd81eab603742d04d74135c7a', ref: el => (this.inputEl = el), class: "bs-checkbox__input", type: "checkbox", checked: this.checked, disabled: this.disabled, "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'a8a8b45074eef7cfcb5f579eff0fb7b27b71d25a', part: "box", class: boxClasses }, showIcon && (h("svg", { key: '78cf717b4cd7fbf8c56a76788a22c8aecf7fcc28', part: "icon", class: "bs-checkbox__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, this.indeterminate ? (h("path", { d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })) : (h("path", { d: "M3 8.5L6.2 11.5L13 4.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("span", { key: '2d78205d8091c89ac3a6d07cbb74b6d6a9c09971', part: "label", class: "bs-checkbox__label" }, h("slot", { key: '7da0c6d1f84b788b242b95b11d78e566f482b48c' }))));
+        return (h("label", { key: '78f89b0841c20e030bf8af7384a870d9e660e44f', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: '254d622c1603c444272864f10bc6abccac825f76', ref: el => (this.inputEl = el), class: "bs-checkbox__input", type: "checkbox", checked: this.checked, disabled: this.disabled, "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '39d94a0d5e590b920082911400554185088a2ebe', part: "box", class: boxClasses }, showIcon && (h("svg", { key: '609448a396a59a9aad9d14eeb8c574d7255dc076', part: "icon", class: "bs-checkbox__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, this.indeterminate ? (h("path", { d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })) : (h("path", { d: "M3 8.5L6.2 11.5L13 4.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("span", { key: '16ed6f220ee2417837c2166c9369bff78638095d', part: "label", class: "bs-checkbox__label" }, h("slot", { key: 'd22610712a6bb1e41ecc72ae60c1e6a5df8e93da' }))));
     }
     static get is() { return "bs-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,6 +34,18 @@ const meta = {
 };
 export default meta;
 export const Default = {};
+export const Horizontal = {
+    // A layout demo, not a real prop -- bs-checkbox has no orientation/group concept of its own
+    // (unlike Carbon's <cds-checkbox-group>), so arranging multiple instances in a row is purely the
+    // consuming app's own flex/grid layout, same as the vertical stacking shown implicitly
+    // everywhere else in this file.
+    render: () => html `
+    <div style="display:flex; gap:24px; align-items:center;">
+      <bs-checkbox>Checkbox label</bs-checkbox>
+      <bs-checkbox>Checkbox label</bs-checkbox>
+    </div>
+  `,
+};
 export const Checked = {
     args: { checked: true },
 };

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

@@ -183,7 +183,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: '4d6ea6241693e45065388f34f9fe2c141eb6379f', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '952853cd4a36c5dc6057186825432616c5c99b38', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '65311f5b1f1b8fd1e6c9f33741a53c94bbe292b0', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '8699568430ff2140b0869a004a253e6c01e1984f', class: "bs-composer__text-row" }, h("textarea", { key: '5505815f7bb6ff19191ffea375fcd7fb856371fd', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: 'fd65f7928117afd583e3f1e2372cbb66305a530e', class: "bs-composer__controls-row" }, h("button", { key: '4e691d7ca567a4ece45601f47836d1ac7c5e2a1d', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'e363bbfcd346090dbceafd20d893af0903952223' })), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), h("button", { key: 'e0f113e189ec7ded494c7ef7cf91fe3e13df01bc', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: '3603219c2c3781a9e2894142313f84dfa52c21ed', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '3d143aa3f254310dba537c19a6ac4c40205a405d', name: "actions-end" }))));
+        return (h("div", { key: 'ee8e0a250798b3b5f9da6acde497779581c3b9ca', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: 'fe37e3bd240379513c97022b77635121ae100826', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'c6237cef8ebf742d6a68d513bd4366226317ec43', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: 'e88d294aba83e6a4c11f35095ae4efd58aeb9586', class: "bs-composer__text-row" }, h("textarea", { key: 'c6a123b0134e74fed67ec590a7ee9c0eaa238318', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: 'aab617b78bfd3bcd33d43f08669f6f1688238388', class: "bs-composer__controls-row" }, h("button", { key: 'db8147a8841c08786c725052fdbaa366718c9a2e', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'cc13f52bfc496bd2a530012917b098fe10dff27b' })), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), h("button", { key: '372d2751ea5dab5793314aa4469ef80ab28536a5', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: '4694605f9e970097290d0eabbc1d4815c3b3bfe2', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '71976baf242f384a2c69ef8561dda47d0a3739ae', name: "actions-end" }))));
     }
     static get is() { return "bs-composer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -106,7 +106,7 @@ export class BsComposerStatusBanner {
         return this.type === 'error' || this.type === 'warning' ? h(WarningIcon, null) : h(ClockIcon, null);
     }
     render() {
-        return (h("div", { key: '1c8597f28e99e0900448fade97c53fd21a945b68', role: this.roleForType(), class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: 'f4d0b098780368863d92c43bac129d58cea2ccfd', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: 'a713386fa868bdc244f9b84780fe1672c0a8f60e', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '8aa2007e7f744712c142f26d21bba54f6fa9dec7', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '000009a01e08ea49bd73f2d3490f1f13bfa9d597', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: 'd323a702a0f3f4f3cb16c23bb75d0f26a2b13b4b', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: 'b62fa5da8b4fb8c40004f955b9368b71ae0b054c', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: '4c8396f98eff345569ca9ca8940115aa4bc7c3f8' })))));
+        return (h("div", { key: 'f8f5ae2de96dc534f4e9c9a5f46fe28e3da57939', role: this.roleForType(), class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '28d77b1058c375afaba827f4dd4563b6cff058e4', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: 'aaa867907b3610a1e2a9be087d2d077cd1252503', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '1d0db69c42e4a23978655e86e16b9624f05a8edb', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: 'bdad9aaf7efa1d96afd07c9d214d7a2ee369c010', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: 'cf949f6cada1c35d91ebc7ec81c56ea9e9255c30', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '5108346a07f7bb3c23ea94c213f395212497b4e8', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: '7651748165308c30394ea312f227ff83eb7b1d1a' })))));
     }
     static get is() { return "bs-composer-status-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,11 +54,11 @@ export class BsDataTable {
         this.bsRowSelect.emit({ id: row.id, selected });
     };
     render() {
-        return (h("table", { key: 'b22d3029ddc85bd7125d69b53be2ed427cc7e3c4', part: "table", class: "bs-data-table" }, h("thead", { key: '469ff536b8e09ed6f866b1a883ad06f9df75f003', part: "head" }, h("tr", { key: '8394e3bfe1259bb2342a324ded83dfac41eb8271' }, this.selectable && h("th", { key: '9d2b97169b92b9e45209f91f855431901e8897c1', class: "bs-data-table__select-col" }), this.columns.map(column => {
+        return (h("table", { key: 'fa798fc4873097b91f1e5527836c9607630535ad', part: "table", class: "bs-data-table" }, h("thead", { key: '4ce731b46239412e2f87167ca678c0a9376a67dd', part: "head" }, h("tr", { key: '74fd0fb91c96b62e7ea97f85fb9e215ab5883af5' }, this.selectable && h("th", { key: '595ffb64be9ddb12851acc704e503653c623a385', class: "bs-data-table__select-col" }), 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: '8a9fa723abcb83820c489b8f07eab58ee306e491', 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: '1e46254b85803cbd3925b6a4bbc9ca0205816753', 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-modal/bs-modal.cmp.test.js → bs-dialog/bs-dialog.cmp.test.js}

@@ -1,15 +1,15 @@
 import { render, h, describe, it, expect, afterEach } from "@stencil/vitest";
-describe('bs-modal', () => {
+describe('bs-dialog', () => {
     afterEach(() => {
         document.querySelectorAll('button[data-test-trigger]').forEach(el => el.remove());
     });
     it('renders nothing when closed (default)', async () => {
-        const { root } = await render(h("bs-modal", { heading: "Confirm booking" }, "Body"));
+        const { root } = await render(h("bs-dialog", { heading: "Confirm booking" }, "Body"));
         expect(root.shadowRoot.querySelector('[part="backdrop"]')).toBeNull();
         expect(root.shadowRoot.querySelector('[part="dialog"]')).toBeNull();
     });
     it('renders the backdrop and dialog with correct a11y attributes when open', async () => {
-        const { root } = await render(h("bs-modal", { open: true, heading: "Confirm booking" }, "Body content"));
+        const { root } = await render(h("bs-dialog", { open: true, heading: "Confirm booking" }, "Body content"));
         const backdrop = root.shadowRoot.querySelector('[part="backdrop"]');
         const dialog = root.shadowRoot.querySelector('[part="dialog"]');
         expect(backdrop).toBeTruthy();
@@ -21,27 +21,71 @@ describe('bs-modal', () => {
     });
     ['sm', 'md', 'lg'].forEach(size => {
         it(`applies the "${size}" size class to the dialog`, async () => {
-            const { root } = await render(h("bs-modal", { open: true, size: size }, "Body"));
+            const { root } = await render(h("bs-dialog", { open: true, size: size }, "Body"));
             const dialog = root.shadowRoot.querySelector('[part="dialog"]');
-            expect(dialog).toHaveClass(`bs-modal__dialog--${size}`);
+            expect(dialog).toHaveClass(`bs-dialog__dialog--${size}`);
         });
     });
     it('defaults to the "md" size', async () => {
-        const { root } = await render(h("bs-modal", { open: true }, "Body"));
+        const { root } = await render(h("bs-dialog", { open: true }, "Body"));
         const dialog = root.shadowRoot.querySelector('[part="dialog"]');
-        expect(dialog).toHaveClass('bs-modal__dialog--md');
+        expect(dialog).toHaveClass('bs-dialog__dialog--md');
     });
     it('only shows the footer bar when the footer slot has content', async () => {
-        const { root: withoutFooter } = await render(h("bs-modal", { open: true }, "Body"));
+        const { root: withoutFooter } = await render(h("bs-dialog", { open: true }, "Body"));
         const footerWithout = withoutFooter.shadowRoot.querySelector('[part="footer"]');
-        expect(footerWithout).not.toHaveClass('bs-modal__footer--visible');
-        const { root: withFooter } = await render(h("bs-modal", { open: true }, "Body", h("button", { slot: "footer" }, "Confirm")));
+        expect(footerWithout).not.toHaveClass('bs-dialog__footer--visible');
+        const { root: withFooter } = await render(h("bs-dialog", { open: true }, "Body", h("button", { slot: "footer" }, "Confirm")));
         const footerWith = withFooter.shadowRoot.querySelector('[part="footer"]');
-        expect(footerWith).toHaveClass('bs-modal__footer--visible');
+        expect(footerWith).toHaveClass('bs-dialog__footer--visible');
         expect(withFooter).toHaveTextContent('Confirm');
     });
+    describe('image slot', () => {
+        it('has no visible image wrapper and an inline close button when the image slot is empty', async () => {
+            const { root } = await render(h("bs-dialog", { open: true }, "Body"));
+            const image = root.shadowRoot.querySelector('[part="image"]');
+            expect(image).not.toHaveClass('bs-dialog__image--visible');
+            const header = root.shadowRoot.querySelector('[part="header"]');
+            expect(header.querySelector('[part="close"]')).not.toBeNull();
+            expect(root.shadowRoot.querySelector('.bs-dialog__close--floating')).toBeNull();
+        });
+        it('shows the image wrapper and floats the close button when the image slot has content', async () => {
+            const { root } = await render(h("bs-dialog", { open: true }, "Body", h("img", { slot: "image", src: "hero.jpg", alt: "" })));
+            const image = root.shadowRoot.querySelector('[part="image"]');
+            expect(image).toHaveClass('bs-dialog__image--visible');
+            const floating = root.shadowRoot.querySelector('.bs-dialog__close--floating');
+            expect(floating).not.toBeNull();
+            const header = root.shadowRoot.querySelector('[part="header"]');
+            expect(header.querySelector('[part="close"]')).toBeNull();
+            // Exactly one close button total, not both the floating and inline variants at once.
+            expect(root.shadowRoot.querySelectorAll('[part="close"]').length).toBe(1);
+        });
+    });
+    describe('centered layout', () => {
+        it('reflects the centered attribute, defaulting to false', async () => {
+            const { root } = await render(h("bs-dialog", { open: true }, "Body"));
+            expect(root).not.toHaveAttribute('centered');
+        });
+        it('renders an icon wrapper, centers the header/body, and floats the close button', async () => {
+            const { root } = await render(h("bs-dialog", { open: true, centered: true, heading: "All set" }, "Body", h("span", { slot: "icon" }, "\u2713")));
+            expect(root).toHaveAttribute('centered');
+            const icon = root.shadowRoot.querySelector('[part="icon"]');
+            expect(icon).not.toBeNull();
+            expect(icon).toHaveClass('bs-dialog__icon--visible');
+            const header = root.shadowRoot.querySelector('[part="header"]');
+            expect(header).toHaveClass('bs-dialog__header--centered');
+            const body = root.shadowRoot.querySelector('[part="body"]');
+            expect(body).toHaveClass('bs-dialog__body--centered');
+            expect(header.querySelector('[part="close"]')).toBeNull();
+            expect(root.shadowRoot.querySelector('.bs-dialog__close--floating')).not.toBeNull();
+        });
+        it('does not render an icon wrapper at all when not centered, even with a slotted icon', async () => {
+            const { root } = await render(h("bs-dialog", { open: true }, "Body", h("span", { slot: "icon" }, "\u2713")));
+            expect(root.shadowRoot.querySelector('[part="icon"]')).toBeNull();
+        });
+    });
     it('closes and emits bsClose when the close button is clicked', async () => {
-        const { root, spyOnEvent, waitForChanges } = await render(h("bs-modal", { open: true, heading: "Confirm booking" }, "Body"));
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-dialog", { open: true, heading: "Confirm booking" }, "Body"));
         const closeSpy = spyOnEvent('bsClose');
         const closeButton = root.shadowRoot.querySelector('[part="close"]');
         closeButton.click();
@@ -51,7 +95,7 @@ describe('bs-modal', () => {
         expect(root.shadowRoot.querySelector('[part="dialog"]')).toBeNull();
     });
     it('closes when the backdrop itself is clicked, but not when the dialog inside it is clicked', async () => {
-        const { root, spyOnEvent, waitForChanges } = await render(h("bs-modal", { open: true }, "Body"));
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-dialog", { open: true }, "Body"));
         const closeSpy = spyOnEvent('bsClose');
         const dialog = root.shadowRoot.querySelector('[part="dialog"]');
         dialog.click();
@@ -65,7 +109,7 @@ describe('bs-modal', () => {
         expect(root).not.toHaveAttribute('open');
     });
     it('closes on Escape keydown while open', async () => {
-        const { root, spyOnEvent, waitForChanges } = await render(h("bs-modal", { open: true }, "Body"));
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-dialog", { open: true }, "Body"));
         const closeSpy = spyOnEvent('bsClose');
         document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
         await waitForChanges();
@@ -73,14 +117,14 @@ describe('bs-modal', () => {
         expect(root).not.toHaveAttribute('open');
     });
     it('does not react to Escape when closed', async () => {
-        const { spyOnEvent, waitForChanges } = await render(h("bs-modal", null, "Body"));
+        const { spyOnEvent, waitForChanges } = await render(h("bs-dialog", null, "Body"));
         const closeSpy = spyOnEvent('bsClose');
         document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
         await waitForChanges();
         expect(closeSpy.length).toBe(0);
     });
     it('moves focus into the dialog when opened', async () => {
-        const { root } = await render(h("bs-modal", { open: true }, "Body"));
+        const { root } = await render(h("bs-dialog", { open: true }, "Body"));
         const dialog = root.shadowRoot.querySelector('[part="dialog"]');
         expect(root.shadowRoot.activeElement).toBe(dialog);
     });
@@ -89,7 +133,7 @@ describe('bs-modal', () => {
         outside.setAttribute('data-test-trigger', '');
         outside.textContent = 'outside';
         document.body.appendChild(outside);
-        const { root } = await render(h("bs-modal", { open: true }, "Body"));
+        const { root } = await render(h("bs-dialog", { open: true }, "Body"));
         const dialog = root.shadowRoot.querySelector('[part="dialog"]');
         outside.focus();
         expect(root.shadowRoot.activeElement).toBe(dialog);
@@ -97,11 +141,11 @@ describe('bs-modal', () => {
     it('captures the previously focused element on open and restores focus to it on close', async () => {
         const trigger = document.createElement('button');
         trigger.setAttribute('data-test-trigger', '');
-        trigger.textContent = 'open modal';
+        trigger.textContent = 'open dialog';
         document.body.appendChild(trigger);
         trigger.focus();
         expect(document.activeElement).toBe(trigger);
-        const { root, setProps, waitForChanges } = await render(h("bs-modal", null, "Body"));
+        const { root, setProps, waitForChanges } = await render(h("bs-dialog", null, "Body"));
         await setProps({ open: true });
         const dialog = root.shadowRoot.querySelector('[part="dialog"]');
         expect(root.shadowRoot.activeElement).toBe(dialog);

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

@@ -0,0 +1,130 @@
+.bs-dialog__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--bs-z-index-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.bs-dialog__dialog {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - var(--bs-spacing-800));
+  background: var(--bs-surface-base);
+  /* Only .bs-dialog__heading set a themed color before this -- body/footer slot content had no
+     color rule anywhere in this file, so it inherited whatever color the *consuming page* happened
+     to have, not this dialog's own dark/light-themed token. Invisible in dark mode specifically
+     because the surface flipped dark via --bs-surface-raised while the text stayed whatever the
+     page's own default was. Setting it here gives every slotted section a themed default to
+     inherit, unless a section (like heading) needs its own explicit override anyway. */
+  color: var(--bs-text-default);
+  border-radius: var(--bs-border-radius-200);
+  box-shadow: var(--bs-shadow-xl);
+  font-family: inherit;
+}
+
+.bs-dialog__dialog--sm {
+  width: 360px;
+}
+.bs-dialog__dialog--md {
+  width: 560px;
+}
+.bs-dialog__dialog--lg {
+  width: 800px;
+}
+
+/* Vertical rhythm follows the Figma "Dialog" spec: 16px between the dialog edge/image/icon and the
+   heading, 8px between the heading and body content, 16px between the body and footer/dialog edge
+   -- no divider lines anywhere. Achieved with a mix of each section's own padding (top 16, bottom 8
+   here) and the sibling-selector rule below, rather than a single flex `gap` on the dialog, since a
+   `gap` would add unwanted space even when the preceding image/icon wrapper is empty. */
+.bs-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bs-spacing-200) var(--bs-spacing-200) var(--bs-spacing-100);
+}
+
+/* The image/icon wrapper above already provides its own bottom margin when it has content (see
+   .bs-dialog__image--visible / .bs-dialog__icon--visible below) -- without this, the header's own
+   top padding would stack on top of that margin for a doubled gap. */
+.bs-dialog__image--visible + .bs-dialog__header,
+.bs-dialog__icon--visible + .bs-dialog__header {
+  padding-top: 0;
+}
+
+.bs-dialog__heading {
+  font-size: var(--bs-font-size-lg);
+  font-weight: var(--bs-font-weight-semibold);
+  color: var(--bs-text-default);
+}
+
+/* Both close buttons are real <bs-icon-button> elements now (variant="subtle" inline in the header,
+   variant="neutral" floating -- that variant/token pairing is an exact match for the Figma "Dialog"
+   spec's raised, bordered floating close, confirmed against bs-icon-button.css's own token aliases),
+   so this only needs to position the floating one -- everything else (size, background, border,
+   hover/focus states) already comes from bs-icon-button itself. */
+.bs-dialog__close--floating {
+  position: absolute;
+  top: var(--bs-spacing-200);
+  right: var(--bs-spacing-200);
+  z-index: 1;
+}
+
+.bs-dialog__body {
+  /* No top padding -- the header's own bottom padding (8px) already provides the heading-to-body
+     gap, so this only needs to handle the sides and the bottom gap to the footer/dialog edge. */
+  padding: 0 var(--bs-spacing-200) var(--bs-spacing-200);
+  overflow-y: auto;
+}
+
+.bs-dialog__body--centered {
+  text-align: center;
+}
+
+.bs-dialog__footer--visible {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--bs-spacing-200);
+  /* No top padding -- the body's own bottom padding (16px) already provides the body-to-footer
+     gap, avoiding a doubled gap. */
+  padding: 0 var(--bs-spacing-200) var(--bs-spacing-200);
+}
+
+/* Empty by default (no padding/margin) -- only visible when the image slot has content, same
+   "reserve no space when empty" pattern as .bs-dialog__footer--visible above. */
+.bs-dialog__image--visible {
+  overflow: hidden;
+  border-radius: var(--bs-border-radius-200) var(--bs-border-radius-200) 0 0;
+  margin-bottom: var(--bs-spacing-200);
+}
+
+.bs-dialog__image--visible ::slotted(img) {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+/* Only rendered at all when `centered` is true (see render()) -- empty by default, same
+   "reserve no space when empty" pattern as .bs-dialog__footer--visible above. */
+.bs-dialog__icon--visible {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--bs-spacing-200) var(--bs-spacing-200) 0;
+  margin-bottom: var(--bs-spacing-200);
+}
+
+.bs-dialog__icon--visible ::slotted(*) {
+  width: 64px;
+  height: 64px;
+}
+
+.bs-dialog__header--centered {
+  justify-content: center;
+  text-align: center;
+}