@sewadah/selaras 0.8.0 → 0.9.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "selaras",
   "configKey": "selaras",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/components/Autocomplete.vue

@@ -69,6 +69,12 @@ const unscopedSlots = ["header", "footer", "empty", "empty-filter", "clear-icon"
     @update:model-value="updateValue"
     @update:search-term="emit('update:searchTerm', $event)"
   >
+    <template v-if="slots.leading" #leading="scope">
+      <slot name="leading" v-bind="scope" />
+    </template>
+    <template v-if="slots.trailing" #trailing="scope">
+      <slot name="trailing" v-bind="scope" />
+    </template>
     <template v-if="slots.item" #item="{ item }">
       <slot name="item" :item="itemData(item)" />
     </template>

package/dist/runtime/components/Input.d.vue.ts

@@ -1,9 +1,11 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { InputThemeSlots } from '../theme/input.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { FieldAdornmentSlotProps } from '../utils/field-adornments.js';
 import type { UiProp } from '../utils/ui.js';
 import { inputTheme } from '../theme/input.js';
 type InputVariants = VariantProps<typeof inputTheme>;
+type __VLS_Slots = InputSlots;
 export interface InputProps {
     id?: string;
     name?: string;
@@ -23,10 +25,11 @@ export interface InputProps {
 export interface InputEmits {
     'update:modelValue': [value: string];
 }
-declare var __VLS_15: {};
-type __VLS_Slots = {} & {
-    'clear-icon'?: (props: typeof __VLS_15) => any;
-};
+export interface InputSlots {
+    'leading'?: (props: FieldAdornmentSlotProps) => any;
+    'trailing'?: (props: FieldAdornmentSlotProps) => any;
+    'clear-icon'?: () => any;
+}
 declare const __VLS_base: import("vue").DefineComponent<InputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{

package/dist/runtime/components/Input.vue

@@ -4,6 +4,7 @@ import { useFormField } from "../composables/use-form-field";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { inputTheme } from "../theme/input";
+import { useFieldAdornments } from "../utils/field-adornments";
 import { isNativeInputA11yAttr, isNativeInputAttr } from "../utils/native-input";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps, useThemeProps } from "../utils/ui";
@@ -26,6 +27,8 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const { leading, trailing, padding, clearOffset } = useFieldAdornments();
 const field = useFormField();
 const effectivePlaceholder = computed(() => props.placeholder || (field?.floatingLabel.value ? " " : void 0));
 const inputId = computed(() => props.id ?? field?.id);
@@ -39,6 +42,8 @@ function clear() {
 const themeProps = useThemeProps("input");
 const effectiveSize = computed(() => props.size ?? field?.size ?? themeProps.value.size ?? "md");
 const clearSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+const adornmentScope = computed(() => ({ disabled: !!props.disabled, size: effectiveSize.value, buttonSize: clearSize.value }));
+const clearWidth = computed(() => ({ sm: "1.75rem", md: "2.25rem", lg: "2.5rem" })[effectiveSize.value]);
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("input", inputTheme);
@@ -55,11 +60,20 @@ const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root, { excl
 const nativeInputAttrs = useFallthroughAttrs(isInputAttr);
 const baseProps = computed(() => resolveSlot(ui.value.base, props.ui?.base));
 const inputProps = computed(() => mergeProps(baseProps.value, nativeInputAttrs.value));
+function adornedInputProps() {
+  return mergeProps({ style: padding(!!slots.leading, !!slots.trailing, showClear.value ? clearWidth.value : "0rem") }, inputProps.value);
+}
+function clearProps() {
+  return mergeProps({ style: slots.trailing ? clearOffset() : void 0 }, resolveSlot(ui.value.clear, props.ui?.clear));
+}
 </script>
 
 <template>
-  <div :data-selaras-color="inputInvalid ? 'danger' : effectiveColor" :data-selaras-field-leading="icon ? '' : void 0" v-bind="rootProps">
-    <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
+  <div :data-selaras-color="inputInvalid ? 'danger' : effectiveColor" :data-selaras-field-leading="icon || slots.leading ? '' : void 0" v-bind="rootProps">
+    <fieldset v-if="slots.leading" ref="leading" :disabled="disabled" :inert="disabled || void 0" v-bind="resolveSlot(ui.leading, props.ui?.leading)">
+      <slot name="leading" v-bind="adornmentScope" />
+    </fieldset>
+    <Icon v-else-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     <input
       :id="inputId"
       data-ui-group-item
@@ -70,7 +84,7 @@ const inputProps = computed(() => mergeProps(baseProps.value, nativeInputAttrs.v
       :disabled="disabled"
       :aria-invalid="inputInvalid || void 0"
       :aria-describedby="describedBy"
-      v-bind="inputProps"
+      v-bind="adornedInputProps()"
       @input="$emit('update:modelValue', $event.target.value)"
     >
     <Button
@@ -79,7 +93,7 @@ const inputProps = computed(() => mergeProps(baseProps.value, nativeInputAttrs.v
       variant="text"
       color="neutral"
       :aria-label="messages.clear"
-      v-bind="resolveSlot(ui.clear, props.ui?.clear)"
+      v-bind="clearProps()"
       @click="clear"
     >
       <template #icon="{ class: iconClass }">
@@ -88,6 +102,9 @@ const inputProps = computed(() => mergeProps(baseProps.value, nativeInputAttrs.v
         </slot>
       </template>
     </Button>
-    <Icon v-else-if="trailingIcon" :name="trailingIcon" v-bind="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon)" />
+    <Icon v-else-if="trailingIcon && !slots.trailing" :name="trailingIcon" v-bind="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon)" />
+    <fieldset v-if="slots.trailing" ref="trailing" :disabled="disabled" :inert="disabled || void 0" v-bind="resolveSlot(ui.trailing, props.ui?.trailing)">
+      <slot name="trailing" v-bind="adornmentScope" />
+    </fieldset>
   </div>
 </template>

package/dist/runtime/components/Input.vue.d.ts

@@ -1,9 +1,11 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { InputThemeSlots } from '../theme/input.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { FieldAdornmentSlotProps } from '../utils/field-adornments.js';
 import type { UiProp } from '../utils/ui.js';
 import { inputTheme } from '../theme/input.js';
 type InputVariants = VariantProps<typeof inputTheme>;
+type __VLS_Slots = InputSlots;
 export interface InputProps {
     id?: string;
     name?: string;
@@ -23,10 +25,11 @@ export interface InputProps {
 export interface InputEmits {
     'update:modelValue': [value: string];
 }
-declare var __VLS_15: {};
-type __VLS_Slots = {} & {
-    'clear-icon'?: (props: typeof __VLS_15) => any;
-};
+export interface InputSlots {
+    'leading'?: (props: FieldAdornmentSlotProps) => any;
+    'trailing'?: (props: FieldAdornmentSlotProps) => any;
+    'clear-icon'?: () => any;
+}
 declare const __VLS_base: import("vue").DefineComponent<InputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{

package/dist/runtime/components/Select.vue

@@ -75,6 +75,12 @@ const unscopedSlots = ["header", "footer", "empty", "empty-filter", "filter-icon
     @update:model-value="updateValue"
     @update:search-term="emit('update:searchTerm', $event)"
   >
+    <template v-if="slots.leading" #leading="scope">
+      <slot name="leading" v-bind="scope" />
+    </template>
+    <template v-if="slots.trailing" #trailing="scope">
+      <slot name="trailing" v-bind="scope" />
+    </template>
     <template v-if="slots.item" #item="{ item }">
       <slot name="item" :item="itemData(item)" />
     </template>

package/dist/runtime/components/Textarea.d.vue.ts

@@ -1,9 +1,11 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { TextareaThemeSlots } from '../theme/textarea.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { FieldAdornmentSlotProps } from '../utils/field-adornments.js';
 import type { UiProp } from '../utils/ui.js';
 import { textareaTheme } from '../theme/textarea.js';
 type TextareaVariants = VariantProps<typeof textareaTheme>;
+type __VLS_Slots = TextareaSlots;
 export interface TextareaProps {
     id?: string;
     name?: string;
@@ -27,10 +29,11 @@ export interface TextareaProps {
 export interface TextareaEmits {
     'update:modelValue': [value: string];
 }
-declare var __VLS_15: {};
-type __VLS_Slots = {} & {
-    'clear-icon'?: (props: typeof __VLS_15) => any;
-};
+export interface TextareaSlots {
+    'leading'?: (props: FieldAdornmentSlotProps) => any;
+    'trailing'?: (props: FieldAdornmentSlotProps) => any;
+    'clear-icon'?: () => any;
+}
 declare const __VLS_base: import("vue").DefineComponent<TextareaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<TextareaProps> & Readonly<{

package/dist/runtime/components/Textarea.vue

@@ -4,6 +4,7 @@ import { useFormField } from "../composables/use-form-field";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { textareaTheme } from "../theme/textarea";
+import { useFieldAdornments } from "../utils/field-adornments";
 import { isNativeInputA11yAttr, isNativeInputAttr } from "../utils/native-input";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps } from "../utils/ui";
@@ -28,6 +29,8 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const { leading, trailing, padding, clearOffset } = useFieldAdornments();
 const field = useFormField();
 const effectivePlaceholder = computed(() => props.placeholder || (field?.floatingLabel.value ? " " : void 0));
 const textareaId = computed(() => props.id ?? field?.id);
@@ -40,6 +43,8 @@ function clear() {
 }
 const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
 const clearSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+const adornmentScope = computed(() => ({ disabled: !!props.disabled, size: effectiveSize.value, buttonSize: clearSize.value }));
+const clearWidth = computed(() => ({ sm: "1.75rem", md: "2.25rem", lg: "2.5rem" })[effectiveSize.value]);
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("textarea", textareaTheme);
@@ -66,8 +71,8 @@ async function resize() {
   if (props.maxrows) {
     const cs = getComputedStyle(el);
     const lineHeight = Number.parseFloat(cs.lineHeight);
-    const padding = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
-    const maxHeight = lineHeight * props.maxrows + padding;
+    const padding2 = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
+    const maxHeight = lineHeight * props.maxrows + padding2;
     el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
     el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
     return;
@@ -76,11 +81,20 @@ async function resize() {
 }
 onMounted(resize);
 watch(() => props.modelValue, resize);
+function adornedInputProps() {
+  return mergeProps({ style: padding(!!slots.leading, !!slots.trailing, showClear.value ? clearWidth.value : "0rem") }, baseProps.value);
+}
+function clearProps() {
+  return mergeProps({ style: slots.trailing ? clearOffset() : void 0 }, resolveSlot(ui.value.clear, props.ui?.clear));
+}
 </script>
 
 <template>
-  <div :data-selaras-color="textareaInvalid ? 'danger' : effectiveColor" :data-selaras-field-leading="icon ? '' : void 0" v-bind="rootProps">
-    <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
+  <div :data-selaras-color="textareaInvalid ? 'danger' : effectiveColor" :data-selaras-field-leading="icon || slots.leading ? '' : void 0" v-bind="rootProps">
+    <fieldset v-if="slots.leading" ref="leading" :disabled="disabled" :inert="disabled || void 0" v-bind="resolveSlot(ui.leading, props.ui?.leading)">
+      <slot name="leading" v-bind="adornmentScope" />
+    </fieldset>
+    <Icon v-else-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     <textarea
       :id="textareaId"
       ref="textareaRef"
@@ -92,7 +106,7 @@ watch(() => props.modelValue, resize);
       :disabled="disabled"
       :aria-invalid="textareaInvalid || void 0"
       :aria-describedby="describedBy"
-      v-bind="baseProps"
+      v-bind="adornedInputProps()"
       @input="$emit('update:modelValue', $event.target.value);
   resize()"
     />
@@ -102,7 +116,7 @@ watch(() => props.modelValue, resize);
       variant="text"
       color="neutral"
       :aria-label="messages.clear"
-      v-bind="resolveSlot(ui.clear, props.ui?.clear)"
+      v-bind="clearProps()"
       @click="clear"
     >
       <template #icon="{ class: iconClass }">
@@ -111,6 +125,9 @@ watch(() => props.modelValue, resize);
         </slot>
       </template>
     </Button>
-    <Icon v-else-if="trailingIcon" :name="trailingIcon" v-bind="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon)" />
+    <Icon v-else-if="trailingIcon && !slots.trailing" :name="trailingIcon" v-bind="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon)" />
+    <fieldset v-if="slots.trailing" ref="trailing" :disabled="disabled" :inert="disabled || void 0" v-bind="resolveSlot(ui.trailing, props.ui?.trailing)">
+      <slot name="trailing" v-bind="adornmentScope" />
+    </fieldset>
   </div>
 </template>

package/dist/runtime/components/Textarea.vue.d.ts

@@ -1,9 +1,11 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { TextareaThemeSlots } from '../theme/textarea.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { FieldAdornmentSlotProps } from '../utils/field-adornments.js';
 import type { UiProp } from '../utils/ui.js';
 import { textareaTheme } from '../theme/textarea.js';
 type TextareaVariants = VariantProps<typeof textareaTheme>;
+type __VLS_Slots = TextareaSlots;
 export interface TextareaProps {
     id?: string;
     name?: string;
@@ -27,10 +29,11 @@ export interface TextareaProps {
 export interface TextareaEmits {
     'update:modelValue': [value: string];
 }
-declare var __VLS_15: {};
-type __VLS_Slots = {} & {
-    'clear-icon'?: (props: typeof __VLS_15) => any;
-};
+export interface TextareaSlots {
+    'leading'?: (props: FieldAdornmentSlotProps) => any;
+    'trailing'?: (props: FieldAdornmentSlotProps) => any;
+    'clear-icon'?: () => any;
+}
 declare const __VLS_base: import("vue").DefineComponent<TextareaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<TextareaProps> & Readonly<{

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

@@ -2,12 +2,18 @@ import type { VariantProps } from 'tailwind-variants';
 import type { SelectThemeSlots } from '../theme/select.js';
 import type { RoundedArrowConfig } from '../utils/arrow.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { FieldAdornmentSlotProps } from '../utils/field-adornments.js';
 import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { SelectModelValue } from '../utils/select-contracts.js';
 import type { UiProp } from '../utils/ui.js';
-import type { SelectItems, SelectOption } from './combobox-select.js';
+import type { SelectItems } from './combobox-select.js';
 import { selectTheme } from '../theme/select.js';
 type SelectVariants = VariantProps<typeof selectTheme>;
+type __VLS_Slots = {
+    leading?: (props: FieldAdornmentSlotProps) => any;
+    trailing?: (props: FieldAdornmentSlotProps) => any;
+    [name: string]: ((props: any) => any) | undefined;
+};
 export interface ComboboxSelectBaseProps {
     id?: string;
     name?: string;
@@ -58,68 +64,6 @@ export interface ComboboxSelectBaseEmits {
     'update:modelValue': [value: SelectModelValue | SelectModelValue[] | undefined];
     'update:searchTerm': [value: string];
 }
-declare var __VLS_43: {
-    item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_136: {}, __VLS_143: {}, __VLS_150: {}, __VLS_174: {
-    item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_194: {
-    selected: import("./combobox-select.js").ResolvedOption | undefined;
-}, __VLS_205: {}, __VLS_212: {}, __VLS_219: {}, __VLS_249: {}, __VLS_252: {}, __VLS_255: {}, __VLS_258: {}, __VLS_261: {
-    item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_264: {
-    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
-}, __VLS_267: {}, __VLS_305: string, __VLS_306: {}, __VLS_309: {}, __VLS_319: {
-    item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_322: {
-    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
-};
-type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_305>]?: (props: typeof __VLS_306) => any;
-} & {
-    item?: (props: typeof __VLS_43) => any;
-} & {
-    'clear-icon'?: (props: typeof __VLS_98) => any;
-} & {
-    'loading-icon'?: (props: typeof __VLS_105) => any;
-} & {
-    'dropdown-icon'?: (props: typeof __VLS_120) => any;
-} & {
-    'clear-icon'?: (props: typeof __VLS_136) => any;
-} & {
-    'loading-icon'?: (props: typeof __VLS_143) => any;
-} & {
-    'dropdown-icon'?: (props: typeof __VLS_150) => any;
-} & {
-    item?: (props: typeof __VLS_174) => any;
-} & {
-    value?: (props: typeof __VLS_194) => any;
-} & {
-    'clear-icon'?: (props: typeof __VLS_205) => any;
-} & {
-    'loading-icon'?: (props: typeof __VLS_212) => any;
-} & {
-    'dropdown-icon'?: (props: typeof __VLS_219) => any;
-} & {
-    header?: (props: typeof __VLS_249) => any;
-} & {
-    'filter-icon'?: (props: typeof __VLS_252) => any;
-} & {
-    empty?: (props: typeof __VLS_255) => any;
-} & {
-    'empty-filter'?: (props: typeof __VLS_258) => any;
-} & {
-    item?: (props: typeof __VLS_261) => any;
-} & {
-    group?: (props: typeof __VLS_264) => any;
-} & {
-    footer?: (props: typeof __VLS_267) => any;
-} & {
-    header?: (props: typeof __VLS_309) => any;
-} & {
-    item?: (props: typeof __VLS_319) => any;
-} & {
-    group?: (props: typeof __VLS_322) => any;
-};
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: SelectModelValue | SelectModelValue[] | undefined) => any;
     "update:open": (value: boolean) => any;

package/dist/runtime/internal/ComboboxSelectBase.vue

@@ -28,10 +28,11 @@ import { useIsMobile } from "../composables/use-media-query";
 import { useMessages } from "../composables/use-messages";
 import { selectTheme } from "../theme/select";
 import { arrowContentProps, arrowElementProps } from "../utils/arrow";
+import { useFieldAdornments } from "../utils/field-adornments";
 import { isNativeInputA11yAttr, isNativeInputAttr, isNativeInputEvent } from "../utils/native-input";
 import { overlayPortalProps } from "../utils/overlay";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
-import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps, useThemeBindings } from "../utils/ui";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps, useThemeBindings } from "../utils/ui";
 import { useComboboxSelect } from "./combobox-select";
 import ComboboxSelectBody from "./ComboboxSelectBody.vue";
 defineOptions({ inheritAttrs: false });
@@ -72,6 +73,8 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["update:open", "update:modelValue", "update:searchTerm"]);
+const slots = defineSlots();
+const { leading, trailing, padding } = useFieldAdornments();
 const instance = getCurrentInstance();
 const initialValue = Array.isArray(props.defaultValue) ? [...props.defaultValue] : props.defaultValue;
 const isControlled = () => Object.hasOwn(instance.vnode.props ?? {}, "modelValue") || Object.hasOwn(instance.vnode.props ?? {}, "model-value");
@@ -413,6 +416,7 @@ const searchDescribedBy = computed(() => [
 ].filter(Boolean).join(" ") || void 0);
 const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
 const clearSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+const adornmentScope = computed(() => ({ disabled: !!props.disabled, size: effectiveSize.value, buttonSize: clearSize.value }));
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("select", selectTheme);
@@ -427,6 +431,9 @@ const triggerProps = computed(() => mergeProps(
   resolveSlot(ui.value.trigger, props.ui?.trigger),
   !props.creatable ? nativeTriggerAttrs.value : {}
 ));
+function adornedTriggerProps() {
+  return mergeProps({ style: padding(!!slots.leading, !!slots.trailing) }, triggerProps.value);
+}
 const valueProps = computed(() => resolveSlot(ui.value.value, props.ui?.value));
 const commaValueProps = computed(() => {
   const override = props.ui?.value;
@@ -596,7 +603,10 @@ const bodyProps = computed(() => ({
     @update:open="updateOpen($event)"
     @update:model-value="(value2) => onComboboxValueUpdate(value2)"
   >
-    <ComboboxAnchor>
+    <ComboboxAnchor :class="applyClassPrefix('relative')">
+      <fieldset v-if="slots.leading" ref="leading" :disabled="disabled" :inert="disabled || void 0" v-bind="resolveSlot(ui.leading, props.ui?.leading)">
+        <slot name="leading" v-bind="adornmentScope" />
+      </fieldset>
       <!--
         Select (creatable=false): a button trigger, opened by clicking anywhere
         on it - the search input (if any) lives inside the popover instead.
@@ -608,7 +618,7 @@ const bodyProps = computed(() => ({
         data-ui-group-item
         :data-selaras-field-filled="selectedValues.length ? '' : void 0"
         :data-selaras-field-active="open ? '' : void 0"
-        v-bind="triggerProps"
+        v-bind="adornedTriggerProps()"
         @keydown.capture="onSearchKeydown"
       >
         <!--
@@ -745,7 +755,7 @@ const bodyProps = computed(() => ({
         data-ui-group-item
         :data-selaras-field-filled="selectedValues.length ? '' : void 0"
         :data-selaras-field-active="open ? '' : void 0"
-        v-bind="triggerProps"
+        v-bind="adornedTriggerProps()"
         @click="openMobileAutocomplete()"
       >
         <span v-if="multiple && selectedOptions.length" v-bind="commaValueProps">{{ commaText }}</span>
@@ -794,7 +804,7 @@ const bodyProps = computed(() => ({
         :aria-invalid="selectInvalid || void 0"
         :aria-describedby="describedBy"
         :aria-busy="loading || void 0"
-        v-bind="mergeProps(triggerProps, modalTriggerAttrs)"
+        v-bind="mergeProps(adornedTriggerProps(), modalTriggerAttrs)"
         tabindex="0"
         @keydown="onTriggerKeydown"
         @blur="selectedChipValue = void 0"
@@ -894,6 +904,9 @@ const bodyProps = computed(() => ({
         </template>
         <span v-if="loading" class="sr-only">{{ messages.loading }}</span>
       </ComboboxTrigger>
+      <fieldset v-if="slots.trailing" ref="trailing" :disabled="disabled" :inert="disabled || void 0" v-bind="resolveSlot(ui.trailing, props.ui?.trailing)">
+        <slot name="trailing" v-bind="adornmentScope" />
+      </fieldset>
     </ComboboxAnchor>
 
     <ComboboxPortal v-if="!showMobileModal" v-bind="portalProps">

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

@@ -2,12 +2,18 @@ import type { VariantProps } from 'tailwind-variants';
 import type { SelectThemeSlots } from '../theme/select.js';
 import type { RoundedArrowConfig } from '../utils/arrow.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { FieldAdornmentSlotProps } from '../utils/field-adornments.js';
 import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { SelectModelValue } from '../utils/select-contracts.js';
 import type { UiProp } from '../utils/ui.js';
-import type { SelectItems, SelectOption } from './combobox-select.js';
+import type { SelectItems } from './combobox-select.js';
 import { selectTheme } from '../theme/select.js';
 type SelectVariants = VariantProps<typeof selectTheme>;
+type __VLS_Slots = {
+    leading?: (props: FieldAdornmentSlotProps) => any;
+    trailing?: (props: FieldAdornmentSlotProps) => any;
+    [name: string]: ((props: any) => any) | undefined;
+};
 export interface ComboboxSelectBaseProps {
     id?: string;
     name?: string;
@@ -58,68 +64,6 @@ export interface ComboboxSelectBaseEmits {
     'update:modelValue': [value: SelectModelValue | SelectModelValue[] | undefined];
     'update:searchTerm': [value: string];
 }
-declare var __VLS_43: {
-    item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_136: {}, __VLS_143: {}, __VLS_150: {}, __VLS_174: {
-    item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_194: {
-    selected: import("./combobox-select.js").ResolvedOption | undefined;
-}, __VLS_205: {}, __VLS_212: {}, __VLS_219: {}, __VLS_249: {}, __VLS_252: {}, __VLS_255: {}, __VLS_258: {}, __VLS_261: {
-    item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_264: {
-    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
-}, __VLS_267: {}, __VLS_305: string, __VLS_306: {}, __VLS_309: {}, __VLS_319: {
-    item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_322: {
-    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
-};
-type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_305>]?: (props: typeof __VLS_306) => any;
-} & {
-    item?: (props: typeof __VLS_43) => any;
-} & {
-    'clear-icon'?: (props: typeof __VLS_98) => any;
-} & {
-    'loading-icon'?: (props: typeof __VLS_105) => any;
-} & {
-    'dropdown-icon'?: (props: typeof __VLS_120) => any;
-} & {
-    'clear-icon'?: (props: typeof __VLS_136) => any;
-} & {
-    'loading-icon'?: (props: typeof __VLS_143) => any;
-} & {
-    'dropdown-icon'?: (props: typeof __VLS_150) => any;
-} & {
-    item?: (props: typeof __VLS_174) => any;
-} & {
-    value?: (props: typeof __VLS_194) => any;
-} & {
-    'clear-icon'?: (props: typeof __VLS_205) => any;
-} & {
-    'loading-icon'?: (props: typeof __VLS_212) => any;
-} & {
-    'dropdown-icon'?: (props: typeof __VLS_219) => any;
-} & {
-    header?: (props: typeof __VLS_249) => any;
-} & {
-    'filter-icon'?: (props: typeof __VLS_252) => any;
-} & {
-    empty?: (props: typeof __VLS_255) => any;
-} & {
-    'empty-filter'?: (props: typeof __VLS_258) => any;
-} & {
-    item?: (props: typeof __VLS_261) => any;
-} & {
-    group?: (props: typeof __VLS_264) => any;
-} & {
-    footer?: (props: typeof __VLS_267) => any;
-} & {
-    header?: (props: typeof __VLS_309) => any;
-} & {
-    item?: (props: typeof __VLS_319) => any;
-} & {
-    group?: (props: typeof __VLS_322) => any;
-};
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: SelectModelValue | SelectModelValue[] | undefined) => any;
     "update:open": (value: boolean) => any;

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

@@ -42,6 +42,8 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;
@@ -89,6 +91,8 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;
@@ -136,6 +140,8 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;

package/dist/runtime/theme/input.js

@@ -10,6 +10,8 @@ export const inputTheme = tv({
     // hardcoded here - hover's own color stays neutral regardless of
     // `color`, matching every other component's own hover state.
     base: "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",
+    leading: "absolute top-1/2 -translate-y-1/2 start-0 m-0 flex min-w-0 items-center gap-1 border-0 p-0 ps-2.5 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
+    trailing: "absolute top-1/2 -translate-y-1/2 end-0 m-0 flex min-w-0 items-center gap-1 border-0 p-0 pe-1 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
     leadingIcon: "absolute start-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     trailingIcon: "absolute end-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     // A separate slot from trailingIcon (not reused) - that one is a

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

@@ -29,6 +29,8 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     trigger: string;
+    leading: string;
+    trailing: string;
     value: string;
     chipOverflow: string;
     icon: string;
@@ -76,6 +78,8 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     trigger: string;
+    leading: string;
+    trailing: string;
     value: string;
     chipOverflow: string;
     icon: string;
@@ -123,6 +127,8 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     trigger: string;
+    leading: string;
+    trailing: string;
     value: string;
     chipOverflow: string;
     icon: string;