@syncfusion/ej2-ribbon 32.2.3 → 33.1.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/dist/ej2-ribbon.umd.min.js +2 -2
  2. package/dist/ej2-ribbon.umd.min.js.map +1 -1
  3. package/dist/es6/ej2-ribbon.es2015.js +12 -1
  4. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  5. package/dist/es6/ej2-ribbon.es5.js +12 -1
  6. package/dist/es6/ej2-ribbon.es5.js.map +1 -1
  7. package/dist/global/ej2-ribbon.min.js +2 -2
  8. package/dist/global/ej2-ribbon.min.js.map +1 -1
  9. package/dist/global/index.d.ts +1 -1
  10. package/package.json +8 -8
  11. package/src/ribbon/base/ribbon-model.d.ts +1 -1
  12. package/src/ribbon/base/ribbon.d.ts +2 -0
  13. package/src/ribbon/base/ribbon.js +12 -1
  14. package/styles/bds-lite.css +4 -3
  15. package/styles/bds.css +4 -3
  16. package/styles/bootstrap-dark-lite.css +4 -2
  17. package/styles/bootstrap-dark.css +4 -2
  18. package/styles/bootstrap-lite.css +4 -2
  19. package/styles/bootstrap.css +4 -2
  20. package/styles/bootstrap4-lite.css +4 -2
  21. package/styles/bootstrap4.css +4 -2
  22. package/styles/bootstrap5-dark-lite.css +4 -2
  23. package/styles/bootstrap5-dark.css +4 -2
  24. package/styles/bootstrap5-lite.css +4 -2
  25. package/styles/bootstrap5.3-lite.css +4 -3
  26. package/styles/bootstrap5.3.css +4 -3
  27. package/styles/bootstrap5.css +4 -2
  28. package/styles/fabric-dark-lite.css +4 -2
  29. package/styles/fabric-dark.css +4 -2
  30. package/styles/fabric-lite.css +4 -2
  31. package/styles/fabric.css +4 -2
  32. package/styles/fluent-dark-lite.css +4 -2
  33. package/styles/fluent-dark.css +4 -2
  34. package/styles/fluent-lite.css +4 -2
  35. package/styles/fluent.css +4 -2
  36. package/styles/fluent2-lite.css +4 -2
  37. package/styles/fluent2.css +4 -2
  38. package/styles/highcontrast-light-lite.css +4 -2
  39. package/styles/highcontrast-light.css +4 -2
  40. package/styles/highcontrast-lite.css +4 -2
  41. package/styles/highcontrast.css +4 -2
  42. package/styles/material-dark-lite.css +4 -2
  43. package/styles/material-dark.css +4 -2
  44. package/styles/material-lite.css +4 -2
  45. package/styles/material.css +4 -2
  46. package/styles/material3-dark-lite.css +4 -20
  47. package/styles/material3-dark.css +4 -20
  48. package/styles/material3-lite.css +4 -20
  49. package/styles/material3.css +4 -20
  50. package/styles/ribbon/bds.css +4 -3
  51. package/styles/ribbon/bootstrap-dark.css +4 -2
  52. package/styles/ribbon/bootstrap.css +4 -2
  53. package/styles/ribbon/bootstrap4.css +4 -2
  54. package/styles/ribbon/bootstrap5-dark.css +4 -2
  55. package/styles/ribbon/bootstrap5.3.css +4 -3
  56. package/styles/ribbon/bootstrap5.css +4 -2
  57. package/styles/ribbon/fabric-dark.css +4 -2
  58. package/styles/ribbon/fabric.css +4 -2
  59. package/styles/ribbon/fluent-dark.css +4 -2
  60. package/styles/ribbon/fluent.css +4 -2
  61. package/styles/ribbon/fluent2.css +4 -2
  62. package/styles/ribbon/highcontrast-light.css +4 -2
  63. package/styles/ribbon/highcontrast.css +4 -2
  64. package/styles/ribbon/material-dark.css +4 -2
  65. package/styles/ribbon/material.css +4 -2
  66. package/styles/ribbon/material3-dark.css +4 -20
  67. package/styles/ribbon/material3.css +4 -20
  68. package/styles/ribbon/tailwind-dark.css +4 -2
  69. package/styles/ribbon/tailwind.css +4 -2
  70. package/styles/ribbon/tailwind3.css +4 -3
  71. package/styles/tailwind-dark-lite.css +4 -2
  72. package/styles/tailwind-dark.css +4 -2
  73. package/styles/tailwind-lite.css +4 -2
  74. package/styles/tailwind.css +4 -2
  75. package/styles/tailwind3-lite.css +4 -3
  76. package/styles/tailwind3.css +4 -3
package/styles/material-lite.css CHANGED
@@ -1,9 +1,11 @@
1
1
  .e-dropdownbase .e-list-item .e-list-icon {
2
- padding: 0 16px 0 0;
2
+ -webkit-padding-end: 16px;
3
+ padding-inline-end: 16px;
3
4
  }
4
5
 
5
6
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
6
- padding: 0 12px 0 0;
7
+ -webkit-padding-end: 12px;
8
+ padding-inline-end: 12px;
7
9
  }
8
10
 
9
11
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
package/styles/material.css CHANGED
@@ -1,9 +1,11 @@
1
1
  .e-dropdownbase .e-list-item .e-list-icon {
2
- padding: 0 16px 0 0;
2
+ -webkit-padding-end: 16px;
3
+ padding-inline-end: 16px;
3
4
  }
4
5
 
5
6
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
6
- padding: 0 12px 0 0;
7
+ -webkit-padding-end: 12px;
8
+ padding-inline-end: 12px;
7
9
  }
8
10
 
9
11
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
package/styles/material3-dark-lite.css CHANGED
@@ -81,11 +81,13 @@
81
81
  /* 15px */
82
82
  /* 16px */
83
83
  .e-dropdownbase .e-list-item .e-list-icon {
84
- padding: 0 16px 0 0;
84
+ -webkit-padding-end: 16px;
85
+ padding-inline-end: 16px;
85
86
  }
86
87
 
87
88
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
88
- padding: 0 12px 0 0;
89
+ -webkit-padding-end: 12px;
90
+ padding-inline-end: 12px;
89
91
  }
90
92
 
91
93
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
@@ -1831,19 +1833,16 @@
1831
1833
  /* 15px */
1832
1834
  /* 16px */
1833
1835
  .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1834
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1835
1836
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1836
1837
  }
1837
1838
  .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1838
1839
  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
1839
1840
  }
1840
1841
  .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1841
- background-image: -webkit-gradient(linear, left top, right top, color-stop(20%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(var(--color-sf-white), 0.3)), color-stop(70%, rgba(255, 255, 255, 0)));
1842
1842
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(var(--color-sf-white), 0.3) 50%, rgba(255, 255, 255, 0) 70%);
1843
1843
  }
1844
1844
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1845
1845
  border-color: unset;
1846
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1847
1846
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1848
1847
  }
1849
1848
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab {
@@ -1894,7 +1893,6 @@
1894
1893
  }
1895
1894
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu,
1896
1895
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-backstage {
1897
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1898
1896
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1899
1897
  color: rgba(var(--color-sf-on-surface));
1900
1898
  border-color: unset;
@@ -1914,7 +1912,6 @@
1914
1912
  }
1915
1913
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-help-template {
1916
1914
  border-color: unset;
1917
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1918
1915
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1919
1916
  }
1920
1917
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-template:focus-visible {
@@ -1926,7 +1923,6 @@
1926
1923
  color: rgba(var(--color-sf-primary));
1927
1924
  }
1928
1925
  .e-ribbon.e-rbn .e-ribbon-collapse-btn {
1929
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1930
1926
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1931
1927
  color: rgba(var(--color-sf-on-surface-variant));
1932
1928
  border-color: transparent;
@@ -1950,19 +1946,16 @@
1950
1946
  font-weight: 400;
1951
1947
  }
1952
1948
  .e-ribbon-backstage-popup .e-btn:focus {
1953
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
1954
1949
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
1955
1950
  color: rgba(var(--color-sf-surface));
1956
1951
  border-color: unset;
1957
1952
  }
1958
1953
  .e-ribbon-backstage-popup .e-btn:hover {
1959
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.12)), to(rgba(var(--color-sf-on-primary), 0.12))), rgba(var(--color-sf-primary));
1960
1954
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary));
1961
1955
  color: rgba(var(--color-sf-surface));
1962
1956
  border-color: unset;
1963
1957
  }
1964
1958
  .e-ribbon-backstage-popup .e-btn:hover:focus {
1965
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
1966
1959
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
1967
1960
  color: rgba(var(--color-sf-surface));
1968
1961
  border-color: unset;
@@ -1983,7 +1976,6 @@
1983
1976
  background: rgba(var(--color-sf-outline-variant));
1984
1977
  }
1985
1978
  .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item:focus, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item:focus {
1986
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
1987
1979
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
1988
1980
  color: rgba(var(--color-sf-surface));
1989
1981
  border-color: unset;
@@ -1992,7 +1984,6 @@
1992
1984
  color: rgba(var(--color-sf-surface));
1993
1985
  }
1994
1986
  .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-selected, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-focused, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-selected, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-focused {
1995
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.12)), to(rgba(var(--color-sf-on-primary), 0.12))), rgba(var(--color-sf-primary));
1996
1987
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary));
1997
1988
  color: rgba(var(--color-sf-surface));
1998
1989
  border-color: unset;
@@ -2001,7 +1992,6 @@
2001
1992
  color: rgba(var(--color-sf-surface));
2002
1993
  }
2003
1994
  .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-selected:focus, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-selected:focus {
2004
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
2005
1995
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
2006
1996
  color: rgba(var(--color-sf-surface));
2007
1997
  border-color: unset;
@@ -2011,13 +2001,11 @@
2011
2001
  }
2012
2002
  .e-ribbon-backstage-popup .e-ribbon-backstage-template,
2013
2003
  .e-ribbon-backstage-popup .e-ribbon-backstage-content {
2014
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2015
2004
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2016
2005
  }
2017
2006
 
2018
2007
  .e-ribbon.e-rbn,
2019
2008
  .e-ribbon-group-overflow-ddb {
2020
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2021
2009
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2022
2010
  border-color: unset;
2023
2011
  }
@@ -2077,7 +2065,6 @@
2077
2065
  .e-ribbon-group-overflow-ddb.e-ribbon-overflow .e-btn-group .e-btn.e-ribbon-group-button,
2078
2066
  .e-ribbon-group-overflow-ddb.e-ribbon-overflow .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
2079
2067
  .e-ribbon-group-overflow-ddb.e-ribbon-overflow .e-ribbon-group-of-btn {
2080
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2081
2068
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2082
2069
  color: rgba(var(--color-sf-on-surface));
2083
2070
  border-color: transparent;
@@ -2446,7 +2433,6 @@
2446
2433
  .e-ribbon-vertical-center.e-dropdown-popup,
2447
2434
  .e-ribbon-group-overflow-ddb.e-dropdown-popup,
2448
2435
  .e-ribbon-dropdown-group-button.e-dropdown-popup {
2449
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
2450
2436
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
2451
2437
  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
2452
2438
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
@@ -2547,7 +2533,6 @@
2547
2533
  }
2548
2534
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button {
2549
2535
  color: rgba(var(--color-sf-on-surface));
2550
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
2551
2536
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
2552
2537
  }
2553
2538
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:hover, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:focus {
@@ -2630,7 +2615,6 @@
2630
2615
  .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-focused,
2631
2616
  .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-focused, .e-ribbon-menu.e-menu-container ul.e-vertical .e-menu-item.e-focused,
2632
2617
  .e-ribbon-menu.e-menu-container ul.e-ul .e-menu-item.e-focused {
2633
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2634
2618
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2635
2619
  color: rgba(var(--color-sf-on-surface));
2636
2620
  }
package/styles/material3-dark.css CHANGED
@@ -81,11 +81,13 @@
81
81
  /* 15px */
82
82
  /* 16px */
83
83
  .e-dropdownbase .e-list-item .e-list-icon {
84
- padding: 0 16px 0 0;
84
+ -webkit-padding-end: 16px;
85
+ padding-inline-end: 16px;
85
86
  }
86
87
 
87
88
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
88
- padding: 0 12px 0 0;
89
+ -webkit-padding-end: 12px;
90
+ padding-inline-end: 12px;
89
91
  }
90
92
 
91
93
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
@@ -1831,19 +1833,16 @@
1831
1833
  /* 15px */
1832
1834
  /* 16px */
1833
1835
  .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1834
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1835
1836
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1836
1837
  }
1837
1838
  .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1838
1839
  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
1839
1840
  }
1840
1841
  .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1841
- background-image: -webkit-gradient(linear, left top, right top, color-stop(20%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(var(--color-sf-white), 0.3)), color-stop(70%, rgba(255, 255, 255, 0)));
1842
1842
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(var(--color-sf-white), 0.3) 50%, rgba(255, 255, 255, 0) 70%);
1843
1843
  }
1844
1844
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1845
1845
  border-color: unset;
1846
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1847
1846
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1848
1847
  }
1849
1848
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab {
@@ -1894,7 +1893,6 @@
1894
1893
  }
1895
1894
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu,
1896
1895
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-backstage {
1897
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1898
1896
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1899
1897
  color: rgba(var(--color-sf-on-surface));
1900
1898
  border-color: unset;
@@ -1914,7 +1912,6 @@
1914
1912
  }
1915
1913
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-help-template {
1916
1914
  border-color: unset;
1917
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1918
1915
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1919
1916
  }
1920
1917
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-template:focus-visible {
@@ -1926,7 +1923,6 @@
1926
1923
  color: rgba(var(--color-sf-primary));
1927
1924
  }
1928
1925
  .e-ribbon.e-rbn .e-ribbon-collapse-btn {
1929
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1930
1926
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1931
1927
  color: rgba(var(--color-sf-on-surface-variant));
1932
1928
  border-color: transparent;
@@ -1950,19 +1946,16 @@
1950
1946
  font-weight: 400;
1951
1947
  }
1952
1948
  .e-ribbon-backstage-popup .e-btn:focus {
1953
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
1954
1949
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
1955
1950
  color: rgba(var(--color-sf-surface));
1956
1951
  border-color: unset;
1957
1952
  }
1958
1953
  .e-ribbon-backstage-popup .e-btn:hover {
1959
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.12)), to(rgba(var(--color-sf-on-primary), 0.12))), rgba(var(--color-sf-primary));
1960
1954
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary));
1961
1955
  color: rgba(var(--color-sf-surface));
1962
1956
  border-color: unset;
1963
1957
  }
1964
1958
  .e-ribbon-backstage-popup .e-btn:hover:focus {
1965
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
1966
1959
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
1967
1960
  color: rgba(var(--color-sf-surface));
1968
1961
  border-color: unset;
@@ -1983,7 +1976,6 @@
1983
1976
  background: rgba(var(--color-sf-outline-variant));
1984
1977
  }
1985
1978
  .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item:focus, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item:focus {
1986
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
1987
1979
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
1988
1980
  color: rgba(var(--color-sf-surface));
1989
1981
  border-color: unset;
@@ -1992,7 +1984,6 @@
1992
1984
  color: rgba(var(--color-sf-surface));
1993
1985
  }
1994
1986
  .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-selected, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-focused, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-selected, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-focused {
1995
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.12)), to(rgba(var(--color-sf-on-primary), 0.12))), rgba(var(--color-sf-primary));
1996
1987
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary));
1997
1988
  color: rgba(var(--color-sf-surface));
1998
1989
  border-color: unset;
@@ -2001,7 +1992,6 @@
2001
1992
  color: rgba(var(--color-sf-surface));
2002
1993
  }
2003
1994
  .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-selected:focus, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-selected:focus {
2004
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
2005
1995
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
2006
1996
  color: rgba(var(--color-sf-surface));
2007
1997
  border-color: unset;
@@ -2011,13 +2001,11 @@
2011
2001
  }
2012
2002
  .e-ribbon-backstage-popup .e-ribbon-backstage-template,
2013
2003
  .e-ribbon-backstage-popup .e-ribbon-backstage-content {
2014
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2015
2004
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2016
2005
  }
2017
2006
 
2018
2007
  .e-ribbon.e-rbn,
2019
2008
  .e-ribbon-group-overflow-ddb {
2020
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2021
2009
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2022
2010
  border-color: unset;
2023
2011
  }
@@ -2077,7 +2065,6 @@
2077
2065
  .e-ribbon-group-overflow-ddb.e-ribbon-overflow .e-btn-group .e-btn.e-ribbon-group-button,
2078
2066
  .e-ribbon-group-overflow-ddb.e-ribbon-overflow .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
2079
2067
  .e-ribbon-group-overflow-ddb.e-ribbon-overflow .e-ribbon-group-of-btn {
2080
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2081
2068
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2082
2069
  color: rgba(var(--color-sf-on-surface));
2083
2070
  border-color: transparent;
@@ -2446,7 +2433,6 @@
2446
2433
  .e-ribbon-vertical-center.e-dropdown-popup,
2447
2434
  .e-ribbon-group-overflow-ddb.e-dropdown-popup,
2448
2435
  .e-ribbon-dropdown-group-button.e-dropdown-popup {
2449
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
2450
2436
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
2451
2437
  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
2452
2438
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
@@ -2547,7 +2533,6 @@
2547
2533
  }
2548
2534
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button {
2549
2535
  color: rgba(var(--color-sf-on-surface));
2550
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
2551
2536
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
2552
2537
  }
2553
2538
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:hover, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:focus {
@@ -2630,7 +2615,6 @@
2630
2615
  .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-focused,
2631
2616
  .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-focused, .e-ribbon-menu.e-menu-container ul.e-vertical .e-menu-item.e-focused,
2632
2617
  .e-ribbon-menu.e-menu-container ul.e-ul .e-menu-item.e-focused {
2633
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2634
2618
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2635
2619
  color: rgba(var(--color-sf-on-surface));
2636
2620
  }
package/styles/material3-lite.css CHANGED
@@ -83,11 +83,13 @@
83
83
 
84
84
 
85
85
  .e-dropdownbase .e-list-item .e-list-icon {
86
- padding: 0 16px 0 0;
86
+ -webkit-padding-end: 16px;
87
+ padding-inline-end: 16px;
87
88
  }
88
89
 
89
90
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
90
- padding: 0 12px 0 0;
91
+ -webkit-padding-end: 12px;
92
+ padding-inline-end: 12px;
91
93
  }
92
94
 
93
95
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
@@ -1837,19 +1839,16 @@
1837
1839
 
1838
1840
 
1839
1841
  .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1840
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1841
1842
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1842
1843
  }
1843
1844
  .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1844
1845
  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
1845
1846
  }
1846
1847
  .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1847
- background-image: -webkit-gradient(linear, left top, right top, color-stop(20%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(var(--color-sf-white), 0.3)), color-stop(70%, rgba(255, 255, 255, 0)));
1848
1848
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(var(--color-sf-white), 0.3) 50%, rgba(255, 255, 255, 0) 70%);
1849
1849
  }
1850
1850
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1851
1851
  border-color: unset;
1852
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1853
1852
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1854
1853
  }
1855
1854
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab {
@@ -1900,7 +1899,6 @@
1900
1899
  }
1901
1900
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu,
1902
1901
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-backstage {
1903
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1904
1902
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1905
1903
  color: rgba(var(--color-sf-on-surface));
1906
1904
  border-color: unset;
@@ -1920,7 +1918,6 @@
1920
1918
  }
1921
1919
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-help-template {
1922
1920
  border-color: unset;
1923
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1924
1921
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1925
1922
  }
1926
1923
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-template:focus-visible {
@@ -1932,7 +1929,6 @@
1932
1929
  color: rgba(var(--color-sf-primary));
1933
1930
  }
1934
1931
  .e-ribbon.e-rbn .e-ribbon-collapse-btn {
1935
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1936
1932
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1937
1933
  color: rgba(var(--color-sf-on-surface-variant));
1938
1934
  border-color: transparent;
@@ -1956,19 +1952,16 @@
1956
1952
  font-weight: 400;
1957
1953
  }
1958
1954
  .e-ribbon-backstage-popup .e-btn:focus {
1959
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
1960
1955
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
1961
1956
  color: rgba(var(--color-sf-surface));
1962
1957
  border-color: unset;
1963
1958
  }
1964
1959
  .e-ribbon-backstage-popup .e-btn:hover {
1965
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.12)), to(rgba(var(--color-sf-on-primary), 0.12))), rgba(var(--color-sf-primary));
1966
1960
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary));
1967
1961
  color: rgba(var(--color-sf-surface));
1968
1962
  border-color: unset;
1969
1963
  }
1970
1964
  .e-ribbon-backstage-popup .e-btn:hover:focus {
1971
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
1972
1965
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
1973
1966
  color: rgba(var(--color-sf-surface));
1974
1967
  border-color: unset;
@@ -1989,7 +1982,6 @@
1989
1982
  background: rgba(var(--color-sf-outline-variant));
1990
1983
  }
1991
1984
  .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item:focus, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item:focus {
1992
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
1993
1985
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
1994
1986
  color: rgba(var(--color-sf-surface));
1995
1987
  border-color: unset;
@@ -1998,7 +1990,6 @@
1998
1990
  color: rgba(var(--color-sf-surface));
1999
1991
  }
2000
1992
  .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-selected, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-focused, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-selected, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-focused {
2001
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.12)), to(rgba(var(--color-sf-on-primary), 0.12))), rgba(var(--color-sf-primary));
2002
1993
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary));
2003
1994
  color: rgba(var(--color-sf-surface));
2004
1995
  border-color: unset;
@@ -2007,7 +1998,6 @@
2007
1998
  color: rgba(var(--color-sf-surface));
2008
1999
  }
2009
2000
  .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-selected:focus, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-selected:focus {
2010
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
2011
2001
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
2012
2002
  color: rgba(var(--color-sf-surface));
2013
2003
  border-color: unset;
@@ -2017,13 +2007,11 @@
2017
2007
  }
2018
2008
  .e-ribbon-backstage-popup .e-ribbon-backstage-template,
2019
2009
  .e-ribbon-backstage-popup .e-ribbon-backstage-content {
2020
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2021
2010
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2022
2011
  }
2023
2012
 
2024
2013
  .e-ribbon.e-rbn,
2025
2014
  .e-ribbon-group-overflow-ddb {
2026
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2027
2015
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2028
2016
  border-color: unset;
2029
2017
  }
@@ -2083,7 +2071,6 @@
2083
2071
  .e-ribbon-group-overflow-ddb.e-ribbon-overflow .e-btn-group .e-btn.e-ribbon-group-button,
2084
2072
  .e-ribbon-group-overflow-ddb.e-ribbon-overflow .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
2085
2073
  .e-ribbon-group-overflow-ddb.e-ribbon-overflow .e-ribbon-group-of-btn {
2086
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2087
2074
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2088
2075
  color: rgba(var(--color-sf-on-surface));
2089
2076
  border-color: transparent;
@@ -2452,7 +2439,6 @@
2452
2439
  .e-ribbon-vertical-center.e-dropdown-popup,
2453
2440
  .e-ribbon-group-overflow-ddb.e-dropdown-popup,
2454
2441
  .e-ribbon-dropdown-group-button.e-dropdown-popup {
2455
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
2456
2442
  background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
2457
2443
  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
2458
2444
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
@@ -2553,7 +2539,6 @@
2553
2539
  }
2554
2540
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button {
2555
2541
  color: rgba(var(--color-sf-on-surface));
2556
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
2557
2542
  background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
2558
2543
  }
2559
2544
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:hover, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:focus {
@@ -2636,7 +2621,6 @@
2636
2621
  .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-focused,
2637
2622
  .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-focused, .e-ribbon-menu.e-menu-container ul.e-vertical .e-menu-item.e-focused,
2638
2623
  .e-ribbon-menu.e-menu-container ul.e-ul .e-menu-item.e-focused {
2639
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2640
2624
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2641
2625
  color: rgba(var(--color-sf-on-surface));
2642
2626
  }
package/styles/material3.css CHANGED
@@ -83,11 +83,13 @@
83
83
 
84
84
 
85
85
  .e-dropdownbase .e-list-item .e-list-icon {
86
- padding: 0 16px 0 0;
86
+ -webkit-padding-end: 16px;
87
+ padding-inline-end: 16px;
87
88
  }
88
89
 
89
90
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
90
- padding: 0 12px 0 0;
91
+ -webkit-padding-end: 12px;
92
+ padding-inline-end: 12px;
91
93
  }
92
94
 
93
95
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
@@ -1837,19 +1839,16 @@
1837
1839
 
1838
1840
 
1839
1841
  .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1840
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1841
1842
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1842
1843
  }
1843
1844
  .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1844
1845
  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
1845
1846
  }
1846
1847
  .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1847
- background-image: -webkit-gradient(linear, left top, right top, color-stop(20%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(var(--color-sf-white), 0.3)), color-stop(70%, rgba(255, 255, 255, 0)));
1848
1848
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(var(--color-sf-white), 0.3) 50%, rgba(255, 255, 255, 0) 70%);
1849
1849
  }
1850
1850
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1851
1851
  border-color: unset;
1852
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1853
1852
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1854
1853
  }
1855
1854
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab {
@@ -1900,7 +1899,6 @@
1900
1899
  }
1901
1900
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu,
1902
1901
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-backstage {
1903
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1904
1902
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1905
1903
  color: rgba(var(--color-sf-on-surface));
1906
1904
  border-color: unset;
@@ -1920,7 +1918,6 @@
1920
1918
  }
1921
1919
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-help-template {
1922
1920
  border-color: unset;
1923
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1924
1921
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1925
1922
  }
1926
1923
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-template:focus-visible {
@@ -1932,7 +1929,6 @@
1932
1929
  color: rgba(var(--color-sf-primary));
1933
1930
  }
1934
1931
  .e-ribbon.e-rbn .e-ribbon-collapse-btn {
1935
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
1936
1932
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
1937
1933
  color: rgba(var(--color-sf-on-surface-variant));
1938
1934
  border-color: transparent;
@@ -1956,19 +1952,16 @@
1956
1952
  font-weight: 400;
1957
1953
  }
1958
1954
  .e-ribbon-backstage-popup .e-btn:focus {
1959
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
1960
1955
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
1961
1956
  color: rgba(var(--color-sf-surface));
1962
1957
  border-color: unset;
1963
1958
  }
1964
1959
  .e-ribbon-backstage-popup .e-btn:hover {
1965
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.12)), to(rgba(var(--color-sf-on-primary), 0.12))), rgba(var(--color-sf-primary));
1966
1960
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary));
1967
1961
  color: rgba(var(--color-sf-surface));
1968
1962
  border-color: unset;
1969
1963
  }
1970
1964
  .e-ribbon-backstage-popup .e-btn:hover:focus {
1971
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
1972
1965
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
1973
1966
  color: rgba(var(--color-sf-surface));
1974
1967
  border-color: unset;
@@ -1989,7 +1982,6 @@
1989
1982
  background: rgba(var(--color-sf-outline-variant));
1990
1983
  }
1991
1984
  .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item:focus, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item:focus {
1992
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
1993
1985
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
1994
1986
  color: rgba(var(--color-sf-surface));
1995
1987
  border-color: unset;
@@ -1998,7 +1990,6 @@
1998
1990
  color: rgba(var(--color-sf-surface));
1999
1991
  }
2000
1992
  .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-selected, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-focused, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-selected, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-focused {
2001
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.12)), to(rgba(var(--color-sf-on-primary), 0.12))), rgba(var(--color-sf-primary));
2002
1993
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary));
2003
1994
  color: rgba(var(--color-sf-surface));
2004
1995
  border-color: unset;
@@ -2007,7 +1998,6 @@
2007
1998
  color: rgba(var(--color-sf-surface));
2008
1999
  }
2009
2000
  .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-selected:focus, .e-ribbon-backstage-popup .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-selected:focus {
2010
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
2011
2001
  background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
2012
2002
  color: rgba(var(--color-sf-surface));
2013
2003
  border-color: unset;
@@ -2017,13 +2007,11 @@
2017
2007
  }
2018
2008
  .e-ribbon-backstage-popup .e-ribbon-backstage-template,
2019
2009
  .e-ribbon-backstage-popup .e-ribbon-backstage-content {
2020
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2021
2010
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2022
2011
  }
2023
2012
 
2024
2013
  .e-ribbon.e-rbn,
2025
2014
  .e-ribbon-group-overflow-ddb {
2026
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2027
2015
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2028
2016
  border-color: unset;
2029
2017
  }
@@ -2083,7 +2071,6 @@
2083
2071
  .e-ribbon-group-overflow-ddb.e-ribbon-overflow .e-btn-group .e-btn.e-ribbon-group-button,
2084
2072
  .e-ribbon-group-overflow-ddb.e-ribbon-overflow .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
2085
2073
  .e-ribbon-group-overflow-ddb.e-ribbon-overflow .e-ribbon-group-of-btn {
2086
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2087
2074
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2088
2075
  color: rgba(var(--color-sf-on-surface));
2089
2076
  border-color: transparent;
@@ -2452,7 +2439,6 @@
2452
2439
  .e-ribbon-vertical-center.e-dropdown-popup,
2453
2440
  .e-ribbon-group-overflow-ddb.e-dropdown-popup,
2454
2441
  .e-ribbon-dropdown-group-button.e-dropdown-popup {
2455
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
2456
2442
  background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
2457
2443
  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
2458
2444
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
@@ -2553,7 +2539,6 @@
2553
2539
  }
2554
2540
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button {
2555
2541
  color: rgba(var(--color-sf-on-surface));
2556
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
2557
2542
  background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
2558
2543
  }
2559
2544
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:hover, .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn.e-ribbon-group-button.e-icon-btn:focus {
@@ -2636,7 +2621,6 @@
2636
2621
  .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-focused,
2637
2622
  .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-focused, .e-ribbon-menu.e-menu-container ul.e-vertical .e-menu-item.e-focused,
2638
2623
  .e-ribbon-menu.e-menu-container ul.e-ul .e-menu-item.e-focused {
2639
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
2640
2624
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
2641
2625
  color: rgba(var(--color-sf-on-surface));
2642
2626
  }
package/styles/ribbon/bds.css CHANGED
@@ -122,11 +122,13 @@
122
122
  }
123
123
 
124
124
  .e-dropdownbase .e-list-item .e-list-icon {
125
- padding: 0 8px 0 0;
125
+ -webkit-padding-end: 8px;
126
+ padding-inline-end: 8px;
126
127
  }
127
128
 
128
129
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
129
- padding: 0 4px 0 0;
130
+ -webkit-padding-end: 4px;
131
+ padding-inline-end: 4px;
130
132
  }
131
133
 
132
134
  /* stylelint-disable */
@@ -1721,7 +1723,6 @@
1721
1723
  background-color: var(--color-sf-bg-secondary);
1722
1724
  }
1723
1725
  .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1724
- background-image: -webkit-gradient(linear, left top, right top, color-stop(20%, transparent), color-stop(50%, var(--color-sf-bg-tertiary)), color-stop(70%, transparent));
1725
1726
  background-image: linear-gradient(90deg, transparent 20%, var(--color-sf-bg-tertiary) 50%, transparent 70%);
1726
1727
  }
1727
1728
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {