lintje 0.5.1 → 0.7.0

package/dist-elements/data-types.json

@@ -31,6 +31,23 @@
         }
       ]
     },
+    "AddonState": {
+      "kind": "interface",
+      "module": "src/components/inputs/shared/addon.ts",
+      "extends": [],
+      "fields": [
+        {
+          "name": "readonly",
+          "type": "boolean",
+          "optional": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "optional": false
+        }
+      ]
+    },
     "AnnouncementBlockOptions": {
       "kind": "interface",
       "module": "src/components/shared/announcement-block.ts",
@@ -644,7 +661,7 @@
     "ChartData": {
       "kind": "interface",
       "module": "src/types.ts",
-      "description": "Events: `lintje-mark-select` `{id, label, href}` when a mark with a `href` is clicked,\n`{id: null, href: clearHref}` when the selection is undone.",
+      "description": "Events: `lintje-mark-select` `{id, label, href}` when a mark with a `href` is clicked,\n`{id: null, href: clearHref}` when the selection is undone; uncancelled, the page goes to\nthat `href`.",
       "extends": [
         "FrameSettings",
         "TileData",
@@ -896,9 +913,9 @@
         },
         {
           "name": "onSelect",
-          "type": "(mark: ChartSelection) => void",
+          "type": "(mark: ChartSelection, newTab?: boolean) => void",
           "optional": true,
-          "description": "A mark that carries a `href` was activated. Without this the marks stay inert."
+          "description": "A mark that carries a `href` was activated; `newTab` for a modifier or middle click. Without\nthis the marks stay inert."
         },
         {
           "name": "onClear",
@@ -1229,7 +1246,8 @@
             {
               "name": "legendTable",
               "type": "boolean",
-              "optional": true
+              "optional": true,
+              "description": "The legend as a table with counts and shares; `false` puts the shared legend above the pie."
             },
             {
               "name": "labelHeader",
@@ -2100,7 +2118,7 @@
     "DataTableData": {
       "kind": "interface",
       "module": "src/types.ts",
-      "description": "Events: `lintje-row-click` with `{id, label, href?}` in a clickable table;\n`lintje-row-open` with `{id, label, href?}` from the name of an `openable` one;\n`lintje-checked-change` with the checked keys in a selectable one;\n`lintje-sort-change` with `{key, direction}` or `null`;\n`lintje-cell-edit` `{id, column, value}` from an `editor` column;\n`lintje-row-action` `{id, action}` from `rowActions`;\n`lintje-bulk-action` `{ids, action}` from `bulkActions`;\n`lintje-filter-change` `{column, value}` (`string[] | string | null`) from a column `filter`;\n`lintje-columns-change` `{order, hidden}` from the `columnChooser`.",
+      "description": "Events: `lintje-row-click` with `{id, label, href?}` in a clickable table;\n`lintje-row-open` with `{id, label, href?}` from the name of an `openable` one; uncancelled,\neither goes to the row's `href`;\n`lintje-checked-change` with the checked keys in a selectable one;\n`lintje-sort-change` with `{key, direction}` or `null`;\n`lintje-cell-edit` `{id, column, value}` from an `editor` column;\n`lintje-row-action` `{id, label, action}` from `rowActions`;\n`lintje-bulk-action` `{ids, action}` from `bulkActions`;\n`lintje-filter-change` `{column, value}` (`string[] | string | null`) from a column `filter`;\n`lintje-columns-change` `{order, hidden}` from the `columnChooser`.",
       "extends": [
         "FrameSettings",
         "TileData",
@@ -2362,7 +2380,7 @@
           "name": "tone",
           "type": "DescriptionTone",
           "optional": true,
-          "description": "`changed`: differs from the default, and says \"Aangepast\". A shared tone carries its\nglyph when it has one, and the words are the host's (in the value or its slot)."
+          "description": "`changed`: differs from the default, and says \"Aangepast\". A shared tone carries its glyph\nwhen it has one, with a hidden word for what the glyph says; the rest of the words are the\nhost's (in the value or its slot)."
         },
         {
           "name": "slot",
@@ -2963,6 +2981,12 @@
           "name": "hasFilters",
           "type": "boolean",
           "optional": false
+        },
+        {
+          "name": "sentenceHeight",
+          "type": "number",
+          "optional": false,
+          "description": "Below 768 px, the height of the filter sentence that sticks under the bar; else 0."
         }
       ]
     },
@@ -3071,6 +3095,25 @@
       "module": "src/components/content/highlight/highlight.ts",
       "text": "'uncertain' | 'term' | 'match' | 'added' | 'removed'"
     },
+    "HoldOptions": {
+      "kind": "interface",
+      "module": "src/components/shared/dialog.ts",
+      "extends": [],
+      "fields": [
+        {
+          "name": "focus",
+          "type": "boolean | HTMLElement",
+          "optional": true,
+          "description": "As `FocusTrap.activate`; `false` leaves it, for a window that moves it once its content has drawn."
+        },
+        {
+          "name": "scroller",
+          "type": "HTMLElement | null",
+          "optional": true,
+          "description": "The element that scrolls behind the window, when the host names one; else the page."
+        }
+      ]
+    },
     "HostConfig": {
       "kind": "interface",
       "module": "src/core/host-config.ts",
@@ -3093,7 +3136,7 @@
     "IconGlyph": {
       "kind": "interface",
       "module": "src/icons/register.ts",
-      "description": "Generated by `npm run build:icons` — do not edit.\n\nThe icons the bundle carries itself: the chrome a component draws by name.\nEvery other icon is fetched by name when a name needs it\n(`src/icons/loader.ts`); the name is always the file name.\n\n63 icons, of 1200 in `dist-icons/`.",
+      "description": "Generated by `npm run build:icons` — do not edit.\n\nThe icons the bundle carries itself: the chrome a component draws by name.\nEvery other icon is fetched by name when a name needs it\n(`src/icons/loader.ts`); the name is always the file name.\n\n64 icons, of 1200 in `dist-icons/`.",
       "extends": [],
       "fields": [
         {
@@ -3630,7 +3673,7 @@
         },
         {
           "name": "select",
-          "type": "(value: MapValue) => void",
+          "type": "(value: MapValue, newTab?: boolean) => void",
           "optional": false
         },
         {
@@ -3673,6 +3716,12 @@
           "optional": true,
           "description": "The shape the line carries at its end, drawn on its line marker (rule 13)."
         },
+        {
+          "name": "symbolShape",
+          "type": "SeriesShape",
+          "optional": true,
+          "description": "A `point` marker's shape when it is not the shape of a colour's name (a map's styled series)."
+        },
         {
           "name": "hidden",
           "type": "boolean",
@@ -3942,12 +3991,6 @@
           "optional": true,
           "description": "The theme's emblem (the ribbon) by file name, with the organisation's name and byline."
         },
-        {
-          "name": "ribbon",
-          "type": "number",
-          "optional": false,
-          "description": "`RIBBON_WIDTH.desktop` or `.phone`."
-        },
         {
           "name": "environment",
           "type": "string",
@@ -4113,7 +4156,7 @@
     "MapData": {
       "kind": "interface",
       "module": "src/types.ts",
-      "description": "Events: `lintje-mark-select` `{id, label, href?}` on a click on an area or point,\n`{id: null, href: clearHref}` when undone; `lintje-layer-change` with the chosen layer;\nwith `controls.lasso` or `controls.circle`, `lintje-area-select` `{area, ids}` for a drawn area and\n`{area: null, ids: []}` when it is undone.",
+      "description": "Events: `lintje-mark-select` `{id, label, href?}` on a click on an area or point,\n`{id: null, href: clearHref}` when undone; `lintje-layer-change` with the chosen layer;\nwith `controls.lasso` or `controls.circle`, `lintje-area-select` `{area, ids}` for a drawn area and\n`{area: null, ids: []}` when it is undone. An uncancelled `lintje-mark-select` goes to its\n`href`.",
       "extends": [
         "FrameSettings",
         "TileData",
@@ -4175,6 +4218,17 @@
           "name": "seriesLabels",
           "type": "Partial<Record<MapSeriesKey, string>>",
           "optional": true
+        },
+        {
+          "name": "seriesStyles",
+          "type": "Partial<Record<MapSeriesKey, MapSeriesStyle>>",
+          "optional": true
+        },
+        {
+          "name": "size",
+          "type": "MapPointSize",
+          "optional": true,
+          "description": "How this layer's points are sized; `pointRadius` reads it."
         }
       ]
     },
@@ -4250,9 +4304,9 @@
         },
         {
           "name": "onSelect",
-          "type": "(mark: MapValue) => void",
+          "type": "(mark: MapValue, newTab?: boolean) => void",
           "optional": true,
-          "description": "An area or point was clicked; the whole mark travels, as the panel needs its figure."
+          "description": "An area or point was clicked; the whole mark travels, as the panel needs its figure. `newTab`\nfor a modifier or middle click on a mark with an `href`, which leaves the selection be."
         },
         {
           "name": "onClear",
@@ -4312,6 +4366,18 @@
           "type": "Partial<Record<MapSeriesKey, string>>",
           "optional": true,
           "description": "What each series in this layer means, over the map's own `seriesLabels`. A colour may serve\nseveral layers; each layer's line in the legend names and switches its own."
+        },
+        {
+          "name": "seriesStyles",
+          "type": "Partial<Record<MapSeriesKey, MapSeriesStyle>>",
+          "optional": true,
+          "description": "How this layer's series draw, over the map's own `seriesStyles`."
+        },
+        {
+          "name": "size",
+          "type": "MapPointSize",
+          "optional": true,
+          "description": "How this layer's points are sized; without it the map's own `size`."
         }
       ]
     },
@@ -4321,11 +4387,67 @@
       "description": "What one layer of a stacked map draws: a map's variant, without the scope picker.",
       "text": "'polygons' | 'points' | 'flows' | 'choropleth'"
     },
+    "MapPointSize": {
+      "kind": "interface",
+      "module": "src/components/shared/charts/shared/types.ts",
+      "description": "How a layer's points are sized. Without it a point's radius grows from 3 to 18 px with the\nsquare root of its figure's share of the layer's largest, and keeps that size at every zoom.",
+      "extends": [],
+      "fields": [
+        {
+          "name": "min",
+          "type": "number",
+          "optional": true,
+          "description": "The smallest radius in px; default 3."
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "optional": true,
+          "description": "The largest radius in px; default 18."
+        },
+        {
+          "name": "by",
+          "type": "'value' | 'none'",
+          "optional": true,
+          "description": "`value` (default): the radius follows the figure. `none`: every point draws at `min` — for a\nlayer whose figure is a count of one, or no size at all, so a national view is not a field\nof points all at the largest size."
+        },
+        {
+          "name": "zoom",
+          "type": "boolean",
+          "optional": true,
+          "description": "The radius follows the zoom — twice as large one level in, half a level out, between 2 and\n28 px — so a point reads as fixed to the ground. Default off: a point keeps its pixel size."
+        }
+      ]
+    },
+    "MapSeriesColor": {
+      "kind": "alias",
+      "module": "src/components/shared/charts/shared/types.ts",
+      "description": "A series' colour: a data colour, or `neutral` — the comparison grey, for a map whose series differ by shape alone.",
+      "text": "DataColor | 'neutral'"
+    },
     "MapSeriesKey": {
       "kind": "alias",
       "module": "src/components/shared/charts/shared/types.ts",
-      "description": "A map point's data colour, by name: one of the data colours, each with its own shape.",
-      "text": "DataColor"
+      "description": "What a point's `series` names: a data colour by name, which brings that colour's shape — or\nany key of the map's `seriesStyles`, which says what colour and shape it draws with. The\nunion keeps the colour names as suggestions beside the free key.",
+      "text": "DataColor | (string & {})"
+    },
+    "MapSeriesStyle": {
+      "kind": "interface",
+      "module": "src/components/shared/charts/shared/types.ts",
+      "description": "How a series draws, named by its key in `seriesStyles`. Without an entry a series is a data\ncolour by name with that colour's own shape (rule 13); with one, each part left out keeps\nthat default — and a key that is no colour name draws the default colour and a circle.",
+      "extends": [],
+      "fields": [
+        {
+          "name": "color",
+          "type": "MapSeriesColor",
+          "optional": true
+        },
+        {
+          "name": "shape",
+          "type": "SeriesShape",
+          "optional": true
+        }
+      ]
     },
     "MapSpec": {
       "kind": "interface",
@@ -4396,7 +4518,13 @@
           "name": "seriesLabels",
           "type": "Partial<Record<MapSeriesKey, string>>",
           "optional": true,
-          "description": "What each series means, keyed by colour name; each used series gets a legend line."
+          "description": "What each series means, keyed by its series key; each used series gets a legend line."
+        },
+        {
+          "name": "seriesStyles",
+          "type": "Partial<Record<MapSeriesKey, MapSeriesStyle>>",
+          "optional": true,
+          "description": "How a series draws, keyed as `seriesLabels` is — for series that differ by shape alone, in\none neutral colour, when the colour would carry a meaning that is not there. Without an\nentry a series keeps the colour of its name and that colour's shape."
         },
         {
           "name": "selectLabel",
@@ -4427,6 +4555,12 @@
           "type": "MapArea | null",
           "optional": true,
           "description": "The area the host keeps, from its URL: adopted when it changes, as `selectedId` is."
+        },
+        {
+          "name": "size",
+          "type": "MapPointSize",
+          "optional": true,
+          "description": "How the points are sized, for every layer that does not say so itself."
         }
       ]
     },
@@ -4478,7 +4612,7 @@
           "name": "series",
           "type": "MapSeriesKey",
           "optional": true,
-          "description": "A data colour by name, and with it that colour's shape (rule 13). No series, no legend."
+          "description": "The series this mark belongs to: a data colour by name, and with it that colour's shape\n(rule 13), or a key styled in `seriesStyles`. No series, no legend."
         },
         {
           "name": "polygon",
@@ -4544,8 +4678,9 @@
         },
         {
           "name": "click",
-          "type": "(() => void) | typeof nothing",
-          "optional": false
+          "type": "((event: MouseEvent) => void) | typeof nothing",
+          "optional": false,
+          "description": "Bound to both `click` and `auxclick`: the middle button opens the mark's `href` in a new tab."
         },
         {
           "name": "keydown",
@@ -4599,7 +4734,7 @@
         },
         {
           "name": "select",
-          "type": "(value: MapValue) => void",
+          "type": "(value: MapValue, newTab?: boolean) => void",
           "optional": false
         },
         {
@@ -4921,6 +5056,79 @@
         }
       ]
     },
+    "OtherFieldOptions": {
+      "kind": "interface",
+      "module": "src/components/shared/other.ts",
+      "extends": [],
+      "fields": [
+        {
+          "name": "label",
+          "type": "string",
+          "optional": false,
+          "description": "The option's word: the field's hidden label."
+        },
+        {
+          "name": "text",
+          "type": "string",
+          "optional": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "optional": true
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "optional": true
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "optional": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "optional": true,
+          "description": "The holder's class for the field's place."
+        },
+        {
+          "name": "onCommit",
+          "type": "(text: string) => void",
+          "optional": false,
+          "description": "The text, committed when the reader leaves the field or presses Enter."
+        }
+      ]
+    },
+    "OtherHolder": {
+      "kind": "interface",
+      "module": "src/components/shared/controls.ts",
+      "description": "A choice group with \"Anders\" on, as its holders see it.",
+      "extends": [],
+      "fields": [
+        {
+          "name": "other",
+          "type": "boolean",
+          "optional": false
+        },
+        {
+          "name": "otherText",
+          "type": "string",
+          "optional": false
+        },
+        {
+          "name": "otherError",
+          "type": "string",
+          "optional": true
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "optional": true
+        }
+      ]
+    },
     "OverflowHost": {
       "kind": "interface",
       "module": "src/components/shared/overflow.ts",
@@ -5313,9 +5521,28 @@
         }
       ]
     },
-    "RowClickDetail": {
+    "ResolvedSeriesStyle": {
       "kind": "interface",
-      "module": "src/components/tables/list/list.ts",
+      "module": "src/components/shared/charts/map-chart/series-style.ts",
+      "extends": [],
+      "fields": [
+        {
+          "name": "color",
+          "type": "string | undefined",
+          "optional": false,
+          "description": "A CSS colour, or nothing for the default."
+        },
+        {
+          "name": "shape",
+          "type": "SeriesShape",
+          "optional": false
+        }
+      ]
+    },
+    "RowActionDetail": {
+      "kind": "interface",
+      "module": "src/types.ts",
+      "description": "What `lintje-row-action` carries, in `lintje-list` and `lintje-data-table`.",
       "extends": [],
       "fields": [
         {
@@ -5326,12 +5553,39 @@
         {
           "name": "label",
           "type": "string",
+          "optional": false,
+          "description": "The row's name: a list row's title, a table row's first column."
+        },
+        {
+          "name": "action",
+          "type": "string",
+          "optional": false,
+          "description": "The `value` of the chosen action."
+        }
+      ]
+    },
+    "RowClickDetail": {
+      "kind": "interface",
+      "module": "src/types.ts",
+      "description": "What `lintje-row-click` and `lintje-row-open` carry, in `lintje-list` and `lintje-data-table`.",
+      "extends": [],
+      "fields": [
+        {
+          "name": "id",
+          "type": "string",
           "optional": false
         },
+        {
+          "name": "label",
+          "type": "string",
+          "optional": false,
+          "description": "The row's name: a list row's title, a table row's first column."
+        },
         {
           "name": "href",
           "type": "string",
-          "optional": true
+          "optional": true,
+          "description": "The address the host gave the row, if any."
         }
       ]
     },
@@ -5935,6 +6189,12 @@
           "type": "string",
           "optional": true,
           "description": "A sentence or two about the step, shown only when the steps stand in a column."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "optional": true,
+          "description": "The name of the step's slot: a child of `<lintje-stepper>` with `slot=\"<value>\"` is the\nstep's own content, any Lintje element or plain HTML. It inherits the text colour; the host\ndecides what it shows."
         }
       ]
     },
@@ -6279,7 +6539,13 @@
           "name": "format",
           "type": "| 'text' | 'number' | 'percent' | 'decimal' | 'change' | 'change-compact' | 'status' | 'label'",
           "optional": true,
-          "description": "How a value shows; default `number` for numbers. `change`: a signed percentage with ▲ ▼ ●.\n`change-compact`: only the ▲ ▼ ● of `change`; a screen reader hears the whole change, and\nbelow 768 px the row's measure shows it whole.\n`status`: a `StatusTone` (or mapped through `status.tones`) as the status dot with its label.\n`label`: the value as a badge with the word, tone and icon from `labels`."
+          "description": "How a value shows; default `number` for numbers. `change`: a signed percentage with ▲ ▼ ●.\n`change-compact`: only the ▲ ▼ ● of `change`, its words in a tooltip (`tooltip`); a screen\nreader hears them, and below 768 px the row's measure shows the change whole.\n`status`: a `StatusTone` (or mapped through `status.tones`) as the status dot with its label.\n`label`: the value as a badge with the word, tone and icon from `labels`."
+        },
+        {
+          "name": "tooltip",
+          "type": "string",
+          "optional": true,
+          "description": "`change-compact`: the words the glyph stands for, as a template with `{key}` placeholders\nfilled from the row, each value read the way its column reads it (`{change}` gives\n\"▲ +4,2%\"). They are the glyph's tooltip, a screen reader hears them, and under the keyboard's\nfocus or without hover they stand whole. Without it, the whole change. Other formats ignore it."
         },
         {
           "name": "decimals",

package/dist-elements/dev.js

@@ -1,31 +1 @@
-//#region src/bundle/dev.ts
-function e(e = document) {
-	let t = /* @__PURE__ */ new Set();
-	for (let n of e.querySelectorAll("*")) {
-		let e = n.localName;
-		e.startsWith("lintje-") && !customElements.get(e) && t.add(e);
-	}
-	return [...t].sort();
-}
-var t = /* @__PURE__ */ new Set();
-function n(n = document) {
-	let r = e(n).filter((e) => !t.has(e));
-	for (let e of r) t.add(e), console.warn(`<${e}> is on the page but not defined. Import its file (tag/${e.replace(/^lintje-/, "")}.js) or its category.`);
-	return r;
-}
-var r = 1e3;
-if (typeof document < "u" && typeof MutationObserver < "u") {
-	let e, t = () => {
-		e === void 0 && (e = setTimeout(() => {
-			e = void 0, n();
-		}, r));
-	}, i = () => {
-		t(), new MutationObserver(t).observe(document.documentElement, {
-			childList: !0,
-			subtree: !0
-		});
-	};
-	document.readyState === "complete" ? i() : window.addEventListener("load", i, { once: !0 });
-}
-//#endregion
-export { n as reportUndefinedTags, e as undefinedTags };
+function e(e=document){let t=/* @__PURE__ */ new Set;for(let n of e.querySelectorAll(`*`)){let e=n.localName;e.startsWith(`lintje-`)&&!customElements.get(e)&&t.add(e)}return[...t].sort()}var t=/* @__PURE__ */ new Set;function n(n=document){let r=e(n).filter(e=>!t.has(e));for(let e of r)t.add(e),console.warn(`<${e}> is on the page but not defined. Import its file (tag/${e.replace(/^lintje-/,``)}.js) or its category.`);return r}var r=1e3;if(typeof document<`u`&&typeof MutationObserver<`u`){let e,t=()=>{e===void 0&&(e=setTimeout(()=>{e=void 0,n()},r))},i=()=>{t(),new MutationObserver(t).observe(document.documentElement,{childList:!0,subtree:!0})};document.readyState===`complete`?i():window.addEventListener(`load`,i,{once:!0})}export{n as reportUndefinedTags,e as undefinedTags};

package/dist-elements/feedback.js

@@ -1,11 +1 @@
-import "./chunks/base-Bd2pmq86.js";
-import "./tag/toast.js";
-import "./tag/announcement.js";
-import "./tag/empty-state.js";
-import "./tag/conflict-alert.js";
-import "./tag/error-page.js";
-import "./tag/job-list.js";
-import "./tag/streaming-text.js";
-import "./tag/ai-label.js";
-import "./tag/level-meter.js";
-import "./tag/recording-status.js";
+import"./chunks/base-BsZyWDre.js";import"./tag/toast.js";import"./tag/announcement.js";import"./tag/empty-state.js";import"./tag/conflict-alert.js";import"./tag/error-page.js";import"./tag/job-list.js";import"./tag/streaming-text.js";import"./tag/ai-label.js";import"./tag/level-meter.js";import"./tag/recording-status.js";

package/dist-elements/filters.js

@@ -1,3 +1 @@
-import "./tag/filter-zone.js";
-import "./tag/filter-sheet.js";
-import "./tag/filter-bar.js";
+import"./tag/filter-zone.js";import"./tag/filter-sheet.js";import"./tag/filter-bar.js";

package/dist-elements/forms.js

@@ -1,7 +1 @@
-import "./inputs.js";
-import "./tag/error-summary.js";
-import "./tag/form-actions.js";
-import "./tag/form.js";
-import "./tag/form-section.js";
-import "./tag/stepper.js";
-import "./tag/repeater.js";
+import"./inputs.js";import"./tag/error-summary.js";import"./tag/form-actions.js";import"./tag/form.js";import"./tag/form-section.js";import"./tag/stepper.js";import"./tag/repeater.js";

package/dist-elements/frame.js

@@ -1,9 +1 @@
-import "./tag/notifications.js";
-import "./tag/user-menu.js";
-import "./tag/shell.js";
-import "./tag/page-header.js";
-import "./tag/breadcrumbs.js";
-import "./tag/sub-nav.js";
-import "./tag/hero.js";
-import "./tag/footer.js";
-import "./tag/app-search.js";
+import"./tag/notifications.js";import"./tag/user-menu.js";import"./tag/shell.js";import"./tag/page-header.js";import"./tag/breadcrumbs.js";import"./tag/sub-nav.js";import"./tag/hero.js";import"./tag/footer.js";import"./tag/app-search.js";

package/dist-elements/guides/dashboard.md

@@ -84,8 +84,9 @@ applicatie.
 ## Doorklikken en selectie
 
 `lintje-row-click` en `lintje-mark-select` komen van de tabel en van de grafiek- en
-kaarttegels. Volg de `href` die je op die rij of markering hebt gezet, of zet `data.selectedId` zelf.
-Een selectie ongedaan maken is hetzelfde event met de id null en de `href` die je als `clearHref` gaf.
+kaarttegels. Heeft de rij of markering een `href`, dan gaat het element erheen, tenzij je het event
+annuleert; dan zet je `data.selectedId` zelf. Een selectie ongedaan maken is hetzelfde event met de
+id null, en gaat zo naar de `href` die je als `clearHref` gaf.
 `lintje-sort-change` zet `data.sort`, `lintje-checked-change` `data.checkedIds`,
 `lintje-layer-change` de `data.layer` van de kaart.
 

package/dist-elements/guides/events.md

@@ -1,7 +1,8 @@
 # Events: wat een element vraagt, en wat jij antwoordt
 
-Een element haalt nooit iets op, schrijft nooit de URL en navigeert nooit. Het stuurt een event en wacht
-tot jij een property zet. Elk event is een `CustomEvent`, bubbling en composed, dus één listener
+Een element haalt nooit iets op en schrijft nooit de URL; het gaat alleen naar een adres dat jij gaf,
+en nooit als je zijn event annuleert ([links](#links)). Het stuurt een event en wacht tot jij een
+property zet. Elk event is een `CustomEvent`, bubbling en composed, dus één listener
 op `document` hoort het vanaf elke diepte: de payload is `event.detail`, `event.target` het element
 dat het stuurde. Welke tag wat stuurt, staat in de styleguide, onder elk element.
 
@@ -23,6 +24,15 @@ download. Waar geen klik te volgen is — een resultaat dat je met Enter kiest i
 klik naast de titel van een kaart, een rij van de takenlijst — gaat het element zelf naar het adres, tenzij je het event annuleert. Een linkrij van `lintje-list` (`lintje-row-click`) en een melding met een `href`
 (`lintje-notification-open`) werken op dezelfde manier.
 
+Zo werken ook een klikbare rij van `lintje-data-table` (`lintje-row-click`, `lintje-row-open`), een
+teken in `lintje-chart` en een markering op `lintje-map` (`lintje-mark-select`) met een `href`:
+eerst het event, en annuleert niemand het, dan gaat het element naar de `href`, via
+`lintje-navigate`, zodat een router het daar opvangt. Een selectie ongedaan maken gaat zo naar de
+`clearHref`. Zonder `href` is er alleen het event. Een klik met een modifier of met de middelste
+knop op zo'n rij of teken stuurt hun event niet, maar opent de `href` in een nieuw tabblad, zoals
+een link: dan heeft `lintje-navigate` `{ href, newTab: true }`. Een router die `lintje-navigate`
+annuleert, ziet aan `newTab` dat de lezer een nieuw tabblad vroeg, en opent het zelf of laat het.
+
 Een instelling van de lezer in de shell — modus, thema, waar het menu staat — is geen link:
 `lintje-shell` stuurt `lintje-view-change` met de instelling die veranderde en laat het aan jou over
 ([dashboards](dashboard.md)).
@@ -86,9 +96,10 @@ Een *toestand* is iets wat je bewaart en terugzet op het element (en in de URL m
 | `lintje-time-change`, `lintje-play`, `lintje-pause` | `lintje-audio-player`, `lintje-video-player` | toestand |
 | `lintje-seek` | `lintje-audio-player`, `lintje-video-player`, `lintje-transcript` | actie |
 | `lintje-node-toggle` | `lintje-tree-view` | actie |
-| `lintje-toggle` | `lintje-expander`, `lintje-toggletip` | actie (niets te beantwoorden) |
+| `lintje-toggle` | `lintje-expander`, `lintje-toggletip`, `lintje-user-menu` | actie (niets te beantwoorden) |
 | `lintje-copy`, `lintje-copy-error` | `lintje-copy-button`, `lintje-qr-code` | actie (niets te beantwoorden) |
 | `lintje-job-cancel`, `lintje-job-resume`, `lintje-job-retry`, `lintje-job-remove` | `lintje-job-list` | actie |
+| `lintje-jobs-empty` | `lintje-job-list`: de laatste taak ging met de focus erin; annuleer het en zet de focus zelf op een zichtbaar doel | actie |
 | `lintje-stop` | `lintje-streaming-text` | actie |
 | `lintje-text-change`, `lintje-languages-swap` | `lintje-translator` | toestand, actie |
 | `lintje-segment-edit`, `lintje-segment-save`, `lintje-segment-cancel`, `lintje-segment-speaker`, `lintje-speaker-new`, `lintje-speaker-rename` | `lintje-transcript` | actie |
@@ -98,6 +109,11 @@ Een *toestand* is iets wat je bewaart en terugzet op het element (en in de URL m
 | `lintje-message-send`, `lintje-message-edit`, `lintje-suggestion-select`, `lintje-answer-retry`, `lintje-answer-rate`, `lintje-answer-stop` | de chat | actie |
 | `lintje-sources-change`, `lintje-draft-change`, `lintje-strip-change` | de chat | toestand |
 
+**Eén vorm voor een rij.** De lijst en de tabel sturen hetzelfde: `lintje-row-action` draagt
+`{ id, label, action }` (`RowActionDetail`), de sleutel van de rij, haar naam en de `value` van de
+gekozen actie; `lintje-row-click` en `lintje-row-open` dragen `{ id, label, href? }`
+(`RowClickDetail`). Beide types komen uit het pakket.
+
 **Het verzoek en zijn antwoord.** Een opslag, een zoekactie, een bestand, een taak om te annuleren, een cel om op te slaan: het
 element stuurt het verzoek en wacht op de property die het beantwoordt (`.options`, `.jobs`,
 `busy`, `.errors`, `busyCells`). Het toont de wijziging van de lezer meteen en verwacht dat je volgende