@rotki/ui-library 3.0.0-beta.2 → 3.0.0-beta.4

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCategoryPicker.js","names":[],"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 { 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  /** Hide the details row (errors/success/hint) under the trigger field. */\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  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);\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.\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    options: { placement: Placement.bottomStart, size: true },\n    persistent: dialogOptions?.persistent,\n    persistOnActivatorClick: true,\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\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.down.prevent=\"focusPane('rail')\"\n              @keydown.enter.prevent=\"selectTopResult()\"\n              @keydown.esc=\"close()\"\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=\"!hideDetails\"\n            class=\"pt-1\"\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          hide-details\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 { 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 { 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  /** Hide the details row (errors/success/hint) under the trigger field. */\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  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);\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\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.down.prevent=\"focusPane('rail')\"\n              @keydown.enter.prevent=\"selectTopResult()\"\n              @keydown.esc=\"close()\"\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=\"!hideDetails\"\n            class=\"pt-1\"\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          hide-details\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,6 +1,6 @@
 import type { KeyOfType } from '../../../composables/dropdown-menu.js';
-import type { VueClassValue } from '../../../types/class-value';
-import { type DialogProps } from '../../overlays/dialog/RuiDialog.vue';
+import type { VueClassValue } from '../../../types/class-value.js';
+import { type DialogProps } from '../../overlays/dialog/RuiDialog.vue.js';
 import { type LabelPlacement } from '../../../composables/defaults/field.js';
 export interface RuiCategoryPickerClassNames {
     root?: VueClassValue;

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

@@ -169,7 +169,9 @@ var RuiCategoryPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		* it sits directly under the input instead of below the reserved details row,
 		* and drops the menu's default vertical padding so the popover box equals the
 		* panel: the size middleware caps the panel to the available height, and any
-		* extra chrome padding would push the popover past the viewport edge.
+		* extra chrome padding would push the popover past the viewport edge. The
+		* popover is a dialog, as the activator's `aria-haspopup` says: it holds a
+		* tablist and a listbox, which a `menu` may not contain.
 		*/
 		function menuShellProps() {
 			return {
@@ -178,12 +180,14 @@ var RuiCategoryPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 				closeOnContentClick: false,
 				disableAutoFocus: true,
 				fullWidth: true,
+				menuLabel: __props.label,
 				options: {
 					placement: Placement.bottomStart,
 					size: true
 				},
 				persistent: __props.dialogOptions?.persistent,
-				persistOnActivatorClick: true
+				persistOnActivatorClick: true,
+				role: "dialog"
 			};
 		}
 		const shellProps = computed(() => get(isMobile) ? dialogShellProps() : menuShellProps());

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"],"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 { 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  /** Hide the details row (errors/success/hint) under the trigger field. */\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  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);\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.\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    options: { placement: Placement.bottomStart, size: true },\n    persistent: dialogOptions?.persistent,\n    persistOnActivatorClick: true,\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\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.down.prevent=\"focusPane('rail')\"\n              @keydown.enter.prevent=\"selectTopResult()\"\n              @keydown.esc=\"close()\"\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=\"!hideDetails\"\n            class=\"pt-1\"\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          hide-details\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","_withKeys","_withModifiers","_createVNode","RuiIcon","RuiProgress","RuiFormTextDetail","_toDisplayString","RuiTextField","_withDirectives","_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 { 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  /** Hide the details row (errors/success/hint) under the trigger field. */\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  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);\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\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.down.prevent=\"focusPane('rail')\"\n              @keydown.enter.prevent=\"selectTopResult()\"\n              @keydown.esc=\"close()\"\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=\"!hideDetails\"\n            class=\"pt-1\"\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          hide-details\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":[],"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 { 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  hideDetails?: 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  hideDetails = 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 effectiveHideDetails = computed<boolean>(() => hideDetails || (group !== undefined && value !== undefined));\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}));\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=\"!effectiveHideDetails\"\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 { 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 { 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  hideDetails?: 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  hideDetails = 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 effectiveHideDetails = computed<boolean>(() => hideDetails || (group !== undefined && value !== undefined));\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}));\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=\"!effectiveHideDetails\"\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_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCheckbox.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"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 { 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  hideDetails?: 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  hideDetails = 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 effectiveHideDetails = computed<boolean>(() => hideDetails || (group !== undefined && value !== undefined));\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}));\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=\"!effectiveHideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiCheckbox.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createElementVNode","_mergeProps","_withDirectives","_isRef","_vModelCheckbox","_normalizeClass","_createCommentVNode","_renderSlot","_createTextVNode","_toDisplayString","_createBlock","RuiFormTextDetail"],"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 { 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  hideDetails?: 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  hideDetails = 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 effectiveHideDetails = computed<boolean>(() => hideDetails || (group !== undefined && value !== undefined));\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}));\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=\"!effectiveHideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCheckboxGroup.js","names":[],"sources":["../../../../../src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckboxGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue[]>({ default: () => [] });\n\nconst {\n  inline = false,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nfunction arrayIncludes(arr: readonly TValue[], value: unknown): boolean {\n  return Array.prototype.includes.call(arr, value);\n}\n\nprovide(RuiCheckboxGroupContextKey, {\n  isChecked: (value: unknown): boolean => arrayIncludes(get(modelValue), value),\n  toggle: (value: unknown, checked: boolean): void => {\n    const current = get(modelValue);\n    const present = arrayIncludes(current, value);\n    if (checked === present)\n      return;\n    if (checked)\n      set(modelValue, [...current, value as TValue]);\n    else\n      set(modelValue, current.filter(v => v !== value));\n  },\n  disabled: () => disabled,\n  color: () => color,\n  size: () => size,\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"label\"\n      class=\"text-rui-text text-sm/5 font-medium\"\n    >\n      {{ label }}\n      <span\n        v-if=\"required\"\n        class=\"text-rui-error\"\n      >\n        *\n      </span>\n    </div>\n    <div :class=\"{ 'flex between:ml-6 between:mr-0': inline }\">\n      <slot />\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCheckboxGroup.js","names":["_sfc_main"],"sources":["../../../../../src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckboxGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue[]>({ default: () => [] });\n\nconst {\n  inline = false,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nfunction arrayIncludes(arr: readonly TValue[], value: unknown): boolean {\n  return Array.prototype.includes.call(arr, value);\n}\n\nprovide(RuiCheckboxGroupContextKey, {\n  isChecked: (value: unknown): boolean => arrayIncludes(get(modelValue), value),\n  toggle: (value: unknown, checked: boolean): void => {\n    const current = get(modelValue);\n    const present = arrayIncludes(current, value);\n    if (checked === present)\n      return;\n    if (checked)\n      set(modelValue, [...current, value as TValue]);\n    else\n      set(modelValue, current.filter(v => v !== value));\n  },\n  disabled: () => disabled,\n  color: () => color,\n  size: () => size,\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"label\"\n      class=\"text-rui-text text-sm/5 font-medium\"\n    >\n      {{ label }}\n      <span\n        v-if=\"required\"\n        class=\"text-rui-error\"\n      >\n        *\n      </span>\n    </div>\n    <div :class=\"{ 'flex between:ml-6 between:mr-0': inline }\">\n      <slot />\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../../src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckboxGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue[]>({ default: () => [] });\n\nconst {\n  inline = false,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nfunction arrayIncludes(arr: readonly TValue[], value: unknown): boolean {\n  return Array.prototype.includes.call(arr, value);\n}\n\nprovide(RuiCheckboxGroupContextKey, {\n  isChecked: (value: unknown): boolean => arrayIncludes(get(modelValue), value),\n  toggle: (value: unknown, checked: boolean): void => {\n    const current = get(modelValue);\n    const present = arrayIncludes(current, value);\n    if (checked === present)\n      return;\n    if (checked)\n      set(modelValue, [...current, value as TValue]);\n    else\n      set(modelValue, current.filter(v => v !== value));\n  },\n  disabled: () => disabled,\n  color: () => color,\n  size: () => size,\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"label\"\n      class=\"text-rui-text text-sm/5 font-medium\"\n    >\n      {{ label }}\n      <span\n        v-if=\"required\"\n        class=\"text-rui-error\"\n      >\n        *\n      </span>\n    </div>\n    <div :class=\"{ 'flex between:ml-6 between:mr-0': inline }\">\n      <slot />\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,aAAa,SAAqB,SAAA,YAAsB;EAmB9D,SAAS,cAAc,KAAwB,OAAyB;GACtE,OAAO,MAAM,UAAU,SAAS,KAAK,KAAK,KAAK;EACjD;EAEA,QAAQ,4BAA4B;GAClC,YAAY,UAA4B,cAAc,IAAI,UAAU,GAAG,KAAK;GAC5E,SAAS,OAAgB,YAA2B;IAClD,MAAM,UAAU,IAAI,UAAU;IAE9B,IAAI,YADY,cAAc,SAAS,KACvB,GACd;IACF,IAAI,SACF,IAAI,YAAY,CAAC,GAAG,SAAS,KAAe,CAAC;SAE7C,IAAI,YAAY,QAAQ,QAAO,MAAK,MAAM,KAAK,CAAC;GACpD;GACA,gBAAgB,QAAA;GAChB,aAAa,QAAA;GACb,YAAY,QAAA;EACd,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAyBM,OAzBN,WAyBM,EAxBJ,MAAK,QAAO,GACJA,KAAAA,MAAM,GAAA;IAGN,QAAA,SADR,UAAA,GAAA,mBAWM,OAXN,YAWM,CAPD,gBAAA,gBAAA,QAAA,KAAK,IAAG,KACX,CAAA,GACQ,QAAA,YADR,UAAA,GAAA,mBAKO,QALP,YAGC,KAED,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEF,mBAEM,OAAA,EAFA,OAAK,eAAA,EAAA,kCAAsC,QAAA,OAAM,CAAA,EAAA,GAAA,CACrD,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;IAGD,CAAA,QAAA,eADT,UAAA,GAAA,YAKE,2BAAA;;KAHC,kBAAgB,QAAA;KAChB,oBAAkB,QAAA;KAClB,MAAM,QAAA"}
+{"version":3,"file":"RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_createTextVNode","_toDisplayString","_createCommentVNode","_createElementVNode","_normalizeClass","_renderSlot","_createBlock","RuiFormTextDetail"],"sources":["../../../../../src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckboxGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue[]>({ default: () => [] });\n\nconst {\n  inline = false,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nfunction arrayIncludes(arr: readonly TValue[], value: unknown): boolean {\n  return Array.prototype.includes.call(arr, value);\n}\n\nprovide(RuiCheckboxGroupContextKey, {\n  isChecked: (value: unknown): boolean => arrayIncludes(get(modelValue), value),\n  toggle: (value: unknown, checked: boolean): void => {\n    const current = get(modelValue);\n    const present = arrayIncludes(current, value);\n    if (checked === present)\n      return;\n    if (checked)\n      set(modelValue, [...current, value as TValue]);\n    else\n      set(modelValue, current.filter(v => v !== value));\n  },\n  disabled: () => disabled,\n  color: () => color,\n  size: () => size,\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"label\"\n      class=\"text-rui-text text-sm/5 font-medium\"\n    >\n      {{ label }}\n      <span\n        v-if=\"required\"\n        class=\"text-rui-error\"\n      >\n        *\n      </span>\n    </div>\n    <div :class=\"{ 'flex between:ml-6 between:mr-0': inline }\">\n      <slot />\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,aAAaC,SAAqB,SAAA,YAAsB;EAmB9D,SAAS,cAAc,KAAwB,OAAyB;GACtE,OAAO,MAAM,UAAU,SAAS,KAAK,KAAK,KAAK;EACjD;EAEA,QAAQ,4BAA4B;GAClC,YAAY,UAA4B,cAAc,IAAI,UAAU,GAAG,KAAK;GAC5E,SAAS,OAAgB,YAA2B;IAClD,MAAM,UAAU,IAAI,UAAU;IAE9B,IAAI,YADY,cAAc,SAAS,KACvB,GACd;IACF,IAAI,SACF,IAAI,YAAY,CAAC,GAAG,SAAS,KAAe,CAAC;SAE7C,IAAI,YAAY,QAAQ,QAAO,MAAK,MAAM,KAAK,CAAC;GACpD;GACA,gBAAgB,QAAA;GAChB,aAAa,QAAA;GACb,YAAY,QAAA;EACd,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAyBM,OAzBNC,WAyBM,EAxBJ,MAAK,QAAO,GACJJ,KAAAA,MAAM,GAAA;IAGN,QAAA,SADRE,UAAA,GAAAC,mBAWM,OAXN,YAWM,CAPDE,gBAAAC,gBAAA,QAAA,KAAK,IAAG,KACX,CAAA,GACQ,QAAA,YADRJ,UAAA,GAAAC,mBAKO,QALP,YAGC,KAED,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEFK,mBAEM,OAAA,EAFA,OAAKC,eAAA,EAAA,kCAAsC,QAAA,OAAM,CAAA,EAAA,GAAA,CACrDC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;IAGD,CAAA,QAAA,eADTR,UAAA,GAAAS,YAKEC,2BAAA;;KAHC,kBAAgB,QAAA;KAChB,oBAAkB,QAAA;KAClB,MAAM,QAAA"}

package/dist/components/forms/field-defaults/RuiFieldDefaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFieldDefaults.js","names":[],"sources":["../../../../src/components/forms/field-defaults/RuiFieldDefaults.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type LabelPlacement, provideFieldDefaults } from '@/composables/defaults/field';\n\nexport interface FieldDefaultsProps {\n  labelPlacement?: LabelPlacement;\n}\n\ndefineOptions({\n  name: 'RuiFieldDefaults',\n});\n\nconst { labelPlacement } = defineProps<FieldDefaultsProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nprovideFieldDefaults(() => labelPlacement);\n</script>\n\n<template>\n  <slot />\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiFieldDefaults.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/field-defaults/RuiFieldDefaults.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type LabelPlacement, provideFieldDefaults } from '@/composables/defaults/field';\n\nexport interface FieldDefaultsProps {\n  labelPlacement?: LabelPlacement;\n}\n\ndefineOptions({\n  name: 'RuiFieldDefaults',\n});\n\nconst { labelPlacement } = defineProps<FieldDefaultsProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nprovideFieldDefaults(() => labelPlacement);\n</script>\n\n<template>\n  <slot />\n</template>\n"],"mappings":""}

package/dist/components/forms/field-defaults/RuiFieldDefaults.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFieldDefaults.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/forms/field-defaults/RuiFieldDefaults.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type LabelPlacement, provideFieldDefaults } from '@/composables/defaults/field';\n\nexport interface FieldDefaultsProps {\n  labelPlacement?: LabelPlacement;\n}\n\ndefineOptions({\n  name: 'RuiFieldDefaults',\n});\n\nconst { labelPlacement } = defineProps<FieldDefaultsProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nprovideFieldDefaults(() => labelPlacement);\n</script>\n\n<template>\n  <slot />\n</template>\n"],"mappings":";;;;;;;;EAiBA,2BAA2B,QAAA,cAAc;;GAIvC,OAAA,WAAQ,KAAA,QAAA,SAAA"}
+{"version":3,"file":"RuiFieldDefaults.vue_vue_type_script_setup_true_lang.js","names":["_renderSlot"],"sources":["../../../../src/components/forms/field-defaults/RuiFieldDefaults.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type LabelPlacement, provideFieldDefaults } from '@/composables/defaults/field';\n\nexport interface FieldDefaultsProps {\n  labelPlacement?: LabelPlacement;\n}\n\ndefineOptions({\n  name: 'RuiFieldDefaults',\n});\n\nconst { labelPlacement } = defineProps<FieldDefaultsProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nprovideFieldDefaults(() => labelPlacement);\n</script>\n\n<template>\n  <slot />\n</template>\n"],"mappings":";;;;;;;;EAiBA,2BAA2B,QAAA,cAAc;;GAIvC,OAAAA,WAAQ,KAAA,QAAA,SAAA"}

package/dist/components/forms/field-label/RuiFieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFieldLabel.js","names":[],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\n/**\n * The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n */\nexport interface FieldLabelProps {\n  text: string;\n  hidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  for?: string;\n  id?: string;\n}\n\ndefineOptions({\n  name: 'RuiFieldLabel',\n});\n\nconst {\n  text,\n  hidden = false,\n  required = false,\n  disabled = false,\n  for: forId = undefined,\n  id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst labelStyles = tv({\n  slots: {\n    root: 'block mb-1 text-sm leading-5 font-medium text-rui-text',\n    required: 'text-rui-error',\n  },\n  variants: {\n    hidden: {\n      true: { root: 'sr-only' },\n    },\n    disabled: {\n      true: { root: 'text-rui-text-disabled' },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n  <label\n    :id=\"id\"\n    :for=\"forId\"\n    :class=\"ui.root()\"\n    data-id=\"field-label\"\n  >\n    {{ text }}\n    <span\n      v-if=\"required\"\n      :class=\"ui.required()\"\n      aria-hidden=\"true\"\n    >\n      *\n    </span>\n  </label>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiFieldLabel.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\n/**\n * The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n */\nexport interface FieldLabelProps {\n  text: string;\n  hidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  for?: string;\n  id?: string;\n}\n\ndefineOptions({\n  name: 'RuiFieldLabel',\n});\n\nconst {\n  text,\n  hidden = false,\n  required = false,\n  disabled = false,\n  for: forId = undefined,\n  id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst labelStyles = tv({\n  slots: {\n    root: 'block mb-1 text-sm leading-5 font-medium text-rui-text',\n    required: 'text-rui-error',\n  },\n  variants: {\n    hidden: {\n      true: { root: 'sr-only' },\n    },\n    disabled: {\n      true: { root: 'text-rui-text-disabled' },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n  <label\n    :id=\"id\"\n    :for=\"forId\"\n    :class=\"ui.root()\"\n    data-id=\"field-label\"\n  >\n    {{ text }}\n    <span\n      v-if=\"required\"\n      :class=\"ui.required()\"\n      aria-hidden=\"true\"\n    >\n      *\n    </span>\n  </label>\n</template>\n"],"mappings":""}

package/dist/components/forms/field-label/RuiFieldLabel.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFieldLabel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\n/**\n * The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n */\nexport interface FieldLabelProps {\n  text: string;\n  hidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  for?: string;\n  id?: string;\n}\n\ndefineOptions({\n  name: 'RuiFieldLabel',\n});\n\nconst {\n  text,\n  hidden = false,\n  required = false,\n  disabled = false,\n  for: forId = undefined,\n  id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst labelStyles = tv({\n  slots: {\n    root: 'block mb-1 text-sm leading-5 font-medium text-rui-text',\n    required: 'text-rui-error',\n  },\n  variants: {\n    hidden: {\n      true: { root: 'sr-only' },\n    },\n    disabled: {\n      true: { root: 'text-rui-text-disabled' },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n  <label\n    :id=\"id\"\n    :for=\"forId\"\n    :class=\"ui.root()\"\n    data-id=\"field-label\"\n  >\n    {{ text }}\n    <span\n      v-if=\"required\"\n      :class=\"ui.required()\"\n      aria-hidden=\"true\"\n    >\n      *\n    </span>\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,cAAc,GAAG;GACrB,OAAO;IACL,MAAM;IACN,UAAU;GACZ;GACA,UAAU;IACR,QAAQ,EACN,MAAM,EAAE,MAAM,UAAU,EAC1B;IACA,UAAU,EACR,MAAM,EAAE,MAAM,yBAAyB,EACzC;GACF;EACF,CAAC;EAED,MAAM,KAAK,eAA+C,YAAY;GAAE,QAAK,QAAA;GAAG,UAAO,QAAA;EAAE,CAAC,CAAC;;GAIzF,OAAA,UAAA,GAAA,mBAcQ,SAAA;IAbL,IAAI,QAAA;IACJ,KAAK,QAAA;IACL,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IACf,WAAQ;GAEL,GAAA,CAAA,gBAAA,gBAAA,QAAA,IAAI,IAAG,KACV,CAAA,GACQ,QAAA,YADR,UAAA,GAAA,mBAMO,QAAA;;IAJJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;IACnB,eAAY;GACb,GAAA,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}
+{"version":3,"file":"RuiFieldLabel.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createTextVNode","_toDisplayString","_createCommentVNode"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\n/**\n * The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n */\nexport interface FieldLabelProps {\n  text: string;\n  hidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  for?: string;\n  id?: string;\n}\n\ndefineOptions({\n  name: 'RuiFieldLabel',\n});\n\nconst {\n  text,\n  hidden = false,\n  required = false,\n  disabled = false,\n  for: forId = undefined,\n  id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst labelStyles = tv({\n  slots: {\n    root: 'block mb-1 text-sm leading-5 font-medium text-rui-text',\n    required: 'text-rui-error',\n  },\n  variants: {\n    hidden: {\n      true: { root: 'sr-only' },\n    },\n    disabled: {\n      true: { root: 'text-rui-text-disabled' },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n  <label\n    :id=\"id\"\n    :for=\"forId\"\n    :class=\"ui.root()\"\n    data-id=\"field-label\"\n  >\n    {{ text }}\n    <span\n      v-if=\"required\"\n      :class=\"ui.required()\"\n      aria-hidden=\"true\"\n    >\n      *\n    </span>\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,cAAc,GAAG;GACrB,OAAO;IACL,MAAM;IACN,UAAU;GACZ;GACA,UAAU;IACR,QAAQ,EACN,MAAM,EAAE,MAAM,UAAU,EAC1B;IACA,UAAU,EACR,MAAM,EAAE,MAAM,yBAAyB,EACzC;GACF;EACF,CAAC;EAED,MAAM,KAAK,eAA+C,YAAY;GAAE,QAAK,QAAA;GAAG,UAAO,QAAA;EAAE,CAAC,CAAC;;GAIzF,OAAAA,UAAA,GAAAC,mBAcQ,SAAA;IAbL,IAAI,QAAA;IACJ,KAAK,QAAA;IACL,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IACf,WAAQ;GAELC,GAAAA,CAAAA,gBAAAC,gBAAA,QAAA,IAAI,IAAG,KACV,CAAA,GACQ,QAAA,YADRL,UAAA,GAAAC,mBAMO,QAAA;;IAJJ,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;IACnB,eAAY;GACb,GAAA,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}