@adyen/bento-vue3 1.41.0 → 1.43.0

package/dist/styles/styleguide.css

@@ -103,6 +103,7 @@
   --b-link-text-decoration: underline;
   --b-input-field-input-box-focus-border-width: 1.5px;
   --b-input-field-input-box-height: 36px;
+  --b-input-field-password-validation-title-font-weight: 700;
   --b-header-actions-margin-top-desktop: 0;
   --b-filter-button-label-line-height: 20px;
   --b-filter-bar-select-filter-button-divider-border-width: 0;
@@ -143,6 +144,7 @@
   --b-data-grid-resizer-last-child-right: -4px;
   --b-data-grid-resizer-width: 8px;
   --b-data-grid-cell-hover-padding: 14px 15px;
+  --b-data-grid-row-nested-rows-loading-container-padding: 14px;
   --b-data-grid-column-separator-height: 100%;
   --b-data-grid-column-with-sorting-or-column-panel-hover-padding: 3px 15px;
   --b-data-grid-column-hover-padding: 7px 15px;
@@ -460,7 +462,7 @@
   --b-tutorial-popover-ripple-before-filter: blur(var(--b-spacer-110));
   --b-tutorial-popover-ripple-before-background-color: var(--b-color-decorative-green);
   --b-tutorial-popover-color: var(--b-color-label-secondary);
-  --b-tooltip-z-index: 5;
+  --b-tooltip-z-index: var(--b-z-index-global-elevated);
   --b-tooltip-padding: var(--b-spacer-020) var(--b-spacer-040);
   --b-tooltip-color: var(--b-color-label-inverse-primary);
   --b-tooltip-border-radius: var(--b-border-radius-s);
@@ -542,7 +544,7 @@
   --b-toast-item-shadow: var(--b-shadow-medium-border);
   --b-toast-item-icon-margin: var(--b-spacer-070);
   --b-toast-item-icon-color: var(--b-color-label-highlight);
-  --b-toast-item-z-index: 15;
+  --b-toast-item-z-index: var(--b-z-index-global-instant-interaction);
   --b-toast-item-spacing: var(--b-spacer-070);
   --b-toast-item-button-color: var(--b-color-label-inverse-primary);
   --b-toast-item-color: var(--b-color-label-inverse-primary);
@@ -644,7 +646,7 @@
   --b-summary-grid-item-amount-secondary-label-padding-left: var(--b-spacer-020);
   --b-summary-grid-item-content-trend-margin-left: var(--b-spacer-040);
   --b-summary-grid-item-content-label-line-height: var(--b-text-body-wide-line-height);
-  --b-summary-grid-item-content-label-font-weight: 600;
+  --b-summary-grid-item-content-label-font-weight: var(--b-text-body-strongest-font-weight);
   --b-summary-grid-item-title-icons-margin-left: var(--b-spacer-060);
   --b-summary-grid-item-title-icons-height: var(--b-text-body-line-height);
   --b-summary-grid-item-title-icons-gap: var(--b-spacer-060);
@@ -716,7 +718,7 @@
   --b-sidepanel-page-header-background-color: var(--b-color-background-modal);
   --b-sidepanel-backdrop-background-color: var(--b-color-support-overlay);
   --b-sidepanel-animation-duration: var(--b-animation-duration-slow);
-  --b-sidepanel-close-button-z-index: 1;
+  --b-sidepanel-close-button-z-index: var(--b-z-index-local-tier-1);
   --b-sidepanel-close-button-right: var(--b-spacer-090);
   --b-sidepanel-border-radius: var(--b-border-radius-l);
   --b-sidepanel-background-color: var(--b-color-background-modal);
@@ -849,7 +851,7 @@
   --b-promo-banner-background-color-blue: var(--b-color-background-highlight-weak);
   --b-promo-banner-color: var(--b-color-label-primary);
   --b-promo-banner-border-radius: var(--b-border-radius-xl);
-  --b-popper-z-index: 5;
+  --b-popper-z-index: var(--b-z-index-global-elevated);
   --b-popover-animation-duration: var(--b-animation-duration-moderate);
   --b-popover-footer-padding: var(--b-spacer-000) var(--b-spacer-070) var(--b-spacer-060) var(--b-spacer-070);
   --b-popover-image-dismiss-icon-top: var(--b-spacer-070);
@@ -867,7 +869,7 @@
   --b-popover-dismiss-button-on-image-icon-active-color: var(--b-color-label-inverse-primary);
   --b-popover-dismiss-button-on-image-icon-hovered-color: var(--b-color-label-inverse-primary);
   --b-popover-dismiss-button-on-image-icon-color: var(--b-color-label-inverse-primary);
-  --b-popover-z-index: 5;
+  --b-popover-z-index: var(--b-z-index-global-elevated);
   --b-popover-color: var(--b-color-label-primary);
   --b-popover-box-shadow: var(--b-shadow-medium-border);
   --b-popover-border-radius: var(--b-border-radius-m);
@@ -885,11 +887,11 @@
   --b-pagination-color: var(--b-color-label-primary);
   --b-modal-animation-duration: var(--b-animation-duration-moderate);
   --b-modal-backdrop-background-color: var(--b-color-support-overlay);
-  --b-modal-close-button-z-index: 1;
+  --b-modal-close-button-z-index: var(--b-z-index-local-tier-1);
   --b-modal-close-button-right: var(--b-spacer-090);
   --b-modal-close-button-height: var(--b-text-title-line-height);
   --b-modal-actions-container-padding: var(--b-spacer-070) var(--b-spacer-090);
-  --b-modal-header-container-z-index: 1;
+  --b-modal-header-container-z-index: var(--b-z-index-local-tier-1);
   --b-modal-header-container-padding-inline: var(--b-spacer-090) var(--b-spacer-130);
   --b-modal-header-min-height: var(--b-text-title-line-height);
   --b-modal-content-padding: var(--b-spacer-070) var(--b-spacer-090);
@@ -901,7 +903,7 @@
   --b-modal-padding: var(--b-spacer-000);
   --b-modal-border-radius: var(--b-border-radius-l);
   --b-modal-fullscreen-animation-duration: var(--b-animation-duration-moderate);
-  --b-modal-fullscreen-close-button-z-index: 1;
+  --b-modal-fullscreen-close-button-z-index: var(--b-z-index-local-tier-1);
   --b-modal-fullscreen-close-button-padding-inline: var(--b-spacer-090);
   --b-modal-fullscreen-separator-margin-right: var(--b-spacer-110);
   --b-modal-fullscreen-separator-border-left: var(--b-border-width-s) solid var(--b-color-separator-primary);
@@ -1056,7 +1058,7 @@
   --b-inspector-header-color: var(--b-color-label-primary);
   --b-inspector-container-padding: var(--b-spacer-070) var(--b-spacer-090);
   --b-inspector-container-wrapper-border-left: 1px solid var(--b-color-separator-secondary);
-  --b-inspector-container-wrapper-z-index: 5;
+  --b-inspector-container-wrapper-z-index: var(--b-z-index-global-elevated);
   --b-inspector-container-wrapper-background-color: var(--b-color-background-primary);
   --b-input-field-error-message-margin-top: var(--b-spacer-040);
   --b-input-field-description-padding: var(--b-spacer-000);
@@ -1127,6 +1129,11 @@
   --b-input-field-label-requirement-color: var(--b-color-label-secondary);
   --b-input-field-label-margin-bottom: var(--b-spacer-040);
   --b-input-field-label-color: var(--b-color-label-primary);
+  --b-input-field-password-validation-list-valid-icon-color: var(--b-color-label-success);
+  --b-input-field-password-validation-list-invalid-color: var(--b-color-label-secondary);
+  --b-input-field-password-validation-list-margin: var(--b-spacer-060);
+  --b-input-field-password-validation-list-text-margin-left: var(--b-spacer-040);
+  --b-input-field-password-validation-list-gap: var(--b-spacer-060);
   --b-info-icon-color: var(--b-color-label-primary);
   --b-header-component-title-margin-top: var(--b-spacer-020);
   --b-header-actions-margin-top: var(--b-spacer-070);
@@ -1222,34 +1229,89 @@
   --b-filter-bar-actions-gap: var(--b-spacer-040);
   --b-filter-bar-persistent-filters-padding-right: var(--b-spacer-040);
   --b-filter-bar-persistent-filters-border-color: var(--b-color-outline-secondary);
-  --b-filter-bar-z-index: 5;
+  --b-filter-bar-z-index: var(--b-z-index-global-elevated);
   --b-filter-bar-padding-right: var(--b-spacer-070);
   --b-filter-bar-gap: var(--b-spacer-040);
-  --b-filter-bar-button-secondary-label-color: var(--b-color-label-secondary);
+  --color: {color.label.primary};
   --b-filter-bar-button-label-container-gap: var(--b-spacer-020);
-  --b-filter-bar-button-hover-color: var(--b-color-label-primary-hover);
+  --b-filter-bar-button-hover-color: var(--b-color-label-secondary);
   --b-filter-bar-button-hover-background-color: var(--b-color-background-primary-hover);
   --b-filter-bar-button-filter-open-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
+  --b-filter-bar-button-filter-open-background-color: var(--b-color-background-primary-active);
+  --b-filter-bar-button-counter-filter-open-background-color: var(--b-color-background-tertiary-active);
+  --b-filter-bar-button-counter-filter-open-color: var(--b-color-label-primary);
   --b-filter-bar-button-counter-hover-background-color: var(--b-color-background-tertiary-hover);
+  --b-filter-bar-button-counter-hover-color: var(--b-color-label-secondary);
   --b-filter-bar-button-counter-disabled-color: var(--b-color-label-disabled);
   --b-filter-bar-button-counter-disabled-background-color: var(--b-color-background-disabled);
   --b-filter-bar-button-counter-padding: 0 var(--b-spacer-020);
   --b-filter-bar-button-counter-margin-right: var(--b-spacer-020);
-  --b-filter-bar-button-counter-color: var(--b-color-label-secondary);
+  --b-filter-bar-button-counter-color: var(--b-color-label-primary);
   --b-filter-bar-button-counter-border-radius: var(--b-border-radius-s);
   --b-filter-bar-button-counter-background-color: var(--b-color-background-tertiary);
   --b-filter-bar-button-container-padding: var(--b-spacer-020) var(--b-spacer-050);
   --b-filter-bar-button-container-gap: var(--b-spacer-040);
   --b-filter-bar-button-with-secondary-label-container-padding-right: var(--b-spacer-050);
-  --b-filter-bar-button-with-chevron-container-padding-right: var(--b-spacer-040);
+  --b-filter-bar-button-with-counter-container-padding-right: var(--b-spacer-020);
   --b-filter-bar-button-disabled-color: var(--b-color-label-disabled);
   --b-filter-bar-button-disabled-background-color: var(--b-color-background-primary);
-  --b-filter-bar-button-chevron-padding-right: var(--b-spacer-060);
+  --b-filter-bar-button-attention-outline: 0.5px solid var(--b-color-outline-secondary-active);
+  --b-filter-bar-button-attention-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
   --b-filter-bar-button-active-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
   --b-filter-bar-button-color: var(--b-color-label-primary);
   --b-filter-bar-button-border-radius: var(--b-border-radius-m);
   --b-filter-bar-button-border: var(--b-border-width-s) solid var(--b-color-outline-secondary);
   --b-filter-bar-button-background-color: var(--b-color-background-primary);
+  --b-file-uploader-restrictions-error-color: var(--b-color-label-critical);
+  --b-file-uploader-restrictions-disabled-color: var(--b-color-label-disabled);
+  --b-file-uploader-restrictions-margin-top: var(--b-spacer-020);
+  --b-file-uploader-restrictions-color: var(--b-color-label-secondary);
+  --b-file-uploader-file-card-icon-orange-color: var(--b-color-decorative-orange);
+  --b-file-uploader-file-card-icon-grey-color: var(--b-color-label-secondary);
+  --b-file-uploader-file-card-icon-green-color: var(--b-color-decorative-green);
+  --b-file-uploader-file-card-icon-error-color: var(--b-color-label-critical);
+  --b-file-uploader-file-card-icon-blue-color: var(--b-color-decorative-orange);
+  --b-file-uploader-file-card-info-gap: var(--b-spacer-040);
+  --b-file-uploader-file-card-error-message-margin-top: var(--b-spacer-020);
+  --b-file-uploader-file-card-error-message-color: var(--b-color-label-critical);
+  --b-file-uploader-file-card-error-background-color: var(--b-color-background-critical-weak);
+  --b-file-uploader-file-card-animation-transition: var(--b-animation-duration-moderate) var(--b-animation-easing-standard);
+  --b-file-uploader-file-card-actions-gap: var(--b-spacer-090);
+  --b-file-uploader-file-card-padding: var(--b-spacer-040) var(--b-spacer-060);
+  --b-file-uploader-file-card-gap: var(--b-spacer-040);
+  --b-file-uploader-file-card-border-radius: var(--b-border-radius-m);
+  --b-file-uploader-file-card-background-color: var(--b-color-background-secondary);
+  --b-file-uploader-title-margin-top: var(--b-spacer-060);
+  --b-file-uploader-files-gap: var(--b-spacer-040);
+  --b-file-uploader-icon-error-color: var(--b-color-label-on-color);
+  --b-file-uploader-icon-error-background-color: var(--b-color-background-critical-strong);
+  --b-file-uploader-icon-drag-over-color: var(--b-color-label-on-color);
+  --b-file-uploader-icon-drag-over-background-color: var(--b-color-background-success-strong);
+  --b-file-uploader-icon-width: var(--b-spacer-100);
+  --b-file-uploader-icon-padding: var(--b-spacer-040);
+  --b-file-uploader-icon-height: var(--b-spacer-100);
+  --b-file-uploader-icon-border-radius: var(--b-border-radius-xl);
+  --b-file-uploader-icon-background-color: var(--b-color-background-tertiary);
+  --b-file-uploader-description-disabled-color: var(--b-color-label-disabled);
+  --b-file-uploader-description-margin-top: var(--b-spacer-020);
+  --b-file-uploader-description-color: var(--b-color-label-secondary);
+  --b-file-uploader-button-condensed-margin-left: var(--b-spacer-060);
+  --b-file-uploader-button-margin-top: var(--b-spacer-060);
+  --b-file-uploader-area-error-border: var(--b-border-width-m) solid var(--b-color-outline-critical);
+  --b-file-uploader-area-error-background-color: var(--b-color-background-critical-weak);
+  --b-file-uploader-area-hover-background-color: var(--b-color-background-primary-hover);
+  --b-file-uploader-area-drag-over-border: var(--b-border-width-m) solid var(--b-color-outline-success);
+  --b-file-uploader-area-drag-over-background-color: var(--b-color-background-success-weak);
+  --b-file-uploader-area-disabled-color: var(--b-color-label-disabled);
+  --b-file-uploader-area-disabled-border: var(--b-border-width-m) dashed var(--b-color-outline-disabled);
+  --b-file-uploader-area-disabled-background-color: var(--b-color-background-disabled);
+  --b-file-uploader-area-condensed-padding: var(--b-spacer-040) var(--b-spacer-060);
+  --b-file-uploader-area-padding: var(--b-spacer-080) var(--b-spacer-090);
+  --b-file-uploader-area-border-radius: var(--b-border-radius-m);
+  --b-file-uploader-area-border: var(--b-border-width-m) dashed var(--b-color-outline-tertiary);
+  --b-file-uploader-area-background-color: var(--b-color-background-primary);
+  --b-file-uploader-alert-margin-top: var(--b-spacer-040);
+  --b-file-uploader-gap: var(--b-spacer-040);
   --b-field-label-tooltip-wrapper-margin-right: var(--b-spacer-040);
   --b-field-label-requirement-color: var(--b-color-label-secondary);
   --b-field-label-condensed-margin-bottom: var(--b-spacer-030);
@@ -1322,7 +1384,7 @@
   --b-dialog-page-animation-duration: var(--b-animation-duration-moderate);
   --b-dialog-page-actions-with-border-border-top: var(--b-border-width-s) solid var(--b-color-outline-primary);
   --b-dialog-page-footer-with-border-border-top: var(--b-border-width-s) solid var(--b-color-outline-primary);
-  --b-dialog-page-back-button-z-index: 1;
+  --b-dialog-page-back-button-z-index: var(--b-z-index-local-tier-1);
   --b-dialog-page-back-button-padding-left: var(--b-spacer-090);
   --b-dialog-page-header-with-border-border-bottom: var(--b-border-width-s) solid var(--b-color-outline-primary);
   --b-dialog-page-border-radius: var(--b-border-radius-l);
@@ -1349,10 +1411,10 @@
   --b-date-picker-description-error-margin-top: var(--b-spacer-020);
   --b-date-picker-description-margin-top: var(--b-spacer-040);
   --b-date-picker-description-color: var(--b-color-label-secondary);
-  --b-data-grid-horizontal-scrollbar-z-index: 2;
+  --b-data-grid-horizontal-scrollbar-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-horizontal-scrollbar-background-color: var(--b-color-background-primary);
   --b-data-grid-empty-state-padding: var(--b-spacer-100) 0;
-  --b-data-grid-re-order-column-target-separator-z-index: 1;
+  --b-data-grid-re-order-column-target-separator-z-index: var(--b-z-index-local-tier-1);
   --b-data-grid-re-order-column-target-separator-background-color: var(--b-color-background-highlight-strong);
   --b-data-grid-config-column-row-freeze-icon-frozen-color: var(--b-color-label-primary);
   --b-data-grid-config-column-row-freeze-icon-color: var(--b-color-label-disabled);
@@ -1375,12 +1437,12 @@
   --b-data-grid-config-settings-button-padding: 0 0 0 var(--b-spacer-020);
   --b-data-grid-config-settings-button-margin: var(--b-spacer-070) 0;
   --b-data-grid-config-settings-button-and-separator-background-color: var(--b-color-background-primary);
-  --b-data-grid-config-settings-z-index: 4;
+  --b-data-grid-config-settings-z-index: var(--b-z-index-local-tier-4);
   --b-data-grid-config-settings-color: var(--b-color-label-primary);
   --b-data-grid-loading-indicator-margin: 0 0 var(--b-spacer-060) 0;
   --b-data-grid-filters-sticky-padding: var(--b-spacer-060) var(--b-spacer-090);
-  --b-data-grid-filters-focus-within-z-index: 3;
-  --b-data-grid-filters-z-index: 2;
+  --b-data-grid-filters-focus-within-z-index: var(--b-z-index-local-tier-3);
+  --b-data-grid-filters-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-filters-background-color: var(--b-color-background-primary);
   --b-data-grid-filters-padding: var(--b-spacer-060) 0;
   --b-data-grid-filters-border-width: var(--b-border-width-s);
@@ -1390,13 +1452,13 @@
   --b-data-grid-pagination-padding: var(--b-spacer-060) 0;
   --b-data-grid-pagination-border-width: var(--b-border-width-s);
   --b-data-grid-pagination-border-color: var(--b-color-separator-primary);
-  --b-data-grid-pagination-z-index: 2;
+  --b-data-grid-pagination-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-pagination-background-color: var(--b-color-background-primary);
   --b-data-grid-lazy-load-padding: var(--b-spacer-060) var(--b-spacer-070);
   --b-data-grid-lazy-load-border: var(--b-border-width-s) solid var(--b-color-separator-primary);
-  --b-data-grid-lazy-load-z-index: 2;
+  --b-data-grid-lazy-load-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-lazy-load-background-color: var(--b-color-background-primary);
-  --b-data-grid-footer-z-index: 2;
+  --b-data-grid-footer-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-footer-padding: var(--b-spacer-040) var(--b-spacer-090);
   --b-data-grid-footer-background-color: var(--b-color-background-primary);
   --b-data-grid-select-cell-margin-left: var(--b-spacer-040);
@@ -1411,6 +1473,8 @@
   --b-data-grid-cell-padding: 14px var(--b-spacer-070);
   --b-data-grid-cell-border: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --b-data-grid-cell-background-color: var(--b-color-background-primary);
+  --b-data-grid-row-nested-row-hover: var(--b-color-background-secondary-hover);
+  --b-data-grid-row-nested-row-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-nested-slot-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-highlighted-background-color: var(--b-color-background-selected);
   --b-data-grid-row-disabled-color: var(--b-color-label-primary);
@@ -1419,8 +1483,8 @@
   --b-data-grid-row-border-width: var(--b-border-width-s);
   --b-data-grid-row-border-color: var(--b-color-separator-primary);
   --b-data-grid-row-background-color: var(--b-color-background-primary);
-  --b-data-grid-rows-frozen-hover-z-index: 2;
-  --b-data-grid-rows-frozen-z-index: 1;
+  --b-data-grid-rows-frozen-hover-z-index: var(--b-z-index-local-tier-2);
+  --b-data-grid-rows-frozen-z-index: var(--b-z-index-local-tier-1);
   --b-data-grid-rows-frozen-border-right-width: var(--b-border-width-s);
   --b-data-grid-rows-frozen-border-right-color: var(--b-color-separator-secondary);
   --b-data-grid-column-actions-padding-left: var(--b-spacer-030);
@@ -1428,7 +1492,7 @@
   --b-data-grid-column-draggable-ghost-background-color: var(--b-color-background-selected);
   --b-data-grid-column-header-gap: var(--b-spacer-040);
   --b-data-grid-column-header-and-actions-gap: var(--b-spacer-020);
-  --b-data-grid-column-separator-z-index: 1;
+  --b-data-grid-column-separator-z-index: var(--b-z-index-local-tier-1);
   --b-data-grid-column-separator-resizeable-hover-color: var(--b-color-separator-secondary);
   --b-data-grid-column-separator-border-right-width: var(--b-border-width-s);
   --b-data-grid-column-separator-border-right-color: var(--b-color-separator-primary);
@@ -1446,14 +1510,14 @@
   --b-data-grid-columns-select-column-gap: var(--b-spacer-020);
   --b-data-grid-columns-select-column-padding-right: var(--b-spacer-020);
   --b-data-grid-columns-select-column-padding-left: var(--b-spacer-040);
-  --b-data-grid-columns-frozen-z-index: 2;
+  --b-data-grid-columns-frozen-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-columns-frozen-border-right-width: var(--b-border-width-s);
   --b-data-grid-columns-frozen-border-right-color: var(--b-color-separator-secondary);
   --b-data-grid-columns-border-width: var(--b-border-width-s);
   --b-data-grid-columns-border-color: var(--b-color-separator-primary);
-  --b-data-grid-column-headers-focus-within-z-index: 3;
+  --b-data-grid-column-headers-focus-within-z-index: var(--b-z-index-local-tier-3);
   --b-data-grid-column-headers-background-color: var(--b-color-background-primary);
-  --b-data-grid-column-headers-z-index: 2;
+  --b-data-grid-column-headers-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-header-padding: var(--b-spacer-080) var(--b-spacer-090);
   --b-data-grid-border-width: var(--b-border-width-s);
   --b-data-grid-border-radius: var(--b-border-radius-m);
@@ -1468,7 +1532,7 @@
   --b-data-grid-template-tabs-padding: var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-tabs-background-color: var(--b-color-background-primary);
   --b-data-grid-template-additional-content-margin: var(--b-spacer-000) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
-  --b-data-grid-template-header-z-index: 3;
+  --b-data-grid-template-header-z-index: var(--b-z-index-local-tier-3);
   --b-data-grid-template-header-margin: var(--b-spacer-080) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-gap: var(--b-spacer-060);
   --b-data-grid-static-icon-warning-colored-color: var(--b-color-label-warning);
@@ -1485,7 +1549,7 @@
   --b-dashboard-section-content-gap: var(--b-spacer-100);
   --b-dashboard-section-gap: var(--b-spacer-060);
   --b-dashboard-template-sticky-border-border-bottom: var(--b-border-width-s) solid var(--b-color-separator-primary);
-  --b-dashboard-template-sticky-items-z-index: 1;
+  --b-dashboard-template-sticky-items-z-index: var(--b-z-index-local-tier-1);
   --b-dashboard-template-sticky-items-spacing: var(--b-spacer-070);
   --b-dashboard-template-sticky-items-background-color: var(--b-color-background-primary);
   --b-dashboard-template-top-section-gap: var(--b-spacer-040);
@@ -1851,7 +1915,7 @@
   --b-action-bar-container-padding: var(--b-spacer-050) var(--b-spacer-090);
   --b-action-bar-container-color: var(--b-color-label-inverse-primary);
   --b-action-bar-container-background-color: var(--b-color-background-inverse-primary);
-  --b-action-bar-z-index: 5;
+  --b-action-bar-z-index: var(--b-z-index-global-elevated);
   --b-action-bar-bottom-extra-spacing: var(--b-spacer-120);
   --b-action-bar-bottom: var(--b-spacer-070);
   --b-accordion-item-animation-easing: var(--b-animation-easing-standard);

package/dist/summary-grid.js

@@ -1,4 +1,4 @@
-import { s as r, a as t, e as a, b as o, c as i, B as n, d as u, f as d } from "./chunks/summary-grid-item-custom.DF9waESp.js";
+import { s as r, a as t, e as a, b as o, c as i, B as n, d as u, f as d } from "./chunks/summary-grid-item-custom.FxBnzHzb.js";
 export {
   r as BentoSummaryGrid,
   t as BentoSummaryGridItemAmount,

package/dist/tag.js

@@ -1,4 +1,4 @@
-import { B as t, a as e } from "./chunks/tag.wfnhGWVG.js";
+import { B as t, a as e } from "./chunks/tag.xvqrfTwk.js";
 export {
   t as BentoTag,
   e as BentoTagVariant

package/dist/textarea.js

@@ -1,4 +1,4 @@
-import { B as o } from "./chunks/textarea.DlPNxnUQ.js";
+import { B as o } from "./chunks/textarea.vAp6HFi9.js";
 export {
   o as BentoTextarea
 };

package/dist/timeline.js

@@ -1,4 +1,4 @@
-import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.B8VvkDfR.js";
+import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.ND_EMuwP.js";
 export {
   t as BentoTimeline,
   i as BentoTimelineGapUnit,

package/dist/tutorial.js

@@ -1,4 +1,4 @@
-import { _ as t } from "./chunks/tutorial.vue_vue_type_script_setup_true_lang.CGpbGgfc.js";
+import { _ as t } from "./chunks/tutorial.vue_vue_type_script_setup_true_lang.LBw_ALfS.js";
 export {
   t as BentoTutorial
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue3",
-  "version": "1.41.0",
+  "version": "1.43.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue3",
-  "version": "1.41.0",
+  "version": "1.43.0",
   "description": "Adyen Bento Vue 3 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -30,12 +30,12 @@
     "@adyen/ui-assets-icons-16": "4.1.0",
     "@adyen/ui-assets-payment-method-icons": "6.1.0",
     "@floating-ui/vue": "1.0.7",
-    "@vueuse/core": "10.9.0",
+    "@vueuse/core": "11.3.0",
     "date-fns": "2.28.0",
     "focus-lock": "0.11.0",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.41.0"
+    "@adyen/bento-design-tokens": "1.43.0"
   },
   "peerDependencies": {
     "vue": "^3.2.47",
@@ -51,6 +51,7 @@
   },
   "devDependencies": {
     "@adyen/lume-vue3": "1.11.3",
+    "@axe-core/playwright": "4.9.0",
     "@codemirror/commands": "6.3.3",
     "@codemirror/lang-java": "6.0.1",
     "@codemirror/lang-javascript": "6.2.2",
@@ -81,7 +82,7 @@
     "@types/node": "22.10.0",
     "@vitejs/plugin-react": "4.3.1",
     "@vitejs/plugin-vue": "5.1.4",
-    "@vitest/coverage-v8": "2.1.4",
+    "@vitest/coverage-v8": "2.1.9",
     "@vue/compat": "3.2.47",
     "@vue/compiler-dom": "3.2.47",
     "@vue/runtime-core": "3.2.47",
@@ -96,17 +97,16 @@
     "react-dom": "18.3.1",
     "sass": "1.54.6",
     "sass-loader": "12.6.0",
-    "svg-url-loader": "6.0.0",
     "ts-patch": "3.3.0",
-    "vite": "5.4.9",
+    "vite": "5.4.16",
     "vite-plugin-css-injected-by-js": "2.4.0",
     "vite-plugin-dynamic-import": "1.5.0",
     "vite-plugin-static-copy": "0.15.0",
-    "vitest": "2.1.4",
+    "vitest": "2.1.9",
     "vue": "3.5.13",
     "vue-docgen-web-types": "0.1.8",
     "vue-i18n": "9.14.3",
-    "vue-i18n-bridge": "9.4.1",
+    "vue-i18n-bridge": "9.14.3",
     "vue-router": "~4.1",
     "vue-style-loader": "4.1.3",
     "vue-tsc": "1.0.24",
@@ -133,6 +133,7 @@
     "clean:storybook": "rm -rf ./storybook-static",
     "dev": "ts-node ./.storybook/start-storybook.ts",
     "e2e": "../vue2/test/bin/e2e-docker.sh vue3",
+    "e2e:a11y": "pnpm run e2e:clean && playwright test -c playwright.integration.config.ts --project=accessibility",
     "e2e:changed": "../vue2/test/bin/e2e-docker.sh vue3 --changed",
     "e2e:clean": "rm -rf playwright/.cache || true",
     "e2e:debug": "ts-node ../vue2/test/utils/tsconfig-path-editor.ts vue3 && pnpm run e2e:ci --debug",