mlola-ui 1.2.2 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mlola-ui",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "mcpName": "io.github.mlolahq/mlola-ui",
   "description": "Source-copy CLI that writes framework-free Mlola UI items into your project",
   "type": "module",

package/registry/agents.md

@@ -201,6 +201,10 @@ correct. This table is read out of the stylesheet, so it is never stale.
 | `.ml-copy-button` | `data-status` | `error` |
 | `.ml-date-picker-panel` | `data-presets` | _presence only_ |
 | `.ml-date-picker-trigger` | `data-empty` | _presence only_ |
+| `.ml-dial` | `data-turning` | _presence only_ |
+| `.ml-dial-field` | `data-disabled` | _presence only_ |
+| `.ml-dial-field` | `data-size` | `lg`, `sm` |
+| `.ml-dial-field` | `data-tone` | `danger`, `info`, `success`, `warning` |
 | `.ml-dropdown-item` | `data-danger` | _presence only_ |
 | `.ml-dropdown-item` | `data-highlighted` | _presence only_ |
 | `.ml-dropdown-menu` | `data-align` | `end` |
@@ -449,6 +453,24 @@ An on/off control that is not a native checkbox.
   - On activate, set aria-checked and data-state to the opposite value.
 - Note: Prefer a native checkbox unless the control genuinely reads as a switch.
 
+### dial
+
+A single value chosen from a range by turning a knob.
+
+- Root: `.ml-dial-field`
+- Parts: control `.ml-dial`, arc `.ml-dial-arc`, ticks `.ml-dial-ticks`, track `.ml-dial-track`, range `.ml-dial-range`, knob `.ml-dial-knob`, readout `.ml-dial-readout`, value `.ml-dial-value`
+- ARIA on control: `role` — slider; `aria-valuenow` — current value; `aria-valuemin` — minimum; `aria-valuemax` — maximum; `aria-valuetext` — the value as it reads, with its unit; `tabindex` — 0 unless disabled
+- Keyboard:
+  - <kbd>ArrowRight</kbd> / <kbd>ArrowUp</kbd>: Increase by one step.
+  - <kbd>ArrowLeft</kbd> / <kbd>ArrowDown</kbd>: Decrease by one step.
+  - <kbd>Home</kbd> / <kbd>End</kbd>: Jump to the minimum or maximum.
+  - <kbd>PageUp</kbd> / <kbd>PageDown</kbd>: Move by a larger step.
+  - <kbd>Escape</kbd>: During a turn, put back the value it began with.
+- State changes:
+  - On mouse or pen down on the ring around the knob, set the value the press points to, snapped to the step to within min and max; a press in the gap at the bottom sets nothing.
+  - On mouse or pen down on the dial, then turning round its center, set the value by the angle turned; a turn past an end stops at that end to within min and max.
+  - On a finger held still on the dial for touchHold.delay, then turning, set the value by the angle turned; a finger that moves sooner scrolls the page and changes nothing, and a tap on the ring sets the value it points to to within min and max.
+
 ### slider
 
 A single value chosen from a range.

package/registry/catalog.json

@@ -109,7 +109,8 @@
     "support",
     "marketing-site",
     "docs-site",
-    "finance"
+    "finance",
+    "smart-home"
   ],
   "items": [
     {
@@ -1505,6 +1506,22 @@
         "dashboard",
         "premium"
       ]
+    },
+    {
+      "name": "smart-home",
+      "type": "registry:template",
+      "title": "Smart Home",
+      "description": "A smart home: a thermostat you turn like the one on the wall, scenes that set the whole house at once, rooms with their lights, blinds and devices, today's electricity against yesterday and the solar panels, locks, sensors and the alarm, and automations",
+      "category": "application",
+      "tags": [
+        "template",
+        "smart-home",
+        "iot",
+        "thermostat",
+        "energy",
+        "dashboard",
+        "premium"
+      ]
     }
   ]
 }

package/registry/contract.json

@@ -165,6 +165,17 @@
     "ml-date-picker-trigger",
     "ml-date-picker-value",
     "ml-definition-list",
+    "ml-dial",
+    "ml-dial-arc",
+    "ml-dial-caption",
+    "ml-dial-field",
+    "ml-dial-knob",
+    "ml-dial-label",
+    "ml-dial-range",
+    "ml-dial-readout",
+    "ml-dial-ticks",
+    "ml-dial-track",
+    "ml-dial-value",
     "ml-display",
     "ml-divider",
     "ml-dropdown",
@@ -686,6 +697,22 @@
     "ml-date-picker-trigger": {
       "data-empty": []
     },
+    "ml-dial": {
+      "data-turning": []
+    },
+    "ml-dial-field": {
+      "data-disabled": [],
+      "data-size": [
+        "lg",
+        "sm"
+      ],
+      "data-tone": [
+        "danger",
+        "info",
+        "success",
+        "warning"
+      ]
+    },
     "ml-dropdown-item": {
       "data-danger": [],
       "data-highlighted": []

package/registry/examples.json

@@ -1716,6 +1716,110 @@
       }
     }
   },
+  "dial": {
+    "needs": "behavior",
+    "react": "import { Dial } from \"@/components/ui/dial\";\n\nexport default function Example() {\n  return <Dial label=\"Temperature\" min={10} max={30} step={0.5} defaultValue={21} format={(value) => `${value} °C`} />;\n}",
+    "html": "<div class=\"ml-dial-field\" data-size=\"md\" data-tone=\"primary\">\n  <span class=\"ml-dial-label\" id=\"dial-1-label\">Temperature</span>\n  <div class=\"ml-dial\" id=\"dial-1\" role=\"slider\" tabindex=\"0\" aria-valuemin=\"10\" aria-valuemax=\"30\" aria-valuenow=\"21\" aria-valuetext=\"21 °C\" aria-labelledby=\"dial-1-label\" style=\"--ml-dial-angle:13.5deg\">\n    <svg class=\"ml-dial-arc\" viewBox=\"0 0 100 100\" aria-hidden=\"true\" focusable=\"false\"><path class=\"ml-dial-ticks\" d=\"M 16.77 83.23 L 14.64 85.36 M 11.50 76.96 L 10.27 77.82 M 7.40 69.86 L 6.04 70.50 M 4.60 62.16 L 3.15 62.55 M 3.18 54.10 L 1.68 54.23 M 3.18 45.90 L 1.68 45.77 M 4.60 37.84 L 3.15 37.45 M 7.40 30.14 L 6.04 29.50 M 11.50 23.04 L 10.27 22.18 M 16.77 16.77 L 14.64 14.64 M 23.04 11.50 L 22.18 10.27 M 30.14 7.40 L 29.50 6.04 M 37.84 4.60 L 37.45 3.15 M 45.90 3.18 L 45.77 1.68 M 54.10 3.18 L 54.23 1.68 M 62.16 4.60 L 62.55 3.15 M 69.86 7.40 L 70.50 6.04 M 76.96 11.50 L 77.82 10.27 M 83.23 16.77 L 85.36 14.64 M 88.50 23.04 L 89.73 22.18 M 92.60 30.14 L 93.96 29.50 M 95.40 37.84 L 96.85 37.45 M 96.82 45.90 L 98.32 45.77 M 96.82 54.10 L 98.32 54.23 M 95.40 62.16 L 96.85 62.55 M 92.60 69.86 L 93.96 70.50 M 88.50 76.96 L 89.73 77.82 M 83.23 83.23 L 85.36 85.36\"></path><path class=\"ml-dial-track\" d=\"M 20.302 79.698 A 42 42 0 1 1 79.698 79.698\"></path><path class=\"ml-dial-range\" d=\"M 20.302 79.698 A 42 42 0 0 1 59.805 9.160\"></path></svg>\n    <span class=\"ml-dial-knob\" aria-hidden=\"true\"></span>\n    <span class=\"ml-dial-readout\" aria-hidden=\"true\"><span class=\"ml-dial-value\">21 °C</span></span>\n  </div>\n</div>",
+    "behavior": {
+      "name": "dial",
+      "html": "<div class=\"ml-dial-field\" data-ml=\"dial\" data-size=\"md\" data-tone=\"warning\" data-ml-step=\"0.5\" data-ml-unit=\" °C\">\n  <span class=\"ml-dial-label\" id=\"thermostat-label\">Thermostat</span>\n  <div class=\"ml-dial\" id=\"thermostat\" role=\"slider\" tabindex=\"0\"\n       aria-labelledby=\"thermostat-label\" aria-describedby=\"thermostat-caption\"\n       aria-valuemin=\"10\" aria-valuemax=\"30\" aria-valuenow=\"21.5\" aria-valuetext=\"21.5 °C\"\n       style=\"--ml-dial-angle: 20.25deg\">\n    <svg class=\"ml-dial-arc\" viewBox=\"0 0 100 100\" aria-hidden=\"true\" focusable=\"false\">\n      <path class=\"ml-dial-ticks\" d=\"M 16.77 83.23 L 14.64 85.36 M 11.50 76.96 L 10.27 77.82 M 7.40 69.86 L 6.04 70.50 M 4.60 62.16 L 3.15 62.55 M 3.18 54.10 L 1.68 54.23 M 3.18 45.90 L 1.68 45.77 M 4.60 37.84 L 3.15 37.45 M 7.40 30.14 L 6.04 29.50 M 11.50 23.04 L 10.27 22.18 M 16.77 16.77 L 14.64 14.64 M 23.04 11.50 L 22.18 10.27 M 30.14 7.40 L 29.50 6.04 M 37.84 4.60 L 37.45 3.15 M 45.90 3.18 L 45.77 1.68 M 54.10 3.18 L 54.23 1.68 M 62.16 4.60 L 62.55 3.15 M 69.86 7.40 L 70.50 6.04 M 76.96 11.50 L 77.82 10.27 M 83.23 16.77 L 85.36 14.64 M 88.50 23.04 L 89.73 22.18 M 92.60 30.14 L 93.96 29.50 M 95.40 37.84 L 96.85 37.45 M 96.82 45.90 L 98.32 45.77 M 96.82 54.10 L 98.32 54.23 M 95.40 62.16 L 96.85 62.55 M 92.60 69.86 L 93.96 70.50 M 88.50 76.96 L 89.73 77.82 M 83.23 83.23 L 85.36 85.36\" />\n      <path class=\"ml-dial-track\" d=\"M 20.302 79.698 A 42 42 0 1 1 79.698 79.698\" />\n      <path class=\"ml-dial-range\" d=\"M 20.302 79.698 A 42 42 0 0 1 64.537 10.596\" />\n    </svg>\n    <span class=\"ml-dial-knob\" aria-hidden=\"true\"></span>\n    <span class=\"ml-dial-readout\" aria-hidden=\"true\"><span class=\"ml-dial-value\">21.5 °C</span></span>\n  </div>\n  <span class=\"ml-dial-caption\" id=\"thermostat-caption\">Heating from 19.5 °C</span>\n</div>",
+      "module": "@mlola-ui/behavior/dial"
+    },
+    "elements": [
+      {
+        "class": "ml-dial-field",
+        "attributes": {
+          "data-disabled": [],
+          "data-size": [
+            "lg",
+            "sm"
+          ],
+          "data-tone": [
+            "danger",
+            "info",
+            "success",
+            "warning"
+          ]
+        }
+      },
+      {
+        "class": "ml-dial-label",
+        "attributes": {}
+      },
+      {
+        "class": "ml-dial-caption",
+        "attributes": {}
+      },
+      {
+        "class": "ml-dial",
+        "attributes": {
+          "data-turning": []
+        }
+      },
+      {
+        "class": "ml-dial-arc",
+        "attributes": {}
+      },
+      {
+        "class": "ml-dial-ticks",
+        "attributes": {}
+      },
+      {
+        "class": "ml-dial-track",
+        "attributes": {}
+      },
+      {
+        "class": "ml-dial-range",
+        "attributes": {}
+      },
+      {
+        "class": "ml-dial-knob",
+        "attributes": {}
+      },
+      {
+        "class": "ml-dial-readout",
+        "attributes": {}
+      },
+      {
+        "class": "ml-dial-value",
+        "attributes": {}
+      }
+    ],
+    "rendered": {
+      "ml-dial-field": {
+        "data-size": [
+          "lg",
+          "md",
+          "sm"
+        ],
+        "data-tone": [
+          "danger",
+          "info",
+          "primary",
+          "success",
+          "warning"
+        ]
+      }
+    },
+    "gallery": [
+      {
+        "slug": "thermostat",
+        "file": "1-thermostat",
+        "title": "A thermostat",
+        "description": "format says the value in a unit, and caption and tone follow what the value means.",
+        "react": "\"use client\";\n\nimport * as React from \"react\";\nimport { Dial } from \"@/components/ui/dial\";\n\nexport default function Example() {\n  const room = 19.5;\n  const [target, setTarget] = React.useState(21);\n  const heating = target > room;\n  return (\n    <Dial\n      label=\"Living room\"\n      size=\"lg\"\n      min={10}\n      max={30}\n      step={0.5}\n      value={target}\n      onValueChange={setTarget}\n      format={(value) => `${value.toFixed(1)} °C`}\n      tone={heating ? \"warning\" : \"info\"}\n      caption={heating ? `Heating from ${room} °C` : `Holding at ${room} °C`}\n    />\n  );\n}",
+        "html": "<div class=\"ml-dial-field\" data-size=\"lg\" data-tone=\"warning\">\n  <span class=\"ml-dial-label\" id=\"dial-thermostat-1-label\">Living room</span>\n  <div class=\"ml-dial\" id=\"dial-thermostat-1\" role=\"slider\" tabindex=\"0\" aria-valuemin=\"10\" aria-valuemax=\"30\" aria-valuenow=\"21\" aria-valuetext=\"21.0 °C\" aria-labelledby=\"dial-thermostat-1-label\" aria-describedby=\"dial-thermostat-1-caption\" style=\"--ml-dial-angle:13.5deg\">\n    <svg class=\"ml-dial-arc\" viewBox=\"0 0 100 100\" aria-hidden=\"true\" focusable=\"false\"><path class=\"ml-dial-ticks\" d=\"M 16.77 83.23 L 14.64 85.36 M 11.50 76.96 L 10.27 77.82 M 7.40 69.86 L 6.04 70.50 M 4.60 62.16 L 3.15 62.55 M 3.18 54.10 L 1.68 54.23 M 3.18 45.90 L 1.68 45.77 M 4.60 37.84 L 3.15 37.45 M 7.40 30.14 L 6.04 29.50 M 11.50 23.04 L 10.27 22.18 M 16.77 16.77 L 14.64 14.64 M 23.04 11.50 L 22.18 10.27 M 30.14 7.40 L 29.50 6.04 M 37.84 4.60 L 37.45 3.15 M 45.90 3.18 L 45.77 1.68 M 54.10 3.18 L 54.23 1.68 M 62.16 4.60 L 62.55 3.15 M 69.86 7.40 L 70.50 6.04 M 76.96 11.50 L 77.82 10.27 M 83.23 16.77 L 85.36 14.64 M 88.50 23.04 L 89.73 22.18 M 92.60 30.14 L 93.96 29.50 M 95.40 37.84 L 96.85 37.45 M 96.82 45.90 L 98.32 45.77 M 96.82 54.10 L 98.32 54.23 M 95.40 62.16 L 96.85 62.55 M 92.60 69.86 L 93.96 70.50 M 88.50 76.96 L 89.73 77.82 M 83.23 83.23 L 85.36 85.36\"></path><path class=\"ml-dial-track\" d=\"M 20.302 79.698 A 42 42 0 1 1 79.698 79.698\"></path><path class=\"ml-dial-range\" d=\"M 20.302 79.698 A 42 42 0 0 1 59.805 9.160\"></path></svg>\n    <span class=\"ml-dial-knob\" aria-hidden=\"true\"></span>\n    <span class=\"ml-dial-readout\" aria-hidden=\"true\"><span class=\"ml-dial-value\">21.0 °C</span></span>\n  </div>\n  <span class=\"ml-dial-caption\" id=\"dial-thermostat-1-caption\">Heating from 19.5 °C</span>\n</div>"
+      },
+      {
+        "slug": "in-a-form",
+        "file": "2-in-a-form",
+        "title": "In a form",
+        "description": "With a name, the dial submits its value like a native input.",
+        "react": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Dial } from \"@/components/ui/dial\";\n\nexport default function Example() {\n  const [sent, setSent] = React.useState<string | null>(null);\n  return (\n    <form\n      className=\"ml-stack\"\n      onSubmit={(event) => {\n        event.preventDefault();\n        setSent(String(new FormData(event.currentTarget).get(\"speed\")));\n      }}\n    >\n      <Dial label=\"Fan speed\" name=\"speed\" size=\"sm\" min={0} max={4} step={1} defaultValue={2} format={(value) => (value === 0 ? \"Off\" : String(value))} />\n      <Button type=\"submit\" variant=\"secondary\">\n        Save\n      </Button>\n      <p role=\"status\">{sent === null ? \"\" : `Saved speed ${sent}`}</p>\n    </form>\n  );\n}",
+        "html": "<form class=\"ml-stack\">\n  <div class=\"ml-dial-field\" data-size=\"sm\" data-tone=\"primary\">\n    <span class=\"ml-dial-label\" id=\"dial-in-a-form-1-label\">Fan speed</span>\n    <div class=\"ml-dial\" id=\"dial-in-a-form-1\" role=\"slider\" tabindex=\"0\" aria-valuemin=\"0\" aria-valuemax=\"4\" aria-valuenow=\"2\" aria-valuetext=\"2\" aria-labelledby=\"dial-in-a-form-1-label\" style=\"--ml-dial-angle:0deg\">\n      <svg class=\"ml-dial-arc\" viewBox=\"0 0 100 100\" aria-hidden=\"true\" focusable=\"false\"><path class=\"ml-dial-ticks\" d=\"M 16.77 83.23 L 14.64 85.36 M 11.50 76.96 L 10.27 77.82 M 7.40 69.86 L 6.04 70.50 M 4.60 62.16 L 3.15 62.55 M 3.18 54.10 L 1.68 54.23 M 3.18 45.90 L 1.68 45.77 M 4.60 37.84 L 3.15 37.45 M 7.40 30.14 L 6.04 29.50 M 11.50 23.04 L 10.27 22.18 M 16.77 16.77 L 14.64 14.64 M 23.04 11.50 L 22.18 10.27 M 30.14 7.40 L 29.50 6.04 M 37.84 4.60 L 37.45 3.15 M 45.90 3.18 L 45.77 1.68 M 54.10 3.18 L 54.23 1.68 M 62.16 4.60 L 62.55 3.15 M 69.86 7.40 L 70.50 6.04 M 76.96 11.50 L 77.82 10.27 M 83.23 16.77 L 85.36 14.64 M 88.50 23.04 L 89.73 22.18 M 92.60 30.14 L 93.96 29.50 M 95.40 37.84 L 96.85 37.45 M 96.82 45.90 L 98.32 45.77 M 96.82 54.10 L 98.32 54.23 M 95.40 62.16 L 96.85 62.55 M 92.60 69.86 L 93.96 70.50 M 88.50 76.96 L 89.73 77.82 M 83.23 83.23 L 85.36 85.36\"></path><path class=\"ml-dial-track\" d=\"M 20.302 79.698 A 42 42 0 1 1 79.698 79.698\"></path><path class=\"ml-dial-range\" d=\"M 20.302 79.698 A 42 42 0 0 1 50.000 8.000\"></path></svg>\n      <span class=\"ml-dial-knob\" aria-hidden=\"true\"></span>\n      <span class=\"ml-dial-readout\" aria-hidden=\"true\"><span class=\"ml-dial-value\">2</span></span>\n    </div>\n    <input type=\"hidden\" name=\"speed\" value=\"2\"/>\n  </div>\n  <button class=\"ml-button\" type=\"submit\" data-variant=\"secondary\" data-size=\"md\"><span class=\"ml-button-label\">Save</span></button>\n  <p role=\"status\"></p>\n</form>"
+      }
+    ]
+  },
   "table": {
     "needs": "nothing",
     "react": "import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from \"@/components/ui/table\";\n\nconst invoices = [\n  { id: \"INV-104\", status: \"Paid\", amount: \"$240.00\" },\n  { id: \"INV-105\", status: \"Open\", amount: \"$1,120.00\" },\n];\n\nexport default function Example() {\n  return (\n    <Table>\n      <TableCaption>Recent invoices</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead>Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead align=\"right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.id}>\n            <TableCell>{invoice.id}</TableCell>\n            <TableCell>{invoice.status}</TableCell>\n            <TableCell numeric>{invoice.amount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n}",

package/registry/index.json

@@ -2,7 +2,7 @@
   "$schema": "./schema/registry-index.schema.json",
   "schemaVersion": 2,
   "name": "mlola-ui",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",
@@ -126,6 +126,7 @@
     "sheet",
     "skeleton",
     "slider",
+    "dial",
     "table",
     "tabs",
     "textarea",
@@ -177,8 +178,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2",
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1",
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -239,7 +240,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -401,7 +402,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -493,7 +494,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [],
       "variants": [],
@@ -546,7 +547,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/motion": "^1.2.2"
+        "@mlola-ui/motion": "^1.3.1"
       },
       "options": [
         {
@@ -714,8 +715,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2",
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1",
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -784,7 +785,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [],
       "variants": [],
@@ -839,7 +840,7 @@
         "modal"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [],
       "variants": [],
@@ -903,8 +904,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2",
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1",
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -993,7 +994,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [],
       "variants": [],
@@ -1218,8 +1219,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2",
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1",
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -1370,7 +1371,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [],
       "variants": [],
@@ -1421,7 +1422,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1"
       },
       "options": [
         {
@@ -1799,7 +1800,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1"
       },
       "options": [],
       "variants": [],
@@ -1852,8 +1853,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2",
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1",
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -1931,8 +1932,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2",
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1",
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -2078,7 +2079,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1"
       },
       "options": [
         {
@@ -2122,6 +2123,89 @@
         ]
       }
     },
+    {
+      "$schema": "../schema/registry-item.schema.json",
+      "schemaVersion": 2,
+      "name": "dial",
+      "title": "Dial",
+      "description": "A value chosen by turning a knob, with a press on the ring to jump, a hold to turn by finger, Escape to undo a turn and the keys of a slider",
+      "category": "forms",
+      "tags": [
+        "form",
+        "input",
+        "range",
+        "knob",
+        "thermostat"
+      ],
+      "type": "registry:ui",
+      "usage": {
+        "importPath": "{{aliases.components}}/dial",
+        "exportName": "Dial",
+        "isDefault": false
+      },
+      "registryDependencies": [
+        "input"
+      ],
+      "engineDependencies": {
+        "@mlola-ui/behavior": "^1.3.1"
+      },
+      "options": [
+        {
+          "component": "Dial",
+          "prop": "size",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
+        {
+          "component": "Dial",
+          "prop": "tone",
+          "values": [
+            "primary",
+            "info",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "default": "primary",
+          "description": "The arc's color, as the shared vocabulary names it."
+        }
+      ],
+      "variants": [],
+      "sizes": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "files": [
+        {
+          "path": "packages/components/_internal/react.ts",
+          "target": "{{aliases.components}}/_internal/react.ts",
+          "type": "registry:ui",
+          "integrity": "sha256-INfds1J2f1MLpN6kBXz0GkfBEMIiRlhv0DXX455qAZo="
+        },
+        {
+          "path": "packages/components/dial/dial.tsx",
+          "target": "{{aliases.components}}/dial.tsx",
+          "type": "registry:ui",
+          "integrity": "sha256-YhncOvnvBmT1GtWN8o7sgtMjmXvjaXVzTknK98osDno="
+        }
+      ],
+      "themeContract": {
+        "attribute": "data-theme",
+        "modeAttribute": "data-mode",
+        "compatibleThemes": [
+          "graphite",
+          "atelier",
+          "machined",
+          "aerogel",
+          "nordic"
+        ]
+      }
+    },
     {
       "$schema": "../schema/registry-item.schema.json",
       "schemaVersion": 2,
@@ -2223,7 +2307,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1"
       },
       "options": [
         {
@@ -2355,7 +2439,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -2443,8 +2527,8 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2",
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1",
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -2599,7 +2683,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1"
       },
       "options": [
         {
@@ -2676,7 +2760,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1"
       },
       "options": [
         {
@@ -2758,7 +2842,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -2830,7 +2914,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -2900,7 +2984,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [],
       "variants": [],
@@ -3098,8 +3182,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2",
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1",
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -3188,7 +3272,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [],
       "variants": [],
@@ -3243,7 +3327,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [],
       "variants": [],
@@ -3306,7 +3390,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -3377,7 +3461,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -3496,8 +3580,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2",
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1",
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [],
       "variants": [],
@@ -3561,7 +3645,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1"
       },
       "options": [
         {
@@ -3648,8 +3732,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2",
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1",
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [],
       "variants": [],
@@ -3723,7 +3807,7 @@
         "sheet"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [],
       "variants": [],
@@ -3846,7 +3930,7 @@
         "button"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {
@@ -3950,8 +4034,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.2.2",
-        "@mlola-ui/icons": "^1.2.2"
+        "@mlola-ui/behavior": "^1.3.1",
+        "@mlola-ui/icons": "^1.3.1"
       },
       "options": [
         {

package/registry/source/packages/components/dial/dial.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import * as React from "react";
+import { clampToStep, dialAngle, dialArc, dialFace, dialFit, dialPositionAt, dialTicks, dialTurn, percentOf, sliderValueForKey, touchHold, valueFromRatio } from "@mlola-ui/behavior/logic";
+import { cx, useControllableState } from "../_internal/react";
+import { FieldValue, type FormControlProps } from "../input/input";
+
+type DialSize = "sm" | "md" | "lg";
+type DialTone = "primary" | "info" | "success" | "warning" | "danger";
+
+interface DialProps extends Omit<FormControlProps, "required"> {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: React.ReactNode;
+  /** How the value reads, in the dial and to a screen reader: (21.5) => "21.5 °C". */
+  format?: (value: number) => string;
+  /** A line under the value inside the dial: "Heating to 21 °C". */
+  caption?: React.ReactNode;
+  size?: DialSize;
+  /** The arc's color, as the shared vocabulary names it. */
+  tone?: DialTone;
+  className?: string;
+}
+
+/** The knob fills the circle inside the arc: a press there turns it, a press on the ring sets the value it points to. */
+const KNOB = dialFace.knob;
+
+/** The scale of the instrument, drawn once. */
+const TICKS = dialTicks();
+
+interface Gesture {
+  id: number;
+  touch: boolean;
+  /** A finger has held still long enough to take the dial from the page's scroll. */
+  active: boolean;
+  /** The value when the gesture began, for Escape to put back. */
+  start: number;
+  /** The unrounded position between moves, so small turns add up. */
+  position: number;
+  /** Where the pointer was last, from the center. */
+  last: { dx: number; dy: number };
+  /** Where the finger first touched, in the window, to tell a hold from a scroll. */
+  x: number;
+  y: number;
+  timer?: number;
+}
+
+/**
+ * A value chosen by turning a knob: a thermostat, a fan's speed, a timer.
+ * A press on the ring sets the value it points to; a press on the knob turns
+ * it from where it is, and a turn past an end stops there. A finger holds
+ * still for a moment before it turns the dial, so a finger scrolling past it
+ * scrolls the page; a tap on the ring sets the value. Escape during a turn
+ * puts the value back. The keys are a slider's: arrows step, Page keys take
+ * large steps, Home and End go to the ends.
+ */
+const Dial = React.forwardRef<HTMLDivElement, DialProps>(
+  ({ value, defaultValue, onValueChange, min = 0, max = 100, step = 1, disabled = false, label, format, caption, size = "md", tone = "primary", className, id, name, form, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy }, ref) => {
+    const low = Number.isFinite(min) ? min : 0;
+    const high = Number.isFinite(max) && max > low ? max : low + 100;
+    const increment = Number.isFinite(step) && step > 0 ? step : 1;
+    // Shared with the framework-free runtime, so both round and turn identically.
+    const bounds = React.useMemo(() => ({ min: low, max: high, step: increment }), [low, high, increment]);
+    const normalize = React.useCallback((raw: number) => clampToStep(raw, bounds), [bounds]);
+    const [currentRaw, setCurrent] = useControllableState({ value, defaultValue: normalize(defaultValue ?? (low + high) / 2), onChange: onValueChange });
+    const current = normalize(currentRaw);
+    const [turning, setTurning] = React.useState(false);
+    const control = React.useRef<HTMLDivElement | null>(null);
+    const gesture = React.useRef<Gesture | null>(null);
+    const generated = React.useId();
+    const dialId = id ?? generated;
+    const labelId = label ? `${dialId}-label` : undefined;
+    const captionId = caption ? `${dialId}-caption` : undefined;
+    const position = percentOf(current, bounds) / 100;
+    const text = format ? format(current) : String(current);
+
+    const setRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        control.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref],
+    );
+
+    // A long value, or a wide typeface, would reach the notch on the knob's
+    // rim: the readout shrinks to the room it has. Measured after layout and
+    // again when the text's size changes (a web font arriving).
+    const readout = React.useRef<HTMLSpanElement | null>(null);
+    React.useLayoutEffect(() => {
+      const value = readout.current;
+      const dial = control.current;
+      if (!value || !dial) return;
+      const fit = () => dial.style.setProperty("--ml-dial-fit", String(dialFit(value.offsetWidth, dial.offsetWidth)));
+      fit();
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(fit);
+      observer.observe(value);
+      observer.observe(dial);
+      return () => observer.disconnect();
+    }, [text, size]);
+
+    /** The pointer's place from the dial's center, and the knob's radius, in pixels. */
+    const measure = (clientX: number, clientY: number) => {
+      const box = control.current!.getBoundingClientRect();
+      return { dx: clientX - (box.left + box.width / 2), dy: clientY - (box.top + box.height / 2), knob: (box.width / 2) * KNOB };
+    };
+
+    // Window listeners for one gesture: Escape (in the capture phase, ahead of
+    // a dialog that would close on it) and a finger's moves once it has hold.
+    const listeners = React.useRef<{ key: (event: KeyboardEvent) => void; touchMove: (event: TouchEvent) => void } | null>(null);
+
+    /**
+     * Let go of the gesture: its timer and its window listeners. It reads refs
+     * only, so it is the same function on every render. Tied to a callback, it
+     * would run whenever a parent passed a new `onValueChange` (an inline
+     * arrow does, on every render) and end the turn after its first step.
+     */
+    const release = React.useCallback(() => {
+      const entry = gesture.current;
+      gesture.current = null;
+      if (!entry) return null;
+      window.clearTimeout(entry.timer);
+      if (listeners.current) {
+        window.removeEventListener("keydown", listeners.current.key, true);
+        window.removeEventListener("touchmove", listeners.current.touchMove);
+        listeners.current = null;
+      }
+      return entry;
+    }, []);
+
+    const end = (restore: boolean) => {
+      const entry = release();
+      if (!entry) return;
+      setTurning(false);
+      if (restore) setCurrent(entry.start);
+    };
+
+    // Leaving the page mid-turn leaves no listener behind.
+    React.useEffect(
+      () => () => {
+        release();
+      },
+      [release],
+    );
+
+    const begin = (event: React.PointerEvent<HTMLDivElement>) => {
+      if (disabled || event.button !== 0) return;
+      const touch = event.pointerType === "touch";
+      const where = measure(event.clientX, event.clientY);
+      const pointed = dialPositionAt(where.dx, where.dy, where.knob);
+      const entry: Gesture = { id: event.pointerId, touch, active: !touch, start: current, position: pointed ?? position, last: { dx: where.dx, dy: where.dy }, x: event.clientX, y: event.clientY };
+      gesture.current = entry;
+      const key = (keyEvent: KeyboardEvent) => {
+        if (keyEvent.key !== "Escape" || !gesture.current?.active) return;
+        keyEvent.preventDefault();
+        keyEvent.stopPropagation();
+        end(true);
+      };
+      // Once a finger has held, it turns the dial instead of scrolling the page.
+      const touchMove = (touchEvent: TouchEvent) => {
+        if (gesture.current?.touch && gesture.current.active && touchEvent.cancelable) touchEvent.preventDefault();
+      };
+      listeners.current = { key, touchMove };
+      window.addEventListener("keydown", key, true);
+      window.addEventListener("touchmove", touchMove, { passive: false });
+      if (touch) {
+        entry.timer = window.setTimeout(() => {
+          if (gesture.current !== entry) return;
+          entry.active = true;
+          setTurning(true);
+        }, touchHold.delay);
+        return;
+      }
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setTurning(true);
+      if (pointed !== null) setCurrent(valueFromRatio(pointed, bounds));
+    };
+
+    const move = (event: React.PointerEvent<HTMLDivElement>) => {
+      const entry = gesture.current;
+      if (!entry || entry.id !== event.pointerId) return;
+      if (!entry.active) {
+        // A finger that moves before the hold ends is scrolling: let it go.
+        if (Math.hypot(event.clientX - entry.x, event.clientY - entry.y) > touchHold.slop) end(false);
+        return;
+      }
+      const where = measure(event.clientX, event.clientY);
+      entry.position = dialTurn(entry.position, entry.last, where);
+      entry.last = { dx: where.dx, dy: where.dy };
+      setCurrent(valueFromRatio(entry.position, bounds));
+    };
+
+    const finish = (event: React.PointerEvent<HTMLDivElement>) => {
+      const entry = gesture.current;
+      if (!entry || entry.id !== event.pointerId) return;
+      // A tap: a finger lifted before the hold, without moving, sets the value it pointed to on the ring.
+      if (entry.touch && !entry.active) {
+        const where = measure(event.clientX, event.clientY);
+        const pointed = dialPositionAt(where.dx, where.dy, where.knob);
+        if (pointed !== null) setCurrent(valueFromRatio(pointed, bounds));
+      }
+      end(false);
+    };
+
+    return (
+      <div className={cx("ml-dial-field", className)} data-size={size} data-tone={tone} data-disabled={disabled ? "" : undefined}>
+        {label ? (
+          <span id={labelId} className="ml-dial-label">
+            {label}
+          </span>
+        ) : null}
+        <div
+          ref={setRef}
+          id={dialId}
+          role="slider"
+          tabIndex={disabled ? -1 : 0}
+          aria-valuemin={low}
+          aria-valuemax={high}
+          aria-valuenow={current}
+          aria-valuetext={text}
+          aria-labelledby={labelledBy ?? labelId}
+          aria-label={labelledBy || label ? undefined : (ariaLabel ?? "Value")}
+          aria-describedby={[describedBy, captionId].filter(Boolean).join(" ") || undefined}
+          aria-disabled={disabled || undefined}
+          data-turning={turning ? "" : undefined}
+          className="ml-dial"
+          style={{ "--ml-dial-angle": `${dialAngle(position)}deg` } as React.CSSProperties}
+          onKeyDown={(event) => {
+            if (disabled) return;
+            const next = sliderValueForKey(event.key, current, bounds);
+            if (next === undefined) return;
+            event.preventDefault();
+            setCurrent(next);
+          }}
+          onPointerDown={begin}
+          onPointerMove={move}
+          onPointerUp={finish}
+          onPointerCancel={() => end(false)}
+          onLostPointerCapture={(event) => {
+            if (gesture.current?.id === event.pointerId && !gesture.current.touch) end(false);
+          }}
+          // A long press on a phone would open the page's menu over the dial.
+          onContextMenu={(event) => {
+            if (gesture.current?.touch) event.preventDefault();
+          }}
+        >
+          <svg className="ml-dial-arc" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
+            <path className="ml-dial-ticks" d={TICKS} />
+            <path className="ml-dial-track" d={dialArc(0, 1)} />
+            <path className="ml-dial-range" d={dialArc(0, position)} />
+          </svg>
+          <span className="ml-dial-knob" aria-hidden="true" />
+          <span className="ml-dial-readout" aria-hidden="true">
+            <span ref={readout} className="ml-dial-value">
+              {text}
+            </span>
+          </span>
+        </div>
+        {caption ? (
+          <span id={captionId} className="ml-dial-caption">
+            {caption}
+          </span>
+        ) : null}
+        <FieldValue name={name} form={form} value={String(current)} disabled={disabled} />
+      </div>
+    );
+  },
+);
+Dial.displayName = "Dial";
+
+export { Dial };
+export type { DialProps, DialSize, DialTone };

package/registry/source-manifest.json

@@ -29,6 +29,7 @@
   "packages/components/context-menu/context-menu.tsx": "sha256-OGaKzthZJGaV5T+4sRWYecA64wEEg2KImKnIzMMg1i4=",
   "packages/components/copy-button/copy-button.tsx": "sha256-6fvfifoiDOtW+WxKWon4SGEn3THtERuCX2hqGSZDtVM=",
   "packages/components/date-picker/date-picker.tsx": "sha256-QABmZzPKHc706/Rs+ln3ifDK3T2lXl34rehhuRXW+8o=",
+  "packages/components/dial/dial.tsx": "sha256-YhncOvnvBmT1GtWN8o7sgtMjmXvjaXVzTknK98osDno=",
   "packages/components/dropdown-menu/dropdown-menu.tsx": "sha256-TSAsDWcx8mVwLdZVEaCrO0Fkeuiaui7Jw/BbZQmJH1Y=",
   "packages/components/dropzone/dropzone.tsx": "sha256-tHCCpEWE6839UeLOszTo+R2vAL4Sp9UxuRdLkFLfnq4=",
   "packages/components/empty-state/empty-state.tsx": "sha256-/phk3A6TDaiqo61fCcAc/4Bi85e1yBGAtKXFaGhrjyw=",