@fangxinyan/lumina 0.6.18 → 0.8.0

package/dist/{chunk-S2ZGXBUH.cjs → chunk-VVRXNGYL.cjs}

@@ -1,9 +1,13 @@
 'use strict';
 
-var chunkYB3IWIOJ_cjs = require('./chunk-YB3IWIOJ.cjs');
-require('./tokens-RYJ3DFTU.css');
+var chunkFJB3243S_cjs = require('./chunk-FJB3243S.cjs');
+var chunkSTQDKMS5_cjs = require('./chunk-STQDKMS5.cjs');
+var chunkHSDMJUB6_cjs = require('./chunk-HSDMJUB6.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+var chunkEE5KXDRK_cjs = require('./chunk-EE5KXDRK.cjs');
+require('./tokens-CEJVVA3G.css');
 require('./shared-NJHRNLRH.css');
-require('./ColorPicker-LPG6QPYF.css');
+require('./ColorPicker-GRZOKR5O.css');
 var React = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -90,6 +94,16 @@ var hexToHsv = (hex) => {
   return rgb ? rgbToHsv(...rgb) : null;
 };
 var hsvToHex = (h, s, v) => rgbToHex(...hsvToRgb(h, s, v));
+function supportsDomRef(type) {
+  if (typeof type === "string") return type !== "svg";
+  if (typeof type !== "object" || type == null) return false;
+  const marker = type.$$typeof;
+  if (marker === /* @__PURE__ */ Symbol.for("react.memo")) {
+    return supportsDomRef(type.type);
+  }
+  const displayName = type.displayName;
+  return marker === /* @__PURE__ */ Symbol.for("react.forward_ref") && (displayName === "Button" || displayName === "IconButton");
+}
 var DEFAULT_PRESETS = [
   "#ff6b6b",
   "#ffa94d",
@@ -134,6 +148,17 @@ var SaturationBoard = ({ hue, s, v, onChange }) => {
     el.addEventListener("pointerup", up);
     el.addEventListener("pointercancel", up);
   };
+  const handleKeyDown = (event) => {
+    let nextS = s;
+    let nextV = v;
+    if (event.key === "ArrowLeft") nextS -= 1;
+    else if (event.key === "ArrowRight") nextS += 1;
+    else if (event.key === "ArrowDown") nextV -= 1;
+    else if (event.key === "ArrowUp") nextV += 1;
+    else return;
+    event.preventDefault();
+    onChange(clamp(nextS, 0, 100), clamp(nextV, 0, 100), true);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -141,6 +166,14 @@ var SaturationBoard = ({ hue, s, v, onChange }) => {
       className: "cp-board",
       style: { background: `hsl(${hue}, 100%, 50%)` },
       onPointerDown: handlePointerDown,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "slider",
+      "aria-label": "\u989C\u8272\u9971\u548C\u5EA6\u4E0E\u660E\u5EA6",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(s),
+      "aria-valuetext": `\u9971\u548C\u5EA6 ${Math.round(s)}%\uFF0C\u660E\u5EA6 ${Math.round(v)}%`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cp-board-white" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cp-board-black" }),
@@ -180,15 +213,40 @@ var HueSlider = ({ hue, onChange }) => {
     el.addEventListener("pointerup", up);
     el.addEventListener("pointercancel", up);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "cp-hue", onPointerDown: handlePointerDown, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const handleKeyDown = (event) => {
+    let next = hue;
+    if (event.key === "ArrowLeft" || event.key === "ArrowDown") next -= 1;
+    else if (event.key === "ArrowRight" || event.key === "ArrowUp") next += 1;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = 360;
+    else return;
+    event.preventDefault();
+    onChange(clamp(next, 0, 360), true);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "cp-hue-thumb",
-      style: { left: `${hue / 360 * 100}%` }
+      ref,
+      className: "cp-hue",
+      onPointerDown: handlePointerDown,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "slider",
+      "aria-label": "\u8272\u76F8",
+      "aria-valuemin": 0,
+      "aria-valuemax": 360,
+      "aria-valuenow": Math.round(hue),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "cp-hue-thumb",
+          style: { left: `${hue / 360 * 100}%` }
+        }
+      )
     }
-  ) });
+  );
 };
-var ColorPicker = React__namespace.forwardRef(
+var ColorPickerBase = React__namespace.forwardRef(
   (props, ref) => {
     const {
       value,
@@ -207,6 +265,8 @@ var ColorPicker = React__namespace.forwardRef(
       className = "",
       style,
       onClick,
+      onKeyDown,
+      tabIndex,
       ...rest
     } = props;
     const isControlled = value != null;
@@ -216,21 +276,49 @@ var ColorPicker = React__namespace.forwardRef(
     const current = normalizeHex((isControlled ? value : internal) ?? "") ?? "#845ef7";
     const isOpenControlled = openProp != null;
     const [openState, setOpenState] = React__namespace.useState(defaultOpen);
-    const open = isOpenControlled ? !!openProp : openState;
+    const open = !disabled && (isOpenControlled ? !!openProp : openState);
     const setOpen = (next) => {
       if (!isOpenControlled) setOpenState(next);
       onOpenChange?.(next);
     };
+    React__namespace.useEffect(() => {
+      if (!disabled || isOpenControlled || !openState) return;
+      setOpenState(false);
+      onOpenChange?.(false);
+    }, [disabled, isOpenControlled, onOpenChange, openState]);
     const [inputText, setInputText] = React__namespace.useState(current);
+    const [wrappedHasInteractiveChild, setWrappedHasInteractiveChild] = React__namespace.useState(false);
     React__namespace.useEffect(() => setInputText(current), [current]);
-    const { triggerRef, floatingStyle } = chunkYB3IWIOJ_cjs.useFloating({
+    const { triggerRef, floatingRef: panelRef, floatingStyle, zIndex: panelZIndex } = chunkFJB3243S_cjs.useFloating({
       open,
       placement,
       panelWidth: 256,
       panelHeight: 300
     });
-    const panelRef = React__namespace.useRef(null);
-    React__namespace.useImperativeHandle(ref, () => triggerRef.current);
+    const portalContainer = chunkEE5KXDRK_cjs.usePortalContainer();
+    const portalTheme = chunkNRJXZPZR_cjs.useComponentPortalTheme(["ColorPicker", "ThemePanel"]);
+    const panelId = React__namespace.useId();
+    chunkHSDMJUB6_cjs.useOverlayLayer({
+      open: open && !disabled && portalContainer != null,
+      containerRef: panelRef,
+      ownerRef: triggerRef,
+      zIndex: panelZIndex,
+      onEscape: () => setOpen(false),
+      restoreFocus: true
+    });
+    const setTriggerRef = React__namespace.useCallback((node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }, [ref, triggerRef]);
+    const setWrappedTriggerRef = React__namespace.useCallback((node) => {
+      setTriggerRef(node);
+      if (!node) return;
+      const hasInteractiveChild = !!node?.querySelector(
+        "button,input,select,textarea,a[href],[role='button'],[role='link']"
+      );
+      setWrappedHasInteractiveChild(hasInteractiveChild);
+    }, [setTriggerRef]);
     React__namespace.useEffect(() => {
       if (!open) return;
       const onDown = (e) => {
@@ -239,14 +327,9 @@ var ColorPicker = React__namespace.forwardRef(
         if (panelRef.current?.contains(t)) return;
         setOpen(false);
       };
-      const onKey = (e) => {
-        if (e.key === "Escape") setOpen(false);
-      };
       document.addEventListener("mousedown", onDown);
-      document.addEventListener("keydown", onKey);
       return () => {
         document.removeEventListener("mousedown", onDown);
-        document.removeEventListener("keydown", onKey);
       };
     }, [open]);
     const commit = (hex, done) => {
@@ -275,38 +358,121 @@ var ColorPicker = React__namespace.forwardRef(
         e.target.blur();
       }
     };
+    const handleInputChange = (next) => {
+      setInputText(next);
+      const digits = next.trim().replace(/^#/, "");
+      if (digits.length === 6 && normalizeHex(next)) commit(next, false);
+    };
+    const childElement = React__namespace.isValidElement(children) ? children : null;
+    const childSupportsRef = childElement ? supportsDomRef(childElement.type) : false;
+    const childType = childElement && typeof childElement.type === "string" ? childElement.type : void 0;
+    const nativeInteractive = childType === "button" || childType === "input" || childType === "select" || childType === "textarea" || childType === "a" && childElement?.props.href != null;
+    const handleCustomClick = (event) => {
+      if (disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      childElement?.props.onClick?.(event);
+      onClick?.(event);
+      if (!event.defaultPrevented) setOpen(!open);
+    };
+    const handleWrappedClick = (event) => {
+      if (disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      onClick?.(event);
+      if (!event.defaultPrevented) setOpen(!open);
+    };
+    const handleCustomKeyDown = (event) => {
+      childElement?.props.onKeyDown?.(event);
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled) return;
+      const current2 = event.currentTarget;
+      const handlesKeyboardNatively = current2.matches("button,input,select,textarea") || current2.matches("a") && current2.hasAttribute("href");
+      if (!handlesKeyboardNatively && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        setOpen(!open);
+      }
+    };
+    const handleWrappedKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled) return;
+      const target = event.target;
+      const handlesKeyboardNatively = target.matches("button,input,select,textarea") || target.matches("a") && target.hasAttribute("href");
+      if (!handlesKeyboardNatively && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        setOpen(!open);
+      }
+    };
+    const customTrigger = childElement && childSupportsRef ? React__namespace.cloneElement(childElement, {
+      ...rest,
+      ref: setTriggerRef,
+      role: childElement.props.role ?? (nativeInteractive ? void 0 : "button"),
+      tabIndex: disabled ? -1 : childElement.props.tabIndex ?? tabIndex ?? (nativeInteractive ? void 0 : 0),
+      ...childType === "button" || typeof childElement.type !== "string" ? { disabled: childElement.props.disabled ?? disabled } : {},
+      "aria-disabled": disabled || void 0,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "aria-controls": open ? panelId : void 0,
+      onClick: handleCustomClick,
+      onKeyDown: handleCustomKeyDown
+    }) : null;
+    const wrappedCustomTrigger = children != null && !customTrigger ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ...rest,
+        ref: setWrappedTriggerRef,
+        className: "cp-custom-trigger",
+        role: wrappedHasInteractiveChild ? void 0 : "button",
+        tabIndex: wrappedHasInteractiveChild ? void 0 : disabled ? -1 : tabIndex ?? 0,
+        "aria-disabled": disabled || void 0,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-controls": open ? panelId : void 0,
+        "aria-label": rest["aria-label"] ?? (typeof children === "string" ? `\u9009\u62E9\u989C\u8272\uFF1A${children}` : void 0),
+        onClickCapture: disabled ? (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        } : rest.onClickCapture,
+        onKeyDownCapture: disabled ? (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        } : rest.onKeyDownCapture,
+        onClick: handleWrappedClick,
+        onKeyDown: handleWrappedKeyDown,
+        children: childElement ? React__namespace.cloneElement(childElement, {
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-controls": open ? panelId : void 0
+        }) : children
+      }
+    ) : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: `cp ${placement} ${open ? "open" : ""} ${className}`,
         style,
         children: [
-          children ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              ref: triggerRef,
-              className: "cp-custom-trigger",
-              disabled,
-              onClick: (e) => {
-                onClick?.(e);
-                if (!disabled) setOpen(!open);
-              },
-              ...rest,
-              children
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsxs(
+          customTrigger ? customTrigger : wrappedCustomTrigger ? wrappedCustomTrigger : /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
               type: "button",
-              ref: triggerRef,
+              ref: setTriggerRef,
               className: `cp-trigger ${size}`,
               disabled,
+              tabIndex,
               onClick: (e) => {
                 onClick?.(e);
                 if (!disabled) setOpen(!open);
               },
+              onKeyDown,
               "aria-label": `\u9009\u62E9\u989C\u8272 (\u5F53\u524D ${current})`,
+              "aria-haspopup": "dialog",
+              "aria-expanded": open,
+              "aria-controls": open ? panelId : void 0,
               style,
               ...rest,
               children: [
@@ -315,30 +481,35 @@ var ColorPicker = React__namespace.forwardRef(
               ]
             }
           ),
-          open && !disabled && typeof document !== "undefined" && reactDom.createPortal(
+          open && !disabled && portalContainer && reactDom.createPortal(
             /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 ref: panelRef,
+                id: panelId,
                 className: "cp-panel",
                 role: "dialog",
-                style: floatingStyle,
+                "aria-label": "\u9009\u62E9\u989C\u8272",
+                ...portalTheme.dataAttributes,
+                style: { ...floatingStyle, ...portalTheme.style, ...portalTheme.styles.popup },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(SaturationBoard, { hue: h, s, v, onChange: handleBoard }),
                   /* @__PURE__ */ jsxRuntime.jsx(HueSlider, { hue: h, onChange: handleHue }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cp-row", children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cp-swatch sm", style: { background: current } }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "input",
+                    /* @__PURE__ */ jsxRuntime.jsx(chunkNRJXZPZR_cjs.InternalComponentThemePart, { components: "Input", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      chunkSTQDKMS5_cjs.Input,
                       {
                         className: "cp-input",
+                        size: "sm",
                         value: inputText,
-                        onChange: (e) => setInputText(e.target.value),
+                        onValueChange: handleInputChange,
                         onBlur: handleInputBlur,
                         onKeyDown: handleInputKey,
-                        spellCheck: false
+                        spellCheck: false,
+                        "aria-label": "\u5341\u516D\u8FDB\u5236\u989C\u8272"
                       }
-                    )
+                    ) })
                   ] }),
                   presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cp-presets", children: presets.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
@@ -354,13 +525,18 @@ var ColorPicker = React__namespace.forwardRef(
                 ]
               }
             ),
-            document.body
+            portalContainer
           )
         ]
       }
     );
   }
 );
-ColorPicker.displayName = "ColorPicker";
+ColorPickerBase.displayName = "ColorPicker";
+var ColorPicker = chunkNRJXZPZR_cjs.withComponentTheme(
+  ColorPickerBase,
+  "ColorPicker",
+  ["color-picker", "input"]
+);
 
 exports.ColorPicker = ColorPicker;

package/dist/{chunk-JMFHL7GN.cjs → chunk-VX6MZO4K.cjs}

@@ -1,9 +1,12 @@
 'use strict';
 
-var chunkYB3IWIOJ_cjs = require('./chunk-YB3IWIOJ.cjs');
-require('./tokens-RYJ3DFTU.css');
+var chunkFJB3243S_cjs = require('./chunk-FJB3243S.cjs');
+var chunkHSDMJUB6_cjs = require('./chunk-HSDMJUB6.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+var chunkEE5KXDRK_cjs = require('./chunk-EE5KXDRK.cjs');
+require('./tokens-CEJVVA3G.css');
 require('./shared-NJHRNLRH.css');
-require('./Popover-Y3LDCJPW.css');
+require('./Popover-LCXLR3EU.css');
 var React = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -33,7 +36,7 @@ var normalizePlacement = (placement) => {
   const alignCross = placement.endsWith("Left") || placement.endsWith("Top") ? "start" : placement.endsWith("Right") || placement.endsWith("Bottom") ? "end" : "center";
   return { placement: base, alignCross };
 };
-var Popover = React__namespace.forwardRef(({
+var PopoverBase = React__namespace.forwardRef(({
   content,
   title,
   placement = "bottom",
@@ -53,20 +56,33 @@ var Popover = React__namespace.forwardRef(({
   onClick,
   onMouseEnter,
   onMouseLeave,
+  onFocus,
+  onBlur,
+  "aria-label": ariaLabel,
+  style,
   ...rest
 }, ref) => {
+  const portalContainer = chunkEE5KXDRK_cjs.usePortalContainer();
+  const portalTheme = chunkNRJXZPZR_cjs.useComponentPortalTheme("Popover");
   const [inner, setInner] = React__namespace.useState(defaultOpen);
+  const hoverTimeout = React__namespace.useRef();
+  const nestedPointerEvents = React__namespace.useRef(/* @__PURE__ */ new WeakSet());
+  const popoverId = React__namespace.useId();
+  const titleId = React__namespace.useId();
   const controlledOpen = open ?? visible;
   const isControlled = controlledOpen !== void 0;
   const show = isControlled ? controlledOpen : inner;
-  const panelWidth = width === "auto" ? 160 : width ?? 240;
+  const themedPopupStyle = portalTheme.styles.popup;
+  const themedPanelWidth = themedPopupStyle?.width ?? themedPopupStyle?.minWidth;
+  const panelWidth = width === "auto" ? 160 : width ?? (typeof themedPanelWidth === "number" ? themedPanelWidth : 240);
   const normalized = normalizePlacement(placement);
   const {
     triggerRef,
     floatingRef,
     floatingStyle,
-    placement: resolved
-  } = chunkYB3IWIOJ_cjs.useFloating({
+    placement: resolved,
+    zIndex: panelZIndex
+  } = chunkFJB3243S_cjs.useFloating({
     open: show,
     placement: normalized.placement,
     panelWidth,
@@ -78,6 +94,22 @@ var Popover = React__namespace.forwardRef(({
     onOpenChange?.(v);
     onVisibleChange?.(v);
   }, [isControlled, onOpenChange, onVisibleChange]);
+  const closeFromEscape = React__namespace.useCallback(() => {
+    set(false);
+    window.requestAnimationFrame(() => {
+      const focusTarget = triggerRef.current?.querySelector(
+        "button, a[href], input, select, textarea, [tabindex]:not([tabindex='-1'])"
+      );
+      (focusTarget ?? triggerRef.current)?.focus();
+    });
+  }, [set, triggerRef]);
+  chunkHSDMJUB6_cjs.useOverlayLayer({
+    open: show && portalContainer != null,
+    containerRef: floatingRef,
+    ownerRef: triggerRef,
+    zIndex: panelZIndex,
+    onEscape: closeFromEscape
+  });
   const setTriggerRef = React__namespace.useCallback(
     (node) => {
       triggerRef.current = node;
@@ -87,17 +119,19 @@ var Popover = React__namespace.forwardRef(({
     [ref, triggerRef]
   );
   React__namespace.useEffect(() => {
-    if (trigger !== "click" || !show) return;
+    if (trigger !== "click" || !show || !portalContainer) return;
     const h = (e) => {
+      if (nestedPointerEvents.current.has(e)) return;
       const t = e.target;
       if (triggerRef.current?.contains(t)) return;
       if (floatingRef.current?.contains(t)) return;
       set(false);
     };
-    document.addEventListener("mousedown", h);
-    return () => document.removeEventListener("mousedown", h);
-  }, [show, trigger, set, triggerRef, floatingRef]);
-  const hoverTimeout = React__namespace.useRef();
+    const doc = portalContainer.ownerDocument;
+    doc.addEventListener("mousedown", h);
+    return () => doc.removeEventListener("mousedown", h);
+  }, [show, trigger, set, triggerRef, floatingRef, portalContainer]);
+  React__namespace.useEffect(() => () => window.clearTimeout(hoverTimeout.current), []);
   const interact = trigger === "hover" ? {
     onMouseEnter: () => {
       window.clearTimeout(hoverTimeout.current);
@@ -106,21 +140,31 @@ var Popover = React__namespace.forwardRef(({
     onMouseLeave: () => {
       hoverTimeout.current = window.setTimeout(() => set(false), 100);
     }
-  } : { onClick: () => set(!show) };
+  } : trigger === "click" ? { onClick: () => set(!show) } : {};
   const panelHover = trigger === "hover" ? {
     onMouseEnter: () => window.clearTimeout(hoverTimeout.current),
     onMouseLeave: () => {
       hoverTimeout.current = window.setTimeout(() => set(false), 100);
     }
   } : {};
-  const widthStyle = width === "auto" ? {} : { width: width ?? void 0, minWidth: width ? void 0 : 220 };
+  const focusRemainsInside = (next) => {
+    const node = next;
+    return !!node && (!!triggerRef.current?.contains(node) || !!floatingRef.current?.contains(node));
+  };
+  const triggerChild = React__namespace.cloneElement(children, {
+    "aria-haspopup": children.props["aria-haspopup"] ?? "dialog",
+    "aria-expanded": show,
+    "aria-controls": show ? popoverId : void 0
+  });
+  const hasThemedPopupWidth = themedPopupStyle?.width != null || themedPopupStyle?.minWidth != null || themedPopupStyle?.maxWidth != null;
+  const widthStyle = width === "auto" ? {} : width !== void 0 ? { width } : hasThemedPopupWidth ? {} : { minWidth: 220 };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         ref: setTriggerRef,
         className: `popover-anchor ${className}`,
-        style: { display: "inline-flex", alignSelf: "flex-start" },
+        style: { display: "inline-flex", alignSelf: "flex-start", ...style },
         onClick: (e) => {
           onClick?.(e);
           if ("onClick" in interact) interact.onClick?.();
@@ -133,24 +177,57 @@ var Popover = React__namespace.forwardRef(({
           onMouseLeave?.(e);
           if ("onMouseLeave" in interact) interact.onMouseLeave?.();
         },
+        onFocus: (e) => {
+          onFocus?.(e);
+          if (trigger === "hover" || trigger === "focus") {
+            window.clearTimeout(hoverTimeout.current);
+            set(true);
+          }
+        },
+        onBlur: (e) => {
+          onBlur?.(e);
+          if ((trigger === "hover" || trigger === "focus") && !focusRemainsInside(e.relatedTarget)) {
+            hoverTimeout.current = window.setTimeout(() => set(false), 100);
+          }
+        },
+        "aria-label": ariaLabel,
         ...rest,
-        children
+        children: triggerChild
       }
     ),
-    show && typeof document !== "undefined" && reactDom.createPortal(
+    show && portalContainer && reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           ref: floatingRef,
+          id: popoverId,
           className: `popover popover-${resolved} ${overlayClassName} ${popupClassName}`,
-          style: { ...floatingStyle, ...widthStyle },
+          ...portalTheme.dataAttributes,
+          style: {
+            ...floatingStyle,
+            ...portalTheme.style,
+            ...portalTheme.styles.popup,
+            ...widthStyle
+          },
+          role: "dialog",
+          "aria-labelledby": title ? titleId : void 0,
+          "aria-label": !title ? ariaLabel : void 0,
+          tabIndex: -1,
+          onMouseDownCapture: (e) => nestedPointerEvents.current.add(e.nativeEvent),
+          onFocusCapture: () => window.clearTimeout(hoverTimeout.current),
+          onBlurCapture: (e) => {
+            if ((trigger === "hover" || trigger === "focus") && !focusRemainsInside(e.relatedTarget)) {
+              hoverTimeout.current = window.setTimeout(() => set(false), 100);
+            }
+          },
           ...panelHover,
           children: [
             (title || closable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "popover-header", children: [
-              title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "popover-title", children: title }),
+              title && /* @__PURE__ */ jsxRuntime.jsx("div", { id: titleId, className: "popover-title", children: title }),
               closable && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
+                  type: "button",
                   className: "popover-close",
                   onClick: () => set(false),
                   "aria-label": "Close",
@@ -158,15 +235,16 @@ var Popover = React__namespace.forwardRef(({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "popover-body", children: content }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "popover-body", style: portalTheme.styles.body, children: content }),
             arrow && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `popover-arrow popover-arrow-${resolved}` })
           ]
         }
       ),
-      document.body
+      portalContainer
     )
   ] });
 });
-Popover.displayName = "Popover";
+PopoverBase.displayName = "Popover";
+var Popover = chunkNRJXZPZR_cjs.withComponentTheme(PopoverBase, "Popover", "popover");
 
 exports.Popover = Popover;