@elasticias/ui 1.0.23 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elasticias/ui",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

package/styles/_comptoir.scss

@@ -90,6 +90,11 @@
   --paper:      var(--ink-50);
   --paper-alt:  #fff;
   --rule:       var(--ink-200);
+  /* The border a bordered control moves to on hover. One token, because the
+     two conventions that grew here — near-black on ghost buttons and pills,
+     mid-grey on selects, triggers and row actions — meant a button and a
+     select sitting in the same row hovered to different colours. */
+  --rule-hover: var(--ink-400);
   --rule-soft:  rgba(15, 17, 21, 0.05);
   --text:       var(--ink-900);
   --text-mute:  var(--ink-500);
@@ -123,6 +128,7 @@
   --paper:      var(--ink-900);
   --paper-alt:  var(--ink-800);
   --rule:       rgba(248, 249, 251, 0.08);
+  --rule-hover: rgba(248, 249, 251, 0.28);
   --rule-soft:  rgba(248, 249, 251, 0.04);
   --text:       var(--ink-50);
   --text-mute:  var(--ink-400);

package/styles/_patterns.scss

@@ -139,7 +139,7 @@
 }
 
 .btn-ghost:hover {
-  border-color: var(--text);
+  border-color: var(--rule-hover);
 }
 
 /* Brand-tinted action buttons (e.g. ef-pdf-preview footer). */
@@ -172,10 +172,13 @@
   padding: 10px 12px;
 }
 
+/* Dense rows and toolbars. `--hit` rather than a bare 32: the number was
+   hardcoded here while `.btn` above reads `--hit-base`, so the two ends of the
+   button scale were tuned in different places. */
 .btn-sm {
   font-size: 12px;
   padding: 7px 14px;
-  min-height: 32px;
+  min-height: var(--hit);
 }
 
 /* ──────────── PILL GROUP (status filters) ───────────────────────── */
@@ -514,7 +517,7 @@
 }
 
 .f-pill:hover {
-  border-color: var(--text);
+  border-color: var(--rule-hover);
 }
 .f-pill .ico {
   width: 14px;
@@ -602,7 +605,7 @@
 
 .f-more:hover {
   color: var(--text);
-  border-color: var(--text);
+  border-color: var(--rule-hover);
 }
 
 .f-more.open {
@@ -981,7 +984,7 @@
 .ef-app-top__logout:hover,
 .ef-app-top__action:hover {
   color: var(--text);
-  border-color: var(--ink-400);
+  border-color: var(--rule-hover);
 }
 
 .ef-theme-toggle:focus-visible,
@@ -1480,7 +1483,7 @@
 
 .row-actions__trigger:hover {
   color: var(--text);
-  border-color: var(--ink-400);
+  border-color: var(--rule-hover);
   background: var(--paper);
 }
 
@@ -1819,7 +1822,7 @@
 }
 
 .dp__trigger:hover {
-  border-color: var(--ink-400);
+  border-color: var(--rule-hover);
 }
 
 .dp__trigger:focus-visible {
@@ -1893,7 +1896,7 @@
 }
 
 .dp__field-trigger:hover:not(:disabled) {
-  border-color: var(--ink-400);
+  border-color: var(--rule-hover);
 }
 
 .dp__field-trigger:focus-visible,
@@ -3515,7 +3518,7 @@ input.ef-input[type='number'] {
 
 .es.p-select:not(.p-disabled):hover,
 .es.p-multiselect:not(.p-disabled):hover {
-  border-color: var(--ink-400);
+  border-color: var(--rule-hover);
 }
 
 .es.p-select.p-focus,
@@ -4260,7 +4263,7 @@ input.ef-input[type='number'] {
 
 .es-confirm .p-dialog-footer .p-confirmdialog-reject-button:hover {
   background: var(--paper-alt);
-  border-color: var(--text);
+  border-color: var(--rule-hover);
 }
 
 .es-confirm .p-confirmdialog-accept-button:focus-visible,

package/types/elasticias-ui.d.ts

@@ -1237,7 +1237,18 @@ declare class EfButtonComponent {
      */
     variant: 'primeng' | 'comptoir';
     severity: EfButtonSeverity;
-    size: 'small' | 'large';
+    /**
+     * Control height.
+     *
+     * - `'small'` — `--hit` (32px). Dense rows, toolbars, row actions. Default,
+     *   because that is what every call site in the product already renders.
+     * - `'base'` — `--hit-base` (40px). The height a comptoir input, select and
+     *   datepicker render at, so this is the one to use for a button sitting in
+     *   a form row: at `'small'` it is 8px shorter than the field beside it and
+     *   the row reads as misaligned.
+     * - `'large'` — retained alias for `'base'`; nothing in the product uses it.
+     */
+    size: 'small' | 'base' | 'large';
     disabled: boolean;
     rounded: boolean;
     outlined: boolean;
@@ -1289,6 +1300,12 @@ declare class EfButtonComponent {
      *  set. */
     get effectiveTooltip(): string | undefined;
     clickEvent: EventEmitter<Event>;
+    /**
+     * Size as PrimeNG's Button understands it. Its own scale is only
+     * `'small' | 'large'`, with the default (unset) being the normal height, so
+     * `'base'` maps to `null` rather than being forwarded verbatim.
+     */
+    get pnSize(): 'small' | 'large' | null;
     /** Composed class string for the Comptoir variant —
      *  `btn btn-{severity} btn-sm` plus any caller-supplied `styleClass`. */
     get comptoirClass(): string;
@@ -4635,6 +4652,21 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
      * move is on the arrow keys while the handle has focus.
      */
     onDragKeydown(index: number, ev: KeyboardEvent): void;
+    /**
+     * Honour the declared column widths exactly instead of treating them as
+     * hints.
+     *
+     * The default `table-layout: auto` sizes a column to its content, so a
+     * cell whose content is wider than the declared width simply wins. On the
+     * order builder that meant clicking into a 116px discount cell swapped in
+     * an editor whose input carries an intrinsic 200px, the column jumped to
+     * 271px, and the article column lost the difference — every row re-flowed
+     * mid-edit. With fixed layout the declared widths hold and the columns
+     * that declare none share what is left.
+     *
+     * Opt-in: a table whose columns are all content-sized still wants `auto`.
+     */
+    readonly fixedLayout: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Row density. Applied as a class on `.tbl-wrap`. */
     readonly density: _angular_core.WritableSignal<EfTableDensity>;
     /** Column ids the viewer has hidden. */
@@ -4707,7 +4739,7 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
     trackByRow: (_: number, row: TRow) => unknown;
     trackByColumn: (_: number, col: EfDataCardColumn) => string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfDataCardComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfDataCardComponent<any>, "ef-data-card", never, { "mobileLayout": { "alias": "mobileLayout"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "trackByField": { "alias": "trackByField"; "required": false; "isSignal": true; }; "pageNumber": { "alias": "pageNumber"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "totalCount": { "alias": "totalCount"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "hidePager": { "alias": "hidePager"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "loadingKey": { "alias": "loadingKey"; "required": false; "isSignal": true; }; "rowDoubleClickable": { "alias": "rowDoubleClickable"; "required": false; "isSignal": true; }; "hasActionsColumn": { "alias": "hasActionsColumn"; "required": false; "isSignal": true; }; "rowActionsContext": { "alias": "rowActionsContext"; "required": false; "isSignal": true; }; "showViewAction": { "alias": "showViewAction"; "required": false; "isSignal": true; }; "showEditAction": { "alias": "showEditAction"; "required": false; "isSignal": true; }; "showDuplicateAction": { "alias": "showDuplicateAction"; "required": false; "isSignal": true; }; "showDeleteAction": { "alias": "showDeleteAction"; "required": false; "isSignal": true; }; "showDensityControl": { "alias": "showDensityControl"; "required": false; "isSignal": true; }; "showColumnPicker": { "alias": "showColumnPicker"; "required": false; "isSignal": true; }; "showExportControl": { "alias": "showExportControl"; "required": false; "isSignal": true; }; "exporting": { "alias": "exporting"; "required": false; "isSignal": true; }; "screenContext": { "alias": "screenContext"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; "tableKey": { "alias": "tableKey"; "required": false; "isSignal": true; }; "defaultDensity": { "alias": "defaultDensity"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; "rowDoubleClick": "rowDoubleClick"; "rowAction": "rowAction"; "exportRequest": "exportRequest"; "clearSearch": "clearSearch"; "rowReorder": "rowReorder"; }, ["bodyTemplates", "headerTemplates"], ["[tbl-head-info]", "[tbl-head-actions]", "[empty-state-mobile]", "[empty-state]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfDataCardComponent<any>, "ef-data-card", never, { "mobileLayout": { "alias": "mobileLayout"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "trackByField": { "alias": "trackByField"; "required": false; "isSignal": true; }; "pageNumber": { "alias": "pageNumber"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "totalCount": { "alias": "totalCount"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "hidePager": { "alias": "hidePager"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "loadingKey": { "alias": "loadingKey"; "required": false; "isSignal": true; }; "rowDoubleClickable": { "alias": "rowDoubleClickable"; "required": false; "isSignal": true; }; "hasActionsColumn": { "alias": "hasActionsColumn"; "required": false; "isSignal": true; }; "rowActionsContext": { "alias": "rowActionsContext"; "required": false; "isSignal": true; }; "showViewAction": { "alias": "showViewAction"; "required": false; "isSignal": true; }; "showEditAction": { "alias": "showEditAction"; "required": false; "isSignal": true; }; "showDuplicateAction": { "alias": "showDuplicateAction"; "required": false; "isSignal": true; }; "showDeleteAction": { "alias": "showDeleteAction"; "required": false; "isSignal": true; }; "showDensityControl": { "alias": "showDensityControl"; "required": false; "isSignal": true; }; "showColumnPicker": { "alias": "showColumnPicker"; "required": false; "isSignal": true; }; "showExportControl": { "alias": "showExportControl"; "required": false; "isSignal": true; }; "exporting": { "alias": "exporting"; "required": false; "isSignal": true; }; "screenContext": { "alias": "screenContext"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; "tableKey": { "alias": "tableKey"; "required": false; "isSignal": true; }; "defaultDensity": { "alias": "defaultDensity"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "fixedLayout": { "alias": "fixedLayout"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; "rowDoubleClick": "rowDoubleClick"; "rowAction": "rowAction"; "exportRequest": "exportRequest"; "clearSearch": "clearSearch"; "rowReorder": "rowReorder"; }, ["bodyTemplates", "headerTemplates"], ["[tbl-head-info]", "[tbl-head-actions]", "[empty-state-mobile]", "[empty-state]"], true, never>;
 }
 
 /**