@adyen/bento-vue2 1.68.2 → 1.69.0

package/dist/internal.js

@@ -1,43 +1,44 @@
-import { a as e, b as r, C as t, c as s, d as p } from "./chunks/calendar.DvIQEYwN.js";
-import { C as n, a as l } from "./chunks/copy.CF8Fzu2Y.js";
-import { C as f } from "./chunks/controls-group.CccuLkgP.js";
-import { B as I, b as m, a as E, D as T } from "./chunks/dialog-page.CLHZqQeU.js";
-import { E as d, F as N } from "./chunks/error-message.BgxnwPLF.js";
-import { F as O } from "./chunks/fixed-scroller.XN-jvWqb.js";
-import { G as A, a as L } from "./chunks/grid-layout.HvTAa4to.js";
-import { H as c, I as P } from "./chunks/header-meta.CfloYa86.js";
-import { b as g, c as y, u as D } from "./chunks/use-cached-selected-values.0EeyFfyF.js";
-import { L as M } from "./chunks/listbox-option-tag.D0Cql_R3.js";
-import { B as W } from "./chunks/teleport.BV6zrDjA.js";
-import { T as v } from "./chunks/tooltip.wQsyAwkC.js";
-import { B as J } from "./chunks/button-actions-with-menu.nPj7sdGE.js";
-import { f as R } from "./chunks/button-actions.Ju27CRNG.js";
+import { a as e, b as t, C as r, c as s, d as i } from "./chunks/calendar.BuAVH2aU.js";
+import { C as p, a as l } from "./chunks/copy.UbMV4m6b.js";
+import { C as I } from "./chunks/controls-group.B1cxRdIA.js";
+import { B as x, b as E, a as f, D as m } from "./chunks/dialog-page.CdJloGXQ.js";
+import { E as d, F as N } from "./chunks/error-message.PWgUfpvo.js";
+import { F as O } from "./chunks/fixed-scroller.CRnBrXfk.js";
+import { G as B, a as A } from "./chunks/grid-layout.1aIiz2N_.js";
+import { H as P, I as c } from "./chunks/header-meta.C75OXHwb.js";
+import { b as g, c as y, u as D } from "./chunks/use-cached-selected-values.CI9xi8dE.js";
+import { L as S } from "./chunks/listbox-option-tag.On3eD2RE.js";
+import { e as W, d as h } from "./chunks/toggle-button.DeECoGRn.js";
+import { B as H, a as J, T as K } from "./chunks/tooltip.BYj8cc9F.js";
+import { B as Y } from "./chunks/button-actions-with-menu.DIpUg6BF.js";
 export {
-  R as BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY,
-  I as BentoDialogPageAnimation,
+  W as BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY,
+  x as BentoDialogPageAnimation,
   g as BentoListbox,
-  W as BentoTeleport,
-  J as ButtonActionsWithMenu,
+  h as BentoTeleport,
+  H as BentoTooltipPosition,
+  J as BentoTooltipState,
+  Y as ButtonActionsWithMenu,
   e as Calendar,
-  r as CalendarEvent,
-  t as CalendarFirstDayOfWeek,
+  t as CalendarEvent,
+  r as CalendarFirstDayOfWeek,
   s as CalendarPosition,
-  p as CalendarVariant,
-  f as ControlsGroup,
-  n as Copy,
+  i as CalendarVariant,
+  I as ControlsGroup,
+  p as Copy,
   l as CopyTooltipState,
-  m as DIALOG_PAGE_CONFIG_INJECTION_KEY,
-  E as DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,
-  T as DialogPage,
+  E as DIALOG_PAGE_CONFIG_INJECTION_KEY,
+  f as DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,
+  m as DialogPage,
   d as ErrorMessage,
   N as FieldLabel,
   O as FixedScroller,
-  A as GridLayout,
-  L as GridLayoutContainerType,
-  c as HeaderMeta,
-  P as InfoIconWithPopover,
-  M as ListboxOptionTag,
-  v as Tooltip,
+  B as GridLayout,
+  A as GridLayoutContainerType,
+  P as HeaderMeta,
+  c as InfoIconWithPopover,
+  S as ListboxOptionTag,
+  K as Tooltip,
   y as useCachedSelectedValues,
   D as useMultiLevelItems
 };

package/dist/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"internal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/layout.js

@@ -1,4 +1,4 @@
-import { l as t, a as e } from "./chunks/layout-row.C_F2wX6d.js";
+import { l as t, a as e } from "./chunks/layout-row.BWxn-eQ-.js";
 export {
   t as BentoLayout,
   e as BentoLayoutRow

package/dist/link.js

@@ -1,4 +1,4 @@
-import { B as o, a as t } from "./chunks/link.CXy_LoFI.js";
+import { B as o, a as t } from "./chunks/link.B3F22FTY.js";
 export {
   o as BentoLink,
   t as BentoLinkVariant

package/dist/loading-indicator.js

@@ -1,4 +1,4 @@
-import { B as n, a as t } from "./chunks/loading-indicator.z8COalOc.js";
+import { B as n, a as t } from "./chunks/loading-indicator.Iy1CVr_T.js";
 export {
   n as BentoLoadingIndicator,
   t as BentoLoadingIndicatorEvent

package/dist/menu.js

@@ -1,4 +1,4 @@
-import { B as o, a as t } from "./chunks/menu.D0OQgk40.js";
+import { f as o, g as t } from "./chunks/toggle-button.DeECoGRn.js";
 export {
   o as BentoMenu,
   t as BentoMenuEvent

package/dist/modal-fullscreen.js

@@ -1,4 +1,4 @@
-import { m as o, B as a } from "./chunks/modal-fullscreen.DHotw1RI.js";
+import { m as o, B as a } from "./chunks/modal-fullscreen.BgmKDCl4.js";
 export {
   o as BentoModalFullscreen,
   a as BentoModalFullscreenPage

package/dist/modal.js

@@ -1,5 +1,5 @@
-import { B as e } from "./chunks/modal.eoNQ6E3U.js";
-import { c as n, e as l, f as B, g as d, d as M, b as s, B as r, a as i } from "./chunks/base-modal.CkkfT6r6.js";
+import { B as e } from "./chunks/modal.DMqbIDcX.js";
+import { c as n, e as l, f as B, g as d, d as M, b as s, B as r, a as i } from "./chunks/base-modal.Cehud1uW.js";
 export {
   e as BentoModal,
   n as BentoModalColumnLayoutVariant,

package/dist/pagination.js

@@ -1,4 +1,4 @@
-import { B as n } from "./chunks/pagination.4J7ZMyf5.js";
+import { B as n } from "./chunks/pagination.38ahUAk8.js";
 export {
   n as BentoPagination
 };

package/dist/payment-method.js

@@ -1,4 +1,4 @@
-import { B as t } from "./chunks/payment-method.Cx4nPDtE.js";
+import { B as t } from "./chunks/payment-method.CRluCp_L.js";
 import { B as m } from "./chunks/payment-method.types.BqtH7RM2.js";
 export {
   t as BentoPaymentMethod,

package/dist/popover.js

@@ -1,5 +1,5 @@
-import { B as r } from "./chunks/popover.Bo4Bkudr.js";
-import { B as p } from "./chunks/popover.types.CBqyA4ly.js";
+import { h as r } from "./chunks/toggle-button.DeECoGRn.js";
+import { B as p } from "./chunks/popover.types.B1HUQoCG.js";
 export {
   r as BentoPopover,
   p as BentoPopoverPositions

package/dist/popper-container.js

@@ -1,4 +1,4 @@
-import { P as n, c as a, d as i, a as r, b as p } from "./chunks/popper-container.DIFqmRsp.js";
+import { P as n, c as a, d as i, a as r, b as p } from "./chunks/popper-container.Bu75g2nc.js";
 export {
   n as PopperContainer,
   a as PopperContainerAriaRole,

package/dist/promo-banner.js

@@ -1,4 +1,4 @@
-import { p as r, B as a, a as e } from "./chunks/promo-banner.Bbc2U3S3.js";
+import { p as r, B as a, a as e } from "./chunks/promo-banner.BGMV3nRn.js";
 export {
   r as BentoPromoBanner,
   a as BentoPromoBannerColor,

package/dist/radio-group.js

@@ -1,5 +1,5 @@
-import { b as t, B as e, a as n } from "./chunks/radio-group.4_KKjvAm.js";
-import { R as B } from "./chunks/radio-input.uJAhxKRs.js";
+import { b as t, B as e, a as n } from "./chunks/radio-group.BVLoYrgU.js";
+import { R as B } from "./chunks/radio-input.BRceOAA4.js";
 export {
   t as BentoRadioButton,
   B as BentoRadioButtonStateClass,

package/dist/rich-text-editor.js

@@ -1,4 +1,4 @@
-import { r as t } from "./chunks/rich-text-editor.BUKLdRkN.js";
+import { r as t } from "./chunks/rich-text-editor.BZ6CyBsK.js";
 export {
   t as BentoRichTextEditor
 };

package/dist/search-bar.js

@@ -1,5 +1,5 @@
-import { B as r, b as t, a as B } from "./chunks/search-bar.CuBj5FAE.js";
-import { u as o } from "./chunks/dropdown.DazYAy4B.js";
+import { B as r, b as t, a as B } from "./chunks/search-bar.VfZoy5FX.js";
+import { u as o } from "./chunks/dropdown.DB_MlO1F.js";
 export {
   r as BentoSearchBar,
   t as BentoSearchBarEvent,

package/dist/secondary-nav.js

@@ -1,4 +1,4 @@
-import { s as e } from "./chunks/secondary-nav.C6usurfD.js";
+import { s as e } from "./chunks/secondary-nav.BXXKo5HE.js";
 export {
   e as BentoSecondaryNav
 };

package/dist/segmented-control.js

@@ -1,4 +1,4 @@
-import { B as t } from "./chunks/segmented-control.DHZEfmT-.js";
+import { B as t } from "./chunks/segmented-control.CGBrRBLL.js";
 import { B as r } from "./chunks/segmented-control.types.BHRLV8KU.js";
 export {
   t as BentoSegmentedControl,

package/dist/selection-card.js

@@ -1,4 +1,4 @@
-import { B as t, s as a, a as n } from "./chunks/selection-card-group.0o5T4tab.js";
+import { B as t, s as a, a as n } from "./chunks/selection-card-group.DgQLQ4Wo.js";
 export {
   t as BentoSelectionCard,
   a as BentoSelectionCardGroup,

package/dist/sidepanel.js

@@ -1,4 +1,4 @@
-import { a as n, B as o, s as t } from "./chunks/sidepanel.DyThBUgV.js";
+import { a as n, B as o, s as t } from "./chunks/sidepanel.BR0coAJl.js";
 export {
   n as BentoSidepanel,
   o as BentoSidepanelEvent,

package/dist/status.js

@@ -1,4 +1,4 @@
-import { s, B as o } from "./chunks/status.types.p_TCvoo0.js";
+import { s, B as o } from "./chunks/status.types.DBYsEsiT.js";
 export {
   s as BentoStatus,
   o as BentoStatusVariant

package/dist/stepper.js

@@ -1,4 +1,4 @@
-import { a as p, s as o, B as a, b as n } from "./chunks/step.DMMofD4B.js";
+import { a as p, s as o, B as a, b as n } from "./chunks/step.DJkLl2s4.js";
 export {
   p as BentoStep,
   o as BentoStepper,

package/dist/structured-list.js

@@ -1,4 +1,4 @@
-import { B as r, a as o } from "./chunks/structured-list-item.Bnn6-Z3q.js";
+import { B as r, a as o } from "./chunks/structured-list-item.CACpjdy4.js";
 export {
   r as BentoStructuredList,
   o as BentoStructuredListItem

package/dist/styles/bento-dark.css

@@ -395,6 +395,7 @@
   --b-color-background-critical-strong-hover: #ffbda6;
   --b-color-background-critical-strong: #ff9a78;
   --b-color-background-critical-weak: #5c1800;
+  --b-color-background-spotlight: #ffe379;
   --b-color-background-selected: #00305f;
   --b-color-background-disabled: #363636;
   --b-color-background-modal-active: #525252;
@@ -412,6 +413,7 @@
   --b-color-background-primary-active: #363636;
   --b-color-background-primary-hover: #2a2a2a;
   --b-color-background-primary: #111111;
+  --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-tutorial-indicator-border: var(--b-border-width-m) solid var(--b-color-decorative-green);
   --b-tutorial-popover-footer-padding-top: var(--b-spacer-060);
   --b-tutorial-popover-footer-column-gap: var(--b-spacer-040);
@@ -555,7 +557,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);
@@ -1494,6 +1498,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;
@@ -1541,9 +1550,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);
@@ -1551,6 +1561,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);
@@ -1610,7 +1622,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);
@@ -2069,4 +2081,5 @@
   --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);
 }

package/dist/styles/bento-light.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/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/legacy.css

@@ -458,6 +458,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;
@@ -473,6 +474,7 @@
   --b-color-background-secondary: #f4f5f6;
   --b-color-background-primary-active: #ecedef;
   --b-color-background-primary-hover: #f4f5f6;
+  --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-font-weight-semi-bold: var(--b-font-weight-600);
   --b-font-weight-medium: var(--b-font-weight-500);
@@ -597,7 +599,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);
@@ -1444,6 +1448,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 var(--b-spacer-070);
   --b-data-grid-config-settings-button-margin: var(--b-spacer-070) 0;
@@ -1486,12 +1495,13 @@
   --b-data-grid-row-row-actions-container-row-actions-menu-open-z-index: var(--b-z-index-local-tier-3);
   --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-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-highlighted-background-color: var(--b-color-background-selected);
   --b-data-grid-row-color: var(--b-color-label-primary);
   --b-data-grid-row-border-width: var(--b-border-width-s);
+  --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);
@@ -1546,7 +1556,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);
@@ -2124,9 +2134,12 @@
   --b-data-grid-pagination-background-color: var(--b-color-background-primary);
   --b-data-grid-lazy-load-background-color: var(--b-color-background-primary);
   --b-data-grid-footer-background-color: var(--b-color-background-primary);
+  --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);
   --b-data-grid-cell-background-color: var(--b-color-background-primary);
   --b-data-grid-row-row-actions-container-background-color: var(--b-color-background-primary);
+  --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-disabled-color: var(--b-color-neutral-40);
   --b-data-grid-row-hover-background-color: var(--b-color-neutral-10);
   --b-data-grid-row-border-color: var(--b-color-neutral-20);

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);
 }