@alviere/ui 0.18.1 → 0.18.3

package/dist/index.js

@@ -7987,7 +7987,7 @@ const X = [
 var root_1$d = /* @__PURE__ */ from_html(`<label class="alviere-text-input__label svelte-1auzwdn"> </label>`);
 var root_2$c = /* @__PURE__ */ from_html(`<textarea class="alviere-text-input__textarea svelte-1auzwdn" spellcheck="true"></textarea>`);
 var root_3$d = /* @__PURE__ */ from_html(`<input class="alviere-text-input__input svelte-1auzwdn" spellcheck="true"/>`);
-var root_5$7 = /* @__PURE__ */ from_html(`<button type="button" class="alviere-text-input__action-button svelte-1auzwdn"><span class="alviere-text-input__action-icon svelte-1auzwdn">?</span></button>`);
+var root_5$8 = /* @__PURE__ */ from_html(`<button type="button" class="alviere-text-input__action-button svelte-1auzwdn"><span class="alviere-text-input__action-icon svelte-1auzwdn">?</span></button>`);
 var root_7$3 = /* @__PURE__ */ from_svg(`<svg height="1.5em" width="1.5em" viewBox="0 0 24 24" class="IconStyle_currentColor__sdo2n67" style="font-size: 1em;"><path d="m2.707 1.293 7.17 7.17.002.002 1.504 1.504 7.21 7.21-.001-.001 4.115 4.115-1.414 1.414-4.297-4.296C15.485 19.434 13.82 20 12 20c-2.959 0-5.461-1.46-7.51-3.85a16.59 16.59 0 0 1-1.796-2.56 12.546 12.546 0 0 1-.613-1.197L1.91 12l.17-.395c.11-.252.315-.668.618-1.195.5-.872 1.1-1.743 1.803-2.56.3-.349.614-.68.94-.993l-4.15-4.149zM6.856 8.27l-.256.252c-.199.2-.393.411-.581.63a14.7 14.7 0 0 0-1.843 2.718l-.069.13.145.275.179.322c.439.768.966 1.538 1.578 2.252C7.711 16.835 9.71 18 12 18c1.222 0 2.358-.334 3.426-.962l.123-.076-1.517-1.516A4 4 0 0 1 8.553 9.97zM12 4c2.959 0 5.461 1.46 7.51 3.849a16.59 16.59 0 0 1 1.796 2.56l.208.375c.126.234.228.437.306.603l.1.219.169.395-.17.395a12.7 12.7 0 0 1-.548 1.073c-.37.655-.8 1.318-1.292 1.963l-.302.385-1.553-1.26a14.947 14.947 0 0 0 1.404-2.07l.16-.289.104-.201-.144-.273-.178-.322a14.613 14.613 0 0 0-1.58-2.252C16.289 7.165 14.291 6 12.001 6c-.478 0-.942.05-1.395.151l-.337.085-.537-1.927A8.409 8.409 0 0 1 12 4zm-1.933 7.482-.036.166a2 2 0 0 0 2.321 2.321l.164-.038z" fill="currentcolor" fill-rule="evenodd"></path></svg>`);
 var root_8$4 = /* @__PURE__ */ from_svg(`<svg height="1.5em" width="1.5em" viewBox="0 0 24 24" class="IconStyle_currentColor__sdo2n67" style="font-size: 1em;"><path d="M12 4c4.278 0 7.61 2.667 10 8-2.39 5.333-5.722 8-10 8s-7.61-2.667-10-8c2.39-5.333 5.722-8 10-8zm0 2c-4.41 0-6.707 4.479-7.699 5.999C5.295 13.518 7.604 18 12 18c4.41 0 6.707-4.479 7.699-5.999C18.705 10.482 16.396 6 12 6zm0 2c2.176 0 3.945 1.794 3.945 4s-1.77 4-3.945 4c-2.176 0-3.945-1.794-3.945-4S9.825 8 12 8zm0 2c-1.088 0-1.973.897-1.973 2s.885 2 1.973 2 1.973-.897 1.973-2-.885-2-1.973-2z" fill="currentcolor" fill-rule="evenodd"></path></svg>`);
 var root_6$6 = /* @__PURE__ */ from_html(`<button type="button" class="alviere-text-input__reveal-button svelte-1auzwdn"><!></button>`);
@@ -8612,7 +8612,7 @@ function TextInput($$anchor, $$props) {
       var node_3 = child(div_2);
       {
         var consequent_2 = ($$anchor3) => {
-          var button = root_5$7();
+          var button = root_5$8();
           button.__click = (e) => {
             var _a2;
             e.stopPropagation();
@@ -9591,7 +9591,7 @@ var root_1$b = /* @__PURE__ */ from_html(`<label class="alviere-phone-input__lab
 var root_2$a = /* @__PURE__ */ from_html(`<span class="alviere-phone-input__character-count svelte-15yozux"> </span>`);
 var root_3$c = /* @__PURE__ */ from_html(`<div class="alviere-phone-input__required svelte-15yozux">Required</div>`);
 var root_4$a = /* @__PURE__ */ from_html(`<div class="alviere-phone-input__help svelte-15yozux"><!> </div>`);
-var root_5$6 = /* @__PURE__ */ from_html(`<div class="alviere-phone-input__error svelte-15yozux" 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_5$7 = /* @__PURE__ */ from_html(`<div class="alviere-phone-input__error svelte-15yozux" 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_6$5 = /* @__PURE__ */ from_html(`<div class="alviere-phone-input__warning svelte-15yozux" role="status"><!> </div>`);
 var root$g = /* @__PURE__ */ from_html(`<div><div><!> <input type="tel"/> <!> <!></div> <div class="alviere-phone-input__validation-messages svelte-15yozux"><!> <!> <!></div></div>`);
 const $$css$j = {
@@ -10025,7 +10025,7 @@ function PhoneInput($$anchor, $$props) {
   var node_5 = sibling(node_3, 2);
   {
     var consequent_4 = ($$anchor2) => {
-      var div_5 = root_5$6();
+      var div_5 = root_5$7();
       var text_3 = sibling(child(div_5));
       reset(div_5);
       template_effect(() => {
@@ -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_5$5 = /* @__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_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");
@@ -12435,7 +12441,7 @@ function SearchSelect($$anchor, $$props) {
   var node_6 = sibling(div_2, 2);
   {
     var consequent_6 = ($$anchor2) => {
-      var div_6 = root_5$5();
+      var div_6 = root_5$6();
       var div_7 = child(div_6);
       var node_7 = child(div_7);
       {
@@ -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);
@@ -16453,14 +16459,14 @@ const resetFlowRecipe = flowRecipeStore.reset;
 const routingNumberHelpSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360">\n  <defs>\n    <filter id="soft-blur" x="-10%" y="-10%" width="120%" height="120%">\n      <feGaussianBlur in="SourceGraphic" stdDeviation="1.7" />\n    </filter>\n  </defs>\n\n  \n  <g filter="url(#soft-blur)">\n    <rect x="20" y="24" width="600" height="272" rx="12" fill="#FFFFFF" stroke="#000000" stroke-width="1"/>\n    <rect\n      x="30"\n      y="34"\n      width="580"\n      height="252"\n      rx="10"\n      fill="none"\n      stroke="#D1D5DB"\n      stroke-width="2"\n      stroke-dasharray="1 12"\n      stroke-linecap="round"\n    />\n    <rect\n      x="34"\n      y="38"\n      width="572"\n      height="244"\n      rx="10"\n      fill="none"\n      stroke="#D1D5DB"\n      stroke-width="2"\n      stroke-dasharray="1 6"\n      stroke-linecap="round"\n    />\n\n    <!-- Header (name/address/date) -->\n    <text x="48" y="66" font-family="Arial, sans-serif" font-size="14" fill="#94A3B8">JOHN SMITH</text>\n    <text x="48" y="86" font-family="Arial, sans-serif" font-size="14" fill="#94A3B8">18 PIKE PLACE</text>\n    <text x="48" y="106" font-family="Arial, sans-serif" font-size="14" fill="#94A3B8">SEATTLE, WA 98101</text>\n\n    <text x="560" y="66" font-family="Arial, sans-serif" font-size="14" fill="#94A3B8">123</text>\n    <text x="470" y="96" font-family="Arial, sans-serif" font-size="14" fill="#94A3B8">MARCH 18, 2025</text>\n\n    <!-- Payee and amount placeholders -->\n    <rect x="48" y="134" width="340" height="18" rx="4" fill="#E2E8F0"/>\n    <line x1="48" y1="156" x2="388" y2="156" stroke="#E2E8F0" stroke-width="2"/>\n\n    <rect x="430" y="128" width="162" height="40" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="2"/>\n    <rect x="444" y="140" width="118" height="16" rx="4" fill="#E2E8F0"/>\n\n    <rect x="48" y="176" width="280" height="12" rx="4" fill="#E2E8F0"/>\n    <line x1="48" y1="188" x2="388" y2="188" stroke="#E2E8F0" stroke-width="2"/>\n\n    <!-- Signature -->\n    <path d="M432 214 C440 202, 452 198, 464 210 C472 218, 488 220, 498 210 C508 200, 522 202, 530 212 C538 222, 554 224, 566 214 C576 206, 586 206, 598 214" fill="none" stroke="#64748B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>\n    <line x1="430" y1="226" x2="590" y2="226" stroke="#E2E8F0" stroke-width="2"/>\n\n    <!-- Background routing numbers (blurred) -->\n    <text x="280" y="262" font-family="Arial, sans-serif" font-size="20" fill="#94A3B8">1234567890</text>\n    <text x="486" y="262" font-family="Arial, sans-serif" font-size="20" fill="#94A3B8">123</text>\n  </g>\n\n  <!-- Routing highlight (sharp) -->\n  <rect x="67" y="184" width="170" height="24" rx="12" fill="#E0F2FE" stroke="#38BDF8" stroke-width="2"/>\n  <text x="83" y="201" font-family="Arial, sans-serif" font-size="12" fill="#0F172A" letter-spacing="2">ROUTING NUMBER</text>\n  <line x1="149" y1="208" x2="149" y2="230" stroke="#38BDF8" stroke-width="2"/>\n  <path d="M149 231 L144 224 L154 224 Z" fill="#38BDF8"/>\n\n  <rect x="48" y="236" width="212" height="40" rx="6" fill="#E0F2FE" stroke="#38BDF8" stroke-width="2"/>\n  <text x="102" y="262" font-family="Arial, sans-serif" font-size="20" fill="#0F172A"> 901056783 </text>\n</svg>\n';
 const accountNumberHelpSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360">\n  <defs>\n    <filter id="soft-blur" x="-10%" y="-10%" width="120%" height="120%">\n      <feGaussianBlur in="SourceGraphic" stdDeviation="1.7" />\n    </filter>\n  </defs>\n\n  <g filter="url(#soft-blur)">\n    <rect x="20" y="24" width="600" height="272" rx="12" fill="#FFFFFF" stroke="#000000" stroke-width="1"/>\n    <rect\n      x="30"\n      y="34"\n      width="580"\n      height="252"\n      rx="10"\n      fill="none"\n      stroke="#D1D5DB"\n      stroke-width="2"\n      stroke-dasharray="1 12"\n      stroke-linecap="round"\n    />\n    <rect\n      x="34"\n      y="38"\n      width="572"\n      height="244"\n      rx="10"\n      fill="none"\n      stroke="#D1D5DB"\n      stroke-width="2"\n      stroke-dasharray="1 6"\n      stroke-linecap="round"\n    />\n\n    <text x="48" y="66" font-family="Arial, sans-serif" font-size="14" fill="#94A3B8">JOHN SMITH</text>\n    <text x="48" y="86" font-family="Arial, sans-serif" font-size="14" fill="#94A3B8">18 PIKE PLACE</text>\n    <text x="48" y="106" font-family="Arial, sans-serif" font-size="14" fill="#94A3B8">SEATTLE, WA 98101</text>\n\n    <text x="560" y="66" font-family="Arial, sans-serif" font-size="14" fill="#94A3B8">123</text>\n    <text x="470" y="96" font-family="Arial, sans-serif" font-size="14" fill="#94A3B8">MARCH 18, 2025</text>\n\n    <rect x="48" y="134" width="340" height="18" rx="4" fill="#E2E8F0"/>\n    <line x1="48" y1="156" x2="388" y2="156" stroke="#E2E8F0" stroke-width="2"/>\n\n    <rect x="430" y="128" width="162" height="40" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="2"/>\n    <rect x="444" y="140" width="118" height="16" rx="4" fill="#E2E8F0"/>\n\n    <rect x="48" y="176" width="280" height="12" rx="4" fill="#E2E8F0"/>\n    <line x1="48" y1="188" x2="388" y2="188" stroke="#E2E8F0" stroke-width="2"/>\n\n    <path d="M432 214 C440 202, 452 198, 464 210 C472 218, 488 220, 498 210 C508 200, 522 202, 530 212 C538 222, 554 224, 566 214 C576 206, 586 206, 598 214" fill="none" stroke="#64748B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>\n    <line x1="430" y1="226" x2="590" y2="226" stroke="#E2E8F0" stroke-width="2"/>\n\n    <text x="102" y="262" font-family="Arial, sans-serif" font-size="20" fill="#94A3B8">901056783</text>\n    <text x="486" y="262" font-family="Arial, sans-serif" font-size="20" fill="#94A3B8">123</text>\n  </g>\n\n  <rect x="226" y="184" width="194" height="24" rx="12" fill="#E0F2FE" stroke="#38BDF8" stroke-width="2"/>\n  <text x="257" y="201" font-family="Arial, sans-serif" font-size="12" fill="#0F172A" letter-spacing="1.5">\n    ACCOUNT NUMBER\n  </text>\n  <line x1="321" y1="208" x2="321" y2="230" stroke="#38BDF8" stroke-width="2"/>\n  <path d="M321 231 L316 224 L326 224 Z" fill="#38BDF8"/>\n\n  <rect x="212" y="236" width="224" height="40" rx="6" fill="#E0F2FE" stroke="#38BDF8" stroke-width="2"/>\n  <text x="264" y="262" font-family="Arial, sans-serif" font-size="20" fill="#0F172A">1234567890</text>\n</svg>\n';
 var root_2$4 = /* @__PURE__ */ from_html(`<div class="spinner-container svelte-t9z8bl"><alviere-spinner></alviere-spinner></div>`, 2);
-var root_5$4 = /* @__PURE__ */ from_html(`<alviere-badge> </alviere-badge>`, 2);
+var root_5$5 = /* @__PURE__ */ from_html(`<alviere-badge> </alviere-badge>`, 2);
 var root_7$2 = /* @__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_8$2 = /* @__PURE__ */ from_html(`<div class="bank-accounts-section__card-content__info-row svelte-t9z8bl"><span class="label svelte-t9z8bl"> </span> <span class="value description svelte-t9z8bl"> </span></div>`);
 var root_6$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> <!> <!>`, 1);
 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));
@@ -17283,7 +17303,7 @@ function AddBankAccount($$anchor, $$props) {
         var node_3 = child(div_6);
         {
           var consequent_2 = ($$anchor4) => {
-            var alviere_badge_1 = root_5$4();
+            var alviere_badge_1 = root_5$5();
             set_custom_element_data(alviere_badge_1, "size", "sm");
             set_custom_element_data(alviere_badge_1, "variant", "warning");
             var text_4 = child(alviere_badge_1, 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);
@@ -18077,6 +18098,7 @@ function AddBankAccount($$anchor, $$props) {
   var alviere_modal = sibling(div, 2);
   template_effect(() => set_custom_element_data(alviere_modal, "open", get$1(isRoutingHelpOpen)));
   template_effect(() => set_custom_element_data(alviere_modal, "title", getLabel("routingHelpModalTitleLabel", "Where to find your routing number")));
+  template_effect(() => set_custom_element_data(alviere_modal, "description", getLabel("routingHelpDescriptionLabel", "Your routing number is the first 9 digits located on the bottom left of your checks.")));
   var div_31 = child(alviere_modal);
   var node_30 = child(div_31);
   html(node_30, () => routingNumberHelpSvg);
@@ -18088,6 +18110,7 @@ function AddBankAccount($$anchor, $$props) {
   var alviere_modal_1 = sibling(alviere_modal, 2);
   template_effect(() => set_custom_element_data(alviere_modal_1, "open", get$1(isAccountHelpOpen)));
   template_effect(() => set_custom_element_data(alviere_modal_1, "title", getLabel("accountHelpModalTitleLabel", "Where to find your account number")));
+  template_effect(() => set_custom_element_data(alviere_modal_1, "description", getLabel("accountHelpDescriptionLabel", "Your account number is the group of digits to the right of the routing number at the bottom of your checks.")));
   var div_32 = child(alviere_modal_1);
   var node_31 = child(div_32);
   html(node_31, () => accountNumberHelpSvg);
@@ -18224,7 +18247,7 @@ function createLegalTextsResolver({ getDocumentTypes, getCore }) {
 }
 var root_2$3 = /* @__PURE__ */ from_html(`<div class="spinner-container svelte-1l48sab"><alviere-spinner></alviere-spinner></div>`, 2);
 var root_3$5 = /* @__PURE__ */ from_html(`<alviere-currency-input></alviere-currency-input>`, 2);
-var root_5$3 = /* @__PURE__ */ from_html(`<div class="alviere-checkout-confirm__summary-row svelte-1l48sab"><span class="alviere-checkout-confirm__summary-label svelte-1l48sab"> </span> <span class="alviere-checkout-confirm__summary-value svelte-1l48sab"> </span></div>`);
+var root_5$4 = /* @__PURE__ */ from_html(`<div class="alviere-checkout-confirm__summary-row svelte-1l48sab"><span class="alviere-checkout-confirm__summary-label svelte-1l48sab"> </span> <span class="alviere-checkout-confirm__summary-value svelte-1l48sab"> </span></div>`);
 var root_4$4 = /* @__PURE__ */ from_html(`<section class="alviere-checkout-confirm__summary svelte-1l48sab"><div class="alviere-checkout-confirm__summary-row svelte-1l48sab"><span class="alviere-checkout-confirm__summary-label svelte-1l48sab"> </span> <span class="alviere-checkout-confirm__summary-value svelte-1l48sab"> </span></div> <div class="alviere-checkout-confirm__summary-row svelte-1l48sab"><span class="alviere-checkout-confirm__summary-label svelte-1l48sab"> </span> <span class="alviere-checkout-confirm__summary-value svelte-1l48sab"> </span></div> <!> <div class="alviere-checkout-confirm__summary-divider svelte-1l48sab" aria-hidden="true"></div> <div class="alviere-checkout-confirm__summary-row alviere-checkout-confirm__summary-row--total svelte-1l48sab"><span class="alviere-checkout-confirm__summary-label svelte-1l48sab"> </span> <span class="alviere-checkout-confirm__summary-value svelte-1l48sab"> </span></div></section>`);
 var root_6$2 = /* @__PURE__ */ from_html(`<div class="alviere-checkout-confirm__terms-and-conditions"><p> </p> <alviere-legal-text-consent></alviere-legal-text-consent></div>`, 2);
 var root_7$1 = /* @__PURE__ */ from_html(`<div class="alviere-checkout-confirm__legal-texts-loading svelte-1l48sab"><alviere-spinner></alviere-spinner></div>`, 2);
@@ -18547,7 +18570,7 @@ function CheckoutConfirm($$anchor, $$props) {
       var node_3 = sibling(div_4, 2);
       {
         var consequent_3 = ($$anchor3) => {
-          var div_5 = root_5$3();
+          var div_5 = root_5$4();
           var span_4 = child(div_5);
           var text_4 = child(span_4, true);
           reset(span_4);
@@ -19013,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))]
@@ -19393,7 +19417,7 @@ customElements.define("alviere-checkbox", create_custom_element(
 ));
 var root_1$1 = /* @__PURE__ */ from_html(`<div class="legal-text-consent__loading svelte-te6ayp"><alviere-spinner></alviere-spinner> <span>Loading terms...</span></div>`, 2);
 var root_3$2 = /* @__PURE__ */ from_html(`<div class="legal-text-consent__error svelte-te6ayp"> </div>`);
-var root_5$2 = /* @__PURE__ */ from_html(`<div class="legal-text-consent__item svelte-te6ayp"><alviere-checkbox><span slot="label" class="legal-text-consent__label svelte-te6ayp"><span>I agree to the</span> <button type="button" class="legal-text-consent__link svelte-te6ayp" aria-haspopup="dialog"> </button></span></alviere-checkbox></div>`, 2);
+var root_5$3 = /* @__PURE__ */ from_html(`<div class="legal-text-consent__item svelte-te6ayp"><alviere-checkbox><span slot="label" class="legal-text-consent__label svelte-te6ayp"><span>I agree to the</span> <button type="button" class="legal-text-consent__link svelte-te6ayp" aria-haspopup="dialog"> </button></span></alviere-checkbox></div>`, 2);
 var root_6$1 = /* @__PURE__ */ from_html(`<div class="legal-text-consent__modal-text svelte-te6ayp"> </div>`);
 var root_8$1 = /* @__PURE__ */ from_html(`<div class="legal-text-consent__modal-loading svelte-te6ayp"><alviere-spinner></alviere-spinner> <span>Loading terms...</span></div>`, 2);
 var root_9$1 = /* @__PURE__ */ from_html(`<div class="legal-text-consent__modal-empty svelte-te6ayp">Unable to load the legal text for this document.</div>`);
@@ -19602,7 +19626,7 @@ function LegalTextConsent($$anchor, $$props) {
           var node_2 = first_child(fragment_2);
           each(node_2, 17, () => get$1(displayItems)(), index, ($$anchor4, item) => {
             const key = /* @__PURE__ */ user_derived(() => getKey(get$1(item)));
-            var div_3 = root_5$2();
+            var div_3 = root_5$3();
             var alviere_checkbox = child(div_3);
             template_effect(() => set_custom_element_data(alviere_checkbox, "checked", !!get$1(accepted)[get$1(key)]));
             alviere_checkbox.__change = (event2) => handleToggle(get$1(item), event2);
@@ -19658,6 +19682,7 @@ function LegalTextConsent($$anchor, $$props) {
   var alviere_modal = sibling(div, 2);
   template_effect(() => set_custom_element_data(alviere_modal, "open", get$1(isModalOpen)));
   template_effect(() => set_custom_element_data(alviere_modal, "title", get$1(modalTitle)()));
+  set_custom_element_data(alviere_modal, "description", "Full document text follows. Use arrow keys to read.");
   var node_3 = child(alviere_modal);
   {
     var consequent_2 = ($$anchor2) => {
@@ -19713,20 +19738,22 @@ function LegalTextConsent($$anchor, $$props) {
 }
 delegate(["change", "click"]);
 create_custom_element(LegalTextConsent, { documents: {}, jwt: {}, debug: {}, resolvedDocuments: {} }, [], [], true);
-var root_4$2 = /* @__PURE__ */ from_html(`<alviere-button></alviere-button>`, 2);
-var root_2$1 = /* @__PURE__ */ from_html(`<div class="alviere-modal svelte-14kdpon"><button type="button" class="alviere-modal__backdrop svelte-14kdpon" aria-label="Close modal" tabindex="-1"></button> <div class="alviere-modal__dialog svelte-14kdpon" role="dialog" aria-modal="true" tabindex="-1"><div class="alviere-modal__header svelte-14kdpon"><div class="alviere-modal__title svelte-14kdpon"><!></div> <!></div> <div class="alviere-modal__body svelte-14kdpon"><!></div> <div class="alviere-modal__footer svelte-14kdpon"><!></div></div></div>`);
+var root_4$2 = /* @__PURE__ */ from_html(`<span class="alviere-modal__description svelte-14kdpon"> </span>`);
+var root_5$2 = /* @__PURE__ */ from_html(`<alviere-button></alviere-button>`, 2);
+var root_2$1 = /* @__PURE__ */ from_html(`<div class="alviere-modal svelte-14kdpon"><button type="button" class="alviere-modal__backdrop svelte-14kdpon" aria-label="Close modal" tabindex="-1"></button> <div class="alviere-modal__dialog svelte-14kdpon" role="dialog" aria-modal="true" tabindex="-1"><div class="alviere-modal__header svelte-14kdpon"><div class="alviere-modal__title svelte-14kdpon"><!></div> <!> <!></div> <div class="alviere-modal__body svelte-14kdpon" role="document"><!></div> <div class="alviere-modal__footer svelte-14kdpon"><!></div></div></div>`);
 const $$css$3 = {
   hash: "svelte-14kdpon",
-  code: ".alviere-modal.svelte-14kdpon {position:fixed;inset:0;z-index:var(--alv-z-modal, 1050);display:grid;place-items:center;}.alviere-modal__backdrop.svelte-14kdpon {position:fixed;inset:0;background:rgba(12, 18, 28, 0.6);z-index:var(--alv-z-modal-backdrop, 1040);border:none;padding:0;margin:0;}.alviere-modal__dialog.svelte-14kdpon {position:relative;z-index:var(--alv-z-modal, 1050);width:min(720px, 92vw);max-height:85vh;background:var(--alv-color-surface, #ffffff);border-radius:16px;box-shadow:0 24px 48px rgba(0, 0, 0, 0.2);display:flex;flex-direction:column;overflow:hidden;}.alviere-modal__header.svelte-14kdpon {display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm, 8px);padding:var(--spacing-md, 16px) var(--spacing-lg, 24px);border-bottom:1px solid var(--alv-color-border, #e6e6e6);}.alviere-modal__title.svelte-14kdpon {font-size:1rem;font-weight:600;color:var(--alv-color-text, #1e1f24);}.alviere-modal__body.svelte-14kdpon {padding:var(--spacing-md, 16px) var(--spacing-lg, 24px);overflow:auto;color:var(--alv-color-text, #1e1f24);line-height:1.5;}.alviere-modal__footer.svelte-14kdpon {padding:var(--spacing-md, 16px) var(--spacing-lg, 24px);border-top:1px solid var(--alv-color-border, #e6e6e6);}.alviere-modal__footer.svelte-14kdpon:empty {display:none;}"
+  code: ".alviere-modal.svelte-14kdpon {position:fixed;inset:0;z-index:var(--alv-z-modal, 1050);display:grid;place-items:center;}.alviere-modal__backdrop.svelte-14kdpon {position:fixed;inset:0;background:rgba(12, 18, 28, 0.6);z-index:var(--alv-z-modal-backdrop, 1040);border:none;padding:0;margin:0;}.alviere-modal__dialog.svelte-14kdpon {position:relative;z-index:var(--alv-z-modal, 1050);width:min(720px, 92vw);max-height:85vh;background:var(--alv-color-surface, #ffffff);border-radius:16px;box-shadow:0 24px 48px rgba(0, 0, 0, 0.2);display:flex;flex-direction:column;overflow:hidden;}.alviere-modal__header.svelte-14kdpon {display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm, 8px);padding:var(--spacing-md, 16px) var(--spacing-lg, 24px);border-bottom:1px solid var(--alv-color-border, #e6e6e6);}.alviere-modal__title.svelte-14kdpon {font-size:1rem;font-weight:600;color:var(--alv-color-text, #1e1f24);}.alviere-modal__description.svelte-14kdpon {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;}.alviere-modal__body.svelte-14kdpon {padding:var(--spacing-md, 16px) var(--spacing-lg, 24px);overflow:auto;color:var(--alv-color-text, #1e1f24);line-height:1.5;}.alviere-modal__footer.svelte-14kdpon {padding:var(--spacing-md, 16px) var(--spacing-lg, 24px);border-top:1px solid var(--alv-color-border, #e6e6e6);}.alviere-modal__footer.svelte-14kdpon:empty {display:none;}"
 };
 function Modal($$anchor, $$props) {
   push($$props, true);
   append_styles$1($$anchor, $$css$3);
-  let open = prop($$props, "open", 15, false), title = prop($$props, "title", 15, ""), dismissible = prop($$props, "dismissible", 15, true), closeOnBackdrop = prop($$props, "closeOnBackdrop", 15, true), closeOnEscape = prop($$props, "closeOnEscape", 15, true);
+  let open = prop($$props, "open", 15, false), title = prop($$props, "title", 15, ""), description = prop($$props, "description", 15, ""), dismissible = prop($$props, "dismissible", 15, true), closeOnBackdrop = prop($$props, "closeOnBackdrop", 15, true), closeOnEscape = prop($$props, "closeOnEscape", 15, true);
   const dispatch = createEventDispatcher();
   let hostElement = /* @__PURE__ */ state(null);
   let dialogElement = /* @__PURE__ */ state(null);
   let titleId = /* @__PURE__ */ state(`alviere-modal-title-${Math.random().toString(36).slice(2)}`);
+  let descriptionId = /* @__PURE__ */ state(`alviere-modal-desc-${Math.random().toString(36).slice(2)}`);
   let focusTimer = null;
   const ensureModalRoot = () => {
     if (typeof document === "undefined") {
@@ -19817,6 +19844,13 @@ function Modal($$anchor, $$props) {
       title($$value);
       flushSync();
     },
+    get description() {
+      return description();
+    },
+    set description($$value = "") {
+      description($$value);
+      flushSync();
+    },
     get dismissible() {
       return dismissible();
     },
@@ -19843,7 +19877,7 @@ function Modal($$anchor, $$props) {
   event$1("keydown", $window, handleKeydown);
   var node = first_child(fragment);
   {
-    var consequent_1 = ($$anchor2) => {
+    var consequent_2 = ($$anchor2) => {
       var div = root_2$1();
       var button = child(div);
       button.__click = handleBackdropClick;
@@ -19860,7 +19894,23 @@ function Modal($$anchor, $$props) {
       var node_2 = sibling(div_3, 2);
       {
         var consequent = ($$anchor3) => {
-          var alviere_button = root_4$2();
+          var span = root_4$2();
+          var text_1 = child(span, true);
+          reset(span);
+          template_effect(() => {
+            set_attribute(span, "id", get$1(descriptionId));
+            set_text(text_1, description());
+          });
+          append($$anchor3, span);
+        };
+        if_block(node_2, ($$render) => {
+          if (description()) $$render(consequent);
+        });
+      }
+      var node_3 = sibling(node_2, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var alviere_button = root_5$2();
           set_custom_element_data(alviere_button, "variant", "tertiary");
           set_custom_element_data(alviere_button, "size", "sm");
           set_custom_element_data(alviere_button, "iconName", "X");
@@ -19868,18 +19918,18 @@ function Modal($$anchor, $$props) {
           set_custom_element_data(alviere_button, "handler", () => closeModal("button"));
           append($$anchor3, alviere_button);
         };
-        if_block(node_2, ($$render) => {
-          if (dismissible()) $$render(consequent);
+        if_block(node_3, ($$render) => {
+          if (dismissible()) $$render(consequent_1);
         });
       }
       reset(div_2);
       var div_4 = sibling(div_2, 2);
-      var node_3 = child(div_4);
-      slot(node_3, $$props, "default", {}, null);
+      var node_4 = child(div_4);
+      slot(node_4, $$props, "default", {}, null);
       reset(div_4);
       var div_5 = sibling(div_4, 2);
-      var node_4 = child(div_5);
-      slot(node_4, $$props, "footer", {}, null);
+      var node_5 = child(div_5);
+      slot(node_5, $$props, "footer", {}, null);
       reset(div_5);
       reset(div_1);
       bind_this(div_1, ($$value) => set(dialogElement, $$value), () => get$1(dialogElement));
@@ -19887,12 +19937,13 @@ function Modal($$anchor, $$props) {
       bind_this(div, ($$value) => set(hostElement, $$value), () => get$1(hostElement));
       template_effect(() => {
         set_attribute(div_1, "aria-labelledby", title() ? get$1(titleId) : void 0);
+        set_attribute(div_1, "aria-describedby", description() ? get$1(descriptionId) : void 0);
         set_attribute(div_3, "id", get$1(titleId));
       });
       append($$anchor2, div);
     };
     if_block(node, ($$render) => {
-      if (open()) $$render(consequent_1);
+      if (open()) $$render(consequent_2);
     });
   }
   append($$anchor, fragment);
@@ -19904,6 +19955,7 @@ customElements.define("alviere-modal", create_custom_element(
   {
     open: {},
     title: {},
+    description: {},
     dismissible: {},
     closeOnBackdrop: {},
     closeOnEscape: {}
@@ -20730,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>`);
@@ -20750,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 {
@@ -20785,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);
@@ -21012,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()) {
@@ -21386,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);
           },
           [
@@ -21399,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);
@@ -21419,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);