@mond-design-system/react 4.12.0 → 5.1.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) {
@@ -1094,38 +1095,68 @@ function ProgressBar({
   );
 }
 
+// src/internal/forkRef.ts
+function forkRef(own, given) {
+  return (node) => {
+    own.current = node;
+    if (typeof given === "function") given(node);
+    else if (given != null) given.current = node;
+  };
+}
+
 // 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", "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", "iconLeft": "mds-Input__iconLeft", "iconRight": "mds-Input__iconRight", "with-icon-left": "mds-Input__with-icon-left", "with-icon-right": "mds-Input__with-icon-right" };
+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,
+  onClear,
+  clearLabel,
   className,
+  ref,
   ...rest
 }) {
   const field = useFieldContext();
+  const own = react.useRef(null);
+  const [typedInto, setTypedInto] = react.useState(() => String(rest.defaultValue ?? "") !== "");
+  const hasText = rest.value !== void 0 ? String(rest.value) !== "" : typedInto;
+  const showClear = onClear != null && hasText;
+  const handleChange = (event) => {
+    if (onClear != null) setTypedInto(event.target.value !== "");
+    rest.onChange?.(event);
+  };
+  const clear = () => {
+    if (rest.value === void 0 && own.current != null) own.current.value = "";
+    setTypedInto(false);
+    own.current?.focus();
+    onClear?.();
+  };
   const input = /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
+      ref: forkRef(own, ref),
       id: rest.id ?? field?.id,
       "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
       "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 && Input_module_default["with-icon-right"],
+        (iconRight != null || showClear) && Input_module_default["with-icon-right"],
+        onClear != null && Input_module_default["own-clear"],
         className
       ),
-      ...rest
+      ...rest,
+      onChange: handleChange
     }
   );
-  if (iconLeft == null && iconRight == null) return input;
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Input_module_default.iconWrap, children: [
+  if (iconLeft == null && iconRight == null && onClear == null) return input;
+  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 })
+    iconRight != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconRight), "aria-hidden": "true", children: iconRight }),
+    showClear && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": clearLabel, className: Input_module_default.clear, onClick: clear, children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, { className: Input_module_default.clearGlyph }) })
   ] });
 }
 
@@ -1197,15 +1228,6 @@ function Textarea({ rows = 3, showCount = false, className, ...rest }) {
   ] });
 }
 
-// src/internal/forkRef.ts
-function forkRef(own, given) {
-  return (node) => {
-    own.current = node;
-    if (typeof given === "function") given(node);
-    else if (given != null) given.current = node;
-  };
-}
-
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Checkbox/Checkbox.module.css?mds-scoped
 var Checkbox_module_default = { "root": "mds-Checkbox__root", "box": "mds-Checkbox__box mds-hit-area__hitArea", "bare": "mds-Checkbox__bare", "label": "mds-Checkbox__label" };
 function Checkbox({
@@ -1280,7 +1302,7 @@ function SegmentedControl({
   onChange,
   disabled = false,
   fullWidth = false,
-  size = "md",
+  size: size2 = "md",
   bare = false,
   repick = false,
   className
@@ -1293,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
@@ -1318,51 +1340,6 @@ function SegmentedControl({
   );
 }
 
-// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SearchField/SearchField.module.css?mds-scoped
-var SearchField_module_default = { "wrap": "mds-SearchField__wrap", "glass": "mds-SearchField__glass", "input": "mds-SearchField__input", "clear": "mds-SearchField__clear mds-hit-area__hitArea", "clearGlyph": "mds-SearchField__clearGlyph" };
-function SearchField({
-  label,
-  clearLabel,
-  value,
-  onChange,
-  className,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(SearchField_module_default.wrap, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_module_default.glass, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M7 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm7 2-3.5-3.5",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        strokeLinecap: "round"
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "search",
-        "aria-label": label,
-        value,
-        onChange: (event) => onChange(event.target.value),
-        className: SearchField_module_default.input,
-        ...rest
-      }
-    ),
-    value !== "" && /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": clearLabel,
-        className: SearchField_module_default.clear,
-        onClick: () => onChange(""),
-        children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, { className: SearchField_module_default.clearGlyph })
-      }
-    )
-  ] });
-}
-
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Scroller/Scroller.module.css?mds-scoped
 var Scroller_module_default = { "scroller": "mds-Scroller__scroller", "header": "mds-Scroller__header", "trailing": "mds-Scroller__trailing", "track": "mds-Scroller__track", "arrows": "mds-Scroller__arrows" };
 var STEP = 0.8;
@@ -1909,6 +1886,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" };
@@ -2454,7 +2729,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 });
@@ -2504,7 +2779,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;
@@ -2531,12 +2806,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,
@@ -2807,30 +3082,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;
@@ -2866,18 +3117,23 @@ 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;
 exports.ScreenContent = ScreenContent;
 exports.Scroller = Scroller;
-exports.SearchField = SearchField;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.Sheet = Sheet;
@@ -2902,6 +3158,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;