mlola-ui 1.1.10 → 1.1.12

package/package.json

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

@@ -202,6 +202,7 @@ correct. This table is read out of the stylesheet, so it is never stale.
 | `.ml-dropdown-item` | `data-danger` | _presence only_ |
 | `.ml-dropdown-item` | `data-highlighted` | _presence only_ |
 | `.ml-dropdown-menu` | `data-align` | `end` |
+| `.ml-dropdown-menu` | `data-side` | `top` |
 | `.ml-dropdown-trigger` | `aria-expanded` | `true` |
 | `.ml-dropzone` | `aria-disabled` | _presence only_ |
 | `.ml-dropzone` | `data-dragging` | _presence only_ |

package/registry/contract.json

@@ -689,6 +689,9 @@
     "ml-dropdown-menu": {
       "data-align": [
         "end"
+      ],
+      "data-side": [
+        "top"
       ]
     },
     "ml-dropdown-trigger": {

package/registry/examples.json

@@ -582,6 +582,9 @@
         "attributes": {
           "data-align": [
             "end"
+          ],
+          "data-side": [
+            "top"
           ]
         }
       },

package/registry/index.json

@@ -2,7 +2,7 @@
   "$schema": "./schema/registry-index.schema.json",
   "schemaVersion": 2,
   "name": "mlola-ui",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",
@@ -177,8 +177,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10",
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12",
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -239,7 +239,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -401,7 +401,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -493,7 +493,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [],
       "variants": [],
@@ -546,7 +546,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/motion": "^1.1.10"
+        "@mlola-ui/motion": "^1.1.12"
       },
       "options": [
         {
@@ -713,8 +713,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10",
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12",
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -782,7 +782,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [],
       "variants": [],
@@ -837,7 +837,7 @@
         "modal"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [],
       "variants": [],
@@ -900,8 +900,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10",
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12",
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -927,7 +927,7 @@
           "path": "packages/components/dropdown-menu/dropdown-menu.tsx",
           "target": "{{aliases.components}}/dropdown-menu.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-xgybCu9HBxIieafu5CjAtY4aCOQoaAj/VUCH6D6vLP8="
+          "integrity": "sha256-kafvzv+Kc9MKJqXteEIUwvYvSD+npDrOyvthc5+L2ck="
         }
       ],
       "themeContract": {
@@ -965,7 +965,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [],
       "variants": [],
@@ -1189,8 +1189,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10",
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12",
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -1219,7 +1219,7 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
         },
         {
           "path": "packages/components/_internal/dialog.ts",
@@ -1340,7 +1340,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [],
       "variants": [],
@@ -1391,7 +1391,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12"
       },
       "options": [
         {
@@ -1423,7 +1423,7 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
         },
         {
           "path": "packages/components/_internal/floating.ts",
@@ -1766,7 +1766,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12"
       },
       "options": [],
       "variants": [],
@@ -1819,8 +1819,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10",
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12",
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -1844,7 +1844,7 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
         },
         {
           "path": "packages/components/_internal/floating.ts",
@@ -1897,8 +1897,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10",
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12",
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -1934,7 +1934,7 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
         },
         {
           "path": "packages/components/_internal/dialog.ts",
@@ -2044,7 +2044,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12"
       },
       "options": [
         {
@@ -2189,7 +2189,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12"
       },
       "options": [
         {
@@ -2321,7 +2321,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -2407,7 +2407,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -2550,7 +2550,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12"
       },
       "options": [
         {
@@ -2572,7 +2572,7 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -2689,7 +2689,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -2761,7 +2761,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -2831,7 +2831,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [],
       "variants": [],
@@ -3029,7 +3029,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -3106,7 +3106,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [],
       "variants": [],
@@ -3161,7 +3161,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [],
       "variants": [],
@@ -3224,7 +3224,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -3294,7 +3294,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -3413,8 +3413,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10",
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12",
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [],
       "variants": [],
@@ -3424,7 +3424,7 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
         },
         {
           "path": "packages/components/_internal/floating.ts",
@@ -3478,7 +3478,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12"
       },
       "options": [
         {
@@ -3510,7 +3510,7 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
         },
         {
           "path": "packages/components/_internal/floating.ts",
@@ -3565,8 +3565,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10",
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12",
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [],
       "variants": [],
@@ -3576,7 +3576,7 @@
           "path": "packages/components/_internal/anchor.ts",
           "target": "{{aliases.components}}/_internal/anchor.ts",
           "type": "registry:ui",
-          "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+          "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
         },
         {
           "path": "packages/components/_internal/floating.ts",
@@ -3640,7 +3640,7 @@
         "sheet"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [],
       "variants": [],
@@ -3763,7 +3763,7 @@
         "button"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {
@@ -3866,8 +3866,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.10",
-        "@mlola-ui/icons": "^1.1.10"
+        "@mlola-ui/behavior": "^1.1.12",
+        "@mlola-ui/icons": "^1.1.12"
       },
       "options": [
         {

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

@@ -2,4 +2,4 @@
  * Where a floating layer goes next to its anchor. The math is shared with the
  * framework-free runtime, so it lives in @mlola-ui/behavior/logic.
  */
-export { fitTooltip, placeFloating, type Align, type Placement, type Rect, type Side } from "@mlola-ui/behavior/logic";
+export { fitMenu, fitTooltip, placeFloating, type Align, type Placement, type Rect, type Side } from "@mlola-ui/behavior/logic";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { rovingIndex } from "@mlola-ui/behavior/logic";
+import { fitMenu, rovingIndex } from "@mlola-ui/behavior/logic";
 import { composeRefs, cx } from "../_internal/react";
 import { IconChevronDown } from "@mlola-ui/icons";
 
@@ -29,6 +29,7 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
     const [activeIndex, setActiveIndex] = React.useState(-1);
     const rootRef = React.useRef<HTMLDivElement>(null);
     const triggerRef = React.useRef<HTMLButtonElement>(null);
+    const menuRef = React.useRef<HTMLDivElement>(null);
     const itemRefs = React.useRef<Array<HTMLButtonElement | null>>([]);
     const enabled = React.useMemo(
       () => items.map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0),
@@ -64,6 +65,27 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
       if (target >= 0) focus(target);
     };
 
+    // CSS hangs the menu under the trigger; this keeps it on screen, the same way the framework-free runtime does.
+    React.useLayoutEffect(() => {
+      const menu = menuRef.current;
+      const root = rootRef.current;
+      if (!open || !menu || !root) return;
+      const fit = () => {
+        const rect = root.getBoundingClientRect();
+        const { side, shift } = fitMenu(
+          { x: rect.left, y: rect.top, width: rect.width, height: rect.height },
+          { width: menu.offsetWidth, height: menu.offsetHeight },
+          { width: window.innerWidth, height: window.innerHeight },
+          align,
+        );
+        menu.style.setProperty("--ml-dropdown-shift", `${shift}px`);
+        menu.setAttribute("data-side", side);
+      };
+      fit();
+      window.addEventListener("resize", fit);
+      return () => window.removeEventListener("resize", fit);
+    }, [align, open]);
+
     React.useEffect(() => {
       if (!open) return;
       const onPointerDown = (event: MouseEvent) => {
@@ -99,6 +121,7 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
         </button>
         {open ? (
           <div
+            ref={menuRef}
             role="menu"
             aria-label={label}
             data-align={align}

package/registry/source-manifest.json

@@ -1,5 +1,5 @@
 {
-  "packages/components/_internal/anchor.ts": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8=",
+  "packages/components/_internal/anchor.ts": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w=",
   "packages/components/_internal/clipboard.ts": "sha256-0y5p88CTXWuOrUYlC5J4XP1VCrOwkx9jYWVHmD2LouQ=",
   "packages/components/_internal/dialog.ts": "sha256-dfOsfaszM/rhBJXvl7vtM4Vdh7SGflY5Capi1YoY6ow=",
   "packages/components/_internal/dom.ts": "sha256-TJp94MipbXHonH/PC7FFHu5pnAqcoxzLocksWLsTAsc=",
@@ -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-xgybCu9HBxIieafu5CjAtY4aCOQoaAj/VUCH6D6vLP8=",
+  "packages/components/dropdown-menu/dropdown-menu.tsx": "sha256-kafvzv+Kc9MKJqXteEIUwvYvSD+npDrOyvthc5+L2ck=",
   "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-Bu5m03mFjiM7x38U1aSrcb9Th8RLYozyjwW/Cu3knlk=",

package/src/knowledge.js

@@ -200,7 +200,9 @@ function tagsOf(markup) {
     const attributes = new Map();
     for (const attribute of match[2].matchAll(/([^\s"'>={}]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|(\{(?:[^{}]|\{[^{}]*\})*\})))?/g)) {
       const [, name, double, single, expression] = attribute;
-      const value = double ?? single ?? (expression ? /^\{\s*["'`]([^"'`$]*)["'`]\s*\}$/.exec(expression)?.[1] ?? null : "");
+      let value = double ?? single ?? (expression ? /^\{\s*["'`]([^"'`$]*)["'`]\s*\}$/.exec(expression)?.[1] ?? null : "");
+      // Markup built in a script string ('<span data-tone="' + tone + '">') is only known at runtime.
+      if (typeof value === "string" && /['"`]\s*\+|\+\s*['"`]|\$\{/.test(value)) value = null;
       attributes.set(name, value);
       if (expression) attributes.set(`${name}:raw`, expression);
     }
@@ -323,6 +325,8 @@ export function checkMarkup(markup) {
       const open = rule.lastIndexOf("{");
       if (open < 0) continue;
       const selector = rule.slice(0, open).split("{").pop().trim();
+      // A keyframe (from, to, 50%) is a step of an animation, not a rule for text at rest.
+      if (/^(from|to|\d+(\.\d+)?%)(\s*,\s*(from|to|\d+(\.\d+)?%))*$/i.test(selector)) continue;
       const body = rule.slice(open + 1).replace(/url\([^)]*\)/g, "");
       const where = `<style> ${selector}`;
       const overridden = [...body.matchAll(/(--ml-[\w-]+)\s*:/g)].map((match) => match[1]).filter((token) => tokenNames.has(token));
@@ -333,8 +337,9 @@ export function checkMarkup(markup) {
         note("error", where, `${overridden.join(", ")} is a theme token; setting it here overrides the theme.`, "Pick a theme, or change the theme's spec (mlola.theme.json), instead of redefining its tokens.");
       }
       // Faded text: its contrast now depends on the theme behind it.
-      const opacity = /(?:^|;)\s*opacity\s*:\s*(0?\.\d+|0)\s*(?:;|$)/.exec(body);
-      if (opacity && !/disabled|:empty|::?placeholder|\[hidden\]|inert/.test(selector)) {
+      // opacity: 0 hides; only a value between 0 and 1 fades what is still read.
+      const opacity = /(?:^|;)\s*opacity\s*:\s*(0?\.\d+)\s*(?:;|$)/.exec(body);
+      if (opacity && Number(opacity[1]) > 0 && !/disabled|:empty|::?placeholder|\[hidden\]|inert/.test(selector)) {
         note("warning", where, `opacity: ${opacity[1]} fades whatever text is inside, and how far it falls below the contrast floor depends on the theme and the fill behind it.`, "For quieter text use color: var(--ml-text-muted); on a filled control, its -foreground role. Keep opacity for disabled or decorative parts.");
       }
     }