gridsmith-ui 0.33.0 → 0.33.1

package/dist/index.js

@@ -1,49 +1,49 @@
 "use client";
-import { localeCache, startOfDay, addDays, useWeekStart, useDateWords, localeDayFirst, dayKey, moveDay, addMonths, DateSegmentFields, getMonthGrid, isSameMonth, isSameDay, DatePicker, timeSegments, pad2, inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, Checkbox, CardValue, SortIndicator, startOfWeek, endOfWeek, addMonthsClamped, isExcludedDay, CutCell, CutEmail, stepValue, separatorMovesOn, TIME_SEPARATORS, typeDigit, getEventsForDay, layoutWeek, isWeekend, getWeekDays, isBarEvent, layoutPieces, dayPieces, groupEventsByDay, timeToFraction } from './chunk-6NRLTG5W.js';
-export { Checkbox, CheckboxGroup, CheckboxGroupItem, DatePicker, HoverCard, TextOverflow } from './chunk-6NRLTG5W.js';
-import { useWholeListCheck, pagerPart, Pagination, NumberInput } from './chunk-AVSP6NDX.js';
-export { NumberInput, Pagination, Popover, usePagination } from './chunk-AVSP6NDX.js';
-import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useCornerInset, NAVBAR_INSET_PRIORITY, useScrollbarInset, useBulkBarHost, DrawerFooterCtx, BulkBarHostCtx, AsideSlotContext, BulkBarSpacer, bulkBarRoom, insetLessScrollbar, BULK_BAR_LAYER, BulkBarPresenceCtx, BULK_BAR_WINDOW_LAYER, DrawerPanel, useCloseSettle, besideRoom, PANEL_INSET_PRIORITY, Drawer, LAUNCHER_INSET_PRIORITY, TOAST_INSET_VARS, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-AB4UQ4G5.js';
-export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-AB4UQ4G5.js';
+import { localeCache, startOfDay, addDays, useWeekStart, useDateWords, localeDayFirst, dayKey, moveDay, addMonths, DateSegmentFields, getMonthGrid, isSameMonth, isSameDay, DatePicker, timeSegments, pad2, inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, Checkbox, CardValue, SortIndicator, startOfWeek, endOfWeek, addMonthsClamped, isExcludedDay, CutCell, CutEmail, stepValue, separatorMovesOn, TIME_SEPARATORS, typeDigit, getEventsForDay, layoutWeek, isWeekend, getWeekDays, isBarEvent, layoutPieces, dayPieces, groupEventsByDay, timeToFraction } from './chunk-PT4HYHI3.js';
+export { Checkbox, CheckboxGroup, CheckboxGroupItem, DatePicker, HoverCard, TextOverflow } from './chunk-PT4HYHI3.js';
+import { useWholeListCheck, pagerPart, Pagination, NumberInput } from './chunk-BL2C35BN.js';
+export { NumberInput, Pagination, Popover, usePagination } from './chunk-BL2C35BN.js';
+import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useCornerInset, NAVBAR_INSET_PRIORITY, useScrollbarInset, useBulkBarHost, DrawerFooterCtx, BulkBarHostCtx, AsideSlotContext, BulkBarSpacer, bulkBarRoom, insetLessScrollbar, BULK_BAR_LAYER, BulkBarPresenceCtx, BULK_BAR_WINDOW_LAYER, DrawerPanel, useCloseSettle, besideRoom, PANEL_INSET_PRIORITY, Drawer, LAUNCHER_INSET_PRIORITY, TOAST_INSET_VARS, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-NJG6JQGC.js';
+export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-NJG6JQGC.js';
 import { useShellPreferences, PREFERENCE_HOUSE_DEFAULTS, formatRelativeTime, thresholdOf, toMillis, formatFullTime, datedMillis, preferenceActionKey, DAY, HOUR, MINUTE } from './chunk-QOMP4D6V.js';
 export { PreferencesContext, formatFullTime, formatRelativeTime, preferenceActionKey, usePreferences } from './chunk-QOMP4D6V.js';
-import { CELL_FRAME, Skeleton, CELL_HIDE, TITLE_FLOOR, CELL_ROOM, TITLE_TEXT, CELL_STAT_ROOM, CELL_STAT_ROOM_END, CELL_STAT_TILE, CELL_ROOM_INNER, SegmentedControl } from './chunk-6XCWKLJZ.js';
-export { SegmentedControl, Skeleton } from './chunk-6XCWKLJZ.js';
+import { CELL_FRAME, Skeleton, CELL_HIDE, TITLE_FLOOR, CELL_ROOM, TITLE_TEXT, CELL_STAT_ROOM, CELL_STAT_ROOM_END, CELL_STAT_TILE, CELL_ROOM_INNER, SegmentedControl } from './chunk-MPXE2XOP.js';
+export { SegmentedControl, Skeleton } from './chunk-MPXE2XOP.js';
 import { useFormatLocale, LocaleContext } from './chunk-R7FG4ZQ5.js';
 export { useFormatLocale } from './chunk-R7FG4ZQ5.js';
-import { Input, CHECK_FILL, Dropdown, FilterRowContext, SWITCH_KNOB_ON, SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION, SWITCH_TRACK_ON, SWITCH_TRACK_OFF, useFieldControl, useField, OutsideField, InlineFieldError, Label, AddAnotherRowCtx, Field } from './chunk-OWGF362U.js';
-export { Dropdown, Field, InlineFieldError, Input, Label, Textarea, Toggle } from './chunk-OWGF362U.js';
+import { Input, CHECK_FILL, Dropdown, FilterRowContext, SWITCH_KNOB_ON, SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION, SWITCH_TRACK_ON, SWITCH_TRACK_OFF, useFieldControl, useField, OutsideField, InlineFieldError, Label, AddAnotherRowCtx, Field } from './chunk-4TQVFRKK.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, Textarea, Toggle } from './chunk-4TQVFRKK.js';
 import { formatLocale, localeChoice } from './chunk-7QLXYRPD.js';
 import { useScrollEdges, EDGE_FADE } from './chunk-3BRQRKDO.js';
-import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-TMPPBXX3.js';
-export { Avatar } from './chunk-TMPPBXX3.js';
-import { Link } from './chunk-UBLBVCQN.js';
-export { CodeBlock, Divider, Link } from './chunk-UBLBVCQN.js';
+import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-NFVJEICH.js';
+export { Avatar } from './chunk-NFVJEICH.js';
+import { Link } from './chunk-N6QLEZFH.js';
+export { CodeBlock, Divider, Link } from './chunk-N6QLEZFH.js';
 import { CardSurfaceCtx, useScrollsInside, useRunsEdgeToEdge, SplitPaneCtx, PanePaddedCtx, RowsCtx, PageActionsCtx, PANE_HEADING_CANCEL, SurfaceBoundary, useFramesItself, TableCardCtx, useWantsInset } from './chunk-RS624TD5.js';
-import { Badge } from './chunk-WSKPESAX.js';
-export { Badge } from './chunk-WSKPESAX.js';
-import { useTextOverflow } from './chunk-R2IAK3J3.js';
-export { useTextOverflow } from './chunk-R2IAK3J3.js';
-import { useOverlayMark, useDirtyGuard, OverlayMarkScope, OverlayCloseCtx, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth } from './chunk-ZQV26NND.js';
+import { Badge } from './chunk-4FX6UCSS.js';
+export { Badge } from './chunk-4FX6UCSS.js';
+import { useTextOverflow } from './chunk-ZTS6HJAU.js';
+export { useTextOverflow } from './chunk-ZTS6HJAU.js';
+import { useOverlayMark, useDirtyGuard, OverlayMarkScope, OverlayCloseCtx, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth } from './chunk-UI4BSRCQ.js';
 import { useHydrated, useToday } from './chunk-GIA4BMGI.js';
 export { useHydrated } from './chunk-GIA4BMGI.js';
 import { FormChangeCtx, useReportedChange, useOptionalFormContext, FormCtx } from './chunk-72SDAX54.js';
 export { useFormContext } from './chunk-72SDAX54.js';
-import { DropdownMenu } from './chunk-WD6T57ZJ.js';
-export { DropdownMenu } from './chunk-WD6T57ZJ.js';
+import { DropdownMenu } from './chunk-XJGFZ5CP.js';
+export { DropdownMenu } from './chunk-XJGFZ5CP.js';
 import { useFillHeight, FillContext } from './chunk-SS3C24IJ.js';
-import { Button, elementType, ControlSizeContext, triggerType, Spinner } from './chunk-FF57N3P7.js';
-export { Button, ButtonSizeContext, ControlSizeContext, Spinner } from './chunk-FF57N3P7.js';
+import { Button, elementType, ControlSizeContext, triggerType, Spinner } from './chunk-MW5CJOJN.js';
+export { Button, ButtonSizeContext, ControlSizeContext, Spinner } from './chunk-MW5CJOJN.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-ZHUVLBCC.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-ZHUVLBCC.js';
 import { inputModality, useInputModality } from './chunk-7RKC5C7G.js';
 export { INPUT_MODALITY_ATTR, inputModality, installInputModality, useInputModality } from './chunk-7RKC5C7G.js';
-import { useKeyboardScroll } from './chunk-F2XMZOUP.js';
-import { AutoTooltip, mergeRefs, useRevealFocus } from './chunk-HCEHTJ5E.js';
-export { Tooltip, useRevealFocus } from './chunk-HCEHTJ5E.js';
+import { useKeyboardScroll } from './chunk-T33JK3ZE.js';
+import { AutoTooltip, mergeRefs, useRevealFocus } from './chunk-77X7AHFB.js';
+export { Tooltip, useRevealFocus } from './chunk-77X7AHFB.js';
 import { Icon, slotIcon, warnOnce } from './chunk-53F7GVBQ.js';
-import { cn, FOCUS_RING, focusAfterSelfRemoval, FOCUSABLE, GLASS_SURFACE, FOCUS_INSET_WHILE_STOP, useFocusKeptInList, FOCUS_INSET, useLatest, PEER_FOCUS_RING, GLASS_BACKDROP, OPEN_TO_FOCUS, focusOutOf, FIELD, ZOOM_KEYS, rovingTabStop, FOCUS_ROOM, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberOpener, focusInitial, lockBodyScroll, unlockBodyScroll, OVERLAY_CLOSE_ATTR, OVERLAY_SURFACE, GLASS_OVERLAY, usePopupFocus, pointOf, pageAddress, registerOpenerRoot, rememberFocus, usePosition, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, CONTROL_ANCESTOR, GROUP_FOCUS_RING, useGridKeyboard, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, focusAfterRemoval, GLASS_DROPDOWN, ERROR_FOCUS_RING, FIELD_FOCUS_RING, openToFocus, atLeastFocusRoom, useNonModalDialog, useReturnFocus, onMovingOn } from './chunk-2724SJO2.js';
-export { useGridKeyboard } from './chunk-2724SJO2.js';
+import { cn, FOCUS_RING, focusAfterSelfRemoval, FOCUSABLE, GLASS_SURFACE, FOCUS_INSET_WHILE_STOP, useFocusKeptInList, FOCUS_INSET, useLatest, PEER_FOCUS_RING, GLASS_BACKDROP, OPEN_TO_FOCUS, focusOutOf, FIELD, ZOOM_KEYS, rovingTabStop, FOCUS_ROOM, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberOpener, focusInitial, lockBodyScroll, unlockBodyScroll, OVERLAY_CLOSE_ATTR, OVERLAY_SURFACE, GLASS_OVERLAY, usePopupFocus, tabStops, CONTROL_ANCESTOR, pointOf, pageAddress, registerOpenerRoot, rememberFocus, usePosition, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, GROUP_FOCUS_RING, useGridKeyboard, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, focusAfterRemoval, placesOf, GLASS_DROPDOWN, ERROR_FOCUS_RING, FIELD_FOCUS_RING, openToFocus, atLeastFocusRoom, useNonModalDialog, useReturnFocus, onMovingOn } from './chunk-HDFTENVW.js';
+export { useGridKeyboard } from './chunk-HDFTENVW.js';
 import { forwardRef, useRef, useId, useEffect, useState, createContext, useCallback, useLayoutEffect, useMemo, useContext, isValidElement, memo, useImperativeHandle, useSyncExternalStore, Children, Fragment as Fragment$1, cloneElement, useReducer } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -2576,7 +2576,7 @@ function SliderRange({
   const valueText = (v) => formatValue ? formatValue(v) : void 0;
   const handleChange = useCallback(
     (which, raw) => {
-      const v = Math.round(raw / step) * step;
+      const v = Number((Math.round(raw / step) * step).toFixed(placesOf(step)));
       const clamped = Math.max(min, Math.min(max, v));
       if (isRange) {
         if (which === "low") onChange([Math.min(clamped, high), high]);
@@ -11028,7 +11028,7 @@ var StackedList = forwardRef(function StackedList2({
   }, [ref]);
   const stackMeta = isPhone && articles;
   const selectable = selectedId !== void 0 || items.some((i) => i.selected !== void 0);
-  const inset = articles ? inCard ? "px-ds-5" : "px-0" : inCard ? "px-ds-5" : inPane ? "pl-ds-3 pr-ds-4" : selectable ? "pl-ds-3 pr-0" : "px-0";
+  const inset = articles ? inCard ? "px-ds-5" : "px-0" : inCard ? selectable ? "pl-[calc(var(--ds-space-5)_-_var(--ds-nav-v-active-rail)*1.5)] pr-ds-5" : "px-ds-5" : inPane ? "pl-ds-3 pr-ds-4" : selectable ? "pl-ds-3 pr-0" : "px-0";
   const list2 = /* @__PURE__ */ jsx(
     "ul",
     {
@@ -13031,7 +13031,7 @@ function getTabsFromDOM(el) {
   const tablist = el.closest('[role="tablist"]');
   if (!tablist) return [];
   return Array.from(tablist.querySelectorAll('[role="tab"]')).map((btn) => ({
-    id: btn.id.replace(/^ds-tab-/, ""),
+    id: btn.dataset.tab ?? "",
     disabled: btn.getAttribute("aria-disabled") === "true"
   }));
 }
@@ -13064,11 +13064,12 @@ function handleTabKeyDown(e, currentId, getTabs, orientation, select) {
   e.preventDefault();
   if (targetId && targetId !== currentId) {
     select?.(targetId);
-    document.getElementById(`ds-tab-${targetId}`)?.focus();
+    e.currentTarget.closest('[role="tablist"]')?.querySelector(`[data-tab="${CSS.escape(targetId)}"]`)?.focus();
   }
 }
 function TabButton({
   id,
+  scope,
   label,
   count,
   icon,
@@ -13095,8 +13096,8 @@ function TabButton({
       if (!e.currentTarget.closest('[role="tablist"]')?.contains(e.relatedTarget)) forget();
     }
   };
-  const tabId = `ds-tab-${id}`;
-  const panelId = hasPanel === false ? void 0 : `ds-tabpanel-${id}`;
+  const tabId = `ds-tab-${scope}${id}`;
+  const panelId = hasPanel === false ? void 0 : `ds-tabpanel-${scope}${id}`;
   const badgeBg = orientation === "vertical" ? "bg-[var(--ds-nav-v-badge-bg)]" : "bg-[var(--ds-nav-h-badge-bg)]";
   const countBadge = count !== void 0 ? /* @__PURE__ */ jsx("span", { className: cn(
     orientation === "vertical" ? "ml-ds-2" : "",
@@ -13109,6 +13110,7 @@ function TabButton({
       {
         type: "button",
         id: tabId,
+        "data-tab": id,
         role: "tab",
         "aria-selected": isActive2,
         "aria-controls": panelId,
@@ -13145,6 +13147,7 @@ function TabButton({
     {
       type: "button",
       id: tabId,
+      "data-tab": id,
       role: "tab",
       "aria-selected": isActive2,
       "aria-controls": panelId,
@@ -13201,11 +13204,12 @@ function TabsList({ children, className }) {
   return /* @__PURE__ */ jsx(TabStrip, { overflow, fullWidth, track, label, className, children });
 }
 function TabsTrigger({ value, children, count, icon, disabled, truncate, className }) {
-  const { activeTab, onTabChange, orientation, fullWidth, overflow, activation, stopTab, setFocusedTab } = useTabsCtx();
+  const { activeTab, onTabChange, orientation, fullWidth, overflow, activation, stopTab, setFocusedTab, scope } = useTabsCtx();
   return /* @__PURE__ */ jsx(
     TabButton,
     {
       id: value,
+      scope,
       label: children,
       count,
       icon,
@@ -13222,16 +13226,47 @@ function TabsTrigger({ value, children, count, icon, disabled, truncate, classNa
     }
   );
 }
+function needsStop(panel) {
+  const stops = tabStops(panel);
+  if (!stops.length) return true;
+  const walk = panel.ownerDocument.createTreeWalker(panel, NodeFilter.SHOW_TEXT);
+  for (let text = walk.nextNode(); text; text = walk.nextNode()) {
+    const at = text.parentElement;
+    if (!at || !text.textContent?.trim()) continue;
+    return !stops.some((stop) => stop.contains(at)) && !panel.contains(at.closest(CONTROL_ANCESTOR));
+  }
+  return false;
+}
+function keepPanelStop(panel) {
+  const read = () => {
+    if (panel.ownerDocument.activeElement === panel) return;
+    const stop = needsStop(panel);
+    if (stop !== (panel.getAttribute("tabindex") === "0")) {
+      if (stop) panel.tabIndex = 0;
+      else panel.removeAttribute("tabindex");
+    }
+  };
+  read();
+  const watch = new MutationObserver(read);
+  watch.observe(panel, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["tabindex", "disabled", "hidden", "inert", "href", "role"] });
+  panel.addEventListener("focusout", read);
+  return () => {
+    watch.disconnect();
+    panel.removeEventListener("focusout", read);
+  };
+}
 function TabsContent({ value, children, className }) {
-  const { activeTab } = useTabsCtx();
+  const { activeTab, scope } = useTabsCtx();
+  const [panel, setPanel] = useState(null);
+  useLayoutEffect(() => panel ? keepPanelStop(panel) : void 0, [panel]);
   if (activeTab !== value) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      id: `ds-tabpanel-${value}`,
+      ref: setPanel,
+      id: `ds-tabpanel-${scope}${value}`,
       role: "tabpanel",
-      "aria-labelledby": `ds-tab-${value}`,
-      tabIndex: 0,
+      "aria-labelledby": `ds-tab-${scope}${value}`,
       className: cn(FOCUS_RING, className),
       children
     }
@@ -13254,6 +13289,7 @@ function TabsRoot(props) {
   const arrayOverflow = arrayApi && props.tabs.some((t) => t.truncate) ? "truncate" : overflow;
   const [focusedTab, setFocusedTab] = useState(null);
   const stopTab = focusedTab ?? activeTab;
+  const scope = useId();
   const track = useScrollTrack(stopTab, arrayApi && effectiveOrientation === "horizontal" && arrayOverflow === "scroll");
   if ("tabs" in props && props.tabs) {
     const { tabs, mobile = "scroll" } = props;
@@ -13295,14 +13331,14 @@ function TabsRoot(props) {
                 children: tab.group
               }
             ),
-            /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, isTabStop: i === stopIndex, setFocusedTab, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, select) })
+            /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, scope, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, isTabStop: i === stopIndex, setFocusedTab, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, select) })
           ] }, tab.id))
         }
       );
     }
-    return /* @__PURE__ */ jsx(TabStrip, { overflow: arrayOverflow, fullWidth, track, label: ariaLabel, className, children: tabs.map((tab, i) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, isTabStop: i === stopIndex, setFocusedTab, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, select) }, tab.id)) });
+    return /* @__PURE__ */ jsx(TabStrip, { overflow: arrayOverflow, fullWidth, track, label: ariaLabel, className, children: tabs.map((tab, i) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, scope, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, isTabStop: i === stopIndex, setFocusedTab, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, select) }, tab.id)) });
   }
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, fullWidth, overflow, activation, stopTab, setFocusedTab, label: ariaLabel }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, fullWidth, overflow, activation, stopTab, setFocusedTab, label: ariaLabel, scope }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
 }
 var Tabs = Object.assign(TabsRoot, {
   List: TabsList,