@fieldia/viewer 0.7.0 → 0.9.0

package/src/lib/list-groups.mjs

@@ -0,0 +1,83 @@
+/** A group's name as a person reads it: the choice's label, yes or no, the linked record's name, or None. */
+function groupName(context, field, group) {
+    const def = context.page.fields[field];
+    if (group.value === null)
+        return context.labels.none;
+    if (def.type === 'selection')
+        return def.options.find((o) => o.value === group.value)?.label ?? group.label;
+    if (def.type === 'boolean')
+        return group.value ? context.labels.yes : context.labels.no;
+    return group.label || String(group.value);
+}
+/** Take away every row under a group: its records, its groups and theirs. */
+function closeUnder(tr) {
+    const level = Number(tr.dataset['level']);
+    let next = tr.nextElementSibling;
+    while (next && Number(next.dataset['level'] ?? 0) > level) {
+        const after = next.nextElementSibling;
+        next.remove();
+        next = after;
+    }
+}
+/**
+ * A group's row: its name and how many records it holds. Opened, it shows
+ * the next field's groups under it, or at the last field its records, a page
+ * at a time; closed, everything under it goes.
+ */
+export function groupRow(context, group, level, within, grouping) {
+    const { el, labels } = context;
+    const field = grouping[level];
+    const filter = [...within, group.value === null ? { field, op: 'notset', value: null } : { field, op: '=', value: group.value }];
+    const toggle = el('button', { type: 'button', class: 'fd-group-toggle', 'aria-expanded': 'false' }, el('span', { class: 'fd-group-label' }, groupName(context, field, group)), ' ', el('span', { class: 'fd-group-count' }, `(${group.count})`));
+    const tr = el('tr', { class: 'fd-list-group', 'data-level': String(level), 'aria-level': String(level + 1) }, el('td', { colspan: String(context.columns) }, toggle));
+    tr.style.setProperty('--fd-level', String(level));
+    let opening = false;
+    async function open() {
+        opening = true;
+        try {
+            const rows = level + 1 < grouping.length
+                ? (await context.dataSource.groups?.({ model: context.model, field: grouping[level + 1], filter }))?.map((inner) => groupRow(context, inner, level + 1, filter, grouping)) ?? []
+                : await recordsFrom(0);
+            // Closed, or the list drawn again, while the answer was on its way.
+            if (!tr.isConnected || toggle.getAttribute('aria-expanded') !== 'true')
+                return;
+            tr.after(...rows);
+            context.changed();
+        }
+        finally {
+            opening = false;
+        }
+    }
+    /** A page of the group's records, from `offset`, and a row for the rest when there are more. */
+    async function recordsFrom(offset) {
+        const answer = await context.dataSource.list({ model: context.model, fields: context.fields, filter, sort: context.sort(), offset, limit: context.pageSize });
+        const rows = answer.records.map((record) => context.recordRow(record, level + 1));
+        const left = answer.total - offset - answer.records.length;
+        if (left <= 0)
+            return rows;
+        const more = el('button', { type: 'button', class: 'fd-button fd-button-link' }, context.fill(labels.loadMore, { n: left }));
+        const moreRow = el('tr', { class: 'fd-list-more', 'data-level': String(level + 1) }, el('td', { colspan: String(context.columns) }, more));
+        moreRow.style.setProperty('--fd-level', String(level));
+        more.addEventListener('click', async () => {
+            more.disabled = true;
+            const next = await recordsFrom(offset + answer.records.length);
+            if (!moreRow.isConnected)
+                return;
+            moreRow.replaceWith(...next);
+            context.changed();
+        });
+        return [...rows, moreRow];
+    }
+    toggle.addEventListener('click', () => {
+        const opened = toggle.getAttribute('aria-expanded') === 'true';
+        toggle.setAttribute('aria-expanded', String(!opened));
+        if (opened) {
+            closeUnder(tr);
+            context.changed();
+        }
+        else if (!opening)
+            void open();
+    });
+    return tr;
+}
+//# sourceMappingURL=list-groups.mjs.map

package/src/lib/list-groups.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-groups.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/list-groups.ts"],"names":[],"mappings":"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"}

package/src/lib/list-styles.d.mts

@@ -0,0 +1,4 @@
+/** The list's look, on the same tokens as the forms it opens. */
+export declare const LIST_STYLES = "\n.fd-list { display: grid; gap: 10px; min-width: 0; }\n.fd-list [hidden] { display: none !important; }\n.fd-list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 34px; }\n.fd-search { position: relative; flex: 1 1 360px; max-width: 680px; min-width: 0; container: fd-search / inline-size; }\n.fd-search-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 34px; box-sizing: border-box; padding: 2px 2px 2px 8px; padding-inline: 8px 2px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); }\n.fd-search-field:focus-within { border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }\n.fd-search-field > .fd-icon, .fd-search-field > svg { width: 16px; height: 16px; color: var(--fd-muted); flex: none; }\n.fd-facets { display: contents; }\n.fd-facet { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; padding-block: 2px; padding-inline: 6px 2px; border-radius: 3px; background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 13px; line-height: 18px; }\n.fd-facet svg { width: 13px; height: 13px; flex: none; }\n.fd-facet[data-kind=\"groupBy\"] { background: var(--fd-success-soft); color: var(--fd-success); }\n.fd-facet-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-facet-remove { all: unset; cursor: pointer; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 2px; font-size: 15px; line-height: 1; opacity: 0.7; }\n.fd-facet-remove:hover, .fd-facet-remove:focus-visible { opacity: 1; background: var(--fd-surface); }\n.fd-search-input { flex: 1 1 140px; min-width: 100px; border: none; outline: none; background: none; font: inherit; font-size: 14px; color: var(--fd-text); padding: 5px 4px; }\n.fd-form .fd-search-input:focus-visible { outline: none; }\n.fd-search-toggle { all: unset; cursor: pointer; display: grid; place-items: center; width: 30px; height: 28px; border-radius: 3px; color: var(--fd-muted); }\n/* Physical sides: a down chevron points down in either direction. */\n.fd-search-toggle::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }\n.fd-search-toggle[aria-expanded=\"true\"]::before { transform: translateY(2px) rotate(-135deg); }\n.fd-search-toggle:hover, .fd-search-toggle[aria-expanded=\"true\"] { background: var(--fd-page); color: var(--fd-text); }\n.fd-search-toggle:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-search-suggestions, .fd-search-panel { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); box-sizing: border-box; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); }\n.fd-search-suggestions { list-style: none; margin: 0; padding: 4px 0; }\n.fd-search-suggestions [role=\"option\"] { padding: 7px 12px; cursor: pointer; font-size: 14px; }\n.fd-search-suggestions [role=\"option\"][aria-selected=\"true\"] { background: var(--fd-accent-soft); }\n.fd-search-panel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-block: 6px; }\n.fd-search-group { display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 4px 10px 8px; min-width: 0; }\n.fd-search-group + .fd-search-group { border-inline-start: 1px solid var(--fd-border); }\n@container fd-search (max-width: 540px) {\n  .fd-search-panel { grid-auto-flow: row; }\n  .fd-search-group + .fd-search-group { border-inline-start: none; border-block-start: 1px solid var(--fd-border); padding-block-start: 8px; }\n}\n.fd-search-heading { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; padding: 4px 6px 6px; }\n.fd-search-heading svg { width: 15px; height: 15px; }\n.fd-search-group[data-group-kind=\"filters\"] .fd-search-heading svg { color: var(--fd-accent); }\n.fd-search-group[data-group-kind=\"groupBy\"] .fd-search-heading svg { color: var(--fd-success); }\n.fd-search-group[data-group-kind=\"favourites\"] .fd-search-heading svg { color: var(--fd-warning); }\n.fd-search-option { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 4px; font-size: 14px; color: var(--fd-text); }\n.fd-search-option::before { content: ''; width: 14px; flex: none; text-align: center; color: var(--fd-accent); font-weight: 700; }\n.fd-search-option[aria-pressed=\"true\"]::before { content: '\u2713'; }\n.fd-search-option:hover, .fd-search-option:focus-visible { background: var(--fd-page); }\n.fd-search-add { color: var(--fd-muted); margin-block-start: 4px; }\n.fd-search-add::before { content: '+'; color: var(--fd-muted); font-weight: 400; }\n.fd-custom-filter, .fd-favourite-form { display: grid; gap: 6px; padding: 6px; }\n.fd-custom-filter .fd-input, .fd-favourite-form .fd-input { width: 100%; box-sizing: border-box; min-height: 30px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); padding: 3px 6px; font: inherit; font-size: 13.5px; background: var(--fd-surface); color: var(--fd-text); }\n.fd-favourite-default { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }\n.fd-favourite-list { list-style: none; margin: 0; padding: 0; }\n.fd-favourite { display: flex; align-items: center; }\n.fd-favourite .fd-search-option { flex: 1; min-width: 0; }\n.fd-favourite .fd-search-option[data-default=\"true\"]::before { content: '\u2605'; color: var(--fd-warning); }\n.fd-favourite-remove { all: unset; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--fd-muted); }\n.fd-favourite-remove:hover { background: var(--fd-page); color: var(--fd-error); }\n.fd-favourites-none { margin: 0; padding: 4px 6px; color: var(--fd-muted); font-size: 13px; }\n.fd-list-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 3px 4px 3px 10px; border-radius: var(--fd-control-radius); background: var(--fd-accent-soft); }\n.fd-list-count { font-weight: 600; font-size: 13.5px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n.fd-pager { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }\n.fd-pager-text { color: var(--fd-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; margin-inline-end: 6px; white-space: nowrap; }\n.fd-pager-button { min-width: 32px; padding-inline: 0; font-size: 18px; line-height: 1; }\n.fd-list-scroll { overflow-x: auto; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); }\n.fd-list-table { width: 100%; border-collapse: collapse; font-size: 14px; }\n.fd-list-table th { text-align: start; font-weight: 600; font-size: 13px; color: var(--fd-text); padding: 8px 10px; border-block-end: 1px solid var(--fd-border-strong); white-space: nowrap; background: var(--fd-surface); }\n.fd-list-table td { padding: 7px 10px; border-block-end: 1px solid var(--fd-border); max-width: 28em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-list-table tbody tr:last-child td { border-block-end: none; }\n.fd-list-table .fd-num { text-align: end; font-variant-numeric: tabular-nums; }\n.fd-list-table th.fd-list-check, .fd-list-table td.fd-list-check { width: 36px; padding-inline: 10px 0; }\n.fd-list-checkbox { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--fd-accent); cursor: pointer; }\n.fd-list-sort { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 4px; font: inherit; color: inherit; }\n.fd-list-sort::after { content: ''; width: 0; height: 0; border-inline: 4px solid transparent; opacity: 0; }\n.fd-list-sort:hover::after { opacity: 0.35; border-block-start: 5px solid currentColor; }\n.fd-list-table th[aria-sort=\"ascending\"] .fd-list-sort::after { opacity: 1; border-block-start: none; border-block-end: 5px solid currentColor; }\n.fd-list-table th[aria-sort=\"descending\"] .fd-list-sort::after { opacity: 1; border-block-end: none; border-block-start: 5px solid currentColor; }\n.fd-list-table th.fd-num .fd-list-sort { justify-content: flex-end; }\n.fd-list-table th.fd-num .fd-list-sort::after { order: -1; }\n.fd-list-sort:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-list-row:hover td { background: var(--fd-page); }\n.fd-list-openable { cursor: pointer; }\n.fd-list-row[aria-selected=\"true\"] td { background: var(--fd-accent-soft); }\n.fd-list-row:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-list-table[aria-busy=\"true\"] tbody { opacity: 0.6; transition: opacity 0.2s 0.15s; }\n.fd-list-group td { padding: 0; background: var(--fd-page); }\n.fd-group-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; padding-inline-start: calc(12px + var(--fd-level, 0) * 22px); font-weight: 600; font-size: 13.5px; color: var(--fd-text); }\n.fd-group-toggle::before { content: ''; flex: none; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.12s; }\n.fd-group-toggle:dir(rtl)::before { transform: rotate(-135deg); }\n.fd-group-toggle[aria-expanded=\"true\"]::before { transform: rotate(135deg); }\n.fd-group-toggle:hover { background: var(--fd-accent-soft); }\n.fd-group-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-group-count { color: var(--fd-muted); font-weight: 400; font-variant-numeric: tabular-nums; }\n.fd-list-more td { padding: 4px 10px; padding-inline-start: calc(46px + var(--fd-level, 0) * 22px); }\n.fd-list-empty, .fd-list-failed { margin: 0; padding: 28px 12px; text-align: center; color: var(--fd-muted); }\n.fd-list-failed { color: var(--fd-error); }\n";
+/** Puts the list's look in the document once. */
+export declare function installListStyles(doc: Document): void;

package/src/lib/list-styles.d.ts

@@ -0,0 +1,4 @@
+/** The list's look, on the same tokens as the forms it opens. */
+export declare const LIST_STYLES = "\n.fd-list { display: grid; gap: 10px; min-width: 0; }\n.fd-list [hidden] { display: none !important; }\n.fd-list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 34px; }\n.fd-search { position: relative; flex: 1 1 360px; max-width: 680px; min-width: 0; container: fd-search / inline-size; }\n.fd-search-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 34px; box-sizing: border-box; padding: 2px 2px 2px 8px; padding-inline: 8px 2px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); }\n.fd-search-field:focus-within { border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }\n.fd-search-field > .fd-icon, .fd-search-field > svg { width: 16px; height: 16px; color: var(--fd-muted); flex: none; }\n.fd-facets { display: contents; }\n.fd-facet { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; padding-block: 2px; padding-inline: 6px 2px; border-radius: 3px; background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 13px; line-height: 18px; }\n.fd-facet svg { width: 13px; height: 13px; flex: none; }\n.fd-facet[data-kind=\"groupBy\"] { background: var(--fd-success-soft); color: var(--fd-success); }\n.fd-facet-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-facet-remove { all: unset; cursor: pointer; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 2px; font-size: 15px; line-height: 1; opacity: 0.7; }\n.fd-facet-remove:hover, .fd-facet-remove:focus-visible { opacity: 1; background: var(--fd-surface); }\n.fd-search-input { flex: 1 1 140px; min-width: 100px; border: none; outline: none; background: none; font: inherit; font-size: 14px; color: var(--fd-text); padding: 5px 4px; }\n.fd-form .fd-search-input:focus-visible { outline: none; }\n.fd-search-toggle { all: unset; cursor: pointer; display: grid; place-items: center; width: 30px; height: 28px; border-radius: 3px; color: var(--fd-muted); }\n/* Physical sides: a down chevron points down in either direction. */\n.fd-search-toggle::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }\n.fd-search-toggle[aria-expanded=\"true\"]::before { transform: translateY(2px) rotate(-135deg); }\n.fd-search-toggle:hover, .fd-search-toggle[aria-expanded=\"true\"] { background: var(--fd-page); color: var(--fd-text); }\n.fd-search-toggle:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-search-suggestions, .fd-search-panel { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); box-sizing: border-box; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); }\n.fd-search-suggestions { list-style: none; margin: 0; padding: 4px 0; }\n.fd-search-suggestions [role=\"option\"] { padding: 7px 12px; cursor: pointer; font-size: 14px; }\n.fd-search-suggestions [role=\"option\"][aria-selected=\"true\"] { background: var(--fd-accent-soft); }\n.fd-search-panel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-block: 6px; }\n.fd-search-group { display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 4px 10px 8px; min-width: 0; }\n.fd-search-group + .fd-search-group { border-inline-start: 1px solid var(--fd-border); }\n@container fd-search (max-width: 540px) {\n  .fd-search-panel { grid-auto-flow: row; }\n  .fd-search-group + .fd-search-group { border-inline-start: none; border-block-start: 1px solid var(--fd-border); padding-block-start: 8px; }\n}\n.fd-search-heading { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; padding: 4px 6px 6px; }\n.fd-search-heading svg { width: 15px; height: 15px; }\n.fd-search-group[data-group-kind=\"filters\"] .fd-search-heading svg { color: var(--fd-accent); }\n.fd-search-group[data-group-kind=\"groupBy\"] .fd-search-heading svg { color: var(--fd-success); }\n.fd-search-group[data-group-kind=\"favourites\"] .fd-search-heading svg { color: var(--fd-warning); }\n.fd-search-option { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 4px; font-size: 14px; color: var(--fd-text); }\n.fd-search-option::before { content: ''; width: 14px; flex: none; text-align: center; color: var(--fd-accent); font-weight: 700; }\n.fd-search-option[aria-pressed=\"true\"]::before { content: '\u2713'; }\n.fd-search-option:hover, .fd-search-option:focus-visible { background: var(--fd-page); }\n.fd-search-add { color: var(--fd-muted); margin-block-start: 4px; }\n.fd-search-add::before { content: '+'; color: var(--fd-muted); font-weight: 400; }\n.fd-custom-filter, .fd-favourite-form { display: grid; gap: 6px; padding: 6px; }\n.fd-custom-filter .fd-input, .fd-favourite-form .fd-input { width: 100%; box-sizing: border-box; min-height: 30px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); padding: 3px 6px; font: inherit; font-size: 13.5px; background: var(--fd-surface); color: var(--fd-text); }\n.fd-favourite-default { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }\n.fd-favourite-list { list-style: none; margin: 0; padding: 0; }\n.fd-favourite { display: flex; align-items: center; }\n.fd-favourite .fd-search-option { flex: 1; min-width: 0; }\n.fd-favourite .fd-search-option[data-default=\"true\"]::before { content: '\u2605'; color: var(--fd-warning); }\n.fd-favourite-remove { all: unset; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--fd-muted); }\n.fd-favourite-remove:hover { background: var(--fd-page); color: var(--fd-error); }\n.fd-favourites-none { margin: 0; padding: 4px 6px; color: var(--fd-muted); font-size: 13px; }\n.fd-list-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 3px 4px 3px 10px; border-radius: var(--fd-control-radius); background: var(--fd-accent-soft); }\n.fd-list-count { font-weight: 600; font-size: 13.5px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n.fd-pager { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }\n.fd-pager-text { color: var(--fd-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; margin-inline-end: 6px; white-space: nowrap; }\n.fd-pager-button { min-width: 32px; padding-inline: 0; font-size: 18px; line-height: 1; }\n.fd-list-scroll { overflow-x: auto; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); }\n.fd-list-table { width: 100%; border-collapse: collapse; font-size: 14px; }\n.fd-list-table th { text-align: start; font-weight: 600; font-size: 13px; color: var(--fd-text); padding: 8px 10px; border-block-end: 1px solid var(--fd-border-strong); white-space: nowrap; background: var(--fd-surface); }\n.fd-list-table td { padding: 7px 10px; border-block-end: 1px solid var(--fd-border); max-width: 28em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-list-table tbody tr:last-child td { border-block-end: none; }\n.fd-list-table .fd-num { text-align: end; font-variant-numeric: tabular-nums; }\n.fd-list-table th.fd-list-check, .fd-list-table td.fd-list-check { width: 36px; padding-inline: 10px 0; }\n.fd-list-checkbox { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--fd-accent); cursor: pointer; }\n.fd-list-sort { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 4px; font: inherit; color: inherit; }\n.fd-list-sort::after { content: ''; width: 0; height: 0; border-inline: 4px solid transparent; opacity: 0; }\n.fd-list-sort:hover::after { opacity: 0.35; border-block-start: 5px solid currentColor; }\n.fd-list-table th[aria-sort=\"ascending\"] .fd-list-sort::after { opacity: 1; border-block-start: none; border-block-end: 5px solid currentColor; }\n.fd-list-table th[aria-sort=\"descending\"] .fd-list-sort::after { opacity: 1; border-block-end: none; border-block-start: 5px solid currentColor; }\n.fd-list-table th.fd-num .fd-list-sort { justify-content: flex-end; }\n.fd-list-table th.fd-num .fd-list-sort::after { order: -1; }\n.fd-list-sort:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-list-row:hover td { background: var(--fd-page); }\n.fd-list-openable { cursor: pointer; }\n.fd-list-row[aria-selected=\"true\"] td { background: var(--fd-accent-soft); }\n.fd-list-row:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-list-table[aria-busy=\"true\"] tbody { opacity: 0.6; transition: opacity 0.2s 0.15s; }\n.fd-list-group td { padding: 0; background: var(--fd-page); }\n.fd-group-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; padding-inline-start: calc(12px + var(--fd-level, 0) * 22px); font-weight: 600; font-size: 13.5px; color: var(--fd-text); }\n.fd-group-toggle::before { content: ''; flex: none; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.12s; }\n.fd-group-toggle:dir(rtl)::before { transform: rotate(-135deg); }\n.fd-group-toggle[aria-expanded=\"true\"]::before { transform: rotate(135deg); }\n.fd-group-toggle:hover { background: var(--fd-accent-soft); }\n.fd-group-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-group-count { color: var(--fd-muted); font-weight: 400; font-variant-numeric: tabular-nums; }\n.fd-list-more td { padding: 4px 10px; padding-inline-start: calc(46px + var(--fd-level, 0) * 22px); }\n.fd-list-empty, .fd-list-failed { margin: 0; padding: 28px 12px; text-align: center; color: var(--fd-muted); }\n.fd-list-failed { color: var(--fd-error); }\n";
+/** Puts the list's look in the document once. */
+export declare function installListStyles(doc: Document): void;

package/src/lib/list-styles.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LIST_STYLES = void 0;
+exports.installListStyles = installListStyles;
+/** The list's look, on the same tokens as the forms it opens. */
+exports.LIST_STYLES = `
+.fd-list { display: grid; gap: 10px; min-width: 0; }
+.fd-list [hidden] { display: none !important; }
+.fd-list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 34px; }
+.fd-search { position: relative; flex: 1 1 360px; max-width: 680px; min-width: 0; container: fd-search / inline-size; }
+.fd-search-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 34px; box-sizing: border-box; padding: 2px 2px 2px 8px; padding-inline: 8px 2px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); }
+.fd-search-field:focus-within { border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }
+.fd-search-field > .fd-icon, .fd-search-field > svg { width: 16px; height: 16px; color: var(--fd-muted); flex: none; }
+.fd-facets { display: contents; }
+.fd-facet { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; padding-block: 2px; padding-inline: 6px 2px; border-radius: 3px; background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 13px; line-height: 18px; }
+.fd-facet svg { width: 13px; height: 13px; flex: none; }
+.fd-facet[data-kind="groupBy"] { background: var(--fd-success-soft); color: var(--fd-success); }
+.fd-facet-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-facet-remove { all: unset; cursor: pointer; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 2px; font-size: 15px; line-height: 1; opacity: 0.7; }
+.fd-facet-remove:hover, .fd-facet-remove:focus-visible { opacity: 1; background: var(--fd-surface); }
+.fd-search-input { flex: 1 1 140px; min-width: 100px; border: none; outline: none; background: none; font: inherit; font-size: 14px; color: var(--fd-text); padding: 5px 4px; }
+.fd-form .fd-search-input:focus-visible { outline: none; }
+.fd-search-toggle { all: unset; cursor: pointer; display: grid; place-items: center; width: 30px; height: 28px; border-radius: 3px; color: var(--fd-muted); }
+/* Physical sides: a down chevron points down in either direction. */
+.fd-search-toggle::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
+.fd-search-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
+.fd-search-toggle:hover, .fd-search-toggle[aria-expanded="true"] { background: var(--fd-page); color: var(--fd-text); }
+.fd-search-toggle:focus-visible { outline: 2px solid var(--fd-focus); }
+.fd-search-suggestions, .fd-search-panel { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); box-sizing: border-box; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); }
+.fd-search-suggestions { list-style: none; margin: 0; padding: 4px 0; }
+.fd-search-suggestions [role="option"] { padding: 7px 12px; cursor: pointer; font-size: 14px; }
+.fd-search-suggestions [role="option"][aria-selected="true"] { background: var(--fd-accent-soft); }
+.fd-search-panel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-block: 6px; }
+.fd-search-group { display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 4px 10px 8px; min-width: 0; }
+.fd-search-group + .fd-search-group { border-inline-start: 1px solid var(--fd-border); }
+@container fd-search (max-width: 540px) {
+  .fd-search-panel { grid-auto-flow: row; }
+  .fd-search-group + .fd-search-group { border-inline-start: none; border-block-start: 1px solid var(--fd-border); padding-block-start: 8px; }
+}
+.fd-search-heading { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; padding: 4px 6px 6px; }
+.fd-search-heading svg { width: 15px; height: 15px; }
+.fd-search-group[data-group-kind="filters"] .fd-search-heading svg { color: var(--fd-accent); }
+.fd-search-group[data-group-kind="groupBy"] .fd-search-heading svg { color: var(--fd-success); }
+.fd-search-group[data-group-kind="favourites"] .fd-search-heading svg { color: var(--fd-warning); }
+.fd-search-option { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 4px; font-size: 14px; color: var(--fd-text); }
+.fd-search-option::before { content: ''; width: 14px; flex: none; text-align: center; color: var(--fd-accent); font-weight: 700; }
+.fd-search-option[aria-pressed="true"]::before { content: '✓'; }
+.fd-search-option:hover, .fd-search-option:focus-visible { background: var(--fd-page); }
+.fd-search-add { color: var(--fd-muted); margin-block-start: 4px; }
+.fd-search-add::before { content: '+'; color: var(--fd-muted); font-weight: 400; }
+.fd-custom-filter, .fd-favourite-form { display: grid; gap: 6px; padding: 6px; }
+.fd-custom-filter .fd-input, .fd-favourite-form .fd-input { width: 100%; box-sizing: border-box; min-height: 30px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); padding: 3px 6px; font: inherit; font-size: 13.5px; background: var(--fd-surface); color: var(--fd-text); }
+.fd-favourite-default { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
+.fd-favourite-list { list-style: none; margin: 0; padding: 0; }
+.fd-favourite { display: flex; align-items: center; }
+.fd-favourite .fd-search-option { flex: 1; min-width: 0; }
+.fd-favourite .fd-search-option[data-default="true"]::before { content: '★'; color: var(--fd-warning); }
+.fd-favourite-remove { all: unset; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--fd-muted); }
+.fd-favourite-remove:hover { background: var(--fd-page); color: var(--fd-error); }
+.fd-favourites-none { margin: 0; padding: 4px 6px; color: var(--fd-muted); font-size: 13px; }
+.fd-list-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 3px 4px 3px 10px; border-radius: var(--fd-control-radius); background: var(--fd-accent-soft); }
+.fd-list-count { font-weight: 600; font-size: 13.5px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }
+.fd-pager { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
+.fd-pager-text { color: var(--fd-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; margin-inline-end: 6px; white-space: nowrap; }
+.fd-pager-button { min-width: 32px; padding-inline: 0; font-size: 18px; line-height: 1; }
+.fd-list-scroll { overflow-x: auto; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); }
+.fd-list-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+.fd-list-table th { text-align: start; font-weight: 600; font-size: 13px; color: var(--fd-text); padding: 8px 10px; border-block-end: 1px solid var(--fd-border-strong); white-space: nowrap; background: var(--fd-surface); }
+.fd-list-table td { padding: 7px 10px; border-block-end: 1px solid var(--fd-border); max-width: 28em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-list-table tbody tr:last-child td { border-block-end: none; }
+.fd-list-table .fd-num { text-align: end; font-variant-numeric: tabular-nums; }
+.fd-list-table th.fd-list-check, .fd-list-table td.fd-list-check { width: 36px; padding-inline: 10px 0; }
+.fd-list-checkbox { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--fd-accent); cursor: pointer; }
+.fd-list-sort { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 4px; font: inherit; color: inherit; }
+.fd-list-sort::after { content: ''; width: 0; height: 0; border-inline: 4px solid transparent; opacity: 0; }
+.fd-list-sort:hover::after { opacity: 0.35; border-block-start: 5px solid currentColor; }
+.fd-list-table th[aria-sort="ascending"] .fd-list-sort::after { opacity: 1; border-block-start: none; border-block-end: 5px solid currentColor; }
+.fd-list-table th[aria-sort="descending"] .fd-list-sort::after { opacity: 1; border-block-end: none; border-block-start: 5px solid currentColor; }
+.fd-list-table th.fd-num .fd-list-sort { justify-content: flex-end; }
+.fd-list-table th.fd-num .fd-list-sort::after { order: -1; }
+.fd-list-sort:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-list-row:hover td { background: var(--fd-page); }
+.fd-list-openable { cursor: pointer; }
+.fd-list-row[aria-selected="true"] td { background: var(--fd-accent-soft); }
+.fd-list-row:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }
+.fd-list-table[aria-busy="true"] tbody { opacity: 0.6; transition: opacity 0.2s 0.15s; }
+.fd-list-group td { padding: 0; background: var(--fd-page); }
+.fd-group-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; padding-inline-start: calc(12px + var(--fd-level, 0) * 22px); font-weight: 600; font-size: 13.5px; color: var(--fd-text); }
+.fd-group-toggle::before { content: ''; flex: none; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.12s; }
+.fd-group-toggle:dir(rtl)::before { transform: rotate(-135deg); }
+.fd-group-toggle[aria-expanded="true"]::before { transform: rotate(135deg); }
+.fd-group-toggle:hover { background: var(--fd-accent-soft); }
+.fd-group-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }
+.fd-group-count { color: var(--fd-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
+.fd-list-more td { padding: 4px 10px; padding-inline-start: calc(46px + var(--fd-level, 0) * 22px); }
+.fd-list-empty, .fd-list-failed { margin: 0; padding: 28px 12px; text-align: center; color: var(--fd-muted); }
+.fd-list-failed { color: var(--fd-error); }
+`;
+/** Puts the list's look in the document once. */
+function installListStyles(doc) {
+    if (doc.getElementById('fd-list-styles'))
+        return;
+    const style = doc.createElement('style');
+    style.id = 'fd-list-styles';
+    style.textContent = exports.LIST_STYLES;
+    doc.head.append(style);
+}
+//# sourceMappingURL=list-styles.js.map

package/src/lib/list-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-styles.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/list-styles.ts"],"names":[],"mappings":";;;AAgGA,8CAMC;AAtGD,iEAAiE;AACpD,QAAA,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4F1B,CAAC;AAEF,iDAAiD;AACjD,SAAgB,iBAAiB,CAAC,GAAa;IAC7C,IAAI,GAAG,CAAC,cAAc,CAAC,gBAAgB,CAAC;QAAE,OAAO;IACjD,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,GAAG,gBAAgB,CAAC;IAC5B,KAAK,CAAC,WAAW,GAAG,mBAAW,CAAC;IAChC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACzB,CAAC"}

package/src/lib/list-styles.mjs

@@ -0,0 +1,104 @@
+/** The list's look, on the same tokens as the forms it opens. */
+export const LIST_STYLES = `
+.fd-list { display: grid; gap: 10px; min-width: 0; }
+.fd-list [hidden] { display: none !important; }
+.fd-list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 34px; }
+.fd-search { position: relative; flex: 1 1 360px; max-width: 680px; min-width: 0; container: fd-search / inline-size; }
+.fd-search-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 34px; box-sizing: border-box; padding: 2px 2px 2px 8px; padding-inline: 8px 2px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); }
+.fd-search-field:focus-within { border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }
+.fd-search-field > .fd-icon, .fd-search-field > svg { width: 16px; height: 16px; color: var(--fd-muted); flex: none; }
+.fd-facets { display: contents; }
+.fd-facet { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; padding-block: 2px; padding-inline: 6px 2px; border-radius: 3px; background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 13px; line-height: 18px; }
+.fd-facet svg { width: 13px; height: 13px; flex: none; }
+.fd-facet[data-kind="groupBy"] { background: var(--fd-success-soft); color: var(--fd-success); }
+.fd-facet-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-facet-remove { all: unset; cursor: pointer; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 2px; font-size: 15px; line-height: 1; opacity: 0.7; }
+.fd-facet-remove:hover, .fd-facet-remove:focus-visible { opacity: 1; background: var(--fd-surface); }
+.fd-search-input { flex: 1 1 140px; min-width: 100px; border: none; outline: none; background: none; font: inherit; font-size: 14px; color: var(--fd-text); padding: 5px 4px; }
+.fd-form .fd-search-input:focus-visible { outline: none; }
+.fd-search-toggle { all: unset; cursor: pointer; display: grid; place-items: center; width: 30px; height: 28px; border-radius: 3px; color: var(--fd-muted); }
+/* Physical sides: a down chevron points down in either direction. */
+.fd-search-toggle::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
+.fd-search-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
+.fd-search-toggle:hover, .fd-search-toggle[aria-expanded="true"] { background: var(--fd-page); color: var(--fd-text); }
+.fd-search-toggle:focus-visible { outline: 2px solid var(--fd-focus); }
+.fd-search-suggestions, .fd-search-panel { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); box-sizing: border-box; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); }
+.fd-search-suggestions { list-style: none; margin: 0; padding: 4px 0; }
+.fd-search-suggestions [role="option"] { padding: 7px 12px; cursor: pointer; font-size: 14px; }
+.fd-search-suggestions [role="option"][aria-selected="true"] { background: var(--fd-accent-soft); }
+.fd-search-panel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-block: 6px; }
+.fd-search-group { display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 4px 10px 8px; min-width: 0; }
+.fd-search-group + .fd-search-group { border-inline-start: 1px solid var(--fd-border); }
+@container fd-search (max-width: 540px) {
+  .fd-search-panel { grid-auto-flow: row; }
+  .fd-search-group + .fd-search-group { border-inline-start: none; border-block-start: 1px solid var(--fd-border); padding-block-start: 8px; }
+}
+.fd-search-heading { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; padding: 4px 6px 6px; }
+.fd-search-heading svg { width: 15px; height: 15px; }
+.fd-search-group[data-group-kind="filters"] .fd-search-heading svg { color: var(--fd-accent); }
+.fd-search-group[data-group-kind="groupBy"] .fd-search-heading svg { color: var(--fd-success); }
+.fd-search-group[data-group-kind="favourites"] .fd-search-heading svg { color: var(--fd-warning); }
+.fd-search-option { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 4px; font-size: 14px; color: var(--fd-text); }
+.fd-search-option::before { content: ''; width: 14px; flex: none; text-align: center; color: var(--fd-accent); font-weight: 700; }
+.fd-search-option[aria-pressed="true"]::before { content: '✓'; }
+.fd-search-option:hover, .fd-search-option:focus-visible { background: var(--fd-page); }
+.fd-search-add { color: var(--fd-muted); margin-block-start: 4px; }
+.fd-search-add::before { content: '+'; color: var(--fd-muted); font-weight: 400; }
+.fd-custom-filter, .fd-favourite-form { display: grid; gap: 6px; padding: 6px; }
+.fd-custom-filter .fd-input, .fd-favourite-form .fd-input { width: 100%; box-sizing: border-box; min-height: 30px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); padding: 3px 6px; font: inherit; font-size: 13.5px; background: var(--fd-surface); color: var(--fd-text); }
+.fd-favourite-default { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
+.fd-favourite-list { list-style: none; margin: 0; padding: 0; }
+.fd-favourite { display: flex; align-items: center; }
+.fd-favourite .fd-search-option { flex: 1; min-width: 0; }
+.fd-favourite .fd-search-option[data-default="true"]::before { content: '★'; color: var(--fd-warning); }
+.fd-favourite-remove { all: unset; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--fd-muted); }
+.fd-favourite-remove:hover { background: var(--fd-page); color: var(--fd-error); }
+.fd-favourites-none { margin: 0; padding: 4px 6px; color: var(--fd-muted); font-size: 13px; }
+.fd-list-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 3px 4px 3px 10px; border-radius: var(--fd-control-radius); background: var(--fd-accent-soft); }
+.fd-list-count { font-weight: 600; font-size: 13.5px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }
+.fd-pager { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
+.fd-pager-text { color: var(--fd-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; margin-inline-end: 6px; white-space: nowrap; }
+.fd-pager-button { min-width: 32px; padding-inline: 0; font-size: 18px; line-height: 1; }
+.fd-list-scroll { overflow-x: auto; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); }
+.fd-list-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+.fd-list-table th { text-align: start; font-weight: 600; font-size: 13px; color: var(--fd-text); padding: 8px 10px; border-block-end: 1px solid var(--fd-border-strong); white-space: nowrap; background: var(--fd-surface); }
+.fd-list-table td { padding: 7px 10px; border-block-end: 1px solid var(--fd-border); max-width: 28em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-list-table tbody tr:last-child td { border-block-end: none; }
+.fd-list-table .fd-num { text-align: end; font-variant-numeric: tabular-nums; }
+.fd-list-table th.fd-list-check, .fd-list-table td.fd-list-check { width: 36px; padding-inline: 10px 0; }
+.fd-list-checkbox { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--fd-accent); cursor: pointer; }
+.fd-list-sort { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 4px; font: inherit; color: inherit; }
+.fd-list-sort::after { content: ''; width: 0; height: 0; border-inline: 4px solid transparent; opacity: 0; }
+.fd-list-sort:hover::after { opacity: 0.35; border-block-start: 5px solid currentColor; }
+.fd-list-table th[aria-sort="ascending"] .fd-list-sort::after { opacity: 1; border-block-start: none; border-block-end: 5px solid currentColor; }
+.fd-list-table th[aria-sort="descending"] .fd-list-sort::after { opacity: 1; border-block-end: none; border-block-start: 5px solid currentColor; }
+.fd-list-table th.fd-num .fd-list-sort { justify-content: flex-end; }
+.fd-list-table th.fd-num .fd-list-sort::after { order: -1; }
+.fd-list-sort:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-list-row:hover td { background: var(--fd-page); }
+.fd-list-openable { cursor: pointer; }
+.fd-list-row[aria-selected="true"] td { background: var(--fd-accent-soft); }
+.fd-list-row:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }
+.fd-list-table[aria-busy="true"] tbody { opacity: 0.6; transition: opacity 0.2s 0.15s; }
+.fd-list-group td { padding: 0; background: var(--fd-page); }
+.fd-group-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; padding-inline-start: calc(12px + var(--fd-level, 0) * 22px); font-weight: 600; font-size: 13.5px; color: var(--fd-text); }
+.fd-group-toggle::before { content: ''; flex: none; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.12s; }
+.fd-group-toggle:dir(rtl)::before { transform: rotate(-135deg); }
+.fd-group-toggle[aria-expanded="true"]::before { transform: rotate(135deg); }
+.fd-group-toggle:hover { background: var(--fd-accent-soft); }
+.fd-group-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }
+.fd-group-count { color: var(--fd-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
+.fd-list-more td { padding: 4px 10px; padding-inline-start: calc(46px + var(--fd-level, 0) * 22px); }
+.fd-list-empty, .fd-list-failed { margin: 0; padding: 28px 12px; text-align: center; color: var(--fd-muted); }
+.fd-list-failed { color: var(--fd-error); }
+`;
+/** Puts the list's look in the document once. */
+export function installListStyles(doc) {
+    if (doc.getElementById('fd-list-styles'))
+        return;
+    const style = doc.createElement('style');
+    style.id = 'fd-list-styles';
+    style.textContent = LIST_STYLES;
+    doc.head.append(style);
+}
+//# sourceMappingURL=list-styles.mjs.map

package/src/lib/list-styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-styles.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/list-styles.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4F1B,CAAC;AAEF,iDAAiD;AACjD,MAAM,UAAU,iBAAiB,CAAC,GAAa;IAC7C,IAAI,GAAG,CAAC,cAAc,CAAC,gBAAgB,CAAC;QAAE,OAAO;IACjD,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,GAAG,gBAAgB,CAAC;IAC5B,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;IAChC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACzB,CAAC"}

package/src/lib/list.d.mts

@@ -0,0 +1,34 @@
+import { type DataSource, type Form, type ListNode, type Locale, type Page, type RecordId } from '@fieldia/core';
+import { type IconSet, type PreferenceStore } from '@fieldia/widgets';
+import type { El } from './dom.mjs';
+import type { ViewerLabels } from './labels.mjs';
+export interface ListContext {
+    page: Page;
+    node: ListNode;
+    form: Form;
+    dataSource: DataSource | undefined;
+    doc: Document;
+    el: El;
+    labels: ViewerLabels;
+    locale: Locale;
+    fill: (template: string, values: Record<string, string | number>) => string;
+    confirm: (message: string) => Promise<boolean>;
+    withIcon: (icon: string | undefined, text: string) => (Node | string)[];
+    uid: (id: string) => string;
+    icons?: IconSet;
+    /** Where the list's favourite searches are kept. */
+    preferences: PreferenceStore;
+    onOpenRecord?: (id: RecordId) => void;
+}
+export interface ListView {
+    element: HTMLElement;
+    /** Ask for the records again, keeping the page, the order and what is chosen where it still applies. */
+    reload(): Promise<void>;
+    destroy(): void;
+}
+/**
+ * Records as a table: one page at a time, in the order a header asks for, each
+ * row opening its record. Chosen rows get the list's buttons, which hand the
+ * app their ids. A plain table, so it reads the same in every binding.
+ */
+export declare function listView(context: ListContext): ListView;

package/src/lib/list.d.ts

@@ -0,0 +1,34 @@
+import { type DataSource, type Form, type ListNode, type Locale, type Page, type RecordId } from '@fieldia/core';
+import { type IconSet, type PreferenceStore } from '@fieldia/widgets';
+import type { El } from './dom';
+import type { ViewerLabels } from './labels';
+export interface ListContext {
+    page: Page;
+    node: ListNode;
+    form: Form;
+    dataSource: DataSource | undefined;
+    doc: Document;
+    el: El;
+    labels: ViewerLabels;
+    locale: Locale;
+    fill: (template: string, values: Record<string, string | number>) => string;
+    confirm: (message: string) => Promise<boolean>;
+    withIcon: (icon: string | undefined, text: string) => (Node | string)[];
+    uid: (id: string) => string;
+    icons?: IconSet;
+    /** Where the list's favourite searches are kept. */
+    preferences: PreferenceStore;
+    onOpenRecord?: (id: RecordId) => void;
+}
+export interface ListView {
+    element: HTMLElement;
+    /** Ask for the records again, keeping the page, the order and what is chosen where it still applies. */
+    reload(): Promise<void>;
+    destroy(): void;
+}
+/**
+ * Records as a table: one page at a time, in the order a header asks for, each
+ * row opening its record. Chosen rows get the list's buttons, which hand the
+ * app their ids. A plain table, so it reads the same in every binding.
+ */
+export declare function listView(context: ListContext): ListView;