@strands.gg/accui 2.11.32 → 2.11.33

package/dist/index.es.js

@@ -3,7 +3,7 @@ import { u as useStrandsConfig, p as provideStrandsConfig } from "./useStrandsCo
 import { s } from "./useStrandsConfig-XmPqJn_B.es.js";
 import { u as useStrandsAuth } from "./useStrandsAuth-Dca-zFQT.es.js";
 const _hoisted_1$U = { class: "app-content" };
-const _hoisted_2$N = {
+const _hoisted_2$M = {
   key: 0,
   class: "ui-app-loading-overlay"
 };
@@ -64,7 +64,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
           _cache[0] || (_cache[0] = createElementVNode("div", { class: "ui-app-notifications" }, null, -1))
         ])),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
-          isGlobalLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2$N, [
+          isGlobalLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2$M, [
             createElementVNode("div", _hoisted_3$J, [
               _cache[1] || (_cache[1] = createElementVNode("div", { class: "ui-app-loading-spinner" }, null, -1)),
               _ctx.loadingMessage ? (openBlock(), createElementBlock("p", _hoisted_4$H, toDisplayString(_ctx.loadingMessage), 1)) : createCommentVNode("", true)
@@ -84,7 +84,7 @@ const _export_sfc = (sfc, props) => {
 };
 const UiApp = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["__scopeId", "data-v-f18c1706"]]);
 const _hoisted_1$T = { class: "accui-component-scope" };
-const _hoisted_2$M = { class: "alert-content" };
+const _hoisted_2$L = { class: "alert-content" };
 const _hoisted_3$I = { class: "alert-icon-container" };
 const _hoisted_4$G = {
   class: "alert-main-icon",
@@ -139,7 +139,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
           class: normalizeClass(alertClasses.value),
           role: "alert"
         }, [
-          createElementVNode("div", _hoisted_2$M, [
+          createElementVNode("div", _hoisted_2$L, [
             createElementVNode("div", _hoisted_3$I, [
               (openBlock(), createElementBlock("svg", _hoisted_4$G, [
                 createElementVNode("path", {
@@ -194,7 +194,7 @@ const _hoisted_1$S = {
   key: 0,
   class: "loader-icon"
 };
-const _hoisted_2$L = ["width", "height"];
+const _hoisted_2$K = ["width", "height"];
 const _hoisted_3$H = ["d"];
 const _hoisted_4$F = ["stroke-width"];
 const _hoisted_5$z = ["stroke-width"];
@@ -267,7 +267,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
               "stroke-linejoin": "round",
               class: "loader-animated-path"
             }, null, 8, _hoisted_5$z)
-          ], 8, _hoisted_2$L))
+          ], 8, _hoisted_2$K))
         ])) : _ctx.variant === "circle" ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: "loader-circle",
@@ -311,7 +311,7 @@ const _hoisted_1$R = {
   key: 0,
   class: "button-loading-content"
 };
-const _hoisted_2$K = { key: 0 };
+const _hoisted_2$J = { key: 0 };
 const _hoisted_3$G = {
   key: 0,
   class: "leading-icon"
@@ -369,7 +369,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           centered: false,
           color: "white"
         }, null, 8, ["size"]),
-        !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_2$K, toDisplayString(_ctx.loadingText || "Loading..."), 1)) : createCommentVNode("", true)
+        !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_2$J, toDisplayString(_ctx.loadingText || "Loading..."), 1)) : createCommentVNode("", true)
       ])) : (openBlock(), createElementBlock("span", {
         key: 1,
         class: normalizeClass(["button-content", sizeClass.value])
@@ -726,8 +726,11 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
 });
 const UiTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-ba66edda"]]);
 const _hoisted_1$O = ["type", "disabled", "tabindex"];
-const _hoisted_2$J = ["type", "disabled", "tabindex"];
+const _hoisted_2$I = ["type", "disabled", "tabindex"];
 const _sfc_main$U = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "UiButton",
   props: {
     variant: { default: "primary" },
@@ -811,15 +814,14 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return _ctx.title ? (openBlock(), createBlock(UiTooltip, normalizeProps(mergeProps({ key: 0 }, tooltipProps.value)), {
         default: withCtx(() => [
-          !_ctx.to ? (openBlock(), createElementBlock("button", {
-            key: 0,
+          !_ctx.to ? (openBlock(), createElementBlock("button", mergeProps({ key: 0 }, _ctx.$attrs, {
             type: _ctx.type,
             disabled: _ctx.disabled || _ctx.loading,
-            class: normalizeClass(buttonClassString.value),
-            style: normalizeStyle(buttonStyles.value),
+            class: buttonClassString.value,
+            style: buttonStyles.value,
             tabindex: effectiveTabindex.value,
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
-          }, [
+          }), [
             createVNode(UiButtonContent, {
               loading: _ctx.loading,
               "loading-text": _ctx.loadingText,
@@ -849,7 +851,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                 key: "1"
               } : void 0
             ]), 1032, ["loading", "loading-text", "icon", "size"])
-          ], 14, _hoisted_1$O)) : isNuxtAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$X, {
+          ], 16, _hoisted_1$O)) : isNuxtAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$X, {
             key: 1,
             to: _ctx.to,
             disabled: _ctx.disabled,
@@ -957,15 +959,14 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
         ]),
         _: 3
       }, 16)) : (openBlock(), createElementBlock(Fragment$1, { key: 1 }, [
-        !_ctx.to ? (openBlock(), createElementBlock("button", {
-          key: 0,
+        !_ctx.to ? (openBlock(), createElementBlock("button", mergeProps({ key: 0 }, _ctx.$attrs, {
           type: _ctx.type,
           disabled: _ctx.disabled || _ctx.loading,
-          class: normalizeClass(buttonClassString.value),
-          style: normalizeStyle(buttonStyles.value),
+          class: buttonClassString.value,
+          style: buttonStyles.value,
           tabindex: effectiveTabindex.value,
           onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("click", $event))
-        }, [
+        }), [
           createVNode(UiButtonContent, {
             loading: _ctx.loading,
             "loading-text": _ctx.loadingText,
@@ -995,7 +996,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
               key: "1"
             } : void 0
           ]), 1032, ["loading", "loading-text", "icon", "size"])
-        ], 14, _hoisted_2$J)) : isNuxtAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$X, {
+        ], 16, _hoisted_2$I)) : isNuxtAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$X, {
           key: 1,
           to: _ctx.to,
           disabled: _ctx.disabled,
@@ -1104,7 +1105,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-52fc28e3"]]);
+const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-21489ebf"]]);
 const CompoundUiButton = StrandsUiButton;
 CompoundUiButton.Content = UiButtonContent;
 CompoundUiButton.Anchor = _sfc_main$Y;
@@ -1114,7 +1115,7 @@ const _hoisted_1$N = {
   key: 0,
   class: "ui-card-header"
 };
-const _hoisted_2$I = {
+const _hoisted_2$H = {
   key: 0,
   class: "ui-card-title-wrapper"
 };
@@ -1162,7 +1163,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
         _ctx.$slots["header"] || _ctx.title || _ctx.subtitle || _ctx.$slots["leading-icon"] || _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_1$N, [
           renderSlot(_ctx.$slots, "header", {}, () => [
             renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true),
-            _ctx.title || _ctx.$slots["title"] || _ctx.subtitle || _ctx.$slots["subtitle"] ? (openBlock(), createElementBlock("div", _hoisted_2$I, [
+            _ctx.title || _ctx.$slots["title"] || _ctx.subtitle || _ctx.$slots["subtitle"] ? (openBlock(), createElementBlock("div", _hoisted_2$H, [
               _ctx.title || _ctx.$slots["title"] ? renderSlot(_ctx.$slots, "title", { key: 0 }, () => [
                 _ctx.title ? (openBlock(), createElementBlock("h2", _hoisted_3$F, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)
               ], true) : createCommentVNode("", true),
@@ -1742,7 +1743,7 @@ const _hoisted_1$M = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$H = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck", "tabindex"];
+const _hoisted_2$G = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck", "tabindex"];
 const _hoisted_3$E = {
   key: 1,
   class: "input-trailing-icon"
@@ -1868,7 +1869,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           onBlur: handleBlur,
           onFocus: handleFocus,
           onKeydown: handleKeydown
-        }, null, 42, _hoisted_2$H),
+        }, null, 42, _hoisted_2$G),
         _ctx.type === "password" ? (openBlock(), createElementBlock("div", _hoisted_3$E, [
           createVNode(StrandsUiButton, {
             color: showPassword.value ? "primary" : "secondary",
@@ -1913,7 +1914,7 @@ const _hoisted_1$L = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$G = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "cols", "maxlength", "autocomplete", "spellcheck"];
+const _hoisted_2$F = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "cols", "maxlength", "autocomplete", "spellcheck"];
 const _hoisted_3$D = {
   key: 1,
   class: "input-trailing-icon"
@@ -2011,7 +2012,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur,
             onFocus: handleFocus,
             onKeydown: handleKeydown
-          }, null, 42, _hoisted_2$G)
+          }, null, 42, _hoisted_2$F)
         ], 2),
         props.hasTrailingIcon ? (openBlock(), createElementBlock("div", _hoisted_3$D, [
           renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
@@ -2206,7 +2207,7 @@ function useFloatingPosition(options) {
       }
     }
     if (clickOutside?.enabled) {
-      document.addEventListener("click", handleClickOutside);
+      document.addEventListener("click", handleClickOutside, true);
     }
   };
   const cleanup = () => {
@@ -2215,7 +2216,7 @@ function useFloatingPosition(options) {
       window.removeEventListener("scroll", handleScroll, true);
     }
     if (clickOutside?.enabled) {
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("click", handleClickOutside, true);
     }
     if (resizeObserver) {
       resizeObserver.disconnect();
@@ -2238,7 +2239,7 @@ const _hoisted_1$K = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$F = ["tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
+const _hoisted_2$E = ["tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
 const _hoisted_3$C = { class: "input-select-value" };
 const _hoisted_4$B = {
   key: 0,
@@ -2609,7 +2610,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             }, [
               createVNode(unref(ChevronDown))
             ], 2)
-          ], 42, _hoisted_2$F),
+          ], 42, _hoisted_2$E),
           props.hasTrailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6$r, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
@@ -2686,7 +2687,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
 });
 const UiInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-302debb0"]]);
 const _hoisted_1$J = { class: "input-leading-icon" };
-const _hoisted_2$E = ["src"];
+const _hoisted_2$D = ["src"];
 const _hoisted_3$B = ["id", "accept", "multiple", "disabled", "required"];
 const _hoisted_4$A = { class: "input-file-content" };
 const _hoisted_5$v = {
@@ -2929,7 +2930,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             src: previewImageUrl.value,
             alt: "Preview",
             class: "input-file-preview"
-          }, null, 8, _hoisted_2$E)) : props.hasLeadingIcon ? renderSlot(_ctx.$slots, "leading-icon", { key: 1 }, void 0, true) : (openBlock(), createBlock(unref(FileInput), { key: 2 }))
+          }, null, 8, _hoisted_2$D)) : props.hasLeadingIcon ? renderSlot(_ctx.$slots, "leading-icon", { key: 1 }, void 0, true) : (openBlock(), createBlock(unref(FileInput), { key: 2 }))
         ]),
         createElementVNode("div", {
           class: normalizeClass(["input-file-area", {
@@ -3000,7 +3001,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
 });
 const UiInputFile = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-e1fd712d"]]);
 const _hoisted_1$I = { class: "tabs-wrapper" };
-const _hoisted_2$D = {
+const _hoisted_2$C = {
   key: 0,
   class: "tabs-before"
 };
@@ -3346,7 +3347,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             ]]),
             style: normalizeStyle(_ctx.sticky ? { position: "sticky", [_ctx.sticky.side]: `${_ctx.sticky.offset}px`, zIndex: 10 } : {})
           }, [
-            _ctx.$slots["before"] ? (openBlock(), createElementBlock("div", _hoisted_2$D, [
+            _ctx.$slots["before"] ? (openBlock(), createElementBlock("div", _hoisted_2$C, [
               renderSlot(_ctx.$slots, "before", {}, void 0, true)
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
@@ -3469,7 +3470,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
 });
 const UiDivider = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-1c798024"]]);
 const _hoisted_1$G = { class: "datetime-picker-wrapper" };
-const _hoisted_2$C = { class: "datetime-picker-leading-icon" };
+const _hoisted_2$B = { class: "datetime-picker-leading-icon" };
 const _hoisted_3$z = { class: "datetime-picker-display" };
 const _hoisted_4$y = {
   key: 0,
@@ -3850,7 +3851,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           ]]),
           onClick: togglePicker
         }, [
-          createElementVNode("div", _hoisted_2$C, [
+          createElementVNode("div", _hoisted_2$B, [
             _ctx.type === "date" ? (openBlock(), createBlock(unref(Calendar), { key: 0 })) : _ctx.type === "time" ? (openBlock(), createBlock(unref(Clock), { key: 1 })) : (openBlock(), createBlock(unref(CalendarClock), { key: 2 }))
           ]),
           createElementVNode("div", _hoisted_3$z, [
@@ -25194,7 +25195,7 @@ var TextAlign = Extension.create({
 var index_default$1 = TextAlign;
 var index_default = Placeholder;
 const _hoisted_1$F = { class: "input-richtext-toolbar" };
-const _hoisted_2$B = { class: "input-richtext-group" };
+const _hoisted_2$A = { class: "input-richtext-group" };
 const _hoisted_3$y = { class: "input-richtext-group" };
 const _hoisted_4$x = { class: "input-richtext-group" };
 const _hoisted_5$s = { class: "input-richtext-group" };
@@ -25287,7 +25288,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         }])
       }, [
         createElementVNode("div", _hoisted_1$F, [
-          createElementVNode("div", _hoisted_2$B, [
+          createElementVNode("div", _hoisted_2$A, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive("bold") ? "primary" : "secondary",
               size: "sm",
@@ -25569,7 +25570,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
 });
 const UiInputRichText = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-18a35d5d"]]);
 const _hoisted_1$E = { class: "pincode-inputs" };
-const _hoisted_2$A = {
+const _hoisted_2$z = {
   key: 0,
   class: "pincode-icon pincode-icon-leading"
 };
@@ -25769,7 +25770,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["pincode-wrapper", [`pincode-size-${_ctx.size}`, { "pincode-error": _ctx.error }]])
       }, [
         createElementVNode("div", _hoisted_1$E, [
-          props.hasLeadingIcon ? (openBlock(), createElementBlock("div", _hoisted_2$A, [
+          props.hasLeadingIcon ? (openBlock(), createElementBlock("div", _hoisted_2$z, [
             renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
           ])) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.maxLength, (index) => {
@@ -25823,7 +25824,7 @@ function hasSlotContent(slots, slotName) {
   });
 }
 const _hoisted_1$D = ["for"];
-const _hoisted_2$z = {
+const _hoisted_2$y = {
   key: 0,
   class: "input-required"
 };
@@ -25934,7 +25935,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           class: "input-label"
         }, [
           createTextVNode(toDisplayString(props.label) + " ", 1),
-          props.required ? (openBlock(), createElementBlock("span", _hoisted_2$z, "*")) : createCommentVNode("", true)
+          props.required ? (openBlock(), createElementBlock("span", _hoisted_2$y, "*")) : createCommentVNode("", true)
         ], 8, _hoisted_1$D)) : createCommentVNode("", true),
         createElementVNode("div", null, [
           isTextInput.value ? (openBlock(), createBlock(UiInputText, {
@@ -26161,7 +26162,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
 });
 const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-96984fc3"]]);
 const _hoisted_1$C = ["disabled", "aria-disabled"];
-const _hoisted_2$y = ["href", "target", "rel", "aria-disabled"];
+const _hoisted_2$x = ["href", "target", "rel", "aria-disabled"];
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "UiLink",
   props: {
@@ -26268,13 +26269,13 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
         onClick: handleClick2
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 14, _hoisted_2$y));
+      ], 14, _hoisted_2$x));
     };
   }
 });
 const StrandsUiLink = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-3bf99110"]]);
 const _hoisted_1$B = { class: "ui-toggle-container" };
-const _hoisted_2$x = ["for"];
+const _hoisted_2$w = ["for"];
 const _hoisted_3$v = {
   key: 0,
   class: "ui-toggle-required"
@@ -26321,7 +26322,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         }, [
           createTextVNode(toDisplayString(_ctx.label) + " ", 1),
           _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_3$v, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_2$x)) : createCommentVNode("", true),
+        ], 8, _hoisted_2$w)) : createCommentVNode("", true),
         createElementVNode("button", {
           id: toggleId.value,
           type: "button",
@@ -26340,7 +26341,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
 });
 const UiToggle = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-ba05b9e3"]]);
 const _hoisted_1$A = { class: "accui-component-scope" };
-const _hoisted_2$w = { class: "avatar-editor-simple" };
+const _hoisted_2$v = { class: "avatar-editor-simple" };
 const _hoisted_3$u = {
   key: 1,
   class: "editor-container"
@@ -26656,7 +26657,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     }, { immediate: true });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$A, [
-        createElementVNode("div", _hoisted_2$w, [
+        createElementVNode("div", _hoisted_2$v, [
           createElementVNode("input", {
             ref_key: "fileInput",
             ref: fileInput,
@@ -27144,7 +27145,7 @@ class SoundEffects {
 }
 const playLevelUp = (level, userSettings) => SoundEffects.playLevelUp(level, userSettings);
 const _hoisted_1$z = { class: "level-progress-container" };
-const _hoisted_2$v = ["width", "height", "viewBox"];
+const _hoisted_2$u = ["width", "height", "viewBox"];
 const _hoisted_3$t = { key: 0 };
 const _hoisted_4$s = ["r"];
 const _hoisted_5$o = ["y"];
@@ -27421,7 +27422,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               }, null, -1)
             ])], 8, _hoisted_12$j)
           ])
-        ], 8, _hoisted_2$v))
+        ], 8, _hoisted_2$u))
       ]);
     };
   }
@@ -27635,7 +27636,7 @@ const _hoisted_1$y = {
   role: "dialog",
   "aria-modal": "true"
 };
-const _hoisted_2$u = { class: "ui-modal-header-content" };
+const _hoisted_2$t = { class: "ui-modal-header-content" };
 const _hoisted_3$s = { class: "ui-modal-title" };
 const _hoisted_4$r = { key: 0 };
 const _hoisted_5$n = {
@@ -27813,7 +27814,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                     tabindex: "-1"
                   }, createSlots({
                     header: withCtx(() => [
-                      createElementVNode("div", _hoisted_2$u, [
+                      createElementVNode("div", _hoisted_2$t, [
                         createElementVNode("div", _hoisted_3$s, [
                           renderSlot(_ctx.$slots, "header", {
                             handleClose: closeModal,
@@ -28477,7 +28478,7 @@ const tailwindColors = {
   }
 };
 const _hoisted_1$x = { class: "ui-color-picker" };
-const _hoisted_2$t = { class: "ui-color-picker-main" };
+const _hoisted_2$s = { class: "ui-color-picker-main" };
 const _hoisted_3$r = ["viewBox"];
 const _hoisted_4$q = ["d"];
 const _hoisted_5$m = ["d"];
@@ -30105,7 +30106,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$x, [
-        createElementVNode("div", _hoisted_2$t, [
+        createElementVNode("div", _hoisted_2$s, [
           createElementVNode("div", {
             ref_key: "colorAreaRef",
             ref: colorAreaRef,
@@ -30747,8 +30748,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 const UiColorPickerPicker = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-24473a61"]]);
-const _hoisted_1$w = { class: "ui-color-picker-button-container" };
-const _hoisted_2$s = { class: "ui-color-picker-button-preview" };
+const _hoisted_1$w = { class: "ui-color-picker-button-preview" };
 const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "UiColorPicker.Button",
   props: {
@@ -30767,7 +30767,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const buttonRef = ref();
+    const containerRef = ref();
     const popoverRef = ref();
     const isPopoverOpen = ref(false);
     const internalValue = computed({
@@ -30775,15 +30775,13 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       set: (value) => emit("update:modelValue", value)
     });
     const currentColorString = computed(() => props.modelValue || "#000000");
-    const triggerElement = computed(() => buttonRef.value?.$el);
-    const floatingElement = computed(() => popoverRef.value);
     const {
       floatingStyle,
       updatePosition,
       cleanup: cleanupFloating
     } = useFloatingPosition({
-      trigger: triggerElement,
-      floating: floatingElement,
+      trigger: containerRef,
+      floating: popoverRef,
       placement: "bottom-start",
       offset: 8,
       shift: true,
@@ -30833,16 +30831,18 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       cleanupFloating();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$w, [
+      return openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: "ui-color-picker-button-container"
+      }, [
         createVNode(StrandsUiButton, {
-          ref_key: "buttonRef",
-          ref: buttonRef,
           disabled: props.disabled,
           color: "secondary",
           onClick: togglePopover
         }, {
           "leading-icon": withCtx(() => [
-            createElementVNode("div", _hoisted_2$s, [
+            createElementVNode("div", _hoisted_1$w, [
               createElementVNode("div", {
                 class: "ui-color-picker-button-color",
                 style: normalizeStyle({ backgroundColor: currentColorString.value })
@@ -30873,11 +30873,11 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
             }), null, 16, ["modelValue"])
           ], 4)) : createCommentVNode("", true)
         ]))
-      ]);
+      ], 512);
     };
   }
 });
-const UiColorPickerButton = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-a03d15a6"]]);
+const UiColorPickerButton = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-2ccec31a"]]);
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "UiColorPicker",
   props: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strands.gg/accui",
-  "version": "2.11.32",
+  "version": "2.11.33",
   "description": "Strands Authentication UI Components",
   "type": "module",
   "main": "./dist/index.cjs.js",