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

package/dist/components/overlays/badge/RuiBadge.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiBadge.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n  slots: {\n    wrapper: 'relative inline-block',\n    badge: 'flex items-center justify-center text-xs font-medium absolute bg-transparent text-rui-light-text dark:text-rui-text',\n    content: 'flex items-center px-1.5',\n  },\n  variants: {\n    color: {\n      default: {},\n      primary: { badge: 'text-white bg-rui-primary' },\n      secondary: { badge: 'text-white bg-rui-secondary' },\n      error: { badge: 'text-white bg-rui-error' },\n      warning: { badge: 'text-white bg-rui-warning' },\n      info: { badge: 'text-white bg-rui-info' },\n      success: { badge: 'text-white bg-rui-success' },\n    },\n    size: {\n      sm: { badge: 'min-h-4 min-w-4' },\n      md: { badge: 'min-h-5 min-w-5' },\n      lg: { badge: 'min-h-6 min-w-6' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-sm' },\n      md: { badge: 'rounded-md' },\n      lg: { badge: 'rounded-lg' },\n      full: { badge: 'rounded-full' },\n    },\n    dot: {\n      true: {},\n    },\n  },\n  compoundVariants: [\n    // Dot default color\n    { dot: true, color: 'default', class: { badge: 'bg-gray-500' } },\n\n    // Dot sizes (smaller than normal badge)\n    { dot: true, size: 'sm', class: { badge: 'min-w-1.5 min-h-1.5' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-2.5 min-h-2.5' } },\n  ],\n  compoundSlots: [\n    // Dark mode: warning/success/info keep light text on colored bg\n    { slots: ['badge'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\n  ],\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    rounded: 'full',\n    dot: false,\n  },\n});\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n}));\n\n// Position configs: [leftOffset, rightBase, edgeBase, centerOffset] (rem / calc expressions)\nconst DOT_POS: PosConfig = [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25];\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <Transition\n      appear\n      enter-active-class=\"transform ease-out duration-200\"\n      enter-from-class=\"scale-0\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transform ease-in duration-150\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-label=\"Badge\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2.5' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n              size=\"16\"\n              :class=\"{ 'ml-0.5': hasText }\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiBadge.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n  slots: {\n    wrapper: 'relative inline-block',\n    badge: 'flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text',\n    content: 'flex items-center gap-1 px-1.5',\n  },\n  variants: {\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark, where `main` is a text tone\n    color: {\n      default: { badge: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n      primary: { badge: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { badge: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { badge: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { badge: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { badge: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { badge: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // the icon is 60% of the badge height, as the text is, rather than filling it\n    size: {\n      sm: { badge: 'min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]' },\n      md: { badge: 'min-h-5 min-w-5 [--rui-icon-size:0.75rem]' },\n      lg: { badge: 'min-h-6 min-w-6 [--rui-icon-size:0.875rem]' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-xs' },\n      md: { badge: 'rounded-rui-control' },\n      lg: { badge: 'rounded-rui-card' },\n      full: { badge: 'rounded-full' },\n    },\n    // A surface ring keeps a dot apart from whatever it overlaps, such as an avatar edge\n    dot: {\n      true: { badge: 'ring-2 ring-rui-surface' },\n    },\n    // an icon alone needs no side padding, so the badge stays as wide as it is tall\n    iconOnly: {\n      true: { content: 'px-0' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // the default dot is a step lighter in dark, where neutral-500 nearly vanished against a dark control\n    { dot: true, color: 'default', class: { badge: 'bg-rui-neutral-500 dark:bg-rui-neutral-400' } },\n    // A dot carries no text, so it keeps the brighter `main`, which reads better as a small mark on a dark page\n    { dot: true, color: 'error', class: { badge: 'dark:bg-rui-error' } },\n    { dot: true, color: 'warning', class: { badge: 'dark:bg-rui-warning' } },\n    { dot: true, color: 'info', class: { badge: 'dark:bg-rui-info' } },\n    { dot: true, color: 'success', class: { badge: 'dark:bg-rui-success' } },\n\n    // Dot sizes: 8, 10 and 12px, since half of a dot sits off the corner and reads smaller than it is\n    { dot: true, size: 'sm', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2.5 min-h-2.5' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-3 min-h-3' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    rounded: 'full',\n    dot: false,\n  },\n});\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/overlays/dialog/RuiDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDialog.js","names":[],"sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { useDismissableOverlay } from '@/composables/overlay-stack';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getNonRootAttrs, getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiDialogClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface DialogProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n  bottomSheet?: boolean;\n  classNames?: RuiDialogClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string | string[] | Record<string, boolean>;\n  zIndex?: string | number;\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiDialog',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  persistent = false,\n  width = '98%',\n  maxWidth,\n  bottomSheet = false,\n  classNames,\n  contentClass = '',\n  zIndex = 9999,\n  ariaLabel,\n} = defineProps<DialogProps>();\n\nconst emit = defineEmits<{\n  'closed': [];\n  'click:outside': [];\n  'click:esc': [];\n  /**\n   * The overlay stack asked this dialog to go, which is what a back gesture\n   * reaches it as. Closes unless persistent, like escape does, so a dialog that\n   * has to ask before discarding should bind `persistent` and answer here.\n   */\n  'dismiss': [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { attrs: { onClick: () => void }; isOpen: boolean }) => any;\n  default?: (props: { isOpen: boolean; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst contentRef = useTemplateRef<HTMLDivElement>('contentRef');\n\nconst leaveTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning));\n\nconst style = computed<{ width: string | undefined; maxWidth: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n  maxWidth: transformPropsUnit(maxWidth),\n}));\n\nconst dialog = tv({\n  slots: {\n    root: 'fixed inset-0',\n    overlay: 'absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50',\n    content: 'absolute left-1/2 bottom-0 -translate-x-1/2 outline-none overflow-y-auto max-h-[90vh]',\n  },\n  variants: {\n    bottomSheet: {\n      true: { content: '' },\n      false: { content: 'top-1/2 -translate-y-1/2 bottom-auto' },\n    },\n  },\n  defaultVariants: { bottomSheet: false },\n});\n\nconst ui = computed<ReturnType<typeof dialog>>(() => dialog({ bottomSheet }));\n\nconst dialogAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst contentTransition = computed<Record<string, string>>(() => {\n  if (!bottomSheet) {\n    return {\n      enterFromClass: 'opacity-0 scale-95',\n      enterActiveClass: 'transition-all ease-out duration-200',\n      enterToClass: 'opacity-100 scale-100',\n      leaveFromClass: 'opacity-100 scale-100',\n      leaveActiveClass: 'transition-all ease-in duration-150',\n      leaveToClass: 'opacity-0 scale-95',\n    };\n  }\n\n  return {\n    enterFromClass: 'translate-y-full',\n    enterActiveClass: 'transition-transform ease-out duration-300',\n    enterToClass: 'translate-y-0',\n    leaveFromClass: 'translate-y-0',\n    leaveActiveClass: 'transition-transform ease-in duration-200',\n    leaveToClass: 'translate-y-full',\n  };\n});\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onEscClick(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:esc');\n}\n\nfunction onClickOutside(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:outside');\n}\n\nfunction onDismiss(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('dismiss');\n}\n\n/**\n * Registration follows `modelValue` alone, never `persistent`: a dialog that\n * turns persistent partway through its life has to stay in the stack and refuse\n * in `onDismiss`, or the gesture starts passing through exactly once there is\n * work to lose. A dialog playing its leave transition is already on its way out\n * and does not hold the stack.\n */\nuseDismissableOverlay(modelValue, onDismiss);\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Safety fallback if transitionend is not detected\n    leaveTimeout.create(onLeaveComplete, 400);\n  }\n});\n\nwatch(contentRef, (ref) => {\n  if (ref) {\n    nextTick(() => ref.focus());\n  }\n  else {\n    onLeaveComplete();\n  }\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <slot\n      name=\"activator\"\n      v-bind=\"{ attrs: dialogAttrs, isOpen: modelValue }\"\n    />\n    <Teleport to=\"body\">\n      <div\n        v-if=\"alive\"\n        :class=\"ui.root({ class: cn(classNames?.root) })\"\n        :style=\"{ zIndex }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"ariaLabel\"\n        tabindex=\"0\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        @keydown.esc.stop=\"onEscClick()\"\n      >\n        <Transition\n          enter-from-class=\"opacity-0\"\n          enter-active-class=\"transition-opacity ease-out duration-200\"\n          enter-to-class=\"opacity-100\"\n          leave-from-class=\"opacity-100\"\n          leave-active-class=\"transition-opacity ease-in duration-150\"\n          leave-to-class=\"opacity-0\"\n        >\n          <div\n            v-if=\"modelValue\"\n            data-id=\"overlay\"\n            :class=\"ui.overlay()\"\n            @click.stop=\"onClickOutside()\"\n          />\n        </Transition>\n        <Transition\n          v-bind=\"contentTransition\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"modelValue\"\n            ref=\"contentRef\"\n            data-id=\"content\"\n            :style=\"style\"\n            tabindex=\"0\"\n            :data-bottom-sheet=\"bottomSheet || undefined\"\n            :class=\"ui.content({ class: cn(classNames?.content) ?? cn(contentClass) })\"\n          >\n            <slot v-bind=\"{ isOpen: modelValue, close }\" />\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDialog.js","names":[],"sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { DialogSize } from '@/consts/tokens';\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { useDismissableOverlay } from '@/composables/overlay-stack';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getNonRootAttrs, getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiDialogClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface DialogProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n  /** A preset max width, `--rui-dialog-<size>`; an explicit `maxWidth` wins */\n  size?: DialogSize;\n  bottomSheet?: boolean;\n  classNames?: RuiDialogClassNames;\n  zIndex?: string | number;\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiDialog',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  persistent = false,\n  width = '98%',\n  maxWidth,\n  size,\n  bottomSheet = false,\n  classNames,\n  zIndex = 'var(--rui-z-dialog)',\n  ariaLabel,\n} = defineProps<DialogProps>();\n\nconst emit = defineEmits<{\n  'closed': [];\n  'click:outside': [];\n  'click:esc': [];\n  /**\n   * The overlay stack asked this dialog to go, which is what a back gesture\n   * reaches it as. Closes unless persistent, like escape does, so a dialog that\n   * has to ask before discarding should bind `persistent` and answer here.\n   */\n  'dismiss': [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { attrs: { onClick: () => void }; isOpen: boolean }) => any;\n  default?: (props: { isOpen: boolean; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst contentRef = useTemplateRef<HTMLDivElement>('contentRef');\n\nconst leaveTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning));\n\nconst style = computed<{ width: string | undefined; maxWidth: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n  maxWidth: transformPropsUnit(maxWidth) ?? (size ? `var(--rui-dialog-${size})` : undefined),\n}));\n\nconst dialog = tv({\n  slots: {\n    root: 'fixed inset-0',\n    overlay: 'absolute inset-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60',\n    content: 'absolute left-1/2 bottom-0 -translate-x-1/2 outline-hidden overflow-y-auto max-h-(--rui-dialog-max-height)',\n  },\n  variants: {\n    /*\n     * The corners match a RuiCard's, the usual content, which the box clips while it scrolls.\n     * A sheet sits on the screen's bottom edge, so its content's bottom corners are squared.\n     */\n    bottomSheet: {\n      true: { content: 'rounded-t-rui-card shadow-rui-drawer *:rounded-b-none' },\n      false: { content: 'top-1/2 -translate-y-1/2 bottom-auto rounded-rui-card shadow-rui-menu' },\n    },\n  },\n  defaultVariants: { bottomSheet: false },\n});\n\nconst ui = computed<ReturnType<typeof dialog>>(() => dialog({ bottomSheet }));\n\nconst dialogAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst contentTransition = computed<Record<string, string>>(() => {\n  if (!bottomSheet) {\n    return {\n      enterFromClass: 'opacity-0 scale-95',\n      enterActiveClass: 'transition-all ease-out duration-200',\n      enterToClass: 'opacity-100 scale-100',\n      leaveFromClass: 'opacity-100 scale-100',\n      leaveActiveClass: 'transition-all ease-in duration-150',\n      leaveToClass: 'opacity-0 scale-95',\n    };\n  }\n\n  return {\n    enterFromClass: 'translate-y-full',\n    enterActiveClass: 'transition-transform ease-out duration-300',\n    enterToClass: 'translate-y-0',\n    leaveFromClass: 'translate-y-0',\n    leaveActiveClass: 'transition-transform ease-in duration-200',\n    leaveToClass: 'translate-y-full',\n  };\n});\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onEscClick(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:esc');\n}\n\nfunction onClickOutside(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:outside');\n}\n\nfunction onDismiss(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('dismiss');\n}\n\n/**\n * Registration follows `modelValue` alone, never `persistent`: a dialog that\n * turns persistent partway through its life has to stay in the stack and refuse\n * in `onDismiss`, or the gesture starts passing through exactly once there is\n * work to lose. A dialog playing its leave transition is already on its way out\n * and does not hold the stack.\n */\nuseDismissableOverlay(modelValue, onDismiss);\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Safety fallback if transitionend is not detected\n    leaveTimeout.create(onLeaveComplete, 400);\n  }\n});\n\nwatch(contentRef, (ref) => {\n  if (ref) {\n    nextTick(() => ref.focus());\n  }\n  else {\n    onLeaveComplete();\n  }\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <slot\n      name=\"activator\"\n      v-bind=\"{ attrs: dialogAttrs, isOpen: modelValue }\"\n    />\n    <Teleport to=\"body\">\n      <div\n        v-if=\"alive\"\n        :class=\"ui.root({ class: cn(classNames?.root) })\"\n        :style=\"{ zIndex }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"ariaLabel\"\n        tabindex=\"0\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        @keydown.esc.stop=\"onEscClick()\"\n      >\n        <Transition\n          enter-from-class=\"opacity-0\"\n          enter-active-class=\"transition-opacity ease-out duration-200\"\n          enter-to-class=\"opacity-100\"\n          leave-from-class=\"opacity-100\"\n          leave-active-class=\"transition-opacity ease-in duration-150\"\n          leave-to-class=\"opacity-0\"\n        >\n          <div\n            v-if=\"modelValue\"\n            data-id=\"overlay\"\n            :class=\"ui.overlay()\"\n            @click.stop=\"onClickOutside()\"\n          />\n        </Transition>\n        <Transition\n          v-bind=\"contentTransition\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"modelValue\"\n            ref=\"contentRef\"\n            data-id=\"content\"\n            :style=\"style\"\n            tabindex=\"0\"\n            :data-bottom-sheet=\"bottomSheet || undefined\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ isOpen: modelValue, close }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/dialog/RuiDialog.vue.d.ts

@@ -1,3 +1,4 @@
+import type { DialogSize } from '../../../consts/tokens.js';
 import type { VueClassValue } from '../../../types/class-value';
 export interface RuiDialogClassNames {
     root?: VueClassValue;
@@ -7,10 +8,10 @@ export interface DialogProps {
     persistent?: boolean;
     width?: string | number;
     maxWidth?: string | number;
+    /** A preset max width, `--rui-dialog-<size>`; an explicit `maxWidth` wins */
+    size?: DialogSize;
     bottomSheet?: boolean;
     classNames?: RuiDialogClassNames;
-    /** @deprecated Use `classNames.content` instead */
-    contentClass?: string | string[] | Record<string, boolean>;
     zIndex?: string | number;
     ariaLabel?: string;
 }

package/dist/components/overlays/dialog/RuiDialog.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,5 @@
 import { cn, tv } from "../../../utils/tv.js";
+import { ButtonGroupBoundary } from "../../buttons/button-group/button-group-context.js";
 import { useTimeoutManager } from "../../../composables/timeout-manager.js";
 import { getNonRootAttrs, getRootAttrs, transformPropsUnit } from "../../../utils/helpers.js";
 import { useDismissableOverlay } from "../../../composables/overlay-stack.js";
@@ -18,13 +19,13 @@ var RuiDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		},
 		width: { default: "98%" },
 		maxWidth: {},
+		size: {},
 		bottomSheet: {
 			type: Boolean,
 			default: false
 		},
 		classNames: {},
-		contentClass: { default: "" },
-		zIndex: { default: 9999 },
+		zIndex: { default: "var(--rui-z-dialog)" },
 		ariaLabel: {}
 	}, {
 		"modelValue": {
@@ -48,17 +49,17 @@ var RuiDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const alive = computed(() => get(modelValue) || get(transitioning));
 		const style = computed(() => ({
 			width: transformPropsUnit(__props.width),
-			maxWidth: transformPropsUnit(__props.maxWidth)
+			maxWidth: transformPropsUnit(__props.maxWidth) ?? (__props.size ? `var(--rui-dialog-${__props.size})` : void 0)
 		}));
 		const dialog = tv({
 			slots: {
 				root: "fixed inset-0",
-				overlay: "absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50",
-				content: "absolute left-1/2 bottom-0 -translate-x-1/2 outline-none overflow-y-auto max-h-[90vh]"
+				overlay: "absolute inset-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60",
+				content: "absolute left-1/2 bottom-0 -translate-x-1/2 outline-hidden overflow-y-auto max-h-(--rui-dialog-max-height)"
 			},
 			variants: { bottomSheet: {
-				true: { content: "" },
-				false: { content: "top-1/2 -translate-y-1/2 bottom-auto" }
+				true: { content: "rounded-t-rui-card shadow-rui-drawer *:rounded-b-none" },
+				false: { content: "top-1/2 -translate-y-1/2 bottom-auto rounded-rui-card shadow-rui-menu" }
 			} },
 			defaultVariants: { bottomSheet: false }
 		});
@@ -161,11 +162,14 @@ var RuiDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					style: normalizeStyle(unref(style)),
 					tabindex: "0",
 					"data-bottom-sheet": __props.bottomSheet || void 0,
-					class: normalizeClass(unref(ui).content({ class: unref(cn)(__props.classNames?.content) ?? unref(cn)(__props.contentClass) }))
-				}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
-					isOpen: modelValue.value,
-					close
-				})))], 14, _hoisted_2)) : createCommentVNode("", true)]),
+					class: normalizeClass(unref(ui).content({ class: unref(cn)(__props.classNames?.content) }))
+				}, [createVNode(unref(ButtonGroupBoundary), null, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+						isOpen: modelValue.value,
+						close
+					})))]),
+					_: 3
+				})], 14, _hoisted_2)) : createCommentVNode("", true)]),
 				_: 3
 			}, 16)], 16, _hoisted_1)) : createCommentVNode("", true)]))], 16);
 		};

package/dist/components/overlays/dialog/RuiDialog.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDialog.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { useDismissableOverlay } from '@/composables/overlay-stack';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getNonRootAttrs, getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiDialogClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface DialogProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n  bottomSheet?: boolean;\n  classNames?: RuiDialogClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string | string[] | Record<string, boolean>;\n  zIndex?: string | number;\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiDialog',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  persistent = false,\n  width = '98%',\n  maxWidth,\n  bottomSheet = false,\n  classNames,\n  contentClass = '',\n  zIndex = 9999,\n  ariaLabel,\n} = defineProps<DialogProps>();\n\nconst emit = defineEmits<{\n  'closed': [];\n  'click:outside': [];\n  'click:esc': [];\n  /**\n   * The overlay stack asked this dialog to go, which is what a back gesture\n   * reaches it as. Closes unless persistent, like escape does, so a dialog that\n   * has to ask before discarding should bind `persistent` and answer here.\n   */\n  'dismiss': [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { attrs: { onClick: () => void }; isOpen: boolean }) => any;\n  default?: (props: { isOpen: boolean; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst contentRef = useTemplateRef<HTMLDivElement>('contentRef');\n\nconst leaveTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning));\n\nconst style = computed<{ width: string | undefined; maxWidth: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n  maxWidth: transformPropsUnit(maxWidth),\n}));\n\nconst dialog = tv({\n  slots: {\n    root: 'fixed inset-0',\n    overlay: 'absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50',\n    content: 'absolute left-1/2 bottom-0 -translate-x-1/2 outline-none overflow-y-auto max-h-[90vh]',\n  },\n  variants: {\n    bottomSheet: {\n      true: { content: '' },\n      false: { content: 'top-1/2 -translate-y-1/2 bottom-auto' },\n    },\n  },\n  defaultVariants: { bottomSheet: false },\n});\n\nconst ui = computed<ReturnType<typeof dialog>>(() => dialog({ bottomSheet }));\n\nconst dialogAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst contentTransition = computed<Record<string, string>>(() => {\n  if (!bottomSheet) {\n    return {\n      enterFromClass: 'opacity-0 scale-95',\n      enterActiveClass: 'transition-all ease-out duration-200',\n      enterToClass: 'opacity-100 scale-100',\n      leaveFromClass: 'opacity-100 scale-100',\n      leaveActiveClass: 'transition-all ease-in duration-150',\n      leaveToClass: 'opacity-0 scale-95',\n    };\n  }\n\n  return {\n    enterFromClass: 'translate-y-full',\n    enterActiveClass: 'transition-transform ease-out duration-300',\n    enterToClass: 'translate-y-0',\n    leaveFromClass: 'translate-y-0',\n    leaveActiveClass: 'transition-transform ease-in duration-200',\n    leaveToClass: 'translate-y-full',\n  };\n});\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onEscClick(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:esc');\n}\n\nfunction onClickOutside(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:outside');\n}\n\nfunction onDismiss(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('dismiss');\n}\n\n/**\n * Registration follows `modelValue` alone, never `persistent`: a dialog that\n * turns persistent partway through its life has to stay in the stack and refuse\n * in `onDismiss`, or the gesture starts passing through exactly once there is\n * work to lose. A dialog playing its leave transition is already on its way out\n * and does not hold the stack.\n */\nuseDismissableOverlay(modelValue, onDismiss);\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Safety fallback if transitionend is not detected\n    leaveTimeout.create(onLeaveComplete, 400);\n  }\n});\n\nwatch(contentRef, (ref) => {\n  if (ref) {\n    nextTick(() => ref.focus());\n  }\n  else {\n    onLeaveComplete();\n  }\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <slot\n      name=\"activator\"\n      v-bind=\"{ attrs: dialogAttrs, isOpen: modelValue }\"\n    />\n    <Teleport to=\"body\">\n      <div\n        v-if=\"alive\"\n        :class=\"ui.root({ class: cn(classNames?.root) })\"\n        :style=\"{ zIndex }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"ariaLabel\"\n        tabindex=\"0\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        @keydown.esc.stop=\"onEscClick()\"\n      >\n        <Transition\n          enter-from-class=\"opacity-0\"\n          enter-active-class=\"transition-opacity ease-out duration-200\"\n          enter-to-class=\"opacity-100\"\n          leave-from-class=\"opacity-100\"\n          leave-active-class=\"transition-opacity ease-in duration-150\"\n          leave-to-class=\"opacity-0\"\n        >\n          <div\n            v-if=\"modelValue\"\n            data-id=\"overlay\"\n            :class=\"ui.overlay()\"\n            @click.stop=\"onClickOutside()\"\n          />\n        </Transition>\n        <Transition\n          v-bind=\"contentTransition\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"modelValue\"\n            ref=\"contentRef\"\n            data-id=\"content\"\n            :style=\"style\"\n            tabindex=\"0\"\n            :data-bottom-sheet=\"bottomSheet || undefined\"\n            :class=\"ui.content({ class: cn(classNames?.content) ?? cn(contentClass) })\"\n          >\n            <slot v-bind=\"{ isOpen: modelValue, close }\" />\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiDialog.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { DialogSize } from '@/consts/tokens';\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { useDismissableOverlay } from '@/composables/overlay-stack';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getNonRootAttrs, getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiDialogClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface DialogProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n  /** A preset max width, `--rui-dialog-<size>`; an explicit `maxWidth` wins */\n  size?: DialogSize;\n  bottomSheet?: boolean;\n  classNames?: RuiDialogClassNames;\n  zIndex?: string | number;\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiDialog',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  persistent = false,\n  width = '98%',\n  maxWidth,\n  size,\n  bottomSheet = false,\n  classNames,\n  zIndex = 'var(--rui-z-dialog)',\n  ariaLabel,\n} = defineProps<DialogProps>();\n\nconst emit = defineEmits<{\n  'closed': [];\n  'click:outside': [];\n  'click:esc': [];\n  /**\n   * The overlay stack asked this dialog to go, which is what a back gesture\n   * reaches it as. Closes unless persistent, like escape does, so a dialog that\n   * has to ask before discarding should bind `persistent` and answer here.\n   */\n  'dismiss': [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { attrs: { onClick: () => void }; isOpen: boolean }) => any;\n  default?: (props: { isOpen: boolean; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst contentRef = useTemplateRef<HTMLDivElement>('contentRef');\n\nconst leaveTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning));\n\nconst style = computed<{ width: string | undefined; maxWidth: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n  maxWidth: transformPropsUnit(maxWidth) ?? (size ? `var(--rui-dialog-${size})` : undefined),\n}));\n\nconst dialog = tv({\n  slots: {\n    root: 'fixed inset-0',\n    overlay: 'absolute inset-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60',\n    content: 'absolute left-1/2 bottom-0 -translate-x-1/2 outline-hidden overflow-y-auto max-h-(--rui-dialog-max-height)',\n  },\n  variants: {\n    /*\n     * The corners match a RuiCard's, the usual content, which the box clips while it scrolls.\n     * A sheet sits on the screen's bottom edge, so its content's bottom corners are squared.\n     */\n    bottomSheet: {\n      true: { content: 'rounded-t-rui-card shadow-rui-drawer *:rounded-b-none' },\n      false: { content: 'top-1/2 -translate-y-1/2 bottom-auto rounded-rui-card shadow-rui-menu' },\n    },\n  },\n  defaultVariants: { bottomSheet: false },\n});\n\nconst ui = computed<ReturnType<typeof dialog>>(() => dialog({ bottomSheet }));\n\nconst dialogAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst contentTransition = computed<Record<string, string>>(() => {\n  if (!bottomSheet) {\n    return {\n      enterFromClass: 'opacity-0 scale-95',\n      enterActiveClass: 'transition-all ease-out duration-200',\n      enterToClass: 'opacity-100 scale-100',\n      leaveFromClass: 'opacity-100 scale-100',\n      leaveActiveClass: 'transition-all ease-in duration-150',\n      leaveToClass: 'opacity-0 scale-95',\n    };\n  }\n\n  return {\n    enterFromClass: 'translate-y-full',\n    enterActiveClass: 'transition-transform ease-out duration-300',\n    enterToClass: 'translate-y-0',\n    leaveFromClass: 'translate-y-0',\n    leaveActiveClass: 'transition-transform ease-in duration-200',\n    leaveToClass: 'translate-y-full',\n  };\n});\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onEscClick(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:esc');\n}\n\nfunction onClickOutside(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:outside');\n}\n\nfunction onDismiss(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('dismiss');\n}\n\n/**\n * Registration follows `modelValue` alone, never `persistent`: a dialog that\n * turns persistent partway through its life has to stay in the stack and refuse\n * in `onDismiss`, or the gesture starts passing through exactly once there is\n * work to lose. A dialog playing its leave transition is already on its way out\n * and does not hold the stack.\n */\nuseDismissableOverlay(modelValue, onDismiss);\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Safety fallback if transitionend is not detected\n    leaveTimeout.create(onLeaveComplete, 400);\n  }\n});\n\nwatch(contentRef, (ref) => {\n  if (ref) {\n    nextTick(() => ref.focus());\n  }\n  else {\n    onLeaveComplete();\n  }\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <slot\n      name=\"activator\"\n      v-bind=\"{ attrs: dialogAttrs, isOpen: modelValue }\"\n    />\n    <Teleport to=\"body\">\n      <div\n        v-if=\"alive\"\n        :class=\"ui.root({ class: cn(classNames?.root) })\"\n        :style=\"{ zIndex }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"ariaLabel\"\n        tabindex=\"0\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        @keydown.esc.stop=\"onEscClick()\"\n      >\n        <Transition\n          enter-from-class=\"opacity-0\"\n          enter-active-class=\"transition-opacity ease-out duration-200\"\n          enter-to-class=\"opacity-100\"\n          leave-from-class=\"opacity-100\"\n          leave-active-class=\"transition-opacity ease-in duration-150\"\n          leave-to-class=\"opacity-0\"\n        >\n          <div\n            v-if=\"modelValue\"\n            data-id=\"overlay\"\n            :class=\"ui.overlay()\"\n            @click.stop=\"onClickOutside()\"\n          />\n        </Transition>\n        <Transition\n          v-bind=\"contentTransition\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"modelValue\"\n            ref=\"contentRef\"\n            data-id=\"content\"\n            :style=\"style\"\n            tabindex=\"0\"\n            :data-bottom-sheet=\"bottomSheet || undefined\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ isOpen: modelValue, close }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/overlays/menu/RuiMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiMenu.js","names":[],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\ninterface MenuAttrs extends BaseMenuAttrs { onClick?: () => void }\n\nexport interface RuiMenuClassNames {\n  root?: VueClassValue;\n  wrapper?: VueClassValue;\n  menu?: VueClassValue;\n  /** Overrides applied to the popover content box (e.g. to drop its default padding). */\n  content?: VueClassValue;\n}\n\n/**\n * Roles a popover container may take. These are the values `aria-haspopup`\n * accepts, which keeps the activator and the popover in agreement.\n */\nexport type RuiMenuRole = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\nexport interface MenuProps {\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  options?: FloatingOptions;\n  /** @deprecated Use `options` instead */\n  popper?: PopperOptions;\n  classNames?: RuiMenuClassNames;\n  /** @deprecated Use `classNames.wrapper` instead */\n  wrapperClass?: string | object | string[];\n  /** @deprecated Use `classNames.menu` instead */\n  menuClass?: string | object | string[];\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  dense?: boolean;\n  /**\n   * Keeps the menu open through the interactions that would otherwise dismiss\n   * it: a click outside and an Escape press. A programmatic close (`v-model`\n   * set to `false`) still applies.\n   */\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n  /**\n   * Optional external element to anchor the menu to, instead of the\n   * activator slot's wrapper. When set, the menu's position is computed\n   * against this element.\n   */\n  anchorEl?: HTMLElement;\n  /**\n   * Role of the teleported popover. Defaults to `menu`, which is correct when\n   * the content is made of `menuitem`s. Set it to `listbox` (or `tree`, `grid`,\n   * `dialog`) when the content follows a different ARIA model, e.g. a selection\n   * list opened by a `combobox`. The activator's `aria-haspopup` follows it.\n   */\n  role?: RuiMenuRole;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  openOnHover = false,\n  disabled = false,\n  fullWidth = false,\n  openDelay = 0,\n  closeDelay = 0,\n  options,\n  popper,\n  classNames,\n  wrapperClass = '',\n  menuClass = '',\n  closeOnContentClick = false,\n  persistOnActivatorClick = false,\n  hint,\n  errorMessages = [],\n  successMessages = [],\n  showDetails = false,\n  dense = false,\n  persistent = false,\n  disableAutoFocus = false,\n  anchorEl,\n  role = 'menu',\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n  activator?: (props: {\n    attrs: { onMouseover?: () => void; onMouseleave?: () => void; onClick?: () => void };\n    open: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  default?: (props: { width: number }) => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n  reference: activator,\n  popover: menu,\n  open,\n  visible,\n  currentPlacement,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => popper ? toFloatingOptions(popper) : (options ?? {}),\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n  () => anchorEl,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst menuStyles = tv({\n  slots: {\n    wrapper: 'relative inline-flex max-w-full',\n    popover: 'w-max z-[9999]',\n    content: 'rounded overflow-hidden shadow-8 bg-white dark:bg-[#2E2E2E] text-rui-text focus:outline-none py-2',\n    details: 'pt-1',\n  },\n  variants: {\n    fullWidth: {\n      true: { wrapper: 'w-full' },\n    },\n    dense: {\n      true: { details: 'px-2' },\n      false: { details: 'px-4' },\n    },\n  },\n  defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n  fullWidth,\n  dense,\n}));\n\n// `aria-haspopup=\"true\"` means `\"menu\"`, and the default keeps emitting `true` for existing callers\nconst ariaHasPopup = computed<RuiMenuRole | 'true'>(() => role === 'menu' ? 'true' : role);\n\n/**\n * The activator attributes.\n *\n * This and the computed below it must return the same object shape from every\n * branch. Otherwise vue-tsc infers the slot's `attrs` type as a discriminated\n * union where each key is either all defined or all undefined, which breaks\n * consumer code typing its own `attrs` handler with individually optional\n * keys.\n */\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n  const clickVal = get(click);\n  return {\n    onMouseover: disabled\n      ? undefined\n      : () => {\n          if (openOnHover)\n            onOpen();\n        },\n    onMouseleave: disabled\n      ? undefined\n      : () => {\n          if (openOnHover && !clickVal)\n            onClose();\n        },\n  };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n  ...get(baseMenuAttrs),\n  onClick: disabled ? undefined : checkClick,\n}));\n\n/**\n * Moves focus into the open menu without scrolling the page. A menu taller than the space below its\n * activator would otherwise make the browser scroll the whole document to reveal the focused\n * container, sliding the page out from under the activator.\n */\nfunction focusOnContent() {\n  const content = get(menuContent);\n  if (!content)\n    return;\n\n  content.focus({ preventScroll: true });\n}\n\nfunction focusMenu(): void {\n  if (disableAutoFocus)\n    return;\n\n  nextTick(() => focusOnContent());\n}\n\n/** Hands focus back to the activator on close, likewise without scrolling to it. */\nfunction focusOnActivator() {\n  const activatorEl = get(activator);\n  if (!activatorEl) {\n    return;\n  }\n  const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n  if (focusableEl) {\n    focusableEl.focus({ preventScroll: true });\n  }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n  if (!get(open))\n    return;\n  onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (disableAutoFocus) {\n    return;\n  }\n\n  nextTick(() => focusOnActivator());\n}\n\n/**\n * `persistent` blocks the outside interactions that would close the menu, and\n * Escape is one of them, which is how `RuiDialog` and `RuiBottomSheet` already\n * read it. The guard sits here rather than in `onLeave`, because `onLeave`\n * also runs for a programmatic close through `v-model`, which must keep\n * working.\n *\n * A persistent menu leaves the key alone instead of swallowing it, so an inner\n * popover can close on Escape while the menu stays open, and an ancestor still\n * sees a key nothing consumed.\n */\nfunction onEscape(event: KeyboardEvent): void {\n  if (persistent)\n    return;\n\n  onLeave(event);\n}\n\nfunction checkClick(): void {\n  if (get(open) && get(click)) {\n    if (!persistOnActivatorClick)\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (get(open) === value)\n    return;\n\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  set(modelValue, open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(menu, () => {\n  if (get(open) && !persistent)\n    onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n  <!--\n    Escape is swallowed only while the menu is open and not persistent\n    (`onLeave` stops the event itself); a closed or persistent menu must let it\n    through, or a consumer that closes its own editor on Escape never sees the\n    key.\n  -->\n  <div\n    :class=\"classNames?.root\"\n    @keydown.esc=\"onEscape($event)\"\n  >\n    <div\n      ref=\"activator\"\n      :class=\"ui.wrapper({ class: cn(classNames?.wrapper) ?? cn(wrapperClass as VueClassValue) })\"\n      :data-menu-disabled=\"disabled\"\n      :aria-haspopup=\"ariaHasPopup\"\n      :aria-expanded=\"open\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        ref=\"menu\"\n        :class=\"ui.popover({ class: cn(classNames?.menu) ?? cn(menuClass as VueClassValue) })\"\n        :role=\"role\"\n        :data-placement=\"currentPlacement\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc=\"onEscape($event)\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            data-id=\"content\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <slot v-bind=\"{ width }\" />\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiMenu.js","names":[],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\n/**\n * What the activator slot binds onto its trigger. The ARIA keys belong on an\n * element that can carry them (a button, link or combobox), never on a plain\n * `div`; an activator that sets its own ARIA takes `activatorHandlers(attrs)`.\n */\ninterface MenuAttrs extends BaseMenuAttrs {\n  'onClick'?: () => void;\n  'aria-haspopup': RuiMenuRole | 'true';\n  'aria-expanded': boolean;\n  'aria-controls'?: string;\n}\n\nexport interface RuiMenuClassNames {\n  root?: VueClassValue;\n  wrapper?: VueClassValue;\n  menu?: VueClassValue;\n  /** Overrides applied to the popover content box (e.g. to drop its default padding). */\n  content?: VueClassValue;\n  /** Overrides applied to the hint and messages under the activator. */\n  details?: VueClassValue;\n}\n\n/**\n * Roles a popover container may take. These are the values `aria-haspopup`\n * accepts, which keeps the activator and the popover in agreement.\n */\nexport type RuiMenuRole = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\nexport interface MenuProps {\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  options?: FloatingOptions;\n  classNames?: RuiMenuClassNames;\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  dense?: boolean;\n  /**\n   * Keeps the menu open through the interactions that would otherwise dismiss\n   * it: a click outside and an Escape press. A programmatic close (`v-model`\n   * set to `false`) still applies.\n   */\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n  /**\n   * Optional external element to anchor the menu to, instead of the\n   * activator slot's wrapper. When set, the menu's position is computed\n   * against this element.\n   */\n  anchorEl?: HTMLElement;\n  /**\n   * Role of the teleported popover. Defaults to `menu`, which is correct when\n   * the content is made of `menuitem`s. Set it to `listbox` (or `tree`, `grid`,\n   * `dialog`) when the content follows a different ARIA model, e.g. a selection\n   * list opened by a `combobox`. The activator's `aria-haspopup` follows it.\n   */\n  role?: RuiMenuRole;\n  /**\n   * Accessible name of the teleported popover. A `dialog` popover needs one;\n   * the other roles take it from their activator or options.\n   */\n  menuLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  openOnHover = false,\n  disabled = false,\n  fullWidth = false,\n  openDelay = 0,\n  closeDelay = 0,\n  options,\n  classNames,\n  closeOnContentClick = false,\n  persistOnActivatorClick = false,\n  hint,\n  errorMessages = [],\n  successMessages = [],\n  showDetails = false,\n  dense = false,\n  persistent = false,\n  disableAutoFocus = false,\n  anchorEl,\n  role = 'menu',\n  menuLabel,\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n  activator?: (props: {\n    // An inline type literal, so callers can pass it on as `Record<string, unknown>`\n    attrs: {\n      'onMouseover'?: () => void;\n      'onMouseleave'?: () => void;\n      'onClick'?: () => void;\n      'aria-haspopup': RuiMenuRole | 'true';\n      'aria-expanded': boolean;\n      'aria-controls'?: string;\n    };\n    open: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  default?: (props: { width: number }) => any;\n  /** Rendered above the activator, outside the element the menu positions against. */\n  label?: () => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\nconst menuId = useId();\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n  reference: activator,\n  popover: menu,\n  open,\n  visible,\n  currentPlacement,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => options ?? {},\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n  () => anchorEl,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst menuStyles = tv({\n  slots: {\n    wrapper: 'relative inline-flex max-w-full',\n    popover: 'w-max z-rui-menu',\n    // a hairline edge keeps the popup apart from a surface of nearly the same shade in dark mode\n    content: 'rounded-rui-panel overflow-hidden shadow-rui-menu bg-rui-menu border border-rui-divider text-rui-text focus:outline-hidden p-1',\n    details: 'pt-1',\n  },\n  variants: {\n    fullWidth: {\n      true: { wrapper: 'w-full' },\n    },\n    dense: {\n      true: { details: 'px-2' },\n      false: { details: 'px-4' },\n    },\n  },\n  defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n  fullWidth,\n  dense,\n}));\n\n// `aria-haspopup=\"true\"` means `\"menu\"`, and the default keeps emitting `true` for existing callers\nconst ariaHasPopup = computed<RuiMenuRole | 'true'>(() => role === 'menu' ? 'true' : role);\n\n/**\n * The activator attributes.\n *\n * This and the computed below it must return the same object shape from every\n * branch. Otherwise vue-tsc infers the slot's `attrs` type as a discriminated\n * union where each key is either all defined or all undefined, which breaks\n * consumer code typing its own `attrs` handler with individually optional\n * keys.\n */\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n  const clickVal = get(click);\n  return {\n    onMouseover: disabled\n      ? undefined\n      : () => {\n          if (openOnHover)\n            onOpen();\n        },\n    onMouseleave: disabled\n      ? undefined\n      : () => {\n          if (openOnHover && !clickVal)\n            onClose();\n        },\n  };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n  ...get(baseMenuAttrs),\n  'onClick': disabled ? undefined : checkClick,\n  'aria-haspopup': get(ariaHasPopup),\n  'aria-expanded': get(open),\n  // Only while the popover is in the DOM, so the reference never points at a missing element\n  'aria-controls': get(visible) ? menuId : undefined,\n}));\n\n/**\n * Moves focus into the open menu without scrolling the page. A menu taller than the space below its\n * activator would otherwise make the browser scroll the whole document to reveal the focused\n * container, sliding the page out from under the activator.\n */\nfunction focusOnContent() {\n  const content = get(menuContent);\n  if (!content)\n    return;\n\n  content.focus({ preventScroll: true });\n}\n\nfunction focusMenu(): void {\n  if (disableAutoFocus)\n    return;\n\n  nextTick(() => focusOnContent());\n}\n\n/** Hands focus back to the activator on close, likewise without scrolling to it. */\nfunction focusOnActivator() {\n  const activatorEl = get(activator);\n  if (!activatorEl) {\n    return;\n  }\n  const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n  if (focusableEl) {\n    focusableEl.focus({ preventScroll: true });\n  }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n  if (!get(open))\n    return;\n  onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (disableAutoFocus) {\n    return;\n  }\n\n  nextTick(() => focusOnActivator());\n}\n\n/**\n * `persistent` blocks the outside interactions that would close the menu, and\n * Escape is one of them, which is how `RuiDialog` and `RuiBottomSheet` already\n * read it. The guard sits here rather than in `onLeave`, because `onLeave`\n * also runs for a programmatic close through `v-model`, which must keep\n * working.\n *\n * A persistent menu leaves the key alone instead of swallowing it, so an inner\n * popover can close on Escape while the menu stays open, and an ancestor still\n * sees a key nothing consumed.\n */\nfunction onEscape(event: KeyboardEvent): void {\n  if (persistent)\n    return;\n\n  onLeave(event);\n}\n\nfunction checkClick(): void {\n  if (get(open) && get(click)) {\n    if (!persistOnActivatorClick)\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (get(open) === value)\n    return;\n\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  set(modelValue, open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(menu, () => {\n  if (get(open) && !persistent)\n    onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n  <!--\n    Escape is swallowed only while the menu is open and not persistent\n    (`onLeave` stops the event itself); a closed or persistent menu must let it\n    through, or a consumer that closes its own editor on Escape never sees the\n    key.\n  -->\n  <div\n    :class=\"classNames?.root\"\n    @keydown.esc=\"onEscape($event)\"\n  >\n    <slot name=\"label\" />\n    <div\n      ref=\"activator\"\n      :class=\"ui.wrapper({ class: cn(classNames?.wrapper) })\"\n      :data-menu-disabled=\"disabled\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"menuId\"\n        ref=\"menu\"\n        :class=\"ui.popover({ class: cn(classNames?.menu) })\"\n        :role=\"role\"\n        :aria-label=\"menuLabel\"\n        :data-placement=\"currentPlacement\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc=\"onEscape($event)\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            data-id=\"content\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ width }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      :class=\"ui.details({ class: cn(classNames?.details) })\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/menu/RuiMenu.vue.d.ts

@@ -1,12 +1,13 @@
 import type { VueClassValue } from '../../../types/class-value';
 import { type FloatingOptions } from '../../../composables/floating.js';
-import { type PopperOptions } from '../../../composables/popper.js';
 export interface RuiMenuClassNames {
     root?: VueClassValue;
     wrapper?: VueClassValue;
     menu?: VueClassValue;
     /** Overrides applied to the popover content box (e.g. to drop its default padding). */
     content?: VueClassValue;
+    /** Overrides applied to the hint and messages under the activator. */
+    details?: VueClassValue;
 }
 /**
  * Roles a popover container may take. These are the values `aria-haspopup`
@@ -20,13 +21,7 @@ export interface MenuProps {
     openDelay?: number;
     closeDelay?: number;
     options?: FloatingOptions;
-    /** @deprecated Use `options` instead */
-    popper?: PopperOptions;
     classNames?: RuiMenuClassNames;
-    /** @deprecated Use `classNames.wrapper` instead */
-    wrapperClass?: string | object | string[];
-    /** @deprecated Use `classNames.menu` instead */
-    menuClass?: string | object | string[];
     closeOnContentClick?: boolean;
     persistOnActivatorClick?: boolean;
     hint?: string;
@@ -54,14 +49,22 @@ export interface MenuProps {
      * list opened by a `combobox`. The activator's `aria-haspopup` follows it.
      */
     role?: RuiMenuRole;
+    /**
+     * Accessible name of the teleported popover. A `dialog` popover needs one;
+     * the other roles take it from their activator or options.
+     */
+    menuLabel?: string;
 }
 type __VLS_Props = MenuProps;
 type __VLS_Slots = {
     activator?: (props: {
         attrs: {
-            onMouseover?: () => void;
-            onMouseleave?: () => void;
-            onClick?: () => void;
+            'onMouseover'?: () => void;
+            'onMouseleave'?: () => void;
+            'onClick'?: () => void;
+            'aria-haspopup': RuiMenuRole | 'true';
+            'aria-expanded': boolean;
+            'aria-controls'?: string;
         };
         open: boolean;
         disabled: boolean;
@@ -71,6 +74,8 @@ type __VLS_Slots = {
     default?: (props: {
         width: number;
     }) => any;
+    /** Rendered above the activator, outside the element the menu positions against. */
+    label?: () => any;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean;

package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,18 +1,19 @@
 import { cn, tv } from "../../../utils/tv.js";
+import { ButtonGroupBoundary } from "../../buttons/button-group/button-group-context.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
 import { useFloating } from "../../../composables/floating.js";
-import { toFloatingOptions } from "../../../composables/popper.js";
-import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, watch, withCtx, withKeys } from "vue";
+import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useId, useModel, useTemplateRef, watch, withCtx, withKeys } from "vue";
 import { onClickOutside, useElementSize } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/overlays/menu/RuiMenu.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = [
-	"data-menu-disabled",
-	"aria-haspopup",
-	"aria-expanded"
+var _hoisted_1 = ["data-menu-disabled"];
+var _hoisted_2 = [
+	"id",
+	"role",
+	"aria-label",
+	"data-placement"
 ];
-var _hoisted_2 = ["role", "data-placement"];
 var FOCUSABLE_ELEMENTS_SELECTOR = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
 var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiMenu",
@@ -33,10 +34,7 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		openDelay: { default: 0 },
 		closeDelay: { default: 0 },
 		options: {},
-		popper: {},
 		classNames: {},
-		wrapperClass: { default: "" },
-		menuClass: { default: "" },
 		closeOnContentClick: {
 			type: Boolean,
 			default: false
@@ -65,7 +63,8 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			default: false
 		},
 		anchorEl: {},
-		role: { default: "menu" }
+		role: { default: "menu" },
+		menuLabel: {}
 	}, {
 		"modelValue": {
 			type: Boolean,
@@ -78,14 +77,15 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const modelValue = useModel(__props, "modelValue");
 		const click = ref(false);
 		const menuContent = useTemplateRef("menuContent");
-		const { reference: activator, popover: menu, open, visible, currentPlacement, leavePending, onLeavePending, onOpen, onClose, onLeaveComplete, updatePosition } = useFloating(() => __props.popper ? toFloatingOptions(__props.popper) : __props.options ?? {}, () => __props.disabled, () => __props.openDelay, () => __props.closeDelay, () => __props.anchorEl);
+		const menuId = useId();
+		const { reference: activator, popover: menu, open, visible, currentPlacement, leavePending, onLeavePending, onOpen, onClose, onLeaveComplete, updatePosition } = useFloating(() => __props.options ?? {}, () => __props.disabled, () => __props.openDelay, () => __props.closeDelay, () => __props.anchorEl);
 		const { width } = useElementSize(activator);
 		const { hasError, hasSuccess } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
 		const menuStyles = tv({
 			slots: {
 				wrapper: "relative inline-flex max-w-full",
-				popover: "w-max z-[9999]",
-				content: "rounded overflow-hidden shadow-8 bg-white dark:bg-[#2E2E2E] text-rui-text focus:outline-none py-2",
+				popover: "w-max z-rui-menu",
+				content: "rounded-rui-panel overflow-hidden shadow-rui-menu bg-rui-menu border border-rui-divider text-rui-text focus:outline-hidden p-1",
 				details: "pt-1"
 			},
 			variants: {
@@ -127,7 +127,10 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		});
 		const menuAttrs = computed(() => ({
 			...get$1(baseMenuAttrs),
-			onClick: __props.disabled ? void 0 : checkClick
+			"onClick": __props.disabled ? void 0 : checkClick,
+			"aria-haspopup": get$1(ariaHasPopup),
+			"aria-expanded": get$1(open),
+			"aria-controls": get$1(visible) ? menuId : void 0
 		}));
 		/**
 		* Moves focus into the open menu without scrolling the page. A menu taller than the space below its
@@ -200,13 +203,12 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				class: normalizeClass(__props.classNames?.root),
 				onKeydown: _cache[5] || (_cache[5] = withKeys(($event) => onEscape($event), ["esc"]))
 			}, [
+				renderSlot(_ctx.$slots, "label"),
 				createElementVNode("div", {
 					ref_key: "activator",
 					ref: activator,
-					class: normalizeClass(unref(ui).wrapper({ class: unref(cn)(__props.classNames?.wrapper) ?? unref(cn)(__props.wrapperClass) })),
-					"data-menu-disabled": __props.disabled,
-					"aria-haspopup": unref(ariaHasPopup),
-					"aria-expanded": unref(open)
+					class: normalizeClass(unref(ui).wrapper({ class: unref(cn)(__props.classNames?.wrapper) })),
+					"data-menu-disabled": __props.disabled
 				}, [renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({
 					attrs: unref(menuAttrs),
 					open: unref(open),
@@ -219,10 +221,12 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					to: "body"
 				}, [unref(visible) ? (openBlock(), createElementBlock("div", {
 					key: 0,
+					id: unref(menuId),
 					ref_key: "menu",
 					ref: menu,
-					class: normalizeClass(unref(ui).popover({ class: unref(cn)(__props.classNames?.menu) ?? unref(cn)(__props.menuClass) })),
+					class: normalizeClass(unref(ui).popover({ class: unref(cn)(__props.classNames?.menu) })),
 					role: __props.role,
+					"aria-label": __props.menuLabel,
 					"data-placement": unref(currentPlacement),
 					onClick: _cache[3] || (_cache[3] = ($event) => __props.closeOnContentClick ? onLeave() : void 0),
 					onKeydown: _cache[4] || (_cache[4] = withKeys(($event) => onEscape($event), ["esc"]))
@@ -244,12 +248,15 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 						"data-id": "content",
 						class: unref(ui).content({ class: unref(cn)(__props.classNames?.content) }),
 						tabindex: "-1"
-					}, unref(baseMenuAttrs)), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ width: unref(width) })))], 16)) : createCommentVNode("", true)]),
+					}, unref(baseMenuAttrs)), [createVNode(unref(ButtonGroupBoundary), null, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ width: unref(width) })))]),
+						_: 3
+					})], 16)) : createCommentVNode("", true)]),
 					_: 3
 				})], 42, _hoisted_2)) : createCommentVNode("", true)])) : createCommentVNode("", true),
 				__props.showDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
 					key: 1,
-					class: normalizeClass(unref(ui).details()),
+					class: normalizeClass(unref(ui).details({ class: unref(cn)(__props.classNames?.details) })),
 					"error-messages": __props.errorMessages,
 					"success-messages": __props.successMessages,
 					hint: __props.hint

package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\ninterface MenuAttrs extends BaseMenuAttrs { onClick?: () => void }\n\nexport interface RuiMenuClassNames {\n  root?: VueClassValue;\n  wrapper?: VueClassValue;\n  menu?: VueClassValue;\n  /** Overrides applied to the popover content box (e.g. to drop its default padding). */\n  content?: VueClassValue;\n}\n\n/**\n * Roles a popover container may take. These are the values `aria-haspopup`\n * accepts, which keeps the activator and the popover in agreement.\n */\nexport type RuiMenuRole = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\nexport interface MenuProps {\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  options?: FloatingOptions;\n  /** @deprecated Use `options` instead */\n  popper?: PopperOptions;\n  classNames?: RuiMenuClassNames;\n  /** @deprecated Use `classNames.wrapper` instead */\n  wrapperClass?: string | object | string[];\n  /** @deprecated Use `classNames.menu` instead */\n  menuClass?: string | object | string[];\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  dense?: boolean;\n  /**\n   * Keeps the menu open through the interactions that would otherwise dismiss\n   * it: a click outside and an Escape press. A programmatic close (`v-model`\n   * set to `false`) still applies.\n   */\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n  /**\n   * Optional external element to anchor the menu to, instead of the\n   * activator slot's wrapper. When set, the menu's position is computed\n   * against this element.\n   */\n  anchorEl?: HTMLElement;\n  /**\n   * Role of the teleported popover. Defaults to `menu`, which is correct when\n   * the content is made of `menuitem`s. Set it to `listbox` (or `tree`, `grid`,\n   * `dialog`) when the content follows a different ARIA model, e.g. a selection\n   * list opened by a `combobox`. The activator's `aria-haspopup` follows it.\n   */\n  role?: RuiMenuRole;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  openOnHover = false,\n  disabled = false,\n  fullWidth = false,\n  openDelay = 0,\n  closeDelay = 0,\n  options,\n  popper,\n  classNames,\n  wrapperClass = '',\n  menuClass = '',\n  closeOnContentClick = false,\n  persistOnActivatorClick = false,\n  hint,\n  errorMessages = [],\n  successMessages = [],\n  showDetails = false,\n  dense = false,\n  persistent = false,\n  disableAutoFocus = false,\n  anchorEl,\n  role = 'menu',\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n  activator?: (props: {\n    attrs: { onMouseover?: () => void; onMouseleave?: () => void; onClick?: () => void };\n    open: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  default?: (props: { width: number }) => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n  reference: activator,\n  popover: menu,\n  open,\n  visible,\n  currentPlacement,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => popper ? toFloatingOptions(popper) : (options ?? {}),\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n  () => anchorEl,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst menuStyles = tv({\n  slots: {\n    wrapper: 'relative inline-flex max-w-full',\n    popover: 'w-max z-[9999]',\n    content: 'rounded overflow-hidden shadow-8 bg-white dark:bg-[#2E2E2E] text-rui-text focus:outline-none py-2',\n    details: 'pt-1',\n  },\n  variants: {\n    fullWidth: {\n      true: { wrapper: 'w-full' },\n    },\n    dense: {\n      true: { details: 'px-2' },\n      false: { details: 'px-4' },\n    },\n  },\n  defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n  fullWidth,\n  dense,\n}));\n\n// `aria-haspopup=\"true\"` means `\"menu\"`, and the default keeps emitting `true` for existing callers\nconst ariaHasPopup = computed<RuiMenuRole | 'true'>(() => role === 'menu' ? 'true' : role);\n\n/**\n * The activator attributes.\n *\n * This and the computed below it must return the same object shape from every\n * branch. Otherwise vue-tsc infers the slot's `attrs` type as a discriminated\n * union where each key is either all defined or all undefined, which breaks\n * consumer code typing its own `attrs` handler with individually optional\n * keys.\n */\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n  const clickVal = get(click);\n  return {\n    onMouseover: disabled\n      ? undefined\n      : () => {\n          if (openOnHover)\n            onOpen();\n        },\n    onMouseleave: disabled\n      ? undefined\n      : () => {\n          if (openOnHover && !clickVal)\n            onClose();\n        },\n  };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n  ...get(baseMenuAttrs),\n  onClick: disabled ? undefined : checkClick,\n}));\n\n/**\n * Moves focus into the open menu without scrolling the page. A menu taller than the space below its\n * activator would otherwise make the browser scroll the whole document to reveal the focused\n * container, sliding the page out from under the activator.\n */\nfunction focusOnContent() {\n  const content = get(menuContent);\n  if (!content)\n    return;\n\n  content.focus({ preventScroll: true });\n}\n\nfunction focusMenu(): void {\n  if (disableAutoFocus)\n    return;\n\n  nextTick(() => focusOnContent());\n}\n\n/** Hands focus back to the activator on close, likewise without scrolling to it. */\nfunction focusOnActivator() {\n  const activatorEl = get(activator);\n  if (!activatorEl) {\n    return;\n  }\n  const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n  if (focusableEl) {\n    focusableEl.focus({ preventScroll: true });\n  }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n  if (!get(open))\n    return;\n  onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (disableAutoFocus) {\n    return;\n  }\n\n  nextTick(() => focusOnActivator());\n}\n\n/**\n * `persistent` blocks the outside interactions that would close the menu, and\n * Escape is one of them, which is how `RuiDialog` and `RuiBottomSheet` already\n * read it. The guard sits here rather than in `onLeave`, because `onLeave`\n * also runs for a programmatic close through `v-model`, which must keep\n * working.\n *\n * A persistent menu leaves the key alone instead of swallowing it, so an inner\n * popover can close on Escape while the menu stays open, and an ancestor still\n * sees a key nothing consumed.\n */\nfunction onEscape(event: KeyboardEvent): void {\n  if (persistent)\n    return;\n\n  onLeave(event);\n}\n\nfunction checkClick(): void {\n  if (get(open) && get(click)) {\n    if (!persistOnActivatorClick)\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (get(open) === value)\n    return;\n\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  set(modelValue, open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(menu, () => {\n  if (get(open) && !persistent)\n    onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n  <!--\n    Escape is swallowed only while the menu is open and not persistent\n    (`onLeave` stops the event itself); a closed or persistent menu must let it\n    through, or a consumer that closes its own editor on Escape never sees the\n    key.\n  -->\n  <div\n    :class=\"classNames?.root\"\n    @keydown.esc=\"onEscape($event)\"\n  >\n    <div\n      ref=\"activator\"\n      :class=\"ui.wrapper({ class: cn(classNames?.wrapper) ?? cn(wrapperClass as VueClassValue) })\"\n      :data-menu-disabled=\"disabled\"\n      :aria-haspopup=\"ariaHasPopup\"\n      :aria-expanded=\"open\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        ref=\"menu\"\n        :class=\"ui.popover({ class: cn(classNames?.menu) ?? cn(menuClass as VueClassValue) })\"\n        :role=\"role\"\n        :data-placement=\"currentPlacement\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc=\"onEscape($event)\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            data-id=\"content\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <slot v-bind=\"{ width }\" />\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      :class=\"ui.details()\"\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":"RuiMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\n/**\n * What the activator slot binds onto its trigger. The ARIA keys belong on an\n * element that can carry them (a button, link or combobox), never on a plain\n * `div`; an activator that sets its own ARIA takes `activatorHandlers(attrs)`.\n */\ninterface MenuAttrs extends BaseMenuAttrs {\n  'onClick'?: () => void;\n  'aria-haspopup': RuiMenuRole | 'true';\n  'aria-expanded': boolean;\n  'aria-controls'?: string;\n}\n\nexport interface RuiMenuClassNames {\n  root?: VueClassValue;\n  wrapper?: VueClassValue;\n  menu?: VueClassValue;\n  /** Overrides applied to the popover content box (e.g. to drop its default padding). */\n  content?: VueClassValue;\n  /** Overrides applied to the hint and messages under the activator. */\n  details?: VueClassValue;\n}\n\n/**\n * Roles a popover container may take. These are the values `aria-haspopup`\n * accepts, which keeps the activator and the popover in agreement.\n */\nexport type RuiMenuRole = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\nexport interface MenuProps {\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  options?: FloatingOptions;\n  classNames?: RuiMenuClassNames;\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  dense?: boolean;\n  /**\n   * Keeps the menu open through the interactions that would otherwise dismiss\n   * it: a click outside and an Escape press. A programmatic close (`v-model`\n   * set to `false`) still applies.\n   */\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n  /**\n   * Optional external element to anchor the menu to, instead of the\n   * activator slot's wrapper. When set, the menu's position is computed\n   * against this element.\n   */\n  anchorEl?: HTMLElement;\n  /**\n   * Role of the teleported popover. Defaults to `menu`, which is correct when\n   * the content is made of `menuitem`s. Set it to `listbox` (or `tree`, `grid`,\n   * `dialog`) when the content follows a different ARIA model, e.g. a selection\n   * list opened by a `combobox`. The activator's `aria-haspopup` follows it.\n   */\n  role?: RuiMenuRole;\n  /**\n   * Accessible name of the teleported popover. A `dialog` popover needs one;\n   * the other roles take it from their activator or options.\n   */\n  menuLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  openOnHover = false,\n  disabled = false,\n  fullWidth = false,\n  openDelay = 0,\n  closeDelay = 0,\n  options,\n  classNames,\n  closeOnContentClick = false,\n  persistOnActivatorClick = false,\n  hint,\n  errorMessages = [],\n  successMessages = [],\n  showDetails = false,\n  dense = false,\n  persistent = false,\n  disableAutoFocus = false,\n  anchorEl,\n  role = 'menu',\n  menuLabel,\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n  activator?: (props: {\n    // An inline type literal, so callers can pass it on as `Record<string, unknown>`\n    attrs: {\n      'onMouseover'?: () => void;\n      'onMouseleave'?: () => void;\n      'onClick'?: () => void;\n      'aria-haspopup': RuiMenuRole | 'true';\n      'aria-expanded': boolean;\n      'aria-controls'?: string;\n    };\n    open: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  default?: (props: { width: number }) => any;\n  /** Rendered above the activator, outside the element the menu positions against. */\n  label?: () => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\nconst menuId = useId();\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n  reference: activator,\n  popover: menu,\n  open,\n  visible,\n  currentPlacement,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => options ?? {},\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n  () => anchorEl,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst menuStyles = tv({\n  slots: {\n    wrapper: 'relative inline-flex max-w-full',\n    popover: 'w-max z-rui-menu',\n    // a hairline edge keeps the popup apart from a surface of nearly the same shade in dark mode\n    content: 'rounded-rui-panel overflow-hidden shadow-rui-menu bg-rui-menu border border-rui-divider text-rui-text focus:outline-hidden p-1',\n    details: 'pt-1',\n  },\n  variants: {\n    fullWidth: {\n      true: { wrapper: 'w-full' },\n    },\n    dense: {\n      true: { details: 'px-2' },\n      false: { details: 'px-4' },\n    },\n  },\n  defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n  fullWidth,\n  dense,\n}));\n\n// `aria-haspopup=\"true\"` means `\"menu\"`, and the default keeps emitting `true` for existing callers\nconst ariaHasPopup = computed<RuiMenuRole | 'true'>(() => role === 'menu' ? 'true' : role);\n\n/**\n * The activator attributes.\n *\n * This and the computed below it must return the same object shape from every\n * branch. Otherwise vue-tsc infers the slot's `attrs` type as a discriminated\n * union where each key is either all defined or all undefined, which breaks\n * consumer code typing its own `attrs` handler with individually optional\n * keys.\n */\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n  const clickVal = get(click);\n  return {\n    onMouseover: disabled\n      ? undefined\n      : () => {\n          if (openOnHover)\n            onOpen();\n        },\n    onMouseleave: disabled\n      ? undefined\n      : () => {\n          if (openOnHover && !clickVal)\n            onClose();\n        },\n  };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n  ...get(baseMenuAttrs),\n  'onClick': disabled ? undefined : checkClick,\n  'aria-haspopup': get(ariaHasPopup),\n  'aria-expanded': get(open),\n  // Only while the popover is in the DOM, so the reference never points at a missing element\n  'aria-controls': get(visible) ? menuId : undefined,\n}));\n\n/**\n * Moves focus into the open menu without scrolling the page. A menu taller than the space below its\n * activator would otherwise make the browser scroll the whole document to reveal the focused\n * container, sliding the page out from under the activator.\n */\nfunction focusOnContent() {\n  const content = get(menuContent);\n  if (!content)\n    return;\n\n  content.focus({ preventScroll: true });\n}\n\nfunction focusMenu(): void {\n  if (disableAutoFocus)\n    return;\n\n  nextTick(() => focusOnContent());\n}\n\n/** Hands focus back to the activator on close, likewise without scrolling to it. */\nfunction focusOnActivator() {\n  const activatorEl = get(activator);\n  if (!activatorEl) {\n    return;\n  }\n  const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n  if (focusableEl) {\n    focusableEl.focus({ preventScroll: true });\n  }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n  if (!get(open))\n    return;\n  onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (disableAutoFocus) {\n    return;\n  }\n\n  nextTick(() => focusOnActivator());\n}\n\n/**\n * `persistent` blocks the outside interactions that would close the menu, and\n * Escape is one of them, which is how `RuiDialog` and `RuiBottomSheet` already\n * read it. The guard sits here rather than in `onLeave`, because `onLeave`\n * also runs for a programmatic close through `v-model`, which must keep\n * working.\n *\n * A persistent menu leaves the key alone instead of swallowing it, so an inner\n * popover can close on Escape while the menu stays open, and an ancestor still\n * sees a key nothing consumed.\n */\nfunction onEscape(event: KeyboardEvent): void {\n  if (persistent)\n    return;\n\n  onLeave(event);\n}\n\nfunction checkClick(): void {\n  if (get(open) && get(click)) {\n    if (!persistOnActivatorClick)\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (get(open) === value)\n    return;\n\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  set(modelValue, open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(menu, () => {\n  if (get(open) && !persistent)\n    onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n  <!--\n    Escape is swallowed only while the menu is open and not persistent\n    (`onLeave` stops the event itself); a closed or persistent menu must let it\n    through, or a consumer that closes its own editor on Escape never sees the\n    key.\n  -->\n  <div\n    :class=\"classNames?.root\"\n    @keydown.esc=\"onEscape($event)\"\n  >\n    <slot name=\"label\" />\n    <div\n      ref=\"activator\"\n      :class=\"ui.wrapper({ class: cn(classNames?.wrapper) })\"\n      :data-menu-disabled=\"disabled\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"menuId\"\n        ref=\"menu\"\n        :class=\"ui.popover({ class: cn(classNames?.menu) })\"\n        :role=\"role\"\n        :aria-label=\"menuLabel\"\n        :data-placement=\"currentPlacement\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc=\"onEscape($event)\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            data-id=\"content\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ width }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      :class=\"ui.details({ class: cn(classNames?.details) })\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;AAqIA,IAAM,8BACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAlDF,MAAM,aAAa,SAAoB,SAAA,YAAmB;EA6C1D,MAAM,QAAQ,IAAa,KAAK;EAChC,MAAM,cAAc,eAA4B,aAAa;EAC7D,MAAM,SAAS,MAAM;EAKrB,MAAM,EACJ,WAAW,WACX,SAAS,MACT,MACA,SACA,kBACA,cACA,gBACA,QACA,SACA,iBACA,mBACE,kBACI,QAAA,WAAW,CAAC,SACZ,QAAA,gBACA,QAAA,iBACA,QAAA,kBACA,QAAA,QACR;EAEA,MAAM,EAAE,UAAU,eAAe,SAAS;EAE1C,MAAM,EAAE,UAAU,eAAe,wBACzB,QAAA,qBACA,QAAA,eACR;EAEA,MAAM,aAAa,GAAG;GACpB,OAAO;IACL,SAAS;IACT,SAAS;IAET,SAAS;IACT,SAAS;GACX;GACA,UAAU;IACR,WAAW,EACT,MAAM,EAAE,SAAS,SAAS,EAC5B;IACA,OAAO;KACL,MAAM,EAAE,SAAS,OAAO;KACxB,OAAO,EAAE,SAAS,OAAO;IAC3B;GACF;GACA,iBAAiB;IAAE,WAAW;IAAO,OAAO;GAAM;EACpD,CAAC;EAED,MAAM,KAAK,eAA8C,WAAW;GAClE,WAAQ,QAAA;GACR,OAAI,QAAA;EACN,CAAC,CAAC;EAGF,MAAM,eAAe,eAAqC,QAAA,SAAS,SAAS,SAAS,QAAA,IAAI;;;;;;;;;;EAWzF,MAAM,gBAAgB,eAA8B;GAClD,MAAM,WAAW,MAAI,KAAK;GAC1B,OAAO;IACL,aAAa,QAAA,WACT,KAAA,UACM;KACJ,IAAI,QAAA,aACF,OAAO;IACX;IACJ,cAAc,QAAA,WACV,KAAA,UACM;KACJ,IAAI,QAAA,eAAe,CAAC,UAClB,QAAQ;IACZ;GACN;EACF,CAAC;EAED,MAAM,YAAY,gBAA2B;GAC3C,GAAG,MAAI,aAAa;GACpB,WAAW,QAAA,WAAW,KAAA,IAAY;GAClC,iBAAiB,MAAI,YAAY;GACjC,iBAAiB,MAAI,IAAI;GAEzB,iBAAiB,MAAI,OAAO,IAAI,SAAS,KAAA;EAC3C,EAAE;;;;;;EAOF,SAAS,iBAAiB;GACxB,MAAM,UAAU,MAAI,WAAW;GAC/B,IAAI,CAAC,SACH;GAEF,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;EACvC;EAEA,SAAS,YAAkB;GACzB,IAAI,QAAA,kBACF;GAEF,eAAe,eAAe,CAAC;EACjC;;EAGA,SAAS,mBAAmB;GAC1B,MAAM,cAAc,MAAI,SAAS;GACjC,IAAI,CAAC,aACH;GAEF,MAAM,cAAc,YAAY,cAA2B,2BAA2B;GACtF,IAAI,aACF,YAAY,MAAM,EAAE,eAAe,KAAK,CAAC;EAE7C;EAEA,SAAS,QAAQ,OAA6B;GAC5C,IAAI,CAAC,MAAI,IAAI,GACX;GACF,QAAQ;GACR,MAAI,OAAO,KAAK;GAChB,OAAO,gBAAgB;GAGvB,IAAI,QAAA,kBACF;GAGF,eAAe,iBAAiB,CAAC;EACnC;;;;;;;;;;;;EAaA,SAAS,SAAS,OAA4B;GAC5C,IAAI,QAAA,YACF;GAEF,QAAQ,KAAK;EACf;EAEA,SAAS,aAAmB;GAC1B,IAAI,MAAI,IAAI,KAAK,MAAI,KAAK,GACpB;QAAA,CAAC,QAAA,yBACH,QAAQ;GAAA,OAEP;IACH,OAAO;IACP,MAAI,OAAO,IAAI;GACjB;EACF;EAEA,MAAM,aAAa,UAAU;GAC3B,IAAI,MAAI,IAAI,MAAM,OAChB;GAEF,IAAI,OAAO;IACT,OAAO;IACP,MAAI,OAAO,IAAI;GACjB,OAEE,QAAQ;EAEZ,CAAC;EAED,MAAM,OAAO,SAAS;GACpB,MAAI,YAAY,IAAI;GACpB,IAAI,MACF,UAAU;EAEd,CAAC;EAED,eAAe,YAAY;GACzB,IAAI,MAAI,IAAI,KAAK,CAAC,QAAA,YAChB,QAAQ;EACZ,GAAG,EAAE,QAAQ,CAAC,SAAS,EAAE,CAAC;;GAUxB,OAAA,UAAA,GAAA,mBAgEM,OAAA;IA/DH,OAAK,eAAE,QAAA,YAAY,IAAI;IACvB,WAAO,OAAA,OAAA,OAAA,KAAA,UAAA,WAAM,SAAS,MAAM,GAAA,CAAA,KAAA,CAAA;;IAE7B,WAAqB,KAAA,QAAA,OAAA;IACrB,mBASM,OAAA;KARA,SAAA;KAAJ,KAAI;KACH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA,CAAA;KACjD,sBAAoB,QAAA;IAErB,GAAA,CAAA,WAGE,KAAA,QAAA,aAAA,eAAA,mBAAA;KAAA,OADiB,MAAA,SAAA;KAAS,MAAE,MAAA,IAAA;KAAI,UAAE,QAAA;KAAQ,UAAE,MAAA,QAAA;KAAQ,YAAE,MAAA,UAAA;IAAU,CAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA;IAI3D,CAAA,QAAA,YADT,UAAA,GAAA,YAyCW,UAAA;;KAvCT,IAAG;IAGK,GAAA,CAAA,MAAA,OAAA,KADR,UAAA,GAAA,mBAoCM,OAAA;;KAlCH,IAAI,MAAA,MAAA;KACD,SAAA;KAAJ,KAAI;KACH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,IAAI,EAAA,CAAA,CAAA;KAC9C,MAAM,QAAA;KACN,cAAY,QAAA;KACZ,kBAAgB,MAAA,gBAAA;KAChB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,sBAAsB,QAAO,IAAK,KAAA;KACzC,WAAO,OAAA,OAAA,OAAA,KAAA,UAAA,WAAM,SAAS,MAAM,GAAA,CAAA,KAAA,CAAA;IAE7B,GAAA,CAAA,YAwBkB,iBAAA;KAvBhB,sBAAmB;KACnB,oBAAiB;KACjB,kBAAe;KACf,sBAAmB;KACnB,oBAAiB;KACjB,kBAAe;KACd,eAAY,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,cAAA,CAAc,CAAA;KAC5B,cAAW,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAA,IAAe,MAAA,eAAA,CAAe,CAAA,IAAK,KAAA;KAChD,eAAY,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,cAAA,CAAc,CAAA;;KAE7B,SAAA,cAYM,CAXE,MAAA,IAAA,KADR,UAAA,GAAA,mBAYM,OAZN,WAYM;MAVA,SAAA;MAAJ,KAAI;MACJ,KAAI;MACJ,WAAQ;MACP,OAAO,MAAA,EAAA,CAAE,CAAC,QAAO,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA;MAClD,UAAS;KACD,GAAA,MAAA,aAAA,CAAa,GAAA,CAErB,YAEsB,MAAA,mBAAA,GAAA,MAAA;MADpB,SAAA,cAA2B,CAA3B,WAA2B,KAAA,QAAA,WAAA,eAAA,mBAAA,EAAA,OAAX,MAAA,KAAA,EAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;IAOvB,QAAA,eADR,UAAA,GAAA,YAME,2BAAA;;KAJC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA,CAAA;KACjD,kBAAgB,QAAA;KAChB,oBAAkB,QAAA;KAClB,MAAM,QAAA"}

package/dist/components/overlays/menu/activator-handlers.d.ts

@@ -0,0 +1,11 @@
+export interface ActivatorHandlers {
+    onClick?: () => void;
+    onMouseover?: () => void;
+    onMouseleave?: () => void;
+}
+/**
+ * Keeps only the event handlers of an activator slot's `attrs`. For an
+ * activator that sets its own ARIA, or one rendered as an element that cannot
+ * carry `aria-haspopup` and `aria-expanded`.
+ */
+export declare function activatorHandlers(attrs: ActivatorHandlers): ActivatorHandlers;

package/dist/components/overlays/menu/activator-handlers.js

@@ -0,0 +1,18 @@
+//#region src/components/overlays/menu/activator-handlers.ts
+/**
+* Keeps only the event handlers of an activator slot's `attrs`. For an
+* activator that sets its own ARIA, or one rendered as an element that cannot
+* carry `aria-haspopup` and `aria-expanded`.
+*/
+function activatorHandlers(attrs) {
+	const { onClick, onMouseover, onMouseleave } = attrs;
+	return {
+		onClick,
+		onMouseover,
+		onMouseleave
+	};
+}
+//#endregion
+export { activatorHandlers };
+
+//# sourceMappingURL=activator-handlers.js.map

package/dist/components/overlays/menu/activator-handlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activator-handlers.js","names":[],"sources":["../../../../src/components/overlays/menu/activator-handlers.ts"],"sourcesContent":["export interface ActivatorHandlers {\n  onClick?: () => void;\n  onMouseover?: () => void;\n  onMouseleave?: () => void;\n}\n\n/**\n * Keeps only the event handlers of an activator slot's `attrs`. For an\n * activator that sets its own ARIA, or one rendered as an element that cannot\n * carry `aria-haspopup` and `aria-expanded`.\n */\nexport function activatorHandlers(attrs: ActivatorHandlers): ActivatorHandlers {\n  const { onClick, onMouseover, onMouseleave } = attrs;\n  return { onClick, onMouseover, onMouseleave };\n}\n"],"mappings":";;;;;;AAWA,SAAgB,kBAAkB,OAA6C;CAC7E,MAAM,EAAE,SAAS,aAAa,iBAAiB;CAC/C,OAAO;EAAE;EAAS;EAAa;CAAa;AAC9C"}