@mortenbrudvik/waveui 0.12.0 → 0.14.0

package/dist/components/overlays/TeachingPopover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TeachingPopover.cjs","names":["resolveDeprecatedProp","useControllable","useId","useAnnounce","React","usePopupPosition","resolvePositioning","useMergedRefs","useDismiss","usePopoverTabOrder","getTabbableThrough","Portal","composeEventHandlers","cn","teachingPopoverClassNames","focusRing","PopoverBeak","Button","DismissIcon","forcedColors","focusableDisabledProps","preventIfDisabled","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_classNames","require_useControllable","require_useId","require_useMergedRefs","require_aria","require_useAnnounce","require_usePopupPosition","require_useDismiss","require_useRestoreFocus","require_styles","require_Portal","require_Button","require_icons","require_Popover_shared","require_useResolvedTarget","react","react_jsx_runtime","DEFAULT_BACK_LABEL","DEFAULT_NEXT_LABEL","DEFAULT_DONE_LABEL","defaultStepLabel","index","count","isRefObject","target","isElementTarget","isVirtualTarget","resolveTarget","clampStep","step","TeachingPopover","activeStepProp","openProp","targetProp","rest","positioning","controlledStep","currentStep","initialStep","defaultActiveStep","defaultCurrentStep","rawStep","setStep","onStepChange","open","setOpen","defaultOpen","onOpenChange","titleId","announce","steps","shown","outOfRange","stepTitle","isFirst","isLast","hasTarget","stepPosition","labels","surface","setSurface","pointsAtOneNow","value","targetResolved","setTargetResolved","elementAvailable","surfaceRef","targetRef","targetPropRef","availabilityRef","arrowRef","placedSide","targetAvailable","anchorReady","isPositioned","visible","elementRef","ref","setFloating","element","setReference","latest","available","dismiss","onDismiss","onSurfaceKeyDown","announcedIndexRef","handleBack","handleNext","onKeyDown","floatingProps","style","className","arrowStyles","closeLabel","i"],"sources":["../../../src/components/overlays/TeachingPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { teachingPopoverClassNames } from '../../lib/classNames';\nimport { resolveDeprecatedProp, warnOnce } from '../../lib/dev';\nimport { focusableDisabledProps, preventIfDisabled } from '../../lib/aria';\nimport { DismissIcon } from '../../lib/icons';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { PopupAlign, PopupPositioning, PopupSide, VirtualElement } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useId } from '../../hooks/useId';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { resolvePositioning, usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useTargetConflictWarning } from '../../hooks/useResolvedTarget';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useAnnounce } from '../../hooks/useAnnounce';\nimport { Button } from '../button/Button';\nimport { Portal } from '../portal/Portal';\nimport { getTabbableThrough, PopoverBeak, usePopoverTabOrder } from './Popover.shared';\n\n/** Defines a single step in a teaching popover sequence. */\nexport interface TeachingPopoverStep {\n  /** Title text for the step. */\n  title: string;\n  /** Body content for the step. */\n  body: React.ReactNode;\n}\n\n/** The built-in text of a TeachingPopover, for localization (see `TeachingPopoverProps.labels`). */\nexport interface TeachingPopoverLabels {\n  /** Text of the Back button.\n   * @default 'Back'\n   */\n  back?: string;\n  /** Text of the Next button.\n   * @default 'Next'\n   */\n  next?: string;\n  /** Text of the button that replaces Next on the last step.\n   * @default 'Done'\n   */\n  done?: string;\n  /**\n   * The position of the step at `index` (zero-based, like `activeStep`) out of `count` steps. It\n   * follows the step title, after a comma, in the visually hidden part of the heading and in the\n   * announcement of a step change.\n   * @default (index, count) => `step ${index + 1} of ${count}`\n   */\n  step?: (index: number, count: number) => string;\n}\n\nconst DEFAULT_BACK_LABEL = 'Back';\nconst DEFAULT_NEXT_LABEL = 'Next';\nconst DEFAULT_DONE_LABEL = 'Done';\nconst defaultStepLabel = (index: number, count: number) => `step ${index + 1} of ${count}`;\n\n/** Properties for the TeachingPopover component. */\nexport interface TeachingPopoverProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Steps to display in the teaching popover (a readonly array is accepted). */\n  steps: readonly TeachingPopoverStep[];\n  /**\n   * Controlled index of the displayed step. Out-of-range values are clamped to the first or last\n   * step (with a development warning).\n   */\n  activeStep?: number;\n  /** Initial step index for uncontrolled usage.\n   * @default 0\n   */\n  defaultActiveStep?: number;\n  /** @deprecated Use `activeStep`. */\n  currentStep?: number;\n  /** @deprecated Use `defaultActiveStep`. */\n  defaultCurrentStep?: number;\n  /** Called with the requested step index when Next or Back is activated. */\n  onStepChange?: (step: number) => void;\n  /** Called when the popover is dismissed with Close, Done or Escape. */\n  onDismiss?: () => void;\n  /** Controlled visibility of the teaching popover. */\n  open?: boolean;\n  /** Initial visibility for uncontrolled usage.\n   * @default true\n   */\n  defaultOpen?: boolean;\n  /** Called with `false` when Close, Done or Escape dismisses the popover. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Accessible name of the built-in Close button (an icon-only button). Localize it with the\n   * page's language.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /**\n   * Text of the Back, Next and Done buttons and the wording of the step position (“step 2 of 3”),\n   * for localization. Unset members keep their English defaults.\n   */\n  labels?: TeachingPopoverLabels;\n  /**\n   * The element the popover points at (a ref, the element, or a `VirtualElement`: a rectangle such as a\n   * point; an inline object is fine). When given, the popover is\n   * rendered in a portal, positioned next to it with a beak, and flips or shifts to stay in view;\n   * without it (`undefined`) the popover renders inline where it is placed (0.4 behaviour).\n   * While the target is `null` or has not been positioned against yet (an element held in state\n   * that is not set yet, a ref that is not attached), the popover stays hidden: it is not\n   * shown, takes no focus, announces no step change and does not handle Escape until it can\n   * point at the target. It hides the same way when the target goes away later and shows again\n   * when a target returns.\n   *\n   * An element (for example one held in state through a callback ref) is followed as soon as the\n   * prop changes. A ref cannot be observed, so it is read after each render of the popover is\n   * committed, wherever the target is in the tree: an element attaching to or detaching from the\n   * ref is noticed the next time the popover renders (for example when the parent that mounts or\n   * unmounts the target re-renders it), not in a commit that does not render the popover. A\n   * memoized popover whose target mounts or unmounts in another subtree therefore stays hidden,\n   * or keeps pointing at the removed element, until it renders again. A newly passed ref keeps\n   * the previous visibility until it has been read, so a tour can move between attached refs\n   * (`target={step === 0 ? aRef : bRef}`) without hiding, and a switch to a ref that is not\n   * attached hides the popover right after that commit. Pass the element held in state when the\n   * target can mount or unmount without the popover re-rendering.\n   */\n  target?: React.RefObject<HTMLElement | null> | HTMLElement | VirtualElement | null;\n  /** Side of the `target` to open on; `start`/`end` follow the writing direction.\n   * @default 'bottom'\n   */\n  side?: PopupSide;\n  /** Alignment along the `target`'s edge.\n   * @default 'center'\n   */\n  align?: PopupAlign;\n  /**\n   * Advanced positioning (Fluent's `positioning`): `offset`, `fitViewport`, `matchReferenceWidth`,\n   * `fallbackPlacements` and `target` (used when the `target` prop is not set). `side` and `align`\n   * stay separate props.\n   * @default `{ offset: 12 }`\n   */\n  positioning?: PopupPositioning;\n  /** Ref to the popover surface (`role=\"dialog\"`). */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction isRefObject(\n  target: NonNullable<TeachingPopoverProps['target']>,\n): target is React.RefObject<HTMLElement | null> {\n  return 'current' in target;\n}\n\nfunction isElementTarget(target: TeachingPopoverProps['target']): target is HTMLElement {\n  return (\n    target != null && !isRefObject(target) && typeof (target as Partial<Node>).nodeType === 'number'\n  );\n}\n\nfunction isVirtualTarget(target: TeachingPopoverProps['target']): target is VirtualElement {\n  return target != null && !isRefObject(target) && !isElementTarget(target);\n}\n\nfunction resolveTarget(target: TeachingPopoverProps['target']): HTMLElement | null {\n  if (!target || isVirtualTarget(target)) return null;\n  return isRefObject(target) ? target.current : target;\n}\n\nfunction clampStep(step: number, count: number): number {\n  if (!Number.isFinite(step)) return 0;\n  return Math.min(Math.max(Math.trunc(step), 0), count - 1);\n}\n\n/**\n * A step-by-step onboarding popover (a non-modal `role=\"dialog\"`) with Back/Next (Done on the\n * last step) and Close.\n *\n * - Visibility is controllable: `open`/`defaultOpen` (default `true`)/`onOpenChange`; Close, Done\n *   and Escape (anywhere in the document) dismiss it and call `onDismiss`.\n * - The step is controllable with `activeStep`/`defaultActiveStep`/`onStepChange` and clamped to\n *   the available steps. The heading carries a visually hidden “step n of m”, the new step is\n *   announced politely, and Back stays focusable (`aria-disabled`) on the first step.\n * - The built-in text is English: `labels` localizes Back, Next, Done and the step position, and\n *   `closeLabel` the Close button.\n * - Focus moves to the popover when it opens and returns to the element that had it when it\n *   closes (with `target`, to the target when nothing had focus, e.g. a tour opened on page load).\n * - With `target`, the popover is portaled and positioned next to that element with a beak (it\n *   inherits the surface colors); it stays hidden while the target is `null`, not positioned yet or\n *   no longer mounted (a ref target is read after each render of the popover; see `target`).\n * - With a `VirtualElement` target there is no element to follow: the popover keeps the place of\n *   its portal in the keyboard order.\n * - With an element or ref `target`, the keyboard order treats the popover as if it followed the target: Tab past\n *   its last button continues after the target, Shift+Tab from its first button (or from the\n *   popover itself) returns to the target (for a target outside the Tab order, to the last control\n *   inside it, else to the control before it), Tab from there enters the popover, and Shift+Tab\n *   from the control after the target enters it at its last button. Tab from the last control of\n *   the page moves past the popover (it was visited after the target), and Shift+Tab from outside\n *   the page reaches the page's last control first, so a lap visits it once and Tab never cycles.\n *   With no control at or before the target, the popover is reached where it is portaled, at the\n *   end of the page: Tab from the page's last control and Shift+Tab from outside the page enter\n *   it.\n */\nexport const TeachingPopover = ({\n  steps,\n  activeStep: activeStepProp,\n  defaultActiveStep,\n  currentStep,\n  defaultCurrentStep,\n  onStepChange,\n  onDismiss,\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  closeLabel = 'Close',\n  labels,\n  target: targetProp,\n  positioning,\n  side = 'bottom',\n  align = 'center',\n  className,\n  style,\n  onKeyDown,\n  ref,\n  ...rest\n}: TeachingPopoverProps) => {\n  useTargetConflictWarning('TeachingPopover', targetProp, positioning?.target);\n  const target = (\n    targetProp !== undefined ? targetProp : positioning?.target\n  ) as TeachingPopoverProps['target'];\n  const controlledStep = resolveDeprecatedProp(\n    'TeachingPopover',\n    activeStepProp,\n    currentStep,\n    'currentStep',\n    'activeStep',\n  );\n  const initialStep =\n    resolveDeprecatedProp(\n      'TeachingPopover',\n      defaultActiveStep,\n      defaultCurrentStep,\n      'defaultCurrentStep',\n      'defaultActiveStep',\n    ) ?? 0;\n  const [rawStep, setStep] = useControllable(controlledStep, initialStep, onStepChange);\n  const [open, setOpen] = useControllable(openProp, defaultOpen ?? true, onOpenChange);\n  const titleId = useId('teaching-popover-title');\n  const announce = useAnnounce();\n\n  const count = steps.length;\n  const shown = open && count > 0;\n  const index = count > 0 ? clampStep(rawStep, count) : 0;\n  const outOfRange = count > 0 && index !== rawStep;\n  const step = count > 0 ? steps[index] : undefined;\n  const stepTitle = step?.title;\n  const isFirst = index === 0;\n  const isLast = index === count - 1;\n  const hasTarget = target !== undefined;\n  const stepPosition = count > 0 ? (labels?.step ?? defaultStepLabel)(index, count) : '';\n\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n  // Whether `target` pointed at an element when it was last read. An element (or `null`) is known\n  // during render and is mirrored here right away (C-HOOKS: adjust state during render). A ref\n  // cannot be read during render, React does not re-render when it attaches or detaches, and\n  // floating-ui keeps `isPositioned` after `setReference(null)`, so the layout effect below reads\n  // a ref after each commit and mirrors it here through a deferred update (C-HOOKS). Until that\n  // update has read a newly passed ref, the ref keeps this last known availability: moving between\n  // attached refs (a multi-target tour) or passing a new ref object on every render never hides\n  // the popover, and a switch to a ref that is not attached hides it once the update lands.\n  const pointsAtOneNow = (value: TeachingPopoverProps['target']) =>\n    isElementTarget(value) || isVirtualTarget(value);\n  const [targetResolved, setTargetResolved] = React.useState(() => pointsAtOneNow(target));\n  const elementAvailable = target === null ? false : pointsAtOneNow(target) ? true : undefined;\n  if (elementAvailable !== undefined && elementAvailable !== targetResolved) {\n    setTargetResolved(elementAvailable);\n  }\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const targetRef = React.useRef<HTMLElement | null>(null);\n  // The latest `target` prop and committed availability, read by the deferred update so that the\n  // newest target and attachment win and an unchanged resolution sets no state.\n  const targetPropRef = React.useRef(target);\n  const availabilityRef = React.useRef(targetResolved);\n  const arrowRef = React.useRef<HTMLDivElement | null>(null);\n\n  // Destructured: react-hooks/refs treats an object whose member is passed to `ref` as a ref.\n  const {\n    setReference,\n    setFloating,\n    floatingProps,\n    arrowStyles,\n    side: placedSide,\n    isPositioned,\n  } = usePopupPosition({\n    open: shown && hasTarget,\n    side,\n    align,\n    arrowRef,\n    ...resolvePositioning(positioning, { offset: 12 }),\n  });\n  // An anchored popover is shown only while it points at a resolved target: otherwise the surface\n  // is rendered (so it can be measured) but hidden, unfocused, silent and without an Escape layer.\n  const targetAvailable = target != null && (isRefObject(target) ? targetResolved : true);\n  const anchorReady = !hasTarget || (targetAvailable && isPositioned);\n  const visible = shown && anchorReady;\n  const elementRef = useMergedRefs<HTMLDivElement>(ref, surfaceRef, setSurface, setFloating);\n\n  // Point the positioning at the target after every commit. A ref is read once more when the whole\n  // commit is done (the C-HOOKS deferred-update pattern): a target that comes after the popover in\n  // the tree attaches its ref after this effect has run. That update re-reads the latest target,\n  // and only a changed element or availability updates the reference or the state.\n  React.useLayoutEffect(() => {\n    targetPropRef.current = target;\n    availabilityRef.current = targetResolved;\n    const element = resolveTarget(target);\n    targetRef.current = element;\n    setReference(isVirtualTarget(target) ? target : element);\n    if (target == null || !isRefObject(target)) return;\n    queueMicrotask(() => {\n      const latest = resolveTarget(targetPropRef.current);\n      if (latest !== targetRef.current) {\n        targetRef.current = latest;\n        setReference(latest);\n      }\n      const available = latest !== null;\n      if (available !== availabilityRef.current) {\n        availabilityRef.current = available;\n        setTargetResolved(available);\n      }\n    });\n  });\n\n  const dismiss = () => {\n    setOpen(false);\n    onDismiss?.();\n  };\n\n  const { layerId } = useDismiss({\n    open: visible,\n    onDismiss: dismiss,\n    refs: [surfaceRef],\n    anchorRef: targetRef,\n    kind: 'popover',\n    outsidePress: false,\n  });\n\n  useRestoreFocus({\n    enabled: visible,\n    container: surface,\n    fallback: () => targetRef.current,\n    onlyIfFocusInside: true,\n  });\n\n  // Portaled next to a target: the keyboard order of the popover placed right after the target.\n  const onSurfaceKeyDown = usePopoverTabOrder({\n    enabled: visible && hasTarget,\n    surface,\n    anchorRef: targetRef,\n    getPreviousStop: getTabbableThrough,\n  });\n\n  // Move focus into the popover when it becomes visible (and when a new surface mounts).\n  React.useEffect(() => {\n    if (visible && surface) surface.focus({ preventScroll: hasTarget });\n  }, [visible, surface, hasTarget]);\n\n  // Announce the new step politely after a step change (not on mount, and not while hidden: the\n  // heading, which carries the step position, is read when the popover shows and takes focus).\n  const announcedIndexRef = React.useRef(index);\n  React.useEffect(() => {\n    if (announcedIndexRef.current === index) return;\n    announcedIndexRef.current = index;\n    if (visible && stepTitle !== undefined) {\n      announce(`${stepTitle}, ${stepPosition}`);\n    }\n  }, [index, visible, stepTitle, stepPosition, announce]);\n\n  React.useEffect(() => {\n    if (!outOfRange) return;\n    warnOnce(\n      'TeachingPopover:activeStep-range',\n      `TeachingPopover: activeStep ${rawStep} is out of range for ${count} steps; showing step ${index + 1}.`,\n    );\n  }, [outOfRange, rawStep, count, index]);\n\n  if (!shown || !step) return null;\n\n  const handleBack = () => setStep(index - 1);\n  const handleNext = () => {\n    if (isLast) dismiss();\n    else setStep(index + 1);\n  };\n\n  return (\n    <Portal disabled={!hasTarget} layerId={layerId}>\n      <div\n        role=\"dialog\"\n        aria-labelledby={titleId}\n        tabIndex={-1}\n        {...rest}\n        ref={elementRef}\n        onKeyDown={composeEventHandlers(onKeyDown, onSurfaceKeyDown)}\n        {...(hasTarget\n          ? {\n              'data-side': floatingProps['data-side'],\n              'data-align': floatingProps['data-align'],\n              style: {\n                ...style,\n                ...floatingProps.style,\n                ...(anchorReady ? undefined : { visibility: 'hidden' as const }),\n              },\n            }\n          : { style })}\n        className={cn(\n          teachingPopoverClassNames.root,\n          'relative w-80 rounded-md border border-border bg-background p-5 text-foreground shadow-8',\n          focusRing,\n          className,\n        )}\n      >\n        {hasTarget && (\n          <PopoverBeak\n            ref={arrowRef}\n            side={placedSide}\n            style={arrowStyles}\n            data-wave-teaching-popover-arrow=\"\"\n            className={teachingPopoverClassNames.beak}\n          />\n        )}\n\n        <Button\n          appearance=\"subtle\"\n          size=\"small\"\n          icon={<DismissIcon />}\n          aria-label={closeLabel}\n          className={cn(teachingPopoverClassNames.closeButton, 'absolute end-3 top-3')}\n          onClick={dismiss}\n        />\n\n        <h3\n          id={titleId}\n          className={cn(\n            teachingPopoverClassNames.title,\n            'mb-2 pe-8 text-subtitle-1 font-semibold text-foreground',\n          )}\n        >\n          {step.title}\n          <span className=\"sr-only\">{`, ${stepPosition}`}</span>\n        </h3>\n\n        <div\n          className={cn(teachingPopoverClassNames.body, 'mb-4 text-body-1 text-muted-foreground')}\n        >\n          {step.body}\n        </div>\n\n        <div\n          className={cn(\n            teachingPopoverClassNames.footer,\n            'flex items-center justify-between gap-2',\n          )}\n        >\n          <div aria-hidden=\"true\" className=\"flex items-center gap-1.5\">\n            {steps.map((_, i) => (\n              <span\n                key={i}\n                data-wave-teaching-popover-dot=\"\"\n                aria-current={i === index ? 'step' : undefined}\n                className={cn(\n                  teachingPopoverClassNames.dot,\n                  'h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none',\n                  i === index\n                    ? cn('w-4 bg-primary', forcedColors.fill)\n                    : 'w-1.5 bg-stroke-accessible forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none',\n                )}\n              />\n            ))}\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            {count > 1 && (\n              <Button\n                {...focusableDisabledProps(isFirst)}\n                className={teachingPopoverClassNames.backButton}\n                onClick={preventIfDisabled(isFirst, handleBack)}\n              >\n                {labels?.back ?? DEFAULT_BACK_LABEL}\n              </Button>\n            )}\n            <Button\n              appearance=\"primary\"\n              className={teachingPopoverClassNames.nextButton}\n              onClick={handleNext}\n            >\n              {isLast ? (labels?.done ?? DEFAULT_DONE_LABEL) : (labels?.next ?? DEFAULT_NEXT_LABEL)}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </Portal>\n  );\n};\nTeachingPopover.displayName = 'TeachingPopover';\n"],"mappings":"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"}
+{"version":3,"file":"TeachingPopover.cjs","names":["TeachingPopoverRoot","TeachingPopoverTrigger","TeachingPopoverSurface","TeachingPopoverHeader","TeachingPopoverTitle","TeachingPopoverBody","TeachingPopoverFooter","TeachingPopoverCarousel","TeachingPopoverCarouselNav","TeachingPopoverCarouselPageCount","TeachingPopoverCarouselFooter","require_TeachingPopover_parts","require_TeachingPopover_root","TeachingPopover"],"sources":["../../../src/components/overlays/TeachingPopover.tsx"],"sourcesContent":["import {\n  TeachingPopoverBody,\n  TeachingPopoverCarousel,\n  TeachingPopoverCarouselFooter,\n  TeachingPopoverCarouselNav,\n  TeachingPopoverCarouselPageCount,\n  TeachingPopoverFooter,\n  TeachingPopoverHeader,\n  TeachingPopoverSurface,\n  TeachingPopoverTitle,\n  TeachingPopoverTrigger,\n} from './TeachingPopover.parts';\nimport { TeachingPopoverRoot } from './TeachingPopover.root';\n\nexport type {\n  TeachingPopoverAction,\n  TeachingPopoverLabels,\n  TeachingPopoverStep,\n} from './TeachingPopover.context';\nexport type { TeachingPopoverProps } from './TeachingPopover.root';\nexport type {\n  TeachingPopoverBodyProps,\n  TeachingPopoverCarouselFooterProps,\n  TeachingPopoverCarouselNavProps,\n  TeachingPopoverCarouselPageCountProps,\n  TeachingPopoverCarouselProps,\n  TeachingPopoverFooterProps,\n  TeachingPopoverHeaderProps,\n  TeachingPopoverSurfaceProps,\n  TeachingPopoverTitleOwnProps,\n  TeachingPopoverTitleProps,\n  TeachingPopoverTriggerChildProps,\n  TeachingPopoverTriggerProps,\n} from './TeachingPopover.parts';\n\n/**\n * A step-by-step onboarding popover (a non-modal `role=\"dialog\"`) with Back/Next (Done on the\n * last step) and Close.\n *\n * - Visibility is controllable: `open`/`defaultOpen` (default `true`, or `false` with a direct\n *   `TeachingPopover.Trigger`)/`onOpenChange`; Close, Done, Escape (anywhere in the document) and\n *   the Trigger dismiss it and call `onDismiss`.\n * - The step is controllable with `activeStep`/`defaultActiveStep`/`onStepChange` and clamped to\n *   the available steps. The heading carries a visually hidden “step n of m”, the new step is\n *   announced politely, and Back stays focusable (`aria-disabled`) on the first step.\n * - `primaryAction` and `secondaryAction` (on the popover, or on a step, which wins) replace Next/Done\n *   and Back: a label, a Button-like element or a slot object. The consumer's `onClick` runs first,\n *   then the step's normal action unless it called `preventDefault()`. Done calls `onFinish`\n *   (and, in 0.x, `onDismiss`); `footerLayout` stacks the buttons.\n * - The built-in text is English: `labels` localizes Back, Next, Done and the step position, and\n *   `closeLabel` the Close button.\n * - Focus moves to the popover when it opens and returns to the element that had it when it\n *   closes (with `target`, to the target when nothing had focus, e.g. a tour opened on page load).\n * - With `target`, the popover is portaled and positioned next to that element with a beak (it\n *   inherits the surface colors); it stays hidden while the target is `null`, not positioned yet or\n *   no longer mounted (a ref target is read after each render of the popover; see `target`).\n * - With a `VirtualElement` target there is no element to follow: the popover keeps the place of\n *   its portal in the keyboard order.\n * - With an element or ref `target`, the keyboard order treats the popover as if it followed the target: Tab past\n *   its last button continues after the target, Shift+Tab from its first button (or from the\n *   popover itself) returns to the target (for a target outside the Tab order, to the last control\n *   inside it, else to the control before it), Tab from there enters the popover, and Shift+Tab\n *   from the control after the target enters it at its last button. Tab from the last control of\n *   the page moves past the popover (it was visited after the target), and Shift+Tab from outside\n *   the page reaches the page's last control first, so a lap visits it once and Tab never cycles.\n *   With no control at or before the target, the popover is reached where it is portaled, at the\n *   end of the page: Tab from the page's last control and Shift+Tab from outside the page enter\n *   it.\n * - **Parts** (Fluent's composition): `TeachingPopover.Trigger` opens and closes the popover, gets\n *   focus back when it closes and, without a `target`, is what it points at; written directly\n *   inside TeachingPopover (a Fragment is fine), it makes the popover start closed (`defaultOpen`\n *   `false`). `TeachingPopover.Surface` is the surface itself: it takes the `className`, `style`,\n *   `ref` and other element props that the `steps` form takes on TeachingPopover. Inside it,\n *   `TeachingPopover.Header` (the Close button, with an optional caption and `icon`),\n *   `TeachingPopover.Title` (the step title with the hidden step position; it names the popover),\n *   `TeachingPopover.Body` (the step body, after an optional `media`) and\n *   `TeachingPopover.Footer` (the step dots and the buttons) each show their share of the current\n *   step unless given children; a Surface without children shows all four, which is what the\n *   `steps` form renders. Both forms share one state: the steps, the labels, the actions and the\n *   callbacks stay on TeachingPopover. A part outside a TeachingPopover throws in development.\n * - **Carousel parts**: `TeachingPopover.Carousel` holds the current step's page (the title and\n *   body) and `TeachingPopover.CarouselFooter`, the bottom row with the step buttons:\n *   `initialStepText` turns the first step's Back into a button that dismisses the popover (“Not\n *   now”), `finalStepText` relabels Done, and `layout` (`'offset'` or `'centered'`) places the\n *   indicator. The indicator is the decorative step dots unless you place\n *   `TeachingPopover.CarouselNav` (interactive step buttons, named by `labels.navButton`, each a\n *   Tab stop, the current one with `aria-current=\"step\"`) or `TeachingPopover.CarouselPageCount`\n *   (a visible “2 of 3”, worded by a render function) there. `steps` stays the only source of\n *   the pages, so there is no card part.\n *\n * The parts are also exported under flat names (`TeachingPopoverTrigger`,\n * `TeachingPopoverSurface`, `TeachingPopoverHeader`, `TeachingPopoverTitle`,\n * `TeachingPopoverBody`, `TeachingPopoverFooter`, `TeachingPopoverCarousel`,\n * `TeachingPopoverCarouselNav`, `TeachingPopoverCarouselPageCount`,\n * `TeachingPopoverCarouselFooter`) for React Server Components, which cannot use the dotted form;\n * dotted access (`TeachingPopover.Trigger`) needs a client file.\n *\n * @example\n * <TeachingPopover steps={steps} onFinish={markTourSeen}>\n *   <TeachingPopover.Trigger>\n *     <Button>Take the tour</Button>\n *   </TeachingPopover.Trigger>\n *   <TeachingPopover.Surface>\n *     <TeachingPopover.Header icon={<LightbulbIcon />}>Tip</TeachingPopover.Header>\n *     <TeachingPopover.Title />\n *     <TeachingPopover.Body media={<img src=\"/tour/search.png\" alt=\"\" />} />\n *     <TeachingPopover.Footer />\n *   </TeachingPopover.Surface>\n * </TeachingPopover>\n *\n * @example\n * <TeachingPopover steps={steps} onFinish={markTourSeen}>\n *   <TeachingPopover.Surface>\n *     <TeachingPopover.Header>Tip</TeachingPopover.Header>\n *     <TeachingPopover.Carousel>\n *       <TeachingPopover.Title />\n *       <TeachingPopover.Body />\n *       <TeachingPopover.CarouselFooter initialStepText=\"Not now\" finalStepText=\"Got it\">\n *         <TeachingPopover.CarouselNav />\n *       </TeachingPopover.CarouselFooter>\n *     </TeachingPopover.Carousel>\n *   </TeachingPopover.Surface>\n * </TeachingPopover>\n */\nexport const TeachingPopover = /* @__PURE__ */ Object.assign(TeachingPopoverRoot, {\n  Trigger: TeachingPopoverTrigger,\n  Surface: TeachingPopoverSurface,\n  Header: TeachingPopoverHeader,\n  Title: TeachingPopoverTitle,\n  Body: TeachingPopoverBody,\n  Footer: TeachingPopoverFooter,\n  Carousel: TeachingPopoverCarousel,\n  CarouselNav: TeachingPopoverCarouselNav,\n  CarouselPageCount: TeachingPopoverCarouselPageCount,\n  CarouselFooter: TeachingPopoverCarouselFooter,\n});\n\nexport {\n  TeachingPopoverTrigger,\n  TeachingPopoverSurface,\n  TeachingPopoverHeader,\n  TeachingPopoverTitle,\n  TeachingPopoverBody,\n  TeachingPopoverFooter,\n  TeachingPopoverCarousel,\n  TeachingPopoverCarouselNav,\n  TeachingPopoverCarouselPageCount,\n  TeachingPopoverCarouselFooter,\n};\n"],"mappings":"oGA4HA,IAAaa,EAAkC,OAAO,OAAOb,EAAAA,oBAAqB,CAChF,QAASC,EAAAA,uBACT,QAASC,EAAAA,uBACT,OAAQC,EAAAA,sBACR,MAAOC,EAAAA,qBACP,KAAMC,EAAAA,oBACN,OAAQC,EAAAA,sBACR,SAAUC,EAAAA,wBACV,YAAaC,EAAAA,2BACb,kBAAmBC,EAAAA,iCACnB,eAAgBC,EAAAA,6BAClB,CAAC"}

package/dist/components/overlays/TeachingPopover.context.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/dev.cjs");let n=require("react");n=e.__toESM(n,1);var r=n.createContext(null);r.displayName=`TeachingPopoverContext`;var i={open:!1,shown:!1,requestOpen:()=>{},dismiss:()=>{},finish:()=>{},count:0,index:0,step:void 0,isFirst:!0,isLast:!0,stepPosition:``,goBack:()=>{},goNext:()=>{},goToStep:()=>{},primaryAction:void 0,secondaryAction:void 0,footerLayout:`horizontal`,backLabel:`Back`,nextLabel:`Next`,doneLabel:`Done`,closeLabel:`Close`,navLabel:`Choose step`,navButtonLabel:(e,t)=>`Step ${e+1} of ${t}`,titleId:``,target:void 0,side:`bottom`,align:`center`,positioning:void 0,hasTrigger:!1,triggerElementRef:()=>{},triggerRef:{current:null},surfaceId:``,setCustomSurfaceId:()=>{},registerSurface:()=>()=>{}};function a(e){return n.useContext(r)||(t.reportMissingContext(e,`TeachingPopover`),i)}var o=n.createContext(null);o.displayName=`TeachingPopoverSurfaceContext`,exports.TeachingPopoverContext=r,exports.TeachingPopoverSurfaceContext=o,exports.useTeachingPopoverContext=a;
+//# sourceMappingURL=TeachingPopover.context.cjs.map

package/dist/components/overlays/TeachingPopover.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeachingPopover.context.cjs","names":["React","require_runtime","require_dev","react","TeachingPopoverContext","inertTeachingPopoverContext","index","count","useTeachingPopoverContext","componentName","TeachingPopoverSurfaceContext"],"sources":["../../../src/components/overlays/TeachingPopover.context.ts"],"sourcesContent":["import * as React from 'react';\nimport { reportMissingContext } from '../../lib/dev';\nimport type { SlotObject } from '../../lib/slot';\nimport type { PopupAlign, PopupPositioning, PopupSide, VirtualElement } from '../../lib/types';\n\n/*\n * The TeachingPopover's public types and its context. Imports no component: the root and the parts\n * read it, never the reverse.\n */\n\n/**\n * A footer action of a TeachingPopover (`primaryAction`, `secondaryAction`): the label content, or\n * a Button-like slot (a `Button`, `<button>` or `<a>` element, or a slot object such as\n * `{ as: 'a', href, children }`; `as` changes the element, which stays a Wave Button).\n *\n * The consumer's `onClick` runs first; then the step's normal action runs (Next or Done for the\n * primary action, Back for the secondary one) unless the handler called `event.preventDefault()`.\n */\nexport type TeachingPopoverAction =\n  | React.ReactNode\n  | (SlotObject<'button'> &\n      Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'rel' | 'download'>);\n\n/** Defines a single step in a teaching popover sequence. */\nexport interface TeachingPopoverStep {\n  /** Title text for the step. */\n  title: string;\n  /** Body content for the step. */\n  body: React.ReactNode;\n  /**\n   * Replaces the Next (or, on the last step, Done) button on this step; wins over the\n   * popover's `primaryAction`.\n   */\n  primaryAction?: TeachingPopoverAction;\n  /**\n   * Replaces the Back button on this step (also on a single-step popover, which has no Back);\n   * wins over the popover's `secondaryAction`.\n   */\n  secondaryAction?: TeachingPopoverAction;\n}\n\n/** The built-in text of a TeachingPopover, for localization (see `TeachingPopoverProps.labels`). */\nexport interface TeachingPopoverLabels {\n  /** Text of the Back button.\n   * @default 'Back'\n   */\n  back?: string;\n  /** Text of the Next button.\n   * @default 'Next'\n   */\n  next?: string;\n  /** Text of the button that replaces Next on the last step.\n   * @default 'Done'\n   */\n  done?: string;\n  /**\n   * The position of the step at `index` (zero-based, like `activeStep`) out of `count` steps. It\n   * follows the step title, after a comma, in the visually hidden part of the heading and in the\n   * announcement of a step change.\n   * @default (index, count) => `step ${index + 1} of ${count}`\n   */\n  step?: (index: number, count: number) => string;\n  /** Name of the group of step buttons that `TeachingPopover.CarouselNav` renders.\n   * @default 'Choose step'\n   */\n  nav?: string;\n  /**\n   * Name of the `TeachingPopover.CarouselNav` button that shows the step at `index` (zero-based,\n   * like `activeStep`) out of `count` steps.\n   * @default (index, count) => `Step ${index + 1} of ${count}`\n   */\n  navButton?: (index: number, count: number) => string;\n}\n\n/** What the surface points at: the `target` prop's forms (internal). */\nexport type TeachingPopoverTarget =\n  React.RefObject<HTMLElement | null> | HTMLElement | VirtualElement | null;\n\n/**\n * What the TeachingPopover root provides to its parts: one state for the `steps` form and the\n * parts, and the current step resolved once, so every part renders what the `steps` form renders.\n */\nexport interface TeachingPopoverContextValue {\n  /** The open state (`open`/`defaultOpen`). */\n  open: boolean;\n  /** Open with at least one step: the surface renders. */\n  shown: boolean;\n  /** Opens the popover (the Trigger). */\n  requestOpen: () => void;\n  /**\n   * Close, Escape, the Trigger and a CarouselFooter's `initialStepText` button: closes, then calls\n   * `onDismiss`.\n   */\n  dismiss: () => void;\n  /** Done, or a primary action on the last step: closes, then calls `onFinish` (and `onDismiss`). */\n  finish: () => void;\n  /** How many steps there are. */\n  count: number;\n  /** The clamped index of the current step (`0` without steps). */\n  index: number;\n  /** The current step; `undefined` without steps. */\n  step: TeachingPopoverStep | undefined;\n  isFirst: boolean;\n  isLast: boolean;\n  /** The position of the current step (`labels.step`); `''` without steps. */\n  stepPosition: string;\n  /** Back: the previous step (nothing on the first one). */\n  goBack: () => void;\n  /** Next: the next step, or `finish` on the last one. */\n  goNext: () => void;\n  /** A step button of TeachingPopover.CarouselNav: the step at `index` (nothing for the current one). */\n  goToStep: (index: number) => void;\n  /** The current step's primary action: its own, else the popover's; `undefined` for Next/Done. */\n  primaryAction: TeachingPopoverAction | undefined;\n  /** The current step's secondary action: its own, else the popover's; `undefined` for Back. */\n  secondaryAction: TeachingPopoverAction | undefined;\n  /** The popover's `footerLayout`. */\n  footerLayout: 'horizontal' | 'vertical';\n  /** The text of the Back, Next, Done and Close buttons, English unless localized. */\n  backLabel: string;\n  nextLabel: string;\n  doneLabel: string;\n  closeLabel: string;\n  /** The names of TeachingPopover.CarouselNav's group and of its step buttons (`labels`). */\n  navLabel: string;\n  navButtonLabel: (index: number, count: number) => string;\n  /** The id of the step title's heading, which names the surface. */\n  titleId: string;\n  /**\n   * What the surface points at: `target`, else `positioning.target`, else the Trigger's element\n   * (`null` until it attaches); `undefined` renders the surface in place.\n   */\n  target: TeachingPopoverTarget | undefined;\n  side: PopupSide;\n  align: PopupAlign;\n  positioning: PopupPositioning | undefined;\n  /** Whether a Trigger is a direct child or has attached its element. */\n  hasTrigger: boolean;\n  /** The Trigger's ref callback: its element is the surface's target when `target` is unset. */\n  triggerElementRef: React.RefCallback<HTMLElement>;\n  /** The Trigger's element (`null` without one), where focus returns when the popover closes. */\n  triggerRef: React.RefObject<HTMLElement | null>;\n  /** The surface's id for the Trigger's `aria-controls`: the consumer's, else a generated one. */\n  surfaceId: string;\n  /** A TeachingPopover.Surface reports its `id` (`undefined` without one, or when it unmounts). */\n  setCustomSurfaceId: (id: string | undefined) => void;\n  /**\n   * A TeachingPopover.Surface registers while it is mounted, wherever it is among the children:\n   * the root then renders no surface of its own, and warns when more than one registers.\n   */\n  registerSurface: () => () => void;\n}\n\nexport const TeachingPopoverContext = React.createContext<TeachingPopoverContextValue | null>(null);\nTeachingPopoverContext.displayName = 'TeachingPopoverContext';\n\n/** What a part reads outside a TeachingPopover in production (C-CONTEXT): closed, inert. */\nconst inertTeachingPopoverContext: TeachingPopoverContextValue = {\n  open: false,\n  shown: false,\n  requestOpen: () => {},\n  dismiss: () => {},\n  finish: () => {},\n  count: 0,\n  index: 0,\n  step: undefined,\n  isFirst: true,\n  isLast: true,\n  stepPosition: '',\n  goBack: () => {},\n  goNext: () => {},\n  goToStep: () => {},\n  primaryAction: undefined,\n  secondaryAction: undefined,\n  footerLayout: 'horizontal',\n  backLabel: 'Back',\n  nextLabel: 'Next',\n  doneLabel: 'Done',\n  closeLabel: 'Close',\n  navLabel: 'Choose step',\n  navButtonLabel: (index, count) => `Step ${index + 1} of ${count}`,\n  titleId: '',\n  target: undefined,\n  side: 'bottom',\n  align: 'center',\n  positioning: undefined,\n  hasTrigger: false,\n  triggerElementRef: () => {},\n  triggerRef: { current: null },\n  surfaceId: '',\n  setCustomSurfaceId: () => {},\n  registerSurface: () => () => {},\n};\n\n/**\n * C-CONTEXT: the enclosing TeachingPopover's context. Outside one it throws\n * `[WaveUI] <componentName> must be used within TeachingPopover` in development; in production it\n * logs once and returns an inert value.\n */\nexport function useTeachingPopoverContext(componentName: string): TeachingPopoverContextValue {\n  const context = React.useContext(TeachingPopoverContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'TeachingPopover');\n  return inertTeachingPopoverContext;\n}\n\n/** The title registry of one surface (see {@link TeachingPopoverSurfaceContext}). */\nexport interface TeachingPopoverSurfaceContextValue {\n  /** A TeachingPopover.Title registers its id while its element is mounted; returns the release. */\n  registerTitle: (id: string) => () => void;\n}\n\n/**\n * What a surface with children of yours gives the titles among them: a TeachingPopover.Title\n * registers its id, and the first registered one names the surface (`aria-labelledby`). `null`\n * outside a surface and inside the content a surface shows without children, whose title id it\n * knows while rendering. Optional (a title outside a surface names nothing), so there is no hook\n * that reports a missing provider.\n */\nexport const TeachingPopoverSurfaceContext =\n  React.createContext<TeachingPopoverSurfaceContextValue | null>(null);\nTeachingPopoverSurfaceContext.displayName = 'TeachingPopoverSurfaceContext';\n"],"mappings":"4IAyJA,IAAaI,EAAyBJ,EAAM,cAAkD,IAAI,EAClG,EAAuB,YAAc,yBAGrC,IAAMK,EAA2D,CAC/D,KAAM,GACN,MAAO,GACP,gBAAmB,CAAC,EACpB,YAAe,CAAC,EAChB,WAAc,CAAC,EACf,MAAO,EACP,MAAO,EACP,KAAM,IAAA,GACN,QAAS,GACT,OAAQ,GACR,aAAc,GACd,WAAc,CAAC,EACf,WAAc,CAAC,EACf,aAAgB,CAAC,EACjB,cAAe,IAAA,GACf,gBAAiB,IAAA,GACjB,aAAc,aACd,UAAW,OACX,UAAW,OACX,UAAW,OACX,WAAY,QACZ,SAAU,cACV,gBAAiB,EAAO,IAAU,QAAQC,EAAQ,EAAE,MAAMC,IAC1D,QAAS,GACT,OAAQ,IAAA,GACR,KAAM,SACN,MAAO,SACP,YAAa,IAAA,GACb,WAAY,GACZ,sBAAyB,CAAC,EAC1B,WAAY,CAAE,QAAS,IAAK,EAC5B,UAAW,GACX,uBAA0B,CAAC,EAC3B,wBAA6B,CAAC,CAChC,EAOA,SAAgBC,EAA0B,EAAoD,CAI5F,OAHgBR,EAAM,WAAWI,CAC7B,IACJF,EAAA,qBAAqBO,EAAe,iBAAiB,EAC9CJ,EACT,CAeA,IAAaK,EACXV,EAAM,cAAyD,IAAI,EACrE,EAA8B,YAAc"}

package/dist/components/overlays/TeachingPopover.context.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { reportMissingContext as e } from "../../lib/dev.mjs";
+import * as t from "react";
+//#region src/components/overlays/TeachingPopover.context.ts
+var n = t.createContext(null);
+n.displayName = "TeachingPopoverContext";
+var r = {
+	open: !1,
+	shown: !1,
+	requestOpen: () => {},
+	dismiss: () => {},
+	finish: () => {},
+	count: 0,
+	index: 0,
+	step: void 0,
+	isFirst: !0,
+	isLast: !0,
+	stepPosition: "",
+	goBack: () => {},
+	goNext: () => {},
+	goToStep: () => {},
+	primaryAction: void 0,
+	secondaryAction: void 0,
+	footerLayout: "horizontal",
+	backLabel: "Back",
+	nextLabel: "Next",
+	doneLabel: "Done",
+	closeLabel: "Close",
+	navLabel: "Choose step",
+	navButtonLabel: (e, t) => `Step ${e + 1} of ${t}`,
+	titleId: "",
+	target: void 0,
+	side: "bottom",
+	align: "center",
+	positioning: void 0,
+	hasTrigger: !1,
+	triggerElementRef: () => {},
+	triggerRef: { current: null },
+	surfaceId: "",
+	setCustomSurfaceId: () => {},
+	registerSurface: () => () => {}
+};
+function i(i) {
+	return t.useContext(n) || (e(i, "TeachingPopover"), r);
+}
+var a = t.createContext(null);
+a.displayName = "TeachingPopoverSurfaceContext";
+//#endregion
+export { n as TeachingPopoverContext, a as TeachingPopoverSurfaceContext, i as useTeachingPopoverContext };
+
+//# sourceMappingURL=TeachingPopover.context.mjs.map

package/dist/components/overlays/TeachingPopover.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeachingPopover.context.mjs","names":["React","TeachingPopoverContext","inertTeachingPopoverContext","index","count","useTeachingPopoverContext","reportMissingContext","componentName","TeachingPopoverSurfaceContext"],"sources":["../../../src/components/overlays/TeachingPopover.context.ts"],"sourcesContent":["import * as React from 'react';\nimport { reportMissingContext } from '../../lib/dev';\nimport type { SlotObject } from '../../lib/slot';\nimport type { PopupAlign, PopupPositioning, PopupSide, VirtualElement } from '../../lib/types';\n\n/*\n * The TeachingPopover's public types and its context. Imports no component: the root and the parts\n * read it, never the reverse.\n */\n\n/**\n * A footer action of a TeachingPopover (`primaryAction`, `secondaryAction`): the label content, or\n * a Button-like slot (a `Button`, `<button>` or `<a>` element, or a slot object such as\n * `{ as: 'a', href, children }`; `as` changes the element, which stays a Wave Button).\n *\n * The consumer's `onClick` runs first; then the step's normal action runs (Next or Done for the\n * primary action, Back for the secondary one) unless the handler called `event.preventDefault()`.\n */\nexport type TeachingPopoverAction =\n  | React.ReactNode\n  | (SlotObject<'button'> &\n      Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'rel' | 'download'>);\n\n/** Defines a single step in a teaching popover sequence. */\nexport interface TeachingPopoverStep {\n  /** Title text for the step. */\n  title: string;\n  /** Body content for the step. */\n  body: React.ReactNode;\n  /**\n   * Replaces the Next (or, on the last step, Done) button on this step; wins over the\n   * popover's `primaryAction`.\n   */\n  primaryAction?: TeachingPopoverAction;\n  /**\n   * Replaces the Back button on this step (also on a single-step popover, which has no Back);\n   * wins over the popover's `secondaryAction`.\n   */\n  secondaryAction?: TeachingPopoverAction;\n}\n\n/** The built-in text of a TeachingPopover, for localization (see `TeachingPopoverProps.labels`). */\nexport interface TeachingPopoverLabels {\n  /** Text of the Back button.\n   * @default 'Back'\n   */\n  back?: string;\n  /** Text of the Next button.\n   * @default 'Next'\n   */\n  next?: string;\n  /** Text of the button that replaces Next on the last step.\n   * @default 'Done'\n   */\n  done?: string;\n  /**\n   * The position of the step at `index` (zero-based, like `activeStep`) out of `count` steps. It\n   * follows the step title, after a comma, in the visually hidden part of the heading and in the\n   * announcement of a step change.\n   * @default (index, count) => `step ${index + 1} of ${count}`\n   */\n  step?: (index: number, count: number) => string;\n  /** Name of the group of step buttons that `TeachingPopover.CarouselNav` renders.\n   * @default 'Choose step'\n   */\n  nav?: string;\n  /**\n   * Name of the `TeachingPopover.CarouselNav` button that shows the step at `index` (zero-based,\n   * like `activeStep`) out of `count` steps.\n   * @default (index, count) => `Step ${index + 1} of ${count}`\n   */\n  navButton?: (index: number, count: number) => string;\n}\n\n/** What the surface points at: the `target` prop's forms (internal). */\nexport type TeachingPopoverTarget =\n  React.RefObject<HTMLElement | null> | HTMLElement | VirtualElement | null;\n\n/**\n * What the TeachingPopover root provides to its parts: one state for the `steps` form and the\n * parts, and the current step resolved once, so every part renders what the `steps` form renders.\n */\nexport interface TeachingPopoverContextValue {\n  /** The open state (`open`/`defaultOpen`). */\n  open: boolean;\n  /** Open with at least one step: the surface renders. */\n  shown: boolean;\n  /** Opens the popover (the Trigger). */\n  requestOpen: () => void;\n  /**\n   * Close, Escape, the Trigger and a CarouselFooter's `initialStepText` button: closes, then calls\n   * `onDismiss`.\n   */\n  dismiss: () => void;\n  /** Done, or a primary action on the last step: closes, then calls `onFinish` (and `onDismiss`). */\n  finish: () => void;\n  /** How many steps there are. */\n  count: number;\n  /** The clamped index of the current step (`0` without steps). */\n  index: number;\n  /** The current step; `undefined` without steps. */\n  step: TeachingPopoverStep | undefined;\n  isFirst: boolean;\n  isLast: boolean;\n  /** The position of the current step (`labels.step`); `''` without steps. */\n  stepPosition: string;\n  /** Back: the previous step (nothing on the first one). */\n  goBack: () => void;\n  /** Next: the next step, or `finish` on the last one. */\n  goNext: () => void;\n  /** A step button of TeachingPopover.CarouselNav: the step at `index` (nothing for the current one). */\n  goToStep: (index: number) => void;\n  /** The current step's primary action: its own, else the popover's; `undefined` for Next/Done. */\n  primaryAction: TeachingPopoverAction | undefined;\n  /** The current step's secondary action: its own, else the popover's; `undefined` for Back. */\n  secondaryAction: TeachingPopoverAction | undefined;\n  /** The popover's `footerLayout`. */\n  footerLayout: 'horizontal' | 'vertical';\n  /** The text of the Back, Next, Done and Close buttons, English unless localized. */\n  backLabel: string;\n  nextLabel: string;\n  doneLabel: string;\n  closeLabel: string;\n  /** The names of TeachingPopover.CarouselNav's group and of its step buttons (`labels`). */\n  navLabel: string;\n  navButtonLabel: (index: number, count: number) => string;\n  /** The id of the step title's heading, which names the surface. */\n  titleId: string;\n  /**\n   * What the surface points at: `target`, else `positioning.target`, else the Trigger's element\n   * (`null` until it attaches); `undefined` renders the surface in place.\n   */\n  target: TeachingPopoverTarget | undefined;\n  side: PopupSide;\n  align: PopupAlign;\n  positioning: PopupPositioning | undefined;\n  /** Whether a Trigger is a direct child or has attached its element. */\n  hasTrigger: boolean;\n  /** The Trigger's ref callback: its element is the surface's target when `target` is unset. */\n  triggerElementRef: React.RefCallback<HTMLElement>;\n  /** The Trigger's element (`null` without one), where focus returns when the popover closes. */\n  triggerRef: React.RefObject<HTMLElement | null>;\n  /** The surface's id for the Trigger's `aria-controls`: the consumer's, else a generated one. */\n  surfaceId: string;\n  /** A TeachingPopover.Surface reports its `id` (`undefined` without one, or when it unmounts). */\n  setCustomSurfaceId: (id: string | undefined) => void;\n  /**\n   * A TeachingPopover.Surface registers while it is mounted, wherever it is among the children:\n   * the root then renders no surface of its own, and warns when more than one registers.\n   */\n  registerSurface: () => () => void;\n}\n\nexport const TeachingPopoverContext = React.createContext<TeachingPopoverContextValue | null>(null);\nTeachingPopoverContext.displayName = 'TeachingPopoverContext';\n\n/** What a part reads outside a TeachingPopover in production (C-CONTEXT): closed, inert. */\nconst inertTeachingPopoverContext: TeachingPopoverContextValue = {\n  open: false,\n  shown: false,\n  requestOpen: () => {},\n  dismiss: () => {},\n  finish: () => {},\n  count: 0,\n  index: 0,\n  step: undefined,\n  isFirst: true,\n  isLast: true,\n  stepPosition: '',\n  goBack: () => {},\n  goNext: () => {},\n  goToStep: () => {},\n  primaryAction: undefined,\n  secondaryAction: undefined,\n  footerLayout: 'horizontal',\n  backLabel: 'Back',\n  nextLabel: 'Next',\n  doneLabel: 'Done',\n  closeLabel: 'Close',\n  navLabel: 'Choose step',\n  navButtonLabel: (index, count) => `Step ${index + 1} of ${count}`,\n  titleId: '',\n  target: undefined,\n  side: 'bottom',\n  align: 'center',\n  positioning: undefined,\n  hasTrigger: false,\n  triggerElementRef: () => {},\n  triggerRef: { current: null },\n  surfaceId: '',\n  setCustomSurfaceId: () => {},\n  registerSurface: () => () => {},\n};\n\n/**\n * C-CONTEXT: the enclosing TeachingPopover's context. Outside one it throws\n * `[WaveUI] <componentName> must be used within TeachingPopover` in development; in production it\n * logs once and returns an inert value.\n */\nexport function useTeachingPopoverContext(componentName: string): TeachingPopoverContextValue {\n  const context = React.useContext(TeachingPopoverContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'TeachingPopover');\n  return inertTeachingPopoverContext;\n}\n\n/** The title registry of one surface (see {@link TeachingPopoverSurfaceContext}). */\nexport interface TeachingPopoverSurfaceContextValue {\n  /** A TeachingPopover.Title registers its id while its element is mounted; returns the release. */\n  registerTitle: (id: string) => () => void;\n}\n\n/**\n * What a surface with children of yours gives the titles among them: a TeachingPopover.Title\n * registers its id, and the first registered one names the surface (`aria-labelledby`). `null`\n * outside a surface and inside the content a surface shows without children, whose title id it\n * knows while rendering. Optional (a title outside a surface names nothing), so there is no hook\n * that reports a missing provider.\n */\nexport const TeachingPopoverSurfaceContext =\n  React.createContext<TeachingPopoverSurfaceContextValue | null>(null);\nTeachingPopoverSurfaceContext.displayName = 'TeachingPopoverSurfaceContext';\n"],"mappings":";;;;AAyJA,IAAaC,IAAyBD,EAAM,cAAkD,IAAI;AAClG,EAAuB,cAAc;AAGrC,IAAME,IAA2D;CAC/D,MAAM;CACN,OAAO;CACP,mBAAmB,CAAC;CACpB,eAAe,CAAC;CAChB,cAAc,CAAC;CACf,OAAO;CACP,OAAO;CACP,MAAM,KAAA;CACN,SAAS;CACT,QAAQ;CACR,cAAc;CACd,cAAc,CAAC;CACf,cAAc,CAAC;CACf,gBAAgB,CAAC;CACjB,eAAe,KAAA;CACf,iBAAiB,KAAA;CACjB,cAAc;CACd,WAAW;CACX,WAAW;CACX,WAAW;CACX,YAAY;CACZ,UAAU;CACV,iBAAiB,GAAO,MAAU,QAAQC,IAAQ,EAAE,MAAMC;CAC1D,SAAS;CACT,QAAQ,KAAA;CACR,MAAM;CACN,OAAO;CACP,aAAa,KAAA;CACb,YAAY;CACZ,yBAAyB,CAAC;CAC1B,YAAY,EAAE,SAAS,KAAK;CAC5B,WAAW;CACX,0BAA0B,CAAC;CAC3B,6BAA6B,CAAC;AAChC;AAOA,SAAgBC,EAA0B,GAAoD;CAI5F,OAHgBL,EAAM,WAAWC,CAC7B,MACJK,EAAqBC,GAAe,iBAAiB,GAC9CL;AACT;AAeA,IAAaM,IACXR,EAAM,cAAyD,IAAI;AACrE,EAA8B,cAAc"}

package/dist/components/overlays/TeachingPopover.mjs

@@ -1,190 +1,20 @@
 "use client";
-import { cn as e } from "../../lib/cn.mjs";
-import { resolveDeprecatedProp as t, warnOnce as n } from "../../lib/dev.mjs";
-import { composeEventHandlers as ee } from "../../lib/composeEventHandlers.mjs";
-import { teachingPopoverClassNames as r } from "../../lib/classNames.mjs";
-import { useControllable as i } from "../../hooks/useControllable.mjs";
-import { useId as te } from "../../hooks/useId.mjs";
-import { useMergedRefs as ne } from "../../hooks/useMergedRefs.mjs";
-import { focusableDisabledProps as re, preventIfDisabled as ie } from "../../lib/aria.mjs";
-import { useAnnounce as ae } from "../../hooks/useAnnounce.mjs";
-import { resolvePositioning as oe, usePopupPosition as se } from "../../hooks/usePopupPosition.mjs";
-import { useDismiss as ce } from "../../hooks/useDismiss.mjs";
-import { useRestoreFocus as le } from "../../hooks/useRestoreFocus.mjs";
-import { focusRing as ue, forcedColors as de } from "../../lib/styles.mjs";
-import { Portal as a } from "../portal/Portal.mjs";
-import { Button as o } from "../button/Button.mjs";
-import { DismissIcon as fe } from "../../lib/icons.mjs";
-import { PopoverBeak as pe, getTabbableThrough as me, usePopoverTabOrder as he } from "./Popover.shared.mjs";
-import { useTargetConflictWarning as ge } from "../../hooks/useResolvedTarget.mjs";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { TeachingPopoverBody as e, TeachingPopoverCarousel as t, TeachingPopoverCarouselFooter as n, TeachingPopoverCarouselNav as r, TeachingPopoverCarouselPageCount as i, TeachingPopoverFooter as a, TeachingPopoverHeader as o, TeachingPopoverSurface as s, TeachingPopoverTitle as c, TeachingPopoverTrigger as l } from "./TeachingPopover.parts.mjs";
+import { TeachingPopoverRoot as u } from "./TeachingPopover.root.mjs";
 //#region src/components/overlays/TeachingPopover.tsx
-var _e = "Back", ve = "Next", ye = "Done", be = (e, t) => `step ${e + 1} of ${t}`;
-function u(e) {
-	return "current" in e;
-}
-function d(e) {
-	return e != null && !u(e) && typeof e.nodeType == "number";
-}
-function f(e) {
-	return e != null && !u(e) && !d(e);
-}
-function p(e) {
-	return !e || f(e) ? null : u(e) ? e.current : e;
-}
-function xe(e, t) {
-	return Number.isFinite(e) ? Math.min(Math.max(Math.trunc(e), 0), t - 1) : 0;
-}
-var m = ({ steps: m, activeStep: Se, defaultActiveStep: Ce, currentStep: we, defaultCurrentStep: Te, onStepChange: Ee, onDismiss: De, open: Oe, defaultOpen: ke, onOpenChange: Ae, closeLabel: je = "Close", labels: h, target: g, positioning: _, side: Me = "bottom", align: v = "center", className: y, style: b, onKeyDown: x, ref: Ne, ...Pe }) => {
-	ge("TeachingPopover", g, _?.target);
-	let S = g === void 0 ? _?.target : g, Fe = t("TeachingPopover", Se, we, "currentStep", "activeStep"), Ie = t("TeachingPopover", Ce, Te, "defaultCurrentStep", "defaultActiveStep") ?? 0, [C, w] = i(Fe, Ie, Ee), [Le, Re] = i(Oe, ke ?? !0, Ae), T = te("teaching-popover-title"), E = ae(), D = m.length, O = Le && D > 0, k = D > 0 ? xe(C, D) : 0, A = D > 0 && k !== C, j = D > 0 ? m[k] : void 0, M = j?.title, N = k === 0, P = k === D - 1, F = S !== void 0, I = D > 0 ? (h?.step ?? be)(k, D) : "", [L, ze] = s.useState(null), R = (e) => d(e) || f(e), [z, B] = s.useState(() => R(S)), V = S === null ? !1 : R(S) ? !0 : void 0;
-	V !== void 0 && V !== z && B(V);
-	let H = s.useRef(null), U = s.useRef(null), W = s.useRef(S), G = s.useRef(z), K = s.useRef(null), { setReference: q, setFloating: Be, floatingProps: J, arrowStyles: Ve, side: Y, isPositioned: He } = se({
-		open: O && F,
-		side: Me,
-		align: v,
-		arrowRef: K,
-		...oe(_, { offset: 12 })
-	}), Ue = S != null && (!u(S) || z), X = !F || Ue && He, Z = O && X, We = ne(Ne, H, ze, Be);
-	s.useLayoutEffect(() => {
-		W.current = S, G.current = z;
-		let e = p(S);
-		U.current = e, q(f(S) ? S : e), S != null && u(S) && queueMicrotask(() => {
-			let e = p(W.current);
-			e !== U.current && (U.current = e, q(e));
-			let t = e !== null;
-			t !== G.current && (G.current = t, B(t));
-		});
-	});
-	let Q = () => {
-		Re(!1), De?.();
-	}, { layerId: Ge } = ce({
-		open: Z,
-		onDismiss: Q,
-		refs: [H],
-		anchorRef: U,
-		kind: "popover",
-		outsidePress: !1
-	});
-	le({
-		enabled: Z,
-		container: L,
-		fallback: () => U.current,
-		onlyIfFocusInside: !0
-	});
-	let Ke = he({
-		enabled: Z && F,
-		surface: L,
-		anchorRef: U,
-		getPreviousStop: me
-	});
-	s.useEffect(() => {
-		Z && L && L.focus({ preventScroll: F });
-	}, [
-		Z,
-		L,
-		F
-	]);
-	let $ = s.useRef(k);
-	if (s.useEffect(() => {
-		$.current !== k && ($.current = k, Z && M !== void 0 && E(`${M}, ${I}`));
-	}, [
-		k,
-		Z,
-		M,
-		I,
-		E
-	]), s.useEffect(() => {
-		A && n("TeachingPopover:activeStep-range", `TeachingPopover: activeStep ${C} is out of range for ${D} steps; showing step ${k + 1}.`);
-	}, [
-		A,
-		C,
-		D,
-		k
-	]), !O || !j) return null;
-	let qe = () => w(k - 1), Je = () => {
-		P ? Q() : w(k + 1);
-	};
-	return /* @__PURE__ */ c(a, {
-		disabled: !F,
-		layerId: Ge,
-		children: /* @__PURE__ */ l("div", {
-			role: "dialog",
-			"aria-labelledby": T,
-			tabIndex: -1,
-			...Pe,
-			ref: We,
-			onKeyDown: ee(x, Ke),
-			...F ? {
-				"data-side": J["data-side"],
-				"data-align": J["data-align"],
-				style: {
-					...b,
-					...J.style,
-					...X ? void 0 : { visibility: "hidden" }
-				}
-			} : { style: b },
-			className: e(r.root, "relative w-80 rounded-md border border-border bg-background p-5 text-foreground shadow-8", ue, y),
-			children: [
-				F && /* @__PURE__ */ c(pe, {
-					ref: K,
-					side: Y,
-					style: Ve,
-					"data-wave-teaching-popover-arrow": "",
-					className: r.beak
-				}),
-				/* @__PURE__ */ c(o, {
-					appearance: "subtle",
-					size: "small",
-					icon: /* @__PURE__ */ c(fe, {}),
-					"aria-label": je,
-					className: e(r.closeButton, "absolute end-3 top-3"),
-					onClick: Q
-				}),
-				/* @__PURE__ */ l("h3", {
-					id: T,
-					className: e(r.title, "mb-2 pe-8 text-subtitle-1 font-semibold text-foreground"),
-					children: [j.title, /* @__PURE__ */ c("span", {
-						className: "sr-only",
-						children: `, ${I}`
-					})]
-				}),
-				/* @__PURE__ */ c("div", {
-					className: e(r.body, "mb-4 text-body-1 text-muted-foreground"),
-					children: j.body
-				}),
-				/* @__PURE__ */ l("div", {
-					className: e(r.footer, "flex items-center justify-between gap-2"),
-					children: [/* @__PURE__ */ c("div", {
-						"aria-hidden": "true",
-						className: "flex items-center gap-1.5",
-						children: m.map((t, n) => /* @__PURE__ */ c("span", {
-							"data-wave-teaching-popover-dot": "",
-							"aria-current": n === k ? "step" : void 0,
-							className: e(r.dot, "h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none", n === k ? e("w-4 bg-primary", de.fill) : "w-1.5 bg-stroke-accessible forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none")
-						}, n))
-					}), /* @__PURE__ */ l("div", {
-						className: "flex items-center gap-2",
-						children: [D > 1 && /* @__PURE__ */ c(o, {
-							...re(N),
-							className: r.backButton,
-							onClick: ie(N, qe),
-							children: h?.back ?? _e
-						}), /* @__PURE__ */ c(o, {
-							appearance: "primary",
-							className: r.nextButton,
-							onClick: Je,
-							children: P ? h?.done ?? ye : h?.next ?? ve
-						})]
-					})]
-				})
-			]
-		})
-	});
-};
-m.displayName = "TeachingPopover";
+var d = /* @__PURE__ */ Object.assign(u, {
+	Trigger: l,
+	Surface: s,
+	Header: o,
+	Title: c,
+	Body: e,
+	Footer: a,
+	Carousel: t,
+	CarouselNav: r,
+	CarouselPageCount: i,
+	CarouselFooter: n
+});
 //#endregion
-export { m as TeachingPopover };
+export { d as TeachingPopover, e as TeachingPopoverBody, t as TeachingPopoverCarousel, n as TeachingPopoverCarouselFooter, r as TeachingPopoverCarouselNav, i as TeachingPopoverCarouselPageCount, a as TeachingPopoverFooter, o as TeachingPopoverHeader, s as TeachingPopoverSurface, c as TeachingPopoverTitle, l as TeachingPopoverTrigger };
 
 //# sourceMappingURL=TeachingPopover.mjs.map

package/dist/components/overlays/TeachingPopover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TeachingPopover.mjs","names":["useId","useId$1","React","DEFAULT_BACK_LABEL","DEFAULT_NEXT_LABEL","DEFAULT_DONE_LABEL","defaultStepLabel","index","count","isRefObject","target","isElementTarget","isVirtualTarget","resolveTarget","clampStep","step","TeachingPopover","activeStepProp","openProp","targetProp","rest","positioning","controlledStep","resolveDeprecatedProp","currentStep","initialStep","defaultActiveStep","defaultCurrentStep","rawStep","setStep","useControllable","onStepChange","open","setOpen","defaultOpen","onOpenChange","titleId","announce","useAnnounce","steps","shown","outOfRange","stepTitle","isFirst","isLast","hasTarget","stepPosition","labels","surface","setSurface","pointsAtOneNow","value","targetResolved","setTargetResolved","elementAvailable","surfaceRef","targetRef","targetPropRef","availabilityRef","arrowRef","placedSide","usePopupPosition","resolvePositioning","targetAvailable","anchorReady","isPositioned","visible","elementRef","useMergedRefs","ref","setFloating","element","setReference","latest","available","dismiss","onDismiss","useDismiss","onSurfaceKeyDown","usePopoverTabOrder","getTabbableThrough","announcedIndexRef","warnOnce","handleBack","handleNext","Portal","composeEventHandlers","onKeyDown","floatingProps","style","cn","teachingPopoverClassNames","focusRing","className","PopoverBeak","arrowStyles","Button","DismissIcon","closeLabel","i","forcedColors","focusableDisabledProps","preventIfDisabled"],"sources":["../../../src/components/overlays/TeachingPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { teachingPopoverClassNames } from '../../lib/classNames';\nimport { resolveDeprecatedProp, warnOnce } from '../../lib/dev';\nimport { focusableDisabledProps, preventIfDisabled } from '../../lib/aria';\nimport { DismissIcon } from '../../lib/icons';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { PopupAlign, PopupPositioning, PopupSide, VirtualElement } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useId } from '../../hooks/useId';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { resolvePositioning, usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useTargetConflictWarning } from '../../hooks/useResolvedTarget';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useAnnounce } from '../../hooks/useAnnounce';\nimport { Button } from '../button/Button';\nimport { Portal } from '../portal/Portal';\nimport { getTabbableThrough, PopoverBeak, usePopoverTabOrder } from './Popover.shared';\n\n/** Defines a single step in a teaching popover sequence. */\nexport interface TeachingPopoverStep {\n  /** Title text for the step. */\n  title: string;\n  /** Body content for the step. */\n  body: React.ReactNode;\n}\n\n/** The built-in text of a TeachingPopover, for localization (see `TeachingPopoverProps.labels`). */\nexport interface TeachingPopoverLabels {\n  /** Text of the Back button.\n   * @default 'Back'\n   */\n  back?: string;\n  /** Text of the Next button.\n   * @default 'Next'\n   */\n  next?: string;\n  /** Text of the button that replaces Next on the last step.\n   * @default 'Done'\n   */\n  done?: string;\n  /**\n   * The position of the step at `index` (zero-based, like `activeStep`) out of `count` steps. It\n   * follows the step title, after a comma, in the visually hidden part of the heading and in the\n   * announcement of a step change.\n   * @default (index, count) => `step ${index + 1} of ${count}`\n   */\n  step?: (index: number, count: number) => string;\n}\n\nconst DEFAULT_BACK_LABEL = 'Back';\nconst DEFAULT_NEXT_LABEL = 'Next';\nconst DEFAULT_DONE_LABEL = 'Done';\nconst defaultStepLabel = (index: number, count: number) => `step ${index + 1} of ${count}`;\n\n/** Properties for the TeachingPopover component. */\nexport interface TeachingPopoverProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Steps to display in the teaching popover (a readonly array is accepted). */\n  steps: readonly TeachingPopoverStep[];\n  /**\n   * Controlled index of the displayed step. Out-of-range values are clamped to the first or last\n   * step (with a development warning).\n   */\n  activeStep?: number;\n  /** Initial step index for uncontrolled usage.\n   * @default 0\n   */\n  defaultActiveStep?: number;\n  /** @deprecated Use `activeStep`. */\n  currentStep?: number;\n  /** @deprecated Use `defaultActiveStep`. */\n  defaultCurrentStep?: number;\n  /** Called with the requested step index when Next or Back is activated. */\n  onStepChange?: (step: number) => void;\n  /** Called when the popover is dismissed with Close, Done or Escape. */\n  onDismiss?: () => void;\n  /** Controlled visibility of the teaching popover. */\n  open?: boolean;\n  /** Initial visibility for uncontrolled usage.\n   * @default true\n   */\n  defaultOpen?: boolean;\n  /** Called with `false` when Close, Done or Escape dismisses the popover. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Accessible name of the built-in Close button (an icon-only button). Localize it with the\n   * page's language.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /**\n   * Text of the Back, Next and Done buttons and the wording of the step position (“step 2 of 3”),\n   * for localization. Unset members keep their English defaults.\n   */\n  labels?: TeachingPopoverLabels;\n  /**\n   * The element the popover points at (a ref, the element, or a `VirtualElement`: a rectangle such as a\n   * point; an inline object is fine). When given, the popover is\n   * rendered in a portal, positioned next to it with a beak, and flips or shifts to stay in view;\n   * without it (`undefined`) the popover renders inline where it is placed (0.4 behaviour).\n   * While the target is `null` or has not been positioned against yet (an element held in state\n   * that is not set yet, a ref that is not attached), the popover stays hidden: it is not\n   * shown, takes no focus, announces no step change and does not handle Escape until it can\n   * point at the target. It hides the same way when the target goes away later and shows again\n   * when a target returns.\n   *\n   * An element (for example one held in state through a callback ref) is followed as soon as the\n   * prop changes. A ref cannot be observed, so it is read after each render of the popover is\n   * committed, wherever the target is in the tree: an element attaching to or detaching from the\n   * ref is noticed the next time the popover renders (for example when the parent that mounts or\n   * unmounts the target re-renders it), not in a commit that does not render the popover. A\n   * memoized popover whose target mounts or unmounts in another subtree therefore stays hidden,\n   * or keeps pointing at the removed element, until it renders again. A newly passed ref keeps\n   * the previous visibility until it has been read, so a tour can move between attached refs\n   * (`target={step === 0 ? aRef : bRef}`) without hiding, and a switch to a ref that is not\n   * attached hides the popover right after that commit. Pass the element held in state when the\n   * target can mount or unmount without the popover re-rendering.\n   */\n  target?: React.RefObject<HTMLElement | null> | HTMLElement | VirtualElement | null;\n  /** Side of the `target` to open on; `start`/`end` follow the writing direction.\n   * @default 'bottom'\n   */\n  side?: PopupSide;\n  /** Alignment along the `target`'s edge.\n   * @default 'center'\n   */\n  align?: PopupAlign;\n  /**\n   * Advanced positioning (Fluent's `positioning`): `offset`, `fitViewport`, `matchReferenceWidth`,\n   * `fallbackPlacements` and `target` (used when the `target` prop is not set). `side` and `align`\n   * stay separate props.\n   * @default `{ offset: 12 }`\n   */\n  positioning?: PopupPositioning;\n  /** Ref to the popover surface (`role=\"dialog\"`). */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction isRefObject(\n  target: NonNullable<TeachingPopoverProps['target']>,\n): target is React.RefObject<HTMLElement | null> {\n  return 'current' in target;\n}\n\nfunction isElementTarget(target: TeachingPopoverProps['target']): target is HTMLElement {\n  return (\n    target != null && !isRefObject(target) && typeof (target as Partial<Node>).nodeType === 'number'\n  );\n}\n\nfunction isVirtualTarget(target: TeachingPopoverProps['target']): target is VirtualElement {\n  return target != null && !isRefObject(target) && !isElementTarget(target);\n}\n\nfunction resolveTarget(target: TeachingPopoverProps['target']): HTMLElement | null {\n  if (!target || isVirtualTarget(target)) return null;\n  return isRefObject(target) ? target.current : target;\n}\n\nfunction clampStep(step: number, count: number): number {\n  if (!Number.isFinite(step)) return 0;\n  return Math.min(Math.max(Math.trunc(step), 0), count - 1);\n}\n\n/**\n * A step-by-step onboarding popover (a non-modal `role=\"dialog\"`) with Back/Next (Done on the\n * last step) and Close.\n *\n * - Visibility is controllable: `open`/`defaultOpen` (default `true`)/`onOpenChange`; Close, Done\n *   and Escape (anywhere in the document) dismiss it and call `onDismiss`.\n * - The step is controllable with `activeStep`/`defaultActiveStep`/`onStepChange` and clamped to\n *   the available steps. The heading carries a visually hidden “step n of m”, the new step is\n *   announced politely, and Back stays focusable (`aria-disabled`) on the first step.\n * - The built-in text is English: `labels` localizes Back, Next, Done and the step position, and\n *   `closeLabel` the Close button.\n * - Focus moves to the popover when it opens and returns to the element that had it when it\n *   closes (with `target`, to the target when nothing had focus, e.g. a tour opened on page load).\n * - With `target`, the popover is portaled and positioned next to that element with a beak (it\n *   inherits the surface colors); it stays hidden while the target is `null`, not positioned yet or\n *   no longer mounted (a ref target is read after each render of the popover; see `target`).\n * - With a `VirtualElement` target there is no element to follow: the popover keeps the place of\n *   its portal in the keyboard order.\n * - With an element or ref `target`, the keyboard order treats the popover as if it followed the target: Tab past\n *   its last button continues after the target, Shift+Tab from its first button (or from the\n *   popover itself) returns to the target (for a target outside the Tab order, to the last control\n *   inside it, else to the control before it), Tab from there enters the popover, and Shift+Tab\n *   from the control after the target enters it at its last button. Tab from the last control of\n *   the page moves past the popover (it was visited after the target), and Shift+Tab from outside\n *   the page reaches the page's last control first, so a lap visits it once and Tab never cycles.\n *   With no control at or before the target, the popover is reached where it is portaled, at the\n *   end of the page: Tab from the page's last control and Shift+Tab from outside the page enter\n *   it.\n */\nexport const TeachingPopover = ({\n  steps,\n  activeStep: activeStepProp,\n  defaultActiveStep,\n  currentStep,\n  defaultCurrentStep,\n  onStepChange,\n  onDismiss,\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  closeLabel = 'Close',\n  labels,\n  target: targetProp,\n  positioning,\n  side = 'bottom',\n  align = 'center',\n  className,\n  style,\n  onKeyDown,\n  ref,\n  ...rest\n}: TeachingPopoverProps) => {\n  useTargetConflictWarning('TeachingPopover', targetProp, positioning?.target);\n  const target = (\n    targetProp !== undefined ? targetProp : positioning?.target\n  ) as TeachingPopoverProps['target'];\n  const controlledStep = resolveDeprecatedProp(\n    'TeachingPopover',\n    activeStepProp,\n    currentStep,\n    'currentStep',\n    'activeStep',\n  );\n  const initialStep =\n    resolveDeprecatedProp(\n      'TeachingPopover',\n      defaultActiveStep,\n      defaultCurrentStep,\n      'defaultCurrentStep',\n      'defaultActiveStep',\n    ) ?? 0;\n  const [rawStep, setStep] = useControllable(controlledStep, initialStep, onStepChange);\n  const [open, setOpen] = useControllable(openProp, defaultOpen ?? true, onOpenChange);\n  const titleId = useId('teaching-popover-title');\n  const announce = useAnnounce();\n\n  const count = steps.length;\n  const shown = open && count > 0;\n  const index = count > 0 ? clampStep(rawStep, count) : 0;\n  const outOfRange = count > 0 && index !== rawStep;\n  const step = count > 0 ? steps[index] : undefined;\n  const stepTitle = step?.title;\n  const isFirst = index === 0;\n  const isLast = index === count - 1;\n  const hasTarget = target !== undefined;\n  const stepPosition = count > 0 ? (labels?.step ?? defaultStepLabel)(index, count) : '';\n\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n  // Whether `target` pointed at an element when it was last read. An element (or `null`) is known\n  // during render and is mirrored here right away (C-HOOKS: adjust state during render). A ref\n  // cannot be read during render, React does not re-render when it attaches or detaches, and\n  // floating-ui keeps `isPositioned` after `setReference(null)`, so the layout effect below reads\n  // a ref after each commit and mirrors it here through a deferred update (C-HOOKS). Until that\n  // update has read a newly passed ref, the ref keeps this last known availability: moving between\n  // attached refs (a multi-target tour) or passing a new ref object on every render never hides\n  // the popover, and a switch to a ref that is not attached hides it once the update lands.\n  const pointsAtOneNow = (value: TeachingPopoverProps['target']) =>\n    isElementTarget(value) || isVirtualTarget(value);\n  const [targetResolved, setTargetResolved] = React.useState(() => pointsAtOneNow(target));\n  const elementAvailable = target === null ? false : pointsAtOneNow(target) ? true : undefined;\n  if (elementAvailable !== undefined && elementAvailable !== targetResolved) {\n    setTargetResolved(elementAvailable);\n  }\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const targetRef = React.useRef<HTMLElement | null>(null);\n  // The latest `target` prop and committed availability, read by the deferred update so that the\n  // newest target and attachment win and an unchanged resolution sets no state.\n  const targetPropRef = React.useRef(target);\n  const availabilityRef = React.useRef(targetResolved);\n  const arrowRef = React.useRef<HTMLDivElement | null>(null);\n\n  // Destructured: react-hooks/refs treats an object whose member is passed to `ref` as a ref.\n  const {\n    setReference,\n    setFloating,\n    floatingProps,\n    arrowStyles,\n    side: placedSide,\n    isPositioned,\n  } = usePopupPosition({\n    open: shown && hasTarget,\n    side,\n    align,\n    arrowRef,\n    ...resolvePositioning(positioning, { offset: 12 }),\n  });\n  // An anchored popover is shown only while it points at a resolved target: otherwise the surface\n  // is rendered (so it can be measured) but hidden, unfocused, silent and without an Escape layer.\n  const targetAvailable = target != null && (isRefObject(target) ? targetResolved : true);\n  const anchorReady = !hasTarget || (targetAvailable && isPositioned);\n  const visible = shown && anchorReady;\n  const elementRef = useMergedRefs<HTMLDivElement>(ref, surfaceRef, setSurface, setFloating);\n\n  // Point the positioning at the target after every commit. A ref is read once more when the whole\n  // commit is done (the C-HOOKS deferred-update pattern): a target that comes after the popover in\n  // the tree attaches its ref after this effect has run. That update re-reads the latest target,\n  // and only a changed element or availability updates the reference or the state.\n  React.useLayoutEffect(() => {\n    targetPropRef.current = target;\n    availabilityRef.current = targetResolved;\n    const element = resolveTarget(target);\n    targetRef.current = element;\n    setReference(isVirtualTarget(target) ? target : element);\n    if (target == null || !isRefObject(target)) return;\n    queueMicrotask(() => {\n      const latest = resolveTarget(targetPropRef.current);\n      if (latest !== targetRef.current) {\n        targetRef.current = latest;\n        setReference(latest);\n      }\n      const available = latest !== null;\n      if (available !== availabilityRef.current) {\n        availabilityRef.current = available;\n        setTargetResolved(available);\n      }\n    });\n  });\n\n  const dismiss = () => {\n    setOpen(false);\n    onDismiss?.();\n  };\n\n  const { layerId } = useDismiss({\n    open: visible,\n    onDismiss: dismiss,\n    refs: [surfaceRef],\n    anchorRef: targetRef,\n    kind: 'popover',\n    outsidePress: false,\n  });\n\n  useRestoreFocus({\n    enabled: visible,\n    container: surface,\n    fallback: () => targetRef.current,\n    onlyIfFocusInside: true,\n  });\n\n  // Portaled next to a target: the keyboard order of the popover placed right after the target.\n  const onSurfaceKeyDown = usePopoverTabOrder({\n    enabled: visible && hasTarget,\n    surface,\n    anchorRef: targetRef,\n    getPreviousStop: getTabbableThrough,\n  });\n\n  // Move focus into the popover when it becomes visible (and when a new surface mounts).\n  React.useEffect(() => {\n    if (visible && surface) surface.focus({ preventScroll: hasTarget });\n  }, [visible, surface, hasTarget]);\n\n  // Announce the new step politely after a step change (not on mount, and not while hidden: the\n  // heading, which carries the step position, is read when the popover shows and takes focus).\n  const announcedIndexRef = React.useRef(index);\n  React.useEffect(() => {\n    if (announcedIndexRef.current === index) return;\n    announcedIndexRef.current = index;\n    if (visible && stepTitle !== undefined) {\n      announce(`${stepTitle}, ${stepPosition}`);\n    }\n  }, [index, visible, stepTitle, stepPosition, announce]);\n\n  React.useEffect(() => {\n    if (!outOfRange) return;\n    warnOnce(\n      'TeachingPopover:activeStep-range',\n      `TeachingPopover: activeStep ${rawStep} is out of range for ${count} steps; showing step ${index + 1}.`,\n    );\n  }, [outOfRange, rawStep, count, index]);\n\n  if (!shown || !step) return null;\n\n  const handleBack = () => setStep(index - 1);\n  const handleNext = () => {\n    if (isLast) dismiss();\n    else setStep(index + 1);\n  };\n\n  return (\n    <Portal disabled={!hasTarget} layerId={layerId}>\n      <div\n        role=\"dialog\"\n        aria-labelledby={titleId}\n        tabIndex={-1}\n        {...rest}\n        ref={elementRef}\n        onKeyDown={composeEventHandlers(onKeyDown, onSurfaceKeyDown)}\n        {...(hasTarget\n          ? {\n              'data-side': floatingProps['data-side'],\n              'data-align': floatingProps['data-align'],\n              style: {\n                ...style,\n                ...floatingProps.style,\n                ...(anchorReady ? undefined : { visibility: 'hidden' as const }),\n              },\n            }\n          : { style })}\n        className={cn(\n          teachingPopoverClassNames.root,\n          'relative w-80 rounded-md border border-border bg-background p-5 text-foreground shadow-8',\n          focusRing,\n          className,\n        )}\n      >\n        {hasTarget && (\n          <PopoverBeak\n            ref={arrowRef}\n            side={placedSide}\n            style={arrowStyles}\n            data-wave-teaching-popover-arrow=\"\"\n            className={teachingPopoverClassNames.beak}\n          />\n        )}\n\n        <Button\n          appearance=\"subtle\"\n          size=\"small\"\n          icon={<DismissIcon />}\n          aria-label={closeLabel}\n          className={cn(teachingPopoverClassNames.closeButton, 'absolute end-3 top-3')}\n          onClick={dismiss}\n        />\n\n        <h3\n          id={titleId}\n          className={cn(\n            teachingPopoverClassNames.title,\n            'mb-2 pe-8 text-subtitle-1 font-semibold text-foreground',\n          )}\n        >\n          {step.title}\n          <span className=\"sr-only\">{`, ${stepPosition}`}</span>\n        </h3>\n\n        <div\n          className={cn(teachingPopoverClassNames.body, 'mb-4 text-body-1 text-muted-foreground')}\n        >\n          {step.body}\n        </div>\n\n        <div\n          className={cn(\n            teachingPopoverClassNames.footer,\n            'flex items-center justify-between gap-2',\n          )}\n        >\n          <div aria-hidden=\"true\" className=\"flex items-center gap-1.5\">\n            {steps.map((_, i) => (\n              <span\n                key={i}\n                data-wave-teaching-popover-dot=\"\"\n                aria-current={i === index ? 'step' : undefined}\n                className={cn(\n                  teachingPopoverClassNames.dot,\n                  'h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none',\n                  i === index\n                    ? cn('w-4 bg-primary', forcedColors.fill)\n                    : 'w-1.5 bg-stroke-accessible forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none',\n                )}\n              />\n            ))}\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            {count > 1 && (\n              <Button\n                {...focusableDisabledProps(isFirst)}\n                className={teachingPopoverClassNames.backButton}\n                onClick={preventIfDisabled(isFirst, handleBack)}\n              >\n                {labels?.back ?? DEFAULT_BACK_LABEL}\n              </Button>\n            )}\n            <Button\n              appearance=\"primary\"\n              className={teachingPopoverClassNames.nextButton}\n              onClick={handleNext}\n            >\n              {isLast ? (labels?.done ?? DEFAULT_DONE_LABEL) : (labels?.next ?? DEFAULT_NEXT_LABEL)}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </Portal>\n  );\n};\nTeachingPopover.displayName = 'TeachingPopover';\n"],"mappings":"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"}
+{"version":3,"file":"TeachingPopover.mjs","names":["TeachingPopover","TeachingPopoverRoot","TeachingPopoverTrigger","TeachingPopoverSurface","TeachingPopoverHeader","TeachingPopoverTitle","TeachingPopoverBody","TeachingPopoverFooter","TeachingPopoverCarousel","TeachingPopoverCarouselNav","TeachingPopoverCarouselPageCount","TeachingPopoverCarouselFooter"],"sources":["../../../src/components/overlays/TeachingPopover.tsx"],"sourcesContent":["import {\n  TeachingPopoverBody,\n  TeachingPopoverCarousel,\n  TeachingPopoverCarouselFooter,\n  TeachingPopoverCarouselNav,\n  TeachingPopoverCarouselPageCount,\n  TeachingPopoverFooter,\n  TeachingPopoverHeader,\n  TeachingPopoverSurface,\n  TeachingPopoverTitle,\n  TeachingPopoverTrigger,\n} from './TeachingPopover.parts';\nimport { TeachingPopoverRoot } from './TeachingPopover.root';\n\nexport type {\n  TeachingPopoverAction,\n  TeachingPopoverLabels,\n  TeachingPopoverStep,\n} from './TeachingPopover.context';\nexport type { TeachingPopoverProps } from './TeachingPopover.root';\nexport type {\n  TeachingPopoverBodyProps,\n  TeachingPopoverCarouselFooterProps,\n  TeachingPopoverCarouselNavProps,\n  TeachingPopoverCarouselPageCountProps,\n  TeachingPopoverCarouselProps,\n  TeachingPopoverFooterProps,\n  TeachingPopoverHeaderProps,\n  TeachingPopoverSurfaceProps,\n  TeachingPopoverTitleOwnProps,\n  TeachingPopoverTitleProps,\n  TeachingPopoverTriggerChildProps,\n  TeachingPopoverTriggerProps,\n} from './TeachingPopover.parts';\n\n/**\n * A step-by-step onboarding popover (a non-modal `role=\"dialog\"`) with Back/Next (Done on the\n * last step) and Close.\n *\n * - Visibility is controllable: `open`/`defaultOpen` (default `true`, or `false` with a direct\n *   `TeachingPopover.Trigger`)/`onOpenChange`; Close, Done, Escape (anywhere in the document) and\n *   the Trigger dismiss it and call `onDismiss`.\n * - The step is controllable with `activeStep`/`defaultActiveStep`/`onStepChange` and clamped to\n *   the available steps. The heading carries a visually hidden “step n of m”, the new step is\n *   announced politely, and Back stays focusable (`aria-disabled`) on the first step.\n * - `primaryAction` and `secondaryAction` (on the popover, or on a step, which wins) replace Next/Done\n *   and Back: a label, a Button-like element or a slot object. The consumer's `onClick` runs first,\n *   then the step's normal action unless it called `preventDefault()`. Done calls `onFinish`\n *   (and, in 0.x, `onDismiss`); `footerLayout` stacks the buttons.\n * - The built-in text is English: `labels` localizes Back, Next, Done and the step position, and\n *   `closeLabel` the Close button.\n * - Focus moves to the popover when it opens and returns to the element that had it when it\n *   closes (with `target`, to the target when nothing had focus, e.g. a tour opened on page load).\n * - With `target`, the popover is portaled and positioned next to that element with a beak (it\n *   inherits the surface colors); it stays hidden while the target is `null`, not positioned yet or\n *   no longer mounted (a ref target is read after each render of the popover; see `target`).\n * - With a `VirtualElement` target there is no element to follow: the popover keeps the place of\n *   its portal in the keyboard order.\n * - With an element or ref `target`, the keyboard order treats the popover as if it followed the target: Tab past\n *   its last button continues after the target, Shift+Tab from its first button (or from the\n *   popover itself) returns to the target (for a target outside the Tab order, to the last control\n *   inside it, else to the control before it), Tab from there enters the popover, and Shift+Tab\n *   from the control after the target enters it at its last button. Tab from the last control of\n *   the page moves past the popover (it was visited after the target), and Shift+Tab from outside\n *   the page reaches the page's last control first, so a lap visits it once and Tab never cycles.\n *   With no control at or before the target, the popover is reached where it is portaled, at the\n *   end of the page: Tab from the page's last control and Shift+Tab from outside the page enter\n *   it.\n * - **Parts** (Fluent's composition): `TeachingPopover.Trigger` opens and closes the popover, gets\n *   focus back when it closes and, without a `target`, is what it points at; written directly\n *   inside TeachingPopover (a Fragment is fine), it makes the popover start closed (`defaultOpen`\n *   `false`). `TeachingPopover.Surface` is the surface itself: it takes the `className`, `style`,\n *   `ref` and other element props that the `steps` form takes on TeachingPopover. Inside it,\n *   `TeachingPopover.Header` (the Close button, with an optional caption and `icon`),\n *   `TeachingPopover.Title` (the step title with the hidden step position; it names the popover),\n *   `TeachingPopover.Body` (the step body, after an optional `media`) and\n *   `TeachingPopover.Footer` (the step dots and the buttons) each show their share of the current\n *   step unless given children; a Surface without children shows all four, which is what the\n *   `steps` form renders. Both forms share one state: the steps, the labels, the actions and the\n *   callbacks stay on TeachingPopover. A part outside a TeachingPopover throws in development.\n * - **Carousel parts**: `TeachingPopover.Carousel` holds the current step's page (the title and\n *   body) and `TeachingPopover.CarouselFooter`, the bottom row with the step buttons:\n *   `initialStepText` turns the first step's Back into a button that dismisses the popover (“Not\n *   now”), `finalStepText` relabels Done, and `layout` (`'offset'` or `'centered'`) places the\n *   indicator. The indicator is the decorative step dots unless you place\n *   `TeachingPopover.CarouselNav` (interactive step buttons, named by `labels.navButton`, each a\n *   Tab stop, the current one with `aria-current=\"step\"`) or `TeachingPopover.CarouselPageCount`\n *   (a visible “2 of 3”, worded by a render function) there. `steps` stays the only source of\n *   the pages, so there is no card part.\n *\n * The parts are also exported under flat names (`TeachingPopoverTrigger`,\n * `TeachingPopoverSurface`, `TeachingPopoverHeader`, `TeachingPopoverTitle`,\n * `TeachingPopoverBody`, `TeachingPopoverFooter`, `TeachingPopoverCarousel`,\n * `TeachingPopoverCarouselNav`, `TeachingPopoverCarouselPageCount`,\n * `TeachingPopoverCarouselFooter`) for React Server Components, which cannot use the dotted form;\n * dotted access (`TeachingPopover.Trigger`) needs a client file.\n *\n * @example\n * <TeachingPopover steps={steps} onFinish={markTourSeen}>\n *   <TeachingPopover.Trigger>\n *     <Button>Take the tour</Button>\n *   </TeachingPopover.Trigger>\n *   <TeachingPopover.Surface>\n *     <TeachingPopover.Header icon={<LightbulbIcon />}>Tip</TeachingPopover.Header>\n *     <TeachingPopover.Title />\n *     <TeachingPopover.Body media={<img src=\"/tour/search.png\" alt=\"\" />} />\n *     <TeachingPopover.Footer />\n *   </TeachingPopover.Surface>\n * </TeachingPopover>\n *\n * @example\n * <TeachingPopover steps={steps} onFinish={markTourSeen}>\n *   <TeachingPopover.Surface>\n *     <TeachingPopover.Header>Tip</TeachingPopover.Header>\n *     <TeachingPopover.Carousel>\n *       <TeachingPopover.Title />\n *       <TeachingPopover.Body />\n *       <TeachingPopover.CarouselFooter initialStepText=\"Not now\" finalStepText=\"Got it\">\n *         <TeachingPopover.CarouselNav />\n *       </TeachingPopover.CarouselFooter>\n *     </TeachingPopover.Carousel>\n *   </TeachingPopover.Surface>\n * </TeachingPopover>\n */\nexport const TeachingPopover = /* @__PURE__ */ Object.assign(TeachingPopoverRoot, {\n  Trigger: TeachingPopoverTrigger,\n  Surface: TeachingPopoverSurface,\n  Header: TeachingPopoverHeader,\n  Title: TeachingPopoverTitle,\n  Body: TeachingPopoverBody,\n  Footer: TeachingPopoverFooter,\n  Carousel: TeachingPopoverCarousel,\n  CarouselNav: TeachingPopoverCarouselNav,\n  CarouselPageCount: TeachingPopoverCarouselPageCount,\n  CarouselFooter: TeachingPopoverCarouselFooter,\n});\n\nexport {\n  TeachingPopoverTrigger,\n  TeachingPopoverSurface,\n  TeachingPopoverHeader,\n  TeachingPopoverTitle,\n  TeachingPopoverBody,\n  TeachingPopoverFooter,\n  TeachingPopoverCarousel,\n  TeachingPopoverCarouselNav,\n  TeachingPopoverCarouselPageCount,\n  TeachingPopoverCarouselFooter,\n};\n"],"mappings":";;;;AA4HA,IAAaA,IAAkC,uBAAO,OAAOC,GAAqB;CAChF,SAASC;CACT,SAASC;CACT,QAAQC;CACR,OAAOC;CACP,MAAMC;CACN,QAAQC;CACR,UAAUC;CACV,aAAaC;CACb,mBAAmBC;CACnB,gBAAgBC;AAClB,CAAC"}

package/dist/components/overlays/TeachingPopover.parts.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useMergedRefs.cjs"),s=require("../../hooks/useIsClient.cjs"),c=require("../../lib/aria.cjs"),l=require("../../hooks/useAnnounce.cjs"),u=require("../../hooks/usePopupPosition.cjs"),d=require("../../hooks/useDismiss.cjs"),f=require("../../hooks/useRestoreFocus.cjs"),p=require("../../lib/styles.cjs"),m=require("../portal/Portal.cjs"),h=require("../button/Button.cjs"),g=require("./Popover.shared.cjs"),_=require("../../hooks/useTriggerElement.cjs"),v=require("./Dialog.shared.cjs"),y=require("./Dialog.slots.cjs"),b=require("./TeachingPopover.stack.cjs"),x=require("./TeachingPopover.context.cjs");let S=require("react");S=e.__toESM(S,1);let C=require("react/jsx-runtime");function w(e){return`current`in e}function ee(e){return e!=null&&!w(e)&&typeof e.nodeType==`number`}function T(e){return e!=null&&!w(e)&&!ee(e)}function E(e){return!e||T(e)?null:w(e)?e.current:e}var D=e=>n.isElementOfType(e,h.Button,`button`,`a`);function O(e,a,o,s){let c=e=>{e.defaultPrevented||s()};if(D(e)){let{className:r,onClick:s,appearance:l}=e.props,u=n.isElementOfType(e,h.Button);return S.cloneElement(e,{className:t.cn(o,r),onClick:i.composeEventHandlers(s,c),...u?{appearance:l??a}:void 0})}let l=r.resolveSlot(e,h.Button,o);if(!l)return null;let{onClick:u,...d}=l.props;return S.createElement(h.Button,{appearance:a,...d,...l.Component===h.Button?void 0:{as:l.Component},onClick:i.composeEventHandlers(u,c)},l.children)}var k=({context:e,rootClassName:n,id:s,className:c,style:h,onKeyDown:y,children:b,ref:D,...O})=>{let{target:k,side:A,align:j,positioning:I,shown:L,index:R,step:z,stepPosition:B,titleId:te,footerLayout:V,dismiss:H,hasTrigger:ne,triggerRef:re,surfaceId:ie}=e,ae=l.useAnnounce(),oe=v.useTitleRegistry(),U=z?.title,W=k!==void 0,[G,se]=S.useState(null),K=e=>ee(e)||T(e),[q,ce]=S.useState(()=>K(k)),J=k===null?!1:K(k)?!0:void 0;J!==void 0&&J!==q&&ce(J);let le=S.useRef(null),Y=S.useRef(null),ue=S.useRef(k),X=S.useRef(q),de=S.useRef(null),{setReference:fe,setFloating:pe,floatingProps:Z,arrowStyles:me,side:he,isPositioned:ge}=u.usePopupPosition({open:L&&W,side:A,align:j,arrowRef:de,...u.resolvePositioning(I,{offset:12})}),_e=k!=null&&(!w(k)||q),ve=!W||_e&&ge,Q=L&&ve,ye=o.useMergedRefs(D,le,se,pe);S.useLayoutEffect(()=>{ue.current=k,X.current=q;let e=E(k);Y.current=e,fe(T(k)?k:e),k!=null&&w(k)&&queueMicrotask(()=>{let e=E(ue.current);e!==Y.current&&(Y.current=e,fe(e));let t=e!==null;t!==X.current&&(X.current=t,ce(t))})});let{layerId:be}=d.useDismiss({open:Q,onDismiss:H,refs:[le],anchorRef:Y,kind:`popover`,outsidePress:!1}),xe=_.useTriggerFocusRef(re);f.useRestoreFocus({enabled:Q,container:G,triggerRef:xe,fallback:()=>Y.current,onlyIfFocusInside:!0});let Se=g.usePopoverTabOrder({enabled:Q&&W,surface:G,anchorRef:Y,getPreviousStop:g.getTabbableThrough});S.useEffect(()=>{Q&&G&&G.focus({preventScroll:W})},[Q,G,W]);let Ce=S.useRef(R);if(S.useEffect(()=>{Ce.current!==R&&(Ce.current=R,Q&&U!==void 0&&ae(`${U}, ${B}`))},[R,Q,U,B,ae]),!L||!z)return null;let $=r.slotRendersContent(b),we=s||void 0;return(0,C.jsx)(m.Portal,{disabled:!W,layerId:be,children:(0,C.jsxs)(`div`,{role:`dialog`,"aria-labelledby":$?oe.titleId:te,tabIndex:-1,"data-layout":V,id:we??(ne?ie:void 0),...O,ref:ye,onKeyDown:i.composeEventHandlers(y,Se),...W?{"data-side":Z[`data-side`],"data-align":Z[`data-align`],style:{...h,...Z.style,...ve?void 0:{visibility:`hidden`}}}:{style:h},className:t.cn(n,`relative w-80 rounded-md border border-border bg-background p-5 text-foreground shadow-8`,p.focusRing,c),children:[W&&(0,C.jsx)(g.PopoverBeak,{ref:de,side:he,style:me,"data-wave-teaching-popover-arrow":``,className:a.teachingPopoverClassNames.beak}),(0,C.jsx)(x.TeachingPopoverSurfaceContext.Provider,{value:$?oe.context:null,children:$?b:(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(M,{}),(0,C.jsx)(N,{}),(0,C.jsx)(P,{}),(0,C.jsx)(F,{})]})})]})})};k.displayName=`TeachingSurface`;var A=({children:e,asChild:t,onClick:n,ref:r,...a})=>{let{shown:c,requestOpen:l,dismiss:u,surfaceId:d,triggerElementRef:f}=x.useTeachingPopoverContext(`TeachingPopover.Trigger`),p=s.useIsClient(),m=c&&p,h=o.useMergedRefs(r,f),g={...a,"aria-haspopup":`dialog`,"aria-expanded":m,"aria-controls":m?d:void 0,onClick:i.composeEventHandlers(n,()=>c?u():l()),ref:h};return _.useTriggerElement(e,g,{componentName:`TeachingPopover.Trigger`,asChild:t})};A.displayName=`TeachingPopoverTrigger`;var j=({id:e,ref:n,...r})=>{let i=x.useTeachingPopoverContext(`TeachingPopover.Surface`),{registerSurface:o,setCustomSurfaceId:s}=i;S.useLayoutEffect(()=>o(),[o]);let c=e||void 0;return S.useEffect(()=>(s(c),()=>s(void 0)),[c,s]),(0,C.jsx)(k,{context:i,rootClassName:t.cn(a.teachingPopoverClassNames.root,a.teachingPopoverSurfaceClassNames.root),id:e,...r,ref:n})};j.displayName=`TeachingPopoverSurface`;var M=({icon:e,dismissButton:n,className:i,children:o,ref:s,...c})=>{let{step:l,closeLabel:u,dismiss:d}=x.useTeachingPopoverContext(`TeachingPopover.Header`);if(!l)return null;let f=r.slotRendersContent(e),p=r.slotRendersContent(o);return(0,C.jsxs)(`div`,{ref:s,className:t.cn(a.teachingPopoverHeaderClassNames.root,(f||p)&&`-mt-2 mb-2 flex min-h-6 items-center gap-1.5 pe-8 text-caption-1 font-semibold text-primary`,i),...c,children:[f&&r.renderSlot(e,`span`,t.cn(a.teachingPopoverHeaderClassNames.icon,`inline-flex shrink-0 items-center`),{"aria-hidden":!0}),p&&r.materialiseSlotContent(o),(0,C.jsx)(y.ModalCloseButton,{componentName:`TeachingPopover.Header`,closeButton:n,slotName:`dismissButton`,closeLabel:u,onClose:d,className:t.cn(a.teachingPopoverClassNames.closeButton,`absolute end-3 top-3`)})]})};M.displayName=`TeachingPopoverHeader`;var N=e=>{let{as:n,id:i,className:s,children:c,ref:l,...u}=e,{step:d,stepPosition:f,titleId:p}=x.useTeachingPopoverContext(`TeachingPopover.Title`),m=S.useContext(x.TeachingPopoverSurfaceContext),h=i||p,g=m?.registerTitle,_=S.useCallback(e=>e&&g?g(h):void 0,[g,h]),v=o.useMergedRefs(l,_);return d?(0,C.jsxs)(n??`h3`,{id:h,className:t.cn(a.teachingPopoverTitleClassNames.root,a.teachingPopoverClassNames.title,`mb-2 pe-8 text-subtitle-1 font-semibold text-foreground`,s),...u,ref:v,children:[r.slotRendersContent(c)?r.materialiseSlotContent(c):d.title,(0,C.jsx)(`span`,{className:`sr-only`,children:`, ${f}`})]}):null};N.displayName=`TeachingPopoverTitle`;var P=({media:e,className:n,children:i,ref:o,...s})=>{let{step:c}=x.useTeachingPopoverContext(`TeachingPopover.Body`);return c?(0,C.jsxs)(`div`,{ref:o,className:t.cn(a.teachingPopoverBodyClassNames.root,a.teachingPopoverClassNames.body,`mb-4 text-body-1 text-muted-foreground`,n),...s,children:[r.slotRendersContent(e)&&r.renderSlot(e,`span`,t.cn(a.teachingPopoverBodyClassNames.media,`mb-3 block overflow-hidden rounded-md`)),r.slotRendersContent(i)?r.materialiseSlotContent(i):c.body]}):null};P.displayName=`TeachingPopoverBody`;var F=({className:e,children:n,ref:i,...o})=>{let s=x.useTeachingPopoverContext(`TeachingPopover.Footer`),{step:c,footerLayout:l}=s;if(!c)return null;let u=l===`vertical`;return(0,C.jsx)(`div`,{ref:i,"data-layout":l,className:t.cn(a.teachingPopoverFooterClassNames.root,a.teachingPopoverClassNames.footer,`flex gap-2`,u?`flex-col items-stretch gap-4`:`items-center justify-between`,e),...o,children:r.slotRendersContent(n)?r.materialiseSlotContent(n):(0,C.jsx)(I,{context:s})})};F.displayName=`TeachingPopoverFooter`;function I({context:e}){let n=e.footerLayout===`vertical`,{secondary:r,primary:i}=R(e);return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(L,{count:e.count,index:e.index,className:n&&`justify-center`}),(0,C.jsxs)(`div`,{className:t.cn(`flex gap-2`,n?`flex-col items-stretch`:`items-center`),children:[r,i]})]})}I.displayName=`TeachingFooterContent`;function L({count:e,index:n,className:r}){return(0,C.jsx)(`div`,{"aria-hidden":`true`,className:t.cn(`flex items-center gap-1.5`,r),children:Array.from({length:e},(e,r)=>(0,C.jsx)(`span`,{"data-wave-teaching-popover-dot":``,"aria-current":r===n?`step`:void 0,className:t.cn(a.teachingPopoverClassNames.dot,`h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none`,r===n?t.cn(`w-4 bg-primary`,p.forcedColors.fill):`w-1.5 bg-stroke-accessible forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none`)},r))})}L.displayName=`TeachingStepDots`;function R(e,{initialStepText:t,finalStepText:n}={}){let{count:r,isFirst:i,isLast:o,goBack:s,goNext:l,dismiss:u,primaryAction:d,secondaryAction:f,backLabel:p,nextLabel:m,doneLabel:g}=e,_;f?_=O(f,`outline`,a.teachingPopoverClassNames.secondaryButton,s):i&&t?_=(0,C.jsx)(h.Button,{className:a.teachingPopoverClassNames.backButton,onClick:u,children:t}):r>1&&(_=(0,C.jsx)(h.Button,{...c.focusableDisabledProps(i),className:a.teachingPopoverClassNames.backButton,onClick:c.preventIfDisabled(i,s),children:p}));let v=d?O(d,`primary`,a.teachingPopoverClassNames.primaryButton,l):(0,C.jsx)(h.Button,{appearance:`primary`,className:a.teachingPopoverClassNames.nextButton,onClick:l,children:o?n||g:m});return{secondary:_,primary:v}}var z=({className:e,children:n,ref:i,...o})=>{let{step:s}=x.useTeachingPopoverContext(`TeachingPopover.Carousel`);return s?(0,C.jsx)(`div`,{ref:i,className:t.cn(a.teachingPopoverCarouselClassNames.root,e),...o,children:r.slotRendersContent(n)?r.materialiseSlotContent(n):(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(N,{}),(0,C.jsx)(P,{}),(0,C.jsx)(H,{})]})}):null};z.displayName=`TeachingPopoverCarousel`;var B=({className:e,ref:n,...r})=>{let{step:i,count:o,index:s,goToStep:c,navLabel:l,navButtonLabel:u}=x.useTeachingPopoverContext(`TeachingPopover.CarouselNav`);return i?(0,C.jsx)(`div`,{ref:n,role:`group`,"aria-label":l,className:t.cn(a.teachingPopoverCarouselNavClassNames.root,`flex items-center`,e),...r,children:Array.from({length:o},(e,n)=>{let r=n===s;return(0,C.jsx)(`button`,{type:`button`,"aria-label":u(n,o),"aria-current":r?`step`:void 0,onClick:()=>c(n),className:t.cn(a.teachingPopoverCarouselNavClassNames.button,`group inline-flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0`,p.focusRing),children:(0,C.jsx)(`span`,{"aria-hidden":`true`,className:t.cn(a.teachingPopoverCarouselNavClassNames.indicator,`block h-1.5 rounded-full transition-[width,background-color] motion-reduce:transition-none`,r?t.cn(`w-4 bg-primary`,p.forcedColors.fill):`w-1.5 bg-stroke-accessible group-hover:bg-foreground forced-colors:bg-[ButtonText] forced-colors:forced-color-adjust-none`)})},n)})}):null};B.displayName=`TeachingPopoverCarouselNav`;var te=(e,t)=>`${e} of ${t}`,V=({className:e,children:n,ref:i,...o})=>{let{step:s,count:c,index:l}=x.useTeachingPopoverContext(`TeachingPopover.CarouselPageCount`);if(!s)return null;let u=n?.(l+1,c);return(0,C.jsx)(`div`,{ref:i,className:t.cn(a.teachingPopoverCarouselPageCountClassNames.root,`shrink-0 text-caption-1 text-muted-foreground`,e),...o,children:r.slotRendersContent(u)?r.materialiseSlotContent(u):te(l+1,c)})};V.displayName=`TeachingPopoverCarouselPageCount`;var H=({layout:e=`offset`,initialStepText:n,finalStepText:i,className:s,children:c,ref:l,...u})=>{let d=x.useTeachingPopoverContext(`TeachingPopover.CarouselFooter`),f=e===`centered`,[p,m]=S.useState(null),h=o.useMergedRefs(l,m),g=b.useCarouselFooterStacked(p,f&&d.step!==void 0);if(!d.step)return null;let{secondary:_,primary:v}=R(d,{initialStepText:n,finalStepText:i}),y=r.slotRendersContent(c)?(0,C.jsx)(`div`,{className:t.cn(`flex flex-wrap items-center gap-2`,f&&`w-max max-w-full justify-center`),children:r.materialiseSlotContent(c)}):(0,C.jsx)(L,{count:d.count,index:d.index});return f?(0,C.jsxs)(`div`,{ref:h,"data-carousel-layout":e,"data-stacked":g?``:void 0,className:t.cn(a.teachingPopoverCarouselFooterClassNames.root,a.teachingPopoverClassNames.footer,`items-center gap-2`,g?`flex flex-wrap`:`grid grid-cols-[1fr_auto_1fr]`,s),...u,children:[r.slotRendersContent(_)&&(0,C.jsx)(`div`,{"data-wave-carousel-footer-slot":`secondary`,className:t.cn(`flex w-max max-w-full`,!g&&`col-start-1 justify-self-start`),children:_}),(0,C.jsx)(`div`,{"data-wave-carousel-footer-slot":`indicator`,className:t.cn(`flex justify-center`,g?`order-first basis-full`:`col-start-2`),children:y}),(0,C.jsx)(`div`,{"data-wave-carousel-footer-slot":`primary`,className:t.cn(`flex w-max max-w-full`,g?`ms-auto`:`col-start-3 justify-self-end`),children:v})]}):(0,C.jsxs)(`div`,{ref:h,"data-carousel-layout":e,className:t.cn(a.teachingPopoverCarouselFooterClassNames.root,a.teachingPopoverClassNames.footer,`flex flex-wrap items-center justify-between gap-2`,s),...u,children:[y,(0,C.jsxs)(`div`,{className:`ms-auto flex flex-wrap items-center justify-end gap-2`,children:[_,v]})]})};H.displayName=`TeachingPopoverCarouselFooter`,exports.TeachingPopoverBody=P,exports.TeachingPopoverCarousel=z,exports.TeachingPopoverCarouselFooter=H,exports.TeachingPopoverCarouselNav=B,exports.TeachingPopoverCarouselPageCount=V,exports.TeachingPopoverFooter=F,exports.TeachingPopoverHeader=M,exports.TeachingPopoverSurface=j,exports.TeachingPopoverTitle=N,exports.TeachingPopoverTrigger=A,exports.TeachingSurface=k;
+//# sourceMappingURL=TeachingPopover.parts.cjs.map