@ironsource/shared-ui 2.1.9-test.0 → 2.1.9-test.1

package/ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_76c74f58_lang.css

@@ -0,0 +1 @@
+.button-trigger.open[data-v-76c74f58]{background:var(--action-selected);outline:2px solid var(--action-active);outline-offset:-2px;transition:outline 0s}.button-trigger.open[data-v-76c74f58]:hover{background:var(--action-selected)}

package/ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_49bd7193_lang.css

@@ -0,0 +1 @@
+.chip-trigger[data-v-49bd7193]{border:1px solid var(--default-outlined-border);padding:.3125rem .3125rem .3125rem .4375rem;border-radius:100px;cursor:pointer;user-select:none;display:inline-flex}.chip-trigger[data-v-49bd7193]:hover{border-color:var(--action-active);background:var(--action-selected)}.chip-trigger.active[data-v-49bd7193]{border:none;background:var(--primary-light);padding:.375rem .375rem .375rem .5rem}.chip-trigger.active .chip-trigger--content[data-v-49bd7193]{color:var(--primary-contrast-text)}.chip-trigger.active[data-v-49bd7193]:hover{border:.0625rem solid var(--primary-main-50-p);padding:.3125rem .3125rem .3125rem .4375rem}.chip-trigger.open[data-v-49bd7193]{border:.125rem solid var(--action-active);padding:.25rem .25rem .25rem .375rem;background:var(--action-selected)}.chip-trigger.open.active[data-v-49bd7193]{border:.125rem solid var(--primary-main-50-p);background:var(--primary-light);padding:.25rem .25rem .25rem .375rem}.chip-trigger.disabled[data-v-49bd7193]{cursor:auto}.chip-trigger--content[data-v-49bd7193]{color:var(--text-primary);display:flex;column-gap:4px}.chip-trigger--content .x-circle-wrapper[data-v-49bd7193]{color:var(--primary-dark)}.chip-trigger--content .x-circle-wrapper[data-v-49bd7193]:hover{color:var(--primary-darker)}.chip-trigger--icon[data-v-49bd7193]{color:var(--action-active)}

package/DataGrid.vue_vue_type_style_index_0_scoped_0cd8af73_lang.css

@@ -0,0 +1 @@
+.sticky[data-v-0cd8af73]{position:sticky}.table-container[data-v-0cd8af73]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-0cd8af73]{display:flex;align-items:center;height:calc(var(--spacing-800) - 1px);border-bottom:1px solid var(--common-divider);background-color:var(--background-paper-elevation-0);position:sticky;left:0;padding:var(--spacing-300)}.table-header .table-title[data-v-0cd8af73]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-0cd8af73]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-0cd8af73]{width:13.75rem}.table-header.isStickyHeader[data-v-0cd8af73]{z-index:calc(var(--158e1032) + 3);top:0}.table-head-container[data-v-0cd8af73]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-0cd8af73]{color:var(--text-primary);background-color:var(--background-paper-elevation-0);padding:0 var(--spacing-300);display:flex;align-items:center;min-height:var(--spacing-600);border:1px solid var(--common-divider);border-radius:var(--border-radius-md);border-top-right-radius:0;border-top-left-radius:0}.table-body-wrapper[data-v-0cd8af73]{display:inline-table}.table-header-actions[data-v-0cd8af73]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-0cd8af73]{position:relative}.table-row.loading[data-v-0cd8af73]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-0cd8af73]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-0cd8af73]{border-bottom:none}.expanded-row[data-v-0cd8af73]{grid-column:var(--db8e3dca);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-0cd8af73]{position:relative;display:block;overflow:auto;background:var(--background-paper-elevation-0);border:1px solid var(--common-divider);color:var(--text-primary);text-align:left;table-layout:fixed;width:100%;max-height:100%;border-radius:var(--border-radius-md);border-collapse:collapse;border-spacing:0}table.hasFooter[data-v-0cd8af73]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-0cd8af73],table th[data-v-0cd8af73]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-0cd8af73]:first-of-type,table th[data-v-0cd8af73]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-0cd8af73]:last-of-type,table th[data-v-0cd8af73]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-0cd8af73],table th.expand-toggle-cell[data-v-0cd8af73]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-0cd8af73]{border-bottom:none;z-index:calc(var(--158e1032) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-0cd8af73]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--a15dcd58)}table>thead>tr>th[data-v-0cd8af73]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.bordered[data-v-0cd8af73]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-0cd8af73]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-0cd8af73]{justify-content:flex-end}table>thead>tr>th.isSortable[data-v-0cd8af73]{cursor:pointer}table>thead.sticky[data-v-0cd8af73]{position:sticky;top:0;background:white}table>thead.isStickyHeader[data-v-0cd8af73]{z-index:calc(var(--158e1032) + 2);top:calc(var(--spacing-800) - 1px)}table>tbody[data-v-0cd8af73]{display:block}table>tbody>*>tr[data-v-0cd8af73]{background-color:var(--background-default);min-height:var(--f7400c48);height:auto;display:grid;align-items:center;grid-template-columns:var(--a15dcd58)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-0cd8af73]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-0cd8af73],table>tbody>*>tr.activeMenu>td[data-v-0cd8af73]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-0cd8af73]{background-color:var(--background-default);border:none;min-width:0;display:flex;min-height:var(--f7400c48);height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-0cd8af73]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-0cd8af73]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-0cd8af73]{justify-content:flex-end;text-align:right}.section-container[data-v-0cd8af73]{left:0}.sections[data-v-0cd8af73]{display:flex}.section[data-v-0cd8af73]{padding:0 1.5rem;background:var(--background-default);left:0;height:32px;display:flex;align-items:flex-end;border-right:1px solid var(--common-divider)}.table-cell[data-v-0cd8af73]{width:100%}.empty-state[data-v-0cd8af73]{min-height:250px}.floating-row[data-v-0cd8af73]{display:flex;inset:0;pointer-events:none;position:absolute;z-index:calc(var(--158e1032) + 1)}.floating-row *[data-v-0cd8af73-s]{pointer-events:auto}

package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_9fa84b26_lang.css

@@ -0,0 +1 @@
+.default-dropdown-wrapper[data-v-9fa84b26]{position:relative}.dropdown-trigger[data-v-9fa84b26]{width:100%;padding:.3125rem .4375rem;display:flex;column-gap:.25rem;max-width:100%;box-sizing:border-box;border-radius:var(--border-radius-md);border:1px solid var(--action-outlined-border);background:var(--default-main);cursor:pointer;user-select:none;position:relative}.dropdown-trigger[data-v-9fa84b26]:hover{border:1px solid var(--action-active);background:var(--action-hover)}.dropdown-trigger.small[data-v-9fa84b26]{padding:.1875rem .4375rem}.dropdown-trigger.large[data-v-9fa84b26]{padding:.5625rem .4375rem}.dropdown-trigger.disabled[data-v-9fa84b26]{border:1px solid var(--action-outlined-border, #bbb);background:var(--action-disabled-background, #f1f1f1);cursor:not-allowed}.dropdown-trigger.disabled .displayed-value[data-v-9fa84b26],.dropdown-trigger.disabled .caret-down[data-v-9fa84b26]{color:var(--text-disabled)}.dropdown-trigger.open[data-v-9fa84b26]{padding:.25rem .375rem;border:2px solid var(--primary-main)}.dropdown-trigger.open.small[data-v-9fa84b26]{padding:.125rem .375rem}.dropdown-trigger.open.large[data-v-9fa84b26]{padding:.5rem .375rem}.dropdown-trigger.state-error[data-v-9fa84b26],.dropdown-trigger.state-success[data-v-9fa84b26],.dropdown-trigger.state-warning[data-v-9fa84b26]{padding:4px 6px}.dropdown-trigger.state-error.small[data-v-9fa84b26],.dropdown-trigger.state-success.small[data-v-9fa84b26],.dropdown-trigger.state-warning.small[data-v-9fa84b26]{padding:.1875rem .4375rem}.dropdown-trigger.state-error.large[data-v-9fa84b26],.dropdown-trigger.state-success.large[data-v-9fa84b26],.dropdown-trigger.state-warning.large[data-v-9fa84b26]{padding:.5625rem .4375rem}.dropdown-trigger.state-error[data-v-9fa84b26]{border:2px solid var(--error-main)}.dropdown-trigger.state-success[data-v-9fa84b26]{border:2px solid var(--success-main)}.dropdown-trigger.state-warning[data-v-9fa84b26]{border:2px solid var(--warning-dark)}.dropdown-trigger .caret-down[data-v-9fa84b26]{color:var(--action-active)}.content[data-v-9fa84b26]{display:flex;flex:1;gap:.25rem;align-items:center;color:var(--text-primary)}.content .displayed-value[data-v-9fa84b26]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content .image[data-v-9fa84b26]{width:20px;height:20px;flex:none}.content .image img[data-v-9fa84b26]{border-radius:4px;width:100%;height:100%}.content .start-icon[data-v-9fa84b26]{display:flex;color:var(--action-active)}.content .status-dot[data-v-9fa84b26]{padding-right:.25rem}.content .status-dot>div[data-v-9fa84b26]{position:relative;top:-1px}.dropdown-field-label[data-v-9fa84b26]{color:var(--text-primary)}.dropdown-field-help-text[data-v-9fa84b26]{margin-top:4px;position:absolute}.flag[data-v-9fa84b26]{width:16px;height:16px}.flag img[data-v-9fa84b26]{width:16px;height:16px;border-radius:50%}

package/DropdownV4.vue_vue_type_style_index_0_scoped_360883b1_lang.css

@@ -0,0 +1 @@
+.v-enter-active[data-v-360883b1],.v-leave-active[data-v-360883b1]{transition:opacity .25s ease}ol[data-v-360883b1],ul[data-v-360883b1],menu[data-v-360883b1]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-360883b1],.dropdown.full-width .button__container[data-v-360883b1]{width:100%}.dropdown-list-wrapper[data-v-360883b1]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-360883b1]{padding:.5rem}.list-container--multi[data-v-360883b1]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-360883b1]{padding-bottom:.25rem;display:flex;flex-direction:row;gap:.25rem}.inline-search .list-container[data-v-360883b1]{padding-top:0}.inline-search-wrapper[data-v-360883b1]{padding-bottom:.25rem;display:flex;flex-direction:row;gap:.25rem}.no-result-container[data-v-360883b1]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-360883b1]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-360883b1]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-360883b1]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.image-slot[data-v-360883b1]{margin-right:.5rem}.actions-wrapper[data-v-360883b1]{display:flex;width:100%;padding:.5rem .5rem .5rem .125rem;padding-bottom:0;border-top:1px solid var(--common-divider);justify-content:space-between;margin-top:.25rem}.apply-button[data-v-360883b1]{margin-left:.5rem}

package/MultipleDataGrid.vue_vue_type_style_index_0_scoped_020a9896_lang.css

@@ -0,0 +1 @@
+.multi-table-container[data-v-020a9896]{border-radius:var(--border-radius-md);border:1px solid var(--common-divider);display:flex;flex-direction:column;overflow-y:auto;width:100%}.multi-table-container .table-header-container[data-v-020a9896]{align-items:center;background-color:var(--background-paper-elevation-0);display:flex;height:calc(var(--spacing-800) - 2px);justify-content:space-between;padding:var(--spacing-300);width:100%}.multi-table-container .table-header-container.sticky[data-v-020a9896]{position:sticky;top:0;z-index:calc(var(--81d1b864) + 3)}.multi-table-container[data-v-020a9896] table{display:table;border:unset;border-radius:unset}.multi-table-container[data-v-020a9896] thead{border-top:1px solid var(--common-divider)}.multi-table-container .tables-container[data-v-020a9896] thead.sticky{top:62px}.multi-table-container .empty-state[data-v-020a9896]{min-height:250px}.multi-table-container .table-header-right[data-v-020a9896]{align-items:center;display:flex;height:100%}.multi-table-container .table-header-right .table-header-actions[data-v-020a9896]{align-items:center;display:flex;margin-left:var(--spacing-100)}

package/OptionV4.vue_vue_type_style_index_0_scoped_058de532_lang.css

@@ -0,0 +1 @@
+.label[data-v-058de532]{color:#41454d}.item-container[data-v-058de532]{width:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--border-radius-lg);margin-bottom:.25rem;color:var(--text-primary);padding:6px 8px}.item-container--disabled[data-v-058de532]{cursor:initial;color:var(--text-disabled)}.item-container[data-v-058de532]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-058de532],.item-container[data-v-058de532]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-058de532]{background-color:var(--action-selected)}.subtitle[data-v-058de532]{color:#7b838c;line-height:1rem}.clear-button[data-v-058de532]{display:flex;padding:0 4px;color:#7b838c;align-items:center;height:auto;background-image:none;min-width:auto;border:none;background-color:transparent}.clear-button[data-v-058de532]:hover{color:#3083ff}.item[data-v-058de532]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-058de532],.item--multi[data-v-058de532]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-058de532]{width:20px;height:20px;flex:none}.item .image img[data-v-058de532]{width:20px;height:20px;border-radius:4px}.item .flag[data-v-058de532]{width:16px;height:16px}.item .flag img[data-v-058de532]{width:16px;height:16px;border-radius:50%}.item .start-icon[data-v-058de532],.item .end-icon[data-v-058de532]{display:flex;color:var(--action-active)}.item .option-text[data-v-058de532]{line-height:1.1875rem}.text-container[data-v-058de532]{width:100%;text-overflow:ellipsis;overflow:hidden}.tooltip-option[data-v-058de532]{display:block}.tooltip-option[data-v-058de532] .container{width:100%}.app-trigger--icon[data-v-058de532]{color:var(--action-active);transform:rotate(-90deg);transition:transform .2s}.app-trigger--icon.expanded[data-v-058de532]{transform:rotate(0)}.option-content-horizontal[data-v-058de532]{display:flex;justify-content:space-between;gap:.5rem}.option-content-vertical[data-v-058de532]{display:flex;flex-direction:column}.option-text .main-text[data-v-058de532]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.option-text .caption-text[data-v-058de532]{color:var(--text-secondary)}

package/PopoverV4.vue_vue_type_style_index_0_scoped_74bbce13_lang.css

@@ -0,0 +1 @@
+div[data-v-74bbce13]{display:block}

package/RadioButtonV4.vue_vue_type_style_index_0_scoped_05c7bca2_lang.css

@@ -0,0 +1 @@
+.radio-button[data-v-05c7bca2]{display:flex;flex-direction:column}.radio-button--disabled[data-v-05c7bca2],.radio-button--disabled .label[data-v-05c7bca2]{cursor:default}.wrapper-with-description[data-v-05c7bca2]{display:flex}.wrapper[data-v-05c7bca2]{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;background-color:transparent;outline:0;border:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;border-radius:50%;margin:0 var(--spacing-100) 0 0}.label[data-v-05c7bca2]{cursor:pointer;color:var(--text-primary);flex-direction:column;display:inline-flex}.label--disabled[data-v-05c7bca2]{color:var(--text-disabled)}input[data-v-05c7bca2]{cursor:inherit;position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;margin:0;padding:0;z-index:1}.circle[data-v-05c7bca2]{border-radius:50%;width:var(--spacing-200);height:var(--spacing-200);transition:all .2s ease-in-out 0s;background-color:var(--default-main);box-shadow:var(--default-outlined-border) 0 0 0 1px inset}.circle--selected[data-v-05c7bca2]{background-color:var(--primary-main);box-shadow:var(--primary-dark) 0 0 0 1px inset}.circle--selected[data-v-05c7bca2]:before{display:block;width:var(--spacing-200);height:var(--spacing-200);background-image:radial-gradient(var(--common-white),var(--common-white) 3px,transparent 28%);content:""}.circle--disabled[data-v-05c7bca2]{background-color:var(--action-disabled-background);box-shadow:var(--action-hover) 0 0 0 1px inset}.circle--disabled.circle--selected[data-v-05c7bca2]{background-color:var(--primary-light);box-shadow:var(--primary-main-50-p) 0 0 0 1px inset}.circle--disabled.circle--selected[data-v-05c7bca2]:before{display:block;width:var(--spacing-200);height:var(--spacing-200);background-image:radial-gradient(var(--primary-main-50-p),var(--primary-main-50-p) 3px,transparent 28%);content:""}.radio-button:hover .circle[data-v-05c7bca2]:not(.circle--selected):not(.circle--disabled){box-shadow:var(--action-active) 0 0 0 1px inset}.label-description[data-v-05c7bca2]{color:var(--text-secondary)}

package/ToggleButtonGroupAB.vue_vue_type_style_index_0_scoped_9d9e51c0_lang.css

@@ -0,0 +1 @@
+.group-button-wrapper[data-v-9d9e51c0]{display:flex}.group-button-wrapper[data-v-9d9e51c0] button{border-radius:0}.group-button-wrapper .toggle-button[data-v-9d9e51c0]:nth-child(1){border-top-left-radius:var(--border-radius-md);border-bottom-left-radius:var(--border-radius-md);border-right:none;background-color:var(--common-inverse-white);width:32px}.group-button-wrapper .toggle-button[data-v-9d9e51c0]:nth-child(2){border-right:none;border-left:none;width:32px}.group-button-wrapper .toggle-button[data-v-9d9e51c0]:last-child{border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:var(--border-radius-md);border-right:1px solid var(--default-outlined-border)}.group-button-wrapper .toggle-button[data-v-9d9e51c0]:nth-child(3){padding:0}.group-button-wrapper .popover-trigger[data-v-9d9e51c0]{padding:5px 3px}.group-button-wrapper .trigger-active[data-v-9d9e51c0]{background:var(--default-light)}.group-button-wrapper .primary[data-v-9d9e51c0]{border-color:var(--default-outlined-border);color:var(--action-active)}.group-button-wrapper .toggle-button[data-v-9d9e51c0]:nth-child(3):hover,.group-button-wrapper .toggle-button[data-v-9d9e51c0]:nth-child(1):not(.selected-a):hover,.group-button-wrapper .toggle-button[data-v-9d9e51c0]:nth-child(2):not(.selected-b):hover{background-color:var(--action-hover)}.group-button-wrapper .toggle-button.selected-a[data-v-9d9e51c0],.group-button-wrapper .toggle-button.selected-a[data-v-9d9e51c0]:hover{background-color:var(--aba);color:var(--common-inverse-white)}.group-button-wrapper .toggle-button.selected-b[data-v-9d9e51c0],.group-button-wrapper .toggle-button.selected-b[data-v-9d9e51c0]:hover{background-color:var(--abb);color:var(--common-inverse-white)}

package/components/alert/Alert.vue2.js

@@ -5,9 +5,10 @@ import "../icon/v4/IconFlag.vue.js";
 import E from "../button/v4/ButtonV4.vue.js";
 import S from "../button/v4/IconButtonV4.vue.js";
 import "../button/v4/ButtonGroup.vue.js";
+import "../button/v4/ToggleButtonGroupAB.vue.js";
 import { useTestIdAttrs as h } from "../../utils/testIds.js";
 import { AlertTestIdModifiers as o } from "../../testids/index.js";
-const V = { class: "title-container" }, $ = { key: 0 }, G = /* @__PURE__ */ N({
+const V = { class: "title-container" }, $ = { key: 0 }, W = /* @__PURE__ */ N({
   __name: "Alert",
   props: {
     title: { default: "" },
@@ -106,5 +107,5 @@ const V = { class: "title-container" }, $ = { key: 0 }, G = /* @__PURE__ */ N({
   }
 });
 export {
-  G as default
+  W as default
 };

package/components/autocomplete/Autocomplete.vue.d.ts

@@ -102,10 +102,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     disabled: boolean;
     size: "small" | "medium" | "large";
     mandatory: boolean;
+    modelValue: string | number;
     hoverHelpText: string;
     hoverHelpTextPlacement: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
     maxLength: number;
-    modelValue: string | number;
     placeholder: string;
     labelDirection: "top" | "inside";
     maxLengthCounterPosition: "inside" | "outside";

package/components/autocomplete/index.d.ts

@@ -9,10 +9,10 @@ declare const AutocompleteTypes: () => ({
             disabled: boolean;
             size: "small" | "medium" | "large";
             mandatory: boolean;
+            modelValue: string | number;
             hoverHelpText: string;
             hoverHelpTextPlacement: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
             maxLength: number;
-            modelValue: string | number;
             placeholder: string;
             labelDirection: "top" | "inside";
             maxLengthCounterPosition: "inside" | "outside";
@@ -45,6 +45,10 @@ declare const AutocompleteTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            modelValue: {
+                type: import("vue").PropType<string | number>;
+                default: string;
+            };
             options: {
                 type: import("vue").PropType<unknown[] | {
                     id: string;
@@ -64,10 +68,6 @@ declare const AutocompleteTypes: () => ({
                 type: import("vue").PropType<number>;
                 default: any;
             };
-            modelValue: {
-                type: import("vue").PropType<string | number>;
-                default: string;
-            };
             placeholder: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -118,7 +118,7 @@ declare const AutocompleteTypes: () => ({
             };
         }>> & {
             "onUpdate:modelValue"?: (value: string | number) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "testId" | "disabled" | "size" | "mandatory" | "hoverHelpText" | "hoverHelpTextPlacement" | "maxLength" | "modelValue" | "placeholder" | "labelDirection" | "maxLengthCounterPosition" | "inlineError" | "inlineErrorText" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon" | "onSearch" | "optionNameKey" | "optionsListWidth">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "testId" | "disabled" | "size" | "mandatory" | "modelValue" | "hoverHelpText" | "hoverHelpTextPlacement" | "maxLength" | "placeholder" | "labelDirection" | "maxLengthCounterPosition" | "inlineError" | "inlineErrorText" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon" | "onSearch" | "optionNameKey" | "optionsListWidth">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -153,6 +153,10 @@ declare const AutocompleteTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            modelValue: {
+                type: import("vue").PropType<string | number>;
+                default: string;
+            };
             options: {
                 type: import("vue").PropType<unknown[] | {
                     id: string;
@@ -172,10 +176,6 @@ declare const AutocompleteTypes: () => ({
                 type: import("vue").PropType<number>;
                 default: any;
             };
-            modelValue: {
-                type: import("vue").PropType<string | number>;
-                default: string;
-            };
             placeholder: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -234,10 +234,10 @@ declare const AutocompleteTypes: () => ({
             disabled: boolean;
             size: "small" | "medium" | "large";
             mandatory: boolean;
+            modelValue: string | number;
             hoverHelpText: string;
             hoverHelpTextPlacement: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
             maxLength: number;
-            modelValue: string | number;
             placeholder: string;
             labelDirection: "top" | "inside";
             maxLengthCounterPosition: "inside" | "outside";
@@ -290,6 +290,10 @@ declare const AutocompleteTypes: () => ({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        modelValue: {
+            type: import("vue").PropType<string | number>;
+            default: string;
+        };
         options: {
             type: import("vue").PropType<unknown[] | {
                 id: string;
@@ -309,10 +313,6 @@ declare const AutocompleteTypes: () => ({
             type: import("vue").PropType<number>;
             default: any;
         };
-        modelValue: {
-            type: import("vue").PropType<string | number>;
-            default: string;
-        };
         placeholder: {
             type: import("vue").PropType<string>;
             default: string;
@@ -388,6 +388,10 @@ declare const AutocompleteTypes: () => ({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    modelValue: {
+        type: import("vue").PropType<string | number>;
+        default: string;
+    };
     options: {
         type: import("vue").PropType<unknown[] | {
             id: string;
@@ -407,10 +411,6 @@ declare const AutocompleteTypes: () => ({
         type: import("vue").PropType<number>;
         default: any;
     };
-    modelValue: {
-        type: import("vue").PropType<string | number>;
-        default: string;
-    };
     placeholder: {
         type: import("vue").PropType<string>;
         default: string;
@@ -469,10 +469,10 @@ declare const AutocompleteTypes: () => ({
     disabled: boolean;
     size: "small" | "medium" | "large";
     mandatory: boolean;
+    modelValue: string | number;
     hoverHelpText: string;
     hoverHelpTextPlacement: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
     maxLength: number;
-    modelValue: string | number;
     placeholder: string;
     labelDirection: "top" | "inside";
     maxLengthCounterPosition: "inside" | "outside";

package/components/button/v4/ToggleButtonGroupAB.vue.d.ts

@@ -0,0 +1,65 @@
+import { Placement } from 'floating-vue/dist/util/popper';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue: "a" | "b";
+    withPopover: boolean;
+    testId?: string;
+    popoverProps: {
+        autoHide?: boolean;
+        trigger?: "hover" | "click" | "focus" | "touch" | "managed";
+        disabled?: boolean;
+        placement?: Placement;
+        distance?: number;
+        skidding?: number;
+        testId?: string;
+        popperClass?: string;
+    };
+}>, {
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue: "a" | "b";
+    withPopover: boolean;
+    testId?: string;
+    popoverProps: {
+        autoHide?: boolean;
+        trigger?: "hover" | "click" | "focus" | "touch" | "managed";
+        disabled?: boolean;
+        placement?: Placement;
+        distance?: number;
+        skidding?: number;
+        testId?: string;
+        popperClass?: string;
+    };
+}>, {
+    testId: string;
+}>>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    testId: string;
+}>, {
+    "popover-content"?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/button/v4/ToggleButtonGroupAB.vue.js

@@ -0,0 +1,7 @@
+import o from "./ToggleButtonGroupAB.vue2.js";
+/* empty css                          */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../ToggleButtonGroupAB.vue_vue_type_style_index_0_scoped_9d9e51c0_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-9d9e51c0"]]);
+export {
+  s as default
+};

package/components/button/v4/ToggleButtonGroupAB.vue2.js

@@ -0,0 +1,95 @@
+ import "../../../ToggleButtonGroupAB.vue_vue_type_style_index_0_scoped_9d9e51c0_lang.css"; import { defineComponent as I, ref as i, onMounted as b, openBlock as g, createElementBlock as k, createVNode as n, mergeProps as a, unref as e, withCtx as r, createTextVNode as f, createBlock as A, createElementVNode as C, renderSlot as N, createCommentVNode as w } from "vue";
+import c from "./ButtonV4.vue.js";
+import { useVModel as y } from "@vueuse/core";
+import O from "../../icon/v4/IconV4.vue.js";
+import "../../icon/v4/IconFlag.vue.js";
+import x from "../../popover/v4/PopoverV4.vue.js";
+import { useTestIdAttrs as E } from "../../../utils/testIds.js";
+import { ToggleButtonGroupABTestIdModifiers as p } from "../../../testids/index.js";
+const G = { class: "group-button-wrapper" }, M = { class: "popover-trigger" }, D = /* @__PURE__ */ I({
+  __name: "ToggleButtonGroupAB",
+  props: {
+    modelValue: null,
+    withPopover: { type: Boolean },
+    testId: { default: "" },
+    popoverProps: null
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: B }) {
+    const t = d, m = i(!1), T = (o) => {
+      m.value = o;
+    }, u = E(
+      t.testId,
+      p,
+      !0
+    ), P = i(
+      t.popoverProps ? { ...t.popoverProps } : {}
+    ), l = i(), V = y(t, "modelValue", B);
+    b(() => {
+      l.value = t.modelValue;
+    });
+    const v = (o) => {
+      l.value = o, V.value = o;
+    };
+    return (o, s) => (g(), k("div", G, [
+      n(c, a({
+        class: ["toggle-button", { "selected-a": l.value === "a" }],
+        color: "primary",
+        variant: "outlined"
+      }, e(u)[e(p).BUTTON_A], {
+        onClick: s[0] || (s[0] = (_) => v("a"))
+      }), {
+        default: r(() => [
+          f(" A ")
+        ]),
+        _: 1
+      }, 16, ["class"]),
+      n(c, a({
+        class: ["toggle-button", { "selected-b": l.value === "b" }],
+        color: "primary",
+        variant: "outlined"
+      }, e(u)[e(p).BUTTON_B], {
+        onClick: s[1] || (s[1] = (_) => v("b"))
+      }), {
+        default: r(() => [
+          f(" B ")
+        ]),
+        _: 1
+      }, 16, ["class"]),
+      d.withPopover ? (g(), A(c, a({
+        key: 0,
+        class: [
+          "toggle-button",
+          {
+            "trigger-active": m.value
+          }
+        ],
+        color: "primary",
+        variant: "outlined"
+      }, e(u)[e(p).POPOVER_TRIGGER]), {
+        default: r(() => [
+          n(e(x), a({
+            ...P.value
+          }, { onIsOpen: T }), {
+            trigger: r(() => [
+              C("div", M, [
+                n(e(O), {
+                  name: "caret-down",
+                  size: "16px"
+                })
+              ])
+            ]),
+            content: r(() => [
+              N(o.$slots, "popover-content", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 16)
+        ]),
+        _: 3
+      }, 16, ["class"])) : w("", !0)
+    ]));
+  }
+});
+export {
+  D as default
+};

package/components/button/v4/index.d.ts

@@ -1,6 +1,7 @@
 import Button from './ButtonV4.vue';
 import IconButton from './IconButtonV4.vue';
 import ButtonGroup from './ButtonGroup.vue';
+import ToggleButtonGroupAB from './ToggleButtonGroupAB.vue';
 declare const ButtonTypes: () => (({
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
@@ -297,5 +298,173 @@ declare const ButtonTypes: () => (({
     $slots: {
         default?(_: {}): any;
     };
+})) | ({
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            testId: string;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            testId: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            modelValue: {
+                type: import("vue").PropType<"a" | "b">;
+                required: true;
+            };
+            withPopover: {
+                type: import("vue").PropType<boolean>;
+                required: true;
+            };
+            popoverProps: {
+                type: import("vue").PropType<{
+                    autoHide?: boolean;
+                    trigger?: "hover" | "click" | "focus" | "touch" | "managed";
+                    disabled?: boolean;
+                    placement?: import("floating-vue").Placement;
+                    distance?: number;
+                    skidding?: number;
+                    testId?: string;
+                    popperClass?: string;
+                }>;
+                required: true;
+            };
+        }>> & {
+            "onUpdate:modelValue"?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $emit: (event: "update:modelValue", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            testId: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            modelValue: {
+                type: import("vue").PropType<"a" | "b">;
+                required: true;
+            };
+            withPopover: {
+                type: import("vue").PropType<boolean>;
+                required: true;
+            };
+            popoverProps: {
+                type: import("vue").PropType<{
+                    autoHide?: boolean;
+                    trigger?: "hover" | "click" | "focus" | "touch" | "managed";
+                    disabled?: boolean;
+                    placement?: import("floating-vue").Placement;
+                    distance?: number;
+                    skidding?: number;
+                    testId?: string;
+                    popperClass?: string;
+                }>;
+                required: true;
+            };
+        }>> & {
+            "onUpdate:modelValue"?: (...args: any[]) => any;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:modelValue": (...args: any[]) => void;
+        }, string, {
+            testId: string;
+        }, {}, string> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        testId: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        modelValue: {
+            type: import("vue").PropType<"a" | "b">;
+            required: true;
+        };
+        withPopover: {
+            type: import("vue").PropType<boolean>;
+            required: true;
+        };
+        popoverProps: {
+            type: import("vue").PropType<{
+                autoHide?: boolean;
+                trigger?: "hover" | "click" | "focus" | "touch" | "managed";
+                disabled?: boolean;
+                placement?: import("floating-vue").Placement;
+                distance?: number;
+                skidding?: number;
+                testId?: string;
+                popperClass?: string;
+            }>;
+            required: true;
+        };
+    }>> & {
+        "onUpdate:modelValue"?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<"a" | "b">;
+        required: true;
+    };
+    withPopover: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    popoverProps: {
+        type: import("vue").PropType<{
+            autoHide?: boolean;
+            trigger?: "hover" | "click" | "focus" | "touch" | "managed";
+            disabled?: boolean;
+            placement?: import("floating-vue").Placement;
+            distance?: number;
+            skidding?: number;
+            testId?: string;
+            popperClass?: string;
+        }>;
+        required: true;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, {
+    testId: string;
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        "popover-content"?(_: {}): any;
+    };
 })))[];
-export { Button, IconButton, ButtonGroup, ButtonTypes };
+export { Button, IconButton, ButtonGroup, ToggleButtonGroupAB, ButtonTypes };

package/components/button/v4/index.js

@@ -1,10 +1,17 @@
 import o from "./ButtonV4.vue.js";
 import t from "./IconButtonV4.vue.js";
 import r from "./ButtonGroup.vue.js";
-const u = () => [o, t, r];
+import m from "./ToggleButtonGroupAB.vue.js";
+const f = () => [
+  o,
+  t,
+  r,
+  m
+];
 export {
   o as Button,
   r as ButtonGroup,
-  u as ButtonTypes,
-  t as IconButton
+  f as ButtonTypes,
+  t as IconButton,
+  m as ToggleButtonGroupAB
 };