@zeturn/watercolor-core 1.2.6 → 1.2.8

package/dist/core.es.js

@@ -297,6 +297,49 @@ async function x(e, t = {}) {
 		};
 	}
 }
+async function S(e, t = {}) {
+	let n = t.isCurrent ?? (() => !0);
+	if (typeof e != "string" || !e.trim() || typeof fetch > "u") return {
+		ok: !1,
+		url: e,
+		errors: [{
+			path: "$",
+			message: "Theme config URL or fetch is unavailable."
+		}],
+		warnings: []
+	};
+	try {
+		let r = await fetch(e, {
+			cache: "no-store",
+			signal: t.signal
+		});
+		if (!n()) return null;
+		if (!r.ok) return {
+			ok: !1,
+			url: e,
+			errors: [{
+				path: "$",
+				message: `Theme request failed with ${r.status}.`
+			}],
+			warnings: []
+		};
+		let i = await r.json();
+		return n() ? {
+			...b(i, { target: t.target }),
+			url: e
+		} : null;
+	} catch (t) {
+		return n() ? {
+			ok: !1,
+			url: e,
+			errors: [{
+				path: "$",
+				message: t instanceof Error ? t.message : "Theme request failed."
+			}],
+			warnings: []
+		} : null;
+	}
+}
 function te(e) {
 	let t = g(e);
 	if (!t.ok) return t;
@@ -310,29 +353,29 @@ function te(e) {
 }
 //#endregion
 //#region src/theme/controller.ts
-var S = [
+var C = [
 	"light",
 	"dark",
 	"system"
-], C = "wc-mode", w = "wc-scheme", T = (e) => typeof e == "string" && S.includes(e), E = (e, t = !1) => e === "system" ? t ? "dark" : "light" : e;
-function D(e, t, n) {
+], w = "wc-mode", T = "wc-scheme", E = (e) => typeof e == "string" && C.includes(e), D = (e, t = !1) => e === "system" ? t ? "dark" : "light" : e;
+function O(e, t, n) {
 	e.dataset.theme = t, e.dataset.resolvedTheme = n, e.classList.toggle("dark", n === "dark"), e.classList.toggle("light", n === "light"), e.style.colorScheme = n;
 }
-function O(e = {}) {
-	let t = T(e.initialMode) ? e.initialMode : "system", n = e.initialResolvedMode === "dark", r = !1, i = null, a = null, o = null, s = null, c = typeof e.storageKey == "string" && e.storageKey.trim() ? e.storageKey : C, l = /* @__PURE__ */ new Set(), u = () => E(t, n), d = () => ({
+function ne(e = {}) {
+	let t = E(e.initialMode) ? e.initialMode : "system", n = e.initialResolvedMode === "dark", r = !1, i = null, a = null, o = null, s = null, c = typeof e.storageKey == "string" && e.storageKey.trim() ? e.storageKey : w, l = /* @__PURE__ */ new Set(), u = () => D(t, n), d = () => ({
 		mode: t,
 		resolvedMode: u(),
 		dark: u() === "dark"
 	}), f = () => l.forEach((e) => e(d())), p = (e = !0) => {
 		let n = d();
-		if (i && D(i, n.mode, n.resolvedMode), e) try {
+		if (i && O(i, n.mode, n.resolvedMode), e) try {
 			o?.setItem(c, t);
 		} catch {}
 		f();
 	}, m = (e) => {
 		n = e.matches, t === "system" && p(!1);
 	}, h = (e) => {
-		e.key !== c || !T(e.newValue) || e.newValue === t || (t = e.newValue, p(!1));
+		e.key !== c || !E(e.newValue) || e.newValue === t || (t = e.newValue, p(!1));
 	};
 	return {
 		get mode() {
@@ -361,14 +404,14 @@ function O(e = {}) {
 				}
 				else o = e.storage;
 				if (s = typeof globalThis.matchMedia == "function" ? globalThis.matchMedia("(prefers-color-scheme: dark)") : null, n = s?.matches ?? n, e.readStorage !== !1) try {
-					let n = o?.getItem(c), r = e.storageKey === void 0 ? o?.getItem(w) : null;
-					T(n) ? t = n : (r === "light" || r === "dark") && (t = r, o?.setItem(c, r));
+					let n = o?.getItem(c), r = e.storageKey === void 0 ? o?.getItem(T) : null;
+					E(n) ? t = n : (r === "light" || r === "dark") && (t = r, o?.setItem(c, r));
 				} catch {}
 				s?.addEventListener?.("change", m), s?.addEventListener || s?.addListener?.(m), window.addEventListener("storage", h), p(!1);
 			}
 		},
 		setMode(e) {
-			!T(e) || e === t || (t = e, p(r));
+			!E(e) || e === t || (t = e, p(r));
 		},
 		toggleMode() {
 			t = u() === "dark" ? "light" : "dark", p(r);
@@ -383,13 +426,13 @@ function O(e = {}) {
 }
 //#endregion
 //#region src/theme/ssr.ts
-function ne(e = {}) {
-	let t = T(e.defaultMode) ? e.defaultMode : "system", n = typeof e.storageKey == "string" && e.storageKey.trim() ? e.storageKey : C;
+function re(e = {}) {
+	let t = E(e.defaultMode) ? e.defaultMode : "system", n = typeof e.storageKey == "string" && e.storageKey.trim() ? e.storageKey : w;
 	return `(()=>{const d=document.documentElement;let m=${JSON.stringify(t)};try{const s=localStorage.getItem(${JSON.stringify(n).replace(/</g, "\\u003c")});if(s==='light'||s==='dark'||s==='system')m=s}catch{}const r=m==='system'&&matchMedia('(prefers-color-scheme: dark)').matches?'dark':m==='system'?'light':m;d.dataset.theme=m;d.dataset.resolvedTheme=r;d.classList.toggle('dark',r==='dark');d.classList.toggle('light',r==='light');d.style.colorScheme=r})()`;
 }
 //#endregion
 //#region src/composition/index.ts
-var re = [
+var k = [
 	"none",
 	"2xs",
 	"xs",
@@ -399,40 +442,40 @@ var re = [
 	"xl",
 	"2xl",
 	"3xl"
-], ie = [
+], A = [
 	"stretch",
 	"start",
 	"center",
 	"end"
-], k = [
+], j = [
 	"sm",
 	"md",
 	"lg",
 	"xl",
 	"full"
-], A = [
+], M = [
 	"none",
 	"sm",
 	"md",
 	"lg"
-], j = [
+], N = [
 	"start",
 	"center",
 	"end",
 	"between",
 	"around"
-], M = [
+], ie = [
 	"equal",
 	"sidebar",
 	"sidebar-end",
 	"wide-start",
 	"wide-end"
-], N = [
+], ae = [
 	"none",
 	"sm",
 	"md",
 	"lg"
-], P = 1e3, ae = 10, oe = 1, F = [], I = /* @__PURE__ */ new WeakMap(), se = () => typeof document < "u", L = (e) => {
+], P = 1e3, oe = 10, se = 1, F = [], I = /* @__PURE__ */ new WeakMap(), ce = () => typeof document < "u", L = (e) => {
 	let t = [
 		"a[href]",
 		"area[href]",
@@ -505,8 +548,8 @@ var re = [
 }, Y = (e) => {
 	let t = U(q(e));
 	!t || t.closeOnPointerDownOutside === !1 || H(t, e.target) || t.onPointerDownOutside?.(e);
-}, ce = (e) => {
-	if (!se()) return {
+}, le = (e) => {
+	if (!ce()) return {
 		id: 0,
 		zIndex: e.zIndex ?? P,
 		update: () => {},
@@ -514,9 +557,9 @@ var re = [
 	};
 	let t = e.element.ownerDocument;
 	G(t);
-	let n = e.zIndex ?? P + F.length * ae, r = {
+	let n = e.zIndex ?? P + F.length * oe, r = {
 		...e,
-		id: oe++,
+		id: se++,
 		zIndex: n,
 		ownerDocument: t,
 		previousActiveElement: t.activeElement
@@ -538,7 +581,7 @@ var re = [
 		side: t,
 		alignment: n ?? "center"
 	};
-}, Z = (e, t) => t === "center" ? e : `${e}-${t}`, le = (e) => {
+}, Z = (e, t) => t === "center" ? e : `${e}-${t}`, ue = (e) => {
 	let { side: t, alignment: n } = X(e);
 	switch (t) {
 		case "top": return Z("bottom", n);
@@ -557,7 +600,7 @@ var re = [
 }, $ = (e, t, n = {}) => {
 	let r = n.placement ?? "bottom", i = n.offset ?? 8, a = n.boundaryPadding ?? 8, o = e.getBoundingClientRect(), s = t.getBoundingClientRect(), c = e.ownerDocument.defaultView?.innerWidth ?? 0, l = e.ownerDocument.defaultView?.innerHeight ?? 0, u = r;
 	if (!Q(o, s, r, i, a, c, l)) {
-		let e = le(r);
+		let e = ue(r);
 		Q(o, s, e, i, a, c, l) && (u = e);
 	}
 	let d = 0, f = 0, { side: p, alignment: m } = X(u);
@@ -581,9 +624,9 @@ var re = [
 		left: Math.min(Math.max(f, a), h),
 		top: Math.min(Math.max(d, a), g)
 	};
-}, ue = (e, t, n = {}) => {
+}, de = (e, t, n = {}) => {
 	let r = $(e, t, n);
 	return t.style.position = "fixed", t.style.top = `${r.top}px`, t.style.left = `${r.left}px`, t.dataset.placement = r.placement, r;
 };
 //#endregion
-export { ie as COMPOSITION_ALIGNS, re as COMPOSITION_GAPS, j as INLINE_JUSTIFY, w as LEGACY_THEME_STORAGE_KEY, A as PAGE_GUTTERS, k as PAGE_SIZES, N as SPLIT_COLLAPSE, M as SPLIT_RATIOS, e as THEME_CONFIG_VERSION, S as THEME_MODES, C as THEME_STORAGE_KEY, ue as applyFloatingPosition, b as applyThemeConfig, D as applyThemeMode, $ as computeFloatingPosition, B as createFocusTrap, ce as createOverlayLayer, O as createThemeController, ne as createThemeInitScript, R as focusFirstElement, L as getFocusableElements, T as isThemeMode, x as loadThemeConfig, V as lockDocumentScroll, y as resetThemeConfig, E as resolveThemeMode, z as restoreFocus, te as serializeThemeConfig, g as validateThemeConfig };
+export { A as COMPOSITION_ALIGNS, k as COMPOSITION_GAPS, N as INLINE_JUSTIFY, T as LEGACY_THEME_STORAGE_KEY, M as PAGE_GUTTERS, j as PAGE_SIZES, ae as SPLIT_COLLAPSE, ie as SPLIT_RATIOS, e as THEME_CONFIG_VERSION, C as THEME_MODES, w as THEME_STORAGE_KEY, de as applyFloatingPosition, b as applyThemeConfig, O as applyThemeMode, $ as computeFloatingPosition, B as createFocusTrap, le as createOverlayLayer, ne as createThemeController, re as createThemeInitScript, R as focusFirstElement, L as getFocusableElements, E as isThemeMode, S as loadProviderThemeConfig, x as loadThemeConfig, V as lockDocumentScroll, y as resetThemeConfig, D as resolveThemeMode, z as restoreFocus, te as serializeThemeConfig, g as validateThemeConfig };

package/dist/src/theme/config.d.ts

@@ -64,10 +64,14 @@ export interface ThemeApplyOptions {
 export interface ThemeLoadOptions extends ThemeApplyOptions {
     signal?: AbortSignal;
 }
+export interface ThemeProviderLoadOptions extends ThemeLoadOptions {
+    isCurrent?: () => boolean;
+}
 export declare function validateThemeConfig(input: unknown): ThemeValidationResult;
 export declare function resetThemeConfig(target?: HTMLElement | null): void;
 export declare function applyThemeConfig(input: unknown, options?: ThemeApplyOptions): ThemeApplyResult;
 export declare function loadThemeConfig(url: string, options?: ThemeLoadOptions): Promise<ThemeLoadResult>;
+export declare function loadProviderThemeConfig(url: string, options?: ThemeProviderLoadOptions): Promise<ThemeLoadResult | null>;
 export declare function serializeThemeConfig(input: unknown): ThemeApplyResult & {
     css?: string;
 };

package/dist/src/theme/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/theme/config.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/theme/config.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeturn/watercolor-core",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "type": "module",
   "license": "ISC",
   "main": "dist/core.es.js",

package/src/styles/component-states.css

@@ -0,0 +1,152 @@
+/** Component state contract.
+ * These tokens are intentionally semantic, not component-specific. They define
+ * how quiet Watercolor components reveal affordance across React and Vue.
+ */
+:root {
+  --wc-state-default-bg: transparent;
+  --wc-state-default-fg: var(--wc-text-primary);
+  --wc-state-muted-fg: var(--wc-text-secondary);
+  --wc-state-hover-bg: var(--wc-action-hover);
+  --wc-state-active-bg: var(--wc-action-active);
+  --wc-state-selected-bg: var(--wc-action-selected);
+  --wc-state-selected-hover-bg: var(--wc-action-selected-hover);
+  --wc-state-disabled-bg: var(--wc-action-disabled);
+  --wc-state-disabled-fg: var(--wc-text-disabled);
+  --wc-state-error-bg: var(--wc-danger-subtle);
+  --wc-state-error-fg: var(--wc-danger);
+  --wc-state-error-ring: var(--wc-danger);
+  --wc-state-open-bg: var(--wc-surface-overlay);
+  --wc-state-open-shadow: var(--wc-shadow-lg);
+  --wc-state-empty-fg: var(--wc-text-tertiary);
+  --wc-state-focus-ring: var(--wc-focus-ring);
+  --wc-state-focus-width: 2px;
+  --wc-state-focus-offset: 2px;
+  --wc-state-min-touch-target: 44px;
+  --wc-state-control-sm: 32px;
+  --wc-state-control-md: 40px;
+  --wc-state-control-lg: 48px;
+  --wc-state-row-compact: 36px;
+  --wc-state-row-default: 44px;
+  --wc-state-row-comfortable: 52px;
+  --wc-state-field-radius: var(--wc-radius-xl);
+  --wc-state-item-radius: var(--wc-radius-lg);
+  --wc-state-overlay-radius: var(--wc-radius-xl);
+}
+
+.wc-state-layer {
+  background: var(--wc-state-default-bg);
+  color: var(--wc-state-default-fg);
+  transition:
+    background-color var(--wc-motion-fast) var(--wc-ease-standard),
+    color var(--wc-motion-fast) var(--wc-ease-standard),
+    opacity var(--wc-motion-fast) var(--wc-ease-standard);
+}
+
+.wc-state-layer:hover,
+.wc-state-layer[data-state='hover'] {
+  background: var(--wc-state-hover-bg);
+}
+
+.wc-state-layer:active,
+.wc-state-layer[data-state='active'] {
+  background: var(--wc-state-active-bg);
+}
+
+.wc-state-layer:focus-visible,
+.wc-state-layer[data-state='focus'] {
+  outline: var(--wc-state-focus-width) solid var(--wc-state-focus-ring);
+  outline-offset: var(--wc-state-focus-offset);
+}
+
+.wc-state-layer[aria-selected='true'],
+.wc-state-layer[data-selected='true'],
+.wc-state-layer[data-state='selected'] {
+  background: var(--wc-state-selected-bg);
+  color: var(--wc-text-primary);
+}
+
+.wc-state-layer[aria-selected='true']:hover,
+.wc-state-layer[data-selected='true']:hover {
+  background: var(--wc-state-selected-hover-bg);
+}
+
+.wc-state-layer:disabled,
+.wc-state-layer[aria-disabled='true'],
+.wc-state-layer[data-disabled='true'],
+.wc-state-layer[data-state='disabled'] {
+  background: transparent;
+  color: var(--wc-state-disabled-fg);
+  cursor: not-allowed;
+  opacity: 1;
+  pointer-events: none;
+}
+
+.wc-state-layer[aria-busy='true'],
+.wc-state-layer[data-loading='true'],
+.wc-state-layer[data-state='loading'] {
+  cursor: wait;
+}
+
+.wc-state-layer[aria-invalid='true'],
+.wc-state-layer[data-invalid='true'],
+.wc-state-layer[data-state='error'] {
+  color: var(--wc-state-error-fg);
+}
+
+.wc-state-field {
+  min-height: var(--wc-state-control-md);
+  border: 0;
+  border-radius: var(--wc-state-field-radius);
+  background: var(--wc-surface-subtle);
+  color: var(--wc-text-primary);
+}
+
+.wc-state-field:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--wc-state-hover-bg);
+}
+
+.wc-state-field:focus-visible,
+.wc-state-field[data-state='focus'] {
+  outline: var(--wc-state-focus-width) solid var(--wc-state-focus-ring);
+  outline-offset: 0;
+}
+
+.wc-state-field[aria-invalid='true'],
+.wc-state-field[data-invalid='true'],
+.wc-state-field[data-state='error'] {
+  outline: var(--wc-state-focus-width) solid var(--wc-state-error-ring);
+  outline-offset: 0;
+}
+
+.wc-state-field:disabled,
+.wc-state-field[aria-disabled='true'],
+.wc-state-field[data-disabled='true'] {
+  background: var(--wc-state-disabled-bg);
+  color: var(--wc-state-disabled-fg);
+  cursor: not-allowed;
+}
+
+.wc-state-overlay {
+  border: 0;
+  border-radius: var(--wc-state-overlay-radius);
+  background: var(--wc-state-open-bg);
+  box-shadow: var(--wc-state-open-shadow);
+}
+
+.wc-state-empty {
+  color: var(--wc-state-empty-fg);
+  text-align: center;
+}
+
+@media (pointer: coarse) {
+  :root {
+    --wc-state-control-sm: var(--wc-state-min-touch-target);
+    --wc-state-row-compact: var(--wc-state-min-touch-target);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wc-state-layer {
+    transition: none;
+  }
+}

package/src/styles/index.css

@@ -2,4 +2,5 @@
 @import './semantic.css';
 @import './modes.css';
 @import './layout.css';
+@import './component-states.css';
 @import './base.css';