lightning-base-components 1.21.9-alpha → 1.22.2-alpha

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -130,6 +130,9 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
     // manually create <div>, add positional styling, and append as child to bubble
     createInvisibleDivManually() {
         if (this.state.visible) {
+            // for native shadow, we need to get styles from popover parent and append
+            // to popover body so that it is added/removed from DOM depending on tooltip visibility
+            const popoverParent = this.template.querySelector('.slds-popover');
             const popoverBody = this.template.querySelector(
                 '.slds-popover__body'
             );
@@ -137,8 +140,8 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
             const { vertical } = this.align;
 
             let computedStyle = null;
-            if (window && popoverBody) {
-                computedStyle = window.getComputedStyle(popoverBody);
+            if (window && popoverParent && popoverBody) {
+                computedStyle = window.getComputedStyle(popoverParent);
                 invisibleDiv.style.width =
                     computedStyle.getPropertyValue('width');
 
@@ -151,8 +154,10 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
                 */
                 if (vertical === 'bottom') {
                     invisibleDiv.style.top =
-                        Math.max(POPOVER_MIN_HEIGHT, popoverBody.offsetHeight) +
-                        'px';
+                        Math.max(
+                            POPOVER_MIN_HEIGHT,
+                            popoverParent.offsetHeight
+                        ) + 'px';
                     invisibleDiv.style.height =
                         DEFAULT_INVISIBLE_DIV_STYLES.height;
                 } else {

package/src/lightning/primitiveColorpickerButton/color-picker-button.slds.css

@@ -69,7 +69,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-icon-color-foreground: var(--slds-g-color-disabled-1);
 
     pointer-events: none;
-    border-color: var(--slds-g-color-border-disabled-2);
+    border-color: transparent;
   }
 
   /* TO DO: .panel and .panel-open should be renamed

package/src/lightning/primitiveDatatableTooltipBubble/primitiveDatatableTooltipBubble.html

@@ -39,7 +39,7 @@
             </div>
         </header>
 
-        <div class="slds-popover__body" id="primitive-datatable-tooltip-bubble-body-id">
+        <div class="slds-popover__body slds-popover__body_small" id="primitive-datatable-tooltip-bubble-body-id">
             <template if:true={isContentList}>
                 <ul style="list-style: disc; margin-left: 1.5rem;">
                     <template for:each={content} for:item="item" for:index="index">

package/src/lightning/primitiveFileDroppableZone/primitiveFileDroppableZone.js

@@ -1,7 +1,8 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { normalizeBoolean, isCSR } from 'lightning/utilsPrivate';
 
-export default class LightningPrimitiveFileDroppableZone extends LightningElement {
+export default class LightningPrimitiveFileDroppableZone extends LightningShadowBaseClass {
     static validationOptOut = ['class'];
 
     @track _disabled;

package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.html

@@ -4,6 +4,7 @@
             id="primitive-header-action-button-menu-id"
             icon-size="x-small"
             menu-alignment={_actionMenuAlignment}
+            title={alternativeText}
             alternative-text={alternativeText}
             variant="bare"
             onopen={handleMenuOpen}

package/src/lightning/primitiveInputCheckbox/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/primitiveInputCheckboxButton/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/primitiveInputColor/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/primitiveInputColor/input-text.slds.css

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-scale-neg-2)
+            var(--slds-g-font-size-base)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        align-items: center;
+        flex-direction: column;
     }
 /**
    * Input Container
@@ -371,6 +371,10 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
+:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
+        --sds-c-inputtext-text-color-placeholder:
+            var(--slds-g-color-on-disabled-2);
+    }
 /**
    * Label
    *
@@ -384,10 +388,7 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(
-            --slds-c-inputtext-label-font-size,
-            var(--slds-g-font-scale-neg-3)
-        );
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */

package/src/lightning/primitiveInputFile/button.slds.css

@@ -280,7 +280,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
   --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
@@ -296,6 +296,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
    --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+
+   /** 
+    * Needed to override 
+    * `pointer-event: none` coming from sds
+    * that prevent tooltip from showing
+   */
+   pointer-events: auto;
+   cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:
@@ -315,36 +323,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
   --slds-c-button-neutral-color-background: var(
     --slds-c-button-brand-color-background,
-    var(--slds-g-color-accent-container-2)
+    var(--slds-g-color-accent-container-1)
   );
   --slds-c-button-neutral-color-background-hover: var(
     --slds-c-button-brand-color-background-hover,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-focus: var(
     --slds-c-button-brand-color-background-focus,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-active: var(
     --slds-c-button-brand-color-background-active,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
 
   --slds-c-button-neutral-color-border: var(
     --slds-c-button-brand-color-border,
-    var(--slds-g-color-border-accent-2)
+    var(--slds-g-color-border-accent-1)
   );
   --slds-c-button-neutral-color-border-hover: var(
     --slds-c-button-brand-color-border-hover,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-focus: var(
     --slds-c-button-brand-color-border-focus,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-active: var(
     --slds-c-button-brand-color-border-active,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
 
   /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
@@ -396,7 +404,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
-  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-2);
+  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);

package/src/lightning/primitiveInputFile/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/primitiveInputFile/input-file.slds.css

@@ -26,9 +26,10 @@
   }
 
   :host([data-render-mode="shadow"]) [part='input'][disabled] ~ .slds-file-selector__body > .slds-file-selector__button {
-    background: var(--slds-g-color-disabled-container-1);
+    background: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1));
     border-color: var(--slds-g-color-border-disabled-1);
-    color: var(--slds-g-color-on-disabled-1);
+    color: var(--slds-g-color-on-disabled-2);
+    pointer-events: none;
   }
 
   :host([data-render-mode="shadow"]) [part='input'][disabled] ~ .slds-file-selector__body > .slds-file-selector__body-icon {

package/src/lightning/primitiveInputSimple/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/primitiveInputSimple/input-text.slds.css

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-scale-neg-2)
+            var(--slds-g-font-size-base)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        align-items: center;
+        flex-direction: column;
     }
 /**
    * Input Container
@@ -371,6 +371,10 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
+:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
+        --sds-c-inputtext-text-color-placeholder:
+            var(--slds-g-color-on-disabled-2);
+    }
 /**
    * Label
    *
@@ -384,10 +388,7 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(
-            --slds-c-inputtext-label-font-size,
-            var(--slds-g-font-scale-neg-3)
-        );
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */

package/src/lightning/primitiveInputToggle/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/primitiveInputToggle/input-toggle.slds.css

@@ -54,8 +54,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
 
-:host([data-render-mode="shadow"]) [part='indicator']:hover,:host([data-render-mode="shadow"]) 
-    [part='indicator']:focus {
+:host([data-render-mode="shadow"]) [part='indicator']:hover {
       --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-hover, var(--slds-g-color-neutral-base-50));
       --slds-c-checkbox-toggle-color-border: var(--slds-c-checkbox-toggle-color-border-hover);
 
@@ -87,8 +86,16 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
 
-:host([data-render-mode="shadow"]) [part='checkbox']:checked:focus + .slds-checkbox_faux_container > [part='indicator']  {
-        --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-3);
+:host([data-render-mode="shadow"]) [type='checkbox']:focus+.slds-checkbox_faux_container,:host([data-render-mode="shadow"]) 
+    [type='checkbox']:focus+.slds-checkbox_faux_container>[part='indicator']:hover {
+      --slds-c-checkbox-toggle-color-background: var(--slds-g-color-neutral-base-50);
+      --slds-c-checkbox-toggle-shadow: var(--slds-g-shadow-5);
+    }
+
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked:focus + .slds-checkbox_faux_container > [part='indicator'],:host([data-render-mode="shadow"]) 
+    [part='checkbox']:checked:focus + .slds-checkbox_faux_container > [part='indicator']:hover  {
+        --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-checked-focus, var(--slds-g-color-accent-container-3));
     }
 
 
@@ -104,12 +111,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator'] {
         --slds-c-checkbox-toggle-color-border: var(--slds-g-color-border-accent-2);
-        --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-container-2);
+        --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-container-1);
     }
 
 
-:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']:hover,:host([data-render-mode="shadow"]) 
-    [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']:focus {
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']:hover {
         --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-container-3);
     }
 

package/src/lightning/progressBar/progressBar.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>41.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/progressRing/progressRing.js-meta.xml

@@ -3,4 +3,7 @@
     <minApiVersion>48.0</minApiVersion>
     <isExposed>true</isExposed>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>