@nonoun/native-tokens 0.4.2 → 0.5.1

package/dist/native-tokens.js

@@ -1,5 +1,5 @@
-import { NButton as e, NIcon as t, NListbox as n, NOption as r, NRange as i, NSelect as a, NativeElement as o, define as s, uid as c } from "@nonoun/native-ui";
-var l = class extends o {
+import { NButton as e, NIcon as t, NListbox as n, NOption as r, NRange as i, NSelect as a, NativeElement as o, define as s, registerIcon as c, uid as l } from "@nonoun/native-ui";
+var u = class extends o {
 	static observedAttributes = ["data"];
 	#e = null;
 	#t = null;
@@ -62,7 +62,7 @@ var l = class extends o {
 			}));
 		})), this.#t = r, this.#n = s, t.append(n, r, s), this.appendChild(t);
 	}
-}, u = class extends o {
+}, d = class extends o {
 	static observedAttributes = ["data"];
 	#e = [];
 	attributeChangedCallback(e, t, n) {
@@ -105,7 +105,7 @@ var l = class extends o {
 	}
 };
 /** Parse a computed `rgb(...)` / `rgba(...)` string into [r, g, b, a] (0–255, 0–1). */
-function d(e) {
+function f(e) {
 	let t = e.match(/[\d.]+/g);
 	return !t || t.length < 3 ? [
 		0,
@@ -120,7 +120,7 @@ function d(e) {
 	];
 }
 /** Relative luminance (ITU-R BT.709). Returns true if light. */
-function f(e, t, n) {
+function p(e, t, n) {
 	let r = [
 		e,
 		t,
@@ -129,16 +129,16 @@ function f(e, t, n) {
 	return .2126 * r[0] + .7152 * r[1] + .0722 * r[2] > .4;
 }
 /** Convert 0–255 component to 2-digit hex. */
-function p(e) {
+function m(e) {
 	return Math.round(e).toString(16).padStart(2, "0");
 }
 /** sRGB → linear. */
-function m(e) {
+function h(e) {
 	return e /= 255, e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4;
 }
 /** sRGB (0–255) → OKLCH via OKLab. Returns [L (0–1), C, H (degrees)]. */
-function h(e, t, n) {
-	let r = m(e), i = m(t), a = m(n), o = .4122214708 * r + .5363325363 * i + .0514459929 * a, s = .2119034982 * r + .6806995451 * i + .1073969566 * a, c = .0883024619 * r + .2817188376 * i + .6299787005 * a, l = Math.cbrt(o), u = Math.cbrt(s), d = Math.cbrt(c), f = .2104542553 * l + .793617785 * u - .0040720468 * d, p = 1.9779984951 * l - 2.428592205 * u + .4505937099 * d, h = .0259040371 * l + .7827717662 * u - .808675766 * d, g = Math.sqrt(p * p + h * h), _ = Math.atan2(h, p) * (180 / Math.PI);
+function g(e, t, n) {
+	let r = h(e), i = h(t), a = h(n), o = .4122214708 * r + .5363325363 * i + .0514459929 * a, s = .2119034982 * r + .6806995451 * i + .1073969566 * a, c = .0883024619 * r + .2817188376 * i + .6299787005 * a, l = Math.cbrt(o), u = Math.cbrt(s), d = Math.cbrt(c), f = .2104542553 * l + .793617785 * u - .0040720468 * d, p = 1.9779984951 * l - 2.428592205 * u + .4505937099 * d, m = .0259040371 * l + .7827717662 * u - .808675766 * d, g = Math.sqrt(p * p + m * m), _ = Math.atan2(m, p) * (180 / Math.PI);
 	return _ < 0 && (_ += 360), [
 		f,
 		g,
@@ -146,7 +146,7 @@ function h(e, t, n) {
 	];
 }
 /** sRGB (0–255) → HSL. Returns [H (0–360), S (0–100), L (0–100)]. */
-function g(e, t, n) {
+function _(e, t, n) {
 	e /= 255, t /= 255, n /= 255;
 	let r = Math.max(e, t, n), i = Math.min(e, t, n), a = r - i, o = (r + i) / 2;
 	if (a === 0) return [
@@ -162,7 +162,7 @@ function g(e, t, n) {
 	];
 }
 /** sRGB (0–255) → HSB/HSV. Returns [H (0–360), S (0–100), B (0–100)]. */
-function _(e, t, n) {
+function v(e, t, n) {
 	e /= 255, t /= 255, n /= 255;
 	let r = Math.max(e, t, n), i = r - Math.min(e, t, n), a = r * 100;
 	if (r === 0) return [
@@ -177,47 +177,47 @@ function _(e, t, n) {
 		a
 	];
 }
-function v(e, t, n, r) {
-	let [i, a, o] = h(e, t, n), s = `oklch(${(i * 100).toFixed(1)}% ${a.toFixed(4)} ${o.toFixed(1)})`;
-	return r < 1 ? `oklch(${(i * 100).toFixed(1)}% ${a.toFixed(4)} ${o.toFixed(1)} / ${r.toFixed(2)})` : s;
-}
 function y(e, t, n, r) {
-	let i = `#${p(e)}${p(t)}${p(n)}`;
-	return r < 1 ? `${i}${p(Math.round(r * 255))}` : i;
+	let [i, a, o] = g(e, t, n), s = `oklch(${(i * 100).toFixed(1)}% ${a.toFixed(4)} ${o.toFixed(1)})`;
+	return r < 1 ? `oklch(${(i * 100).toFixed(1)}% ${a.toFixed(4)} ${o.toFixed(1)} / ${r.toFixed(2)})` : s;
 }
 function b(e, t, n, r) {
-	return r < 1 ? `rgba(${Math.round(e)}, ${Math.round(t)}, ${Math.round(n)}, ${r.toFixed(2)})` : `rgb(${Math.round(e)}, ${Math.round(t)}, ${Math.round(n)})`;
+	let i = `#${m(e)}${m(t)}${m(n)}`;
+	return r < 1 ? `${i}${m(Math.round(r * 255))}` : i;
 }
 function x(e, t, n, r) {
-	let [i, a, o] = g(e, t, n);
-	return r < 1 ? `hsla(${i.toFixed(0)}, ${a.toFixed(1)}%, ${o.toFixed(1)}%, ${r.toFixed(2)})` : `hsl(${i.toFixed(0)}, ${a.toFixed(1)}%, ${o.toFixed(1)}%)`;
+	return r < 1 ? `rgba(${Math.round(e)}, ${Math.round(t)}, ${Math.round(n)}, ${r.toFixed(2)})` : `rgb(${Math.round(e)}, ${Math.round(t)}, ${Math.round(n)})`;
 }
 function S(e, t, n, r) {
 	let [i, a, o] = _(e, t, n);
+	return r < 1 ? `hsla(${i.toFixed(0)}, ${a.toFixed(1)}%, ${o.toFixed(1)}%, ${r.toFixed(2)})` : `hsl(${i.toFixed(0)}, ${a.toFixed(1)}%, ${o.toFixed(1)}%)`;
+}
+function C(e, t, n, r) {
+	let [i, a, o] = v(e, t, n);
 	return `hsb(${i.toFixed(0)}, ${a.toFixed(1)}%, ${o.toFixed(1)}%)`;
 }
-var C = [
+var w = [
 	{
 		label: "OKLCH",
-		fn: v
+		fn: y
 	},
 	{
 		label: "HEX",
-		fn: y
+		fn: b
 	},
 	{
 		label: "RGB",
-		fn: b
+		fn: x
 	},
 	{
 		label: "HSL",
-		fn: x
+		fn: S
 	},
 	{
 		label: "HSB",
-		fn: S
+		fn: C
 	}
-], w = class extends o {
+], T = class extends o {
 	static observedAttributes = ["token", "name"];
 	#e = null;
 	#t = null;
@@ -240,7 +240,7 @@ var C = [
 	setup() {
 		super.setup(), this.token && (this.style.background = `var(${this.token})`, this.title = `${this.name}\n${this.token}`);
 		let e = document.createElement("span");
-		e.className = "native-tokens-swatch-label", e.textContent = this.name, this.#t = e, this.appendChild(e), this.#n = c("swatch"), this.style.setProperty("anchor-name", `--${this.#n}`);
+		e.className = "native-tokens-swatch-label", e.textContent = this.name, this.#t = e, this.appendChild(e), this.#n = l("swatch"), this.style.setProperty("anchor-name", `--${this.#n}`);
 		let t = document.createElement("div");
 		t.className = "native-tokens-swatch-popover", t.setAttribute("popover", "auto"), t.style.setProperty("position-anchor", `--${this.#n}`), this.#e = t, this.appendChild(t), this.addEventListener("click", this.#i), this.addEventListener("native-tokens-change", this.#r), this.addEventListener("native-tokens-theme-change", this.#r), requestAnimationFrame(() => this.#a());
 	}
@@ -263,15 +263,15 @@ var C = [
 		}
 	};
 	#a() {
-		let e = getComputedStyle(this).backgroundColor, [t, n, r] = d(e);
-		this.#t && (this.#t.style.color = f(t, n, r) ? "rgba(0,0,0,0.55)" : "rgba(255,255,255,0.7)");
+		let e = getComputedStyle(this).backgroundColor, [t, n, r] = f(e);
+		this.#t && (this.#t.style.color = p(t, n, r) ? "rgba(0,0,0,0.55)" : "rgba(255,255,255,0.7)");
 	}
 	#o() {
 		if (!this.#e) return;
 		this.#e.innerHTML = "";
-		let e = getComputedStyle(this).backgroundColor, [t, n, r, i] = d(e), a = document.createElement("div");
+		let e = getComputedStyle(this).backgroundColor, [t, n, r, i] = f(e), a = document.createElement("div");
 		a.className = "native-tokens-swatch-popover-header", a.textContent = this.token, this.#e.appendChild(a);
-		for (let e of C) {
+		for (let e of w) {
 			let a = e.fn(t, n, r, i), o = document.createElement("button");
 			o.className = "native-tokens-swatch-popover-row", o.type = "button";
 			let s = document.createElement("span");
@@ -286,7 +286,7 @@ var C = [
 			}), this.#e.appendChild(o);
 		}
 	}
-}, T = /* @__PURE__ */ "n-env-lightness-min.n-env-lightness-max.n-env-lightness-delta.n-env-chroma.n-env-chroma-k-muted.n-env-chroma-k-vivid.n-env-chroma-k-edge.n-env-alpha.n-env-alpha-delta.n-env-hue-neutral.n-env-chroma-neutral.n-env-lightness-neutral.n-env-hue-accent.n-env-chroma-accent.n-env-lightness-accent.n-env-hue-info.n-env-chroma-info.n-env-lightness-info.n-env-hue-success.n-env-chroma-success.n-env-lightness-success.n-env-hue-warning.n-env-chroma-warning.n-env-lightness-warning.n-env-hue-danger.n-env-chroma-danger.n-env-lightness-danger".split("."), E = class extends o {
+}, E = /* @__PURE__ */ "n-env-lightness-min.n-env-lightness-max.n-env-lightness-delta.n-env-chroma.n-env-chroma-k-muted.n-env-chroma-k-vivid.n-env-chroma-k-edge.n-env-alpha.n-env-alpha-delta.n-env-hue-neutral.n-env-chroma-neutral.n-env-lightness-neutral.n-env-hue-accent.n-env-chroma-accent.n-env-lightness-accent.n-env-hue-info.n-env-chroma-info.n-env-lightness-info.n-env-hue-success.n-env-chroma-success.n-env-lightness-success.n-env-hue-warning.n-env-chroma-warning.n-env-lightness-warning.n-env-hue-danger.n-env-chroma-danger.n-env-lightness-danger".split("."), D = class extends o {
 	static observedAttributes = ["data"];
 	#e = [];
 	attributeChangedCallback(e, t, n) {
@@ -320,13 +320,15 @@ var C = [
 	}
 	#n(e) {
 		let t = document.documentElement;
-		for (let e of T) t.style.removeProperty("--" + e);
+		for (let e of E) t.style.removeProperty("--" + e);
 		e ? t.setAttribute("theme", e) : t.removeAttribute("theme"), this.dispatchEvent(new CustomEvent("native-tokens-theme-change", {
 			bubbles: !0,
 			detail: { theme: e }
 		}));
 	}
-}, D = [
+};
+/** Available theme presets. */
+const O = [
 	{
 		name: "Default",
 		value: ""
@@ -343,96 +345,103 @@ var C = [
 		name: "Zinc",
 		value: "zinc"
 	}
-], O = [
+], k = [
+	"neutral",
+	"accent",
+	"info",
+	"success",
+	"warning",
+	"danger"
+], A = [{
+	value: "all",
+	label: "All Families"
+}, ...k.map((e) => ({
+	value: e,
+	label: e.charAt(0).toUpperCase() + e.slice(1)
+}))];
+var j = [
 	{
+		type: "variable",
 		name: "L min",
 		token: "--n-env-lightness-min",
 		value: .15,
 		step: .01,
 		min: 0,
-		max: 1,
-		group: "Lightness"
+		max: 1
 	},
 	{
+		type: "variable",
 		name: "L max",
 		token: "--n-env-lightness-max",
 		value: 1,
 		step: .01,
 		min: 0,
-		max: 1,
-		group: "Lightness"
+		max: 1
 	},
 	{
+		type: "variable",
 		name: "L delta",
 		token: "--n-env-lightness-delta",
 		value: .015,
 		step: .005,
 		min: 0,
-		max: .15,
-		group: "Lightness"
+		max: .15
 	},
 	{
+		type: "variable",
 		name: "Chroma",
 		token: "--n-env-chroma",
 		value: .2,
 		step: .005,
 		min: 0,
-		max: .5,
-		group: "Chroma"
+		max: .5
 	},
 	{
+		type: "variable",
 		name: "C muted",
 		token: "--n-env-chroma-k-muted",
 		value: .125,
 		step: .01,
 		min: 0,
-		max: 1,
-		group: "Chroma"
+		max: 1
 	},
 	{
+		type: "variable",
 		name: "C vivid",
 		token: "--n-env-chroma-k-vivid",
 		value: 1,
 		step: .01,
 		min: 0,
-		max: 1,
-		group: "Chroma"
+		max: 1
 	},
 	{
+		type: "variable",
 		name: "C edge",
 		token: "--n-env-chroma-k-edge",
 		value: .05,
 		step: .01,
 		min: 0,
-		max: 1,
-		group: "Chroma"
+		max: 1
 	},
 	{
+		type: "variable",
 		name: "Alpha",
 		token: "--n-env-alpha",
 		value: .85,
 		step: .01,
 		min: 0,
-		max: 1,
-		group: "Alpha"
+		max: 1
 	},
 	{
+		type: "variable",
 		name: "A delta",
 		token: "--n-env-alpha-delta",
 		value: .02,
 		step: .005,
 		min: 0,
-		max: .15,
-		group: "Alpha"
+		max: .15
 	}
-], k = [
-	"neutral",
-	"accent",
-	"info",
-	"success",
-	"warning",
-	"danger"
-], A = [
+], M = [
 	"lowest",
 	"lower",
 	"low",
@@ -440,7 +449,7 @@ var C = [
 	"high",
 	"higher",
 	"highest"
-], j = [
+], N = [
 	"brightest",
 	"brighter",
 	"bright",
@@ -448,7 +457,7 @@ var C = [
 	"dim",
 	"dimmer",
 	"dimmest"
-], M = [
+], P = [
 	"1",
 	"2",
 	"3",
@@ -460,7 +469,7 @@ var C = [
 	"9",
 	"10",
 	"11"
-], N = [
+], F = [
 	"050",
 	"100",
 	"200",
@@ -472,7 +481,7 @@ var C = [
 	"800",
 	"900",
 	"950"
-], P = [
+], I = [
 	"strongest",
 	"stronger",
 	"strong",
@@ -481,21 +490,144 @@ var C = [
 	"weaker",
 	"weakest"
 ];
-function F(e, t) {
+/** Group env params into titled sections by their logical group. */
+function L() {
+	let e = {};
+	for (let t of j) {
+		let n = t.token.startsWith("--n-env-lightness") ? "Lightness" : t.token.startsWith("--n-env-chroma") ? "Chroma" : "Alpha";
+		(e[n] ??= []).push(t);
+	}
+	return Object.entries(e).map(([e, t]) => ({
+		title: e,
+		family: "env",
+		items: t
+	}));
+}
+/** Build the items array for a single color family. */
+function R(e) {
+	return [
+		{
+			type: "variable",
+			name: "Hue",
+			token: `--n-env-hue-${e}`,
+			value: 230,
+			step: 1,
+			min: 0,
+			max: 360
+		},
+		{
+			type: "variable",
+			name: "Chroma",
+			token: `--n-env-chroma-${e}`,
+			value: .5,
+			step: .01,
+			min: 0,
+			max: 1
+		},
+		{
+			type: "variable",
+			name: "Lightness",
+			token: `--n-env-lightness-${e}`,
+			value: .5,
+			step: .01,
+			min: 0,
+			max: 1
+		},
+		{
+			type: "strip",
+			label: "Elevation",
+			colors: M.map((t) => ({
+				name: t,
+				token: `--n-color-${e}-${t}`
+			}))
+		},
+		{
+			type: "strip",
+			label: "Brightness",
+			colors: N.map((t) => ({
+				name: t,
+				token: `--n-color-${e}-${t}`
+			}))
+		},
+		{
+			type: "strip",
+			label: "Solid",
+			colors: P.map((t) => ({
+				name: t,
+				token: `--n-color-${e}-${t}`
+			}))
+		},
+		{
+			type: "strip",
+			label: "Scrim",
+			colors: P.map((t) => ({
+				name: t,
+				token: `--n-color-${e}-${t}-scrim`
+			}))
+		},
+		{
+			type: "strip",
+			label: "Semantic",
+			colors: F.map((t) => ({
+				name: t,
+				token: `--n-color-${e}-${t}`
+			}))
+		},
+		{
+			type: "strip",
+			label: "Semantic Scrim",
+			colors: F.map((t) => ({
+				name: t,
+				token: `--n-color-${e}-${t}-scrim`
+			}))
+		},
+		{
+			type: "strip",
+			label: "Tint",
+			colors: I.map((t) => ({
+				name: t,
+				token: `--n-color-${e}-scrim-tint-${t}`
+			}))
+		},
+		{
+			type: "strip",
+			label: "Shade",
+			colors: I.map((t) => ({
+				name: t,
+				token: `--n-color-${e}-scrim-shade-${t}`
+			}))
+		}
+	];
+}
+/**
+* Returns the default token schema — all env params + all 6 color families
+* with their full ramp of surfaces, solids, semantics, and scrims.
+*
+* Hosts can call this, mutate the result (drop sections, reorder, add custom
+* tokens), and pass the modified schema to `<native-tokens>`.
+*/
+function z() {
+	return { sections: [...L(), ...k.map((e) => ({
+		title: e.charAt(0).toUpperCase() + e.slice(1),
+		family: e,
+		items: R(e)
+	}))] };
+}
+function B(e, t) {
 	let n = document.createElement("div");
 	n.className = "native-tokens-section", t && (n.dataset.family = t);
 	let r = document.createElement("h3");
 	return r.className = "native-tokens-heading", r.textContent = e, n.appendChild(r), n;
 }
-function I(e) {
+function V(e) {
 	let t = document.createElement("h4");
 	return t.className = "native-tokens-subheading", t.textContent = e, t;
 }
-function L(e) {
+function H(e) {
 	let t = document.createElement("native-tokens-colors");
 	return t.setAttribute("data", JSON.stringify(e)), t;
 }
-function R(e) {
+function U(e) {
 	let t = document.createElement("native-tokens-variable");
 	return t.setAttribute("data", JSON.stringify({
 		name: e.name,
@@ -507,101 +639,115 @@ function R(e) {
 		max: e.max
 	})), t;
 }
-function z(e) {
-	let t = document.createElement("div");
-	t.className = "native-tokens-toolbar";
-	let n = document.createElement("native-tokens-themes");
-	n.setAttribute("data", JSON.stringify(D)), t.appendChild(n);
-	let r = [{
-		value: "all",
-		label: "All Families"
-	}, ...k.map((e) => ({
-		value: e,
-		label: e.charAt(0).toUpperCase() + e.slice(1)
-	}))], i = document.createElement("n-select");
-	i.setAttribute("size", "xs"), i.setAttribute("placeholder", "Family..."), i.setAttribute("options", JSON.stringify(r)), i.setAttribute("value", "all"), t.appendChild(i), e.appendChild(t);
-	let a = "", o = null;
-	for (let t of O) t.group !== a && (a = t.group, o = F(t.group, "env"), e.appendChild(o)), o.appendChild(R(t));
-	for (let t of k) {
-		let n = F(t.charAt(0).toUpperCase() + t.slice(1), t);
-		n.appendChild(R({
-			name: "Hue",
-			token: `--n-env-hue-${t}`,
-			value: 230,
-			step: 1,
-			min: 0,
-			max: 360
-		})), n.appendChild(R({
-			name: "Chroma",
-			token: `--n-env-chroma-${t}`,
-			value: .5,
-			step: .01,
-			min: 0,
-			max: 1
-		})), n.appendChild(R({
-			name: "Lightness",
-			token: `--n-env-lightness-${t}`,
-			value: .5,
-			step: .01,
-			min: 0,
-			max: 1
-		})), n.appendChild(I("Elevation")), n.appendChild(L(A.map((e) => ({
-			name: e,
-			token: `--n-color-${t}-${e}`
-		})))), n.appendChild(I("Brightness")), n.appendChild(L(j.map((e) => ({
-			name: e,
-			token: `--n-color-${t}-${e}`
-		})))), n.appendChild(I("Solid")), n.appendChild(L(M.map((e) => ({
-			name: e,
-			token: `--n-color-${t}-${e}`
-		})))), n.appendChild(I("Scrim")), n.appendChild(L(M.map((e) => ({
-			name: e,
-			token: `--n-color-${t}-${e}-scrim`
-		})))), n.appendChild(I("Semantic")), n.appendChild(L(N.map((e) => ({
-			name: e,
-			token: `--n-color-${t}-${e}`
-		})))), n.appendChild(I("Semantic Scrim")), n.appendChild(L(N.map((e) => ({
-			name: e,
-			token: `--n-color-${t}-${e}-scrim`
-		})))), n.appendChild(I("Tint")), n.appendChild(L(P.map((e) => ({
-			name: e,
-			token: `--n-color-${t}-scrim-tint-${e}`
-		})))), n.appendChild(I("Shade")), n.appendChild(L(P.map((e) => ({
-			name: e,
-			token: `--n-color-${t}-scrim-shade-${e}`
-		})))), e.appendChild(n);
-	}
-	i.addEventListener("native:change", ((t) => {
-		let n = t.detail.value, r = e.querySelectorAll(".native-tokens-section[data-family]");
-		for (let e of r) {
-			let t = e.dataset.family;
-			n === "all" || t === "env" ? e.hidden = !1 : e.hidden = t !== n;
-		}
-		requestAnimationFrame(() => {
-			e.querySelectorAll("native-tokens-colors").forEach((e) => e.refresh());
-		});
-	})), e.addEventListener("native-tokens-theme-change", () => {
-		requestAnimationFrame(() => {
-			e.querySelectorAll("native-tokens-variable").forEach((e) => e.sync());
-		});
-	});
+/**
+* Stamps token sections into `container` from the given schema.
+* Falls back to `createDefaultSchema()` when no schema is provided.
+*
+* This is a pure renderer — no header, filter, or theme controls.
+* The host provides those and wires them to the `<native-tokens>` element's
+* `family` attribute and the `native-tokens-theme-change` event.
+*/
+function W(e, t) {
+	let { sections: n } = t ?? z();
+	for (let t of n) {
+		let n = B(t.title, t.family);
+		for (let e of t.items) e.type === "variable" ? n.appendChild(U(e)) : (n.appendChild(V(e.label)), n.appendChild(H(e.colors)));
+		e.appendChild(n);
+	}
 }
 /**
-* Self-contained design system token inspector.
+* Design system token inspector — renders token sections from a schema.
+*
+* - `schema` property — JSON-serializable `TokenSchema` describing what to
+*   render.  Falls back to `createDefaultSchema()` when unset.
+* - `family` attribute — filters visible sections ("all" or a family name).
+* - `native-tokens-theme-change` event (document-level) — syncs variable sliders.
 *
-* Stamps the full color/variable inspector UI on connection.
-* Consumer usage: `<native-tokens></native-tokens>`.
+* Minimal usage (default schema, host provides layout):
+* ```html
+* <native-tokens></native-tokens>
+* ```
 *
-* All `native-tokens-*` sub-elements are registered by the `@nonoun/native-tokens`
-* entry point as a side effect of import.
+* Custom schema (host decides what to show):
+* ```js
+* const el = document.querySelector('native-tokens');
+* el.schema = myCustomSchema;
+* ```
 */
-var B = class extends o {
+var G = class extends o {
+	static observedAttributes = ["family"];
+	#e;
+	/** JSON-serializable schema describing what to render. */
+	get schema() {
+		return this.#e;
+	}
+	set schema(e) {
+		this.#e = e, this.isConnected && this.#t();
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && e === "family" && this.#n(n || "all");
+	}
 	setup() {
-		super.setup(), z(this);
+		super.setup(), W(this, this.#e);
+		let e = this.getAttribute("family");
+		e && this.#n(e), document.addEventListener("native-tokens-theme-change", this.#r);
 	}
 	teardown() {
-		this.innerHTML = "", super.teardown();
+		document.removeEventListener("native-tokens-theme-change", this.#r), this.innerHTML = "", super.teardown();
+	}
+	#t() {
+		this.innerHTML = "", W(this, this.#e);
+		let e = this.getAttribute("family");
+		e && this.#n(e);
+	}
+	#n(e) {
+		let t = this.querySelectorAll(".native-tokens-section[data-family]");
+		for (let n of t) {
+			let t = n.dataset.family;
+			e === "all" || t === "env" ? n.hidden = !1 : n.hidden = t !== e;
+		}
+		requestAnimationFrame(() => {
+			this.querySelectorAll("native-tokens-colors").forEach((e) => e.refresh());
+		});
+	}
+	#r = () => {
+		requestAnimationFrame(() => {
+			this.querySelectorAll("native-tokens-variable").forEach((e) => e.sync());
+		});
+	};
+}, K = class extends o {
+	#e = null;
+	#t;
+	/** Pass-through to the inner `<native-tokens>` schema. */
+	get schema() {
+		return this.#t;
+	}
+	set schema(e) {
+		this.#t = e, this.#e && (this.#e.schema = e);
+	}
+	setup() {
+		super.setup();
+		let e = document.createElement("n-header");
+		e.setAttribute("sticky", "");
+		let t = document.createElement("n-icon");
+		t.setAttribute("name", "palette"), t.setAttribute("slot", "leading"), e.appendChild(t);
+		let n = document.createElement("span");
+		n.setAttribute("slot", "label"), n.textContent = "Design Tokens", e.appendChild(n);
+		let r = document.createElement("div");
+		r.setAttribute("slot", "content");
+		let i = document.createElement("native-tokens-themes");
+		i.setAttribute("data", JSON.stringify(O));
+		let a = document.createElement("n-select");
+		a.setAttribute("size", "xs"), a.setAttribute("placeholder", "Family..."), a.setAttribute("options", JSON.stringify(A)), a.setAttribute("value", "all"), r.append(i, a), e.appendChild(r);
+		let o = document.createElement("n-body"), s = document.createElement("native-tokens");
+		this.#t && (s.schema = this.#t), o.appendChild(s), this.#e = s, this.append(e, o), a.addEventListener("native:change", ((e) => {
+			let t = e.detail.value;
+			s.setAttribute("family", t);
+		}));
+	}
+	teardown() {
+		this.innerHTML = "", this.#e = null, super.teardown();
 	}
 };
-s("native-tokens", B), s("native-tokens-variable", l), s("native-tokens-colors", u), s("native-tokens-color-swatch", w), s("native-tokens-themes", E), s("n-range", i), s("n-select", a), s("n-button", e), s("n-icon", t), s("n-listbox", n), s("n-option", r);
-export { B as NTokens, w as NTokensColorSwatch, u as NTokensColors, E as NTokensThemes, l as NTokensVariable, z as buildTokens };
+s("native-tokens", G), s("native-tokens-variable", u), s("native-tokens-colors", d), s("native-tokens-color-swatch", T), s("native-tokens-themes", D), s("native-tokens-panel", K), s("n-range", i), s("n-select", a), s("n-button", e), s("n-icon", t), s("n-listbox", n), s("n-option", r), c("palette", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M200.77,53.89A103.27,103.27,0,0,0,128,24h-1.07A104,104,0,0,0,24,128c0,43,26.58,79.06,69.36,94.17A32,32,0,0,0,136,192a16,16,0,0,1,16-16h46.21a31.81,31.81,0,0,0,31.2-24.88,104.43,104.43,0,0,0,2.59-24A103.28,103.28,0,0,0,200.77,53.89Zm13,93.71A15.89,15.89,0,0,1,198.21,160H152a32,32,0,0,0-32,32,16,16,0,0,1-21.31,15.07C62.49,194.3,40,164,40,128a88,88,0,0,1,87.09-88h.9a88.35,88.35,0,0,1,88,87.25A88.86,88.86,0,0,1,213.81,147.6ZM140,76a12,12,0,1,1-12-12A12,12,0,0,1,140,76ZM96,100A12,12,0,1,1,84,88,12,12,0,0,1,96,100Zm0,56a12,12,0,1,1-12-12A12,12,0,0,1,96,156Zm88-56a12,12,0,1,1-12-12A12,12,0,0,1,184,100Z\"/></svg>");
+export { G as NTokens, T as NTokensColorSwatch, d as NTokensColors, K as NTokensPanel, D as NTokensThemes, u as NTokensVariable, W as buildTokens, z as createDefaultSchema, k as families, A as familyFilterOptions, O as themes };