@salesforcedevs/dx-components 1.3.194 → 1.3.196

package/lwc.config.json

@@ -47,7 +47,6 @@
         "dx/formattedRichText",
         "dx/grid",
         "dx/groupText",
-        "dx/header",
         "dx/headerMobileNavMenu",
         "dx/headerNav",
         "dx/headerSearch",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.194",
+    "version": "1.3.196",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -41,5 +41,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "c0a4d59a1fe3cd7b8b2d4aee39235e9b72516171"
+    "gitHead": "3ca1796a050dd87c8083f73e41d8cb0cfb15328d"
 }

package/src/modules/dx/alert/alert.css

@@ -6,7 +6,7 @@
     --dx-c-alert-container-align-items: flex-start;
     --dx-c-alert-vertical-padding: var(--dx-g-spacing-md);
     --dx-c-alert-success-color: var(--dx-g-green-vibrant-95);
-    --dx-c-alert-warning-color: rgb(254, 243, 217);
+    --dx-c-alert-warning-color: rgb(254 243 217);
     --dx-c-alert-danger-color: var(--dx-g-red-vibrant-95);
     --dx-c-alert-success-accent-color: var(--dx-g-green-vibrant-80);
     --dx-c-alert-warning-accent-color: var(--dx-g-yellow-vibrant-80);

package/src/modules/dx/breadcrumbs/breadcrumbs.css

@@ -79,7 +79,7 @@ dx-dropdown {
     }
 
     nav.state-long
-        .breadcrumb-slash:not(:nth-last-child(1)):not(:nth-last-child(2)) {
+        .breadcrumb-slash:not(:nth-last-child(1), :nth-last-child(2)) {
         display: none;
     }
 
@@ -101,7 +101,7 @@ dx-dropdown {
         display: initial;
     }
 
-    .breadcrumb-slash:not(:nth-last-child(1)):not(:nth-last-child(2)) {
+    .breadcrumb-slash:not(:nth-last-child(1), :nth-last-child(2)) {
         display: none;
     }
 

package/src/modules/dx/cardDocs/cardDocs.css

@@ -32,7 +32,7 @@
     position: relative;
     -webkit-line-clamp: var(--dx-c-heading-max-lines);
     -webkit-box-orient: vertical;
-    display: -webkit-box;
+    display: box;
     overflow: hidden;
 }
 

package/src/modules/dx/cardGridDocs/cardGridDocs.css

@@ -24,7 +24,6 @@ dx-input {
 
 .pagination-container {
     max-width: fit-content;
-    max-width: -moz-fit-content;
     margin: var(--dx-g-spacing-lg) auto;
 }
 

package/src/modules/dx/cardNews/cardNews.css

@@ -25,7 +25,7 @@
 }
 
 .dx-text-display-4 {
-    margin: 4px 0 4px 0;
+    margin: 4px 0;
     color: inherit;
 }
 
@@ -53,7 +53,7 @@ img {
     font-size: 30px;
     letter-spacing: 0.3px;
     line-height: 40px;
-    margin: 4px 0 10px 0;
+    margin: 4px 0 10px;
 }
 
 .dx-card-size-large p {
@@ -126,29 +126,29 @@ img {
 
     .dx-card-size-normal p {
         letter-spacing: 0.2px;
-        margin: 12px 0 0 0;
+        margin: 12px 0 0;
     }
 
     .dx-card-size-normal .cta {
-        margin: 14px 0 -2px 0;
+        margin: 14px 0 -2px;
     }
 
     .dx-card-size-large .dx-text-display-4 {
         font-size: var(--dx-g-text-2xl);
         line-height: 40px;
         letter-spacing: 0.6px;
-        margin: 10px 0 0 0;
+        margin: 10px 0 0;
     }
 
     .dx-card-size-large p {
         font-size: 20px;
         line-height: 32px;
-        margin: 10px 0 0 0;
+        margin: 10px 0 0;
         letter-spacing: 0.72px;
     }
 
     .dx-card-size-large .cta {
-        margin: 24px 0 0 0;
+        margin: 24px 0 0;
     }
 
     .dx-card-news-img-vertical-align-middle {

package/src/modules/dx/cardStep/mockProps.ts

@@ -21,7 +21,8 @@ export const stepsData = [
                 'I agree to the Journey to Salesforce Program Terms, subject to the <a href="http://www.google.com">Salesforce Program Agreement</a>.',
             notAvailableAlertInfo: {
                 title: "Not Available",
-                body: 'The Journey to Salesforce program is not currently available in your country. See the <a href="https://www.google.com/">program FAQs</a> for a list of participating countries.'
+                body:
+                    'The Journey to Salesforce program is not currently available in your country. See the <a href="https://www.google.com/">program FAQs</a> for a list of participating countries.'
             },
             participatingCountryCodes: ["US", "CA", "IN"]
         },

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

@@ -144,8 +144,8 @@ dx-button {
 }
 
 .bullet-list .bullet {
-    padding-left: 1.39571429em;
-    text-indent: -1.39571429em;
+    padding-left: 1.3957em;
+    text-indent: -1.3957em;
 }
 
 @media screen and (max-width: 768px) {

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

@@ -75,8 +75,7 @@ input:disabled + .checkbox-label {
         --disabled-inner-color: var(--dx-g-gray-60);
         --size: var(--dx-g-spacing-md);
 
-        -webkit-appearance: none;
-        -moz-appearance: none;
+        appearance: none;
         height: var(--size);
         width: var(--size);
         outline: none;

package/src/modules/dx/checkboxNative/checkboxNative.css

@@ -6,9 +6,6 @@ input,
 span {
     vertical-align: middle;
     cursor: pointer;
-    -webkit-user-select: none; /* Safari 3.1+ */
-    -moz-user-select: none; /* Firefox 2+ */
-    -ms-user-select: none; /* IE 10+ */
     user-select: none;
 }
 

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -94,10 +94,9 @@ export default class CodeBlock extends LightningElement {
     set codeBlock(value: string) {
         this._codeBlockRendered = false;
         let match;
-        this._codeBlock = (
-            (match = preTagRegexp.exec(value.trim())) === null
-                ? value.trim()
-                : match[1]
+        this._codeBlock = ((match = preTagRegexp.exec(value.trim())) === null
+            ? value.trim()
+            : match[1]
         ).trim();
     }
 
@@ -244,8 +243,9 @@ export default class CodeBlock extends LightningElement {
         });
 
         try {
-            const snippetContainer: HTMLElement | null =
-                this.template.querySelector(".code-block-content");
+            const snippetContainer: HTMLElement | null = this.template.querySelector(
+                ".code-block-content"
+            );
             if (snippetContainer && snippetContainer.textContent) {
                 await navigator.clipboard.writeText(
                     snippetContainer.textContent

package/src/modules/dx/codeBlock/customLanguages.js

@@ -23,15 +23,13 @@ export const ampscript = {
         },
         boolean: /\b(true|false|null)\b/i,
         number: /\b(0(x|X)[0-9a-fA-F]+|([0-9]+(\.[0-9]+)?))\b/,
-        keyword:
-            /\b(do|else|elseif|for|if(?:\s+not)?|endif|next|then|to|downto|var|set)\b/i,
+        keyword: /\b(do|else|elseif|for|if(?:\s+not)?|endif|next|then|to|downto|var|set)\b/i,
         operator: /==|!=|>|<|>=|<=|=/,
         variable: {
             pattern: /@\w+|\[\w+\]/,
             greedy: true
         },
-        constant:
-            /\b(xtmonth|xtmonthnumeric|xtday|xtdayofweek|xtyear|xtshortdate|xtlongdate)\b/i,
+        constant: /\b(xtmonth|xtmonthnumeric|xtday|xtdayofweek|xtyear|xtshortdate|xtlongdate)\b/i,
         logical: /\b(and|or|not)\b/i
     }
 };

package/src/modules/dx/codeBlock/lightTheme.css

@@ -39,19 +39,19 @@
 }
 
 .dx-theme-light .token.tag {
-    color: rgb(75, 36, 219);
+    color: rgb(75 36 219);
 }
 
 .dx-theme-light .token.attr-name {
-    color: rgb(0, 107, 102);
+    color: rgb(0 107 102);
 }
 
 .dx-theme-light .token.attr-value {
-    color: rgb(204, 0, 96);
+    color: rgb(204 0 96);
 }
 
 .dx-theme-light .token.doctype {
-    color: rgb(0, 114, 215);
+    color: rgb(0 114 215);
 }
 
 .dx-theme-light .token.prolog,

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

@@ -7,8 +7,7 @@
 
 .menu_list {
     display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
+    flex-flow: column nowrap;
 }
 
 .menu-hidden::part(content) {
@@ -29,8 +28,7 @@
     }
 
     .menu-nested-2-col .menu_list {
-        flex-direction: row;
-        flex-wrap: wrap;
+        flex-flow: row wrap;
     }
 
     .menu-nested-2-col .menu_option {

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -1,7 +1,7 @@
 @import "dxHelpers/reset";
 
 .indented-shape {
-    --background: rgb(170, 203, 255);
+    --background: rgb(170 203 255);
     --wide: 2px;
 
     background-color: var(--background);
@@ -72,7 +72,7 @@
 }
 
 .option-indented .option_label {
-    display: -webkit-box;
+    display: box;
     max-width: 300px;
     overflow: hidden;
     -webkit-line-clamp: 1;

package/src/modules/dx/feature/feature.css

@@ -2,7 +2,7 @@
 @import "dxHelpers/text";
 
 :host {
-    --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgba(0, 20, 45, 0.4);
+    --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgb(0 20 45 / 40%);
     --dx-c-feature-description-left-img-src: url("https://a.sfdcstatic.com/developer-website/images/feature-backdrop1.svg");
     --dx-c-feature-description-max-width: 31.75rem;
     --dx-c-feature-img-margin-left: auto;

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

@@ -322,7 +322,7 @@ img {
     left: 0;
     width: 100%;
     height: 100%;
-    border: 1px solid rgba(24, 24, 24, 0.1);
+    border: 1px solid rgb(24 24 24 / 10%);
     border-radius: var(--image-radius);
     object-fit: cover;
 }
@@ -405,11 +405,11 @@ dx-image-and-label {
 /* DARK VARIANT */
 
 .variant_dark {
-    --label-color: rgb(190, 199, 246);
+    --label-color: rgb(190 199 246);
 
     background: var(
         --dx-c-featured-content-header-background-color,
-        linear-gradient(-180deg, rgb(40, 23, 153) 0%, rgb(46, 43, 182) 100%)
+        linear-gradient(-180deg, rgb(40 23 153) 0%, rgb(46 43 182) 100%)
     );
 }
 

package/src/modules/dx/filterMenu/filterMenu.css

@@ -12,7 +12,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    border: 1px solid rgb(201, 201, 201);
+    border: 1px solid rgb(201 201 201);
     border-radius: 4px;
     padding: 15px 0;
     position: relative;
@@ -21,7 +21,6 @@
 }
 
 .caret-down {
-    -webkit-transform: rotate(180deg); /* Safari */
     transform: rotate(180deg);
 }
 
@@ -53,7 +52,7 @@
     font-size: 14px;
     font-family: var(--dx-g-font-sans);
     font-weight: bold;
-    color: rgb(24, 24, 24);
+    color: rgb(24 24 24);
 }
 
 .first-layer {
@@ -89,9 +88,6 @@ svg,
 .filter-menu-title {
     background: transparent;
     cursor: pointer;
-    -webkit-user-select: none; /* Safari 3.1+ */
-    -moz-user-select: none; /* Firefox 2+ */
-    -ms-user-select: none; /* IE 10+ */
     user-select: none;
 }
 

package/src/modules/dx/footer/footer.css

@@ -152,9 +152,10 @@ footer.signup-variant-no-signup {
 .content-container_middle {
     display: grid;
     grid-gap: var(--dx-g-spacing-xl);
-    grid-template-columns: auto max-content;
-    grid-template-rows: max-content;
-    grid-template-areas: "logo general" "socials general" "locales general";
+    grid-template:
+        "logo general" auto
+        "socials general" max-content
+        "locales general" max-content / auto max-content;
     background: var(--dx-g-cloud-blue-vibrant-95);
     padding-top: var(--dx-g-spacing-4xl);
     padding-bottom: var(--dx-g-spacing-3xl);

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

@@ -27,7 +27,7 @@
     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);
+    box-shadow: 0 20px 28px 0 rgb(0 20 45 / 8%);
     transform: translateY(0);
     border-top: 1px solid transparent;
     transition: var(--dx-g-transition-transform-2x),

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

@@ -3,7 +3,7 @@
 :host {
     display: block;
 
-    --dx-c-icon-color: currentColor;
+    --dx-c-icon-color: currentcolor;
 }
 
 svg {

package/src/modules/dx/input/input.css

@@ -104,8 +104,6 @@ label {
     padding-top: var(--dx-g-spacing-xs);
     overflow-wrap: break-word;
     word-wrap: break-word;
-    -ms-hyphens: auto;
-    -webkit-hyphens: auto;
 }
 
 .input-group.size-small input {
@@ -164,7 +162,6 @@ input::placeholder {
 
 .has-error.state-focused {
     box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
-    -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
 }
 
 .error-message-box {

package/src/modules/dx/searchResults/coveo.css

@@ -7944,7 +7944,7 @@ select.coveo-dropdown::-ms-expand {
 
 @font-face {
   font-family: "Lato";
-  src: url('https://static.cloud.coveo.com/searchui/v2.10109/0/fonts/lato.woff2'), url('https://staticdev.cloud.coveo.com/searchui/v2.10109/0/fonts/lato.woff2'), url('../fonts/lato.woff2'), url('https://static.cloud.coveo.com/searchui/v2.10109/0/fonts/lato.woff'), url('https://staticdev.cloud.coveo.com/searchui/v2.10109/0/fonts/lato.woff'), url('../fonts/lato.woff');
+  src: url('https://static.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff2'), url('https://staticdev.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff2'), url('../fonts/lato.woff2'), url('https://static.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff'), url('https://staticdev.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff'), url('../fonts/lato.woff');
   font-weight: normal;
   font-style: normal;
 }

package/src/modules/dx/searchResults/searchResults.css

@@ -266,9 +266,8 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 .dx-result {
     background: white;
     border-radius: 16px;
-    border: 1px solid rgba(24, 24, 24, 0.04);
-    box-shadow: 0 0 2px 0 rgba(24, 24, 24, 0.08),
-        0 2px 4px 1px rgba(24, 24, 24, 0.16);
+    border: 1px solid rgb(24 24 24 / 4%);
+    box-shadow: 0 0 2px 0 rgb(24 24 24 / 8%), 0 2px 4px 1px rgb(24 24 24 / 16%);
     padding: 20px;
     margin-bottom: var(--dx-g-spacing-lg);
 }

package/src/modules/dx/select/select.css

@@ -31,14 +31,12 @@ select.select-element:active:not([disabled]) {
     border-width: 2px;
     border-color: var(--dx-g-blue-vibrant-50);
     box-shadow: none;
-    -webkit-box-shadow: none;
 }
 
 .has-error select.select-element:focus,
 .has-error select.select-element:active {
     border-color: #ea001e;
     box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
-    -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
 }
 
 @media (min-width: 48em) {
@@ -77,8 +75,6 @@ select {
 .form-element_label {
     overflow-wrap: break-word;
     word-wrap: break-word;
-    -webkit-hyphens: auto;
-    -ms-hyphens: auto;
     hyphens: auto;
     display: inline-block;
     color: #3e3e3c;
@@ -129,7 +125,6 @@ select {
     border: 1px solid #dddbda;
     border-radius: 0.25rem;
     background-color: transparent;
-    -webkit-transition: border 0.1s linear, background-color 0.1s linear;
     transition: border 0.1s linear, background-color 0.1s linear;
     z-index: 1;
 }
@@ -139,7 +134,6 @@ select {
     outline: 0;
     border-color: #1b96ff;
     background-color: transparent;
-    -webkit-box-shadow: 0 0 3px #0176d3;
     box-shadow: 0 0 3px #0176d3;
 }
 
@@ -149,9 +143,6 @@ select {
     border-color: #c9c7c5;
     color: #3e3e3c;
     cursor: not-allowed;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     opacity: 1;
     z-index: 0;
@@ -161,7 +152,6 @@ select {
 .select-element[disabled]:active,
 .select-element.slds-is-disabled:focus,
 .select-element.slds-is-disabled:active {
-    -webkit-box-shadow: none;
     box-shadow: none;
 }
 
@@ -176,7 +166,6 @@ select {
 
 .has-error .select-element {
     border-color: #ea001e;
-    -webkit-box-shadow: #ea001e 0 0 0 1px inset;
     box-shadow: #ea001e 0 0 0 1px inset;
     background-clip: padding-box;
 }
@@ -188,8 +177,7 @@ select {
 }
 
 .select_container .select-element {
-    -moz-appearance: none;
-    -webkit-appearance: none;
+    appearance: none;
     padding-left: 0.5rem;
     padding-right: 1.5rem;
 }
@@ -200,12 +188,10 @@ select {
 
 .has-error .select-element:focus,
 .has-error .select-element:active {
-    -webkit-box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
     box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
 }
 
 .form-element:not(.has-error) .select-element:required {
-    -webkit-box-shadow: none;
     box-shadow: none;
 }