mlola-ui 1.1.15 → 1.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mlola-ui",
-  "version": "1.1.15",
+  "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

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

package/registry/examples.json

@@ -682,6 +682,9 @@
         "attributes": {
           "aria-expanded": [
             "true"
+          ],
+          "data-variant": [
+            "icon"
           ]
         }
       },
@@ -741,6 +744,11 @@
         "data-state": [
           "closed"
         ]
+      },
+      "ml-dropdown-trigger": {
+        "data-variant": [
+          "icon"
+        ]
       }
     },
     "gallery": [

package/registry/index.json

@@ -2,7 +2,7 @@
   "$schema": "./schema/registry-index.schema.json",
   "schemaVersion": 2,
   "name": "mlola-ui",
-  "version": "1.1.15",
+  "version": "1.1.18",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",
@@ -177,8 +177,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15",
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -239,7 +239,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -401,7 +401,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -493,7 +493,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -546,7 +546,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/motion": "^1.1.15"
+        "@mlola-ui/motion": "^1.1.18"
       },
       "options": [
         {
@@ -713,8 +713,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15",
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -782,7 +782,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -837,7 +837,7 @@
         "modal"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -901,8 +901,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15",
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -913,9 +913,21 @@
             "end"
           ],
           "default": "start"
+        },
+        {
+          "component": "DropdownMenu",
+          "prop": "variant",
+          "values": [
+            "button",
+            "icon"
+          ],
+          "default": "button"
         }
       ],
-      "variants": [],
+      "variants": [
+        "button",
+        "icon"
+      ],
       "sizes": [],
       "files": [
         {
@@ -940,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": {
@@ -978,7 +990,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -1202,8 +1214,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15",
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -1353,7 +1365,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -1404,7 +1416,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18"
       },
       "options": [
         {
@@ -1779,7 +1791,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -1832,8 +1844,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15",
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -1911,8 +1923,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15",
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -2058,7 +2070,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18"
       },
       "options": [
         {
@@ -2203,7 +2215,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18"
       },
       "options": [
         {
@@ -2335,7 +2347,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -2421,7 +2433,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -2449,7 +2461,7 @@
           "path": "packages/components/toast/toast.tsx",
           "target": "{{aliases.components}}/toast.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-f0DwN0XuV46fSsQf3i9RJcfQbAs2mSz7A8UJoIIICHg="
+          "integrity": "sha256-6hKQ8wLN6uTnfVebpEeuvAxqAXDppWdjzGi33wtW8Y4="
         }
       ],
       "themeContract": {
@@ -2564,7 +2576,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18"
       },
       "options": [
         {
@@ -2703,7 +2715,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -2775,7 +2787,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -2845,7 +2857,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -3043,7 +3055,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -3120,7 +3132,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -3175,7 +3187,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -3238,7 +3250,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -3308,7 +3320,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -3427,8 +3439,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15",
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -3492,7 +3504,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18"
       },
       "options": [
         {
@@ -3579,8 +3591,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15",
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/behavior": "^1.1.18",
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -3654,7 +3666,7 @@
         "sheet"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [],
       "variants": [],
@@ -3777,7 +3789,7 @@
         "button"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.15"
+        "@mlola-ui/icons": "^1.1.18"
       },
       "options": [
         {
@@ -3880,8 +3892,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.15",
-        "@mlola-ui/icons": "^1.1.15"
+        "@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=",