@mlola-ui/registry 1.0.5 → 1.0.6

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.5"
+    "@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.5"
+    "@mlola-ui/icons": "^1.0.6"
   },
+  "options": [],
+  "variants": [],
+  "sizes": [],
   "files": [
     {
       "path": "packages/components/_internal/react.ts",

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.5"
+    "@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.5"
+    "@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.5"
+    "@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,9 +20,12 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.5",
-    "@mlola-ui/icons": "^1.0.5"
+    "@mlola-ui/behavior": "^1.0.6",
+    "@mlola-ui/icons": "^1.0.6"
   },
+  "options": [],
+  "variants": [],
+  "sizes": [],
   "files": [
     {
       "path": "packages/components/_internal/anchor.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/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/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/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-manifest.json

@@ -10,7 +10,7 @@
   "packages/components/activity-heatmap/calendar.ts": "sha256-NB+AjXY5Xc+KzR8MMTRBgZxdzOeoHhkW0KQOW7WJPuQ=",
   "packages/components/alert/alert.tsx": "sha256-j680akXvCIh4MTVnUo79acvVrv51XyQ3UBJ5FBAy8Dw=",
   "packages/components/app-shell/app-shell.tsx": "sha256-XAq82XOTH3ZR+hxTkYFu8P7Ih2aI6ERy/TpXc2VMUwM=",
-  "packages/components/avatar/avatar.tsx": "sha256-hvZUGhatN95ZyX6p6NBhTRf6h1/rrJ+bJrqBMtIspq0=",
+  "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/button/button.tsx": "sha256-khqYxcV3hlZ+Q+cYNTRXEpAfIijDFSvkuDJXMPtlk7g=",
@@ -31,7 +31,7 @@
   "packages/components/hover-card/hover-card.tsx": "sha256-AyRbxfqDOYBgGlgjgrtQZm5DipArLEzQn6XnzjPd0ro=",
   "packages/components/input/input.tsx": "sha256-lbbheo+ydQTzyujTf0W7DD96TogOjifCyqj9c3h3W0g=",
   "packages/components/kbd/kbd.tsx": "sha256-e8EO2Gw6JiUyrU0YcEZOaQNMel1pe/EcJrxwwgd1Ggk=",
-  "packages/components/modal/modal.tsx": "sha256-vybxgBGYCrMYvJRnO1wDAc2VFQylu+mQIf5OZIcabX4=",
+  "packages/components/modal/modal.tsx": "sha256-rIytVY+hz8aabJ53UGQ0VADgSlW0sAG920iMQaoak+0=",
   "packages/components/number-input/number-input.tsx": "sha256-BDOyvCNtMULD/HK7uWHsYbGg79lrRDrVqtGQQrYHpmM=",
   "packages/components/number-input/number.ts": "sha256-IrHCQrEhI5ein9ifMFuSViSoxQUBoT3tNmmCu/paGGM=",
   "packages/components/otp-input/otp-input.tsx": "sha256-QURn8g5HqCQXBTdeENPbVxoPlqs3ZtoAPLRlFjQDxmI=",
@@ -51,7 +51,7 @@
   "packages/components/status-icon/labels.ts": "sha256-EE8q+geQBbJUs7I3RmaHZnPwn7Vjk2GjCfxvI4ruXKM=",
   "packages/components/status-icon/status-icon.tsx": "sha256-TtrTeoePyfH1VhKuWC0v12FuwfgND1CHnH5x8fyf4AM=",
   "packages/components/stepper/stepper.tsx": "sha256-uI/dRmkbijlixHiGUceWcpaDzpEixrzQ1UTmoPbGZAY=",
-  "packages/components/table/table.tsx": "sha256-ed1Qn2sIpxRvGdPDAb5ih5AcXr5PmHTHdlrJLYDYRp8=",
+  "packages/components/table/table.tsx": "sha256-xJlWzCH76Lrgg/HrlnVTHkG5dfCkbzjWXEdTVG5Jk4w=",
   "packages/components/tabs/tabs.tsx": "sha256-kWAQjE9mshqZL7V3NJTUiurp6M5Nu3vx5O1LsIgdV5Y=",
   "packages/components/tag-input/tag-input.tsx": "sha256-lc4ofz1/lUnb7B/GlFElVKXLbPwtJFAjE5vWwAY99fA=",
   "packages/components/textarea/textarea.tsx": "sha256-C9jMYZ63w+m6bgdLvHjvULRuoCe26q5zbgS4+ahWzr8=",