@simplysm/solid 13.0.85 → 13.0.88

package/src/components/form-control/combobox/Combobox.tsx

@@ -137,7 +137,9 @@ const ComboboxItem: ParentComponent<ComboboxItemProps> = <TValue,>(
 //#endregion
 
 // Props definition
-export interface ComboboxProps<TValue = unknown> {
+
+/** Base props shared by all Combobox variants */
+interface ComboboxBaseProps<TValue> {
   /** Currently selected value */
   value?: TValue;
 
@@ -150,12 +152,6 @@ export interface ComboboxProps<TValue = unknown> {
   /** Debounce delay (default: 300ms) */
   debounceMs?: number;
 
-  /** Allow custom values */
-  allowsCustomValue?: boolean;
-
-  /** Custom value parsing function */
-  parseCustomValue?: (text: string) => TValue;
-
   /** Function to render selected value (required) */
   renderValue: (value: TValue) => JSX.Element;
 
@@ -190,6 +186,29 @@ export interface ComboboxProps<TValue = unknown> {
   children?: JSX.Element;
 }
 
+/** Custom value with parser: TValue can be anything */
+interface ComboboxCustomParserProps<TValue> extends ComboboxBaseProps<TValue> {
+  allowsCustomValue: true;
+  parseCustomValue: (text: string) => TValue;
+}
+
+/** Custom value without parser: TValue MUST be string */
+interface ComboboxCustomStringProps extends ComboboxBaseProps<string> {
+  allowsCustomValue: true;
+  parseCustomValue?: undefined;
+}
+
+/** No custom value (default) */
+interface ComboboxDefaultProps<TValue> extends ComboboxBaseProps<TValue> {
+  allowsCustomValue?: false;
+  parseCustomValue?: undefined;
+}
+
+export type ComboboxProps<TValue = unknown> =
+  | ComboboxCustomParserProps<TValue>
+  | ComboboxCustomStringProps
+  | ComboboxDefaultProps<TValue>;
+
 /**
  * Combobox component
  *
@@ -220,8 +239,15 @@ export interface ComboboxProps<TValue = unknown> {
  * </Combobox>
  * ```
  */
+/** Internal props used after splitProps — collapses the discriminated union for runtime use */
+interface ComboboxInternalProps<TValue> extends ComboboxBaseProps<TValue> {
+  allowsCustomValue?: boolean;
+  parseCustomValue?: (text: string) => TValue;
+  children?: JSX.Element;
+}
+
 const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
-  const [local, rest] = splitProps(props as ComboboxProps<TValue> & { children?: JSX.Element }, [
+  const [local, rest] = splitProps(props as ComboboxInternalProps<TValue>, [
     "children",
     "class",
     "style",
@@ -252,8 +278,8 @@ const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
   // Selected value management (controlled/uncontrolled pattern)
   const [getValue, setInternalValue] = createControllableSignal<TValue | undefined>({
     value: () => local.value,
-    onChange: () => local.onValueChange,
-  } as Parameters<typeof createControllableSignal<TValue | undefined>>[0]);
+    onChange: () => local.onValueChange as ((value: TValue | undefined) => void) | undefined,
+  });
 
   // Debounce queue (created once on mount, debounceMs only used as initial value)
   const debounceQueue = new DebounceQueue(local.debounceMs ?? 300);
@@ -270,7 +296,7 @@ const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
 
   // Select value
   const selectValue = (value: TValue) => {
-    setInternalValue(value as any);
+    setInternalValue(value);
     setQuery("");
     setOpen(false);
   };
@@ -346,9 +372,8 @@ const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
       if (local.parseCustomValue) {
         selectValue(local.parseCustomValue(query()));
       } else {
-        setInternalValue(undefined as any);
-        setQuery("");
-        setOpen(false);
+        // TValue is string when parseCustomValue is not provided (enforced by type system)
+        selectValue(query() as TValue);
       }
     }
   };
@@ -391,6 +416,7 @@ const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
           class={clsx("min-w-0 flex-1 bg-transparent outline-none", text.placeholder)}
           value={query()}
           placeholder={currentValue === undefined ? local.placeholder : undefined}
+
           disabled={local.disabled}
           autocomplete="one-time-code"
           onInput={handleInput}
@@ -399,7 +425,7 @@ const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
     }
 
     // Show value if selected and dropdown is closed
-    return <div class="truncate">{local.renderValue(currentValue)}</div>;
+    return <div class="whitespace-nowrap">{local.renderValue(currentValue)}</div>;
   };
 
   // Render items
@@ -454,7 +480,7 @@ const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
                 style={local.style}
                 onKeyDown={handleTriggerKeyDown}
               >
-                <div class="flex-1 overflow-hidden whitespace-nowrap">{renderDisplayContent()}</div>
+                <div class="flex-1 whitespace-nowrap">{renderDisplayContent()}</div>
                 <div class={chevronWrapperClass}>
                   <Show
                     when={busyCount() > 0}

package/src/components/form-control/date-range-picker/DateRangePicker.tsx

@@ -3,9 +3,8 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { DateOnly } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { type FieldSize } from "../field/Field.styles";
 import { text } from "../../../styles/base.styles";
-import { gap } from "../../../styles/control.styles";
+import { type ComponentSize, gap } from "../../../styles/control.styles";
 import { DatePicker } from "../field/DatePicker";
 import { Select } from "../select/Select";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
@@ -38,7 +37,7 @@ export interface DateRangePickerProps {
   disabled?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Custom class */
   class?: string;
@@ -169,7 +168,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
         required
         disabled={local.disabled}
         size={local.size}
-        inset
+        class="min-w-0"
       >
         <Select.Item value={"day" as DateRangePeriodType}>
           {i18n.t("dateRangePicker.day")}
@@ -189,6 +188,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
             unit={periodType() === "month" ? "month" : "date"}
             value={from()}
             onValueChange={handleFromChange}
+            required={local.required}
             disabled={local.disabled}
             size={local.size}
           />
@@ -198,6 +198,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
           unit="date"
           value={from()}
           onValueChange={handleFromChange}
+          required={local.required}
           disabled={local.disabled}
           size={local.size}
         />
@@ -207,6 +208,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
           value={to()}
           onValueChange={handleToChange}
           min={from()}
+          required={local.required}
           disabled={local.disabled}
           size={local.size}
         />

package/src/components/form-control/editor/RichTextEditor.tsx

@@ -23,9 +23,8 @@ import TableHeader from "@tiptap/extension-table-header";
 import TableCell from "@tiptap/extension-table-cell";
 import Image from "@tiptap/extension-image";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import type { FieldSize } from "../field/Field.styles";
 import { bg, border, text } from "../../../styles/base.styles";
-import { pad } from "../../../styles/control.styles";
+import { type ComponentSize, pad } from "../../../styles/control.styles";
 import { EditorToolbar } from "./EditorToolbar";
 
 export interface RichTextEditorProps {
@@ -39,7 +38,7 @@ export interface RichTextEditorProps {
   disabled?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Custom class */
   class?: string;
@@ -49,7 +48,7 @@ export interface RichTextEditorProps {
 }
 
 // Editor content size-based style
-const editorContentSizeClasses: Record<FieldSize, string> = {
+const editorContentSizeClasses: Record<ComponentSize, string> = {
   md: clsx(pad.xl, "min-h-32"),
   xs: clsx(pad.xs, "min-h-12"),
   sm: clsx(pad.sm, "min-h-24"),
@@ -151,7 +150,7 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
       {...rest}
       data-rich-text-editor
       class={twMerge(
-        clsx("flex flex-col bg-primary-50 dark:bg-primary-950/30", text.default, "border", border.default, "rounded focus-within:border-primary-500"),
+        clsx("flex flex-col", text.default, "border", border.default, "rounded focus-within:border-primary-500"),
         local.disabled && clsx(bg.muted, text.muted),
         local.class,
       )}
@@ -164,7 +163,7 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
           </Show>
         )}
       </Show>
-      <div ref={editorRef} class={twMerge("outline-none prose prose-sm max-w-none dark:prose-invert", editorContentSizeClasses[local.size ?? "md"])} />
+      <div ref={editorRef} class={twMerge("outline-none prose prose-sm max-w-none dark:prose-invert bg-primary-50 dark:bg-primary-950/30", editorContentSizeClasses[local.size ?? "md"])} />
     </div>
   );
 };

package/src/components/form-control/field/DatePicker.tsx

@@ -1,7 +1,8 @@
 import { type Component, createMemo, type JSX, splitProps } from "solid-js";
 import { DateOnly } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { fieldInputClass, type FieldSize, getFieldWrapperClass } from "./Field.styles";
+import { fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import type { ComponentSize } from "../../../styles/control.styles";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { FieldShell } from "./FieldShell";
 
@@ -33,7 +34,7 @@ export interface DatePickerProps {
   readOnly?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Borderless style */
   inset?: boolean;

package/src/components/form-control/field/DateTimePicker.tsx

@@ -1,7 +1,8 @@
 import { type Component, createMemo, type JSX, splitProps } from "solid-js";
 import { DateTime } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import { fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import type { ComponentSize } from "../../../styles/control.styles";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { FieldShell } from "./FieldShell";
 
@@ -33,7 +34,7 @@ export interface DateTimePickerProps {
   readOnly?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Borderless style */
   inset?: boolean;

package/src/components/form-control/field/Field.styles.ts

@@ -3,8 +3,6 @@ import { twMerge } from "tailwind-merge";
 import { type ComponentSize, gap, pad } from "../../../styles/control.styles";
 import { border, text } from "../../../styles/base.styles";
 
-export type FieldSize = ComponentSize;
-
 // ── Form Field Common Surface (background + text + border + focus) ──
 export const fieldSurface = clsx(
   "bg-primary-50 dark:bg-primary-950/30",
@@ -23,7 +21,7 @@ export const fieldBaseClass = clsx(
 );
 
 // Size-specific styles
-export const fieldSizeClasses: Record<FieldSize, string> = {
+export const fieldSizeClasses: Record<ComponentSize, string> = {
   md: clsx("h-field", pad.md),
   xs: clsx("h-field-xs", pad.xs),
   sm: clsx("h-field-sm", pad.sm),
@@ -41,7 +39,7 @@ export const fieldInsetClass = clsx(
 );
 
 // Inset heights (excluding 2px border)
-export const fieldInsetSizeHeightClasses: Record<FieldSize, string> = {
+export const fieldInsetSizeHeightClasses: Record<ComponentSize, string> = {
   md: clsx`h-field-inset`,
   xs: clsx`h-field-inset-xs`,
   sm: clsx`h-field-inset-sm`,
@@ -56,7 +54,7 @@ export const fieldDisabledClass = clsx("bg-base-100 text-base-500 dark:bg-base-8
 export const textAreaBaseClass = clsx("inline-block w-48", fieldSurface);
 
 // Textarea size-specific styles (h-field-* removed)
-export const textAreaSizeClasses: Record<FieldSize, string> = {
+export const textAreaSizeClasses: Record<ComponentSize, string> = {
   md: pad.md,
   xs: pad.xs,
   sm: pad.sm,
@@ -74,7 +72,7 @@ export const fieldInputClass = clsx(
 );
 
 // Prefix icon gap classes (replaces nested ternary)
-export const fieldGapClasses: Record<FieldSize, string> = {
+export const fieldGapClasses: Record<ComponentSize, string> = {
   md: gap.md,
   xs: gap.xs,
   sm: gap.sm,
@@ -84,7 +82,7 @@ export const fieldGapClasses: Record<FieldSize, string> = {
 
 // Shared wrapper class generation function
 export function getFieldWrapperClass(options: {
-  size?: FieldSize;
+  size?: ComponentSize;
   disabled?: boolean;
   inset?: boolean;
   includeCustomClass?: string | false;
@@ -103,7 +101,7 @@ export function getFieldWrapperClass(options: {
 
 // Textarea-specific wrapper class generation function
 export function getTextareaWrapperClass(options: {
-  size?: FieldSize;
+  size?: ComponentSize;
   disabled?: boolean;
   inset?: boolean;
   includeCustomClass?: string | false;

package/src/components/form-control/field/NumberInput.tsx

@@ -9,11 +9,11 @@ import {
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { createSlot } from "../../../helpers/createSlot";
 import {
-  type FieldSize,
   fieldInputClass,
   fieldGapClasses,
   getFieldWrapperClass,
 } from "./Field.styles";
+import type { ComponentSize } from "../../../styles/control.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { FieldShell } from "./FieldShell";
@@ -49,7 +49,7 @@ export interface NumberInputProps {
   readOnly?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Borderless style */
   inset?: boolean;
@@ -332,6 +332,7 @@ const NumberInputInner = (props: NumberInputProps): JSX.Element => {
           )}
           value={displayValue()}
           placeholder={local.placeholder}
+
           title={local.title}
           autocomplete="one-time-code"
           onInput={handleInput}

package/src/components/form-control/field/TextInput.tsx

@@ -5,9 +5,9 @@ import { createIMEHandler } from "../../../hooks/createIMEHandler";
 import {
   fieldGapClasses,
   fieldInputClass,
-  type FieldSize,
   getFieldWrapperClass,
 } from "./Field.styles";
+import type { ComponentSize } from "../../../styles/control.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { FieldShell } from "./FieldShell";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
@@ -41,7 +41,7 @@ export interface TextInputProps {
   readOnly?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Borderless style */
   inset?: boolean;
@@ -286,6 +286,7 @@ const TextInputInner = (props: TextInputProps) => {
           class={fieldInputClass}
           value={inputValue()}
           placeholder={local.placeholder}
+
           title={local.title}
           autocomplete={local.autocomplete ?? "one-time-code"}
           onInput={handleInput}

package/src/components/form-control/field/Textarea.tsx

@@ -4,7 +4,8 @@ import { twMerge } from "tailwind-merge";
 import { text } from "../../../styles/base.styles";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { createIMEHandler } from "../../../hooks/createIMEHandler";
-import { type FieldSize, textAreaSizeClasses, getTextareaWrapperClass } from "./Field.styles";
+import { textAreaSizeClasses, getTextareaWrapperClass } from "./Field.styles";
+import type { ComponentSize } from "../../../styles/control.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { FieldShell } from "./FieldShell";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
@@ -29,7 +30,7 @@ export interface TextareaProps {
   readOnly?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Borderless style */
   inset?: boolean;

package/src/components/form-control/field/TimePicker.tsx

@@ -1,7 +1,8 @@
 import { type Component, createMemo, type JSX, splitProps } from "solid-js";
 import { Time } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import { fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import type { ComponentSize } from "../../../styles/control.styles";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { FieldShell } from "./FieldShell";
 
@@ -27,7 +28,7 @@ export interface TimePickerProps {
   readOnly?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Borderless style */
   inset?: boolean;

package/src/components/form-control/numpad/Numpad.tsx

@@ -127,7 +127,7 @@ export const Numpad: Component<NumpadProps> = (props) => {
     setInputStr(valueToInputStr(val));
   };
 
-  const buttonSize = () => props.size ?? "lg";
+  const buttonSize = () => props.size ?? "md";
 
   return (
     <div data-numpad class={twMerge(clsx("grid grid-cols-3", gap.sm, "w-auto"), props.class)} style={props.style}>
@@ -138,7 +138,7 @@ export const Numpad: Component<NumpadProps> = (props) => {
           onValueChange={handleFieldValueChange}
           placeholder={props.placeholder}
           readOnly={props.inputDisabled}
-          inset
+          size={buttonSize()}
           class="w-full"
           useGrouping={false}
         />
@@ -148,7 +148,6 @@ export const Numpad: Component<NumpadProps> = (props) => {
           theme="primary"
           variant="solid"
           size={buttonSize()}
-          inset
           disabled={props.required && value() == null}
           onClick={handleEnter}
         >
@@ -158,60 +157,59 @@ export const Numpad: Component<NumpadProps> = (props) => {
 
       {/* Row 2: optional Minus + C + BS */}
       <Show when={props.withMinusButton}>
-        <Button size={buttonSize()} inset onClick={handleMinus}>
+        <Button size={buttonSize()} onClick={handleMinus}>
           -
         </Button>
       </Show>
       <Button
         size={buttonSize()}
-        inset
-        onClick={handleClear}
+               onClick={handleClear}
         class={clsx(props.withMinusButton ? "col-span-1" : "col-span-2", "text-danger-500")}
       >
         <Icon icon={IconEraser} />
       </Button>
-      <Button size={buttonSize()} inset onClick={handleBackspace} class="text-warning-500">
+      <Button size={buttonSize()} onClick={handleBackspace} class="text-warning-500">
         <Icon icon={IconArrowLeft} />
       </Button>
 
       {/* Row 3: 7 8 9 */}
-      <Button size={buttonSize()} inset onClick={() => handleDigit("7")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("7")}>
         7
       </Button>
-      <Button size={buttonSize()} inset onClick={() => handleDigit("8")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("8")}>
         8
       </Button>
-      <Button size={buttonSize()} inset onClick={() => handleDigit("9")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("9")}>
         9
       </Button>
 
       {/* Row 4: 4 5 6 */}
-      <Button size={buttonSize()} inset onClick={() => handleDigit("4")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("4")}>
         4
       </Button>
-      <Button size={buttonSize()} inset onClick={() => handleDigit("5")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("5")}>
         5
       </Button>
-      <Button size={buttonSize()} inset onClick={() => handleDigit("6")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("6")}>
         6
       </Button>
 
       {/* Row 5: 1 2 3 */}
-      <Button size={buttonSize()} inset onClick={() => handleDigit("1")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("1")}>
         1
       </Button>
-      <Button size={buttonSize()} inset onClick={() => handleDigit("2")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("2")}>
         2
       </Button>
-      <Button size={buttonSize()} inset onClick={() => handleDigit("3")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("3")}>
         3
       </Button>
 
       {/* Row 6: 0 (colspan 2) + . */}
-      <Button size={buttonSize()} inset class="col-span-2" onClick={() => handleDigit("0")}>
+      <Button size={buttonSize()} class="col-span-2" onClick={() => handleDigit("0")}>
         0
       </Button>
-      <Button size={buttonSize()} inset onClick={handleDot}>
+      <Button size={buttonSize()} onClick={handleDot}>
         .
       </Button>
     </div>

package/src/components/form-control/select/Select.tsx

@@ -38,7 +38,10 @@ import {
   listItemIndentGuideClass,
   listItemContentClass,
   getListItemSelectedIconClass,
+  listItemBasePadLeft,
+  LIST_ITEM_INDENT_SIZE,
 } from "../../data/list/ListItem.styles";
+import { useListContext } from "../../data/list/ListContext";
 
 void ripple;
 
@@ -108,6 +111,7 @@ const SelectAction = (props: SelectActionProps) => {
       <button
         {...rest}
         type="button"
+        use:ripple={!rest.disabled}
         onClick={handleClick}
         class={twMerge(
           "inline-flex items-center",
@@ -177,9 +181,11 @@ export interface SelectItemProps<TValue = unknown> extends Omit<
 const SelectItemInner = <TValue,>(
   props: SelectItemProps<TValue> & { children?: JSX.Element },
 ) => {
-  const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
+  const [local, rest] = splitProps(props, ["children", "class", "style", "value", "disabled"]);
 
   const context = useSelectContext<TValue>();
+  const listContext = useListContext();
+  const level = listContext.level;
 
   const [childrenSlot, ItemChildrenProvider] = createItemChildrenSlotAccessor();
   const hasChildren = () => childrenSlot() !== undefined;
@@ -206,6 +212,13 @@ const SelectItemInner = <TValue,>(
       local.class,
     );
 
+  const indentPaddingLeft = level >= 1
+    ? `${listItemBasePadLeft[context.size()] + level * LIST_ITEM_INDENT_SIZE}rem`
+    : undefined;
+
+  const getGuideLeft = () =>
+    `${listItemBasePadLeft[context.size()] + level * LIST_ITEM_INDENT_SIZE + LIST_ITEM_INDENT_SIZE * 0.5}rem`;
+
   return (
     <ItemChildrenProvider>
       <button
@@ -213,6 +226,7 @@ const SelectItemInner = <TValue,>(
         type="button"
         use:ripple={useRipple()}
         class={getClassName()}
+        style={{ ...(local.style as JSX.CSSProperties), "padding-left": indentPaddingLeft }}
         data-select-item
         data-list-item
         role="option"
@@ -228,9 +242,9 @@ const SelectItemInner = <TValue,>(
       </button>
       <Show when={hasChildren()}>
         <Collapse open={true}>
-          <div class="flex">
-            <div class={listItemIndentGuideClass} />
-            <List inset class="flex-1">
+          <div class="relative">
+            <div class={listItemIndentGuideClass} style={{ left: getGuideLeft() }} />
+            <List inset>
               {childrenSlot()!.children}
             </List>
           </div>
@@ -622,7 +636,7 @@ const SelectInnerComponent = <TValue,>(props: SelectProps<TValue>) => {
       local.multiple === true && !local.hideSelectAll && local.items !== undefined;
 
     return (
-      <div {...rest} data-select class={clsx("group", local.inset ? "flex" : "inline-flex")}>
+      <div {...rest} data-select class={clsx("group", local.inset ? "flex" : "inline-flex", "[&>[data-dropdown-trigger]]:flex")}>
         <Dropdown disabled={local.disabled} open={open()} onOpenChange={setOpen} keyboardNav>
           <Dropdown.Trigger>
             <div