lintje 0.1.1 → 0.2.0

package/dist-elements/custom-elements.json

@@ -751,14 +751,14 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/charts/chart-tile/chart-tile.ts",
+      "path": "src/components/charts/chart/chart.ts",
       "declarations": [
         {
           "kind": "class",
-          "name": "LintjeChartTile",
-          "tagName": "lintje-chart-tile",
+          "name": "LintjeChart",
+          "tagName": "lintje-chart",
           "customElement": true,
-          "description": "`<lintje-chart-tile>` — a chart in its tile, with loading, empty and error states.\n\nEvents: `lintje-mark-select` `{id, label, href}` when a mark with a `href` is clicked, and\n`{id: null, label: null, href: clearHref}` when it is deselected. Expand and download stay here.\n\nTwo controllers: the tile and the modal draw the same chart and must not share hover or width.\nThe table view is built from the CSV rows; it is element state, not URL state (rule 14).",
+          "description": "`<lintje-chart>` — a chart in its tile, with loading, empty and error states.\n\nEvents: `lintje-mark-select` `{id, label, href}` when a mark with a `href` is clicked, and\n`{id: null, label: null, href: clearHref}` when it is deselected. Expand and download stay here.\n\nTwo controllers: the tile and the modal draw the same chart and must not share hover or width.\nThe table view is built from the CSV rows; it is element state, not URL state (rule 14).",
           "superclass": {
             "name": "LintjeContentTileElement"
           },
@@ -791,7 +791,7 @@
               "kind": "field",
               "name": "data",
               "type": {
-                "text": "ChartTileData | null"
+                "text": "ChartData | null"
               }
             }
           ],
@@ -827,10 +827,10 @@
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "lintje-chart-tile",
+          "name": "lintje-chart",
           "declaration": {
-            "name": "LintjeChartTile",
-            "module": "src/components/charts/chart-tile/chart-tile.ts"
+            "name": "LintjeChart",
+            "module": "src/components/charts/chart/chart.ts"
           }
         }
       ]
@@ -1002,7 +1002,7 @@
           "name": "LintjeKpi",
           "tagName": "lintje-kpi",
           "customElement": true,
-          "description": "`<lintje-kpi>` — the KPI tile: one figure, or several of the same variable (`items`). Rich\nvalues go in as properties. The value counts up from zero once 35 % of the tile is in view,\nand not under `prefers-reduced-motion`. Events: none.",
+          "description": "`<lintje-kpi>` — the KPI tile: one figure, or several of the same variable (`items`). Rich\nvalues go in as properties. The value counts up from zero and the sparkline draws in once\n35 % of the tile is in view, and not under `prefers-reduced-motion`. A single figure can stand\non its scale (`gauge`): a half circle around the value or a bar under it, with the target\ndashed; the trend or note says in words how the figure stands to the target. Events: none.",
           "superclass": {
             "name": "LintjeGridItemElement"
           },
@@ -1111,6 +1111,22 @@
                 "text": "KpiTrend"
               }
             },
+            {
+              "kind": "field",
+              "name": "sparkline",
+              "type": {
+                "text": "KpiSparkline"
+              },
+              "description": "The figure's recent values as a line with its area, under the figure."
+            },
+            {
+              "kind": "field",
+              "name": "gauge",
+              "type": {
+                "text": "KpiGauge"
+              },
+              "description": "The single figure on its scale, as a half circle (`arc`) or a bar (`linear`); not with `items`."
+            },
             {
               "kind": "field",
               "name": "note",
@@ -12532,6 +12548,355 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/inputs/slot-picker/slot-picker.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "LintjeSlotPicker",
+          "tagName": "lintje-slot-picker",
+          "customElement": true,
+          "description": "`<lintje-slot-picker>` — a time for an appointment: days side by side, each with its times as\noptions. One radio group over every day, so the arrow keys walk the times and Tab stops once;\na time's name carries its day. A full time stays, disabled, with the word \"Vol\" beside it\n(rule 13), and a day without times says so. The days are the host's: it sends the ones it\noffers, and pages them itself.\n\nEvents: `lintje-change` with the chosen time's `value`; with a `name` also `lintje-values-change`.",
+          "superclass": {
+            "name": "LintjeInputElement"
+          },
+          "members": [
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "'light' | 'dark'"
+              },
+              "attribute": "mode",
+              "inheritedFrom": {
+                "name": "LintjeElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "span",
+              "type": {
+                "text": "number"
+              },
+              "description": "Columns of the 12-column grid; default one.",
+              "attribute": "span",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LintjeGridItemElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The filter key, e.g. `p.threshold`. Without it no `lintje-values-change` is sent.",
+              "attribute": "name",
+              "inheritedFrom": {
+                "name": "LintjeInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label",
+              "inheritedFrom": {
+                "name": "LintjeInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "hide-label",
+              "inheritedFrom": {
+                "name": "LintjeInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hint",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "hint",
+              "inheritedFrom": {
+                "name": "LintjeInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "string"
+              },
+              "description": "The Dutch error message.",
+              "attribute": "error",
+              "inheritedFrom": {
+                "name": "LintjeInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LintjeInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "modified",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Differs from the default: draws the orange dot by the label.",
+              "attribute": "modified",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LintjeInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The field must be filled. Draws nothing; sets `aria-required` and form validity.",
+              "attribute": "required",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LintjeInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the label \"(niet verplicht)\", inside the label so it is in the accessible name.",
+              "attribute": "optional",
+              "inheritedFrom": {
+                "name": "LintjeInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "layout",
+              "type": {
+                "text": "'row'"
+              },
+              "description": "`row`: a setting's row — the name and its hint on the left, the control on the right; stacked\nagain when the field itself is narrower than 35rem (a phone, a drawer). Left out, the label\nstands above the control.",
+              "attribute": "layout",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LintjeInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "resetLabel",
+              "type": {
+                "text": "string"
+              },
+              "description": "With `modified`: a link under the field (\"Terugzetten naar 2 tot 12\") that sends `lintje-reset`.",
+              "attribute": "reset-label",
+              "inheritedFrom": {
+                "name": "LintjeInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The chosen time's `value`; `''` while nothing is chosen.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "days",
+              "type": {
+                "text": "SlotDay[]"
+              }
+            }
+          ],
+          "methods": [],
+          "attributes": [
+            {
+              "name": "mode",
+              "fieldName": "mode",
+              "type": {
+                "text": "'light' | 'dark'"
+              }
+            },
+            {
+              "name": "span",
+              "fieldName": "span",
+              "type": {
+                "text": "number"
+              },
+              "description": "Columns of the 12-column grid; default one."
+            },
+            {
+              "name": "name",
+              "fieldName": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The filter key, e.g. `p.threshold`. Without it no `lintje-values-change` is sent."
+            },
+            {
+              "name": "label",
+              "fieldName": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "hide-label",
+              "fieldName": "hideLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "hint",
+              "fieldName": "hint",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "error",
+              "fieldName": "error",
+              "type": {
+                "text": "string"
+              },
+              "description": "The Dutch error message."
+            },
+            {
+              "name": "disabled",
+              "fieldName": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "modified",
+              "fieldName": "modified",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Differs from the default: draws the orange dot by the label."
+            },
+            {
+              "name": "required",
+              "fieldName": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The field must be filled. Draws nothing; sets `aria-required` and form validity."
+            },
+            {
+              "name": "optional",
+              "fieldName": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the label \"(niet verplicht)\", inside the label so it is in the accessible name."
+            },
+            {
+              "name": "layout",
+              "fieldName": "layout",
+              "type": {
+                "text": "'row'"
+              },
+              "description": "`row`: a setting's row — the name and its hint on the left, the control on the right; stacked\nagain when the field itself is narrower than 35rem (a phone, a drawer). Left out, the label\nstands above the control."
+            },
+            {
+              "name": "reset-label",
+              "fieldName": "resetLabel",
+              "type": {
+                "text": "string"
+              },
+              "description": "With `modified`: a link under the field (\"Terugzetten naar 2 tot 12\") that sends `lintje-reset`."
+            },
+            {
+              "name": "value",
+              "fieldName": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The chosen time's `value`; `''` while nothing is chosen."
+            }
+          ],
+          "events": [
+            {
+              "name": "lintje-change",
+              "type": {
+                "text": "CustomEvent<value>"
+              },
+              "description": "Not composed: it stops at the shadow root."
+            },
+            {
+              "name": "lintje-reset",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Not composed: it stops at the shadow root."
+            },
+            {
+              "name": "lintje-values-change",
+              "type": {
+                "text": "CustomEvent<{ [this.name] }>"
+              }
+            }
+          ],
+          "slots": []
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "lintje-slot-picker",
+          "declaration": {
+            "name": "LintjeSlotPicker",
+            "module": "src/components/inputs/slot-picker/slot-picker.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/inputs/tag-input/tag-input.ts",
@@ -14190,7 +14555,7 @@
           "name": "LintjeTimeInput",
           "tagName": "lintje-time-input",
           "customElement": true,
-          "description": "`<lintje-time-input>` — a time of day, `HH:MM` on a 24-hour clock, or `null` when empty.\nTyped text is read on leaving the field or Enter (`time-format.ts`). It checks its own text\nand shows a message in place of the hint; a host's `error` wins. It knows no day or time zone.\n\nEvents: `lintje-change` with `HH:MM` or `null`; with a `name` also `lintje-values-change`.",
+          "description": "`<lintje-time-input>` — a time of day, `HH:MM` on a 24-hour clock, or `null` when empty, typed\nor picked from a list. Typed text is read on leaving the field or Enter (`time-format.ts`).\nThe list holds the times from `min` to `max`, `step` minutes apart; a typed value between two\nof them stays as typed, and the list opens on the first time at or after it without selecting\none. The element checks its own text and shows a message in place of the hint; a host's\n`error` wins. It knows no day or time zone. Tab out of the element closes the list, so it does\nnot cover the next field.\n\nEvents: `lintje-change` with `HH:MM` or `null`; with a `name` also `lintje-values-change`.",
           "superclass": {
             "name": "LintjeInputElement"
           },
@@ -14373,7 +14738,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "The earliest time, `HH:MM`.",
+              "description": "The earliest time, `HH:MM`; the list starts here, else at 00:00.",
               "attribute": "min"
             },
             {
@@ -14382,7 +14747,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "The latest time, `HH:MM`.",
+              "description": "The latest time, `HH:MM`; the list ends at the last time at or before it, else 23:59.",
               "attribute": "max"
             },
             {
@@ -14392,7 +14757,7 @@
                 "text": "number"
               },
               "default": "15",
-              "description": "The minutes PageUp and PageDown move.",
+              "description": "The minutes between the times in the list, and that PageUp and PageDown move in the field.",
               "attribute": "step"
             },
             {
@@ -14413,6 +14778,17 @@
               "default": "false",
               "attribute": "stacked",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the list is open. Reflected, so a sheet can leave Escape to it.",
+              "attribute": "open",
+              "reflects": true
             }
           ],
           "methods": [],
@@ -14537,7 +14913,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "The earliest time, `HH:MM`."
+              "description": "The earliest time, `HH:MM`; the list starts here, else at 00:00."
             },
             {
               "name": "max",
@@ -14545,7 +14921,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "The latest time, `HH:MM`."
+              "description": "The latest time, `HH:MM`; the list ends at the last time at or before it, else 23:59."
             },
             {
               "name": "step",
@@ -14554,7 +14930,7 @@
                 "text": "number"
               },
               "default": "15",
-              "description": "The minutes PageUp and PageDown move."
+              "description": "The minutes between the times in the list, and that PageUp and PageDown move in the field."
             },
             {
               "name": "placeholder",
@@ -14571,6 +14947,15 @@
                 "text": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "open",
+              "fieldName": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the list is open. Reflected, so a sheet can leave Escape to it."
             }
           ],
           "events": [
@@ -15490,14 +15875,14 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/map/map-tile/map-tile.ts",
+      "path": "src/components/map/map/map.ts",
       "declarations": [
         {
           "kind": "class",
-          "name": "LintjeMapTile",
-          "tagName": "lintje-map-tile",
+          "name": "LintjeMap",
+          "tagName": "lintje-map",
           "customElement": true,
-          "description": "`<lintje-map-tile>` — a map in its tile. The map shows a new layer at once and expects the host\nto confirm it in the next `data`. `tile.expandable` shows the same map again in the modal; the\nmodal's own events stop here.\n\nEvents: `lintje-mark-select` `{id, label, href?}` (`href` is the one the server minted on that\nmark) and `lintje-layer-change` (the chosen layer's `value`). Undoing a selection is\n`lintje-mark-select` with `id: null` and `data.clearHref`, so a page that keeps the selection\nin the URL can drop it.",
+          "description": "`<lintje-map>` — a map in its tile. The map shows a new layer at once and expects the host\nto confirm it in the next `data`. `tile.expandable` shows the same map again in the modal; the\nmodal's own events stop here.\n\nEvents: `lintje-mark-select` `{id, label, href?}` (`href` is the one the server minted on that\nmark) and `lintje-layer-change` (the chosen layer's `value`). Undoing a selection is\n`lintje-mark-select` with `id: null` and `data.clearHref`, so a page that keeps the selection\nin the URL can drop it. With `data.controls.lasso`, `.circle` or `.rect` a drawn area chooses\nevery mark in it — two or more tools share one button that opens their menu:\n`lintje-area-select` `{area, ids}`, and `{area: null, ids: []}` when it is undone; the host\nkeeps the area in its URL and sends it back as `selectedArea`.",
           "superclass": {
             "name": "LintjeContentTileElement"
           },
@@ -15530,7 +15915,7 @@
               "kind": "field",
               "name": "data",
               "type": {
-                "text": "MapTileViewData | null"
+                "text": "MapData | null"
               }
             }
           ],
@@ -15553,6 +15938,12 @@
             }
           ],
           "events": [
+            {
+              "name": "lintje-area-select",
+              "type": {
+                "text": "CustomEvent<{ area, ids }>"
+              }
+            },
             {
               "name": "lintje-layer-change",
               "type": {
@@ -15572,10 +15963,10 @@
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "lintje-map-tile",
+          "name": "lintje-map",
           "declaration": {
-            "name": "LintjeMapTile",
-            "module": "src/components/map/map-tile/map-tile.ts"
+            "name": "LintjeMap",
+            "module": "src/components/map/map/map.ts"
           }
         }
       ]
@@ -18744,7 +19135,7 @@
               "kind": "field",
               "name": "placement",
               "type": {
-                "text": "'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'top-center'"
+                "text": "'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'top-center' | 'left-center' | 'left-start'"
               },
               "default": "'bottom-start'",
               "attribute": "placement"
@@ -18806,7 +19197,7 @@
               "name": "placement",
               "fieldName": "placement",
               "type": {
-                "text": "'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'top-center'"
+                "text": "'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'top-center' | 'left-center' | 'left-start'"
               },
               "default": "'bottom-start'"
             },
@@ -19705,6 +20096,16 @@
               "default": "false",
               "description": "The text is already the element's accessible name.",
               "attribute": "no-describe"
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'left'"
+              },
+              "default": "'top'",
+              "description": "Above the element, or `left` of it, level with it: for a column of buttons along an edge.",
+              "attribute": "placement"
             }
           ],
           "methods": [],
@@ -19732,6 +20133,15 @@
               },
               "default": "false",
               "description": "The text is already the element's accessible name."
+            },
+            {
+              "name": "placement",
+              "fieldName": "placement",
+              "type": {
+                "text": "'top' | 'left'"
+              },
+              "default": "'top'",
+              "description": "Above the element, or `left` of it, level with it: for a column of buttons along an edge."
             }
           ],
           "events": [],

package/dist-elements/feedback.js

@@ -1,4 +1,4 @@
-import "./chunks/base-rBLTcEIv.js";
+import "./chunks/base-Bg-IFOPG.js";
 import "./tag/toast.js";
 import "./tag/announcement.js";
 import "./tag/empty-state.js";

package/dist-elements/guides/dashboard.md

@@ -89,7 +89,7 @@ Een selectie ongedaan maken is hetzelfde event met de id null en de `href` die j
 `lintje-sort-change` zet `data.sort`, `lintje-checked-change` `data.checkedIds`,
 `lintje-layer-change` de `data.layer` van de kaart.
 
-`ChartTileData.description` en `DataTableData.caption` zijn verplicht: ze worden de `<desc>` van de grafiek
+`ChartData.description` en `DataTableData.caption` zijn verplicht: ze worden de `<desc>` van de grafiek
 en de `<caption>` van de tabel. Schrijf ze alsof de figuur er niet was.
 
 ## Een minimale dashboardpagina

package/dist-elements/guides/events.md

@@ -68,8 +68,9 @@ Een *toestand* is iets wat je bewaart en terugzet op het element (en in de URL m
 | `lintje-row-open`, `lintje-cell-edit`, `lintje-row-action`, `lintje-bulk-action` | `lintje-data-table` (`lintje-row-action` ook `lintje-list`) | actie |
 | `lintje-row-rename`, `lintje-row-rename-cancel` | `lintje-list` | actie |
 | `lintje-card-action` | `lintje-card` (ook binnen `lintje-card-list`) | actie |
-| `lintje-mark-select` | `lintje-map-tile`, `lintje-chart-tile` | actie |
-| `lintje-layer-change` | `lintje-map-tile` | toestand |
+| `lintje-mark-select` | `lintje-map`, `lintje-chart` | actie |
+| `lintje-layer-change` | `lintje-map` | toestand |
+| `lintje-area-select` | `lintje-map` (met `controls.lasso`, `controls.circle` of `controls.rect`) | toestand |
 | `lintje-filters-open-change` | `lintje-filter-bar` | toestand |
 | `lintje-retry` | `lintje-error-summary`, `lintje-streaming-text` | actie |
 | `lintje-files-add`, `lintje-file-remove`, `lintje-file-cancel` | `lintje-file-upload` | actie |