@mond-design-system/react 5.0.0 → 6.0.0

package/dist/index.cjs

@@ -3,6 +3,7 @@
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
+var dom = require('@floating-ui/dom');
 
 // src/internal/cx.ts
 function cx(...parts) {
@@ -80,15 +81,15 @@ function Heading({
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Spinner/Spinner.module.css?mds-scoped
 var Spinner_module_default = { "spinner": "mds-Spinner__spinner"};
 function Spinner({
-  size = 20,
+  size: size2 = 20,
   label,
   className,
   style,
   ...rest
 }) {
   const vars = {
-    "--spinner-size": `${size}px`,
-    "--spinner-border": `${Math.max(2, Math.round(size / 10))}px`
+    "--spinner-size": `${size2}px`,
+    "--spinner-border": `${Math.max(2, Math.round(size2 / 10))}px`
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -110,7 +111,7 @@ function IconProvider({ render, children }) {
 }
 var SIZE_PX = { sm: 16, md: 20, lg: 24 };
 var warned = /* @__PURE__ */ new Set();
-function Icon({ name, size, label, className, ...rest }) {
+function Icon({ name, size: size2, label, className, ...rest }) {
   const render = react.useContext(IconContext);
   if (render === null && !warned.has(name)) {
     warned.add(name);
@@ -121,10 +122,10 @@ function Icon({ name, size, label, className, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: cx(Icon_module_default.icon, Icon_module_default[`size-${size ?? "slot"}`], className),
+      className: cx(Icon_module_default.icon, Icon_module_default[`size-${size2 ?? "slot"}`], className),
       ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
       ...rest,
-      children: render?.(name, { size: size === void 0 ? void 0 : SIZE_PX[size] })
+      children: render?.(name, { size: size2 === void 0 ? void 0 : SIZE_PX[size2] })
     }
   );
 }
@@ -134,7 +135,7 @@ var Button_module_default = { "button": "mds-Button__button", "size-sm": "mds-Bu
 var ICON_PX = { sm: 16, md: 20, lg: 24 };
 function Button({
   variant = "primary",
-  size = "md",
+  size: size2 = "md",
   shape,
   onMedia = false,
   iconLeft,
@@ -161,7 +162,7 @@ function Button({
       className: cx(
         Button_module_default.button,
         Button_module_default[`variant-${variant}`],
-        Button_module_default[`size-${size}`],
+        Button_module_default[`size-${size2}`],
         fullWidth && Button_module_default.fullWidth,
         iconOnly && Button_module_default["icon-only"],
         shape !== void 0 && Button_module_default[`shape-${shape}`],
@@ -172,7 +173,7 @@ function Button({
       ...own,
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: ICON_PX[size], label: "", "aria-hidden": "true" }) }) : iconLeft ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: iconLeft }) : null,
+        loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: ICON_PX[size2], label: "", "aria-hidden": "true" }) }) : iconLeft ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: iconLeft }) : null,
         body,
         !loading && iconRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: iconRight }) : null
       ]
@@ -184,7 +185,7 @@ function Button({
 var Link_module_default = { "link": "mds-Link__link", "variant-inline": "mds-Link__variant-inline", "variant-standalone": "mds-Link__variant-standalone", "variant-plain": "mds-Link__variant-plain", "size-xs": "mds-Link__size-xs", "size-sm": "mds-Link__size-sm", "size-base": "mds-Link__size-base", "size-lg": "mds-Link__size-lg", "size-xl": "mds-Link__size-xl" };
 function Link({
   variant = "inline",
-  size,
+  size: size2,
   external = false,
   as,
   ...rest
@@ -199,7 +200,7 @@ function Link({
       className: cx(
         Link_module_default.link,
         Link_module_default[`variant-${variant}`],
-        size && Link_module_default[`size-${size}`],
+        size2 && Link_module_default[`size-${size2}`],
         className
       ),
       ...externalProps,
@@ -220,7 +221,7 @@ function initials(name) {
 function Avatar({
   name,
   src,
-  size = "md",
+  size: size2 = "md",
   tone,
   decorative = false,
   className,
@@ -231,7 +232,7 @@ function Avatar({
     {
       className: cx(
         Avatar_module_default.avatar,
-        Avatar_module_default[`size-${size}`],
+        Avatar_module_default[`size-${size2}`],
         tone !== void 0 && Avatar_module_default[`tone-${tone}`],
         className
       ),
@@ -255,7 +256,7 @@ var AvatarGroup_module_default = { "group": "mds-AvatarGroup__group", "item": "m
 function AvatarGroup({
   children,
   max = 4,
-  size = "md",
+  size: size2 = "md",
   overflowLabel,
   className,
   ...rest
@@ -268,7 +269,7 @@ function AvatarGroup({
     hidden > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
-        className: cx(AvatarGroup_module_default.item, AvatarGroup_module_default.overflow, AvatarGroup_module_default[`size-${size}`]),
+        className: cx(AvatarGroup_module_default.item, AvatarGroup_module_default.overflow, AvatarGroup_module_default[`size-${size2}`]),
         "aria-label": overflowLabel(hidden),
         children: [
           "+",
@@ -519,7 +520,7 @@ function Field({ label, children, hint, error, required = false, className }) {
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Select/Select.module.css?mds-scoped
 var Select_module_default = { "wrap": "mds-Select__wrap", "select": "mds-Select__select", "size-sm": "mds-Select__size-sm", "size-md": "mds-Select__size-md", "size-lg": "mds-Select__size-lg", "chevron": "mds-Select__chevron" };
-function Select({ size = "md", className, children, ...rest }) {
+function Select({ size: size2 = "md", className, children, ...rest }) {
   const field = useFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Select_module_default.wrap, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -528,7 +529,7 @@ function Select({ size = "md", className, children, ...rest }) {
         id: rest.id ?? field?.id,
         "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
         "aria-invalid": rest["aria-invalid"] ?? (field?.invalid || void 0),
-        className: cx(Select_module_default.select, Select_module_default[`size-${size}`], className),
+        className: cx(Select_module_default.select, Select_module_default[`size-${size2}`], className),
         ...rest,
         children
       }
@@ -542,7 +543,7 @@ var OverlayHistoryContext = react.createContext(null);
 var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function useOverlay(options) {
   const ref = react.useRef(null);
-  const { open, onClose } = options;
+  const { open, onClose, lockScroll = true } = options;
   const close = react.useRef(onClose);
   react.useEffect(() => {
     close.current = onClose;
@@ -583,13 +584,13 @@ function useOverlay(options) {
     };
     document.addEventListener("keydown", onKeyDown);
     const bodyOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
+    if (lockScroll) document.body.style.overflow = "hidden";
     return () => {
       document.removeEventListener("keydown", onKeyDown);
-      document.body.style.overflow = bodyOverflow;
+      if (lockScroll) document.body.style.overflow = bodyOverflow;
       previous?.focus();
     };
-  }, [open]);
+  }, [open, lockScroll]);
   return ref;
 }
 function usePresence(open, durationMs) {
@@ -1106,7 +1107,7 @@ function forkRef(own, given) {
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Input/Input.module.css?mds-scoped
 var Input_module_default = { "input": "mds-Input__input", "own-clear": "mds-Input__own-clear", "size-sm": "mds-Input__size-sm", "size-md": "mds-Input__size-md", "size-lg": "mds-Input__size-lg", "iconWrap": "mds-Input__iconWrap", "icon": "mds-Input__icon", "slot-sm": "mds-Input__slot-sm", "slot-md": "mds-Input__slot-md", "slot-lg": "mds-Input__slot-lg", "iconLeft": "mds-Input__iconLeft", "iconRight": "mds-Input__iconRight", "with-icon-left": "mds-Input__with-icon-left", "with-icon-right": "mds-Input__with-icon-right", "clear": "mds-Input__clear mds-hit-area__hitArea", "clearGlyph": "mds-Input__clearGlyph" };
 function Input({
-  size = "md",
+  size: size2 = "md",
   invalid,
   iconLeft,
   iconRight,
@@ -1140,7 +1141,7 @@ function Input({
       "aria-invalid": rest["aria-invalid"] ?? ((invalid ?? field?.invalid) || void 0),
       className: cx(
         Input_module_default.input,
-        Input_module_default[`size-${size}`],
+        Input_module_default[`size-${size2}`],
         iconLeft != null && Input_module_default["with-icon-left"],
         (iconRight != null || showClear) && Input_module_default["with-icon-right"],
         onClear != null && Input_module_default["own-clear"],
@@ -1151,7 +1152,7 @@ function Input({
     }
   );
   if (iconLeft == null && iconRight == null && onClear == null) return input;
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(Input_module_default.iconWrap, Input_module_default[`slot-${size}`]), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(Input_module_default.iconWrap, Input_module_default[`slot-${size2}`]), children: [
     input,
     iconLeft != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconLeft), "aria-hidden": "true", children: iconLeft }),
     iconRight != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconRight), "aria-hidden": "true", children: iconRight }),
@@ -1301,7 +1302,7 @@ function SegmentedControl({
   onChange,
   disabled = false,
   fullWidth = false,
-  size = "md",
+  size: size2 = "md",
   bare = false,
   repick = false,
   className
@@ -1314,7 +1315,7 @@ function SegmentedControl({
       "aria-label": label,
       className: cx(
         SegmentedControl_module_default.group,
-        SegmentedControl_module_default[`size-${size}`],
+        SegmentedControl_module_default[`size-${size2}`],
         fullWidth && SegmentedControl_module_default.fullWidth,
         bare && SegmentedControl_module_default.bare,
         className
@@ -1493,7 +1494,7 @@ function ListItem({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/DataTable/DataTable.module.css?mds-scoped
-var DataTable_module_default = { "root": "mds-DataTable__root", "table": "mds-DataTable__table", "body": "mds-DataTable__body", "row": "mds-DataTable__row", "cell": "mds-DataTable__cell", "select": "mds-DataTable__select", "actions": "mds-DataTable__actions", "key": "mds-DataTable__key", "lead": "mds-DataTable__lead", "selected": "mds-DataTable__selected", "muted": "mds-DataTable__muted", "empty": "mds-DataTable__empty", "bulk": "mds-DataTable__bulk", "bulkActions": "mds-DataTable__bulkActions", "head": "mds-DataTable__head" };
+var DataTable_module_default = { "root": "mds-DataTable__root", "scroll": "mds-DataTable__scroll", "table": "mds-DataTable__table", "row": "mds-DataTable__row", "body": "mds-DataTable__body", "selected": "mds-DataTable__selected", "cell": "mds-DataTable__cell", "select": "mds-DataTable__select", "actions": "mds-DataTable__actions", "muted": "mds-DataTable__muted", "empty": "mds-DataTable__empty", "bulk": "mds-DataTable__bulk", "bulkActions": "mds-DataTable__bulkActions" };
 function DataTable({
   label,
   columns,
@@ -1528,13 +1529,19 @@ function DataTable({
     return typeof first === "string" ? first : rowKey(row);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(DataTable_module_default.root, className), ref, ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("table", { className: DataTable_module_default.table, "aria-label": label, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: DataTable_module_default.scroll, role: "region", "aria-label": label, tabIndex: 0, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: DataTable_module_default.table, "aria-label": label, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
         selectable && /* @__PURE__ */ jsxRuntime.jsx("col", {}),
-        columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("col", { style: column.width !== void 0 ? { width: column.width } : void 0 }, column.key)),
+        columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+          "col",
+          {
+            style: column.width !== void 0 ? { width: column.width } : void 0
+          },
+          column.key
+        )),
         rowActions && /* @__PURE__ */ jsxRuntime.jsx("col", {})
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { as: "thead", className: DataTable_module_default.head, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: DataTable_module_default.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: DataTable_module_default.row, children: [
         selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: DataTable_module_default.select, children: /* @__PURE__ */ jsxRuntime.jsx(
           Checkbox,
           {
@@ -1554,7 +1561,11 @@ function DataTable({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "tr",
           {
-            className: cx(DataTable_module_default.row, taken && DataTable_module_default.selected, rowMuted?.(row) === true && DataTable_module_default.muted),
+            className: cx(
+              DataTable_module_default.row,
+              taken && DataTable_module_default.selected,
+              rowMuted?.(row) === true && DataTable_module_default.muted
+            ),
             children: [
               selectable && /* @__PURE__ */ jsxRuntime.jsx("td", { className: DataTable_module_default.select, children: /* @__PURE__ */ jsxRuntime.jsx(
                 Checkbox,
@@ -1565,17 +1576,14 @@ function DataTable({
                   onChange: (event) => toggle(key, event.target.checked)
                 }
               ) }),
-              columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsxs("td", { className: cx(DataTable_module_default.cell, index === 0 && DataTable_module_default.lead), children: [
-                index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: DataTable_module_default.key, "aria-hidden": "true", children: column.header }),
-                column.cell(row)
-              ] }, column.key)),
+              columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: DataTable_module_default.cell, children: column.cell(row) }, column.key)),
               rowActions && /* @__PURE__ */ jsxRuntime.jsx("td", { className: DataTable_module_default.actions, children: rowActions(row) })
             ]
           },
           key
         );
       }) : empty !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: DataTable_module_default.row, children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: DataTable_module_default.empty, colSpan: span, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "note", children: empty }) }) }) })
-    ] }),
+    ] }) }),
     selectable && selected.length > 0 && bulkActions !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DataTable_module_default.bulk, role: "status", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", children: selectionLabels.count(selected.length) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: DataTable_module_default.bulkActions, children: bulkActions })
@@ -1885,6 +1893,304 @@ function ModalBody({ children }) {
 function ModalFooter({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module_default.footer, children });
 }
+var VIEWPORT_PAD = 8;
+var MIN_HEIGHT = 120;
+function useAnchoredPosition({
+  open,
+  anchorRef,
+  floatingRef,
+  placement,
+  gap
+}) {
+  react.useEffect(() => {
+    const anchor = anchorRef.current;
+    const floating = floatingRef.current;
+    if (!open || anchor === null || floating === null) return;
+    const update = () => {
+      void dom.computePosition(anchor, floating, {
+        placement,
+        strategy: "fixed",
+        middleware: [
+          dom.offset(gap),
+          // Order is load-bearing: choose the side first, then cap the height
+          // to what that side has, then slide along the cross axis. Sizing
+          // before flipping caps against the side being abandoned.
+          dom.flip({ padding: VIEWPORT_PAD }),
+          dom.size({
+            padding: VIEWPORT_PAD,
+            apply({ availableHeight, elements }) {
+              elements.floating.style.maxHeight = `${Math.max(availableHeight, MIN_HEIGHT)}px`;
+            }
+          }),
+          dom.shift({ padding: VIEWPORT_PAD })
+        ]
+      }).then(({ x, y, placement: resolved }) => {
+        floating.style.left = `${x}px`;
+        floating.style.top = `${y}px`;
+        floating.dataset.placement = resolved;
+      });
+    };
+    return dom.autoUpdate(anchor, floating, update);
+  }, [open, anchorRef, floatingRef, placement, gap]);
+}
+function useDismissOnOutside(open, onDismiss, inside) {
+  const latest = react.useRef({ onDismiss, inside });
+  react.useEffect(() => {
+    latest.current = { onDismiss, inside };
+  });
+  react.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      const { onDismiss: dismiss, inside: refs } = latest.current;
+      if (refs.some((ref) => ref.current?.contains(target))) return;
+      dismiss();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+}
+
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Popover/Popover.module.css?mds-scoped
+var Popover_module_default = { "panel": "mds-Popover__panel", "header": "mds-Popover__header", "headerTitle": "mds-Popover__headerTitle", "close": "mds-Popover__close", "closeGlyph": "mds-Popover__closeGlyph", "body": "mds-Popover__body", "footer": "mds-Popover__footer" };
+var POPOVER_EXIT_MS = 120;
+var GAP = 8;
+function Popover({
+  open,
+  onClose,
+  anchorRef,
+  label,
+  placement = "bottom-start",
+  className,
+  children
+}) {
+  const { mounted, visible } = usePresence(open, POPOVER_EXIT_MS);
+  const panelRef = useOverlay({ open, onClose, lockScroll: false });
+  useAnchoredPosition({ open: mounted, anchorRef, floatingRef: panelRef, placement, gap: GAP });
+  useDismissOnOutside(open, onClose, [panelRef, anchorRef]);
+  if (!mounted) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-label": label,
+        tabIndex: -1,
+        className: cx(Popover_module_default.panel, className),
+        "data-open": visible || void 0,
+        children
+      }
+    ),
+    document.body
+  );
+}
+function PopoverHeader({ children, onClose, closeLabel }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Popover_module_default.header, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: Popover_module_default.headerTitle, children }),
+    onClose !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": closeLabel, className: Popover_module_default.close, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, { className: Popover_module_default.closeGlyph }) })
+  ] });
+}
+function PopoverBody({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Popover_module_default.body, children });
+}
+function PopoverFooter({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Popover_module_default.footer, children });
+}
+function useRovingGroup(ref, { selector, orientation = "horizontal" }) {
+  return react.useCallback(
+    (event) => {
+      const horizontal = orientation !== "vertical";
+      const vertical = orientation !== "horizontal";
+      const forward = horizontal && event.key === "ArrowRight" || vertical && event.key === "ArrowDown";
+      const backward = horizontal && event.key === "ArrowLeft" || vertical && event.key === "ArrowUp";
+      const home = event.key === "Home";
+      const end = event.key === "End";
+      if (!forward && !backward && !home && !end) return;
+      const container = ref.current;
+      if (container === null) return;
+      const items = [...container.querySelectorAll(selector)].filter(
+        (item) => !item.hasAttribute("disabled")
+      );
+      const current = items.indexOf(document.activeElement);
+      if (items.length === 0 || current === -1) return;
+      event.preventDefault();
+      const next = home ? 0 : end ? items.length - 1 : (current + (forward ? 1 : -1) + items.length) % items.length;
+      items[next]?.focus();
+    },
+    [ref, selector, orientation]
+  );
+}
+
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Menu/Menu.module.css?mds-scoped
+var Menu_module_default = { "panel": "mds-Menu__panel", "item": "mds-Menu__item", "tone-danger": "mds-Menu__tone-danger" };
+var MENU_EXIT_MS = 120;
+var GAP2 = 8;
+var ITEM_SELECTOR = '[role="menuitem"]';
+var MenuContext = react.createContext(null);
+function Menu({ label, trigger, placement = "bottom-end", className, children }) {
+  const [open, setOpen] = react.useState(false);
+  const { mounted, visible } = usePresence(open, MENU_EXIT_MS);
+  const triggerRef = react.useRef(null);
+  const panelRef = react.useRef(null);
+  const close = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  const dismiss = () => setOpen(false);
+  useAnchoredPosition({ open: mounted, anchorRef: triggerRef, floatingRef: panelRef, placement, gap: GAP2 });
+  useDismissOnOutside(open, dismiss, [panelRef, triggerRef]);
+  const onArrowKeys = useRovingGroup(panelRef, {
+    selector: ITEM_SELECTOR,
+    orientation: "vertical"
+  });
+  react.useEffect(() => {
+    if (!open) return;
+    const first = panelRef.current?.querySelector(
+      `${ITEM_SELECTOR}:not([disabled])`
+    );
+    first?.focus();
+  }, [open]);
+  const openWithKeyboard = (event) => {
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+    event.preventDefault();
+    setOpen(true);
+  };
+  const { type: Trigger, props: triggerProps } = trigger;
+  return /* @__PURE__ */ jsxRuntime.jsxs(MenuContext.Provider, { value: { close }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Trigger,
+      {
+        ...triggerProps,
+        ref: forkRef(triggerRef, triggerProps.ref),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (event) => {
+          triggerProps.onClick?.(event);
+          setOpen((v) => !v);
+        },
+        onKeyDown: (event) => {
+          triggerProps.onKeyDown?.(event);
+          openWithKeyboard(event);
+        }
+      }
+    ),
+    mounted && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: panelRef,
+          role: "menu",
+          "aria-label": label,
+          className: cx(Menu_module_default.panel, className),
+          "data-open": visible || void 0,
+          onKeyDown: (event) => {
+            if (event.key === "Escape") {
+              event.stopPropagation();
+              close();
+              return;
+            }
+            if (event.key === "Tab") {
+              event.preventDefault();
+              close();
+              return;
+            }
+            onArrowKeys(event);
+          },
+          children
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function MenuItem({ onSelect, disabled = false, tone = "default", children }) {
+  const menu = react.useContext(MenuContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      tabIndex: -1,
+      disabled,
+      className: cx(Menu_module_default.item, Menu_module_default[`tone-${tone}`]),
+      onClick: () => {
+        onSelect();
+        menu?.close();
+      },
+      children
+    }
+  );
+}
+
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Tooltip/Tooltip.module.css?mds-scoped
+var Tooltip_module_default = { "surface": "mds-Tooltip__surface" };
+var GAP3 = 8;
+var DEFAULT_DELAY_MS = 400;
+function Tooltip({
+  content,
+  placement = "top",
+  delayMs = DEFAULT_DELAY_MS,
+  children
+}) {
+  const id = react.useId();
+  const [open, setOpen] = react.useState(false);
+  const anchorRef = react.useRef(null);
+  const surfaceRef = react.useRef(null);
+  const timer = react.useRef(void 0);
+  const show = () => {
+    clearTimeout(timer.current);
+    setOpen(true);
+  };
+  const hide = () => {
+    clearTimeout(timer.current);
+    setOpen(false);
+  };
+  react.useEffect(() => clearTimeout(timer.current), []);
+  useAnchoredPosition({ open, anchorRef, floatingRef: surfaceRef, placement, gap: GAP3 });
+  react.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+  const { type: Trigger, props: triggerProps } = children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Trigger,
+      {
+        ...triggerProps,
+        ref: forkRef(anchorRef, triggerProps.ref),
+        "aria-describedby": open ? id : triggerProps["aria-describedby"],
+        onPointerEnter: (event) => {
+          triggerProps.onPointerEnter?.(event);
+          if (event.pointerType === "touch") return;
+          clearTimeout(timer.current);
+          timer.current = setTimeout(show, delayMs);
+        },
+        onPointerLeave: (event) => {
+          triggerProps.onPointerLeave?.(event);
+          hide();
+        },
+        onFocus: (event) => {
+          triggerProps.onFocus?.(event);
+          show();
+        },
+        onBlur: (event) => {
+          triggerProps.onBlur?.(event);
+          hide();
+        }
+      }
+    ),
+    open && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: surfaceRef, id, role: "tooltip", className: Tooltip_module_default.surface, children: content }),
+      document.body
+    )
+  ] });
+}
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/ConfirmDialog/ConfirmDialog.module.css?mds-scoped
 var ConfirmDialog_module_default = { "description": "mds-ConfirmDialog__description", "error": "mds-ConfirmDialog__error" };
@@ -2430,7 +2736,7 @@ var distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
 function Lightbox({ open, onClose, src, alt = "", caption, labels }) {
   const [surface, setSurface] = react.useState(null);
   const [scale, setScale] = react.useState(MIN_SCALE);
-  const [offset, setOffset] = react.useState(ORIGIN);
+  const [offset2, setOffset] = react.useState(ORIGIN);
   const points = react.useRef(/* @__PURE__ */ new Map());
   const from = react.useRef({ spread: 0, scale: MIN_SCALE, x: 0, y: 0, offset: ORIGIN });
   const [shown, setShown] = react.useState({ src, open });
@@ -2480,7 +2786,7 @@ function Lightbox({ open, onClose, src, alt = "", caption, labels }) {
       from.current = { ...from.current, spread: distance(first, second), scale };
       return;
     }
-    if (first) from.current = { ...from.current, x: first.x, y: first.y, offset };
+    if (first) from.current = { ...from.current, x: first.x, y: first.y, offset: offset2 };
   }
   function onPointerMove(event) {
     if (!points.current.has(event.pointerId)) return;
@@ -2507,12 +2813,12 @@ function Lightbox({ open, onClose, src, alt = "", caption, labels }) {
   function onPointerUp(event) {
     points.current.delete(event.pointerId);
     const [rest] = [...points.current.values()];
-    if (rest) from.current = { ...from.current, x: rest.x, y: rest.y, offset };
+    if (rest) from.current = { ...from.current, x: rest.x, y: rest.y, offset: offset2 };
   }
   const vars = {
     "--zoom": String(round(scale)),
-    "--pan-x": `${round(offset.x)}px`,
-    "--pan-y": `${round(offset.y)}px`
+    "--pan-x": `${round(offset2.x)}px`,
+    "--pan-y": `${round(offset2.y)}px`
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Overlay,
@@ -2783,30 +3089,6 @@ function Breadcrumb({
     ] }, `${item.label}-${index}`);
   }) }) });
 }
-function useRovingGroup(ref, { selector, orientation = "horizontal" }) {
-  return react.useCallback(
-    (event) => {
-      const horizontal = orientation !== "vertical";
-      const vertical = orientation !== "horizontal";
-      const forward = horizontal && event.key === "ArrowRight" || vertical && event.key === "ArrowDown";
-      const backward = horizontal && event.key === "ArrowLeft" || vertical && event.key === "ArrowUp";
-      const home = event.key === "Home";
-      const end = event.key === "End";
-      if (!forward && !backward && !home && !end) return;
-      const container = ref.current;
-      if (container === null) return;
-      const items = [...container.querySelectorAll(selector)].filter(
-        (item) => !item.hasAttribute("disabled")
-      );
-      const current = items.indexOf(document.activeElement);
-      if (items.length === 0 || current === -1) return;
-      event.preventDefault();
-      const next = home ? 0 : end ? items.length - 1 : (current + (forward ? 1 : -1) + items.length) % items.length;
-      items[next]?.focus();
-    },
-    [ref, selector, orientation]
-  );
-}
 
 exports.AppBar = AppBar;
 exports.Avatar = Avatar;
@@ -2842,12 +3124,18 @@ exports.Link = Link;
 exports.ListGroup = ListGroup;
 exports.ListItem = ListItem;
 exports.MediaPlaceholder = MediaPlaceholder;
+exports.Menu = Menu;
+exports.MenuItem = MenuItem;
 exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;
 exports.OverlayHistoryContext = OverlayHistoryContext;
 exports.PasswordInput = PasswordInput;
+exports.Popover = Popover;
+exports.PopoverBody = PopoverBody;
+exports.PopoverFooter = PopoverFooter;
+exports.PopoverHeader = PopoverHeader;
 exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;
 exports.Screen = Screen;
@@ -2877,6 +3165,7 @@ exports.Tag = Tag;
 exports.Text = Text;
 exports.Textarea = Textarea;
 exports.ToastProvider = ToastProvider;
+exports.Tooltip = Tooltip;
 exports.UploadProgress = UploadProgress;
 exports.VideoPlayer = VideoPlayer;
 exports.VisuallyHidden = VisuallyHidden;