@rblabs-dev/axiom 1.2.1 → 1.2.3

package/types/rblabs-dev-axiom-core.d.ts

@@ -0,0 +1,116 @@
+import * as i0 from "@angular/core";
+import { EnvironmentProviders, InjectionToken } from "@angular/core";
+/** Breakpoint widths (docs/design-system.md, section 8). Mirrors `$breakpoints` in _breakpoints.scss. */
+export declare const RB_BREAKPOINT_WIDTHS: {
+  readonly xs: "30rem";
+  readonly sm: "40rem";
+  readonly md: "48rem";
+  readonly lg: "60rem";
+  readonly xl: "75rem";
+  readonly '2xl': "87.5rem";
+};
+export type RbBreakpoint = keyof typeof RB_BREAKPOINT_WIDTHS;
+/** Media queries for the CDK `BreakpointObserver`, e.g. `observe(RB_BREAKPOINTS.belowLg)`. */
+export declare const RB_BREAKPOINTS: {
+  readonly belowXs: "(width < 30rem)";
+  readonly belowSm: "(width < 40rem)";
+  readonly belowMd: "(width < 48rem)";
+  readonly belowLg: "(width < 60rem)";
+  readonly belowXl: "(width < 75rem)";
+  readonly below2xl: "(width < 87.5rem)";
+  readonly aboveXs: "(width >= 30rem)";
+  readonly aboveSm: "(width >= 40rem)";
+  readonly aboveMd: "(width >= 48rem)";
+  readonly aboveLg: "(width >= 60rem)";
+  readonly aboveXl: "(width >= 75rem)";
+  readonly above2xl: "(width >= 87.5rem)";
+};
+export type RbTheme = 'light' | 'dark';
+/** localStorage key holding the user's explicit choice (docs/design-system.md, section 11). */
+export declare const RB_THEME_STORAGE_KEY = "rb-theme";
+/** `--rb-color-bg` per theme; also the `<meta name="theme-color">` value. */
+export declare const RB_THEME_COLORS: Readonly<Record<RbTheme, string>>;
+export interface RbThemeOptions {
+  /**
+   * Forces a theme regardless of the stored choice and the OS, without persisting anything. Used by
+   * apps that only support one theme until their migration is done. The theme toggle hides itself
+   * while a theme is forced.
+   */
+  forcedTheme?: RbTheme | null;
+  /** Storage keys an app used before adopting the kit; a valid value is moved to `rb-theme` once. */
+  legacyStorageKeys?: readonly string[];
+}
+export declare const RB_THEME_OPTIONS: InjectionToken<RbThemeOptions>;
+/**
+ * Owns the light/dark theme contract (docs/design-system.md, section 11):
+ *
+ * - an explicit choice is stored under `rb-theme` and wins over the OS;
+ * - without one, the theme follows `prefers-color-scheme` and tracks OS changes live;
+ * - the resolved theme is written to `<html>` as `data-theme`, and every
+ *   `<meta name="theme-color">` is kept in sync;
+ * - `color-scheme` is only set inline for an explicit or forced theme; otherwise the stylesheet's
+ *   `color-scheme: light dark` already follows the OS before any script runs.
+ *
+ * `provideRbDesignSystem()` calls `initialize()` from an app initializer, before first paint.
+ */
+export declare class ThemeService {
+  private readonly document;
+  private readonly options;
+  private readonly window;
+  private readonly darkScheme;
+  private readonly systemTheme;
+  private readonly storedTheme;
+  private readonly forcedTheme;
+  private initialized;
+  /** The user's explicit choice, or `null` while the theme follows the OS. */
+  readonly preference: import("@angular/core").Signal<RbTheme | null>;
+  /** The theme in effect: forced, then stored, then the OS preference. */
+  readonly theme: import("@angular/core").Signal<RbTheme>;
+  readonly isDark: import("@angular/core").Signal<boolean>;
+  /** True while a theme is forced; the toggle is hidden then. */
+  readonly isForced: import("@angular/core").Signal<boolean>;
+  constructor();
+  /** Reads the stored choice and applies the theme to the document. Safe to call more than once. */
+  initialize(): void;
+  /** Switches between light and dark and stores the result as an explicit choice. */
+  toggle(): void;
+  /** Stores an explicit choice; OS changes are ignored from now on. */
+  setTheme(theme: RbTheme): void;
+  /** Forgets the explicit choice, so the theme follows the OS again. */
+  clearPreference(): void;
+  /** Forces a theme (or releases it with `null`) without touching the stored choice. */
+  forceTheme(theme: RbTheme | null): void;
+  private apply;
+  private readStoredTheme;
+  private read;
+  private write;
+  private remove;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/** Font set class of the self-hosted Material Symbols subset (docs/design-system.md, section 10). */
+export declare const RB_ICON_FONT_SET = "material-symbols-outlined";
+export type RbDesignSystemOptions = RbThemeOptions;
+/**
+ * Registers the kit's runtime pieces in `app.config.ts`:
+ *
+ * - applies the theme before the root component renders (no flash for a stored choice);
+ * - makes `material-symbols-outlined` the default `<mat-icon>` font set.
+ */
+export declare function provideRbDesignSystem(options?: RbDesignSystemOptions): EnvironmentProviders;
+/** Tones of `rb-message` (docs/design-system.md, section 15.3). */
+export type RbMessageTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+/** Tones of `rb-status-chip` and page header metrics (15.1, 15.5). `active` means in progress. */
+export type RbStatusTone = 'neutral' | 'active' | 'success' | 'warning' | 'danger';
+/**
+ * Default icon per tone, so state is never carried by color alone (section 9.4). Neutral status
+ * chips and metrics have no default icon: their label is the whole message.
+ */
+export declare const RB_TONE_ICONS: Readonly<Record<RbMessageTone | RbStatusTone, string | null>>;
+/** Visually hidden prefix that names a message's tone for screen reader users. */
+export declare const RB_MESSAGE_TONE_LABELS: Readonly<Record<RbMessageTone, string | null>>;
+/**
+ * Kit version. The build stamps it from projects/axiom/package.json (scripts/stamp-version.mjs);
+ * source and development builds show the placeholder.
+ */
+export declare const RB_DESIGN_SYSTEM_VERSION: string;

package/types/rblabs-dev-axiom-empty-state.d.ts

@@ -0,0 +1,55 @@
+import { RbHeadingLevel } from "@rblabs-dev/axiom/panel";
+import * as i0 from "@angular/core";
+export type RbEmptyStateLayout = 'centered' | 'inline';
+/**
+ * Explains why a region has no content and, when there is one, offers the next step
+ * (docs/design-system.md, section 15.4). `actionLabel` renders an outlined button that emits
+ * `action`; elements marked `rbActions` are projected next to it, for links or several actions.
+ */
+export declare class RbEmptyStateComponent {
+  readonly title: import("@angular/core").InputSignal<string>;
+  readonly description: import("@angular/core").InputSignal<string>;
+  readonly icon: import("@angular/core").InputSignal<string>;
+  /** Heading level of the title; follows the document outline, not the visual size. */
+  readonly headingLevel: import("@angular/core").InputSignal<RbHeadingLevel>;
+  /** `inline` is the compact variant for sidebars and narrow panels. */
+  readonly layout: import("@angular/core").InputSignal<RbEmptyStateLayout>;
+  /** Label of the recovery button; leave empty for a purely informational state. */
+  readonly actionLabel: import("@angular/core").InputSignal<string>;
+  readonly action: import("@angular/core").OutputEmitterRef<void>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RbEmptyStateComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RbEmptyStateComponent, "rb-empty-state", never, {
+    "title": {
+      "alias": "title";
+      "required": true;
+      "isSignal": true;
+    };
+    "description": {
+      "alias": "description";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+    "layout": {
+      "alias": "layout";
+      "required": false;
+      "isSignal": true;
+    };
+    "actionLabel": {
+      "alias": "actionLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "action": "action";
+  }, never, ["[rbActions]"], true, never>;
+}

package/types/rblabs-dev-axiom-message.d.ts

@@ -0,0 +1,48 @@
+import { RbMessageTone } from "@rblabs-dev/axiom/core";
+import * as i0 from "@angular/core";
+/**
+ * How the message is announced. `auto` makes a danger message an assertive alert and every other
+ * tone a polite status; `off` renders a static message with no live region.
+ */
+export type RbMessageLive = 'auto' | 'polite' | 'assertive' | 'off';
+/**
+ * Inline status message (docs/design-system.md, section 15.3). The host is the live region, so keep
+ * the component mounted and change its content: a region inserted together with its text is not
+ * announced by most screen readers (section 9.5).
+ */
+export declare class RbMessageComponent {
+  readonly tone: import("@angular/core").InputSignal<RbMessageTone>;
+  /** Optional bold first line. */
+  readonly title: import("@angular/core").InputSignal<string>;
+  /** Overrides the tone's default icon. */
+  readonly icon: import("@angular/core").InputSignal<string>;
+  readonly live: import("@angular/core").InputSignal<RbMessageLive>;
+  protected readonly resolvedIcon: import("@angular/core").Signal<string>;
+  protected readonly toneLabel: import("@angular/core").Signal<string | null>;
+  private readonly politeness;
+  protected readonly role: import("@angular/core").Signal<"alert" | "status" | null>;
+  protected readonly ariaLive: import("@angular/core").Signal<"polite" | "assertive" | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RbMessageComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RbMessageComponent, "rb-message", never, {
+    "tone": {
+      "alias": "tone";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "live": {
+      "alias": "live";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}

package/types/rblabs-dev-axiom-monogram.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+/**
+ * The RB monogram (docs/design-system.md, section 12.1), drawn inline from the brand tokens so it
+ * needs no request and is identical in both themes. Decorative: the element that contains it (the
+ * brand lockup link) carries the accessible name. Size it with `inline-size` on the host.
+ */
+export declare class RbMonogramComponent {
+  /** Unique per instance: several monograms can share a page. */
+  protected readonly gradientId: string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RbMonogramComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RbMonogramComponent, "rb-monogram", never, {}, {}, never, never, true, never>;
+}

package/types/rblabs-dev-axiom-page-header.d.ts

@@ -0,0 +1,44 @@
+import { RbStatusTone } from "@rblabs-dev/axiom/core";
+import * as i0 from "@angular/core";
+export interface RbPageHeaderMetric {
+  label: string;
+  value: string | number;
+  /** Adds a tone color and icon to the value; the label and value carry the meaning. */
+  tone?: RbStatusTone;
+}
+/**
+ * The page's single `<h1>` with its eyebrow, description, summary metrics and page actions
+ * (docs/design-system.md, section 15.1). Elements marked `rbActions` are projected next to the
+ * title.
+ */
+export declare class RbPageHeaderComponent {
+  readonly title: import("@angular/core").InputSignal<string>;
+  /** Short context line above the title, such as the app area. */
+  readonly eyebrow: import("@angular/core").InputSignal<string>;
+  readonly description: import("@angular/core").InputSignal<string>;
+  readonly metrics: import("@angular/core").InputSignal<readonly RbPageHeaderMetric[]>;
+  protected toneIcon(metric: RbPageHeaderMetric): string | null;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RbPageHeaderComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RbPageHeaderComponent, "rb-page-header", never, {
+    "title": {
+      "alias": "title";
+      "required": true;
+      "isSignal": true;
+    };
+    "eyebrow": {
+      "alias": "eyebrow";
+      "required": false;
+      "isSignal": true;
+    };
+    "description": {
+      "alias": "description";
+      "required": false;
+      "isSignal": true;
+    };
+    "metrics": {
+      "alias": "metrics";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[rbActions]"], true, never>;
+}

package/types/rblabs-dev-axiom-panel.d.ts

@@ -0,0 +1,44 @@
+import * as i0 from "@angular/core";
+export type RbPanelVariant = 'default' | 'soft' | 'elevated' | 'danger';
+export type RbHeadingLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * Content container with an optional header (docs/design-system.md, section 15.2). Elements marked
+ * `rbActions` are projected into the header next to the title.
+ */
+export declare class RbPanelComponent {
+  readonly title: import("@angular/core").InputSignal<string>;
+  readonly description: import("@angular/core").InputSignal<string>;
+  readonly variant: import("@angular/core").InputSignal<RbPanelVariant>;
+  /** Heading level of the title; follows the document outline, not the visual size. */
+  readonly headingLevel: import("@angular/core").InputSignal<RbHeadingLevel>;
+  /** Removes the body padding, for a table or list that runs to the panel's edges. */
+  readonly flush: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RbPanelComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RbPanelComponent, "rb-panel", never, {
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "description": {
+      "alias": "description";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+    "flush": {
+      "alias": "flush";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[rbActions]", "*"], true, never>;
+}

package/types/rblabs-dev-axiom-public-shell.d.ts

@@ -0,0 +1,28 @@
+import * as i0 from "@angular/core";
+/**
+ * Frame for landing, sign-in and other public pages (docs/design-system.md, section 16.2): skip
+ * link, a header with the brand lockup and theme toggle, a centered content area on the brand
+ * background, and the standard footer.
+ */
+export declare class RbPublicShellComponent {
+  /** Shown in the lockup and the footer: `Admin`, `Auth`, `Rover`, `Photogrammetry`… */
+  readonly appName: import("@angular/core").InputSignal<string>;
+  /** The lockup's link target, as a `routerLink` value. */
+  readonly homeLink: import("@angular/core").InputSignal<string | readonly unknown[]>;
+  private readonly main;
+  /** See RbAppShellComponent: keeps the skip link on the current route. */
+  protected skipToMain(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RbPublicShellComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RbPublicShellComponent, "rb-public-shell", never, {
+    "appName": {
+      "alias": "appName";
+      "required": true;
+      "isSignal": true;
+    };
+    "homeLink": {
+      "alias": "homeLink";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[rbShellActions]", "*", "[rbShellFooter]"], true, never>;
+}

package/types/rblabs-dev-axiom-shell-footer.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+/**
+ * The standard footer of every shell (docs/design-system.md, section 12.5): "© <year> RB Labs ·
+ * <App name>", followed on the same line by any projected links or status.
+ */
+export declare class RbShellFooterComponent {
+  readonly appName: import("@angular/core").InputSignal<string>;
+  protected readonly year: number;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RbShellFooterComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RbShellFooterComponent, "rb-shell-footer", never, {
+    "appName": {
+      "alias": "appName";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}

package/types/rblabs-dev-axiom-status-chip.d.ts

@@ -0,0 +1,40 @@
+import { RbStatusTone } from "@rblabs-dev/axiom/core";
+import * as i0 from "@angular/core";
+export type RbStatusChipSize = 'default' | 'compact';
+/**
+ * Read-only status label (docs/design-system.md, section 15.5). The label is always visible and
+ * every non-neutral tone has an icon, so the state is never carried by color alone. It is not
+ * interactive and not a live region: announce changes through `rb-message` or a status region.
+ */
+export declare class RbStatusChipComponent {
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly tone: import("@angular/core").InputSignal<RbStatusTone>;
+  /** Overrides the tone's default icon. */
+  readonly icon: import("@angular/core").InputSignal<string>;
+  /** `compact` fits a single table row line. */
+  readonly size: import("@angular/core").InputSignal<RbStatusChipSize>;
+  protected readonly resolvedIcon: import("@angular/core").Signal<string | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RbStatusChipComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RbStatusChipComponent, "rb-status-chip", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "tone": {
+      "alias": "tone";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/rblabs-dev-axiom-technical-value.d.ts

@@ -0,0 +1,35 @@
+import * as i0 from "@angular/core";
+/**
+ * Identifier, key, hash or path in monospace on one line (docs/design-system.md, section 15.6).
+ * A value that does not fit is truncated with an ellipsis and the full value appears in a tooltip.
+ * Screen readers and copying always get the full value, even when `displayValue` shortens it.
+ */
+export declare class RbTechnicalValueComponent {
+  readonly value: import("@angular/core").InputSignal<string>;
+  /** Shorter text to show instead of the value, such as the first characters of a hash. */
+  readonly displayValue: import("@angular/core").InputSignal<string>;
+  private readonly host;
+  private readonly destroyRef;
+  private readonly text;
+  private readonly truncated;
+  protected readonly shownValue: import("@angular/core").Signal<string>;
+  protected readonly shortened: import("@angular/core").Signal<boolean>;
+  protected readonly tooltipEnabled: import("@angular/core").Signal<boolean>;
+  constructor();
+  /** Copying a selection inside the component copies the full value, not the shortened text. */
+  protected copyFullValue(event: ClipboardEvent): void;
+  private measure;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RbTechnicalValueComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RbTechnicalValueComponent, "rb-technical-value", never, {
+    "value": {
+      "alias": "value";
+      "required": true;
+      "isSignal": true;
+    };
+    "displayValue": {
+      "alias": "displayValue";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/rblabs-dev-axiom-theme-toggle.d.ts

@@ -0,0 +1,12 @@
+import { ThemeService } from "@rblabs-dev/axiom/core";
+import * as i0 from "@angular/core";
+/**
+ * Light/dark switch for the app shell (docs/design-system.md, section 11). The accessible name stays
+ * "Dark theme" and `aria-pressed` carries the state, so the label never rewrites itself into the
+ * opposite action. Renders nothing while the app forces a theme.
+ */
+export declare class RbThemeToggleComponent {
+  protected readonly theme: ThemeService;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RbThemeToggleComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RbThemeToggleComponent, "rb-theme-toggle", never, {}, {}, never, never, true, never>;
+}