@salesforcedevs/dx-components 1.40.5-topic-alpha.2 → 1.40.5-topic-alpha.3

package/package.json

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

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

@@ -20,6 +20,11 @@
     --dx-c-button-line-height: inherit;
     --dx-c-button-letter-spacing: inherit;
     --dx-c-button-display: flex;
+
+    /* Keyboard focus ring (WES): a 2px white band, then a 2px blue outline. */
+    --dx-c-button-focus-outline: 2px solid var(--dx-g-blue-vibrant-60);
+    --dx-c-button-focus-offset: 2px;
+    --dx-c-button-focus-shadow: 0 0 0 2px white;
 }
 
 .button {
@@ -32,7 +37,8 @@
     user-select: none;
     white-space: nowrap;
     font-size: var(--dx-c-button-font-size);
-    transition: var(--dx-g-transition-hue-1x);
+    transition: var(--dx-g-transition-hue-1x),
+        var(--dx-g-transition-box-shadow-1x);
     padding: var(--dx-c-button-vertical-spacing, 0)
         var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
     border-radius: var(--dx-g-spacing-xs);
@@ -191,6 +197,7 @@
 }
 
 .button.variant_primary:hover,
+.button.variant_primary:focus-visible,
 :host([aria-expanded="true"]) .button.variant_primary {
     background: var(--dx-c-button-primary-color-hover);
     border-color: var(--dx-c-button-primary-color-hover);
@@ -215,6 +222,8 @@
 
 .button.variant_secondary:hover,
 .button.variant_quaternary:hover,
+.button.variant_secondary:focus-visible,
+.button.variant_quaternary:focus-visible,
 :host([aria-expanded="true"]) .button.variant_secondary,
 :host([aria-expanded="true"]) .button.variant_quaternary {
     background: var(--dx-c-button-secondary-color-hover);
@@ -234,6 +243,7 @@
 }
 
 .button.variant_tertiary:hover,
+.button.variant_tertiary:focus-visible,
 :host([aria-expanded="true"]) .button.variant_tertiary {
     background: var(--dx-c-button-secondary-color-hover);
     border-color: var(--dx-c-button-secondary-color-hover);
@@ -250,6 +260,8 @@
 
 .button.variant_inline:hover,
 .button.variant_inline-inherit:hover,
+.button.variant_inline:focus-visible,
+.button.variant_inline-inherit:focus-visible,
 :host([aria-expanded="true"])
     :is(.button.variant_inline, .button.variant_inline-inherit) {
     color: var(--dx-c-button-inline-color-hover);
@@ -277,10 +289,40 @@
 }
 
 .button.variant_custom:hover,
+.button.variant_custom:focus-visible,
 .button.variant_icon-only:hover,
+.button.variant_icon-only:focus-visible,
 :host([aria-expanded="true"]) .button.variant_custom,
 :host([aria-expanded="true"]) .button.variant_icon-only {
     color: var(--dx-c-button-custom-color-hover);
     background: var(--dx-c-button-custom-background-hover);
     border-color: var(--dx-c-button-custom-border-hover);
+
+    /* An inset shadow can thicken the edge without resizing the button. */
+    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. */
+:host .button:focus-visible,
+:host .button:focus-visible:hover,
+:host([aria-expanded="true"]) .button:focus-visible {
+    outline: var(--dx-c-button-focus-outline);
+    outline-offset: var(--dx-c-button-focus-offset);
+    box-shadow: var(--dx-c-button-focus-shadow);
+
+    /* The ring appears at once instead of fading in. */
+    transition: var(--dx-g-transition-hue-1x);
 }

package/src/modules/dx/checkboxGroup/checkboxGroup.css

@@ -1,6 +1,11 @@
 @import "dxHelpers/reset";
 
 fieldset {
+    /* No browser fieldset padding, border, or margin; the container sets the spacing. */
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-width: 0;
     display: grid;
     grid-template-rows: auto;
     grid-gap: 20px;

package/src/modules/dx/dropdown/dropdown.css

@@ -3,7 +3,10 @@
 /* Options run edge to edge; the menu adds space above the first and below
    the last. */
 dx-popover {
-    --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
+    --dx-c-popover-padding: var(
+        --dx-c-dropdown-padding,
+        var(--dx-g-spacing-sm) 0
+    );
 }
 
 .menu-nested:not(.menu-fit-content)::part(content) {

package/src/modules/dx/dropdown/dropdown.html

@@ -35,7 +35,6 @@
                     nav-item-label={navItemLabel}
                     variant={variant}
                     width-mode={widthMode}
-                    show-icon={showOptionIcons}
                 ></dx-dropdown-option>
                 <div
                     key={option.id}
@@ -56,7 +55,6 @@
                             option={suboption}
                             nav-item-label={navItemLabel}
                             width-mode={widthMode}
-                            show-icon={showOptionIcons}
                         ></dx-dropdown-option>
                     </template>
                     <dx-button

package/src/modules/dx/dropdown/dropdown.ts

@@ -39,7 +39,6 @@ export default class Dropdown extends LightningElement {
     @api navItemLabel: string | null = null;
     @api variant: DropdownVariant = "base";
     @api widthMode: DropdownWidthMode = "fixed";
-    @api showOptionIcons?: boolean = false; // right-aligned option icons (opt-in)
 
     // props forwarded to dropdown option
     @api analyticsEvent?: string;

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

@@ -51,8 +51,6 @@
 }
 
 .option-active {
-    --dx-c-dropdown-option-label-color: var(--dx-g-blue-vibrant-50);
-
     background: var(--dx-g-cloud-blue-vibrant-95);
 }
 
@@ -76,7 +74,7 @@
 }
 
 .option_label {
-    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-gray-10));
+    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-text-body-color));
 
     /* Opt-in: set to block so text-overflow:ellipsis applies (ignored on flex). */
     display: var(--dx-c-dropdown-option-label-display, flex);
@@ -114,19 +112,26 @@
     line-height: 18px;
 }
 
-/* Only rendered when the dropdown sets show-option-icons. */
+/* An option can have a start icon (iconSymbol), an end icon (endIconSymbol),
+   or both. */
 .option_icon {
     --dx-c-icon-size: var(--dx-g-icon-size-md);
     --dx-c-icon-color: var(--dx-g-gray-50);
 
-    order: 1;
     flex-shrink: 0;
+}
+
+.option_icon-start {
+    margin-right: var(--dx-g-spacing-md);
+}
+
+.option_icon-end {
     margin-left: var(--dx-g-spacing-2xl);
 }
 
-.option-indented {
-    padding-top: var(--dx-g-spacing-xs);
-    padding-bottom: var(--dx-g-spacing-xs);
+/* Indented (breadcrumb hierarchy) menus keep their own selected label color. */
+.option-indented.option-active {
+    --dx-c-dropdown-option-label-color: var(--dx-g-blue-vibrant-50);
 }
 
 /* fit-content (toolbar): one line per label, truncated with an ellipsis. */
@@ -146,7 +151,11 @@
     --base-indentation: calc(var(--dx-g-spacing-md) + var(--shape-width));
     --shape-width: 8px;
 
-    padding-left: calc(var(--indentation, 0px) + var(--dx-g-spacing-md));
+    /* 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)
+    );
 }
 
 [data-index="2"] {

package/src/modules/dx/dropdownOption/dropdownOption.html

@@ -11,10 +11,11 @@
         onclick={onClick}
     >
         <dx-icon
-            class="option_icon"
+            class="option_icon option_icon-start"
             symbol={option.iconSymbol}
             sprite={option.iconSprite}
-            lwc:if={renderIcon}
+            color={option.iconColor}
+            lwc:if={option.iconSymbol}
             size="override"
         ></dx-icon>
         <div class="option_details">
@@ -30,6 +31,14 @@
                 {option.description}
             </div>
         </div>
+        <dx-icon
+            class="option_icon option_icon-end"
+            symbol={option.endIconSymbol}
+            sprite={option.endIconSprite}
+            color={option.endIconColor}
+            lwc:if={option.endIconSymbol}
+            size="override"
+        ></dx-icon>
     </a>
     <button
         if:false={option.link}
@@ -40,11 +49,11 @@
         onclick={onClick}
     >
         <dx-icon
-            class="option_icon"
+            class="option_icon option_icon-start"
             symbol={option.iconSymbol}
             sprite={option.iconSprite}
             color={option.iconColor}
-            lwc:if={renderIcon}
+            lwc:if={option.iconSymbol}
             size="override"
         ></dx-icon>
         <div class="option_details">
@@ -54,5 +63,13 @@
                 {option.description}
             </div>
         </div>
+        <dx-icon
+            class="option_icon option_icon-end"
+            symbol={option.endIconSymbol}
+            sprite={option.endIconSprite}
+            color={option.endIconColor}
+            lwc:if={option.endIconSymbol}
+            size="override"
+        ></dx-icon>
     </button>
 </template>

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -18,7 +18,6 @@ export default class DropdownOption extends LightningElement {
     @api indexPosition: number = 0;
     @api variant: DropdownVariant = "base";
     @api widthMode: DropdownWidthMode = "fixed";
-    @api showIcon: boolean = false;
 
     @api focus() {
         const option = this.template.querySelector(".option");
@@ -41,11 +40,6 @@ export default class DropdownOption extends LightningElement {
         return this.variant === "indented" && this.indexPosition >= 1;
     }
 
-    // Icons are opt-in (right-aligned); without show-icon there is no icon or spacing.
-    private get renderIcon() {
-        return this.showIcon && !!this.option.iconSymbol;
-    }
-
     private onClick(e: PointerEvent) {
         this.dispatchEvent(
             new CustomEvent("select", { detail: this.keyValue })

package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.css

@@ -5,8 +5,6 @@
     --button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
     --popover-container-open-transform: translateX(-4px) translateY(-8px);
     --popover-transition: none;
-    --dx-c-dropdown-option-font-weight: normal;
-    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
 }
 
 .footer-item {

package/src/modules/dx/tabPanelList/tabPanelList.css

@@ -12,20 +12,6 @@
     border-bottom: 1px solid var(--dx-g-gray-80);
 }
 
-dx-popover {
-    --popover-padding: none;
-}
-
-.dropdown-item {
-    padding: var(--dx-g-spacing-sm);
-}
-
-.dropdown-item:hover {
-    cursor: pointer;
-    font-weight: var(--dx-g-font-bold);
-    background-color: var(--dx-g-blue-vibrant-95);
-}
-
 .more-btn {
     display: flex;
     align-items: center;

package/src/modules/dx/tabPanelList/tabPanelList.html

@@ -15,11 +15,18 @@
                     </dx-tab-panel-item>
                 </template>
             </div>
-            <dx-popover offset="medium" placement="bottom-center">
+            <dx-dropdown
+                class="more-dropdown"
+                offset="medium"
+                placement="bottom-end"
+                width-mode="fit-content"
+                options={dropdownOptions}
+                value={activeOptionId}
+                onchange={onDropdownChange}
+            >
                 <dx-tab-panel-item
                     role="button"
                     class="more-btn-container"
-                    slot="control"
                     tab-label="More"
                 >
                     <div class="more-btn">
@@ -31,23 +38,7 @@
                         ></dx-icon>
                     </div>
                 </dx-tab-panel-item>
-                <div slot="content">
-                    <template for:each={dropdownItems} for:item="dropdownItem">
-                        <div
-                            role="button"
-                            onclick={onDropdownItemClick}
-                            onkeydown={onDropdownItemClick}
-                            data-value={dropdownItem.index}
-                            key={dropdownItem.label}
-                            class="dropdown-item"
-                            tabindex="0"
-                            tab-label={dropdownItem.label}
-                        >
-                            {dropdownItem.label}
-                        </div>
-                    </template>
-                </div>
-            </dx-popover>
+            </dx-dropdown>
         </div>
         <div part="tabpanels">
             <slot onslotchange={onSlotChange}></slot>

package/src/modules/dx/tabPanelList/tabPanelList.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { LightningSlotElement, Tab } from "typings/custom";
+import { LightningSlotElement, Option, Tab } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { uniqueId } from "./uniqueId";
 export default class TabPanelList extends LightningElement {
@@ -33,7 +33,6 @@ export default class TabPanelList extends LightningElement {
     private _activeIndex?: number;
     private groupId: string = uniqueId();
     private tabSlotPanels?: LightningSlotElement;
-    private showPopover: boolean = true;
     private dropdownItems: Tab[] = [];
     private hasRendered: boolean = false;
 
@@ -74,8 +73,25 @@ export default class TabPanelList extends LightningElement {
         this.activeIndex = e.detail;
     }
 
-    private onDropdownItemClick(e: any) {
-        this.onTabClick({ detail: +e.currentTarget.dataset.value });
+    // Tabs that don't fit are listed in the "More" dropdown. Option ids are the
+    // tab index as a string.
+    private get dropdownOptions(): Option[] {
+        return this.dropdownItems.map((item) => ({
+            id: String(item.index),
+            label: item.label || ""
+        }));
+    }
+
+    private get activeOptionId(): string {
+        return String(this.activeIndex);
+    }
+
+    private onDropdownChange(e: CustomEvent<string>) {
+        this.onTabClick({ detail: +e.detail });
+        // The menu closes after a pick; keep keyboard focus on its trigger.
+        (
+            this.template.querySelector(".more-btn-container") as HTMLElement
+        )?.focus();
     }
 
     private onSlotChange(e: Event) {
@@ -111,6 +127,10 @@ export default class TabPanelList extends LightningElement {
     }
 
     private onKeydown = (e: KeyboardEvent) => {
+        // Arrow keys inside the open "More" menu belong to the dropdown.
+        if ((e.target as HTMLElement).tagName === "DX-DROPDOWN") {
+            return;
+        }
         switch (e.key) {
             case "ArrowLeft": {
                 e.preventDefault();

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -2,7 +2,9 @@
 @import "dxHelpers/text";
 
 :host {
-    --dx-c-sidebar-width: 336px;
+    /* Width of the sidebar content (search field, version pickers) on tablet
+       and desktop. The sidebar adds its left padding and a 24px right inset. */
+    --dx-c-sidebar-content-width: 296px;
     --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
     --dx-c-sidebar-button-background: white;
     --dx-c-sidebar-button-border: white;
@@ -12,12 +14,8 @@
     --dx-c-sidebar-left-padding: var(--dx-g-global-header-padding-horizontal);
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
 
-    /* Width of the sidebar content (search field, version pickers): the
-       sidebar minus its 16px left and 24px right insets. 296px on desktop. */
-    --doc-version-picker-width: calc(
-        var(--dx-c-sidebar-width) - var(--dx-g-spacing-md) -
-            var(--dx-g-spacing-lg)
-    );
+    /* Widest a small version picker menu can grow. */
+    --doc-version-picker-width: var(--dx-c-sidebar-content-width);
 }
 
 .header {
@@ -53,7 +51,7 @@
     color: var(--dx-g-blue-vibrant-30);
 }
 
-.container.collapsed {
+.container.collapsed:not(.container-mobile) {
     width: var(--dx-g-spacing-xl);
 }
 
@@ -88,15 +86,19 @@
     display: flex;
     flex-direction: column;
     height: var(--dx-c-sidebar-height);
-    width: calc(var(--dx-c-sidebar-width) + var(--left-spacing));
+
+    /* Mobile (container-mobile, set at 768px and below) fills the viewport. */
+    width: 100%;
 }
 
+/* Tablet and desktop: left padding + content + right inset. */
 .container:not(.container-mobile) {
     --border-color: transparent;
-    --left-spacing: calc(
-        var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
-    );
 
+    width: calc(
+        var(--dx-c-sidebar-left-padding) + var(--dx-c-sidebar-content-width) +
+            var(--dx-g-spacing-lg)
+    );
     box-shadow: 2px 0 0 0 var(--border-color);
     min-height: var(--dx-c-sidebar-min-height);
     padding: var(--dx-c-sidebar-vertical-padding) 0 var(--dx-g-spacing-2xs) 0;
@@ -112,7 +114,9 @@
 }
 
 .container.container-mobile {
-    width: 100%;
+    --doc-version-picker-width: calc(
+        100vw - var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-lg)
+    );
 }
 
 .container.container-mobile .header {
@@ -175,11 +179,3 @@
 .sidebar-content-hasfooter {
     margin-bottom: var(--dx-g-spacing-2xl);
 }
-
-@media screen and (max-width: 767px) {
-    :host {
-        --doc-version-picker-width: calc(
-            100vw - var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-lg)
-        );
-    }
-}