@kubed.io/cdn 0.0.3 → 0.0.4

package/dist/chunks/kd-Bbw0GeQ5.js

@@ -0,0 +1,1149 @@
+import { a as e, c as t, l as n, n as r, o as i, r as a, s as o, t as s } from "./element-ChNBLJ5X.js";
+import { n as c } from "./define-XzEniRJH.js";
+//#region src/kd/helpers.ts
+function l(e) {
+	return JSON.stringify(e ?? null);
+}
+function u(e) {
+	e.registerHelper("kdjson", (e) => l(e));
+}
+//#endregion
+//#region node_modules/lit-html/directives/if-defined.js
+var d = (e) => e ?? i, ee = /^(~|null|true|false|yes|no|on|off|y|n)$/i, te = /^([-+]?(\.\d+|\d[\d_]*(\.\d*)?)([eE][-+]?\d+)?|0x[0-9a-f]+|0o[0-7]+|[-+]?\.(inf|nan)|[-+]?\d+(:[0-5]?\d)+(\.\d*)?)$/i, ne = /^\d{4}-\d\d?-\d\d?([Tt ]|$)/, re = /^([,[\]{}#&*!|>'"%@`]|[-?:](\s|$))/, f = /[\u0000-\u0008\u000b-\u001f\u007f]/;
+function p(e) {
+	return e === "" || ee.test(e) || te.test(e) || ne.test(e) || re.test(e) || /^\s|\s$/.test(e) || e.includes(": ") || e.includes(" #") || e.endsWith(":") || e.includes("\n") || e.includes("	") || f.test(e);
+}
+function m(e) {
+	return p(e) ? JSON.stringify(e) : e;
+}
+var h = (e, t) => ({
+	kind: e,
+	text: t
+});
+function g(e) {
+	return Array.isArray(e) ? e.length > 0 : typeof e == "object" && !!e && Object.values(e).some((e) => e !== void 0);
+}
+function ie(e) {
+	return typeof e == "string" && e.includes("\n") && !f.test(e);
+}
+function ae(e) {
+	return e == null ? h("null", "null") : typeof e == "boolean" ? h("bool", String(e)) : typeof e == "number" || typeof e == "bigint" ? h("num", String(e)) : Array.isArray(e) ? h("plain", "[]") : typeof e == "object" ? h("plain", "{}") : h("str", m(String(e)));
+}
+function oe(e) {
+	let t = e.endsWith("\n") ? e.endsWith("\n\n") ? "+" : "" : "-", n = (t === "-" ? e : e.slice(0, -1)).split("\n");
+	return {
+		header: `|${n.find((e) => e !== "")?.startsWith(" ") ? "2" : ""}${t}`,
+		lines: n
+	};
+}
+function _(e, t, n, r) {
+	let i = t.length ? [h("plain", " ")] : [];
+	if (ie(n)) {
+		let { header: a, lines: o } = oe(n);
+		return [{
+			prefix: e,
+			tokens: [
+				...t,
+				...i,
+				h("plain", a)
+			]
+		}, ...o.map((e) => ({
+			prefix: e ? r : "",
+			tokens: [h("str", e)]
+		}))];
+	}
+	return [{
+		prefix: e,
+		tokens: [
+			...t,
+			...i,
+			ae(n)
+		]
+	}];
+}
+function v(e, t, n) {
+	if (Array.isArray(e)) for (let r of e) if (g(r)) {
+		let e = [];
+		v(r, `${t}  `, e), e[0].prefix = `${t}- ${e[0].prefix.slice(t.length + 2)}`, n.push(...e);
+	} else n.push(..._(`${t}- `, [], r, `${t}  `));
+	else for (let [r, i] of Object.entries(e)) {
+		if (i === void 0) continue;
+		let e = [h("key", m(r)), h("plain", ":")];
+		g(i) ? (n.push({
+			prefix: t,
+			tokens: e
+		}), v(i, Array.isArray(i) ? t : `${t}  `, n)) : n.push(..._(t, e, i, `${t}  `));
+	}
+}
+function y(e) {
+	let t = [];
+	return g(e) ? v(e, "", t) : t.push(..._("", [], e, "  ")), t;
+}
+function b(e) {
+	return y(e).map((e) => e.prefix + e.tokens.map((e) => e.text).join("")).join("\n");
+}
+//#endregion
+//#region src/kd/elements/data.ts
+var x = class extends s {
+	static properties = {
+		data: {
+			attribute: "data",
+			converter: a
+		},
+		fold: { type: Number }
+	};
+	static styles = [r, n`
+      pre {
+        margin: 0;
+        font-family: var(--kd-font-mono, monospace);
+        font-size: 12px;
+        line-height: 1.5;
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+      }
+      .key {
+        color: color-mix(in srgb, var(--kd-info, currentColor) 75%, var(--kd-text, currentColor));
+      }
+      .str {
+        color: color-mix(in srgb, var(--kd-success, currentColor) 70%, var(--kd-text, currentColor));
+      }
+      .num {
+        color: color-mix(in srgb, var(--kd-warning, currentColor) 55%, var(--kd-text, currentColor));
+      }
+      .bool,
+      .null {
+        color: color-mix(in srgb, var(--kd-primary, currentColor) 70%, var(--kd-text, currentColor));
+      }
+      summary {
+        width: max-content;
+        color: var(--kd-text-2, inherit);
+        font-family: var(--kd-font-mono, monospace);
+        font-size: 12px;
+        cursor: pointer;
+        list-style: none;
+      }
+      summary::-webkit-details-marker {
+        display: none;
+      }
+      summary::before {
+        content: '▸ ';
+      }
+      details[open] > summary::before {
+        content: '▾ ';
+      }
+      details > pre {
+        margin-top: 2px;
+      }
+    `];
+	constructor() {
+		super(), this.fold = 10;
+	}
+	render() {
+		let e = this.data;
+		if (e === void 0) return i;
+		let n = y(e), r = t`<pre>${n.map((e, n) => t`${n ? "\n" : ""}${e.prefix}${e.tokens.map((e) => e.kind === "plain" ? e.text : t`<span class=${e.kind}>${e.text}</span>`)}`)}</pre>`;
+		if (!(this.fold > 0 && n.length > this.fold && typeof e == "object" && e)) return r;
+		let a = Object.keys(e).length, o = Array.isArray(e) ? `[ ] ${a} item${a === 1 ? "" : "s"}` : `{ } ${a} key${a === 1 ? "" : "s"}`;
+		return t`<details><summary>${o}</summary>${r}</details>`;
+	}
+};
+c("kd-data", x);
+//#endregion
+//#region src/kd/parts.ts
+var se = /* @__PURE__ */ new Set([
+	"primary",
+	"success",
+	"warning",
+	"error",
+	"info",
+	"neutral"
+]);
+function S(e, t = "neutral") {
+	return typeof e == "string" && se.has(e) ? e : t;
+}
+var C = n`
+  .primary {
+    --tone: var(--kd-primary, currentColor);
+  }
+  .success {
+    --tone: var(--kd-success, currentColor);
+  }
+  .warning {
+    --tone: var(--kd-warning, currentColor);
+  }
+  .error {
+    --tone: var(--kd-error, currentColor);
+  }
+  .info {
+    --tone: var(--kd-info, currentColor);
+  }
+  .primary,
+  .success,
+  .warning,
+  .error,
+  .info {
+    --tone-ink: color-mix(in srgb, var(--tone) 75%, var(--kd-text, currentColor));
+    --tone-line: color-mix(in srgb, var(--tone) 50%, transparent);
+  }
+  .neutral {
+    --tone: var(--kd-text-2, currentColor);
+    --tone-ink: var(--kd-text-2, currentColor);
+    --tone-line: var(--kd-border-strong, currentColor);
+  }
+`, ce = /^(https?:|data:image\/|\/|\.\.?\/)/i;
+function w(e, n = "icon") {
+	return e ? ce.test(e) ? t`<img class=${n} src=${e} alt="" />` : t`<span class=${n}>${e}</span>` : i;
+}
+function T(e) {
+	if (e != null && e !== "") return /^\s*(javascript|vbscript|data):/i.test(e) ? void 0 : e;
+}
+//#endregion
+//#region src/kd/elements/link.ts
+function E(e) {
+	try {
+		let t = e?.location, n = /^(.*?)\/d\/([^/?#]+)/.exec(t?.pathname ?? "");
+		return {
+			prefix: n?.[1] ?? "",
+			uid: n ? decodeURIComponent(n[2]) : void 0,
+			params: new URLSearchParams(t?.search ?? "")
+		};
+	} catch {
+		return {
+			prefix: "",
+			params: new URLSearchParams()
+		};
+	}
+}
+function D(e, t) {
+	if (!e.dashboard) return T(e.href);
+	let n = E(t), r = e.dashboard.indexOf("?"), i = r < 0 ? e.dashboard : e.dashboard.slice(0, r), a = new URLSearchParams(r < 0 ? "" : e.dashboard.slice(r + 1));
+	for (let [t, n] of Object.entries(e.vars ?? {})) {
+		if (n == null) continue;
+		let e = t.startsWith("var-") ? t : `var-${t}`;
+		a.delete(e);
+		for (let t of Array.isArray(n) ? n : [n]) a.append(e, String(t));
+	}
+	for (let e of ["from", "to"]) {
+		let t = n.params.get(e);
+		t !== null && !a.has(e) && a.set(e, t);
+	}
+	if (e.back && n.uid) {
+		let e = new URLSearchParams([...n.params].filter(([e]) => e.startsWith("var-"))).toString();
+		a.set("var-back", e ? `${n.uid}?${e}` : n.uid);
+	}
+	let o = a.toString();
+	return `${n.prefix}/d/${i}${o ? `?${o}` : ""}`;
+}
+var O = /* @__PURE__ */ new WeakMap();
+function k(e) {
+	e && !O.has(e) && e.System?.import && (O.set(e, null), e.System.import("@grafana/runtime").then((t) => O.set(e, t), () => {}));
+}
+function A(e, t, n) {
+	if (!e || n.defaultPrevented || n.button !== 0 || n.metaKey || n.ctrlKey || n.shiftKey || n.altKey) return;
+	let r = O.get(e)?.locationService;
+	if (!r) return;
+	let i = new URL(t, e.location.href);
+	if (i.origin !== e.location.origin) return;
+	let { prefix: a } = E(e), o = a && i.pathname.startsWith(a) ? i.pathname.slice(a.length) : i.pathname;
+	n.preventDefault(), r.push(o + i.search + i.hash);
+}
+var j = class extends s {
+	static properties = {
+		data: {
+			attribute: "data",
+			converter: a
+		},
+		dashboard: {},
+		href: {},
+		vars: { converter: a },
+		text: {},
+		icon: {},
+		back: { type: Boolean }
+	};
+	static styles = [r, n`
+      :host {
+        display: inline;
+      }
+      /* One line: a long name ends in an ellipsis with the full text on hover.
+         A table caps links with --kd-link-max, since 100% means nothing to an
+         auto-layout column. */
+      a,
+      span.link {
+        display: inline-flex;
+        align-items: baseline;
+        max-width: var(--kd-link-max, 100%);
+        min-width: 0;
+        vertical-align: bottom;
+      }
+      .text {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      a {
+        color: var(--kd-link, inherit);
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+      .icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+        vertical-align: -3px;
+      }
+    `];
+	get link() {
+		let e = this.data ?? {};
+		return {
+			dashboard: e.dashboard ?? this.dashboard,
+			href: e.href ?? this.href,
+			vars: e.vars ?? this.vars,
+			text: e.text ?? this.text,
+			icon: e.icon ?? this.icon,
+			title: e.title,
+			back: e.back ?? this.back
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), k(this.ownerDocument?.defaultView);
+	}
+	#e = () => this.requestUpdate();
+	#t = (e) => {
+		let t = this.ownerDocument?.defaultView, n = D(this.link, t);
+		n !== void 0 && (e.currentTarget.setAttribute("href", n), A(t, n, e));
+	};
+	render() {
+		let e = this.link, n = D(e, this.ownerDocument?.defaultView), r = t`${w(e.icon)}<span class="text" title=${d(e.text)}
+      ><slot>${e.text ?? ""}</slot></span
+    >`, i = e.title ?? e.text;
+		return n === void 0 ? t`<span class="link" title=${d(i)}>${r}</span>` : t`<a
+      href=${n}
+      title=${d(i)}
+      @click=${this.#t}
+      @mouseenter=${this.#e}
+      @focus=${this.#e}
+      >${r}</a
+    >`;
+	}
+};
+c("kd-link", j);
+//#endregion
+//#region src/kd/elements/pill.ts
+var M = class extends s {
+	static properties = { tone: {} };
+	static styles = [
+		r,
+		C,
+		n`
+      :host {
+        display: inline-block;
+        margin: 1px 4px 1px 0;
+        vertical-align: baseline;
+      }
+      span {
+        display: inline-block;
+        padding: 0 8px;
+        border: 1px solid var(--tone-line);
+        border-radius: 10px;
+        background: color-mix(in srgb, var(--tone) 14%, transparent);
+        color: var(--tone-ink);
+        font-size: 11px;
+        line-height: 18px;
+        white-space: nowrap;
+      }
+    `
+	];
+	render() {
+		return t`<span class=${S(this.tone)}><slot></slot></span>`;
+	}
+};
+c("kd-pill", M);
+//#endregion
+//#region src/kd/cell.ts
+function N(e) {
+	return e == null || e === "" || Array.isArray(e) && e.every(N);
+}
+function P(e) {
+	return e == null ? i : Array.isArray(e) ? t`<span class="cells">${e.filter((e) => !N(e)).map((e) => t`<span>${P(e)}</span>`)}</span>` : typeof e == "object" ? "dashboard" in e || "href" in e ? t`<kd-link .data=${e}></kd-link>` : "data" in e ? t`<kd-data .data=${e.data}></kd-data>` : "code" in e ? t`<code>${String(e.code)}</code>` : "text" in e ? t`<kd-pill tone=${d(e.tone)} title=${d(e.title)}>${String(e.text)}</kd-pill>` : t`<kd-data .data=${e}></kd-data>` : String(e);
+}
+var F = n`
+  .cells {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 2px 6px;
+  }
+  code {
+    font-family: var(--kd-font-mono, monospace);
+    font-size: 12px;
+    overflow-wrap: anywhere;
+  }
+`, I = class extends s {
+	static properties = { data: {
+		attribute: "data",
+		converter: a
+	} };
+	static styles = [
+		r,
+		F,
+		n`
+      .bar {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 8px 16px;
+        padding: 0 4px;
+      }
+      img.icon {
+        width: 42px;
+        height: 42px;
+      }
+      span.icon {
+        font-size: 34px;
+        line-height: 1;
+      }
+      .eyebrow {
+        color: var(--kd-text-2, inherit);
+        font-size: 11px;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+      }
+      .title {
+        font-size: 22px;
+        font-weight: 500;
+        line-height: 1.2;
+        overflow-wrap: anywhere;
+      }
+      .grow {
+        flex: 1;
+      }
+      .chain {
+        font-size: 13px;
+      }
+      .sep {
+        margin: 0 6px;
+        color: var(--kd-text-dim, inherit);
+      }
+    `
+	];
+	render() {
+		let e = this.data;
+		if (!e) return i;
+		let n = (e.chips ?? []).filter((e) => !N(e)), r = (e.chain ?? []).filter((e) => !N(e));
+		return t`<div class="bar">
+      ${w(e.icon)}
+      <div class="id">
+        ${N(e.eyebrow) ? i : t`<div class="eyebrow">${P(e.eyebrow)}</div>`}
+        <div class="title">${e.title ?? ""}</div>
+      </div>
+      ${n.length ? t`<div class="chips">${n.map((e) => P(e))}</div>` : i}
+      <div class="grow"></div>
+      ${r.length ? t`<nav class="chain">
+            ${r.map((e, n) => t`${n ? t`<span class="sep">›</span>` : i}${P(e)}`)}
+          </nav>` : i}
+    </div>`;
+	}
+};
+c("kd-bar", I);
+//#endregion
+//#region src/kd/elements/groups.ts
+function le(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let [n, r] of Object.entries(e)) {
+		let e = n.indexOf("/"), i = e < 0 ? "" : n.slice(0, e), a = r == null ? "" : typeof r == "string" ? r : JSON.stringify(r), o = t.get(i);
+		o || t.set(i, o = {
+			prefix: i,
+			entries: []
+		}), o.entries.push({
+			key: n,
+			name: n.slice(e + 1),
+			value: a
+		});
+	}
+	return [...t.values()].sort((e, t) => e.prefix < t.prefix ? -1 : +(e.prefix > t.prefix));
+}
+function L(e) {
+	if (/^\s*[[{]/.test(e)) try {
+		let t = JSON.parse(e);
+		return typeof t == "object" && t ? t : void 0;
+	} catch {
+		return;
+	}
+}
+var R = 600, z = class extends s {
+	static properties = {
+		data: {
+			attribute: "data",
+			converter: a
+		},
+		mode: {}
+	};
+	static styles = [r, n`
+      .group + .group {
+        margin-top: 12px;
+      }
+      div.head,
+      tr.head td {
+        padding-bottom: 3px;
+        border-bottom: 1px solid var(--kd-border, transparent);
+        color: var(--kd-text-2, inherit);
+        font-family: var(--kd-font-mono, monospace);
+        font-size: 11px;
+      }
+      div.head {
+        margin-bottom: 6px;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 13px;
+      }
+      td {
+        padding: 2px 12px 2px 0;
+        vertical-align: top;
+      }
+      tr.head td {
+        padding-top: 12px;
+      }
+      tr.head:first-child td {
+        padding-top: 0;
+      }
+      tr.head + tr td {
+        padding-top: 6px;
+      }
+      .k {
+        white-space: nowrap;
+      }
+      code {
+        font-family: var(--kd-font-mono, monospace);
+        font-size: 12px;
+      }
+      .twig {
+        margin: 0 8px 0 4px;
+        color: var(--kd-text-dim, inherit);
+        font-family: var(--kd-font-mono, monospace);
+      }
+      .v {
+        width: 100%;
+        color: color-mix(in srgb, var(--kd-success, currentColor) 70%, var(--kd-text, currentColor));
+        font-family: var(--kd-font-mono, monospace);
+        font-size: 12px;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+      }
+      .none {
+        padding: 8px 0;
+        color: var(--kd-text-dim, inherit);
+      }
+    `];
+	render() {
+		let e = this.data;
+		if (!e || typeof e != "object") return i;
+		let n = le(e);
+		return n.length ? this.mode === "tree" ? this.#t(n) : this.#e(n) : t`<div class="none">none</div>`;
+	}
+	#e(e) {
+		return e.map((e) => t`<div class="group">
+        ${e.prefix ? t`<div class="head">${e.prefix}</div>` : i}
+        <div>
+          ${e.entries.map((e) => t`<kd-pill tone="info" title=${e.key}>${e.value === "" ? e.name : `${e.name}=${e.value}`}</kd-pill>`)}
+        </div>
+      </div>`);
+	}
+	#t(e) {
+		return t`<table>
+      <tbody>
+        ${e.map((e) => t`${e.prefix ? t`<tr class="head"><td colspan="2">${e.prefix}</td></tr>` : i}
+          ${e.entries.map((n, r) => {
+			let a = L(n.value);
+			return t`<tr>
+              <td class="k">
+                ${e.prefix ? t`<span class="twig">${r === e.entries.length - 1 ? "└" : "├"}</span>` : i}<code
+                  >${n.name}</code
+                >
+              </td>
+              <td class="v">
+                ${a ? t`<kd-data .data=${a}></kd-data>` : n.value.length > R ? `${n.value.slice(0, R)} …` : n.value}
+              </td>
+            </tr>`;
+		})}`)}
+      </tbody>
+    </table>`;
+	}
+};
+c("kd-groups", z);
+//#endregion
+//#region src/kd/elements/mask.ts
+var B = class extends s {
+	static properties = {
+		value: {},
+		shown: { state: !0 }
+	};
+	static styles = [r, n`
+      :host {
+        display: inline-block;
+      }
+      button {
+        padding: 0;
+        border: none;
+        background: none;
+        color: inherit;
+        font: inherit;
+        cursor: pointer;
+      }
+      .dots {
+        color: var(--kd-text-2, inherit);
+        letter-spacing: 0.1em;
+      }
+      code {
+        font-family: var(--kd-font-mono, monospace);
+        font-size: 12px;
+        overflow-wrap: anywhere;
+        white-space: pre-wrap;
+        user-select: all;
+      }
+      .hide {
+        margin-left: 6px;
+        color: var(--kd-text-dim, inherit);
+      }
+    `];
+	constructor() {
+		super(), this.shown = !1;
+	}
+	willUpdate(e) {
+		e.has("value") && e.get("value") !== void 0 && (this.shown = !1);
+	}
+	render() {
+		return this.shown ? t`<code>${this.value ?? ""}</code
+      ><button type="button" class="hide" aria-label="hide" @click=${() => this.shown = !1}>×</button>` : t`<button type="button" aria-label="show" @click=${() => this.shown = !0}>
+        <span class="dots">••••••••</span>
+      </button>`;
+	}
+};
+c("kd-mask", B);
+//#endregion
+//#region node_modules/lit-html/directive.js
+var V = {
+	ATTRIBUTE: 1,
+	CHILD: 2,
+	PROPERTY: 3,
+	BOOLEAN_ATTRIBUTE: 4,
+	EVENT: 5,
+	ELEMENT: 6
+}, H = (e) => (...t) => ({
+	_$litDirective$: e,
+	values: t
+}), U = class {
+	constructor(e) {}
+	get _$AU() {
+		return this._$AM._$AU;
+	}
+	_$AT(e, t, n) {
+		this._$Ct = e, this._$AM = t, this._$Ci = n;
+	}
+	_$AS(e, t) {
+		return this.update(e, t);
+	}
+	update(e, t) {
+		return this.render(...t);
+	}
+}, W = "important", ue = " !" + W, G = H(class extends U {
+	constructor(e) {
+		if (super(e), e.type !== V.ATTRIBUTE || e.name !== "style" || e.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
+	}
+	render(e) {
+		return Object.keys(e).reduce((t, n) => {
+			let r = e[n];
+			return r == null ? t : t + `${n = n.includes("-") ? n : n.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${r};`;
+		}, "");
+	}
+	update(e, [t]) {
+		let { style: n } = e.element;
+		if (this.ft === void 0) return this.ft = new Set(Object.keys(t)), this.render(t);
+		for (let e of this.ft) t[e] ?? (this.ft.delete(e), e.includes("-") ? n.removeProperty(e) : n[e] = null);
+		for (let e in t) {
+			let r = t[e];
+			if (r != null) {
+				this.ft.add(e);
+				let t = typeof r == "string" && r.endsWith(ue);
+				e.includes("-") || t ? n.setProperty(e, t ? r.slice(0, -11) : r, t ? W : "") : n[e] = r;
+			}
+		}
+		return o;
+	}
+}), K = (e) => new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(e), q = class extends s {
+	static properties = { data: {
+		attribute: "data",
+		converter: a
+	} };
+	static styles = [
+		r,
+		C,
+		n`
+      .track {
+        position: relative;
+        height: 8px;
+        margin: 6px 0;
+        border-radius: 4px;
+        background: color-mix(in srgb, var(--kd-border-strong, currentColor) 35%, transparent);
+      }
+      .fill {
+        height: 100%;
+        border-radius: 4px;
+        background: var(--tone);
+      }
+      .mark {
+        position: absolute;
+        top: -3px;
+        bottom: -3px;
+        width: 2px;
+        background: var(--tone);
+        box-shadow: 0 0 0 1px var(--kd-bg, transparent);
+      }
+      .legend {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px 20px;
+        font-size: 12px;
+      }
+      .value {
+        font-family: var(--kd-font-mono, monospace);
+        font-size: 14px;
+      }
+      .legend .mark-label {
+        color: var(--kd-text-2, inherit);
+      }
+      .legend .num {
+        color: var(--tone-ink);
+        font-family: var(--kd-font-mono, monospace);
+      }
+      .none {
+        color: var(--kd-text-dim, inherit);
+      }
+    `
+	];
+	render() {
+		let e = this.data;
+		if (!e || typeof e != "object") return i;
+		let n = typeof e.value == "number" && Number.isFinite(e.value) ? e.value : void 0, r = (e.marks ?? []).filter((e) => e && Number.isFinite(e.value)), a = e.unit ?? "", o = Math.max(n ?? 0, ...r.map((e) => e.value)), s = typeof e.max == "number" && e.max > 0 ? e.max : o > 0 ? o : 1, c = (e) => Math.min(1, Math.max(0, e)), l = (e) => `${Math.min(100, Math.max(0, e / s * 100))}%`, u = S((n === void 0 ? [] : r.filter((e) => e.tone && n >= e.value)).sort((e, t) => t.value - e.value)[0]?.tone, "primary");
+		return t`<div
+      role="meter"
+      aria-valuemin="0"
+      aria-valuemax=${s}
+      aria-valuenow=${n ?? i}
+    >
+      <div class="track">
+        ${n === void 0 ? i : t`<div class="fill ${u}" style=${G({ width: l(n) })}></div>`}
+        ${r.map((e) => t`<div
+              class="mark ${S(e.tone)}"
+              style=${G({ left: `calc(${l(e.value)} - ${c(e.value / s) * 2}px)` })}
+              title="${e.label} ${K(e.value)}${a}"
+            ></div>`)}
+      </div>
+      <div class="legend">
+        <span class="value ${n === void 0 ? "none" : ""}">${n === void 0 ? "–" : `${K(n)}${a}`}</span>
+        ${r.map((e) => t`<span class=${S(e.tone)}
+              ><span class="mark-label">${e.label}</span> <span class="num">${K(e.value)}${a}</span></span
+            >`)}
+      </div>
+    </div>`;
+	}
+};
+c("kd-meter", q);
+//#endregion
+//#region src/kd/elements/sheet.ts
+var J = class extends s {
+	static properties = { data: {
+		attribute: "data",
+		converter: a
+	} };
+	static styles = [
+		r,
+		F,
+		n`
+      dl {
+        display: grid;
+        grid-template-columns: max-content minmax(0, 1fr);
+        margin: 0;
+        font-size: 13px;
+      }
+      dt,
+      dd {
+        margin: 0;
+        padding: 5px 12px 5px 0;
+        border-bottom: 1px solid var(--kd-border, transparent);
+      }
+      dt {
+        color: var(--kd-text-2, inherit);
+      }
+      dd {
+        overflow-wrap: anywhere;
+      }
+    `
+	];
+	render() {
+		let e = this.data;
+		if (!e || typeof e != "object") return i;
+		let n = Array.isArray(e) ? e : Object.entries(e).map(([e, t]) => ({
+			key: e,
+			value: t
+		}));
+		return t`<dl>
+      ${n.filter((e) => e && !N(e.value)).map((e) => t`<dt>${e.key}</dt><dd>${P(e.value)}</dd>`)}
+    </dl>`;
+	}
+};
+c("kd-sheet", J);
+//#endregion
+//#region src/kd/elements/steps.ts
+var de = {
+	done: "success",
+	active: "primary",
+	failed: "error",
+	pending: "neutral"
+};
+function fe(e, t) {
+	return e === "success" ? "✓" : e === "error" ? "✗" : e === "warning" ? "!" : String(t);
+}
+var Y = class extends s {
+	static properties = { data: {
+		attribute: "data",
+		converter: a
+	} };
+	static styles = [
+		r,
+		C,
+		n`
+      ol {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      li {
+        position: relative;
+        flex: 1;
+        min-width: 0;
+        text-align: center;
+      }
+      li + li::before {
+        content: '';
+        position: absolute;
+        top: 12px;
+        right: 50%;
+        width: 100%;
+        height: 2px;
+        background: var(--kd-border-strong, currentColor);
+        opacity: 0.6;
+      }
+      li.reached::before {
+        background: var(--tone);
+        opacity: 1;
+      }
+      .dot {
+        position: relative;
+        z-index: 1;
+        width: 26px;
+        height: 26px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background: var(--tone);
+        color: var(--kd-bg, inherit);
+        font-size: 13px;
+        font-weight: 700;
+        line-height: 26px;
+      }
+      .neutral .dot {
+        border: 2px solid var(--tone-line);
+        background: var(--kd-bg, transparent);
+        color: var(--kd-text-2, inherit);
+        line-height: 22px;
+      }
+      .active .dot {
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 30%, transparent);
+      }
+      .label {
+        margin-top: 4px;
+        font-size: 12px;
+      }
+      .time,
+      .detail {
+        color: var(--kd-text-2, inherit);
+        font-size: 11px;
+      }
+      .detail {
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow-wrap: anywhere;
+      }
+    `
+	];
+	render() {
+		let e = Array.isArray(this.data) ? this.data : [];
+		return e.length ? t`<ol>
+      ${e.map((e, n) => {
+			let r = S(de[e.status] ?? e.status), a = `${r}${e.status === "done" || e.status === "success" ? " reached" : ""}${e.status === "active" ? " active" : ""}`;
+			return t`<li class=${a} title=${d(e.detail)}>
+          <div class="dot">${fe(r, n + 1)}</div>
+          <div class="label">${e.label}</div>
+          ${e.time ? t`<div class="time">${e.time}</div>` : i}
+          ${e.detail ? t`<div class="detail">${e.detail}</div>` : i}
+        </li>`;
+		})}
+    </ol>` : i;
+	}
+};
+c("kd-steps", Y);
+//#endregion
+//#region src/kd/elements/table.ts
+var X = class extends s {
+	static properties = {
+		data: {
+			attribute: "data",
+			converter: a
+		},
+		empty: {}
+	};
+	static styles = [
+		r,
+		F,
+		n`
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 13px;
+      }
+      th,
+      td {
+        padding: 6px 12px 6px 0;
+        border-bottom: 1px solid var(--kd-border, transparent);
+        text-align: left;
+        vertical-align: top;
+      }
+      th {
+        color: var(--kd-text-2, inherit);
+        font-size: 10px;
+        font-weight: 500;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .center {
+        text-align: center;
+      }
+      .right {
+        text-align: right;
+      }
+      /* Prose breaks anywhere so one hash in a message cannot widen the table;
+         links keep whole words and stop at 40ch with an ellipsis instead. */
+      td {
+        --kd-link-max: 40ch;
+        overflow-wrap: anywhere;
+      }
+      .nowrap {
+        white-space: nowrap;
+      }
+      .nowrap .cells {
+        flex-wrap: nowrap;
+      }
+      .none {
+        padding: 8px 0;
+        color: var(--kd-text-dim, inherit);
+      }
+    `
+	];
+	render() {
+		let e = this.data;
+		if (!e || typeof e != "object") return i;
+		let { columns: n, rows: r = [] } = Array.isArray(e) ? {
+			columns: void 0,
+			rows: e
+		} : e;
+		if (!r.length) return t`<div class="none">${this.empty ?? "none"}</div>`;
+		let a = n ?? [...new Set(r.flatMap((e) => Object.keys(e ?? {})))].map((e) => ({ key: e })), o = (e) => e.align === "right" || e.align === "center" ? e.align : "", s = (e) => [o(e), e.nowrap ? "nowrap" : ""].filter(Boolean).join(" ");
+		return t`<table>
+      <thead>
+        <tr>
+          ${a.map((e) => t`<th class=${o(e)}>${e.label ?? e.key}</th>`)}
+        </tr>
+      </thead>
+      <tbody>
+        ${r.map((e) => t`<tr>
+            ${a.map((n) => t`<td class=${s(n)}>${P(e?.[n.key])}</td>`)}
+          </tr>`)}
+      </tbody>
+    </table>`;
+	}
+};
+c("kd-table", X);
+//#endregion
+//#region src/kd/elements/tabs.ts
+var Z = (e, t) => e.getAttribute("label") || `Tab ${t + 1}`, Q = class extends s {
+	static properties = {
+		selected: {},
+		key: {}
+	};
+	static shadowRootOptions = {
+		...e.shadowRootOptions,
+		slotAssignment: "manual"
+	};
+	static styles = [r, n`
+      [role='tablist'] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0 22px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid var(--kd-border, transparent);
+      }
+      button {
+        margin: 0 0 -1px;
+        padding: 6px 1px;
+        border: none;
+        border-bottom: 2px solid transparent;
+        background: none;
+        color: var(--kd-text-2, inherit);
+        font: inherit;
+        font-size: 13px;
+        cursor: pointer;
+      }
+      button:hover {
+        color: var(--kd-text, inherit);
+      }
+      /* Grafana's own active tab is underlined in this orange. */
+      button[aria-selected='true'] {
+        border-bottom-color: var(--kd-warning, currentColor);
+        color: var(--kd-text, inherit);
+      }
+      .count {
+        margin-left: 2px;
+        color: var(--kd-text-dim, inherit);
+        font-size: 11px;
+      }
+    `];
+	#e;
+	connectedCallback() {
+		super.connectedCallback(), this.#e ??= new MutationObserver(() => this.requestUpdate()), this.#e.observe(this, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: ["label", "count"]
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#e?.disconnect();
+	}
+	get #t() {
+		try {
+			return this.ownerDocument?.defaultView?.sessionStorage ?? void 0;
+		} catch {
+			return;
+		}
+	}
+	willUpdate(e) {
+		if (e.has("key") && this.key) try {
+			let e = this.#t?.getItem(`kd-tabs:${this.key}`);
+			e != null && (this.selected = e);
+		} catch {}
+	}
+	#n() {
+		return [...this.children];
+	}
+	#r(e) {
+		let t = this.selected;
+		if (t == null || t === "") return 0;
+		let n = e.findIndex((e, n) => Z(e, n) === t);
+		if (n >= 0) return n;
+		let r = Number(t);
+		return Number.isInteger(r) && r >= 0 && r < e.length ? r : 0;
+	}
+	#i(e, t) {
+		let n = Z(e[t], t);
+		if (this.key) try {
+			this.#t?.setItem(`kd-tabs:${this.key}`, n);
+		} catch {}
+		n !== this.selected && (this.selected = n, this.dispatchEvent(new CustomEvent("change", {
+			detail: {
+				label: n,
+				index: t
+			},
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	render() {
+		let e = this.#n();
+		if (!e.length) return i;
+		let n = this.#r(e);
+		return t`<div role="tablist">
+        ${e.map((r, a) => {
+			let o = r.getAttribute("count");
+			return t`<button
+            type="button"
+            role="tab"
+            aria-selected=${a === n ? "true" : "false"}
+            @click=${() => this.#i(e, a)}
+          >
+            ${Z(r, a)}${o ? t`<span class="count">${o}</span>` : i}
+          </button>`;
+		})}
+      </div>
+      ${e.map((e, r) => t`<div role="tabpanel" ?hidden=${r !== n}><slot></slot></div>`)}`;
+	}
+	updated() {
+		let e = this.renderRoot.querySelectorAll("slot");
+		this.#n().forEach((t, n) => e[n]?.assign(t));
+	}
+};
+c("kd-tabs", Q);
+//#endregion
+//#region src/kd/elements/tile.ts
+var $ = class extends s {
+	static properties = {
+		icon: {},
+		label: {},
+		href: {}
+	};
+	static styles = [r, n`
+      a,
+      div {
+        display: block;
+        padding-top: 6px;
+        color: inherit;
+        text-align: center;
+        text-decoration: none;
+      }
+      .icon {
+        display: block;
+        height: 30px;
+        margin: 0 auto;
+        font-size: 30px;
+        line-height: 1;
+      }
+      .label {
+        display: block;
+        margin-top: 6px;
+        color: var(--kd-text-2, inherit);
+        font-size: 12px;
+      }
+    `];
+	render() {
+		let e = t`${w(this.icon)}<span class="label">${this.label ?? ""}</span>`, n = T(this.href);
+		if (!n) return t`<div>${e}</div>`;
+		let r = /^https?:/i.test(n);
+		return t`<a
+      href=${n}
+      target=${d(r ? "_blank" : void 0)}
+      rel=${d(r ? "noopener" : void 0)}
+      >${e}</a
+    >`;
+	}
+};
+c("kd-tile", $);
+//#endregion
+export { b as C, u as E, m as S, l as T, w as _, J as a, C as b, z as c, F as d, N as f, D as g, j as h, Y as i, L as l, M as m, Q as n, q as o, P as p, X as r, B as s, $ as t, I as u, T as v, y as w, x, S as y };
+
+//# sourceMappingURL=kd-Bbw0GeQ5.js.map