basalt-ui 1.19.0 → 1.20.0

package/src/dashboard/delta-badge.tsx

@@ -49,9 +49,9 @@ export function DeltaBadge({
           height: 'auto',
         },
         label: {
-          display: 'inline-flex', // theme-allow: Mantine Badge styles.label part — CSS-in-JS, not a layout node
+          display: 'inline-flex', // theme-allow inline-display — a Badge `styles.label` part, not a layout node Flex could replace
           alignItems: 'center',
-          gap: 3, // theme-allow: sub-scale badge glyph-to-label gap, below the token scale
+          gap: 3, // theme-allow inline-spacing — sub-scale glyph-to-label gap, below the smallest scale stop
           fontFamily: 'var(--basalt-font-mono)',
           fontSize: VX.text.xs,
           fontWeight: 600,
@@ -66,7 +66,7 @@ export function DeltaBadge({
       {format(value)}
       {period && (
         <span
-          style={{ marginLeft: 4, fontWeight: 500, opacity: 0.6 }} // theme-allow: sub-scale optical period offset, below the token scale
+          style={{ marginLeft: 4, fontWeight: 500, opacity: 0.6 }} // theme-allow inline-spacing — sub-scale optical period offset, below the smallest scale stop
         >
           {period}
         </span>

package/src/dashboard/stat-card.tsx

@@ -110,7 +110,7 @@ export function StatCard({
         // explicit for intent.
         padding: 'var(--mantine-spacing-xs) var(--mantine-spacing-sm)',
         minHeight: 118,
-        display: 'flex', // theme-allow: Card root as a flex column — Mantine Card takes no layout props
+        display: 'flex', // theme-allow inline-display — Card root as a flex column; Mantine Card takes no layout props
         flexDirection: 'column',
         gap: 'var(--vx-space-stat-card-gap)',
         overflow: 'hidden',

package/src/data/virtual-list.tsx

@@ -126,10 +126,10 @@ export function BasaltVirtualList<T>({
 
   if (isLoading) {
     return (
-      // theme-allow — matches the virtualizer's own scroll box below, so the skeleton doesn't reflow.
+      // theme-allow raw-scroll-container — matches the virtualizer's own scroll box below, so the skeleton doesn't reflow.
       <Box style={{ height, overflow: 'auto' }}>
         {Array.from({ length: skeletonRows }, (_, i) => (
-          <div
+          <Box
             key={`skeleton-${i}`}
             style={{
               height: estimateSize,
@@ -144,7 +144,7 @@ export function BasaltVirtualList<T>({
               height={`calc(${estimateSize}px - 2 * var(--vx-space-virtual-row-inset-y))`}
               radius="sm"
             />
-          </div>
+          </Box>
         ))}
       </Box>
     )
@@ -155,12 +155,12 @@ export function BasaltVirtualList<T>({
       ref={parentRef}
       style={{
         height,
-        // theme-allow — TanStack Virtual measures this element as the scroll container.
+        // theme-allow raw-scroll-container — TanStack Virtual measures this element as the scroll container.
         overflow: 'auto',
       }}
     >
       {/* Inner sizer — defines total scroll height for the virtualizer */}
-      <div
+      <Box
         style={{
           height: rowVirtualizer.getTotalSize(),
           position: 'relative',
@@ -170,7 +170,7 @@ export function BasaltVirtualList<T>({
           const item = items[virtualItem.index]
           if (item === undefined) return null
           return (
-            <div
+            <Box
               key={virtualItem.key}
               style={{
                 position: 'absolute',
@@ -182,10 +182,10 @@ export function BasaltVirtualList<T>({
               }}
             >
               {renderItem(item, virtualItem.index)}
-            </div>
+            </Box>
           )
         })}
-      </div>
+      </Box>
     </Box>
   )
 }