@mlola-ui/registry 1.0.13 → 1.1.0

package/generated/examples.json

@@ -276,6 +276,9 @@
             "primary",
             "secondary",
             "subtle"
+          ],
+          "data-width": [
+            "full"
           ]
         }
       },
@@ -628,7 +631,7 @@
   "dropzone": {
     "needs": "script",
     "react": "\"use client\";\n\nimport * as React from \"react\";\nimport { Dropzone } from \"@/components/ui/dropzone\";\n\nexport default function Example() {\n  const [files, setFiles] = React.useState<File[]>([]);\n  return (\n    <Dropzone\n      label=\"Attachments\"\n      hint={files.length ? `${files.length} selected` : \"PNG or PDF, up to 10 MB\"}\n      accept=\"image/png,application/pdf\"\n      maxSize={10 * 1024 * 1024}\n      multiple\n      onFiles={setFiles}\n    />\n  );\n}",
-    "html": "<div class=\"ml-dropzone-root\">\n  <div class=\"ml-input-field\">\n    <label class=\"ml-input-label\" for=\"dropzone-1\">Attachments</label>\n    <div class=\"ml-dropzone\" id=\"dropzone-1\" role=\"button\" tabindex=\"0\" aria-label=\"Attachments: drop files here, or press Enter to choose\" aria-describedby=\"dropzone-1-hint\">\n      <span class=\"ml-dropzone-icon\" aria-hidden=\"true\"><svg class=\"mlola-glyph\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M12 15V3m-5 5 5-5 5 5M5 21h14\" pathLength=\"1\"></path></svg></span>\n      <span class=\"ml-dropzone-title\">Drop files here, or choose</span>\n      <span class=\"ml-dropzone-rules\">PNG, PDF · up to 10.0 MB</span>\n      <input type=\"file\" hidden=\"\" accept=\"image/png,application/pdf\" multiple=\"\"/>\n    </div>\n    <p class=\"ml-input-hint\" id=\"dropzone-1-hint\">PNG or PDF, up to 10 MB</p>\n  </div>\n</div>",
+    "html": "<div class=\"ml-dropzone-root\">\n  <div class=\"ml-input-field\">\n    <label class=\"ml-input-label\" id=\"dropzone-1-label\" for=\"dropzone-1\">Attachments</label>\n    <div class=\"ml-dropzone\" id=\"dropzone-1\" role=\"button\" tabindex=\"0\" aria-label=\"Attachments: drop files here, or press Enter to choose\" aria-describedby=\"dropzone-1-hint\">\n      <span class=\"ml-dropzone-icon\" aria-hidden=\"true\"><svg class=\"mlola-glyph\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M12 15V3m-5 5 5-5 5 5M5 21h14\" pathLength=\"1\"></path></svg></span>\n      <span class=\"ml-dropzone-title\">Drop files here, or choose</span>\n      <span class=\"ml-dropzone-rules\">PNG, PDF · up to 10.0 MB</span>\n      <input type=\"file\" hidden=\"\" accept=\"image/png,application/pdf\" multiple=\"\"/>\n    </div>\n    <p class=\"ml-input-hint\" id=\"dropzone-1-hint\">PNG or PDF, up to 10 MB</p>\n  </div>\n</div>",
     "elements": [
       {
         "class": "ml-dropzone-root",
@@ -731,7 +734,7 @@
   "input": {
     "needs": "nothing",
     "react": "import { Input } from \"@/components/ui/input\";\n\nexport default function Example() {\n  return <Input label=\"Email\" type=\"email\" placeholder=\"you@company.com\" hint=\"We never share it.\" />;\n}",
-    "html": "<div class=\"ml-input-field\">\n  <label class=\"ml-input-label\" for=\"input-1\">Email</label>\n  <div class=\"ml-input-control\">\n    <input class=\"ml-input\" id=\"input-1\" aria-describedby=\"input-1-hint\" data-variant=\"default\" data-size=\"md\" type=\"email\" placeholder=\"you@company.com\"/>\n  </div>\n  <p class=\"ml-input-hint\" id=\"input-1-hint\">We never share it.</p>\n</div>",
+    "html": "<div class=\"ml-input-field\">\n  <label class=\"ml-input-label\" id=\"input-1-label\" for=\"input-1\">Email</label>\n  <div class=\"ml-input-control\">\n    <input class=\"ml-input\" id=\"input-1\" aria-describedby=\"input-1-hint\" data-variant=\"default\" data-size=\"md\" type=\"email\" placeholder=\"you@company.com\"/>\n  </div>\n  <p class=\"ml-input-hint\" id=\"input-1-hint\">We never share it.</p>\n</div>",
     "elements": [
       {
         "class": "ml-input-field",
@@ -745,6 +748,7 @@
           "aria-invalid": [
             "true"
           ],
+          "data-invalid": [],
           "data-size": [
             "lg",
             "sm"
@@ -794,7 +798,7 @@
         "title": "With an error",
         "description": "The message names the fix, and is tied to the field so a screen reader reads it with the label.",
         "react": "import { Input } from \"@/components/ui/input\";\n\nexport default function Example() {\n  return <Input label=\"Work email\" type=\"email\" defaultValue=\"lena@\" error=\"Enter the whole address, like lena@company.com.\" required />;\n}",
-        "html": "<div class=\"ml-input-field\" data-invalid=\"\">\n  <label class=\"ml-input-label\" for=\"input-1\">Work email<span class=\"ml-required-mark\" aria-hidden=\"true\">*</span></label>\n  <div class=\"ml-input-control\">\n    <input class=\"ml-input\" id=\"input-1\" required=\"\" aria-invalid=\"true\" aria-describedby=\"input-1-error\" data-variant=\"default\" data-size=\"md\" type=\"email\" value=\"lena@\"/>\n  </div>\n  <p class=\"ml-input-error\" id=\"input-1-error\" role=\"alert\">Enter the whole address, like lena@company.com.</p>\n</div>"
+        "html": "<div class=\"ml-input-field\" data-invalid=\"\">\n  <label class=\"ml-input-label\" id=\"input-1-label\" for=\"input-1\">Work email<span class=\"ml-required-mark\" aria-hidden=\"true\">*</span></label>\n  <div class=\"ml-input-control\">\n    <input class=\"ml-input\" id=\"input-1\" required=\"\" aria-invalid=\"true\" aria-describedby=\"input-1-error\" data-variant=\"default\" data-size=\"md\" type=\"email\" value=\"lena@\"/>\n  </div>\n  <p class=\"ml-input-error\" id=\"input-1-error\" role=\"alert\">Enter the whole address, like lena@company.com.</p>\n</div>"
       },
       {
         "slug": "affixes",
@@ -802,7 +806,7 @@
         "title": "With an icon or a prefix",
         "description": "The text starts after whatever sits beside it, however wide it is.",
         "react": "import { IconSearch } from \"@mlola-ui/icons\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Example() {\n  return (\n    <div className=\"ml-stack\">\n      <Input label=\"Search\" type=\"search\" placeholder=\"Search projects\" leading={<IconSearch size=\"1em\" />} />\n      <Input label=\"Website\" leading=\"https://\" placeholder=\"company.com\" />\n    </div>\n  );\n}",
-        "html": "<div class=\"ml-stack\">\n  <div class=\"ml-input-field\">\n    <label class=\"ml-input-label\" for=\"input-1\">Search</label>\n    <div class=\"ml-input-control\" data-leading=\"\">\n      <span class=\"ml-input-leading\" aria-hidden=\"true\"><svg class=\"mlola-glyph\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><circle cx=\"11\" cy=\"11\" r=\"7.5\" pathLength=\"1\"></circle><path d=\"m21 21-4.35-4.35\" pathLength=\"1\"></path></svg></span>\n      <input class=\"ml-input\" id=\"input-1\" data-variant=\"default\" data-size=\"md\" type=\"search\" placeholder=\"Search projects\"/>\n    </div>\n  </div>\n  <div class=\"ml-input-field\">\n    <label class=\"ml-input-label\" for=\"input-2\">Website</label>\n    <div class=\"ml-input-control\" data-leading=\"\">\n      <span class=\"ml-input-leading\" aria-hidden=\"true\">https://</span>\n      <input class=\"ml-input\" id=\"input-2\" data-variant=\"default\" data-size=\"md\" placeholder=\"company.com\"/>\n    </div>\n  </div>\n</div>"
+        "html": "<div class=\"ml-stack\">\n  <div class=\"ml-input-field\">\n    <label class=\"ml-input-label\" id=\"input-1-label\" for=\"input-1\">Search</label>\n    <div class=\"ml-input-control\" data-leading=\"\">\n      <span class=\"ml-input-leading\" aria-hidden=\"true\"><svg class=\"mlola-glyph\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><circle cx=\"11\" cy=\"11\" r=\"7.5\" pathLength=\"1\"></circle><path d=\"m21 21-4.35-4.35\" pathLength=\"1\"></path></svg></span>\n      <input class=\"ml-input\" id=\"input-1\" data-variant=\"default\" data-size=\"md\" type=\"search\" placeholder=\"Search projects\"/>\n    </div>\n  </div>\n  <div class=\"ml-input-field\">\n    <label class=\"ml-input-label\" id=\"input-2-label\" for=\"input-2\">Website</label>\n    <div class=\"ml-input-control\" data-leading=\"\">\n      <span class=\"ml-input-leading\" aria-hidden=\"true\">https://</span>\n      <input class=\"ml-input\" id=\"input-2\" data-variant=\"default\" data-size=\"md\" placeholder=\"company.com\"/>\n    </div>\n  </div>\n</div>"
       }
     ]
   },
@@ -823,7 +827,7 @@
   },
   "modal": {
     "needs": "behavior",
-    "react": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Modal, ModalBody, ModalFooter, ModalHeader } from \"@/components/ui/modal\";\n\nexport default function Example() {\n  const [open, setOpen] = React.useState(false);\n  const close = () => setOpen(false);\n  return (\n    <>\n      <Button variant=\"danger\" onClick={() => setOpen(true)}>Delete project</Button>\n      <Modal open={open} onClose={close} size=\"sm\" role=\"alertdialog\" label=\"Delete project\">\n        <ModalHeader title=\"Delete project\" onClose={close} />\n        <ModalBody>This removes the project and every deployment attached to it.</ModalBody>\n        <ModalFooter>\n          <Button variant=\"secondary\" onClick={close}>Keep it</Button>\n          <Button variant=\"danger\" onClick={close}>Delete</Button>\n        </ModalFooter>\n      </Modal>\n    </>\n  );\n}",
+    "react": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Modal, ModalBody, ModalFooter, ModalHeader } from \"@/components/ui/modal\";\n\nexport default function Example() {\n  const [open, setOpen] = React.useState(false);\n  const close = () => setOpen(false);\n  return (\n    <>\n      <Button variant=\"danger\" onClick={() => setOpen(true)}>Delete project</Button>\n      <Modal open={open} onClose={close} size=\"sm\" role=\"alertdialog\">\n        <ModalHeader title=\"Delete project\" onClose={close} />\n        <ModalBody>This removes the project and every deployment attached to it.</ModalBody>\n        <ModalFooter>\n          <Button variant=\"secondary\" onClick={close}>Keep it</Button>\n          <Button variant=\"danger\" onClick={close}>Delete</Button>\n        </ModalFooter>\n      </Modal>\n    </>\n  );\n}",
     "html": "<button class=\"ml-button\" type=\"button\" data-variant=\"danger\" data-size=\"md\"><span class=\"ml-button-label\">Delete project</span></button>",
     "behavior": {
       "name": "modal",
@@ -872,7 +876,7 @@
         "file": "1-form",
         "title": "A form in a dialog",
         "description": "Focus moves to the first field, stays inside, and returns to the button that opened it.",
-        "react": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Modal, ModalBody, ModalFooter, ModalHeader } from \"@/components/ui/modal\";\n\nexport default function Example() {\n  const [open, setOpen] = React.useState(false);\n  const close = () => setOpen(false);\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Invite teammate</Button>\n      <Modal open={open} onClose={close} label=\"Invite teammate\">\n        <form\n          onSubmit={(event) => {\n            event.preventDefault();\n            close();\n          }}\n        >\n          <ModalHeader title=\"Invite teammate\" onClose={close} />\n          <ModalBody>\n            <Input label=\"Email\" type=\"email\" name=\"email\" placeholder=\"teammate@company.com\" required />\n          </ModalBody>\n          <ModalFooter>\n            <Button variant=\"secondary\" onClick={close}>Cancel</Button>\n            <Button type=\"submit\">Send invite</Button>\n          </ModalFooter>\n        </form>\n      </Modal>\n    </>\n  );\n}",
+        "react": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Modal, ModalBody, ModalFooter, ModalHeader } from \"@/components/ui/modal\";\n\nexport default function Example() {\n  const [open, setOpen] = React.useState(false);\n  const close = () => setOpen(false);\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Invite teammate</Button>\n      <Modal open={open} onClose={close}>\n        <form\n          onSubmit={(event) => {\n            event.preventDefault();\n            close();\n          }}\n        >\n          <ModalHeader title=\"Invite teammate\" onClose={close} />\n          <ModalBody>\n            <Input label=\"Email\" type=\"email\" name=\"email\" placeholder=\"teammate@company.com\" required />\n          </ModalBody>\n          <ModalFooter>\n            <Button variant=\"secondary\" onClick={close}>Cancel</Button>\n            <Button type=\"submit\">Send invite</Button>\n          </ModalFooter>\n        </form>\n      </Modal>\n    </>\n  );\n}",
         "html": "<button class=\"ml-button\" type=\"button\" data-variant=\"primary\" data-size=\"md\"><span class=\"ml-button-label\">Invite teammate</span></button>"
       }
     ]
@@ -880,7 +884,7 @@
   "otp-input": {
     "needs": "script",
     "react": "import { OtpInput } from \"@/components/ui/otp-input\";\n\nexport default function Example() {\n  return <OtpInput label=\"Verification code\" hint=\"Sent to your email.\" length={6} />;\n}",
-    "html": "<div class=\"ml-input-field\">\n  <label class=\"ml-input-label\" for=\"otp-1\">Verification code</label>\n  <div class=\"ml-otp\" role=\"group\" aria-label=\"Verification code\">\n    <input class=\"ml-otp-box\" id=\"otp-1\" inputMode=\"numeric\" autoComplete=\"one-time-code\" aria-label=\"Digit 1 of 6\" aria-describedby=\"otp-1-hint\" maxLength=\"6\" value=\"\"/>\n    <input class=\"ml-otp-box\" inputMode=\"numeric\" autoComplete=\"off\" aria-label=\"Digit 2 of 6\" maxLength=\"1\" value=\"\"/>\n    <input class=\"ml-otp-box\" inputMode=\"numeric\" autoComplete=\"off\" aria-label=\"Digit 3 of 6\" maxLength=\"1\" value=\"\"/>\n    <input class=\"ml-otp-box\" inputMode=\"numeric\" autoComplete=\"off\" aria-label=\"Digit 4 of 6\" maxLength=\"1\" value=\"\"/>\n    <input class=\"ml-otp-box\" inputMode=\"numeric\" autoComplete=\"off\" aria-label=\"Digit 5 of 6\" maxLength=\"1\" value=\"\"/>\n    <input class=\"ml-otp-box\" inputMode=\"numeric\" autoComplete=\"off\" aria-label=\"Digit 6 of 6\" maxLength=\"1\" value=\"\"/>\n  </div>\n  <p class=\"ml-input-hint\" id=\"otp-1-hint\">Sent to your email.</p>\n</div>",
+    "html": "<div class=\"ml-input-field\">\n  <label class=\"ml-input-label\" id=\"otp-1-label\" for=\"otp-1\">Verification code</label>\n  <div class=\"ml-otp\" role=\"group\" aria-labelledby=\"otp-1-label\">\n    <input class=\"ml-otp-box\" id=\"otp-1\" inputMode=\"numeric\" autoComplete=\"one-time-code\" aria-label=\"Digit 1 of 6\" aria-describedby=\"otp-1-hint\" maxLength=\"6\" value=\"\"/>\n    <input class=\"ml-otp-box\" inputMode=\"numeric\" autoComplete=\"off\" aria-label=\"Digit 2 of 6\" maxLength=\"1\" value=\"\"/>\n    <input class=\"ml-otp-box\" inputMode=\"numeric\" autoComplete=\"off\" aria-label=\"Digit 3 of 6\" maxLength=\"1\" value=\"\"/>\n    <input class=\"ml-otp-box\" inputMode=\"numeric\" autoComplete=\"off\" aria-label=\"Digit 4 of 6\" maxLength=\"1\" value=\"\"/>\n    <input class=\"ml-otp-box\" inputMode=\"numeric\" autoComplete=\"off\" aria-label=\"Digit 5 of 6\" maxLength=\"1\" value=\"\"/>\n    <input class=\"ml-otp-box\" inputMode=\"numeric\" autoComplete=\"off\" aria-label=\"Digit 6 of 6\" maxLength=\"1\" value=\"\"/>\n  </div>\n  <p class=\"ml-input-hint\" id=\"otp-1-hint\">Sent to your email.</p>\n</div>",
     "elements": [
       {
         "class": "ml-otp",
@@ -1309,6 +1313,14 @@
         "description": "multiple collects values as chips; clearable empties them at once.",
         "react": "import { Select } from \"@/components/ui/select\";\n\nexport default function Example() {\n  return (\n    <Select\n      label=\"Notify\"\n      multiple\n      clearable\n      defaultValue={[\"design\", \"billing\"]}\n      options={[\n        { value: \"design\", label: \"Design\" },\n        { value: \"engineering\", label: \"Engineering\" },\n        { value: \"billing\", label: \"Billing\" },\n        { value: \"support\", label: \"Support\" },\n      ]}\n    />\n  );\n}",
         "html": "<div class=\"ml-select-root\">\n  <span class=\"ml-select-label\" id=\"select-multiple-1-label\">Notify</span>\n  <div class=\"ml-select-control\">\n    <button class=\"ml-select\" type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-labelledby=\"select-multiple-1-label\" data-size=\"md\" data-state=\"closed\"><span class=\"ml-select-value\"><span class=\"ml-select-chips\"><span class=\"ml-badge\" data-size=\"sm\">Design</span><span class=\"ml-badge\" data-size=\"sm\">Billing</span></span></span><svg class=\"mlola-glyph ml-select-chevron\" width=\"1.125em\" height=\"1.125em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><polyline points=\"6 9 12 15 18 9\" pathLength=\"1\"></polyline></svg></button>\n    <button class=\"ml-select-clear\" type=\"button\" aria-label=\"Clear Notify\" data-hit=\"expand\"><svg class=\"mlola-glyph\" width=\"0.875em\" height=\"0.875em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M18 6 6 18M6 6l12 12\" pathLength=\"1\"></path></svg></button>\n  </div>\n</div>"
+      },
+      {
+        "slug": "in-a-form",
+        "file": "3-in-a-form",
+        "title": "In a form",
+        "description": "name submits the value like a native select; id lets a label elsewhere in the form name it.",
+        "react": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Select } from \"@/components/ui/select\";\n\nexport default function Example() {\n  const [sent, setSent] = React.useState(\"\");\n  return (\n    <form\n      onSubmit={(event) => {\n        event.preventDefault();\n        setSent(`Saved: ${new FormData(event.currentTarget).get(\"visibility\")}`);\n      }}\n    >\n      <label htmlFor=\"visibility\" className=\"ml-input-label\">\n        Who can see this project\n      </label>\n      <Select\n        id=\"visibility\"\n        name=\"visibility\"\n        required\n        defaultValue=\"team\"\n        options={[\n          { value: \"private\", label: \"Only me\" },\n          { value: \"team\", label: \"My team\" },\n          { value: \"public\", label: \"Anyone with the link\" },\n        ]}\n      />\n      <Button type=\"submit\">Save</Button>\n      <p role=\"status\">{sent}</p>\n    </form>\n  );\n}",
+        "html": "<form>\n  <label class=\"ml-input-label\" for=\"visibility\">Who can see this project</label>\n  <div class=\"ml-select-root\">\n    <input type=\"hidden\" name=\"visibility\" value=\"team\"/>\n    <div class=\"ml-select-control\">\n      <button class=\"ml-select\" id=\"visibility\" type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-required=\"true\" data-size=\"md\" data-state=\"closed\"><span class=\"ml-select-value\">My team</span><svg class=\"mlola-glyph ml-select-chevron\" width=\"1.125em\" height=\"1.125em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><polyline points=\"6 9 12 15 18 9\" pathLength=\"1\"></polyline></svg></button>\n    </div>\n  </div>\n  <button class=\"ml-button\" type=\"submit\" data-variant=\"primary\" data-size=\"md\"><span class=\"ml-button-label\">Save</span></button>\n  <p role=\"status\"></p>\n</form>"
       }
     ]
   },
@@ -1616,7 +1628,7 @@
   "textarea": {
     "needs": "nothing",
     "react": "import { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Example() {\n  return <Textarea label=\"Feedback\" hint=\"What would make this better?\" maxLength={280} showCount rows={3} />;\n}",
-    "html": "<div class=\"ml-input-field\">\n  <label class=\"ml-input-label\" for=\"textarea-1\">Feedback</label>\n  <textarea class=\"ml-textarea\" id=\"textarea-1\" rows=\"3\" maxLength=\"280\" aria-describedby=\"textarea-1-hint\" style=\"--ml-textarea-max-rows:12\"></textarea>\n  <p class=\"ml-textarea-count\" aria-live=\"polite\">0 / 280</p>\n  <p class=\"ml-input-hint\" id=\"textarea-1-hint\">What would make this better?</p>\n</div>",
+    "html": "<div class=\"ml-input-field\">\n  <label class=\"ml-input-label\" id=\"textarea-1-label\" for=\"textarea-1\">Feedback</label>\n  <textarea class=\"ml-textarea\" id=\"textarea-1\" rows=\"3\" maxLength=\"280\" aria-describedby=\"textarea-1-hint\" style=\"--ml-textarea-max-rows:12\"></textarea>\n  <p class=\"ml-textarea-count\" aria-live=\"polite\">0 / 280</p>\n  <p class=\"ml-input-hint\" id=\"textarea-1-hint\">What would make this better?</p>\n</div>",
     "elements": [
       {
         "class": "ml-textarea",
@@ -2004,7 +2016,7 @@
   "date-picker": {
     "needs": "script",
     "react": "import { DatePicker } from \"@/components/ui/date-picker\";\n\nexport default function Example() {\n  return <DatePicker label=\"Start date\" defaultValue=\"2026-09-18\" today=\"2026-09-14\" clearable />;\n}",
-    "html": "<div class=\"ml-input-field ml-date-picker\">\n  <label class=\"ml-input-label\" for=\"date-picker-1\">Start date</label>\n  <div class=\"ml-date-picker-control\">\n    <button class=\"ml-input ml-date-picker-trigger\" id=\"date-picker-1\" type=\"button\" aria-haspopup=\"dialog\" aria-expanded=\"false\"><svg class=\"mlola-glyph ml-date-picker-icon\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" pathLength=\"1\"></rect><path d=\"M8 3v4M16 3v4M3 10h18\" pathLength=\"1\"></path></svg><span class=\"ml-date-picker-value\">Sep 18, 2026</span></button>\n    <button class=\"ml-date-picker-clear\" type=\"button\" data-hit=\"expand\" aria-label=\"Clear date\"><svg class=\"mlola-glyph\" width=\"0.9em\" height=\"0.9em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M18 6 6 18M6 6l12 12\" pathLength=\"1\"></path></svg></button>\n  </div>\n</div>",
+    "html": "<div class=\"ml-input-field ml-date-picker\">\n  <label class=\"ml-input-label\" id=\"date-picker-1-label\" for=\"date-picker-1\">Start date</label>\n  <div class=\"ml-date-picker-control\">\n    <button class=\"ml-input ml-date-picker-trigger\" id=\"date-picker-1\" type=\"button\" aria-haspopup=\"dialog\" aria-expanded=\"false\"><svg class=\"mlola-glyph ml-date-picker-icon\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" pathLength=\"1\"></rect><path d=\"M8 3v4M16 3v4M3 10h18\" pathLength=\"1\"></path></svg><span class=\"ml-date-picker-value\">Sep 18, 2026</span></button>\n    <button class=\"ml-date-picker-clear\" type=\"button\" data-hit=\"expand\" aria-label=\"Clear date\"><svg class=\"mlola-glyph\" width=\"0.9em\" height=\"0.9em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M18 6 6 18M6 6l12 12\" pathLength=\"1\"></path></svg></button>\n  </div>\n</div>",
     "elements": [
       {
         "class": "ml-date-picker",
@@ -2069,14 +2081,14 @@
         "title": "A range with presets",
         "description": "Presets cover the common ranges; the calendar covers the rest.",
         "react": "import { DatePicker } from \"@/components/ui/date-picker\";\n\nexport default function Example() {\n  return (\n    <DatePicker\n      mode=\"range\"\n      label=\"Report period\"\n      today=\"2026-09-14\"\n      defaultValue={{ from: \"2026-09-01\", to: \"2026-09-14\" }}\n      presets={[\n        { label: \"Last 7 days\", value: { from: \"2026-09-08\", to: \"2026-09-14\" } },\n        { label: \"This month\", value: { from: \"2026-09-01\", to: \"2026-09-30\" } },\n      ]}\n    />\n  );\n}",
-        "html": "<div class=\"ml-input-field ml-date-picker\">\n  <label class=\"ml-input-label\" for=\"date-picker-range-1\">Report period</label>\n  <div class=\"ml-date-picker-control\">\n    <button class=\"ml-input ml-date-picker-trigger\" id=\"date-picker-range-1\" type=\"button\" aria-haspopup=\"dialog\" aria-expanded=\"false\"><svg class=\"mlola-glyph ml-date-picker-icon\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" pathLength=\"1\"></rect><path d=\"M8 3v4M16 3v4M3 10h18\" pathLength=\"1\"></path></svg><span class=\"ml-date-picker-value\">Sep 1, 2026 – Sep 14, 2026</span></button>\n    <button class=\"ml-date-picker-clear\" type=\"button\" data-hit=\"expand\" aria-label=\"Clear date\"><svg class=\"mlola-glyph\" width=\"0.9em\" height=\"0.9em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M18 6 6 18M6 6l12 12\" pathLength=\"1\"></path></svg></button>\n  </div>\n</div>"
+        "html": "<div class=\"ml-input-field ml-date-picker\">\n  <label class=\"ml-input-label\" id=\"date-picker-range-1-label\" for=\"date-picker-range-1\">Report period</label>\n  <div class=\"ml-date-picker-control\">\n    <button class=\"ml-input ml-date-picker-trigger\" id=\"date-picker-range-1\" type=\"button\" aria-haspopup=\"dialog\" aria-expanded=\"false\"><svg class=\"mlola-glyph ml-date-picker-icon\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" pathLength=\"1\"></rect><path d=\"M8 3v4M16 3v4M3 10h18\" pathLength=\"1\"></path></svg><span class=\"ml-date-picker-value\">Sep 1, 2026 – Sep 14, 2026</span></button>\n    <button class=\"ml-date-picker-clear\" type=\"button\" data-hit=\"expand\" aria-label=\"Clear date\"><svg class=\"mlola-glyph\" width=\"0.9em\" height=\"0.9em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M18 6 6 18M6 6l12 12\" pathLength=\"1\"></path></svg></button>\n  </div>\n</div>"
       }
     ]
   },
   "time-picker": {
     "needs": "script",
     "react": "import { TimePicker } from \"@/components/ui/time-picker\";\n\nexport default function Example() {\n  return <TimePicker label=\"Reminder\" defaultValue=\"09:30\" step={15} hourCycle={24} />;\n}",
-    "html": "<div class=\"ml-input-field ml-time-picker\">\n  <label class=\"ml-input-label\" for=\"time-picker-1\">Reminder</label>\n  <div class=\"ml-input ml-time-picker-control\" role=\"group\" id=\"time-picker-1\" aria-label=\"Reminder\">\n    <span class=\"ml-time-picker-segment\" role=\"spinbutton\" tabindex=\"0\" aria-label=\"Hours\" aria-valuemin=\"0\" aria-valuemax=\"23\" aria-valuenow=\"9\" aria-valuetext=\"09\">09</span>\n    <span class=\"ml-time-picker-colon\" aria-hidden=\"true\">:</span>\n    <span class=\"ml-time-picker-segment\" role=\"spinbutton\" tabindex=\"0\" aria-label=\"Minutes\" aria-valuemin=\"0\" aria-valuemax=\"59\" aria-valuenow=\"30\" aria-valuetext=\"30\">30</span>\n    <button class=\"ml-time-picker-open\" type=\"button\" aria-label=\"Choose from a list\" aria-haspopup=\"dialog\" aria-expanded=\"false\"><svg class=\"mlola-glyph\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><circle cx=\"12\" cy=\"12\" r=\"9.5\" pathLength=\"1\"></circle><path d=\"M12 7v5l3 2\" pathLength=\"1\"></path></svg></button>\n  </div>\n</div>",
+    "html": "<div class=\"ml-input-field ml-time-picker\">\n  <label class=\"ml-input-label\" id=\"time-picker-1-label\" for=\"time-picker-1\">Reminder</label>\n  <div class=\"ml-input ml-time-picker-control\" role=\"group\" id=\"time-picker-1\" aria-labelledby=\"time-picker-1-label\">\n    <span class=\"ml-time-picker-segment\" role=\"spinbutton\" tabindex=\"0\" aria-label=\"Hours\" aria-valuemin=\"0\" aria-valuemax=\"23\" aria-valuenow=\"9\" aria-valuetext=\"09\">09</span>\n    <span class=\"ml-time-picker-colon\" aria-hidden=\"true\">:</span>\n    <span class=\"ml-time-picker-segment\" role=\"spinbutton\" tabindex=\"0\" aria-label=\"Minutes\" aria-valuemin=\"0\" aria-valuemax=\"59\" aria-valuenow=\"30\" aria-valuetext=\"30\">30</span>\n    <button class=\"ml-time-picker-open\" type=\"button\" aria-label=\"Choose from a list\" aria-haspopup=\"dialog\" aria-expanded=\"false\"><svg class=\"mlola-glyph\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><circle cx=\"12\" cy=\"12\" r=\"9.5\" pathLength=\"1\"></circle><path d=\"M12 7v5l3 2\" pathLength=\"1\"></path></svg></button>\n  </div>\n</div>",
     "elements": [
       {
         "class": "ml-time-picker",
@@ -2157,7 +2169,7 @@
   "combobox": {
     "needs": "script",
     "react": "import { Combobox } from \"@/components/ui/combobox\";\n\nexport default function Example() {\n  return (\n    <Combobox\n      label=\"Framework\"\n      placeholder=\"Search frameworks\"\n      clearable\n      options={[\n        { value: \"next\", label: \"Next.js\" },\n        { value: \"remix\", label: \"Remix\" },\n        { value: \"astro\", label: \"Astro\" },\n      ]}\n    />\n  );\n}",
-    "html": "<div class=\"ml-input-field ml-combobox\">\n  <label class=\"ml-input-label\" for=\"combobox-1\">Framework</label>\n  <div class=\"ml-combobox-control\">\n    <input class=\"ml-input ml-combobox-input\" id=\"combobox-1\" role=\"combobox\" aria-expanded=\"false\" aria-controls=\"combobox-1-list\" aria-autocomplete=\"list\" placeholder=\"Search frameworks\" autoComplete=\"off\" spellCheck=\"false\" value=\"\"/>\n    <svg class=\"mlola-glyph ml-combobox-chevron\" width=\"1.1em\" height=\"1.1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><polyline points=\"6 9 12 15 18 9\" pathLength=\"1\"></polyline></svg>\n  </div>\n</div>",
+    "html": "<div class=\"ml-input-field ml-combobox\">\n  <label class=\"ml-input-label\" id=\"combobox-1-label\" for=\"combobox-1\">Framework</label>\n  <div class=\"ml-combobox-control\">\n    <input class=\"ml-input ml-combobox-input\" id=\"combobox-1\" role=\"combobox\" aria-expanded=\"false\" aria-controls=\"combobox-1-list\" aria-autocomplete=\"list\" placeholder=\"Search frameworks\" autoComplete=\"off\" spellCheck=\"false\" value=\"\"/>\n    <svg class=\"mlola-glyph ml-combobox-chevron\" width=\"1.1em\" height=\"1.1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><polyline points=\"6 9 12 15 18 9\" pathLength=\"1\"></polyline></svg>\n  </div>\n</div>",
     "elements": [
       {
         "class": "ml-combobox",
@@ -2249,14 +2261,14 @@
         "title": "Create what is missing",
         "description": "When the search finds nothing, the typed text can become a new option.",
         "react": "\"use client\";\n\nimport * as React from \"react\";\nimport { Combobox } from \"@/components/ui/combobox\";\n\nexport default function Example() {\n  const [options, setOptions] = React.useState([\n    { value: \"design\", label: \"Design\" },\n    { value: \"research\", label: \"Research\" },\n  ]);\n  const [value, setValue] = React.useState<string | null>(null);\n  return (\n    <Combobox\n      label=\"Label\"\n      placeholder=\"Find or create a label\"\n      options={options}\n      value={value}\n      onValueChange={setValue}\n      onCreate={(text) => {\n        const option = { value: text.toLowerCase(), label: text };\n        setOptions((all) => [...all, option]);\n        setValue(option.value);\n      }}\n    />\n  );\n}",
-        "html": "<div class=\"ml-input-field ml-combobox\">\n  <label class=\"ml-input-label\" for=\"combobox-create-1\">Label</label>\n  <div class=\"ml-combobox-control\">\n    <input class=\"ml-input ml-combobox-input\" id=\"combobox-create-1\" role=\"combobox\" aria-expanded=\"false\" aria-controls=\"combobox-create-1-list\" aria-autocomplete=\"list\" placeholder=\"Find or create a label\" autoComplete=\"off\" spellCheck=\"false\" value=\"\"/>\n    <svg class=\"mlola-glyph ml-combobox-chevron\" width=\"1.1em\" height=\"1.1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><polyline points=\"6 9 12 15 18 9\" pathLength=\"1\"></polyline></svg>\n  </div>\n</div>"
+        "html": "<div class=\"ml-input-field ml-combobox\">\n  <label class=\"ml-input-label\" id=\"combobox-create-1-label\" for=\"combobox-create-1\">Label</label>\n  <div class=\"ml-combobox-control\">\n    <input class=\"ml-input ml-combobox-input\" id=\"combobox-create-1\" role=\"combobox\" aria-expanded=\"false\" aria-controls=\"combobox-create-1-list\" aria-autocomplete=\"list\" placeholder=\"Find or create a label\" autoComplete=\"off\" spellCheck=\"false\" value=\"\"/>\n    <svg class=\"mlola-glyph ml-combobox-chevron\" width=\"1.1em\" height=\"1.1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><polyline points=\"6 9 12 15 18 9\" pathLength=\"1\"></polyline></svg>\n  </div>\n</div>"
       }
     ]
   },
   "tag-input": {
     "needs": "script",
     "react": "import { TagInput } from \"@/components/ui/tag-input\";\n\nexport default function Example() {\n  return <TagInput label=\"Labels\" defaultValue={[\"design\", \"billing\"]} placeholder=\"Add a label\" max={5} />;\n}",
-    "html": "<div class=\"ml-input-field ml-tag-input\">\n  <label class=\"ml-input-label\" for=\"tag-input-1\">Labels</label>\n  <div class=\"ml-tag-input-control\">\n    <ul class=\"ml-tag-input-tags\" aria-label=\"Added\">\n      <li class=\"ml-tag-input-tag\">\n        <span class=\"ml-tag-input-text\">design</span>\n        <button class=\"ml-tag-input-remove\" type=\"button\" data-hit=\"expand\" tabindex=\"-1\" aria-label=\"Remove design\"><svg class=\"mlola-glyph\" width=\"0.8em\" height=\"0.8em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M18 6 6 18M6 6l12 12\" pathLength=\"1\"></path></svg></button>\n      </li>\n      <li class=\"ml-tag-input-tag\">\n        <span class=\"ml-tag-input-text\">billing</span>\n        <button class=\"ml-tag-input-remove\" type=\"button\" data-hit=\"expand\" tabindex=\"-1\" aria-label=\"Remove billing\"><svg class=\"mlola-glyph\" width=\"0.8em\" height=\"0.8em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M18 6 6 18M6 6l12 12\" pathLength=\"1\"></path></svg></button>\n      </li>\n    </ul>\n    <input class=\"ml-tag-input-field\" id=\"tag-input-1\" placeholder=\"Add a label\" autoComplete=\"off\" value=\"\"/>\n    <span class=\"ml-tag-input-count\" aria-hidden=\"true\">2/5</span>\n  </div>\n  <p class=\"ml-visually-hidden\" role=\"status\" aria-live=\"polite\"></p>\n</div>",
+    "html": "<div class=\"ml-input-field ml-tag-input\">\n  <label class=\"ml-input-label\" id=\"tag-input-1-label\" for=\"tag-input-1\">Labels</label>\n  <div class=\"ml-tag-input-control\">\n    <ul class=\"ml-tag-input-tags\" aria-label=\"Added\">\n      <li class=\"ml-tag-input-tag\">\n        <span class=\"ml-tag-input-text\">design</span>\n        <button class=\"ml-tag-input-remove\" type=\"button\" data-hit=\"expand\" tabindex=\"-1\" aria-label=\"Remove design\"><svg class=\"mlola-glyph\" width=\"0.8em\" height=\"0.8em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M18 6 6 18M6 6l12 12\" pathLength=\"1\"></path></svg></button>\n      </li>\n      <li class=\"ml-tag-input-tag\">\n        <span class=\"ml-tag-input-text\">billing</span>\n        <button class=\"ml-tag-input-remove\" type=\"button\" data-hit=\"expand\" tabindex=\"-1\" aria-label=\"Remove billing\"><svg class=\"mlola-glyph\" width=\"0.8em\" height=\"0.8em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M18 6 6 18M6 6l12 12\" pathLength=\"1\"></path></svg></button>\n      </li>\n    </ul>\n    <input class=\"ml-tag-input-field\" id=\"tag-input-1\" placeholder=\"Add a label\" autoComplete=\"off\" value=\"\"/>\n    <span class=\"ml-tag-input-count\" aria-hidden=\"true\">2/5</span>\n  </div>\n  <p class=\"ml-visually-hidden\" role=\"status\" aria-live=\"polite\"></p>\n</div>",
     "elements": [
       {
         "class": "ml-tag-input",
@@ -2300,7 +2312,7 @@
   "number-input": {
     "needs": "script",
     "react": "import { NumberInput } from \"@/components/ui/number-input\";\n\nexport default function Example() {\n  return <NumberInput label=\"Seats\" defaultValue={5} min={1} max={50} hint=\"Up to 50 on this plan.\" locale=\"en-US\" />;\n}",
-    "html": "<div class=\"ml-input-field ml-number-input\">\n  <label class=\"ml-input-label\" for=\"number-input-1\">Seats</label>\n  <div class=\"ml-number-input-control\">\n    <input class=\"ml-number-input-field\" id=\"number-input-1\" role=\"spinbutton\" inputMode=\"decimal\" autoComplete=\"off\" aria-valuenow=\"5\" aria-valuemin=\"1\" aria-valuemax=\"50\" aria-valuetext=\"5\" aria-describedby=\"number-input-1-hint\" value=\"5\"/>\n    <span class=\"ml-number-input-buttons\"><button class=\"ml-number-input-step\" type=\"button\" tabindex=\"-1\" aria-label=\"Decrease\"><svg class=\"mlola-glyph\" width=\"0.9em\" height=\"0.9em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M5 12h14\" pathLength=\"1\"></path></svg></button><button class=\"ml-number-input-step\" type=\"button\" tabindex=\"-1\" aria-label=\"Increase\"><svg class=\"mlola-glyph\" width=\"0.9em\" height=\"0.9em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M12 5v14M5 12h14\" pathLength=\"1\"></path></svg></button></span>\n  </div>\n  <p class=\"ml-input-hint\" id=\"number-input-1-hint\">Up to 50 on this plan.</p>\n</div>",
+    "html": "<div class=\"ml-input-field ml-number-input\">\n  <label class=\"ml-input-label\" id=\"number-input-1-label\" for=\"number-input-1\">Seats</label>\n  <div class=\"ml-number-input-control\">\n    <input class=\"ml-number-input-field\" id=\"number-input-1\" role=\"spinbutton\" inputMode=\"decimal\" autoComplete=\"off\" aria-valuenow=\"5\" aria-valuemin=\"1\" aria-valuemax=\"50\" aria-valuetext=\"5\" aria-describedby=\"number-input-1-hint\" value=\"5\"/>\n    <span class=\"ml-number-input-buttons\"><button class=\"ml-number-input-step\" type=\"button\" tabindex=\"-1\" aria-label=\"Decrease\"><svg class=\"mlola-glyph\" width=\"0.9em\" height=\"0.9em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M5 12h14\" pathLength=\"1\"></path></svg></button><button class=\"ml-number-input-step\" type=\"button\" tabindex=\"-1\" aria-label=\"Increase\"><svg class=\"mlola-glyph\" width=\"0.9em\" height=\"0.9em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M12 5v14M5 12h14\" pathLength=\"1\"></path></svg></button></span>\n  </div>\n  <p class=\"ml-input-hint\" id=\"number-input-1-hint\">Up to 50 on this plan.</p>\n</div>",
     "elements": [
       {
         "class": "ml-number-input",
@@ -2330,7 +2342,7 @@
   "color-picker": {
     "needs": "script",
     "react": "import { ColorPicker } from \"@/components/ui/color-picker\";\n\nexport default function Example() {\n  return <ColorPicker label=\"Brand color\" defaultValue=\"oklch(0.62 0.19 255)\" format=\"oklch\" />;\n}",
-    "html": "<div class=\"ml-input-field ml-color-picker\">\n  <label class=\"ml-input-label\" for=\"color-picker-1\">Brand color</label>\n  <button class=\"ml-input ml-color-picker-trigger\" id=\"color-picker-1\" type=\"button\" aria-label=\"Brand color: oklch(61.9% 0.191 255.2)\" aria-haspopup=\"dialog\" aria-expanded=\"false\"><span class=\"ml-color-picker-swatch\" style=\"--ml-color:rgb(29 132 245)\" aria-hidden=\"true\"></span><span class=\"ml-color-picker-value\">oklch(61.9% 0.191 255.2)</span></button>\n</div>",
+    "html": "<div class=\"ml-input-field ml-color-picker\">\n  <label class=\"ml-input-label\" id=\"color-picker-1-label\" for=\"color-picker-1\">Brand color</label>\n  <button class=\"ml-input ml-color-picker-trigger\" id=\"color-picker-1\" type=\"button\" aria-label=\"Brand color: oklch(61.9% 0.191 255.2)\" aria-haspopup=\"dialog\" aria-expanded=\"false\"><span class=\"ml-color-picker-swatch\" style=\"--ml-color:rgb(29 132 245)\" aria-hidden=\"true\"></span><span class=\"ml-color-picker-value\">oklch(61.9% 0.191 255.2)</span></button>\n</div>",
     "elements": [
       {
         "class": "ml-color-picker",
@@ -2770,7 +2782,7 @@
   "password-input": {
     "needs": "script",
     "react": "import { PasswordInput } from \"@/components/ui/password-input\";\n\nexport default function Example() {\n  return <PasswordInput label=\"New password\" name=\"password\" strength />;\n}",
-    "html": "<div class=\"ml-password-input\">\n  <div class=\"ml-input-field\">\n    <label class=\"ml-input-label\" for=\"input-2\">New password</label>\n    <div class=\"ml-input-control\" data-trailing=\"\">\n      <input class=\"ml-input\" id=\"input-2\" aria-describedby=\"password-input-1\" data-variant=\"default\" data-size=\"md\" type=\"password\" autoComplete=\"new-password\" autoCapitalize=\"none\" autoCorrect=\"off\" spellCheck=\"false\" name=\"password\"/>\n      <span class=\"ml-input-trailing\"><button class=\"ml-password-input-toggle\" type=\"button\" aria-label=\"Show password\" aria-pressed=\"false\" data-hit=\"expand\"><svg class=\"mlola-glyph\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" pathLength=\"1\"></path><circle cx=\"12\" cy=\"12\" r=\"3\" pathLength=\"1\"></circle></svg></button></span>\n    </div>\n  </div>\n  <div class=\"ml-password-input-strength\" id=\"password-input-1\" data-strength=\"empty\" aria-live=\"polite\">\n    <span class=\"ml-password-input-meter\" aria-hidden=\"true\"><span></span><span></span><span></span></span>\n    <p>Use 8 or more characters.</p>\n  </div>\n</div>",
+    "html": "<div class=\"ml-password-input\">\n  <div class=\"ml-input-field\">\n    <label class=\"ml-input-label\" id=\"input-2-label\" for=\"input-2\">New password</label>\n    <div class=\"ml-input-control\" data-trailing=\"\">\n      <input class=\"ml-input\" id=\"input-2\" aria-describedby=\"password-input-1\" data-variant=\"default\" data-size=\"md\" type=\"password\" autoComplete=\"new-password\" autoCapitalize=\"none\" autoCorrect=\"off\" spellCheck=\"false\" name=\"password\"/>\n      <span class=\"ml-input-trailing\"><button class=\"ml-password-input-toggle\" type=\"button\" aria-label=\"Show password\" aria-pressed=\"false\" data-hit=\"expand\"><svg class=\"mlola-glyph\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" pathLength=\"1\"></path><circle cx=\"12\" cy=\"12\" r=\"3\" pathLength=\"1\"></circle></svg></button></span>\n    </div>\n  </div>\n  <div class=\"ml-password-input-strength\" id=\"password-input-1\" data-strength=\"empty\" aria-live=\"polite\">\n    <span class=\"ml-password-input-meter\" aria-hidden=\"true\"><span></span><span></span><span></span></span>\n    <p>Use 8 or more characters.</p>\n  </div>\n</div>",
     "elements": [
       {
         "class": "ml-password-input",

package/index.json

@@ -2,7 +2,7 @@
   "$schema": "./schema/registry-index.schema.json",
   "schemaVersion": 2,
   "name": "mlola-ui",
-  "version": "1.0.13",
+  "version": "1.1.0",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlola-ui/registry",
-  "version": "1.0.13",
+  "version": "1.1.0",
   "description": "Validated Registry v2 metadata and source snapshot for Mlola UI",
   "type": "module",
   "main": "./snapshot/index.json",