lintje 0.5.0 → 0.5.1

package/dist-elements/chunks/input-Dg1o0Sfu.js

@@ -0,0 +1,4 @@
+//#region src/components/inputs/shared/input.css?inline
+var e = "/*\n * The fields' own boxes and the `.lintje-choice` rules of the checkbox, radio and toggle.\n * `lintje-data-table` adopts this sheet too for its selectable rows' checkbox; the\n * `:host(lintje-multiselect)` blocks do not match there.\n */\n:host(lintje-multiselect) {\n  display: block;\n  min-width: 0;\n  width: 180px;\n}\n:host(lintje-range) {\n  display: block;\n  min-width: 0;\n  width: 180px;\n}\n:host(lintje-text-input),\n:host(lintje-number-input),\n:host(lintje-checkbox),\n:host(lintje-checkbox-group),\n:host(lintje-toggle),\n:host(lintje-radio-group) {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n/* Order matters in every field sheet: disabled wins over read-only, read-only over error, at\n   equal specificity. A disabled control cannot be in error, so its rule sets the whole border. */\n\n.lintje-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }\n.lintje-label {\n  display: flex; align-items: baseline; gap: var(--space-2);\n  font-size: 0.875rem; font-weight: 700; color: var(--color-text-primary);\n  padding: 0;\n}\n.lintje-label.is-modified { color: var(--color-accent-text); }\n.lintje-label__dot {\n  width: 6px; height: 6px; border-radius: var(--radius-round);\n  background: var(--color-attention);\n  flex: none; align-self: center;\n}\n:host([disabled]) .lintje-label { color: var(--color-text-disabled); }\n.lintje-label__optional { font-weight: 400; color: var(--color-text-muted); }\n:host([disabled]) .lintje-label__optional { color: var(--color-text-disabled); }\n/* A value and its unit stay together when a long label wraps. */\n.lintje-field__value { font-weight: 400; color: var(--color-text-muted); white-space: nowrap; }\n.lintje-field__hint { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-field__error {\n  display: flex; align-items: center; gap: var(--space-2);\n  font: var(--text-small); color: var(--color-error-text); font-weight: 700;\n}\n\n/* --- A setting's row: name and hint on the left, the control on the right ----- */\n/* A row reads its own width, not the screen's: in a drawer it stays a column. */\n:host([layout='row']) { width: 100%; container-type: inline-size; }\n@container (min-width: 35rem) {\n  :host([layout='row']) .lintje-field {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, calc(8 * var(--space-10)));\n    gap: var(--space-1) var(--space-8);\n    align-items: center;\n  }\n  :host([layout='row']) .lintje-field > * { grid-column: 2; }\n  /* Regular weight: the bold above it is the section's heading, the grey under it the hint. */\n  :host([layout='row']) .lintje-field > .lintje-label {\n    grid-column: 1; grid-row: 1;\n    font: var(--text-ui);\n  }\n  :host([layout='row']) .lintje-field > .lintje-field__hint,\n  :host([layout='row']) .lintje-field > .lintje-field__error { grid-column: 1; grid-row: 2; align-self: start; }\n  :host([layout='row']) .lintje-field > .lintje-field__reset { grid-column: 1; grid-row: 3; }\n  /* A switch is its own label: the row is the label, the switch stands at its right edge. */\n  :host([layout='row']) .lintje-field > .lintje-choice {\n    grid-column: 1 / -1; grid-row: 1;\n    flex-direction: row-reverse; justify-content: space-between;\n  }\n}\n\n/* Back to the default: a link, so it stays quieter than the field it belongs to. */\n.lintje-field__reset {\n  align-self: flex-start;\n  justify-self: start;\n  min-height: var(--h-target);\n  padding: 0;\n  border: 0;\n  background: none;\n  color: var(--color-link);\n  font: var(--text-small);\n  font-weight: 700;\n  text-decoration: underline;\n  cursor: pointer;\n}\n.lintje-field__reset:hover { color: var(--color-link-hover); }\n\n/* --- Checkbox, radio, toggle ---------------------------------------------- */\n.lintje-choice {\n  display: flex; align-items: center; gap: 10px;\n  min-height: var(--h-target);\n  font-size: 1rem;\n  cursor: pointer;\n}\n.lintje-choice__input { position: absolute; opacity: 0; width: 0; height: 0; }\n.lintje-choice__label.is-modified { color: var(--color-accent-text); font-weight: 700; }\n\n.lintje-choice__box {\n  width: 24px; height: 24px; flex: none;\n  display: flex; align-items: center; justify-content: center;\n  border: 2px solid var(--color-border-choice);\n  background: var(--color-bg-surface);\n  color: var(--color-action-primary-text); font-size: 0.875rem; font-weight: 700; line-height: 1;\n  transition: background-color var(--dur-hover) var(--ease-in-motion),\n    border-color var(--dur-hover) var(--ease-in-motion);\n}\n/* The mark is always drawn and grows in when the box is checked, so checking and unchecking both move. */\n.lintje-choice__mark {\n  opacity: 0; transform: scale(0.4);\n  transition: opacity var(--dur-hover) var(--ease-in-motion),\n    transform var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-choice__input:checked ~ .lintje-choice__box .lintje-choice__mark,\n.lintje-choice__input:indeterminate ~ .lintje-choice__box .lintje-choice__mark {\n  opacity: 1; transform: none;\n}\n/* The border takes the primary-fill border: in dark the tint, so the box is no dark square. */\n.lintje-choice__input:checked ~ .lintje-choice__box,\n.lintje-choice__input:indeterminate ~ .lintje-choice__box {\n  background: var(--color-accent); border-color: var(--color-action-primary-border);\n}\n.lintje-choice__input:focus-visible ~ .lintje-choice__box,\n.lintje-choice__input:focus-visible ~ .lintje-choice__radio,\n.lintje-choice__input:focus-visible ~ .lintje-choice__switch {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n\n.lintje-choice__radio {\n  width: 24px; height: 24px; flex: none;\n  border: 2px solid var(--color-border-choice);\n  border-radius: 50%;\n  background: var(--color-bg-surface);\n  display: flex; align-items: center; justify-content: center;\n}\n/* Ring and dot take the line accent: the dot stands on the surface by itself, so the primary\n   fill would sink into the dark surface. */\n.lintje-choice__input:checked ~ .lintje-choice__radio { border-color: var(--color-accent-line); }\n.lintje-choice__input:checked ~ .lintje-choice__radio::after {\n  content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent-line);\n}\n\n/* Off: edged with the field's edge (3:1, WCAG 1.4.11) as an inset ring, keeping the box size. */\n.lintje-choice__switch {\n  box-sizing: border-box;\n  width: 40px; height: 22px; flex: none;\n  border-radius: 11px;\n  /* Off is a filled track, not a pale one with a ring: the fill alone reaches 3:1. */\n  background: var(--color-border-field);\n  display: flex; align-items: center;\n  padding: 2px;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-choice__knob {\n  width: 18px; height: 18px; display: block;\n  border-radius: 50%;\n  background: var(--color-bg-surface);\n  transition: transform var(--dur-hover) var(--ease-in-motion);\n}\n/* An inset ring, not a border: a border would eat into the knob's inset and travel. */\n.lintje-choice__input:checked ~ .lintje-choice__switch {\n  background: var(--color-accent);\n  box-shadow: inset 0 0 0 1px var(--color-action-primary-border);\n}\n.lintje-choice__input:checked ~ .lintje-choice__switch .lintje-choice__knob { transform: translateX(18px); }\n\n.lintje-choice.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-choice__input:disabled ~ .lintje-choice__box,\n.lintje-choice__input:disabled ~ .lintje-choice__radio {\n  border-color: var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n}\n.lintje-choice__input:disabled:checked ~ .lintje-choice__box {\n  background: var(--color-border-strong);\n}\n.lintje-choice__input:disabled:checked ~ .lintje-choice__radio::after {\n  background: var(--color-border-strong);\n}\n/* After the checked rule, so a disabled switch also loses its inset ring. */\n.lintje-choice__input:disabled ~ .lintje-choice__switch { background: var(--color-border-default); box-shadow: none; }\n\n/* --- Stacked in the filter sheet ----------------------------------------- */\n:host([stacked]) {\n  width: 100%;\n  --h-control: var(--h-touch);\n}\n\n/* --- Forced colours ------------------------------------------------------- */\n/* Fills and box-shadows are dropped: the dot, pill and knob keep their drawing in system\n   colours. The pill takes a 1 px border and gives up 1 px of its inset, so the knob's travel stays. */\n@media (forced-colors: active) {\n  .lintje-label__dot { forced-color-adjust: none; background: CanvasText; }\n\n  .lintje-choice__input:focus-visible ~ .lintje-choice__box,\n  .lintje-choice__input:focus-visible ~ .lintje-choice__radio,\n  .lintje-choice__input:focus-visible ~ .lintje-choice__switch { outline-color: Highlight; }\n\n  .lintje-choice__input:checked ~ .lintje-choice__box,\n  .lintje-choice__input:indeterminate ~ .lintje-choice__box,\n  .lintje-choice__input:checked ~ .lintje-choice__radio { border-color: Highlight; }\n  .lintje-choice__radio::after { forced-color-adjust: none; }\n  .lintje-choice__input:checked ~ .lintje-choice__radio::after { background: Highlight; }\n\n  .lintje-choice__switch { border: 1px solid CanvasText; padding: 1px; }\n  .lintje-choice__input:checked ~ .lintje-choice__switch { border-color: Highlight; }\n  .lintje-choice__knob { forced-color-adjust: none; background: CanvasText; }\n  .lintje-choice__input:checked ~ .lintje-choice__switch .lintje-choice__knob { background: Highlight; }\n\n  .lintje-choice__input:disabled ~ .lintje-choice__box,\n  .lintje-choice__input:disabled ~ .lintje-choice__radio,\n  .lintje-choice__input:disabled ~ .lintje-choice__switch { border-color: GrayText; }\n  .lintje-choice__input:disabled:checked ~ .lintje-choice__radio::after,\n  .lintje-choice__input:disabled ~ .lintje-choice__switch .lintje-choice__knob { background: GrayText; }\n  .lintje-choice.is-disabled { color: GrayText; }\n}\n";
+//#endregion
+export { e as t };

package/dist-elements/chunks/{input-DEHA2Z_0.js → input-KqBT3qWD.js}

@@ -1,4 +1,4 @@
-import { P as e, en as t, nn as n, st as r, ut as i } from "./base-CVKIPSLx.js";
+import { P as e, en as t, nn as n, st as r, ut as i } from "./base-Bd2pmq86.js";
 import { d as a, s as o, u as s } from "./controls-_4ac1Lpz.js";
 //#region src/components/inputs/shared/field-foot.ts
 function c(e, n, r) {

package/dist-elements/chunks/{key-CuuOw1KE.js → key-D5wy9ZTj.js}

@@ -1,4 +1,4 @@
 //#region src/components/shared/key.css?inline
-var e = "/*\n * A keyboard key, drawn the same wherever a component shows one: `<kbd class=\"lintje-key\">`.\n */\n/* ------------------------------------------------------------------------ */\n\n/* The UI face, not mono: mono draws the arrow keys at half the size of the letters. */\n.lintje-key {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--space-6);\n  height: var(--space-6);\n  padding: 0 var(--space-1);\n  border: 1px solid var(--color-border-heavy);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font: var(--text-meta);\n  line-height: 1;\n  white-space: nowrap;\n}\n";
+var e = "/*\n * A keyboard key, drawn the same wherever a component shows one: `<kbd class=\"lintje-key\">`.\n */\n/* ------------------------------------------------------------------------ */\n\n/* The UI face, not mono: mono draws the arrow keys at half the size of the letters. */\n.lintje-key {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--space-6);\n  height: var(--space-6);\n  padding: 0 var(--space-1);\n  border: 1px solid var(--color-border-heavy);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font: var(--text-small);\n  line-height: 1;\n  white-space: nowrap;\n}\n";
 //#endregion
 export { e as t };

package/dist-elements/chunks/{player-DDDWUevR.js → player-BRG7bk_h.js}

@@ -1,4 +1,4 @@
-import { Jt as e, Q as t, bt as n, en as r, nn as i, st as a, ut as o } from "./base-CVKIPSLx.js";
+import { Jt as e, Q as t, bt as n, en as r, nn as i, st as a, ut as o } from "./base-Bd2pmq86.js";
 import { a as s, h as c, i as l, l as u, m as d, s as f, t as p } from "./playback-DZJ_NMXv.js";
 //#region src/components/content/shared/player.ts
 var m = /* @__PURE__ */ new Set([

package/dist-elements/chunks/{sentence-mY0Iqu5H.js → sentence-DIByCXQV.js}

@@ -1,4 +1,4 @@
-import { en as e, nn as t, ut as n } from "./base-CVKIPSLx.js";
+import { en as e, nn as t, ut as n } from "./base-Bd2pmq86.js";
 //#region src/components/filters/shared/sentence.ts
 function r(r, i = !0) {
 	return t`${i ? n("lichaam-oog", {

package/dist-elements/chunks/{stagger-Dvkth9_C.js → stagger-DGRHP_We.js}

@@ -1,4 +1,4 @@
-import { Ct as e, I as t, Tt as n, bt as r, en as i, f as a, h as o, m as s, n as c, nn as l, rn as u, t as d, u as f, wt as p } from "./base-CVKIPSLx.js";
+import { Ct as e, I as t, Tt as n, bt as r, en as i, f as a, h as o, m as s, n as c, nn as l, rn as u, t as d, u as f, wt as p } from "./base-Bd2pmq86.js";
 //#region src/components/shared/charts/shared/scale.ts
 var m = {
 	width: 900,

package/dist-elements/core.js

@@ -1 +1 @@
-export { Pt as FrameStateController, Et as ICONS, an as LINTJE_VERSION, Jt as LintjeElement, Gt as MOBILE, Kt as MediaController, qt as WIDE, Dt as ariaKeyShortcuts, Xt as baseStyles, Ot as characterKeys, Yt as define, It as getFrameState, ct as iconGlyph, ft as iconIsMissing, pt as iconSource, lt as iconStyles, kt as isTypingTarget, At as keyLabels, mt as loadIcon, ht as loadedIcon, gt as loadedIconNames, Ht as lockScroll, _t as onIconChange, jt as registerShortcut, ut as renderIcon, Ut as scrollRoot, Mt as setCharacterKeys, Lt as setFrameState, Wt as setHostConfig, yt as setIconSource, Rt as setScrolled, zt as setTitleHidden, Zt as shadowCss, Nt as shortcuts, Bt as subscribeToFrameState, Qt as toShadowCss, $t as tokenStyles } from "./chunks/base-CVKIPSLx.js";
+export { Pt as FrameStateController, Et as ICONS, an as LINTJE_VERSION, Jt as LintjeElement, Gt as MOBILE, Kt as MediaController, qt as WIDE, Dt as ariaKeyShortcuts, Xt as baseStyles, Ot as characterKeys, Yt as define, It as getFrameState, ct as iconGlyph, ft as iconIsMissing, pt as iconSource, lt as iconStyles, kt as isTypingTarget, At as keyLabels, mt as loadIcon, ht as loadedIcon, gt as loadedIconNames, Ht as lockScroll, _t as onIconChange, jt as registerShortcut, ut as renderIcon, Ut as scrollRoot, Mt as setCharacterKeys, Lt as setFrameState, Wt as setHostConfig, yt as setIconSource, Rt as setScrolled, zt as setTitleHidden, Zt as shadowCss, Nt as shortcuts, Bt as subscribeToFrameState, Qt as toShadowCss, $t as tokenStyles } from "./chunks/base-Bd2pmq86.js";

package/dist-elements/feedback.js

@@ -1,4 +1,4 @@
-import "./chunks/base-CVKIPSLx.js";
+import "./chunks/base-Bd2pmq86.js";
 import "./tag/toast.js";
 import "./tag/announcement.js";
 import "./tag/empty-state.js";

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/layout.js

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