@eagami/ui 2.10.0 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/src/styles/tokens/_colors.scss

@@ -77,10 +77,18 @@
   --color-bg-base: var(--color-neutral-0);
   --color-bg-subtle: var(--color-neutral-50);
   --color-bg-stripe: var(--color-neutral-50);
+  // Zebra-stripe fill for table rows: a mid-tone between the base row and the
+  // header tint so striped rows read as lighter than the header, not identical to
+  // it. Dark mode overrides the ratio to stay equally subtle.
+  --color-bg-stripe-subtle: color-mix(
+    in srgb,
+    var(--color-bg-base) 30%,
+    var(--color-bg-stripe)
+  );
   --color-bg-muted: var(--color-neutral-100);
-  // Stronger neutral fill for placeholder surfaces (e.g. avatar) that must read
-  // clearly against the page; muted is too faint on a white base
-  --color-bg-emphasis: var(--color-neutral-300);
+  // Soft neutral fill for placeholder surfaces (e.g. avatar initials) when no
+  // image is set; light enough to sit gently on a white page
+  --color-bg-emphasis: var(--color-neutral-100);
   --color-bg-elevated: var(--color-neutral-0);
   --color-bg-overlay: rgba(0, 0, 0, 0.5);
 
@@ -169,6 +177,13 @@
   --color-bg-base: var(--color-neutral-800);
   --color-bg-subtle: var(--color-neutral-700);
   --color-bg-stripe: var(--color-neutral-900);
+  // The dark base-to-stripe gap reads stronger than the light one, so weight the
+  // stripe mix toward the base row to keep zebra striping subtle.
+  --color-bg-stripe-subtle: color-mix(
+    in srgb,
+    var(--color-bg-base) 62.5%,
+    var(--color-bg-stripe)
+  );
   --color-bg-elevated: var(--color-neutral-700);
   // Opaque muted surface for static fills (disabled fields, slider/progress
   // tracks, skeletons). Hover/active fills route through the translucent

package/types/eagami-ui.d.ts

@@ -1272,6 +1272,7 @@ declare class CodeInputComponent implements ControlValueAccessor {
     readonly digitEls: _angular_core.Signal<readonly ElementRef<HTMLInputElement>[]>;
     protected readonly i18n: EagamiI18nService;
     readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Placeholder text spread one character per cell (cell i shows character i). */
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly length: _angular_core.InputSignal<number>;
     readonly size: _angular_core.InputSignal<EaSize>;
@@ -1280,6 +1281,8 @@ declare class CodeInputComponent implements ControlValueAccessor {
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly readonly: _angular_core.InputSignal<boolean>;
     readonly required: _angular_core.InputSignal<boolean>;
+    /** Allow any non-whitespace character; when false (default) only digits are accepted. */
+    readonly allowAllChars: _angular_core.InputSignal<boolean>;
     readonly id: _angular_core.InputSignal<string>;
     readonly value: _angular_core.ModelSignal<string>;
     readonly focusedIndex: _angular_core.WritableSignal<number>;
@@ -1293,6 +1296,7 @@ declare class CodeInputComponent implements ControlValueAccessor {
     readonly showError: _angular_core.Signal<boolean>;
     readonly showHint: _angular_core.Signal<boolean>;
     readonly digits: _angular_core.Signal<string[]>;
+    readonly placeholders: _angular_core.Signal<string[]>;
     readonly indices: _angular_core.Signal<number[]>;
     writeValue(val: string): void;
     registerOnChange(fn: (value: string) => void): void;
@@ -1305,9 +1309,10 @@ declare class CodeInputComponent implements ControlValueAccessor {
     handleBlur(): void;
     /** Moves keyboard focus to the next empty digit (or the last one when full). */
     focus(): void;
+    private sanitize;
     private focusDigit;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CodeInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CodeInputComponent, "ea-code-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CodeInputComponent, "ea-code-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "allowAllChars": { "alias": "allowAllChars"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
 }
 
 /** Visual size of the date picker trigger. */