@salesforcedevs/dx-components 1.40.5-topic-alpha.4 → 1.40.5-topic-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.40.5-topic-alpha.4",
+    "version": "1.40.5-topic-alpha.5",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/button/button.css

@@ -306,20 +306,10 @@
     box-shadow: var(--dx-c-button-custom-border-shadow-hover, none);
 }
 
-/* While its menu is open, a custom button can show the focus ring. Off unless
-   the active hooks are set (a select-style trigger, such as the version picker). */
-:host([aria-expanded="true"]) .button.variant_custom {
-    outline: var(--dx-c-button-custom-focus-outline-active, none);
-    outline-offset: var(--dx-c-button-custom-focus-offset-active, 0);
-    box-shadow: var(
-        --dx-c-button-custom-focus-shadow-active,
-        var(--dx-c-button-custom-border-shadow-hover, none)
-    );
-}
-
-/* Keyboard focus. Keep last so it wins over hover and the open state (:host
-   lifts it above the custom and icon-only hover rules). The
-   outline survives Windows high-contrast mode; the white band does not. */
+/* Keyboard focus only; an open menu alone shows no ring. Keep last so it wins
+   over hover and the open state (:host lifts it above the custom and icon-only
+   hover rules). The outline survives Windows high-contrast mode; the white band
+   does not. */
 :host .button:focus-visible,
 :host .button:focus-visible:hover,
 :host([aria-expanded="true"]) .button:focus-visible {

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -12,11 +12,16 @@
     width: var(--shape-width);
 }
 
+/* The vertical stroke of the "L" runs up to the top edge of the option: the
+   top padding plus the space above the shape inside the line box. */
 .indented-shape::after {
     background-color: var(--background);
     bottom: 0;
     content: "";
-    height: 15px;
+    height: calc(
+        var(--dx-g-spacing-sm) +
+            (var(--dx-g-spacing-lg) + var(--wide) - var(--dx-g-spacing-xs)) / 2
+    );
     position: absolute;
     width: var(--wide);
 }
@@ -70,6 +75,7 @@
 .option-indented .option_details {
     align-items: center;
     flex-direction: row;
+    justify-content: flex-start;
     gap: 0;
 }
 
@@ -147,14 +153,18 @@
     max-width: calc(100vw - var(--dx-g-spacing-lg) * 4);
 }
 
+/* Each "L" starts xs past the first letter of the label above it. A label
+   sits one shape plus its sm margin after its own "L", so each level steps in
+   by that much plus xs. */
 .option-indented:not([data-index="0"]) {
-    --base-indentation: calc(var(--dx-g-spacing-md) + var(--shape-width));
+    --base-indentation: calc(
+        var(--shape-width) + var(--dx-g-spacing-sm) + var(--dx-g-spacing-xs)
+    );
     --shape-width: 8px;
 
-    /* One sm step past the first option's lg left padding. */
     padding-left: calc(
         var(--indentation, 0px) + var(--dx-g-spacing-lg) +
-            var(--dx-g-spacing-sm)
+            var(--dx-g-spacing-xs)
     );
 }
 

package/src/modules/dx/popover/popover.css

@@ -29,7 +29,6 @@
     padding: var(--popover-padding);
     overflow-y: auto;
     transition: var(--popover-transition);
-    transition-delay: 0.02s;
     transform: translateY(var(--dx-g-spacing-xs));
     opacity: 0;
 }
@@ -40,6 +39,9 @@
 }
 
 .popover-container_open .popover {
+    /* Delay only on open. A closing delay keeps the menu visible for a frame
+       after its container hides, while it moves (a flash above the trigger). */
+    transition-delay: 0.02s;
     opacity: 1;
     transform: var(--popover-container-open-transform);
 }