@mlola-ui/engine 1.1.15 → 1.1.18

package/generated/agents.md

@@ -204,6 +204,7 @@ correct. This table is read out of the stylesheet, so it is never stale.
 | `.ml-dropdown-menu` | `data-align` | `end` |
 | `.ml-dropdown-menu` | `data-side` | `top` |
 | `.ml-dropdown-trigger` | `aria-expanded` | `true` |
+| `.ml-dropdown-trigger` | `data-variant` | `icon` |
 | `.ml-dropzone` | `aria-disabled` | _presence only_ |
 | `.ml-dropzone` | `data-dragging` | _presence only_ |
 | `.ml-dropzone-file` | `data-status` | `error` |

package/generated/contract.json

@@ -229,6 +229,9 @@
       "ml-dropdown-trigger": {
         "aria-expanded": [
           "true"
+        ],
+        "data-variant": [
+          "icon"
         ]
       },
       "ml-dropzone": {

package/generated/recipes.css

@@ -2341,25 +2341,36 @@ button.ml-breadcrumb-link {
 
 .ml-color-picker-sliders {
   display: grid;
-  gap: var(--ml-space-2-5);
 }
 
+/* A slider is a row a fingertip can land on (24 px, as the Slider's), with
+   its thin stripe drawn inside. A finger moving up and down still scrolls;
+   sideways it moves the value. */
 .ml-color-picker-track {
   position: relative;
-  height: 0.75rem;
-  border-radius: var(--ml-radius-pill);
-  background: var(--ml-color-track);
+  height: var(--ml-space-6);
   cursor: pointer;
   outline: none;
-  touch-action: none;
+  touch-action: pan-y;
+}
+
+.ml-color-picker-track::before {
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: var(--ml-space-3);
+  border-radius: var(--ml-radius-pill);
+  background: var(--ml-color-track);
+  content: "";
+  translate: 0 -50%;
 }
 
-.ml-color-picker-hue,
-.ml-color-picker-alpha {
+.ml-color-picker-hue::before,
+.ml-color-picker-alpha::before {
   box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ml-text) 12%, transparent);
 }
 
-.ml-color-picker-alpha {
+.ml-color-picker-alpha::before {
   background:
     var(--ml-color-track),
     repeating-conic-gradient(color-mix(in oklab, var(--ml-text) 12%, transparent) 0 25%, transparent 0 50%) 50% / 8px 8px;
@@ -3076,6 +3087,24 @@ button.ml-breadcrumb-link {
   background: color-mix(in oklab,var(--ml-surface) 100%,var(--ml-text) 4%);
 }
 
+/* An icon-only trigger: a small quiet button, named by its label. */
+.ml-dropdown-trigger[data-variant="icon"] {
+  min-height: var(--ml-control-sm);
+  min-width: var(--ml-control-sm);
+  justify-content: center;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  color: var(--ml-text-muted);
+  box-shadow: none;
+}
+
+.ml-dropdown-trigger[data-variant="icon"]:hover,
+.ml-dropdown-trigger[data-variant="icon"][aria-expanded="true"] {
+  background: var(--ml-fill-hover);
+  color: var(--ml-text);
+}
+
 .ml-dropdown-trigger-label {
   display: inline-flex;
   align-items: center;

package/package.json

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