gridsmith-ui 0.30.1 → 0.30.2

package/dist/index.js

@@ -1,23 +1,23 @@
 "use client";
-import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useCornerInset, NAVBAR_INSET_PRIORITY, useOverlayMark, useDirtyGuard, useScrollbarInset, DrawerFooterCtx, OverlayMarkScope, OverlayCloseCtx, insetLessScrollbar, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth, DrawerPanel, useCloseSettle, besideRoom, PANEL_INSET_PRIORITY, Drawer, useRememberedWidth, pxOf, ResizeEdge, LAUNCHER_INSET_PRIORITY, defaultMaxWidth } from './chunk-KMKBOTFR.js';
-export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-KMKBOTFR.js';
+import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useCornerInset, NAVBAR_INSET_PRIORITY, useOverlayMark, useDirtyGuard, useScrollbarInset, DrawerFooterCtx, OverlayMarkScope, OverlayCloseCtx, insetLessScrollbar, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth, DrawerPanel, useCloseSettle, besideRoom, PANEL_INSET_PRIORITY, Drawer, useRememberedWidth, pxOf, ResizeEdge, LAUNCHER_INSET_PRIORITY, defaultMaxWidth } from './chunk-K6IDOCGE.js';
+export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-K6IDOCGE.js';
 import { Skeleton, TITLE_TEXT } from './chunk-6C2IUMY7.js';
 export { Skeleton } from './chunk-6C2IUMY7.js';
 import { useScrollEdges, EDGE_FADE } from './chunk-3BRQRKDO.js';
-import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-NEUWZUK6.js';
-export { Avatar } from './chunk-NEUWZUK6.js';
-import { Link } from './chunk-OX3NNMWG.js';
-export { CodeBlock, Divider, Link } from './chunk-OX3NNMWG.js';
-import { DropdownMenu } from './chunk-ISONVOA7.js';
-export { DropdownMenu } from './chunk-ISONVOA7.js';
+import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-ZASGFL5D.js';
+export { Avatar } from './chunk-ZASGFL5D.js';
+import { Link } from './chunk-SQHKC4HA.js';
+export { CodeBlock, Divider, Link } from './chunk-SQHKC4HA.js';
+import { DropdownMenu } from './chunk-HVGHGBKV.js';
+export { DropdownMenu } from './chunk-HVGHGBKV.js';
 import { useFillHeight, FillContext } from './chunk-DBHVJ7Z3.js';
-import { useKeyboardScroll } from './chunk-SJZWEBHL.js';
-import { Badge } from './chunk-OVHBQT3Z.js';
-export { Badge } from './chunk-OVHBQT3Z.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-T52LAFKG.js';
-export { Checkbox, CheckboxGroup, CheckboxGroupItem, DatePicker, HoverCard, TextOverflow } from './chunk-T52LAFKG.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, OutsideField, NumberInput, InlineFieldError, Label, AddAnotherRowCtx, Field } from './chunk-SLRTSBCJ.js';
-export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-SLRTSBCJ.js';
+import { Badge } from './chunk-BZRZENBS.js';
+export { Badge } from './chunk-BZRZENBS.js';
+import { useKeyboardScroll } from './chunk-ACLKDE5W.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-SIWERRP2.js';
+export { Checkbox, CheckboxGroup, CheckboxGroupItem, DatePicker, HoverCard, TextOverflow } from './chunk-SIWERRP2.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, OutsideField, NumberInput, InlineFieldError, Label, AddAnotherRowCtx, Field } from './chunk-USHW523V.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-USHW523V.js';
 import { useShellPreferences, PREFERENCE_HOUSE_DEFAULTS, formatRelativeTime, thresholdOf, toMillis, formatFullTime, datedMillis, preferenceActionKey, DAY, HOUR, MINUTE } from './chunk-TYNDXMBV.js';
 export { PreferencesContext, formatFullTime, formatRelativeTime, preferenceActionKey, usePreferences } from './chunk-TYNDXMBV.js';
 import { useFormatLocale, useHydrated, useToday, LocaleContext } from './chunk-LJYSVZMI.js';
@@ -27,22 +27,19 @@ import { useInputModality, inputModality } from './chunk-7RKC5C7G.js';
 export { INPUT_MODALITY_ATTR, inputModality, installInputModality, useInputModality } from './chunk-7RKC5C7G.js';
 import { FormChangeCtx, useReportedChange, useOptionalFormContext, FormCtx } from './chunk-72SDAX54.js';
 export { useFormContext } from './chunk-72SDAX54.js';
-import { Button, CardSurfaceCtx, useScrollsInside, SplitPaneCtx, RowsCtx, PageActionsCtx, ControlSizeContext, triggerType, SurfaceBoundary, Spinner, useFramesItself, TableCardCtx } from './chunk-ULCACQSA.js';
-export { Button, ButtonSizeContext, ControlSizeContext, Spinner } from './chunk-ULCACQSA.js';
+import { Button, CardSurfaceCtx, useScrollsInside, SplitPaneCtx, RowsCtx, PageActionsCtx, ControlSizeContext, triggerType, SurfaceBoundary, Spinner, useFramesItself, TableCardCtx } from './chunk-MIUSSYVE.js';
+export { Button, ButtonSizeContext, ControlSizeContext, Spinner } from './chunk-MIUSSYVE.js';
 import { elementType } from './chunk-NKUCS67T.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-ZHUVLBCC.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-ZHUVLBCC.js';
-import { useRevealFocus } from './chunk-HTXP5BMM.js';
-export { useRevealFocus } from './chunk-HTXP5BMM.js';
-import { focusAfterSelfRemoval, FOCUSABLE, useFocusKeptInList, FIELD, ZOOM_KEYS, rovingTabStop, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberOpener, focusInitial, OVERLAY_CLOSE_ATTR, usePopupFocus, CONTROL_ANCESTOR, useGridKeyboard, focusAfterRemoval, useNonModalDialog, useReturnFocus } from './chunk-R5QXMNW7.js';
-export { useGridKeyboard } from './chunk-R5QXMNW7.js';
-import { useTextOverflow } from './chunk-IELIF4PJ.js';
-export { useTextOverflow } from './chunk-IELIF4PJ.js';
-import { AutoTooltip } from './chunk-UDJOIVKQ.js';
-export { Tooltip } from './chunk-UDJOIVKQ.js';
+import { useTextOverflow } from './chunk-ZCDA74RQ.js';
+export { useTextOverflow } from './chunk-ZCDA74RQ.js';
+import { AutoTooltip, useRevealFocus } from './chunk-WWN6CQKI.js';
+export { Tooltip, useRevealFocus } from './chunk-WWN6CQKI.js';
 import { Icon, slotIcon, warnOnce } from './chunk-L6HWACK7.js';
 import { mergeRefs } from './chunk-7Q46JXSK.js';
-import { useLatest, usePosition } from './chunk-WIUGPZOH.js';
+import { focusAfterSelfRemoval, FOCUSABLE, useFocusKeptInList, useLatest, FIELD, ZOOM_KEYS, rovingTabStop, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberOpener, focusInitial, OVERLAY_CLOSE_ATTR, usePopupFocus, usePosition, CONTROL_ANCESTOR, useGridKeyboard, focusAfterRemoval, useNonModalDialog, useReturnFocus } from './chunk-4HJDOZ2M.js';
+export { useGridKeyboard } from './chunk-4HJDOZ2M.js';
 import { cn, FOCUS_RING, GLASS_SURFACE, FOCUS_INSET, PEER_FOCUS_RING, GLASS_BACKDROP, FOCUS_ROOM, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, GROUP_FOCUS_RING, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, GLASS_DROPDOWN, ERROR_FOCUS_RING, FIELD_FOCUS_RING, atLeastFocusRoom } from './chunk-YL5KD5RC.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useRef, useId, useEffect, useState, createContext, useCallback, useLayoutEffect, useMemo, useContext, isValidElement, memo, useImperativeHandle, useSyncExternalStore, Children, Fragment as Fragment$1, cloneElement, useReducer } from 'react';
@@ -8850,7 +8847,9 @@ function ExpandableDescription({ children, className }) {
   );
 }
 function HorizontalLayout({ items, minItemWidth, className }) {
-  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 [row, setRow] = useState(null);
+  useKeyboardScroll(row, "Timeline", true, false, "x");
+  return /* @__PURE__ */ jsx("div", { ref: setRow, "data-timeline-row": "", className: cn("relative flex items-start overflow-x-auto snap-x", FOCUS_INSET, 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: [
@@ -12281,7 +12280,7 @@ function useScrollTrack(stopTab, enabled) {
   };
 }
 var SCROLL_TRACK = "overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
-function TabStrip({ overflow, fullWidth, track, className, children }) {
+function TabStrip({ overflow, fullWidth, track, label, className, children }) {
   const scrolls = overflow === "scroll";
   return /* @__PURE__ */ jsx("div", { className: cn("min-w-0 max-w-full", fullWidth && "w-full", className), children: /* @__PURE__ */ jsx(
     "div",
@@ -12289,7 +12288,7 @@ function TabStrip({ overflow, fullWidth, track, className, children }) {
       ...scrolls ? track : {},
       "data-gs-clip": scrolls ? void 0 : "",
       className: cn("relative -m-[4px] p-[4px] scroll-px-[4px]", scrolls ? SCROLL_TRACK : "overflow-hidden"),
-      children: /* @__PURE__ */ jsx("div", { role: "tablist", className: cn(trackClasses("horizontal"), scrolls ? "w-max min-w-full" : "w-full"), children })
+      children: /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": label, className: cn(trackClasses("horizontal"), scrolls ? "w-max min-w-full" : "w-full"), children })
     }
   ) });
 }
@@ -12450,7 +12449,7 @@ function TabButton({
   return btn;
 }
 function TabsList({ children, className }) {
-  const { orientation, fullWidth, overflow, stopTab } = useTabsCtx();
+  const { orientation, fullWidth, overflow, stopTab, label } = useTabsCtx();
   const track = useScrollTrack(stopTab, orientation === "horizontal" && overflow === "scroll");
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsx(
@@ -12458,12 +12457,13 @@ function TabsList({ children, className }) {
       {
         role: "tablist",
         "aria-orientation": "vertical",
+        "aria-label": label,
         className: cn(trackClasses("vertical"), className),
         children
       }
     );
   }
-  return /* @__PURE__ */ jsx(TabStrip, { overflow, fullWidth, track, className, children });
+  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();
@@ -12510,6 +12510,7 @@ function TabsRoot(props) {
     fullWidth = false,
     overflow = "scroll",
     activation = "automatic",
+    "aria-label": ariaLabel,
     className
   } = props;
   const isMobile = useBreakpoint("md");
@@ -12533,6 +12534,7 @@ function TabsRoot(props) {
             options: tabs.filter((t) => !t.disabled).map((t) => ({ id: t.id, label: t.label, group: t.group })),
             value: activeTab,
             onChange: (v) => onTabChange(v),
+            "aria-label": ariaLabel ?? "Contents",
             className
           }
         ) })
@@ -12544,6 +12546,7 @@ function TabsRoot(props) {
         {
           role: "tablist",
           "aria-orientation": "vertical",
+          "aria-label": ariaLabel,
           className: cn(trackClasses("vertical"), className),
           children: tabs.map((tab, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
             tab.group && tab.group !== tabs[i - 1]?.group && /* @__PURE__ */ jsx(
@@ -12562,9 +12565,9 @@ function TabsRoot(props) {
         }
       );
     }
-    return /* @__PURE__ */ jsx(TabStrip, { overflow: arrayOverflow, fullWidth, track, 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, 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 }, 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 }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
 }
 var Tabs = Object.assign(TabsRoot, {
   List: TabsList,
@@ -12614,7 +12617,7 @@ function SettingsLayout({
   const stickyTop = shell ? "var(--ds-sticky-offset, 0px)" : "calc(var(--ds-navbar-height) + var(--ds-sticky-offset, 0px))";
   if (layout === "tabs") {
     return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "tabs", className: cn("flex flex-col gap-ds-6", className), children: [
-      /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(Tabs, { orientation: "horizontal", mobile: "dropdown", tabs, activeTab: value, onTabChange: onChange }) }),
+      /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(Tabs, { orientation: "horizontal", mobile: "dropdown", tabs, activeTab: value, onTabChange: onChange, "aria-label": ariaLabel }) }),
       /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: PANEL_CLASSES, style: PANEL_STYLE, children })
     ] });
   }
@@ -12636,7 +12639,7 @@ function SettingsLayout({
     );
   }
   return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "sidebar", className: cn("flex flex-row items-start gap-ds-8", className), children: [
-    /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: "sticky self-start shrink-0", style: { width: `${railWidth}px`, top: stickyTop }, children: /* @__PURE__ */ jsx(Tabs, { orientation: "vertical", tabs, activeTab: value, onTabChange: onChange, className: "w-full" }) }),
+    /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: "sticky self-start shrink-0", style: { width: `${railWidth}px`, top: stickyTop }, children: /* @__PURE__ */ jsx(Tabs, { orientation: "vertical", tabs, activeTab: value, onTabChange: onChange, "aria-label": ariaLabel, className: "w-full" }) }),
     /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: cn("flex-1", PANEL_CLASSES), style: PANEL_STYLE, children })
   ] });
 }
@@ -12842,11 +12845,12 @@ function ScrollArea({
   className,
   orientation = "vertical",
   maxHeight,
-  maxWidth
+  maxWidth,
+  "aria-label": ariaLabel = "Scrollable content"
 }) {
   const viewportRef = useRef(null);
   const [viewport, setViewport] = useState(null);
-  useRevealFocus(viewport);
+  useKeyboardScroll(viewport, ariaLabel, true, false, orientation === "horizontal" ? "x" : orientation === "both" ? "both" : "y");
   const viewportRefs = useCallback((node) => {
     viewportRef.current = node;
     setViewport(node);
@@ -12941,7 +12945,9 @@ function ScrollArea({
             ref: viewportRefs,
             onScroll: updateThumbs,
             className: cn(
-              "h-full w-full scroll-p-[4px]",
+              // the frame's corners, so the inset ring follows them rather than being cut by them (as the Table's region)
+              "h-full w-full scroll-p-[4px] rounded-[inherit]",
+              FOCUS_INSET,
               orientation === "vertical" && "overflow-y-auto overflow-x-hidden",
               orientation === "horizontal" && "overflow-x-auto overflow-y-hidden",
               orientation === "both" && "overflow-auto",