@elasticias/ui 1.0.15 → 1.0.17

package/package.json

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

package/styles/_comptoir.scss

@@ -54,6 +54,17 @@
   --st-refunded-fg:   #826208;  --st-refunded-bg:   #fdf1c8;
   --st-onhold-fg:     #4f5560;  --st-onhold-bg:     #e7e9ee;
 
+  /* ── Typography ───────────────────────────────────────────────
+     The three faces, defined once. They were hardcoded 79 times across
+     16 files, and the same face carried different fallback chains in
+     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;
+
   /* ── Radii ───────────────────────────────────────────────────── */
   --r-sm:   8px;
   --r-md:   12px;

package/styles/_patterns.scss

@@ -39,7 +39,7 @@
 
 .page-head-row h1 {
   margin: 0;
-  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 96,
     'wght' 700,
@@ -216,7 +216,7 @@
 }
 
 .pill-group .count {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 10.5px;
   font-weight: 700;
   color: inherit;
@@ -289,7 +289,7 @@
   color: var(--paper);
   display: grid;
   place-items: center;
-  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 12,
     'wght' 700,
@@ -311,7 +311,7 @@
 /* ──────────── TYPOGRAPHY UTILITIES ─────────────────────────────── */
 
 .label {
-  font-family: 'Manrope', system-ui, sans-serif;
+  font-family: var(--font-ui);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
@@ -350,7 +350,7 @@
 
 .mono,
 .num {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-feature-settings: 'tnum', 'zero', 'ss01';
   font-variant-numeric: tabular-nums slashed-zero;
 }
@@ -415,15 +415,40 @@
   background: transparent;
   border: 0;
   border-radius: var(--r-xl);
-  padding: 8px 14px 8px 38px;
+  /* Logical, not `padding: 8px 14px 8px 38px`. The search icon is placed
+     with inset-inline-start, so a physical shorthand reserved the 38px on
+     the wrong side in Arabic and the placeholder ran under the glyph. */
+  padding-block: 8px;
+  padding-inline: 38px 14px;
   color: var(--text);
-  outline: 0;
-  min-height: 36px;
+  min-block-size: var(--hit-base);
   letter-spacing: -0.005em;
 }
 
+/* This field had `outline: 0` and nothing in its place, so the primary
+   search box on every list screen was the one control with no visible
+   focus at all. The ring goes on the label so it frames the whole
+   affordance, icon and shortcut hint included. */
+.smart-bar .search input:focus {
+  outline: 0;
+}
+
+.smart-bar .search:focus-within {
+  outline: 2px solid color-mix(in srgb, var(--ink-active) 35%, transparent);
+  outline-offset: 2px;
+  border-radius: var(--r-xl);
+}
+
 .smart-bar .search input::placeholder {
-  color: var(--text-soft);
+  /* --text-soft is ink-400, about 2.5:1 on paper. A placeholder is real
+     text a user has to read, so it takes the 4.5:1 tier. */
+  color: var(--text-mute);
+}
+
+@media (pointer: coarse) {
+  .smart-bar .search input {
+    min-block-size: var(--hit-touch);
+  }
 }
 
 .smart-bar .search .kbd {
@@ -431,7 +456,7 @@
   inset-inline-end: 14px;
   top: 50%;
   transform: translateY(-50%);
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 10.5px;
   font-weight: 600;
   color: var(--text-mute);
@@ -693,7 +718,7 @@
 }
 
 .popover .preset .hint {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 10.5px;
   color: var(--text-mute);
   font-weight: 500;
@@ -761,6 +786,46 @@
   white-space: nowrap;
 }
 
+/* A sortable header is a real button now, so it inherits the cell's type
+   rather than restating it, and carries a focus ring the click handler on
+   the <th> never could. */
+.tbl thead th .tbl-sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+
+.tbl thead th .tbl-sort:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--ink-active) 40%, transparent);
+  outline-offset: 2px;
+  border-radius: var(--r-sm);
+}
+
+.tbl thead th .tbl-sort:hover {
+  color: var(--text);
+}
+
+.tbl-sort__arrow {
+  opacity: 0.7;
+}
+
+/* The row itself is focusable when it opens, so it needs a visible ring.
+   Enter activates it; the double-click stays for the mouse. */
+.tbl tbody tr.is-row-clickable:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--ink-active) 40%, transparent);
+  outline-offset: -2px;
+}
+
 .tbl tbody td {
   padding: 14px 18px;
   border-bottom: 1px solid var(--rule-soft, rgba(15, 17, 21, 0.05));
@@ -773,6 +838,12 @@
 
 .tbl tbody tr {
   transition: background-color var(--t-fast) var(--ease-out);
+}
+
+/* The pointer belongs only on rows that actually open. It used to be set
+   on every row in every table, so a row that did nothing still promised
+   it would, and single-clicking any of them did nothing anywhere. */
+.tbl tbody tr.is-row-clickable {
   cursor: pointer;
 }
 
@@ -787,7 +858,7 @@
 }
 
 .tbl .ref {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 700;
 }
@@ -799,7 +870,7 @@
 }
 
 .tbl .total {
-  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 12,
     'wght' 700,
@@ -871,7 +942,7 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: 0.02em;
   color: var(--text-soft);
@@ -1074,14 +1145,14 @@
 
 
 .detail-toolbar .ref {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 14px;
   font-weight: 700;
   letter-spacing: -0.01em;
 }
 
 .detail-toolbar .name {
-  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 12,
     'wght' 700,
@@ -1136,7 +1207,7 @@
 }
 
 .card-head .title {
-  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 12,
     'wght' 700,
@@ -1375,7 +1446,7 @@
 }
 
 .kpi-value {
-  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 96,
     'wght' 700,
@@ -1388,7 +1459,7 @@
 }
 
 .kpi-value .unit {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 0.4em;
   font-weight: 500;
   color: var(--text-mute);
@@ -1403,7 +1474,7 @@
 }
 
 .delta {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 700;
   padding: 2px 8px;
@@ -1471,7 +1542,7 @@
   display: grid;
   place-items: center;
   color: var(--tenant-500);
-  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 12,
     'wght' 700,
@@ -1654,7 +1725,7 @@
 .row-actions__item .kbd,
 .ef-menu__item .kbd {
   margin-inline-start: auto;
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 600;
   color: var(--text-mute);
@@ -2049,7 +2120,7 @@
 }
 
 .dp__preset .hint {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 11.5px;
   font-weight: 500;
   color: var(--text-mute);
@@ -2262,7 +2333,7 @@
 }
 
 .dp__cal-dow {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 700;
   color: var(--text-mute);
@@ -2390,7 +2461,7 @@
 
 .dp__field input {
   font: inherit;
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 12.5px;
   background: var(--paper);
   border: 1px solid var(--rule);
@@ -2423,7 +2494,7 @@
 }
 
 .dp__actions .duration {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 11.5px;
   font-weight: 600;
   color: var(--text-mute);
@@ -2716,7 +2787,7 @@
 }
 
 .detail-toolbar .ref {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 14px;
   font-weight: 700;
   letter-spacing: -0.01em;
@@ -2747,7 +2818,7 @@
 
 .search-toolbar h1 {
   margin: 0;
-  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 96,
     'wght' 700,
@@ -2845,7 +2916,7 @@
 }
 
 .card-head .title {
-  font-family: 'Bricolage Grotesque', sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 12,
     'wght' 700,
@@ -2968,7 +3039,7 @@
 }
 
 .totals .row .v {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-feature-settings: 'tnum';
   font-variant-numeric: tabular-nums;
   font-weight: 700;
@@ -2990,7 +3061,7 @@
 }
 
 .totals .grand-row .lbl {
-  font-family: 'Bricolage Grotesque', sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 12,
     'wght' 700,
@@ -3002,7 +3073,7 @@
 }
 
 .totals .grand-row .v {
-  font-family: 'Bricolage Grotesque', sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 96,
     'wght' 700,
@@ -3013,7 +3084,7 @@
 }
 
 .totals .currency {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 0.35em;
   color: var(--text-mute);
   margin-inline-start: 4px;
@@ -3046,7 +3117,7 @@
 }
 
 .stats .row .v {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 13.5px;
   font-weight: 700;
   font-feature-settings: 'tnum';
@@ -3061,7 +3132,7 @@
 }
 
 .stats .row.big .v {
-  font-family: 'Bricolage Grotesque', sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 12,
     'wght' 700,
@@ -3146,7 +3217,7 @@
 }
 
 .kpi-value {
-  font-family: 'Bricolage Grotesque', sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 96,
     'wght' 700,
@@ -3159,7 +3230,7 @@
 }
 
 .kpi-value .unit {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 0.32em;
   font-weight: 500;
   color: var(--text-mute);
@@ -3168,7 +3239,7 @@
 }
 
 .delta {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 600;
 }
@@ -3203,7 +3274,7 @@
 
 .ef-label {
   display: inline-block;
-  font-family: 'Manrope', system-ui, sans-serif;
+  font-family: var(--font-ui);
   font-size: 11px;
   font-weight: 700;
   color: var(--text-mute);
@@ -3453,7 +3524,7 @@
 .ef-input-group .ef-input-addon {
   background: var(--paper);
   padding: 9px 12px;
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 12.5px;
   color: var(--text-mute);
   display: flex;
@@ -3907,7 +3978,7 @@ input.ef-input[type='number'] {
 /* Group headers */
 .es__panel .p-select-option-group,
 .es__panel .p-multiselect-option-group {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.06em;
@@ -4076,7 +4147,7 @@ input.ef-input[type='number'] {
 
 .es-dialog .p-dialog-title,
 .es-dialog .p-dialog-header-title {
-  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 14,
     'wght' 700,
@@ -4329,7 +4400,7 @@ input.ef-input[type='number'] {
 }
 
 .es-dialog .es-dialog__title {
-  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 14,
     'wght' 700,
@@ -4403,7 +4474,7 @@ input.ef-input[type='number'] {
   color: var(--paper);
   display: grid;
   place-items: center;
-  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+  font-family: var(--font-display);
   font-variation-settings:
     'opsz' 12,
     'wght' 700,
@@ -4512,3 +4583,37 @@ input.ef-input[type='number'] {
     text-overflow: ellipsis;
   }
 }
+
+/* ── TOUCH TARGET TIER ──────────────────────────────────────────────
+   The design system documents three tiers: --hit-base 40px for forms,
+   --hit-touch 48px for touch, --hit-pos 64px for the till. Until now
+   --hit-touch appeared exactly once in this file, and every top-bar
+   icon, pagination control and row-actions trigger rendered at 32px on
+   a phone as well as a desktop, against a guide that promises 48.
+
+   Keyed on `pointer: coarse` rather than a width breakpoint, so a touch
+   laptop is treated as touch and a narrow desktop window is not. Only
+   the box grows; type and icon sizes are left alone. */
+@media (pointer: coarse) {
+  .btn,
+  .btn-sm {
+    min-block-size: var(--hit-touch);
+  }
+
+  /* An icon-only button has no label to give it width, so the height tier
+     alone leaves a 40px-wide target. Square it off. */
+  .btn:has(> i:only-child),
+  .btn-sm:has(> i:only-child) {
+    min-inline-size: var(--hit-touch);
+  }
+
+  .ef-app-top__action,
+  .ef-theme-toggle,
+  .ef-app-top__logout,
+  .row-actions__trigger,
+  .ef-clear,
+  .pg {
+    inline-size: var(--hit-touch);
+    block-size: var(--hit-touch);
+  }
+}