ngwr 11.1.0 → 12.0.0

package/fesm2022/ngwr-theme.mjs

@@ -42,6 +42,183 @@ const WR_COLORS = [
     'dark',
 ];
 
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * The palette recipe, in TypeScript.
+ *
+ * `theme/styles/_colors.scss` derives seven tokens per intent from one hex, and
+ * until now that arithmetic existed only in Sass — so a theme picked at RUNTIME
+ * (a builder, a tenant colour from an API, a preset fetched from a registry)
+ * could not reproduce it. The showcase had half of it copied by hand for its
+ * own primary-colour switcher, which is the copy that drifts.
+ *
+ * **Seven tokens, not twelve, and that is not an omission.** The tint and ink
+ * layer is written in terms of `var()`:
+ *
+ * ```css
+ * --wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), 0.12);
+ * --wr-color-primary-ink: color-mix(in srgb, var(--wr-color-primary) 78%, var(--wr-color-dark));
+ * ```
+ *
+ * so redefining the base and its channels re-resolves `-soft`, `-soft-border`,
+ * `-soft-contrast`, `-active` and `-ink` for free. A preset that also emitted
+ * those would be freezing values the stylesheet is meant to keep deriving.
+ *
+ * **`-contrast` IS re-derived, and must be.** It picks whichever of black and
+ * white scores higher against the fill, so a re-tuned intent keeps the label of
+ * the colour it replaced unless something recomputes it — that is how the dark
+ * theme once put white text on its lightened primary at 3.36:1.
+ *
+ * The LIGHT recipe only. `_dark.scss` is hand-tuned rather than derived — its
+ * `dark-light` uses `color.scale(…, 70%)` where the light block uses
+ * `color.adjust(…, 5%)`, and `light-light` goes -2.5% — so a generator claiming
+ * to reproduce it would be lying. Feed dark seeds through the same recipe if you
+ * want a derived dark theme; you will get a consistent one, not the shipped one.
+ *
+ * `pnpm check:theme` compiles nothing and trusts nothing: it reads the BUILT
+ * stylesheet and asserts this module reproduces every one of those tokens for
+ * the nine shipped intents.
+ *
+ * @example
+ * ```ts
+ * import { wrThemeTokens } from 'ngwr/theme';
+ *
+ * const tokens = wrThemeTokens({ primary: '#41598f' });
+ * for (const [name, value] of Object.entries(tokens)) {
+ *   document.documentElement.style.setProperty(name, value);
+ * }
+ * ```
+ */
+/** Lightness deltas, in PERCENTAGE POINTS, matching `color.adjust` in the SCSS. */
+const SHADES = [
+    ['dark', -5],
+    ['darker', -10],
+    ['light', 5],
+    ['lighter', 10],
+];
+/** `#rgb` / `#rrggbb` → channels. Returns `null` for anything else. */
+function parseHex(hex) {
+    const raw = hex.trim().replace(/^#/, '');
+    const full = raw.length === 3 ? [...raw].map(c => c + c).join('') : raw;
+    if (!/^[0-9a-fA-F]{6}$/.test(full))
+        return null;
+    const n = Number.parseInt(full, 16);
+    /* eslint-disable no-bitwise -- unpacking a packed 24-bit colour */
+    return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+    /* eslint-enable no-bitwise */
+}
+const toHex = ({ r, g, b }) => `#${[r, g, b].map(c => Math.round(c).toString(16).padStart(2, '0')).join('')}`;
+function rgbToHsl({ r, g, b }) {
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const d = max - min;
+    const l = (max + min) / 2;
+    if (d === 0)
+        return { h: 0, s: 0, l };
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h;
+    if (max === rn)
+        h = (gn - bn) / d + (gn < bn ? 6 : 0);
+    else if (max === gn)
+        h = (bn - rn) / d + 2;
+    else
+        h = (rn - gn) / d + 4;
+    return { h: h * 60, s, l };
+}
+function hslToRgb(h, s, l) {
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    // Two modulos, not one. `((h % 360) + 360) / 60` reads as normalisation and
+    // is not: it maps 222° to sector 9.7 instead of 3.7, so every hue landed in
+    // the wrong arm of the sextant table and only greys (c = x = 0) survived.
+    // The parity gate caught it on the first run — `dark`'s navy came back red.
+    const hp = (((h % 360) + 360) % 360) / 60;
+    const x = c * (1 - Math.abs((hp % 2) - 1));
+    const [rp, gp, bp] = hp < 1 ? [c, x, 0] : hp < 2 ? [x, c, 0] : hp < 3 ? [0, c, x] : hp < 4 ? [0, x, c] : hp < 5 ? [x, 0, c] : [c, 0, x];
+    const m = l - c / 2;
+    return { r: (rp + m) * 255, g: (gp + m) * 255, b: (bp + m) * 255 };
+}
+/** One channel, linearised per WCAG 2.x — the SCSS `_linear`. */
+function linear(channel) {
+    const s = channel / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+}
+/** WCAG relative luminance. */
+const luminance = ({ r, g, b }) => 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+/** WCAG contrast ratio between two colours. */
+function ratio(a, b) {
+    const la = luminance(a);
+    const lb = luminance(b);
+    return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+const BLACK = { r: 0, g: 0, b: 0 };
+const WHITE = { r: 255, g: 255, b: 255 };
+/**
+ * The readable label ON a filled intent — whichever of black and white scores
+ * higher, the SCSS `_contrast()`.
+ *
+ * It PICKS, it does not blend, so those two values are the ceiling for every
+ * intent. The comparison is `>=`, so a colour exactly at the flip point
+ * (√21 ≈ 4.58 against both) takes the dark label, matching the SCSS.
+ */
+function wrContrastFor(hex) {
+    const rgb = parseHex(hex);
+    if (!rgb)
+        return '#000000';
+    return ratio(rgb, BLACK) >= ratio(rgb, WHITE) ? '#000000' : '#ffffff';
+}
+/** Shift HSL lightness by `deltaPct` PERCENTAGE POINTS, clamped — `color.adjust`. */
+function adjustLightness(rgb, deltaPct) {
+    const { h, s, l } = rgbToHsl(rgb);
+    return hslToRgb(h, s, Math.min(1, Math.max(0, l + deltaPct / 100)));
+}
+/**
+ * The seven `--wr-color-<name>*` tokens one seed produces.
+ *
+ * Returns an empty record for a hex it cannot parse rather than a palette built
+ * on black — a silently black theme is harder to notice than a missing one.
+ *
+ * `name` is a shipped intent rather than any string: a token layer the
+ * stylesheet never declares has nothing reading it, and a typo would otherwise
+ * emit `--wr-color-primry-*` and paint nothing.
+ */
+function wrIntentTokens(name, seed) {
+    const rgb = parseHex(seed);
+    if (!rgb)
+        return {};
+    const out = {
+        [`--wr-color-${name}`]: toHex(rgb),
+        [`--wr-color-${name}-rgb`]: `${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}`,
+        [`--wr-color-${name}-contrast`]: wrContrastFor(toHex(rgb)),
+    };
+    for (const [suffix, delta] of SHADES) {
+        out[`--wr-color-${name}-${suffix}`] = toHex(adjustLightness(rgb, delta));
+    }
+    return out;
+}
+/**
+ * Every token a theme preset needs, for as many intents as it re-tunes.
+ *
+ * Intents left out keep the values the stylesheet compiled, so a preset that
+ * only moves `primary` writes seven declarations and nothing else.
+ */
+function wrThemeTokens(seeds) {
+    const out = {};
+    for (const name of WR_COLORS) {
+        const seed = seeds[name];
+        if (seed)
+            Object.assign(out, wrIntentTokens(name, seed));
+    }
+    return out;
+}
+
 /**
  * @license
  *
@@ -133,10 +310,10 @@ class WrTheme {
             return;
         this.storage.set(this.config.storageKey, mode);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTheme, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.1", ngImport: i0, type: WrTheme });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrTheme, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.2", ngImport: i0, type: WrTheme });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTheme, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrTheme, decorators: [{
             type: Service
         }], ctorParameters: () => [] });
 
@@ -173,5 +350,5 @@ function provideWrTheme(config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_WR_THEME_CONFIG, WR_COLORS, WR_THEME_CONFIG, WrTheme, provideWrTheme };
+export { DEFAULT_WR_THEME_CONFIG, WR_COLORS, WR_THEME_CONFIG, WrTheme, provideWrTheme, wrContrastFor, wrIntentTokens, wrThemeTokens };
 //# sourceMappingURL=ngwr-theme.mjs.map

package/fesm2022/ngwr-theme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-theme.mjs","sources":["../../../projects/lib/theme/colors.ts","../../../projects/lib/theme/wr-theme-config.ts","../../../projects/lib/theme/services/wr-theme.ts","../../../projects/lib/theme/provide-wr-theme.ts","../../../projects/lib/theme/ngwr-theme.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\n/**\n * Built-in color variants available to NGWR components.\n *\n * Kept in sync manually with the SCSS `$base-colors` map in\n * `theme/styles/_colors.scss`. Both sources must stay aligned —\n * adding a color requires updating both this array and the SCSS map.\n * Nothing enforces that, and it has already drifted once: `info` landed\n * in the map without landing here, so v8.0.0 shipped every\n * `--wr-color-info*` token — plus an `--info` modifier from each of the\n * five stylesheets that iterate the map — while this type refused the\n * value. Order matches the map so the two read as one list.\n *\n * @example\n * ```ts\n * import { WR_COLORS } from 'ngwr/theme';\n *\n * // Iterate all colors for demos or documentation\n * WR_COLORS.forEach(color => console.log(color));\n * ```\n */\nexport const WR_COLORS = [\n  'primary',\n  'secondary',\n  'success',\n  'warning',\n  'danger',\n  'info',\n  'light',\n  'medium',\n  'dark',\n] as const;\n\n/**\n * A color variant name.\n *\n * Use as an input type on components that accept a color:\n *\n * @example\n * ```ts\n * import type { WrColor } from 'ngwr/theme';\n *\n * @Component({...})\n * export class MyComponent {\n *   readonly color = input<WrColor>('primary');\n * }\n * ```\n */\nexport type WrColor = (typeof WR_COLORS)[number];\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { InjectionToken } from '@angular/core';\n\n/** Mode the user explicitly selected. `auto` follows `prefers-color-scheme`. */\nexport type WrThemeMode = 'light' | 'dark' | 'auto';\n\n/** Resolved theme — what's actually applied to the DOM. */\nexport type WrResolvedTheme = 'light' | 'dark';\n\n/** Configuration for {@link WrTheme}. */\nexport interface WrThemeConfig {\n  /** Initial mode used when no persisted value is present. @default 'auto' */\n  readonly defaultMode: WrThemeMode;\n  /** localStorage key for persistence. Set to `null` to disable persistence. @default 'wr-theme' */\n  readonly storageKey: string | null;\n  /** Attribute applied to `<html>` to expose the resolved theme. @default 'data-theme' */\n  readonly attribute: string;\n}\n\nexport const DEFAULT_WR_THEME_CONFIG: WrThemeConfig = {\n  defaultMode: 'auto',\n  storageKey: 'wr-theme',\n  attribute: 'data-theme',\n};\n\nexport const WR_THEME_CONFIG = new InjectionToken<WrThemeConfig>('WR_THEME_CONFIG', {\n  factory: (): WrThemeConfig => DEFAULT_WR_THEME_CONFIG,\n});\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { DOCUMENT } from '@angular/common';\nimport { Service, type Signal, computed, effect, inject, signal } from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { WrStorage } from 'ngwr/storage';\n\nimport { WR_THEME_CONFIG, type WrResolvedTheme, type WrThemeMode } from '../wr-theme-config';\n\nconst VALID_MODES: readonly WrThemeMode[] = ['light', 'dark', 'auto'];\n\nfunction isThemeMode(v: unknown): v is WrThemeMode {\n  return typeof v === 'string' && (VALID_MODES as readonly string[]).includes(v);\n}\n\n/**\n * Light / dark theme manager.\n *\n * - `mode` is what the user picked (`light` | `dark` | `auto`).\n * - `resolved` is what's actually applied — `auto` resolves through\n *   {@link WrPlatform.prefersDark}.\n * - Writes `[data-theme]` (or your configured attribute) on `<html>`.\n * - Persists the selected mode via {@link WrStorage} (defaults to\n *   `localStorage`; swap the storage engine globally to change where).\n *\n * @example\n * ```ts\n * const theme = inject(WrTheme);\n * theme.set('dark');\n * theme.toggle();\n * theme.resolved();  // 'dark'\n * ```\n *\n * @see https://ngwr.dev/reference/services/theme\n */\n@Service()\nexport class WrTheme {\n  private readonly doc = inject(DOCUMENT);\n  private readonly platform = inject(WrPlatform);\n  private readonly storage = inject(WrStorage);\n  private readonly config = inject(WR_THEME_CONFIG);\n\n  /** User-selected mode. */\n  readonly mode = signal<WrThemeMode>(this.readPersisted() ?? this.config.defaultMode);\n\n  /** Resolved theme actually applied to the DOM. */\n  readonly resolved: Signal<WrResolvedTheme> = computed(() => {\n    const m = this.mode();\n    if (m === 'auto') return this.platform.prefersDark() ? 'dark' : 'light';\n    return m;\n  });\n\n  constructor() {\n    // Whenever the resolved theme changes, mirror it to the DOM + persist mode.\n    effect(() => {\n      const value = this.resolved();\n      const html = this.doc.documentElement;\n      if (html) html.setAttribute(this.config.attribute, value);\n      this.persist(this.mode());\n    });\n  }\n\n  /** Switch to a specific mode. */\n  set(mode: WrThemeMode): void {\n    this.mode.set(mode);\n  }\n\n  /** Cycle: light → dark → light (skips auto). */\n  toggle(): void {\n    this.mode.set(this.resolved() === 'dark' ? 'light' : 'dark');\n  }\n\n  // Persistence\n\n  private readPersisted(): WrThemeMode | null {\n    if (!this.config.storageKey) return null;\n    const raw = this.storage.get<WrThemeMode>(this.config.storageKey);\n    return isThemeMode(raw) ? raw : null;\n  }\n\n  private persist(mode: WrThemeMode): void {\n    if (!this.config.storageKey) return;\n    this.storage.set(this.config.storageKey, mode);\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport {\n  type EnvironmentProviders,\n  inject,\n  makeEnvironmentProviders,\n  provideEnvironmentInitializer,\n} from '@angular/core';\n\nimport { WrTheme } from './services/wr-theme';\nimport { DEFAULT_WR_THEME_CONFIG, WR_THEME_CONFIG, type WrThemeConfig } from './wr-theme-config';\n\n/**\n * Configure and activate {@link WrTheme}. Config is partial — merged with\n * defaults.\n *\n * Calling this is all it takes: the initializer instantiates {@link WrTheme},\n * whose constructor effect mirrors the resolved theme onto `<html>`. Without\n * that, the service (a tree-shakable `@Service()`) would only be created once\n * something injected it, so `[data-theme]` was never written and an app that\n * followed the docs silently ignored `defaultMode: 'auto'`.\n *\n * @example\n * ```ts\n * provideWrTheme({ defaultMode: 'dark', storageKey: 'my-app-theme' })\n * ```\n */\nexport function provideWrTheme(config: Partial<WrThemeConfig> = {}): EnvironmentProviders {\n  const merged: WrThemeConfig = { ...DEFAULT_WR_THEME_CONFIG, ...config };\n  return makeEnvironmentProviders([\n    { provide: WR_THEME_CONFIG, useValue: merged },\n    provideEnvironmentInitializer(() => void inject(WrTheme)),\n  ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-theme.mjs","sources":["../../../projects/lib/theme/colors.ts","../../../projects/lib/theme/palette.ts","../../../projects/lib/theme/wr-theme-config.ts","../../../projects/lib/theme/services/wr-theme.ts","../../../projects/lib/theme/provide-wr-theme.ts","../../../projects/lib/theme/ngwr-theme.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\n/**\n * Built-in color variants available to NGWR components.\n *\n * Kept in sync manually with the SCSS `$base-colors` map in\n * `theme/styles/_colors.scss`. Both sources must stay aligned —\n * adding a color requires updating both this array and the SCSS map.\n * Nothing enforces that, and it has already drifted once: `info` landed\n * in the map without landing here, so v8.0.0 shipped every\n * `--wr-color-info*` token — plus an `--info` modifier from each of the\n * five stylesheets that iterate the map — while this type refused the\n * value. Order matches the map so the two read as one list.\n *\n * @example\n * ```ts\n * import { WR_COLORS } from 'ngwr/theme';\n *\n * // Iterate all colors for demos or documentation\n * WR_COLORS.forEach(color => console.log(color));\n * ```\n */\nexport const WR_COLORS = [\n  'primary',\n  'secondary',\n  'success',\n  'warning',\n  'danger',\n  'info',\n  'light',\n  'medium',\n  'dark',\n] as const;\n\n/**\n * A color variant name.\n *\n * Use as an input type on components that accept a color:\n *\n * @example\n * ```ts\n * import type { WrColor } from 'ngwr/theme';\n *\n * @Component({...})\n * export class MyComponent {\n *   readonly color = input<WrColor>('primary');\n * }\n * ```\n */\nexport type WrColor = (typeof WR_COLORS)[number];\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\n/**\n * The palette recipe, in TypeScript.\n *\n * `theme/styles/_colors.scss` derives seven tokens per intent from one hex, and\n * until now that arithmetic existed only in Sass — so a theme picked at RUNTIME\n * (a builder, a tenant colour from an API, a preset fetched from a registry)\n * could not reproduce it. The showcase had half of it copied by hand for its\n * own primary-colour switcher, which is the copy that drifts.\n *\n * **Seven tokens, not twelve, and that is not an omission.** The tint and ink\n * layer is written in terms of `var()`:\n *\n * ```css\n * --wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), 0.12);\n * --wr-color-primary-ink: color-mix(in srgb, var(--wr-color-primary) 78%, var(--wr-color-dark));\n * ```\n *\n * so redefining the base and its channels re-resolves `-soft`, `-soft-border`,\n * `-soft-contrast`, `-active` and `-ink` for free. A preset that also emitted\n * those would be freezing values the stylesheet is meant to keep deriving.\n *\n * **`-contrast` IS re-derived, and must be.** It picks whichever of black and\n * white scores higher against the fill, so a re-tuned intent keeps the label of\n * the colour it replaced unless something recomputes it — that is how the dark\n * theme once put white text on its lightened primary at 3.36:1.\n *\n * The LIGHT recipe only. `_dark.scss` is hand-tuned rather than derived — its\n * `dark-light` uses `color.scale(…, 70%)` where the light block uses\n * `color.adjust(…, 5%)`, and `light-light` goes -2.5% — so a generator claiming\n * to reproduce it would be lying. Feed dark seeds through the same recipe if you\n * want a derived dark theme; you will get a consistent one, not the shipped one.\n *\n * `pnpm check:theme` compiles nothing and trusts nothing: it reads the BUILT\n * stylesheet and asserts this module reproduces every one of those tokens for\n * the nine shipped intents.\n *\n * @example\n * ```ts\n * import { wrThemeTokens } from 'ngwr/theme';\n *\n * const tokens = wrThemeTokens({ primary: '#41598f' });\n * for (const [name, value] of Object.entries(tokens)) {\n *   document.documentElement.style.setProperty(name, value);\n * }\n * ```\n */\n\nimport { WR_COLORS, type WrColor } from './colors';\n\n/** Lightness deltas, in PERCENTAGE POINTS, matching `color.adjust` in the SCSS. */\nconst SHADES = [\n  ['dark', -5],\n  ['darker', -10],\n  ['light', 5],\n  ['lighter', 10],\n] as const;\n\ninterface Rgb {\n  readonly r: number;\n  readonly g: number;\n  readonly b: number;\n}\n\n/** `#rgb` / `#rrggbb` → channels. Returns `null` for anything else. */\nfunction parseHex(hex: string): Rgb | null {\n  const raw = hex.trim().replace(/^#/, '');\n  const full = raw.length === 3 ? [...raw].map(c => c + c).join('') : raw;\n  if (!/^[0-9a-fA-F]{6}$/.test(full)) return null;\n  const n = Number.parseInt(full, 16);\n  /* eslint-disable no-bitwise -- unpacking a packed 24-bit colour */\n  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };\n  /* eslint-enable no-bitwise */\n}\n\nconst toHex = ({ r, g, b }: Rgb): string =>\n  `#${[r, g, b].map(c => Math.round(c).toString(16).padStart(2, '0')).join('')}`;\n\nfunction rgbToHsl({ r, g, b }: Rgb): { h: number; s: number; l: number } {\n  const rn = r / 255;\n  const gn = g / 255;\n  const bn = b / 255;\n  const max = Math.max(rn, gn, bn);\n  const min = Math.min(rn, gn, bn);\n  const d = max - min;\n  const l = (max + min) / 2;\n  if (d === 0) return { h: 0, s: 0, l };\n\n  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n  let h: number;\n  if (max === rn) h = (gn - bn) / d + (gn < bn ? 6 : 0);\n  else if (max === gn) h = (bn - rn) / d + 2;\n  else h = (rn - gn) / d + 4;\n  return { h: h * 60, s, l };\n}\n\nfunction hslToRgb(h: number, s: number, l: number): Rgb {\n  const c = (1 - Math.abs(2 * l - 1)) * s;\n  // Two modulos, not one. `((h % 360) + 360) / 60` reads as normalisation and\n  // is not: it maps 222° to sector 9.7 instead of 3.7, so every hue landed in\n  // the wrong arm of the sextant table and only greys (c = x = 0) survived.\n  // The parity gate caught it on the first run — `dark`'s navy came back red.\n  const hp = (((h % 360) + 360) % 360) / 60;\n  const x = c * (1 - Math.abs((hp % 2) - 1));\n  const [rp, gp, bp] =\n    hp < 1 ? [c, x, 0] : hp < 2 ? [x, c, 0] : hp < 3 ? [0, c, x] : hp < 4 ? [0, x, c] : hp < 5 ? [x, 0, c] : [c, 0, x];\n  const m = l - c / 2;\n  return { r: (rp + m) * 255, g: (gp + m) * 255, b: (bp + m) * 255 };\n}\n\n/** One channel, linearised per WCAG 2.x — the SCSS `_linear`. */\nfunction linear(channel: number): number {\n  const s = channel / 255;\n  return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n}\n\n/** WCAG relative luminance. */\nconst luminance = ({ r, g, b }: Rgb): number => 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);\n\n/** WCAG contrast ratio between two colours. */\nfunction ratio(a: Rgb, b: Rgb): number {\n  const la = luminance(a);\n  const lb = luminance(b);\n  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);\n}\n\nconst BLACK: Rgb = { r: 0, g: 0, b: 0 };\nconst WHITE: Rgb = { r: 255, g: 255, b: 255 };\n\n/**\n * The readable label ON a filled intent — whichever of black and white scores\n * higher, the SCSS `_contrast()`.\n *\n * It PICKS, it does not blend, so those two values are the ceiling for every\n * intent. The comparison is `>=`, so a colour exactly at the flip point\n * (√21 ≈ 4.58 against both) takes the dark label, matching the SCSS.\n */\nfunction wrContrastFor(hex: string): string {\n  const rgb = parseHex(hex);\n  if (!rgb) return '#000000';\n  return ratio(rgb, BLACK) >= ratio(rgb, WHITE) ? '#000000' : '#ffffff';\n}\n\n/** Shift HSL lightness by `deltaPct` PERCENTAGE POINTS, clamped — `color.adjust`. */\nfunction adjustLightness(rgb: Rgb, deltaPct: number): Rgb {\n  const { h, s, l } = rgbToHsl(rgb);\n  return hslToRgb(h, s, Math.min(1, Math.max(0, l + deltaPct / 100)));\n}\n\n/**\n * The seven `--wr-color-<name>*` tokens one seed produces.\n *\n * Returns an empty record for a hex it cannot parse rather than a palette built\n * on black — a silently black theme is harder to notice than a missing one.\n *\n * `name` is a shipped intent rather than any string: a token layer the\n * stylesheet never declares has nothing reading it, and a typo would otherwise\n * emit `--wr-color-primry-*` and paint nothing.\n */\nfunction wrIntentTokens(name: WrColor, seed: string): Record<string, string> {\n  const rgb = parseHex(seed);\n  if (!rgb) return {};\n\n  const out: Record<string, string> = {\n    [`--wr-color-${name}`]: toHex(rgb),\n    [`--wr-color-${name}-rgb`]: `${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}`,\n    [`--wr-color-${name}-contrast`]: wrContrastFor(toHex(rgb)),\n  };\n  for (const [suffix, delta] of SHADES) {\n    out[`--wr-color-${name}-${suffix}`] = toHex(adjustLightness(rgb, delta));\n  }\n  return out;\n}\n\n/**\n * Every token a theme preset needs, for as many intents as it re-tunes.\n *\n * Intents left out keep the values the stylesheet compiled, so a preset that\n * only moves `primary` writes seven declarations and nothing else.\n */\nfunction wrThemeTokens(seeds: Partial<Record<WrColor, string>>): Record<string, string> {\n  const out: Record<string, string> = {};\n  for (const name of WR_COLORS) {\n    const seed = seeds[name];\n    if (seed) Object.assign(out, wrIntentTokens(name, seed));\n  }\n  return out;\n}\n\nexport { wrContrastFor, wrIntentTokens, wrThemeTokens };\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { InjectionToken } from '@angular/core';\n\n/** Mode the user explicitly selected. `auto` follows `prefers-color-scheme`. */\nexport type WrThemeMode = 'light' | 'dark' | 'auto';\n\n/** Resolved theme — what's actually applied to the DOM. */\nexport type WrResolvedTheme = 'light' | 'dark';\n\n/** Configuration for {@link WrTheme}. */\nexport interface WrThemeConfig {\n  /** Initial mode used when no persisted value is present. @default 'auto' */\n  readonly defaultMode: WrThemeMode;\n  /** localStorage key for persistence. Set to `null` to disable persistence. @default 'wr-theme' */\n  readonly storageKey: string | null;\n  /** Attribute applied to `<html>` to expose the resolved theme. @default 'data-theme' */\n  readonly attribute: string;\n}\n\nexport const DEFAULT_WR_THEME_CONFIG: WrThemeConfig = {\n  defaultMode: 'auto',\n  storageKey: 'wr-theme',\n  attribute: 'data-theme',\n};\n\nexport const WR_THEME_CONFIG = new InjectionToken<WrThemeConfig>('WR_THEME_CONFIG', {\n  factory: (): WrThemeConfig => DEFAULT_WR_THEME_CONFIG,\n});\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { DOCUMENT } from '@angular/common';\nimport { Service, type Signal, computed, effect, inject, signal } from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { WrStorage } from 'ngwr/storage';\n\nimport { WR_THEME_CONFIG, type WrResolvedTheme, type WrThemeMode } from '../wr-theme-config';\n\nconst VALID_MODES: readonly WrThemeMode[] = ['light', 'dark', 'auto'];\n\nfunction isThemeMode(v: unknown): v is WrThemeMode {\n  return typeof v === 'string' && (VALID_MODES as readonly string[]).includes(v);\n}\n\n/**\n * Light / dark theme manager.\n *\n * - `mode` is what the user picked (`light` | `dark` | `auto`).\n * - `resolved` is what's actually applied — `auto` resolves through\n *   {@link WrPlatform.prefersDark}.\n * - Writes `[data-theme]` (or your configured attribute) on `<html>`.\n * - Persists the selected mode via {@link WrStorage} (defaults to\n *   `localStorage`; swap the storage engine globally to change where).\n *\n * @example\n * ```ts\n * const theme = inject(WrTheme);\n * theme.set('dark');\n * theme.toggle();\n * theme.resolved();  // 'dark'\n * ```\n *\n * @see https://ngwr.dev/reference/services/theme\n */\n@Service()\nexport class WrTheme {\n  private readonly doc = inject(DOCUMENT);\n  private readonly platform = inject(WrPlatform);\n  private readonly storage = inject(WrStorage);\n  private readonly config = inject(WR_THEME_CONFIG);\n\n  /** User-selected mode. */\n  readonly mode = signal<WrThemeMode>(this.readPersisted() ?? this.config.defaultMode);\n\n  /** Resolved theme actually applied to the DOM. */\n  readonly resolved: Signal<WrResolvedTheme> = computed(() => {\n    const m = this.mode();\n    if (m === 'auto') return this.platform.prefersDark() ? 'dark' : 'light';\n    return m;\n  });\n\n  constructor() {\n    // Whenever the resolved theme changes, mirror it to the DOM + persist mode.\n    effect(() => {\n      const value = this.resolved();\n      const html = this.doc.documentElement;\n      if (html) html.setAttribute(this.config.attribute, value);\n      this.persist(this.mode());\n    });\n  }\n\n  /** Switch to a specific mode. */\n  set(mode: WrThemeMode): void {\n    this.mode.set(mode);\n  }\n\n  /** Cycle: light → dark → light (skips auto). */\n  toggle(): void {\n    this.mode.set(this.resolved() === 'dark' ? 'light' : 'dark');\n  }\n\n  // Persistence\n\n  private readPersisted(): WrThemeMode | null {\n    if (!this.config.storageKey) return null;\n    const raw = this.storage.get<WrThemeMode>(this.config.storageKey);\n    return isThemeMode(raw) ? raw : null;\n  }\n\n  private persist(mode: WrThemeMode): void {\n    if (!this.config.storageKey) return;\n    this.storage.set(this.config.storageKey, mode);\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport {\n  type EnvironmentProviders,\n  inject,\n  makeEnvironmentProviders,\n  provideEnvironmentInitializer,\n} from '@angular/core';\n\nimport { WrTheme } from './services/wr-theme';\nimport { DEFAULT_WR_THEME_CONFIG, WR_THEME_CONFIG, type WrThemeConfig } from './wr-theme-config';\n\n/**\n * Configure and activate {@link WrTheme}. Config is partial — merged with\n * defaults.\n *\n * Calling this is all it takes: the initializer instantiates {@link WrTheme},\n * whose constructor effect mirrors the resolved theme onto `<html>`. Without\n * that, the service (a tree-shakable `@Service()`) would only be created once\n * something injected it, so `[data-theme]` was never written and an app that\n * followed the docs silently ignored `defaultMode: 'auto'`.\n *\n * @example\n * ```ts\n * provideWrTheme({ defaultMode: 'dark', storageKey: 'my-app-theme' })\n * ```\n */\nexport function provideWrTheme(config: Partial<WrThemeConfig> = {}): EnvironmentProviders {\n  const merged: WrThemeConfig = { ...DEFAULT_WR_THEME_CONFIG, ...config };\n  return makeEnvironmentProviders([\n    { provide: WR_THEME_CONFIG, useValue: merged },\n    provideEnvironmentInitializer(() => void inject(WrTheme)),\n  ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-tilt-card-testing.mjs

@@ -0,0 +1,190 @@
+import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** The overlay `[glare]` appends — `aria-hidden`, and the only node the directive adds. */
+const GLARE = '.wr-tilt-glare';
+/** Pull one `name(value)` out of a transform string. */
+function fromTransform(transform, fn) {
+    const match = new RegExp(`${fn}\\(([-\\d.]+)`).exec(transform);
+    return match ? Number.parseFloat(match[1]) : null;
+}
+/**
+ * Test harness for `[wrTilt]` and for `<wr-tilt-card>`, which applies it as a host
+ * directive — one class, because they are one behaviour on two hosts.
+ *
+ * **The tilt itself needs a box, and a unit test has none.** The directive turns a
+ * pointer position into two rotations by dividing by `getBoundingClientRect()`, which
+ * is 0×0 in jsdom, so a move dispatched at a component that has not been given
+ * dimensions writes `rotateX(NaNdeg)`. {@link movePointerTo} is still here because the
+ * fix is one line in the SPEC — stub the host's rect, the way
+ * `projects/lib/image-cropper/testing` documents — and because the two things worth
+ * asserting on this component are only reachable through it: that a move writes a
+ * transform at all, and that {@link leave} takes it away again.
+ *
+ * **{@link isFlat} is the reduced-motion assertion.** `onMove` returns before touching
+ * the host when the user asked for less motion, so "no inline transform after a move"
+ * is the whole contract, and it is one of the few reduced-motion behaviours in the
+ * animation set that a test can actually see — most of the others live in a `@media`
+ * block. Provide the `WrPlatform` stub and assert this.
+ *
+ * There is no `getGlareOpacity()` or `isGlareVisible()`: the overlay's gradient, its
+ * blend mode and its fade all live in the stylesheet. And no `getMaxTilt()` /
+ * `getPerspectiveInput()` — those would echo an input back rather than report what the
+ * directive wrote; {@link getPerspective} and {@link getScale} read the transform the
+ * host is actually carrying, which is the value that can be wrong.
+ *
+ * @example
+ * ```ts
+ * const card = await loader.getHarness(WrTiltHarness);
+ * expect(await card.isFlat()).toBe(true);
+ *
+ * await card.movePointerTo(150, 50);   // the spec stubbed the rect first
+ * expect((await card.getTilt())?.rotateY).toBeGreaterThan(0);
+ *
+ * await card.leave();
+ * expect(await card.isFlat()).toBe(true);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrTiltHarness extends ComponentHarness {
+    /** The directive on a consumer's element, and the card that hosts it. */
+    static hostSelector = '[wrTilt], wr-tilt-card';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrTiltHarness, options)
+            .addOption('glare', options.glare, async (harness, glare) => (await harness.hasGlare()) === glare)
+            .addOption('flat', options.flat, async (harness, flat) => (await harness.isFlat()) === flat);
+    }
+    /**
+     * Whether the host is at rest — no inline transform at all.
+     *
+     * True before the first move, after {@link leave}, and for the whole life of a card
+     * whose user asked for less motion. It is the difference between "flat" and
+     * "rotated by zero": the directive CLEARS the property rather than writing an
+     * identity transform, so an empty string is the state and `rotateX(0deg)` would be
+     * a component that tilted and came back the long way.
+     */
+    async isFlat() {
+        return (await this.getTransform()) === '';
+    }
+    /** The inline `transform` exactly as written, or `''` at rest. */
+    async getTransform() {
+        return this.inlineStyle('transform');
+    }
+    /**
+     * The two rotations the host is holding, in degrees, or `null` while it is flat.
+     *
+     * Parsed from the transform rather than recomputed: the harness has no more access
+     * to the pointer maths than a consumer does, and the string is what the compositor
+     * will read.
+     */
+    async getTilt() {
+        const transform = await this.getTransform();
+        if (transform === '')
+            return null;
+        const rotateX = fromTransform(transform, 'rotateX');
+        const rotateY = fromTransform(transform, 'rotateY');
+        return rotateX === null || rotateY === null ? null : { rotateX, rotateY };
+    }
+    /** The perspective the transform was written with, in pixels, or `null` while flat. */
+    async getPerspective() {
+        return fromTransform(await this.getTransform(), 'perspective');
+    }
+    /** The scale the transform was written with, or `null` while flat. */
+    async getScale() {
+        return fromTransform(await this.getTransform(), 'scale');
+    }
+    /**
+     * Whether the host was set up to hold children in 3-D.
+     *
+     * Written once in the constructor, so it is true from first render and stays true —
+     * which makes it the cheapest evidence that the directive is applied at all, on a
+     * host where every other read is `''` until something moves.
+     */
+    async isPreserve3d() {
+        return (await this.inlineStyle('transform-style')) === 'preserve-3d';
+    }
+    /** Whether the glare overlay is installed (`[glare]`). */
+    async hasGlare() {
+        return (await this.locatorForOptional(GLARE)()) !== null;
+    }
+    /**
+     * Whether the glare is kept out of the accessibility tree.
+     *
+     * It is a decorative highlight with no text, so a screen reader must not stop on
+     * it. Asserted rather than assumed because the overlay is created imperatively —
+     * there is no template line for a reader to check.
+     */
+    async isGlareDecorative() {
+        const glare = await this.locatorForOptional(GLARE)();
+        return glare !== null && (await glare.getAttribute('aria-hidden')) === 'true';
+    }
+    /**
+     * Where the glare is pointing, as the two percentages the directive writes, or
+     * `null` when there is no glare or nothing has moved yet.
+     *
+     * Cleared when the overlay is removed: a card that has given `[glare]` back should
+     * not look like it is still tracking a pointer.
+     */
+    async getGlarePosition() {
+        const x = await this.inlineStyle('--wr-tilt-glare-x');
+        const y = await this.inlineStyle('--wr-tilt-glare-y');
+        return x === '' || y === '' ? null : { x, y };
+    }
+    /**
+     * Move a pointer over the host.
+     *
+     * **Stub the host's rect in your spec first.** The directive divides the pointer
+     * offset by the host's width and height, and jsdom measures every element at 0×0,
+     * so without a box the transform comes out as `NaN` — which is not a failure the
+     * component would ever produce in a browser. One line does it:
+     *
+     * ```ts
+     * host.getBoundingClientRect = () => ({ left: 0, top: 0, width: 200, height: 100 }) as DOMRect;
+     * ```
+     */
+    async movePointerTo(clientX, clientY) {
+        await (await this.host()).dispatchEvent('pointermove', { clientX, clientY });
+    }
+    /** Take the pointer off the host — which clears the transform and settles it flat. */
+    async leave() {
+        await (await this.host()).dispatchEvent('pointerleave');
+    }
+    /** The projected content's text, trimmed. */
+    async getContentText() {
+        return (await this.host()).text();
+    }
+    /**
+     * One inline declaration, read off the `style` ATTRIBUTE.
+     *
+     * Not `getCssValue`, which is `getComputedStyle`: that resolves the stylesheet as
+     * well, so `transform` would come back as the resolved matrix in a browser and
+     * `--wr-tilt-glare-x` would answer with the sheet's own default. The attribute holds
+     * what the directive wrote and nothing else, which is the only thing worth pinning.
+     */
+    async inlineStyle(property) {
+        const style = (await (await this.host()).getAttribute('style')) ?? '';
+        for (const declaration of style.split(';')) {
+            const colon = declaration.indexOf(':');
+            if (colon === -1)
+                continue;
+            if (declaration.slice(0, colon).trim() !== property)
+                continue;
+            return declaration.slice(colon + 1).trim();
+        }
+        return '';
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrTiltHarness };
+//# sourceMappingURL=ngwr-tilt-card-testing.mjs.map

package/fesm2022/ngwr-tilt-card-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-tilt-card-testing.mjs","sources":["../../../projects/lib/tilt-card/testing/wr-tilt-harness.ts","../../../projects/lib/tilt-card/testing/ngwr-tilt-card-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrTiltHarnessFilters, WrTiltRotation } from './interfaces';\n\n/** The overlay `[glare]` appends — `aria-hidden`, and the only node the directive adds. */\nconst GLARE = '.wr-tilt-glare';\n\n/** Pull one `name(value)` out of a transform string. */\nfunction fromTransform(transform: string, fn: string): number | null {\n  const match = new RegExp(`${fn}\\\\(([-\\\\d.]+)`).exec(transform);\n  return match ? Number.parseFloat(match[1]) : null;\n}\n\n/**\n * Test harness for `[wrTilt]` and for `<wr-tilt-card>`, which applies it as a host\n * directive — one class, because they are one behaviour on two hosts.\n *\n * **The tilt itself needs a box, and a unit test has none.** The directive turns a\n * pointer position into two rotations by dividing by `getBoundingClientRect()`, which\n * is 0×0 in jsdom, so a move dispatched at a component that has not been given\n * dimensions writes `rotateX(NaNdeg)`. {@link movePointerTo} is still here because the\n * fix is one line in the SPEC — stub the host's rect, the way\n * `projects/lib/image-cropper/testing` documents — and because the two things worth\n * asserting on this component are only reachable through it: that a move writes a\n * transform at all, and that {@link leave} takes it away again.\n *\n * **{@link isFlat} is the reduced-motion assertion.** `onMove` returns before touching\n * the host when the user asked for less motion, so \"no inline transform after a move\"\n * is the whole contract, and it is one of the few reduced-motion behaviours in the\n * animation set that a test can actually see — most of the others live in a `@media`\n * block. Provide the `WrPlatform` stub and assert this.\n *\n * There is no `getGlareOpacity()` or `isGlareVisible()`: the overlay's gradient, its\n * blend mode and its fade all live in the stylesheet. And no `getMaxTilt()` /\n * `getPerspectiveInput()` — those would echo an input back rather than report what the\n * directive wrote; {@link getPerspective} and {@link getScale} read the transform the\n * host is actually carrying, which is the value that can be wrong.\n *\n * @example\n * ```ts\n * const card = await loader.getHarness(WrTiltHarness);\n * expect(await card.isFlat()).toBe(true);\n *\n * await card.movePointerTo(150, 50);   // the spec stubbed the rect first\n * expect((await card.getTilt())?.rotateY).toBeGreaterThan(0);\n *\n * await card.leave();\n * expect(await card.isFlat()).toBe(true);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrTiltHarness extends ComponentHarness {\n  /** The directive on a consumer's element, and the card that hosts it. */\n  static hostSelector = '[wrTilt], wr-tilt-card';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrTiltHarnessFilters = {}): HarnessPredicate<WrTiltHarness> {\n    return new HarnessPredicate(WrTiltHarness, options)\n      .addOption('glare', options.glare, async (harness, glare) => (await harness.hasGlare()) === glare)\n      .addOption('flat', options.flat, async (harness, flat) => (await harness.isFlat()) === flat);\n  }\n\n  /**\n   * Whether the host is at rest — no inline transform at all.\n   *\n   * True before the first move, after {@link leave}, and for the whole life of a card\n   * whose user asked for less motion. It is the difference between \"flat\" and\n   * \"rotated by zero\": the directive CLEARS the property rather than writing an\n   * identity transform, so an empty string is the state and `rotateX(0deg)` would be\n   * a component that tilted and came back the long way.\n   */\n  async isFlat(): Promise<boolean> {\n    return (await this.getTransform()) === '';\n  }\n\n  /** The inline `transform` exactly as written, or `''` at rest. */\n  async getTransform(): Promise<string> {\n    return this.inlineStyle('transform');\n  }\n\n  /**\n   * The two rotations the host is holding, in degrees, or `null` while it is flat.\n   *\n   * Parsed from the transform rather than recomputed: the harness has no more access\n   * to the pointer maths than a consumer does, and the string is what the compositor\n   * will read.\n   */\n  async getTilt(): Promise<WrTiltRotation | null> {\n    const transform = await this.getTransform();\n    if (transform === '') return null;\n\n    const rotateX = fromTransform(transform, 'rotateX');\n    const rotateY = fromTransform(transform, 'rotateY');\n    return rotateX === null || rotateY === null ? null : { rotateX, rotateY };\n  }\n\n  /** The perspective the transform was written with, in pixels, or `null` while flat. */\n  async getPerspective(): Promise<number | null> {\n    return fromTransform(await this.getTransform(), 'perspective');\n  }\n\n  /** The scale the transform was written with, or `null` while flat. */\n  async getScale(): Promise<number | null> {\n    return fromTransform(await this.getTransform(), 'scale');\n  }\n\n  /**\n   * Whether the host was set up to hold children in 3-D.\n   *\n   * Written once in the constructor, so it is true from first render and stays true —\n   * which makes it the cheapest evidence that the directive is applied at all, on a\n   * host where every other read is `''` until something moves.\n   */\n  async isPreserve3d(): Promise<boolean> {\n    return (await this.inlineStyle('transform-style')) === 'preserve-3d';\n  }\n\n  /** Whether the glare overlay is installed (`[glare]`). */\n  async hasGlare(): Promise<boolean> {\n    return (await this.locatorForOptional(GLARE)()) !== null;\n  }\n\n  /**\n   * Whether the glare is kept out of the accessibility tree.\n   *\n   * It is a decorative highlight with no text, so a screen reader must not stop on\n   * it. Asserted rather than assumed because the overlay is created imperatively —\n   * there is no template line for a reader to check.\n   */\n  async isGlareDecorative(): Promise<boolean> {\n    const glare = await this.locatorForOptional(GLARE)();\n    return glare !== null && (await glare.getAttribute('aria-hidden')) === 'true';\n  }\n\n  /**\n   * Where the glare is pointing, as the two percentages the directive writes, or\n   * `null` when there is no glare or nothing has moved yet.\n   *\n   * Cleared when the overlay is removed: a card that has given `[glare]` back should\n   * not look like it is still tracking a pointer.\n   */\n  async getGlarePosition(): Promise<{ x: string; y: string } | null> {\n    const x = await this.inlineStyle('--wr-tilt-glare-x');\n    const y = await this.inlineStyle('--wr-tilt-glare-y');\n    return x === '' || y === '' ? null : { x, y };\n  }\n\n  /**\n   * Move a pointer over the host.\n   *\n   * **Stub the host's rect in your spec first.** The directive divides the pointer\n   * offset by the host's width and height, and jsdom measures every element at 0×0,\n   * so without a box the transform comes out as `NaN` — which is not a failure the\n   * component would ever produce in a browser. One line does it:\n   *\n   * ```ts\n   * host.getBoundingClientRect = () => ({ left: 0, top: 0, width: 200, height: 100 }) as DOMRect;\n   * ```\n   */\n  async movePointerTo(clientX: number, clientY: number): Promise<void> {\n    await (await this.host()).dispatchEvent('pointermove', { clientX, clientY });\n  }\n\n  /** Take the pointer off the host — which clears the transform and settles it flat. */\n  async leave(): Promise<void> {\n    await (await this.host()).dispatchEvent('pointerleave');\n  }\n\n  /** The projected content's text, trimmed. */\n  async getContentText(): Promise<string> {\n    return (await this.host()).text();\n  }\n\n  /**\n   * One inline declaration, read off the `style` ATTRIBUTE.\n   *\n   * Not `getCssValue`, which is `getComputedStyle`: that resolves the stylesheet as\n   * well, so `transform` would come back as the resolved matrix in a browser and\n   * `--wr-tilt-glare-x` would answer with the sheet's own default. The attribute holds\n   * what the directive wrote and nothing else, which is the only thing worth pinning.\n   */\n  private async inlineStyle(property: string): Promise<string> {\n    const style = (await (await this.host()).getAttribute('style')) ?? '';\n\n    for (const declaration of style.split(';')) {\n      const colon = declaration.indexOf(':');\n      if (colon === -1) continue;\n      if (declaration.slice(0, colon).trim() !== property) continue;\n      return declaration.slice(colon + 1).trim();\n    }\n    return '';\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}