@elasticias/ui 1.0.28 → 1.0.30

package/package.json

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

package/styles/_comptoir.scss

@@ -119,6 +119,37 @@
   --text-soft:  var(--ink-400);
   --ink-active: var(--ink-900);
 
+  /* `--ink-soft` is not a ramp step and was never defined anywhere; it is an
+     alias, added because eight call sites across three files already name it
+     as `var(--ink-soft, #64748b)`. Undefined, every one of them fell through
+     to that literal, which does not flip with the theme and measures 3.46:1
+     on `--paper-alt` in dark. Two of those call sites sit in a `.ts` and in
+     another component sheet, so one definition here is the only fix that
+     reaches them all; it also makes the hardcoded fallback dead.
+     Resolves to 4.82:1 (light) / 6.63:1 (dark) on `--paper-alt`. */
+  --ink-soft:   var(--text-mute);
+
+  /* Foreground for anything painted on the tenant accent.
+
+     `setTenantAccent()` writes the ramp onto `documentElement.style` at
+     runtime, so `--tenant-500` can be any hue at any lightness. A hardcoded
+     `#fff` fails on a light accent, and `var(--paper)` fails differently:
+     paper flips with the theme while the accent does not, which is how the
+     avatar ended up at 2.04:1 on the default maroon in dark mode.
+
+     So: black or white, whichever the accent's own lightness calls for.
+     Choosing the better of those two against *any* background is guaranteed
+     to clear AA. White scores 1.05/(Y+0.05) and black scores (Y+0.05)/0.05,
+     and the two are equal only at Y = 0.179, where both land on 4.58:1. The
+     OKLCH lightness matching that luminance is 0.623, so the clamp collapses
+     to 1 (white) below it and 0 (black) above it; `* -infinity` is what
+     forces a pure 0 or 1 instead of a gradient between them.
+
+     The plain value below is the fallback for engines without relative
+     colour syntax; the `@supports` block after this rule is what actually
+     tracks the accent. */
+  --on-tenant:  #fff;
+
   /* ── Spatial scale (s-1 = 4px → s-10 = 96px) ─────────────────── */
   --s-1: 4px;
   --s-2: 8px;
@@ -142,6 +173,15 @@
 }
 
 /* ── Semantic aliases (dark) — toggled by .p-dark on <html> ────── */
+/* Relative colour syntax resolves `--tenant-500` at computed-value time on
+   <html>, the same element `setTenantAccent()` writes the accent onto, so
+   this tracks a runtime accent change with no JS of its own. */
+@supports (color: oklch(from #000 l c h)) {
+  :root {
+    --on-tenant: oklch(from var(--tenant-500) clamp(0, calc((l - 0.623) * -infinity), 1) 0 h);
+  }
+}
+
 .p-dark {
   --paper:      var(--ink-900);
   --paper-alt:  var(--ink-800);

package/styles/_patterns.scss

@@ -303,6 +303,12 @@
 
 .avatar.tenant {
   background: var(--tenant-500);
+  /* `.avatar` sets `color: var(--paper)`, which is right only while the
+     ground flips with it: `--ink-active` does, the tenant accent does not.
+     On a dark page that paired near-black initials with the accent at
+     2.04:1. `--on-tenant` is black or white by the accent's own lightness,
+     so it holds for a runtime accent instead of for this one maroon. */
+  color: var(--on-tenant);
 }
 
 .avatar.sm {
@@ -2286,9 +2292,15 @@
 }
 
 .dp__cal-day.out .day-num {
-  color: var(--text-soft);
+  /* These are enabled buttons: the template binds `(click)="selectDay(...)"`
+     with no `disabled`, so clicking a trailing 30 jumps to the next month.
+     That rules out WCAG's exemption for inactive components, and
+     `--text-soft` at half opacity resolved to 1.52:1 in light and 1.80:1 in
+     dark. `--text-mute` at full opacity measures 4.82:1 / 6.63:1 and still
+     reads as clearly secondary next to an in-month day at 18.9:1 / 15.65:1,
+     which is what the de-emphasis was for. */
+  color: var(--text-mute);
   font-weight: 500;
-  opacity: 0.5;
 }
 
 .dp__cal-day.today .day-num {
@@ -3600,7 +3612,10 @@ input.ef-input[type='number'] {
   padding: 0;
   background: transparent;
   border-radius: 50%;
-  color: var(--text-soft);
+  /* The ✕ is the affordance, not decoration, so it takes the 3:1 non-text
+     bar. `--text-soft` gave it 2.49:1 in light and 3.42:1 in dark; this is
+     4.82:1 / 6.63:1 on `--paper-alt`, and hover still lifts it to `--text`. */
+  color: var(--text-mute);
   flex-shrink: 0;
   cursor: pointer;
   transition: all var(--t-fast) var(--ease-out);
@@ -3952,7 +3967,10 @@ input.ef-input[type='number'] {
   width: 10px;
   height: 10px;
   font-size: 10px;
-  color: var(--paper);
+  /* The checked box is painted with the accent, so the tick lands on a ground
+     that does not flip with the theme; `var(--paper)` put it at 2.04:1 in
+     dark, under the 3:1 bar for a non-text glyph. */
+  color: var(--on-tenant);
 }
 
 /* Selected check-mark for single-select (the trailing ✓) */
@@ -4365,6 +4383,9 @@ input.ef-input[type='number'] {
 
 .es-dialog .es-dialog__highlight .av.tenant {
   background: var(--tenant-500);
+  /* Same bug as `.avatar.tenant`: `.av` sets `color: var(--paper)` and the
+     accent ground does not flip with it. */
+  color: var(--on-tenant);
 }
 
 .es-dialog .es-dialog__highlight .body {

package/types/elasticias-ui.d.ts

@@ -137,9 +137,6 @@ interface OrderEntity {
  */
 interface DocumentConfig {
     documentType: 'order' | 'invoice' | 'quote';
-    headerLabel: string;
-    dateLabel: string;
-    customerLabel: string;
     enableTax?: boolean;
     enableDiscount?: boolean;
     showCatalogue?: boolean;
@@ -4412,6 +4409,10 @@ type EfTableDensity = 'compact' | 'default' | 'comfortable';
  *    "nothing to fetch" and greets a waiting user with the empty
  *    state. While loading with no rows yet it shimmers `ef-skeleton`
  *    rows (table and mobile list alike) and flags `aria-busy`.
+ * 4. **Bind `(retry)` wherever you bind `[errorMsg]`.** An empty result
+ *    set that came from a failed request renders the error state, not
+ *    the empty one, and its "try again" button is the way out. The card
+ *    doesn't know the query, so the screen re-runs it.
  *
  * ```html
  * <ef-data-card
@@ -4513,7 +4514,19 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
      * container is flagged `aria-busy`, as `ef-card` does.
      */
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Empty string = no error. Non-empty triggers an error chip in tbl-head. */
+    /**
+     * Empty string = no error. Non-empty triggers the error chip in
+     * `tbl-head` and, when the request came back with nothing, the error
+     * state in the body.
+     *
+     * It is the *trigger*, not the copy: screens set it from
+     * `err?.message`, which is whatever the HTTP layer threw. Neither the
+     * chip nor the body state prints it — both word themselves from
+     * translated keys, so a failed list never shows an operator a status
+     * line or an exception string. The raw value is kept on the chip's
+     * `data-error` attribute, which devtools can read and no reader can
+     * see.
+     */
     readonly errorMsg: _angular_core.InputSignal<string>;
     readonly loadingKey: _angular_core.InputSignal<string>;
     /**
@@ -4525,6 +4538,18 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
     readonly skeletonLines: _angular_core.Signal<number[]>;
     /** First load: nothing to show yet, so the rows are placeholders. */
     readonly showSkeleton: _angular_core.Signal<boolean>;
+    /**
+     * The request failed and brought nothing back. Without this the body
+     * falls through to the empty state and tells the operator, calmly and
+     * in the product's own voice, that they have no clients — a false
+     * statement about their data that they may go on to act on.
+     *
+     * Third in the chain, after the skeleton and before the empty state:
+     * a retry that is already in flight shows progress, not the error it
+     * is busy clearing. Rows already on screen stay there and keep the
+     * head chip as the failure signal, the way a failed refresh should.
+     */
+    readonly showError: _angular_core.Signal<boolean>;
     /**
      * When `true`, double-clicking anywhere on a `<tr>` emits the row
      * via `rowDoubleClick` and the body rows render with
@@ -4602,6 +4627,13 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
     readonly exportRequest: _angular_core.OutputEmitterRef<EfDataCardExportRequest>;
     /** Raised by the empty state's "clear search" action. */
     readonly clearSearch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Raised by the error state's "try again" button. The card knows the
+     * request failed but not what the request was, so the screen re-runs
+     * it — typically `(retry)="search()"` on a list screen. Unbound, the
+     * button is a dead control, so bind it wherever `[errorMsg]` is bound.
+     */
+    readonly retry: _angular_core.OutputEmitterRef<void>;
     private readonly bodyTemplates;
     private readonly headerTemplates;
     private readonly bodyTemplateMap;
@@ -4761,7 +4793,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; }; "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>;
+    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"; "retry": "retry"; "rowReorder": "rowReorder"; }, ["bodyTemplates", "headerTemplates"], ["[tbl-head-info]", "[tbl-head-actions]", "[empty-state-mobile]", "[empty-state]"], true, never>;
 }
 
 /**