@alviere/ui 0.18.2 → 0.18.3

package/dist/index.js

@@ -11828,12 +11828,12 @@ var root_3$8 = /* @__PURE__ */ from_html(`<button type="button" class="alviere-s
 var root_4$6 = /* @__PURE__ */ from_html(`<div class="alviere-search-select__required svelte-roni7d">Required</div>`);
 var root_6$4 = /* @__PURE__ */ from_html(`<div class="alviere-search-select__loading-message svelte-roni7d"> </div>`);
 var root_8$3 = /* @__PURE__ */ from_html(`<div class="alviere-search-select__no-options-message svelte-roni7d"> </div>`);
-var root_10$3 = /* @__PURE__ */ from_html(`<div role="option" tabindex="0"> </div>`);
+var root_10$3 = /* @__PURE__ */ from_html(`<div role="option" tabindex="-1"> </div>`);
 var root_5$6 = /* @__PURE__ */ from_html(`<div class="alviere-search-select__dropdown svelte-roni7d" role="listbox"><div class="alviere-search-select__options-list svelte-roni7d"><!></div></div>`);
 var root_11$1 = /* @__PURE__ */ from_html(`<div class="alviere-search-select__help svelte-roni7d"> </div>`);
 var root_12$2 = /* @__PURE__ */ from_html(`<div class="alviere-search-select__error svelte-roni7d" role="alert"><svg height="1rem" width="1rem" viewBox="0 0 24 24" class="IconStyle_currentColor__sdo2n67" style="font-size: 1em;"><g fill="none"><path d="M2 12c0 5.523 4.477 10 10 10s10-4.477 10-10S17.523 2 12 2 2 6.477 2 12zm5.293-3.293 1.414-1.414 8 8-1.414 1.414z" fill="currentcolor"></path></g></svg> </div>`);
 var root_13$3 = /* @__PURE__ */ from_html(`<div class="alviere-search-select__warning svelte-roni7d" role="status"><!> </div>`);
-var root$c = /* @__PURE__ */ from_html(`<div><div class="alviere-search-select__container svelte-roni7d"><div><!> <input type="text" class="alviere-search-select__input svelte-roni7d" role="combobox" aria-haspopup="listbox"/> <!> <div class="alviere-search-select__actions svelte-roni7d"><!> <button type="button" tabindex="-1" aria-hidden="true"><!></button></div> <!></div> <!></div> <div class="alviere-search-select__validation-messages svelte-roni7d"><!> <!> <!></div></div>`);
+var root$c = /* @__PURE__ */ from_html(`<div><div class="alviere-search-select__container svelte-roni7d"><div><!> <input type="text" class="alviere-search-select__input svelte-roni7d" role="combobox" aria-haspopup="listbox" aria-autocomplete="list"/> <!> <div class="alviere-search-select__actions svelte-roni7d"><!> <button type="button" tabindex="-1" aria-hidden="true"><!></button></div> <!></div> <!></div> <div class="alviere-search-select__validation-messages svelte-roni7d"><!> <!> <!></div></div>`);
 const $$css$f = {
   hash: "svelte-roni7d",
   code: `:root {--alv-color-primary: #227e9e;--alv-color-primary-hover: #1b6680;--alv-color-primary-active: #145164;--alv-color-primary-light: #e8f4f8;--alv-color-primary-light-hover: #d1e8f0;--alv-color-on-primary: #ffffff;--alv-color-success: #436b1d;--alv-color-success-light: #d4edda;--alv-color-success-border: #c3e6cb;--alv-color-success-text: #155724;--alv-color-on-success: #ffffff;--alv-color-success-rgb: 67, 107, 29;--alv-color-error: #b3311f;--alv-color-error-light: #f8d7da;--alv-color-error-border: #f5c6cb;--alv-color-error-text: #721c24;--alv-color-on-error: #ffffff;--alv-color-error-rgb: 179, 49, 31;--alv-color-warning: #ffc107;--alv-color-warning-light: #fff3cd;--alv-color-warning-border: #ffeaa7;--alv-color-warning-text: #856404;--alv-color-on-warning: #000000;--alv-color-info: #175db8;--alv-color-info-light: #d1ecf1;--alv-color-info-border: #bee5eb;--alv-color-info-text: #0c5460;--alv-color-on-info: #ffffff;--alv-color-gray-50: #fafafa;--alv-color-gray-100: #f4f4f5;--alv-color-gray-200: #e4e4e7;--alv-color-gray-300: #d4d4d8;--alv-color-gray-400: #a1a1aa;--alv-color-gray-500: #71717a;--alv-color-gray-600: #52525b;--alv-color-gray-700: #3f3f46;--alv-color-gray-800: #27272a;--alv-color-gray-900: #18181b;--alv-color-surface: #ffffff;--alv-color-surface-secondary: #f9fafb;--alv-color-surface-tertiary: #f4f4f5;--alv-color-surface-elevated: #ffffff;--alv-color-text-primary: #18181b;--alv-color-text-secondary: #52525b;--alv-color-text-tertiary: #71717a;--alv-color-text-disabled: #a1a1aa;--alv-color-text-on-primary: #ffffff;--alv-color-text-on-surface: #18181b;--alv-color-border: #e4e4e7;--alv-color-border-hover: #d4d4d8;--alv-color-border-focus: #227e9e;--alv-color-border-error: #b3311f;--alv-color-border-success: #436b1d;--alv-color-background: #ffffff;--alv-color-background-disabled: #f4f4f5;--alv-color-background-hover: #f9fafb;--alv-color-background-active: #f4f4f5;}:root {--alv-font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;--alv-font-family-grotesque: 'Darker Grotesque', sans-serif;--alv-font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;--alv-font-size-3xs: 0.625rem;--alv-font-size-2xs: 0.75rem;--alv-font-size-xs: 1rem;--alv-font-size-sm: 1.125rem;--alv-font-size-base: 1.25rem;--alv-font-size-lg: 1.5rem;--alv-font-size-xl: 1.75rem;--alv-font-weight-light: 300;--alv-font-weight-normal: 400;--alv-font-weight-medium: 500;--alv-font-weight-semibold: 600;--alv-font-weight-bold: 700;--alv-line-height-tight: 1.25;--alv-line-height-normal: 1.5;--alv-line-height-relaxed: 1.75;}:root {--alv-spacing-xs: 0.25rem;--alv-spacing-sm: 0.5rem;--alv-spacing-md: 1rem;--alv-spacing-lg: 1.5rem;--alv-spacing-xl: 2rem;--alv-spacing-2xl: 3rem;--alv-spacing-3xl: 4rem;}:root {--alv-border-radius-none: 0;--alv-border-radius-sm: 0.125rem;--alv-border-radius: 0.25rem;--alv-border-radius-md: 0.375rem;--alv-border-radius-lg: 0.5rem;--alv-border-radius-xl: 0.75rem;--alv-border-radius-2xl: 1rem;--alv-border-radius-full: 9999px;}:root {--alv-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--alv-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);--alv-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--alv-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--alv-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--alv-shadow-none: none;}:root {--alv-transition-fast: 150ms ease-in-out;--alv-transition-normal: 250ms ease-in-out;--alv-transition-slow: 350ms ease-in-out;--alv-transition-none: none;}:root {--alv-input-height-sm: 2.5rem;--alv-input-height: 3.25rem;--alv-input-height-lg: 3.75rem;--alv-input-padding-x: 0.75rem;--alv-input-padding-y: 0.5rem;--alv-input-border-color: var(--alv-color-border);--alv-input-border-hover: var(--alv-color-border-hover);--alv-input-border-focus: var(--alv-color-border-focus);--alv-input-bg: var(--alv-color-background);--alv-input-bg-disabled: var(--alv-color-background-disabled);}:root {--alv-z-dropdown: 1000;--alv-z-sticky: 1020;--alv-z-fixed: 1030;--alv-z-modal-backdrop: 1040;--alv-z-modal: 1050;--alv-z-popover: 1060;--alv-z-tooltip: 1070;}:root {--alv-button-primary-bg: var(--alv-color-primary);--alv-button-primary-bg-hover: var(--alv-color-primary-hover);--alv-button-primary-bg-active: var(--alv-color-primary-active);--alv-button-primary-text: var(--alv-color-on-primary);--alv-button-primary-border: var(--alv-color-primary);--alv-button-secondary-bg: transparent;--alv-button-secondary-bg-hover: var(--alv-color-primary-light);--alv-button-secondary-bg-active: var(--alv-color-primary-light-hover);--alv-button-secondary-text: var(--alv-color-primary);--alv-button-secondary-border: var(--alv-color-primary);--alv-button-tertiary-bg: transparent;--alv-button-tertiary-bg-hover: var(--alv-color-gray-100);--alv-button-tertiary-bg-active: var(--alv-color-gray-200);--alv-button-tertiary-text: var(--alv-color-text-primary);--alv-button-tertiary-border: transparent;--alv-button-link-bg: transparent;--alv-button-link-bg-hover: transparent;--alv-button-link-bg-active: transparent;--alv-button-link-text: var(--alv-color-primary);--alv-button-link-text-hover: var(--alv-color-primary-hover);--alv-button-link-border: transparent;}:root {--alv-spinner-color: var(--alv-color-text-primary);--alv-spinner-size-sm: 1rem;--alv-spinner-size-md: 1.5rem;--alv-spinner-size-lg: 4rem;--alv-spinner-stroke-width: 2px;}:root {--alv-timeline-color: var(--alv-color-gray-600);--alv-timeline-completed-color: var(--alv-color-success);--alv-timeline-error-color: var(--alv-color-error);--alv-timeline-pending-color: var(--alv-color-gray-400);--alv-timeline-step-size-sm: 1.25rem;--alv-timeline-step-size-md: 2rem;--alv-timeline-step-size-lg: 2.5rem;--alv-timeline-connector-width: 3px;--alv-timeline-font-size: var(--alv-font-size-base);}:root {--alv-badge-primary-bg: var(--alv-color-primary);--alv-badge-primary-text: var(--alv-color-on-primary);--alv-badge-secondary-bg: var(--alv-color-gray-200);--alv-badge-secondary-text: var(--alv-color-text-primary);--alv-badge-success-bg: var(--alv-color-success);--alv-badge-success-text: var(--alv-color-on-success);--alv-badge-error-bg: var(--alv-color-error);--alv-badge-error-text: var(--alv-color-on-error);--alv-badge-warning-bg: var(--alv-color-warning);--alv-badge-warning-text: var(--alv-color-on-warning);--alv-badge-info-bg: var(--alv-color-info);--alv-badge-info-text: var(--alv-color-on-info);}:root {--alv-list-bg: var(--alv-color-surface);--alv-list-border: var(--alv-color-border);--alv-list-item-bg: transparent;--alv-list-item-bg-hover: var(--alv-color-background-hover);--alv-list-item-bg-active: var(--alv-color-background-active);--alv-list-item-text: var(--alv-color-text-primary);--alv-list-item-text-secondary: var(--alv-color-text-secondary);}:root {--alv-radio-border: var(--alv-color-border);--alv-radio-border-hover: var(--alv-color-border-hover);--alv-radio-border-focus: var(--alv-color-border-focus);--alv-radio-bg: var(--alv-color-background);--alv-radio-checked-bg: var(--alv-color-primary);--alv-radio-checked-border: var(--alv-color-primary);--alv-radio-text: var(--alv-color-text-primary);--alv-radio-text-disabled: var(--alv-color-text-disabled);}.alviere-search-select.svelte-roni7d {position:relative;width:100%;}.alviere-search-select__label.svelte-roni7d {position:absolute;max-width:calc(100% - 1.5rem);inset-inline-start:0.75rem;top:calc(50% + 1px);transform:translateY(-50%);transition:all 250ms ease-in-out;transition-delay:0.1s;display:block;font-size:1rem;font-weight:500;color:#3f3f46;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.alviere-search-select__required.svelte-roni7d {font-size:0.75rem;color:#3f3f46;text-align:end;position:absolute;right:1rem;top:calc(50% + 1px);transform:translateY(-50%);pointer-events:none;}.alviere-search-select__error.svelte-roni7d {display:flex;align-items:center;gap:0.25rem;font-size:0.75rem;color:#b3311f;line-height:1.25;}.alviere-search-select__warning.svelte-roni7d {display:flex;align-items:center;gap:0.25rem;font-size:0.75rem;color:#856404;line-height:1.25;}.alviere-search-select__warning.svelte-roni7d svg {width:1rem;height:1rem;}.alviere-search-select__wrapper.svelte-roni7d {position:relative;display:flex;align-items:center;background:#ffffff;border:1px solid #52525b;border-radius:0.25rem;transition:border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;}.alviere-search-select__wrapper--focused.svelte-roni7d {border-color:#227e9e;box-shadow:0 0 0 1px #227e9e inset;}
@@ -11930,16 +11930,19 @@ function SearchSelect($$anchor, $$props) {
   function openDropdown() {
     uiLogger.info("SearchSelect: openDropdown", disabled(), readonly());
     if (disabled() || readonly()) return;
-    set(isOpen, true);
+    if (pendingFocusTimer !== null) {
+      clearTimeout(pendingFocusTimer);
+    }
     set(selectedIndex, -1);
     pendingFocusTimer = setTimeout(
       () => {
         pendingFocusTimer = null;
+        set(isOpen, true);
         get$1(searchInputElement) === null || get$1(searchInputElement) === void 0 ? void 0 : get$1(searchInputElement).focus();
+        get$1(eventDispatcher).dispatch(ComponentEvents.SEARCH_SELECT_OPEN, createEventDetail());
       },
       0
     );
-    get$1(eventDispatcher).dispatch(ComponentEvents.SEARCH_SELECT_OPEN, createEventDetail());
   }
   function closeDropdown() {
     uiLogger.info("SearchSelect: closeDropdown", disabled(), readonly());
@@ -11966,6 +11969,9 @@ function SearchSelect($$anchor, $$props) {
       onchange()({ detail: { value: option.value, label: option.label } });
     }
   }
+  function getOptionId(index2) {
+    return `${id() || name() || "alviere-search-select"}-option-${index2}`;
+  }
   function scrollHighlightedOptionIntoView(index2) {
     if (!get$1(optionsListElement) || index2 < 0) return;
     const optionItems = get$1(optionsListElement).querySelectorAll(".alviere-search-select__option-item");
@@ -12465,23 +12471,21 @@ function SearchSelect($$anchor, $$props) {
                 let classes_2;
                 div_10.__pointerdown = (e) => e.preventDefault();
                 div_10.__click = () => selectOption(get$1(option));
-                div_10.__keydown = (e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    selectOption(get$1(option));
-                  }
-                };
                 var text_4 = child(div_10, true);
                 reset(div_10);
-                template_effect(() => {
-                  classes_2 = set_class(div_10, 1, "alviere-search-select__option-item svelte-roni7d", null, classes_2, {
-                    selected: get$1(option).value === value(),
-                    highlighted: index2 === get$1(selectedIndex)
-                  });
-                  set_attribute(div_10, "aria-selected", get$1(option).value === value());
-                  set_attribute(div_10, "aria-label", get$1(option).label);
-                  set_text(text_4, get$1(option).label);
-                });
+                template_effect(
+                  ($0) => {
+                    set_attribute(div_10, "id", $0);
+                    classes_2 = set_class(div_10, 1, "alviere-search-select__option-item svelte-roni7d", null, classes_2, {
+                      selected: get$1(option).value === value(),
+                      highlighted: index2 === get$1(selectedIndex)
+                    });
+                    set_attribute(div_10, "aria-selected", get$1(option).value === value());
+                    set_attribute(div_10, "aria-label", get$1(option).label);
+                    set_text(text_4, get$1(option).label);
+                  },
+                  [() => getOptionId(index2)]
+                );
                 event$1("mouseenter", div_10, () => set(selectedIndex, index2, true));
                 append($$anchor5, div_10);
               });
@@ -12570,7 +12574,7 @@ function SearchSelect($$anchor, $$props) {
   reset(div);
   bind_this(div, ($$value) => set(containerElement, $$value), () => get$1(containerElement));
   template_effect(
-    ($0) => {
+    ($0, $1) => {
       set_class(div, 1, `alviere-search-select alviere-search-select--${size() ?? ""}`, "svelte-roni7d");
       classes = set_class(div_2, 1, "alviere-search-select__wrapper svelte-roni7d", null, classes, $0);
       set_attribute(input, "placeholder", get$1(isOpen) || baseInput.state.isFocused ? searchPlaceholder() || `Search ${label() || "options"}...` : "");
@@ -12581,6 +12585,7 @@ function SearchSelect($$anchor, $$props) {
       set_attribute(input, "autocomplete", autocomplete());
       set_attribute(input, "aria-expanded", get$1(isOpen));
       set_attribute(input, "aria-controls", `${(id() || name()) ?? ""}-dropdown`);
+      set_attribute(input, "aria-activedescendant", $1);
       set_attribute(input, "aria-labelledby", label() && (id() || name()) ? `${id() || name()}-label` : void 0);
       classes_1 = set_class(button_1, 1, "alviere-search-select__dropdown-arrow svelte-roni7d", null, classes_1, { open: get$1(isOpen) });
       button_1.disabled = disabled() || readonly();
@@ -12594,7 +12599,8 @@ function SearchSelect($$anchor, $$props) {
         "alviere-search-select__wrapper--disabled": disabled(),
         "alviere-search-select__wrapper--readonly": readonly(),
         "alviere-search-select__wrapper--dirty": !!get$1(displayValue)()
-      })
+      }),
+      () => get$1(isOpen) && get$1(selectedIndex) >= 0 ? getOptionId(get$1(selectedIndex)) : void 0
     ]
   );
   event$1("focus", input, handleInputFocus);
@@ -16460,7 +16466,7 @@ var root_6$3 = /* @__PURE__ */ from_html(`<div class="bank-accounts-section__car
 var root_9$3 = /* @__PURE__ */ from_html(`<div class="bank-accounts-section__card-content__info-row svelte-t9z8bl"><span class="label svelte-t9z8bl"> </span> <span class="value svelte-t9z8bl"> </span></div>`);
 var root_4$5 = /* @__PURE__ */ from_html(`<alviere-list-item><div slot="leading"><alviere-badge> </alviere-badge></div> <div slot="primary-text"><span> </span></div> <div slot="badges"><!></div> <div slot="actions"><alviere-button></alviere-button> <alviere-button></alviere-button></div> <div slot="expanded-content"><div class="bank-accounts-section__card-content svelte-t9z8bl"><div class="bank-accounts-section__card-content__info-row svelte-t9z8bl"><span class="label svelte-t9z8bl"> </span> <span class="value svelte-t9z8bl"> </span></div> <div class="bank-accounts-section__card-content__info-row svelte-t9z8bl"><span class="label svelte-t9z8bl"> </span> <span class="value svelte-t9z8bl"> </span></div> <!> <!></div></div></alviere-list-item>`, 2);
 var root_10$2 = /* @__PURE__ */ from_html(`<div class="form-status svelte-t9z8bl"><span class="validation-error svelte-t9z8bl" role="alert"> </span></div>`);
-var root_3$6 = /* @__PURE__ */ from_html(`<div class="bank-accounts-section svelte-t9z8bl"><div class="alviere-add-bank-account__header svelte-t9z8bl"><h2 class="svelte-t9z8bl"> </h2> <alviere-button> </alviere-button></div> <alviere-list></alviere-list> <div class="alviere-add-bank-account__footer svelte-t9z8bl"><!> <div class="alviere-add-bank-account__notice svelte-t9z8bl"><!></div> <alviere-button> </alviere-button></div></div>`, 2);
+var root_3$6 = /* @__PURE__ */ from_html(`<div class="bank-accounts-section svelte-t9z8bl"><div class="alviere-add-bank-account__header svelte-t9z8bl"><h2 tabindex="-1" class="svelte-t9z8bl"> </h2> <alviere-button> </alviere-button></div> <alviere-list></alviere-list> <div class="alviere-add-bank-account__footer svelte-t9z8bl"><!> <div class="alviere-add-bank-account__notice svelte-t9z8bl"><!></div> <alviere-button> </alviere-button></div></div>`, 2);
 var root_12 = /* @__PURE__ */ from_html(`<alviere-button><span class="alviere-add-bank-account__button__label" aria-hidden="true"> </span></alviere-button>`, 2);
 var root_15$1 = /* @__PURE__ */ from_html(`<div class="routing-info svelte-t9z8bl"><div class="routing-info-header svelte-t9z8bl"><span class="bank-name svelte-t9z8bl"> </span></div></div>`);
 var root_16$1 = /* @__PURE__ */ from_html(`<alviere-spinner></alviere-spinner>`, 2);
@@ -16473,11 +16479,11 @@ var root_23$1 = /* @__PURE__ */ from_html(`<span class="validation-error svelte-
 var root_25 = /* @__PURE__ */ from_html(`<span class="validation-error svelte-t9z8bl"> </span>`);
 var root_27 = /* @__PURE__ */ from_html(`<span class="validation-hint svelte-t9z8bl"> </span>`);
 var root_28 = /* @__PURE__ */ from_html(`<div class="alviere-add-bank-account__notice svelte-t9z8bl"><!></div>`);
-var root_11 = /* @__PURE__ */ from_html(`<form novalidate="" class="alviere-add-bank-account__form svelte-t9z8bl"><div class="alviere-add-bank-account__header svelte-t9z8bl"><h2 class="svelte-t9z8bl"> </h2> <!></div> <div class="alviere-add-bank-account__form__section"><!> <div class="alviere-add-bank-account__form__row svelte-t9z8bl"><alviere-checkbox></alviere-checkbox></div></div> <div class="form-actions svelte-t9z8bl"><div class="form-status svelte-t9z8bl"><!></div> <!> <alviere-button> </alviere-button></div></form>`, 2);
+var root_11 = /* @__PURE__ */ from_html(`<form novalidate="" class="alviere-add-bank-account__form svelte-t9z8bl"><div class="alviere-add-bank-account__header svelte-t9z8bl"><h2 tabindex="-1" class="svelte-t9z8bl"> </h2> <!></div> <div class="alviere-add-bank-account__form__section"><!> <div class="alviere-add-bank-account__form__row svelte-t9z8bl"><alviere-checkbox></alviere-checkbox></div></div> <div class="form-actions svelte-t9z8bl"><div class="form-status svelte-t9z8bl"><!></div> <!> <alviere-button> </alviere-button></div></form>`, 2);
 var root$8 = /* @__PURE__ */ from_html(`<div class="alviere-add-bank-account svelte-t9z8bl"><!> <!> <!> <!></div> <alviere-modal><div class="alviere-add-bank-account__routing-help svelte-t9z8bl"><!> <p class="alviere-add-bank-account__routing-help-text svelte-t9z8bl"> </p></div></alviere-modal> <alviere-modal><div class="alviere-add-bank-account__routing-help svelte-t9z8bl"><!> <p class="alviere-add-bank-account__routing-help-text svelte-t9z8bl"> </p></div></alviere-modal>`, 3);
 const $$css$b = {
   hash: "svelte-t9z8bl",
-  code: `:root {--alv-color-primary: #227e9e;--alv-color-primary-hover: #1b6680;--alv-color-primary-active: #145164;--alv-color-primary-light: #e8f4f8;--alv-color-primary-light-hover: #d1e8f0;--alv-color-on-primary: #ffffff;--alv-color-success: #436b1d;--alv-color-success-light: #d4edda;--alv-color-success-border: #c3e6cb;--alv-color-success-text: #155724;--alv-color-on-success: #ffffff;--alv-color-success-rgb: 67, 107, 29;--alv-color-error: #b3311f;--alv-color-error-light: #f8d7da;--alv-color-error-border: #f5c6cb;--alv-color-error-text: #721c24;--alv-color-on-error: #ffffff;--alv-color-error-rgb: 179, 49, 31;--alv-color-warning: #ffc107;--alv-color-warning-light: #fff3cd;--alv-color-warning-border: #ffeaa7;--alv-color-warning-text: #856404;--alv-color-on-warning: #000000;--alv-color-info: #175db8;--alv-color-info-light: #d1ecf1;--alv-color-info-border: #bee5eb;--alv-color-info-text: #0c5460;--alv-color-on-info: #ffffff;--alv-color-gray-50: #fafafa;--alv-color-gray-100: #f4f4f5;--alv-color-gray-200: #e4e4e7;--alv-color-gray-300: #d4d4d8;--alv-color-gray-400: #a1a1aa;--alv-color-gray-500: #71717a;--alv-color-gray-600: #52525b;--alv-color-gray-700: #3f3f46;--alv-color-gray-800: #27272a;--alv-color-gray-900: #18181b;--alv-color-surface: #ffffff;--alv-color-surface-secondary: #f9fafb;--alv-color-surface-tertiary: #f4f4f5;--alv-color-surface-elevated: #ffffff;--alv-color-text-primary: #18181b;--alv-color-text-secondary: #52525b;--alv-color-text-tertiary: #71717a;--alv-color-text-disabled: #a1a1aa;--alv-color-text-on-primary: #ffffff;--alv-color-text-on-surface: #18181b;--alv-color-border: #e4e4e7;--alv-color-border-hover: #d4d4d8;--alv-color-border-focus: #227e9e;--alv-color-border-error: #b3311f;--alv-color-border-success: #436b1d;--alv-color-background: #ffffff;--alv-color-background-disabled: #f4f4f5;--alv-color-background-hover: #f9fafb;--alv-color-background-active: #f4f4f5;}:root {--alv-font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;--alv-font-family-grotesque: 'Darker Grotesque', sans-serif;--alv-font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;--alv-font-size-3xs: 0.625rem;--alv-font-size-2xs: 0.75rem;--alv-font-size-xs: 1rem;--alv-font-size-sm: 1.125rem;--alv-font-size-base: 1.25rem;--alv-font-size-lg: 1.5rem;--alv-font-size-xl: 1.75rem;--alv-font-weight-light: 300;--alv-font-weight-normal: 400;--alv-font-weight-medium: 500;--alv-font-weight-semibold: 600;--alv-font-weight-bold: 700;--alv-line-height-tight: 1.25;--alv-line-height-normal: 1.5;--alv-line-height-relaxed: 1.75;}:root {--alv-spacing-xs: 0.25rem;--alv-spacing-sm: 0.5rem;--alv-spacing-md: 1rem;--alv-spacing-lg: 1.5rem;--alv-spacing-xl: 2rem;--alv-spacing-2xl: 3rem;--alv-spacing-3xl: 4rem;}:root {--alv-border-radius-none: 0;--alv-border-radius-sm: 0.125rem;--alv-border-radius: 0.25rem;--alv-border-radius-md: 0.375rem;--alv-border-radius-lg: 0.5rem;--alv-border-radius-xl: 0.75rem;--alv-border-radius-2xl: 1rem;--alv-border-radius-full: 9999px;}:root {--alv-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--alv-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);--alv-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--alv-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--alv-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--alv-shadow-none: none;}:root {--alv-transition-fast: 150ms ease-in-out;--alv-transition-normal: 250ms ease-in-out;--alv-transition-slow: 350ms ease-in-out;--alv-transition-none: none;}:root {--alv-input-height-sm: 2.5rem;--alv-input-height: 3.25rem;--alv-input-height-lg: 3.75rem;--alv-input-padding-x: 0.75rem;--alv-input-padding-y: 0.5rem;--alv-input-border-color: var(--alv-color-border);--alv-input-border-hover: var(--alv-color-border-hover);--alv-input-border-focus: var(--alv-color-border-focus);--alv-input-bg: var(--alv-color-background);--alv-input-bg-disabled: var(--alv-color-background-disabled);}:root {--alv-z-dropdown: 1000;--alv-z-sticky: 1020;--alv-z-fixed: 1030;--alv-z-modal-backdrop: 1040;--alv-z-modal: 1050;--alv-z-popover: 1060;--alv-z-tooltip: 1070;}:root {--alv-button-primary-bg: var(--alv-color-primary);--alv-button-primary-bg-hover: var(--alv-color-primary-hover);--alv-button-primary-bg-active: var(--alv-color-primary-active);--alv-button-primary-text: var(--alv-color-on-primary);--alv-button-primary-border: var(--alv-color-primary);--alv-button-secondary-bg: transparent;--alv-button-secondary-bg-hover: var(--alv-color-primary-light);--alv-button-secondary-bg-active: var(--alv-color-primary-light-hover);--alv-button-secondary-text: var(--alv-color-primary);--alv-button-secondary-border: var(--alv-color-primary);--alv-button-tertiary-bg: transparent;--alv-button-tertiary-bg-hover: var(--alv-color-gray-100);--alv-button-tertiary-bg-active: var(--alv-color-gray-200);--alv-button-tertiary-text: var(--alv-color-text-primary);--alv-button-tertiary-border: transparent;--alv-button-link-bg: transparent;--alv-button-link-bg-hover: transparent;--alv-button-link-bg-active: transparent;--alv-button-link-text: var(--alv-color-primary);--alv-button-link-text-hover: var(--alv-color-primary-hover);--alv-button-link-border: transparent;}:root {--alv-spinner-color: var(--alv-color-text-primary);--alv-spinner-size-sm: 1rem;--alv-spinner-size-md: 1.5rem;--alv-spinner-size-lg: 4rem;--alv-spinner-stroke-width: 2px;}:root {--alv-timeline-color: var(--alv-color-gray-600);--alv-timeline-completed-color: var(--alv-color-success);--alv-timeline-error-color: var(--alv-color-error);--alv-timeline-pending-color: var(--alv-color-gray-400);--alv-timeline-step-size-sm: 1.25rem;--alv-timeline-step-size-md: 2rem;--alv-timeline-step-size-lg: 2.5rem;--alv-timeline-connector-width: 3px;--alv-timeline-font-size: var(--alv-font-size-base);}:root {--alv-badge-primary-bg: var(--alv-color-primary);--alv-badge-primary-text: var(--alv-color-on-primary);--alv-badge-secondary-bg: var(--alv-color-gray-200);--alv-badge-secondary-text: var(--alv-color-text-primary);--alv-badge-success-bg: var(--alv-color-success);--alv-badge-success-text: var(--alv-color-on-success);--alv-badge-error-bg: var(--alv-color-error);--alv-badge-error-text: var(--alv-color-on-error);--alv-badge-warning-bg: var(--alv-color-warning);--alv-badge-warning-text: var(--alv-color-on-warning);--alv-badge-info-bg: var(--alv-color-info);--alv-badge-info-text: var(--alv-color-on-info);}:root {--alv-list-bg: var(--alv-color-surface);--alv-list-border: var(--alv-color-border);--alv-list-item-bg: transparent;--alv-list-item-bg-hover: var(--alv-color-background-hover);--alv-list-item-bg-active: var(--alv-color-background-active);--alv-list-item-text: var(--alv-color-text-primary);--alv-list-item-text-secondary: var(--alv-color-text-secondary);}:root {--alv-radio-border: var(--alv-color-border);--alv-radio-border-hover: var(--alv-color-border-hover);--alv-radio-border-focus: var(--alv-color-border-focus);--alv-radio-bg: var(--alv-color-background);--alv-radio-checked-bg: var(--alv-color-primary);--alv-radio-checked-border: var(--alv-color-primary);--alv-radio-text: var(--alv-color-text-primary);--alv-radio-text-disabled: var(--alv-color-text-disabled);}.alviere-add-bank-account.svelte-t9z8bl {max-width:100%;margin:0 auto;font-family:"Darker Grotesque", sans-serif;line-height:1;position:relative;}.alviere-add-bank-account__header.svelte-t9z8bl {display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #eee;}.alviere-add-bank-account__header.svelte-t9z8bl h2:where(.svelte-t9z8bl) {font-size:1.25rem;color:var(--gray-700);margin:0;}
+  code: `:root {--alv-color-primary: #227e9e;--alv-color-primary-hover: #1b6680;--alv-color-primary-active: #145164;--alv-color-primary-light: #e8f4f8;--alv-color-primary-light-hover: #d1e8f0;--alv-color-on-primary: #ffffff;--alv-color-success: #436b1d;--alv-color-success-light: #d4edda;--alv-color-success-border: #c3e6cb;--alv-color-success-text: #155724;--alv-color-on-success: #ffffff;--alv-color-success-rgb: 67, 107, 29;--alv-color-error: #b3311f;--alv-color-error-light: #f8d7da;--alv-color-error-border: #f5c6cb;--alv-color-error-text: #721c24;--alv-color-on-error: #ffffff;--alv-color-error-rgb: 179, 49, 31;--alv-color-warning: #ffc107;--alv-color-warning-light: #fff3cd;--alv-color-warning-border: #ffeaa7;--alv-color-warning-text: #856404;--alv-color-on-warning: #000000;--alv-color-info: #175db8;--alv-color-info-light: #d1ecf1;--alv-color-info-border: #bee5eb;--alv-color-info-text: #0c5460;--alv-color-on-info: #ffffff;--alv-color-gray-50: #fafafa;--alv-color-gray-100: #f4f4f5;--alv-color-gray-200: #e4e4e7;--alv-color-gray-300: #d4d4d8;--alv-color-gray-400: #a1a1aa;--alv-color-gray-500: #71717a;--alv-color-gray-600: #52525b;--alv-color-gray-700: #3f3f46;--alv-color-gray-800: #27272a;--alv-color-gray-900: #18181b;--alv-color-surface: #ffffff;--alv-color-surface-secondary: #f9fafb;--alv-color-surface-tertiary: #f4f4f5;--alv-color-surface-elevated: #ffffff;--alv-color-text-primary: #18181b;--alv-color-text-secondary: #52525b;--alv-color-text-tertiary: #71717a;--alv-color-text-disabled: #a1a1aa;--alv-color-text-on-primary: #ffffff;--alv-color-text-on-surface: #18181b;--alv-color-border: #e4e4e7;--alv-color-border-hover: #d4d4d8;--alv-color-border-focus: #227e9e;--alv-color-border-error: #b3311f;--alv-color-border-success: #436b1d;--alv-color-background: #ffffff;--alv-color-background-disabled: #f4f4f5;--alv-color-background-hover: #f9fafb;--alv-color-background-active: #f4f4f5;}:root {--alv-font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;--alv-font-family-grotesque: 'Darker Grotesque', sans-serif;--alv-font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;--alv-font-size-3xs: 0.625rem;--alv-font-size-2xs: 0.75rem;--alv-font-size-xs: 1rem;--alv-font-size-sm: 1.125rem;--alv-font-size-base: 1.25rem;--alv-font-size-lg: 1.5rem;--alv-font-size-xl: 1.75rem;--alv-font-weight-light: 300;--alv-font-weight-normal: 400;--alv-font-weight-medium: 500;--alv-font-weight-semibold: 600;--alv-font-weight-bold: 700;--alv-line-height-tight: 1.25;--alv-line-height-normal: 1.5;--alv-line-height-relaxed: 1.75;}:root {--alv-spacing-xs: 0.25rem;--alv-spacing-sm: 0.5rem;--alv-spacing-md: 1rem;--alv-spacing-lg: 1.5rem;--alv-spacing-xl: 2rem;--alv-spacing-2xl: 3rem;--alv-spacing-3xl: 4rem;}:root {--alv-border-radius-none: 0;--alv-border-radius-sm: 0.125rem;--alv-border-radius: 0.25rem;--alv-border-radius-md: 0.375rem;--alv-border-radius-lg: 0.5rem;--alv-border-radius-xl: 0.75rem;--alv-border-radius-2xl: 1rem;--alv-border-radius-full: 9999px;}:root {--alv-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--alv-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);--alv-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--alv-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--alv-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--alv-shadow-none: none;}:root {--alv-transition-fast: 150ms ease-in-out;--alv-transition-normal: 250ms ease-in-out;--alv-transition-slow: 350ms ease-in-out;--alv-transition-none: none;}:root {--alv-input-height-sm: 2.5rem;--alv-input-height: 3.25rem;--alv-input-height-lg: 3.75rem;--alv-input-padding-x: 0.75rem;--alv-input-padding-y: 0.5rem;--alv-input-border-color: var(--alv-color-border);--alv-input-border-hover: var(--alv-color-border-hover);--alv-input-border-focus: var(--alv-color-border-focus);--alv-input-bg: var(--alv-color-background);--alv-input-bg-disabled: var(--alv-color-background-disabled);}:root {--alv-z-dropdown: 1000;--alv-z-sticky: 1020;--alv-z-fixed: 1030;--alv-z-modal-backdrop: 1040;--alv-z-modal: 1050;--alv-z-popover: 1060;--alv-z-tooltip: 1070;}:root {--alv-button-primary-bg: var(--alv-color-primary);--alv-button-primary-bg-hover: var(--alv-color-primary-hover);--alv-button-primary-bg-active: var(--alv-color-primary-active);--alv-button-primary-text: var(--alv-color-on-primary);--alv-button-primary-border: var(--alv-color-primary);--alv-button-secondary-bg: transparent;--alv-button-secondary-bg-hover: var(--alv-color-primary-light);--alv-button-secondary-bg-active: var(--alv-color-primary-light-hover);--alv-button-secondary-text: var(--alv-color-primary);--alv-button-secondary-border: var(--alv-color-primary);--alv-button-tertiary-bg: transparent;--alv-button-tertiary-bg-hover: var(--alv-color-gray-100);--alv-button-tertiary-bg-active: var(--alv-color-gray-200);--alv-button-tertiary-text: var(--alv-color-text-primary);--alv-button-tertiary-border: transparent;--alv-button-link-bg: transparent;--alv-button-link-bg-hover: transparent;--alv-button-link-bg-active: transparent;--alv-button-link-text: var(--alv-color-primary);--alv-button-link-text-hover: var(--alv-color-primary-hover);--alv-button-link-border: transparent;}:root {--alv-spinner-color: var(--alv-color-text-primary);--alv-spinner-size-sm: 1rem;--alv-spinner-size-md: 1.5rem;--alv-spinner-size-lg: 4rem;--alv-spinner-stroke-width: 2px;}:root {--alv-timeline-color: var(--alv-color-gray-600);--alv-timeline-completed-color: var(--alv-color-success);--alv-timeline-error-color: var(--alv-color-error);--alv-timeline-pending-color: var(--alv-color-gray-400);--alv-timeline-step-size-sm: 1.25rem;--alv-timeline-step-size-md: 2rem;--alv-timeline-step-size-lg: 2.5rem;--alv-timeline-connector-width: 3px;--alv-timeline-font-size: var(--alv-font-size-base);}:root {--alv-badge-primary-bg: var(--alv-color-primary);--alv-badge-primary-text: var(--alv-color-on-primary);--alv-badge-secondary-bg: var(--alv-color-gray-200);--alv-badge-secondary-text: var(--alv-color-text-primary);--alv-badge-success-bg: var(--alv-color-success);--alv-badge-success-text: var(--alv-color-on-success);--alv-badge-error-bg: var(--alv-color-error);--alv-badge-error-text: var(--alv-color-on-error);--alv-badge-warning-bg: var(--alv-color-warning);--alv-badge-warning-text: var(--alv-color-on-warning);--alv-badge-info-bg: var(--alv-color-info);--alv-badge-info-text: var(--alv-color-on-info);}:root {--alv-list-bg: var(--alv-color-surface);--alv-list-border: var(--alv-color-border);--alv-list-item-bg: transparent;--alv-list-item-bg-hover: var(--alv-color-background-hover);--alv-list-item-bg-active: var(--alv-color-background-active);--alv-list-item-text: var(--alv-color-text-primary);--alv-list-item-text-secondary: var(--alv-color-text-secondary);}:root {--alv-radio-border: var(--alv-color-border);--alv-radio-border-hover: var(--alv-color-border-hover);--alv-radio-border-focus: var(--alv-color-border-focus);--alv-radio-bg: var(--alv-color-background);--alv-radio-checked-bg: var(--alv-color-primary);--alv-radio-checked-border: var(--alv-color-primary);--alv-radio-text: var(--alv-color-text-primary);--alv-radio-text-disabled: var(--alv-color-text-disabled);}.alviere-add-bank-account.svelte-t9z8bl {max-width:100%;margin:0 auto;font-family:"Darker Grotesque", sans-serif;line-height:1;position:relative;}.alviere-add-bank-account__header.svelte-t9z8bl {display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #eee;}.alviere-add-bank-account__header.svelte-t9z8bl h2:where(.svelte-t9z8bl) {font-size:1.25rem;color:var(--gray-700);margin:0;}.alviere-add-bank-account__header.svelte-t9z8bl h2:where(.svelte-t9z8bl):focus {outline:none;}
 @media (max-width: 768px) {.alviere-add-bank-account__header.svelte-t9z8bl {justify-content:space-between;}
 }
 @media (max-width: 768px) {.alviere-add-bank-account__header.svelte-t9z8bl .alviere-add-bank-account__button__label {display:none;}
@@ -16756,7 +16762,11 @@ function AddBankAccount($$anchor, $$props) {
   let isRoutingHelpOpen = /* @__PURE__ */ state(false);
   let isAccountHelpOpen = /* @__PURE__ */ state(false);
   const isFormBusy = /* @__PURE__ */ user_derived(() => get$1(isCheckingBankAccounts) || get$1(isSubmitting));
+  const isAddFormVisible = /* @__PURE__ */ user_derived(() => get$1(showAddForm) || !get$1(isCheckingBankAccounts) && get$1(bankAccounts).bank_accounts.length === 0);
+  const isListViewVisible = /* @__PURE__ */ user_derived(() => !get$1(isCheckingBankAccounts) && !get$1(showAddForm) && get$1(bankAccounts).bank_accounts.length > 0);
   let hostElement = /* @__PURE__ */ state(null);
+  let formHeadingElement = /* @__PURE__ */ state(null);
+  let listHeadingElement = /* @__PURE__ */ state(null);
   const INVALID_ROUTING_NUMBER_MESSAGE = "Routing number is not valid";
   const getFieldErrorMessage = (fieldKey, ruleKey, fallback) => {
     var _a3, _b2;
@@ -16768,13 +16778,22 @@ function AddBankAccount($$anchor, $$props) {
   };
   const hasCredentials = /* @__PURE__ */ user_derived(() => jwt() && accountUuid());
   user_effect(() => {
-    const shouldShowForm = get$1(showAddForm) || !get$1(isCheckingBankAccounts) && get$1(bankAccounts).bank_accounts.length === 0;
-    if (shouldShowForm) {
+    if (get$1(isAddFormVisible)) {
       const newExternalId = `bank-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
       baseForm.state.formData.external_id = newExternalId;
       uiLogger.info("🔄 Generated new external_id for bank account:", newExternalId);
     }
   });
+  user_effect(() => {
+    if (get$1(isAddFormVisible) && get$1(formHeadingElement)) {
+      get$1(formHeadingElement).focus();
+    }
+  });
+  user_effect(() => {
+    if (get$1(isListViewVisible) && get$1(listHeadingElement)) {
+      get$1(listHeadingElement).focus();
+    }
+  });
   user_effect(() => {
     const routingNumber = baseForm.state.formData.ach_details.routing_number;
     const currentFieldError = untrack$1(() => baseForm.state.validationErrors.ach_routing_number);
@@ -17246,6 +17265,7 @@ function AddBankAccount($$anchor, $$props) {
       var h2 = child(div_3);
       var text2 = child(h2);
       reset(h2);
+      bind_this(h2, ($$value) => set(listHeadingElement, $$value), () => get$1(listHeadingElement));
       var alviere_button = sibling(h2, 2);
       set_custom_element_data(alviere_button, "variant", "secondary");
       set_custom_element_data(alviere_button, "handler", () => set(showAddForm, true));
@@ -17537,7 +17557,7 @@ function AddBankAccount($$anchor, $$props) {
       append($$anchor2, div_2);
     };
     if_block(node_2, ($$render) => {
-      if (!get$1(isCheckingBankAccounts) && !get$1(showAddForm) && get$1(bankAccounts).bank_accounts.length) $$render(consequent_8);
+      if (get$1(isListViewVisible)) $$render(consequent_8);
     });
   }
   var node_10 = sibling(node_2, 2);
@@ -17548,6 +17568,7 @@ function AddBankAccount($$anchor, $$props) {
       var h2_1 = child(div_19);
       var text_19 = child(h2_1, true);
       reset(h2_1);
+      bind_this(h2_1, ($$value) => set(formHeadingElement, $$value), () => get$1(formHeadingElement));
       var node_11 = sibling(h2_1, 2);
       {
         var consequent_9 = ($$anchor3) => {
@@ -18069,7 +18090,7 @@ function AddBankAccount($$anchor, $$props) {
       append($$anchor2, form);
     };
     if_block(node_10, ($$render) => {
-      if (get$1(showAddForm) || !get$1(isCheckingBankAccounts) && !get$1(bankAccounts).bank_accounts.length) $$render(consequent_24);
+      if (get$1(isAddFormVisible)) $$render(consequent_24);
     });
   }
   reset(div);
@@ -19015,6 +19036,7 @@ function Timeline($$anchor, $$props) {
     template_effect(
       ($0) => {
         set_class(div_4, 1, $0, "svelte-1db5upf");
+        set_attribute(div_4, "aria-current", get$1(step).status === "active" ? "step" : void 0);
         set_attribute(div_6, "data-step-id", get$1(step).id);
       },
       [() => clsx(getStepClass(get$1(step).status))]
@@ -20760,7 +20782,7 @@ var root_7 = /* @__PURE__ */ from_html(`<button><span class="alviere-multi-step-
 var root_6 = /* @__PURE__ */ from_html(`<div class="alviere-multi-step-flow__step-navigation svelte-qf1k5k"></div>`);
 var root_13 = /* @__PURE__ */ from_html(`<div class="error-message svelte-qf1k5k"> </div>`);
 var root_14 = /* @__PURE__ */ from_html(`<div class="error-message svelte-qf1k5k">No step type specified</div>`);
-var root_10 = /* @__PURE__ */ from_html(`<div class="alviere-multi-step-flow__step-content svelte-qf1k5k"><div class="alviere-multi-step-flow__step-content__header svelte-qf1k5k"><h3 class="svelte-qf1k5k"> </h3></div> <div class="alviere-multi-step-flow__step-content__component"><!></div></div>`);
+var root_10 = /* @__PURE__ */ from_html(`<div class="alviere-multi-step-flow__step-content svelte-qf1k5k"><div class="alviere-multi-step-flow__step-content__header svelte-qf1k5k"><h3 tabindex="-1" class="svelte-qf1k5k"> </h3></div> <div class="alviere-multi-step-flow__step-content__component"><!></div></div>`);
 var root_16 = /* @__PURE__ */ from_html(`<p class="flow-complete-message svelte-qf1k5k"><!></p>`);
 var root_15 = /* @__PURE__ */ from_html(`<div class="alviere-multi-step-flow__flow-complete svelte-qf1k5k"><div class="alviere-multi-step-flow__flow-complete__header svelte-qf1k5k"><div class="alviere-multi-step-flow__flow-complete__header__icon svelte-qf1k5k"><!></div></div> <div class="alviere-multi-step-flow__flow-complete__content svelte-qf1k5k"><p> </p> <!></div></div>`);
 var root_18 = /* @__PURE__ */ from_html(`<p class="flow-barrier-status svelte-qf1k5k"> </p>`);
@@ -20780,7 +20802,7 @@ const $$css = {
   animation: svelte-qf1k5k-icon-scale-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;}.alviere-multi-step-flow__flow-error__header__icon.svelte-qf1k5k svg {width:calc(var(--alviere-multi-step-end-size) * 0.75);height:calc(var(--alviere-multi-step-end-size) * 0.75);
   animation: svelte-qf1k5k-svg-scale-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;transform:scale(0);}.alviere-multi-step-flow__flow-error__content.svelte-qf1k5k {text-align:center;}.alviere-multi-step-flow__flow-error__content.svelte-qf1k5k h3:where(.svelte-qf1k5k) {font-size:1.5rem;font-weight:700;color:#b3311f;margin-bottom:1rem;}.alviere-multi-step-flow__flow-error__content.svelte-qf1k5k .flow-error-message:where(.svelte-qf1k5k) {font-size:1.25rem;color:#333;margin-bottom:0.5rem;}.alviere-multi-step-flow__flow-error__content.svelte-qf1k5k .flow-error-code:where(.svelte-qf1k5k) {font-size:1.125rem;color:#666;font-family:"Monaco", "Menlo", "Ubuntu Mono", monospace;margin-top:0.5rem;}.alviere-multi-step-flow__flow-error__content.svelte-qf1k5k .flow-error-description:where(.svelte-qf1k5k) {font-size:1.125rem;color:#666;margin-top:0.25rem;font-style:italic;}.alviere-multi-step-flow__flow-barrier.svelte-qf1k5k {padding:3rem 0;}.alviere-multi-step-flow__flow-barrier__header.svelte-qf1k5k {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;}.alviere-multi-step-flow__flow-barrier__header__icon.svelte-qf1k5k {background-color:#175db8;border-radius:50%;padding:1rem;width:var(--alviere-multi-step-end-size);height:var(--alviere-multi-step-end-size);display:flex;align-items:center;justify-content:center;color:#ffffff;
   animation: svelte-qf1k5k-icon-scale-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;}.alviere-multi-step-flow__flow-barrier__header__icon.svelte-qf1k5k svg {width:calc(var(--alviere-multi-step-end-size) * 0.75);height:calc(var(--alviere-multi-step-end-size) * 0.75);
-  animation: svelte-qf1k5k-svg-scale-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;transform:scale(0);}.alviere-multi-step-flow__flow-barrier__content.svelte-qf1k5k {text-align:center;}.alviere-multi-step-flow__flow-barrier__content.svelte-qf1k5k h3:where(.svelte-qf1k5k) {font-size:1.5rem;font-weight:700;color:#175db8;margin-bottom:1rem;}.alviere-multi-step-flow__flow-barrier__content.svelte-qf1k5k .flow-barrier-message:where(.svelte-qf1k5k) {font-size:1.25rem;color:#333;margin-bottom:0.5rem;}.alviere-multi-step-flow__flow-barrier__content.svelte-qf1k5k .flow-barrier-status:where(.svelte-qf1k5k) {font-size:1.125rem;color:#666;font-family:"Monaco", "Menlo", "Ubuntu Mono", monospace;margin-top:0.5rem;}.alviere-multi-step-flow__flow-barrier__content.svelte-qf1k5k .flow-barrier-description:where(.svelte-qf1k5k) {font-size:1.125rem;color:#666;margin-top:0.25rem;font-style:italic;}.alviere-multi-step-flow__flow-header.svelte-qf1k5k {text-align:center;margin-bottom:2rem;}.alviere-multi-step-flow__flow-title.svelte-qf1k5k {font-size:2rem;}.alviere-multi-step-flow__flow-description.svelte-qf1k5k {color:#666;font-size:1.1rem;}.alviere-multi-step-flow__step-navigation.svelte-qf1k5k {display:flex;gap:0.5rem;margin-bottom:2rem;flex-wrap:wrap;}.alviere-multi-step-flow__step-navigation__button.svelte-qf1k5k {display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;border:1px solid #ddd;background:white;border-radius:6px;cursor:pointer;transition:all 0.2s ease;font-size:0.9rem;}.alviere-multi-step-flow__step-navigation__button.svelte-qf1k5k:hover:not(:disabled) {background:#f8f9fa;border-color:#007bff;}.alviere-multi-step-flow__step-navigation__button.svelte-qf1k5k:disabled {opacity:0.5;cursor:not-allowed;}.alviere-multi-step-flow__step-navigation__button--active.svelte-qf1k5k {background:#227e9e;color:white;border-color:#227e9e;}.alviere-multi-step-flow__step-navigation__button--completed.svelte-qf1k5k {background:#436b1d;color:white;border-color:#436b1d;}.alviere-multi-step-flow__step-navigation__button--error.svelte-qf1k5k {background:#b3311f;color:white;border-color:#b3311f;}.alviere-multi-step-flow__step-navigation__button--info.svelte-qf1k5k {background:#175db8;color:white;border-color:#175db8;}.alviere-multi-step-flow__step-navigation__button--warning.svelte-qf1k5k {background:#ffc107;color:#000000;border-color:#ffc107;}.alviere-multi-step-flow__step-navigation__number.svelte-qf1k5k {font-weight:bold;min-width:1.5rem;text-align:center;}.alviere-multi-step-flow__step-navigation__label.svelte-qf1k5k {flex:1;}.alviere-multi-step-flow__step-navigation__status.svelte-qf1k5k {font-size:1.2rem;}.alviere-multi-step-flow__step-content.svelte-qf1k5k {margin-bottom:2rem;}.alviere-multi-step-flow__step-content__header.svelte-qf1k5k {display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}.alviere-multi-step-flow__step-content__header.svelte-qf1k5k h3:where(.svelte-qf1k5k) {font-size:1.25rem;}.alviere-multi-step-flow__flow-navigation.svelte-qf1k5k {display:flex;gap:1rem;justify-content:center;margin-top:2rem;}.alviere-multi-step-flow__flow-navigation__button.svelte-qf1k5k {padding:0.75rem 1.5rem;border:none;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:500;transition:background 0.2s ease;}.alviere-multi-step-flow__flow-navigation__button.svelte-qf1k5k:disabled {opacity:0.5;cursor:not-allowed;}.alviere-multi-step-flow__flow-navigation__button-previous.svelte-qf1k5k {background:#6c757d;color:white;}.alviere-multi-step-flow__flow-navigation__button-previous.svelte-qf1k5k:hover:not(:disabled) {background:#545b62;}.alviere-multi-step-flow__flow-navigation__button--next.svelte-qf1k5k {background:#007bff;color:white;}.alviere-multi-step-flow__flow-navigation__button--next.svelte-qf1k5k:hover:not(:disabled) {background:#0056b3;}.flow-progress.svelte-qf1k5k {margin-bottom:2rem;}.progress-bar.svelte-qf1k5k {width:100%;height:8px;background:#e9ecef;border-radius:4px;overflow:hidden;margin-bottom:0.5rem;}.progress-fill.svelte-qf1k5k {height:100%;background:#007bff;transition:width 0.3s ease;}.progress-text.svelte-qf1k5k {text-align:center;font-size:0.9rem;color:#666;}.step-component.svelte-qf1k5k {background:white;}.flow-complete.svelte-qf1k5k {text-align:center;padding:2rem;background:#d4edda;border:1px solid #c3e6cb;border-radius:8px;margin-top:2rem;}.step-results.svelte-qf1k5k {margin-top:1rem;text-align:left;}.result-item.svelte-qf1k5k {margin-bottom:1rem;padding:1rem;background:white;border-radius:4px;border:1px solid #c3e6cb;}.error-message.svelte-qf1k5k {background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;border-radius:4px;padding:1rem;margin-top:1rem;text-align:center;}
+  animation: svelte-qf1k5k-svg-scale-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;transform:scale(0);}.alviere-multi-step-flow__flow-barrier__content.svelte-qf1k5k {text-align:center;}.alviere-multi-step-flow__flow-barrier__content.svelte-qf1k5k h3:where(.svelte-qf1k5k) {font-size:1.5rem;font-weight:700;color:#175db8;margin-bottom:1rem;}.alviere-multi-step-flow__flow-barrier__content.svelte-qf1k5k .flow-barrier-message:where(.svelte-qf1k5k) {font-size:1.25rem;color:#333;margin-bottom:0.5rem;}.alviere-multi-step-flow__flow-barrier__content.svelte-qf1k5k .flow-barrier-status:where(.svelte-qf1k5k) {font-size:1.125rem;color:#666;font-family:"Monaco", "Menlo", "Ubuntu Mono", monospace;margin-top:0.5rem;}.alviere-multi-step-flow__flow-barrier__content.svelte-qf1k5k .flow-barrier-description:where(.svelte-qf1k5k) {font-size:1.125rem;color:#666;margin-top:0.25rem;font-style:italic;}.alviere-multi-step-flow__flow-header.svelte-qf1k5k {text-align:center;margin-bottom:2rem;}.alviere-multi-step-flow__flow-title.svelte-qf1k5k {font-size:2rem;}.alviere-multi-step-flow__flow-description.svelte-qf1k5k {color:#666;font-size:1.1rem;}.alviere-multi-step-flow__step-navigation.svelte-qf1k5k {display:flex;gap:0.5rem;margin-bottom:2rem;flex-wrap:wrap;}.alviere-multi-step-flow__step-navigation__button.svelte-qf1k5k {display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;border:1px solid #ddd;background:white;border-radius:6px;cursor:pointer;transition:all 0.2s ease;font-size:0.9rem;}.alviere-multi-step-flow__step-navigation__button.svelte-qf1k5k:hover:not(:disabled) {background:#f8f9fa;border-color:#007bff;}.alviere-multi-step-flow__step-navigation__button.svelte-qf1k5k:disabled {opacity:0.5;cursor:not-allowed;}.alviere-multi-step-flow__step-navigation__button--active.svelte-qf1k5k {background:#227e9e;color:white;border-color:#227e9e;}.alviere-multi-step-flow__step-navigation__button--completed.svelte-qf1k5k {background:#436b1d;color:white;border-color:#436b1d;}.alviere-multi-step-flow__step-navigation__button--error.svelte-qf1k5k {background:#b3311f;color:white;border-color:#b3311f;}.alviere-multi-step-flow__step-navigation__button--info.svelte-qf1k5k {background:#175db8;color:white;border-color:#175db8;}.alviere-multi-step-flow__step-navigation__button--warning.svelte-qf1k5k {background:#ffc107;color:#000000;border-color:#ffc107;}.alviere-multi-step-flow__step-navigation__number.svelte-qf1k5k {font-weight:bold;min-width:1.5rem;text-align:center;}.alviere-multi-step-flow__step-navigation__label.svelte-qf1k5k {flex:1;}.alviere-multi-step-flow__step-navigation__status.svelte-qf1k5k {font-size:1.2rem;}.alviere-multi-step-flow__step-content.svelte-qf1k5k {margin-bottom:2rem;}.alviere-multi-step-flow__step-content__header.svelte-qf1k5k {display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}.alviere-multi-step-flow__step-content__header.svelte-qf1k5k h3:where(.svelte-qf1k5k) {font-size:1.25rem;}.alviere-multi-step-flow__step-content__header.svelte-qf1k5k h3:where(.svelte-qf1k5k):focus {outline:none;}.alviere-multi-step-flow__flow-navigation.svelte-qf1k5k {display:flex;gap:1rem;justify-content:center;margin-top:2rem;}.alviere-multi-step-flow__flow-navigation__button.svelte-qf1k5k {padding:0.75rem 1.5rem;border:none;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:500;transition:background 0.2s ease;}.alviere-multi-step-flow__flow-navigation__button.svelte-qf1k5k:disabled {opacity:0.5;cursor:not-allowed;}.alviere-multi-step-flow__flow-navigation__button-previous.svelte-qf1k5k {background:#6c757d;color:white;}.alviere-multi-step-flow__flow-navigation__button-previous.svelte-qf1k5k:hover:not(:disabled) {background:#545b62;}.alviere-multi-step-flow__flow-navigation__button--next.svelte-qf1k5k {background:#007bff;color:white;}.alviere-multi-step-flow__flow-navigation__button--next.svelte-qf1k5k:hover:not(:disabled) {background:#0056b3;}.flow-progress.svelte-qf1k5k {margin-bottom:2rem;}.progress-bar.svelte-qf1k5k {width:100%;height:8px;background:#e9ecef;border-radius:4px;overflow:hidden;margin-bottom:0.5rem;}.progress-fill.svelte-qf1k5k {height:100%;background:#007bff;transition:width 0.3s ease;}.progress-text.svelte-qf1k5k {text-align:center;font-size:0.9rem;color:#666;}.step-component.svelte-qf1k5k {background:white;}.flow-complete.svelte-qf1k5k {text-align:center;padding:2rem;background:#d4edda;border:1px solid #c3e6cb;border-radius:8px;margin-top:2rem;}.step-results.svelte-qf1k5k {margin-top:1rem;text-align:left;}.result-item.svelte-qf1k5k {margin-bottom:1rem;padding:1rem;background:white;border-radius:4px;border:1px solid #c3e6cb;}.error-message.svelte-qf1k5k {background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;border-radius:4px;padding:1rem;margin-top:1rem;text-align:center;}
 
 @keyframes svelte-qf1k5k-icon-scale-up {
   from {
@@ -20815,6 +20837,7 @@ function MultiStepFlow($$anchor, $$props) {
   debug(debug() === "true");
   debug() && uiLogger.warn("MultiStepFlow initialized, debug:", debug());
   let flowElement = /* @__PURE__ */ state(null);
+  let stepHeadingElement = /* @__PURE__ */ state(null);
   let initialized = /* @__PURE__ */ state(false);
   let error = /* @__PURE__ */ state(null);
   let flowError = /* @__PURE__ */ state(null);
@@ -21042,6 +21065,11 @@ function MultiStepFlow($$anchor, $$props) {
       hasType: !!(get$1(currentStep) === null || get$1(currentStep) === void 0 ? void 0 : get$1(currentStep).type)
     });
   });
+  user_effect(() => {
+    if (get$1(currentStep) && get$1(stepHeadingElement)) {
+      get$1(stepHeadingElement).focus();
+    }
+  });
   onMount(() => {
     var _a3;
     if (jwt() && businessUuid()) {
@@ -21416,9 +21444,10 @@ function MultiStepFlow($$anchor, $$props) {
         }
         reset(button);
         template_effect(
-          ($0, $1) => {
+          ($0, $1, $2) => {
             classes = set_class(button, 1, "alviere-multi-step-flow__step-navigation__button svelte-qf1k5k", null, classes, $0);
             button.disabled = $1;
+            set_attribute(button, "aria-current", $2);
             set_text(text_2, get$1(step).label);
           },
           [
@@ -21429,7 +21458,8 @@ function MultiStepFlow($$anchor, $$props) {
               "alviere-multi-step-flow__step-navigation__button--info": flowManager.stepStatuses[index2] === "INFO_BLOCKED",
               "alviere-multi-step-flow__step-navigation__button--warning": flowManager.stepStatuses[index2] === "ACTION_REQUIRED"
             }),
-            () => index2 > flowManager.getCurrentStepIndex() && !config().allowSkip
+            () => index2 > flowManager.getCurrentStepIndex() && !config().allowSkip,
+            () => index2 === flowManager.getCurrentStepIndex() ? "step" : void 0
           ]
         );
         append($$anchor3, button);
@@ -21449,6 +21479,7 @@ function MultiStepFlow($$anchor, $$props) {
       var h3 = child(div_5);
       var text_3 = child(h3, true);
       reset(h3);
+      bind_this(h3, ($$value) => set(stepHeadingElement, $$value), () => get$1(stepHeadingElement));
       reset(div_5);
       var div_6 = sibling(div_5, 2);
       var node_9 = child(div_6);