@dxos/ui-theme 0.8.4-main.69d29f4 → 0.8.4-main.8342792842

package/dist/lib/browser/index.mjs

@@ -7,7 +7,14 @@ import defaultConfig from "tailwindcss/stubs/config.full.js";
 import tailwindcssLogical from "tailwindcss-logical";
 import tailwindcssRadix from "tailwindcss-radix";
 
-// src/config/tokens/index.ts
+// src/config/tokens/sizes.ts
+var cardMinInlineSize = 18;
+var cardDefaultInlineSize = 20;
+var cardMaxInlineSize = 22;
+var cardMinBlockSize = 18;
+var cardMaxBlockSize = 30;
+
+// src/config/tokens/tokens.ts
 import adapter from "@ch-ui/tailwind-tokens";
 
 // src/config/tokens/physical-colors.ts
@@ -472,6 +479,11 @@ var systemSememes = {
   separatorGroup: contrastCadence(3, 2.5),
   separatorModal: contrastCadence(3, 3),
   subduedSeparator: contrastCadence(3, 1),
+  scrollbarTrack: contrastCadence(0),
+  scrollbarThumbSubdued: contrastCadence(1, 1),
+  scrollbarThumb: contrastCadence(2.5, 2.5),
+  scrollbarThumbHover: contrastCadence(3.5, 3.5),
+  scrollbarThumbActive: contrastCadence(4.5, 4.5),
   unAccent: {
     light: [
       "neutral",
@@ -787,11 +799,6 @@ var aliasColors = {
   namespace: "dx-"
 };
 
-// src/config/tokens/sizes.ts
-var cardMinInlineSize = 18;
-var cardDefaultInlineSize = 20;
-var cardMaxInlineSize = 22;
-
 // src/config/tokens/lengths.ts
 var lengthsFacet = {
   physical: {
@@ -922,6 +929,16 @@ var lengthsFacet = {
           "gridFocusIndicatorWidth"
         ]
       },
+      inputFine: {
+        fine: [
+          "iconButtonPadding"
+        ]
+      },
+      inputCoarse: {
+        coarse: [
+          "iconButtonPadding"
+        ]
+      },
       trimXs: {
         fine: [
           "cardSpacingChrome",
@@ -929,6 +946,7 @@ var lengthsFacet = {
           "inputSpacingBlock"
         ]
       },
+      // TODO(burdon): Remove?
       trimSm: {
         fine: [
           "cardSpacingInline",
@@ -942,16 +960,6 @@ var lengthsFacet = {
           "cardSpacingBlock",
           "cardSpacingGap"
         ]
-      },
-      inputFine: {
-        fine: [
-          "iconButtonPadding"
-        ]
-      },
-      inputCoarse: {
-        coarse: [
-          "iconButtonPadding"
-        ]
       }
     }
   }
@@ -994,12 +1002,6 @@ var maxSizesFacet = {
           50
         ]
       },
-      "popover-max-width": {
-        root: [
-          "size",
-          cardDefaultInlineSize
-        ]
-      },
       "card-default-width": {
         root: [
           "size",
@@ -1017,6 +1019,18 @@ var maxSizesFacet = {
           "size",
           cardMaxInlineSize
         ]
+      },
+      "card-min-height": {
+        root: [
+          "size",
+          cardMinBlockSize
+        ]
+      },
+      "card-max-height": {
+        root: [
+          "size",
+          cardMaxBlockSize
+        ]
       }
     }
   }
@@ -1173,7 +1187,7 @@ var semanticColors = {
   namespace: "dx-"
 };
 
-// src/config/tokens/index.ts
+// src/config/tokens/tokens.ts
 var hues = Object.keys(huePalettes);
 var tokenSet = {
   colors: {
@@ -1266,12 +1280,13 @@ var tailwindConfig = ({ env = "production", content = [], extensions = [] }) =>
     extend: merge({
       // Generates is-card-default-width, is-card-min-width, etc.
       spacing: {
+        "prose-max-width": "var(--dx-prose-max-width)",
+        "container-max-width": "var(--dx-container-max-width)",
         "card-default-width": "var(--dx-card-default-width)",
         "card-min-width": "var(--dx-card-min-width)",
         "card-max-width": "var(--dx-card-max-width)",
-        "container-max-width": "var(--dx-container-max-width)",
-        "popover-max-width": "var(--dx-popover-max-width)",
-        "prose-max-width": "var(--dx-prose-max-width)"
+        "card-min-height": "var(--dx-card-min-height)",
+        "card-max-height": "var(--dx-card-max-height)"
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
@@ -1605,135 +1620,6 @@ var tailwindConfig = ({ env = "production", content = [], extensions = [] }) =>
   }
 });
 
-// src/styles/fragments/density.ts
-var coarseBlockSize = "min-bs-[2.5rem]";
-var coarseTextPadding = "pli-3";
-var coarseButtonPadding = "pli-4";
-var coarseDimensions = `${coarseBlockSize} ${coarseTextPadding}`;
-var coarseButtonDimensions = `${coarseBlockSize} ${coarseButtonPadding}`;
-var fineBlockSize = "min-bs-[2.5rem] pointer-fine:min-bs-[2rem]";
-var fineTextPadding = "pli-2";
-var fineButtonPadding = "pli-2.5";
-var fineDimensions = `${fineBlockSize} ${fineTextPadding}`;
-var fineButtonDimensions = `${fineBlockSize} ${fineButtonPadding}`;
-var densityBlockSize = (density = "coarse") => density === "fine" ? fineBlockSize : coarseBlockSize;
-
-// src/styles/fragments/disabled.ts
-var staticDisabled = "opacity-40 cursor-not-allowed shadow-none";
-var dataDisabled = "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed";
-
-// src/styles/fragments/dimension.ts
-var textBlockWidth = "is-full mli-auto max-is-[--text-content]";
-
-// src/styles/fragments/elevation.ts
-var contentShadow = (_) => [
-  "shadow-none"
-];
-var surfaceShadow = ({ elevation }) => [
-  elevation === "positioned" ? "shadow" : elevation === "dialog" || elevation === "toast" ? "shadow-md" : "shadow-none"
-];
-var surfaceZIndex = ({ level, elevation }) => {
-  switch (level) {
-    case "tooltip":
-      return elevation === "dialog" ? [
-        "z-[53]"
-      ] : elevation === "toast" ? [
-        "z-[43]"
-      ] : [
-        "z-30"
-      ];
-    case "menu":
-      return elevation === "dialog" ? [
-        "z-[52]"
-      ] : elevation === "toast" ? [
-        "z-[42]"
-      ] : [
-        "z-20"
-      ];
-    default:
-      return elevation === "dialog" ? [
-        "z-[51]"
-      ] : elevation === "toast" ? [
-        "z-[41]"
-      ] : [
-        "z-[1]"
-      ];
-  }
-};
-
-// src/styles/fragments/focus.ts
-var focusRing = "dx-focus-ring";
-var dropRing = "ring-1 ring-offset-0 ring-primary-350 ring-offset-white dark:ring-primary-450 dark:ring-offset-black";
-var dropRingInner = "before:z-[1] before:absolute before:inset-0 before:ring-1 before:ring-inset before:ring-primary-350 before:dark:ring-primary-450";
-var subduedFocus = "focus:outline-none focus-visible:outline-none focus:ring-0 ring-0 focus:border-0 border-0";
-var staticFocusRing = "ring-2 ring-offset-0 ring-primary-350 ring-offset-white dark:ring-primary-450 dark:ring-offset-black";
-
-// src/styles/fragments/group.ts
-var group = (props) => [
-  props.elevation === "base" ? "bg-transparent border border-separator" : "bg-modalSurface",
-  surfaceShadow(props)
-];
-
-// src/styles/fragments/hover.ts
-var hoverColors = "transition-colors duration-100 linear hover:bg-hoverSurface";
-var ghostHover = "hover:bg-hoverSurface";
-var ghostFocusWithin = "focus-within:bg-hoverSurface";
-var subtleHover = "hover:bg-hoverOverlay";
-var hoverableControls = "[--controls-opacity:1] hover-hover:[--controls-opacity:0] hover-hover:hover:[--controls-opacity:1]";
-var groupHoverControlItemWithTransition = "transition-opacity duration-200 opacity-0 group-hover:opacity-100";
-var hoverableFocusedKeyboardControls = "focus-visible:[--controls-opacity:1]";
-var hoverableFocusedWithinControls = "focus-within:[--controls-opacity:1]";
-var hoverableFocusedControls = "focus:[--controls-opacity:1]";
-var hoverableOpenControlItem = "hover-hover:aria-[expanded=true]:[--controls-opacity:1]";
-var hoverableControlItem = "opacity-[--controls-opacity]";
-var hoverableControlItemTransition = "transition-opacity duration-200";
-var staticHoverableControls = "hover-hover:[--controls-opacity:1]";
-
-// src/styles/fragments/layout.ts
-var bounceLayout = "fixed inset-0 z-0 overflow-auto overscroll-auto";
-var fixedInsetFlexLayout = "flex flex-col fixed inset-0 overflow-hidden overscroll-none";
-
-// src/styles/fragments/motion.ts
-var popperMotion = "will-change-[opacity,transform] data-[side=top]:animate-slide-down-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade";
-
-// src/styles/fragments/ornament.ts
-var separatorBorderColor = "border-separator";
-var subduedSeparatorBorderColor = "border-subduedSeparator";
-var inlineSeparator = "self-stretch border-ie mli-1";
-var blockSeparator = "self-stretch border-be mlb-1";
-
-// src/styles/fragments/selected.ts
-var ghostSelectedCurrent = [
-  ghostHover,
-  "aria-[current]:bg-inputSurface hover:aria-[current]:bg-hoverSurface",
-  "aria-selected:bg-primary-100 dark:aria-selected:bg-primary-850 hover:aria-selected:bg-primary-150 hover:dark:aria-selected:bg-primary-800",
-  "aria-[current]:aria-selected:bg-primary-200 dark:aria-[current]:aria-selected:bg-primary-750 hover:aria-[current]:aria-selected:bg-primary-200 hover:dark:aria-[current]:aria-selected:bg-primary-750"
-];
-var ghostHighlighted = "data-[highlighted]:bg-primary-100 dark:data-[highlighted]:bg-primary-600 hover:data-[highlighted]:bg-primary-150 hover:dark:data-[highlighted]:bg-primary-500";
-var ghostSelectedTrackingInterFromNormal = "tracking-[0.0092em]";
-var ghostSelected = "aria-selected:bg-baseSurface aria-selected:text-accentText hover:aria-selected:text-accentTextHover aria-selected:font-semibold aria-selected:tracking-normal transition-[color,font-variation-settings,letter-spacing]";
-var ghostSelectedContainerMd = "@md:aria-selected:bg-baseSurface @md:aria-selected:text-accentText @md:hover:aria-selected:text-accentTextHover @md:aria-selected:font-semibold @md:aria-selected:tracking-normal @md:transition-[color,font-variation-settings,letter-spacing]";
-var staticGhostSelectedCurrent = ({ current, selected }) => [
-  current && selected ? "bg-primary-200 dark:bg-primary-750 hover:bg-primary-200 hover:dark:bg-primary-750" : current ? "bg-inputSurface hover:bg-hoverSurface" : selected ? "bg-primary-100 dark:bg-primary-850 hover:bg-primary-150 hover:dark:bg-primary-800" : ghostHover
-];
-var staticGhostSelected = ({ selected }) => selected ? [
-  "bg-primary-200 dark:bg-primary-750"
-] : [];
-
-// src/styles/fragments/shimmer.ts
-var shimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/10 before:to-transparent isolate overflow-hidden";
-var strongShimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-primary-100/80 before:to-transparent isolate overflow-hidden";
-
-// src/styles/fragments/surface.ts
-var baseSurface = "base-surface";
-var sidebarSurface = "sidebar-surface backdrop-blur-md dark:backdrop-blur-lg";
-var sidebarBorder = "border-separator";
-var activeSurface = "base-surface";
-var groupBorder = "border-separator";
-var modalSurface = "modal-surface backdrop-blur-md";
-var attentionSurface = "attention-surface";
-var accentSurface = "bg-accentSurface text-accentSurfaceText";
-
 // src/util/hash-styles.ts
 var neutralColor = {
   hue: "neutral",
@@ -2334,6 +2220,143 @@ var mx = extendTailwindMerge({
   }
 }, withLogical);
 
+// src/styles/components/anchored-overflow.ts
+var anchoredOverflowRoot = (_props, ...etc) => mx("overflow-anchored overflow-auto", ...etc);
+var anchoredOverflowAnchor = (_props, ...etc) => mx("overflow-anchor is-px bs-px", ...etc);
+var anchoredOverflowTheme = {
+  root: anchoredOverflowRoot,
+  anchor: anchoredOverflowAnchor
+};
+
+// src/styles/fragments/density.ts
+var coarseBlockSize = "min-bs-[2.5rem]";
+var coarseTextPadding = "pli-3";
+var coarseButtonPadding = "pli-4";
+var coarseDimensions = `${coarseBlockSize} ${coarseTextPadding}`;
+var coarseButtonDimensions = `${coarseBlockSize} ${coarseButtonPadding}`;
+var fineBlockSize = "min-bs-[2.5rem] pointer-fine:min-bs-[2rem]";
+var fineTextPadding = "pli-2";
+var fineButtonPadding = "pli-2.5";
+var fineDimensions = `${fineBlockSize} ${fineTextPadding}`;
+var fineButtonDimensions = `${fineBlockSize} ${fineButtonPadding}`;
+var densityBlockSize = (density = "coarse") => density === "fine" ? fineBlockSize : coarseBlockSize;
+
+// src/styles/fragments/disabled.ts
+var staticDisabled = "opacity-40 cursor-not-allowed shadow-none";
+var dataDisabled = "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed";
+
+// src/styles/fragments/dimension.ts
+var textBlockWidth = "is-full mli-auto max-is-[--text-content]";
+
+// src/styles/fragments/elevation.ts
+var contentShadow = (_) => [
+  "shadow-none"
+];
+var surfaceShadow = ({ elevation }) => [
+  elevation === "positioned" ? "shadow" : elevation === "dialog" || elevation === "toast" ? "shadow-md" : "shadow-none"
+];
+var surfaceZIndex = ({ level, elevation }) => {
+  switch (level) {
+    case "tooltip":
+      return elevation === "dialog" ? [
+        "z-[53]"
+      ] : elevation === "toast" ? [
+        "z-[43]"
+      ] : [
+        "z-30"
+      ];
+    case "menu":
+      return elevation === "dialog" ? [
+        "z-[52]"
+      ] : elevation === "toast" ? [
+        "z-[42]"
+      ] : [
+        "z-20"
+      ];
+    default:
+      return elevation === "dialog" ? [
+        "z-[51]"
+      ] : elevation === "toast" ? [
+        "z-[41]"
+      ] : [
+        "z-[1]"
+      ];
+  }
+};
+
+// src/styles/fragments/focus.ts
+var focusRing = "dx-focus-ring";
+var dropRing = "ring-1 ring-offset-0 ring-primary-350 ring-offset-white dark:ring-primary-450 dark:ring-offset-black";
+var dropRingInner = "before:z-[1] before:absolute before:inset-0 before:ring-1 before:ring-inset before:ring-primary-350 before:dark:ring-primary-450";
+var subduedFocus = "focus:outline-none focus-visible:outline-none focus:ring-0 ring-0 focus:border-0 border-0";
+var staticFocusRing = "ring-2 ring-offset-0 ring-primary-350 ring-offset-white dark:ring-primary-450 dark:ring-offset-black";
+
+// src/styles/fragments/group.ts
+var group = (props) => [
+  props.elevation === "base" ? "bg-transparent border border-separator" : "bg-modalSurface",
+  surfaceShadow(props)
+];
+
+// src/styles/fragments/hover.ts
+var hoverColors = "transition-colors duration-100 linear hover:bg-hoverSurface";
+var ghostHover = "hover:bg-hoverSurface";
+var ghostFocusWithin = "focus-within:bg-hoverSurface";
+var subtleHover = "hover:bg-hoverOverlay";
+var hoverableControls = "[--controls-opacity:1] hover-hover:[--controls-opacity:0] hover-hover:hover:[--controls-opacity:1]";
+var groupHoverControlItemWithTransition = "transition-opacity duration-200 opacity-0 group-hover:opacity-100";
+var hoverableFocusedKeyboardControls = "focus-visible:[--controls-opacity:1]";
+var hoverableFocusedWithinControls = "focus-within:[--controls-opacity:1]";
+var hoverableFocusedControls = "focus:[--controls-opacity:1]";
+var hoverableOpenControlItem = "hover-hover:aria-[expanded=true]:[--controls-opacity:1]";
+var hoverableControlItem = "opacity-[--controls-opacity]";
+var hoverableControlItemTransition = "transition-opacity duration-200";
+var staticHoverableControls = "hover-hover:[--controls-opacity:1]";
+
+// src/styles/fragments/layout.ts
+var bounceLayout = "fixed inset-0 z-0 overflow-auto overscroll-auto";
+var fixedInsetFlexLayout = "flex flex-col fixed inset-0 overflow-hidden overscroll-none";
+
+// src/styles/fragments/motion.ts
+var popperMotion = "will-change-[opacity,transform] data-[side=top]:animate-slide-down-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade";
+
+// src/styles/fragments/ornament.ts
+var separatorBorderColor = "border-separator";
+var subduedSeparatorBorderColor = "border-subduedSeparator";
+var inlineSeparator = "self-stretch border-ie mli-1";
+var blockSeparator = "self-stretch border-be mlb-1";
+
+// src/styles/fragments/selected.ts
+var ghostSelectedCurrent = [
+  ghostHover,
+  "aria-[current]:bg-inputSurface hover:aria-[current]:bg-hoverSurface",
+  "aria-selected:bg-primary-100 dark:aria-selected:bg-primary-850 hover:aria-selected:bg-primary-150 hover:dark:aria-selected:bg-primary-800",
+  "aria-[current]:aria-selected:bg-primary-200 dark:aria-[current]:aria-selected:bg-primary-750 hover:aria-[current]:aria-selected:bg-primary-200 hover:dark:aria-[current]:aria-selected:bg-primary-750"
+];
+var ghostHighlighted = "data-[highlighted]:bg-primary-100 dark:data-[highlighted]:bg-primary-600 hover:data-[highlighted]:bg-primary-150 hover:dark:data-[highlighted]:bg-primary-500";
+var ghostSelectedTrackingInterFromNormal = "tracking-[0.0092em]";
+var ghostSelected = "aria-selected:bg-baseSurface aria-selected:text-accentText hover:aria-selected:text-accentTextHover aria-selected:font-semibold aria-selected:tracking-normal transition-[color,font-variation-settings,letter-spacing]";
+var ghostSelectedContainerMd = "@md:aria-selected:bg-baseSurface @md:aria-selected:text-accentText @md:hover:aria-selected:text-accentTextHover @md:aria-selected:font-semibold @md:aria-selected:tracking-normal @md:transition-[color,font-variation-settings,letter-spacing]";
+var staticGhostSelectedCurrent = ({ current, selected }) => [
+  current && selected ? "bg-primary-200 dark:bg-primary-750 hover:bg-primary-200 hover:dark:bg-primary-750" : current ? "bg-inputSurface hover:bg-hoverSurface" : selected ? "bg-primary-100 dark:bg-primary-850 hover:bg-primary-150 hover:dark:bg-primary-800" : ghostHover
+];
+var staticGhostSelected = ({ selected }) => selected ? [
+  "bg-primary-200 dark:bg-primary-750"
+] : [];
+
+// src/styles/fragments/shimmer.ts
+var shimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/10 before:to-transparent isolate overflow-hidden";
+var strongShimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-primary-100/80 before:to-transparent isolate overflow-hidden";
+
+// src/styles/fragments/surface.ts
+var baseSurface = "base-surface";
+var sidebarSurface = "sidebar-surface backdrop-blur-md dark:backdrop-blur-lg";
+var sidebarBorder = "border-separator";
+var activeSurface = "base-surface";
+var groupBorder = "border-separator";
+var modalSurface = "modal-surface backdrop-blur-md";
+var attentionSurface = "attention-surface";
+var accentSurface = "bg-accentSurface text-accentSurfaceText";
+
 // src/styles/fragments/size.ts
 var sizeWidthMap = /* @__PURE__ */ new Map([
   [
@@ -2700,14 +2723,6 @@ var messageValence = (valence) => {
   }
 };
 
-// src/styles/components/anchored-overflow.ts
-var anchoredOverflowRoot = (_props, ...etc) => mx("overflow-anchored overflow-auto", ...etc);
-var anchoredOverflowAnchor = (_props, ...etc) => mx("overflow-anchor is-px bs-px", ...etc);
-var anchoredOverflowTheme = {
-  root: anchoredOverflowRoot,
-  anchor: anchoredOverflowAnchor
-};
-
 // src/styles/components/avatar.ts
 var avatarRoot = ({ size = 10, inGroup }, ...etc) => mx("relative inline-flex shrink-0", getSize(size), inGroup && (size === "px" || size <= 3 ? "-mie-1" : "-mie-2"), ...etc);
 var avatarLabel = ({ srOnly }, ...etc) => mx(srOnly && "sr-only", ...etc);
@@ -2771,15 +2786,19 @@ var sizeMap = {
 };
 var dialogOverlay = (_props, ...etc) => mx("dx-dialog__overlay", ...etc);
 var dialogContent = ({ inOverlayLayout, size }, ...etc) => {
-  return mx("@container dx-dialog__content dx-focus-ring modal-surface density-coarse is-full gap-2", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", size && sizeMap[size], ...etc);
+  return mx("@container dx-dialog__content dx-focus-ring modal-surface density-coarse is-full gap-4", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", size && sizeMap[size], ...etc);
 };
 var dialogHeader = (_props, ...etc) => mx("dx-dialog__header flex items-center justify-between", ...etc);
+var dialogBody = (_props, ...etc) => mx("dx-dialog__body flex flex-col gap-4 bs-full overflow-hidden", ...etc);
+var dialogActionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center density-coarse", ...etc);
 var dialogTitle = ({ srOnly }, ...etc) => mx("dx-dialog__title", srOnly && "sr-only", ...etc);
 var dialogDescription = ({ srOnly }, ...etc) => mx("dx-dialog__description", descriptionText, srOnly && "sr-only", ...etc);
 var dialogTheme = {
   overlay: dialogOverlay,
   content: dialogContent,
   header: dialogHeader,
+  body: dialogBody,
+  actionbar: dialogActionBar,
   title: dialogTitle,
   description: dialogDescription
 };
@@ -2910,11 +2929,11 @@ var listTheme = {
 // src/styles/components/main.ts
 var topbarBlockPaddingStart = "pbs-[--topbar-size] sticky-top-from-topbar-bottom";
 var bottombarBlockPaddingEnd = "pbe-[--statusbar-size] sticky-bottom-from-statusbar-bottom";
-var mainSidebar = (_, ...etc) => mx("dx-main-sidebar", "dx-focus-ring-inset-over-all", ...etc);
 var mainPadding = "dx-main-content-padding";
 var mainPaddingTransitions = "dx-main-content-padding-transitions";
-var mainContent = ({ bounce }, ...etc) => mx(mainPadding, mainPaddingTransitions, bounce && "dx-main-bounce-layout", "dx-focus-ring-main", ...etc);
 var mainIntrinsicSize = "dx-main-intrinsic-size";
+var mainContent = ({ bounce }, ...etc) => mx(mainPadding, mainPaddingTransitions, bounce && "dx-main-bounce-layout", "dx-focus-ring-main", ...etc);
+var mainSidebar = (_, ...etc) => mx("dx-main-sidebar", "dx-focus-ring-inset-over-all", ...etc);
 var mainOverlay = (_, ...etc) => mx("dx-main-overlay", ...etc);
 var mainTheme = {
   content: mainContent,
@@ -2924,12 +2943,18 @@ var mainTheme = {
 
 // src/styles/components/menu.ts
 var menuViewport = (_props, ...etc) => mx("rounded p-1 max-bs-[--radix-dropdown-menu-content-available-height] overflow-y-auto", ...etc);
-var menuContent = ({ elevation }, ...etc) => mx("is-48 rounded md:is-56 border border-separator", surfaceZIndex({
-  elevation,
-  level: "menu"
-}), surfaceShadow({
-  elevation: "positioned"
-}), modalSurface, popperMotion, ...etc);
+var menuContent = ({ elevation }, ...etc) => mx(
+  "is-48 rounded md:is-56 border border-separator",
+  surfaceZIndex({
+    elevation,
+    level: "menu"
+  }),
+  surfaceShadow({
+    elevation: "positioned"
+  }),
+  modalSurface,
+  ...etc
+);
 var menuItem = (_props, ...etc) => mx("flex cursor-pointer select-none items-center gap-2 rounded-sm pli-2 plb-2 text-sm", "data-[highlighted]:bg-hoverSurface", subduedFocus, dataDisabled, ...etc);
 var menuSeparator = (_props, ...etc) => mx("mlb-1 mli-2 bs-px bg-separator", ...etc);
 var menuGroupLabel = (_props, ...etc) => mx(descriptionText, "select-none pli-2 plb-2", ...etc);
@@ -2964,7 +2989,7 @@ var messageTheme = {
 };
 
 // src/styles/components/popover.ts
-var popoverViewport = ({ constrainBlock, constrainInline }, ...etc) => mx("rounded-md", constrainBlock && "max-bs-[--radix-popover-content-available-height] overflow-y-auto", constrainInline && "max-is-[--radix-popover-content-available-width] overflow-x-auto", ...etc);
+var popoverViewport = ({ constrainBlock, constrainInline }, ...etc) => mx("flex flex-col rounded-md", constrainBlock && "max-bs-[--radix-popover-content-available-height] overflow-hidden", constrainInline && "max-is-[--radix-popover-content-available-width] overflow-hidden", ...etc);
 var popoverContent = ({ elevation }, ...etc) => mx("border border-separator rounded-md", modalSurface, surfaceShadow({
   elevation: "positioned"
 }), surfaceZIndex({
@@ -2979,20 +3004,54 @@ var popoverTheme = {
 };
 
 // src/styles/components/scroll-area.ts
-var scrollAreaRoot = (_props, ...etc) => mx("__bs-full __is-full overflow-hidden", ...etc);
-var scrollAreaViewport = (_props, ...etc) => (
-  // mx('bs-full is-full [&>div]:is-full [&>div]:bs-auto', ...etc);
-  mx("bs-full is-full [&>div]:table-fixed [&>div]:is-full", ...etc)
+var scrollAreaRoot = ({ orientation, margin, thin }, ...etc) => mx(
+  "overflow-hidden",
+  orientation === "vertical" && "group/scroll-v bs-full is-full min-bs-0",
+  orientation === "horizontal" && "group/scroll-h bs-full is-full min-is-0",
+  orientation === "all" && "group/scroll-all bs-full is-full min-bs-0 min-is-0",
+  // Balance left/right, top/bottom "margin" with scrollbar.
+  margin && [
+    orientation === "vertical" && (thin ? "pis-[4px]" : "pis-[8px]"),
+    orientation === "horizontal" && (thin ? "pbs-[4px]" : "pbs-[8px]"),
+    orientation === "all" && (thin ? "pis-[4px] pbs-[8px]" : "pis-[8px] pbs-[8px]")
+  ],
+  ...etc
+);
+var scrollAreaViewport = ({ orientation, autoHide, padding: padding2, snap, thin }, ...etc) => mx(
+  "bs-full is-full",
+  orientation === "vertical" && "flex flex-col overflow-y-scroll",
+  orientation === "horizontal" && "flex overflow-x-scroll",
+  orientation === "all" && "overflow-scroll",
+  thin ? "[&::-webkit-scrollbar]:is-[4px] [&::-webkit-scrollbar]:bs-[4px]" : "[&::-webkit-scrollbar]:is-[8px] [&::-webkit-scrollbar]:bs-[8px]",
+  // '[&::-webkit-scrollbar-thumb]:rounded-full',
+  "[&::-webkit-scrollbar-thumb]:bg-transparent",
+  "[&::-webkit-scrollbar-corner]:bg-transparent",
+  // TODO(burdon): Define token.
+  autoHide ? [
+    orientation === "vertical" && "group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator",
+    orientation === "horizontal" && "group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator",
+    orientation === "all" && "group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator"
+  ] : [
+    orientation === "vertical" && "[&::-webkit-scrollbar-thumb]:bg-subduedSeparator",
+    orientation === "horizontal" && "[&::-webkit-scrollbar-thumb]:bg-subduedSeparator",
+    orientation === "all" && "[&::-webkit-scrollbar-thumb]:bg-subduedSeparator"
+  ],
+  // TODO(burdon): Are scrollbars reserved on native devices?
+  padding2 && [
+    orientation === "vertical" && "pli-[4px]",
+    orientation === "horizontal" && "pbe-[4px]",
+    orientation === "all" && "pis-[4px] pbe-[4px]"
+  ],
+  snap && [
+    orientation === "vertical" && "snap-y snap-mandatory",
+    orientation === "horizontal" && "snap-x snap-mandatory",
+    orientation === "all" && "snap-both snap-mandatory"
+  ],
+  ...etc
 );
-var scrollAreaScrollbar = (_props, ...etc) => mx("flex select-none touch-none p-0.5 ease-out", "data-[orientation=vertical]:is-1.5 sm:data-[orientation=vertical]:data-[variant=coarse]:is-3", "data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:bs-1.5 sm:data-[orientation=horizontal]:data-[variant=coarse]:bs-3", "sm:data-[variant=coarse]:bg-separator rounded-full", "[&>div]:bg-unAccent sm:[&[data-variant=coarse]>div]:bg-attention", ...etc);
-var scrollAreaThumb = (_props, ...etc) => mx("flex-1 rounded-full relative", "before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:is-full before:bs-full before:min-w-[6px] before:min-h-[6px]", ...etc);
-var scrollAreaCorner = (_props, ...etc) => mx(...etc);
 var scrollAreaTheme = {
   root: scrollAreaRoot,
-  viewport: scrollAreaViewport,
-  scrollbar: scrollAreaScrollbar,
-  thumb: scrollAreaThumb,
-  corner: scrollAreaCorner
+  viewport: scrollAreaViewport
 };
 
 // src/styles/components/select.ts
@@ -3026,6 +3085,12 @@ var separatorTheme = {
   root: separatorRoot
 };
 
+// src/styles/components/skeleton.ts
+var skeletonRoot = ({ variant = "default" }, ...etc) => mx("animate-pulse bg-neutral-250 dark:bg-neutral-750 rounded-md", variant === "circle" && "rounded-full", variant === "text" && "rounded", ...etc);
+var skeletonTheme = {
+  root: skeletonRoot
+};
+
 // src/styles/components/status.ts
 var statusRoot = ({ variant = "default" }, ...etc) => mx("bs-1 relative bg-hoverOverlay rounded-full overflow-hidden", variant === "main-bottom" ? "is-full block" : "is-20 inline-block", ...etc);
 var statusBar = ({ indeterminate, variant = "default" }, ...etc) => mx("absolute inset-block-0 block rounded-full", variant === "main-bottom" ? "bg-accentSurface" : "bg-unAccent", indeterminate ? "animate-progress-indeterminate" : "inline-start-0", ...etc);
@@ -3064,10 +3129,9 @@ var toastTheme = {
 };
 
 // src/styles/components/toolbar.ts
-var toolbarLayout = "is-full shrink-0 flex flex-nowrap items-center gap-1 p-1 overflow-x-auto scrollbar-none contain-layout";
-var toolbarInactive = "*:opacity-20";
-var toolbarRoot = ({ layoutManaged, disabled }, ...etc) => {
-  return mx("bg-toolbarSurface dx-toolbar", !layoutManaged && toolbarLayout, disabled && toolbarInactive, ...etc);
+var toolbarLayout = "is-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none contain-layout";
+var toolbarRoot = ({ density, disabled, layoutManaged }, ...etc) => {
+  return mx("bg-toolbarSurface dx-toolbar", density === "coarse" && "bs-[var(--rail-size)] !pli-3", disabled && "*:opacity-20", !layoutManaged && toolbarLayout, ...etc);
 };
 var toolbarInner = ({ layoutManaged }, ...etc) => {
   return mx(!layoutManaged && [
@@ -3081,12 +3145,19 @@ var toolbarTheme = {
 };
 
 // src/styles/components/tooltip.ts
-var tooltipContent = ({ elevation }, ...etc) => mx("inline-flex items-center rounded-sm plb-1 pli-2 max-is-64 bg-inverseSurface text-inverseSurfaceText", popperMotion, surfaceShadow({
-  elevation: "positioned"
-}), surfaceZIndex({
-  elevation,
-  level: "tooltip"
-}), chromeText, ...etc);
+var tooltipContent = ({ elevation }, ...etc) => mx(
+  "inline-flex items-center rounded-sm plb-1 pli-2 max-is-64 bg-inverseSurface text-inverseSurfaceText",
+  // popperMotion,
+  surfaceShadow({
+    elevation: "positioned"
+  }),
+  surfaceZIndex({
+    elevation,
+    level: "tooltip"
+  }),
+  chromeText,
+  ...etc
+);
 var tooltipArrow = (_props, ...etc) => mx("fill-inverseSurface", ...etc);
 var tooltipTheme = {
   content: tooltipContent,
@@ -3137,10 +3208,28 @@ var treegridTheme = {
   cell: treegridCell
 };
 
+// src/styles/primitives/container.ts
+var padding = {
+  sm: "pli-2",
+  md: "pli-3",
+  lg: "pli-6"
+};
+var containerColumn = ({ variant }, ...etc) => mx(variant && padding[variant], ...etc);
+var containerTheme = {
+  column: containerColumn
+};
+
 // src/styles/theme.ts
 import { get } from "@dxos/util";
 var defaultTheme = {
   themeName: () => "default",
+  //
+  // Primitives
+  //
+  container: containerTheme,
+  //
+  // Components
+  //
   anchoredOverflow: anchoredOverflowTheme,
   avatar: avatarTheme,
   breadcrumb: breadcrumbTheme,
@@ -3155,9 +3244,10 @@ var defaultTheme = {
   message: messageTheme,
   menu: menuTheme,
   popover: popoverTheme,
-  select: selectTheme,
   scrollArea: scrollAreaTheme,
+  select: selectTheme,
   separator: separatorTheme,
+  skeleton: skeletonTheme,
   status: statusTheme,
   tag: tagTheme,
   toast: toastTheme,
@@ -3165,16 +3255,23 @@ var defaultTheme = {
   tooltip: tooltipTheme,
   treegrid: treegridTheme
 };
+var missing = /* @__PURE__ */ new Set();
 var bindTheme = (theme) => {
-  return (path, defaultClassName, styleProps, ...options) => {
+  return (path, defaultClassName, styleProps, ...etc) => {
     const result = get(theme, path);
-    return typeof result === "function" ? result(styleProps, ...options) : defaultClassName;
+    const className = typeof result === "function" && result(styleProps ?? {}, ...etc);
+    if (!className) {
+      if (!missing.has(path)) {
+        missing.add(path);
+      }
+    }
+    return className || defaultClassName;
   };
 };
 var defaultTx = bindTheme(defaultTheme);
 
 // src/index.ts
-var tokens = tailwindConfig({}).theme;
+var { theme: tokens } = tailwindConfig({});
 var osTranslations = "dxos.org/i18n/os";
 export {
   accentSurface,
@@ -3218,6 +3315,7 @@ export {
   coarseDimensions,
   coarseTextPadding,
   computeSize,
+  containerTheme,
   contentShadow,
   dataDisabled,
   defaultButtonColors,
@@ -3227,6 +3325,8 @@ export {
   descriptionMessage,
   descriptionText,
   descriptionTextPrimary,
+  dialogActionBar,
+  dialogBody,
   dialogContent,
   dialogDescription,
   dialogHeader,
@@ -3334,11 +3434,8 @@ export {
   popoverViewport,
   popperMotion,
   primaryButtonColors,
-  scrollAreaCorner,
   scrollAreaRoot,
-  scrollAreaScrollbar,
   scrollAreaTheme,
-  scrollAreaThumb,
   scrollAreaViewport,
   selectArrow,
   selectContent,
@@ -3357,6 +3454,8 @@ export {
   sizeHeightMap,
   sizeValue,
   sizeWidthMap,
+  skeletonRoot,
+  skeletonTheme,
   staticDefaultButtonColors,
   staticDisabled,
   staticFocusRing,
@@ -3388,7 +3487,6 @@ export {
   toastTitle,
   toastViewport,
   tokens,
-  toolbarInactive,
   toolbarInner,
   toolbarLayout,
   toolbarRoot,