gridsmith-ui 0.24.0 → 0.25.0

package/dist/index.js

@@ -1,30 +1,33 @@
-import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useOverlayMark, useDirtyGuard, useScrollbarInset, DrawerFooterCtx, OverlayMarkScope, OverlayCloseCtx, insetLessScrollbar, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth, DrawerPanel, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-MV7JXWXK.js';
-export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-MV7JXWXK.js';
-import { Skeleton, TITLE_TEXT } from './chunk-NCIZQYXQ.js';
-export { Skeleton } from './chunk-NCIZQYXQ.js';
+import { inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, CardValue } from './chunk-OTCEJN64.js';
+import { useWholeListCheck, pagerPart, Pagination, Input, CHECK_FILL, Dropdown, FilterRowContext, SWITCH_KNOB_ON, SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION, SWITCH_TRACK_ON, SWITCH_TRACK_OFF, useFieldControl, useField, Label, InlineFieldError, AddAnotherRowCtx, Field } from './chunk-W7GCEJEH.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-W7GCEJEH.js';
+import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useOverlayMark, useDirtyGuard, useScrollbarInset, DrawerFooterCtx, OverlayMarkScope, OverlayCloseCtx, insetLessScrollbar, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth, DrawerPanel, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-3CUKJ4VP.js';
+export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-3CUKJ4VP.js';
+import { Button, ControlSizeContext, triggerType, Spinner, useShellPreferences, PREFERENCE_HOUSE_DEFAULTS, preferenceActionKey } from './chunk-HZIP4EJI.js';
+export { Button, ButtonSizeContext, ControlSizeContext, PreferencesContext, Spinner, preferenceActionKey, usePreferences } from './chunk-HZIP4EJI.js';
+import { Skeleton, TITLE_TEXT, formatLocale } from './chunk-X2HEV7FB.js';
+export { Skeleton } from './chunk-X2HEV7FB.js';
 import { useScrollEdges, EDGE_FADE } from './chunk-3BRQRKDO.js';
-import { Link } from './chunk-SVP2IG4S.js';
-export { CodeBlock, Divider, Link } from './chunk-SVP2IG4S.js';
-import { useFillHeight, FillContext } from './chunk-2YSEME33.js';
-import { Badge } from './chunk-SBTBMAIU.js';
-export { Badge } from './chunk-SBTBMAIU.js';
-import { inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, CardValue } from './chunk-IVCVNAXG.js';
-import { useWholeListCheck, pagerPart, Pagination, Input, CHECK_FILL, Dropdown, FilterRowContext, SWITCH_KNOB_ON, SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION, SWITCH_TRACK_ON, SWITCH_TRACK_OFF, useFieldControl, useField, warnOnce, Label, InlineFieldError, AddAnotherRowCtx, Field } from './chunk-6XAU44U4.js';
-export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-6XAU44U4.js';
-import { Button, ControlSizeContext, triggerType, Spinner, useShellPreferences, preferenceActionKey } from './chunk-7TOJ4G7S.js';
-export { Button, ButtonSizeContext, ControlSizeContext, PreferencesContext, Spinner, preferenceActionKey, usePreferences } from './chunk-7TOJ4G7S.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-CRQ6KCRD.js';
 import { FormChangeCtx, useReportedChange, useOptionalFormContext, FormCtx } from './chunk-XVB55M3N.js';
 export { useFormContext } from './chunk-XVB55M3N.js';
-import { CardSurfaceCtx, useScrollsInside, SplitPaneCtx, PageActionsCtx, SurfaceBoundary, useFramesItself, TableCardCtx } from './chunk-2PWGJ4PK.js';
+import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-RWKCAKN3.js';
+export { Avatar } from './chunk-RWKCAKN3.js';
+import { Link } from './chunk-QGSCF7PN.js';
+export { CodeBlock, Divider, Link } from './chunk-QGSCF7PN.js';
+import { useFillHeight, FillContext } from './chunk-2YSEME33.js';
+import { CardSurfaceCtx, useScrollsInside, SplitPaneCtx, RowsCtx, PageActionsCtx, SurfaceBoundary, useFramesItself, TableCardCtx } from './chunk-QM4SJKWV.js';
 import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, rovingTabStop, useGridKeyboard, focusAfterRemoval, useNonModalDialog, useReturnFocus, useCloseOnFocusOut } from './chunk-JXANCXK6.js';
 export { useGridKeyboard } from './chunk-JXANCXK6.js';
-import { useTextOverflow, Tooltip, usePosition } from './chunk-CXMV7SXJ.js';
-export { Tooltip, useTextOverflow } from './chunk-CXMV7SXJ.js';
+import { Badge } from './chunk-FHMCAOAH.js';
+export { Badge } from './chunk-FHMCAOAH.js';
+import { useTextOverflow, Tooltip } from './chunk-MD2EFMES.js';
+export { Tooltip, useTextOverflow } from './chunk-MD2EFMES.js';
 import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
+import { Icon, slotIcon, warnOnce } from './chunk-HYMXAIXN.js';
+import { usePosition } from './chunk-HP7WUZPK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
-import { Icon } from './chunk-4LDYR7QP.js';
 import { cn, GLASS_SURFACE, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ACTIVE_RING, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, FOCUS_WITHIN_RING } from './chunk-M2QRNBDQ.js';
 import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, isValidElement, useId, memo, useEffect, useImperativeHandle, Children, Fragment as Fragment$1, cloneElement, useSyncExternalStore } from 'react';
 import { createPortal, flushSync } from 'react-dom';
@@ -227,7 +230,7 @@ var TEXT_SIZE = {
   md: "text-sm",
   lg: "text-base"
 };
-function Combobox({ value, onChange: onChangeProp, options, placeholder = "Search\u2026", disabled, loading = false, className, ref, container, error = false, size: sizeProp, ...wiring }) {
+function Combobox({ value, onChange: onChangeProp, options, placeholder = "Search\u2026", disabled, loading = false, className, ref, container, error = false, size: sizeProp, "aria-label": ariaLabel, ...wiring }) {
   const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const control = useFieldControl({ ...wiring, error: error || void 0 });
@@ -244,8 +247,9 @@ function Combobox({ value, onChange: onChangeProp, options, placeholder = "Searc
   const listboxId = useId();
   const pos = usePosition(triggerRef, listRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const filtered = options.filter(
-    (o) => !o.disabled && o.label.toLowerCase().includes(query.toLowerCase())
+    (o) => !o.disabled && foldForSearch(o.label).includes(foldForSearch(query))
   );
+  useActiveOptionInView(listRef, open && filtered[highlightIdx] ? `${listboxId}-opt-${highlightIdx}` : void 0);
   const selectedLabel = options.find((o) => o.value === value)?.label ?? "";
   const { ref: overflowRef, isTruncated: labelTruncated } = useTextOverflow({ lines: 1, content: selectedLabel, disabled: open });
   const [prevQuery, setPrevQuery] = useState(query);
@@ -359,6 +363,7 @@ function Combobox({ value, onChange: onChangeProp, options, placeholder = "Searc
               id: control.id,
               role: "combobox",
               "aria-labelledby": wiring["aria-labelledby"],
+              "aria-label": control.labelId ? void 0 : ariaLabel,
               "aria-describedby": control.describedBy,
               "aria-invalid": control.invalid || void 0,
               "aria-required": control.required || void 0,
@@ -454,6 +459,165 @@ function Combobox({ value, onChange: onChangeProp, options, placeholder = "Searc
   ] });
   return /* @__PURE__ */ jsx(Tooltip, { content: selectedLabel, disabled: !labelTruncated || open, children: triggerContent });
 }
+function canonicalTimeZone(zone) {
+  try {
+    return new Intl.DateTimeFormat("en-US", { timeZone: zone }).resolvedOptions().timeZone;
+  } catch {
+    return zone;
+  }
+}
+function browserTimeZone() {
+  try {
+    return canonicalTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC");
+  } catch {
+    return "UTC";
+  }
+}
+function timeZoneOffset(zone, at = /* @__PURE__ */ new Date()) {
+  try {
+    return new Intl.DateTimeFormat(formatLocale(), { timeZone: zone, timeZoneName: "shortOffset" }).formatToParts(at).find((p) => p.type === "timeZoneName")?.value ?? "";
+  } catch {
+    return "";
+  }
+}
+function timeZones() {
+  const listed = typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : [];
+  const zones = [...new Set(listed.map(canonicalTimeZone))].filter((z) => z !== "UTC").sort((a, b) => a.localeCompare(b));
+  return ["UTC", ...zones];
+}
+var labelOf = (zone, at) => {
+  const offset = timeZoneOffset(zone, at);
+  return offset ? `${zone.replace(/_/g, " ")} (${offset})` : zone.replace(/_/g, " ");
+};
+var HOUR = 36e5;
+var zoneList = null;
+function zoneOptions() {
+  const now = Date.now();
+  if (!zoneList || now - zoneList.at > HOUR) {
+    const at = new Date(now);
+    zoneList = { at: now, options: timeZones().map((zone) => ({ value: zone, label: labelOf(zone, at) })) };
+  }
+  return zoneList.options;
+}
+function TimezoneSelect({ value, onChange, placeholder = "Search time zones\u2026", ...rest }) {
+  const zones = zoneOptions();
+  const stored = value ? canonicalTimeZone(value) : "";
+  const options = useMemo(() => {
+    if (!stored) {
+      const mine = browserTimeZone();
+      const label = zones.find((o) => o.value === mine)?.label ?? labelOf(mine, /* @__PURE__ */ new Date());
+      return [{ value: mine, label: `${label} \xB7 your time zone` }, ...zones.filter((o) => o.value !== mine)];
+    }
+    return zones.some((o) => o.value === stored) ? zones : [{ value: stored, label: labelOf(stored, /* @__PURE__ */ new Date()) }, ...zones];
+  }, [zones, stored]);
+  return /* @__PURE__ */ jsx(Combobox, { value: stored, onChange, options, placeholder, ...rest });
+}
+var MINUTE = 6e4;
+var HOUR2 = 60 * MINUTE;
+var DAY = 24 * HOUR2;
+var LONGEST_WAIT = DAY;
+var CONTROL_ANCESTOR = 'a[href], button, summary, label, [role="button"], [role="link"], [role="option"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="treeitem"], [role="row"], [role="gridcell"], [role="checkbox"], [role="radio"], [role="switch"]';
+var noChange = () => () => {
+};
+var inBrowser = () => true;
+var onServer = () => false;
+function toMillis(time) {
+  if (time instanceof Date) return time.getTime();
+  if (typeof time === "number") return time;
+  if (typeof time !== "string") return NaN;
+  const day = /^(\d{4})-(\d{2})-(\d{2})$/.exec(time.trim());
+  if (day) return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3])).getTime();
+  return Date.parse(time);
+}
+function thresholdOf(hours, from) {
+  if (typeof hours === "number" && Number.isFinite(hours) && hours >= 0) return hours;
+  const house = PREFERENCE_HOUSE_DEFAULTS.relativeThresholdHours;
+  warnOnce(from, `a threshold of ${String(hours)} isn't a number of hours, so the house's ${house} is used.`);
+  return house;
+}
+function midnight(t) {
+  const d = new Date(t);
+  d.setHours(0, 0, 0, 0);
+  return d.getTime();
+}
+function formatRelativeTime(time, options) {
+  const at = toMillis(time);
+  if (!Number.isFinite(at)) return "";
+  const now = options.now ?? Date.now();
+  const diff = at - now;
+  const age = Math.abs(diff);
+  if (age > thresholdOf(options.thresholdHours, "formatRelativeTime") * HOUR2) return new Intl.DateTimeFormat(formatLocale(), { dateStyle: "medium", timeStyle: "short" }).format(at);
+  const rtf = new Intl.RelativeTimeFormat(formatLocale(), { numeric: "auto" });
+  if (age < MINUTE) return rtf.format(0, "second");
+  if (age < HOUR2) return rtf.format(Math.trunc(diff / MINUTE), "minute");
+  if (age < DAY) return rtf.format(Math.trunc(diff / HOUR2), "hour");
+  return rtf.format(Math.round((midnight(at) - midnight(now)) / DAY), "day");
+}
+function useRelativeTimeFormat() {
+  const thresholdHours = useShellPreferences().relativeThresholdHours ?? PREFERENCE_HOUSE_DEFAULTS.relativeThresholdHours;
+  return (time) => formatRelativeTime(time, { thresholdHours });
+}
+function formatFullTime(time) {
+  const at = toMillis(time);
+  return Number.isFinite(at) ? new Intl.DateTimeFormat(formatLocale(), { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "2-digit", timeZoneName: "short" }).format(at) : "";
+}
+function nextChange(at, now, threshold) {
+  const diff = at - now;
+  const age = Math.abs(diff);
+  let wait;
+  if (age > threshold) {
+    if (diff <= 0) return null;
+    wait = age - threshold + 1;
+  } else {
+    const step = age < HOUR2 ? MINUTE : HOUR2;
+    const untilStep = diff > 0 ? age % step + 1 : step - age % step;
+    wait = diff > 0 ? untilStep : Math.min(untilStep, threshold - age + 1);
+  }
+  return Number.isFinite(wait) ? Math.min(Math.max(1e3, wait), LONGEST_WAIT) : null;
+}
+function RelativeTime({ time, thresholdHours, className }) {
+  const shellThreshold = useShellPreferences().relativeThresholdHours;
+  const hours = thresholdOf(thresholdHours ?? shellThreshold ?? PREFERENCE_HOUSE_DEFAULTS.relativeThresholdHours, "RelativeTime");
+  const at = toMillis(time);
+  if (!Number.isFinite(at)) {
+    warnOnce("RelativeTime", `${JSON.stringify(time) ?? String(time)} isn't a time (an ISO string, a Date or milliseconds), so nothing is drawn.`);
+    return null;
+  }
+  return /* @__PURE__ */ jsx(RelativeTimeAt, { at, hours, className }, `${at}:${hours}`);
+}
+function RelativeTimeAt({ at, hours, className }) {
+  const inRows = useContext(RowsCtx);
+  const [now, setNow] = useState(() => Date.now());
+  const [inControl, setInControl] = useState(false);
+  const placed = useCallback((el) => {
+    const inside = !!el?.parentElement?.closest(CONTROL_ANCESTOR);
+    if (inside) el.removeAttribute("tabindex");
+    if (el) setInControl(inside);
+  }, []);
+  const mounted = useSyncExternalStore(noChange, inBrowser, onServer);
+  useEffect(() => {
+    const wait = nextChange(at, now, hours * HOUR2);
+    if (wait === null) return;
+    const timer = setTimeout(() => setNow(Date.now()), wait);
+    return () => clearTimeout(timer);
+  }, [at, now, hours]);
+  const full = formatFullTime(at);
+  return /* @__PURE__ */ jsx(Tooltip, { content: full, ref: placed, children: /* @__PURE__ */ jsxs(
+    "time",
+    {
+      tabIndex: inRows || inControl ? void 0 : 0,
+      dateTime: new Date(at).toISOString(),
+      "data-relative-time": "",
+      suppressHydrationWarning: true,
+      className: cn("rounded-[var(--ds-radius-sm)] focus-visible:outline-2 focus-visible:outline-[var(--ds-accent-primary)] focus-visible:outline-offset-2", className),
+      children: [
+        formatRelativeTime(at, { thresholdHours: hours, now }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", suppressHydrationWarning: true, children: `, ${full}` })
+      ]
+    },
+    mounted ? "browser" : "first"
+  ) });
+}
 var CHECKBOX_SIZES = {
   sm: { box: "h-[16px] w-[16px]", glyph: 10, label: "text-xs" },
   md: { box: "h-[18px] w-[18px]", glyph: 12, label: "text-sm" }
@@ -753,7 +917,7 @@ function formatDate(d) {
 }
 function localeDayFirst() {
   try {
-    const parts = new Intl.DateTimeFormat(void 0).formatToParts(new Date(2e3, 11, 25));
+    const parts = new Intl.DateTimeFormat(formatLocale()).formatToParts(new Date(2e3, 11, 25));
     return parts.findIndex((p) => p.type === "day") < parts.findIndex((p) => p.type === "month");
   } catch {
     return true;
@@ -3515,7 +3679,7 @@ var Alert = forwardRef(function Alert2({
                     isAccent ? cn("border-[length:var(--ds-border-width)] border-current", actionColorsByVariant[variant]) : cn("border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]", "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]")
                   ),
                   children: [
-                    a.iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex mr-ds-1", children: a.iconLeft }),
+                    a.iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex mr-ds-1", children: slotIcon(a.iconLeft, 14, "an Alert action's iconLeft") }),
                     a.label
                   ]
                 },
@@ -4065,102 +4229,6 @@ function PanelCheckbox({ checked, indeterminate, onClick, label }) {
     }
   );
 }
-
-// ../../showcase/src/lib/initials.ts
-function initialsOf(name) {
-  return name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((word) => Array.from(word)[0] ?? "").join("").toUpperCase();
-}
-function toInitials(value) {
-  const s = value.trim();
-  if (!s) return "";
-  if (!/\s/.test(s) && Array.from(s).length <= 3) return s;
-  return initialsOf(s);
-}
-var sizeStyles2 = {
-  sm: "h-8 w-8 text-xs",
-  md: "h-10 w-10 text-sm",
-  lg: "h-12 w-12 text-base"
-};
-var paletteStyles = {
-  1: "bg-[var(--ds-palette-1-bg,var(--ds-bg-muted))] text-[var(--ds-palette-1-text,var(--ds-text-secondary))]",
-  2: "bg-[var(--ds-palette-2-bg,var(--ds-bg-muted))] text-[var(--ds-palette-2-text,var(--ds-text-secondary))]",
-  3: "bg-[var(--ds-palette-3-bg,var(--ds-bg-muted))] text-[var(--ds-palette-3-text,var(--ds-text-secondary))]",
-  4: "bg-[var(--ds-palette-4-bg,var(--ds-bg-muted))] text-[var(--ds-palette-4-text,var(--ds-text-secondary))]",
-  5: "bg-[var(--ds-palette-5-bg,var(--ds-bg-muted))] text-[var(--ds-palette-5-text,var(--ds-text-secondary))]"
-};
-function paletteFor(seed) {
-  let h = 0;
-  for (const ch of seed) h = h * 31 + ch.charCodeAt(0) >>> 0;
-  return h % 5 + 1;
-}
-function colorStyles(color, seed) {
-  if (color === "accent") return "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]";
-  if (color === "neutral") return "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]";
-  return paletteStyles[color === "auto" ? paletteFor(seed) : color];
-}
-function PresenceMark({ status }) {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 10 10", width: "10", height: "10", "aria-hidden": "true", focusable: "false", "data-presence": status, className: "block", children: [
-    status === "online" && /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "5", className: "fill-[var(--ds-status-success)]" }),
-    status === "away" && /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "4", fill: "none", strokeWidth: "2", className: "stroke-[var(--ds-status-warning)]" }),
-    status === "busy" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "5", className: "fill-[var(--ds-status-error)]" }),
-      /* @__PURE__ */ jsx("rect", { x: "2.5", y: "4.1", width: "5", height: "1.8", rx: "0.9", className: "fill-[var(--ds-bg-canvas)]" })
-    ] }),
-    status === "offline" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "4", fill: "none", strokeWidth: "2", className: "stroke-[var(--ds-text-muted)]" }),
-      /* @__PURE__ */ jsx("line", { x1: "3.1", y1: "6.9", x2: "6.9", y2: "3.1", strokeWidth: "1.5", strokeLinecap: "round", className: "stroke-[var(--ds-text-muted)]" })
-    ] })
-  ] });
-}
-function Avatar({ initials, src, alt, size = "md", status, color = "auto", className }) {
-  const who = alt ?? initials ?? "";
-  const named = status ? [who, status].filter(Boolean).join(", ") : void 0;
-  const base = cn(
-    "inline-flex items-center justify-center font-medium shrink-0",
-    "rounded-[var(--ds-radius-full)]",
-    sizeStyles2[size],
-    className
-  );
-  const avatarElement = src ? /* @__PURE__ */ jsx(
-    "img",
-    {
-      "data-avatar": "",
-      src,
-      alt: named ?? alt ?? initials ?? "",
-      className: cn(base, "object-cover")
-    }
-  ) : /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-avatar": "",
-      role: named ? "img" : void 0,
-      "aria-label": named,
-      className: cn(
-        base,
-        colorStyles(color, alt ?? initials ?? ""),
-        "border-[length:var(--ds-border-width)] border-transparent"
-      ),
-      children: initials != null ? toInitials(initials) : null
-    }
-  );
-  if (!status) return avatarElement;
-  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
-    avatarElement,
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          "absolute",
-          size === "sm" && "bottom-[-4px] right-[-4px]",
-          size === "md" && "bottom-[-2px] right-[-2px]",
-          size === "lg" && "bottom-[0px] right-[0px]"
-        ),
-        "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx("span", { className: "block rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-canvas)] shadow-[0_0_0_2px_var(--ds-bg-canvas)]", children: /* @__PURE__ */ jsx(PresenceMark, { status }) })
-      }
-    )
-  ] });
-}
 function MentionInput({
   value: controlledValue,
   onChange: onChangeProp,
@@ -4168,8 +4236,12 @@ function MentionInput({
   trigger = "@",
   placeholder,
   disabled,
-  className
+  className,
+  error = false,
+  "aria-label": ariaLabel,
+  ...wiring
 }) {
+  const control = useFieldControl({ ...wiring, error: error || void 0 });
   const [internalValue, setInternalValue] = useState("");
   const value = controlledValue ?? internalValue;
   const onChange = useReportedChange(onChangeProp, value);
@@ -4177,14 +4249,14 @@ function MentionInput({
   const [showPopup, setShowPopup] = useState(false);
   const [activeIndex, setActiveIndex] = useState(0);
   const [triggerStart, setTriggerStart] = useState(-1);
-  const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
+  const [anchor, setAnchor] = useState(null);
   const inputRef = useRef(null);
   const popupRef = useRef(null);
   const mirrorRef = useRef(null);
-  const filtered = suggestions.filter(
-    (s) => s.label.toLowerCase().includes(query.toLowerCase()) || s.description?.toLowerCase().includes(query.toLowerCase())
-  );
-  useOverlayLayer(showPopup && filtered.length > 0);
+  const listId = useId();
+  const { items: filtered, more } = shownMentions(matchMentions(suggestions, query));
+  const listShown = showPopup && filtered.length > 0;
+  useOverlayLayer(listShown);
   const updateValue = useCallback(
     (v) => {
       if (controlledValue === void 0) setInternalValue(v);
@@ -4227,13 +4299,15 @@ function MentionInput({
     const span = document.createElement("span");
     span.textContent = trigger;
     mirror.appendChild(span);
-    const rect = el.getBoundingClientRect();
     const spanRect = span.getBoundingClientRect();
     const mirrorRect = mirror.getBoundingClientRect();
-    setPopupPos({
-      top: rect.top + (spanRect.top - mirrorRect.top) + span.offsetHeight + 4,
-      left: rect.left + (spanRect.left - mirrorRect.left)
-    });
+    setAnchor({ x: spanRect.left - mirrorRect.left, y: spanRect.top - mirrorRect.top, width: spanRect.width, height: span.offsetHeight });
+  };
+  const anchorRect = () => {
+    const el = inputRef.current;
+    if (!el || !anchor) return null;
+    const field = el.getBoundingClientRect();
+    return new DOMRect(field.left + anchor.x, field.top + anchor.y - el.scrollTop, anchor.width, anchor.height);
   };
   const insertMention = (suggestion) => {
     const el = inputRef.current;
@@ -4252,13 +4326,15 @@ function MentionInput({
     });
   };
   const handleKeyDown = (e) => {
-    if (!showPopup || filtered.length === 0) return;
+    if (!listShown) return;
     if (e.key === "ArrowDown") {
       e.preventDefault();
       setActiveIndex((i) => (i + 1) % filtered.length);
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       setActiveIndex((i) => (i - 1 + filtered.length) % filtered.length);
+    } else if (e.key === "Tab" && e.shiftKey) {
+      flushSync(() => setShowPopup(false));
     } else if (e.key === "Enter" || e.key === "Tab") {
       e.preventDefault();
       insertMention(filtered[activeIndex]);
@@ -4282,21 +4358,30 @@ function MentionInput({
       "textarea",
       {
         ref: inputRef,
+        id: control.id,
+        "aria-labelledby": wiring["aria-labelledby"],
+        "aria-label": control.labelId ? void 0 : ariaLabel,
+        "aria-describedby": control.describedBy,
+        "aria-invalid": control.invalid || void 0,
+        "aria-required": control.required || void 0,
         value,
         onChange: handleInput,
         onKeyDown: handleKeyDown,
+        "aria-autocomplete": "list",
+        "aria-controls": listShown ? listId : void 0,
+        "aria-activedescendant": listShown ? mentionOptionId(listId, activeIndex) : void 0,
         placeholder,
         disabled,
         rows: 3,
         className: cn(
           "flex w-full px-ds-3 py-ds-2 text-sm resize-none",
           "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
-          "border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
+          "border-[length:var(--ds-border-width)]",
+          control.invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)] hover:border-[var(--ds-input-border-hover)]",
           "rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "placeholder:text-[var(--ds-text-muted)]",
-          "hover:border-[var(--ds-input-border-hover)]",
-          FOCUS_RING,
+          control.invalid ? ERROR_FOCUS_RING : FOCUS_RING,
           "disabled:cursor-not-allowed disabled:opacity-disabled disabled:hover:border-[var(--ds-input-border)]",
           "transition-colors duration-[var(--ds-transition-speed)]"
         )
@@ -4310,59 +4395,19 @@ function MentionInput({
         className: "fixed top-0 left-0 -z-50 opacity-0 pointer-events-none"
       }
     ),
-    showPopup && filtered.length > 0 && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: popupRef,
-          role: "listbox",
-          className: cn(
-            "fixed z-[var(--ds-z-popover)] min-w-[200px] max-h-[200px] overflow-y-auto",
-            "bg-[var(--ds-bg-surface-elevated)]",
-            "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-            "rounded-[var(--ds-radius-md)] shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
-            "py-ds-1"
-          ),
-          style: { top: popupPos.top, left: popupPos.left },
-          children: filtered.map((s, i) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              "aria-selected": i === activeIndex,
-              className: cn(
-                "flex items-center gap-ds-2.5 w-full px-ds-3 py-ds-1.5 text-left text-sm cursor-pointer",
-                "transition-colors duration-[var(--ds-transition-speed)]",
-                i === activeIndex ? "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] hover:text-[var(--ds-text-primary)]"
-              ),
-              onMouseDown: (e) => {
-                e.preventDefault();
-                insertMention(s);
-              },
-              onMouseEnter: () => setActiveIndex(i),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Avatar,
-                  {
-                    src: s.avatar,
-                    initials: s.label.charAt(0).toUpperCase(),
-                    alt: s.label,
-                    size: "sm",
-                    className: "!h-6 !w-6 !text-2xs"
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx("div", { className: "font-medium text-[var(--ds-text-primary)] truncate", children: s.label }),
-                  s.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--ds-text-muted)] truncate", children: s.description })
-                ] })
-              ]
-            },
-            s.id
-          ))
-        }
-      ),
-      document.body
+    listShown && /* @__PURE__ */ jsx(
+      MentionList,
+      {
+        id: listId,
+        label: "Suggestions",
+        items: filtered,
+        more,
+        activeIndex,
+        onActiveIndexChange: setActiveIndex,
+        onPick: insertMention,
+        anchorRect,
+        listRef: popupRef
+      }
     )
   ] });
 }
@@ -5025,7 +5070,7 @@ function CardGrid({ minWidth, maxColumns = 4, compare = false, gap = "var(--ds-s
     }
   );
 }
-var sizeStyles3 = {
+var sizeStyles2 = {
   sm: { gap: "gap-ds-0.5", label: "text-[length:var(--ds-font-size-xs)]", value: "text-[length:var(--ds-font-size-xs)]", iconSize: 12, py: "py-ds-1.5" },
   md: { gap: "gap-ds-1", label: "text-[length:var(--ds-font-size-sm)]", value: "text-[length:var(--ds-font-size-sm)]", iconSize: 14, py: "py-ds-2.5" },
   lg: { gap: "gap-ds-1.5", label: "text-[length:var(--ds-font-size-base)]", value: "text-[length:var(--ds-font-size-base)]", iconSize: 16, py: "py-ds-3" }
@@ -5071,7 +5116,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
   stackBelow: stackBelowProp,
   className
 }, ref) {
-  const s = sizeStyles3[size];
+  const s = sizeStyles2[size];
   const stackBelow = stackBelowProp ?? (columns > 1 ? "sm" : void 0);
   const templateClass = (layout) => columns > 1 && stackBelow !== "none" ? autoColumnClasses[layout][columns] : columnClasses[columns];
   if (orientation === "vertical") {
@@ -5367,17 +5412,31 @@ function clickIsRows(e) {
   const control = target.closest(ROW_CONTROL);
   return !control || control === e.currentTarget || !e.currentTarget.contains(control);
 }
+var ISO_MOMENT = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?$/;
 function sortableValue(v) {
   if (v === null || v === void 0 || v === "") return void 0;
   if (v instanceof Date) return v.getTime();
+  if (typeof v === "string" && ISO_MOMENT.test(v)) {
+    const at = Date.parse(v);
+    if (Number.isFinite(at)) return at;
+  }
   if (typeof v === "string" || typeof v === "number") return v;
   if (typeof v === "boolean") return v ? 1 : 0;
   return isValidElement(v) || typeof v === "object" ? null : String(v);
 }
-var COLLATOR = new Intl.Collator(void 0, { numeric: true });
+var COLLATORS = /* @__PURE__ */ new Map();
+function collator() {
+  const locale = formatLocale() ?? "";
+  let c = COLLATORS.get(locale);
+  if (!c) {
+    c = new Intl.Collator(locale || void 0, { numeric: true });
+    COLLATORS.set(locale, c);
+  }
+  return c;
+}
 function compareValues(a, b) {
   if (typeof a === "number" && typeof b === "number") return a - b;
-  return COLLATOR.compare(String(a), String(b));
+  return collator().compare(String(a), String(b));
 }
 var UNIT_SCALE = {
   "": 1,
@@ -5782,7 +5841,7 @@ function Table({
       if (title) return titledCards(/* @__PURE__ */ jsx("div", { className: "py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", children: emptyState }));
       return /* @__PURE__ */ jsx("div", { ref: setRoot, "data-ds-list": "", "data-gs": "table", className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
     }
-    const cards = /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsxs("div", { ref: title ? void 0 : listRoot, "data-ds-list": title ? void 0 : "", "data-gs": title ? void 0 : "table", className: cn("flex flex-col gap-ds-3 overflow-y-auto", title ? "min-h-0" : listClass), onFocus: title ? void 0 : noteFocus, onBlur: title ? void 0 : forgetFocus, children: [
+    const cards = /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: /* @__PURE__ */ jsxs("div", { ref: title ? void 0 : listRoot, "data-ds-list": title ? void 0 : "", "data-gs": title ? void 0 : "table", className: cn("flex flex-col gap-ds-3 overflow-y-auto", title ? "min-h-0" : listClass), onFocus: title ? void 0 : noteFocus, onBlur: title ? void 0 : forgetFocus, children: [
       selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select`, children: "Select" }),
       drawn.map(({ row, originalIdx }) => {
         const isSelected = selectedSet.has(originalIdx);
@@ -5865,7 +5924,7 @@ function Table({
           String(id)
         );
       })
-    ] }) });
+    ] }) }) });
     return withControl(title ? titledCards(cards) : cards);
   }
   const cellCount = columns.length + lead;
@@ -5934,7 +5993,7 @@ function Table({
         );
       })
     ] }) }),
-    /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
       "td",
       {
         colSpan: cellCount,
@@ -6063,7 +6122,7 @@ function Table({
           }
         ) })
       ] }, String(id));
-    }) })
+    }) }) })
   ] });
   const region = scrollable || regionFocused ? { tabIndex: 0, role: "region", ...title ? { "aria-labelledby": titleId } : { "aria-label": ariaLabel ?? "Table" } } : {};
   return withControl(
@@ -6095,7 +6154,7 @@ function Table({
               },
               ...fade,
               ...region,
-              className: cn("min-h-0 overflow-x-auto focus-visible:outline-none", title ? "rounded-b-[inherit]" : "rounded-[inherit]"),
+              className: cn("relative min-h-0 overflow-x-auto focus-visible:outline-none", title ? "rounded-b-[inherit]" : "rounded-[inherit]"),
               children: table
             }
           )
@@ -6530,7 +6589,7 @@ function OverflowPopover({
         {
           ref: floatingRef,
           role: "dialog",
-          "aria-label": date.toLocaleDateString(void 0, { weekday: "long", month: "long", day: "numeric" }),
+          "aria-label": date.toLocaleDateString(formatLocale(), { weekday: "long", month: "long", day: "numeric" }),
           className: cn(
             "fixed z-[var(--ds-z-popover)] w-56 max-h-48 overflow-y-auto",
             "bg-[var(--ds-bg-surface-elevated)]",
@@ -6544,7 +6603,7 @@ function OverflowPopover({
           onClick: (e) => e.stopPropagation(),
           onMouseDown: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-1", children: date.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-1", children: date.toLocaleDateString(formatLocale(), { weekday: "short", month: "short", day: "numeric" }) }),
             events.map((event) => /* @__PURE__ */ jsx(
               EventBar,
               {
@@ -6810,7 +6869,7 @@ function WeekView({
                 ),
                 onClick: () => onDayClick?.(day),
                 children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--ds-text-muted)] font-medium", children: day.toLocaleDateString(void 0, { weekday: "short" }) }),
+                  /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--ds-text-muted)] font-medium", children: day.toLocaleDateString(formatLocale(), { weekday: "short" }) }),
                   /* @__PURE__ */ jsx(
                     "div",
                     {
@@ -7003,7 +7062,7 @@ function DayCellWithPopover({
               style: { top: pos.top, left: pos.left },
               role: "tooltip",
               children: [
-                /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-0.5", children: day.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" }) }),
+                /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-0.5", children: day.toLocaleDateString(formatLocale(), { weekday: "short", month: "short", day: "numeric" }) }),
                 dayEvents.map((event) => /* @__PURE__ */ jsx(
                   EventBar,
                   {
@@ -7242,7 +7301,7 @@ function CompactDayCell({
           style: { top: pos.top, left: pos.left },
           role: "tooltip",
           children: [
-            /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-0.5", children: day.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-0.5", children: day.toLocaleDateString(formatLocale(), { weekday: "short", month: "short", day: "numeric" }) }),
             dayEvents.map((event) => /* @__PURE__ */ jsx(
               EventBar,
               {
@@ -7930,7 +7989,7 @@ var defaultIcons = {
 };
 var FRAME_ICON_SIZE = 28;
 function renderIcon(icon) {
-  if (typeof icon === "string") return /* @__PURE__ */ jsx(Icon, { name: icon, size: FRAME_ICON_SIZE, className: "text-[var(--ds-text-muted)]" });
+  if (typeof icon === "string") return /* @__PURE__ */ jsx(Icon, { name: icon, size: FRAME_ICON_SIZE, className: "text-[var(--ds-text-muted)]", from: "EmptyState's icon" });
   if (isValidElement(icon) && icon.type === Icon) return cloneElement(icon, { size: FRAME_ICON_SIZE });
   return icon;
 }
@@ -8109,7 +8168,7 @@ function TableToolbar({
 var ICON_TEXT_OFFSET = "calc((2rem - 1.25rem) / 2)";
 function Marker({ item, vertical }) {
   if (item.icon) {
-    return /* @__PURE__ */ jsx("div", { "data-timeline-icon": "", className: "shrink-0 w-8 h-8 flex items-center justify-center *:max-w-8 *:max-h-8", children: item.icon });
+    return /* @__PURE__ */ jsx("div", { "data-timeline-icon": "", className: "shrink-0 w-8 h-8 flex items-center justify-center *:max-w-8 *:max-h-8", children: slotIcon(item.icon, 16, "a Timeline item's icon") });
   }
   return /* @__PURE__ */ jsx(
     "div",
@@ -8156,7 +8215,7 @@ function ExpandableDescription({ children, className }) {
   );
 }
 function HorizontalLayout({ items, minItemWidth, className }) {
-  return /* @__PURE__ */ jsx("div", { "data-timeline-row": "", className: cn("flex items-start overflow-x-auto snap-x", className), children: items.map((item, i) => {
+  return /* @__PURE__ */ jsx("div", { "data-timeline-row": "", className: cn("relative flex items-start overflow-x-auto snap-x", className), children: items.map((item, i) => {
     const isFirst = i === 0;
     const isLast = i === items.length - 1;
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 shrink-0 flex-col items-center snap-start", style: { minWidth: minItemWidth }, children: [
@@ -8189,8 +8248,8 @@ function HorizontalLayout({ items, minItemWidth, className }) {
     ] }, i);
   }) });
 }
-var EXACT = new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" });
-var EXACT_DAY = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
+var EXACT = { format: (d) => new Intl.DateTimeFormat(formatLocale(), { dateStyle: "medium", timeStyle: "short" }).format(d) };
+var EXACT_DAY = { format: (d) => new Intl.DateTimeFormat(formatLocale(), { dateStyle: "medium" }).format(d) };
 var DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
 function exactTime(value) {
   if (typeof value === "string") {
@@ -8205,6 +8264,9 @@ function exactTime(value) {
   return Number.isNaN(date.getTime()) ? null : { iso: date.toISOString(), text: EXACT.format(date) };
 }
 function ItemTime({ item }) {
+  if (item.time !== void 0) {
+    return /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-0.5 tabular-nums", children: /* @__PURE__ */ jsx(RelativeTime, { time: item.time }) });
+  }
   const exact = item.dateTime ? exactTime(item.dateTime) : null;
   if (!item.timestamp && !exact) return null;
   return /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-0.5 tabular-nums", children: exact ? /* @__PURE__ */ jsxs("time", { dateTime: exact.iso, title: exact.text, children: [
@@ -8242,7 +8304,7 @@ function Timeline({ items: allItems, orientation = "vertical", minItemWidth = 20
   }, [ref]);
   const fits = width === 0 || width >= items.length * minItemWidth;
   const horizontal = orientation === "horizontal" || orientation === "responsive" && fits;
-  const list = /* @__PURE__ */ jsx("div", { ref: setRefs, "data-ds-list": "", "data-timeline-orientation": horizontal ? "horizontal" : "vertical", className: pager ? void 0 : className, children: horizontal ? /* @__PURE__ */ jsx(HorizontalLayout, { items, minItemWidth }) : /* @__PURE__ */ jsx(VerticalLayout, { items }) });
+  const list = /* @__PURE__ */ jsx("div", { ref: setRefs, "data-ds-list": "", "data-timeline-orientation": horizontal ? "horizontal" : "vertical", className: pager ? void 0 : className, children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: horizontal ? /* @__PURE__ */ jsx(HorizontalLayout, { items, minItemWidth }) : /* @__PURE__ */ jsx(VerticalLayout, { items }) }) });
   if (!pager) return list;
   return /* @__PURE__ */ jsxs("div", { "data-gs-paged": "", className: cn("flex flex-col min-w-0", className), children: [
     list,
@@ -8811,7 +8873,7 @@ function Carousel({
   );
 }
 function formatTime2(d) {
-  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  return d.toLocaleTimeString(formatLocale(), { hour: "2-digit", minute: "2-digit" });
 }
 function isSameMinute(a, b) {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate() && a.getHours() === b.getHours() && a.getMinutes() === b.getMinutes();
@@ -9602,7 +9664,7 @@ var StackedList = forwardRef(function StackedList2({
         !pager && className
       ),
       role: "list",
-      children: shown.map((item) => {
+      children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: shown.map((item) => {
         const isSelected = item.selected ?? (selectedId !== void 0 && item.id === selectedId);
         const interactive = !!item.onClick;
         const hasEmphasis = item.unread !== void 0;
@@ -9691,7 +9753,7 @@ var StackedList = forwardRef(function StackedList2({
             ]
           }
         ) }, item.id);
-      })
+      }) })
     }
   );
   if (!pager) return list;
@@ -9765,7 +9827,8 @@ function periodAfter(unit, start) {
   return utcDay(y + 1, 0, 1);
 }
 var formats = /* @__PURE__ */ new Map();
-function formatter(locale, options) {
+function formatter(given, options) {
+  const locale = given ?? formatLocale();
   const key = `${locale ?? ""}|${JSON.stringify(options)}`;
   let f = formats.get(key);
   if (!f) {
@@ -9878,10 +9941,10 @@ function extendTimeScaleTo(scale, endDay) {
 }
 var noSubscription = () => () => {
 };
-var inBrowser = () => true;
-var onServer = () => false;
+var inBrowser2 = () => true;
+var onServer2 = () => false;
 function useTimeScale({ start, end, zoom, today, weekStartsOn = 1, locale, pxPerDay, pad: pad3 = 0 }) {
-  const readable = useSyncExternalStore(noSubscription, inBrowser, onServer);
+  const readable = useSyncExternalStore(noSubscription, inBrowser2, onServer2);
   const [mounted] = useState(() => toMinute(dayOf(/* @__PURE__ */ new Date())));
   const pending = today === void 0 && !readable;
   const from = dayOf(start);
@@ -10856,7 +10919,7 @@ function Gantt({
   const byKey = useMemo(() => new Map(rows.map((r) => [r.key, r])), [rows]);
   const names = useMemo(() => {
     const byId = new Map(tasks.map((i) => [i.id, i]));
-    const list = new Intl.ListFormat(locale, { type: "conjunction" });
+    const list = new Intl.ListFormat(locale ?? formatLocale(), { type: "conjunction" });
     const out = /* @__PURE__ */ new Map();
     for (const item of tasks) {
       const dates = datesOf(item);
@@ -15986,7 +16049,7 @@ function HoverCard({
             className
           ),
           style: { top: pos.top, left: pos.left },
-          children: content
+          children: /* @__PURE__ */ jsx(RowsCtx, { value: false, children: content })
         }
       ),
       container ?? document.body
@@ -17115,6 +17178,7 @@ var SectionHeading = forwardRef(function SectionHeading2({
   title,
   onTitleChange,
   titleLabel = "Title",
+  titleId,
   description,
   actions,
   badge,
@@ -17150,7 +17214,7 @@ var SectionHeading = forwardRef(function SectionHeading2({
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
               editable ? (
                 // the field is the title: the heading holds it, so the page's headings still name the view by its title
-                /* @__PURE__ */ jsx("h2", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("h2", { id: titleId, className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
                   Input,
                   {
                     size: "md",
@@ -17160,7 +17224,7 @@ var SectionHeading = forwardRef(function SectionHeading2({
                     className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]"
                   }
                 ) })
-              ) : /* @__PURE__ */ jsx("h2", { className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", pane ? "truncate" : "min-w-0 break-words"), children: title }),
+              ) : /* @__PURE__ */ jsx("h2", { id: titleId, className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", pane ? "truncate" : "min-w-0 break-words"), children: title }),
               badge,
               count !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "neutral", size: "sm", children: count })
             ] }),
@@ -17216,6 +17280,23 @@ var ActionPanelGroup = forwardRef(function ActionPanelGroup2({
     }
   );
 });
+function DangerZone({ title = "Danger zone", description, children, className }) {
+  const titleId = useId();
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": titleId, "data-gs": "danger-zone", className, children: [
+    /* @__PURE__ */ jsx(SectionHeading, { title, titleId, description }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-danger-frame": "",
+        className: cn(
+          "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-status-error)] px-ds-5",
+          GLASS_SURFACE
+        ),
+        children: /* @__PURE__ */ jsx(ActionPanelGroup, { children })
+      }
+    )
+  ] });
+}
 var lineClampClasses = {
   1: "truncate",
   2: "line-clamp-2",
@@ -17267,6 +17348,6 @@ var TextOverflow = forwardRef(function TextOverflow2({
   return /* @__PURE__ */ jsx(Tooltip, { content: resolvedTooltipContent, children: content });
 });
 
-export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, DropdownMenu, EmptyState, EntityCell, FileUpload, FlowSaved, FormWrapper, Gantt, HoverCard, Kbd, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, PageActions, PageContainer, PageHeader, PinInput, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sheet, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, Toast, ToastProvider, Tour, TransferList, TreeView, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, readFlowProgress, timeExtent, useContentWidth, useDestructiveAction, useFittedLabels, useFlowSteps, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
+export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, AvatarGroup, BottomNav, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DangerZone, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, DropdownMenu, EmptyState, EntityCell, FileUpload, FlowSaved, FormWrapper, Gantt, HoverCard, Kbd, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, PageActions, PageContainer, PageHeader, PinInput, Progress, RadioGroup, Rating, RelativeTime, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sheet, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, TimezoneSelect, Toast, ToastProvider, Tour, TransferList, TreeView, browserTimeZone, canonicalTimeZone, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, formatFullTime, formatRelativeTime, readFlowProgress, timeExtent, timeZoneOffset, useContentWidth, useDestructiveAction, useFittedLabels, useFlowSteps, useRelativeTimeFormat, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map