@adyen/bento-vue2 1.35.1 → 1.36.0

package/dist/styles/styleguide.css

@@ -70,7 +70,7 @@
   --b-textarea-min-width: 200px;
   --b-tabs-notification-dot-width: 7px;
   --b-tabs-notification-dot-height: 7px;
-  --b-tabs-tab-list-height: 26px;
+  --b-tabs-tab-list-height: 30px;
   --b-stepper-step-index-height: 20px;
   --b-stepper-step-index-width: 20px;
   --b-stepper-max-width: 200px;
@@ -606,6 +606,14 @@
   --b-tag-padding: var(--b-spacer-010) var(--b-spacer-040);
   --b-tabs-notification-dot-margin-left: var(--b-spacer-030);
   --b-tabs-notification-dot-background-color: var(--b-color-background-highlight-strong);
+  --b-tabs-counter-hover-color: var(--b-color-label-primary);
+  --b-tabs-counter-disabled-color: var(--b-color-label-disabled);
+  --b-tabs-counter-active-color: var(--b-color-label-primary);
+  --b-tabs-counter-padding: var(--b-spacer-010) var(--b-spacer-020);
+  --b-tabs-counter-margin-left: var(--b-spacer-030);
+  --b-tabs-counter-color: var(--b-color-label-secondary);
+  --b-tabs-counter-border-radius: var(--b-border-radius-s);
+  --b-tabs-counter-background-color: var(--b-color-background-secondary);
   --b-tabs-tab-underline-width: var(--b-spacer-080);
   --b-tabs-tab-underline-height-active: var(--b-border-width-m);
   --b-tabs-tab-underline-height: var(--b-border-width-s);
@@ -614,7 +622,8 @@
   --b-tabs-tab-title-disabled-color: var(--b-color-label-disabled);
   --b-tabs-tab-title-active-color: var(--b-color-label-primary);
   --b-tabs-tab-title-color: var(--b-color-label-secondary);
-  --b-tabs-tab-title-border-radius: var(--b-border-radius-xs);
+  --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-background-color: var(--b-color-background-primary);
   --b-summary-grid-item-amount-secondary-label-padding-left: var(--b-spacer-020);
@@ -842,6 +851,7 @@
   --b-pagination-controls-gap: var(--b-spacer-070);
   --b-pagination-context-margin: 0 var(--b-spacer-060);
   --b-pagination-navigation-small-container-gap: var(--b-spacer-050);
+  --b-pagination-color: var(--b-color-label-primary);
   --b-modal-animation-duration: var(--b-animation-duration-moderate);
   --b-modal-backdrop-background-color: var(--b-color-support-overlay);
   --b-modal-close-button-z-index: 1;
@@ -1076,6 +1086,7 @@
   --b-input-field-label-requirement-color: var(--b-color-label-secondary);
   --b-input-field-label-margin-bottom: var(--b-spacer-040);
   --b-input-field-label-color: var(--b-color-label-primary);
+  --b-info-icon-color: var(--b-color-label-primary);
   --b-header-component-title-margin-top: var(--b-spacer-020);
   --b-header-actions-margin-top: var(--b-spacer-070);
   --b-header-timestamp-margin-block: var(--b-spacer-020);
@@ -1207,6 +1218,7 @@
   --b-empty-state-details-margin-bottom: var(--b-spacer-070);
   --b-empty-state-details-color: var(--b-color-label-secondary);
   --b-empty-state-title-margin-bottom: var(--b-spacer-020);
+  --b-empty-state-title-color: var(--b-color-label-primary);
   --b-dropdown-small-textbox-base-textbox-gap: var(--b-spacer-010);
   --b-dropdown-small-textbox-additional-items-margin: 0 0 0 var(--b-spacer-060);
   --b-dropdown-small-textbox-additional-items-padding: var(--b-spacer-020) var(--b-spacer-030);

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.v0QSLZKT.js";
+import { s as r, a as t, e as a, b as o, c as i, B as n, d as u, f as d } from "./chunks/summary-grid-item-custom.BQ2yEBJL.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.D4ORafqH.js";
+import { B as e, a as s } from "./chunks/tabs.B7Kk-ImN.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.Bo_6RnVE.js";
+import { B as t, a as e } from "./chunks/tag.BBZrfh25.js";
 export {
   t as BentoTag,
   e as BentoTagVariant

package/dist/textarea.js

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

package/dist/toast.js

@@ -1,4 +1,4 @@
-import { t as a } from "./chunks/toast.3LxCDPiT.js";
+import { t as a } from "./chunks/toast.CJqrx4Wv.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.CLgGH4Jr.js";
+import { B as a, b as g, a as s } from "./chunks/toggle.BP8rYGKY.js";
 export {
   a as BentoToggle,
   g as BentoToggleLabelPosition,

package/dist/tutorial.js

@@ -1,4 +1,4 @@
-import { t as r } from "./chunks/tutorial.D64_0i0-.js";
+import { t as r } from "./chunks/tutorial.CNlYyuOZ.js";
 export {
   r 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.CqQaHXhq.js";
+import { B as p, c as e, b as r, a as y } from "./chunks/typography.CwyPJr5u.js";
 export {
   p as BentoTypography,
   e as BentoTypographyElement,

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.35.1",
+  "version": "1.36.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3391,43 +3391,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-tag",
-          "description": "",
-          "attributes": [
-            {
-              "name": "label",
-              "description": "The label text content of the Tag.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "variant",
-              "description": "The variant variant of tag",
-              "value": {
-                "kind": "expression",
-                "type": "BentoTagVariant | `${BentoTagVariant}`"
-              },
-              "default": "BentoTagVariant.GREY"
-            },
-            {
-              "name": "truncate",
-              "description": "The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "null"
-            }
-          ],
-          "source": {
-            "module": "./src/components/tag/tag.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-timeline",
           "description": "Timeline displays a collection of events in a reverse chronological order (newest event is displayed on the top).",
@@ -11341,6 +11304,15 @@
           "name": "tab",
           "description": "",
           "attributes": [
+            {
+              "name": "counter",
+              "description": "Displays a counter next to the tab title",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            },
             {
               "name": "title",
               "required": true,
@@ -11440,6 +11412,46 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "tag",
+          "description": "",
+          "attributes": [
+            {
+              "name": "label",
+              "required": false,
+              "description": "The label text content of the Tag.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "truncate",
+              "required": false,
+              "description": "The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            },
+            {
+              "name": "variant",
+              "required": false,
+              "description": "The variant variant of tag",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoTagVariant.GREY"
+            }
+          ],
+          "source": {
+            "module": "./src/components/tag/tag.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "teleport",
           "description": "",
@@ -11832,7 +11844,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/tooltip/tooltip.vue",
+            "module": "./src/components/internal/tooltip/tooltip.vue",
             "symbol": "default"
           }
         },
@@ -11840,7 +11852,7 @@
           "name": "tooltip.test",
           "description": "",
           "source": {
-            "module": "./src/components/tooltip/tooltip.test.vue",
+            "module": "./src/components/internal/tooltip/tooltip.test.vue",
             "symbol": "default"
           }
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue2",
-  "version": "1.35.1",
+  "version": "1.36.0",
   "description": "Adyen Bento Vue2 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,7 +36,7 @@
     "date-fns": "2.28.0",
     "focus-lock": "0.11.0",
     "uuid": "9.0.0",
-    "@adyen/bento-design-tokens": "1.35.1"
+    "@adyen/bento-design-tokens": "1.36.0"
   },
   "peerDependencies": {
     "vue": "~2.7",

package/dist/chunks/checkbox-input.BH7MGdMj.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox-input.BH7MGdMj.js","sources":["../../src/components/internal/checkbox-input/checkbox-input.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/minus-small.vue","../../src/components/internal/checkbox-input/checkbox-input.vue"],"sourcesContent":["export type MultiCheckboxInputType = Array<string | number>;\nexport type CheckboxInputType = boolean | MultiCheckboxInputType;\n\nexport enum CheckboxInputState {\n    UNCHECKED = 'unchecked',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n}\n\nexport enum CheckboxInputEvent {\n    UPDATE = 'update:model-value',\n}\n\ninterface CheckboxInputGroupItem {\n    value: string | number;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n}\n\nexport type CheckboxInputGroupItems = Array<CheckboxInputGroupItem>;\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M4.25 7.25H11.75V8.75H4.25V7.25Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div class=\"b-checkbox-input\" :class=\"conditionalClasses\">\n        <!-- Don't change order because it matters for CSS. Icons first -->\n        <minus-small-icon v-if=\"indeterminate\" class=\"b-checkbox-input__icon\" svg-title=\"intermediate\" />\n        <checkmark-small-icon v-else-if=\"isChecked\" class=\"b-checkbox-input__icon\" svg-title=\"checked\" />\n        <input\n            :id=\"id\"\n            ref=\"inputRef\"\n            type=\"checkbox\"\n            class=\"b-checkbox-input__outline\"\n            :class=\"outlineConditionalClasses\"\n            :aria-label=\"ariaLabel\"\n            :aria-checked=\"isChecked\"\n            :aria-describedby=\"ariaDescribedby\"\n            :aria-invalid=\"ariaInvalid\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :indeterminate.prop=\"indeterminate\"\n            :value=\"value\"\n            :aria-readonly=\"readonly\"\n            @click=\"onClick\"\n            @change=\"onChange\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, toRefs } from 'vue';\n    import {\n        CheckboxInputEvent,\n        CheckboxInputGroupItems,\n        CheckboxInputState,\n        CheckboxInputType,\n        MultiCheckboxInputType,\n    } from './checkbox-input.types';\n    import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import MinusSmallIcon from '@adyen/ui-assets-icons-16/vue/minus-small';\n\n    const props = defineProps({\n        /**\n         * The aria label associated to the input checkbox.\n         */\n        ariaLabel: { type: String, default: '' },\n\n        /**\n         * An additional string that serves as description for the input checkbox (useful if the component shows a description).\n         */\n        ariaDescribedby: { type: String, default: '' },\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         * Setting this property to true will show the checkbox in error state.\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * Sets the id of the checkbox. Required for accessibility purposes\n         */\n        id: { type: String, default: null },\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<CheckboxInputType | CheckboxInputGroupItems>,\n            default: false,\n        },\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         * 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\n    const emit = defineEmits([\"update:model-value\"]);\n\n    const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n    const conditionalClasses = computed(() => ({\n        [`b-checkbox-input--${CheckboxInputState.DISABLED}`]: props.disabled,\n        [`b-checkbox-input--${CheckboxInputState.READONLY}`]: props.readonly,\n    }));\n\n    const outlineConditionalClasses = computed(() => ({\n        [`b-checkbox-input__outline--${CheckboxInputState.UNCHECKED}`]: !isChecked.value && !props.indeterminate,\n        [`b-checkbox-input__outline--${CheckboxInputState.ERROR}`]: props.hasError,\n        [`b-checkbox-input__outline--${CheckboxInputState.READONLY}`]: props.readonly,\n    }));\n\n    const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n\n    const isChecked = computed(() => {\n        if (!isCheckboxGroup.value) {\n            return modelValue.value as boolean;\n        }\n\n        return (modelValue.value as MultiCheckboxInputType).some(item => item === value.value);\n    });\n\n    const ariaInvalid = computed(() => props.hasError && !props.disabled && !props.readonly);\n\n    // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n    const onClick = (event: Event) => {\n        if (readonly.value) {\n            event.preventDefault();\n            return;\n        }\n    };\n    const onChange = (event: Event) => {\n        if (disabled.value) {\n            return;\n        }\n\n        const newValue: boolean = (event.target as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(modelValue.value as MultiCheckboxInputType)];\n            const index = newCheckedList.indexOf(value.value);\n\n            if (index === -1) {\n                newCheckedList.push(value.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            emit(CheckboxInputEvent.UPDATE, newCheckedList);\n        } else {\n            emit(CheckboxInputEvent.UPDATE, newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component that renders a checkbox input (without label)\n     *\n     * @example\n     * import { BentoCheckboxInput } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCheckboxInput },\n     *     template: `\n     *      <label for=\"checkbox-id\">Your label</label>\n     *      <span id=\"description-id\">Description</span>\n     *      <bento-checkbox-input id=\"checkbox-id\" aria=label=\"Your label\" aria-describedby=\"description-id\" />\n     *     `\n     * }\n     */\n    export default {\n        name: 'checkbox-input',\n        inheritAttrs: false,\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-input.scss\" />\n"],"names":["CheckboxInputState","CheckboxInputState2","CheckboxInputEvent","CheckboxInputEvent2","uuid","_sfc_main$1","__default__","disabled","indeterminate","modelValue","readonly","value","toRefs","props","conditionalClasses","computed","outlineConditionalClasses","isChecked","isCheckboxGroup","item","ariaInvalid","event","newValue","newCheckedList","index","emit"],"mappings":";;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,QAAA,SACAA,EAAA,WAAA,YAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,sBADQA,IAAAD,KAAA,CAAA,CAAA;ACLZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;qBC+JIE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA1EA,EAAA,UAAAC,GAAA,eAAAC,GAAA,YAAAC,GAAA,UAAAC,GAAA,OAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAf,EAAA,QAAA,EAAA,GAAAa,EAAA;AAAA,MACqB,CAAA,qBAAAb,EAAA,QAAA,EAAA,GAAAa,EAAA;AAAA,IACA,EAAA,GAGhEG,IAAAD,EAAA,OAAA;AAAA,MAAkD,CAAA,8BAAAf,EAAA,SAAA,EAAA,GAAA,CAAAiB,EAAA,SAAA,CAAAJ,EAAA;AAAA,MAC6C,CAAA,8BAAAb,EAAA,KAAA,EAAA,GAAAa,EAAA;AAAA,MACzB,CAAA,8BAAAb,EAAA,QAAA,EAAA,GAAAa,EAAA;AAAA,IACG,EAAA,GAGzEK,IAAAH,EAAA,MAAA,MAAA,QAAAN,EAAA,KAAA,CAAA,GAEAQ,IAAAF,EAAA,MACIG,EAAA,QAIAT,EAAA,MAAA,KAAA,CAAAU,MAAAA,MAAAR,EAAA,KAAA,IAHIF,EAAA,KAGiF,GAGzFW,IAAAL,EAAA,MAAAF,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAAA,EAAA,QAAA;gOAGA,CAAAQ,MAAA;AACI,UAAAX,EAAA,OAAA;AACI,QAAAW,EAAA,eAAA;AACA;AAAA,MAAA;AAAA,IACJ,aAEJ,CAAAA,MAAA;AACI,UAAAd,EAAA;AACI;AAGJ,YAAAe,IAAAD,EAAA,OAAA;AAEA,UAAAH,EAAA,OAAA;AACI,cAAAK,IAAA,CAAA,GAAAd,EAAA,KAAA,GACAe,IAAAD,EAAA,QAAAZ,EAAA,KAAA;AAEA,QAAAa,MAAA,KACID,EAAA,KAAAZ,EAAA,KAAA,IAEAY,EAAA,OAAAC,GAAA,CAAA,GAEJC,EAAAvB,EAAA,QAAAqB,CAAA;AAAA,MAA8C;AAE9C,QAAAE,EAAAvB,EAAA,QAAAoB,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}