@rotki/ui-library 3.0.0 → 3.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCategoryPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","RuiDialog","RuiMenu","_openBlock","_createBlock","_resolveDynamicComponent","_unref","_mergeProps","_isRef","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","RuiFieldLabel","_createCommentVNode","_createElementBlock","_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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsFA,MAAM,aAAaE,SAAmB,SAAA,YAAC;EACvC,MAAM,cAAcA,SAAmB,SAAC,QAAyB;EA+BjE,MAAM,OAAO;EAiBb,MAAM,SAAS,IAAa,KAAK;EACjC,MAAM,cAAc,IAAuB,MAAM;EACjD,MAAM,uBAAuB,IAAY,CAAC;EAC1C,MAAM,YAAY,IAA2B,UAAU;EAEvD,MAAM,UAAU,eAA+B,SAAS;EACxD,MAAM,YAAY,eAA+B,WAAW;EAC5D,MAAM,eAAe,eAAiC,cAAc;EACpE,MAAM,WAAW,eAA4B,UAAU;EACvD,MAAM,YAAY,IAAa,KAAK;EAEpC,MAAM,EAAE,YAAY,SAAS,YAAY;EACzC,MAAM,EAAE,UAAU,eAAe,wBAAwB,QAAA,qBAAqB,QAAA,eAAe;EAE7F,MAAM,SAAS,MAAM;EACrB,MAAM,cAAc,eAAe,mBAAmB;EAEtD,SAAS,gBAAgB,MAAqB;GAC5C,IAAI,QAAA,YACF,OAAO,QAAA,WAAW,IAAI;GACxB,IAAI,QAAA,iBAAiB,KAAA,GACnB,OAAO,OAAO,KAAK,QAAA,iBAAiB,EAAE;GACxC,OAAO;EACT;EAEA,MAAM,EACJ,gBACA,aACA,YACA,eACA,SACA,SACA,YACA,aACA,mBACA,0BACE,kBAAiC;GACnC,gBAAgB,QAAA;GAChB,YAAY;GACZ,cAAc,QAAA;GACd,aAAa,QAAA;GACb,SAAM,QAAA;GACN;GACA,QAAQ;GACR,kBAAkB,QAAA;GAClB,eAAe,QAAA;GACf,UAAO,QAAA;EACT,CAAC;EAED,MAAM,WAAW,eAAwB,IAAI,YAAY,QAAQ,QAAA,gBAAgB,CAAC,CAAC;EAEnF,MAAM,OAAO,eAAqC,IAAI,QAAQ,IAAI,UAAU,SAAU;;;;;EAMtF,MAAM,QAAQ,eAAmD,IAAI,QAAQ,IAAIC,oBAAYC,eAAQ;;;;;EAMrG,SAAS,mBAA4C;GACnD,OAAO;IACL,WAAW,QAAA,eAAe,aAAa,QAAA;IACvC,aAAa,QAAA,eAAe,eAAe;IAC3C,UAAU,QAAA,eAAe;IACzB,YAAY,QAAA,eAAe;IAC3B,OAAO,QAAA,eAAe,SAAS;GACjC;EACF;;;;;;;;;;EAWA,SAAS,iBAA0C;GACjD,OAAO;IACL,UAAU,IAAI,QAAQ,KAAK,KAAA;IAC3B,YAAY,EAAE,SAAS,OAAO;IAC9B,qBAAqB;IACrB,kBAAkB;IAClB,WAAW;IACX,WAAW,QAAA;IACX,SAAS;KAAE,WAAW,UAAU;KAAa,MAAM;IAAK;IACxD,YAAY,QAAA,eAAe;IAC3B,yBAAyB;IACzB,MAAM;GACR;EACF;EAEA,MAAM,aAAa,eACjB,IAAI,QAAQ,IAAI,iBAAiB,IAAI,eAAe,CAAC;EAEvD,MAAM,KAAK,eAAwD,qBAAqB;GACtF,OAAI,QAAA;GACJ,MAAM,IAAI,IAAI;EAChB,CAAC,CAAC;EAEF,MAAM,eAAe,eAAkC;GACrD,MAAM,QAAQ,IAAI,UAAU;GAC5B,IAAI,UAAU,KAAA,GACZ,OAAO,KAAA;GACT,OAAO,QAAA,MAAM,MAAK,SAAQ,cAAc,IAAI,MAAM,KAAK;EACzD,CAAC;EAED,MAAM,eAAe,eAAmC;GACtD,MAAM,WAAW,IAAI,YAAY;GACjC,OAAO,WAAW,QAAQ,QAAQ,IAAI,KAAA;EACxC,CAAC;EAED,MAAM,YAAY,wBAAwB,QAAA,cAAc;;;;;EAMxD,MAAM,UAAU,eAAwB,QAAA,cAAc,CAAC,IAAI,QAAQ,KAAK,CAAC,QAAA,YAAY,CAAC,QAAA,QAAQ;EAE9F,MAAM,WAAW,eAAwB,IAAI,MAAM,KAAK,IAAI,OAAO,CAAC;;;;;EAMpE,MAAM,YAAY,eAChB,QAAA,aAAa,IAAI,YAAY,MAAM,KAAA,KAAa,CAAC,QAAA,YAAY,CAAC,QAAA,QAAQ;EAExE,MAAM,cAAc,eAAiE,8BAA8B;GACjH,OAAI,QAAA;GACJ,UAAO,QAAA;GACP,UAAU,IAAI,QAAQ;GACtB,YAAY,IAAI,UAAU,KAAK,CAAC,IAAI,QAAQ;GAC5C,SAAS,IAAI,SAAS;GACtB,QAAQ,IAAI,MAAM;GAClB,UAAU,QAAA;GACV,WAAW,IAAI,SAAS;EAC1B,CAAC,CAAC;EAEF,MAAM,kBAAkB,eACtB,IAAI,WAAW,CAAC,CAAC,WAAU,UAAS,MAAM,aAAa,IAAI,cAAc,CAAC,CAAC;EAE7E,MAAM,WAAW,eAAwB,IAAI,IAAI,MAAM,aAAa,IAAI,SAAS,MAAM,UAAU;EACjG,MAAM,aAAa,eAAwB,IAAI,IAAI,MAAM,aAAa,IAAI,SAAS,MAAM,QAAQ;EAEjG,SAAS,MAAM,OAAe,KAAqB;GACjD,IAAI,QAAQ,GACV,OAAO;GACT,IAAI,QAAQ,KACV,OAAO;GACT,OAAO;EACT;EAEA,SAAS,OAAa;GACpB,IAAI,QAAA,UACF;GACF,IAAI,QAAQ,IAAI;EAClB;EAEA,SAAS,QAAc;GACrB,IAAI,QAAQ,KAAK;EACnB;EAEA,SAAS,QAAQ,OAAoB;GACnC,MAAM,SAAS,MAAM;GACrB,IAAI,EAAE,kBAAkB,mBACtB;GACF,IAAI,aAAa,OAAO,KAAK;GAC7B,IAAI,CAAC,IAAI,MAAM,GACb,KAAK;EACT;EAEA,SAAS,WAAW,MAAmB;GACrC,IAAI,QAAA,UACF;GACF,IAAI,YAAY,cAAc,IAAI,CAAC;GACnC,KAAK,UAAU,IAAI;GACnB,MAAM;EACR;EAEA,SAAS,iBAAuB;GAC9B,IAAI,YAAY,KAAA,CAAS;EAC3B;EAEA,SAAS,gBAAgB,UAA+B;GACtD,kBAAkB,QAAQ;GAC1B,IAAI,IAAI,IAAI,MAAM,SAChB,IAAI,WAAW,QAAQ;QAEvB,UAAU,QAAQ;EACtB;;;;;;EAOA,SAAS,UAAU,MAA+B;GAChD,IAAI,aAAa,IAAI;GACrB,eAAe;IACb,CAAC,SAAS,SAAS,IAAI,OAAO,IAAI,IAAI,SAAS,EAAA,EAAI,MAAM,EAAE,eAAe,KAAK,CAAC;GAClF,CAAC;EACH;EAEA,SAAS,SAAS,WAAyB;GACzC,MAAM,UAAU,IAAI,WAAW;GAC/B,IAAI,QAAQ,WAAW,GACrB;GACF,MAAM,OAAO,MAAM,IAAI,eAAe,IAAI,WAAW,QAAQ,SAAS,CAAC;GACvE,kBAAkB,QAAQ,KAAK,EAAE,YAAY,IAAI;EACnD;EAEA,SAAS,SAAS,WAAyB;GACzC,MAAM,QAAQ,IAAI,WAAW,CAAC,CAAC;GAC/B,IAAI,UAAU,GACZ;GACF,IAAI,sBAAsB,MAAM,IAAI,oBAAoB,IAAI,WAAW,QAAQ,CAAC,CAAC;EACnF;EAEA,SAAS,cAAoB;GAC3B,IAAI,IAAI,WAAW,CAAC,CAAC,WAAW,GAC9B;GACF,0BAA0B;GAC1B,IAAI,IAAI,IAAI,MAAM,SAChB,IAAI,WAAW,QAAQ;GACzB,UAAU,QAAQ;EACpB;EAEA,SAAS,oBAA0B;GACjC,MAAM,OAAO,IAAI,WAAW,CAAC,CAAC,IAAI,oBAAoB;GACtD,IAAI,SAAS,KAAA,GACX,WAAW,IAAI;EACnB;;;;;;EAOA,SAAS,kBAAwB;GAC/B,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,KAAK,GACzB;GACF,MAAM,OAAO,IAAI,WAAW,CAAC,CAAC;GAC9B,IAAI,SAAS,KAAA,GACX,WAAW,IAAI;EACnB;EAEA,SAAS,4BAAkC;GACzC,MAAM,QAAQ,IAAI,WAAW,CAAC,CAAC,WAAU,SAAQ,WAAW,IAAI,CAAC;GACjE,IAAI,sBAAsB,SAAS,IAAI,QAAQ,CAAC;EAClD;EAEA,SAAS,aAAmB;GAC1B,IAAI,IAAI,IAAI,MAAM,SAChB,IAAI,WAAW,UAAU;QAEzB,UAAU,MAAM;EACpB;EAEA,SAAS,+BAA+B,WAA+B,IAAkB;GACvF,IAAI,CAAC,WACH;GACF,eAAe;IACb,UAAU,cAAc,IAAI,IAAI,CAAC,EAAE,eAAe,EAAE,OAAO,UAAU,CAAC;GACxE,CAAC;EACH;EAGA,MAAM,sBAAsB;GAC1B,0BAA0B;EAC5B,CAAC;EAED,MAAM,uBAAuB,UAAU;GACrC,+BAA+B,IAAI,SAAS,GAAG,GAAG,OAAO,OAAO,OAAO;EACzE,CAAC;EAED,MAAM,kBAAkB,UAAU;GAChC,IAAI,SAAS,GACX,+BAA+B,IAAI,OAAO,GAAG,GAAG,OAAO,OAAO,OAAO;EACzE,CAAC;;;;;;;;EASD,SAAS,cAAc,OAAsB;GAC3C,IAAI,OAAO;IACT,sBAAsB;IACtB,IAAI,aAAa,MAAM;IACvB,IAAI,WAAW,UAAU;IACzB,0BAA0B;IAC1B,gBAAgB,IAAI,OAAO,IAAI,IAAI,YAAY,IAAI,IAAI,OAAO,EAAA,EAAI,MAAM,EAAE,eAAe,KAAK,CAAC,CAAC;GAClG,OACK;IACH,IAAI,aAAa,EAAE;IACnB,eAAe,IAAI,YAAY,CAAC,EAAE,MAAM,EAAE,eAAe,KAAK,CAAC,CAAC;GAClE;EACF;EAEA,MAAM,QAAQ,aAAa;;GAIzB,OAAAC,UAAA,GAAAC,YAgSYC,wBA/RLC,MAAA,KAAA,CAAK,GADZC,WAgSY;IA9RD,YAAAD,MAAA,MAAA;IAAA,uBAAA,OAAA,QAAA,OAAA,OAAA,WAAAE,MAAA,MAAA,IAAA,OAAM,QAAA,SAAA;GACFV,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,GAAKQ,MAAA,UAAA;GAAU,CAAA,GAAA;IAEvB,WAASG,SAoGX,EApGe,YAAK,CAC3BC,WAmGO,KAAA,QAAA,aAAAC,eAAAC,mBAAA;KAjGK;KAAK,QAAEN,MAAA,MAAA;KAAM,MAAQA,MAAA,YAAA;KAAc;KAAI,MAAQA,MAAA,YAAA;IAAY,CAAA,CAAA,SAiGhE,CA/FLO,mBA8FM,OAAA,EA9FA,OAAKC,eAAER,MAAA,WAAA,CAAW,CAAC,QAAO,CAAA,EAAA,GAAA;KAEtB,QAAA,SADRH,UAAA,GAAAC,YAOEW,uBAAA;;MALC,IAAE,GAAKT,MAAA,MAAA,EAAM;MACb,MAAM,QAAA;MACN,QAAQA,MAAA,SAAA,MAAS;MACjB,UAAU,QAAA;MACV,UAAU,QAAA;;;;;;;;KAEbO,mBA6EM,OA7ENN,WA6EM;MA5EA,SAAA;MAAJ,KAAI;MACJ,MAAK;MACL,WAAQ;MACP,OAAOD,MAAA,WAAA,CAAW,CAAC,UAAS;MAC5B,mBAAiB,QAAA,QAAK,GAAMA,MAAA,MAAA,EAAM,UAAW,KAAA;MAC9C,iBAAc;MACb,iBAAeA,MAAA,MAAA,IAAM,GAAMA,MAAA,MAAA,EAAM,UAAW,KAAA;MAC5C,iBAAeA,MAAA,MAAA;MACf,iBAAe,QAAA,YAAY,KAAA;MAC3B,iBAAgB,QAAA,YAAQ,CAAKA,MAAA,OAAA,KAAY,KAAA;MACzC,iBAAe,QAAA,YAAY,KAAA;MAC3B,gBAAcA,MAAA,QAAA,KAAY,KAAA;MAC1B,aAAW,QAAA,WAAW,KAAA;KACf,GAAA,QAAA,WAAQ,CAAA,IAAQA,MAAA,iBAAA,CAAiB,CAAC,KAAK,GAAA;MAC9C,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;MACrB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;;MAGdA,MAAA,YAAA,KAAY,CAAKA,MAAA,QAAA,KAAYP,KAAAA,OAAO,aAD5CI,UAAA,GAAAc,mBAaO,QAAA;;OAXL,WAAQ;OACP,OAAKH,eAAER,MAAA,WAAA,CAAW,CAAC,UAAS,CAAA;MAE7BI,GAAAA,CAAAA,WAGE,KAAA,QAAA,qBAAAC,eAAAC,mBAAA,EAAA,MADgBN,MAAA,YAAA,EAAY,CAAA,CAAA,CAAA,GAE9BI,WAGE,KAAA,QAAA,aAAAC,eAAAC,mBAAA,EAAA,MADgBN,MAAA,YAAA,EAAY,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;MAGhCO,mBAeE,SAAA;OAdI,SAAA;OAAJ,KAAI;OACJ,WAAQ;OACP,OAAOP,MAAA,QAAA,IAAW,YAAA,QAAgBP,KAAAA,OAAO,aAAaO,MAAA,YAAA,IAAY,KAAUA,MAAA,YAAA,KAAY;OACxF,aAAaA,MAAA,QAAA,IAAW,QAAA,cAAW;OACnC,UAAQ,CAAGA,MAAA,OAAA;OACX,UAAU,QAAA;OACV,gBAAcA,MAAA,QAAA,KAAY,KAAA;OAC1B,mBAAiB,QAAA,QAAK,GAAMA,MAAA,MAAA,EAAM,UAAW,KAAA;OAC9C,OAAKQ,eAAA,CAAC,iCAA+B,CAC5BR,MAAA,WAAA,CAAW,CAAC,MAAK,GAAA,CAAKA,MAAA,OAAA,KAAO,gBAAA,CAAA,CAAA;OACrC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAQ,MAAM;OACrB,WAAO;QAAe,OAAA,OAAA,OAAA,KAAAY,SAAAC,eAAA,WAAA,UAAS,MAAA,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;QACR,OAAA,OAAA,OAAA,KAAAD,SAAAC,eAAA,WAAA,gBAAe,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;QACzB,OAAA,OAAA,OAAA,KAAAD,UAAA,WAAA,MAAK,GAAA,CAAA,KAAA,CAAA;;;MAGbZ,MAAA,SAAA,KADRH,UAAA,GAAAc,mBAUO,QAAA;;OARL,WAAQ;OACP,OAAKH,eAAA;QAAGR,MAAA,WAAA,CAAW,CAAC,MAAK;QAAIA,MAAA,OAAA,KAAO;QAAA,EAAA,QAAA,CAA2B,QAAA,MAAK;OAAA,CAAA;OACpE,SAAK,OAAA,OAAA,OAAA,KAAAa,eAAA,WAAe,eAAc,GAAA,CAAA,QAAA,SAAA,CAAA;MAEnCC,GAAAA,CAAAA,YAGEC,iBAAA;OAFA,MAAK;OACL,MAAK;;MAGTR,mBASO,QAAA;OARL,WAAQ;OACP,OAAKC,eAAER,MAAA,WAAA,CAAW,CAAC,YAAW,CAAA;MAE/Bc,GAAAA,CAAAA,YAIEC,iBAAA;OAHC,OAAKP,eAAER,MAAA,WAAA,CAAW,CAAC,KAAI,CAAA;OACvB,MAAM,QAAA,QAAK,KAAA;OACZ,MAAK;;MAID,QAAA,WADRH,UAAA,GAAAC,YAMEkB,qBAAA;;OAJC,OAAKR,eAAER,MAAA,WAAA,CAAW,CAAC,SAAQ,CAAA;OAC5B,OAAM;OACN,WAAU;OACV,SAAQ;;MAEVO,mBAA4C,YAAA,EAAjC,OAAKC,eAAER,MAAA,WAAA,CAAW,CAAC,SAAQ,CAAA,EAAA,GAAA,MAAA,CAAA;;KAG/B,CAAA,QAAA,eADTH,UAAA,GAAAC,YAMEmB,2BAAA;;MAJA,OAAM;MACL,kBAAgB,QAAA;MAChB,oBAAkB,QAAA;MAClB,MAAM,QAAA;;;;;;;IAMf,SAAAd,cAmLM,CAnLNI,mBAmLM,OAAA;KAlLH,IAAE,GAAKP,MAAA,MAAA,EAAM;KACb,OAAKQ,eAAER,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,IAAI,EAAA,CAAA,CAAA;KAC5C,WAAQ;;KAKAA,MAAA,QAAA,KAAYP,KAAAA,OAAO,UAD3BI,UAAA,GAAAc,mBAoBM,OAAA;;MAlBH,OAAKH,eAAER,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;KAEjBI,GAAAA,CAAAA,WAIO,KAAA,QAAA,UAAA,CAAA,SAAA,CAHLG,mBAEM,OAAA,EAFA,OAAKC,eAAER,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA,EAChB,GAAAkB,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,GAIJ,QAAA,cAAclB,MAAA,QAAA,KADtBH,UAAA,GAAAC,YAUEqB,sBAAA;;MARS,YAAA,YAAA;MAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,YAAW,QAAA;MACnB,OAAKX,eAAER,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,MAAM,CAAA;MAC5B,aAAa,QAAA;MACb,OAAO,QAAA;MACR,gBAAa;MACb,gBAAA;MACA,WAAA;MACA,WAAQ;;;;;;;KAIZO,mBA2IM,OAAA,EA3IA,OAAKC,eAAER,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA,EAAA,GAAA,CAElBoB,eAAAb,mBAwCM,OAAA;MAtCA,SAAA;MAAJ,KAAI;MACH,OAAKC,eAAER,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,IAAI,EAAA,CAAA,CAAA;MAC5C,MAAK;MACL,oBAAiB;MAChB,cAAY,QAAA;MACZ,yBAAuBA,MAAA,WAAA,MAAW,UAAeA,MAAA,eAAA,KAAe,IAAA,GAAWA,MAAA,MAAA,EAAM,OAAQA,MAAA,eAAA,MAAoB,KAAA;MAC9G,UAAS;MACT,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,YAAA,QAAW;MAClB,WAAO;OAAe,OAAA,OAAA,OAAA,KAAAY,SAAAC,eAAA,WAAA,SAAQ,CAAA,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;OACV,OAAA,QAAA,OAAA,MAAAD,SAAAC,eAAA,WAAA,SAAQ,EAAA,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,IAAA,CAAA;OACL,OAAA,QAAA,OAAA,MAAAD,SAAAC,eAAA,WAAA,YAAW,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;OACX,OAAA,QAAA,OAAA,MAAAD,SAAAC,eAAA,WAAA,YAAW,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;OACZ,OAAA,QAAA,OAAA,MAAAD,SAAAC,eAAA,WAAAb,MAAA,iBAAA,CAAiB,CAACA,MAAA,WAAA,CAAW,CAAA,EAAA,EAAK,YAAQ,IAAA,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;OAC3C,OAAA,QAAA,OAAA,MAAAY,SAAAC,eAAA,WAAAb,MAAA,iBAAA,CAAiB,CAACA,MAAA,WAAA,CAAW,CAACA,MAAA,WAAA,CAAW,CAAC,SAAM,EAAA,EAAO,YAAQ,IAAA,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,KAAA,CAAA;;KAErFH,GAAAA,EAAAA,UAAA,IAAA,GAAAc,mBAqBYU,UAAA,MAAAC,WApBetB,MAAA,WAAA,IAAjB,OAAO,UAAK;MADtB,OAAAH,UAAA,GAAAC,YAqBYyB,mBAAA;OAnBT,IAAE,GAAKvB,MAAA,MAAA,EAAM,OAAQ;OACrB,KAAK,MAAM,YAAQ;OACpB,MAAK;OACL,SAAQ;OACP,MAAM,QAAA,QAAK,OAAU,KAAA;OACrB,QAAQ,MAAM,aAAaA,MAAA,cAAA;OAC3B,iBAAe,MAAM,aAAaA,MAAA,cAAA;OACnC,UAAS;OACR,oBAAkBA,MAAA,WAAA,MAAW,UAAe,UAAUA,MAAA,eAAA;OACtD,iBAAe,MAAM,YAAQ;OAC7B,UAAK,WAAE,gBAAgB,MAAM,QAAQ;;OAEtC,SAAAG,cAMO,CANPC,WAMO,KAAA,QAAA,YANPH,WAMO,EAAA,SAAA,KAAA,GAAA;QAAA,QAJa,MAAM,aAAaD,MAAA,cAAA;QAAc,UAAY,MAAM;QAAQ,OAAS,MAAM;QAAK,OAAS,MAAM;OAAK,CAAA,SAIhH,CAFLO,mBAA+C,QAA/C,YAA+CW,gBAArB,MAAM,KAAK,GAAA,CAAA,GACrCX,mBAAsD,QAAA,EAA/C,OAAKC,eAAER,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA,EAAO,GAAAkB,gBAAA,MAAM,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;KApCxC,CAAA,GAAA,GAAA,EAAA,GAAA,IAAA,UAAA,GAAA,CAAA,CAAAM,OAAAxB,MAAA,QAAA,CAAQ,CAAA,CAAA,GA0ClBoB,eAAAb,mBA6FM,OAAA;MA3FA,SAAA;MAAJ,KAAI;MACH,OAAKC,eAAER,MAAA,EAAA,CAAE,CAAC,OAAM,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,MAAM,EAAA,CAAA,CAAA;MAChD,MAAK;MACJ,cAAYA,MAAA,cAAA,KAAkB,QAAA;MAC9B,yBAAuBA,MAAA,WAAA,MAAW,YAAA,CAAkBA,MAAA,OAAA,IAAO,GAAMA,MAAA,MAAA,EAAM,OAAQA,MAAA,oBAAA,MAAyB,KAAA;MACzG,UAAS;MACT,WAAQ;MACP,SAAK,OAAA,QAAA,OAAA,OAAA,WAAE,YAAA,QAAW;MAClB,WAAO;OAAe,OAAA,QAAA,OAAA,MAAAY,SAAAC,eAAA,WAAA,SAAQ,CAAA,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;OACV,OAAA,QAAA,OAAA,MAAAD,SAAAC,eAAA,WAAA,SAAQ,EAAA,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,IAAA,CAAA;OACN,OAAA,QAAA,OAAA,MAAAD,SAAAC,eAAA,WAAA,WAAU,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;OACV,OAAA,QAAA,OAAA,MAAAD,SAAAC,eAAA,WAAA,qBAAA,QAAoB,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;OACrB,OAAA,QAAA,OAAA,MAAAD,SAAAC,eAAA,WAAA,qBAAA,QAAuBb,MAAA,WAAA,CAAW,CAAC,SAAM,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,KAAA,CAAA;OACvC,OAAA,QAAA,OAAA,MAAAY,SAAAC,eAAA,WAAA,kBAAiB,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;OACjB,OAAA,QAAA,OAAA,MAAAD,SAAAC,eAAA,WAAA,kBAAiB,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;;KAEzBb,GAAAA,CAAAA,MAAA,IAAA,MAAI,WAAgBA,MAAA,UAAA,KAClCH,UAAA,GAAAc,mBAWS,UAAA;;MAVP,MAAK;MACJ,OAAKH,eAAER,MAAA,EAAA,CAAE,CAAC,WAAU,CAAA;MACrB,WAAQ;MACP,SAAK,OAAA,QAAA,OAAA,OAAA,WAAE,WAAU;KAElBc,GAAAA,CAAAA,YAGEC,iBAAA;MAFA,MAAK;MACL,MAAK;KAEPR,CAAAA,GAAAA,mBAA6C,QAAA,MAAAW,gBAApClB,MAAA,cAAA,KAAkB,QAAA,QAAQ,GAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAK/BA,MAAA,OAAA,IADRI,WAOO,KAAA,QAAA,SAAA,CAAA,SAAA,CAHLG,mBAEM,OAAA,EAFA,OAAKC,eAAER,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA,EAChB,GAAAkB,gBAAA,QAAA,SAAS,GAAA,CAAA,CAAA,GAAA,KAAA,GAAA,CAAA,KAIhBrB,UAAA,IAAA,GAAAc,mBAkDWU,UAAA,EAAA,KAAA,EAAA,GAAAC,WAjDKtB,MAAA,UAAA,IAAP,QAAG;MAEJ,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,IAAI,SAAI,WAAA,KAAqB,IAAI,aAAQ,KAAU,IAAI,QAAA,GAAA,CAGrD,IAAI,SAAI,YADhBH,UAAA,GAAAc,mBAMM,OAAA;;OAJH,OAAKH,eAAER,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA;OACpB,MAAK;MAEF,GAAAkB,gBAAA,IAAI,QAAQ,GAAA,CAAA,MAEjBrB,UAAA,GAAAC,YAqCYyB,mBAAA;;OAnCT,IAAE,GAAKvB,MAAA,MAAA,EAAM,OAAQ,IAAI;OAC1B,MAAK;OACL,SAAQ;OACP,MAAM,QAAA,QAAK,OAAU,KAAA;OACrB,QAAQA,MAAA,UAAA,CAAU,CAAC,IAAI,IAAI;OAC3B,iBAAeA,MAAA,UAAA,CAAU,CAAC,IAAI,IAAI;OACnC,UAAS;OACR,oBAAkBA,MAAA,WAAA,MAAW,YAAiB,IAAI,UAAUA,MAAA,oBAAA;OAC5D,OAAKQ,eAAA,GAAKR,MAAA,EAAA,CAAE,CAAC,YAAW,IAAKA,MAAA,WAAA,MAAW,YAAiB,IAAI,UAAUA,MAAA,oBAAA,KAAoB,CAAKA,MAAA,UAAA,CAAU,CAAC,IAAI,IAAI,EAAA,CAAA;OACnH,UAAK,WAAE,WAAW,IAAI,IAAI;;OAW3B,SAAAG,cAKO,CALPC,WAKO,KAAA,QAAA,QALPH,WAKO,EAAA,SAAA,KAAA,GAAA;QAAA,QAHa,IAAI,UAAUD,MAAA,oBAAA;QAAoB,MAAQ,IAAI;QAAI,UAAYA,MAAA,UAAA,CAAU,CAAC,IAAI,IAAI;OAAA,CAAA,SAG9F,CADF0B,gBAAAR,gBAAAlB,MAAA,OAAA,CAAO,CAAC,IAAI,IAAI,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;MAZbP,GAAAA,CAAAA,KAAAA,OAAM,kBAAA;OACX,MAAA;OAED,IAAAU,cAGE,CAHFC,WAGE,KAAA,QAAA,gBAHFH,WAGE,EAAA,SAAA,KAAA,GAAA;QAAA,QADkB,IAAI,UAAUD,MAAA,oBAAA;QAAoB,MAAQ,IAAI;QAAI,UAAYA,MAAA,UAAA,CAAU,CAAC,IAAI,IAAI;OAAA,CAAA,CAAA,CAAA,CAAA;;MAU/FP,IAAAA,KAAAA,GAAAA,KAAAA,OAAM,iBAAA;OACX,MAAA;OAED,IAAAU,cAGE,CAHFC,WAGE,KAAA,QAAA,eAHFH,WAGE,EAAA,SAAA,KAAA,GAAA;QAAA,QADkB,IAAI,UAAUD,MAAA,oBAAA;QAAoB,MAAQ,IAAI;QAAI,UAAYA,MAAA,UAAA,CAAU,CAAC,IAAI,IAAI;OAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;KAvFnG,CAAA,GAAA,GAAA,EAAA,GAAA,IAAA,UAAA,GAAA,CAAA,CAAAwB,OAAAxB,MAAA,UAAA,CAAU,CAAA,CAAA,CAAA,GAAA,CAAA;KAgGdP,KAAAA,OAAO,UADfI,UAAA,GAAAc,mBAQM,OAAA;;MANH,OAAKH,eAAER,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;KAEjBI,GAAAA,CAAAA,WAGE,KAAA,QAAA,UAAAC,eAAAC,mBAAA,EADU,MAAK,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}
+{"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 { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiCategoryPickerClassNames {\n  root?: VueClassValue;\n  rail?: VueClassValue;\n  detail?: VueClassValue;\n  search?: VueClassValue;\n}\n\nexport type CategoryPickerBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport interface RuiCategoryPickerProps<TValue, TItem> {\n  /** The full catalogue of selectable items. */\n  items: TItem[];\n  /** Resolve an item's category label. Takes precedence over `categoryAttr`. */\n  categoryOf?: (item: TItem) => string;\n  /** Resolve an item's category from one of its own properties. */\n  categoryAttr?: keyof TItem;\n  /** Property whose value becomes the model value. Omit to use the item itself. */\n  keyAttr?: KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>;\n  /** Property that produces an item's display text. */\n  textAttr?: keyof TItem;\n  /** Field label, and the title of the mobile sheet. */\n  label?: string;\n  /** Placeholder shown in the field while it is empty or being searched. */\n  placeholder?: string;\n  /** Allow filtering: type in the field (desktop) or the sheet's search box (mobile). */\n  searchable?: boolean;\n  /**\n   * Custom predicate. Receives the resolved category label as the third\n   * argument, matching the `RuiAutoComplete` filter signature.\n   */\n  filter?: (item: TItem, query: string, category: string) => boolean;\n  /** Show the synthetic \"All\" pseudo-category as the first rail entry. */\n  showAll?: boolean;\n  /** Label for the \"All\" pseudo-category. */\n  allLabel?: string;\n  /** Text shown when no item matches the current search. */\n  emptyText?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  dense?: boolean;\n  clearable?: boolean;\n  loading?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  /** Marks the trigger field as required (renders the asterisk). */\n  required?: boolean;\n  /** Validation errors rendered under the trigger field. */\n  errorMessages?: string | string[];\n  /** Success messages rendered under the trigger field. */\n  successMessages?: string | string[];\n  /** Hint rendered under the trigger field. */\n  hint?: string;\n  /** The line under the trigger field for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  /** Below this breakpoint the picker collapses to a single-pane drill-in. */\n  mobileBreakpoint?: CategoryPickerBreakpoint;\n  /** Forwarded to the mobile bottom-sheet (`RuiDialog`). */\n  dialogOptions?: DialogProps;\n  classNames?: RuiCategoryPickerClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCategoryPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue>();\nconst searchInput = defineModel<string>('search', { default: '' });\n\nconst {\n  items,\n  categoryOf = undefined,\n  categoryAttr = undefined,\n  keyAttr = undefined,\n  textAttr = undefined,\n  label = 'Select',\n  placeholder = 'Search',\n  searchable = true,\n  filter = undefined,\n  showAll = true,\n  allLabel = 'All',\n  emptyText = 'No results',\n  disabled = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  loading = false,\n  labelPlacement = undefined,\n  required = false,\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n  details = undefined,\n  hideDetails = false,\n  mobileBreakpoint = 'md',\n  dialogOptions = undefined,\n  classNames = undefined,\n} = defineProps<RuiCategoryPickerProps<TValue, TItem>>();\n\nconst emit = defineEmits<{\n  select: [item: TItem];\n}>();\n\ndefineSlots<{\n  'activator'?: (props: { attrs: { onClick?: () => void; onMouseover?: () => void; onMouseleave?: () => void }; isOpen: boolean; open: () => void; item: TItem | undefined; text: string | undefined }) => any;\n  'selection'?: (props: { item: TItem }) => any;\n  'selection.prepend'?: (props: { item: TItem }) => any;\n  'category'?: (props: { category: string | null; label: string; active: boolean; count: number }) => any;\n  'item'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'item.prepend'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'item.append'?: (props: { item: TItem; active: boolean; selected: boolean }) => any;\n  'empty'?: () => any;\n  'header'?: () => any;\n  'footer'?: (props: { close: () => void }) => any;\n}>();\n\nconst isOpen = ref<boolean>(false);\nconst focusedPane = ref<'rail' | 'detail'>('rail');\nconst highlightedItemIndex = ref<number>(0);\nconst drillStep = ref<'category' | 'detail'>('category');\n\nconst railRef = useTemplateRef<HTMLDivElement>('railRef');\nconst detailRef = useTemplateRef<HTMLDivElement>('detailRef');\nconst activatorRef = useTemplateRef<HTMLInputElement>('activatorRef');\nconst fieldRef = useTemplateRef<HTMLElement>('fieldRef');\nconst isHovered = ref<boolean>(false);\n\nconst { focused } = useFocus(activatorRef);\nconst { hasError, hasSuccess } = useFormTextDetail(() => errorMessages, () => successMessages);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst baseId = useId();\nconst breakpoints = useBreakpoints(breakpointsTailwind);\n\nfunction resolveCategory(item: TItem): string {\n  if (categoryOf)\n    return categoryOf(item);\n  if (categoryAttr !== undefined)\n    return String(item[categoryAttr] ?? '');\n  return '';\n}\n\nconst {\n  activeCategory,\n  detailItems,\n  detailRows,\n  getIdentifier,\n  getText,\n  isEmpty,\n  isSelected,\n  railEntries,\n  setActiveCategory,\n  syncActiveToSelection,\n} = useCategoryPicker<TValue, TItem>({\n  allLabel: () => allLabel,\n  categoryOf: resolveCategory,\n  filter: () => filter,\n  items: () => items,\n  keyAttr,\n  modelValue,\n  search: searchInput,\n  searchable: () => searchable,\n  showAll: () => showAll,\n  textAttr,\n});\n\nconst isMobile = computed<boolean>(() => get(breakpoints.smaller(mobileBreakpoint)));\n\nconst mode = computed<'twoPane' | 'drill'>(() => (get(isMobile) ? 'drill' : 'twoPane'));\n\n/**\n * Desktop anchors an outside-click popover under the field (RuiMenu); narrow\n * width shows a full-width bottom sheet (RuiDialog).\n */\nconst shell = computed<typeof RuiMenu | typeof RuiDialog>(() => (get(isMobile) ? RuiDialog : RuiMenu));\n\n/**\n * The bottom sheet's props. Each shell is given only its own props, so the\n * other component's never leak through as attributes.\n */\nfunction dialogShellProps(): Record<string, unknown> {\n  return {\n    ariaLabel: dialogOptions?.ariaLabel ?? label,\n    bottomSheet: dialogOptions?.bottomSheet ?? true,\n    maxWidth: dialogOptions?.maxWidth,\n    persistent: dialogOptions?.persistent,\n    width: dialogOptions?.width ?? '100%',\n  };\n}\n\n/**\n * The popover's props. It anchors to the field box rather than the wrapper, so\n * it sits directly under the input instead of below the reserved details row,\n * and drops the menu's default vertical padding so the popover box equals the\n * panel: the size middleware caps the panel to the available height, and any\n * extra chrome padding would push the popover past the viewport edge. The\n * popover is a dialog, as the activator's `aria-haspopup` says: it holds a\n * tablist and a listbox, which a `menu` may not contain.\n */\nfunction menuShellProps(): Record<string, unknown> {\n  return {\n    anchorEl: get(fieldRef) ?? undefined,\n    classNames: { content: 'py-0' },\n    closeOnContentClick: false,\n    disableAutoFocus: true,\n    fullWidth: true,\n    menuLabel: label,\n    options: { placement: Placement.bottomStart, size: true },\n    persistent: dialogOptions?.persistent,\n    persistOnActivatorClick: true,\n    role: 'dialog',\n  };\n}\n\nconst shellProps = computed<Record<string, unknown>>(() =>\n  get(isMobile) ? dialogShellProps() : menuShellProps());\n\nconst ui = computed<ReturnType<typeof categoryPickerStyles>>(() => categoryPickerStyles({\n  dense,\n  mode: get(mode),\n}));\n\nconst selectedItem = computed<TItem | undefined>(() => {\n  const value = get(modelValue);\n  if (value === undefined)\n    return undefined;\n  return items.find(item => getIdentifier(item) === value);\n});\n\nconst selectedText = computed<string | undefined>(() => {\n  const selected = get(selectedItem);\n  return selected ? getText(selected) : undefined;\n});\n\nconst placement = useLabelPlacement(() => labelPlacement);\n\n/**\n * Desktop lets the user type in the field itself (no separate search box);\n * narrow width keeps a read-only trigger that opens the sheet's own search.\n */\nconst canType = computed<boolean>(() => searchable && !get(isMobile) && !readOnly && !disabled);\n\nconst isTyping = computed<boolean>(() => get(isOpen) && get(canType));\n\n/**\n * Drives both the clear button itself and the room the selection overlay has\n * to leave for it, so the two can never disagree.\n */\nconst showClear = computed<boolean>(() =>\n  clearable && get(selectedItem) !== undefined && !disabled && !readOnly);\n\nconst activatorUi = computed<ReturnType<typeof categoryPickerActivatorStyles>>(() => categoryPickerActivatorStyles({\n  dense,\n  disabled,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n  hovered: get(isHovered),\n  opened: get(isOpen),\n  readonly: readOnly,\n  withClear: get(showClear),\n}));\n\nconst activeRailIndex = computed<number>(() =>\n  get(railEntries).findIndex(entry => entry.category === get(activeCategory)));\n\nconst showRail = computed<boolean>(() => get(mode) === 'twoPane' || get(drillStep) === 'category');\nconst showDetail = computed<boolean>(() => get(mode) === 'twoPane' || get(drillStep) === 'detail');\n\nfunction clamp(value: number, max: number): number {\n  if (value < 0)\n    return 0;\n  if (value > max)\n    return max;\n  return value;\n}\n\nfunction open(): void {\n  if (disabled)\n    return;\n  set(isOpen, true);\n}\n\nfunction close(): void {\n  set(isOpen, false);\n}\n\nfunction onInput(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n  set(searchInput, target.value);\n  if (!get(isOpen))\n    open();\n}\n\nfunction selectItem(item: TItem): void {\n  if (readOnly)\n    return;\n  set(modelValue, getIdentifier(item));\n  emit('select', item);\n  close();\n}\n\nfunction clearSelection(): void {\n  set(modelValue, undefined);\n}\n\nfunction onCategoryClick(category: string | null): void {\n  setActiveCategory(category);\n  if (get(mode) === 'drill')\n    set(drillStep, 'detail');\n  else\n    focusPane('detail');\n}\n\n/**\n * Moves focus to one of the panes. The focus call prevents scrolling because\n * the panes sit inside a teleported popover, and without it the browser\n * scrolls the page behind to reveal the pane.\n */\nfunction focusPane(pane: 'rail' | 'detail'): void {\n  set(focusedPane, pane);\n  nextTick(() => {\n    (pane === 'rail' ? get(railRef) : get(detailRef))?.focus({ preventScroll: true });\n  });\n}\n\nfunction moveRail(direction: 1 | -1): void {\n  const entries = get(railEntries);\n  if (entries.length === 0)\n    return;\n  const next = clamp(get(activeRailIndex) + direction, entries.length - 1);\n  setActiveCategory(entries[next]?.category ?? null);\n}\n\nfunction moveItem(direction: 1 | -1): void {\n  const total = get(detailItems).length;\n  if (total === 0)\n    return;\n  set(highlightedItemIndex, clamp(get(highlightedItemIndex) + direction, total - 1));\n}\n\nfunction enterDetail(): void {\n  if (get(detailItems).length === 0)\n    return;\n  resetHighlightToSelection();\n  if (get(mode) === 'drill')\n    set(drillStep, 'detail');\n  focusPane('detail');\n}\n\nfunction selectHighlighted(): void {\n  const item = get(detailItems)[get(highlightedItemIndex)];\n  if (item !== undefined)\n    selectItem(item);\n}\n\n/**\n * Enter from the field commits the best match for the current query, so a\n * type-to-pick flow (type a few letters, press Enter) works without leaving\n * the input. Does nothing when the field is empty.\n */\nfunction selectTopResult(): void {\n  if (!get(searchInput).trim())\n    return;\n  const item = get(detailItems)[0];\n  if (item !== undefined)\n    selectItem(item);\n}\n\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=\"detailsMode !== 'hidden'\"\n            :details=\"detailsMode\"\n            :error-messages=\"errorMessages\"\n            :success-messages=\"successMessages\"\n            :hint=\"hint\"\n          />\n        </div>\n      </slot>\n    </template>\n\n    <div\n      :id=\"`${baseId}-panel`\"\n      :class=\"ui.root({ class: cn(classNames?.root) })\"\n      data-id=\"panel\"\n    >\n      <!-- On desktop the field itself is the search input, so the panel only\n           needs its own search box in the mobile sheet. -->\n      <div\n        v-if=\"isMobile || $slots.header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\">\n          <div :class=\"ui.title()\">\n            {{ label }}\n          </div>\n        </slot>\n        <RuiTextField\n          v-if=\"searchable && isMobile\"\n          v-model=\"searchInput\"\n          :class=\"cn(classNames?.search)\"\n          :placeholder=\"placeholder\"\n          :dense=\"dense\"\n          prepend-icon=\"lu-search\"\n          details=\"hidden\"\n          clearable\n          data-id=\"search\"\n        />\n      </div>\n\n      <div :class=\"ui.body()\">\n        <!-- Category rail (master) -->\n        <div\n          v-show=\"showRail\"\n          ref=\"railRef\"\n          :class=\"ui.rail({ class: cn(classNames?.rail) })\"\n          role=\"tablist\"\n          aria-orientation=\"vertical\"\n          :aria-label=\"label\"\n          :aria-activedescendant=\"focusedPane === 'rail' && activeRailIndex >= 0 ? `${baseId}-cat-${activeRailIndex}` : undefined\"\n          tabindex=\"0\"\n          data-id=\"rail\"\n          @focus=\"focusedPane = 'rail'\"\n          @keydown.down.prevent=\"moveRail(1)\"\n          @keydown.up.prevent=\"moveRail(-1)\"\n          @keydown.right.prevent=\"enterDetail()\"\n          @keydown.enter.prevent=\"enterDetail()\"\n          @keydown.home.prevent=\"setActiveCategory(railEntries[0]?.category ?? null)\"\n          @keydown.end.prevent=\"setActiveCategory(railEntries[railEntries.length - 1]?.category ?? null)\"\n        >\n          <RuiButton\n            v-for=\"(entry, index) in railEntries\"\n            :id=\"`${baseId}-cat-${index}`\"\n            :key=\"entry.category ?? '__all__'\"\n            role=\"tab\"\n            variant=\"list\"\n            :size=\"dense ? 'sm' : undefined\"\n            :active=\"entry.category === activeCategory\"\n            :aria-selected=\"entry.category === activeCategory\"\n            tabindex=\"-1\"\n            :data-highlighted=\"focusedPane === 'rail' && index === activeRailIndex\"\n            :data-category=\"entry.category ?? '__all__'\"\n            @click=\"onCategoryClick(entry.category)\"\n          >\n            <slot\n              name=\"category\"\n              v-bind=\"{ active: entry.category === activeCategory, category: entry.category, count: entry.count, label: entry.label }\"\n            >\n              <span class=\"truncate\">{{ entry.label }}</span>\n              <span :class=\"ui.railCount()\">{{ entry.count }}</span>\n            </slot>\n          </RuiButton>\n        </div>\n\n        <!-- Detail pane -->\n        <div\n          v-show=\"showDetail\"\n          ref=\"detailRef\"\n          :class=\"ui.detail({ class: cn(classNames?.detail) })\"\n          role=\"listbox\"\n          :aria-label=\"activeCategory ?? allLabel\"\n          :aria-activedescendant=\"focusedPane === 'detail' && !isEmpty ? `${baseId}-opt-${highlightedItemIndex}` : undefined\"\n          tabindex=\"0\"\n          data-id=\"detail\"\n          @focus=\"focusedPane = 'detail'\"\n          @keydown.down.prevent=\"moveItem(1)\"\n          @keydown.up.prevent=\"moveItem(-1)\"\n          @keydown.left.prevent=\"backToRail()\"\n          @keydown.home.prevent=\"highlightedItemIndex = 0\"\n          @keydown.end.prevent=\"highlightedItemIndex = detailItems.length - 1\"\n          @keydown.enter.prevent=\"selectHighlighted()\"\n          @keydown.space.prevent=\"selectHighlighted()\"\n        >\n          <template v-if=\"mode === 'drill' && showDetail\">\n            <button\n              type=\"button\"\n              :class=\"ui.backButton()\"\n              data-id=\"back\"\n              @click=\"backToRail()\"\n            >\n              <RuiIcon\n                name=\"lu-chevron-left\"\n                size=\"18\"\n              />\n              <span>{{ activeCategory ?? allLabel }}</span>\n            </button>\n          </template>\n\n          <slot\n            v-if=\"isEmpty\"\n            name=\"empty\"\n          >\n            <div :class=\"ui.empty()\">\n              {{ emptyText }}\n            </div>\n          </slot>\n\n          <template\n            v-for=\"row in detailRows\"\n            v-else\n            :key=\"row.type === 'header' ? `h-${row.category}` : `i-${row.index}`\"\n          >\n            <div\n              v-if=\"row.type === 'header'\"\n              :class=\"ui.subheader()\"\n              role=\"presentation\"\n            >\n              {{ row.category }}\n            </div>\n            <RuiButton\n              v-else\n              :id=\"`${baseId}-opt-${row.index}`\"\n              role=\"option\"\n              variant=\"list\"\n              :size=\"dense ? 'sm' : undefined\"\n              :active=\"isSelected(row.item)\"\n              :aria-selected=\"isSelected(row.item)\"\n              tabindex=\"-1\"\n              :data-highlighted=\"focusedPane === 'detail' && row.index === highlightedItemIndex\"\n              :class=\"{ [ui.highlighted()]: focusedPane === 'detail' && row.index === highlightedItemIndex && !isSelected(row.item) }\"\n              @click=\"selectItem(row.item)\"\n            >\n              <template\n                v-if=\"$slots['item.prepend']\"\n                #prepend\n              >\n                <slot\n                  name=\"item.prepend\"\n                  v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n                />\n              </template>\n              <slot\n                name=\"item\"\n                v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n              >\n                {{ getText(row.item) }}\n              </slot>\n              <template\n                v-if=\"$slots['item.append']\"\n                #append\n              >\n                <slot\n                  name=\"item.append\"\n                  v-bind=\"{ active: row.index === highlightedItemIndex, item: row.item, selected: isSelected(row.item) }\"\n                />\n              </template>\n            </RuiButton>\n          </template>\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.footer\"\n        :class=\"ui.footer()\"\n      >\n        <slot\n          name=\"footer\"\n          v-bind=\"{ close }\"\n        />\n      </div>\n    </div>\n  </component>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/check-control-styles.d.ts

@@ -9,6 +9,14 @@
  * input is the focus target, so the ring hangs off its `peer` state.
  */
 export declare const checkControlStyles: import("tailwind-variants").TVReturnType<{
+    underLabel: {
+        true: {
+            label: string;
+            control: string;
+            details: string;
+        };
+        false: {};
+    };
     size: {
         sm: {
             control: string;
@@ -69,7 +77,16 @@ export declare const checkControlStyles: import("tailwind-variants").TVReturnTyp
     glyph: string;
     dot: string;
     label: string;
+    details: string;
 }, undefined, {
+    underLabel: {
+        true: {
+            label: string;
+            control: string;
+            details: string;
+        };
+        false: {};
+    };
     size: {
         sm: {
             control: string;
@@ -130,7 +147,16 @@ export declare const checkControlStyles: import("tailwind-variants").TVReturnTyp
     glyph: string;
     dot: string;
     label: string;
+    details: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    underLabel: {
+        true: {
+            label: string;
+            control: string;
+            details: string;
+        };
+        false: {};
+    };
     size: {
         sm: {
             control: string;
@@ -191,4 +217,5 @@ export declare const checkControlStyles: import("tailwind-variants").TVReturnTyp
     glyph: string;
     dot: string;
     label: string;
+    details: string;
 }>>;

package/dist/components/forms/check-control-styles.js

@@ -18,9 +18,18 @@ var checkControlStyles = tv({
 		mark: "grid place-items-center size-4 border-[1.5px] border-current transition-colors",
 		glyph: "size-3 text-white",
 		dot: "size-2 rounded-full bg-current",
-		label: "flex-1 text-rui-text text-sm/6 mt-[0.5625rem] mb-1"
+		label: "flex-1 text-rui-text text-sm/6 mt-[0.5625rem] mb-1",
+		details: ""
 	},
 	variants: {
+		underLabel: {
+			true: {
+				label: "mb-0",
+				control: "-mb-[0.5625rem]",
+				details: "pl-8.25"
+			},
+			false: {}
+		},
 		size: {
 			sm: {
 				control: "size-9.5",
@@ -118,6 +127,22 @@ var checkControlStyles = tv({
 				"success"
 			],
 			class: { glyph: "dark:text-rui-neutral-900" }
+		},
+		{
+			underLabel: true,
+			size: "sm",
+			class: {
+				control: "-mb-[0.4375rem]",
+				details: "pl-7.25"
+			}
+		},
+		{
+			underLabel: true,
+			size: "lg",
+			class: {
+				control: "-mb-[0.6875rem]",
+				details: "pl-9.25"
+			}
 		}
 	],
 	defaultVariants: {

package/dist/components/forms/check-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"check-control-styles.js","names":[],"sources":["../../../src/components/forms/check-control-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * Shared tv() styles for RuiCheckbox and RuiRadio.\n *\n * The control is a drawn box (or ring) centred in the 42px slot the Material\n * glyph used to fill, so a form keeps its spacing. The control's text color is\n * the mark's color: its edge, the checkbox fill and the radio dot all draw\n * with `currentColor`, so one class per state colors the whole mark. Hovering\n * the row darkens an unchecked mark, and keyboard focus rings it; the hidden\n * input is the focus target, so the ring hangs off its `peer` state.\n */\nexport const checkControlStyles = tv({\n  slots: {\n    wrapper: 'relative flex items-start cursor-pointer -ml-[0.5625rem] group/check',\n    input: 'peer appearance-none w-px h-px absolute z-[2] outline-hidden select-none',\n    control: [\n      'relative grid place-items-center shrink-0 size-10.5 text-rui-neutral-500 transition-colors',\n      'peer-focus-visible:[&>[data-mark]]:focus-ring',\n    ].join(' '),\n    mark: 'grid place-items-center size-4 border-[1.5px] border-current transition-colors',\n    glyph: 'size-3 text-white',\n    dot: 'size-2 rounded-full bg-current',\n    label: 'flex-1 text-rui-text text-sm/6 mt-[0.5625rem] mb-1',\n  },\n  variants: {\n    size: {\n      sm: {\n        control: 'size-9.5',\n        mark: 'size-3.5',\n        glyph: 'size-2.5',\n        dot: 'size-1.5',\n        label: 'mt-[0.4375rem]',\n      },\n      lg: {\n        control: 'size-11.5',\n        mark: 'size-5',\n        glyph: 'size-3.5',\n        dot: 'size-2.5',\n        label: 'mt-[0.6875rem]',\n      },\n    },\n    shape: {\n      square: { mark: 'rounded-sm' },\n      round: { mark: 'rounded-full' },\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        // the mark draws with currentColor, so one neutral greys its edge, fill and dot alike, two shades under the enabled one in dark\n        control: '!text-rui-neutral-300 dark:!text-rui-neutral-700',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    checked: {\n      true: {},\n      false: {},\n    },\n    validation: {\n      error: { control: '!text-rui-error' },\n      success: { control: '!text-rui-success' },\n    },\n    color: {\n      grey: {},\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    { checked: false, disabled: false, class: { control: 'group-hover/check:text-rui-neutral-700 dark:group-hover/check:text-rui-neutral-300' } },\n    { checked: true, shape: 'square', class: { mark: 'bg-current' } },\n\n    // Mark color when checked\n    { color: 'grey', checked: true, class: { control: 'text-rui-neutral-800 dark:text-rui-neutral-200' } },\n    { color: 'primary', checked: true, class: { control: 'text-rui-primary' } },\n    { color: 'secondary', checked: true, class: { control: 'text-rui-secondary' } },\n    // a status color's dark `main` is a text tone, so the mark takes the deep `darker` under its white check\n    { color: 'error', checked: true, class: { control: 'text-rui-error dark:text-rui-error-darker' } },\n    { color: 'warning', checked: true, class: { control: 'text-rui-warning dark:text-rui-warning-darker' } },\n    { color: 'info', checked: true, class: { control: 'text-rui-info dark:text-rui-info-darker' } },\n    { color: 'success', checked: true, class: { control: 'text-rui-success dark:text-rui-success-darker' } },\n\n    // A dark check where the fill is light: grey and the pale context colors in dark mode\n    { color: ['grey', 'warning', 'info', 'success'], class: { glyph: 'dark:text-rui-neutral-900' } },\n  ],\n  defaultVariants: {\n    shape: 'square',\n    color: 'grey',\n    disabled: false,\n    checked: false,\n  },\n});\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,qBAAqB,GAAG;CACnC,OAAO;EACL,SAAS;EACT,OAAO;EACP,SAAS,CACP,8FACA,+CACF,CAAC,CAAC,KAAK,GAAG;EACV,MAAM;EACN,OAAO;EACP,KAAK;EACL,OAAO;CACT;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF,SAAS;IACT,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;GACT;EACF;EACA,OAAO;GACL,QAAQ,EAAE,MAAM,aAAa;GAC7B,OAAO,EAAE,MAAM,eAAe;EAChC;EACA,UAAU,EACR,MAAM;GACJ,SAAS;GAET,SAAS;GACT,OAAO;EACT,EACF;EACA,SAAS;GACP,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,YAAY;GACV,OAAO,EAAE,SAAS,kBAAkB;GACpC,SAAS,EAAE,SAAS,oBAAoB;EAC1C;EACA,OAAO;GACL,MAAM,CAAC;GACP,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAO,UAAU;GAAO,OAAO,EAAE,SAAS,qFAAqF;EAAE;EAC5I;GAAE,SAAS;GAAM,OAAO;GAAU,OAAO,EAAE,MAAM,aAAa;EAAE;EAGhE;GAAE,OAAO;GAAQ,SAAS;GAAM,OAAO,EAAE,SAAS,iDAAiD;EAAE;EACrG;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,mBAAmB;EAAE;EAC1E;GAAE,OAAO;GAAa,SAAS;GAAM,OAAO,EAAE,SAAS,qBAAqB;EAAE;EAE9E;GAAE,OAAO;GAAS,SAAS;GAAM,OAAO,EAAE,SAAS,4CAA4C;EAAE;EACjG;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,gDAAgD;EAAE;EACvG;GAAE,OAAO;GAAQ,SAAS;GAAM,OAAO,EAAE,SAAS,0CAA0C;EAAE;EAC9F;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,gDAAgD;EAAE;EAGvG;GAAE,OAAO;IAAC;IAAQ;IAAW;IAAQ;GAAS;GAAG,OAAO,EAAE,OAAO,4BAA4B;EAAE;CACjG;CACA,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,UAAU;EACV,SAAS;CACX;AACF,CAAC"}
+{"version":3,"file":"check-control-styles.js","names":[],"sources":["../../../src/components/forms/check-control-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * Shared tv() styles for RuiCheckbox and RuiRadio.\n *\n * The control is a drawn box (or ring) centred in the 42px slot the Material\n * glyph used to fill, so a form keeps its spacing. The control's text color is\n * the mark's color: its edge, the checkbox fill and the radio dot all draw\n * with `currentColor`, so one class per state colors the whole mark. Hovering\n * the row darkens an unchecked mark, and keyboard focus rings it; the hidden\n * input is the focus target, so the ring hangs off its `peer` state.\n */\nexport const checkControlStyles = tv({\n  slots: {\n    wrapper: 'relative flex items-start cursor-pointer -ml-[0.5625rem] group/check',\n    input: 'peer appearance-none w-px h-px absolute z-[2] outline-hidden select-none',\n    control: [\n      'relative grid place-items-center shrink-0 size-10.5 text-rui-neutral-500 transition-colors',\n      'peer-focus-visible:[&>[data-mark]]:focus-ring',\n    ].join(' '),\n    mark: 'grid place-items-center size-4 border-[1.5px] border-current transition-colors',\n    glyph: 'size-3 text-white',\n    dot: 'size-2 rounded-full bg-current',\n    label: 'flex-1 text-rui-text text-sm/6 mt-[0.5625rem] mb-1',\n    details: '',\n  },\n  variants: {\n    /*\n     * The message sits 4px under the label, indented by the control slot less the wrapper's pull.\n     * The control gives back the label's top offset, so the row is as tall as the label at any line\n     * count and the control's lower part hangs beside the message, never under it.\n     */\n    underLabel: {\n      true: { label: 'mb-0', control: '-mb-[0.5625rem]', details: 'pl-8.25' },\n      false: {},\n    },\n    size: {\n      sm: {\n        control: 'size-9.5',\n        mark: 'size-3.5',\n        glyph: 'size-2.5',\n        dot: 'size-1.5',\n        label: 'mt-[0.4375rem]',\n      },\n      lg: {\n        control: 'size-11.5',\n        mark: 'size-5',\n        glyph: 'size-3.5',\n        dot: 'size-2.5',\n        label: 'mt-[0.6875rem]',\n      },\n    },\n    shape: {\n      square: { mark: 'rounded-sm' },\n      round: { mark: 'rounded-full' },\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        // the mark draws with currentColor, so one neutral greys its edge, fill and dot alike, two shades under the enabled one in dark\n        control: '!text-rui-neutral-300 dark:!text-rui-neutral-700',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    checked: {\n      true: {},\n      false: {},\n    },\n    validation: {\n      error: { control: '!text-rui-error' },\n      success: { control: '!text-rui-success' },\n    },\n    color: {\n      grey: {},\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    { checked: false, disabled: false, class: { control: 'group-hover/check:text-rui-neutral-700 dark:group-hover/check:text-rui-neutral-300' } },\n    { checked: true, shape: 'square', class: { mark: 'bg-current' } },\n\n    // Mark color when checked\n    { color: 'grey', checked: true, class: { control: 'text-rui-neutral-800 dark:text-rui-neutral-200' } },\n    { color: 'primary', checked: true, class: { control: 'text-rui-primary' } },\n    { color: 'secondary', checked: true, class: { control: 'text-rui-secondary' } },\n    // a status color's dark `main` is a text tone, so the mark takes the deep `darker` under its white check\n    { color: 'error', checked: true, class: { control: 'text-rui-error dark:text-rui-error-darker' } },\n    { color: 'warning', checked: true, class: { control: 'text-rui-warning dark:text-rui-warning-darker' } },\n    { color: 'info', checked: true, class: { control: 'text-rui-info dark:text-rui-info-darker' } },\n    { color: 'success', checked: true, class: { control: 'text-rui-success dark:text-rui-success-darker' } },\n\n    // A dark check where the fill is light: grey and the pale context colors in dark mode\n    { color: ['grey', 'warning', 'info', 'success'], class: { glyph: 'dark:text-rui-neutral-900' } },\n\n    // Under-label messages per size: a 38px slot with the label 7px down, a 46px one with it 11px down\n    { underLabel: true, size: 'sm', class: { control: '-mb-[0.4375rem]', details: 'pl-7.25' } },\n    { underLabel: true, size: 'lg', class: { control: '-mb-[0.6875rem]', details: 'pl-9.25' } },\n  ],\n  defaultVariants: {\n    shape: 'square',\n    color: 'grey',\n    disabled: false,\n    checked: false,\n  },\n});\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,qBAAqB,GAAG;CACnC,OAAO;EACL,SAAS;EACT,OAAO;EACP,SAAS,CACP,8FACA,+CACF,CAAC,CAAC,KAAK,GAAG;EACV,MAAM;EACN,OAAO;EACP,KAAK;EACL,OAAO;EACP,SAAS;CACX;CACA,UAAU;EAMR,YAAY;GACV,MAAM;IAAE,OAAO;IAAQ,SAAS;IAAmB,SAAS;GAAU;GACtE,OAAO,CAAC;EACV;EACA,MAAM;GACJ,IAAI;IACF,SAAS;IACT,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;GACT;EACF;EACA,OAAO;GACL,QAAQ,EAAE,MAAM,aAAa;GAC7B,OAAO,EAAE,MAAM,eAAe;EAChC;EACA,UAAU,EACR,MAAM;GACJ,SAAS;GAET,SAAS;GACT,OAAO;EACT,EACF;EACA,SAAS;GACP,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,YAAY;GACV,OAAO,EAAE,SAAS,kBAAkB;GACpC,SAAS,EAAE,SAAS,oBAAoB;EAC1C;EACA,OAAO;GACL,MAAM,CAAC;GACP,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAO,UAAU;GAAO,OAAO,EAAE,SAAS,qFAAqF;EAAE;EAC5I;GAAE,SAAS;GAAM,OAAO;GAAU,OAAO,EAAE,MAAM,aAAa;EAAE;EAGhE;GAAE,OAAO;GAAQ,SAAS;GAAM,OAAO,EAAE,SAAS,iDAAiD;EAAE;EACrG;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,mBAAmB;EAAE;EAC1E;GAAE,OAAO;GAAa,SAAS;GAAM,OAAO,EAAE,SAAS,qBAAqB;EAAE;EAE9E;GAAE,OAAO;GAAS,SAAS;GAAM,OAAO,EAAE,SAAS,4CAA4C;EAAE;EACjG;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,gDAAgD;EAAE;EACvG;GAAE,OAAO;GAAQ,SAAS;GAAM,OAAO,EAAE,SAAS,0CAA0C;EAAE;EAC9F;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,gDAAgD;EAAE;EAGvG;GAAE,OAAO;IAAC;IAAQ;IAAW;IAAQ;GAAS;GAAG,OAAO,EAAE,OAAO,4BAA4B;EAAE;EAG/F;GAAE,YAAY;GAAM,MAAM;GAAM,OAAO;IAAE,SAAS;IAAmB,SAAS;GAAU;EAAE;EAC1F;GAAE,YAAY;GAAM,MAAM;GAAM,OAAO;IAAE,SAAS;IAAmB,SAAS;GAAU;EAAE;CAC5F;CACA,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,UAAU;EACV,SAAS;CACX;AACF,CAAC"}

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

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

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

@@ -1,4 +1,5 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
+import { type FormDetails } from '../../../utils/form-text-detail.js';
 export interface Props<TValue> {
     value?: TValue;
     disabled?: boolean;
@@ -8,7 +9,12 @@ export interface Props<TValue> {
     hint?: string;
     errorMessages?: string | string[];
     successMessages?: string | string[];
+    /** The line under the control for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */
+    details?: FormDetails;
+    /** @deprecated Use `details="hidden"`. Removed in 4.0. */
     hideDetails?: boolean;
+    /** Puts the hint or message under the label text instead of under the box, so a list of checkboxes keeps one text column. */
+    detailsUnderLabel?: boolean;
     required?: boolean;
 }
 declare const __VLS_export: <TValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{

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

@@ -1,5 +1,5 @@
 import { get, objectPick, set } from "../../../vendor/@vueuse/shared/dist/index.js";
-import { useFormTextDetail } from "../../../utils/form-text-detail.js";
+import { useFormDetails, useFormTextDetail } from "../../../utils/form-text-detail.js";
 import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
 import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
 import { RuiCheckboxGroupContextKey } from "./checkbox-group/context.js";
@@ -41,10 +41,15 @@ var RuiCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		hint: { default: "" },
 		errorMessages: { default: () => [] },
 		successMessages: { default: () => [] },
+		details: { default: () => void 0 },
 		hideDetails: {
 			type: Boolean,
 			default: false
 		},
+		detailsUnderLabel: {
+			type: Boolean,
+			default: false
+		},
 		required: {
 			type: Boolean,
 			default: false
@@ -70,7 +75,7 @@ var RuiCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const disabled = computed(() => __props.disabled || (group ? toValue(group.disabled) : false));
 		const color = computed(() => __props.color ?? (group ? toValue(group.color) : void 0));
 		const size = computed(() => __props.size ?? (group ? toValue(group.size) : void 0));
-		const effectiveHideDetails = computed(() => __props.hideDetails || group !== void 0 && __props.value !== void 0);
+		const detailsMode = useFormDetails(() => group !== void 0 && __props.value !== void 0 ? "hidden" : __props.details, () => __props.hideDetails);
 		const { hasError, validation } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
 		const internalModelValue = computed({
 			get: () => {
@@ -88,7 +93,8 @@ var RuiCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			disabled: get(disabled),
 			checked: get(internalModelValue) || get(indeterminate),
 			validation: get(validation),
-			color: get(color) ?? "grey"
+			color: get(color) ?? "grey",
+			underLabel: __props.detailsUnderLabel
 		}));
 		const markState = computed(() => {
 			if (get(indeterminate)) return "indeterminate";
@@ -138,12 +144,16 @@ var RuiCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					key: 0,
 					class: normalizeClass(unref(ui).label())
 				}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", _hoisted_6, " * ")) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)
-			], 16, _hoisted_1), !unref(effectiveHideDetails) ? (openBlock(), createBlock(RuiFormTextDetail_default, {
+			], 16, _hoisted_1), unref(detailsMode) !== "hidden" ? (openBlock(), createBlock(RuiFormTextDetail_default, {
 				key: 0,
+				class: normalizeClass(unref(ui).details()),
+				details: unref(detailsMode),
 				"error-messages": __props.errorMessages,
 				"success-messages": __props.successMessages,
 				hint: __props.hint
 			}, null, 8, [
+				"class",
+				"details",
 				"error-messages",
 				"success-messages",
 				"hint"

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

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

@@ -1 +1 @@
-{"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":""}
+{"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';\nimport { type FormDetails, useFormDetails } from '@/utils/form-text-detail';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the group for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  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  details = undefined,\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\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=\"detailsMode !== 'hidden'\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue.d.ts

@@ -1,10 +1,14 @@
 import type { ContextColorsType } from '../../../../consts/colors.js';
+import { type FormDetails } from '../../../../utils/form-text-detail.js';
 export interface Props {
     inline?: boolean;
     label?: string;
     hint?: string;
     errorMessages?: string | string[];
     successMessages?: string | string[];
+    /** The line under the group for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */
+    details?: FormDetails;
+    /** @deprecated Use `details="hidden"`. Removed in 4.0. */
     hideDetails?: boolean;
     disabled?: boolean;
     color?: ContextColorsType;

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

@@ -1,7 +1,8 @@
 import { get, set } from "../../../../vendor/@vueuse/shared/dist/index.js";
+import { useFormDetails } from "../../../../utils/form-text-detail.js";
 import RuiFormTextDetail_default from "../../../helpers/RuiFormTextDetail.js";
 import { RuiCheckboxGroupContextKey } from "./context.js";
-import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, provide, renderSlot, toDisplayString, useModel } from "vue";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, provide, renderSlot, toDisplayString, unref, useModel } from "vue";
 //#region src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -24,6 +25,7 @@ var RuiCheckboxGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		hint: { default: "" },
 		errorMessages: { default: () => [] },
 		successMessages: { default: () => [] },
+		details: { default: () => void 0 },
 		hideDetails: {
 			type: Boolean,
 			default: false
@@ -45,6 +47,7 @@ var RuiCheckboxGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
+		const detailsMode = useFormDetails(() => __props.details, () => __props.hideDetails);
 		function arrayIncludes(arr, value) {
 			return Array.prototype.includes.call(arr, value);
 		}
@@ -64,12 +67,14 @@ var RuiCheckboxGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			return openBlock(), createElementBlock("div", mergeProps({ role: "group" }, _ctx.$attrs), [
 				__props.label ? (openBlock(), createElementBlock("div", _hoisted_1, [createTextVNode(toDisplayString(__props.label) + " ", 1), __props.required ? (openBlock(), createElementBlock("span", _hoisted_2, " * ")) : createCommentVNode("", true)])) : createCommentVNode("", true),
 				createElementVNode("div", { class: normalizeClass({ "flex between:ml-6 between:mr-0": __props.inline }) }, [renderSlot(_ctx.$slots, "default")], 2),
-				!__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
+				unref(detailsMode) !== "hidden" ? (openBlock(), createBlock(RuiFormTextDetail_default, {
 					key: 1,
+					details: unref(detailsMode),
 					"error-messages": __props.errorMessages,
 					"success-messages": __props.successMessages,
 					hint: __props.hint
 				}, null, 8, [
+					"details",
 					"error-messages",
 					"success-messages",
 					"hint"

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","_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"}
+{"version":3,"file":"RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_createTextVNode","_toDisplayString","_createCommentVNode","_createElementVNode","_normalizeClass","_renderSlot","_unref","_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';\nimport { type FormDetails, useFormDetails } from '@/utils/form-text-detail';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the group for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  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  details = undefined,\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\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=\"detailsMode !== 'hidden'\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,aAAaC,SAAqB,SAAA,YAAsB;EAoB9D,MAAM,cAAc,qBAAqB,QAAA,eAAe,QAAA,WAAW;EAEnE,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,mBA0BM,OA1BNC,WA0BM,EAzBJ,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;IAGFC,MAAA,WAAA,MAAW,YADnBT,UAAA,GAAAU,YAMEC,2BAAA;;KAJC,SAASF,MAAA,WAAA;KACT,kBAAgB,QAAA;KAChB,oBAAkB,QAAA;KAClB,MAAM,QAAA"}