@mlola-ui/registry 1.0.4 → 1.0.5

package/snapshot/items/components/resizable.json

@@ -29,7 +29,7 @@
       "path": "packages/components/resizable/resizable.tsx",
       "target": "{{aliases.components}}/resizable.tsx",
       "type": "registry:ui",
-      "integrity": "sha256-40sK2UyIR9Ek72KAu5nvbr44tKEY6JhC5Ftb++Wf6cI="
+      "integrity": "sha256-Yxlq88qElhv2Q5DooPdriZkawRS0QWx08nd6ybz5oeY="
     }
   ],
   "themeContract": {

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

@@ -21,7 +21,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.4"
+    "@mlola-ui/behavior": "^1.0.5"
   },
   "files": [
     {

package/snapshot/items/components/select.json

@@ -24,15 +24,15 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.4",
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/behavior": "^1.0.5",
+    "@mlola-ui/icons": "^1.0.5"
   },
   "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/sheet.json

@@ -29,15 +29,15 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.4",
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/behavior": "^1.0.5",
+    "@mlola-ui/icons": "^1.0.5"
   },
   "files": [
     {
       "path": "packages/components/_internal/dialog.ts",
       "target": "{{aliases.components}}/_internal/dialog.ts",
       "type": "registry:ui",
-      "integrity": "sha256-Q7DPI2BipgFjPd3T8g2GGicrVal0cp0eMKXWFqcj64k="
+      "integrity": "sha256-796y3oNOVWarLvICTdi+d0/2axqSrzLVJiyBeh9X7bU="
     },
     {
       "path": "packages/components/_internal/react.ts",

package/snapshot/items/components/slider.json

@@ -23,7 +23,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.4"
+    "@mlola-ui/behavior": "^1.0.5"
   },
   "files": [
     {

package/snapshot/items/components/stepper.json

@@ -20,7 +20,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/icons": "^1.0.5"
   },
   "files": [
     {

package/snapshot/items/components/tabs.json

@@ -24,7 +24,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/behavior": "^1.0.4"
+    "@mlola-ui/behavior": "^1.0.5"
   },
   "files": [
     {

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

@@ -23,7 +23,7 @@
     "input"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/icons": "^1.0.5"
   },
   "files": [
     {
@@ -36,7 +36,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/time-picker.json

@@ -22,7 +22,7 @@
     "popover"
   ],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/icons": "^1.0.5"
   },
   "files": [
     {

package/snapshot/items/components/timeline.json

@@ -24,7 +24,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/icons": "^1.0.5"
   },
   "files": [
     {

package/snapshot/items/components/toast.json

@@ -26,7 +26,7 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/icons": "^1.0.5"
   },
   "files": [
     {

package/snapshot/items/components/tour.json

@@ -20,14 +20,15 @@
   },
   "registryDependencies": [],
   "engineDependencies": {
-    "@mlola-ui/icons": "^1.0.4"
+    "@mlola-ui/behavior": "^1.0.5",
+    "@mlola-ui/icons": "^1.0.5"
   },
   "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/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/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/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/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.

package/snapshot/source-manifest.json

@@ -1,6 +1,6 @@
 {
-  "packages/components/_internal/anchor.ts": "sha256-Jo9N3iIaWnS1CJzYhgTv7vnW+8MLyzL8X4GRNjeEp+g=",
-  "packages/components/_internal/dialog.ts": "sha256-Q7DPI2BipgFjPd3T8g2GGicrVal0cp0eMKXWFqcj64k=",
+  "packages/components/_internal/anchor.ts": "sha256-OPm/4Jf4UUo8IG+/4TAKpGDHtYpvxvGwyq3/RSZQIGc=",
+  "packages/components/_internal/dialog.ts": "sha256-796y3oNOVWarLvICTdi+d0/2axqSrzLVJiyBeh9X7bU=",
   "packages/components/_internal/floating.ts": "sha256-+WxgC4CtAlSr2qA1EkoDTgto535XLIPsvtOfdOK6CHk=",
   "packages/components/_internal/match.ts": "sha256-nKBpKWeow5ubAHUhOW8yOjlrKs0lqYdjbaYYfE8VoII=",
   "packages/components/_internal/react.ts": "sha256-SH63/haiB4Q93uFjMIMe5xZbaxENu3VI+GcidV8HELM=",
@@ -14,7 +14,7 @@
   "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=",
-  "packages/components/calendar/calendar.tsx": "sha256-uE22LI4jpU8ErR/oBmAkeKiu+Rp0bz3IXZVCurycpwc=",
+  "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=",
@@ -30,7 +30,7 @@
   "packages/components/empty-state/empty-state.tsx": "sha256-uCKqYpr9vkozXZHpdl4GFtdX9ijcGOriCHvgyarBqRw=",
   "packages/components/hover-card/hover-card.tsx": "sha256-AyRbxfqDOYBgGlgjgrtQZm5DipArLEzQn6XnzjPd0ro=",
   "packages/components/input/input.tsx": "sha256-lbbheo+ydQTzyujTf0W7DD96TogOjifCyqj9c3h3W0g=",
-  "packages/components/kbd/kbd.tsx": "sha256-wrPqzn1e82zJYoKzO7u94Bgq4+nPc0DXLc8GJ/4/3nY=",
+  "packages/components/kbd/kbd.tsx": "sha256-e8EO2Gw6JiUyrU0YcEZOaQNMel1pe/EcJrxwwgd1Ggk=",
   "packages/components/modal/modal.tsx": "sha256-vybxgBGYCrMYvJRnO1wDAc2VFQylu+mQIf5OZIcabX4=",
   "packages/components/number-input/number-input.tsx": "sha256-BDOyvCNtMULD/HK7uWHsYbGg79lrRDrVqtGQQrYHpmM=",
   "packages/components/number-input/number.ts": "sha256-IrHCQrEhI5ein9ifMFuSViSoxQUBoT3tNmmCu/paGGM=",
@@ -42,7 +42,7 @@
   "packages/components/progress/progress.tsx": "sha256-9OjecRNPWn7Bfe+C5IyXaKsW1NJae6X5gco1o0X5XkE=",
   "packages/components/radio-group/radio-group.tsx": "sha256-jhnSEBLkdpe8dv5us/Q1sMsQF4sKGRgDXWGKm2JSFew=",
   "packages/components/rating/rating.tsx": "sha256-zgPOQXzAiRE4qGNPQ8qat3SP1XSI/7567kA5VaT51P0=",
-  "packages/components/resizable/resizable.tsx": "sha256-40sK2UyIR9Ek72KAu5nvbr44tKEY6JhC5Ftb++Wf6cI=",
+  "packages/components/resizable/resizable.tsx": "sha256-Yxlq88qElhv2Q5DooPdriZkawRS0QWx08nd6ybz5oeY=",
   "packages/components/segmented-control/segmented-control.tsx": "sha256-MCBG5XHFWCwbACctsYKbqe8mvSSR6pf60tyRgdCDKDA=",
   "packages/components/select/select.tsx": "sha256-m8QmKUGC4386XcklosSntal0XwUAFjKosTBQSF0dduQ=",
   "packages/components/sheet/sheet.tsx": "sha256-EIn3OeRDmXGHbYf/uihRh8aw3LmzarIFiyC9DUsL1jg=",
@@ -53,7 +53,7 @@
   "packages/components/stepper/stepper.tsx": "sha256-uI/dRmkbijlixHiGUceWcpaDzpEixrzQ1UTmoPbGZAY=",
   "packages/components/table/table.tsx": "sha256-ed1Qn2sIpxRvGdPDAb5ih5AcXr5PmHTHdlrJLYDYRp8=",
   "packages/components/tabs/tabs.tsx": "sha256-kWAQjE9mshqZL7V3NJTUiurp6M5Nu3vx5O1LsIgdV5Y=",
-  "packages/components/tag-input/tag-input.tsx": "sha256-EK7xJTe3Y/S5Kn3vS0zBQg9lC+RVoGvky6HOAt+DnAw=",
+  "packages/components/tag-input/tag-input.tsx": "sha256-lc4ofz1/lUnb7B/GlFElVKXLbPwtJFAjE5vWwAY99fA=",
   "packages/components/textarea/textarea.tsx": "sha256-C9jMYZ63w+m6bgdLvHjvULRuoCe26q5zbgS4+ahWzr8=",
   "packages/components/time-picker/time-picker.tsx": "sha256-og8Cbf+e8oFYewfagUgjRzLHSIIlAZh+1OpAn9yNq70=",
   "packages/components/time-picker/times.ts": "sha256-V/4uqFZPn9gVnyx8cB9vwp/RocmTYaPmLxjfy8DPQOI=",