lintje 0.1.1 → 0.2.0

package/dist-elements/tag/card-list.js

@@ -1,4 +1,4 @@
-import { Bt as e, Gt as t, Ht as n, Kt as r, ut as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+import { Bt as e, Gt as t, Ht as n, qt as r, ut as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
 import "./empty-state.js";
 import "./card.js";
 //#region src/components/tables/card-list/card-list.css?inline

package/dist-elements/tag/card.js

@@ -1,4 +1,4 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, I as i, It as a, Kt as o, Lt as s, Z as c, et as l, zt as u } from "../chunks/base-rBLTcEIv.js";
+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";
 //#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",
@@ -7,7 +7,7 @@ var d = "/* The actions are `lintje-button`s; here they are only laid out, never
 	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 s(this, a);
+		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);
 	}
 	static {
 		this.styles = [e, r(d)];
@@ -87,7 +87,7 @@ var d = "/* The actions are `lintje-button`s; here they are only laid out, never
 			id: t.id,
 			value: e.value
 		};
-		return o`<lintje-icon-button
+		return l`<lintje-icon-button
       class="lintje-card__icon-action"
       variant="flat"
       icon=${r && e.iconPressed ? e.iconPressed : e.icon}
@@ -98,18 +98,18 @@ var d = "/* The actions are `lintje-button`s; here they are only laid out, never
     ></lintje-icon-button>`;
 	}
 	heading(e) {
-		return this.headingLevel === 2 ? o`<h2 class="lintje-card__title">${e}</h2>` : this.headingLevel === 4 ? o`<h4 class="lintje-card__title">${e}</h4>` : o`<h3 class="lintje-card__title">${e}</h3>`;
+		return this.headingLevel === 2 ? l`<h2 class="lintje-card__title">${e}</h2>` : this.headingLevel === 4 ? l`<h4 class="lintje-card__title">${e}</h4>` : l`<h3 class="lintje-card__title">${e}</h3>`;
 	}
 	renderTitle(e) {
-		let t = e.href ? o`<a class="lintje-card__link" href=${e.href} @click=${this.onTitleClick}
+		let t = e.href ? l`<a class="lintje-card__link" href=${e.href} @click=${this.onTitleClick}
           >${e.title}</a
-        >` : o`${e.title}`;
+        >` : l`${e.title}`;
 		return this.heading(t);
 	}
 	renderStatus(e) {
 		let t = e.tone ?? "neutral", r = e.icon ?? f[t];
-		return o`<p class="lintje-card__status lintje-card__status--${t}">
-      ${r ? l(r, {
+		return l`<p class="lintje-card__status lintje-card__status--${t}">
+      ${r ? c(r, {
 			size: 16,
 			className: "lintje-card__status-icon"
 		}) : n}
@@ -117,11 +117,11 @@ var d = "/* The actions are `lintje-button`s; here they are only laid out, never
     </p>`;
 	}
 	renderFacts(e) {
-		return o`<dl class="lintje-card__facts">
-      ${e.map((e) => o`<div class="lintje-card__fact">
+		return l`<dl class="lintje-card__facts">
+      ${e.map((e) => l`<div class="lintje-card__fact">
           <dt class="lintje-card__fact-label">${e.label}</dt>
           <dd class="lintje-card__fact-value">
-            ${e.value === null || e.value === "" ? o`<span class="lintje-card__missing"
+            ${e.value === null || e.value === "" ? l`<span class="lintje-card__missing"
                     ><span aria-hidden="true">—</span
                     ><span class="visually-hidden">geen waarde</span></span
                   >` : e.value}
@@ -130,10 +130,10 @@ var d = "/* The actions are `lintje-button`s; here they are only laid out, never
     </dl>`;
 	}
 	renderAction(e, t) {
-		let r = o`${e.label}<span class="visually-hidden"
+		let r = l`${e.label}<span class="visually-hidden"
         >: ${t}${e.external ? " (opent in een nieuw tabblad)" : ""}</span
       >`;
-		return o`<lintje-button
+		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}
@@ -144,27 +144,27 @@ var d = "/* The actions are `lintje-button`s; here they are only laid out, never
     >`;
 	}
 	renderMedia(e) {
-		return (e.kind ?? "image") === "logo" ? o`<img class="lintje-card__logo" src=${e.src} alt=${e.alt} />` : o`<img class="lintje-card__image" src=${e.src} alt=${e.alt} loading="lazy" />`;
+		return (e.kind ?? "image") === "logo" ? l`<img class="lintje-card__logo" src=${e.src} alt=${e.alt} />` : l`<img class="lintje-card__image" src=${e.src} alt=${e.alt} loading="lazy" />`;
 	}
 	renderLoading() {
-		return o`<div class="lintje-card is-loading">
+		return l`<div class="lintje-card is-loading">
       <div class="lintje-card__body">
         <lintje-skeleton width="40%" height="14px"></lintje-skeleton>
         <lintje-skeleton width="70%" height="24px"></lintje-skeleton>
-        ${this.compact ? n : o`<lintje-skeleton width="100%" height="16px"></lintje-skeleton>
+        ${this.compact ? n : l`<lintje-skeleton width="100%" height="16px"></lintje-skeleton>
                 <lintje-skeleton width="85%" height="16px"></lintje-skeleton>`}
       </div>
     </div>`;
 	}
 	render() {
-		return o`${this.hasRegion ? o`<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>` : n}${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), s = (e.meta ?? []).filter((e) => e.trim() !== "").join(" · "), u = this.actions;
-		return o`<article
-      class=${c({
+		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;
+		return l`<article
+      class=${s({
 			"lintje-card": !0,
 			"is-link": this.isLink,
 			"is-compact": this.compact,
@@ -174,26 +174,26 @@ var d = "/* The actions are `lintje-button`s; here they are only laid out, never
 		})}
       @click=${this.onCardClick}
     >
-      ${a ? o`<div class="lintje-card__media">${this.renderMedia(t)}</div>` : n}
+      ${a ? l`<div class="lintje-card__media">${this.renderMedia(t)}</div>` : n}
       <div class="lintje-card__main">
         <div class="lintje-card__body">
           <div class="lintje-card__head">
             ${t && r && !a ? this.renderMedia(t) : n}
             <div class="lintje-card__heading">
-              ${s ? o`<p class="lintje-card__meta">${s}</p>` : n}
+              ${o ? l`<p class="lintje-card__meta">${o}</p>` : n}
               ${this.renderTitle(e)}
             </div>
             ${(e.iconActions ?? []).slice(0, 2).map((t) => this.renderIconAction(t, e))}
-            ${this.isLink ? l("functioneel-delta-rechts", {
+            ${this.isLink ? c("functioneel-delta-rechts", {
 			size: 20,
 			className: "lintje-card__chevron"
 		}) : n}
           </div>
-          ${e.description && !this.compact ? o`<p class="lintje-card__description">${e.description}</p>` : n}
+          ${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}
         </div>
-        ${u.length ? o`<div class="lintje-card__actions">
+        ${u.length ? l`<div class="lintje-card__actions">
                 ${u.map((t) => this.renderAction(t, e.title))}
               </div>` : n}
       </div>

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

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