@elasticias/ui 1.0.29 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elasticias/ui",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "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;
@@ -4455,7 +4452,9 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
      * equivalent and a tabindex to be usable, which a decorative box should
      * not have.
      */
-    protected onRowHeadActivate(row: unknown, index: number, event: Event): void;
+    protected onRowHeadActivate(row: TRow, index: number, event: Event): void;
+    /** The chevron owns expansion once the head is busy navigating. */
+    protected onDisclosureToggle(row: unknown, index: number, event: Event): void;
     protected toggleExpanded(row: unknown, index: number): void;
     private rowKey;
     /**
@@ -4490,6 +4489,10 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
     /** Fields a collapsed card shows. A row shows none until it opens. */
     protected readonly cardPreviewColumns: _angular_core.Signal<EfDataCardColumn[]>;
     protected readonly hasDetail: _angular_core.Signal<boolean>;
+    /** Whether the screen wired an open-the-record action to this table. */
+    protected readonly rowNavigable: _angular_core.Signal<boolean>;
+    /** The head is a control when it either opens the row or expands it. */
+    protected readonly headIsControl: _angular_core.Signal<boolean>;
     /** Only worth a toggle when opening actually reveals something. */
     protected readonly hasMoreThanPreview: _angular_core.Signal<boolean>;
     /** Fields visible for a row right now, given layout and open state. */
@@ -4523,9 +4526,12 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
      * state in the body.
      *
      * It is the *trigger*, not the copy: screens set it from
-     * `err?.message`, which is whatever the HTTP layer threw. The body
-     * state words itself from translated keys instead, so a failed list
-     * never shows an operator a status line or an exception string.
+     * `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>;
@@ -4773,9 +4779,39 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
      *  popup can escape its rounded edges. */
     readonly openMenuCount: _angular_core.WritableSignal<number>;
     onRowActionsToggle(event: Event): void;
-    /** Fires `rowDoubleClick` unless the dblclick originated on an
-     *  interactive child (checkbox, button, link, form control). */
-    onRowDoubleClick(row: TRow, event: MouseEvent): void;
+    /**
+     * Children that own their own click. Opening the row on top of them would
+     * run two things from one gesture.
+     */
+    private static readonly INTERACTIVE_CHILD;
+    /**
+     * Bounded by the row on purpose. The row itself is given `role="button"`
+     * when it is openable, so an unbounded `closest()` matches the row as its
+     * own ancestor and suppresses every click on it — the interaction looks
+     * wired and does nothing. Only a control *inside* the row counts.
+     */
+    private isInteractiveTarget;
+    /**
+     * A drag that selects text ends in a click. Opening the row on that click
+     * throws the selection away at the instant it was made, which is worse
+     * than not opening, because the work is lost rather than merely delayed.
+     */
+    private hasTextSelection;
+    /**
+     * Open a row with one click.
+     *
+     * This used to take two. The tell was not the pointer but the keyboard:
+     * Enter on a focused row already opened it with a single press, because a
+     * keyboard cannot produce a double-click at all. So the component was
+     * already committed to single activation and only the mouse was asking
+     * twice — and the row paints `cursor: pointer` the whole time, which says
+     * a click does something.
+     *
+     * The output is still named `rowDoubleClick` so the twelve screens bound
+     * to it keep working untouched. The name is now wrong; renaming it is a
+     * breaking change to a published component and belongs in its own commit.
+     */
+    onRowClick(row: TRow, event: MouseEvent): void;
     /**
      * `aria-sort` for the header cell: the only thing that tells a screen
      * reader which column is ordered and which way. The arrow glyph is