@mond-design-system/react 6.1.0 → 6.1.1

package/dist/index.js

@@ -129,7 +129,7 @@ function Icon({ name, size: size2, label, className, ...rest }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Button/Button.module.css?mds-scoped
-var Button_module_default = { "button": "mds-Button__button", "size-sm": "mds-Button__size-sm", "size-md": "mds-Button__size-md", "size-lg": "mds-Button__size-lg", "slot": "mds-Button__slot", "variant-primary": "mds-Button__variant-primary", "variant-secondary": "mds-Button__variant-secondary", "variant-ghost": "mds-Button__variant-ghost", "variant-highlight": "mds-Button__variant-highlight", "variant-danger": "mds-Button__variant-danger", "variant-warning": "mds-Button__variant-warning", "fullWidth": "mds-Button__fullWidth", "icon-only": "mds-Button__icon-only", "on-media": "mds-Button__on-media", "shape-rect": "mds-Button__shape-rect", "shape-pill": "mds-Button__shape-pill" };
+var Button_module_default = { "button": "mds-Button__button", "size-sm": "mds-Button__size-sm", "size-md": "mds-Button__size-md", "size-lg": "mds-Button__size-lg", "slot": "mds-Button__slot", "variant-primary": "mds-Button__variant-primary", "variant-secondary": "mds-Button__variant-secondary", "variant-ghost": "mds-Button__variant-ghost", "variant-highlight": "mds-Button__variant-highlight", "variant-danger": "mds-Button__variant-danger", "variant-warning": "mds-Button__variant-warning", "fullWidth": "mds-Button__fullWidth", "icon-only": "mds-Button__icon-only mds-hit-area__hitArea", "on-media": "mds-Button__on-media", "shape-rect": "mds-Button__shape-rect", "shape-pill": "mds-Button__shape-pill" };
 var ICON_PX = { sm: 16, md: 20, lg: 24 };
 function Button({
   variant = "primary",
@@ -147,13 +147,14 @@ function Button({
   as,
   className,
   children,
+  onClick,
   ...rest
 }) {
   const glyph = iconOnly && children != null ? /* @__PURE__ */ jsx("span", { className: Button_module_default.slot, children }) : children;
   const body = loading && iconOnly ? null : glyph;
   const Element = as ?? (href !== void 0 ? "a" : "button");
   const isButton = Element === "button";
-  const own = isButton ? { type, disabled: disabled || loading } : { href };
+  const own = isButton ? { type, disabled } : { href };
   return /* @__PURE__ */ jsxs(
     Element,
     {
@@ -168,6 +169,8 @@ function Button({
         className
       ),
       "aria-busy": loading || void 0,
+      "aria-disabled": loading || void 0,
+      onClick: loading ? (event) => event.preventDefault() : onClick,
       ...own,
       ...rest,
       children: [
@@ -180,19 +183,21 @@ function Button({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Link/Link.module.css?mds-scoped
-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" };
+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", "hiddenNote": "mds-Link__hiddenNote" };
 function Link({
   variant = "inline",
   size: size2,
   external = false,
+  externalLabel,
   as,
+  children,
   ...rest
 }) {
   const Element = as ?? "a";
   const { className, type, ...others } = rest;
   const externalProps = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
   const typeProps = Element === "button" ? { type: type ?? "button" } : type !== void 0 ? { type } : {};
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Element,
     {
       className: cx(
@@ -203,7 +208,13 @@ function Link({
       ),
       ...externalProps,
       ...others,
-      ...typeProps
+      ...typeProps,
+      children: [
+        children,
+        external && externalLabel !== void 0 && /* The leading space keeps the name "Docs opens in new tab", not
+           "Docsopens…" — inline text concatenates without one. */
+        /* @__PURE__ */ jsx("span", { className: Link_module_default.hiddenNote, children: ` ${externalLabel}` })
+      ]
     }
   );
 }
@@ -354,7 +365,7 @@ function ChipBar({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/CountButton/CountButton.module.css?mds-scoped
-var CountButton_module_default = { "button": "mds-CountButton__button", "tone-accent": "mds-CountButton__tone-accent", "tone-danger": "mds-CountButton__tone-danger", "glyph": "mds-CountButton__glyph" };
+var CountButton_module_default = { "button": "mds-CountButton__button mds-hit-area__hitArea", "tone-accent": "mds-CountButton__tone-accent", "tone-danger": "mds-CountButton__tone-danger", "glyph": "mds-CountButton__glyph" };
 var SPINNER_PX = 20;
 function CountButton({
   icon,
@@ -365,16 +376,20 @@ function CountButton({
   loading = false,
   className,
   children,
+  onClick,
   ...rest
 }) {
   const isToggle = active !== void 0;
+  const spoken = typeof children === "string" || typeof children === "number" ? `${label} ${children}` : label;
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      disabled: disabled || loading,
-      "aria-label": label,
+      disabled,
+      onClick: loading ? (event) => event.preventDefault() : onClick,
+      "aria-label": spoken,
       "aria-pressed": isToggle ? active : void 0,
+      "aria-disabled": loading || void 0,
       "aria-busy": loading || void 0,
       className: cx(CountButton_module_default.button, active && CountButton_module_default[`tone-${tone}`], className),
       ...rest,
@@ -500,7 +515,7 @@ function Field({ label, children, hint, error, required = false, className }) {
     /* @__PURE__ */ jsx(
       FieldContext.Provider,
       {
-        value: { id, describedBy: message ? messageId : void 0, invalid: error !== void 0 },
+        value: { id, describedBy: message ? messageId : void 0, invalid: error !== void 0, required },
         children
       }
     ),
@@ -527,6 +542,7 @@ function Select({ size: size2 = "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),
+        "aria-required": rest["aria-required"] ?? (field?.required || void 0),
         className: cx(Select_module_default.select, Select_module_default[`size-${size2}`], className),
         ...rest,
         children
@@ -538,10 +554,10 @@ function Select({ size: size2 = "md", className, children, ...rest }) {
 var OverlayHistoryContext = createContext(null);
 
 // src/hooks/useOverlay.ts
-var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
 function useOverlay(options) {
   const ref = useRef(null);
-  const { open, onClose, lockScroll = true } = options;
+  const { open, onClose, lockScroll = true, modal = true } = options;
   const close = useRef(onClose);
   useEffect(() => {
     close.current = onClose;
@@ -556,13 +572,24 @@ function useOverlay(options) {
     const panel = ref.current;
     const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     panel?.focus();
+    let marked = [];
+    if (modal && panel) {
+      let portal = panel;
+      while (portal.parentElement && portal.parentElement !== document.body) {
+        portal = portal.parentElement;
+      }
+      marked = [...document.body.children].filter(
+        (sibling) => sibling !== portal && !sibling.hasAttribute("inert")
+      );
+      for (const sibling of marked) sibling.setAttribute("inert", "");
+    }
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
         event.stopPropagation();
         close.current();
         return;
       }
-      if (event.key !== "Tab" || !panel) return;
+      if (!modal || event.key !== "Tab" || !panel) return;
       const focusable = [...panel.querySelectorAll(FOCUSABLE)];
       if (focusable.length === 0) {
         event.preventDefault();
@@ -586,9 +613,13 @@ function useOverlay(options) {
     return () => {
       document.removeEventListener("keydown", onKeyDown);
       if (lockScroll) document.body.style.overflow = bodyOverflow;
-      previous?.focus();
+      for (const sibling of marked) sibling.removeAttribute("inert");
+      const active = document.activeElement;
+      if (modal || panel && active instanceof HTMLElement && panel.contains(active)) {
+        previous?.focus();
+      }
     };
-  }, [open, lockScroll]);
+  }, [open, lockScroll, modal]);
   return ref;
 }
 function usePresence(open, durationMs) {
@@ -609,7 +640,8 @@ function usePresence(open, durationMs) {
   }, [open]);
   useEffect(() => {
     if (open) return;
-    const timer = setTimeout(() => setMounted(false), durationMs);
+    const reduced = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const timer = setTimeout(() => setMounted(false), reduced ? 0 : durationMs);
     return () => clearTimeout(timer);
   }, [open, durationMs]);
   return { mounted: open || mounted, visible };
@@ -619,7 +651,7 @@ function usePresence(open, durationMs) {
 var Overlay_module_default = { "scrim": "mds-Overlay__scrim", "variant-modal": "mds-Overlay__variant-modal", "variant-sheet": "mds-Overlay__variant-sheet", "variant-lightbox": "mds-Overlay__variant-lightbox" };
 var OVERLAY_EXIT_MS = 200;
 var SHEET_EXIT_MS = 320;
-function Overlay({ open, onClose, label, variant, role = "dialog", closeOnScrimClick, panelClassName, children }) {
+function Overlay({ open, onClose, label, variant, role = "dialog", describedBy, closeOnScrimClick, panelClassName, children }) {
   const { mounted, visible } = usePresence(open, variant === "sheet" ? SHEET_EXIT_MS : OVERLAY_EXIT_MS);
   const ref = useOverlay({ open, onClose });
   if (!mounted) return null;
@@ -638,6 +670,7 @@ function Overlay({ open, onClose, label, variant, role = "dialog", closeOnScrimC
             role,
             "aria-modal": "true",
             "aria-label": label,
+            "aria-describedby": describedBy,
             tabIndex: -1,
             className: panelClassName,
             "data-open": visible || void 0,
@@ -681,7 +714,7 @@ function SheetFooter({ children }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/DateTimePicker/DateTimePicker.module.css?mds-scoped
-var DateTimePicker_module_default = { "trigger": "mds-DateTimePicker__trigger", "hasValue": "mds-DateTimePicker__hasValue", "triggerLabel": "mds-DateTimePicker__triggerLabel", "glyph": "mds-DateTimePicker__glyph", "timeRow": "mds-DateTimePicker__timeRow", "grow": "mds-DateTimePicker__grow", "meridiem": "mds-DateTimePicker__meridiem", "colon": "mds-DateTimePicker__colon", "calendarHeader": "mds-DateTimePicker__calendarHeader", "monthLabel": "mds-DateTimePicker__monthLabel", "weekdays": "mds-DateTimePicker__weekdays", "weekday": "mds-DateTimePicker__weekday", "grid": "mds-DateTimePicker__grid", "day": "mds-DateTimePicker__day", "today": "mds-DateTimePicker__today", "selected": "mds-DateTimePicker__selected", "outside": "mds-DateTimePicker__outside" };
+var DateTimePicker_module_default = { "trigger": "mds-DateTimePicker__trigger", "hasValue": "mds-DateTimePicker__hasValue", "triggerLabel": "mds-DateTimePicker__triggerLabel", "glyph": "mds-DateTimePicker__glyph", "timeRow": "mds-DateTimePicker__timeRow", "grow": "mds-DateTimePicker__grow", "meridiem": "mds-DateTimePicker__meridiem", "colon": "mds-DateTimePicker__colon", "calendarHeader": "mds-DateTimePicker__calendarHeader", "monthLabel": "mds-DateTimePicker__monthLabel", "weekdays": "mds-DateTimePicker__weekdays", "weekday": "mds-DateTimePicker__weekday", "grid": "mds-DateTimePicker__grid", "week": "mds-DateTimePicker__week", "day": "mds-DateTimePicker__day", "today": "mds-DateTimePicker__today", "selected": "mds-DateTimePicker__selected", "outside": "mds-DateTimePicker__outside" };
 function localeData(locale) {
   const resolved = new Intl.DateTimeFormat(locale).resolvedOptions().locale;
   const intlLocale = new Intl.Locale(resolved);
@@ -908,9 +941,11 @@ function DateTimePicker({
           if (el) dayRefs.current.set(cellStart, el);
           else dayRefs.current.delete(cellStart);
         } : void 0,
+        role: "gridcell",
         "aria-hidden": inMonth ? void 0 : true,
         "aria-label": intl.dayLabel.format(cell),
-        "aria-pressed": isSelected,
+        "aria-selected": isSelected,
+        "aria-current": isToday ? "date" : void 0,
         onClick: inMonth ? () => pickDay(cell.getDate()) : void 0,
         onKeyDown: inMonth && !isDisabled ? (e) => onDayKeyDown(e, cell) : void 0,
         className: cx(DateTimePicker_module_default.day, isToday && DateTimePicker_module_default.today, isSelected && DateTimePicker_module_default.selected, !inMonth && DateTimePicker_module_default.outside),
@@ -928,6 +963,7 @@ function DateTimePicker({
         type: "button",
         disabled,
         "aria-describedby": field?.describedBy,
+        "aria-invalid": field?.invalid || void 0,
         "aria-haspopup": "dialog",
         "aria-expanded": open,
         "aria-label": ariaLabel === void 0 ? void 0 : [ariaLabel, shown].filter(Boolean).join(": "),
@@ -972,11 +1008,13 @@ function DateTimePicker({
                 children: /* @__PURE__ */ jsx(ChevronLeftGlyph, { className: DateTimePicker_module_default.glyph })
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: DateTimePicker_module_default.monthLabel, children: intl.monthTitle.format(first) }),
+            /* @__PURE__ */ jsx("span", { className: DateTimePicker_module_default.monthLabel, "aria-live": "polite", children: intl.monthTitle.format(first) }),
             /* @__PURE__ */ jsx(Button, { iconOnly: true, "aria-label": text.nextMonth, variant: "ghost", size: "sm", onClick: () => shiftMonth(1), children: /* @__PURE__ */ jsx(ChevronRightGlyph, { className: DateTimePicker_module_default.glyph }) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: DateTimePicker_module_default.weekdays, children: intl.weekdays.map((w, i) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: DateTimePicker_module_default.weekday, children: w }, `wd-${i}`)) }),
-          /* @__PURE__ */ jsx("div", { className: DateTimePicker_module_default.grid, children: dayCells })
+          /* @__PURE__ */ jsxs("div", { role: "grid", "aria-label": intl.monthTitle.format(first), children: [
+            /* @__PURE__ */ jsx("div", { role: "row", className: DateTimePicker_module_default.weekdays, children: intl.weekdays.map((w, i) => /* @__PURE__ */ jsx("span", { role: "columnheader", className: DateTimePicker_module_default.weekday, children: w }, `wd-${i}`)) }),
+            /* @__PURE__ */ jsx("div", { role: "rowgroup", className: DateTimePicker_module_default.grid, children: Array.from({ length: spanCells / 7 }, (_, w) => /* @__PURE__ */ jsx("div", { role: "row", className: DateTimePicker_module_default.week, children: dayCells.slice(w * 7, w * 7 + 7) }, `w-${w}`)) })
+          ] })
         ] })
       ] }),
       /* @__PURE__ */ jsxs(SheetFooter, { children: [
@@ -1137,6 +1175,7 @@ function Input({
       id: rest.id ?? field?.id,
       "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
       "aria-invalid": rest["aria-invalid"] ?? ((invalid ?? field?.invalid) || void 0),
+      "aria-required": rest["aria-required"] ?? (field?.required || void 0),
       className: cx(
         Input_module_default.input,
         Input_module_default[`size-${size2}`],
@@ -1159,7 +1198,7 @@ function Input({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/PasswordInput/PasswordInput.module.css?mds-scoped
-var PasswordInput_module_default = { "wrap": "mds-PasswordInput__wrap", "input": "mds-PasswordInput__input", "toggle": "mds-PasswordInput__toggle" };
+var PasswordInput_module_default = { "wrap": "mds-PasswordInput__wrap", "input": "mds-PasswordInput__input", "toggle": "mds-PasswordInput__toggle mds-hit-area__hitArea" };
 function PasswordInput({
   showLabel,
   hideLabel,
@@ -1201,28 +1240,31 @@ function PasswordInput({
 var Textarea_module_default = { "textarea": "mds-Textarea__textarea", "wrap": "mds-Textarea__wrap", "count": "mds-Textarea__count" };
 function Textarea({ rows = 3, showCount = false, className, ...rest }) {
   const field = useFieldContext();
+  const countId = useId();
   const [tracked, setTracked] = useState(() => String(rest.defaultValue ?? ""));
   const current = rest.value !== void 0 ? String(rest.value) : tracked;
   const onChange = (event) => {
     setTracked(event.target.value);
     rest.onChange?.(event);
   };
+  const describedBy = [rest["aria-describedby"] ?? field?.describedBy, showCount ? countId : void 0].filter(Boolean).join(" ") || void 0;
   const textarea = /* @__PURE__ */ jsx(
     "textarea",
     {
       id: rest.id ?? field?.id,
-      "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
       "aria-invalid": rest["aria-invalid"] ?? (field?.invalid || void 0),
+      "aria-required": rest["aria-required"] ?? (field?.required || void 0),
       rows,
       className: cx(Textarea_module_default.textarea, className),
       ...rest,
+      "aria-describedby": describedBy,
       ...showCount ? { onChange } : {}
     }
   );
   if (!showCount) return textarea;
   return /* @__PURE__ */ jsxs("span", { className: Textarea_module_default.wrap, children: [
     textarea,
-    /* @__PURE__ */ jsx("span", { className: Textarea_module_default.count, "aria-hidden": "true", children: rest.maxLength !== void 0 ? `${current.length}/${rest.maxLength}` : current.length })
+    /* @__PURE__ */ jsx("span", { id: countId, className: Textarea_module_default.count, children: rest.maxLength !== void 0 ? `${current.length}/${rest.maxLength}` : current.length })
   ] });
 }
 
@@ -1270,6 +1312,8 @@ function Switch({
   loading = false,
   disabled = false,
   className,
+  onClick,
+  onChange,
   ...rest
 }) {
   return /* @__PURE__ */ jsxs("label", { className: cx(Switch_module_default.root, className), children: [
@@ -1280,7 +1324,10 @@ function Switch({
           type: "checkbox",
           role: "switch",
           className: Switch_module_default.track,
-          disabled: disabled || loading,
+          disabled,
+          onClick: loading ? (event) => event.preventDefault() : onClick,
+          onChange: loading ? void 0 : onChange,
+          "aria-disabled": loading || void 0,
           "aria-busy": loading || void 0,
           ...rest
         }
@@ -1425,6 +1472,7 @@ function ListGroup({ label, className, ...rest }) {
   const list = /* @__PURE__ */ jsx(ListGroupContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
     "ul",
     {
+      role: "list",
       className: cx(List_module_default.group, className),
       "aria-labelledby": label != null ? headingId : void 0,
       ...rest
@@ -1591,10 +1639,10 @@ function DataTable({
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/EmptyState/EmptyState.module.css?mds-scoped
 var EmptyState_module_default = { "root": "mds-EmptyState__root", "icon": "mds-EmptyState__icon", "action": "mds-EmptyState__action" };
-function EmptyState({ title, description, icon, action, className }) {
+function EmptyState({ title, level = 3, description, icon, action, className }) {
   return /* @__PURE__ */ jsxs("div", { className: cx(EmptyState_module_default.root, className), children: [
     icon != null && /* @__PURE__ */ jsx("span", { className: EmptyState_module_default.icon, "aria-hidden": "true", children: icon }),
-    /* @__PURE__ */ jsx(Heading, { level: 3, children: title }),
+    /* @__PURE__ */ jsx(Heading, { level, children: title }),
     description !== void 0 && /* @__PURE__ */ jsx(Text, { tone: "secondary", children: description }),
     action != null && /* @__PURE__ */ jsx("span", { className: EmptyState_module_default.action, children: action })
   ] });
@@ -1682,6 +1730,7 @@ function TabPanel({ value, className, children, ...rest }) {
       role: "tabpanel",
       id: `${tabs.baseId}-panel-${value}`,
       "aria-labelledby": `${tabs.baseId}-tab-${value}`,
+      tabIndex: 0,
       hidden: !selected,
       className: cx(Tabs_module_default.panel, className),
       ...rest,
@@ -1706,7 +1755,22 @@ function ToastProvider({
   const [toasts, setToasts] = useState([]);
   const nextId = useRef(1);
   const leaving = useRef(/* @__PURE__ */ new Map());
+  const clocks = useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const held = useRef(0);
+  const surfaces = useRef(/* @__PURE__ */ new Map());
   const dismiss = useCallback((id) => {
+    const clock2 = clocks.current.get(id);
+    if (clock2 !== void 0) {
+      clearTimeout(clock2.handle);
+      clocks.current.delete(id);
+    }
+    const surface = surfaces.current.get(id);
+    if (surface?.contains(document.activeElement)) {
+      const neighbour = surface.nextElementSibling ?? surface.previousElementSibling;
+      neighbour?.querySelector("button:last-child")?.focus();
+    }
     setToasts((current) => current.filter((entry) => entry.id !== id));
     const said = leaving.current.get(id);
     if (said !== void 0) {
@@ -1714,55 +1778,98 @@ function ToastProvider({
       said();
     }
   }, []);
+  const start = useCallback(
+    (id, remaining) => {
+      clocks.current.set(id, {
+        handle: setTimeout(() => dismiss(id), remaining),
+        startedAt: Date.now(),
+        remaining
+      });
+    },
+    [dismiss]
+  );
+  const hold = useCallback(() => {
+    if (held.current++ > 0) return;
+    for (const clock2 of clocks.current.values()) {
+      clearTimeout(clock2.handle);
+      clock2.remaining -= Date.now() - clock2.startedAt;
+    }
+  }, []);
+  const release = useCallback(() => {
+    if (--held.current > 0) return;
+    held.current = 0;
+    for (const [id, clock2] of clocks.current) {
+      start(id, Math.max(clock2.remaining, 0));
+    }
+  }, [start]);
   const toast = useCallback(
     ({ title, description, tone = "neutral", duration = 5e3, action, onDismiss }) => {
       const id = nextId.current++;
       if (onDismiss !== void 0) leaving.current.set(id, onDismiss);
       setToasts((current) => [...current, { id, title, description, tone, action }]);
-      if (duration > 0) setTimeout(() => dismiss(id), duration);
+      if (duration > 0) {
+        start(id, duration);
+        if (held.current > 0) clearTimeout(clocks.current.get(id)?.handle);
+      }
       return id;
     },
-    [dismiss]
+    [start]
   );
   const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx("div", { role: "region", "aria-label": regionLabel, className: Toast_module_default.viewport, children: toasts.map((entry) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "div",
       {
-        role: entry.tone === "danger" ? "alert" : "status",
-        className: cx(Toast_module_default.toast, Toast_module_default[`tone-${entry.tone}`]),
-        children: [
-          /* @__PURE__ */ jsxs("span", { className: Toast_module_default.body, children: [
-            /* @__PURE__ */ jsx("span", { className: Toast_module_default.title, children: entry.title }),
-            entry.description !== void 0 && /* @__PURE__ */ jsx("span", { className: Toast_module_default.description, children: entry.description })
-          ] }),
-          entry.action !== void 0 && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: Toast_module_default.action,
-              onClick: () => {
-                entry.action?.onClick();
-                dismiss(entry.id);
-              },
-              children: entry.action.label
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": `${dismissLabel}: ${entry.title}`,
-              className: Toast_module_default.close,
-              onClick: () => dismiss(entry.id),
-              children: /* @__PURE__ */ jsx(CloseGlyph, { className: Toast_module_default.closeGlyph })
-            }
-          )
-        ]
-      },
-      entry.id
-    )) })
+        role: "region",
+        "aria-label": regionLabel,
+        className: Toast_module_default.viewport,
+        onPointerEnter: hold,
+        onPointerLeave: release,
+        onFocus: hold,
+        onBlur: release,
+        children: toasts.map((entry) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: (node) => {
+              if (node !== null) surfaces.current.set(entry.id, node);
+              else surfaces.current.delete(entry.id);
+            },
+            role: entry.tone === "danger" ? "alert" : "status",
+            className: cx(Toast_module_default.toast, Toast_module_default[`tone-${entry.tone}`]),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: Toast_module_default.body, children: [
+                /* @__PURE__ */ jsx("span", { className: Toast_module_default.title, children: entry.title }),
+                entry.description !== void 0 && /* @__PURE__ */ jsx("span", { className: Toast_module_default.description, children: entry.description })
+              ] }),
+              entry.action !== void 0 && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: Toast_module_default.action,
+                  onClick: () => {
+                    entry.action?.onClick();
+                    dismiss(entry.id);
+                  },
+                  children: entry.action.label
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `${dismissLabel}: ${entry.title}`,
+                  className: Toast_module_default.close,
+                  onClick: () => dismiss(entry.id),
+                  children: /* @__PURE__ */ jsx(CloseGlyph, { className: Toast_module_default.closeGlyph })
+                }
+              )
+            ]
+          },
+          entry.id
+        ))
+      }
+    )
   ] });
 }
 
@@ -1827,9 +1934,23 @@ function Container(props) {
 var Card_module_default = { "card": "mds-Card__card", "variant-raised": "mds-Card__variant-raised", "variant-sunken": "mds-Card__variant-sunken", "emphasis": "mds-Card__emphasis", "interactive": "mds-Card__interactive", "header": "mds-Card__header", "body": "mds-Card__body", "footer": "mds-Card__footer", "clipped": "mds-Card__clipped" };
 function Card({ children, variant = "card", emphasis = false, onClick, href, as, className, ref, ...rest }) {
   const cardClass = cx(Card_module_default.card, Card_module_default[`variant-${variant}`], emphasis && Card_module_default.emphasis, className);
+  const own = useRef(null);
+  const interactive = href !== void 0 || onClick !== void 0;
+  useEffect(() => {
+    if (!interactive) return;
+    const nested = own.current?.querySelector(
+      "a[href], button, input, select, textarea, [tabindex]"
+    );
+    if (nested != null) {
+      console.warn(
+        "Card: this card is a link or button, and it contains another interactive element. Move the control outside the card, or drop onClick/href.",
+        nested
+      );
+    }
+  });
   if (href !== void 0) {
     const Element2 = as ?? "a";
-    return /* @__PURE__ */ jsx(Element2, { className: cx(cardClass, Card_module_default.interactive), href, ref, ...rest, children });
+    return /* @__PURE__ */ jsx(Element2, { className: cx(cardClass, Card_module_default.interactive), href, ref: forkRef(own, ref), ...rest, children });
   }
   if (onClick !== void 0) {
     return /* @__PURE__ */ jsx(
@@ -1838,7 +1959,7 @@ function Card({ children, variant = "card", emphasis = false, onClick, href, as,
         type: "button",
         className: cx(cardClass, Card_module_default.interactive),
         onClick,
-        ref,
+        ref: forkRef(own, ref),
         ...rest,
         children
       }
@@ -1867,7 +1988,7 @@ function CardFooter({ className, ...rest }) {
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Modal/Modal.module.css?mds-scoped
 var Modal_module_default = { "panel": "mds-Modal__panel", "header": "mds-Modal__header", "headerTitle": "mds-Modal__headerTitle", "body": "mds-Modal__body", "footer": "mds-Modal__footer" };
-function Modal({ open, onClose, label, closeOnScrimClick = true, role = "dialog", children }) {
+function Modal({ open, onClose, label, closeOnScrimClick = true, role = "dialog", describedBy, children }) {
   return /* @__PURE__ */ jsx(
     Overlay,
     {
@@ -1876,6 +1997,7 @@ function Modal({ open, onClose, label, closeOnScrimClick = true, role = "dialog"
       label,
       variant: "modal",
       role,
+      describedBy,
       closeOnScrimClick,
       panelClassName: Modal_module_default.panel,
       children
@@ -1959,12 +2081,13 @@ function Popover({
   onClose,
   anchorRef,
   label,
+  id,
   placement = "bottom-start",
   className,
   children
 }) {
   const { mounted, visible } = usePresence(open, POPOVER_EXIT_MS);
-  const panelRef = useOverlay({ open, onClose, lockScroll: false });
+  const panelRef = useOverlay({ open, onClose, lockScroll: false, modal: false });
   useAnchoredPosition({ open: mounted, anchorRef, floatingRef: panelRef, placement, gap: GAP });
   useDismissOnOutside(open, onClose, [panelRef, anchorRef]);
   if (!mounted) return null;
@@ -1973,6 +2096,7 @@ function Popover({
       "div",
       {
         ref: panelRef,
+        id,
         role: "dialog",
         "aria-label": label,
         tabIndex: -1,
@@ -2028,7 +2152,9 @@ var GAP2 = 8;
 var ITEM_SELECTOR = '[role="menuitem"]';
 var MenuContext = createContext(null);
 function Menu({ label, trigger, placement = "bottom-end", className, children }) {
+  const id = useId();
   const [open, setOpen] = useState(false);
+  const enterAt = useRef("first");
   const { mounted, visible } = usePresence(open, MENU_EXIT_MS);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
@@ -2045,14 +2171,16 @@ function Menu({ label, trigger, placement = "bottom-end", className, children })
   });
   useEffect(() => {
     if (!open) return;
-    const first = panelRef.current?.querySelector(
+    const items = panelRef.current?.querySelectorAll(
       `${ITEM_SELECTOR}:not([disabled])`
     );
-    first?.focus();
+    if (items === void 0 || items.length === 0) return;
+    items[enterAt.current === "last" ? items.length - 1 : 0]?.focus();
   }, [open]);
   const openWithKeyboard = (event) => {
     if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
     event.preventDefault();
+    enterAt.current = event.key === "ArrowUp" ? "last" : "first";
     setOpen(true);
   };
   const { type: Trigger, props: triggerProps } = trigger;
@@ -2064,8 +2192,10 @@ function Menu({ label, trigger, placement = "bottom-end", className, children })
         ref: forkRef(triggerRef, triggerProps.ref),
         "aria-haspopup": "menu",
         "aria-expanded": open,
+        "aria-controls": open ? id : void 0,
         onClick: (event) => {
           triggerProps.onClick?.(event);
+          enterAt.current = "first";
           setOpen((v) => !v);
         },
         onKeyDown: (event) => {
@@ -2079,6 +2209,7 @@ function Menu({ label, trigger, placement = "bottom-end", className, children })
         "div",
         {
           ref: panelRef,
+          id,
           role: "menu",
           "aria-label": label,
           className: cx(Menu_module_default.panel, className),
@@ -2090,10 +2221,22 @@ function Menu({ label, trigger, placement = "bottom-end", className, children })
               return;
             }
             if (event.key === "Tab") {
-              event.preventDefault();
               close();
               return;
             }
+            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+              const items = [
+                ...panelRef.current?.querySelectorAll(
+                  `${ITEM_SELECTOR}:not([disabled])`
+                ) ?? []
+              ];
+              const current = items.indexOf(event.target);
+              const fromNext = [...items.slice(current + 1), ...items.slice(0, current + 1)];
+              fromNext.find(
+                (item) => item.textContent?.trim().toLowerCase().startsWith(event.key.toLowerCase())
+              )?.focus();
+              return;
+            }
             onArrowKeys(event);
           },
           children
@@ -2126,6 +2269,7 @@ function MenuItem({ onSelect, disabled = false, tone = "default", children }) {
 var Tooltip_module_default = { "surface": "mds-Tooltip__surface" };
 var GAP3 = 8;
 var DEFAULT_DELAY_MS = 400;
+var HOVER_GRACE_MS = 150;
 function Tooltip({
   content,
   placement = "top",
@@ -2145,6 +2289,10 @@ function Tooltip({
     clearTimeout(timer.current);
     setOpen(false);
   };
+  const hideAfterGrace = () => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(hide, HOVER_GRACE_MS);
+  };
   useEffect(() => clearTimeout(timer.current), []);
   useAnchoredPosition({ open, anchorRef, floatingRef: surfaceRef, placement, gap: GAP3 });
   useEffect(() => {
@@ -2171,7 +2319,7 @@ function Tooltip({
         },
         onPointerLeave: (event) => {
           triggerProps.onPointerLeave?.(event);
-          hide();
+          hideAfterGrace();
         },
         onFocus: (event) => {
           triggerProps.onFocus?.(event);
@@ -2184,7 +2332,18 @@ function Tooltip({
       }
     ),
     open && createPortal(
-      /* @__PURE__ */ jsx("div", { ref: surfaceRef, id, role: "tooltip", className: Tooltip_module_default.surface, children: content }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: surfaceRef,
+          id,
+          role: "tooltip",
+          className: Tooltip_module_default.surface,
+          onPointerEnter: show,
+          onPointerLeave: hideAfterGrace,
+          children: content
+        }
+      ),
       document.body
     )
   ] });
@@ -2209,6 +2368,7 @@ function ConfirmDialog({
   tone = "default",
   errorMessage
 }) {
+  const descriptionId = useId();
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState(null);
   const [prevOpen, setPrevOpen] = useState(open);
@@ -2247,11 +2407,12 @@ function ConfirmDialog({
       onClose: close,
       label: view.title,
       role: "alertdialog",
+      describedBy: view.description != null ? descriptionId : void 0,
       closeOnScrimClick: false,
       children: [
         /* @__PURE__ */ jsx(ModalHeader, { children: view.title }),
         /* @__PURE__ */ jsxs(ModalBody, { children: [
-          view.description != null ? /* @__PURE__ */ jsx("p", { className: ConfirmDialog_module_default.description, children: view.description }) : null,
+          view.description != null ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: ConfirmDialog_module_default.description, children: view.description }) : null,
           error != null ? /* @__PURE__ */ jsx("p", { role: "alert", className: ConfirmDialog_module_default.error, children: error }) : null
         ] }),
         /* @__PURE__ */ jsxs(ModalFooter, { children: [
@@ -2298,6 +2459,7 @@ function TabBarItem({
   onClick,
   active = false,
   badge = false,
+  badgeLabel,
   as,
   hideLabel = false
 }) {
@@ -2307,7 +2469,8 @@ function TabBarItem({
       icon,
       badge ? /* @__PURE__ */ jsx("span", { className: TabBar_module_default.badge, "data-testid": "mds-tabbar-badge" }) : null
     ] }),
-    hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: label }) : /* @__PURE__ */ jsx("span", { className: TabBar_module_default.label, children: label })
+    hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: label }) : /* @__PURE__ */ jsx("span", { className: TabBar_module_default.label, children: label }),
+    badge && badgeLabel !== void 0 && /* @__PURE__ */ jsx(VisuallyHidden, { children: badgeLabel })
   ] });
   if (href !== void 0) {
     const Element = as ?? "a";
@@ -2406,8 +2569,8 @@ function MediaPlaceholder({
             decoding: "async",
             onError: () => setFailed(src)
           }
-        ) : /* @__PURE__ */ jsxs("div", { className: MediaPlaceholder_module_default.fill, "aria-hidden": "true", children: [
-          glyph,
+        ) : /* @__PURE__ */ jsxs("div", { className: MediaPlaceholder_module_default.fill, children: [
+          glyph != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: glyph }),
           caption !== void 0 && /* @__PURE__ */ jsx(Text, { variant: "meta", children: caption })
         ] }),
         picture && caption !== void 0 && /* @__PURE__ */ jsx(Text, { variant: "meta", tone: "on-media", className: MediaPlaceholder_module_default.caption, children: caption }),
@@ -2624,7 +2787,7 @@ function UploadProgress({
   return /* @__PURE__ */ jsxs("div", { className: cx(UploadProgress_module_default.upload, UploadProgress_module_default[`status-${status}`], className), ...rest, children: [
     /* @__PURE__ */ jsxs("div", { className: UploadProgress_module_default.head, children: [
       preview !== void 0 && /* @__PURE__ */ jsx("div", { className: UploadProgress_module_default.preview, children: preview }),
-      mark !== void 0 && /* @__PURE__ */ jsx("span", { className: UploadProgress_module_default.mark, children: mark }),
+      mark !== void 0 && /* @__PURE__ */ jsx("span", { className: UploadProgress_module_default.mark, "aria-hidden": "true", children: mark }),
       /* @__PURE__ */ jsx(Text, { variant: "label", truncate: true, className: UploadProgress_module_default.name, children: name }),
       running && onCancel !== void 0 && /* @__PURE__ */ jsx(Button, { iconOnly: true, size: "sm", variant: "ghost", "aria-label": labels.cancel, onClick: onCancel, children: /* @__PURE__ */ jsx(CloseGlyph, {}) }),
       !running && onRemove !== void 0 && /* @__PURE__ */ jsx(Button, { iconOnly: true, size: "sm", variant: "ghost", "aria-label": labels.remove, onClick: onRemove, children: /* @__PURE__ */ jsx(CloseGlyph, {}) }),
@@ -2640,7 +2803,7 @@ function UploadProgress({
       }
     ),
     /* @__PURE__ */ jsx("div", { className: UploadProgress_module_default.foot, children: status === "error" ? /* @__PURE__ */ jsx(Text, { variant: "meta", tone: "danger", role: "alert", children: error ?? labels.error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      status !== "uploading" && /* @__PURE__ */ jsx(Text, { variant: "meta", children: labels[status] }),
+      /* @__PURE__ */ jsx(Text, { variant: "meta", role: "status", children: status === "uploading" ? null : labels[status] }),
       detail !== void 0 && /* @__PURE__ */ jsx(Text, { variant: "meta", children: detail })
     ] }) })
   ] });
@@ -2693,7 +2856,7 @@ function FileDrop({
             disabled,
             onClick: () => picker.current?.click(),
             children: [
-              icon !== void 0 && /* @__PURE__ */ jsx("span", { className: FileDrop_module_default.icon, children: icon }),
+              icon !== void 0 && /* @__PURE__ */ jsx("span", { className: FileDrop_module_default.icon, "aria-hidden": "true", children: icon }),
               /* @__PURE__ */ jsx(Text, { variant: "label", children: label }),
               hint !== void 0 && /* @__PURE__ */ jsx(Text, { variant: "meta", children: hint })
             ]
@@ -2727,6 +2890,13 @@ var MAX_SCALE = 4;
 var STEP2 = 1;
 var DOUBLE = 2.5;
 var WHEEL = 0.01;
+var KEY_PAN_PX = 48;
+var ARROWS = {
+  ArrowLeft: { x: 1, y: 0 },
+  ArrowRight: { x: -1, y: 0 },
+  ArrowUp: { x: 0, y: 1 },
+  ArrowDown: { x: 0, y: -1 }
+};
 var ORIGIN = { x: 0, y: 0 };
 var clamp = (value, low, high) => Math.min(Math.max(value, low), high);
 var round = (value) => Math.round(value * 1e3) / 1e3;
@@ -2777,6 +2947,19 @@ function Lightbox({ open, onClose, src, alt = "", caption, labels }) {
     surface.addEventListener("wheel", onWheel, { passive: false });
     return () => surface.removeEventListener("wheel", onWheel);
   }, [surface, zoom]);
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      const step = ARROWS[event.key];
+      if (step === void 0 || at.current <= MIN_SCALE) return;
+      event.preventDefault();
+      setOffset(
+        (current) => hold({ x: current.x + step.x * KEY_PAN_PX, y: current.y + step.y * KEY_PAN_PX }, at.current)
+      );
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, hold]);
   function onPointerDown(event) {
     points.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
     const [first, second] = [...points.current.values()];
@@ -2911,6 +3094,7 @@ function VideoPlayer({
   const [at, setAt] = useState(0);
   const [length, setLength] = useState(0);
   const [isFullscreen, setFullscreen] = useState(false);
+  const [captionsOn, setCaptionsOn] = useState(captions?.defaultOn ?? false);
   function toggle() {
     const el = media.current;
     if (!el) return;
@@ -2936,7 +3120,10 @@ function VideoPlayer({
   }
   function toggleCaptions() {
     const track = media.current?.textTracks?.[0];
-    if (track) track.mode = track.mode === "showing" ? "disabled" : "showing";
+    if (!track) return;
+    const next = track.mode !== "showing";
+    track.mode = next ? "showing" : "disabled";
+    setCaptionsOn(next);
   }
   function selectChapter(chapter) {
     goTo(chapter.at);
@@ -3017,6 +3204,7 @@ function VideoPlayer({
               type: "range",
               className: VideoPlayer_module_default.scrub,
               "aria-label": labels.seek,
+              "aria-valuetext": `${clock(Math.min(at, length || 0))} / ${clock(length)}`,
               min: 0,
               max: length || 0,
               step: 1,
@@ -3043,7 +3231,7 @@ function VideoPlayer({
               "aria-label": captionsLabel,
               variant: "ghost",
               size: "sm",
-              "aria-pressed": captions.defaultOn ?? false,
+              "aria-pressed": captionsOn,
               onClick: toggleCaptions,
               children: /* @__PURE__ */ jsx(CaptionsGlyph, {})
             }
@@ -3083,7 +3271,12 @@ function Breadcrumb({
     const last = index === items.length - 1;
     return /* @__PURE__ */ jsxs("li", { className: Breadcrumb_module_default.item, children: [
       index > 0 && /* @__PURE__ */ jsx(ChevronRightGlyph, { className: Breadcrumb_module_default.separator }),
-      last || item.href === void 0 ? /* @__PURE__ */ jsx(Text, { variant: "meta", tone: last ? "primary" : "muted", "aria-current": last ? "page" : void 0, children: item.label }) : /* @__PURE__ */ jsx(Link, { variant: "plain", size: "xs", as: linkAs, href: item.href, className: Breadcrumb_module_default.link, children: item.label })
+      last || item.href === void 0 ? /* @__PURE__ */ jsx(Text, { variant: "meta", tone: last ? "primary" : "muted", "aria-current": last ? "page" : void 0, children: item.label }) : (
+        /* inline, not plain: the underline is what separates a step
+           you can go back to from the one you are standing on, for a
+           reader who cannot tell the two text colors apart. */
+        /* @__PURE__ */ jsx(Link, { variant: "inline", size: "xs", as: linkAs, href: item.href, className: Breadcrumb_module_default.link, children: item.label })
+      )
     ] }, `${item.label}-${index}`);
   }) }) });
 }