@sewadah/selaras 0.7.1 → 0.9.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "selaras",
   "configKey": "selaras",
-  "version": "0.7.1",
+  "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/AvatarGroup.vue

@@ -3,6 +3,7 @@ import { computed, provide, useSlots } from "vue";
 import { useMessages } from "../composables/use-messages";
 import { avatarGroupTheme } from "../theme/avatar-group";
 import { AVATAR_SIZE_INJECTION_KEY } from "../utils/injection-keys";
+import { flattenSlotChildren } from "../utils/slot-children";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -18,7 +19,7 @@ const ui = computed(() => theme.value({
 }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 provide(AVATAR_SIZE_INJECTION_KEY, computed(() => props.size));
-const slotChildren = computed(() => slots.default?.() ?? []);
+const slotChildren = computed(() => flattenSlotChildren(slots.default?.() ?? []));
 const visibleChildren = computed(() => {
   if (!props.max || slotChildren.value.length <= props.max)
     return slotChildren.value;
@@ -34,7 +35,7 @@ const overflowCount = computed(() => {
 <template>
   <div v-bind="rootProps">
     <span v-if="overflowCount" v-bind="resolveSlot(ui.count, props.ui?.count)">{{ messages.avatarGroupOverflow(overflowCount) }}</span>
-    <span v-for="(child, i) in visibleChildren" :key="i" v-bind="resolveSlot(ui.item, props.ui?.item)">
+    <span v-for="(child, i) in visibleChildren" :key="child.key ?? i" v-bind="resolveSlot(ui.item, props.ui?.item)">
       <component :is="child" />
     </span>
   </div>

package/dist/runtime/components/CodeGroup.vue

@@ -1,25 +1,13 @@
 <script setup>
-import { cloneVNode, Comment, computed, Fragment, ref, Text, useSlots } from "vue";
+import { cloneVNode, computed, ref, useSlots } from "vue";
 import { useMessages } from "../composables/use-messages";
 import { resolveFileIcon } from "../utils/file-icons";
+import { flattenSlotChildren } from "../utils/slot-children";
 import ProsePre from "./ProsePre.vue";
 import Tabs from "./Tabs.vue";
 const slots = useSlots();
 const messages = useMessages();
-function flatten(vnodes) {
-  const result = [];
-  for (const vnode of vnodes) {
-    if (vnode.type === Comment || vnode.type === Text)
-      continue;
-    if (vnode.type === Fragment && Array.isArray(vnode.children)) {
-      result.push(...flatten(vnode.children));
-      continue;
-    }
-    result.push(vnode);
-  }
-  return result;
-}
-const children = computed(() => flatten(slots.default?.() ?? []));
+const children = computed(() => flattenSlotChildren(slots.default?.() ?? []));
 function labelFor(child, index) {
   const props = child.props ?? {};
   return props.filename || props.language || messages.value.codeTabFallback(index + 1);

package/dist/runtime/components/ColorModeSwitch.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { computed, useAttrs, useSlots } from "vue";
-import { useColorMode } from "#imports";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
+import { useColorModeControl } from "../internal/color-mode-control";
 import Switch from "./Switch.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -18,10 +18,9 @@ const props = defineProps({
 });
 const attrs = useAttrs();
 const slots = useSlots();
-const colorMode = useColorMode();
+const { colorMode, isDark, isDisabled } = useColorModeControl();
 const icons = useIcons();
 const messages = useMessages();
-const isDark = computed(() => colorMode.value === "dark");
 const switchUi = computed(() => {
   const track = typeof props.ui?.track === "string" ? { class: props.ui.track } : props.ui?.track;
   return {
@@ -35,6 +34,8 @@ const switchUi = computed(() => {
   };
 });
 function updateMode(dark) {
+  if (isDisabled.value || props.disabled)
+    return;
   colorMode.preference = dark ? "dark" : "light";
 }
 </script>
@@ -43,7 +44,7 @@ function updateMode(dark) {
   <Switch
     v-bind="{ ...attrs, ...props }"
     :model-value="isDark"
-    :disabled="disabled || colorMode.forced"
+    :disabled="disabled || isDisabled"
     :checked-icon="checkedIcon ?? icons.darkMode"
     :unchecked-icon="uncheckedIcon ?? icons.lightMode"
     :ui="switchUi"

package/dist/runtime/components/ColorModeToggle.vue

@@ -1,14 +1,14 @@
 <script setup>
-import { computed } from "vue";
-import { useColorMode } from "#imports";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
+import { useColorModeControl } from "../internal/color-mode-control";
 import Button from "./Button.vue";
-const colorMode = useColorMode();
+const { colorMode, isDark, isDisabled } = useColorModeControl();
 const icons = useIcons();
 const messages = useMessages();
-const isDark = computed(() => colorMode.value === "dark");
 function toggle() {
+  if (isDisabled.value)
+    return;
   colorMode.preference = isDark.value ? "light" : "dark";
 }
 </script>
@@ -19,6 +19,7 @@ function toggle() {
     variant="ghost"
     color="neutral"
     :aria-label="messages.colorModeToggle"
+    :disabled="isDisabled"
     @click="toggle"
   />
 </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/Listbox.d.vue.ts

@@ -0,0 +1,28 @@
+import type { ListboxProps, ListboxSlots } from '../utils/listbox-contracts.js';
+import type { SelectEntry, SelectModel } from '../utils/select-contracts.js';
+export type { ListboxEmits, ListboxProps, ListboxSlots } from '../utils/listbox-contracts.js';
+declare const __VLS_export: <Entry extends SelectEntry, Key extends string = "value", Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<ListboxProps<Entry, Key, Multiple> & {
+        "onUpdate:modelValue"?: ((value: SelectModel<import("../utils/select-contracts.js").SelectEntryItem<Entry> extends infer T ? T extends import("../utils/select-contracts.js").SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+            value: infer Value;
+        } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never, Multiple>) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ListboxSlots<Entry>;
+    emit: ((evt: "update:modelValue", value: SelectModel<import("../utils/select-contracts.js").SelectEntryItem<Entry> extends infer T ? T extends import("../utils/select-contracts.js").SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+        value: infer Value;
+    } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never, Multiple>) => void) & ((evt: "update:searchTerm", value: string) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Listbox.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { getCurrentInstance } from "vue";
+import ListboxBase from "../internal/ListboxBase.vue";
+const props = defineProps({
+  label: { type: String, required: false },
+  descriptionKey: { type: String, required: false },
+  selectionBehavior: { type: String, required: false },
+  checkbox: { type: Boolean, required: false },
+  selectAll: { type: Boolean, required: false },
+  ui: { type: Object, required: false },
+  items: { type: Array, required: true },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  valueKey: { type: void 0, required: false },
+  labelKey: { type: String, required: false },
+  multiple: { type: null, required: false },
+  searchable: { type: Boolean, required: false },
+  searchTerm: { type: String, required: false },
+  virtualize: { type: [Boolean, Object], required: false },
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  form: { type: String, required: false },
+  required: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:searchTerm"]);
+const slots = defineSlots();
+const instance = getCurrentInstance();
+function baseProps() {
+  const controlled = Object.hasOwn(instance.vnode.props ?? {}, "modelValue") || Object.hasOwn(instance.vnode.props ?? {}, "model-value");
+  const { modelValue, ...rest } = props;
+  return { ...rest, ...controlled ? { modelValue } : {} };
+}
+const plainSlots = ["header", "footer", "empty", "empty-filter"];
+</script>
+
+<template>
+  <ListboxBase v-bind="baseProps()" @update:model-value="emit('update:modelValue', $event)" @update:search-term="emit('update:searchTerm', $event)">
+    <template v-if="slots.item" #item="data">
+      <slot name="item" v-bind="data" />
+    </template>
+    <template v-if="slots.group" #group="{ group }">
+      <slot name="group" :group="group" />
+    </template>
+    <template v-for="name in plainSlots.filter((name) => slots[name])" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </ListboxBase>
+</template>

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

@@ -0,0 +1,28 @@
+import type { ListboxProps, ListboxSlots } from '../utils/listbox-contracts.js';
+import type { SelectEntry, SelectModel } from '../utils/select-contracts.js';
+export type { ListboxEmits, ListboxProps, ListboxSlots } from '../utils/listbox-contracts.js';
+declare const __VLS_export: <Entry extends SelectEntry, Key extends string = "value", Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<ListboxProps<Entry, Key, Multiple> & {
+        "onUpdate:modelValue"?: ((value: SelectModel<import("../utils/select-contracts.js").SelectEntryItem<Entry> extends infer T ? T extends import("../utils/select-contracts.js").SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+            value: infer Value;
+        } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never, Multiple>) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ListboxSlots<Entry>;
+    emit: ((evt: "update:modelValue", value: SelectModel<import("../utils/select-contracts.js").SelectEntryItem<Entry> extends infer T ? T extends import("../utils/select-contracts.js").SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+        value: infer Value;
+    } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never, Multiple>) => void) & ((evt: "update:searchTerm", value: string) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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/components/TransferList.d.vue.ts

@@ -0,0 +1,47 @@
+import type { SelectEntry } from '../utils/select-contracts.js';
+import type { TransferListProps, TransferListSlots } from '../utils/transfer-list-contracts.js';
+export type { TransferDirection, TransferListEmits, TransferListProps, TransferListSlots, TransferSide } from '../utils/transfer-list-contracts.js';
+declare const __VLS_export: <Entry extends SelectEntry, Key extends string = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TransferListProps<Entry, Key> & {
+        "onUpdate:modelValue"?: ((value: (import("../utils/select-contracts.js").SelectEntryItem<Entry> extends infer T ? T extends import("../utils/select-contracts.js").SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+            value: infer Value;
+        } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never)[]) => any) | undefined;
+        "onUpdate:checked"?: ((value: (import("../utils/select-contracts.js").SelectEntryItem<Entry> extends infer T ? T extends import("../utils/select-contracts.js").SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+            value: infer Value;
+        } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never)[]) => any) | undefined;
+        "onUpdate:sourceSearchTerm"?: ((value: string) => any) | undefined;
+        "onUpdate:targetSearchTerm"?: ((value: string) => any) | undefined;
+        onTransfer?: ((payload: {
+            direction: import("./TransferList.vue.js").TransferDirection;
+            items: import("../utils/select-contracts.js").SelectEntryItem<Entry>[];
+            values: (import("../utils/select-contracts.js").SelectEntryItem<Entry> extends infer T ? T extends import("../utils/select-contracts.js").SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+                value: infer Value;
+            } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never)[];
+        }) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: TransferListSlots<Entry>;
+    emit: ((evt: "update:modelValue", value: (import("../utils/select-contracts.js").SelectEntryItem<Entry> extends infer T ? T extends import("../utils/select-contracts.js").SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+        value: infer Value;
+    } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never)[]) => void) & ((evt: "update:checked", value: (import("../utils/select-contracts.js").SelectEntryItem<Entry> extends infer T ? T extends import("../utils/select-contracts.js").SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+        value: infer Value;
+    } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never)[]) => void) & ((evt: "update:sourceSearchTerm", value: string) => void) & ((evt: "update:targetSearchTerm", value: string) => void) & ((evt: "transfer", payload: {
+        direction: import("./TransferList.vue.js").TransferDirection;
+        items: import("../utils/select-contracts.js").SelectEntryItem<Entry>[];
+        values: (import("../utils/select-contracts.js").SelectEntryItem<Entry> extends infer T ? T extends import("../utils/select-contracts.js").SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+            value: infer Value;
+        } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never)[];
+    }) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};