lintje 0.1.1

package/dist-elements/tag/logo.js

@@ -0,0 +1,105 @@
+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";
+//#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,
+	width: 38,
+	height: 75
+}, p = 192, m = "0 0 346 75", h = 346, g = class extends u {
+	constructor(...e) {
+		super(...e), this.width = 44, this.alt = "", this.open = !1, this.full = !1, this.#e = null;
+	}
+	static {
+		this.styles = n(d);
+	}
+	static {
+		this.properties = {
+			width: { type: Number },
+			src: { type: String },
+			alt: { type: String },
+			name: { type: String },
+			byline: { type: String },
+			open: { type: Boolean },
+			full: { type: Boolean }
+		};
+	}
+	#e;
+	connectedCallback() {
+		super.connectedCallback(), this.#e = c(() => this.requestUpdate());
+	}
+	disconnectedCallback() {
+		this.#e?.(), this.#e = null, super.disconnectedCallback();
+	}
+	#t(e, n) {
+		return !(this.full || this.open) || !this.alt ? e : r`<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>`;
+	}
+	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
+        class="lintje-logo"
+        src=${this.src}
+        alt=${this.alt}
+        width=${this.width}
+        height=${n}
+      />`;
+		let g = this.name, _ = i(g);
+		if (!_) return g && a(g), r`<span
+        class="lintje-logo lintje-logo--pending"
+        ${l({
+			width: `${d}px`,
+			height: `${n}px`
+		})}
+        role=${g && this.alt ? "img" : t}
+        aria-label=${g && this.alt ? this.alt : t}
+      ></span>`;
+		if (_.viewBox !== m) {
+			let [, , e, n] = _.viewBox.split(/\s+/).map(Number);
+			return this.#t(r`<svg
+          class="lintje-logo"
+          xmlns="http://www.w3.org/2000/svg"
+          width=${this.width}
+          height=${Math.round(this.width * n / e)}
+          viewBox=${_.viewBox}
+          role=${this.alt ? "img" : t}
+          aria-hidden=${this.alt ? t : "true"}
+          aria-label=${this.alt || t}
+          fill=${_.attributes.fill ?? "currentColor"}
+        >
+          ${s`${o(_.body)}`}
+        </svg>`, this.width);
+		}
+		let v = r`<span
+      class="lintje-logo__frame"
+      ${l({
+			width: `${d}px`,
+			height: `${n}px`
+		})}
+    >
+      <svg
+        class="lintje-logo"
+        xmlns="http://www.w3.org/2000/svg"
+        width=${this.full ? u : c}
+        height=${n}
+        viewBox=${this.full ? m : `${f.x} 0 ${p} ${f.height}`}
+        preserveAspectRatio="xMinYMin meet"
+        role=${this.alt ? "img" : t}
+        aria-hidden=${this.alt ? t : "true"}
+        aria-label=${this.alt || t}
+        fill=${_.attributes.fill ?? "currentColor"}
+      >
+        ${s`${o(_.body)}`}
+      </svg>
+    </span>`, y = this.full ? Math.round((f.x + f.width) * e) : this.width;
+		return this.#t(v, y);
+	}
+};
+e("lintje-logo", g);
+//#endregion
+export { g as LintjeLogo };

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

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