@salesforcedevs/dx-components 1.40.1-ver-picker-1 → 1.40.3

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/package.json

@@ -1,48 +1,48 @@
 {
-  "name": "@salesforcedevs/dx-components",
-  "version": "1.40.1-ver-picker-1",
-  "description": "DX Lightning web components",
-  "license": "MIT",
-  "engines": {
-    "node": "22.x"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@coveo/headless": "3.22.2",
-    "@floating-ui/dom": "1.5.1",
-    "@optimizely/optimizely-sdk": "5.3.0",
-    "@shikijs/colorized-brackets": "^3.12.2",
-    "@types/throttle-debounce": "5.0.2",
-    "@vimeo/player": "2.22.0",
-    "classnames": "2.5.1",
-    "composed-offset-position": "0.0.4",
-    "coveo-search-ui": "2.10113.0",
-    "debounce": "1.2.1",
-    "js-cookie": "3.0.5",
-    "lodash.defaults": "4.2.0",
-    "lodash.get": "4.4.2",
-    "lodash.kebabcase": "4.1.1",
-    "memoize-one": "6.0.0",
-    "microtip": "0.2.2",
-    "shiki": "^3.12.2",
-    "throttle-debounce": "5.0.0",
-    "uuid": "9.0.1"
-  },
-  "devDependencies": {
-    "@types/classnames": "2.3.1",
-    "@types/debounce": "1.2.4",
-    "@types/js-cookie": "3.0.6",
-    "@types/lodash.defaults": "4.2.9",
-    "@types/lodash.get": "4.4.9",
-    "@types/lodash.kebabcase": "4.1.9",
-    "@types/luxon": "3.4.2",
-    "@types/uuid": "8.3.4",
-    "@types/vimeo__player": "2.18.3",
-    "eventsourcemock": "2.0.0",
-    "luxon": "3.4.4",
-    "msw": "^2.12.4"
-  },
-  "stableVersion": "1.40.0"
-}
+    "name": "@salesforcedevs/dx-components",
+    "version": "1.40.3",
+    "description": "DX Lightning web components",
+    "license": "MIT",
+    "engines": {
+        "node": "22.x"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@coveo/headless": "3.22.2",
+        "@floating-ui/dom": "1.5.1",
+        "@optimizely/optimizely-sdk": "5.3.0",
+        "@shikijs/colorized-brackets": "^3.12.2",
+        "@types/throttle-debounce": "5.0.2",
+        "@vimeo/player": "2.22.0",
+        "classnames": "2.5.1",
+        "composed-offset-position": "0.0.4",
+        "coveo-search-ui": "2.10113.0",
+        "debounce": "1.2.1",
+        "js-cookie": "3.0.5",
+        "lodash.defaults": "4.2.0",
+        "lodash.get": "4.4.2",
+        "lodash.kebabcase": "4.1.1",
+        "memoize-one": "6.0.0",
+        "microtip": "0.2.2",
+        "shiki": "^3.12.2",
+        "throttle-debounce": "5.0.0",
+        "uuid": "9.0.1"
+    },
+    "devDependencies": {
+        "@types/classnames": "2.3.1",
+        "@types/debounce": "1.2.4",
+        "@types/js-cookie": "3.0.6",
+        "@types/lodash.defaults": "4.2.9",
+        "@types/lodash.get": "4.4.9",
+        "@types/lodash.kebabcase": "4.1.9",
+        "@types/luxon": "3.4.2",
+        "@types/uuid": "8.3.4",
+        "@types/vimeo__player": "2.18.3",
+        "eventsourcemock": "2.0.0",
+        "luxon": "3.4.4",
+        "msw": "^2.12.4"
+    },
+    "gitHead": "c8c3bb1003d40a55fdd5733c7891dcca3931fb24"
+}

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

@@ -132,12 +132,62 @@
     width: var(--dx-c-slot-empty-width, 52px);
 }
 
+/*
+ * Renders a primary/secondary/tertiary button as an icon-only square while
+ * keeping a slotted label in the DOM for screen readers. The square width
+ * reuses --dx-c-slot-empty-width so callers can tune it the same way as the
+ * slot-empty path. position: relative anchors the visually-hidden label.
+ */
+.button.variant_primary.icon-only,
+.button.variant_secondary.icon-only,
+.button.variant_tertiary.icon-only {
+    position: relative;
+    padding: 0;
+}
+
+.button.size-large.icon-only {
+    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-3xl));
+}
+
+.button.size-small.icon-only {
+    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-xl));
+}
+
+.button.size-hero.icon-only {
+    width: var(--dx-c-slot-empty-width, 52px);
+}
+
+/*
+ * Visually hide the slotted label but keep it accessible. Scoped to the
+ * content span (not the loading-message span) so the loading state still
+ * reads out.
+ */
+.button.icon-only > span[part="content"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* The hidden label leaves no visible text, so drop the icon gap. */
+.button.icon-only.icon-right > *:nth-child(2),
+.button.icon-only.icon-left > *:nth-child(2) {
+    margin-left: 0;
+    margin-right: 0;
+}
+
 /* primary */
 
 .button.variant_primary {
     color: white;
     background: var(--dx-c-button-primary-color);
-    border: 1px solid var(--dx-c-button-primary-color);
+    border: var(--dx-c-button-border-width, 1px) solid
+        var(--dx-c-button-primary-color);
 }
 
 .button.variant_primary:hover,
@@ -159,7 +209,8 @@
 .button.variant_secondary,
 .button.variant_quaternary {
     color: var(--dx-c-button-secondary-color);
-    border: 1px solid var(--dx-c-button-secondary-color);
+    border: var(--dx-c-button-border-width, var(--dx-g-spacing-2xs)) solid
+        var(--dx-c-button-secondary-color);
 }
 
 .button.variant_secondary:hover,
@@ -175,7 +226,7 @@
 .button.variant_inline,
 .button.variant_inline-inherit {
     color: var(--dx-c-button-inline-color);
-    border: 1px solid transparent;
+    border: var(--dx-c-button-border-width, 1px) solid transparent;
 }
 
 .button.variant_inline.light-text {
@@ -221,7 +272,8 @@
 .button.variant_icon-only:hover.state-disabled {
     color: var(--dx-c-button-custom-color);
     background: var(--dx-c-button-custom-background);
-    border: 1px solid var(--dx-c-button-custom-border);
+    border: var(--dx-c-button-border-width, 1px) solid
+        var(--dx-c-button-custom-border);
 }
 
 .button.variant_custom:hover,

package/src/modules/dx/button/button.ts

@@ -22,6 +22,7 @@ export default class Button extends LightningElement {
     @api loading: boolean = false;
     @api size: ButtonSize = "small";
     @api variant: ButtonVariant = "primary";
+    @api iconOnly: boolean = false;
     @api inlineTextColor: ButtonTextColor = "dark";
     @api font: "display" | "sans" = "display";
     @api form: string | undefined;
@@ -61,6 +62,7 @@ export default class Button extends LightningElement {
             `variant_${this.variant}`,
             {
                 "slot-empty": !isIconOnly && !this.loading && this.isSlotEmpty,
+                "icon-only": this.iconOnly,
                 "state-disabled": this.disabled,
                 "state-loading": this.loading,
                 "style-icon": !!this.iconSymbol,

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

@@ -1,6 +1,6 @@
 @import "dxHelpers/reset";
 
-.menu-nested::part(content) {
+.menu-nested:not(.menu-fit-content)::part(content) {
     padding-top: var(--dx-g-spacing-sm);
     width: 354px;
 }
@@ -14,6 +14,32 @@
     display: none;
 }
 
+.menu-fit-content {
+    --dx-c-popover-width: max-content;
+    --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
+}
+
+.menu-fit-content .menu_list {
+    width: 100%;
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
+}
+
+.menu-fit-content.menu-nested .menu_option:not(:first-child) {
+    border-top: var(--border);
+    margin-top: 0;
+    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);
@@ -52,7 +78,7 @@
 }
 
 .menu_option {
-    --border: 1px solid var(--dx-g-blue-natural-90);
+    --border: 1px solid var(--dx-g-gray-80);
 
     display: flex;
     flex-direction: column;
@@ -70,7 +96,6 @@
     font-size: var(--dx-g-text-sm);
     font-weight: bold;
     text-transform: uppercase;
-    letter-spacing: 1px;
     margin: var(--dx-g-spacing-sm);
 }
 

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

@@ -2,15 +2,16 @@
     <dx-popover
         aria-label={ariaLabel}
         class={className}
-        full-width={fullWidth}
+        full-width={effectiveFullWidth}
         offset={offset}
         onclose={onClose}
+        onopen={onOpen}
         open-on-hover={openOnHover}
         open={open}
         page-padding={pagePadding}
         placement={placement}
         small={small}
-        width={width}
+        width={effectiveWidth}
     >
         <slot slot="control"></slot>
         <div
@@ -33,6 +34,7 @@
                     option={option}
                     nav-item-label={navItemLabel}
                     variant={variant}
+                    width-mode={widthMode}
                 ></dx-dropdown-option>
                 <div
                     key={option.id}
@@ -52,6 +54,7 @@
                             onselect={onOptionClick}
                             option={suboption}
                             nav-item-label={navItemLabel}
+                            width-mode={widthMode}
                         ></dx-dropdown-option>
                     </template>
                     <dx-button

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

@@ -2,7 +2,8 @@ import {
     AnalyticsPayload,
     OptionWithNested,
     PopperPlacement,
-    DropdownVariant
+    DropdownVariant,
+    DropdownWidthMode
 } from "typings/custom";
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
@@ -37,6 +38,7 @@ export default class Dropdown extends LightningElement {
     @api fullWidth?: boolean | null;
     @api navItemLabel: string | null = null;
     @api variant: DropdownVariant = "base";
+    @api widthMode: DropdownWidthMode = "fixed";
 
     // props forwarded to dropdown option
     @api analyticsEvent?: string;
@@ -80,12 +82,29 @@ export default class Dropdown extends LightningElement {
         return this.areOptionsEmpty ? null : "menu";
     }
 
+    private get isFitContent() {
+        return this.widthMode === "fit-content";
+    }
+
+    private get effectiveWidth() {
+        return this.isFitContent ? null : this.width;
+    }
+
+    private get effectiveFullWidth() {
+        return this.isFitContent ? false : this.fullWidth;
+    }
+
     private get className() {
+        const fitContent = this.isFitContent;
         return cx(
             this.isNested && "menu-nested",
-            this.isNested && this.options.length >= 2 && "menu-nested-2-col",
+            this.isNested &&
+                this.options.length >= 2 &&
+                !fitContent &&
+                "menu-nested-2-col",
             this.offset && `menu-offset-${this.offset}`,
-            this.areOptionsEmpty && "menu-hidden"
+            this.areOptionsEmpty && "menu-hidden",
+            fitContent && "menu-fit-content"
         );
     }
 
@@ -166,6 +185,11 @@ export default class Dropdown extends LightningElement {
 
     private onClose(): void {
         this._focusedValue = null;
+        this.dispatchEvent(new CustomEvent("close"));
+    }
+
+    private onOpen(): void {
+        this.dispatchEvent(new CustomEvent("open"));
     }
 
     private focusDefaultOption() {

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

@@ -1,8 +1,8 @@
 @import "dxHelpers/reset";
 
 .indented-shape {
-    --background: rgb(170 203 255);
-    --wide: 2px;
+    --background: var(--dx-g-cloud-blue-vibrant-80);
+    --wide: var(--dx-g-spacing-2xs);
 
     background-color: var(--background);
     height: var(--wide);
@@ -25,29 +25,25 @@
     display: flex;
     font-family: var(--dx-g-font-sans);
     width: 100%;
-
-    /* Opt-in hooks; defaults preserve today's look. */
-    padding: var(--dx-c-dropdown-option-padding, var(--dx-g-spacing-sm));
+    padding: var(--dx-g-spacing-sm);
     font-size: var(--dx-g-text-sm);
-    border-radius: var(
-        --dx-c-dropdown-option-border-radius,
-        var(--dx-g-spacing-xs)
-    );
     transition: var(--dx-g-transition-hue-1x);
     align-items: center;
     outline: none !important;
 }
 
-.option:focus {
-    box-shadow: inset 0 0 0 1px var(--dx-g-blue-vibrant-50);
-}
-
 .option:active {
     background: var(--dx-g-cloud-blue-vibrant-95) !important;
 }
 
-.option:not(.option-active):hover {
-    background: var(--dx-g-gray-95);
+.option:not(.option-active):hover,
+.option:not(.option-active):focus-visible {
+    background: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+.option:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-60),
+        inset 0 0 0 4px white;
 }
 
 .option-active {
@@ -76,13 +72,6 @@
     align-items: center;
     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));
-
-    /* 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);
-    text-overflow: var(--dx-c-dropdown-option-text-overflow, clip);
 }
 
 .option-indented .option_label {
@@ -113,6 +102,46 @@
     padding-bottom: var(--dx-g-spacing-xs);
 }
 
+.option-fit-content {
+    min-width: 0;
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
+}
+
+.option-fit-content .option_details {
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
+    min-width: 0;
+    flex: 1;
+}
+
+.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);
+}
+
+.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(--dx-g-spacing-md) + var(--shape-width));
     --shape-width: 8px;

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

@@ -15,7 +15,7 @@
             symbol={option.iconSymbol}
             sprite={option.iconSprite}
             if:true={option.iconSymbol}
-            size="large"
+            size={optionIconSize}
         ></dx-icon>
         <div class="option_details">
             <div if:true={renderIndentedShape} class="indented-shape"></div>
@@ -45,7 +45,7 @@
             sprite={option.iconSprite}
             color={option.iconColor}
             if:true={option.iconSymbol}
-            size="large"
+            size={optionIconSize}
         ></dx-icon>
         <div class="option_details">
             <div if:true={renderIndentedShape} class="indented-shape"></div>

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

@@ -3,7 +3,9 @@ import cx from "classnames";
 import {
     OptionWithNested,
     AnalyticsPayload,
-    DropdownVariant
+    DropdownVariant,
+    DropdownWidthMode,
+    IconSize
 } from "typings/custom";
 import { track } from "dxUtils/analytics";
 
@@ -16,6 +18,7 @@ export default class DropdownOption extends LightningElement {
     @api analyticsPayload?: AnalyticsPayload | undefined;
     @api indexPosition: number = 0;
     @api variant: DropdownVariant = "base";
+    @api widthMode: DropdownWidthMode = "fixed";
 
     @api focus() {
         const option = this.template.querySelector(".option");
@@ -29,7 +32,8 @@ export default class DropdownOption extends LightningElement {
         return cx(
             "option",
             this.active && "option-active",
-            this.variant && `option-${this.variant}`
+            this.variant && `option-${this.variant}`,
+            this.widthMode === "fit-content" && "option-fit-content"
         );
     }
 
@@ -37,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

@@ -23,7 +23,7 @@
     border: var(--popover-border);
     box-shadow: var(--dx-g-box-shadow-lg);
     border-radius: var(--popover-border-radius);
-    width: 168px;
+    width: var(--dx-c-popover-width, 168px);
     max-width: calc(100vw - var(--dx-g-spacing-lg));
     max-height: 65vh;
     padding: var(--popover-padding);
@@ -44,6 +44,14 @@
     transform: var(--popover-container-open-transform);
 }
 
+/* Adjust transform for top placement */
+.popover-container[data-placement-side="top"].popover-container_open .popover {
+    transform: var(
+        --popover-container-open-transform-up,
+        var(--popover-container-open-transform)
+    );
+}
+
 .popover-overridewidth {
     max-width: unset;
 }

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

@@ -80,7 +80,11 @@ export default class Popover extends LightningElement {
             this.control.setAttribute("aria-expanded", "true");
 
             if (this.popover) {
-                this.autoUpdateCleanup = autoUpdate(this.control, this.popover, this.setPosition);
+                this.autoUpdateCleanup = autoUpdate(
+                    this.control,
+                    this.popover,
+                    this.setPosition
+                );
             }
 
             this.dispatchEvent(new CustomEvent("open"));
@@ -337,6 +341,12 @@ export default class Popover extends LightningElement {
                     top: `${y}px`
                 });
 
+                // Expose the final placement side after any flip
+                popoverEl.setAttribute(
+                    "data-placement-side",
+                    placement.split("-")[0]
+                );
+
                 if (this.arrow && middlewareData.arrow) {
                     const { x: arrowX, y: arrowY } = middlewareData.arrow;
                     const popoverPlacementSide = placement.split("-")[0] as

package/src/modules/dx/section/section.css

@@ -65,9 +65,15 @@
 }
 
 .dx-text-display-custom {
-    color: var(--dx-c-section-heading-font-color, --dx-g-text-heading-color);
-    font-family: var(--dx-c-section-heading-font-family, --dx-g-font-display);
-    font-size: var(--dx-c-section-heading-font-size, --dx-g-text-3xl);
+    color: var(
+        --dx-c-section-heading-font-color,
+        var(--dx-g-text-heading-color)
+    );
+    font-family: var(
+        --dx-c-section-heading-font-family,
+        var(--dx-g-font-display)
+    );
+    font-size: var(--dx-c-section-heading-font-size, var(--dx-g-text-3xl));
     letter-spacing: var(--dx-c-section-heading-letter-spacing, -0.4px);
     line-height: var(--dx-c-section-heading-line-height, 40px);
 }

package/src/modules/dx/select/select.css

@@ -1,5 +1,7 @@
 :host {
     display: block;
+
+    --dx-c-select-border: 1px solid var(--dx-g-gray-50);
 }
 
 :host(:focus-visible) {
@@ -122,7 +124,7 @@ select {
 .select-element {
     height: calc(1.875rem + (1px * 2));
     width: 100%;
-    border: 1px solid #dddbda;
+    border: var(--dx-c-select-border);
     border-radius: 0.25rem;
     background-color: transparent;
     transition: border 0.1s linear, background-color 0.1s linear;

package/src/modules/dx/tooltip/tooltip.css

@@ -8,6 +8,12 @@
     display: inherit;
 }
 
+[aria-label][role~="tooltip"].is-suppressed:is(:hover, :focus)::before,
+[aria-label][role~="tooltip"].is-suppressed:is(:hover, :focus)::after {
+    opacity: 0;
+    pointer-events: none;
+}
+
 [role~="tooltip"][data-microtip-position|="bottom"]::before {
     background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
         no-repeat;

package/src/modules/dx/tooltip/tooltip.html

@@ -1,5 +1,10 @@
 <template>
-    <div data-microtip-position={placement} role="tooltip" aria-label={label}>
+    <div
+        class={tooltipClass}
+        data-microtip-position={placement}
+        role="tooltip"
+        aria-label={label}
+    >
         <slot></slot>
     </div>
 </template>

package/src/modules/dx/tooltip/tooltip.ts

@@ -1,6 +1,21 @@
 import { LightningElement, api } from "lwc";
+import cx from "classnames";
 
 export default class Tooltip extends LightningElement {
     @api placement?: String = "top";
     @api label: string = "";
+
+    // When true, the tooltip is shown regardless of hover/focus. Lets a
+    // consumer flash it programmatically
+    @api visible: boolean = false;
+
+    // Suppresses the tooltip while the trigger is hovered or focused e.g when a menu is open
+    @api suppressed: boolean = false;
+
+    get tooltipClass(): string {
+        return cx({
+            "is-visible": this.visible,
+            "is-suppressed": this.suppressed && !this.visible
+        });
+    }
 }

package/src/modules/dx/tree/treeHandler.ts

@@ -65,7 +65,8 @@ export class TreeHandler {
             isChildrenLoading: node.isChildrenLoading || false,
             link: node.link,
             method: node.method,
-            showForwardArrow: node.showForwardArrow
+            showForwardArrow: node.showForwardArrow,
+            redirectToChild: node.redirectToChild
         };
 
         const mapItem = { node: convertedNode, parent };

package/src/modules/dx/treeItem/treeItem.ts

@@ -49,6 +49,10 @@ export default class TreeItem extends LightningElement {
         return this.hasChildren || this.isChildrenLoading;
     }
 
+    private get isContentlessParent(): boolean {
+        return this.isParent && !!this._treeNode?.redirectToChild;
+    }
+
     private get showChildren(): boolean {
         return this.isExpanded && this.hasChildren;
     }
@@ -140,6 +144,23 @@ export default class TreeItem extends LightningElement {
     private onLinkClick(event: Event): void {
         this.preventDefaultLinkBehavior(event);
 
+        /**
+         * A content-less parent that redirects to a content child navigates
+         * like a normal link (navigation handles selection and ancestor
+         * expansion). A content-less parent whose chain has no content page to
+         * redirect to only expands, it is never selected.
+         */
+        if (this.isContentlessParent) {
+            if (this._treeNode.link?.href) {
+                this.sendGtm(event);
+                return;
+            }
+            const isSelectAction = false;
+            this.doExpand(isSelectAction);
+            this.sendGtm(event);
+            return;
+        }
+
         if (this.isParent) {
             const isSelectAction = true;
             this.doExpand(isSelectAction);

package/src/modules/dx/treeTile/treeTile.html

@@ -1,5 +1,5 @@
 <template>
-    <a href={href} class={tileClass} target={target}>
+    <a href={href} class={tileClass} target={target} aria-label={linkAriaLabel}>
         <div class="flex indentation" role="heading" aria-level={tileAriaLevel}>
             <div class="flex tile-expand-icon tile-icon" if:true={showArrow}>
                 <dx-icon

package/src/modules/dx/treeTile/treeTile.ts

@@ -37,6 +37,28 @@ export default class TreeTile extends LightningElement {
         return this.treeNode.level + 2;
     }
 
+    /**
+     * Accessible name for the link. If a parent redirects to its first child,
+     * include both the parent and child labels so the destination is clear to
+     * screen reader users (WCAG 2.4.4)
+     */
+    get linkAriaLabel(): string | null {
+        if (!this.treeNode.redirectToChild || !this.treeNode.link?.href) {
+            return null;
+        }
+        /**
+         * The redirect can target a deep descendant, so walk the first-child
+         * chain to the node that owns the destination link and name it.
+         */
+        let destination = this.treeNode.children?.[0];
+        while (destination?.redirectToChild) {
+            destination = destination.children?.[0];
+        }
+        return destination?.link?.href === this.treeNode.link.href
+            ? `${this.treeNode.label}, opens ${destination.label}`
+            : null;
+    }
+
     private get iconSize() {
         return "xsmall";
     }

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -18,8 +18,7 @@ const VALID_BRANDS = [
     "revenue",
     "sales",
     "service",
-    "success",
-    "einstein"
+    "success"
 ];
 
 export const ANALYTICS_INFO = {

package/src/modules/dxConstants/brands/brands.ts

@@ -13,6 +13,5 @@ export const BRANDS = [
     "industries",
     "learning",
     "service",
-    "analytics",
-    "einstein"
+    "analytics"
 ] as Brand[];