@salesforcedevs/dx-components 1.2.18-lightdom2 → 1.2.19-lightdom

package/package.json

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

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

@@ -11,4 +11,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 lwc:render-mode="light">
     <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 class="info-container"></div>
         </div>
     </div>
 </template>

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

@@ -2,7 +2,7 @@ import { LightningElement, api } from "lwc";
 import { setContainerInnerHtml } from "dxUtils/lwc";
 
 export default class Banner extends LightningElement {
-    static renderMode = 'light';
+    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>';

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

@@ -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/cardCallout/cardCallout.css

@@ -1,57 +1,17 @@
-@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-text-button-light {
-    color: inherit;
-    margin-top: auto;
-}
-
-/* callout arrow */
-
-dx-icon {
+dx-card-callout dx-icon {
     display: inline;
     color: inherit;
     margin-left: var(--dx-g-spacing-sm);
 }
 
-dx-icon::part(svg) {
+dx-card-callout dx-icon svg {
     transition: var(--dx-g-transition-transform-2x);
 }
 
-.card-callout:hover dx-icon::part(svg) {
+.card-callout:hover dx-icon svg {
     transform: translate(var(--dx-g-spacing-xs));
 }
 
-.card-callout:active dx-icon::part(svg) {
+.card-callout:active dx-icon 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>
+<template lwc:render-mode="light">
     <a
         class={className}
         href={href}

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

@@ -0,0 +1,45 @@
+:host {
+    display: block;
+
+    --dx-g-card-border: 1px solid var(--dx-g-gray-90);
+    --dx-g-card-border-radius: 16px;
+    --dx-g-card-item-spacing: 12px;
+    --dx-g-card-img-spacing: 20px;
+    --dx-c-body-max-lines: 6;
+}
+
+.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-text-button-light {
+    color: inherit;
+    margin-top: auto;
+}
+
+/* callout arrow */
+
+@media screen and (max-width: 1024px) {
+    .dx-text-heading-3 {
+        margin-bottom: var(--dx-g-spacing-xl);
+    }
+}

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

@@ -6,6 +6,8 @@ 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.html

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

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

@@ -2,7 +2,7 @@ import { LightningElement, api } from "lwc";
 import cx from "classnames";
 
 export default class CardPodcastEpisode extends LightningElement {
-    static renderMode = 'light';
+    static renderMode = "light";
     @api body!: string;
     @api datetime!: string;
     @api dateTime?: string | null = null;

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

@@ -6,7 +6,7 @@ dx-card-title {
     --dx-c-card-title-icon-size: 22px;
 }
 
-dx-icon {
+dx-card-title dx-icon {
     --dx-c-icon-size: var(--dx-c-card-title-icon-size);
 
     display: inline-flex;
@@ -18,4 +18,4 @@ dx-icon {
     dx-icon {
         --dx-c-card-title-icon-size: 20px;
     }
-}
+}

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

@@ -1,16 +1,20 @@
-<template lwc:render-mode='light'>
+<template lwc:render-mode="light">
     <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,7 @@
 import { LightningElement, api } from "lwc";
 
 export default class CardTitle extends LightningElement {
-    static renderMode = 'light';
+    static renderMode = "light";
     @api href!: string;
     @api target?: string | null = null;
     @api title!: string;

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

@@ -0,0 +1,169 @@
+:host {
+    display: block;
+}
+
+.container {
+    --error-color: var(--dx-g-red-vibrant-50);
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.checkbox-label,
+input {
+    cursor: pointer;
+}
+
+label {
+    display: var(--dx-c-checkbox-display, flex);
+    align-items: var(--dx-c-checkbox-align-label, flex-start);
+}
+
+input {
+    flex-shrink: 0;
+    margin: 0;
+}
+
+.checkbox-label {
+    line-height: var(--dx-c-checkbox-text-line-height, 20px);
+    font-size: var(--dx-c-checkbox-font-size, --dx-g-text-base);
+    transform: translateY(-2px);
+    padding-left: 12px;
+}
+
+.checkbox-label::first-letter {
+    text-transform: uppercase;
+}
+
+.checkbox-error {
+    opacity: 0;
+    margin-top: var(--dx-g-spacing-xs);
+    user-select: none;
+}
+
+input:disabled {
+    cursor: not-allowed;
+    opacity: 0.9;
+}
+
+input:disabled + .checkbox-label {
+    cursor: not-allowed;
+    color: var(--sds-g-gray-9);
+}
+
+.container.show-error .checkbox-error {
+    opacity: 1;
+    user-select: auto;
+}
+
+/* adapted from https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ */
+@supports (-webkit-appearance: none) or (-moz-appearance: none) {
+    input {
+        --active-color: var(--dx-g-blue-vibrant-50);
+        --active-inner-color: #fff;
+        --focus-shadow: 1px var(--dx-g-blue-vibrant-80);
+        --border-color: var(--sds-g-gray-5);
+        --border-color-hover: var(--sds-g-gray-6);
+        --background: #fff;
+        --disabled-color: var(--sds-g-gray-4);
+        --disabled-inner-color: var(--dx-g-gray-60);
+        --size: var(--dx-g-spacing-md);
+
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        height: var(--size);
+        width: var(--size);
+        outline: none;
+        display: inline-block;
+        vertical-align: top;
+        position: relative;
+        cursor: pointer;
+        border: 1px solid var(--border-color-override, var(--border-color));
+        background: var(--background-override, var(--background));
+        transition: var(--dx-g-transition-box-shadow-1x),
+            var(--dx-g-transition-hue-1x);
+    }
+
+    input::after {
+        content: "";
+        display: block;
+        left: 0;
+        top: 0;
+        position: absolute;
+        opacity: var(--opacity, 0);
+        transition: transform var(--transition-duration-transform, 0.3s)
+                var(--transition-easing-transorm, ease),
+            opacity var(--transition-duration-opacity, 0.2s);
+    }
+
+    input[type="checkbox"] {
+        border-radius: 2px;
+    }
+
+    input[type="radio"] {
+        border-radius: 50%;
+    }
+
+    input:disabled {
+        --background-override: var(--disabled-color);
+    }
+
+    input:focus {
+        box-shadow: 0 0 0 var(--focus-shadow);
+    }
+
+    input:checked {
+        --opacity: 1;
+        --transition-duration-opacity: 0.3s;
+        --transition-duration-transform: 0.6s;
+        --transition-easing-transorm: cubic-bezier(0.2, 0.85, 0.32, 1.2);
+    }
+
+    input:disabled:checked {
+        --border-color-override: var(--border-color);
+    }
+
+    input:hover:not(:disabled) {
+        --border-color-override: var(--border-color-hover);
+    }
+
+    input[type="checkbox"]::after {
+        --checkbox-width: 4px;
+        --checkbox-height: 8px;
+
+        width: var(--checkbox-width);
+        height: var(--checkbox-height);
+        border: 2px solid var(--active-color);
+        border-top: 0;
+        border-left: 0;
+        left: calc(50% - var(--checkbox-width) / 2);
+        top: calc(50% - var(--checkbox-height) / 2);
+        transform: rotate(var(--checkbox-rotation, 20deg));
+    }
+
+    input[type="checkbox"]:checked {
+        --checkbox-rotation: 43deg;
+    }
+
+    input[type="radio"]::after {
+        --opacity: 0;
+
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--active-color);
+        margin: 3px;
+        transition: var(--dx-g-transition-hue-1x);
+    }
+
+    input:checked[type="radio"]::after {
+        --opacity: 1;
+    }
+
+    .container.show-error input {
+        --border-color-override: var(--error-color) !important;
+
+        box-shadow: 0 0 0 1px var(--error-color) !important;
+    }
+}

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

@@ -1,4 +1,3 @@
-
 dx-dropdown dx-button {
     --dx-c-button-primary-color: var(--button-primary-color);
     --dx-c-button-primary-color-hover: var(--button-primary-color-hover);

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,7 +13,7 @@
         width={width}
     >
         <div slot="control">
-            <slot></slot>            
+            <slot></slot>
         </div>
         <div
             class="menu_list"

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/header/header.css

@@ -3,9 +3,10 @@
 @import "dxHelpers/reset";
 @import "dxHelpers/card";
 
-dx-header { /* TODO: these variables definitely aren't getting picked up correctly */
+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.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

@@ -13,4 +13,4 @@ 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);
-}
+}

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

@@ -1,4 +1,4 @@
-<template lwc:render-mode='light'>
+<template lwc:render-mode="light">
     <nav
         aria-label="Navigation Menu"
         class={className}
@@ -6,7 +6,10 @@
         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 +41,21 @@
                             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}

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

@@ -139,4 +139,4 @@
     visibility: hidden;
     transform: translateY(-16px);
     pointer-events: none;
-}
+}

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

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

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

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

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

@@ -22,7 +22,7 @@ nav {
     .nav-list-item-nav-menu {
         display: flex;
     }
-    
+
     dx-dropdown {
         display: none;
     }

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

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
 import { TabVariant, OptionWithNested } from "typings/custom";
 export default class HeaderNav extends LightningElement {
-    static renderMode = 'light';
-    
+    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,3 +1,3 @@
 dx-header-search {
     --toggle-width: var(--dx-g-spacing-5xl);
-}
+}

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

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

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

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

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

@@ -1,9 +1,10 @@
 dx-icon {
     display: block;
+
     --dx-c-icon-color: currentColor;
 }
 
-svg {
+dx-icon svg {
     display: inherit;
     fill: var(--dx-c-icon-color);
     height: var(--dx-c-icon-size);

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

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

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

@@ -14,8 +14,8 @@ const sizeMap = {
 };
 
 export default class Icon extends LightningElement {
-    static renderMode = 'light';
-    
+    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 lwc:render-mode='light'>
+<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.ts

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

package/src/modules/dx/relativeDateTime/relativeDateTime.html

@@ -1,3 +1,3 @@
-<template lwc:render-mode='light'>
+<template lwc:render-mode="light">
     <time title={original}>{value}</time>
 </template>

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

@@ -1,3 +1,3 @@
 time {
     font-family: var(--dx-g-font-display);
-}
+}

package/src/modules/dx/relativeDateTime/relativeDateTime.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 
 export default class RelativeDateTime extends LightningElement {
-    static renderMode = 'light';
+    static renderMode = "light";
     @api messageWhenHoursPast: String = "";
     @api messageWhenDaysPast: String = "";
     @api messageWhenWeeksPast: String = "";

package/src/modules/dx/skipNavLink/skipNavLink.html

@@ -1,3 +1,3 @@
-<template lwc:render-mode='light'>
+<template lwc:render-mode="light">
     <a class="dx-text-button-light" href="#maincontent">Skip Navigation</a>
 </template>

package/src/modules/dx/skipNavLink/skipNavLink.ts

@@ -1,6 +1,5 @@
 import { LightningElement } from "lwc";
 
 export default class SkipNavLink extends LightningElement {
-    static renderMode = 'light';
-
+    static renderMode = "light";
 }

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

@@ -1,5 +1,6 @@
 /* Code generated by scripts/postinstall.js DO NOT EDIT*/
 
+
 /* -------------------------------------------------------------------
   Microtip
 
@@ -15,251 +16,254 @@
   3. Position Modifiers
 --------------------------------------------------------------------*/
 
+
 /* ------------------------------------------------
   [1] Base Styles
 -------------------------------------------------*/
 
 [aria-label][role~="tooltip"] {
-    position: relative;
+  position: relative;
 }
 
 [aria-label][role~="tooltip"]::before,
 [aria-label][role~="tooltip"]::after {
-    transform: translate3d(0, 0, 0);
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    will-change: transform;
-    opacity: 0;
-    pointer-events: none;
-    transition: all var(--microtip-transition-duration, 0.18s)
-        var(--microtip-transition-easing, ease-in-out)
-        var(--microtip-transition-delay, 0s);
-    position: absolute;
-    box-sizing: border-box;
-    z-index: 10;
-    transform-origin: top;
+  transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: transform;
+  opacity: 0;
+  pointer-events: none;
+  transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
+  position: absolute;
+  box-sizing: border-box;
+  z-index: 10;
+  transform-origin: top;
 }
 
 [aria-label][role~="tooltip"]::before {
-    background-size: 100% auto !important;
-    content: "";
+  background-size: 100% auto !important;
+  content: "";
 }
 
 [aria-label][role~="tooltip"]::after {
-    background: rgba(17, 17, 17, 0.9);
-    border-radius: 4px;
-    color: #ffffff;
-    content: attr(aria-label);
-    font-size: var(--microtip-font-size, 13px);
-    font-weight: var(--microtip-font-weight, normal);
-    text-transform: var(--microtip-text-transform, none);
-    padding: 0.5em 1em;
-    white-space: nowrap;
-    box-sizing: content-box;
+  background: rgba(17, 17, 17, .9);
+  border-radius: 4px;
+  color: #ffffff;
+  content: attr(aria-label);
+  font-size: var(--microtip-font-size, 13px);
+  font-weight: var(--microtip-font-weight, normal);
+  text-transform: var(--microtip-text-transform, none);
+  padding: .5em 1em;
+  white-space: nowrap;
+  box-sizing: content-box;
 }
 
 [aria-label][role~="tooltip"]:hover::before,
 [aria-label][role~="tooltip"]:hover::after,
 [aria-label][role~="tooltip"]:focus::before,
 [aria-label][role~="tooltip"]:focus::after {
-    opacity: 1;
-    pointer-events: auto;
+  opacity: 1;
+  pointer-events: auto;
 }
 
+
+
 /* ------------------------------------------------
   [2] Position Modifiers
 -------------------------------------------------*/
 
 [role~="tooltip"][data-microtip-position|="top"]::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%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%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;
-    height: 6px;
-    width: 18px;
-    margin-bottom: 5px;
+  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%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%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;
+  height: 6px;
+  width: 18px;
+  margin-bottom: 5px;
 }
 
 [role~="tooltip"][data-microtip-position|="top"]::after {
-    margin-bottom: 11px;
+  margin-bottom: 11px;
 }
 
 [role~="tooltip"][data-microtip-position|="top"]::before {
-    transform: translate3d(-50%, 0, 0);
-    bottom: 100%;
-    left: 50%;
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
 }
 
 [role~="tooltip"][data-microtip-position|="top"]:hover::before {
-    transform: translate3d(-50%, -5px, 0);
+  transform: translate3d(-50%, -5px, 0);
 }
 
 [role~="tooltip"][data-microtip-position|="top"]::after {
-    transform: translate3d(-50%, 0, 0);
-    bottom: 100%;
-    left: 50%;
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
 }
 
 [role~="tooltip"][data-microtip-position="top"]:hover::after {
-    transform: translate3d(-50%, -5px, 0);
+  transform: translate3d(-50%, -5px, 0);
 }
 
 /* ------------------------------------------------
   [2.1] Top Left
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-position="top-left"]::after {
-    transform: translate3d(calc(-100% + 16px), 0, 0);
-    bottom: 100%;
+  transform: translate3d(calc(-100% + 16px), 0, 0);
+  bottom: 100%;
 }
 
 [role~="tooltip"][data-microtip-position="top-left"]:hover::after {
-    transform: translate3d(calc(-100% + 16px), -5px, 0);
+  transform: translate3d(calc(-100% + 16px), -5px, 0);
 }
 
+
 /* ------------------------------------------------
   [2.2] Top Right
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-position="top-right"]::after {
-    transform: translate3d(calc(0% + -16px), 0, 0);
-    bottom: 100%;
+  transform: translate3d(calc(0% + -16px), 0, 0);
+  bottom: 100%;
 }
 
 [role~="tooltip"][data-microtip-position="top-right"]:hover::after {
-    transform: translate3d(calc(0% + -16px), -5px, 0);
+  transform: translate3d(calc(0% + -16px), -5px, 0);
 }
 
+
 /* ------------------------------------------------
   [2.3] Bottom
 -------------------------------------------------*/
 [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%2817,%2017,%2017,%200.9%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;
-    height: 6px;
-    width: 18px;
-    margin-top: 5px;
-    margin-bottom: 0;
+  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%2817,%2017,%2017,%200.9%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;
+  height: 6px;
+  width: 18px;
+  margin-top: 5px;
+  margin-bottom: 0;
 }
 
 [role~="tooltip"][data-microtip-position|="bottom"]::after {
-    margin-top: 11px;
+  margin-top: 11px;
 }
 
 [role~="tooltip"][data-microtip-position|="bottom"]::before {
-    transform: translate3d(-50%, -10px, 0);
-    bottom: auto;
-    left: 50%;
-    top: 100%;
+  transform: translate3d(-50%, -10px, 0);
+  bottom: auto;
+  left: 50%;
+  top: 100%;
 }
 
 [role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
-    transform: translate3d(-50%, 0, 0);
+  transform: translate3d(-50%, 0, 0);
 }
 
 [role~="tooltip"][data-microtip-position|="bottom"]::after {
-    transform: translate3d(-50%, -10px, 0);
-    top: 100%;
-    left: 50%;
+  transform: translate3d(-50%, -10px, 0);
+  top: 100%;
+  left: 50%;
 }
 
 [role~="tooltip"][data-microtip-position="bottom"]:hover::after {
-    transform: translate3d(-50%, 0, 0);
+  transform: translate3d(-50%, 0, 0);
 }
 
+
 /* ------------------------------------------------
   [2.4] Bottom Left
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-position="bottom-left"]::after {
-    transform: translate3d(calc(-100% + 16px), -10px, 0);
-    top: 100%;
+  transform: translate3d(calc(-100% + 16px), -10px, 0);
+  top: 100%;
 }
 
 [role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
-    transform: translate3d(calc(-100% + 16px), 0, 0);
+  transform: translate3d(calc(-100% + 16px), 0, 0);
 }
 
+
 /* ------------------------------------------------
   [2.5] Bottom Right
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-position="bottom-right"]::after {
-    transform: translate3d(calc(0% + -16px), -10px, 0);
-    top: 100%;
+  transform: translate3d(calc(0% + -16px), -10px, 0);
+  top: 100%;
 }
 
 [role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
-    transform: translate3d(calc(0% + -16px), 0, 0);
+  transform: translate3d(calc(0% + -16px), 0, 0);
 }
 
+
 /* ------------------------------------------------
   [2.6] Left
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-position="left"]::before,
 [role~="tooltip"][data-microtip-position="left"]::after {
-    bottom: auto;
-    left: auto;
-    right: 100%;
-    top: 50%;
-    transform: translate3d(10px, -50%, 0);
+  bottom: auto;
+  left: auto;
+  right: 100%;
+  top: 50%;
+  transform: translate3d(10px, -50%, 0);
 }
 
 [role~="tooltip"][data-microtip-position="left"]::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%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;
-    height: 18px;
-    width: 6px;
-    margin-right: 5px;
-    margin-bottom: 0;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%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;
+  height: 18px;
+  width: 6px;
+  margin-right: 5px;
+  margin-bottom: 0;
 }
 
 [role~="tooltip"][data-microtip-position="left"]::after {
-    margin-right: 11px;
+  margin-right: 11px;
 }
 
 [role~="tooltip"][data-microtip-position="left"]:hover::before,
 [role~="tooltip"][data-microtip-position="left"]:hover::after {
-    transform: translate3d(0, -50%, 0);
+  transform: translate3d(0, -50%, 0);
 }
 
+
 /* ------------------------------------------------
   [2.7] Right
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-position="right"]::before,
 [role~="tooltip"][data-microtip-position="right"]::after {
-    bottom: auto;
-    left: 100%;
-    top: 50%;
-    transform: translate3d(-10px, -50%, 0);
+  bottom: auto;
+  left: 100%;
+  top: 50%;
+  transform: translate3d(-10px, -50%, 0);
 }
 
 [role~="tooltip"][data-microtip-position="right"]::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%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;
-    height: 18px;
-    width: 6px;
-    margin-bottom: 0;
-    margin-left: 5px;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%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;
+  height: 18px;
+  width: 6px;
+  margin-bottom: 0;
+  margin-left: 5px;
 }
 
 [role~="tooltip"][data-microtip-position="right"]::after {
-    margin-left: 11px;
+  margin-left: 11px;
 }
 
 [role~="tooltip"][data-microtip-position="right"]:hover::before,
 [role~="tooltip"][data-microtip-position="right"]:hover::after {
-    transform: translate3d(0, -50%, 0);
+  transform: translate3d(0, -50%, 0);
 }
 
 /* ------------------------------------------------
   [3] Size
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-size="small"]::after {
-    white-space: initial;
-    width: 80px;
+  white-space: initial;
+  width: 80px;
 }
 
 [role~="tooltip"][data-microtip-size="medium"]::after {
-    white-space: initial;
-    width: 150px;
+  white-space: initial;
+  width: 150px;
 }
 
 [role~="tooltip"][data-microtip-size="large"]::after {
-    white-space: initial;
-    width: 260px;
+  white-space: initial;
+  width: 260px;
 }

package/src/modules/dxHelpers/card/card.css

@@ -2,7 +2,7 @@
 
 /* main card base */
 
-:host { /* TODO: remove this after it has been completely supplanted by .base-card */
+:host {
     display: block;
 
     --dx-g-card-border: 1px solid var(--dx-g-gray-90);
@@ -12,7 +12,7 @@
     --dx-c-body-max-lines: 6;
 }
 
-.base-card { 
+.base-card {
     display: block;
 
     --dx-g-card-border: 1px solid var(--dx-g-gray-90);