@elasticias/ui 1.0.25 → 1.0.27

package/package.json

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

package/styles/_comptoir.scss

@@ -60,10 +60,28 @@
      different components — so a render without the webfont looked
      different depending on which component drew it. Stacks match
      libs/tokens/typography.json, which is the contract that ships to
-     web, iOS and Android. */
-  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
-  --font-ui:      'Manrope', system-ui, sans-serif;
-  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
+     web, iOS and Android.
+
+     Arabic sits inside each stack rather than in a `[dir='rtl']` override,
+     because a browser picks a face per glyph, not per element: Bricolage and
+     Manrope carry no Arabic, so Arabic characters fall through to Noto Sans
+     Arabic wherever they appear, and Latin characters keep their Latin face
+     wherever *they* appear. Overriding the stack under RTL would get the
+     common case wrong in both directions — a product code inside an Arabic
+     screen, an Arabic customer name inside a French one.
+
+     Noto Sans Arabic leads: it is the widest-covering of the two and is a
+     variable face, so it matches the weight range the Latin stacks already
+     use. Tajawal backs it up. Neither is downloaded by a session that renders
+     no Arabic — Google serves both with `unicode-range`, so the subset is
+     fetched only once a matching glyph is on the page. */
+  --font-display: 'Bricolage Grotesque', 'Noto Sans Arabic', 'Tajawal', system-ui, sans-serif;
+  --font-ui:      'Manrope', 'Noto Sans Arabic', 'Tajawal', system-ui, sans-serif;
+  /* Arabic is listed last here too. It cannot disturb figure alignment —
+     JetBrains Mono answers every digit — but it keeps Arabic text that lands
+     in a mono cell looking like the rest of the product rather than like
+     whatever the OS happened to pick. */
+  --font-mono:    'JetBrains Mono', ui-monospace, 'Noto Sans Arabic', monospace;
 
   /* ── Radii ───────────────────────────────────────────────────── */
   --r-sm:   8px;
@@ -134,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;
 }