lightning-base-components 1.22.2-alpha → 1.22.3-alpha

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-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         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/primitiveResizeHandler/primitiveResizeHandler.html

@@ -7,7 +7,8 @@
         get initial focus when first tabbing into datatable
         JS in primitiveDatatableCell will focus input when appropriate
     -->
-    <input type="range"
+    <input lwc:ref="input"
+           type="range"
            value={value}
            min={minWidth}
            max={maxWidth}
@@ -19,7 +20,8 @@
            onkeydown={handleKeydown}
            tabindex="-1"
     >
-    <span class="slds-resizable__handle"
+    <span lwc:ref="resizeHandle"
+          class="slds-resizable__handle"
           data-is-last-col={isLastCol}
           onmousedown={onMouseDown}
           ontouchstart={onTouchStart}

package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.js

@@ -33,7 +33,7 @@ export default class PrimitiveResizeHandler extends LightningElement {
     }
 
     get resizeElement() {
-        return this.template.querySelector('.slds-resizable__handle');
+        return this.refs.resizeHandle;
     }
 
     /* Need this label only in Safari because VO doesn't announce the change when resized */
@@ -43,7 +43,7 @@ export default class PrimitiveResizeHandler extends LightningElement {
 
     @api
     focus() {
-        const inputEle = this.template.querySelector('input');
+        const inputEle = this.refs.input;
 
         if (inputEle) {
             inputEle.focus();

package/src/lightning/primitiveTreegridCellToggle/primitiveTreegridCellToggle.html

@@ -1,5 +1,5 @@
 <template>
-    <button type="button" class={computedButtonClass} tabindex={buttonTabIndex} title={buttonTitle} onclick={handleChevronClick}>
+    <button lwc:ref="button" type="button" class={computedButtonClass} tabindex={buttonTabIndex} title={buttonTitle} onclick={handleChevronClick}>
         <lightning-primitive-icon
             icon-name="utility:chevronright"
             variant="bare"

package/src/lightning/primitiveTreegridCellToggle/primitiveTreegridCellToggle.js

@@ -86,6 +86,6 @@ export default class PrivateTreeGridCellToggle extends LightningElement {
 
     @api
     focus() {
-        this.template.querySelector('button').focus();
+        this.refs.button.focus();
     }
 }

package/src/lightning/progressIndicator/progressIndicator.css

@@ -1 +1 @@
-@import './progressIndicator.lbc.synthetic.css'
+@import './progressIndicator.lbc.native.css';

package/src/lightning/progressIndicator/progressIndicator.js

@@ -1,5 +1,7 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
+import { isCSR } from 'lightning/utilsPrivate';
 import pathCurrentStage from '@salesforce/label/LightningProgressIndicator.pathCurrentStage';
 import {
     getStepIndex,
@@ -8,6 +10,7 @@ import {
 } from './utils';
 import base from './base.html';
 import path from './path.html';
+import progressIndicatorStylesheets from './progressIndicator.css';
 
 const i18n = {
     currentStageLabel: pathCurrentStage,
@@ -27,7 +30,9 @@ const DOWN = 40;
  * Provides a visual indication on the progress of a particular process.
  * @slot default Placeholder for lightning-progress-step.
  */
-export default class LightningProgressIndicator extends LightningElement {
+export default class LightningProgressIndicator extends LightningShadowBaseClass {
+    static stylesheets = [progressIndicatorStylesheets]; // stylesheets that apply to every rendered template
+
     /**
      * Changes the visual pattern of the indicator. Valid values are base and path.
      * The default is base.
@@ -95,10 +100,13 @@ export default class LightningProgressIndicator extends LightningElement {
     _currentStepLabel = '';
 
     connectedCallback() {
-        this.addEventListener(
-            'privateregisterstep',
-            this.handlePrivateRegisterStep.bind(this)
-        );
+        super.connectedCallback();
+        if (isCSR) {
+            this.addEventListener(
+                'privateregisterstep',
+                this.handlePrivateRegisterStep.bind(this)
+            );
+        }
     }
 
     renderedCallback() {

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

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

package/src/lightning/progressIndicator/progressIndicator.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './progress-indicator.slds.css';

package/src/lightning/progressStep/__examples__/basic/basic.html

@@ -0,0 +1,11 @@
+<template>
+    <p>
+        The steps are shown within a lightning-progress-indicator here.
+    </p>
+    <lightning-progress-indicator current-step="3" type="base" has-error="true" variant="base">
+        <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
+        <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
+        <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
+        <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
+    </lightning-progress-indicator>
+</template>

package/src/lightning/progressStep/__examples__/basic/basic.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class ProgressStepBasic extends LightningElement {}

package/src/lightning/progressStep/__examples__/shaded/shaded.html

@@ -0,0 +1,11 @@
+<template>
+    <p>
+        The shaded steps are shown within a lightning-progress-indicator here.
+    </p>
+    <lightning-progress-indicator current-step="3" type="base" has-error="true" variant="shade">
+        <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
+        <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
+        <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
+        <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
+    </lightning-progress-indicator>
+</template>

package/src/lightning/progressStep/__examples__/shaded/shaded.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class ProgressStepShaded extends LightningElement {}

package/src/lightning/progressStep/base.html

@@ -9,7 +9,8 @@
         <template if:true={hasIcon}>
             <lightning-primitive-icon
                     icon-name={baseIconName}
-                    svg-class="slds-icon slds-icon_xx-small"
+                    svg-class="slds-icon"
+                    size="xx-small"
                     variant="bare"></lightning-primitive-icon>
         </template>
         <span if:true={assistiveText} class="slds-assistive-text">{assistiveText}</span>

package/src/lightning/progressStep/progressStep.css

@@ -0,0 +1 @@
+@import './progressStep.lbc.native.css';

package/src/lightning/progressStep/progressStep.js

@@ -2,12 +2,14 @@ import labelCurrentStage from '@salesforce/label/LightningProgressIndicator.curr
 import labelStageComplete from '@salesforce/label/LightningProgressIndicator.stageComplete';
 import labelNotStartedStage from '@salesforce/label/LightningProgressIndicator.stageNotStarted';
 import labelErrorStage from '@salesforce/label/LightningProgressIndicator.errorStage';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
-import { classListMutation } from 'lightning/utilsPrivate';
+import { classListMutation, isCSR } from 'lightning/utilsPrivate';
 import { Tooltip, TooltipType, Direction } from 'lightning/tooltipLibrary';
 import path from './path.html';
 import base from './base.html';
+import progressStepStylesheets from './progressStep.css';
 
 // Temporary workaround until we get real label support. New label entries must
 // also be added to the static `labels` prop inside the class.
@@ -28,7 +30,10 @@ const baseIconNameMap = {
 /**
  * Defines a step in the lightning-progress-indicator.
  */
-export default class LightningProgressStep extends LightningElement {
+export default class LightningProgressStep extends LightningShadowBaseClass {
+    static stylesheets = [progressStepStylesheets]; // stylesheets that apply to every rendered template
+    static validationOptOut = ['class'];
+
     /**
      * Text string to reference the step of the progress indicator.
      * @type {string}
@@ -97,18 +102,22 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     connectedCallback() {
-        this.dispatchEvent(
-            new CustomEvent('privateregisterstep', {
-                bubbles: true,
-                detail: {
-                    callback: this.updateInternal.bind(this),
-                    stepName: this.value,
-                    setDeRegistrationCallback: (deRegistrationCallback) => {
-                        this._deRegistrationCallback = deRegistrationCallback;
+        super.connectedCallback();
+        if (isCSR) {
+            this.dispatchEvent(
+                new CustomEvent('privateregisterstep', {
+                    bubbles: true,
+                    detail: {
+                        callback: this.updateInternal.bind(this),
+                        stepName: this.value,
+                        setDeRegistrationCallback: (deRegistrationCallback) => {
+                            this._deRegistrationCallback =
+                                deRegistrationCallback;
+                        },
                     },
-                },
-            })
-        );
+                })
+            );
+        }
     }
 
     disconnectedCallback() {
@@ -232,21 +241,23 @@ export default class LightningProgressStep extends LightningElement {
         } else if (this._privateLabel && this.state.type && !this.isPath) {
             // Note that because the tooltip target is a child element it may not be present in the
             // dom during initial rendering.
-            this._tooltip = new Tooltip(this._privateLabel, {
-                root: this,
-                target: () => this.template.querySelector('div'),
-                type: TooltipType.Toggle,
-                align: {
-                    horizontal: Direction.Center,
-                    vertical: Direction.Bottom,
-                },
-                targetAlign: {
-                    horizontal: Direction.Center,
-                    vertical: Direction.Top,
-                },
-                disableAriaDescribedBy: true,
-            });
-            this._tooltip.initialize();
+            if (isCSR) {
+                this._tooltip = new Tooltip(this._privateLabel, {
+                    root: this,
+                    target: () => this.template.querySelector('div'),
+                    type: TooltipType.Toggle,
+                    align: {
+                        horizontal: Direction.Center,
+                        vertical: Direction.Bottom,
+                    },
+                    targetAlign: {
+                        horizontal: Direction.Center,
+                        vertical: Direction.Top,
+                    },
+                    disableAriaDescribedBy: true,
+                });
+                this._tooltip.initialize();
+            }
         }
     }
 }

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

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

package/src/lightning/progressStep/progressStep.lbc.native.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsVisibility';
+@import './progress-step.slds.css';

package/src/lightning/prompt/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-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         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/prompt/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-size-base)
+            var(--slds-g-font-scale-neg-2)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        flex-direction: column;
+        align-items: center;
     }
 /**
    * Input Container
@@ -371,10 +371,6 @@
         --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
    *
@@ -388,7 +384,10 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(
+            --slds-c-inputtext-label-font-size,
+            var(--slds-g-font-scale-neg-3)
+        );
         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/radioGroup/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-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         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/select/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-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         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/select/select.slds.css

@@ -7,7 +7,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     :host([data-render-mode="shadow"]) [part='select'] {
       height: calc(var(--slds-c-select-input-sizing-height, 1.875rem) + (var(--slds-g-sizing-border-1) * 2));
       width: 100%;
-      border: var(--slds-g-sizing-border-1) solid var(--slds-c-select-color-border, var(--slds-s-input-color-border, var(--slds-g-color-border-1)));
+      border: var(--slds-g-sizing-border-1) solid var(--slds-c-select-color-border, var(--slds-g-color-border-1));
       border-radius: var(--slds-c-select-radius-border, var(--slds-g-radius-border-2));
       background-color: var(--slds-c-select-color-background,
       var(--slds-g-color-surface-container-1));

package/src/lightning/sldsCommon/sldsCommon.css

@@ -30,7 +30,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode='shadow']) a {
-    color: var(--slds-g-link-color, var(--slds-g-color-brand-base-50, #0176d3));
+    color: var(--slds-s-link-color);
     text-decoration: var(--_slds-g-font-decoration, none);
     transition: color 0.1s linear;
     background-color: transparent;

package/src/lightning/textarea/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-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         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/tile/mediaTile.css

@@ -0,0 +1,2 @@
+@import './tile.lbc.synthetic.css';
+@import './tile.lbc.native.css';

package/src/lightning/tile/standardTile.css

@@ -1 +1,2 @@
-@import './standardTile.lbc.synthetic.css';
+@import './tile.lbc.synthetic.css';
+@import './tile.lbc.native.css';

package/src/lightning/tile/tile.js

@@ -4,7 +4,8 @@ import {
     classListMutation,
     normalizeString,
 } from 'lightning/utilsPrivate';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import mediaTile from './mediaTile.html';
 import standardTile from './standardTile.html';
 
@@ -18,7 +19,8 @@ const i18n = {
  * A grouping of related information associated with a record.
  * @slot default Placeholder for your content that appears below the heading.
  */
-export default class LightningTile extends LightningElement {
+export default class LightningTile extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
     /**
      * The text label that displays in the tile as the heading and hover text.
      * @type {string}
@@ -90,6 +92,7 @@ export default class LightningTile extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
         this.classList.add('slds-tile');
         this.setClassesAndTemplate();

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

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

package/src/lightning/tile/tile.lbc.native.css

@@ -0,0 +1,4 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsMediaObject';
+@import './tile.slds.css';

package/src/lightning/timepicker/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-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         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/toast/button-icon.slds.css

@@ -553,19 +553,19 @@ 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);
 }
 /* slds-icon interaction states */
-:host([data-render-mode="shadow"]) [part~='button-icon']:hover {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):hover {
   --slds-c-icon-color-foreground: var(
-    --slds-c-buttonicon-color-foreground-hover, 
+    --slds-c-buttonicon-color-foreground-hover,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):focus {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-focus,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:active {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):active {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-active,
     var(--slds-g-color-accent-3)
@@ -643,7 +643,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Icon */
   --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
-  --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
+  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
 

package/src/lightning/primitiveIcon/primitiveIcon.lbc.synthetic.css

@@ -1,9 +0,0 @@
-/*
-"Temporary" fix for Edge SVG quirk. We can remove this when it is fixed either
-at the SLDS level or at the browser level.
- https://git.soma.salesforce.com/aura/lightning-global/issues/1349
- Also prevents IE11 from gacking during some interactions
-*/
-_:-ms-lang(x), svg {
-    pointer-events: none;
-}