@mlola-ui/registry 1.0.11 → 1.0.13

package/snapshot/items/components/password-input.json

@@ -20,8 +20,8 @@
     "input"
   ],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.11",
-    "@mlola-ui/icons": "^1.0.11"
+    "@mlola-ui/behavior": "^1.0.13",
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [
     {

package/snapshot/items/components/popover.json

@@ -18,7 +18,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.11"
+    "@mlola-ui/behavior": "^1.0.13"
   },
   "options": [
     {
@@ -50,7 +50,7 @@
       "path": "packages/components/_internal/anchor.ts",
       "target": "{{aliases.components}}/_internal/anchor.ts",
       "type": "registry:ui",
-      "integrity": "sha256-OPm/4Jf4UUo8IG+/4TAKpGDHtYpvxvGwyq3/RSZQIGc="
+      "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
     },
     {
       "path": "packages/components/_internal/floating.ts",

package/snapshot/items/components/segmented-control.json

@@ -19,7 +19,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.11"
+    "@mlola-ui/behavior": "^1.0.13"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/select.json

@@ -18,8 +18,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.11",
-    "@mlola-ui/icons": "^1.0.11"
+    "@mlola-ui/behavior": "^1.0.13",
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [
     {
@@ -43,7 +43,7 @@
       "path": "packages/components/_internal/anchor.ts",
       "target": "{{aliases.components}}/_internal/anchor.ts",
       "type": "registry:ui",
-      "integrity": "sha256-OPm/4Jf4UUo8IG+/4TAKpGDHtYpvxvGwyq3/RSZQIGc="
+      "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
     },
     {
       "path": "packages/components/_internal/floating.ts",

package/snapshot/items/components/sheet.json

@@ -18,8 +18,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.11",
-    "@mlola-ui/icons": "^1.0.11"
+    "@mlola-ui/behavior": "^1.0.13",
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [
     {

package/snapshot/items/components/slider.json

@@ -18,7 +18,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.11"
+    "@mlola-ui/behavior": "^1.0.13"
   },
   "options": [
     {

package/snapshot/items/components/stepper.json

@@ -20,7 +20,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.11"
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [
     {

package/snapshot/items/components/tabs.json

@@ -18,7 +18,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.11"
+    "@mlola-ui/behavior": "^1.0.13"
   },
   "options": [
     {

package/snapshot/items/components/tag-input.json

@@ -23,7 +23,7 @@
     "input"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.11"
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/time-picker.json

@@ -22,7 +22,7 @@
     "popover"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.11"
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [],
   "variants": [],

package/snapshot/items/components/timeline.json

@@ -18,7 +18,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.11"
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [
     {

package/snapshot/items/components/toast.json

@@ -20,7 +20,7 @@
     "spinner"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.11"
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [
     {

package/snapshot/items/components/tooltip.json

@@ -23,7 +23,9 @@
     "isDefault": false
   },
   "registryDependencies": [],
-  "engineDependencies": {},
+  "engineDependencies": {
+    "@mlola-ui/behavior": "^1.0.13"
+  },
   "options": [
     {
       "component": "Tooltip",
@@ -40,6 +42,12 @@
   "variants": [],
   "sizes": [],
   "files": [
+    {
+      "path": "packages/components/_internal/anchor.ts",
+      "target": "{{aliases.components}}/_internal/anchor.ts",
+      "type": "registry:ui",
+      "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
+    },
     {
       "path": "packages/components/_internal/react.ts",
       "target": "{{aliases.components}}/_internal/react.ts",
@@ -50,7 +58,7 @@
       "path": "packages/components/tooltip/tooltip.tsx",
       "target": "{{aliases.components}}/tooltip.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-NbaOUmlUbBlUIdovchrWwH2QqzuvXB97DjnJnrHf4Gc="
+      "integrity": "sha256-hplqwWF/ZqQQ9oyoErrOA3VjkRCDCbqwt5xgZOdsFcA="
     }
   ],
   "themeContract": {

package/snapshot/items/components/tour.json

@@ -20,8 +20,8 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.11",
-    "@mlola-ui/icons": "^1.0.11"
+    "@mlola-ui/behavior": "^1.0.13",
+    "@mlola-ui/icons": "^1.0.13"
   },
   "options": [],
   "variants": [],
@@ -31,7 +31,7 @@
       "path": "packages/components/_internal/anchor.ts",
       "target": "{{aliases.components}}/_internal/anchor.ts",
       "type": "registry:ui",
-      "integrity": "sha256-OPm/4Jf4UUo8IG+/4TAKpGDHtYpvxvGwyq3/RSZQIGc="
+      "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
     },
     {
       "path": "packages/components/_internal/floating.ts",

package/snapshot/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 { placeFloating, type Align, type Placement, type Rect, type Side } from "@mlola-ui/behavior/logic";
+export { fitTooltip, placeFloating, type Align, type Placement, type Rect, type Side } from "@mlola-ui/behavior/logic";

package/snapshot/source/packages/components/breadcrumb/breadcrumb.tsx

@@ -4,7 +4,15 @@ import * as React from "react";
 import { cx } from "../_internal/react";
 import { IconChevronRight } from "@mlola-ui/icons";
 
-export type BreadcrumbItemType = { label: string; href?: string };
+export type BreadcrumbItemType = {
+  label: string;
+  /** A link to the page. */
+  href?: string;
+  /** In-app navigation without a URL; the item becomes a button. */
+  onSelect?: () => void;
+  /** A decorative mark before the label, such as a page's icon. */
+  icon?: React.ReactNode;
+};
 type BreadcrumbProps = { items: BreadcrumbItemType[]; separator?: React.ReactNode; className?: string };
 
 const BreadcrumbList = React.forwardRef<HTMLOListElement, React.OlHTMLAttributes<HTMLOListElement>>(
@@ -29,6 +37,8 @@ function BreadcrumbEllipsis({ className }: { className?: string }) {
   return <span aria-hidden="true" className={cx("ml-breadcrumb-ellipsis", className)}>…</span>;
 }
 
+const icon = (item: BreadcrumbItemType) => (item.icon ? <span aria-hidden="true" className="ml-breadcrumb-icon">{item.icon}</span> : null);
+
 export function Breadcrumb({ items, separator, className }: BreadcrumbProps) {
   const last = items.length - 1;
   const collapse = items.length > 3;
@@ -46,9 +56,13 @@ export function Breadcrumb({ items, separator, className }: BreadcrumbProps) {
                 </BreadcrumbItem>
               ) : null}
               <BreadcrumbItem data-collapsible={middle && collapse ? "" : undefined}>
-                {current || !item.href
-                  ? <BreadcrumbPage>{item.label}</BreadcrumbPage>
-                  : <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>}
+                {current || (!item.href && !item.onSelect) ? (
+                  <BreadcrumbPage>{icon(item)}{item.label}</BreadcrumbPage>
+                ) : item.href ? (
+                  <BreadcrumbLink href={item.href}>{icon(item)}{item.label}</BreadcrumbLink>
+                ) : (
+                  <button type="button" className="ml-breadcrumb-link" data-hit="expand" onClick={item.onSelect}>{icon(item)}{item.label}</button>
+                )}
                 {!current ? <BreadcrumbSeparator>{separator}</BreadcrumbSeparator> : null}
               </BreadcrumbItem>
             </React.Fragment>

package/snapshot/source/packages/components/carousel/carousel.tsx

@@ -180,6 +180,7 @@ export function Carousel({
       aria-roledescription="carousel"
       aria-label={label}
       data-playing={playing || undefined}
+      data-arrows={(arrows && positions > 1) || undefined}
       style={{ ...style, "--ml-carousel-per-view": view, "--ml-carousel-peek": peek ?? "0px", "--ml-carousel-min": minSlideWidth ?? "0px", "--ml-carousel-autoplay": `${autoplay ?? 0}ms` } as React.CSSProperties}
       onPointerEnter={() => setPaused(true)}
       onPointerLeave={() => setPaused(false)}

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

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { fitTooltip, type Side } from "../_internal/anchor";
 import { cx } from "../_internal/react";
 
 export type TooltipPlacement = "top" | "bottom" | "left" | "right";
@@ -14,6 +15,10 @@ interface TooltipProps {
 
 function Tooltip({ content, placement = "top", delay = 200, children, className }: TooltipProps) {
   const [open, setOpen] = React.useState(false);
+  // Where it actually opens: the asked side, flipped or slid to stay on screen.
+  const [fit, setFit] = React.useState<{ side: Side; shift: number }>({ side: placement, shift: 0 });
+  const root = React.useRef<HTMLSpanElement>(null);
+  const tip = React.useRef<HTMLSpanElement>(null);
   const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const id = React.useId();
   const clear = () => {
@@ -29,6 +34,17 @@ function Tooltip({ content, placement = "top", delay = 200, children, className
     setOpen(false);
   };
   React.useEffect(() => clear, []);
+  React.useLayoutEffect(() => {
+    const anchor = root.current?.firstElementChild ?? root.current;
+    if (!open || !anchor || !tip.current) {
+      setFit({ side: placement, shift: 0 });
+      return;
+    }
+    const a = anchor.getBoundingClientRect();
+    // Layout size, not the painted box: the pop-in animation starts scaled down.
+    const t = { width: tip.current.offsetWidth, height: tip.current.offsetHeight };
+    setFit(fitTooltip({ x: a.left, y: a.top, width: a.width, height: a.height }, t, { width: document.documentElement.clientWidth, height: window.innerHeight }, placement));
+  }, [open, placement]);
   React.useEffect(() => {
     if (!open) return;
     const onKeyDown = (event: KeyboardEvent) => {
@@ -55,10 +71,18 @@ function Tooltip({ content, placement = "top", delay = 200, children, className
       : childProps["aria-describedby"],
   } as Record<string, unknown>);
   return (
-    <span className="ml-tooltip-root" onMouseEnter={clear} onMouseLeave={hide}>
+    <span ref={root} className="ml-tooltip-root" onMouseEnter={clear} onMouseLeave={hide}>
       {trigger}
       {open ? (
-        <span id={id} role="tooltip" data-side={placement} data-state="open" className={cx("ml-tooltip", className)}>
+        <span
+          ref={tip}
+          id={id}
+          role="tooltip"
+          data-side={fit.side}
+          data-state="open"
+          className={cx("ml-tooltip", className)}
+          style={{ "--ml-tooltip-shift": `${fit.shift}px` } as React.CSSProperties}
+        >
           {content}
           <span aria-hidden="true" className="ml-tooltip-arrow" />
         </span>

package/snapshot/source-manifest.json

@@ -1,5 +1,5 @@
 {
-  "packages/components/_internal/anchor.ts": "sha256-OPm/4Jf4UUo8IG+/4TAKpGDHtYpvxvGwyq3/RSZQIGc=",
+  "packages/components/_internal/anchor.ts": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8=",
   "packages/components/_internal/clipboard.ts": "sha256-0y5p88CTXWuOrUYlC5J4XP1VCrOwkx9jYWVHmD2LouQ=",
   "packages/components/_internal/dialog.ts": "sha256-796y3oNOVWarLvICTdi+d0/2axqSrzLVJiyBeh9X7bU=",
   "packages/components/_internal/floating.ts": "sha256-+WxgC4CtAlSr2qA1EkoDTgto535XLIPsvtOfdOK6CHk=",
@@ -13,12 +13,12 @@
   "packages/components/app-shell/app-shell.tsx": "sha256-XAq82XOTH3ZR+hxTkYFu8P7Ih2aI6ERy/TpXc2VMUwM=",
   "packages/components/avatar/avatar.tsx": "sha256-EjqC8ytKqRtsTVdK6vncaDfhO/i7ICe+jwaYCg5bjIw=",
   "packages/components/badge/badge.tsx": "sha256-flEH8S2jZ/64n3Y/ROhC9+9rvF7wXaN0xLcMMwqNOVQ=",
-  "packages/components/breadcrumb/breadcrumb.tsx": "sha256-Mt9mvmwwDgdp5/+mj5byIrh8+hicsp7R6UcvUlK0yog=",
+  "packages/components/breadcrumb/breadcrumb.tsx": "sha256-mxQpach2kFayT8H1vMt5252LQLxVV+sohdVXDhPuKoU=",
   "packages/components/button/button.tsx": "sha256-sXVANbGeFSYPHpiWuPvHHqMoPjG0zl0HSsKEdTgl5ME=",
   "packages/components/calendar/calendar.tsx": "sha256-rWiS4YAueZfVoo6j5Fi3uN7A+yApe5U6HMm1woTVjys=",
   "packages/components/calendar/dates.ts": "sha256-mygYkoC70av2ZQ0vkxf885trwW97Wd10I4dptYQe+4A=",
   "packages/components/card/card.tsx": "sha256-aMKbv5DWYYWq7GZAFR9O1fuYE0H61WCjkvEbRMOd894=",
-  "packages/components/carousel/carousel.tsx": "sha256-pamugpB6Ujt9Ylxd37jNF/ZwSb8iRkW/MoYe12nY3i4=",
+  "packages/components/carousel/carousel.tsx": "sha256-Gsw0LhQsOuvdQN/F2KDGVC/gJq53+ifLs19u95RWCoU=",
   "packages/components/checkbox/checkbox.tsx": "sha256-hz4YbGwOxv/aJpJHrLXR4MKSWJGyjzoJEIGvdhyML9M=",
   "packages/components/color-picker/color-picker.tsx": "sha256-E+QB6MbSxg+3AZX3A7bOkst4arxgpmFL2ZmochoWCl8=",
   "packages/components/color-picker/color.ts": "sha256-YqSgYjzn7XfPWAHuyzbwOhbg/ScaSfB7V73e9w+OjJs=",
@@ -64,7 +64,7 @@
   "packages/components/timeline/timeline.tsx": "sha256-nVg7lBcAUAzqEb0YrHagJXSaHE2aWWE9bUbQMWQY6PU=",
   "packages/components/toast/toast.tsx": "sha256-f0DwN0XuV46fSsQf3i9RJcfQbAs2mSz7A8UJoIIICHg=",
   "packages/components/toggle/toggle.tsx": "sha256-8qPHeSliHNdzQS7OLJ47BrvRR75MYyUGJlK4s21XS/U=",
-  "packages/components/tooltip/tooltip.tsx": "sha256-NbaOUmlUbBlUIdovchrWwH2QqzuvXB97DjnJnrHf4Gc=",
+  "packages/components/tooltip/tooltip.tsx": "sha256-hplqwWF/ZqQQ9oyoErrOA3VjkRCDCbqwt5xgZOdsFcA=",
   "packages/components/tour/tour.tsx": "sha256-mrAE8aVDBVIibGvQah9Gh3mzIiWDFxB6aObzqFo5xXU=",
   "packages/components/virtual-list/virtual-list.tsx": "sha256-raGEFn4HlAOIohqZcy0DgptsnUIPS/6bWLYeTe+M9E8=",
   "packages/components/virtual-list/virtual.ts": "sha256-PyDIj3C2Vwb1i4ZssxSlYjgKmZPBIFLZFNq8YCW2Z78="