@salesforcedevs/dx-components 1.32.0-alpha.7 → 1.32.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.32.0-alpha.7",
+    "version": "1.32.0-alpha.9",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "10de923f77a1fb72ba450c8541cb783c9c0b9208"
+    "gitHead": "026276367da91550c1d58c2ad0e5aca5e6b49cfa"
 }

package/src/modules/dx/searchResults/searchResults.css

@@ -310,7 +310,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     bottom: var(--dx-result-inner-gap-y);
     left: var(--dx-result-inner-gap-x);
     right: var(--dx-result-inner-gap-x);
-    background: var(--dx-g-gray-95);
+    background: var(--dx-g-cloud-blue-vibrant-95);
     border-radius: var(--dx-g-spacing-xs);
     pointer-events: none;
     z-index: 0;
@@ -326,7 +326,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     outline: none;
 }
 
-/* Pseudo: 8px from text on sides, more padding top/bottom inside ring (smaller inset y) */
+/* Pseudo: 8px from text; inner ring container/hover (cloud blue 95), outer blue-vibrant-20 */
 .dx-result:focus-within::before {
     content: "";
     position: absolute;
@@ -334,8 +334,10 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     bottom: var(--dx-result-inner-gap-y);
     left: var(--dx-result-inner-gap-x);
     right: var(--dx-result-inner-gap-x);
-    border: 2px solid var(--dx-g-blue-vibrant-50);
+    border: none;
     border-radius: var(--dx-g-spacing-xs);
+    box-shadow: 0 0 0 2px var(--dx-g-cloud-blue-vibrant-95),
+        0 0 0 4px var(--dx-g-blue-vibrant-20);
     pointer-events: none;
     z-index: 2;
 }

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -25,32 +25,40 @@ a {
     transition: background-color var(--dx-g-transition-hue-1x, 0.1s ease);
 }
 
-/* Hover: light grey background in box shape only */
+/* Hover: container/hover — cloud blue 95 */
 .sidebar-item:not(.sidebar-item-selected):hover .search-result {
-    background: var(--dx-g-gray-95);
+    background: var(--dx-g-cloud-blue-vibrant-95);
 }
 
-/* Selected: light blue background in box shape only */
+/* Selected: full-width cloud blue bar + dark blue left accent (focus ring stays on inner .search-result) */
 .sidebar-item-selected {
-    box-shadow: none;
+    margin-left: calc(-1 * var(--dx-c-sidebar-left-padding));
+    margin-right: calc(-1 * var(--dx-g-spacing-lg));
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    border-radius: 0;
+    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-20);
     color: var(--dx-g-blue-vibrant-40) !important;
 }
 
 .sidebar-item-selected .search-result {
-    background: var(--dx-g-cloud-blue-vibrant-95);
+    position: relative;
+    z-index: 1;
+    background: transparent;
     color: inherit;
 }
 
-/* Focus: only one box – remove anchor outline (from commonTreeItem), draw single blue outline on .search-result only */
+/* Focus: rings on inner .search-result only (smaller than full-width selected bar) */
 .sidebar-item:focus-visible {
     outline: none !important;
 }
 
 .sidebar-item:focus-visible .search-result {
-    outline: 2px solid var(--dx-g-blue-vibrant-50);
-    outline-offset: 0;
+    outline: none;
     border-radius: var(--dx-g-spacing-xs);
     border: none;
+
+    /* White inner ring reads clearly on selected (cloud 95) and hover backgrounds */
+    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--dx-g-blue-vibrant-60);
 }
 
 .search-text {
@@ -62,6 +70,7 @@ a {
 }
 
 .description {
+    line-clamp: 3;
     -webkit-line-clamp: 3;
     overflow-wrap: break-word;
 
@@ -73,7 +82,7 @@ a {
 
 .title {
     color: var(--dx-g-text-heading-color);
-    line-height: var(--dx-g-spacing-md);
+    line-height: 18px;
     display: block;
     margin-bottom: 4px;
 }