@pathscale/ui 1.1.63 → 1.1.65

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/table/Table.css

@@ -149,6 +149,7 @@
      -------------------------------------------------------------------------- */
   .table__column {
     position: relative;
+    overflow: hidden;
     padding-inline: 1rem;
     padding-block: 0.625rem;
     text-align: left;
@@ -158,6 +159,11 @@
     vertical-align: middle;
   }
 
+  .table__column > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+
   @supports (color: color-mix(in lab, red, red)) {
     .table__column {
       color: color-mix(in oklab, var(--color-base-content) 60%, transparent);

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)
      */