@syncfusion/ej2-navigations 28.2.6 → 28.2.11

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 (45) hide show
  1. package/README.md +1 -1
  2. package/dist/ej2-navigations.min.js +2 -2
  3. package/dist/ej2-navigations.umd.min.js +2 -2
  4. package/dist/ej2-navigations.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-navigations.es2015.js +38 -5
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +38 -5
  8. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  9. package/dist/global/ej2-navigations.min.js +2 -2
  10. package/dist/global/ej2-navigations.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +10 -10
  13. package/src/common/menu-base.js +38 -5
  14. package/styles/bootstrap4-lite.css +4 -4
  15. package/styles/bootstrap4.css +4 -4
  16. package/styles/bootstrap5-dark-lite.css +10 -10
  17. package/styles/bootstrap5-dark.css +10 -10
  18. package/styles/bootstrap5-lite.css +10 -10
  19. package/styles/bootstrap5.3-lite.css +12 -12
  20. package/styles/bootstrap5.3.css +12 -12
  21. package/styles/bootstrap5.css +10 -10
  22. package/styles/fluent2-lite.css +7 -26
  23. package/styles/fluent2.css +7 -26
  24. package/styles/material3-dark-lite.css +10 -10
  25. package/styles/material3-dark.css +10 -10
  26. package/styles/material3-lite.css +10 -10
  27. package/styles/material3.css +10 -10
  28. package/styles/tab/_bootstrap4-definition.scss +2 -2
  29. package/styles/tab/_bootstrap5-definition.scss +3 -3
  30. package/styles/tab/_bootstrap5.3-definition.scss +3 -3
  31. package/styles/tab/_material3-definition.scss +3 -3
  32. package/styles/tab/_tailwind3-definition.scss +3 -3
  33. package/styles/tab/bootstrap4.css +4 -4
  34. package/styles/tab/bootstrap5-dark.css +10 -10
  35. package/styles/tab/bootstrap5.3.css +10 -10
  36. package/styles/tab/bootstrap5.css +10 -10
  37. package/styles/tab/material3-dark.css +10 -10
  38. package/styles/tab/material3.css +10 -10
  39. package/styles/tab/tailwind3.css +10 -10
  40. package/styles/tailwind3-lite.css +17 -36
  41. package/styles/tailwind3.css +17 -36
  42. package/styles/toolbar/_theme.scss +25 -64
  43. package/styles/toolbar/bootstrap5.3.css +2 -2
  44. package/styles/toolbar/fluent2.css +7 -26
  45. package/styles/toolbar/tailwind3.css +7 -26
package/styles/tailwind3-lite.css CHANGED
@@ -1712,24 +1712,15 @@
1712
1712
  border-color: var(--color-sf-icon-color);
1713
1713
  border-style: solid;
1714
1714
  border-width: 0;
1715
- -webkit-box-shadow: none;
1716
- box-shadow: none;
1715
+ -webkit-box-shadow: inset 0 0 0 2px var(--color-sf-primary);
1716
+ box-shadow: inset 0 0 0 2px var(--color-sf-primary);
1717
1717
  }
1718
1718
  .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
1719
1719
  color: var(--color-sf-secondary-text-color-hover);
1720
+ color: var(--color-sf-icon-color);
1720
1721
  }
1721
1722
  .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
1722
1723
  color: var(--color-sf-content-text-color);
1723
- }
1724
- .e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible {
1725
- background: var(--color-sf-content-bg-color-alt1);
1726
- -webkit-box-shadow: inset 0 0 0 2px var(--color-sf-primary);
1727
- box-shadow: inset 0 0 0 2px var(--color-sf-primary);
1728
- }
1729
- .e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
1730
- color: var(--color-sf-icon-color);
1731
- }
1732
- .e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
1733
1724
  color: var(--color-sf-content-text-color);
1734
1725
  }
1735
1726
  .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
@@ -1900,18 +1891,13 @@
1900
1891
  border-color: var(--color-sf-icon-color);
1901
1892
  border-style: solid;
1902
1893
  border-width: 0;
1903
- -webkit-box-shadow: none;
1904
- box-shadow: none;
1905
- }
1906
- .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible {
1907
- background: var(--color-sf-secondary-bg-color-hover);
1908
1894
  -webkit-box-shadow: inset 0 0 0 2px var(--color-sf-primary);
1909
1895
  box-shadow: inset 0 0 0 2px var(--color-sf-primary);
1910
1896
  }
1911
- .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
1897
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-icons {
1912
1898
  color: inherit;
1913
1899
  }
1914
- .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
1900
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
1915
1901
  color: var(--color-sf-flyout-text-color-focus);
1916
1902
  }
1917
1903
  .e-toolbar .e-toolbar-pop .e-toolbar-item .e-btn:focus {
@@ -1932,18 +1918,13 @@
1932
1918
  border-color: var(--color-sf-icon-color);
1933
1919
  border-style: solid;
1934
1920
  border-width: 0;
1935
- -webkit-box-shadow: none;
1936
- box-shadow: none;
1937
- }
1938
- .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible {
1939
- background: var(--color-sf-content-bg-color-alt1);
1940
1921
  -webkit-box-shadow: inset 0 0 0 2px var(--color-sf-primary);
1941
1922
  box-shadow: inset 0 0 0 2px var(--color-sf-primary);
1942
1923
  }
1943
- .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
1924
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-icons {
1944
1925
  color: var(--color-sf-icon-color);
1945
1926
  }
1946
- .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
1927
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
1947
1928
  color: var(--color-sf-content-text-color);
1948
1929
  }
1949
1930
  .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
@@ -3467,10 +3448,10 @@
3467
3448
  display: -webkit-inline-box;
3468
3449
  display: -ms-inline-flexbox;
3469
3450
  display: inline-flex;
3470
- height: 24px;
3471
- min-width: 24px;
3472
- width: 24px;
3473
- line-height: 24px;
3451
+ height: 20px;
3452
+ min-width: 20px;
3453
+ width: 20px;
3454
+ line-height: 1;
3474
3455
  }
3475
3456
  @media screen and (max-width: 480px) {
3476
3457
  .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -3480,7 +3461,7 @@
3480
3461
  }
3481
3462
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
3482
3463
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
3483
- font-size: 14px;
3464
+ font-size: 16px;
3484
3465
  }
3485
3466
  @media screen and (max-width: 480px) {
3486
3467
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -4889,10 +4870,10 @@
4889
4870
  display: -webkit-inline-box;
4890
4871
  display: -ms-inline-flexbox;
4891
4872
  display: inline-flex;
4892
- height: 24px;
4893
- min-width: 24px;
4894
- width: 24px;
4895
- line-height: 24px;
4873
+ height: 20px;
4874
+ min-width: 20px;
4875
+ width: 20px;
4876
+ line-height: 1;
4896
4877
  }
4897
4878
  @media screen and (max-width: 480px) {
4898
4879
  .e-tab-clone-element .e-icons.e-tab-icon {
@@ -4902,7 +4883,7 @@
4902
4883
  }
4903
4884
  .e-tab-clone-element .e-tab-icon,
4904
4885
  .e-tab-clone-element .e-tab-icon::before {
4905
- font-size: 14px;
4886
+ font-size: 16px;
4906
4887
  }
4907
4888
  @media screen and (max-width: 480px) {
4908
4889
  .e-tab-clone-element .e-tab-icon,
package/styles/tailwind3.css CHANGED
@@ -2030,24 +2030,15 @@
2030
2030
  border-color: var(--color-sf-icon-color);
2031
2031
  border-style: solid;
2032
2032
  border-width: 0;
2033
- -webkit-box-shadow: none;
2034
- box-shadow: none;
2033
+ -webkit-box-shadow: inset 0 0 0 2px var(--color-sf-primary);
2034
+ box-shadow: inset 0 0 0 2px var(--color-sf-primary);
2035
2035
  }
2036
2036
  .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
2037
2037
  color: var(--color-sf-secondary-text-color-hover);
2038
+ color: var(--color-sf-icon-color);
2038
2039
  }
2039
2040
  .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
2040
2041
  color: var(--color-sf-content-text-color);
2041
- }
2042
- .e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible {
2043
- background: var(--color-sf-content-bg-color-alt1);
2044
- -webkit-box-shadow: inset 0 0 0 2px var(--color-sf-primary);
2045
- box-shadow: inset 0 0 0 2px var(--color-sf-primary);
2046
- }
2047
- .e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
2048
- color: var(--color-sf-icon-color);
2049
- }
2050
- .e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
2051
2042
  color: var(--color-sf-content-text-color);
2052
2043
  }
2053
2044
  .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
@@ -2218,18 +2209,13 @@
2218
2209
  border-color: var(--color-sf-icon-color);
2219
2210
  border-style: solid;
2220
2211
  border-width: 0;
2221
- -webkit-box-shadow: none;
2222
- box-shadow: none;
2223
- }
2224
- .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible {
2225
- background: var(--color-sf-secondary-bg-color-hover);
2226
2212
  -webkit-box-shadow: inset 0 0 0 2px var(--color-sf-primary);
2227
2213
  box-shadow: inset 0 0 0 2px var(--color-sf-primary);
2228
2214
  }
2229
- .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
2215
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-icons {
2230
2216
  color: inherit;
2231
2217
  }
2232
- .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
2218
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
2233
2219
  color: var(--color-sf-flyout-text-color-focus);
2234
2220
  }
2235
2221
  .e-toolbar .e-toolbar-pop .e-toolbar-item .e-btn:focus {
@@ -2250,18 +2236,13 @@
2250
2236
  border-color: var(--color-sf-icon-color);
2251
2237
  border-style: solid;
2252
2238
  border-width: 0;
2253
- -webkit-box-shadow: none;
2254
- box-shadow: none;
2255
- }
2256
- .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible {
2257
- background: var(--color-sf-content-bg-color-alt1);
2258
2239
  -webkit-box-shadow: inset 0 0 0 2px var(--color-sf-primary);
2259
2240
  box-shadow: inset 0 0 0 2px var(--color-sf-primary);
2260
2241
  }
2261
- .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
2242
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-icons {
2262
2243
  color: var(--color-sf-icon-color);
2263
2244
  }
2264
- .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
2245
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
2265
2246
  color: var(--color-sf-content-text-color);
2266
2247
  }
2267
2248
  .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
@@ -4235,10 +4216,10 @@
4235
4216
  display: -webkit-inline-box;
4236
4217
  display: -ms-inline-flexbox;
4237
4218
  display: inline-flex;
4238
- height: 24px;
4239
- min-width: 24px;
4240
- width: 24px;
4241
- line-height: 24px;
4219
+ height: 20px;
4220
+ min-width: 20px;
4221
+ width: 20px;
4222
+ line-height: 1;
4242
4223
  }
4243
4224
  @media screen and (max-width: 480px) {
4244
4225
  .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -4248,7 +4229,7 @@
4248
4229
  }
4249
4230
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
4250
4231
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
4251
- font-size: 14px;
4232
+ font-size: 16px;
4252
4233
  }
4253
4234
  @media screen and (max-width: 480px) {
4254
4235
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -5657,10 +5638,10 @@
5657
5638
  display: -webkit-inline-box;
5658
5639
  display: -ms-inline-flexbox;
5659
5640
  display: inline-flex;
5660
- height: 24px;
5661
- min-width: 24px;
5662
- width: 24px;
5663
- line-height: 24px;
5641
+ height: 20px;
5642
+ min-width: 20px;
5643
+ width: 20px;
5644
+ line-height: 1;
5664
5645
  }
5665
5646
  @media screen and (max-width: 480px) {
5666
5647
  .e-tab-clone-element .e-icons.e-tab-icon {
@@ -5670,7 +5651,7 @@
5670
5651
  }
5671
5652
  .e-tab-clone-element .e-tab-icon,
5672
5653
  .e-tab-clone-element .e-tab-icon::before {
5673
- font-size: 14px;
5654
+ font-size: 16px;
5674
5655
  }
5675
5656
  @media screen and (max-width: 480px) {
5676
5657
  .e-tab-clone-element .e-tab-icon,
package/styles/toolbar/_theme.scss CHANGED
@@ -45,42 +45,26 @@
45
45
  border-color: $tbar-btn-focus-border-color;
46
46
  border-style: $tbar-border-nav-type;
47
47
  border-width: $tbar-btn-hover-border-size;
48
-
49
- @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
50
- box-shadow: none;
51
- }
52
- @else {
53
- box-shadow: $tbar-ext-btn-focus-box-shadow;
54
- }
55
-
48
+ box-shadow: $tbar-ext-btn-focus-box-shadow;
49
+
56
50
  .e-icons {
57
51
  color: $tbar-btn-icons-focus-color;
52
+ @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
53
+ color: $tbar-default-icon-color;
54
+ }
58
55
  }
59
56
 
60
57
  .e-tbar-btn-text {
61
58
  color: $tbar-btn-text-focus-color;
62
-
63
59
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
64
60
  color: $tbar-btn-icons-focus-color;
65
61
  }
66
- }
67
- }
68
-
69
- @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
70
- &:focus-visible {
71
- background: $tbar-default-bg;
72
- box-shadow: $tbar-ext-btn-focus-box-shadow;
73
-
74
- .e-icons {
75
- color: $tbar-default-icon-color;
76
- }
77
-
78
- .e-tbar-btn-text {
62
+ @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
79
63
  color: $tbar-default-font;
80
64
  }
81
65
  }
82
66
  }
83
-
67
+
84
68
  &:hover {
85
69
  background: $tbar-hover-bg;
86
70
  border-color: $tbar-hover-border-color;
@@ -303,27 +287,9 @@
303
287
  border-color: $tbar-btn-focus-border-color;
304
288
  border-style: $tbar-border-nav-type;
305
289
  border-width: $tbar-popup-btn-hover-border-size;
306
-
307
- @if ($skin-name == 'fluent2' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3') {
308
- box-shadow: none;
309
- }
310
- @else {
311
- box-shadow: $tbar-popup-btn-focus-box-shadow;
312
- }
313
-
314
- @if $skin-name == 'bootstrap5.3' {
315
- .e-tbar-btn-text,
316
- .e-icons.e-btn-icon {
317
- color: $tbar-btn-active-icons-color;
318
- }
319
- }
320
- }
321
-
322
- @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
323
- &:focus-visible {
324
- background: $tbar-popup-btn-focus-bg;
325
- box-shadow: $tbar-popup-btn-focus-box-shadow;
326
-
290
+ box-shadow: $tbar-popup-btn-focus-box-shadow;
291
+
292
+ @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
327
293
  .e-icons {
328
294
  color: $tbar-popup-nav-hover-icons-color;
329
295
  }
@@ -332,6 +298,12 @@
332
298
  color: $tbar-popup-btn-text-focus-color;
333
299
  }
334
300
  }
301
+ @if $skin-name == 'bootstrap5.3' {
302
+ .e-tbar-btn-text,
303
+ .e-icons.e-btn-icon {
304
+ color: $tbar-btn-active-icons-color;
305
+ }
306
+ }
335
307
  }
336
308
  }
337
309
 
@@ -362,26 +334,9 @@
362
334
  border-color: $tbar-btn-focus-border-color;
363
335
  border-style: $tbar-border-nav-type;
364
336
  border-width: $tbar-btn-hover-border-size;
365
-
337
+ box-shadow: $tbar-ext-btn-focus-box-shadow;
338
+
366
339
  @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
367
- box-shadow: none;
368
- }
369
- @else {
370
- box-shadow: $tbar-ext-btn-focus-box-shadow;
371
- }
372
- @if $skin-name == 'bootstrap5.3' {
373
- .e-tbar-btn-text,
374
- .e-icons.e-btn-icon {
375
- color: $tbar-default-icon-color;
376
- }
377
- }
378
- }
379
-
380
- @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
381
- &:focus-visible {
382
- background: $tbar-default-bg;
383
- box-shadow: $tbar-ext-btn-focus-box-shadow;
384
-
385
340
  .e-icons {
386
341
  color: $tbar-default-icon-color;
387
342
  }
@@ -390,8 +345,14 @@
390
345
  color: $tbar-default-font;
391
346
  }
392
347
  }
348
+ @if $skin-name == 'bootstrap5.3' {
349
+ .e-tbar-btn-text,
350
+ .e-icons.e-btn-icon {
351
+ color: $tbar-default-icon-color;
352
+ }
353
+ }
393
354
  }
394
-
355
+
395
356
  &:hover {
396
357
  background: $tbar-hover-bg;
397
358
  border-radius: $tbar-btn-border-radius;
package/styles/toolbar/bootstrap5.3.css CHANGED
@@ -842,8 +842,8 @@
842
842
  border-color: var(--color-sf-icon-color);
843
843
  border-style: solid;
844
844
  border-width: 0;
845
- -webkit-box-shadow: none;
846
- box-shadow: none;
845
+ -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
846
+ box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
847
847
  }
848
848
  .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text,
849
849
  .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-icons.e-btn-icon {
package/styles/toolbar/fluent2.css CHANGED
@@ -660,24 +660,15 @@
660
660
  border-color: var(--color-sf-icon-color);
661
661
  border-style: solid;
662
662
  border-width: 0;
663
- -webkit-box-shadow: none;
664
- box-shadow: none;
663
+ -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
664
+ box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
665
665
  }
666
666
  .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
667
667
  color: var(--color-sf-toolbar-icon-color);
668
+ color: var(--color-sf-icon-color);
668
669
  }
669
670
  .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
670
671
  color: var(--color-sf-toolbar-icon-color);
671
- }
672
- .e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible {
673
- background: var(--color-sf-content-bg-color-alt1);
674
- -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
675
- box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
676
- }
677
- .e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
678
- color: var(--color-sf-icon-color);
679
- }
680
- .e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
681
672
  color: var(--color-sf-content-text-color);
682
673
  }
683
674
  .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
@@ -848,18 +839,13 @@
848
839
  border-color: var(--color-sf-icon-color);
849
840
  border-style: solid;
850
841
  border-width: 0;
851
- -webkit-box-shadow: none;
852
- box-shadow: none;
853
- }
854
- .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible {
855
- background: var(--color-sf-flyout-bg-color-focus);
856
842
  -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
857
843
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
858
844
  }
859
- .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
845
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-icons {
860
846
  color: var(--color-sf-icon-color-hover);
861
847
  }
862
- .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
848
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
863
849
  color: var(--color-sf-flyout-text-color-focus);
864
850
  }
865
851
  .e-toolbar .e-toolbar-pop .e-toolbar-item .e-btn:focus {
@@ -880,18 +866,13 @@
880
866
  border-color: var(--color-sf-icon-color);
881
867
  border-style: solid;
882
868
  border-width: 0;
883
- -webkit-box-shadow: none;
884
- box-shadow: none;
885
- }
886
- .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible {
887
- background: var(--color-sf-content-bg-color-alt1);
888
869
  -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
889
870
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
890
871
  }
891
- .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
872
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-icons {
892
873
  color: var(--color-sf-icon-color);
893
874
  }
894
- .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
875
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
895
876
  color: var(--color-sf-content-text-color);
896
877
  }
897
878
  .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
package/styles/toolbar/tailwind3.css CHANGED
@@ -659,24 +659,15 @@
659
659
  border-color: var(--color-sf-icon-color);
660
660
  border-style: solid;
661
661
  border-width: 0;
662
- -webkit-box-shadow: none;
663
- box-shadow: none;
662
+ -webkit-box-shadow: inset 0 0 0 2px var(--color-sf-primary);
663
+ box-shadow: inset 0 0 0 2px var(--color-sf-primary);
664
664
  }
665
665
  .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
666
666
  color: var(--color-sf-secondary-text-color-hover);
667
+ color: var(--color-sf-icon-color);
667
668
  }
668
669
  .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
669
670
  color: var(--color-sf-content-text-color);
670
- }
671
- .e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible {
672
- background: var(--color-sf-content-bg-color-alt1);
673
- -webkit-box-shadow: inset 0 0 0 2px var(--color-sf-primary);
674
- box-shadow: inset 0 0 0 2px var(--color-sf-primary);
675
- }
676
- .e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
677
- color: var(--color-sf-icon-color);
678
- }
679
- .e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
680
671
  color: var(--color-sf-content-text-color);
681
672
  }
682
673
  .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
@@ -847,18 +838,13 @@
847
838
  border-color: var(--color-sf-icon-color);
848
839
  border-style: solid;
849
840
  border-width: 0;
850
- -webkit-box-shadow: none;
851
- box-shadow: none;
852
- }
853
- .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible {
854
- background: var(--color-sf-secondary-bg-color-hover);
855
841
  -webkit-box-shadow: inset 0 0 0 2px var(--color-sf-primary);
856
842
  box-shadow: inset 0 0 0 2px var(--color-sf-primary);
857
843
  }
858
- .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
844
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-icons {
859
845
  color: inherit;
860
846
  }
861
- .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
847
+ .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
862
848
  color: var(--color-sf-flyout-text-color-focus);
863
849
  }
864
850
  .e-toolbar .e-toolbar-pop .e-toolbar-item .e-btn:focus {
@@ -879,18 +865,13 @@
879
865
  border-color: var(--color-sf-icon-color);
880
866
  border-style: solid;
881
867
  border-width: 0;
882
- -webkit-box-shadow: none;
883
- box-shadow: none;
884
- }
885
- .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible {
886
- background: var(--color-sf-content-bg-color-alt1);
887
868
  -webkit-box-shadow: inset 0 0 0 2px var(--color-sf-primary);
888
869
  box-shadow: inset 0 0 0 2px var(--color-sf-primary);
889
870
  }
890
- .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
871
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-icons {
891
872
  color: var(--color-sf-icon-color);
892
873
  }
893
- .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
874
+ .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
894
875
  color: var(--color-sf-content-text-color);
895
876
  }
896
877
  .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {