@eagami/ui 5.2.2 → 5.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.2.2",
+  "version": "5.3.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/tokens/_colors.scss

@@ -16,16 +16,16 @@
   --color-primary-800: #162f41;
   --color-primary-900: #0d1c26;
 
-  --color-secondary-50: #f2eff5;
-  --color-secondary-100: #dfd9e8;
-  --color-secondary-200: #c4b9d5;
-  --color-secondary-300: #a493be;
-  --color-secondary-400: #8169a5;
-  --color-secondary-500: #665086;
-  --color-secondary-600: #503f69;
-  --color-secondary-700: #3d3050;
-  --color-secondary-800: #292136;
-  --color-secondary-900: #181320;
+  --color-secondary-50: #f3f5fa;
+  --color-secondary-100: #dce1ec;
+  --color-secondary-200: #bbc4d8;
+  --color-secondary-300: #93a1bf;
+  --color-secondary-400: #687aa5;
+  --color-secondary-500: #506086;
+  --color-secondary-600: #404c6a;
+  --color-secondary-700: #313b51;
+  --color-secondary-800: #232938;
+  --color-secondary-900: #151922;
 
   --color-neutral-0: #ffffff;
   --color-neutral-50: #f9fafb;
@@ -132,6 +132,7 @@
   --color-brand-secondary-default: var(--color-secondary-500);
   --color-brand-secondary-hover: var(--color-secondary-600);
   --color-brand-secondary-active: var(--color-secondary-700);
+  --color-brand-secondary-text: var(--color-secondary-700);
   --color-brand-secondary-subtle: var(--color-secondary-50);
   --color-brand-secondary-muted: var(--color-secondary-100);
 
@@ -233,6 +234,15 @@
   --color-brand-subtle: rgba(75, 145, 195, 0.1);
   --color-brand-muted: rgba(75, 145, 195, 0.2);
 
+  // The secondary surface does not lighten in dark mode: its 500 shade is dark
+  // enough that a white label clears 4.5:1 in both modes. The text token flips
+  // lighter (700 to 200) to stay readable on the dark elevated popover, and the
+  // washes re-tint to a low-alpha secondary hue so they darken enough for light
+  // text.
+  --color-brand-secondary-text: var(--color-secondary-200);
+  --color-brand-secondary-subtle: rgba(104, 122, 165, 0.1);
+  --color-brand-secondary-muted: rgba(104, 122, 165, 0.2);
+
   // Light pastels become unreadable behind light text in dark mode. Re-tint as
   // a low-alpha wash of the saturated *-500 hue so the surface darkens enough
   // for white text.

package/types/eagami-ui.d.ts

@@ -1187,6 +1187,8 @@ declare class ColorPickerComponent implements ControlValueAccessor {
     readonly errorMessages: _angular_core.InputSignal<Partial<Record<string, string>> | undefined>;
     /** Whether to show the alpha slider. When `false` the emitted value always has alpha = 1. */
     readonly showAlpha: _angular_core.InputSignal<boolean>;
+    /** Whether to show the clear button when a value is set. */
+    readonly clearable: _angular_core.InputSignal<boolean>;
     /** Output format. `all` lets the user cycle hex/rgb/hsl in the popover; a specific value locks it. */
     readonly format: _angular_core.InputSignal<ColorPickerFormat>;
     /** Preset swatches shown at the bottom of the popover. Pass an empty array to hide. */
@@ -1319,7 +1321,7 @@ declare class ColorPickerComponent implements ControlValueAccessor {
     private commit;
     private refreshHexInput;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPickerComponent, "ea-color-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "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; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "errorMessages": { "alias": "errorMessages"; "required": false; "isSignal": true; }; "showAlpha": { "alias": "showAlpha"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPickerComponent, "ea-color-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "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; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "errorMessages": { "alias": "errorMessages"; "required": false; "isSignal": true; }; "showAlpha": { "alias": "showAlpha"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; }, never, never, true, never>;
 }
 
 /** Vertical density preset for table rows and header cells. */
@@ -2602,16 +2604,23 @@ declare class ProgressBarComponent {
     /** Shows the rounded percentage alongside the label. */
     readonly showPercentage: _angular_core.InputSignal<boolean>;
     readonly indeterminate: _angular_core.InputSignal<boolean>;
+    /**
+     * Optional buffered position ahead of `value` (same scale as `value`),
+     * rendered as a secondary-colour segment behind the fill. Use for
+     * download/upload-then-process style progress.
+     */
+    readonly buffer: _angular_core.InputSignal<number | undefined>;
     /** Whether to render the percentage. */
     readonly showsPercentage: _angular_core.Signal<boolean>;
     readonly percentage: _angular_core.Signal<number>;
     readonly percentageRounded: _angular_core.Signal<number>;
+    readonly bufferPercentage: _angular_core.Signal<number | null>;
     readonly hostClasses: _angular_core.Signal<{
         [x: string]: boolean;
         'ea-progress-bar--indeterminate': boolean;
     }>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressBarComponent, "ea-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showPercentage": { "alias": "showPercentage"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressBarComponent, "ea-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showPercentage": { "alias": "showPercentage"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "buffer": { "alias": "buffer"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Visual size shared by all radios in the group. */