@sewadah/selaras 0.8.0 → 0.10.0

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.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

@@ -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";
@@ -28,12 +28,15 @@ 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 { 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 { 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";
+import FieldClearButton from "./FieldClearButton.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   id: { type: String, required: false },
@@ -72,7 +75,10 @@ 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 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) {
@@ -161,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) {
@@ -234,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;
@@ -412,7 +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 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);
@@ -427,6 +437,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;
@@ -579,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>
@@ -596,7 +620,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 +635,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"
       >
         <!--
@@ -713,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>
@@ -745,7 +761,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>
@@ -765,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>
@@ -794,7 +808,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"
@@ -864,36 +878,26 @@ 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>
       </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/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;
+    };
+};

package/dist/runtime/internal/FieldClearButton.vue

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

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

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

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

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

package/dist/runtime/internal/ListboxOption.vue

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

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

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