@eagami/ui 5.76.0 → 5.77.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.76.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",

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.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.
  */