@eagami/ui 5.75.0 → 5.77.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.75.0",
+  "version": "5.77.0",
   "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",
@@ -33,7 +33,13 @@
   "peerDependencies": {
     "@angular/common": "^21.0.0 || ^22.0.0",
     "@angular/core": "^21.0.0 || ^22.0.0",
-    "@angular/forms": "^21.0.0 || ^22.0.0"
+    "@angular/forms": "^21.0.0 || ^22.0.0",
+    "@angular/router": "^21.0.0 || ^22.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/router": {
+      "optional": true
+    }
   },
   "dependencies": {},
   "engines": {
@@ -49,6 +55,10 @@
       "types": "./types/eagami-ui.d.ts",
       "default": "./fesm2022/eagami-ui.mjs"
     },
+    "./router": {
+      "types": "./types/eagami-ui-router.d.ts",
+      "default": "./fesm2022/eagami-ui-router.mjs"
+    },
     "./testing": {
       "types": "./types/eagami-ui-testing.d.ts",
       "default": "./fesm2022/eagami-ui-testing.mjs"
@@ -61,6 +71,7 @@
     "src/styles",
     "schematics",
     "testing",
+    "router",
     "README.md"
   ],
   "schematics": "./schematics/collection.json"

package/router/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/eagami-ui-router.mjs",
+  "typings": "../types/eagami-ui-router.d.ts"
+}

package/schematics/collection.json

@@ -1,7 +1,7 @@
 {
   "schematics": {
     "ng-add": {
-      "description": "Set up Eagami UI: register the global stylesheet and fonts in an Angular workspace.",
+      "description": "Set up Eagami UI: register the global stylesheet, the fonts, and provideStaleBuildReload() in an Angular workspace.",
       "factory": "./ng-add/index#ngAdd",
       "schema": "./ng-add/schema.json"
     }

package/schematics/ng-add/index.js

@@ -2,10 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ngAdd = ngAdd;
 const schematics_1 = require("@angular-devkit/schematics");
+const utility_1 = require("@schematics/angular/utility");
 const workspace_1 = require("@schematics/angular/utility/workspace");
 const utils_1 = require("./utils");
 function ngAdd(options) {
-    return (0, schematics_1.chain)([registerStylesheet(options), registerFonts(options), logNextSteps()]);
+    return (0, schematics_1.chain)([
+        registerStylesheet(options),
+        registerFonts(options),
+        registerStaleBuildReload(options),
+        logNextSteps(),
+    ]);
 }
 function registerStylesheet(options) {
     return (0, workspace_1.updateWorkspace)(workspace => {
@@ -41,9 +47,15 @@ function registerFonts(options) {
         }
     };
 }
+function registerStaleBuildReload(options) {
+    return async (tree) => {
+        const { name } = findProject(await (0, workspace_1.getWorkspace)(tree), options.project);
+        return (0, utility_1.addRootProvider)(name, ({ code, external }) => code `${external('provideStaleBuildReload', '@eagami/ui/router')}()`);
+    };
+}
 function logNextSteps() {
     return (_tree, context) => {
-        context.logger.info('Eagami UI is set up: the global stylesheet and fonts are registered.');
+        context.logger.info('Eagami UI is set up: the global stylesheet and fonts are registered, and provideStaleBuildReload() reloads a tab left open across a deploy into the new build.');
         context.logger.info('Optional: call provideEagamiUi() in app.config.ts for a custom brand palette or extra locales.');
     };
 }

package/src/styles/_mixins.scss

@@ -11,19 +11,20 @@ $target-size-min: 24px;
 // transparent, so it reads the same on any surface, however coloured. Pass a full
 // box-shadow value to draw a halo instead, such as an error ring; box-shadow is
 // dropped in forced-colors (Windows High Contrast) mode, so a real outline stands
-// in for it there.
-@mixin focus-ring($ring: null) {
+// in for it there. Pass `$offset` to move the outline's gap, which a negative
+// value turns inward.
+@mixin focus-ring($ring: null, $offset: 2px) {
   @if $ring {
     outline: none;
     box-shadow: $ring;
   } @else {
     outline: var(--border-width-medium) solid var(--color-border-focus);
-    outline-offset: 2px;
+    outline-offset: $offset;
   }
 
   @media (forced-colors: active) {
     outline: 2px solid Highlight;
-    outline-offset: 2px;
+    outline-offset: $offset;
   }
 }
 

package/types/eagami-ui-router.d.ts

@@ -0,0 +1,54 @@
+import { EnvironmentProviders, InjectionToken } from "@angular/core";
+/**
+ * How a reload into the current build turned out:
+ *
+ * - `'recovered'`: the reloaded page opened
+ * - `'failed-after-reload'`: the reloaded page failed to open too, so the error is left to surface
+ * - `'stayed'`: the visitor chose to stay when the browser asked them to confirm leaving
+ */
+type StaleBuildReloadOutcome = 'recovered' | 'failed-after-reload' | 'stayed';
+interface StaleBuildReloadReport {
+  outcome: StaleBuildReloadOutcome;
+  /** The path that failed to open, without its query or fragment. */
+  route: string;
+  /** The `version` configured in the build that failed to open the page. */
+  fromVersion?: string;
+  /** The `version` configured in the build making the report. */
+  toVersion?: string;
+}
+interface StaleBuildReloadConfig {
+  /** The app's version, carried across the reload so a report names both builds. */
+  version?: string;
+  /** Called once per reload with how it turned out, for example to log it. */
+  onReport?: (report: StaleBuildReloadReport) => void;
+}
+declare const LOAD_PAGE: InjectionToken<(url: string, replace: boolean) => void>;
+/**
+ * Whether `error` is a failed page load that `provideStaleBuildReload()` has
+ * already answered by reloading. Error reporters can drop it, since the
+ * reload's outcome reaches `onReport` instead:
+ *
+ * ```ts
+ * Sentry.init({
+ *   beforeSend: (event, hint) =>
+ *     isStaleBuildReloadError(hint.originalException) ? null : event,
+ * });
+ * ```
+ */
+export declare function isStaleBuildReloadError(error: unknown): boolean;
+/**
+ * Loads the current build in full when the code of a page being opened fails
+ * to load, which is what a tab still running a build that a deploy has since
+ * replaced runs into. The reload opens the page the visitor asked for, and
+ * stops after one attempt if the new build fails as well.
+ *
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideRouter(routes), provideStaleBuildReload()],
+ * });
+ * ```
+ *
+ * Does nothing during server rendering.
+ */
+export declare function provideStaleBuildReload(config?: StaleBuildReloadConfig): EnvironmentProviders;
+export type { StaleBuildReloadConfig, StaleBuildReloadOutcome, StaleBuildReloadReport };

package/types/eagami-ui.d.ts

@@ -1967,7 +1967,10 @@ export type ButtonAlign = 'start' | 'center' | 'end';
  * while preserving the rendered width. Chrome is tunable per instance via
  * `--ea-button-padding`, `--ea-button-min-height` and `--ea-button-radius`,
  * which is how an icon-only button comes down to little more than its glyph
- * and how a call-to-action becomes a pill. For navigation, put
+ * and how a call-to-action becomes a pill, and `--ea-button-focus-ring-offset`
+ * moves the focus ring's gap, which a negative length draws inside a button
+ * packed too tightly among others for the ring to fit around it. For
+ * navigation, put
  * `ButtonLinkComponent` on an anchor instead (`<a eaButtonLink href="...">`):
  * it takes the same styling inputs and keeps real link behaviour.
  */