@salesforcedevs/dx-components 1.2.18-lightdom → 1.2.18-lightdom-4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.2.18-lightdom",
+    "version": "1.2.18-lightdom-4",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/banner/banner.css

@@ -1,3 +1,35 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+.container {
+    --primary-color: var(--dx-g-cloud-blue-vibrant-50);
+    --secondary-color: var(--dx-g-cloud-blue-vibrant-40);
+
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    min-height: 24px;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    background: repeating-linear-gradient(
+        45deg,
+        var(--primary-color),
+        var(--primary-color) 20px,
+        var(--secondary-color) 20px,
+        var(--secondary-color) 40px
+    );
+}
+
+.container_inner {
+    height: 100%;
+    display: flex;
+    background: var(--primary-color);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm);
+    color: white;
+    font-weight: bold;
+}
+
 .container a {
     text-decoration: underline;
     transition: var(--dx-g-transition-hue-1x);
@@ -11,4 +43,4 @@
 .container dx-icon {
     margin-right: var(--dx-g-spacing-sm);
     margin-top: var(--dx-g-spacing-2xs);
-}
+}

package/src/modules/dx/banner/banner.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode='light'>
+<template>
     <div class="container">
         <div class="container_inner dx-text-body-4">
             <dx-icon symbol="announcement"></dx-icon>
@@ -7,10 +7,7 @@
                 option instead of slots because the html markup will come as a
                 property to the component from a configuration
             -->
-            <div
-                class="info-container"
-                lwc:inner-html={content}
-            ></div>
+            <div lwc:dom="manual" class="info-container"></div>
         </div>
     </div>
 </template>

package/src/modules/dx/banner/banner.ts

@@ -2,13 +2,11 @@ import { LightningElement, api } from "lwc";
 import { setContainerInnerHtml } from "dxUtils/lwc";
 
 export default class Banner extends LightningElement {
-    static renderMode = 'light';
-
     @api bannerMarkup =
         'Thank you for visiting the Salesforce Developers website! <span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">We value your feedback</a></span>';
 
     renderedCallback() {
-        const container = this.querySelector(".info-container");
+        const container = this.template.querySelector(".info-container");
         setContainerInnerHtml(container, this.bannerMarkup);
     }
 }

package/src/modules/dx/brandThemeProvider/brandThemeProvider.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode='light'>
+<template lwc:render-mode="light">
     <slot></slot>
     <div id="extra_brand_styles"></div>
 </template>

package/src/modules/dx/brandThemeProvider/brandThemeProvider.ts

@@ -3,7 +3,7 @@ import brandCssVars from "./brandCssVars";
 import { Brand } from "typings/custom";
 
 export const toCss = (brand: Brand | null) => `
-  body, header, dx-card-small {
+    body, header, dx-card-small {
     ${brandCssVars.reduce(
         (acc, v) => `
           ${acc}
@@ -15,8 +15,8 @@ export const toCss = (brand: Brand | null) => `
 `;
 
 export default class BrandThemeProvider extends LightningElement {
-    static renderMode = 'light';
-    
+    static renderMode = "light";
+
     @api brand: Brand | null = null;
 
     private get css() {
@@ -34,7 +34,7 @@ export default class BrandThemeProvider extends LightningElement {
     setBrandVars() {
         let style = this.querySelector("style");
 
-        if(!style) {
+        if (!style) {
             style = document.createElement("style");
             this.querySelector("#extra_brand_styles")?.appendChild(style);
         }

package/src/modules/dx/button/button.html

@@ -1,4 +1,4 @@
-<template>
+<template lwc:render-mode="light">
     <button
         if:false={href}
         class={className}
@@ -7,8 +7,8 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
-            <slot onslotchange={onSlotChange}></slot>
+        <span if:false={loading} class="button_content">
+            <slot></slot>
         </span>
         <dx-icon
             if:true={showIcon}
@@ -29,8 +29,8 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
-            <slot onslotchange={onSlotChange}></slot>
+        <span if:false={loading} class="button-content">
+            <slot></slot>
         </span>
         <dx-icon
             if:true={showIcon}

package/src/modules/dx/button/{button.css → button.scoped.css}

@@ -1,19 +1,4 @@
-@import "dxHelpers/reset";
-
-:host { /* TODO: remove this after it has been completely supplanted by .base-button */
-    width: min-content;
-    font-size: inherit;
-
-    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
-    --dx-c-button-primary-color-hover: var(--dx-g-blue-vibrant-40);
-    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-90);
-    --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-30);
-    --dx-c-button-justify-content: center;
-    --dx-c-button-opacity: 1;
-    --dx-c-button-font-size: var(--dx-g-text-sm);
-}
-
-.base-button { /* TODO: remove this after it has been completely supplanted by .base-button */
+:host {
     width: min-content;
     font-size: inherit;
 

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

@@ -5,11 +5,12 @@ import {
     ButtonVariant,
     IconSprite,
     IconSize,
-    IconSymbol,
-    LightningSlotElement
+    IconSymbol
 } from "typings/custom";
 
 export default class Button extends LightningElement {
+    static renderMode = "light";
+
     @api ariaLabel: string = "";
     @api disabled: boolean | null = null;
     @api iconSize?: IconSize = "small";
@@ -34,14 +35,12 @@ export default class Button extends LightningElement {
     @api rel: string | null = null;
 
     @api focus() {
-        const button = this.template.querySelector(".button");
+        const button = this.querySelector(".button");
         if (button) {
             button.focus();
         }
     }
 
-    private isSlotEmpty: boolean = true;
-
     private get showIcon(): boolean {
         return !!this.iconSymbol && !this.loading;
     }
@@ -55,14 +54,17 @@ export default class Button extends LightningElement {
             this.loading && "state-loading",
             `size-${this.size}`,
             !!this.iconSymbol && "style-icon",
-            this.isSlotEmpty && "slot-empty",
+            this.isSlotEmpty() && "slot-empty",
             `font-${this.font}`,
             this.iconPosition === "right" ? "icon-right" : "icon-left"
         );
     }
 
-    private onSlotChange(e: LightningSlotElement) {
-        const slot = e.target;
-        this.isSlotEmpty = slot.assignedElements().length !== 0;
+    private isSlotEmpty() {
+        return (
+            this.querySelector('[name="button_content"]')?.childElementCount ===
+                0 &&
+            this.querySelector('[name="button_content"]')?.textContent === null
+        );
     }
 }

package/src/modules/dx/cardPodcastEpisode/{cardPodcastEpisode.scoped.css → cardPodcastEpisode.css}

@@ -1,3 +1,7 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
 .card-podcast-episode {
     display: flex;
     flex-direction: row;

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode='light'>
+<template>
     <div class={className}>
         <div class="dx-card-base_section-horizontal">
             <a

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.ts

@@ -2,7 +2,6 @@ import { LightningElement, api } from "lwc";
 import cx from "classnames";
 
 export default class CardPodcastEpisode extends LightningElement {
-    static renderMode = 'light';
     @api body!: string;
     @api datetime!: string;
     @api dateTime?: string | null = null;
@@ -22,7 +21,6 @@ export default class CardPodcastEpisode extends LightningElement {
     private get className() {
         return cx(
             "card-podcast-episode",
-            "base-card",
             "dx-card-base_borderless",
             this.isLinkHovered && "dx-card-base_link-hovered"
         );

package/src/modules/dx/cardTitle/cardTitle.css

@@ -1,4 +1,7 @@
-dx-card-title {
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
     --dx-c-card-title-color: var(--dx-g-text-heading-color);
     --dx-c-card-title-font-size: var(--dx-g-text-xl);
     --dx-c-card-title-line-height: 28px;
@@ -6,6 +9,20 @@ dx-card-title {
     --dx-c-card-title-icon-size: 22px;
 }
 
+h3.dx-text-heading-4 {
+    color: var(--dx-c-card-title-color);
+    transition: var(--dx-g-transition-hue-1x);
+    font-size: var(--dx-c-card-title-font-size);
+    line-height: var(--dx-c-card-title-line-height);
+    letter-spacing: var(--dx-c-card-title-letter-spacing);
+    word-break: break-word;
+    hyphens: auto;
+}
+
+.nowrap {
+    white-space: nowrap;
+}
+
 dx-icon {
     --dx-c-icon-size: var(--dx-c-card-title-icon-size);
 
@@ -15,7 +32,12 @@ dx-icon {
 }
 
 @media screen and (max-width: 1024px) {
+    .dx-text-heading-4 {
+        font-size: 20px;
+        line-height: 24px;
+    }
+
     dx-icon {
         --dx-c-card-title-icon-size: 20px;
     }
-}
+}

package/src/modules/dx/cardTitle/cardTitle.html

@@ -1,16 +1,16 @@
-<template lwc:render-mode='light'>
+<template>
     <h3 class="dx-text-heading-4">
         <a if:true={href} href={href} target={target}>
             {titleToWrap}
-            <template if:true={needsSpace} lwc:render-mode='light'>&#32;</template>
+            <template if:true={needsSpace}>&#32;</template>
             <span class="nowrap" if:true={isExternal}>
                 {titleNoWrap}&nbsp;
                 <dx-icon symbol="new_window" size="override"></dx-icon>
             </span>
         </a>
-        <template if:false={href} lwc:render-mode='light'>
+        <template if:false={href}>
             {titleToWrap}
-            <template if:true={needsSpace} lwc:render-mode='light'>&#32;</template>
+            <template if:true={needsSpace}>&#32;</template>
             <span class="nowrap" if:true={isExternal}>
                 {titleNoWrap}&nbsp;
                 <dx-icon symbol="new_window" size="override"></dx-icon>

package/src/modules/dx/cardTitle/cardTitle.ts

@@ -1,7 +1,6 @@
 import { LightningElement, api } from "lwc";
 
 export default class CardTitle extends LightningElement {
-    static renderMode = 'light';
     @api href!: string;
     @api target?: string | null = null;
     @api title!: string;

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

@@ -1,13 +1,5 @@
-
-dx-dropdown dx-button {
-    --dx-c-button-primary-color: var(--button-primary-color);
-    --dx-c-button-primary-color-hover: var(--button-primary-color-hover);
-    --border-color: var(--button-primary-color);
-
-    border-bottom: 1px dashed var(--border-color);
-}
-
-.menu-nested::part(content) {
+.menu-nested::part(content),
+.menu-nested .popover.popover-content {
     padding-top: var(--dx-g-spacing-sm);
     width: 354px;
 }
@@ -18,7 +10,8 @@ dx-dropdown dx-button {
     flex-wrap: nowrap;
 }
 
-.menu-hidden::part(content) {
+.menu-hidden::part(content),
+.menu-hidden .popover.popover-content {
     display: none;
 }
 
@@ -31,7 +24,8 @@ dx-dropdown dx-button {
 }
 
 @media screen and (min-width: 1000px) {
-    .menu-nested-2-col::part(content) {
+    .menu-nested-2-col::part(content),
+    .menu-nested-2-col .popover.popover-content {
         width: 592px;
     }
 

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

@@ -1,4 +1,4 @@
-<template lwc:render-mode='light'>
+<template lwc:render-mode="light">
     <dx-popover
         aria-label={ariaLabel}
         class={className}
@@ -13,8 +13,9 @@
         width={width}
     >
         <div slot="control">
-            <slot></slot>            
+            <slot></slot>
         </div>
+
         <div
             class="menu_list"
             if:false={areOptionsEmpty}

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

@@ -20,7 +20,7 @@ interface DropdownOption extends OptionWithNested {
 }
 
 export default class Dropdown extends LightningElement {
-    static renderMode = 'light';
+    static renderMode = "light";
 
     @api value: string | null = null; // "active option" id
     @api valuePath: string = "id"; // path to match for the active value (useful for url matching)

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -6,9 +6,7 @@
 :host {
     width: 100%;
 
-    --dx-c-featured-content-header-background-color: var(
-        --dx-g-indigo-vibrant-90
-    );
+    /* --dx-c-featured-content-header-background-color */
     --dx-c-tree-graphic-color: var(--dx-g-indigo-vibrant-40);
     --dx-c-featured-content-header-padding-horizontal: var(
         --dx-g-page-padding-horizontal
@@ -42,7 +40,10 @@
     position: relative;
     padding: var(--dx-c-featured-content-header-padding-vertical)
         var(--dx-c-featured-content-header-padding-horizontal);
-    background-color: var(--dx-c-featured-content-header-background-color);
+    background-color: var(
+        --dx-c-featured-content-header-background-color,
+        --dx-g-indigo-vibrant-90
+    );
 }
 
 /* LAYOUTS */
@@ -380,10 +381,9 @@ dx-image-and-label {
 
 /* DARK VARIANT */
 .variant_dark {
-    background: linear-gradient(
-        -180deg,
-        rgb(40, 23, 153) 0%,
-        rgb(46, 43, 182) 100%
+    background: var(
+        --dx-c-featured-content-header-background-color,
+        linear-gradient(-180deg, rgb(40, 23, 153) 0%, rgb(46, 43, 182) 100%)
     );
 }
 

package/src/modules/dx/header/header.css

@@ -1,11 +1 @@
 @import "dxHelpers/commonHeader";
-@import "dxHelpers/text";
-@import "dxHelpers/reset";
-@import "dxHelpers/card";
-
-dx-header { /* TODO: these variables definitely aren't getting picked up correctly */
-    z-index: var(--dx-g-z-index-500);
-    
-    --dx-c-header-search-width: 316px;
-    --dx-g-text-xs: 14px;
-}

package/src/modules/dx/header/header.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode='light'>
+<template lwc:render-mode="light">
     <dx-brand-theme-provider brand={brand}>
         <header class={className}>
             <dx-skip-nav-link></dx-skip-nav-link>

package/src/modules/dx/header/header.scoped.css

@@ -1,3 +1,8 @@
+:host {
+    --dx-c-header-search-width: 316px;
+    --dx-g-text-xs: 14px;
+}
+
 dx-header-mobile-nav-menu {
     --dx-c-color-background: var(--dx-g-brand-current-color-background);
     --dx-c-button-color-background-inactive: var(

package/src/modules/dx/header/header.ts

@@ -1,8 +1,8 @@
 import { HeaderBase } from "dxBaseElements/headerBase";
 
 export default class Header extends HeaderBase {
-    static renderMode = 'light';
-    
+    static renderMode = "light";
+
     private get showSignup(): boolean {
         return this.signupLink
             ? (this.mobile && !this.isSearchOpen) || !this.mobile

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css

@@ -1,4 +1,6 @@
-header-mobile-nav-menu {
+@import "dxHelpers/reset";
+
+:host {
     --dx-c-color-background: var(--dx-g-brand-default-color-background);
     --dx-c-button-color-background-inactive: var(
         --dx-g-brand-default-button-color-background-inactive
@@ -13,4 +15,147 @@ header-mobile-nav-menu {
         --dx-g-brand-default-button-color-background-inactive-hover
     );
     --dx-c-color-border-2: var(--dx-g-brand-default-color-border-2);
-}
+}
+
+.nav-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    max-height: 56vh;
+    overflow-y: auto;
+    padding: 0 var(--dx-g-spacing-sm) var(--dx-g-spacing-sm)
+        var(--dx-g-spacing-sm);
+    background: var(--dx-c-color-background);
+    box-shadow: 0 20px 28px 0 rgba(0, 20, 45, 0.08);
+    transform: translateY(0);
+    border-top: 1px solid transparent;
+    transition: var(--dx-g-transition-transform-2x),
+        var(--dx-g-transition-hue-1x);
+    z-index: 1000;
+}
+
+.nav-menu.has-scrollshadow {
+    border-color: var(--dx-c-color-border-2);
+}
+
+.nav-menu.state-closed {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-16px);
+    pointer-events: none;
+}
+
+.nav-menu ul {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.nav-menu_item {
+    display: flex;
+    flex-direction: column;
+}
+
+.nav-menu_item,
+.nav-menu_item_cta-main {
+    transition: var(--dx-g-transition-hue-1x);
+    border-radius: var(--dx-g-spacing-xs);
+}
+
+.nav-menu_item_cta-main {
+    justify-content: space-between;
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-base);
+    color: var(--dx-g-blue-vibrant-20);
+    line-height: 20px;
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md);
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.nav-menu ul > .nav-menu_item:not(:last-of-type) {
+    margin-bottom: var(--dx-g-spacing-xs);
+}
+
+.nav-menu_item.state-open {
+    background: var(--dx-c-button-color-background-inactive);
+}
+
+.nav-menu_item_cta-main:not(.state-active):hover {
+    background: var(--dx-c-button-color-background-inactive);
+}
+
+.nav-menu_item.state-open .nav-menu_item_cta-main:hover {
+    background: var(--dx-c-button-color-background-inactive-hover);
+}
+
+.nav-menu_item.state-open .chevrondown {
+    transform: rotateX(180deg);
+}
+
+.nav-menu_item_cta-options {
+    position: relative;
+    display: none;
+    flex-direction: column;
+    width: 100%;
+}
+
+.nav-menu_item.state-open > .nav-menu_item_cta-options {
+    display: flex;
+}
+
+.nav-menu_item_cta {
+    height: var(--dx-g-spacing-3xl);
+}
+
+.nav-menu_item_cta-main.state-active {
+    background: var(--dx-c-button-color-background-active);
+    color: var(--dx-c-color);
+}
+
+.nav-menu_item_cta-main > span {
+    transform: translateY(3px); /* ghost padding */
+}
+
+.nav-menu_item_cta-sub {
+    --dx-c-button-secondary-color-hover: var(
+        --dx-c-button-color-background-inactive-hover
+    );
+
+    font-size: var(--dx-g-text-sm);
+    width: 100%;
+}
+
+.nav-menu_item_cta-sub::part(container) {
+    justify-content: flex-start;
+}
+
+.nav-menu_item_cta-sub.state-active {
+    text-decoration: underline;
+}
+
+.nav-menu_item > .nav-menu_item_cta-options:not(:first-of-type) {
+    padding-top: var(--dx-g-spacing-xs);
+    margin-top: var(--dx-g-spacing-xs);
+}
+
+.nav-menu_item > .nav-menu_item_cta-options:not(:first-of-type)::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: var(--dx-g-spacing-md);
+    width: calc(100% - var(--dx-g-spacing-xl));
+    height: 1px;
+    background: var(--dx-c-color-border-2);
+}
+
+.backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    z-index: -1;
+}

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode='light'>
+<template>
     <nav
         aria-label="Navigation Menu"
         class={className}
@@ -6,7 +6,7 @@
         onscroll={onScroll}
     >
         <ul>
-            <template for:each={navItems} for:item="navItem" lwc:render-mode='light'>
+            <template for:each={navItems} for:item="navItem">
                 <li
                     class={navItem.liClassName}
                     key={navItem.id}
@@ -38,17 +38,16 @@
                             size="medium"
                         ></dx-icon>
                     </button>
-                    <template if:true={navItem.options} lwc:render-mode='light'>
-                        <template for:each={navItem.options} for:item="options" lwc:render-mode='light'>
+                    <template if:true={navItem.options}>
+                        <template for:each={navItem.options} for:item="options">
                             <div
                                 class="nav-menu_item_cta-options"
                                 key={options.id}
                             >
-                                <template if:true={options.options} lwc:render-mode='light'>
+                                <template if:true={options.options}>
                                     <template
                                         for:each={options.options}
                                         for:item="navSubItem"
-                                        lwc:render-mode='light'
                                     >
                                         <dx-header-mobile-nav-menu-option
                                             key={navSubItem.id}