@eagami/ui 5.77.0 → 5.78.0

package/package.json

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

@@ -40,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,10 +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, 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
+ * 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.
  */