@salesforcedevs/dx-components 1.2.18-lightdom3 → 1.2.20-lightdom-6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.2.18-lightdom3",
+    "version": "1.2.20-lightdom-6",
     "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,9 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
-            <slot onslotchange={onSlotChange}></slot>
+        <span if:false={loading} class="button-content">
+            {buttonText}
+            <slot></slot>
         </span>
         <dx-icon
             if:true={showIcon}
@@ -29,8 +30,9 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
-            <slot onslotchange={onSlotChange}></slot>
+        <span if:false={loading} class="button-content">
+            {buttonText}
+            <slot></slot>
         </span>
         <dx-icon
             if:true={showIcon}

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

@@ -1,9 +1,8 @@
-@import "dxHelpers/reset";
-
 :host {
     width: min-content;
     font-size: inherit;
 
+    --dx-c-button-background-color: transparent;
     --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);

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";
@@ -23,6 +24,7 @@ export default class Button extends LightningElement {
     @api font: "display" | "sans" = "display";
     @api name?: string;
     @api value?: any;
+    @api buttonText?: string;
 
     // button props
     @api type: "submit" | "reset" | "button" = "button";
@@ -34,13 +36,17 @@ 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;
+    _isSlotEmpty: boolean = true;
+
+    renderedCallback(): void {
+        this._isSlotEmpty = this.isSlotEmpty();
+    }
 
     private get showIcon(): boolean {
         return !!this.iconSymbol && !this.loading;
@@ -55,14 +61,16 @@ 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(".button-content")?.childElementCount &&
+            !this.querySelector(".button-content")?.textContent
+        );
     }
 }

package/src/modules/dx/cardCallout/cardCallout.css

@@ -1,19 +1,57 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
+.card-callout {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+/* in the callout card's case it needs to be subservient to the other items in the grid */
+.dx-card-base_override-width {
+    height: 100% !important;
+    min-height: unset !important;
+}
+
+/* title */
+
+.dx-text-heading-3 {
+    color: inherit;
+    margin-bottom: var(--dx-g-spacing-3xl);
+    overflow-wrap: hyphenate-word;
+    hyphens: overflow;
+}
+
+/* label */
 
-dx-card-callout dx-icon {
+.dx-text-button-light {
+    color: inherit;
+    margin-top: auto;
+}
+
+/* callout arrow */
+
+dx-icon {
     display: inline;
     color: inherit;
     margin-left: var(--dx-g-spacing-sm);
 }
 
-dx-card-callout dx-icon svg {
+dx-icon::part(svg) {
     transition: var(--dx-g-transition-transform-2x);
 }
 
-.card-callout:hover dx-icon svg {
+.card-callout:hover dx-icon::part(svg) {
     transform: translate(var(--dx-g-spacing-xs));
 }
 
-.card-callout:active dx-icon svg {
+.card-callout:active dx-icon::part(svg) {
     transform: translate(var(--dx-g-spacing-2xs));
-}
+}
+
+@media screen and (max-width: 1024px) {
+    .dx-text-heading-3 {
+        margin-bottom: var(--dx-g-spacing-xl);
+    }
+}

package/src/modules/dx/cardCallout/cardCallout.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode='light'>
+<template>
     <a
         class={className}
         href={href}

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -6,8 +6,6 @@ import { track } from "dxUtils/analytics";
 export const ANALYTICS_EVENT_NAME = "custEv_ctaLinkClick";
 
 export default class CardCallout extends LightningElement {
-    static renderMode = 'light';
-    
     @api backgroundColor: string = "indigo-vibrant-40";
     @api color: string = "white";
     @api href!: string;

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,7 +9,21 @@ dx-card-title {
     --dx-c-card-title-icon-size: 22px;
 }
 
-dx-card-title dx-icon {
+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);
 
     display: inline-flex;
@@ -15,7 +32,12 @@ dx-card-title 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