@eagami/ui 5.31.0 → 5.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.31.0",
+  "version": "5.33.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/types/eagami-ui.d.ts

@@ -1033,7 +1033,9 @@ type ButtonType = 'button' | 'submit' | 'reset';
 /**
  * Standard action button supporting primary, secondary, ghost, and danger
  * variants. Includes a loading state that swaps the label for a spinner while
- * preserving the rendered width.
+ * preserving the rendered width. Chrome is tunable per instance via
+ * `--ea-button-padding` and `--ea-button-min-height`, which is how an
+ * icon-only button comes down to little more than its glyph.
  */
 declare class ButtonComponent {
     readonly variant: _angular_core.InputSignal<ButtonVariant>;
@@ -3470,12 +3472,6 @@ declare class SkeletonComponent {
 
 /** Visual size of the slider track and thumb. */
 type SliderSize = EaSize;
-/**
- * Single-value range input controlled with pointer drag or full keyboard
- * navigation (arrows, PageUp/PageDown, Home/End). Supports configurable
- * `min`, `max`, and `step`, optional value display, and integrates with
- * Angular forms via `ControlValueAccessor`.
- */
 declare class SliderComponent implements ControlValueAccessor {
     private readonly i18n;
     readonly trackEl: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
@@ -3497,6 +3493,12 @@ declare class SliderComponent implements ControlValueAccessor {
     readonly showValue: _angular_core.InputSignal<boolean>;
     readonly showMinMaxLabels: _angular_core.InputSignal<boolean>;
     readonly formatValue: _angular_core.InputSignal<(value: number) => string>;
+    /**
+     * Values the thumb is pulled onto while dragging, each drawn as a tick on
+     * the track. The pull reaches a few pixels either side, so a marked value
+     * can be landed exactly without hunting for it.
+     */
+    readonly snapValues: _angular_core.InputSignal<readonly number[]>;
     /** Group thousands with commas in displayed values (ignored when a custom `formatValue` is set). */
     readonly groupThousands: _angular_core.InputSignal<boolean>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
@@ -3511,6 +3513,8 @@ declare class SliderComponent implements ControlValueAccessor {
     readonly isDisabled: _angular_core.Signal<boolean>;
     readonly clampedValue: _angular_core.Signal<number>;
     readonly percent: _angular_core.Signal<number>;
+    /** Where each snap value's tick sits along the track. */
+    readonly tickPercents: _angular_core.Signal<number[]>;
     /** Formats a value for display, grouping thousands with commas unless a custom `formatValue` is set. */
     protected formatDisplay(value: number): string;
     private readonly errorState;
@@ -3534,9 +3538,11 @@ declare class SliderComponent implements ControlValueAccessor {
     handlePointerUp(event: PointerEvent): void;
     handleBlur(): void;
     private updateFromPointer;
+    /** The snap value within the magnet's reach of the pointer, if any. */
+    private magnetTarget;
     private commitValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SliderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SliderComponent, "ea-slider", never, { "label": { "alias": "label"; "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; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showMinMaxLabels": { "alias": "showMinMaxLabels"; "required": false; "isSignal": true; }; "formatValue": { "alias": "formatValue"; "required": false; "isSignal": true; }; "groupThousands": { "alias": "groupThousands"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "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<SliderComponent, "ea-slider", never, { "label": { "alias": "label"; "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; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showMinMaxLabels": { "alias": "showMinMaxLabels"; "required": false; "isSignal": true; }; "formatValue": { "alias": "formatValue"; "required": false; "isSignal": true; }; "snapValues": { "alias": "snapValues"; "required": false; "isSignal": true; }; "groupThousands": { "alias": "groupThousands"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "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>;
 }
 
 /** Visual size of the spinner. */