@adyen/bento-vue2 1.55.1 → 1.56.0

package/dist/styles/legacy.css

@@ -146,6 +146,7 @@
   --b-filter-bar-select-filter-divider-border-width: 0;
   --b-filter-bar-fixed-scroller-button-condensed-max-height: 28px;
   --b-filter-bar-fixed-scroller-button-condensed-height: 28px;
+  --b-filter-bar-button-secondary-label-background-color: inherit;
   --b-filter-bar-button-label-line-height: 15px;
   --b-filter-bar-button-height: 28px;
   --b-error-message-icon-height: 20px;
@@ -1186,15 +1187,15 @@
   --b-filter-bar-container-gap: var(--b-spacer-040);
   --b-filter-bar-before-filters-gap: var(--b-spacer-040);
   --b-filter-bar-actions-gap: var(--b-spacer-040);
+  --b-filter-bar-filters-gap: var(--b-spacer-040);
+  --b-filter-bar-search-external-container-margin-bottom: var(--b-spacer-040);
   --b-filter-bar-persistent-filters-padding-right: var(--b-spacer-040);
   --b-filter-bar-z-index: var(--b-z-index-global-elevated);
   --b-filter-bar-padding-right: var(--b-spacer-070);
   --b-filter-bar-gap: var(--b-spacer-040);
-  --b-filter-bar-button-secondary-label-hover-color: var(--b-color-grey-50);
   --b-filter-bar-button-secondary-label-padding: var(--b-spacer-010) var(--b-spacer-030);
   --b-filter-bar-button-secondary-label-color: var(--b-color-grey-90);
   --b-filter-bar-button-secondary-label-border-radius: var(--b-border-radius-s);
-  --b-filter-bar-button-secondary-label-background-color: var(--b-color-grey-0);
   --b-filter-bar-button-label-container-gap: var(--b-spacer-050);
   --b-filter-bar-button-hover-color: var(--b-color-label-secondary);
   --b-filter-bar-button-hover-background-color: var(--b-color-white);
@@ -1218,10 +1219,11 @@
   --b-filter-bar-button-with-counter-active-color: var(--b-color-grey-0);
   --b-filter-bar-button-with-counter-active-border-color: var(--b-color-navy-50);
   --b-filter-bar-button-with-counter-active-background-color: var(--b-color-navy-50);
+  --b-filter-bar-button-with-counter-container-padding-right: var(--b-spacer-020);
   --b-filter-bar-button-with-counter-color: var(--b-color-grey-0);
   --b-filter-bar-button-with-counter-border: var(--b-border-width-s) solid var(--b-color-navy-40);
   --b-filter-bar-button-with-counter-background-color: var(--b-color-navy-40);
-  --b-filter-bar-button-with-counter-container-padding-right: var(--b-spacer-020);
+  --b-filter-bar-button-with-counter-padding-right: var(--b-spacer-020);
   --b-filter-bar-button-disabled-color: var(--b-color-grey-40);
   --b-filter-bar-button-disabled-background-color: var(--b-color-grey-10);
   --b-filter-bar-button-applied-filter-open-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary-active);
@@ -1235,11 +1237,16 @@
   --b-filter-bar-button-applied-background-color: var(--b-color-background-inverse-secondary);
   --b-filter-bar-button-attention-outline: 0.5px solid var(--b-color-outline-secondary-active);
   --b-filter-bar-button-attention-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
-  --b-filter-bar-button-active-background-color: var(--b-color-grey-10);
   --b-filter-bar-button-active-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
+  --b-filter-bar-button-icon-only-padding: var(--b-spacer-020);
+  --b-filter-bar-button-padding: var(--b-spacer-020) var(--b-spacer-050);
   --b-filter-bar-button-color: var(--b-color-grey-90);
   --b-filter-bar-button-border-radius: var(--b-border-radius-m);
   --b-filter-bar-button-border: var(--b-border-width-s) solid var(--b-color-grey-20);
+  --b-filter-bar-button-group-button-active-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary-active);
+  --b-filter-bar-button-group-button-hover-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary-hover);
+  --b-filter-bar-button-group-button-padding: var(--b-spacer-020);
+  --b-filter-bar-button-group-button-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary);
   --b-file-uploader-restrictions-error-color: var(--b-color-label-critical);
   --b-file-uploader-restrictions-disabled-color: var(--b-color-label-disabled);
   --b-file-uploader-restrictions-margin-top: var(--b-spacer-020);
@@ -1498,6 +1505,8 @@
   --b-data-grid-template-data-grid-columns-padding-left: var(--b-spacer-050);
   --b-data-grid-template-data-grid-filters-padding-right: var(--b-spacer-090);
   --b-data-grid-template-tabs-padding: var(--b-spacer-000) var(--b-spacer-090);
+  --b-data-grid-template-additional-content-z-index: var(--b-z-index-local-tier-2);
+  --b-data-grid-template-additional-content-padding: var(--b-spacer-000) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-additional-content-margin: var(--b-spacer-000) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-header-z-index: var(--b-z-index-local-tier-3);
   --b-data-grid-template-header-margin: var(--b-spacer-080) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
@@ -2089,6 +2098,7 @@
   --b-data-grid-column-headers-background-color: var(--b-color-background-primary);
   --b-data-grid-border-color: var(--b-color-neutral-20);
   --b-data-grid-template-tabs-background-color: var(--b-color-background-primary);
+  --b-data-grid-template-additional-content-background-color: var(--b-color-background-primary);
   --b-dashboard-template-sticky-items-background-color: var(--b-color-background-primary);
   --b-code-snippet-language-picker-background-color: var(--b-color-background-primary);
   --b-checkbox-text-disabled-color: var(--b-color-neutral-40);

package/dist/styles/styleguide.css

@@ -1290,13 +1290,14 @@
   --b-filter-bar-container-gap: var(--b-spacer-040);
   --b-filter-bar-before-filters-gap: var(--b-spacer-040);
   --b-filter-bar-actions-gap: var(--b-spacer-040);
+  --b-filter-bar-filters-gap: var(--b-spacer-040);
+  --b-filter-bar-search-external-container-margin-bottom: var(--b-spacer-040);
   --b-filter-bar-persistent-filters-padding-right: var(--b-spacer-040);
   --b-filter-bar-persistent-filters-border-color: var(--b-color-outline-secondary);
   --b-filter-bar-z-index: var(--b-z-index-global-elevated);
   --b-filter-bar-padding-right: var(--b-spacer-070);
   --b-filter-bar-gap: var(--b-spacer-040);
-  --b-filter-bar-button-secondary-label-hover-color: var(--b-color-label-inverse-primary);
-  --b-filter-bar-button-secondary-label-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-secondary-label-color: var(--b-color-label-primary);
   --b-filter-bar-button-label-container-gap: var(--b-spacer-020);
   --b-filter-bar-button-hover-color: var(--b-color-label-secondary);
   --b-filter-bar-button-hover-background-color: var(--b-color-background-primary-hover);
@@ -1317,6 +1318,7 @@
   --b-filter-bar-button-container-gap: var(--b-spacer-040);
   --b-filter-bar-button-with-secondary-label-container-padding-right: var(--b-spacer-050);
   --b-filter-bar-button-with-counter-container-padding-right: var(--b-spacer-020);
+  --b-filter-bar-button-with-counter-padding-right: var(--b-spacer-020);
   --b-filter-bar-button-disabled-color: var(--b-color-label-disabled);
   --b-filter-bar-button-disabled-background-color: var(--b-color-background-primary);
   --b-filter-bar-button-applied-filter-open-color: var(--b-color-label-inverse-primary);
@@ -1334,10 +1336,16 @@
   --b-filter-bar-button-attention-outline: 0.5px solid var(--b-color-outline-secondary-active);
   --b-filter-bar-button-attention-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
   --b-filter-bar-button-active-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
+  --b-filter-bar-button-icon-only-padding: var(--b-spacer-020);
+  --b-filter-bar-button-padding: var(--b-spacer-020) var(--b-spacer-050);
   --b-filter-bar-button-color: var(--b-color-label-primary);
   --b-filter-bar-button-border-radius: var(--b-border-radius-m);
   --b-filter-bar-button-border: var(--b-border-width-s) solid var(--b-color-outline-secondary);
   --b-filter-bar-button-background-color: var(--b-color-background-primary);
+  --b-filter-bar-button-group-button-active-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary-active);
+  --b-filter-bar-button-group-button-hover-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary-hover);
+  --b-filter-bar-button-group-button-padding: var(--b-spacer-020);
+  --b-filter-bar-button-group-button-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary);
   --b-file-uploader-restrictions-error-color: var(--b-color-label-critical);
   --b-file-uploader-restrictions-disabled-color: var(--b-color-label-disabled);
   --b-file-uploader-restrictions-margin-top: var(--b-spacer-020);
@@ -1613,7 +1621,10 @@
   --b-data-grid-template-data-grid-filters-padding-right: var(--b-spacer-090);
   --b-data-grid-template-tabs-padding: var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-tabs-background-color: var(--b-color-background-primary);
+  --b-data-grid-template-additional-content-z-index: var(--b-z-index-local-tier-2);
+  --b-data-grid-template-additional-content-padding: var(--b-spacer-000) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-additional-content-margin: var(--b-spacer-000) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
+  --b-data-grid-template-additional-content-background-color: var(--b-color-background-primary);
   --b-data-grid-template-header-z-index: var(--b-z-index-local-tier-3);
   --b-data-grid-template-header-margin: var(--b-spacer-080) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-gap: var(--b-spacer-060);

package/dist/summary-grid.js

@@ -1,4 +1,4 @@
-import { s as r, a as t, e as a, b as o, c as i, B as n, d as u, f as d } from "./chunks/summary-grid.types.DoD7Ls0O.js";
+import { s as r, a as t, e as a, b as o, c as i, B as n, d as u, f as d } from "./chunks/summary-grid.types.D-OotxnX.js";
 export {
   r as BentoSummaryGrid,
   t as BentoSummaryGridItemAmount,

package/dist/tabs.js

@@ -1,4 +1,4 @@
-import { B as e, a as s } from "./chunks/tabs.T3A3YNdF.js";
+import { B as e, a as s } from "./chunks/tabs.BfL4CUD1.js";
 export {
   e as BentoTab,
   s as BentoTabs

package/dist/textarea.js

@@ -1,4 +1,4 @@
-import { B as o } from "./chunks/textarea.CrPdkIGL.js";
+import { B as o } from "./chunks/textarea.BkUzMu8d.js";
 export {
   o as BentoTextarea
 };

package/dist/timeline.js

@@ -1,4 +1,4 @@
-import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.B6XTUyr8.js";
+import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.DcutETie.js";
 export {
   t as BentoTimeline,
   i as BentoTimelineGapUnit,

package/dist/toast.js

@@ -1,4 +1,4 @@
-import { t as a } from "./chunks/toast.CjJW9t4G.js";
+import { t as a } from "./chunks/toast.BV0qP2AF.js";
 export {
   a as BentoToast
 };

package/dist/tutorial.js

@@ -1,4 +1,4 @@
-import { t as r } from "./chunks/tutorial.CTzjDY6m.js";
+import { t as r } from "./chunks/tutorial.AOMH-Jq3.js";
 export {
   r as BentoTutorial
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.55.1",
+  "version": "1.56.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -751,6 +751,15 @@
                 "kind": "expression",
                 "type": "BentoPopover.props.fitContent"
               }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the filter, used for v-model.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoFilterBarValue"
+              },
+              "default": "undefined"
             }
           ],
           "slots": [
@@ -988,102 +997,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-code-snippet",
-          "description": "A code-snippet is a container to display code in a readable way.\nCome with added functionalities like syntax highlighting, editing and actioning the code",
-          "attributes": [
-            {
-              "name": "variant",
-              "description": "Defines the variant of code-snippet",
-              "value": {
-                "kind": "expression",
-                "type": "BentoCodeSnippetVariant | `${BentoCodeSnippetVariant}`"
-              },
-              "default": "BentoCodeSnippetVariant.MULTILINE"
-            },
-            {
-              "name": "lang",
-              "description": "Language name for syntax highlighting rules",
-              "value": {
-                "kind": "expression",
-                "type": "BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`"
-              },
-              "default": "BentoCodeSnippetSupportedLanguage.JSON"
-            },
-            {
-              "name": "langLabel",
-              "description": "Label to show in the action-bar, describing the language",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "content",
-              "description": "The code content",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "''"
-            },
-            {
-              "name": "editable",
-              "description": "Allows editing of the code-snippet content by the user",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "actionable",
-              "description": "Displays a button that when clicked will emit an action event\nLeaves to the parent component the logic of what to do with it",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "expandable",
-              "description": "Displays a button that can expand the codeblock into a modal to easily\nview large blocks of code.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "actionableText",
-              "description": "Displays a button that when clicked will emit a run event\nLeaves to the parent component the logic of what to do with it",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "'run'"
-            },
-            {
-              "name": "loading",
-              "description": "Toggles the loading indicator within the action bar",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "slots": [
-            {
-              "name": "empty-state"
-            }
-          ],
-          "source": {
-            "module": "./src/components/code-snippet/code-snippet.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-country",
           "description": "A component to display a country's label.\nThe label comes in four variates: iso code, country name, phone number code or capital city.",
@@ -3932,6 +3845,111 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "code-snippet",
+          "description": "",
+          "attributes": [
+            {
+              "name": "actionable",
+              "required": false,
+              "description": "Displays a button that when clicked will emit an action event\nLeaves to the parent component the logic of what to do with it",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "actionableText",
+              "required": false,
+              "description": "Displays a button that when clicked will emit a run event\nLeaves to the parent component the logic of what to do with it",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "content",
+              "required": false,
+              "description": "The code content",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
+            {
+              "name": "expandable",
+              "required": false,
+              "description": "Displays a button that can expand the codeblock into a modal to easily\nview large blocks of code.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "editable",
+              "required": false,
+              "description": "Allows editing of the code-snippet content by the user",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "lang",
+              "required": false,
+              "description": "Language name for syntax highlighting rules",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoCodeSnippetSupportedLanguage.JSON"
+            },
+            {
+              "name": "langLabel",
+              "required": false,
+              "description": "Label to show in the action-bar, describing the language",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "loading",
+              "required": false,
+              "description": "Toggles the loading indicator within the action bar",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "variant",
+              "required": false,
+              "description": "Defines the variant of code-snippet",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoCodeSnippetVariant.MULTILINE"
+            }
+          ],
+          "slots": [
+            {
+              "name": "empty-state"
+            }
+          ],
+          "source": {
+            "module": "./src/components/code-snippet/code-snippet.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "conditional-stepper-stub",
           "description": "",
@@ -4171,6 +4189,26 @@
               },
               "default": "'top'"
             },
+            {
+              "name": "popoverSize",
+              "required": false,
+              "description": "The size of the popover",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "'fit-content'"
+            },
+            {
+              "name": "teleport",
+              "required": false,
+              "description": "Teleports the component outside of the parent container into\nthe target \"to\" element",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDashedUnderlineTeleport"
+              },
+              "default": "() => ({\n    disabled: true,\n})"
+            },
             {
               "name": "tooltipText",
               "required": false,
@@ -4205,6 +4243,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "dashed-underline-inside-grid-stub",
+          "description": "",
+          "source": {
+            "module": "./src/components/dashed-underline/__tests__/dashed-underline-inside-grid-stub.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "data-grid",
           "description": "",
@@ -4290,6 +4336,15 @@
               },
               "default": "undefined"
             },
+            {
+              "name": "filtersContainerSizeLayout",
+              "description": "Defines the layout (multi-line or one-line) to be used in the filter bar for different\ncontainer sizes:\n- Large (>=700px): Always multi-line\n- Medium (>=430px & <700px)\n- Small (<430px)",
+              "value": {
+                "kind": "expression",
+                "type": "BentoFilterBarContainerSizeLayout"
+              },
+              "default": "undefined"
+            },
             {
               "name": "filterValues",
               "description": "An array of the values for each filter set in `value`.\n{@see BentoFilterValues}",
@@ -7149,7 +7204,7 @@
             {
               "name": "modelValue",
               "required": false,
-              "description": "Used to support `v-model`. Doesn't actually set the value of the file uploader.",
+              "description": "Used to support `v-model`. Can be used to set value of FileUploader if FileList",
               "value": {
                 "kind": "expression",
                 "type": "BentoFileUploaderValue"
@@ -7190,9 +7245,13 @@
               "name": "change",
               "description": "Emitted when files are added or removed.\nProvides the entire list of files available.\nCan be undefined if the list is empty"
             },
+            {
+              "name": "input",
+              "description": "Vue2: Emitted when files are added or removed. Updates the v-model.\nProvides the entire list of files available.\nCan be undefined if the list is empty"
+            },
             {
               "name": "update:modelValue",
-              "description": "Emitted when files are added or removed. Updates the v-model.\nProvides the entire list of files available.\nCan be undefined if the list is empty"
+              "description": "Vue3: Emitted when files are added or removed. Updates the v-model.\nProvides the entire list of files available.\nCan be undefined if the list is empty"
             },
             {
               "name": "error:upload",
@@ -7426,6 +7485,16 @@
               },
               "default": "() => []"
             },
+            {
+              "name": "containerSizeLayout",
+              "required": false,
+              "description": "Defines the layout (multi-line or one-line) to be used in the filter bar for different\ncontainer sizes:\n- Large (>=700px): Always multi-line\n- Medium (>=430px & <700px)\n- Small (<430px)",
+              "value": {
+                "kind": "expression",
+                "type": "BentoFilterBarContainerSizeLayout"
+              },
+              "default": "() => ({\n    medium: 'one-line',\n    small: 'multi-line',\n})"
+            },
             {
               "name": "search",
               "required": false,
@@ -7558,6 +7627,69 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "filter-bar-button-group",
+          "description": "",
+          "attributes": [
+            {
+              "name": "isActive",
+              "required": false,
+              "description": "Whether the button group is active.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "skipGrouping",
+              "required": false,
+              "description": "Whether to skip grouping the buttons. Used to simplify usage of multiple v-ifs.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/filter-bar-button-group/filter-bar-button-group.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "filter-bar-button-group-mock",
+          "description": "",
+          "attributes": [
+            {
+              "name": "isActive",
+              "required": false,
+              "description": "Whether the button group is active.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "skipGrouping",
+              "required": false,
+              "description": "Whether to skip grouping the buttons. Used to simplify usage of multiple v-ifs.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/filter-bar-button-group/__tests__/filter-bar-button-group-mock.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "filter-bar-toast-stub",
           "description": "",
@@ -12961,6 +13093,16 @@
               },
               "default": "null"
             },
+            {
+              "name": "underlinePopoverSize",
+              "required": false,
+              "description": "Size of the popover of a dashed-underline title",
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "'fit-content'"
+            },
             {
               "name": "secondaryTrendDirection",
               "required": false,
@@ -13091,6 +13233,16 @@
               },
               "default": "null"
             },
+            {
+              "name": "underlinePopoverSize",
+              "required": false,
+              "description": "Size of the popover of a dashed-underline title",
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "'fit-content'"
+            },
             {
               "name": "secondaryTrendDirection",
               "required": false,
@@ -13263,6 +13415,16 @@
               },
               "default": "false"
             },
+            {
+              "name": "underlinePopoverSize",
+              "required": false,
+              "description": "Size of the popover of a dashed-underline title",
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "'fit-content'"
+            },
             {
               "name": "underlineTooltipText",
               "required": false,
@@ -13301,6 +13463,16 @@
               },
               "default": "null"
             },
+            {
+              "name": "underlinePopoverSize",
+              "required": false,
+              "description": "Size of the popover of a dashed-underline title",
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "'fit-content'"
+            },
             {
               "name": "secondaryTrendDirection",
               "required": false,
@@ -13434,6 +13606,16 @@
               },
               "default": "null"
             },
+            {
+              "name": "underlinePopoverSize",
+              "required": false,
+              "description": "Size of the popover of a dashed-underline title",
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "'fit-content'"
+            },
             {
               "name": "secondaryTrendDirection",
               "required": false,
@@ -13605,6 +13787,16 @@
                 "type": "string"
               }
             },
+            {
+              "name": "underlinePopoverSize",
+              "required": false,
+              "description": "Size of the popover of a dashed-underline title",
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "'fit-content'"
+            },
             {
               "name": "underlineTooltipText",
               "required": false,