@brandsync/wc 1.19.0 → 1.20.0

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);
+}

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

@@ -0,0 +1,127 @@
+import { h } from "@stencil/core";
+/**
+ * A key/value list of `bs-description-item` pairs (term and detail), for record summaries, settings read-outs
+ * and metadata panels. Terms and details use real `dt`/`dd` semantics.
+ *
+ * ## When to use
+ * - A read-only summary of one record: "Owner", "Created", "Status" with their values.
+ *
+ * ## When not to use
+ * - A list of records with media and actions -- use `bs-list`.
+ * - Editable fields -- use form components.
+ * - Several records compared across columns -- use `bs-data-table`.
+ *
+ * Built from `bs-description-item` children (light DOM; the list never moves nodes). Each item holds its own
+ * `dl`; the list sets the layout on them and draws dividers.
+ *
+ * @slot - The `bs-description-item` children.
+ * @part list - The list container (`role="group"`).
+ * @prop --bs-description-list-divider-color - Divider colour when `dividers` is set. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-description-list-gap - Gap between items. `0`.
+ */
+export class BsDescriptionList {
+    el;
+    /** `stacked` puts each term above its detail; `horizontal` puts them side by side in two columns. */
+    layout = 'stacked';
+    /** Draws a 1px separator between items. */
+    dividers = false;
+    /** Accessible name of the group. */
+    ariaLabel = null;
+    onLayout() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    sync() {
+        Array.from(this.el.children)
+            .filter(c => c.tagName === 'BS-DESCRIPTION-ITEM')
+            .forEach(i => (i.layout = this.layout));
+    }
+    render() {
+        return (h("div", { key: '626f9b04c01bffb558e69260c934484464fbe261', part: "list", class: "bs-description-list", role: "group", "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: 'c895fdcbbbe761f6323b706dcadafe07556a3583', onSlotchange: () => this.sync() })));
+    }
+    static get is() { return "bs-description-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-description-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-description-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'stacked' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"stacked\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`stacked` puts each term above its detail; `horizontal` puts them side by side in two columns."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'stacked'"
+            },
+            "dividers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Draws a 1px separator between items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dividers",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "layout",
+                "methodName": "onLayout"
+            }];
+    }
+}

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

@@ -0,0 +1,34 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-description-list',
+    parameters: { docs: { description: { component: componentDescription('bs-description-list') } } },
+    argTypes: {
+        layout: { control: 'select', options: ['stacked', 'horizontal'] },
+        dividers: { control: 'boolean' },
+    },
+    args: { layout: 'horizontal', dividers: true },
+    render: args => html `
+    <bs-description-list style="width: 480px" aria-label="Project details" layout=${args.layout} ?dividers=${args.dividers}>
+      <bs-description-item term="Owner" description="Sam Lee"></bs-description-item>
+      <bs-description-item term="Created" description="12 March 2026"></bs-description-item>
+      <bs-description-item term="Status"><bs-tag color="success">Active</bs-tag></bs-description-item>
+      <bs-description-item term="Description" description="A short description of the project that may wrap onto several lines when the container is narrow."></bs-description-item>
+    </bs-description-list>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Stacked = { args: { layout: 'stacked', dividers: false } };
+export const WithRichContent = {
+    name: 'With rich content',
+    render: () => html `
+    <bs-description-list style="width: 480px" aria-label="Contact" layout="horizontal">
+      <bs-description-item term="Email"><a href="mailto:sam@example.com">sam@example.com</a></bs-description-item>
+      <bs-description-item>
+        <span slot="term">Topics</span>
+        <span style="display:flex;gap:4px"><bs-tag>Design</bs-tag><bs-tag color="info">Research</bs-tag></span>
+      </bs-description-item>
+    </bs-description-list>
+  `,
+};

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

@@ -28,7 +28,7 @@ export class BsDivider {
         const a11y = this.decorative
             ? { role: 'none', 'aria-hidden': 'true' }
             : { role: 'separator', 'aria-orientation': orientation };
-        return (h(Host, { key: 'e075bd62e465491383d5377676b87c297f32f623', ...a11y }, h("div", { key: '0eb6f8b8b36d4da2ead95d19193e111060ca0b10', class: "line", part: "line" })));
+        return (h(Host, { key: 'bf2c91df3dccb2fc5d546c0d119aebc8c7f9a7b1', ...a11y }, h("div", { key: '9bc6e29a09dcf9240a457a324d24e4dcb659870f', class: "line", part: "line" })));
     }
     static get is() { return "bs-divider"; }
     static get encapsulation() { return "shadow"; }