@eagami/ui 5.66.0 → 5.68.0

package/package.json

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

@@ -26,7 +26,6 @@
   }
 
   &:focus {
-    border-color: var(--color-border-focus);
     @include ea.focus-ring;
   }
 

package/src/styles/_reset.scss

@@ -10,6 +10,8 @@ html {
   font-size: 16px;
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
+  // The touch tap flash is a plain rectangle that ignores rounded corners
+  -webkit-tap-highlight-color: transparent;
 }
 
 body {

package/types/eagami-ui.d.ts

@@ -348,10 +348,25 @@ export interface PaletteConfig {
    * unset and accept the defaults. */
   roles?: Partial<PaletteRoles>;
 }
+/**
+ * A focus colour of its own, for focus rings and outlines. Light mode draws
+ * focus in the derived 500 shade and dark mode in the 300 shade, the same
+ * steps the primary colour uses when no focus colour is set.
+ */
+export interface FocusColorConfig {
+  /** Anchor hex (`#RRGGBB`) the focus shades are derived from. */
+  base: string;
+  /** Pin individual shades to specific hex values, bypassing derivation for
+   * those slots. */
+  overrides?: Partial<Record<PaletteShade, string>>;
+}
 /** Top-level palette config accepted by `provideEagamiUi()`. */
 export interface EagamiPaletteConfig {
   primary?: PaletteConfig;
   secondary?: PaletteConfig;
+  /** Focus follows the primary colour unless this sets one apart, as a brand
+   * whose hue reads as an error or a warning needs. */
+  focus?: FocusColorConfig;
 }
 /** Flat CSS-custom-property name to value map for a single mode. */
 export type DerivedPalette = Record<string, string>;
@@ -541,6 +556,8 @@ export interface ContrastSurfaces {
  *   - `--color-brand-text` vs `canvas` >= 4.5:1 (link / foreground text)
  *   - `--color-brand-default` vs `onBrandText` >= 4.5:1 (button label)
  *   - `--color-brand-default` vs `canvas` >= 3:1 (WCAG 1.4.11 non-text)
+ *   - `--color-border-focus` vs `canvas` >= 3:1 (WCAG 1.4.11 non-text), when a
+ *     focus colour is set
  */
 export declare function validatePalette(palette: ModePalette, surfaces?: ContrastSurfaces): ContrastViolation[];
 /** Format a violation list as a human-readable error message. */
@@ -4782,6 +4799,9 @@ interface ControlErrorState {
  * Auto-derived messages surface only once the bound control is `invalid &&
  * touched`, and a new one waits while focus is still inside the field, until
  * the user leaves it or submits the form, so nothing is flagged mid-edit. A
+ * field the user only passed through, leaving it without changing it, stays
+ * quiet until they change it or the form is submitted, so tabbing past an
+ * empty required field never flags it. A
  * message already showing follows the value as it is typed and clears the
  * moment it is fixed. A message revealed by a pointer press moving focus away
  * waits until that press has landed its click. The control arrives as a signal
@@ -8220,6 +8240,8 @@ export declare class TagComponent {
   private readonly labelEl;
   readonly variant: import("@angular/core").InputSignal<TagVariant>;
   readonly size: import("@angular/core").InputSignal<EaSize>;
+  /** Optional icon component rendered before the label. */
+  readonly icon: import("@angular/core").InputSignal<Type<unknown> | undefined>;
   readonly removable: import("@angular/core").InputSignal<boolean>;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly removeLabel: import("@angular/core").InputSignal<string | undefined>;
@@ -8295,6 +8317,11 @@ export declare class TagComponent {
       "required": false;
       "isSignal": true;
     };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
     "removable": {
       "alias": "removable";
       "required": false;