@brandsync/wc 1.19.0 → 1.20.1

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

@@ -234,7 +234,7 @@ export class BsComposer {
         const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
         const disabled = this.state === 'disabled';
         const recording = this.state === 'recording';
-        return (h("div", { key: 'd63357675cbf508fc50014a9e2d3c8224bdc0108', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: 'be65e62348956075f765621cb30e76063d85b9e3', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '8a1bcb47e809ea09db6918a90df7e3ffd5b6e57d', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: 'a07dff798906b0532b439c0cb02c0dcee4d87f5d', class: "bs-composer__text-row" }, h("textarea", { key: 'b86a424e4012daa5a7fa8074e742fdc52bff87b8', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, maxLength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: 'e7c4feda7f407f92372415561fa137c3fc124a6e', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: '5d5dad6b3e4e63a0affa27f7522586919b8ba66c', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: 'd1df5c9d4071e2dede7acd9c3923d264b14cea43' }))), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), !this.hideMic && (h("button", { key: 'cb1ca37ee7ce02fb4bfd0fabf762d16030cf5b43', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? this.stopRecordingLabel : this.micLabel, disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null))), h("button", { key: 'c0ca786da9492d16c3a86b4a4f81683aeb2fac0f', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, "aria-busy": this.loading && this.state === 'idle' ? 'true' : undefined, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '040cc29528d369ef8e8a513058b1b7379cbb6c4a', name: "actions-end" }))));
+        return (h("div", { key: '416af7040863eddb84e74ebb4148cb4faada3675', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '2d8c75e0c5ad5302095ff5b51b5c665f6c3c1714', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'd967bd26e1e417b099619697050a96a53025b1db', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '34c6123ba8cb5bce5e62b3832be0ce8a817a38af', class: "bs-composer__text-row" }, h("textarea", { key: '844bd0b04b04ea5e770b03a95b65e6f49af57a33', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, maxLength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: '4683c6ed4feb2d41f0fb945db3f387c8a102a740', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: 'df65b9e140f61740ac341ae4d609863661720122', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: '1d0d5b0b7a1bfa32720c814c80a0320c2198e8b1' }))), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), !this.hideMic && (h("button", { key: '0512fbc4c613b090bac142bf8fc2ee13e65b2a98', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? this.stopRecordingLabel : this.micLabel, disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null))), h("button", { key: 'd0652637c61e950df6b2f385de679d8c59e6d1fb', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, "aria-busy": this.loading && this.state === 'idle' ? 'true' : undefined, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '765a453bf75e9d6030f0552cd7b2d12ff8951a6d', name: "actions-end" }))));
     }
     static get is() { return "bs-composer"; }
     static get encapsulation() { return "shadow"; }
@@ -668,5 +668,7 @@ const PlusIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "h
 const MicIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8 9.5C9.10457 9.5 10 8.60457 10 7.5V3.5C10 2.39543 9.10457 1.5 8 1.5C6.89543 1.5 6 2.39543 6 3.5V7.5C6 8.60457 6.89543 9.5 8 9.5Z", stroke: "currentColor", "stroke-width": "1.4" }), h("path", { d: "M3.5 7V7.5C3.5 9.98528 5.51472 12 8 12C10.4853 12 12.5 9.98528 12.5 7.5V7", stroke: "currentColor", "stroke-width": "1.4", "stroke-linecap": "round" }), h("path", { d: "M8 12V14.5", stroke: "currentColor", "stroke-width": "1.4", "stroke-linecap": "round" })));
 // Exact "PaperPlaneRight" path from the Figma design (node 45:95), not a hand-drawn approximation.
 const SendIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M13.5 12H7.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M4.54594 20.745C4.4932 20.889 4.48589 21.0457 4.52499 21.1941C4.56409 21.3424 4.64771 21.4751 4.76459 21.5744C4.88147 21.6737 5.02599 21.7348 5.17866 21.7494C5.33133 21.7641 5.48482 21.7315 5.61844 21.6562L21.3684 12.6478C21.4857 12.583 21.5834 12.4879 21.6514 12.3725C21.7195 12.2571 21.7553 12.1255 21.7553 11.9916C21.7553 11.8576 21.7195 11.7261 21.6514 11.6107C21.5834 11.4952 21.4857 11.4002 21.3684 11.3353L5.61844 2.34937C5.48523 2.27487 5.33245 2.24278 5.18052 2.2574C5.02859 2.27201 4.88474 2.33264 4.76817 2.43117C4.65161 2.5297 4.56788 2.66145 4.52817 2.80882C4.48846 2.9562 4.49466 3.11218 4.54594 3.25594L7.5 12L4.54594 20.745Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
-const StopIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("rect", { x: "6", y: "6", width: "8", height: "8", rx: "1.5", fill: "currentColor" })));
+// 24x24 viewBox like the send icon, with a 14px square (Phosphor "Stop" proportions) so the glyph
+// is visually in line with the other 24px action icons (#47) instead of a tiny 8px-of-20 square.
+const StopIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("rect", { x: "5", y: "5", width: "14", height: "14", rx: "2", fill: "currentColor" })));
 const CheckIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M4.5 10.5L8 14L15.5 6", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })));

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

@@ -24,7 +24,6 @@ const meta = {
         variant: 'ai',
         state: 'idle',
         value: '',
-        placeholder: '',
     },
 };
 export default meta;
@@ -63,7 +62,7 @@ export const AllStates = {
             <h4 style="margin:0; font-family: sans-serif; text-transform: capitalize;">${variant}</h4>
             ${states.map(state => html `
                 <div>
-                  <div style="font-size: 12px; font-family: monospace; color: #888; margin-bottom: 4px;">${state}</div>
+                  <div style="font-size: 12px; font-family: monospace; color: var(--bs-text-secondary); margin-bottom: 4px;">${state}</div>
                   <bs-composer
                     variant=${variant}
                     state=${state}

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

@@ -113,7 +113,7 @@ export class BsComposerStatusBanner {
         return this.type === 'error' || this.type === 'warning' ? h(WarningIcon, null) : h(ClockIcon, null);
     }
     render() {
-        return (h("div", { key: '275d6a4c6eae013bf2f9804857baba9d0a2917a8', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '756473764a79392e539a0f0ec724374866385c0b', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: 'e49eebafc231aa5987967672df2b9ffe2b3f951e', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '1047ceaf71e08f90bb7224aee6207a65e9fefd4d', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: 'a0433bc0d21420bc561e0fdccfdfc75cb76f8bf3', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '4291b58cc42d22395fe831eda2850725fcc3bda9', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '91d659760339c80414a59ef65bf053f9ad0aaceb', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '47c78a3753c2a62c0a859771b89102bc974b32a6' })))));
+        return (h("div", { key: '4173ee7cafd8b0a9de1c42726f34603c0ea6a077', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '7e942c33c06a1a806533571f613ddb8a78f8fbea', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '3de54acd3358d58a92ab78e8d1414a12a26a7425', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '15ad484ca165d4b22b36ee060c74ba8dd7ea6c1c', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '85334062e6ca408cfbcb2d7bedbfdc13b386966a', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: 'a045fcb54035c3b99c9fc4fc1e0d6de0f23ebf65', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: 'b40d66a3f2f1859d71c72e1de33e8b40391f6d72', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '2836eb8a2f2ff9e3f20fe07dd67d7ec7bc184104' })))));
     }
     static get is() { return "bs-composer-status-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class BsContainer {
     padding = '300';
     render() {
         const pad = SPACING_TOKENS.includes(String(this.padding)) ? String(this.padding) : '300';
-        return (h(Host, { key: '340c37cb6fc2d4b45a8581a49e70914c56f6d41e', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '1c20b5de141a8329e9eb6c086073b7afab41b506' })));
+        return (h(Host, { key: '354c927b3ce1a6958b59ae15f8c6e560cbb828d2', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '06c33b3028219e8cd771aceae1253c2239d34432' })));
     }
     static get is() { return "bs-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-cookie-consent/bs-cookie-consent.cmp.test.js

@@ -206,7 +206,7 @@ describe('bs-cookie-consent', () => {
             expect(bar.shadowRoot.querySelector('[part="action"]').getBoundingClientRect().height).toBe(44);
         });
         it('is 660x64 with the message on one line, as in the Figma', async () => {
-            const { root: wrap } = await render(h("div", { style: { width: '700px' } }, h("bs-cookie-consent", { type: "saved", description: "Cookie choices saved. Change them any time under Settings \u203A Privacy." })));
+            const { root: wrap } = await render(h("div", { style: { width: '700px' } }, h("bs-cookie-consent", { type: "saved", description: "Cookie choices saved." })));
             await wait(200);
             const bar = wrap.querySelector('bs-cookie-consent').shadowRoot.querySelector('[part="container"]');
             const box = bar.getBoundingClientRect();

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

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { resolveColor, withTheme } from "../../test/helpers/contrast";
 const columns = [
     { key: 'name', label: 'Name' },
     { key: 'status', label: 'Status' },
@@ -124,4 +125,42 @@ describe('bs-data-table', () => {
             expect(cell.querySelector('button')).not.toBeNull();
         });
     });
+    describe('striped', () => {
+        const rowBg = (root, i) => getComputedStyle(root.shadowRoot.querySelectorAll('tbody tr')[i]).backgroundColor;
+        it('reflects the attribute and tints only even rows', async () => {
+            const { root } = await render(h("bs-data-table", { striped: true, columns: columns, rows: rows }));
+            expect(root).toHaveAttribute('striped');
+            expect(rowBg(root, 1)).not.toBe(rowBg(root, 0));
+            expect(rowBg(root, 2)).toBe(rowBg(root, 0));
+        });
+        it('has no stripes by default', async () => {
+            const { root } = await render(h("bs-data-table", { columns: columns, rows: rows }));
+            expect(rowBg(root, 1)).toBe(rowBg(root, 0));
+        });
+    });
+    describe('slotted cells', () => {
+        it('shows the text value as the slot fallback', async () => {
+            const { root } = await render(h("bs-data-table", { columns: columns, rows: rows }));
+            expect(root.shadowRoot.querySelector('slot[name="cell-2-name"]').textContent).toBe('Noah');
+        });
+        it('lets app-owned content (a link) fill one cell through its named slot', async () => {
+            const { root } = await render(h("bs-data-table", { columns: columns, rows: rows }, h("a", { slot: "cell-2-name", href: "/people/2" }, "Noah (profile)")));
+            const slot = root.shadowRoot.querySelector('slot[name="cell-2-name"]');
+            const assigned = slot.assignedElements();
+            expect(assigned.length).toBe(1);
+            expect(assigned[0].tagName).toBe('A');
+            expect(assigned[0].getAttribute('href')).toBe('/people/2');
+        });
+    });
+    describe('cell text colour (#30)', () => {
+        for (const theme of ['light', 'dark']) {
+            it(`cell text uses --bs-text-default (${theme}), not hard-coded black`, async () => {
+                await withTheme(theme, async () => {
+                    const { root } = await render(h("bs-data-table", { columns: columns, rows: rows }));
+                    const cell = root.shadowRoot.querySelector('td[part="cell"]');
+                    expect(getComputedStyle(cell).color).toBe(resolveColor(document.body, 'var(--bs-text-default)', 'color'));
+                });
+            });
+        }
+    });
 });

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

@@ -1,7 +1,11 @@
+/**
+ * @prop --bs-data-table-stripe-bg: Background of even rows when `striped` is set. Aliased to --bs-surface-container.
+ */
 :host {
   display: block;
   --bs-data-table-cell-padding-y: var(--bs-spacing-200);
   --bs-data-table-cell-padding-x: var(--bs-spacing-300);
+  --bs-data-table-stripe-bg: var(--bs-surface-container);
 }
 
 .bs-data-table {
@@ -46,6 +50,14 @@
   background: var(--bs-surface-hover);
 }
 
+:host([striped]) .bs-data-table__row:nth-child(even) {
+  background: var(--bs-data-table-stripe-bg);
+}
+
+:host([striped]) .bs-data-table__row:nth-child(even):hover {
+  background: var(--bs-surface-hover);
+}
+
 .bs-data-table__cell {
   padding: var(--bs-data-table-cell-padding-y) var(--bs-data-table-cell-padding-x);
   border-bottom: 1px solid var(--bs-border-default);

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

@@ -13,6 +13,14 @@ import { h } from "@stencil/core";
  * - A handful of unrelated key/value pairs — a simple list or card is lighter-weight.
  * - Deeply nested/hierarchical data — this component renders one flat row per record.
  *
+ * ## Rich cells
+ * Without a `cellRenderer`, each cell is a named slot, `cell-{row.id}-{column.key}`, whose fallback
+ * content is the plain-text value. Slot an element into it to put app-owned content (a framework
+ * component, a router link, a badge) in the cell, e.g.
+ * `<a slot="cell-7-name" href="/people/7">Ada</a>`. The slotted element lives in the light DOM, so
+ * it keeps your framework, router and CSP; nothing is parsed as HTML.
+ *
+ * @slot cell-{row.id}-{column.key} - Content for one cell (see "Rich cells"). Falls back to the text value.
  * @part table - The `<table>` element.
  * @part head - The `<thead>` element.
  * @part body - The `<tbody>` element.
@@ -31,6 +39,9 @@ export class BsDataTable {
     /** Accessible name of the select-all checkbox in the header (when `selectable`). */
     selectAllLabel = 'Select all rows';
     selectable = false;
+    /** Alternates the row background (even rows use `--bs-data-table-stripe-bg`) so wide tables are
+     * easier to scan. Follows dark mode through the token. Row hover still wins. */
+    striped = false;
     /** Optional custom cell renderer, for rich cells such as a status badge, a link or an actions
      * column. It returns an **HTML string** that is inserted into the cell as real markup
      * (`innerHTML`), so links, buttons, `<img>` and other web components (e.g. `<bs-badge>`) all render.
@@ -87,18 +98,18 @@ export class BsDataTable {
         }
     }
     render() {
-        return (h("table", { key: '646bdc772d8911e9531c8e7a0085c23cf400c5f9', part: "table", class: "bs-data-table" }, h("thead", { key: 'b18ad41e0aa107b8051dde2126456ba5fd86ec44', part: "head" }, h("tr", { key: '67ee2efb68900f4d240fbc3ef4291f4b7ae0ad0b' }, this.selectable && (h("th", { key: 'ccc73b67cc1533c654237e8132224271738fa731', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'b7cf76aeead033daaea4650b90abbacba4a72341', 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: '926affd6c90d3f9516167f3f07542913b07d714d', part: "table", class: "bs-data-table" }, h("thead", { key: '9021847d503e03b37536302563b24888e18f64e9', part: "head" }, h("tr", { key: 'af5c3076c3897e4be2e2f3e7e240055dde68d754' }, this.selectable && (h("th", { key: 'db71370df983428f7b699aeeb60372da8d1139bb', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'fe9dc0bc55a1ed1433fd3003d277665a875f7d6e', 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: 'e4d8dc0dbaa0a223442bdf307dce7c05f54547b9', 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: '6985b636936af350a333f768bc43772f18fc34d9', 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.
         h("td", { part: "cell", class: "bs-data-table__cell", innerHTML: this.cellRenderer(row, column) })) : (
         // Default path renders raw cell values as plain text so untrusted row data
         // (e.g. user-submitted names) can never be interpreted as HTML.
-        h("td", { part: "cell", class: "bs-data-table__cell" }, String(row[column.key] ?? ''))))))))));
+        h("td", { part: "cell", class: "bs-data-table__cell" }, h("slot", { name: `cell-${row.id}-${column.key}` }, String(row[column.key] ?? '')))))))))));
     }
     static get is() { return "bs-data-table"; }
     static get encapsulation() { return "shadow"; }
@@ -241,6 +252,26 @@ export class BsDataTable {
                 "attribute": "selectable",
                 "defaultValue": "false"
             },
+            "striped": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternates the row background (even rows use `--bs-data-table-stripe-bg`) so wide tables are\neasier to scan. Follows dark mode through the token. Row hover still wins."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "striped",
+                "defaultValue": "false"
+            },
             "cellRenderer": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -49,7 +49,7 @@ export const WithCustomCellRenderer = {
         const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
         table.cellRenderer = (row, column) => {
             if (column.key === 'actions') {
-                return `<button type="button">Edit</button>`;
+                return `<bs-button variant="outlined" size="sm">Edit</bs-button>`;
             }
             if (column.key === 'status') {
                 // Rich content: a web component in the cell.

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: '7ec1a401f3de27dbfca02cec5bafddfd65ddb8b1', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: '39ef955d7175fbaf485a138ad7bbe3fd00133700', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '304ef15f46dc9dfd30a3fdee1e4d9b4a8a31fd86', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '01ae2998d09497afb4b16950629287e0d6def2d4', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: '7d9063f139f079abc906f43458e19bc21b3b05cb', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '7142cdbf7bfd7db26516831ab55c7d9203ab2485', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '492425990862fa53c2be547c7bf8d56b9c369109', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '895f8b4ad72fa0e801b9dcc4701f9b69aad72e83', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '998a268f59503b92a7f7ca0b4832c79d9ee48e78', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '22e141eb617d5a0b009f005bf18abe95c1189efe', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'e6fd0113d7682efee354bce15f74591cf7b9cc30', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: 'e4000fda3ac22ac7d382a89d1e5741bb4555ac8c', 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: '92780338a3445e50b007a7cb5e3a1c828b4940fc', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: 'b10133e7e8118883ceb26f966374c496c69532a2', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '63b1c50d661dfef4dc08d74ac8755e987a0df351', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '892a09a63a605846793249823b2665786a861fe8', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: 'ceca34bacadf2f85807fcdbb232b1cfc8454596e', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '3e5216c57b9766af6b59d24b5839cfa8ee33ede8', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '6d3903664523fad5a42d166192ffbbca6859fc8b', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '9c0ea361806f4b3bfd41039d3aa67d454f87756f', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: 'f2b4a787273c279c7ddc29be6400d862d4bf7f7f', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '6d9ef54bc661fe49524d0aadb14f5c390f682066', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '92f08374522cdcfcf3becc286e1d6db5b057c0e2', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: 'afe8522de3a56479bd2ca64a4f492564391ede74', 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-description-item/bs-description-item.cmp.test.js

@@ -0,0 +1,14 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+describe('bs-description-item', () => {
+    it('renders the term and description props as dt and dd', async () => {
+        const { root } = await render(h("bs-description-item", { term: "Owner", description: "Sam Lee" }));
+        expect(root.shadowRoot.querySelector('dt').textContent).toBe('Owner');
+        expect(root.shadowRoot.querySelector('dd').textContent).toBe('Sam Lee');
+        expect(root).toEqualAttribute('layout', 'stacked');
+    });
+    it('passes axe standalone', async () => {
+        const { root } = await render(h("bs-description-item", { term: "Owner", description: "Sam Lee" }));
+        await runAxeCheck(root);
+    });
+});

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

@@ -0,0 +1,47 @@
+:host {
+  display: block;
+  --bs-description-item-gap: var(--bs-spacing-25);
+  --bs-description-item-term-width: 12rem;
+  --bs-description-item-column-gap: var(--bs-spacing-200);
+  --bs-description-item-padding-y: var(--bs-spacing-100);
+  --bs-description-item-term-color: var(--bs-text-secondary);
+  --bs-description-item-description-color: var(--bs-text-default);
+}
+
+.bs-description-item {
+  margin: 0;
+  padding: var(--bs-description-item-padding-y) 0;
+  font-family: inherit;
+  font-size: var(--bs-font-size-md);
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+}
+
+.bs-description-item__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-description-item-gap);
+}
+:host([layout='horizontal']) .bs-description-item__group {
+  flex-direction: row;
+  column-gap: var(--bs-description-item-column-gap);
+}
+
+.bs-description-item__term {
+  color: var(--bs-description-item-term-color);
+  font-weight: var(--bs-font-weight-semibold);
+}
+:host([layout='horizontal']) .bs-description-item__term {
+  flex: 0 0 var(--bs-description-item-term-width);
+  max-width: 40%;
+}
+
+.bs-description-item__description {
+  margin: 0;
+  min-width: 0;
+  color: var(--bs-description-item-description-color);
+  font-weight: var(--bs-font-weight-regular);
+  overflow-wrap: anywhere;
+}
+:host([layout='horizontal']) .bs-description-item__description {
+  flex: 1 1 0;
+}

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

@@ -0,0 +1,111 @@
+import { h } from "@stencil/core";
+/**
+ * One term and its detail inside a `bs-description-list` (a label/value pair such as "Owner: Sam Lee").
+ *
+ * ## When to use
+ * - As a child of `bs-description-list`, one per key/value pair.
+ *
+ * ## When not to use
+ * - Rows of records with media and actions -- use `bs-list-item`.
+ * - Many pairs compared across several records -- use `bs-data-table`.
+ *
+ * Each item renders its own `<dl>` containing one `<div>` group with a real `<dt>` and `<dd>`. (A `dl` cannot
+ * span the shadow boundary between a list and its items, so the grouping lives here.)
+ *
+ * @slot term - Rich content for the term (replaces `term`).
+ * @slot - Rich content for the detail (replaces `description`).
+ * @part container - The `dl`.
+ * @part term - The `dt`.
+ * @part description - The `dd`.
+ * @prop --bs-description-item-gap - Gap between term and detail when stacked. Aliased to `--bs-spacing-25`.
+ * @prop --bs-description-item-term-width - Width of the term column when `layout="horizontal"`. `12rem`.
+ * @prop --bs-description-item-column-gap - Gap between the term and detail columns when horizontal. Aliased to `--bs-spacing-200`.
+ * @prop --bs-description-item-padding-y - Vertical padding. Aliased to `--bs-spacing-100`.
+ * @prop --bs-description-item-term-color - Aliased to `--bs-text-secondary`.
+ * @prop --bs-description-item-description-color - Aliased to `--bs-text-default`.
+ */
+export class BsDescriptionItem {
+    /** The term (label). */
+    term;
+    /** The detail (value). The default slot overrides it. */
+    description;
+    /** Set by the parent `bs-description-list`: `stacked` (term above detail) or `horizontal` (side by side). */
+    layout = 'stacked';
+    render() {
+        return (h("dl", { key: '024107fb73e46aab14097d62e5d9622bf830b5ff', part: "container", class: "bs-description-item" }, h("div", { key: '792dec31c23ba91f2ecb4813b6d8bff44c1fbfb2', class: "bs-description-item__group" }, h("dt", { key: 'c50c7e36dd1c614783cabd10c5b3c41119aff870', part: "term", class: "bs-description-item__term" }, h("slot", { key: '45f3a3f19e0eb5e0a7c6e7b3216a6e97bdd9a021', name: "term" }, this.term)), h("dd", { key: '40fcd3edb99b6239e745bf7ca52a445a01e3630b', part: "description", class: "bs-description-item__description" }, h("slot", { key: '5163c715defebb9a0a124fb915e509d47d870ddc' }, this.description)))));
+    }
+    static get is() { return "bs-description-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-description-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-description-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "term": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The term (label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "term"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The detail (value). The default slot overrides it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'stacked' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"stacked\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the parent `bs-description-list`: `stacked` (term above detail) or `horizontal` (side by side)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'stacked'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,58 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { assertShadowParts, assertCssCustomProperties, runAxeCheck } from "../../test/helpers/conventions";
+const mount = (props = {}) => render(h("bs-description-list", { ariaLabel: "Project details", ...props }, h("bs-description-item", { term: "Owner", description: "Sam Lee" }), h("bs-description-item", { term: "Status" }, h("bs-tag", { color: "success" }, "Active"))));
+const items = (root) => Array.from(root.querySelectorAll('bs-description-item'));
+describe('bs-description-list', () => {
+    it('is a named group and defaults to the stacked layout on its items', async () => {
+        const { root, waitForChanges } = await mount();
+        await waitForChanges();
+        const list = root.shadowRoot.querySelector('[part="list"]');
+        expect(list.getAttribute('role')).toBe('group');
+        expect(list.getAttribute('aria-label')).toBe('Project details');
+        expect(items(root).every(i => i.getAttribute('layout') === 'stacked')).toBe(true);
+        assertShadowParts(root.shadowRoot, ['list']);
+        assertCssCustomProperties(root, ['--bs-description-list-divider-color']);
+    });
+    it('propagates layout="horizontal" to items, including later changes', async () => {
+        const { root, waitForChanges } = await mount({ layout: 'horizontal' });
+        await waitForChanges();
+        expect(items(root).every(i => i.getAttribute('layout') === 'horizontal')).toBe(true);
+        root.layout = 'stacked';
+        await waitForChanges();
+        expect(items(root).every(i => i.getAttribute('layout') === 'stacked')).toBe(true);
+    });
+    it('items render real dl/dt/dd with term and detail', async () => {
+        const { root } = await mount();
+        const sr = items(root)[0].shadowRoot;
+        expect(sr.querySelector('dl > div > dt').textContent).toContain('Owner');
+        expect(sr.querySelector('dl > div > dd').textContent).toContain('Sam Lee');
+        assertShadowParts(sr, ['container', 'term', 'description']);
+        assertCssCustomProperties(items(root)[0], ['--bs-description-item-term-color', '--bs-description-item-padding-y']);
+    });
+    it('slotted detail replaces the description prop and the term slot replaces the term prop', async () => {
+        const { root } = await render(h("bs-description-item", { term: "Prop term", description: "Prop detail" }, h("span", { slot: "term" }, "Slot term"), h("span", null, "Slot detail")));
+        const term = root.shadowRoot.querySelector('slot[name="term"]');
+        const detail = root.shadowRoot.querySelector('dd slot');
+        expect(term.assignedElements()[0].textContent).toBe('Slot term');
+        expect(detail.assignedElements()[0].textContent).toBe('Slot detail');
+    });
+    it('horizontal puts term and detail side by side; stacked puts them in a column', async () => {
+        const { root, waitForChanges } = await mount({ layout: 'horizontal' });
+        await waitForChanges();
+        const g = (i) => getComputedStyle(i.shadowRoot.querySelector('.bs-description-item__group')).flexDirection;
+        expect(g(items(root)[0])).toBe('row');
+        root.layout = 'stacked';
+        await waitForChanges();
+        expect(g(items(root)[0])).toBe('column');
+    });
+    it('dividers draws a border between items but not after the last', async () => {
+        const { root } = await mount({ dividers: true });
+        const [a, b] = items(root);
+        expect(getComputedStyle(a).borderBottomWidth).toBe('1px');
+        expect(getComputedStyle(b).borderBottomWidth).toBe('0px');
+    });
+    it('passes axe (stacked and horizontal)', async () => {
+        const { root } = await render(h("div", null, h("bs-description-list", { ariaLabel: "A" }, h("bs-description-item", { term: "Owner", description: "Sam" }), h("bs-description-item", { term: "Created", description: "2026-01-01" })), h("bs-description-list", { ariaLabel: "B", layout: "horizontal", dividers: true }, h("bs-description-item", { term: "Owner", description: "Sam" }))));
+        await runAxeCheck(root);
+    });
+});

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

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+  --bs-description-list-gap: 0;
+  --bs-description-list-divider-color: var(--bs-border-neutral-container);
+}
+
+.bs-description-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-description-list-gap);
+}
+
+:host([dividers]) ::slotted(bs-description-item:not(:last-child)) {
+  border-bottom: 1px solid var(--bs-description-list-divider-color);
+}