@elasticias/ui 1.0.26 → 1.0.28

package/package.json

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

package/styles/_comptoir.scss

@@ -152,6 +152,24 @@
   --text-mute:  var(--ink-400);
   --text-soft:  var(--ink-500);
   --ink-active: var(--ink-50);
+  /* 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.
+
+     Each ground holds the status hue at low lightness, and each foreground was
+     lifted until it cleared 4.5:1 against that ground rather than picked by
+     eye. `onhold` keeps the neutral character of its light counterpart instead
+     of being pushed toward blue. Measured fg:bg — pending 5.82, processing
+     4.68, shipped 4.53, delivered 7.20, cancelled 4.56, refunded 7.49,
+     onhold 4.96. */
+  --st-pending-fg:    #fa8838;  --st-pending-bg:    #3f2512;
+  --st-processing-fg: #4c91e6;  --st-processing-bg: #17273b;
+  --st-shipped-fg:    #957acd;  --st-shipped-bg:    #251e33;
+  --st-delivered-fg:  #5ad891;  --st-delivered-bg:  #1a3727;
+  --st-cancelled-fg:  #e06161;  --st-cancelled-bg:  #391919;
+  --st-refunded-fg:   #efc243;  --st-refunded-bg:   #3d3215;
+  --st-onhold-fg:     #9096a2;  --st-onhold-bg:     #27282b;
+
   --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
   --shadow-2: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
   --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.7);

package/styles/_patterns.scss

@@ -1261,7 +1261,7 @@
 
 .field .hint {
   font-size: 11px;
-  color: var(--text-soft);
+  color: var(--text-mute);
   margin-top: 2px;
 }
 
@@ -1929,7 +1929,7 @@
 
 /* Placeholder state — muted, lighter weight, like an empty input. */
 .dp__field-trigger.is-placeholder .val {
-  color: var(--text-soft);
+  color: var(--text-mute);
   font-weight: 500;
 }
 
@@ -3570,7 +3570,7 @@ input.ef-input[type='number'] {
 
 .es .p-select-label.p-placeholder,
 .es .p-multiselect-label.p-placeholder {
-  color: var(--text-soft);
+  color: var(--text-mute);
   font-weight: 500;
 }
 

package/types/elasticias-ui.d.ts

@@ -4407,6 +4407,11 @@ type EfTableDensity = 'compact' | 'default' | 'comfortable';
  * 2. **`tbl-head-info` / `tbl-head-actions` slots**: still projected
  *    so the consumer can render the count text + density / columns /
  *    view-toggle buttons next to the table header.
+ * 3. **`[loading]` is not optional.** Bind the screen's own loading
+ *    signal: without it the card can't tell "still fetching" from
+ *    "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`.
  *
  * ```html
  * <ef-data-card
@@ -4499,10 +4504,27 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
     readonly hidePager: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Currently active sort. Header click toggles asc / desc. */
     readonly sort: _angular_core.InputSignal<EfDataCardSort>;
+    /**
+     * First load and every refresh. While true with no rows yet, the body
+     * shimmers `ef-skeleton` placeholders instead of the empty state — a
+     * list that is still loading must never say "nothing here yet". A
+     * refresh that already has rows (paging, sorting, filtering) keeps
+     * them on screen rather than blanking the table; either way the row
+     * 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. */
     readonly errorMsg: _angular_core.InputSignal<string>;
     readonly loadingKey: _angular_core.InputSignal<string>;
+    /**
+     * Placeholder rows drawn while the first load is in flight. The page
+     * size is what the operator is about to get, so it sets the height —
+     * clamped so a 100-per-page list doesn't shimmer a full screen of
+     * bars, and a 5-per-page one still reads as a list.
+     */
+    readonly skeletonLines: _angular_core.Signal<number[]>;
+    /** First load: nothing to show yet, so the rows are placeholders. */
+    readonly showSkeleton: _angular_core.Signal<boolean>;
     /**
      * When `true`, double-clicking anywhere on a `<tr>` emits the row
      * via `rowDoubleClick` and the body rows render with