@salesforcedevs/dx-components 1.40.5-topic-alpha.8 → 1.40.5

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/lwc.config.json

@@ -140,7 +140,6 @@
         "dxUtils/lwc",
         "dxUtils/urlWatcher",
         "dxUtils/normalizers",
-        "dxUtils/topicVersion",
         "dxUtils/queryCoordinator",
         "dxUtils/recentSearches",
         "dxUtils/regexps",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.40.5-topic-alpha.8",
+    "version": "1.40.5",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -43,5 +43,6 @@
         "eventsourcemock": "2.0.0",
         "luxon": "3.4.4",
         "msw": "^2.12.4"
-    }
+    },
+    "gitHead": "645cd46c7db5f9a93eb463205611c10f7f5f166b"
 }

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

@@ -20,11 +20,6 @@
     --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 {
@@ -37,8 +32,7 @@
     user-select: none;
     white-space: nowrap;
     font-size: var(--dx-c-button-font-size);
-    transition: var(--dx-g-transition-hue-1x),
-        var(--dx-g-transition-box-shadow-1x);
+    transition: var(--dx-g-transition-hue-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);
@@ -66,11 +60,7 @@
     display: inline;
     vertical-align: var(--dx-c-button-icon-vertical-align, unset);
 
-    /* Component hook first; the global stays as the fallback for dark mode. */
-    --dx-c-icon-color: var(
-        --dx-c-button-icon-color,
-        var(--dx-g-button-icon-color, currentcolor)
-    );
+    --dx-c-icon-color: var(--dx-g-button-icon-color, currentcolor);
 }
 
 .button.variant_inline dx-icon,
@@ -96,11 +86,11 @@
 }
 
 .button.icon-right:not(.slot-empty) > *:nth-child(2) {
-    margin-left: var(--dx-c-button-icon-gap, var(--dx-g-spacing-sm));
+    margin-left: var(--dx-g-spacing-sm);
 }
 
 .button.icon-left:not(.slot-empty) > *:nth-child(2) {
-    margin-right: var(--dx-c-button-icon-gap, var(--dx-g-spacing-sm));
+    margin-right: var(--dx-g-spacing-sm);
 }
 
 .button.style-icon.slot-empty {
@@ -201,7 +191,6 @@
 }
 
 .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);
@@ -226,8 +215,6 @@
 
 .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);
@@ -247,7 +234,6 @@
 }
 
 .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);
@@ -264,8 +250,6 @@
 
 .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);
@@ -293,30 +277,10 @@
 }
 
 .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);
-}
-
-/* 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 {
-    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,11 +1,6 @@
 @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

@@ -1,14 +1,5 @@
 @import "dxHelpers/reset";
 
-/* Options run edge to edge; the menu adds space above the first and below
-   the last. */
-dx-popover {
-    --dx-c-popover-padding: var(
-        --dx-c-dropdown-padding,
-        var(--dx-g-spacing-sm) 0
-    );
-}
-
 .menu-nested:not(.menu-fit-content)::part(content) {
     padding-top: var(--dx-g-spacing-sm);
     width: 354px;
@@ -23,22 +14,12 @@ dx-popover {
     display: none;
 }
 
-/* fit-content and fit-end: the menu is as wide as its longest label. */
 .menu-fit-content {
     --dx-c-popover-width: max-content;
+    --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
 }
 
-/* fit-end also stops at --dx-c-dropdown-menu-max-width. Labels wrap only once
-   the menu reaches that width. */
-.menu-fit-end::part(content) {
-    box-sizing: border-box;
-    max-width: var(
-        --dx-c-dropdown-menu-max-width,
-        calc(100vw - var(--dx-g-spacing-lg))
-    );
-}
-
-.menu-fit-content.menu-nested .menu_list {
+.menu-fit-content .menu_list {
     width: 100%;
     align-items: flex-start;
     gap: var(--dx-g-spacing-sm);
@@ -50,6 +31,15 @@ dx-popover {
     padding-top: var(--dx-g-spacing-sm);
 }
 
+.menu-fit-content .menu_heading {
+    margin: 0;
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
+    font-family: var(--dx-g-font-sans);
+    line-height: var(--dx-g-spacing-mlg);
+    text-transform: none;
+    color: var(--dx-g-gray-10);
+}
+
 @media screen and (max-width: 1000px) {
     .menu-nested .menu_option:not(:first-child) {
         border-top: var(--border);
@@ -101,13 +91,12 @@ dx-popover {
 
 .menu_heading {
     display: block;
-    margin: 0;
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
-    color: var(--dx-g-gray-10);
-    font-family: var(--dx-g-font-sans);
+    color: var(--dx-g-blue-vibrant-20);
+    font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
     font-weight: bold;
-    line-height: var(--dx-g-spacing-mlg);
+    text-transform: uppercase;
+    margin: var(--dx-g-spacing-sm);
 }
 
 .callout_link {
@@ -116,7 +105,7 @@ dx-popover {
     display: block;
     padding-top: var(--dx-g-spacing-xl);
     margin-top: auto;
-    margin-left: var(--dx-g-spacing-lg);
+    margin-left: var(--dx-g-spacing-sm);
 }
 
 .empty {

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

@@ -9,7 +9,7 @@
         open-on-hover={openOnHover}
         open={open}
         page-padding={pagePadding}
-        placement={effectivePlacement}
+        placement={placement}
         small={small}
         width={effectiveWidth}
     >

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

@@ -82,35 +82,20 @@ export default class Dropdown extends LightningElement {
         return this.areOptionsEmpty ? null : "menu";
     }
 
-    // "fit-end" is fit-content, aligned to the trigger's end edge.
-    // "full" matches the trigger width. "fixed" and "fit-content" are unchanged.
     private get isFitContent() {
-        return this.widthMode === "fit-content" || this.widthMode === "fit-end";
+        return this.widthMode === "fit-content";
     }
 
-    private get effectivePlacement(): PopperPlacement | undefined {
-        return this.widthMode === "fit-end" ? "bottom-end" : this.placement;
-    }
-
-    // fit-content takes precedence; the misuse is surfaced in className() below.
     private get effectiveWidth() {
         return this.isFitContent ? null : this.width;
     }
 
     private get effectiveFullWidth() {
-        if (this.widthMode === "full") {
-            return true;
-        }
         return this.isFitContent ? false : this.fullWidth;
     }
 
     private get className() {
         const fitContent = this.isFitContent;
-        if (fitContent && (this.width || this.fullWidth)) {
-            console.error(
-                'The "width-mode=fit-content" and "width"/"full-width" properties cannot be provided simultaneously. "width-mode=fit-content" is prioritized; "width"/"full-width" are ignored.'
-            );
-        }
         return cx(
             this.isNested && "menu-nested",
             this.isNested &&
@@ -119,8 +104,7 @@ export default class Dropdown extends LightningElement {
                 "menu-nested-2-col",
             this.offset && `menu-offset-${this.offset}`,
             this.areOptionsEmpty && "menu-hidden",
-            fitContent && "menu-fit-content",
-            this.widthMode === "fit-end" && "menu-fit-end"
+            fitContent && "menu-fit-content"
         );
     }
 

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

@@ -12,16 +12,11 @@
     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: calc(
-        var(--dx-g-spacing-sm) +
-            (var(--dx-g-spacing-lg) + var(--wide) - var(--dx-g-spacing-xs)) / 2
-    );
+    height: 15px;
     position: absolute;
     width: var(--wide);
 }
@@ -30,12 +25,8 @@
     display: flex;
     font-family: var(--dx-g-font-sans);
     width: 100%;
-    padding: var(
-        --dx-c-dropdown-option-padding,
-        var(--dx-g-spacing-sm) var(--dx-g-spacing-lg)
-    );
+    padding: var(--dx-g-spacing-sm);
     font-size: var(--dx-g-text-sm);
-    border-radius: var(--dx-c-dropdown-option-border-radius, 0);
     transition: var(--dx-g-transition-hue-1x);
     align-items: center;
     outline: none !important;
@@ -56,6 +47,8 @@
 }
 
 .option-active {
+    --dx-c-dropdown-option-label-color: var(--dx-g-blue-vibrant-50);
+
     background: var(--dx-g-cloud-blue-vibrant-95);
 }
 
@@ -63,10 +56,6 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: flex-start;
-    gap: var(--dx-g-spacing-sm);
-    flex: 1;
-    min-width: 0;
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-sm);
     text-align: left;
@@ -75,30 +64,14 @@
 .option-indented .option_details {
     align-items: center;
     flex-direction: row;
-    justify-content: flex-start;
-    gap: 0;
 }
 
 .option_label {
-    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);
+    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
+    display: flex;
     align-items: center;
-    font-weight: var(
-        --dx-c-dropdown-option-font-weight,
-        var(--dx-g-font-normal)
-    );
+    font-weight: var(--dx-c-dropdown-option-font-weight, var(--dx-g-font-bold));
     font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
-    line-height: var(--dx-g-spacing-lg);
-
-    /* Opt-in truncation: consumers set --dx-c-dropdown-option-white-space:
-       nowrap to truncate labels with an ellipsis instead of wrapping.
-       Defaults preserve today's wrapping behavior. */
-    white-space: var(--dx-c-dropdown-option-white-space, normal);
-    overflow: var(--dx-c-dropdown-option-overflow, visible);
-    overflow-wrap: var(--dx-c-dropdown-option-overflow-wrap, normal);
-    text-overflow: var(--dx-c-dropdown-option-text-overflow, clip);
 }
 
 .option-indented .option_label {
@@ -115,57 +88,65 @@
 
 .option_description {
     color: var(--dx-g-gray-30);
+    margin-top: var(--dx-g-spacing-xs);
     line-height: 18px;
 }
 
-/* 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);
-
+    margin-right: var(--dx-g-spacing-md);
     flex-shrink: 0;
 }
 
-.option_icon-start {
-    margin-right: var(--dx-g-spacing-md);
+.option-indented {
+    padding-top: var(--dx-g-spacing-xs);
+    padding-bottom: var(--dx-g-spacing-xs);
 }
 
-.option_icon-end {
-    margin-left: var(--dx-g-spacing-2xl);
+.option-fit-content {
+    min-width: 0;
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
 }
 
-/* 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);
+.option-fit-content .option_details {
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
+    min-width: 0;
+    flex: 1;
 }
 
-/* fit-content (toolbar): one line per label, truncated with an ellipsis. */
-.option-fit-content {
-    min-width: 0;
+.option-fit-content .option_description {
+    margin-top: 0;
 }
 
 .option-fit-content .option_label {
     display: block;
+    color: var(--dx-g-gray-10);
+    font-weight: var(--dx-g-font-normal);
+    line-height: var(--dx-g-spacing-lg);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     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-fit-content.option-active .option_label {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.option-fit-content .option_icon {
+    --dx-c-icon-size: var(--dx-g-icon-size-md);
+    --dx-c-icon-color: var(--dx-g-gray-50);
+
+    order: 1;
+    margin-right: 0;
+    margin-left: var(--dx-g-spacing-2xl);
+}
+
 .option-indented:not([data-index="0"]) {
-    --base-indentation: calc(
-        var(--shape-width) + var(--dx-g-spacing-sm) + var(--dx-g-spacing-xs)
-    );
+    --base-indentation: calc(var(--dx-g-spacing-md) + var(--shape-width));
     --shape-width: 8px;
 
-    padding-left: calc(
-        var(--indentation, 0px) + var(--dx-g-spacing-lg) +
-            var(--dx-g-spacing-xs)
-    );
+    padding-left: calc(var(--indentation, 0px) + var(--dx-g-spacing-md));
 }
 
 [data-index="2"] {

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

@@ -11,12 +11,11 @@
         onclick={onClick}
     >
         <dx-icon
-            class="option_icon option_icon-start"
+            class="option_icon"
             symbol={option.iconSymbol}
             sprite={option.iconSprite}
-            color={option.iconColor}
-            lwc:if={option.iconSymbol}
-            size="override"
+            if:true={option.iconSymbol}
+            size={optionIconSize}
         ></dx-icon>
         <div class="option_details">
             <div if:true={renderIndentedShape} class="indented-shape"></div>
@@ -31,14 +30,6 @@
                 {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}
@@ -49,12 +40,12 @@
         onclick={onClick}
     >
         <dx-icon
-            class="option_icon option_icon-start"
+            class="option_icon"
             symbol={option.iconSymbol}
             sprite={option.iconSprite}
             color={option.iconColor}
-            lwc:if={option.iconSymbol}
-            size="override"
+            if:true={option.iconSymbol}
+            size={optionIconSize}
         ></dx-icon>
         <div class="option_details">
             <div if:true={renderIndentedShape} class="indented-shape"></div>
@@ -63,13 +54,5 @@
                 {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

@@ -4,7 +4,8 @@ import {
     OptionWithNested,
     AnalyticsPayload,
     DropdownVariant,
-    DropdownWidthMode
+    DropdownWidthMode,
+    IconSize
 } from "typings/custom";
 import { track } from "dxUtils/analytics";
 
@@ -40,6 +41,10 @@ export default class DropdownOption extends LightningElement {
         return this.variant === "indented" && this.indexPosition >= 1;
     }
 
+    private get optionIconSize(): IconSize {
+        return this.widthMode === "fit-content" ? "override" : "large";
+    }
+
     private onClick(e: PointerEvent) {
         this.dispatchEvent(
             new CustomEvent("select", { detail: this.keyValue })

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

@@ -29,6 +29,7 @@
     padding: var(--popover-padding);
     overflow-y: auto;
     transition: var(--popover-transition);
+    transition-delay: 0.02s;
     transform: translateY(var(--dx-g-spacing-xs));
     opacity: 0;
 }
@@ -39,9 +40,6 @@
 }
 
 .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);
 }

package/src/modules/dx/popover/popover.ts

@@ -106,11 +106,7 @@ export default class Popover extends LightningElement {
         if (this.control) {
             this.control.setAttribute("aria-expanded", "false");
         }
-        document.removeEventListener(
-            "click",
-            this.interactOutsideListener,
-            true
-        );
+        document.removeEventListener("click", this.interactOutsideListener);
         document.removeEventListener("focusout", this.interactOutsideListener);
         if (this.openOnHover) {
             document.removeEventListener(
@@ -136,11 +132,7 @@ export default class Popover extends LightningElement {
     // LIFECYCLE METHODS
 
     disconnectedCallback() {
-        document.removeEventListener(
-            "click",
-            this.interactOutsideListener,
-            true
-        );
+        document.removeEventListener("click", this.interactOutsideListener);
         document.removeEventListener("mousemove", this.interactOutsideListener);
         document.removeEventListener("focusout", this.interactOutsideListener);
         this.removeControlListeners();
@@ -240,16 +232,6 @@ export default class Popover extends LightningElement {
                 this.dispatchEvent(new CustomEvent("controlarrowdown"));
                 break;
             }
-            // A mouse-opened menu leaves focus on the control, so Escape lands
-            // here, not in the popover's own key handler.
-            case "Esc":
-            case "Escape": {
-                if (this.open) {
-                    this.dispatchRequestCloseEvent("keypress-escape");
-                    this.closePopover(true);
-                }
-                break;
-            }
             default:
         }
     };
@@ -313,11 +295,7 @@ export default class Popover extends LightningElement {
     }
 
     private attachListenersTopopover() {
-        // Capture so a click still counts as outside when a descendant
-        // calls stopPropagation (topic version pickers do, so the tree row
-        // does not navigate). Without this, opening a second picker leaves
-        // the first menu open.
-        document.addEventListener("click", this.interactOutsideListener, true);
+        document.addEventListener("click", this.interactOutsideListener);
         document.addEventListener("focusout", this.interactOutsideListener);
         if (this.openOnHover) {
             document.addEventListener(

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

@@ -5,6 +5,8 @@
     --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,6 +12,20 @@
     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;