@tensor_1/react 2.26.3 → 2.27.0

package/dist/components/Dialogs.js

@@ -1,10 +1,55 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { Button } from "./Button.js";
 import { Input } from "./Input.js";
 import { Modal } from "./Modal.js";
-function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, closeLabel, onConfirm, onCancel, pending, destructive }) {
+import { Popover } from "./Popover.js";
+import { fillLabel } from "../fill-label.js";
+import { resolveAnchor } from "../hooks/useAnchoredPosition.js";
+import { useUixLabels } from "../labels-context.js";
+function ConfirmDialog({
+  open,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  closeLabel,
+  onConfirm,
+  onCancel,
+  pending,
+  destructive,
+  children,
+  error,
+  initialFocus,
+  tertiaryLabel,
+  onTertiary,
+  typeToConfirm,
+  typeToConfirmLabel: typeToConfirmLabelProp,
+  compensation,
+  compensationLabel: compensationLabelProp
+}) {
+  const uixLabels = useUixLabels();
+  const typeToConfirmLabel = typeToConfirmLabelProp ?? uixLabels.confirmDialog?.typeToConfirm ?? "Type {value} to confirm";
+  const compensationLabel = compensationLabelProp ?? uixLabels.confirmDialog?.compensation ?? "How to undo this";
+  const id = useId();
+  const bodyId = `${id}-body`;
+  const typedId = `${id}-typed`;
+  const cancelRef = useRef(null);
+  const confirmRef = useRef(null);
+  const typedRef = useRef(null);
+  const [typed, setTyped] = useState("");
+  const typedMatches = typeToConfirm == null || typed === typeToConfirm;
+  const hasBody = description != null || children != null || compensation != null;
+  useEffect(() => {
+    if (open) setTyped("");
+  }, [open, typeToConfirm]);
+  useEffect(() => {
+    if (!open) return;
+    const focus = initialFocus ?? (destructive ? "cancel" : void 0);
+    const target = typeToConfirm != null ? typedRef.current : focus === "cancel" ? cancelRef.current : focus === "confirm" ? confirmRef.current : null;
+    target?.focus();
+  }, [open, initialFocus, destructive, typeToConfirm]);
   return /* @__PURE__ */ jsx(
     Modal,
     {
@@ -13,11 +58,126 @@ function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, cl
       title,
       closeLabel,
       role: "alertdialog",
+      "aria-describedby": hasBody ? bodyId : void 0,
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { type: "button", onClick: onCancel, disabled: pending, children: cancelLabel }),
-        /* @__PURE__ */ jsx(Button, { type: "button", variant: destructive ? "danger" : "primary", onClick: () => void onConfirm(), loading: pending, children: confirmLabel })
+        tertiaryLabel != null && onTertiary && /* @__PURE__ */ jsx(Button, { type: "button", className: "uix-confirm__tertiary", onClick: () => void onTertiary(), disabled: pending, children: tertiaryLabel }),
+        /* @__PURE__ */ jsx(Button, { ref: cancelRef, type: "button", onClick: onCancel, disabled: pending, children: cancelLabel }),
+        /* @__PURE__ */ jsx(Button, { ref: confirmRef, type: "button", variant: destructive ? "danger" : "primary", onClick: () => {
+          if (typedMatches) void onConfirm();
+        }, loading: pending, disabled: !typedMatches, children: confirmLabel })
       ] }),
-      children: description
+      children: /* @__PURE__ */ jsxs("div", { className: "uix-confirm", children: [
+        hasBody && /* @__PURE__ */ jsxs("div", { id: bodyId, className: "uix-confirm__body", children: [
+          description != null && /* @__PURE__ */ jsx("div", { children: description }),
+          children,
+          compensation != null && /* @__PURE__ */ jsxs("div", { className: "uix-confirm__compensation", children: [
+            /* @__PURE__ */ jsx("strong", { className: "uix-confirm__compensation-title", children: compensationLabel }),
+            /* @__PURE__ */ jsx("div", { children: compensation })
+          ] })
+        ] }),
+        typeToConfirm != null && /* @__PURE__ */ jsxs("div", { className: "uix-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: typedId, children: fillLabel(typeToConfirmLabel, { value: typeToConfirm }) }),
+          /* @__PURE__ */ jsx(Input, { ref: typedRef, id: typedId, value: typed, autoComplete: "off", spellCheck: false, onChange: (event) => setTyped(event.currentTarget.value) })
+        ] }),
+        error != null && /* @__PURE__ */ jsx("div", { className: "uix-confirm__error", role: "alert", children: error })
+      ] })
+    }
+  );
+}
+function Popconfirm({
+  open,
+  anchor,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  onCancel,
+  pending,
+  destructive,
+  compensation,
+  compensationLabel: compensationLabelProp,
+  placement = "bottom-start"
+}) {
+  const uixLabels = useUixLabels();
+  const compensationLabel = compensationLabelProp ?? uixLabels.confirmDialog?.compensation ?? "How to undo this";
+  const id = useId();
+  const panelId = `${id}-popconfirm`;
+  const cancelRef = useRef(null);
+  const onCancelRef = useRef(onCancel);
+  onCancelRef.current = onCancel;
+  const hasBody = description != null || compensation != null;
+  useEffect(() => {
+    const panel = document.getElementById(panelId);
+    if (!panel) return;
+    const shown = () => {
+      try {
+        return panel.matches(":popover-open");
+      } catch {
+        return false;
+      }
+    };
+    if (!open) {
+      if (shown()) {
+        const focusInside = panel.contains(document.activeElement);
+        try {
+          panel.hidePopover();
+        } catch {
+        }
+        if (focusInside) resolveAnchor(anchor)?.focus();
+      }
+      return;
+    }
+    if (!shown()) {
+      try {
+        panel.showPopover();
+      } catch {
+      }
+    }
+    cancelRef.current?.focus();
+    const onKey = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      onCancelRef.current();
+    };
+    const onPointer = (event) => {
+      const target = event.target;
+      if (panel.contains(target) || resolveAnchor(anchor)?.contains(target)) return;
+      onCancelRef.current();
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onPointer, true);
+    return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onPointer, true);
+    };
+  }, [open, anchor, panelId]);
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      id: panelId,
+      popover: "manual",
+      anchor,
+      placement,
+      role: "dialog",
+      "aria-labelledby": `${id}-title`,
+      "aria-describedby": hasBody ? `${id}-body` : void 0,
+      className: "uix-popconfirm",
+      children: [
+        /* @__PURE__ */ jsx("div", { id: `${id}-title`, className: "uix-popconfirm__title", children: title }),
+        hasBody && /* @__PURE__ */ jsxs("div", { id: `${id}-body`, className: "uix-popconfirm__body", children: [
+          description != null && /* @__PURE__ */ jsx("div", { children: description }),
+          compensation != null && /* @__PURE__ */ jsxs("div", { className: "uix-confirm__compensation", children: [
+            /* @__PURE__ */ jsx("strong", { className: "uix-confirm__compensation-title", children: compensationLabel }),
+            /* @__PURE__ */ jsx("div", { children: compensation })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "uix-popconfirm__actions", children: [
+          /* @__PURE__ */ jsx(Button, { ref: cancelRef, type: "button", size: "sm", onClick: onCancel, disabled: pending, children: cancelLabel }),
+          /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: destructive ? "danger" : "primary", onClick: () => void onConfirm(), loading: pending, children: confirmLabel })
+        ] })
+      ]
     }
   );
 }
@@ -40,7 +200,7 @@ function PromptDialog({ open, title, description, inputLabel, defaultValue = "",
   };
   return /* @__PURE__ */ jsx(Modal, { open, onClose: onCancel, title, closeLabel, children: /* @__PURE__ */ jsxs("form", { className: "uix-prompt", onSubmit: handleSubmit, children: [
     description != null && /* @__PURE__ */ jsx("div", { children: description }),
-    /* @__PURE__ */ jsx("label", { className: "uix-label", htmlFor: inputId, children: inputLabel }),
+    /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: inputId, children: inputLabel }),
     /* @__PURE__ */ jsx(Input, { id: inputId, value, placeholder, "aria-describedby": error ? errorId : void 0, invalid: error != null, onChange: (event) => setValue(event.currentTarget.value), autoFocus: true }),
     error != null && /* @__PURE__ */ jsx("div", { id: errorId, className: "uix-field__error", role: "alert", children: error }),
     /* @__PURE__ */ jsxs("div", { className: "uix-dialog__footer uix-prompt__actions", children: [
@@ -51,5 +211,6 @@ function PromptDialog({ open, title, description, inputLabel, defaultValue = "",
 }
 export {
   ConfirmDialog,
+  Popconfirm,
   PromptDialog
 };

package/dist/components/Drawer.d.ts

@@ -12,10 +12,15 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
      * can't discard it; Escape and the close button still close. Default `true`.
      */
     dismissOnBackdrop?: boolean;
+    /**
+     * Edge the drawer slides from (HAR-1351). `end` (default) is the side sheet; `start` is
+     * the phone navigation drawer; `bottom` is a bottom sheet capped at 85% of the viewport.
+     */
+    side?: 'end' | 'start' | 'bottom';
     title?: ReactNode;
     children?: ReactNode;
     footer?: ReactNode;
 }
-declare function Drawer({ open, onClose, dismissOnBackdrop, title, children, footer, closeLabel, className, onClick, ...rest }: DrawerProps): react.JSX.Element;
+declare function Drawer({ open, onClose, dismissOnBackdrop, side, title, children, footer, closeLabel: closeLabelProp, className, onClick, ...rest }: DrawerProps): react.JSX.Element;
 
 export { Drawer, type DrawerProps };

package/dist/components/Drawer.js

@@ -2,13 +2,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
 import { useDialog } from "../hooks/useDialog.js";
 import { backdropDismiss } from "../hooks/backdropDismiss.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Drawer({ open, onClose, dismissOnBackdrop = true, title, children, footer, closeLabel = "Close drawer", className, onClick, ...rest }) {
+function Drawer({ open, onClose, dismissOnBackdrop = true, side = "end", title, children, footer, closeLabel: closeLabelProp, className, onClick, ...rest }) {
+  const uixLabels = useUixLabels();
+  const closeLabel = closeLabelProp ?? uixLabels.drawer?.close ?? "Close drawer";
   const ref = useDialog(open, onClose);
   const titleId = useId();
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-drawer", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: backdropDismiss(onClose, onClick, dismissOnBackdrop), children: [
+  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-drawer", side !== "end" && `uix-drawer--${side}`, className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: backdropDismiss(onClose, onClick, dismissOnBackdrop), children: [
     (title != null || onClose) && /* @__PURE__ */ jsxs("div", { className: "uix-drawer__header", children: [
       title && /* @__PURE__ */ jsx("h2", { id: titleId, style: { fontWeight: 600, fontSize: "var(--uix-text-h3)", fontFamily: "inherit", letterSpacing: "inherit", lineHeight: "inherit" }, children: title }),
       onClose && /* @__PURE__ */ jsx(

package/dist/components/Kbd.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface KbdProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+/** One keyboard key over `.uix-kbd` (HAR-1361; TENSOR C14, MOTUS B-A16). */
+declare function Kbd({ className, children, ...props }: KbdProps): react.JSX.Element;
+type KbdPlatform = 'mac' | 'other';
+interface KbdComboProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /**
+     * Keys in order, e.g. `['Mod', 'K']`. `Mod` is ⌘ on Apple and Ctrl elsewhere; `Shift`,
+     * `Alt`, `Enter`, `Escape`, `Backspace`, `Tab` and the arrows get platform glyphs.
+     */
+    keys: string[];
+    /** Fix the platform (tests, docs). Default: detected after mount; the server renders `other`. */
+    platform?: KbdPlatform;
+    /** Spoken names for keys, e.g. `{ Mod: 'Steuerung' }`; the glyphs stay. */
+    keyLabels?: Partial<Record<string, string>>;
+}
+/**
+ * A shortcut such as ⌘K / Ctrl+K. Screen readers hear the key names ("Command+K"), not the
+ * glyphs. The platform is resolved at display time, after mount, so server and client agree.
+ */
+declare function KbdCombo({ keys, platform, keyLabels, className, ...props }: KbdComboProps): react.JSX.Element;
+
+export { Kbd, KbdCombo, type KbdComboProps, type KbdPlatform, type KbdProps };

package/dist/components/Kbd.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cx } from "../cx.js";
+function Kbd({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("kbd", { className: cx("uix-kbd", className), ...props, children });
+}
+const KEYS = {
+  Mod: { mac: ["\u2318", "Command"], other: ["Ctrl", "Control"] },
+  Ctrl: { mac: ["\u2303", "Control"], other: ["Ctrl", "Control"] },
+  Shift: { mac: ["\u21E7", "Shift"], other: ["Shift", "Shift"] },
+  Alt: { mac: ["\u2325", "Option"], other: ["Alt", "Alt"] },
+  Enter: { mac: ["\u21B5", "Enter"], other: ["Enter", "Enter"] },
+  Escape: { mac: ["Esc", "Escape"], other: ["Esc", "Escape"] },
+  Backspace: { mac: ["\u232B", "Backspace"], other: ["Backspace", "Backspace"] },
+  Tab: { mac: ["\u21E5", "Tab"], other: ["Tab", "Tab"] },
+  ArrowUp: { mac: ["\u2191", "Up arrow"], other: ["\u2191", "Up arrow"] },
+  ArrowDown: { mac: ["\u2193", "Down arrow"], other: ["\u2193", "Down arrow"] },
+  ArrowLeft: { mac: ["\u2190", "Left arrow"], other: ["\u2190", "Left arrow"] },
+  ArrowRight: { mac: ["\u2192", "Right arrow"], other: ["\u2192", "Right arrow"] }
+};
+const detectPlatform = () => {
+  if (typeof navigator === "undefined") return "other";
+  const nav = navigator;
+  return /mac|iphone|ipad|ipod/i.test(nav.userAgentData?.platform ?? navigator.platform ?? "") ? "mac" : "other";
+};
+function KbdCombo({ keys, platform, keyLabels, className, ...props }) {
+  const [detected, setDetected] = useState("other");
+  useEffect(() => {
+    if (!platform) setDetected(detectPlatform());
+  }, [platform]);
+  const active = platform ?? detected;
+  const parts = keys.map((key) => {
+    const known = KEYS[key]?.[active];
+    return { glyph: known?.[0] ?? key, spoken: keyLabels?.[key] ?? known?.[1] ?? key };
+  });
+  return /* @__PURE__ */ jsxs("span", { className: cx("uix-kbd-combo", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: parts.map((p) => p.spoken).join("+") }),
+    /* @__PURE__ */ jsx("span", { className: "uix-kbd-combo__keys", "aria-hidden": "true", children: parts.map((p, i) => /* @__PURE__ */ jsx("kbd", { className: "uix-kbd", children: p.glyph }, `${keys[i]}-${i}`)) })
+  ] });
+}
+export {
+  Kbd,
+  KbdCombo
+};

package/dist/components/Menu.d.ts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { ReactElement, ReactNode } from 'react';
+import { UixRenderLink } from '../link.js';
+import { Placement } from '../overlay-position.js';
+
+interface MenuProps {
+    /**
+     * The menu button, usually a `Button`. It receives `aria-haspopup="menu"`,
+     * `aria-expanded`, `aria-controls` and the open/keyboard handlers.
+     */
+    trigger: ReactElement;
+    /** `MenuItem`, `MenuGroup` and `MenuSeparator`. */
+    children?: ReactNode;
+    /** Controlled open state; pair with `onOpenChange`. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible name of the menu. Default: labelled by the trigger. */
+    label?: string;
+    placement?: Placement;
+    className?: string;
+}
+/**
+ * A menu button with an APG menu (HAR-1359; TENSOR C1, MOTUS B-A14): ↓/↑ move, Home/End,
+ * type-to-find, Enter/Space activate, Esc and Tab close, focus returns to the trigger.
+ * The surface is the kit `Popover`, so it escapes clipping containers.
+ */
+declare function Menu({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, label, placement, className }: MenuProps): react.JSX.Element;
+interface MenuItemProps {
+    children?: ReactNode;
+    /** Runs on click, Enter or Space; the menu then closes and focus returns to the trigger. */
+    onSelect?: () => void;
+    /** A link item; it navigates instead of running `onSelect`. */
+    href?: string;
+    renderLink?: UixRenderLink;
+    icon?: ReactNode;
+    /** Shortcut hint at the end of the row, e.g. `<KbdCombo keys={['Mod', 'D']} />`. */
+    shortcut?: ReactNode;
+    tone?: 'default' | 'danger';
+    disabled?: boolean;
+    className?: string;
+}
+declare function MenuItem({ children, onSelect, href, renderLink, icon, shortcut, tone, disabled, className }: MenuItemProps): react.JSX.Element;
+interface MenuGroupProps {
+    label: ReactNode;
+    children?: ReactNode;
+}
+declare function MenuGroup({ label, children }: MenuGroupProps): react.JSX.Element;
+declare function MenuSeparator(): react.JSX.Element;
+
+export { Menu, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator };

package/dist/components/Menu.js

@@ -0,0 +1,177 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, createContext, isValidElement, useContext, useEffect, useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { Popover } from "./Popover.js";
+import { renderUixLink } from "../link.js";
+const MenuContext = createContext(null);
+const ITEM = '[role="menuitem"]:not([aria-disabled="true"])';
+function Menu({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, label, placement = "bottom-start", className }) {
+  const id = useId();
+  const menuId = `${id}-menu`;
+  const triggerId = `${id}-trigger`;
+  const triggerRef = useRef(null);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = controlledOpen ?? internalOpen;
+  const focusOnOpen = useRef("first");
+  const typeahead = useRef({ text: "", at: 0 });
+  const setOpen = (next) => {
+    if (controlledOpen === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const menu = () => document.getElementById(menuId);
+  const items = () => Array.from(menu()?.querySelectorAll(ITEM) ?? []);
+  const close = (refocus) => {
+    setOpen(false);
+    if (refocus) triggerRef.current?.focus();
+  };
+  useEffect(() => {
+    const el = menu();
+    if (!el) return;
+    const shown = () => {
+      try {
+        return el.matches(":popover-open");
+      } catch {
+        return false;
+      }
+    };
+    if (!open) {
+      if (shown()) {
+        try {
+          el.hidePopover();
+        } catch {
+        }
+      }
+      return;
+    }
+    if (!shown()) {
+      try {
+        el.showPopover();
+      } catch {
+      }
+    }
+    const list = items();
+    (focusOnOpen.current === "last" ? list[list.length - 1] : list[0])?.focus();
+    const onPointer = (event) => {
+      const target = event.target;
+      if (el.contains(target) || triggerRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointer, true);
+    return () => document.removeEventListener("pointerdown", onPointer, true);
+  }, [open, menuId]);
+  const onMenuKeyDown = (event) => {
+    const list = items();
+    const index = list.indexOf(document.activeElement);
+    const move = (to) => {
+      event.preventDefault();
+      list[(to + list.length) % list.length]?.focus();
+    };
+    if (event.key === "ArrowDown") move(index + 1);
+    else if (event.key === "ArrowUp") move(index - 1);
+    else if (event.key === "Home") move(0);
+    else if (event.key === "End") move(list.length - 1);
+    else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      close(true);
+    } else if (event.key === "Tab") close(false);
+    else if (event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      const now = Date.now();
+      typeahead.current = { text: now - typeahead.current.at > 600 ? event.key.toLowerCase() : typeahead.current.text + event.key.toLowerCase(), at: now };
+      const start = index + (typeahead.current.text.length === 1 ? 1 : 0);
+      const order = [...list.slice(start), ...list.slice(0, start)];
+      order.find((item) => (item.textContent ?? "").trim().toLowerCase().startsWith(typeahead.current.text))?.focus();
+    }
+  };
+  const triggerProps = isValidElement(trigger) ? trigger.props : {};
+  const triggerElement = isValidElement(trigger) ? cloneElement(trigger, {
+    ref: (node) => {
+      triggerRef.current = node;
+    },
+    id: triggerProps.id ?? triggerId,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? menuId : void 0,
+    onClick: (event) => {
+      triggerProps.onClick?.(event);
+      if (event.defaultPrevented) return;
+      focusOnOpen.current = "first";
+      setOpen(!open);
+    },
+    onKeyDown: (event) => {
+      triggerProps.onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        focusOnOpen.current = event.key === "ArrowUp" ? "last" : "first";
+        if (open) {
+          const list = items();
+          (focusOnOpen.current === "last" ? list[list.length - 1] : list[0])?.focus();
+        } else setOpen(true);
+      }
+    }
+  }) : trigger;
+  return /* @__PURE__ */ jsxs(MenuContext.Provider, { value: { close }, children: [
+    triggerElement,
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        id: menuId,
+        popover: "manual",
+        anchor: triggerRef,
+        placement,
+        role: "menu",
+        "aria-label": label,
+        "aria-labelledby": label ? void 0 : triggerProps.id ?? triggerId,
+        className: cx("uix-menu", className),
+        onKeyDown: onMenuKeyDown,
+        children: open ? children : null
+      }
+    )
+  ] });
+}
+function MenuItem({ children, onSelect, href, renderLink, icon, shortcut, tone = "default", disabled, className }) {
+  const menu = useContext(MenuContext);
+  const classes = cx("uix-menu__item", tone === "danger" && "uix-menu__item--danger", className);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: "uix-menu__text", children }),
+    shortcut != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__shortcut", children: shortcut })
+  ] });
+  if (href != null && !disabled) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderUixLink(renderLink, { href, role: "menuitem", tabIndex: -1, className: classes, onClick: () => menu?.close(false), children: body }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      tabIndex: -1,
+      className: classes,
+      "aria-disabled": disabled || void 0,
+      onClick: () => {
+        if (disabled) return;
+        onSelect?.();
+        menu?.close(true);
+      },
+      children: body
+    }
+  );
+}
+function MenuGroup({ label, children }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": id, children: [
+    /* @__PURE__ */ jsx("div", { id, className: "uix-menu__label", children: label }),
+    children
+  ] });
+}
+function MenuSeparator() {
+  return /* @__PURE__ */ jsx("div", { role: "separator", className: "uix-menu__sep" });
+}
+export {
+  Menu,
+  MenuGroup,
+  MenuItem,
+  MenuSeparator
+};

package/dist/components/Modal.d.ts

@@ -11,6 +11,6 @@ interface ModalProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     closeLabel?: string;
     role?: 'dialog' | 'alertdialog';
 }
-declare function Modal({ open, onClose, title, children, footer, className, closeLabel, role, ...rest }: ModalProps): react.JSX.Element;
+declare function Modal({ open, onClose, title, children, footer, className, closeLabel: closeLabelProp, role, ...rest }: ModalProps): react.JSX.Element;
 
 export { Modal, type ModalProps };

package/dist/components/Modal.js

@@ -2,9 +2,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
 import { useDialog } from "../hooks/useDialog.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Modal({ open, onClose, title, children, footer, className, closeLabel = "Close dialog", role = "dialog", ...rest }) {
+function Modal({ open, onClose, title, children, footer, className, closeLabel: closeLabelProp, role = "dialog", ...rest }) {
+  const uixLabels = useUixLabels();
+  const closeLabel = closeLabelProp ?? uixLabels.modal?.close ?? "Close dialog";
   const ref = useDialog(open, onClose);
   const titleId = useId();
   return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-dialog", className), role, "aria-labelledby": title != null ? titleId : void 0, ...rest, children: [

package/dist/components/Pagination.d.ts

@@ -1,19 +1,50 @@
 import * as react from 'react';
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { UixRenderLink } from '../link.js';
 
 /** TENSOR RX-125 (UIX-04): the pager's accessible names. */
 interface PaginationLabels {
     region: string;
     previous: string;
     next: string;
+    /** Cursor mode's "back to the start" control (HAR-1357). */
+    first: string;
 }
 declare const DEFAULT_PAGINATION_LABELS: PaginationLabels;
 interface PaginationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    page: number;
-    pageCount: number;
-    onChange: (page: number) => void;
+    /**
+     * `offset` (default): numbered pages, needs `page` and `pageCount`.
+     * `cursor` (HAR-1357; MOTUS B-A22): keyset paging with no total — First, Previous, an
+     * optional `summary` ("21–40") and Next.
+     */
+    mode?: 'offset' | 'cursor';
+    /** Offset mode: the current page, from 1. */
+    page?: number;
+    /** Offset mode: the number of pages. */
+    pageCount?: number;
+    /** Offset mode, button pager: called with the page to show. */
+    onChange?: (page: number) => void;
+    /**
+     * Offset mode, link pager (HAR-1357; MOTUS B-P5): every page is a real link, so a
+     * server-rendered list pages without JavaScript. Wins over `onChange`.
+     */
+    hrefFor?: (page: number) => string;
+    /** Your router's link for `hrefFor` and the cursor hrefs; default a plain `<a>`. */
+    renderLink?: UixRenderLink;
+    /** Cursor mode: whether an earlier page exists (enables First and Previous). */
+    hasPrevious?: boolean;
+    /** Cursor mode: whether a later page exists. */
+    hasNext?: boolean;
+    onFirst?: () => void;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    firstHref?: string;
+    previousHref?: string;
+    nextHref?: string;
+    /** Cursor mode: text between the controls, e.g. "21–40". */
+    summary?: ReactNode;
     labels?: Partial<PaginationLabels>;
 }
-declare function Pagination({ page, pageCount, onChange, labels: labelOverrides, className, ...props }: PaginationProps): react.JSX.Element;
+declare function Pagination({ mode, page, pageCount, onChange, hrefFor, renderLink, hasPrevious, hasNext, onFirst, onPrevious, onNext, firstHref, previousHref, nextHref, summary, labels: labelOverrides, className, ...props }: PaginationProps): react.JSX.Element;
 
 export { DEFAULT_PAGINATION_LABELS, Pagination, type PaginationLabels, type PaginationProps };