@groupteknology/vuno 3.0.0 → 4.0.0

package/dist/runtime/app/components/MultiSelect/MultiSelect.d.vue.ts

@@ -0,0 +1,63 @@
+import type { OptionItem } from '#vuno/types/control';
+import type { MultiSelectProps, MultiSelectValue } from './MultiSelect.types.js';
+type __VLS_Props = MultiSelectProps;
+type __VLS_Slots = {
+    /** Lo que Vuno llama `decorator`: un `AILabel` u otra marca dentro del campo. */
+    decorator?: () => unknown;
+    /** Sustituye el texto de una opción; recibe la opción y su estado. */
+    item?: (props: {
+        highlighted: boolean;
+        item: OptionItem;
+        selected: boolean;
+    }) => unknown;
+};
+declare function focus(): void;
+type __VLS_ModelProps = {
+    modelValue?: MultiSelectValue | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: typeof focus;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: MultiSelectValue | undefined) => any;
+    inputChange: (query: string) => any;
+    menuChange: (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: MultiSelectValue | undefined) => any) | undefined;
+    onInputChange?: ((query: string) => any) | undefined;
+    onMenuChange?: ((open: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("#vuno/types/control").ControlSize;
+    invalid: boolean;
+    warn: boolean;
+    type: import("../Dropdown/Dropdown.types.js").DropdownType;
+    direction: import("../Dropdown/Dropdown.types.js").DropdownDirection;
+    placeholder: string;
+    name: string;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    id: string;
+    ui: import("#vuno/types/control").ControlUi<import("./MultiSelect.types.js").MultiSelectSlot>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    portal: import("../../types/base.js").PortalTarget;
+    locale: string;
+    compareItems: import("./MultiSelect.types.js").MultiSelectCompare;
+    clearAnnouncement: string;
+    clearSelectionDescription: string;
+    clearSelectionText: string;
+    filterable: boolean;
+    selectionFeedback: import("./MultiSelect.types.js").MultiSelectFeedback;
+    sortItems: import("./MultiSelect.types.js").MultiSelectSort;
+}, {}, {}, {}, 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/app/components/MultiSelect/MultiSelect.types.d.ts

@@ -0,0 +1,105 @@
+import type { PortalTarget } from '#vuno/types/base';
+import type { ControlSize, ControlUi, OptionItem, OptionValue } from '#vuno/types/control';
+import type { DropdownDirection, DropdownSlot, DropdownType } from '#vuno/components/Dropdown/Dropdown.types';
+/**
+ * Cuándo suben arriba las opciones elegidas.
+ *
+ * Es el `selectionFeedback` de Vuno. `top-after-reopen` —el valor por
+ * defecto— las reordena al volver a abrir la lista y no mientras se elige: mover
+ * una opción bajo el cursor justo al marcarla hace perder el sitio y lleva a
+ * marcar la siguiente sin querer. `top` reordena al instante y `fixed` conserva
+ * el orden alfabético sin distinguir lo elegido.
+ */
+export type MultiSelectFeedback = 'fixed' | 'top' | 'top-after-reopen';
+/**
+ * Cómo se comparan dos etiquetas al ordenar, el `compareItems` de Vuno.
+ *
+ * Recibe las etiquetas ya resueltas y no las opciones, como en Vuno, para que
+ * una comparación sirva igual en cualquier lista. El respaldo usa
+ * `localeCompare` con `numeric`, de modo que «Fase 2» va antes que «Fase 10».
+ */
+export type MultiSelectCompare = (a: string, b: string, options: {
+    locale: string;
+}) => number;
+export type MultiSelectSortOptions = {
+    compareItems: MultiSelectCompare;
+    locale: string;
+    /** Las opciones que suben arriba, según `selectionFeedback`. */
+    selectedItems: OptionItem[];
+};
+/**
+ * El orden de la lista, el `sortItems` de Vuno.
+ *
+ * Devolver el array recibido —`(items) => items`— conserva el orden en el que
+ * llegaron las opciones, que es lo que hace falta cuando ese orden significa
+ * algo: una escala, una prioridad, unos pasos.
+ */
+export type MultiSelectSort = (items: OptionItem[], options: MultiSelectSortOptions) => OptionItem[];
+/**
+ * Las clases que acepta `ui`.
+ *
+ * Hereda los nombres del tema `dropdown` porque la anatomía de Vuno es la
+ * misma —título, campo, disparador y lista— y añade lo que solo existe aquí: la
+ * etiqueta del recuento con su botón de limpiar, la casilla de cada opción y el
+ * color del aviso, que no es el del error.
+ */
+export type MultiSelectSlot = 'checkbox' | 'checkboxMark' | 'selection' | 'selectionClear' | 'selectionClearIcon' | 'selectionCount' | 'warning' | DropdownSlot;
+export type MultiSelectProps = {
+    id?: string;
+    name?: string;
+    /** Lo que se anuncia al limpiar toda la selección. */
+    clearAnnouncement?: string;
+    /**
+     * Cómo empieza el recuento que el lector de pantalla lee en la etiqueta del
+     * campo: «Elementos seleccionados: 2 Diseño, Producto».
+     */
+    clearSelectionDescription?: string;
+    /** Cómo se limpia la selección con el teclado, en la misma frase que el recuento. */
+    clearSelectionText?: string;
+    compareItems?: MultiSelectCompare;
+    direction?: DropdownDirection;
+    disabled?: boolean;
+    /**
+     * Añade un campo de texto que filtra las opciones.
+     *
+     * Es el `FilterableMultiSelect` del sistema de origen, que allí es otro componente
+     * porque el disparador cambia de elemento. Aquí es una variante del mismo,
+     * con el mismo contrato.
+     */
+    filterable?: boolean;
+    helperText?: string;
+    hideLabel?: boolean;
+    invalid?: boolean;
+    invalidText?: string;
+    items: OptionItem[];
+    labelText: string;
+    /** El idioma con el que se ordenan las opciones; por defecto el de `app.config`. */
+    locale?: string;
+    /**
+     * El texto del campo, el `label` de Vuno.
+     *
+     * No lo sustituye lo elegido: en Vuno el campo de un multiselect siempre
+     * dice lo mismo y el recuento vive en la etiqueta, porque una lista de
+     * etiquetas concatenadas se sale del campo en cuanto hay tres.
+     */
+    placeholder?: string;
+    portal?: PortalTarget;
+    /**
+     * Muestra la selección sin permitir cambiarla.
+     *
+     * No es `disabled`: el campo conserva el foco y el contraste del texto, y se
+     * anuncia con `aria-disabled`, para que quien navega con teclado o lector de
+     * pantalla pueda leer lo que hay elegido.
+     */
+    readonly?: boolean;
+    required?: boolean;
+    selectionFeedback?: MultiSelectFeedback;
+    size?: ControlSize;
+    sortItems?: MultiSelectSort;
+    type?: DropdownType;
+    ui?: ControlUi<MultiSelectSlot>;
+    warn?: boolean;
+    warnText?: string;
+};
+/** El valor del multiselect: los valores elegidos, en el orden en que se eligieron. */
+export type MultiSelectValue = OptionValue[];

package/dist/runtime/app/components/MultiSelect/MultiSelect.vue

@@ -0,0 +1,479 @@
+<script setup>
+import { size as sizeMiddleware } from "@floating-ui/dom";
+import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, useId, useTemplateRef, watch } from "vue";
+import { useAnchor } from "#vuno/composables/internal/useAnchor";
+import { usePortal } from "#vuno/composables/internal/usePortal";
+import { useIcons, useLocale, useMessages, useTheme } from "#vuno/composables/useTheme";
+import { cn } from "#vuno/utils/theme";
+import { toOptionKey } from "#vuno/components/Dropdown/option";
+import { useDropdownState } from "#vuno/components/Dropdown/useDropdownState";
+import FormLabel from "#vuno/components/FormLabel/FormLabel.vue";
+import { compareOptions, sortOptions } from "./sort";
+import PrimitiveControl from "#vuno/primitives/PrimitiveControl/PrimitiveControl.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "MultiSelect", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  clearAnnouncement: { type: String, required: false, default: "Se ha limpiado la selecci\xF3n" },
+  clearSelectionDescription: { type: String, required: false, default: "Elementos seleccionados:" },
+  clearSelectionText: { type: String, required: false, default: "Para limpiar la selecci\xF3n, pulsa Supr o Retroceso" },
+  compareItems: { type: Function, required: false, default: void 0 },
+  direction: { type: String, required: false, default: "bottom" },
+  disabled: { type: Boolean, required: false, default: false },
+  filterable: { type: Boolean, required: false, default: false },
+  helperText: { type: String, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  invalid: { type: Boolean, required: false, default: false },
+  invalidText: { type: String, required: false, default: void 0 },
+  items: { type: Array, required: true },
+  labelText: { type: String, required: true },
+  locale: { type: String, required: false, default: void 0 },
+  placeholder: { type: String, required: false, default: void 0 },
+  portal: { type: [String, Boolean], required: false, default: void 0 },
+  readonly: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  selectionFeedback: { type: String, required: false, default: "top-after-reopen" },
+  size: { type: String, required: false, default: "md" },
+  sortItems: { type: Function, required: false, default: void 0 },
+  type: { type: String, required: false, default: "default" },
+  ui: { type: Object, required: false, default: void 0 },
+  warn: { type: Boolean, required: false, default: false },
+  warnText: { type: String, required: false, default: void 0 }
+});
+const emit = defineEmits(["inputChange", "menuChange"]);
+defineSlots();
+const icons = useIcons();
+const messages = useMessages();
+const fallbackLocale = useLocale();
+const portalTarget = usePortal(() => props.portal);
+const uid = useId();
+const controlId = computed(() => props.id ?? `${uid}-control`);
+const labelId = `${uid}-label`;
+const listId = `${uid}-list`;
+const messageId = `${uid}-message`;
+const boundary = shallowRef(void 0);
+const cleared = shallowRef(false);
+const control = useTemplateRef("control");
+const field = useTemplateRef("field");
+const list = useTemplateRef("list");
+const mounted = shallowRef(false);
+const invalid = computed(() => !props.readonly && props.invalid);
+const warn = computed(() => !props.readonly && !invalid.value && props.warn);
+const message = computed(() => invalid.value ? props.invalidText : warn.value ? props.warnText : props.helperText);
+const ui = useTheme(
+  "dropdown",
+  () => props.ui,
+  () => ({
+    invalid: String(invalid.value),
+    readOnly: String(props.readonly),
+    size: props.size,
+    type: props.type,
+    warn: String(warn.value)
+  })
+);
+const checkbox = useTheme("checkbox");
+const tag = useTheme("tag", void 0, () => ({ disabled: String(props.disabled), size: "md", type: "high-contrast" }));
+const topKeys = shallowRef([]);
+const stateIcon = computed(() => invalid.value ? icons.value.notifyError : warn.value ? icons.value.notifyWarning : void 0);
+const selectionClass = computed(() => cn(tag.value.root, "pe-0", props.readonly && "text-(--vuno-text-primary) shadow-[0_0_0_1px_var(--vuno-border-subtle-01)] [--vuno-tag-background:transparent]", props.ui?.selection));
+const selectionCountClass = computed(() => cn(tag.value.text, props.ui?.selectionCount));
+const selectionClearClass = computed(() => cn(tag.value.close, "text-(--vuno-text-inverse)", props.disabled && "text-(--vuno-icon-disabled)", props.readonly && "cursor-default text-(--vuno-icon-disabled)", props.ui?.selectionClear));
+const selectionClearIconClass = computed(() => cn("size-4", props.ui?.selectionClearIcon));
+const checkboxClass = computed(() => cn("relative size-4 shrink-0", props.ui?.checkbox));
+const checkboxInputClass = computed(() => cn(checkbox.value.base, "pointer-events-none mt-0"));
+const checkboxMarkClass = computed(() => cn(checkbox.value.mark, props.ui?.checkboxMark));
+const itemClass = computed(() => cn(ui.value.item, "justify-start gap-3"));
+const compare = computed(() => props.compareItems ?? compareOptions);
+const sort = computed(() => props.sortItems ?? sortOptions);
+const locale = computed(() => props.locale ?? fallbackLocale.value);
+const selectionKeys = computed(() => (Array.isArray(model.value) ? model.value : []).map(toOptionKey));
+const count = computed(() => selectionKeys.value.length);
+const orderKeys = computed(() => props.selectionFeedback === "fixed" ? [] : props.selectionFeedback === "top" ? selectionKeys.value : topKeys.value);
+const orderedItems = computed(() => {
+  const keys = orderKeys.value;
+  const selectedItems = keys.length === 0 ? [] : props.items.filter((item) => keys.includes(toOptionKey(item.value)));
+  return sort.value(props.items, { compareItems: compare.value, locale: locale.value, selectedItems });
+});
+const selection = computed({
+  get: () => model.value,
+  set: (value) => model.value = Array.isArray(value) ? value : value === void 0 ? [] : [value]
+});
+const optionId = (key) => `${uid}-${key.replace(/[^\w-]/g, "_")}`;
+const { onInput, onKeydown, activeKey, choose, close, displayValue, highlighted, isSelected, open, openList, query, visibleItems } = useDropdownState({
+  model: selection,
+  optionId,
+  disabled: () => props.disabled,
+  field: () => field.value ?? void 0,
+  items: () => orderedItems.value,
+  list: () => list.value ?? void 0,
+  multiple: () => true,
+  readonly: () => props.readonly,
+  searchable: () => props.filterable
+});
+const selectionSummary = computed(() => `${props.clearSelectionDescription} ${count.value} ${displayValue.value}, ${props.clearSelectionText}`);
+const formValues = computed(() => {
+  if (!props.name) return [];
+  return (Array.isArray(model.value) ? model.value : []).map((value) => value === null ? "" : String(value));
+});
+const { anchor, release } = useAnchor({
+  boundary: () => boundary.value,
+  middleware: () => [
+    sizeMiddleware({
+      boundary: boundary.value,
+      padding: 8,
+      apply: ({ availableHeight, elements, rects }) => {
+        elements.floating.style.setProperty("--vuno-dropdown-width", `${rects.reference.width}px`);
+        elements.floating.style.setProperty("--vuno-dropdown-available-height", `${availableHeight}px`);
+      }
+    })
+  ],
+  placement: () => props.direction === "top" ? "top-start" : "bottom-start"
+});
+function focus() {
+  field.value?.focus();
+}
+function onPointerDownOutside(event) {
+  const target = event.target;
+  if (!target) return;
+  const inControl = control.value?.$el?.contains(target);
+  if (inControl || list.value?.contains(target)) return;
+  close();
+}
+function place() {
+  anchor(control.value?.$el, list.value ?? void 0);
+}
+function onFieldPointerDown() {
+  if (props.filterable) {
+    openList();
+    return;
+  }
+  if (open.value) close();
+  else openList();
+}
+function onToggle() {
+  if (open.value) {
+    close(true);
+    return;
+  }
+  focus();
+  openList();
+}
+function clearSelection() {
+  if (props.disabled || props.readonly) return;
+  model.value = [];
+  query.value = "";
+  cleared.value = true;
+  focus();
+}
+function clearQuery() {
+  query.value = "";
+  emit("inputChange", "");
+  focus();
+}
+function onFieldInput(event) {
+  onInput(event);
+  emit("inputChange", query.value);
+}
+function onFieldKeydown(event) {
+  if (props.disabled || props.readonly) return;
+  const clears = event.key === "Backspace" || event.key === "Delete" || event.key === "Escape";
+  if (clears && !open.value && count.value > 0 && (!props.filterable || query.value === "")) {
+    event.preventDefault();
+    clearSelection();
+    return;
+  }
+  onKeydown(event);
+}
+watch(open, (isOpen) => {
+  emit("menuChange", isOpen);
+  if (!isOpen) {
+    release();
+    document.removeEventListener("pointerdown", onPointerDownOutside, true);
+    return;
+  }
+  topKeys.value = selectionKeys.value;
+  cleared.value = false;
+  boundary.value = control.value?.$el?.closest("dialog") ?? void 0;
+  void nextTick(() => {
+    place();
+    document.addEventListener("pointerdown", onPointerDownOutside, true);
+  });
+});
+watch(count, (value) => {
+  if (value > 0) cleared.value = false;
+});
+onMounted(() => mounted.value = true);
+onBeforeUnmount(() => {
+  release();
+  document.removeEventListener("pointerdown", onPointerDownOutside, true);
+});
+defineExpose({ focus });
+</script>
+
+<template>
+    <div :class="ui.wrapper">
+        <FormLabel
+            :id="labelId"
+            :disabled="props.disabled"
+            :for="controlId"
+            :hideLabel="props.hideLabel"
+            :invalid="invalid"
+            :ui="{ label: ui.title }"
+        >
+            {{ props.labelText }}
+
+            <span
+                v-if="count > 0"
+                class="sr-only"
+            >
+                {{ selectionSummary }}
+            </span>
+        </FormLabel>
+
+        <PrimitiveControl
+            ref="control"
+            :data-disabled="props.disabled || void 0"
+            :data-expanded="open || void 0"
+            :size="props.size"
+            :ui="{ root: ui.control }"
+        >
+            <div
+                v-if="count > 0"
+                :class="selectionClass"
+            >
+                <span
+                    :class="selectionCountClass"
+                    :title="String(count)"
+                >
+                    {{ count }}
+                </span>
+
+                <span
+                    :aria-disabled="props.disabled || props.readonly || void 0"
+                    :aria-label="messages.clearSelection"
+                    :class="selectionClearClass"
+                    role="button"
+                    tabindex="-1"
+                    :title="messages.clearSelection"
+                    @click="clearSelection"
+                    @pointerdown.prevent.stop
+                >
+                    <Icon
+                        aria-hidden="true"
+                        :class="selectionClearIconClass"
+                        :name="icons.close"
+                    />
+                </span>
+            </div>
+
+            <template v-if="props.filterable">
+                <input
+                    v-bind="$attrs"
+                    :id="controlId"
+                    ref="field"
+                    :aria-activedescendant="open && activeKey ? optionId(activeKey) : void 0"
+                    aria-autocomplete="list"
+                    :aria-controls="listId"
+                    :aria-describedby="message ? messageId : void 0"
+                    :aria-disabled="props.readonly || void 0"
+                    :aria-expanded="open"
+                    aria-haspopup="listbox"
+                    :aria-invalid="invalid || void 0"
+                    :aria-required="props.required || void 0"
+                    autocomplete="off"
+                    :class="ui.input"
+                    :disabled="props.disabled"
+                    :placeholder="props.placeholder ?? messages.dropdownPlaceholder"
+                    :readonly="props.readonly"
+                    role="combobox"
+                    :value="query"
+                    @input="onFieldInput"
+                    @keydown="onFieldKeydown"
+                    @pointerdown="onFieldPointerDown"
+                />
+
+                <Icon
+                    v-if="stateIcon"
+                    :class="ui.stateIcon"
+                    :name="stateIcon"
+                />
+
+                <button
+                    v-if="query !== '' && !props.readonly"
+                    :aria-label="messages.clearSearch"
+                    :class="[ui.trigger, ui.clear]"
+                    :disabled="props.disabled"
+                    tabindex="-1"
+                    :title="messages.clearSearch"
+                    type="button"
+                    @click="clearQuery"
+                    @pointerdown.prevent
+                >
+                    <Icon
+                        :class="ui.triggerIcon"
+                        :name="icons.close"
+                    />
+                </button>
+
+                <button
+                    :aria-controls="listId"
+                    :aria-expanded="open"
+                    :aria-label="messages.dropdownToggle"
+                    :class="ui.trigger"
+                    :data-open="open || void 0"
+                    :disabled="props.disabled || props.readonly"
+                    tabindex="-1"
+                    type="button"
+                    @click="onToggle"
+                >
+                    <Icon
+                        :class="ui.triggerIcon"
+                        :name="icons.dropdownOpen"
+                    />
+                </button>
+            </template>
+
+            <button
+                v-else
+                v-bind="$attrs"
+                :id="controlId"
+                ref="field"
+                :aria-activedescendant="open && activeKey ? optionId(activeKey) : void 0"
+                :aria-controls="listId"
+                :aria-describedby="message ? messageId : void 0"
+                :aria-disabled="props.readonly || void 0"
+                :aria-expanded="open"
+                aria-haspopup="listbox"
+                :aria-invalid="invalid || void 0"
+                :aria-required="props.required || void 0"
+                :class="ui.field"
+                :disabled="props.disabled"
+                role="combobox"
+                type="button"
+                @keydown="onFieldKeydown"
+                @pointerdown="onFieldPointerDown"
+            >
+                <!-- El texto del campo no es una sugerencia que la selección sustituya: es la etiqueta fija de Vuno, y por eso conserva el color del texto primario. -->
+                <span :class="ui.label">
+                    {{ props.placeholder ?? messages.dropdownPlaceholder }}
+                </span>
+
+                <Icon
+                    v-if="stateIcon"
+                    :class="ui.stateIcon"
+                    :name="stateIcon"
+                />
+
+                <span
+                    :class="ui.trigger"
+                    :data-disabled="props.disabled || void 0"
+                    :data-open="open || void 0"
+                >
+                    <Icon
+                        :class="ui.triggerIcon"
+                        :name="icons.dropdownOpen"
+                    />
+                </span>
+            </button>
+
+            <slot name="decorator" />
+        </PrimitiveControl>
+
+        <input
+            v-for="(value, index) in formValues"
+            :key="index"
+            :name="props.name"
+            type="hidden"
+            :value="value"
+        />
+
+        <span
+            aria-live="assertive"
+            class="sr-only"
+        >
+            {{ cleared ? props.clearAnnouncement : "" }}
+        </span>
+
+        <!--
+            El color se funde con `cn` y no se apila en un array: ayuda, error y
+            aviso son la misma utilidad de Tailwind, y sin fundirlos gana el que
+            la hoja emita más tarde, que es el de la ayuda.
+        -->
+        <p
+            v-if="message"
+            :id="messageId"
+            :class="cn(ui.helper, invalid && ui.message, warn && ui.warning)"
+        >
+            {{ message }}
+        </p>
+
+        <Teleport
+            v-if="mounted"
+            :to="portalTarget"
+        >
+            <ul
+                v-if="open"
+                :id="listId"
+                ref="list"
+                :aria-labelledby="labelId"
+                aria-multiselectable="true"
+                :class="ui.content"
+                role="listbox"
+                style="position: fixed; top: 0; left: 0"
+            >
+                <li
+                    v-if="visibleItems.length === 0"
+                    :class="ui.empty"
+                >
+                    {{ messages.noMatches }}
+                </li>
+
+                <li
+                    v-for="(item, index) in visibleItems"
+                    :id="optionId(toOptionKey(item.value))"
+                    :key="toOptionKey(item.value)"
+                    :aria-checked="isSelected(item)"
+                    :aria-disabled="item.disabled || void 0"
+                    :aria-selected="isSelected(item)"
+                    :class="itemClass"
+                    :data-disabled="item.disabled || void 0"
+                    :data-highlighted="index === highlighted || void 0"
+                    :data-selected="isSelected(item) || void 0"
+                    role="option"
+                    :title="item.label"
+                    @click="choose(item)"
+                    @pointermove="item.disabled ? void 0 : highlighted = index"
+                >
+                    <span :class="checkboxClass">
+                        <input
+                            aria-hidden="true"
+                            :checked="isSelected(item)"
+                            :class="checkboxInputClass"
+                            :disabled="props.disabled || item.disabled"
+                            tabindex="-1"
+                            type="checkbox"
+                        />
+
+                        <span
+                            aria-hidden="true"
+                            :class="checkboxMarkClass"
+                        />
+                    </span>
+
+                    <span class="truncate">
+                        <slot
+                            :highlighted="index === highlighted"
+                            :item="item"
+                            name="item"
+                            :selected="isSelected(item)"
+                        >
+                            {{ item.label }}
+                        </slot>
+                    </span>
+                </li>
+            </ul>
+        </Teleport>
+    </div>
+</template>