@ojiepermana/angular 22.1.11 → 22.1.13

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

@@ -1,7 +1,787 @@
-export * from '@ojiepermana/angular-theme/styles';
+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';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * 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.
+ */
+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;
+}
+/**
+ * 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);
+            }
+        }
+    });
+}
+/** 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);
+            }
+        }
+    });
+}
+/**
+ * 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),
+    };
+}
+/**
+ * `(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();
+}
+
+/**
+ * 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 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,
+};
+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. */
+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 };
+}
+/** 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)}%`;
+}
+/** `#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 });
+}
+/** 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. */
+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);
+}
+/** 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);
+}
+/**
+ * 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;
+}
+/**
+ * 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 THEME_COLORS = [
+    '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',
+];
+/**
+ * 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';
+function isThemeMode(value) {
+    return typeof value === 'string' && THEME_MODES.includes(value);
+}
+function isResolvedThemeMode(value) {
+    return typeof value === 'string' && RESOLVED_THEME_MODES.includes(value);
+}
+function isThemeColor(value) {
+    return typeof value === 'string' && THEME_COLORS.includes(value);
+}
+function isThemeNeutral(value) {
+    return typeof value === 'string' && THEME_NEUTRALS.includes(value);
+}
+function isThemeRadius(value) {
+    return typeof value === 'string' && THEME_RADII.includes(value);
+}
+function isThemeSpace(value) {
+    return typeof value === 'string' && THEME_SPACES.includes(value);
+}
+function normalizeThemeMode(value) {
+    return isThemeMode(value) ? value : DEFAULT_THEME_MODE;
+}
+function normalizeThemeColor(value) {
+    return isThemeColor(value) ? value : DEFAULT_THEME_COLOR;
+}
+function normalizeThemeNeutral(value) {
+    return isThemeNeutral(value) ? value : DEFAULT_THEME_NEUTRAL;
+}
+function normalizeThemeRadius(value) {
+    return isThemeRadius(value) ? value : DEFAULT_THEME_RADIUS;
+}
+function normalizeThemeSpace(value) {
+    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.
+ */
+function toBrandTriplet(color) {
+    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,
+        }),
+    };
+}
+/**
+ * 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);
+}
+/** 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.4", ngImport: i0, type: ThemeBrandService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: ThemeBrandService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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.4", ngImport: i0, type: ThemeColorService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: ThemeColorService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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.4", ngImport: i0, type: ThemeModeService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: ThemeModeService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeModeService, decorators: [{
+            type: Service
+        }] });
+
+/** Radius in px @ 16px root; `full` uses a finite SVG-friendly sentinel. */
+const RADIUS_PX = {
+    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.4", ngImport: i0, type: ThemeRadiusService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: ThemeRadiusService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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.4", ngImport: i0, type: ThemeSpaceService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: ThemeSpaceService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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);
+        }),
+    ]);
+}
+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 };