@dxos/ui-theme 0.8.4-main.21d9917 → 0.8.4-main.3eb6e50203

package/dist/lib/browser/index.mjs

@@ -7,10 +7,17 @@ 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
+// src/config/tokens/colors/physical-colors.ts
 var reflectiveRelation = {
   initial: 1e3,
   slope: -1e3,
@@ -151,7 +158,7 @@ var physicalColors = {
   }, {})
 };
 
-// src/config/tokens/sememes-hue.ts
+// src/config/tokens/colors/sememes-hue.ts
 var hueSememes = [
   ...Object.keys(huePalettes),
   "neutral",
@@ -255,7 +262,7 @@ var valenceAliases = valenceAliasSememeStems.reduce((acc, stem) => {
   }, acc);
 }, {});
 
-// src/config/tokens/sememes-sheet.ts
+// src/config/tokens/colors/sememes-sheet.ts
 var sheetSememes = {
   // NOTE: background styles for the main content area must have transparency otherwise they will mask the selection.
   axisSurface: {
@@ -390,7 +397,7 @@ var sheetAliases = {
   }
 };
 
-// src/config/tokens/sememes-system.ts
+// src/config/tokens/colors/sememes-system.ts
 var getMapValue = (map, key, defaultValue) => {
   let value = map[key];
   if (!value) {
@@ -449,6 +456,59 @@ var contrastCadence = (lightDepth, darkDepth = lightDepth, alpha = 1) => applyAl
     darkContrastCadence(darkDepth)
   ]
 }, alpha);
+var aliasDefs = {
+  // Selected items, current items, other surfaces needing special contrast against baseSurface.
+  activeSurface: {
+    root: "inputSurfaceBase"
+  },
+  // Main sidebar panel.
+  sidebarSurface: {
+    root: "groupSurface"
+  },
+  // Plank header.
+  headerSurface: {
+    root: "groupSurface"
+  },
+  // Toolbars, table/sheet headers, etc.
+  toolbarSurface: {
+    root: "groupSurface"
+  },
+  // Forms, cards, etc.
+  cardSurface: {
+    root: "groupSurface"
+  },
+  // Secondary aliases.
+  textInputSurface: {
+    root: "textInputSurfaceBase",
+    group: "textInputSurfaceGroup",
+    modal: "textInputSurfaceModal"
+  },
+  inputSurface: {
+    root: "inputSurfaceBase",
+    group: "inputSurfaceGroup",
+    modal: "inputSurfaceModal"
+  },
+  hoverSurface: {
+    root: "hoverSurfaceBase",
+    group: "hoverSurfaceGroup",
+    modal: "hoverSurfaceModal"
+  },
+  // TODO(thure): Rename uses of this token to `focusSurface` and remove this alias.
+  attention: {
+    root: "focusSurface"
+  },
+  // In “master-detail” patterns, the background of the item in the list which is enumerated in the adjacent view.
+  // TODO(burdon): Review tokens.
+  currentRelated: {
+    root: "modalSurface"
+  },
+  // Borders and dividers.
+  separator: {
+    root: "separatorBase",
+    group: "separatorGroup",
+    modal: "separatorModal"
+  }
+};
 var systemSememes = {
   //
   // Elevation cadence tokens
@@ -472,6 +532,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",
@@ -686,59 +751,6 @@ var systemSememes = {
     ]
   }
 };
-var aliasDefs = {
-  // Selected items, current items, other surfaces needing special contrast against baseSurface.
-  activeSurface: {
-    root: "inputSurfaceBase"
-  },
-  // Main sidebar panel.
-  sidebarSurface: {
-    root: "groupSurface"
-  },
-  // Plank header.
-  headerSurface: {
-    root: "groupSurface"
-  },
-  // Toolbars, table/sheet headers, etc.
-  toolbarSurface: {
-    root: "groupSurface"
-  },
-  // Forms, cards, etc.
-  cardSurface: {
-    root: "groupSurface"
-  },
-  // Secondary aliases.
-  textInputSurface: {
-    root: "textInputSurfaceBase",
-    group: "textInputSurfaceGroup",
-    modal: "textInputSurfaceModal"
-  },
-  inputSurface: {
-    root: "inputSurfaceBase",
-    group: "inputSurfaceGroup",
-    modal: "inputSurfaceModal"
-  },
-  hoverSurface: {
-    root: "hoverSurfaceBase",
-    group: "hoverSurfaceGroup",
-    modal: "hoverSurfaceModal"
-  },
-  // TODO(thure): Rename uses of this token to `focusSurface` and remove this alias.
-  attention: {
-    root: "focusSurface"
-  },
-  // In “master-detail” patterns, the background of the item in the list which is enumerated in the adjacent view.
-  // TODO(burdon): Review tokens.
-  currentRelated: {
-    root: "modalSurface"
-  },
-  // Borders and dividers.
-  separator: {
-    root: "separatorBase",
-    group: "separatorGroup",
-    modal: "separatorModal"
-  }
-};
 var systemAliases = Object.entries(aliasDefs).reduce((aliases, [alias, values]) => {
   Object.entries(values).forEach(([key, sememe]) => {
     const record = getMapValue(aliases, sememe, () => ({}));
@@ -748,7 +760,7 @@ var systemAliases = Object.entries(aliasDefs).reduce((aliases, [alias, values])
   return aliases;
 }, {});
 
-// src/config/tokens/alias-colors.ts
+// src/config/tokens/colors/alias-colors.ts
 var groupAliases = [
   "groupSurface",
   ...systemAliases.groupSurface?.root ?? []
@@ -787,112 +799,258 @@ var aliasColors = {
   namespace: "dx-"
 };
 
-// src/config/tokens/sizes.ts
-var cardMinInlineSize = 18;
-var cardDefaultInlineSize = 20;
-var cardMaxInlineSize = 22;
+// src/config/tokens/colors/sememes-calls.ts
+var callsSememes = {
+  callActive: {
+    light: [
+      "green",
+      "500"
+    ],
+    dark: [
+      "green",
+      "500"
+    ]
+  },
+  callAlert: {
+    light: [
+      "rose",
+      "500"
+    ],
+    dark: [
+      "rose",
+      "500"
+    ]
+  }
+};
 
-// src/config/tokens/lengths.ts
-var lengthsFacet = {
-  physical: {
-    namespace: "dx-",
-    conditions: {
-      root: [
-        ":root"
-      ]
-    },
-    series: {
-      line: {
-        root: {
-          unit: "px",
-          initial: 0,
-          slope: 1
-        }
-      },
-      // "gap"
-      lacuna: {
-        root: {
-          unit: "rem",
-          initial: 0,
-          slope: 0.125
-        }
-      }
-    }
+// src/config/tokens/colors/sememes-codemirror.ts
+var codemirrorSememes = {
+  // NOTE: background styles for the main content area must have transparency otherwise they will mask the selection.
+  cmCodeblock: {
+    light: [
+      "neutral",
+      "500/.1"
+    ],
+    dark: [
+      "neutral",
+      "500/.1"
+    ]
   },
-  semantic: {
-    namespace: "dx-",
-    conditions: {
-      root: [
-        ":root"
-      ]
-    },
-    sememes: {
-      noLine: {
-        root: [
-          "line",
-          0
-        ]
-      },
-      hairLine: {
-        root: [
-          "line",
-          1
-        ]
-      },
-      thickLine: {
-        root: [
-          "line",
-          2
-        ]
-      },
-      trimXs: {
-        root: [
-          "lacuna",
-          3
-        ]
-      },
-      trimSm: {
-        root: [
-          "lacuna",
-          4
-        ]
-      },
-      trimMd: {
-        root: [
-          "lacuna",
-          6
-        ]
-      },
-      trimLg: {
-        root: [
-          "lacuna",
-          12
-        ]
-      },
-      inputFine: {
-        root: [
-          "lacuna",
-          3
-        ]
-      },
-      inputCoarse: {
-        root: [
-          "lacuna",
-          4
-        ]
-      }
-    }
+  cmActiveLine: {
+    light: [
+      "neutral",
+      "200/.5"
+    ],
+    dark: [
+      "neutral",
+      "800/.5"
+    ]
   },
-  alias: {
-    namespace: "dx-",
-    conditions: {
-      fine: [
-        ":root, .density-fine"
-      ],
-      coarse: [
-        ".density-coarse"
-      ],
-      flush: [
+  cmSeparator: {
+    light: [
+      "primary",
+      500
+    ],
+    dark: [
+      "primary",
+      500
+    ]
+  },
+  cmCursor: {
+    light: [
+      "neutral",
+      900
+    ],
+    dark: [
+      "neutral",
+      100
+    ]
+  },
+  cmSelection: {
+    light: [
+      "primary",
+      "400/.5"
+    ],
+    dark: [
+      "primary",
+      "600/.5"
+    ]
+  },
+  cmFocusedSelection: {
+    light: [
+      "primary",
+      400
+    ],
+    dark: [
+      "primary",
+      600
+    ]
+  },
+  cmHighlight: {
+    light: [
+      "neutral",
+      950
+    ],
+    dark: [
+      "neutral",
+      50
+    ]
+  },
+  cmHighlightSurface: {
+    light: [
+      "sky",
+      200
+    ],
+    dark: [
+      "cyan",
+      600
+    ]
+  },
+  // TODO(burdon): Factor out defs in common with sheet.
+  cmCommentText: {
+    light: [
+      "neutral",
+      50
+    ],
+    dark: [
+      "neutral",
+      950
+    ]
+  },
+  cmCommentSurface: {
+    light: [
+      "amber",
+      700
+    ],
+    dark: [
+      "amber",
+      200
+    ]
+  }
+};
+
+// src/config/tokens/colors/semantic-colors.ts
+var semanticColors = {
+  conditions: {
+    light: [
+      ":root"
+    ],
+    dark: [
+      ".dark"
+    ]
+  },
+  sememes: {
+    // Define each set of sememes in its own file.
+    ...callsSememes,
+    ...codemirrorSememes,
+    ...hueSememes,
+    ...sheetSememes,
+    ...systemSememes
+  },
+  namespace: "dx-"
+};
+
+// src/config/tokens/lengths.ts
+var lengthsFacet = {
+  physical: {
+    namespace: "dx-",
+    conditions: {
+      root: [
+        ":root"
+      ]
+    },
+    series: {
+      line: {
+        root: {
+          unit: "px",
+          initial: 0,
+          slope: 1
+        }
+      },
+      // "gap"
+      lacuna: {
+        root: {
+          unit: "rem",
+          initial: 0,
+          slope: 0.125
+        }
+      }
+    }
+  },
+  semantic: {
+    namespace: "dx-",
+    conditions: {
+      root: [
+        ":root"
+      ]
+    },
+    sememes: {
+      noLine: {
+        root: [
+          "line",
+          0
+        ]
+      },
+      hairLine: {
+        root: [
+          "line",
+          1
+        ]
+      },
+      thickLine: {
+        root: [
+          "line",
+          2
+        ]
+      },
+      trimXs: {
+        root: [
+          "lacuna",
+          3
+        ]
+      },
+      trimSm: {
+        root: [
+          "lacuna",
+          4
+        ]
+      },
+      trimMd: {
+        root: [
+          "lacuna",
+          6
+        ]
+      },
+      trimLg: {
+        root: [
+          "lacuna",
+          12
+        ]
+      },
+      inputFine: {
+        root: [
+          "lacuna",
+          3
+        ]
+      },
+      inputCoarse: {
+        root: [
+          "lacuna",
+          4
+        ]
+      }
+    }
+  },
+  alias: {
+    namespace: "dx-",
+    conditions: {
+      fine: [
+        ":root, .density-fine"
+      ],
+      coarse: [
+        ".density-coarse"
+      ],
+      flush: [
         ".density-flush"
       ],
       gridFocusStack: [
@@ -922,6 +1080,16 @@ var lengthsFacet = {
           "gridFocusIndicatorWidth"
         ]
       },
+      inputFine: {
+        fine: [
+          "iconButtonPadding"
+        ]
+      },
+      inputCoarse: {
+        coarse: [
+          "iconButtonPadding"
+        ]
+      },
       trimXs: {
         fine: [
           "cardSpacingChrome",
@@ -942,16 +1110,6 @@ var lengthsFacet = {
           "cardSpacingBlock",
           "cardSpacingGap"
         ]
-      },
-      inputFine: {
-        fine: [
-          "iconButtonPadding"
-        ]
-      },
-      inputCoarse: {
-        coarse: [
-          "iconButtonPadding"
-        ]
       }
     }
   }
@@ -994,12 +1152,6 @@ var maxSizesFacet = {
           50
         ]
       },
-      "popover-max-width": {
-        root: [
-          "size",
-          cardDefaultInlineSize
-        ]
-      },
       "card-default-width": {
         root: [
           "size",
@@ -1016,174 +1168,25 @@ var maxSizesFacet = {
         root: [
           "size",
           cardMaxInlineSize
-        ]
-      }
-    }
-  }
-};
-
-// src/config/tokens/sememes-calls.ts
-var callsSememes = {
-  callActive: {
-    light: [
-      "green",
-      "500"
-    ],
-    dark: [
-      "green",
-      "500"
-    ]
-  },
-  callAlert: {
-    light: [
-      "rose",
-      "500"
-    ],
-    dark: [
-      "rose",
-      "500"
-    ]
-  }
-};
-
-// src/config/tokens/sememes-codemirror.ts
-var codemirrorSememes = {
-  // NOTE: background styles for the main content area must have transparency otherwise they will mask the selection.
-  cmCodeblock: {
-    light: [
-      "neutral",
-      "500/.1"
-    ],
-    dark: [
-      "neutral",
-      "500/.1"
-    ]
-  },
-  cmActiveLine: {
-    light: [
-      "neutral",
-      "200/.5"
-    ],
-    dark: [
-      "neutral",
-      "800/.5"
-    ]
-  },
-  cmSeparator: {
-    light: [
-      "primary",
-      500
-    ],
-    dark: [
-      "primary",
-      500
-    ]
-  },
-  cmCursor: {
-    light: [
-      "neutral",
-      900
-    ],
-    dark: [
-      "neutral",
-      100
-    ]
-  },
-  cmSelection: {
-    light: [
-      "primary",
-      "400/.5"
-    ],
-    dark: [
-      "primary",
-      "600/.5"
-    ]
-  },
-  cmFocusedSelection: {
-    light: [
-      "primary",
-      400
-    ],
-    dark: [
-      "primary",
-      600
-    ]
-  },
-  cmHighlight: {
-    light: [
-      "neutral",
-      950
-    ],
-    dark: [
-      "neutral",
-      50
-    ]
-  },
-  cmHighlightSurface: {
-    light: [
-      "sky",
-      200
-    ],
-    dark: [
-      "cyan",
-      600
-    ]
-  },
-  // TODO(burdon): Factor out defs in common with sheet.
-  cmCommentText: {
-    light: [
-      "neutral",
-      50
-    ],
-    dark: [
-      "neutral",
-      950
-    ]
-  },
-  cmCommentSurface: {
-    light: [
-      "amber",
-      700
-    ],
-    dark: [
-      "amber",
-      200
-    ]
+        ]
+      },
+      "card-min-height": {
+        root: [
+          "size",
+          cardMinBlockSize
+        ]
+      },
+      "card-max-height": {
+        root: [
+          "size",
+          cardMaxBlockSize
+        ]
+      }
+    }
   }
 };
 
-// src/config/tokens/semantic-colors.ts
-var semanticColors = {
-  conditions: {
-    light: [
-      ":root"
-    ],
-    dark: [
-      ".dark"
-    ]
-  },
-  sememes: {
-    // Define each set of sememes in its own file.
-    ...callsSememes,
-    ...codemirrorSememes,
-    ...hueSememes,
-    ...sheetSememes,
-    ...systemSememes
-  },
-  namespace: "dx-"
-};
-
-// src/config/tokens/index.ts
-var hues = Object.keys(huePalettes);
-var tokenSet = {
-  colors: {
-    physical: physicalColors,
-    semantic: semanticColors,
-    alias: aliasColors
-  },
-  lengths: lengthsFacet,
-  maxSizes: maxSizesFacet
-};
+// src/config/tokens/tokens.ts
 var adapterConfig = {
   colors: {
     facet: "colors",
@@ -1216,6 +1219,16 @@ var adapterConfig = {
     tokenization: "keep-series"
   }
 };
+var hues = Object.keys(huePalettes);
+var tokenSet = {
+  colors: {
+    physical: physicalColors,
+    semantic: semanticColors,
+    alias: aliasColors
+  },
+  lengths: lengthsFacet,
+  maxSizes: maxSizesFacet
+};
 var userDefaultTokenSet = {
   colors: {
     physical: {
@@ -1266,12 +1279,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))",
@@ -1530,209 +1544,80 @@ var tailwindConfig = ({ env = "production", content = [], extensions = [] }) =>
             left: "100%",
             width: "0%"
           }
-        },
-        // Border trail effect
-        "trail": {
-          to: {
-            "offset-distance": "100%"
-          }
-        },
-        "trail-offset": {
-          "0%": {
-            "offset-distance": "50%"
-          },
-          "100%": {
-            "offset-distance": "150%"
-          }
-        }
-      },
-      animation: {
-        // Fade
-        "fade-in": "fade-in 200ms ease-out",
-        "fade-out": "fade-out 400ms ease-out",
-        // Popper chrome
-        "slide-down-and-fade": "slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "slide-left-and-fade": "slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "slide-up-and-fade": "slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "slide-right-and-fade": "slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        // Toast
-        "toast-hide": "toast-hide 100ms ease-in forwards",
-        "toast-slide-in-right": "toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "toast-slide-in-bottom": "toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "toast-swipe-out": "toast-swipe-out 100ms ease-out forwards",
-        // Accordion
-        "slide-down": "slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1)",
-        "slide-up": "slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1)",
-        // Border trail effect
-        "trail": "trail 6s linear infinite",
-        "trail-offset": "trail-offset 6s linear infinite",
-        // Progress effects
-        "spin": "spin 1.5s linear infinite",
-        "spin-slow": "spin 3s linear infinite",
-        "shimmer": "shimmer-loop 2s infinite",
-        "halo-pulse": "halo-pulse 2s ease-out infinite",
-        "progress-indeterminate": "progress-indeterminate 2s ease-out infinite",
-        "progress-linear": "progress-linear 2s ease-out infinite"
-      }
-    }, extendTokens, ...extensions),
-    ...overrideTokens,
-    colors: {
-      ...overrideTokens.colors,
-      inherit: "inherit",
-      current: "currentColor",
-      transparent: "transparent",
-      black: "black",
-      white: "white"
-    }
-  },
-  plugins: [
-    tailwindcssContainerQueries,
-    tailwindcssForms,
-    tailwindcssLogical,
-    tailwindcssRadix(),
-    // https://adoxography.github.io/tailwind-scrollbar/utilities
-    tailwindScrollbar({
-      nocompatible: true,
-      preferredStrategy: "pseudoelements"
-    })
-  ],
-  ...env === "development" && {
-    mode: "jit"
-  },
-  content,
-  future: {
-    hoverOnlyWhenSupported: true
-  }
-});
-
-// 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";
+        },
+        // Border trail effect
+        "trail": {
+          to: {
+            "offset-distance": "100%"
+          }
+        },
+        "trail-offset": {
+          "0%": {
+            "offset-distance": "50%"
+          },
+          "100%": {
+            "offset-distance": "150%"
+          }
+        }
+      },
+      animation: {
+        // Fade
+        "fade-in": "fade-in 200ms ease-out",
+        "fade-out": "fade-out 400ms ease-out",
+        // Popper chrome
+        "slide-down-and-fade": "slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        "slide-left-and-fade": "slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        "slide-up-and-fade": "slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        "slide-right-and-fade": "slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        // Toast
+        "toast-hide": "toast-hide 100ms ease-in forwards",
+        "toast-slide-in-right": "toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        "toast-slide-in-bottom": "toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        "toast-swipe-out": "toast-swipe-out 100ms ease-out forwards",
+        // Accordion
+        "slide-down": "slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+        "slide-up": "slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+        // Border trail effect
+        "trail": "trail 6s linear infinite",
+        "trail-offset": "trail-offset 6s linear infinite",
+        // Progress effects
+        "spin": "spin 1.5s linear infinite",
+        "spin-slow": "spin 3s linear infinite",
+        "shimmer": "shimmer-loop 2s infinite",
+        "halo-pulse": "halo-pulse 2s ease-out infinite",
+        "progress-indeterminate": "progress-indeterminate 2s ease-out infinite",
+        "progress-linear": "progress-linear 2s ease-out infinite"
+      }
+    }, extendTokens, ...extensions),
+    ...overrideTokens,
+    colors: {
+      ...overrideTokens.colors,
+      inherit: "inherit",
+      current: "currentColor",
+      transparent: "transparent",
+      black: "black",
+      white: "white"
+    }
+  },
+  plugins: [
+    tailwindcssContainerQueries,
+    tailwindcssForms,
+    tailwindcssLogical,
+    tailwindcssRadix(),
+    // https://adoxography.github.io/tailwind-scrollbar/utilities
+    tailwindScrollbar({
+      nocompatible: true,
+      preferredStrategy: "pseudoelements"
+    })
+  ],
+  ...env === "development" && {
+    mode: "jit"
+  },
+  content,
+  future: {
+    hoverOnlyWhenSupported: true
+  }
+});
 
 // src/util/hash-styles.ts
 var neutralColor = {
@@ -2334,6 +2219,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 +2722,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 +2785,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
 };
@@ -2808,7 +2826,7 @@ var textInputSurfaceFocus = "transition-colors bg-textInputSurface focus:bg-focu
 var textInputSurfaceHover = "hover:bg-textInputSurface focus:hover:bg-focusSurface";
 var booleanInputSurface = "shadow-inner transition-colors bg-unAccent aria-checked:bg-accentSurface aria-[checked=mixed]:bg-accentSurface";
 var booleanInputSurfaceHover = "hover:bg-unAccentHover hover:aria-checked:bg-accentSurfaceHover hover:aria-[checked=mixed]:bg-accentSurfaceHover";
-var inputTextLabel = "text-description text-xs font-medium mbs-inputSpacingBlock mbe-labelSpacingBlock first:mbs-0";
+var inputTextLabel = "text-sm text-description plb-1";
 var inputValence = (valence) => {
   switch (valence) {
     case "success":
@@ -2910,11 +2928,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 +2942,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 +2988,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 +3003,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 +3084,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);
@@ -3035,7 +3099,7 @@ var statusTheme = {
 };
 
 // src/styles/components/tag.ts
-var tagRoot = ({ palette = "neutral" }, ...etc) => mx("dx-tag", ...etc);
+var tagRoot = (_, ...etc) => mx("dx-tag", ...etc);
 var tagTheme = {
   root: tagRoot
 };
@@ -3064,10 +3128,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 +3144,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 +3207,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 +3243,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,
@@ -3166,15 +3255,15 @@ var defaultTheme = {
   treegrid: treegridTheme
 };
 var bindTheme = (theme) => {
-  return (path, defaultClassName, styleProps, ...options) => {
+  return (path, styleProps, ...etc) => {
     const result = get(theme, path);
-    return typeof result === "function" ? result(styleProps, ...options) : defaultClassName;
+    return typeof result === "function" ? result(styleProps ?? {}, ...etc) : void 0;
   };
 };
 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 +3307,7 @@ export {
   coarseDimensions,
   coarseTextPadding,
   computeSize,
+  containerTheme,
   contentShadow,
   dataDisabled,
   defaultButtonColors,
@@ -3227,6 +3317,8 @@ export {
   descriptionMessage,
   descriptionText,
   descriptionTextPrimary,
+  dialogActionBar,
+  dialogBody,
   dialogContent,
   dialogDescription,
   dialogHeader,
@@ -3287,7 +3379,6 @@ export {
   inputLabel,
   inputSwitch,
   inputSwitchThumb,
-  inputTextLabel,
   inputTheme,
   inputValence,
   inputValidation,
@@ -3334,11 +3425,8 @@ export {
   popoverViewport,
   popperMotion,
   primaryButtonColors,
-  scrollAreaCorner,
   scrollAreaRoot,
-  scrollAreaScrollbar,
   scrollAreaTheme,
-  scrollAreaThumb,
   scrollAreaViewport,
   selectArrow,
   selectContent,
@@ -3357,6 +3445,8 @@ export {
   sizeHeightMap,
   sizeValue,
   sizeWidthMap,
+  skeletonRoot,
+  skeletonTheme,
   staticDefaultButtonColors,
   staticDisabled,
   staticFocusRing,
@@ -3388,7 +3478,6 @@ export {
   toastTitle,
   toastViewport,
   tokens,
-  toolbarInactive,
   toolbarInner,
   toolbarLayout,
   toolbarRoot,