mlola-ui 1.1.14 → 1.1.18

package/package.json

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

package/registry/agents.md

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

package/registry/contract.json

@@ -247,6 +247,13 @@
     "ml-modal-header",
     "ml-modal-overlay",
     "ml-modal-title",
+    "ml-motion-counter",
+    "ml-motion-counter-digit",
+    "ml-motion-magnetic",
+    "ml-motion-origin-morph",
+    "ml-motion-shimmer",
+    "ml-motion-text",
+    "ml-motion-tilt-glare",
     "ml-number-input",
     "ml-number-input-buttons",
     "ml-number-input-control",
@@ -697,6 +704,9 @@
     "ml-dropdown-trigger": {
       "aria-expanded": [
         "true"
+      ],
+      "data-variant": [
+        "icon"
       ]
     },
     "ml-dropzone": {

package/registry/examples.json

@@ -44,7 +44,27 @@
         "class": "ml-accordion-panel-inner",
         "attributes": {}
       }
-    ]
+    ],
+    "rendered": {
+      "ml-accordion-item": {
+        "data-state": [
+          "closed",
+          "open"
+        ]
+      },
+      "ml-accordion-panel": {
+        "data-state": [
+          "closed",
+          "open"
+        ]
+      },
+      "ml-accordion-trigger": {
+        "data-state": [
+          "closed",
+          "open"
+        ]
+      }
+    }
   },
   "alert": {
     "needs": "nothing",
@@ -94,6 +114,24 @@
         "attributes": {}
       }
     ],
+    "rendered": {
+      "ml-alert": {
+        "data-state": [
+          "open"
+        ],
+        "data-tone": [
+          "danger",
+          "info",
+          "neutral",
+          "success",
+          "warning"
+        ],
+        "data-variant": [
+          "card",
+          "soft"
+        ]
+      }
+    },
     "gallery": [
       {
         "slug": "dismissible",
@@ -163,7 +201,26 @@
         "class": "ml-avatar-overflow",
         "attributes": {}
       }
-    ]
+    ],
+    "rendered": {
+      "ml-avatar-root": {
+        "data-size": [
+          "lg",
+          "md",
+          "sm",
+          "xl",
+          "xs"
+        ]
+      },
+      "ml-avatar-status": {
+        "data-status": [
+          "away",
+          "busy",
+          "offline",
+          "online"
+        ]
+      }
+    }
   },
   "badge": {
     "needs": "nothing",
@@ -202,7 +259,29 @@
         "class": "ml-badge-remove",
         "attributes": {}
       }
-    ]
+    ],
+    "rendered": {
+      "ml-badge": {
+        "data-size": [
+          "lg",
+          "md",
+          "sm"
+        ],
+        "data-tone": [
+          "danger",
+          "info",
+          "neutral",
+          "primary",
+          "success",
+          "warning"
+        ],
+        "data-variant": [
+          "outline",
+          "soft",
+          "solid"
+        ]
+      }
+    }
   },
   "breadcrumb": {
     "needs": "nothing",
@@ -291,6 +370,24 @@
         "attributes": {}
       }
     ],
+    "rendered": {
+      "ml-button": {
+        "data-size": [
+          "icon",
+          "lg",
+          "md",
+          "sm"
+        ],
+        "data-variant": [
+          "danger",
+          "link",
+          "outline",
+          "primary",
+          "secondary",
+          "subtle"
+        ]
+      }
+    },
     "gallery": [
       {
         "slug": "with-icons",
@@ -355,6 +452,16 @@
         "attributes": {}
       }
     ],
+    "rendered": {
+      "ml-card": {
+        "data-variant": [
+          "default",
+          "elevated",
+          "glass",
+          "specular"
+        ]
+      }
+    },
     "gallery": [
       {
         "slug": "plan",
@@ -467,7 +574,16 @@
         "class": "ml-checkbox-error",
         "attributes": {}
       }
-    ]
+    ],
+    "rendered": {
+      "ml-checkbox-field": {
+        "data-state": [
+          "checked",
+          "indeterminate",
+          "unchecked"
+        ]
+      }
+    }
   },
   "command-menu": {
     "needs": "script",
@@ -566,6 +682,9 @@
         "attributes": {
           "aria-expanded": [
             "true"
+          ],
+          "data-variant": [
+            "icon"
           ]
         }
       },
@@ -620,6 +739,18 @@
         "attributes": {}
       }
     ],
+    "rendered": {
+      "ml-dropdown": {
+        "data-state": [
+          "closed"
+        ]
+      },
+      "ml-dropdown-trigger": {
+        "data-variant": [
+          "icon"
+        ]
+      }
+    },
     "gallery": [
       {
         "slug": "actions",
@@ -691,7 +822,15 @@
         "class": "ml-dropzone-progress",
         "attributes": {}
       }
-    ]
+    ],
+    "rendered": {
+      "ml-dropzone-file": {
+        "data-status": [
+          "done",
+          "uploading"
+        ]
+      }
+    }
   },
   "empty-state": {
     "needs": "nothing",
@@ -723,6 +862,13 @@
         "attributes": {}
       }
     ],
+    "rendered": {
+      "ml-empty": {
+        "data-size": [
+          "inline"
+        ]
+      }
+    },
     "gallery": [
       {
         "slug": "page",
@@ -794,6 +940,20 @@
         "attributes": {}
       }
     ],
+    "rendered": {
+      "ml-input": {
+        "data-size": [
+          "lg",
+          "md",
+          "sm"
+        ],
+        "data-variant": [
+          "default",
+          "filled",
+          "subtle"
+        ]
+      }
+    },
     "gallery": [
       {
         "slug": "validation",
@@ -937,7 +1097,15 @@
         "class": "ml-pagination-ellipsis",
         "attributes": {}
       }
-    ]
+    ],
+    "rendered": {
+      "ml-pagination-button": {
+        "data-state": [
+          "active",
+          "inactive"
+        ]
+      }
+    }
   },
   "popover": {
     "needs": "script",
@@ -1033,7 +1201,43 @@
         "class": "ml-circular-progress-label",
         "attributes": {}
       }
-    ]
+    ],
+    "rendered": {
+      "ml-circular-progress": {
+        "data-size": [
+          "lg",
+          "md",
+          "sm"
+        ],
+        "data-state": [
+          "complete",
+          "determinate",
+          "indeterminate"
+        ],
+        "data-tone": [
+          "primary",
+          "success",
+          "warning"
+        ]
+      },
+      "ml-progress-root": {
+        "data-size": [
+          "lg",
+          "md",
+          "sm"
+        ],
+        "data-state": [
+          "determinate",
+          "indeterminate"
+        ],
+        "data-tone": [
+          "danger",
+          "primary",
+          "success",
+          "warning"
+        ]
+      }
+    }
   },
   "radio-group": {
     "needs": "nothing",
@@ -1096,7 +1300,15 @@
         "class": "ml-radio-group-description",
         "attributes": {}
       }
-    ]
+    ],
+    "rendered": {
+      "ml-radio-item": {
+        "data-state": [
+          "checked",
+          "unchecked"
+        ]
+      }
+    }
   },
   "rating": {
     "needs": "nothing",
@@ -1174,7 +1386,15 @@
           ]
         }
       }
-    ]
+    ],
+    "rendered": {
+      "ml-segmented-control-item": {
+        "data-state": [
+          "active",
+          "inactive"
+        ]
+      }
+    }
   },
   "select": {
     "needs": "behavior",
@@ -1300,6 +1520,18 @@
         "attributes": {}
       }
     ],
+    "rendered": {
+      "ml-select": {
+        "data-size": [
+          "lg",
+          "md",
+          "sm"
+        ],
+        "data-state": [
+          "closed"
+        ]
+      }
+    },
     "gallery": [
       {
         "slug": "searchable",
@@ -1477,7 +1709,15 @@
         "class": "ml-slider-range",
         "attributes": {}
       }
-    ]
+    ],
+    "rendered": {
+      "ml-slider-field": {
+        "data-size": [
+          "md",
+          "sm"
+        ]
+      }
+    }
   },
   "table": {
     "needs": "nothing",
@@ -1549,6 +1789,19 @@
         "attributes": {}
       }
     ],
+    "rendered": {
+      "ml-table": {
+        "data-size": [
+          "md",
+          "sm"
+        ]
+      },
+      "ml-table-row": {
+        "data-state": [
+          "selected"
+        ]
+      }
+    },
     "gallery": [
       {
         "slug": "sortable",
@@ -1609,6 +1862,27 @@
         "attributes": {}
       }
     ],
+    "rendered": {
+      "ml-tabs": {
+        "data-variant": [
+          "default",
+          "enclosed",
+          "pills"
+        ]
+      },
+      "ml-tabs-content": {
+        "data-state": [
+          "active",
+          "inactive"
+        ]
+      },
+      "ml-tabs-trigger": {
+        "data-state": [
+          "active",
+          "inactive"
+        ]
+      }
+    },
     "gallery": [
       {
         "slug": "vertical",
@@ -1709,7 +1983,28 @@
         "class": "ml-timeline-content",
         "attributes": {}
       }
-    ]
+    ],
+    "rendered": {
+      "ml-timeline-item": {
+        "data-status": [
+          "complete",
+          "current",
+          "upcoming"
+        ]
+      },
+      "ml-timeline-marker": {
+        "data-status": [
+          "complete",
+          "current",
+          "upcoming"
+        ],
+        "data-tone": [
+          "danger",
+          "info",
+          "success"
+        ]
+      }
+    }
   },
   "toast": {
     "needs": "behavior",
@@ -1844,6 +2139,28 @@
         }
       }
     ],
+    "rendered": {
+      "ml-toggle": {
+        "data-size": [
+          "lg",
+          "md",
+          "sm"
+        ],
+        "data-state": [
+          "checked",
+          "unchecked"
+        ]
+      },
+      "ml-toggle-button": {
+        "data-size": [
+          "md"
+        ],
+        "data-state": [
+          "off",
+          "on"
+        ]
+      }
+    },
     "gallery": [
       {
         "slug": "settings",
@@ -1949,7 +2266,15 @@
         "class": "ml-heatmap-caption",
         "attributes": {}
       }
-    ]
+    ],
+    "rendered": {
+      "ml-heatmap": {
+        "data-tone": [
+          "info",
+          "success"
+        ]
+      }
+    }
   },
   "calendar": {
     "needs": "script",
@@ -2150,7 +2475,19 @@
           ]
         }
       }
-    ]
+    ],
+    "rendered": {
+      "ml-status-icon": {
+        "data-status": [
+          "backlog",
+          "canceled",
+          "done",
+          "in-progress",
+          "in-review",
+          "todo"
+        ]
+      }
+    }
   },
   "priority-icon": {
     "needs": "nothing",
@@ -2501,7 +2838,17 @@
         "class": "ml-stepper-meter",
         "attributes": {}
       }
-    ]
+    ],
+    "rendered": {
+      "ml-stepper-step": {
+        "data-status": [
+          "complete",
+          "current",
+          "error",
+          "upcoming"
+        ]
+      }
+    }
   },
   "virtual-list": {
     "needs": "script",
@@ -2765,7 +3112,16 @@
           ]
         }
       }
-    ]
+    ],
+    "rendered": {
+      "ml-spinner": {
+        "data-size": [
+          "lg",
+          "md",
+          "sm"
+        ]
+      }
+    }
   },
   "copy-button": {
     "needs": "script",
@@ -2780,7 +3136,20 @@
           ]
         }
       }
-    ]
+    ],
+    "rendered": {
+      "ml-copy-button": {
+        "data-size": [
+          "icon",
+          "sm"
+        ],
+        "data-variant": [
+          "outline",
+          "secondary",
+          "subtle"
+        ]
+      }
+    }
   },
   "password-input": {
     "needs": "script",

package/registry/index.json

@@ -2,7 +2,7 @@
   "$schema": "./schema/registry-index.schema.json",
   "schemaVersion": 2,
   "name": "mlola-ui",
-  "version": "1.1.14",
+  "version": "1.1.18",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",
@@ -177,8 +177,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14",
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -239,7 +239,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -401,7 +401,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -493,7 +493,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -546,7 +546,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/motion": "^1.1.14"
+        "@mlola-ui/motion": "^1.1.18"
       },
       "options": [
         {
@@ -713,8 +713,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14",
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -782,7 +782,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -837,7 +837,7 @@
         "modal"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -889,7 +889,8 @@
       "tags": [
         "menu",
         "overlay",
-        "navigation"
+        "navigation",
+        "dropdown"
       ],
       "title": "Dropdown Menu",
       "type": "registry:ui",
@@ -900,8 +901,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14",
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -912,9 +913,21 @@
             "end"
           ],
           "default": "start"
+        },
+        {
+          "component": "DropdownMenu",
+          "prop": "variant",
+          "values": [
+            "button",
+            "icon"
+          ],
+          "default": "button"
         }
       ],
-      "variants": [],
+      "variants": [
+        "button",
+        "icon"
+      ],
       "sizes": [],
       "files": [
         {
@@ -939,7 +952,7 @@
           "path": "packages/components/dropdown-menu/dropdown-menu.tsx",
           "target": "{{aliases.components}}/dropdown-menu.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-/LLytsatKd5giWMlpsZI2uUvh88pHi8qGQalNd7/wQA="
+          "integrity": "sha256-TSAsDWcx8mVwLdZVEaCrO0Fkeuiaui7Jw/BbZQmJH1Y="
         }
       ],
       "themeContract": {
@@ -977,7 +990,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -1201,8 +1214,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14",
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -1352,7 +1365,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -1403,7 +1416,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18"
       },
       "options": [
         {
@@ -1778,7 +1791,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -1831,8 +1844,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14",
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -1900,7 +1913,8 @@
       "tags": [
         "overlay",
         "dialog",
-        "panel"
+        "panel",
+        "drawer"
       ],
       "usage": {
         "importPath": "{{aliases.components}}/sheet",
@@ -1909,8 +1923,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14",
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -2056,7 +2070,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18"
       },
       "options": [
         {
@@ -2201,7 +2215,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18"
       },
       "options": [
         {
@@ -2333,7 +2347,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -2419,7 +2433,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -2447,7 +2461,7 @@
           "path": "packages/components/toast/toast.tsx",
           "target": "{{aliases.components}}/toast.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-f0DwN0XuV46fSsQf3i9RJcfQbAs2mSz7A8UJoIIICHg="
+          "integrity": "sha256-6hKQ8wLN6uTnfVebpEeuvAxqAXDppWdjzGi33wtW8Y4="
         }
       ],
       "themeContract": {
@@ -2562,7 +2576,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18"
       },
       "options": [
         {
@@ -2701,7 +2715,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -2773,7 +2787,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -2843,7 +2857,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -3041,7 +3055,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -3118,7 +3132,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -3173,7 +3187,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -3236,7 +3250,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -3306,7 +3320,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -3425,8 +3439,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14",
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -3490,7 +3504,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18"
       },
       "options": [
         {
@@ -3577,8 +3591,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14",
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -3652,7 +3666,7 @@
         "sheet"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -3775,7 +3789,7 @@
         "button"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -3878,8 +3892,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.14",
-        "@mlola-ui/icons": "^1.1.14"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {

package/registry/source/packages/components/dropdown-menu/dropdown-menu.tsx

@@ -19,14 +19,17 @@ interface DropdownMenuItem {
 interface DropdownMenuProps {
   trigger: React.ReactNode;
   items: DropdownMenuItem[];
+  /** Names the menu; with `variant="icon"` it also names and titles the trigger. */
   label?: string;
+  /** `button` shows the trigger with a chevron; `icon` is a small icon-only trigger, such as a card's or a column's "…" menu. */
+  variant?: "button" | "icon";
   align?: "start" | "end";
   onSelect?: (label: string) => void;
   className?: string;
 }
 
 const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
-  ({ trigger, items, label = "Menu", align = "start", onSelect, className }, ref) => {
+  ({ trigger, items, label = "Menu", variant = "button", align = "start", onSelect, className }, ref) => {
     const [open, setOpen] = React.useState(false);
     const [activeIndex, setActiveIndex] = React.useState(-1);
     const rootRef = React.useRef<HTMLDivElement>(null);
@@ -89,6 +92,10 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
           type="button"
           aria-haspopup="menu"
           aria-expanded={open}
+          aria-label={variant === "icon" ? label : undefined}
+          title={variant === "icon" ? label : undefined}
+          data-variant={variant === "icon" ? "icon" : undefined}
+          data-hit={variant === "icon" ? "expand" : undefined}
           className="ml-dropdown-trigger"
           onClick={() => open ? close() : openAt(enabled[0] ?? -1)}
           onKeyDown={(event) => {
@@ -105,8 +112,8 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
             }
           }}
         >
-          <span className="ml-dropdown-trigger-label">{trigger}</span>
-          <IconChevronDown aria-hidden="true" className="ml-dropdown-chevron" size="1em" />
+          <span className="ml-dropdown-trigger-label" aria-hidden={variant === "icon" || undefined}>{trigger}</span>
+          {variant === "icon" ? null : <IconChevronDown aria-hidden="true" className="ml-dropdown-chevron" size="1em" />}
         </button>
         {open && portal ? createPortal(
           <div

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

@@ -175,6 +175,8 @@ const SWIPE_DISMISS_PX = 72;
 function ToastCard({ item, paused }: { item: ToastItem; paused: boolean }) {
   const remaining = React.useRef(item.duration);
   const [drag, setDrag] = React.useState<{ start: number; offset: number } | null>(null);
+  // Swiped away, it carries on the way it was thrown (1 right, -1 left) instead of snapping back to fade.
+  const [thrown, setThrown] = React.useState<1 | -1 | null>(null);
 
   // A changed toast (loading → success) gets its full time again.
   React.useEffect(() => {
@@ -182,16 +184,17 @@ function ToastCard({ item, paused }: { item: ToastItem; paused: boolean }) {
   }, [item.revision, item.duration]);
 
   // The timer counts only while the toast can actually be read: not while
-  // hovered, focused, or in a hidden tab. It resumes where it paused.
+  // hovered, focused, held by a finger, or in a hidden tab. It resumes where it paused.
+  const held = drag !== null;
   React.useEffect(() => {
-    if (paused || item.closing || !Number.isFinite(item.duration) || item.duration <= 0) return;
+    if (paused || held || item.closing || !Number.isFinite(item.duration) || item.duration <= 0) return;
     const started = Date.now();
     const timer = window.setTimeout(() => dismissToast(item.id), remaining.current);
     return () => {
       window.clearTimeout(timer);
       remaining.current = Math.max(0, remaining.current - (Date.now() - started));
     };
-  }, [paused, item.closing, item.duration, item.id, item.revision]);
+  }, [paused, held, item.closing, item.duration, item.id, item.revision]);
 
   const urgent = item.tone === "danger" || item.tone === "warning";
   const icon = item.loading ? <Spinner /> : item.icon === undefined ? TONE_ICONS[item.tone] : item.icon;
@@ -207,7 +210,13 @@ function ToastCard({ item, paused }: { item: ToastItem; paused: boolean }) {
         data-has-description={item.description ? "" : undefined}
         data-swiping={drag ? "" : undefined}
         className="ml-toast"
-        style={drag ? { transform: `translateX(${drag.offset}px)`, opacity: Math.max(0.2, 1 - Math.abs(drag.offset) / 200) } : undefined}
+        style={
+          drag
+            ? { transform: `translateX(${drag.offset}px)`, opacity: Math.max(0.2, 1 - Math.abs(drag.offset) / 200) }
+            : thrown
+              ? { transform: `translateX(${thrown * 110}%)`, opacity: 0 }
+              : undefined
+        }
         onPointerDown={(event) => {
           if (event.pointerType === "mouse" || (event.target as HTMLElement).closest("button")) return;
           event.currentTarget.setPointerCapture(event.pointerId);
@@ -217,7 +226,10 @@ function ToastCard({ item, paused }: { item: ToastItem; paused: boolean }) {
           if (drag) setDrag({ ...drag, offset: event.clientX - drag.start });
         }}
         onPointerUp={() => {
-          if (drag && Math.abs(drag.offset) > SWIPE_DISMISS_PX) dismissToast(item.id);
+          if (drag && Math.abs(drag.offset) > SWIPE_DISMISS_PX) {
+            setThrown(drag.offset > 0 ? 1 : -1);
+            dismissToast(item.id);
+          }
           setDrag(null);
         }}
         onPointerCancel={() => setDrag(null)}

package/registry/source-manifest.json

@@ -29,7 +29,7 @@
   "packages/components/context-menu/context-menu.tsx": "sha256-OGaKzthZJGaV5T+4sRWYecA64wEEg2KImKnIzMMg1i4=",
   "packages/components/copy-button/copy-button.tsx": "sha256-6fvfifoiDOtW+WxKWon4SGEn3THtERuCX2hqGSZDtVM=",
   "packages/components/date-picker/date-picker.tsx": "sha256-QABmZzPKHc706/Rs+ln3ifDK3T2lXl34rehhuRXW+8o=",
-  "packages/components/dropdown-menu/dropdown-menu.tsx": "sha256-/LLytsatKd5giWMlpsZI2uUvh88pHi8qGQalNd7/wQA=",
+  "packages/components/dropdown-menu/dropdown-menu.tsx": "sha256-TSAsDWcx8mVwLdZVEaCrO0Fkeuiaui7Jw/BbZQmJH1Y=",
   "packages/components/dropzone/dropzone.tsx": "sha256-tHCCpEWE6839UeLOszTo+R2vAL4Sp9UxuRdLkFLfnq4=",
   "packages/components/empty-state/empty-state.tsx": "sha256-/phk3A6TDaiqo61fCcAc/4Bi85e1yBGAtKXFaGhrjyw=",
   "packages/components/hover-card/hover-card.tsx": "sha256-xLBQc3vVIfQbnN85F34r9SHMGQf8FubSYfk7uP+IS2g=",
@@ -64,7 +64,7 @@
   "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-f0DwN0XuV46fSsQf3i9RJcfQbAs2mSz7A8UJoIIICHg=",
+  "packages/components/toast/toast.tsx": "sha256-6hKQ8wLN6uTnfVebpEeuvAxqAXDppWdjzGi33wtW8Y4=",
   "packages/components/toggle/toggle.tsx": "sha256-8qPHeSliHNdzQS7OLJ47BrvRR75MYyUGJlK4s21XS/U=",
   "packages/components/tooltip/tooltip.tsx": "sha256-PYjLEr+GFmu8VrLua1d4yzk0plXYbjIKMAUlwfIn+1c=",
   "packages/components/tour/tour.tsx": "sha256-b2XJokzSio2N9MFDbAbXn6w2f7diJb1KWedSCycRMmE=",

package/src/knowledge.js

@@ -232,6 +232,12 @@ function valuesByElement() {
     for (const [attribute, values] of Object.entries(attributes)) add(cls, attribute, values);
   }
   const examples = bundled("examples.json") ?? {};
+  // Every value a component's showcase renders, each variant and state.
+  for (const example of Object.values(examples)) {
+    for (const [cls, attributes] of Object.entries(example.rendered ?? {})) {
+      for (const [attribute, list] of Object.entries(attributes)) add(cls, attribute, list);
+    }
+  }
   for (const item of loadRegistry().items) {
     const classes = examples[item.name]?.elements?.map((element) => element.class) ?? [];
     for (const option of item.options ?? []) {

package/src/mcp.js

@@ -104,7 +104,7 @@ function readTools({ cwd, version }) {
     {
       name: "check_markup",
       title: "Check markup against the Mlola contract",
-      description: "Checks HTML or JSX: classes that do not exist, variant classes, data-* values a class does not react to, utility classes, misuse of data-theme or data-mode, and in style attributes and <style> blocks hand-written colors, overridden theme tokens and text faded with opacity. Run it on markup you wrote before finishing.",
+      description: "Checks HTML or JSX: classes that do not exist, variant classes, data-* values a class does not react to, utility classes, misuse of data-theme or data-mode, and in style attributes and <style> blocks hand-written colors, overridden theme tokens and text faded with opacity. Run it on markup you wrote before finishing: pass the whole page or file, <style> blocks included, not an excerpt, since it only checks what it is given.",
       inputSchema: { type: "object", properties: { markup: { type: "string" } }, required: ["markup"], additionalProperties: false },
       annotations: { readOnlyHint: true },
       handler: ({ markup }) => {