@salesforcedevs/dx-components 0.0.0-alpha.26 → 0.0.0-alpha.28

package/lwc.config.json

@@ -49,6 +49,7 @@
         "dx/input",
         "dx/logo",
         "dx/modal",
+        "dx/metadataBadge",
         "dx/modalDrawer",
         "dx/pagination",
         "dx/podcastHost",
@@ -72,10 +73,12 @@
         "dx/tooltip",
         "dx/tree",
         "dx/typeBadge",
-        "dx/typeBadgeGroup",
         "dx/vimeoPlayer",
         "dxBaseElements/headerBase",
         "dxBaseElements/matchMediaElement",
+        "dxConstants/brands",
+        "dxConstants/colors",
+        "dxConstants/contentTypes",
         "dxHelpers/animations",
         "dxHelpers/button",
         "dxHelpers/card",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.0.0-alpha.26",
+    "version": "0.0.0-alpha.28",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/assets/icons/salesforcebrand-sprite/svg/symbols.svg

@@ -1,5 +1,45 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol id="net-zero" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <path class="acls-1"
+            d="M44.61 39H51a2 2 0 0 0 1.71-3l-19-31a2 2 0 0 0-3.42 0l-19 31A2 2 0 0 0 13 39h6.39L11.3 51.94a2 2 0 0 0-.05 2A2 2 0 0 0 13 55h17v3a2 2 0 0 0 4 0v-3h17a2 2 0 0 0 1.75-1 2 2 0 0 0 0-2zM34 51V37a2 2 0 0 0-4 0v14H16.61l8.09-12.94a2 2 0 0 0 .05-2A2 2 0 0 0 23 35h-6.43L32 9.83 47.43 35H41a2 2 0 0 0-1.75 1 2 2 0 0 0 0 2l8.14 13z"
+            fill="#194e31" />
+        <path class="acls-1"
+            d="M32.88 19.3a2 2 0 0 0-2.75.66l-5.47 8.94a2 2 0 0 0 .66 2.75 2 2 0 0 0 1 .29 2 2 0 0 0 1.71-1L33.5 22a2 2 0 0 0-.62-2.7z"
+            fill="#194e31" />
+    </symbol>
+    <symbol id="education" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" class="aa"
+            d="M59.4 26.2c0 .8-.5 1.5-1.2 1.8l-7.7 3.4V42c0 .6-.3 1.1-.7 1.5-6 5.3-11.7 7-16.6 7-9.9 0-16.7-7-16.8-7.1-.3-.4-.5-.9-.5-1.4V31.5l-4.3-1.9v6.8l2.6 4.4c.6.9.2 2.1-.7 2.7-.3.2-.6.3-1 .3-.7 0-1.3-.4-1.7-1l-1.2-2-1.2 2c-.4.7-1 1-1.7 1-.3 0-.7-.1-1-.3-1-.5-1.3-1.8-.7-2.7l2.6-4.4v-8.7c-.5-.4-.7-.9-.7-1.5 0-.8.5-1.5 1.2-1.8l24.2-10.7c.5-.2 1.1-.2 1.6 0l24.3 10.7c.7.3 1.2 1 1.2 1.8zm-6.9 0l-19.3-8.5-19.3 8.5 4 1.7 15.3 6.7 15.3-6.7zm-6.1 14.9v-7.9l-12.5 5.5c-.3.1-.5.2-.8.2-.3 0-.5-.1-.8-.2l-12.5-5.5v8c2.5 2.3 13.5 10.8 26.7-.1z"
+            fill="#481a54" />
+    </symbol>
+    <symbol id="automotive" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <path class="aa"
+            d="M51.4 14.5c1.3 2 2.3 4.4 3.1 7l-5.7 3.3-10.1-3.7h-.1c-.6-2.5-1.5-4.8-2.6-6.9l9.5 2.7c.1.1.3.1.5.1.3 0 .6-.1.9-.2zM50 40.8l5.7-3.1c-.5 2.7-1.2 5.4-2.1 7.7l-7.5 2.5-8-3.2c.7-2.4 1.3-5 1.6-7.7l8.5 3.8c.2.1.5.2.8.2.3 0 .7-.1 1-.2zM50 28.7l5.4-3c.3 2.1.5 4.2.5 6.4v.8l-7.1 3.9-8.9-4.1V32c0-2.2-.1-4.3-.4-6.3l8.8 3.2c.2.1.5.1.7.1.4 0 .7-.1 1-.3zM22 40c-2.2 0-4-3.6-4-8s1.8-8 4-8 4 3.6 4 8-1.8 8-4 8zM32.4 9c-.3-.3-.6-.7-1-1H42c2.5 0 4.9 1.2 6.8 3.3l-3.1 1.6-13.2-3.8-.1-.1zM46.7 52l4.1-1.4c-2.4 3.4-5.5 5.5-8.8 5.5H31.4c2.1-2 3.9-4.5 5.3-7.6l8.6 3.4c.2.1.4.1.7.1h.7z"
+            fill="none" />
+        <path class="aa"
+            d="M22 56C14.4 56 8 45 8 32S14.4 8 22 8s14 11 14 24-6.4 24-14 24zm-8-24c0-6.7 3.5-12 8-12s8 5.3 8 12-3.5 12-8 12-8-5.3-8-12z"
+            fill="none" />
+        <path fill-rule="evenodd" class="ab"
+            d="M22 44c-4.5 0-8-5.3-8-12s3.5-12 8-12 8 5.3 8 12-3.5 12-8 12zm0-4c1.9 0 4-3.4 4-8s-2.1-8-4-8-4 3.4-4 8 2.1 8 4 8z"
+            fill="#481a54" />
+        <path fill-rule="evenodd" class="ab"
+            d="M60 32c0 15.7-7.9 28-18 28H22C11.9 60 4 47.7 4 32S11.9 4 22 4h20c10.1 0 18 12.3 18 28zm-4.6 5.7l-5.6 3.1c-.3.1-.7.2-1 .2-.3 0-.5-.1-.8-.2L39.6 37c-.3 2.7-.8 5.3-1.6 7.7l8 3.2 7.5-2.5c1-2.3 1.7-5 1.9-7.7zm.1-12.1L50 28.7c-.3.2-.6.3-1 .3-.2 0-.5 0-.6-.1l-8.8-3.2c.2 2 .4 4.1.4 6.3v.7l8.9 4 7.1-3.9V32c0-2.2-.2-4.3-.5-6.4zm-.9-4.1c-.8-2.6-1.8-5-3.1-7l-4.6 2.3c-.3.1-.6.2-.9.2-.2 0-.4 0-.6-.1L36 14.2c1 2.1 1.9 4.4 2.6 6.9h.1l10.1 3.7zM42 8.1H31.4c.3.3.7.6 1 1h.1l13.3 3.8 3.1-1.6C46.9 9.2 44.5 8 42 8zM22 56c7.6 0 14-11 14-24S29.6 8 22 8 8 19 8 32s6.4 24 14 24zm28.7-5.5l-4.1 1.4c-.2.1-.4.1-.6.1-.3 0-.5 0-.7-.2l-8.6-3.4c-1.4 3.1-3.2 5.7-5.3 7.6H42c3.3 0 6.4-2.1 8.7-5.5z"
+            fill="#481a54" />
+    </symbol>
+    <symbol id="nonprofit" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" class="aa"
+            d="M59.5 44.4c-.3.8-.9 1.6-1.5 2.2l-8.6 8.6c-.4.3-.9.5-1.4.5-.5.1-1-.1-1.4-.5L45 53.6c-4.2 2.8-9.3 4.5-14.7 4.5h-.4C15.6 57.9 4.1 46.3 4.1 32c0-14.2 11.4-25.8 25.6-26.1h.5c14.4 0 26.1 11.7 26.1 26.1 0 1.3-.1 2.5-.3 3.7 3.3 1.5 4.8 5.3 3.5 8.7zm-4.4-.7c1.1-1 1.1-2.7 0-3.8l-.1-.1c-.5-.5-1.1-.7-1.8-.7h-.5c-.6.1-1.1.4-1.5.8l-2 2c-.4.4-.9.6-1.4.6-.5 0-1-.2-1.4-.6l-2-2c-.3-.4-.7-.6-1.1-.7-.2-.1-.5-.1-.8-.1-.7 0-1.4.3-1.9.8-1.1 1-1.1 2.7 0 3.8l5.7 5.6 1.6 1.6zm-15.2-8c0-.6.1-1.1.1-1.7h-8.1v8.2c1.4 0 2.8.2 4 .4-.4-2.8 1.2-5.7 4-6.9zm-8.1-12.5v6.7h8.1c-.1-2.9-.5-5.5-1.2-7.7-.2.1-.4.1-.6.2-1.8.5-3.9.8-6.3.8zm5.5-4.7c-1.7-3.4-3.7-5.7-5.4-7v7.8c2-.1 3.8-.4 5.4-.8zM47.4 37l.3.4.2.2.5-.5c1-1 2.2-1.7 3.6-1.9.1-.4.2-.8.2-1.2H44c0 .4-.1.8-.1 1.2 1.3.2 2.5.9 3.5 1.8zm.1-18.8c-.9.6-2.6 1.7-5 2.7.8 2.6 1.4 5.6 1.5 9.1h8.2c-.4-4.4-2.1-8.5-4.7-11.8zm-2.9-2.9c-2.2-1.9-4.7-3.4-7.5-4.3 1.4 1.6 2.8 3.6 4 6.2 1.6-.7 2.8-1.4 3.5-1.9zM31.9 52.5c1.4-1.2 3.2-3 4.7-5.7-1.4-.3-3-.5-4.7-.6zM42 50.7l-1.9-1.9q-1.5 2.5-3 4.2c1.7-.6 3.3-1.4 4.9-2.3zm-14.1-8.4V34h-7.8c.2 3.7.9 6.8 1.8 9.4 2.1-.5 4.1-.9 6-1.1zm-4.2 4.8c1.3 2.3 2.9 4 4.2 5.1v-5.9c-1.4.2-2.8.4-4.2.8zm-4 1.2c-.9.4-1.8.8-2.8 1.3 1.8 1.4 3.8 2.4 5.9 3.2-1-1.2-2.1-2.7-3.1-4.5zM27.8 30v-6.8c-2-.2-4.1-.6-6.4-1.3-.7 2.3-1.2 5-1.3 8.1zm-5-18.9c-2.6 1-5 2.3-7 4.1 1.1.6 2.2 1.1 3.3 1.6 1.1-2.3 2.4-4.1 3.7-5.7zM13 18.2c-2.7 3.3-4.4 7.4-4.8 11.8h7.9c.2-3.6.8-6.7 1.6-9.4-1.6-.7-3.2-1.5-4.7-2.4zM8.2 34c.4 4.9 2.5 9.3 5.6 12.8 1.4-.8 2.9-1.5 4.3-2.1-1-2.9-1.8-6.4-2-10.7zm19.7-22.3c-1.6 1.4-3.5 3.4-5 6.5 1.8.5 3.4.8 5 1z"
+            fill="#481a54" />
+    </symbol>
+    <symbol id="public-sector" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <path class="aa"
+            d="M41.8 28.5v18h-3.2c-.1-1.1-.4-2.2-.8-3.2V28.5zM45.8 28.5h4v18h-4zM33.8 30.2v7.2c-1.2-1.1-2.5-2.1-4-2.8 1.7-1.1 3.1-2.7 4-4.4zM51.8 50.5h2v4H38.9v-4h4.9zM30.1 13.8c1.8-.8 3.7-1.3 5.8-1.3 7.1 0 12.9 5.2 13.9 12H35.4v-.4c0-4.3-2.1-8-5.3-10.3z"
+            fill="none" />
+        <path fill-rule="evenodd" class="ab"
+            d="M57.9 48.5v8c0 1.1-.9 2-2 2H8.2c-1.1 0-2-.9-2-2V49c0-6.3 3.7-11.8 9-14.4-3.3-2.3-5.5-6.2-5.5-10.5 0-7.1 5.7-12.8 12.8-12.8 1.1 0 2.1.2 3.1.4 2.4-1.7 5.2-2.8 8.2-3.1V7.5c0-1.1.9-2 2-2s2 .9 2 2v1.1c8.3.9 15 7.6 15.9 15.9h2.1c1.1 0 2 .9 2 2s-.9 2-2 2h-2v18h2c1.1 0 2 .9 2.1 2zm-16-2v-18h-4v14.8c.3 1 .6 2.1.8 3.2zm-24.1 8.1h17.1v-5.5c0-.9-.1-1.7-.3-2.5-.2-.8-.5-1.6-.8-2.4-.9-2-2.3-3.7-4-4.9-1.2-.9-2.5-1.5-4-1.9-1.1-.3-2.2-.5-3.3-.5h-.7c-1.4.1-2.8.4-4 .9-4.5 1.8-7.7 6.2-7.7 11.2v5.5h7.7zm-3-26.3c.7 1.3 1.7 2.4 3 3.2 1.2.8 2.5 1.3 4 1.4h.7q1.8 0 3.3-.6c1.6-.6 3-1.8 4-3.2.1-.1.2-.3.3-.5.7-1.2 1.1-2.5 1.2-4v-.4c0-3.5-2.1-6.5-5-7.9-1.1-.6-2.4-.9-3.8-.9h-.8c-4.4.4-7.9 4.1-7.9 8.7 0 .6.1 1.1.2 1.7.1.9.4 1.7.8 2.5zm19 9v-7.2c-1 1.8-2.3 3.4-4 4.5 1.5.7 2.8 1.7 4 2.7zm12 9.2h4v-18h-4zM30 13.8c3.2 2.3 5.3 6.1 5.3 10.3v.4h14.4c-1-6.8-6.9-12-13.9-12-2 0-4 .5-5.8 1.3zm23.8 36.7H38.9v4h14.9z"
+            fill="#481a54" />
+    </symbol>
     <symbol viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" id="analytics">
         <g id="Atoms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g id="ICONS-symbols" transform="translate(-1849.000000, -3.000000)" fill-rule="nonzero">

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

@@ -3,7 +3,7 @@ import { setContainerInnerHtml } from "dxUtils/lwc";
 
 export default class Banner extends LightningElement {
     @api bannerMarkup =
-        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
+        '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.template.querySelector(".info-container");

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

@@ -55,7 +55,6 @@
 .button.variant_inline dx-icon,
 .button.variant_inline-inherit dx-icon {
     display: inline-block;
-    transform: translate(0, -2px);
 }
 
 .button > span {
@@ -68,11 +67,6 @@
     font-family: var(--dx-g-font-display);
 }
 
-.button.font-display:not(.variant_inline):not(.variant_inline-inherit) > span {
-    /* offset accounts for display font's ghost padding */
-    margin-top: 5px;
-}
-
 .button.font-sans {
     font-family: var(--dx-g-font-sans);
 }

package/src/modules/dx/buttonToggle/buttonToggle.html

@@ -1,5 +1,6 @@
 <template>
     <button
+        aria-labelledby="label"
         class={className}
         onclick={handleMouseEvent}
         onmouseenter={handleMouseEvent}
@@ -9,7 +10,7 @@
         disabled={disabled}
     >
         <div class="label-container">
-            <span>{label}</span>
+            <span id="label">{label}</span>
             <dx-icon sprite="utility" symbol={symbol} size="small"></dx-icon>
         </div>
     </button>

package/src/modules/dx/cardEvent/cardEvent.html

@@ -44,8 +44,7 @@
                         {location}
                     </span>
                     <dx-type-badge
-                        color={brandType}
-                        type="content-type"
+                        color={typeBadgeColor}
                         value={type}
                         if:true={type}
                     ></dx-type-badge>

package/src/modules/dx/cardEvent/cardEvent.ts

@@ -36,7 +36,7 @@ export default class CardEvent extends LightningElement {
         this.isLinkHovered = false;
     }
 
-    private get brandType() {
+    private get typeBadgeColor() {
         return this.type === "Webinar" ? "green" : "red";
     }
 }

package/src/modules/dx/cardExpanded/cardExpanded.html

@@ -1,11 +1,6 @@
 <template>
     <div class={containerClass}>
-        <dx-type-badge
-            color={badgeColor}
-            type="content-type"
-            value={contentType}
-            size={badgeSize}
-        ></dx-type-badge>
+        <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
         <dx-card-title
             if:true={title}
             href={href}

package/src/modules/dx/cardExpanded/cardExpanded.ts

@@ -10,8 +10,8 @@ export default class ExpandedCard extends ArchiveCard {
     @api authorImgSrc?: string | null = null;
     @api length?: string;
 
-    private get isBlog() {
-        return this.contentType === "Blog";
+    private get isBlog(): boolean {
+        return this.contentType === "blog";
     }
 
     private get hasAuthor(): boolean {

package/src/modules/dx/cardMinimal/cardMinimal.html

@@ -3,11 +3,6 @@
         <a class="dx-text-truncate" href={href} target={target}>
             <h4>{title}</h4>
         </a>
-        <dx-type-badge
-            color={badgeColor}
-            size={badgeSize}
-            type="content-type"
-            value={contentType}
-        ></dx-type-badge>
+        <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
     </div>
 </template>

package/src/modules/dx/cardTrial/cardTrial.css

@@ -40,6 +40,7 @@ dx-card-title {
 
 dx-hr {
     --dx-c-hr-padding-horizontal: 0;
+
     width: 100%;
 }
 
@@ -99,12 +100,13 @@ dx-button {
 
 .recommended-border {
     border: 3px solid var(--dx-g-blue-vibrant-50);
+
     /* overwrite inherited border-radius */
     border-radius: 0 0 var(--dx-g-card-border-radius)
         var(--dx-g-card-border-radius) !important;
 }
 
-.recommended-border .top-text {
+.top-text .recommended-border {
     margin-top: var(--dx-g-spacing-mlg);
 }
 

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.css

@@ -33,6 +33,7 @@
 .button-cta {
     --dx-c-button-font-size: var(--dx-g-text-base);
     --dx-c-button-font-weight: var(--dx-g-font-bold);
+
     margin-top: 15px;
     width: 100%;
 }
@@ -52,6 +53,7 @@
 
 .button-close {
     --dx-c-button-background-color: white;
+
     margin-left: auto;
     pointer-events: all;
 }

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

@@ -254,12 +254,9 @@
     }
 }
 
-.custom-bg-big-moon::after {
-    background-image: url(/assets/svg/big-moon.svg);
-}
-
 .custom-bg-big-moon::after {
     content: "";
+    background-image: url(/assets/svg/big-moon.svg);
     background-position: top right;
     background-repeat: no-repeat;
     position: absolute;

package/src/modules/dx/featuresList/featuresList.css

@@ -20,5 +20,5 @@
 .icon {
     color: #3ba755;
     padding-right: var(--dx-g-spacing-md);
-    padding-top: var(--dx-g-spacing-2xs);
+    padding-top: var(--dx-g-spacing-sm);
 }

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

@@ -41,6 +41,7 @@
 
 .nav-menu.state-closed {
     opacity: 0;
+    visibility: hidden;
     transform: translateY(-16px);
     pointer-events: none;
 }

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

@@ -20,6 +20,7 @@
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     onfocus={openDropdown}
+                    onblur={onDropdownRequestClose}
                     placeholder="Search"
                     size="override"
                     type="search"
@@ -51,6 +52,7 @@
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     onfocus={openDropdown}
+                    onblur={onDropdownRequestClose}
                     placeholder="Search"
                     shortcut-key="k"
                     size="small"

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

@@ -69,6 +69,7 @@ export default class HeaderSearch extends LightningElement {
         switch (e.detail as PopoverRequestCloseType) {
             case "interact-outside":
             case "keypress-escape":
+            case "input-blur":
                 this.closeDropdown();
                 break;
             default:

package/src/modules/dx/hr/hr.css

@@ -13,7 +13,7 @@ h2 {
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
     color: var(--dx-g-blue-vibrant-20);
-    text-transform: uppercase;
+    text-transform: capitalize;
     letter-spacing: 0;
     line-height: 18px;
 }
@@ -22,7 +22,6 @@ p::before,
 h2::before,
 p::after,
 h2::after {
-    transform: translateY(-2px); /* offset for display font ghost padding */
     content: "";
     flex: 1 1;
     border-bottom: 2px solid var(--dx-g-gray-95);
@@ -42,7 +41,7 @@ h2::after {
 dx-button {
     display: flex;
     width: 100%;
-    text-transform: uppercase;
+    text-transform: capitalize;
     padding: 0 var(--dx-c-hr-padding-horizontal);
 }
 

package/src/modules/dx/imageAndLabel/imageAndLabel.css

@@ -17,7 +17,6 @@ img {
 }
 
 span {
-    margin-top: 3px;
     white-space: nowrap;
 }
 

package/src/modules/dx/input/input.ts

@@ -186,6 +186,8 @@ export default class Input extends LightningElement {
         if (this.validityOnBlur) {
             this.reportValidity();
         }
+
+        this.dispatchEvent(new CustomEvent("blur", { detail: "input-blur" }));
     }
 
     onInputChange(e: InputEvent) {

package/src/modules/dx/logo/logo.css

@@ -23,7 +23,6 @@ a:hover {
 }
 
 .logo-link > span {
-    margin-top: 3px;
     color: var(--dx-c-logo-label-color);
 }
 

package/src/modules/dx/metadataBadge/metadataBadge.css

@@ -0,0 +1,41 @@
+@import "dxHelpers/reset";
+
+.badge {
+    --background: var(--dx-g-cloud-blue-natural-90);
+    --border-radius: var(--dx-g-spacing-xs);
+    --color: var(--dx-g-blue-vibrant-20);
+    --height: var(--dx-g-spacing-lg);
+    --horizontal-spacing: var(--dx-g-spacing-sm);
+
+    color: var(--dx-c-metadata-badge-color, var(--color));
+    background: var(--dx-c-metadata-badge-background, var(--background));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--height);
+    width: min-content;
+    padding: 0 var(--horizontal-spacing);
+    border-radius: var(--border-radius);
+    font-family: var(--dx-g-font-display);
+    font-size: 10px;
+    text-align: center;
+    letter-spacing: 0.6px;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.badge.size-small {
+    --height: var(--dx-g-spacing-md);
+    --horizontal-spacing: var(--dx-g-spacing-xs);
+
+    font-size: 8px;
+    letter-spacing: 0.5px;
+}
+
+@media screen and (max-width: 768px) {
+    .badge:not(.size-small) {
+        height: var(--dx-g-spacing-lg);
+        padding: 0 var(--dx-g-spacing-sm);
+        font-size: var(--dx-g-text-2xs);
+    }
+}

package/src/modules/dx/metadataBadge/metadataBadge.html

@@ -0,0 +1,5 @@
+<template>
+    <div class={className} style={style}>
+        <span>{value}</span>
+    </div>
+</template>

package/src/modules/dx/metadataBadge/metadataBadge.ts

@@ -0,0 +1,24 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { Color, TypeBadgeSize } from "typings/custom";
+import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
+
+export default class MetadataBadge extends LightningElement {
+    @api size: TypeBadgeSize = "default";
+    @api color?: Color;
+    @api value!: string;
+
+    private get className(): string {
+        return cx("badge", `size-${this.size}`);
+    }
+
+    private get style(): string {
+        if (this.color) {
+            const variables = colorToDxColors(this.color as Color);
+            if (variables) {
+                return buildStyleColorVariables(variables);
+            }
+        }
+        return "";
+    }
+}

package/src/modules/dx/modal/modal.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={containerClass} tabindex="0">
+    <div class={containerClass} tabindex="0" role="dialog">
         <slot></slot>
     </div>
     <div

package/src/modules/dx/modal/modal.ts

@@ -27,11 +27,10 @@ export default class Modal extends LightningElement {
     }
 
     connectedCallback(): void {
-        document.addEventListener("keydown", this.handleKeyDown.bind(this));
-    }
-
-    disconnectedCallback(): void {
-        document.removeEventListener("keydown", this.handleKeyDown);
+        this.template.addEventListener(
+            "keydown",
+            this.handleKeyDown.bind(this)
+        );
     }
 
     focusFirstElement(): void {

package/src/modules/dx/modalDrawer/modalDrawer.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={containerClass} onkeydown={handleKeyDown} tabindex="0">
+    <div class={containerClass}>
         <slot></slot>
         <dx-button onclick={handleToggleModal}>Done</dx-button>
     </div>

package/src/modules/dx/pagination/pagination.css

@@ -27,8 +27,7 @@
 }
 
 .dx-pagination-pages button {
-    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md)
-        var(--dx-g-spacing-2xs) var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-md);
     border-radius: var(--dx-g-spacing-lg);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);

package/src/modules/dx/sidebarSearch/sidebarSearch.html

@@ -18,6 +18,7 @@
             value={value}
             onchange={onInputChange}
             onfocus={onInputFocus}
+            onblur={onDropdownRequestClose}
             onclear={onInputClear}
             shortcut-key="j"
             clearable

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -422,6 +422,7 @@ export default class SidebarSearch extends LightningElement {
         switch (e.detail as PopoverRequestCloseType) {
             case "interact-outside":
             case "keypress-escape":
+            case "input-blur":
                 this.dropdownRequestedOpen = false;
                 break;
             default:

package/src/modules/dx/tab/tab.css

@@ -38,10 +38,6 @@ a {
     margin: 0 var(--horizontal-spacing);
 }
 
-.nav-list-item > span {
-    margin-top: var(--dx-g-spacing-xs);
-}
-
 button.nav-list-item_default > dx-icon {
     margin-left: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/treeItem/treeItem.html

@@ -9,6 +9,7 @@
             is-selected={isSelected}
             oniconclick={onIconClick}
             show-arrow={isParent}
+            target={target}
         ></dx-tree-tile>
     </a>
     <img

package/src/modules/dx/treeTile/treeTile.css

@@ -145,33 +145,33 @@
     --indentation: calc(20 * var(--base-indentation));
 }
 
-dx-type-badge {
-    --dx-c-type-badge-text-width: 21px;
+dx-metadata-badge {
+    --dx-c-metadata-badge-text-width: 21px;
 }
 
-dx-type-badge.get {
-    --dx-c-type-badge-color: var(--dx-g-blue-vibrant-50);
-    --dx-c-type-badge-background: var(--dx-g-blue-vibrant-90);
+dx-metadata-badge.get {
+    --dx-c-metadata-badge-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-metadata-badge-background: var(--dx-g-blue-vibrant-90);
 }
 
-dx-type-badge.put {
-    --dx-c-type-badge-color: var(--dx-g-yellow-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-yellow-vibrant-90);
+dx-metadata-badge.put {
+    --dx-c-metadata-badge-color: var(--dx-g-yellow-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-yellow-vibrant-90);
 }
 
-dx-type-badge.post {
-    --dx-c-type-badge-color: var(--dx-g-green-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-green-vibrant-90);
+dx-metadata-badge.post {
+    --dx-c-metadata-badge-color: var(--dx-g-green-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-green-vibrant-90);
 }
 
-dx-type-badge.patch {
-    --dx-c-type-badge-color: var(--dx-g-teal-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-teal-vibrant-90);
+dx-metadata-badge.patch {
+    --dx-c-metadata-badge-color: var(--dx-g-teal-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-teal-vibrant-90);
 }
 
-dx-type-badge.delete {
-    --dx-c-type-badge-color: var(--dx-g-red-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-hot-orange-vibrant-90);
+dx-metadata-badge.delete {
+    --dx-c-metadata-badge-color: var(--dx-g-red-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-hot-orange-vibrant-90);
 }
 
 a {

package/src/modules/dx/treeTile/treeTile.html

@@ -1,5 +1,5 @@
 <template>
-    <a href={href} class={tileClass}>
+    <a href={href} class={tileClass} target={target}>
         <div class="flex indentation" aria-level={tileAriaLevel}>
             <span
                 class="tile-label sidebar-item-truncate-text"
@@ -16,12 +16,13 @@
                     onclick={onClickIcon}
                 ></dx-icon>
             </div>
-            <dx-type-badge
+            <dx-metadata-badge
                 if:true={showMethod}
-                class={badgeClass}
+                class="flex tile-icon"
                 size="small"
                 value={methodText}
-            ></dx-type-badge>
+                color={metadataBadgeColor}
+            ></dx-metadata-badge>
         </div>
     </a>
 </template>

package/src/modules/dx/treeTile/treeTile.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { InternalTreeNode } from "typings/custom";
+import { Color, InternalTreeNode } from "typings/custom";
 
 const methodTextMap: {
     [key: string]: string;
@@ -12,6 +12,16 @@ const methodTextMap: {
     delete: "DELE"
 };
 
+const metadataBadgeColorMap: {
+    [key: string]: Color;
+} = {
+    get: "blue",
+    put: "yellow",
+    post: "green",
+    patch: "teal",
+    delete: "red"
+};
+
 export default class TreeTile extends LightningElement {
     @api isRoot = false;
     @api treeNode!: InternalTreeNode;
@@ -20,6 +30,7 @@ export default class TreeTile extends LightningElement {
     @api isSelected = false;
     @api href!: string;
     @api showArrow = false;
+    @api target!: string;
 
     get tileAriaLevel() {
         return this.treeNode.level + 2;
@@ -29,8 +40,11 @@ export default class TreeTile extends LightningElement {
         return this.isRoot ? "small" : "xsmall";
     }
 
-    private get badgeClass() {
-        return cx("flex", "tile-icon", this.treeNode.method);
+    private get metadataBadgeColor(): string | undefined {
+        if (this.treeNode.method) {
+            return metadataBadgeColorMap[this.treeNode.method];
+        }
+        return undefined;
     }
 
     private get showMethod() {

package/src/modules/dx/typeBadge/typeBadge.css

@@ -1,33 +1,6 @@
 @import "dxHelpers/reset";
 
-.typebadge {
-    align-items: center;
-    background: var(--dx-c-type-badge-background, var(--background));
-    border-radius: var(--dx-c-type-badge-border-radius, var(--border-radius));
-    color: var(--dx-c-type-badge-color, var(--color));
-    display: flex;
-    justify-content: center;
-    height: var(--dx-c-type-badge-height, var(--height));
-    text-align: center;
-    white-space: nowrap;
-    width: min-content;
-}
-
-.typebadge.typebadge_metadata {
-    --background: var(--dx-g-cloud-blue-natural-90);
-    --border-radius: var(--dx-g-spacing-xs);
-    --color: var(--dx-g-blue-vibrant-20);
-    --height: var(--dx-g-spacing-md);
-    --horizontal-spacing: var(--dx-g-spacing-sm);
-
-    font-family: var(--dx-g-font-display);
-    font-size: 10px;
-    letter-spacing: 0.6px;
-    text-transform: var(--dx-c-type-badge-text-transform, uppercase);
-    padding: 0 var(--horizontal-spacing);
-}
-
-.typebadge.typebadge_content-type {
+.badge {
     --background: var(--sds-g-gray-3);
     --border-radius: var(--dx-g-spacing-smd);
     --color: var(--sds-g-gray-10);
@@ -35,40 +8,26 @@
     --horizontal-spacing: var(--dx-g-spacing-smd);
     --vertical-spacing: var(--dx-g-spacing-xs);
 
+    color: var(--dx-c-type-badge-color, var(--color));
+    background: var(--dx-c-type-badge-background, var(--background));
+    border-radius: var(--border-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--height);
+    width: min-content;
+    text-align: center;
+    white-space: nowrap;
     font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-xs);
+    font-size: 10px;
     font-weight: var(--dx-g-font-bold);
     padding: var(--vertical-spacing) var(--horizontal-spacing);
 }
 
-.typebadge.typebadge_content-type.size-small {
+.badge.size-small {
     --height: var(--dx-g-spacing-mlg);
-    --horizontal-spacing: var(--dx-g-spacing-sm);
-
-    font-size: 10px;
-}
-
-.typebadge.typebadge_metadata.size-small {
-    --height: var(--dx-g-spacing-md);
-    --horizontal-spacing: var(--dx-g-spacing-xs);
-
-    font-size: 8px;
-    letter-spacing: 0.5px;
-}
-
-.typebadge.typebadge_metadata span {
-    transform: translateY(2px);
-    width: var(--dx-c-type-badge-text-width, unset);
-}
-
-.typebadge.typebadge_metadata.size-small span {
-    transform: translateY(1px);
 }
 
-@media screen and (max-width: 768px) {
-    .typebadge.typebadge_metadata:not(.size-small) {
-        height: var(--dx-g-spacing-lg);
-        padding: 0 var(--dx-g-spacing-sm);
-        font-size: var(--dx-g-text-2xs);
-    }
+dx-icon {
+    margin-right: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/typeBadge/typeBadge.html

@@ -1,5 +1,11 @@
 <template>
     <div class={className} style={style}>
+        <dx-icon
+            if:true={iconSymbol}
+            symbol={iconSymbol}
+            sprite={iconSprite}
+            size="xsmall"
+        ></dx-icon>
         <span>{value}</span>
     </div>
 </template>

package/src/modules/dx/typeBadge/typeBadge.ts

@@ -1,65 +1,161 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import {
-    TypeBadgeColor,
+    Brand,
     Color,
-    TypeBadgeSize,
-    BadgeType,
-    Brand
+    ContentType,
+    IconSprite,
+    IconSymbol,
+    TypeBadgeSize
 } from "typings/custom";
-import { colorToDxColors } from "dxUtils/css";
-
-const DEFAULT_TYPE = "typebadge_metadata";
-const VALID_BRANDS: Array<Brand> = [
-    "employees",
-    "marketing",
-    "partners",
-    "commerce",
-    "sales",
-    "success",
-    "integration",
-    "platform",
-    "industries",
-    "learning",
-    "service",
-    "analytics"
-];
+import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
+import { BRANDS } from "dxConstants/brands";
+import { CONTENT_TYPES } from "dxConstants/contentTypes";
+
+const contentTypeLabels = {
+    documentation: "Documentation",
+    trailhead: "Trailhead",
+    blog: "Blog",
+    forum: "Forum",
+    api: "API",
+    event: "Event",
+    website: "Website",
+    podcast: "Podcast"
+};
+
+type IconData = {
+    iconSymbol: IconSymbol;
+    iconSprite: IconSprite;
+};
+
+const contentTypeIcons: {
+    [K in ContentType]: IconData;
+} = {
+    documentation: {
+        iconSprite: "utility",
+        iconSymbol: "knowledge_base"
+    },
+    trailhead: {
+        iconSprite: "salesforcebrand",
+        iconSymbol: "learning"
+    },
+    blog: {
+        iconSprite: "utility",
+        iconSymbol: "comments"
+    },
+    forum: {
+        iconSprite: "general",
+        iconSymbol: "question-circle"
+    },
+    api: {
+        iconSprite: "utility",
+        iconSymbol: "settings"
+    },
+    event: {
+        iconSprite: "utility",
+        iconSymbol: "event"
+    },
+    website: {
+        iconSprite: "utility",
+        iconSymbol: "home"
+    },
+    podcast: {
+        iconSprite: "utility",
+        iconSymbol: "unmuted"
+    }
+};
 
 export default class TypeBadge extends LightningElement {
     @api size: TypeBadgeSize = "default";
-    @api value: string = "";
-    @api color?: TypeBadgeColor = "default";
-    @api type?: BadgeType = "metadata";
+    @api variant?: Brand | ContentType = "default";
+    @api color?: Color;
+
+    @api
+    get iconSymbol(): IconSymbol | undefined {
+        return this.variantIconData
+            ? this.variantIconData.iconSymbol
+            : this._iconSymbol;
+    }
+    set iconSymbol(value: IconSymbol | undefined) {
+        if (value) {
+            this._iconSymbol = value;
+        }
+    }
+
+    @api
+    get iconSprite(): IconSprite | undefined {
+        return this.variantIconData
+            ? this.variantIconData.iconSprite
+            : this._iconSprite;
+    }
+    set iconSprite(value: IconSprite | undefined) {
+        if (value) {
+            this._iconSprite = value;
+        }
+    }
+
+    @api
+    get value(): string {
+        return this._value || this.variantLabel || "";
+    }
+
+    set value(value) {
+        if (value) {
+            this._value = value;
+        }
+    }
+
+    private _value?: string;
+    private _iconSprite?: IconSprite;
+    private _iconSymbol?: IconSymbol;
+
+    private get variantIconData(): IconData | null {
+        if (this.variant && this.variant in contentTypeIcons) {
+            return contentTypeIcons[this.variant as ContentType];
+        }
+        return null;
+    }
+
+    private get variantLabel(): string | null {
+        if (this.isContentType) {
+            return contentTypeLabels[this.variant as ContentType];
+        }
+        return null;
+    }
+
+    private get variantColorScope(): string | null {
+        if (this.isContentType) {
+            return "content-type";
+        }
+        if (this.isBrand) {
+            return "brand";
+        }
+        return null;
+    }
+
+    private get isContentType(): boolean {
+        return CONTENT_TYPES.includes(this.variant as ContentType);
+    }
+
+    private get isBrand(): boolean {
+        return BRANDS.includes(this.variant as ContentType);
+    }
 
     private get className(): string {
-        return cx(
-            "typebadge",
-            `size-${this.size}`,
-            (this.type && `typebadge_${this.type}`) || DEFAULT_TYPE
-        );
+        return cx("badge", `size-${this.size}`);
     }
 
     private get style(): string {
-        if (VALID_BRANDS.includes(this.color as Brand)) {
-            return this.buildStyleString({
-                background: `--dx-g-brand-${this.color}-color-background`,
-                color: `--dx-g-brand-${this.color}-color`
+        if (this.variantColorScope) {
+            return buildStyleColorVariables({
+                background: `--dx-g-${this.variantColorScope}-${this.variant}-color-background`,
+                color: `--dx-g-${this.variantColorScope}-${this.variant}-color`
             });
         }
-        const variables = colorToDxColors(this.color as Color);
-        if (variables) {
-            return this.buildStyleString(variables);
+        if (this.color) {
+            const variables = colorToDxColors(this.color as Color);
+            return buildStyleColorVariables(variables);
         }
         return "";
     }
-
-    private buildStyleString({
-        background,
-        color
-    }: {
-        background: string;
-        color: string;
-    }): string {
-        return `--color: var(${color}); --background: var(${background})`;
-    }
 }

package/src/modules/dxBaseElements/archiveCard/archiveCard.ts

@@ -1,10 +1,10 @@
 import { LightningElement, api } from "lwc";
-import { LinkTarget, Color } from "typings/custom";
+import { LinkTarget, ContentType } from "typings/custom";
 
 const MOBILE_QUERY = "(max-width: 640px)";
 
 export abstract class ArchiveCard extends LightningElement {
-    @api contentType: "Blog" | "Podcast" = "Blog";
+    @api contentType!: ContentType;
     @api href!: string;
     @api title!: string;
     @api target: LinkTarget = "_self";
@@ -12,10 +12,6 @@ export abstract class ArchiveCard extends LightningElement {
     private matchMedia!: MediaQueryList;
     protected mobile = false;
 
-    protected get badgeColor(): Color {
-        return this.contentType === "Blog" ? "teal" : "blue";
-    }
-
     connectedCallback(): void {
         this.matchMedia = window.matchMedia(MOBILE_QUERY);
         this.onMediaChange(this.matchMedia);

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -42,7 +42,7 @@ export abstract class HeaderBase extends LightningElement {
     @api title: string = "Salesforce";
     @api version?: string | null = null;
     @api bannerMarkup =
-        '<span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">Share your feedback</a>about our new site.</span>';
+        'Thank you for visiting the Salesforce Developers website! <span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">We value your feedback</a></span>';
 
     @api
     get navItems() {

package/src/modules/dxConstants/brands/brands.ts

@@ -0,0 +1,14 @@
+export const BRANDS = [
+    "employees",
+    "marketing",
+    "partners",
+    "commerce",
+    "sales",
+    "success",
+    "integration",
+    "platform",
+    "industries",
+    "learning",
+    "service",
+    "analytics"
+];

package/src/modules/dxConstants/colors/colors.ts

@@ -0,0 +1,14 @@
+export const COLORS = [
+    "hot-orange",
+    "orange",
+    "yellow",
+    "green",
+    "teal",
+    "cloud-blue",
+    "blue",
+    "indigo",
+    "purple",
+    "violet",
+    "pink",
+    "red"
+];

package/src/modules/dxConstants/contentTypes/contentTypes.ts

@@ -0,0 +1,10 @@
+export const CONTENT_TYPES = [
+    "documentation",
+    "trailhead",
+    "blog",
+    "forum",
+    "api",
+    "event",
+    "website",
+    "podcast"
+];

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

@@ -170,7 +170,7 @@ a.dx-card-base:hover a.dx-card-base_borderless-image_link {
 dx-card-title:hover,
 .dx-card-base_link-hovered dx-card-title,
 a.dx-card-base:hover dx-card-title {
-    --dx-c-card-title-color: var(--dx-g-button-heading-color-hover);
+    --dx-c-card-title-color: var(--dx-g-blue-vibrant-50);
 }
 
 /* Line Limits */

package/src/modules/dxHelpers/commonHeader/commonHeader.css

@@ -83,7 +83,6 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 }
 
 .header_l2_group-title .subtitle {
-    transform: translateY(4px); /* ghost padding */
     margin-right: var(--dx-g-spacing-md);
 }
 

package/src/modules/dxUtils/css/css.ts

@@ -41,3 +41,13 @@ export const colorToDxColors = (
 
 export const toDxColor = (color: string) =>
     ["white", "transparent"].includes(color) ? color : `var(--dx-g-${color})`;
+
+export const buildStyleColorVariables = ({
+    background,
+    color
+}: {
+    background: string;
+    color: string;
+}): string => {
+    return `--color: var(${color}); --background: var(${background})`;
+};

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.css

@@ -1,12 +0,0 @@
-.badges-group {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.badges-group > dx-type-badge {
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
-.badges-group > dx-type-badge:not(:last-child) {
-    margin-right: var(--dx-g-spacing-sm);
-}

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.html

@@ -1,11 +0,0 @@
-<template>
-    <div class="badges-group">
-        <template for:each={badges} for:item="badge">
-            <dx-type-badge
-                key={badge}
-                size={size}
-                value={badge}
-            ></dx-type-badge>
-        </template>
-    </div>
-</template>

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.ts

@@ -1,18 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { normalizeToArray } from "dxUtils/normalizers";
-import { TypeBadgeSize } from "typings/custom";
-
-export default class TypeBadgeGroup extends LightningElement {
-    @api size: TypeBadgeSize = "medium";
-
-    @api
-    get badges() {
-        return this._badges;
-    }
-    set badges(value: string[] | string | null) {
-        this._badges = normalizeToArray(value);
-    }
-
-    // can be an array of strings or a comma delimited string
-    private _badges!: string | string[] | null;
-}