@pathscale/ui 1.1.62 → 1.1.64

package/dist/components/popover/Popover.js

@@ -2,6 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Popover.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__ from "../_shared/overlayPosition.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Popover_classes_js_917d7621__ from "./Popover.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=popover-arrow-svg height=12 viewBox="0 0 12 12"width=12 xmlns=http://www.w3.org/2000/svg><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h3>");
 const PopoverContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
@@ -21,6 +22,7 @@ const PopoverRoot = (props)=>{
         "defaultOpen",
         "onOpenChange",
         "placement",
+        "autoFlip",
         "offset",
         "closeOnOutsideClick",
         "closeOnEscape",
@@ -31,6 +33,7 @@ const PopoverRoot = (props)=>{
     const [contentRef, setContentRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
     const [triggerId] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(`popover-trigger-${Math.random().toString(36).slice(2, 8)}`);
     const [contentId] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(`popover-content-${Math.random().toString(36).slice(2, 8)}`);
+    const [resolvedPlacement, setResolvedPlacement] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.placement ?? "bottom");
     const isControlled = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>void 0 !== local.isOpen);
     const isOpen = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>isControlled() ? Boolean(local.isOpen) : internalOpen());
     const setIsOpen = (next, options)=>{
@@ -38,8 +41,10 @@ const PopoverRoot = (props)=>{
         if (isOpen() !== next) local.onOpenChange?.(next);
         if (!next && options?.focusTrigger) triggerRef()?.focus();
     };
-    const placement = ()=>local.placement ?? "bottom";
+    const preferredPlacement = ()=>local.placement ?? "bottom";
+    const placement = ()=>resolvedPlacement();
     const offset = ()=>local.offset ?? 8;
+    const autoFlip = ()=>local.autoFlip ?? true;
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
         const handlePointerDown = (event)=>{
             if (!isOpen()) return;
@@ -72,7 +77,10 @@ const PopoverRoot = (props)=>{
     const ctx = {
         isOpen,
         setIsOpen,
+        preferredPlacement,
         placement,
+        setPlacement: setResolvedPlacement,
+        autoFlip,
         triggerRef,
         setTriggerRef,
         contentRef,
@@ -175,47 +183,72 @@ const PopoverContent = (props)=>{
         "sideOffset"
     ]);
     const ctx = usePopoverContext();
+    const overlayPosition = (0, __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__.createOverlayPosition)({
+        open: ctx.isOpen,
+        triggerRef: ctx.triggerRef,
+        overlayRef: ctx.contentRef,
+        placement: ctx.preferredPlacement,
+        offset: ()=>local.sideOffset ?? ctx.offset(),
+        autoFlip: ctx.autoFlip,
+        align: ()=>"center"
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        ctx.setPlacement(overlayPosition.placement());
+    });
     const style = ()=>{
-        if ("string" == typeof local.style) return `${local.style}; --popover-offset: ${local.sideOffset ?? ctx.offset()}px;`;
+        const overlayStyle = overlayPosition.style();
+        if ("string" == typeof local.style) return [
+            local.style,
+            Object.entries(overlayStyle).map(([key, value])=>`${key}: ${String(value)}`).join("; ")
+        ].filter(Boolean).join("; ");
         return {
             ...local.style ?? {},
-            "--popover-offset": `${local.sideOffset ?? ctx.offset()}px`
+            ...overlayStyle
         };
     };
-    return (()=>{
-        var _el$3 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>ctx.setContentRef(el), _el$3);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get id () {
-                return ctx.contentId();
-            },
-            role: "dialog"
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Popover_classes_js_917d7621__.CLASSES.base, local.class, local.className)
-            }), {
-            "data-slot": "popover-content",
-            get ["data-open"] () {
-                return ctx.isOpen() ? "true" : "false";
-            },
-            get ["data-placement"] () {
-                return ctx.placement();
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return style();
-            },
-            get ["aria-labelledby"] () {
-                return ctx.triggerId();
-            },
-            get ["aria-hidden"] () {
-                return ctx.isOpen() ? "false" : "true";
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
-        return _el$3;
-    })();
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return ctx.isOpen();
+        },
+        get children () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
+                get children () {
+                    var _el$3 = _tmpl$();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>ctx.setContentRef(el), _el$3);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                        get id () {
+                            return ctx.contentId();
+                        },
+                        role: "dialog"
+                    }, ()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Popover_classes_js_917d7621__.CLASSES.base, local.class, local.className)
+                        }), {
+                        "data-slot": "popover-content",
+                        get ["data-open"] () {
+                            return ctx.isOpen() ? "true" : "false";
+                        },
+                        get ["data-placement"] () {
+                            return ctx.placement();
+                        },
+                        get ["data-theme"] () {
+                            return local.dataTheme;
+                        },
+                        get style () {
+                            return style();
+                        },
+                        get ["aria-labelledby"] () {
+                            return ctx.triggerId();
+                        },
+                        get ["aria-hidden"] () {
+                            return ctx.isOpen() ? "false" : "true";
+                        }
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+                    return _el$3;
+                }
+            });
+        }
+    });
 };
 const PopoverDialog = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [

package/dist/components/select/Select.css

@@ -132,10 +132,8 @@
 
   .ui-select__popover {
     display: none;
-    position: absolute;
+    position: fixed;
     z-index: 80;
-    top: calc(100% + 0.375rem);
-    inset-inline-start: 0;
     min-width: max(100%, 14rem);
     max-width: min(30rem, calc(100vw - 2rem));
     max-height: min(24rem, 70vh);
@@ -162,10 +160,46 @@
     display: block;
     visibility: visible;
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: scale(1);
     pointer-events: auto;
   }
 
+  .ui-select__popover[data-placement="top"] {
+    transform: translateY(4px) scale(0.98);
+    transform-origin: bottom;
+  }
+
+  .ui-select__popover[data-placement="top"][data-open="true"] {
+    transform: translateY(0) scale(1);
+  }
+
+  .ui-select__popover[data-placement="bottom"] {
+    transform: translateY(-4px) scale(0.98);
+    transform-origin: top;
+  }
+
+  .ui-select__popover[data-placement="bottom"][data-open="true"] {
+    transform: translateY(0) scale(1);
+  }
+
+  .ui-select__popover[data-placement="left"] {
+    transform: translateX(4px) scale(0.98);
+    transform-origin: right;
+  }
+
+  .ui-select__popover[data-placement="left"][data-open="true"] {
+    transform: translateX(0) scale(1);
+  }
+
+  .ui-select__popover[data-placement="right"] {
+    transform: translateX(-4px) scale(0.98);
+    transform-origin: left;
+  }
+
+  .ui-select__popover[data-placement="right"][data-open="true"] {
+    transform: translateX(0) scale(1);
+  }
+
   .ui-select__listbox {
     display: flex;
     flex-direction: column;

package/dist/components/select/Select.d.ts

@@ -1,10 +1,12 @@
 import "./Select.css";
 import { type Component, type JSX } from "solid-js";
+import { type OverlayPlacement } from "../_shared/overlayPosition";
 import type { IComponentBaseProps } from "../types";
 type SelectKey = string | number;
 export type SelectValueType = SelectKey | SelectKey[] | null;
 export type SelectVariant = "primary" | "secondary";
 export type SelectSelectionMode = "single" | "multiple";
+export type SelectPlacement = OverlayPlacement;
 export type SelectRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & IComponentBaseProps & {
     children: JSX.Element;
     placeholder?: string;
@@ -19,6 +21,8 @@ export type SelectRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange
     fullWidth?: boolean;
     variant?: SelectVariant;
     selectionMode?: SelectSelectionMode;
+    placement?: SelectPlacement;
+    autoFlip?: boolean;
     isOpen?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;

package/dist/components/select/Select.js

@@ -2,6 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Select.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__ from "../_shared/overlayPosition.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__ from "./Select.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span><span>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button><span>");
 const SelectContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
@@ -50,6 +51,8 @@ const SelectRoot = (props)=>{
         "fullWidth",
         "variant",
         "selectionMode",
+        "placement",
+        "autoFlip",
         "isOpen",
         "defaultOpen",
         "onOpenChange",
@@ -69,8 +72,11 @@ const SelectRoot = (props)=>{
     const [focusedKey, setFocusedKey] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
     const [focusRequest, setFocusRequest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
     const [triggerRef, setTriggerRefSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
+    const [popoverRef, setPopoverRefSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
     const [rootRef, setRootRefSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
     const open = ()=>void 0 !== local.isOpen ? Boolean(local.isOpen) : internalOpen();
+    const placement = ()=>local.placement ?? "bottom";
+    const autoFlip = ()=>local.autoFlip ?? true;
     const selectedKeys = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
         const controlledValue = void 0 !== local.selectedKeys ? local.selectedKeys : local.value;
         if (void 0 !== controlledValue) return normalizeSelection(selectionMode(), controlledValue);
@@ -162,6 +168,9 @@ const SelectRoot = (props)=>{
     const setTriggerRef = (el)=>{
         setTriggerRefSignal(el);
     };
+    const setPopoverRef = (el)=>{
+        setPopoverRefSignal(el);
+    };
     const setRootRef = (el)=>{
         setRootRefSignal(el);
         if ("function" == typeof local.ref) local.ref(el);
@@ -185,9 +194,10 @@ const SelectRoot = (props)=>{
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
         const handlePointerDown = (event)=>{
             if (!open()) return;
-            const root = rootRef();
-            if (!root) return;
-            if (root.contains(event.target)) return;
+            const target = event.target;
+            if (rootRef()?.contains(target)) return;
+            if (popoverRef()?.contains(target)) return;
+            if (triggerRef()?.contains(target)) return;
             setOpen(false);
         };
         document.addEventListener("pointerdown", handlePointerDown);
@@ -205,6 +215,10 @@ const SelectRoot = (props)=>{
             placeholder: ()=>local.placeholder ?? "Select an option",
             triggerId,
             listboxId,
+            placement,
+            autoFlip,
+            triggerRef,
+            popoverRef,
             selectedKeys,
             selectedText,
             focusedKey,
@@ -219,6 +233,7 @@ const SelectRoot = (props)=>{
             registerOption,
             unregisterOption,
             setTriggerRef,
+            setPopoverRef,
             setRootRef
         },
         get children () {
@@ -497,24 +512,64 @@ const SelectPopover = (props)=>{
         "children",
         "class",
         "className",
-        "dataTheme"
+        "dataTheme",
+        "style"
     ]);
-    return (()=>{
-        var _el$10 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.popover, local.class, local.className)
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            "data-slot": "ui-select-popover",
-            get ["data-open"] () {
-                return ctx?.open() ? "true" : "false";
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>local.children);
-        return _el$10;
-    })();
+    const overlayPosition = (0, __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__.createOverlayPosition)({
+        open: ()=>ctx?.open() ?? false,
+        triggerRef: ()=>ctx?.triggerRef(),
+        overlayRef: ()=>ctx?.popoverRef(),
+        placement: ()=>ctx?.placement() ?? "bottom",
+        offset: ()=>6,
+        autoFlip: ()=>ctx?.autoFlip() ?? true,
+        align: ()=>"start",
+        matchTriggerWidth: ()=>true,
+        minWidth: ()=>224
+    });
+    const popoverStyle = ()=>{
+        const overlayStyle = overlayPosition.style();
+        if ("string" == typeof local.style) return [
+            local.style,
+            Object.entries(overlayStyle).map(([key, value])=>`${key}: ${String(value)}`).join("; ")
+        ].filter(Boolean).join("; ");
+        return {
+            ...local.style ?? {},
+            ...overlayStyle
+        };
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return ctx?.open();
+        },
+        get children () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
+                get children () {
+                    var _el$10 = _tmpl$();
+                    var _ref$ = ctx?.setPopoverRef;
+                    "function" == typeof _ref$ && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$10);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.popover, local.class, local.className)
+                        }), {
+                        get ["data-theme"] () {
+                            return local.dataTheme;
+                        },
+                        "data-slot": "ui-select-popover",
+                        get ["data-open"] () {
+                            return ctx?.open() ? "true" : "false";
+                        },
+                        get ["data-placement"] () {
+                            return overlayPosition.placement();
+                        },
+                        get style () {
+                            return popoverStyle();
+                        }
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>local.children);
+                    return _el$10;
+                }
+            });
+        }
+    });
 };
 const SelectListbox = (props)=>{
     const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(SelectContext);

package/dist/components/select/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./Select";
-export type { SelectProps, SelectRootProps, SelectValueType, SelectVariant, SelectSelectionMode, SelectTriggerProps, SelectValueProps, SelectIndicatorProps, SelectPopoverProps, SelectListboxProps, SelectOptionProps, } from "./Select";
+export type { SelectProps, SelectRootProps, SelectPlacement, SelectValueType, SelectVariant, SelectSelectionMode, SelectTriggerProps, SelectValueProps, SelectIndicatorProps, SelectPopoverProps, SelectListboxProps, SelectOptionProps, } from "./Select";

package/dist/components/theme-color-picker/ThemeColorPicker.classes.d.ts

@@ -1,7 +1,7 @@
 export declare const CLASSES: {
     readonly base: "relative";
     readonly iconActive: "text-primary";
-    readonly popover: "absolute z-50 mt-2 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm";
+    readonly popover: "fixed z-50 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm";
     readonly popoverAlignStart: "left-0";
     readonly popoverAlignEnd: "right-0";
     readonly row: "flex items-center gap-3";

package/dist/components/theme-color-picker/ThemeColorPicker.classes.js

@@ -1,7 +1,7 @@
 const CLASSES = {
     base: "relative",
     iconActive: "text-primary",
-    popover: "absolute z-50 mt-2 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm",
+    popover: "fixed z-50 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm",
     popoverAlignStart: "left-0",
     popoverAlignEnd: "right-0",
     row: "flex items-center gap-3",

package/dist/components/theme-color-picker/ThemeColorPicker.d.ts

@@ -1,6 +1,8 @@
 import { type Component, type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
+import { type OverlayPlacement } from "../_shared/overlayPosition";
 export type ThemeColorPickerAlign = "start" | "end";
+export type ThemeColorPickerPlacement = OverlayPlacement;
 export interface ThemeColorPickerProps extends IComponentBaseProps {
     /**
      * Prefix for localStorage keys (e.g., "myapp" becomes "myapp_theme_color")
@@ -28,6 +30,16 @@ export interface ThemeColorPickerProps extends IComponentBaseProps {
      * @default "end"
      */
     align?: ThemeColorPickerAlign;
+    /**
+     * Preferred popover placement.
+     * @default "bottom"
+     */
+    placement?: ThemeColorPickerPlacement;
+    /**
+     * Automatically flip the popover when there is insufficient viewport space.
+     * @default true
+     */
+    autoFlip?: boolean;
     /**
      * Custom button content (defaults to palette icon)
      */

package/dist/components/theme-color-picker/ThemeColorPicker.js

@@ -1,11 +1,11 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__ from "../color-wheel-flower/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__ from "../color-wheel-flower/ColorUtils.js";
 import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__ from "../_shared/overlayPosition.js";
 import * as __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__ from "./hueShift.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__ from "./ThemeColorPicker.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div></div><div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button>");
@@ -20,6 +20,8 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
         "onThemeSwitch",
         "aria-label",
         "align",
+        "placement",
+        "autoFlip",
         "children",
         "class",
         "className",
@@ -28,7 +30,8 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
     ]);
     const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
     const [featureAvailable, setFeatureAvailable] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(true);
-    let containerRef;
+    const [containerRef, setContainerRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
+    const [popoverRef, setPopoverRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
     const store = (0, __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__.createHueShiftStore)(local.storagePrefix ?? "theme");
     const colorValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>hexToColorValue(store.themeColor()));
     const handleColorChange = (color)=>{
@@ -81,7 +84,10 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         if (!isOpen()) return;
         const handleClickOutside = (e)=>{
-            if (containerRef && !containerRef.contains(e.target)) setIsOpen(false);
+            const target = e.target;
+            if (containerRef()?.contains(target)) return;
+            if (popoverRef()?.contains(target)) return;
+            setIsOpen(false);
         };
         const timer = setTimeout(()=>{
             document.addEventListener("click", handleClickOutside);
@@ -108,15 +114,24 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
             onFormatChange: ()=>{}
         });
     const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.base, local.class, local.className);
-    const popoverClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popover, "start" === local.align ? __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popoverAlignStart : __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popoverAlignEnd);
+    const popoverClasses = ()=>__WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popover;
+    const overlayPosition = (0, __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__.createOverlayPosition)({
+        open: isOpen,
+        triggerRef: containerRef,
+        overlayRef: popoverRef,
+        placement: ()=>local.placement ?? "bottom",
+        offset: ()=>8,
+        autoFlip: ()=>local.autoFlip ?? true,
+        align: ()=>"start" === local.align ? "start" : "end"
+    });
+    const popoverStyle = ()=>overlayPosition.style();
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
         get when () {
             return featureAvailable();
         },
         get children () {
             var _el$ = _tmpl$2();
-            var _ref$ = containerRef;
-            "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : containerRef = _el$;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setContainerRef, _el$);
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                     class: classes()
                 }), {
@@ -151,52 +166,64 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
                     return isOpen();
                 },
                 get children () {
-                    var _el$2 = _tmpl$2();
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                            class: popoverClasses()
-                        })), false, true);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__.ColorPickerContext.Provider, {
-                        get value () {
-                            return contextValue();
-                        },
+                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
                         get children () {
-                            var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                    class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.row
-                                })), false, true);
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                    class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.wheelWrap
-                                })), false, true);
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__.ColorWheelFlower, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                    class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.wheelCustom
-                                }))));
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                    class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.grayscaleList
-                                })), false, true);
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
-                                each: GRAYSCALE_SWATCHES,
-                                children: (g)=>(()=>{
-                                        var _el$6 = _tmpl$3();
-                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                                class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.swatchButton
-                                            }), {
-                                            get style () {
-                                                return {
-                                                    "background-color": `${g.hex}`
-                                                };
-                                            },
-                                            get ["aria-label"] () {
-                                                return g.label;
-                                            },
-                                            onClick: ()=>handleGrayscale(g)
-                                        }), false, false);
-                                        return _el$6;
-                                    })()
+                            var _el$2 = _tmpl$2();
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setPopoverRef, _el$2);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                    class: popoverClasses()
+                                }), {
+                                get ["data-placement"] () {
+                                    return overlayPosition.placement();
+                                },
+                                get style () {
+                                    return popoverStyle();
+                                }
+                            }), false, true);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__.ColorPickerContext.Provider, {
+                                get value () {
+                                    return contextValue();
+                                },
+                                get children () {
+                                    var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                            class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.row
+                                        })), false, true);
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                            class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.wheelWrap
+                                        })), false, true);
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__.ColorWheelFlower, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                            class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.wheelCustom
+                                        }))));
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                            class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.grayscaleList
+                                        })), false, true);
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                                        each: GRAYSCALE_SWATCHES,
+                                        children: (g)=>(()=>{
+                                                var _el$6 = _tmpl$3();
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                                        class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.swatchButton
+                                                    }), {
+                                                    get style () {
+                                                        return {
+                                                            "background-color": `${g.hex}`
+                                                        };
+                                                    },
+                                                    get ["aria-label"] () {
+                                                        return g.label;
+                                                    },
+                                                    onClick: ()=>handleGrayscale(g)
+                                                }), false, false);
+                                                return _el$6;
+                                            })()
+                                    }));
+                                    return _el$3;
+                                }
                             }));
-                            return _el$3;
+                            return _el$2;
                         }
-                    }));
-                    return _el$2;
+                    });
                 }
             }), null);
             return _el$;

package/dist/components/theme-color-picker/index.d.ts

@@ -1,3 +1,3 @@
 export { default as ThemeColorPicker } from "./ThemeColorPicker";
-export type { ThemeColorPickerProps, ThemeColorPickerAlign } from "./ThemeColorPicker";
+export type { ThemeColorPickerProps, ThemeColorPickerAlign, ThemeColorPickerPlacement, } from "./ThemeColorPicker";
 export { createHueShiftStore, getDefaultHueShiftStore, resetHueShift, type HueShiftStore, } from "./hueShift";