@fusion.dev/helix-headless 0.22.0 → 0.24.0

package/dist/data-table/root/data-table-root.js

@@ -5,25 +5,31 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { customElement, HelixElement, HelixFilterEvent, HelixNavigateEvent, HelixSortEvent, hostAria, MixinCollection, requestChange, slotFilled, VirtualizeController, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixFilterEvent, HelixNavigateEvent, HelixReorderEvent, HelixSelectEvent, HelixSortEvent, hostAria, MixinCollection, requestChange, slotFilled, VirtualizeController, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
+import { at } from '../../table/column/table-column.js';
+import '../../checkbox/index.js';
 import '../../pagination/index.js';
 import { arranged, cycle, format, ordered, parse, window_, } from './order.js';
 let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
         this.defaultFilter = '';
+        this.defaultOrder = '';
         this.defaultPage = 1;
         this.defaultPageSize = 0;
+        this.defaultSelected = '';
         this.defaultSort = '';
         this.estimate = 32;
-        this.key = '';
         this.label = '';
         this.mode = 'client';
+        this.reorderable = false;
+        this.rowKey = '';
         this.rows = [];
+        this.selectable = false;
         this.total = 0;
         this.windowed = false;
         this.sortState = undefined;
@@ -31,6 +37,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.pageState = undefined;
         this.pageSizeState = undefined;
         this.paginatedState = undefined;
+        this.orderState = undefined;
+        this.selectedState = undefined;
+        this.dragOrder = undefined;
+        this.warnedAboutKey = false;
         this.virtualize = new VirtualizeController(this, {
             container: () => this.windowed ? this.renderRoot.querySelector('[part="table"]') : null,
             count: () => this.available,
@@ -39,6 +49,33 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             rows: () => (this.windowed ? this.drawn() : []),
         });
         this.warnedAboutSize = false;
+        this.toggleRow = (key, event) => {
+            event.preventDefault();
+            const keys = this.chosen;
+            if (event.detail.checked) {
+                keys.add(key);
+            }
+            else {
+                keys.delete(key);
+            }
+            this.requestSelected(keys);
+        };
+        this.toggleAll = (event) => {
+            event.preventDefault();
+            const every = this.everyKey;
+            const keys = this.chosen;
+            if (every.length > 0 && every.every((key) => keys.has(key))) {
+                for (const key of every) {
+                    keys.delete(key);
+                }
+            }
+            else {
+                for (const key of every) {
+                    keys.add(key);
+                }
+            }
+            this.requestSelected(keys);
+        };
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
@@ -49,21 +86,74 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             }
         };
         this.handleHeadClick = (event) => {
+            if (this.partIn(event, 'grip') || this.partIn(event, 'resizer')) {
+                return;
+            }
             const column = this.columnFrom(event);
             if (column?.canSort) {
                 this.toggleSort(column.field);
             }
         };
-        this.handleHeadKey = (event) => {
-            if (event.key !== 'Enter' && event.key !== ' ') {
+        this.handleGripKey = (event) => {
+            if (!this.partIn(event, 'grip')) {
                 return;
             }
             const column = this.columnFrom(event);
-            if (column?.canSort) {
+            const forward = getComputedStyle(this).direction === 'rtl' ? -1 : 1;
+            const by = event.key === 'ArrowRight' ? forward : event.key === 'ArrowLeft' ? -forward : 0;
+            if (column && by !== 0) {
                 event.preventDefault();
-                this.toggleSort(column.field);
+                this.moveColumn(column.field, by);
+            }
+        };
+        this.handleGripDown = (event) => {
+            if (event.button !== 0 || !this.partIn(event, 'grip')) {
+                return;
+            }
+            const column = this.columnFrom(event);
+            if (!column?.field) {
+                return;
+            }
+            this.dragging = { field: column.field, pointer: event.pointerId };
+            this.dragOrder = this.fields;
+            window.addEventListener('pointermove', this.handleGripMove);
+            window.addEventListener('pointerup', this.handleGripUp);
+            window.addEventListener('pointercancel', this.handleGripCancel);
+        };
+        this.handleGripMove = (event) => {
+            const dragging = this.dragging;
+            if (!dragging || event.pointerId !== dragging.pointer || !this.dragOrder) {
+                return;
+            }
+            const rtl = getComputedStyle(this).direction === 'rtl';
+            const others = this.orderedColumns.filter((column) => column.field !== '' && column.field !== dragging.field);
+            const place = others.filter((column) => {
+                const box = column.shadowRoot?.querySelector('[part="column"]')?.getBoundingClientRect();
+                if (!box) {
+                    return false;
+                }
+                const middle = box.left + box.width / 2;
+                return rtl ? event.clientX < middle : event.clientX > middle;
+            }).length;
+            const next = others.map((column) => column.field);
+            next.splice(place, 0, dragging.field);
+            if (next.join(' ') !== this.dragOrder.join(' ')) {
+                this.dragOrder = next;
+            }
+        };
+        this.handleGripUp = () => {
+            const wanted = this.dragOrder;
+            this.stopDrag();
+            if (wanted && wanted.join(' ') !== this.fields.join(' ')) {
+                this.requestOrder(wanted);
             }
         };
+        this.handleGripCancel = () => {
+            this.stopDrag();
+        };
+        this.handleResize = () => {
+            queueMicrotask(() => this.requestUpdate());
+        };
         this.handleNavigate = (event) => {
             event.stopPropagation();
             const wanted = Number(event.detail.value);
@@ -102,6 +192,22 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.pageState = next;
         this.requestUpdate('page', previous);
     }
+    get order() {
+        return this.orderState ?? this.defaultOrder;
+    }
+    set order(next) {
+        const previous = this.order;
+        this.orderState = next;
+        this.requestUpdate('order', previous);
+    }
+    get selected() {
+        return this.selectedState ?? this.defaultSelected;
+    }
+    set selected(next) {
+        const previous = this.selected;
+        this.selectedState = next;
+        this.requestUpdate('selected', previous);
+    }
     get pageSize() {
         return Math.max(0, Math.floor(this.pageSizeState ?? this.defaultPageSize) || 0);
     }
@@ -150,7 +256,24 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return rows.slice(first, last);
     }
     get tableColumns() {
-        return [...(this.children ?? [])].filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
+        return this.knownChildren.filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
+    }
+    get orderedColumns() {
+        const columns = this.tableColumns;
+        const wanted = this.dragOrder ?? this.order.split(/[\s,]+/).filter(Boolean);
+        if (wanted.length === 0) {
+            return columns;
+        }
+        const rank = new Map(wanted.map((field, place) => [field, place]));
+        const moving = columns
+            .filter((column) => column.field !== '')
+            .sort((a, b) => (rank.get(a.field) ?? Number.POSITIVE_INFINITY) -
+            (rank.get(b.field) ?? Number.POSITIVE_INFINITY));
+        let next = 0;
+        return columns.map((column) => (column.field === '' ? column : (moving[next++] ?? column)));
+    }
+    get fields() {
+        return this.orderedColumns.filter((column) => column.field !== '').map((column) => column.field);
     }
     get axes() {
         return this.tableColumns
@@ -158,8 +281,12 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             .map((column) => ({ field: column.field, order: (row) => column.order(row) }));
     }
     get template() {
-        const declared = this.tableColumns;
-        return declared.length > 0 ? declared.map((column) => column.track).join(' ') : '';
+        const declared = this.orderedColumns;
+        if (declared.length === 0) {
+            return '';
+        }
+        const tracks = declared.map((column) => column.track).join(' ');
+        return this.selectable ? `max-content ${tracks}` : tracks;
     }
     static { this.COMFORTABLE = 2_000; }
     warnIfCrowded(drawn) {
@@ -235,6 +362,78 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             next,
         });
     }
+    requestOrder(fields) {
+        return requestChange({
+            apply: (value) => {
+                const previous = this.order;
+                this.orderState = value;
+                this.requestUpdate('order', previous);
+            },
+            event: (value) => new HelixReorderEvent({ value }),
+            host: this,
+            next: fields.join(' '),
+        });
+    }
+    requestSelected(keys) {
+        return requestChange({
+            apply: (value) => {
+                const previous = this.selected;
+                this.selectedState = value;
+                this.requestUpdate('selected', previous);
+            },
+            event: (value) => new HelixSelectEvent({ value }),
+            host: this,
+            next: [...keys].join(','),
+        });
+    }
+    get chosen() {
+        return new Set(this.selected
+            .split(',')
+            .map((key) => key.trim())
+            .filter(Boolean));
+    }
+    keyOf(row, place) {
+        if (this.rowKey) {
+            const value = at(row, this.rowKey);
+            return value === undefined || value === null ? String(place) : String(value);
+        }
+        if (this.selectable && !this.warnedAboutKey && typeof window !== 'undefined') {
+            this.warnedAboutKey = true;
+            console.warn(`<${this.localName} selectable> has no \`row-key\`, so it knows each row by its place in the result, and a sort, a filter or new data selects a different row than the one that was chosen. Set \`row-key\` to the field that identifies a row.`);
+        }
+        return String(place);
+    }
+    get everyKey() {
+        const rows = this.mode === 'server' ? this.rows : this.arrange().rows;
+        return rows.map((row, place) => this.keyOf(row, place));
+    }
+    moveColumn(field, by) {
+        const fields = this.fields;
+        const from = fields.indexOf(field);
+        const to = from + by;
+        if (from < 0 || to < 0 || to >= fields.length) {
+            return false;
+        }
+        fields.splice(to, 0, ...fields.splice(from, 1));
+        return this.requestOrder(fields);
+    }
+    csv() {
+        const columns = this.orderedColumns.filter((column) => column.field !== '');
+        const rows = this.mode === 'server' ? this.rows : this.arrange().rows;
+        const quote = (value) => {
+            if (value === undefined || value === null) {
+                return '';
+            }
+            let text = String(value);
+            if (typeof value === 'string' && /^[=+\-@\t\r]/.test(text)) {
+                text = `'${text}`;
+            }
+            return /[",\r\n]/.test(text) ? `"${text.replaceAll('"', '""')}"` : text;
+        };
+        const head = columns.map((column) => quote(column.textContent?.trim() || column.field));
+        const body = rows.map((row) => columns.map((column) => quote(at(row, column.field))));
+        return [head, ...body].map((line) => line.join(',')).join('\r\n');
+    }
     requestFilter(next) {
         return requestChange({
             apply: (value) => {
@@ -273,11 +472,18 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         if (!root?.querySelector) {
             return;
         }
+        if (this.assignsByName) {
+            const single = root.querySelector('slot[name="columns"]') !== null;
+            this.orderedColumns.forEach((column, index) => {
+                this.route(column, single ? 'columns' : `column-${index + 1}`);
+            });
+            return;
+        }
         const head = root.querySelector('slot[name="columns"]');
         if (!head?.assign) {
             return;
         }
-        const columns = this.tableColumns;
+        const columns = this.orderedColumns;
         head.assign(...columns);
         const rest = [...this.children].filter((child) => !columns.includes(child));
         for (const [name, wanted] of [
@@ -293,6 +499,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label || 'Table', role: 'grid' });
+        this.internals.ariaMultiSelectable = this.selectable ? 'true' : null;
         const placement = this.placement;
         if (changed.has('rows') || placement !== this.measuredAgainst) {
             this.measuredAgainst = placement;
@@ -321,6 +528,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     announceSort() {
         const current = parse(this.sort);
         for (const column of this.tableColumns) {
+            column.movable = this.reorderable && column.field !== '';
             column.sorted =
                 current && column.canSort && column.field === current.field
                     ? current.direction === 'asc'
@@ -337,18 +545,39 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
       >${column.read(row)}</span
     >`;
     }
+    renderCheckbox(name, checked, indeterminate, toggle) {
+        const checkbox = this.tag('checkbox');
+        return html `<${checkbox}
+      part="checkbox"
+      exportparts="box: checkbox-box, control: checkbox-control, feedback: checkbox-feedback,
+        field: checkbox-field, hint: checkbox-hint, label: checkbox-label, mark: checkbox-mark"
+      aria-label=${name}
+      .checked=${checked}
+      .indeterminate=${indeterminate}
+      @helix-before-toggle=${toggle}
+    ></${checkbox}>`;
+    }
     renderRows(rows) {
-        const columns = this.tableColumns;
-        const field = this.key;
+        const columns = this.orderedColumns;
+        const field = this.rowKey;
         const start = this.windowStart;
-        return html `${repeat(rows, (row, index) => (field ? String(row[field] ?? start + index) : start + index), (row, index) => html `<div
-        part="row"
-        role="row"
-        aria-rowindex=${this.rowIndex(index)}
-        data-index=${this.windowed ? start + index : nothing}
-      >
-        ${columns.map((column) => this.renderCell(column, row))}
-      </div>`)}`;
+        const chosen = this.selectable ? this.chosen : undefined;
+        const named = columns.find((column) => column.field !== '');
+        return html `${repeat(rows, (row, index) => (field ? String(row[field] ?? start + index) : start + index), (row, index) => {
+            const key = chosen ? this.keyOf(row, this.rowIndex(index) - 2) : '';
+            const picked = chosen?.has(key) ?? false;
+            return html `<div
+          part="row"
+          role="row"
+          aria-rowindex=${this.rowIndex(index)}
+          aria-selected=${chosen ? String(picked) : nothing}
+          data-index=${this.windowed ? start + index : nothing}
+        >
+          ${chosen
+                ? html `<span part="select" role="gridcell">${this.renderCheckbox(`Select ${named ? String(named.order(row) ?? key) : key}`, picked, false, (event) => this.toggleRow(key, event))}</span>`
+                : nothing}${columns.map((column) => this.renderCell(column, row))}
+        </div>`;
+        })}`;
     }
     rowIndex(within) {
         const size = this.pageSize;
@@ -370,6 +599,12 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             ? html `<div part="before" role="presentation" style="block-size: ${before}px"></div>`
             : html `<div part="after" role="presentation" style="block-size: ${after}px"></div>`;
     }
+    renderSelectAll() {
+        const every = this.everyKey;
+        const keys = this.chosen;
+        const count = every.filter((key) => keys.has(key)).length;
+        return html `<span part="select-all" role="columnheader">${this.renderCheckbox('Select every row', every.length > 0 && count === every.length, count > 0 && count < every.length, this.toggleAll)}</span>`;
+    }
     render() {
         const { available, matched, rows } = this.view;
         const template = this.template;
@@ -381,12 +616,14 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         role="rowgroup"
         aria-busy=${this.loading ? 'true' : nothing}
         aria-rowcount=${this.mode === 'server' ? Math.max(this.total, available) + 1 : matched + 1}
-        aria-colcount=${columns.length || nothing}
+        aria-colcount=${columns.length ? columns.length + (this.selectable ? 1 : 0) : nothing}
         style=${template ? `--data-table-template: ${template}` : nothing}
         @scroll=${this.handleScroll}
       >
         <div part="head" role="row">
-          <slot name="columns" @slotchange=${this.handleSlotChange}></slot>
+          ${this.selectable ? this.renderSelectAll() : nothing}${this.assignsByName && !this.hydrating
+            ? this.orderedColumns.map((_, index) => html `<slot name=${`column-${index + 1}`} @slotchange=${this.handleSlotChange}></slot>`)
+            : html `<slot name="columns" @slotchange=${this.handleSlotChange}></slot>`}
         </div>
         ${this.renderSpacer('before')}${this.renderRows(rows)}${this.renderSpacer('after')}
         ${this.renderStatus(available > 0)}
@@ -407,12 +644,29 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('click', this.handleHeadClick);
-        this.addEventListener('keydown', this.handleHeadKey);
+        this.addEventListener('keydown', this.handleGripKey);
+        this.addEventListener('pointerdown', this.handleGripDown);
+        this.addEventListener('helix-before-resize', this.handleResize);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('click', this.handleHeadClick);
-        this.removeEventListener('keydown', this.handleHeadKey);
+        this.removeEventListener('keydown', this.handleGripKey);
+        this.removeEventListener('pointerdown', this.handleGripDown);
+        this.removeEventListener('helix-before-resize', this.handleResize);
+        this.stopDrag();
+    }
+    partIn(event, name) {
+        return event
+            .composedPath()
+            .some((node) => node instanceof Element && node.getAttribute('part') === name);
+    }
+    stopDrag() {
+        this.dragging = undefined;
+        this.dragOrder = undefined;
+        window.removeEventListener('pointermove', this.handleGripMove);
+        window.removeEventListener('pointerup', this.handleGripUp);
+        window.removeEventListener('pointercancel', this.handleGripCancel);
     }
     columnFrom(event) {
         const columns = this.tableColumns;
@@ -427,12 +681,18 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
 __decorate([
     property({ attribute: 'default-filter' })
 ], HelixHeadlessDataTable.prototype, "defaultFilter", void 0);
+__decorate([
+    property({ attribute: 'default-order' })
+], HelixHeadlessDataTable.prototype, "defaultOrder", void 0);
 __decorate([
     property({ attribute: 'default-page', type: Number })
 ], HelixHeadlessDataTable.prototype, "defaultPage", void 0);
 __decorate([
     property({ attribute: 'default-page-size', type: Number })
 ], HelixHeadlessDataTable.prototype, "defaultPageSize", void 0);
+__decorate([
+    property({ attribute: 'default-selected' })
+], HelixHeadlessDataTable.prototype, "defaultSelected", void 0);
 __decorate([
     property({ attribute: 'default-sort' })
 ], HelixHeadlessDataTable.prototype, "defaultSort", void 0);
@@ -444,22 +704,34 @@ __decorate([
 ], HelixHeadlessDataTable.prototype, "sort", null);
 __decorate([
     property()
-], HelixHeadlessDataTable.prototype, "key", void 0);
+], HelixHeadlessDataTable.prototype, "label", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "filter", null);
 __decorate([
     property()
-], HelixHeadlessDataTable.prototype, "label", void 0);
+], HelixHeadlessDataTable.prototype, "mode", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "page", null);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessDataTable.prototype, "reorderable", void 0);
 __decorate([
     property()
-], HelixHeadlessDataTable.prototype, "mode", void 0);
+], HelixHeadlessDataTable.prototype, "order", null);
+__decorate([
+    property({ attribute: 'row-key' })
+], HelixHeadlessDataTable.prototype, "rowKey", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDataTable.prototype, "rows", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessDataTable.prototype, "selectable", void 0);
+__decorate([
+    property()
+], HelixHeadlessDataTable.prototype, "selected", null);
 __decorate([
     property({ attribute: 'page-size', type: Number })
 ], HelixHeadlessDataTable.prototype, "pageSize", null);
@@ -487,6 +759,15 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessDataTable.prototype, "paginatedState", void 0);
+__decorate([
+    state()
+], HelixHeadlessDataTable.prototype, "orderState", void 0);
+__decorate([
+    state()
+], HelixHeadlessDataTable.prototype, "selectedState", void 0);
+__decorate([
+    state()
+], HelixHeadlessDataTable.prototype, "dragOrder", void 0);
 HelixHeadlessDataTable = HelixHeadlessDataTable_1 = __decorate([
     customElement('helix-headless-data-table')
 ], HelixHeadlessDataTable);

package/dist/description-list/index.d.ts

@@ -0,0 +1,2 @@
+export * from './item/description-list-item.js';
+export * from './root/description-list-root.js';

package/dist/description-list/index.js

@@ -0,0 +1,2 @@
+export * from './item/description-list-item.js';
+export * from './root/description-list-root.js';

package/dist/description-list/item/description-list-item.d.ts

@@ -0,0 +1,39 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type TemplateResult } from 'lit';
+/**
+ * @summary One label and its value.
+ *
+ * @description
+ * An element rather than a pair of slots on the list, because a pair is the
+ * unit a reader hears: the label is the `<dt>` and the value its `<dd>`, and the
+ * two stay together however the list lays them out.
+ *
+ * The value is the default slot, since it is what varies and is often more
+ * than text: a tag, an avatar, a link. The label is text almost every time, so
+ * it is also a property.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @documentation https://helix.fusion.dev/components/description-list
+ *
+ * @slot - The value.
+ * @slot label - The label, when it is more than text. Falls back to `label`.
+ *
+ * @csspart label - The `<dt>`, holding the label.
+ * @csspart value - The `<dd>`, holding the value.
+ */
+export declare class HelixHeadlessDescriptionListItem extends HelixElement {
+    /**
+     * What the value is, for the common case of plain text.
+     *
+     * The fallback of the `label` slot, so slotted content replaces it rather than
+     * appearing beside it.
+     */
+    label: string;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-description-list-item': HelixHeadlessDescriptionListItem;
+    }
+}

package/dist/description-list/item/description-list-item.js

@@ -0,0 +1,26 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+let HelixHeadlessDescriptionListItem = class HelixHeadlessDescriptionListItem extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+    }
+    render() {
+        return html `<dt part="label"><slot name="label">${this.label}</slot></dt>
+      <dd part="value"><slot></slot></dd>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessDescriptionListItem.prototype, "label", void 0);
+HelixHeadlessDescriptionListItem = __decorate([
+    customElement('helix-headless-description-list-item')
+], HelixHeadlessDescriptionListItem);
+export { HelixHeadlessDescriptionListItem };

package/dist/description-list/root/description-list-root.d.ts

@@ -0,0 +1,56 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type TemplateResult } from 'lit';
+/**
+ * @summary Labels and their values, read as pairs: the details panel every
+ * product has.
+ *
+ * @description
+ * "Owner: Ada, Region: us-east, Created: 3 days ago" is the commonest panel in
+ * any console, and built from layout primitives it is a run of adjacent text:
+ * nothing tells a screen reader that a label and a value belong together, or
+ * how many pairs there are. This renders the element the platform has for it,
+ * a `<dl>`, with each item's label a `<dt>` and its value a `<dd>`.
+ *
+ * **The items render their own term and description**, and the list takes them
+ * through its slot. The accessibility tree is built from the flattened tree, so
+ * the pairs reach it inside the list rather than beside it. Measured in
+ * Chromium's tree rather than assumed, because a list whose semantics stopped
+ * at a shadow boundary would look identical on screen: one description list
+ * holding term and definition pairs, node for node what a plain `<dl>` with the
+ * same content produces, with a slotted label and with an item drawn as
+ * `display: contents` alike.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category data
+ * @aliases Data list, Key-value list, Details, Properties
+ * @documentation https://helix.fusion.dev/components/description-list
+ *
+ * @slot - The items.
+ *
+ * @csspart list - The `<dl>` holding the items.
+ */
+export declare class HelixHeadlessDescriptionList extends HelixElement {
+    /**
+     * Whether each label sits over its value or beside it.
+     *
+     * Absent is a column, the label over the value, which fits any width and is
+     * how a narrow panel reads. `row` puts every label in one column and every
+     * value in the next, which is how a wide panel is scanned: down the labels to
+     * the one wanted, then across.
+     *
+     * On the list rather than on each item, because beside only reads when the
+     * labels line up, and lining up is a fact about all of them.
+     *
+     * **Optional rather than defaulted to `column`**, for the reason `Stat` gives:
+     * a reflecting default writes an attribute onto markup the consumer rendered,
+     * and React reports that as a hydration mismatch.
+     */
+    direction?: 'row';
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-description-list': HelixHeadlessDescriptionList;
+    }
+}

package/dist/description-list/root/description-list-root.js

@@ -0,0 +1,21 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+let HelixHeadlessDescriptionList = class HelixHeadlessDescriptionList extends HelixElement {
+    render() {
+        return html `<dl part="list"><slot></slot></dl>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessDescriptionList.prototype, "direction", void 0);
+HelixHeadlessDescriptionList = __decorate([
+    customElement('helix-headless-description-list')
+], HelixHeadlessDescriptionList);
+export { HelixHeadlessDescriptionList };