@strands.gg/accui 2.3.1 → 2.3.2

package/dist/strands-auth-ui.es.js

@@ -1626,7 +1626,7 @@ const _hoisted_16$e = { class: "controls" };
 const _hoisted_17$d = { class: "zoom-control" };
 const _hoisted_18$d = ["min", "max"];
 const _hoisted_19$c = { class: "action-buttons" };
-const _hoisted_20$b = { class: "preview-section" };
+const _hoisted_20$a = { class: "preview-section" };
 const _hoisted_21$9 = { class: "preview-container" };
 const _hoisted_22$9 = ["width", "height"];
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
@@ -2081,7 +2081,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                 ])
               ])
             ]),
-            createElementVNode("div", _hoisted_20$b, [
+            createElementVNode("div", _hoisted_20$a, [
               _cache[9] || (_cache[9] = createElementVNode("h3", { class: "preview-title" }, "Preview", -1)),
               createElementVNode("div", _hoisted_21$9, [
                 createElementVNode("canvas", {
@@ -2683,7 +2683,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiLevelProgress = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-410a88ab"]]);
+const UiLevelProgress = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-410a88ab"]]);
 const _hoisted_1$x = { class: "ui-modal-header-content" };
 const _hoisted_2$r = { class: "ui-modal-title" };
 const _hoisted_3$q = { key: 0 };
@@ -3539,7 +3539,7 @@ const _hoisted_16$d = { class: "ui-color-picker-contrast-levels" };
 const _hoisted_17$c = { class: "ui-color-picker-contrast-level-value" };
 const _hoisted_18$c = { class: "ui-color-picker-contrast-level-value" };
 const _hoisted_19$b = { class: "ui-color-picker-contrast-graph" };
-const _hoisted_20$a = {
+const _hoisted_20$9 = {
   viewBox: "0 0 280 40",
   class: "ui-color-picker-contrast-svg"
 };
@@ -5158,7 +5158,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
               ], 2)
             ]),
             createElementVNode("div", _hoisted_19$b, [
-              (openBlock(), createElementBlock("svg", _hoisted_20$a, [
+              (openBlock(), createElementBlock("svg", _hoisted_20$9, [
                 _cache[13] || (_cache[13] = createStaticVNode('<defs data-v-e9e45931><linearGradient id="contrastGradientDefault" x1="0%" y1="0%" x2="100%" y2="0%" data-v-e9e45931><stop offset="0%" stop-color="#ef4444" data-v-e9e45931></stop><stop offset="21.4%" stop-color="#ef4444" data-v-e9e45931></stop><stop offset="21.4%" stop-color="#f59e0b" data-v-e9e45931></stop><stop offset="64.3%" stop-color="#f59e0b" data-v-e9e45931></stop><stop offset="64.3%" stop-color="#22c55e" data-v-e9e45931></stop><stop offset="100%" stop-color="#22c55e" data-v-e9e45931></stop></linearGradient></defs><rect x="0" y="15" width="280" height="10" fill="url(#contrastGradientDefault)" rx="5" data-v-e9e45931></rect><line x1="60" y1="10" x2="60" y2="30" stroke="#666" stroke-width="1" opacity="0.5" data-v-e9e45931></line><line x1="180" y1="10" x2="180" y2="30" stroke="#666" stroke-width="1" opacity="0.5" data-v-e9e45931></line>', 4)),
                 createElementVNode("circle", {
                   cx: Math.min(270, Math.max(10, Math.min(contrastData.value.ratio, 14) / 14 * 260 + 10)),
@@ -5822,7 +5822,7 @@ const _hoisted_16$c = { class: "ui-table-body" };
 const _hoisted_17$b = { class: "ui-table-group-content" };
 const _hoisted_18$b = { class: "ui-table-group-name" };
 const _hoisted_19$a = { class: "ui-table-group-count" };
-const _hoisted_20$9 = ["onClick"];
+const _hoisted_20$8 = ["onClick"];
 const _hoisted_21$7 = ["onClick"];
 const _hoisted_22$7 = { class: "ui-table-subrow-content" };
 const _hoisted_23$6 = { class: "ui-table-subrow-default" };
@@ -6264,7 +6264,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                       ], true)
                     ], 14, _hoisted_21$7);
                   }), 128))
-                ], 10, _hoisted_20$9)),
+                ], 10, _hoisted_20$8)),
                 expandedRows.value.has(rowIndex) ? (openBlock(), createElementBlock("div", {
                   key: 2,
                   class: "ui-table-subrow",
@@ -7075,7 +7075,7 @@ const _hoisted_18$a = {
   class: "mfa-hardware-section"
 };
 const _hoisted_19$9 = { class: "mfa-hardware-prompt" };
-const _hoisted_20$8 = { class: "mfa-hardware-prompt-content" };
+const _hoisted_20$7 = { class: "mfa-hardware-prompt-content" };
 const _hoisted_21$6 = { class: "mfa-hardware-prompt-icon" };
 const _hoisted_22$6 = { class: "mfa-hardware-prompt-text" };
 const _hoisted_23$5 = { class: "mfa-hardware-prompt-title" };
@@ -7579,7 +7579,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 ])) : createCommentVNode("", true),
                 selectedMethod.value?.device_type === "hardware" || selectedMethod.value?.device_type === "passkey" ? (openBlock(), createElementBlock("div", _hoisted_18$a, [
                   createElementVNode("div", _hoisted_19$9, [
-                    createElementVNode("div", _hoisted_20$8, [
+                    createElementVNode("div", _hoisted_20$7, [
                       createElementVNode("div", _hoisted_21$6, [
                         (openBlock(), createBlock(resolveDynamicComponent(selectedMethod.value.device_type === "passkey" ? IconShield : IconKeyRound), {
                           size: 24,
@@ -8075,7 +8075,7 @@ const _hoisted_18$9 = {
   class: "auth-divider"
 };
 const _hoisted_19$8 = { class: "auth-divider-text" };
-const _hoisted_20$7 = {
+const _hoisted_20$6 = {
   key: 0,
   class: "auth-password-field"
 };
@@ -8507,7 +8507,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                     onAfterLeave
                   }, {
                     default: withCtx(() => [
-                      !isPasswordReset.value && !isSignUp.value ? (openBlock(), createElementBlock("div", _hoisted_20$7, [
+                      !isPasswordReset.value && !isSignUp.value ? (openBlock(), createElementBlock("div", _hoisted_20$6, [
                         createElementVNode("div", _hoisted_21$5, [
                           _cache[10] || (_cache[10] = createElementVNode("span", { class: "auth-password-label" }, "Password", -1)),
                           createVNode(unref(StrandsUiLink), {
@@ -9025,7 +9025,7 @@ const _hoisted_19$6 = {
   key: 3,
   class: "oauth-icon-fallback"
 };
-const _hoisted_20$6 = { class: "oauth-icon-fallback-text" };
+const _hoisted_20$5 = { class: "oauth-icon-fallback-text" };
 const _hoisted_21$4 = { class: "oauth-button-text" };
 const _hoisted_22$4 = {
   key: 1,
@@ -9245,7 +9245,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                         ])])) : provider.id === "github" ? (openBlock(), createElementBlock("svg", _hoisted_18$7, [..._cache[7] || (_cache[7] = [
                           createElementVNode("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }, null, -1)
                         ])])) : (openBlock(), createElementBlock("div", _hoisted_19$6, [
-                          createElementVNode("span", _hoisted_20$6, toDisplayString((provider.displayName || provider.name).charAt(0).toUpperCase()), 1)
+                          createElementVNode("span", _hoisted_20$5, toDisplayString((provider.displayName || provider.name).charAt(0).toUpperCase()), 1)
                         ]))
                       ]),
                       createElementVNode("span", _hoisted_21$4, "Continue with " + toDisplayString(provider.displayName || provider.name), 1)
@@ -9736,7 +9736,7 @@ const _hoisted_16$7 = { class: "totp-setup-backup-codes" };
 const _hoisted_17$6 = { class: "totp-setup-backup-grid-wrapper" };
 const _hoisted_18$6 = { class: "totp-setup-backup-grid" };
 const _hoisted_19$5 = { class: "totp-setup-backup-actions" };
-const _hoisted_20$5 = { class: "totp-setup-final-actions" };
+const _hoisted_20$4 = { class: "totp-setup-final-actions" };
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "StrandsTotpSetupModal",
   props: {
@@ -10040,7 +10040,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   })
                 ])
               ]),
-              createElementVNode("div", _hoisted_20$5, [
+              createElementVNode("div", _hoisted_20$4, [
                 createVNode(unref(StrandsUiButton), {
                   variant: "primary",
                   onClick: finish
@@ -10413,7 +10413,7 @@ const _hoisted_19$4 = {
   key: 4,
   class: "hardware-key-setup-step"
 };
-const _hoisted_20$4 = { class: "hardware-key-setup-error" };
+const _hoisted_20$3 = { class: "hardware-key-setup-error" };
 const _hoisted_21$3 = { class: "hardware-key-setup-error-message" };
 const _hoisted_22$3 = { class: "hardware-key-setup-actions" };
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
@@ -10896,7 +10896,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
               ])
             ])) : createCommentVNode("", true),
             step.value === 5 ? (openBlock(), createElementBlock("div", _hoisted_19$4, [
-              createElementVNode("div", _hoisted_20$4, [
+              createElementVNode("div", _hoisted_20$3, [
                 _cache[25] || (_cache[25] = createElementVNode("div", { class: "hardware-key-setup-error-icon" }, [
                   createElementVNode("svg", {
                     class: "hardware-key-setup-error-x",
@@ -11329,7 +11329,7 @@ const _hoisted_16$4 = { class: "mfa-device-option-content" };
 const _hoisted_17$4 = { class: "mfa-device-option-icon" };
 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_20$2 = { class: "mfa-device-option-icon" };
 const _hoisted_21$2 = { class: "mfa-device-option" };
 const _hoisted_22$2 = { class: "mfa-device-option-content" };
 const _hoisted_23$2 = { class: "mfa-device-option-icon" };
@@ -11621,7 +11621,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           ]),
                           createElementVNode("div", _hoisted_18$4, [
                             createElementVNode("div", _hoisted_19$3, [
-                              createElementVNode("div", _hoisted_20$3, [
+                              createElementVNode("div", _hoisted_20$2, [
                                 createVNode(Key, { size: 24 })
                               ]),
                               _cache[18] || (_cache[18] = createElementVNode("div", { class: "mfa-device-option-info" }, [
@@ -12078,7 +12078,7 @@ const _hoisted_18$3 = {
   class: "session-actions"
 };
 const _hoisted_19$2 = { class: "session-details" };
-const _hoisted_20$2 = { class: "detail-row" };
+const _hoisted_20$1 = { class: "detail-row" };
 const _hoisted_21$1 = { class: "detail-icon" };
 const _hoisted_22$1 = { class: "detail-text" };
 const _hoisted_23$1 = { class: "detail-row" };
@@ -12370,7 +12370,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                       ])) : createCommentVNode("", true)
                     ]),
                     createElementVNode("div", _hoisted_19$2, [
-                      createElementVNode("div", _hoisted_20$2, [
+                      createElementVNode("div", _hoisted_20$1, [
                         createElementVNode("span", _hoisted_21$1, [
                           createVNode(Monitor2, { size: 14 })
                         ]),
@@ -12457,7 +12457,7 @@ const _hoisted_16$2 = {
 const _hoisted_17$2 = { class: "profile-field-section" };
 const _hoisted_18$2 = { class: "profile-field-header" };
 const _hoisted_19$1 = { class: "profile-field-subtitle" };
-const _hoisted_20$1 = {
+const _hoisted_20 = {
   key: 0,
   class: "profile-change-form"
 };
@@ -13185,7 +13185,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_3$6, [
                   createElementVNode("div", _hoisted_4$5, [
                     createElementVNode("div", _hoisted_5$4, [
-                      createVNode(unref(StrandsUiLevelProgress), {
+                      createVNode(unref(UiLevelProgress), {
                         size: 140,
                         value: currentUser.value?.xp || 0,
                         max: currentUser.value?.next_level_xp || 1,
@@ -13339,7 +13339,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                         ]),
                         createVNode(Transition, { name: "expand" }, {
                           default: withCtx(() => [
-                            showUsernameChange.value ? (openBlock(), createElementBlock("div", _hoisted_20$1, [
+                            showUsernameChange.value ? (openBlock(), createElementBlock("div", _hoisted_20, [
                               createVNode(unref(StrandsUiInput), {
                                 modelValue: usernameForm.username,
                                 "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => usernameForm.username = $event),
@@ -14112,37 +14112,36 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$3 = { key: 0 };
-const _hoisted_2$2 = ["onKeydown", "aria-expanded"];
-const _hoisted_3$2 = { class: "user-button-content" };
-const _hoisted_4$2 = {
+const _hoisted_2$2 = { class: "user-button-content" };
+const _hoisted_3$2 = {
   key: 0,
   class: "user-info"
 };
-const _hoisted_5$1 = { class: "user-name" };
-const _hoisted_6$1 = { class: "avatar-container" };
-const _hoisted_7$1 = { class: "avatar-wrapper" };
-const _hoisted_8$1 = ["src", "alt"];
-const _hoisted_9$1 = {
+const _hoisted_4$2 = { class: "user-name" };
+const _hoisted_5$1 = { class: "avatar-container" };
+const _hoisted_6$1 = { class: "avatar-wrapper" };
+const _hoisted_7$1 = ["src", "alt"];
+const _hoisted_8$1 = {
   key: 1,
   class: "avatar-default"
 };
-const _hoisted_10$1 = ["onKeydown"];
-const _hoisted_11$1 = { class: "dropdown-content" };
-const _hoisted_12$1 = { class: "dropdown-header" };
-const _hoisted_13$1 = {
+const _hoisted_9$1 = ["onKeydown"];
+const _hoisted_10$1 = { class: "dropdown-content" };
+const _hoisted_11$1 = { class: "dropdown-header" };
+const _hoisted_12$1 = {
   key: 0,
   class: "dropdown-avatar-container"
 };
-const _hoisted_14$1 = ["src", "alt"];
-const _hoisted_15$1 = {
+const _hoisted_13$1 = ["src", "alt"];
+const _hoisted_14$1 = {
   key: 1,
   class: "dropdown-avatar-default"
 };
-const _hoisted_16$1 = { class: "dropdown-user-details" };
-const _hoisted_17$1 = { class: "dropdown-user-name" };
-const _hoisted_18$1 = { class: "dropdown-user-email" };
-const _hoisted_19 = { key: 1 };
-const _hoisted_20 = { class: "sign-in-auth-wrapper" };
+const _hoisted_15$1 = { class: "dropdown-user-details" };
+const _hoisted_16$1 = { class: "dropdown-user-name" };
+const _hoisted_17$1 = { class: "dropdown-user-email" };
+const _hoisted_18$1 = { key: 1 };
+const _hoisted_19 = { class: "sign-in-auth-wrapper" };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "StrandsUserButton",
   props: {
@@ -14250,7 +14249,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         ref: containerRef
       }, [
         user.value ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
-          createElementVNode("button", {
+          createVNode(unref(StrandsUiButton), {
+            color: "secondary",
+            active: showDropdown.value,
             onClick: toggleDropdown,
             onKeydown: [
               withKeys(toggleDropdown, ["enter"]),
@@ -14258,141 +14259,143 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               withKeys(closeDropdown, ["escape"]),
               withKeys(withModifiers(openDropdown, ["prevent"]), ["arrow-down"])
             ],
-            class: normalizeClass(["user-button", { "user-button-active": showDropdown.value }]),
             "aria-haspopup": "true",
             "aria-expanded": showDropdown.value,
             "aria-label": "User menu"
-          }, [
-            createElementVNode("div", _hoisted_3$2, [
-              !_ctx.hideUser ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
-                createElementVNode("div", _hoisted_5$1, toDisplayString(displayName.value), 1)
-              ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_6$1, [
-                createElementVNode("div", _hoisted_7$1, [
-                  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: "32",
-                    height: "32",
-                    loading: "eager"
-                  }, null, 8, _hoisted_8$1)) : (openBlock(), createElementBlock("div", _hoisted_9$1, [..._cache[2] || (_cache[2] = [
-                    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)
-                  ])]))
-                ])
-              ]),
-              (openBlock(), createElementBlock("svg", {
-                class: normalizeClass(["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))
-            ]),
-            createVNode(Transition, { name: "dropdown" }, {
-              default: withCtx(() => [
-                showDropdown.value ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  class: normalizeClass([
-                    "dropdown-menu",
-                    `dropdown-menu-align-${props.menuAlign}`,
-                    `dropdown-menu-vertical-${props.menuVerticalAlign}`
-                  ]),
-                  role: "menu",
-                  "aria-orientation": "vertical",
-                  onKeydown: [
-                    withKeys(closeDropdown, ["escape"]),
-                    withKeys(withModifiers(focusPrevious, ["prevent"]), ["arrow-up"]),
-                    withKeys(withModifiers(focusNext, ["prevent"]), ["arrow-down"]),
-                    withKeys(withModifiers(focusFirst, ["prevent"]), ["home"]),
-                    withKeys(withModifiers(focusLast, ["prevent"]), ["end"])
-                  ]
-                }, [
-                  createElementVNode("div", _hoisted_11$1, [
-                    createElementVNode("div", _hoisted_12$1, [
-                      user.value ? (openBlock(), createElementBlock("div", _hoisted_13$1, [
-                        createVNode(unref(StrandsUiLevelProgress), {
-                          size: 80,
-                          value: user.value.xp,
-                          max: user.value.next_level_xp,
-                          level: user.value.level,
-                          "level-label": `LEVEL ${user.value.level}`,
-                          "user-settings": user.value.settings,
-                          class: "level-progress-overlay"
-                        }, null, 8, ["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: "dropdown-avatar-image",
-                          width: "64",
-                          height: "64"
-                        }, null, 8, _hoisted_14$1)) : (openBlock(), createElementBlock("div", _hoisted_15$1, [..._cache[4] || (_cache[4] = [
-                          createElementVNode("svg", {
-                            class: "dropdown-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)
-                        ])]))
-                      ])) : createCommentVNode("", true),
-                      createElementVNode("div", _hoisted_16$1, [
-                        createElementVNode("div", _hoisted_17$1, toDisplayString(displayName.value), 1),
-                        createElementVNode("div", _hoisted_18$1, toDisplayString(user.value?.email), 1)
-                      ])
-                    ]),
-                    _cache[7] || (_cache[7] = createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
-                    renderSlot(_ctx.$slots, "default", {}, void 0, true),
-                    _cache[8] || (_cache[8] = createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
-                    createVNode(unref(StrandsNav), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(StrandsNav).Item, { onClick: openProfile }, {
-                          default: withCtx(() => [..._cache[5] || (_cache[5] = [
-                            createTextVNode("Profile", -1)
-                          ])]),
-                          _: 1
-                        }),
-                        createVNode(unref(StrandsNav).Item, {
-                          onClick: handleSignOut,
-                          color: "danger"
-                        }, {
-                          default: withCtx(() => [..._cache[6] || (_cache[6] = [
-                            createTextVNode("Sign Out", -1)
-                          ])]),
-                          _: 1
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_2$2, [
+                !_ctx.hideUser ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
+                  createElementVNode("div", _hoisted_4$2, toDisplayString(displayName.value), 1)
+                ])) : createCommentVNode("", true),
+                createElementVNode("div", _hoisted_5$1, [
+                  createElementVNode("div", _hoisted_6$1, [
+                    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: "32",
+                      height: "32",
+                      loading: "eager"
+                    }, null, 8, _hoisted_7$1)) : (openBlock(), createElementBlock("div", _hoisted_8$1, [..._cache[2] || (_cache[2] = [
+                      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
-                    })
+                      ], -1)
+                    ])]))
                   ])
-                ], 42, _hoisted_10$1)) : createCommentVNode("", true)
+                ]),
+                (openBlock(), createElementBlock("svg", {
+                  class: normalizeClass(["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))
               ]),
-              _: 3
-            })
-          ], 42, _hoisted_2$2),
-          createVNode(UiModal, {
+              createVNode(Transition, { name: "dropdown" }, {
+                default: withCtx(() => [
+                  showDropdown.value ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    class: normalizeClass([
+                      "dropdown-menu",
+                      `dropdown-menu-align-${props.menuAlign}`,
+                      `dropdown-menu-vertical-${props.menuVerticalAlign}`
+                    ]),
+                    role: "menu",
+                    "aria-orientation": "vertical",
+                    onKeydown: [
+                      withKeys(closeDropdown, ["escape"]),
+                      withKeys(withModifiers(focusPrevious, ["prevent"]), ["arrow-up"]),
+                      withKeys(withModifiers(focusNext, ["prevent"]), ["arrow-down"]),
+                      withKeys(withModifiers(focusFirst, ["prevent"]), ["home"]),
+                      withKeys(withModifiers(focusLast, ["prevent"]), ["end"])
+                    ]
+                  }, [
+                    createElementVNode("div", _hoisted_10$1, [
+                      createElementVNode("div", _hoisted_11$1, [
+                        user.value ? (openBlock(), createElementBlock("div", _hoisted_12$1, [
+                          createVNode(unref(UiLevelProgress), {
+                            size: 80,
+                            value: user.value.xp,
+                            max: user.value.next_level_xp,
+                            level: user.value.level,
+                            "level-label": `LEVEL ${user.value.level}`,
+                            "user-settings": user.value.settings,
+                            class: "level-progress-overlay"
+                          }, null, 8, ["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: "dropdown-avatar-image",
+                            width: "64",
+                            height: "64"
+                          }, null, 8, _hoisted_13$1)) : (openBlock(), createElementBlock("div", _hoisted_14$1, [..._cache[4] || (_cache[4] = [
+                            createElementVNode("svg", {
+                              class: "dropdown-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)
+                          ])]))
+                        ])) : createCommentVNode("", true),
+                        createElementVNode("div", _hoisted_15$1, [
+                          createElementVNode("div", _hoisted_16$1, toDisplayString(displayName.value), 1),
+                          createElementVNode("div", _hoisted_17$1, toDisplayString(user.value?.email), 1)
+                        ])
+                      ]),
+                      _cache[7] || (_cache[7] = createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
+                      renderSlot(_ctx.$slots, "default", {}, void 0, true),
+                      _cache[8] || (_cache[8] = createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
+                      createVNode(unref(StrandsNav), null, {
+                        default: withCtx(() => [
+                          createVNode(unref(StrandsNav).Item, { onClick: openProfile }, {
+                            default: withCtx(() => [..._cache[5] || (_cache[5] = [
+                              createTextVNode("Profile", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          createVNode(unref(StrandsNav).Item, {
+                            onClick: handleSignOut,
+                            color: "danger"
+                          }, {
+                            default: withCtx(() => [..._cache[6] || (_cache[6] = [
+                              createTextVNode("Sign Out", -1)
+                            ])]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      })
+                    ])
+                  ], 42, _hoisted_9$1)) : createCommentVNode("", true)
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          }, 8, ["active", "onKeydown", "aria-expanded"]),
+          createVNode(unref(UiModal), {
             modelValue: showProfileModal.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showProfileModal.value = $event),
             "fullscreen-on-mobile": false
@@ -14407,34 +14410,36 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["modelValue"])
-        ])) : (openBlock(), createElementBlock("div", _hoisted_19, [
-          createElementVNode("button", {
+        ])) : (openBlock(), createElementBlock("div", _hoisted_18$1, [
+          createVNode(unref(StrandsUiButton), {
             onClick: openSignIn,
-            class: "sign-in-button",
             "aria-label": "Sign in"
-          }, [..._cache[9] || (_cache[9] = [
-            createElementVNode("svg", {
-              class: "sign-in-icon",
-              fill: "none",
-              stroke: "currentColor",
-              viewBox: "0 0 24 24"
-            }, [
-              createElementVNode("path", {
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round",
-                "stroke-width": "2",
-                d: "M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
-              })
-            ], -1),
-            createElementVNode("span", null, "Sign In", -1)
-          ])]),
-          createVNode(UiModal, {
+          }, {
+            default: withCtx(() => [..._cache[9] || (_cache[9] = [
+              createElementVNode("svg", {
+                class: "sign-in-icon",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24"
+              }, [
+                createElementVNode("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "2",
+                  d: "M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
+                })
+              ], -1),
+              createElementVNode("span", null, "Sign In", -1)
+            ])]),
+            _: 1
+          }),
+          createVNode(unref(UiModal), {
             modelValue: showSignInModal.value,
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showSignInModal.value = $event),
             "fullscreen-on-mobile": false
           }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_20, [
+              createElementVNode("div", _hoisted_19, [
                 createVNode(unref(StrandsAuth), {
                   onSignedIn: handleSignedIn,
                   onError: handleSignInError,
@@ -14450,7 +14455,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-8f9d0aa9"]]);
+const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-ad5e5542"]]);
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "StrandsNav",
   props: {
@@ -15388,7 +15393,7 @@ export {
   UiDivider as StrandsUiDivider,
   UiHero as StrandsUiHero,
   StrandsUiInput,
-  StrandsUiLevelProgress,
+  UiLevelProgress as StrandsUiLevelProgress,
   StrandsUiLink,
   StrandsUiLoader,
   UiModal as StrandsUiModal,
@@ -15410,7 +15415,7 @@ export {
   UiDivider,
   UiHero,
   StrandsUiInput as UiInput,
-  StrandsUiLevelProgress as UiLevelProgress,
+  UiLevelProgress,
   StrandsUiLink as UiLink,
   StrandsUiLoader as UiLoader,
   UiModal,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strands.gg/accui",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "Strands Authentication UI Components",
   "type": "module",
   "main": "./dist/strands-auth-ui.cjs.js",