@syncfusion/ej2-navigations 33.2.4 → 33.2.6

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;

package/styles/treeview/_theme.scss

@@ -39,10 +39,8 @@
 
 @mixin active-editing-theme {
   @include bg-border($treeview-item-border-color, $treeview-item-border-color);
-  @if $skin-name == 'bootstrap' {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-  }
+  -webkit-box-shadow: none;
+  box-shadow: none;
 }
 
 @mixin active-font-weight {
@@ -119,6 +117,29 @@
         }
       }
 
+      &.e-node-focus {
+        > .e-fullrow {
+          box-shadow: $treeview-focus-box-shadow;
+          border: none;
+          @if $skin-name == 'fluent2' {
+            background-color: $treeview-item-focus-bg;
+          }
+        }
+
+        > .e-text-content {
+          @if $skin-name == 'fluent2' {
+            .e-list-text {
+              color: $treeview-text-focus-color;
+            }
+ 
+            .e-icon-collapsible,
+            .e-icon-expandable {
+              color: $treeview-icon-focus-color;
+            }
+          }
+        }
+      }
+
       &.e-active {
         background: transparent;
 
@@ -182,6 +203,15 @@
             @include text-content($treeview-text-active-hover-color, $treeview-icon-active-hover-color);
           }
         }
+
+        &.e-node-focus {
+          > .e-fullrow {
+            @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
+              -webkit-box-shadow: $treeview-focus-box-shadow;
+              box-shadow: $treeview-focus-box-shadow;
+            }
+          }
+        }
       }
 
       &.e-editing {
@@ -283,6 +313,15 @@
               @include active-hover-theme;
             }
           }
+
+          &.e-node-focus {
+            > .e-text-content {
+              @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
+                -webkit-box-shadow: $treeview-focus-box-shadow;
+                box-shadow: $treeview-focus-box-shadow;
+              }
+            }
+          }
         }
 
         &.e-editing {
@@ -294,6 +333,18 @@
             }
           }
         }
+
+        &.e-node-focus {
+          > .e-text-content {
+            box-shadow: $treeview-focus-box-shadow;
+            @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
+              border: none;
+            }
+            @if $skin-name == 'fluent2' {
+              background-color: $treeview-item-focus-bg;
+            }
+          }
+        }
       }
     }
 

package/styles/treeview/bds.css

@@ -676,6 +676,11 @@
 .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
   color: var(--color-sf-fg-secondary-hover);
 }
+.e-treeview .e-list-item.e-node-focus > .e-fullrow {
+  -webkit-box-shadow: inset 0 1px 2px 0 rgba(16, 24, 40, 0.05), inset 0 0 0 4px rgba(157, 118, 237, 0.24);
+          box-shadow: inset 0 1px 2px 0 rgba(16, 24, 40, 0.05), inset 0 0 0 4px rgba(157, 118, 237, 0.24);
+  border: none;
+}
 .e-treeview .e-list-item.e-active {
   background: transparent;
 }
@@ -721,6 +726,8 @@
 .e-treeview .e-list-item.e-editing.e-active > .e-fullrow, .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow, .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
   background-color: var(--color-sf-base-transparent);
   border-color: var(--color-sf-base-transparent);
+  -webkit-box-shadow: none;
+  box-shadow: none;
 }
 .e-treeview .e-list-item.e-editing.e-active > .e-text-content, .e-treeview .e-list-item.e-editing.e-hover > .e-text-content, .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
   color: var(--color-sf-text-primary);
@@ -776,6 +783,12 @@
 .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content, .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content, .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
   background-color: var(--color-sf-base-transparent);
   border-color: var(--color-sf-base-transparent);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
+  -webkit-box-shadow: inset 0 1px 2px 0 rgba(16, 24, 40, 0.05), inset 0 0 0 4px rgba(157, 118, 237, 0.24);
+          box-shadow: inset 0 1px 2px 0 rgba(16, 24, 40, 0.05), inset 0 0 0 4px rgba(157, 118, 237, 0.24);
 }
 .e-treeview.e-fullrow-wrap .e-text-content {
   border-color: transparent;
@@ -915,8 +928,8 @@
 }
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
-  line-height: 46px;
-  min-height: 46px;
+  line-height: 48px;
+  min-height: 48px;
 }
 .e-bigger .e-treeview .e-list-text .e-input-group,
 .e-treeview.e-bigger .e-list-text .e-input-group {