@fieldia/viewer 0.19.1 → 0.20.0

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

@@ -1,4 +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/* A list that is also a map: List, Map, or both side by side; the map's part is drawn by @fieldia/map. */\n.fd-list { container: fd-list / inline-size; }\n.fd-list-views { display: inline-flex; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: hidden; }\n.fd-list-views .fd-button { border: 0; border-radius: 0; min-height: 32px; padding-inline: 12px; }\n.fd-list-views .fd-button + .fd-button { border-inline-start: 1px solid var(--fd-border); }\n.fd-list-views .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 600; }\n.fd-list-body { display: grid; gap: 16px; min-width: 0; }\n.fd-list-records { display: grid; gap: 10px; min-width: 0; align-content: start; }\n.fd-list[data-view=\"list\"] .fd-list-map { display: none; }\n.fd-list[data-view=\"map\"] .fd-list-records, .fd-list[data-view=\"map\"] .fd-pager { display: none; }\n.fd-list[data-view=\"both\"] .fd-list-body { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); align-items: start; }\n.fd-list[data-view=\"both\"] .fd-list-map { position: sticky; top: 8px; }\n/* Too narrow for two: the map over the table. */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-list-body { grid-template-columns: minmax(0, 1fr); } .fd-list[data-view=\"both\"] .fd-list-map { position: static; order: -1; } }\n.fd-list-row.fd-list-hot > td { background: var(--fd-accent-soft); }\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; min-height: 24px; padding-block: 0; padding-inline: 6px 0; 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/* 24px each way: a target a finger can hit (WCAG 2.5.8). */\n.fd-facet-remove { all: unset; cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; 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";
+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/* A list that is also a map: List, Map, or both side by side; the map's part is drawn by @fieldia/map. */\n.fd-list { container: fd-list / inline-size; }\n.fd-list-views { display: inline-flex; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: hidden; }\n.fd-list-views .fd-button { border: 0; border-radius: 0; min-height: 32px; padding-inline: 12px; }\n.fd-list-views .fd-button + .fd-button { border-inline-start: 1px solid var(--fd-border); }\n.fd-list-views .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 600; }\n.fd-list-body { display: grid; gap: 16px; min-width: 0; }\n.fd-list-records { display: grid; gap: 10px; min-width: 0; align-content: start; }\n.fd-list[data-view=\"list\"] .fd-list-map { display: none; }\n.fd-list[data-view=\"map\"] .fd-list-records, .fd-list[data-view=\"map\"] .fd-pager { display: none; }\n.fd-list[data-view=\"both\"] .fd-list-body { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); align-items: start; }\n.fd-list[data-view=\"both\"] .fd-list-map { position: sticky; top: 8px; }\n/* Too narrow for two: the map over the table. */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-list-body { grid-template-columns: minmax(0, 1fr); } .fd-list[data-view=\"both\"] .fd-list-map { position: static; order: -1; } }\n.fd-list-row.fd-list-hot > td { background: var(--fd-accent-soft); }\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; min-height: 24px; padding-block: 0; padding-inline: 6px 0; 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/* 24px each way: a target a finger can hit (WCAG 2.5.8). */\n.fd-facet-remove { all: unset; cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; 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; color: var(--fd-text); padding: 8px 10px; border-block-end: 1px solid var(--fd-border-strong); white-space: nowrap; background: var(--fd-surface); }\n/* The header's words smaller than the rows', its cell the rows' size: a column's width in characters is the same in both. */\n.fd-list-head { font-size: 13px; }\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\n/* A column of a given width (cells), in characters of the rows' words: what does not fit ends in \"\u2026\". */\n.fd-list-table [data-width] { box-sizing: content-box; width: calc(var(--fd-col-width) * 1ch); max-width: calc(var(--fd-col-width) * 1ch); overflow: hidden; text-overflow: ellipsis; }\n.fd-list-table th[data-width] .fd-list-sort { min-width: 0; }\n.fd-list-table th[data-width] .fd-list-head { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n/* A column in pixels: the whole column, its paddings in it, as a work tracker sizes its grid's. */\n.fd-list-table [data-width-px] { box-sizing: border-box; width: var(--fd-col-px); min-width: var(--fd-col-px); max-width: var(--fd-col-px); overflow: hidden; text-overflow: ellipsis; }\n.fd-list-table th[data-width-px] .fd-list-sort { min-width: 0; }\n.fd-list-table th[data-width-px] .fd-list-head { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n/* Every column sized: the table as wide as they are, never stretched; wider than its card, the card scrolls sideways. */\n.fd-list-table[data-fixed] { width: max-content; }\n/* The row whose record is open (in a popup over the list): lit as a chosen one is, until it closes. */\n.fd-list-row[aria-current=\"true\"] td { background: var(--fd-accent-soft); }\n/* What a cell draws before its words: a kind's icon in its colour, a state's dot. */\n.fd-list-lead { width: 14px; height: 14px; margin-inline-end: 6px; vertical-align: -2px; flex: none; stroke-width: 2.2; }\n.fd-list-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; vertical-align: 1px; background: var(--fd-dot, var(--fd-border-strong)); }\n.fd-list-dot[data-tone=\"muted\"] { --fd-dot: var(--fd-border-strong); }\n.fd-list-dot[data-tone=\"danger\"] { --fd-dot: var(--fd-error); }\n.fd-list-dot[data-tone=\"success\"] { --fd-dot: var(--fd-success); }\n.fd-list-dot[data-tone=\"warning\"] { --fd-dot: #d97706; }\n.fd-list-dot[data-tone=\"info\"] { --fd-dot: var(--fd-info); }\n@media (forced-colors: active) { .fd-list-dot { background: CanvasText; } }\n/* Rows under their parent: Expand all and Collapse all in the header, a toggle before a parent's name, each depth further in. */\n.fd-list-table .fd-list-tree { width: 1%; padding-inline: 10px 4px; white-space: nowrap; }\n.fd-list-folds { display: inline-flex; gap: 6px; vertical-align: middle; }\n.fd-list-fold { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--fd-text); border-radius: 2px; color: var(--fd-text); font-size: 18px; font-weight: 400; line-height: 1; }\n.fd-list-fold:hover { background: var(--fd-page); }\n.fd-list-fold:focus-visible, .fd-list-twisty:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-list-row[data-depth] > td[data-name] { padding-inline-start: calc(10px + var(--fd-depth, 0) * 20px); }\n.fd-list-twisty, .fd-list-twisty-room { display: inline-block; width: 20px; height: 20px; margin-inline-end: 2px; vertical-align: middle; }\n.fd-list-twisty { all: unset; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-inline-end: 2px; vertical-align: middle; cursor: pointer; border-radius: 2px; color: var(--fd-muted); }\n.fd-list-twisty::before { content: ''; 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-list-twisty:dir(rtl)::before { transform: rotate(-135deg); }\n.fd-list-twisty[aria-expanded=\"true\"]::before { transform: rotate(135deg); }\n.fd-list-twisty:hover { background: var(--fd-page); color: var(--fd-text); }\n\n/* A list with the filter bar: its card above the table's, the pager under the table. */\n.fd-list[data-search=\"fields\"] .fd-list-bar { gap: 16px; }\n.fd-list[data-search=\"fields\"] .fd-list-records > .fd-pager { justify-self: end; }\n/* Fluent's lists, as a work tracker draws its backlog: the table a card with a light shadow and no frame; the header's words\n   small, semibold and muted, the columns parted by short rules; rows 35px tall with no lines between them. */\n/* Its header 38px and its rule, 39px in all whether a column's width is in pixels (its whole box) or characters. */\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table th { position: relative; box-sizing: border-box; height: 39px; padding-block: 0; color: var(--fd-muted); border-block-end: 1px solid var(--fd-border); }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-head { font-size: 12px; font-weight: 600; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table thead th:not(:first-child)::after { content: ''; position: absolute; inset-inline-end: var(--fd-rule-in, 0px); inset-block: 10px; width: 1px; background: var(--fd-border); }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table thead th.fd-list-tree::after, .fd-form[data-fd-theme=\"fluent\"] .fd-list-table thead th.fd-list-check::after { content: none; }\n/* A column the page says has no rule (a tracker's Order, which the person cannot size). */\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table thead th[data-rule=\"none\"]::after { content: none; }\n/* Rows 36px apart (measured on the tracker's backlog: 17 rows from y 280 to 892); a cell's words 3px in from its column's\n   start, its header's 7px, so a header stands a little in from the words under it. */\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table td { height: 36px; padding-block: 0; padding-inline: 3px 8px; border-block-end: 0; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table th { padding-inline: 7px 8px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-row:hover td { background: var(--fd-fill, var(--fd-page)); }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-row[aria-current=\"true\"] td { background: var(--fd-accent-soft); }\n/* Expand all and Collapse all 15px in, 25px by 22px and 4px apart, 7px before the next column; a parent's toggle, or room\n   the size of one, 24px and 5px before the name, and the name's header over the name. */\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table .fd-list-tree { padding-inline: 15px 7px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-folds { gap: 4px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-fold { width: 25px; height: 22px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-row[data-depth] > td[data-name] { padding-inline-start: calc(3px + var(--fd-depth, 0) * 20px); }\n/* The kind's icon 30px into the name's column, its words 4px after it, the header's word over the icon (08_18: the bug's\n   ink at 495, its title's words at 512, \"Title\" at 494). */\n.fd-form[data-fd-theme=\"fluent\"] :is(.fd-list-twisty, .fd-list-twisty-room) { width: 24px; margin-inline-end: 3px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table th[data-name] { padding-inline-start: 30px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-lead { margin-inline-end: 4px; }\n/* The grid runs 9px on past its last column's rule, as the tracker's does (08_18: its white to 2011, the rule at 2002). */\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll:has(> .fd-list-table[data-fixed]) { padding-inline-end: 9px; }\n/* Its card's scroll bar as the tracker's, on every system that lets a page draw one: 15px, a light track with a hairline\n   at its inner edge, a rounded thumb in it, no arrows. Each selector written out: Chrome drops a part's :horizontal under\n   an :is(), and a part paints no logical border. */\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar { width: 15px; height: 15px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-track,\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-corner { background: color-mix(in srgb, var(--fd-text) 2.2%, var(--fd-surface)); }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-track:horizontal {\n  border-top: 1px solid color-mix(in srgb, var(--fd-text) 10%, var(--fd-surface)); border-bottom: 1px solid color-mix(in srgb, var(--fd-text) 7.5%, var(--fd-surface));\n}\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-track:vertical {\n  border-left: 1px solid color-mix(in srgb, var(--fd-text) 10%, var(--fd-surface)); border-right: 1px solid color-mix(in srgb, var(--fd-text) 7.5%, var(--fd-surface));\n}\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-thumb {\n  border: solid transparent; border-width: 4px 3px 3px; border-radius: 8px; background: color-mix(in srgb, var(--fd-text) 24.5%, var(--fd-surface)) padding-box;\n}\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-thumb:vertical { border-width: 3px 3px 3px 4px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--fd-text) 40%, var(--fd-surface)); }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-button { display: none; }\n";
 /** Puts the list's look in the document once. */
 export declare function installListStyles(doc: Document): void;

package/src/lib/list-styles.js

@@ -81,7 +81,9 @@ exports.LIST_STYLES = `
 .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 th { text-align: start; font-weight: 600; color: var(--fd-text); padding: 8px 10px; border-block-end: 1px solid var(--fd-border-strong); white-space: nowrap; background: var(--fd-surface); }
+/* The header's words smaller than the rows', its cell the rows' size: a column's width in characters is the same in both. */
+.fd-list-head { font-size: 13px; }
 .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; }
@@ -111,6 +113,91 @@ exports.LIST_STYLES = `
 .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); }
+
+/* A column of a given width (cells), in characters of the rows' words: what does not fit ends in "…". */
+.fd-list-table [data-width] { box-sizing: content-box; width: calc(var(--fd-col-width) * 1ch); max-width: calc(var(--fd-col-width) * 1ch); overflow: hidden; text-overflow: ellipsis; }
+.fd-list-table th[data-width] .fd-list-sort { min-width: 0; }
+.fd-list-table th[data-width] .fd-list-head { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+/* A column in pixels: the whole column, its paddings in it, as a work tracker sizes its grid's. */
+.fd-list-table [data-width-px] { box-sizing: border-box; width: var(--fd-col-px); min-width: var(--fd-col-px); max-width: var(--fd-col-px); overflow: hidden; text-overflow: ellipsis; }
+.fd-list-table th[data-width-px] .fd-list-sort { min-width: 0; }
+.fd-list-table th[data-width-px] .fd-list-head { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+/* Every column sized: the table as wide as they are, never stretched; wider than its card, the card scrolls sideways. */
+.fd-list-table[data-fixed] { width: max-content; }
+/* The row whose record is open (in a popup over the list): lit as a chosen one is, until it closes. */
+.fd-list-row[aria-current="true"] td { background: var(--fd-accent-soft); }
+/* What a cell draws before its words: a kind's icon in its colour, a state's dot. */
+.fd-list-lead { width: 14px; height: 14px; margin-inline-end: 6px; vertical-align: -2px; flex: none; stroke-width: 2.2; }
+.fd-list-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; vertical-align: 1px; background: var(--fd-dot, var(--fd-border-strong)); }
+.fd-list-dot[data-tone="muted"] { --fd-dot: var(--fd-border-strong); }
+.fd-list-dot[data-tone="danger"] { --fd-dot: var(--fd-error); }
+.fd-list-dot[data-tone="success"] { --fd-dot: var(--fd-success); }
+.fd-list-dot[data-tone="warning"] { --fd-dot: #d97706; }
+.fd-list-dot[data-tone="info"] { --fd-dot: var(--fd-info); }
+@media (forced-colors: active) { .fd-list-dot { background: CanvasText; } }
+/* Rows under their parent: Expand all and Collapse all in the header, a toggle before a parent's name, each depth further in. */
+.fd-list-table .fd-list-tree { width: 1%; padding-inline: 10px 4px; white-space: nowrap; }
+.fd-list-folds { display: inline-flex; gap: 6px; vertical-align: middle; }
+.fd-list-fold { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--fd-text); border-radius: 2px; color: var(--fd-text); font-size: 18px; font-weight: 400; line-height: 1; }
+.fd-list-fold:hover { background: var(--fd-page); }
+.fd-list-fold:focus-visible, .fd-list-twisty:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+.fd-list-row[data-depth] > td[data-name] { padding-inline-start: calc(10px + var(--fd-depth, 0) * 20px); }
+.fd-list-twisty, .fd-list-twisty-room { display: inline-block; width: 20px; height: 20px; margin-inline-end: 2px; vertical-align: middle; }
+.fd-list-twisty { all: unset; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-inline-end: 2px; vertical-align: middle; cursor: pointer; border-radius: 2px; color: var(--fd-muted); }
+.fd-list-twisty::before { content: ''; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.12s; }
+.fd-list-twisty:dir(rtl)::before { transform: rotate(-135deg); }
+.fd-list-twisty[aria-expanded="true"]::before { transform: rotate(135deg); }
+.fd-list-twisty:hover { background: var(--fd-page); color: var(--fd-text); }
+
+/* A list with the filter bar: its card above the table's, the pager under the table. */
+.fd-list[data-search="fields"] .fd-list-bar { gap: 16px; }
+.fd-list[data-search="fields"] .fd-list-records > .fd-pager { justify-self: end; }
+/* Fluent's lists, as a work tracker draws its backlog: the table a card with a light shadow and no frame; the header's words
+   small, semibold and muted, the columns parted by short rules; rows 35px tall with no lines between them. */
+/* Its header 38px and its rule, 39px in all whether a column's width is in pixels (its whole box) or characters. */
+.fd-form[data-fd-theme="fluent"] .fd-list-table th { position: relative; box-sizing: border-box; height: 39px; padding-block: 0; color: var(--fd-muted); border-block-end: 1px solid var(--fd-border); }
+.fd-form[data-fd-theme="fluent"] .fd-list-head { font-size: 12px; font-weight: 600; }
+.fd-form[data-fd-theme="fluent"] .fd-list-table thead th:not(:first-child)::after { content: ''; position: absolute; inset-inline-end: var(--fd-rule-in, 0px); inset-block: 10px; width: 1px; background: var(--fd-border); }
+.fd-form[data-fd-theme="fluent"] .fd-list-table thead th.fd-list-tree::after, .fd-form[data-fd-theme="fluent"] .fd-list-table thead th.fd-list-check::after { content: none; }
+/* A column the page says has no rule (a tracker's Order, which the person cannot size). */
+.fd-form[data-fd-theme="fluent"] .fd-list-table thead th[data-rule="none"]::after { content: none; }
+/* Rows 36px apart (measured on the tracker's backlog: 17 rows from y 280 to 892); a cell's words 3px in from its column's
+   start, its header's 7px, so a header stands a little in from the words under it. */
+.fd-form[data-fd-theme="fluent"] .fd-list-table td { height: 36px; padding-block: 0; padding-inline: 3px 8px; border-block-end: 0; }
+.fd-form[data-fd-theme="fluent"] .fd-list-table th { padding-inline: 7px 8px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-row:hover td { background: var(--fd-fill, var(--fd-page)); }
+.fd-form[data-fd-theme="fluent"] .fd-list-row[aria-current="true"] td { background: var(--fd-accent-soft); }
+/* Expand all and Collapse all 15px in, 25px by 22px and 4px apart, 7px before the next column; a parent's toggle, or room
+   the size of one, 24px and 5px before the name, and the name's header over the name. */
+.fd-form[data-fd-theme="fluent"] .fd-list-table .fd-list-tree { padding-inline: 15px 7px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-folds { gap: 4px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-fold { width: 25px; height: 22px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-row[data-depth] > td[data-name] { padding-inline-start: calc(3px + var(--fd-depth, 0) * 20px); }
+/* The kind's icon 30px into the name's column, its words 4px after it, the header's word over the icon (08_18: the bug's
+   ink at 495, its title's words at 512, "Title" at 494). */
+.fd-form[data-fd-theme="fluent"] :is(.fd-list-twisty, .fd-list-twisty-room) { width: 24px; margin-inline-end: 3px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-table th[data-name] { padding-inline-start: 30px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-lead { margin-inline-end: 4px; }
+/* The grid runs 9px on past its last column's rule, as the tracker's does (08_18: its white to 2011, the rule at 2002). */
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll:has(> .fd-list-table[data-fixed]) { padding-inline-end: 9px; }
+/* Its card's scroll bar as the tracker's, on every system that lets a page draw one: 15px, a light track with a hairline
+   at its inner edge, a rounded thumb in it, no arrows. Each selector written out: Chrome drops a part's :horizontal under
+   an :is(), and a part paints no logical border. */
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar { width: 15px; height: 15px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-track,
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-corner { background: color-mix(in srgb, var(--fd-text) 2.2%, var(--fd-surface)); }
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid color-mix(in srgb, var(--fd-text) 10%, var(--fd-surface)); border-bottom: 1px solid color-mix(in srgb, var(--fd-text) 7.5%, var(--fd-surface));
+}
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid color-mix(in srgb, var(--fd-text) 10%, var(--fd-surface)); border-right: 1px solid color-mix(in srgb, var(--fd-text) 7.5%, var(--fd-surface));
+}
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-thumb {
+  border: solid transparent; border-width: 4px 3px 3px; border-radius: 8px; background: color-mix(in srgb, var(--fd-text) 24.5%, var(--fd-surface)) padding-box;
+}
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-thumb:vertical { border-width: 3px 3px 3px 4px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--fd-text) 40%, var(--fd-surface)); }
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-button { display: none; }
 `;
 /** Puts the list's look in the document once. */
 function installListStyles(doc) {

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

@@ -1 +1 @@
-{"version":3,"file":"list-styles.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/list-styles.ts"],"names":[],"mappings":";;;AAgHA,8CAMC;AAtHD,iEAAiE;AACpD,QAAA,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4G1B,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"}
+{"version":3,"file":"list-styles.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/list-styles.ts"],"names":[],"mappings":";;;AAuMA,8CAMC;AA7MD,iEAAiE;AACpD,QAAA,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmM1B,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

@@ -77,7 +77,9 @@ export const LIST_STYLES = `
 .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 th { text-align: start; font-weight: 600; color: var(--fd-text); padding: 8px 10px; border-block-end: 1px solid var(--fd-border-strong); white-space: nowrap; background: var(--fd-surface); }
+/* The header's words smaller than the rows', its cell the rows' size: a column's width in characters is the same in both. */
+.fd-list-head { font-size: 13px; }
 .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; }
@@ -107,6 +109,91 @@ export const LIST_STYLES = `
 .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); }
+
+/* A column of a given width (cells), in characters of the rows' words: what does not fit ends in "…". */
+.fd-list-table [data-width] { box-sizing: content-box; width: calc(var(--fd-col-width) * 1ch); max-width: calc(var(--fd-col-width) * 1ch); overflow: hidden; text-overflow: ellipsis; }
+.fd-list-table th[data-width] .fd-list-sort { min-width: 0; }
+.fd-list-table th[data-width] .fd-list-head { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+/* A column in pixels: the whole column, its paddings in it, as a work tracker sizes its grid's. */
+.fd-list-table [data-width-px] { box-sizing: border-box; width: var(--fd-col-px); min-width: var(--fd-col-px); max-width: var(--fd-col-px); overflow: hidden; text-overflow: ellipsis; }
+.fd-list-table th[data-width-px] .fd-list-sort { min-width: 0; }
+.fd-list-table th[data-width-px] .fd-list-head { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+/* Every column sized: the table as wide as they are, never stretched; wider than its card, the card scrolls sideways. */
+.fd-list-table[data-fixed] { width: max-content; }
+/* The row whose record is open (in a popup over the list): lit as a chosen one is, until it closes. */
+.fd-list-row[aria-current="true"] td { background: var(--fd-accent-soft); }
+/* What a cell draws before its words: a kind's icon in its colour, a state's dot. */
+.fd-list-lead { width: 14px; height: 14px; margin-inline-end: 6px; vertical-align: -2px; flex: none; stroke-width: 2.2; }
+.fd-list-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; vertical-align: 1px; background: var(--fd-dot, var(--fd-border-strong)); }
+.fd-list-dot[data-tone="muted"] { --fd-dot: var(--fd-border-strong); }
+.fd-list-dot[data-tone="danger"] { --fd-dot: var(--fd-error); }
+.fd-list-dot[data-tone="success"] { --fd-dot: var(--fd-success); }
+.fd-list-dot[data-tone="warning"] { --fd-dot: #d97706; }
+.fd-list-dot[data-tone="info"] { --fd-dot: var(--fd-info); }
+@media (forced-colors: active) { .fd-list-dot { background: CanvasText; } }
+/* Rows under their parent: Expand all and Collapse all in the header, a toggle before a parent's name, each depth further in. */
+.fd-list-table .fd-list-tree { width: 1%; padding-inline: 10px 4px; white-space: nowrap; }
+.fd-list-folds { display: inline-flex; gap: 6px; vertical-align: middle; }
+.fd-list-fold { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--fd-text); border-radius: 2px; color: var(--fd-text); font-size: 18px; font-weight: 400; line-height: 1; }
+.fd-list-fold:hover { background: var(--fd-page); }
+.fd-list-fold:focus-visible, .fd-list-twisty:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+.fd-list-row[data-depth] > td[data-name] { padding-inline-start: calc(10px + var(--fd-depth, 0) * 20px); }
+.fd-list-twisty, .fd-list-twisty-room { display: inline-block; width: 20px; height: 20px; margin-inline-end: 2px; vertical-align: middle; }
+.fd-list-twisty { all: unset; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-inline-end: 2px; vertical-align: middle; cursor: pointer; border-radius: 2px; color: var(--fd-muted); }
+.fd-list-twisty::before { content: ''; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.12s; }
+.fd-list-twisty:dir(rtl)::before { transform: rotate(-135deg); }
+.fd-list-twisty[aria-expanded="true"]::before { transform: rotate(135deg); }
+.fd-list-twisty:hover { background: var(--fd-page); color: var(--fd-text); }
+
+/* A list with the filter bar: its card above the table's, the pager under the table. */
+.fd-list[data-search="fields"] .fd-list-bar { gap: 16px; }
+.fd-list[data-search="fields"] .fd-list-records > .fd-pager { justify-self: end; }
+/* Fluent's lists, as a work tracker draws its backlog: the table a card with a light shadow and no frame; the header's words
+   small, semibold and muted, the columns parted by short rules; rows 35px tall with no lines between them. */
+/* Its header 38px and its rule, 39px in all whether a column's width is in pixels (its whole box) or characters. */
+.fd-form[data-fd-theme="fluent"] .fd-list-table th { position: relative; box-sizing: border-box; height: 39px; padding-block: 0; color: var(--fd-muted); border-block-end: 1px solid var(--fd-border); }
+.fd-form[data-fd-theme="fluent"] .fd-list-head { font-size: 12px; font-weight: 600; }
+.fd-form[data-fd-theme="fluent"] .fd-list-table thead th:not(:first-child)::after { content: ''; position: absolute; inset-inline-end: var(--fd-rule-in, 0px); inset-block: 10px; width: 1px; background: var(--fd-border); }
+.fd-form[data-fd-theme="fluent"] .fd-list-table thead th.fd-list-tree::after, .fd-form[data-fd-theme="fluent"] .fd-list-table thead th.fd-list-check::after { content: none; }
+/* A column the page says has no rule (a tracker's Order, which the person cannot size). */
+.fd-form[data-fd-theme="fluent"] .fd-list-table thead th[data-rule="none"]::after { content: none; }
+/* Rows 36px apart (measured on the tracker's backlog: 17 rows from y 280 to 892); a cell's words 3px in from its column's
+   start, its header's 7px, so a header stands a little in from the words under it. */
+.fd-form[data-fd-theme="fluent"] .fd-list-table td { height: 36px; padding-block: 0; padding-inline: 3px 8px; border-block-end: 0; }
+.fd-form[data-fd-theme="fluent"] .fd-list-table th { padding-inline: 7px 8px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-row:hover td { background: var(--fd-fill, var(--fd-page)); }
+.fd-form[data-fd-theme="fluent"] .fd-list-row[aria-current="true"] td { background: var(--fd-accent-soft); }
+/* Expand all and Collapse all 15px in, 25px by 22px and 4px apart, 7px before the next column; a parent's toggle, or room
+   the size of one, 24px and 5px before the name, and the name's header over the name. */
+.fd-form[data-fd-theme="fluent"] .fd-list-table .fd-list-tree { padding-inline: 15px 7px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-folds { gap: 4px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-fold { width: 25px; height: 22px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-row[data-depth] > td[data-name] { padding-inline-start: calc(3px + var(--fd-depth, 0) * 20px); }
+/* The kind's icon 30px into the name's column, its words 4px after it, the header's word over the icon (08_18: the bug's
+   ink at 495, its title's words at 512, "Title" at 494). */
+.fd-form[data-fd-theme="fluent"] :is(.fd-list-twisty, .fd-list-twisty-room) { width: 24px; margin-inline-end: 3px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-table th[data-name] { padding-inline-start: 30px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-lead { margin-inline-end: 4px; }
+/* The grid runs 9px on past its last column's rule, as the tracker's does (08_18: its white to 2011, the rule at 2002). */
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll:has(> .fd-list-table[data-fixed]) { padding-inline-end: 9px; }
+/* Its card's scroll bar as the tracker's, on every system that lets a page draw one: 15px, a light track with a hairline
+   at its inner edge, a rounded thumb in it, no arrows. Each selector written out: Chrome drops a part's :horizontal under
+   an :is(), and a part paints no logical border. */
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar { width: 15px; height: 15px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-track,
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-corner { background: color-mix(in srgb, var(--fd-text) 2.2%, var(--fd-surface)); }
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid color-mix(in srgb, var(--fd-text) 10%, var(--fd-surface)); border-bottom: 1px solid color-mix(in srgb, var(--fd-text) 7.5%, var(--fd-surface));
+}
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid color-mix(in srgb, var(--fd-text) 10%, var(--fd-surface)); border-right: 1px solid color-mix(in srgb, var(--fd-text) 7.5%, var(--fd-surface));
+}
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-thumb {
+  border: solid transparent; border-width: 4px 3px 3px; border-radius: 8px; background: color-mix(in srgb, var(--fd-text) 24.5%, var(--fd-surface)) padding-box;
+}
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-thumb:vertical { border-width: 3px 3px 3px 4px; }
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--fd-text) 40%, var(--fd-surface)); }
+.fd-form[data-fd-theme="fluent"] .fd-list-scroll::-webkit-scrollbar-button { display: none; }
 `;
 /** Puts the list's look in the document once. */
 export function installListStyles(doc) {

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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4G1B,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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmM1B,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

@@ -19,7 +19,11 @@ export interface ListContext {
     icons?: IconSet;
     /** Where the list's favourite searches are kept. */
     preferences: PreferenceStore;
-    onOpenRecord?: (id: RecordId) => void;
+    /**
+     * A row opened. A promise answered (the record in a dialog, closed): the list asks again once it settles, and its row
+     * takes the focus back. Anything else answered is let be, so a handler that returns what it did (a push's count) still fits.
+     */
+    onOpenRecord?: (id: RecordId) => unknown;
     /** Conditions every search keeps: the records this list may show at all. */
     fixedFilter?: ResolvedFilter[];
     /** Other ways of showing the records, by name: `map` for a list with `map`. */
@@ -77,10 +81,21 @@ export interface ListViewPart {
     destroy(): void;
 }
 export type ListViewFactory = (context: ListViewContext) => ListViewPart;
+/** How a record is opened from the app rather than by a row's press. */
+export interface OpenRowOptions {
+    /** Its row marked open (aria-current, lit) while it is: true, as a press does; false when no row was pressed (the address). */
+    lit?: boolean;
+}
 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>;
+    /**
+     * Open a record as its row's press does: the app's onOpenRecord, its row marked open meanwhile (aria-current); once the
+     * app's promise settles, the records again and the focus back on its row. For an app that opens one by its address too:
+     * `{ lit: false }` leaves the row unmarked, as no row was pressed.
+     */
+    open(id: RecordId, options?: OpenRowOptions): Promise<void>;
     destroy(): void;
 }
 /**

package/src/lib/list.d.ts

@@ -19,7 +19,11 @@ export interface ListContext {
     icons?: IconSet;
     /** Where the list's favourite searches are kept. */
     preferences: PreferenceStore;
-    onOpenRecord?: (id: RecordId) => void;
+    /**
+     * A row opened. A promise answered (the record in a dialog, closed): the list asks again once it settles, and its row
+     * takes the focus back. Anything else answered is let be, so a handler that returns what it did (a push's count) still fits.
+     */
+    onOpenRecord?: (id: RecordId) => unknown;
     /** Conditions every search keeps: the records this list may show at all. */
     fixedFilter?: ResolvedFilter[];
     /** Other ways of showing the records, by name: `map` for a list with `map`. */
@@ -77,10 +81,21 @@ export interface ListViewPart {
     destroy(): void;
 }
 export type ListViewFactory = (context: ListViewContext) => ListViewPart;
+/** How a record is opened from the app rather than by a row's press. */
+export interface OpenRowOptions {
+    /** Its row marked open (aria-current, lit) while it is: true, as a press does; false when no row was pressed (the address). */
+    lit?: boolean;
+}
 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>;
+    /**
+     * Open a record as its row's press does: the app's onOpenRecord, its row marked open meanwhile (aria-current); once the
+     * app's promise settles, the records again and the focus back on its row. For an app that opens one by its address too:
+     * `{ lit: false }` leaves the row unmarked, as no row was pressed.
+     */
+    open(id: RecordId, options?: OpenRowOptions): Promise<void>;
     destroy(): void;
 }
 /**