@elasticias/ui 1.0.30 → 1.0.32

package/package.json

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

package/styles/_comptoir.scss

@@ -119,6 +119,22 @@
   --text-soft:  var(--ink-400);
   --ink-active: var(--ink-900);
 
+  /* The module rail is the shell's deepest chrome, and it is dark in BOTH
+     themes on purpose: it anchors the app rather than tracking the page.
+
+     It used to paint `--ink-active` on `--paper`. Both of those flip, so the
+     rail was a dark strip on a light app in light mode and a WHITE strip on a
+     dark app in dark mode — while its icons still hardcoded white, which
+     measured 1.03:1. The ink ramp itself is theme-independent (`--ink-900` is
+     #0f1115 under both `:root` and `.p-dark`); only the `--ink-active` alias
+     flips. Naming the ramp step directly is what makes the rail hold still. */
+  --rail-bg:      var(--ink-900);
+  --rail-fg:      #fff;
+  --rail-fg-mute: rgba(255, 255, 255, 0.6);
+  --rail-rule:    rgba(255, 255, 255, 0.08);
+  --rail-hover:   rgba(255, 255, 255, 0.08);
+  --rail-active:  rgba(255, 255, 255, 0.12);
+
   /* `--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
@@ -192,6 +208,14 @@
   --text-mute:  var(--ink-400);
   --text-soft:  var(--ink-500);
   --ink-active: var(--ink-50);
+
+  /* The page is already `--ink-900` here, so the rail goes one step deeper to
+     stay a surface of its own instead of merging into the canvas. In light
+     mode the rail is far darker than the page; this keeps that relationship
+     rather than the literal colour. Everything painted on it stays white, so
+     only the ground is restated. */
+  --rail-bg: #08090c;
+
   /* Status pairs. Without these a chip kept its light pastel ground on a dark
      page — the one place the dark theme visibly fell apart, because chips are
      the densest colour in any list.

package/styles/_patterns.scss

@@ -734,7 +734,12 @@
 }
 
 .popover .preset.active .hint {
-  color: rgba(255, 255, 255, 0.7);
+  /* The active preset inverts against the page: its ground is `--ink-active`
+     and its ink `--paper`, and both flip together, so the pair stays readable
+     in either theme. This hint has to ride that inversion rather than assume
+     the ground is dark — hardcoded white measured 1.04:1 on the light ground
+     the token resolves to in dark mode. */
+  color: color-mix(in srgb, var(--paper) 70%, transparent);
 }
 
 .f-pill.has-pop {
@@ -1093,11 +1098,15 @@
 }
 
 .bulk .count {
-  color: rgba(255, 255, 255, 0.7);
+  /* `.bulk` inverts against the page (`--ink-active` ground, `--paper` ink),
+     and both flip together. The count has to ride that inversion; hardcoded
+     white read as white-on-white once the ground resolved light in dark mode.
+     Same for the buttons below, whose scrims were white-on-white too. */
+  color: color-mix(in srgb, var(--paper) 70%, transparent);
 }
 
 .bulk .btn {
-  background: rgba(255, 255, 255, 0.1);
+  background: color-mix(in srgb, var(--paper) 10%, transparent);
   color: var(--paper);
   border: 0;
   min-height: 28px;
@@ -1106,7 +1115,7 @@
 }
 
 .bulk .btn:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: color-mix(in srgb, var(--paper) 20%, transparent);
 }
 
 /* ──────────── EMPTY STATE ──────────────────────────────────────── */
@@ -2045,7 +2054,10 @@
 }
 
 .dp__preset.active .hint {
-  color: rgba(255, 255, 255, 0.7);
+  /* Rides the active preset's inversion, same as `.popover .preset.active
+     .hint`. The two lists are styled separately and carried the same
+     hardcoded white, so they broke in dark mode together. */
+  color: color-mix(in srgb, var(--paper) 70%, transparent);
 }
 
 .dp__preset.muted {

package/types/elasticias-ui.d.ts

@@ -4452,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;
     /**
@@ -4487,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. */
@@ -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