npm - @ecoma-io/loom - Versions diffs - 0.2.0 → 0.4.0 - Mend

@ecoma-io/loom 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1413) hide show

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

@@ -0,0 +1,189 @@
+import { EffectScope, computed, getCurrentScope, 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;
+/** Fired once, at the first `useTheme()` call made outside any active effect scope. */
+var warnedOutsideScope = false;
+function getSharedState() {
+	const scoped = getCurrentScope() !== void 0;
+	if (!scoped && !warnedOutsideScope) {
+		warnedOutsideScope = true;
+		console.warn("[loom] useTheme() called outside an active effect scope; the shared theme state can never be released. Call it from setup() or inside an effectScope().");
+	}
+	if (sharedState) {
+		if (scoped) 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 {}
+	const owner = new EffectScope(true);
+	const state = {
+		preference,
+		systemIsDark,
+		mediaQuery,
+		listener,
+		scopeCount: scoped ? 1 : 0,
+		owner,
+		lastPersisted: stored
+	};
+	sharedState = state;
+	owner.run(() => {
+		watch([preference, systemIsDark], () => {
+			applyToDOM(resolveTheme(preference.value, systemIsDark.value));
+			if (preference.value !== state.lastPersisted) {
+				state.lastPersisted = preference.value;
+				persist(state.lastPersisted);
+			}
+		});
+	});
+	return state;
+}
+function releaseSharedState() {
+	if (!sharedState) return;
+	sharedState.scopeCount--;
+	if (sharedState.scopeCount > 0) return;
+	sharedState.owner.stop();
+	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.
+*
+* Call it from a component `setup()` or inside an `effectScope()` — that
+* scope is what releases the shared state when its last real consumer
+* unmounts. A call from outside any effect scope still works, but it can
+* never be released, so it is not counted and development warns once; the
+* shared state simply lives as long as whatever creates it next counts for.
+* The DOM-apply and persistence side effects are created once per app in a
+* detached scope of their own — never once per consumer — and storage is
+* only written when the stored preference actually changes.
+*
+* @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();
+	if (getCurrentScope() !== void 0) 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));
+	/** 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 ADDED Viewed

@@ -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, EffectScope, computed, getCurrentScope, 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 /** Consumers that can be released — see `useTheme` for who does not count. */\n scopeCount: number;\n /**\n * The detached scope that owns the apply/persist watcher below. The side\n * effects are the shared state's, not the first consumer's: owned by a\n * consumer's scope they would die the day that component unmounted while\n * later ones stayed mounted, leaving an app whose theme button had gone\n * silent. Detached so creation inside a component setup does not link it\n * into that component's own scope.\n */\n owner: EffectScope;\n /**\n * The preference last written to `localStorage`. `\"system\"` resolves away,\n * so OS dark-mode flips fire the watcher with a preference that has not\n * changed — without this, every flip rewrites storage with the same value.\n */\n lastPersisted: ThemePreference;\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/** Fired once, at the first `useTheme()` call made outside any active effect scope. */\nlet warnedOutsideScope = false;\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) {\n sharedState.owner.stop();\n if (sharedState.mediaQuery && sharedState.listener) {\n sharedState.mediaQuery.removeEventListener(\"change\", sharedState.listener);\n }\n }\n sharedState = null;\n warnedOutsideScope = false;\n}\n\nfunction getSharedState(): ThemeState {\n // A consumer is released by the effect scope it was called from, so a call\n // from outside any scope is one that could never be released — counting it\n // would pin the matchMedia listener open forever. It still gets the state,\n // but it does not count toward teardown, and development is told once so\n // the eventual leak is attributed to a call site instead of discovered as\n // an immortal listener.\n const scoped = getCurrentScope() !== undefined;\n if (!scoped && !warnedOutsideScope) {\n warnedOutsideScope = true;\n console.warn(\n \"[loom] useTheme() called outside an active effect scope; the shared theme state can never be released. Call it from setup() or inside an effectScope().\",\n );\n }\n\n if (sharedState) {\n if (scoped) 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 const owner = new EffectScope(true);\n const state: ThemeState = {\n preference,\n systemIsDark,\n mediaQuery,\n listener,\n scopeCount: scoped ? 1 : 0,\n owner,\n lastPersisted: stored,\n };\n sharedState = state;\n\n // The apply/persist watcher is created exactly once, here in the detached\n // scope that owns the shared state — never per consumer. N components\n // calling `useTheme()` must not mean N writes to `data-theme` and\n // `localStorage` on every change.\n owner.run(() => {\n watch([preference, systemIsDark], () => {\n // Applied even when the preference itself has not moved: an OS flip\n // under `\"system\"` resolves differently without any user action.\n applyToDOM(resolveTheme(preference.value, systemIsDark.value));\n if (preference.value !== state.lastPersisted) {\n state.lastPersisted = preference.value;\n persist(state.lastPersisted);\n }\n });\n });\n\n return state;\n}\n\nfunction releaseSharedState(): void {\n if (!sharedState) return;\n sharedState.scopeCount--;\n if (sharedState.scopeCount > 0) return;\n\n // Last counted consumer gone — stop the side effects, then the listener.\n sharedState.owner.stop();\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 * Call it from a component `setup()` or inside an `effectScope()` — that\n * scope is what releases the shared state when its last real consumer\n * unmounts. A call from outside any effect scope still works, but it can\n * never be released, so it is not counted and development warns once; the\n * shared state simply lives as long as whatever creates it next counts for.\n * The DOM-apply and persistence side effects are created once per app in a\n * detached scope of their own — never once per consumer — and storage is\n * only written when the stored preference actually changes.\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 state when the consuming scope disposes. Only a call\n // from inside an active scope is registered — and only such a call was\n // counted by `getSharedState()` in the first place; outside one,\n // `onScopeDispose` would silently do nothing and the count would never\n // come back down.\n if (getCurrentScope() !== undefined) 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 /** 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":"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"}

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

@@ -0,0 +1,39 @@
+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 — native roots inherit a fieldset's
+ * disabling and composites call this composable instead, which is the house
+ * rule stated in CONTRIBUTING.md's accessibility section.
+ *
+ * That answer stops at the boundary of that short 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 ADDED Viewed

	@@ -0,0 +1 @@
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;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 ADDED Viewed

@@ -0,0 +1,90 @@
+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 — native roots inherit a fieldset's
+* disabling and composites call this composable instead, which is the house
+* rule stated in CONTRIBUTING.md's accessibility section.
+*
+* That answer stops at the boundary of that short 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 ADDED Viewed

@@ -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 — native roots inherit a fieldset's\n * disabling and composites call this composable instead, which is the house\n * rule stated in CONTRIBUTING.md's accessibility section.\n *\n * That answer stops at the boundary of that short 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,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"}