lintje 0.2.0 → 0.4.0

package/dist-elements/tag/sub-nav.js

@@ -1,4 +1,4 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, I as i, It as a, Lt as o, U as s, X as c, Y as l, Z as u, et as d, qt as f, zt as p } from "../chunks/base-Bg-IFOPG.js";
+import { Gt as e, H as t, Jt as n, Kt as r, Q as i, Yt as a, Zt as o, at as s, en as c, lt as l, nn as u, ot as d, st as f, ut as p } from "../chunks/base-DRGvkF-r.js";
 //#region src/components/frame/sub-nav/sub-nav.css?inline
 var m = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Typographic, as the Rijkshuisstijl's side-nav: links in the link colour, the reader's page in\n   the text colour and bold, groups apart by space alone. No fill and no edge. */\n.lintje-sub-nav { font: var(--text-ui); }\n\n.lintje-sub-nav__group + .lintje-sub-nav__group { margin-top: var(--space-6); }\n\n.lintje-sub-nav__heading {\n  margin: 0;\n  padding: var(--space-3) 0 var(--space-1);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  line-height: 1.3;\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n\n.lintje-sub-nav__list { list-style: none; margin: 0; padding: 0; }\n\n/* The second level hangs from a line, the width of the separators the house style draws. */\n.lintje-sub-nav__list--nested {\n  margin-bottom: var(--space-1);\n  padding-left: calc(var(--space-6) - 2px);\n  border-left: 2px solid var(--color-border-default);\n}\n\n/* The row reaches past the text column on both sides, so the inset focus ring clears the word. */\n.lintje-sub-nav__link {\n  display: flex; align-items: flex-start; gap: var(--space-2);\n  box-sizing: border-box;\n  min-height: var(--h-nav-row);\n  margin: 0 calc(var(--space-2) * -1);\n  padding: var(--space-3) var(--space-2);\n  border: 0;\n  background: none;\n  font: inherit;\n  line-height: 1.5;\n  color: var(--color-link);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-sub-nav__link--action { width: calc(100% + var(--space-2) * 2); }\n\n/* Only the word is underlined: an icon or a count under a line reads as part of the link text. */\n.lintje-sub-nav__label { min-width: 0; text-underline-offset: 0.2em; }\n.lintje-sub-nav__link:hover { color: var(--color-link-hover); }\n.lintje-sub-nav__link:hover .lintje-sub-nav__label { text-decoration: underline; }\n\n/* Bold carries the reader's page beside the colour (rule 13); on a fill, the side menu does not. */\n.lintje-sub-nav__link.is-current { color: var(--color-text-primary); font-weight: 700; cursor: default; }\n.lintje-sub-nav__link.is-current .lintje-sub-nav__label { text-decoration: none; }\n.lintje-sub-nav__link.is-ancestor { color: var(--color-text-primary); }\n\n.lintje-sub-nav__link.is-no-page,\n.lintje-sub-nav__link.is-no-access { color: var(--color-text-disabled); cursor: default; }\n.lintje-sub-nav__link.is-no-access { cursor: not-allowed; }\n.lintje-sub-nav__link.is-no-access .lintje-sub-nav__label { text-decoration: line-through; }\n\n/* Icon, lock and count stand on the first line of a label that wraps. */\n.lintje-sub-nav__icon { flex: none; margin-top: 2px; }\n.lintje-sub-nav__lock { flex: none; margin-top: var(--space-1); }\n.lintje-sub-nav__count { flex: none; }\n\n/* Below 768 px: one button with the reader's page, which opens the list in place. */\n.lintje-sub-nav__toggle {\n  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);\n  width: 100%;\n  min-height: var(--h-control);\n  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-sub-nav__toggle:hover { background: var(--color-bg-subtle); }\n.lintje-sub-nav__toggle-text { display: flex; flex-direction: column; min-width: 0; }\n.lintje-sub-nav__toggle-group { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-sub-nav__toggle-current { font-weight: 700; }\n.lintje-sub-nav__toggle-icon { flex: none; transition: transform var(--dur-hover) var(--ease-in-motion); }\n.lintje-sub-nav__toggle.is-open .lintje-sub-nav__toggle-icon { transform: rotate(180deg); }\n\n.lintje-sub-nav__panel {\n  padding: var(--space-1) var(--space-6) var(--space-2);\n  border: 1px solid var(--color-border-field);\n  border-top: 0;\n  background: var(--color-bg-surface);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-sub-nav__link,\n  .lintje-sub-nav__toggle,\n  .lintje-sub-nav__toggle-icon { transition: none; }\n}\n\n@media (forced-colors: active) {\n  .lintje-sub-nav__link.is-current { text-decoration: underline; }\n  .lintje-sub-nav__link.is-no-page,\n  .lintje-sub-nav__link.is-no-access { color: GrayText; }\n}\n", h = (e) => !!e.active || !!e.items?.some(h);
 function g(e) {
@@ -19,15 +19,15 @@ function g(e) {
 	}
 	return null;
 }
-var _ = 0, v = class extends p {
-	constructor(...e) {
-		super(...e), this.groups = [], this.label = "Submenu", this.open = !1, this.#e = new o(this, a), this.#t = `lintje-sub-nav-${++_}`;
+var _ = 0, v = class extends n {
+	constructor(...t) {
+		super(...t), this.groups = [], this.label = "Submenu", this.expanded = !1, this.open = !1, this.#e = new r(this, e), this.#t = `lintje-sub-nav-${++_}`;
 	}
 	static {
 		this.styles = [
-			e,
 			l,
-			r(m)
+			s,
+			o(m)
 		];
 	}
 	static {
@@ -35,6 +35,7 @@ var _ = 0, v = class extends p {
 			groups: { attribute: !1 },
 			action: { attribute: !1 },
 			label: { type: String },
+			expanded: { type: Boolean },
 			open: { state: !0 }
 		};
 	}
@@ -42,10 +43,10 @@ var _ = 0, v = class extends p {
 	#t;
 	#n() {
 		let e = this.renderRoot.querySelector(".lintje-sub-nav__panel");
-		e && s(e) && this.renderRoot.querySelector(".lintje-sub-nav__toggle")?.focus(), this.open = !1;
+		e && i(e) && this.renderRoot.querySelector(".lintje-sub-nav__toggle")?.focus(), this.open = !1;
 	}
-	follow(e, t) {
-		i(e) && (this.#n(), this.followLink(t, e));
+	follow(e, n) {
+		t(e) && (this.#n(), this.followLink(n, e));
 	}
 	act(e) {
 		this.#n(), this.emit("lintje-action", { value: e });
@@ -54,80 +55,80 @@ var _ = 0, v = class extends p {
 		e.key === "Escape" && this.open && (e.stopPropagation(), this.open = !1, this.renderRoot.querySelector(".lintje-sub-nav__toggle")?.focus());
 	}
 	renderItem(e) {
-		let t = e.items?.length && h(e) ? e.items : null, r = !e.active && !!t, i = e.icon ? d(e.icon, {
+		let t = e.items?.length && (this.expanded || h(e)) ? e.items : null, n = !e.active && h(e), r = e.icon ? p(e.icon, {
 			size: 20,
 			className: "lintje-sub-nav__icon"
-		}) : n, a = e.badge ? c({
+		}) : c, i = e.badge ? d({
 			value: e.badge.value,
 			variant: "count",
 			label: e.badge.label,
 			className: "lintje-sub-nav__count"
-		}) : n, o = f`<span class="lintje-sub-nav__label">${e.label}</span>`, s;
+		}) : c, a = u`<span class="lintje-sub-nav__label">${e.label}</span>`, o;
 		if (e.noAccess || !e.href) {
-			let t = d("gebruiksvoorwerpen-hangslot-dicht", {
+			let t = p("gebruiksvoorwerpen-hangslot-dicht", {
 				size: 16,
 				label: "Geen toegang",
 				className: "lintje-sub-nav__lock"
 			});
-			s = f`<span
-        class=${u({
+			o = u`<span
+        class=${f({
 				"lintje-sub-nav__link": !0,
 				"is-no-access": !!e.noAccess,
 				"is-no-page": !e.noAccess
 			})}
         aria-disabled="true"
-        >${i}${o}${e.noAccess ? t === n ? f`<span>geen toegang</span>` : t : f`<span class="visually-hidden"> (niet beschikbaar)</span>`}</span
+        >${r}${a}${e.noAccess ? t === c ? u`<span>geen toegang</span>` : t : u`<span class="visually-hidden"> (niet beschikbaar)</span>`}</span
       >`;
 		} else {
 			let t = e.href;
-			s = f`<a
-        class=${u({
+			o = u`<a
+        class=${f({
 				"lintje-sub-nav__link": !0,
 				"focus-inset": !0,
 				"is-current": !!e.active,
-				"is-ancestor": r
+				"is-ancestor": n
 			})}
         href=${t}
-        aria-current=${e.active ? "page" : n}
+        aria-current=${e.active ? "page" : c}
         @click=${(e) => this.follow(e, t)}
-        >${i}${o}${a}</a
+        >${r}${a}${i}</a
       >`;
 		}
-		return f`<li>
-      ${s}${t ? f`<ul class="lintje-sub-nav__list lintje-sub-nav__list--nested">
+		return u`<li>
+      ${o}${t ? u`<ul class="lintje-sub-nav__list lintje-sub-nav__list--nested">
               ${t.map((e) => this.renderItem(e))}
-            </ul>` : n}
+            </ul>` : c}
     </li>`;
 	}
 	renderGroups() {
 		let e = this.action;
-		return f`${this.groups.map((e, t) => {
-			let r = `${this.#t}-g${t}`;
-			return f`<div class="lintje-sub-nav__group">
-        ${e.label ? f`<p id=${r} class="lintje-sub-nav__heading">${e.label}</p>` : n}
-        <ul class="lintje-sub-nav__list" aria-labelledby=${e.label ? r : n}>
+		return u`${this.groups.map((e, t) => {
+			let n = `${this.#t}-g${t}`;
+			return u`<div class="lintje-sub-nav__group">
+        ${e.label ? u`<p id=${n} class="lintje-sub-nav__heading">${e.label}</p>` : c}
+        <ul class="lintje-sub-nav__list" aria-labelledby=${e.label ? n : c}>
           ${e.items.map((e) => this.renderItem(e))}
         </ul>
       </div>`;
-		})}${e ? f`<div class="lintje-sub-nav__group">
+		})}${e ? u`<div class="lintje-sub-nav__group">
             <button
               type="button"
               class="lintje-sub-nav__link lintje-sub-nav__link--action focus-inset"
               @click=${() => this.act(e.value)}
             >
-              ${d(e.icon ?? "functioneel-plus", {
+              ${p(e.icon ?? "functioneel-plus", {
 			size: 20,
 			className: "lintje-sub-nav__icon"
 		})}<span class="lintje-sub-nav__label">${e.label}</span>
             </button>
-          </div>` : n}`;
+          </div>` : c}`;
 	}
 	renderPhone() {
 		let e = g(this.groups), t = `${this.#t}-panel`;
-		return f`<nav class="lintje-sub-nav" aria-label=${this.label} @keydown=${this.onKeydown}>
+		return u`<nav class="lintje-sub-nav" aria-label=${this.label} @keydown=${this.onKeydown}>
       <button
         type="button"
-        class=${u({
+        class=${f({
 			"lintje-sub-nav__toggle": !0,
 			"is-open": this.open
 		})}
@@ -136,10 +137,10 @@ var _ = 0, v = class extends p {
         @click=${() => this.open = !this.open}
       >
         <span class="lintje-sub-nav__toggle-text">
-          ${e?.group ? f`<span class="lintje-sub-nav__toggle-group">${e.group}</span>` : n}
+          ${e?.group ? u`<span class="lintje-sub-nav__toggle-group">${e.group}</span>` : c}
           <span class="lintje-sub-nav__toggle-current">${e?.item.label ?? this.label}</span>
         </span>
-        ${d("functioneel-delta-omlaag", {
+        ${p("functioneel-delta-omlaag", {
 			size: 24,
 			className: "lintje-sub-nav__toggle-icon"
 		})}
@@ -148,9 +149,9 @@ var _ = 0, v = class extends p {
     </nav>`;
 	}
 	render() {
-		return !this.groups.length && !this.action ? n : this.#e.matches ? this.renderPhone() : f`<nav class="lintje-sub-nav" aria-label=${this.label}>${this.renderGroups()}</nav>`;
+		return !this.groups.length && !this.action ? c : this.#e.matches ? this.renderPhone() : u`<nav class="lintje-sub-nav" aria-label=${this.label}>${this.renderGroups()}</nav>`;
 	}
 };
-t("lintje-sub-nav", v);
+a("lintje-sub-nav", v);
 //#endregion
 export { v as LintjeSubNav, g as activeEntry };

package/dist-elements/tag/tabs.js

@@ -1,6 +1,6 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, I as i, Z as a, et as o, qt as s, zt as c } from "../chunks/base-Bg-IFOPG.js";
+import { H as e, Jt as t, Yt as n, Zt as r, en as i, lt as a, nn as o, st as s, ut as c } from "../chunks/base-DRGvkF-r.js";
 //#region src/components/layout/tabs/tabs.css?inline
-var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* `position: relative` makes the row the tabs' offset parent, for scrolling the chosen tab into sight. */\n.lintje-tabs__list {\n  position: relative;\n  display: flex; flex-wrap: wrap;\n  border-bottom: 1px solid var(--color-border-heavy);\n}\n\n/* A transparent bottom edge in reserve, so the chosen tab's line takes no space of its own. */\n.lintje-tabs__tab {\n  display: inline-flex; align-items: center; gap: var(--space-2);\n  height: var(--h-touch);\n  padding: 0 var(--space-4);\n  background: transparent;\n  color: var(--color-text-primary);\n  border-bottom: 3px solid transparent;\n  font: var(--text-ui);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion),\n              border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) {\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-heavy);\n}\n\n/* The chosen tab: the line is a line (3:1) and the word is text (4.5:1), hence two tokens. */\n.lintje-tabs__tab.is-active {\n  border-bottom-color: var(--color-accent-line);\n  color: var(--color-accent-text);\n  font-weight: 700;\n}\n\n.lintje-tabs__tab.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n.lintje-tabs__panel { padding-top: var(--space-4); }\n.lintje-tabs__panel.is-pressed:focus-visible { outline: none; }\n\n@media (max-width: 767px) {\n  .lintje-tabs__list {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n  .lintje-tabs__list::-webkit-scrollbar { display: none; }\n  .lintje-tabs__tab { flex: 0 0 auto; }\n  .lintje-tabs__list.is-scroll-start { box-shadow: var(--shadow-scroll-start); }\n  .lintje-tabs__list.is-scroll-end { box-shadow: var(--shadow-scroll-end); }\n  .lintje-tabs__list.is-scroll-start.is-scroll-end {\n    box-shadow: var(--shadow-scroll-start), var(--shadow-scroll-end);\n  }\n}\n\n/* Forced colours: the chosen tab's line turns Highlight, a disabled tab GrayText. */\n@media (forced-colors: active) {\n  .lintje-tabs__tab.is-active { border-bottom-color: Highlight; }\n  .lintje-tabs__tab.is-disabled { color: GrayText; }\n}\n\n/* --- The panel variant --------------------------------------------------------\n   Large tabs that head a bordered panel. The chosen tab is the panel's own surface and runs into\n   it; the others stand on the subtle fill. No line: surface, accent word and weight say it. */\n.lintje-tabs--panel {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__list {\n  flex-wrap: nowrap;\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__tab {\n  flex: 1 1 0;\n  min-width: 0;\n  height: auto;\n  min-height: var(--h-touch);\n  margin-bottom: -1px;\n  align-items: flex-start;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  border-right: 1px solid var(--color-border-default);\n  border-bottom: 1px solid var(--color-border-default);\n  white-space: normal;\n  text-align: left;\n}\n.lintje-tabs--panel .lintje-tabs__tab:last-child { border-right: 0; }\n.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) {\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) .lintje-tabs__label {\n  text-decoration: underline;\n}\n/* The bottom edge takes the surface, so the tab and the panel are one shape. */\n.lintje-tabs--panel .lintje-tabs__tab.is-active {\n  background: var(--color-bg-surface);\n  border-bottom-color: var(--color-bg-surface);\n  color: var(--color-accent-text);\n}\n.lintje-tabs__icon { flex: none; }\n.lintje-tabs__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n.lintje-tabs__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }\n.lintje-tabs__hint { font: var(--text-meta); color: var(--color-text-muted); }\n.lintje-tabs--panel .lintje-tabs__panel { padding: var(--space-6); }\n\n@media (max-width: 767px) {\n  .lintje-tabs--panel .lintje-tabs__tab {\n    flex-direction: column;\n    align-items: center;\n    gap: var(--space-2);\n    padding: var(--space-3) var(--space-2);\n    text-align: center;\n  }\n  .lintje-tabs--panel .lintje-tabs__text { align-items: center; }\n  .lintje-tabs--panel .lintje-tabs__head { justify-content: center; }\n  .lintje-tabs--panel .lintje-tabs__hint { display: none; }\n  .lintje-tabs--panel .lintje-tabs__panel { padding: var(--space-4); }\n}\n\n/* Forced colours drop the surface: the chosen tab's label is underlined instead. */\n@media (forced-colors: active) {\n  .lintje-tabs--panel .lintje-tabs__tab.is-active .lintje-tabs__label { text-decoration: underline; }\n}\n";
+var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* `position: relative` makes the row the tabs' offset parent, for scrolling the chosen tab into sight. */\n.lintje-tabs__list {\n  position: relative;\n  display: flex; flex-wrap: wrap;\n  border-bottom: 1px solid var(--color-border-heavy);\n}\n\n/* A transparent bottom edge in reserve, so the chosen tab's line takes no space of its own. */\n.lintje-tabs__tab {\n  display: inline-flex; align-items: center; gap: var(--space-2);\n  height: var(--h-touch);\n  padding: 0 var(--space-4);\n  background: transparent;\n  color: var(--color-text-primary);\n  border-bottom: 3px solid transparent;\n  font: var(--text-ui);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion),\n              border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) {\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-heavy);\n}\n\n/* The chosen tab: the line is a line (3:1) and the word is text (4.5:1), hence two tokens. */\n.lintje-tabs__tab.is-active {\n  border-bottom-color: var(--color-accent-line);\n  color: var(--color-accent-text);\n  font-weight: 700;\n}\n\n.lintje-tabs__tab.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n.lintje-tabs__panel { padding-top: var(--space-4); }\n.lintje-tabs__panel.is-pressed:focus-visible { outline: none; }\n\n@media screen and (max-width: 767px) {\n  .lintje-tabs__list {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n  .lintje-tabs__list::-webkit-scrollbar { display: none; }\n  .lintje-tabs__tab { flex: 0 0 auto; }\n  .lintje-tabs__list.is-scroll-start { box-shadow: var(--shadow-scroll-start); }\n  .lintje-tabs__list.is-scroll-end { box-shadow: var(--shadow-scroll-end); }\n  .lintje-tabs__list.is-scroll-start.is-scroll-end {\n    box-shadow: var(--shadow-scroll-start), var(--shadow-scroll-end);\n  }\n}\n\n/* Forced colours: the chosen tab's line turns Highlight, a disabled tab GrayText. */\n@media (forced-colors: active) {\n  .lintje-tabs__tab.is-active { border-bottom-color: Highlight; }\n  .lintje-tabs__tab.is-disabled { color: GrayText; }\n}\n\n/* --- The panel variant --------------------------------------------------------\n   Large tabs that head a bordered panel. The chosen tab is the panel's own surface and runs into\n   it; the others stand on the subtle fill. No line: surface, accent word and weight say it. */\n.lintje-tabs--panel {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__list {\n  flex-wrap: nowrap;\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__tab {\n  flex: 1 1 0;\n  min-width: 0;\n  height: auto;\n  min-height: var(--h-touch);\n  margin-bottom: -1px;\n  align-items: flex-start;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  border-right: 1px solid var(--color-border-default);\n  border-bottom: 1px solid var(--color-border-default);\n  white-space: normal;\n  text-align: left;\n}\n.lintje-tabs--panel .lintje-tabs__tab:last-child { border-right: 0; }\n.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) {\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) .lintje-tabs__label {\n  text-decoration: underline;\n}\n/* The bottom edge takes the surface, so the tab and the panel are one shape. */\n.lintje-tabs--panel .lintje-tabs__tab.is-active {\n  background: var(--color-bg-surface);\n  border-bottom-color: var(--color-bg-surface);\n  color: var(--color-accent-text);\n}\n.lintje-tabs__icon { flex: none; }\n.lintje-tabs__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n.lintje-tabs__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }\n.lintje-tabs__hint { font: var(--text-meta); color: var(--color-text-muted); }\n.lintje-tabs--panel .lintje-tabs__panel { padding: var(--space-6); }\n\n@media screen and (max-width: 767px) {\n  .lintje-tabs--panel .lintje-tabs__tab {\n    flex-direction: column;\n    align-items: center;\n    gap: var(--space-2);\n    padding: var(--space-3) var(--space-2);\n    text-align: center;\n  }\n  .lintje-tabs--panel .lintje-tabs__text { align-items: center; }\n  .lintje-tabs--panel .lintje-tabs__head { justify-content: center; }\n  .lintje-tabs--panel .lintje-tabs__hint { display: none; }\n  .lintje-tabs--panel .lintje-tabs__panel { padding: var(--space-4); }\n}\n\n/* Forced colours drop the surface: the chosen tab's label is underlined instead. */\n@media (forced-colors: active) {\n  .lintje-tabs--panel .lintje-tabs__tab.is-active .lintje-tabs__label { text-decoration: underline; }\n}\n";
 //#endregion
 //#region src/components/layout/tabs/tabs.ts
 function u(e, t, n) {
@@ -12,7 +12,7 @@ function u(e, t, n) {
 function d(e, t, n, r) {
 	return e < n ? e : e + t > n + r ? e + t - r : n;
 }
-var f = class extends c {
+var f = class extends t {
 	constructor(...e) {
 		super(...e), this.tabs = [], this.label = "", this.variant = "line", this.edges = {
 			start: !1,
@@ -20,7 +20,7 @@ var f = class extends c {
 		}, this.#e = null, this.#t = !1;
 	}
 	static {
-		this.styles = [e, r(l)];
+		this.styles = [a, r(l)];
 	}
 	static {
 		this.properties = {
@@ -59,9 +59,9 @@ var f = class extends c {
 		let n = this.tabs[e];
 		n && !n.disabled && (this.emit("lintje-tab-change", n.value), n.href && this.followLink(n.href, t));
 	}
-	onClick(e, t) {
-		let n = this.tabs[t];
-		n && (!n.href || n.disabled || i(e)) && this.choose(t, e);
+	onClick(t, n) {
+		let r = this.tabs[n];
+		r && (!r.href || r.disabled || e(t)) && this.choose(n, t);
 	}
 	onKeydown(e) {
 		let t = this.tabs.length;
@@ -84,73 +84,73 @@ var f = class extends c {
 		let t = this.list, n = this.tabElement(this.selectedIndex);
 		t && n && t.scrollWidth > t.clientWidth && (t.scrollLeft = d(n.offsetLeft, n.offsetWidth, t.scrollLeft, t.clientWidth)), this.measureEdges();
 	}
-	renderTab(e, t, r) {
-		let i = a({
+	renderTab(e, t, n) {
+		let r = s({
 			"lintje-tabs__tab": !0,
 			"focus-inset": !0,
-			"is-active": r,
+			"is-active": n,
 			"is-disabled": !!e.disabled
-		}), c = s`<span class="lintje-tabs__label">${e.label}</span>${typeof e.count == "number" ? s`<lintje-badge variant="count">${e.count}</lintje-badge>` : n}${e.badge ? s`<lintje-badge tone="info">${e.badge}</lintje-badge>` : n}`, l = this.variant === "panel" ? s`${e.icon ? o(e.icon, {
+		}), a = o`<span class="lintje-tabs__label">${e.label}</span>${typeof e.count == "number" ? o`<lintje-badge variant="count">${e.count}</lintje-badge>` : i}${e.badge ? o`<lintje-badge tone="info">${e.badge}</lintje-badge>` : i}`, l = this.variant === "panel" ? o`${e.icon ? c(e.icon, {
 			size: 24,
 			className: "lintje-tabs__icon"
-		}) : n}<span
+		}) : i}<span
               class="lintje-tabs__text"
-              ><span class="lintje-tabs__head">${c}</span>${e.hint ? s`<span class="lintje-tabs__hint">${e.hint}</span>` : n}</span
-            >` : c;
-		return this.isNav ? e.disabled ? s`<a id="tab-${t}" class=${i} role="link" aria-disabled="true">${l}</a>` : s`<a
+              ><span class="lintje-tabs__head">${a}</span>${e.hint ? o`<span class="lintje-tabs__hint">${e.hint}</span>` : i}</span
+            >` : a;
+		return this.isNav ? e.disabled ? o`<a id="tab-${t}" class=${r} role="link" aria-disabled="true">${l}</a>` : o`<a
             id="tab-${t}"
-            class=${i}
+            class=${r}
             href=${e.href}
-            aria-current=${r ? "page" : n}
+            aria-current=${n ? "page" : i}
             @click=${(e) => this.onClick(e, t)}
             >${l}</a
-          >` : e.href && !e.disabled ? s`<a
+          >` : e.href && !e.disabled ? o`<a
         id="tab-${t}"
-        class=${i}
+        class=${r}
         role="tab"
         href=${e.href}
-        aria-selected=${String(r)}
+        aria-selected=${String(n)}
         aria-controls="panel-${t}"
-        tabindex=${r ? 0 : -1}
+        tabindex=${n ? 0 : -1}
         @click=${(e) => this.onClick(e, t)}
         >${l}</a
-      >` : s`<button
+      >` : o`<button
       id="tab-${t}"
       type="button"
-      class=${i}
+      class=${r}
       role="tab"
-      aria-selected=${String(r)}
+      aria-selected=${String(n)}
       aria-controls="panel-${t}"
-      aria-disabled=${e.disabled ? "true" : n}
-      tabindex=${r ? 0 : -1}
+      aria-disabled=${e.disabled ? "true" : i}
+      tabindex=${n ? 0 : -1}
       @click=${(e) => this.onClick(e, t)}
     >
       ${l}
     </button>`;
 	}
 	render() {
-		let e = this.selectedIndex, t = this.isNav, r = s`<div
-      class=${a({
+		let e = this.selectedIndex, t = this.isNav, n = o`<div
+      class=${s({
 			"lintje-tabs__list": !0,
 			"is-scroll-start": this.edges.start,
 			"is-scroll-end": this.edges.end
 		})}
-      role=${t ? n : "tablist"}
-      aria-label=${t ? n : this.label || n}
-      @keydown=${t ? n : this.onKeydown}
+      role=${t ? i : "tablist"}
+      aria-label=${t ? i : this.label || i}
+      @keydown=${t ? i : this.onKeydown}
       @scroll=${this.measureEdges}
     >
       ${this.tabs.map((t, n) => this.renderTab(t, n, n === e))}
-    </div>`, i = a({
+    </div>`, r = s({
 			"lintje-tabs": !0,
 			"lintje-tabs--panel": this.variant === "panel"
 		});
-		return t ? s`<div class=${i}>
-        <nav aria-label=${this.label || n}>${r}</nav>
+		return t ? o`<div class=${r}>
+        <nav aria-label=${this.label || i}>${n}</nav>
         <div class="lintje-tabs__panel"><slot name=${this.tabs[e].value}></slot></div>
-      </div>` : s`<div class=${i}>
-      ${r}
-      ${this.tabs.map((t, n) => s`<div
+      </div>` : o`<div class=${r}>
+      ${n}
+      ${this.tabs.map((t, n) => o`<div
           id="panel-${n}"
           class="lintje-tabs__panel"
           role="tabpanel"
@@ -167,6 +167,6 @@ var f = class extends c {
     </div>`;
 	}
 };
-t("lintje-tabs", f);
+n("lintje-tabs", f);
 //#endregion
 export { f as LintjeTabs, u as scrollEdges, d as scrollToShow };

package/dist-elements/tag/tag-input.js

@@ -1,8 +1,9 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, et as a, f as o, qt as s } from "../chunks/base-Bg-IFOPG.js";
-import { r as c, t as l } from "../chunks/input-BtuNFSWk.js";
+import { Yt as e, Zt as t, en as n, lt as r, nn as i, s as a, st as o, ut as s } from "../chunks/base-DRGvkF-r.js";
+import { n as c } from "../chunks/input-BGMLam-O.js";
+import { t as l } from "../chunks/input-lQTmOMOz.js";
 import { filterOptions as u, splitMatch as d } from "./combobox.js";
 //#region src/components/inputs/tag-input/tag-input.css?inline
-var f = "/* The keyword field: chips and the typing part in one box that grows in height. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n/* Below 768 px: the touch height and the full width, as `stacked`. */\n@media (max-width: 767px) {\n  :host {\n    width: 100%;\n    --h-control: var(--h-touch);\n  }\n}\n\n/* --- */\n\n/* The padding centres a chip in the control height; wrapped chips grow the box. */\n.lintje-tag-input {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: 6px;\n  min-height: var(--h-control);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 1px) var(--space-2);\n  border: 1px solid var(--color-border-field);\n  border-radius: var(--radius);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n}\n/* The ring is around the whole field; a chip draws it around itself when its cross has the focus. */\n.lintje-tag-input:has(.lintje-tag-input__input:focus-visible),\n.lintje-tag-input__chip:has(.lintje-tag-input__remove:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-tag-input__input:focus-visible,\n.lintje-tag-input__remove:focus-visible { outline: none; }\n/* The padding gives back the pixel the 2 px error border takes. */\n.lintje-tag-input.is-error {\n  border: 2px solid var(--color-error);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 2px) calc(var(--space-2) - 1px);\n}\n/* Disabled wins over error: placed after it. */\n.lintje-tag-input.is-disabled {\n  border: 1px solid var(--color-border-strong);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 1px) var(--space-2);\n  background: var(--color-bg-subtle);\n  cursor: not-allowed;\n}\n\n.lintje-tag-input__chips { display: contents; }\n.lintje-tag-input__item { display: flex; min-width: 0; }\n.lintje-tag-input__chip {\n  display: inline-flex; align-items: center;\n  min-width: 0;\n  height: var(--h-chip-field);\n  padding: 0 0 0 var(--space-2);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  font-size: 0.875rem; white-space: nowrap;\n}\n.lintje-tag-input.is-disabled .lintje-tag-input__chip { padding-right: var(--space-2); }\n/* A word typed twice flashes its chip. */\n.lintje-tag-input__chip.is-flash { border-color: var(--color-accent-line); }\n.lintje-tag-input.is-disabled .lintje-tag-input__chip { color: var(--color-text-disabled); }\n/* A transparent hit area, above and below only, reaches the target height. */\n.lintje-tag-input__remove {\n  position: relative;\n  flex: none;\n  width: var(--space-6); align-self: stretch;\n  display: inline-flex; align-items: center; justify-content: center;\n  color: var(--color-text-muted);\n}\n.lintje-tag-input__remove:hover { color: var(--color-text-primary); }\n.lintje-tag-input__remove::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((var(--h-chip-field) - var(--h-target)) / 2)) 0;\n}\n\n.lintje-tag-input__input {\n  flex: 1 1 60px; min-width: 0;\n  height: var(--h-chip-field);\n  padding: 0 var(--space-1);\n  border: 0;\n  background: none;\n  color: inherit;\n  font-size: 1rem;\n}\n.lintje-tag-input__input::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-tag-input__input:disabled { cursor: not-allowed; }\n\n.lintje-tag-input__list {\n  max-height: calc(7 * var(--h-option) + var(--space-2));\n  overflow-y: auto;\n  padding: var(--space-1) 0;\n  font: var(--text-ui);\n}\n.lintje-tag-input__option {\n  display: flex; align-items: center;\n  min-height: var(--h-option);\n  padding: 0 14px;\n  cursor: pointer;\n}\n.lintje-tag-input__option:hover,\n.lintje-tag-input__option.is-active { background: var(--color-bg-subtle); }\n/* The option the keys stand on: the fill alone is about 1.1:1, so the focus ring inside the row. */\n.lintje-tag-input__option.is-active {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n\n/* Forced colours drop the fill: the row takes an edge inside, keeping its size. */\n@media (forced-colors: active) {\n  .lintje-tag-input__option.is-active { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n";
+var f = "/* The keyword field: chips and the typing part in one box that grows in height. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n/* Below 768 px: the touch height and the full width, as `stacked`. */\n@media screen and (max-width: 767px) {\n  :host {\n    width: 100%;\n    --h-control: var(--h-touch);\n  }\n}\n\n/* --- */\n\n/* The padding centres a chip in the control height; wrapped chips grow the box. */\n.lintje-tag-input {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: 6px;\n  min-height: var(--h-control);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 1px) var(--space-2);\n  border: 1px solid var(--color-border-field);\n  border-radius: var(--radius);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n}\n/* The ring is around the whole field; a chip draws it around itself when its cross has the focus. */\n.lintje-tag-input:has(.lintje-tag-input__input:focus-visible),\n.lintje-tag-input__chip:has(.lintje-tag-input__remove:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-tag-input__input:focus-visible,\n.lintje-tag-input__remove:focus-visible { outline: none; }\n/* The padding gives back the pixel the 2 px error border takes. */\n.lintje-tag-input.is-error {\n  border: 2px solid var(--color-error);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 2px) calc(var(--space-2) - 1px);\n}\n/* Disabled wins over error: placed after it. */\n.lintje-tag-input.is-disabled {\n  border: 1px solid var(--color-border-strong);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 1px) var(--space-2);\n  background: var(--color-bg-subtle);\n  cursor: not-allowed;\n}\n\n.lintje-tag-input__chips { display: contents; }\n.lintje-tag-input__item { display: flex; min-width: 0; }\n.lintje-tag-input__chip {\n  display: inline-flex; align-items: center;\n  min-width: 0;\n  height: var(--h-chip-field);\n  padding: 0 0 0 var(--space-2);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  font-size: 0.875rem; white-space: nowrap;\n}\n.lintje-tag-input.is-disabled .lintje-tag-input__chip { padding-right: var(--space-2); }\n/* A word typed twice flashes its chip. */\n.lintje-tag-input__chip.is-flash { border-color: var(--color-accent-line); }\n.lintje-tag-input.is-disabled .lintje-tag-input__chip { color: var(--color-text-disabled); }\n/* A transparent hit area, above and below only, reaches the target height. */\n.lintje-tag-input__remove {\n  position: relative;\n  flex: none;\n  width: var(--space-6); align-self: stretch;\n  display: inline-flex; align-items: center; justify-content: center;\n  color: var(--color-text-muted);\n}\n.lintje-tag-input__remove:hover { color: var(--color-text-primary); }\n.lintje-tag-input__remove::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((var(--h-chip-field) - var(--h-target)) / 2)) 0;\n}\n\n.lintje-tag-input__input {\n  flex: 1 1 60px; min-width: 0;\n  height: var(--h-chip-field);\n  padding: 0 var(--space-1);\n  border: 0;\n  background: none;\n  color: inherit;\n  font-size: 1rem;\n}\n.lintje-tag-input__input::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-tag-input__input:disabled { cursor: not-allowed; }\n\n.lintje-tag-input__list {\n  max-height: calc(7 * var(--h-option) + var(--space-2));\n  overflow-y: auto;\n  padding: var(--space-1) 0;\n  font: var(--text-ui);\n}\n.lintje-tag-input__option {\n  display: flex; align-items: center;\n  min-height: var(--h-option);\n  padding: 0 14px;\n  cursor: pointer;\n}\n.lintje-tag-input__option:hover,\n.lintje-tag-input__option.is-active { background: var(--color-bg-subtle); }\n/* The option the keys stand on: the fill alone is about 1.1:1, so the focus ring inside the row. */\n.lintje-tag-input__option.is-active {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n\n/* Forced colours drop the fill: the row takes an edge inside, keeping its size. */\n@media (forced-colors: active) {\n  .lintje-tag-input__option.is-active { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n";
 //#endregion
 //#region src/components/inputs/tag-input/tag-input.ts
 function p(e) {
@@ -26,9 +27,9 @@ var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) =
 	}
 	static {
 		this.styles = [
-			e,
-			r(l),
-			r(f)
+			r,
+			t(l),
+			t(f)
 		];
 	}
 	static {
@@ -155,12 +156,12 @@ var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) =
 	}
 	renderChip(e, t) {
 		let r = this.labelOf(e);
-		return s`<li class="lintje-tag-input__item">
-      <span class=${i({
+		return i`<li class="lintje-tag-input__item">
+      <span class=${o({
 			"lintje-tag-input__chip": !0,
 			"is-flash": this.flash === e
 		})}
-        >${r}${this.disabled ? n : s`<button
+        >${r}${this.disabled ? n : i`<button
               type="button"
               class="lintje-tag-input__remove"
               tabindex="-1"
@@ -169,13 +170,13 @@ var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) =
               @keydown=${(e) => this.onChipKeydown(e, t)}
               @click=${() => this.removeChip(t, "input")}
             >
-              ${a("functioneel-kruis", { size: 12 })}
+              ${s("functioneel-kruis", { size: 12 })}
             </button>`}</span
       >
     </li>`;
 	}
 	renderSuggestions() {
-		return this.listOpen ? s`<ul
+		return this.listOpen ? i`<ul
       id=${g}
       class="lintje-tag-input__list"
       role="listbox"
@@ -183,10 +184,10 @@ var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) =
       aria-labelledby=${this.labelId}
     >
       ${this.suggestions.map((e, t) => {
-			let [r, a, o] = d(e.label, this.text);
-			return s`<li
+			let [r, a, s] = d(e.label, this.text);
+			return i`<li
           id=${v(t)}
-          class=${i({
+          class=${o({
 				"lintje-tag-input__option": !0,
 				"is-active": t === this.active
 			})}
@@ -194,17 +195,17 @@ var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) =
           aria-selected="false"
           @click=${() => this.add([e.label])}
         >
-          ${r}${a ? s`<strong>${a}</strong>` : n}${o}
+          ${r}${a ? i`<strong>${a}</strong>` : n}${s}
         </li>`;
 		})}
     </ul>` : n;
 	}
 	render() {
 		let e = this.listOpen, t = !!this.options;
-		return s`<div class="lintje-field">
+		return i`<div class="lintje-field">
       ${this.renderLabel(this.controlId)}
       <div
-        class=${i({
+        class=${o({
 			"lintje-tag-input": !0,
 			"is-error": !!this.error,
 			"is-disabled": this.disabled
@@ -219,7 +220,7 @@ var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) =
           type="text"
           id=${this.controlId}
           class="lintje-tag-input__input"
-          .value=${o(this.text)}
+          .value=${a(this.text)}
           placeholder=${this.value.length ? n : this.placeholder || n}
           autocomplete="off"
           enterkeyhint="enter"
@@ -257,6 +258,6 @@ var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) =
     </div>`;
 	}
 };
-t("lintje-tag-input", y);
+e("lintje-tag-input", y);
 //#endregion
 export { y as LintjeTagInput, m as addWords, p as splitWords };

package/dist-elements/tag/text-editor.js

@@ -1,9 +1,10 @@
-import { $ as e, Bt as t, G as n, Gt as r, Ht as i, Z as a, qt as o } from "../chunks/base-Bg-IFOPG.js";
-import { r as s, t as c } from "../chunks/input-BtuNFSWk.js";
+import { Yt as e, Zt as t, en as n, et as r, lt as i, nn as a, st as o } from "../chunks/base-DRGvkF-r.js";
+import { n as s } from "../chunks/input-BGMLam-O.js";
+import { t as c } from "../chunks/input-lQTmOMOz.js";
 import { t as l } from "../chunks/prose-CmKVp5kL.js";
 import "./text-input.js";
 //#region src/components/inputs/text-editor/text-editor.css?inline
-var u = "/* The text editor: a frame with the toolbar on top and the editing surface under it. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n/* 1 px field border; with the focus in the surface the ring goes round the whole frame. */\n.lintje-text-editor {\n  display: flex; flex-direction: column;\n  min-width: 0;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n}\n.lintje-text-editor:has(.lintje-text-editor__surface:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-text-editor.is-error { border: 2px solid var(--color-error); }\n/* Disabled wins over error: after it, the whole border back to 1 px strong. */\n.lintje-text-editor.is-disabled { border: 1px solid var(--color-border-strong); }\n\n/* --- The toolbar --------------------------------------------------------- */\n/* The row gap keeps the buttons' hit areas from overlapping. */\n.lintje-text-editor__toolbar {\n  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-1);\n  padding: var(--space-1);\n  background: var(--color-bg-page);\n  border-bottom: 1px solid var(--color-border-default);\n}\n/* A transparent hit area, above and below only, reaches the target height. */\n.lintje-text-editor__tool {\n  position: relative;\n  flex: none;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: inline-flex; align-items: center; justify-content: center;\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-text-editor__tool::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-text-editor__tool--bold,\n.lintje-text-editor__tool--heading { font-weight: 700; }\n.lintje-text-editor__tool--italic { font-style: italic; }\n/* The text fallback while an icon has no file. */\n.lintje-text-editor__tool--word {\n  width: auto; min-width: var(--h-icon-button);\n  padding: 0 var(--space-2);\n  font-size: 0.875rem; font-weight: 700;\n}\n.lintje-text-editor__tool:hover:not(:disabled):not(.is-idle) { background: var(--color-bg-subtle); }\n/* The border keeps an edge in dark. */\n.lintje-text-editor__tool.is-pressed {\n  background: var(--color-action-primary);\n  color: var(--color-action-primary-text);\n  border-color: var(--color-action-primary-border);\n}\n.lintje-text-editor__tool.is-pressed:hover:not(:disabled) { background: var(--color-action-primary); }\n.lintje-text-editor__tool.is-idle,\n.lintje-text-editor__tool:disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n/* --- The surface --------------------------------------------------------- */\n.lintje-text-editor__surface {\n  min-height: 132px;\n  padding: var(--space-3);\n  overflow-wrap: anywhere;\n}\n/* The ring is the frame's, not the surface's. */\n.lintje-text-editor__surface:focus-visible { outline: none; }\n.lintje-text-editor.is-disabled .lintje-text-editor__surface {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n/* The prose sheet colours its headings itself. */\n.lintje-text-editor.is-disabled .lintje-text-editor__surface * { color: inherit; }\n\n/* --- The link field ------------------------------------------------------ */\n.lintje-text-editor__link { width: 280px; max-width: 100%; padding: var(--space-4); }\n\n/* Below 768 px the toolbar scrolls sideways; at 48 px high the hit areas stay whole. */\n@media (max-width: 767px) {\n  .lintje-text-editor__toolbar { flex-wrap: nowrap; overflow-x: auto; }\n}\n\n/* Forced colours drop the fill: the border turns Highlight, 2 px inside the fixed box. */\n@media (forced-colors: active) {\n  .lintje-text-editor__tool.is-pressed { border: 2px solid Highlight; }\n}\n", d = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+var u = "/* The text editor: a frame with the toolbar on top and the editing surface under it. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n/* 1 px field border; with the focus in the surface the ring goes round the whole frame. */\n.lintje-text-editor {\n  display: flex; flex-direction: column;\n  min-width: 0;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n}\n.lintje-text-editor:has(.lintje-text-editor__surface:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-text-editor.is-error { border: 2px solid var(--color-error); }\n/* Disabled wins over error: after it, the whole border back to 1 px strong. */\n.lintje-text-editor.is-disabled { border: 1px solid var(--color-border-strong); }\n\n/* --- The toolbar --------------------------------------------------------- */\n/* The row gap keeps the buttons' hit areas from overlapping. */\n.lintje-text-editor__toolbar {\n  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-1);\n  padding: var(--space-1);\n  background: var(--color-bg-page);\n  border-bottom: 1px solid var(--color-border-default);\n}\n/* A transparent hit area, above and below only, reaches the target height. */\n.lintje-text-editor__tool {\n  position: relative;\n  flex: none;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: inline-flex; align-items: center; justify-content: center;\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-text-editor__tool::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-text-editor__tool--bold,\n.lintje-text-editor__tool--heading { font-weight: 700; }\n.lintje-text-editor__tool--italic { font-style: italic; }\n/* The text fallback while an icon has no file. */\n.lintje-text-editor__tool--word {\n  width: auto; min-width: var(--h-icon-button);\n  padding: 0 var(--space-2);\n  font-size: 0.875rem; font-weight: 700;\n}\n.lintje-text-editor__tool:hover:not(:disabled):not(.is-idle) { background: var(--color-bg-subtle); }\n/* The border keeps an edge in dark. */\n.lintje-text-editor__tool.is-pressed {\n  background: var(--color-action-primary);\n  color: var(--color-action-primary-text);\n  border-color: var(--color-action-primary-border);\n}\n.lintje-text-editor__tool.is-pressed:hover:not(:disabled) { background: var(--color-action-primary); }\n.lintje-text-editor__tool.is-idle,\n.lintje-text-editor__tool:disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n/* --- The surface --------------------------------------------------------- */\n.lintje-text-editor__surface {\n  min-height: 132px;\n  padding: var(--space-3);\n  overflow-wrap: anywhere;\n}\n/* The ring is the frame's, not the surface's. */\n.lintje-text-editor__surface:focus-visible { outline: none; }\n.lintje-text-editor.is-disabled .lintje-text-editor__surface {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n/* The prose sheet colours its headings itself. */\n.lintje-text-editor.is-disabled .lintje-text-editor__surface * { color: inherit; }\n\n/* --- The link field ------------------------------------------------------ */\n.lintje-text-editor__link { width: 280px; max-width: 100%; padding: var(--space-4); }\n\n/* Below 768 px the toolbar scrolls sideways; at 48 px high the hit areas stay whole. */\n@media screen and (max-width: 767px) {\n  .lintje-text-editor__toolbar { flex-wrap: nowrap; overflow-x: auto; }\n}\n\n/* Forced colours drop the fill: the border turns Highlight, 2 px inside the fixed box. */\n@media (forced-colors: active) {\n  .lintje-text-editor__tool.is-pressed { border: 2px solid Highlight; }\n}\n", d = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 function f(e) {
 	let t = (e ?? "").replace(/\p{Cc}/gu, "").trim();
 	if (!t) return null;
@@ -225,10 +226,10 @@ var z = class extends s {
 	}
 	static {
 		this.styles = [
-			e,
-			i(c),
-			i(l),
-			i(u)
+			i,
+			t(c),
+			t(l),
+			t(u)
 		];
 	}
 	static {
@@ -320,8 +321,8 @@ var z = class extends s {
 		e.key === "Enter" && !e.isComposing && e.preventDefault();
 	}
 	onLinkFocusOut(e) {
-		let t = e.relatedTarget, r = e.currentTarget;
-		this.linkOpen && t && !n(t, r) && !n(this, t) && (this.linkOpen = !1);
+		let t = e.relatedTarget, n = e.currentTarget;
+		this.linkOpen && t && !r(t, n) && !r(this, t) && (this.linkOpen = !1);
 	}
 	onLinkClose(e) {
 		e.stopPropagation(), this.linkOpen = !1, this.restore();
@@ -354,20 +355,20 @@ var z = class extends s {
 		}));
 	}
 	renderTool(e, t) {
-		let n = this.active.has(e.format), i = e.format === "link" && this.collapsed && !n;
-		return o`<button
+		let r = this.active.has(e.format), i = e.format === "link" && this.collapsed && !r;
+		return a`<button
       type="button"
-      class=${a({
+      class=${o({
 			"lintje-text-editor__tool": !0,
 			[`lintje-text-editor__tool--${e.format}`]: !0,
 			"lintje-text-editor__tool--word": e.text.length > 1,
-			"is-pressed": n,
+			"is-pressed": r,
 			"is-idle": i
 		})}
       tabindex=${t === this.toolIndex ? "0" : "-1"}
       aria-label=${e.label}
-      aria-pressed=${n ? "true" : "false"}
-      aria-disabled=${i ? "true" : r}
+      aria-pressed=${r ? "true" : "false"}
+      aria-disabled=${i ? "true" : n}
       ?disabled=${this.disabled}
       @mousedown=${(e) => e.preventDefault()}
       @click=${() => {
@@ -378,10 +379,10 @@ var z = class extends s {
     </button>`;
 	}
 	render() {
-		return o`<div class="lintje-field" @focusout=${this.onFocusOut}>
+		return a`<div class="lintje-field" @focusout=${this.onFocusOut}>
       ${this.renderLabel()}
       <div
-        class=${a({
+        class=${o({
 			"lintje-text-editor": !0,
 			"is-error": !!this.error,
 			"is-disabled": this.disabled
@@ -403,16 +404,16 @@ var z = class extends s {
           @lintje-close=${this.onLinkClose}
           @focusout=${this.onLinkFocusOut}
         >
-          ${this.linkOpen ? o`<div class="lintje-text-editor__link" @keydown=${this.onLinkKeydown}>
+          ${this.linkOpen ? a`<div class="lintje-text-editor__link" @keydown=${this.onLinkKeydown}>
                 <lintje-text-input
                   class="lintje-text-editor__link-field"
                   label="Adres van de link"
                   placeholder="https://"
                   hint="Enter plaatst de link"
-                  error=${this.linkError || r}
+                  error=${this.linkError || n}
                   @lintje-change=${this.onLinkChange}
                 ></lintje-text-input>
-              </div>` : r}
+              </div>` : n}
         </lintje-popover>
         <div
           id=${this.controlId}
@@ -421,9 +422,9 @@ var z = class extends s {
           aria-multiline="true"
           aria-labelledby=${this.labelId}
           aria-describedby=${this.describedBy}
-          aria-invalid=${this.error ? "true" : r}
-          aria-required=${this.required ? "true" : r}
-          aria-disabled=${this.disabled ? "true" : r}
+          aria-invalid=${this.error ? "true" : n}
+          aria-required=${this.required ? "true" : n}
+          aria-disabled=${this.disabled ? "true" : n}
           contenteditable=${this.disabled ? "false" : "true"}
           tabindex=${this.disabled ? "-1" : "0"}
           @keydown=${this.onSurfaceKeydown}
@@ -434,6 +435,6 @@ var z = class extends s {
     </div>`;
 	}
 };
-t("lintje-text-editor", z);
+e("lintje-text-editor", z);
 //#endregion
 export { z as LintjeTextEditor };