lintje 0.1.1 → 0.2.0

package/dist-elements/tag/list.js

@@ -1,5 +1,5 @@
-import { $ as e, Bt as t, Gt as n, H as r, Ht as i, I as a, Kt as o, Lt as s, U as c, Z as l, et as u, p as d, ut as f, zt as p } from "../chunks/base-rBLTcEIv.js";
-import { n as m } from "../chunks/focus-trap-w3vCamJ6.js";
+import { $ as e, Bt as t, Gt as n, H as r, Ht as i, I as a, Lt as o, U as s, Z as c, et as l, p as u, qt as d, ut as f, zt as p } from "../chunks/base-Bg-IFOPG.js";
+import { n as m } from "../chunks/focus-trap-9BnE-xWv.js";
 import "./menu-button.js";
 import "./empty-state.js";
 import "./text-input.js";
@@ -20,7 +20,7 @@ function g(e) {
 }
 var _ = class extends p {
 	constructor(...e) {
-		super(...e), this.#e = new s(this), this.items = [], this.emptyText = "Er is hier nog niets.", this.headingLevel = 3, this.held = null, this.renaming = null;
+		super(...e), this.#e = new o(this), this.items = [], this.emptyText = "Er is hier nog niets.", this.headingLevel = 3, this.held = null, this.renaming = null;
 	}
 	static {
 		this.styles = [e, i(h)];
@@ -55,7 +55,7 @@ var _ = class extends p {
 		return (t ? [n, ...r] : [...r, n]).filter((e) => e !== null);
 	}
 	heldFocus(e) {
-		let t = this.rowElements(), n = t.findIndex((e) => c(e)), r = t[n];
+		let t = this.rowElements(), n = t.findIndex((e) => s(e)), r = t[n];
 		if (r?.classList.contains("is-renaming")) return {
 			items: e,
 			index: n,
@@ -63,7 +63,7 @@ var _ = class extends p {
 			onTitle: !0,
 			renaming: !0
 		};
-		let i = r && this.controls(r).find((e) => c(e));
+		let i = r && this.controls(r).find((e) => s(e));
 		return !r || !i ? null : {
 			items: e,
 			index: n,
@@ -95,7 +95,7 @@ var _ = class extends p {
 	updated(e) {
 		super.updated(e);
 		let t = this.held;
-		this.held = null, t && !(t.control.isConnected && c(t.control)) && !c(this) && this.refocus(t);
+		this.held = null, t && !(t.control.isConnected && s(t.control)) && !s(this) && this.refocus(t);
 		let n = this.items.find((e) => e.rename)?.id ?? null;
 		if (n === this.renaming || (this.renaming = n, !n)) return;
 		let r = this.renderRoot.querySelector(".lintje-list__rename lintje-text-input");
@@ -112,8 +112,8 @@ var _ = class extends p {
 		});
 	}
 	renderRename(e) {
-		return o`<li
-      class=${l({
+		return d`<li
+      class=${c({
 			"lintje-list__row": !0,
 			"is-static": !0,
 			"is-renaming": !0,
@@ -173,15 +173,15 @@ var _ = class extends p {
 	}
 	renderTitle(e) {
 		let t = e.id === this.selectedId ? "true" : n;
-		return e.href ? o`<a
+		return e.href ? d`<a
         class="lintje-list__title"
         href=${e.href}
         title=${e.title}
         aria-current=${t}
         >${e.title}</a
-      >` : e.clickable === !1 ? o`<span class="lintje-list__title" title=${e.title} aria-current=${t}
+      >` : e.clickable === !1 ? d`<span class="lintje-list__title" title=${e.title} aria-current=${t}
         >${e.title}</span
-      >` : o`<button
+      >` : d`<button
       type="button"
       class="lintje-list__title"
       title=${e.title}
@@ -193,8 +193,8 @@ var _ = class extends p {
 	renderAction(e) {
 		let t = e.action;
 		if (!t) return n;
-		let r = o`${t.label}<span class="visually-hidden"> ${e.title}</span>`;
-		return t.href ? o`<a class="lintje-list__link" data-part="action" href=${t.href}>${r}</a>` : o`<lintje-button
+		let r = d`${t.label}<span class="visually-hidden"> ${e.title}</span>`;
+		return t.href ? d`<a class="lintje-list__link" data-part="action" href=${t.href}>${r}</a>` : d`<lintje-button
       variant="link"
       size="compact"
       data-part="action"
@@ -209,8 +209,8 @@ var _ = class extends p {
 	row(e) {
 		if (e.rename) return this.renderRename(e);
 		let t = e.id === this.selectedId, r = e.clickable !== !1, i = (e.actions?.length ?? 0) > 0, a = typeof e.progress == "number" && !Number.isNaN(e.progress);
-		return o`<li
-      class=${l({
+		return d`<li
+      class=${c({
 			"lintje-list__row": !0,
 			"is-selected": t,
 			"is-static": !r,
@@ -222,14 +222,14 @@ var _ = class extends p {
       ${f({ "--lintje-swatch": e.swatch ? `var(--color-chart-${e.swatch})` : null })}
       @click=${r ? (t) => this.onRowClick(t, e) : n}
     >
-      ${e.icon ? u(e.icon, {
+      ${e.icon ? l(e.icon, {
 			size: 24,
 			className: "lintje-list__icon"
 		}) : n}
       <div class="lintje-list__main">
         ${this.renderTitle(e)}
-        ${e.sub ? o`<span class="lintje-list__sub">${e.sub}</span>` : n}
-        ${a ? o`<lintje-progress-bar
+        ${e.sub ? d`<span class="lintje-list__sub">${e.sub}</span>` : n}
+        ${a ? d`<lintje-progress-bar
                 class="lintje-list__progress"
                 hide-label
                 label=${`Voortgang ${e.title}`}
@@ -237,13 +237,13 @@ var _ = class extends p {
                 tone=${e.status?.tone === "warning" ? "paused" : "run"}
               ></lintje-progress-bar>` : n}
       </div>
-      ${e.status || e.meta ? o`<div class="lintje-list__facts">
-              ${e.status ? o`<lintje-badge tone=${e.status.tone ?? "neutral"}>${e.status.label}</lintje-badge>` : n}
-              ${e.meta ? o`<span class="lintje-list__meta">${e.meta}</span>` : n}
+      ${e.status || e.meta ? d`<div class="lintje-list__facts">
+              ${e.status ? d`<lintje-badge tone=${e.status.tone ?? "neutral"}>${e.status.label}</lintje-badge>` : n}
+              ${e.meta ? d`<span class="lintje-list__meta">${e.meta}</span>` : n}
             </div>` : n}
-      ${e.action || i ? o`<div class="lintje-list__actions">
+      ${e.action || i ? d`<div class="lintje-list__actions">
               ${this.renderAction(e)}
-              ${i ? o`<lintje-menu-button
+              ${i ? d`<lintje-menu-button
                       class="lintje-list__action"
                       data-part="action"
                       icon
@@ -256,22 +256,22 @@ var _ = class extends p {
     </li>`;
 	}
 	renderRun(e, t, r) {
-		let i = d(e.items, (e) => e.id, (e) => this.row(e));
-		return e.label ? o`<div
+		let i = u(e.items, (e) => e.id, (e) => this.row(e));
+		return e.label ? d`<div
         class="lintje-list__group"
         id="lintje-list-group-${t}"
         role="heading"
         aria-level=${this.headingLevel}
         >${e.label}</div
       >
-      <ul class="lintje-list" aria-labelledby="lintje-list-group-${t}">${i}</ul>` : o`<ul class="lintje-list" aria-label=${r ?? n}>${i}</ul>`;
+      <ul class="lintje-list" aria-labelledby="lintje-list-group-${t}">${i}</ul>` : d`<ul class="lintje-list" aria-label=${r ?? n}>${i}</ul>`;
 	}
 	render() {
-		if (!this.items.length) return o`<lintje-empty-state compact text=${this.emptyText}
+		if (!this.items.length) return d`<lintje-empty-state compact text=${this.emptyText}
         ><slot name="empty"></slot
       ></lintje-empty-state>`;
 		let e = g(this.items), [t] = e;
-		return e.length === 1 && t && !t.label ? this.renderRun(t, 0, this.label) : o`<div role="group" aria-label=${this.label ?? n}>
+		return e.length === 1 && t && !t.label ? this.renderRun(t, 0, this.label) : d`<div role="group" aria-label=${this.label ?? n}>
       ${e.map((e, t) => this.renderRun(e, t))}
     </div>`;
 	}

package/dist-elements/tag/logo.js

@@ -1,4 +1,4 @@
-import { Bt as e, Gt as t, Ht as n, Kt as r, Q as i, ct as a, dt as o, qt as s, st as c, ut as l, zt as u } from "../chunks/base-rBLTcEIv.js";
+import { Bt as e, Gt as t, Ht as n, Jt as r, Q as i, ct as a, dt as o, qt as s, st as c, ut as l, zt as u } from "../chunks/base-Bg-IFOPG.js";
 //#region src/components/actions/logo/logo.css?inline
 var d = "/* The emblem's own box: `display: block; flex: none` on `:host`, the drawing fills it. */\n:host {\n  display: block;\n  flex: none;\n}\n:host([hidden]) { display: none; }\n.lintje-logo { display: block; }\n/* The emblem file's lintblauw ribbon; in dark it takes the house style's lighter tint. */\n.lintje-logo [fill='#154273' i] { fill: var(--color-logo-ribbon); }\n/* The frame is the window on the drawing; it narrows to the ribbon on the menu's duration. */\n.lintje-logo__frame {\n  display: block;\n  overflow: hidden;\n  transition: width var(--dur-rail, 180ms) var(--ease-in-motion, ease);\n}\n@media (prefers-reduced-motion: reduce) {\n  .lintje-logo__frame { transition: none; }\n}\n\n/* The name hangs outside the drawing's box, so the ribbon keeps its place whatever the name's\n   length. Its left is set inline, in px, from the ribbon's width. */\n.lintje-logo__lockup { position: relative; display: block; }\n.lintje-logo__name {\n  position: absolute;\n  top: 55%;\n  display: flex;\n  flex-direction: column;\n  margin-left: var(--space-3);\n  width: max-content;\n  max-width: 20rem;\n  font: 700 1rem/1.2 var(--font-ui);\n  color: inherit;\n}\n.lintje-logo__byline { font-weight: 400; font-style: italic; }\n@media (max-width: 767px) {\n  .lintje-logo__name { max-width: 9rem; font-size: 0.875rem; }\n}\n", f = {
 	x: 154,
@@ -30,19 +30,19 @@ var d = "/* The emblem's own box: `display: block; flex: none` on `:host`, the d
 		this.#e?.(), this.#e = null, super.disconnectedCallback();
 	}
 	#t(e, n) {
-		return !(this.full || this.open) || !this.alt ? e : r`<span class="lintje-logo__lockup">
+		return !(this.full || this.open) || !this.alt ? e : s`<span class="lintje-logo__lockup">
       ${e}
       <span
         class="lintje-logo__name"
         aria-hidden="true"
         ${l({ left: `${n}px` })}
-        ><span class="lintje-logo__name-line">${this.alt}</span>${this.byline ? r`<span class="lintje-logo__byline">${this.byline}</span>` : t}</span
+        ><span class="lintje-logo__name-line">${this.alt}</span>${this.byline ? s`<span class="lintje-logo__byline">${this.byline}</span>` : t}</span
       >
     </span>`;
 	}
 	render() {
 		let e = this.width / f.width, n = Math.round(f.height * e), c = Math.round(p * e), u = Math.round(h * e), d = this.full ? u : this.open ? c : this.width;
-		if (this.src) return r`<img
+		if (this.src) return s`<img
         class="lintje-logo"
         src=${this.src}
         alt=${this.alt}
@@ -50,7 +50,7 @@ var d = "/* The emblem's own box: `display: block; flex: none` on `:host`, the d
         height=${n}
       />`;
 		let g = this.name, _ = i(g);
-		if (!_) return g && a(g), r`<span
+		if (!_) return g && a(g), s`<span
         class="lintje-logo lintje-logo--pending"
         ${l({
 			width: `${d}px`,
@@ -61,7 +61,7 @@ var d = "/* The emblem's own box: `display: block; flex: none` on `:host`, the d
       ></span>`;
 		if (_.viewBox !== m) {
 			let [, , e, n] = _.viewBox.split(/\s+/).map(Number);
-			return this.#t(r`<svg
+			return this.#t(s`<svg
           class="lintje-logo"
           xmlns="http://www.w3.org/2000/svg"
           width=${this.width}
@@ -72,10 +72,10 @@ var d = "/* The emblem's own box: `display: block; flex: none` on `:host`, the d
           aria-label=${this.alt || t}
           fill=${_.attributes.fill ?? "currentColor"}
         >
-          ${s`${o(_.body)}`}
+          ${r`${o(_.body)}`}
         </svg>`, this.width);
 		}
-		let v = r`<span
+		let v = s`<span
       class="lintje-logo__frame"
       ${l({
 			width: `${d}px`,
@@ -94,7 +94,7 @@ var d = "/* The emblem's own box: `display: block; flex: none` on `:host`, the d
         aria-label=${this.alt || t}
         fill=${_.attributes.fill ?? "currentColor"}
       >
-        ${s`${o(_.body)}`}
+        ${r`${o(_.body)}`}
       </svg>
     </span>`, y = this.full ? Math.round((f.x + f.width) * e) : this.width;
 		return this.#t(v, y);

package/dist-elements/tag/map.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/map/map/map.js'