@strands.gg/accui 2.11.3 → 2.11.4

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-d7a80269"]]);
 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"
 };
@@ -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,
@@ -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({
@@ -25955,7 +26007,7 @@ 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: {
@@ -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"),
@@ -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"
@@ -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)),
@@ -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"
 };
@@ -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}`,
@@ -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" };
@@ -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)
                       ])
@@ -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: {
@@ -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"
@@ -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;