@sewadah/selaras 0.9.0 → 0.10.0

package/dist/runtime/components/Textarea.vue

@@ -1,14 +1,13 @@
 <script setup>
-import { computed, mergeProps, nextTick, onMounted, ref, watch } from "vue";
+import { computed, mergeProps, nextTick, onMounted, ref, useAttrs, watch } from "vue";
 import { useFormField } from "../composables/use-form-field";
-import { useIcons } from "../composables/use-icons";
-import { useMessages } from "../composables/use-messages";
+import FieldClearButton from "../internal/FieldClearButton.vue";
 import { textareaTheme } from "../theme/textarea";
 import { useFieldAdornments } from "../utils/field-adornments";
+import { canClearField, fieldClearWidths, isFieldReadonly } from "../utils/field-clear";
 import { isNativeInputA11yAttr, isNativeInputAttr } from "../utils/native-input";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps } from "../utils/ui";
-import Button from "./Button.vue";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -32,21 +31,25 @@ const emit = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const { leading, trailing, padding, clearOffset } = useFieldAdornments();
 const field = useFormField();
+const attrs = useAttrs();
+const textareaRef = ref();
 const effectivePlaceholder = computed(() => props.placeholder || (field?.floatingLabel.value ? " " : void 0));
 const textareaId = computed(() => props.id ?? field?.id);
 const textareaInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
 const describedBy = computed(() => field?.describedBy.value);
-const hasValue = computed(() => props.modelValue !== void 0 && props.modelValue !== "");
-const showClear = computed(() => !!props.clearable && !props.disabled && hasValue.value);
-function clear() {
+const hasValue = computed(() => props.modelValue != null && props.modelValue !== "");
+const showClear = computed(() => canClearField(props.clearable, hasValue.value, props.disabled, isFieldReadonly(attrs.readonly)));
+async function clear() {
+  if (!showClear.value)
+    return;
   emit("update:modelValue", "");
+  await nextTick();
+  textareaRef.value?.focus();
 }
 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 adornmentButtonSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+const adornmentScope = computed(() => ({ disabled: !!props.disabled, size: effectiveSize.value, buttonSize: adornmentButtonSize.value }));
+const clearWidth = computed(() => fieldClearWidths[effectiveSize.value]);
 const theme = useComponentTheme("textarea", textareaTheme);
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
@@ -61,7 +64,6 @@ const isTextareaAttr = (key) => isNativeInputAttr(key) || isNativeInputA11yAttr(
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root, { exclude: isTextareaAttr });
 const nativeTextareaAttrs = useFallthroughAttrs(isTextareaAttr);
 const baseProps = computed(() => mergeProps(resolveSlot(ui.value.base, props.ui?.base), nativeTextareaAttrs.value));
-const textareaRef = ref();
 async function resize() {
   if (!props.autoresize || !textareaRef.value)
     return;
@@ -110,21 +112,16 @@ function clearProps() {
       @input="$emit('update:modelValue', $event.target.value);
   resize()"
     />
-    <Button
+    <FieldClearButton
       v-if="showClear"
-      :size="clearSize"
-      variant="text"
-      color="neutral"
-      :aria-label="messages.clear"
+      :size="effectiveSize"
       v-bind="clearProps()"
       @click="clear"
     >
-      <template #icon="{ class: iconClass }">
-        <slot name="clear-icon">
-          <Icon :name="icons.close" :class="iconClass" />
-        </slot>
+      <template v-if="slots['clear-icon']" #default>
+        <slot name="clear-icon" />
       </template>
-    </Button>
+    </FieldClearButton>
     <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" />

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

@@ -0,0 +1,25 @@
+import type { ToolbarThemeSlots } from '../theme/toolbar.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = ToolbarSlots;
+export interface ToolbarProps {
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    color?: ColorRole;
+    disabled?: boolean;
+    loop?: boolean;
+    dir?: 'ltr' | 'rtl';
+    ui?: UiProp<ToolbarThemeSlots>;
+}
+export interface ToolbarSlots {
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarProps> & 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/components/Toolbar.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { ToolbarRoot } from "reka-ui";
+import { computed, provide } from "vue";
+import { toolbarTheme } from "../theme/toolbar";
+import { TOOLBAR_CONTEXT } from "../utils/toolbar";
+import { useComponentTheme, useRootProps, useThemeProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  orientation: { type: String, required: false, default: "horizontal" },
+  size: { type: String, required: false },
+  color: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false, default: true },
+  dir: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const defaults = useThemeProps("toolbar");
+const context = computed(() => ({
+  size: props.size ?? defaults.value.size ?? "sm",
+  color: props.color ?? defaults.value.color ?? "primary",
+  disabled: !!props.disabled,
+  orientation: props.orientation
+}));
+provide(TOOLBAR_CONTEXT, context);
+const theme = useComponentTheme("toolbar", toolbarTheme);
+const ui = computed(() => theme.value({ orientation: props.orientation }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <ToolbarRoot :orientation="orientation" :dir="dir" :loop="loop" :aria-disabled="disabled || void 0" v-bind="rootProps">
+    <slot />
+  </ToolbarRoot>
+</template>

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

@@ -0,0 +1,25 @@
+import type { ToolbarThemeSlots } from '../theme/toolbar.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = ToolbarSlots;
+export interface ToolbarProps {
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    color?: ColorRole;
+    disabled?: boolean;
+    loop?: boolean;
+    dir?: 'ltr' | 'rtl';
+    ui?: UiProp<ToolbarThemeSlots>;
+}
+export interface ToolbarSlots {
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarProps> & 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/components/ToolbarButton.d.vue.ts

@@ -0,0 +1,20 @@
+import type { ButtonProps } from './Button.vue.js';
+type __VLS_Slots = ToolbarButtonSlots;
+export interface ToolbarButtonProps extends ButtonProps {
+    /** Formatting state owned by the editor; omitted for ordinary actions. */
+    pressed?: boolean;
+    /** Composes a custom trigger into the toolbar's keyboard navigation. */
+    asChild?: boolean;
+}
+export interface ToolbarButtonSlots {
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToolbarButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarButtonProps> & 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/components/ToolbarButton.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { ToolbarButton } from "reka-ui";
+import { computed, inject } from "vue";
+import { toolbarButtonTheme } from "../theme/toolbar-button";
+import { TOOLBAR_CONTEXT } from "../utils/toolbar";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  pressed: { type: Boolean, required: false, default: void 0 },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  to: { type: String, required: false },
+  type: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  block: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  raised: { type: Boolean, required: false },
+  icon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
+  square: { type: Boolean, required: false, default: void 0 },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const toolbar = inject(TOOLBAR_CONTEXT, void 0);
+const disabled = computed(() => props.disabled || toolbar?.value.disabled);
+const size = computed(() => props.size ?? toolbar?.value.size ?? "sm");
+const color = computed(() => props.color ?? toolbar?.value.color ?? "primary");
+const theme = useComponentTheme("toolbarButton", toolbarButtonTheme);
+const ui = computed(() => theme.value({ size: size.value, variant: props.variant ?? "ghost" }));
+const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
+</script>
+
+<template>
+  <ToolbarButton as-child :disabled="disabled" :aria-pressed="pressed" :data-state="pressed === void 0 ? void 0 : pressed ? 'on' : 'off'" v-bind="rootProps">
+    <slot v-if="asChild" />
+    <Button v-else v-bind="as ? { as } : {}" :to="to" :type="type" :disabled="disabled" :size="size" :color="color" :variant="variant ?? 'ghost'" :icon="icon" :trailing-icon="trailingIcon" :square="square" :loading="loading" :raised="raised" :block="block" :ui="{ leadingIcon: resolveSlot(ui.leadingIcon, props.ui?.leadingIcon), trailingIcon: resolveSlot(ui.trailingIcon, props.ui?.trailingIcon) }">
+      <template v-if="$slots.default" #default>
+        <slot />
+      </template>
+    </Button>
+  </ToolbarButton>
+</template>

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

@@ -0,0 +1,20 @@
+import type { ButtonProps } from './Button.vue.js';
+type __VLS_Slots = ToolbarButtonSlots;
+export interface ToolbarButtonProps extends ButtonProps {
+    /** Formatting state owned by the editor; omitted for ordinary actions. */
+    pressed?: boolean;
+    /** Composes a custom trigger into the toolbar's keyboard navigation. */
+    asChild?: boolean;
+}
+export interface ToolbarButtonSlots {
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToolbarButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarButtonProps> & 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/components/ToolbarSeparator.d.vue.ts

@@ -0,0 +1,10 @@
+import type { ToolbarSeparatorThemeSlots } from '../theme/toolbar-separator.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ToolbarSeparatorProps {
+    orientation?: 'horizontal' | 'vertical';
+    decorative?: boolean;
+    ui?: UiProp<ToolbarSeparatorThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ToolbarSeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarSeparatorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ToolbarSeparator.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { Separator } from "reka-ui";
+import { computed, inject } from "vue";
+import { toolbarSeparatorTheme } from "../theme/toolbar-separator";
+import { TOOLBAR_CONTEXT } from "../utils/toolbar";
+import { useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  orientation: { type: String, required: false },
+  decorative: { type: Boolean, required: false, default: true },
+  ui: { type: Object, required: false }
+});
+const toolbar = inject(TOOLBAR_CONTEXT, void 0);
+const orientation = computed(() => props.orientation ?? (toolbar?.value.orientation === "vertical" ? "horizontal" : "vertical"));
+const theme = useComponentTheme("toolbarSeparator", toolbarSeparatorTheme);
+const ui = computed(() => theme.value({ orientation: orientation.value }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <Separator :orientation="orientation" :decorative="decorative" v-bind="rootProps" />
+</template>

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

@@ -0,0 +1,10 @@
+import type { ToolbarSeparatorThemeSlots } from '../theme/toolbar-separator.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ToolbarSeparatorProps {
+    orientation?: 'horizontal' | 'vertical';
+    decorative?: boolean;
+    ui?: UiProp<ToolbarSeparatorThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ToolbarSeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarSeparatorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,37 @@
+import type { ToolbarToggleGroupThemeSlots } from '../theme/toolbar-toggle-group.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+import type { ToggleGroupItemDef } from './ToggleGroup.vue.js';
+type __VLS_Slots = ToolbarToggleGroupSlots;
+export interface ToolbarToggleGroupProps {
+    items: (string | ToggleGroupItemDef)[];
+    type?: 'single' | 'multiple';
+    modelValue?: string | string[];
+    defaultValue?: string | string[];
+    disabled?: boolean;
+    iconOnly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    color?: ColorRole;
+    ui?: UiProp<ToolbarToggleGroupThemeSlots>;
+}
+export interface ToolbarToggleGroupEmits {
+    'update:modelValue': [value: string | string[]];
+}
+export interface ToolbarToggleGroupSlots {
+    item?: (props: {
+        item: ToggleGroupItemDef;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToolbarToggleGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<ToolbarToggleGroupProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+}>, {}, {}, {}, {}, 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/components/ToolbarToggleGroup.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { ToolbarToggleGroup, ToolbarToggleItem } from "reka-ui";
+import { computed, inject } from "vue";
+import { toolbarToggleGroupTheme } from "../theme/toolbar-toggle-group";
+import { TOOLBAR_CONTEXT } from "../utils/toolbar";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: Array, required: true },
+  type: { type: String, required: false, default: "single" },
+  modelValue: { type: [String, Array], required: false },
+  defaultValue: { type: [String, Array], required: false },
+  disabled: { type: Boolean, required: false },
+  iconOnly: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  color: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+defineSlots();
+const toolbar = inject(TOOLBAR_CONTEXT, void 0);
+const disabled = computed(() => props.disabled || toolbar?.value.disabled);
+const size = computed(() => props.size ?? toolbar?.value.size ?? "sm");
+const color = computed(() => props.color ?? toolbar?.value.color ?? "primary");
+const items = computed(() => props.items.map((item) => typeof item === "string" ? { value: item, label: item } : item));
+const theme = useComponentTheme("toolbarToggleGroup", toolbarToggleGroupTheme);
+const ui = computed(() => theme.value({ size: size.value, orientation: toolbar?.value.orientation }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <ToolbarToggleGroup :type="type" :model-value="modelValue" :default-value="defaultValue" :disabled="disabled" v-bind="rootProps" @update:model-value="emit('update:modelValue', $event)">
+    <ToolbarToggleItem v-for="item in items" :key="item.value" as-child :value="item.value" :disabled="disabled || item.disabled">
+      <Button :size="size" :color="color" variant="ghost" :disabled="disabled || item.disabled" :square="iconOnly" :aria-label="iconOnly ? item.label : void 0" :title="iconOnly ? item.label : void 0" :ui="{ base: resolveSlot(ui.item, props.ui?.item) }">
+        <slot name="item" :item="item">
+          <Icon v-if="item.icon" :name="item.icon" v-bind="resolveSlot(ui.icon, props.ui?.icon)" />
+          <span v-if="!iconOnly">{{ item.label }}</span>
+        </slot>
+      </Button>
+    </ToolbarToggleItem>
+  </ToolbarToggleGroup>
+</template>

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

@@ -0,0 +1,37 @@
+import type { ToolbarToggleGroupThemeSlots } from '../theme/toolbar-toggle-group.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+import type { ToggleGroupItemDef } from './ToggleGroup.vue.js';
+type __VLS_Slots = ToolbarToggleGroupSlots;
+export interface ToolbarToggleGroupProps {
+    items: (string | ToggleGroupItemDef)[];
+    type?: 'single' | 'multiple';
+    modelValue?: string | string[];
+    defaultValue?: string | string[];
+    disabled?: boolean;
+    iconOnly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    color?: ColorRole;
+    ui?: UiProp<ToolbarToggleGroupThemeSlots>;
+}
+export interface ToolbarToggleGroupEmits {
+    'update:modelValue': [value: string | string[]];
+}
+export interface ToolbarToggleGroupSlots {
+    item?: (props: {
+        item: ToggleGroupItemDef;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToolbarToggleGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<ToolbarToggleGroupProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+}>, {}, {}, {}, {}, 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/ComboboxSelectBase.vue

@@ -16,7 +16,7 @@ import {
   TagsInputRoot,
   useDirection
 } from "reka-ui";
-import { computed, getCurrentInstance, mergeProps, nextTick, onMounted, onUnmounted, ref, useId, watch } from "vue";
+import { computed, getCurrentInstance, mergeProps, nextTick, onMounted, onUnmounted, ref, useAttrs, useId, watch } from "vue";
 import Button from "../components/Button.vue";
 import Chip from "../components/Chip.vue";
 import Icon from "../components/Icon.vue";
@@ -29,12 +29,14 @@ import { useMessages } from "../composables/use-messages";
 import { selectTheme } from "../theme/select";
 import { arrowContentProps, arrowElementProps } from "../utils/arrow";
 import { useFieldAdornments } from "../utils/field-adornments";
+import { canClearField, isFieldReadonly } from "../utils/field-clear";
 import { isNativeInputA11yAttr, isNativeInputAttr, isNativeInputEvent } from "../utils/native-input";
 import { overlayPortalProps } from "../utils/overlay";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { applyClassPrefix, resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps, useThemeBindings } from "../utils/ui";
 import { useComboboxSelect } from "./combobox-select";
 import ComboboxSelectBody from "./ComboboxSelectBody.vue";
+import FieldClearButton from "./FieldClearButton.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   id: { type: String, required: false },
@@ -76,6 +78,7 @@ const emit = defineEmits(["update:open", "update:modelValue", "update:searchTerm
 const slots = defineSlots();
 const { leading, trailing, padding } = useFieldAdornments();
 const instance = getCurrentInstance();
+const attrs = useAttrs();
 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");
 function selectionForMode(value, multiple) {
@@ -164,9 +167,6 @@ const {
 } = useComboboxSelect(new Proxy(props, {
   get: (target, key) => key === "modelValue" ? selection.value : Reflect.get(target, key)
 }), updateSelection, { creatable: props.creatable });
-function clear() {
-  setValue(props.multiple ? [] : void 0);
-}
 const selectedChipValue = ref();
 const dir = useDirection();
 function onTriggerKeydown(event) {
@@ -237,6 +237,12 @@ const searchText = computed({
     emit("update:searchTerm", value);
   }
 });
+const showClear = computed(() => canClearField(
+  props.clearable,
+  selectedValues.value.length > 0 || !!props.creatable && searchText.value.length > 0,
+  props.disabled,
+  isFieldReadonly(attrs.readonly)
+));
 const isSearchComposing = ref(false);
 function onSearchCompositionStart() {
   isSearchComposing.value = true;
@@ -415,8 +421,8 @@ const searchDescribedBy = computed(() => [
   props.creatable && props.multiple && props.displayMode === "comma" && selectedOptions.value.length ? selectedSummaryId : void 0
 ].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 adornmentButtonSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+const adornmentScope = computed(() => ({ disabled: !!props.disabled, size: effectiveSize.value, buttonSize: adornmentButtonSize.value }));
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("select", selectTheme);
@@ -586,6 +592,17 @@ const bodyProps = computed(() => ({
   itemProps: itemProps.value,
   itemIndicatorProps: itemIndicatorProps.value
 }));
+async function clear() {
+  if (!showClear.value)
+    return;
+  searchText.value = "";
+  setValue(props.multiple ? [] : void 0);
+  await nextTick();
+  if (props.creatable)
+    activeEditableInput.value?.focus();
+  else
+    selectTrigger.value?.$el?.focus();
+}
 </script>
 
 <template>
@@ -723,29 +740,18 @@ const bodyProps = computed(() => ({
           display-value re-syncs the visible text once modelValue changes.
           tabindex="-1" replicates the one bit of its behavior this used.
         -->
-        <Button
-          v-if="clearable && !disabled && selectedOptions.length"
-          :size="clearSize"
-          variant="text"
-          color="neutral"
-          tabindex="-1"
-          :aria-label="messages.clear"
-          v-bind="clearProps"
-          @click.stop="clear"
-        >
-          <template #icon="{ class: iconClass }">
-            <slot name="clear-icon">
-              <Icon :name="icons.close" :class="iconClass" />
-            </slot>
+        <FieldClearButton v-if="showClear" :size="effectiveSize" tabindex="-1" v-bind="clearProps" @click.stop="clear">
+          <template v-if="slots['clear-icon']" #default>
+            <slot name="clear-icon" />
           </template>
-        </Button>
+        </FieldClearButton>
         <slot v-if="loading" name="loading-icon">
-          <Icon :name="icons.loading" class="size-4 animate-spin" v-bind="iconProps" />
+          <Icon :name="icons.loading" class="animate-spin" v-bind="iconProps" />
         </slot>
         <span v-if="loading" class="sr-only">{{ messages.loading }}</span>
         <ComboboxTrigger v-if="dropdown" v-bind="dropdownProps" @click="onDropdownClick">
           <slot name="dropdown-icon">
-            <Icon :name="icons.chevronDown" class="size-4" />
+            <Icon :name="icons.chevronDown" v-bind="iconProps" />
           </slot>
         </ComboboxTrigger>
       </div>
@@ -775,21 +781,19 @@ const bodyProps = computed(() => ({
           :aria-controls="modalId"
           @keydown="openMobileAutocomplete"
         >
-        <Button v-if="clearable && !disabled && selectedOptions.length" :size="clearSize" variant="text" color="neutral" tabindex="-1" :aria-label="messages.clear" v-bind="clearProps" @click.stop="clear">
-          <template #icon>
-            <slot name="clear-icon">
-              <Icon :name="icons.close" class="size-4" />
-            </slot>
+        <FieldClearButton v-if="showClear" :size="effectiveSize" tabindex="-1" v-bind="clearProps" @click.stop="clear">
+          <template v-if="slots['clear-icon']" #default>
+            <slot name="clear-icon" />
           </template>
-        </Button>
+        </FieldClearButton>
         <slot v-if="loading" name="loading-icon">
-          <Icon :name="icons.loading" class="size-4 animate-spin" v-bind="iconProps" />
+          <Icon :name="icons.loading" class="animate-spin" v-bind="iconProps" />
         </slot>
         <span v-if="loading" class="sr-only">{{ messages.loading }}</span>
         <button v-if="dropdown" type="button" tabindex="-1" :disabled="disabled" :aria-label="messages.search" v-bind="dropdownProps" @click.stop="onDropdownClick();
   openMobileAutocomplete()">
           <slot name="dropdown-icon">
-            <Icon :name="icons.chevronDown" class="size-4" />
+            <Icon :name="icons.chevronDown" v-bind="iconProps" />
           </slot>
         </button>
       </div>
@@ -874,32 +878,19 @@ const bodyProps = computed(() => ({
           already set here regardless, so nothing about keyboard
           reachability changes.
         -->
-        <Button
-          v-if="clearable && !disabled && selectedOptions.length"
-          as="span"
-          role="button"
-          :size="clearSize"
-          variant="text"
-          color="neutral"
-          tabindex="-1"
-          :aria-label="messages.clear"
-          v-bind="clearProps"
-          @click.stop="clear"
-        >
-          <template #icon="{ class: iconClass }">
-            <slot name="clear-icon">
-              <Icon :name="icons.close" :class="iconClass" />
-            </slot>
+        <FieldClearButton v-if="showClear" as="span" role="button" :size="effectiveSize" tabindex="-1" v-bind="clearProps" @click.stop="clear">
+          <template v-if="slots['clear-icon']" #default>
+            <slot name="clear-icon" />
           </template>
-        </Button>
+        </FieldClearButton>
         <template v-if="loading">
           <slot name="loading-icon">
-            <Icon :name="icons.loading" class="size-4 animate-spin" v-bind="iconProps" />
+            <Icon :name="icons.loading" class="animate-spin" v-bind="iconProps" />
           </slot>
         </template>
         <template v-else>
           <slot name="dropdown-icon">
-            <Icon :name="icons.chevronDown" class="size-4" v-bind="iconProps" />
+            <Icon :name="icons.chevronDown" v-bind="iconProps" />
           </slot>
         </template>
         <span v-if="loading" class="sr-only">{{ messages.loading }}</span>

package/dist/runtime/internal/FieldClearButton.d.vue.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;
+    };
+};