Align selects ranges and modal catalog

packages/tokens/themes.css

@@ -57,6 +57,7 @@
   --nodedc-primary-action-shadow: 0 12px 28px rgb(var(--nodedc-accent-rgb) / 0.2);
   --nodedc-modal-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)), rgba(7, 7, 10, 0.54);
   --nodedc-modal-shadow: 0 34px 120px rgba(0, 0, 0, 0.64), 0 10px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.045);
+  --nodedc-floating-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(10, 10, 13, 0.94);
 }
 
 [data-nodedc-theme="light"] {
@@ -117,4 +118,5 @@
   --nodedc-primary-action-shadow: none;
   --nodedc-modal-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.36)), rgba(255, 255, 255, 0.72);
   --nodedc-modal-shadow: 0 24px 72px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  --nodedc-floating-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.72)), rgba(255, 255, 255, 0.94);
 }

packages/ui-core/styles.css

@@ -1623,10 +1623,12 @@ textarea.nodedc-field__control {
   overflow: auto;
   border: 0;
   border-radius: var(--nodedc-radius-control);
-  background: var(--nodedc-glass-panel-surface-strong);
+  background: var(--nodedc-floating-surface);
   color: var(--nodedc-text-primary);
   padding: 0.45rem;
   box-shadow: var(--nodedc-glass-dropdown-shadow);
+  backdrop-filter: blur(var(--nodedc-blur-dropdown)) saturate(1.12);
+  -webkit-backdrop-filter: blur(var(--nodedc-blur-dropdown)) saturate(1.12);
   animation: nodedc-popover-in var(--nodedc-duration-fast) var(--nodedc-ease-standard);
 }
 
@@ -1782,7 +1784,7 @@ textarea.nodedc-field__control {
 .nodedc-dropdown-surface.nodedc-select__menu {
   gap: 0.125rem;
   border-radius: var(--nodedc-radius-control);
-  background: var(--nodedc-field-bg);
+  background: var(--nodedc-floating-surface);
   padding: 0.4375rem;
 }
 
@@ -1820,6 +1822,12 @@ textarea.nodedc-field__control {
   white-space: nowrap;
 }
 
+.nodedc-select-trigger__icon {
+  display: inline-grid;
+  min-width: 0;
+  place-items: center;
+}
+
 .nodedc-select-trigger__chevron {
   width: 0.5rem;
   height: 0.5rem;
@@ -2077,9 +2085,11 @@ textarea.nodedc-field__control {
   gap: 0.25rem;
   overflow-y: auto;
   border-radius: var(--nodedc-radius-panel);
-  background: var(--nodedc-glass-panel-surface-strong);
+  background: var(--nodedc-floating-surface);
   padding: 0.6rem;
   box-shadow: var(--nodedc-glass-dropdown-shadow);
+  backdrop-filter: blur(var(--nodedc-blur-dropdown)) saturate(1.12);
+  -webkit-backdrop-filter: blur(var(--nodedc-blur-dropdown)) saturate(1.12);
 }
 
 .nodedc-share-access__summary {

packages/ui-react/src/RangeControl.tsx

@@ -4,8 +4,6 @@ import { Dropdown } from "./Dropdown.js";
 
 export interface RangeControlProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
   label: string;
-  /** Keeps the accessible name while letting a parent ControlRow render the visible label. */
-  showLabel?: boolean;
   value: number;
   min: number;
   max: number;
@@ -15,7 +13,6 @@ export interface RangeControlProps extends Omit<InputHTMLAttributes<HTMLInputEle
 
 export function RangeControl({
   label,
-  showLabel = true,
   value,
   min,
   max,
@@ -29,7 +26,7 @@ export function RangeControl({
   const progress = Math.max(0, Math.min(100, ((value - min) / (safeMax - min)) * 100));
   const style = { "--nodedc-range-progress": `${progress}%` } as CSSProperties;
   return (
-    <label className={cn("nodedc-range", className)} data-label-hidden={showLabel ? undefined : "true"} style={style}>
+    <label className={cn("nodedc-range", className)} style={style}>
       <input
         type="range"
         value={value}
@@ -40,10 +37,10 @@ export function RangeControl({
         onChange={(event) => onChange(Number(event.target.value))}
         {...props}
       />
-      {showLabel ? <span className="nodedc-range__label">{label}</span> : null}
+      <span className="nodedc-range__label">{label}</span>
       <span className="nodedc-range__value">{formatValue(value)}</span>
       <span className="nodedc-range__fill-text" aria-hidden="true">
-        {showLabel ? <span className="nodedc-range__label">{label}</span> : null}
+        <span className="nodedc-range__label">{label}</span>
         <span className="nodedc-range__value">{formatValue(value)}</span>
       </span>
     </label>

packages/ui-react/src/Select.tsx

@@ -75,8 +75,8 @@ export function Select<T extends string>({
         if (variant === "split") {
           return (
             <div className={cn("nodedc-select", triggerClassName)}>
-              <div className="nodedc-select__control">
-                <div ref={setTriggerRef} className="nodedc-select__value">
+              <div ref={setTriggerRef} className="nodedc-select__control">
+                <div className="nodedc-select__value">
                   {selected?.icon ? <span className="nodedc-select__value-icon">{selected.icon}</span> : null}
                   <span>{selected?.label ?? "—"}</span>
                 </div>
@@ -111,7 +111,7 @@ export function Select<T extends string>({
             onClick={toggle}
             onKeyDown={handleKeyDown}
           >
-            {selected?.icon ?? null}
+            {selected?.icon ? <span className="nodedc-select-trigger__icon">{selected.icon}</span> : <span className="nodedc-select-trigger__icon" aria-hidden="true" />}
             <span className="nodedc-select-trigger__label">{selected?.label ?? "—"}</span>
             <span className="nodedc-select-trigger__chevron" aria-hidden="true" />
           </button>