@adyen/bento-vue2 1.25.0 → 1.27.0

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

@@ -1,3 +1,5 @@
+import { ComponentCustomProperties } from 'vue';
+import { ComponentOptionsBase } from 'vue/types/v3-component-options';
 import { ComponentOptionsMixin } from 'vue/types/v3-component-options';
 import { ComponentOptionsMixin as ComponentOptionsMixin_2 } from 'vue/types/v3-component-options.js';
 import type { ComponentPublicInstance } from 'vue';
@@ -9,6 +11,7 @@ import { DefineComponent } from 'vue';
 import { DirectiveBinding } from 'vue';
 import type { DirectiveHook } from 'vue';
 import { EditorView } from '@codemirror/view';
+import { ExtractComputedReturns } from 'vue/types/v3-component-options';
 import { ExtractPropTypes } from 'vue';
 import { Placement } from '@floating-ui/vue';
 import type { PluginObject } from 'vue';
@@ -16,9 +19,11 @@ import { PropType } from 'vue';
 import { Ref } from 'vue';
 import { RouterLinkProps } from 'vue-router/types/router';
 import { ShallowRef } from 'vue';
+import { ShallowUnwrapRef } from 'vue';
 import type { typeToFlattenedError } from 'zod';
 import { UnwrapRef } from 'vue';
 import { VNode } from 'vue';
+import { Vue3Instance } from 'vue/types/v3-component-public-instance';
 import * as z from 'zod';
 import type { ZodSchema } from 'zod';
 
@@ -32,6 +37,14 @@ declare type __VLS_NonUndefinedable_4<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_5<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_6<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_7<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_8<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_9<T> = T extends undefined ? never : T;
+
 declare type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K>
         ? {
@@ -87,6 +100,50 @@ declare type __VLS_TypePropsToRuntimeProps_5<T> = {
           };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_6<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_6<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_7<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_7<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_8<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_8<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_9<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_9<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
 declare type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D
         ? P[K] & {
@@ -119,6 +176,30 @@ declare type __VLS_WithDefaults_4<P, D> = {
         : P[K];
 };
 
+declare type __VLS_WithDefaults_5<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
+declare type __VLS_WithDefaults_6<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
+declare type __VLS_WithDefaults_7<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -275,6 +356,24 @@ declare type __VLS_WithTemplateSlots_32<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_33<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_34<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_35<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_4<T, S> = T & {
     new (): {
         $slots: S;
@@ -942,10 +1041,11 @@ export declare interface BentoButtonActionObject extends BentoButtonProps {
     iconLeft?: VueNodeElement;
     iconRight?: VueNodeElement;
     state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;
+    iconOnly?: boolean;
 }
 
 /**
- * ButtonActions component component manages a set of actions a user can choose from by displaying a group of buttons.
+ * ButtonActions component manages a set of actions a user can choose from by displaying a group of buttons.
  *
  * @example
  * import { BentoButtonActions } from '@adyen/bento-vue2';
@@ -2150,7 +2250,7 @@ export declare const BentoCodeSnippet: DefineComponent<
          * Language name for syntax highlighting rules
          */
         lang: {
-            type: PropType<'json' | 'xml' | 'java' | 'javascript' | BentoCodeSnippetSupportedLanguage>;
+            type: PropType<'json' | 'xml' | 'java' | 'javascript' | 'python' | BentoCodeSnippetSupportedLanguage>;
             default: BentoCodeSnippetSupportedLanguage;
             validator: (value: BentoCodeSnippetSupportedLanguage) => boolean;
         };
@@ -2249,7 +2349,7 @@ export declare const BentoCodeSnippet: DefineComponent<
              * Language name for syntax highlighting rules
              */
             lang: {
-                type: PropType<'json' | 'xml' | 'java' | 'javascript' | BentoCodeSnippetSupportedLanguage>;
+                type: PropType<'json' | 'xml' | 'java' | 'javascript' | 'python' | BentoCodeSnippetSupportedLanguage>;
                 default: BentoCodeSnippetSupportedLanguage;
                 validator: (value: BentoCodeSnippetSupportedLanguage) => boolean;
             };
@@ -2312,7 +2412,7 @@ export declare const BentoCodeSnippet: DefineComponent<
         content: string;
         loading: boolean;
         expandable: boolean;
-        lang: 'json' | 'xml' | 'java' | 'javascript' | BentoCodeSnippetSupportedLanguage;
+        lang: 'json' | 'xml' | 'java' | 'javascript' | 'python' | BentoCodeSnippetSupportedLanguage;
         langLabel: string;
         editable: boolean;
         actionable: boolean;
@@ -2333,6 +2433,7 @@ export declare enum BentoCodeSnippetSupportedLanguage {
     XML = 'xml',
     JAVA = 'java',
     JAVASCRIPT = 'javascript',
+    PYTHON = 'python',
 }
 
 /**
@@ -2370,13 +2471,23 @@ declare type BentoColumnCellAction = OmitStrict<
     'variant' | 'event' | 'title' | 'icon' | 'state'
 > & {
     title?: string;
-    event?: (rowDataItem: BentoDatagridDataItem, columnKey: string) => void;
+    event?: BentoColumnCellActionEvent;
     isShort?: true;
     variant?: BentoColumnCellActionVariant;
-    menuData?: BentoMenuItem[];
+    menuData?: BentoColumnCellActionMenuItem[];
     getCopyData?: (rowDataItem: BentoDatagridDataItem, columnKey: string) => string;
 };
 
+declare type BentoColumnCellActionEvent = (rowDataItem: BentoDatagridDataItem, columnKey: string) => void;
+
+declare type BentoColumnCellActionMenuItem = {
+    /**
+     * @deprecated This property will be removed in version 2.0, please use `event` instead.
+     */
+    handler?: BentoMenuItem['handler'];
+    event?: BentoColumnCellActionEvent;
+} & OmitStrict<BentoMenuItem, 'handler'>;
+
 declare type BentoColumnCellActions = BentoColumnCellAction[];
 
 declare type BentoColumnCellActionVariant = 'copy' | 'edit' | 'open' | 'more';
@@ -4276,6 +4387,206 @@ export declare type BentoCurrencyListboxOptionItem = OmitStrict<BentoListboxOpti
 
 export declare type BentoCurrencyListboxOptions = BentoCurrencyListboxOptionItem[];
 
+/**
+ * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.
+ *
+ * @example
+ * import { BentoDashboardSection } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoDashboardSection },
+ *     template: `
+ *          <bento-dashboard-section :header="{ title: 'Section' }" half-width>
+ *              <template #controls>
+ *                  // Add your controls here
+ *              </template>
+ *              // You can render content with two cols
+ *              <template #content-col-1>
+ *                  // Add your content here
+ *              </template>
+ *              <template #content-col-2>
+ *                  // Add your content here
+ *              </template>
+ *              // Or you can render full width content by using default slot
+ *              // Add your content here
+ *          </bento-dashboard-section>
+ *     `
+ * }
+ */
+export declare const BentoDashboardSection: __VLS_WithTemplateSlots_34<
+    DefineComponent<
+        __VLS_WithDefaults_7<
+            __VLS_TypePropsToRuntimeProps_9<{
+                /**
+                 * The header of the section
+                 */
+                header: BentoDashboardTemplateHeader;
+                /**
+                 * Renders the section to take only half of the page
+                 */
+                halfWidth?: boolean;
+            }>,
+            {
+                halfWidth: boolean;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_7<
+                    __VLS_TypePropsToRuntimeProps_9<{
+                        /**
+                         * The header of the section
+                         */
+                        header: BentoDashboardTemplateHeader;
+                        /**
+                         * Renders the section to take only half of the page
+                         */
+                        halfWidth?: boolean;
+                    }>,
+                    {
+                        halfWidth: boolean;
+                    }
+                >
+            >
+        >,
+        {
+            halfWidth: boolean;
+        }
+    >,
+    {
+        infoIconTooltipContent: (_: {}) => any;
+        controls: (_: {}) => any;
+        default: (_: {}) => any;
+        'content-col-1': (_: {}) => any;
+        'content-col-2': (_: {}) => any;
+    }
+>;
+
+/**
+ * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports.
+ *
+ * @example
+ * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoDashboardTemplate, BentoDashboardSection },
+ *     template: `
+ *          <bento-dashboard-template :header="{ title: 'Dashboard'}" :tabs="tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]" sticky-tabs sticky-filters>
+ *              <template #tab-1>
+ *                  <bento-dashboard-section :header="{ title: 'Section'}">
+ *                      <template #controls>
+ *                          // Add your controls here
+ *                      </template>
+ *                      // Add your content here
+ *                  </bento-dashboard-section>
+ *              </template>
+ *              <template #tab-2>
+ *                  <bento-dashboard-section :header="{ title: 'Section'}">
+ *                      // Add your content here
+ *                  </bento-dashboard-section>
+ *              </template>
+ *          </bento-dashboard-template>
+ *     `
+ * }
+ */
+export declare const BentoDashboardTemplate: __VLS_WithTemplateSlots_33<
+    DefineComponent<
+        __VLS_WithDefaults_6<
+            __VLS_TypePropsToRuntimeProps_8<{
+                /**
+                 * The header that goes to the top of the template
+                 */
+                header: BentoDashboardTemplateHeader;
+                /**
+                 * All the tab properties that can be set on the inner tab components.
+                 *  - tabs.activeTabIndex: the currently active tab index.
+                 *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.
+                 */
+                tabs?: BentoDashboardTemplateTabs;
+                /**
+                 * Renders the tabs with a sticky positioning
+                 */
+                stickyTabs?: boolean;
+                /**
+                 * Renders the tabs with a sticky positioning
+                 */
+                stickyFilters?: boolean;
+            }>,
+            {
+                tabs: any;
+                stickyTabs: boolean;
+                stickyFilters: boolean;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_6<
+                    __VLS_TypePropsToRuntimeProps_8<{
+                        /**
+                         * The header that goes to the top of the template
+                         */
+                        header: BentoDashboardTemplateHeader;
+                        /**
+                         * All the tab properties that can be set on the inner tab components.
+                         *  - tabs.activeTabIndex: the currently active tab index.
+                         *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.
+                         */
+                        tabs?: BentoDashboardTemplateTabs;
+                        /**
+                         * Renders the tabs with a sticky positioning
+                         */
+                        stickyTabs?: boolean;
+                        /**
+                         * Renders the tabs with a sticky positioning
+                         */
+                        stickyFilters?: boolean;
+                    }>,
+                    {
+                        tabs: any;
+                        stickyTabs: boolean;
+                        stickyFilters: boolean;
+                    }
+                >
+            >
+        >,
+        {
+            tabs: BentoDashboardTemplateTabs;
+            stickyFilters: boolean;
+            stickyTabs: boolean;
+        }
+    >,
+    Record<string, (_: {}) => any> & {
+        infoIconTooltipContent: (_: {}) => any;
+        filters: (_: {}) => any;
+        default: (_: {}) => any;
+    }
+>;
+
+export declare type BentoDashboardTemplateHeader = InstanceType<typeof BentoHeader>['$props'];
+
+export declare type BentoDashboardTemplateTab = InstanceType<typeof BentoTab>['$props'];
+
+export declare type BentoDashboardTemplateTabs = {
+    activeTabIndex?: number;
+    tabs: BentoDashboardTemplateTab[];
+};
+
 /**
  * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
  *
@@ -4398,8 +4709,15 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
                                         description: {
                                             type: StringConstructor;
                                             default: any;
-                                        };
+                                        }
+                                        /**
+                                         * If resize is enabled
+                                         */;
                                         headingEl: {
+                                            /**
+                                             * A customisable method to determine if a row is not selectable.
+                                             * The default is that every row is selectable.
+                                             */
                                             type: PropType<
                                                 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
                                             >;
@@ -4447,8 +4765,15 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
                                     description: {
                                         type: StringConstructor;
                                         default: any;
-                                    };
+                                    }
+                                    /**
+                                     * If resize is enabled
+                                     */;
                                     headingEl: {
+                                        /**
+                                         * A customisable method to determine if a row is not selectable.
+                                         * The default is that every row is selectable.
+                                         */
                                         type: PropType<'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'>;
                                         default: any;
                                         validator: (value: BentoTypographyElement) => boolean;
@@ -4591,29 +4916,6 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
                                         };
                                         hasNext: {
                                             type: BooleanConstructor;
-                                            /**
-                                             * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
-                                             *
-                                             * @example
-                                             * import { BentoDataGrid } from '@adyen/bento-vue2';
-                                             *
-                                             * export default {
-                                             *     components: { BentoDataGrid },
-                                             *     template: `
-                                             *          <bento-data-grid
-                                             *               :data="[
-                                             *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
-                                             *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
-                                             *               ]"
-                                             *               :columns="[
-                                             *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
-                                             *                  { field: 'company', label: 'Reference' },
-                                             *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
-                                             *                ]"
-                                             *          />
-                                             *     `
-                                             * }
-                                             */
                                             default: any;
                                         };
                                         hidePageSize: {
@@ -4647,29 +4949,6 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
                                     };
                                     hasNext: {
                                         type: BooleanConstructor;
-                                        /**
-                                         * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
-                                         *
-                                         * @example
-                                         * import { BentoDataGrid } from '@adyen/bento-vue2';
-                                         *
-                                         * export default {
-                                         *     components: { BentoDataGrid },
-                                         *     template: `
-                                         *          <bento-data-grid
-                                         *               :data="[
-                                         *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
-                                         *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
-                                         *               ]"
-                                         *               :columns="[
-                                         *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
-                                         *                  { field: 'company', label: 'Reference' },
-                                         *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
-                                         *                ]"
-                                         *          />
-                                         *     `
-                                         * }
-                                         */
                                         default: any;
                                     };
                                     hidePageSize: {
@@ -4744,6 +5023,13 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
                 type: PropType<BentoDatagridDataItemId[]>;
                 default: () => any[];
             };
+            /**
+             * Renders the data grid with no top spacing, to render inside containers that already have spacing
+             */
+            noSpacingTop: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
             /**
              * Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.
              * It does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.
@@ -4875,8 +5161,15 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
                                             description: {
                                                 type: StringConstructor;
                                                 default: any;
-                                            };
+                                            }
+                                            /**
+                                             * If resize is enabled
+                                             */;
                                             headingEl: {
+                                                /**
+                                                 * A customisable method to determine if a row is not selectable.
+                                                 * The default is that every row is selectable.
+                                                 */
                                                 type: PropType<
                                                     'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
                                                 >;
@@ -4924,8 +5217,15 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
                                         description: {
                                             type: StringConstructor;
                                             default: any;
-                                        };
+                                        }
+                                        /**
+                                         * If resize is enabled
+                                         */;
                                         headingEl: {
+                                            /**
+                                             * A customisable method to determine if a row is not selectable.
+                                             * The default is that every row is selectable.
+                                             */
                                             type: PropType<
                                                 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
                                             >;
@@ -5070,29 +5370,6 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
                                             };
                                             hasNext: {
                                                 type: BooleanConstructor;
-                                                /**
-                                                 * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
-                                                 *
-                                                 * @example
-                                                 * import { BentoDataGrid } from '@adyen/bento-vue2';
-                                                 *
-                                                 * export default {
-                                                 *     components: { BentoDataGrid },
-                                                 *     template: `
-                                                 *          <bento-data-grid
-                                                 *               :data="[
-                                                 *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
-                                                 *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
-                                                 *               ]"
-                                                 *               :columns="[
-                                                 *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
-                                                 *                  { field: 'company', label: 'Reference' },
-                                                 *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
-                                                 *                ]"
-                                                 *          />
-                                                 *     `
-                                                 * }
-                                                 */
                                                 default: any;
                                             };
                                             hidePageSize: {
@@ -5126,29 +5403,6 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
                                         };
                                         hasNext: {
                                             type: BooleanConstructor;
-                                            /**
-                                             * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
-                                             *
-                                             * @example
-                                             * import { BentoDataGrid } from '@adyen/bento-vue2';
-                                             *
-                                             * export default {
-                                             *     components: { BentoDataGrid },
-                                             *     template: `
-                                             *          <bento-data-grid
-                                             *               :data="[
-                                             *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
-                                             *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
-                                             *               ]"
-                                             *               :columns="[
-                                             *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
-                                             *                  { field: 'company', label: 'Reference' },
-                                             *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
-                                             *                ]"
-                                             *          />
-                                             *     `
-                                             * }
-                                             */
                                             default: any;
                                         };
                                         hidePageSize: {
@@ -5223,6 +5477,13 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
                     type: PropType<BentoDatagridDataItemId[]>;
                     default: () => any[];
                 };
+                /**
+                 * Renders the data grid with no top spacing, to render inside containers that already have spacing
+                 */
+                noSpacingTop: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
                 /**
                  * Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.
                  * It does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.
@@ -5273,6 +5534,7 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
             selectable: boolean;
             selection: BentoDatagridDataItemId[];
             highlightedRows: BentoDatagridDataItemId[];
+            noSpacingTop: boolean;
             tabTitle: string;
         }
     >,
@@ -5351,6 +5613,7 @@ export declare enum BentoDatagridStyleState {
     STICKY_FILTERS = 'sticky-filters',
     OVERFLOW_SHADOW_LEFT = 'overflow-shadow-left',
     OVERFLOW_SHADOW_RIGHT = 'overflow-shadow-right',
+    NO_SPACING_TOP = 'no-spacing-top',
 }
 
 /**
@@ -5376,7 +5639,7 @@ export declare enum BentoDatagridStyleState {
  *     `
  * }
  */
-export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_32<
+export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_35<
     DefineComponent<
         {
             /**
@@ -15822,49 +16085,12 @@ export declare enum BentoStepperVariantOption {
  */
 export declare const BentoStructuredList: __VLS_WithTemplateSlots_30<
     DefineComponent<
-        {
-            /**
-             * Width of the labels container, in pixels. Overrides layout prop.
-             */
-            labelsWidth: {
-                type: NumberConstructor;
-                default: any;
-            };
-            /**
-             * The layout of the label value pair in percentage.
-             * If labelsWidth is set, layout will be overriden by the static pixel value.
-             *
-             * If the value entered is not listed in the example
-             * list below '33-66' will be applied
-             * @example
-             * '25-75'
-             * '33-66'
-             * '42-58'
-             * '50-50'
-             */
-            layout: {
-                type: PropType<BentoStructuredListLayoutOptions>;
-                default: string;
-                validator: (value: BentoStructuredListLayoutOptions) => boolean;
-            };
-        },
-        {},
-        {},
-        {},
-        {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
-        {},
-        string,
-        Readonly<
-            ExtractPropTypes<{
+        __VLS_WithDefaults_4<
+            __VLS_TypePropsToRuntimeProps_5<{
                 /**
                  * Width of the labels container, in pixels. Overrides layout prop.
                  */
-                labelsWidth: {
-                    type: NumberConstructor;
-                    default: any;
-                };
+                labelsWidth?: number;
                 /**
                  * The layout of the label value pair in percentage.
                  * If labelsWidth is set, layout will be overriden by the static pixel value.
@@ -15877,12 +16103,49 @@ export declare const BentoStructuredList: __VLS_WithTemplateSlots_30<
                  * '42-58'
                  * '50-50'
                  */
-                layout: {
-                    type: PropType<BentoStructuredListLayoutOptions>;
-                    default: string;
-                    validator: (value: BentoStructuredListLayoutOptions) => boolean;
-                };
-            }>
+                layout?: BentoStructuredListLayoutOptions;
+            }>,
+            {
+                labelsWidth: any;
+                layout: string;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_4<
+                    __VLS_TypePropsToRuntimeProps_5<{
+                        /**
+                         * Width of the labels container, in pixels. Overrides layout prop.
+                         */
+                        labelsWidth?: number;
+                        /**
+                         * The layout of the label value pair in percentage.
+                         * If labelsWidth is set, layout will be overriden by the static pixel value.
+                         *
+                         * If the value entered is not listed in the example
+                         * list below '33-66' will be applied
+                         * @example
+                         * '25-75'
+                         * '33-66'
+                         * '42-58'
+                         * '50-50'
+                         */
+                        layout?: BentoStructuredListLayoutOptions;
+                    }>,
+                    {
+                        labelsWidth: any;
+                        layout: string;
+                    }
+                >
+            >
         >,
         {
             layout: BentoStructuredListLayoutOptions;
@@ -15919,102 +16182,76 @@ export declare const BentoStructuredList: __VLS_WithTemplateSlots_30<
  *     `
  * }
  */
-export declare const BentoStructuredListItem: DefineComponent<
-    {
-        /**
-         * Label to display for the value
-         */
-        label: {
-            type: StringConstructor;
-            required: true;
-        };
-        /**
-         * Text to display in info icon tooltip in the label to display for the value
-         */
-        labelInfo: {
-            type: StringConstructor;
-            default: any;
-        };
-        /**
-         * Text to copy when the user clicks `Copy` icon
-         */
-        copy: {
-            type: StringConstructor;
-            default: any;
-        };
-        /**
-         * Function to trigger when user clicks `Search` icon
-         */
-        search: {
-            type: PropType<(event: Event) => void>;
-            default: any;
-        };
-        /**
-         * Text to display when the user hovers over `Search` icon
-         */
-        searchTooltip: {
-            type: StringConstructor;
-            default: any;
-        };
-    },
-    {
-        conditionalClasses: ComputedRef<{
-            'b-structured-list-item--condensed': boolean;
-        }>;
-        labelTypographyVariant: ComputedRef<'caption' | 'body'>;
-        labelsWidth: Ref<string>;
-    },
-    {},
-    {},
-    {},
-    ComponentOptionsMixin,
-    ComponentOptionsMixin,
-    {},
-    string,
-    Readonly<
-        ExtractPropTypes<{
+export declare const BentoStructuredListItem: __VLS_WithTemplateSlots_31<
+    DefineComponent<
+        __VLS_TypePropsToRuntimeProps_6<{
             /**
              * Label to display for the value
              */
-            label: {
-                type: StringConstructor;
-                required: true;
-            };
+            label: string;
             /**
              * Text to display in info icon tooltip in the label to display for the value
              */
-            labelInfo: {
-                type: StringConstructor;
-                default: any;
-            };
+            labelInfo?: string;
             /**
              * Text to copy when the user clicks `Copy` icon
              */
-            copy: {
-                type: StringConstructor;
-                default: any;
-            };
+            copy?: string;
             /**
              * Function to trigger when user clicks `Search` icon
              */
-            search: {
-                type: PropType<(event: Event) => void>;
-                default: any;
-            };
+            search?: (event: Event) => void;
             /**
              * Text to display when the user hovers over `Search` icon
              */
-            searchTooltip: {
-                type: StringConstructor;
-                default: any;
-            };
-        }>
+            searchTooltip?: string;
+            /**
+             * Truncates the value of the item
+             */
+            truncate?: boolean;
+        }>,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_TypePropsToRuntimeProps_6<{
+                    /**
+                     * Label to display for the value
+                     */
+                    label: string;
+                    /**
+                     * Text to display in info icon tooltip in the label to display for the value
+                     */
+                    labelInfo?: string;
+                    /**
+                     * Text to copy when the user clicks `Copy` icon
+                     */
+                    copy?: string;
+                    /**
+                     * Function to trigger when user clicks `Search` icon
+                     */
+                    search?: (event: Event) => void;
+                    /**
+                     * Text to display when the user hovers over `Search` icon
+                     */
+                    searchTooltip?: string;
+                    /**
+                     * Truncates the value of the item
+                     */
+                    truncate?: boolean;
+                }>
+            >
+        >,
+        {}
     >,
     {
-        search: (event: Event) => void;
-        copy: string;
-        labelInfo: string;
-        searchTooltip: string;
+        default: (_: {}) => any;
     }
 >;
 
@@ -17065,6 +17302,75 @@ export declare const BentoTabs: DefineComponent<
     {
         tabs: Ref<BentoTab_2[]>;
         tablist: any;
+        tablistwrapper: Ref<
+            Vue3Instance<
+                {},
+                Readonly<
+                    ExtractPropTypes<{
+                        condensed: {
+                            type: BooleanConstructor;
+                            default: boolean;
+                        };
+                        extraPaddingTop: {
+                            type: NumberConstructor;
+                            default: number;
+                        };
+                    }>
+                >,
+                Readonly<
+                    ExtractPropTypes<{
+                        condensed: {
+                            type: BooleanConstructor;
+                            default: boolean;
+                        };
+                        extraPaddingTop: {
+                            type: NumberConstructor;
+                            default: number;
+                        };
+                    }>
+                >,
+                {},
+                {
+                    condensed: boolean;
+                    extraPaddingTop: number;
+                },
+                true,
+                ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>
+            > &
+                Readonly<
+                    Readonly<
+                        ExtractPropTypes<{
+                            condensed: {
+                                type: BooleanConstructor;
+                                default: boolean;
+                            };
+                            extraPaddingTop: {
+                                type: NumberConstructor;
+                                default: number;
+                            };
+                        }>
+                    >
+                > &
+                ShallowUnwrapRef<{}> &
+                ExtractComputedReturns<{}> &
+                ComponentCustomProperties &
+                Readonly<
+                    ExtractPropTypes<{
+                        condensed: {
+                            type: BooleanConstructor;
+                            default: boolean;
+                        };
+                        extraPaddingTop: {
+                            type: NumberConstructor;
+                            default: number;
+                        };
+                    }>
+                > & {
+                    $slots: {
+                        default: (_: {}) => any;
+                    };
+                }
+        >;
         activeTabId: Ref<string>;
         onKeydownTabsNavigation: (e: KeyboardEvent) => void;
         handleTabChange: (tabId: string) => void;
@@ -18375,6 +18681,13 @@ export declare enum BentoTooltipState {
  */
 export declare const BentoTutorial: DefineComponent<
     {
+        /**
+         * The current step index. If provided, will start the tutorial in that step.
+         */
+        index: {
+            type: NumberConstructor;
+            default: any;
+        };
         /**
          * The steps configuration for the tutorial.
          *
@@ -18384,6 +18697,15 @@ export declare const BentoTutorial: DefineComponent<
             required: true;
             validator: (value: BentoTutorialStep[]) => boolean;
         };
+        /**
+         * Options to control the scroll into view behavior.
+         * Takes the same options as the `scrollIntoView` function
+         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView}
+         */
+        scrollOptions: {
+            type: PropType<BentoTutorialScrollOptions>;
+            default: any;
+        };
     },
     {},
     {},
@@ -18391,10 +18713,19 @@ export declare const BentoTutorial: DefineComponent<
     {},
     ComponentOptionsMixin,
     ComponentOptionsMixin,
-    {},
+    {
+        'update:index': (value: number) => void;
+    },
     string,
     Readonly<
         ExtractPropTypes<{
+            /**
+             * The current step index. If provided, will start the tutorial in that step.
+             */
+            index: {
+                type: NumberConstructor;
+                default: any;
+            };
             /**
              * The steps configuration for the tutorial.
              *
@@ -18404,11 +18735,25 @@ export declare const BentoTutorial: DefineComponent<
                 required: true;
                 validator: (value: BentoTutorialStep[]) => boolean;
             };
+            /**
+             * Options to control the scroll into view behavior.
+             * Takes the same options as the `scrollIntoView` function
+             * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView}
+             */
+            scrollOptions: {
+                type: PropType<BentoTutorialScrollOptions>;
+                default: any;
+            };
         }>
     >,
-    {}
+    {
+        index: number;
+        scrollOptions: any;
+    }
 >;
 
+export declare type BentoTutorialScrollOptions = boolean | ScrollIntoViewOptions;
+
 export declare interface BentoTutorialStep {
     target: VueNodeElement | Ref<VueNodeElement>;
     image?: Omit<InstanceType<typeof BentoImage>['$props'], 'aspectRatio'>;
@@ -18436,10 +18781,10 @@ export declare interface BentoTutorialStep {
  *     `
  * }
  */
-export declare const BentoTypography: __VLS_WithTemplateSlots_31<
+export declare const BentoTypography: __VLS_WithTemplateSlots_32<
     DefineComponent<
-        __VLS_WithDefaults_4<
-            __VLS_TypePropsToRuntimeProps_5<{
+        __VLS_WithDefaults_5<
+            __VLS_TypePropsToRuntimeProps_7<{
                 /**
                  * Sets the HTML DOM element.
                  * @values h1, h2, h3, h4, h5, h6, div, p, span
@@ -18490,14 +18835,14 @@ export declare const BentoTypography: __VLS_WithTemplateSlots_31<
         {},
         {},
         {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
+        ComponentOptionsMixin_2,
+        ComponentOptionsMixin_2,
         {},
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_4<
-                    __VLS_TypePropsToRuntimeProps_5<{
+                __VLS_WithDefaults_5<
+                    __VLS_TypePropsToRuntimeProps_7<{
                         /**
                          * Sets the HTML DOM element.
                          * @values h1, h2, h3, h4, h5, h6, div, p, span