@nonoun/nui-tokens 0.2.10

package/dist/build-tokens.d.ts

@@ -0,0 +1,2 @@
+export declare function buildTokens(container: HTMLElement): void;
+//# sourceMappingURL=build-tokens.d.ts.map

package/dist/build-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-tokens.d.ts","sourceRoot":"","sources":["../src/build-tokens.ts"],"names":[],"mappings":"AA0EA,wBAAgB,WAAW,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAgIxD"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { NuiTokensVariable } from './nui-tokens-variable-element.ts';
+import { NuiTokensColors } from './nui-tokens-colors-element.ts';
+import { NuiTokensColorSwatch } from './nui-tokens-color-swatch-element.ts';
+import { NuiTokensThemes } from './nui-tokens-themes-element.ts';
+import { NuiTokens } from './nui-tokens-element.ts';
+import { buildTokens } from './build-tokens.ts';
+export { NuiTokens, NuiTokensVariable, NuiTokensColors, NuiTokensColorSwatch, NuiTokensThemes, buildTokens, };
+export type { NuiTokensVariableData } from './nui-tokens-variable-element.ts';
+export type { NuiTokensColorEntry } from './nui-tokens-colors-element.ts';
+export type { NuiTokensThemeEntry } from './nui-tokens-themes-element.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAsBhD,OAAO,EACL,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,WAAW,GACZ,CAAC;AACF,YAAY,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAC9E,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/nui-tokens-color-swatch-element.d.ts

@@ -0,0 +1,15 @@
+import { UIElement } from '@nonoun/native-ui';
+export declare class NuiTokensColorSwatch extends UIElement {
+    #private;
+    static observedAttributes: string[];
+    get token(): string;
+    set token(val: string);
+    get name(): string;
+    set name(val: string);
+    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
+    setup(): void;
+    teardown(): void;
+    /** Refresh background and contrast from current token value. */
+    refresh(): void;
+}
+//# sourceMappingURL=nui-tokens-color-swatch-element.d.ts.map

package/dist/nui-tokens-color-swatch-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nui-tokens-color-swatch-element.d.ts","sourceRoot":"","sources":["../src/nui-tokens-color-swatch-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAO,MAAM,mBAAmB,CAAC;AA8InD,qBAAa,oBAAqB,SAAQ,SAAS;;IACjD,MAAM,CAAC,kBAAkB,WAAqB;IAM9C,IAAI,KAAK,IAAI,MAAM,CAA6C;IAChE,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAAsC;IAE3D,IAAI,IAAI,IAAI,MAAM,CAA4C;IAC9D,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAAqC;IAEzD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAapF,KAAK,IAAI,IAAI;IAqCb,QAAQ,IAAI,IAAI;IAUhB,gEAAgE;IAChE,OAAO,IAAI,IAAI;CAsEhB"}

package/dist/nui-tokens-colors-element.d.ts

@@ -0,0 +1,14 @@
+import { UIElement } from '@nonoun/native-ui';
+export interface NuiTokensColorEntry {
+    name: string;
+    token: string;
+}
+export declare class NuiTokensColors extends UIElement {
+    #private;
+    static observedAttributes: string[];
+    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
+    setup(): void;
+    teardown(): void;
+    refresh(): void;
+}
+//# sourceMappingURL=nui-tokens-colors-element.d.ts.map

package/dist/nui-tokens-colors-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nui-tokens-colors-element.d.ts","sourceRoot":"","sources":["../src/nui-tokens-colors-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAG9C,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBAAa,eAAgB,SAAQ,SAAS;;IAC5C,MAAM,CAAC,kBAAkB,WAAY;IAIrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IAab,QAAQ,IAAI,IAAI;IAWhB,OAAO,IAAI,IAAI;CAuBhB"}

package/dist/nui-tokens-element.d.ts

@@ -0,0 +1,15 @@
+import { UIElement } from '@nonoun/native-ui';
+/**
+ * Self-contained design system token inspector.
+ *
+ * Stamps the full color/variable inspector UI on connection.
+ * Consumer usage: `<nui-tokens></nui-tokens>`.
+ *
+ * All `nui-tokens-*` sub-elements are registered by the `@nonoun/nui-tokens`
+ * entry point as a side effect of import.
+ */
+export declare class NuiTokens extends UIElement {
+    setup(): void;
+    teardown(): void;
+}
+//# sourceMappingURL=nui-tokens-element.d.ts.map

package/dist/nui-tokens-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nui-tokens-element.d.ts","sourceRoot":"","sources":["../src/nui-tokens-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAG9C;;;;;;;;GAQG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,KAAK,IAAI,IAAI;IAKb,QAAQ,IAAI,IAAI;CAIjB"}

package/dist/nui-tokens-themes-element.d.ts

@@ -0,0 +1,13 @@
+import { UIElement } from '@nonoun/native-ui';
+export interface NuiTokensThemeEntry {
+    name: string;
+    value: string;
+}
+export declare class NuiTokensThemes extends UIElement {
+    #private;
+    static observedAttributes: string[];
+    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
+    setup(): void;
+    teardown(): void;
+}
+//# sourceMappingURL=nui-tokens-themes-element.d.ts.map

package/dist/nui-tokens-themes-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nui-tokens-themes-element.d.ts","sourceRoot":"","sources":["../src/nui-tokens-themes-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAeD,qBAAa,eAAgB,SAAQ,SAAS;;IAC5C,MAAM,CAAC,kBAAkB,WAAY;IAIrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;CA8CjB"}

package/dist/nui-tokens-variable-element.d.ts

@@ -0,0 +1,19 @@
+import { UIElement } from '@nonoun/native-ui';
+export interface NuiTokensVariableData {
+    name: string;
+    type: 'number';
+    token: string;
+    value: number;
+    step?: number;
+    min?: number;
+    max?: number;
+}
+export declare class NuiTokensVariable extends UIElement {
+    #private;
+    static observedAttributes: string[];
+    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
+    setup(): void;
+    teardown(): void;
+    sync(): void;
+}
+//# sourceMappingURL=nui-tokens-variable-element.d.ts.map

package/dist/nui-tokens-variable-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nui-tokens-variable-element.d.ts","sourceRoot":"","sources":["../src/nui-tokens-variable-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,qBAAa,iBAAkB,SAAQ,SAAS;;IAC9C,MAAM,CAAC,kBAAkB,WAAY;IAMrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IAWb,QAAQ,IAAI,IAAI;IAYhB,IAAI,IAAI,IAAI;CA8Db"}

package/dist/nui-tokens.css

@@ -0,0 +1,231 @@
+/* ──────────────────────────────────────────────────────────────────────────────
+   nui-tokens — Design system token inspector styles.
+   Opt-in via: @import '@nonoun/nui-tokens/css';
+   ────────────────────────────────────────────────────────────────────────────── */
+
+@layer ui {
+
+/* ── Toolbar ── */
+
+.nui-tokens-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  gap: 0.5rem;
+  padding-block: 0.5rem;
+  margin-block-end: 0.5rem;
+  background: var(--_ground, var(--_panel));
+}
+
+.nui-tokens-toolbar > * {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── Section Structure ── */
+
+.nui-tokens-section {
+  margin-block-end: 1rem;
+}
+
+.nui-tokens-section[hidden] {
+  display: none;
+}
+
+.nui-tokens-section + .nui-tokens-section:not([hidden]) {
+  padding-block-start: 0.5rem;
+  border-block-start: 1px solid var(--neutral-border-muted);
+}
+
+.nui-tokens-heading {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--neutral-ink-muted);
+  margin: 0 0 0.5rem;
+}
+
+.nui-tokens-subheading {
+  font-size: 0.625rem;
+  font-weight: 500;
+  color: var(--neutral-ink-placeholder);
+  margin: 0.5rem 0 0.25rem;
+}
+
+/* ── nui-tokens-variable ── */
+
+:where(nui-tokens-variable) {
+  display: block;
+}
+
+.nui-tokens-variable-row {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 0.5rem;
+  padding-block: 0.125rem;
+}
+
+.nui-tokens-variable-label {
+  font-size: 0.6875rem;
+  color: var(--neutral-ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 3rem;
+  max-width: 5rem;
+}
+
+.nui-tokens-variable-value {
+  font-size: 0.625rem;
+  font-family: ui-monospace, monospace;
+  color: var(--neutral-ink-muted);
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 3rem;
+  max-width: 5rem;
+}
+
+/* ── nui-tokens-colors ── */
+
+:where(nui-tokens-colors) {
+  display: block;
+}
+
+.nui-tokens-colors-strip {
+  display: flex;
+  gap: 2px;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+/* ── nui-tokens-color-swatch ── */
+
+:where(nui-tokens-color-swatch) {
+  flex: 1;
+  aspect-ratio: 1;
+  min-width: 0;
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.nui-tokens-swatch-label {
+  font-size: 0.5rem;
+  line-height: 1;
+  text-align: center;
+  padding: 2px 1px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  pointer-events: none;
+}
+
+/* ── Swatch Popover ── */
+
+.nui-tokens-swatch-popover {
+  position: fixed;
+  position-area: block-end;
+  position-try-fallbacks: flip-block;
+  margin: 0.25rem 0 0;
+
+  min-width: 12rem;
+  padding: 0.375rem;
+
+  font-size: 0.6875rem;
+  color: var(--neutral-ink);
+  background: var(--neutral-modal);
+  border: 1px solid var(--neutral-border-muted);
+  border-radius: 0.375rem;
+  box-shadow: var(--ui-shadow-md);
+
+  /* Override UA popover styles */
+  inset: unset;
+  overflow: visible;
+
+  opacity: 0;
+  transform: scale(0.96);
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease,
+    display 150ms ease allow-discrete,
+    overlay 150ms ease allow-discrete;
+}
+
+.nui-tokens-swatch-popover:popover-open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+@starting-style {
+  .nui-tokens-swatch-popover:popover-open {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+.nui-tokens-swatch-popover[popover]:not(:popover-open) {
+  display: none;
+}
+
+.nui-tokens-swatch-popover-header {
+  font-size: 0.5625rem;
+  font-family: ui-monospace, monospace;
+  color: var(--neutral-ink-muted);
+  padding: 0.125rem 0.25rem 0.375rem;
+  border-bottom: 1px solid var(--neutral-border-muted);
+  margin-bottom: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nui-tokens-swatch-popover-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.25rem;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.nui-tokens-swatch-popover-row:hover {
+  background: var(--neutral-control);
+}
+
+.nui-tokens-swatch-popover-label {
+  font-size: 0.5625rem;
+  font-weight: 600;
+  color: var(--neutral-ink-muted);
+  min-width: 2.5rem;
+}
+
+.nui-tokens-swatch-popover-value {
+  font-size: 0.5625rem;
+  font-family: ui-monospace, monospace;
+  color: var(--neutral-ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── nui-tokens-themes ── */
+
+:where(nui-tokens-themes) {
+  display: contents;
+}
+
+} /* @layer ui */

package/dist/nui-tokens.js

@@ -0,0 +1,607 @@
+import { UIButton as e, UIElement as t, UIIcon as n, UIListbox as r, UIOption as i, UIRange as a, UISelect as o, define as s, uid as c } from "@nonoun/native-ui";
+var l = class extends t {
+	static observedAttributes = ["data"];
+	#e = null;
+	#t = null;
+	#n = null;
+	attributeChangedCallback(e, t, n) {
+		if (t !== n && e === "data" && n) {
+			try {
+				this.#e = JSON.parse(n);
+			} catch {}
+			this.#t && this.#a();
+		}
+	}
+	setup() {
+		super.setup();
+		let e = this.getAttribute("data");
+		if (e) try {
+			this.#e = JSON.parse(e);
+		} catch {}
+		this.#a(), this.addEventListener("nui-tokens-theme-change", this.#r);
+	}
+	teardown() {
+		this.removeEventListener("nui-tokens-theme-change", this.#r), this.innerHTML = "", this.#t = null, this.#n = null, super.teardown();
+	}
+	#r = () => {
+		requestAnimationFrame(() => this.#i());
+	};
+	sync() {
+		this.#i();
+	}
+	#i() {
+		if (!this.#e || !this.#t || !this.#n) return;
+		let e = getComputedStyle(document.documentElement).getPropertyValue(this.#e.token).trim();
+		if (e) {
+			this.#t.value = parseFloat(e);
+			let t = this.#e.step ?? .01;
+			this.#n.textContent = parseFloat(e).toFixed(t < .01 ? 3 : 2);
+		}
+	}
+	#a() {
+		if (!this.#e) return;
+		let e = this.#e;
+		this.innerHTML = "";
+		let t = document.createElement("div");
+		t.className = "nui-tokens-variable-row";
+		let n = document.createElement("label");
+		n.className = "nui-tokens-variable-label", n.textContent = e.name;
+		let r = document.createElement("ui-range");
+		r.setAttribute("min", String(e.min ?? 0)), r.setAttribute("max", String(e.max ?? 1)), r.setAttribute("step", String(e.step ?? .01)), r.setAttribute("size", "xs");
+		let i = getComputedStyle(document.documentElement).getPropertyValue(e.token).trim(), a = i ? parseFloat(i) : e.value;
+		r.setAttribute("value", String(a));
+		let o = e.step ?? .01, s = document.createElement("span");
+		s.className = "nui-tokens-variable-value", s.textContent = a.toFixed(o < .01 ? 3 : 2), r.addEventListener("ui-input", ((t) => {
+			let n = t.detail.value;
+			document.documentElement.style.setProperty(e.token, String(n)), s.textContent = n.toFixed(o < .01 ? 3 : 2), this.dispatchEvent(new CustomEvent("nui-tokens-change", {
+				bubbles: !0,
+				detail: {
+					token: e.token,
+					value: n
+				}
+			}));
+		})), this.#t = r, this.#n = s, t.append(n, r, s), this.appendChild(t);
+	}
+}, u = class extends t {
+	static observedAttributes = ["data"];
+	#e = [];
+	attributeChangedCallback(e, t, n) {
+		if (t !== n && e === "data" && n) {
+			try {
+				this.#e = JSON.parse(n);
+			} catch {}
+			this.isConnected && this.#n();
+		}
+	}
+	setup() {
+		super.setup();
+		let e = this.getAttribute("data");
+		if (e) try {
+			this.#e = JSON.parse(e);
+		} catch {}
+		this.#n(), this.addEventListener("nui-tokens-change", this.#t), this.addEventListener("nui-tokens-theme-change", this.#t);
+	}
+	teardown() {
+		this.removeEventListener("nui-tokens-change", this.#t), this.removeEventListener("nui-tokens-theme-change", this.#t), this.innerHTML = "", super.teardown();
+	}
+	#t = () => {
+		requestAnimationFrame(() => this.#r());
+	};
+	refresh() {
+		this.#r();
+	}
+	#n() {
+		this.innerHTML = "";
+		let e = document.createElement("div");
+		e.className = "nui-tokens-colors-strip";
+		for (let t of this.#e) {
+			let n = document.createElement("nui-tokens-color-swatch");
+			n.setAttribute("token", t.token), n.setAttribute("name", t.name), e.appendChild(n);
+		}
+		this.appendChild(e);
+	}
+	#r() {
+		this.querySelectorAll("nui-tokens-color-swatch").forEach((e) => e.refresh());
+	}
+};
+/** Parse a computed `rgb(...)` / `rgba(...)` string into [r, g, b, a] (0–255, 0–1). */
+function d(e) {
+	let t = e.match(/[\d.]+/g);
+	return !t || t.length < 3 ? [
+		0,
+		0,
+		0,
+		1
+	] : [
+		Number(t[0]),
+		Number(t[1]),
+		Number(t[2]),
+		t[3] === void 0 ? 1 : Number(t[3])
+	];
+}
+/** Relative luminance (ITU-R BT.709). Returns true if light. */
+function f(e, t, n) {
+	let r = [
+		e,
+		t,
+		n
+	].map((e) => (e /= 255, e <= .03928 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4));
+	return .2126 * r[0] + .7152 * r[1] + .0722 * r[2] > .4;
+}
+/** Convert 0–255 component to 2-digit hex. */
+function p(e) {
+	return Math.round(e).toString(16).padStart(2, "0");
+}
+/** sRGB → linear. */
+function m(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);
+	return _ < 0 && (_ += 360), [
+		f,
+		g,
+		_
+	];
+}
+/** sRGB (0–255) → HSL. Returns [H (0–360), S (0–100), L (0–100)]. */
+function g(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 [
+		0,
+		0,
+		o * 100
+	];
+	let s = a / (1 - Math.abs(2 * o - 1)), c = 0;
+	return c = r === e ? ((t - n) / a + 6) % 6 : r === t ? (n - e) / a + 2 : (e - t) / a + 4, [
+		c * 60,
+		s * 100,
+		o * 100
+	];
+}
+/** sRGB (0–255) → HSB/HSV. Returns [H (0–360), S (0–100), B (0–100)]. */
+function _(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 [
+		0,
+		0,
+		a
+	];
+	let o = i / r * 100, s = 0;
+	return i !== 0 && (s = r === e ? ((t - n) / i + 6) % 6 : r === t ? (n - e) / i + 2 : (e - t) / i + 4, s *= 60), [
+		s,
+		o,
+		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;
+}
+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)})`;
+}
+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)}%)`;
+}
+function S(e, t, n, r) {
+	let [i, a, o] = _(e, t, n);
+	return `hsb(${i.toFixed(0)}, ${a.toFixed(1)}%, ${o.toFixed(1)}%)`;
+}
+var C = [
+	{
+		label: "OKLCH",
+		fn: v
+	},
+	{
+		label: "HEX",
+		fn: y
+	},
+	{
+		label: "RGB",
+		fn: b
+	},
+	{
+		label: "HSL",
+		fn: x
+	},
+	{
+		label: "HSB",
+		fn: S
+	}
+], w = class extends t {
+	static observedAttributes = ["token", "name"];
+	#e = null;
+	#t = null;
+	#n = "";
+	get token() {
+		return this.getAttribute("token") ?? "";
+	}
+	set token(e) {
+		this.setAttribute("token", e);
+	}
+	get name() {
+		return this.getAttribute("name") ?? "";
+	}
+	set name(e) {
+		this.setAttribute("name", e);
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && (e === "token" && this.isConnected && (this.style.background = n ? `var(${n})` : "", this.title = `${this.name}\n${n}`, requestAnimationFrame(() => this.#a())), e === "name" && this.#t && (this.#t.textContent = n ?? "", this.title = `${n}\n${this.token}`));
+	}
+	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 = "nui-tokens-swatch-label", e.textContent = this.name, this.#t = e, this.appendChild(e), this.#n = c("swatch"), this.style.setProperty("anchor-name", `--${this.#n}`);
+		let t = document.createElement("div");
+		t.className = "nui-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("nui-tokens-change", this.#r), this.addEventListener("nui-tokens-theme-change", this.#r), requestAnimationFrame(() => this.#a());
+	}
+	teardown() {
+		this.removeEventListener("click", this.#i), this.removeEventListener("nui-tokens-change", this.#r), this.removeEventListener("nui-tokens-theme-change", this.#r), this.#e = null, this.#t = null, this.innerHTML = "", super.teardown();
+	}
+	/** Refresh background and contrast from current token value. */
+	refresh() {
+		this.token && (this.style.background = `var(${this.token})`), this.#a();
+	}
+	#r = () => {
+		requestAnimationFrame(() => this.refresh());
+	};
+	#i = (e) => {
+		if (!(this.#e && e.target.closest(".nui-tokens-swatch-popover")) && this.#e) {
+			this.#o();
+			try {
+				this.#e.showPopover();
+			} catch {}
+		}
+	};
+	#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)");
+	}
+	#o() {
+		if (!this.#e) return;
+		this.#e.innerHTML = "";
+		let e = getComputedStyle(this).backgroundColor, [t, n, r, i] = d(e), a = document.createElement("div");
+		a.className = "nui-tokens-swatch-popover-header", a.textContent = this.token, this.#e.appendChild(a);
+		for (let e of C) {
+			let a = e.fn(t, n, r, i), o = document.createElement("button");
+			o.className = "nui-tokens-swatch-popover-row", o.type = "button";
+			let s = document.createElement("span");
+			s.className = "nui-tokens-swatch-popover-label", s.textContent = e.label;
+			let c = document.createElement("span");
+			c.className = "nui-tokens-swatch-popover-value", c.textContent = a, o.append(s, c), o.addEventListener("click", (e) => {
+				e.stopPropagation(), navigator.clipboard.writeText(a).then(() => {
+					c.textContent = "Copied!", setTimeout(() => {
+						c.textContent = a;
+					}, 1200);
+				});
+			}), this.#e.appendChild(o);
+		}
+	}
+}, T = /* @__PURE__ */ "color-env-lightness-min.color-env-lightness-max.color-env-lightness-delta.color-env-chroma.color-env-chroma-k-muted.color-env-chroma-k-vivid.color-env-chroma-k-edge.color-env-alpha.color-env-alpha-delta.color-env-hue-neutral.color-env-chroma-neutral.color-env-lightness-neutral.color-env-hue-accent.color-env-chroma-accent.color-env-lightness-accent.color-env-hue-info.color-env-chroma-info.color-env-lightness-info.color-env-hue-success.color-env-chroma-success.color-env-lightness-success.color-env-hue-warning.color-env-chroma-warning.color-env-lightness-warning.color-env-hue-danger.color-env-chroma-danger.color-env-lightness-danger".split("."), E = class extends t {
+	static observedAttributes = ["data"];
+	#e = [];
+	attributeChangedCallback(e, t, n) {
+		if (t !== n && e === "data" && n) {
+			try {
+				this.#e = JSON.parse(n);
+			} catch {}
+			this.isConnected && this.#t();
+		}
+	}
+	setup() {
+		super.setup();
+		let e = this.getAttribute("data");
+		if (e) try {
+			this.#e = JSON.parse(e);
+		} catch {}
+		this.#t();
+	}
+	teardown() {
+		this.innerHTML = "", super.teardown();
+	}
+	#t() {
+		this.innerHTML = "";
+		let e = document.documentElement.getAttribute("theme") ?? "", t = document.createElement("ui-select");
+		t.setAttribute("size", "xs"), t.setAttribute("placeholder", "Theme..."), t.setAttribute("options", JSON.stringify(this.#e.map((e) => ({
+			value: e.value,
+			label: e.name
+		})))), t.setAttribute("value", e), t.addEventListener("ui-change", ((e) => {
+			this.#n(e.detail.value);
+		})), this.appendChild(t);
+	}
+	#n(e) {
+		let t = document.documentElement;
+		for (let e of T) t.style.removeProperty("--" + e);
+		e ? t.setAttribute("theme", e) : t.removeAttribute("theme"), this.dispatchEvent(new CustomEvent("nui-tokens-theme-change", {
+			bubbles: !0,
+			detail: { theme: e }
+		}));
+	}
+}, D = [
+	{
+		name: "Default",
+		value: ""
+	},
+	{
+		name: "Forest",
+		value: "forest"
+	},
+	{
+		name: "Rose",
+		value: "rose"
+	},
+	{
+		name: "Zinc",
+		value: "zinc"
+	}
+], O = [
+	{
+		name: "L min",
+		token: "--color-env-lightness-min",
+		value: .15,
+		step: .01,
+		min: 0,
+		max: 1,
+		group: "Lightness"
+	},
+	{
+		name: "L max",
+		token: "--color-env-lightness-max",
+		value: 1,
+		step: .01,
+		min: 0,
+		max: 1,
+		group: "Lightness"
+	},
+	{
+		name: "L delta",
+		token: "--color-env-lightness-delta",
+		value: .015,
+		step: .005,
+		min: 0,
+		max: .15,
+		group: "Lightness"
+	},
+	{
+		name: "Chroma",
+		token: "--color-env-chroma",
+		value: .2,
+		step: .005,
+		min: 0,
+		max: .5,
+		group: "Chroma"
+	},
+	{
+		name: "C muted",
+		token: "--color-env-chroma-k-muted",
+		value: .125,
+		step: .01,
+		min: 0,
+		max: 1,
+		group: "Chroma"
+	},
+	{
+		name: "C vivid",
+		token: "--color-env-chroma-k-vivid",
+		value: 1,
+		step: .01,
+		min: 0,
+		max: 1,
+		group: "Chroma"
+	},
+	{
+		name: "C edge",
+		token: "--color-env-chroma-k-edge",
+		value: .05,
+		step: .01,
+		min: 0,
+		max: 1,
+		group: "Chroma"
+	},
+	{
+		name: "Alpha",
+		token: "--color-env-alpha",
+		value: .85,
+		step: .01,
+		min: 0,
+		max: 1,
+		group: "Alpha"
+	},
+	{
+		name: "A delta",
+		token: "--color-env-alpha-delta",
+		value: .02,
+		step: .005,
+		min: 0,
+		max: .15,
+		group: "Alpha"
+	}
+], k = [
+	"neutral",
+	"accent",
+	"info",
+	"success",
+	"warning",
+	"danger"
+], A = [
+	"lowest",
+	"lower",
+	"low",
+	"base",
+	"high",
+	"higher",
+	"highest"
+], j = [
+	"brightest",
+	"brighter",
+	"bright",
+	"base",
+	"dim",
+	"dimmer",
+	"dimmest"
+], M = [
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"10",
+	"11"
+], N = [
+	"050",
+	"100",
+	"200",
+	"300",
+	"400",
+	"500",
+	"600",
+	"700",
+	"800",
+	"900",
+	"950"
+], P = [
+	"strongest",
+	"stronger",
+	"strong",
+	"base",
+	"weak",
+	"weaker",
+	"weakest"
+];
+function F(e, t) {
+	let n = document.createElement("div");
+	n.className = "nui-tokens-section", t && (n.dataset.family = t);
+	let r = document.createElement("h3");
+	return r.className = "nui-tokens-heading", r.textContent = e, n.appendChild(r), n;
+}
+function I(e) {
+	let t = document.createElement("h4");
+	return t.className = "nui-tokens-subheading", t.textContent = e, t;
+}
+function L(e) {
+	let t = document.createElement("nui-tokens-colors");
+	return t.setAttribute("data", JSON.stringify(e)), t;
+}
+function R(e) {
+	let t = document.createElement("nui-tokens-variable");
+	return t.setAttribute("data", JSON.stringify({
+		name: e.name,
+		type: "number",
+		token: e.token,
+		value: e.value,
+		step: e.step,
+		min: e.min,
+		max: e.max
+	})), t;
+}
+function z(e) {
+	let t = document.createElement("div");
+	t.className = "nui-tokens-toolbar";
+	let n = document.createElement("nui-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("ui-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: `--color-env-hue-${t}`,
+			value: 230,
+			step: 1,
+			min: 0,
+			max: 360
+		})), n.appendChild(R({
+			name: "Chroma",
+			token: `--color-env-chroma-${t}`,
+			value: .5,
+			step: .01,
+			min: 0,
+			max: 1
+		})), n.appendChild(R({
+			name: "Lightness",
+			token: `--color-env-lightness-${t}`,
+			value: .5,
+			step: .01,
+			min: 0,
+			max: 1
+		})), n.appendChild(I("Elevation")), n.appendChild(L(A.map((e) => ({
+			name: e,
+			token: `--${t}-${e}`
+		})))), n.appendChild(I("Brightness")), n.appendChild(L(j.map((e) => ({
+			name: e,
+			token: `--${t}-${e}`
+		})))), n.appendChild(I("Solid")), n.appendChild(L(M.map((e) => ({
+			name: e,
+			token: `--${t}-${e}`
+		})))), n.appendChild(I("Scrim")), n.appendChild(L(M.map((e) => ({
+			name: e,
+			token: `--${t}-${e}-scrim`
+		})))), n.appendChild(I("Semantic")), n.appendChild(L(N.map((e) => ({
+			name: e,
+			token: `--${t}-${e}`
+		})))), n.appendChild(I("Semantic Scrim")), n.appendChild(L(N.map((e) => ({
+			name: e,
+			token: `--${t}-${e}-scrim`
+		})))), n.appendChild(I("Tint")), n.appendChild(L(P.map((e) => ({
+			name: e,
+			token: `--${t}-scrim-tint-${e}`
+		})))), n.appendChild(I("Shade")), n.appendChild(L(P.map((e) => ({
+			name: e,
+			token: `--${t}-scrim-shade-${e}`
+		})))), e.appendChild(n);
+	}
+	i.addEventListener("ui-change", ((t) => {
+		let n = t.detail.value, r = e.querySelectorAll(".nui-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("nui-tokens-colors").forEach((e) => e.refresh());
+		});
+	})), e.addEventListener("nui-tokens-theme-change", () => {
+		requestAnimationFrame(() => {
+			e.querySelectorAll("nui-tokens-variable").forEach((e) => e.sync());
+		});
+	});
+}
+/**
+* Self-contained design system token inspector.
+*
+* Stamps the full color/variable inspector UI on connection.
+* Consumer usage: `<nui-tokens></nui-tokens>`.
+*
+* All `nui-tokens-*` sub-elements are registered by the `@nonoun/nui-tokens`
+* entry point as a side effect of import.
+*/
+var B = class extends t {
+	setup() {
+		super.setup(), z(this);
+	}
+	teardown() {
+		this.innerHTML = "", super.teardown();
+	}
+};
+s("nui-tokens", B), s("nui-tokens-variable", l), s("nui-tokens-colors", u), s("nui-tokens-color-swatch", w), s("nui-tokens-themes", E), s("ui-range", a), s("ui-select", o), s("ui-button", e), s("ui-icon", n), s("ui-listbox", r), s("ui-option", i);
+export { B as NuiTokens, w as NuiTokensColorSwatch, u as NuiTokensColors, E as NuiTokensThemes, l as NuiTokensVariable, z as buildTokens };

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@nonoun/nui-tokens",
+  "version": "0.2.10",
+  "description": "OKLCH color token inspector for @nonoun/native-ui",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/nui-tokens.js",
+  "module": "./dist/nui-tokens.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/nui-tokens.js"
+    },
+    "./css": "./dist/nui-tokens.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/nui-tokens.js"
+  ],
+  "peerDependencies": {
+    "@nonoun/native-ui": ">=0.2.10"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run build:types",
+    "build:js": "vite build",
+    "build:css": "cp src/nui-tokens.css dist/nui-tokens.css",
+    "build:types": "tsc -p tsconfig.build.json"
+  }
+}