@eagami/ui 5.63.1 → 5.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.63.1",
+  "version": "5.64.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/_form-field.scss

@@ -21,11 +21,8 @@
   color: var(--color-text-primary);
   transition: var(--transition-colors), var(--transition-shadow);
 
-  // `opacity: 1` overrides the Firefox/WebKit default of ~0.54 on placeholders,
-  // which would wash out the tertiary token and collapse contrast in dark mode
   &::placeholder {
-    color: var(--color-text-tertiary);
-    opacity: 1;
+    @include ea.placeholder-text;
   }
 
   &:focus {

package/src/styles/_mixins.scss

@@ -7,13 +7,19 @@
 // for one of the SC's exceptions (inline, spacing, essential).
 $target-size-min: 24px;
 
-// Standard focus indicator. The ring is a soft box-shadow halo, but box-shadow
-// is dropped in forced-colors (Windows High Contrast) mode, which would leave
-// keyboard users with no visible focus. Pair the halo with a real outline that
-// only renders in forced-colors so the ring survives there. Pass the full
-// box-shadow value to compose the ring with an existing shadow.
-@mixin focus-ring($ring: var(--shadow-focus-ring)) {
-  box-shadow: $ring;
+// Standard focus indicator. The ring is an outline set off by a gap, and the gap is
+// 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) {
+  @if $ring {
+    outline: none;
+    box-shadow: $ring;
+  } @else {
+    outline: var(--border-width-medium) solid var(--color-border-focus);
+    outline-offset: 2px;
+  }
 
   @media (forced-colors: active) {
     outline: 2px solid Highlight;
@@ -21,6 +27,18 @@ $target-size-min: 24px;
   }
 }
 
+// The focus ring drawn inside the element, for an element that fills a container which
+// clips its overflow, such as a row of a scrolling table. Its gap from the edge mirrors
+// the outer ring's, and keeps its corners clear of a rounded container's curve.
+@mixin focus-ring-inset {
+  outline: var(--border-width-medium) solid var(--color-border-focus);
+  outline-offset: calc(-2 * var(--border-width-medium));
+
+  @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.
@@ -35,6 +53,7 @@ $target-size-min: 24px;
 // visible, so the border alone picks up the focus colour, without the halo.
 @mixin readonly-focus-cue {
   border-color: var(--color-border-focus);
+  outline: none;
   box-shadow: none;
 
   // Border colour is unreliable in forced-colors, so the ring's outline stands
@@ -252,3 +271,12 @@ $target-size-min: 24px;
   width: auto;
   height: auto;
 }
+
+// Placeholder text, set apart from a value by its italics rather than by fading it, so it
+// keeps the tertiary text's contrast. The opacity is set outright, since browsers dim
+// placeholders by different amounts by default
+@mixin placeholder-text {
+  opacity: 1;
+  font-style: italic;
+  color: var(--color-text-tertiary);
+}

package/types/eagami-ui.d.ts

@@ -1395,8 +1395,11 @@ interface NiceScale {
   max: number;
   ticks: number[];
 }
-/** Extends `[min, max]` outward to round tick values, about `maxTicks` of them. */
-declare function niceScale(min: number, max: number, maxTicks?: number): NiceScale;
+/**
+ * Extends `[min, max]` outward to round tick values, about `maxTicks` of them, or more
+ * where a gap would otherwise exceed `maxStep`.
+ */
+declare function niceScale(min: number, max: number, maxTicks?: number, maxStep?: number): NiceScale;
 /** Rough rendered width of `text` in px, for reserving axis room without a layout pass. */
 declare function estimateTextWidth(text: string, fontPx: number): number;
 /** Live size of a chart's host, re-measured on resize and whenever `size` changes. */
@@ -5482,6 +5485,8 @@ export declare class LineChartComponent {
   readonly yMin: import("@angular/core").InputSignal<number | undefined>;
   /** Upper bound of the y-axis; derived from the data when unset. */
   readonly yMax: import("@angular/core").InputSignal<number | undefined>;
+  /** Largest gap between y-axis ticks; a wider range gets more ticks instead of wider gaps. */
+  readonly maxYStep: import("@angular/core").InputSignal<number | undefined>;
   /** How the x-axis labels are set; `auto` turns them as they run out of room. */
   readonly xLabelOrientation: import("@angular/core").InputSignal<ChartLabelOrientation>;
   /** Marks the foot of a y-axis that stops short of zero with a break symbol. */
@@ -5684,6 +5689,11 @@ export declare class LineChartComponent {
       "required": false;
       "isSignal": true;
     };
+    "maxYStep": {
+      "alias": "maxYStep";
+      "required": false;
+      "isSignal": true;
+    };
     "xLabelOrientation": {
       "alias": "xLabelOrientation";
       "required": false;