@salesforcedevs/dx-components 1.40.0-docs-feedback-4 → 1.40.0-tlv-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/dx-components",
-  "version": "1.40.0-docs-feedback-4",
+  "version": "1.40.0-tlv-alpha",
   "description": "DX Lightning web components",
   "license": "MIT",
   "engines": {
@@ -43,6 +43,5 @@
     "eventsourcemock": "2.0.0",
     "luxon": "3.4.4",
     "msw": "^2.12.4"
-  },
-  "stableVersion": "1.40.0"
+  }
 }

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

@@ -86,11 +86,11 @@
 }
 
 .button.icon-right:not(.slot-empty) > *:nth-child(2) {
-    margin-left: var(--dx-g-spacing-sm);
+    margin-left: var(--dx-c-button-icon-gap, var(--dx-g-spacing-sm));
 }
 
 .button.icon-left:not(.slot-empty) > *:nth-child(2) {
-    margin-right: var(--dx-g-spacing-sm);
+    margin-right: var(--dx-c-button-icon-gap, var(--dx-g-spacing-sm));
 }
 
 .button.style-icon.slot-empty {

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

@@ -25,9 +25,14 @@
     display: flex;
     font-family: var(--dx-g-font-sans);
     width: 100%;
-    padding: var(--dx-g-spacing-sm);
+
+    /* Opt-in hooks; defaults preserve today's look. */
+    padding: var(--dx-c-dropdown-option-padding, var(--dx-g-spacing-sm));
     font-size: var(--dx-g-text-sm);
-    border-radius: var(--dx-g-spacing-xs);
+    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;
@@ -71,6 +76,13 @@
     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 {

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

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

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

@@ -49,10 +49,6 @@ 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;
     }
@@ -144,23 +140,6 @@ 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} aria-label={linkAriaLabel}>
+    <a href={href} class={tileClass} target={target}>
         <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,28 +37,6 @@ 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";
     }