@eagami/ui 5.60.0 → 5.60.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.60.0",
+  "version": "5.60.2",
   "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/src/styles/_fallback-fonts.scss

@@ -0,0 +1,22 @@
+// Arial with metric overrides matching DM Sans and Syne, named right after each web font
+// in the font tokens, so text laid out before the web font arrives already takes its
+// final size and the swap moves nothing. Changing a web font means regenerating these
+// (Capsize, fontaine or fallback-font-generator).
+
+@font-face {
+  font-family: 'DM Sans Fallback';
+  src: local('Arial');
+  ascent-override: 92.5%;
+  descent-override: 24.4%;
+  line-gap-override: 0%;
+  size-adjust: 100.06%;
+}
+
+@font-face {
+  font-family: 'Syne Fallback';
+  src: local('Arial');
+  ascent-override: 102%;
+  descent-override: 27%;
+  line-gap-override: 0%;
+  size-adjust: 105%;
+}

package/src/styles/eagami-ui.scss

@@ -2,6 +2,7 @@
 // Consumers must also load the DM Sans and Syne fonts via <link> tags in the HTML head.
 
 @use 'tokens/index';
+@use 'fallback-fonts';
 @use 'reset';
 @use 'tooltip';
 @use 'form-field';

package/src/styles/tokens/_colors.scss

@@ -234,6 +234,8 @@
   );
   --color-border-default: var(--color-neutral-400);
   --color-border-strong: var(--color-neutral-300);
+  // primary-500 drops under 3:1 on the dark surfaces, so focus lifts to a lighter step
+  --color-border-focus: var(--color-primary-300);
   // Dividers flip to a light wash so the rule stays visible on every dark tier
   --color-divider: rgba(255, 255, 255, 0.12);
 

package/src/styles/tokens/_elevation.scss

@@ -27,7 +27,9 @@
   --shadow-well-strong:
     inset 0 2px 3px rgba(0, 0, 0, 0.4), inset 0 -1.5px 1px rgba(255, 255, 255, 0.55);
 
-  --shadow-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.45);
+  // The gap keeps the ring apart from a filled control of the same hue
+  --shadow-focus-ring:
+    0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-border-focus);
   --shadow-focus-ring-error: 0 0 0 3px var(--color-error-200);
   --shadow-focus-ring-success: 0 0 0 3px var(--color-success-200);
 

package/types/eagami-ui.d.ts

@@ -9350,7 +9350,9 @@ export declare function iconDisplayName(iconOrSlug: IconComponentType | string):
  * the consuming bundle, which is the right trade-off when you actually want
  * the full set. For single-icon usage import the component directly (e.g.
  * `import { HomeIconComponent } from '@eagami/ui'`) and the bundler will
- * tree-shake `ICONS` away.
+ * tree-shake `ICONS` away. The `@__PURE__` annotation is what allows that:
+ * bundlers that keep unannotated calls in third-party code, as Angular's build
+ * does, would otherwise keep the `.sort()` call and every icon with it.
  */
 export declare const ICONS: ReadonlyArray<IconComponentType>;
 export declare class AccessibilityIconComponent extends IconComponentBase {