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

package/src/lightning/prompt/__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/prompt/prompt.css

@@ -1,23 +1,24 @@
 .slds-form-element__label {
     overflow-wrap: break-word;
     word-wrap: break-word;
-    -webkit-hyphens: auto;
-    -ms-hyphens: auto;
+    hyphens: auto;
+    hyphens: auto;
     hyphens: auto;
     display: inline-block;
-    color: var(--slds-g-color-neutral-base-30, #444444);
+    color: var(--slds-g-color-neutral-base-30, #444);
     font-size: 0.75rem;
     padding-right: 0.5rem;
     padding-top: 0.25rem;
     margin-bottom: 0.125rem;
 }
+
 .slds-form-element__label:empty {
     margin: 0;
 }
 
 .slds-no-flex {
     -webkit-box-flex: 0;
-    -ms-flex: none;
+    flex: none;
     flex: none;
 }
 
@@ -42,26 +43,29 @@
     line-height: 1.875rem;
     border: 1px solid var(--slds-c-input-color-border, var(--sds-c-input-color-border, var(--slds-g-color-border-base-4,#c9c9c9)));
     border-radius: var(--slds-c-input-radius-border, var(--sds-c-input-radius-border, 0.25rem));
-    background-color: var(--slds-c-input-color-background, var(--sds-c-input-color-background, var(--slds-g-color-neutral-base-100, #ffffff)));
+    background-color: var(--slds-c-input-color-background, var(--sds-c-input-color-background, var(--slds-g-color-neutral-base-100, #fff)));
     color: var(--slds-c-input-text-color, var(--sds-c-input-text-color));
-    -webkit-box-shadow: var(--slds-c-input-shadow, var(--sds-c-input-shadow));
     box-shadow: var(--slds-c-input-shadow, var(--sds-c-input-shadow));
-    -webkit-transition: border 0.1s linear, background-color 0.1s linear;
+    box-shadow: var(--slds-c-input-shadow, var(--sds-c-input-shadow));
+    transition: border 0.1s linear, background-color 0.1s linear;
     transition: border 0.1s linear, background-color 0.1s linear;
     display: inline-block;
 }
+
 .slds-input:focus,
 .slds-input:active {
     /*! @css-var-fallback border-color */
     border-color: var(--sds-c-input-color-border-focus, var(--slds-g-color-border-brand-2,#1b96ff));
+
     /*! @css-var-fallback background-color */
     background-color: var(
         --sds-c-input-color-background-focus,
-        var(--sds-c-input-color-background, var(--slds-g-color-neutral-base-100, #ffffff))
+        var(--sds-c-input-color-background, var(--slds-g-color-neutral-base-100, #fff))
     );
     color: var(--sds-c-input-text-color-focus);
+
     /*! @css-var-fallback box-shadow */
-    -webkit-box-shadow: var(--sds-c-input-shadow-focus, 0 0 3px var(--slds-g-color-brand-base-50, #0176d3));
+    box-shadow: var(--sds-c-input-shadow-focus, 0 0 3px var(--slds-g-color-brand-base-50, #0176d3));
     box-shadow: var(--sds-c-input-shadow-focus, 0 0 3px var(--slds-g-color-brand-base-50, #0176d3));
     outline: 0;
 }
@@ -74,8 +78,8 @@ input {
 }
 
 *,
-*:before,
-*:after {
-    -webkit-box-sizing: border-box;
+*::before,
+*::after {
+    box-sizing: border-box;
     box-sizing: border-box;
 }

package/src/lightning/radioGroup/input-radio-group.slds.css

@@ -538,7 +538,7 @@
 /* Apply left borders to anything radio button after the first button */
 
 :host([data-render-mode="shadow"]) .slds-radio_button + .slds-radio_button {
-  border-left: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-palette-neutral-90, #e5e5e5);
+  border-inline-start: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-palette-neutral-90, #e5e5e5);
   margin: 0;
 }
 
@@ -546,13 +546,15 @@
 
 :host([data-render-mode="shadow"]) .slds-radio_button:first-child > .slds-radio_button__label,:host([data-render-mode="shadow"]) 
 .slds-radio_button:first-child > .slds-radio_faux {
-  border-radius: var(--sds-g-radius-border-2, 0.25rem) 0 0 var(--sds-g-radius-border-2, 0.25rem);
+  border-start-start-radius: var(--sds-g-radius-border-2, 0.25rem);
+    border-end-start-radius: var(--sds-g-radius-border-2, 0.25rem);
 }
 
 :host([data-render-mode="shadow"]) .slds-button_last > .slds-radio_faux,:host([data-render-mode="shadow"]) 
 .slds-radio_button:last-child > .slds-radio_faux,:host([data-render-mode="shadow"]) 
 .slds-radio_button:last-child > .slds-radio_button__label {
-  border-radius: 0 var(--sds-g-radius-border-2, 0.25rem) var(--sds-g-radius-border-2, 0.25rem) 0;
+  border-start-end-radius: var(--sds-g-radius-border-2, 0.25rem);
+    border-end-end-radius: var(--sds-g-radius-border-2, 0.25rem);
 }
 
 /* Checked State with Interactions */

package/src/lightning/sldsCommon/sldsCommon.css

@@ -39,13 +39,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  [type='button'],
  [type='reset'],
  [type='submit'] {
-   -webkit-appearance: button;
+   appearance: button;
    appearance: button;
    cursor: pointer;
  }
 
  [type='search'] {
-   -webkit-appearance: textfield;
+   appearance: textfield;
    outline-offset: -2px;
  }
 
@@ -62,11 +62,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  }
 
  ::-webkit-search-decoration {
-   -webkit-appearance: none;
+   appearance: none;
  }
 
  ::-webkit-file-upload-button {
-   -webkit-appearance: button;
+   appearance: button;
    font: inherit;
  }
 

package/src/lightning/tile/__examples__/basic/basic.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/tile/__examples__/list/list.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/tile/__examples__/withAvatar/withAvatar.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/tile/__examples__/withIcon/withIcon.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/tree/__examples__/basic/basic.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/tree/__examples__/deeplyNested/deeplyNested.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/tree/__examples__/links/links.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/tree/__examples__/metatext/metatext.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/tree/__examples__/onselect/onselect.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/tree/tree.html

@@ -1,8 +1,10 @@
 <template>
     <div class="slds-tree_container">
-        <h4 class="slds-tree__group-header" id="treeheading">{header}</h4>
+        <template if:true={header}>
+            <h4 class="slds-tree__group-header" id="treeheading">{header}</h4>
+        </template>
 
-        <lightning-tree-item if:true={hasChildren} class="slds-tree" role="tree" aria-labelledby="treeheading"
+        <lightning-tree-item if:true={hasChildren} class="slds-tree" role="tree" aria-labelledby={computedLabelledBy}
             is-root node-key={rootElement} child-items={children} focused-child={focusedChild} >
         </lightning-tree-item>
     </div>

package/src/lightning/tree/tree.js

@@ -81,6 +81,13 @@ export default class LightningTree extends LightningElement {
         return this._focusedChild;
     }
 
+    get computedLabelledBy() {
+        if (this.header) {
+            return 'treeheading';
+        }
+        return null;
+    }
+
     syncSelected() {
         if (this.treedata && this._childNodes.length > 0) {
             this._selectedItem = this.treedata.syncSelectedToData(

package/src/lightning/treeGrid/__examples__/basic/basic.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/treeGrid/__examples__/expanded/expanded.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/treeGrid/__examples__/lazyLoading/lazyLoading.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/utilsPrivate/aria.js

@@ -155,8 +155,12 @@ export function updateAriaInvalidOnElement(element, isInvalid) {
  * @param value
  * @returns {boolean|undefined}
  */
-export function computeAriaInvalid(isInvalid, value) {
+export function computeAriaInvalid(isInvalid, value, ariaInvalid) {
+    if (typeof ariaInvalid !== 'undefined') {
+        return ariaInvalid;
+    }
     if (value === undefined || value === null || value === '') {
+        /* To Preserve backward compatibility */
         return undefined;
     }
     return !!isInvalid || undefined;

package/src/lightning/utilsPrivate/url.js

@@ -8,3 +8,17 @@ export function makeAbsoluteUrl(url) {
     const protocol = window.location.protocol;
     return isAbsoluteUrl(url) ? url : `${protocol}//${url}`;
 }
+
+export const FALLBACK_URL = 'about:blank';
+const IS_SCRIPT_OR_DATA = /^(?:\w+script|data):/i;
+
+/**
+ * Mark sure to preventDefault, when sanitized url matches FALLBACK_URL
+ * W-12029667 - Making FALLBACK_URL as '#' causes click action to fail on tests
+ * */
+export function sanitizeURL(url) {
+    if (url) {
+        return url.match(IS_SCRIPT_OR_DATA) ? FALLBACK_URL : url;
+    }
+    return FALLBACK_URL;
+}

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -9,7 +9,12 @@ export {
 export { EventEmitter } from './eventEmitter';
 export { toNorthAmericanPhoneNumber } from './phonify';
 export * from './linkUtils';
-export { isAbsoluteUrl, makeAbsoluteUrl } from './url';
+export {
+    isAbsoluteUrl,
+    makeAbsoluteUrl,
+    sanitizeURL,
+    FALLBACK_URL,
+} from './url';
 export { deepCopy, arraysEqual, ArraySlice } from './utility';
 export { guid } from './guid';
 export { classListMutation } from './classListMutation';