mlola-ui 1.1.19 → 1.1.21

package/package.json

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

package/registry/examples.json

@@ -2009,7 +2009,7 @@
   "toast": {
     "needs": "behavior",
     "react": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Toaster, toast } from \"@/components/ui/toast\";\n\nexport default function Example() {\n  return (\n    <>\n      <Button onClick={() => toast.success(\"Draft saved to your workspace.\")}>Save draft</Button>\n      <Toaster />\n    </>\n  );\n}",
-    "html": "<button class=\"ml-button\" type=\"button\" data-variant=\"primary\" data-size=\"md\"><span class=\"ml-button-label\">Save draft</span></button>\n<div class=\"ml-toaster\" role=\"region\" aria-label=\"Notifications (top right)\" data-position=\"top-right\"></div>",
+    "html": "<button class=\"ml-button\" type=\"button\" data-variant=\"primary\" data-size=\"md\"><span class=\"ml-button-label\">Save draft</span></button>\n<span hidden=\"\"></span>",
     "behavior": {
       "name": "toast",
       "html": "<div class=\"ml-toaster\" data-ml=\"toast\" role=\"region\" aria-label=\"Notifications\" data-position=\"top-right\">\n  <div class=\"ml-toast\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" data-tone=\"success\" data-ml-duration=\"6000\">\n    <div class=\"ml-toast-content\">\n      <p class=\"ml-toast-message\">Draft saved to your workspace.</p>\n    </div>\n    <button class=\"ml-toast-close\" type=\"button\" aria-label=\"Dismiss notification\"><svg class=\"mlola-glyph\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg></button>\n  </div>\n</div>"
@@ -2079,7 +2079,7 @@
         "title": "Following work to its end",
         "description": "One toast says it is working, then reports how it went, without a second message.",
         "react": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Toaster, toast } from \"@/components/ui/toast\";\n\nconst publish = () => new Promise<string>((resolve) => window.setTimeout(() => resolve(\"v2.4\"), 1400));\n\nexport default function Example() {\n  return (\n    <>\n      <Button onClick={() => toast.promise(publish(), { loading: \"Publishing…\", success: (version) => `Published ${version}`, error: \"Could not publish\" })}>\n        Publish\n      </Button>\n      <Toaster />\n    </>\n  );\n}",
-        "html": "<button class=\"ml-button\" type=\"button\" data-variant=\"primary\" data-size=\"md\"><span class=\"ml-button-label\">Publish</span></button>\n<div class=\"ml-toaster\" role=\"region\" aria-label=\"Notifications (top right)\" data-position=\"top-right\"></div>"
+        "html": "<button class=\"ml-button\" type=\"button\" data-variant=\"primary\" data-size=\"md\"><span class=\"ml-button-label\">Publish</span></button>\n<span hidden=\"\"></span>"
       },
       {
         "slug": "undo",
@@ -2087,7 +2087,7 @@
         "title": "With an undo",
         "description": "An action in the toast gives a quick way back from something easy to regret.",
         "react": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Toaster, toast } from \"@/components/ui/toast\";\n\nexport default function Example() {\n  return (\n    <>\n      <Button variant=\"secondary\" onClick={() => toast(\"Conversation archived\", { action: { label: \"Undo\", onClick: () => toast.success(\"Restored\") } })}>\n        Archive\n      </Button>\n      <Toaster />\n    </>\n  );\n}",
-        "html": "<button class=\"ml-button\" type=\"button\" data-variant=\"secondary\" data-size=\"md\"><span class=\"ml-button-label\">Archive</span></button>\n<div class=\"ml-toaster\" role=\"region\" aria-label=\"Notifications (top right)\" data-position=\"top-right\"></div>"
+        "html": "<button class=\"ml-button\" type=\"button\" data-variant=\"secondary\" data-size=\"md\"><span class=\"ml-button-label\">Archive</span></button>\n<span hidden=\"\"></span>"
       }
     ]
   },
@@ -2205,7 +2205,7 @@
   "activity-heatmap": {
     "needs": "nothing",
     "react": "import { ActivityHeatmap } from \"@/components/ui/activity-heatmap\";\n\n// Counts by day; days not listed count as zero.\nconst data = [\n  { date: \"2026-09-21\", count: 3 },\n  { date: \"2026-09-22\", count: 7 },\n  { date: \"2026-09-24\", count: 1 },\n  { date: \"2026-09-25\", count: 12 },\n];\n\nexport default function Example() {\n  return <ActivityHeatmap data={data} end=\"2026-09-26\" weeks={8} unit=\"commit\" label=\"Commits in the last eight weeks\" />;\n}",
-    "html": "<div class=\"ml-heatmap\" data-tone=\"primary\" style=\"--ml-heatmap-weeks:8\">\n  <div class=\"ml-heatmap-grid\" role=\"grid\" aria-label=\"Commits in the last eight weeks\" aria-readonly=\"true\">\n    <div class=\"ml-heatmap-months\" aria-hidden=\"true\">\n      <span class=\"ml-heatmap-month\" style=\"grid-column:2\">Aug</span>\n      <span class=\"ml-heatmap-month\" style=\"grid-column:7\">Sep</span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:2\"><span>Mon</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, August 3, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, August 10, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, August 17, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, August 24, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, August 31, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, September 7, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, September 14, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"1\" aria-label=\"3 commit on Monday, September 21, 2026\" tabindex=\"-1\" style=\"grid-column:9;grid-row:2\"></span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:3\"><span aria-hidden=\"true\" data-hidden=\"true\">Tue</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, August 4, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, August 11, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, August 18, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, August 25, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, September 1, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, September 8, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, September 15, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"2\" aria-label=\"7 commit on Tuesday, September 22, 2026\" tabindex=\"-1\" style=\"grid-column:9;grid-row:3\"></span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:4\"><span>Wed</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, August 5, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, August 12, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, August 19, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, August 26, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, September 2, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, September 9, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, September 16, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, September 23, 2026\" tabindex=\"-1\" style=\"grid-column:9;grid-row:4\"></span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:5\"><span aria-hidden=\"true\" data-hidden=\"true\">Thu</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, August 6, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, August 13, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, August 20, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, August 27, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, September 3, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, September 10, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, September 17, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"1\" aria-label=\"1 commit on Thursday, September 24, 2026\" tabindex=\"-1\" style=\"grid-column:9;grid-row:5\"></span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:6\"><span>Fri</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, August 7, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, August 14, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, August 21, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, August 28, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, September 4, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, September 11, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, September 18, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"3\" aria-label=\"12 commit on Friday, September 25, 2026\" tabindex=\"-1\" style=\"grid-column:9;grid-row:6\"></span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:7\"><span aria-hidden=\"true\" data-hidden=\"true\">Sat</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, August 8, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, August 15, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, August 22, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, August 29, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, September 5, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, September 12, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, September 19, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, September 26, 2026\" tabindex=\"0\" style=\"grid-column:9;grid-row:7\"></span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:8\"><span aria-hidden=\"true\" data-hidden=\"true\">Sun</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, August 9, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, August 16, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, August 23, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, August 30, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, September 6, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, September 13, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, September 20, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" data-outside=\"true\" aria-hidden=\"true\" style=\"grid-column:9;grid-row:8\"></span>\n    </div>\n  </div>\n  <div class=\"ml-heatmap-tooltip\" role=\"presentation\" hidden=\"\"></div>\n  <div class=\"ml-heatmap-footer\">\n    <span class=\"ml-heatmap-caption\">23 commit over 4 active days</span>\n    <span class=\"ml-heatmap-legend\" aria-hidden=\"true\">Less<span class=\"ml-heatmap-cell\" data-level=\"0\"></span><span class=\"ml-heatmap-cell\" data-level=\"1\"></span><span class=\"ml-heatmap-cell\" data-level=\"2\"></span><span class=\"ml-heatmap-cell\" data-level=\"3\"></span><span class=\"ml-heatmap-cell\" data-level=\"4\"></span>More</span>\n  </div>\n</div>",
+    "html": "<div class=\"ml-heatmap\" data-tone=\"primary\" style=\"--ml-heatmap-weeks:8\">\n  <div class=\"ml-heatmap-grid\" role=\"grid\" aria-label=\"Commits in the last eight weeks\" aria-readonly=\"true\">\n    <div class=\"ml-heatmap-months\" aria-hidden=\"true\">\n      <span class=\"ml-heatmap-month\" style=\"grid-column:2\">Aug</span>\n      <span class=\"ml-heatmap-month\" style=\"grid-column:7\">Sep</span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:2\"><span>Mon</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, August 3, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, August 10, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, August 17, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, August 24, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, August 31, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, September 7, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Monday, September 14, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:2\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"1\" aria-label=\"3 commit on Monday, September 21, 2026\" tabindex=\"-1\" style=\"grid-column:9;grid-row:2\"></span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:3\"><span aria-hidden=\"true\" data-hidden=\"true\">Tue</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, August 4, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, August 11, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, August 18, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, August 25, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, September 1, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, September 8, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Tuesday, September 15, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:3\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"2\" aria-label=\"7 commit on Tuesday, September 22, 2026\" tabindex=\"-1\" style=\"grid-column:9;grid-row:3\"></span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:4\"><span>Wed</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, August 5, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, August 12, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, August 19, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, August 26, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, September 2, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, September 9, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, September 16, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:4\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Wednesday, September 23, 2026\" tabindex=\"-1\" style=\"grid-column:9;grid-row:4\"></span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:5\"><span aria-hidden=\"true\" data-hidden=\"true\">Thu</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, August 6, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, August 13, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, August 20, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, August 27, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, September 3, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, September 10, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Thursday, September 17, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:5\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"1\" aria-label=\"1 commit on Thursday, September 24, 2026\" tabindex=\"-1\" style=\"grid-column:9;grid-row:5\"></span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:6\"><span>Fri</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, August 7, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, August 14, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, August 21, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, August 28, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, September 4, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, September 11, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Friday, September 18, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:6\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"3\" aria-label=\"12 commit on Friday, September 25, 2026\" tabindex=\"-1\" style=\"grid-column:9;grid-row:6\"></span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:7\"><span aria-hidden=\"true\" data-hidden=\"true\">Sat</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, August 8, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, August 15, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, August 22, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, August 29, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, September 5, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, September 12, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, September 19, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:7\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Saturday, September 26, 2026\" tabindex=\"0\" style=\"grid-column:9;grid-row:7\"></span>\n    </div>\n    <div class=\"ml-heatmap-row\" role=\"row\">\n      <span class=\"ml-heatmap-weekday\" role=\"rowheader\" style=\"grid-row:8\"><span aria-hidden=\"true\" data-hidden=\"true\">Sun</span></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, August 9, 2026\" tabindex=\"-1\" style=\"grid-column:2;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, August 16, 2026\" tabindex=\"-1\" style=\"grid-column:3;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, August 23, 2026\" tabindex=\"-1\" style=\"grid-column:4;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, August 30, 2026\" tabindex=\"-1\" style=\"grid-column:5;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, September 6, 2026\" tabindex=\"-1\" style=\"grid-column:6;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, September 13, 2026\" tabindex=\"-1\" style=\"grid-column:7;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" aria-label=\"0 commit on Sunday, September 20, 2026\" tabindex=\"-1\" style=\"grid-column:8;grid-row:8\"></span>\n      <span class=\"ml-heatmap-cell\" role=\"gridcell\" data-level=\"0\" data-outside=\"true\" aria-hidden=\"true\" style=\"grid-column:9;grid-row:8\"></span>\n    </div>\n  </div>\n  <div class=\"ml-heatmap-footer\">\n    <span class=\"ml-heatmap-caption\">23 commit over 4 active days</span>\n    <span class=\"ml-heatmap-legend\" aria-hidden=\"true\">Less<span class=\"ml-heatmap-cell\" data-level=\"0\"></span><span class=\"ml-heatmap-cell\" data-level=\"1\"></span><span class=\"ml-heatmap-cell\" data-level=\"2\"></span><span class=\"ml-heatmap-cell\" data-level=\"3\"></span><span class=\"ml-heatmap-cell\" data-level=\"4\"></span>More</span>\n  </div>\n</div>",
     "elements": [
       {
         "class": "ml-heatmap",

package/registry/index.json

@@ -2,7 +2,7 @@
   "$schema": "./schema/registry-index.schema.json",
   "schemaVersion": 2,
   "name": "mlola-ui",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",
@@ -177,8 +177,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19",
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21",
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -239,7 +239,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -401,7 +401,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -493,7 +493,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [],
       "variants": [],
@@ -546,7 +546,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/motion": "^1.1.19"
+        "@mlola-ui/motion": "^1.1.21"
       },
       "options": [
         {
@@ -714,8 +714,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19",
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21",
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -784,7 +784,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [],
       "variants": [],
@@ -839,7 +839,7 @@
         "modal"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [],
       "variants": [],
@@ -903,8 +903,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19",
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21",
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -937,13 +937,13 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-4qsvIzYQYC+yEhaJ6BDYX18Qdw7isKhzBOEnivnVgOY="
         },
         {
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-8iKD2nqqwTY0grZ+KDnP81CcChrQK4CDvlDvApl0fF4="
+          "integrity": "sha256-NBumGWGIapELCkncRqj4lTCctaGWVsArM11ksc5W39E="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -993,7 +993,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [],
       "variants": [],
@@ -1218,8 +1218,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19",
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21",
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -1248,7 +1248,7 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-4qsvIzYQYC+yEhaJ6BDYX18Qdw7isKhzBOEnivnVgOY="
         },
         {
           "path": "packages/components/_internal/dialog.ts",
@@ -1260,7 +1260,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-8iKD2nqqwTY0grZ+KDnP81CcChrQK4CDvlDvApl0fF4="
+          "integrity": "sha256-NBumGWGIapELCkncRqj4lTCctaGWVsArM11ksc5W39E="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -1370,7 +1370,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [],
       "variants": [],
@@ -1421,7 +1421,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21"
       },
       "options": [
         {
@@ -1453,13 +1453,13 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-4qsvIzYQYC+yEhaJ6BDYX18Qdw7isKhzBOEnivnVgOY="
         },
         {
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-8iKD2nqqwTY0grZ+KDnP81CcChrQK4CDvlDvApl0fF4="
+          "integrity": "sha256-NBumGWGIapELCkncRqj4lTCctaGWVsArM11ksc5W39E="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -1471,7 +1471,7 @@
           "path": "packages/components/popover/popover.tsx",
           "target": "{{aliases.components}}/popover.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-V4e+a/JdVJBj6j3CMWsREuhFW7ZuaNsa2LAl/BuWGxE="
+          "integrity": "sha256-LJVinhURpl3dh7DwFfC6IVxigv9b5oLwnxdrObkz8Ec="
         }
       ],
       "themeContract": {
@@ -1799,7 +1799,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21"
       },
       "options": [],
       "variants": [],
@@ -1852,8 +1852,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19",
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21",
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -1877,13 +1877,13 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-4qsvIzYQYC+yEhaJ6BDYX18Qdw7isKhzBOEnivnVgOY="
         },
         {
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-8iKD2nqqwTY0grZ+KDnP81CcChrQK4CDvlDvApl0fF4="
+          "integrity": "sha256-NBumGWGIapELCkncRqj4lTCctaGWVsArM11ksc5W39E="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -1931,8 +1931,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19",
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21",
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -1968,7 +1968,7 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-4qsvIzYQYC+yEhaJ6BDYX18Qdw7isKhzBOEnivnVgOY="
         },
         {
           "path": "packages/components/_internal/dialog.ts",
@@ -1980,7 +1980,7 @@
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-8iKD2nqqwTY0grZ+KDnP81CcChrQK4CDvlDvApl0fF4="
+          "integrity": "sha256-NBumGWGIapELCkncRqj4lTCctaGWVsArM11ksc5W39E="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -2078,7 +2078,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21"
       },
       "options": [
         {
@@ -2223,7 +2223,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21"
       },
       "options": [
         {
@@ -2355,7 +2355,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -2443,7 +2443,8 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21",
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -2461,6 +2462,18 @@
       "variants": [],
       "sizes": [],
       "files": [
+        {
+          "path": "packages/components/_internal/anchor.ts",
+          "target": "{{aliases.components}}/_internal/anchor.ts",
+          "type": "registry:ui",
+          "integrity": "sha256-4qsvIzYQYC+yEhaJ6BDYX18Qdw7isKhzBOEnivnVgOY="
+        },
+        {
+          "path": "packages/components/_internal/floating.ts",
+          "target": "{{aliases.components}}/_internal/floating.ts",
+          "type": "registry:ui",
+          "integrity": "sha256-NBumGWGIapELCkncRqj4lTCctaGWVsArM11ksc5W39E="
+        },
         {
           "path": "packages/components/_internal/react.ts",
           "target": "{{aliases.components}}/_internal/react.ts",
@@ -2471,7 +2484,7 @@
           "path": "packages/components/toast/toast.tsx",
           "target": "{{aliases.components}}/toast.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-6hKQ8wLN6uTnfVebpEeuvAxqAXDppWdjzGi33wtW8Y4="
+          "integrity": "sha256-BKZEXKOD4kUfIP3flFXJw6SHg1hvqq0A22lnknjdyRw="
         }
       ],
       "themeContract": {
@@ -2586,7 +2599,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21"
       },
       "options": [
         {
@@ -2608,7 +2621,13 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-4qsvIzYQYC+yEhaJ6BDYX18Qdw7isKhzBOEnivnVgOY="
+        },
+        {
+          "path": "packages/components/_internal/floating.ts",
+          "target": "{{aliases.components}}/_internal/floating.ts",
+          "type": "registry:ui",
+          "integrity": "sha256-NBumGWGIapELCkncRqj4lTCctaGWVsArM11ksc5W39E="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -2620,7 +2639,7 @@
           "path": "packages/components/tooltip/tooltip.tsx",
           "target": "{{aliases.components}}/tooltip.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-PYjLEr+GFmu8VrLua1d4yzk0plXYbjIKMAUlwfIn+1c="
+          "integrity": "sha256-mEmGAn5A6hJBIdPe0mkFCWWPUnip4YN8IqH7odumU+c="
         }
       ],
       "themeContract": {
@@ -2656,7 +2675,9 @@
         "isDefault": false
       },
       "registryDependencies": [],
-      "engineDependencies": {},
+      "engineDependencies": {
+        "@mlola-ui/behavior": "^1.1.21"
+      },
       "options": [
         {
           "component": "ActivityHeatmap",
@@ -2673,6 +2694,18 @@
       "variants": [],
       "sizes": [],
       "files": [
+        {
+          "path": "packages/components/_internal/anchor.ts",
+          "target": "{{aliases.components}}/_internal/anchor.ts",
+          "type": "registry:ui",
+          "integrity": "sha256-4qsvIzYQYC+yEhaJ6BDYX18Qdw7isKhzBOEnivnVgOY="
+        },
+        {
+          "path": "packages/components/_internal/floating.ts",
+          "target": "{{aliases.components}}/_internal/floating.ts",
+          "type": "registry:ui",
+          "integrity": "sha256-NBumGWGIapELCkncRqj4lTCctaGWVsArM11ksc5W39E="
+        },
         {
           "path": "packages/components/_internal/react.ts",
           "target": "{{aliases.components}}/_internal/react.ts",
@@ -2683,7 +2716,7 @@
           "path": "packages/components/activity-heatmap/activity-heatmap.tsx",
           "target": "{{aliases.components}}/activity-heatmap.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-nHXmfiLpZOH+PrqE1/fyIjevjyPD2/8hSPZRn/+cYcY="
+          "integrity": "sha256-WLJYE8lZY8Vi+K9TSW41hHP/eWGRRUkfVC+RaBTHgpw="
         },
         {
           "path": "packages/components/activity-heatmap/calendar.ts",
@@ -2725,7 +2758,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -2797,7 +2830,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -2867,7 +2900,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [],
       "variants": [],
@@ -3065,7 +3098,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21",
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -3080,6 +3114,18 @@
       "variants": [],
       "sizes": [],
       "files": [
+        {
+          "path": "packages/components/_internal/anchor.ts",
+          "target": "{{aliases.components}}/_internal/anchor.ts",
+          "type": "registry:ui",
+          "integrity": "sha256-4qsvIzYQYC+yEhaJ6BDYX18Qdw7isKhzBOEnivnVgOY="
+        },
+        {
+          "path": "packages/components/_internal/floating.ts",
+          "target": "{{aliases.components}}/_internal/floating.ts",
+          "type": "registry:ui",
+          "integrity": "sha256-NBumGWGIapELCkncRqj4lTCctaGWVsArM11ksc5W39E="
+        },
         {
           "path": "packages/components/_internal/match.ts",
           "target": "{{aliases.components}}/_internal/match.ts",
@@ -3102,7 +3148,7 @@
           "path": "packages/components/combobox/combobox.tsx",
           "target": "{{aliases.components}}/combobox.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-fiK8UpFpI5G1tZGFXiUmjMvCWcL8aW7qy9FUaMmAqhw="
+          "integrity": "sha256-WHELCyUcgphiLCg3KFKcRvmStRKglU8lQEPXNXZp+IM="
         }
       ],
       "themeContract": {
@@ -3142,7 +3188,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [],
       "variants": [],
@@ -3158,7 +3204,7 @@
           "path": "packages/components/tag-input/tag-input.tsx",
           "target": "{{aliases.components}}/tag-input.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-LnOwotLuPB06nlkdzckjDVhk03D6c/exJXJs2blZNRQ="
+          "integrity": "sha256-KAjAqXnZPsqMt2l6IY01+g7VJhOaop9CZJ795/mXsSY="
         }
       ],
       "themeContract": {
@@ -3197,7 +3243,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [],
       "variants": [],
@@ -3260,7 +3306,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -3331,7 +3377,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -3450,8 +3496,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19",
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21",
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [],
       "variants": [],
@@ -3461,13 +3507,13 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-4qsvIzYQYC+yEhaJ6BDYX18Qdw7isKhzBOEnivnVgOY="
         },
         {
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-8iKD2nqqwTY0grZ+KDnP81CcChrQK4CDvlDvApl0fF4="
+          "integrity": "sha256-NBumGWGIapELCkncRqj4lTCctaGWVsArM11ksc5W39E="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -3515,7 +3561,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21"
       },
       "options": [
         {
@@ -3547,13 +3593,13 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-4qsvIzYQYC+yEhaJ6BDYX18Qdw7isKhzBOEnivnVgOY="
         },
         {
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-8iKD2nqqwTY0grZ+KDnP81CcChrQK4CDvlDvApl0fF4="
+          "integrity": "sha256-NBumGWGIapELCkncRqj4lTCctaGWVsArM11ksc5W39E="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -3602,8 +3648,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19",
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21",
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [],
       "variants": [],
@@ -3613,13 +3659,13 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-4qsvIzYQYC+yEhaJ6BDYX18Qdw7isKhzBOEnivnVgOY="
         },
         {
           "path": "packages/components/_internal/floating.ts",
           "target": "{{aliases.components}}/_internal/floating.ts",
           "type": "registry:ui",
-          "integrity": "sha256-8iKD2nqqwTY0grZ+KDnP81CcChrQK4CDvlDvApl0fF4="
+          "integrity": "sha256-NBumGWGIapELCkncRqj4lTCctaGWVsArM11ksc5W39E="
         },
         {
           "path": "packages/components/_internal/media.ts",
@@ -3677,7 +3723,7 @@
         "sheet"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [],
       "variants": [],
@@ -3800,7 +3846,7 @@
         "button"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {
@@ -3904,8 +3950,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.19",
-        "@mlola-ui/icons": "^1.1.19"
+        "@mlola-ui/behavior": "^1.1.21",
+        "@mlola-ui/icons": "^1.1.21"
       },
       "options": [
         {

package/registry/source/packages/components/_internal/anchor.ts

@@ -1,5 +1,6 @@
 /**
  * Where a floating layer goes next to its anchor. The math is shared with the
  * framework-free runtime, so it lives in @mlola-ui/behavior/logic.
+ * `fitTooltip` stays for copied source from before 1.1.20 (deprecated).
  */
-export { fitTooltip, placeFloating, type Align, type Placement, type Rect, type Side } from "@mlola-ui/behavior/logic";
+export { fitTooltip, placeFloating, placeTooltip, type Align, type Placement, type Rect, type Side } from "@mlola-ui/behavior/logic";

package/registry/source/packages/components/_internal/floating.ts

@@ -1,45 +1,60 @@
 "use client";
 
 import * as React from "react";
-import { placeFloating, type Align, type Side } from "./anchor";
+import { placeFloating, type Align, type Placement, type Side } from "./anchor";
 import { useIsClient } from "./react";
 
 export type { Align, Side };
+type Rect = { x: number; y: number; width: number; height: number };
+type Size = { width: number; height: number };
+
+/**
+ * A place that is not an element (a caret, a text selection): its box, read
+ * on every placement, and the element it lives in, for the theme and for
+ * watching its size.
+ */
+export interface VirtualAnchor {
+  getBoundingClientRect(): DOMRect;
+  contextElement: Element;
+}
 
 /**
  * Keep a fixed-position layer next to its anchor while open: on open, on
  * scroll anywhere, on resize, and whenever either element changes size.
  * Writes styles directly, so following a scroll never re-renders React.
+ * `place` swaps the placement (a tooltip's, with its arrow's `shift`); pass
+ * one defined outside the component, so it is the same on every render.
+ * `at` is for a virtual anchor that moves without either element resizing:
+ * a new value places the layer again.
  */
 export function useFloating(
-  anchor: React.RefObject<Element | null>,
+  anchor: React.RefObject<Element | VirtualAnchor | null>,
   floating: React.RefObject<HTMLElement | null>,
   open: boolean,
-  options: { side?: Side; align?: Align; offset?: number },
+  options: { side?: Side; align?: Align; offset?: number; at?: string },
+  place: (anchor: Rect, floating: Size, viewport: Size, options: { side?: Side; align?: Align; offset?: number }) => Placement & { shift?: number } = placeFloating,
 ) {
-  const { side, align, offset } = options;
+  const { side, align, offset, at: moved } = options;
   React.useLayoutEffect(() => {
     const layer = floating.current;
     if (!open || !layer) return;
     let frame = 0;
-    // A layer on <body> takes the theme of the place it opened from, which may be a themed canvas rather than the page.
-    const themed = anchor.current?.closest<HTMLElement>("[data-theme]");
-    const moded = anchor.current?.closest<HTMLElement>("[data-mode]");
-    if (themed?.dataset.theme) layer.setAttribute("data-theme", themed.dataset.theme);
-    if (moded?.dataset.mode) layer.setAttribute("data-mode", moded.dataset.mode);
+    const context = anchor.current && "contextElement" in anchor.current ? anchor.current.contextElement : anchor.current;
+    const stopTheme = followTheme(context, layer);
     const update = () => {
       const target = anchor.current;
       if (!target || !layer.isConnected) return;
       const rect = target.getBoundingClientRect();
-      const place = placeFloating(
+      const at = place(
         { x: rect.left, y: rect.top, width: rect.width, height: rect.height },
         { width: layer.offsetWidth, height: layer.offsetHeight },
         { width: window.innerWidth, height: window.innerHeight },
         { side, align, offset },
       );
-      layer.style.setProperty("left", `${place.x}px`);
-      layer.style.setProperty("top", `${place.y}px`);
-      layer.setAttribute("data-side", place.side);
+      layer.style.setProperty("left", `${at.x}px`);
+      layer.style.setProperty("top", `${at.y}px`);
+      if (at.shift !== undefined) layer.style.setProperty("--ml-floating-shift", `${at.shift}px`);
+      layer.setAttribute("data-side", at.side);
     };
     const schedule = () => {
       cancelAnimationFrame(frame);
@@ -50,14 +65,42 @@ export function useFloating(
     window.addEventListener("resize", schedule);
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
     observer?.observe(layer);
-    if (anchor.current) observer?.observe(anchor.current);
+    if (context) observer?.observe(context);
     return () => {
+      stopTheme();
       cancelAnimationFrame(frame);
       window.removeEventListener("scroll", schedule, true);
       window.removeEventListener("resize", schedule);
       observer?.disconnect();
     };
-  }, [anchor, floating, open, side, align, offset]);
+  }, [anchor, floating, open, side, align, offset, place, moved]);
+}
+
+/**
+ * A layer on <body> takes the theme and mode of the place it belongs to,
+ * which may be a themed canvas or card rather than the page, and keeps them
+ * when that place's theme or mode changes while the layer is shown.
+ */
+function followTheme(source: Element | null | undefined, layer: HTMLElement) {
+  const themed = source?.closest<HTMLElement>("[data-theme]");
+  const moded = source?.closest<HTMLElement>("[data-mode]");
+  const copy = () => {
+    if (themed?.dataset.theme) layer.setAttribute("data-theme", themed.dataset.theme);
+    if (moded?.dataset.mode) layer.setAttribute("data-mode", moded.dataset.mode);
+  };
+  copy();
+  if (typeof MutationObserver === "undefined") return () => {};
+  const observer = new MutationObserver(copy);
+  for (const element of new Set([themed, moded])) if (element) observer.observe(element, { attributes: true, attributeFilter: ["data-theme", "data-mode"] });
+  return () => observer.disconnect();
+}
+
+/** The theme and mode of `source`'s place, on a layer rendered on <body>, while `active`. */
+export function useLayerTheme(source: React.RefObject<Element | null>, layer: React.RefObject<HTMLElement | null>, active: boolean) {
+  React.useLayoutEffect(() => {
+    if (!active || !layer.current) return;
+    return followTheme(source.current, layer.current);
+  }, [source, layer, active]);
 }
 
 /**

package/registry/source/packages/components/activity-heatmap/activity-heatmap.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import * as React from "react";
+import { createPortal } from "react-dom";
+import { useFloating, usePortalNode } from "../_internal/floating";
 import { cx } from "../_internal/react";
 import { buildCalendar, type DayCount, type HeatCell } from "./calendar";
 
@@ -68,18 +70,13 @@ export function ActivityHeatmap({
   const cells = React.useRef(new Map<string, HTMLElement>());
   const key = (week: number, day: number) => `${week}:${day}`;
 
-  // Place the tooltip over its cell, kept inside the component's edges.
+  // The tooltip is a layer on <body> above its cell, so no card or panel around the heatmap covers or cuts it.
+  const portal = usePortalNode();
+  const cell = React.useRef<HTMLElement | null>(null);
   React.useLayoutEffect(() => {
-    if (!shown || !root.current || !tip.current) return;
-    const cell = cells.current.get(key(...shown));
-    if (!cell) return;
-    const box = root.current.getBoundingClientRect();
-    const rect = cell.getBoundingClientRect();
-    const half = tip.current.offsetWidth / 2;
-    const center = rect.left - box.left + rect.width / 2;
-    tip.current.style.left = `${Math.min(Math.max(center, half), box.width - half)}px`;
-    tip.current.style.top = `${rect.top - box.top}px`;
+    cell.current = shown ? (cells.current.get(key(...shown)) ?? null) : null;
   }, [shown]);
+  useFloating(cell, tip, Boolean(shown && portal), { side: "top", align: "center", offset: 8, at: shown ? key(...shown) : "" });
 
   const move = (week: number, day: number) => {
     const target = calendar.weeks[week]?.[day];
@@ -177,14 +174,15 @@ export function ActivityHeatmap({
         })}
       </div>
 
-      <div ref={tip} className="ml-heatmap-tooltip" role="presentation" hidden={!active}>
-        {active ? (
-          <>
-            <strong>{active.count ? count(active.count) : `No ${unit}`}</strong>
-            <span>{shortDate.format(new Date(`${active.date}T00:00:00Z`))}</span>
-          </>
-        ) : null}
-      </div>
+      {active && portal
+        ? createPortal(
+            <div ref={tip} className="ml-heatmap-tooltip" data-ml-portal="" role="presentation">
+              <strong>{active.count ? count(active.count) : `No ${unit}`}</strong>
+              <span>{shortDate.format(new Date(`${active.date}T00:00:00Z`))}</span>
+            </div>,
+            portal,
+          )
+        : null}
 
       {showLegend || caption !== null ? (
         <div className="ml-heatmap-footer">

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

@@ -1,8 +1,10 @@
 "use client";
 
 import * as React from "react";
+import { createPortal } from "react-dom";
 import { IconCheck, IconChevronDown, IconPlus, IconX } from "@mlola-ui/icons";
 import { Field, fieldDescription, type FormControlProps } from "../input/input";
+import { useFloating, usePortalNode } from "../_internal/floating";
 import { cx } from "../_internal/react";
 import { matchCommand } from "../_internal/match";
 import { revealIn } from "../_internal/scroll";
@@ -40,6 +42,8 @@ export interface ComboboxListProps {
   /** A last row that creates what was typed. */
   create?: { label: string; onCreate: () => void } | null;
   empty?: React.ReactNode;
+  /** The field it opens from: it is placed beside it and at least as wide. Defaults to the element it is rendered in. */
+  anchor?: React.RefObject<HTMLElement | null>;
   side: "top" | "bottom";
   label?: string;
   grouped?: boolean;
@@ -47,15 +51,31 @@ export interface ComboboxListProps {
 
 /**
  * The popup list a combobox or tag input shows under its field: grouped,
- * highlighted by pointer or arrows, never taking focus from the input.
+ * highlighted by pointer or arrows, never taking focus from the input. It
+ * opens on <body>, placed beside the field, so no card, panel or scroll
+ * area around the field can cover or cut it.
  */
-export function ComboboxList({ id, options, active, onActiveChange, onPick, isSelected, create, empty, side, label, grouped = true }: ComboboxListProps) {
+export function ComboboxList({ id, options, active, onActiveChange, onPick, isSelected, create, empty, anchor, side, label, grouped = true }: ComboboxListProps) {
   const list = React.useRef<HTMLUListElement>(null);
+  const layer = React.useRef<HTMLDivElement>(null);
+  const spot = React.useRef<HTMLSpanElement>(null);
+  const field = React.useRef<HTMLElement | null>(null);
+  const portal = usePortalNode();
+  // Exactly as wide as the field, as it was when it opened inside it, and never taller than the window's room on its side.
+  React.useLayoutEffect(() => {
+    field.current = anchor?.current ?? spot.current?.parentElement ?? null;
+    if (!field.current || !layer.current) return;
+    const rect = field.current.getBoundingClientRect();
+    const room = side === "top" ? rect.top - 12 : window.innerHeight - rect.bottom - 12;
+    layer.current.style.width = `${rect.width}px`;
+    layer.current.style.setProperty("--ml-combobox-room", `${Math.max(120, Math.floor(room))}px`);
+  }, [anchor, side, portal]);
+  useFloating(field, layer, Boolean(portal), { side, align: "start", offset: 6 });
   React.useEffect(() => {
     revealIn(list.current, list.current?.querySelector<HTMLElement>("[data-highlighted]") ?? null);
   }, [active, options]);
-  return (
-    <div className="ml-combobox-popover" data-side={side} onMouseDown={(event) => event.preventDefault()}>
+  const popup = (
+    <div ref={layer} data-ml-portal="" className="ml-combobox-popover" data-side={side} onMouseDown={(event) => event.preventDefault()}>
       <ul ref={list} id={id} role="listbox" aria-label={label} className="ml-combobox-list">
         {options.map((option, index) => {
           const heading = grouped && option.group && option.group !== options[index - 1]?.group ? option.group : null;
@@ -112,38 +132,25 @@ export function ComboboxList({ id, options, active, onActiveChange, onPick, isSe
       </ul>
     </div>
   );
-}
-
-/** The visible band a list can open into: the viewport, cut down by any ancestor that clips its content. */
-function visibleBand(element: HTMLElement) {
-  let top = 0;
-  let bottom = window.innerHeight;
-  for (let node = element.parentElement; node && node !== document.body; node = node.parentElement) {
-    const style = getComputedStyle(node);
-    if (/(hidden|clip|auto|scroll)/.test(style.overflowY) || /(hidden|clip|auto|scroll)/.test(style.overflow)) {
-      const rect = node.getBoundingClientRect();
-      top = Math.max(top, rect.top);
-      bottom = Math.min(bottom, rect.bottom);
-    }
-  }
-  return { top, bottom };
+  return (
+    <>
+      <span ref={spot} hidden />
+      {portal ? createPortal(popup, portal) : null}
+    </>
+  );
 }
 
 /**
- * Open the list below the field unless there is too little room there and
- * more above, counting only space that is actually visible (a card that clips
- * its content counts as an edge). The room found is left on the field as
- * --ml-combobox-room, so the list never grows past what can be seen.
+ * Open the list below the field unless there is too little room in the
+ * window there and more above. The list is a layer on <body>, so no
+ * container clips it; only the window's edges count.
  */
 export function sideFor(element: HTMLElement | null, room = 280): "top" | "bottom" {
   if (!element) return "bottom";
   const rect = element.getBoundingClientRect();
-  const band = visibleBand(element);
-  const below = band.bottom - rect.bottom - 12;
-  const above = rect.top - band.top - 12;
-  const side = below < room && above > below ? "top" : "bottom";
-  element.style.setProperty("--ml-combobox-room", `${Math.max(120, Math.floor(side === "top" ? above : below))}px`);
-  return side;
+  const below = window.innerHeight - rect.bottom - 12;
+  const above = rect.top - 12;
+  return below < room && above > below ? "top" : "bottom";
 }
 
 export interface ComboboxProps extends FormControlProps {
@@ -340,6 +347,7 @@ export const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(functi
             isSelected={(option) => option.value === current}
             create={create}
             empty={emptyMessage}
+            anchor={control}
             side={side}
             label={typeof label === "string" ? label : undefined}
             grouped={!typed.current}

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

@@ -32,6 +32,10 @@ export function Popover({ trigger, children, label, side = "bottom", align = "st
   const layer = React.useRef<HTMLDivElement>(null);
   const portal = usePortalNode();
   const id = React.useId();
+  // A press or focus inside it, or inside a layer opened from inside it (a Select's or a Combobox's list on
+  // <body>), reaches its React handlers first; only what never passes through it closes it.
+  const pressedInside = React.useRef(false);
+  const focusedInside = React.useRef(false);
   useFloating(anchor, layer, isOpen && Boolean(portal), { side, align });
 
   const close = React.useCallback(
@@ -50,7 +54,9 @@ export function Popover({ trigger, children, label, side = "bottom", align = "st
     });
     const onPointerDown = (event: PointerEvent) => {
       const target = event.target as Node;
-      if (!layer.current?.contains(target) && !anchor.current?.contains(target)) close(false);
+      const inside = pressedInside.current;
+      pressedInside.current = false;
+      if (!inside && !layer.current?.contains(target) && !anchor.current?.contains(target)) close(false);
     };
     // Heard before a dialog around it (capture), and marked as used, so one Escape closes one layer.
     const onKeyDown = (event: KeyboardEvent) => {
@@ -94,9 +100,20 @@ export function Popover({ trigger, children, label, side = "bottom", align = "st
               tabIndex={-1}
               data-state="open"
               className={cx("ml-popover", className)}
+              onPointerDown={() => {
+                pressedInside.current = true;
+              }}
+              onFocus={() => {
+                focusedInside.current = true;
+              }}
               onBlur={(event) => {
                 const next = event.relatedTarget as Node | null;
-                if (next && !layer.current?.contains(next) && !anchor.current?.contains(next)) close(false);
+                focusedInside.current = false;
+                if (!next || anchor.current?.contains(next)) return;
+                // Focus lands before this runs: moving into a layer opened from inside it counts as inside.
+                requestAnimationFrame(() => {
+                  if (!focusedInside.current && !layer.current?.contains(document.activeElement)) close(false);
+                });
               }}
             >
               {children}

package/registry/source/packages/components/tag-input/tag-input.tsx

@@ -265,6 +265,7 @@ export const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(functi
               input.current?.focus();
             }}
             empty={restrict ? "No matching options" : `Press Enter to add “${text.trim()}”`}
+            anchor={control}
             side={side}
             grouped={false}
           />

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

@@ -1,7 +1,9 @@
 "use client";
 
 import * as React from "react";
+import { createPortal } from "react-dom";
 import { IconCircleCheck, IconCircleX, IconInfo, IconTriangleAlert, IconX } from "@mlola-ui/icons";
+import { useLayerTheme, usePortalNode } from "../_internal/floating";
 import { cx } from "../_internal/react";
 import { Spinner } from "../spinner/spinner";
 
@@ -288,6 +290,9 @@ interface ToasterProps {
  * step away from it. Hovering or focusing the stack pauses every timer, so
  * nothing disappears while it is being read.
  */
+/** The offsets an app may set on a place around the Toaster; `--ml-toaster-offset` is the Toaster's own. */
+const TOASTER_OFFSETS = ["--ml-toaster-offset-top", "--ml-toaster-offset-bottom"];
+
 function Toaster({ position = "top-right", label, max = 3, className }: ToasterProps) {
   const [toasts, setToasts] = React.useState(() => store.filter((item) => item.position === position));
   const [hovered, setHovered] = React.useState(false);
@@ -305,9 +310,27 @@ function Toaster({ position = "top-right", label, max = 3, className }: ToasterP
 
   const shown = toasts.slice(-Math.max(1, max));
   const ordered = position.startsWith("top") ? [...shown].reverse() : shown;
-
-  return (
+  // The region lives on <body>, fixed to the window even when the Toaster is placed inside a card whose
+  // glass (a backdrop filter) would otherwise hold it; a mark where it was placed carries that place's theme.
+  const place = React.useRef<HTMLSpanElement>(null);
+  const region = React.useRef<HTMLDivElement>(null);
+  const portal = usePortalNode();
+  useLayerTheme(place, region, Boolean(portal));
+  // Offsets an app sets around the Toaster (below a sticky header, say) reach the region on <body> too.
+  React.useLayoutEffect(() => {
+    if (!place.current || !region.current) return;
+    const around = getComputedStyle(place.current);
+    for (const name of TOASTER_OFFSETS) {
+      const value = around.getPropertyValue(name).trim();
+      if (value) region.current.style.setProperty(name, value);
+      else region.current.style.removeProperty(name);
+    }
+  });
+
+  const layer = (
     <div
+      ref={region}
+      data-ml-portal=""
       role="region"
       aria-label={label ?? `Notifications (${position.replace("-", " ")})`}
       data-position={position}
@@ -324,6 +347,12 @@ function Toaster({ position = "top-right", label, max = 3, className }: ToasterP
       ))}
     </div>
   );
+  return (
+    <>
+      <span ref={place} hidden />
+      {portal ? createPortal(layer, portal) : null}
+    </>
+  );
 }
 
 export { toast, dismissToast, Toaster };

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

@@ -1,7 +1,9 @@
 "use client";
 
 import * as React from "react";
-import { fitTooltip, type Side } from "../_internal/anchor";
+import { createPortal } from "react-dom";
+import { placeTooltip } from "../_internal/anchor";
+import { useFloating, usePortalNode } from "../_internal/floating";
 import { cx, useLatest } from "../_internal/react";
 
 export type TooltipPlacement = "top" | "bottom" | "left" | "right";
@@ -13,14 +15,24 @@ interface TooltipProps {
   className?: string;
 }
 
+/**
+ * A short description of its trigger, shown on hover and focus. It opens on
+ * <body>, placed beside the trigger (flipped or slid to stay on screen), so
+ * no panel, card or scroll area around the trigger can cover or cut it.
+ */
 function Tooltip({ content, placement = "top", delay = 200, children, className }: TooltipProps) {
   const [open, setOpen] = React.useState(false);
-  // Where it actually opens: the asked side, flipped or slid to stay on screen.
-  const [fit, setFit] = React.useState<{ side: Side; shift: number }>({ side: placement, shift: 0 });
   const root = React.useRef<HTMLSpanElement>(null);
+  const anchor = React.useRef<Element | null>(null);
   const tip = React.useRef<HTMLSpanElement>(null);
   const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const portal = usePortalNode();
   const id = React.useId();
+  // The trigger is the wrapper's first child; measured from it, not the wrapper.
+  React.useLayoutEffect(() => {
+    anchor.current = root.current?.firstElementChild ?? root.current;
+  });
+  useFloating(anchor, tip, open && Boolean(portal), { side: placement, offset: 8 }, placeTooltip);
   const clear = () => {
     if (timer.current) clearTimeout(timer.current);
     timer.current = null;
@@ -35,17 +47,6 @@ function Tooltip({ content, placement = "top", delay = 200, children, className
   };
   const hideRef = useLatest(hide);
   React.useEffect(() => clear, []);
-  React.useLayoutEffect(() => {
-    const anchor = root.current?.firstElementChild ?? root.current;
-    if (!open || !anchor || !tip.current) {
-      setFit({ side: placement, shift: 0 });
-      return;
-    }
-    const a = anchor.getBoundingClientRect();
-    // Layout size, not the painted box: the pop-in animation starts scaled down.
-    const t = { width: tip.current.offsetWidth, height: tip.current.offsetHeight };
-    setFit(fitTooltip({ x: a.left, y: a.top, width: a.width, height: a.height }, t, { width: document.documentElement.clientWidth, height: window.innerHeight }, placement));
-  }, [open, placement]);
   React.useEffect(() => {
     if (!open) return;
     // Heard before a dialog around it (capture), and marked as used, so one Escape closes one layer.
@@ -77,20 +78,15 @@ function Tooltip({ content, placement = "top", delay = 200, children, className
   return (
     <span ref={root} className="ml-tooltip-root" onMouseEnter={clear} onMouseLeave={hide}>
       {trigger}
-      {open ? (
-        <span
-          ref={tip}
-          id={id}
-          role="tooltip"
-          data-side={fit.side}
-          data-state="open"
-          className={cx("ml-tooltip", className)}
-          style={{ "--ml-tooltip-shift": `${fit.shift}px` } as React.CSSProperties}
-        >
-          {content}
-          <span aria-hidden="true" className="ml-tooltip-arrow" />
-        </span>
-      ) : null}
+      {open && portal
+        ? createPortal(
+            <span ref={tip} id={id} role="tooltip" data-ml-portal="" data-side={placement} data-state="open" className={cx("ml-tooltip", className)}>
+              {content}
+              <span aria-hidden="true" className="ml-tooltip-arrow" />
+            </span>,
+            portal,
+          )
+        : null}
     </span>
   );
 }

package/registry/source-manifest.json

@@ -1,15 +1,15 @@
 {
-  "packages/components/_internal/anchor.ts": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8=",
+  "packages/components/_internal/anchor.ts": "sha256-4qsvIzYQYC+yEhaJ6BDYX18Qdw7isKhzBOEnivnVgOY=",
   "packages/components/_internal/clipboard.ts": "sha256-0y5p88CTXWuOrUYlC5J4XP1VCrOwkx9jYWVHmD2LouQ=",
   "packages/components/_internal/dialog.ts": "sha256-HouQjNfiorcAUoc7DFu78QLuhNDgvUuDOxjWZYYd62E=",
   "packages/components/_internal/dom.ts": "sha256-TJp94MipbXHonH/PC7FFHu5pnAqcoxzLocksWLsTAsc=",
-  "packages/components/_internal/floating.ts": "sha256-8iKD2nqqwTY0grZ+KDnP81CcChrQK4CDvlDvApl0fF4=",
+  "packages/components/_internal/floating.ts": "sha256-NBumGWGIapELCkncRqj4lTCctaGWVsArM11ksc5W39E=",
   "packages/components/_internal/match.ts": "sha256-3tUYob6xmD2nLerh634E3R5iPbzMeNBzdDynsDFjj28=",
   "packages/components/_internal/media.ts": "sha256-ziH0YZtu8y3X7OcDI6lYxpvGJCi9zQXq4dynG8n8U9c=",
   "packages/components/_internal/react.ts": "sha256-INfds1J2f1MLpN6kBXz0GkfBEMIiRlhv0DXX455qAZo=",
   "packages/components/_internal/scroll.ts": "sha256-/YxhPPJa6Iax4q5eEs8dmpQp634TbvB+421MphEyscQ=",
   "packages/components/accordion/accordion.tsx": "sha256-NodsdXiIL5VE7C2m3C0IC854lNUOIWgQQmmSKr6v59E=",
-  "packages/components/activity-heatmap/activity-heatmap.tsx": "sha256-nHXmfiLpZOH+PrqE1/fyIjevjyPD2/8hSPZRn/+cYcY=",
+  "packages/components/activity-heatmap/activity-heatmap.tsx": "sha256-WLJYE8lZY8Vi+K9TSW41hHP/eWGRRUkfVC+RaBTHgpw=",
   "packages/components/activity-heatmap/calendar.ts": "sha256-NB+AjXY5Xc+KzR8MMTRBgZxdzOeoHhkW0KQOW7WJPuQ=",
   "packages/components/alert/alert.tsx": "sha256-vQ0pvYOpLmafcglpwub6aHLjDPSP4N8qoTCwjo5aEi8=",
   "packages/components/app-shell/app-shell.tsx": "sha256-slT7UclIZtl2xu7MALrR/i52BHGOR05eCwFTD1mh9AI=",
@@ -24,7 +24,7 @@
   "packages/components/checkbox/checkbox.tsx": "sha256-hz4YbGwOxv/aJpJHrLXR4MKSWJGyjzoJEIGvdhyML9M=",
   "packages/components/color-picker/color-picker.tsx": "sha256-/UyEbxqknsHheX444Imc3WphyixZbvj8hGL+r+zyG5w=",
   "packages/components/color-picker/color.ts": "sha256-YqSgYjzn7XfPWAHuyzbwOhbg/ScaSfB7V73e9w+OjJs=",
-  "packages/components/combobox/combobox.tsx": "sha256-fiK8UpFpI5G1tZGFXiUmjMvCWcL8aW7qy9FUaMmAqhw=",
+  "packages/components/combobox/combobox.tsx": "sha256-WHELCyUcgphiLCg3KFKcRvmStRKglU8lQEPXNXZp+IM=",
   "packages/components/command-menu/command-menu.tsx": "sha256-wZnlj17zVlcfp5I08ziggHtchfdqjlvNl+MyiP+Rdbo=",
   "packages/components/context-menu/context-menu.tsx": "sha256-OGaKzthZJGaV5T+4sRWYecA64wEEg2KImKnIzMMg1i4=",
   "packages/components/copy-button/copy-button.tsx": "sha256-6fvfifoiDOtW+WxKWon4SGEn3THtERuCX2hqGSZDtVM=",
@@ -41,7 +41,7 @@
   "packages/components/otp-input/otp-input.tsx": "sha256-0KeyDLCC27/GqOocMWXggJ255PCEpCOCcINAcabksSk=",
   "packages/components/pagination/pagination.tsx": "sha256-FBwk8tq4JcsK2D0dlWEYiDSRx3owgBmGzEIlVRaNBoE=",
   "packages/components/password-input/password-input.tsx": "sha256-oY//vTILhUicJyfAWZrSUTl8WWsf4P2S1Bh0x4OxwLs=",
-  "packages/components/popover/popover.tsx": "sha256-V4e+a/JdVJBj6j3CMWsREuhFW7ZuaNsa2LAl/BuWGxE=",
+  "packages/components/popover/popover.tsx": "sha256-LJVinhURpl3dh7DwFfC6IVxigv9b5oLwnxdrObkz8Ec=",
   "packages/components/priority-icon/labels.ts": "sha256-zhmJIb7/gS16wU+xCJ7hkReBi9q5RI3SMwdjkJvvvKU=",
   "packages/components/priority-icon/priority-icon.tsx": "sha256-3D6hFRpht3YuWouLhakE2DFdldavmJx0B/povEDwrtQ=",
   "packages/components/progress/progress.tsx": "sha256-oDxj1Ccl1pKV4+e6A7aaJL1FThW8qs9r4Gb0hEmExeM=",
@@ -59,14 +59,14 @@
   "packages/components/stepper/stepper.tsx": "sha256-uI/dRmkbijlixHiGUceWcpaDzpEixrzQ1UTmoPbGZAY=",
   "packages/components/table/table.tsx": "sha256-xJlWzCH76Lrgg/HrlnVTHkG5dfCkbzjWXEdTVG5Jk4w=",
   "packages/components/tabs/tabs.tsx": "sha256-Wp0WhVFPwaX3aIGXNJBbSGNWPMT6X/Sbl+kE+zZSyvk=",
-  "packages/components/tag-input/tag-input.tsx": "sha256-LnOwotLuPB06nlkdzckjDVhk03D6c/exJXJs2blZNRQ=",
+  "packages/components/tag-input/tag-input.tsx": "sha256-KAjAqXnZPsqMt2l6IY01+g7VJhOaop9CZJ795/mXsSY=",
   "packages/components/textarea/textarea.tsx": "sha256-zculOGfrK4LVcWne3+jS+7qKcfJPM/25vJdm7AXOJfk=",
   "packages/components/time-picker/time-picker.tsx": "sha256-HquGogkQB7YGs/1iTSqftSJ310hgXqKdAc+fU1RtQ5Y=",
   "packages/components/time-picker/times.ts": "sha256-V/4uqFZPn9gVnyx8cB9vwp/RocmTYaPmLxjfy8DPQOI=",
   "packages/components/timeline/timeline.tsx": "sha256-nVg7lBcAUAzqEb0YrHagJXSaHE2aWWE9bUbQMWQY6PU=",
-  "packages/components/toast/toast.tsx": "sha256-6hKQ8wLN6uTnfVebpEeuvAxqAXDppWdjzGi33wtW8Y4=",
+  "packages/components/toast/toast.tsx": "sha256-BKZEXKOD4kUfIP3flFXJw6SHg1hvqq0A22lnknjdyRw=",
   "packages/components/toggle/toggle.tsx": "sha256-8qPHeSliHNdzQS7OLJ47BrvRR75MYyUGJlK4s21XS/U=",
-  "packages/components/tooltip/tooltip.tsx": "sha256-PYjLEr+GFmu8VrLua1d4yzk0plXYbjIKMAUlwfIn+1c=",
+  "packages/components/tooltip/tooltip.tsx": "sha256-mEmGAn5A6hJBIdPe0mkFCWWPUnip4YN8IqH7odumU+c=",
   "packages/components/tour/tour.tsx": "sha256-b2XJokzSio2N9MFDbAbXn6w2f7diJb1KWedSCycRMmE=",
   "packages/components/virtual-list/virtual-list.tsx": "sha256-oA8xFCwUgskmM+symA4gZxFqSyBCpeKfyM5zHyJaYaQ=",
   "packages/components/virtual-list/virtual.ts": "sha256-PyDIj3C2Vwb1i4ZssxSlYjgKmZPBIFLZFNq8YCW2Z78="