@strands.gg/accui 2.11.3 → 2.11.5

package/dist/index.es.js

@@ -92,7 +92,7 @@ const _hoisted_4$G = {
   viewBox: "0 0 20 20",
   "aria-hidden": "true"
 };
-const _hoisted_5$A = ["d"];
+const _hoisted_5$B = ["d"];
 const _hoisted_6$v = { class: "alert-text-container" };
 const _hoisted_7$s = {
   key: 0,
@@ -146,7 +146,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
                   "fill-rule": "evenodd",
                   d: iconPath.value,
                   "clip-rule": "evenodd"
-                }, null, 8, _hoisted_5$A)
+                }, null, 8, _hoisted_5$B)
               ]))
             ]),
             createElementVNode("div", _hoisted_6$v, [
@@ -197,7 +197,7 @@ const _hoisted_1$S = {
 const _hoisted_2$K = ["width", "height"];
 const _hoisted_3$H = ["d"];
 const _hoisted_4$F = ["stroke-width"];
-const _hoisted_5$z = ["stroke-width"];
+const _hoisted_5$A = ["stroke-width"];
 const _hoisted_6$u = ["width", "height"];
 const _hoisted_7$r = {
   key: 3,
@@ -266,7 +266,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               class: "loader-animated-path"
-            }, null, 8, _hoisted_5$z)
+            }, null, 8, _hoisted_5$A)
           ], 8, _hoisted_2$K))
         ])) : _ctx.variant === "circle" ? (openBlock(), createElementBlock("div", {
           key: 1,
@@ -388,7 +388,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiButtonContent = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-5aa4146e"]]);
+const UiButtonContent = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-97962cf6"]]);
 const _hoisted_1$Q = ["href", "target", "rel"];
 const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "UiButton.Anchor",
@@ -582,7 +582,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$P = ["type", "disabled"];
+const _hoisted_1$P = ["type", "disabled", "tabindex"];
 const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "UiButton",
   props: {
@@ -599,7 +599,8 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     squircle: { type: Boolean, default: false },
     to: {},
     href: {},
-    external: { type: Boolean, default: false }
+    external: { type: Boolean, default: false },
+    tabindex: {}
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
@@ -642,6 +643,12 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
         fontWeight: props.fontWeight
       };
     });
+    const effectiveTabindex = computed(() => {
+      if (props.disabled || props.loading) {
+        return -1;
+      }
+      return props.tabindex ?? void 0;
+    });
     return (_ctx, _cache) => {
       return !_ctx.to ? (openBlock(), createElementBlock("button", {
         key: 0,
@@ -649,6 +656,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
         disabled: _ctx.disabled || _ctx.loading,
         class: normalizeClass(buttonClassString.value),
         style: normalizeStyle(buttonStyles.value),
+        tabindex: effectiveTabindex.value,
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
       }, [
         createVNode(UiButtonContent, {
@@ -689,6 +697,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
         icon: _ctx.icon,
         "button-classes": buttonClasses.value,
         "button-styles": buttonStyles.value,
+        tabindex: effectiveTabindex.value,
         onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", $event))
       }, createSlots({
         icon: withCtx(() => [
@@ -713,7 +722,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           ]),
           key: "1"
         } : void 0
-      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles"])) : isVueRouterAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$W, {
+      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles", "tabindex"])) : isVueRouterAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$W, {
         key: 2,
         to: _ctx.to,
         disabled: _ctx.disabled,
@@ -722,6 +731,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
         icon: _ctx.icon,
         "button-classes": buttonClasses.value,
         "button-styles": buttonStyles.value,
+        tabindex: effectiveTabindex.value,
         onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("click", $event))
       }, createSlots({
         icon: withCtx(() => [
@@ -746,7 +756,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           ]),
           key: "1"
         } : void 0
-      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles"])) : (openBlock(), createBlock(_sfc_main$Y, {
+      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles", "tabindex"])) : (openBlock(), createBlock(_sfc_main$Y, {
         key: 3,
         to: _ctx.to,
         href: _ctx.href,
@@ -757,6 +767,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
         icon: _ctx.icon,
         "button-classes": buttonClasses.value,
         "button-styles": buttonStyles.value,
+        tabindex: effectiveTabindex.value,
         onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("click", $event))
       }, createSlots({
         icon: withCtx(() => [
@@ -781,11 +792,11 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           ]),
           key: "1"
         } : void 0
-      ]), 1032, ["to", "href", "external", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles"]));
+      ]), 1032, ["to", "href", "external", "disabled", "loading", "loading-text", "icon", "button-classes", "button-styles", "tabindex"]));
     };
   }
 });
-const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-a5942725"]]);
+const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-5844ab0f"]]);
 const CompoundUiButton = StrandsUiButton;
 CompoundUiButton.Content = UiButtonContent;
 CompoundUiButton.Anchor = _sfc_main$Y;
@@ -807,7 +818,7 @@ const _hoisted_4$D = {
   key: 0,
   class: "ui-card-subtitle"
 };
-const _hoisted_5$y = {
+const _hoisted_5$z = {
   key: 1,
   class: "ui-card-content"
 };
@@ -855,7 +866,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "actions", {}, void 0, true)
           ], true)
         ])) : createCommentVNode("", true),
-        _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_5$y, [
+        _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_5$z, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ])) : createCommentVNode("", true),
         _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_6$t, [
@@ -1423,7 +1434,7 @@ const _hoisted_1$N = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$H = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck"];
+const _hoisted_2$H = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck", "tabindex"];
 const _hoisted_3$E = {
   key: 1,
   class: "input-trailing-icon"
@@ -1432,7 +1443,7 @@ const _hoisted_4$C = {
   key: 2,
   class: "input-trailing-icon"
 };
-const _hoisted_5$x = {
+const _hoisted_5$y = {
   key: 3,
   class: "input-trailing-icon"
 };
@@ -1455,7 +1466,8 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     fullWidth: { type: Boolean },
     inputId: {},
     error: { type: [Boolean, String, Error], default: false },
-    size: { default: "md" }
+    size: { default: "md" },
+    tabindex: {}
   },
   emits: ["update:modelValue", "blur", "focus", "keydown"],
   setup(__props, { emit: __emit }) {
@@ -1472,6 +1484,10 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     const hasTrailingIcon = computed(() => {
       return slots["trailing-icon"] || props.type === "password" || props.type === "search" && props.modelValue;
     });
+    const buttonTabindex = computed(() => {
+      if (props.tabindex === void 0) return;
+      return props.tabindex + 1;
+    });
     const wrapperClasses = computed(() => {
       const classes = [];
       if (props.error) classes.push("input-error");
@@ -1537,6 +1553,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
           step: _ctx.step,
           autocomplete: _ctx.autocomplete,
           spellcheck: _ctx.spellcheck,
+          tabindex: _ctx.tabindex,
           class: normalizeClass(["input-base", paddingClasses.value]),
           onInput: handleInput,
           onBlur: handleBlur,
@@ -1550,6 +1567,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             size: "sm",
             icon: "",
             squircle: "",
+            tabindex: buttonTabindex.value,
             "aria-label": showPassword.value ? "Hide password" : "Show password",
             onClick: togglePasswordVisibility
           }, {
@@ -1557,7 +1575,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
               showPassword.value ? (openBlock(), createBlock(unref(EyeOff), { key: 0 })) : (openBlock(), createBlock(unref(Eye), { key: 1 }))
             ]),
             _: 1
-          }, 8, ["color", "variant", "aria-label"])
+          }, 8, ["color", "variant", "tabindex", "aria-label"])
         ])) : _ctx.type === "search" && _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", _hoisted_4$C, [
           createVNode(StrandsUiButton, {
             color: "danger",
@@ -1565,6 +1583,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             size: "sm",
             icon: "",
             squircle: "",
+            tabindex: buttonTabindex.value,
             "aria-label": "Clear search",
             onClick: clearSearchValue
           }, {
@@ -1572,15 +1591,15 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
               createVNode(unref(X))
             ]),
             _: 1
-          })
-        ])) : hasTrailingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_5$x, [
+          }, 8, ["tabindex"])
+        ])) : hasTrailingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_5$y, [
           renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const UiInputText = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-94fe77ac"]]);
+const UiInputText = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-67ba177d"]]);
 const _hoisted_1$M = {
   key: 0,
   class: "input-leading-icon"
@@ -1609,7 +1628,8 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     fullWidth: { type: Boolean },
     inputId: {},
     error: { type: [Boolean, String, Error], default: false },
-    size: { default: "md" }
+    size: { default: "md" },
+    tabindex: {}
   },
   emits: ["update:modelValue", "blur", "focus", "keydown"],
   setup(__props, { emit: __emit }) {
@@ -1897,13 +1917,13 @@ const _hoisted_1$L = {
   key: 0,
   class: "input-leading-icon"
 };
-const _hoisted_2$F = ["aria-expanded", "aria-controls"];
+const _hoisted_2$F = ["tabindex", "aria-expanded", "aria-controls"];
 const _hoisted_3$C = { class: "input-select-value" };
 const _hoisted_4$B = {
   key: 0,
   class: "input-select-text"
 };
-const _hoisted_5$w = {
+const _hoisted_5$x = {
   key: 1,
   class: "input-select-placeholder"
 };
@@ -1951,7 +1971,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     fullWidth: { type: Boolean },
     inputId: {},
     error: { type: [Boolean, String, Error], default: false },
-    size: { default: "md" }
+    size: { default: "md" },
+    tabindex: {}
   },
   emits: ["update:modelValue", "blur", "focus"],
   setup(__props, { emit: __emit }) {
@@ -2046,6 +2067,10 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       }
       return "Search...";
     });
+    const searchTabindex = computed(() => {
+      if (props.tabindex === void 0) return;
+      return props.tabindex + 1;
+    });
     const wrapperClasses = computed(() => {
       const classes = [];
       if (props.error) classes.push("input-error");
@@ -2250,14 +2275,14 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["input-select-trigger", { "input-select-open": dropdownState.value.isOpen }]),
             onClick: toggleDropdown,
             onKeydown: handleTriggerKeydown,
-            tabindex: "0",
+            tabindex: _ctx.tabindex,
             role: "combobox",
             "aria-expanded": dropdownState.value.isOpen,
             "aria-haspopup": true,
             "aria-controls": dropdownId.value
           }, [
             createElementVNode("div", _hoisted_3$C, [
-              displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$B, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$w, toDisplayString(_ctx.placeholder || "Select an option..."), 1))
+              displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$B, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$x, toDisplayString(_ctx.placeholder || "Select an option..."), 1))
             ]),
             createElementVNode("div", {
               class: normalizeClass(["input-select-arrow", { "input-select-arrow-open": dropdownState.value.isOpen }])
@@ -2291,13 +2316,14 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
                 type: "search",
                 placeholder: computedSearchPlaceholder.value,
                 size: "sm",
+                tabindex: searchTabindex.value,
                 onKeydown: handleSearchKeydown
               }, {
                 "leading-icon": withCtx(() => [
                   createVNode(unref(Search))
                 ]),
                 _: 1
-              }, 8, ["modelValue", "placeholder"])
+              }, 8, ["modelValue", "placeholder", "tabindex"])
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
               class: "input-dropdown-options",
@@ -2338,12 +2364,12 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-830c63a5"]]);
+const UiInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-f0fb5b75"]]);
 const _hoisted_1$K = { class: "input-leading-icon" };
 const _hoisted_2$E = ["src"];
 const _hoisted_3$B = ["id", "accept", "multiple", "disabled", "required"];
 const _hoisted_4$A = { class: "input-file-content" };
-const _hoisted_5$v = {
+const _hoisted_5$w = {
   key: 0,
   class: "input-file-prompt"
 };
@@ -2386,7 +2412,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     fullWidth: { type: Boolean },
     inputId: {},
     error: { type: [Boolean, String, Error], default: false },
-    size: { default: "md" }
+    size: { default: "md" },
+    tabindex: {}
   },
   emits: ["update:modelValue", "file-error", "blur", "focus"],
   setup(__props, { emit: __emit }) {
@@ -2584,7 +2611,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             onFocus: handleFocus
           }, null, 40, _hoisted_3$B),
           createElementVNode("div", _hoisted_4$A, [
-            selectedFiles.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$v, [
+            selectedFiles.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$w, [
               createElementVNode("div", _hoisted_6$r, toDisplayString(_ctx.dragDropText || "Click to select or drag and drop"), 1),
               _ctx.accept ? (openBlock(), createElementBlock("div", _hoisted_7$p, toDisplayString(_ctx.accept), 1)) : createCommentVNode("", true)
             ])) : (openBlock(), createElementBlock("div", _hoisted_8$n, [
@@ -2630,7 +2657,7 @@ const _hoisted_4$z = {
   key: 1,
   class: "tabs-after"
 };
-const _hoisted_5$u = ["aria-labelledby"];
+const _hoisted_5$v = ["aria-labelledby"];
 const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "UiTabs",
   props: {
@@ -3015,12 +3042,12 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           id: "tabpanel"
         }, [
           renderSlot(_ctx.$slots, "content", { activeTab: activeTab.value }, void 0, true)
-        ], 10, _hoisted_5$u)) : createCommentVNode("", true)
+        ], 10, _hoisted_5$v)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-edff91a5"]]);
+const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-901716e3"]]);
 const _hoisted_1$I = {
   key: 0,
   class: "ui-divider-text"
@@ -3096,7 +3123,7 @@ const _hoisted_4$y = {
   key: 0,
   class: "datetime-picker-value"
 };
-const _hoisted_5$t = {
+const _hoisted_5$u = {
   key: 1,
   class: "datetime-picker-placeholder"
 };
@@ -3119,8 +3146,8 @@ const _hoisted_14$j = {
   class: "datetime-picker-panel datetime-picker-time-panel"
 };
 const _hoisted_15$g = { class: "time-selector" };
-const _hoisted_16$g = { class: "time-column" };
-const _hoisted_17$f = { class: "time-scroll" };
+const _hoisted_16$f = { class: "time-column" };
+const _hoisted_17$e = { class: "time-scroll" };
 const _hoisted_18$e = { class: "time-column" };
 const _hoisted_19$d = { class: "time-scroll" };
 const _hoisted_20$b = {
@@ -3128,7 +3155,7 @@ const _hoisted_20$b = {
   class: "time-column"
 };
 const _hoisted_21$b = { class: "time-scroll" };
-const _hoisted_22$9 = { class: "datetime-picker-footer" };
+const _hoisted_22$8 = { class: "datetime-picker-footer" };
 const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "UiDateTimePicker",
   props: {
@@ -3475,7 +3502,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
             _ctx.type === "date" ? (openBlock(), createBlock(unref(Calendar), { key: 0 })) : _ctx.type === "time" ? (openBlock(), createBlock(unref(Clock), { key: 1 })) : (openBlock(), createBlock(unref(CalendarClock), { key: 2 }))
           ]),
           createElementVNode("div", _hoisted_3$z, [
-            displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$y, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$t, toDisplayString(_ctx.placeholder || getDefaultPlaceholder()), 1))
+            displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$y, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$u, toDisplayString(_ctx.placeholder || getDefaultPlaceholder()), 1))
           ]),
           _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -3597,9 +3624,9 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true),
             showTimePanel.value ? (openBlock(), createElementBlock("div", _hoisted_14$j, [
               createElementVNode("div", _hoisted_15$g, [
-                createElementVNode("div", _hoisted_16$g, [
+                createElementVNode("div", _hoisted_16$f, [
                   _cache[6] || (_cache[6] = createElementVNode("label", { class: "time-label" }, "Hour", -1)),
-                  createElementVNode("div", _hoisted_17$f, [
+                  createElementVNode("div", _hoisted_17$e, [
                     (openBlock(true), createElementBlock(Fragment$1, null, renderList(hours.value, (hour) => {
                       return openBlock(), createBlock(StrandsUiButton, {
                         key: hour,
@@ -3671,7 +3698,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
               ])
             ])) : createCommentVNode("", true),
             createVNode(UiDivider),
-            createElementVNode("div", _hoisted_22$9, [
+            createElementVNode("div", _hoisted_22$8, [
               createVNode(StrandsUiButton, {
                 onClick: selectNow,
                 color: "primary",
@@ -3735,7 +3762,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     fullWidth: { type: Boolean },
     inputId: {},
     error: { type: [Boolean, String, Error], default: false },
-    size: { default: "md" }
+    size: { default: "md" },
+    tabindex: {}
   },
   emits: ["update:modelValue", "change", "blur", "focus", "keydown"],
   setup(__props, { emit: __emit }) {
@@ -3780,7 +3808,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     fullWidth: { type: Boolean },
     inputId: {},
     error: { type: [Boolean, String, Error], default: false },
-    size: { default: "md" }
+    size: { default: "md" },
+    tabindex: {}
   },
   emits: ["update:modelValue", "change", "blur", "focus", "keydown"],
   setup(__props, { emit: __emit }) {
@@ -3827,7 +3856,8 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     fullWidth: { type: Boolean },
     inputId: {},
     error: { type: [Boolean, String, Error], default: false },
-    size: { default: "md" }
+    size: { default: "md" },
+    tabindex: {}
   },
   emits: ["update:modelValue", "change", "blur", "focus", "keydown"],
   setup(__props, { emit: __emit }) {
@@ -24815,7 +24845,7 @@ const _hoisted_1$G = { class: "input-richtext-toolbar" };
 const _hoisted_2$B = { class: "input-richtext-group" };
 const _hoisted_3$y = { class: "input-richtext-group" };
 const _hoisted_4$x = { class: "input-richtext-group" };
-const _hoisted_5$s = { class: "input-richtext-group" };
+const _hoisted_5$t = { class: "input-richtext-group" };
 const _hoisted_6$p = { class: "input-richtext-group" };
 const _hoisted_7$n = { class: "input-richtext-editor-wrapper" };
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
@@ -24833,7 +24863,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     fullWidth: { type: Boolean },
     inputId: {},
     error: { type: [Boolean, String, Error], default: false },
-    size: {}
+    size: {},
+    tabindex: {}
   },
   emits: ["update:modelValue", "blur", "focus"],
   setup(__props, { emit: __emit }) {
@@ -25065,7 +25096,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             spacing: "28px",
             margin: "4px"
           }),
-          createElementVNode("div", _hoisted_5$s, [
+          createElementVNode("div", _hoisted_5$t, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive("bulletList") ? "primary" : "secondary",
               size: "sm",
@@ -25195,7 +25226,7 @@ const _hoisted_4$w = {
   key: 1,
   class: "pincode-divider"
 };
-const _hoisted_5$r = {
+const _hoisted_5$s = {
   key: 1,
   class: "pincode-icon pincode-icon-trailing"
 };
@@ -25215,7 +25246,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     fullWidth: { type: Boolean },
     inputId: {},
     error: { type: [Boolean, String, Error] },
-    size: { default: "md" }
+    size: { default: "md" },
+    tabindex: {}
   },
   emits: ["update:modelValue", "blur", "focus", "complete"],
   setup(__props, { emit: __emit }) {
@@ -25400,7 +25432,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
                 value: values.value[index - 1],
                 disabled: _ctx.disabled,
                 readonly: _ctx.readonly,
-                tabindex: _ctx.disabled ? -1 : 0,
+                tabindex: _ctx.disabled ? -1 : void 0,
                 "data-index": index - 1,
                 maxlength: "1",
                 onInput: ($event) => handleInput($event, index - 1),
@@ -25415,7 +25447,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
               }, dividerProps.value, { class: "pincode-custom-divider" }), null, 16)) : shouldShowDivider(index) ? (openBlock(), createElementBlock("span", _hoisted_4$w, toDisplayString(dividerCharacter.value), 1)) : createCommentVNode("", true)
             ], 64);
           }), 128)),
-          _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_5$r, [
+          _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_5$s, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ])
@@ -25423,18 +25455,22 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputPincode = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-481de9a3"]]);
+const UiInputPincode = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-dc5d46fa"]]);
 const _hoisted_1$E = ["for"];
 const _hoisted_2$z = {
   key: 0,
   class: "input-required"
 };
 const _hoisted_3$w = {
-  key: 10,
-  class: "input-error-text"
+  key: 1,
+  class: "input-hint"
 };
 const _hoisted_4$v = {
-  key: 11,
+  key: 2,
+  class: "input-error-text"
+};
+const _hoisted_5$r = {
+  key: 3,
   class: "input-help-text"
 };
 const _sfc_main$H = /* @__PURE__ */ defineComponent({
@@ -25457,6 +25493,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     inputId: {},
     error: { type: [Boolean, String, Error] },
     size: {},
+    tabindex: {},
     options: {},
     multiple: { type: Boolean },
     searchable: { type: Boolean },
@@ -25519,239 +25556,254 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
         props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           for: inputId.value,
+          tabindex: "-1",
           class: "input-label"
         }, [
           createTextVNode(toDisplayString(props.label) + " ", 1),
           props.required ? (openBlock(), createElementBlock("span", _hoisted_2$z, "*")) : createCommentVNode("", true)
         ], 8, _hoisted_1$E)) : createCommentVNode("", true),
-        isTextInput.value ? (openBlock(), createBlock(UiInputText, {
-          key: 1,
-          "model-value": _ctx.modelValue,
-          type: _ctx.type,
-          placeholder: _ctx.placeholder,
-          disabled: _ctx.disabled,
-          readonly: _ctx.readonly,
-          required: props.required,
-          min: props.min,
-          max: props.max,
-          step: props.step,
-          autocomplete: props.autocomplete,
-          spellcheck: props.spellcheck,
-          "input-id": inputId.value,
-          error: Boolean(props.error && props.error !== true && props.error !== ""),
-          size: props.size,
-          "onUpdate:modelValue": handleInput,
-          onBlur: handleBlur,
-          onFocus: handleFocus,
-          onKeydown: handleKeydown
-        }, createSlots({ _: 2 }, [
-          _ctx.$slots["leading-icon"] ? {
-            name: "leading-icon",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots["trailing-icon"] ? {
-            name: "trailing-icon",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-            ]),
-            key: "1"
-          } : void 0
-        ]), 1032, ["model-value", "type", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck", "input-id", "error", "size"])) : _ctx.type === "textarea" ? (openBlock(), createBlock(UiInputTextarea, {
-          key: 2,
-          "model-value": _ctx.modelValue,
-          placeholder: _ctx.placeholder,
-          disabled: _ctx.disabled,
-          readonly: _ctx.readonly,
-          required: props.required,
-          rows: props.rows,
-          cols: props.cols,
-          maxlength: props.maxlength,
-          autocomplete: props.autocomplete,
-          spellcheck: props.spellcheck,
-          resizable: props.resizable,
-          "input-id": inputId.value,
-          error: props.error,
-          size: props.size,
-          "onUpdate:modelValue": handleInput,
-          onBlur: handleBlur,
-          onFocus: handleFocus,
-          onKeydown: handleKeydown
-        }, createSlots({ _: 2 }, [
-          _ctx.$slots["leading-icon"] ? {
-            name: "leading-icon",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots["trailing-icon"] ? {
-            name: "trailing-icon",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-            ]),
-            key: "1"
-          } : void 0
-        ]), 1032, ["model-value", "placeholder", "disabled", "readonly", "required", "rows", "cols", "maxlength", "autocomplete", "spellcheck", "resizable", "input-id", "error", "size"])) : _ctx.type === "select" ? (openBlock(), createBlock(UiInputSelect, {
-          key: 3,
-          "model-value": _ctx.modelValue,
-          options: props.options,
-          placeholder: _ctx.placeholder,
-          disabled: _ctx.disabled,
-          multiple: props.multiple,
-          searchable: props.searchable,
-          "allow-insert": props.allowInsert,
-          "max-dropdown-height": props.maxDropdownHeight,
-          "no-options-text": props.noOptionsText,
-          "search-placeholder": props.searchPlaceholder,
-          "input-id": inputId.value,
-          error: props.error,
-          size: props.size,
-          "onUpdate:modelValue": handleInput,
-          onBlur: handleBlur,
-          onFocus: handleFocus
-        }, createSlots({ _: 2 }, [
-          _ctx.$slots["leading-icon"] ? {
-            name: "leading-icon",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots["trailing-icon"] ? {
-            name: "trailing-icon",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-            ]),
-            key: "1"
-          } : void 0
-        ]), 1032, ["model-value", "options", "placeholder", "disabled", "multiple", "searchable", "allow-insert", "max-dropdown-height", "no-options-text", "search-placeholder", "input-id", "error", "size"])) : _ctx.type === "file" ? (openBlock(), createBlock(UiInputFile, {
-          key: 4,
-          "model-value": _ctx.modelValue,
-          accept: props.accept,
-          multiple: props.multiple,
-          "max-file-size": props.maxFileSize,
-          "drag-drop-text": props.dragDropText,
-          "selected-text": props.selectedText,
-          disabled: _ctx.disabled,
-          required: props.required,
-          "input-id": inputId.value,
-          error: props.error,
-          size: props.size,
-          "onUpdate:modelValue": handleInput,
-          onFileError: handleFileError,
-          onBlur: handleBlur,
-          onFocus: handleFocus
-        }, createSlots({ _: 2 }, [
-          _ctx.$slots["leading-icon"] ? {
-            name: "leading-icon",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots["trailing-icon"] ? {
-            name: "trailing-icon",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-            ]),
-            key: "1"
-          } : void 0
-        ]), 1032, ["model-value", "accept", "multiple", "max-file-size", "drag-drop-text", "selected-text", "disabled", "required", "input-id", "error", "size"])) : _ctx.type === "date" ? (openBlock(), createBlock(_sfc_main$M, {
-          key: 5,
-          "model-value": _ctx.modelValue,
-          placeholder: _ctx.placeholder,
-          disabled: _ctx.disabled,
-          readonly: _ctx.readonly,
-          required: props.required,
-          min: props.min,
-          max: props.max,
-          "input-id": inputId.value,
-          error: props.error,
-          size: props.size,
-          "onUpdate:modelValue": handleInput,
-          onBlur: handleBlur,
-          onFocus: handleFocus
-        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "min", "max", "input-id", "error", "size"])) : _ctx.type === "time" ? (openBlock(), createBlock(_sfc_main$L, {
-          key: 6,
-          "model-value": _ctx.modelValue,
-          placeholder: _ctx.placeholder,
-          disabled: _ctx.disabled,
-          readonly: _ctx.readonly,
-          required: props.required,
-          "input-id": inputId.value,
-          error: props.error,
-          size: props.size,
-          "onUpdate:modelValue": handleInput,
-          onBlur: handleBlur,
-          onFocus: handleFocus
-        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "input-id", "error", "size"])) : _ctx.type === "datetime" ? (openBlock(), createBlock(_sfc_main$K, {
-          key: 7,
-          "model-value": _ctx.modelValue,
-          placeholder: _ctx.placeholder,
-          disabled: _ctx.disabled,
-          readonly: _ctx.readonly,
-          required: props.required,
-          min: props.min,
-          max: props.max,
-          "input-id": inputId.value,
-          error: props.error,
-          size: props.size,
-          "onUpdate:modelValue": handleInput,
-          onBlur: handleBlur,
-          onFocus: handleFocus
-        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "min", "max", "input-id", "error", "size"])) : _ctx.type === "richtext" ? (openBlock(), createBlock(UiInputRichText, {
-          key: 8,
-          "model-value": _ctx.modelValue,
-          placeholder: _ctx.placeholder,
-          disabled: _ctx.disabled,
-          readonly: _ctx.readonly,
-          "input-id": inputId.value,
-          error: props.error,
-          "min-height": props.minHeight,
-          "max-height": props.maxHeight,
-          "onUpdate:modelValue": handleInput,
-          onBlur: handleBlur,
-          onFocus: handleFocus
-        }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "input-id", "error", "min-height", "max-height"])) : _ctx.type === "pincode" ? (openBlock(), createBlock(UiInputPincode, {
-          key: 9,
-          "model-value": _ctx.modelValue,
-          "max-length": props.maxLength || 6,
-          variant: props.variant || "numeric",
-          divider: props.divider,
-          disabled: _ctx.disabled,
-          readonly: _ctx.readonly,
-          "input-id": inputId.value,
-          error: props.error,
-          size: props.size,
-          "onUpdate:modelValue": handleInput,
-          onBlur: handleBlur,
-          onFocus: handleFocus,
-          onComplete: handlePincodeComplete
-        }, createSlots({ _: 2 }, [
-          _ctx.$slots["leading-icon"] ? {
-            name: "leading-icon",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots["trailing-icon"] ? {
-            name: "trailing-icon",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-            ]),
-            key: "1"
-          } : void 0
-        ]), 1032, ["model-value", "max-length", "variant", "divider", "disabled", "readonly", "input-id", "error", "size"])) : createCommentVNode("", true),
-        props.error && props.error !== true ? (openBlock(), createElementBlock("p", _hoisted_3$w, toDisplayString(typeof props.error === "string" ? props.error : props.error?.message || String(props.error)), 1)) : props.helpText ? (openBlock(), createElementBlock("p", _hoisted_4$v, toDisplayString(props.helpText), 1)) : createCommentVNode("", true)
+        createElementVNode("div", null, [
+          isTextInput.value ? (openBlock(), createBlock(UiInputText, {
+            key: 0,
+            "model-value": _ctx.modelValue,
+            type: _ctx.type,
+            placeholder: _ctx.placeholder,
+            disabled: _ctx.disabled,
+            readonly: _ctx.readonly,
+            required: props.required,
+            min: props.min,
+            max: props.max,
+            step: props.step,
+            autocomplete: props.autocomplete,
+            spellcheck: props.spellcheck,
+            "input-id": inputId.value,
+            error: Boolean(props.error && props.error !== true && props.error !== ""),
+            size: props.size,
+            tabindex: _ctx.tabindex,
+            "onUpdate:modelValue": handleInput,
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+            onKeydown: handleKeydown
+          }, createSlots({ _: 2 }, [
+            _ctx.$slots["leading-icon"] ? {
+              name: "leading-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["trailing-icon"] ? {
+              name: "trailing-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["model-value", "type", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "autocomplete", "spellcheck", "input-id", "error", "size", "tabindex"])) : _ctx.type === "textarea" ? (openBlock(), createBlock(UiInputTextarea, {
+            key: 1,
+            "model-value": _ctx.modelValue,
+            placeholder: _ctx.placeholder,
+            disabled: _ctx.disabled,
+            readonly: _ctx.readonly,
+            required: props.required,
+            rows: props.rows,
+            cols: props.cols,
+            maxlength: props.maxlength,
+            autocomplete: props.autocomplete,
+            spellcheck: props.spellcheck,
+            resizable: props.resizable,
+            "input-id": inputId.value,
+            error: props.error,
+            size: props.size,
+            tabindex: _ctx.tabindex,
+            "onUpdate:modelValue": handleInput,
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+            onKeydown: handleKeydown
+          }, createSlots({ _: 2 }, [
+            _ctx.$slots["leading-icon"] ? {
+              name: "leading-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["trailing-icon"] ? {
+              name: "trailing-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["model-value", "placeholder", "disabled", "readonly", "required", "rows", "cols", "maxlength", "autocomplete", "spellcheck", "resizable", "input-id", "error", "size", "tabindex"])) : _ctx.type === "select" ? (openBlock(), createBlock(UiInputSelect, {
+            key: 2,
+            "model-value": _ctx.modelValue,
+            options: props.options,
+            placeholder: _ctx.placeholder,
+            disabled: _ctx.disabled,
+            multiple: props.multiple,
+            searchable: props.searchable,
+            "allow-insert": props.allowInsert,
+            "max-dropdown-height": props.maxDropdownHeight,
+            "no-options-text": props.noOptionsText,
+            "search-placeholder": props.searchPlaceholder,
+            "input-id": inputId.value,
+            error: props.error,
+            size: props.size,
+            tabindex: _ctx.tabindex,
+            "onUpdate:modelValue": handleInput,
+            onBlur: handleBlur,
+            onFocus: handleFocus
+          }, createSlots({ _: 2 }, [
+            _ctx.$slots["leading-icon"] ? {
+              name: "leading-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["trailing-icon"] ? {
+              name: "trailing-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["model-value", "options", "placeholder", "disabled", "multiple", "searchable", "allow-insert", "max-dropdown-height", "no-options-text", "search-placeholder", "input-id", "error", "size", "tabindex"])) : _ctx.type === "file" ? (openBlock(), createBlock(UiInputFile, {
+            key: 3,
+            "model-value": _ctx.modelValue,
+            accept: props.accept,
+            multiple: props.multiple,
+            "max-file-size": props.maxFileSize,
+            "drag-drop-text": props.dragDropText,
+            "selected-text": props.selectedText,
+            disabled: _ctx.disabled,
+            required: props.required,
+            "input-id": inputId.value,
+            error: props.error,
+            size: props.size,
+            tabindex: _ctx.tabindex,
+            "onUpdate:modelValue": handleInput,
+            onFileError: handleFileError,
+            onBlur: handleBlur,
+            onFocus: handleFocus
+          }, createSlots({ _: 2 }, [
+            _ctx.$slots["leading-icon"] ? {
+              name: "leading-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["trailing-icon"] ? {
+              name: "trailing-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["model-value", "accept", "multiple", "max-file-size", "drag-drop-text", "selected-text", "disabled", "required", "input-id", "error", "size", "tabindex"])) : _ctx.type === "date" ? (openBlock(), createBlock(_sfc_main$M, {
+            key: 4,
+            "model-value": _ctx.modelValue,
+            placeholder: _ctx.placeholder,
+            disabled: _ctx.disabled,
+            readonly: _ctx.readonly,
+            required: props.required,
+            min: props.min,
+            max: props.max,
+            "input-id": inputId.value,
+            error: props.error,
+            size: props.size,
+            tabindex: _ctx.tabindex,
+            "onUpdate:modelValue": handleInput,
+            onBlur: handleBlur,
+            onFocus: handleFocus
+          }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "min", "max", "input-id", "error", "size", "tabindex"])) : _ctx.type === "time" ? (openBlock(), createBlock(_sfc_main$L, {
+            key: 5,
+            "model-value": _ctx.modelValue,
+            placeholder: _ctx.placeholder,
+            disabled: _ctx.disabled,
+            readonly: _ctx.readonly,
+            required: props.required,
+            "input-id": inputId.value,
+            error: props.error,
+            size: props.size,
+            tabindex: _ctx.tabindex,
+            "onUpdate:modelValue": handleInput,
+            onBlur: handleBlur,
+            onFocus: handleFocus
+          }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "input-id", "error", "size", "tabindex"])) : _ctx.type === "datetime" ? (openBlock(), createBlock(_sfc_main$K, {
+            key: 6,
+            "model-value": _ctx.modelValue,
+            placeholder: _ctx.placeholder,
+            disabled: _ctx.disabled,
+            readonly: _ctx.readonly,
+            required: props.required,
+            min: props.min,
+            max: props.max,
+            "input-id": inputId.value,
+            error: props.error,
+            size: props.size,
+            tabindex: _ctx.tabindex,
+            "onUpdate:modelValue": handleInput,
+            onBlur: handleBlur,
+            onFocus: handleFocus
+          }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required", "min", "max", "input-id", "error", "size", "tabindex"])) : _ctx.type === "richtext" ? (openBlock(), createBlock(UiInputRichText, {
+            key: 7,
+            "model-value": _ctx.modelValue,
+            placeholder: _ctx.placeholder,
+            disabled: _ctx.disabled,
+            readonly: _ctx.readonly,
+            "input-id": inputId.value,
+            error: props.error,
+            "min-height": props.minHeight,
+            "max-height": props.maxHeight,
+            tabindex: _ctx.tabindex,
+            "onUpdate:modelValue": handleInput,
+            onBlur: handleBlur,
+            onFocus: handleFocus
+          }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "input-id", "error", "min-height", "max-height", "tabindex"])) : _ctx.type === "pincode" ? (openBlock(), createBlock(UiInputPincode, {
+            key: 8,
+            "model-value": _ctx.modelValue,
+            "max-length": props.maxLength || 6,
+            variant: props.variant || "numeric",
+            divider: props.divider,
+            disabled: _ctx.disabled,
+            readonly: _ctx.readonly,
+            "input-id": inputId.value,
+            error: props.error,
+            size: props.size,
+            tabindex: _ctx.tabindex,
+            "onUpdate:modelValue": handleInput,
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+            onComplete: handlePincodeComplete
+          }, createSlots({ _: 2 }, [
+            _ctx.$slots["leading-icon"] ? {
+              name: "leading-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots["trailing-icon"] ? {
+              name: "trailing-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["model-value", "max-length", "variant", "divider", "disabled", "readonly", "input-id", "error", "size", "tabindex"])) : createCommentVNode("", true)
+        ]),
+        _ctx.$slots["hint"] ? (openBlock(), createElementBlock("div", _hoisted_3$w, [
+          renderSlot(_ctx.$slots, "hint", {}, void 0, true)
+        ])) : createCommentVNode("", true),
+        props.error && props.error !== true ? (openBlock(), createElementBlock("p", _hoisted_4$v, toDisplayString(typeof props.error === "string" ? props.error : props.error?.message || String(props.error)), 1)) : props.helpText ? (openBlock(), createElementBlock("p", _hoisted_5$r, toDisplayString(props.helpText), 1)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-7c0f388a"]]);
+const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-1cf1d35b"]]);
 const _hoisted_1$D = ["disabled", "aria-disabled"];
 const _hoisted_2$y = ["href", "target", "rel", "aria-disabled"];
 const _sfc_main$G = /* @__PURE__ */ defineComponent({
@@ -25949,13 +26001,13 @@ const _hoisted_12$k = ["cx", "cy", "r"];
 const _hoisted_13$i = ["width", "height"];
 const _hoisted_14$i = { class: "crop-svg" };
 const _hoisted_15$f = ["cx", "cy", "r"];
-const _hoisted_16$f = { class: "controls" };
-const _hoisted_17$e = { class: "zoom-control" };
+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$a = { class: "preview-section" };
 const _hoisted_21$a = { class: "preview-container" };
-const _hoisted_22$8 = ["width", "height"];
+const _hoisted_22$7 = ["width", "height"];
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "UiAvatarEditor",
   props: {
@@ -26324,8 +26376,8 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                   ]))
                 ])
               ]),
-              createElementVNode("div", _hoisted_16$f, [
-                createElementVNode("div", _hoisted_17$e, [
+              createElementVNode("div", _hoisted_16$e, [
+                createElementVNode("div", _hoisted_17$d, [
                   createVNode(StrandsUiButton, {
                     onClick: _cache[2] || (_cache[2] = ($event) => {
                       zoom.value = Math.max(minZoom.value, zoom.value - 0.1);
@@ -26425,7 +26477,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                   width: previewSize.value,
                   height: previewSize.value,
                   class: "preview-canvas"
-                }, null, 8, _hoisted_22$8)
+                }, null, 8, _hoisted_22$7)
               ]),
               _cache[10] || (_cache[10] = createElementVNode("p", { class: "preview-instructions" }, [
                 createTextVNode(" Drag image to reposition"),
@@ -28084,8 +28136,8 @@ const _hoisted_12$i = { class: "ui-color-picker-contrast-header" };
 const _hoisted_13$h = { class: "ui-color-picker-contrast-colors" };
 const _hoisted_14$h = { class: "ui-color-picker-contrast-color-demo" };
 const _hoisted_15$e = { class: "ui-color-picker-contrast-ratio" };
-const _hoisted_16$e = { class: "ui-color-picker-contrast-levels" };
-const _hoisted_17$d = { class: "ui-color-picker-contrast-level-value" };
+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$9 = {
@@ -28093,7 +28145,7 @@ const _hoisted_20$9 = {
   class: "ui-color-picker-contrast-svg"
 };
 const _hoisted_21$9 = ["cx", "fill"];
-const _hoisted_22$7 = { class: "ui-color-picker-inputs" };
+const _hoisted_22$6 = { class: "ui-color-picker-inputs" };
 const _hoisted_23$5 = {
   key: 0,
   class: "ui-color-picker-input-row"
@@ -29890,7 +29942,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_15$e, toDisplayString(contrastData.value.ratio.toFixed(2)) + ":1 ", 1)
               ])
             ]),
-            createElementVNode("div", _hoisted_16$e, [
+            createElementVNode("div", _hoisted_16$d, [
               createElementVNode("div", {
                 class: normalizeClass(["ui-color-picker-contrast-level", {
                   "ui-color-picker-contrast-level--pass": contrastData.value.normalText !== "FAIL",
@@ -29901,7 +29953,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                   createElementVNode("div", { class: "ui-color-picker-contrast-level-line ui-color-picker-contrast-level-line--solid" }),
                   createElementVNode("span", { class: "ui-color-picker-contrast-level-label" }, "Normal Text")
                 ], -1)),
-                createElementVNode("span", _hoisted_17$d, toDisplayString(contrastData.value.normalText), 1)
+                createElementVNode("span", _hoisted_17$c, toDisplayString(contrastData.value.normalText), 1)
               ], 2),
               createElementVNode("div", {
                 class: normalizeClass(["ui-color-picker-contrast-level", {
@@ -29952,7 +30004,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             style: normalizeStyle({ left: `${alpha2.value * 100}%` })
           }, null, 4)
         ], 544)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_22$7, [
+        createElementVNode("div", _hoisted_22$6, [
           currentColorFormat.value === "hex" ? (openBlock(), createElementBlock("div", _hoisted_23$5, [
             createElementVNode("div", _hoisted_24$5, [
               _cache[24] || (_cache[24] = createElementVNode("label", { class: "ui-color-picker-label" }, "Hex", -1)),
@@ -30685,8 +30737,8 @@ const _hoisted_12$h = { class: "ui-table-body" };
 const _hoisted_13$g = { class: "ui-table-group-content" };
 const _hoisted_14$g = { class: "ui-table-group-name" };
 const _hoisted_15$d = { class: "ui-table-group-count" };
-const _hoisted_16$d = ["onClick"];
-const _hoisted_17$c = ["onClick"];
+const _hoisted_16$c = ["onClick"];
+const _hoisted_17$b = ["onClick"];
 const _hoisted_18$b = { key: 1 };
 const _hoisted_19$a = { class: "ui-table-subrow-content" };
 const _hoisted_20$8 = { class: "ui-table-subrow-default" };
@@ -30694,7 +30746,7 @@ const _hoisted_21$8 = {
   key: 0,
   class: "ui-table-empty"
 };
-const _hoisted_22$6 = {
+const _hoisted_22$5 = {
   key: 1,
   class: "ui-table-footer"
 };
@@ -31216,9 +31268,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                           } : void 0
                         ]), 1032, ["modelValue", "type", "options", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("span", _hoisted_18$b, toDisplayString(getCellValue(row, column.key, column)), 1))
                       ], true)
-                    ], 14, _hoisted_17$c);
+                    ], 14, _hoisted_17$b);
                   }), 128))
-                ], 10, _hoisted_16$d)),
+                ], 10, _hoisted_16$c)),
                 expandedRows.value.has(rowIndex) ? (openBlock(), createElementBlock("div", {
                   key: 2,
                   class: "ui-table-subrow",
@@ -31245,7 +31297,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               ], true)
             ])) : createCommentVNode("", true)
           ]),
-          hasFooterSlots.value ? (openBlock(), createElementBlock("div", _hoisted_22$6, [
+          hasFooterSlots.value ? (openBlock(), createElementBlock("div", _hoisted_22$5, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(internalColumns.value, (column, index) => {
               return openBlock(), createElementBlock("div", {
                 key: `footer-${index}`,
@@ -32153,13 +32205,13 @@ const _hoisted_13$e = {
 };
 const _hoisted_14$e = ["id", "checked", "indeterminate"];
 const _hoisted_15$c = { class: "checkbox-button" };
-const _hoisted_16$c = {
+const _hoisted_16$b = {
   key: 0,
   class: "checkbox-check",
   viewBox: "0 0 20 20",
   fill: "currentColor"
 };
-const _hoisted_17$b = {
+const _hoisted_17$a = {
   key: 1,
   class: "checkbox-indeterminate",
   viewBox: "0 0 20 20",
@@ -32351,13 +32403,13 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
               onChange: handleSelectAll
             }, null, 40, _hoisted_14$e),
             createElementVNode("div", _hoisted_15$c, [
-              isAllSelected.value ? (openBlock(), createElementBlock("svg", _hoisted_16$c, [..._cache[2] || (_cache[2] = [
+              isAllSelected.value ? (openBlock(), createElementBlock("svg", _hoisted_16$b, [..._cache[2] || (_cache[2] = [
                 createElementVNode("path", {
                   "fill-rule": "evenodd",
                   d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
                   "clip-rule": "evenodd"
                 }, null, -1)
-              ])])) : isSomeSelected.value ? (openBlock(), createElementBlock("svg", _hoisted_17$b, [..._cache[3] || (_cache[3] = [
+              ])])) : isSomeSelected.value ? (openBlock(), createElementBlock("svg", _hoisted_17$a, [..._cache[3] || (_cache[3] = [
                 createElementVNode("path", {
                   "fill-rule": "evenodd",
                   d: "M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z",
@@ -32757,8 +32809,8 @@ const _hoisted_13$d = {
 };
 const _hoisted_14$d = { class: "mfa-single-method-content" };
 const _hoisted_15$b = { class: "mfa-single-method-name" };
-const _hoisted_16$b = { class: "mfa-single-method-type" };
-const _hoisted_17$a = {
+const _hoisted_16$a = { class: "mfa-single-method-type" };
+const _hoisted_17$9 = {
   key: 2,
   class: "mfa-email-request"
 };
@@ -32769,7 +32821,7 @@ const _hoisted_18$9 = {
 const _hoisted_19$8 = { class: "mfa-hardware-prompt" };
 const _hoisted_20$6 = { class: "mfa-hardware-prompt-content" };
 const _hoisted_21$6 = { class: "mfa-hardware-prompt-icon" };
-const _hoisted_22$5 = { class: "mfa-hardware-prompt-text" };
+const _hoisted_22$4 = { class: "mfa-hardware-prompt-text" };
 const _hoisted_23$4 = { class: "mfa-hardware-prompt-title" };
 const _hoisted_24$4 = { class: "mfa-hardware-prompt-description" };
 const _hoisted_25$4 = { class: "mfa-backup-option" };
@@ -33246,11 +33298,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                     })),
                     createElementVNode("div", null, [
                       createElementVNode("h3", _hoisted_15$b, toDisplayString(selectedMethod.value.device_name), 1),
-                      createElementVNode("p", _hoisted_16$b, toDisplayString(unref(getDeviceTypeName)(selectedMethod.value.device_type)), 1)
+                      createElementVNode("p", _hoisted_16$a, toDisplayString(unref(getDeviceTypeName)(selectedMethod.value.device_type)), 1)
                     ])
                   ])
                 ])) : createCommentVNode("", true),
-                selectedMethod.value?.device_type === "email" && !emailCodeSent.value ? (openBlock(), createElementBlock("div", _hoisted_17$a, [
+                selectedMethod.value?.device_type === "email" && !emailCodeSent.value ? (openBlock(), createElementBlock("div", _hoisted_17$9, [
                   _cache[10] || (_cache[10] = createElementVNode("p", { class: "mfa-email-request-text" }, "Click below to receive your verification code", -1)),
                   createVNode(unref(CompoundUiButton), {
                     variant: "primary",
@@ -33273,7 +33325,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                           class: "mfa-hardware-icon-svg"
                         }))
                       ]),
-                      createElementVNode("div", _hoisted_22$5, [
+                      createElementVNode("div", _hoisted_22$4, [
                         createElementVNode("h4", _hoisted_23$4, toDisplayString(selectedMethod.value.device_type === "passkey" ? "Use your passkey" : "Touch your hardware key"), 1),
                         createElementVNode("p", _hoisted_24$4, toDisplayString(selectedMethod.value.device_type === "passkey" ? "Use biometrics, PIN, or device security to authenticate" : "Insert and touch your hardware key to authenticate"), 1)
                       ])
@@ -33742,8 +33794,8 @@ const _hoisted_14$c = {
   class: "auth-oauth-generic-icon"
 };
 const _hoisted_15$a = { class: "auth-oauth-generic-text" };
-const _hoisted_16$a = { class: "auth-oauth-text" };
-const _hoisted_17$9 = {
+const _hoisted_16$9 = { class: "auth-oauth-text" };
+const _hoisted_17$8 = {
   key: 0,
   class: "auth-divider"
 };
@@ -33752,12 +33804,11 @@ const _hoisted_19$7 = {
   key: 0,
   class: "auth-password-field"
 };
-const _hoisted_20$5 = { class: "auth-password-header" };
-const _hoisted_21$5 = {
+const _hoisted_20$5 = {
   key: 0,
   class: "auth-back-link-container"
 };
-const _hoisted_22$4 = { class: "auth-support-text" };
+const _hoisted_21$5 = { class: "auth-support-text" };
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "StrandsAuth",
   props: {
@@ -34129,7 +34180,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                               createElementVNode("span", _hoisted_15$a, toDisplayString((provider.displayName || provider.name).charAt(0).toUpperCase()), 1)
                             ]))
                           ]),
-                          createElementVNode("span", _hoisted_16$a, " Continue with " + toDisplayString(provider.displayName || provider.name.charAt(0).toUpperCase() + provider.name.slice(1)), 1)
+                          createElementVNode("span", _hoisted_16$9, " Continue with " + toDisplayString(provider.displayName || provider.name.charAt(0).toUpperCase() + provider.name.slice(1)), 1)
                         ]),
                         _: 2
                       }, 1032, ["disabled", "onClick"]);
@@ -34147,7 +34198,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 onAfterLeave
               }, {
                 default: withCtx(() => [
-                  !isPasswordReset.value && displayProviders.value?.length ? (openBlock(), createElementBlock("div", _hoisted_17$9, [
+                  !isPasswordReset.value && displayProviders.value?.length ? (openBlock(), createElementBlock("div", _hoisted_17$8, [
                     createElementVNode("span", _hoisted_18$8, "Or " + toDisplayString(isSignUp.value ? "create account" : "sign in") + " with email", 1)
                   ])) : createCommentVNode("", true)
                 ]),
@@ -34182,28 +34233,30 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                   }, {
                     default: withCtx(() => [
                       !isPasswordReset.value && !isSignUp.value ? (openBlock(), createElementBlock("div", _hoisted_19$7, [
-                        createElementVNode("div", _hoisted_20$5, [
-                          _cache[10] || (_cache[10] = createElementVNode("span", { class: "auth-password-label" }, "Password", -1)),
-                          createVNode(unref(StrandsUiLink), {
-                            variant: "primary",
-                            size: "sm",
-                            onClick: _cache[2] || (_cache[2] = ($event) => currentMode.value = "reset-password")
-                          }, {
-                            default: withCtx(() => [..._cache[9] || (_cache[9] = [
-                              createTextVNode(" Forgot password? ", -1)
-                            ])]),
-                            _: 1
-                          })
-                        ]),
                         createVNode(unref(StrandsUiInput), {
                           modelValue: form.password,
                           "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => form.password = $event),
                           type: "password",
+                          label: "Password",
                           placeholder: "Enter your password",
                           required: "",
                           autocomplete: "current-password",
                           error: error.value && !form.password ? "Password is required" : ""
-                        }, null, 8, ["modelValue", "error"])
+                        }, {
+                          hint: withCtx(() => [
+                            createVNode(unref(StrandsUiLink), {
+                              variant: "primary",
+                              size: "sm",
+                              onClick: _cache[2] || (_cache[2] = ($event) => currentMode.value = "reset-password")
+                            }, {
+                              default: withCtx(() => [..._cache[9] || (_cache[9] = [
+                                createTextVNode(" Forgot password? ", -1)
+                              ])]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }, 8, ["modelValue", "error"])
                       ])) : createCommentVNode("", true)
                     ]),
                     _: 1
@@ -34246,12 +34299,12 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 onAfterLeave
               }, {
                 default: withCtx(() => [
-                  isPasswordReset.value ? (openBlock(), createElementBlock("div", _hoisted_21$5, [
+                  isPasswordReset.value ? (openBlock(), createElementBlock("div", _hoisted_20$5, [
                     createVNode(unref(StrandsUiLink), {
                       onClick: _cache[4] || (_cache[4] = ($event) => currentMode.value = "signin"),
                       class: "auth-back-link"
                     }, {
-                      default: withCtx(() => [..._cache[11] || (_cache[11] = [
+                      default: withCtx(() => [..._cache[10] || (_cache[10] = [
                         createElementVNode("svg", {
                           class: "auth-back-icon",
                           fill: "none",
@@ -34290,13 +34343,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                     name: "support-fade"
                   }, {
                     default: withCtx(() => [
-                      createElementVNode("p", _hoisted_22$4, [
-                        _cache[13] || (_cache[13] = createTextVNode(" Need help? ", -1)),
+                      createElementVNode("p", _hoisted_21$5, [
+                        _cache[12] || (_cache[12] = createTextVNode(" Need help? ", -1)),
                         createVNode(unref(StrandsUiLink), {
                           variant: "primary",
                           href: `mailto:${unref(getSupportEmail)()}`
                         }, {
-                          default: withCtx(() => [..._cache[12] || (_cache[12] = [
+                          default: withCtx(() => [..._cache[11] || (_cache[11] = [
                             createTextVNode(" Contact Support ", -1)
                           ])]),
                           _: 1
@@ -34323,7 +34376,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsAuth = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-31b99c9b"]]);
+const StrandsAuth = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-00363795"]]);
 const _hoisted_1$k = {
   viewBox: "0 0 24 24",
   class: "accui-w-5 accui-h-5"
@@ -34394,8 +34447,8 @@ const _hoisted_13$b = {
 };
 const _hoisted_14$b = { class: "accui-form-group" };
 const _hoisted_15$9 = { class: "accui-input-wrapper" };
-const _hoisted_16$9 = { class: "accui-form-group" };
-const _hoisted_17$8 = { class: "accui-input-wrapper" };
+const _hoisted_16$8 = { class: "accui-form-group" };
+const _hoisted_17$7 = { class: "accui-input-wrapper" };
 const _hoisted_18$7 = { class: "accui-auth-links" };
 const _hoisted_19$6 = { class: "accui-auth-link-text" };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
@@ -34565,9 +34618,9 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                     ])
                   ])
                 ]),
-                createElementVNode("div", _hoisted_16$9, [
+                createElementVNode("div", _hoisted_16$8, [
                   _cache[11] || (_cache[11] = createElementVNode("label", { class: "accui-form-label" }, "Password", -1)),
-                  createElementVNode("div", _hoisted_17$8, [
+                  createElementVNode("div", _hoisted_17$7, [
                     _cache[10] || (_cache[10] = createElementVNode("svg", {
                       class: "accui-input-icon",
                       viewBox: "0 0 20 20",
@@ -34684,8 +34737,8 @@ const _hoisted_15$8 = {
   key: 0,
   class: "oauth-icon"
 };
-const _hoisted_16$8 = ["src", "alt"];
-const _hoisted_17$7 = {
+const _hoisted_16$7 = ["src", "alt"];
+const _hoisted_17$6 = {
   key: 1,
   viewBox: "0 0 24 24",
   class: "oauth-icon"
@@ -34898,8 +34951,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                             class: "oauth-icon-image",
                             width: "20",
                             height: "20"
-                          }, null, 8, _hoisted_16$8)
-                        ])) : provider.id === "google" ? (openBlock(), createElementBlock("svg", _hoisted_17$7, [..._cache[6] || (_cache[6] = [
+                          }, null, 8, _hoisted_16$7)
+                        ])) : provider.id === "google" ? (openBlock(), createElementBlock("svg", _hoisted_17$6, [..._cache[6] || (_cache[6] = [
                           createElementVNode("path", {
                             fill: "#4285F4",
                             d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
@@ -35406,8 +35459,8 @@ const _hoisted_14$8 = {
   class: "totp-setup-step"
 };
 const _hoisted_15$7 = { class: "totp-setup-backup-codes" };
-const _hoisted_16$7 = { class: "totp-setup-backup-grid-wrapper" };
-const _hoisted_17$6 = { class: "totp-setup-backup-grid" };
+const _hoisted_16$6 = { class: "totp-setup-backup-grid-wrapper" };
+const _hoisted_17$5 = { class: "totp-setup-backup-grid" };
 const _hoisted_18$5 = { class: "totp-setup-backup-actions" };
 const _hoisted_19$4 = { class: "totp-setup-final-actions" };
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
@@ -35692,8 +35745,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   createElementVNode("p", { class: "totp-setup-backup-header-description" }, " Store these codes in a safe place. Each code can only be used once. ")
                 ])
               ], -1)),
-              createElementVNode("div", _hoisted_16$7, [
-                createElementVNode("div", _hoisted_17$6, [
+              createElementVNode("div", _hoisted_16$6, [
+                createElementVNode("div", _hoisted_17$5, [
                   (openBlock(true), createElementBlock(Fragment$1, null, renderList(totpSetupData.value?.backup_codes, (code, index) => {
                     return openBlock(), createElementBlock("div", {
                       key: index,
@@ -36083,8 +36136,8 @@ const _hoisted_12$7 = {
 const _hoisted_13$7 = { class: "hardware-key-setup-backup-codes" };
 const _hoisted_14$7 = { class: "hardware-key-setup-codes-container" };
 const _hoisted_15$6 = { class: "hardware-key-setup-codes-grid" };
-const _hoisted_16$6 = { class: "hardware-key-setup-copy-action" };
-const _hoisted_17$5 = { class: "hardware-key-setup-final-action" };
+const _hoisted_16$5 = { class: "hardware-key-setup-copy-action" };
+const _hoisted_17$4 = { class: "hardware-key-setup-final-action" };
 const _hoisted_18$4 = {
   key: 4,
   class: "hardware-key-setup-step"
@@ -36545,7 +36598,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   }), 128))
                 ])
               ]),
-              createElementVNode("div", _hoisted_16$6, [
+              createElementVNode("div", _hoisted_16$5, [
                 createVNode(unref(CompoundUiButton), {
                   variant: "secondary",
                   size: "sm",
@@ -36558,7 +36611,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 })
               ])
             ]),
-            createElementVNode("div", _hoisted_17$5, [
+            createElementVNode("div", _hoisted_17$4, [
               createVNode(unref(CompoundUiButton), {
                 variant: "primary",
                 onClick: finish
@@ -36645,7 +36698,7 @@ const _hoisted_14$6 = {
   class: "backup-codes-regenerate-warning"
 };
 const _hoisted_15$5 = { class: "backup-codes-regenerate-content" };
-const _hoisted_16$5 = { class: "backup-codes-regenerate-actions" };
+const _hoisted_16$4 = { class: "backup-codes-regenerate-actions" };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "StrandsBackupCodesModal",
   props: {
@@ -36856,7 +36909,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   createElementVNode("div", null, [
                     _cache[11] || (_cache[11] = createElementVNode("p", { class: "backup-codes-regenerate-title" }, "Regenerate Backup Codes?", -1)),
                     _cache[12] || (_cache[12] = 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$5, [
+                    createElementVNode("div", _hoisted_16$4, [
                       createVNode(unref(CompoundUiButton), {
                         variant: "primary",
                         size: "sm",
@@ -36999,8 +37052,8 @@ const _hoisted_12$5 = { class: "mfa-device-option" };
 const _hoisted_13$5 = { class: "mfa-device-option-content" };
 const _hoisted_14$5 = { class: "mfa-device-option-icon" };
 const _hoisted_15$4 = { class: "mfa-device-option" };
-const _hoisted_16$4 = { class: "mfa-device-option-content" };
-const _hoisted_17$4 = { class: "mfa-device-option-icon" };
+const _hoisted_16$3 = { class: "mfa-device-option-content" };
+const _hoisted_17$3 = { class: "mfa-device-option-icon" };
 const _hoisted_18$3 = { class: "mfa-device-option" };
 const _hoisted_19$2 = { class: "mfa-device-option-content" };
 const _hoisted_20$2 = { class: "mfa-device-option-icon" };
@@ -37273,8 +37326,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                             })
                           ]),
                           createElementVNode("div", _hoisted_15$4, [
-                            createElementVNode("div", _hoisted_16$4, [
-                              createElementVNode("div", _hoisted_17$4, [
+                            createElementVNode("div", _hoisted_16$3, [
+                              createElementVNode("div", _hoisted_17$3, [
                                 createVNode(Mail, { size: 24 })
                               ]),
                               _cache[16] || (_cache[16] = createElementVNode("div", { class: "mfa-device-option-info" }, [
@@ -37742,11 +37795,11 @@ const _hoisted_12$3 = { class: "sessions-list" };
 const _hoisted_13$3 = { class: "session-header" };
 const _hoisted_14$3 = { class: "session-device-info" };
 const _hoisted_15$3 = { class: "session-device-name" };
-const _hoisted_16$3 = {
+const _hoisted_16$2 = {
   key: 0,
   class: "session-current-badge"
 };
-const _hoisted_17$3 = { class: "session-location" };
+const _hoisted_17$2 = { class: "session-location" };
 const _hoisted_18$2 = {
   key: 0,
   class: "session-actions"
@@ -38022,9 +38075,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       createElementVNode("div", _hoisted_14$3, [
                         createElementVNode("h4", _hoisted_15$3, [
                           createTextVNode(toDisplayString(getDeviceName(session)) + " ", 1),
-                          session.is_current ? (openBlock(), createElementBlock("span", _hoisted_16$3, " Current ")) : createCommentVNode("", true)
+                          session.is_current ? (openBlock(), createElementBlock("span", _hoisted_16$2, " Current ")) : createCommentVNode("", true)
                         ]),
-                        createElementVNode("div", _hoisted_17$3, [
+                        createElementVNode("div", _hoisted_17$2, [
                           createVNode(MapPin, { size: 14 }),
                           createElementVNode("span", null, toDisplayString(getLocationString(session)), 1)
                         ])
@@ -38124,11 +38177,11 @@ const _hoisted_12$2 = { class: "profile-section" };
 const _hoisted_13$2 = { class: "profile-setting-card" };
 const _hoisted_14$2 = { class: "profile-setting-header" };
 const _hoisted_15$2 = { class: "profile-setting-subtitle" };
-const _hoisted_16$2 = {
+const _hoisted_16$1 = {
   key: 0,
   class: "profile-change-form"
 };
-const _hoisted_17$2 = { class: "profile-field-section" };
+const _hoisted_17$1 = { class: "profile-field-section" };
 const _hoisted_18$1 = { class: "profile-field-header" };
 const _hoisted_19 = { class: "profile-field-subtitle" };
 const _hoisted_20 = {
@@ -38960,7 +39013,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         ]),
                         createVNode(Transition, { name: "expand" }, {
                           default: withCtx(() => [
-                            showEmailChange.value ? (openBlock(), createElementBlock("div", _hoisted_16$2, [
+                            showEmailChange.value ? (openBlock(), createElementBlock("div", _hoisted_16$1, [
                               createVNode(unref(StrandsUiInput), {
                                 modelValue: emailChangeForm.newEmail,
                                 "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emailChangeForm.newEmail = $event),
@@ -38993,7 +39046,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                           _: 1
                         })
                       ]),
-                      createElementVNode("div", _hoisted_17$2, [
+                      createElementVNode("div", _hoisted_17$1, [
                         createElementVNode("div", _hoisted_18$1, [
                           createElementVNode("div", null, [
                             _cache[16] || (_cache[16] = createElementVNode("h4", { class: "profile-field-title" }, "Username", -1)),
@@ -39705,35 +39758,33 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = { class: "user-button-content" };
-const _hoisted_2$2 = {
+const _hoisted_1$3 = {
   key: 0,
   class: "user-info"
 };
-const _hoisted_3$2 = { class: "user-name" };
-const _hoisted_4$2 = { class: "avatar-container" };
-const _hoisted_5$1 = { class: "avatar-wrapper" };
-const _hoisted_6$1 = ["src", "alt"];
-const _hoisted_7$1 = {
+const _hoisted_2$2 = { class: "user-name" };
+const _hoisted_3$2 = { class: "avatar-wrapper" };
+const _hoisted_4$2 = ["src", "alt"];
+const _hoisted_5$1 = {
   key: 1,
   class: "avatar-default"
 };
-const _hoisted_8$1 = ["onKeydown"];
-const _hoisted_9$1 = { class: "dropdown-content" };
-const _hoisted_10$1 = { class: "dropdown-header" };
-const _hoisted_11$1 = {
+const _hoisted_6$1 = ["onKeydown"];
+const _hoisted_7$1 = { class: "dropdown-content" };
+const _hoisted_8$1 = { class: "dropdown-header" };
+const _hoisted_9$1 = {
   key: 0,
   class: "dropdown-avatar-container"
 };
-const _hoisted_12$1 = ["src", "alt"];
-const _hoisted_13$1 = {
+const _hoisted_10$1 = ["src", "alt"];
+const _hoisted_11$1 = {
   key: 1,
   class: "dropdown-avatar-default"
 };
-const _hoisted_14$1 = { class: "dropdown-user-details" };
-const _hoisted_15$1 = { class: "dropdown-user-name" };
-const _hoisted_16$1 = { class: "dropdown-user-email" };
-const _hoisted_17$1 = { class: "sign-in-auth-wrapper" };
+const _hoisted_12$1 = { class: "dropdown-user-details" };
+const _hoisted_13$1 = { class: "dropdown-user-name" };
+const _hoisted_14$1 = { class: "dropdown-user-email" };
+const _hoisted_15$1 = { class: "sign-in-auth-wrapper" };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "StrandsUserButton",
   props: {
@@ -39852,7 +39903,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               onClick: openSignIn,
               "aria-label": "Sign in"
             }, {
-              default: withCtx(() => [..._cache[8] || (_cache[8] = [
+              "leading-icon": withCtx(() => [..._cache[8] || (_cache[8] = [
                 createElementVNode("svg", {
                   class: "sign-in-icon",
                   fill: "none",
@@ -39865,9 +39916,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     "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)
               ])]),
+              default: withCtx(() => [
+                _cache[9] || (_cache[9] = createTextVNode(" Sign In ", -1))
+              ]),
               _: 1
             }),
             createVNode(unref(UiModal), {
@@ -39876,7 +39929,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               "fullscreen-on-mobile": false
             }, {
               default: withCtx(() => [
-                createElementVNode("div", _hoisted_17$1, [
+                createElementVNode("div", _hoisted_15$1, [
                   createVNode(unref(StrandsAuth), {
                     onSignedIn: handleSignedIn,
                     onError: handleSignInError,
@@ -39911,51 +39964,51 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               "aria-expanded": showDropdown.value,
               "aria-label": "User menu"
             }, {
-              default: withCtx(() => [
-                createElementVNode("div", _hoisted_1$3, [
-                  !_ctx.hideUser ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
-                    createElementVNode("div", _hoisted_3$2, toDisplayString(displayName.value), 1)
-                  ])) : createCommentVNode("", true),
-                  createElementVNode("div", _hoisted_4$2, [
-                    createElementVNode("div", _hoisted_5$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_6$1)) : (openBlock(), createElementBlock("div", _hoisted_7$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))
+              "leading-icon": withCtx(() => [
+                createElementVNode("div", _hoisted_3$2, [
+                  user.value?.avatar ? (openBlock(), createElementBlock("img", {
+                    key: 0,
+                    src: user.value.avatar,
+                    alt: `${user.value.firstName || user.value.email}'s avatar`,
+                    class: "avatar-image",
+                    width: "32",
+                    height: "32",
+                    loading: "eager"
+                  }, null, 8, _hoisted_4$2)) : (openBlock(), createElementBlock("div", _hoisted_5$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)
+                  ])]))
                 ])
               ]),
+              "trailing-icon": withCtx(() => [
+                (openBlock(), createElementBlock("svg", {
+                  class: normalizeClass(["dropdown-arrow", { "dropdown-arrow-open": showDropdown.value }]),
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24"
+                }, [..._cache[3] || (_cache[3] = [
+                  createElementVNode("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    "stroke-width": "2",
+                    d: "M19 9l-7 7-7-7"
+                  }, null, -1)
+                ])], 2))
+              ]),
+              default: withCtx(() => [
+                !_ctx.hideUser ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+                  createElementVNode("div", _hoisted_2$2, toDisplayString(displayName.value), 1)
+                ])) : createCommentVNode("", true)
+              ]),
               _: 1
             }, 8, ["active", "onKeydown", "aria-expanded"]),
             (openBlock(), createBlock(Teleport, { to: "body" }, [
@@ -39975,9 +40028,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   withKeys(withModifiers(focusLast, ["prevent"]), ["end"])
                 ]
               }, [
-                createElementVNode("div", _hoisted_9$1, [
-                  createElementVNode("div", _hoisted_10$1, [
-                    user.value ? (openBlock(), createElementBlock("div", _hoisted_11$1, [
+                createElementVNode("div", _hoisted_7$1, [
+                  createElementVNode("div", _hoisted_8$1, [
+                    user.value ? (openBlock(), createElementBlock("div", _hoisted_9$1, [
                       createVNode(unref(UiLevelProgress), {
                         size: 80,
                         value: user.value.xp,
@@ -39994,7 +40047,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         class: "dropdown-avatar-image",
                         width: "64",
                         height: "64"
-                      }, null, 8, _hoisted_12$1)) : (openBlock(), createElementBlock("div", _hoisted_13$1, [..._cache[4] || (_cache[4] = [
+                      }, null, 8, _hoisted_10$1)) : (openBlock(), createElementBlock("div", _hoisted_11$1, [..._cache[4] || (_cache[4] = [
                         createElementVNode("svg", {
                           class: "dropdown-avatar-icon",
                           fill: "currentColor",
@@ -40008,9 +40061,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         ], -1)
                       ])]))
                     ])) : createCommentVNode("", true),
-                    createElementVNode("div", _hoisted_14$1, [
-                      createElementVNode("div", _hoisted_15$1, toDisplayString(displayName.value), 1),
-                      createElementVNode("div", _hoisted_16$1, toDisplayString(user.value?.email), 1)
+                    createElementVNode("div", _hoisted_12$1, [
+                      createElementVNode("div", _hoisted_13$1, toDisplayString(displayName.value), 1),
+                      createElementVNode("div", _hoisted_14$1, toDisplayString(user.value?.email), 1)
                     ])
                   ]),
                   renderSlot(_ctx.$slots, "default", {}, void 0, true),
@@ -40039,7 +40092,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ])
-              ], 44, _hoisted_8$1)) : createCommentVNode("", true)
+              ], 44, _hoisted_6$1)) : createCommentVNode("", true)
             ])),
             createVNode(unref(UiModal), {
               modelValue: showProfileModal.value,
@@ -40062,7 +40115,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-eb787256"]]);
+const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-a0ed0ab9"]]);
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "StrandsNav",
   props: {
@@ -40141,7 +40194,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     squircle: { type: Boolean, default: true },
     to: {},
     href: {},
-    external: { type: Boolean }
+    external: { type: Boolean },
+    tabindex: {}
   },
   setup(__props) {
     const props = __props;