@adyen/bento-vue2 1.100.0 → 1.101.0

package/dist/assets/secondary-nav.css

@@ -1 +1 @@
-button[data-v-14334916]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-14334916]:focus-visible{outline:none}.b-secondary-nav-item[data-v-14334916]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-top:var(--b-spacer-020)}.b-secondary-nav-item[data-v-14334916],.b-secondary-nav-item[data-v-14334916]:before,.b-secondary-nav-item[data-v-14334916]:after{box-sizing:border-box}.b-secondary-nav-item *[data-v-14334916],.b-secondary-nav-item *[data-v-14334916]:before,.b-secondary-nav-item *[data-v-14334916]:after{box-sizing:border-box}.b-secondary-nav-item[data-v-14334916] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav-item[data-v-14334916] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-secondary-nav-item__wrapper[data-v-14334916]{position:relative}.b-secondary-nav-item__option[data-v-14334916]{align-items:center;border-radius:var(--b-border-radius-m);color:var(--b-color-label-primary);cursor:pointer;display:flex;justify-content:space-between;padding:var(--b-spacer-040) var(--b-spacer-050);width:100%}@media(hover:hover){.b-secondary-nav-item__option[data-v-14334916]:hover{background-color:var(--b-color-background-primary-hover)}}.b-secondary-nav-item__option[data-v-14334916]:active,.b-secondary-nav-item__option--active[data-v-14334916]{background-color:var(--b-color-background-primary-active)}.b-secondary-nav-item__option[data-v-14334916]:focus-visible{animation:outer-ring-default-14334916 var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color)}@keyframes outer-ring-default-14334916{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-secondary-nav-item__option--sub-item[data-v-14334916]{padding-left:var(--b-spacer-080)}.b-secondary-nav-item__option--expandable[data-v-14334916]{padding-right:var(--b-spacer-100)}.b-secondary-nav-item__toggle[data-v-14334916]{position:absolute;right:var(--b-spacer-050);top:50%;transform:translateY(-50%)}.b-secondary-nav-item__toggle[data-v-14334916]:after{content:"";display:block;inset:calc(var(--b-spacer-050) * -1);position:absolute}.b-secondary-nav-item__visually-hidden[data-v-14334916]{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.b-secondary-nav-item__sub-items[data-v-14334916]{list-style:none;padding:0}.b-secondary-nav-item__animation--content-enter-active[data-v-14334916]{animation:fade-in-u37k2tz-14334916 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-u37k2tz-14334916 var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-u37k2tz-14334916 var(--b-animation-duration-moderate) var(--b-animation-easing-linear);overflow:hidden;transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard)}@keyframes fade-in-u37k2tz-14334916{0%{opacity:0}to{opacity:1}}@keyframes scale-up-u37k2tz-14334916{0%{scale:1}to{scale:1}}@keyframes enter-u37k2tz-14334916{0%{translate:0 -8px}to{translate:0 0}}.b-secondary-nav-item__animation--content-leave-active[data-v-14334916]{animation:fade-out-u37k2uc-14334916 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-u37k2uc-14334916 var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-u37k2uc-14334916 var(--b-animation-duration-moderate) var(--b-animation-easing-linear);max-height:0!important;overflow:hidden;transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard)}@keyframes fade-out-u37k2uc-14334916{0%{opacity:1}to{opacity:0}}@keyframes scale-down-u37k2uc-14334916{0%{scale:1}to{scale:1}}@keyframes exit-u37k2uc-14334916{0%{translate:0 0}to{translate:0 -8px}}.b-secondary-nav-category[data-v-777b2ce6]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:var(--b-spacer-080)}.b-secondary-nav-category[data-v-777b2ce6],.b-secondary-nav-category[data-v-777b2ce6]:before,.b-secondary-nav-category[data-v-777b2ce6]:after{box-sizing:border-box}.b-secondary-nav-category *[data-v-777b2ce6],.b-secondary-nav-category *[data-v-777b2ce6]:before,.b-secondary-nav-category *[data-v-777b2ce6]:after{box-sizing:border-box}.b-secondary-nav-category[data-v-777b2ce6] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav-category[data-v-777b2ce6] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-secondary-nav-category__label[data-v-777b2ce6]{color:var(--b-color-label-secondary);padding:0 var(--b-spacer-050) var(--b-spacer-020) var(--b-spacer-050)}.b-secondary-nav[data-v-900dc964]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-secondary-nav[data-v-900dc964],.b-secondary-nav[data-v-900dc964]:before,.b-secondary-nav[data-v-900dc964]:after{box-sizing:border-box}.b-secondary-nav *[data-v-900dc964],.b-secondary-nav *[data-v-900dc964]:before,.b-secondary-nav *[data-v-900dc964]:after{box-sizing:border-box}.b-secondary-nav[data-v-900dc964] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav[data-v-900dc964] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}@media(min-width:500px){.b-secondary-nav[data-v-900dc964]{max-width:250px}}.b-secondary-nav[data-v-900dc964] .b-secondary-nav__list{list-style:none;margin:0;padding:0}.b-secondary-nav__option[data-v-900dc964]{align-items:center;display:flex;gap:var(--b-spacer-040)}.b-secondary-nav__nested-option[data-v-900dc964]{padding-left:var(--b-spacer-070)}.b-secondary-nav__visually-hidden[data-v-900dc964]{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
+button[data-v-14334916]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-14334916]:focus-visible{outline:none}.b-secondary-nav-item[data-v-14334916]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-top:var(--b-spacer-020)}.b-secondary-nav-item[data-v-14334916],.b-secondary-nav-item[data-v-14334916]:before,.b-secondary-nav-item[data-v-14334916]:after{box-sizing:border-box}.b-secondary-nav-item *[data-v-14334916],.b-secondary-nav-item *[data-v-14334916]:before,.b-secondary-nav-item *[data-v-14334916]:after{box-sizing:border-box}.b-secondary-nav-item[data-v-14334916] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav-item[data-v-14334916] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-secondary-nav-item__wrapper[data-v-14334916]{position:relative}.b-secondary-nav-item__option[data-v-14334916]{align-items:center;border-radius:var(--b-border-radius-m);color:var(--b-color-label-primary);cursor:pointer;display:flex;justify-content:space-between;padding:var(--b-spacer-040) var(--b-spacer-050);width:100%}@media(hover:hover){.b-secondary-nav-item__option[data-v-14334916]:hover{background-color:var(--b-color-background-primary-hover)}}.b-secondary-nav-item__option[data-v-14334916]:active,.b-secondary-nav-item__option--active[data-v-14334916]{background-color:var(--b-color-background-primary-active)}.b-secondary-nav-item__option[data-v-14334916]:focus-visible{animation:outer-ring-default-14334916 var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color)}@keyframes outer-ring-default-14334916{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-secondary-nav-item__option--sub-item[data-v-14334916]{padding-left:var(--b-spacer-080)}.b-secondary-nav-item__option--expandable[data-v-14334916]{padding-right:var(--b-spacer-100)}.b-secondary-nav-item__toggle[data-v-14334916]{position:absolute;right:var(--b-spacer-050);top:50%;transform:translateY(-50%)}.b-secondary-nav-item__toggle[data-v-14334916]:after{content:"";display:block;inset:calc(var(--b-spacer-050) * -1);position:absolute}.b-secondary-nav-item__visually-hidden[data-v-14334916]{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.b-secondary-nav-item__sub-items[data-v-14334916]{list-style:none;padding:0}.b-secondary-nav-item__animation--content-enter-active[data-v-14334916]{animation:fade-in-uklriil-14334916 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-uklriil-14334916 var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-uklriil-14334916 var(--b-animation-duration-moderate) var(--b-animation-easing-linear);overflow:hidden;transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard)}@keyframes fade-in-uklriil-14334916{0%{opacity:0}to{opacity:1}}@keyframes scale-up-uklriil-14334916{0%{scale:1}to{scale:1}}@keyframes enter-uklriil-14334916{0%{translate:0 -8px}to{translate:0 0}}.b-secondary-nav-item__animation--content-leave-active[data-v-14334916]{animation:fade-out-uklriiz-14334916 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-uklriiz-14334916 var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-uklriiz-14334916 var(--b-animation-duration-moderate) var(--b-animation-easing-linear);max-height:0!important;overflow:hidden;transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard)}@keyframes fade-out-uklriiz-14334916{0%{opacity:1}to{opacity:0}}@keyframes scale-down-uklriiz-14334916{0%{scale:1}to{scale:1}}@keyframes exit-uklriiz-14334916{0%{translate:0 0}to{translate:0 -8px}}.b-secondary-nav-category[data-v-777b2ce6]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:var(--b-spacer-080)}.b-secondary-nav-category[data-v-777b2ce6],.b-secondary-nav-category[data-v-777b2ce6]:before,.b-secondary-nav-category[data-v-777b2ce6]:after{box-sizing:border-box}.b-secondary-nav-category *[data-v-777b2ce6],.b-secondary-nav-category *[data-v-777b2ce6]:before,.b-secondary-nav-category *[data-v-777b2ce6]:after{box-sizing:border-box}.b-secondary-nav-category[data-v-777b2ce6] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav-category[data-v-777b2ce6] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-secondary-nav-category__label[data-v-777b2ce6]{color:var(--b-color-label-secondary);padding:0 var(--b-spacer-050) var(--b-spacer-020) var(--b-spacer-050)}.b-secondary-nav[data-v-900dc964]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-secondary-nav[data-v-900dc964],.b-secondary-nav[data-v-900dc964]:before,.b-secondary-nav[data-v-900dc964]:after{box-sizing:border-box}.b-secondary-nav *[data-v-900dc964],.b-secondary-nav *[data-v-900dc964]:before,.b-secondary-nav *[data-v-900dc964]:after{box-sizing:border-box}.b-secondary-nav[data-v-900dc964] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav[data-v-900dc964] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}@media(min-width:500px){.b-secondary-nav[data-v-900dc964]{max-width:250px}}.b-secondary-nav[data-v-900dc964] .b-secondary-nav__list{list-style:none;margin:0;padding:0}.b-secondary-nav__option[data-v-900dc964]{align-items:center;display:flex;gap:var(--b-spacer-040)}.b-secondary-nav__nested-option[data-v-900dc964]{padding-left:var(--b-spacer-070)}.b-secondary-nav__visually-hidden[data-v-900dc964]{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/dist/assets/sidepanel.css

@@ -1 +1 @@
-.b-sidepanel-page[data-v-12d4c262]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.b-sidepanel-page[data-v-12d4c262],.b-sidepanel-page[data-v-12d4c262]:before,.b-sidepanel-page[data-v-12d4c262]:after{box-sizing:border-box}.b-sidepanel-page *[data-v-12d4c262],.b-sidepanel-page *[data-v-12d4c262]:before,.b-sidepanel-page *[data-v-12d4c262]:after{box-sizing:border-box}.b-sidepanel-page[data-v-12d4c262] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel-page[data-v-12d4c262] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-sidepanel-page__header[data-v-12d4c262]{align-items:center;background-color:var(--b-color-background-modal);border-top-left-radius:var(--b-border-radius-l);display:flex;overflow:hidden;padding:var(--b-spacer-070) var(--b-spacer-130) var(--b-spacer-070) var(--b-spacer-090);position:sticky;white-space:nowrap;width:100%}.b-sidepanel-page__title[data-v-12d4c262]{color:var(--b-color-label-primary);flex-grow:1;overflow:hidden;text-overflow:ellipsis}.b-sidepanel-page__content[data-v-12d4c262]{color:var(--b-color-label-primary);flex-grow:1;overflow:auto;padding:0 var(--b-spacer-090)}.b-sidepanel-page__actions[data-v-12d4c262]{background-color:var(--b-color-background-modal);border-bottom-left-radius:var(--b-border-radius-l);color:var(--b-color-label-primary);padding:var(--b-spacer-070) var(--b-spacer-090)}.b-sidepanel[data-v-e2c7d722]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-color-background-modal);border:0;height:100%;max-height:100%;max-width:100%;overflow:visible;padding:0;width:100%}.b-sidepanel[data-v-e2c7d722],.b-sidepanel[data-v-e2c7d722]:before,.b-sidepanel[data-v-e2c7d722]:after{box-sizing:border-box}.b-sidepanel *[data-v-e2c7d722],.b-sidepanel *[data-v-e2c7d722]:before,.b-sidepanel *[data-v-e2c7d722]:after{box-sizing:border-box}.b-sidepanel[data-v-e2c7d722] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-e2c7d722] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}@media(min-width:500px){.b-sidepanel[data-v-e2c7d722]{border-radius:var(--b-border-radius-l) 0 0 var(--b-border-radius-l);margin:0 0 0 auto;width:480px}}@media(min-width:768px){.b-sidepanel[data-v-e2c7d722]{max-width:680px;min-width:480px;width:33%}}.b-sidepanel__close-button[data-v-e2c7d722]{align-items:center;display:flex;height:64px;position:absolute;right:var(--b-spacer-090);z-index:var(--b-z-index-local-tier-1)}.b-sidepanel--animation[data-v-e2c7d722]{overflow:hidden}.b-sidepanel[data-v-e2c7d722]::backdrop{background-color:var(--b-color-support-overlay, #00112c);opacity:.5}.b-sidepanel[open][data-v-e2c7d722]{animation:enter-u37k2ir-e2c7d722 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-enter)}@keyframes enter-u37k2ir-e2c7d722{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-e2c7d722]::backdrop{animation:fade-in-u37k2jc-e2c7d722 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-u37k2jc-e2c7d722{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-e2c7d722]{animation:exit-u37k2k8-e2c7d722 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-exit)}@keyframes exit-u37k2k8-e2c7d722{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-e2c7d722]::backdrop{animation:fade-out-u37k2l2-e2c7d722 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-u37k2l2-e2c7d722{0%{opacity:.5}to{opacity:0}}
+.b-sidepanel-page[data-v-12d4c262]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.b-sidepanel-page[data-v-12d4c262],.b-sidepanel-page[data-v-12d4c262]:before,.b-sidepanel-page[data-v-12d4c262]:after{box-sizing:border-box}.b-sidepanel-page *[data-v-12d4c262],.b-sidepanel-page *[data-v-12d4c262]:before,.b-sidepanel-page *[data-v-12d4c262]:after{box-sizing:border-box}.b-sidepanel-page[data-v-12d4c262] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel-page[data-v-12d4c262] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-sidepanel-page__header[data-v-12d4c262]{align-items:center;background-color:var(--b-color-background-modal);border-top-left-radius:var(--b-border-radius-l);display:flex;overflow:hidden;padding:var(--b-spacer-070) var(--b-spacer-130) var(--b-spacer-070) var(--b-spacer-090);position:sticky;white-space:nowrap;width:100%}.b-sidepanel-page__title[data-v-12d4c262]{color:var(--b-color-label-primary);flex-grow:1;overflow:hidden;text-overflow:ellipsis}.b-sidepanel-page__content[data-v-12d4c262]{color:var(--b-color-label-primary);flex-grow:1;overflow:auto;padding:0 var(--b-spacer-090)}.b-sidepanel-page__actions[data-v-12d4c262]{background-color:var(--b-color-background-modal);border-bottom-left-radius:var(--b-border-radius-l);color:var(--b-color-label-primary);padding:var(--b-spacer-070) var(--b-spacer-090)}.b-sidepanel[data-v-e2c7d722]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-color-background-modal);border:0;height:100%;max-height:100%;max-width:100%;overflow:visible;padding:0;width:100%}.b-sidepanel[data-v-e2c7d722],.b-sidepanel[data-v-e2c7d722]:before,.b-sidepanel[data-v-e2c7d722]:after{box-sizing:border-box}.b-sidepanel *[data-v-e2c7d722],.b-sidepanel *[data-v-e2c7d722]:before,.b-sidepanel *[data-v-e2c7d722]:after{box-sizing:border-box}.b-sidepanel[data-v-e2c7d722] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-e2c7d722] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}@media(min-width:500px){.b-sidepanel[data-v-e2c7d722]{border-radius:var(--b-border-radius-l) 0 0 var(--b-border-radius-l);margin:0 0 0 auto;width:480px}}@media(min-width:768px){.b-sidepanel[data-v-e2c7d722]{max-width:680px;min-width:480px;width:33%}}.b-sidepanel__close-button[data-v-e2c7d722]{align-items:center;display:flex;height:64px;position:absolute;right:var(--b-spacer-090);z-index:var(--b-z-index-local-tier-1)}.b-sidepanel--animation[data-v-e2c7d722]{overflow:hidden}.b-sidepanel[data-v-e2c7d722]::backdrop{background-color:var(--b-color-support-overlay, #00112c);opacity:.5}.b-sidepanel[open][data-v-e2c7d722]{animation:enter-uklri7d-e2c7d722 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-enter)}@keyframes enter-uklri7d-e2c7d722{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-e2c7d722]::backdrop{animation:fade-in-uklri8d-e2c7d722 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-uklri8d-e2c7d722{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-e2c7d722]{animation:exit-uklri95-e2c7d722 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-exit)}@keyframes exit-uklri95-e2c7d722{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-e2c7d722]::backdrop{animation:fade-out-uklria0-e2c7d722 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-uklria0-e2c7d722{0%{opacity:.5}to{opacity:0}}

package/dist/assets/table-of-contents.css

@@ -0,0 +1 @@
+.b-table-of-contents__toc[data-v-daeebeb1]{all:unset;list-style-type:none}.b-table-of-contents__item[data-v-daeebeb1]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-table-of-contents__item[data-v-daeebeb1],.b-table-of-contents__item[data-v-daeebeb1]:before,.b-table-of-contents__item[data-v-daeebeb1]:after{box-sizing:border-box}.b-table-of-contents__item *[data-v-daeebeb1],.b-table-of-contents__item *[data-v-daeebeb1]:before,.b-table-of-contents__item *[data-v-daeebeb1]:after{box-sizing:border-box}.b-table-of-contents__item[data-v-daeebeb1] ::-webkit-scrollbar{height:14px;width:14px}.b-table-of-contents__item[data-v-daeebeb1] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-table-of-contents__item-title[data-v-daeebeb1]{align-items:center;color:var(--b-color-label-primary);cursor:pointer;display:flex;min-height:24px;text-decoration:underline}.b-table-of-contents__item-title[data-v-daeebeb1]:focus-visible{outline:none}.b-table-of-contents__item-title[data-v-daeebeb1]:focus-visible{animation:outer-ring-default-daeebeb1 var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color);border-radius:var(--b-border-radius-xs)}@keyframes outer-ring-default-daeebeb1{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}@media(min-width:376px){.b-table-of-contents__item-title[data-v-daeebeb1]{border-left:var(--b-border-width-m) solid var(--b-color-separator-primary);color:var(--b-color-label-secondary);padding-left:var(--b-spacer-070);text-decoration:none}}@media(min-width:376px)and (hover:hover){.b-table-of-contents__item-title[data-v-daeebeb1]:hover{color:var(--b-color-label-primary)}}@media(min-width:376px){.b-table-of-contents__item-title[data-v-daeebeb1]:focus-visible{border-radius:0}}.b-table-of-contents__item-label[data-v-daeebeb1]{min-width:0;overflow-wrap:break-word}@media(min-width:376px){.b-table-of-contents__item--active .b-table-of-contents__item-title[data-v-daeebeb1]{border-left:var(--b-border-width-m) solid var(--b-color-background-inverse-primary);color:var(--b-color-label-primary)}}.b-table-of-contents__item--level-2 .b-table-of-contents__item-title[data-v-daeebeb1]{padding-left:var(--b-spacer-070)}@media(min-width:376px){.b-table-of-contents__item--level-2 .b-table-of-contents__item-title[data-v-daeebeb1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060))}}.b-table-of-contents__item--level-3 .b-table-of-contents__item-title[data-v-daeebeb1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060))}@media(min-width:376px){.b-table-of-contents__item--level-3 .b-table-of-contents__item-title[data-v-daeebeb1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060) * 2)}}.b-table-of-contents__item--level-4 .b-table-of-contents__item-title[data-v-daeebeb1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060) * 2)}@media(min-width:376px){.b-table-of-contents__item--level-4 .b-table-of-contents__item-title[data-v-daeebeb1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060) * 3)}}.b-table-of-contents__item-separator[data-v-daeebeb1]{height:10px}@media(min-width:376px){.b-table-of-contents__item-separator[data-v-daeebeb1]{border-left:var(--b-border-width-m) solid var(--b-color-separator-primary)}}.b-table-of-contents[data-v-325b3a45]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;gap:var(--b-spacer-080)}.b-table-of-contents[data-v-325b3a45],.b-table-of-contents[data-v-325b3a45]:before,.b-table-of-contents[data-v-325b3a45]:after{box-sizing:border-box}.b-table-of-contents *[data-v-325b3a45],.b-table-of-contents *[data-v-325b3a45]:before,.b-table-of-contents *[data-v-325b3a45]:after{box-sizing:border-box}.b-table-of-contents[data-v-325b3a45] ::-webkit-scrollbar{height:14px;width:14px}.b-table-of-contents[data-v-325b3a45] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-table-of-contents__header[data-v-325b3a45]{color:var(--b-color-label-primary);min-width:0;overflow-wrap:break-word}

package/dist/button.js

@@ -1,6 +1,6 @@
 import { B as n, a as B, b as a } from "./chunks/button.Df_UH5wZ.js";
 import { a as s } from "./chunks/ai-button.y1t1nqpv.js";
-import { B as r, a as i, b as c, c as p } from "./chunks/button-actions.Dxez8SNL.js";
+import { B as r, a as i, b as c, c as p } from "./chunks/button-actions.IzFrNFdl.js";
 import { B as A, a as L, b as d } from "./chunks/button-actions.types.BptAXjD8.js";
 export {
   s as BentoAiButton,

package/dist/card.js

@@ -1,4 +1,4 @@
-import { c as o, B as r, a as t } from "./chunks/card.BzDmgKjO.js";
+import { c as o, B as r, a as t } from "./chunks/card.CrlT9cUZ.js";
 export {
   o as BentoCard,
   r as BentoCardBackground,

package/dist/checkbox.js

@@ -1,5 +1,5 @@
-import { B as t, a } from "./chunks/checkbox.CBawZCc6.js";
-import { B as x, a as n } from "./chunks/checkbox-group.mgC7eJkE.js";
+import { B as t, a } from "./chunks/checkbox.h0N7IHm8.js";
+import { B as x, a as n } from "./chunks/checkbox-group.DB_jfkk7.js";
 import { C } from "./chunks/minus-small.DJacLGTw.js";
 export {
   t as BentoCheckbox,

package/dist/chunks/{action-bar.DxZchfve.js → action-bar.C2ybt5w2.js}

@@ -1,14 +1,14 @@
-import { defineComponent as D, computed as s, ref as c, toRefs as G, watch as w, provide as j, nextTick as b } from "vue";
+import { defineComponent as D, computed as s, ref as c, toRefs as G, watch as w, provide as j, nextTick as y } from "vue";
 import { B as J } from "./button.Df_UH5wZ.js";
 import { B as K } from "./typography.C8lPlsbD.js";
 import { B as q } from "./loading-indicator.PxbRzshH.js";
-import { B as Q } from "./button-actions-with-menu.CpqyoKG5.js";
+import { B as Q } from "./button-actions-with-menu.D0gfA7NK.js";
 import { C as X } from "./cross.CC_B-vG-.js";
 import { C as Y } from "./checkmark-circle-fill.BttTCjrM.js";
 import { C as Z } from "./cross-circle-fill.DTDtgLMf.js";
 import { u as H } from "./index.B6WW_F-J.js";
-import { a as ee } from "./index.BPUMyryR.js";
-import { P as ne, B as te } from "./button-actions.Dxez8SNL.js";
+import { b as ee } from "./index.v5OGTDYQ.js";
+import { P as ne, B as te } from "./button-actions.IzFrNFdl.js";
 import { n as ae } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/action-bar.css";
 const se = {
@@ -51,6 +51,19 @@ const se = {
     undo: "Undo",
     unsavedChanges: "Unsaved changes | unsaved change | unsaved changes"
   },
+  "es-419": {
+    actionBar: "Barra de acción",
+    applying: "Aplicando...",
+    cancel: "Cancelar",
+    close: "Cerrar",
+    retry: "Reintentar",
+    save: "Guardar",
+    selected: "seleccionado",
+    somethingWentWrong: "Ocurrió un error",
+    success: "¡Éxito!",
+    undo: "Deshacer",
+    unsavedChanges: "Cambios no guardados | cambio no guardado | cambios no guardados"
+  },
   "es-ES": {
     actionBar: "Barra de acción",
     applying: "Aplicando...",
@@ -226,7 +239,7 @@ const se = {
   },
   emits: ["close", "cancel", "save", "undo-action", "retry-action", "cancel-action"],
   setup(l, { emit: n }) {
-    const t = l, e = 100, r = 7, B = 500, f = 32, { t: i, tc: E, n: I } = H(), k = s(() => t.selectionLabel ? t.selectionLabel : i("selected")), x = s(() => {
+    const t = l, e = 100, r = 7, B = 500, h = 32, { t: i, tc: E, n: I } = H(), k = s(() => t.selectionLabel ? t.selectionLabel : i("selected")), x = s(() => {
       switch (t.state) {
         case "loading":
           return i("applying");
@@ -237,12 +250,12 @@ const se = {
         default:
           return "";
       }
-    }), m = c(null), u = c(null), h = c(null), g = c(!1), R = s(
+    }), m = c(null), u = c(null), f = c(null), g = c(!1), R = s(
       () => t.state === "loading" ? "out-in" : void 0
     ), T = s(
       () => t.state === "loading" || t.state === "success" && !t.showUndoAction
     ), F = (a) => {
-      t.state === "loading" && (u.value = `${a.offsetWidth}px`, h.value = "100%");
+      t.state === "loading" && (u.value = `${a.offsetWidth}px`, f.value = "100%");
     }, U = (a) => {
       if (t.state !== "loading")
         return;
@@ -252,7 +265,7 @@ const se = {
         u.value = `${v}px`;
       });
     }, L = () => {
-      u.value = null, h.value = null, t.state === "fail" && (g.value = !0);
+      u.value = null, f.value = null, t.state === "fail" && (g.value = !0);
     }, N = (a) => {
       a.animationName.startsWith("shake-") && (g.value = !1);
     }, { extraBottomSpacing: A, visibleActions: W } = G(t), { width: d } = ee(), o = c(null), p = c(null), S = s(() => t.variant === "confirmation");
@@ -263,11 +276,11 @@ const se = {
       },
       { immediate: !0 }
     );
-    const M = s(() => ({
+    const O = s(() => ({
       "b-action-bar--extra-spacing": A.value,
       "b-action-bar--confirmation": S.value,
       "b-action-bar__state-animation--shake": g.value
-    })), O = s(() => ({
+    })), M = s(() => ({
       [`b-action-bar__container--${t.state}`]: t.state !== "start"
     }));
     j(ne, r);
@@ -275,8 +288,8 @@ const se = {
       const a = t.actions.map((z) => ({
         ...z,
         variant: "secondary"
-      })), v = a.slice(0, o.value).reverse(), y = a.slice(o.value);
-      return [...v, ...y];
+      })), v = a.slice(0, o.value).reverse(), b = a.slice(o.value);
+      return [...v, ...b];
     }), P = s(() => [
       {
         title: i("save"),
@@ -288,20 +301,20 @@ const se = {
         event: () => n("cancel")
       }
     ]), $ = s(() => t.itemCounter == null || t.itemCounter < 1), _ = async () => {
-      await b(), d.value > m.value.clientWidth + f + e && o.value < p.value && (o.value += 1, _());
+      await y(), d.value > m.value.clientWidth + h + e && o.value < p.value && (o.value += 1, _());
     }, C = async () => {
-      await b(), d.value < m.value.clientWidth + f && o.value > 0 && (o.value -= 1, C());
+      await y(), d.value < m.value.clientWidth + h && o.value > 0 && (o.value -= 1, C());
     };
     return w(
       () => d.value,
       async (a, v) => {
-        if (await b(), !m.value)
+        if (await y(), !m.value)
           return;
-        const y = a > v;
-        d.value < B ? o.value = 0 : y ? _() : C();
+        const b = a > v;
+        d.value < B ? o.value = 0 : b ? _() : C();
       },
       { immediate: !0 }
-    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: e, MENU_OFFSET: r, RESPONSIVE_BREAKPOINT: B, SPACING: f, props: t, emit: n, t: i, tc: E, n: I, label: k, defaultStateLabel: x, actionBar: m, containerMaxWidth: u, containerWidth: h, isShaking: g, stateTransitionMode: R, hideStateActions: T, onBeforeLeave: F, onEnter: U, onAfterEnter: L, onAnimationEnd: N, extraBottomSpacing: A, visibleActions: W, width: d, internalDisplayedActions: o, internalVisibleActions: p, isConfirmationVariant: S, conditionalClasses: M, containerClasses: O, actionsInternal: V, confirmationActions: P, noItemCounter: $, showActions: _, hideActions: C, BentoButton: J, BentoButtonActions: te, BentoTypography: K, BentoLoadingIndicator: q, ButtonActionsWithMenu: Q, CrossIcon: X, CheckmarkCircleFill: Y, CrossCircleFill: Z };
+    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: e, MENU_OFFSET: r, RESPONSIVE_BREAKPOINT: B, SPACING: h, props: t, emit: n, t: i, tc: E, n: I, label: k, defaultStateLabel: x, actionBar: m, containerMaxWidth: u, containerWidth: f, isShaking: g, stateTransitionMode: R, hideStateActions: T, onBeforeLeave: F, onEnter: U, onAfterEnter: L, onAnimationEnd: N, extraBottomSpacing: A, visibleActions: W, width: d, internalDisplayedActions: o, internalVisibleActions: p, isConfirmationVariant: S, conditionalClasses: O, containerClasses: M, actionsInternal: V, confirmationActions: P, noItemCounter: $, showActions: _, hideActions: C, BentoButton: J, BentoButtonActions: te, BentoTypography: K, BentoLoadingIndicator: q, ButtonActionsWithMenu: Q, CrossIcon: X, CheckmarkCircleFill: Y, CrossCircleFill: Z };
   }
 });
 var re = function() {
@@ -331,4 +344,4 @@ const Be = le.exports;
 export {
   Be as B
 };
-//# sourceMappingURL=action-bar.DxZchfve.js.map
+//# sourceMappingURL=action-bar.C2ybt5w2.js.map

package/dist/chunks/{action-bar.DxZchfve.js.map → action-bar.C2ybt5w2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"action-bar.DxZchfve.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section\n            class=\"b-action-bar\"\n            :class=\"conditionalClasses\"\n            :aria-label=\"t('actionBar')\"\n            @animationend=\"onAnimationEnd\"\n        >\n            <Transition\n                :name=\"`b-action-bar__state-animation--${state}`\"\n                :mode=\"stateTransitionMode\"\n                @before-leave=\"onBeforeLeave\"\n                @enter=\"onEnter\"\n                @after-enter=\"onAfterEnter\"\n            >\n                <div\n                    ref=\"actionBar\"\n                    :key=\"state\"\n                    class=\"b-action-bar__container\"\n                    :class=\"containerClasses\"\n                    :style=\"{ width: containerWidth, maxWidth: containerMaxWidth }\"\n                >\n                    <div v-if=\"state === 'start'\" class=\"b-action-bar__container-inner\">\n                        <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                            <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                                <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                            </bento-button>\n                        </div>\n                        <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                            <template v-if=\"isConfirmationVariant && noItemCounter\">\n                                {{ tc('unsavedChanges', 0) }}\n                            </template>\n                            <template v-else>\n                                {{ n(itemCounter) }}\n                                {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                            </template>\n                        </bento-typography>\n                        <bento-button-actions\n                            v-if=\"isConfirmationVariant\"\n                            :actions=\"confirmationActions\"\n                            class=\"b-action-bar__actions\"\n                            inverse\n                        />\n                        <button-actions-with-menu\n                            v-else\n                            :actions=\"actionsInternal\"\n                            class=\"b-action-bar__actions\"\n                            :displayed-actions=\"internalDisplayedActions\"\n                            menu-position=\"top-end\"\n                            disable-responsive-behavior\n                            inverse\n                        />\n                    </div>\n                    <div v-else class=\"b-action-bar__container-inner\">\n                        <div class=\"b-action-bar__state-icon\">\n                            <bento-loading-indicator v-if=\"state === 'loading'\" small inverse />\n                            <checkmark-circle-fill v-if=\"state === 'success'\" :aria-hidden=\"true\" />\n                            <cross-circle-fill v-if=\"state === 'fail'\" :aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography stronger>\n                            <slot name=\"stateLabel\">{{ defaultStateLabel }}</slot>\n                        </bento-typography>\n                        <div v-if=\"!hideStateActions\" class=\"b-action-bar__state-actions\">\n                            <bento-button\n                                v-if=\"state === 'success' && showUndoAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('undo-action')\"\n                                >{{ t('undo') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail' && showRetryAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('retry-action')\"\n                                >{{ t('retry') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail'\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('cancel-action')\"\n                                >{{ t('cancel') }}</bento-button\n                            >\n                        </div>\n                    </div>\n                </div>\n            </Transition>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, type PropType, provide, ref, toRefs, type TransitionProps, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n\n    import { type BentoActionBarState, type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * State of the action bar.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoActionBarState>,\n            default: 'start',\n        },\n        /**\n         * Displays the undo action button in `success` state.\n         */\n        showUndoAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Displays the retry action button in `fail` state.\n         */\n        showRetryAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits([\"close\", \"cancel\", \"save\", \"undo-action\", \"retry-action\", \"cancel-action\"]);\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    const defaultStateLabel = computed(() => {\n        switch (props.state) {\n            case 'loading':\n                return t('applying');\n            case 'success':\n                return t('success');\n            case 'fail':\n                return t('somethingWentWrong');\n            default:\n                return '';\n        }\n    });\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const containerMaxWidth = ref<string | null>(null);\n    const containerWidth = ref<string | null>(null);\n    const isShaking = ref(false);\n\n    const stateTransitionMode = computed(\n        () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode']\n    );\n\n    const hideStateActions = computed(\n        () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction)\n    );\n\n    const onBeforeLeave = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        containerMaxWidth.value = `${el.offsetWidth}px`;\n        containerWidth.value = '100%';\n    };\n\n    const onEnter = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        // Reset styles to get natural width\n        Object.assign(el.style, { width: 'auto', maxWidth: 'none' });\n        const newWidth = el.offsetWidth;\n\n        // Reset it back to the original values\n        Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value });\n\n        requestAnimationFrame(() => {\n            containerMaxWidth.value = `${newWidth}px`;\n        });\n    };\n\n    const onAfterEnter = () => {\n        containerMaxWidth.value = null;\n        containerWidth.value = null;\n\n        if (props.state === 'fail') {\n            isShaking.value = true;\n        }\n    };\n\n    const onAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName.startsWith('shake-')) {\n            isShaking.value = false;\n        }\n    };\n\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n        'b-action-bar__state-animation--shake': isShaking.value,\n    }));\n\n    const containerClasses = computed(() => ({\n        [`b-action-bar__container--${props.state}`]: props.state !== 'start',\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","n","useI18n","label","computed","props","defaultStateLabel","actionBar","ref","containerMaxWidth","containerWidth","isShaking","stateTransitionMode","hideStateActions","onBeforeLeave","el","onEnter","newWidth","onAfterEnter","onAnimationEnd","event","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","containerClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":"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"}
+{"version":3,"file":"action-bar.C2ybt5w2.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section\n            class=\"b-action-bar\"\n            :class=\"conditionalClasses\"\n            :aria-label=\"t('actionBar')\"\n            @animationend=\"onAnimationEnd\"\n        >\n            <Transition\n                :name=\"`b-action-bar__state-animation--${state}`\"\n                :mode=\"stateTransitionMode\"\n                @before-leave=\"onBeforeLeave\"\n                @enter=\"onEnter\"\n                @after-enter=\"onAfterEnter\"\n            >\n                <div\n                    ref=\"actionBar\"\n                    :key=\"state\"\n                    class=\"b-action-bar__container\"\n                    :class=\"containerClasses\"\n                    :style=\"{ width: containerWidth, maxWidth: containerMaxWidth }\"\n                >\n                    <div v-if=\"state === 'start'\" class=\"b-action-bar__container-inner\">\n                        <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                            <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                                <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                            </bento-button>\n                        </div>\n                        <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                            <template v-if=\"isConfirmationVariant && noItemCounter\">\n                                {{ tc('unsavedChanges', 0) }}\n                            </template>\n                            <template v-else>\n                                {{ n(itemCounter) }}\n                                {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                            </template>\n                        </bento-typography>\n                        <bento-button-actions\n                            v-if=\"isConfirmationVariant\"\n                            :actions=\"confirmationActions\"\n                            class=\"b-action-bar__actions\"\n                            inverse\n                        />\n                        <button-actions-with-menu\n                            v-else\n                            :actions=\"actionsInternal\"\n                            class=\"b-action-bar__actions\"\n                            :displayed-actions=\"internalDisplayedActions\"\n                            menu-position=\"top-end\"\n                            disable-responsive-behavior\n                            inverse\n                        />\n                    </div>\n                    <div v-else class=\"b-action-bar__container-inner\">\n                        <div class=\"b-action-bar__state-icon\">\n                            <bento-loading-indicator v-if=\"state === 'loading'\" small inverse />\n                            <checkmark-circle-fill v-if=\"state === 'success'\" :aria-hidden=\"true\" />\n                            <cross-circle-fill v-if=\"state === 'fail'\" :aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography stronger>\n                            <slot name=\"stateLabel\">{{ defaultStateLabel }}</slot>\n                        </bento-typography>\n                        <div v-if=\"!hideStateActions\" class=\"b-action-bar__state-actions\">\n                            <bento-button\n                                v-if=\"state === 'success' && showUndoAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('undo-action')\"\n                                >{{ t('undo') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail' && showRetryAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('retry-action')\"\n                                >{{ t('retry') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail'\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('cancel-action')\"\n                                >{{ t('cancel') }}</bento-button\n                            >\n                        </div>\n                    </div>\n                </div>\n            </Transition>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, type PropType, provide, ref, toRefs, type TransitionProps, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n\n    import { type BentoActionBarState, type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * State of the action bar.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoActionBarState>,\n            default: 'start',\n        },\n        /**\n         * Displays the undo action button in `success` state.\n         */\n        showUndoAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Displays the retry action button in `fail` state.\n         */\n        showRetryAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits([\"close\", \"cancel\", \"save\", \"undo-action\", \"retry-action\", \"cancel-action\"]);\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    const defaultStateLabel = computed(() => {\n        switch (props.state) {\n            case 'loading':\n                return t('applying');\n            case 'success':\n                return t('success');\n            case 'fail':\n                return t('somethingWentWrong');\n            default:\n                return '';\n        }\n    });\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const containerMaxWidth = ref<string | null>(null);\n    const containerWidth = ref<string | null>(null);\n    const isShaking = ref(false);\n\n    const stateTransitionMode = computed(\n        () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode']\n    );\n\n    const hideStateActions = computed(\n        () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction)\n    );\n\n    const onBeforeLeave = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        containerMaxWidth.value = `${el.offsetWidth}px`;\n        containerWidth.value = '100%';\n    };\n\n    const onEnter = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        // Reset styles to get natural width\n        Object.assign(el.style, { width: 'auto', maxWidth: 'none' });\n        const newWidth = el.offsetWidth;\n\n        // Reset it back to the original values\n        Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value });\n\n        requestAnimationFrame(() => {\n            containerMaxWidth.value = `${newWidth}px`;\n        });\n    };\n\n    const onAfterEnter = () => {\n        containerMaxWidth.value = null;\n        containerWidth.value = null;\n\n        if (props.state === 'fail') {\n            isShaking.value = true;\n        }\n    };\n\n    const onAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName.startsWith('shake-')) {\n            isShaking.value = false;\n        }\n    };\n\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n        'b-action-bar__state-animation--shake': isShaking.value,\n    }));\n\n    const containerClasses = computed(() => ({\n        [`b-action-bar__container--${props.state}`]: props.state !== 'start',\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","n","useI18n","label","computed","props","defaultStateLabel","actionBar","ref","containerMaxWidth","containerWidth","isShaking","stateTransitionMode","hideStateActions","onBeforeLeave","el","onEnter","newWidth","onAfterEnter","onAnimationEnd","event","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","containerClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":"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"}

package/dist/chunks/{ai-tag.CD1eQnr_.js → ai-tag.DcQ6Gb-K.js}

@@ -1,5 +1,5 @@
 import { defineComponent as u, ref as n, watch as f, computed as _ } from "vue";
-import { u as v, c as m, h as I } from "./button-actions.Dxez8SNL.js";
+import { u as v, c as m, h as I } from "./button-actions.IzFrNFdl.js";
 import { B as A } from "./typography.C8lPlsbD.js";
 import "./index.Cl4_42j5.js";
 import { u as x } from "./index.B6WW_F-J.js";
@@ -20,6 +20,10 @@ const h = {
     ai: "AI",
     aiExplained: "AI explained"
   },
+  "es-419": {
+    ai: "AI",
+    aiExplained: "IA explicada"
+  },
   "es-ES": {
     ai: "IA",
     aiExplained: "IA explicada"
@@ -62,11 +66,11 @@ const h = {
   },
   emits: ["update:toggled"],
   setup(l, { emit: e }) {
-    const a = l, { t } = x(), o = n(a.toggled), r = n(null), c = n(null), d = y("b-ai-tag-popover");
+    const a = l, { t } = x(), i = n(a.toggled), r = n(null), c = n(null), d = y("b-ai-tag-popover");
     f(
       () => a.toggled,
-      (i) => {
-        o.value = i;
+      (o) => {
+        i.value = o;
       }
     ), v(r, () => {
       p();
@@ -78,18 +82,18 @@ const h = {
           variant: "secondary"
         }
       ] : void 0
-    ), s = (i) => {
-      o.value = i, e("update:toggled", i);
+    ), s = (o) => {
+      i.value = o, e("update:toggled", o);
     }, p = () => {
-      o.value && s(!1);
+      i.value && s(!1);
     };
-    return { __sfc: !0, props: a, t, toggled: o, aiTagRef: r, targetElement: c, popoverId: d, popoverActions: g, emit: e, onToggle: s, closePopover: p, BentoPopover: I, BentoToggleButton: m, BentoTypography: A, ArtificialIntelligenceAiIcon: E };
+    return { __sfc: !0, props: a, t, toggled: i, aiTagRef: r, targetElement: c, popoverId: d, popoverActions: g, emit: e, onToggle: s, closePopover: p, BentoPopover: I, BentoToggleButton: m, BentoTypography: A, ArtificialIntelligenceAiIcon: E };
   }
 });
 var k = function() {
   var e = this, a = e._self._c, t = e._self._setupProxy;
-  return a("div", { ref: "aiTagRef", staticClass: "b-ai-tag", on: { keydown: function(o) {
-    return !o.type.indexOf("key") && e._k(o.keyCode, "esc", 27, o.key, ["Esc", "Escape"]) ? null : t.closePopover.apply(null, arguments);
+  return a("div", { ref: "aiTagRef", staticClass: "b-ai-tag", on: { keydown: function(i) {
+    return !i.type.indexOf("key") && e._k(i.keyCode, "esc", 27, i.key, ["Esc", "Escape"]) ? null : t.closePopover.apply(null, arguments);
   } } }, [a(t.BentoToggleButton, { ref: "targetElement", staticClass: "b-ai-tag__trigger", attrs: { toggled: t.toggled, "aria-controls": t.popoverId, variant: "secondary", condensed: "" }, on: { "update:toggled": t.onToggle }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
     return [a(t.ArtificialIntelligenceAiIcon, { staticClass: "b-ai-tag__trigger-icon", attrs: { "aria-hidden": !0 } })];
   }, proxy: !0 }]) }, [e._v(" " + e._s(t.t("ai")) + " ")]), t.targetElement ? a(t.BentoPopover, { attrs: { id: t.popoverId, open: t.toggled, "target-element": t.targetElement, actions: t.popoverActions, "actions-layout": "fill-container", title: t.t("aiExplained"), "trap-all": "", "trap-all-options": { onDeactivate: t.closePopover, allowOutsideClick: !0 }, "fixed-positioning": "", "overflow-visible": "" }, on: { dismiss: t.closePopover }, scopedSlots: e._u([{ key: "headerIcon", fn: function() {
@@ -107,4 +111,4 @@ const F = P.exports;
 export {
   F as a
 };
-//# sourceMappingURL=ai-tag.CD1eQnr_.js.map
+//# sourceMappingURL=ai-tag.DcQ6Gb-K.js.map

package/dist/chunks/{ai-tag.CD1eQnr_.js.map → ai-tag.DcQ6Gb-K.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-tag.CD1eQnr_.js","sources":["../../src/components/ai-tag/ai-tag.vue"],"sourcesContent":["<template>\n    <div ref=\"aiTagRef\" class=\"b-ai-tag\" @keydown.esc=\"closePopover\">\n        <bento-toggle-button\n            ref=\"targetElement\"\n            :toggled=\"toggled\"\n            :aria-controls=\"popoverId\"\n            variant=\"secondary\"\n            condensed\n            class=\"b-ai-tag__trigger\"\n            @update:toggled=\"onToggle\"\n        >\n            <template #iconLeft>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__trigger-icon\" :aria-hidden=\"true\" />\n            </template>\n            {{ t('ai') }}\n        </bento-toggle-button>\n\n        <bento-popover\n            v-if=\"targetElement\"\n            :id=\"popoverId\"\n            :open=\"toggled\"\n            :target-element=\"targetElement\"\n            :actions=\"popoverActions\"\n            actions-layout=\"fill-container\"\n            :title=\"t('aiExplained')\"\n            trap-all\n            :trap-all-options=\"{ onDeactivate: closePopover, allowOutsideClick: true }\"\n            fixed-positioning\n            overflow-visible\n            @dismiss=\"closePopover\"\n        >\n            <template #headerIcon>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__popover-header-icon\" :aria-hidden=\"true\" />\n            </template>\n            <div class=\"b-ai-tag__popover-content\">\n                <bento-typography v-if=\"influencedValue\" variant=\"title\" medium class=\"b-ai-tag__influenced-value\">\n                    {{ influencedValue }}\n                </bento-typography>\n\n                <bento-typography variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n\n                <bento-typography>\n                    {{ description }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoToggleButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useClickOutside } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types';\n    import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import type { BentoAiTagProps } from './ai-tag.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  title: null,\n  description: null,\n  influencedValue: { default: undefined },\n  toggled: { type: Boolean, default: false },\n  action: { default: undefined }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const toggled = ref(props.toggled);\n    const aiTagRef = ref<HTMLElement | null>(null);\n    const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null);\n    const popoverId = generateUid('b-ai-tag-popover');\n\n    watch(\n        () => props.toggled,\n        value => {\n            toggled.value = value;\n        }\n    );\n\n    useClickOutside(aiTagRef, () => {\n        closePopover();\n    });\n\n    const popoverActions = computed<BentoButtonActionsList>(() =>\n        props.action\n            ? [\n                  {\n                      ...props.action,\n                      variant: 'secondary',\n                  },\n              ]\n            : undefined\n    );\n\n    const emit = defineEmits([\"update:toggled\"]);\n\n    const onToggle = (value: boolean) => {\n        toggled.value = value;\n        emit('update:toggled', value);\n    };\n\n    const closePopover = () => {\n        if (toggled.value) {\n            onToggle(false);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or\n     * enhanced by artificial intelligence.\n     *\n     * @example\n     * import { BentoAiTag } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiTag },\n     *     template: `\n     *          <bento-ai-tag\n     *              title=\"Input fields auto-filled by AI\"\n     *              description=\"Based on your documents uploaded, AI has auto-filled some information for you.\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-tag.scss\" />\n"],"names":["__default__","messages","useI18n","toggled","ref","props","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","onToggle","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuIIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;iBA/DA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAC,EAAA,OAAA,GACAC,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GACAI,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,CAAAM,MAAA;AAER,QAAAR,EAAA,QAAAQ;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAV,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAKVW,IAAA,CAAAL,MAAA;AACI,MAAAR,EAAA,QAAAQ,GACAM,EAAA,kBAAAN,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAV,EAAA,SACIa,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai-tag.DcQ6Gb-K.js","sources":["../../src/components/ai-tag/ai-tag.vue"],"sourcesContent":["<template>\n    <div ref=\"aiTagRef\" class=\"b-ai-tag\" @keydown.esc=\"closePopover\">\n        <bento-toggle-button\n            ref=\"targetElement\"\n            :toggled=\"toggled\"\n            :aria-controls=\"popoverId\"\n            variant=\"secondary\"\n            condensed\n            class=\"b-ai-tag__trigger\"\n            @update:toggled=\"onToggle\"\n        >\n            <template #iconLeft>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__trigger-icon\" :aria-hidden=\"true\" />\n            </template>\n            {{ t('ai') }}\n        </bento-toggle-button>\n\n        <bento-popover\n            v-if=\"targetElement\"\n            :id=\"popoverId\"\n            :open=\"toggled\"\n            :target-element=\"targetElement\"\n            :actions=\"popoverActions\"\n            actions-layout=\"fill-container\"\n            :title=\"t('aiExplained')\"\n            trap-all\n            :trap-all-options=\"{ onDeactivate: closePopover, allowOutsideClick: true }\"\n            fixed-positioning\n            overflow-visible\n            @dismiss=\"closePopover\"\n        >\n            <template #headerIcon>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__popover-header-icon\" :aria-hidden=\"true\" />\n            </template>\n            <div class=\"b-ai-tag__popover-content\">\n                <bento-typography v-if=\"influencedValue\" variant=\"title\" medium class=\"b-ai-tag__influenced-value\">\n                    {{ influencedValue }}\n                </bento-typography>\n\n                <bento-typography variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n\n                <bento-typography>\n                    {{ description }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoToggleButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useClickOutside } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types';\n    import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import type { BentoAiTagProps } from './ai-tag.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  title: null,\n  description: null,\n  influencedValue: { default: undefined },\n  toggled: { type: Boolean, default: false },\n  action: { default: undefined }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const toggled = ref(props.toggled);\n    const aiTagRef = ref<HTMLElement | null>(null);\n    const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null);\n    const popoverId = generateUid('b-ai-tag-popover');\n\n    watch(\n        () => props.toggled,\n        value => {\n            toggled.value = value;\n        }\n    );\n\n    useClickOutside(aiTagRef, () => {\n        closePopover();\n    });\n\n    const popoverActions = computed<BentoButtonActionsList>(() =>\n        props.action\n            ? [\n                  {\n                      ...props.action,\n                      variant: 'secondary',\n                  },\n              ]\n            : undefined\n    );\n\n    const emit = defineEmits([\"update:toggled\"]);\n\n    const onToggle = (value: boolean) => {\n        toggled.value = value;\n        emit('update:toggled', value);\n    };\n\n    const closePopover = () => {\n        if (toggled.value) {\n            onToggle(false);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or\n     * enhanced by artificial intelligence.\n     *\n     * @example\n     * import { BentoAiTag } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiTag },\n     *     template: `\n     *          <bento-ai-tag\n     *              title=\"Input fields auto-filled by AI\"\n     *              description=\"Based on your documents uploaded, AI has auto-filled some information for you.\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-tag.scss\" />\n"],"names":["__default__","messages","useI18n","toggled","ref","props","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","onToggle","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuIIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;iBA/DA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAC,EAAA,OAAA,GACAC,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GACAI,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,CAAAM,MAAA;AAER,QAAAR,EAAA,QAAAQ;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAV,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAKVW,IAAA,CAAAL,MAAA;AACI,MAAAR,EAAA,QAAAQ,GACAM,EAAA,kBAAAN,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAV,EAAA,SACIa,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/anchor-scroller.BjagnSrr.js

@@ -0,0 +1,138 @@
+import { defineComponent as v, computed as c, toRef as b, ref as S, watch as f } from "vue";
+import { i as y, r as T } from "./index.v5OGTDYQ.js";
+import { p as C, B as k } from "./typography.C8lPlsbD.js";
+import { u as j } from "./index.B6WW_F-J.js";
+import { g as B } from "./generate-uid.NJ8tVoha.js";
+import { u as F } from "./utils.BzUwtTXc.js";
+import { u as R, s as w, a as A } from "./scroll-to-section.MPzOkzfL.js";
+import { B as D } from "./button.Df_UH5wZ.js";
+import { n as I } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { F as N } from "./fixed-scroller.BFuYW-M3.js";
+import "../assets/anchor-scroller.css";
+const O = /* @__PURE__ */ v({
+  __name: "anchor-scroller-list",
+  props: {
+    activeIndex: { default: void 0 },
+    items: null,
+    scrollOffset: { default: void 0 }
+  },
+  setup(u) {
+    const e = u, n = c(() => e.items), { isFocusable: t, navigationItemRefs: l, onKeydownNavigation: s } = R(n, {
+      isDisabled: (a) => a.disabled,
+      initialIndex: b(e, "activeIndex")
+    });
+    return { __sfc: !0, props: e, navigationItems: n, isFocusable: t, navigationItemRefs: l, onKeydownNavigation: s, onScrollToSection: (a, r) => w(a, {
+      disabled: r,
+      scrollOffset: e.scrollOffset,
+      warningPrefix: "bento-anchor-scroller"
+    }), BentoButton: D };
+  }
+});
+var E = function() {
+  var e = this, n = e._self._c, t = e._self._setupProxy;
+  return n("ul", { staticClass: "b-anchor-scroller-list", on: { keydown: t.onKeydownNavigation } }, e._l(e.items, function({ title: l, disabled: s, elementRef: i }, a) {
+    return n("li", { key: a, staticClass: "b-anchor-scroller-list__item" }, [n(t.BentoButton, { ref: "navigationItemRefs", refInFor: !0, staticClass: "b-anchor-scroller-list__item-button", class: {
+      "b-anchor-scroller-list__item-button--active": e.activeIndex === a,
+      "b-anchor-scroller-list__item-button--disabled": s
+    }, attrs: { "aria-current": e.activeIndex === a ? "location" : null, "aria-disabled": s, tabindex: t.isFocusable(a) ? null : "-1", variant: "tertiary-with-background" }, on: { click: function(r) {
+      return t.onScrollToSection(i, s);
+    } }, nativeOn: { keydown: [function(r) {
+      return !r.type.indexOf("key") && e._k(r.keyCode, "space", 32, r.key, [" ", "Spacebar"]) ? null : (r.preventDefault(), t.onScrollToSection(i, s));
+    }, function(r) {
+      return !r.type.indexOf("key") && e._k(r.keyCode, "enter", 13, r.key, "Enter") ? null : (r.preventDefault(), t.onScrollToSection(i, s));
+    }] } }, [e._v(" " + e._s(l) + " ")])], 1);
+  }), 0);
+}, L = [], P = /* @__PURE__ */ I(
+  O,
+  E,
+  L,
+  !1,
+  null,
+  "a49180be"
+);
+const z = P.exports, J = {
+  "de-DE": {
+    jumpTo: "Springe zu"
+  },
+  "en-GB": {
+    jumpTo: "Jump to"
+  },
+  "en-US": {
+    jumpTo: "Jump to"
+  },
+  "es-ES": {
+    jumpTo: "Saltar a"
+  },
+  "es-MX": {
+    jumpTo: "Saltar a"
+  },
+  "fr-FR": {
+    jumpTo: "Passer à"
+  },
+  "it-IT": {
+    jumpTo: "Vai a"
+  },
+  "ja-JP": {
+    jumpTo: "移動先"
+  },
+  "pt-BR": {
+    jumpTo: "Ir para"
+  },
+  "zh-CN": {
+    jumpTo: "跳转到"
+  }
+}, K = {
+  i18n: { messages: J },
+  name: "bento-anchor-scroller"
+}, U = /* @__PURE__ */ v({
+  ...K,
+  props: {
+    activeIndex: { default: void 0 },
+    items: null
+  },
+  emits: ["update:active-index"],
+  setup(u, { emit: e }) {
+    const n = u, { t } = j(), l = S(null), s = c(() => n.items.map((o) => ({ ...o }))), i = c(
+      () => n.items.map((o, x) => ({
+        element: F(o.elementRef),
+        originalIndex: x,
+        disabled: o.disabled
+      })).filter(
+        (o) => !o.disabled && !!o.element
+      )
+    ), { top: a, bottom: r } = y(l), d = c(() => i.value.map((o) => o.element)), g = c(() => ({
+      "b-anchor-scroller__navigation--pinned": a.value <= 1
+    })), { activeIndex: m } = A(d, {
+      default: b(n, "activeIndex")
+    }), p = T(m, 200), _ = c(() => {
+      const o = i.value[p.value];
+      return o ? o.originalIndex : 0;
+    });
+    f(_, (o) => {
+      Number.isFinite(o) && e("update:active-index", o);
+    }), f(
+      () => n.activeIndex,
+      (o) => {
+        Number.isFinite(o) && s.value[o].disabled && C("[bento-anchor-scroller] activeIndex should not be a disabled item");
+      }
+    );
+    const h = B("bento-anchor-scroller-label");
+    return { __sfc: !0, t, props: n, emit: e, navigationRef: l, computedItems: s, enabledItems: i, top: a, bottom: r, scrollToTargets: d, navigationConditionalClasses: g, relativeActiveIndex: m, debouncedActiveIndex: p, currentActiveIndex: _, navLabelId: h, BentoTypography: k, FixedScroller: N, AnchorScrollerList: z };
+  }
+});
+var G = function() {
+  var e = this, n = e._self._c, t = e._self._setupProxy;
+  return t.computedItems.length ? n("div", { staticClass: "b-anchor-scroller" }, [n("nav", { ref: "navigationRef", staticClass: "b-anchor-scroller__navigation", class: t.navigationConditionalClasses, attrs: { "aria-labelledby": t.navLabelId } }, [n(t.FixedScroller, { attrs: { condensed: "", centered: "" } }, [n("div", { staticClass: "b-anchor-scroller__navigation-panel" }, [n(t.BentoTypography, { staticClass: "b-anchor-scroller__navigation-panel-label", attrs: { id: t.navLabelId, el: "span", stronger: "" } }, [e._v(" " + e._s(t.t("jumpTo")) + " ")]), n(t.AnchorScrollerList, { attrs: { items: t.computedItems, "active-index": t.currentActiveIndex, "scroll-offset": t.bottom } })], 1)])], 1), e._t("default")], 2) : e._e();
+}, M = [], V = /* @__PURE__ */ I(
+  U,
+  G,
+  M,
+  !1,
+  null,
+  "a963f9fd"
+);
+const ne = V.exports;
+export {
+  ne as a
+};
+//# sourceMappingURL=anchor-scroller.BjagnSrr.js.map

package/dist/chunks/anchor-scroller.BjagnSrr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-scroller.BjagnSrr.js","sources":["../../src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue","../../src/components/anchor-scroller/anchor-scroller.vue"],"sourcesContent":["<template>\n    <ul class=\"b-anchor-scroller-list\" @keydown=\"onKeydownNavigation\">\n        <li v-for=\"({ title, disabled, elementRef }, index) in items\" :key=\"index\" class=\"b-anchor-scroller-list__item\">\n            <bento-button\n                ref=\"navigationItemRefs\"\n                :aria-current=\"activeIndex === index ? 'location' : null\"\n                class=\"b-anchor-scroller-list__item-button\"\n                :class=\"{\n                    'b-anchor-scroller-list__item-button--active': activeIndex === index,\n                    'b-anchor-scroller-list__item-button--disabled': disabled,\n                }\"\n                :aria-disabled=\"disabled\"\n                :tabindex=\"isFocusable(index) ? null : '-1'\"\n                variant=\"tertiary-with-background\"\n                @click=\"onScrollToSection(elementRef, disabled)\"\n                @keydown.space.native.prevent=\"onScrollToSection(elementRef, disabled)\"\n                @keydown.enter.native.prevent=\"onScrollToSection(elementRef, disabled)\"\n            >\n                {{ title }}\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import BentoButton from '@/components/button/button.vue';\n    import { useSectionNavigationKeyboard } from '@/composables/use-section-navigation-keyboard';\n    import { scrollToSection, type ScrollToSectionTarget } from '@/utils/ts/scroll-to-section';\n    import { type AnchorScrollerListProps } from './anchor-scroller-list.types';\n    import { computed, toRef } from 'vue';\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null,\n  scrollOffset: { default: undefined }\n});\n\n    const navigationItems = computed(() => props.items);\n    const { isFocusable, navigationItemRefs, onKeydownNavigation } = useSectionNavigationKeyboard(navigationItems, {\n        isDisabled: item => item.disabled,\n        initialIndex: toRef(props, 'activeIndex'),\n    });\n\n    const onScrollToSection = (\n        elementRef: AnchorScrollerListProps['items'][number]['elementRef'],\n        disabled?: boolean\n    ) =>\n        scrollToSection(elementRef as ScrollToSectionTarget, {\n            disabled,\n            scrollOffset: props.scrollOffset,\n            warningPrefix: 'bento-anchor-scroller',\n        });\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller-list.scss\" />\n","<template>\n    <div v-if=\"computedItems.length\" class=\"b-anchor-scroller\">\n        <nav\n            ref=\"navigationRef\"\n            class=\"b-anchor-scroller__navigation\"\n            :class=\"navigationConditionalClasses\"\n            :aria-labelledby=\"navLabelId\"\n        >\n            <fixed-scroller condensed centered>\n                <div class=\"b-anchor-scroller__navigation-panel\">\n                    <bento-typography\n                        :id=\"navLabelId\"\n                        el=\"span\"\n                        class=\"b-anchor-scroller__navigation-panel-label\"\n                        stronger\n                    >\n                        {{ t('jumpTo') }}\n                    </bento-typography>\n\n                    <anchor-scroller-list\n                        :items=\"computedItems\"\n                        :active-index=\"currentActiveIndex\"\n                        :scroll-offset=\"bottom\"\n                    />\n                </div>\n            </fixed-scroller>\n        </nav>\n\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRef, watch } from 'vue';\n    import { refDebounced, useElementBounding } from '@vueuse/core';\n    import BentoTypography from '@/components/typography/typography.vue';\n    import { FixedScroller } from '@/internal';\n    import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types';\n    import { AnchorScrollerList } from './components/anchor-scroller-list';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import messages from './messages.json';\n    import { useScrollSpy } from '@/composables/use-scroll-spy';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null\n});\n\n    const emit = defineEmits([\"update:active-index\"]);\n\n    const navigationRef = ref(null);\n\n    const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item })));\n\n    // Skip and cache only items that are enabled\n    const enabledItems = computed(() =>\n        props.items\n            .map((item, originalIndex) => ({\n                element: unrefElement(item.elementRef),\n                originalIndex,\n                disabled: item.disabled,\n            }))\n            .filter(\n                (item): item is { element: Element; originalIndex: number; disabled: boolean } =>\n                    !item.disabled && !!item.element\n            )\n    );\n\n    const { top, bottom } = useElementBounding(navigationRef);\n\n    // Extract strictly the elements for the ScrollSpy to watch\n    const scrollToTargets = computed(() => enabledItems.value.map(c => c.element));\n\n    const navigationConditionalClasses = computed(() => ({\n        'b-anchor-scroller__navigation--pinned': top.value <= 1,\n    }));\n\n    const { activeIndex: relativeActiveIndex } = useScrollSpy(scrollToTargets, {\n        default: toRef(props, 'activeIndex'),\n    });\n\n    const debouncedActiveIndex = refDebounced(relativeActiveIndex, 200);\n\n    const currentActiveIndex = computed(() => {\n        const candidate = enabledItems.value[debouncedActiveIndex.value];\n\n        return candidate ? candidate.originalIndex : 0;\n    });\n\n    watch(currentActiveIndex, val => {\n        if (Number.isFinite(val)) {\n            emit('update:active-index', val);\n        }\n    });\n\n    watch(\n        () => props.activeIndex,\n        val => {\n            if (Number.isFinite(val) && computedItems.value[val].disabled) {\n                printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`);\n            }\n        }\n    );\n\n    const navLabelId = generateUid('bento-anchor-scroller-label');\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A navigation component that tracks page scroll and allows jumping to sections.\n     *\n     * @example\n     * import { BentoAnchorScroller } from '@adyen/bento-vue2';\n     * import { ref } from 'vue';\n     *\n     * export default {\n     *     components: { BentoAnchorScroller },\n     *     template: `\n     *          <bento-anchor-scroller :items=\"items\">\n     *              <section ref=\"section1\">Section 1</section>\n     *              <section ref=\"section2\">Section 2</section>\n     *          </bento-anchor-scroller>\n     *     `,\n     *      setup() {\n     *          const section1 = ref(null);\n     *          const section2 = ref(null);\n     *          const items = ref([\n     *              { title: 'Section 1', elementRef: section1 },\n     *              { title: 'Section 2', elementRef: section2 },\n     *          ]);\n     *          return {\n     *              items,\n     *              section1,\n     *              section2,\n     *          }\n     *      }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-anchor-scroller',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller.scss\" />\n"],"names":["navigationItems","computed","props","isFocusable","navigationItemRefs","onKeydownNavigation","useSectionNavigationKeyboard","item","toRef","elementRef","disabled","scrollToSection","__default__","messages","useI18n","navigationRef","ref","computedItems","enabledItems","originalIndex","unrefElement","top","bottom","useElementBounding","scrollToTargets","c","navigationConditionalClasses","relativeActiveIndex","useScrollSpy","debouncedActiveIndex","refDebounced","currentActiveIndex","candidate","watch","val","emit","printDevelopmentWarning","navLabelId","generateUid"],"mappings":";;;;;;;;;;;;;;;;;;;iBAqCIA,IAAAC,EAAA,MAAAC,EAAA,KAAA,GACA,EAAA,aAAAC,GAAA,oBAAAC,GAAA,qBAAAC,EAAA,IAAAC,EAAAN,GAAA;AAAA,MAA+G,YAAA,CAAAO,MAAAA,EAAA;AAAA,MAClF,cAAAC,EAAAN,GAAA,aAAA;AAAA,IACe,CAAA;wIAG5C,CAAAO,GAAAC,MAAAC,EAAAF,GAAA;AAAA,MAIyD,UAAAC;AAAA,MACjD,cAAAR,EAAA;AAAA,MACoB,eAAA;AAAA,IACL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC+FvBU,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;iBApGA,EAAA,EAAA,IAAAC,EAAA,GASAC,IAAAC,EAAA,IAAA,GAEAC,IAAAhB,EAAA,MAAAC,EAAA,MAAA,IAAA,CAAAK,OAAA,EAAA,GAAAA,EAAA,EAAA,CAAA,GAGAW,IAAAjB;AAAA,MAAqB,MAAAC,EAAA,MAAA,IAAA,CAAAK,GAAAY,OAAA;AAAA,QAEkB,SAAAC,EAAAb,EAAA,UAAA;AAAA,QACU,eAAAY;AAAA,QACrC,UAAAZ,EAAA;AAAA,MACe,EAAA,EAAA;AAAA,QAElB,CAAAA,MAAA,CAAAA,EAAA,YAAA,CAAA,CAAAA,EAAA;AAAA,MAEgC;AAAA,IACjC,GAGR,EAAA,KAAAc,GAAA,QAAAC,EAAA,IAAAC,EAAAR,CAAA,GAGAS,IAAAvB,EAAA,MAAAiB,EAAA,MAAA,IAAA,CAAAO,MAAAA,EAAA,OAAA,CAAA,GAEAC,IAAAzB,EAAA,OAAA;AAAA,MAAqD,yCAAAoB,EAAA,SAAA;AAAA,IACK,EAAA,GAG1D,EAAA,aAAAM,EAAA,IAAAC,EAAAJ,GAAA;AAAA,MAA2E,SAAAhB,EAAAN,GAAA,aAAA;AAAA,IACpC,CAAA,GAGvC2B,IAAAC,EAAAH,GAAA,GAAA,GAEAI,IAAA9B,EAAA,MAAA;AACI,YAAA+B,IAAAd,EAAA,MAAAW,EAAA,KAAA;AAEA,aAAAG,IAAAA,EAAA,gBAAA;AAAA,IAA6C,CAAA;AAGjD,IAAAC,EAAAF,GAAA,CAAAG,MAAA;AACI,MAAA,OAAA,SAAAA,CAAA,KACIC,EAAA,uBAAAD,CAAA;AAAA,IACJ,CAAA,GAGJD;AAAA,MAAA,MAAA/B,EAAA;AAAA,MACgB,CAAAgC,MAAA;AAER,QAAA,OAAA,SAAAA,CAAA,KAAAjB,EAAA,MAAAiB,CAAA,EAAA,YACIE,EAAA,mEAAA;AAAA,MACJ;AAAA,IACJ;AAGJ,UAAAC,IAAAC,EAAA,6BAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{base-modal.BbMTTAi5.js → base-modal.DVE-ERAq.js}

@@ -1,14 +1,14 @@
 import { defineComponent as G, useSlots as Y, ref as u, computed as l, inject as Q, watch as N, nextTick as X, onUnmounted as Z, useAttrs as V, onMounted as tt, provide as D, toRefs as et } from "vue";
 import { B as at } from "./button.Df_UH5wZ.js";
-import { B as ot } from "./focus-trap.CUZQ1kQD.js";
+import { B as ot } from "./focus-trap.Bu-ikp7k.js";
 import { u as q } from "./use-has-slot.C9lQZ6nz.js";
 import { u as nt } from "./index.B6WW_F-J.js";
-import { l as st } from "./button-actions.Dxez8SNL.js";
+import { l as st } from "./button-actions.IzFrNFdl.js";
 import { g as lt } from "./generate-uid.NJ8tVoha.js";
 import { C as it } from "./cross.CC_B-vG-.js";
-import { b as ct, B as rt, D as ut, a as dt } from "./dialog-page.D_m11exR.js";
+import { b as ct, B as rt, D as ut, a as dt } from "./dialog-page.DmFgW2fj.js";
 import { B as mt } from "./typography.C8lPlsbD.js";
-import { F as pt } from "./footer-actions.BB94G3iB.js";
+import { F as pt } from "./footer-actions.Dd7P41be.js";
 import { o as ft } from "./resize.Bqks3WUm.js";
 import { a as gt, G as _t } from "./grid-layout.1aIiz2N_.js";
 import { n as W } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -337,4 +337,4 @@ export {
   Ct as g,
   Qt as h
 };
-//# sourceMappingURL=base-modal.BbMTTAi5.js.map
+//# sourceMappingURL=base-modal.DVE-ERAq.js.map