@ecoma-io/loom 0.1.1 → 0.3.0

package/dist/packages/core/src/index.js

@@ -0,0 +1,8 @@
+import { cn } from "./cn.js";
+import { optional } from "./props.js";
+import { useSplitAttrs } from "./attrs.js";
+import { LIST_STAGGER_CAP, LIST_STAGGER_STEP_MS, listStaggerDelay } from "./motion.js";
+import { WCAG_TAGS } from "./a11y-scope.js";
+import { themeScript, useTheme } from "./theme.js";
+import { applyLoomIconDefaults } from "./icon-defaults.js";
+export { LIST_STAGGER_CAP, LIST_STAGGER_STEP_MS, WCAG_TAGS, applyLoomIconDefaults, cn, listStaggerDelay, optional, themeScript, useSplitAttrs, useTheme };

package/dist/packages/core/src/motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../../../packages/core/src/motion.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC,8DAA8D;AAC9D,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAElD"}

package/dist/packages/core/src/motion.js

@@ -0,0 +1,20 @@
+//#region packages/core/src/motion.ts
+/**
+* The list-reveal stagger vocabulary — one source for every overlay that
+* reveals rows (DropdownMenu, Menubar, Select) and for the Motion
+* documentation page. Each revealed row is delayed one step after the
+* previous, capped so a long list does not tail off indefinitely.
+*
+* It lives here rather than in each template because it was written into
+* three of them independently once, which is how the three drifted.
+*/
+var LIST_STAGGER_STEP_MS = 24;
+var LIST_STAGGER_CAP = 5;
+/** The inline `animation-delay` for the i-th revealed row. */
+function listStaggerDelay(i) {
+	return `${String(Math.min(i, 5) * 24)}ms`;
+}
+//#endregion
+export { LIST_STAGGER_CAP, LIST_STAGGER_STEP_MS, listStaggerDelay };
+
+//# sourceMappingURL=motion.js.map

package/dist/packages/core/src/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","names":[],"sources":["../../../../packages/core/src/motion.ts"],"sourcesContent":["/**\n * The list-reveal stagger vocabulary — one source for every overlay that\n * reveals rows (DropdownMenu, Menubar, Select) and for the Motion\n * documentation page. Each revealed row is delayed one step after the\n * previous, capped so a long list does not tail off indefinitely.\n *\n * It lives here rather than in each template because it was written into\n * three of them independently once, which is how the three drifted.\n */\nexport const LIST_STAGGER_STEP_MS = 24;\nexport const LIST_STAGGER_CAP = 5;\n\n/** The inline `animation-delay` for the i-th revealed row. */\nexport function listStaggerDelay(i: number): string {\n  return `${String(Math.min(i, LIST_STAGGER_CAP) * LIST_STAGGER_STEP_MS)}ms`;\n}\n"],"mappings":";;;;;;;;;;AASA,IAAa,uBAAuB;AACpC,IAAa,mBAAmB;;AAGhC,SAAgB,iBAAiB,GAAmB;CAClD,OAAO,GAAG,OAAO,KAAK,IAAI,GAAA,CAAmB,IAAA,EAAwB,EAAE;AACzE"}

package/dist/packages/core/src/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../../packages/core/src/props.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACxD,MAAM,EAAE,CAAC,GACR;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC;CAAE,CAM/C"}

package/dist/packages/core/src/props.js

@@ -0,0 +1,37 @@
+//#region packages/core/src/props.ts
+/**
+* Drops the keys whose value is `undefined`, so a `v-bind` passes only the
+* props that were actually set.
+*
+* Two rules collide to make this necessary, and neither is avoidable.
+*
+* Vue treats a prop that is absent and a prop explicitly set to `undefined` as
+* the same thing — both resolve to the child's default. TypeScript, under
+* `exactOptionalPropertyTypes`, does not: passing `undefined` to a `foo?: T` is
+* an error, because the flag exists precisely to tell "missing" apart from
+* "present and undefined". A Vue template always emits every key it binds, so
+* forwarding an optional prop straight through (`:open="open"`) hands a child's
+* `open?: boolean` an explicit `undefined` and fails to compile, while behaving
+* correctly at run time.
+*
+* That distinction is not academic for the components underneath. Reka reads
+* `undefined` as "no value supplied — manage this yourself", and any concrete
+* value, `false` included, as "the host owns this". So a control whose
+* `modelValue` is coerced to `false` on its way through stops being
+* uncontrolled and becomes permanently, silently off: it still emits its update
+* event, and its rendered state never moves. That failure has no error and no
+* warning; it looks like a component that ignores clicks.
+*
+* A cast (`open as boolean`) silences the compiler and is the reason to prefer
+* this: it states that a value is there when the whole point is that one may
+* not be. Omitting the key says what is true.
+*/
+function optional(values) {
+	const set = {};
+	for (const key of Object.keys(values)) if (values[key] !== void 0) set[key] = values[key];
+	return set;
+}
+//#endregion
+export { optional };
+
+//# sourceMappingURL=props.js.map

package/dist/packages/core/src/props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.js","names":[],"sources":["../../../../packages/core/src/props.ts"],"sourcesContent":["/**\n * Drops the keys whose value is `undefined`, so a `v-bind` passes only the\n * props that were actually set.\n *\n * Two rules collide to make this necessary, and neither is avoidable.\n *\n * Vue treats a prop that is absent and a prop explicitly set to `undefined` as\n * the same thing — both resolve to the child's default. TypeScript, under\n * `exactOptionalPropertyTypes`, does not: passing `undefined` to a `foo?: T` is\n * an error, because the flag exists precisely to tell \"missing\" apart from\n * \"present and undefined\". A Vue template always emits every key it binds, so\n * forwarding an optional prop straight through (`:open=\"open\"`) hands a child's\n * `open?: boolean` an explicit `undefined` and fails to compile, while behaving\n * correctly at run time.\n *\n * That distinction is not academic for the components underneath. Reka reads\n * `undefined` as \"no value supplied — manage this yourself\", and any concrete\n * value, `false` included, as \"the host owns this\". So a control whose\n * `modelValue` is coerced to `false` on its way through stops being\n * uncontrolled and becomes permanently, silently off: it still emits its update\n * event, and its rendered state never moves. That failure has no error and no\n * warning; it looks like a component that ignores clicks.\n *\n * A cast (`open as boolean`) silences the compiler and is the reason to prefer\n * this: it states that a value is there when the whole point is that one may\n * not be. Omitting the key says what is true.\n */\nexport function optional<T extends Record<string, unknown>>(\n  values: T,\n): { [K in keyof T]?: Exclude<T[K], undefined> } {\n  const set: Record<string, unknown> = {};\n  for (const key of Object.keys(values)) {\n    if (values[key] !== undefined) set[key] = values[key];\n  }\n  return set as { [K in keyof T]?: Exclude<T[K], undefined> };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,SACd,QAC+C;CAC/C,MAAM,MAA+B,CAAC;CACtC,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,GAClC,IAAI,OAAO,SAAS,KAAA,GAAW,IAAI,OAAO,OAAO;CAEnD,OAAO;AACT"}

package/dist/packages/core/src/theme.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Theme switching for Loom.
+ *
+ * The single source of truth is the `data-theme` attribute on `<html>`.
+ * This composable reads and writes it, persists the preference to
+ * `localStorage`, and resolves `"system"` mode from the OS preference.
+ *
+ * SSR-safe: every DOM access is guarded. On the server, `theme` returns
+ * the persisted or default preference, `resolvedTheme` resolves `"system"`
+ * to `"light"` (the only safe default without a DOM), and the setter and
+ * toggler are no-ops.
+ *
+ * Flash prevention: `themeScript` is a string of inline JavaScript that
+ * reads `localStorage` and sets `data-theme` before the first paint.
+ * Consumers rendering SSR inject it into `<head>`:
+ *
+ *   <script>${themeScript}</script>
+ */
+import { type Ref } from "vue";
+/** The preference a user expresses — `"system"` defers to the OS. */
+export type ThemePreference = "light" | "dark" | "system";
+/** The actual theme applied — `"system"` is resolved away. */
+export type ResolvedTheme = "light" | "dark";
+/**
+ * Reset the shared state. Intended for test isolation only — a real app
+ * never needs this because the state lives for the app's lifetime.
+ */
+export declare function _resetThemeState(): void;
+/**
+ * Read and control the active Loom theme.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useTheme } from "@ecoma-io/loom/theme"
+ * const { theme, resolvedTheme, setTheme, toggleTheme } = useTheme()
+ * </script>
+ *
+ * <template>
+ *   <button @click="toggleTheme">
+ *     {{ resolvedTheme === "dark" ? "☀️" : "🌙" }}
+ *   </button>
+ * </template>
+ * ```
+ */
+export declare function useTheme(): {
+    readonly theme: Ref<ThemePreference>;
+    readonly resolvedTheme: Readonly<Ref<ResolvedTheme>>;
+    readonly setTheme: (preference: ThemePreference) => void;
+    readonly toggleTheme: () => void;
+};
+/**
+ * Inline script to prevent flash-of-wrong-theme on SSR pages.
+ *
+ * Paste it into `<head>` before any stylesheet links:
+ *
+ * ```html
+ * <script><%= themeScript %></script>
+ * ```
+ *
+ * It reads `localStorage` and sets `data-theme` on `<html>` synchronously,
+ * before the browser paints, so the first frame is already in the right
+ * theme. When no preference is stored, it follows the OS preference.
+ *
+ * The script is deliberately tiny and has no dependencies.
+ */
+export declare const themeScript = "(() => {\n  const t = localStorage.getItem(\"loom:theme\");\n  const d = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n  document.documentElement.setAttribute(\"data-theme\", (t === \"dark\" || (!t && d)) ? \"dark\" : \"light\");\n})()";
+//# sourceMappingURL=theme.d.ts.map

package/dist/packages/core/src/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../packages/core/src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAwC,MAAM,KAAK,CAAC;AAErE,qEAAqE;AACrE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE1D,8DAA8D;AAC9D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AA2B7C;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAKvC;AA+FD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,IAAI;IAC1B,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IACrC,QAAQ,CAAC,aAAa,EAAE,QAAQ,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC;IACrD,QAAQ,CAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,WAAW,EAAE,MAAM,IAAI,CAAC;CAClC,CA2CA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,gQAInB,CAAC"}

package/dist/packages/core/src/theme.js

@@ -0,0 +1,163 @@
+import { computed, onScopeDispose, ref, watch } from "vue";
+//#region packages/core/src/theme.ts
+/**
+* Theme switching for Loom.
+*
+* The single source of truth is the `data-theme` attribute on `<html>`.
+* This composable reads and writes it, persists the preference to
+* `localStorage`, and resolves `"system"` mode from the OS preference.
+*
+* SSR-safe: every DOM access is guarded. On the server, `theme` returns
+* the persisted or default preference, `resolvedTheme` resolves `"system"`
+* to `"light"` (the only safe default without a DOM), and the setter and
+* toggler are no-ops.
+*
+* Flash prevention: `themeScript` is a string of inline JavaScript that
+* reads `localStorage` and sets `data-theme` before the first paint.
+* Consumers rendering SSR inject it into `<head>`:
+*
+*   <script>${themeScript}<\/script>
+*/
+var STORAGE_KEY = "loom:theme";
+var DATA_ATTR = "data-theme";
+var MEDIA_QUERY = "(prefers-color-scheme: dark)";
+/** Default preference when nothing is stored and no OS signal exists. */
+var DEFAULT_PREFERENCE = "system";
+/**
+* Reactive shared state, lazily initialised on the first `useTheme()` call
+* and torn down with the effect scope that owns it. Multiple components
+* calling `useTheme()` in the same app share the same refs and the same
+* `matchMedia` listener.
+*/
+var sharedState = null;
+function getSharedState() {
+	if (sharedState) {
+		sharedState.scopeCount++;
+		return sharedState;
+	}
+	let stored = DEFAULT_PREFERENCE;
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (raw === "light" || raw === "dark" || raw === "system") stored = raw;
+	} catch {}
+	applyToDOM(resolveTheme(stored, getSystemIsDark()));
+	const preference = ref(stored);
+	const systemIsDark = ref(getSystemIsDark());
+	let mediaQuery = null;
+	let listener = null;
+	try {
+		mediaQuery = window.matchMedia(MEDIA_QUERY);
+		listener = (e) => {
+			systemIsDark.value = e.matches;
+		};
+		mediaQuery.addEventListener("change", listener);
+	} catch {}
+	sharedState = {
+		preference,
+		systemIsDark,
+		mediaQuery,
+		listener,
+		scopeCount: 1
+	};
+	return sharedState;
+}
+function releaseSharedState() {
+	if (!sharedState) return;
+	sharedState.scopeCount--;
+	if (sharedState.scopeCount > 0) return;
+	if (sharedState.mediaQuery && sharedState.listener) sharedState.mediaQuery.removeEventListener("change", sharedState.listener);
+	sharedState = null;
+}
+function getSystemIsDark() {
+	try {
+		return window.matchMedia(MEDIA_QUERY).matches;
+	} catch {
+		return false;
+	}
+}
+function resolveTheme(pref, systemDark) {
+	return pref === "system" ? systemDark ? "dark" : "light" : pref;
+}
+function applyToDOM(theme) {
+	try {
+		document.documentElement.setAttribute(DATA_ATTR, theme);
+	} catch {}
+}
+function persist(preference) {
+	try {
+		localStorage.setItem(STORAGE_KEY, preference);
+	} catch {}
+}
+/**
+* Read and control the active Loom theme.
+*
+* @example
+* ```vue
+* <script setup>
+* import { useTheme } from "@ecoma-io/loom/theme"
+* const { theme, resolvedTheme, setTheme, toggleTheme } = useTheme()
+* <\/script>
+*
+* <template>
+*   <button @click="toggleTheme">
+*     {{ resolvedTheme === "dark" ? "☀️" : "🌙" }}
+*   </button>
+* </template>
+* ```
+*/
+function useTheme() {
+	const state = getSharedState();
+	onScopeDispose(releaseSharedState);
+	/** The user's preference — `"system"` defers to the OS. */
+	const theme = computed({
+		get: () => state.preference.value,
+		set: (value) => {
+			state.preference.value = value;
+		}
+	});
+	/** The actual active theme, with `"system"` resolved to `"light"` or `"dark"`. */
+	const resolvedTheme = computed(() => resolveTheme(state.preference.value, state.systemIsDark.value));
+	watch([() => state.preference.value, () => state.systemIsDark.value], () => {
+		applyToDOM(resolvedTheme.value);
+		persist(state.preference.value);
+	});
+	/** Set the theme preference explicitly. */
+	function setTheme(preference) {
+		state.preference.value = preference;
+	}
+	/** Toggle between light and dark. System preference stays system. */
+	function toggleTheme() {
+		if (state.preference.value === "system") state.preference.value = resolvedTheme.value === "dark" ? "light" : "dark";
+		else state.preference.value = state.preference.value === "dark" ? "light" : "dark";
+	}
+	return {
+		theme,
+		resolvedTheme,
+		setTheme,
+		toggleTheme
+	};
+}
+/**
+* Inline script to prevent flash-of-wrong-theme on SSR pages.
+*
+* Paste it into `<head>` before any stylesheet links:
+*
+* ```html
+* <script><%= themeScript %><\/script>
+* ```
+*
+* It reads `localStorage` and sets `data-theme` on `<html>` synchronously,
+* before the browser paints, so the first frame is already in the right
+* theme. When no preference is stored, it follows the OS preference.
+*
+* The script is deliberately tiny and has no dependencies.
+*/
+var themeScript = `(() => {
+  const t = localStorage.getItem("${STORAGE_KEY}");
+  const d = window.matchMedia("${MEDIA_QUERY}").matches;
+  document.documentElement.setAttribute("${DATA_ATTR}", (t === "dark" || (!t && d)) ? "dark" : "light");
+})()`;
+//#endregion
+export { themeScript, useTheme };
+
+//# sourceMappingURL=theme.js.map

package/dist/packages/core/src/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../../../packages/core/src/theme.ts"],"sourcesContent":["/**\n * Theme switching for Loom.\n *\n * The single source of truth is the `data-theme` attribute on `<html>`.\n * This composable reads and writes it, persists the preference to\n * `localStorage`, and resolves `\"system\"` mode from the OS preference.\n *\n * SSR-safe: every DOM access is guarded. On the server, `theme` returns\n * the persisted or default preference, `resolvedTheme` resolves `\"system\"`\n * to `\"light\"` (the only safe default without a DOM), and the setter and\n * toggler are no-ops.\n *\n * Flash prevention: `themeScript` is a string of inline JavaScript that\n * reads `localStorage` and sets `data-theme` before the first paint.\n * Consumers rendering SSR inject it into `<head>`:\n *\n *   <script>${themeScript}</script>\n */\n\nimport { type Ref, computed, onScopeDispose, ref, watch } from \"vue\";\n\n/** The preference a user expresses — `\"system\"` defers to the OS. */\nexport type ThemePreference = \"light\" | \"dark\" | \"system\";\n\n/** The actual theme applied — `\"system\"` is resolved away. */\nexport type ResolvedTheme = \"light\" | \"dark\";\n\nconst STORAGE_KEY = \"loom:theme\";\nconst DATA_ATTR = \"data-theme\";\nconst MEDIA_QUERY = \"(prefers-color-scheme: dark)\";\n\n/** Default preference when nothing is stored and no OS signal exists. */\nconst DEFAULT_PREFERENCE: ThemePreference = \"system\";\n\n// --- Shared state (one per Vue app, not one per composable call) ---------\n\ninterface ThemeState {\n  preference: Ref<ThemePreference>;\n  systemIsDark: Ref<boolean>;\n  mediaQuery: MediaQueryList | null;\n  listener: ((e: MediaQueryListEvent) => void) | null;\n  scopeCount: number;\n}\n\n/**\n * Reactive shared state, lazily initialised on the first `useTheme()` call\n * and torn down with the effect scope that owns it. Multiple components\n * calling `useTheme()` in the same app share the same refs and the same\n * `matchMedia` listener.\n */\nlet sharedState: ThemeState | null = null;\n\n/**\n * Reset the shared state. Intended for test isolation only — a real app\n * never needs this because the state lives for the app's lifetime.\n */\nexport function _resetThemeState(): void {\n  if (sharedState?.mediaQuery && sharedState.listener) {\n    sharedState.mediaQuery.removeEventListener(\"change\", sharedState.listener);\n  }\n  sharedState = null;\n}\n\nfunction getSharedState(): ThemeState {\n  if (sharedState) {\n    sharedState.scopeCount++;\n    return sharedState;\n  }\n\n  // Read the stored preference, defaulting to \"system\".\n  let stored: ThemePreference = DEFAULT_PREFERENCE;\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY);\n    if (raw === \"light\" || raw === \"dark\" || raw === \"system\") {\n      stored = raw;\n    }\n  } catch {\n    // localStorage may be unavailable (SSR, private browsing).\n  }\n\n  // Apply the initial theme to the DOM so the very first render is correct.\n  const initial = resolveTheme(stored, getSystemIsDark());\n  applyToDOM(initial);\n\n  const preference = ref<ThemePreference>(stored);\n  const systemIsDark = ref<boolean>(getSystemIsDark());\n\n  // Listen for OS dark-mode changes.\n  let mediaQuery: MediaQueryList | null = null;\n  let listener: ((e: MediaQueryListEvent) => void) | null = null;\n\n  try {\n    mediaQuery = window.matchMedia(MEDIA_QUERY);\n    listener = (e: MediaQueryListEvent) => {\n      systemIsDark.value = e.matches;\n    };\n    mediaQuery.addEventListener(\"change\", listener);\n  } catch {\n    // matchMedia may be unavailable.\n  }\n\n  sharedState = {\n    preference,\n    systemIsDark,\n    mediaQuery,\n    listener,\n    scopeCount: 1,\n  };\n\n  return sharedState;\n}\n\nfunction releaseSharedState(): void {\n  if (!sharedState) return;\n  sharedState.scopeCount--;\n  if (sharedState.scopeCount > 0) return;\n\n  // Last consumer gone — tear down the listener.\n  if (sharedState.mediaQuery && sharedState.listener) {\n    sharedState.mediaQuery.removeEventListener(\"change\", sharedState.listener);\n  }\n  sharedState = null;\n}\n\n// --- DOM helpers --------------------------------------------------------\n\nfunction getSystemIsDark(): boolean {\n  try {\n    return window.matchMedia(MEDIA_QUERY).matches;\n  } catch {\n    return false;\n  }\n}\n\nfunction resolveTheme(pref: ThemePreference, systemDark: boolean): ResolvedTheme {\n  return pref === \"system\" ? (systemDark ? \"dark\" : \"light\") : pref;\n}\n\nfunction applyToDOM(theme: ResolvedTheme): void {\n  try {\n    document.documentElement.setAttribute(DATA_ATTR, theme);\n  } catch {\n    // document may be unavailable (SSR).\n  }\n}\n\nfunction persist(preference: ThemePreference): void {\n  try {\n    localStorage.setItem(STORAGE_KEY, preference);\n  } catch {\n    // localStorage may be unavailable.\n  }\n}\n\n// --- Public API ---------------------------------------------------------\n\n/**\n * Read and control the active Loom theme.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useTheme } from \"@ecoma-io/loom/theme\"\n * const { theme, resolvedTheme, setTheme, toggleTheme } = useTheme()\n * </script>\n *\n * <template>\n *   <button @click=\"toggleTheme\">\n *     {{ resolvedTheme === \"dark\" ? \"☀️\" : \"🌙\" }}\n *   </button>\n * </template>\n * ```\n */\nexport function useTheme(): {\n  readonly theme: Ref<ThemePreference>;\n  readonly resolvedTheme: Readonly<Ref<ResolvedTheme>>;\n  readonly setTheme: (preference: ThemePreference) => void;\n  readonly toggleTheme: () => void;\n} {\n  const state = getSharedState();\n\n  // Clean up the shared listener when the consuming scope disposes.\n  onScopeDispose(releaseSharedState);\n\n  /** The user's preference — `\"system\"` defers to the OS. */\n  const theme = computed<ThemePreference>({\n    get: () => state.preference.value,\n    set: (value: ThemePreference) => {\n      state.preference.value = value;\n    },\n  });\n\n  /** The actual active theme, with `\"system\"` resolved to `\"light\"` or `\"dark\"`. */\n  const resolvedTheme = computed<ResolvedTheme>(() =>\n    resolveTheme(state.preference.value, state.systemIsDark.value),\n  );\n\n  // Whenever the preference or the OS signal changes, apply the resolved\n  // theme to the DOM and persist the preference.\n  watch([() => state.preference.value, () => state.systemIsDark.value], () => {\n    applyToDOM(resolvedTheme.value);\n    persist(state.preference.value);\n  });\n\n  /** Set the theme preference explicitly. */\n  function setTheme(preference: ThemePreference): void {\n    state.preference.value = preference;\n  }\n\n  /** Toggle between light and dark. System preference stays system. */\n  function toggleTheme(): void {\n    if (state.preference.value === \"system\") {\n      // Toggle the resolved theme and lock to it, so the user can override\n      // the OS preference with one click.\n      state.preference.value = resolvedTheme.value === \"dark\" ? \"light\" : \"dark\";\n    } else {\n      state.preference.value = state.preference.value === \"dark\" ? \"light\" : \"dark\";\n    }\n  }\n\n  return { theme, resolvedTheme, setTheme, toggleTheme } as const;\n}\n\n/**\n * Inline script to prevent flash-of-wrong-theme on SSR pages.\n *\n * Paste it into `<head>` before any stylesheet links:\n *\n * ```html\n * <script><%= themeScript %></script>\n * ```\n *\n * It reads `localStorage` and sets `data-theme` on `<html>` synchronously,\n * before the browser paints, so the first frame is already in the right\n * theme. When no preference is stored, it follows the OS preference.\n *\n * The script is deliberately tiny and has no dependencies.\n */\nexport const themeScript = `(() => {\n  const t = localStorage.getItem(\"${STORAGE_KEY}\");\n  const d = window.matchMedia(\"${MEDIA_QUERY}\").matches;\n  document.documentElement.setAttribute(\"${DATA_ATTR}\", (t === \"dark\" || (!t && d)) ? \"dark\" : \"light\");\n})()`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2BA,IAAM,cAAc;AACpB,IAAM,YAAY;AAClB,IAAM,cAAc;;AAGpB,IAAM,qBAAsC;;;;;;;AAkB5C,IAAI,cAAiC;AAarC,SAAS,iBAA6B;CACpC,IAAI,aAAa;EACf,YAAY;EACZ,OAAO;CACT;CAGA,IAAI,SAA0B;CAC9B,IAAI;EACF,MAAM,MAAM,aAAa,QAAQ,WAAW;EAC5C,IAAI,QAAQ,WAAW,QAAQ,UAAU,QAAQ,UAC/C,SAAS;CAEb,QAAQ,CAER;CAIA,WADgB,aAAa,QAAQ,gBAAgB,CAC1C,CAAO;CAElB,MAAM,aAAa,IAAqB,MAAM;CAC9C,MAAM,eAAe,IAAa,gBAAgB,CAAC;CAGnD,IAAI,aAAoC;CACxC,IAAI,WAAsD;CAE1D,IAAI;EACF,aAAa,OAAO,WAAW,WAAW;EAC1C,YAAY,MAA2B;GACrC,aAAa,QAAQ,EAAE;EACzB;EACA,WAAW,iBAAiB,UAAU,QAAQ;CAChD,QAAQ,CAER;CAEA,cAAc;EACZ;EACA;EACA;EACA;EACA,YAAY;CACd;CAEA,OAAO;AACT;AAEA,SAAS,qBAA2B;CAClC,IAAI,CAAC,aAAa;CAClB,YAAY;CACZ,IAAI,YAAY,aAAa,GAAG;CAGhC,IAAI,YAAY,cAAc,YAAY,UACxC,YAAY,WAAW,oBAAoB,UAAU,YAAY,QAAQ;CAE3E,cAAc;AAChB;AAIA,SAAS,kBAA2B;CAClC,IAAI;EACF,OAAO,OAAO,WAAW,WAAW,CAAC,CAAC;CACxC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAS,aAAa,MAAuB,YAAoC;CAC/E,OAAO,SAAS,WAAY,aAAa,SAAS,UAAW;AAC/D;AAEA,SAAS,WAAW,OAA4B;CAC9C,IAAI;EACF,SAAS,gBAAgB,aAAa,WAAW,KAAK;CACxD,QAAQ,CAER;AACF;AAEA,SAAS,QAAQ,YAAmC;CAClD,IAAI;EACF,aAAa,QAAQ,aAAa,UAAU;CAC9C,QAAQ,CAER;AACF;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,WAKd;CACA,MAAM,QAAQ,eAAe;CAG7B,eAAe,kBAAkB;;CAGjC,MAAM,QAAQ,SAA0B;EACtC,WAAW,MAAM,WAAW;EAC5B,MAAM,UAA2B;GAC/B,MAAM,WAAW,QAAQ;EAC3B;CACF,CAAC;;CAGD,MAAM,gBAAgB,eACpB,aAAa,MAAM,WAAW,OAAO,MAAM,aAAa,KAAK,CAC/D;CAIA,MAAM,OAAO,MAAM,WAAW,aAAa,MAAM,aAAa,KAAK,SAAS;EAC1E,WAAW,cAAc,KAAK;EAC9B,QAAQ,MAAM,WAAW,KAAK;CAChC,CAAC;;CAGD,SAAS,SAAS,YAAmC;EACnD,MAAM,WAAW,QAAQ;CAC3B;;CAGA,SAAS,cAAoB;EAC3B,IAAI,MAAM,WAAW,UAAU,UAG7B,MAAM,WAAW,QAAQ,cAAc,UAAU,SAAS,UAAU;OAEpE,MAAM,WAAW,QAAQ,MAAM,WAAW,UAAU,SAAS,UAAU;CAE3E;CAEA,OAAO;EAAE;EAAO;EAAe;EAAU;CAAY;AACvD;;;;;;;;;;;;;;;;AAiBA,IAAa,cAAc;oCACS,YAAY;iCACf,YAAY;2CACF,UAAU"}

package/dist/packages/labels/src/ancestor-disabled.d.ts

@@ -0,0 +1,35 @@
+import { type Ref } from "vue";
+/**
+ * Whether an enclosing `<fieldset disabled>` has made this control unavailable
+ * — read off the element itself, not off anything a wrapper told us.
+ *
+ * The platform already answers this for `<input>`, `<button>`, `<select>` and
+ * `<textarea>`: a disabled fieldset makes every such descendant *actually
+ * disabled*, so `:disabled` matches, the tab stop goes and the control refuses
+ * input. Nothing in Loom has to help. It stops at the boundary of that list,
+ * and Reka builds several controls out of elements that are not on it — a
+ * `<span role="slider">`, a `<div role="spinbutton">`. Those keep their
+ * `tabindex="0"` and their arrow-key handlers inside a disabled group: measured
+ * in jsdom, a Slider in a `<fieldset disabled>` still took Home/End and moved
+ * its value, and a DatePicker segment still typed. A control that looks
+ * unavailable and still answers the keyboard is worse than one that looks
+ * available, so the appearance cannot be fixed on its own.
+ *
+ * **This is a read of the native attribute, not a second copy of it.**
+ * `Fieldset.vue`'s docblock rules out publishing `disabled` through the Field
+ * context, and the reason is precedence: a context is a claim a control may
+ * beat with `:disabled="false"`, while the native attribute disables it anyway,
+ * leaving a control that renders enabled and silently refuses input. Nothing
+ * here can drift that way, because there is nothing to beat — the answer is
+ * recomputed from the same DOM the browser is reading, so a control cannot
+ * disagree with the fieldset it is standing in. It also needs no Loom wrapper
+ * at all: a raw `<fieldset disabled>` a consumer wrote works exactly as one of
+ * ours does.
+ *
+ * The result is `false` on the server and until the effect first runs, which is
+ * deliberate. `watchPostEffect` does not run during SSR, so the markup a server
+ * emits matches the markup the client hydrates and the state settles in the
+ * same tick as mount — a hydration-time correction rather than a mismatch.
+ */
+export declare function useAncestorDisabled(target: () => Element | null | undefined): Readonly<Ref<boolean>>;
+//# sourceMappingURL=ancestor-disabled.d.ts.map

package/dist/packages/labels/src/ancestor-disabled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ancestor-disabled.d.ts","sourceRoot":"","sources":["../../../../packages/labels/src/ancestor-disabled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,OAAO,GAAG,IAAI,GAAG,SAAS,GACvC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAmCxB"}

package/dist/packages/labels/src/ancestor-disabled.js

@@ -0,0 +1,86 @@
+import { onScopeDispose, readonly, ref, watchPostEffect } from "vue";
+//#region packages/labels/src/ancestor-disabled.ts
+/**
+* Whether an enclosing `<fieldset disabled>` has made this control unavailable
+* — read off the element itself, not off anything a wrapper told us.
+*
+* The platform already answers this for `<input>`, `<button>`, `<select>` and
+* `<textarea>`: a disabled fieldset makes every such descendant *actually
+* disabled*, so `:disabled` matches, the tab stop goes and the control refuses
+* input. Nothing in Loom has to help. It stops at the boundary of that list,
+* and Reka builds several controls out of elements that are not on it — a
+* `<span role="slider">`, a `<div role="spinbutton">`. Those keep their
+* `tabindex="0"` and their arrow-key handlers inside a disabled group: measured
+* in jsdom, a Slider in a `<fieldset disabled>` still took Home/End and moved
+* its value, and a DatePicker segment still typed. A control that looks
+* unavailable and still answers the keyboard is worse than one that looks
+* available, so the appearance cannot be fixed on its own.
+*
+* **This is a read of the native attribute, not a second copy of it.**
+* `Fieldset.vue`'s docblock rules out publishing `disabled` through the Field
+* context, and the reason is precedence: a context is a claim a control may
+* beat with `:disabled="false"`, while the native attribute disables it anyway,
+* leaving a control that renders enabled and silently refuses input. Nothing
+* here can drift that way, because there is nothing to beat — the answer is
+* recomputed from the same DOM the browser is reading, so a control cannot
+* disagree with the fieldset it is standing in. It also needs no Loom wrapper
+* at all: a raw `<fieldset disabled>` a consumer wrote works exactly as one of
+* ours does.
+*
+* The result is `false` on the server and until the effect first runs, which is
+* deliberate. `watchPostEffect` does not run during SSR, so the markup a server
+* emits matches the markup the client hydrates and the state settles in the
+* same tick as mount — a hydration-time correction rather than a mismatch.
+*/
+function useAncestorDisabled(target) {
+	const disabled = ref(false);
+	let observer;
+	function sync() {
+		const start = target();
+		if (!start) {
+			observer?.disconnect();
+			disabled.value = false;
+			return;
+		}
+		const fieldsets = enclosingFieldsets(start);
+		observer ??= new MutationObserver(sync);
+		observer.disconnect();
+		for (const fieldset of fieldsets) observer.observe(fieldset, {
+			attributes: true,
+			attributeFilter: ["disabled"]
+		});
+		disabled.value = fieldsets.some((fieldset) => fieldset.disabled);
+	}
+	watchPostEffect(sync);
+	onScopeDispose(() => {
+		observer?.disconnect();
+	});
+	return readonly(disabled);
+}
+/**
+* The `<fieldset>` ancestors whose `disabled` would reach `start`, outermost
+* last, whether or not any of them currently carries the attribute — they are
+* what has to be watched for the attribute arriving.
+*
+* The walk climbs child-by-child rather than calling `closest("fieldset")`
+* because of the exemption in the "actually disabled" rule: controls inside a
+* disabled fieldset's **first** `<legend>` stay available, which is what makes
+* a switch in the legend that re-enables its own group possible. Reaching a
+* fieldset through that legend is reaching a fieldset that does not disable
+* you, so it is skipped — and the walk continues past it, since a fieldset
+* further out may still disable the legend itself.
+*/
+function enclosingFieldsets(start) {
+	const found = [];
+	let node = start;
+	while (node) {
+		const parent = node.parentElement;
+		if (parent instanceof HTMLFieldSetElement && node !== parent.querySelector(":scope > legend")) found.push(parent);
+		node = parent;
+	}
+	return found;
+}
+//#endregion
+export { useAncestorDisabled };
+
+//# sourceMappingURL=ancestor-disabled.js.map

package/dist/packages/labels/src/ancestor-disabled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ancestor-disabled.js","names":[],"sources":["../../../../packages/labels/src/ancestor-disabled.ts"],"sourcesContent":["import { onScopeDispose, readonly, ref, watchPostEffect, type Ref } from \"vue\";\n\n/**\n * Whether an enclosing `<fieldset disabled>` has made this control unavailable\n * — read off the element itself, not off anything a wrapper told us.\n *\n * The platform already answers this for `<input>`, `<button>`, `<select>` and\n * `<textarea>`: a disabled fieldset makes every such descendant *actually\n * disabled*, so `:disabled` matches, the tab stop goes and the control refuses\n * input. Nothing in Loom has to help. It stops at the boundary of that list,\n * and Reka builds several controls out of elements that are not on it — a\n * `<span role=\"slider\">`, a `<div role=\"spinbutton\">`. Those keep their\n * `tabindex=\"0\"` and their arrow-key handlers inside a disabled group: measured\n * in jsdom, a Slider in a `<fieldset disabled>` still took Home/End and moved\n * its value, and a DatePicker segment still typed. A control that looks\n * unavailable and still answers the keyboard is worse than one that looks\n * available, so the appearance cannot be fixed on its own.\n *\n * **This is a read of the native attribute, not a second copy of it.**\n * `Fieldset.vue`'s docblock rules out publishing `disabled` through the Field\n * context, and the reason is precedence: a context is a claim a control may\n * beat with `:disabled=\"false\"`, while the native attribute disables it anyway,\n * leaving a control that renders enabled and silently refuses input. Nothing\n * here can drift that way, because there is nothing to beat — the answer is\n * recomputed from the same DOM the browser is reading, so a control cannot\n * disagree with the fieldset it is standing in. It also needs no Loom wrapper\n * at all: a raw `<fieldset disabled>` a consumer wrote works exactly as one of\n * ours does.\n *\n * The result is `false` on the server and until the effect first runs, which is\n * deliberate. `watchPostEffect` does not run during SSR, so the markup a server\n * emits matches the markup the client hydrates and the state settles in the\n * same tick as mount — a hydration-time correction rather than a mismatch.\n */\nexport function useAncestorDisabled(\n  target: () => Element | null | undefined,\n): Readonly<Ref<boolean>> {\n  const disabled = ref(false);\n\n  // Kept rather than chained off the constructor: an observer holds a strong\n  // reference to everything it watches, and `disconnect()` is the only thing\n  // that releases them.\n  let observer: MutationObserver | undefined;\n\n  function sync(): void {\n    const start = target();\n    if (!start) {\n      observer?.disconnect();\n      disabled.value = false;\n      return;\n    }\n\n    const fieldsets = enclosingFieldsets(start);\n    observer ??= new MutationObserver(sync);\n    // Re-observed wholesale rather than diffed. The set is an element's\n    // ancestor fieldsets — one or two of them in any real form — and the\n    // attribute filter means nothing else in the document wakes this up.\n    observer.disconnect();\n    for (const fieldset of fieldsets) {\n      observer.observe(fieldset, { attributes: true, attributeFilter: [\"disabled\"] });\n    }\n\n    disabled.value = fieldsets.some((fieldset) => fieldset.disabled);\n  }\n\n  watchPostEffect(sync);\n  onScopeDispose(() => {\n    observer?.disconnect();\n  });\n\n  return readonly(disabled);\n}\n\n/**\n * The `<fieldset>` ancestors whose `disabled` would reach `start`, outermost\n * last, whether or not any of them currently carries the attribute — they are\n * what has to be watched for the attribute arriving.\n *\n * The walk climbs child-by-child rather than calling `closest(\"fieldset\")`\n * because of the exemption in the \"actually disabled\" rule: controls inside a\n * disabled fieldset's **first** `<legend>` stay available, which is what makes\n * a switch in the legend that re-enables its own group possible. Reaching a\n * fieldset through that legend is reaching a fieldset that does not disable\n * you, so it is skipped — and the walk continues past it, since a fieldset\n * further out may still disable the legend itself.\n */\nfunction enclosingFieldsets(start: Element): HTMLFieldSetElement[] {\n  const found: HTMLFieldSetElement[] = [];\n  let node: Element | null = start;\n\n  while (node) {\n    const parent: Element | null = node.parentElement;\n    if (parent instanceof HTMLFieldSetElement && node !== parent.querySelector(\":scope > legend\")) {\n      found.push(parent);\n    }\n    node = parent;\n  }\n\n  return found;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,oBACd,QACwB;CACxB,MAAM,WAAW,IAAI,KAAK;CAK1B,IAAI;CAEJ,SAAS,OAAa;EACpB,MAAM,QAAQ,OAAO;EACrB,IAAI,CAAC,OAAO;GACV,UAAU,WAAW;GACrB,SAAS,QAAQ;GACjB;EACF;EAEA,MAAM,YAAY,mBAAmB,KAAK;EAC1C,aAAa,IAAI,iBAAiB,IAAI;EAItC,SAAS,WAAW;EACpB,KAAK,MAAM,YAAY,WACrB,SAAS,QAAQ,UAAU;GAAE,YAAY;GAAM,iBAAiB,CAAC,UAAU;EAAE,CAAC;EAGhF,SAAS,QAAQ,UAAU,MAAM,aAAa,SAAS,QAAQ;CACjE;CAEA,gBAAgB,IAAI;CACpB,qBAAqB;EACnB,UAAU,WAAW;CACvB,CAAC;CAED,OAAO,SAAS,QAAQ;AAC1B;;;;;;;;;;;;;;AAeA,SAAS,mBAAmB,OAAuC;CACjE,MAAM,QAA+B,CAAC;CACtC,IAAI,OAAuB;CAE3B,OAAO,MAAM;EACX,MAAM,SAAyB,KAAK;EACpC,IAAI,kBAAkB,uBAAuB,SAAS,OAAO,cAAc,iBAAiB,GAC1F,MAAM,KAAK,MAAM;EAEnB,OAAO;CACT;CAEA,OAAO;AACT"}