@mlola-ui/engine 1.1.6 → 1.1.7

package/generated/agents.md

@@ -458,7 +458,8 @@ A single value chosen from a range.
   - <kbd>Home</kbd> / <kbd>End</kbd>: Jump to the minimum or maximum.
   - <kbd>PageUp</kbd> / <kbd>PageDown</kbd>: Move by a larger step.
 - State changes:
-  - On pointer down on the track, or drag the thumb, set the value from the pointer position, snapped to the step to within min and max.
+  - On mouse or pen down anywhere on the control row, then drag, set the value from the pointer position, snapped to the step to within min and max.
+  - On a finger moving sideways on the control row, or a tap on it, set the value from the finger position; a finger moving up or down scrolls the page and changes nothing to within min and max.
 
 ## If you are unsure
 

package/generated/contract.json

@@ -1268,9 +1268,14 @@
       ],
       "transitions": [
         {
-          "on": "pointer down on the track, or drag the thumb",
+          "on": "mouse or pen down anywhere on the control row, then drag",
           "set": "the value from the pointer position, snapped to the step",
           "to": "within min and max"
+        },
+        {
+          "on": "a finger moving sideways on the control row, or a tap on it",
+          "set": "the value from the finger position; a finger moving up or down scrolls the page and changes nothing",
+          "to": "within min and max"
         }
       ]
     }

package/generated/recipes.css

@@ -4571,6 +4571,17 @@ button.ml-breadcrumb-link {
   inset: calc(-1 * var(--ml-space-1)) 0;
 }
 
+/* A finger needs more: 24 px of grab area on a touch screen. */
+@media (pointer: coarse) {
+  .ml-resizable-handle::after {
+    inset: 0 calc(-1 * var(--ml-space-2));
+  }
+
+  .ml-resizable[data-direction="vertical"] .ml-resizable-handle::after {
+    inset: calc(-1 * var(--ml-space-2)) 0;
+  }
+}
+
 /* components/segmented-control */
 /* In a narrow container the options wrap onto a second row instead of spilling out. */
 .ml-segmented-control {
@@ -5153,6 +5164,9 @@ button.ml-breadcrumb-link {
   width: 100%;
   align-items: center;
   min-height: var(--ml-space-6);
+  /* A finger scrolls the page up and down; sideways it moves the value. */
+  touch-action: pan-y;
+  cursor: pointer;
 }
 
 .ml-slider-field[data-size="sm"] .ml-slider-track {
@@ -5174,8 +5188,6 @@ button.ml-breadcrumb-link {
   height: var(--ml-space-1-5);
   border-radius: var(--ml-radius-pill);
   background: var(--ml-track);
-  touch-action: none;
-  cursor: pointer;
 }
 
 .ml-slider-range {

package/package.json

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

package/src/behavior-spec.mjs

@@ -293,10 +293,15 @@ export const behaviors = {
     ],
     transitions: [
       {
-        on: "pointer down on the track, or drag the thumb",
+        on: "mouse or pen down anywhere on the control row, then drag",
         set: "the value from the pointer position, snapped to the step",
         to: "within min and max",
       },
+      {
+        on: "a finger moving sideways on the control row, or a tap on it",
+        set: "the value from the finger position; a finger moving up or down scrolls the page and changes nothing",
+        to: "within min and max",
+      },
     ],
   },
 };