@adyen/bento-vue3 1.68.2 → 1.70.0

package/dist/styles/bento.css

@@ -393,6 +393,7 @@
   --b-color-background-critical-strong-hover: #c13101;
   --b-color-background-critical-strong: #dc3801;
   --b-color-background-critical-weak: #fff3ef;
+  --b-color-background-spotlight: #ffe379;
   --b-color-background-selected: #e3effb;
   --b-color-background-disabled: #ecedef;
   --b-color-background-modal-active: #ecedef;
@@ -410,6 +411,7 @@
   --b-color-background-primary-active: #ecedef;
   --b-color-background-primary-hover: #f4f5f6;
   --b-color-background-primary: #ffffff;
+  --b-gradient-data-grid-zebra-hover: linear-gradient(270deg, var(--b-color-background-secondary-hover) 0%, rgba(236, 237, 239, .82) 53.34%, rgba(236, 237, 239, .75) 61.73%, rgba(236, 237, 239, .11) 99.25%, rgba(236, 237, 239, 0) 100%);
   --b-gradient-data-grid-hover: linear-gradient(270deg, var(--b-color-background-primary-hover) 0%, rgba(247, 247, 248, .82) 53.34%, rgba(247, 247, 248, .75) 61.73%, rgba(247, 247, 248, .11) 99.25%, rgba(247, 247, 248, 0) 100%);
   --b-tutorial-indicator-border: var(--b-border-width-m) solid var(--b-color-decorative-green);
   --b-tutorial-popover-footer-padding-top: var(--b-spacer-060);
@@ -554,7 +556,9 @@
   --b-textarea-input-readonly-background-color: var(--b-color-background-disabled);
   --b-textarea-input-placeholder-color: var(--b-color-label-tertiary);
   --b-textarea-input-hover-border-color: var(--b-color-outline-tertiary-active);
-  --b-textarea-input-focus-border: 1.5px solid var(--b-color-outline-tertiary-active);
+  --b-textarea-input-focus-border-width: var(--b-border-width-attention);
+  --b-textarea-input-focus-border-color: var(--b-color-outline-tertiary-active);
+  --b-textarea-input-focus-border: var(--b-border-width-attention) solid var(--b-color-outline-tertiary-active);
   --b-textarea-input-error-background-color: var(--b-color-outline-critical);
   --b-textarea-input-disabled-color: var(--b-color-label-disabled);
   --b-textarea-input-disabled-border-color: var(--b-color-outline-disabled);
@@ -1493,6 +1497,11 @@
   --b-data-grid-config-condensed-view-title-padding: 0 0 var(--b-spacer-060) 0;
   --b-data-grid-config-condensed-view-padding: 0 var(--b-spacer-070) var(--b-spacer-060) var(--b-spacer-070);
   --b-data-grid-config-condensed-view-border-color: var(--b-color-separator-primary);
+  --b-data-grid-config-appearance-button-hover-background-color: var(--b-color-background-secondary);
+  --b-data-grid-config-appearance-button-padding: var(--b-spacer-040) var(--b-spacer-070);
+  --b-data-grid-config-appearance-title-padding: 0 var(--b-spacer-070) var(--b-spacer-060) var(--b-spacer-070);
+  --b-data-grid-config-appearance-padding: 0 0 var(--b-spacer-060) 0;
+  --b-data-grid-config-appearance-border-color: var(--b-color-separator-primary);
   --b-data-grid-config-settings-column-and-row-margin: var(--b-spacer-120);
   --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;
@@ -1539,9 +1548,10 @@
   --b-data-grid-row-row-actions-container-hover-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-row-row-actions-container-z-index: var(--b-z-index-local-tier-1);
   --b-data-grid-row-row-actions-container-background-color: var(--b-color-background-primary);
+  --b-data-grid-row-nested-row-hover-background-color: var(--b-color-background-primary-hover);
   --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-nested-row-background-color: var(--b-color-background-primary);
+  --b-data-grid-row-nested-slot-background-color: var(--b-color-background-primary);
   --b-data-grid-row-highlighted-background-color: var(--b-color-background-selected);
   --b-data-grid-row-disabled-color: var(--b-color-label-primary);
   --b-data-grid-row-hover-background-color: var(--b-color-background-primary-hover);
@@ -1549,6 +1559,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-row-zebra-hover-background-color: var(--b-color-background-secondary-hover);
+  --b-data-grid-row-zebra-background-color: var(--b-color-background-secondary);
   --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);
@@ -1608,7 +1620,7 @@
   --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-summary-cell-item-highlighted-background-color: var(--b-color-background-highlight-weak);
+  --b-data-grid-summary-cell-item-highlighted-background-color: var(--b-color-background-spotlight);
   --b-data-grid-static-icon-warning-colored-color: var(--b-color-label-warning);
   --b-data-grid-static-icon-no-value-color: var(--b-color-label-tertiary);
   --b-data-grid-static-icon-error-colored-color: var(--b-color-label-critical);
@@ -2067,5 +2079,6 @@
   --b-text-rich-text-heading-margin: var(--b-spacer-100) 0 var(--b-spacer-050) 0;
   --b-focus-ring-outline: var(--b-border-width-l);
   --b-focus-ring-spacer: var(--b-border-width-s);
+  --b-data-grid-cell-actions-background-gradient-zebra-background: var(--b-gradient-data-grid-zebra-hover);
   --b-data-grid-cell-actions-background-gradient-background: var(--b-gradient-data-grid-hover);
 }

package/dist/styles/styleguide.css

@@ -448,6 +448,7 @@
   --b-color-background-critical-strong-hover: #c13101;
   --b-color-background-critical-strong: #dc3801;
   --b-color-background-critical-weak: #fff3ef;
+  --b-color-background-spotlight: #ffe379;
   --b-color-background-selected: #e3effb;
   --b-color-background-disabled: #ecedef;
   --b-color-background-modal-active: #ecedef;
@@ -465,6 +466,7 @@
   --b-color-background-primary-active: #ecedef;
   --b-color-background-primary-hover: #f4f5f6;
   --b-color-background-primary: #ffffff;
+  --b-gradient-data-grid-zebra-hover: linear-gradient(270deg, var(--b-color-background-secondary-hover) 0%, rgba(236, 237, 239, .82) 53.34%, rgba(236, 237, 239, .75) 61.73%, rgba(236, 237, 239, .11) 99.25%, rgba(236, 237, 239, 0) 100%);
   --b-gradient-data-grid-hover: linear-gradient(270deg, var(--b-color-background-primary-hover) 0%, rgba(247, 247, 248, .82) 53.34%, rgba(247, 247, 248, .75) 61.73%, rgba(247, 247, 248, .11) 99.25%, rgba(247, 247, 248, 0) 100%);
   --b-tutorial-indicator-border: var(--b-border-width-m) solid var(--b-color-decorative-green);
   --b-tutorial-popover-footer-padding-top: var(--b-spacer-060);
@@ -609,7 +611,9 @@
   --b-textarea-input-readonly-background-color: var(--b-color-background-disabled);
   --b-textarea-input-placeholder-color: var(--b-color-label-tertiary);
   --b-textarea-input-hover-border-color: var(--b-color-outline-tertiary-active);
-  --b-textarea-input-focus-border: 1.5px solid var(--b-color-outline-tertiary-active);
+  --b-textarea-input-focus-border-width: var(--b-border-width-attention);
+  --b-textarea-input-focus-border-color: var(--b-color-outline-tertiary-active);
+  --b-textarea-input-focus-border: var(--b-border-width-attention) solid var(--b-color-outline-tertiary-active);
   --b-textarea-input-error-background-color: var(--b-color-outline-critical);
   --b-textarea-input-disabled-color: var(--b-color-label-disabled);
   --b-textarea-input-disabled-border-color: var(--b-color-outline-disabled);
@@ -1548,6 +1552,11 @@
   --b-data-grid-config-condensed-view-title-padding: 0 0 var(--b-spacer-060) 0;
   --b-data-grid-config-condensed-view-padding: 0 var(--b-spacer-070) var(--b-spacer-060) var(--b-spacer-070);
   --b-data-grid-config-condensed-view-border-color: var(--b-color-separator-primary);
+  --b-data-grid-config-appearance-button-hover-background-color: var(--b-color-background-secondary);
+  --b-data-grid-config-appearance-button-padding: var(--b-spacer-040) var(--b-spacer-070);
+  --b-data-grid-config-appearance-title-padding: 0 var(--b-spacer-070) var(--b-spacer-060) var(--b-spacer-070);
+  --b-data-grid-config-appearance-padding: 0 0 var(--b-spacer-060) 0;
+  --b-data-grid-config-appearance-border-color: var(--b-color-separator-primary);
   --b-data-grid-config-settings-column-and-row-margin: var(--b-spacer-120);
   --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;
@@ -1594,9 +1603,10 @@
   --b-data-grid-row-row-actions-container-hover-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-row-row-actions-container-z-index: var(--b-z-index-local-tier-1);
   --b-data-grid-row-row-actions-container-background-color: var(--b-color-background-primary);
+  --b-data-grid-row-nested-row-hover-background-color: var(--b-color-background-primary-hover);
   --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-nested-row-background-color: var(--b-color-background-primary);
+  --b-data-grid-row-nested-slot-background-color: var(--b-color-background-primary);
   --b-data-grid-row-highlighted-background-color: var(--b-color-background-selected);
   --b-data-grid-row-disabled-color: var(--b-color-label-primary);
   --b-data-grid-row-hover-background-color: var(--b-color-background-primary-hover);
@@ -1604,6 +1614,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-row-zebra-hover-background-color: var(--b-color-background-secondary-hover);
+  --b-data-grid-row-zebra-background-color: var(--b-color-background-secondary);
   --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);
@@ -1663,7 +1675,7 @@
   --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-summary-cell-item-highlighted-background-color: var(--b-color-background-highlight-weak);
+  --b-data-grid-summary-cell-item-highlighted-background-color: var(--b-color-background-spotlight);
   --b-data-grid-static-icon-warning-colored-color: var(--b-color-label-warning);
   --b-data-grid-static-icon-no-value-color: var(--b-color-label-tertiary);
   --b-data-grid-static-icon-error-colored-color: var(--b-color-label-critical);
@@ -2122,5 +2134,6 @@
   --b-text-rich-text-heading-margin: var(--b-spacer-100) 0 var(--b-spacer-050) 0;
   --b-focus-ring-outline: var(--b-border-width-l);
   --b-focus-ring-spacer: var(--b-border-width-s);
+  --b-data-grid-cell-actions-background-gradient-zebra-background: var(--b-gradient-data-grid-zebra-hover);
   --b-data-grid-cell-actions-background-gradient-background: var(--b-gradient-data-grid-hover);
 }

package/dist/styles/utility.css

@@ -49,6 +49,9 @@
 .b-color-background-selected {
     background-color: #e3effb;
 }
+.b-color-background-spotlight {
+    background-color: #ffe379;
+}
 .b-color-background-critical-weak {
     background-color: #fff3ef;
 }

package/dist/summary-grid.js

@@ -1,4 +1,4 @@
-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.CjbbSZBJ.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.BHuDlPDw.js";
 export {
   r as BentoSummaryGrid,
   t as BentoSummaryGridItemAmount,

package/dist/tabs.js

@@ -1,4 +1,4 @@
-import { a as e, B as s } from "./chunks/tab.CAt51ksU.js";
+import { a as e, B as s } from "./chunks/tab.C3R_VoJL.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.D3in0-Bp.js";
+import { B as t, a as e } from "./chunks/tag.B6AmSws9.js";
 export {
   t as BentoTag,
   e as BentoTagVariant

package/dist/textarea.js

@@ -1,4 +1,4 @@
-import { B as o } from "./chunks/textarea.BBhN67-I.js";
+import { B as o } from "./chunks/textarea.DfQLxj_w.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.CuCII37W.js";
+import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.25y9USE-.js";
 export {
   t as BentoTimeline,
   i as BentoTimelineGapUnit,

package/dist/toast.js

@@ -1,4 +1,4 @@
-import { t as a } from "./chunks/toast.CSoCPteL.js";
+import { t as a } from "./chunks/toast.DIhABAW8.js";
 export {
   a as BentoToast
 };

package/dist/toggle.js

@@ -1,4 +1,4 @@
-import { B as a, b as g, a as s } from "./chunks/toggle.BuKXexA6.js";
+import { B as a, b as g, a as s } from "./chunks/toggle.C8k7NQ7y.js";
 export {
   a as BentoToggle,
   g as BentoToggleLabelPosition,

package/dist/tutorial.js

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

package/dist/typography.js

@@ -1,4 +1,4 @@
-import { B as p, c as e, b as r, a as y } from "./chunks/typography.DN5eC5ch.js";
+import { B as p, c as e, b as r, a as y } from "./chunks/typography.yBEME_Gu.js";
 export {
   p as BentoTypography,
   e as BentoTypographyElement,