@plexui/vue 0.1.0 → 0.1.2

package/dist/es/components/Dialog/Dialog.js

@@ -88,6 +88,11 @@ export const DialogContent = defineComponent({
         width: { type: [Number, String], default: 480 },
         /** Renders the close button in the top corner. @default true */
         showClose: { type: Boolean, default: true },
+        /**
+         * Rounder panel and a round close button, for dialogs that sit beside pill controls.
+         * @default false
+         */
+        pill: { type: Boolean, default: false },
         /**
          * Where the panel sits: centered, near the top, a sheet along the bottom,
          * a full-height panel on the start or end side, or the whole screen.
@@ -140,6 +145,7 @@ export const DialogContent = defineComponent({
                 "style": toCssVariables({ "dialog-width": props.width }),
                 "data-placement": props.placement === "center" ? undefined : props.placement,
                 "data-mobile-placement": props.mobilePlacement,
+                "data-pill": props.pill ? "" : undefined,
                 "onOpenAutoFocus": props.onOpenAutoFocus,
                 "onCloseAutoFocus": props.onCloseAutoFocus,
                 // Radix labels and describes the content only by mounted parts

package/dist/es/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  cloneVNode,\n  computed,\n  createCommentVNode,\n  defineComponent,\n  h,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  type ComputedRef,\n  type HTMLAttributes,\n  type InjectionKey,\n  type PropType,\n  type Ref,\n  type VNode,\n} from \"vue\"\nimport {\n  DialogContent as RekaDialogContent,\n  DialogDescription as RekaDialogDescription,\n  DialogOverlay as RekaDialogOverlay,\n  DialogPortal as RekaDialogPortal,\n  DialogRoot as RekaDialogRoot,\n  DialogTitle as RekaDialogTitle,\n  injectDialogRootContext,\n  useForwardExpose,\n  useId,\n} from \"reka-ui\"\nimport { useEscCloseStack } from \"../../composables/useEscCloseStack.js\"\nimport { preventDefaultHandler, toCssVariables } from \"../../lib/helpers.js\"\nimport { dismissableSurfaces, useDeferredPointerDownOutside } from \"../Popover/deferredPointerDownOutside.js\"\nimport { firstElementChild } from \"../Tooltip/slot.js\"\nimport { TransitionGroup } from \"../Transition/index.js\"\nimport s from \"@plexui/styles/components/Dialog/Dialog.module.css\"\n\n// Vue port of packages/ui/src/components/Dialog/Dialog.tsx on Reka UI\n// (the Vue lineage of Radix, same anatomy). Exports are flat (`Dialog`,\n// `DialogTrigger`, ...) because runtime-compiled templates cannot resolve\n// `Dialog.Trigger` from the `components` option.\n//\n// Where Reka differs from Radix (radix-ui 1.8), the port follows Radix:\n// - The content is labelled and described only while a DialogTitle /\n//   DialogDescription is mounted.\n// - A press outside (the overlay) closes it on the click that follows\n//   (../Popover/deferredPointerDownOutside.ts); the overlay is a dismiss\n//   surface.\n// - The portal renders once mounted, so a closed dialog server-renders\n//   nothing.\n\ntype DialogContextValue = {\n  open: ComputedRef<boolean>\n  setOpen: (nextState: boolean) => void\n  /** Mounted DialogTitle / DialogDescription parts (Radix's title and description counts) */\n  titleCount: Ref<number>\n  descriptionCount: Ref<number>\n}\n\nconst DialogContextKey: InjectionKey<DialogContextValue> = Symbol(\"PlexUIDialog\")\n\nconst useDialogContext = () => {\n  const context = inject(DialogContextKey, null)\n\n  if (!context) {\n    throw new Error(\"Dialog compound components must be used inside <Dialog>\")\n  }\n\n  return context\n}\n\n/** Modal dialog root. Uncontrolled by default; bind `v-model:open` to control it. */\nexport const Dialog = defineComponent({\n  name: \"Dialog\",\n  props: {\n    open: { type: Boolean, default: undefined },\n  },\n  emits: {\n    \"update:open\": (_open: boolean) => true,\n  },\n  setup(props, { slots, emit }) {\n    const internalOpen = ref(false)\n    const isOpen = computed(() => props.open ?? internalOpen.value)\n\n    const setOpen = (nextState: boolean) => {\n      emit(\"update:open\", nextState)\n      internalOpen.value = nextState\n    }\n\n    provide(DialogContextKey, { open: isOpen, setOpen, titleCount: ref(0), descriptionCount: ref(0) })\n\n    return () =>\n      h(RekaDialogRoot, { \"open\": isOpen.value, \"onUpdate:open\": setOpen }, { default: () => slots.default?.() })\n  },\n})\n\n// Trigger and Close render their child with the dialog wiring merged in,\n// like Reka's `asChild` parts, but run the dialog action after the child's\n// own click handlers and skip it when one called preventDefault() (Radix's\n// composeEventHandlers). Reka's parts run first and cannot be cancelled.\n// Attributes the child sets itself win, as with Radix and Reka slots. The\n// child is the first element, also through a forwarded `<slot />`.\nconst withDialogProps = (\n  child: VNode | undefined,\n  props: Record<string, unknown>,\n  onClick: (event: Event) => void,\n  ref?: (el: unknown) => void,\n) => {\n  if (!child) return null\n  const own = child.props ?? {}\n  const extra = Object.fromEntries(Object.entries(props).filter(([key]) => !(key in own)))\n  return cloneVNode(child, { ...extra, onClick, ...(ref ? { ref } : {}) }, true)\n}\n\nexport const DialogTrigger = defineComponent({\n  name: \"DialogTrigger\",\n  setup(_props, { slots }) {\n    const rootContext = injectDialogRootContext()\n    const { forwardRef, currentElement } = useForwardExpose()\n    rootContext.contentId ||= useId(undefined, \"reka-dialog-content\")\n    // Focus returns here when the dialog closes\n    onMounted(() => {\n      rootContext.triggerElement.value = currentElement.value\n    })\n\n    const onClick = (event: Event) => {\n      if (!event.defaultPrevented) rootContext.onOpenToggle()\n    }\n\n    return () => {\n      const open = rootContext.open.value\n      return withDialogProps(\n        firstElementChild(slots.default?.()),\n        {\n          \"type\": \"button\",\n          \"aria-haspopup\": \"dialog\",\n          \"aria-expanded\": open || false,\n          \"aria-controls\": open ? rootContext.contentId : undefined,\n          \"data-state\": open ? \"open\" : \"closed\",\n        },\n        onClick,\n        forwardRef as (el: unknown) => void,\n      )\n    }\n  },\n})\n\nconst CloseIcon = () =>\n  h(\"svg\", { \"class\": s.CloseIcon, \"viewBox\": \"0 0 20 20\", \"width\": \"20\", \"height\": \"20\", \"aria-hidden\": \"true\" }, [\n    h(\"path\", {\n      fill: \"currentColor\",\n      d: \"M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06\",\n    }),\n  ])\n\n/** Overlay and panel. `class` lands on the panel, like `className` in React. */\nexport const DialogContent = defineComponent({\n  name: \"DialogContent\",\n  inheritAttrs: false,\n  props: {\n    /** Panel width; numbers are pixels. @default 480 */\n    width: { type: [Number, String] as PropType<number | string>, default: 480 },\n    /** Renders the close button in the top corner. @default true */\n    showClose: { type: Boolean, default: true },\n    /**\n     * Where the panel sits: centered, near the top, a sheet along the bottom,\n     * a full-height panel on the start or end side, or the whole screen.\n     * @default \"center\"\n     */\n    placement: { type: String as PropType<DialogPlacement>, default: \"center\" },\n    /** Placement at 640px and below, such as a bottom sheet on phones. @default placement */\n    mobilePlacement: String as PropType<Extract<DialogPlacement, \"center\" | \"bottom\" | \"fullscreen\">>,\n    /** Called when focus moves into the dialog on open; `event.preventDefault()` keeps it for you to place. */\n    onOpenAutoFocus: Function as PropType<(event: Event) => void>,\n    /** Called when focus returns on close; `event.preventDefault()` keeps it elsewhere. */\n    onCloseAutoFocus: Function as PropType<(event: Event) => void>,\n  },\n  setup(props, { slots, attrs }) {\n    const { open, setOpen, titleCount, descriptionCount } = useDialogContext()\n    // Radix's root makes the content id; Reka's trigger does, so a dialog\n    // without one would render `id=\"\"`\n    injectDialogRootContext().contentId ||= useId(undefined, \"reka-dialog-content\")\n\n    // Escape goes through the shared stack, as in React, so the dialog\n    // closes before overlays opened earlier (a forced-open Tooltip)\n    useEscCloseStack(open, () => {\n      setOpen(false)\n    })\n\n    // Radix's modal content: a Ctrl+click (macOS right click) does not dismiss\n    const outsidePress = useDeferredPointerDownOutside((originalEvent) => {\n      if (!originalEvent.ctrlKey) setOpen(false)\n    })\n    watch(open, (isOpen) => {\n      if (!isOpen) outsidePress.reset()\n    })\n\n    let overlayElement: Element | undefined\n    const setOverlayRef = (instance: unknown) => {\n      const el = (instance as { $el?: unknown } | null)?.$el\n      const element = el instanceof Element ? el : undefined\n      if (element === overlayElement) return\n      if (overlayElement) dismissableSurfaces.delete(overlayElement)\n      overlayElement = element\n      if (element) dismissableSurfaces.add(element)\n    }\n\n    const renderDialog = () =>\n      h(\"div\", { key: \"dialog\" }, [\n        h(RekaDialogOverlay, { class: s.Overlay, ref: setOverlayRef }),\n        h(\n          RekaDialogContent,\n          {\n            \"forceMount\": true,\n            \"class\": s.Content,\n            \"style\": toCssVariables({ \"dialog-width\": props.width }),\n            \"data-placement\": props.placement === \"center\" ? undefined : props.placement,\n            \"data-mobile-placement\": props.mobilePlacement,\n            \"onOpenAutoFocus\": props.onOpenAutoFocus,\n            \"onCloseAutoFocus\": props.onCloseAutoFocus,\n            // Radix labels and describes the content only by mounted parts\n            ...(titleCount.value > 0 ? {} : { \"aria-labelledby\": undefined }),\n            ...(descriptionCount.value > 0 ? {} : { \"aria-describedby\": undefined }),\n            \"onEscapeKeyDown\": preventDefaultHandler,\n            \"onPointerDownOutside\": outsidePress.onPointerDownOutside,\n            \"onFocusOutside\": outsidePress.onFocusOutside,\n          },\n          {\n            default: () => [\n              h(\"div\", { class: [s.Panel, attrs.class] }, [\n                props.showClose\n                  ? h(DialogClose, null, {\n                      default: () => [\n                        h(\"button\", { \"type\": \"button\", \"class\": s.CloseButton, \"aria-label\": \"Close dialog\" }, [\n                          h(CloseIcon),\n                        ]),\n                      ],\n                    })\n                  : null,\n                slots.default?.(),\n              ]),\n            ],\n          },\n        ),\n      ])\n\n    return () =>\n      h(RekaDialogPortal, null, {\n        default: () => [\n          h(\n            TransitionGroup,\n            { class: s.Transition, enterDuration: 250, exitDuration: 150, disableAnimations: true },\n            // `open && <div>` in React: closed still renders the empty wrapper\n            { default: () => [open.value ? renderDialog() : createCommentVNode()] },\n          ),\n        ],\n      })\n  },\n})\n\nexport const DialogHeader = defineComponent({\n  name: \"DialogHeader\",\n  setup(_props, { slots }) {\n    return () => h(\"div\", { class: s.Header }, slots.default?.())\n  },\n})\n\n/** The scrolling part between DialogHeader and DialogFooter: with it, only the body scrolls. */\nexport const DialogBody = defineComponent({\n  name: \"DialogBody\",\n  inheritAttrs: false,\n  setup(_props, { slots, attrs }) {\n    return () => h(\"div\", { class: [s.Body, attrs.class] }, slots.default?.())\n  },\n})\n\nexport const DialogFooter = defineComponent({\n  name: \"DialogFooter\",\n  setup(_props, { slots }) {\n    return () => h(\"div\", { class: s.Footer }, slots.default?.())\n  },\n})\n\n/** Counts a mounted part, as Radix's title and description counts do. */\nconst useMountedCount = (count: Ref<number>) => {\n  onMounted(() => {\n    count.value++\n  })\n  onBeforeUnmount(() => {\n    count.value--\n  })\n}\n\nexport const DialogTitle = defineComponent({\n  name: \"DialogTitle\",\n  setup(_props, { slots }) {\n    useMountedCount(useDialogContext().titleCount)\n    return () => h(RekaDialogTitle, { class: s.Title }, { default: () => slots.default?.() })\n  },\n})\n\nexport const DialogDescription = defineComponent({\n  name: \"DialogDescription\",\n  setup(_props, { slots }) {\n    useMountedCount(useDialogContext().descriptionCount)\n    return () => h(RekaDialogDescription, { class: s.Description }, { default: () => slots.default?.() })\n  },\n})\n\nexport const DialogClose = defineComponent({\n  name: \"DialogClose\",\n  setup(_props, { slots }) {\n    const rootContext = injectDialogRootContext()\n    const onClick = (event: Event) => {\n      if (!event.defaultPrevented) rootContext.onOpenChange(false)\n    }\n    return () => withDialogProps(firstElementChild(slots.default?.()), { type: \"button\" }, onClick)\n  },\n})\n\nexport type DialogProps = InstanceType<typeof Dialog>[\"$props\"]\n\nexport type DialogPlacement = \"center\" | \"top\" | \"bottom\" | \"start\" | \"end\" | \"fullscreen\"\n\n/** DialogContent props; `class` lands on the panel, like `className` in React. */\nexport type DialogContentProps = InstanceType<typeof DialogContent>[\"$props\"] & { class?: HTMLAttributes[\"class\"] }\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  cloneVNode,\n  computed,\n  createCommentVNode,\n  defineComponent,\n  h,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  type ComputedRef,\n  type HTMLAttributes,\n  type InjectionKey,\n  type PropType,\n  type Ref,\n  type VNode,\n} from \"vue\"\nimport {\n  DialogContent as RekaDialogContent,\n  DialogDescription as RekaDialogDescription,\n  DialogOverlay as RekaDialogOverlay,\n  DialogPortal as RekaDialogPortal,\n  DialogRoot as RekaDialogRoot,\n  DialogTitle as RekaDialogTitle,\n  injectDialogRootContext,\n  useForwardExpose,\n  useId,\n} from \"reka-ui\"\nimport { useEscCloseStack } from \"../../composables/useEscCloseStack.js\"\nimport { preventDefaultHandler, toCssVariables } from \"../../lib/helpers.js\"\nimport { dismissableSurfaces, useDeferredPointerDownOutside } from \"../Popover/deferredPointerDownOutside.js\"\nimport { firstElementChild } from \"../Tooltip/slot.js\"\nimport { TransitionGroup } from \"../Transition/index.js\"\nimport s from \"@plexui/styles/components/Dialog/Dialog.module.css\"\n\n// Vue port of packages/ui/src/components/Dialog/Dialog.tsx on Reka UI\n// (the Vue lineage of Radix, same anatomy). Exports are flat (`Dialog`,\n// `DialogTrigger`, ...) because runtime-compiled templates cannot resolve\n// `Dialog.Trigger` from the `components` option.\n//\n// Where Reka differs from Radix (radix-ui 1.8), the port follows Radix:\n// - The content is labelled and described only while a DialogTitle /\n//   DialogDescription is mounted.\n// - A press outside (the overlay) closes it on the click that follows\n//   (../Popover/deferredPointerDownOutside.ts); the overlay is a dismiss\n//   surface.\n// - The portal renders once mounted, so a closed dialog server-renders\n//   nothing.\n\ntype DialogContextValue = {\n  open: ComputedRef<boolean>\n  setOpen: (nextState: boolean) => void\n  /** Mounted DialogTitle / DialogDescription parts (Radix's title and description counts) */\n  titleCount: Ref<number>\n  descriptionCount: Ref<number>\n}\n\nconst DialogContextKey: InjectionKey<DialogContextValue> = Symbol(\"PlexUIDialog\")\n\nconst useDialogContext = () => {\n  const context = inject(DialogContextKey, null)\n\n  if (!context) {\n    throw new Error(\"Dialog compound components must be used inside <Dialog>\")\n  }\n\n  return context\n}\n\n/** Modal dialog root. Uncontrolled by default; bind `v-model:open` to control it. */\nexport const Dialog = defineComponent({\n  name: \"Dialog\",\n  props: {\n    open: { type: Boolean, default: undefined },\n  },\n  emits: {\n    \"update:open\": (_open: boolean) => true,\n  },\n  setup(props, { slots, emit }) {\n    const internalOpen = ref(false)\n    const isOpen = computed(() => props.open ?? internalOpen.value)\n\n    const setOpen = (nextState: boolean) => {\n      emit(\"update:open\", nextState)\n      internalOpen.value = nextState\n    }\n\n    provide(DialogContextKey, { open: isOpen, setOpen, titleCount: ref(0), descriptionCount: ref(0) })\n\n    return () =>\n      h(RekaDialogRoot, { \"open\": isOpen.value, \"onUpdate:open\": setOpen }, { default: () => slots.default?.() })\n  },\n})\n\n// Trigger and Close render their child with the dialog wiring merged in,\n// like Reka's `asChild` parts, but run the dialog action after the child's\n// own click handlers and skip it when one called preventDefault() (Radix's\n// composeEventHandlers). Reka's parts run first and cannot be cancelled.\n// Attributes the child sets itself win, as with Radix and Reka slots. The\n// child is the first element, also through a forwarded `<slot />`.\nconst withDialogProps = (\n  child: VNode | undefined,\n  props: Record<string, unknown>,\n  onClick: (event: Event) => void,\n  ref?: (el: unknown) => void,\n) => {\n  if (!child) return null\n  const own = child.props ?? {}\n  const extra = Object.fromEntries(Object.entries(props).filter(([key]) => !(key in own)))\n  return cloneVNode(child, { ...extra, onClick, ...(ref ? { ref } : {}) }, true)\n}\n\nexport const DialogTrigger = defineComponent({\n  name: \"DialogTrigger\",\n  setup(_props, { slots }) {\n    const rootContext = injectDialogRootContext()\n    const { forwardRef, currentElement } = useForwardExpose()\n    rootContext.contentId ||= useId(undefined, \"reka-dialog-content\")\n    // Focus returns here when the dialog closes\n    onMounted(() => {\n      rootContext.triggerElement.value = currentElement.value\n    })\n\n    const onClick = (event: Event) => {\n      if (!event.defaultPrevented) rootContext.onOpenToggle()\n    }\n\n    return () => {\n      const open = rootContext.open.value\n      return withDialogProps(\n        firstElementChild(slots.default?.()),\n        {\n          \"type\": \"button\",\n          \"aria-haspopup\": \"dialog\",\n          \"aria-expanded\": open || false,\n          \"aria-controls\": open ? rootContext.contentId : undefined,\n          \"data-state\": open ? \"open\" : \"closed\",\n        },\n        onClick,\n        forwardRef as (el: unknown) => void,\n      )\n    }\n  },\n})\n\nconst CloseIcon = () =>\n  h(\"svg\", { \"class\": s.CloseIcon, \"viewBox\": \"0 0 20 20\", \"width\": \"20\", \"height\": \"20\", \"aria-hidden\": \"true\" }, [\n    h(\"path\", {\n      fill: \"currentColor\",\n      d: \"M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06\",\n    }),\n  ])\n\n/** Overlay and panel. `class` lands on the panel, like `className` in React. */\nexport const DialogContent = defineComponent({\n  name: \"DialogContent\",\n  inheritAttrs: false,\n  props: {\n    /** Panel width; numbers are pixels. @default 480 */\n    width: { type: [Number, String] as PropType<number | string>, default: 480 },\n    /** Renders the close button in the top corner. @default true */\n    showClose: { type: Boolean, default: true },\n    /**\n     * Rounder panel and a round close button, for dialogs that sit beside pill controls.\n     * @default false\n     */\n    pill: { type: Boolean, default: false },\n    /**\n     * Where the panel sits: centered, near the top, a sheet along the bottom,\n     * a full-height panel on the start or end side, or the whole screen.\n     * @default \"center\"\n     */\n    placement: { type: String as PropType<DialogPlacement>, default: \"center\" },\n    /** Placement at 640px and below, such as a bottom sheet on phones. @default placement */\n    mobilePlacement: String as PropType<Extract<DialogPlacement, \"center\" | \"bottom\" | \"fullscreen\">>,\n    /** Called when focus moves into the dialog on open; `event.preventDefault()` keeps it for you to place. */\n    onOpenAutoFocus: Function as PropType<(event: Event) => void>,\n    /** Called when focus returns on close; `event.preventDefault()` keeps it elsewhere. */\n    onCloseAutoFocus: Function as PropType<(event: Event) => void>,\n  },\n  setup(props, { slots, attrs }) {\n    const { open, setOpen, titleCount, descriptionCount } = useDialogContext()\n    // Radix's root makes the content id; Reka's trigger does, so a dialog\n    // without one would render `id=\"\"`\n    injectDialogRootContext().contentId ||= useId(undefined, \"reka-dialog-content\")\n\n    // Escape goes through the shared stack, as in React, so the dialog\n    // closes before overlays opened earlier (a forced-open Tooltip)\n    useEscCloseStack(open, () => {\n      setOpen(false)\n    })\n\n    // Radix's modal content: a Ctrl+click (macOS right click) does not dismiss\n    const outsidePress = useDeferredPointerDownOutside((originalEvent) => {\n      if (!originalEvent.ctrlKey) setOpen(false)\n    })\n    watch(open, (isOpen) => {\n      if (!isOpen) outsidePress.reset()\n    })\n\n    let overlayElement: Element | undefined\n    const setOverlayRef = (instance: unknown) => {\n      const el = (instance as { $el?: unknown } | null)?.$el\n      const element = el instanceof Element ? el : undefined\n      if (element === overlayElement) return\n      if (overlayElement) dismissableSurfaces.delete(overlayElement)\n      overlayElement = element\n      if (element) dismissableSurfaces.add(element)\n    }\n\n    const renderDialog = () =>\n      h(\"div\", { key: \"dialog\" }, [\n        h(RekaDialogOverlay, { class: s.Overlay, ref: setOverlayRef }),\n        h(\n          RekaDialogContent,\n          {\n            \"forceMount\": true,\n            \"class\": s.Content,\n            \"style\": toCssVariables({ \"dialog-width\": props.width }),\n            \"data-placement\": props.placement === \"center\" ? undefined : props.placement,\n            \"data-mobile-placement\": props.mobilePlacement,\n            \"data-pill\": props.pill ? \"\" : undefined,\n            \"onOpenAutoFocus\": props.onOpenAutoFocus,\n            \"onCloseAutoFocus\": props.onCloseAutoFocus,\n            // Radix labels and describes the content only by mounted parts\n            ...(titleCount.value > 0 ? {} : { \"aria-labelledby\": undefined }),\n            ...(descriptionCount.value > 0 ? {} : { \"aria-describedby\": undefined }),\n            \"onEscapeKeyDown\": preventDefaultHandler,\n            \"onPointerDownOutside\": outsidePress.onPointerDownOutside,\n            \"onFocusOutside\": outsidePress.onFocusOutside,\n          },\n          {\n            default: () => [\n              h(\"div\", { class: [s.Panel, attrs.class] }, [\n                props.showClose\n                  ? h(DialogClose, null, {\n                      default: () => [\n                        h(\"button\", { \"type\": \"button\", \"class\": s.CloseButton, \"aria-label\": \"Close dialog\" }, [\n                          h(CloseIcon),\n                        ]),\n                      ],\n                    })\n                  : null,\n                slots.default?.(),\n              ]),\n            ],\n          },\n        ),\n      ])\n\n    return () =>\n      h(RekaDialogPortal, null, {\n        default: () => [\n          h(\n            TransitionGroup,\n            { class: s.Transition, enterDuration: 250, exitDuration: 150, disableAnimations: true },\n            // `open && <div>` in React: closed still renders the empty wrapper\n            { default: () => [open.value ? renderDialog() : createCommentVNode()] },\n          ),\n        ],\n      })\n  },\n})\n\nexport const DialogHeader = defineComponent({\n  name: \"DialogHeader\",\n  setup(_props, { slots }) {\n    return () => h(\"div\", { class: s.Header }, slots.default?.())\n  },\n})\n\n/** The scrolling part between DialogHeader and DialogFooter: with it, only the body scrolls. */\nexport const DialogBody = defineComponent({\n  name: \"DialogBody\",\n  inheritAttrs: false,\n  setup(_props, { slots, attrs }) {\n    return () => h(\"div\", { class: [s.Body, attrs.class] }, slots.default?.())\n  },\n})\n\nexport const DialogFooter = defineComponent({\n  name: \"DialogFooter\",\n  setup(_props, { slots }) {\n    return () => h(\"div\", { class: s.Footer }, slots.default?.())\n  },\n})\n\n/** Counts a mounted part, as Radix's title and description counts do. */\nconst useMountedCount = (count: Ref<number>) => {\n  onMounted(() => {\n    count.value++\n  })\n  onBeforeUnmount(() => {\n    count.value--\n  })\n}\n\nexport const DialogTitle = defineComponent({\n  name: \"DialogTitle\",\n  setup(_props, { slots }) {\n    useMountedCount(useDialogContext().titleCount)\n    return () => h(RekaDialogTitle, { class: s.Title }, { default: () => slots.default?.() })\n  },\n})\n\nexport const DialogDescription = defineComponent({\n  name: \"DialogDescription\",\n  setup(_props, { slots }) {\n    useMountedCount(useDialogContext().descriptionCount)\n    return () => h(RekaDialogDescription, { class: s.Description }, { default: () => slots.default?.() })\n  },\n})\n\nexport const DialogClose = defineComponent({\n  name: \"DialogClose\",\n  setup(_props, { slots }) {\n    const rootContext = injectDialogRootContext()\n    const onClick = (event: Event) => {\n      if (!event.defaultPrevented) rootContext.onOpenChange(false)\n    }\n    return () => withDialogProps(firstElementChild(slots.default?.()), { type: \"button\" }, onClick)\n  },\n})\n\nexport type DialogProps = InstanceType<typeof Dialog>[\"$props\"]\n\nexport type DialogPlacement = \"center\" | \"top\" | \"bottom\" | \"start\" | \"end\" | \"fullscreen\"\n\n/** DialogContent props; `class` lands on the panel, like `className` in React. */\nexport type DialogContentProps = InstanceType<typeof DialogContent>[\"$props\"] & { class?: HTMLAttributes[\"class\"] }\n"]}

package/dist/es/components/Menu/Menu.js

@@ -209,6 +209,7 @@ const MenuRootContentImpl = defineComponent({
         maxHeight: Number,
         layout: { type: String, required: true },
         size: String,
+        pill: Boolean,
         onCloseAutoFocus: { type: Function, required: true },
     },
     setup(props, { slots }) {
@@ -276,6 +277,7 @@ const MenuRootContentImpl = defineComponent({
                 "collisionPadding": COLLISION_PADDING,
                 "reference": internals.trigger.value ?? undefined,
                 "class": s.MenuList,
+                "data-pill": props.pill ? "" : undefined,
                 "data-layout": isHorizontal ? "horizontal" : undefined,
                 "data-size": isHorizontal && props.size ? props.size : undefined,
                 "style": {
@@ -338,6 +340,11 @@ export const MenuContent = defineComponent({
          * @default "md"
          */
         size: String,
+        /**
+         * Rounder list with fully rounded rows, for menus that sit beside pill controls.
+         * @default false
+         */
+        pill: { type: Boolean, default: false },
     },
     emits: {
         /**
@@ -771,6 +778,7 @@ const MenuSubContentImpl = defineComponent({
         width: { type: sizeProp, required: true },
         minWidth: { type: sizeProp, required: true },
         maxHeight: Number,
+        pill: Boolean,
     },
     setup(props, { slots }) {
         // The submenu's own Reka root: its content takes the submenu's ids
@@ -817,6 +825,7 @@ const MenuSubContentImpl = defineComponent({
             "collisionPadding": COLLISION_PADDING,
             "reference": subInternals.trigger.value ?? undefined,
             "class": s.MenuList,
+            "data-pill": props.pill ? "" : undefined,
             "style": {
                 ...toCssVariables({
                     "menu-width": props.width,
@@ -870,6 +879,11 @@ export const MenuSubContent = defineComponent({
         minWidth: { type: sizeProp, default: "auto" },
         /** Defines the `max-height` property of the content, in pixels. */
         maxHeight: Number,
+        /**
+         * Rounder list with fully rounded rows, for menus that sit beside pill controls.
+         * @default false
+         */
+        pill: { type: Boolean, default: false },
     },
     setup(props, { slots }) {
         const { open } = useSubmenuContext();