@salesforcedevs/dx-components 1.2.18-canary.0 → 1.2.18-lightdom

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

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

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

@@ -0,0 +1,142 @@
+.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 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;
+}
+
+.nav-menu.state-closed {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-16px);
+    pointer-events: none;
+}

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts

@@ -4,6 +4,8 @@ import { OptionWithNested } from "typings/custom";
 import { deepmapOptions } from "dxUtils/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
+    static renderMode = 'light';
+
     @api open: boolean = false;
     @api value: string | null = null;
     @api pathname: string | null = null;
@@ -62,7 +64,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
 
     renderedCallback() {
         if (!this.navElement) {
-            this.navElement = this.template.querySelector("nav");
+            this.navElement = this.querySelector("nav");
         }
         if (this.open && !this.wasOpen && this.value) {
             this.scrollToAccordianSection();
@@ -73,10 +75,10 @@ export default class HeaderMobileNavMenu extends LightningElement {
     }
 
     private scrollToAccordianSection() {
-        const element = this.template.querySelector(
+        const element = this.querySelector(
             `li[data-id="${this.value}"]`
         );
-        const container = this.template.querySelector(".nav-menu");
+        const container = this.querySelector(".nav-menu");
         if (element && container) {
             container.scrollTop = element.offsetTop - 8;
         }

package/src/modules/dx/headerNav/headerNav.html

@@ -1,7 +1,7 @@
-<template>
+<template lwc:render-mode='light'>
     <nav role="navigation" aria-label={ariaLabel}>
         <ul class="nav-list">
-            <template for:each={navItems} for:item="navItem">
+            <template for:each={navItems} for:item="navItem" lwc:render-mode='light'>
                 <li key={navItem.id}>
                     <dx-tab
                         if:false={navItem.options}

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

@@ -1,5 +1,3 @@
-@import "dxHelpers/reset";
-
 a {
     text-decoration: none;
 }
@@ -24,7 +22,7 @@ nav {
     .nav-list-item-nav-menu {
         display: flex;
     }
-
+    
     dx-dropdown {
         display: none;
     }

package/src/modules/dx/headerNav/headerNav.ts

@@ -1,6 +1,8 @@
 import { LightningElement, api } from "lwc";
 import { TabVariant, OptionWithNested } from "typings/custom";
 export default class HeaderNav extends LightningElement {
+    static renderMode = 'light';
+    
     @api pathname: string | null = null;
     @api variant: TabVariant = "default";
     @api ariaLabel: string = "Primary Navigation";

package/src/modules/dx/headerSearch/headerSearch.css

@@ -1,62 +1,3 @@
-@import "dxHelpers/reset";
-
-/* DESKTOP */
-
-:host {
+dx-header-search {
     --toggle-width: var(--dx-g-spacing-5xl);
-}
-
-.desktop_search-container {
-    position: relative;
-    display: flex;
-    height: var(--dx-g-spacing-xl);
-    font-size: var(--dx-g-text-sm);
-    font-family: var(--dx-g-font-sans);
-    color: var(--dx-g-gray-50);
-}
-
-.desktop_search-container dx-input {
-    --dx-c-input-width: calc(
-        var(--dx-c-header-search-width) - var(--toggle-width)
-    );
-}
-
-/* MOBILE */
-
-.mobile_search-button {
-    position: relative;
-    z-index: 3;
-}
-
-.mobile_search-dropdown {
-    --dx-c-popover-border-radius: 0;
-    --dx-c-popover-border: none;
-}
-
-.mobile_search-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    transition: var(--dx-g-transition-hue-1x);
-    opacity: 0;
-    pointer-events: none;
-
-    --dx-c-input-border: none;
-    --dx-c-input-border-radius: 0;
-    --dx-c-input-border-active: none;
-    --dx-c-input-icon-color: var(--dx-g-blue-vibrant-20);
-    --dx-c-input-padding: 0 var(--dx-g-spacing-4xl) 0 var(--dx-g-spacing-md);
-    --dx-c-input-background: var(--dx-g-brand-current-color-background-2);
-    --dx-c-input-background-active: var(
-        --dx-g-brand-current-color-background-2
-    );
-    --dx-c-input-height: 100% !important;
-    --dx-c-input-width: 100%;
-}
-
-.mobile_search-input.state-open {
-    opacity: 1;
-    pointer-events: auto;
-}
+}

package/src/modules/dx/headerSearch/headerSearch.html

@@ -1,7 +1,7 @@
-<template>
+<template lwc:render-mode='light'>
     <div class={className} role="search" aria-label="Records Search">
         <!-- MOBILE -->
-        <template if:true={mobile}>
+        <template if:true={mobile} lwc:render-mode='light'>
             <dx-dropdown
                 aria-label="Record Type"
                 class="mobile_search-dropdown"
@@ -37,7 +37,7 @@
         </template>
 
         <!-- DESKTOP -->
-        <template if:false={mobile}>
+        <template if:false={mobile} lwc:render-mode='light'>
             <dx-dropdown
                 options={suggestions}
                 open={isDropdownOpen}

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

@@ -0,0 +1,56 @@
+/* DESKTOP */
+
+.desktop_search-container {
+    position: relative;
+    display: flex;
+    height: var(--dx-g-spacing-xl);
+    font-size: var(--dx-g-text-sm);
+    font-family: var(--dx-g-font-sans);
+    color: var(--dx-g-gray-50);
+}
+
+.desktop_search-container dx-input {
+    --dx-c-input-width: calc(
+        var(--dx-c-header-search-width) - var(--toggle-width)
+    );
+}
+
+/* MOBILE */
+
+.mobile_search-button {
+    position: relative;
+    z-index: 3;
+}
+
+.mobile_search-dropdown {
+    --dx-c-popover-border-radius: 0;
+    --dx-c-popover-border: none;
+}
+
+.mobile_search-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    transition: var(--dx-g-transition-hue-1x);
+    opacity: 0;
+    pointer-events: none;
+
+    --dx-c-input-border: none;
+    --dx-c-input-border-radius: 0;
+    --dx-c-input-border-active: none;
+    --dx-c-input-icon-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-input-padding: 0 var(--dx-g-spacing-4xl) 0 var(--dx-g-spacing-md);
+    --dx-c-input-background: var(--dx-g-brand-current-color-background-2);
+    --dx-c-input-background-active: var(
+        --dx-g-brand-current-color-background-2
+    );
+    --dx-c-input-height: 100% !important;
+    --dx-c-input-width: 100%;
+}
+
+.mobile_search-input.state-open {
+    opacity: 1;
+    pointer-events: auto;
+}

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -12,6 +12,8 @@ import {
 const baseSearchHref = `/search`;
 
 export default class HeaderSearch extends LightningElement {
+    static renderMode = 'light';
+    
     @api mobile!: boolean;
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;

package/src/modules/dx/icon/icon.css

@@ -1,8 +1,5 @@
-@import "dxHelpers/reset";
-
-:host {
+dx-icon {
     display: block;
-
     --dx-c-icon-color: currentColor;
 }
 

package/src/modules/dx/icon/icon.html

@@ -1,4 +1,4 @@
-<template>
+<template lwc:render-mode='light'>
     <svg
         aria-hidden="true"
         style={style}

package/src/modules/dx/icon/icon.ts

@@ -14,6 +14,8 @@ const sizeMap = {
 };
 
 export default class Icon extends LightningElement {
+    static renderMode = 'light';
+    
     @api sprite: IconSprite = "utility";
     @api size: IconSize = "small";
     @api symbol!: IconSymbol;

package/src/modules/dx/logo/logo.html

@@ -1,4 +1,4 @@
-<template>
+<template lwc:render-mode='light'>
     <a href={href} class="logo-link">
         <img src={imgSrc} alt={imgAlt} />
         <span class="dx-text-heading-7">{label}</span>

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

@@ -1,6 +1,3 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-
 :host {
     --dx-c-logo-label-color: var(--dx-g-blue-vibrant-20);
 

package/src/modules/dx/logo/logo.ts

@@ -1,8 +1,10 @@
 import { LightningElement, api } from "lwc";
 
 export default class Logo extends LightningElement {
+    static renderMode = 'light';
+    
     @api href: string = "/";
     @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
-    @api imgAlt: string = "Salesforce logo";
+    @api imgAlt: string = "Salesforce log";
     @api label!: string;
 }

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

@@ -64,22 +64,3 @@
 .popover-small {
     width: 136px;
 }
-
-.popover-arrow {
-    position: absolute;
-    background: linear-gradient(
-        315deg,
-        transparent 4px,
-        white 4px
-    ); /* make only top half of rotated square visible */
-    width: 8px;
-    height: 8px;
-    transform: rotate(45deg);
-    border: var(--popover-border);
-    border-bottom: transparent;
-    border-right: transparent;
-    box-shadow: var(--dx-g-box-shadow-lg);
-    transition: opacity 0.2s linear, transform 0.2s linear;
-    transition-delay: 0.02s;
-    z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));
-}

package/src/modules/dx/popover/popover.html

@@ -1,7 +1,6 @@
 <template>
     <slot name="control" onslotchange={onSlotChange}></slot>
     <div class={containerClassName}>
-        <div class="popover-arrow" if:true={showArrow}></div>
         <div
             class={className}
             style={style}