@sewadah/selaras 0.9.0 → 0.10.0

package/dist/runtime/internal/FieldClearButton.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { computed } from "vue";
+import Button from "../components/Button.vue";
+import Icon from "../components/Icon.vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { fieldClearButtonTheme } from "../theme/field-clear-button";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const theme = useComponentTheme("fieldClearButton", fieldClearButtonTheme);
+const ui = computed(() => theme.value({ size: props.size }));
+const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
+const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.leadingIcon));
+const icons = useIcons();
+const messages = useMessages();
+</script>
+
+<template>
+  <Button :size="size" variant="ghost" color="neutral" square :aria-label="messages.clear" v-bind="rootProps" :ui="{ leadingIcon: iconProps }" @mousedown.prevent>
+    <template #icon="{ class: iconClass }">
+      <slot :class="iconClass">
+        <Icon :name="icons.close" :class="iconClass" />
+      </slot>
+    </template>
+  </Button>
+</template>

package/dist/runtime/internal/FieldClearButton.vue.d.ts

@@ -0,0 +1,21 @@
+import type { ButtonThemeSlots } from '../theme/button.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Props = {
+    size?: 'sm' | 'md' | 'lg';
+    ui?: UiProp<ButtonThemeSlots>;
+};
+declare var __VLS_11: {
+    class: unknown;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/internal/ListboxOption.d.vue.ts

@@ -1,4 +1,5 @@
 import type { ListboxThemeSlots } from '../theme/listbox.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { ResolvedItemOption } from './combobox-select.js';
 type __VLS_Props = {
     option: ResolvedItemOption;
@@ -7,7 +8,7 @@ type __VLS_Props = {
     disabled?: boolean;
     checkbox?: boolean;
     descriptionKey: string;
-    color: string;
+    color: ColorRole;
     size?: 'sm' | 'md' | 'lg';
     parts: Record<ListboxThemeSlots, Record<string, unknown>>;
 };

package/dist/runtime/internal/ListboxOption.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ListboxItem, ListboxItemIndicator } from "reka-ui";
 import { computed } from "vue";
+import Checkbox from "../components/Checkbox.vue";
 import Icon from "../components/Icon.vue";
 import { useIcons } from "../composables/use-icons";
 const props = defineProps({
@@ -10,7 +11,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   checkbox: { type: Boolean, required: false },
   descriptionKey: { type: String, required: true },
-  color: { type: String, required: true },
+  color: { type: null, required: true },
   size: { type: String, required: false },
   parts: { type: Object, required: true }
 });
@@ -22,7 +23,7 @@ const icon = computed(() => typeof record.value?.icon === "string" ? record.valu
 
 <template>
   <ListboxItem :value="option.value" :text-value="option.label" :disabled="disabled || option.disabled" v-bind="parts.item">
-    <span v-if="checkbox" aria-hidden="true" :data-state="selected ? 'checked' : 'unchecked'" v-bind="parts.checkbox"><Icon v-if="selected" :name="icons.check" class="size-3" /></span>
+    <Checkbox v-if="checkbox" :model-value="selected" :color="color" :size="size" :data-state="selected ? 'checked' : 'unchecked'" decorative variant="default" v-bind="parts.checkbox" />
     <slot :item="option.raw" :index="index" :selected="selected" :disabled="!!(disabled || option.disabled)">
       <Icon v-if="icon" :name="icon" v-bind="parts.icon" />
       <span v-bind="parts.itemContent">

package/dist/runtime/internal/ListboxOption.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ListboxThemeSlots } from '../theme/listbox.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { ResolvedItemOption } from './combobox-select.js';
 type __VLS_Props = {
     option: ResolvedItemOption;
@@ -7,7 +8,7 @@ type __VLS_Props = {
     disabled?: boolean;
     checkbox?: boolean;
     descriptionKey: string;
-    color: string;
+    color: ColorRole;
     size?: 'sm' | 'md' | 'lg';
     parts: Record<ListboxThemeSlots, Record<string, unknown>>;
 };

package/dist/runtime/theme/date-picker.d.ts

@@ -2,12 +2,18 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
         md: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
         lg: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
     };
     invalid: {
@@ -25,6 +31,9 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     field: string;
     segment: string;
     separator: string;
+    clear: string;
+    buttonClear: string;
+    triggerIcon: string;
     content: string;
     mobileContent: string;
     header: string;
@@ -42,12 +51,18 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
         md: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
         lg: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
     };
     invalid: {
@@ -65,6 +80,9 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     field: string;
     segment: string;
     separator: string;
+    clear: string;
+    buttonClear: string;
+    triggerIcon: string;
     content: string;
     mobileContent: string;
     header: string;
@@ -82,12 +100,18 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
         md: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
         lg: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
     };
     invalid: {
@@ -105,6 +129,9 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     field: string;
     segment: string;
     separator: string;
+    clear: string;
+    buttonClear: string;
+    triggerIcon: string;
     content: string;
     mobileContent: string;
     header: string;

package/dist/runtime/theme/date-picker.js

@@ -18,6 +18,9 @@ export const datePickerTheme = tv({
     // Between the two segment groups in range mode - a plain en dash, not an
     // arrow glyph, so there's nothing directional to mirror under RTL.
     separator: "px-0.5 text-[var(--selaras-resolved-text-muted)]",
+    clear: "shrink-0",
+    buttonClear: "absolute top-1/2 -translate-y-1/2",
+    triggerIcon: "shrink-0",
     // Copied from theme/dropdown.ts's `content` - the more complete of this
     // library's two floating-panel precedents (directional slide-in, not
     // just fade/zoom).
@@ -55,9 +58,9 @@ export const datePickerTheme = tv({
   },
   variants: {
     size: {
-      sm: { field: "h-8 px-2.5 text-sm" },
-      md: { field: "h-10 px-3 text-sm" },
-      lg: { field: "h-11 px-3.5 text-base" }
+      sm: { field: "h-8 px-2.5 text-sm", buttonClear: "end-8", triggerIcon: "size-4" },
+      md: { field: "h-10 px-3 text-sm", buttonClear: "end-10", triggerIcon: "size-4.5" },
+      lg: { field: "h-11 px-3.5 text-base", buttonClear: "end-11", triggerIcon: "size-5" }
     },
     invalid: {
       true: { field: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus-within:ring-[var(--_selaras-color-focus)]" }

package/dist/runtime/theme/editable.d.ts

@@ -0,0 +1,155 @@
+export declare const editableTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            preview: string;
+            input: string;
+        };
+        md: {
+            preview: string;
+            input: string;
+            controls: string;
+        };
+        lg: {
+            preview: string;
+            input: string;
+            controls: string;
+        };
+    };
+    color: {
+        primary: "";
+        secondary: "";
+        neutral: "";
+        success: "";
+        danger: "";
+        warning: "";
+        info: "";
+    };
+    multiline: {
+        true: {
+            preview: string;
+            input: string;
+        };
+    };
+    empty: {
+        true: {
+            preview: string;
+        };
+    };
+    invalid: {
+        true: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    area: string;
+    preview: string;
+    input: string;
+    controls: string;
+    edit: string;
+    submit: string;
+    cancel: string;
+}, undefined, {
+    size: {
+        sm: {
+            preview: string;
+            input: string;
+        };
+        md: {
+            preview: string;
+            input: string;
+            controls: string;
+        };
+        lg: {
+            preview: string;
+            input: string;
+            controls: string;
+        };
+    };
+    color: {
+        primary: "";
+        secondary: "";
+        neutral: "";
+        success: "";
+        danger: "";
+        warning: "";
+        info: "";
+    };
+    multiline: {
+        true: {
+            preview: string;
+            input: string;
+        };
+    };
+    empty: {
+        true: {
+            preview: string;
+        };
+    };
+    invalid: {
+        true: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    area: string;
+    preview: string;
+    input: string;
+    controls: string;
+    edit: string;
+    submit: string;
+    cancel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            preview: string;
+            input: string;
+        };
+        md: {
+            preview: string;
+            input: string;
+            controls: string;
+        };
+        lg: {
+            preview: string;
+            input: string;
+            controls: string;
+        };
+    };
+    color: {
+        primary: "";
+        secondary: "";
+        neutral: "";
+        success: "";
+        danger: "";
+        warning: "";
+        info: "";
+    };
+    multiline: {
+        true: {
+            preview: string;
+            input: string;
+        };
+    };
+    empty: {
+        true: {
+            preview: string;
+        };
+    };
+    invalid: {
+        true: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    area: string;
+    preview: string;
+    input: string;
+    controls: string;
+    edit: string;
+    submit: string;
+    cancel: string;
+}>>;
+export type EditableThemeSlots = keyof (typeof editableTheme)['slots'];

package/dist/runtime/theme/editable.js

@@ -0,0 +1,25 @@
+import { tv } from "tailwind-variants";
+export const editableTheme = tv({
+  slots: {
+    root: "relative inline-flex w-full items-start gap-2",
+    area: "relative min-w-0 flex-1",
+    preview: "flex w-full items-center rounded-[var(--selaras-resolved-radius-md)] bg-transparent text-start text-[var(--selaras-resolved-text-default)] outline-none transition-colors hover:bg-[var(--selaras-resolved-surface-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)] disabled:opacity-50 disabled:cursor-not-allowed",
+    input: "w-full rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] text-[var(--selaras-resolved-text-default)] ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] placeholder:text-[var(--selaras-resolved-text-muted)] outline-none transition-[color,background-color,box-shadow] not-focus:hover:ring-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus:ring-2 focus:ring-[var(--_selaras-color-focus)] disabled:opacity-50 disabled:pointer-events-none",
+    controls: "flex shrink-0 items-center gap-1",
+    edit: "",
+    submit: "",
+    cancel: ""
+  },
+  variants: {
+    size: {
+      sm: { preview: "min-h-8 px-2.5 text-sm", input: "h-8 px-2.5 text-sm" },
+      md: { preview: "min-h-10 px-3 text-sm", input: "h-10 px-3 text-sm", controls: "py-1" },
+      lg: { preview: "min-h-11 px-3.5 text-base", input: "h-11 px-3.5 text-base", controls: "py-0.5" }
+    },
+    color: { primary: "", secondary: "", neutral: "", success: "", danger: "", warning: "", info: "" },
+    multiline: { true: { preview: "whitespace-pre-wrap break-words py-2", input: "h-auto py-2" } },
+    empty: { true: { preview: "text-[var(--selaras-resolved-text-muted)]" } },
+    invalid: { true: { input: "ring-[var(--_selaras-color-border)] focus:ring-[var(--_selaras-color-focus)]" } }
+  },
+  defaultVariants: { size: "md", color: "primary" }
+});

package/dist/runtime/theme/field-clear-button.d.ts

@@ -0,0 +1,56 @@
+export declare const fieldClearButtonTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+            icon: string;
+        };
+        md: {
+            base: string;
+            icon: string;
+        };
+        lg: {
+            base: string;
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    size: {
+        sm: {
+            base: string;
+            icon: string;
+        };
+        md: {
+            base: string;
+            icon: string;
+        };
+        lg: {
+            base: string;
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            base: string;
+            icon: string;
+        };
+        md: {
+            base: string;
+            icon: string;
+        };
+        lg: {
+            base: string;
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+}>>;
+export type FieldClearButtonThemeSlots = keyof (typeof fieldClearButtonTheme)['slots'];

package/dist/runtime/theme/field-clear-button.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+export const fieldClearButtonTheme = tv({
+  slots: {
+    base: "shrink-0 rounded-full text-[var(--selaras-resolved-text-muted)] hover:bg-[var(--selaras-resolved-border-default)] hover:text-[var(--selaras-resolved-text-default)] active:bg-[var(--selaras-resolved-border-hover)] focus-visible:outline-offset-0",
+    icon: "shrink-0"
+  },
+  variants: {
+    size: {
+      sm: { base: "size-6", icon: "size-4" },
+      md: { base: "size-7", icon: "size-4.5" },
+      lg: { base: "size-8", icon: "size-5" }
+    }
+  },
+  defaultVariants: { size: "md" }
+});

package/dist/runtime/theme/input.d.ts

@@ -4,19 +4,16 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
             base: string;
             leadingIcon: string;
             trailingIcon: string;
-            clear: string;
         };
         md: {
             base: string;
             leadingIcon: string;
             trailingIcon: string;
-            clear: string;
         };
         lg: {
             base: string;
             leadingIcon: string;
             trailingIcon: string;
-            clear: string;
         };
     };
     color: {
@@ -53,19 +50,16 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
             base: string;
             leadingIcon: string;
             trailingIcon: string;
-            clear: string;
         };
         md: {
             base: string;
             leadingIcon: string;
             trailingIcon: string;
-            clear: string;
         };
         lg: {
             base: string;
             leadingIcon: string;
             trailingIcon: string;
-            clear: string;
         };
     };
     color: {
@@ -102,19 +96,16 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
             base: string;
             leadingIcon: string;
             trailingIcon: string;
-            clear: string;
         };
         md: {
             base: string;
             leadingIcon: string;
             trailingIcon: string;
-            clear: string;
         };
         lg: {
             base: string;
             leadingIcon: string;
             trailingIcon: string;
-            clear: string;
         };
     };
     color: {

package/dist/runtime/theme/input.js

@@ -16,21 +16,14 @@ export const inputTheme = tv({
     trailingIcon: "absolute end-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     // A separate slot from trailingIcon (not reused) - that one is a
     // decorative, non-interactive icon; this is a real dismiss button.
-    // Rendered as an <SButton> (ghost/neutral) - real chrome, focus ring
-    // and rounded-full (this dismiss-glyph family reads better circular
-    // than the library's usual rounded-md) come from Button's own theme;
-    // this slot only positions it and shrinks it below the input's full
-    // height (Button's own size steps match that height exactly, which
-    // once centered still touches both edges with zero margin) - explicit
-    // top-1/2 -translate-y-1/2 centering, not the root's items-center,
-    // since position:absolute drops it out of that flex flow.
-    clear: "absolute end-1 top-1/2 -translate-y-1/2 shrink-0 rounded-full"
+    // The shared clear control owns its target size, icon, and feedback.
+    clear: "absolute end-1 top-1/2 -translate-y-1/2"
   },
   variants: {
     size: {
-      sm: { base: "h-8 px-2.5 text-sm", leadingIcon: "size-4", trailingIcon: "size-4", clear: "size-7" },
-      md: { base: "h-10 px-3 text-sm", leadingIcon: "size-4.5", trailingIcon: "size-4.5", clear: "size-9" },
-      lg: { base: "h-11 px-3.5 text-base", leadingIcon: "size-5", trailingIcon: "size-5", clear: "size-10" }
+      sm: { base: "h-8 px-2.5 text-sm", leadingIcon: "size-4", trailingIcon: "size-4" },
+      md: { base: "h-10 px-3 text-sm", leadingIcon: "size-4.5", trailingIcon: "size-4.5" },
+      lg: { base: "h-11 px-3.5 text-base", leadingIcon: "size-5", trailingIcon: "size-5" }
     },
     // Focus-ring color only - the resting ring stays --selaras-resolved-border-default regardless
     // of `color`, matching a Nuxt-ecosystem component kit's own Input

package/dist/runtime/theme/listbox.js

@@ -15,7 +15,7 @@ export const listboxTheme = tv({
     itemContent: "flex min-w-0 flex-1 flex-col gap-0.5",
     icon: "size-4 shrink-0",
     indicator: "ms-auto flex size-4 shrink-0 items-center justify-center text-[var(--_selaras-color-indicator)]",
-    checkbox: "pointer-events-none flex size-4 shrink-0 items-center justify-center rounded-[var(--selaras-resolved-radius-sm)] border border-[var(--selaras-resolved-border-default)] data-[state=checked]:border-[var(--_selaras-color-fill)] data-[state=checked]:bg-[var(--_selaras-color-fill)] data-[state=checked]:text-[var(--_selaras-color-on-fill)]",
+    checkbox: "pointer-events-none shrink-0",
     empty: "px-3 py-6 text-center text-sm text-[var(--selaras-resolved-text-muted)]"
   },
   variants: {

package/dist/runtime/theme/select.d.ts

@@ -2,12 +2,15 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             trigger: string;
+            icon: string;
         };
         md: {
             trigger: string;
+            icon: string;
         };
         lg: {
             trigger: string;
+            icon: string;
         };
     };
     color: {
@@ -51,12 +54,15 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             trigger: string;
+            icon: string;
         };
         md: {
             trigger: string;
+            icon: string;
         };
         lg: {
             trigger: string;
+            icon: string;
         };
     };
     color: {
@@ -100,12 +106,15 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             trigger: string;
+            icon: string;
         };
         md: {
             trigger: string;
+            icon: string;
         };
         lg: {
             trigger: string;
+            icon: string;
         };
     };
     color: {

package/dist/runtime/theme/select.js

@@ -23,13 +23,14 @@ export const selectTheme = tv({
     // soft (the same pairing Chip's own soft variant uses) clears 6.5:1.
     chipOverflow: "inline-flex items-center rounded-[var(--selaras-resolved-radius-sm)] bg-[var(--_selaras-color-subtle)] px-2 py-0.5 text-xs text-[var(--_selaras-color-text)]",
     icon: "shrink-0 text-[var(--selaras-resolved-text-muted)]",
-    // Rendered as an <SButton> (ghost/neutral) - real chrome, focus ring
-    // and touch target come from Button's own theme; only rounded-full
-    // (this dismiss-glyph family reads better circular) stays here.
-    clear: "shrink-0 rounded-full",
-    dropdown: "shrink-0 rounded-[var(--selaras-resolved-radius-sm)] p-0.5 text-[var(--selaras-resolved-text-muted)] transition-colors hover:bg-[var(--selaras-resolved-border-default)] hover:text-[var(--selaras-resolved-text-default)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)]",
-    searchWrapper: "flex items-center gap-2 border-b border-[var(--selaras-resolved-border-default)] px-2",
-    searchInput: "h-9 min-w-16 flex-1 bg-transparent text-sm text-[var(--selaras-resolved-text-default)] outline-none placeholder:text-[var(--selaras-resolved-text-muted)]",
+    // Layout only; FieldClearButton owns the shared interaction treatment.
+    clear: "",
+    dropdown: "inline-flex shrink-0 items-center justify-center rounded-[var(--selaras-resolved-radius-sm)] p-0.5 text-[var(--selaras-resolved-text-muted)] transition-colors hover:bg-[var(--selaras-resolved-border-default)] hover:text-[var(--selaras-resolved-text-default)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)]",
+    searchWrapper: "box-content flex h-9 items-center gap-2 border-b border-[var(--selaras-resolved-border-default)] px-2",
+    // The popup owns its search row height. Inside a trigger, stretch the
+    // editor into the available space instead of adding a fixed input
+    // height to the trigger's vertical padding.
+    searchInput: "min-w-16 flex-1 self-stretch bg-transparent text-sm text-[var(--selaras-resolved-text-default)] outline-none placeholder:text-[var(--selaras-resolved-text-muted)]",
     content: "z-[var(--selaras-resolved-z-dropdown)] max-h-72 min-w-[var(--reka-combobox-trigger-width)] overflow-hidden rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] shadow-[var(--selaras-resolved-shadow-md)] ring-1 ring-[var(--selaras-resolved-border-default)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
     // The `adaptive` path's own content wrapper - none of `content`'s
     // own popover chrome (ring/shadow/rounded/animate-in, sized off the
@@ -49,9 +50,9 @@ export const selectTheme = tv({
   },
   variants: {
     size: {
-      sm: { trigger: "min-h-8 text-sm" },
-      md: { trigger: "min-h-10" },
-      lg: { trigger: "min-h-11 text-base" }
+      sm: { trigger: "min-h-8 py-1 text-sm", icon: "size-4" },
+      md: { trigger: "min-h-10", icon: "size-4.5" },
+      lg: { trigger: "min-h-11 text-base", icon: "size-5" }
     },
     // Registered custom roles have no finite Tailwind Variants branch. Keep
     // the semantic focus styling in the base slot so every registered role