lintje 0.2.0 → 0.3.0

package/dist-elements/tag/card.js

@@ -1,16 +1,11 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, I as i, It as a, Lt as o, Z as s, et as c, qt as l, zt as u } from "../chunks/base-Bg-IFOPG.js";
+import { Gt as e, H as t, J as n, Jt as r, Kt as i, Yt as a, Zt as o, en as s, lt as c, nn as l, st as u, ut as d } from "../chunks/base-CbmWxUig.js";
 //#region src/components/tables/card/card.css?inline
-var d = "/* The actions are `lintje-button`s; here they are only laid out, never restyled. */\n:host { display: block; min-width: 0; height: 100%; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-card {\n  display: flex; flex-direction: column;\n  height: 100%;\n  box-sizing: border-box;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  color: var(--color-text-primary);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n/* A linked card answers the pointer as a list row does: the subtle fill, the title underlined. */\n.lintje-card.is-link { cursor: pointer; }\n.lintje-card.is-link:hover { background: var(--color-bg-subtle); }\n.lintje-card.is-link:hover .lintje-card__link { text-decoration: underline; }\n/* A linked card takes the ring around itself: the title is its one tab stop. */\n.lintje-card.is-link:has(.lintje-card__link:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-card.is-link .lintje-card__link:focus-visible { outline: none; }\n\n/* A screenshot from its top left corner, where an application's title and menu stand. */\n.lintje-card__image {\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 / 9;\n  object-fit: cover;\n  object-position: top left;\n}\n.lintje-card__logo {\n  flex: none;\n  width: var(--w-card-logo); height: var(--w-card-logo);\n  object-fit: contain;\n}\n\n.lintje-card__main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }\n\n.lintje-card__body {\n  flex: 1 1 auto;\n  display: flex; flex-direction: column;\n  gap: var(--space-2);\n  padding: var(--tile-pad-y) var(--tile-pad-x) var(--tile-pad-x);\n}\n\n.lintje-card__head { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }\n.lintje-card__heading {\n  flex: 1 1 auto;\n  display: flex; flex-direction: column; gap: var(--space-1);\n  min-width: 0;\n}\n.lintje-card__meta { margin: 0; font: var(--text-meta); color: var(--color-text-muted); }\n.lintje-card__title {\n  margin: 0;\n  font: var(--text-h2);\n  overflow-wrap: break-word;\n  hyphens: auto;\n}\n.lintje-card__link { color: var(--color-link); text-decoration: none; }\n.lintje-card__link:hover { color: var(--color-link-hover); text-decoration: underline; }\n.lintje-card__icon-action { flex: none; }\n/* A linked card says it leads on with the chevron at the end of its title row. */\n.lintje-card__chevron { flex: none; color: var(--color-link); }\n\n.lintje-card__description { margin: 0; font: var(--text-body); }\n\n/* The facts read as a small table: a hairline between the rows, the value on the right. */\n.lintje-card__facts { margin: var(--space-2) 0 0; font: var(--text-small); }\n.lintje-card__fact {\n  display: flex; justify-content: space-between; align-items: baseline;\n  gap: var(--space-4);\n  padding: var(--space-1) 0;\n  border-top: 1px solid var(--color-border-default);\n}\n.lintje-card__fact:last-child { border-bottom: 1px solid var(--color-border-default); }\n.lintje-card__fact-label { color: var(--color-text-muted); }\n.lintje-card__fact-value {\n  margin: 0;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n}\n.lintje-card__missing { color: var(--color-text-muted); }\n\n/* The status closes the text, so cards in a row line up whatever their length. */\n.lintje-card__status {\n  display: flex; align-items: center; gap: var(--space-2);\n  margin: auto 0 0;\n  padding-top: var(--space-2);\n  font: var(--text-small);\n  font-weight: 700;\n}\n.lintje-card__status-icon { flex: none; }\n.lintje-card__status--neutral { color: var(--color-text-muted); }\n.lintje-card__status--success .lintje-card__status-icon { color: var(--color-success-line); }\n.lintje-card__status--info .lintje-card__status-icon { color: var(--color-info-line); }\n.lintje-card__status--attention .lintje-card__status-icon { color: var(--color-attention-line); }\n.lintje-card__status--error .lintje-card__status-icon { color: var(--color-error-line); }\n\n.lintje-card__actions {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-3);\n  padding: 0 var(--tile-pad-x) var(--tile-pad-x);\n}\n/* The link to the item's own page stands at the end of the bar, apart from the action. */\n.lintje-card__action--link { margin-left: auto; }\n\n/* Across: the picture is a column on the left and the actions close the text column. */\n.lintje-card.is-horizontal { flex-direction: row; }\n.lintje-card.is-horizontal .lintje-card__media {\n  flex: none;\n  width: var(--w-card-media);\n  border-right: 1px solid var(--color-border-default);\n}\n.lintje-card.is-horizontal .lintje-card__image { height: 100%; aspect-ratio: auto; }\n.lintje-card.is-horizontal.has-logo .lintje-card__media {\n  display: flex; justify-content: center;\n  padding-top: var(--space-6);\n  box-sizing: border-box;\n  background: var(--color-bg-subtle);\n}\n.lintje-card.is-horizontal .lintje-card__logo {\n  width: var(--w-card-logo-wide); height: var(--w-card-logo-wide);\n}\n\n.lintje-card.is-compact .lintje-card__body { gap: var(--space-1); padding: var(--space-4); }\n.lintje-card.is-compact .lintje-card__title { font: var(--text-tile-title); }\n.lintje-card.is-compact .lintje-card__actions { padding: 0 var(--space-4) var(--space-4); }\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-card { transition: none; }\n}\n\n/* Forced colours: the fill is gone, so a linked card's edge says it on hover. */\n@media (forced-colors: active) {\n  .lintje-card.is-link:hover { border-color: Highlight; }\n}\n", f = {
-	success: "functioneel-cirkel-vinkje",
-	info: "functioneel-info",
-	attention: "functioneel-waarschuwing",
-	error: "functioneel-foutmelding"
-}, p = class extends u {
-	constructor(...e) {
-		super(...e), this.layout = "vertical", this.headingLevel = 3, this.compact = !1, this.loading = !1, this.spoken = "", this.hasRegion = !1, this.wasBusy = !1, this.fillFrame = 0, this.#e = new o(this, a);
+var f = "/* The actions are `lintje-button`s; here they are only laid out, never restyled. */\n:host { display: block; min-width: 0; height: 100%; }\n:host([hidden]) { display: none; }\n@media print { :host { break-inside: avoid; } }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-card {\n  display: flex; flex-direction: column;\n  height: 100%;\n  box-sizing: border-box;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  color: var(--color-text-primary);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n/* A linked card answers the pointer as a list row does: the subtle fill, the title underlined. */\n.lintje-card.is-link { cursor: pointer; }\n.lintje-card.is-link:hover { background: var(--color-bg-subtle); }\n.lintje-card.is-link:hover .lintje-card__link { text-decoration: underline; }\n/* A linked card takes the ring around itself: the title is its one tab stop. */\n.lintje-card.is-link:has(.lintje-card__link:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-card.is-link .lintje-card__link:focus-visible { outline: none; }\n\n/* A screenshot from its top left corner, where an application's title and menu stand. */\n.lintje-card__image {\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 / 9;\n  object-fit: cover;\n  object-position: top left;\n}\n.lintje-card__logo {\n  flex: none;\n  width: var(--w-card-logo); height: var(--w-card-logo);\n  object-fit: contain;\n}\n\n.lintje-card__main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }\n\n.lintje-card__body {\n  flex: 1 1 auto;\n  display: flex; flex-direction: column;\n  gap: var(--space-2);\n  padding: var(--tile-pad-y) var(--tile-pad-x) var(--tile-pad-x);\n}\n\n.lintje-card__head { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }\n.lintje-card__heading {\n  flex: 1 1 auto;\n  display: flex; flex-direction: column; gap: var(--space-1);\n  min-width: 0;\n}\n.lintje-card__meta { margin: 0; font: var(--text-meta); color: var(--color-text-muted); }\n.lintje-card__title {\n  margin: 0;\n  font: var(--text-h2);\n  overflow-wrap: break-word;\n  hyphens: auto;\n}\n.lintje-card__link { color: var(--color-link); text-decoration: none; }\n.lintje-card__link:hover { color: var(--color-link-hover); text-decoration: underline; }\n.lintje-card__icon-action { flex: none; }\n/* A linked card says it leads on with the chevron at the end of its title row. */\n.lintje-card__chevron { flex: none; color: var(--color-link); }\n\n.lintje-card__description { margin: 0; font: var(--text-body); }\n\n/* The facts read as a small table: a hairline between the rows, the value on the right. */\n.lintje-card__facts { margin: var(--space-2) 0 0; font: var(--text-small); }\n.lintje-card__fact {\n  display: flex; justify-content: space-between; align-items: baseline;\n  gap: var(--space-4);\n  padding: var(--space-1) 0;\n  border-top: 1px solid var(--color-border-default);\n}\n.lintje-card__fact:last-child { border-bottom: 1px solid var(--color-border-default); }\n.lintje-card__fact-label { color: var(--color-text-muted); }\n.lintje-card__fact-value {\n  margin: 0;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n}\n.lintje-card__missing { color: var(--color-text-muted); }\n\n/* The status closes the text, so cards in a row line up whatever their length. */\n.lintje-card__status {\n  display: flex; align-items: center; gap: var(--space-2);\n  margin: auto 0 0;\n  padding-top: var(--space-2);\n  font: var(--text-small);\n  font-weight: 700;\n}\n.lintje-card__status-icon { flex: none; }\n.lintje-card__status--neutral { color: var(--color-text-muted); }\n.lintje-card__status--success .lintje-card__status-icon { color: var(--color-success-line); }\n.lintje-card__status--info .lintje-card__status-icon { color: var(--color-info-line); }\n.lintje-card__status--error .lintje-card__status-icon { color: var(--color-error-line); }\n.lintje-card__status--attention .lintje-card__status-icon { color: var(--color-attention-line); }\n.lintje-card__status--warning .lintje-card__status-icon { color: var(--color-attention-line); }\n.lintje-card__status--busy .lintje-card__status-icon { color: var(--color-accent-text); }\n.lintje-card__status--neutral .lintje-card__status-icon { color: var(--color-text-muted); }\n.lintje-card__status--subtle .lintje-card__status-icon { color: var(--color-text-muted); }\n.lintje-card__status--live .lintje-card__status-icon { color: var(--color-error-line); }\n\n.lintje-card__actions {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-3);\n  padding: 0 var(--tile-pad-x) var(--tile-pad-x);\n}\n/* The link to the item's own page stands at the end of the bar, apart from the action. */\n.lintje-card__action--link { margin-left: auto; }\n\n/* Across: the picture is a column on the left and the actions close the text column. */\n.lintje-card.is-horizontal { flex-direction: row; }\n.lintje-card.is-horizontal .lintje-card__media {\n  flex: none;\n  width: var(--w-card-media);\n  border-right: 1px solid var(--color-border-default);\n}\n.lintje-card.is-horizontal .lintje-card__image { height: 100%; aspect-ratio: auto; }\n.lintje-card.is-horizontal.has-logo .lintje-card__media {\n  display: flex; justify-content: center;\n  padding-top: var(--space-6);\n  box-sizing: border-box;\n  background: var(--color-bg-subtle);\n}\n.lintje-card.is-horizontal .lintje-card__logo {\n  width: var(--w-card-logo-wide); height: var(--w-card-logo-wide);\n}\n\n.lintje-card.is-compact .lintje-card__body { gap: var(--space-1); padding: var(--space-4); }\n.lintje-card.is-compact .lintje-card__title { font: var(--text-tile-title); }\n.lintje-card.is-compact .lintje-card__actions { padding: 0 var(--space-4) var(--space-4); }\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-card { transition: none; }\n}\n\n/* Forced colours: the fill is gone, so a linked card's edge says it on hover. */\n@media (forced-colors: active) {\n  .lintje-card.is-link:hover { border-color: Highlight; }\n}\n", p = class extends r {
+	constructor(...t) {
+		super(...t), this.layout = "vertical", this.headingLevel = 3, this.compact = !1, this.loading = !1, this.spoken = "", this.hasRegion = !1, this.wasBusy = !1, this.fillFrame = 0, this.#e = new i(this, e);
 	}
 	static {
-		this.styles = [e, r(d)];
+		this.styles = [c, o(f)];
 	}
 	static {
 		this.properties = {
@@ -64,16 +59,16 @@ var d = "/* The actions are `lintje-button`s; here they are only laid out, never
 		return !!this.data?.href && this.actions.length === 0;
 	}
 	onCardClick(e) {
-		let t = this.data?.href;
-		if (!t || !this.isLink || !i(e) || getSelection()?.toString()) return;
-		let n = e.composedPath(), r = (e) => n.some((t) => t instanceof HTMLElement && t.classList.contains(e));
-		r("lintje-card__icon-action") || (r("lintje-card__link") ? this.followLink(t, e) : (e.preventDefault(), this.followLink(t)));
+		let n = this.data?.href;
+		if (!n || !this.isLink || !t(e) || getSelection()?.toString()) return;
+		let r = e.composedPath(), i = (e) => r.some((t) => t instanceof HTMLElement && t.classList.contains(e));
+		i("lintje-card__icon-action") || (i("lintje-card__link") ? this.followLink(n, e) : (e.preventDefault(), this.followLink(n)));
 	}
 	onTitleClick(e) {
-		!this.isLink && this.data?.href && i(e) && this.followLink(this.data.href, e);
+		!this.isLink && this.data?.href && t(e) && this.followLink(this.data.href, e);
 	}
-	onAction(e, t) {
-		this.data && (e.href ? !e.external && i(t) && this.followLink(e.href, t) : this.emit("lintje-card-action", {
+	onAction(e, n) {
+		this.data && (e.href ? !e.external && t(n) && this.followLink(e.href, n) : this.emit("lintje-card-action", {
 			id: this.data.id,
 			value: e.value ?? e.label
 		}));
@@ -107,12 +102,12 @@ var d = "/* The actions are `lintje-button`s; here they are only laid out, never
 		return this.heading(t);
 	}
 	renderStatus(e) {
-		let t = e.tone ?? "neutral", r = e.icon ?? f[t];
+		let t = e.tone ?? "neutral", r = e.icon ?? n[t];
 		return l`<p class="lintje-card__status lintje-card__status--${t}">
-      ${r ? c(r, {
+      ${r ? d(r, {
 			size: 16,
 			className: "lintje-card__status-icon"
-		}) : n}
+		}) : s}
       <span>${e.label}</span>
     </p>`;
 	}
@@ -130,17 +125,17 @@ var d = "/* The actions are `lintje-button`s; here they are only laid out, never
     </dl>`;
 	}
 	renderAction(e, t) {
-		let r = l`${e.label}<span class="visually-hidden"
+		let n = l`${e.label}<span class="visually-hidden"
         >: ${t}${e.external ? " (opent in een nieuw tabblad)" : ""}</span
       >`;
 		return l`<lintje-button
       class=${e.variant === "link" ? "lintje-card__action lintje-card__action--link" : "lintje-card__action"}
       variant=${e.variant ?? "secondary"}
-      href=${e.href ?? n}
-      target=${e.external ? "_blank" : n}
-      icon-right=${e.external ? "functioneel-externe-link" : n}
+      href=${e.href ?? s}
+      target=${e.external ? "_blank" : s}
+      icon-right=${e.external ? "functioneel-externe-link" : s}
       @click=${(t) => this.onAction(e, t)}
-      >${r}</lintje-button
+      >${n}</lintje-button
     >`;
 	}
 	renderMedia(e) {
@@ -151,55 +146,55 @@ var d = "/* The actions are `lintje-button`s; here they are only laid out, never
       <div class="lintje-card__body">
         <lintje-skeleton width="40%" height="14px"></lintje-skeleton>
         <lintje-skeleton width="70%" height="24px"></lintje-skeleton>
-        ${this.compact ? n : l`<lintje-skeleton width="100%" height="16px"></lintje-skeleton>
+        ${this.compact ? s : l`<lintje-skeleton width="100%" height="16px"></lintje-skeleton>
                 <lintje-skeleton width="85%" height="16px"></lintje-skeleton>`}
       </div>
     </div>`;
 	}
 	render() {
-		return l`${this.hasRegion ? l`<span class="visually-hidden" role="status">${this.spoken}</span>` : n}${this.renderCard()}`;
+		return l`${this.hasRegion ? l`<span class="visually-hidden" role="status">${this.spoken}</span>` : s}${this.renderCard()}`;
 	}
 	renderCard() {
 		let e = this.data;
 		if (this.busy || !e) return this.renderLoading();
-		let t = this.compact ? void 0 : e.media, r = t?.kind === "logo", i = this.horizontal, a = t && (i || !r), o = (e.meta ?? []).filter((e) => e.trim() !== "").join(" · "), u = this.actions;
+		let t = this.compact ? void 0 : e.media, n = t?.kind === "logo", r = this.horizontal, i = t && (r || !n), a = (e.meta ?? []).filter((e) => e.trim() !== "").join(" · "), o = this.actions;
 		return l`<article
-      class=${s({
+      class=${u({
 			"lintje-card": !0,
 			"is-link": this.isLink,
 			"is-compact": this.compact,
-			"is-horizontal": i,
-			"has-media": !!a,
-			"has-logo": r
+			"is-horizontal": r,
+			"has-media": !!i,
+			"has-logo": n
 		})}
       @click=${this.onCardClick}
     >
-      ${a ? l`<div class="lintje-card__media">${this.renderMedia(t)}</div>` : n}
+      ${i ? l`<div class="lintje-card__media">${this.renderMedia(t)}</div>` : s}
       <div class="lintje-card__main">
         <div class="lintje-card__body">
           <div class="lintje-card__head">
-            ${t && r && !a ? this.renderMedia(t) : n}
+            ${t && n && !i ? this.renderMedia(t) : s}
             <div class="lintje-card__heading">
-              ${o ? l`<p class="lintje-card__meta">${o}</p>` : n}
+              ${a ? l`<p class="lintje-card__meta">${a}</p>` : s}
               ${this.renderTitle(e)}
             </div>
             ${(e.iconActions ?? []).slice(0, 2).map((t) => this.renderIconAction(t, e))}
-            ${this.isLink ? c("functioneel-delta-rechts", {
+            ${this.isLink ? d("functioneel-delta-rechts", {
 			size: 20,
 			className: "lintje-card__chevron"
-		}) : n}
+		}) : s}
           </div>
-          ${e.description && !this.compact ? l`<p class="lintje-card__description">${e.description}</p>` : n}
-          ${e.facts?.length && !this.compact ? this.renderFacts(e.facts) : n}
-          ${e.status ? this.renderStatus(e.status) : n}
+          ${e.description && !this.compact ? l`<p class="lintje-card__description">${e.description}</p>` : s}
+          ${e.facts?.length && !this.compact ? this.renderFacts(e.facts) : s}
+          ${e.status ? this.renderStatus(e.status) : s}
         </div>
-        ${u.length ? l`<div class="lintje-card__actions">
-                ${u.map((t) => this.renderAction(t, e.title))}
-              </div>` : n}
+        ${o.length ? l`<div class="lintje-card__actions">
+                ${o.map((t) => this.renderAction(t, e.title))}
+              </div>` : s}
       </div>
     </article>`;
 	}
 };
-t("lintje-card", p);
+a("lintje-card", p);
 //#endregion
 export { p as LintjeCard };