@elasticias/ui 1.0.49 → 1.0.50

package/package.json

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

package/styles/_patterns.scss

@@ -890,6 +890,8 @@
   font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 700;
+  /* Hyphenated codes (HA-100) break at the hyphen otherwise. */
+  white-space: nowrap;
 }
 
 .tbl .num {
@@ -2806,11 +2808,17 @@
   flex-wrap: wrap;
 }
 
+/* The identity takes a real basis, not 0: with `flex: 1` it always "fit",
+   so a screen with many actions squeezed it to a sliver and cut its notices
+   ("Prise en charge par ...") to an ellipsis. Now, when the identity and the
+   actions cannot share a row at that width, the actions wrap onto a row of
+   their own and the identity keeps the whole line. A screen may tune the
+   basis with --detail-toolbar-identity-min. */
 .detail-toolbar .left {
   display: flex;
   align-items: center;
   gap: 10px;
-  flex: 1;
+  flex: 1 1 var(--detail-toolbar-identity-min, 22rem);
   min-width: 0;
   flex-wrap: wrap;
 }
@@ -2826,6 +2834,22 @@
   color: var(--text-soft);
 }
 
+/* Keeps its width: removing it would narrow the group and let it unwrap. */
+.detail-toolbar .sep.is-hidden {
+  visibility: hidden;
+}
+
+/* Print … Save travel together with their separator, so a wrap never leaves
+   the "|" at the end of one row and Save alone on the next. The group keeps
+   the far end of its row, like Save on a phone. */
+.detail-toolbar .std {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: nowrap;
+  margin-inline-start: auto;
+}
+
 .detail-toolbar .right {
   display: flex;
   align-items: center;
@@ -4876,6 +4900,28 @@ input.ef-input[type='number'] {
   }
 }
 
+/* A keepInView action is the screen's next step (confirm, prepare, ...): on a
+   phone it keeps its word beside the icon. Icons alone could not tell
+   "Confirmer" (pi-check) from "Livrer" (pi-check-circle). Declared after the
+   two rules above that hide toolbar labels and square the buttons, because
+   a media query adds no specificity. */
+@media (max-width: 767px) {
+  .detail-toolbar .right .btn.btn--keep-label > span {
+    display: inline;
+  }
+
+  .detail-toolbar .right .btn.btn--keep-label {
+    padding: 7px 14px;
+  }
+}
+
+@media (pointer: coarse) and (max-width: 767px) {
+  .detail-toolbar .right .btn.btn--keep-label {
+    inline-size: auto;
+    padding: 0 16px;
+  }
+}
+
 /* The toolbar's overflow trigger is the shared row-actions kebab. Inside
    the toolbar it is a real 48px target (not the table's overhang trick,
    which needs a row to reserve the margin), and a flex item that may not
@@ -4976,3 +5022,15 @@ input.ef-input[type='number'] {
     padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 20px + var(--ef-order-fab-h) + var(--s-3));
   }
 }
+
+/* .f-more ("More filters") on a touch device: reaches the 48px touch target.
+   By pointer rather than width, like the other touch rules. Last in the file
+   so the base .f-more min-height does not win. The row aligns its items to
+   center, so the pills beside it keep their own height. */
+@media (pointer: coarse) {
+  .f-pill,
+  .f-more,
+  .f-clear {
+    min-height: var(--hit-touch);
+  }
+}