Align selects ranges and modal catalog

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>