@mlola-ui/engine 1.1.10 → 1.1.12

package/generated/agents.md

@@ -202,6 +202,7 @@ correct. This table is read out of the stylesheet, so it is never stale.
 | `.ml-dropdown-item` | `data-danger` | _presence only_ |
 | `.ml-dropdown-item` | `data-highlighted` | _presence only_ |
 | `.ml-dropdown-menu` | `data-align` | `end` |
+| `.ml-dropdown-menu` | `data-side` | `top` |
 | `.ml-dropdown-trigger` | `aria-expanded` | `true` |
 | `.ml-dropzone` | `aria-disabled` | _presence only_ |
 | `.ml-dropzone` | `data-dragging` | _presence only_ |

package/generated/contract.json

@@ -221,6 +221,9 @@
       "ml-dropdown-menu": {
         "data-align": [
           "end"
+        ],
+        "data-side": [
+          "top"
         ]
       },
       "ml-dropdown-trigger": {

package/generated/recipes.css

@@ -1486,6 +1486,20 @@
   text-decoration: none;
 }
 
+/* A fingertip's target. The link clips its own text for the ellipsis, which
+   would clip the invisible target data-hit="expand" draws around it, so on a
+   touch screen the link itself grows instead, without moving the bar. */
+@media (pointer: coarse) {
+  .ml-breadcrumb-link {
+    padding-block: var(--ml-space-2);
+    margin-block: calc(-1 * var(--ml-space-2));
+  }
+
+  .ml-breadcrumb-link::after {
+    inset: 0;
+  }
+}
+
 button.ml-breadcrumb-link {
   padding: 0;
   border: 0;
@@ -3095,6 +3109,23 @@ button.ml-breadcrumb-link {
 .ml-dropdown-menu[data-align="end"] {
   right: 0;
   left: auto;
+  transform-origin: top right;
+}
+
+/* Kept on screen by fitMenu: slid sideways, and above the trigger when
+   there is no room below. */
+.ml-dropdown-menu {
+  translate: var(--ml-dropdown-shift, 0) 0;
+}
+
+.ml-dropdown-menu[data-side="top"] {
+  top: auto;
+  bottom: calc(100% + var(--ml-space-1-5));
+  transform-origin: bottom left;
+}
+
+.ml-dropdown-menu[data-side="top"][data-align="end"] {
+  transform-origin: bottom right;
 }
 
 .ml-dropdown-label {
@@ -3433,6 +3464,13 @@ button.ml-breadcrumb-link {
   transition: border-color var(--ml-duration-fast),box-shadow var(--ml-duration-fast);
 }
 
+/* A single-line field is exactly its size's control height, like the button
+   beside it: the height comes from density, and the text sits centered in
+   it, instead of padding around the text setting a height of its own. */
+.ml-input {
+  padding-block: 0;
+}
+
 .ml-input:hover,
 .ml-textarea:hover {
   border-color: color-mix(in oklab,var(--ml-border) 100%,var(--ml-text) 12%);
@@ -3513,13 +3551,13 @@ button.ml-breadcrumb-link {
 
 .ml-input[data-size="sm"] {
   min-height: var(--ml-control-sm);
-  padding: var(--ml-space-1-5) var(--ml-space-2-5);
+  padding-inline: var(--ml-space-2-5);
   font-size: var(--ml-type-sm);
 }
 
 .ml-input[data-size="lg"] {
   min-height: var(--ml-control-lg);
-  padding: var(--ml-space-2-5) var(--ml-space-3-5);
+  padding-inline: var(--ml-space-3-5);
   font-size: var(--ml-type-md);
 }
 
@@ -3741,7 +3779,8 @@ button.ml-breadcrumb-link {
 .ml-number-input-field {
   flex: 1;
   min-width: 0;
-  padding: var(--ml-space-2) var(--ml-space-3);
+  /* The control's height comes from density, like a text field's. */
+  padding: 0 var(--ml-space-3);
   border: 0;
   background: transparent;
   color: var(--ml-text);
@@ -3762,10 +3801,11 @@ button.ml-breadcrumb-link {
 }
 
 /* Square at any height: where touch sizing makes the field taller, the steps
-   grow with it instead of stretching into tall slivers. */
+   grow with it instead of stretching into tall slivers. They sit inside the
+   control's border, so their side is the height within it. */
 .ml-number-input-step {
   display: inline-grid;
-  min-width: var(--ml-control-md);
+  min-width: calc(var(--ml-control-md) - 2 * var(--ml-border-width));
   aspect-ratio: 1;
   place-items: center;
   padding: 0;
@@ -4603,9 +4643,11 @@ button.ml-breadcrumb-link {
   gap: var(--ml-space-0-5);
 }
 
+/* Each option is a small control inside the track, so the whole control is
+   as tall as a medium one and sits level with the fields beside it. */
 .ml-segmented-control-item {
   min-height: var(--ml-control-sm);
-  padding: var(--ml-space-1-5) var(--ml-space-3);
+  padding: 0 var(--ml-space-3);
   border: 0;
   border-radius: var(--ml-radius-md);
   background: transparent;
@@ -4654,7 +4696,8 @@ button.ml-breadcrumb-link {
   align-items: center;
   justify-content: space-between;
   gap: var(--ml-space-2);
-  padding: var(--ml-space-2) var(--ml-space-3);
+  /* As tall as its size's control height, level with an input or a button. */
+  padding: 0 var(--ml-space-3);
   color: var(--ml-text);
   background: var(--ml-surface);
   border: var(--ml-border-width) solid var(--ml-border);
@@ -4682,7 +4725,7 @@ button.ml-breadcrumb-link {
 
 .ml-select[data-size="sm"] {
   min-height: var(--ml-control-sm);
-  padding: var(--ml-space-1-5) var(--ml-space-2-5);
+  padding: 0 var(--ml-space-2-5);
   font-size: var(--ml-type-sm);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlola-ui/engine",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "description": "Framework-free CSS, spring easings, and the machine-readable contract for Mlola UI",
   "type": "module",
   "sideEffects": [