@syncfusion/ej2-angular-splitbuttons 20.1.55 → 20.2.36

package/styles/button-group/fluent-dark.css

@@ -7,14 +7,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/fluent-dark.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/fluent-dark.scss';
+@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
+@import 'fluent-dark-definition.scss';
+@import 'all.scss';

package/styles/button-group/fluent.css

@@ -7,14 +7,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/fluent.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/fluent.scss';
+@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-buttons/styles/button/fluent-definition.scss';
+@import 'fluent-definition.scss';
+@import 'all.scss';

package/styles/button-group/highcontrast-light.css

@@ -7,14 +7,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/highcontrast-light.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/highcontrast-light.scss';
+@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-buttons/styles/button/highcontrast-light-definition.scss';
+@import 'highcontrast-light-definition.scss';
+@import 'all.scss';

package/styles/button-group/highcontrast.css

@@ -7,14 +7,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/highcontrast.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/highcontrast.scss';
+@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-buttons/styles/button/highcontrast-definition.scss';
+@import 'highcontrast-definition.scss';
+@import 'all.scss';

package/styles/button-group/material-dark.css

@@ -8,14 +8,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/material-dark.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/material-dark.scss';
+@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-buttons/styles/button/material-dark-definition.scss';
+@import 'material-dark-definition.scss';
+@import 'all.scss';

package/styles/button-group/material.css

@@ -8,14 +8,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/material.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/material.scss';
+@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-buttons/styles/button/material-definition.scss';
+@import 'material-definition.scss';
+@import 'all.scss';

package/styles/button-group/tailwind-dark.css

@@ -8,6 +8,14 @@
       flex-direction: row;
   position: relative;
 }
+*.e-btn-group input:focus + label.e-btn,
+*.e-btn-group .e-btn:focus,
+*.e-btn-group .e-btn:hover,
+*.e-css.e-btn-group input:focus + label.e-btn,
+*.e-css.e-btn-group .e-btn:focus,
+*.e-css.e-btn-group .e-btn:hover {
+  z-index: 2;
+}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;
@@ -253,7 +261,6 @@
   outline: #1f2937 0 solid;
   outline-offset: 0;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-primary,
@@ -265,7 +272,6 @@
   color: #000;
   outline: #1f2937 0 solid;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-success,
@@ -276,7 +282,6 @@
   border-color: #22c55e;
   color: #000;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-info,
@@ -287,7 +292,6 @@
   border-color: #0ea5e9;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-warning,
@@ -298,7 +302,6 @@
   border-color: #ea580c;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-danger,
@@ -309,7 +312,6 @@
   border-color: #f87171;
   color: #000;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-link,
@@ -329,42 +331,36 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-success,
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-info,
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:active,
 .e-btn-group input:active + label.e-btn,

package/styles/button-group/tailwind-dark.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/tailwind-dark.scss';
+@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-buttons/styles/button/tailwind-dark-definition.scss';
+@import 'tailwind-dark-definition.scss';
+@import 'all.scss';

package/styles/button-group/tailwind.css

@@ -8,6 +8,14 @@
       flex-direction: row;
   position: relative;
 }
+*.e-btn-group input:focus + label.e-btn,
+*.e-btn-group .e-btn:focus,
+*.e-btn-group .e-btn:hover,
+*.e-css.e-btn-group input:focus + label.e-btn,
+*.e-css.e-btn-group .e-btn:focus,
+*.e-css.e-btn-group .e-btn:hover {
+  z-index: 2;
+}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;
@@ -253,7 +261,6 @@
   outline: #fff 0 solid;
   outline-offset: 0;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-primary,
@@ -265,7 +272,6 @@
   color: #fff;
   outline: #fff 0 solid;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-success,
@@ -276,7 +282,6 @@
   border-color: #15803d;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-info,
@@ -287,7 +292,6 @@
   border-color: #0e7490;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-warning,
@@ -298,7 +302,6 @@
   border-color: #c2410c;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-danger,
@@ -309,7 +312,6 @@
   border-color: #dc2626;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-link,
@@ -329,42 +331,36 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-success,
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-info,
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:active,
 .e-btn-group input:active + label.e-btn,

package/styles/button-group/tailwind.scss

@@ -1 +1,4 @@
-@import 'ej2-splitbuttons/styles/button-group/tailwind.scss';
+@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-buttons/styles/button/tailwind-definition.scss';
+@import 'tailwind-definition.scss';
+@import 'all.scss';

package/styles/drop-down-button/_all.scss

@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';

package/styles/drop-down-button/_bootstrap-dark-definition.scss

@@ -0,0 +1,50 @@
+//default
+$drop-down-btn-arrow-content: '\e969' !default;
+$drop-down-btn-vertical-btn-padding: 6px 12px !default;
+$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
+$drop-down-btn-bigger-font-size: 15px !default;
+$drop-down-btn-bigger-li-height: 40px !default;
+$drop-down-btn-bigger-max-width: 280px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-color: $grey-dark-font !default;
+$drop-down-btn-disable-text: rgba($grey-dark-font, .65) !default;
+$drop-down-btn-font-size: 14px !default;
+$drop-down-btn-font-weight: normal !default;
+$drop-down-btn-icon-margin-right: 12px !default;
+$drop-down-btn-bigger-icon-margin-right: 12px !default;
+$drop-down-btn-li-bgcolor: $grey-44 !default;
+$drop-down-btn-li-box-shadow: inset 0 0 0 1px $grey-8c !default;
+$drop-down-btn-li-border-color: $grey-44 !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-focus-bgcolor: transparent !default;
+$drop-down-btn-li-height: 26px !default;
+$drop-down-btn-li-padding: 0 14px !default;
+$drop-down-btn-bigger-li-padding: 0 14px !default;
+$drop-down-btn-small-li-padding: 0 14px !default;
+$drop-down-btn-li-selection-bgcolor: $brand-primary !default;
+$drop-down-btn-li-selection-font-color: $brand-primary-font !default;
+$drop-down-btn-max-width: 240px !default;
+$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 16px !default;
+$drop-down-btn-menu-icon-color: $grey-dark-font !default;
+$drop-down-btn-menu-icon-disabled-color: rgba($grey-dark-font, .65) !default;
+$drop-down-btn-menu-icon-font-size: 16px !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-parent-ul-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
+$drop-down-btn-seperator-padding: 3px 0 !default;
+$drop-down-btn-selected-color: $brand-primary-font !default;
+$drop-down-btn-sub-ul-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
+$drop-down-btn-ul-bgcolor: $grey-dark !default;
+$drop-down-btn-ul-border: 1px solid $grey-44 !default;
+$drop-down-btn-ul-border-radius: 4px !default;
+$drop-down-btn-ul-padding: 3px 0 !default;
+$drop-down-btn-ul-bigger-padding: 5px 0 !default;
+$drop-down-btn-ul-small-padding: 5px 0 !default;
+$drop-down-btn-caret-icon-font-size: 8px !default;
+$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-box-shadow: none !default;
+$drop-down-btn-popup-margin-top: 0 !default;
+$drop-down-btn-bigger-popup-margin-top: 0 !default;
+//enddefault

package/styles/drop-down-button/_bootstrap-definition.scss

@@ -0,0 +1,48 @@
+$drop-down-btn-arrow-content: '\e969' !default;
+$drop-down-btn-vertical-btn-padding: 6px 12px !default;
+$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
+$drop-down-btn-bigger-font-size: 15px !default;
+$drop-down-btn-bigger-li-height: 40px !default;
+$drop-down-btn-bigger-max-width: 280px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-color: $grey-dark !default;
+$drop-down-btn-disable-text: rgba($grey, .65) !default;
+$drop-down-btn-font-size: 14px !default;
+$drop-down-btn-font-weight: normal !default;
+$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-margin-right: 12px !default;
+$drop-down-btn-bigger-icon-margin-right: 12px !default;
+$drop-down-btn-li-bgcolor: $grey-e6 !default;
+$drop-down-btn-li-box-shadow: 0 0 0 1px $grey-8c inset !default;
+$drop-down-btn-li-border-color: $grey-e6 !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-focus-bgcolor: transparent !default;
+$drop-down-btn-li-height: 26px !default;
+$drop-down-btn-li-padding: 0 14px !default;
+$drop-down-btn-bigger-li-padding: 0 14px !default;
+$drop-down-btn-small-li-padding: 0 14px !default;
+$drop-down-btn-li-selection-bgcolor: $grey-e6 !default;
+$drop-down-btn-li-selection-font-color: $grey-dark !default;
+$drop-down-btn-max-width: 240px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 16px !default;
+$drop-down-btn-menu-icon-color: $grey-dark !default;
+$drop-down-btn-menu-icon-disabled-color: rgba($grey-light-font, .65) !default;
+$drop-down-btn-menu-icon-font-size: 16px !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-parent-ul-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
+$drop-down-btn-seperator-padding: 3px 0 !default;
+$drop-down-btn-selected-color: $grey-dark !default;
+$drop-down-btn-sub-ul-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
+$drop-down-btn-ul-bgcolor: $grey-white !default;
+$drop-down-btn-ul-border: 1px solid $grey-cc !default;
+$drop-down-btn-ul-border-radius: 4px !default;
+$drop-down-btn-ul-padding: 3px 0 !default;
+$drop-down-btn-ul-bigger-padding: 5px 0 !default;
+$drop-down-btn-ul-small-padding: 5px 0 !default;
+$drop-down-btn-caret-icon-font-size: 8px !default;
+$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-box-shadow: none !default;
+$drop-down-btn-popup-margin-top: 0 !default;
+$drop-down-btn-bigger-popup-margin-top: 0 !default;

package/styles/drop-down-button/_bootstrap4-definition.scss

@@ -0,0 +1,48 @@
+$drop-down-btn-arrow-content: '\e969' !default;
+$drop-down-btn-vertical-btn-padding: 6px 12px !default;
+$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
+$drop-down-btn-bigger-font-size: 16px !default;
+$drop-down-btn-bigger-li-height: 32px !default;
+$drop-down-btn-bigger-max-width: 280px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-color: $gray-900  !default;
+$drop-down-btn-disable-text: rgba($gray-600, .65) !default;
+$drop-down-btn-font-size: 14px !default;
+$drop-down-btn-font-weight: normal !default;
+$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-margin-right: 8px !default;
+$drop-down-btn-bigger-icon-margin-right: 0 !default;
+$drop-down-btn-li-bgcolor: darken($gray-100, 2%) !default;
+$drop-down-btn-li-box-shadow: none !default;
+$drop-down-btn-li-border-color: $gray-600 !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-focus-bgcolor: darken($gray-100, 2%) !default;
+$drop-down-btn-li-height: 26px !default;
+$drop-down-btn-li-padding: 0 20px !default;
+$drop-down-btn-bigger-li-padding: 0 24px !default;
+$drop-down-btn-small-li-padding: 0 16px !default;
+$drop-down-btn-li-selection-bgcolor: $primary !default;
+$drop-down-btn-li-selection-font-color: $gray-900 !default;
+$drop-down-btn-max-width: 240px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 16px !default;
+$drop-down-btn-menu-icon-color: $gray-900 !default;
+$drop-down-btn-menu-icon-disabled-color: $gray-600 !default;
+$drop-down-btn-menu-icon-font-size: 16px !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-parent-ul-box-shadow: none !default;
+$drop-down-btn-seperator-padding: 3px 0 !default;
+$drop-down-btn-selected-color: $white !default;
+$drop-down-btn-sub-ul-box-shadow: none !default;
+$drop-down-btn-ul-bgcolor: $content-popup-bg  !default;
+$drop-down-btn-ul-border: 1px solid rgba($black, .15) !default;
+$drop-down-btn-ul-border-radius: 4px !default;
+$drop-down-btn-ul-padding: 6px 0 !default;
+$drop-down-btn-ul-bigger-padding: 8px 0 !default;
+$drop-down-btn-ul-small-padding: 4px 0 !default;
+$drop-down-btn-caret-icon-font-size: 8px !default;
+$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-box-shadow: none !default;
+$drop-down-btn-popup-margin-top: 0 !default;
+$drop-down-btn-bigger-popup-margin-top: 0 !default;

package/styles/drop-down-button/_bootstrap5-dark-definition.scss

@@ -0,0 +1 @@
+@import './bootstrap5-definition.scss';

package/styles/drop-down-button/_bootstrap5-definition.scss

@@ -0,0 +1,51 @@
+//layout variables
+$drop-down-btn-arrow-content: '\e70d' !default;
+$drop-down-btn-vertical-btn-padding: 6px 12px !default;
+$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
+$drop-down-btn-bigger-font-size: $text-base !default;
+$drop-down-btn-bigger-li-height: 32px !default;
+$drop-down-btn-bigger-max-width: 202px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-margin-right: 11px !default;
+$drop-down-btn-bigger-icon-margin-right: 12px !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-height: 30px !default;
+$drop-down-btn-li-padding: 0 12px !default;
+$drop-down-btn-bigger-li-padding: 0 16px !default;
+$drop-down-btn-small-li-padding: 0 8px !default;
+$drop-down-btn-max-width: 178px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 22px !default;
+$drop-down-btn-menu-icon-font-size: 18px !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-seperator-padding: 3px 0 !default;
+$drop-down-btn-sub-ul-box-shadow: none !default;
+$drop-down-btn-ul-border-radius: 4px !default;
+$drop-down-btn-ul-padding: 4px 0 !default;
+$drop-down-btn-ul-bigger-padding: 8px 0 !default;
+$drop-down-btn-ul-small-padding: 4px 0 !default;
+$drop-down-btn-caret-icon-font-size: 10px !default;
+$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 12px !default;
+$drop-down-btn-box-shadow: $secondary-shadow-focus !default;
+$drop-down-btn-popup-margin-top: 2px !default;
+$drop-down-btn-bigger-popup-margin-top: 4px !default;
+$drop-down-btn-ul-border: 1px solid $border-light !default;
+$drop-down-btn-li-box-shadow: none !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-color: $content-text-color !default;
+$drop-down-btn-disable-text: $secondary-text-color-disabled !default;
+$drop-down-btn-font-size: $text-sm !default;
+$drop-down-btn-font-weight: $font-weight-normal !default;
+$drop-down-btn-li-bgcolor: $content-bg-color-hover !default;
+$drop-down-btn-ul-bgcolor: $flyout-bg-color !default;
+$drop-down-btn-li-border-color: $border-light !default;
+$drop-down-btn-selected-color: $content-text-color-selected !default;
+$drop-down-btn-parent-ul-box-shadow: none !default;
+$drop-down-btn-li-focus-bgcolor: $content-bg-color-hover !default;
+$drop-down-btn-li-selection-bgcolor: $content-bg-color-selected !default;
+$drop-down-btn-li-selection-font-color: $content-text-color !default;
+$drop-down-btn-menu-icon-color: $icon-color !default;
+$drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default;
+$drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;
+

package/styles/drop-down-button/_fabric-dark-definition.scss

@@ -0,0 +1,50 @@
+//default 
+$drop-down-btn-arrow-content: '\e36a' !default;
+$drop-down-btn-vertical-btn-padding: 8px 20px !default;
+$drop-down-btn-vertical-bigger-padding: 10px 24px !default;
+$drop-down-btn-bigger-font-size: 15px !default;
+$drop-down-btn-bigger-li-height: 48px !default;
+$drop-down-btn-bigger-max-width: 280px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-color: $neutral-light-font !default;
+$drop-down-btn-disable-text: $neutral-tertiary-alt !default;
+$drop-down-btn-font-size: 14px !default;
+$drop-down-btn-font-weight: normal !default;
+$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-margin-right: 10px !default;
+$drop-down-btn-bigger-icon-margin-right: 10px !default;
+$drop-down-btn-li-bgcolor: $neutral-light !default;
+$drop-down-btn-li-box-shadow: 0 2px 5px 0 rgba($shadow, .26) !default;
+$drop-down-btn-li-border-color: $neutral-light !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-focus-bgcolor: transparent !default;
+$drop-down-btn-li-height: 36px !default;
+$drop-down-btn-li-padding: 0 10px !default;
+$drop-down-btn-bigger-li-padding: 0 10px !default;
+$drop-down-btn-small-li-padding: 0 10px !default;
+$drop-down-btn-li-selection-bgcolor: $neutral-quintenary !default;
+$drop-down-btn-li-selection-font-color: $neutral-light-fontalt !default;
+$drop-down-btn-max-width: 240px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 18px !default;
+$drop-down-btn-menu-icon-color: $neutral-light-font !default;
+$drop-down-btn-menu-icon-disabled-color: $neutral-tertiary-alt !default;
+$drop-down-btn-menu-icon-font-size: 16px !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-parent-ul-box-shadow:  0 2px 5px 0 rgba($shadow, .26) !default;
+$drop-down-btn-selected-color: $neutral-light-fontalt !default;
+$drop-down-btn-seperator-padding: 0 !default;
+$drop-down-btn-sub-ul-box-shadow: 0 2px 5px 0 rgba($shadow, .26) !default;
+$drop-down-btn-ul-bgcolor: $neutral-lighter-alt !default;
+$drop-down-btn-ul-border: 1px solid $neutral-light !default;
+$drop-down-btn-ul-border-radius: 0 !default;
+$drop-down-btn-ul-padding: 0 !default;
+$drop-down-btn-ul-bigger-padding: 0 !default;
+$drop-down-btn-ul-small-padding: 0 !default;
+$drop-down-btn-caret-icon-font-size: 10px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-box-shadow: none !default;
+$drop-down-btn-popup-margin-top: 0 !default;
+$drop-down-btn-bigger-popup-margin-top: 0 !default;
+//enddefault

package/styles/drop-down-button/_fabric-definition.scss

@@ -0,0 +1,48 @@
+$drop-down-btn-arrow-content: '\e36a' !default;
+$drop-down-btn-vertical-btn-padding: 8px 20px !default;
+$drop-down-btn-vertical-bigger-padding: 10px 24px !default;
+$drop-down-btn-bigger-font-size: 15px !default;
+$drop-down-btn-bigger-li-height: 48px !default;
+$drop-down-btn-bigger-max-width: 280px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-color: $neutral-light-font !default;
+$drop-down-btn-disable-text: $neutral-tertiary-alt !default;
+$drop-down-btn-font-size: 14px !default;
+$drop-down-btn-font-weight: normal !default;
+$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-margin-right: 10px !default;
+$drop-down-btn-bigger-icon-margin-right: 10px !default;
+$drop-down-btn-li-bgcolor: $neutral-lighter !default;
+$drop-down-btn-li-box-shadow: 0 0 0 1px $neutral-secondary-alt inset !default;
+$drop-down-btn-li-border-color:  $neutral-light !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-focus-bgcolor: transparent !default;
+$drop-down-btn-li-height: 36px !default;
+$drop-down-btn-li-padding: 0 10px !default;
+$drop-down-btn-bigger-li-padding: 0 10px !default;
+$drop-down-btn-small-li-padding: 0 10px !default;
+$drop-down-btn-li-selection-bgcolor:  $neutral-tertiary-alt !default;
+$drop-down-btn-li-selection-font-color: $theme-light-font !default;
+$drop-down-btn-max-width: 240px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 18px !default;
+$drop-down-btn-menu-icon-color: $neutral-light-font !default;
+$drop-down-btn-menu-icon-disabled-color: $neutral-tertiary-alt !default;
+$drop-down-btn-menu-icon-font-size: 16px !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-parent-ul-box-shadow:  0 0 10px 0 rgba($neutral-black, .2) !default;
+$drop-down-btn-selected-color: $neutral-light-font !default;
+$drop-down-btn-seperator-padding: 0 !default;
+$drop-down-btn-sub-ul-box-shadow: 0 0 10px 0 rgba($neutral-black, .2) !default;
+$drop-down-btn-ul-bgcolor: $neutral-white !default;
+$drop-down-btn-ul-border: 1px solid $neutral-light !default;
+$drop-down-btn-ul-border-radius: 0 !default;
+$drop-down-btn-ul-padding: 0 !default;
+$drop-down-btn-ul-bigger-padding: 0 !default;
+$drop-down-btn-ul-small-padding: 0 !default;
+$drop-down-btn-caret-icon-font-size: 10px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-box-shadow: none !default;
+$drop-down-btn-popup-margin-top: 0 !default;
+$drop-down-btn-bigger-popup-margin-top: 0 !default;