@rotki/ui-library 3.1.7 → 3.3.0

package/dist/components/forms/auto-complete/RuiAutoCompleteOptionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAutoCompleteOptionList.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/auto-complete/RuiAutoCompleteOptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TItem\">\nimport type { ComponentPublicInstance, Ref, StyleValue } from 'vue';\nimport type { DropdownOptionGroup } from '@/composables/dropdown-menu';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiAutoCompleteOption from '@/components/forms/auto-complete/RuiAutoCompleteOption.vue';\n\nexport interface AutoCompleteOptionListProps<TItem> {\n  containerProps: {\n    ref: Ref<HTMLElement | null>;\n    onScroll: () => void;\n    style: StyleValue;\n  };\n  wrapperProps: Record<string, unknown>;\n  /** Hands the list element back to the parent, which the dropdown composable measures. */\n  setMenuRef: (element: Element | ComponentPublicInstance | null) => void;\n  isGrouped: boolean;\n  groupedOptions: DropdownOptionGroup<TItem>[];\n  renderedData: { _index: number; item: TItem }[];\n  options: TItem[];\n  highlightedIndex: number;\n  highlightedClass: string;\n  dense: boolean;\n  menuClass: VueClassValue;\n  menuStyle: StyleValue;\n  getIdentifier: (item: TItem) => unknown;\n  getText: (item: TItem) => string | undefined;\n  isActiveItem: (item: TItem) => boolean;\n  isItemDisabled: (item: TItem) => boolean;\n  /** Prefix of each option's id, which the combobox input names in `aria-activedescendant`. */\n  optionIdPrefix: string;\n}\n\nconst {\n  containerProps,\n  dense,\n  getIdentifier,\n  getText,\n  groupedOptions,\n  highlightedClass,\n  highlightedIndex,\n  isActiveItem,\n  isGrouped,\n  isItemDisabled,\n  menuClass,\n  menuStyle,\n  optionIdPrefix,\n  options,\n  renderedData,\n  setMenuRef,\n  wrapperProps,\n} = defineProps<AutoCompleteOptionListProps<TItem>>();\n\nconst emit = defineEmits<{\n  'select': [item: TItem];\n  'move-highlight': [up: boolean];\n}>();\n\ndefineSlots<{\n  'group-header'?: (props: { group: string; items: TItem[] }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n}>();\n\n/**\n * The highlight follows the option's place in the flat option list, which is\n * the order the keyboard walks, so a grouped option looks its index up there\n * rather than in the bucket it is drawn in.\n */\nfunction isHighlighted(item: TItem): boolean {\n  return options.indexOf(item) === highlightedIndex;\n}\n</script>\n\n<template>\n  <div\n    :ref=\"containerProps.ref\"\n    :class=\"menuClass\"\n    :style=\"[containerProps.style, menuStyle]\"\n    @scroll=\"containerProps.onScroll()\"\n    @keydown.up.prevent=\"emit('move-highlight', true)\"\n    @keydown.down.prevent=\"emit('move-highlight', false)\"\n  >\n    <div\n      v-if=\"isGrouped\"\n      :ref=\"setMenuRef\"\n    >\n      <template\n        v-for=\"(bucket, bucketIndex) in groupedOptions\"\n        :key=\"bucket.group || `group-${bucketIndex}`\"\n      >\n        <div\n          class=\"sticky top-0 z-rui-raised bg-rui-menu\"\n          data-id=\"group-header\"\n        >\n          <slot\n            name=\"group-header\"\n            v-bind=\"{ group: bucket.group, items: bucket.items }\"\n          >\n            <div class=\"px-3 pt-2 pb-1 text-xs font-medium text-rui-text-secondary\">\n              {{ bucket.group }}\n            </div>\n          </slot>\n        </div>\n        <RuiAutoCompleteOption\n          v-for=\"item in bucket.items\"\n          :id=\"`${optionIdPrefix}-${options.indexOf(item)}`\"\n          :key=\"getIdentifier(item)?.toString()\"\n          :item=\"item\"\n          :text=\"getText(item)\"\n          :active=\"isActiveItem(item)\"\n          :disabled=\"isItemDisabled(item)\"\n          :dense=\"dense\"\n          :highlighted=\"isHighlighted(item)\"\n          :highlighted-class=\"highlightedClass\"\n          @select=\"emit('select', $event)\"\n        >\n          <template\n            v-if=\"$slots['item.prepend']\"\n            #prepend=\"slotProps\"\n          >\n            <slot\n              name=\"item.prepend\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"$slots.item\"\n            #default=\"slotProps\"\n          >\n            <slot\n              name=\"item\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"$slots['item.append']\"\n            #append=\"slotProps\"\n          >\n            <slot\n              name=\"item.append\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n        </RuiAutoCompleteOption>\n      </template>\n    </div>\n    <div\n      v-else\n      v-bind=\"wrapperProps\"\n      :ref=\"setMenuRef\"\n    >\n      <RuiAutoCompleteOption\n        v-for=\"{ item, _index } in renderedData\"\n        :id=\"`${optionIdPrefix}-${_index}`\"\n        :key=\"getIdentifier(item)?.toString()\"\n        :item=\"item\"\n        :text=\"getText(item)\"\n        :active=\"isActiveItem(item)\"\n        :disabled=\"isItemDisabled(item)\"\n        :dense=\"dense\"\n        :highlighted=\"highlightedIndex === _index\"\n        :highlighted-class=\"highlightedClass\"\n        @select=\"emit('select', $event)\"\n      >\n        <template\n          v-if=\"$slots['item.prepend']\"\n          #prepend=\"slotProps\"\n        >\n          <slot\n            name=\"item.prepend\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n        <template\n          v-if=\"$slots.item\"\n          #default=\"slotProps\"\n        >\n          <slot\n            name=\"item\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['item.append']\"\n          #append=\"slotProps\"\n        >\n          <slot\n            name=\"item.append\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n      </RuiAutoCompleteOption>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAutoCompleteOptionList.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/auto-complete/RuiAutoCompleteOptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TItem\">\nimport type { ComponentPublicInstance, HTMLAttributes, Ref, StyleValue } from 'vue';\nimport type { DropdownOptionGroup } from '@/composables/dropdown-menu';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiAutoCompleteOption from '@/components/forms/auto-complete/RuiAutoCompleteOption.vue';\n\nexport interface AutoCompleteOptionListProps<TItem> {\n  containerProps: {\n    ref: Ref<HTMLElement | null>;\n    onScroll: () => void;\n    style: StyleValue;\n  };\n  wrapperProps: Record<string, unknown>;\n  /** Hands the list element back to the parent, which the dropdown composable measures. */\n  setMenuRef: (element: Element | ComponentPublicInstance | null) => void;\n  isGrouped: boolean;\n  groupedOptions: DropdownOptionGroup<TItem>[];\n  renderedData: { _index: number; item: TItem }[];\n  options: TItem[];\n  highlightedIndex: number;\n  highlightedClass: string;\n  dense: boolean;\n  menuClass: VueClassValue;\n  menuStyle: StyleValue;\n  getIdentifier: (item: TItem) => unknown;\n  getText: (item: TItem) => string | undefined;\n  isActiveItem: (item: TItem) => boolean;\n  isItemDisabled: (item: TItem) => boolean;\n  /** Prefix of each option's id, which the combobox input names in `aria-activedescendant`. */\n  optionIdPrefix: string;\n}\n\nconst {\n  containerProps,\n  dense,\n  getIdentifier,\n  getText,\n  groupedOptions,\n  highlightedClass,\n  highlightedIndex,\n  isActiveItem,\n  isGrouped,\n  isItemDisabled,\n  menuClass,\n  menuStyle,\n  optionIdPrefix,\n  options,\n  renderedData,\n  setMenuRef,\n  wrapperProps,\n} = defineProps<AutoCompleteOptionListProps<TItem> & /* @vue-ignore */ Omit<HTMLAttributes, keyof AutoCompleteOptionListProps<TItem> | 'onSelect'>>();\n\nconst emit = defineEmits<{\n  'select': [item: TItem];\n  'move-highlight': [up: boolean];\n}>();\n\ndefineSlots<{\n  'group-header'?: (props: { group: string; items: TItem[] }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n}>();\n\n/**\n * The highlight follows the option's place in the flat option list, which is\n * the order the keyboard walks, so a grouped option looks its index up there\n * rather than in the bucket it is drawn in.\n */\nfunction isHighlighted(item: TItem): boolean {\n  return options.indexOf(item) === highlightedIndex;\n}\n</script>\n\n<template>\n  <div\n    :ref=\"containerProps.ref\"\n    :class=\"menuClass\"\n    :style=\"[containerProps.style, menuStyle]\"\n    @scroll=\"containerProps.onScroll()\"\n    @keydown.up.prevent=\"emit('move-highlight', true)\"\n    @keydown.down.prevent=\"emit('move-highlight', false)\"\n  >\n    <div\n      v-if=\"isGrouped\"\n      :ref=\"setMenuRef\"\n    >\n      <template\n        v-for=\"(bucket, bucketIndex) in groupedOptions\"\n        :key=\"bucket.group || `group-${bucketIndex}`\"\n      >\n        <div\n          class=\"sticky top-0 z-rui-raised bg-rui-menu\"\n          data-id=\"group-header\"\n        >\n          <slot\n            name=\"group-header\"\n            v-bind=\"{ group: bucket.group, items: bucket.items }\"\n          >\n            <div class=\"px-3 pt-2 pb-1 text-xs font-medium text-rui-text-secondary\">\n              {{ bucket.group }}\n            </div>\n          </slot>\n        </div>\n        <RuiAutoCompleteOption\n          v-for=\"item in bucket.items\"\n          :id=\"`${optionIdPrefix}-${options.indexOf(item)}`\"\n          :key=\"getIdentifier(item)?.toString()\"\n          :item=\"item\"\n          :text=\"getText(item)\"\n          :active=\"isActiveItem(item)\"\n          :disabled=\"isItemDisabled(item)\"\n          :dense=\"dense\"\n          :highlighted=\"isHighlighted(item)\"\n          :highlighted-class=\"highlightedClass\"\n          @select=\"emit('select', $event)\"\n        >\n          <template\n            v-if=\"$slots['item.prepend']\"\n            #prepend=\"slotProps\"\n          >\n            <slot\n              name=\"item.prepend\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"$slots.item\"\n            #default=\"slotProps\"\n          >\n            <slot\n              name=\"item\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"$slots['item.append']\"\n            #append=\"slotProps\"\n          >\n            <slot\n              name=\"item.append\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n        </RuiAutoCompleteOption>\n      </template>\n    </div>\n    <div\n      v-else\n      v-bind=\"wrapperProps\"\n      :ref=\"setMenuRef\"\n    >\n      <RuiAutoCompleteOption\n        v-for=\"{ item, _index } in renderedData\"\n        :id=\"`${optionIdPrefix}-${_index}`\"\n        :key=\"getIdentifier(item)?.toString()\"\n        :item=\"item\"\n        :text=\"getText(item)\"\n        :active=\"isActiveItem(item)\"\n        :disabled=\"isItemDisabled(item)\"\n        :dense=\"dense\"\n        :highlighted=\"highlightedIndex === _index\"\n        :highlighted-class=\"highlightedClass\"\n        @select=\"emit('select', $event)\"\n      >\n        <template\n          v-if=\"$slots['item.prepend']\"\n          #prepend=\"slotProps\"\n        >\n          <slot\n            name=\"item.prepend\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n        <template\n          v-if=\"$slots.item\"\n          #default=\"slotProps\"\n        >\n          <slot\n            name=\"item\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['item.append']\"\n          #append=\"slotProps\"\n        >\n          <slot\n            name=\"item.append\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n      </RuiAutoCompleteOption>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/auto-complete/RuiAutoCompleteOptionList.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance, Ref, StyleValue } from 'vue';
+import type { ComponentPublicInstance, HTMLAttributes, Ref, StyleValue } from 'vue';
 import type { DropdownOptionGroup } from '../../../composables/dropdown-menu.js';
 import type { VueClassValue } from '../../../types/class-value.js';
 export interface AutoCompleteOptionListProps<TItem> {
@@ -30,7 +30,7 @@ export interface AutoCompleteOptionListProps<TItem> {
     optionIdPrefix: string;
 }
 declare const __VLS_export: <TItem>(__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<AutoCompleteOptionListProps<TItem> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(AutoCompleteOptionListProps<TItem> & Omit<HTMLAttributes, "onSelect" | keyof AutoCompleteOptionListProps<TItem>>) & {
         onSelect?: ((item: TItem) => any) | undefined;
         "onMove-highlight"?: ((up: boolean) => any) | undefined;
     }> & (typeof globalThis extends {

package/dist/components/forms/auto-complete/RuiAutoCompleteOptionList.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAutoCompleteOptionList.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_withKeys","_withModifiers","_Fragment","_renderList","_createElementVNode","_renderSlot","_mergeProps","_toDisplayString","_createBlock","RuiAutoCompleteOption","_createSlots","_withCtx"],"sources":["../../../../src/components/forms/auto-complete/RuiAutoCompleteOptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TItem\">\nimport type { ComponentPublicInstance, Ref, StyleValue } from 'vue';\nimport type { DropdownOptionGroup } from '@/composables/dropdown-menu';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiAutoCompleteOption from '@/components/forms/auto-complete/RuiAutoCompleteOption.vue';\n\nexport interface AutoCompleteOptionListProps<TItem> {\n  containerProps: {\n    ref: Ref<HTMLElement | null>;\n    onScroll: () => void;\n    style: StyleValue;\n  };\n  wrapperProps: Record<string, unknown>;\n  /** Hands the list element back to the parent, which the dropdown composable measures. */\n  setMenuRef: (element: Element | ComponentPublicInstance | null) => void;\n  isGrouped: boolean;\n  groupedOptions: DropdownOptionGroup<TItem>[];\n  renderedData: { _index: number; item: TItem }[];\n  options: TItem[];\n  highlightedIndex: number;\n  highlightedClass: string;\n  dense: boolean;\n  menuClass: VueClassValue;\n  menuStyle: StyleValue;\n  getIdentifier: (item: TItem) => unknown;\n  getText: (item: TItem) => string | undefined;\n  isActiveItem: (item: TItem) => boolean;\n  isItemDisabled: (item: TItem) => boolean;\n  /** Prefix of each option's id, which the combobox input names in `aria-activedescendant`. */\n  optionIdPrefix: string;\n}\n\nconst {\n  containerProps,\n  dense,\n  getIdentifier,\n  getText,\n  groupedOptions,\n  highlightedClass,\n  highlightedIndex,\n  isActiveItem,\n  isGrouped,\n  isItemDisabled,\n  menuClass,\n  menuStyle,\n  optionIdPrefix,\n  options,\n  renderedData,\n  setMenuRef,\n  wrapperProps,\n} = defineProps<AutoCompleteOptionListProps<TItem>>();\n\nconst emit = defineEmits<{\n  'select': [item: TItem];\n  'move-highlight': [up: boolean];\n}>();\n\ndefineSlots<{\n  'group-header'?: (props: { group: string; items: TItem[] }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n}>();\n\n/**\n * The highlight follows the option's place in the flat option list, which is\n * the order the keyboard walks, so a grouped option looks its index up there\n * rather than in the bucket it is drawn in.\n */\nfunction isHighlighted(item: TItem): boolean {\n  return options.indexOf(item) === highlightedIndex;\n}\n</script>\n\n<template>\n  <div\n    :ref=\"containerProps.ref\"\n    :class=\"menuClass\"\n    :style=\"[containerProps.style, menuStyle]\"\n    @scroll=\"containerProps.onScroll()\"\n    @keydown.up.prevent=\"emit('move-highlight', true)\"\n    @keydown.down.prevent=\"emit('move-highlight', false)\"\n  >\n    <div\n      v-if=\"isGrouped\"\n      :ref=\"setMenuRef\"\n    >\n      <template\n        v-for=\"(bucket, bucketIndex) in groupedOptions\"\n        :key=\"bucket.group || `group-${bucketIndex}`\"\n      >\n        <div\n          class=\"sticky top-0 z-rui-raised bg-rui-menu\"\n          data-id=\"group-header\"\n        >\n          <slot\n            name=\"group-header\"\n            v-bind=\"{ group: bucket.group, items: bucket.items }\"\n          >\n            <div class=\"px-3 pt-2 pb-1 text-xs font-medium text-rui-text-secondary\">\n              {{ bucket.group }}\n            </div>\n          </slot>\n        </div>\n        <RuiAutoCompleteOption\n          v-for=\"item in bucket.items\"\n          :id=\"`${optionIdPrefix}-${options.indexOf(item)}`\"\n          :key=\"getIdentifier(item)?.toString()\"\n          :item=\"item\"\n          :text=\"getText(item)\"\n          :active=\"isActiveItem(item)\"\n          :disabled=\"isItemDisabled(item)\"\n          :dense=\"dense\"\n          :highlighted=\"isHighlighted(item)\"\n          :highlighted-class=\"highlightedClass\"\n          @select=\"emit('select', $event)\"\n        >\n          <template\n            v-if=\"$slots['item.prepend']\"\n            #prepend=\"slotProps\"\n          >\n            <slot\n              name=\"item.prepend\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"$slots.item\"\n            #default=\"slotProps\"\n          >\n            <slot\n              name=\"item\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"$slots['item.append']\"\n            #append=\"slotProps\"\n          >\n            <slot\n              name=\"item.append\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n        </RuiAutoCompleteOption>\n      </template>\n    </div>\n    <div\n      v-else\n      v-bind=\"wrapperProps\"\n      :ref=\"setMenuRef\"\n    >\n      <RuiAutoCompleteOption\n        v-for=\"{ item, _index } in renderedData\"\n        :id=\"`${optionIdPrefix}-${_index}`\"\n        :key=\"getIdentifier(item)?.toString()\"\n        :item=\"item\"\n        :text=\"getText(item)\"\n        :active=\"isActiveItem(item)\"\n        :disabled=\"isItemDisabled(item)\"\n        :dense=\"dense\"\n        :highlighted=\"highlightedIndex === _index\"\n        :highlighted-class=\"highlightedClass\"\n        @select=\"emit('select', $event)\"\n      >\n        <template\n          v-if=\"$slots['item.prepend']\"\n          #prepend=\"slotProps\"\n        >\n          <slot\n            name=\"item.prepend\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n        <template\n          v-if=\"$slots.item\"\n          #default=\"slotProps\"\n        >\n          <slot\n            name=\"item\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['item.append']\"\n          #append=\"slotProps\"\n        >\n          <slot\n            name=\"item.append\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n      </RuiAutoCompleteOption>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiAutoCompleteOptionList.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_withKeys","_withModifiers","_Fragment","_renderList","_createElementVNode","_renderSlot","_mergeProps","_toDisplayString","_createBlock","RuiAutoCompleteOption","_createSlots","_withCtx"],"sources":["../../../../src/components/forms/auto-complete/RuiAutoCompleteOptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TItem\">\nimport type { ComponentPublicInstance, HTMLAttributes, Ref, StyleValue } from 'vue';\nimport type { DropdownOptionGroup } from '@/composables/dropdown-menu';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiAutoCompleteOption from '@/components/forms/auto-complete/RuiAutoCompleteOption.vue';\n\nexport interface AutoCompleteOptionListProps<TItem> {\n  containerProps: {\n    ref: Ref<HTMLElement | null>;\n    onScroll: () => void;\n    style: StyleValue;\n  };\n  wrapperProps: Record<string, unknown>;\n  /** Hands the list element back to the parent, which the dropdown composable measures. */\n  setMenuRef: (element: Element | ComponentPublicInstance | null) => void;\n  isGrouped: boolean;\n  groupedOptions: DropdownOptionGroup<TItem>[];\n  renderedData: { _index: number; item: TItem }[];\n  options: TItem[];\n  highlightedIndex: number;\n  highlightedClass: string;\n  dense: boolean;\n  menuClass: VueClassValue;\n  menuStyle: StyleValue;\n  getIdentifier: (item: TItem) => unknown;\n  getText: (item: TItem) => string | undefined;\n  isActiveItem: (item: TItem) => boolean;\n  isItemDisabled: (item: TItem) => boolean;\n  /** Prefix of each option's id, which the combobox input names in `aria-activedescendant`. */\n  optionIdPrefix: string;\n}\n\nconst {\n  containerProps,\n  dense,\n  getIdentifier,\n  getText,\n  groupedOptions,\n  highlightedClass,\n  highlightedIndex,\n  isActiveItem,\n  isGrouped,\n  isItemDisabled,\n  menuClass,\n  menuStyle,\n  optionIdPrefix,\n  options,\n  renderedData,\n  setMenuRef,\n  wrapperProps,\n} = defineProps<AutoCompleteOptionListProps<TItem> & /* @vue-ignore */ Omit<HTMLAttributes, keyof AutoCompleteOptionListProps<TItem> | 'onSelect'>>();\n\nconst emit = defineEmits<{\n  'select': [item: TItem];\n  'move-highlight': [up: boolean];\n}>();\n\ndefineSlots<{\n  'group-header'?: (props: { group: string; items: TItem[] }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n}>();\n\n/**\n * The highlight follows the option's place in the flat option list, which is\n * the order the keyboard walks, so a grouped option looks its index up there\n * rather than in the bucket it is drawn in.\n */\nfunction isHighlighted(item: TItem): boolean {\n  return options.indexOf(item) === highlightedIndex;\n}\n</script>\n\n<template>\n  <div\n    :ref=\"containerProps.ref\"\n    :class=\"menuClass\"\n    :style=\"[containerProps.style, menuStyle]\"\n    @scroll=\"containerProps.onScroll()\"\n    @keydown.up.prevent=\"emit('move-highlight', true)\"\n    @keydown.down.prevent=\"emit('move-highlight', false)\"\n  >\n    <div\n      v-if=\"isGrouped\"\n      :ref=\"setMenuRef\"\n    >\n      <template\n        v-for=\"(bucket, bucketIndex) in groupedOptions\"\n        :key=\"bucket.group || `group-${bucketIndex}`\"\n      >\n        <div\n          class=\"sticky top-0 z-rui-raised bg-rui-menu\"\n          data-id=\"group-header\"\n        >\n          <slot\n            name=\"group-header\"\n            v-bind=\"{ group: bucket.group, items: bucket.items }\"\n          >\n            <div class=\"px-3 pt-2 pb-1 text-xs font-medium text-rui-text-secondary\">\n              {{ bucket.group }}\n            </div>\n          </slot>\n        </div>\n        <RuiAutoCompleteOption\n          v-for=\"item in bucket.items\"\n          :id=\"`${optionIdPrefix}-${options.indexOf(item)}`\"\n          :key=\"getIdentifier(item)?.toString()\"\n          :item=\"item\"\n          :text=\"getText(item)\"\n          :active=\"isActiveItem(item)\"\n          :disabled=\"isItemDisabled(item)\"\n          :dense=\"dense\"\n          :highlighted=\"isHighlighted(item)\"\n          :highlighted-class=\"highlightedClass\"\n          @select=\"emit('select', $event)\"\n        >\n          <template\n            v-if=\"$slots['item.prepend']\"\n            #prepend=\"slotProps\"\n          >\n            <slot\n              name=\"item.prepend\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"$slots.item\"\n            #default=\"slotProps\"\n          >\n            <slot\n              name=\"item\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"$slots['item.append']\"\n            #append=\"slotProps\"\n          >\n            <slot\n              name=\"item.append\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n        </RuiAutoCompleteOption>\n      </template>\n    </div>\n    <div\n      v-else\n      v-bind=\"wrapperProps\"\n      :ref=\"setMenuRef\"\n    >\n      <RuiAutoCompleteOption\n        v-for=\"{ item, _index } in renderedData\"\n        :id=\"`${optionIdPrefix}-${_index}`\"\n        :key=\"getIdentifier(item)?.toString()\"\n        :item=\"item\"\n        :text=\"getText(item)\"\n        :active=\"isActiveItem(item)\"\n        :disabled=\"isItemDisabled(item)\"\n        :dense=\"dense\"\n        :highlighted=\"highlightedIndex === _index\"\n        :highlighted-class=\"highlightedClass\"\n        @select=\"emit('select', $event)\"\n      >\n        <template\n          v-if=\"$slots['item.prepend']\"\n          #prepend=\"slotProps\"\n        >\n          <slot\n            name=\"item.prepend\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n        <template\n          v-if=\"$slots.item\"\n          #default=\"slotProps\"\n        >\n          <slot\n            name=\"item\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['item.append']\"\n          #append=\"slotProps\"\n        >\n          <slot\n            name=\"item.append\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n      </RuiAutoCompleteOption>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/auto-complete/auto-complete-props.d.ts

@@ -4,7 +4,6 @@ import type { GroupBy, ItemDisabled, KeyOfType } from '../../../composables/drop
 import type { RuiIcons } from '../../../icons/index.js';
 import type { VueClassValue } from '../../../types/class-value.js';
 import type { FormDetails } from '../../../utils/form-text-detail.js';
-export type AutoCompleteModelValue<TValue> = TValue extends Array<infer U> ? U[] : TValue | undefined;
 export interface RuiAutoCompleteClassNames {
     root?: VueClassValue;
     label?: VueClassValue;

package/dist/components/forms/category-picker/RuiCategoryPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCategoryPicker.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/category-picker/RuiCategoryPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { KeyOfType } from '@/composables/dropdown-menu';\nimport type { VueClassValue } from '@/types/class-value';\nimport { breakpointsTailwind, useBreakpoints } from '@vueuse/core';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { categoryPickerActivatorStyles, categoryPickerStyles } from '@/components/forms/category-picker/category-picker-styles';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiDialog, { type DialogProps } from '@/components/overlays/dialog/RuiDialog.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { Placement } from '@/composables/floating';\nimport { useCategoryPicker } from '@/composables/forms/category-picker/use-category-picker';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiCategoryPickerClassNames {\n  root?: VueClassValue;\n  rail?: VueClassValue;\n  detail?: VueClassValue;\n  search?: VueClassValue;\n}\n\nexport type CategoryPickerBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport interface RuiCategoryPickerProps<TValue, TItem> {\n  /** The full catalogue of selectable items. */\n  items: TItem[];\n  /** Resolve an item's category label. Takes precedence over `categoryAttr`. */\n  categoryOf?: (item: TItem) => string;\n  /** Resolve an item's category from one of its own properties. */\n  categoryAttr?: keyof TItem;\n  /** Property whose value becomes the model value. Omit to use the item itself. */\n  keyAttr?: KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>;\n  /** Property that produces an item's display text. */\n  textAttr?: keyof TItem;\n  /** Field label, and the title of the mobile sheet. */\n  label?: string;\n  /** Placeholder shown in the field while it is empty or being searched. */\n  placeholder?: string;\n  /** Allow filtering: type in the field (desktop) or the sheet's search box (mobile). */\n  searchable?: boolean;\n  /**\n   * Custom predicate. Receives the resolved category label as the third\n   * argument, matching the `RuiAutoComplete` filter signature.\n   */\n  filter?: (item: TItem, query: string, category: string) => boolean;\n  /** Show the synthetic \"All\" pseudo-category as the first rail entry. */\n  showAll?: boolean;\n  /** Label for the \"All\" pseudo-category. */\n  allLabel?: string;\n  /** Text shown when no item matches the current search. */\n  emptyText?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  dense?: boolean;\n  clearable?: boolean;\n  loading?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  /** Marks the trigger field as required (renders the asterisk). */\n  required?: boolean;\n  /** Validation errors rendered under the trigger field. */\n  errorMessages?: string | string[];\n  /** Success messages rendered under the trigger field. */\n  successMessages?: string | string[];\n  /** Hint rendered under the trigger field. */\n  hint?: string;\n  /** The line under the trigger field for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  /** Below this breakpoint the picker collapses to a single-pane drill-in. */\n  mobileBreakpoint?: CategoryPickerBreakpoint;\n  /** Forwarded to the mobile bottom-sheet (`RuiDialog`). */\n  dialogOptions?: DialogProps;\n  classNames?: RuiCategoryPickerClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCategoryPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue>();\nconst searchInput = defineModel<string>('search', { default: '' });\n\nconst {\n  items,\n  categoryOf = undefined,\n  categoryAttr = undefined,\n  keyAttr = undefined,\n  textAttr = undefined,\n  label = 'Select',\n  placeholder = 'Search',\n  searchable = true,\n  filter = undefined,\n  showAll = true,\n  allLabel = 'All',\n  emptyText = 'No results',\n  disabled = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  loading = false,\n  labelPlacement = undefined,\n  required = false,\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n  details = undefined,\n  hideDetails = false,\n  mobileBreakpoint = 'md',\n  dialogOptions = undefined,\n  classNames = undefined,\n} = defineProps<RuiCategoryPickerProps<TValue, TItem>>();\n\nconst emit = defineEmits<{\n  select: [item: TItem];\n}>();\n\ndefineSlots<{\n  'activator'?: (props: { attrs: { onClick?: () => void; onMouseover?: () => void; onMouseleave?: () => void }; isOpen: boolean; open: () => void; item: TItem | undefined; text: string | undefined }) => any;\n  'selection'?: (props: { item: TItem }) => any;\n  'selection.prepend'?: (props: { item: TItem }) => any;\n  'category'?: (props: { category: string | null; label: string; active: boolean; count: number }) => any;\n  'item'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'item.prepend'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'item.append'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'empty'?: () => any;\n  'header'?: () => any;\n  'footer'?: (props: { close: () => void }) => any;\n}>();\n\nconst isOpen = ref<boolean>(false);\nconst focusedPane = ref<'rail' | 'detail'>('rail');\nconst highlightedItemIndex = ref<number>(0);\nconst drillStep = ref<'category' | 'detail'>('category');\n\nconst railRef = useTemplateRef<HTMLDivElement>('railRef');\nconst detailRef = useTemplateRef<HTMLDivElement>('detailRef');\nconst activatorRef = useTemplateRef<HTMLInputElement>('activatorRef');\nconst fieldRef = useTemplateRef<HTMLElement>('fieldRef');\nconst isHovered = ref<boolean>(false);\n\nconst { focused } = useFocus(activatorRef);\nconst { hasError, hasSuccess } = useFormTextDetail(() => errorMessages, () => successMessages);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst baseId = useId();\nconst breakpoints = useBreakpoints(breakpointsTailwind);\n\nfunction resolveCategory(item: TItem): string {\n  if (categoryOf)\n    return categoryOf(item);\n  if (categoryAttr !== undefined)\n    return String(item[categoryAttr] ?? '');\n  return '';\n}\n\nconst {\n  activeCategory,\n  detailItems,\n  detailRows,\n  getIdentifier,\n  getText,\n  isEmpty,\n  isSelected,\n  railEntries,\n  setActiveCategory,\n  syncActiveToSelection,\n} = useCategoryPicker<TValue, TItem>({\n  allLabel: () => allLabel,\n  categoryOf: resolveCategory,\n  filter: () => filter,\n  items: () => items,\n  keyAttr,\n  modelValue,\n  search: searchInput,\n  searchable: () => searchable,\n  showAll: () => showAll,\n  textAttr,\n});\n\nconst isMobile = computed<boolean>(() => get(breakpoints.smaller(mobileBreakpoint)));\n\nconst mode = computed<'twoPane' | 'drill'>(() => (get(isMobile) ? 'drill' : 'twoPane'));\n\n/**\n * Desktop anchors an outside-click popover under the field (RuiMenu); narrow\n * width shows a full-width bottom sheet (RuiDialog).\n */\nconst shell = computed<typeof RuiMenu | typeof RuiDialog>(() => (get(isMobile) ? RuiDialog : RuiMenu));\n\n/**\n * The bottom sheet's props. Each shell is given only its own props, so the\n * other component's never leak through as attributes.\n */\nfunction dialogShellProps(): Record<string, unknown> {\n  return {\n    ariaLabel: dialogOptions?.ariaLabel ?? label,\n    bottomSheet: dialogOptions?.bottomSheet ?? true,\n    maxWidth: dialogOptions?.maxWidth,\n    persistent: dialogOptions?.persistent,\n    width: dialogOptions?.width ?? '100%',\n  };\n}\n\n/**\n * The popover's props. It anchors to the field box rather than the wrapper, so\n * it sits directly under the input instead of below the reserved details row,\n * and drops the menu's default vertical padding so the popover box equals the\n * panel: the size middleware caps the panel to the available height, and any\n * extra chrome padding would push the popover past the viewport edge. The\n * popover is a dialog, as the activator's `aria-haspopup` says: it holds a\n * tablist and a listbox, which a `menu` may not contain.\n */\nfunction menuShellProps(): Record<string, unknown> {\n  return {\n    anchorEl: get(fieldRef) ?? undefined,\n    classNames: { content: 'py-0' },\n    closeOnContentClick: false,\n    disableAutoFocus: true,\n    fullWidth: true,\n    menuLabel: label,\n    options: { placement: Placement.bottomStart, size: true },\n    persistent: dialogOptions?.persistent,\n    persistOnActivatorClick: true,\n    role: 'dialog',\n  };\n}\n\nconst shellProps = computed<Record<string, unknown>>(() =>\n  get(isMobile) ? dialogShellProps() : menuShellProps());\n\nconst ui = computed<ReturnType<typeof categoryPickerStyles>>(() => categoryPickerStyles({\n  dense,\n  mode: get(mode),\n}));\n\nconst selectedItem = computed<TItem | undefined>(() => {\n  const value = get(modelValue);\n  if (value === undefined)\n    return undefined;\n  return items.find(item => getIdentifier(item) === value);\n});\n\nconst selectedText = computed<string | undefined>(() => {\n  const selected = get(selectedItem);\n  return selected ? getText(selected) : undefined;\n});\n\nconst placement = useLabelPlacement(() => labelPlacement);\n\n/**\n * Desktop lets the user type in the field itself (no separate search box);\n * narrow width keeps a read-only trigger that opens the sheet's own search.\n */\nconst canType = computed<boolean>(() => searchable && !get(isMobile) && !readOnly && !disabled);\n\nconst isTyping = computed<boolean>(() => get(isOpen) && get(canType));\n\n/**\n * Drives both the clear button itself and the room the selection overlay has\n * to leave for it, so the two can never disagree.\n */\nconst showClear = computed<boolean>(() =>\n  clearable && get(selectedItem) !== undefined && !disabled && !readOnly);\n\nconst activatorUi = computed<ReturnType<typeof categoryPickerActivatorStyles>>(() => categoryPickerActivatorStyles({\n  dense,\n  disabled,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n  hovered: get(isHovered),\n  opened: get(isOpen),\n  readonly: readOnly,\n  withClear: get(showClear),\n}));\n\nconst activeRailIndex = computed<number>(() =>\n  get(railEntries).findIndex(entry => entry.category === get(activeCategory)));\n\nconst showRail = computed<boolean>(() => get(mode) === 'twoPane' || get(drillStep) === 'category');\nconst showDetail = computed<boolean>(() => get(mode) === 'twoPane' || get(drillStep) === 'detail');\n\nfunction clamp(value: number, max: number): number {\n  if (value < 0)\n    return 0;\n  if (value > max)\n    return max;\n  return value;\n}\n\nfunction open(): void {\n  if (disabled)\n    return;\n  set(isOpen, true);\n}\n\nfunction close(): void {\n  set(isOpen, false);\n}\n\nfunction onInput(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n  set(searchInput, target.value);\n  if (!get(isOpen))\n    open();\n}\n\nfunction selectItem(item: TItem): void {\n  if (readOnly)\n    return;\n  set(modelValue, getIdentifier(item));\n  emit('select', item);\n  close();\n}\n\nfunction clearSelection(): void {\n  set(modelValue, undefined);\n}\n\nfunction onCategoryClick(category: string | null): void {\n  setActiveCategory(category);\n  if (get(mode) === 'drill')\n    set(drillStep, 'detail');\n  else\n    focusPane('detail');\n}\n\n/**\n * Moves focus to one of the panes. The focus call prevents scrolling because\n * the panes sit inside a teleported popover, and without it the browser\n * scrolls the page behind to reveal the pane.\n */\nfunction focusPane(pane: 'rail' | 'detail'): void {\n  set(focusedPane, pane);\n  nextTick(() => {\n    (pane === 'rail' ? get(railRef) : get(detailRef))?.focus({ preventScroll: true });\n  });\n}\n\nfunction moveRail(direction: 1 | -1): void {\n  const entries = get(railEntries);\n  if (entries.length === 0)\n    return;\n  const next = clamp(get(activeRailIndex) + direction, entries.length - 1);\n  setActiveCategory(entries[next]?.category ?? null);\n}\n\nfunction moveItem(direction: 1 | -1): void {\n  const total = get(detailItems).length;\n  if (total === 0)\n    return;\n  set(highlightedItemIndex, clamp(get(highlightedItemIndex) + direction, total - 1));\n}\n\nfunction enterDetail(): void {\n  if (get(detailItems).length === 0)\n    return;\n  resetHighlightToSelection();\n  if (get(mode) === 'drill')\n    set(drillStep, 'detail');\n  focusPane('detail');\n}\n\nfunction selectHighlighted(): void {\n  const item = get(detailItems)[get(highlightedItemIndex)];\n  if (item !== undefined)\n    selectItem(item);\n}\n\n/**\n * Enter from the field commits the best match for the current query, so a\n * type-to-pick flow (type a few letters, press Enter) works without leaving\n * the input. Does nothing when the field is empty.\n */\nfunction selectTopResult(): void {\n  if (!get(searchInput).trim())\n    return;\n  const item = get(detailItems)[0];\n  if (item !== undefined)\n    selectItem(item);\n}\n\n/**\n * Keys in the search field: ArrowDown moves into the rail, Enter picks the top\n * match, Escape closes.\n *\n * An IME that is composing owns all three: the arrows walk its candidate list,\n * Enter confirms a candidate and Escape cancels it. While composing the field\n * leaves them alone, default action included, so neither a pick nor a close\n * lands mid-word.\n */\nfunction onSearchKeydown(event: KeyboardEvent): void {\n  if (event.isComposing)\n    return;\n\n  if (event.key === 'ArrowDown') {\n    event.preventDefault();\n    focusPane('rail');\n  }\n  else if (event.key === 'Enter') {\n    event.preventDefault();\n    selectTopResult();\n  }\n  else if (event.key === 'Escape') {\n    close();\n  }\n}\n\nfunction resetHighlightToSelection(): void {\n  const index = get(detailItems).findIndex(item => isSelected(item));\n  set(highlightedItemIndex, index >= 0 ? index : 0);\n}\n\nfunction backToRail(): void {\n  if (get(mode) === 'drill')\n    set(drillStep, 'category');\n  else\n    focusPane('rail');\n}\n\nfunction scrollActiveDescendantIntoView(container: HTMLElement | null, id: string): void {\n  if (!container)\n    return;\n  nextTick(() => {\n    container.querySelector(`#${id}`)?.scrollIntoView({ block: 'nearest' });\n  });\n}\n\n// Reset the item highlight whenever the active category changes.\nwatch(activeCategory, () => {\n  resetHighlightToSelection();\n});\n\nwatch(highlightedItemIndex, (index) => {\n  scrollActiveDescendantIntoView(get(detailRef), `${baseId}-opt-${index}`);\n});\n\nwatch(activeRailIndex, (index) => {\n  if (index >= 0)\n    scrollActiveDescendantIntoView(get(railRef), `${baseId}-cat-${index}`);\n});\n\n/**\n * Opening takes focus where the user types next: desktop is a combobox, so\n * focus stays in the field and ArrowDown moves into the panes, while the\n * mobile sheet has no typing field and focuses the rail instead. Closing\n * resets the query, so the field shows the selection again next time, and\n * returns focus to the trigger, which the APG dialog contract asks for.\n */\nfunction onOpenChanged(value: boolean): void {\n  if (value) {\n    syncActiveToSelection();\n    set(focusedPane, 'rail');\n    set(drillStep, 'category');\n    resetHighlightToSelection();\n    nextTick(() => (get(canType) ? get(activatorRef) : get(railRef))?.focus({ preventScroll: true }));\n  }\n  else {\n    set(searchInput, '');\n    nextTick(() => get(activatorRef)?.focus({ preventScroll: true }));\n  }\n}\n\nwatch(isOpen, onOpenChanged);\n</script>\n\n<template>\n  <component\n    :is=\"shell\"\n    v-model=\"isOpen\"\n    v-bind=\"{ ...$attrs, ...shellProps }\"\n  >\n    <template #activator=\"{ attrs }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs, isOpen, item: selectedItem, open, text: selectedText }\"\n      >\n        <div :class=\"activatorUi.wrapper()\">\n          <RuiFieldLabel\n            v-if=\"label\"\n            :id=\"`${baseId}-label`\"\n            :text=\"label\"\n            :hidden=\"placement === 'hidden'\"\n            :required=\"required\"\n            :disabled=\"disabled\"\n          />\n          <div\n            ref=\"fieldRef\"\n            role=\"combobox\"\n            data-id=\"activator\"\n            :class=\"activatorUi.activator()\"\n            :aria-labelledby=\"label ? `${baseId}-label` : undefined\"\n            aria-haspopup=\"dialog\"\n            :aria-controls=\"isOpen ? `${baseId}-panel` : undefined\"\n            :aria-expanded=\"isOpen\"\n            :aria-disabled=\"disabled || undefined\"\n            :aria-readonly=\"(readOnly || !canType) || undefined\"\n            :aria-required=\"required || undefined\"\n            :aria-invalid=\"hasError || undefined\"\n            :aria-busy=\"loading || undefined\"\n            v-bind=\"readOnly ? {} : activatorHandlers(attrs)\"\n            @mouseenter=\"isHovered = true\"\n            @mouseleave=\"isHovered = false\"\n          >\n            <span\n              v-if=\"selectedItem && !isTyping && $slots.selection\"\n              data-id=\"selection\"\n              :class=\"activatorUi.selection()\"\n            >\n              <slot\n                name=\"selection.prepend\"\n                v-bind=\"{ item: selectedItem }\"\n              />\n              <slot\n                name=\"selection\"\n                v-bind=\"{ item: selectedItem }\"\n              />\n            </span>\n            <input\n              ref=\"activatorRef\"\n              data-id=\"search-input\"\n              :value=\"isTyping ? searchInput : (($slots.selection && selectedItem) ? '' : (selectedText ?? ''))\"\n              :placeholder=\"isTyping ? placeholder : ''\"\n              :readonly=\"!canType\"\n              :disabled=\"disabled\"\n              :aria-invalid=\"hasError || undefined\"\n              :aria-labelledby=\"label ? `${baseId}-label` : undefined\"\n              class=\"bg-transparent outline-hidden\"\n              :class=\"[activatorUi.value(), !canType && 'cursor-pointer']\"\n              @input=\"onInput($event)\"\n              @keydown=\"onSearchKeydown($event)\"\n            />\n            <span\n              v-if=\"showClear\"\n              data-id=\"clear\"\n              :class=\"[activatorUi.clear(), focused && 'visible!', { 'mr-2': !dense }]\"\n              @click.stop.prevent=\"clearSelection()\"\n            >\n              <RuiIcon\n                name=\"lu-x\"\n                size=\"16\"\n              />\n            </span>\n            <span\n              data-id=\"chevron\"\n              :class=\"activatorUi.iconWrapper()\"\n            >\n              <RuiIcon\n                :class=\"activatorUi.icon()\"\n                :size=\"dense ? 16 : 20\"\n                name=\"lu-chevron-down\"\n              />\n            </span>\n            <RuiProgress\n              v-if=\"loading\"\n              :class=\"activatorUi.progress()\"\n              color=\"primary\"\n              thickness=\"3\"\n              variant=\"indeterminate\"\n            />\n            <fieldset :class=\"activatorUi.fieldset()\" />\n          </div>\n          <RuiFormTextDetail\n            v-if=\"detailsMode !== 'hidden'\"\n            :details=\"detailsMode\"\n            :error-messages=\"errorMessages\"\n            :success-messages=\"successMessages\"\n            :hint=\"hint\"\n          />\n        </div>\n      </slot>\n    </template>\n\n    <div\n      :id=\"`${baseId}-panel`\"\n      :class=\"ui.root({ class: cn(classNames?.root) })\"\n      data-id=\"panel\"\n    >\n      <!-- On desktop the field itself is the search input, so the panel only\n           needs its own search box in the mobile sheet. -->\n      <div\n        v-if=\"isMobile || $slots.header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\">\n          <div :class=\"ui.title()\">\n            {{ label }}\n          </div>\n        </slot>\n        <RuiTextField\n          v-if=\"searchable && isMobile\"\n          v-model=\"searchInput\"\n          :class=\"cn(classNames?.search)\"\n          :placeholder=\"placeholder\"\n          :dense=\"dense\"\n          prepend-icon=\"lu-search\"\n          details=\"hidden\"\n          clearable\n          data-id=\"search\"\n        />\n      </div>\n\n      <div :class=\"ui.body()\">\n        <!-- Category rail (master) -->\n        <div\n          v-show=\"showRail\"\n          ref=\"railRef\"\n          :class=\"ui.rail({ class: cn(classNames?.rail) })\"\n          role=\"tablist\"\n          aria-orientation=\"vertical\"\n          :aria-label=\"label\"\n          :aria-activedescendant=\"focusedPane === 'rail' && activeRailIndex >= 0 ? `${baseId}-cat-${activeRailIndex}` : undefined\"\n          tabindex=\"0\"\n          data-id=\"rail\"\n          @focus=\"focusedPane = 'rail'\"\n          @keydown.down.prevent=\"moveRail(1)\"\n          @keydown.up.prevent=\"moveRail(-1)\"\n          @keydown.right.prevent=\"enterDetail()\"\n          @keydown.enter.prevent=\"enterDetail()\"\n          @keydown.home.prevent=\"setActiveCategory(railEntries[0]?.category ?? null)\"\n          @keydown.end.prevent=\"setActiveCategory(railEntries[railEntries.length - 1]?.category ?? null)\"\n        >\n          <RuiButton\n            v-for=\"(entry, index) in railEntries\"\n            :id=\"`${baseId}-cat-${index}`\"\n            :key=\"entry.category ?? '__all__'\"\n            role=\"tab\"\n            variant=\"list\"\n            :size=\"dense ? 'sm' : undefined\"\n            :active=\"entry.category === activeCategory\"\n            :aria-selected=\"entry.category === activeCategory\"\n            tabindex=\"-1\"\n            :data-highlighted=\"focusedPane === 'rail' && index === activeRailIndex\"\n            :data-category=\"entry.category ?? '__all__'\"\n            @click=\"onCategoryClick(entry.category)\"\n          >\n            <slot\n              name=\"category\"\n              v-bind=\"{ active: entry.category === activeCategory, category: entry.category, count: entry.count, label: entry.label }\"\n            >\n              <span class=\"truncate\">{{ entry.label }}</span>\n              <span :class=\"ui.railCount()\">{{ entry.count }}</span>\n            </slot>\n          </RuiButton>\n        </div>\n\n        <!-- Detail pane -->\n        <div\n          v-show=\"showDetail\"\n          ref=\"detailRef\"\n          :class=\"ui.detail({ class: cn(classNames?.detail) })\"\n          role=\"listbox\"\n          :aria-label=\"activeCategory ?? allLabel\"\n          :aria-activedescendant=\"focusedPane === 'detail' && !isEmpty ? `${baseId}-opt-${highlightedItemIndex}` : undefined\"\n          tabindex=\"0\"\n          data-id=\"detail\"\n          @focus=\"focusedPane = 'detail'\"\n          @keydown.down.prevent=\"moveItem(1)\"\n          @keydown.up.prevent=\"moveItem(-1)\"\n          @keydown.left.prevent=\"backToRail()\"\n          @keydown.home.prevent=\"highlightedItemIndex = 0\"\n          @keydown.end.prevent=\"highlightedItemIndex = detailItems.length - 1\"\n          @keydown.enter.prevent=\"selectHighlighted()\"\n          @keydown.space.prevent=\"selectHighlighted()\"\n        >\n          <template v-if=\"mode === 'drill' && showDetail\">\n            <button\n              type=\"button\"\n              :class=\"ui.backButton()\"\n              data-id=\"back\"\n              @click=\"backToRail()\"\n            >\n              <RuiIcon\n                name=\"lu-chevron-left\"\n                size=\"18\"\n              />\n              <span>{{ activeCategory ?? allLabel }}</span>\n            </button>\n          </template>\n\n          <slot\n            v-if=\"isEmpty\"\n            name=\"empty\"\n          >\n            <div :class=\"ui.empty()\">\n              {{ emptyText }}\n            </div>\n          </slot>\n\n          <template\n            v-for=\"row in detailRows\"\n            v-else\n            :key=\"row.type === 'header' ? `h-${row.category}` : `i-${row.index}`\"\n          >\n            <div\n              v-if=\"row.type === 'header'\"\n              :class=\"ui.subheader()\"\n              role=\"presentation\"\n            >\n              {{ row.category }}\n            </div>\n            <RuiButton\n              v-else\n              :id=\"`${baseId}-opt-${row.index}`\"\n              role=\"option\"\n              variant=\"list\"\n              :size=\"dense ? 'sm' : undefined\"\n              :active=\"isSelected(row.item)\"\n              :aria-selected=\"isSelected(row.item)\"\n              tabindex=\"-1\"\n              :data-highlighted=\"focusedPane === 'detail' && row.index === highlightedItemIndex\"\n              :class=\"{ [ui.highlighted()]: focusedPane === 'detail' && row.index === highlightedItemIndex && !isSelected(row.item) }\"\n              @click=\"selectItem(row.item)\"\n            >\n              <template\n                v-if=\"$slots['item.prepend']\"\n                #prepend\n              >\n                <slot\n                  name=\"item.prepend\"\n                  v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n                />\n              </template>\n              <slot\n                name=\"item\"\n                v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n              >\n                {{ getText(row.item) }}\n              </slot>\n              <template\n                v-if=\"$slots['item.append']\"\n                #append\n              >\n                <slot\n                  name=\"item.append\"\n                  v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n                />\n              </template>\n            </RuiButton>\n          </template>\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.footer\"\n        :class=\"ui.footer()\"\n      >\n        <slot\n          name=\"footer\"\n          v-bind=\"{ close }\"\n        />\n      </div>\n    </div>\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCategoryPicker.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/category-picker/RuiCategoryPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { HTMLAttributes } from 'vue';\nimport type { KeyOfType } from '@/composables/dropdown-menu';\nimport type { VueClassValue } from '@/types/class-value';\nimport { breakpointsTailwind, useBreakpoints } from '@vueuse/core';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { categoryPickerActivatorStyles, categoryPickerStyles } from '@/components/forms/category-picker/category-picker-styles';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiDialog, { type DialogProps } from '@/components/overlays/dialog/RuiDialog.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { Placement } from '@/composables/floating';\nimport { useCategoryPicker } from '@/composables/forms/category-picker/use-category-picker';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiCategoryPickerClassNames {\n  root?: VueClassValue;\n  rail?: VueClassValue;\n  detail?: VueClassValue;\n  search?: VueClassValue;\n}\n\nexport type CategoryPickerBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport interface RuiCategoryPickerProps<TValue, TItem> {\n  /** The full catalogue of selectable items. */\n  items: TItem[];\n  /** Resolve an item's category label. Takes precedence over `categoryAttr`. */\n  categoryOf?: (item: TItem) => string;\n  /** Resolve an item's category from one of its own properties. */\n  categoryAttr?: keyof TItem;\n  /** Property whose value becomes the model value. Omit to use the item itself. */\n  keyAttr?: KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>;\n  /** Property that produces an item's display text. */\n  textAttr?: keyof TItem;\n  /** Field label, and the title of the mobile sheet. */\n  label?: string;\n  /** Placeholder shown in the field while it is empty or being searched. */\n  placeholder?: string;\n  /** Allow filtering: type in the field (desktop) or the sheet's search box (mobile). */\n  searchable?: boolean;\n  /**\n   * Custom predicate. Receives the resolved category label as the third\n   * argument, matching the `RuiAutoComplete` filter signature.\n   */\n  filter?: (item: TItem, query: string, category: string) => boolean;\n  /** Show the synthetic \"All\" pseudo-category as the first rail entry. */\n  showAll?: boolean;\n  /** Label for the \"All\" pseudo-category. */\n  allLabel?: string;\n  /** Text shown when no item matches the current search. */\n  emptyText?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  dense?: boolean;\n  clearable?: boolean;\n  loading?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  /** Marks the trigger field as required (renders the asterisk). */\n  required?: boolean;\n  /** Validation errors rendered under the trigger field. */\n  errorMessages?: string | string[];\n  /** Success messages rendered under the trigger field. */\n  successMessages?: string | string[];\n  /** Hint rendered under the trigger field. */\n  hint?: string;\n  /** The line under the trigger field for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  /** Below this breakpoint the picker collapses to a single-pane drill-in. */\n  mobileBreakpoint?: CategoryPickerBreakpoint;\n  /** Forwarded to the mobile bottom-sheet (`RuiDialog`). */\n  dialogOptions?: DialogProps;\n  classNames?: RuiCategoryPickerClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCategoryPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue>();\nconst searchInput = defineModel<string>('search', { default: '' });\n\nconst {\n  items,\n  categoryOf = undefined,\n  categoryAttr = undefined,\n  keyAttr = undefined,\n  textAttr = undefined,\n  label = 'Select',\n  placeholder = 'Search',\n  searchable = true,\n  filter = undefined,\n  showAll = true,\n  allLabel = 'All',\n  emptyText = 'No results',\n  disabled = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  loading = false,\n  labelPlacement = undefined,\n  required = false,\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n  details = undefined,\n  hideDetails = false,\n  mobileBreakpoint = 'md',\n  dialogOptions = undefined,\n  classNames = undefined,\n} = defineProps<RuiCategoryPickerProps<TValue, TItem> & /* @vue-ignore */ Omit<HTMLAttributes, keyof RuiCategoryPickerProps<TValue, TItem> | 'onSelect'>>();\n\nconst emit = defineEmits<{\n  select: [item: TItem];\n}>();\n\ndefineSlots<{\n  'activator'?: (props: { attrs: { onClick?: () => void; onMouseover?: () => void; onMouseleave?: () => void }; isOpen: boolean; open: () => void; item: TItem | undefined; text: string | undefined }) => any;\n  'selection'?: (props: { item: TItem }) => any;\n  'selection.prepend'?: (props: { item: TItem }) => any;\n  'category'?: (props: { category: string | null; label: string; active: boolean; count: number }) => any;\n  'item'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'item.prepend'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'item.append'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'empty'?: () => any;\n  'header'?: () => any;\n  'footer'?: (props: { close: () => void }) => any;\n}>();\n\nconst isOpen = ref<boolean>(false);\nconst focusedPane = ref<'rail' | 'detail'>('rail');\nconst highlightedItemIndex = ref<number>(0);\nconst drillStep = ref<'category' | 'detail'>('category');\n\nconst railRef = useTemplateRef<HTMLDivElement>('railRef');\nconst detailRef = useTemplateRef<HTMLDivElement>('detailRef');\nconst activatorRef = useTemplateRef<HTMLInputElement>('activatorRef');\nconst fieldRef = useTemplateRef<HTMLElement>('fieldRef');\nconst isHovered = ref<boolean>(false);\n\nconst { focused } = useFocus(activatorRef);\nconst { hasError, hasSuccess } = useFormTextDetail(() => errorMessages, () => successMessages);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst baseId = useId();\nconst breakpoints = useBreakpoints(breakpointsTailwind);\n\nfunction resolveCategory(item: TItem): string {\n  if (categoryOf)\n    return categoryOf(item);\n  if (categoryAttr !== undefined)\n    return String(item[categoryAttr] ?? '');\n  return '';\n}\n\nconst {\n  activeCategory,\n  detailItems,\n  detailRows,\n  getIdentifier,\n  getText,\n  isEmpty,\n  isSelected,\n  railEntries,\n  setActiveCategory,\n  syncActiveToSelection,\n} = useCategoryPicker<TValue, TItem>({\n  allLabel: () => allLabel,\n  categoryOf: resolveCategory,\n  filter: () => filter,\n  items: () => items,\n  keyAttr,\n  modelValue,\n  search: searchInput,\n  searchable: () => searchable,\n  showAll: () => showAll,\n  textAttr,\n});\n\nconst isMobile = computed<boolean>(() => get(breakpoints.smaller(mobileBreakpoint)));\n\nconst mode = computed<'twoPane' | 'drill'>(() => (get(isMobile) ? 'drill' : 'twoPane'));\n\n/**\n * Desktop anchors an outside-click popover under the field (RuiMenu); narrow\n * width shows a full-width bottom sheet (RuiDialog).\n */\nconst shell = computed<typeof RuiMenu | typeof RuiDialog>(() => (get(isMobile) ? RuiDialog : RuiMenu));\n\n/**\n * The bottom sheet's props. Each shell is given only its own props, so the\n * other component's never leak through as attributes.\n */\nfunction dialogShellProps(): Record<string, unknown> {\n  return {\n    ariaLabel: dialogOptions?.ariaLabel ?? label,\n    bottomSheet: dialogOptions?.bottomSheet ?? true,\n    maxWidth: dialogOptions?.maxWidth,\n    persistent: dialogOptions?.persistent,\n    width: dialogOptions?.width ?? '100%',\n  };\n}\n\n/**\n * The popover's props. It anchors to the field box rather than the wrapper, so\n * it sits directly under the input instead of below the reserved details row,\n * and drops the menu's default vertical padding so the popover box equals the\n * panel: the size middleware caps the panel to the available height, and any\n * extra chrome padding would push the popover past the viewport edge. The\n * popover is a dialog, as the activator's `aria-haspopup` says: it holds a\n * tablist and a listbox, which a `menu` may not contain.\n */\nfunction menuShellProps(): Record<string, unknown> {\n  return {\n    anchorEl: get(fieldRef) ?? undefined,\n    classNames: { content: 'py-0' },\n    closeOnContentClick: false,\n    disableAutoFocus: true,\n    fullWidth: true,\n    menuLabel: label,\n    options: { placement: Placement.bottomStart, size: true },\n    persistent: dialogOptions?.persistent,\n    persistOnActivatorClick: true,\n    role: 'dialog',\n  };\n}\n\nconst shellProps = computed<Record<string, unknown>>(() =>\n  get(isMobile) ? dialogShellProps() : menuShellProps());\n\nconst ui = computed<ReturnType<typeof categoryPickerStyles>>(() => categoryPickerStyles({\n  dense,\n  mode: get(mode),\n}));\n\nconst selectedItem = computed<TItem | undefined>(() => {\n  const value = get(modelValue);\n  if (value === undefined)\n    return undefined;\n  return items.find(item => getIdentifier(item) === value);\n});\n\nconst selectedText = computed<string | undefined>(() => {\n  const selected = get(selectedItem);\n  return selected ? getText(selected) : undefined;\n});\n\nconst placement = useLabelPlacement(() => labelPlacement);\n\n/**\n * Desktop lets the user type in the field itself (no separate search box);\n * narrow width keeps a read-only trigger that opens the sheet's own search.\n */\nconst canType = computed<boolean>(() => searchable && !get(isMobile) && !readOnly && !disabled);\n\nconst isTyping = computed<boolean>(() => get(isOpen) && get(canType));\n\n/**\n * Drives both the clear button itself and the room the selection overlay has\n * to leave for it, so the two can never disagree.\n */\nconst showClear = computed<boolean>(() =>\n  clearable && get(selectedItem) !== undefined && !disabled && !readOnly);\n\nconst activatorUi = computed<ReturnType<typeof categoryPickerActivatorStyles>>(() => categoryPickerActivatorStyles({\n  dense,\n  disabled,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n  hovered: get(isHovered),\n  opened: get(isOpen),\n  readonly: readOnly,\n  withClear: get(showClear),\n}));\n\nconst activeRailIndex = computed<number>(() =>\n  get(railEntries).findIndex(entry => entry.category === get(activeCategory)));\n\nconst showRail = computed<boolean>(() => get(mode) === 'twoPane' || get(drillStep) === 'category');\nconst showDetail = computed<boolean>(() => get(mode) === 'twoPane' || get(drillStep) === 'detail');\n\nfunction clamp(value: number, max: number): number {\n  if (value < 0)\n    return 0;\n  if (value > max)\n    return max;\n  return value;\n}\n\nfunction open(): void {\n  if (disabled)\n    return;\n  set(isOpen, true);\n}\n\nfunction close(): void {\n  set(isOpen, false);\n}\n\nfunction onInput(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n  set(searchInput, target.value);\n  if (!get(isOpen))\n    open();\n}\n\nfunction selectItem(item: TItem): void {\n  if (readOnly)\n    return;\n  set(modelValue, getIdentifier(item));\n  emit('select', item);\n  close();\n}\n\nfunction clearSelection(): void {\n  set(modelValue, undefined);\n}\n\nfunction onCategoryClick(category: string | null): void {\n  setActiveCategory(category);\n  if (get(mode) === 'drill')\n    set(drillStep, 'detail');\n  else\n    focusPane('detail');\n}\n\n/**\n * Moves focus to one of the panes. The focus call prevents scrolling because\n * the panes sit inside a teleported popover, and without it the browser\n * scrolls the page behind to reveal the pane.\n */\nfunction focusPane(pane: 'rail' | 'detail'): void {\n  set(focusedPane, pane);\n  nextTick(() => {\n    (pane === 'rail' ? get(railRef) : get(detailRef))?.focus({ preventScroll: true });\n  });\n}\n\nfunction moveRail(direction: 1 | -1): void {\n  const entries = get(railEntries);\n  if (entries.length === 0)\n    return;\n  const next = clamp(get(activeRailIndex) + direction, entries.length - 1);\n  setActiveCategory(entries[next]?.category ?? null);\n}\n\nfunction moveItem(direction: 1 | -1): void {\n  const total = get(detailItems).length;\n  if (total === 0)\n    return;\n  set(highlightedItemIndex, clamp(get(highlightedItemIndex) + direction, total - 1));\n}\n\nfunction enterDetail(): void {\n  if (get(detailItems).length === 0)\n    return;\n  resetHighlightToSelection();\n  if (get(mode) === 'drill')\n    set(drillStep, 'detail');\n  focusPane('detail');\n}\n\nfunction selectHighlighted(): void {\n  const item = get(detailItems)[get(highlightedItemIndex)];\n  if (item !== undefined)\n    selectItem(item);\n}\n\n/**\n * Enter from the field commits the best match for the current query, so a\n * type-to-pick flow (type a few letters, press Enter) works without leaving\n * the input. Does nothing when the field is empty.\n */\nfunction selectTopResult(): void {\n  if (!get(searchInput).trim())\n    return;\n  const item = get(detailItems)[0];\n  if (item !== undefined)\n    selectItem(item);\n}\n\n/**\n * Keys in the search field: ArrowDown moves into the rail, Enter picks the top\n * match, Escape closes.\n *\n * An IME that is composing owns all three: the arrows walk its candidate list,\n * Enter confirms a candidate and Escape cancels it. While composing the field\n * leaves them alone, default action included, so neither a pick nor a close\n * lands mid-word.\n */\nfunction onSearchKeydown(event: KeyboardEvent): void {\n  if (event.isComposing)\n    return;\n\n  if (event.key === 'ArrowDown') {\n    event.preventDefault();\n    focusPane('rail');\n  }\n  else if (event.key === 'Enter') {\n    event.preventDefault();\n    selectTopResult();\n  }\n  else if (event.key === 'Escape') {\n    close();\n  }\n}\n\nfunction resetHighlightToSelection(): void {\n  const index = get(detailItems).findIndex(item => isSelected(item));\n  set(highlightedItemIndex, index >= 0 ? index : 0);\n}\n\nfunction backToRail(): void {\n  if (get(mode) === 'drill')\n    set(drillStep, 'category');\n  else\n    focusPane('rail');\n}\n\nfunction scrollActiveDescendantIntoView(container: HTMLElement | null, id: string): void {\n  if (!container)\n    return;\n  nextTick(() => {\n    container.querySelector(`#${id}`)?.scrollIntoView({ block: 'nearest' });\n  });\n}\n\n// Reset the item highlight whenever the active category changes.\nwatch(activeCategory, () => {\n  resetHighlightToSelection();\n});\n\nwatch(highlightedItemIndex, (index) => {\n  scrollActiveDescendantIntoView(get(detailRef), `${baseId}-opt-${index}`);\n});\n\nwatch(activeRailIndex, (index) => {\n  if (index >= 0)\n    scrollActiveDescendantIntoView(get(railRef), `${baseId}-cat-${index}`);\n});\n\n/**\n * Opening takes focus where the user types next: desktop is a combobox, so\n * focus stays in the field and ArrowDown moves into the panes, while the\n * mobile sheet has no typing field and focuses the rail instead. Closing\n * resets the query, so the field shows the selection again next time, and\n * returns focus to the trigger, which the APG dialog contract asks for.\n */\nfunction onOpenChanged(value: boolean): void {\n  if (value) {\n    syncActiveToSelection();\n    set(focusedPane, 'rail');\n    set(drillStep, 'category');\n    resetHighlightToSelection();\n    nextTick(() => (get(canType) ? get(activatorRef) : get(railRef))?.focus({ preventScroll: true }));\n  }\n  else {\n    set(searchInput, '');\n    nextTick(() => get(activatorRef)?.focus({ preventScroll: true }));\n  }\n}\n\nwatch(isOpen, onOpenChanged);\n</script>\n\n<template>\n  <component\n    :is=\"shell\"\n    v-model=\"isOpen\"\n    v-bind=\"{ ...$attrs, ...shellProps }\"\n  >\n    <template #activator=\"{ attrs }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs, isOpen, item: selectedItem, open, text: selectedText }\"\n      >\n        <div :class=\"activatorUi.wrapper()\">\n          <RuiFieldLabel\n            v-if=\"label\"\n            :id=\"`${baseId}-label`\"\n            :text=\"label\"\n            :hidden=\"placement === 'hidden'\"\n            :required=\"required\"\n            :disabled=\"disabled\"\n          />\n          <div\n            ref=\"fieldRef\"\n            role=\"combobox\"\n            data-id=\"activator\"\n            :class=\"activatorUi.activator()\"\n            :aria-labelledby=\"label ? `${baseId}-label` : undefined\"\n            aria-haspopup=\"dialog\"\n            :aria-controls=\"isOpen ? `${baseId}-panel` : undefined\"\n            :aria-expanded=\"isOpen\"\n            :aria-disabled=\"disabled || undefined\"\n            :aria-readonly=\"(readOnly || !canType) || undefined\"\n            :aria-required=\"required || undefined\"\n            :aria-invalid=\"hasError || undefined\"\n            :aria-busy=\"loading || undefined\"\n            v-bind=\"readOnly ? {} : activatorHandlers(attrs)\"\n            @mouseenter=\"isHovered = true\"\n            @mouseleave=\"isHovered = false\"\n          >\n            <span\n              v-if=\"selectedItem && !isTyping && $slots.selection\"\n              data-id=\"selection\"\n              :class=\"activatorUi.selection()\"\n            >\n              <slot\n                name=\"selection.prepend\"\n                v-bind=\"{ item: selectedItem }\"\n              />\n              <slot\n                name=\"selection\"\n                v-bind=\"{ item: selectedItem }\"\n              />\n            </span>\n            <input\n              ref=\"activatorRef\"\n              data-id=\"search-input\"\n              :value=\"isTyping ? searchInput : (($slots.selection && selectedItem) ? '' : (selectedText ?? ''))\"\n              :placeholder=\"isTyping ? placeholder : ''\"\n              :readonly=\"!canType\"\n              :disabled=\"disabled\"\n              :aria-invalid=\"hasError || undefined\"\n              :aria-labelledby=\"label ? `${baseId}-label` : undefined\"\n              class=\"bg-transparent outline-hidden\"\n              :class=\"[activatorUi.value(), !canType && 'cursor-pointer']\"\n              @input=\"onInput($event)\"\n              @keydown=\"onSearchKeydown($event)\"\n            />\n            <span\n              v-if=\"showClear\"\n              data-id=\"clear\"\n              :class=\"[activatorUi.clear(), focused && 'visible!', { 'mr-2': !dense }]\"\n              @click.stop.prevent=\"clearSelection()\"\n            >\n              <RuiIcon\n                name=\"lu-x\"\n                size=\"16\"\n              />\n            </span>\n            <span\n              data-id=\"chevron\"\n              :class=\"activatorUi.iconWrapper()\"\n            >\n              <RuiIcon\n                :class=\"activatorUi.icon()\"\n                :size=\"dense ? 16 : 20\"\n                name=\"lu-chevron-down\"\n              />\n            </span>\n            <RuiProgress\n              v-if=\"loading\"\n              :class=\"activatorUi.progress()\"\n              color=\"primary\"\n              thickness=\"3\"\n              variant=\"indeterminate\"\n            />\n            <fieldset :class=\"activatorUi.fieldset()\" />\n          </div>\n          <RuiFormTextDetail\n            v-if=\"detailsMode !== 'hidden'\"\n            :details=\"detailsMode\"\n            :error-messages=\"errorMessages\"\n            :success-messages=\"successMessages\"\n            :hint=\"hint\"\n          />\n        </div>\n      </slot>\n    </template>\n\n    <div\n      :id=\"`${baseId}-panel`\"\n      :class=\"ui.root({ class: cn(classNames?.root) })\"\n      data-id=\"panel\"\n    >\n      <!-- On desktop the field itself is the search input, so the panel only\n           needs its own search box in the mobile sheet. -->\n      <div\n        v-if=\"isMobile || $slots.header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\">\n          <div :class=\"ui.title()\">\n            {{ label }}\n          </div>\n        </slot>\n        <RuiTextField\n          v-if=\"searchable && isMobile\"\n          v-model=\"searchInput\"\n          :class=\"cn(classNames?.search)\"\n          :placeholder=\"placeholder\"\n          :dense=\"dense\"\n          prepend-icon=\"lu-search\"\n          details=\"hidden\"\n          clearable\n          data-id=\"search\"\n        />\n      </div>\n\n      <div :class=\"ui.body()\">\n        <!-- Category rail (master) -->\n        <div\n          v-show=\"showRail\"\n          ref=\"railRef\"\n          :class=\"ui.rail({ class: cn(classNames?.rail) })\"\n          role=\"tablist\"\n          aria-orientation=\"vertical\"\n          :aria-label=\"label\"\n          :aria-activedescendant=\"focusedPane === 'rail' && activeRailIndex >= 0 ? `${baseId}-cat-${activeRailIndex}` : undefined\"\n          tabindex=\"0\"\n          data-id=\"rail\"\n          @focus=\"focusedPane = 'rail'\"\n          @keydown.down.prevent=\"moveRail(1)\"\n          @keydown.up.prevent=\"moveRail(-1)\"\n          @keydown.right.prevent=\"enterDetail()\"\n          @keydown.enter.prevent=\"enterDetail()\"\n          @keydown.home.prevent=\"setActiveCategory(railEntries[0]?.category ?? null)\"\n          @keydown.end.prevent=\"setActiveCategory(railEntries[railEntries.length - 1]?.category ?? null)\"\n        >\n          <RuiButton\n            v-for=\"(entry, index) in railEntries\"\n            :id=\"`${baseId}-cat-${index}`\"\n            :key=\"entry.category ?? '__all__'\"\n            role=\"tab\"\n            variant=\"list\"\n            :size=\"dense ? 'sm' : undefined\"\n            :active=\"entry.category === activeCategory\"\n            :aria-selected=\"entry.category === activeCategory\"\n            tabindex=\"-1\"\n            :data-highlighted=\"focusedPane === 'rail' && index === activeRailIndex\"\n            :data-category=\"entry.category ?? '__all__'\"\n            @click=\"onCategoryClick(entry.category)\"\n          >\n            <slot\n              name=\"category\"\n              v-bind=\"{ active: entry.category === activeCategory, category: entry.category, count: entry.count, label: entry.label }\"\n            >\n              <span class=\"truncate\">{{ entry.label }}</span>\n              <span :class=\"ui.railCount()\">{{ entry.count }}</span>\n            </slot>\n          </RuiButton>\n        </div>\n\n        <!-- Detail pane -->\n        <div\n          v-show=\"showDetail\"\n          ref=\"detailRef\"\n          :class=\"ui.detail({ class: cn(classNames?.detail) })\"\n          role=\"listbox\"\n          :aria-label=\"activeCategory ?? allLabel\"\n          :aria-activedescendant=\"focusedPane === 'detail' && !isEmpty ? `${baseId}-opt-${highlightedItemIndex}` : undefined\"\n          tabindex=\"0\"\n          data-id=\"detail\"\n          @focus=\"focusedPane = 'detail'\"\n          @keydown.down.prevent=\"moveItem(1)\"\n          @keydown.up.prevent=\"moveItem(-1)\"\n          @keydown.left.prevent=\"backToRail()\"\n          @keydown.home.prevent=\"highlightedItemIndex = 0\"\n          @keydown.end.prevent=\"highlightedItemIndex = detailItems.length - 1\"\n          @keydown.enter.prevent=\"selectHighlighted()\"\n          @keydown.space.prevent=\"selectHighlighted()\"\n        >\n          <template v-if=\"mode === 'drill' && showDetail\">\n            <button\n              type=\"button\"\n              :class=\"ui.backButton()\"\n              data-id=\"back\"\n              @click=\"backToRail()\"\n            >\n              <RuiIcon\n                name=\"lu-chevron-left\"\n                size=\"18\"\n              />\n              <span>{{ activeCategory ?? allLabel }}</span>\n            </button>\n          </template>\n\n          <slot\n            v-if=\"isEmpty\"\n            name=\"empty\"\n          >\n            <div :class=\"ui.empty()\">\n              {{ emptyText }}\n            </div>\n          </slot>\n\n          <template\n            v-for=\"row in detailRows\"\n            v-else\n            :key=\"row.type === 'header' ? `h-${row.category}` : `i-${row.index}`\"\n          >\n            <div\n              v-if=\"row.type === 'header'\"\n              :class=\"ui.subheader()\"\n              role=\"presentation\"\n            >\n              {{ row.category }}\n            </div>\n            <RuiButton\n              v-else\n              :id=\"`${baseId}-opt-${row.index}`\"\n              role=\"option\"\n              variant=\"list\"\n              :size=\"dense ? 'sm' : undefined\"\n              :active=\"isSelected(row.item)\"\n              :aria-selected=\"isSelected(row.item)\"\n              tabindex=\"-1\"\n              :data-highlighted=\"focusedPane === 'detail' && row.index === highlightedItemIndex\"\n              :class=\"{ [ui.highlighted()]: focusedPane === 'detail' && row.index === highlightedItemIndex && !isSelected(row.item) }\"\n              @click=\"selectItem(row.item)\"\n            >\n              <template\n                v-if=\"$slots['item.prepend']\"\n                #prepend\n              >\n                <slot\n                  name=\"item.prepend\"\n                  v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n                />\n              </template>\n              <slot\n                name=\"item\"\n                v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n              >\n                {{ getText(row.item) }}\n              </slot>\n              <template\n                v-if=\"$slots['item.append']\"\n                #append\n              >\n                <slot\n                  name=\"item.append\"\n                  v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n                />\n              </template>\n            </RuiButton>\n          </template>\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.footer\"\n        :class=\"ui.footer()\"\n      >\n        <slot\n          name=\"footer\"\n          v-bind=\"{ close }\"\n        />\n      </div>\n    </div>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/forms/category-picker/RuiCategoryPicker.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import type { KeyOfType } from '../../../composables/dropdown-menu.js';
 import type { VueClassValue } from '../../../types/class-value.js';
 import { type DialogProps } from '../../overlays/dialog/RuiDialog.vue.js';
@@ -64,7 +65,7 @@ export interface RuiCategoryPickerProps<TValue, TItem> {
     classNames?: RuiCategoryPickerClassNames;
 }
 declare const __VLS_export: <TValue, TItem>(__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<(RuiCategoryPickerProps<TValue, TItem> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(RuiCategoryPickerProps<TValue, TItem> & Omit<HTMLAttributes, "onSelect" | keyof RuiCategoryPickerProps<TValue, TItem>> & {
         modelValue?: TValue;
         search?: string;
     }) & {

package/dist/components/forms/category-picker/RuiCategoryPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCategoryPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","RuiDialog","RuiMenu","_openBlock","_createBlock","_resolveDynamicComponent","_unref","_mergeProps","_isRef","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","RuiFieldLabel","_createCommentVNode","_createElementBlock","_withModifiers","_createVNode","RuiIcon","RuiProgress","RuiFormTextDetail","_toDisplayString","RuiTextField","_withDirectives","_withKeys","_Fragment","_renderList","RuiButton","_vShow","_createSlots","_createTextVNode"],"sources":["../../../../src/components/forms/category-picker/RuiCategoryPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { KeyOfType } from '@/composables/dropdown-menu';\nimport type { VueClassValue } from '@/types/class-value';\nimport { breakpointsTailwind, useBreakpoints } from '@vueuse/core';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { categoryPickerActivatorStyles, categoryPickerStyles } from '@/components/forms/category-picker/category-picker-styles';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiDialog, { type DialogProps } from '@/components/overlays/dialog/RuiDialog.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { Placement } from '@/composables/floating';\nimport { useCategoryPicker } from '@/composables/forms/category-picker/use-category-picker';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiCategoryPickerClassNames {\n  root?: VueClassValue;\n  rail?: VueClassValue;\n  detail?: VueClassValue;\n  search?: VueClassValue;\n}\n\nexport type CategoryPickerBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport interface RuiCategoryPickerProps<TValue, TItem> {\n  /** The full catalogue of selectable items. */\n  items: TItem[];\n  /** Resolve an item's category label. Takes precedence over `categoryAttr`. */\n  categoryOf?: (item: TItem) => string;\n  /** Resolve an item's category from one of its own properties. */\n  categoryAttr?: keyof TItem;\n  /** Property whose value becomes the model value. Omit to use the item itself. */\n  keyAttr?: KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>;\n  /** Property that produces an item's display text. */\n  textAttr?: keyof TItem;\n  /** Field label, and the title of the mobile sheet. */\n  label?: string;\n  /** Placeholder shown in the field while it is empty or being searched. */\n  placeholder?: string;\n  /** Allow filtering: type in the field (desktop) or the sheet's search box (mobile). */\n  searchable?: boolean;\n  /**\n   * Custom predicate. Receives the resolved category label as the third\n   * argument, matching the `RuiAutoComplete` filter signature.\n   */\n  filter?: (item: TItem, query: string, category: string) => boolean;\n  /** Show the synthetic \"All\" pseudo-category as the first rail entry. */\n  showAll?: boolean;\n  /** Label for the \"All\" pseudo-category. */\n  allLabel?: string;\n  /** Text shown when no item matches the current search. */\n  emptyText?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  dense?: boolean;\n  clearable?: boolean;\n  loading?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  /** Marks the trigger field as required (renders the asterisk). */\n  required?: boolean;\n  /** Validation errors rendered under the trigger field. */\n  errorMessages?: string | string[];\n  /** Success messages rendered under the trigger field. */\n  successMessages?: string | string[];\n  /** Hint rendered under the trigger field. */\n  hint?: string;\n  /** The line under the trigger field for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  /** Below this breakpoint the picker collapses to a single-pane drill-in. */\n  mobileBreakpoint?: CategoryPickerBreakpoint;\n  /** Forwarded to the mobile bottom-sheet (`RuiDialog`). */\n  dialogOptions?: DialogProps;\n  classNames?: RuiCategoryPickerClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCategoryPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue>();\nconst searchInput = defineModel<string>('search', { default: '' });\n\nconst {\n  items,\n  categoryOf = undefined,\n  categoryAttr = undefined,\n  keyAttr = undefined,\n  textAttr = undefined,\n  label = 'Select',\n  placeholder = 'Search',\n  searchable = true,\n  filter = undefined,\n  showAll = true,\n  allLabel = 'All',\n  emptyText = 'No results',\n  disabled = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  loading = false,\n  labelPlacement = undefined,\n  required = false,\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n  details = undefined,\n  hideDetails = false,\n  mobileBreakpoint = 'md',\n  dialogOptions = undefined,\n  classNames = undefined,\n} = defineProps<RuiCategoryPickerProps<TValue, TItem>>();\n\nconst emit = defineEmits<{\n  select: [item: TItem];\n}>();\n\ndefineSlots<{\n  'activator'?: (props: { attrs: { onClick?: () => void; onMouseover?: () => void; onMouseleave?: () => void }; isOpen: boolean; open: () => void; item: TItem | undefined; text: string | undefined }) => any;\n  'selection'?: (props: { item: TItem }) => any;\n  'selection.prepend'?: (props: { item: TItem }) => any;\n  'category'?: (props: { category: string | null; label: string; active: boolean; count: number }) => any;\n  'item'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'item.prepend'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'item.append'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'empty'?: () => any;\n  'header'?: () => any;\n  'footer'?: (props: { close: () => void }) => any;\n}>();\n\nconst isOpen = ref<boolean>(false);\nconst focusedPane = ref<'rail' | 'detail'>('rail');\nconst highlightedItemIndex = ref<number>(0);\nconst drillStep = ref<'category' | 'detail'>('category');\n\nconst railRef = useTemplateRef<HTMLDivElement>('railRef');\nconst detailRef = useTemplateRef<HTMLDivElement>('detailRef');\nconst activatorRef = useTemplateRef<HTMLInputElement>('activatorRef');\nconst fieldRef = useTemplateRef<HTMLElement>('fieldRef');\nconst isHovered = ref<boolean>(false);\n\nconst { focused } = useFocus(activatorRef);\nconst { hasError, hasSuccess } = useFormTextDetail(() => errorMessages, () => successMessages);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst baseId = useId();\nconst breakpoints = useBreakpoints(breakpointsTailwind);\n\nfunction resolveCategory(item: TItem): string {\n  if (categoryOf)\n    return categoryOf(item);\n  if (categoryAttr !== undefined)\n    return String(item[categoryAttr] ?? '');\n  return '';\n}\n\nconst {\n  activeCategory,\n  detailItems,\n  detailRows,\n  getIdentifier,\n  getText,\n  isEmpty,\n  isSelected,\n  railEntries,\n  setActiveCategory,\n  syncActiveToSelection,\n} = useCategoryPicker<TValue, TItem>({\n  allLabel: () => allLabel,\n  categoryOf: resolveCategory,\n  filter: () => filter,\n  items: () => items,\n  keyAttr,\n  modelValue,\n  search: searchInput,\n  searchable: () => searchable,\n  showAll: () => showAll,\n  textAttr,\n});\n\nconst isMobile = computed<boolean>(() => get(breakpoints.smaller(mobileBreakpoint)));\n\nconst mode = computed<'twoPane' | 'drill'>(() => (get(isMobile) ? 'drill' : 'twoPane'));\n\n/**\n * Desktop anchors an outside-click popover under the field (RuiMenu); narrow\n * width shows a full-width bottom sheet (RuiDialog).\n */\nconst shell = computed<typeof RuiMenu | typeof RuiDialog>(() => (get(isMobile) ? RuiDialog : RuiMenu));\n\n/**\n * The bottom sheet's props. Each shell is given only its own props, so the\n * other component's never leak through as attributes.\n */\nfunction dialogShellProps(): Record<string, unknown> {\n  return {\n    ariaLabel: dialogOptions?.ariaLabel ?? label,\n    bottomSheet: dialogOptions?.bottomSheet ?? true,\n    maxWidth: dialogOptions?.maxWidth,\n    persistent: dialogOptions?.persistent,\n    width: dialogOptions?.width ?? '100%',\n  };\n}\n\n/**\n * The popover's props. It anchors to the field box rather than the wrapper, so\n * it sits directly under the input instead of below the reserved details row,\n * and drops the menu's default vertical padding so the popover box equals the\n * panel: the size middleware caps the panel to the available height, and any\n * extra chrome padding would push the popover past the viewport edge. The\n * popover is a dialog, as the activator's `aria-haspopup` says: it holds a\n * tablist and a listbox, which a `menu` may not contain.\n */\nfunction menuShellProps(): Record<string, unknown> {\n  return {\n    anchorEl: get(fieldRef) ?? undefined,\n    classNames: { content: 'py-0' },\n    closeOnContentClick: false,\n    disableAutoFocus: true,\n    fullWidth: true,\n    menuLabel: label,\n    options: { placement: Placement.bottomStart, size: true },\n    persistent: dialogOptions?.persistent,\n    persistOnActivatorClick: true,\n    role: 'dialog',\n  };\n}\n\nconst shellProps = computed<Record<string, unknown>>(() =>\n  get(isMobile) ? dialogShellProps() : menuShellProps());\n\nconst ui = computed<ReturnType<typeof categoryPickerStyles>>(() => categoryPickerStyles({\n  dense,\n  mode: get(mode),\n}));\n\nconst selectedItem = computed<TItem | undefined>(() => {\n  const value = get(modelValue);\n  if (value === undefined)\n    return undefined;\n  return items.find(item => getIdentifier(item) === value);\n});\n\nconst selectedText = computed<string | undefined>(() => {\n  const selected = get(selectedItem);\n  return selected ? getText(selected) : undefined;\n});\n\nconst placement = useLabelPlacement(() => labelPlacement);\n\n/**\n * Desktop lets the user type in the field itself (no separate search box);\n * narrow width keeps a read-only trigger that opens the sheet's own search.\n */\nconst canType = computed<boolean>(() => searchable && !get(isMobile) && !readOnly && !disabled);\n\nconst isTyping = computed<boolean>(() => get(isOpen) && get(canType));\n\n/**\n * Drives both the clear button itself and the room the selection overlay has\n * to leave for it, so the two can never disagree.\n */\nconst showClear = computed<boolean>(() =>\n  clearable && get(selectedItem) !== undefined && !disabled && !readOnly);\n\nconst activatorUi = computed<ReturnType<typeof categoryPickerActivatorStyles>>(() => categoryPickerActivatorStyles({\n  dense,\n  disabled,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n  hovered: get(isHovered),\n  opened: get(isOpen),\n  readonly: readOnly,\n  withClear: get(showClear),\n}));\n\nconst activeRailIndex = computed<number>(() =>\n  get(railEntries).findIndex(entry => entry.category === get(activeCategory)));\n\nconst showRail = computed<boolean>(() => get(mode) === 'twoPane' || get(drillStep) === 'category');\nconst showDetail = computed<boolean>(() => get(mode) === 'twoPane' || get(drillStep) === 'detail');\n\nfunction clamp(value: number, max: number): number {\n  if (value < 0)\n    return 0;\n  if (value > max)\n    return max;\n  return value;\n}\n\nfunction open(): void {\n  if (disabled)\n    return;\n  set(isOpen, true);\n}\n\nfunction close(): void {\n  set(isOpen, false);\n}\n\nfunction onInput(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n  set(searchInput, target.value);\n  if (!get(isOpen))\n    open();\n}\n\nfunction selectItem(item: TItem): void {\n  if (readOnly)\n    return;\n  set(modelValue, getIdentifier(item));\n  emit('select', item);\n  close();\n}\n\nfunction clearSelection(): void {\n  set(modelValue, undefined);\n}\n\nfunction onCategoryClick(category: string | null): void {\n  setActiveCategory(category);\n  if (get(mode) === 'drill')\n    set(drillStep, 'detail');\n  else\n    focusPane('detail');\n}\n\n/**\n * Moves focus to one of the panes. The focus call prevents scrolling because\n * the panes sit inside a teleported popover, and without it the browser\n * scrolls the page behind to reveal the pane.\n */\nfunction focusPane(pane: 'rail' | 'detail'): void {\n  set(focusedPane, pane);\n  nextTick(() => {\n    (pane === 'rail' ? get(railRef) : get(detailRef))?.focus({ preventScroll: true });\n  });\n}\n\nfunction moveRail(direction: 1 | -1): void {\n  const entries = get(railEntries);\n  if (entries.length === 0)\n    return;\n  const next = clamp(get(activeRailIndex) + direction, entries.length - 1);\n  setActiveCategory(entries[next]?.category ?? null);\n}\n\nfunction moveItem(direction: 1 | -1): void {\n  const total = get(detailItems).length;\n  if (total === 0)\n    return;\n  set(highlightedItemIndex, clamp(get(highlightedItemIndex) + direction, total - 1));\n}\n\nfunction enterDetail(): void {\n  if (get(detailItems).length === 0)\n    return;\n  resetHighlightToSelection();\n  if (get(mode) === 'drill')\n    set(drillStep, 'detail');\n  focusPane('detail');\n}\n\nfunction selectHighlighted(): void {\n  const item = get(detailItems)[get(highlightedItemIndex)];\n  if (item !== undefined)\n    selectItem(item);\n}\n\n/**\n * Enter from the field commits the best match for the current query, so a\n * type-to-pick flow (type a few letters, press Enter) works without leaving\n * the input. Does nothing when the field is empty.\n */\nfunction selectTopResult(): void {\n  if (!get(searchInput).trim())\n    return;\n  const item = get(detailItems)[0];\n  if (item !== undefined)\n    selectItem(item);\n}\n\n/**\n * Keys in the search field: ArrowDown moves into the rail, Enter picks the top\n * match, Escape closes.\n *\n * An IME that is composing owns all three: the arrows walk its candidate list,\n * Enter confirms a candidate and Escape cancels it. While composing the field\n * leaves them alone, default action included, so neither a pick nor a close\n * lands mid-word.\n */\nfunction onSearchKeydown(event: KeyboardEvent): void {\n  if (event.isComposing)\n    return;\n\n  if (event.key === 'ArrowDown') {\n    event.preventDefault();\n    focusPane('rail');\n  }\n  else if (event.key === 'Enter') {\n    event.preventDefault();\n    selectTopResult();\n  }\n  else if (event.key === 'Escape') {\n    close();\n  }\n}\n\nfunction resetHighlightToSelection(): void {\n  const index = get(detailItems).findIndex(item => isSelected(item));\n  set(highlightedItemIndex, index >= 0 ? index : 0);\n}\n\nfunction backToRail(): void {\n  if (get(mode) === 'drill')\n    set(drillStep, 'category');\n  else\n    focusPane('rail');\n}\n\nfunction scrollActiveDescendantIntoView(container: HTMLElement | null, id: string): void {\n  if (!container)\n    return;\n  nextTick(() => {\n    container.querySelector(`#${id}`)?.scrollIntoView({ block: 'nearest' });\n  });\n}\n\n// Reset the item highlight whenever the active category changes.\nwatch(activeCategory, () => {\n  resetHighlightToSelection();\n});\n\nwatch(highlightedItemIndex, (index) => {\n  scrollActiveDescendantIntoView(get(detailRef), `${baseId}-opt-${index}`);\n});\n\nwatch(activeRailIndex, (index) => {\n  if (index >= 0)\n    scrollActiveDescendantIntoView(get(railRef), `${baseId}-cat-${index}`);\n});\n\n/**\n * Opening takes focus where the user types next: desktop is a combobox, so\n * focus stays in the field and ArrowDown moves into the panes, while the\n * mobile sheet has no typing field and focuses the rail instead. Closing\n * resets the query, so the field shows the selection again next time, and\n * returns focus to the trigger, which the APG dialog contract asks for.\n */\nfunction onOpenChanged(value: boolean): void {\n  if (value) {\n    syncActiveToSelection();\n    set(focusedPane, 'rail');\n    set(drillStep, 'category');\n    resetHighlightToSelection();\n    nextTick(() => (get(canType) ? get(activatorRef) : get(railRef))?.focus({ preventScroll: true }));\n  }\n  else {\n    set(searchInput, '');\n    nextTick(() => get(activatorRef)?.focus({ preventScroll: true }));\n  }\n}\n\nwatch(isOpen, onOpenChanged);\n</script>\n\n<template>\n  <component\n    :is=\"shell\"\n    v-model=\"isOpen\"\n    v-bind=\"{ ...$attrs, ...shellProps }\"\n  >\n    <template #activator=\"{ attrs }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs, isOpen, item: selectedItem, open, text: selectedText }\"\n      >\n        <div :class=\"activatorUi.wrapper()\">\n          <RuiFieldLabel\n            v-if=\"label\"\n            :id=\"`${baseId}-label`\"\n            :text=\"label\"\n            :hidden=\"placement === 'hidden'\"\n            :required=\"required\"\n            :disabled=\"disabled\"\n          />\n          <div\n            ref=\"fieldRef\"\n            role=\"combobox\"\n            data-id=\"activator\"\n            :class=\"activatorUi.activator()\"\n            :aria-labelledby=\"label ? `${baseId}-label` : undefined\"\n            aria-haspopup=\"dialog\"\n            :aria-controls=\"isOpen ? `${baseId}-panel` : undefined\"\n            :aria-expanded=\"isOpen\"\n            :aria-disabled=\"disabled || undefined\"\n            :aria-readonly=\"(readOnly || !canType) || undefined\"\n            :aria-required=\"required || undefined\"\n            :aria-invalid=\"hasError || undefined\"\n            :aria-busy=\"loading || undefined\"\n            v-bind=\"readOnly ? {} : activatorHandlers(attrs)\"\n            @mouseenter=\"isHovered = true\"\n            @mouseleave=\"isHovered = false\"\n          >\n            <span\n              v-if=\"selectedItem && !isTyping && $slots.selection\"\n              data-id=\"selection\"\n              :class=\"activatorUi.selection()\"\n            >\n              <slot\n                name=\"selection.prepend\"\n                v-bind=\"{ item: selectedItem }\"\n              />\n              <slot\n                name=\"selection\"\n                v-bind=\"{ item: selectedItem }\"\n              />\n            </span>\n            <input\n              ref=\"activatorRef\"\n              data-id=\"search-input\"\n              :value=\"isTyping ? searchInput : (($slots.selection && selectedItem) ? '' : (selectedText ?? ''))\"\n              :placeholder=\"isTyping ? placeholder : ''\"\n              :readonly=\"!canType\"\n              :disabled=\"disabled\"\n              :aria-invalid=\"hasError || undefined\"\n              :aria-labelledby=\"label ? `${baseId}-label` : undefined\"\n              class=\"bg-transparent outline-hidden\"\n              :class=\"[activatorUi.value(), !canType && 'cursor-pointer']\"\n              @input=\"onInput($event)\"\n              @keydown=\"onSearchKeydown($event)\"\n            />\n            <span\n              v-if=\"showClear\"\n              data-id=\"clear\"\n              :class=\"[activatorUi.clear(), focused && 'visible!', { 'mr-2': !dense }]\"\n              @click.stop.prevent=\"clearSelection()\"\n            >\n              <RuiIcon\n                name=\"lu-x\"\n                size=\"16\"\n              />\n            </span>\n            <span\n              data-id=\"chevron\"\n              :class=\"activatorUi.iconWrapper()\"\n            >\n              <RuiIcon\n                :class=\"activatorUi.icon()\"\n                :size=\"dense ? 16 : 20\"\n                name=\"lu-chevron-down\"\n              />\n            </span>\n            <RuiProgress\n              v-if=\"loading\"\n              :class=\"activatorUi.progress()\"\n              color=\"primary\"\n              thickness=\"3\"\n              variant=\"indeterminate\"\n            />\n            <fieldset :class=\"activatorUi.fieldset()\" />\n          </div>\n          <RuiFormTextDetail\n            v-if=\"detailsMode !== 'hidden'\"\n            :details=\"detailsMode\"\n            :error-messages=\"errorMessages\"\n            :success-messages=\"successMessages\"\n            :hint=\"hint\"\n          />\n        </div>\n      </slot>\n    </template>\n\n    <div\n      :id=\"`${baseId}-panel`\"\n      :class=\"ui.root({ class: cn(classNames?.root) })\"\n      data-id=\"panel\"\n    >\n      <!-- On desktop the field itself is the search input, so the panel only\n           needs its own search box in the mobile sheet. -->\n      <div\n        v-if=\"isMobile || $slots.header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\">\n          <div :class=\"ui.title()\">\n            {{ label }}\n          </div>\n        </slot>\n        <RuiTextField\n          v-if=\"searchable && isMobile\"\n          v-model=\"searchInput\"\n          :class=\"cn(classNames?.search)\"\n          :placeholder=\"placeholder\"\n          :dense=\"dense\"\n          prepend-icon=\"lu-search\"\n          details=\"hidden\"\n          clearable\n          data-id=\"search\"\n        />\n      </div>\n\n      <div :class=\"ui.body()\">\n        <!-- Category rail (master) -->\n        <div\n          v-show=\"showRail\"\n          ref=\"railRef\"\n          :class=\"ui.rail({ class: cn(classNames?.rail) })\"\n          role=\"tablist\"\n          aria-orientation=\"vertical\"\n          :aria-label=\"label\"\n          :aria-activedescendant=\"focusedPane === 'rail' && activeRailIndex >= 0 ? `${baseId}-cat-${activeRailIndex}` : undefined\"\n          tabindex=\"0\"\n          data-id=\"rail\"\n          @focus=\"focusedPane = 'rail'\"\n          @keydown.down.prevent=\"moveRail(1)\"\n          @keydown.up.prevent=\"moveRail(-1)\"\n          @keydown.right.prevent=\"enterDetail()\"\n          @keydown.enter.prevent=\"enterDetail()\"\n          @keydown.home.prevent=\"setActiveCategory(railEntries[0]?.category ?? null)\"\n          @keydown.end.prevent=\"setActiveCategory(railEntries[railEntries.length - 1]?.category ?? null)\"\n        >\n          <RuiButton\n            v-for=\"(entry, index) in railEntries\"\n            :id=\"`${baseId}-cat-${index}`\"\n            :key=\"entry.category ?? '__all__'\"\n            role=\"tab\"\n            variant=\"list\"\n            :size=\"dense ? 'sm' : undefined\"\n            :active=\"entry.category === activeCategory\"\n            :aria-selected=\"entry.category === activeCategory\"\n            tabindex=\"-1\"\n            :data-highlighted=\"focusedPane === 'rail' && index === activeRailIndex\"\n            :data-category=\"entry.category ?? '__all__'\"\n            @click=\"onCategoryClick(entry.category)\"\n          >\n            <slot\n              name=\"category\"\n              v-bind=\"{ active: entry.category === activeCategory, category: entry.category, count: entry.count, label: entry.label }\"\n            >\n              <span class=\"truncate\">{{ entry.label }}</span>\n              <span :class=\"ui.railCount()\">{{ entry.count }}</span>\n            </slot>\n          </RuiButton>\n        </div>\n\n        <!-- Detail pane -->\n        <div\n          v-show=\"showDetail\"\n          ref=\"detailRef\"\n          :class=\"ui.detail({ class: cn(classNames?.detail) })\"\n          role=\"listbox\"\n          :aria-label=\"activeCategory ?? allLabel\"\n          :aria-activedescendant=\"focusedPane === 'detail' && !isEmpty ? `${baseId}-opt-${highlightedItemIndex}` : undefined\"\n          tabindex=\"0\"\n          data-id=\"detail\"\n          @focus=\"focusedPane = 'detail'\"\n          @keydown.down.prevent=\"moveItem(1)\"\n          @keydown.up.prevent=\"moveItem(-1)\"\n          @keydown.left.prevent=\"backToRail()\"\n          @keydown.home.prevent=\"highlightedItemIndex = 0\"\n          @keydown.end.prevent=\"highlightedItemIndex = detailItems.length - 1\"\n          @keydown.enter.prevent=\"selectHighlighted()\"\n          @keydown.space.prevent=\"selectHighlighted()\"\n        >\n          <template v-if=\"mode === 'drill' && showDetail\">\n            <button\n              type=\"button\"\n              :class=\"ui.backButton()\"\n              data-id=\"back\"\n              @click=\"backToRail()\"\n            >\n              <RuiIcon\n                name=\"lu-chevron-left\"\n                size=\"18\"\n              />\n              <span>{{ activeCategory ?? allLabel }}</span>\n            </button>\n          </template>\n\n          <slot\n            v-if=\"isEmpty\"\n            name=\"empty\"\n          >\n            <div :class=\"ui.empty()\">\n              {{ emptyText }}\n            </div>\n          </slot>\n\n          <template\n            v-for=\"row in detailRows\"\n            v-else\n            :key=\"row.type === 'header' ? `h-${row.category}` : `i-${row.index}`\"\n          >\n            <div\n              v-if=\"row.type === 'header'\"\n              :class=\"ui.subheader()\"\n              role=\"presentation\"\n            >\n              {{ row.category }}\n            </div>\n            <RuiButton\n              v-else\n              :id=\"`${baseId}-opt-${row.index}`\"\n              role=\"option\"\n              variant=\"list\"\n              :size=\"dense ? 'sm' : undefined\"\n              :active=\"isSelected(row.item)\"\n              :aria-selected=\"isSelected(row.item)\"\n              tabindex=\"-1\"\n              :data-highlighted=\"focusedPane === 'detail' && row.index === highlightedItemIndex\"\n              :class=\"{ [ui.highlighted()]: focusedPane === 'detail' && row.index === highlightedItemIndex && !isSelected(row.item) }\"\n              @click=\"selectItem(row.item)\"\n            >\n              <template\n                v-if=\"$slots['item.prepend']\"\n                #prepend\n              >\n                <slot\n                  name=\"item.prepend\"\n                  v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n                />\n              </template>\n              <slot\n                name=\"item\"\n                v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n              >\n                {{ getText(row.item) }}\n              </slot>\n              <template\n                v-if=\"$slots['item.append']\"\n                #append\n              >\n                <slot\n                  name=\"item.append\"\n                  v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n                />\n              </template>\n            </RuiButton>\n          </template>\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.footer\"\n        :class=\"ui.footer()\"\n      >\n        <slot\n          name=\"footer\"\n          v-bind=\"{ close }\"\n        />\n      </div>\n    </div>\n  </component>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiCategoryPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","RuiDialog","RuiMenu","_openBlock","_createBlock","_resolveDynamicComponent","_unref","_mergeProps","_isRef","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","RuiFieldLabel","_createCommentVNode","_createElementBlock","_withModifiers","_createVNode","RuiIcon","RuiProgress","RuiFormTextDetail","_toDisplayString","RuiTextField","_withDirectives","_withKeys","_Fragment","_renderList","RuiButton","_vShow","_createSlots","_createTextVNode"],"sources":["../../../../src/components/forms/category-picker/RuiCategoryPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { HTMLAttributes } from 'vue';\nimport type { KeyOfType } from '@/composables/dropdown-menu';\nimport type { VueClassValue } from '@/types/class-value';\nimport { breakpointsTailwind, useBreakpoints } from '@vueuse/core';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { categoryPickerActivatorStyles, categoryPickerStyles } from '@/components/forms/category-picker/category-picker-styles';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiDialog, { type DialogProps } from '@/components/overlays/dialog/RuiDialog.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { Placement } from '@/composables/floating';\nimport { useCategoryPicker } from '@/composables/forms/category-picker/use-category-picker';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiCategoryPickerClassNames {\n  root?: VueClassValue;\n  rail?: VueClassValue;\n  detail?: VueClassValue;\n  search?: VueClassValue;\n}\n\nexport type CategoryPickerBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport interface RuiCategoryPickerProps<TValue, TItem> {\n  /** The full catalogue of selectable items. */\n  items: TItem[];\n  /** Resolve an item's category label. Takes precedence over `categoryAttr`. */\n  categoryOf?: (item: TItem) => string;\n  /** Resolve an item's category from one of its own properties. */\n  categoryAttr?: keyof TItem;\n  /** Property whose value becomes the model value. Omit to use the item itself. */\n  keyAttr?: KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>;\n  /** Property that produces an item's display text. */\n  textAttr?: keyof TItem;\n  /** Field label, and the title of the mobile sheet. */\n  label?: string;\n  /** Placeholder shown in the field while it is empty or being searched. */\n  placeholder?: string;\n  /** Allow filtering: type in the field (desktop) or the sheet's search box (mobile). */\n  searchable?: boolean;\n  /**\n   * Custom predicate. Receives the resolved category label as the third\n   * argument, matching the `RuiAutoComplete` filter signature.\n   */\n  filter?: (item: TItem, query: string, category: string) => boolean;\n  /** Show the synthetic \"All\" pseudo-category as the first rail entry. */\n  showAll?: boolean;\n  /** Label for the \"All\" pseudo-category. */\n  allLabel?: string;\n  /** Text shown when no item matches the current search. */\n  emptyText?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  dense?: boolean;\n  clearable?: boolean;\n  loading?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  /** Marks the trigger field as required (renders the asterisk). */\n  required?: boolean;\n  /** Validation errors rendered under the trigger field. */\n  errorMessages?: string | string[];\n  /** Success messages rendered under the trigger field. */\n  successMessages?: string | string[];\n  /** Hint rendered under the trigger field. */\n  hint?: string;\n  /** The line under the trigger field for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  /** Below this breakpoint the picker collapses to a single-pane drill-in. */\n  mobileBreakpoint?: CategoryPickerBreakpoint;\n  /** Forwarded to the mobile bottom-sheet (`RuiDialog`). */\n  dialogOptions?: DialogProps;\n  classNames?: RuiCategoryPickerClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCategoryPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue>();\nconst searchInput = defineModel<string>('search', { default: '' });\n\nconst {\n  items,\n  categoryOf = undefined,\n  categoryAttr = undefined,\n  keyAttr = undefined,\n  textAttr = undefined,\n  label = 'Select',\n  placeholder = 'Search',\n  searchable = true,\n  filter = undefined,\n  showAll = true,\n  allLabel = 'All',\n  emptyText = 'No results',\n  disabled = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  loading = false,\n  labelPlacement = undefined,\n  required = false,\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n  details = undefined,\n  hideDetails = false,\n  mobileBreakpoint = 'md',\n  dialogOptions = undefined,\n  classNames = undefined,\n} = defineProps<RuiCategoryPickerProps<TValue, TItem> & /* @vue-ignore */ Omit<HTMLAttributes, keyof RuiCategoryPickerProps<TValue, TItem> | 'onSelect'>>();\n\nconst emit = defineEmits<{\n  select: [item: TItem];\n}>();\n\ndefineSlots<{\n  'activator'?: (props: { attrs: { onClick?: () => void; onMouseover?: () => void; onMouseleave?: () => void }; isOpen: boolean; open: () => void; item: TItem | undefined; text: string | undefined }) => any;\n  'selection'?: (props: { item: TItem }) => any;\n  'selection.prepend'?: (props: { item: TItem }) => any;\n  'category'?: (props: { category: string | null; label: string; active: boolean; count: number }) => any;\n  'item'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'item.prepend'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'item.append'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'empty'?: () => any;\n  'header'?: () => any;\n  'footer'?: (props: { close: () => void }) => any;\n}>();\n\nconst isOpen = ref<boolean>(false);\nconst focusedPane = ref<'rail' | 'detail'>('rail');\nconst highlightedItemIndex = ref<number>(0);\nconst drillStep = ref<'category' | 'detail'>('category');\n\nconst railRef = useTemplateRef<HTMLDivElement>('railRef');\nconst detailRef = useTemplateRef<HTMLDivElement>('detailRef');\nconst activatorRef = useTemplateRef<HTMLInputElement>('activatorRef');\nconst fieldRef = useTemplateRef<HTMLElement>('fieldRef');\nconst isHovered = ref<boolean>(false);\n\nconst { focused } = useFocus(activatorRef);\nconst { hasError, hasSuccess } = useFormTextDetail(() => errorMessages, () => successMessages);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst baseId = useId();\nconst breakpoints = useBreakpoints(breakpointsTailwind);\n\nfunction resolveCategory(item: TItem): string {\n  if (categoryOf)\n    return categoryOf(item);\n  if (categoryAttr !== undefined)\n    return String(item[categoryAttr] ?? '');\n  return '';\n}\n\nconst {\n  activeCategory,\n  detailItems,\n  detailRows,\n  getIdentifier,\n  getText,\n  isEmpty,\n  isSelected,\n  railEntries,\n  setActiveCategory,\n  syncActiveToSelection,\n} = useCategoryPicker<TValue, TItem>({\n  allLabel: () => allLabel,\n  categoryOf: resolveCategory,\n  filter: () => filter,\n  items: () => items,\n  keyAttr,\n  modelValue,\n  search: searchInput,\n  searchable: () => searchable,\n  showAll: () => showAll,\n  textAttr,\n});\n\nconst isMobile = computed<boolean>(() => get(breakpoints.smaller(mobileBreakpoint)));\n\nconst mode = computed<'twoPane' | 'drill'>(() => (get(isMobile) ? 'drill' : 'twoPane'));\n\n/**\n * Desktop anchors an outside-click popover under the field (RuiMenu); narrow\n * width shows a full-width bottom sheet (RuiDialog).\n */\nconst shell = computed<typeof RuiMenu | typeof RuiDialog>(() => (get(isMobile) ? RuiDialog : RuiMenu));\n\n/**\n * The bottom sheet's props. Each shell is given only its own props, so the\n * other component's never leak through as attributes.\n */\nfunction dialogShellProps(): Record<string, unknown> {\n  return {\n    ariaLabel: dialogOptions?.ariaLabel ?? label,\n    bottomSheet: dialogOptions?.bottomSheet ?? true,\n    maxWidth: dialogOptions?.maxWidth,\n    persistent: dialogOptions?.persistent,\n    width: dialogOptions?.width ?? '100%',\n  };\n}\n\n/**\n * The popover's props. It anchors to the field box rather than the wrapper, so\n * it sits directly under the input instead of below the reserved details row,\n * and drops the menu's default vertical padding so the popover box equals the\n * panel: the size middleware caps the panel to the available height, and any\n * extra chrome padding would push the popover past the viewport edge. The\n * popover is a dialog, as the activator's `aria-haspopup` says: it holds a\n * tablist and a listbox, which a `menu` may not contain.\n */\nfunction menuShellProps(): Record<string, unknown> {\n  return {\n    anchorEl: get(fieldRef) ?? undefined,\n    classNames: { content: 'py-0' },\n    closeOnContentClick: false,\n    disableAutoFocus: true,\n    fullWidth: true,\n    menuLabel: label,\n    options: { placement: Placement.bottomStart, size: true },\n    persistent: dialogOptions?.persistent,\n    persistOnActivatorClick: true,\n    role: 'dialog',\n  };\n}\n\nconst shellProps = computed<Record<string, unknown>>(() =>\n  get(isMobile) ? dialogShellProps() : menuShellProps());\n\nconst ui = computed<ReturnType<typeof categoryPickerStyles>>(() => categoryPickerStyles({\n  dense,\n  mode: get(mode),\n}));\n\nconst selectedItem = computed<TItem | undefined>(() => {\n  const value = get(modelValue);\n  if (value === undefined)\n    return undefined;\n  return items.find(item => getIdentifier(item) === value);\n});\n\nconst selectedText = computed<string | undefined>(() => {\n  const selected = get(selectedItem);\n  return selected ? getText(selected) : undefined;\n});\n\nconst placement = useLabelPlacement(() => labelPlacement);\n\n/**\n * Desktop lets the user type in the field itself (no separate search box);\n * narrow width keeps a read-only trigger that opens the sheet's own search.\n */\nconst canType = computed<boolean>(() => searchable && !get(isMobile) && !readOnly && !disabled);\n\nconst isTyping = computed<boolean>(() => get(isOpen) && get(canType));\n\n/**\n * Drives both the clear button itself and the room the selection overlay has\n * to leave for it, so the two can never disagree.\n */\nconst showClear = computed<boolean>(() =>\n  clearable && get(selectedItem) !== undefined && !disabled && !readOnly);\n\nconst activatorUi = computed<ReturnType<typeof categoryPickerActivatorStyles>>(() => categoryPickerActivatorStyles({\n  dense,\n  disabled,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n  hovered: get(isHovered),\n  opened: get(isOpen),\n  readonly: readOnly,\n  withClear: get(showClear),\n}));\n\nconst activeRailIndex = computed<number>(() =>\n  get(railEntries).findIndex(entry => entry.category === get(activeCategory)));\n\nconst showRail = computed<boolean>(() => get(mode) === 'twoPane' || get(drillStep) === 'category');\nconst showDetail = computed<boolean>(() => get(mode) === 'twoPane' || get(drillStep) === 'detail');\n\nfunction clamp(value: number, max: number): number {\n  if (value < 0)\n    return 0;\n  if (value > max)\n    return max;\n  return value;\n}\n\nfunction open(): void {\n  if (disabled)\n    return;\n  set(isOpen, true);\n}\n\nfunction close(): void {\n  set(isOpen, false);\n}\n\nfunction onInput(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n  set(searchInput, target.value);\n  if (!get(isOpen))\n    open();\n}\n\nfunction selectItem(item: TItem): void {\n  if (readOnly)\n    return;\n  set(modelValue, getIdentifier(item));\n  emit('select', item);\n  close();\n}\n\nfunction clearSelection(): void {\n  set(modelValue, undefined);\n}\n\nfunction onCategoryClick(category: string | null): void {\n  setActiveCategory(category);\n  if (get(mode) === 'drill')\n    set(drillStep, 'detail');\n  else\n    focusPane('detail');\n}\n\n/**\n * Moves focus to one of the panes. The focus call prevents scrolling because\n * the panes sit inside a teleported popover, and without it the browser\n * scrolls the page behind to reveal the pane.\n */\nfunction focusPane(pane: 'rail' | 'detail'): void {\n  set(focusedPane, pane);\n  nextTick(() => {\n    (pane === 'rail' ? get(railRef) : get(detailRef))?.focus({ preventScroll: true });\n  });\n}\n\nfunction moveRail(direction: 1 | -1): void {\n  const entries = get(railEntries);\n  if (entries.length === 0)\n    return;\n  const next = clamp(get(activeRailIndex) + direction, entries.length - 1);\n  setActiveCategory(entries[next]?.category ?? null);\n}\n\nfunction moveItem(direction: 1 | -1): void {\n  const total = get(detailItems).length;\n  if (total === 0)\n    return;\n  set(highlightedItemIndex, clamp(get(highlightedItemIndex) + direction, total - 1));\n}\n\nfunction enterDetail(): void {\n  if (get(detailItems).length === 0)\n    return;\n  resetHighlightToSelection();\n  if (get(mode) === 'drill')\n    set(drillStep, 'detail');\n  focusPane('detail');\n}\n\nfunction selectHighlighted(): void {\n  const item = get(detailItems)[get(highlightedItemIndex)];\n  if (item !== undefined)\n    selectItem(item);\n}\n\n/**\n * Enter from the field commits the best match for the current query, so a\n * type-to-pick flow (type a few letters, press Enter) works without leaving\n * the input. Does nothing when the field is empty.\n */\nfunction selectTopResult(): void {\n  if (!get(searchInput).trim())\n    return;\n  const item = get(detailItems)[0];\n  if (item !== undefined)\n    selectItem(item);\n}\n\n/**\n * Keys in the search field: ArrowDown moves into the rail, Enter picks the top\n * match, Escape closes.\n *\n * An IME that is composing owns all three: the arrows walk its candidate list,\n * Enter confirms a candidate and Escape cancels it. While composing the field\n * leaves them alone, default action included, so neither a pick nor a close\n * lands mid-word.\n */\nfunction onSearchKeydown(event: KeyboardEvent): void {\n  if (event.isComposing)\n    return;\n\n  if (event.key === 'ArrowDown') {\n    event.preventDefault();\n    focusPane('rail');\n  }\n  else if (event.key === 'Enter') {\n    event.preventDefault();\n    selectTopResult();\n  }\n  else if (event.key === 'Escape') {\n    close();\n  }\n}\n\nfunction resetHighlightToSelection(): void {\n  const index = get(detailItems).findIndex(item => isSelected(item));\n  set(highlightedItemIndex, index >= 0 ? index : 0);\n}\n\nfunction backToRail(): void {\n  if (get(mode) === 'drill')\n    set(drillStep, 'category');\n  else\n    focusPane('rail');\n}\n\nfunction scrollActiveDescendantIntoView(container: HTMLElement | null, id: string): void {\n  if (!container)\n    return;\n  nextTick(() => {\n    container.querySelector(`#${id}`)?.scrollIntoView({ block: 'nearest' });\n  });\n}\n\n// Reset the item highlight whenever the active category changes.\nwatch(activeCategory, () => {\n  resetHighlightToSelection();\n});\n\nwatch(highlightedItemIndex, (index) => {\n  scrollActiveDescendantIntoView(get(detailRef), `${baseId}-opt-${index}`);\n});\n\nwatch(activeRailIndex, (index) => {\n  if (index >= 0)\n    scrollActiveDescendantIntoView(get(railRef), `${baseId}-cat-${index}`);\n});\n\n/**\n * Opening takes focus where the user types next: desktop is a combobox, so\n * focus stays in the field and ArrowDown moves into the panes, while the\n * mobile sheet has no typing field and focuses the rail instead. Closing\n * resets the query, so the field shows the selection again next time, and\n * returns focus to the trigger, which the APG dialog contract asks for.\n */\nfunction onOpenChanged(value: boolean): void {\n  if (value) {\n    syncActiveToSelection();\n    set(focusedPane, 'rail');\n    set(drillStep, 'category');\n    resetHighlightToSelection();\n    nextTick(() => (get(canType) ? get(activatorRef) : get(railRef))?.focus({ preventScroll: true }));\n  }\n  else {\n    set(searchInput, '');\n    nextTick(() => get(activatorRef)?.focus({ preventScroll: true }));\n  }\n}\n\nwatch(isOpen, onOpenChanged);\n</script>\n\n<template>\n  <component\n    :is=\"shell\"\n    v-model=\"isOpen\"\n    v-bind=\"{ ...$attrs, ...shellProps }\"\n  >\n    <template #activator=\"{ attrs }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs, isOpen, item: selectedItem, open, text: selectedText }\"\n      >\n        <div :class=\"activatorUi.wrapper()\">\n          <RuiFieldLabel\n            v-if=\"label\"\n            :id=\"`${baseId}-label`\"\n            :text=\"label\"\n            :hidden=\"placement === 'hidden'\"\n            :required=\"required\"\n            :disabled=\"disabled\"\n          />\n          <div\n            ref=\"fieldRef\"\n            role=\"combobox\"\n            data-id=\"activator\"\n            :class=\"activatorUi.activator()\"\n            :aria-labelledby=\"label ? `${baseId}-label` : undefined\"\n            aria-haspopup=\"dialog\"\n            :aria-controls=\"isOpen ? `${baseId}-panel` : undefined\"\n            :aria-expanded=\"isOpen\"\n            :aria-disabled=\"disabled || undefined\"\n            :aria-readonly=\"(readOnly || !canType) || undefined\"\n            :aria-required=\"required || undefined\"\n            :aria-invalid=\"hasError || undefined\"\n            :aria-busy=\"loading || undefined\"\n            v-bind=\"readOnly ? {} : activatorHandlers(attrs)\"\n            @mouseenter=\"isHovered = true\"\n            @mouseleave=\"isHovered = false\"\n          >\n            <span\n              v-if=\"selectedItem && !isTyping && $slots.selection\"\n              data-id=\"selection\"\n              :class=\"activatorUi.selection()\"\n            >\n              <slot\n                name=\"selection.prepend\"\n                v-bind=\"{ item: selectedItem }\"\n              />\n              <slot\n                name=\"selection\"\n                v-bind=\"{ item: selectedItem }\"\n              />\n            </span>\n            <input\n              ref=\"activatorRef\"\n              data-id=\"search-input\"\n              :value=\"isTyping ? searchInput : (($slots.selection && selectedItem) ? '' : (selectedText ?? ''))\"\n              :placeholder=\"isTyping ? placeholder : ''\"\n              :readonly=\"!canType\"\n              :disabled=\"disabled\"\n              :aria-invalid=\"hasError || undefined\"\n              :aria-labelledby=\"label ? `${baseId}-label` : undefined\"\n              class=\"bg-transparent outline-hidden\"\n              :class=\"[activatorUi.value(), !canType && 'cursor-pointer']\"\n              @input=\"onInput($event)\"\n              @keydown=\"onSearchKeydown($event)\"\n            />\n            <span\n              v-if=\"showClear\"\n              data-id=\"clear\"\n              :class=\"[activatorUi.clear(), focused && 'visible!', { 'mr-2': !dense }]\"\n              @click.stop.prevent=\"clearSelection()\"\n            >\n              <RuiIcon\n                name=\"lu-x\"\n                size=\"16\"\n              />\n            </span>\n            <span\n              data-id=\"chevron\"\n              :class=\"activatorUi.iconWrapper()\"\n            >\n              <RuiIcon\n                :class=\"activatorUi.icon()\"\n                :size=\"dense ? 16 : 20\"\n                name=\"lu-chevron-down\"\n              />\n            </span>\n            <RuiProgress\n              v-if=\"loading\"\n              :class=\"activatorUi.progress()\"\n              color=\"primary\"\n              thickness=\"3\"\n              variant=\"indeterminate\"\n            />\n            <fieldset :class=\"activatorUi.fieldset()\" />\n          </div>\n          <RuiFormTextDetail\n            v-if=\"detailsMode !== 'hidden'\"\n            :details=\"detailsMode\"\n            :error-messages=\"errorMessages\"\n            :success-messages=\"successMessages\"\n            :hint=\"hint\"\n          />\n        </div>\n      </slot>\n    </template>\n\n    <div\n      :id=\"`${baseId}-panel`\"\n      :class=\"ui.root({ class: cn(classNames?.root) })\"\n      data-id=\"panel\"\n    >\n      <!-- On desktop the field itself is the search input, so the panel only\n           needs its own search box in the mobile sheet. -->\n      <div\n        v-if=\"isMobile || $slots.header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\">\n          <div :class=\"ui.title()\">\n            {{ label }}\n          </div>\n        </slot>\n        <RuiTextField\n          v-if=\"searchable && isMobile\"\n          v-model=\"searchInput\"\n          :class=\"cn(classNames?.search)\"\n          :placeholder=\"placeholder\"\n          :dense=\"dense\"\n          prepend-icon=\"lu-search\"\n          details=\"hidden\"\n          clearable\n          data-id=\"search\"\n        />\n      </div>\n\n      <div :class=\"ui.body()\">\n        <!-- Category rail (master) -->\n        <div\n          v-show=\"showRail\"\n          ref=\"railRef\"\n          :class=\"ui.rail({ class: cn(classNames?.rail) })\"\n          role=\"tablist\"\n          aria-orientation=\"vertical\"\n          :aria-label=\"label\"\n          :aria-activedescendant=\"focusedPane === 'rail' && activeRailIndex >= 0 ? `${baseId}-cat-${activeRailIndex}` : undefined\"\n          tabindex=\"0\"\n          data-id=\"rail\"\n          @focus=\"focusedPane = 'rail'\"\n          @keydown.down.prevent=\"moveRail(1)\"\n          @keydown.up.prevent=\"moveRail(-1)\"\n          @keydown.right.prevent=\"enterDetail()\"\n          @keydown.enter.prevent=\"enterDetail()\"\n          @keydown.home.prevent=\"setActiveCategory(railEntries[0]?.category ?? null)\"\n          @keydown.end.prevent=\"setActiveCategory(railEntries[railEntries.length - 1]?.category ?? null)\"\n        >\n          <RuiButton\n            v-for=\"(entry, index) in railEntries\"\n            :id=\"`${baseId}-cat-${index}`\"\n            :key=\"entry.category ?? '__all__'\"\n            role=\"tab\"\n            variant=\"list\"\n            :size=\"dense ? 'sm' : undefined\"\n            :active=\"entry.category === activeCategory\"\n            :aria-selected=\"entry.category === activeCategory\"\n            tabindex=\"-1\"\n            :data-highlighted=\"focusedPane === 'rail' && index === activeRailIndex\"\n            :data-category=\"entry.category ?? '__all__'\"\n            @click=\"onCategoryClick(entry.category)\"\n          >\n            <slot\n              name=\"category\"\n              v-bind=\"{ active: entry.category === activeCategory, category: entry.category, count: entry.count, label: entry.label }\"\n            >\n              <span class=\"truncate\">{{ entry.label }}</span>\n              <span :class=\"ui.railCount()\">{{ entry.count }}</span>\n            </slot>\n          </RuiButton>\n        </div>\n\n        <!-- Detail pane -->\n        <div\n          v-show=\"showDetail\"\n          ref=\"detailRef\"\n          :class=\"ui.detail({ class: cn(classNames?.detail) })\"\n          role=\"listbox\"\n          :aria-label=\"activeCategory ?? allLabel\"\n          :aria-activedescendant=\"focusedPane === 'detail' && !isEmpty ? `${baseId}-opt-${highlightedItemIndex}` : undefined\"\n          tabindex=\"0\"\n          data-id=\"detail\"\n          @focus=\"focusedPane = 'detail'\"\n          @keydown.down.prevent=\"moveItem(1)\"\n          @keydown.up.prevent=\"moveItem(-1)\"\n          @keydown.left.prevent=\"backToRail()\"\n          @keydown.home.prevent=\"highlightedItemIndex = 0\"\n          @keydown.end.prevent=\"highlightedItemIndex = detailItems.length - 1\"\n          @keydown.enter.prevent=\"selectHighlighted()\"\n          @keydown.space.prevent=\"selectHighlighted()\"\n        >\n          <template v-if=\"mode === 'drill' && showDetail\">\n            <button\n              type=\"button\"\n              :class=\"ui.backButton()\"\n              data-id=\"back\"\n              @click=\"backToRail()\"\n            >\n              <RuiIcon\n                name=\"lu-chevron-left\"\n                size=\"18\"\n              />\n              <span>{{ activeCategory ?? allLabel }}</span>\n            </button>\n          </template>\n\n          <slot\n            v-if=\"isEmpty\"\n            name=\"empty\"\n          >\n            <div :class=\"ui.empty()\">\n              {{ emptyText }}\n            </div>\n          </slot>\n\n          <template\n            v-for=\"row in detailRows\"\n            v-else\n            :key=\"row.type === 'header' ? `h-${row.category}` : `i-${row.index}`\"\n          >\n            <div\n              v-if=\"row.type === 'header'\"\n              :class=\"ui.subheader()\"\n              role=\"presentation\"\n            >\n              {{ row.category }}\n            </div>\n            <RuiButton\n              v-else\n              :id=\"`${baseId}-opt-${row.index}`\"\n              role=\"option\"\n              variant=\"list\"\n              :size=\"dense ? 'sm' : undefined\"\n              :active=\"isSelected(row.item)\"\n              :aria-selected=\"isSelected(row.item)\"\n              tabindex=\"-1\"\n              :data-highlighted=\"focusedPane === 'detail' && row.index === highlightedItemIndex\"\n              :class=\"{ [ui.highlighted()]: focusedPane === 'detail' && row.index === highlightedItemIndex && !isSelected(row.item) }\"\n              @click=\"selectItem(row.item)\"\n            >\n              <template\n                v-if=\"$slots['item.prepend']\"\n                #prepend\n              >\n                <slot\n                  name=\"item.prepend\"\n                  v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n                />\n              </template>\n              <slot\n                name=\"item\"\n                v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n              >\n                {{ getText(row.item) }}\n              </slot>\n              <template\n                v-if=\"$slots['item.append']\"\n                #append\n              >\n                <slot\n                  name=\"item.append\"\n                  v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n                />\n              </template>\n            </RuiButton>\n          </template>\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.footer\"\n        :class=\"ui.footer()\"\n      >\n        <slot\n          name=\"footer\"\n          v-bind=\"{ close }\"\n        />\n      </div>\n    </div>\n  </component>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/checkbox/RuiCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCheckbox.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/checkbox/RuiCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { objectPick } from '@vueuse/shared';\nimport { checkControlStyles } from '@/components/forms/check-control-styles';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props<TValue> {\n  value?: TValue;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the control for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  /** Puts the hint or message under the label text instead of under the box, so a list of checkboxes keeps one text column. */\n  detailsUnderLabel?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckbox',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst indeterminate = defineModel<boolean>('indeterminate', { default: false });\n\nconst {\n  value = undefined,\n  disabled: disabledProp = false,\n  color: colorProp = undefined,\n  size: sizeProp = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  details = undefined,\n  hideDetails = false,\n  detailsUnderLabel = false,\n  required = false,\n} = defineProps<Props<TValue>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst el = useTemplateRef<HTMLInputElement>('el');\n\nconst group = inject(RuiCheckboxGroupContextKey, undefined);\n\nconst disabled = computed<boolean>(() => disabledProp || (group ? toValue(group.disabled) : false));\nconst color = computed<ContextColorsType | undefined>(() => colorProp ?? (group ? toValue(group.color) : undefined));\nconst size = computed<'sm' | 'lg' | undefined>(() => sizeProp ?? (group ? toValue(group.size) : undefined));\n// Suppress per-child details inside a group so the group's own hint/error wins.\nconst detailsMode = useFormDetails(\n  () => (group !== undefined && value !== undefined ? 'hidden' : details),\n  () => hideDetails,\n);\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst internalModelValue = computed<boolean>({\n  get: () => {\n    if (group && value !== undefined)\n      return group.isChecked(value);\n    return get(modelValue);\n  },\n  set: (checked: boolean) => {\n    if (checked)\n      set(indeterminate, false);\n    if (group && value !== undefined)\n      group.toggle(value, checked);\n    else\n      set(modelValue, checked);\n  },\n});\n\nconst ui = computed<ReturnType<typeof checkControlStyles>>(() => checkControlStyles({\n  size: get(size),\n  disabled: get(disabled),\n  checked: get(internalModelValue) || get(indeterminate),\n  validation: get(validation),\n  color: get(color) ?? 'grey',\n  underLabel: detailsUnderLabel,\n}));\n\nconst markState = computed<'indeterminate' | 'checked' | 'unchecked'>(() => {\n  if (get(indeterminate))\n    return 'indeterminate';\n  return get(internalModelValue) ? 'checked' : 'unchecked';\n});\n\nwatch(indeterminate, (val) => {\n  const input = get(el);\n  if (!input) {\n    return;\n  }\n  input.checked = !val;\n  input.value = val ? 'off' : 'on';\n});\n\nwatch(internalModelValue, (val) => {\n  const input = get(el);\n  if (input && input.checked !== val)\n    input.checked = val;\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      v-bind=\"objectPick($attrs, ['onClick'])\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"internalModelValue || indeterminate || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        ref=\"el\"\n        v-model=\"internalModelValue\"\n        type=\"checkbox\"\n        :class=\"ui.input()\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs, ['onInput', 'onClick'])\"\n      />\n      <span :class=\"ui.control()\">\n        <span\n          :class=\"ui.mark()\"\n          data-mark\n          :data-state=\"markState\"\n        >\n          <svg\n            v-if=\"markState !== 'unchecked'\"\n            :class=\"ui.glyph()\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path\n              v-if=\"markState === 'indeterminate'\"\n              d=\"M3 6h6\"\n            />\n            <path\n              v-else\n              d=\"M2.5 6.2 5 8.6l4.5-5\"\n            />\n          </svg>\n        </span>\n      </span>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"ui.label()\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          *\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :class=\"ui.details()\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCheckbox.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/checkbox/RuiCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { InputAttributes } from '@/types/attributes';\nimport { objectPick } from '@vueuse/shared';\nimport { checkControlStyles } from '@/components/forms/check-control-styles';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props<TValue> {\n  value?: TValue;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the control for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  /** Puts the hint or message under the label text instead of under the box, so a list of checkboxes keeps one text column. */\n  detailsUnderLabel?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckbox',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst indeterminate = defineModel<boolean>('indeterminate', { default: false });\n\nconst {\n  value = undefined,\n  disabled: disabledProp = false,\n  color: colorProp = undefined,\n  size: sizeProp = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  details = undefined,\n  hideDetails = false,\n  detailsUnderLabel = false,\n  required = false,\n} = defineProps<Props<TValue> & /* @vue-ignore */ Omit<InputAttributes, keyof Props<TValue> | 'indeterminate'>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst el = useTemplateRef<HTMLInputElement>('el');\n\nconst group = inject(RuiCheckboxGroupContextKey, undefined);\n\nconst disabled = computed<boolean>(() => disabledProp || (group ? toValue(group.disabled) : false));\nconst color = computed<ContextColorsType | undefined>(() => colorProp ?? (group ? toValue(group.color) : undefined));\nconst size = computed<'sm' | 'lg' | undefined>(() => sizeProp ?? (group ? toValue(group.size) : undefined));\n// Suppress per-child details inside a group so the group's own hint/error wins.\nconst detailsMode = useFormDetails(\n  () => (group !== undefined && value !== undefined ? 'hidden' : details),\n  () => hideDetails,\n);\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst internalModelValue = computed<boolean>({\n  get: () => {\n    if (group && value !== undefined)\n      return group.isChecked(value);\n    return get(modelValue);\n  },\n  set: (checked: boolean) => {\n    if (checked)\n      set(indeterminate, false);\n    if (group && value !== undefined)\n      group.toggle(value, checked);\n    else\n      set(modelValue, checked);\n  },\n});\n\nconst ui = computed<ReturnType<typeof checkControlStyles>>(() => checkControlStyles({\n  size: get(size),\n  disabled: get(disabled),\n  checked: get(internalModelValue) || get(indeterminate),\n  validation: get(validation),\n  color: get(color) ?? 'grey',\n  underLabel: detailsUnderLabel,\n}));\n\nconst markState = computed<'indeterminate' | 'checked' | 'unchecked'>(() => {\n  if (get(indeterminate))\n    return 'indeterminate';\n  return get(internalModelValue) ? 'checked' : 'unchecked';\n});\n\n/*\n * The click listener goes to the label, which wraps the input. Typed as the record `$attrs` is,\n * so the template binds it like the root and input attributes.\n */\nfunction getLabelAttrs(attrs: Record<string, unknown>): Record<string, unknown> {\n  return objectPick(attrs, ['onClick']);\n}\n\nwatch(indeterminate, (val) => {\n  const input = get(el);\n  if (!input) {\n    return;\n  }\n  input.checked = !val;\n  input.value = val ? 'off' : 'on';\n});\n\nwatch(internalModelValue, (val) => {\n  const input = get(el);\n  if (input && input.checked !== val)\n    input.checked = val;\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      v-bind=\"getLabelAttrs($attrs)\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"internalModelValue || indeterminate || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        ref=\"el\"\n        v-model=\"internalModelValue\"\n        type=\"checkbox\"\n        :class=\"ui.input()\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs, ['onInput', 'onClick'])\"\n      />\n      <span :class=\"ui.control()\">\n        <span\n          :class=\"ui.mark()\"\n          data-mark\n          :data-state=\"markState\"\n        >\n          <svg\n            v-if=\"markState !== 'unchecked'\"\n            :class=\"ui.glyph()\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path\n              v-if=\"markState === 'indeterminate'\"\n              d=\"M3 6h6\"\n            />\n            <path\n              v-else\n              d=\"M2.5 6.2 5 8.6l4.5-5\"\n            />\n          </svg>\n        </span>\n      </span>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"ui.label()\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          *\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :class=\"ui.details()\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/checkbox/RuiCheckbox.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
+import type { InputAttributes } from '../../../types/attributes.js';
 import { type FormDetails } from '../../../utils/form-text-detail.js';
 export interface Props<TValue> {
     value?: TValue;
@@ -18,7 +19,7 @@ export interface Props<TValue> {
     required?: boolean;
 }
 declare const __VLS_export: <TValue>(__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<(Props<TValue> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<TValue> & Omit<InputAttributes, "indeterminate" | keyof Props<TValue>> & {
         modelValue?: boolean;
         indeterminate?: boolean;
     }) & {

package/dist/components/forms/checkbox/RuiCheckbox.vue_vue_type_script_setup_true_lang.js

@@ -100,6 +100,9 @@ var RuiCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			if (get(indeterminate)) return "indeterminate";
 			return get(internalModelValue) ? "checked" : "unchecked";
 		});
+		function getLabelAttrs(attrs) {
+			return objectPick(attrs, ["onClick"]);
+		}
 		watch(indeterminate, (val) => {
 			const input = get(el);
 			if (!input) return;
@@ -111,7 +114,7 @@ var RuiCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			if (input && input.checked !== val) input.checked = val;
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [createElementVNode("label", mergeProps({ class: unref(ui).wrapper() }, unref(objectPick)(_ctx.$attrs, ["onClick"]), {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [createElementVNode("label", mergeProps({ class: unref(ui).wrapper() }, getLabelAttrs(_ctx.$attrs), {
 				"data-disabled": unref(disabled) || void 0,
 				"data-checked": unref(internalModelValue) || indeterminate.value || void 0,
 				"data-error": unref(hasError) ? "" : void 0