@fieldia/viewer 0.14.1 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldia/viewer",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "Mount a Fieldia page in any web page: plain DOM, no framework.",
   "license": "MIT",
   "homepage": "https://fieldia.dev",
@@ -27,8 +27,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@fieldia/core": "0.14.1",
-    "@fieldia/widgets": "0.14.1",
+    "@fieldia/core": "0.15.0",
+    "@fieldia/widgets": "0.15.0",
     "tslib": "^2.8.1"
   },
   "sideEffects": false,

package/src/index.d.mts

@@ -2,5 +2,6 @@ export * from './lib/viewer.mjs';
 export * from './lib/dialog.mjs';
 export { addLanguage, type LanguageWords } from './lib/add-language.mjs';
 export { installListStyles } from './lib/list-styles.mjs';
+export type { ListViewContext, ListViewFactory, ListViewPart } from './lib/list.mjs';
 export { accentShades, applyLook, contrast, skinFor, THEME_SKINS, TOKEN_NAMES, wearTokens, type AccentShades, type TokenName, type Tokens } from './lib/look.mjs';
 export { labelPlace, planSection, type Place, type SectionPlan } from './lib/place.mjs';

package/src/index.d.ts

@@ -2,5 +2,6 @@ export * from './lib/viewer';
 export * from './lib/dialog';
 export { addLanguage, type LanguageWords } from './lib/add-language';
 export { installListStyles } from './lib/list-styles';
+export type { ListViewContext, ListViewFactory, ListViewPart } from './lib/list';
 export { accentShades, applyLook, contrast, skinFor, THEME_SKINS, TOKEN_NAMES, wearTokens, type AccentShades, type TokenName, type Tokens } from './lib/look';
 export { labelPlace, planSection, type Place, type SectionPlan } from './lib/place';

package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/viewer/src/index.ts"],"names":[],"mappings":";;;;AAAA,uDAA6B;AAC7B,uDAA6B;AAC7B,mDAAqE;AAA5D,2GAAA,WAAW,OAAA;AACpB,iDAAsD;AAA7C,gHAAA,iBAAiB,OAAA;AAC1B,mCAA8J;AAArJ,oGAAA,YAAY,OAAA;AAAE,iGAAA,SAAS,OAAA;AAAE,gGAAA,QAAQ,OAAA;AAAE,+FAAA,OAAO,OAAA;AAAE,mGAAA,WAAW,OAAA;AAAE,mGAAA,WAAW,OAAA;AAAE,kGAAA,UAAU,OAAA;AACzF,qCAAoF;AAA3E,mGAAA,UAAU,OAAA;AAAE,oGAAA,WAAW,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/viewer/src/index.ts"],"names":[],"mappings":";;;;AAAA,uDAA6B;AAC7B,uDAA6B;AAC7B,mDAAqE;AAA5D,2GAAA,WAAW,OAAA;AACpB,iDAAsD;AAA7C,gHAAA,iBAAiB,OAAA;AAE1B,mCAA8J;AAArJ,oGAAA,YAAY,OAAA;AAAE,iGAAA,SAAS,OAAA;AAAE,gGAAA,QAAQ,OAAA;AAAE,+FAAA,OAAO,OAAA;AAAE,mGAAA,WAAW,OAAA;AAAE,mGAAA,WAAW,OAAA;AAAE,kGAAA,UAAU,OAAA;AACzF,qCAAoF;AAA3E,mGAAA,UAAU,OAAA;AAAE,oGAAA,WAAW,OAAA"}

package/src/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../../libs/viewer/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAsB,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAkD,MAAM,YAAY,CAAC;AAC9J,OAAO,EAAE,UAAU,EAAE,WAAW,EAAgC,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../../libs/viewer/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAsB,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAkD,MAAM,YAAY,CAAC;AAC9J,OAAO,EAAE,UAAU,EAAE,WAAW,EAAgC,MAAM,aAAa,CAAC"}

package/src/lib/labels.d.mts

@@ -48,6 +48,11 @@ export interface ViewerLabels {
     selected: string;
     clearSelection: string;
     selectAll: string;
+    /** A list that is also a map: the switch between them, and its name. */
+    showAs: string;
+    viewList: string;
+    viewMap: string;
+    viewBoth: string;
     selectRecord: string;
     noRecords: string;
     loadFailed: string;

package/src/lib/labels.d.ts

@@ -48,6 +48,11 @@ export interface ViewerLabels {
     selected: string;
     clearSelection: string;
     selectAll: string;
+    /** A list that is also a map: the switch between them, and its name. */
+    showAs: string;
+    viewList: string;
+    viewMap: string;
+    viewBoth: string;
     selectRecord: string;
     noRecords: string;
     loadFailed: string;

package/src/lib/labels.js

@@ -41,6 +41,10 @@ const en = {
     selected: '{n} selected',
     clearSelection: 'Clear',
     selectAll: 'Select all',
+    showAs: 'Show as',
+    viewList: 'List',
+    viewMap: 'Map',
+    viewBoth: 'List and map',
     selectRecord: 'Select {name}',
     noRecords: 'No records match.',
     loadFailed: 'Could not load the records.',

package/src/lib/labels.js.map

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

package/src/lib/labels.mjs

@@ -37,6 +37,10 @@ const en = {
     selected: '{n} selected',
     clearSelection: 'Clear',
     selectAll: 'Select all',
+    showAs: 'Show as',
+    viewList: 'List',
+    viewMap: 'Map',
+    viewBoth: 'List and map',
     selectRecord: 'Select {name}',
     noRecords: 'No records match.',
     loadFailed: 'Could not load the records.',

package/src/lib/labels.mjs.map

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

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

@@ -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.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; 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

@@ -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.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; 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

@@ -7,6 +7,21 @@ 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; }
+/* A list that is also a map: List, Map, or both side by side; the map's part is drawn by @fieldia/map. */
+.fd-list { container: fd-list / inline-size; }
+.fd-list-views { display: inline-flex; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: hidden; }
+.fd-list-views .fd-button { border: 0; border-radius: 0; min-height: 32px; padding-inline: 12px; }
+.fd-list-views .fd-button + .fd-button { border-inline-start: 1px solid var(--fd-border); }
+.fd-list-views .fd-button[aria-pressed="true"] { background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 600; }
+.fd-list-body { display: grid; gap: 16px; min-width: 0; }
+.fd-list-records { display: grid; gap: 10px; min-width: 0; align-content: start; }
+.fd-list[data-view="list"] .fd-list-map { display: none; }
+.fd-list[data-view="map"] .fd-list-records, .fd-list[data-view="map"] .fd-pager { display: none; }
+.fd-list[data-view="both"] .fd-list-body { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); align-items: start; }
+.fd-list[data-view="both"] .fd-list-map { position: sticky; top: 8px; }
+/* Too narrow for two: the map over the table. */
+@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; } }
+.fd-list-row.fd-list-hot > td { background: var(--fd-accent-soft); }
 .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); }

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":";;;AAiGA,8CAMC;AAvGD,iEAAiE;AACpD,QAAA,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6F1B,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":";;;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"}

package/src/lib/list-styles.mjs

@@ -3,6 +3,21 @@ 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; }
+/* A list that is also a map: List, Map, or both side by side; the map's part is drawn by @fieldia/map. */
+.fd-list { container: fd-list / inline-size; }
+.fd-list-views { display: inline-flex; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: hidden; }
+.fd-list-views .fd-button { border: 0; border-radius: 0; min-height: 32px; padding-inline: 12px; }
+.fd-list-views .fd-button + .fd-button { border-inline-start: 1px solid var(--fd-border); }
+.fd-list-views .fd-button[aria-pressed="true"] { background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 600; }
+.fd-list-body { display: grid; gap: 16px; min-width: 0; }
+.fd-list-records { display: grid; gap: 10px; min-width: 0; align-content: start; }
+.fd-list[data-view="list"] .fd-list-map { display: none; }
+.fd-list[data-view="map"] .fd-list-records, .fd-list[data-view="map"] .fd-pager { display: none; }
+.fd-list[data-view="both"] .fd-list-body { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); align-items: start; }
+.fd-list[data-view="both"] .fd-list-map { position: sticky; top: 8px; }
+/* Too narrow for two: the map over the table. */
+@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; } }
+.fd-list-row.fd-list-hot > td { background: var(--fd-accent-soft); }
 .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); }

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6F1B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/src/lib/list.d.mts

@@ -1,4 +1,4 @@
-import { type DataSource, type Form, type ListNode, type Locale, type Page, type RecordId, type ResolvedFilter, type RunResult } from '@fieldia/core';
+import { type DataSource, type Form, type ListNode, type Locale, type ResolvedFilter as Resolved, type Page, type RecordId, type ResolvedFilter, type RunResult } from '@fieldia/core';
 import { type IconSet, type PreferenceStore } from '@fieldia/widgets';
 import type { El } from './dom.mjs';
 import type { ViewerLabels } from './labels.mjs';
@@ -22,7 +22,49 @@ export interface ListContext {
     onOpenRecord?: (id: RecordId) => void;
     /** 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`. */
+    views?: Record<string, ListViewFactory>;
 }
+/**
+ * What another way of showing a list's records is given, such as the map
+ * @fieldia/map draws beside the table: the records the search bar asks for,
+ * the records chosen (shared with the table and its buttons), a way to open
+ * one, to light its row, and to put a search into the search bar.
+ */
+export interface ListViewContext {
+    page: Page;
+    node: ListNode;
+    dataSource: DataSource | undefined;
+    document: Document;
+    locale: Locale;
+    icons?: IconSet;
+    /** What the search bar and the list's own conditions ask for now. */
+    filter(): Resolved[];
+    isChosen(id: RecordId): boolean;
+    choose(id: RecordId, on: boolean): void;
+    open?: (id: RecordId) => void;
+    /** Light a record's row in the table; null lights none. */
+    highlight(id: RecordId | null): void;
+    /** Put a search into the search bar, as a person's own: "In this area". */
+    addSearch(search: {
+        label: string;
+        filter: Resolved[];
+    }): void;
+}
+/** Another way of showing the list's records, made by a ListViewFactory. */
+export interface ListViewPart {
+    element: HTMLElement;
+    /** Ask for the records again: the search changed, or a button changed them. */
+    reload(): Promise<void>;
+    /** Light a record (its row is under the pointer or the focus); null lights none. */
+    highlight(id: RecordId | null): void;
+    /** The records chosen changed, in the table or here. */
+    chosenChanged(): void;
+    /** Shown after being hidden: measure again. */
+    shown(): void;
+    destroy(): void;
+}
+export type ListViewFactory = (context: ListViewContext) => ListViewPart;
 export interface ListView {
     element: HTMLElement;
     /** Ask for the records again, keeping the page, the order and what is chosen where it still applies. */

package/src/lib/list.d.ts

@@ -1,4 +1,4 @@
-import { type DataSource, type Form, type ListNode, type Locale, type Page, type RecordId, type ResolvedFilter, type RunResult } from '@fieldia/core';
+import { type DataSource, type Form, type ListNode, type Locale, type ResolvedFilter as Resolved, type Page, type RecordId, type ResolvedFilter, type RunResult } from '@fieldia/core';
 import { type IconSet, type PreferenceStore } from '@fieldia/widgets';
 import type { El } from './dom';
 import type { ViewerLabels } from './labels';
@@ -22,7 +22,49 @@ export interface ListContext {
     onOpenRecord?: (id: RecordId) => void;
     /** 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`. */
+    views?: Record<string, ListViewFactory>;
 }
+/**
+ * What another way of showing a list's records is given, such as the map
+ * @fieldia/map draws beside the table: the records the search bar asks for,
+ * the records chosen (shared with the table and its buttons), a way to open
+ * one, to light its row, and to put a search into the search bar.
+ */
+export interface ListViewContext {
+    page: Page;
+    node: ListNode;
+    dataSource: DataSource | undefined;
+    document: Document;
+    locale: Locale;
+    icons?: IconSet;
+    /** What the search bar and the list's own conditions ask for now. */
+    filter(): Resolved[];
+    isChosen(id: RecordId): boolean;
+    choose(id: RecordId, on: boolean): void;
+    open?: (id: RecordId) => void;
+    /** Light a record's row in the table; null lights none. */
+    highlight(id: RecordId | null): void;
+    /** Put a search into the search bar, as a person's own: "In this area". */
+    addSearch(search: {
+        label: string;
+        filter: Resolved[];
+    }): void;
+}
+/** Another way of showing the list's records, made by a ListViewFactory. */
+export interface ListViewPart {
+    element: HTMLElement;
+    /** Ask for the records again: the search changed, or a button changed them. */
+    reload(): Promise<void>;
+    /** Light a record (its row is under the pointer or the focus); null lights none. */
+    highlight(id: RecordId | null): void;
+    /** The records chosen changed, in the table or here. */
+    chosenChanged(): void;
+    /** Shown after being hidden: measure again. */
+    shown(): void;
+    destroy(): void;
+}
+export type ListViewFactory = (context: ListViewContext) => ListViewPart;
 export interface ListView {
     element: HTMLElement;
     /** Ask for the records again, keeping the page, the order and what is chosen where it still applies. */

package/src/lib/list.js

@@ -78,6 +78,7 @@ function listView(context) {
             else
                 chosen.delete(record.id);
             drawChoice();
+            mapPart?.chosenChanged();
         });
         const tr = el('tr', { class: context.onOpenRecord ? 'fd-list-row fd-list-openable' : 'fd-list-row', tabindex: '0', 'data-id': String(record.id), 'data-level': level ? String(level) : undefined }, el('td', { class: 'fd-list-check' }, box), 
         // Each value in its own direction: a phone number or an amount reads left to right on a right-to-left page.
@@ -109,6 +110,10 @@ function listView(context) {
                 next?.focus();
             }
         });
+        // Under the pointer or the focus: its pin on the map lights up.
+        tr.addEventListener('mouseenter', () => mapPart?.highlight(record.id));
+        tr.addEventListener('mouseleave', () => mapPart?.highlight(null));
+        tr.addEventListener('focus', () => mapPart?.highlight(record.id));
         recordOf.set(tr, record);
         return tr;
     }
@@ -120,7 +125,7 @@ function listView(context) {
         // Its confirmation, then its steps with the records chosen; then the records again, as they are now.
         button.addEventListener('click', () => void context.press(button, async () => {
             const result = await form.runAction(action.id, { recordIds: [...chosen] });
-            await load();
+            await Promise.all([load(), mapPart?.reload()]);
             return result;
         }));
         return button;
@@ -183,13 +188,17 @@ function listView(context) {
         }
     }
     // ---- asking for the records ------------------------------------------------------
-    /** Rows came or went: what is chosen keeps to the records on show. */
+    /** Rows came or went: what is chosen keeps to the records on show, the table's or the map's. */
     function changed() {
-        const shown = new Set(visible().map((record) => record.id));
-        for (const id of [...chosen])
-            if (!shown.has(id))
-                chosen.delete(id);
+        // On a map, a record chosen may be one the table's page does not hold.
+        if (view === 'list') {
+            const shown = new Set(visible().map((record) => record.id));
+            for (const id of [...chosen])
+                if (!shown.has(id))
+                    chosen.delete(id);
+        }
         drawChoice();
+        mapPart?.chosenChanged();
     }
     const grouped = (source) => ({
         page,
@@ -266,16 +275,85 @@ function listView(context) {
             facets = next;
             offset = 0;
             void load();
+            void mapPart?.reload();
         },
     });
-    const element = el('div', { class: 'fd-list', 'data-node': node.id }, el('div', { class: 'fd-list-bar' }, search.element, pager), selection, el('div', { class: 'fd-list-scroll' }, table), empty, failed);
+    // ---- the map, beside the table or instead of it ----------------------------------
+    const mapFactory = node.map ? context.views?.['map'] : undefined;
+    let view = mapFactory ? (node.map?.view ?? 'list') : 'list';
+    let mapPart = null;
+    const mapHolder = el('div', { class: 'fd-list-map' });
+    const currentFilter = () => [...(context.fixedFilter ?? []), ...(0, core_1.facetsToFilter)(facets, node)];
+    function makeMap() {
+        if (mapPart || !mapFactory)
+            return;
+        mapPart = mapFactory({
+            page,
+            node,
+            dataSource: context.dataSource,
+            document: doc,
+            locale,
+            icons: context.icons,
+            filter: currentFilter,
+            isChosen: (id) => chosen.has(id),
+            choose(id, on) {
+                if (on)
+                    chosen.add(id);
+                else
+                    chosen.delete(id);
+                for (const tr of body.querySelectorAll('.fd-list-row')) {
+                    if (tr.dataset['id'] !== String(id))
+                        continue;
+                    const box = tr.querySelector('.fd-list-checkbox');
+                    if (box)
+                        box.checked = on;
+                }
+                drawChoice();
+                mapPart?.chosenChanged();
+            },
+            ...(context.onOpenRecord ? { open: context.onOpenRecord } : {}),
+            highlight(id) {
+                for (const tr of body.querySelectorAll('.fd-list-row')) {
+                    const hot = id !== null && tr.dataset['id'] === String(id);
+                    tr.classList.toggle('fd-list-hot', hot);
+                    if (hot && view === 'both')
+                        tr.scrollIntoView({ block: 'nearest' });
+                }
+            },
+            addSearch: ({ label, filter }) => search.add({ kind: 'custom', label, filter }),
+        });
+        mapHolder.append(mapPart.element);
+        void mapPart.reload();
+    }
+    const viewButtons = ['list', 'map', 'both'].map((name) => {
+        const button = el('button', { type: 'button', class: 'fd-button fd-list-view', 'data-view': name, 'aria-pressed': 'false' }, name === 'list' ? labels.viewList : name === 'map' ? labels.viewMap : labels.viewBoth);
+        button.addEventListener('click', () => showAs(name));
+        return button;
+    });
+    const views = el('div', { class: 'fd-list-views', role: 'group', 'aria-label': labels.showAs }, ...viewButtons);
+    views.hidden = !mapFactory;
+    function showAs(next) {
+        view = next;
+        element.dataset['view'] = view;
+        for (const button of viewButtons)
+            button.setAttribute('aria-pressed', String(button.dataset['view'] === view));
+        if (view !== 'list') {
+            makeMap();
+            mapPart?.shown();
+        }
+    }
+    const element = el('div', { class: 'fd-list', 'data-node': node.id }, el('div', { class: 'fd-list-bar' }, search.element, views, pager), selection, el('div', { class: 'fd-list-body' }, el('div', { class: 'fd-list-records' }, el('div', { class: 'fd-list-scroll' }, table), empty, failed), mapHolder));
+    showAs(view);
     void load();
     return {
         element,
-        reload: load,
+        reload: async () => {
+            await Promise.all([load(), mapPart?.reload()]);
+        },
         destroy() {
             destroyed = true;
             search.destroy();
+            mapPart?.destroy();
         },
     };
 }