@adyen/bento-vue2 1.62.0 → 1.63.0

package/dist/secondary-nav.js

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

package/dist/selection-card.js

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

package/dist/styles/bento-dark.css

@@ -1764,11 +1764,15 @@
   --b-card-animation-easing: var(--b-animation-easing-standard);
   --b-card-animation-duration: var(--b-animation-duration-moderate);
   --b-card-title-wrapper-gap: var(--b-spacer-070);
+  --b-card-secondary-clickable-active-background-color: var(--b-color-background-secondary-active);
+  --b-card-secondary-clickable-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-focus-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-active-background-color: var(--b-color-background-secondary-active);
   --b-card-secondary-header-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-hover-background-color: var(--b-color-background-tertiary);
   --b-card-secondary-background-color: var(--b-color-background-secondary);
+  --b-card-clickable-active-background-color: var(--b-color-background-primary-active);
+  --b-card-clickable-hover-background-color: var(--b-color-background-primary-hover);
   --b-card-disabled-color: var(--b-color-label-disabled);
   --b-card-disabled-background-color: var(--b-color-background-secondary);
   --b-card-expandable-header-padding-bottom: var(--b-spacer-060);

package/dist/styles/bento-light.css

@@ -1762,11 +1762,15 @@
   --b-card-animation-easing: var(--b-animation-easing-standard);
   --b-card-animation-duration: var(--b-animation-duration-moderate);
   --b-card-title-wrapper-gap: var(--b-spacer-070);
+  --b-card-secondary-clickable-active-background-color: var(--b-color-background-secondary-active);
+  --b-card-secondary-clickable-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-focus-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-active-background-color: var(--b-color-background-secondary-active);
   --b-card-secondary-header-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-hover-background-color: var(--b-color-background-tertiary);
   --b-card-secondary-background-color: var(--b-color-background-secondary);
+  --b-card-clickable-active-background-color: var(--b-color-background-primary-active);
+  --b-card-clickable-hover-background-color: var(--b-color-background-primary-hover);
   --b-card-disabled-color: var(--b-color-label-disabled);
   --b-card-disabled-background-color: var(--b-color-background-secondary);
   --b-card-expandable-header-padding-bottom: var(--b-spacer-060);

package/dist/styles/bento.css

@@ -1762,11 +1762,15 @@
   --b-card-animation-easing: var(--b-animation-easing-standard);
   --b-card-animation-duration: var(--b-animation-duration-moderate);
   --b-card-title-wrapper-gap: var(--b-spacer-070);
+  --b-card-secondary-clickable-active-background-color: var(--b-color-background-secondary-active);
+  --b-card-secondary-clickable-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-focus-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-active-background-color: var(--b-color-background-secondary-active);
   --b-card-secondary-header-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-hover-background-color: var(--b-color-background-tertiary);
   --b-card-secondary-background-color: var(--b-color-background-secondary);
+  --b-card-clickable-active-background-color: var(--b-color-background-primary-active);
+  --b-card-clickable-hover-background-color: var(--b-color-background-primary-hover);
   --b-card-disabled-color: var(--b-color-label-disabled);
   --b-card-disabled-background-color: var(--b-color-background-secondary);
   --b-card-expandable-header-padding-bottom: var(--b-spacer-060);

package/dist/styles/legacy.css

@@ -1647,12 +1647,16 @@
   --b-card-animation-easing: var(--b-animation-easing-standard);
   --b-card-animation-duration: var(--b-animation-duration-moderate);
   --b-card-title-wrapper-gap: var(--b-spacer-070);
+  --b-card-secondary-clickable-active-background-color: var(--b-color-background-secondary-active);
+  --b-card-secondary-clickable-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-focus-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-active-background-color: var(--b-color-background-secondary-active);
   --b-card-secondary-header-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-hover-background-color: var(--b-color-background-tertiary);
   --b-card-secondary-border-color: var(--b-color-grey-10);
   --b-card-secondary-background-color: var(--b-color-grey-10);
+  --b-card-clickable-active-background-color: var(--b-color-background-primary-active);
+  --b-card-clickable-hover-background-color: var(--b-color-background-primary-hover);
   --b-card-disabled-color: var(--b-color-label-disabled);
   --b-card-disabled-background-color: var(--b-color-background-secondary);
   --b-card-expandable-header-padding-bottom: var(--b-spacer-060);

package/dist/styles/styleguide.css

@@ -1817,11 +1817,15 @@
   --b-card-animation-easing: var(--b-animation-easing-standard);
   --b-card-animation-duration: var(--b-animation-duration-moderate);
   --b-card-title-wrapper-gap: var(--b-spacer-070);
+  --b-card-secondary-clickable-active-background-color: var(--b-color-background-secondary-active);
+  --b-card-secondary-clickable-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-focus-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-active-background-color: var(--b-color-background-secondary-active);
   --b-card-secondary-header-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-hover-background-color: var(--b-color-background-tertiary);
   --b-card-secondary-background-color: var(--b-color-background-secondary);
+  --b-card-clickable-active-background-color: var(--b-color-background-primary-active);
+  --b-card-clickable-hover-background-color: var(--b-color-background-primary-hover);
   --b-card-disabled-color: var(--b-color-label-disabled);
   --b-card-disabled-background-color: var(--b-color-background-secondary);
   --b-card-expandable-header-padding-bottom: var(--b-spacer-060);

package/dist/tabs.js

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

package/dist/tutorial.js

@@ -1,4 +1,4 @@
-import { t as r } from "./chunks/tutorial.C9PYfB4z.js";
+import { t as r } from "./chunks/tutorial.BNZh6N3h.js";
 export {
   r as BentoTutorial
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.62.0",
+  "version": "1.63.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2188,125 +2188,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-menu",
-          "description": "Menu component to render a series of buttons. Csan render nested submenus.",
-          "attributes": [
-            {
-              "name": "button",
-              "description": "Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoMenuButtonProps"
-              },
-              "default": "() =>\n    (({\n        variant: 'secondary'\n    }) as BentoMenuButtonProps)"
-            },
-            {
-              "name": "closeMenuOnItemSelect",
-              "description": "Controls if the menu should close when an item is clicked.\nDefaults to `true`.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "name": "data",
-              "required": true,
-              "description": "The data to be displayed in the list",
-              "value": {
-                "kind": "expression",
-                "type": "BentoMenuItem[]"
-              }
-            },
-            {
-              "name": "disableArrowDownOpeningMenu",
-              "description": "Disables opening the menu when the down arrow key is pressed.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "menuPosition",
-              "description": "The position of where the menu should open.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoPopoverPositions | `${BentoPopoverPositions}`"
-              },
-              "default": "BentoPopoverPositions.BOTTOM_START"
-            },
-            {
-              "name": "menuFixedPositioning",
-              "description": "Instructs the menu popover to be visible outside of the containing container.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "menuWidth",
-              "description": "Sets a custom width for the menu popover.",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "null"
-            },
-            {
-              "name": "revertFocusToButton",
-              "description": "Returns focus to the menu button after popover is closed.\nDisable if focus management is delegated to the parent component.\nDefaults to `true`.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "name": "teleport",
-              "description": "Can be used to set the inner teleport component to render the menu's popover in the root `body` DOM node\n(or `dialog` if popover is inside a dialog).",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "closeOnClickOutsideOptions",
-              "description": "Can be used to set the inner teleport component to render the menu's popover in the root `body` DOM node\n(or `dialog` if popover is inside a dialog).",
-              "value": {
-                "kind": "expression",
-                "type": "OnClickOutsideOptions"
-              },
-              "default": "undefined"
-            }
-          ],
-          "events": [
-            {
-              "name": "menu-item-click"
-            },
-            {
-              "name": "click-outside"
-            }
-          ],
-          "slots": [
-            {
-              "name": "iconLeft"
-            },
-            {
-              "name": "default"
-            },
-            {
-              "name": "iconRight"
-            }
-          ],
-          "source": {
-            "module": "./src/components/menu/menu.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-popover-dismiss-button",
           "description": "",
@@ -3457,6 +3338,16 @@
               },
               "default": "BentoCardBackground.PRIMARY"
             },
+            {
+              "name": "clickable",
+              "required": false,
+              "description": "Makes the whole card clickable",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "closed",
               "required": false,
@@ -9615,6 +9506,46 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "listbox-decorative-checkbox",
+          "description": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "Setting this property to true will disable the checkbox in your form.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "indeterminate",
+              "required": false,
+              "description": "The :indeterminate CSS pseudo-class represents any form element\nwhose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\nset to true, radio buttons which are members of a group in which all radio buttons are unchecked,\nand indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\nThis property lets you control the input.indeterminate native property.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "checked",
+              "required": false,
+              "description": "Setting this to true will show the checkbox as checked",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/listbox/components/listbox-multi-select/components/listbox-decorative-checkbox/listbox-decorative-checkbox.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "listbox-multi-select",
           "description": "",
@@ -9893,6 +9824,131 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "menu",
+          "description": "",
+          "attributes": [
+            {
+              "name": "button",
+              "required": false,
+              "description": "Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoMenuButtonProps"
+              },
+              "default": "() => ({\n    variant: 'secondary',\n})"
+            },
+            {
+              "name": "closeMenuOnItemSelect",
+              "required": false,
+              "description": "Controls if the menu should close when an item is clicked.\nDefaults to `true`.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "name": "data",
+              "required": true,
+              "description": "The data to be displayed in the list",
+              "value": {
+                "kind": "expression",
+                "type": "Array"
+              }
+            },
+            {
+              "name": "disableArrowDownOpeningMenu",
+              "required": false,
+              "description": "Disables opening the menu when the down arrow key is pressed.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "menuPosition",
+              "required": false,
+              "description": "The position of where the menu should open.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoPopoverPositions.BOTTOM_START"
+            },
+            {
+              "name": "menuFixedPositioning",
+              "required": false,
+              "description": "Instructs the menu popover to be visible outside of the containing container.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "menuWidth",
+              "required": false,
+              "description": "Sets a custom width for the menu popover.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            },
+            {
+              "name": "revertFocusToButton",
+              "required": false,
+              "description": "Returns focus to the menu button after popover is closed.\nDisable if focus management is delegated to the parent component.\nDefaults to `true`.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "name": "teleport",
+              "required": false,
+              "description": "Can be used to set the inner teleport component to render the menu's popover in the root `body` DOM node\n(or `dialog` if popover is inside a dialog).",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "closeOnClickOutsideOptions",
+              "required": false,
+              "description": "Can be used to set the inner teleport component to render the menu's popover in the root `body` DOM node\n(or `dialog` if popover is inside a dialog).",
+              "value": {
+                "kind": "expression",
+                "type": "OnClickOutsideOptions"
+              },
+              "default": "undefined"
+            }
+          ],
+          "events": [
+            {
+              "name": "menu-item-click"
+            },
+            {
+              "name": "click-outside"
+            }
+          ],
+          "slots": [
+            {
+              "name": "iconLeft"
+            },
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/menu/menu.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "menu-item",
           "description": "Menu item component to render items in a menu. For internal use only.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue2",
-  "version": "1.62.0",
+  "version": "1.63.0",
   "description": "Adyen Bento Vue2 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -46,7 +46,7 @@
     "unified": "11.0.5",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.62.0"
+    "@adyen/bento-design-tokens": "1.63.0"
   },
   "peerDependencies": {
     "vue": "~2.7",
@@ -123,7 +123,7 @@
     "tsc-alias": "1.8.11",
     "typescript": "5.6.3",
     "typescript-eslint": "8.16.0",
-    "vite": "5.4.19",
+    "vite": "5.4.20",
     "vite-plugin-dynamic-import": "1.5.0",
     "vite-plugin-static-copy": "0.15.0",
     "vitest": "2.1.9",
@@ -136,11 +136,11 @@
     "vue-style-loader": "4.1.3",
     "vue-template-compiler": "2.7.16",
     "vue-tsc": "1.0.24",
-    "@adyen/bento-cli": "0.4.0",
+    "@adyen/bento-cli": "0.4.1",
     "@adyen/bento-core": "0.0.1",
-    "@adyen/bento-tailwind": "0.4.0",
-    "@adyen/ui-assets-icons-16": "6.4.0",
-    "@adyen/ui-assets-payment-method-icons": "9.3.0"
+    "@adyen/ui-assets-icons-16": "6.4.1",
+    "@adyen/ui-assets-payment-method-icons": "9.3.1",
+    "@adyen/bento-tailwind": "0.4.1"
   },
   "optionalDependencies": {
     "vue-router": "~3.6"

package/dist/chunks/card.Cu6MicVI.js

@@ -1,123 +0,0 @@
-import { defineComponent as T, useSlots as I, ref as C, watch as h, computed as n } from "vue";
-import { B as H } from "./typography.J1v_SPG3.js";
-import { C as D, a as M } from "./chevron-up.CHK1E4p9.js";
-import { u as U } from "./use-expandable-content-height.GkjjbmPy.js";
-import { u as R } from "./use-has-slot.C9lQZ6nz.js";
-import { g as z } from "./generate-uid.NJ8tVoha.js";
-import { u as O } from "./i18n.BQkEbtPM.js";
-import { o as W } from "./resize.Bqks3WUm.js";
-import { c as F, B as N } from "./button-actions._OIvTdKt.js";
-import { n as P } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/card.css";
-var f = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o))(f || {}), c = /* @__PURE__ */ ((o) => (o.DEFAULT = "default", o.SMALL = "small", o))(c || {});
-const Y = {
-  "en-US": {
-    hideContent: "Hide content",
-    showContent: "Show content"
-  },
-  "ja-JP": {
-    hideContent: "コンテンツを非表示",
-    showContent: "コンテンツを表示"
-  },
-  "pt-BR": {
-    hideContent: "Ocultar conteúdo",
-    showContent: "Mostrar conteúdo"
-  }
-}, j = {
-  i18n: { messages: Y },
-  name: "bento-card"
-}, J = /* @__PURE__ */ T({
-  ...j,
-  props: {
-    actions: { default: null },
-    actionsLayout: { default: F.BUTTONS_END },
-    background: { default: f.PRIMARY },
-    closed: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    expandable: { type: Boolean, default: !1 },
-    titleSize: { default: c.DEFAULT }
-  },
-  emits: ["click", "expanded"],
-  setup(o, { emit: e }) {
-    const a = o, { t } = O(), s = I(), d = R(s), i = C(null), x = z("card"), r = C(!a.closed);
-    h(
-      () => a.closed,
-      (l) => {
-        r.value = !l;
-      }
-    );
-    const p = n(() => d("default") || d("description") || d("header")), g = n(() => d("default") || d("header")), b = n(
-      () => {
-        var l;
-        return (d("content") || ((l = a.actions) == null ? void 0 : l.length)) && (!a.expandable || a.expandable && r.value);
-      }
-    ), y = n(() => a.expandable && !a.disabled ? 0 : -1), v = n(() => ({
-      [`b-card--${a.background}`]: a.background,
-      "b-card--expandable": a.expandable,
-      "b-card--disabled": a.expandable && a.disabled
-    })), m = n(() => ({
-      "b-card__header--expandable": a.expandable,
-      "b-card__header--without-body": !a.expandable && !b.value
-    })), w = n(() => ({
-      "b-card__toggle--small-text": a.titleSize === c.SMALL
-    })), S = n(() => ({
-      "b-card__body--expandable": a.expandable && d("content"),
-      "b-card__body--without-header": !a.expandable && !p.value
-    })), k = n(() => ({
-      "b-card__content--without-header": !a.expandable && !p.value,
-      "b-card__content--expandable": a.expandable
-    })), B = n(() => {
-      const l = !a.expandable && a.actions && !d("content");
-      return {
-        "b-card__actions--without-content": l,
-        "b-card__actions--without-content-and-with-header": l && p.value
-      };
-    }), A = n(() => ({
-      "b-card__title-wrapper--truncated": d("header")
-    })), E = n(
-      () => ({
-        el: "div",
-        variant: a.titleSize === c.DEFAULT ? "title" : "body",
-        strongest: a.titleSize === c.SMALL,
-        wide: a.titleSize === c.SMALL
-      })
-    ), { updateContentHeight: _, contentHeight: u } = U(i, r), L = n(
-      () => a.expandable && u.value ? { "max-height": u.value } : {}
-    );
-    return h(
-      () => i.value,
-      () => {
-        let l = null;
-        !l && i.value && (l = W(i.value, () => {
-          i.value && _();
-        }));
-      }
-    ), { __sfc: !0, t, slots: s, hasSlot: d, props: a, emit: e, contentDiv: i, cardId: x, showContent: r, showHeader: p, showTitleWrapper: g, showCardBody: b, tabIndex: y, cardConditionalClasses: v, cardHeaderConditionalClasses: m, cardToggleConditionalClasses: w, cardBodyConditionalClasses: S, cardContentConditionalClasses: k, cardActionsConditionalClasses: B, cardTitleWrapperConditionalClasses: A, typography: E, updateContentHeight: _, contentHeight: u, contentMaxHeight: L, toggleExpansion: () => {
-      !a.disabled && a.expandable && (r.value = !r.value, e("expanded", r.value), _());
-    }, onClick: () => {
-      a.disabled || e("click");
-    }, BentoTypography: H, BentoButtonActions: N, ChevronDownIcon: M, ChevronUpIcon: D };
-  }
-});
-var q = function() {
-  var e = this, a = e._self._c, t = e._self._setupProxy;
-  return a("div", { staticClass: "b-card", class: t.cardConditionalClasses, attrs: { "data-testid": "card" }, on: { click: t.onClick } }, [t.hasSlot("image") ? a("div", { staticClass: "b-card__image" }, [e._t("image")], 2) : e._e(), t.showHeader ? a("div", { staticClass: "b-card__header", class: t.cardHeaderConditionalClasses, attrs: { tabindex: t.tabIndex, "aria-controls": e.expandable ? t.cardId : null, "aria-expanded": e.expandable ? `${t.showContent}` : null, role: e.expandable ? "button" : null }, on: { click: t.toggleExpansion, keypress: [function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : t.toggleExpansion.apply(null, arguments);
-  }, function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "space", 32, s.key, [" ", "Spacebar"]) ? null : t.toggleExpansion.apply(null, arguments);
-  }] } }, [a("div", { staticClass: "b-card__header-wrapper" }, [t.showTitleWrapper ? a("div", { staticClass: "b-card__header-slot-wrapper" }, [a("div", { staticClass: "b-card__title-wrapper", class: t.cardTitleWrapperConditionalClasses }, [e.expandable ? a("div", { staticClass: "b-card__toggle", class: t.cardToggleConditionalClasses }, [t.showContent ? a(t.ChevronUpIcon, { attrs: { "svg-title": t.t("hideContent"), "aria-hidden": "true" } }) : a(t.ChevronDownIcon, { attrs: { "svg-title": t.t("showContent"), "aria-hidden": "true" } })], 1) : e._e(), t.hasSlot("default") ? a(t.BentoTypography, e._b({ staticClass: "b-card__title" }, "bento-typography", t.typography, !1), [e._t("default")], 2) : e._e()], 1), t.hasSlot("header") ? [e._t("header")] : e._e()], 2) : e._e(), t.hasSlot("description") ? a(t.BentoTypography, { staticClass: "b-card__description", attrs: { el: "div", variant: "body" } }, [e._t("description")], 2) : e._e()], 1)]) : e._e(), a("Transition", { attrs: { name: "b-card__animation" } }, [t.showCardBody ? a("div", { staticClass: "b-card__wrapper", style: t.contentMaxHeight }, [a("div", { ref: "contentDiv", staticClass: "b-card__body", class: t.cardBodyConditionalClasses, attrs: { id: e.expandable ? t.cardId : null } }, [t.hasSlot("content") ? a("div", { staticClass: "b-card__content", class: t.cardContentConditionalClasses }, [e._t("content")], 2) : e._e(), e.actions ? a("div", { staticClass: "b-card__actions", class: t.cardActionsConditionalClasses }, [a(t.BentoButtonActions, { attrs: { actions: e.actions, layout: e.actionsLayout } })], 1) : e._e()])]) : e._e()])], 1);
-}, G = [], K = /* @__PURE__ */ P(
-  J,
-  q,
-  G,
-  !1,
-  null,
-  "5fb61a36"
-);
-const la = K.exports;
-export {
-  f as B,
-  c as a,
-  la as c
-};
-//# sourceMappingURL=card.Cu6MicVI.js.map

package/dist/chunks/card.Cu6MicVI.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"card.Cu6MicVI.js","sources":["../../src/components/card/card.types.ts","../../src/components/card/card.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardTitleSize {\n    DEFAULT = 'default',\n    SMALL = 'small',\n}\n","<template>\n    <div class=\"b-card\" :class=\"cardConditionalClasses\" data-testid=\"card\" @click=\"onClick\">\n        <div v-if=\"hasSlot('image')\" class=\"b-card__image\">\n            <slot name=\"image\"></slot>\n        </div>\n        <div\n            v-if=\"showHeader\"\n            class=\"b-card__header\"\n            :class=\"cardHeaderConditionalClasses\"\n            :tabindex=\"tabIndex\"\n            :aria-controls=\"expandable ? cardId : null\"\n            :aria-expanded=\"expandable ? `${showContent}` : null\"\n            :role=\"expandable ? 'button' : null\"\n            @click=\"toggleExpansion\"\n            @keypress.enter=\"toggleExpansion\"\n            @keypress.space=\"toggleExpansion\"\n        >\n            <div class=\"b-card__header-wrapper\">\n                <div v-if=\"showTitleWrapper\" class=\"b-card__header-slot-wrapper\">\n                    <div class=\"b-card__title-wrapper\" :class=\"cardTitleWrapperConditionalClasses\">\n                        <div v-if=\"expandable\" class=\"b-card__toggle\" :class=\"cardToggleConditionalClasses\">\n                            <chevron-up-icon v-if=\"showContent\" :svg-title=\"t('hideContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showContent')\" aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n                            <slot />\n                        </bento-typography>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <bento-typography v-if=\"hasSlot('description')\" class=\"b-card__description\" el=\"div\" variant=\"body\">\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <Transition name=\"b-card__animation\">\n            <div v-if=\"showCardBody\" class=\"b-card__wrapper\" :style=\"contentMaxHeight\">\n                <div\n                    :id=\"expandable ? cardId : null\"\n                    ref=\"contentDiv\"\n                    class=\"b-card__body\"\n                    :class=\"cardBodyConditionalClasses\"\n                >\n                    <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n                        <slot name=\"content\" />\n                    </div>\n\n                    <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n                        <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, useSlots, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    // Composables\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n  actions: { default: null },\n  actionsLayout: { default: BentoButtonActionsLayout.BUTTONS_END },\n  background: { default: BentoCardBackground.PRIMARY },\n  closed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  expandable: { type: Boolean, default: false },\n  titleSize: { default: BentoCardTitleSize.DEFAULT }\n});\n\n    const emit = defineEmits([\"click\", \"expanded\"]);\n\n    const contentDiv = ref<HTMLDivElement>(null);\n\n    const cardId = generateUid('card');\n    const showContent = ref(!props.closed);\n    watch(\n        () => props.closed,\n        value => {\n            showContent.value = !value;\n        }\n    );\n    const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n    const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n    const showCardBody = computed(\n        () =>\n            (hasSlot('content') || props.actions?.length) &&\n            (!props.expandable || (props.expandable && showContent.value))\n    );\n    const tabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': props.expandable && props.disabled,\n    }));\n\n    const cardHeaderConditionalClasses = computed(() => ({\n        'b-card__header--expandable': props.expandable,\n        'b-card__header--without-body': !props.expandable && !showCardBody.value,\n    }));\n\n    const cardToggleConditionalClasses = computed(() => ({\n        'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n    }));\n\n    const cardBodyConditionalClasses = computed(() => ({\n        'b-card__body--expandable': props.expandable && hasSlot('content'),\n        'b-card__body--without-header': !props.expandable && !showHeader.value,\n    }));\n\n    const cardContentConditionalClasses = computed(() => ({\n        'b-card__content--without-header': !props.expandable && !showHeader.value,\n        'b-card__content--expandable': props.expandable,\n    }));\n\n    const cardActionsConditionalClasses = computed(() => {\n        const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content');\n\n        return {\n            'b-card__actions--without-content': isNotExpandableWithoutContent,\n            'b-card__actions--without-content-and-with-header': isNotExpandableWithoutContent && showHeader.value,\n        };\n    });\n\n    const cardTitleWrapperConditionalClasses = computed(() => ({\n        'b-card__title-wrapper--truncated': hasSlot('header'),\n    }));\n\n    const typography = computed(\n        () =>\n            ({\n                el: 'div',\n                variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body',\n                strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                wide: props.titleSize === BentoCardTitleSize.SMALL,\n            } as InstanceType<typeof BentoTypography>['$props'])\n    );\n\n    // Toggle open and close logic and animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n    const contentMaxHeight = computed(() =>\n        props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    const toggleExpansion = () => {\n        if (!props.disabled && props.expandable) {\n            showContent.value = !showContent.value;\n            emit('expanded', showContent.value);\n            updateContentHeight();\n        }\n    };\n\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('click');\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A card is a flexible and composable container.\n     * Use cards to represent a single object or to visually group certain content, like legal information within company settings.\n     *\n     * @example\n     * import { BentoCard } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCard },\n     *     template: `\n     *         <bento-card>\n     *             Title of the Card\n     *         </bento-card>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-card',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/card/card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","__default__","messages","useI18n","slots","useSlots","hasSlot","useHasSlot","contentDiv","ref","cardId","generateUid","showContent","props","watch","value","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement","emit"],"mappings":"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"}