@adyen/bento-vue3 1.35.1 → 1.36.0

package/dist/popper-container.js

@@ -1,9 +1,10 @@
-import { P as n, c as a, d as i, a as r, b as p } from "./chunks/popper-container.DFpaesDm.js";
+import { P as r } from "./chunks/popper-container.Cyf6zCPq.js";
+import { b as a, c as i, P as p, a as t } from "./chunks/popper-container.types.BCZMbVFD.js";
 export {
-  n as PopperContainer,
+  r as PopperContainer,
   a as PopperContainerAriaRole,
   i as PopperContainerPosition,
-  r as PopperContainerPositionBasic,
-  p as PopperContainerPositionExtended
+  p as PopperContainerPositionBasic,
+  t as PopperContainerPositionExtended
 };
 //# sourceMappingURL=popper-container.js.map

package/dist/popper-container.js.map

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

package/dist/radio-group.js

@@ -1,4 +1,4 @@
-import { b as t, B as e, a as n } from "./chunks/radio-group.DUtoFXmr.js";
+import { b as t, B as e, a as n } from "./chunks/radio-group.D0khdiFK.js";
 import { R as B } from "./chunks/radio-input.DtvlM-mr.js";
 export {
   t as BentoRadioButton,

package/dist/search-bar.js

@@ -1,5 +1,5 @@
-import { B as r, b as t, a as B } from "./chunks/search-bar.poJCoGD-.js";
-import { u as o } from "./chunks/dropdown.rFZp3hMb.js";
+import { B as r, b as t, a as B } from "./chunks/search-bar.BaqIavRd.js";
+import { u as o } from "./chunks/dropdown.CPlvW43f.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.Dyvd-YBg.js";
+import { s as e } from "./chunks/secondary-nav.eioY-Ac9.js";
 export {
   e as BentoSecondaryNav
 };

package/dist/segmented-control.js

@@ -1,4 +1,4 @@
-import { B as t } from "./chunks/segmented-control.DbR5NYWR.js";
+import { B as t } from "./chunks/segmented-control.CyyCTejh.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.CHBS81j6.js";
+import { B as t, s as a, a as n } from "./chunks/selection-card-group.CJwWtHTD.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.CuQCXV1E.js";
+import { a as n, B as o, s as t } from "./chunks/sidepanel.BGS2yzn-.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.r9TfZmvE.js";
+import { s, B as o } from "./chunks/status.types.DKEdSwK-.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.ClnCjesW.js";
+import { a as p, s as o, B as a, b as n } from "./chunks/step.DQtYDLoP.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.1A2sjhP4.js";
+import { B as r, a as o } from "./chunks/structured-list-item.Brk3yBPy.js";
 export {
   r as BentoStructuredList,
   o as BentoStructuredListItem

package/dist/styles/bento.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;
@@ -551,6 +551,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);
@@ -559,7 +567,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);
@@ -787,6 +796,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;
@@ -1021,6 +1031,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);
@@ -1152,6 +1163,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/styles/legacy.css

@@ -583,13 +583,22 @@
   --b-tag-padding: 0 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-color: var(--b-color-outline-primary-active);
   --b-tabs-tab-title-hover-color: var(--b-color-label-primary);
   --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-summary-grid-item-amount-secondary-label-padding-left: var(--b-spacer-020);
   --b-summary-grid-item-content-trend-margin-left: var(--b-spacer-040);
@@ -763,6 +772,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-wrapper-gap: var(--b-spacer-090);
   --b-modal-wrapper-padding: var(--b-spacer-090);
   --b-modal-animation-duration: var(--b-animation-duration-moderate);
@@ -969,6 +979,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);
@@ -1114,6 +1125,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/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.CuvUVoQ8.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.DnGuM9Cg.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.xY_6yqmE.js";
+import { B as e, a as s } from "./chunks/tabs.DDfHxVuD.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.RYw4OhWk.js";
+import { B as t, a as e } from "./chunks/tag.DuIxjlwJ.js";
 export {
   t as BentoTag,
   e as BentoTagVariant

package/dist/textarea.js

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

package/dist/toast.js

@@ -1,4 +1,4 @@
-import { t as a } from "./chunks/toast.CIVPmwmU.js";
+import { t as a } from "./chunks/toast.PtFHVFT1.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.8t4flh_3.js";
+import { B as a, b as g, a as s } from "./chunks/toggle.Bsu11Lof.js";
 export {
   a as BentoToggle,
   g as BentoToggleLabelPosition,

package/dist/tutorial.js

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

package/dist/typography.js

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

package/dist/web-types.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue3",
-  "version": "1.35.1",
+  "version": "1.36.0",
   "description": "Adyen Bento Vue 3 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -35,7 +35,7 @@
     "focus-lock": "0.11.0",
     "uuid": "9.0.0",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.35.1"
+    "@adyen/bento-design-tokens": "1.36.0"
   },
   "peerDependencies": {
     "vue": "^3.2.47",

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

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox-input.JdcvpfTa.js","sources":["../../../vue2/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","../../../vue2/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<{\n        /**\n         * Emit that emits the input value\n         */\n        (e: 'update:model-value', value: boolean | Array<string | number>): void;\n    }>();\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","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","props","__props","emit","__emit","disabled","indeterminate","modelValue","readonly","value","toRefs","conditionalClasses","computed","outlineConditionalClasses","isChecked","isCheckboxGroup","item","ariaInvalid","onClick","event","onChange","newValue","newCheckedList","index"],"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;ACLR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;;AARR,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE8M,MAAA;AAAA,MAAe,GAAA;AAAA;;;kMC8KzNC,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7IA,UAAAC,IAAAC,GA4DAC,IAAAC,GAOA,EAAA,UAAAC,GAAA,eAAAC,GAAA,YAAAC,GAAA,UAAAC,GAAA,OAAAC,EAAA,IAAAC,EAAAT,CAAA,GAEAU,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAtB,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,MACqB,CAAA,qBAAAX,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,IACA,EAAA,GAGhEY,IAAAD,EAAA,OAAA;AAAA,MAAkD,CAAA,8BAAAtB,EAAA,SAAA,EAAA,GAAA,CAAAwB,EAAA,SAAA,CAAAb,EAAA;AAAA,MAC6C,CAAA,8BAAAX,EAAA,KAAA,EAAA,GAAAW,EAAA;AAAA,MACzB,CAAA,8BAAAX,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,IACG,EAAA,GAGzEc,IAAAH,EAAA,MAAA,MAAA,QAAAL,EAAA,KAAA,CAAA,GAEAO,IAAAF,EAAA,MACIG,EAAA,QAIAR,EAAA,MAAA,KAAA,CAAAS,MAAAA,MAAAP,EAAA,KAAA,IAHIF,EAAA,KAGiF,GAGzFU,IAAAL,EAAA,MAAAX,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAAA,EAAA,QAAA,GAGAiB,IAAA,CAAAC,MAAA;AACI,UAAAX,EAAA,OAAA;AACI,QAAAW,EAAA,eAAA;AACA;AAAA,MAAA;AAAA,IACJ,GAEJC,IAAA,CAAAD,MAAA;AACI,UAAAd,EAAA;AACI;AAGJ,YAAAgB,IAAAF,EAAA,OAAA;AAEA,UAAAJ,EAAA,OAAA;AACI,cAAAO,IAAA,CAAA,GAAAf,EAAA,KAAA,GACAgB,IAAAD,EAAA,QAAAb,EAAA,KAAA;AAEA,QAAAc,MAAA,KACID,EAAA,KAAAb,EAAA,KAAA,IAEAa,EAAA,OAAAC,GAAA,CAAA,GAEJpB,EAAAX,EAAA,QAAA8B,CAAA;AAAA,MAA8C;AAE9C,QAAAnB,EAAAX,EAAA,QAAA6B,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}