gridsmith-ui 0.6.7 → 0.7.0

package/dist/index.js

@@ -1,18 +1,18 @@
 import { Skeleton } from './chunk-M3AARGLI.js';
 export { Skeleton } from './chunk-M3AARGLI.js';
 import { useOverlayLayer, useCloseOnFocusOut, useReturnFocus, focusInitial, useFocusTrap, OVERLAY_CLOSE_ATTR, useNonModalDialog, rovingTabStop } from './chunk-RLUK575N.js';
-import { Link } from './chunk-R2HNSJJG.js';
-export { CodeBlock, Divider, Link } from './chunk-R2HNSJJG.js';
-import { Badge } from './chunk-ADTPGMOD.js';
-export { Badge } from './chunk-ADTPGMOD.js';
+import { Link } from './chunk-G6KC5YNY.js';
+export { CodeBlock, Divider, Link } from './chunk-G6KC5YNY.js';
+import { Badge } from './chunk-QVNGQ64Q.js';
+export { Badge } from './chunk-QVNGQ64Q.js';
 import { useBreakpoint } from './chunk-EKQHHP72.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-EKQHHP72.js';
-import { Tooltip, useTextOverflow, usePosition, Slot } from './chunk-LTV5X3S7.js';
-export { Tooltip, useTextOverflow } from './chunk-LTV5X3S7.js';
+import { Tooltip, useTextOverflow, usePosition, Slot } from './chunk-RLNIRPOH.js';
+export { Tooltip, useTextOverflow } from './chunk-RLNIRPOH.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
-import { Icon } from './chunk-NM3BFWHH.js';
+import { Icon } from './chunk-X4CNZFWC.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, useContext, useState, memo, useRef, useEffect, useCallback, useLayoutEffect, useId, isValidElement, cloneElement, Fragment as Fragment$1, useMemo, Children, useSyncExternalStore } from 'react';
+import { createContext, forwardRef, useContext, useState, memo, useCallback, useRef, useEffect, useLayoutEffect, Children, useId, isValidElement, cloneElement, Fragment as Fragment$1, useMemo, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -540,7 +540,8 @@ function Dropdown({
   ref,
   container,
   error = false,
-  showChips = true
+  showChips = true,
+  "aria-label": ariaLabel
 }) {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -706,6 +707,7 @@ function Dropdown({
         "aria-invalid": error || void 0,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
+        "aria-label": ariaLabel,
         className: cn(
           "w-full flex items-center justify-between gap-ds-2",
           size === "sm" ? "px-ds-2 py-ds-1 text-xs h-[var(--ds-control-height-sm)]" : "px-ds-3 py-ds-2 text-sm h-[var(--ds-control-height-md)]",
@@ -4308,19 +4310,22 @@ function TrendBadge({ trend }) {
     flat: "text-[var(--ds-text-muted)] bg-[var(--ds-bg-muted)]"
   };
   const arrows = { up: "\u2191", down: "\u2193", flat: "\u2192" };
-  return /* @__PURE__ */ jsxs(
+  const { ref, isTruncated } = useTextOverflow({ lines: 1, content: trend.value });
+  const badge = /* @__PURE__ */ jsxs(
     "span",
     {
       className: cn(
-        "inline-flex items-center gap-ds-0.5 text-xs font-medium rounded-[var(--ds-radius-sm)] px-ds-1.5 py-ds-0.5",
+        "inline-flex items-center gap-ds-0.5 text-xs font-medium rounded-[var(--ds-radius-sm)] px-ds-1.5 py-ds-0.5 min-w-0 max-w-full",
         colors[trend.direction]
       ),
       children: [
         /* @__PURE__ */ jsx("span", { children: arrows[trend.direction] }),
-        trend.value
+        /* @__PURE__ */ jsx("span", { ref, className: "truncate", children: trend.value })
       ]
     }
   );
+  if (!isTruncated) return badge;
+  return /* @__PURE__ */ jsx(Tooltip, { content: trend.value, children: badge });
 }
 function DataList({ items, columns = 1, className }) {
   return /* @__PURE__ */ jsx(
@@ -4851,7 +4856,8 @@ function SegmentedControl({
   variant = "default",
   fullWidth = false,
   onHoverChange,
-  className
+  className,
+  "aria-label": ariaLabel
 }) {
   const containerRef = useRef(null);
   const [indicator, setIndicator] = useState({ left: 0, width: 0 });
@@ -4905,6 +4911,7 @@ function SegmentedControl({
     {
       ref: containerRef,
       role: "radiogroup",
+      "aria-label": ariaLabel,
       onKeyDown: handleKeyDown,
       className: cn(
         "relative items-center",
@@ -6509,18 +6516,25 @@ var defaultIcons = {
   error: "\u26A0",
   "no-permission": "\u{1F512}"
 };
+var FRAME_ICON_SIZE = 28;
+function renderIcon(icon) {
+  if (typeof icon === "string") return /* @__PURE__ */ jsx(Icon, { name: icon, size: FRAME_ICON_SIZE, className: "text-[var(--ds-text-muted)]" });
+  if (isValidElement(icon) && icon.type === Icon) return cloneElement(icon, { size: FRAME_ICON_SIZE });
+  return icon;
+}
 function EmptyState({ icon, iconFrame = "circle", title, description, action, variant = "empty", bordered = false, className }) {
+  const iconNode = icon === void 0 || icon === null ? void 0 : renderIcon(icon);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "flex flex-col items-center justify-center py-[var(--ds-space-10)]",
+        "flex flex-col items-center justify-center py-[var(--ds-space-10)] px-[var(--ds-space-6)]",
         "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]",
         bordered && "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
         className
       ),
       children: [
-        iconFrame === "none" && icon ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center mb-ds-4", children: icon }) : /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-emphasis)] flex items-center justify-center mb-ds-4", children: icon ?? /* @__PURE__ */ jsx("span", { className: "text-2xl text-[var(--ds-text-muted)]", children: defaultIcons[variant] }) }),
+        iconFrame === "none" && iconNode ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center mb-ds-4", children: iconNode }) : /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-emphasis)] flex items-center justify-center mb-ds-4", children: iconNode ?? /* @__PURE__ */ jsx("span", { className: "text-2xl text-[var(--ds-text-muted)]", children: defaultIcons[variant] }) }),
         /* @__PURE__ */ jsx("h3", { className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
         description && /* @__PURE__ */ jsx("p", { className: "mt-ds-1 text-sm text-[var(--ds-text-muted)] max-w-sm text-center", children: description }),
         action && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: action })
@@ -6528,6 +6542,130 @@ function EmptyState({ icon, iconFrame = "circle", title, description, action, va
     }
   );
 }
+function SkipLink({ href = "#main", children = "Skip to content", className }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className: cn(
+        "sr-only focus:not-sr-only focus:fixed focus:top-[var(--ds-space-2)] focus:left-[var(--ds-space-2)] focus:z-[var(--ds-z-tooltip)]",
+        "focus:px-[var(--ds-space-3)] focus:py-[var(--ds-space-2)] focus:rounded-[var(--ds-radius-md)] focus:text-sm focus:font-medium",
+        "focus:bg-[var(--ds-bg-surface-elevated)] focus:text-[var(--ds-text-primary)] focus:shadow-[var(--ds-shadow-md)]",
+        "focus:outline-none focus:ring-2 focus:ring-[var(--ds-accent-primary)]",
+        className
+      ),
+      children
+    }
+  );
+}
+function useCompact(ref, breakpoint) {
+  const [compact, setCompact] = useState(false);
+  const check = useCallback(() => {
+    const width = ref.current?.offsetWidth ?? 0;
+    if (width > 0) setCompact(width < breakpoint);
+  }, [ref, breakpoint]);
+  useLayoutEffect(() => {
+    check();
+    if (!ref.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(check);
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [check, ref]);
+  return compact;
+}
+function TableToolbar({
+  search,
+  primaryFilter,
+  filters,
+  filtersOpen,
+  onFiltersOpenChange,
+  activeFilterCount,
+  activeFilters,
+  onClearAll,
+  resultCount,
+  resultNoun = ["result", "results"],
+  actions,
+  size = "sm",
+  compactBreakpoint = 680,
+  className
+}) {
+  const rowRef = useRef(null);
+  const compact = useCompact(rowRef, compactBreakpoint);
+  const filterRowId = useId();
+  const [openState, setOpenState] = useState(false);
+  const open = filtersOpen ?? openState;
+  const setOpen = (next) => {
+    setOpenState(next);
+    onFiltersOpenChange?.(next);
+  };
+  const iconSize = size === "sm" ? 14 : 16;
+  const count = activeFilterCount ?? activeFilters?.length ?? 0;
+  const hasChips = !!activeFilters?.length;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-3 min-w-0", className), "data-table-toolbar": "", children: [
+    /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "flex items-center gap-ds-2 flex-wrap", children: [
+      search && /* @__PURE__ */ jsx(
+        Input,
+        {
+          "aria-label": search.label,
+          placeholder: search.placeholder ?? search.label,
+          value: search.value,
+          size,
+          onChange: (e) => search.onChange(e.target.value),
+          className: "flex-1 min-w-[160px] max-w-[280px]"
+        }
+      ),
+      primaryFilter && (compact ? /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          "aria-label": primaryFilter.label,
+          options: primaryFilter.options.map((o) => ({ id: o.value, label: o.label })),
+          value: primaryFilter.value,
+          onChange: (v) => primaryFilter.onChange(v),
+          size,
+          className: "w-[150px]"
+        }
+      ) : /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          "aria-label": primaryFilter.label,
+          options: primaryFilter.options,
+          value: primaryFilter.value,
+          size,
+          onChange: primaryFilter.onChange
+        }
+      )),
+      (filters || actions) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 flex-1 justify-end", children: [
+        filters && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: open ? "secondary" : "outline",
+            size,
+            iconLeft: /* @__PURE__ */ jsx(Icon, { name: "filter", size: iconSize }),
+            onClick: () => setOpen(!open),
+            "aria-expanded": open,
+            "aria-controls": filterRowId,
+            className: "mr-auto",
+            children: [
+              "Filters",
+              count > 0 && !open && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "xs", className: "ml-ds-1", children: count })
+            ]
+          }
+        ),
+        actions
+      ] })
+    ] }),
+    filters && open && /* @__PURE__ */ jsx("div", { id: filterRowId, className: "flex items-center gap-ds-3 flex-wrap", children: filters }),
+    (resultCount !== void 0 || hasChips) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 flex-wrap", children: [
+      resultCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--ds-text-muted)]", "aria-live": "polite", children: [
+        resultCount,
+        " ",
+        resultCount === 1 ? resultNoun[0] : resultNoun[1]
+      ] }),
+      activeFilters?.map((f) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "subtle", onRemove: f.onRemove, children: f.label }, f.id)),
+      hasChips && onClearAll && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })
+    ] })
+  ] });
+}
 var dotVariant = {
   default: "bg-[var(--ds-accent-primary)] shadow-[0_0_0_3px_var(--ds-accent-primary)]/20",
   success: "bg-[var(--ds-status-success)] shadow-[0_0_0_3px_var(--ds-status-success)]/20",
@@ -8410,12 +8548,18 @@ var AppShell = forwardRef(function AppShell2({
   mobileMenuFlush = true,
   navbar,
   mobileNav,
+  footer,
+  skipLink = true,
+  mainId = "main",
   aside,
   asideSide = "right",
   launcher,
   children,
   className,
-  scrollable = true
+  scrollable = true,
+  theme,
+  currentPath,
+  homePath = "/"
 }, ref) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [asideOpen, setAsideOpen] = useState(false);
@@ -8431,15 +8575,29 @@ var AppShell = forwardRef(function AppShell2({
   const hasMobileNav = mobileNav != null;
   const showMobileDrawer = hasMobileMenu && !(isSmallMobile && hasMobileNav);
   const [shellEl, setShellEl] = useState(null);
+  const [chrome, setChrome] = useState({});
+  const registerChrome = useCallback((kind, position) => {
+    setChrome((c) => c[kind] === position ? c : { ...c, [kind]: position });
+    return () => setChrome((c) => {
+      if (!(kind in c)) return c;
+      const next = { ...c };
+      delete next[kind];
+      return next;
+    });
+  }, []);
+  const navbarFloating = (chrome.navbar ?? theme?.navbarPosition) === "floating";
+  const sidebarFloating = hasSidebar && !isMobile && (chrome.sidebar ?? theme?.sidebarPosition) === "floating";
+  const isHome = currentPath != null && currentPath === homePath;
   return /* @__PURE__ */ jsx(
     AppShellContext,
     {
-      value: { hasSidebar, hasMobileMenu, hasMobileNav, sidebarOpen, setSidebarOpen, isMobile, isTablet, sidebarCollapsed, setSidebarCollapsed: setUserCollapsed, asideOpen, setAsideOpen, asideSide, asideFloating, setAsideFloating, container: shellEl },
+      value: { hasSidebar, hasMobileMenu, hasMobileNav, sidebarOpen, setSidebarOpen, isMobile, isTablet, sidebarCollapsed, setSidebarCollapsed: setUserCollapsed, asideOpen, setAsideOpen, asideSide, asideFloating, setAsideFloating, container: shellEl, theme: theme ?? null, isHome, navbarFloating, sidebarFloating, registerChrome },
       children: /* @__PURE__ */ jsxs("div", { ref: (el) => {
         setShellEl(el);
         if (typeof ref === "function") ref(el);
         else if (ref) ref.current = el;
       }, className: cn("relative h-screen flex flex-col bg-[var(--ds-bg-canvas)] overflow-hidden", className), children: [
+        skipLink && /* @__PURE__ */ jsx(SkipLink, { href: `#${mainId}` }),
         layout === "sidebar-header" && navbar,
         layout === "multi-column" && navbar,
         /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0", children: [
@@ -8451,13 +8609,18 @@ var AppShell = forwardRef(function AppShell2({
             /* @__PURE__ */ jsx(
               "main",
               {
+                id: mainId,
+                tabIndex: -1,
                 className: cn(
-                  "flex-1 min-h-0",
+                  "flex-1 min-h-0 focus:outline-none",
                   scrollable ? "overflow-y-auto" : "relative",
                   layout === "multi-column" && "flex"
                 ),
                 style: { containerType: "inline-size" },
-                children: scrollable ? children : /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children })
+                children: scrollable ? footer ? /* @__PURE__ */ jsxs("div", { className: "min-h-full flex flex-col", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
+                  footer
+                ] }) : children : /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children })
               }
             )
           ] }),
@@ -8491,8 +8654,8 @@ function AsidePanel({
   side = "right",
   width = "420px",
   position = "flush",
-  navbarFloating = false,
-  sidebarFloating = false,
+  navbarFloating: navbarFloatingProp,
+  sidebarFloating: sidebarFloatingProp,
   collapseBelow = "lg",
   keepMounted = true,
   resizable = true,
@@ -8504,6 +8667,8 @@ function AsidePanel({
 }) {
   const collapsed = useBreakpoint(collapseBelow);
   const shell = useAppShell();
+  const navbarFloating = navbarFloatingProp ?? shell?.navbarFloating ?? false;
+  const sidebarFloating = sidebarFloatingProp ?? shell?.sidebarFloating ?? false;
   const setAsideOpen = shell?.setAsideOpen;
   const setAsideFloating = shell?.setAsideFloating;
   const floating = position === "floating";
@@ -8832,7 +8997,7 @@ var subscribeNever = () => () => {
 var getClientSnapshot = () => true;
 var getServerSnapshot = () => false;
 var bodyLaunchers = 0;
-function renderIcon(icon, size) {
+function renderIcon2(icon, size) {
   return typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, size }) : icon;
 }
 function Launcher({
@@ -8976,7 +9141,7 @@ function Launcher({
               accentGlyph && ACCENT_GLYPH,
               showClose && "rotate-90"
             ),
-            children: renderIcon(glyph, glyphSize)
+            children: renderIcon2(glyph, glyphSize)
           }
         ),
         variant === "pill" && /* @__PURE__ */ jsx("span", { children: label }),
@@ -8996,7 +9161,7 @@ function Launcher({
             children: label
           }
         ),
-        ribbonOverlayClose && /* @__PURE__ */ jsx("span", { "data-launcher-close": "", className: cn("absolute inset-0 inline-flex items-center justify-center", accentGlyph && ACCENT_GLYPH), children: renderIcon("close", glyphSize) }),
+        ribbonOverlayClose && /* @__PURE__ */ jsx("span", { "data-launcher-close": "", className: cn("absolute inset-0 inline-flex items-center justify-center", accentGlyph && ACCENT_GLYPH), children: renderIcon2("close", glyphSize) }),
         badge && !showClose && // A ribbon is flush to the viewport edge, so its badge hangs off the inner corner instead.
         /* @__PURE__ */ jsx("span", { className: "absolute", style: badgeStyle, "data-testid": "launcher-badge", children: typeof badge === "number" ? /* @__PURE__ */ jsx(Badge, { variant: "error", size: "xs", children: badge > 99 ? "99+" : badge }) : /* @__PURE__ */ jsx("span", { className: "block h-ds-2.5 w-ds-2.5 rounded-[var(--ds-radius-full)] bg-[var(--ds-status-error)] ring-2 ring-[var(--ds-bg-surface)]" }) })
       ]
@@ -10009,7 +10174,7 @@ var Sidebar = forwardRef(function Sidebar2({
   mini = false,
   type = "traditional",
   position = "flush",
-  navbarFloating,
+  navbarFloating: navbarFloatingProp,
   navSize = "md",
   fill = false,
   className
@@ -10019,6 +10184,11 @@ var Sidebar = forwardRef(function Sidebar2({
   const portalRef = useCallback((node) => setPortalEl(node), []);
   const isControlled = controlledCollapsed !== void 0;
   const appShell = useAppShell();
+  const navbarFloating = navbarFloatingProp ?? appShell?.navbarFloating;
+  useLayoutEffect(() => {
+    if (fill || !appShell) return;
+    return appShell.registerChrome("sidebar", position);
+  }, [appShell?.registerChrome, fill, position]);
   const usesShellState = appShell !== null && !isControlled && defaultCollapsed === void 0 && !fill && type === "traditional";
   const uncontrolledCollapsed = usesShellState ? appShell.sidebarCollapsed : internalCollapsed;
   const collapsed = mini || (isControlled ? controlledCollapsed : uncontrolledCollapsed);
@@ -10772,9 +10942,164 @@ function NavButton({ item, onClick }) {
     }
   );
 }
-function TruncHeading({ as: Tag3 = "h1", className, children }) {
-  const { ref, isTruncated } = useTextOverflow({ lines: 1 });
-  const heading = /* @__PURE__ */ jsx(Tag3, { ref, className: cn("truncate", className), children });
+
+// ../../showcase/src/lib/shell-theme.ts
+var PAGE_HEADER_MARK = /* @__PURE__ */ Symbol.for("gridsmith.PageHeader");
+function resolvePageHeader(theme, props, facts) {
+  const t = theme?.pageHeader ?? {};
+  const themeVariant = t.variant ?? "default";
+  const homeOnlyElsewhere = themeVariant === "colourful" && !!t.colourfulHomeOnly && !facts.isHome;
+  const variant = props.variant ?? (homeOnlyElsewhere ? t.otherPagesVariant ?? "default" : themeVariant);
+  const behavior = props.behavior ?? t.behavior ?? "static";
+  const position = props.position ?? t.position ?? "flush";
+  const intensity = props.intensity ?? t.intensity ?? "bold";
+  const b = theme?.breadcrumbs ?? {};
+  const navbarFloating = props.navbarFloating ?? facts.navbarFloating;
+  const sidebarFloating = (props.sidebarFloating ?? facts.sidebarFloating) && !facts.isMobile;
+  return {
+    variant,
+    behavior,
+    position,
+    intensity,
+    breadcrumbPosition: b.position ?? "inline",
+    breadcrumbStyle: props.breadcrumbStyle ?? b.style ?? "default",
+    breadcrumbSeparator: props.breadcrumbSeparator ?? b.separator ?? "chevron",
+    navbarFloating,
+    sidebarFloating,
+    outside: variant === "colourful" || behavior === "snapping" || position === "floating"
+  };
+}
+var maxWidthValues = {
+  sm: "var(--ds-bp-sm)",
+  md: "var(--ds-bp-md)",
+  lg: "var(--ds-bp-lg)",
+  xl: "var(--ds-bp-xl)",
+  full: "100%"
+};
+var widthToMaxWidth = {
+  constrained: "xl",
+  full: "full",
+  narrow: "md"
+};
+var paddingClasses = {
+  none: "",
+  default: "px-ds-6",
+  wide: "px-ds-10"
+};
+var verticalPaddingClasses = {
+  none: "",
+  default: "pt-ds-8 pb-ds-12",
+  spacious: "pt-ds-8 pb-ds-16"
+};
+var bottomPaddingClasses = {
+  none: "",
+  default: "pb-ds-12",
+  spacious: "pb-ds-16"
+};
+var FLOATING_BLOCK = cn(
+  "rounded-[var(--ds-radius-md)]",
+  "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+  GLASS_SURFACE,
+  "overflow-hidden"
+);
+var PageContainerContext = createContext(null);
+function usePageContainer() {
+  return useContext(PageContainerContext);
+}
+function isPageHeaderElement(node) {
+  if (!isValidElement(node)) return false;
+  const type = node.type;
+  return !!type && typeof type !== "string" && type[PAGE_HEADER_MARK] === true;
+}
+function floatingBlockPadding(navbarFloating, sidebarFloating, overlap) {
+  return {
+    paddingTop: navbarFloating ? 0 : "var(--ds-space-3)",
+    paddingRight: "var(--ds-space-3)",
+    paddingBottom: overlap ? 0 : "var(--ds-space-3)",
+    paddingLeft: sidebarFloating ? 0 : "var(--ds-space-3)",
+    marginBottom: overlap ? 0 : "var(--ds-space-3)"
+  };
+}
+var PageContainer = forwardRef(function PageContainer2({
+  width,
+  maxWidth = "xl",
+  padding = "default",
+  verticalPadding,
+  centered = true,
+  children,
+  className,
+  renderHeader
+}, ref) {
+  const shell = useAppShell();
+  const resolvedMaxWidth = width ? widthToMaxWidth[width] : maxWidth;
+  const maxWidthValue = maxWidthValues[resolvedMaxWidth];
+  const kids = Children.toArray(children);
+  const headerIdx = kids.findIndex(isPageHeaderElement);
+  if (headerIdx === -1) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full",
+          paddingClasses[padding],
+          verticalPaddingClasses[verticalPadding ?? "default"],
+          centered && "mx-auto",
+          className
+        ),
+        style: { maxWidth: maxWidthValue, containerType: "inline-size" },
+        children
+      }
+    );
+  }
+  const headerEl = kids[headerIdx];
+  const rest = kids.filter((_, i) => i !== headerIdx);
+  const r = resolvePageHeader(shell?.theme, headerEl.props, {
+    isHome: shell?.isHome ?? false,
+    isMobile: shell?.isMobile ?? false,
+    navbarFloating: shell?.navbarFloating ?? false,
+    sidebarFloating: shell?.sidebarFloating ?? false
+  });
+  const snapping = r.behavior === "snapping";
+  const floatingHeader = r.position === "floating";
+  const colourful = r.variant === "colourful";
+  const crumbs = Array.isArray(headerEl.props.breadcrumbs) && headerEl.props.breadcrumbs.length > 0 ? headerEl.props.breadcrumbs : null;
+  const contained = r.breadcrumbPosition === "contained" && !!crumbs;
+  const block = floatingHeader && contained && !snapping;
+  const placement = block ? "block" : r.outside ? "outside" : "inside";
+  const breadcrumbsInsideHeader = snapping && floatingHeader && contained;
+  const overlap = colourful && typeof headerEl.props.overlapHeight === "number" && headerEl.props.overlapHeight > 0 ? headerEl.props.overlapHeight : 0;
+  const strip = contained && !breadcrumbsInsideHeader && crumbs ? (
+    // The strip is the whole trail: the path, then this page as the current item (Breadcrumbs renders the last item as text).
+    /* @__PURE__ */ jsx(Breadcrumbs, { variant: "contained", itemVariant: r.breadcrumbStyle, bleed: true, contentMaxWidth: maxWidthValue, separator: r.breadcrumbSeparator, items: headerEl.props.title ? [...crumbs, { label: headerEl.props.title }] : crumbs })
+  ) : null;
+  const columnClass = (pad2) => cn("w-full", paddingClasses[pad2], centered && "mx-auto");
+  const columnStyle = { maxWidth: maxWidthValue, containerType: "inline-size" };
+  const header = /* @__PURE__ */ jsx(PageContainerContext, { value: { contentMaxWidth: maxWidthValue, placement, containedBreadcrumbs: contained, breadcrumbsInsideHeader, noBottomMargin: block }, children: renderHeader ? renderHeader(headerEl) : headerEl });
+  const contentPadding = floatingHeader && shell?.isMobile ? "none" : padding;
+  const wrapperStyle = floatingHeader || overlap ? {
+    ...floatingHeader ? { paddingRight: "var(--ds-space-3)", paddingLeft: r.sidebarFloating ? 0 : "var(--ds-space-3)" } : {},
+    ...overlap ? { marginTop: -overlap, position: "relative", zIndex: 1 } : {}
+  } : void 0;
+  const column = /* @__PURE__ */ jsx("div", { className: cn(columnClass(contentPadding), bottomPaddingClasses[verticalPadding ?? "default"], className), style: columnStyle, children: rest });
+  return /* @__PURE__ */ jsxs("div", { ref, "data-page-container": "", className: "w-full", children: [
+    placement === "block" ? /* @__PURE__ */ jsx("div", { style: floatingBlockPadding(r.navbarFloating, r.sidebarFloating, overlap > 0), children: /* @__PURE__ */ jsxs("div", { className: FLOATING_BLOCK, children: [
+      strip,
+      colourful ? header : /* @__PURE__ */ jsx("div", { className: columnClass(padding), style: columnStyle, children: header })
+    ] }) }) : placement === "outside" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      strip,
+      header
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      strip,
+      /* @__PURE__ */ jsx("div", { className: columnClass(padding), style: columnStyle, children: header })
+    ] }),
+    wrapperStyle ? /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: column }) : column
+  ] });
+});
+function TruncHeading({ as: Tag3 = "h1", className, children, lines: linesProp }) {
+  const lines = linesProp ?? (Tag3 === "h1" ? 2 : 1);
+  const { ref, isTruncated } = useTextOverflow({ lines });
+  const heading = /* @__PURE__ */ jsx(Tag3, { ref, className: cn(lines === 2 ? "line-clamp-2" : "truncate", className), children });
   if (!isTruncated) return heading;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: heading });
 }
@@ -10895,30 +11220,49 @@ var PageHeader = forwardRef(function PageHeader2({
   bannerImage,
   as: Heading = "h1",
   className,
-  variant = "default",
-  behavior = "static",
-  intensity = "bold",
+  variant: variantProp,
+  behavior: behaviorProp,
+  intensity: intensityProp,
   backgroundImage,
   overlapHeight,
   expandedContent,
   collapseOffset = 100,
   pinned = true,
-  contentMaxWidth,
+  contentMaxWidth: contentMaxWidthProp,
   tabs,
   breadcrumbStyle,
   breadcrumbSeparator,
-  hideExpandedBreadcrumbs,
-  position = "flush",
-  navbarFloating,
-  sidebarFloating,
-  noBottomMargin,
-  containedBreadcrumbs
+  hideExpandedBreadcrumbs: hideExpandedBreadcrumbsProp,
+  position: positionProp,
+  navbarFloating: navbarFloatingProp,
+  sidebarFloating: sidebarFloatingProp,
+  noBottomMargin: noBottomMarginProp,
+  containedBreadcrumbs: containedBreadcrumbsProp
 }, ref) {
-  const isFloating = position === "floating";
   const shell = useAppShell();
+  const container = usePageContainer();
+  const r = resolvePageHeader(shell?.theme, {
+    variant: variantProp,
+    behavior: behaviorProp,
+    position: positionProp,
+    intensity: intensityProp,
+    breadcrumbStyle,
+    breadcrumbSeparator,
+    navbarFloating: navbarFloatingProp,
+    sidebarFloating: sidebarFloatingProp
+  }, { isHome: shell?.isHome ?? false, isMobile: shell?.isMobile ?? false, navbarFloating: shell?.navbarFloating ?? false, sidebarFloating: shell?.sidebarFloating ?? false });
+  const { variant, behavior, position, intensity, navbarFloating, sidebarFloating } = r;
+  const isFloating = position === "floating";
   const asideFloatingSide = shell?.asideOpen && shell.asideFloating ? shell.asideSide : null;
-  const bcPill = breadcrumbStyle === "pill";
-  const bcSep = breadcrumbSeparator ?? "chevron";
+  const bcPill = r.breadcrumbStyle === "pill";
+  const bcSep = r.breadcrumbSeparator;
+  const contentMaxWidth = contentMaxWidthProp ?? container?.contentMaxWidth;
+  const stickyTop = shell ? "top-0" : "top-[var(--ds-navbar-height)]";
+  const snapping = behavior === "snapping";
+  const inlineBreadcrumbs = container?.containedBreadcrumbs && !snapping ? void 0 : breadcrumbs;
+  const hideExpandedBreadcrumbs = hideExpandedBreadcrumbsProp ?? (!!container?.containedBreadcrumbs && snapping);
+  const containedBreadcrumbs = containedBreadcrumbsProp ?? (container?.breadcrumbsInsideHeader && breadcrumbs?.length ? /* @__PURE__ */ jsx(Breadcrumbs, { variant: "contained", itemVariant: r.breadcrumbStyle, bleed: true, contentMaxWidth, separator: bcSep, items: [...breadcrumbs, { label: title }] }) : void 0);
+  const noBottomMargin = noBottomMarginProp ?? container?.noBottomMargin;
   if (behavior === "snapping") {
     return /* @__PURE__ */ jsx(
       SnappingHeader,
@@ -10926,7 +11270,7 @@ var PageHeader = forwardRef(function PageHeader2({
         title,
         description,
         badge,
-        breadcrumbs,
+        breadcrumbs: inlineBreadcrumbs,
         onBack,
         actions,
         avatar,
@@ -10945,6 +11289,7 @@ var PageHeader = forwardRef(function PageHeader2({
         hideExpandedBreadcrumbs,
         as: Heading,
         className,
+        stickyTop,
         isFloating,
         navbarFloating,
         sidebarFloating,
@@ -10955,7 +11300,7 @@ var PageHeader = forwardRef(function PageHeader2({
   }
   let header;
   if (variant === "minimal") {
-    header = /* @__PURE__ */ jsx(MinimalHeader, { title, badge, breadcrumbs, actions, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: isFloating ? void 0 : ref, isFloating, contentMaxWidth });
+    header = /* @__PURE__ */ jsx(MinimalHeader, { title, badge, breadcrumbs: inlineBreadcrumbs, actions, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: isFloating ? void 0 : ref, isFloating, contentMaxWidth });
   } else if (variant === "tabs-integrated") {
     header = /* @__PURE__ */ jsx(
       TabsIntegratedHeader,
@@ -10963,7 +11308,7 @@ var PageHeader = forwardRef(function PageHeader2({
         title,
         description,
         badge,
-        breadcrumbs,
+        breadcrumbs: inlineBreadcrumbs,
         onBack,
         actions,
         avatar,
@@ -10984,7 +11329,7 @@ var PageHeader = forwardRef(function PageHeader2({
         title,
         description,
         badge,
-        breadcrumbs,
+        breadcrumbs: inlineBreadcrumbs,
         onBack,
         actions,
         avatar,
@@ -11009,7 +11354,7 @@ var PageHeader = forwardRef(function PageHeader2({
         title,
         description,
         badge,
-        breadcrumbs,
+        breadcrumbs: inlineBreadcrumbs,
         onBack,
         actions,
         avatar,
@@ -11038,6 +11383,7 @@ var PageHeader = forwardRef(function PageHeader2({
   }
   return header;
 });
+Object.assign(PageHeader, { [PAGE_HEADER_MARK]: true });
 function floatingContentProps(isFloating, contentMaxWidth, extraClassName) {
   if (!isFloating) return { className: extraClassName, style: void 0 };
   return {
@@ -11131,7 +11477,7 @@ function MinimalHeader({
     hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
     /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-ds-4", hasBreadcrumbs && "mt-ds-0.5"), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 min-w-0", children: [
-        /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: "font-[family-name:var(--ds-font-display)] text-xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
+        /* @__PURE__ */ jsx(TruncHeading, { as: Heading, lines: 1, className: "font-[family-name:var(--ds-font-display)] text-xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
         badge
       ] }),
       actions && /* @__PURE__ */ jsx(ButtonSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
@@ -11264,7 +11610,8 @@ function SnappingHeader({
   navbarFloating,
   sidebarFloating,
   containedBreadcrumbs,
-  headerRef
+  headerRef,
+  stickyTop = "top-[var(--ds-navbar-height)]"
 }) {
   const [collapsed, setCollapsed] = useState(false);
   const sentinelRef = useRef(null);
@@ -11338,7 +11685,7 @@ function SnappingHeader({
       ref: !isFloating ? headerRef : void 0,
       className: cn(
         "transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
-        !isFloating && pinned && collapsed && "sticky top-[var(--ds-navbar-height)] z-[calc(var(--ds-z-sticky,40)-1)]",
+        !isFloating && pinned && collapsed && cn("sticky", stickyTop, "z-[calc(var(--ds-z-sticky,40)-1)]"),
         collapsed && (isFloating ? cn(FLOATING_HEADER, "bg-[var(--ds-bg-surface)]") : ["bg-[var(--ds-bg-surface)]", GLASS_BACKDROP, "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", "shadow-[var(--ds-shadow-sm)]"]),
         !collapsed && isColourful && (isFloating && !wrapperHasCard ? [
           "relative overflow-hidden",
@@ -11432,7 +11779,7 @@ function SnappingHeader({
                             }
                           );
                         })(),
-                        /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: cn(
+                        /* @__PURE__ */ jsx(TruncHeading, { as: Heading, lines: collapsed ? 1 : void 0, className: cn(
                           "font-[family-name:var(--ds-font-display)] font-[var(--ds-weight-heading)]",
                           collapsed ? "text-lg text-[var(--ds-text-primary)]" : cn("text-3xl", onLight ? "text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)]")
                         ), children: title }),
@@ -11777,6 +12124,7 @@ var Navbar = forwardRef(function Navbar2({
   onMenuClick
 }, ref) {
   const appShell = useAppShell();
+  useLayoutEffect(() => appShell?.registerChrome("navbar", position), [appShell?.registerChrome, position]);
   const isSmallPhone = appShell?.isMobile && !appShell.isTablet;
   const showHamburger = appShell?.isMobile && appShell.hasMobileMenu && !(isSmallPhone && appShell.hasMobileNav) || !!onMenuClick;
   const handleHamburger = () => onMenuClick ? onMenuClick() : appShell?.setSidebarOpen(!appShell.sidebarOpen);
@@ -13192,7 +13540,7 @@ var TOAST_POSITION_CLASSES = {
   "top-center": "top-ds-4 left-1/2 -translate-x-1/2",
   "bottom-center": "bottom-ds-4 left-1/2 -translate-x-1/2"
 };
-function Toast({ variant = "default", message, visible, onDismiss, duration = 3e3, pauseOnHover = false, action, position = "bottom-right", mode, container, inline = false }) {
+function Toast({ variant = "default", message, visible, onDismiss, duration = 5e3, pauseOnHover = false, action, position = "bottom-right", mode, container, inline = false }) {
   const isMobile = useBreakpoint("sm");
   const isCentered = position === "top-center" || position === "bottom-center";
   const timerRef = useRef(void 0);
@@ -13295,7 +13643,7 @@ function useToast() {
   return ctx;
 }
 var toastSeq = 0;
-function ToastProvider({ children, maxVisible = 3, position = "bottom-right", duration = 3e3, mode, pauseOnHover = true }) {
+function ToastProvider({ children, maxVisible = 1, position = "bottom-right", duration = 5e3, mode, pauseOnHover = true }) {
   const [queue, setQueue] = useState([]);
   const isMobile = useBreakpoint("sm");
   const dismiss = useCallback((id) => {
@@ -13371,54 +13719,6 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
     )
   ] });
 }
-var maxWidthValues = {
-  sm: "var(--ds-bp-sm)",
-  md: "var(--ds-bp-md)",
-  lg: "var(--ds-bp-lg)",
-  xl: "var(--ds-bp-xl)",
-  full: "100%"
-};
-var widthToMaxWidth = {
-  constrained: "xl",
-  full: "full",
-  narrow: "md"
-};
-var paddingClasses = {
-  none: "",
-  default: "px-ds-6",
-  wide: "px-ds-10"
-};
-var verticalPaddingClasses = {
-  none: "",
-  default: "pt-ds-8 pb-ds-12",
-  spacious: "pt-ds-8 pb-ds-16"
-};
-var PageContainer = forwardRef(function PageContainer2({
-  width,
-  maxWidth = "xl",
-  padding = "default",
-  verticalPadding = "default",
-  centered = true,
-  children,
-  className
-}, ref) {
-  const resolvedMaxWidth = width ? widthToMaxWidth[width] : maxWidth;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        "w-full",
-        paddingClasses[padding],
-        verticalPaddingClasses[verticalPadding],
-        centered && "mx-auto",
-        className
-      ),
-      style: { maxWidth: maxWidthValues[resolvedMaxWidth], containerType: "inline-size" },
-      children
-    }
-  );
-});
 var SectionHeading = forwardRef(function SectionHeading2({
   title,
   description,
@@ -13546,6 +13846,6 @@ var TextOverflow = forwardRef(function TextOverflow2({
   return /* @__PURE__ */ jsx(Tooltip, { content: resolvedTooltipContent, children: content });
 });
 
-export { Accordion, ActionPanel, ActionPanelGroup, Alert, AppShell, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Button, ButtonSizeContext, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Drawer, Dropdown, DropdownMenu, EmptyState, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, Sheet, Sidebar, SidebarNav, SliderRange, Spinner, StackedList, StatsCard, StatusDot, Stepper, Table, Tabs, Tag, TagInput, TextOverflow, Textarea, TimePicker, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, useAppShell, useFormContext, useSidebar, useToast };
+export { Accordion, ActionPanel, ActionPanelGroup, Alert, AppShell, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Button, ButtonSizeContext, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Drawer, Dropdown, DropdownMenu, EmptyState, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, Sheet, Sidebar, SidebarNav, SkipLink, SliderRange, Spinner, StackedList, StatsCard, StatusDot, Stepper, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimePicker, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, useAppShell, useFormContext, useSidebar, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map