@ojiepermana/angular 22.1.14 → 22.2.0

package/fesm2022/ojiepermana-angular-theme-styles.mjs

@@ -1,787 +1,588 @@
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, signal, effect, computed, DestroyRef, InjectionToken, Service, makeEnvironmentProviders, provideEnvironmentInitializer, PLATFORM_ID } from '@angular/core';
-import { documentLocalStorage } from '@ojiepermana/angular/component/utils/core';
-
-/**
- * One place for the "a preference that lives in localStorage and shows up as an
- * attribute on `<html>`" pattern that every theme axis needs.
- *
- * Each axis service used to hand-roll the same four private methods (`storage`,
- * `readStorage`, `persist`, plus an effect writing the attribute) around a
- * `signal`. That is the whole body of the simpler services, so a fix to any of
- * it had to be made five times.
- *
- * The storage half itself lives in `@ojiepermana/angular/component/utils/core`,
- * because `navigation` needs it too and navigation must not depend on this
- * package.
- */
-/**
- * A persisted value, without the DOM half.
- *
- * Useful on its own for a preference that is not an attribute: the brand axis
- * stores an object and paints custom properties instead.
- *
- * Two timing details the theme services depend on:
- *
- *  - the stored value is read SYNCHRONOUSLY here, not in an effect, because
- *    every service exposes its state to consumers that read it during the same
- *    change detection pass;
- *  - the effect writes on its FIRST run, so storage holds the resolved default
- *    immediately after construction even when nothing was stored.
- */
+import { DOCUMENT, isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { DestroyRef, InjectionToken, PLATFORM_ID, Service, computed, effect, inject, makeEnvironmentProviders, provideEnvironmentInitializer, signal } from "@angular/core";
+import { documentLocalStorage } from "@ojiepermana/angular/component/utils/core";
 function persistedSignal(options) {
-    const documentRef = options.documentRef !== undefined ? options.documentRef : inject(DOCUMENT, { optional: true });
-    const storage = documentLocalStorage(documentRef);
-    const state = signal(options.parse(storage.read(options.key)), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-    effect(() => {
-        const serialized = options.serialize(state());
-        if (serialized === null) {
-            storage.remove(options.key);
-        }
-        else {
-            storage.write(options.key, serialized);
-        }
-    });
-    return state;
+	const documentRef = options.documentRef !== void 0 ? options.documentRef : inject(DOCUMENT, { optional: true });
+	const storage = documentLocalStorage(documentRef);
+	const state = signal(options.parse(storage.read(options.key)), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	effect(() => {
+		const serialized = options.serialize(state());
+		if (serialized === null) storage.remove(options.key);
+		else storage.write(options.key, serialized);
+	});
+	return state;
 }
-/**
- * Mirror a reactive string onto one or more `<html>` attributes. A `null` value
- * removes them.
- */
 function htmlAttributeEffect(options) {
-    const documentRef = options.documentRef !== undefined ? options.documentRef : inject(DOCUMENT, { optional: true });
-    const attributes = typeof options.attribute === 'string' ? [options.attribute] : options.attribute;
-    effect(() => {
-        const value = options.source();
-        const element = documentRef?.documentElement;
-        if (!element)
-            return;
-        for (const attribute of attributes) {
-            if (value === null) {
-                element.removeAttribute(attribute);
-            }
-            else {
-                element.setAttribute(attribute, value);
-            }
-        }
-    });
+	const documentRef = options.documentRef !== void 0 ? options.documentRef : inject(DOCUMENT, { optional: true });
+	const attributes = typeof options.attribute === "string" ? [options.attribute] : options.attribute;
+	effect(() => {
+		const value = options.source();
+		const element = documentRef?.documentElement;
+		if (!element) return;
+		for (const attribute of attributes) if (value === null) element.removeAttribute(attribute);
+		else element.setAttribute(attribute, value);
+	});
 }
-/** Mirror reactive inline custom properties onto `<html>`. A `null` value removes one. */
 function htmlStylePropertyEffect(options) {
-    const documentRef = options.documentRef !== undefined ? options.documentRef : inject(DOCUMENT, { optional: true });
-    effect(() => {
-        const properties = options.source();
-        const element = documentRef?.documentElement;
-        if (!element)
-            return;
-        for (const [property, value] of Object.entries(properties)) {
-            if (value === null) {
-                element.style.removeProperty(property);
-            }
-            else {
-                element.style.setProperty(property, value);
-            }
-        }
-    });
+	const documentRef = options.documentRef !== void 0 ? options.documentRef : inject(DOCUMENT, { optional: true });
+	effect(() => {
+		const properties = options.source();
+		const element = documentRef?.documentElement;
+		if (!element) return;
+		for (const [property, value] of Object.entries(properties)) if (value === null) element.style.removeProperty(property);
+		else element.style.setProperty(property, value);
+	});
 }
-/**
- * A persisted preference that also shows up as an attribute on `<html>`.
- *
- * The stored value wins over the configured default, which is the rule every
- * axis already followed.
- */
 function persistedHtmlAttributeSignal(options) {
-    const documentRef = options.documentRef !== undefined ? options.documentRef : inject(DOCUMENT, { optional: true });
-    const state = persistedSignal({
-        key: options.key,
-        documentRef,
-        // A stored value wins; otherwise fall back to the configured default. Both
-        // go through `normalize`, so neither can put a junk value into the signal.
-        //
-        // An empty stored string counts as ABSENT rather than as a value: no axis
-        // has a legal `''`, so a key cleared to it (a storage the browser or another
-        // tab emptied, a hand-edited entry) is a key with nothing in it. Reading it
-        // as present would send it through `normalize` to the LIBRARY default and
-        // silently discard the default the consumer configured.
-        parse: (raw) => {
-            const stored = raw !== null && raw !== '' ? raw : null;
-            return options.normalize(stored ?? options.normalize(options.initial));
-        },
-        serialize: (value) => value,
-    });
-    // A computed, so whatever the resolver reads is tracked alongside the stored
-    // value. That is what keeps a `'system'` mode following the operating system
-    // while still persisting `'system'` rather than the resolved light or dark.
-    const resolveAttributeValue = options.resolveAttributeValue;
-    const attributeValue = resolveAttributeValue
-        ? computed(() => resolveAttributeValue(state()))
-        : computed(() => state());
-    htmlAttributeEffect({
-        attribute: options.attribute,
-        source: () => attributeValue(),
-        documentRef,
-    });
-    return {
-        value: state.asReadonly(),
-        attributeValue,
-        set: (next) => state.set(next),
-    };
+	const documentRef = options.documentRef !== void 0 ? options.documentRef : inject(DOCUMENT, { optional: true });
+	const state = persistedSignal({
+		key: options.key,
+		documentRef,
+		parse: (raw) => {
+			const stored = raw !== null && raw !== "" ? raw : null;
+			return options.normalize(stored ?? options.normalize(options.initial));
+		},
+		serialize: (value) => value
+	});
+	const resolveAttributeValue = options.resolveAttributeValue;
+	const attributeValue = resolveAttributeValue ? computed(() => resolveAttributeValue(state())) : computed(() => state());
+	htmlAttributeEffect({
+		attribute: options.attribute,
+		source: () => attributeValue(),
+		documentRef
+	});
+	return {
+		value: state.asReadonly(),
+		attributeValue,
+		set: (next) => state.set(next)
+	};
 }
-/**
- * `(prefers-color-scheme: dark)` as a signal, torn down with the injection
- * context that created it.
- *
- * Lives here because it is the other half of the same story: an axis whose
- * PERSISTED value is `'system'` still has to write a concrete `light` or `dark`
- * to the DOM, and this is what makes that reactive.
- */
 function prefersDarkSignal(documentRef) {
-    const resolved = documentRef !== undefined ? documentRef : inject(DOCUMENT, { optional: true });
-    const mediaQueryList = resolved?.defaultView?.matchMedia?.('(prefers-color-scheme: dark)') ?? null;
-    const state = signal(mediaQueryList?.matches ?? false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-    if (mediaQueryList) {
-        const onChange = (event) => state.set(event.matches);
-        mediaQueryList.addEventListener('change', onChange);
-        inject(DestroyRef).onDestroy(() => mediaQueryList.removeEventListener('change', onChange));
-    }
-    return state.asReadonly();
+	const mediaQueryList = (documentRef !== void 0 ? documentRef : inject(DOCUMENT, { optional: true }))?.defaultView?.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
+	const state = signal(mediaQueryList?.matches ?? false, ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	if (mediaQueryList) {
+		const onChange = (event) => state.set(event.matches);
+		mediaQueryList.addEventListener("change", onChange);
+		inject(DestroyRef).onDestroy(() => mediaQueryList.removeEventListener("change", onChange));
+	}
+	return state.asReadonly();
 }
-
-/**
- * WCAG contrast math for tokens decided at runtime.
- *
- * A TypeScript port of scripts/theme-contrast.mjs, which is where the built-in
- * palettes are measured at generation time. The two halves have to agree: a
- * brand a consumer sets through `ThemeBrandService` lands on `--primary` and
- * `--ring` exactly like a generated accent does, so it is held to the same
- * thresholds by the same formula rather than a second approximation of it.
- *
- * Everything works on the bare HSL triplet (`H S% L%`) the CSS consumes through
- * `hsl(var(--token))`, so the numbers asserted are the numbers shipped. Parsing
- * returns `null` instead of throwing, because the caller here is a setter on a
- * running app and not a build step.
- */
-/** WCAG 1.4.3 minimum for normal-size text. */
 const TEXT_CONTRAST_MIN = 4.5;
-/** WCAG 1.4.11 minimum for non-text contrast (focus rings, borders, icons). */
-const NON_TEXT_CONTRAST_MIN = 3;
-/**
- * Extra headroom used when solving for a lightness, so a value that only just
- * clears the threshold cannot fail an assertion on a rounding difference.
- */
-const SOLVE_MARGIN = 0.02;
-const NUMBER = String.raw `[+-]?(?:\d+(?:\.\d+)?|\.\d+)`;
-// CSS accepts the components separated by commas or by whitespace, and the hue
-// as any <angle>. Every one of those forms paints, so every one of them has to
-// be measurable — a syntax this rejected used to walk straight past the brand
-// contrast guarantee.
-const SEPARATOR = String.raw `(?:\s*,\s*|\s+)`;
-const HSL_TRIPLET = new RegExp(`^\\s*(${NUMBER})(deg|grad|rad|turn)?${SEPARATOR}(${NUMBER})%${SEPARATOR}(${NUMBER})%\\s*$`, 'i');
+const NUMBER = String.raw`[+-]?(?:\d+(?:\.\d+)?|\.\d+)`;
+const SEPARATOR = String.raw`(?:\s*,\s*|\s+)`;
+const HSL_TRIPLET = new RegExp(`^\\s*(${NUMBER})(deg|grad|rad|turn)?${SEPARATOR}(${NUMBER})%${SEPARATOR}(${NUMBER})%\\s*$`, "i");
 const HEX_COLOR = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
-/** `<angle>` units CSS allows for a hue, as a multiplier onto degrees. */
 const DEGREES_PER_UNIT = {
-    deg: 1,
-    grad: 0.9,
-    rad: 180 / Math.PI,
-    turn: 360,
+	deg: 1,
+	grad: .9,
+	rad: 180 / Math.PI,
+	turn: 360
 };
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
-/**
- * Wrap a hue into 0..360 the way CSS does, so `-240` and `120` are the same
- * colour here as well and cannot measure differently.
- */
-const normalizeHue = (hue) => ((hue % 360) + 360) % 360;
-/** Read an HSL triplet string (`'221 83% 48%'`). `null` when it is not one. */
+const normalizeHue = (hue) => (hue % 360 + 360) % 360;
 function parseHslTriplet(value) {
-    const match = HSL_TRIPLET.exec(value);
-    if (!match) {
-        return null;
-    }
-    const [h, s, l] = [Number(match[1]), Number(match[3]), Number(match[4])];
-    if (![h, s, l].every(Number.isFinite)) {
-        return null;
-    }
-    return { h: normalizeHue(h * DEGREES_PER_UNIT[match[2]?.toLowerCase() ?? 'deg']), s, l };
+	const match = HSL_TRIPLET.exec(value);
+	if (!match) return null;
+	const [h, s, l] = [
+		Number(match[1]),
+		Number(match[3]),
+		Number(match[4])
+	];
+	if (![
+		h,
+		s,
+		l
+	].every(Number.isFinite)) return null;
+	return {
+		h: normalizeHue(h * DEGREES_PER_UNIT[match[2]?.toLowerCase() ?? "deg"]),
+		s,
+		l
+	};
 }
-/** Format numbers back into the triplet form the CSS consumes. */
 function formatHslTriplet({ h, s, l }) {
-    return `${h} ${clamp(Math.round(s), 0, 100)}% ${clamp(Math.round(l), 0, 100)}%`;
+	return `${h} ${clamp(Math.round(s), 0, 100)}% ${clamp(Math.round(l), 0, 100)}%`;
 }
-/** `#rgb` / `#rrggbb` as an HSL triplet. `null` when the input is not a hex color. */
 function hexToHslTriplet(value) {
-    const match = HEX_COLOR.exec(value.trim());
-    if (!match) {
-        return null;
-    }
-    const digits = match[1];
-    const expanded = digits.length === 3
-        ? digits
-            .split('')
-            .map((digit) => digit + digit)
-            .join('')
-        : digits;
-    const [red, green, blue] = [0, 2, 4].map((offset) => Number.parseInt(expanded.slice(offset, offset + 2), 16) / 255);
-    const largest = Math.max(red, green, blue);
-    const smallest = Math.min(red, green, blue);
-    const delta = largest - smallest;
-    const lightness = (largest + smallest) / 2;
-    let hue = 0;
-    if (delta !== 0) {
-        if (largest === red)
-            hue = 60 * (((green - blue) / delta + 6) % 6);
-        else if (largest === green)
-            hue = 60 * ((blue - red) / delta + 2);
-        else
-            hue = 60 * ((red - green) / delta + 4);
-    }
-    const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
-    return formatHslTriplet({ h: Math.round(hue), s: saturation * 100, l: lightness * 100 });
+	const match = HEX_COLOR.exec(value.trim());
+	if (!match) return null;
+	const digits = match[1];
+	const expanded = digits.length === 3 ? digits.split("").map((digit) => digit + digit).join("") : digits;
+	const [red, green, blue] = [
+		0,
+		2,
+		4
+	].map((offset) => Number.parseInt(expanded.slice(offset, offset + 2), 16) / 255);
+	const largest = Math.max(red, green, blue);
+	const smallest = Math.min(red, green, blue);
+	const delta = largest - smallest;
+	const lightness = (largest + smallest) / 2;
+	let hue = 0;
+	if (delta !== 0) {
+		if (largest === red) hue = 60 * (((green - blue) / delta + 6) % 6);
+		else if (largest === green) hue = 60 * ((blue - red) / delta + 2);
+		else hue = 60 * ((red - green) / delta + 4);
+	}
+	const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
+	return formatHslTriplet({
+		h: Math.round(hue),
+		s: saturation * 100,
+		l: lightness * 100
+	});
 }
-/** HSL to sRGB, each channel in the 0..1 range (CSS Color 4 algorithm). */
 function hslToRgb({ h, s, l }) {
-    const saturation = clamp(s, 0, 100) / 100;
-    const lightness = clamp(l, 0, 100) / 100;
-    const k = (n) => (n + h / 30) % 12;
-    const a = saturation * Math.min(lightness, 1 - lightness);
-    const channel = (n) => lightness - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
-    return [channel(0), channel(8), channel(4)];
-}
-/** sRGB channel to linear light, per the WCAG relative luminance definition. */
-const toLinear = (channel) => channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
-/** WCAG relative luminance of an HSL triplet. */
+	const saturation = clamp(s, 0, 100) / 100;
+	const lightness = clamp(l, 0, 100) / 100;
+	const k = (n) => (n + h / 30) % 12;
+	const a = saturation * Math.min(lightness, 1 - lightness);
+	const channel = (n) => lightness - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+	return [
+		channel(0),
+		channel(8),
+		channel(4)
+	];
+}
+const toLinear = (channel) => channel <= .03928 ? channel / 12.92 : Math.pow((channel + .055) / 1.055, 2.4);
 function relativeLuminance(triplet) {
-    const parsed = parseHslTriplet(triplet);
-    if (!parsed) {
-        return 0;
-    }
-    const [r, g, b] = hslToRgb(parsed);
-    return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+	const parsed = parseHslTriplet(triplet);
+	if (!parsed) return 0;
+	const [r, g, b] = hslToRgb(parsed);
+	return .2126 * toLinear(r) + .7152 * toLinear(g) + .0722 * toLinear(b);
 }
-/** WCAG contrast ratio between two HSL triplets. Order does not matter. */
 function contrastRatio(a, b) {
-    const ya = relativeLuminance(a);
-    const yb = relativeLuminance(b);
-    return (Math.max(ya, yb) + 0.05) / (Math.min(ya, yb) + 0.05);
+	const ya = relativeLuminance(a);
+	const yb = relativeLuminance(b);
+	return (Math.max(ya, yb) + .05) / (Math.min(ya, yb) + .05);
 }
-/**
- * Walk outward from `from` in 1% lightness steps and return the nearest
- * lightness whose color clears `min` against every entry in `against`. Keeping
- * hue and saturation fixed means the brand's identity survives; only how light
- * it is moves, and it moves as little as the threshold allows.
- *
- * `against` is a list so a value that has to hold over more than one surface can
- * be solved in one pass; the brand ring solves against one `--background` per
- * mode, because it is painted per mode.
- *
- * `null` when no lightness in 0..100 satisfies every background.
- */
 function solveLightnessNearest(options) {
-    const target = options.min + (options.margin ?? SOLVE_MARGIN);
-    const start = Math.round(clamp(options.from, 0, 100));
-    for (let delta = 0; delta <= 100; delta += 1) {
-        for (const candidate of delta === 0 ? [start] : [start - delta, start + delta]) {
-            if (candidate < 0 || candidate > 100)
-                continue;
-            const triplet = formatHslTriplet({ h: options.h, s: options.s, l: candidate });
-            if (options.against.every((background) => contrastRatio(triplet, background) >= target)) {
-                return triplet;
-            }
-        }
-    }
-    return null;
+	const target = options.min + (options.margin ?? .02);
+	const start = Math.round(clamp(options.from, 0, 100));
+	for (let delta = 0; delta <= 100; delta += 1) for (const candidate of delta === 0 ? [start] : [start - delta, start + delta]) {
+		if (candidate < 0 || candidate > 100) continue;
+		const triplet = formatHslTriplet({
+			h: options.h,
+			s: options.s,
+			l: candidate
+		});
+		if (options.against.every((background) => contrastRatio(triplet, background) >= target)) return triplet;
+	}
+	return null;
 }
-/**
- * Keep a designed foreground when it already clears the threshold, otherwise
- * nudge its lightness to the nearest value that does. Anything unparsable is
- * returned untouched — there is nothing to measure.
- */
 function fitForeground(options) {
-    const min = options.min ?? TEXT_CONTRAST_MIN;
-    if (contrastRatio(options.foreground, options.background) >= min) {
-        return options.foreground;
-    }
-    const parsed = parseHslTriplet(options.foreground);
-    if (!parsed) {
-        return options.foreground;
-    }
-    return (solveLightnessNearest({
-        h: parsed.h,
-        s: parsed.s,
-        against: [options.background],
-        min,
-        from: parsed.l,
-    }) ?? options.foreground);
-}
-
-const THEME_OPTIONS = new InjectionToken('THEME_OPTIONS');
-
-const THEME_MODES = ['light', 'dark', 'system'];
-const RESOLVED_THEME_MODES = ['light', 'dark'];
-/**
- * FluxUI-style accent palettes (axis `theme-color`). `base` = core theme (no
- * override); `brand` = the consumer's `--brand` color. Others re-tint the full
- * palette. Order mirrors the FluxUI accent picker (base…rose) + `brand`.
- */
+	const min = options.min ?? 4.5;
+	if (contrastRatio(options.foreground, options.background) >= min) return options.foreground;
+	const parsed = parseHslTriplet(options.foreground);
+	if (!parsed) return options.foreground;
+	return solveLightnessNearest({
+		h: parsed.h,
+		s: parsed.s,
+		against: [options.background],
+		min,
+		from: parsed.l
+	}) ?? options.foreground;
+}
+const THEME_OPTIONS = new InjectionToken("THEME_OPTIONS");
+const THEME_MODES = [
+	"light",
+	"dark",
+	"system"
+];
+const RESOLVED_THEME_MODES = ["light", "dark"];
 const THEME_COLORS = [
-    'base',
-    'red',
-    'orange',
-    'amber',
-    'yellow',
-    'lime',
-    'green',
-    'emerald',
-    'teal',
-    'cyan',
-    'sky',
-    'blue',
-    'indigo',
-    'violet',
-    'purple',
-    'fuchsia',
-    'pink',
-    'rose',
-    'brand',
+	"base",
+	"red",
+	"orange",
+	"amber",
+	"yellow",
+	"lime",
+	"green",
+	"emerald",
+	"teal",
+	"cyan",
+	"sky",
+	"blue",
+	"indigo",
+	"violet",
+	"purple",
+	"fuchsia",
+	"pink",
+	"rose",
+	"brand"
 ];
-/**
- * Neutral families (axis `theme-neutral`). `base` = core theme neutrals and lets
- * Layout patterns follow the accent. Non-base values override both the gray
- * family and Layout's decorative pattern hue, while composing with any accent.
- */
 const THEME_NEUTRALS = [
-    'base',
-    'slate',
-    'gray',
-    'zinc',
-    'neutral',
-    'stone',
-    'mauve',
-    'olive',
-    'mist',
-    'taupe',
+	"base",
+	"slate",
+	"gray",
+	"zinc",
+	"neutral",
+	"stone",
+	"mauve",
+	"olive",
+	"mist",
+	"taupe"
 ];
-/**
- * Corner radius presets (axis `theme-radius`). Each drives the single
- * `--radius-base` knob; the whole `--radius-*` scale + `rounded-*` utilities
- * follow. Every preset takes Tailwind's stock value for that name — `none` 0,
- * `xs` 0.125rem, `sm` 0.25rem, `md` 0.375rem (the default), `xl` 0.75rem — and
- * `full` is the pill extreme.
- */
-const THEME_RADII = ['none', 'xs', 'sm', 'md', 'xl', 'full'];
-/**
- * Spacing density presets (axis `theme-space`). Each drives the single
- * `--spacing-base` knob; every `p-*`/`m-*`/`gap-*`/`w-*`/`h-*` utility follows.
- * `normal` = the 0.25rem default (no-op baseline).
- */
-const THEME_SPACES = ['compact', 'normal'];
-const DEFAULT_THEME_MODE = 'system';
-const DEFAULT_THEME_COLOR = 'base';
-const DEFAULT_THEME_NEUTRAL = 'base';
-const DEFAULT_THEME_RADIUS = 'md';
-const DEFAULT_THEME_SPACE = 'normal';
-const THEME_MODE_STORAGE_KEY = 'theme-mode';
-const THEME_COLOR_STORAGE_KEY = 'theme-color';
-const THEME_NEUTRAL_STORAGE_KEY = 'theme-neutral';
-const THEME_BRAND_STORAGE_KEY = 'theme-brand';
-const THEME_RADIUS_STORAGE_KEY = 'theme-radius';
-const THEME_SPACE_STORAGE_KEY = 'theme-space';
+const THEME_RADII = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"xl",
+	"full"
+];
+const THEME_SPACES = ["compact", "normal"];
+const DEFAULT_THEME_MODE = "system";
+const DEFAULT_THEME_COLOR = "base";
+const DEFAULT_THEME_NEUTRAL = "base";
+const DEFAULT_THEME_RADIUS = "md";
+const DEFAULT_THEME_SPACE = "normal";
+const THEME_MODE_STORAGE_KEY = "theme-mode";
+const THEME_COLOR_STORAGE_KEY = "theme-color";
+const THEME_NEUTRAL_STORAGE_KEY = "theme-neutral";
+const THEME_BRAND_STORAGE_KEY = "theme-brand";
+const THEME_RADIUS_STORAGE_KEY = "theme-radius";
+const THEME_SPACE_STORAGE_KEY = "theme-space";
 function isThemeMode(value) {
-    return typeof value === 'string' && THEME_MODES.includes(value);
+	return typeof value === "string" && THEME_MODES.includes(value);
 }
 function isResolvedThemeMode(value) {
-    return typeof value === 'string' && RESOLVED_THEME_MODES.includes(value);
+	return typeof value === "string" && RESOLVED_THEME_MODES.includes(value);
 }
 function isThemeColor(value) {
-    return typeof value === 'string' && THEME_COLORS.includes(value);
+	return typeof value === "string" && THEME_COLORS.includes(value);
 }
 function isThemeNeutral(value) {
-    return typeof value === 'string' && THEME_NEUTRALS.includes(value);
+	return typeof value === "string" && THEME_NEUTRALS.includes(value);
 }
 function isThemeRadius(value) {
-    return typeof value === 'string' && THEME_RADII.includes(value);
+	return typeof value === "string" && THEME_RADII.includes(value);
 }
 function isThemeSpace(value) {
-    return typeof value === 'string' && THEME_SPACES.includes(value);
+	return typeof value === "string" && THEME_SPACES.includes(value);
 }
 function normalizeThemeMode(value) {
-    return isThemeMode(value) ? value : DEFAULT_THEME_MODE;
+	return isThemeMode(value) ? value : DEFAULT_THEME_MODE;
 }
 function normalizeThemeColor(value) {
-    return isThemeColor(value) ? value : DEFAULT_THEME_COLOR;
+	return isThemeColor(value) ? value : DEFAULT_THEME_COLOR;
 }
 function normalizeThemeNeutral(value) {
-    return isThemeNeutral(value) ? value : DEFAULT_THEME_NEUTRAL;
+	return isThemeNeutral(value) ? value : DEFAULT_THEME_NEUTRAL;
 }
 function normalizeThemeRadius(value) {
-    return isThemeRadius(value) ? value : DEFAULT_THEME_RADIUS;
+	return isThemeRadius(value) ? value : "md";
 }
 function normalizeThemeSpace(value) {
-    return isThemeSpace(value) ? value : DEFAULT_THEME_SPACE;
+	return isThemeSpace(value) ? value : DEFAULT_THEME_SPACE;
 }
-
-const DEFAULT_BRAND_FOREGROUND = '0 0% 100%';
-/**
- * `--background` per mode, from css/base/tokens.css.
- *
- * The brand fill is one inline custom property that both modes read, but the
- * focus ring is not: `--brand-ring-light` and `--brand-ring-dark` are solved
- * separately and css/color/brand.css picks the one the current mode needs, so
- * the ring clears the non-text threshold without dragging the fill with it.
- */
-const RING_BACKGROUNDS = { light: '0 0% 100%', dark: '0 0% 5%' };
-/**
- * The brand as the canonical HSL triplet the CSS consumes: hex is converted, and
- * every HSL form CSS accepts (comma separated, an angle-suffixed hue) is
- * normalised, so none of them can paint while skipping the measurement.
- *
- * `null` for anything else — a `var()` reference is a documented escape hatch,
- * and there is nothing in it to measure or convert.
- */
+const DEFAULT_BRAND_FOREGROUND = "0 0% 100%";
+const RING_BACKGROUNDS = {
+	light: "0 0% 100%",
+	dark: "0 0% 5%"
+};
 function toBrandTriplet(color) {
-    const trimmed = color.trim();
-    const parsed = parseHslTriplet(trimmed);
-    return parsed ? formatHslTriplet(parsed) : hexToHslTriplet(trimmed);
+	const trimmed = color.trim();
+	const parsed = parseHslTriplet(trimmed);
+	return parsed ? formatHslTriplet(parsed) : hexToHslTriplet(trimmed);
 }
-/**
- * Hold a brand to the text half of the standard the generator holds every
- * built-in palette to: text on the brand fill at least 4.5 to 1. Only the
- * FOREGROUND moves, so the fill the consumer chose is the fill that ships —
- * exactly as the generator keeps `--primary` at its design lightness and
- * darkens a separate `--ring` instead.
- *
- * The non-text half is the ring's job; see {@link brandRing}.
- */
 function hardenBrand(brand) {
-    const color = toBrandTriplet(brand.color);
-    if (!color) {
-        return brand;
-    }
-    return {
-        color,
-        foreground: fitForeground({
-            foreground: brand.foreground,
-            background: color,
-            min: TEXT_CONTRAST_MIN,
-        }),
-    };
+	const color = toBrandTriplet(brand.color);
+	if (!color) return brand;
+	return {
+		color,
+		foreground: fitForeground({
+			foreground: brand.foreground,
+			background: color,
+			min: TEXT_CONTRAST_MIN
+		})
+	};
 }
-/**
- * The focus ring for one mode: the brand itself when it already clears the
- * non-text threshold against that mode's `--background`, otherwise the nearest
- * lightness that does. Hue and saturation never move, so the ring still reads
- * as the brand.
- */
 function brandRing(color, background) {
-    const parsed = parseHslTriplet(color);
-    if (!parsed) {
-        return null;
-    }
-    if (contrastRatio(color, background) >= NON_TEXT_CONTRAST_MIN) {
-        return color;
-    }
-    return (solveLightnessNearest({
-        h: parsed.h,
-        s: parsed.s,
-        against: [background],
-        min: NON_TEXT_CONTRAST_MIN,
-        from: parsed.l,
-    }) ?? color);
+	const parsed = parseHslTriplet(color);
+	if (!parsed) return null;
+	if (contrastRatio(color, background) >= 3) return color;
+	return solveLightnessNearest({
+		h: parsed.h,
+		s: parsed.s,
+		against: [background],
+		min: 3,
+		from: parsed.l
+	}) ?? color;
 }
-/** Extract the hue/saturation pair used by Layout's soft pattern tiers. */
 function brandPatternHueSaturation(color) {
-    const parsed = parseHslTriplet(color);
-    return parsed ? `${parsed.h} ${parsed.s}%` : null;
-}
-/**
- * Consumer-configurable brand color. Writes `--brand`, `--brand-foreground`, the
- * derived `--brand-pattern-hs` hue/saturation source, and a `--brand-ring-light`
- * / `--brand-ring-dark` pair as inline custom properties on `<html>` so solid
- * brand utilities, the focus ring, and the soft Layout pattern tiers can resolve
- * without CSS relative-color syntax.
- *
- * Default comes from `provideUiTheme({ brand })`; `setBrand()` overrides at
- * runtime and persists. When unset, `--brand` falls back to `var(--primary)`.
- */
-class ThemeBrandService {
-    options = inject(THEME_OPTIONS, { optional: true });
-    /**
-     * Storage half shared with the other axes; the DOM half is custom, because the
-     * brand paints a set of inline custom properties rather than setting an
-     * attribute. `serialize` returning `null` is what clears the stored key.
-     */
-    brandState = persistedSignal({
-        key: THEME_BRAND_STORAGE_KEY,
-        parse: (raw) => this.parseStored(raw) ?? this.normalizeOption(this.options?.brand),
-        serialize: (brand) => (brand ? JSON.stringify(brand) : null),
-    });
-    brand = this.brandState.asReadonly();
-    constructor() {
-        htmlStylePropertyEffect({ source: () => this.brandProperties(this.brandState()) });
-    }
-    /**
-     * Set the brand color. `color`/`foreground` are HSL triplets (e.g.
-     * `'221 83% 53%'`); a hex color is converted, since that is what a native
-     * picker hands back. The fill is kept exactly as chosen — `--brand-foreground`
-     * is moved until text on it clears 4.5 to 1, and the focus ring is solved
-     * separately per mode, so a pale brand can never leave the ring invisible.
-     */
-    setBrand(color, foreground = DEFAULT_BRAND_FOREGROUND) {
-        this.brandState.set(hardenBrand({ color, foreground }));
-    }
-    /** Clear the consumer brand → `--brand` falls back to `var(--primary)`. */
-    clearBrand() {
-        this.brandState.set(null);
-    }
-    normalizeOption(brand) {
-        if (!brand) {
-            return null;
-        }
-        if (typeof brand === 'string') {
-            return hardenBrand({ color: brand, foreground: DEFAULT_BRAND_FOREGROUND });
-        }
-        return hardenBrand({
-            color: brand.color,
-            foreground: brand.foreground ?? DEFAULT_BRAND_FOREGROUND,
-        });
-    }
-    /** The custom properties the brand paints. `null` removes one. */
-    brandProperties(brand) {
-        if (!brand) {
-            return {
-                '--brand': null,
-                '--brand-foreground': null,
-                '--brand-pattern-hs': null,
-                '--brand-ring-light': null,
-                '--brand-ring-dark': null,
-            };
-        }
-        return {
-            '--brand': brand.color,
-            '--brand-foreground': brand.foreground,
-            '--brand-pattern-hs': brandPatternHueSaturation(brand.color),
-            '--brand-ring-light': brandRing(brand.color, RING_BACKGROUNDS.light),
-            '--brand-ring-dark': brandRing(brand.color, RING_BACKGROUNDS.dark),
-        };
-    }
-    /** Stored brands are JSON. Anything unparsable reads as "no stored brand". */
-    parseStored(raw) {
-        if (!raw) {
-            return null;
-        }
-        try {
-            const parsed = JSON.parse(raw);
-            if (typeof parsed?.color !== 'string') {
-                return null;
-            }
-            // Storage is editable by hand and predates the guarantee, so a restored
-            // brand is measured exactly like a freshly set one.
-            return hardenBrand({
-                color: parsed.color,
-                foreground: typeof parsed.foreground === 'string' ? parsed.foreground : DEFAULT_BRAND_FOREGROUND,
-            });
-        }
-        catch {
-            return null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ThemeBrandService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.6", ngImport: i0, type: ThemeBrandService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ThemeBrandService, decorators: [{
-            type: Service
-        }], ctorParameters: () => [] });
-
-/**
- * Drives the two FluxUI-style color axes:
- *  - accent  → `<html theme-color>`   (full tinted palette per color)
- *  - neutral → `<html theme-neutral>` (gray family + Layout pattern hue)
- *
- * Both persist to localStorage and seed from `provideUiTheme({ color, neutral })`
- * (a persisted choice wins over the configured default). `base` on either axis
- * means "no override" — the core base theme applies.
- */
-class ThemeColorService {
-    options = inject(THEME_OPTIONS, { optional: true });
-    colorAxis = persistedHtmlAttributeSignal({
-        key: THEME_COLOR_STORAGE_KEY,
-        attribute: 'theme-color',
-        normalize: normalizeThemeColor,
-        // A configured brand with no explicit accent defaults the accent to 'brand'
-        // so the consumer's brand color becomes the primary (FluxUI-style). The
-        // helper knows nothing about brand, so this stays here.
-        initial: this.options?.color ?? (this.options?.brand ? 'brand' : undefined),
-    });
-    neutralAxis = persistedHtmlAttributeSignal({
-        key: THEME_NEUTRAL_STORAGE_KEY,
-        attribute: 'theme-neutral',
-        normalize: normalizeThemeNeutral,
-        initial: this.options?.neutral,
-    });
-    color = this.colorAxis.value;
-    neutral = this.neutralAxis.value;
-    setColor(color) {
-        this.colorAxis.set(color);
-    }
-    setNeutral(neutral) {
-        this.neutralAxis.set(neutral);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ThemeColorService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.6", ngImport: i0, type: ThemeColorService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ThemeColorService, decorators: [{
-            type: Service
-        }] });
-
-/**
- * Color mode axis. Writes both `<html theme-mode>` and `<html data-mode>`.
- *
- * The persisted value and the written value differ here, which is the whole
- * point of the axis: `'system'` is what gets stored, while `light` or `dark` is
- * what reaches the DOM, and it keeps following the operating system live.
- */
-class ThemeModeService {
-    options = inject(THEME_OPTIONS, { optional: true });
-    systemPrefersDark = prefersDarkSignal();
-    axis = persistedHtmlAttributeSignal({
-        key: THEME_MODE_STORAGE_KEY,
-        // One value, two attributes: `theme-mode` for the theme CSS and `data-mode`
-        // for the Tailwind dark variant.
-        attribute: ['theme-mode', 'data-mode'],
-        normalize: normalizeThemeMode,
-        initial: this.options?.mode,
-        // Read inside the effect, so a system preference change repaints without
-        // touching what is persisted.
-        resolveAttributeValue: (mode) => mode === 'system' ? (this.systemPrefersDark() ? 'dark' : 'light') : mode,
-    });
-    mode = this.axis.value;
-    resolvedMode = computed(() => this.axis.attributeValue(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
-    isDark = computed(() => this.resolvedMode() === 'dark', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
-    setMode(mode) {
-        this.axis.set(mode);
-    }
-    toggle() {
-        this.setMode(this.isDark() ? 'light' : 'dark');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ThemeModeService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.6", ngImport: i0, type: ThemeModeService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ThemeModeService, decorators: [{
-            type: Service
-        }] });
-
-/** Radius in px @ 16px root; `full` uses a finite SVG-friendly sentinel. */
+	const parsed = parseHslTriplet(color);
+	return parsed ? `${parsed.h} ${parsed.s}%` : null;
+}
+var ThemeBrandService = class ThemeBrandService {
+	options = inject(THEME_OPTIONS, { optional: true });
+	brandState = persistedSignal({
+		key: THEME_BRAND_STORAGE_KEY,
+		parse: (raw) => this.parseStored(raw) ?? this.normalizeOption(this.options?.brand),
+		serialize: (brand) => brand ? JSON.stringify(brand) : null
+	});
+	brand = this.brandState.asReadonly();
+	constructor() {
+		htmlStylePropertyEffect({ source: () => this.brandProperties(this.brandState()) });
+	}
+	setBrand(color, foreground = DEFAULT_BRAND_FOREGROUND) {
+		this.brandState.set(hardenBrand({
+			color,
+			foreground
+		}));
+	}
+	clearBrand() {
+		this.brandState.set(null);
+	}
+	normalizeOption(brand) {
+		if (!brand) return null;
+		if (typeof brand === "string") return hardenBrand({
+			color: brand,
+			foreground: DEFAULT_BRAND_FOREGROUND
+		});
+		return hardenBrand({
+			color: brand.color,
+			foreground: brand.foreground ?? DEFAULT_BRAND_FOREGROUND
+		});
+	}
+	brandProperties(brand) {
+		if (!brand) return {
+			"--brand": null,
+			"--brand-foreground": null,
+			"--brand-pattern-hs": null,
+			"--brand-ring-light": null,
+			"--brand-ring-dark": null
+		};
+		return {
+			"--brand": brand.color,
+			"--brand-foreground": brand.foreground,
+			"--brand-pattern-hs": brandPatternHueSaturation(brand.color),
+			"--brand-ring-light": brandRing(brand.color, RING_BACKGROUNDS.light),
+			"--brand-ring-dark": brandRing(brand.color, RING_BACKGROUNDS.dark)
+		};
+	}
+	parseStored(raw) {
+		if (!raw) return null;
+		try {
+			const parsed = JSON.parse(raw);
+			if (typeof parsed?.color !== "string") return null;
+			return hardenBrand({
+				color: parsed.color,
+				foreground: typeof parsed.foreground === "string" ? parsed.foreground : DEFAULT_BRAND_FOREGROUND
+			});
+		} catch {
+			return null;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeBrandService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeBrandService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ThemeBrandService,
+	decorators: [{ type: Service }],
+	ctorParameters: () => []
+});
+var ThemeColorService = class ThemeColorService {
+	options = inject(THEME_OPTIONS, { optional: true });
+	colorAxis = persistedHtmlAttributeSignal({
+		key: THEME_COLOR_STORAGE_KEY,
+		attribute: "theme-color",
+		normalize: normalizeThemeColor,
+		initial: this.options?.color ?? (this.options?.brand ? "brand" : void 0)
+	});
+	neutralAxis = persistedHtmlAttributeSignal({
+		key: THEME_NEUTRAL_STORAGE_KEY,
+		attribute: "theme-neutral",
+		normalize: normalizeThemeNeutral,
+		initial: this.options?.neutral
+	});
+	color = this.colorAxis.value;
+	neutral = this.neutralAxis.value;
+	setColor(color) {
+		this.colorAxis.set(color);
+	}
+	setNeutral(neutral) {
+		this.neutralAxis.set(neutral);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeColorService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeColorService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ThemeColorService,
+	decorators: [{ type: Service }]
+});
+var ThemeModeService = class ThemeModeService {
+	options = inject(THEME_OPTIONS, { optional: true });
+	systemPrefersDark = prefersDarkSignal();
+	axis = persistedHtmlAttributeSignal({
+		key: THEME_MODE_STORAGE_KEY,
+		attribute: ["theme-mode", "data-mode"],
+		normalize: normalizeThemeMode,
+		initial: this.options?.mode,
+		resolveAttributeValue: (mode) => mode === "system" ? this.systemPrefersDark() ? "dark" : "light" : mode
+	});
+	mode = this.axis.value;
+	resolvedMode = computed(() => this.axis.attributeValue(), ...ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []);
+	isDark = computed(() => this.resolvedMode() === "dark", ...ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []);
+	setMode(mode) {
+		this.axis.set(mode);
+	}
+	toggle() {
+		this.setMode(this.isDark() ? "light" : "dark");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeModeService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeModeService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ThemeModeService,
+	decorators: [{ type: Service }]
+});
 const RADIUS_PX = {
-    none: 0,
-    xs: 2,
-    sm: 4,
-    md: 6,
-    xl: 12,
-    full: 9999,
+	none: 0,
+	xs: 2,
+	sm: 4,
+	md: 6,
+	xl: 12,
+	full: 9999
 };
-/**
- * Corner radius axis. Writes `<html theme-radius>`; each preset CSS sets the
- * single `--radius-base` knob so the whole `--radius-*` scale + `rounded-*`
- * utilities rescale. Persists to localStorage and seeds from
- * `provideUiTheme({ radius })` (a persisted choice wins over the default).
- */
-class ThemeRadiusService {
-    options = inject(THEME_OPTIONS, { optional: true });
-    axis = persistedHtmlAttributeSignal({
-        key: THEME_RADIUS_STORAGE_KEY,
-        attribute: 'theme-radius',
-        normalize: normalizeThemeRadius,
-        initial: this.options?.radius,
-    });
-    radius = this.axis.value;
-    /** Active preset in px @ 16px root. */
-    radiusPx = computed(() => RADIUS_PX[this.radius()] ?? RADIUS_PX.md, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "radiusPx" }] : /* istanbul ignore next */ []));
-    setRadius(radius) {
-        this.axis.set(radius);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ThemeRadiusService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.6", ngImport: i0, type: ThemeRadiusService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ThemeRadiusService, decorators: [{
-            type: Service
-        }] });
-
-/**
- * Spacing density axis. Writes `<html theme-space>`; each preset CSS sets the
- * single `--spacing-base` knob, which Tailwind's `--spacing` derives from, so
- * every `p-*`/`m-*`/`gap-*`/`w-*`/`h-*` utility rescales. Persists to
- * localStorage and seeds from `provideUiTheme({ space })` (a persisted choice
- * wins over the default).
- */
-class ThemeSpaceService {
-    options = inject(THEME_OPTIONS, { optional: true });
-    axis = persistedHtmlAttributeSignal({
-        key: THEME_SPACE_STORAGE_KEY,
-        attribute: 'theme-space',
-        normalize: normalizeThemeSpace,
-        initial: this.options?.space,
-    });
-    space = this.axis.value;
-    setSpace(space) {
-        this.axis.set(space);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ThemeSpaceService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.6", ngImport: i0, type: ThemeSpaceService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ThemeSpaceService, decorators: [{
-            type: Service
-        }] });
-
-const MATERIAL_SYMBOLS_FONT_ATTR = 'data-icon-font';
-const MATERIAL_SYMBOLS_FONT_ID = 'material-symbols';
-const MATERIAL_SYMBOLS_FONT_HREF = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block';
+var ThemeRadiusService = class ThemeRadiusService {
+	options = inject(THEME_OPTIONS, { optional: true });
+	axis = persistedHtmlAttributeSignal({
+		key: THEME_RADIUS_STORAGE_KEY,
+		attribute: "theme-radius",
+		normalize: normalizeThemeRadius,
+		initial: this.options?.radius
+	});
+	radius = this.axis.value;
+	radiusPx = computed(() => RADIUS_PX[this.radius()] ?? RADIUS_PX.md, ...ngDevMode ? [{ debugName: "radiusPx" }] : /* istanbul ignore next */ []);
+	setRadius(radius) {
+		this.axis.set(radius);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeRadiusService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeRadiusService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ThemeRadiusService,
+	decorators: [{ type: Service }]
+});
+var ThemeSpaceService = class ThemeSpaceService {
+	options = inject(THEME_OPTIONS, { optional: true });
+	axis = persistedHtmlAttributeSignal({
+		key: THEME_SPACE_STORAGE_KEY,
+		attribute: "theme-space",
+		normalize: normalizeThemeSpace,
+		initial: this.options?.space
+	});
+	space = this.axis.value;
+	setSpace(space) {
+		this.axis.set(space);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeSpaceService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeSpaceService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ThemeSpaceService,
+	decorators: [{ type: Service }]
+});
+const MATERIAL_SYMBOLS_FONT_ATTR = "data-icon-font";
+const MATERIAL_SYMBOLS_FONT_ID = "material-symbols";
+const MATERIAL_SYMBOLS_FONT_HREF = "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block";
 function provideUiTheme(options = {}) {
-    return makeEnvironmentProviders([
-        {
-            provide: THEME_OPTIONS,
-            useValue: options,
-        },
-        provideEnvironmentInitializer(() => {
-            // Opt-in: the Material Symbols font is only fetched from Google Fonts when
-            // explicitly enabled, so the default install makes no external network
-            // request (privacy / offline / CSP friendly). Set `icons.materialSymbols: true`
-            // or self-host the font and import it yourself.
-            if (options.icons?.materialSymbols === true) {
-                loadMaterialSymbolsStylesheet();
-            }
-            inject(ThemeModeService);
-            inject(ThemeColorService);
-            inject(ThemeBrandService);
-            inject(ThemeRadiusService);
-            inject(ThemeSpaceService);
-        }),
-    ]);
+	return makeEnvironmentProviders([{
+		provide: THEME_OPTIONS,
+		useValue: options
+	}, provideEnvironmentInitializer(() => {
+		if (options.icons?.materialSymbols === true) loadMaterialSymbolsStylesheet();
+		inject(ThemeModeService);
+		inject(ThemeColorService);
+		inject(ThemeBrandService);
+		inject(ThemeRadiusService);
+		inject(ThemeSpaceService);
+	})]);
 }
 function loadMaterialSymbolsStylesheet() {
-    const documentRef = inject(DOCUMENT, { optional: true });
-    const platformId = inject(PLATFORM_ID);
-    const head = documentRef?.head;
-    if (!isPlatformBrowser(platformId) || !head) {
-        return;
-    }
-    const existing = head.querySelector(`link[${MATERIAL_SYMBOLS_FONT_ATTR}="${MATERIAL_SYMBOLS_FONT_ID}"]`);
-    if (existing) {
-        return;
-    }
-    const link = head.ownerDocument.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = MATERIAL_SYMBOLS_FONT_HREF;
-    link.setAttribute(MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_ID);
-    head.appendChild(link);
-}
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DEFAULT_THEME_COLOR, DEFAULT_THEME_MODE, DEFAULT_THEME_NEUTRAL, DEFAULT_THEME_RADIUS, DEFAULT_THEME_SPACE, RESOLVED_THEME_MODES, THEME_BRAND_STORAGE_KEY, THEME_COLORS, THEME_COLOR_STORAGE_KEY, THEME_MODES, THEME_MODE_STORAGE_KEY, THEME_NEUTRALS, THEME_NEUTRAL_STORAGE_KEY, THEME_OPTIONS, THEME_RADII, THEME_RADIUS_STORAGE_KEY, THEME_SPACES, THEME_SPACE_STORAGE_KEY, ThemeBrandService, ThemeColorService, ThemeModeService, ThemeRadiusService, ThemeSpaceService, htmlAttributeEffect, htmlStylePropertyEffect, isResolvedThemeMode, isThemeColor, isThemeMode, isThemeNeutral, isThemeRadius, isThemeSpace, normalizeThemeColor, normalizeThemeMode, normalizeThemeNeutral, normalizeThemeRadius, normalizeThemeSpace, persistedHtmlAttributeSignal, persistedSignal, prefersDarkSignal, provideUiTheme };
+	const documentRef = inject(DOCUMENT, { optional: true });
+	const platformId = inject(PLATFORM_ID);
+	const head = documentRef?.head;
+	if (!isPlatformBrowser(platformId) || !head) return;
+	if (head.querySelector(`link[${MATERIAL_SYMBOLS_FONT_ATTR}="${MATERIAL_SYMBOLS_FONT_ID}"]`)) return;
+	const link = head.ownerDocument.createElement("link");
+	link.rel = "stylesheet";
+	link.href = MATERIAL_SYMBOLS_FONT_HREF;
+	link.setAttribute(MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_ID);
+	head.appendChild(link);
+}
+export { DEFAULT_THEME_COLOR, DEFAULT_THEME_MODE, DEFAULT_THEME_NEUTRAL, DEFAULT_THEME_RADIUS, DEFAULT_THEME_SPACE, RESOLVED_THEME_MODES, THEME_BRAND_STORAGE_KEY, THEME_COLORS, THEME_COLOR_STORAGE_KEY, THEME_MODES, THEME_MODE_STORAGE_KEY, THEME_NEUTRALS, THEME_NEUTRAL_STORAGE_KEY, THEME_OPTIONS, THEME_RADII, THEME_RADIUS_STORAGE_KEY, THEME_SPACES, THEME_SPACE_STORAGE_KEY, ThemeBrandService, ThemeColorService, ThemeModeService, ThemeRadiusService, ThemeSpaceService, htmlAttributeEffect, htmlStylePropertyEffect, isResolvedThemeMode, isThemeColor, isThemeMode, isThemeNeutral, isThemeRadius, isThemeSpace, normalizeThemeColor, normalizeThemeMode, normalizeThemeNeutral, normalizeThemeRadius, normalizeThemeSpace, persistedHtmlAttributeSignal, persistedSignal, prefersDarkSignal, provideUiTheme };