@vireo-ai/trellis-ui 0.1.61 → 0.1.63

package/packages/client/src/components/menu/styles.css

@@ -0,0 +1,13 @@
+@layer components {
+  [data-ui-menu-search-header] {
+    border-bottom: var(--border-width-edge-separator) solid var(--ui-surface-edge);
+  }
+
+  [data-ui-menu-filtered] {
+    display: none !important;
+  }
+
+  [data-ui-sortable][data-ui-menu] [data-ui-menu-item]:not([data-active="true"]):not([data-disabled]) {
+    background-color: transparent;
+  }
+}

package/packages/client/src/components/panels/styles.css

@@ -1,3 +1,9 @@
+/* Local layout controls must not invalidate arbitrary component contents. */
+@property --ui-panel-preferred-size {
+  syntax: "*";
+  inherits: false;
+}
+
 @layer components {
   [data-ui-panels] {
     overflow: hidden;
@@ -55,7 +61,7 @@
   }
 
   [data-ui-panels]:is([data-orientation="horizontal"]:not([data-layout-orientation]), [data-layout-orientation="horizontal"]) > [data-ui-panel]:not([data-size="fill"]) {
-    flex: 0 1 var(--ui-panel-authored-size);
+    flex: 0 1 clamp(var(--ui-panel-authored-min), var(--ui-panel-preferred-size, var(--ui-panel-authored-size)), var(--ui-panel-authored-max));
     min-width: var(--ui-panel-authored-min);
     max-width: var(--ui-panel-authored-max);
   }
@@ -67,11 +73,15 @@
   }
 
   [data-ui-panels]:is([data-orientation="vertical"]:not([data-layout-orientation]), [data-layout-orientation="vertical"]) > [data-ui-panel]:not([data-size="fill"]) {
-    flex: 0 1 var(--ui-panel-authored-size);
+    flex: 0 1 clamp(var(--ui-panel-authored-min), var(--ui-panel-preferred-size, var(--ui-panel-authored-size)), var(--ui-panel-authored-max));
     min-height: var(--ui-panel-authored-min);
     max-height: var(--ui-panel-authored-max);
   }
 
+  [data-ui-panels][data-responsive-mode="stacked"] > [data-ui-panel]:not([data-size="fill"]):not([data-state="collapsed"]) {
+    flex-basis: var(--ui-panel-authored-size);
+  }
+
   [data-ui-panels][data-responsive-mode="stacked"] > [data-ui-panel][data-size="fill"]:not([data-state="collapsed"]) {
     min-height: 100%;
   }

package/packages/client/src/components/scroll-area/styles.css

@@ -1,5 +1,65 @@
+/* Each axis has independent Motion scroll bindings, including RTL. */
 @layer components {
+  [data-ui-scroll-area] {
+    --ui-scrollbar-track-size: calc(var(--ui-scrollbar-size) * 5 / 3 + var(--ui-scrollbar-inset));
+    --ui-scrollbar-gutter-inline: 0px;
+    --ui-scrollbar-gutter-block: 0px;
+  }
+
+  /* Reserve the entire pointer target, independently of overflow and visibility. */
+  @media (pointer: fine) {
+    [data-ui-scroll-area][data-gutter="stable"]:has(> [data-ui-scroll-area-viewport][data-hide-native]) {
+      padding-inline-end: var(--ui-scrollbar-gutter-inline);
+      padding-block-end: var(--ui-scrollbar-gutter-block);
+    }
+
+    [data-ui-scroll-area][data-gutter="stable"]:is([data-orientation="vertical"], [data-orientation="both"]):has(> [data-ui-scroll-area-viewport][data-hide-native]) {
+      --ui-scrollbar-gutter-inline: var(--ui-scrollbar-track-size);
+    }
+
+    [data-ui-scroll-area][data-gutter="stable"]:is([data-orientation="horizontal"], [data-orientation="both"]):has(> [data-ui-scroll-area-viewport][data-hide-native]) {
+      --ui-scrollbar-gutter-block: var(--ui-scrollbar-track-size);
+    }
+  }
+
+  [data-ui-scroll-area][data-gutter="stable"] > [data-ui-scroll-area-viewport]:not([data-hide-native]) {
+    scrollbar-gutter: stable;
+  }
+
+  [data-ui-scroll-area][data-dividers]::after {
+    --ui-scroll-fade-top: inherit;
+    --ui-scroll-fade-bottom: inherit;
+    --ui-scroll-fade-start: inherit;
+    --ui-scroll-fade-end: inherit;
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    direction: ltr;
+    border: var(--border-width-edge-separator) solid transparent;
+  }
+
+  [data-ui-scroll-area][data-dividers][data-overflow-y]::after {
+    border-block-start-color: color-mix(in srgb, var(--color-separator) calc((1 - var(--ui-scroll-fade-top)) * 100%), transparent);
+    border-block-end-color: color-mix(in srgb, var(--color-separator) calc((1 - var(--ui-scroll-fade-bottom)) * 100%), transparent);
+  }
+
+  [data-ui-scroll-area][data-dividers][data-overflow-x]::after {
+    border-inline-start-color: color-mix(in srgb, var(--color-separator) calc((1 - var(--ui-scroll-fade-start)) * 100%), transparent);
+    border-inline-end-color: color-mix(in srgb, var(--color-separator) calc((1 - var(--ui-scroll-fade-end)) * 100%), transparent);
+  }
+
+  [data-ui-scroll-area]:has(> [data-ui-scroll-area-viewport]:dir(rtl))::after { direction: rtl; }
+
+  /* Paint above the scrolling content, outside its optional edge mask. */
+  [data-ui-scroll-area]:has(> [data-ui-scroll-area-viewport]:focus-visible:not([data-ui-focus-indicator="suppressed"])) {
+    outline: var(--color-intent-accent-focus-width) solid var(--color-intent-accent-focus);
+    outline-offset: calc(-1 * var(--color-intent-accent-focus-width));
+  }
+
   [data-ui-scroll-area-viewport] {
+    --ui-scroll-fade-size: 48px;
     max-height: inherit;
     max-width: inherit;
   }
@@ -14,10 +74,117 @@
   }
 
   [data-ui-scroll-area-scrollbar][data-orientation="vertical"] {
-    height: calc(100% - (var(--ui-scrollbar-inset) * 2));
+    height: calc(100% - (var(--ui-scrollbar-inset) * 2) - var(--ui-scrollbar-gutter-block));
   }
 
   [data-ui-scroll-area-scrollbar][data-orientation="horizontal"] {
-    width: calc(100% - (var(--ui-scrollbar-inset) * 2));
+    inset-inline-start: var(--ui-scrollbar-inset);
+    inset-inline-end: calc(var(--ui-scrollbar-inset) + var(--ui-scrollbar-gutter-inline));
+    width: calc(100% - (var(--ui-scrollbar-inset) * 2) - var(--ui-scrollbar-gutter-inline));
+  }
+  /* Extend thumb hit targets to the viewport edge while keeping paint inset. */
+  [data-ui-scroll-area-thumb-paint] {
+    position: absolute;
+    border-radius: var(--ui-scrollbar-thumb-radius);
+    background: var(--color-scrollbar-thumb);
+  }
+
+  [data-ui-scroll-area-thumb][data-orientation="vertical"] > [data-ui-scroll-area-thumb-paint] {
+    inset-block: 0;
+    left: calc((100% - var(--ui-scrollbar-inset)) / 2);
+    width: calc(var(--ui-scrollbar-size) * 2 / 3);
+    transform: translateX(-50%);
+  }
+
+  [data-ui-scroll-area-thumb][data-orientation="horizontal"] > [data-ui-scroll-area-thumb-paint] {
+    inset-inline: 0;
+    top: calc((100% - var(--ui-scrollbar-inset)) / 2);
+    height: calc(var(--ui-scrollbar-size) * 2 / 3);
+    transform: translateY(-50%);
+  }
+
+  /* Primary coarse pointers use platform scrollbar affordances and physics. */
+  @media (pointer: coarse) {
+    [data-ui-scroll-area][data-gutter="stable"] > [data-ui-scroll-area-viewport] {
+      scrollbar-gutter: stable;
+    }
+    [data-ui-scroll-area-viewport][data-hide-native] {
+      scrollbar-width: auto;
+      -ms-overflow-style: auto;
+    }
+
+    [data-ui-scroll-area-viewport][data-hide-native]::-webkit-scrollbar { display: revert; }
+
+    [data-ui-scroll-area-scrollbar],
+    [data-ui-scroll-area-corner] { display: none; }
+  }
+  /* Hidden mode suppresses all chrome, including native touch scrollbars. */
+  [data-ui-scroll-area][data-type="hidden"] > [data-ui-scroll-area-viewport] {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  [data-ui-scroll-area][data-type="hidden"] > [data-ui-scroll-area-viewport]::-webkit-scrollbar,
+  [data-ui-scroll-area][data-type="hidden"] > [data-ui-scroll-area-scrollbar],
+  [data-ui-scroll-area][data-type="hidden"] > [data-ui-scroll-area-corner] {
+    display: none;
   }
 }
+
+/* Shared Motion values drive viewport masks and optional boundary dividers. */
+@property --ui-scroll-fade-top {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+@property --ui-scroll-fade-bottom {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+@property --ui-scroll-fade-start {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+@property --ui-scroll-fade-end {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@layer components {
+  [data-ui-scroll-area-viewport] {
+    --ui-scroll-fade-top: 1;
+    --ui-scroll-fade-bottom: 1;
+    --ui-scroll-fade-start: 1;
+    --ui-scroll-fade-end: 1;
+    --ui-scroll-fade-direction: to right;
+    --ui-scroll-fade-y: linear-gradient(to bottom,
+      rgb(0 0 0 / var(--ui-scroll-fade-top)) 0,
+      #000 var(--ui-scroll-fade-size),
+      #000 calc(100% - var(--ui-scroll-fade-size)),
+      rgb(0 0 0 / var(--ui-scroll-fade-bottom)) 100%);
+    --ui-scroll-fade-x: linear-gradient(var(--ui-scroll-fade-direction),
+      rgb(0 0 0 / var(--ui-scroll-fade-start)) 0,
+      #000 var(--ui-scroll-fade-size),
+      #000 calc(100% - var(--ui-scroll-fade-size)),
+      rgb(0 0 0 / var(--ui-scroll-fade-end)) 100%);
+  }
+
+  [data-ui-scroll-area-viewport]:dir(rtl) { --ui-scroll-fade-direction: to left; }
+
+  [data-ui-scroll-area][data-fade][data-overflow-y]:not([data-overflow-x]) > [data-ui-scroll-area-viewport] {
+    mask-image: var(--ui-scroll-fade-y);
+  }
+
+  [data-ui-scroll-area][data-fade][data-overflow-x]:not([data-overflow-y]) > [data-ui-scroll-area-viewport] {
+    mask-image: var(--ui-scroll-fade-x);
+  }
+
+  [data-ui-scroll-area][data-fade][data-overflow-x][data-overflow-y] > [data-ui-scroll-area-viewport] {
+    mask-image: var(--ui-scroll-fade-y), var(--ui-scroll-fade-x);
+    mask-composite: intersect;
+  }
+
+}

package/packages/client/src/components/select/styles.css

@@ -1,4 +1,8 @@
 @layer components {
+  [data-ui-select-create]:has([data-ui-select-option-create]):not(:has([data-ui-select-option-create]:not([hidden]))) {
+    display: none;
+  }
+
   [data-ui-select-viewport] {
     max-height: var(--ui-select-listbox-max-height, var(--spacing-select-listbox));
   }
@@ -21,9 +25,12 @@
   }
 
   [data-ui-select-virtualizer] [data-ui-virtualizer-block] {
-    padding-inline-end: calc(
-      var(--spacing-popover-padding) + var(--ui-scrollbar-size) + var(--ui-scrollbar-inset)
-    );
+    grid-auto-rows: var(--ui-virtualizer-item-size);
+  }
+
+  [data-ui-select-virtualizer] [data-ui-virtualizer-block] > [data-ui-select-option] {
+    height: calc(var(--ui-virtualizer-item-size) - var(--spacing-1));
+    min-height: 0;
   }
 
   [data-ui-select-virtualizer] > [data-ui-scroll-area] > [data-ui-scroll-area-viewport] > [data-ui-scroll-area-content] {
@@ -43,11 +50,11 @@
   }
 
   [data-ui-select][data-mode="combobox"] [data-ui-select-popover][data-presentation="anchored"] [data-ui-select-search] {
-    display: none;
+    display: none !important;
   }
 
   [data-ui-select-popover]:has([data-ui-select-search]) {
-    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr) auto;
   }
 
   [data-ui-select-popover]:has([data-ui-select-search]) [data-ui-select-listbox] {
@@ -57,7 +64,7 @@
 
   [data-ui-select-popover][data-presentation="dialog"],
   [data-ui-select-popover][data-presentation="fullscreen"] {
-    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr) auto;
     border: 0;
     padding-top: env(safe-area-inset-top);
     padding-right: env(safe-area-inset-right);
@@ -97,7 +104,7 @@
     display: grid;
     height: 100%;
     min-height: 0;
-    grid-template-rows: minmax(0, 1fr) auto auto;
+    grid-template-rows: minmax(0, 1fr) auto;
     overflow: hidden;
   }
 
@@ -126,7 +133,8 @@
     white-space: normal;
   }
 
-  [data-ui-select-option-label]:has(>*+*) > * {
+  [data-ui-select-option-label] > :first-child:not(:last-child),
+  [data-ui-select-option-label] > :not(:first-child) {
     min-width: 0;
     max-width: 100%;
     overflow-wrap: break-word;
@@ -137,4 +145,16 @@
     display: none;
   }
 
+  /* Selected values need one more step of separation from their control surface than informational badges. */
+  [data-ui-select-chip][data-variant="soft"] {
+    background-color: var(--ui-intent-soft-hover);
+  }
+
+  [data-ui-select-search] {
+    box-shadow: inset 0 calc(var(--border-width-edge-separator) * -1) 0 var(--ui-surface-separator);
+  }
+
+  [data-ui-select-create] {
+    box-shadow: inset 0 var(--border-width-edge-separator) 0 var(--ui-surface-separator);
+  }
 }

package/packages/client/src/components/sidebar/styles.css

@@ -1,20 +1,217 @@
+/* Local layout controls must not invalidate arbitrary component contents. */
+@property --ui-sidebar-width {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --ui-sidebar-height {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --ui-app-sidebar-height {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --ui-sidebar-action-columns {
+  syntax: "*";
+  inherits: false;
+}
+
+/* These are app-local animation controls, not inherited theme tokens. */
+@property --ui-app-sidebar-progress {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --ui-app-sidebar-width {
+  syntax: "*";
+  inherits: false;
+}
+
 @layer components {
+  [data-ui-sidebar-list] {
+    --ui-sidebar-control-height: var(--spacing-control-md);
+    --ui-sidebar-control-padding: var(--spacing-sidebar-content-padding-inline);
+    --ui-sidebar-icon-size: var(--spacing-icon-lg);
+    --ui-sidebar-font-size: var(--text-control-md);
+    --ui-sidebar-line-height: var(--text-control-md--line-height);
+    --ui-sidebar-letter-spacing: var(--text-control-md--letter-spacing);
+    --ui-sidebar-font-weight: var(--font-weight-control-md);
+    --ui-sidebar-reserve-leading: none;
+    --ui-sidebar-list-indent: 0px;
+    --ui-sidebar-terminal-content: 0px;
+    --ui-sidebar-terminal-size: max(var(--ui-sidebar-control-height), var(--ui-sidebar-terminal-content));
+    position: relative;
+    margin-block: 0;
+    margin-inline-start: var(--ui-sidebar-list-indent);
+  }
+  [data-ui-sidebar-list] [data-ui-sidebar-list] {
+    --ui-sidebar-control-height: inherit;
+    --ui-sidebar-control-padding: inherit;
+    --ui-sidebar-icon-size: inherit;
+    --ui-sidebar-font-size: inherit;
+    --ui-sidebar-line-height: inherit;
+    --ui-sidebar-letter-spacing: inherit;
+    --ui-sidebar-font-weight: inherit;
+    --ui-sidebar-reserve-leading: inherit;
+    --ui-sidebar-terminal-content: inherit;
+  }
+  [data-ui-sidebar-list][data-size="xs"] {
+    --ui-sidebar-control-height: var(--spacing-control-xs);
+    --ui-sidebar-icon-size: var(--spacing-icon-xs);
+    --ui-sidebar-font-size: var(--text-control-xs);
+    --ui-sidebar-line-height: var(--text-control-xs--line-height);
+    --ui-sidebar-letter-spacing: var(--text-control-xs--letter-spacing);
+    --ui-sidebar-font-weight: var(--font-weight-control-xs);
+  }
+  [data-ui-sidebar-list][data-size="sm"] {
+    --ui-sidebar-control-height: var(--spacing-control-sm);
+    --ui-sidebar-icon-size: var(--spacing-icon-sm);
+    --ui-sidebar-font-size: var(--text-control-sm);
+    --ui-sidebar-line-height: var(--text-control-sm--line-height);
+    --ui-sidebar-letter-spacing: var(--text-control-sm--letter-spacing);
+    --ui-sidebar-font-weight: var(--font-weight-control-sm);
+  }
+  [data-ui-sidebar-list][data-size="md"] {
+    --ui-sidebar-control-height: var(--spacing-control-md);
+    --ui-sidebar-control-padding: var(--spacing-sidebar-content-padding-inline);
+    --ui-sidebar-icon-size: var(--spacing-icon-lg);
+    --ui-sidebar-font-size: var(--text-control-md);
+    --ui-sidebar-line-height: var(--text-control-md--line-height);
+    --ui-sidebar-letter-spacing: var(--text-control-md--letter-spacing);
+    --ui-sidebar-font-weight: var(--font-weight-control-md);
+  }
+  [data-ui-sidebar-list][data-size="lg"] {
+    --ui-sidebar-control-height: var(--spacing-control-lg);
+    --ui-sidebar-icon-size: var(--spacing-icon-lg);
+    --ui-sidebar-font-size: var(--text-control-lg);
+    --ui-sidebar-line-height: var(--text-control-lg--line-height);
+    --ui-sidebar-letter-spacing: var(--text-control-lg--letter-spacing);
+    --ui-sidebar-font-weight: var(--font-weight-control-lg);
+  }
+  [data-ui-sidebar-list][data-size="xlg"] {
+    --ui-sidebar-control-height: var(--spacing-control-xlg);
+    --ui-sidebar-icon-size: var(--spacing-icon-xlg);
+    --ui-sidebar-font-size: var(--text-control-xlg);
+    --ui-sidebar-line-height: var(--text-control-xlg--line-height);
+    --ui-sidebar-letter-spacing: var(--text-control-xlg--letter-spacing);
+    --ui-sidebar-font-weight: var(--font-weight-control-xlg);
+  }
+  [data-ui-sidebar-list][data-indent="label"] {
+    --ui-sidebar-list-indent: calc(var(--ui-sidebar-label-indent, 0px) - var(--ui-sidebar-control-padding));
+  }
+  [data-ui-sidebar-list][data-leading="auto"] { --ui-sidebar-reserve-leading: none; }
+  [data-ui-sidebar-list][data-leading="reserve"] { --ui-sidebar-reserve-leading: flex; }
+  .ui-sidebar-heading, .ui-sidebar-control {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    grid-template-columns: subgrid;
+  }
+  .ui-sidebar-main { grid-column: 1; grid-row: 1; padding-inline-end: var(--spacing-2); }
+  .ui-sidebar-trailing { grid-column: 3; grid-row: 1; }
+  .ui-sidebar-actions { grid-column: 2; grid-row: 1; z-index: 1; }
+  .ui-sidebar-control {
+    border: var(--border-width-1) solid transparent;
+    min-height: var(--ui-sidebar-control-height);
+    padding-inline: calc(var(--ui-sidebar-control-padding) - var(--border-width-1));
+  }
+  /* Navigation stays quiet at rest; current destinations carry the semantic lift. */
+  [data-ui-sidebar-item][data-color="neutral"] {
+    --ui-option-text: var(--ui-surface-ink-subtle);
+  }
+  [data-ui-sidebar-item][data-color="neutral"]:hover {
+    --ui-option-text: var(--ui-surface-ink);
+  }
+  [data-ui-sidebar-item]:is([data-current], [aria-current]:not([aria-current="false"])):not([data-disabled]) {
+    font-weight: var(--font-weight-medium);
+  }
+  [data-ui-sidebar-item] {
+    line-height: var(--ui-sidebar-line-height);
+    letter-spacing: var(--ui-sidebar-letter-spacing);
+    font-family: var(--font-control);
+    font-size: var(--ui-sidebar-font-size);
+    font-weight: var(--ui-sidebar-font-weight);
+  }
+  .ui-sidebar-leading {
+    display: var(--ui-sidebar-reserve-leading, none);
+    min-width: var(--ui-sidebar-icon-size);
+    height: var(--ui-sidebar-icon-size);
+  }
+  .ui-sidebar-leading[data-filled] { display: flex; }
+  :is(.ui-sidebar-leading, .ui-sidebar-trailing) > svg {
+    width: var(--ui-sidebar-icon-size);
+    height: var(--ui-sidebar-icon-size);
+    flex-shrink: 0;
+  }
+  /* End accessories share one scale-backed cell; controls keep their own geometry. */
+  .ui-sidebar-trailing { min-inline-size: var(--ui-sidebar-terminal-size); }
+  .ui-sidebar-actions {
+    grid-template-columns: var(--ui-sidebar-action-columns, minmax(var(--ui-sidebar-terminal-size), max-content));
+    grid-auto-columns: minmax(var(--ui-sidebar-control-height), max-content);
+    padding-inline-end: 0;
+  }
+  .ui-sidebar-chevron { width: var(--ui-sidebar-icon-size); height: var(--ui-sidebar-icon-size); }
+  [data-ui-sidebar-group][data-variant="heading"] > [data-ui-sidebar-row] { color: var(--ui-surface-ink-muted); }
+  [data-ui-sidebar-group][data-variant="item"] > [data-ui-sidebar-row] { color: var(--ui-surface-ink-muted); }
+  [data-ui-sidebar-group][data-state="open"] > [data-ui-sidebar-row] [data-ui-sidebar-group-chevron] { rotate: 90deg; }
+  [data-ui-sidebar-group-content][hidden] { display: none; }
+  [data-ui-sidebar-group] { --ui-sidebar-label-indent: var(--ui-sidebar-control-padding); --ui-sidebar-guide-offset: 0px; }
+  [data-ui-sidebar-group]:has(> [data-ui-sidebar-row] [data-ui-sidebar-leading][data-filled]) {
+    --ui-sidebar-label-indent: calc(var(--ui-sidebar-control-padding) + var(--ui-sidebar-icon-size) + var(--spacing-2));
+    --ui-sidebar-guide-offset: calc(var(--ui-sidebar-control-padding) + var(--ui-sidebar-icon-size) / 2);
+  }
+  [data-ui-sidebar-list][data-leading="reserve"] > [data-ui-sidebar-group] {
+    --ui-sidebar-label-indent: calc(var(--ui-sidebar-control-padding) + var(--ui-sidebar-icon-size) + var(--spacing-2));
+    --ui-sidebar-guide-offset: calc(var(--ui-sidebar-control-padding) + var(--ui-sidebar-icon-size) / 2);
+  }
+  [data-ui-sidebar-list][data-guide="line"]::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(0px - var(--ui-sidebar-list-indent) / 2);
+    border-inline-start: var(--border-width-edge-divider) solid var(--color-separator);
+    pointer-events: none;
+  }
+  [data-ui-sidebar-list][data-guide="line"][data-indent="label"]::before {
+    inset-inline-start: calc(var(--ui-sidebar-guide-offset, 0px) - var(--ui-sidebar-list-indent));
+  }
+  [data-ui-sidebar-list][data-guide="line"][data-indent="0"] { padding-inline-start: var(--spacing-2); }
+  @media (hover: hover) and (pointer: fine) {
+    [data-ui-sidebar-row][data-actions-visibility="hover"] > .ui-sidebar-actions { opacity: 0; }
+    [data-ui-sidebar-row][data-actions-visibility="hover"]:is(:hover, :focus-within, :has(> .ui-sidebar-actions [aria-expanded="true"])) > .ui-sidebar-actions { opacity: 1; }
+  }
+
   [data-ui-app][data-sidebar-transitioning="true"] > :where(
     [data-ui-app-header],
     [data-ui-app-main],
     [data-ui-app-footer]
   ) {
+    /* Keep the canvas above the retained panel as the sidebar track closes. */
+    isolation: isolate;
     background-color: var(--ui-surface-color);
   }
 
   [data-ui-sidebar] {
+    --ui-sidebar-body-width: 100%;
     --ui-active-elevation-shadow-layers: var(--ui-sidebar-drawer-elevation);
+    --ui-sidebar-resize-min-width: var(--spacing-sidebar-min-width);
+    --ui-sidebar-resize-max-width: var(--spacing-sidebar-max-width);
+    --ui-sidebar-resize-min-height: var(--spacing-sidebar-min-height);
+    --ui-sidebar-resize-max-height: var(--spacing-sidebar-max-height);
   }
 
   [data-ui-sidebar][data-responsive-mode="desktop"][data-desktop-state="expanded"] {
     --ui-active-elevation-shadow-layers: var(--ui-sidebar-resting-elevation);
   }
 
+  [data-ui-sidebar][data-placement="top"][data-responsive-mode="desktop"] [data-ui-sidebar-nav] > [data-ui-sidebar-list] {
+    display: flex;
+    align-items: center;
+  }
+
   [data-ui-sidebar-state-icon] [data-ui-sidebar-state-icon-when] {
     display: none;
   }
@@ -24,3 +221,24 @@
     display: block;
   }
 }
+
+/* Resolve numbered generated spacing, including fluid half steps, at the consumer. */
+@utility ui-sidebar-indent-* {
+  --ui-sidebar-list-indent: --value(--spacing-*);
+}
+
+/* Heading is a grid participant; its typography recipe otherwise emits block. */
+@utility ui-sidebar-heading {
+  display: grid;
+}
+
+/* Inherited Sidebar labels share the list control scale; numeric Heading sizes stay explicit. */
+@utility ui-sidebar-type-inherit {
+  &.ui-sidebar-heading {
+    font-family: var(--font-control);
+    font-size: var(--ui-sidebar-font-size);
+    line-height: var(--ui-sidebar-line-height);
+    letter-spacing: var(--ui-sidebar-letter-spacing);
+    font-weight: var(--ui-sidebar-font-weight);
+  }
+}

package/packages/client/src/components/slider/styles.css

@@ -0,0 +1,57 @@
+@layer utilities {
+  /* The Field owns the header shared by its label and Slider values. Keep the
+     semantic wrappers in place while their children participate in one grid. */
+  [data-ui-field][data-ui-layout-mode="stack"]:has(> [data-ui-field-label]):has(> [data-ui-field-control] > [data-ui-slider][data-show-value]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+
+    > [data-ui-field-label] {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    > [data-ui-field-control],
+    > [data-ui-field-control] > [data-ui-slider] {
+      display: contents;
+    }
+
+    > [data-ui-field-control] > [data-ui-slider] > [data-ui-slider-value] {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    > [data-ui-field-description],
+    > [data-ui-field-error],
+    > [data-ui-field-control] > [data-ui-slider] > [data-ui-slider-root],
+    > [data-ui-field-control] > [data-ui-slider] > [data-ui-slider-ticks] {
+      grid-column: 1 / -1;
+    }
+  }
+
+  [data-ui-slider-value] > span:has(> [data-ui-slider-value-input]:not([hidden])) {
+    min-width: 5ch;
+  }
+
+  [data-ui-slider-value-label],
+  [data-ui-slider-value] > [aria-hidden] {
+    text-box: trim-both cap alphabetic;
+  }
+
+  /* Keep a full control-sized pointer target without introducing blank space
+     between the Field header and the visible Slider. */
+  [data-ui-slider-root]::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  [data-ui-slider-root][data-orientation="horizontal"]::before {
+    top: calc((var(--ui-slider-thumb-size) - var(--spacing-control-lg)) / 2);
+    bottom: calc((var(--ui-slider-thumb-size) - var(--spacing-control-lg)) / 2);
+  }
+
+  [data-ui-slider-root][data-orientation="vertical"]::before {
+    left: calc((var(--ui-slider-thumb-size) - var(--spacing-control-lg)) / 2);
+    right: calc((var(--ui-slider-thumb-size) - var(--spacing-control-lg)) / 2);
+  }
+}