lintje 0.5.0 → 0.6.0

package/dist-elements/data-types.json

@@ -644,7 +644,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 +896,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 +1229,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 +2101,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, 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 +2363,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",
@@ -3630,7 +3631,7 @@
         },
         {
           "name": "select",
-          "type": "(value: MapValue) => void",
+          "type": "(value: MapValue, newTab?: boolean) => void",
           "optional": false
         },
         {
@@ -3673,6 +3674,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",
@@ -4113,7 +4120,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 +4182,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 +4268,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 +4330,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 +4351,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 +4482,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 +4519,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 +4576,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 +4642,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 +4698,7 @@
         },
         {
           "name": "select",
-          "type": "(value: MapValue) => void",
+          "type": "(value: MapValue, newTab?: boolean) => void",
           "optional": false
         },
         {
@@ -5313,6 +5412,24 @@
         }
       ]
     },
+    "ResolvedSeriesStyle": {
+      "kind": "interface",
+      "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
+        }
+      ]
+    },
     "RowClickDetail": {
       "kind": "interface",
       "module": "src/components/tables/list/list.ts",
@@ -5935,6 +6052,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."
         }
       ]
     },

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-CVKIPSLx.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-DuuwEY22.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)).

package/dist-elements/guides/loading.md

@@ -137,3 +137,7 @@ setHostConfig({ scrollRoot: () => document.querySelector('#content') })
 
 Houd de elementen buiten elke voorouder met een `transform`, `filter` of `contain`: de scrim van een modal
 is `position: fixed` en zou relatief worden aan die voorouder.
+
+De bovenindeling van `lintje-shell` zet haar navigatiebalk vast aan het venster, dus die vraagt een pagina die
+zelf scrolt. Scrollt je applicatie een eigen container, kies dan de zij-indeling (`layout="side"`): die werkt
+met een eigen `scrollRoot`.

package/dist-elements/guides/start.md

@@ -83,8 +83,10 @@ van je template-engine doet dat.
 
 **De invoer doet mee in een native formulier.** Een `lintje-button` met `type="submit"` verstuurt het,
 Enter in een tekst- of getalveld ook (Ctrl+Enter in een textarea), en `type="reset"`, een
-`disabled` veld en een `<fieldset disabled>` gedragen zich als bij native bedieningselementen. Een `required`
-tekstveld, getalveld of textarea houdt het versturen tegen met de eigen melding van de browser. Wat elk
+`disabled` veld en een `<fieldset disabled>` gedragen zich als bij native bedieningselementen. Elke
+invoer met `required` houdt het versturen tegen met de eigen melding van de browser zolang hij leeg is:
+hij post dan niets, of een van zijn waarden is leeg. De verzendknop post zijn eigen `name` en `value`
+niet: wil de server weten met welke knop er verstuurd is, zet dat dan in een veld. Wat elk
 bedieningselement onder zijn `name` post:
 
 | bedieningselement | post |
@@ -98,7 +100,8 @@ bedieningselement onder zijn `name` post:
 | bereik met twee grepen | `name=5&name=20`, de twee stapindexen; met één greep `name=15`, de stap |
 | bestandsupload | `name=<id>` per voltooid bestand: de upload zelf loopt via zijn events |
 
-Toon een geweigerde waarde door het veld te renderen met zijn `error`-attribuut.
+Toon een geweigerde waarde door het veld te renderen met zijn `error`-attribuut. Een `error` houdt het
+versturen niet tegen: het is het antwoord van de server op een eerdere verzending.
 
 ## Een pagina met script
 

package/dist-elements/inputs.js

@@ -1,21 +1 @@
-import "./tag/radio-group.js";
-import "./tag/segmented.js";
-import "./tag/textarea.js";
-import "./tag/find.js";
-import "./tag/select.js";
-import "./tag/text-input.js";
-import "./tag/field.js";
-import "./tag/number-input.js";
-import "./tag/combobox.js";
-import "./tag/checkbox.js";
-import "./tag/multiselect.js";
-import "./tag/tag-input.js";
-import "./tag/checkbox-group.js";
-import "./tag/toggle.js";
-import "./tag/range.js";
-import "./tag/date-input.js";
-import "./tag/time-input.js";
-import "./tag/date-range.js";
-import "./tag/slot-picker.js";
-import "./tag/file-upload.js";
-import "./tag/text-editor.js";
+import"./tag/radio-group.js";import"./tag/segmented.js";import"./tag/textarea.js";import"./tag/find.js";import"./tag/select.js";import"./tag/text-input.js";import"./tag/field.js";import"./tag/number-input.js";import"./tag/combobox.js";import"./tag/checkbox.js";import"./tag/multiselect.js";import"./tag/tag-input.js";import"./tag/checkbox-group.js";import"./tag/toggle.js";import"./tag/range.js";import"./tag/date-input.js";import"./tag/time-input.js";import"./tag/date-range.js";import"./tag/slot-picker.js";import"./tag/file-upload.js";import"./tag/text-editor.js";

package/dist-elements/layout.js

@@ -1,4 +1 @@
-import "./chunks/base-CVKIPSLx.js";
-import "./tag/tabs.js";
-import "./tag/expander.js";
-import "./tag/split-pane.js";
+import"./chunks/base-DuuwEY22.js";import"./tag/tabs.js";import"./tag/expander.js";import"./tag/split-pane.js";