lightning-base-components 1.16.7-alpha → 1.16.8-alpha

package/src/lightning/interactiveDialogBase/interactiveDialogBase.css

@@ -18,7 +18,7 @@
 .slds-modal {
     opacity: 0;
     visibility: hidden;
-    -webkit-transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
+    transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
     transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
     transition: transform 0.1s linear, opacity 0.1s linear;
     transition: transform 0.1s linear, opacity 0.1s linear,
@@ -34,26 +34,26 @@
 /* Container */
 .slds-modal__container {
     position: relative;
-    -webkit-transform: translate(0, 0);
     transform: translate(0, 0);
-    -webkit-transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
+    transform: translate(0, 0);
+    transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
     transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
     transition: transform 0.1s linear, opacity 0.1s linear;
     transition: transform 0.1s linear, opacity 0.1s linear,
         -webkit-transform 0.1s linear;
     display: -webkit-box;
-    display: -ms-flexbox;
+    display: flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
-    -ms-flex-direction: column;
+    flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     margin: 0 2rem;
     height: 100%;
-    padding: 3rem 0 5rem 0;
+    padding: 3rem 0 5rem;
     border-radius: 0.25rem;
 }
 @media (min-width: 48em) {
@@ -131,16 +131,18 @@
     padding-bottom: var(--sds-c-modal-footer-spacing-block-end, 0.75rem);
     padding-left: var(--sds-c-modal-footer-spacing-inline-start, 1rem);
     text-align: right;
-    -webkit-box-shadow: var(
+    box-shadow: var(
         --sds-c-modal-shadow,
-        0 2px 3px 0 rgba(0, 0, 0, 0.16)
+        0 2px 3px 0 rgb(0 0 0 / 16%)
     );
-    box-shadow: var(--sds-c-modal-shadow, 0 2px 3px 0 rgba(0, 0, 0, 0.16));
+    box-shadow: var(--sds-c-modal-shadow, 0 2px 3px 0 rgb(0 0 0 / 16%));
 }
+
 .slds-modal__footer_directional .slds-button:first-child,
 .slds-modal__footer--directional .slds-button:first-child {
     float: left;
 }
+
 .slds-modal__footer .slds-button + .slds-button {
     margin-left: 0.5rem;
 }
@@ -178,7 +180,7 @@
 
 /* Backdrop */
 .slds-backdrop {
-    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
     transition-duration: 0.4s;
     width: 100%;
     height: 100%;
@@ -189,14 +191,15 @@
     right: 0;
     bottom: 0;
     left: 0;
-    background: var(--sds-c-backdrop-color-background, rgba(8, 7, 7, 0.6));
+    background: var(--sds-c-backdrop-color-background, rgb(8 7 7 / 60%));
     z-index: 9000;
 }
+
 .slds-backdrop_open,
 .slds-backdrop--open {
     visibility: visible;
     opacity: 1;
-    -webkit-transition: opacity 0.4s linear;
+    transition: opacity 0.4s linear;
     transition: opacity 0.4s linear;
 }
 
@@ -204,13 +207,14 @@
 .slds-fade-in-open {
     opacity: 1;
     visibility: visible;
-    -webkit-transition: opacity 0.1s linear;
+    transition: opacity 0.1s linear;
     transition: opacity 0.1s linear;
 }
+
 .slds-fade-in-open .slds-modal__container-reset {
     opacity: 1;
     visibility: visible;
-    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
     transform: translate(0, 0);
 }
 
@@ -219,26 +223,29 @@
 .slds-modal--prompt .slds-modal__close {
     display: none;
 }
+
 .slds-modal_prompt .slds-modal__header,
 .slds-modal--prompt .slds-modal__header {
     border-bottom: 0;
 }
+
 .slds-modal_prompt .slds-modal__content,
 .slds-modal--prompt .slds-modal__content {
     padding-left: 2rem;
     padding-right: 2rem;
 }
+
 .slds-modal_prompt .slds-modal__footer,
 .slds-modal--prompt .slds-modal__footer {
     border-top: 0;
     text-align: center;
 }
 
-/*Button*/
+/* Button */
 .slds-button {
     position: relative;
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
+    display: inline-box;
+    display: inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -254,40 +261,44 @@
     border-style: solid;
     border-width: var(--sds-c-button-sizing-border, 1px);
     border-radius: var(--sds-c-button-radius-border, 0.25rem);
-    -webkit-box-shadow: var(--sds-c-button-shadow);
+    box-shadow: var(--sds-c-button-shadow);
     box-shadow: var(--sds-c-button-shadow);
     line-height: var(--sds-c-button-line-height, 1.875rem);
     text-decoration: none;
     color: var(--sds-c-button-text-color, #0176d3);
-    -webkit-appearance: none;
+    appearance: none;
     white-space: normal;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
+    user-select: none;
+    user-select: none;
+    user-select: none;
     user-select: none;
 }
+
 .slds-button:hover,
 .slds-button:focus,
 .slds-button:active,
 .slds-button:visited {
     text-decoration: none;
 }
+
 .slds-button:hover,
 .slds-button:focus {
     color: var(--sds-c-button-text-color-hover, #014486);
 }
+
 .slds-button:focus {
     outline: 0;
-    -webkit-box-shadow: var(--sds-c-button-shadow-focus, 0 0 3px #0176d3);
+    box-shadow: var(--sds-c-button-shadow-focus, 0 0 3px #0176d3);
     box-shadow: var(--sds-c-button-shadow-focus, 0 0 3px #0176d3);
 }
+
 .slds-button:active {
     color: var(--sds-c-button-text-color-active, #014486);
     background-color:var(--slds-c-button-color-background-active);
     border-color:var(--slds-c-button-color-border-active);
 }
 
-/*Neutral Button*/
+/* Neutral Button */
 .slds-button_neutral,
 .slds-button--neutral {
     padding-left: var(--sds-c-button-neutral-spacing-inline-start, 1rem);
@@ -297,11 +308,12 @@
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
-    -webkit-transition: border 0.15s linear;
+    transition: border 0.15s linear;
     transition: border 0.15s linear;
     background-color: var(--sds-c-button-neutral-color-background, white);
     border-color: var(--sds-c-button-neutral-color-border, #c9c9c9);
 }
+
 .slds-button_neutral:hover,
 .slds-button_neutral:focus,
 .slds-button--neutral:hover,
@@ -312,6 +324,7 @@
     );
     border-color: var(--sds-c-button-neutral-color-border-hover, #c9c9c9);
 }
+
 .slds-button_neutral:active,
 .slds-button--neutral:active {
     background-color: var(
@@ -321,7 +334,7 @@
     border-color: var(--sds-c-button-neutral-color-border-active, #c9c9c9);
 }
 
-/*Brand Button*/
+/* Brand Button */
 .slds-button_brand,
 .slds-button--brand {
     padding-left: var(--sds-c-button-brand-spacing-inline-start, 1rem);
@@ -331,12 +344,13 @@
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
-    -webkit-transition: border 0.15s linear;
+    transition: border 0.15s linear;
     transition: border 0.15s linear;
     background-color: var(--sds-c-button-brand-color-background, #0176d3);
     border-color: var(--sds-c-button-brand-color-border, #0176d3);
     color: var(--sds-c-button-brand-text-color, white);
 }
+
 .slds-button_brand:hover,
 .slds-button_brand:focus,
 .slds-button--brand:hover,
@@ -345,6 +359,7 @@
     border-color: var(--sds-c-button-brand-color-border-hover, #014486);
     color: var(--sds-c-button-brand-text-color-hover, white);
 }
+
 .slds-button_brand:active,
 .slds-button--brand:active {
     background-color: var(
@@ -361,13 +376,14 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
         Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol';
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    text-size-adjust: 100%;
     font-size: 0.8125rem;
     line-height: 1.5;
+
     /* background:#eef4ff; */
     color: #080707;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
 }
 
 button {
@@ -376,7 +392,7 @@ button {
     margin: 0;
     overflow: visible;
     text-transform: none;
-    -webkit-appearance: button;
+    appearance: button;
     cursor: pointer;
 }
 
@@ -390,14 +406,14 @@ button,
 html input[type='button'],
 input[type='reset'],
 input[type='submit'] {
-    -webkit-appearance: button;
+    appearance: button;
     cursor: pointer;
 }
 
 *,
-*:before,
-*:after {
-    -webkit-box-sizing: border-box;
+*::before,
+*::after {
+    box-sizing: border-box;
     box-sizing: border-box;
 }
 
@@ -407,56 +423,65 @@ input[type='submit'] {
     background-color: white;
     color: #080707;
 }
+
 .slds-theme_shade,
 .slds-theme--shade {
     background-color: #f3f2f2;
 }
+
 .slds-theme_inverse,
 .slds-theme--inverse {
     color: white;
     background-color: #001639;
     border-color: #001639;
 }
+
 .slds-theme_alt-inverse,
 .slds-theme--alt-inverse {
     color: white;
     background-color: #032d60;
     border-color: #032d60;
 }
+
 .slds-theme_success,
 .slds-theme--success {
     color: white;
     background-color: #2e844a;
 }
+
 .slds-theme_info,
 .slds-theme--info {
     color: white;
     background-color: #706e6b;
 }
+
 .slds-theme_warning,
 .slds-theme--warning {
     background-color: #fe9339;
     color: #080707;
 }
+
 .slds-theme_error,
 .slds-theme--error {
     color: white;
     background-color: #ea001e;
 }
+
 .slds-theme_offline,
 .slds-theme--offline {
     color: white;
     background-color: #444;
 }
+
 .slds-theme_alert-texture,
 .slds-theme--alert-texture {
     background-image: linear-gradient(
         45deg,
-        rgba(0, 0, 0, 0.025) 25%,
+        rgb(0 0 0 / 2.5%) 25%,
         transparent 25%,
         transparent 50%,
-        rgba(0, 0, 0, 0.025) 50%,
-        rgba(0, 0, 0, 0.025) 75%,
+        rgb(0 0 0 / 2.5%) 50%,
+        rgb(0 0 0 / 2.5%) 75%,
         transparent 75%,
         transparent
     );
@@ -469,6 +494,7 @@ input[type='submit'] {
     font-size: 1.25rem;
     line-height: 1.25;
 }
+
 h2 {
     margin: 0;
     padding: 0;

package/src/lightning/layout/__examples__/horizontalAlignSpace/horizontalAlignSpace.css

@@ -1,6 +1,6 @@
 .c-container {
     border: 1px solid #d8dde6;
-    margin: 10px 0 20px 0;
+    margin: 10px 0 20px;
 }
 
 .custom-box {

package/src/lightning/layout/__examples__/horizontalAlignSpread/horizontalAlignSpread.css

@@ -1,6 +1,6 @@
 .c-container {
     border: 1px solid #d8dde6;
-    margin: 10px 0 20px 0;
+    margin: 10px 0 20px;
 }
 
 .custom-box {

package/src/lightning/layout/__examples__/nested/nested.css

@@ -1,18 +1,22 @@
 .c-container {
     border: 1px solid #d8dde6;
-    margin: 10px 0 20px 0;
+    margin: 10px 0 20px;
 }
+
 .page-section {
     border: solid 1px #ccc;
     padding: 1rem;
 }
+
 .page-header,
 .page-footer {
     height: 50px;
 }
+
 .page-main {
     background: #f8f8f8;
 }
+
 .page-left,
 .page-right {
     background: #f0efef;

package/src/lightning/layout/__examples__/pullToBoundary/pullToBoundary.css

@@ -1,6 +1,6 @@
 .c-container {
     border: 1px solid #d8dde6;
-    margin: 10px 0 20px 0;
+    margin: 10px 0 20px;
 }
 
  .custom-box {

package/src/lightning/layout/__examples__/simple/simple.css

@@ -1,10 +1,12 @@
 .c-container {
     border: 1px solid #d8dde6;
-    margin: 10px 0 20px 0;
+    margin: 10px 0 20px;
 }
+
 .header-column {
     padding: 0 2rem;
 }
+
 .field-title {
     font-size: .75rem;
     line-height: 1.25;

package/src/lightning/layout/__examples__/verticalAlignCenter/verticalAlignCenter.css

@@ -1,13 +1,16 @@
 .c-container {
     border: 1px solid #d8dde6;
-    margin: 10px 0 20px 0;
+    margin: 10px 0 20px;
 }
+
  .large {
     height: 200px;
 }
+
  .x-large {
     height: 300px;
 }
+
  .custom-box {
     text-align: center;
     background-color: #f4f6f9;

package/src/lightning/layout/__examples__/verticalAlignStretch/verticalAlignStretch.css

@@ -1,13 +1,16 @@
 .c-container {
     border: 1px solid #d8dde6;
-    margin: 10px 0 20px 0;
+    margin: 10px 0 20px;
 }
+
  .large {
     height: 200px;
 }
+
  .x-large {
     height: 300px;
 }
+
  .custom-box {
     text-align: center;
     background-color: #f4f6f9;

package/src/lightning/menuDivider/__examples__/divider/divider.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/menuDivider/__examples__/withSubhead/withSubhead.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/menuItem/__examples__/iteration/iteration.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/menuItem/__examples__/menuItems/menuItems.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/menuItem/menuItem.js

@@ -5,6 +5,7 @@ import {
     normalizeString,
     keyCodes,
 } from 'lightning/utilsPrivate';
+import { sanitizeURL, FALLBACK_URL } from 'lightning/utilsPrivate';
 
 /**
  * Represents a list item in a menu.
@@ -201,8 +202,7 @@ export default class LightningMenuItem extends LightningElement {
     }
 
     get computedHref() {
-        // eslint-disable-next-line no-script-url
-        return this.href ? this.href : 'javascript:void(0)';
+        return sanitizeURL(this.href);
     }
 
     get computedAriaChecked() {
@@ -260,8 +260,12 @@ export default class LightningMenuItem extends LightningElement {
 
         // allow HREF to be followed
         if (this.href) {
-            // do nothing and take default action of navigating to the specified
-            // href
+            if (this.computedHref === FALLBACK_URL) {
+                event.preventDefault();
+            } else {
+                // do nothing and take default action of navigating to the specified
+                // href
+            }
         } else {
             event.preventDefault();
             this.dispatchSelect();

package/src/lightning/menuSubheader/__examples__/subheader/subheader.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/menuSubheader/__examples__/withDividers/withDividers.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/modal/__examples__disabled/all/all.css

@@ -2,6 +2,6 @@
     margin: 0.5rem;
     border-radius: 0.5rem;
     background: #FFF;
-    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
     padding: 1rem;
 }

package/src/lightning/modal/__examples__disabled/allform/allform.css

@@ -2,6 +2,6 @@
     margin: 0.5rem;
     border-radius: 0.5rem;
     background: #FFF;
-    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
     padding: 1rem;
 }

package/src/lightning/modal/__examples__disabled/basic/basic.css

@@ -2,6 +2,6 @@
     margin: 0.5rem;
     border-radius: 0.5rem;
     background: #FFF;
-    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
     padding: 1rem;
 }

package/src/lightning/modal/__examples__disabled/footless/footless.css

@@ -2,6 +2,6 @@
     margin: 0.5rem;
     border-radius: 0.5rem;
     background: #FFF;
-    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
     padding: 1rem;
 }

package/src/lightning/modal/__examples__disabled/headless/headless.css

@@ -2,6 +2,6 @@
     margin: 0.5rem;
     border-radius: 0.5rem;
     background: #FFF;
-    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
     padding: 1rem;
 }

package/src/lightning/overlay/__examples__/basic/basic.css

@@ -2,6 +2,6 @@
     margin: 0.5rem;
     border-radius: 0.5rem;
     background: #FFF;
-    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
     padding: 1rem;
 }