@adyen/bento-vue2 1.35.1 → 1.37.0

package/README.md

@@ -25,6 +25,7 @@ Bento Vue contains foundational Vue 2.x (and Vue 3.x) UI components for shipping
                 -   [Vue 3](#vue-3-2)
                 -   [Using our CDN directly](#using-our-cdn-directly)
             -   [Import CSS variables](#import-css-variables)
+                -   [⚠️ `bento.css` deprecated ⚠️](#️-bentocss-deprecated-️)
                 -   [Vue 2](#vue-2-3)
                 -   [Vue 3](#vue-3-3)
             -   [Initialize `vue-i18n`](#initialize-vue-i18n)
@@ -37,7 +38,8 @@ Bento Vue contains foundational Vue 2.x (and Vue 3.x) UI components for shipping
             -   [Webpack](#webpack)
             -   [Vite](#vite)
         -   [Stylelint](#stylelint)
-    -   [Alternative themes](#alternative-themes)
+    -   [Theming](#theming)
+        -   [⚠️ `BentoTheme.BENTO` deprecated ⚠️](#️-bentothemebento-deprecated-️)
         -   [ADL theme](#adl-theme)
             -   [Set **legacy ADL** theme as default](#set-legacy-adl-theme-as-default)
         -   [Setting themes without the Bento Plugin](#setting-themes-without-the-bento-plugin)
@@ -164,7 +166,11 @@ We currently export the following styles:
 
 NOTE: This way of importing bento styles will be mandatory in Bento 2.X
 
-###### Vue 2
+##### ⚠️ `bento.css` deprecated ⚠️
+
+The `bento.css` stylesheet is deprecated. It will be removed in v2.0.0. Please use the `bento-light.css` instead.
+
+##### Vue 2
 
 ```javascript
 import Vue from 'vue';
@@ -180,7 +186,7 @@ Vue.use(BentoVue, {
 });
 ```
 
-###### Vue 3
+##### Vue 3
 
 ```javascript
 import { createApp } from 'vue';
@@ -425,7 +431,7 @@ extends: [
 ],
 ```
 
-## Alternative themes
+## Theming
 
 Bento components can be themed with both themes provided out-of-the-box and with custom classes applied. At the current
 Bento component support themes. At present, there is only one alternative style provided out of the box: ADL theme (also
@@ -433,6 +439,27 @@ known as Legacy theme).
 
 More extensive out-of-the-box theming support is planned and will come soon.
 
+### ⚠️ `BentoTheme.BENTO` deprecated ⚠️
+
+The `BentoTheme.BENTO` theme enum is deprecated. It will be removed in v2.0.0. Please use the `BentoTheme.BENTO_LIGHT`
+enum or the `b-light-theme` string instead.
+
+Old usage (deprecated)
+
+```typescript
+// plugin
+Vue.use(BentoVue, { theme: BentoTheme.BENTO });
+```
+
+New usage
+
+```typescript
+// plugin
+Vue.use(BentoVue, { theme: BentoTheme.BENTO_LIGHT });
+```
+
+The Bento plugin defaults to `BentoTheme.BENTO_LIGHT` if unset.
+
 ### ADL theme
 
 #### Set **legacy ADL** theme as default

package/dist/@types/index.d.ts

@@ -41,6 +41,8 @@ declare type __VLS_NonUndefinedable_14<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_15<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_16<T> = T extends undefined ? never : T;
+
 declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_3<T> = T extends undefined ? never : T;
@@ -134,6 +136,17 @@ declare type __VLS_TypePropsToRuntimeProps_15<T> = {
           };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_16<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_16<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
 declare type __VLS_TypePropsToRuntimeProps_2<T> = {
     [K in keyof T]-?: {} extends Pick<T, K>
         ? {
@@ -254,6 +267,14 @@ declare type __VLS_WithDefaults_12<P, D> = {
         : P[K];
 };
 
+declare type __VLS_WithDefaults_13<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
 declare type __VLS_WithDefaults_2<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D
         ? P[K] & {
@@ -1943,8 +1964,8 @@ export declare const BentoCheckbox: DefineComponent<
         tag: any;
         optional: boolean;
         errorMessage: string;
-        ariaLabel: string;
         readonly: boolean;
+        ariaLabel: string;
         hasError: boolean;
         indeterminate: boolean;
         modelValue: BentoCheckboxType | BentoCheckboxGroupItems;
@@ -2295,7 +2316,7 @@ export declare enum BentoCheckboxState {
     READONLY = 'readonly',
 }
 
-export declare type BentoCheckboxTag = InstanceType<typeof BentoTag>['$props'];
+export declare type BentoCheckboxTag = BentoTagProps;
 
 export declare type BentoCheckboxType = boolean | BentoMultiCheckboxType;
 
@@ -3687,8 +3708,8 @@ export declare type BentoCurrencyListboxOptions = BentoCurrencyListboxOptionItem
  */
 export declare const BentoDashboardSection: __VLS_WithTemplateSlots_37<
     DefineComponent<
-        __VLS_WithDefaults_12<
-            __VLS_TypePropsToRuntimeProps_15<{
+        __VLS_WithDefaults_13<
+            __VLS_TypePropsToRuntimeProps_16<{
                 /**
                  * The header of the section
                  */
@@ -3712,8 +3733,8 @@ export declare const BentoDashboardSection: __VLS_WithTemplateSlots_37<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_12<
-                    __VLS_TypePropsToRuntimeProps_15<{
+                __VLS_WithDefaults_13<
+                    __VLS_TypePropsToRuntimeProps_16<{
                         /**
                          * The header of the section
                          */
@@ -3771,8 +3792,8 @@ export declare const BentoDashboardSection: __VLS_WithTemplateSlots_37<
  */
 export declare const BentoDashboardTemplate: __VLS_WithTemplateSlots_36<
     DefineComponent<
-        __VLS_WithDefaults_11<
-            __VLS_TypePropsToRuntimeProps_14<{
+        __VLS_WithDefaults_12<
+            __VLS_TypePropsToRuntimeProps_15<{
                 /**
                  * The header that goes to the top of the template
                  */
@@ -3808,8 +3829,8 @@ export declare const BentoDashboardTemplate: __VLS_WithTemplateSlots_36<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_11<
-                    __VLS_TypePropsToRuntimeProps_14<{
+                __VLS_WithDefaults_12<
+                    __VLS_TypePropsToRuntimeProps_15<{
                         /**
                          * The header that goes to the top of the template
                          */
@@ -6049,8 +6070,8 @@ export declare const BentoDropdown: __VLS_WithTemplateSlots_10<
             items: BentoListboxOptions;
             isOptionDisabled: (optionValue: BentoListboxOptionItem) => boolean;
             staticCategories: boolean;
-            ariaLabel: string;
             readonly: boolean;
+            ariaLabel: string;
             hasMoreItems: boolean;
             lazyLoadType: 'button' | 'none' | 'automatic' | BentoListboxLazyLoadType;
             emptyState: BentoListboxEmptyStateProps;
@@ -6355,8 +6376,8 @@ export declare const BentoDropdownAvatar: DefineComponent<
         items: BentoAvatarListboxOptions;
         isOptionDisabled: (optionValue: BentoListboxOptionItem) => boolean;
         staticCategories: boolean;
-        ariaLabel: string;
         readonly: boolean;
+        ariaLabel: string;
         hasMoreItems: boolean;
         lazyLoadType: 'button' | 'none' | 'automatic' | BentoListboxLazyLoadType;
         emptyState: BentoListboxEmptyStateProps;
@@ -6673,8 +6694,8 @@ export declare const BentoDropdownCountry: DefineComponent<
         items: BentoCountryListboxOptions;
         isOptionDisabled: (optionValue: BentoListboxOptionItem) => boolean;
         staticCategories: boolean;
-        ariaLabel: string;
         readonly: boolean;
+        ariaLabel: string;
         hasMoreItems: boolean;
         lazyLoadType: 'button' | 'none' | 'automatic' | BentoListboxLazyLoadType;
         emptyState: BentoListboxEmptyStateProps;
@@ -6972,8 +6993,8 @@ export declare const BentoDropdownCurrency: DefineComponent<
         items: BentoCurrencyListboxOptions;
         isOptionDisabled: (optionValue: BentoListboxOptionItem) => boolean;
         staticCategories: boolean;
-        ariaLabel: string;
         readonly: boolean;
+        ariaLabel: string;
         hasMoreItems: boolean;
         lazyLoadType: 'button' | 'none' | 'automatic' | BentoListboxLazyLoadType;
         emptyState: BentoListboxEmptyStateProps;
@@ -7271,8 +7292,8 @@ export declare const BentoDropdownPaymentMethod: DefineComponent<
         items: BentoPaymentMethodListboxOptions;
         isOptionDisabled: (optionValue: BentoListboxOptionItem) => boolean;
         staticCategories: boolean;
-        ariaLabel: string;
         readonly: boolean;
+        ariaLabel: string;
         hasMoreItems: boolean;
         lazyLoadType: 'button' | 'none' | 'automatic' | BentoListboxLazyLoadType;
         emptyState: BentoListboxEmptyStateProps;
@@ -7578,8 +7599,8 @@ export declare const BentoDropdownTag: DefineComponent<
         items: BentoTagListboxOptions;
         isOptionDisabled: (optionValue: BentoListboxOptionItem) => boolean;
         staticCategories: boolean;
-        ariaLabel: string;
         readonly: boolean;
+        ariaLabel: string;
         hasMoreItems: boolean;
         lazyLoadType: 'button' | 'none' | 'automatic' | BentoListboxLazyLoadType;
         emptyState: BentoListboxEmptyStateProps;
@@ -9183,8 +9204,8 @@ export declare const BentoInputField: __VLS_WithTemplateSlots_16<
             tooltipText: string;
             optional: boolean;
             errorMessage: string;
-            ariaLabel: string;
             readonly: boolean;
+            ariaLabel: string;
             placeholder: string;
             dropdown: BentoInputDropdownProps;
             ariaHidden: boolean;
@@ -13363,7 +13384,7 @@ export declare interface BentoSearchBarItem {
  * }
  */
 export declare const BentoSecondaryNav: DefineComponent<
-    __VLS_TypePropsToRuntimeProps_8<{
+    __VLS_TypePropsToRuntimeProps_9<{
         /**
          * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },
          * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.
@@ -13387,7 +13408,7 @@ export declare const BentoSecondaryNav: DefineComponent<
     string,
     Readonly<
         ExtractPropTypes<
-            __VLS_TypePropsToRuntimeProps_8<{
+            __VLS_TypePropsToRuntimeProps_9<{
                 /**
                  * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },
                  * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.
@@ -13437,8 +13458,8 @@ export declare interface BentoSecondaryNavState {
  * }
  */
 export declare const BentoSegmentedControl: DefineComponent<
-    __VLS_WithDefaults_8<
-        __VLS_TypePropsToRuntimeProps_9<{
+    __VLS_WithDefaults_9<
+        __VLS_TypePropsToRuntimeProps_10<{
             /**
              * Accessible name describing the segmented control.
              * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -13479,8 +13500,8 @@ export declare const BentoSegmentedControl: DefineComponent<
     string,
     Readonly<
         ExtractPropTypes<
-            __VLS_WithDefaults_8<
-                __VLS_TypePropsToRuntimeProps_9<{
+            __VLS_WithDefaults_9<
+                __VLS_TypePropsToRuntimeProps_10<{
                     /**
                      * Accessible name describing the segmented control.
                      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -14470,7 +14491,7 @@ export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_28<
  */
 export declare const BentoStatus: __VLS_WithTemplateSlots_30<
     DefineComponent<
-        __VLS_TypePropsToRuntimeProps_10<{
+        __VLS_TypePropsToRuntimeProps_11<{
             variant: BentoStatusVariant | `${BentoStatusVariant}`;
         }>,
         {},
@@ -14483,7 +14504,7 @@ export declare const BentoStatus: __VLS_WithTemplateSlots_30<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_TypePropsToRuntimeProps_10<{
+                __VLS_TypePropsToRuntimeProps_11<{
                     variant: BentoStatusVariant | `${BentoStatusVariant}`;
                 }>
             >
@@ -14731,8 +14752,8 @@ export declare enum BentoStepperVariantOption {
  */
 export declare const BentoStructuredList: __VLS_WithTemplateSlots_33<
     DefineComponent<
-        __VLS_WithDefaults_9<
-            __VLS_TypePropsToRuntimeProps_11<{
+        __VLS_WithDefaults_10<
+            __VLS_TypePropsToRuntimeProps_12<{
                 /**
                  * Width of the labels container, in pixels. Overrides layout prop.
                  */
@@ -14766,8 +14787,8 @@ export declare const BentoStructuredList: __VLS_WithTemplateSlots_33<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_9<
-                    __VLS_TypePropsToRuntimeProps_11<{
+                __VLS_WithDefaults_10<
+                    __VLS_TypePropsToRuntimeProps_12<{
                         /**
                          * Width of the labels container, in pixels. Overrides layout prop.
                          */
@@ -14830,7 +14851,7 @@ export declare const BentoStructuredList: __VLS_WithTemplateSlots_33<
  */
 export declare const BentoStructuredListItem: __VLS_WithTemplateSlots_34<
     DefineComponent<
-        __VLS_TypePropsToRuntimeProps_12<{
+        __VLS_TypePropsToRuntimeProps_13<{
             /**
              * Label to display for the value
              */
@@ -14866,7 +14887,7 @@ export declare const BentoStructuredListItem: __VLS_WithTemplateSlots_34<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_TypePropsToRuntimeProps_12<{
+                __VLS_TypePropsToRuntimeProps_13<{
                     /**
                      * Label to display for the value
                      */
@@ -15836,6 +15857,13 @@ export declare type BentoSummaryGridLayout = () => {
 
 export declare const BentoTab: DefineComponent<
     {
+        /**
+         * Displays a counter next to the tab title
+         */
+        counter: {
+            type: NumberConstructor;
+            default: any;
+        };
         /**
          * Title of the tab
          */
@@ -15872,6 +15900,13 @@ export declare const BentoTab: DefineComponent<
     string,
     Readonly<
         ExtractPropTypes<{
+            /**
+             * Displays a counter next to the tab title
+             */
+            counter: {
+                type: NumberConstructor;
+                default: any;
+            };
             /**
              * Title of the tab
              */
@@ -15897,6 +15932,7 @@ export declare const BentoTab: DefineComponent<
     >,
     {
         disabled: boolean;
+        counter: number;
         withNotificationIndicator: boolean;
     }
 >;
@@ -15906,6 +15942,7 @@ declare interface BentoTab_2 {
     id: string;
     title: MaybeRef<string>;
     withNotificationIndicator: Ref<boolean>;
+    counter: Ref<number>;
 }
 
 /**
@@ -16050,39 +16087,15 @@ declare enum BentoTabsEvent {
 }
 
 export declare const BentoTag: DefineComponent<
-    {
-        /**
-         * The label text content of the Tag.
-         */
-        label: {
-            type: StringConstructor;
-            default: any;
-        };
-        /**
-         * The variant variant of tag
-         */
-        variant: {
-            type: PropType<BentoTagVariant | `${BentoTagVariant}`>;
-            default: BentoTagVariant;
-            validator: (value: BentoTagVariant) => boolean;
-        };
-        /**
-         * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots "...".
-         */
-        truncate: {
-            type: NumberConstructor;
-            default: any;
-        };
-    },
-    {
-        computedAriaLabel: ComputedRef<string>;
-        textFromSlot: ComputedRef<string>;
-        formattedText: ComputedRef<string>;
-        tagConditionalClasses: ComputedRef<{
-            [x: string]: 'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant;
-        }>;
-        shouldShowTooltip: ComputedRef<boolean>;
-    },
+    __VLS_WithDefaults_8<
+        __VLS_TypePropsToRuntimeProps_8<BentoTagProps>,
+        {
+            label: any;
+            truncate: any;
+            variant: BentoTagVariant;
+        }
+    >,
+    {},
     {},
     {},
     {},
@@ -16091,34 +16104,20 @@ export declare const BentoTag: DefineComponent<
     {},
     string,
     Readonly<
-        ExtractPropTypes<{
-            /**
-             * The label text content of the Tag.
-             */
-            label: {
-                type: StringConstructor;
-                default: any;
-            };
-            /**
-             * The variant variant of tag
-             */
-            variant: {
-                type: PropType<BentoTagVariant | `${BentoTagVariant}`>;
-                default: BentoTagVariant;
-                validator: (value: BentoTagVariant) => boolean;
-            };
-            /**
-             * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots "...".
-             */
-            truncate: {
-                type: NumberConstructor;
-                default: any;
-            };
-        }>
+        ExtractPropTypes<
+            __VLS_WithDefaults_8<
+                __VLS_TypePropsToRuntimeProps_8<BentoTagProps>,
+                {
+                    label: any;
+                    truncate: any;
+                    variant: BentoTagVariant;
+                }
+            >
+        >
     >,
     {
         label: string;
-        variant: 'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant;
+        variant: BentoTagVariant | `${BentoTagVariant}`;
         truncate: number;
     }
 >;
@@ -16129,6 +16128,21 @@ export declare type BentoTagListboxOptionItem = OmitStrict<BentoListboxOptionIte
 
 export declare type BentoTagListboxOptions = BentoTagListboxOptionItem[];
 
+export declare interface BentoTagProps {
+    /**
+     * The label text content of the Tag.
+     */
+    label?: string;
+    /**
+     * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots "...".
+     */
+    truncate?: number;
+    /**
+     * The variant variant of tag
+     */
+    variant?: BentoTagVariant | `${BentoTagVariant}`;
+}
+
 /**
  * @deprecated for usage with properties since version 2.0. Use the string literal instead.
  */
@@ -16390,8 +16404,8 @@ export declare const BentoTextarea: DefineComponent<
         tooltipText: string;
         optional: boolean;
         errorMessage: string;
-        ariaLabel: string;
         readonly: boolean;
+        ariaLabel: string;
         placeholder: string;
         clearable: boolean;
         characterLimit: number;
@@ -16412,7 +16426,13 @@ declare enum BentoTextareaResizeOption {
 export declare enum BentoTheme {
     LEGACY = 'b-legacy-theme',
     STYLEGUIDE = 'b-styleguide-theme',
+    /**
+     * @deprecated in favor of {@link BENTO_LIGHT}. To be removed in v2.0.0.
+     */
     BENTO = '',
+    BENTO_LIGHT = 'b-light-theme',
+    BENTO_DARK = 'b-dark-theme',
+    BENTO_SYSTEM = 'b-system',
 }
 
 /**
@@ -16998,8 +17018,8 @@ export declare const BentoToggle: DefineComponent<
     {
         value: boolean;
         disabled: boolean;
-        ariaLabel: string;
         readonly: boolean;
+        ariaLabel: string;
         labelPosition: 'after' | 'before' | BentoToggleLabelPosition;
     }
 >;
@@ -17337,8 +17357,8 @@ export declare interface BentoTutorialStep {
  */
 export declare const BentoTypography: __VLS_WithTemplateSlots_35<
     DefineComponent<
-        __VLS_WithDefaults_10<
-            __VLS_TypePropsToRuntimeProps_13<{
+        __VLS_WithDefaults_11<
+            __VLS_TypePropsToRuntimeProps_14<{
                 /**
                  * Sets the HTML DOM element.
                  * @values h1, h2, h3, h4, h5, h6, div, p, span
@@ -17354,6 +17374,10 @@ export declare const BentoTypography: __VLS_WithTemplateSlots_35<
                  * Applicable to the Title variant.
                  */
                 medium?: boolean;
+                /**
+                 * Adds the rich-text modifier, which allows for the use of HTML tags inside typography.
+                 */
+                richText?: boolean;
                 /**
                  * Adds the stronger class modifier.
                  * Applicable to Caption, Body and Subtitle variants.
@@ -17395,8 +17419,8 @@ export declare const BentoTypography: __VLS_WithTemplateSlots_35<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_10<
-                    __VLS_TypePropsToRuntimeProps_13<{
+                __VLS_WithDefaults_11<
+                    __VLS_TypePropsToRuntimeProps_14<{
                         /**
                          * Sets the HTML DOM element.
                          * @values h1, h2, h3, h4, h5, h6, div, p, span
@@ -17412,6 +17436,10 @@ export declare const BentoTypography: __VLS_WithTemplateSlots_35<
                          * Applicable to the Title variant.
                          */
                         medium?: boolean;
+                        /**
+                         * Adds the rich-text modifier, which allows for the use of HTML tags inside typography.
+                         */
+                        richText?: boolean;
                         /**
                          * Adds the stronger class modifier.
                          * Applicable to Caption, Body and Subtitle variants.
@@ -17853,6 +17881,15 @@ export declare interface ToastStack {
  */
 export declare function toTypedSchema<T extends ZodSchema>(formSchema: T): T;
 
+export declare interface UseBentoTheme {
+    getTheme: () => string;
+    setTheme: (theme: BentoTheme | `${BentoTheme}`) => void;
+}
+
+export declare function useBentoTheme(): UseBentoTheme;
+
+export declare const useBentoThemeKey: unique symbol;
+
 export declare type UseBentoToastController = ToastStack;
 
 export declare function useBentoToastController(): UseBentoToastController;

package/dist/accordion.js

@@ -1,4 +1,4 @@
-import { a as e, b as n } from "./chunks/accordion-item.BDNSykyK.js";
+import { a as e, b as n } from "./chunks/accordion-item.BjXzREaK.js";
 export {
   e as BentoAccordion,
   n as BentoAccordionItem

package/dist/action-bar.js

@@ -1,4 +1,4 @@
-import { B as t } from "./chunks/action-bar.CCVKS1xo.js";
+import { B as t } from "./chunks/action-bar.CjdRoIjd.js";
 export {
   t as BentoActionBar
 };

package/dist/alert.js

@@ -1,4 +1,4 @@
-import { B as a, c as n, b as o, a as r } from "./chunks/alert.CVsckdGC.js";
+import { B as a, c as n, b as o, a as r } from "./chunks/alert.DHu9891u.js";
 export {
   a as BentoAlert,
   n as BentoAlertEvent,

package/dist/assets/accordion-item.css

@@ -1 +1 @@
-.b-accordion[data-v-fb182a1c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-accordion[data-v-fb182a1c],.b-accordion[data-v-fb182a1c]:before,.b-accordion[data-v-fb182a1c]:after{box-sizing:border-box}.b-accordion *[data-v-fb182a1c],.b-accordion *[data-v-fb182a1c]:before,.b-accordion *[data-v-fb182a1c]:after{box-sizing:border-box}.b-accordion[data-v-fb182a1c] ::-webkit-scrollbar{height:14px;width:14px}.b-accordion[data-v-fb182a1c] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-accordion-item[data-v-5ae9b692]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-accordion-item-background-color);border-bottom:var(--b-accordion-item-border)}.b-accordion-item[data-v-5ae9b692],.b-accordion-item[data-v-5ae9b692]:before,.b-accordion-item[data-v-5ae9b692]:after{box-sizing:border-box}.b-accordion-item *[data-v-5ae9b692],.b-accordion-item *[data-v-5ae9b692]:before,.b-accordion-item *[data-v-5ae9b692]:after{box-sizing:border-box}.b-accordion-item[data-v-5ae9b692] ::-webkit-scrollbar{height:14px;width:14px}.b-accordion-item[data-v-5ae9b692] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-accordion-item button[data-v-5ae9b692]{background-color:transparent;border:0;font:inherit;text-align:inherit}.b-accordion-item button[data-v-5ae9b692]:focus-visible{outline:none}.b-legacy-theme .b-accordion-item__heading[data-v-5ae9b692]{font-size:15px;line-height:1.4}.b-accordion-item[data-v-5ae9b692]:first-of-type{border-top:var(--b-accordion-item-border)}.b-accordion-item__button[data-v-5ae9b692]{align-items:center;color:var(--b-accordion-item-button-color);cursor:pointer;display:flex;gap:var(--b-accordion-item-button-gap);padding:var(--b-accordion-item-button-padding);position:relative;width:100%;z-index:0}.b-accordion-item__button[data-v-5ae9b692]:hover{background-color:var(--b-accordion-item-button-hover-background-color)}.b-accordion-item__button[data-v-5ae9b692]:active{background-color:var(--b-accordion-item-button-active-background-color)}.b-accordion-item__button[data-v-5ae9b692]:focus-visible{animation:outer-ring-default-5ae9b692 var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color);outline:none}@keyframes outer-ring-default-5ae9b692{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-accordion-item__content[data-v-5ae9b692]{color:var(--b-accordion-item-content-color);padding:var(--b-accordion-item-content-padding)}.b-accordion-item__animation--content-enter-active[data-v-5ae9b692]{animation:fade-in-u3moigq-5ae9b692 var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear),enter-u3moigq-5ae9b692 var(--b-accordion-item-animation-duration) var(--b-animation-easing-enter),scale-up-u3moigq-5ae9b692 var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear);overflow:hidden;transition:max-height var(--b-accordion-item-animation-duration) var(--b-accordion-item-animation-easing)}@keyframes fade-in-u3moigq-5ae9b692{0%{opacity:0}to{opacity:1}}@keyframes scale-up-u3moigq-5ae9b692{0%{scale:1}to{scale:1}}@keyframes enter-u3moigq-5ae9b692{0%{translate:0 -8px}to{translate:0 0}}.b-accordion-item__animation--content-leave-active[data-v-5ae9b692]{animation:fade-out-u3moih4-5ae9b692 var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear),exit-u3moih4-5ae9b692 var(--b-accordion-item-animation-duration) var(--b-animation-easing-exit),scale-down-u3moih4-5ae9b692 var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear);max-height:0!important;overflow:hidden;transition:max-height var(--b-accordion-item-animation-duration) var(--b-accordion-item-animation-easing)}@keyframes fade-out-u3moih4-5ae9b692{0%{opacity:1}to{opacity:0}}@keyframes scale-down-u3moih4-5ae9b692{0%{scale:1}to{scale:1}}@keyframes exit-u3moih4-5ae9b692{0%{translate:0 0}to{translate:0 -8px}}
+.b-accordion[data-v-fb182a1c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-accordion[data-v-fb182a1c],.b-accordion[data-v-fb182a1c]:before,.b-accordion[data-v-fb182a1c]:after{box-sizing:border-box}.b-accordion *[data-v-fb182a1c],.b-accordion *[data-v-fb182a1c]:before,.b-accordion *[data-v-fb182a1c]:after{box-sizing:border-box}.b-accordion[data-v-fb182a1c] ::-webkit-scrollbar{height:14px;width:14px}.b-accordion[data-v-fb182a1c] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-accordion-item[data-v-66c09812]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-accordion-item-background-color);border-bottom:var(--b-accordion-item-border)}.b-accordion-item[data-v-66c09812],.b-accordion-item[data-v-66c09812]:before,.b-accordion-item[data-v-66c09812]:after{box-sizing:border-box}.b-accordion-item *[data-v-66c09812],.b-accordion-item *[data-v-66c09812]:before,.b-accordion-item *[data-v-66c09812]:after{box-sizing:border-box}.b-accordion-item[data-v-66c09812] ::-webkit-scrollbar{height:14px;width:14px}.b-accordion-item[data-v-66c09812] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-accordion-item button[data-v-66c09812]{background-color:transparent;border:0;font:inherit;text-align:inherit}.b-accordion-item button[data-v-66c09812]:focus-visible{outline:none}.b-legacy-theme .b-accordion-item__heading[data-v-66c09812]{font-size:15px;line-height:1.4}.b-accordion-item[data-v-66c09812]:first-of-type{border-top:var(--b-accordion-item-border)}.b-accordion-item__button[data-v-66c09812]{align-items:center;color:var(--b-accordion-item-button-color);cursor:pointer;display:flex;gap:var(--b-accordion-item-button-gap);padding:var(--b-accordion-item-button-padding);position:relative;width:100%;z-index:0}.b-accordion-item__button[data-v-66c09812]:hover{background-color:var(--b-accordion-item-button-hover-background-color)}.b-accordion-item__button[data-v-66c09812]:active{background-color:var(--b-accordion-item-button-active-background-color)}.b-accordion-item__button[data-v-66c09812]:focus-visible{animation:outer-ring-default-66c09812 var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color);outline:none}@keyframes outer-ring-default-66c09812{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-accordion-item__content[data-v-66c09812]{color:var(--b-accordion-item-content-color);padding:var(--b-accordion-item-content-padding)}.b-accordion-item__animation--content-enter-active[data-v-66c09812]{animation:fade-in-uiiogrs-66c09812 var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear),enter-uiiogrs-66c09812 var(--b-accordion-item-animation-duration) var(--b-animation-easing-enter),scale-up-uiiogrs-66c09812 var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear);overflow:hidden;transition:max-height var(--b-accordion-item-animation-duration) var(--b-accordion-item-animation-easing)}@keyframes fade-in-uiiogrs-66c09812{0%{opacity:0}to{opacity:1}}@keyframes scale-up-uiiogrs-66c09812{0%{scale:1}to{scale:1}}@keyframes enter-uiiogrs-66c09812{0%{translate:0 -8px}to{translate:0 0}}.b-accordion-item__animation--content-leave-active[data-v-66c09812]{animation:fade-out-uiiogs1-66c09812 var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear),exit-uiiogs1-66c09812 var(--b-accordion-item-animation-duration) var(--b-animation-easing-exit),scale-down-uiiogs1-66c09812 var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear);max-height:0!important;overflow:hidden;transition:max-height var(--b-accordion-item-animation-duration) var(--b-accordion-item-animation-easing)}@keyframes fade-out-uiiogs1-66c09812{0%{opacity:1}to{opacity:0}}@keyframes scale-down-uiiogs1-66c09812{0%{scale:1}to{scale:1}}@keyframes exit-uiiogs1-66c09812{0%{translate:0 0}to{translate:0 -8px}}

package/dist/assets/action-bar.css

@@ -1 +1 @@
-.b-action-bar[data-v-be92816e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;bottom:var(--b-action-bar-bottom);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;width:100%;z-index:var(--b-action-bar-z-index)}.b-action-bar[data-v-be92816e],.b-action-bar[data-v-be92816e]:before,.b-action-bar[data-v-be92816e]:after{box-sizing:border-box}.b-action-bar *[data-v-be92816e],.b-action-bar *[data-v-be92816e]:before,.b-action-bar *[data-v-be92816e]:after{box-sizing:border-box}.b-action-bar[data-v-be92816e] ::-webkit-scrollbar{height:14px;width:14px}.b-action-bar[data-v-be92816e] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-action-bar__container[data-v-be92816e]{align-items:center;background-color:var(--b-action-bar-container-background-color);border-radius:var(--b-action-bar-container-border-radius);color:var(--b-action-bar-container-color);display:flex;padding:var(--b-action-bar-container-padding);pointer-events:all;width:var(--b-action-bar-container-width)}@media (min-width: 500px){.b-action-bar__container[data-v-be92816e]{width:auto}}.b-action-bar__close-button[data-v-be92816e]{align-items:center;display:flex;margin-right:var(--b-action-bar-close-button-margin-right-mobile)}@media (min-width: 500px){.b-action-bar__close-button[data-v-be92816e]{margin-right:var(--b-action-bar-close-button-margin-right)}}.b-action-bar__selection[data-v-be92816e]{margin-right:var(--b-action-bar-selection-margin-right-mobile);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-legacy-theme .b-action-bar__selection[data-v-be92816e]{font-weight:600}@media (min-width: 500px){.b-action-bar__selection[data-v-be92816e]{margin-right:var(--b-action-bar-selection-margin-right);width:120px}}@media (min-width: 500px){.b-action-bar--confirmation .b-action-bar__selection[data-v-be92816e]{width:160px}}.b-action-bar__actions[data-v-be92816e]{container-type:normal}.b-action-bar__actions[data-v-be92816e] .b-button-actions__container-wrapper{flex-direction:row}.b-action-bar--extra-spacing[data-v-be92816e]{bottom:var(--b-action-bar-bottom-extra-spacing)}.b-action-bar__animation-enter-active[data-v-be92816e]{animation:fade-in-u3moicl-be92816e var(--b-action-bar-animation-duration) var(--b-animation-easing-linear),enter-u3moicl-be92816e var(--b-action-bar-animation-duration) var(--b-animation-easing-enter),scale-up-u3moicl-be92816e var(--b-action-bar-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-u3moicl-be92816e{0%{opacity:0}to{opacity:1}}@keyframes scale-up-u3moicl-be92816e{0%{scale:.9}to{scale:1}}@keyframes enter-u3moicl-be92816e{0%{translate:0 8px}to{translate:0 0}}.b-action-bar__animation-leave-active[data-v-be92816e]{animation:fade-out-u3moidj-be92816e var(--b-action-bar-animation-duration) var(--b-animation-easing-linear),exit-u3moidj-be92816e var(--b-action-bar-animation-duration) var(--b-animation-easing-exit),scale-down-u3moidj-be92816e var(--b-action-bar-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-out-u3moidj-be92816e{0%{opacity:1}to{opacity:0}}@keyframes scale-down-u3moidj-be92816e{0%{scale:1}to{scale:.9}}@keyframes exit-u3moidj-be92816e{0%{translate:0 0}to{translate:0 8px}}
+.b-action-bar[data-v-be92816e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;bottom:var(--b-action-bar-bottom);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;width:100%;z-index:var(--b-action-bar-z-index)}.b-action-bar[data-v-be92816e],.b-action-bar[data-v-be92816e]:before,.b-action-bar[data-v-be92816e]:after{box-sizing:border-box}.b-action-bar *[data-v-be92816e],.b-action-bar *[data-v-be92816e]:before,.b-action-bar *[data-v-be92816e]:after{box-sizing:border-box}.b-action-bar[data-v-be92816e] ::-webkit-scrollbar{height:14px;width:14px}.b-action-bar[data-v-be92816e] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-action-bar__container[data-v-be92816e]{align-items:center;background-color:var(--b-action-bar-container-background-color);border-radius:var(--b-action-bar-container-border-radius);color:var(--b-action-bar-container-color);display:flex;padding:var(--b-action-bar-container-padding);pointer-events:all;width:var(--b-action-bar-container-width)}@media (min-width: 500px){.b-action-bar__container[data-v-be92816e]{width:auto}}.b-action-bar__close-button[data-v-be92816e]{align-items:center;display:flex;margin-right:var(--b-action-bar-close-button-margin-right-mobile)}@media (min-width: 500px){.b-action-bar__close-button[data-v-be92816e]{margin-right:var(--b-action-bar-close-button-margin-right)}}.b-action-bar__selection[data-v-be92816e]{margin-right:var(--b-action-bar-selection-margin-right-mobile);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-legacy-theme .b-action-bar__selection[data-v-be92816e]{font-weight:600}@media (min-width: 500px){.b-action-bar__selection[data-v-be92816e]{margin-right:var(--b-action-bar-selection-margin-right);width:120px}}@media (min-width: 500px){.b-action-bar--confirmation .b-action-bar__selection[data-v-be92816e]{width:160px}}.b-action-bar__actions[data-v-be92816e]{container-type:normal}.b-action-bar__actions[data-v-be92816e] .b-button-actions__container-wrapper{flex-direction:row}.b-action-bar--extra-spacing[data-v-be92816e]{bottom:var(--b-action-bar-bottom-extra-spacing)}.b-action-bar__animation-enter-active[data-v-be92816e]{animation:fade-in-uiiogmo-be92816e var(--b-action-bar-animation-duration) var(--b-animation-easing-linear),enter-uiiogmo-be92816e var(--b-action-bar-animation-duration) var(--b-animation-easing-enter),scale-up-uiiogmo-be92816e var(--b-action-bar-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-uiiogmo-be92816e{0%{opacity:0}to{opacity:1}}@keyframes scale-up-uiiogmo-be92816e{0%{scale:.9}to{scale:1}}@keyframes enter-uiiogmo-be92816e{0%{translate:0 8px}to{translate:0 0}}.b-action-bar__animation-leave-active[data-v-be92816e]{animation:fade-out-uiiognw-be92816e var(--b-action-bar-animation-duration) var(--b-animation-easing-linear),exit-uiiognw-be92816e var(--b-action-bar-animation-duration) var(--b-animation-easing-exit),scale-down-uiiognw-be92816e var(--b-action-bar-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-out-uiiognw-be92816e{0%{opacity:1}to{opacity:0}}@keyframes scale-down-uiiognw-be92816e{0%{scale:1}to{scale:.9}}@keyframes exit-uiiognw-be92816e{0%{translate:0 0}to{translate:0 8px}}