@mlola-ui/registry 1.0.4 → 1.0.6

package/snapshot/items/components/status-icon.json

@@ -19,6 +19,22 @@
   },
   "registryDependencies": [],
   "engineDependencies": {},
+  "options": [
+    {
+      "component": "StatusIcon",
+      "prop": "status",
+      "values": [
+        "backlog",
+        "todo",
+        "in-progress",
+        "in-review",
+        "done",
+        "canceled"
+      ]
+    }
+  ],
+  "variants": [],
+  "sizes": [],
   "files": [
     {
       "path": "packages/components/_internal/react.ts",

package/snapshot/items/components/stepper.json

@@ -20,8 +20,21 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/icons": "^1.0.6"
   },
+  "options": [
+    {
+      "component": "Stepper",
+      "prop": "orientation",
+      "values": [
+        "horizontal",
+        "vertical"
+      ],
+      "default": "horizontal"
+    }
+  ],
+  "variants": [],
+  "sizes": [],
   "files": [
     {
       "path": "packages/components/_internal/react.ts",

package/snapshot/items/components/table.json

@@ -6,14 +6,6 @@
   "title": "Table",
   "description": "A compositional data table with sortable columns, striped rows, density sizes, and footer totals",
   "category": "data",
-  "variants": [
-    "default",
-    "striped"
-  ],
-  "sizes": [
-    "sm",
-    "md"
-  ],
   "tags": [
     "data",
     "layout"
@@ -25,6 +17,42 @@
   },
   "registryDependencies": [],
   "engineDependencies": {},
+  "options": [
+    {
+      "component": "Table",
+      "prop": "size",
+      "values": [
+        "sm",
+        "md"
+      ],
+      "default": "md"
+    },
+    {
+      "component": "TableHead",
+      "prop": "align",
+      "values": [
+        "left",
+        "center",
+        "right"
+      ],
+      "default": "left"
+    },
+    {
+      "component": "TableCell",
+      "prop": "align",
+      "values": [
+        "left",
+        "center",
+        "right"
+      ],
+      "default": "left"
+    }
+  ],
+  "variants": [],
+  "sizes": [
+    "sm",
+    "md"
+  ],
   "files": [
     {
       "path": "packages/components/_internal/react.ts",
@@ -36,7 +64,7 @@
       "path": "packages/components/table/table.tsx",
       "target": "{{aliases.components}}/table.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-ed1Qn2sIpxRvGdPDAb5ih5AcXr5PmHTHdlrJLYDYRp8="
+      "integrity": "sha256-xJlWzCH76Lrgg/HrlnVTHkG5dfCkbzjWXEdTVG5Jk4w="
     }
   ],
   "themeContract": {

package/snapshot/items/components/tabs.json

@@ -6,12 +6,6 @@
   "title": "Tabs",
   "description": "Tabbed interface with underline, pills, and enclosed variants",
   "category": "navigation",
-  "variants": [
-    "default",
-    "pills",
-    "enclosed"
-  ],
-  "sizes": [],
   "tags": [
     "navigation",
     "interactive",
@@ -24,8 +18,35 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.4"
+    "@mlola-ui/behavior": "^1.0.6"
   },
+  "options": [
+    {
+      "component": "Tabs",
+      "prop": "orientation",
+      "values": [
+        "horizontal",
+        "vertical"
+      ],
+      "default": "horizontal"
+    },
+    {
+      "component": "Tabs",
+      "prop": "variant",
+      "values": [
+        "default",
+        "pills",
+        "enclosed"
+      ],
+      "default": "default"
+    }
+  ],
+  "variants": [
+    "default",
+    "pills",
+    "enclosed"
+  ],
+  "sizes": [],
   "files": [
     {
       "path": "packages/components/_internal/react.ts",

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

@@ -23,8 +23,11 @@
     "input"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/icons": "^1.0.6"
   },
+  "options": [],
+  "variants": [],
+  "sizes": [],
   "files": [
     {
       "path": "packages/components/_internal/react.ts",
@@ -36,7 +39,7 @@
       "path": "packages/components/tag-input/tag-input.tsx",
       "target": "{{aliases.components}}/tag-input.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-EK7xJTe3Y/S5Kn3vS0zBQg9lC+RVoGvky6HOAt+DnAw="
+      "integrity": "sha256-lc4ofz1/lUnb7B/GlFElVKXLbPwtJFAjE5vWwAY99fA="
     }
   ],
   "themeContract": {

package/snapshot/items/components/textarea.json

@@ -20,6 +20,9 @@
     "input"
   ],
   "engineDependencies": {},
+  "options": [],
+  "variants": [],
+  "sizes": [],
   "files": [
     {
       "path": "packages/components/_internal/react.ts",

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

@@ -22,8 +22,11 @@
     "popover"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/icons": "^1.0.6"
   },
+  "options": [],
+  "variants": [],
+  "sizes": [],
   "files": [
     {
       "path": "packages/components/_internal/react.ts",

package/snapshot/items/components/timeline.json

@@ -6,12 +6,6 @@
   "title": "Timeline",
   "description": "A vertical event timeline with status dots, timestamps, and custom icon nodes",
   "category": "data",
-  "variants": [
-    "complete",
-    "current",
-    "upcoming"
-  ],
-  "sizes": [],
   "tags": [
     "data",
     "history",
@@ -24,8 +18,44 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/icons": "^1.0.6"
   },
+  "options": [
+    {
+      "component": "TimelineItem",
+      "prop": "status",
+      "values": [
+        "complete",
+        "current",
+        "upcoming"
+      ],
+      "default": "upcoming"
+    },
+    {
+      "component": "TimelineItem",
+      "prop": "tone",
+      "values": [
+        "neutral",
+        "primary",
+        "info",
+        "success",
+        "warning",
+        "danger"
+      ]
+    },
+    {
+      "component": "TimelineDot",
+      "prop": "status",
+      "values": [
+        "complete",
+        "current",
+        "upcoming"
+      ],
+      "default": "upcoming"
+    }
+  ],
+  "variants": [],
+  "sizes": [],
   "files": [
     {
       "path": "packages/components/_internal/react.ts",

package/snapshot/items/components/toast.json

@@ -6,14 +6,6 @@
   "title": "Toast",
   "description": "Toast notification system with an imperative API, auto-dismiss, and stacking",
   "category": "feedback",
-  "variants": [
-    "default",
-    "success",
-    "warning",
-    "error",
-    "info"
-  ],
-  "sizes": [],
   "tags": [
     "notification",
     "feedback",
@@ -26,8 +18,23 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/icons": "^1.0.6"
   },
+  "options": [
+    {
+      "component": "Toaster",
+      "prop": "position",
+      "values": [
+        "top-right",
+        "top-center",
+        "bottom-right",
+        "bottom-center"
+      ],
+      "default": "top-right"
+    }
+  ],
+  "variants": [],
+  "sizes": [],
   "files": [
     {
       "path": "packages/components/_internal/react.ts",

package/snapshot/items/components/toggle.json

@@ -6,12 +6,6 @@
   "title": "Toggle",
   "description": "iOS-style switch and button-style toggle with controlled and uncontrolled modes",
   "category": "actions",
-  "variants": [],
-  "sizes": [
-    "sm",
-    "md",
-    "lg"
-  ],
   "tags": [
     "form",
     "interactive",
@@ -24,6 +18,34 @@
   },
   "registryDependencies": [],
   "engineDependencies": {},
+  "options": [
+    {
+      "component": "Switch",
+      "prop": "size",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md"
+    },
+    {
+      "component": "Toggle",
+      "prop": "size",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md"
+    }
+  ],
+  "variants": [],
+  "sizes": [
+    "sm",
+    "md",
+    "lg"
+  ],
   "files": [
     {
       "path": "packages/components/_internal/react.ts",

package/snapshot/items/components/tooltip.json

@@ -6,8 +6,6 @@
   "title": "Tooltip",
   "description": "Hover and focus tooltip with four placements, delay, and arrow",
   "category": "overlays",
-  "variants": [],
-  "sizes": [],
   "placements": [
     "top",
     "bottom",
@@ -26,6 +24,21 @@
   },
   "registryDependencies": [],
   "engineDependencies": {},
+  "options": [
+    {
+      "component": "Tooltip",
+      "prop": "placement",
+      "values": [
+        "top",
+        "bottom",
+        "left",
+        "right"
+      ],
+      "default": "top"
+    }
+  ],
+  "variants": [],
+  "sizes": [],
   "files": [
     {
       "path": "packages/components/_internal/react.ts",

package/snapshot/items/components/tour.json

@@ -20,14 +20,18 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/behavior": "^1.0.6",
+    "@mlola-ui/icons": "^1.0.6"
   },
+  "options": [],
+  "variants": [],
+  "sizes": [],
   "files": [
     {
       "path": "packages/components/_internal/anchor.ts",
       "target": "{{aliases.components}}/_internal/anchor.ts",
       "type": "registry:ui",
-      "integrity": "sha256-Jo9N3iIaWnS1CJzYhgTv7vnW+8MLyzL8X4GRNjeEp+g="
+      "integrity": "sha256-OPm/4Jf4UUo8IG+/4TAKpGDHtYpvxvGwyq3/RSZQIGc="
     },
     {
       "path": "packages/components/_internal/floating.ts",

package/snapshot/items/components/virtual-list.json

@@ -20,6 +20,9 @@
   },
   "registryDependencies": [],
   "engineDependencies": {},
+  "options": [],
+  "variants": [],
+  "sizes": [],
   "files": [
     {
       "path": "packages/components/_internal/react.ts",

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

@@ -1,54 +1,5 @@
 /**
- * Where a floating layer goes next to its anchor, as a pure function of
- * rectangles: prefer the requested side, flip when it does not fit, and shift
- * along the edge to stay inside the viewport. No DOM, so it is testable.
+ * 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 type Side = "top" | "bottom" | "left" | "right";
-export type Align = "start" | "center" | "end";
-
-export interface Rect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface Placement {
-  x: number;
-  y: number;
-  side: Side;
-}
-
-const OPPOSITE: Record<Side, Side> = { top: "bottom", bottom: "top", left: "right", right: "left" };
-
-export function placeFloating(
-  anchor: Rect,
-  floating: { width: number; height: number },
-  viewport: { width: number; height: number },
-  { side = "bottom", align = "center", offset = 8, padding = 8 }: { side?: Side; align?: Align; offset?: number; padding?: number } = {},
-): Placement {
-  const room: Record<Side, number> = {
-    top: anchor.y - padding,
-    bottom: viewport.height - (anchor.y + anchor.height) - padding,
-    left: anchor.x - padding,
-    right: viewport.width - (anchor.x + anchor.width) - padding,
-  };
-  const needs = (candidate: Side) => (candidate === "top" || candidate === "bottom" ? floating.height : floating.width) + offset;
-  let chosen = side;
-  if (room[side] < needs(side) && room[OPPOSITE[side]] > room[side]) chosen = OPPOSITE[side];
-
-  const vertical = chosen === "top" || chosen === "bottom";
-  let x: number;
-  let y: number;
-  if (vertical) {
-    y = chosen === "bottom" ? anchor.y + anchor.height + offset : anchor.y - floating.height - offset;
-    x = align === "start" ? anchor.x : align === "end" ? anchor.x + anchor.width - floating.width : anchor.x + anchor.width / 2 - floating.width / 2;
-  } else {
-    x = chosen === "right" ? anchor.x + anchor.width + offset : anchor.x - floating.width - offset;
-    y = align === "start" ? anchor.y : align === "end" ? anchor.y + anchor.height - floating.height : anchor.y + anchor.height / 2 - floating.height / 2;
-  }
-  // Shift along the edge to stay on screen.
-  x = Math.min(Math.max(x, padding), Math.max(padding, viewport.width - floating.width - padding));
-  y = Math.min(Math.max(y, padding), Math.max(padding, viewport.height - floating.height - padding));
-  return { x: Math.round(x), y: Math.round(y), side: chosen };
-}
+export { placeFloating, type Align, type Placement, type Rect, type Side } from "@mlola-ui/behavior/logic";

package/snapshot/source/packages/components/_internal/dialog.ts

@@ -44,6 +44,24 @@ function hideBackground(portal: HTMLElement) {
   };
 }
 
+// Safari does not focus a button it clicks, so when a dialog opens with
+// nothing focused, focus returns on close to the control just pressed.
+let lastPressed: HTMLElement | null = null;
+let pressedAt = 0;
+let tracking = false;
+function trackPresses() {
+  if (tracking) return;
+  tracking = true;
+  document.addEventListener(
+    "pointerdown",
+    (event) => {
+      lastPressed = event.target instanceof Element ? event.target.closest<HTMLElement>(FOCUSABLE) : null;
+      pressedAt = performance.now();
+    },
+    true,
+  );
+}
+
 export function useDialogLayer({
   open,
   onClose,
@@ -61,6 +79,7 @@ export function useDialogLayer({
   closeRef.current = onClose;
 
   React.useEffect(() => {
+    trackPresses();
     const node = document.createElement("div");
     node.setAttribute("data-ml-portal", "");
     document.body.appendChild(node);
@@ -73,8 +92,13 @@ export function useDialogLayer({
 
   React.useEffect(() => {
     if (!open || !portal) return;
+    const active = document.activeElement;
     restoreFocusRef.current =
-      document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      active instanceof HTMLElement && active !== document.body
+        ? active
+        : lastPressed?.isConnected && performance.now() - pressedAt < 2000
+          ? lastPressed
+          : null;
     const releaseScroll = lockScroll();
     const restoreBackground = hideBackground(portal);
     const focusPanel = () => {

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

@@ -47,7 +47,12 @@ const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
     return (
       <div ref={ref} role="group" aria-label={`Avatar group, ${items.length} people`} className={cx("ml-avatar-group", className)} {...props}>
         {visible.map((child, index) => <span key={index} className="ml-avatar-group-item">{child}</span>)}
-        {overflow ? <span aria-label={`${overflow} more people`} className="ml-avatar-overflow">+{overflow}</span> : null}
+        {overflow ? (
+          <span className="ml-avatar-overflow">
+            <span aria-hidden="true">+{overflow}</span>
+            <span className="ml-visually-hidden">{`${overflow} more ${overflow === 1 ? "person" : "people"}`}</span>
+          </span>
+        ) : null}
       </div>
     );
   }

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

@@ -257,7 +257,8 @@ export function Calendar(props: CalendarProps) {
               ))}
             </div>
             {monthGrid(first, weekStart).map((week) => (
-              <div key={week[0].date} role="row" className="ml-calendar-row">
+              // A week drawn only to keep months aligned has no day to read, so it is hidden whole.
+              <div key={week[0].date} role="row" className="ml-calendar-row" aria-hidden={(week.every(({ inMonth }) => !inMonth) && (!showOutsideDays || months > 1)) || undefined}>
                 {week.map(({ date, inMonth }) => {
                   if (!inMonth && (!showOutsideDays || months > 1)) return <span key={date} role="gridcell" className="ml-calendar-cell" aria-hidden="true" />;
                   const selected = isSelected(date);

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

@@ -43,12 +43,14 @@ export function Shortcut({ keys, className, ...props }: ShortcutProps) {
   const shown = parts.map((key) => SYMBOLS[key]?.[apple ? "apple" : "other"] ?? key.toUpperCase());
   const spoken = parts.map((key) => (apple ? SYMBOLS[key]?.spoken : SYMBOLS[key]?.spokenOther ?? SYMBOLS[key]?.spoken) ?? key.toUpperCase()).join(" ");
   return (
-    <kbd className={cx("ml-shortcut", className)} aria-label={spoken} {...props}>
+    <kbd className={cx("ml-shortcut", className)} {...props}>
       {shown.map((key, index) => (
         <kbd key={index} className="ml-kbd" aria-hidden="true">
           {key}
         </kbd>
       ))}
+      {/* A kbd cannot carry a label, so the words are text a screen reader reads. */}
+      <span className="ml-visually-hidden">{spoken}</span>
     </kbd>
   );
 }

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

@@ -12,6 +12,8 @@ export interface ModalProps {
   open: boolean;
   onClose: () => void;
   size?: ModalSize;
+  /** "alertdialog" for a confirmation that interrupts: it is announced at once, and the backdrop does not dismiss it. */
+  role?: "dialog" | "alertdialog";
   closeOnBackdrop?: boolean;
   closeOnEscape?: boolean;
   label?: string;
@@ -24,7 +26,8 @@ export function Modal({
   open,
   onClose,
   size = "md",
-  closeOnBackdrop = true,
+  role = "dialog",
+  closeOnBackdrop = role !== "alertdialog",
   closeOnEscape = true,
   label = "Dialog",
   description,
@@ -45,7 +48,7 @@ export function Modal({
     >
       <div
         ref={panelRef}
-        role="dialog"
+        role={role}
         aria-modal="true"
         aria-label={label}
         aria-describedby={description ? descriptionId : undefined}

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

@@ -134,7 +134,8 @@ export function Resizable({
         aria-valuemin={collapsible ? 0 : min}
         aria-valuemax={max}
         aria-valuenow={Math.round(shown)}
-        aria-expanded={collapsible ? !isFolded : undefined}
+        // A separator has no expanded state: folded is its value at 0.
+        aria-valuetext={isFolded ? "Collapsed" : undefined}
         className="ml-resizable-handle"
         onPointerDown={(event) => {
           dragging.current = true;

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

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { cx } from "../_internal/react";
+import { composeRefs, cx } from "../_internal/react";
 
 type TableSize = "sm" | "md";
 type TableAlign = "left" | "center" | "right";
@@ -9,11 +9,33 @@ export type SortedState = "asc" | "desc" | false;
 interface Sortable { sorted: SortedState; onToggle: () => void; label?: string; }
 interface TableProps extends React.HTMLAttributes<HTMLDivElement> { size?: TableSize; striped?: boolean; }
 const Table = React.forwardRef<HTMLDivElement, TableProps>(
-  ({ size = "md", striped = false, className, children, ...props }, ref) => (
-    <div ref={ref} className={cx("ml-table-container", className)} {...props}>
-      <table data-size={size} data-striped={striped ? "" : undefined} className="ml-table">{children}</table>
-    </div>
-  )
+  ({ size = "md", striped = false, className, children, ...props }, ref) => {
+    // A table wider than its container scrolls sideways, and then the keyboard must reach it too.
+    const container = React.useRef<HTMLDivElement | null>(null);
+    const [scrolls, setScrolls] = React.useState(false);
+    React.useEffect(() => {
+      const element = container.current;
+      if (!element || typeof ResizeObserver === "undefined") return;
+      const measure = () => setScrolls(element.scrollWidth > element.clientWidth + 1);
+      const observer = new ResizeObserver(measure);
+      observer.observe(element);
+      if (element.firstElementChild) observer.observe(element.firstElementChild);
+      measure();
+      return () => observer.disconnect();
+    }, []);
+    const named = Boolean(props["aria-label"] || props["aria-labelledby"]);
+    return (
+      <div
+        ref={composeRefs(ref, container)}
+        className={cx("ml-table-container", className)}
+        tabIndex={scrolls ? 0 : undefined}
+        role={scrolls && named ? "region" : undefined}
+        {...props}
+      >
+        <table data-size={size} data-striped={striped ? "" : undefined} className="ml-table">{children}</table>
+      </div>
+    );
+  }
 );
 Table.displayName = "Table";
 const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(

package/snapshot/source/packages/components/tag-input/tag-input.tsx

@@ -181,6 +181,7 @@ export const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(functi
         ref={control}
         className="ml-tag-input-control"
         data-disabled={disabled || undefined}
+        aria-disabled={disabled || undefined}
         data-invalid={message ? "" : undefined}
         onMouseDown={(event) => {
           // Clicking the field's empty space puts the caret in the input.