@syncfusion/ej2-navigations 33.2.3 → 33.2.6

package/styles/toolbar/bootstrap5-dark.css

@@ -740,10 +740,16 @@
   opacity: 0.5;
   color: #ced4da;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: rgb(26.177027027, 29.35, 32.522972973);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: #ced4da;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: #ced4da;
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/bootstrap5.3.css

@@ -992,10 +992,16 @@
   opacity: 0.5;
   color: var(--color-sf-content-text-color-alt2);
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: var(--color-sf-content-bg-color-alt1);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: var(--color-sf-content-text-color-alt2);
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: var(--color-sf-content-text-color-alt2);
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/bootstrap5.css

@@ -740,10 +740,16 @@
   opacity: 0.5;
   color: #495057;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: #f8f9fa;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: #495057;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: #495057;
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/fabric-dark.css

@@ -710,10 +710,16 @@
   opacity: 0.5;
   color: rgba(218, 218, 218, 0.4);
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: #333232;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: rgba(218, 218, 218, 0.4);
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: rgba(218, 218, 218, 0.4);
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/fabric.css

@@ -711,10 +711,16 @@
   opacity: 0.5;
   color: #c8c8c8;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: #fff;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: #c8c8c8;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: #c8c8c8;
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/fluent-dark.css

@@ -735,10 +735,16 @@
   opacity: 0.5;
   color: #f3f2f1;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: #f3f2f1;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: #f3f2f1;
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/fluent.css

@@ -735,10 +735,16 @@
   opacity: 0.5;
   color: #201f1e;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: #201f1e;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: #201f1e;
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/fluent2.css

@@ -995,10 +995,16 @@
   opacity: inherit;
   color: var(--color-sf-icon-color-disabled);
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: var(--color-sf-content-bg-color-alt1);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: var(--color-sf-icon-color-disabled);
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: var(--color-sf-icon-color-disabled);
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/highcontrast-light.css

@@ -710,10 +710,16 @@
   opacity: 1;
   color: #000;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: #fff;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: #000;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: #000;
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/highcontrast.css

@@ -711,10 +711,16 @@
   opacity: 0.5;
   color: #757575;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: #000;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: #757575;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: #757575;
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/material-dark.css

@@ -798,10 +798,16 @@
   opacity: 0.5;
   color: rgba(255, 255, 255, 0.3);
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: #212121;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: rgba(255, 255, 255, 0.3);
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: rgba(255, 255, 255, 0.3);
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/material.css

@@ -800,10 +800,16 @@
   opacity: 0.5;
   color: rgba(0, 0, 0, 0.26);
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: #fafafa;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: rgba(0, 0, 0, 0.38);
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: rgba(0, 0, 0, 0.26);
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/material3-dark.css

@@ -984,10 +984,16 @@
   opacity: 0.38;
   color: rgba(var(--color-sf-on-surface-variant));
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: rgba(var(--color-sf-on-surface-variant));
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/material3.css

@@ -990,10 +990,16 @@
   opacity: 0.38;
   color: rgba(var(--color-sf-on-surface-variant));
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: rgba(var(--color-sf-on-surface-variant));
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/tailwind-dark.css

@@ -735,10 +735,16 @@
   opacity: 0.5;
   color: #9ca3af;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: #374151;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: #9ca3af;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: #9ca3af;
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/tailwind.css

@@ -735,10 +735,16 @@
   opacity: 0.5;
   color: #6b7280;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: #f3f4f6;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: #6b7280;
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: #6b7280;
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/toolbar/tailwind3.css

@@ -962,10 +962,16 @@
   opacity: 0.5;
   color: var(--color-sf-content-text-color-alt2);
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn-text {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
+  background: var(--color-sf-transparent);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+}
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
   color: var(--color-sf-content-text-color-alt2);
 }
-.e-toolbar .e-toolbar-item.e-overlay .e-icons {
+.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: var(--color-sf-content-text-color-alt2);
 }
 .e-toolbar.e-vertical .e-hor-nav {

package/styles/treeview/_bds-definition.scss

@@ -56,8 +56,8 @@ $treeview-icon-wrap-width: calc(100% - 32px) !default;
 $treeview-icon-img-wrap-width: calc(100% - 60px) !default;
 
 $treeview-big-item-height: 48px !default;
-$treeview-big-text-line-height: 46px !default;
-$treeview-big-text-min-height: 46px !default;
+$treeview-big-text-line-height: 48px !default;
+$treeview-big-text-min-height: 48px !default;
 $treeview-big-input-height: 40px !default;
 $treeview-big-text-padding: 0 12px !default;
 $treeview-big-input-padding: 0 9px !default;
@@ -89,6 +89,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 35px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
+$treeview-focus-box-shadow: inset 0 1px 2px 0 rgba(16, 24, 40, 0.05), inset 0 0 0 4px rgba(157, 118, 237, 0.24) !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: $text-xl !default;

package/styles/treeview/_bootstrap-dark-definition.scss

@@ -114,7 +114,8 @@ $treeview-big-check-wrap-width: calc(100% - 27px) !default;
 $treeview-big-check-icon-wrap-width: calc(100% - 68px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 96px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 34px) !default;
-$treeview-big-icon-img-wrap-width: calc(100% - 62px) !default;  
+$treeview-big-icon-img-wrap-width: calc(100% - 62px) !default;
+$treeview-focus-box-shadow: inset 0 0 0 1px $grey-light-font !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 12px !default;

package/styles/treeview/_bootstrap-definition.scss

@@ -109,7 +109,8 @@ $treeview-big-check-wrap-width: calc(100% - 27px) !default;
 $treeview-big-check-icon-wrap-width: calc(100% - 68px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 96px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 34px) !default;
-$treeview-big-icon-img-wrap-width: calc(100% - 62px) !default;   
+$treeview-big-icon-img-wrap-width: calc(100% - 62px) !default;
+$treeview-focus-box-shadow: inset 0 0 0 1px $gray-base !default;   
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 12px !default;

package/styles/treeview/_bootstrap4-definition.scss

@@ -139,6 +139,7 @@ $treeview-drag-icon-font-size: 14px;
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 12px !default;
 $treeview-big-list-text-input-height: 36px !default;
+$treeview-focus-box-shadow: inset 0 0 0 1px $gray-900 !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 12px !default;

package/styles/treeview/_bootstrap5-dark-definition.scss

@@ -85,6 +85,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 35px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
+$treeview-focus-box-shadow: inset 0 0 0 2px $content-text-color !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: $text-xl !default;

package/styles/treeview/_bootstrap5-definition.scss

@@ -85,6 +85,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 35px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
+$treeview-focus-box-shadow: inset 0 0 0 2px $content-text-color !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: $text-xl !default;

package/styles/treeview/_bootstrap5.3-definition.scss

@@ -85,6 +85,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 35px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
+$treeview-focus-box-shadow: $keyboard-focus-shadow !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: $text-sm !default;

package/styles/treeview/_fabric-dark-definition.scss

@@ -112,6 +112,7 @@ $treeview-big-icon-img-wrap-width: calc(100% - 62px) !default;
 $treeview-drag-icon-padding: 6px !default;
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 12px !default;
+$treeview-focus-box-shadow: inset 0 0 0 1px $neutral-black !default;
 //enddefault
 
 $treeview-font-family: $font-family !default;

package/styles/treeview/_fabric-definition.scss

@@ -109,6 +109,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 68px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 96px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 35px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 62px) !default;
+$treeview-focus-box-shadow: inset 0 0 0 1px $neutral-black !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 12px !default;

package/styles/treeview/_fluent-dark-definition.scss

@@ -85,6 +85,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 70px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 102px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 36px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 69px) !default;
+$treeview-focus-box-shadow: inset $shadow-focus-ring2 !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: $text-xs !default;

package/styles/treeview/_fluent-definition.scss

@@ -85,6 +85,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 70px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 102px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 36px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 69px) !default;
+$treeview-focus-box-shadow: inset $shadow-focus-ring2 !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: $text-xs !default;

package/styles/treeview/_fluent2-definition.scss

@@ -93,6 +93,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 35px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
+$treeview-focus-box-shadow: $keyboard-focus !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 14px !default;
@@ -151,12 +152,15 @@ $treeview-text-color: $content-text-color !default;
 $treeview-border-color: $border-light !default;
 $treeview-item-border-color: $transparent !default;
 $treeview-item-active-bg: $flyout-bg-color-selected !default;
+$treeview-item-focus-bg: $transparent !default;
 $treeview-icon-active-color: $content-text-color-selected !default;
 $treeview-text-active-color: $content-text-color-selected !default;
 $treeview-item-active-border-color: $content-bg-color-selected !default;
 $treeview-item-hover-bg: $content-bg-color-hover !default;
 $treeview-icon-hover-color: $icon-color-hover !default;
+$treeview-icon-focus-color: $icon-color !default;
 $treeview-text-hover-color: $content-text-color-hover !default;
+$treeview-text-focus-color: $content-text-color !default;
 $treeview-item-hover-border-color: $content-bg-color-hover !default;
 $treeview-item-active-hover-bg: $content-bg-color-selected !default;
 $treeview-icon-active-hover-color: $content-text-color-selected !default;

package/styles/treeview/_highcontrast-definition.scss

@@ -117,6 +117,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 68px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 96px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 34px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 62px) !default;
+$treeview-focus-box-shadow: inset 0 0 0 1px $bg-base-100 !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 12px !default;

package/styles/treeview/_highcontrast-light-definition.scss

@@ -120,6 +120,7 @@ $treeview-big-icon-img-wrap-width: calc(100% - 62px) !default;
 $treeview-drag-icon-padding: 6px !default;
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 12px !default;
+$treeview-focus-box-shadow: inset 0 0 0 1px $bg-base-100 !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 12px !default;

package/styles/treeview/_material-dark-definition.scss

@@ -106,6 +106,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 70px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 98px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 34px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 62px) !default;
+$treeview-focus-box-shadow: inset 0 0 0 1px $grey-white !default;
 
 $treeview-drag-icon-padding: 6px !default;
 $treeview-font-family: $font-family !default;

package/styles/treeview/_material-definition.scss

@@ -109,6 +109,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 70px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 98px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 34px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 62px) !default;
+$treeview-focus-box-shadow: inset 0 0 0 1px $grey-900 !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 12px !default;

package/styles/treeview/_material3-dark-definition.scss

@@ -124,6 +124,7 @@ $treeview-big-drop-count-padding: 3px 5px 4px !default;
 $treeview-padding-none: 0 !default;
 $treeview-bigger-list-text-padding: 12px !default;
 $treeview-input-group-input-height: 28px !default;
+$treeview-focus-box-shadow: $shadow-focus-ring3 !default;
 
 $treeview-icon-color: rgba($icon-color) !default;
 $treeview-text-color: rgba($content-text-color) !default;

package/styles/treeview/_material3-definition.scss

@@ -124,6 +124,7 @@ $treeview-big-drop-count-padding: 3px 5px 4px !default;
 $treeview-padding-none: 0 !default;
 $treeview-bigger-list-text-padding: 12px !default;
 $treeview-input-group-input-height: 28px !default;
+$treeview-focus-box-shadow: $shadow-focus-ring3 !default;
 
 $treeview-icon-color: rgba($icon-color) !default;
 $treeview-text-color: rgba($content-text-color) !default;

package/styles/treeview/_tailwind-dark-definition.scss

@@ -10,7 +10,7 @@ $treeview-image-font-size: $text-xl !default;
 $treeview-big-font-size: $text-base !default;
 $treeview-big-icon-font-size: $text-2xl !default;
 $treeview-item-height: 38px !default;
-$treeview-text-line-height: 36px !default;
+$treeview-text-line-height: 38px !default;
 $treeview-text-min-height: 36px !default;
 $treeview-input-height: 30px !default;
 $treeview-root-ul-padding: 0 0 0 12px !default;
@@ -58,7 +58,7 @@ $treeview-icon-img-wrap-width: calc(100% - 60px) !default;
 
 $treeview-big-item-height: 48px !default;
 $treeview-big-text-min-height: 46px !default;
-$treeview-big-text-line-height: 46px !default;
+$treeview-big-text-line-height: 48px !default;
 $treeview-big-input-height: 40px !default;
 $treeview-big-text-padding: 0 12px !default;
 $treeview-big-input-padding: 0 9px !default;
@@ -90,6 +90,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 35px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
+$treeview-focus-box-shadow: $shadow-focus-ring1 !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: $text-xl !default;

package/styles/treeview/_tailwind-definition.scss

@@ -10,7 +10,7 @@ $treeview-image-font-size: $text-xl !default;
 $treeview-big-font-size: $text-base !default;
 $treeview-big-icon-font-size: $text-2xl !default;
 $treeview-item-height: 38px !default;
-$treeview-text-line-height: 36px !default;
+$treeview-text-line-height: 38px !default;
 $treeview-text-min-height: 36px !default;
 $treeview-input-height: 30px !default;
 $treeview-root-ul-padding: 0 0 0 12px !default;
@@ -58,7 +58,7 @@ $treeview-icon-img-wrap-width: calc(100% - 60px) !default;
 
 $treeview-big-item-height: 48px !default;
 $treeview-big-text-min-height: 46px !default;
-$treeview-big-text-line-height: 46px !default;
+$treeview-big-text-line-height: 48px !default;
 $treeview-big-input-height: 40px !default;
 $treeview-big-text-padding: 0 12px !default;
 $treeview-big-input-padding: 0 9px !default;
@@ -90,6 +90,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 35px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
+$treeview-focus-box-shadow: inset $shadow-focus-ring1 !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: $text-xl !default;

package/styles/treeview/_tailwind3-definition.scss

@@ -92,6 +92,7 @@ $treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 35px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
+$treeview-focus-box-shadow: $shadow-focus-ring2 !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: $text-base !default;