gridsmith-ui 0.17.2 → 0.17.3

package/dist/index.js

@@ -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
@@ -5381,11 +5389,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 +5426,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 +5434,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 +5445,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 +5476,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 +5489,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(
@@ -5581,6 +5606,22 @@ 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 }) {
+  return /* @__PURE__ */ jsxs("div", { "data-table-heading": "", className: cn("flex flex-wrap items-start justify-between gap-ds-4", inset ? "px-ds-5 py-ds-4" : "pb-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: [
+      /* @__PURE__ */ jsx("h3", { id: titleId, className: TITLE_CLASSES, children: title }),
+      description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-sm text-[var(--ds-text-muted)]", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0 ml-auto", children: actions })
+  ] });
+}
 function Table({
   columns,
   data,
@@ -5601,8 +5642,14 @@ function Table({
   emptyState,
   onRowClick,
   mobileBreakpoint: mobileBreakpointProp,
+  title,
+  description,
+  actions,
   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 +5716,21 @@ function Table({
   const preferences = useShellPreferences();
   const mobileBreakpoint = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? "md";
   const isMobile = useBreakpoint(mobileBreakpoint);
+  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,173 +5764,179 @@ 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 } : {}, 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(
-          "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" })
+                }
+              ) }),
+              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
+                );
+              })
+            ]
           }
-        ) }) : data.length === 0 && emptyState ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        ),
+        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 text-sm text-[var(--ds-text-muted)]",
-            children: emptyState
+            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)
           }
-        ) }) : 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);
-        }) })
-      ] })
-    }
-  );
+        ) })
+      ] }, i);
+    }) })
+  ] });
+  if (!title) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-ds-list": "",
+        "data-gs": "table",
+        className: cn(
+          "w-full overflow-x-auto",
+          FRAME_CLASSES,
+          className
+        ),
+        children: table
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("w-full flex flex-col", FRAME_CLASSES, className), children: [
+    /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: true }),
+    /* @__PURE__ */ jsx("div", { "data-table-scroll": "", className: "min-h-0 overflow-x-auto rounded-b-[inherit]", children: table })
+  ] });
 }
 function optionsKeyForFit(options) {
   return options.map((o) => `${o.value}:${o.label}`).join("|");
@@ -8386,6 +8446,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 +10254,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 +10262,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 +10274,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 +10724,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 })
         }
       )
     );
@@ -11311,6 +11374,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 +11479,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 +11497,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 +11533,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 +13275,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 +13382,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 +13447,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 +13479,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 +13740,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 +13915,7 @@ function DefaultHeader({
 }
 function MinimalHeader({
   title,
+  description,
   caption,
   focusBack,
   badge,
@@ -13839,6 +13943,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 +14232,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 +16595,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 +16611,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 })
             ] }),