@adyen/bento-vue3 1.53.0 → 1.54.0

package/dist/styles/bento-light.css

@@ -161,6 +161,7 @@
   --b-calendar-year-month-focus-visible-z-index: 1;
   --b-calendar-year-month-width: 60px;
   --b-calendar-year-month-height: 60px;
+  --b-calendar-year-year-container-border-collapse: collapse;
   --b-calendar-month-day-width: 40px;
   --b-calendar-month-day-height: 40px;
   --b-button-condensed-tertiary-height: auto;
@@ -295,10 +296,17 @@
   --b-color-outline-primary-active: #00112c;
   --b-color-outline-primary-hover: #c9cdd3;
   --b-color-outline-primary: #dbdee2;
+  --b-color-link-quiet-disabled: #8d95a3;
+  --b-color-link-quiet-active: #5c687c;
+  --b-color-link-quiet-hover: #5c687c;
+  --b-color-link-quiet: #00112c;
+  --b-color-link-primary-visited-active: #6500ca;
+  --b-color-link-primary-visited-hover: #6500ca;
+  --b-color-link-primary-visited: #4c0098;
   --b-color-link-primary-disabled: #8d95a3;
-  --b-color-link-primary-active: #6d7789;
-  --b-color-link-primary-hover: #5c687c;
-  --b-color-link-primary: #00112c;
+  --b-color-link-primary-active: #0070f5;
+  --b-color-link-primary-hover: #0070f5;
+  --b-color-link-primary: #0063d7;
   --b-color-label-always-dark: #00112c;
   --b-color-label-always-light-tertiary-active: #556276;
   --b-color-label-always-light-tertiary-hover: #747f8f;
@@ -591,6 +599,9 @@
   --b-tabs-tab-text-height: var(--b-spacer-090);
   --b-tabs-tab-text-border-radius: var(--b-border-radius-xs);
   --b-tabs-tab-list-gap: var(--b-spacer-090);
+  --b-tabs-sticky-z-index: var(--b-z-index-local-tier-2);
+  --b-tabs-sticky-padding-top: var(--b-spacer-060);
+  --b-tabs-sticky-border-bottom: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --b-tabs-background-color: var(--b-color-background-primary);
   --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);
@@ -986,9 +997,12 @@
   --b-link-data-grid-hover-color: var(--b-color-link-primary);
   --b-link-data-grid-text-decoration-color: var(--b-color-outline-secondary);
   --b-link-data-grid-color: var(--b-color-link-primary);
-  --b-link-quiet-active-color: var(--b-color-link-primary);
-  --b-link-quiet-hover-color: var(--b-color-link-primary);
-  --b-link-quiet-color: var(--b-color-link-primary);
+  --b-link-quiet-active-color: var(--b-color-link-quiet-active);
+  --b-link-quiet-hover-color: var(--b-color-link-quiet-hover);
+  --b-link-quiet-color: var(--b-color-link-quiet);
+  --b-link-visited-active-color: var(--b-color-link-primary-visited-active);
+  --b-link-visited-hover-color: var(--b-color-link-primary-visited-hover);
+  --b-link-visited-color: var(--b-color-link-primary-visited);
   --b-link-active-color: var(--b-color-link-primary-active);
   --b-link-hover-color: var(--b-color-link-primary-hover);
   --b-link-external-link-padding: 0 0 0 var(--b-spacer-020);
@@ -1166,14 +1180,14 @@
   --b-filter-button-hover-text-color: var(--b-color-label-primary-hover);
   --b-filter-button-hover-background-color: var(--b-color-background-primary-hover);
   --b-filter-button-counter-hover-background-color: var(--b-color-background-tertiary-hover);
-  --b-filter-button-counter-disabled-font-color: var(--b-color-label-disabled);
-  --b-filter-button-counter-disabled-background-color: var(--b-color-background-disabled);
+  --b-filter-button-counter-disabled-font-color: var(--b-color-label-inverse-disabled);
+  --b-filter-button-counter-disabled-background-color: var(--b-color-background-inverse-disabled);
   --b-filter-button-counter-open-background-color: var(--b-color-background-tertiary-active);
   --b-filter-button-counter-active-background-color: var(--b-color-background-tertiary-active);
   --b-filter-button-counter-padding: var(--b-spacer-020) var(--b-spacer-030);
-  --b-filter-button-counter-font-color: var(--b-color-label-secondary);
+  --b-filter-button-counter-font-color: var(--b-color-label-inverse-primary);
   --b-filter-button-counter-border-radius: var(--b-border-radius-s);
-  --b-filter-button-counter-background-color: var(--b-color-background-tertiary);
+  --b-filter-button-counter-background-color: var(--b-color-background-inverse-primary);
   --b-filter-button-disabled-font-color: var(--b-color-label-disabled);
   --b-filter-button-disabled-background-color: var(--b-color-background-primary);
   --b-filter-button-default-container-gap: var(--b-spacer-070);
@@ -1234,21 +1248,33 @@
   --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-hover-background-color: var(--b-color-background-inverse-primary);
+  --b-filter-bar-button-counter-hover-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-counter-disabled-color: var(--b-color-label-inverse-disabled);
+  --b-filter-bar-button-counter-disabled-background-color: var(--b-color-background-inverse-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-primary);
+  --b-filter-bar-button-counter-color: var(--b-color-label-inverse-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-counter-background-color: var(--b-color-background-inverse-primary);
   --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-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-applied-filter-open-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-applied-filter-open-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary-active);
+  --b-filter-bar-button-applied-filter-open-background-color: var(--b-color-background-inverse-secondary-active);
+  --b-filter-bar-button-applied-disabled-color: var(--b-color-label-inverse-disabled);
+  --b-filter-bar-button-applied-disabled-border: var(--b-border-width-s) solid var(--b-color-background-inverse-disabled);
+  --b-filter-bar-button-applied-disabled-background-color: var(--b-color-background-inverse-disabled);
+  --b-filter-bar-button-applied-hover-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-applied-hover-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary-hover);
+  --b-filter-bar-button-applied-hover-background-color: var(--b-color-background-inverse-secondary-hover);
+  --b-filter-bar-button-applied-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-applied-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary);
+  --b-filter-bar-button-applied-background-color: var(--b-color-background-inverse-secondary);
   --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);

package/dist/styles/bento.css

@@ -161,6 +161,7 @@
   --b-calendar-year-month-focus-visible-z-index: 1;
   --b-calendar-year-month-width: 60px;
   --b-calendar-year-month-height: 60px;
+  --b-calendar-year-year-container-border-collapse: collapse;
   --b-calendar-month-day-width: 40px;
   --b-calendar-month-day-height: 40px;
   --b-button-condensed-tertiary-height: auto;
@@ -295,10 +296,17 @@
   --b-color-outline-primary-active: #00112c;
   --b-color-outline-primary-hover: #c9cdd3;
   --b-color-outline-primary: #dbdee2;
+  --b-color-link-quiet-disabled: #8d95a3;
+  --b-color-link-quiet-active: #5c687c;
+  --b-color-link-quiet-hover: #5c687c;
+  --b-color-link-quiet: #00112c;
+  --b-color-link-primary-visited-active: #6500ca;
+  --b-color-link-primary-visited-hover: #6500ca;
+  --b-color-link-primary-visited: #4c0098;
   --b-color-link-primary-disabled: #8d95a3;
-  --b-color-link-primary-active: #6d7789;
-  --b-color-link-primary-hover: #5c687c;
-  --b-color-link-primary: #00112c;
+  --b-color-link-primary-active: #0070f5;
+  --b-color-link-primary-hover: #0070f5;
+  --b-color-link-primary: #0063d7;
   --b-color-label-always-dark: #00112c;
   --b-color-label-always-light-tertiary-active: #556276;
   --b-color-label-always-light-tertiary-hover: #747f8f;
@@ -591,6 +599,9 @@
   --b-tabs-tab-text-height: var(--b-spacer-090);
   --b-tabs-tab-text-border-radius: var(--b-border-radius-xs);
   --b-tabs-tab-list-gap: var(--b-spacer-090);
+  --b-tabs-sticky-z-index: var(--b-z-index-local-tier-2);
+  --b-tabs-sticky-padding-top: var(--b-spacer-060);
+  --b-tabs-sticky-border-bottom: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --b-tabs-background-color: var(--b-color-background-primary);
   --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);
@@ -986,9 +997,12 @@
   --b-link-data-grid-hover-color: var(--b-color-link-primary);
   --b-link-data-grid-text-decoration-color: var(--b-color-outline-secondary);
   --b-link-data-grid-color: var(--b-color-link-primary);
-  --b-link-quiet-active-color: var(--b-color-link-primary);
-  --b-link-quiet-hover-color: var(--b-color-link-primary);
-  --b-link-quiet-color: var(--b-color-link-primary);
+  --b-link-quiet-active-color: var(--b-color-link-quiet-active);
+  --b-link-quiet-hover-color: var(--b-color-link-quiet-hover);
+  --b-link-quiet-color: var(--b-color-link-quiet);
+  --b-link-visited-active-color: var(--b-color-link-primary-visited-active);
+  --b-link-visited-hover-color: var(--b-color-link-primary-visited-hover);
+  --b-link-visited-color: var(--b-color-link-primary-visited);
   --b-link-active-color: var(--b-color-link-primary-active);
   --b-link-hover-color: var(--b-color-link-primary-hover);
   --b-link-external-link-padding: 0 0 0 var(--b-spacer-020);
@@ -1166,14 +1180,14 @@
   --b-filter-button-hover-text-color: var(--b-color-label-primary-hover);
   --b-filter-button-hover-background-color: var(--b-color-background-primary-hover);
   --b-filter-button-counter-hover-background-color: var(--b-color-background-tertiary-hover);
-  --b-filter-button-counter-disabled-font-color: var(--b-color-label-disabled);
-  --b-filter-button-counter-disabled-background-color: var(--b-color-background-disabled);
+  --b-filter-button-counter-disabled-font-color: var(--b-color-label-inverse-disabled);
+  --b-filter-button-counter-disabled-background-color: var(--b-color-background-inverse-disabled);
   --b-filter-button-counter-open-background-color: var(--b-color-background-tertiary-active);
   --b-filter-button-counter-active-background-color: var(--b-color-background-tertiary-active);
   --b-filter-button-counter-padding: var(--b-spacer-020) var(--b-spacer-030);
-  --b-filter-button-counter-font-color: var(--b-color-label-secondary);
+  --b-filter-button-counter-font-color: var(--b-color-label-inverse-primary);
   --b-filter-button-counter-border-radius: var(--b-border-radius-s);
-  --b-filter-button-counter-background-color: var(--b-color-background-tertiary);
+  --b-filter-button-counter-background-color: var(--b-color-background-inverse-primary);
   --b-filter-button-disabled-font-color: var(--b-color-label-disabled);
   --b-filter-button-disabled-background-color: var(--b-color-background-primary);
   --b-filter-button-default-container-gap: var(--b-spacer-070);
@@ -1234,21 +1248,33 @@
   --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-hover-background-color: var(--b-color-background-inverse-primary);
+  --b-filter-bar-button-counter-hover-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-counter-disabled-color: var(--b-color-label-inverse-disabled);
+  --b-filter-bar-button-counter-disabled-background-color: var(--b-color-background-inverse-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-primary);
+  --b-filter-bar-button-counter-color: var(--b-color-label-inverse-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-counter-background-color: var(--b-color-background-inverse-primary);
   --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-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-applied-filter-open-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-applied-filter-open-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary-active);
+  --b-filter-bar-button-applied-filter-open-background-color: var(--b-color-background-inverse-secondary-active);
+  --b-filter-bar-button-applied-disabled-color: var(--b-color-label-inverse-disabled);
+  --b-filter-bar-button-applied-disabled-border: var(--b-border-width-s) solid var(--b-color-background-inverse-disabled);
+  --b-filter-bar-button-applied-disabled-background-color: var(--b-color-background-inverse-disabled);
+  --b-filter-bar-button-applied-hover-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-applied-hover-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary-hover);
+  --b-filter-bar-button-applied-hover-background-color: var(--b-color-background-inverse-secondary-hover);
+  --b-filter-bar-button-applied-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-applied-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary);
+  --b-filter-bar-button-applied-background-color: var(--b-color-background-inverse-secondary);
   --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);

package/dist/styles/legacy.css

@@ -198,6 +198,7 @@
   --b-calendar-year-month-focus-visible-z-index: 1;
   --b-calendar-year-month-width: 60px;
   --b-calendar-year-month-height: 60px;
+  --b-calendar-year-year-container-border-collapse: collapse;
   --b-calendar-month-month-container-border-collapse: collapse;
   --b-calendar-month-day-unselected-active-background: transparent;
   --b-calendar-month-day-unselected-hover-background: none;
@@ -364,10 +365,17 @@
   --b-color-outline-primary-active: #00112c;
   --b-color-outline-primary-hover: #c9cdd3;
   --b-color-outline-primary: #dbdee2;
+  --b-color-link-quiet-disabled: #8d95a3;
+  --b-color-link-quiet-active: #5c687c;
+  --b-color-link-quiet-hover: #5c687c;
+  --b-color-link-quiet: #00112c;
+  --b-color-link-primary-visited-active: #6500ca;
+  --b-color-link-primary-visited-hover: #6500ca;
+  --b-color-link-primary-visited: #4c0098;
   --b-color-link-primary-disabled: #8d95a3;
-  --b-color-link-primary-active: #6d7789;
-  --b-color-link-primary-hover: #5c687c;
-  --b-color-link-primary: #00112c;
+  --b-color-link-primary-active: #0070f5;
+  --b-color-link-primary-hover: #0070f5;
+  --b-color-link-primary: #0063d7;
   --b-color-label-always-dark: #00112c;
   --b-color-label-always-light-tertiary-active: #556276;
   --b-color-label-always-light-tertiary-hover: #747f8f;
@@ -621,6 +629,9 @@
   --b-tabs-tab-text-height: var(--b-spacer-090);
   --b-tabs-tab-text-border-radius: var(--b-border-radius-xs);
   --b-tabs-tab-list-gap: var(--b-spacer-090);
+  --b-tabs-sticky-z-index: var(--b-z-index-local-tier-2);
+  --b-tabs-sticky-padding-top: var(--b-spacer-060);
+  --b-tabs-sticky-border-bottom: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --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);
@@ -944,6 +955,9 @@
   --b-link-data-grid-hover-color: var(--b-color-link-primary);
   --b-link-data-grid-text-decoration-color: var(--b-color-outline-secondary);
   --b-link-data-grid-color: var(--b-color-link-primary);
+  --b-link-visited-active-color: var(--b-color-link-primary-visited-active);
+  --b-link-visited-hover-color: var(--b-color-link-primary-visited-hover);
+  --b-link-visited-color: var(--b-color-link-primary-visited);
   --b-link-external-link-padding: 0 0 0 var(--b-spacer-020);
   --b-link-border-radius: var(--b-border-radius-xs);
   --b-layout-row-column-wrapper-l-and-up-column-gap: var(--b-spacer-090);
@@ -1189,7 +1203,6 @@
   --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-grey-0);
-  --b-filter-bar-button-counter-hover-color: var(--b-color-label-secondary);
   --b-filter-bar-button-counter-disabled-color: var(--b-color-grey-30);
   --b-filter-bar-button-counter-disabled-background-color: var(--b-color-grey-0);
   --b-filter-bar-button-counter-padding: var(--b-spacer-010) var(--b-spacer-030);
@@ -1210,6 +1223,15 @@
   --b-filter-bar-button-with-counter-container-padding-right: var(--b-spacer-020);
   --b-filter-bar-button-disabled-color: var(--b-color-grey-40);
   --b-filter-bar-button-disabled-background-color: var(--b-color-grey-10);
+  --b-filter-bar-button-applied-filter-open-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary-active);
+  --b-filter-bar-button-applied-filter-open-background-color: var(--b-color-background-inverse-secondary-active);
+  --b-filter-bar-button-applied-disabled-color: var(--b-color-label-inverse-disabled);
+  --b-filter-bar-button-applied-disabled-border: var(--b-border-width-s) solid var(--b-color-background-inverse-disabled);
+  --b-filter-bar-button-applied-disabled-background-color: var(--b-color-background-inverse-disabled);
+  --b-filter-bar-button-applied-hover-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary-hover);
+  --b-filter-bar-button-applied-hover-background-color: var(--b-color-background-inverse-secondary-hover);
+  --b-filter-bar-button-applied-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary);
+  --b-filter-bar-button-applied-background-color: var(--b-color-background-inverse-secondary);
   --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);
@@ -2030,6 +2052,10 @@
   --b-filter-button-background-color: var(--b-color-background-primary);
   --b-filter-bar-all-filters-modal-filters-title-color: var(--b-color-neutral-70);
   --b-filter-bar-persistent-filters-border-color: var(--b-color-neutral-10);
+  --b-filter-bar-button-counter-hover-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-applied-filter-open-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-applied-hover-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-applied-color: var(--b-color-label-inverse-primary);
   --b-filter-bar-button-background-color: var(--b-color-background-primary);
   --b-file-uploader-icon-error-color: var(--b-color-label-on-color);
   --b-file-uploader-icon-drag-over-color: var(--b-color-label-on-color);

package/dist/styles/styleguide.css

@@ -161,6 +161,7 @@
   --b-calendar-year-month-focus-visible-z-index: 1;
   --b-calendar-year-month-width: 60px;
   --b-calendar-year-month-height: 60px;
+  --b-calendar-year-year-container-border-collapse: collapse;
   --b-calendar-month-day-width: 40px;
   --b-calendar-month-day-height: 40px;
   --b-button-condensed-tertiary-height: auto;
@@ -350,10 +351,17 @@
   --b-color-outline-primary-active: #00112c;
   --b-color-outline-primary-hover: #c9cdd3;
   --b-color-outline-primary: #dbdee2;
+  --b-color-link-quiet-disabled: #8d95a3;
+  --b-color-link-quiet-active: #5c687c;
+  --b-color-link-quiet-hover: #5c687c;
+  --b-color-link-quiet: #00112c;
+  --b-color-link-primary-visited-active: #6500ca;
+  --b-color-link-primary-visited-hover: #6500ca;
+  --b-color-link-primary-visited: #4c0098;
   --b-color-link-primary-disabled: #8d95a3;
-  --b-color-link-primary-active: #6d7789;
-  --b-color-link-primary-hover: #5c687c;
-  --b-color-link-primary: #00112c;
+  --b-color-link-primary-active: #0070f5;
+  --b-color-link-primary-hover: #0070f5;
+  --b-color-link-primary: #0063d7;
   --b-color-label-always-dark: #00112c;
   --b-color-label-always-light-tertiary-active: #556276;
   --b-color-label-always-light-tertiary-hover: #747f8f;
@@ -646,6 +654,9 @@
   --b-tabs-tab-text-height: var(--b-spacer-090);
   --b-tabs-tab-text-border-radius: var(--b-border-radius-xs);
   --b-tabs-tab-list-gap: var(--b-spacer-090);
+  --b-tabs-sticky-z-index: var(--b-z-index-local-tier-2);
+  --b-tabs-sticky-padding-top: var(--b-spacer-060);
+  --b-tabs-sticky-border-bottom: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --b-tabs-background-color: var(--b-color-background-primary);
   --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);
@@ -1041,9 +1052,12 @@
   --b-link-data-grid-hover-color: var(--b-color-link-primary);
   --b-link-data-grid-text-decoration-color: var(--b-color-outline-secondary);
   --b-link-data-grid-color: var(--b-color-link-primary);
-  --b-link-quiet-active-color: var(--b-color-link-primary);
-  --b-link-quiet-hover-color: var(--b-color-link-primary);
-  --b-link-quiet-color: var(--b-color-link-primary);
+  --b-link-quiet-active-color: var(--b-color-link-quiet-active);
+  --b-link-quiet-hover-color: var(--b-color-link-quiet-hover);
+  --b-link-quiet-color: var(--b-color-link-quiet);
+  --b-link-visited-active-color: var(--b-color-link-primary-visited-active);
+  --b-link-visited-hover-color: var(--b-color-link-primary-visited-hover);
+  --b-link-visited-color: var(--b-color-link-primary-visited);
   --b-link-active-color: var(--b-color-link-primary-active);
   --b-link-hover-color: var(--b-color-link-primary-hover);
   --b-link-external-link-padding: 0 0 0 var(--b-spacer-020);
@@ -1221,14 +1235,14 @@
   --b-filter-button-hover-text-color: var(--b-color-label-primary-hover);
   --b-filter-button-hover-background-color: var(--b-color-background-primary-hover);
   --b-filter-button-counter-hover-background-color: var(--b-color-background-tertiary-hover);
-  --b-filter-button-counter-disabled-font-color: var(--b-color-label-disabled);
-  --b-filter-button-counter-disabled-background-color: var(--b-color-background-disabled);
+  --b-filter-button-counter-disabled-font-color: var(--b-color-label-inverse-disabled);
+  --b-filter-button-counter-disabled-background-color: var(--b-color-background-inverse-disabled);
   --b-filter-button-counter-open-background-color: var(--b-color-background-tertiary-active);
   --b-filter-button-counter-active-background-color: var(--b-color-background-tertiary-active);
   --b-filter-button-counter-padding: var(--b-spacer-020) var(--b-spacer-030);
-  --b-filter-button-counter-font-color: var(--b-color-label-secondary);
+  --b-filter-button-counter-font-color: var(--b-color-label-inverse-primary);
   --b-filter-button-counter-border-radius: var(--b-border-radius-s);
-  --b-filter-button-counter-background-color: var(--b-color-background-tertiary);
+  --b-filter-button-counter-background-color: var(--b-color-background-inverse-primary);
   --b-filter-button-disabled-font-color: var(--b-color-label-disabled);
   --b-filter-button-disabled-background-color: var(--b-color-background-primary);
   --b-filter-button-default-container-gap: var(--b-spacer-070);
@@ -1289,21 +1303,33 @@
   --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-hover-background-color: var(--b-color-background-inverse-primary);
+  --b-filter-bar-button-counter-hover-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-counter-disabled-color: var(--b-color-label-inverse-disabled);
+  --b-filter-bar-button-counter-disabled-background-color: var(--b-color-background-inverse-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-primary);
+  --b-filter-bar-button-counter-color: var(--b-color-label-inverse-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-counter-background-color: var(--b-color-background-inverse-primary);
   --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-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-applied-filter-open-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-applied-filter-open-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary-active);
+  --b-filter-bar-button-applied-filter-open-background-color: var(--b-color-background-inverse-secondary-active);
+  --b-filter-bar-button-applied-disabled-color: var(--b-color-label-inverse-disabled);
+  --b-filter-bar-button-applied-disabled-border: var(--b-border-width-s) solid var(--b-color-background-inverse-disabled);
+  --b-filter-bar-button-applied-disabled-background-color: var(--b-color-background-inverse-disabled);
+  --b-filter-bar-button-applied-hover-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-applied-hover-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary-hover);
+  --b-filter-bar-button-applied-hover-background-color: var(--b-color-background-inverse-secondary-hover);
+  --b-filter-bar-button-applied-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-applied-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary);
+  --b-filter-bar-button-applied-background-color: var(--b-color-background-inverse-secondary);
   --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);

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.ACP0RH0N.js";
+import { s as r, a as t, d as a, _ as o, b as i, B as n, c as u, e as d } from "./chunks/summary-grid.types.DzvuP-NU.js";
 export {
   r as BentoSummaryGrid,
   t as BentoSummaryGridItemAmount,

package/dist/tabs.js

@@ -1,4 +1,4 @@
-import { B as e, a as s } from "./chunks/tabs.hp52NnXH.js";
+import { B as e, a as s } from "./chunks/tabs.B8BRqQpv.js";
 export {
   e as BentoTab,
   s as BentoTabs

package/dist/tag.js

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

package/dist/textarea.js

@@ -1,4 +1,4 @@
-import { B as o } from "./chunks/textarea.C8R71Q4l.js";
+import { B as o } from "./chunks/textarea.bQwvvIkq.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.DBeAlt3N.js";
+import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.Bxt_pNII.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.4smMvopK.js";
+import { _ as t } from "./chunks/tutorial.vue_vue_type_script_setup_true_lang.BtVT3Ltg.js";
 export {
   t as BentoTutorial
 };

package/dist/web-types.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue3",
-  "version": "1.53.0",
+  "version": "1.54.0",
   "description": "Adyen Bento Vue 3 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,8 +37,7 @@
     "mime": "4.0.6",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.53.0",
-    "@adyen/ui-assets-icons-16": "6.1.0"
+    "@adyen/bento-design-tokens": "1.54.0"
   },
   "peerDependencies": {
     "vue": "^3.2.47",
@@ -114,9 +113,10 @@
     "vue-router": "~4.1",
     "vue-style-loader": "4.1.3",
     "vue-tsc": "1.0.24",
-    "@adyen/bento-tailwind": "0.3.4",
     "@adyen/bento-core": "0.0.1",
-    "@adyen/ui-assets-payment-method-icons": "8.2.0"
+    "@adyen/bento-tailwind": "0.3.5",
+    "@adyen/ui-assets-icons-16": "6.2.0",
+    "@adyen/ui-assets-payment-method-icons": "9.0.0"
   },
   "scripts": {
     "build": "pnpm run build:prod",

package/dist/assets/summary-grid-item-custom.css

@@ -1 +0,0 @@
-.b-summary-grid[data-v-0a9985aa]{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-summary-grid-gap);width:100%}.b-summary-grid[data-v-0a9985aa],.b-summary-grid[data-v-0a9985aa]:before,.b-summary-grid[data-v-0a9985aa]:after{box-sizing:border-box}.b-summary-grid[data-v-0a9985aa] *,.b-summary-grid[data-v-0a9985aa] *:before,.b-summary-grid[data-v-0a9985aa] *:after{box-sizing:border-box}.b-summary-grid[data-v-0a9985aa] ::-webkit-scrollbar{height:14px;width:14px}.b-summary-grid[data-v-0a9985aa] ::-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-summary-grid-item[data-v-67400fc8]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-summary-grid-item-background-color);border-radius:var(--b-summary-grid-item-border-radius);color:var(--b-summary-grid-item-color);display:flex;flex-direction:column;gap:var(--b-summary-grid-item-gap);min-height:100%;padding:var(--b-summary-grid-item-padding)}.b-summary-grid-item[data-v-67400fc8],.b-summary-grid-item[data-v-67400fc8]:before,.b-summary-grid-item[data-v-67400fc8]:after{box-sizing:border-box}.b-summary-grid-item[data-v-67400fc8] *,.b-summary-grid-item[data-v-67400fc8] *:before,.b-summary-grid-item[data-v-67400fc8] *:after{box-sizing:border-box}.b-summary-grid-item[data-v-67400fc8] ::-webkit-scrollbar{height:14px;width:14px}.b-summary-grid-item[data-v-67400fc8] ::-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-summary-grid-item--slashed-zero[data-v-67400fc8] .b-typography{font-variant-numeric:slashed-zero}.b-summary-grid-item__header[data-v-67400fc8]{align-items:flex-start;display:flex;flex-grow:1;justify-content:space-between;margin-bottom:var(--b-summary-grid-item-header-margin-bottom)}.b-summary-grid-item__title-icons[data-v-67400fc8]{align-items:center;display:flex;gap:var(--b-summary-grid-item-title-icons-gap);height:var(--b-summary-grid-item-title-icons-height);margin-left:var(--b-summary-grid-item-title-icons-margin-left)}.b-summary-grid-item__title-icons[data-v-67400fc8]:hover{cursor:pointer}.b-summary-grid-item__title-tooltip[data-v-67400fc8]{display:flex}.b-summary-grid-item__title[data-v-67400fc8]{align-items:center;display:flex;word-break:break-word}.b-summary-grid-item__title[data-v-67400fc8] .b-country__label,.b-summary-grid-item__title[data-v-67400fc8] .b-payment-method__label,.b-summary-grid-item__title[data-v-67400fc8] .b-status__label,.b-summary-grid-item__title[data-v-67400fc8] .b-date__label{font-weight:var(--b-summary-grid-item-content-label-font-weight)}.b-summary-grid-item__content-trend[data-v-67400fc8]{margin-left:var(--b-summary-grid-item-content-trend-margin-left)}.b-summary-grid-item-amount[data-v-f4b5a860]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-summary-grid-item-amount[data-v-f4b5a860],.b-summary-grid-item-amount[data-v-f4b5a860]:before,.b-summary-grid-item-amount[data-v-f4b5a860]:after{box-sizing:border-box}.b-summary-grid-item-amount[data-v-f4b5a860] *,.b-summary-grid-item-amount[data-v-f4b5a860] *:before,.b-summary-grid-item-amount[data-v-f4b5a860] *:after{box-sizing:border-box}.b-summary-grid-item-amount[data-v-f4b5a860] ::-webkit-scrollbar{height:14px;width:14px}.b-summary-grid-item-amount[data-v-f4b5a860] ::-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-summary-grid-item-amount__content[data-v-f4b5a860]{display:flex}.b-summary-grid-item-amount__secondary-label[data-v-f4b5a860]{padding-left:var(--b-summary-grid-item-amount-secondary-label-padding-left)}

package/dist/chunks/checkbox.CXZQtFhM.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.CXZQtFhM.js","sources":["../../../core/src/components/checkbox/checkbox.types.ts","../../../vue2/src/components/checkbox/checkbox.vue"],"sourcesContent":["import type { BentoTagProps } from '@/core/components/tag/tag.types';\nimport type {\n    CheckboxInputType as BentoCheckboxType,\n    MultiCheckboxInputType as BentoMultiCheckboxType,\n} from '@/core/components/internal/checkbox-input/checkbox-input.types';\nimport { CheckboxInputState as BentoCheckboxState } from '@/core/components/internal/checkbox-input/checkbox-input.types';\n\nexport { BentoCheckboxState, BentoCheckboxType, BentoMultiCheckboxType };\n\nexport enum BentoCheckboxEvent {\n    UPDATE = 'update:model-value',\n    INPUT = 'input',\n}\n\nexport type BentoCheckboxTag = BentoTagProps;\n","<template>\n    <label class=\"b-checkbox\" :class=\"conditionalClass\" v-bind=\"styleAttrs\">\n        <checkbox-input\n            v-bind=\"$attrs\"\n            ref=\"input\"\n            :aria-label=\"hasSlot('default') ? undefined : computedAriaLabel\"\n            :aria-describedby=\"ariaDescribedBy\"\n            :disabled=\"disabled\"\n            :has-error=\"shouldShowError\"\n            :indeterminate=\"isIndeterminate\"\n            :value=\"value\"\n            :model-value=\"modelValue\"\n            :readonly=\"readonly\"\n            @update:model-value=\"onChange\"\n        />\n        <span v-if=\"hasSlot('default') || shouldShowErrorMessage\" class=\"b-checkbox__text\">\n            <bento-typography v-if=\"hasSlot('default')\" class=\"b-checkbox__label\" el=\"span\" variant=\"body\">\n                <span><slot /></span>\n                <bento-typography v-if=\"optional\" class=\"b-checkbox__label-requirement\" el=\"span\"\n                    >({{ t('optional') }})</bento-typography\n                >\n                <bento-typography v-else-if=\"required\" class=\"b-checkbox__label-requirement\" el=\"span\"\n                    >({{ t('required') }})</bento-typography\n                >\n                <bento-tag v-if=\"tag\" class=\"b-checkbox__label-tag\" v-bind=\"tag\" />\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('default') && hasSlot('description')\"\n                :id=\"descriptionId\"\n                class=\"b-checkbox__description\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"description\"></slot>\n            </bento-typography>\n            <error-message v-if=\"shouldShowErrorMessage\" :id=\"errorId\" :error-message=\"errorMessage\" />\n\n            <bento-typography v-if=\"contentSlotAvailable\" class=\"b-checkbox__content\" el=\"span\" variant=\"body\">\n                <slot name=\"content\"></slot>\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, ref, toRefs, useAttrs } from 'vue';\n    import {\n        BentoCheckboxEvent,\n        BentoCheckboxState,\n        BentoCheckboxTag,\n        BentoCheckboxType,\n        BentoMultiCheckboxType,\n    } from '@/core/components/checkbox/checkbox.types';\n    import { BentoTypography } from '@/components/typography';\n    import { CheckboxInput } from '@/components/internal/checkbox-input';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import type { HTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { generateUid } from '@/core/utils/ts';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { BentoTag } from '@/components/tag';\n    import { BentoCheckboxGroupItems } from '@/core/components/checkbox-group/checkbox-group.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * Checkboxes are used to make a binary choice about an option.\n     * The label tag area is also clickable.\n     *\n     * @usage\n     * import { BentoCheckbox } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCheckbox },\n     *     template: `\n     *         <bento-checkbox>\n     *             Label text\n     *             <template #description>Sub label text</template>\n     *         </bento-checkbox>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-checkbox',\n        i18n: { messages },\n        components: {\n            BentoTag,\n            BentoTypography,\n            CheckboxInput,\n            ErrorMessage,\n        },\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n        props: {\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\n             * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label.\n             */\n            ariaLabel: { type: String, default: null },\n\n            /**\n             * Setting this property to true will disable the checkbox in your form.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Renders the checkbox in an error state with an error message.\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * Setting this property to true will show the checkbox in error state.\n             */\n            hasError: { type: Boolean, default: false },\n\n            /**\n             * The :indeterminate CSS pseudo-class represents any form element\n             * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n             * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n             * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n             * This property lets you control the input.indeterminate native property.\n             */\n            indeterminate: { type: Boolean, default: false },\n\n            /**\n             * When handling a single checkbox with a singular state, use a boolean.\n             *\n             * When handling multiple checkboxes, use an array of keys.\n             * These keys exist as a set \"value\" prop for each checkbox.\n             */\n            modelValue: {\n                type: [Boolean, Array] as PropType<BentoCheckboxType | BentoCheckboxGroupItems>,\n                default: false,\n            },\n\n            /**\n             * Highlights the checkbox is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * Setting this property to true will set the checkbox to read only state.\n             */\n            readonly: { type: Boolean, default: false },\n\n            /**\n             * Highlights the checkbox is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Sets the properties of the BentoTag component that is placed next to the label.\n             * {@see BentoTag}\n             */\n            tag: { type: Object as PropType<BentoCheckboxTag>, default: undefined },\n\n            /**\n             * The value of the component. The DOM API casts this to a string.\n             * The browser uses \"on\" as the default value.\n             *\n             * In the case of multiple checkboxes this value is used as a unique key.\n             */\n            value: { type: [String, Number], default: null },\n        },\n        emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n        setup(props, { attrs, emit, slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const descriptionId = generateUid('description');\n            const errorId = generateUid('error');\n            const hasSlot = useHasSlot(slots);\n\n            const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n            const defaultSlotValue = getSlotText(slots)('default');\n            const descriptionSlotValue = getSlotText(slots)('description');\n\n            useDefaultSlotValidator('bento-checkbox', slots.default, slots.description);\n\n            const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n            const isChecked = computed(() => {\n                if (!isCheckboxGroup.value) {\n                    return modelValue.value as boolean;\n                }\n\n                return (modelValue.value as BentoMultiCheckboxType).some(item => item === value.value);\n            });\n            const isIndeterminate = computed(() => indeterminate.value);\n\n            const shouldShowError = computed(\n                () => !props.disabled && !props.readonly && (props.hasError || !!props.errorMessage)\n            );\n            const shouldShowErrorMessage = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n            // Content slot logic\n            const hasContentSlot = computed(() => hasSlot('content'));\n            const isCheckedOrIntermediate = computed(() => isIndeterminate?.value || isChecked?.value);\n            const contentSlotAvailable = computed(\n                () => hasContentSlot?.value && isCheckboxGroup?.value && isCheckedOrIntermediate?.value\n            );\n\n            // ARIA fields\n            const ariaDescribedBy = computed<HTMLAttributes['aria-describedby']>(\n                () =>\n                    `${shouldShowErrorMessage.value ? errorId : ''} ${\n                        defaultSlotValue && descriptionSlotValue ? descriptionId : ''\n                    }`.trim() || null\n            );\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const checkboxTranslation = ref();\n            // Translations used in the script tag need to be inside onMounted otherwise they fail in Vue 3\n            onMounted(() => {\n                checkboxTranslation.value = t('checkbox');\n            });\n            // Only add aria-label if no label slot is present\n            const computedAriaLabel = computed(\n                () =>\n                    useAriaLabel({\n                        ariaLabel: ariaLabelAttribute.value as string,\n                        // TODO: take this line away when the aria-label props is removed\n                        label: ariaLabel,\n                        defaultFallback: checkboxTranslation.value,\n                    }).value\n            );\n\n            const styleAttrs = computed(() => {\n                const { style, class: cls } = useAttrs();\n                return {\n                    class: cls as HTMLAttributes['class'],\n                    style: style as HTMLAttributes['style'],\n                };\n            });\n\n            const conditionalClass = computed(() => ({\n                [`b-checkbox--${BentoCheckboxState.DISABLED}`]: disabled.value,\n                [`b-checkbox--${BentoCheckboxState.READONLY}`]: readonly.value,\n            }));\n\n            const onChange = (newValue: BentoCheckboxType | BentoCheckboxGroupItems) => {\n                if (disabled.value) {\n                    return;\n                }\n                emit(BentoCheckboxEvent.UPDATE, newValue);\n                emit(BentoCheckboxEvent.INPUT, newValue);\n            };\n\n            return {\n                // Values\n                descriptionId,\n                errorId,\n                ariaDescribedBy,\n                computedAriaLabel,\n                conditionalClass,\n                defaultSlotValue,\n                descriptionSlotValue,\n                isIndeterminate,\n                shouldShowError,\n                shouldShowErrorMessage,\n                contentSlotAvailable,\n                hasContentSlot,\n                styleAttrs,\n\n                // Methods\n                hasSlot,\n                onChange,\n\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/checkbox/checkbox.scss\" />\n"],"names":["BentoCheckboxEvent","BentoCheckboxEvent2","_sfc_main","defineComponent","messages","BentoTag","BentoTypography","CheckboxInput","ErrorMessage","props","attrs","emit","slots","t","useI18n","descriptionId","generateUid","errorId","hasSlot","useHasSlot","disabled","indeterminate","modelValue","readonly","value","toRefs","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","isCheckboxGroup","computed","isChecked","item","isIndeterminate","shouldShowError","shouldShowErrorMessage","hasContentSlot","isCheckedOrIntermediate","contentSlotAvailable","ariaDescribedBy","ariaLabelAttribute","ref","ariaLabel","checkboxTranslation","onMounted","computedAriaLabel","useAriaLabel","styleAttrs","style","cls","useAttrs","conditionalClass","CheckboxInputState","newValue","_ctx","createVNode","_component_checkbox_input","mergeProps","openBlock","createElementBlock","_hoisted_1","createBlock","_component_bento_typography","createElementVNode","createTextVNode","toDisplayString","required","createCommentVNode","_component_bento_tag","tag","renderSlot","_component_error_message"],"mappings":";;;;;;;;;;;;;AASY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,SAAA,sBACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;GC4ERE,KAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,MAAA,EAAA,UAAAC,EAAA;AAAA,EACW,YAAA;AAAA,IACL,UAAAC;AAAA,IACR,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,cAAAC;AAAA,EACA;AAAA,EACJ,cAAA;AAAA,EACc,OAAA,EAAA,MAAA,aAAA;AAAA,EACc,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACrB,WAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAOsC,UAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKC,cAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAKE,UAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKF,eAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASK,YAAA;AAAA,MAQnC,MAAA,CAAA,SAAA,KAAA;AAAA,MACa,SAAA;AAAA,IACZ;AAAA;AAAA;AAAA;AAAA,IACb,UAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAK0C,UAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,KAAA,EAAA,MAAA,QAAA,SAAA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM4B,OAAA,EAAA,MAAA,CAAA,QAAA,MAAA,GAAA,SAAA,KAAA;AAAA,EAQvB;AAAA,EACnD,OAAA,CAAAR,EAAA,QAAAA,EAAA,KAAA;AAAA,EAC2D,MAAAS,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEvD,UAAA,EAAA,GAAAC,EAAA,IAAAC,GAAA,EAAA,UAAAV,EAAA,CAAA,GACAW,IAAAC,EAAA,aAAA,GACAC,IAAAD,EAAA,OAAA,GACAE,IAAAC,GAAAP,CAAA,GAEA,EAAA,UAAAQ,GAAA,eAAAC,GAAA,YAAAC,GAAA,UAAAC,GAAA,OAAAC,EAAA,IAAAC,EAAAhB,CAAA,GAEAiB,IAAAC,EAAAf,CAAA,EAAA,SAAA,GACAgB,IAAAD,EAAAf,CAAA,EAAA,aAAA;AAEA,IAAAiB,GAAA,kBAAAjB,EAAA,SAAAA,EAAA,WAAA;AAEA,UAAAkB,IAAAC,EAAA,MAAA,MAAA,QAAAT,EAAA,KAAA,CAAA,GACAU,IAAAD,EAAA,MACID,EAAA,QAIAR,EAAA,MAAA,KAAA,CAAAW,MAAAA,MAAAT,EAAA,KAAA,IAHIF,EAAA,KAGiF,GAEzFY,IAAAH,EAAA,MAAAV,EAAA,KAAA,GAEAc,IAAAJ;AAAA,MAAwB,MAAA,CAAAtB,EAAA,YAAA,CAAAA,EAAA,aAAAA,EAAA,YAAA,CAAA,CAAAA,EAAA;AAAA,IACmD,GAE3E2B,IAAAL,EAAA,MAAA,CAAAtB,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAA,CAAAA,EAAA,YAAA,GAGA4B,IAAAN,EAAA,MAAAb,EAAA,SAAA,CAAA,GACAoB,IAAAP,EAAA,OAAAG,KAAA,gBAAAA,EAAA,WAAAF,KAAA,gBAAAA,EAAA,MAAA,GACAO,IAAAR;AAAA,MAA6B,OAAAM,KAAA,gBAAAA,EAAA,WAAAP,KAAA,gBAAAA,EAAA,WAAAQ,KAAA,gBAAAA,EAAA;AAAA,IACyD,GAItFE,IAAAT;AAAA,MAAwB,MAAA,GAAAK,EAAA,QAAAnB,IAAA,EAAA,IAAAS,KAAAE,IAAAb,IAAA,EAAA,GAAA,KAAA,KAAA;AAAA,IAIH,GAGrB0B,IAAAC,EAAAhC,EAAA,YAAA,CAAA,GACA,EAAA,WAAAiC,EAAA,IAAAlB,EAAAhB,CAAA,GACAmC,IAAAF,EAAA;AAEA,IAAAG,EAAA,MAAA;AACI,MAAAD,EAAA,QAAA/B,EAAA,UAAA;AAAA,IAAwC,CAAA;AAG5C,UAAAiC,IAAAf;AAAA,MAA0B,MAAAgB,GAAA;AAAA,QAEL,WAAAN,EAAA;AAAA;AAAA,QACqB,OAAAE;AAAA,QAEvB,iBAAAC,EAAA;AAAA,MAC8B,CAAA,EAAA;AAAA,IACtC,GAGXI,IAAAjB,EAAA,MAAA;AACI,YAAA,EAAA,OAAAkB,GAAA,OAAAC,EAAA,IAAAC,EAAA;AACA,aAAA;AAAA,QAAO,OAAAD;AAAA,QACI,OAAAD;AAAA,MACP;AAAA,IACJ,CAAA,GAGJG,IAAArB,EAAA,OAAA;AAAA,MAAyC,CAAA,eAAAsB,EAAA,QAAA,EAAA,GAAAjC,EAAA;AAAA,MACoB,CAAA,eAAAiC,EAAA,QAAA,EAAA,GAAA9B,EAAA;AAAA,IACA,EAAA;AAW7D,WAAA;AAAA;AAAA,MAAO,eAAAR;AAAA,MAEH,SAAAE;AAAA,MACA,iBAAAuB;AAAA,MACA,mBAAAM;AAAA,MACA,kBAAAM;AAAA,MACA,kBAAA1B;AAAA,MACA,sBAAAE;AAAA,MACA,iBAAAM;AAAA,MACA,iBAAAC;AAAA,MACA,wBAAAC;AAAA,MACA,sBAAAG;AAAA,MACA,gBAAAF;AAAA,MACA,YAAAW;AAAA;AAAA,MACA,SAAA9B;AAAA,MAGA,UAzBJ,CAAAoC,MAAA;AACI,QAAAlC,EAAA,UAGAT,EAAAX,EAAA,QAAAsD,CAAA,GACA3C,EAAAX,EAAA,OAAAsD,CAAA;AAAA,MAAuC;AAAA,MAqBvC,GAAAzC;AAAA,IAEA;AAAA,EACJ;AAER,CAAA;EApQoE,KAAA;AAAA;;;;;IAdE,OAAA,CAAA,cAAA0C,EAAA,gBAAA;AAAA,EAClE,GAAAA,EAAA,UAAA,GAAA;AAAA,IAEeC,EAAAC,GAAAC,EAAAH,EAAA,QAAA;AAAA,MACmCT,KAAAA;AAAAA,MAC7C,cAAAS,EAAA,QAAA,SAAA,IAAA,SAAAA,EAAA;AAAA,MACkB,oBAAAA,EAAA;AAAA,MACPpB,UAAAA,EAAAA;AAAAA,MACID,aAAAA,EAAAA;AAAAA,MACH,eAAAqB,EAAA;AAAA,MACCjC,OAAAA,EAAAA;AAAAA,MACHC,eAAAA,EAAAA;AAAAA,MACV,UAAAgC,EAAA;AAAA,MAEOrC,uBAAAA,EAAAA;AAAAA,IAAsBkB,CAAAA,GAAAA,MAAAA,IAAAA,CAAAA,cAAAA,oBAAAA,YAAAA,aAAAA,iBAAAA,SAAAA,eAAAA,YAAAA,qBAAAA,CAAAA;AAAAA,IAyB3BmB,EAAA,QAAA,SAAA,KAAAA,EAAA,0BAAAI,EAAA,GAAAC,EAAA,QAAAC,IAAA;AAAA,MAfgBN,EAAA,QAAA,SAAA,KAAAI,EAAA,GAAAG,EAAAC,GAAA;AAAA,QATkD,KAAA;AAAA,QAAI,OAAA;AAAA,QAAc,IAAA;AAAA,QAhBnG,SAAA;AAAA,MAAA,GAAA;AAAA;UAiB8BC,GAAA,QAAA,MAAA;AAAA;UACkB,CAAA;AAAA,UAlBhDT,EAAA,YAAAI,EAAA,GAAAG,EAAAC,GAAA;AAAA,YAkBuF,KAAA;AAAA,YAAI,OAAA;AAAA,YAlB3F,IAAA;AAAA,UAAA,GAAA;AAAA;cAAAE,EAAA,MAAAC,EAAAX,EAAA,EAAA,UAAA,CAAA,IAAA,KAAA,CAAA;AAAA,YAAA,CAAA;AAAA,YAqB6CY,GAAAA;AAAAA,UAAAA,CAAAA,KAAAA,EAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA;AAAAA,YAA+C,KAAA;AAAA,YAAI,OAAA;AAAA,YArBhG,IAAA;AAAA,UAAA,GAAA;AAAA;cAAAF,EAAA,MAAAC,EAAAX,EAAA,EAAA,UAAA,CAAA,IAAA,KAAA,CAAA;AAAA,YAAA,CAAA;AAAA,YAAA,GAAA;AAAA,UAAA,CAAA,KAAAa,EAAA,IAAA,EAAA;AAAA,UAwBmFb,EAAA,OAAAI,EAAA,GAAAG,EAAAO,GAAAX,EAAA;AAAA,YAAhB,KAAA;AAAA,YAASY,OAAAA;AAAAA,UAxB5E,GAAAf,EAAA,GAAA,GAAA,MAAA,EAAA,KAAAa,EAAA,IAAA,EAAA;AAAA,QAAA,CAAA;AAAA,QAAA,GAAA;AAAA,MAAA,CAAA,KAAAA,EAAA,IAAA,EAAA;AAAA,MAkC+Bb,EAAA,QAAA,SAAA,KAAAA,EAAA,QAAA,aAAA,KAAAI,EAAA,GAAAG,EAAAC,GAAA;AAAA,QANG,KAAA;AAAA,QACb,IAAAR,EAAA;AAAA,QACF,OAAA;AAAA,QACI,IAAA;AAAA,QA/BvB,SAAA;AAAA,MAAA,GAAA;AAAA;UAAAgB,EAAAhB,EAAA,QAAA,eAAA,CAAA,GAAA,QAAA,EAAA;AAAA,QAAA,CAAA;AAAA,QAAA,GAAA;AAAA,MAAA,GAAA,GAAA,CAAA,IAAA,CAAA,KAAAa,EAAA,IAAA,EAAA;AAAA,MAmCuGb,EAAA,0BAAAI,EAAA,GAAAG,EAAAU,GAAA;AAAA,QAAlC,KAAA;AAAA,QAAG,IAAAjB,EAAA;AAAA,QAnCxE,iBAAAA,EAAA;AAAA,MAAA,GAAA,MAAA,GAAA,CAAA,MAAA,eAAA,CAAA,KAAAa,EAAA,IAAA,EAAA;AAAA,MAuC+Bb,EAAA,wBAAAI,EAAA,GAAAG,EAAAC,GAAA;AAAA,QAFsD,KAAA;AAAA,QAAI,OAAA;AAAA,QAAc,IAAA;AAAA,QArCvG,SAAA;AAAA,MAAA,GAAA;AAAA;UAAAQ,EAAAhB,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,QAAA,CAAA;AAAA,QAAA,GAAA;AAAA,MAAA,CAAA,KAAAa,EAAA,IAAA,EAAA;AAAA,IAAA,CAAA,KAAAA,EAAA,IAAA,EAAA;AAAA;;;"}