@salesforcedevs/dx-components 1.40.5-final-alpha1 → 1.40.5-final-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/dx-components",
-  "version": "1.40.5-final-alpha1",
+  "version": "1.40.5-final-alpha3",
   "description": "DX Lightning web components",
   "license": "MIT",
   "engines": {

package/src/modules/dx/treeItem/treeItem.css

@@ -16,6 +16,14 @@
     display: flex;
     align-items: center;
     min-width: 0;
+    position: relative;
+}
+
+/* The tile's keyboard focus layers fill this row, picker included. isolate
+   keeps the fill above the row's background and below its content. Only while
+   focus is inside: a row that is always isolated traps its picker's menu. */
+.tree-item-row:focus-within {
+    isolation: isolate;
 }
 
 .tree-item-row dx-tree-tile {

package/src/modules/dx/treeTile/treeTile.css

@@ -217,3 +217,51 @@ a:visited.tile-root,
 a:link.tile-root {
     color: var(--dx-g-blue-vibrant-20);
 }
+
+/* Keyboard focus matches dx-dropdown-option: a light fill, a 2px blue inset
+   ring, and a white inner band. The layers fill dx-tree-item's row (it sets
+   position: relative), so a version picker beside the link sits inside the
+   focus box. Undo the shared tree item focus box (commonTreeItem) first. */
+:host .sidebar-item:focus-visible {
+    margin: 0;
+    padding: 6px var(--dx-g-spacing-lg) 6px
+        var(--dx-g-global-header-padding-horizontal);
+    outline: none;
+    border-radius: 0;
+}
+
+:host .sidebar-item:focus-visible .indentation {
+    padding-top: 0;
+    padding-bottom: 0;
+    outline: none;
+}
+
+:host .sidebar-item:focus-visible::before,
+:host .sidebar-item:focus-visible::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+:host .sidebar-item:focus-visible::before {
+    z-index: -1;
+    background: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+:host .sidebar-item:focus-visible::after {
+    z-index: 1;
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-60),
+        inset 0 0 0 4px white;
+}
+
+/* A selected item keeps its left bar, inside the ring, when it also has keyboard focus. */
+:host
+    .sidebar-item:is(
+        .sidebar-item-selected,
+        .sidebar-item-selected-text
+    ):focus-visible::after {
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-60),
+        inset 0 0 0 4px white,
+        inset calc(2 * var(--dx-g-spacing-xs)) 0 0 0 var(--dx-g-blue-vibrant-40);
+}