gridsmith-ui 0.17.2 → 0.18.0

package/dist/index.js

@@ -19,7 +19,7 @@ import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
 import { Icon } from './chunk-4LDYR7QP.js';
 import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, FOCUS_WITHIN_RING } from './chunk-4KVFH5KC.js';
-import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, useId, memo, useEffect, useImperativeHandle, Children, isValidElement, cloneElement, Fragment as Fragment$1, useSyncExternalStore } from 'react';
+import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, Children, isValidElement, useId, memo, useEffect, useImperativeHandle, Fragment as Fragment$1, cloneElement, useSyncExternalStore } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -2325,18 +2325,21 @@ function Field({ label, children, hint, error, required, labelAction, id: idProp
     const { error: errorFlag, ...ariaOnly } = controlProps;
     control = cloneElement(child, isNative ? ariaOnly : { ...ariaOnly, ...errorFlag ? { error: true } : {} });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-1.5", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
-      /* @__PURE__ */ jsxs(Label, { id: labelId, htmlFor: id, children: [
-        label,
-        required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
+  return (
+    // In a settings panel a field keeps the narrow reading width however wide the page is (--ds-form-max, Sprint 25.9 A4)
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-1.5 max-w-[var(--ds-form-max,none)]", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
+        /* @__PURE__ */ jsxs(Label, { id: labelId, htmlFor: id, children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
+        ] }),
+        labelAction
       ] }),
-      labelAction
-    ] }),
-    /* @__PURE__ */ jsx(FieldContext.Provider, { value: fieldContext, children: control }),
-    hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-[var(--ds-text-muted)]", children: hint }),
-    hasError && /* @__PURE__ */ jsx(InlineFieldError, { id: errorId, message: error, className: "mt-0" })
-  ] });
+      /* @__PURE__ */ jsx(FieldContext.Provider, { value: fieldContext, children: control }),
+      hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-[var(--ds-text-muted)]", children: hint }),
+      hasError && /* @__PURE__ */ jsx(InlineFieldError, { id: errorId, message: error, className: "mt-0" })
+    ] })
+  );
 }
 function TruncFileName({ children, className }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
@@ -2506,7 +2509,8 @@ function SliderRange({
   label,
   "aria-label": ariaLabel,
   "aria-describedby": describedByProp,
-  trackStyle
+  trackStyle,
+  formatValue
 }) {
   const field = useField();
   const ownId = useId();
@@ -2519,6 +2523,8 @@ function SliderRange({
   const high = isRange ? value[1] : value;
   const trackRef = useRef(null);
   const pct = (v) => (v - min) / (max - min) * 100;
+  const shown = (v) => formatValue ? formatValue(v) : v;
+  const valueText = (v) => formatValue ? formatValue(v) : void 0;
   const handleChange = useCallback(
     (which, raw) => {
       const v = Math.round(raw / step) * step;
@@ -2571,7 +2577,7 @@ function SliderRange({
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-ds-1", disabled && "opacity-disabled", className), children: [
     (showLabel || showValue) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-ds-2", showLabel ? "justify-between" : "justify-end"), children: [
       showLabel && /* @__PURE__ */ jsx("span", { id: `${ownId}-label`, className: "text-sm font-medium leading-none text-[var(--ds-text-secondary)]", children: label }),
-      showValue && /* @__PURE__ */ jsx("span", { className: "text-xs font-mono tabular-nums text-[var(--ds-text-muted)]", children: isRange ? `${low} \u2013 ${high}` : low })
+      showValue && /* @__PURE__ */ jsx("span", { className: "text-xs font-mono tabular-nums text-[var(--ds-text-muted)]", children: isRange ? `${shown(low)} \u2013 ${shown(high)}` : shown(low) })
     ] }),
     isRange && nameId && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { id: `${ownId}-minimum`, hidden: true, children: "minimum" }),
@@ -2604,6 +2610,7 @@ function SliderRange({
               "aria-valuemin": min,
               "aria-valuemax": high,
               "aria-valuenow": low,
+              "aria-valuetext": valueText(low),
               "aria-invalid": error || void 0,
               onKeyDown: handleKeyDown("low"),
               onPointerDown: handlePointerDown("low"),
@@ -2629,6 +2636,7 @@ function SliderRange({
               "aria-valuemin": isRange ? low : min,
               "aria-valuemax": max,
               "aria-valuenow": high,
+              "aria-valuetext": valueText(high),
               "aria-invalid": error || void 0,
               onKeyDown: handleKeyDown("high"),
               onPointerDown: handlePointerDown("high"),
@@ -4302,7 +4310,7 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     f.message
   ] }, f.id || f.label)) }) }) : null;
   const actionsNode = actions && !drawerFooter ? /* @__PURE__ */ jsx("div", { "data-form-actions": "", className: cn("flex flex-wrap items-center gap-ds-2 pt-ds-2", actionsAlign === "end" ? "justify-end" : "justify-start"), children: actions }) : null;
-  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted }, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className: cn("flex flex-col gap-ds-5", className), noValidate: true, children: [
+  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted }, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className: cn("flex flex-col gap-ds-5 max-w-[var(--ds-form-max,none)]", className), noValidate: true, children: [
     summaryNode && /* @__PURE__ */ jsx("div", { "data-form-error-summary": "", children: summaryNode }),
     children,
     actionsNode
@@ -4899,6 +4907,17 @@ function MentionInput({
     )
   ] });
 }
+var HEADER_LAYOUT = {
+  row: "flex flex-wrap items-start justify-between gap-ds-4",
+  block: "flex flex-col space-y-ds-1.5 grow basis-1/2 [min-width:min-content] break-words",
+  titleLeads: "grow basis-1/2 max-w-max [min-width:min-content] break-words",
+  actions: "flex items-center gap-ds-2 shrink-0 ml-auto",
+  below: "mt-ds-1.5"
+};
+function actionsAreBadges(actions) {
+  const items = Children.toArray(actions);
+  return items.length > 0 && items.every((item) => isValidElement(item) && (item.type === Fragment$1 ? actionsAreBadges(item.props.children) : item.type === Badge));
+}
 var CardCtx = createContext(false);
 var CardActionCtx = createContext(null);
 var CARD_ACTION_ATTR = "data-card-action";
@@ -5141,7 +5160,7 @@ var CardHeader = forwardRef(function CardHeader2({ className, children, actions,
   const isCheckable = useContext(CardCtx);
   const hasActions = actions || menuItems;
   const pl = isCheckable ? "pl-ds-10" : "pl-ds-5";
-  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 shrink-0 ml-auto", children: [
+  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.actions, children: [
     actions,
     menuItems && /* @__PURE__ */ jsx(
       DropdownMenu,
@@ -5166,8 +5185,20 @@ var CardHeader = forwardRef(function CardHeader2({ className, children, actions,
   ] }) : null;
   const iconBlock = icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 h-10 w-10 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-muted)] flex items-center justify-center mb-ds-1", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 20, className: "text-[var(--ds-text-secondary)]" }) }) : null;
   if (hasActions) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-ds-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-ds-1.5 grow basis-1/2 [min-width:min-content] break-words", children: [
+    const parts = Children.toArray(children);
+    const titleLeads = !iconBlock && !menuItems && actionsAreBadges(actions) && parts.length > 0 && isValidElement(parts[0]) && parts[0].type === CardTitle;
+    if (titleLeads) {
+      const below = parts.slice(1);
+      return /* @__PURE__ */ jsxs("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: [
+        /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
+          /* @__PURE__ */ jsx("div", { "data-card-title-row": "", className: HEADER_LAYOUT.titleLeads, children: parts[0] }),
+          actionsBlock
+        ] }),
+        below.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-ds-1.5 break-words", HEADER_LAYOUT.below), children: below })
+      ] });
+    }
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
+      /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.block, children: [
         iconBlock,
         children
       ] }),
@@ -5381,11 +5412,27 @@ var columnClasses = {
   3: "grid-cols-3",
   4: "grid-cols-4"
 };
+var autoColumnClasses = {
+  horizontal: {
+    2: "grid-cols-[repeat(auto-fill,minmax(max(min(20rem,100%),calc((100%_-_var(--ds-space-8))/2)),1fr))]",
+    3: "grid-cols-[repeat(auto-fill,minmax(max(min(20rem,100%),calc((100%_-_2*var(--ds-space-8))/3)),1fr))]",
+    4: "grid-cols-[repeat(auto-fill,minmax(max(min(20rem,100%),calc((100%_-_3*var(--ds-space-8))/4)),1fr))]"
+  },
+  vertical: {
+    2: "grid-cols-[repeat(auto-fill,minmax(max(min(8rem,100%),calc((100%_-_var(--ds-space-6))/2)),1fr))]",
+    3: "grid-cols-[repeat(auto-fill,minmax(max(min(8rem,100%),calc((100%_-_2*var(--ds-space-6))/3)),1fr))]",
+    4: "grid-cols-[repeat(auto-fill,minmax(max(min(8rem,100%),calc((100%_-_3*var(--ds-space-6))/4)),1fr))]"
+  }
+};
 var spanClasses = {
   2: "col-span-2",
   3: "col-span-3",
   4: "col-span-4"
 };
+function spanClass(span, columns) {
+  if (!span || span <= 1) return void 0;
+  return span >= columns ? "col-span-full" : spanClasses[span];
+}
 var stackBreakpoints = {
   sm: "max-sm:grid-cols-1",
   md: "max-md:grid-cols-1",
@@ -5402,6 +5449,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
 }, ref) {
   const s = sizeStyles3[size];
   const stackBelow = stackBelowProp ?? (columns > 1 ? "sm" : void 0);
+  const templateClass = (layout) => columns > 1 && stackBelow !== "none" ? autoColumnClasses[layout][columns] : columnClasses[columns];
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsx(
       "dl",
@@ -5409,7 +5457,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
         ref,
         className: cn(
           "grid",
-          columnClasses[columns],
+          templateClass("vertical"),
           "gap-x-ds-6 gap-y-ds-1",
           stackBelow && stackBelow !== "none" && stackBreakpoints[stackBelow],
           dividers && "divide-y-[length:var(--ds-border-width)] divide-[var(--ds-border-subtle)]",
@@ -5420,7 +5468,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
           {
             className: cn(
               s.py,
-              item.span && item.span > 1 && spanClasses[item.span]
+              spanClass(item.span, columns)
             ),
             children: [
               /* @__PURE__ */ jsxs(
@@ -5451,7 +5499,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
       ref,
       className: cn(
         "grid",
-        columnClasses[columns],
+        templateClass("horizontal"),
         "gap-x-ds-8",
         stackBelow && stackBelow !== "none" && stackBreakpoints[stackBelow],
         dividers && "divide-y-[length:var(--ds-border-width)] divide-[var(--ds-border-subtle)]",
@@ -5464,7 +5512,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
             "flex items-start justify-between",
             s.py,
             s.gap,
-            item.span && item.span > 1 && spanClasses[item.span]
+            spanClass(item.span, columns)
           ),
           children: [
             /* @__PURE__ */ jsxs(
@@ -5574,6 +5622,69 @@ function Accordion({ items, type = "single", defaultOpen = [], open: controlledO
     ] }, i);
   }) });
 }
+var EDGE_FADE = 24;
+var NONE = { left: false, right: false, vertical: false, gutterRight: 0, gutterBottom: 0 };
+var same = (a, b) => a.left === b.left && a.right === b.right && a.vertical === b.vertical && a.gutterRight === b.gutterRight && a.gutterBottom === b.gutterBottom;
+function useScrollEdges(options = {}) {
+  const { enabled = true, fade = EDGE_FADE } = options;
+  const elRef = useRef(null);
+  const observer = useRef(null);
+  const borders = useRef({ x: 0, y: 0 });
+  const [state, setState] = useState(NONE);
+  const measure = useCallback(() => {
+    const el = elRef.current;
+    if (!el) return;
+    const next = {
+      left: el.scrollLeft > 1,
+      right: el.scrollLeft + el.clientWidth < el.scrollWidth - 1,
+      vertical: el.scrollHeight > el.clientHeight + 1,
+      gutterRight: Math.max(0, el.offsetWidth - el.clientWidth - borders.current.x),
+      gutterBottom: Math.max(0, el.offsetHeight - el.clientHeight - borders.current.y)
+    };
+    setState((prev) => same(prev, next) ? prev : next);
+  }, []);
+  const ref = useCallback((el) => {
+    observer.current?.disconnect();
+    observer.current = null;
+    elRef.current = el;
+    if (!el || !enabled) return;
+    const style = getComputedStyle(el);
+    const px = (v) => parseFloat(v) || 0;
+    borders.current = { x: px(style.borderLeftWidth) + px(style.borderRightWidth), y: px(style.borderTopWidth) + px(style.borderBottomWidth) };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const o = new ResizeObserver(measure);
+    o.observe(el);
+    for (const child of Array.from(el.children)) o.observe(child);
+    observer.current = o;
+  }, [enabled, measure]);
+  const shown = enabled && (state.left || state.right);
+  const { gutterRight: gr, gutterBottom: gb } = state;
+  const fadeLayer = `linear-gradient(to right, ${state.left ? `transparent 0, black ${fade}px` : "black 0"}, ${state.right ? `black calc(100% - ${gr + fade}px), transparent calc(100% - ${gr}px)` : "black 100%"})`;
+  const gutters = [gb > 0 && { size: `100% ${gb}px`, position: "0 100%" }, gr > 0 && { size: `${gr}px 100%`, position: "100% 0" }].filter(Boolean);
+  const mask = shown ? {
+    image: [fadeLayer, ...gutters.map(() => "linear-gradient(black, black)")].join(", "),
+    size: ["100% 100%", ...gutters.map((g) => g.size)].join(", "),
+    position: ["0 0", ...gutters.map((g) => g.position)].join(", ")
+  } : void 0;
+  return {
+    /** The scroller's ref (a callback). */
+    ref,
+    /** The scroller itself, for code that moves it. */
+    elRef,
+    measure,
+    /** Content hides past a side edge: the scroller moves sideways, and its edges fade. */
+    overflowing: shown,
+    /** It scrolls either way, sideways or up and down: a keyboard needs to reach it. */
+    scrollable: enabled && (state.left || state.right || state.vertical),
+    edges: { left: state.left, right: state.right },
+    /** For the scroller: `data-fade` names the faded edges ("left", "right" or "left right"), the style masks them. */
+    fadeProps: {
+      "data-fade": shown ? [state.left && "left", state.right && "right"].filter(Boolean).join(" ") : void 0,
+      style: mask ? { maskImage: mask.image, WebkitMaskImage: mask.image, maskSize: mask.size, WebkitMaskSize: mask.size, maskPosition: mask.position, WebkitMaskPosition: mask.position, maskRepeat: "no-repeat", WebkitMaskRepeat: "no-repeat" } : void 0
+    }
+  };
+}
 function TruncCell({ children, lines }) {
   const { ref, isTruncated } = useTextOverflow({ lines });
   const clampClass = lines === 1 ? "truncate" : `line-clamp-${lines}`;
@@ -5581,6 +5692,31 @@ function TruncCell({ children, lines }) {
   if (!isTruncated) return cell;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: cell });
 }
+var TITLE_CLASSES = "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] break-words";
+var FRAME_CLASSES = cn(
+  "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+  "rounded-[var(--ds-radius-md)]",
+  GLASS_SURFACE,
+  "bg-[var(--ds-bg-surface)]"
+);
+function TableHeading({ title, description, actions, titleId, descriptionId, inset }) {
+  const heading = /* @__PURE__ */ jsx("h3", { id: titleId, className: TITLE_CLASSES, children: title });
+  const actionsBlock = actions ? /* @__PURE__ */ jsx("div", { className: HEADER_LAYOUT.actions, children: actions }) : null;
+  const descriptionText = (className) => description ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: cn(className, "text-sm text-[var(--ds-text-muted)] break-words"), children: description }) : null;
+  return /* @__PURE__ */ jsx("div", { "data-table-heading": "", className: cn(inset ? "px-ds-5 py-ds-4" : "pb-ds-4"), children: actions && !actionsAreBadges(actions) ? /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
+    /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.block, children: [
+      heading,
+      descriptionText()
+    ] }),
+    actionsBlock
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
+      /* @__PURE__ */ jsx("div", { className: HEADER_LAYOUT.titleLeads, children: heading }),
+      actionsBlock
+    ] }),
+    descriptionText(HEADER_LAYOUT.below)
+  ] }) });
+}
 function Table({
   columns,
   data,
@@ -5601,8 +5737,15 @@ function Table({
   emptyState,
   onRowClick,
   mobileBreakpoint: mobileBreakpointProp,
+  title,
+  description,
+  actions,
+  "aria-label": ariaLabel,
   ref
 }) {
+  const headingId = useId();
+  const titleId = `${headingId}-title`;
+  const descriptionId = `${headingId}-description`;
   const [internalSortKey, setInternalSortKey] = useState(null);
   const [internalSortDir, setInternalSortDir] = useState(null);
   const [expandedRows, setExpandedRows] = useState(/* @__PURE__ */ new Set());
@@ -5669,14 +5812,23 @@ function Table({
   const preferences = useShellPreferences();
   const mobileBreakpoint = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? "md";
   const isMobile = useBreakpoint(mobileBreakpoint);
+  const { ref: scrollRef, measure: measureScroll, scrollable, fadeProps } = useScrollEdges({ enabled: !isMobile });
+  const [regionFocused, setRegionFocused] = useState(false);
+  const cardHeading = title ? /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: false }) : null;
+  const titledCards = (body) => /* @__PURE__ */ jsxs("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("flex flex-col", className), children: [
+    cardHeading,
+    body
+  ] });
   if (isMobile) {
     if (loading) {
-      return /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", className: cn("flex items-center justify-center py-ds-10", className), children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) });
+      if (title) return titledCards(/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-ds-10", children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) }));
+      return /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("flex items-center justify-center py-ds-10", className), children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) });
     }
     if (data.length === 0 && emptyState) {
-      return /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
+      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, "data-ds-list": "", "data-gs": "table", className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
     }
-    return /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", className: cn("flex flex-col gap-ds-3 overflow-y-auto", className), children: sortedWithIndices.map(({ row, originalIdx }, i) => {
+    const cards = /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx("div", { ref: title ? void 0 : ref, "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" : className), children: sortedWithIndices.map(({ row, originalIdx }, i) => {
       const isSelected = selectedSet.has(originalIdx);
       return /* @__PURE__ */ jsxs(
         "div",
@@ -5710,171 +5862,188 @@ function Table({
         i
       );
     }) }) });
+    return title ? titledCards(cards) : cards;
   }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      "data-ds-list": "",
-      className: cn(
-        "w-full overflow-x-auto",
-        "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-        "rounded-[var(--ds-radius-md)]",
-        GLASS_SURFACE,
-        "bg-[var(--ds-bg-surface)]",
-        className
-      ),
-      children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
-        /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
-          selectable && /* @__PURE__ */ jsx("th", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              checked: allSelected,
-              indeterminate: someSelected,
-              onChange: toggleAll
-            }
-          ) }),
-          expandable && /* @__PURE__ */ jsx("th", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3") }),
-          columns.map((col) => {
-            const isSortable = sortable || col.sortable;
-            const isActiveSort = sortKey === col.key;
-            const headerKind = kindOf(col);
-            const headerAlign = col.align ?? (headerKind === "number" ? "right" : "left");
-            const shrink = (headerKind === "number" || headerKind === "date") && !col.maxWidth;
-            return /* @__PURE__ */ jsx(
-              "th",
-              {
-                className: cn(
-                  density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
-                  shrink && "w-px whitespace-nowrap",
-                  "font-[var(--ds-weight-heading)] text-[var(--ds-text-secondary)]",
-                  "text-xs uppercase tracking-wider",
-                  headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left",
-                  isSortable && "cursor-pointer select-none hover:text-[var(--ds-text-primary)]"
-                ),
-                style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
-                onClick: isSortable ? () => handleSort(col.key) : void 0,
-                children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-ds-1", children: [
-                  col.header,
-                  isSortable && isActiveSort && /* @__PURE__ */ jsx(
+  const table = /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", ...title ? { "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0 } : ariaLabel ? { "aria-label": ariaLabel } : {}, children: [
+    /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
+      selectable && /* @__PURE__ */ jsx("th", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: allSelected,
+          indeterminate: someSelected,
+          onChange: toggleAll
+        }
+      ) }),
+      expandable && /* @__PURE__ */ jsx("th", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3") }),
+      columns.map((col) => {
+        const isSortable = sortable || col.sortable;
+        const isActiveSort = sortKey === col.key;
+        const headerKind = kindOf(col);
+        const headerAlign = col.align ?? (headerKind === "number" ? "right" : "left");
+        const shrink = (headerKind === "number" || headerKind === "date") && !col.maxWidth;
+        return /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: cn(
+              density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
+              shrink && "w-px whitespace-nowrap",
+              "font-[var(--ds-weight-heading)] text-[var(--ds-text-secondary)]",
+              "text-xs uppercase tracking-wider",
+              headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left",
+              isSortable && "cursor-pointer select-none hover:text-[var(--ds-text-primary)]"
+            ),
+            style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
+            onClick: isSortable ? () => handleSort(col.key) : void 0,
+            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-ds-1", children: [
+              col.header,
+              isSortable && isActiveSort && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "chevron-right",
+                  size: 12,
+                  className: cn(
+                    "transition-transform",
+                    sortDir === "asc" ? "-rotate-90" : "rotate-90"
+                  )
+                }
+              )
+            ] })
+          },
+          col.key
+        );
+      })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+      "td",
+      {
+        colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0),
+        className: "px-ds-4 py-ds-10 text-center",
+        children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" })
+      }
+    ) }) : data.length === 0 && emptyState ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+      "td",
+      {
+        colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0),
+        className: "px-ds-4 py-ds-10 text-center text-sm text-[var(--ds-text-muted)]",
+        children: emptyState
+      }
+    ) }) : sortedWithIndices.map(({ row, originalIdx }, i) => {
+      const isSelected = selectedSet.has(originalIdx);
+      const isExpanded = expandedRows.has(i);
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            className: cn(
+              "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
+              "transition-colors",
+              isSelected ? "bg-[var(--ds-accent-subtle)]" : striped && i % 2 === 1 ? "bg-[var(--ds-bg-muted)]/50" : "hover:bg-[var(--ds-bg-muted)]",
+              onRowClick && "cursor-pointer focus-visible:outline-none focus-visible:shadow-[inset_var(--ds-shadow-focus)]"
+            ),
+            onClick: onRowClick ? () => onRowClick(row, originalIdx) : void 0,
+            tabIndex: onRowClick ? 0 : void 0,
+            onKeyDown: onRowClick ? (e) => {
+              if (e.target !== e.currentTarget) return;
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onRowClick(row, originalIdx);
+              }
+            } : void 0,
+            children: [
+              selectable && /* @__PURE__ */ jsx("td", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx) }) }),
+              expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => toggleExpand(i),
+                  className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] cursor-pointer",
+                  "aria-expanded": isExpanded,
+                  "aria-label": "Expand row",
+                  children: /* @__PURE__ */ jsx(
                     Icon,
                     {
                       name: "chevron-right",
-                      size: 12,
-                      className: cn(
-                        "transition-transform",
-                        sortDir === "asc" ? "-rotate-90" : "rotate-90"
-                      )
+                      size: 14,
+                      className: cn("transition-transform", isExpanded && "rotate-90")
                     }
                   )
-                ] })
-              },
-              col.key
-            );
-          })
-        ] }) }),
-        /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                }
+              ) }),
+              columns.map((col) => {
+                const truncLines = col.truncate === true ? 1 : col.truncate ? col.truncate.lines : 0;
+                const kind = kindOf(col);
+                const alignClass = col.align ? col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left" : kind === "number" ? "text-right" : "text-left";
+                const cellContent = row[col.key];
+                const shrink = (kind === "number" || kind === "date") && !col.maxWidth;
+                let inner;
+                if (truncLines > 0) {
+                  inner = /* @__PURE__ */ jsx(TruncCell, { lines: truncLines, children: cellContent });
+                } else if (kind === "email") {
+                  inner = /* @__PURE__ */ jsx("span", { className: "max-w-[40ch] truncate inline-block align-bottom", title: typeof cellContent === "string" ? cellContent : void 0, children: cellContent });
+                } else {
+                  inner = cellContent;
+                }
+                const align = col.align ?? (kind === "number" ? "right" : "left");
+                if (align !== "left" && cellContent !== null && cellContent !== void 0 && typeof cellContent !== "string" && typeof cellContent !== "number") {
+                  inner = /* @__PURE__ */ jsx("div", { className: cn("flex items-center", align === "center" ? "justify-center" : "justify-end"), children: inner });
+                }
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: cn(
+                      density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
+                      "text-[var(--ds-text-primary)]",
+                      alignClass,
+                      shrink && "w-px whitespace-nowrap"
+                    ),
+                    style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
+                    children: inner
+                  },
+                  col.key
+                );
+              })
+            ]
+          }
+        ),
+        expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
           "td",
           {
-            colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0),
-            className: "px-ds-4 py-ds-10 text-center",
-            children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" })
+            colSpan: columns.length + (selectable ? 1 : 0) + 1,
+            className: "bg-[var(--ds-bg-muted)] px-ds-6 py-ds-4 text-sm text-[var(--ds-text-primary)]",
+            children: renderExpanded(row, i)
           }
-        ) }) : data.length === 0 && emptyState ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-          "td",
+        ) })
+      ] }, i);
+    }) })
+  ] });
+  const region = scrollable || regionFocused ? { tabIndex: 0, role: "region", ...title ? { "aria-labelledby": titleId } : { "aria-label": ariaLabel ?? "Table" } } : {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-ds-list": "",
+      "data-gs": "table",
+      className: cn("w-full min-w-0 flex flex-col", FRAME_CLASSES, "has-[>[data-table-scroll]:focus-visible]:shadow-[var(--ds-shadow-focus)]", className),
+      children: [
+        title && /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: true }),
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0),
-            className: "px-ds-4 py-ds-10 text-center text-sm text-[var(--ds-text-muted)]",
-            children: emptyState
+            ref: scrollRef,
+            "data-table-scroll": "",
+            onScroll: measureScroll,
+            onFocus: (e) => {
+              if (e.target === e.currentTarget) setRegionFocused(true);
+            },
+            onBlur: (e) => {
+              if (e.target === e.currentTarget) setRegionFocused(false);
+            },
+            ...fadeProps,
+            ...region,
+            className: cn("min-h-0 overflow-x-auto focus-visible:outline-none", title ? "rounded-b-[inherit]" : "rounded-[inherit]"),
+            children: table
           }
-        ) }) : sortedWithIndices.map(({ row, originalIdx }, i) => {
-          const isSelected = selectedSet.has(originalIdx);
-          const isExpanded = expandedRows.has(i);
-          return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsxs(
-              "tr",
-              {
-                className: cn(
-                  "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
-                  "transition-colors",
-                  isSelected ? "bg-[var(--ds-accent-subtle)]" : striped && i % 2 === 1 ? "bg-[var(--ds-bg-muted)]/50" : "hover:bg-[var(--ds-bg-muted)]",
-                  onRowClick && "cursor-pointer focus-visible:outline-none focus-visible:shadow-[inset_var(--ds-shadow-focus)]"
-                ),
-                onClick: onRowClick ? () => onRowClick(row, originalIdx) : void 0,
-                tabIndex: onRowClick ? 0 : void 0,
-                onKeyDown: onRowClick ? (e) => {
-                  if (e.target !== e.currentTarget) return;
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    onRowClick(row, originalIdx);
-                  }
-                } : void 0,
-                children: [
-                  selectable && /* @__PURE__ */ jsx("td", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx) }) }),
-                  expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), children: /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => toggleExpand(i),
-                      className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] cursor-pointer",
-                      "aria-expanded": isExpanded,
-                      "aria-label": "Expand row",
-                      children: /* @__PURE__ */ jsx(
-                        Icon,
-                        {
-                          name: "chevron-right",
-                          size: 14,
-                          className: cn("transition-transform", isExpanded && "rotate-90")
-                        }
-                      )
-                    }
-                  ) }),
-                  columns.map((col) => {
-                    const truncLines = col.truncate === true ? 1 : col.truncate ? col.truncate.lines : 0;
-                    const kind = kindOf(col);
-                    const alignClass = col.align ? col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left" : kind === "number" ? "text-right" : "text-left";
-                    const cellContent = row[col.key];
-                    const shrink = (kind === "number" || kind === "date") && !col.maxWidth;
-                    let inner;
-                    if (truncLines > 0) {
-                      inner = /* @__PURE__ */ jsx(TruncCell, { lines: truncLines, children: cellContent });
-                    } else if (kind === "email") {
-                      inner = /* @__PURE__ */ jsx("span", { className: "max-w-[40ch] truncate inline-block align-bottom", title: typeof cellContent === "string" ? cellContent : void 0, children: cellContent });
-                    } else {
-                      inner = cellContent;
-                    }
-                    const align = col.align ?? (kind === "number" ? "right" : "left");
-                    if (align !== "left" && cellContent !== null && cellContent !== void 0 && typeof cellContent !== "string" && typeof cellContent !== "number") {
-                      inner = /* @__PURE__ */ jsx("div", { className: cn("flex items-center", align === "center" ? "justify-center" : "justify-end"), children: inner });
-                    }
-                    return /* @__PURE__ */ jsx(
-                      "td",
-                      {
-                        className: cn(
-                          density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
-                          "text-[var(--ds-text-primary)]",
-                          alignClass,
-                          shrink && "w-px whitespace-nowrap"
-                        ),
-                        style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
-                        children: inner
-                      },
-                      col.key
-                    );
-                  })
-                ]
-              }
-            ),
-            expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-              "td",
-              {
-                colSpan: columns.length + (selectable ? 1 : 0) + 1,
-                className: "bg-[var(--ds-bg-muted)] px-ds-6 py-ds-4 text-sm text-[var(--ds-text-primary)]",
-                children: renderExpanded(row, i)
-              }
-            ) })
-          ] }, i);
-        }) })
-      ] })
+        )
+      ]
     }
   );
 }
@@ -8386,6 +8555,7 @@ function Carousel({
     "div",
     {
       ref,
+      "data-gs-clip": "",
       className: cn(
         "relative overflow-hidden rounded-[var(--ds-radius-md)]",
         "bg-[var(--ds-bg-muted)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
@@ -10193,7 +10363,7 @@ function TimeBar({ start, end, minWidth = 0, labels, children, className, style,
     const shows = (i) => i === 0 ? fits(0) : `calc(${[fits(i), ...labels.slice(0, i).map((_, j) => `(1 - ${fits(j)})`)].join(" * ")})`;
     const named = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
     label = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { "data-time-bar-label": "", "aria-hidden": "true", className: "sticky grid overflow-hidden whitespace-nowrap", style: { ...sticky, paddingInline: inset }, children: labels.map((text, i) => /* @__PURE__ */ jsx("span", { ref: i === 0 ? textRef : void 0, "data-time-bar-form": "", className: "justify-self-start [grid-area:1/1]", style: { opacity: shows(i) }, children: text }, i)) }),
+      /* @__PURE__ */ jsx("span", { "data-time-bar-label": "", "data-gs-clip": "", "aria-hidden": "true", className: "sticky grid overflow-hidden whitespace-nowrap", style: { ...sticky, paddingInline: inset }, children: labels.map((text, i) => /* @__PURE__ */ jsx("span", { ref: i === 0 ? textRef : void 0, "data-time-bar-form": "", className: "justify-self-start [grid-area:1/1]", style: { opacity: shows(i) }, children: text }, i)) }),
       !named && /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels[0] })
     ] });
   } else if (children != null && children !== false) {
@@ -10201,6 +10371,7 @@ function TimeBar({ start, end, minWidth = 0, labels, children, className, style,
       "span",
       {
         "data-time-bar-label": "",
+        "data-gs-clip": "",
         className: "sticky flex min-w-0 items-center gap-ds-1 overflow-hidden whitespace-nowrap",
         style: { ...sticky, paddingInline: INSET, opacity: `clamp(0, calc((${inView} - ${MIN_TITLE}) * 1000), 1)` },
         children: typeof children === "string" ? /* @__PURE__ */ jsx("span", { className: "truncate", children }) : children
@@ -10212,6 +10383,7 @@ function TimeBar({ start, end, minWidth = 0, labels, children, className, style,
     {
       ...props,
       ref: barRef,
+      "data-gs-clip": "",
       className: cn("absolute top-ds-2 bottom-ds-2 flex items-center overflow-clip rounded-[var(--ds-radius-sm)] outline-none focus-visible:outline-hidden focus-visible:shadow-[var(--ds-shadow-focus)]", className),
       style: { insetInlineStart: x, width: drawnWidth, ...style },
       children: label
@@ -10661,7 +10833,7 @@ function Gantt({
           minWidth: MIN_BAR,
           className: cn("cursor-pointer text-xs font-medium", EDGE, tone.fill, tone.on, isSelected && SELECTED),
           style: { top: (ROW_HEIGHT2 - BAR_HEIGHT) / 2, bottom: "auto", height: BAR_HEIGHT },
-          children: place === "inside" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex min-w-0 items-center gap-ds-1 overflow-hidden", children: title })
+          children: place === "inside" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-gs-clip": "", className: "flex min-w-0 items-center gap-ds-1 overflow-hidden", children: title })
         }
       )
     );
@@ -11058,40 +11230,22 @@ function trackClasses(orientation) {
     "border-b-[length:var(--ds-nav-h-track-border)] border-[var(--ds-border-default)]"
   );
 }
-var FADE = 24;
 function useScrollTrack(activeTab, enabled) {
-  const ref = useRef(null);
-  const [edges, setEdges] = useState({ left: false, right: false });
-  const measure = useCallback(() => {
-    const el = ref.current;
-    if (!el) return;
-    const left = el.scrollLeft > 1;
-    const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
-    setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
-  }, []);
+  const { ref, elRef, measure, fadeProps } = useScrollEdges({ enabled });
   useLayoutEffect(() => {
     if (!enabled) return;
-    measure();
-    const el = ref.current;
-    if (!el || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(measure);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [enabled, measure]);
-  useLayoutEffect(() => {
-    if (!enabled) return;
-    const el = ref.current;
+    const el = elRef.current;
     const tab = el?.querySelector('[role="tab"][aria-selected="true"]');
     if (!el || !tab) return;
     const start = tab.offsetLeft;
     const end = start + tab.offsetWidth;
-    if (start < el.scrollLeft + FADE) el.scrollLeft = Math.max(0, start - FADE);
-    else if (end > el.scrollLeft + el.clientWidth - FADE) el.scrollLeft = end - el.clientWidth + FADE;
+    if (start < el.scrollLeft + EDGE_FADE) el.scrollLeft = Math.max(0, start - EDGE_FADE);
+    else if (end > el.scrollLeft + el.clientWidth - EDGE_FADE) el.scrollLeft = end - el.clientWidth + EDGE_FADE;
     measure();
-  }, [activeTab, enabled, measure]);
+  }, [activeTab, enabled, measure, elRef]);
   useEffect(() => {
     if (!enabled) return;
-    const el = ref.current;
+    const el = elRef.current;
     if (!el) return;
     const onWheel = (e) => {
       if (el.scrollWidth <= el.clientWidth || Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
@@ -11141,14 +11295,11 @@ function useScrollTrack(activeTab, enabled) {
       el.removeEventListener("pointercancel", onUp);
       el.removeEventListener("click", onClick, true);
     };
-  }, [enabled]);
-  const fade = enabled ? [edges.left && "left", edges.right && "right"].filter(Boolean).join(" ") : "";
-  const mask = fade ? `linear-gradient(to right, ${edges.left ? `transparent 0, black ${FADE}px` : "black 0"}, ${edges.right ? `black calc(100% - ${FADE}px), transparent 100%` : "black 100%"})` : void 0;
+  }, [enabled, elRef]);
   return {
     ref,
     onScroll: measure,
-    "data-fade": fade || void 0,
-    style: mask ? { maskImage: mask, WebkitMaskImage: mask } : void 0
+    ...fadeProps
   };
 }
 var SCROLL_TRACK = "overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-w-full";
@@ -11311,6 +11462,7 @@ function TabsList({ children, className }) {
     {
       role: "tablist",
       ...overflow === "scroll" ? track : {},
+      "data-gs-clip": overflow === "scroll" ? void 0 : "",
       className: cn(
         trackClasses("horizontal"),
         "max-w-full",
@@ -11415,6 +11567,7 @@ function TabsRoot(props) {
       {
         role: "tablist",
         ...effectiveOverflow === "scroll" ? track : {},
+        "data-gs-clip": effectiveOverflow === "scroll" ? void 0 : "",
         className: cn(
           trackClasses("horizontal"),
           effectiveOverflow === "scroll" ? SCROLL_TRACK : "overflow-hidden",
@@ -11432,14 +11585,35 @@ var Tabs = Object.assign(TabsRoot, {
   Trigger: TabsTrigger,
   Content: TabsContent
 });
-var MIN_PANEL_WIDTH = 480;
+var MIN_PANEL_WIDTH = 560;
+var PANEL_STYLE = {
+  "--ds-form-max": "calc(var(--ds-bp-md) - 2 * var(--ds-space-6))"
+};
+var PANEL_CLASSES = "min-w-0 @container";
+function useColumnGap(ref) {
+  const [gap, setGap] = useState(0);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const read = () => {
+      const px = parseFloat(getComputedStyle(el).columnGap);
+      setGap(Number.isFinite(px) ? px : 0);
+    };
+    read();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(read);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return gap;
+}
 function SettingsLayout({
   sections,
   value,
   onChange,
   layout: layoutProp,
   railWidth = 220,
-  collapseBelow = railWidth + MIN_PANEL_WIDTH,
+  collapseBelow: collapseBelowProp,
   "aria-label": ariaLabel = "Settings sections",
   children,
   className
@@ -11447,32 +11621,37 @@ function SettingsLayout({
   const shell = useAppShell();
   const layout = layoutProp ?? shell?.theme?.settingsLayout ?? "sidebar";
   const rootRef = useRef(null);
+  const gap = useColumnGap(rootRef);
+  const collapseBelow = collapseBelowProp ?? railWidth + gap + MIN_PANEL_WIDTH;
   const compact = useCompact(rootRef, collapseBelow);
   const tabs = sections.map((s) => ({ id: s.id, label: s.label, icon: s.icon, group: s.group, disabled: s.disabled }));
   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("div", { className: "min-w-0", children })
+      /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: PANEL_CLASSES, style: PANEL_STYLE, children })
     ] });
   }
   if (compact) {
-    return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "sidebar", "data-collapsed": "true", className: cn("flex flex-col gap-ds-6", className), children: [
-      /* @__PURE__ */ jsx(
-        Dropdown,
-        {
-          "aria-label": ariaLabel,
-          options: sections.filter((s) => !s.disabled).map((s) => ({ id: s.id, label: s.label, group: s.group })),
-          value,
-          onChange: (v) => onChange(v)
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "min-w-0", children })
-    ] });
+    return (
+      // gap-x-ds-8 is the rail's gap, unused in one column: the threshold reads the same gap as the row (useColumnGap)
+      /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "sidebar", "data-collapsed": "true", className: cn("flex flex-col gap-y-ds-6 gap-x-ds-8", className), children: [
+        /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            "aria-label": ariaLabel,
+            options: sections.filter((s) => !s.disabled).map((s) => ({ id: s.id, label: s.label, group: s.group })),
+            value,
+            onChange: (v) => onChange(v)
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: PANEL_CLASSES, style: PANEL_STYLE, children })
+      ] })
+    );
   }
   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("div", { className: "flex-1 min-w-0", children })
+    /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: cn("flex-1", PANEL_CLASSES), style: PANEL_STYLE, children })
   ] });
 }
 function SeparatorIcon({ type, size }) {
@@ -13184,6 +13363,16 @@ var widthToMaxWidth = {
   full: "full",
   narrow: "md"
 };
+var dataWidthOf = {
+  sm: "sm",
+  md: "narrow",
+  lg: "lg",
+  xl: "constrained",
+  full: "full"
+};
+function pageMaxWidth(resolved) {
+  return resolved === "md" ? `var(--ds-page-max, ${maxWidthValues.md})` : maxWidthValues[resolved];
+}
 var paddingClasses = {
   none: "",
   default: "px-ds-6",
@@ -13281,7 +13470,8 @@ var PageContainer = forwardRef(function PageContainer2({
     else rootRef.current?.style.removeProperty("--ds-sticky-offset");
   }, []);
   const resolvedMaxWidth = width ? widthToMaxWidth[width] : maxWidth;
-  const maxWidthValue = maxWidthValues[resolvedMaxWidth];
+  const maxWidthValue = pageMaxWidth(resolvedMaxWidth);
+  const dataWidth = dataWidthOf[resolvedMaxWidth];
   const [requestedWidth, setRequestedWidth] = useState(null);
   const requestContentWidth = useCallback((w) => setRequestedWidth(w), []);
   const effectiveContentWidth = contentWidth ?? requestedWidth ?? void 0;
@@ -13345,6 +13535,7 @@ var PageContainer = forwardRef(function PageContainer2({
       {
         ref: setRoot,
         "data-page-container": wrappedHeader ? "" : void 0,
+        "data-width": dataWidth,
         className: cn(
           "w-full",
           paddingClasses[padding],
@@ -13376,7 +13567,7 @@ var PageContainer = forwardRef(function PageContainer2({
     ...overlapActive ? { marginTop: "calc(-1 * var(--ds-overlap, 0px))", position: "relative", zIndex: 1 } : {}
   } : void 0;
   const column = /* @__PURE__ */ jsx(PageContainerContext, { value: { contentMaxWidth: maxWidthValue, placement: "inside", containedBreadcrumbs: false, breadcrumbsInsideHeader: false, noBottomMargin: false, overlap: false, setPinnedHeight, reportHeader, requestContentWidth, insidePaddedColumn: true }, children: /* @__PURE__ */ jsx("div", { ref: columnRef, className: cn(columnClass(contentPadding), bottomPaddingClasses[vPad], className), style: { ...columnStyle, ...launcherPadding }, children: capped(rest) }) });
-  return /* @__PURE__ */ jsxs("div", { ref: setRoot, "data-page-container": "", className: "w-full", children: [
+  return /* @__PURE__ */ jsxs("div", { ref: setRoot, "data-page-container": "", "data-width": dataWidth, className: "w-full", children: [
     placement === "block" ? /* @__PURE__ */ jsx("div", { style: floatingBlockPadding(r.navbarFloating, r.sidebarFloating, overlapActive), children: /* @__PURE__ */ jsxs("div", { className: FLOATING_BLOCK, children: [
       strip,
       colourful ? header : /* @__PURE__ */ jsx("div", { className: columnClass(padding), style: columnStyle, children: header })
@@ -13637,7 +13828,7 @@ var PageHeader = forwardRef(function PageHeader2({
   }
   let header;
   if (variant === "minimal") {
-    header = /* @__PURE__ */ jsx(MinimalHeader, { title, caption, focusBack, badge, breadcrumbs: inlineBreadcrumbs, actions, tabs, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: floating ? void 0 : ref, isFloating: floating, contentMaxWidth: gutterWidth });
+    header = /* @__PURE__ */ jsx(MinimalHeader, { title, description, caption, focusBack, badge, breadcrumbs: inlineBreadcrumbs, actions, tabs, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: floating ? void 0 : ref, isFloating: floating, contentMaxWidth: gutterWidth });
   } else if (variant === "tabs-integrated") {
     header = /* @__PURE__ */ jsx(
       TabsIntegratedHeader,
@@ -13812,6 +14003,7 @@ function DefaultHeader({
 }
 function MinimalHeader({
   title,
+  description,
   caption,
   focusBack,
   badge,
@@ -13839,6 +14031,7 @@ function MinimalHeader({
       ] }),
       actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
     ] }),
+    description && /* @__PURE__ */ jsx(ClampedText, { className: "mt-ds-1 text-sm text-[var(--ds-text-secondary)]", children: description }),
     tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-3 -mx-ds-1", children: tabs })
   ] }) });
 }
@@ -14127,6 +14320,7 @@ function SnappingHeader({
               ] }),
               actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
             ] }),
+            description && /* @__PURE__ */ jsx(ClampedText, { className: "mt-ds-1 text-sm text-[var(--ds-text-secondary)]", children: description }),
             filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-3", children: filters }) }),
             expandedContent && /* @__PURE__ */ jsx("div", { className: "mt-ds-3", children: expandedContent }),
             tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-3 -mx-ds-1", children: tabs })
@@ -16489,6 +16683,7 @@ var SectionHeading = forwardRef(function SectionHeading2({
     "div",
     {
       ref,
+      "data-gs": "section-heading",
       "data-variant": variant,
       className: cn(
         pane ? "shrink-0 px-ds-4 pt-ds-4 pb-ds-3 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]" : "mb-[var(--ds-heading-gap)]",
@@ -16504,7 +16699,7 @@ var SectionHeading = forwardRef(function SectionHeading2({
         ), children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
-              /* @__PURE__ */ jsx("h2", { className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
+              /* @__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 }),
               badge,
               count !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "neutral", size: "sm", children: count })
             ] }),