@sewadah/selaras 0.7.1 → 0.9.0

package/dist/runtime/components/TransferList.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { getCurrentInstance } from "vue";
+import TransferListBase from "../internal/TransferListBase.vue";
+const props = defineProps({
+  checked: { type: null, required: false },
+  sourceLabel: { type: String, required: false },
+  targetLabel: { type: String, required: false },
+  sourceSearchTerm: { type: String, required: false },
+  targetSearchTerm: { type: String, required: false },
+  showSelectAll: { type: Boolean, required: false, default: true },
+  layout: { type: String, required: false },
+  ui: { type: Object, required: false },
+  descriptionKey: { type: String, 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 },
+  searchable: { type: Boolean, 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:checked", "update:sourceSearchTerm", "update:targetSearchTerm", "transfer"]);
+const slots = defineSlots();
+const instance = getCurrentInstance();
+function baseProps() {
+  const raw = instance.vnode.props ?? {};
+  const { modelValue, checked, ...rest } = props;
+  return {
+    ...rest,
+    ...Object.hasOwn(raw, "modelValue") || Object.hasOwn(raw, "model-value") ? { modelValue } : {},
+    ...Object.hasOwn(raw, "checked") ? { checked } : {}
+  };
+}
+</script>
+
+<template>
+  <TransferListBase
+    v-bind="baseProps()"
+    @update:model-value="emit('update:modelValue', $event)"
+    @update:checked="emit('update:checked', $event)"
+    @update:source-search-term="emit('update:sourceSearchTerm', $event)"
+    @update:target-search-term="emit('update:targetSearchTerm', $event)"
+    @transfer="emit('transfer', $event)"
+  >
+    <template v-if="slots.item" #item="data">
+      <slot name="item" v-bind="data" />
+    </template>
+    <template v-for="name in ['source-header', 'target-header'].filter((name) => slots[name])" :key="name" #[name]="data">
+      <slot :name="name" v-bind="data" />
+    </template>
+    <template v-for="name in ['source-footer', 'target-footer'].filter((name) => slots[name])" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+    <template v-for="name in ['empty', 'empty-filter'].filter((name) => slots[name])" :key="name" #[name]="data">
+      <slot :name="name" v-bind="data" />
+    </template>
+  </TransferListBase>
+</template>

package/dist/runtime/components/TransferList.vue.d.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];
+}) & {};

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

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

package/dist/runtime/internal/ComboboxSelectBase.vue

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

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

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

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

@@ -0,0 +1,15 @@
+import type { SelectModelValue } from '../utils/select-contracts.js';
+type __VLS_Props = {
+    values: SelectModelValue[];
+    name?: string;
+    form?: string;
+    required?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reset: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReset?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/internal/ListSelectionForm.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+import { applyClassPrefix } from "../utils/ui";
+defineProps({
+  values: { type: Array, required: true },
+  name: { type: String, required: false },
+  form: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["reset"]);
+const anchor = ref();
+let owner = null;
+function reset(event) {
+  queueMicrotask(() => {
+    if (!event.defaultPrevented)
+      emit("reset");
+  });
+}
+onMounted(() => {
+  owner = anchor.value?.form ?? null;
+  owner?.addEventListener("reset", reset);
+});
+onUnmounted(() => owner?.removeEventListener("reset", reset));
+function serialize(value) {
+  return typeof value === "object" ? JSON.stringify(value) : String(value);
+}
+</script>
+
+<template>
+  <input ref="anchor" :type="required ? 'text' : 'hidden'" :class="required ? applyClassPrefix('sr-only') : void 0" :form="form" :required="required && !disabled && !values.length" :disabled="disabled || !!values.length" aria-hidden="true" tabindex="-1" autocomplete="off">
+  <input v-for="(value, index) in values" :key="index" type="hidden" :name="name" :form="form" :value="serialize(value)" :disabled="disabled">
+</template>

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

@@ -0,0 +1,15 @@
+import type { SelectModelValue } from '../utils/select-contracts.js';
+type __VLS_Props = {
+    values: SelectModelValue[];
+    name?: string;
+    form?: string;
+    required?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reset: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReset?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,49 @@
+import type { ListboxProps } from '../utils/listbox-contracts.js';
+import type { SelectModelValue } from '../utils/select-contracts.js';
+import type { SelectItems } from './combobox-select.js';
+export interface ListboxBaseProps extends Omit<ListboxProps, 'items' | 'valueKey' | 'labelKey' | 'descriptionKey' | 'multiple' | 'modelValue' | 'defaultValue'> {
+    items: SelectItems;
+    valueKey?: string;
+    labelKey?: string;
+    descriptionKey?: string;
+    multiple?: boolean;
+    modelValue?: SelectModelValue | SelectModelValue[];
+    defaultValue?: SelectModelValue | SelectModelValue[];
+    /** Composite panels must not inherit or submit their parent's form value. */
+    formField?: boolean;
+}
+type __VLS_Slots = {
+    'item'?: (props: {
+        item: SelectModelValue;
+        index: number;
+        selected: boolean;
+        disabled: boolean;
+    }) => any;
+    'group'?: (props: {
+        group: {
+            label: string;
+            items: readonly SelectModelValue[];
+        };
+    }) => any;
+    'header'?: () => any;
+    'footer'?: () => any;
+    'empty'?: () => any;
+    'empty-filter'?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ListboxBaseProps, {
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SelectModelValue | SelectModelValue[] | undefined) => any;
+    "update:searchTerm": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<ListboxBaseProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SelectModelValue | SelectModelValue[] | undefined) => any) | undefined;
+    "onUpdate:searchTerm"?: ((value: 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;
+    };
+};