@eagami/ui 5.76.0 → 5.78.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.76.0",
+  "version": "5.78.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;
   }
 }
 
@@ -39,6 +40,31 @@ $target-size-min: 24px;
   }
 }
 
+// The inset ring for an element that can carry a solid fill of its own, such as a
+// filled button or a selected day, where a ring in the focus colour alone could all
+// but vanish into the fill. A band of the page colour runs just inside the ring to
+// set it apart. `$offset` moves the ring and the band follows it, and `$shadow`
+// keeps a shadow the element already wears.
+@mixin focus-ring-inset-banded(
+  $offset: calc(-1 * var(--border-width-medium)),
+  $shadow: null
+) {
+  $band: inset 0 0 0 calc(var(--border-width-medium) - #{$offset}) var(--color-bg-base);
+
+  outline: var(--border-width-medium) solid var(--color-border-focus);
+  outline-offset: $offset;
+
+  @if $shadow {
+    box-shadow: $band, $shadow;
+  } @else {
+    box-shadow: $band;
+  }
+
+  @media (forced-colors: active) {
+    outline-color: Highlight;
+  }
+}
+
 // Floating surfaces (menus, dialogs, popovers, toasts) lean on elevation shadow
 // for their boundary, but shadows are dropped in forced-colors mode. Add a
 // hairline border there so the surface stays separated from the content behind.

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. The focus ring is drawn just inside
+ * the button over a band of the page colour, so it never overlaps a neighbour
+ * and stands out on any fill; `--ea-button-focus-ring-offset` moves it, and a
+ * positive length draws it outside instead. For navigation, put
  * `ButtonLinkComponent` on an anchor instead (`<a eaButtonLink href="...">`):
  * it takes the same styling inputs and keeps real link behaviour.
  */