@strands.gg/accui 2.2.4 → 2.2.6

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

@@ -7036,6 +7036,14 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       isVerifyingMfa
     } = useStrandsAuth();
     const loading2 = computed(() => mfaLoading.value || authLoading.value);
+    const showModal = computed({
+      get: () => props.show,
+      set: (value) => {
+        if (!value) {
+          emit("close");
+        }
+      }
+    });
     const selectedMethod = ref(null);
     const verificationCode = ref("");
     const verificationError = ref("");
@@ -7285,11 +7293,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$o, [
         createVNode(UiModal, {
-          open: _ctx.show,
+          modelValue: showModal.value,
+          "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => showModal.value = $event),
           "card-class": "mfa-verification-modal",
           class: "mfa-verification-modal-wrapper"
         }, {
-          header: withCtx(() => [..._cache[6] || (_cache[6] = [
+          header: withCtx(() => [..._cache[7] || (_cache[7] = [
             createElementVNode("div", { class: "mfa-verification-header" }, [
               createElementVNode("h2", { class: "mfa-verification-title" }, "Two-Factor Authentication"),
               createElementVNode("p", { class: "mfa-verification-subtitle" }, "Enter your verification code to continue")
@@ -7302,7 +7311,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 onClick: closeModal,
                 disabled: loading2.value
               }, {
-                default: withCtx(() => [..._cache[14] || (_cache[14] = [
+                default: withCtx(() => [..._cache[15] || (_cache[15] = [
                   createTextVNode(" Cancel ", -1)
                 ])]),
                 _: 1
@@ -7328,7 +7337,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 createElementVNode("span", _hoisted_4$j, toDisplayString(unref(isSendingMfaEmail) || unref(isVerifyingMfa) ? unref(authLoadingMessage) : "Loading..."), 1)
               ])) : (openBlock(), createElementBlock("div", _hoisted_5$g, [
                 availableMethods.value.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_6$e, [
-                  _cache[7] || (_cache[7] = createElementVNode("p", { class: "mfa-methods-title" }, "Choose verification method:", -1)),
+                  _cache[8] || (_cache[8] = createElementVNode("p", { class: "mfa-methods-title" }, "Choose verification method:", -1)),
                   createElementVNode("div", _hoisted_7$e, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(availableMethods.value, (method) => {
                       return openBlock(), createElementBlock("button", {
@@ -7366,14 +7375,14 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                   ])
                 ])) : createCommentVNode("", true),
                 selectedMethod.value?.device_type === "email" && !emailCodeSent.value ? (openBlock(), createElementBlock("div", _hoisted_17$a, [
-                  _cache[9] || (_cache[9] = createElementVNode("p", { class: "mfa-email-request-text" }, "Click below to receive your verification code", -1)),
+                  _cache[10] || (_cache[10] = createElementVNode("p", { class: "mfa-email-request-text" }, "Click below to receive your verification code", -1)),
                   createVNode(unref(StrandsUiButton), {
                     variant: "primary",
                     onClick: sendEmailCode,
                     disabled: loading2.value,
                     loading: loading2.value
                   }, {
-                    default: withCtx(() => [..._cache[8] || (_cache[8] = [
+                    default: withCtx(() => [..._cache[9] || (_cache[9] = [
                       createTextVNode(" Send Verification Code ", -1)
                     ])]),
                     _: 1
@@ -7428,7 +7437,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                         size: 20,
                         class: "mfa-backup-warning-icon"
                       }),
-                      _cache[10] || (_cache[10] = createElementVNode("div", null, [
+                      _cache[11] || (_cache[11] = createElementVNode("div", null, [
                         createElementVNode("p", { class: "mfa-backup-warning-title" }, "Backup Code Recovery"),
                         createElementVNode("p", { class: "mfa-backup-warning-description" }, " Enter one of your backup codes. Each code can only be used once. ")
                       ], -1))
@@ -7466,7 +7475,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                         size: 20,
                         class: "mfa-email-confirmation-icon"
                       }),
-                      _cache[11] || (_cache[11] = createElementVNode("div", null, [
+                      _cache[12] || (_cache[12] = createElementVNode("div", null, [
                         createElementVNode("p", { class: "mfa-email-confirmation-title" }, "Code Sent!"),
                         createElementVNode("p", { class: "mfa-email-confirmation-description" }, "Check your email for the verification code")
                       ], -1))
@@ -7503,7 +7512,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                     title: "Enter 6-digit verification code"
                   }, null, 8, ["modelValue", "placeholder", "error", "disabled"]),
                   selectedMethod.value.device_type === "totp" ? (openBlock(), createElementBlock("div", _hoisted_30$3, [
-                    _cache[12] || (_cache[12] = createTextVNode(" Open your authenticator app and enter the 6-digit code for ", -1)),
+                    _cache[13] || (_cache[13] = createTextVNode(" Open your authenticator app and enter the 6-digit code for ", -1)),
                     createElementVNode("span", _hoisted_31$3, '"' + toDisplayString(selectedMethod.value.device_name) + '"', 1)
                   ])) : createCommentVNode("", true),
                   selectedMethod.value.device_type === "email" ? (openBlock(), createElementBlock("div", _hoisted_32$3, [
@@ -7543,7 +7552,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                         size: 20,
                         class: "mfa-backup-warning-icon"
                       }),
-                      _cache[13] || (_cache[13] = createElementVNode("div", null, [
+                      _cache[14] || (_cache[14] = createElementVNode("div", null, [
                         createElementVNode("p", { class: "mfa-backup-warning-title" }, "Backup Code Recovery"),
                         createElementVNode("p", { class: "mfa-backup-warning-description" }, " Enter one of your backup codes. Each code can only be used once. ")
                       ], -1))
@@ -7572,12 +7581,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 1
-        }, 8, ["open"])
+        }, 8, ["modelValue"])
       ]);
     };
   }
 });
-const StrandsMfaVerification = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-b7be11a0"]]);
+const StrandsMfaVerification = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-0d8b9530"]]);
 const providersCache = /* @__PURE__ */ new Map();
 const CACHE_DURATION = 5 * 60 * 1e3;
 function useOAuthProviders(options = {}) {
@@ -9549,6 +9558,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const { setupTotp, verifyTotpSetup, loading: loading2 } = useStrandsMfa();
+    const showModal = computed({
+      get: () => props.show,
+      set: (value) => {
+        if (!value) {
+          emit("close");
+        }
+      }
+    });
     const step = ref(1);
     const deviceName = ref("");
     const deviceNameError = ref("");
@@ -9627,17 +9644,17 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$g, [
         createVNode(UiModal, {
-          open: _ctx.show,
-          onClose: closeModal,
+          modelValue: showModal.value,
+          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => showModal.value = $event),
           "card-class": "modal-card"
         }, {
           header: withCtx(() => [
             createElementVNode("div", { class: "modal-header" }, [
-              _cache[6] || (_cache[6] = createElementVNode("h2", { class: "modal-title" }, "Setup Authenticator App", -1)),
+              _cache[7] || (_cache[7] = createElementVNode("h2", { class: "modal-title" }, "Setup Authenticator App", -1)),
               createElementVNode("button", {
                 onClick: closeModal,
                 class: "modal-close-button"
-              }, [..._cache[5] || (_cache[5] = [
+              }, [..._cache[6] || (_cache[6] = [
                 createElementVNode("svg", {
                   class: "modal-close-icon",
                   fill: "none",
@@ -9656,7 +9673,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           ]),
           default: withCtx(() => [
             step.value === 1 ? (openBlock(), createElementBlock("div", _hoisted_2$e, [
-              _cache[9] || (_cache[9] = createElementVNode("div", null, [
+              _cache[10] || (_cache[10] = createElementVNode("div", null, [
                 createElementVNode("h3", { class: "step-title" }, "Name Your Device"),
                 createElementVNode("p", { class: "step-description" }, ' Give this authenticator a memorable name (e.g., "iPhone", "Work Phone") ')
               ], -1)),
@@ -9674,7 +9691,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   onClick: closeModal,
                   disabled: unref(loading2)
                 }, {
-                  default: withCtx(() => [..._cache[7] || (_cache[7] = [
+                  default: withCtx(() => [..._cache[8] || (_cache[8] = [
                     createTextVNode(" Cancel ", -1)
                   ])]),
                   _: 1
@@ -9685,7 +9702,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   disabled: !deviceName.value.trim() || unref(loading2),
                   loading: unref(loading2)
                 }, {
-                  default: withCtx(() => [..._cache[8] || (_cache[8] = [
+                  default: withCtx(() => [..._cache[9] || (_cache[9] = [
                     createTextVNode(" Continue ", -1)
                   ])]),
                   _: 1
@@ -9693,7 +9710,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               ])
             ])) : createCommentVNode("", true),
             step.value === 2 ? (openBlock(), createElementBlock("div", _hoisted_4$d, [
-              _cache[14] || (_cache[14] = createElementVNode("div", null, [
+              _cache[15] || (_cache[15] = createElementVNode("div", null, [
                 createElementVNode("h3", { class: "step-title" }, "Scan QR Code"),
                 createElementVNode("p", { class: "step-description" }, " Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.) ")
               ], -1)),
@@ -9711,10 +9728,10 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 ]))
               ]),
               createElementVNode("div", _hoisted_9$8, [
-                _cache[10] || (_cache[10] = createElementVNode("p", { class: "manual-label" }, " Can't scan? Enter this code manually: ", -1)),
+                _cache[11] || (_cache[11] = createElementVNode("p", { class: "manual-label" }, " Can't scan? Enter this code manually: ", -1)),
                 createElementVNode("code", _hoisted_10$8, toDisplayString(totpSetupData.value?.secret || "..."), 1)
               ]),
-              totpSetupData.value?.backup_codes ? (openBlock(), createElementBlock("div", _hoisted_11$8, [..._cache[11] || (_cache[11] = [
+              totpSetupData.value?.backup_codes ? (openBlock(), createElementBlock("div", _hoisted_11$8, [..._cache[12] || (_cache[12] = [
                 createElementVNode("div", { class: "flex items-start space-x-2" }, [
                   createElementVNode("svg", {
                     class: "w-5 h-5 text-yellow-600 mt-0.5 flex-shrink-0",
@@ -9739,7 +9756,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   onClick: _cache[1] || (_cache[1] = ($event) => step.value = 1),
                   disabled: unref(loading2)
                 }, {
-                  default: withCtx(() => [..._cache[12] || (_cache[12] = [
+                  default: withCtx(() => [..._cache[13] || (_cache[13] = [
                     createTextVNode(" Back ", -1)
                   ])]),
                   _: 1
@@ -9749,7 +9766,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   onClick: _cache[2] || (_cache[2] = ($event) => step.value = 3),
                   disabled: unref(loading2)
                 }, {
-                  default: withCtx(() => [..._cache[13] || (_cache[13] = [
+                  default: withCtx(() => [..._cache[14] || (_cache[14] = [
                     createTextVNode(" I've Added It ", -1)
                   ])]),
                   _: 1
@@ -9757,7 +9774,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               ])
             ])) : createCommentVNode("", true),
             step.value === 3 ? (openBlock(), createElementBlock("div", _hoisted_13$8, [
-              _cache[17] || (_cache[17] = createElementVNode("div", null, [
+              _cache[18] || (_cache[18] = createElementVNode("div", null, [
                 createElementVNode("h3", { class: "text-lg font-semibold text-gray-900 mb-2" }, "Verify Setup"),
                 createElementVNode("p", { class: "text-sm text-gray-600 mb-4" }, " Enter the 6-digit code from your authenticator app to complete setup ")
               ], -1)),
@@ -9777,7 +9794,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   onClick: _cache[4] || (_cache[4] = ($event) => step.value = 2),
                   disabled: unref(loading2)
                 }, {
-                  default: withCtx(() => [..._cache[15] || (_cache[15] = [
+                  default: withCtx(() => [..._cache[16] || (_cache[16] = [
                     createTextVNode(" Back ", -1)
                   ])]),
                   _: 1
@@ -9788,7 +9805,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   disabled: verificationCode.value.length !== 6 || unref(loading2),
                   loading: unref(loading2)
                 }, {
-                  default: withCtx(() => [..._cache[16] || (_cache[16] = [
+                  default: withCtx(() => [..._cache[17] || (_cache[17] = [
                     createTextVNode(" Verify & Enable ", -1)
                   ])]),
                   _: 1
@@ -9796,7 +9813,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               ])
             ])) : createCommentVNode("", true),
             step.value === 4 ? (openBlock(), createElementBlock("div", _hoisted_15$7, [
-              _cache[21] || (_cache[21] = createElementVNode("div", { class: "totp-setup-success" }, [
+              _cache[22] || (_cache[22] = createElementVNode("div", { class: "totp-setup-success" }, [
                 createElementVNode("div", { class: "totp-setup-success-icon" }, [
                   createElementVNode("svg", {
                     class: "totp-setup-check-icon",
@@ -9816,7 +9833,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 createElementVNode("p", { class: "totp-setup-success-description" }, " Your authenticator app is now active for two-factor authentication. ")
               ], -1)),
               createElementVNode("div", _hoisted_16$7, [
-                _cache[19] || (_cache[19] = createElementVNode("div", { class: "totp-setup-backup-header" }, [
+                _cache[20] || (_cache[20] = createElementVNode("div", { class: "totp-setup-backup-header" }, [
                   createElementVNode("svg", {
                     class: "totp-setup-backup-warning-icon",
                     fill: "currentColor",
@@ -9849,7 +9866,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                     size: "sm",
                     onClick: copyBackupCodes
                   }, {
-                    default: withCtx(() => [..._cache[18] || (_cache[18] = [
+                    default: withCtx(() => [..._cache[19] || (_cache[19] = [
                       createTextVNode(" 📋 Copy Codes ", -1)
                     ])]),
                     _: 1
@@ -9861,7 +9878,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   variant: "primary",
                   onClick: finish
                 }, {
-                  default: withCtx(() => [..._cache[20] || (_cache[20] = [
+                  default: withCtx(() => [..._cache[21] || (_cache[21] = [
                     createTextVNode(" Done ", -1)
                   ])]),
                   _: 1
@@ -9870,12 +9887,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true)
           ]),
           _: 1
-        }, 8, ["open"])
+        }, 8, ["modelValue"])
       ]);
     };
   }
 });
-const StrandsTotpSetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-9082db45"]]);
+const StrandsTotpSetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-435c0812"]]);
 const _hoisted_1$f = { class: "accui-component-scope" };
 const _hoisted_2$d = {
   key: 0,
@@ -9903,6 +9920,14 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const { setupEmailMfa, sendEmailMfaCode, verifyEmailMfaCode, loading: loading2 } = useStrandsMfa();
+    const showModal = computed({
+      get: () => props.show,
+      set: (value) => {
+        if (!value) {
+          emit("close");
+        }
+      }
+    });
     const step = ref(1);
     const deviceName = ref("");
     const deviceNameError = ref("");
@@ -10005,17 +10030,17 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$f, [
         createVNode(UiModal, {
-          open: _ctx.show,
-          onClose: closeModal,
+          modelValue: showModal.value,
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => showModal.value = $event),
           "card-class": "email-mfa-setup-modal"
         }, {
           header: withCtx(() => [
             createElementVNode("div", { class: "email-mfa-setup-header" }, [
-              _cache[4] || (_cache[4] = createElementVNode("h2", { class: "email-mfa-setup-title" }, "Setup Email 2FA", -1)),
+              _cache[5] || (_cache[5] = createElementVNode("h2", { class: "email-mfa-setup-title" }, "Setup Email 2FA", -1)),
               createElementVNode("button", {
                 onClick: closeModal,
                 class: "email-mfa-setup-close-button"
-              }, [..._cache[3] || (_cache[3] = [
+              }, [..._cache[4] || (_cache[4] = [
                 createElementVNode("svg", {
                   class: "email-mfa-setup-close-icon",
                   fill: "none",
@@ -10034,7 +10059,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           ]),
           default: withCtx(() => [
             step.value === 1 ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
-              _cache[7] || (_cache[7] = createElementVNode("div", null, [
+              _cache[8] || (_cache[8] = createElementVNode("div", null, [
                 createElementVNode("h3", { class: "email-mfa-setup-step-title" }, "Name Your Email 2FA"),
                 createElementVNode("p", { class: "email-mfa-setup-step-description" }, ' Give this email 2FA method a memorable name (e.g., "Personal Email", "Work Email") ')
               ], -1)),
@@ -10046,7 +10071,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 error: deviceNameError.value,
                 disabled: unref(loading2)
               }, null, 8, ["modelValue", "error", "disabled"]),
-              _cache[8] || (_cache[8] = createElementVNode("div", { class: "email-mfa-setup-info" }, [
+              _cache[9] || (_cache[9] = createElementVNode("div", { class: "email-mfa-setup-info" }, [
                 createElementVNode("div", { class: "email-mfa-setup-info-content" }, [
                   createElementVNode("svg", {
                     class: "email-mfa-setup-info-icon",
@@ -10071,7 +10096,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   onClick: closeModal,
                   disabled: unref(loading2)
                 }, {
-                  default: withCtx(() => [..._cache[5] || (_cache[5] = [
+                  default: withCtx(() => [..._cache[6] || (_cache[6] = [
                     createTextVNode(" Cancel ", -1)
                   ])]),
                   _: 1
@@ -10082,7 +10107,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   disabled: !deviceName.value.trim() || unref(loading2),
                   loading: unref(loading2)
                 }, {
-                  default: withCtx(() => [..._cache[6] || (_cache[6] = [
+                  default: withCtx(() => [..._cache[7] || (_cache[7] = [
                     createTextVNode(" Setup Email 2FA ", -1)
                   ])]),
                   _: 1
@@ -10090,11 +10115,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               ])
             ])) : createCommentVNode("", true),
             step.value === 2 ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
-              _cache[11] || (_cache[11] = createElementVNode("div", null, [
+              _cache[12] || (_cache[12] = createElementVNode("div", null, [
                 createElementVNode("h3", { class: "email-mfa-setup-step-title" }, "Test Email 2FA"),
                 createElementVNode("p", { class: "email-mfa-setup-step-description" }, " We've sent a test verification code to your email. Enter it below to complete setup. ")
               ], -1)),
-              _cache[12] || (_cache[12] = createElementVNode("div", { class: "email-mfa-setup-success-notification" }, [
+              _cache[13] || (_cache[13] = createElementVNode("div", { class: "email-mfa-setup-success-notification" }, [
                 createElementVNode("div", { class: "email-mfa-setup-success-content" }, [
                   createElementVNode("svg", {
                     class: "email-mfa-setup-success-icon",
@@ -10142,7 +10167,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   onClick: _cache[2] || (_cache[2] = ($event) => step.value = 1),
                   disabled: unref(loading2)
                 }, {
-                  default: withCtx(() => [..._cache[9] || (_cache[9] = [
+                  default: withCtx(() => [..._cache[10] || (_cache[10] = [
                     createTextVNode(" Back ", -1)
                   ])]),
                   _: 1
@@ -10153,7 +10178,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   disabled: verificationCode.value.length !== 6 || unref(loading2),
                   loading: unref(loading2)
                 }, {
-                  default: withCtx(() => [..._cache[10] || (_cache[10] = [
+                  default: withCtx(() => [..._cache[11] || (_cache[11] = [
                     createTextVNode(" Verify & Enable ", -1)
                   ])]),
                   _: 1
@@ -10161,7 +10186,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               ])
             ])) : createCommentVNode("", true),
             step.value === 3 ? (openBlock(), createElementBlock("div", _hoisted_7$8, [
-              _cache[14] || (_cache[14] = createElementVNode("div", { class: "email-mfa-setup-completion" }, [
+              _cache[15] || (_cache[15] = createElementVNode("div", { class: "email-mfa-setup-completion" }, [
                 createElementVNode("div", { class: "email-mfa-setup-completion-icon" }, [
                   createElementVNode("svg", {
                     class: "email-mfa-setup-check-icon",
@@ -10180,7 +10205,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 createElementVNode("h3", { class: "email-mfa-setup-step-title" }, "Email 2FA Setup Complete!"),
                 createElementVNode("p", { class: "email-mfa-setup-completion-description" }, " Email verification is now active for your account. You'll receive codes at your registered email address. ")
               ], -1)),
-              _cache[15] || (_cache[15] = createElementVNode("div", { class: "email-mfa-setup-info" }, [
+              _cache[16] || (_cache[16] = createElementVNode("div", { class: "email-mfa-setup-info" }, [
                 createElementVNode("div", { class: "email-mfa-setup-info-content" }, [
                   createElementVNode("svg", {
                     class: "email-mfa-setup-info-icon",
@@ -10204,7 +10229,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   variant: "primary",
                   onClick: finish
                 }, {
-                  default: withCtx(() => [..._cache[13] || (_cache[13] = [
+                  default: withCtx(() => [..._cache[14] || (_cache[14] = [
                     createTextVNode(" Done ", -1)
                   ])]),
                   _: 1
@@ -10213,12 +10238,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true)
           ]),
           _: 1
-        }, 8, ["open"])
+        }, 8, ["modelValue"])
       ]);
     };
   }
 });
-const StrandsEmailMfaSetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-f88d0494"]]);
+const StrandsEmailMfaSetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-3a43cfca"]]);
 const _hoisted_1$e = { class: "accui-component-scope" };
 const _hoisted_2$c = {
   key: 0,
@@ -10258,6 +10283,14 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const { regenerateBackupCodes, loading: loading2, getDeviceTypeName } = useStrandsMfa();
+    const showModal = computed({
+      get: () => props.show,
+      set: (value) => {
+        if (!value) {
+          emit("close");
+        }
+      }
+    });
     const backupCodes = ref([]);
     const showRegenerateWarning = ref(false);
     watch(() => props.show, async (newShow) => {
@@ -10331,17 +10364,17 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$e, [
         createVNode(UiModal, {
-          open: _ctx.show,
-          onClose: closeModal,
+          modelValue: showModal.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showModal.value = $event),
           "card-class": "backup-codes-modal"
         }, {
           header: withCtx(() => [
             createElementVNode("div", { class: "backup-codes-header" }, [
-              _cache[2] || (_cache[2] = createElementVNode("h2", { class: "backup-codes-title" }, "Backup Codes", -1)),
+              _cache[3] || (_cache[3] = createElementVNode("h2", { class: "backup-codes-title" }, "Backup Codes", -1)),
               createElementVNode("button", {
                 onClick: closeModal,
                 class: "backup-codes-close-button"
-              }, [..._cache[1] || (_cache[1] = [
+              }, [..._cache[2] || (_cache[2] = [
                 createElementVNode("svg", {
                   class: "backup-codes-close-icon",
                   fill: "none",
@@ -10361,18 +10394,18 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             unref(loading2) ? (openBlock(), createElementBlock("div", _hoisted_2$c, [
               createVNode(unref(StrandsUiLoader), { size: 24 }),
-              _cache[3] || (_cache[3] = createElementVNode("span", { class: "backup-codes-loading-text" }, "Loading backup codes...", -1))
+              _cache[4] || (_cache[4] = createElementVNode("span", { class: "backup-codes-loading-text" }, "Loading backup codes...", -1))
             ])) : (openBlock(), createElementBlock("div", _hoisted_3$c, [
               _ctx.device ? (openBlock(), createElementBlock("div", _hoisted_4$b, [
                 createElementVNode("div", _hoisted_5$9, [
-                  _cache[4] || (_cache[4] = createElementVNode("span", { class: "backup-codes-device-icon" }, "📱", -1)),
+                  _cache[5] || (_cache[5] = createElementVNode("span", { class: "backup-codes-device-icon" }, "📱", -1)),
                   createElementVNode("div", null, [
                     createElementVNode("h3", _hoisted_6$7, toDisplayString(_ctx.device.device_name), 1),
                     createElementVNode("p", _hoisted_7$7, toDisplayString(unref(getDeviceTypeName)(_ctx.device.device_type)), 1)
                   ])
                 ])
               ])) : createCommentVNode("", true),
-              _cache[15] || (_cache[15] = createElementVNode("div", { class: "backup-codes-warning" }, [
+              _cache[16] || (_cache[16] = createElementVNode("div", { class: "backup-codes-warning" }, [
                 createElementVNode("div", { class: "backup-codes-warning-content" }, [
                   createElementVNode("svg", {
                     class: "backup-codes-warning-icon",
@@ -10397,7 +10430,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 ])
               ], -1)),
               backupCodes.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_8$7, [
-                _cache[7] || (_cache[7] = createElementVNode("h3", { class: "backup-codes-section-title" }, "Your Backup Codes", -1)),
+                _cache[8] || (_cache[8] = createElementVNode("h3", { class: "backup-codes-section-title" }, "Your Backup Codes", -1)),
                 createElementVNode("div", _hoisted_9$7, [
                   createElementVNode("div", _hoisted_10$7, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(backupCodes.value, (code, index) => {
@@ -10414,7 +10447,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                     size: "sm",
                     onClick: copyBackupCodes
                   }, {
-                    default: withCtx(() => [..._cache[5] || (_cache[5] = [
+                    default: withCtx(() => [..._cache[6] || (_cache[6] = [
                       createTextVNode(" 📋 Copy All Codes ", -1)
                     ])]),
                     _: 1
@@ -10424,7 +10457,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                     size: "sm",
                     onClick: downloadBackupCodes
                   }, {
-                    default: withCtx(() => [..._cache[6] || (_cache[6] = [
+                    default: withCtx(() => [..._cache[7] || (_cache[7] = [
                       createTextVNode(" 💾 Download ", -1)
                     ])]),
                     _: 1
@@ -10439,7 +10472,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                     disabled: unref(loading2),
                     loading: unref(loading2)
                   }, {
-                    default: withCtx(() => [..._cache[8] || (_cache[8] = [
+                    default: withCtx(() => [..._cache[9] || (_cache[9] = [
                       createTextVNode(" 🔄 Regenerate Codes ", -1)
                     ])]),
                     _: 1
@@ -10448,7 +10481,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                     variant: "primary",
                     onClick: closeModal
                   }, {
-                    default: withCtx(() => [..._cache[9] || (_cache[9] = [
+                    default: withCtx(() => [..._cache[10] || (_cache[10] = [
                       createTextVNode(" Done ", -1)
                     ])]),
                     _: 1
@@ -10457,7 +10490,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
               ]),
               showRegenerateWarning.value ? (openBlock(), createElementBlock("div", _hoisted_14$7, [
                 createElementVNode("div", _hoisted_15$6, [
-                  _cache[14] || (_cache[14] = createElementVNode("svg", {
+                  _cache[15] || (_cache[15] = createElementVNode("svg", {
                     class: "backup-codes-regenerate-icon",
                     fill: "currentColor",
                     viewBox: "0 0 20 20"
@@ -10469,8 +10502,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                     })
                   ], -1)),
                   createElementVNode("div", null, [
-                    _cache[12] || (_cache[12] = createElementVNode("p", { class: "backup-codes-regenerate-title" }, "Regenerate Backup Codes?", -1)),
-                    _cache[13] || (_cache[13] = createElementVNode("p", { class: "backup-codes-regenerate-description" }, " This will invalidate all current backup codes. Make sure to save the new ones. ", -1)),
+                    _cache[13] || (_cache[13] = createElementVNode("p", { class: "backup-codes-regenerate-title" }, "Regenerate Backup Codes?", -1)),
+                    _cache[14] || (_cache[14] = createElementVNode("p", { class: "backup-codes-regenerate-description" }, " This will invalidate all current backup codes. Make sure to save the new ones. ", -1)),
                     createElementVNode("div", _hoisted_16$6, [
                       createVNode(unref(StrandsUiButton), {
                         variant: "primary",
@@ -10479,7 +10512,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                         disabled: unref(loading2),
                         loading: unref(loading2)
                       }, {
-                        default: withCtx(() => [..._cache[10] || (_cache[10] = [
+                        default: withCtx(() => [..._cache[11] || (_cache[11] = [
                           createTextVNode(" Yes, Regenerate ", -1)
                         ])]),
                         _: 1
@@ -10489,7 +10522,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                         size: "sm",
                         onClick: _cache[0] || (_cache[0] = ($event) => showRegenerateWarning.value = false)
                       }, {
-                        default: withCtx(() => [..._cache[11] || (_cache[11] = [
+                        default: withCtx(() => [..._cache[12] || (_cache[12] = [
                           createTextVNode(" Cancel ", -1)
                         ])]),
                         _: 1
@@ -10501,12 +10534,12 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             ]))
           ]),
           _: 1
-        }, 8, ["open"])
+        }, 8, ["modelValue"])
       ]);
     };
   }
 });
-const StrandsBackupCodesModal = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-98b8d760"]]);
+const StrandsBackupCodesModal = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-4b981c3b"]]);
 const _hoisted_1$d = { class: "accui-component-scope" };
 const _hoisted_2$b = { class: "confirm-modal-title" };
 const _hoisted_3$b = { class: "confirm-modal-message" };
@@ -10523,8 +10556,17 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   },
   emits: ["confirm", "cancel"],
   setup(__props, { emit: __emit }) {
+    const props = __props;
     const emit = __emit;
     const loading2 = ref(false);
+    const showModal = computed({
+      get: () => props.show,
+      set: (value) => {
+        if (!value) {
+          emit("cancel");
+        }
+      }
+    });
     const handleConfirm = () => {
       loading2.value = true;
       emit("confirm");
@@ -10535,7 +10577,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$d, [
         createVNode(UiModal, {
-          open: _ctx.show,
+          modelValue: showModal.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showModal.value = $event),
           "card-class": "confirm-modal"
         }, {
           header: withCtx(() => [
@@ -10568,12 +10611,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 1
-        }, 8, ["open"])
+        }, 8, ["modelValue"])
       ]);
     };
   }
 });
-const StrandsConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-df3ca571"]]);
+const StrandsConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-caf19622"]]);
 const _hoisted_1$c = { class: "accui-component-scope" };
 const _hoisted_2$a = {
   key: 0,
@@ -11499,10 +11542,6 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         loading2.value = false;
       }
     };
-    const handleClose = () => {
-      visible.value = false;
-      emit("update:modelValue", false);
-    };
     const handleRevokeSession = async (sessionId) => {
       if (!confirm("Are you sure you want to end this session? The device will be signed out.")) {
         return;
@@ -11589,13 +11628,13 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       loadSessions();
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(UiModal), {
-        open: visible.value,
-        onClose: handleClose
+      return openBlock(), createBlock(UiModal, {
+        modelValue: visible.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event)
       }, createSlots({
         header: withCtx(() => [
           createElementVNode("div", _hoisted_1$a, [
-            _cache[0] || (_cache[0] = createElementVNode("h2", { class: "modal-title" }, "Active Sessions", -1)),
+            _cache[1] || (_cache[1] = createElementVNode("h2", { class: "modal-title" }, "Active Sessions", -1)),
             createElementVNode("p", _hoisted_2$8, "Manage your " + toDisplayString(sessions.value.length) + " active device" + toDisplayString(sessions.value.length !== 1 ? "s" : ""), 1)
           ])
         ]),
@@ -11603,8 +11642,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_3$8, [
             loading2.value ? (openBlock(), createElementBlock("div", _hoisted_4$7, [
               createVNode(unref(StrandsUiLoader), { size: 40 }),
-              _cache[1] || (_cache[1] = createElementVNode("p", { class: "loading-text" }, "Loading sessions...", -1))
-            ])) : sessions.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$6, [..._cache[2] || (_cache[2] = [
+              _cache[2] || (_cache[2] = createElementVNode("p", { class: "loading-text" }, "Loading sessions...", -1))
+            ])) : sessions.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$6, [..._cache[3] || (_cache[3] = [
               createElementVNode("div", { class: "empty-icon" }, [
                 createElementVNode("svg", {
                   width: "48",
@@ -11640,15 +11679,15 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             ])])) : (openBlock(), createElementBlock("div", _hoisted_6$4, [
               stats.value ? (openBlock(), createElementBlock("div", _hoisted_7$4, [
                 createElementVNode("div", _hoisted_8$4, [
-                  _cache[3] || (_cache[3] = createElementVNode("span", { class: "stat-label" }, "Total Sessions", -1)),
+                  _cache[4] || (_cache[4] = createElementVNode("span", { class: "stat-label" }, "Total Sessions", -1)),
                   createElementVNode("span", _hoisted_9$4, toDisplayString(stats.value.total_sessions), 1)
                 ]),
                 createElementVNode("div", _hoisted_10$4, [
-                  _cache[4] || (_cache[4] = createElementVNode("span", { class: "stat-label" }, "Active Devices", -1)),
+                  _cache[5] || (_cache[5] = createElementVNode("span", { class: "stat-label" }, "Active Devices", -1)),
                   createElementVNode("span", _hoisted_11$4, toDisplayString(stats.value.active_sessions), 1)
                 ]),
                 stats.value.unique_locations && stats.value.unique_locations.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_12$4, [
-                  _cache[5] || (_cache[5] = createElementVNode("span", { class: "stat-label" }, "Locations", -1)),
+                  _cache[6] || (_cache[6] = createElementVNode("span", { class: "stat-label" }, "Locations", -1)),
                   createElementVNode("span", _hoisted_13$4, toDisplayString(stats.value.unique_locations.length), 1)
                 ])) : createCommentVNode("", true)
               ])) : createCommentVNode("", true),
@@ -11753,7 +11792,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 1
                 }, 8, ["disabled"]),
-                _cache[6] || (_cache[6] = createElementVNode("p", { class: "bulk-actions-hint" }, " This will sign you out on all other devices ", -1))
+                _cache[7] || (_cache[7] = createElementVNode("p", { class: "bulk-actions-hint" }, " This will sign you out on all other devices ", -1))
               ])) : createCommentVNode("", true)
             ]))
           ])
@@ -11767,11 +11806,11 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["open"]);
+      ]), 1032, ["modelValue"]);
     };
   }
 });
-const StrandsSessionsModal = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-2eb148a1"]]);
+const StrandsSessionsModal = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-35db4a29"]]);
 const _hoisted_1$9 = { class: "accui-component-scope" };
 const _hoisted_2$7 = { class: "profile-content-layout" };
 const _hoisted_3$7 = { class: "profile-image-section" };
@@ -13010,7 +13049,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUserProfile = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-a61738d7"]]);
+const StrandsUserProfile = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-d12ee975"]]);
 const _hoisted_1$8 = { class: "accui-component-scope" };
 const _hoisted_2$6 = { class: "accui-w-full accui-min-w-100 accui-max-w-md accui-mx-auto accui-animate-slide-up" };
 const _hoisted_3$6 = { class: "accui-mt-8 accui-text-center" };
@@ -13553,9 +13592,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       showProfileModal.value = true;
       closeDropdown();
     };
-    const closeProfile = () => {
-      showProfileModal.value = false;
-    };
     const handleProfileUpdated = () => {
       emit("profile-updated");
     };
@@ -13564,11 +13600,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const openSignIn = () => {
       showSignInModal.value = true;
     };
-    const closeSignIn = () => {
-      showSignInModal.value = false;
-    };
     const handleSignedIn = () => {
-      closeSignIn();
+      showSignInModal.value = false;
       emit("signed-in");
     };
     const handleSignInError = () => {
@@ -13626,7 +13659,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                     width: "32",
                     height: "32",
                     loading: "eager"
-                  }, null, 8, _hoisted_8$2)) : (openBlock(), createElementBlock("div", _hoisted_9$2, [..._cache[1] || (_cache[1] = [
+                  }, null, 8, _hoisted_8$2)) : (openBlock(), createElementBlock("div", _hoisted_9$2, [..._cache[2] || (_cache[2] = [
                     createElementVNode("svg", {
                       class: "avatar-icon",
                       fill: "currentColor",
@@ -13646,7 +13679,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24"
-              }, [..._cache[2] || (_cache[2] = [
+              }, [..._cache[3] || (_cache[3] = [
                 createElementVNode("path", {
                   "stroke-linecap": "round",
                   "stroke-linejoin": "round",
@@ -13693,7 +13726,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                           class: "dropdown-avatar-image",
                           width: "64",
                           height: "64"
-                        }, null, 8, _hoisted_14$2)) : (openBlock(), createElementBlock("div", _hoisted_15$2, [..._cache[3] || (_cache[3] = [
+                        }, null, 8, _hoisted_14$2)) : (openBlock(), createElementBlock("div", _hoisted_15$2, [..._cache[4] || (_cache[4] = [
                           createElementVNode("svg", {
                             class: "dropdown-avatar-icon",
                             fill: "currentColor",
@@ -13712,13 +13745,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                         createElementVNode("div", _hoisted_18$2, toDisplayString(user.value?.email), 1)
                       ])
                     ]),
-                    _cache[6] || (_cache[6] = createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
-                    renderSlot(_ctx.$slots, "default", {}, void 0, true),
                     _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[4] || (_cache[4] = [
+                          default: withCtx(() => [..._cache[5] || (_cache[5] = [
                             createTextVNode("Profile", -1)
                           ])]),
                           _: 1
@@ -13727,7 +13760,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                           onClick: handleSignOut,
                           color: "danger"
                         }, {
-                          default: withCtx(() => [..._cache[5] || (_cache[5] = [
+                          default: withCtx(() => [..._cache[6] || (_cache[6] = [
                             createTextVNode("Sign Out", -1)
                           ])]),
                           _: 1
@@ -13742,8 +13775,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             })
           ], 42, _hoisted_2$3),
           createVNode(UiModal, {
-            open: showProfileModal.value,
-            onClose: closeProfile,
+            modelValue: showProfileModal.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showProfileModal.value = $event),
             "fullscreen-on-mobile": false
           }, {
             default: withCtx(() => [
@@ -13755,13 +13788,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               }, null, 8, ["user"])
             ]),
             _: 1
-          }, 8, ["open"])
+          }, 8, ["modelValue"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_19$1, [
           createElementVNode("button", {
             onClick: openSignIn,
             class: "sign-in-button",
             "aria-label": "Sign in"
-          }, [..._cache[8] || (_cache[8] = [
+          }, [..._cache[9] || (_cache[9] = [
             createElementVNode("svg", {
               class: "sign-in-icon",
               fill: "none",
@@ -13779,8 +13812,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           ])]),
           createVNode(UiModal, {
             modelValue: showSignInModal.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showSignInModal.value = $event),
-            onClose: closeSignIn,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showSignInModal.value = $event),
             "fullscreen-on-mobile": false
           }, {
             default: withCtx(() => [
@@ -13800,7 +13832,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-20ad1bfa"]]);
+const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-cfd0512b"]]);
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "StrandsNav",
   props: {
@@ -14195,6 +14227,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const { registerHardwareKey, completeHardwareKeyRegistration, currentSession } = useStrandsAuth();
     const internalLoading = ref(false);
     const loading2 = computed(() => mfaLoading.value || internalLoading.value);
+    const showModal = computed({
+      get: () => props.show,
+      set: (value) => {
+        if (!value) {
+          emit("close");
+        }
+      }
+    });
     const step = ref(1);
     const deviceName = ref("");
     const deviceNameError = ref("");
@@ -14420,17 +14460,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$1, [
         createVNode(UiModal, {
-          open: _ctx.show,
-          onClose: closeModal,
+          modelValue: showModal.value,
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => showModal.value = $event),
           "card-class": "hardware-key-setup-modal"
         }, {
           header: withCtx(() => [
             createElementVNode("div", { class: "hardware-key-setup-header" }, [
-              _cache[4] || (_cache[4] = createElementVNode("h2", { class: "hardware-key-setup-title" }, "Setup Hardware Key", -1)),
+              _cache[5] || (_cache[5] = createElementVNode("h2", { class: "hardware-key-setup-title" }, "Setup Hardware Key", -1)),
               createElementVNode("button", {
                 onClick: closeModal,
                 class: "hardware-key-setup-close"
-              }, [..._cache[3] || (_cache[3] = [
+              }, [..._cache[4] || (_cache[4] = [
                 createElementVNode("svg", {
                   class: "hardware-key-setup-close-icon",
                   fill: "none",
@@ -14449,7 +14489,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ]),
           default: withCtx(() => [
             step.value === 1 ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
-              _cache[7] || (_cache[7] = createElementVNode("div", null, [
+              _cache[8] || (_cache[8] = createElementVNode("div", null, [
                 createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Name Your Hardware Key"),
                 createElementVNode("p", { class: "hardware-key-setup-step-description" }, ' Give your hardware key a memorable name (e.g., "YubiKey 5", "Work Security Key") ')
               ], -1)),
@@ -14467,7 +14507,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   onClick: closeModal,
                   disabled: loading2.value
                 }, {
-                  default: withCtx(() => [..._cache[5] || (_cache[5] = [
+                  default: withCtx(() => [..._cache[6] || (_cache[6] = [
                     createTextVNode(" Cancel ", -1)
                   ])]),
                   _: 1
@@ -14478,7 +14518,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   disabled: !deviceName.value.trim() || loading2.value,
                   loading: loading2.value
                 }, {
-                  default: withCtx(() => [..._cache[6] || (_cache[6] = [
+                  default: withCtx(() => [..._cache[7] || (_cache[7] = [
                     createTextVNode(" Continue ", -1)
                   ])]),
                   _: 1
@@ -14486,11 +14526,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ])
             ])) : createCommentVNode("", true),
             step.value === 2 ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
-              _cache[18] || (_cache[18] = createElementVNode("div", null, [
+              _cache[19] || (_cache[19] = createElementVNode("div", null, [
                 createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Register Hardware Key"),
                 createElementVNode("p", { class: "hardware-key-setup-step-description" }, " Insert your hardware key and follow your browser's prompts to complete registration. ")
               ], -1)),
-              _cache[19] || (_cache[19] = createElementVNode("div", { class: "hardware-key-setup-illustration" }, [
+              _cache[20] || (_cache[20] = createElementVNode("div", { class: "hardware-key-setup-illustration" }, [
                 createElementVNode("div", { class: "hardware-key-setup-illustration-content" }, [
                   createElementVNode("div", { class: "hardware-key-setup-icon-container" }, [
                     createElementVNode("svg", {
@@ -14513,7 +14553,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ], -1)),
               createElementVNode("div", _hoisted_5$1, [
                 createElementVNode("div", _hoisted_6$1, [
-                  _cache[15] || (_cache[15] = createElementVNode("svg", {
+                  _cache[16] || (_cache[16] = createElementVNode("svg", {
                     class: "hardware-key-setup-info-icon",
                     fill: "currentColor",
                     viewBox: "0 0 20 20"
@@ -14525,16 +14565,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                     })
                   ], -1)),
                   createElementVNode("div", null, [
-                    _cache[14] || (_cache[14] = createElementVNode("p", { class: "hardware-key-setup-instructions-title" }, "Setup Instructions", -1)),
+                    _cache[15] || (_cache[15] = createElementVNode("p", { class: "hardware-key-setup-instructions-title" }, "Setup Instructions", -1)),
                     createElementVNode("ul", _hoisted_7$1, [
                       props.deviceType === "passkey" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                        _cache[8] || (_cache[8] = createElementVNode("li", null, "• Your browser will prompt you to create a passkey", -1)),
-                        _cache[9] || (_cache[9] = createElementVNode("li", null, "• Use Touch ID, Face ID, Windows Hello, or PIN", -1)),
-                        _cache[10] || (_cache[10] = createElementVNode("li", null, "• Follow the prompts to complete setup", -1))
+                        _cache[9] || (_cache[9] = createElementVNode("li", null, "• Your browser will prompt you to create a passkey", -1)),
+                        _cache[10] || (_cache[10] = createElementVNode("li", null, "• Use Touch ID, Face ID, Windows Hello, or PIN", -1)),
+                        _cache[11] || (_cache[11] = createElementVNode("li", null, "• Follow the prompts to complete setup", -1))
                       ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                        _cache[11] || (_cache[11] = createElementVNode("li", null, "• Insert your hardware key into a USB port", -1)),
-                        _cache[12] || (_cache[12] = createElementVNode("li", null, "• Your browser will prompt you to interact with the key", -1)),
-                        _cache[13] || (_cache[13] = createElementVNode("li", null, "• Touch the key's button or sensor when prompted", -1))
+                        _cache[12] || (_cache[12] = createElementVNode("li", null, "• Insert your hardware key into a USB port", -1)),
+                        _cache[13] || (_cache[13] = createElementVNode("li", null, "• Your browser will prompt you to interact with the key", -1)),
+                        _cache[14] || (_cache[14] = createElementVNode("li", null, "• Touch the key's button or sensor when prompted", -1))
                       ], 64))
                     ])
                   ])
@@ -14546,7 +14586,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   onClick: _cache[1] || (_cache[1] = ($event) => step.value = 1),
                   disabled: loading2.value
                 }, {
-                  default: withCtx(() => [..._cache[16] || (_cache[16] = [
+                  default: withCtx(() => [..._cache[17] || (_cache[17] = [
                     createTextVNode(" Back ", -1)
                   ])]),
                   _: 1
@@ -14557,7 +14597,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   disabled: loading2.value,
                   loading: loading2.value
                 }, {
-                  default: withCtx(() => [..._cache[17] || (_cache[17] = [
+                  default: withCtx(() => [..._cache[18] || (_cache[18] = [
                     createTextVNode(" Register Key ", -1)
                   ])]),
                   _: 1
@@ -14572,10 +14612,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                     class: "hardware-key-setup-loader"
                   })
                 ]),
-                _cache[20] || (_cache[20] = createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Registering Hardware Key", -1)),
+                _cache[21] || (_cache[21] = createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Registering Hardware Key", -1)),
                 createElementVNode("p", _hoisted_12$1, toDisplayString(registrationMessage.value), 1)
               ]),
-              _cache[21] || (_cache[21] = createElementVNode("div", { class: "hardware-key-setup-progress-indicator" }, [
+              _cache[22] || (_cache[22] = createElementVNode("div", { class: "hardware-key-setup-progress-indicator" }, [
                 createElementVNode("div", { class: "hardware-key-setup-progress-content" }, [
                   createElementVNode("div", { class: "hardware-key-setup-progress-check" }, [
                     createElementVNode("div", { class: "hardware-key-setup-check-icon" }, [
@@ -14599,7 +14639,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ], -1))
             ])) : createCommentVNode("", true),
             step.value === 4 ? (openBlock(), createElementBlock("div", _hoisted_13$1, [
-              _cache[25] || (_cache[25] = createElementVNode("div", { class: "hardware-key-setup-success" }, [
+              _cache[26] || (_cache[26] = createElementVNode("div", { class: "hardware-key-setup-success" }, [
                 createElementVNode("div", { class: "hardware-key-setup-success-icon" }, [
                   createElementVNode("svg", {
                     class: "hardware-key-setup-success-check",
@@ -14619,7 +14659,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 createElementVNode("p", { class: "hardware-key-setup-success-message" }, " Your hardware key is now active for two-factor authentication. ")
               ], -1)),
               createElementVNode("div", _hoisted_14$1, [
-                _cache[23] || (_cache[23] = createElementVNode("div", { class: "hardware-key-setup-backup-codes-header" }, [
+                _cache[24] || (_cache[24] = createElementVNode("div", { class: "hardware-key-setup-backup-codes-header" }, [
                   createElementVNode("svg", {
                     class: "hardware-key-setup-warning-icon",
                     fill: "currentColor",
@@ -14652,7 +14692,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                     size: "sm",
                     onClick: copyBackupCodes
                   }, {
-                    default: withCtx(() => [..._cache[22] || (_cache[22] = [
+                    default: withCtx(() => [..._cache[23] || (_cache[23] = [
                       createTextVNode(" 📋 Copy Codes ", -1)
                     ])]),
                     _: 1
@@ -14664,7 +14704,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   variant: "primary",
                   onClick: finish
                 }, {
-                  default: withCtx(() => [..._cache[24] || (_cache[24] = [
+                  default: withCtx(() => [..._cache[25] || (_cache[25] = [
                     createTextVNode(" Done ", -1)
                   ])]),
                   _: 1
@@ -14673,7 +14713,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true),
             step.value === 5 ? (openBlock(), createElementBlock("div", _hoisted_19, [
               createElementVNode("div", _hoisted_20, [
-                _cache[26] || (_cache[26] = createElementVNode("div", { class: "hardware-key-setup-error-icon" }, [
+                _cache[27] || (_cache[27] = createElementVNode("div", { class: "hardware-key-setup-error-icon" }, [
                   createElementVNode("svg", {
                     class: "hardware-key-setup-error-x",
                     fill: "none",
@@ -14688,7 +14728,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                     })
                   ])
                 ], -1)),
-                _cache[27] || (_cache[27] = createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Registration Failed", -1)),
+                _cache[28] || (_cache[28] = createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Registration Failed", -1)),
                 createElementVNode("p", _hoisted_21, toDisplayString(errorMessage.value), 1)
               ]),
               createElementVNode("div", _hoisted_22, [
@@ -14696,7 +14736,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   variant: "secondary",
                   onClick: _cache[2] || (_cache[2] = ($event) => step.value = 1)
                 }, {
-                  default: withCtx(() => [..._cache[28] || (_cache[28] = [
+                  default: withCtx(() => [..._cache[29] || (_cache[29] = [
                     createTextVNode(" Start Over ", -1)
                   ])]),
                   _: 1
@@ -14705,7 +14745,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   variant: "primary",
                   onClick: closeModal
                 }, {
-                  default: withCtx(() => [..._cache[29] || (_cache[29] = [
+                  default: withCtx(() => [..._cache[30] || (_cache[30] = [
                     createTextVNode(" Close ", -1)
                   ])]),
                   _: 1
@@ -14714,12 +14754,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true)
           ]),
           _: 1
-        }, 8, ["open"])
+        }, 8, ["modelValue"])
       ]);
     };
   }
 });
-const StrandsHardwareKeySetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-32d98ee2"]]);
+const StrandsHardwareKeySetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-db74941b"]]);
 const _hoisted_1 = { class: "accui-component-scope" };
 const _hoisted_2 = { class: "mfa-setup-header" };
 const _hoisted_3 = { class: "mfa-setup-status-container" };
@@ -14844,6 +14884,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       activeMfaDevices,
       fetchMfaDevices
     } = useStrandsMfa();
+    const showModal = computed({
+      get: () => props.show,
+      set: (value) => {
+        if (!value) {
+          emit("close");
+        }
+      }
+    });
     const showTotpSetup = ref(false);
     const showEmailMfaSetup = ref(false);
     const showHardwareKeySetup = ref(false);
@@ -14883,13 +14931,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(UiModal, {
-          open: _ctx.show,
-          onClose: closeModal,
+          modelValue: showModal.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showModal.value = $event),
           "card-class": "mfa-setup-modal"
         }, {
           header: withCtx(() => [
             createElementVNode("div", _hoisted_2, [
-              _cache[4] || (_cache[4] = createElementVNode("div", null, [
+              _cache[5] || (_cache[5] = createElementVNode("div", null, [
                 createElementVNode("h2", { class: "mfa-setup-title" }, "Two-Factor Authentication"),
                 createElementVNode("p", { class: "mfa-setup-subtitle" }, "Add extra security to your account")
               ], -1)),
@@ -14907,7 +14955,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onClick: closeModal,
                 disabled: unref(loading2)
               }, {
-                default: withCtx(() => [..._cache[14] || (_cache[14] = [
+                default: withCtx(() => [..._cache[15] || (_cache[15] = [
                   createTextVNode(" Cancel ", -1)
                 ])]),
                 _: 1
@@ -14918,7 +14966,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("div", _hoisted_4, [
               unref(loading2) ? (openBlock(), createElementBlock("div", _hoisted_5, [
                 createVNode(unref(StrandsUiLoader), { size: 32 }),
-                _cache[5] || (_cache[5] = createElementVNode("span", { class: "mfa-setup-loading-text" }, "Loading MFA settings...", -1))
+                _cache[6] || (_cache[6] = createElementVNode("span", { class: "mfa-setup-loading-text" }, "Loading MFA settings...", -1))
               ])) : (openBlock(), createElementBlock("div", _hoisted_6, [
                 unref(mfaEnabled2) || unref(activeMfaDevices).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_7, [
                   createElementVNode("div", _hoisted_8, [
@@ -14928,14 +14976,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         class: "mfa-setup-shield-icon"
                       })
                     ]),
-                    _cache[6] || (_cache[6] = createElementVNode("div", null, [
+                    _cache[7] || (_cache[7] = createElementVNode("div", null, [
                       createElementVNode("span", { class: "mfa-setup-status-title" }, "2FA is currently enabled on your account"),
                       createElementVNode("p", { class: "mfa-setup-status-description" }, "Your account has additional security protection")
                     ], -1))
                   ])
                 ])) : createCommentVNode("", true),
                 createElementVNode("div", null, [
-                  _cache[11] || (_cache[11] = createElementVNode("h3", { class: "mfa-setup-methods-title" }, "Choose Your Authentication Method", -1)),
+                  _cache[12] || (_cache[12] = createElementVNode("h3", { class: "mfa-setup-methods-title" }, "Choose Your Authentication Method", -1)),
                   createElementVNode("div", _hoisted_10, [
                     createElementVNode("div", {
                       class: "mfa-setup-method-card",
@@ -14948,7 +14996,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             class: "mfa-setup-icon-svg"
                           })
                         ]),
-                        _cache[8] || (_cache[8] = createElementVNode("div", { class: "mfa-setup-method-info" }, [
+                        _cache[9] || (_cache[9] = createElementVNode("div", { class: "mfa-setup-method-info" }, [
                           createElementVNode("h4", { class: "mfa-setup-method-title" }, "Authenticator App"),
                           createElementVNode("p", { class: "mfa-setup-method-description" }, "Use Google Authenticator, Authy, or any TOTP-compatible app to generate secure codes")
                         ], -1)),
@@ -14959,7 +15007,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           disabled: unref(loading2),
                           class: "mfa-setup-method-button"
                         }, {
-                          default: withCtx(() => [..._cache[7] || (_cache[7] = [
+                          default: withCtx(() => [..._cache[8] || (_cache[8] = [
                             createTextVNode(" Setup Authenticator ", -1)
                           ])]),
                           _: 1
@@ -14977,7 +15025,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             class: "mfa-setup-icon-svg"
                           })
                         ]),
-                        _cache[10] || (_cache[10] = createElementVNode("div", { class: "mfa-setup-method-info" }, [
+                        _cache[11] || (_cache[11] = createElementVNode("div", { class: "mfa-setup-method-info" }, [
                           createElementVNode("h4", { class: "mfa-setup-method-title" }, "Email Verification"),
                           createElementVNode("p", { class: "mfa-setup-method-description" }, "Receive verification codes directly in your email inbox for easy access")
                         ], -1)),
@@ -14988,7 +15036,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           disabled: unref(loading2),
                           class: "mfa-setup-method-button"
                         }, {
-                          default: withCtx(() => [..._cache[9] || (_cache[9] = [
+                          default: withCtx(() => [..._cache[10] || (_cache[10] = [
                             createTextVNode(" Setup Email 2FA ", -1)
                           ])]),
                           _: 1
@@ -15000,7 +15048,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 unref(activeMfaDevices).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_15, [
                   createElementVNode("div", _hoisted_16, [
                     createElementVNode("div", null, [
-                      _cache[12] || (_cache[12] = createElementVNode("h3", { class: "mfa-setup-manage-title" }, "Manage Existing Methods", -1)),
+                      _cache[13] || (_cache[13] = createElementVNode("h3", { class: "mfa-setup-manage-title" }, "Manage Existing Methods", -1)),
                       createElementVNode("p", _hoisted_17, toDisplayString(unref(activeMfaDevices).length) + " device(s) currently active", 1)
                     ]),
                     createVNode(unref(StrandsUiButton), {
@@ -15014,7 +15062,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           size: 16,
                           class: "mfa-setup-manage-icon"
                         }),
-                        _cache[13] || (_cache[13] = createTextVNode(" Manage Devices ", -1))
+                        _cache[14] || (_cache[14] = createTextVNode(" Manage Devices ", -1))
                       ]),
                       _: 1
                     }, 8, ["disabled"])
@@ -15024,36 +15072,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 1
-        }, 8, ["open"]),
+        }, 8, ["modelValue"]),
         showTotpSetup.value ? (openBlock(), createBlock(StrandsTotpSetupModal, {
           key: 0,
           show: showTotpSetup.value,
-          onClose: _cache[0] || (_cache[0] = ($event) => showTotpSetup.value = false),
+          onClose: _cache[1] || (_cache[1] = ($event) => showTotpSetup.value = false),
           onSuccess: handleSetupSuccess
         }, null, 8, ["show"])) : createCommentVNode("", true),
         showEmailMfaSetup.value ? (openBlock(), createBlock(StrandsEmailMfaSetupModal, {
           key: 1,
           show: showEmailMfaSetup.value,
-          onClose: _cache[1] || (_cache[1] = ($event) => showEmailMfaSetup.value = false),
+          onClose: _cache[2] || (_cache[2] = ($event) => showEmailMfaSetup.value = false),
           onSuccess: handleSetupSuccess
         }, null, 8, ["show"])) : createCommentVNode("", true),
         showHardwareKeySetup.value ? (openBlock(), createBlock(StrandsHardwareKeySetupModal, {
           key: 2,
           show: showHardwareKeySetup.value,
-          onClose: _cache[2] || (_cache[2] = ($event) => showHardwareKeySetup.value = false),
+          onClose: _cache[3] || (_cache[3] = ($event) => showHardwareKeySetup.value = false),
           onSuccess: handleSetupSuccess
         }, null, 8, ["show"])) : createCommentVNode("", true),
         showMfaModal.value ? (openBlock(), createBlock(StrandsMfaModal, {
           key: 3,
           show: showMfaModal.value,
-          onClose: _cache[3] || (_cache[3] = ($event) => showMfaModal.value = false),
+          onClose: _cache[4] || (_cache[4] = ($event) => showMfaModal.value = false),
           onMfaUpdated: handleMfaUpdated
         }, null, 8, ["show"])) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const StrandsMFASetup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fcdacbc6"]]);
+const StrandsMFASetup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5e4af8e5"]]);
 const components = {
   StrandsUiAlert,
   StrandsUiButton,