@strands.gg/accui 2.14.0 → 2.14.2

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import { _ as _export_sfc, S as StrandsUiButton, U as UiButtonContent, a as _sfc_main$G, b as _sfc_main$H, c as _sfc_main$I, d as createLucideIcon, M as Minus, e as StrandsUiCard, f as UiTooltip, g as UiDivider, u as useFloatingPosition, C as ChevronDown, h as StrandsUiInput, i as StrandsUiLoader, j as StrandsUiTabs, k as StrandsUiLink, l as StrandsUiAlert } from "./StrandsUIPlugin-tl7L52hZ.es.js";
-import { m } from "./StrandsUIPlugin-tl7L52hZ.es.js";
+import { _ as _export_sfc, S as StrandsUiButton, U as UiButtonContent, a as _sfc_main$G, b as _sfc_main$H, c as _sfc_main$I, d as createLucideIcon, M as Minus, e as StrandsUiCard, f as UiTooltip, g as UiDivider, u as useFloatingPosition, C as ChevronDown, h as StrandsUiInput, i as StrandsUiLoader, j as StrandsUiTabs, k as StrandsUiLink, l as StrandsUiAlert } from "./StrandsUIPlugin-CE4-QxEo.es.js";
+import { m } from "./StrandsUIPlugin-CE4-QxEo.es.js";
 import { defineComponent, computed, provide, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, renderSlot, Teleport, createCommentVNode, toDisplayString, createTextVNode, ref, reactive, watch, withModifiers, createStaticVNode, createVNode, withDirectives, withCtx, unref, vModelText, nextTick, Fragment, Transition, createSlots, normalizeStyle, renderList, mergeProps, useSlots, inject, resolveDynamicComponent, onBeforeUnmount, withKeys, h, isMemoSame, getCurrentInstance } from "vue";
 import { u as useStrandsConfig, p as provideStrandsConfig } from "./useStrandsConfig-fRu-OG08.es.js";
 import { s } from "./useStrandsConfig-fRu-OG08.es.js";
@@ -296,7 +296,7 @@ const _hoisted_18$e = ["min", "max"];
 const _hoisted_19$d = { class: "action-buttons" };
 const _hoisted_20$b = { class: "preview-section" };
 const _hoisted_21$b = { class: "preview-container" };
-const _hoisted_22$8 = ["width", "height"];
+const _hoisted_22$7 = ["width", "height"];
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "UiAvatarEditor",
   props: {
@@ -766,7 +766,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                   width: previewSize.value,
                   height: previewSize.value,
                   class: "preview-canvas"
-                }, null, 8, _hoisted_22$8)
+                }, null, 8, _hoisted_22$7)
               ]),
               _cache[10] || (_cache[10] = createElementVNode("p", { class: "preview-instructions" }, [
                 createTextVNode(" Drag image to reposition"),
@@ -1806,7 +1806,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiModal = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-ecf47be6"]]);
+const UiModal = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-2decdbca"]]);
 const tailwindColors = {
   "#000000": {
     label: "Black"
@@ -2436,7 +2436,7 @@ const _hoisted_20$a = {
   class: "ui-color-picker-contrast-svg"
 };
 const _hoisted_21$a = ["cx", "fill"];
-const _hoisted_22$7 = { class: "ui-color-picker-inputs" };
+const _hoisted_22$6 = { class: "ui-color-picker-inputs" };
 const _hoisted_23$5 = {
   key: 0,
   class: "ui-color-picker-input-row"
@@ -4295,7 +4295,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             style: normalizeStyle({ left: `${alpha.value * 100}%` })
           }, null, 4)
         ], 544)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_22$7, [
+        createElementVNode("div", _hoisted_22$6, [
           currentColorFormat.value === "hex" ? (openBlock(), createElementBlock("div", _hoisted_23$5, [
             createElementVNode("div", _hoisted_24$5, [
               _cache[24] || (_cache[24] = createElementVNode("label", { class: "ui-color-picker-label" }, "Hex", -1)),
@@ -4897,7 +4897,7 @@ const _hoisted_21$9 = {
   key: 0,
   class: "ui-table-empty"
 };
-const _hoisted_22$6 = {
+const _hoisted_22$5 = {
   key: 1,
   class: "ui-table-footer"
 };
@@ -5453,7 +5453,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               ], true)
             ])) : createCommentVNode("", true)
           ]),
-          hasFooterSlots.value ? (openBlock(), createElementBlock("div", _hoisted_22$6, [
+          hasFooterSlots.value ? (openBlock(), createElementBlock("div", _hoisted_22$5, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(internalColumns.value, (column, index) => {
               return openBlock(), createElementBlock("div", {
                 key: `footer-${index}`,
@@ -5868,7 +5868,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         _ctx.variant === "button" ? (openBlock(), createBlock(StrandsUiButton, {
           key: 0,
           icon: !_ctx.includeLabel,
-          squircle: true,
+          squircle: "",
           variant: "ghost",
           size: _ctx.size,
           disabled: isDisabled.value,
@@ -5986,7 +5986,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiThemeToggle = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-9feda151"]]);
+const UiThemeToggle = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-1edc8bae"]]);
 const _hoisted_1$s = {
   key: 0,
   class: "slider-header"
@@ -7010,7 +7010,7 @@ const _hoisted_18$a = {
 const _hoisted_19$9 = { class: "mfa-hardware-prompt" };
 const _hoisted_20$7 = { class: "mfa-hardware-prompt-content" };
 const _hoisted_21$7 = { class: "mfa-hardware-prompt-icon" };
-const _hoisted_22$5 = { class: "mfa-hardware-prompt-text" };
+const _hoisted_22$4 = { class: "mfa-hardware-prompt-text" };
 const _hoisted_23$4 = { class: "mfa-hardware-prompt-title" };
 const _hoisted_24$4 = { class: "mfa-hardware-prompt-description" };
 const _hoisted_25$4 = { class: "mfa-backup-option" };
@@ -7514,7 +7514,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                           class: "mfa-hardware-icon-svg"
                         }))
                       ]),
-                      createElementVNode("div", _hoisted_22$5, [
+                      createElementVNode("div", _hoisted_22$4, [
                         createElementVNode("h4", _hoisted_23$4, toDisplayString(selectedMethod.value.device_type === "passkey" ? "Use your passkey" : "Touch your hardware key"), 1),
                         createElementVNode("p", _hoisted_24$4, toDisplayString(selectedMethod.value.device_type === "passkey" ? "Use biometrics, PIN, or device security to authenticate" : "Insert and touch your hardware key to authenticate"), 1)
                       ])
@@ -8943,7 +8943,7 @@ const _hoisted_19$6 = {
 };
 const _hoisted_20$5 = { class: "oauth-icon-fallback-text" };
 const _hoisted_21$5 = { class: "oauth-button-text" };
-const _hoisted_22$4 = {
+const _hoisted_22$3 = {
   key: 1,
   class: "divider-with-text"
 };
@@ -9170,7 +9170,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   }, 1032, ["disabled", "onClick"]);
                 }), 128))
               ])) : createCommentVNode("", true),
-              unref(enabledProviders)?.length ? (openBlock(), createElementBlock("div", _hoisted_22$4, [..._cache[8] || (_cache[8] = [
+              unref(enabledProviders)?.length ? (openBlock(), createElementBlock("div", _hoisted_22$3, [..._cache[8] || (_cache[8] = [
                 createElementVNode("span", { class: "divider-text" }, "Or create account with email", -1)
               ])])) : createCommentVNode("", true),
               createElementVNode("form", {
@@ -11247,7 +11247,7 @@ const _hoisted_18$4 = { class: "mfa-device-option" };
 const _hoisted_19$3 = { class: "mfa-device-option-content" };
 const _hoisted_20$3 = { class: "mfa-device-option-icon" };
 const _hoisted_21$3 = { class: "mfa-device-option" };
-const _hoisted_22$3 = { class: "mfa-device-option-content" };
+const _hoisted_22$2 = { class: "mfa-device-option-content" };
 const _hoisted_23$2 = { class: "mfa-device-option-icon" };
 const _hoisted_24$2 = {
   key: 1,
@@ -11557,7 +11557,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                             })
                           ]),
                           createElementVNode("div", _hoisted_21$3, [
-                            createElementVNode("div", _hoisted_22$3, [
+                            createElementVNode("div", _hoisted_22$2, [
                               createElementVNode("div", _hoisted_23$2, [
                                 createVNode(Fingerprint, { size: 24 })
                               ]),
@@ -11996,7 +11996,7 @@ const _hoisted_18$3 = {
 const _hoisted_19$2 = { class: "session-details" };
 const _hoisted_20$2 = { class: "detail-row" };
 const _hoisted_21$2 = { class: "detail-icon" };
-const _hoisted_22$2 = { class: "detail-text" };
+const _hoisted_22$1 = { class: "detail-text" };
 const _hoisted_23$1 = { class: "detail-row" };
 const _hoisted_24$1 = { class: "detail-icon" };
 const _hoisted_25$1 = { class: "detail-text" };
@@ -12290,7 +12290,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                         createElementVNode("span", _hoisted_21$2, [
                           createVNode(Monitor2, { size: 14 })
                         ]),
-                        createElementVNode("span", _hoisted_22$2, toDisplayString(session.user_agent || "Unknown device"), 1)
+                        createElementVNode("span", _hoisted_22$1, toDisplayString(session.user_agent || "Unknown device"), 1)
                       ]),
                       createElementVNode("div", _hoisted_23$1, [
                         createElementVNode("span", _hoisted_24$1, [
@@ -12378,7 +12378,7 @@ const _hoisted_20$1 = {
   class: "profile-change-form"
 };
 const _hoisted_21$1 = { class: "profile-password-section" };
-const _hoisted_22$1 = { class: "profile-field-section" };
+const _hoisted_22 = { class: "profile-field-section" };
 const _hoisted_23 = { class: "profile-field-header" };
 const _hoisted_24 = { class: "profile-field-subtitle" };
 const _hoisted_25 = {
@@ -13287,7 +13287,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                     ]),
                     createElementVNode("div", _hoisted_21$1, [
                       _cache[23] || (_cache[23] = createElementVNode("h3", { class: "profile-section-title" }, "Security Settings", -1)),
-                      createElementVNode("div", _hoisted_22$1, [
+                      createElementVNode("div", _hoisted_22, [
                         createElementVNode("div", _hoisted_23, [
                           createElementVNode("div", null, [
                             _cache[18] || (_cache[18] = createElementVNode("h4", { class: "profile-field-title" }, "Password", -1)),
@@ -13947,58 +13947,45 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = {
-  key: 0,
-  class: "mini-profile-avatar-wrapper"
-};
-const _hoisted_2$2 = ["src", "alt", "width", "height"];
-const _hoisted_3$2 = {
-  key: 1,
-  class: "mini-profile-avatar-default"
-};
+const _hoisted_1$3 = ["onKeydown", "aria-expanded"];
+const _hoisted_2$2 = { class: "mini-profile-avatar-container" };
+const _hoisted_3$2 = ["src", "alt", "width", "height"];
 const _hoisted_4$2 = {
   key: 1,
-  class: "avatar-wrapper"
+  class: "mini-profile-avatar-default"
 };
-const _hoisted_5$1 = ["src", "alt", "width", "height"];
-const _hoisted_6$1 = {
+const _hoisted_5$1 = { class: "mini-profile-content" };
+const _hoisted_6$1 = { class: "mini-profile-name" };
+const _hoisted_7$1 = { class: "mini-profile-email" };
+const _hoisted_8$1 = ["src", "alt", "width", "height"];
+const _hoisted_9$1 = {
   key: 1,
   class: "avatar-default"
 };
-const _hoisted_7$1 = {
-  key: 0,
-  class: "mini-profile-content"
-};
-const _hoisted_8$1 = { class: "mini-profile-name" };
-const _hoisted_9$1 = { class: "mini-profile-email" };
-const _hoisted_10$1 = {
-  key: 1,
-  class: "user-info"
-};
-const _hoisted_11$1 = { class: "user-name" };
-const _hoisted_12$1 = ["onKeydown"];
-const _hoisted_13$1 = { class: "dropdown-content" };
-const _hoisted_14$1 = {
+const _hoisted_10$1 = { key: 0 };
+const _hoisted_11$1 = ["onKeydown"];
+const _hoisted_12$1 = { class: "dropdown-content" };
+const _hoisted_13$1 = {
   key: 0,
   class: "dropdown-header"
 };
-const _hoisted_15$1 = {
+const _hoisted_14$1 = {
   key: 0,
   class: "dropdown-avatar-container"
 };
-const _hoisted_16$1 = ["src", "alt"];
-const _hoisted_17$1 = {
+const _hoisted_15$1 = ["src", "alt"];
+const _hoisted_16$1 = {
   key: 1,
   class: "dropdown-avatar-default"
 };
-const _hoisted_18$1 = { class: "dropdown-user-details" };
-const _hoisted_19 = { class: "dropdown-user-name" };
-const _hoisted_20 = { class: "dropdown-user-email" };
-const _hoisted_21 = {
+const _hoisted_17$1 = { class: "dropdown-user-details" };
+const _hoisted_18$1 = { class: "dropdown-user-name" };
+const _hoisted_19 = { class: "dropdown-user-email" };
+const _hoisted_20 = {
   key: 1,
   class: "dropdown-divider"
 };
-const _hoisted_22 = { class: "sign-in-auth-wrapper" };
+const _hoisted_21 = { class: "sign-in-auth-wrapper" };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "StrandsUserButton",
   props: {
@@ -14021,10 +14008,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const containerRef = ref();
     const triggerRef = ref();
     const dropdownRef = ref();
-    const triggerElement = computed(() => {
-      const element = triggerRef.value?.$el;
-      return element;
-    });
+    const triggerElement = computed(() => triggerRef.value);
     const { floatingStyle, updatePosition } = useFloatingPosition({
       trigger: triggerElement,
       floating: dropdownRef,
@@ -14039,6 +14023,18 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }
     });
     const avatarSize = computed(() => {
+      if (props.variant === "mini-profile") {
+        switch (props.size) {
+          case "sm":
+            return 32;
+          case "md":
+            return 44;
+          case "lg":
+            return 56;
+          default:
+            return 44;
+        }
+      }
       switch (props.size) {
         case "sm":
           return 24;
@@ -14142,7 +14138,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               onClick: openSignIn,
               "aria-label": "Sign in"
             }, {
-              "leading-icon": withCtx(() => [..._cache[8] || (_cache[8] = [
+              "leading-icon": withCtx(() => [..._cache[9] || (_cache[9] = [
                 createElementVNode("svg", {
                   class: "sign-in-icon",
                   fill: "none",
@@ -14158,7 +14154,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ], -1)
               ])]),
               default: withCtx(() => [
-                _cache[9] || (_cache[9] = createTextVNode(" Sign In ", -1))
+                _cache[10] || (_cache[10] = createTextVNode(" Sign In ", -1))
               ]),
               _: 1
             }),
@@ -14168,7 +14164,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               "fullscreen-on-mobile": false
             }, {
               default: withCtx(() => [
-                createElementVNode("div", _hoisted_22, [
+                createElementVNode("div", _hoisted_21, [
                   createVNode(unref(StrandsAuth), {
                     onSignedIn: handleSignedIn,
                     onError: handleSignInError,
@@ -14187,12 +14183,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             })
           ]),
           default: withCtx(() => [
-            createVNode(unref(CompoundUiButton), {
+            _ctx.variant === "mini-profile" ? (openBlock(), createElementBlock("div", {
+              key: 0,
               ref_key: "triggerRef",
               ref: triggerRef,
-              color: "secondary",
-              active: showDropdown.value,
-              class: normalizeClass([`user-button-size-${_ctx.size}`, _ctx.variant === "mini-profile" && "user-button-mini-profile"]),
+              class: normalizeClass(["mini-profile-static-card", `user-button-size-${_ctx.size}`, { "mini-profile-active": showDropdown.value }]),
               onClick: toggleDropdown,
               onKeydown: [
                 withKeys(toggleDropdown, ["enter"]),
@@ -14200,43 +14195,83 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 withKeys(closeDropdown, ["escape"]),
                 withKeys(withModifiers(openDropdown, ["prevent"]), ["arrow-down"])
               ],
+              role: "button",
+              tabindex: "0",
               "aria-haspopup": "true",
               "aria-expanded": showDropdown.value,
               "aria-label": "User menu"
-            }, {
-              "leading-icon": withCtx(() => [
-                _ctx.variant === "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
-                  createVNode(unref(UiLevelProgress), {
-                    size: avatarSizeWithProgress.value,
-                    value: user.value?.xp || 0,
-                    max: user.value?.next_level_xp || 100,
-                    level: user.value?.level || 1,
-                    "level-label": `${user.value?.level || 1}`,
-                    "user-settings": user.value?.settings,
-                    class: "mini-profile-level-progress"
-                  }, null, 8, ["size", "value", "max", "level", "level-label", "user-settings"]),
-                  user.value?.avatar ? (openBlock(), createElementBlock("img", {
-                    key: 0,
-                    src: user.value.avatar,
-                    alt: `${user.value?.firstName || user.value?.email}'s avatar`,
-                    class: "mini-profile-avatar-image",
-                    width: avatarSize.value,
-                    height: avatarSize.value,
-                    loading: "eager"
-                  }, null, 8, _hoisted_2$2)) : (openBlock(), createElementBlock("div", _hoisted_3$2, [..._cache[2] || (_cache[2] = [
-                    createElementVNode("svg", {
-                      class: "mini-profile-avatar-icon",
-                      fill: "currentColor",
-                      viewBox: "0 0 20 20"
-                    }, [
-                      createElementVNode("path", {
-                        "fill-rule": "evenodd",
-                        d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
-                        "clip-rule": "evenodd"
-                      })
-                    ], -1)
-                  ])]))
-                ])) : (openBlock(), createElementBlock("div", _hoisted_4$2, [
+            }, [
+              createElementVNode("div", _hoisted_2$2, [
+                createVNode(unref(UiLevelProgress), {
+                  size: avatarSizeWithProgress.value,
+                  value: user.value?.xp || 0,
+                  max: user.value?.next_level_xp || 100,
+                  level: user.value?.level || 1,
+                  "level-label": `LEVEL ${user.value?.level || 1}`,
+                  "user-settings": user.value?.settings,
+                  class: "mini-profile-level-progress"
+                }, null, 8, ["size", "value", "max", "level", "level-label", "user-settings"]),
+                user.value?.avatar ? (openBlock(), createElementBlock("img", {
+                  key: 0,
+                  src: user.value.avatar,
+                  alt: `${user.value?.firstName || user.value?.email}'s avatar`,
+                  class: "mini-profile-avatar-image",
+                  width: avatarSize.value,
+                  height: avatarSize.value,
+                  loading: "eager"
+                }, null, 8, _hoisted_3$2)) : (openBlock(), createElementBlock("div", _hoisted_4$2, [..._cache[2] || (_cache[2] = [
+                  createElementVNode("svg", {
+                    class: "mini-profile-avatar-icon",
+                    fill: "currentColor",
+                    viewBox: "0 0 20 20"
+                  }, [
+                    createElementVNode("path", {
+                      "fill-rule": "evenodd",
+                      d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
+                      "clip-rule": "evenodd"
+                    })
+                  ], -1)
+                ])]))
+              ]),
+              createElementVNode("div", _hoisted_5$1, [
+                createElementVNode("div", _hoisted_6$1, toDisplayString(displayName.value), 1),
+                createElementVNode("div", _hoisted_7$1, toDisplayString(user.value?.email), 1)
+              ]),
+              (openBlock(), createElementBlock("svg", {
+                class: normalizeClass(["mini-profile-dropdown-arrow", { "dropdown-arrow-open": showDropdown.value }]),
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24"
+              }, [..._cache[3] || (_cache[3] = [
+                createElementVNode("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "2",
+                  d: "M19 9l-7 7-7-7"
+                }, null, -1)
+              ])], 2))
+            ], 42, _hoisted_1$3)) : (openBlock(), createElementBlock("div", {
+              key: 1,
+              ref_key: "triggerRef",
+              ref: triggerRef,
+              class: "user-button-wrapper"
+            }, [
+              createVNode(unref(CompoundUiButton), {
+                color: "secondary",
+                size: _ctx.size,
+                active: showDropdown.value,
+                onClick: toggleDropdown,
+                onKeydown: [
+                  withKeys(toggleDropdown, ["enter"]),
+                  withKeys(withModifiers(toggleDropdown, ["prevent"]), ["space"]),
+                  withKeys(closeDropdown, ["escape"]),
+                  withKeys(withModifiers(openDropdown, ["prevent"]), ["arrow-down"])
+                ],
+                "aria-haspopup": "true",
+                "aria-expanded": showDropdown.value,
+                "aria-label": "User menu"
+              }, {
+                "leading-icon": withCtx(() => [
                   user.value?.avatar ? (openBlock(), createElementBlock("img", {
                     key: 0,
                     src: user.value.avatar,
@@ -14245,7 +14280,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     width: avatarSize.value,
                     height: avatarSize.value,
                     loading: "eager"
-                  }, null, 8, _hoisted_5$1)) : (openBlock(), createElementBlock("div", _hoisted_6$1, [..._cache[3] || (_cache[3] = [
+                  }, null, 8, _hoisted_8$1)) : (openBlock(), createElementBlock("div", _hoisted_9$1, [..._cache[4] || (_cache[4] = [
                     createElementVNode("svg", {
                       class: "avatar-icon",
                       fill: "currentColor",
@@ -14258,33 +14293,28 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                       })
                     ], -1)
                   ])]))
-                ]))
-              ]),
-              "trailing-icon": withCtx(() => [
-                (openBlock(), createElementBlock("svg", {
-                  class: normalizeClass(["dropdown-arrow", { "dropdown-arrow-open": showDropdown.value }]),
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24"
-                }, [..._cache[4] || (_cache[4] = [
-                  createElementVNode("path", {
-                    "stroke-linecap": "round",
-                    "stroke-linejoin": "round",
-                    "stroke-width": "2",
-                    d: "M19 9l-7 7-7-7"
-                  }, null, -1)
-                ])], 2))
-              ]),
-              default: withCtx(() => [
-                _ctx.variant === "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
-                  createElementVNode("div", _hoisted_8$1, toDisplayString(displayName.value), 1),
-                  createElementVNode("div", _hoisted_9$1, toDisplayString(user.value?.email), 1)
-                ])) : !_ctx.hideUser ? (openBlock(), createElementBlock("div", _hoisted_10$1, [
-                  createElementVNode("div", _hoisted_11$1, toDisplayString(displayName.value), 1)
-                ])) : createCommentVNode("", true)
-              ]),
-              _: 1
-            }, 8, ["active", "class", "onKeydown", "aria-expanded"]),
+                ]),
+                "trailing-icon": withCtx(() => [
+                  (openBlock(), createElementBlock("svg", {
+                    class: normalizeClass(["dropdown-arrow", { "dropdown-arrow-open": showDropdown.value }]),
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24"
+                  }, [..._cache[5] || (_cache[5] = [
+                    createElementVNode("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      "stroke-width": "2",
+                      d: "M19 9l-7 7-7-7"
+                    }, null, -1)
+                  ])], 2))
+                ]),
+                default: withCtx(() => [
+                  !_ctx.hideUser ? (openBlock(), createElementBlock("span", _hoisted_10$1, toDisplayString(displayName.value), 1)) : createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["size", "active", "onKeydown", "aria-expanded"])
+            ], 512)),
             (openBlock(), createBlock(Teleport, { to: "body" }, [
               showDropdown.value ? (openBlock(), createElementBlock("div", {
                 key: 0,
@@ -14302,9 +14332,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   withKeys(withModifiers(focusLast, ["prevent"]), ["end"])
                 ]
               }, [
-                createElementVNode("div", _hoisted_13$1, [
-                  _ctx.variant !== "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_14$1, [
-                    user.value ? (openBlock(), createElementBlock("div", _hoisted_15$1, [
+                createElementVNode("div", _hoisted_12$1, [
+                  _ctx.variant !== "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_13$1, [
+                    user.value ? (openBlock(), createElementBlock("div", _hoisted_14$1, [
                       createVNode(unref(UiLevelProgress), {
                         size: 80,
                         value: user.value.xp,
@@ -14321,7 +14351,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         class: "dropdown-avatar-image",
                         width: "64",
                         height: "64"
-                      }, null, 8, _hoisted_16$1)) : (openBlock(), createElementBlock("div", _hoisted_17$1, [..._cache[5] || (_cache[5] = [
+                      }, null, 8, _hoisted_15$1)) : (openBlock(), createElementBlock("div", _hoisted_16$1, [..._cache[6] || (_cache[6] = [
                         createElementVNode("svg", {
                           class: "dropdown-avatar-icon",
                           fill: "currentColor",
@@ -14335,20 +14365,20 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         ], -1)
                       ])]))
                     ])) : createCommentVNode("", true),
-                    createElementVNode("div", _hoisted_18$1, [
-                      createElementVNode("div", _hoisted_19, toDisplayString(displayName.value), 1),
-                      createElementVNode("div", _hoisted_20, toDisplayString(user.value?.email), 1)
+                    createElementVNode("div", _hoisted_17$1, [
+                      createElementVNode("div", _hoisted_18$1, toDisplayString(displayName.value), 1),
+                      createElementVNode("div", _hoisted_19, toDisplayString(user.value?.email), 1)
                     ])
                   ])) : createCommentVNode("", true),
                   renderSlot(_ctx.$slots, "default", {}, void 0, true),
-                  _ctx.variant !== "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_21)) : createCommentVNode("", true),
+                  _ctx.variant !== "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_20)) : createCommentVNode("", true),
                   createVNode(unref(StrandsNav), null, {
                     default: withCtx(() => [
                       createVNode(unref(StrandsNav).Item, {
                         color: "secondary",
                         onClick: openProfile
                       }, {
-                        default: withCtx(() => [..._cache[6] || (_cache[6] = [
+                        default: withCtx(() => [..._cache[7] || (_cache[7] = [
                           createTextVNode("Profile", -1)
                         ])]),
                         _: 1
@@ -14357,7 +14387,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         color: "danger",
                         onClick: handleSignOut
                       }, {
-                        default: withCtx(() => [..._cache[7] || (_cache[7] = [
+                        default: withCtx(() => [..._cache[8] || (_cache[8] = [
                           createTextVNode("Sign Out", -1)
                         ])]),
                         _: 1
@@ -14366,7 +14396,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ])
-              ], 44, _hoisted_12$1)) : createCommentVNode("", true)
+              ], 44, _hoisted_11$1)) : createCommentVNode("", true)
             ])),
             createVNode(unref(UiModal), {
               modelValue: showProfileModal.value,
@@ -14389,7 +14419,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-19537c80"]]);
+const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-c84f825d"]]);
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "StrandsNav",
   props: {

package/dist/vite.cjs.js

@@ -1 +1 @@
-"use strict";function n(n={}){const{styles:s=1,accentColor:r="#EA00A8",useSquircle:t=1,...i}=n;let c;return{name:"@strands.gg/accui:vite-plugin",enforce:"pre",config:(n,{command:s})=>(c={accentColor:r,useSquircle:t,...i},{define:{t:JSON.stringify(c)}}),transformIndexHtml:{order:"pre",handler(n){if(r&&"#EA00A8"!==r){const s=`<style data-strands-accent>\n    :root {\n      --strands-accent: ${r};\n      --accui-strands-accent: ${r};\n      --accui-strands-50: color-mix(in srgb, ${r} 10%, white);\n      --accui-strands-100: color-mix(in srgb, ${r} 20%, white);\n      --accui-strands-200: color-mix(in srgb, ${r} 30%, white);\n      --accui-strands-300: color-mix(in srgb, ${r} 40%, white);\n      --accui-strands-400: color-mix(in srgb, ${r} 70%, white);\n      --accui-strands-500: ${r};\n      --accui-strands-600: color-mix(in srgb, ${r} 85%, black);\n      --accui-strands-700: color-mix(in srgb, ${r} 70%, black);\n      --accui-strands-800: color-mix(in srgb, ${r} 55%, black);\n      --accui-strands-900: color-mix(in srgb, ${r} 40%, black);\n      --accui-strands-950: color-mix(in srgb, ${r} 25%, black);\n    }</style>`;return n.replace("</head>",`  ${s}\n  </head>`)}return n}},transform:async(n,r)=>(s&&r.endsWith("main.ts")||r.endsWith("main.js"))&&!n.includes("@strands.gg/accui/style.css")?{code:`import '@strands.gg/accui/style.css'\n${n}`,map:null}:!r.endsWith("main.ts")&&!r.endsWith("main.js")||n.includes("setStrandsConfig")||n.includes("__STRANDS_INJECTED__")?null:{code:`\n// Auto-injected by @strands.gg/accui Vite plugin\nimport { setStrandsConfig } from '@strands.gg/accui'\n\nif (typeof window !== 'undefined') {\n  const strandsConfig = ${JSON.stringify(c)}\n  setStrandsConfig(strandsConfig)\n  window.__STRANDS_CONFIG__ = strandsConfig\n  window.__STRANDS_INJECTED__ = true\n}\n\n${n}`,map:null}}}Object.defineProperties(exports,{i:{value:1},[Symbol.toStringTag]:{value:"Module"}}),exports.StrandsAuth=n,exports.StrandsAuthVitePlugin=n,exports.createStrandsAuth=function(n={}){return{install(s){Promise.resolve().then(()=>require("./StrandsUIPlugin-C9rrMU2i.cjs.js")).then(n=>n.StrandsUIPlugin$1).then(n=>{const r=n.default;s.use(r)}),Promise.resolve().then(()=>require("./useStrandsConfig-Sr6NG90B.cjs.js")).then(n=>n.useStrandsConfig$1).then(s=>{const{setStrandsConfig:r}=s;r(n),"undefined"!=typeof window&&(window.t=n)})}}},exports.default=n,exports.strandsAuth=n;
+"use strict";function n(n={}){const{styles:s=1,accentColor:r="#EA00A8",useSquircle:t=1,...i}=n;let c;return{name:"@strands.gg/accui:vite-plugin",enforce:"pre",config:(n,{command:s})=>(c={accentColor:r,useSquircle:t,...i},{define:{t:JSON.stringify(c)}}),transformIndexHtml:{order:"pre",handler(n){if(r&&"#EA00A8"!==r){const s=`<style data-strands-accent>\n    :root {\n      --strands-accent: ${r};\n      --accui-strands-accent: ${r};\n      --accui-strands-50: color-mix(in srgb, ${r} 10%, white);\n      --accui-strands-100: color-mix(in srgb, ${r} 20%, white);\n      --accui-strands-200: color-mix(in srgb, ${r} 30%, white);\n      --accui-strands-300: color-mix(in srgb, ${r} 40%, white);\n      --accui-strands-400: color-mix(in srgb, ${r} 70%, white);\n      --accui-strands-500: ${r};\n      --accui-strands-600: color-mix(in srgb, ${r} 85%, black);\n      --accui-strands-700: color-mix(in srgb, ${r} 70%, black);\n      --accui-strands-800: color-mix(in srgb, ${r} 55%, black);\n      --accui-strands-900: color-mix(in srgb, ${r} 40%, black);\n      --accui-strands-950: color-mix(in srgb, ${r} 25%, black);\n    }</style>`;return n.replace("</head>",`  ${s}\n  </head>`)}return n}},transform:async(n,r)=>(s&&r.endsWith("main.ts")||r.endsWith("main.js"))&&!n.includes("@strands.gg/accui/style.css")?{code:`import '@strands.gg/accui/style.css'\n${n}`,map:null}:!r.endsWith("main.ts")&&!r.endsWith("main.js")||n.includes("setStrandsConfig")||n.includes("__STRANDS_INJECTED__")?null:{code:`\n// Auto-injected by @strands.gg/accui Vite plugin\nimport { setStrandsConfig } from '@strands.gg/accui'\n\nif (typeof window !== 'undefined') {\n  const strandsConfig = ${JSON.stringify(c)}\n  setStrandsConfig(strandsConfig)\n  window.__STRANDS_CONFIG__ = strandsConfig\n  window.__STRANDS_INJECTED__ = true\n}\n\n${n}`,map:null}}}Object.defineProperties(exports,{i:{value:1},[Symbol.toStringTag]:{value:"Module"}}),exports.StrandsAuth=n,exports.StrandsAuthVitePlugin=n,exports.createStrandsAuth=function(n={}){return{install(s){Promise.resolve().then(()=>require("./StrandsUIPlugin-Dl-CMqkQ.cjs.js")).then(n=>n.StrandsUIPlugin$1).then(n=>{const r=n.default;s.use(r)}),Promise.resolve().then(()=>require("./useStrandsConfig-Sr6NG90B.cjs.js")).then(n=>n.useStrandsConfig$1).then(s=>{const{setStrandsConfig:r}=s;r(n),"undefined"!=typeof window&&(window.t=n)})}}},exports.default=n,exports.strandsAuth=n;

package/dist/vite.es.js

@@ -86,7 +86,7 @@ ${code}`,
 function createStrandsAuth(config = {}) {
   return {
     install(app) {
-      import("./StrandsUIPlugin-tl7L52hZ.es.js").then((n) => n.n).then((module) => {
+      import("./StrandsUIPlugin-CE4-QxEo.es.js").then((n) => n.n).then((module) => {
         const StrandsUIPlugin = module.default;
         app.use(StrandsUIPlugin);
       });

package/package.json

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