@adyen/bento-vue2 1.28.0 → 1.29.0

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

@@ -13,6 +13,7 @@ import type { DirectiveHook } from 'vue';
 import { EditorView } from '@codemirror/view';
 import { ExtractComputedReturns } from 'vue/types/v3-component-options';
 import { ExtractPropTypes } from 'vue';
+import type { HTMLAttributes } from 'vue/types/jsx';
 import { Placement } from '@floating-ui/vue';
 import type { PluginObject } from 'vue';
 import { PropType } from 'vue';
@@ -37,6 +38,10 @@ declare type __VLS_NonUndefinedable_12<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_13<T> = T extends undefined ? never : T;
 
+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_2<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_3<T> = T extends undefined ? never : T;
@@ -108,6 +113,28 @@ declare type __VLS_TypePropsToRuntimeProps_13<T> = {
           };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_14<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_14<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_15<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_15<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
 declare type __VLS_TypePropsToRuntimeProps_2<T> = {
     [K in keyof T]-?: {} extends Pick<T, K>
         ? {
@@ -212,6 +239,22 @@ declare type __VLS_WithDefaults_10<P, D> = {
         : P[K];
 };
 
+declare type __VLS_WithDefaults_11<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
+declare type __VLS_WithDefaults_12<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] & {
@@ -462,6 +505,12 @@ declare type __VLS_WithTemplateSlots_37<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_38<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_4<T, S> = T & {
     new (): {
         $slots: S;
@@ -930,6 +979,84 @@ export declare enum BentoAlertVariant {
     TIP = 'tip',
 }
 
+/**
+ * Displays an user profile including an avatar and optionally a label.
+ *
+ * @example
+ * import { BentoAvatar } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoAvatar },
+ *     template: `<bento-avatar :src="userAvatarSrc" username="Jane" />`
+ * }
+ */
+export declare const BentoAvatar: DefineComponent<
+    __VLS_WithDefaults_2<
+        __VLS_TypePropsToRuntimeProps_2<{
+            /**
+             * Displays the user profile without the label.
+             */
+            iconOnly?: boolean;
+            /**
+             * Image src to load the profile picture.
+             */
+            src?: string;
+            /**
+             * Name of the user that will be used both in the label and to extract initials to display default value.
+             * John => J
+             * John Smith => JS
+             * John Smith Doe => JD
+             * John Smith Doe Holly => JH
+             */
+            username: string;
+        }>,
+        {
+            iconOnly: boolean;
+            src: any;
+        }
+    >,
+    {},
+    {},
+    {},
+    {},
+    ComponentOptionsMixin,
+    ComponentOptionsMixin,
+    {},
+    string,
+    Readonly<
+        ExtractPropTypes<
+            __VLS_WithDefaults_2<
+                __VLS_TypePropsToRuntimeProps_2<{
+                    /**
+                     * Displays the user profile without the label.
+                     */
+                    iconOnly?: boolean;
+                    /**
+                     * Image src to load the profile picture.
+                     */
+                    src?: string;
+                    /**
+                     * Name of the user that will be used both in the label and to extract initials to display default value.
+                     * John => J
+                     * John Smith => JS
+                     * John Smith Doe => JD
+                     * John Smith Doe Holly => JH
+                     */
+                    username: string;
+                }>,
+                {
+                    iconOnly: boolean;
+                    src: any;
+                }
+            >
+        >
+    >,
+    {
+        src: string;
+        iconOnly: boolean;
+    }
+>;
+
 export declare type BentoAvatarListboxOptionItem = Omit<BentoListboxOptionItem, 'data'> & {
     src?: string;
 };
@@ -1392,8 +1519,8 @@ export declare enum BentoButtonVariant {
  */
 export declare const BentoCard: __VLS_WithTemplateSlots_11<
     DefineComponent<
-        __VLS_WithDefaults_4<
-            __VLS_TypePropsToRuntimeProps_4<{
+        __VLS_WithDefaults_5<
+            __VLS_TypePropsToRuntimeProps_5<{
                 /**
                  * List of actions that will be used to render the buttons.
                  * First element in the list will be rendered as "primary".
@@ -1476,8 +1603,8 @@ export declare const BentoCard: __VLS_WithTemplateSlots_11<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_4<
-                    __VLS_TypePropsToRuntimeProps_4<{
+                __VLS_WithDefaults_5<
+                    __VLS_TypePropsToRuntimeProps_5<{
                         /**
                          * List of actions that will be used to render the buttons.
                          * First element in the list will be rendered as "primary".
@@ -1684,7 +1811,7 @@ export declare const BentoCheckbox: DefineComponent<
                 Readonly<
                     Partial<{
                         label: string;
-                        variant: 'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant;
+                        variant: 'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant;
                         truncate: number;
                     }> &
                         Omit<
@@ -1696,7 +1823,7 @@ export declare const BentoCheckbox: DefineComponent<
                                     };
                                     variant: {
                                         type: PropType<
-                                            'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant
+                                            'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant
                                         >;
                                         default: BentoTagVariant;
                                         validator: (value: BentoTagVariant) => boolean;
@@ -1714,7 +1841,7 @@ export declare const BentoCheckbox: DefineComponent<
                                 };
                                 variant: {
                                     type: PropType<
-                                        'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant
+                                        'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant
                                     >;
                                     default: BentoTagVariant;
                                     validator: (value: BentoTagVariant) => boolean;
@@ -1854,7 +1981,7 @@ export declare const BentoCheckbox: DefineComponent<
                     Readonly<
                         Partial<{
                             label: string;
-                            variant: 'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant;
+                            variant: 'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant;
                             truncate: number;
                         }> &
                             Omit<
@@ -1866,7 +1993,7 @@ export declare const BentoCheckbox: DefineComponent<
                                         };
                                         variant: {
                                             type: PropType<
-                                                'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant
+                                                'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant
                                             >;
                                             default: BentoTagVariant;
                                             validator: (value: BentoTagVariant) => boolean;
@@ -1884,7 +2011,7 @@ export declare const BentoCheckbox: DefineComponent<
                                     };
                                     variant: {
                                         type: PropType<
-                                            'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant
+                                            'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant
                                         >;
                                         default: BentoTagVariant;
                                         validator: (value: BentoTagVariant) => boolean;
@@ -2070,7 +2197,7 @@ export declare const BentoCheckboxGroup: DefineComponent<
          * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.
          */
         variant: {
-            type: PropType<'horizontal' | 'vertical' | BentoCheckboxGroupVariant>;
+            type: PropType<'vertical' | 'horizontal' | BentoCheckboxGroupVariant>;
             default: BentoCheckboxGroupVariant;
             validator: (value: BentoCheckboxGroupVariant) => boolean;
         };
@@ -2215,7 +2342,7 @@ export declare const BentoCheckboxGroup: DefineComponent<
              * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.
              */
             variant: {
-                type: PropType<'horizontal' | 'vertical' | BentoCheckboxGroupVariant>;
+                type: PropType<'vertical' | 'horizontal' | BentoCheckboxGroupVariant>;
                 default: BentoCheckboxGroupVariant;
                 validator: (value: BentoCheckboxGroupVariant) => boolean;
             };
@@ -2223,7 +2350,7 @@ export declare const BentoCheckboxGroup: DefineComponent<
     >,
     {
         description: string;
-        variant: 'horizontal' | 'vertical' | BentoCheckboxGroupVariant;
+        variant: 'vertical' | 'horizontal' | BentoCheckboxGroupVariant;
         required: boolean;
         disabled: boolean;
         tooltipText: string;
@@ -4501,10 +4628,10 @@ export declare type BentoCurrencyListboxOptions = BentoCurrencyListboxOptionItem
  *     `
  * }
  */
-export declare const BentoDashboardSection: __VLS_WithTemplateSlots_36<
+export declare const BentoDashboardSection: __VLS_WithTemplateSlots_37<
     DefineComponent<
-        __VLS_WithDefaults_10<
-            __VLS_TypePropsToRuntimeProps_13<{
+        __VLS_WithDefaults_12<
+            __VLS_TypePropsToRuntimeProps_15<{
                 /**
                  * The header of the section
                  */
@@ -4528,8 +4655,8 @@ export declare const BentoDashboardSection: __VLS_WithTemplateSlots_36<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_10<
-                    __VLS_TypePropsToRuntimeProps_13<{
+                __VLS_WithDefaults_12<
+                    __VLS_TypePropsToRuntimeProps_15<{
                         /**
                          * The header of the section
                          */
@@ -4585,10 +4712,10 @@ export declare const BentoDashboardSection: __VLS_WithTemplateSlots_36<
  *     `
  * }
  */
-export declare const BentoDashboardTemplate: __VLS_WithTemplateSlots_35<
+export declare const BentoDashboardTemplate: __VLS_WithTemplateSlots_36<
     DefineComponent<
-        __VLS_WithDefaults_9<
-            __VLS_TypePropsToRuntimeProps_12<{
+        __VLS_WithDefaults_11<
+            __VLS_TypePropsToRuntimeProps_14<{
                 /**
                  * The header that goes to the top of the template
                  */
@@ -4624,8 +4751,8 @@ export declare const BentoDashboardTemplate: __VLS_WithTemplateSlots_35<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_9<
-                    __VLS_TypePropsToRuntimeProps_12<{
+                __VLS_WithDefaults_11<
+                    __VLS_TypePropsToRuntimeProps_14<{
                         /**
                          * The header that goes to the top of the template
                          */
@@ -4693,8 +4820,8 @@ export declare type BentoDashboardTemplateTabs = {
  */
 export declare const BentoDashedUnderline: __VLS_WithTemplateSlots_7<
     DefineComponent<
-        __VLS_WithDefaults_2<
-            __VLS_TypePropsToRuntimeProps_2<{
+        __VLS_WithDefaults_3<
+            __VLS_TypePropsToRuntimeProps_3<{
                 /**
                  * Text showed in the popover on hover
                  */
@@ -4729,8 +4856,8 @@ export declare const BentoDashedUnderline: __VLS_WithTemplateSlots_7<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_2<
-                    __VLS_TypePropsToRuntimeProps_2<{
+                __VLS_WithDefaults_3<
+                    __VLS_TypePropsToRuntimeProps_3<{
                         /**
                          * Text showed in the popover on hover
                          */
@@ -5804,8 +5931,8 @@ export declare enum BentoDatagridSortDirection {
  * }
  */
 export declare const BentoDataGridStaticIcon: DefineComponent<
-    __VLS_WithDefaults_3<
-        __VLS_TypePropsToRuntimeProps_3<{
+    __VLS_WithDefaults_4<
+        __VLS_TypePropsToRuntimeProps_4<{
             /**
              * Renderes the icon with color.
              */
@@ -5834,8 +5961,8 @@ export declare const BentoDataGridStaticIcon: DefineComponent<
     string,
     Readonly<
         ExtractPropTypes<
-            __VLS_WithDefaults_3<
-                __VLS_TypePropsToRuntimeProps_3<{
+            __VLS_WithDefaults_4<
+                __VLS_TypePropsToRuntimeProps_4<{
                     /**
                      * Renderes the icon with color.
                      */
@@ -5896,7 +6023,7 @@ export declare enum BentoDatagridStyleState {
  *     `
  * }
  */
-export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_37<
+export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_38<
     DefineComponent<
         {
             /**
@@ -10418,6 +10545,8 @@ export declare const BentoInfoIcon: DefineComponent<
 export declare type BentoInputDropdownProps = {
     items: DropdownProps['items'];
     value: DropdownProps['value'];
+    dynamicFiltering?: DropdownProps['dynamicFiltering'];
+    'aria-label'?: HTMLAttributes['aria-label'];
 };
 
 /**
@@ -10478,6 +10607,7 @@ export declare const BentoInputField: __VLS_WithTemplateSlots_16<
              *
              *  - `value`: Selected value of the dropdown
              *  - `items`: List of available items
+             *  - `aria-label`: Text that labels the dropdown element
              *
              */
             dropdown: {
@@ -10650,6 +10780,7 @@ export declare const BentoInputField: __VLS_WithTemplateSlots_16<
                  *
                  *  - `value`: Selected value of the dropdown
                  *  - `items`: List of available items
+                 *  - `aria-label`: Text that labels the dropdown element
                  *
                  */
                 dropdown: {
@@ -10855,6 +10986,122 @@ export declare type BentoInputFilterOptions = {
 
 export declare type BentoInputFilterValue = string | null | BentoInputFilterInputAndDropdownValues;
 
+/**
+ * Inspector allows users to access additional information or details of an object/item. The inspector opens adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and inspector.
+ *
+ * @example
+ * import { BentoInspector } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoInspector },
+ *     template: `
+ *          <bento-inspector
+ *                  title="Inspector"
+ *                  size="large"
+ *                  :is-open="isOpen"
+ *                  @update:is-open="isOpen = $event"
+ *          >
+ *              <template #page>Content of the page</template>
+ *              <template #content>Content of the inspector</template>
+ *          </bento-inspector>
+ *     `
+ * }
+ */
+export declare const BentoInspector: __VLS_WithTemplateSlots_17<
+    DefineComponent<
+        __VLS_WithDefaults_6<
+            __VLS_TypePropsToRuntimeProps_6<{
+                /**
+                 * Shows the Expand icon in the inspector
+                 */
+                expandable?: boolean;
+                /**
+                 * Opens and closes the inspector
+                 */
+                isOpen?: boolean;
+                /**
+                 * Shows loading indicator for the content
+                 */
+                loading?: boolean;
+                /**
+                 * Determines the size of the inspector
+                 */
+                size?: BentoInspectorSize;
+                /**
+                 * The title of the component
+                 */
+                title: string;
+            }>,
+            {
+                expandable: boolean;
+                isOpen: boolean;
+                loading: boolean;
+                size: string;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {
+            'update:is-open': (value: boolean) => void;
+        } & {
+            expand: () => void;
+        },
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_6<
+                    __VLS_TypePropsToRuntimeProps_6<{
+                        /**
+                         * Shows the Expand icon in the inspector
+                         */
+                        expandable?: boolean;
+                        /**
+                         * Opens and closes the inspector
+                         */
+                        isOpen?: boolean;
+                        /**
+                         * Shows loading indicator for the content
+                         */
+                        loading?: boolean;
+                        /**
+                         * Determines the size of the inspector
+                         */
+                        size?: BentoInspectorSize;
+                        /**
+                         * The title of the component
+                         */
+                        title: string;
+                    }>,
+                    {
+                        expandable: boolean;
+                        isOpen: boolean;
+                        loading: boolean;
+                        size: string;
+                    }
+                >
+            >
+        >,
+        {
+            isOpen: boolean;
+            size: BentoInspectorSize;
+            loading: boolean;
+            expandable: boolean;
+        }
+    >,
+    {
+        page: (_: {}) => any;
+        content: (_: {}) => any;
+    }
+>;
+
+export declare type BentoInspectorSize = (typeof BentoInspectorSizeOptions)[number];
+
+export declare const BentoInspectorSizeOptions: readonly ['small', 'large'];
+
 export declare const BentoKeyboardNavigationDirective: {
     bind: DirectiveHook<Element>;
     unbind: DirectiveHook<Element>;
@@ -10910,10 +11157,10 @@ export declare type BentoLazyLoadType = 'automatic' | 'button' | 'none';
  *     `
  * }
  */
-export declare const BentoLink: __VLS_WithTemplateSlots_17<
+export declare const BentoLink: __VLS_WithTemplateSlots_18<
     DefineComponent<
-        __VLS_WithDefaults_5<
-            __VLS_TypePropsToRuntimeProps_5<LinkProps>,
+        __VLS_WithDefaults_7<
+            __VLS_TypePropsToRuntimeProps_7<LinkProps>,
             {
                 target: any;
                 variant: BentoLinkVariant;
@@ -10931,8 +11178,8 @@ export declare const BentoLink: __VLS_WithTemplateSlots_17<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_5<
-                    __VLS_TypePropsToRuntimeProps_5<LinkProps>,
+                __VLS_WithDefaults_7<
+                    __VLS_TypePropsToRuntimeProps_7<LinkProps>,
                     {
                         target: any;
                         variant: BentoLinkVariant;
@@ -11085,7 +11332,6 @@ export declare const BentoLoadingButton: __VLS_WithTemplateSlots_5<
             };
             /**
              * Types of flavour of Button
-             * @values primary, secondary, tertiary
              */
             variant: {
                 type: PropType<'primary' | 'secondary' | 'tertiary' | 'tertiary-with-background' | BentoButtonVariant>;
@@ -11097,8 +11343,8 @@ export declare const BentoLoadingButton: __VLS_WithTemplateSlots_5<
         {},
         {},
         {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
+        ComponentOptionsMixin_2,
+        ComponentOptionsMixin_2,
         {
             click: (event: MouseEvent) => void;
         },
@@ -11144,7 +11390,6 @@ export declare const BentoLoadingButton: __VLS_WithTemplateSlots_5<
                 };
                 /**
                  * Types of flavour of Button
-                 * @values primary, secondary, tertiary
                  */
                 variant: {
                     type: PropType<
@@ -11166,6 +11411,7 @@ export declare const BentoLoadingButton: __VLS_WithTemplateSlots_5<
     >,
     {
         default: (_: {}) => any;
+        iconLeft: (_: {}) => any;
     }
 >;
 
@@ -11502,7 +11748,7 @@ export declare interface BentoMenuItem {
  *     `
  * };
  */
-export declare const BentoModal: __VLS_WithTemplateSlots_19<
+export declare const BentoModal: __VLS_WithTemplateSlots_20<
     DefineComponent<
         {
             /**
@@ -11861,7 +12107,7 @@ export declare enum BentoModalEvent {
  *     `
  * }
  */
-export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_20<
+export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_21<
     DefineComponent<
         {
             /**
@@ -12018,7 +12264,7 @@ export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_20<
  *     `
  * }
  */
-export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_21<
+export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_22<
     DefineComponent<
         {
             /**
@@ -12177,7 +12423,7 @@ export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_21<
  *     `
  * }
  */
-export declare const BentoModalPage: __VLS_WithTemplateSlots_18<
+export declare const BentoModalPage: __VLS_WithTemplateSlots_19<
     DefineComponent<
         {
             /**
@@ -13776,7 +14022,7 @@ export declare enum BentoPaymentMethodType {
  *     `
  * }
  */
-export declare const BentoPopover: __VLS_WithTemplateSlots_22<
+export declare const BentoPopover: __VLS_WithTemplateSlots_23<
     DefineComponent<
         {
             /**
@@ -14176,6 +14422,7 @@ export declare const BentoPopover: __VLS_WithTemplateSlots_22<
             small: boolean;
             title: string;
             large: boolean;
+            modifiers: unknown[];
             position:
                 | 'auto'
                 | 'left'
@@ -14194,7 +14441,6 @@ export declare const BentoPopover: __VLS_WithTemplateSlots_22<
                 | 'left-end'
                 | PopperContainerPosition;
             open: boolean;
-            modifiers: unknown[];
             fallbackPosition: Placement[];
             fixedPositioning: boolean;
             ariaLabel: string;
@@ -14276,7 +14522,7 @@ export declare type BentoPopoverPositions = PopperContainerPosition;
  *     }
  * }
  */
-export declare const BentoRadioButton: __VLS_WithTemplateSlots_24<
+export declare const BentoRadioButton: __VLS_WithTemplateSlots_25<
     DefineComponent<
         {
             /**
@@ -14317,7 +14563,7 @@ export declare const BentoRadioButton: __VLS_WithTemplateSlots_24<
                     Readonly<
                         Partial<{
                             label: string;
-                            variant: 'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant;
+                            variant: 'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant;
                             truncate: number;
                         }> &
                             Omit<
@@ -14329,7 +14575,7 @@ export declare const BentoRadioButton: __VLS_WithTemplateSlots_24<
                                         };
                                         variant: {
                                             type: PropType<
-                                                'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant
+                                                'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant
                                             >;
                                             default: BentoTagVariant;
                                             validator: (value: BentoTagVariant) => boolean;
@@ -14347,7 +14593,7 @@ export declare const BentoRadioButton: __VLS_WithTemplateSlots_24<
                                     };
                                     variant: {
                                         type: PropType<
-                                            'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant
+                                            'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant
                                         >;
                                         default: BentoTagVariant;
                                         validator: (value: BentoTagVariant) => boolean;
@@ -14422,7 +14668,7 @@ export declare const BentoRadioButton: __VLS_WithTemplateSlots_24<
                         Readonly<
                             Partial<{
                                 label: string;
-                                variant: 'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant;
+                                variant: 'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant;
                                 truncate: number;
                             }> &
                                 Omit<
@@ -14436,9 +14682,9 @@ export declare const BentoRadioButton: __VLS_WithTemplateSlots_24<
                                                 type: PropType<
                                                     | 'blue'
                                                     | 'green'
-                                                    | 'red'
                                                     | 'grey'
                                                     | 'orange'
+                                                    | 'red'
                                                     | 'white'
                                                     | BentoTagVariant
                                                 >;
@@ -14458,7 +14704,7 @@ export declare const BentoRadioButton: __VLS_WithTemplateSlots_24<
                                         };
                                         variant: {
                                             type: PropType<
-                                                'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant
+                                                'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant
                                             >;
                                             default: BentoTagVariant;
                                             validator: (value: BentoTagVariant) => boolean;
@@ -14527,7 +14773,7 @@ export declare type BentoRadioButtonValue = string | number;
  *     `
  * };
  */
-export declare const BentoRadioGroup: __VLS_WithTemplateSlots_23<
+export declare const BentoRadioGroup: __VLS_WithTemplateSlots_24<
     DefineComponent<
         {
             /**
@@ -14628,7 +14874,7 @@ export declare const BentoRadioGroup: __VLS_WithTemplateSlots_23<
              * The radio group's layout. It can be vertical or horizontal. Defaults to vertical.
              */
             variant: {
-                type: PropType<'horizontal' | 'vertical' | BentoRadioGroupVariant>;
+                type: PropType<'vertical' | 'horizontal' | BentoRadioGroupVariant>;
                 default: BentoRadioGroupVariant;
                 validator: (value: BentoRadioGroupVariant) => boolean;
             };
@@ -14745,7 +14991,7 @@ export declare const BentoRadioGroup: __VLS_WithTemplateSlots_23<
                  * The radio group's layout. It can be vertical or horizontal. Defaults to vertical.
                  */
                 variant: {
-                    type: PropType<'horizontal' | 'vertical' | BentoRadioGroupVariant>;
+                    type: PropType<'vertical' | 'horizontal' | BentoRadioGroupVariant>;
                     default: BentoRadioGroupVariant;
                     validator: (value: BentoRadioGroupVariant) => boolean;
                 };
@@ -14753,7 +14999,7 @@ export declare const BentoRadioGroup: __VLS_WithTemplateSlots_23<
         >,
         {
             description: string;
-            variant: 'horizontal' | 'vertical' | BentoRadioGroupVariant;
+            variant: 'vertical' | 'horizontal' | BentoRadioGroupVariant;
             required: boolean;
             disabled: boolean;
             tooltipText: string;
@@ -14874,7 +15120,12 @@ export declare const BentoSearchBar: DefineComponent<
             default: any;
         };
     },
-    {},
+    {
+        /**
+         * Focus on the input field when called.
+         */
+        focus: () => void;
+    },
     {},
     {},
     {},
@@ -14886,6 +15137,10 @@ export declare const BentoSearchBar: DefineComponent<
         clear: () => void;
     } & {
         'escape-pressed': () => void;
+    } & {
+        blur: () => void;
+    } & {
+        focus: () => void;
     },
     string,
     Readonly<
@@ -14978,7 +15233,7 @@ export declare interface BentoSearchBarItem {
  * }
  */
 export declare const BentoSecondaryNav: DefineComponent<
-    __VLS_TypePropsToRuntimeProps_6<{
+    __VLS_TypePropsToRuntimeProps_8<{
         /**
          * 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.
@@ -14986,6 +15241,7 @@ export declare const BentoSecondaryNav: DefineComponent<
         items: BentoSecondaryNavItems;
         /**
          * The value of the selected item.
+         * If nothing is passed, it defaults to the first item value in items.
          */
         value?: string;
     }>,
@@ -15001,7 +15257,7 @@ export declare const BentoSecondaryNav: DefineComponent<
     string,
     Readonly<
         ExtractPropTypes<
-            __VLS_TypePropsToRuntimeProps_6<{
+            __VLS_TypePropsToRuntimeProps_8<{
                 /**
                  * 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.
@@ -15009,6 +15265,7 @@ export declare const BentoSecondaryNav: DefineComponent<
                 items: BentoSecondaryNavItems;
                 /**
                  * The value of the selected item.
+                 * If nothing is passed, it defaults to the first item value in items.
                  */
                 value?: string;
             }>
@@ -15050,8 +15307,8 @@ export declare interface BentoSecondaryNavState {
  * }
  */
 export declare const BentoSegmentedControl: DefineComponent<
-    __VLS_WithDefaults_6<
-        __VLS_TypePropsToRuntimeProps_7<{
+    __VLS_WithDefaults_8<
+        __VLS_TypePropsToRuntimeProps_9<{
             /**
              * Accessible name describing the segmented control.
              * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -15087,13 +15344,13 @@ export declare const BentoSegmentedControl: DefineComponent<
     ComponentOptionsMixin,
     ComponentOptionsMixin,
     {
-        'update:model-value': (value: string | number) => void;
+        'update:model-value': (value: any) => void;
     },
     string,
     Readonly<
         ExtractPropTypes<
-            __VLS_WithDefaults_6<
-                __VLS_TypePropsToRuntimeProps_7<{
+            __VLS_WithDefaults_8<
+                __VLS_TypePropsToRuntimeProps_9<{
                     /**
                      * Accessible name describing the segmented control.
                      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -15250,7 +15507,7 @@ export declare type BentoSelectFilterValue = BentoListboxSelectedValue;
  *     `
  * }
  */
-export declare const BentoSelectionCard: __VLS_WithTemplateSlots_25<
+export declare const BentoSelectionCard: __VLS_WithTemplateSlots_26<
     DefineComponent<
         {
             /**
@@ -15445,7 +15702,7 @@ export declare const BentoSelectionCard: __VLS_WithTemplateSlots_25<
  *     `,
  * }
  */
-export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_26<
+export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_27<
     DefineComponent<
         {
             /**
@@ -15760,7 +16017,7 @@ export declare type BentoSelectTagFilterOptions = OmitStrict<BentoSelectFilterOp
  *     `
  * }
  */
-export declare const BentoSidepanel: __VLS_WithTemplateSlots_28<
+export declare const BentoSidepanel: __VLS_WithTemplateSlots_29<
     DefineComponent<
         {
             /**
@@ -15878,7 +16135,7 @@ export declare enum BentoSidepanelEvent {
  *     `
  * }
  */
-export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_27<
+export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_28<
     DefineComponent<
         {
             /**
@@ -16038,9 +16295,9 @@ export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_27<
  *     `
  * }
  */
-export declare const BentoStatus: __VLS_WithTemplateSlots_29<
+export declare const BentoStatus: __VLS_WithTemplateSlots_30<
     DefineComponent<
-        __VLS_TypePropsToRuntimeProps_8<{
+        __VLS_TypePropsToRuntimeProps_10<{
             variant: BentoStatusVariant | `${BentoStatusVariant}`;
         }>,
         {},
@@ -16053,7 +16310,7 @@ export declare const BentoStatus: __VLS_WithTemplateSlots_29<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_TypePropsToRuntimeProps_8<{
+                __VLS_TypePropsToRuntimeProps_10<{
                     variant: BentoStatusVariant | `${BentoStatusVariant}`;
                 }>
             >
@@ -16099,7 +16356,7 @@ export declare enum BentoStatusVariant {
  *     `
  * }
  */
-export declare const BentoStep: __VLS_WithTemplateSlots_31<
+export declare const BentoStep: __VLS_WithTemplateSlots_32<
     DefineComponent<
         {
             /**
@@ -16173,7 +16430,7 @@ export declare const BentoStep: __VLS_WithTemplateSlots_31<
  *     `
  * }
  */
-export declare const BentoStepper: __VLS_WithTemplateSlots_30<
+export declare const BentoStepper: __VLS_WithTemplateSlots_31<
     DefineComponent<
         {
             /**
@@ -16189,7 +16446,7 @@ export declare const BentoStepper: __VLS_WithTemplateSlots_30<
              * @values vertical, horizontal
              */
             variant: {
-                type: PropType<'horizontal' | 'vertical'>;
+                type: PropType<'vertical' | 'horizontal'>;
                 default: string;
             };
             /**
@@ -16225,7 +16482,7 @@ export declare const BentoStepper: __VLS_WithTemplateSlots_30<
                  * @values vertical, horizontal
                  */
                 variant: {
-                    type: PropType<'horizontal' | 'vertical'>;
+                    type: PropType<'vertical' | 'horizontal'>;
                     default: string;
                 };
                 /**
@@ -16239,7 +16496,7 @@ export declare const BentoStepper: __VLS_WithTemplateSlots_30<
         >,
         {
             type: 'linear' | 'non-linear';
-            variant: 'horizontal' | 'vertical';
+            variant: 'vertical' | 'horizontal';
             index: number;
         }
     >,
@@ -16299,10 +16556,10 @@ export declare enum BentoStepperVariantOption {
  *     `
  * }
  */
-export declare const BentoStructuredList: __VLS_WithTemplateSlots_32<
+export declare const BentoStructuredList: __VLS_WithTemplateSlots_33<
     DefineComponent<
-        __VLS_WithDefaults_7<
-            __VLS_TypePropsToRuntimeProps_9<{
+        __VLS_WithDefaults_9<
+            __VLS_TypePropsToRuntimeProps_11<{
                 /**
                  * Width of the labels container, in pixels. Overrides layout prop.
                  */
@@ -16336,8 +16593,8 @@ export declare const BentoStructuredList: __VLS_WithTemplateSlots_32<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_7<
-                    __VLS_TypePropsToRuntimeProps_9<{
+                __VLS_WithDefaults_9<
+                    __VLS_TypePropsToRuntimeProps_11<{
                         /**
                          * Width of the labels container, in pixels. Overrides layout prop.
                          */
@@ -16398,9 +16655,9 @@ export declare const BentoStructuredList: __VLS_WithTemplateSlots_32<
  *     `
  * }
  */
-export declare const BentoStructuredListItem: __VLS_WithTemplateSlots_33<
+export declare const BentoStructuredListItem: __VLS_WithTemplateSlots_34<
     DefineComponent<
-        __VLS_TypePropsToRuntimeProps_10<{
+        __VLS_TypePropsToRuntimeProps_12<{
             /**
              * Label to display for the value
              */
@@ -16436,7 +16693,7 @@ export declare const BentoStructuredListItem: __VLS_WithTemplateSlots_33<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_TypePropsToRuntimeProps_10<{
+                __VLS_TypePropsToRuntimeProps_12<{
                     /**
                      * Label to display for the value
                      */
@@ -17632,7 +17889,7 @@ export declare const BentoTag: DefineComponent<
          * The variant variant of tag
          */
         variant: {
-            type: PropType<'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant>;
+            type: PropType<'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant>;
             default: BentoTagVariant;
             validator: (value: BentoTagVariant) => boolean;
         };
@@ -17649,7 +17906,7 @@ export declare const BentoTag: DefineComponent<
         textFromSlot: ComputedRef<string>;
         formattedText: ComputedRef<string>;
         tagConditionalClasses: ComputedRef<{
-            [x: string]: 'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant;
+            [x: string]: 'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant;
         }>;
         shouldShowTooltip: ComputedRef<boolean>;
     },
@@ -17673,7 +17930,7 @@ export declare const BentoTag: DefineComponent<
              * The variant variant of tag
              */
             variant: {
-                type: PropType<'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant>;
+                type: PropType<'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant>;
                 default: BentoTagVariant;
                 validator: (value: BentoTagVariant) => boolean;
             };
@@ -17688,7 +17945,7 @@ export declare const BentoTag: DefineComponent<
     >,
     {
         label: string;
-        variant: 'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant;
+        variant: 'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant;
         truncate: number;
     }
 >;
@@ -17794,7 +18051,7 @@ export declare const BentoTextarea: DefineComponent<
          * Indicates the possibility of resize the textarea
          */
         resizable: {
-            type: PropType<'none' | 'both' | 'horizontal' | 'vertical' | BentoTextareaResizeOption>;
+            type: PropType<'none' | 'vertical' | 'horizontal' | 'both' | BentoTextareaResizeOption>;
             default: BentoTextareaResizeOption;
             validator: (value: BentoTextareaResizeOption) => boolean;
         };
@@ -17923,7 +18180,7 @@ export declare const BentoTextarea: DefineComponent<
              * Indicates the possibility of resize the textarea
              */
             resizable: {
-                type: PropType<'none' | 'both' | 'horizontal' | 'vertical' | BentoTextareaResizeOption>;
+                type: PropType<'none' | 'vertical' | 'horizontal' | 'both' | BentoTextareaResizeOption>;
                 default: BentoTextareaResizeOption;
                 validator: (value: BentoTextareaResizeOption) => boolean;
             };
@@ -17965,7 +18222,7 @@ export declare const BentoTextarea: DefineComponent<
         placeholder: string;
         clearable: boolean;
         characterLimit: number;
-        resizable: 'none' | 'both' | 'horizontal' | 'vertical' | BentoTextareaResizeOption;
+        resizable: 'none' | 'vertical' | 'horizontal' | 'both' | BentoTextareaResizeOption;
     }
 >;
 
@@ -18182,7 +18439,7 @@ export declare const BentoTimelineItem: DefineComponent<
          * @values blue, black, green, grey, orange, red, yellow
          */
         status: {
-            type: PropType<'blue' | 'green' | 'red' | 'yellow' | 'black' | 'grey' | 'orange'>;
+            type: PropType<'black' | 'blue' | 'green' | 'grey' | 'orange' | 'red' | 'yellow'>;
             default: string;
             validator: (value: BentoTimelineStatus) => boolean;
         };
@@ -18194,7 +18451,7 @@ export declare const BentoTimelineItem: DefineComponent<
                 Readonly<
                     Partial<{
                         label: string;
-                        variant: 'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant;
+                        variant: 'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant;
                         truncate: number;
                     }> &
                         Omit<
@@ -18206,7 +18463,7 @@ export declare const BentoTimelineItem: DefineComponent<
                                     };
                                     variant: {
                                         type: PropType<
-                                            'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant
+                                            'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant
                                         >;
                                         default: BentoTagVariant;
                                         validator: (value: BentoTagVariant) => boolean;
@@ -18224,7 +18481,7 @@ export declare const BentoTimelineItem: DefineComponent<
                                 };
                                 variant: {
                                     type: PropType<
-                                        'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant
+                                        'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant
                                     >;
                                     default: BentoTagVariant;
                                     validator: (value: BentoTagVariant) => boolean;
@@ -18330,7 +18587,7 @@ export declare const BentoTimelineItem: DefineComponent<
              * @values blue, black, green, grey, orange, red, yellow
              */
             status: {
-                type: PropType<'blue' | 'green' | 'red' | 'yellow' | 'black' | 'grey' | 'orange'>;
+                type: PropType<'black' | 'blue' | 'green' | 'grey' | 'orange' | 'red' | 'yellow'>;
                 default: string;
                 validator: (value: BentoTimelineStatus) => boolean;
             };
@@ -18342,7 +18599,7 @@ export declare const BentoTimelineItem: DefineComponent<
                     Readonly<
                         Partial<{
                             label: string;
-                            variant: 'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant;
+                            variant: 'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant;
                             truncate: number;
                         }> &
                             Omit<
@@ -18354,7 +18611,7 @@ export declare const BentoTimelineItem: DefineComponent<
                                         };
                                         variant: {
                                             type: PropType<
-                                                'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant
+                                                'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant
                                             >;
                                             default: BentoTagVariant;
                                             validator: (value: BentoTagVariant) => boolean;
@@ -18372,7 +18629,7 @@ export declare const BentoTimelineItem: DefineComponent<
                                     };
                                     variant: {
                                         type: PropType<
-                                            'blue' | 'green' | 'red' | 'grey' | 'orange' | 'white' | BentoTagVariant
+                                            'blue' | 'green' | 'grey' | 'orange' | 'red' | 'white' | BentoTagVariant
                                         >;
                                         default: BentoTagVariant;
                                         validator: (value: BentoTagVariant) => boolean;
@@ -18429,7 +18686,7 @@ export declare const BentoTimelineItem: DefineComponent<
         title: string | BentoTimelineItemTitle;
         variant: 'CrossCircleIcon' | 'SquareSmallIcon' | 'CheckedCircleIcon' | BentoTimelineItemVariant;
         tag: any;
-        status: 'blue' | 'green' | 'red' | 'yellow' | 'black' | 'grey' | 'orange';
+        status: 'black' | 'blue' | 'green' | 'grey' | 'orange' | 'red' | 'yellow';
         additionalTimestamp: BentoTimelineTimestamp;
         dataList: BentoTimelineDataList;
     }
@@ -18997,10 +19254,10 @@ export declare interface BentoTutorialStep {
  *     `
  * }
  */
-export declare const BentoTypography: __VLS_WithTemplateSlots_34<
+export declare const BentoTypography: __VLS_WithTemplateSlots_35<
     DefineComponent<
-        __VLS_WithDefaults_8<
-            __VLS_TypePropsToRuntimeProps_11<{
+        __VLS_WithDefaults_10<
+            __VLS_TypePropsToRuntimeProps_13<{
                 /**
                  * Sets the HTML DOM element.
                  * @values h1, h2, h3, h4, h5, h6, div, p, span
@@ -19057,8 +19314,8 @@ export declare const BentoTypography: __VLS_WithTemplateSlots_34<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_8<
-                    __VLS_TypePropsToRuntimeProps_11<{
+                __VLS_WithDefaults_10<
+                    __VLS_TypePropsToRuntimeProps_13<{
                         /**
                          * Sets the HTML DOM element.
                          * @values h1, h2, h3, h4, h5, h6, div, p, span