@rotki/ui-library 2.27.0 → 3.0.0-beta.1

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

@@ -1,76 +1,83 @@
-import { type TextInputVariant } from '../text-input-styles.js';
-export type AutoCompleteVariant = TextInputVariant;
 /**
  * Overrides the `value` slot for flex-wrap chip layout.
  */
 export declare const autoCompleteStyles: import("tailwind-variants").TVReturnType<{
-    filled: {
-        true: {};
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            prepend?: import("tailwind-variants").ClassValue;
+        };
     };
-}, {
-    value: string;
-}, undefined, {
+} | {
     dense: {
-        true: {
-            activator: string;
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            prepend?: import("tailwind-variants").ClassValue;
         };
     };
     disabled: {
-        true: {
-            activator: string;
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            prepend?: import("tailwind-variants").ClassValue;
         };
     };
     readonly: {
-        true: {
-            activator: string;
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            prepend?: import("tailwind-variants").ClassValue;
         };
     };
-    filled: {
-        true: {
-            activator: string;
+    hovered: {
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            prepend?: import("tailwind-variants").ClassValue;
         };
     };
-    outlined: {
-        true: {
-            activator: string;
-            label: string;
-            fieldset: string;
-        };
-        false: {
-            activator: string;
+    opened: {
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            prepend?: import("tailwind-variants").ClassValue;
         };
     };
-    float: {
-        true: {
-            label: string;
+    hasError: {
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            prepend?: import("tailwind-variants").ClassValue;
         };
     };
-    opened: {
-        true: {
-            icon: string;
+    hasSuccess: {
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            prepend?: import("tailwind-variants").ClassValue;
         };
     };
     active: {
-        true: {
-            highlighted: string;
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            prepend?: import("tailwind-variants").ClassValue;
         };
     };
-    hasError: {
-        true: {};
-    };
-    hasSuccess: {
-        true: {};
-    };
-    hovered: {
-        true: {};
+}, {
+    value: string;
+    prepend: string;
+}, undefined, {
+    dense: {
+        true: {
+            activator: string;
+        };
     };
-    showLabel: {
-        true: {};
+    disabled: {
+        true: {
+            activator: string;
+            icon: string;
+            fieldset: string;
+        };
     };
-} & {
-    focused: {
+    readonly: {
         true: {
+            activator: string;
             fieldset: string;
+            iconWrapper: string;
         };
     };
     hovered: {
@@ -78,42 +85,31 @@ export declare const autoCompleteStyles: import("tailwind-variants").TVReturnTyp
             fieldset: string;
         };
     };
-    disabled: {
+    opened: {
         true: {
+            icon: string;
             fieldset: string;
-            label: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
+    hasError: {
+        true: {
             fieldset: string;
-            label: string;
         };
-        success: {
+    };
+    hasSuccess: {
+        true: {
             fieldset: string;
-            label: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
+    active: {
+        true: {
+            highlighted: string;
+        };
     };
 }, {
-    fieldset: string;
-    legend: string;
     wrapper: string;
     activator: string;
-    label: string;
+    fieldset: string;
     value: string;
     clear: string;
     menu: string;
@@ -121,11 +117,6 @@ export declare const autoCompleteStyles: import("tailwind-variants").TVReturnTyp
     progress: string;
     icon: string;
     iconWrapper: string;
-    required: string;
-} & {
-    label: string;
-    fieldset: string;
-    legend: string;
 }, import("tailwind-variants").TVReturnType<{
     dense: {
         true: {
@@ -135,36 +126,36 @@ export declare const autoCompleteStyles: import("tailwind-variants").TVReturnTyp
     disabled: {
         true: {
             activator: string;
+            icon: string;
+            fieldset: string;
         };
     };
     readonly: {
         true: {
             activator: string;
+            fieldset: string;
+            iconWrapper: string;
         };
     };
-    filled: {
+    hovered: {
         true: {
-            activator: string;
+            fieldset: string;
         };
     };
-    outlined: {
+    opened: {
         true: {
-            activator: string;
-            label: string;
+            icon: string;
             fieldset: string;
         };
-        false: {
-            activator: string;
-        };
     };
-    float: {
+    hasError: {
         true: {
-            label: string;
+            fieldset: string;
         };
     };
-    opened: {
+    hasSuccess: {
         true: {
-            icon: string;
+            fieldset: string;
         };
     };
     active: {
@@ -172,24 +163,10 @@ export declare const autoCompleteStyles: import("tailwind-variants").TVReturnTyp
             highlighted: string;
         };
     };
-    hasError: {
-        true: {};
-    };
-    hasSuccess: {
-        true: {};
-    };
-    hovered: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
 }, {
-    fieldset: string;
-    legend: string;
     wrapper: string;
     activator: string;
-    label: string;
+    fieldset: string;
     value: string;
     clear: string;
     menu: string;
@@ -197,185 +174,118 @@ export declare const autoCompleteStyles: import("tailwind-variants").TVReturnTyp
     progress: string;
     icon: string;
     iconWrapper: string;
-    required: string;
 }, undefined, {
-    focused: {
+    dense: {
         true: {
-            fieldset: string;
+            activator: string;
         };
     };
-    hovered: {
+    disabled: {
         true: {
+            activator: string;
+            icon: string;
             fieldset: string;
         };
     };
-    disabled: {
+    readonly: {
         true: {
+            activator: string;
             fieldset: string;
-            label: string;
+            iconWrapper: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
+    hovered: {
+        true: {
             fieldset: string;
-            label: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
-}, {
-    label: string;
-    fieldset: string;
-    legend: string;
-}, import("tailwind-variants").TVReturnType<{
-    focused: {
+    opened: {
         true: {
+            icon: string;
             fieldset: string;
         };
     };
-    hovered: {
+    hasError: {
         true: {
             fieldset: string;
         };
     };
-    disabled: {
+    hasSuccess: {
         true: {
             fieldset: string;
-            label: string;
         };
     };
     active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
-            fieldset: string;
-            label: string;
+        true: {
+            highlighted: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
 }, {
-    label: string;
+    wrapper: string;
+    activator: string;
     fieldset: string;
-    legend: string;
-}, undefined, {
-    focused: {
+    value: string;
+    clear: string;
+    menu: string;
+    highlighted: string;
+    progress: string;
+    icon: string;
+    iconWrapper: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    dense: {
         true: {
-            fieldset: string;
+            activator: string;
         };
     };
-    hovered: {
+    disabled: {
         true: {
+            activator: string;
+            icon: string;
             fieldset: string;
         };
     };
-    disabled: {
+    readonly: {
         true: {
+            activator: string;
             fieldset: string;
-            label: string;
+            iconWrapper: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
+    hovered: {
+        true: {
             fieldset: string;
-            label: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
-}, {
-    label: string;
-    fieldset: string;
-    legend: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    focused: {
+    opened: {
         true: {
+            icon: string;
             fieldset: string;
         };
     };
-    hovered: {
+    hasError: {
         true: {
             fieldset: string;
         };
     };
-    disabled: {
+    hasSuccess: {
         true: {
             fieldset: string;
-            label: string;
         };
     };
     active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
-            fieldset: string;
-            label: string;
+        true: {
+            highlighted: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
 }, {
-    label: string;
+    wrapper: string;
+    activator: string;
     fieldset: string;
-    legend: string;
-}>>>>;
+    value: string;
+    clear: string;
+    menu: string;
+    highlighted: string;
+    progress: string;
+    icon: string;
+    iconWrapper: string;
+}>>>;

package/dist/components/forms/auto-complete/auto-complete-styles.js

@@ -6,8 +6,10 @@ import { activatorStyles } from "../text-input-styles.js";
 */
 var autoCompleteStyles = tv({
 	extend: activatorStyles,
-	slots: { value: "flex gap-1 flex-wrap flex-1 transition-all duration-75" },
-	variants: { filled: { true: {} } }
+	slots: {
+		value: "flex gap-1 flex-wrap flex-1 transition-all duration-75",
+		prepend: "flex items-center shrink-0 me-2 text-rui-neutral-500 dark:text-rui-neutral-400"
+	}
 });
 //#endregion
 export { autoCompleteStyles };

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

@@ -1 +1 @@
-{"version":3,"file":"auto-complete-styles.js","names":[],"sources":["../../../../src/components/forms/auto-complete/auto-complete-styles.ts"],"sourcesContent":["import { activatorStyles, type TextInputVariant } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type AutoCompleteVariant = TextInputVariant;\n\n/**\n * Overrides the `value` slot for flex-wrap chip layout.\n */\nexport const autoCompleteStyles = tv({\n  extend: activatorStyles,\n  slots: {\n    value: 'flex gap-1 flex-wrap flex-1 transition-all duration-75',\n  },\n  variants: {\n    // Re-declare for type inference — actual styles are in activatorStyles\n    filled: { true: {} },\n  },\n});\n"],"mappings":";;;;;;AAQA,IAAa,qBAAqB,GAAG;CACnC,QAAQ;CACR,OAAO,EACL,OAAO,yDACT;CACA,UAAU,EAER,QAAQ,EAAE,MAAM,CAAC,EAAE,EACrB;AACF,CAAC"}
+{"version":3,"file":"auto-complete-styles.js","names":[],"sources":["../../../../src/components/forms/auto-complete/auto-complete-styles.ts"],"sourcesContent":["import { activatorStyles } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\n/**\n * Overrides the `value` slot for flex-wrap chip layout.\n */\nexport const autoCompleteStyles = tv({\n  extend: activatorStyles,\n  slots: {\n    value: 'flex gap-1 flex-wrap flex-1 transition-all duration-75',\n    prepend: 'flex items-center shrink-0 me-2 text-rui-neutral-500 dark:text-rui-neutral-400',\n  },\n});\n"],"mappings":";;;;;;AAMA,IAAa,qBAAqB,GAAG;CACnC,QAAQ;CACR,OAAO;EACL,OAAO;EACP,SAAS;CACX;AACF,CAAC"}

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

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