@strands.gg/accui 2.15.10 → 2.16.0

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-JP858JzQ.es.js";
-import { m } from "./StrandsUIPlugin-JP858JzQ.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-tl7L52hZ.es.js";
+import { m } from "./StrandsUIPlugin-tl7L52hZ.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$7 = ["width", "height"];
+const _hoisted_22$8 = ["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$7)
+                }, null, 8, _hoisted_22$8)
               ]),
               _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-2decdbca"]]);
+const UiModal = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-ecf47be6"]]);
 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$6 = { class: "ui-color-picker-inputs" };
+const _hoisted_22$7 = { 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$6, [
+        createElementVNode("div", _hoisted_22$7, [
           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$5 = {
+const _hoisted_22$6 = {
   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$5, [
+          hasFooterSlots.value ? (openBlock(), createElementBlock("div", _hoisted_22$6, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(internalColumns.value, (column, index) => {
               return openBlock(), createElementBlock("div", {
                 key: `footer-${index}`,
@@ -5702,7 +5702,12 @@ function useDarkMode() {
       mediaQuery.addListener(handleSystemThemeChange);
     }
     const storedTheme = getStoredTheme();
-    currentTheme.value = storedTheme;
+    if (storedTheme === "system" && !localStorage.getItem(STORAGE_KEY)) {
+      currentTheme.value = "light";
+      setStoredTheme("light");
+    } else {
+      currentTheme.value = storedTheme;
+    }
     applyTheme(isDark.value);
     watch(isDark, (newIsDark) => {
       applyTheme(newIsDark);
@@ -5863,7 +5868,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         _ctx.variant === "button" ? (openBlock(), createBlock(StrandsUiButton, {
           key: 0,
           icon: !_ctx.includeLabel,
-          squircle: "",
+          squircle: true,
           variant: "ghost",
           size: _ctx.size,
           disabled: isDisabled.value,
@@ -5981,7 +5986,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiThemeToggle = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-1edc8bae"]]);
+const UiThemeToggle = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-9feda151"]]);
 const _hoisted_1$s = {
   key: 0,
   class: "slider-header"
@@ -6045,7 +6050,6 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     tickCount: { default: 5 },
     unit: { default: "" },
     size: { default: "md" },
-    color: { default: "primary" },
     inputId: {}
   },
   emits: ["update:modelValue", "change", "focus", "blur"],
@@ -6067,9 +6071,6 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     const sizeClasses = computed(() => {
       return `slider-size-${props.size}`;
     });
-    const colorClasses = computed(() => {
-      return props.color ? `slider-color-${props.color}` : "";
-    });
     const tickMarks = computed(() => {
       if (!props.showTicks) return [];
       const ticks = [];
@@ -6128,7 +6129,6 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["slider-wrapper", [
           sizeClasses.value,
-          colorClasses.value,
           {
             "slider-disabled": _ctx.disabled,
             "slider-dragging": isDragging.value
@@ -6204,7 +6204,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiSlider = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-56b598fb"]]);
+const UiSlider = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-39aa55d9"]]);
 const _hoisted_1$r = {
   key: 0,
   class: "radio-group-label"
@@ -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$4 = { class: "mfa-hardware-prompt-text" };
+const _hoisted_22$5 = { 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$4, [
+                      createElementVNode("div", _hoisted_22$5, [
                         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$3 = {
+const _hoisted_22$4 = {
   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$3, [..._cache[8] || (_cache[8] = [
+              unref(enabledProviders)?.length ? (openBlock(), createElementBlock("div", _hoisted_22$4, [..._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$2 = { class: "mfa-device-option-content" };
+const _hoisted_22$3 = { 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$2, [
+                            createElementVNode("div", _hoisted_22$3, [
                               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$1 = { class: "detail-text" };
+const _hoisted_22$2 = { 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$1, toDisplayString(session.user_agent || "Unknown device"), 1)
+                        createElementVNode("span", _hoisted_22$2, 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 = { class: "profile-field-section" };
+const _hoisted_22$1 = { 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, [
+                      createElementVNode("div", _hoisted_22$1, [
                         createElementVNode("div", _hoisted_23, [
                           createElementVNode("div", null, [
                             _cache[18] || (_cache[18] = createElementVNode("h4", { class: "profile-field-title" }, "Password", -1)),
@@ -13947,45 +13947,58 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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 = {
+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_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 = {
+const _hoisted_4$2 = {
+  key: 1,
+  class: "avatar-wrapper"
+};
+const _hoisted_5$1 = ["src", "alt", "width", "height"];
+const _hoisted_6$1 = {
   key: 1,
   class: "avatar-default"
 };
-const _hoisted_10$1 = { key: 0 };
-const _hoisted_11$1 = ["onKeydown"];
-const _hoisted_12$1 = { class: "dropdown-content" };
-const _hoisted_13$1 = {
+const _hoisted_7$1 = {
   key: 0,
-  class: "dropdown-header"
+  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 = {
+  key: 0,
+  class: "dropdown-header"
+};
+const _hoisted_15$1 = {
   key: 0,
   class: "dropdown-avatar-container"
 };
-const _hoisted_15$1 = ["src", "alt"];
-const _hoisted_16$1 = {
+const _hoisted_16$1 = ["src", "alt"];
+const _hoisted_17$1 = {
   key: 1,
   class: "dropdown-avatar-default"
 };
-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 = {
+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 = {
   key: 1,
   class: "dropdown-divider"
 };
-const _hoisted_21 = { class: "sign-in-auth-wrapper" };
+const _hoisted_22 = { class: "sign-in-auth-wrapper" };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "StrandsUserButton",
   props: {
@@ -13995,8 +14008,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     redirectUrl: { default: "/" },
     user: { default: void 0 },
     menuAlign: { default: "right" },
-    menuVerticalAlign: { default: "bottom" },
-    fullWidth: { type: Boolean, default: false }
+    menuVerticalAlign: { default: "bottom" }
   },
   emits: ["profile-updated", "signed-out", "signed-in"],
   setup(__props, { emit: __emit }) {
@@ -14009,7 +14021,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const containerRef = ref();
     const triggerRef = ref();
     const dropdownRef = ref();
-    const triggerElement = computed(() => triggerRef.value);
+    const triggerElement = computed(() => {
+      const element = triggerRef.value?.$el;
+      return element;
+    });
     const { floatingStyle, updatePosition } = useFloatingPosition({
       trigger: triggerElement,
       floating: dropdownRef,
@@ -14024,18 +14039,6 @@ 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;
@@ -14139,7 +14142,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               onClick: openSignIn,
               "aria-label": "Sign in"
             }, {
-              "leading-icon": withCtx(() => [..._cache[9] || (_cache[9] = [
+              "leading-icon": withCtx(() => [..._cache[8] || (_cache[8] = [
                 createElementVNode("svg", {
                   class: "sign-in-icon",
                   fill: "none",
@@ -14155,7 +14158,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ], -1)
               ])]),
               default: withCtx(() => [
-                _cache[10] || (_cache[10] = createTextVNode(" Sign In ", -1))
+                _cache[9] || (_cache[9] = createTextVNode(" Sign In ", -1))
               ]),
               _: 1
             }),
@@ -14165,7 +14168,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               "fullscreen-on-mobile": false
             }, {
               default: withCtx(() => [
-                createElementVNode("div", _hoisted_21, [
+                createElementVNode("div", _hoisted_22, [
                   createVNode(unref(StrandsAuth), {
                     onSignedIn: handleSignedIn,
                     onError: handleSignInError,
@@ -14184,82 +14187,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             })
           ]),
           default: withCtx(() => [
-            _ctx.variant === "mini-profile" ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              ref_key: "triggerRef",
-              ref: triggerRef,
-              class: normalizeClass(["mini-profile-static-card", `user-button-size-${_ctx.size}`, { "mini-profile-active": showDropdown.value, "full-width": _ctx.fullWidth }]),
-              onClick: toggleDropdown,
-              onKeydown: [
-                withKeys(toggleDropdown, ["enter"]),
-                withKeys(withModifiers(toggleDropdown, ["prevent"]), ["space"]),
-                withKeys(closeDropdown, ["escape"]),
-                withKeys(withModifiers(openDropdown, ["prevent"]), ["arrow-down"])
-              ],
-              role: "button",
-              tabindex: "0",
-              "aria-haspopup": "true",
-              "aria-expanded": showDropdown.value,
-              "aria-label": "User menu"
-            }, [
-              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: normalizeClass(["user-button-wrapper", { "full-width": _ctx.fullWidth }])
+            createElementVNode("div", {
+              class: normalizeClass(["user-button-wrapper", `user-button-size-${_ctx.size}`, _ctx.variant === "mini-profile" && "user-button-mini-profile"])
             }, [
               createVNode(unref(CompoundUiButton), {
+                ref_key: "triggerRef",
+                ref: triggerRef,
                 color: "secondary",
-                size: _ctx.size,
                 active: showDropdown.value,
                 onClick: toggleDropdown,
                 onKeydown: [
@@ -14273,27 +14207,60 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 "aria-label": "User menu"
               }, {
                 "leading-icon": withCtx(() => [
-                  user.value?.avatar ? (openBlock(), createElementBlock("img", {
-                    key: 0,
-                    src: user.value.avatar,
-                    alt: `${user.value?.firstName || user.value?.email}'s avatar`,
-                    class: "avatar-image",
-                    width: avatarSize.value,
-                    height: avatarSize.value,
-                    loading: "eager"
-                  }, null, 8, _hoisted_8$1)) : (openBlock(), createElementBlock("div", _hoisted_9$1, [..._cache[4] || (_cache[4] = [
-                    createElementVNode("svg", {
-                      class: "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)
-                  ])]))
+                  _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, [
+                    user.value?.avatar ? (openBlock(), createElementBlock("img", {
+                      key: 0,
+                      src: user.value.avatar,
+                      alt: `${user.value?.firstName || user.value?.email}'s avatar`,
+                      class: "avatar-image",
+                      width: avatarSize.value,
+                      height: avatarSize.value,
+                      loading: "eager"
+                    }, null, 8, _hoisted_5$1)) : (openBlock(), createElementBlock("div", _hoisted_6$1, [..._cache[3] || (_cache[3] = [
+                      createElementVNode("svg", {
+                        class: "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)
+                    ])]))
+                  ]))
                 ]),
                 "trailing-icon": withCtx(() => [
                   (openBlock(), createElementBlock("svg", {
@@ -14301,7 +14268,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24"
-                  }, [..._cache[5] || (_cache[5] = [
+                  }, [..._cache[4] || (_cache[4] = [
                     createElementVNode("path", {
                       "stroke-linecap": "round",
                       "stroke-linejoin": "round",
@@ -14311,11 +14278,16 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   ])], 2))
                 ]),
                 default: withCtx(() => [
-                  !_ctx.hideUser ? (openBlock(), createElementBlock("span", _hoisted_10$1, toDisplayString(displayName.value), 1)) : createCommentVNode("", true)
+                  _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, ["size", "active", "onKeydown", "aria-expanded"])
-            ], 2)),
+              }, 8, ["active", "onKeydown", "aria-expanded"])
+            ], 2),
             (openBlock(), createBlock(Teleport, { to: "body" }, [
               showDropdown.value ? (openBlock(), createElementBlock("div", {
                 key: 0,
@@ -14333,9 +14305,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   withKeys(withModifiers(focusLast, ["prevent"]), ["end"])
                 ]
               }, [
-                createElementVNode("div", _hoisted_12$1, [
-                  _ctx.variant !== "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_13$1, [
-                    user.value ? (openBlock(), createElementBlock("div", _hoisted_14$1, [
+                createElementVNode("div", _hoisted_13$1, [
+                  _ctx.variant !== "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_14$1, [
+                    user.value ? (openBlock(), createElementBlock("div", _hoisted_15$1, [
                       createVNode(unref(UiLevelProgress), {
                         size: 80,
                         value: user.value.xp,
@@ -14352,7 +14324,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         class: "dropdown-avatar-image",
                         width: "64",
                         height: "64"
-                      }, null, 8, _hoisted_15$1)) : (openBlock(), createElementBlock("div", _hoisted_16$1, [..._cache[6] || (_cache[6] = [
+                      }, null, 8, _hoisted_16$1)) : (openBlock(), createElementBlock("div", _hoisted_17$1, [..._cache[5] || (_cache[5] = [
                         createElementVNode("svg", {
                           class: "dropdown-avatar-icon",
                           fill: "currentColor",
@@ -14366,20 +14338,20 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         ], -1)
                       ])]))
                     ])) : createCommentVNode("", true),
-                    createElementVNode("div", _hoisted_17$1, [
-                      createElementVNode("div", _hoisted_18$1, toDisplayString(displayName.value), 1),
-                      createElementVNode("div", _hoisted_19, toDisplayString(user.value?.email), 1)
+                    createElementVNode("div", _hoisted_18$1, [
+                      createElementVNode("div", _hoisted_19, toDisplayString(displayName.value), 1),
+                      createElementVNode("div", _hoisted_20, toDisplayString(user.value?.email), 1)
                     ])
                   ])) : createCommentVNode("", true),
                   renderSlot(_ctx.$slots, "default", {}, void 0, true),
-                  _ctx.variant !== "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_20)) : createCommentVNode("", true),
+                  _ctx.variant !== "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_21)) : createCommentVNode("", true),
                   createVNode(unref(StrandsNav), null, {
                     default: withCtx(() => [
                       createVNode(unref(StrandsNav).Item, {
                         color: "secondary",
                         onClick: openProfile
                       }, {
-                        default: withCtx(() => [..._cache[7] || (_cache[7] = [
+                        default: withCtx(() => [..._cache[6] || (_cache[6] = [
                           createTextVNode("Profile", -1)
                         ])]),
                         _: 1
@@ -14388,7 +14360,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         color: "danger",
                         onClick: handleSignOut
                       }, {
-                        default: withCtx(() => [..._cache[8] || (_cache[8] = [
+                        default: withCtx(() => [..._cache[7] || (_cache[7] = [
                           createTextVNode("Sign Out", -1)
                         ])]),
                         _: 1
@@ -14397,7 +14369,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ])
-              ], 44, _hoisted_11$1)) : createCommentVNode("", true)
+              ], 44, _hoisted_12$1)) : createCommentVNode("", true)
             ])),
             createVNode(unref(UiModal), {
               modelValue: showProfileModal.value,
@@ -14420,7 +14392,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-11f7829e"]]);
+const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-18942543"]]);
 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-DSCUXdBp.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-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;