@rblabs-dev/axiom 1.2.3 → 1.2.4

package/README.md

@@ -13,6 +13,8 @@ This README covers installing the package and wiring it into an app.
 - Angular 21 or 22, with the matching `@angular/material` and `@angular/cdk`. The package also uses
   `@angular/forms`, `@angular/router` and `@angular/platform-browser`, which every Angular CLI app
   has.
+- rxjs 7.4 or later within 7.x (`^7.4.0`), the 7.x range Angular 21 and 22 accept. rxjs 6 is not
+  supported.
 - SCSS global styles: `"inlineStyleLanguage": "scss"` in `angular.json` and a `src/styles.scss`.
 - Browsers with `light-dark()` and `color-mix()`: Chrome and Edge 123, Firefox 120, Safari 17.5 or
   later.
@@ -73,6 +75,12 @@ Run these steps from the folder that holds the app's `angular.json`.
    of after the global stylesheet. Keep `crossorigin`: without it the browser does not reuse the
    preloaded file. `axiom verify-production-assets` fails the build when either step is missing.
 
+   The Inter names stay the same across releases, so the preload never needs updating. In return,
+   the app's server must not cache `/fonts/inter-*.woff2` as `immutable`: keep `immutable` for
+   content-hashed names only (Angular's build output, the icon subset) and serve the Inter files
+   with a short cache such as `Cache-Control: public, max-age=86400`. Avoid `no-cache` for them,
+   since a revalidation on every visit can make the browser miss the `optional` deadline.
+
 4. **Global styles.** Call the entry mixin once, at the top of `src/styles.scss`, with the subset's
    file name (later runs of `build:icon-font` update it):
 

package/fesm2022/rblabs-dev-axiom-core.mjs

@@ -175,7 +175,7 @@ const RB_MESSAGE_TONE_LABELS = {
 	warning: "Warning",
 	danger: "Error"
 };
-const RB_DESIGN_SYSTEM_VERSION = "1.2.3";
+const RB_DESIGN_SYSTEM_VERSION = "1.2.4";
 export { RB_BREAKPOINTS, RB_BREAKPOINT_WIDTHS, RB_DESIGN_SYSTEM_VERSION, RB_ICON_FONT_SET, RB_MESSAGE_TONE_LABELS, RB_THEME_COLORS, RB_THEME_OPTIONS, RB_THEME_STORAGE_KEY, RB_TONE_ICONS, ThemeService, provideRbDesignSystem };
 
 //# sourceMappingURL=rblabs-dev-axiom-core.mjs.map

package/fesm2022/rblabs-dev-axiom-core.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rblabs-dev-axiom-core.mjs","names":[],"sources":["../../../projects/axiom/core/src/breakpoints.ts","../../../projects/axiom/core/src/theme.service.ts","../../../projects/axiom/core/src/provide-design-system.ts","../../../projects/axiom/core/src/tones.ts","../../../projects/axiom/core/src/version.ts"],"sourcesContent":["/** Breakpoint widths (docs/design-system.md, section 8). Mirrors `$breakpoints` in _breakpoints.scss. */\nexport const RB_BREAKPOINT_WIDTHS = {\n  xs: '30rem',\n  sm: '40rem',\n  md: '48rem',\n  lg: '60rem',\n  xl: '75rem',\n  '2xl': '87.5rem',\n} as const;\n\nexport type RbBreakpoint = keyof typeof RB_BREAKPOINT_WIDTHS;\n\n/** Media queries for the CDK `BreakpointObserver`, e.g. `observe(RB_BREAKPOINTS.belowLg)`. */\nexport const RB_BREAKPOINTS = {\n  belowXs: '(width < 30rem)',\n  belowSm: '(width < 40rem)',\n  belowMd: '(width < 48rem)',\n  belowLg: '(width < 60rem)',\n  belowXl: '(width < 75rem)',\n  below2xl: '(width < 87.5rem)',\n  aboveXs: '(width >= 30rem)',\n  aboveSm: '(width >= 40rem)',\n  aboveMd: '(width >= 48rem)',\n  aboveLg: '(width >= 60rem)',\n  aboveXl: '(width >= 75rem)',\n  above2xl: '(width >= 87.5rem)',\n} as const;\n","import { DOCUMENT } from '@angular/common';\nimport { DestroyRef, Injectable, InjectionToken, computed, inject, signal } from '@angular/core';\n\nexport type RbTheme = 'light' | 'dark';\n\n/** localStorage key holding the user's explicit choice (docs/design-system.md, section 11). */\nexport const RB_THEME_STORAGE_KEY = 'rb-theme';\n\n/** `--rb-color-bg` per theme; also the `<meta name=\"theme-color\">` value. */\nexport const RB_THEME_COLORS: Readonly<Record<RbTheme, string>> = {\n  light: '#f4f7fb',\n  dark: '#08111d',\n};\n\nexport interface RbThemeOptions {\n  /**\n   * Forces a theme regardless of the stored choice and the OS, without persisting anything. Used by\n   * apps that only support one theme until their migration is done. The theme toggle hides itself\n   * while a theme is forced.\n   */\n  forcedTheme?: RbTheme | null;\n  /** Storage keys an app used before adopting the kit; a valid value is moved to `rb-theme` once. */\n  legacyStorageKeys?: readonly string[];\n}\n\nexport const RB_THEME_OPTIONS = new InjectionToken<RbThemeOptions>('RB_THEME_OPTIONS', {\n  providedIn: 'root',\n  factory: () => ({}),\n});\n\nconst DARK_SCHEME_QUERY = '(prefers-color-scheme: dark)';\n\nfunction isTheme(value: unknown): value is RbTheme {\n  return value === 'light' || value === 'dark';\n}\n\n/**\n * Owns the light/dark theme contract (docs/design-system.md, section 11):\n *\n * - an explicit choice is stored under `rb-theme` and wins over the OS;\n * - without one, the theme follows `prefers-color-scheme` and tracks OS changes live;\n * - the resolved theme is written to `<html>` as `data-theme`, and every\n *   `<meta name=\"theme-color\">` is kept in sync;\n * - `color-scheme` is only set inline for an explicit or forced theme; otherwise the stylesheet's\n *   `color-scheme: light dark` already follows the OS before any script runs.\n *\n * `provideRbDesignSystem()` calls `initialize()` from an app initializer, before first paint.\n */\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n  private readonly document = inject(DOCUMENT);\n  private readonly options = inject(RB_THEME_OPTIONS);\n  private readonly window = this.document.defaultView;\n  private readonly darkScheme = this.window?.matchMedia?.(DARK_SCHEME_QUERY) ?? null;\n\n  private readonly systemTheme = signal<RbTheme>(this.darkScheme?.matches ? 'dark' : 'light');\n  private readonly storedTheme = signal<RbTheme | null>(null);\n  private readonly forcedTheme = signal<RbTheme | null>(this.options.forcedTheme ?? null);\n  private initialized = false;\n\n  /** The user's explicit choice, or `null` while the theme follows the OS. */\n  readonly preference = this.storedTheme.asReadonly();\n  /** The theme in effect: forced, then stored, then the OS preference. */\n  readonly theme = computed<RbTheme>(\n    () => this.forcedTheme() ?? this.storedTheme() ?? this.systemTheme(),\n  );\n  readonly isDark = computed(() => this.theme() === 'dark');\n  /** True while a theme is forced; the toggle is hidden then. */\n  readonly isForced = computed(() => this.forcedTheme() !== null);\n\n  constructor() {\n    const onSystemChange = (event: MediaQueryListEvent): void => {\n      this.systemTheme.set(event.matches ? 'dark' : 'light');\n      this.apply();\n    };\n    this.darkScheme?.addEventListener('change', onSystemChange);\n    inject(DestroyRef).onDestroy(() =>\n      this.darkScheme?.removeEventListener('change', onSystemChange),\n    );\n  }\n\n  /** Reads the stored choice and applies the theme to the document. Safe to call more than once. */\n  initialize(): void {\n    if (!this.initialized) {\n      this.initialized = true;\n      this.storedTheme.set(this.readStoredTheme());\n    }\n    this.apply();\n  }\n\n  /** Switches between light and dark and stores the result as an explicit choice. */\n  toggle(): void {\n    this.setTheme(this.theme() === 'dark' ? 'light' : 'dark');\n  }\n\n  /** Stores an explicit choice; OS changes are ignored from now on. */\n  setTheme(theme: RbTheme): void {\n    this.initialized = true;\n    this.storedTheme.set(theme);\n    this.write(RB_THEME_STORAGE_KEY, theme);\n    this.apply();\n  }\n\n  /** Forgets the explicit choice, so the theme follows the OS again. */\n  clearPreference(): void {\n    this.initialized = true;\n    this.storedTheme.set(null);\n    this.remove(RB_THEME_STORAGE_KEY);\n    this.apply();\n  }\n\n  /** Forces a theme (or releases it with `null`) without touching the stored choice. */\n  forceTheme(theme: RbTheme | null): void {\n    this.forcedTheme.set(theme);\n    this.apply();\n  }\n\n  private apply(): void {\n    const root = this.document.documentElement;\n    const theme = this.theme();\n    const explicit = this.forcedTheme() ?? this.storedTheme();\n\n    root.dataset['theme'] = theme;\n    if (explicit) {\n      root.style.colorScheme = explicit;\n    } else {\n      root.style.removeProperty('color-scheme');\n    }\n\n    for (const meta of Array.from(\n      this.document.querySelectorAll<HTMLMetaElement>('meta[name=\"theme-color\"]'),\n    )) {\n      meta.content = RB_THEME_COLORS[theme];\n    }\n  }\n\n  private readStoredTheme(): RbTheme | null {\n    const stored = this.read(RB_THEME_STORAGE_KEY);\n    let theme: RbTheme | null = isTheme(stored) ? stored : null;\n\n    for (const legacyKey of this.options.legacyStorageKeys ?? []) {\n      const legacy = this.read(legacyKey);\n      if (theme === null && isTheme(legacy)) {\n        theme = legacy;\n        this.write(RB_THEME_STORAGE_KEY, legacy);\n      }\n      if (legacy !== null) this.remove(legacyKey);\n    }\n\n    return theme;\n  }\n\n  // Storage can be unavailable (privacy modes, disabled storage); the theme then follows the OS.\n  private read(key: string): string | null {\n    try {\n      return this.window?.localStorage.getItem(key) ?? null;\n    } catch {\n      return null;\n    }\n  }\n\n  private write(key: string, value: string): void {\n    try {\n      this.window?.localStorage.setItem(key, value);\n    } catch {\n      // Ignore: the choice still applies for this session.\n    }\n  }\n\n  private remove(key: string): void {\n    try {\n      this.window?.localStorage.removeItem(key);\n    } catch {\n      // Ignore: nothing to clean up without storage.\n    }\n  }\n}\n","import {\n  EnvironmentProviders,\n  inject,\n  makeEnvironmentProviders,\n  provideAppInitializer,\n} from '@angular/core';\nimport { MatIconRegistry } from '@angular/material/icon';\n\nimport { RB_THEME_OPTIONS, RbThemeOptions, ThemeService } from './theme.service';\n\n/** Font set class of the self-hosted Material Symbols subset (docs/design-system.md, section 10). */\nexport const RB_ICON_FONT_SET = 'material-symbols-outlined';\n\nexport type RbDesignSystemOptions = RbThemeOptions;\n\n/**\n * Registers the kit's runtime pieces in `app.config.ts`:\n *\n * - applies the theme before the root component renders (no flash for a stored choice);\n * - makes `material-symbols-outlined` the default `<mat-icon>` font set.\n */\nexport function provideRbDesignSystem(options: RbDesignSystemOptions = {}): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: RB_THEME_OPTIONS, useValue: options },\n    provideAppInitializer(() => {\n      inject(ThemeService).initialize();\n      inject(MatIconRegistry).setDefaultFontSetClass(RB_ICON_FONT_SET);\n    }),\n  ]);\n}\n","/** Tones of `rb-message` (docs/design-system.md, section 15.3). */\nexport type RbMessageTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Tones of `rb-status-chip` and page header metrics (15.1, 15.5). `active` means in progress. */\nexport type RbStatusTone = 'neutral' | 'active' | 'success' | 'warning' | 'danger';\n\n/**\n * Default icon per tone, so state is never carried by color alone (section 9.4). Neutral status\n * chips and metrics have no default icon: their label is the whole message.\n */\nexport const RB_TONE_ICONS: Readonly<Record<RbMessageTone | RbStatusTone, string | null>> = {\n  neutral: null,\n  info: 'info',\n  active: 'autorenew',\n  success: 'check_circle',\n  warning: 'warning',\n  danger: 'error',\n};\n\n/** Visually hidden prefix that names a message's tone for screen reader users. */\nexport const RB_MESSAGE_TONE_LABELS: Readonly<Record<RbMessageTone, string | null>> = {\n  neutral: null,\n  info: 'Information',\n  success: 'Success',\n  warning: 'Warning',\n  danger: 'Error',\n};\n","/**\n * Kit version. The build stamps it from projects/axiom/package.json (scripts/stamp-version.mjs);\n * source and development builds show the placeholder.\n */\nexport const RB_DESIGN_SYSTEM_VERSION: string = '1.2.3';\n"],"mappings":"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"}
+{"version":3,"file":"rblabs-dev-axiom-core.mjs","names":[],"sources":["../../../projects/axiom/core/src/breakpoints.ts","../../../projects/axiom/core/src/theme.service.ts","../../../projects/axiom/core/src/provide-design-system.ts","../../../projects/axiom/core/src/tones.ts","../../../projects/axiom/core/src/version.ts"],"sourcesContent":["/** Breakpoint widths (docs/design-system.md, section 8). Mirrors `$breakpoints` in _breakpoints.scss. */\nexport const RB_BREAKPOINT_WIDTHS = {\n  xs: '30rem',\n  sm: '40rem',\n  md: '48rem',\n  lg: '60rem',\n  xl: '75rem',\n  '2xl': '87.5rem',\n} as const;\n\nexport type RbBreakpoint = keyof typeof RB_BREAKPOINT_WIDTHS;\n\n/** Media queries for the CDK `BreakpointObserver`, e.g. `observe(RB_BREAKPOINTS.belowLg)`. */\nexport const RB_BREAKPOINTS = {\n  belowXs: '(width < 30rem)',\n  belowSm: '(width < 40rem)',\n  belowMd: '(width < 48rem)',\n  belowLg: '(width < 60rem)',\n  belowXl: '(width < 75rem)',\n  below2xl: '(width < 87.5rem)',\n  aboveXs: '(width >= 30rem)',\n  aboveSm: '(width >= 40rem)',\n  aboveMd: '(width >= 48rem)',\n  aboveLg: '(width >= 60rem)',\n  aboveXl: '(width >= 75rem)',\n  above2xl: '(width >= 87.5rem)',\n} as const;\n","import { DOCUMENT } from '@angular/common';\nimport { DestroyRef, Injectable, InjectionToken, computed, inject, signal } from '@angular/core';\n\nexport type RbTheme = 'light' | 'dark';\n\n/** localStorage key holding the user's explicit choice (docs/design-system.md, section 11). */\nexport const RB_THEME_STORAGE_KEY = 'rb-theme';\n\n/** `--rb-color-bg` per theme; also the `<meta name=\"theme-color\">` value. */\nexport const RB_THEME_COLORS: Readonly<Record<RbTheme, string>> = {\n  light: '#f4f7fb',\n  dark: '#08111d',\n};\n\nexport interface RbThemeOptions {\n  /**\n   * Forces a theme regardless of the stored choice and the OS, without persisting anything. Used by\n   * apps that only support one theme until their migration is done. The theme toggle hides itself\n   * while a theme is forced.\n   */\n  forcedTheme?: RbTheme | null;\n  /** Storage keys an app used before adopting the kit; a valid value is moved to `rb-theme` once. */\n  legacyStorageKeys?: readonly string[];\n}\n\nexport const RB_THEME_OPTIONS = new InjectionToken<RbThemeOptions>('RB_THEME_OPTIONS', {\n  providedIn: 'root',\n  factory: () => ({}),\n});\n\nconst DARK_SCHEME_QUERY = '(prefers-color-scheme: dark)';\n\nfunction isTheme(value: unknown): value is RbTheme {\n  return value === 'light' || value === 'dark';\n}\n\n/**\n * Owns the light/dark theme contract (docs/design-system.md, section 11):\n *\n * - an explicit choice is stored under `rb-theme` and wins over the OS;\n * - without one, the theme follows `prefers-color-scheme` and tracks OS changes live;\n * - the resolved theme is written to `<html>` as `data-theme`, and every\n *   `<meta name=\"theme-color\">` is kept in sync;\n * - `color-scheme` is only set inline for an explicit or forced theme; otherwise the stylesheet's\n *   `color-scheme: light dark` already follows the OS before any script runs.\n *\n * `provideRbDesignSystem()` calls `initialize()` from an app initializer, before first paint.\n */\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n  private readonly document = inject(DOCUMENT);\n  private readonly options = inject(RB_THEME_OPTIONS);\n  private readonly window = this.document.defaultView;\n  private readonly darkScheme = this.window?.matchMedia?.(DARK_SCHEME_QUERY) ?? null;\n\n  private readonly systemTheme = signal<RbTheme>(this.darkScheme?.matches ? 'dark' : 'light');\n  private readonly storedTheme = signal<RbTheme | null>(null);\n  private readonly forcedTheme = signal<RbTheme | null>(this.options.forcedTheme ?? null);\n  private initialized = false;\n\n  /** The user's explicit choice, or `null` while the theme follows the OS. */\n  readonly preference = this.storedTheme.asReadonly();\n  /** The theme in effect: forced, then stored, then the OS preference. */\n  readonly theme = computed<RbTheme>(\n    () => this.forcedTheme() ?? this.storedTheme() ?? this.systemTheme(),\n  );\n  readonly isDark = computed(() => this.theme() === 'dark');\n  /** True while a theme is forced; the toggle is hidden then. */\n  readonly isForced = computed(() => this.forcedTheme() !== null);\n\n  constructor() {\n    const onSystemChange = (event: MediaQueryListEvent): void => {\n      this.systemTheme.set(event.matches ? 'dark' : 'light');\n      this.apply();\n    };\n    this.darkScheme?.addEventListener('change', onSystemChange);\n    inject(DestroyRef).onDestroy(() =>\n      this.darkScheme?.removeEventListener('change', onSystemChange),\n    );\n  }\n\n  /** Reads the stored choice and applies the theme to the document. Safe to call more than once. */\n  initialize(): void {\n    if (!this.initialized) {\n      this.initialized = true;\n      this.storedTheme.set(this.readStoredTheme());\n    }\n    this.apply();\n  }\n\n  /** Switches between light and dark and stores the result as an explicit choice. */\n  toggle(): void {\n    this.setTheme(this.theme() === 'dark' ? 'light' : 'dark');\n  }\n\n  /** Stores an explicit choice; OS changes are ignored from now on. */\n  setTheme(theme: RbTheme): void {\n    this.initialized = true;\n    this.storedTheme.set(theme);\n    this.write(RB_THEME_STORAGE_KEY, theme);\n    this.apply();\n  }\n\n  /** Forgets the explicit choice, so the theme follows the OS again. */\n  clearPreference(): void {\n    this.initialized = true;\n    this.storedTheme.set(null);\n    this.remove(RB_THEME_STORAGE_KEY);\n    this.apply();\n  }\n\n  /** Forces a theme (or releases it with `null`) without touching the stored choice. */\n  forceTheme(theme: RbTheme | null): void {\n    this.forcedTheme.set(theme);\n    this.apply();\n  }\n\n  private apply(): void {\n    const root = this.document.documentElement;\n    const theme = this.theme();\n    const explicit = this.forcedTheme() ?? this.storedTheme();\n\n    root.dataset['theme'] = theme;\n    if (explicit) {\n      root.style.colorScheme = explicit;\n    } else {\n      root.style.removeProperty('color-scheme');\n    }\n\n    for (const meta of Array.from(\n      this.document.querySelectorAll<HTMLMetaElement>('meta[name=\"theme-color\"]'),\n    )) {\n      meta.content = RB_THEME_COLORS[theme];\n    }\n  }\n\n  private readStoredTheme(): RbTheme | null {\n    const stored = this.read(RB_THEME_STORAGE_KEY);\n    let theme: RbTheme | null = isTheme(stored) ? stored : null;\n\n    for (const legacyKey of this.options.legacyStorageKeys ?? []) {\n      const legacy = this.read(legacyKey);\n      if (theme === null && isTheme(legacy)) {\n        theme = legacy;\n        this.write(RB_THEME_STORAGE_KEY, legacy);\n      }\n      if (legacy !== null) this.remove(legacyKey);\n    }\n\n    return theme;\n  }\n\n  // Storage can be unavailable (privacy modes, disabled storage); the theme then follows the OS.\n  private read(key: string): string | null {\n    try {\n      return this.window?.localStorage.getItem(key) ?? null;\n    } catch {\n      return null;\n    }\n  }\n\n  private write(key: string, value: string): void {\n    try {\n      this.window?.localStorage.setItem(key, value);\n    } catch {\n      // Ignore: the choice still applies for this session.\n    }\n  }\n\n  private remove(key: string): void {\n    try {\n      this.window?.localStorage.removeItem(key);\n    } catch {\n      // Ignore: nothing to clean up without storage.\n    }\n  }\n}\n","import {\n  EnvironmentProviders,\n  inject,\n  makeEnvironmentProviders,\n  provideAppInitializer,\n} from '@angular/core';\nimport { MatIconRegistry } from '@angular/material/icon';\n\nimport { RB_THEME_OPTIONS, RbThemeOptions, ThemeService } from './theme.service';\n\n/** Font set class of the self-hosted Material Symbols subset (docs/design-system.md, section 10). */\nexport const RB_ICON_FONT_SET = 'material-symbols-outlined';\n\nexport type RbDesignSystemOptions = RbThemeOptions;\n\n/**\n * Registers the kit's runtime pieces in `app.config.ts`:\n *\n * - applies the theme before the root component renders (no flash for a stored choice);\n * - makes `material-symbols-outlined` the default `<mat-icon>` font set.\n */\nexport function provideRbDesignSystem(options: RbDesignSystemOptions = {}): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: RB_THEME_OPTIONS, useValue: options },\n    provideAppInitializer(() => {\n      inject(ThemeService).initialize();\n      inject(MatIconRegistry).setDefaultFontSetClass(RB_ICON_FONT_SET);\n    }),\n  ]);\n}\n","/** Tones of `rb-message` (docs/design-system.md, section 15.3). */\nexport type RbMessageTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Tones of `rb-status-chip` and page header metrics (15.1, 15.5). `active` means in progress. */\nexport type RbStatusTone = 'neutral' | 'active' | 'success' | 'warning' | 'danger';\n\n/**\n * Default icon per tone, so state is never carried by color alone (section 9.4). Neutral status\n * chips and metrics have no default icon: their label is the whole message.\n */\nexport const RB_TONE_ICONS: Readonly<Record<RbMessageTone | RbStatusTone, string | null>> = {\n  neutral: null,\n  info: 'info',\n  active: 'autorenew',\n  success: 'check_circle',\n  warning: 'warning',\n  danger: 'error',\n};\n\n/** Visually hidden prefix that names a message's tone for screen reader users. */\nexport const RB_MESSAGE_TONE_LABELS: Readonly<Record<RbMessageTone, string | null>> = {\n  neutral: null,\n  info: 'Information',\n  success: 'Success',\n  warning: 'Warning',\n  danger: 'Error',\n};\n","/**\n * Kit version. The build stamps it from projects/axiom/package.json (scripts/stamp-version.mjs);\n * source and development builds show the placeholder.\n */\nexport const RB_DESIGN_SYSTEM_VERSION: string = '1.2.4';\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rblabs-dev/axiom",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Axiom, the RB Labs design system for Angular and Angular Material 3",
   "keywords": [
     "angular",
@@ -132,7 +132,7 @@
     "@angular/material": "^21.0.0 || ^22.0.0",
     "@angular/platform-browser": "^21.0.0 || ^22.0.0",
     "@angular/router": "^21.0.0 || ^22.0.0",
-    "rxjs": "^7.8.0"
+    "rxjs": "^7.4.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/styles/_index.scss

@@ -27,7 +27,7 @@
 @forward 'breakpoints' show below, above, $breakpoints;
 
 // Stamped from projects/axiom/package.json by the build (scripts/stamp-version.mjs).
-$version: '1.2.3';
+$version: '1.2.4';
 
 @mixin design-system($scope: null, $icon-font-url: null) {
   @include fonts.inter();