lightning-base-components 1.21.3-alpha → 1.21.4-alpha

package/src/lightning/primitiveHeaderFactory/nonsortableHeader.html

@@ -18,12 +18,24 @@
 
             <!-- Header Actions -->
             <template if:true={hasActions}>
-                <lightning-primitive-header-actions
-                    col-key-value={def.colKeyValue}
-                    actions={actions}
-                    tabindex={internalTabIndex}
-                    data-navigation="enable"
-                ></lightning-primitive-header-actions>
+                <template if:true={def.label}>
+                    <lightning-primitive-header-actions
+                        column-header={def.label}
+                        col-key-value={def.colKeyValue}
+                        actions={actions}
+                        tabindex={internalTabIndex}
+                        data-navigation="enable"
+                    ></lightning-primitive-header-actions>
+                </template>
+                <template if:false={def.label}>
+                    <lightning-primitive-header-actions
+                        column-header={def.ariaLabel}
+                        col-key-value={def.colKeyValue}
+                        actions={actions}
+                        tabindex={internalTabIndex}
+                        data-navigation="enable"
+                    ></lightning-primitive-header-actions>
+                </template>
             </template>
 
             <!-- Resize Handler -->
@@ -38,6 +50,7 @@
                      col-index={colIndex}
                      class="slds-resizable"
                      data-navigation="enable"
+                     is-last-col={def.isLastCol}
                      step={resizeStep}>
                 </lightning-primitive-resize-handler>
             </template>

package/src/lightning/primitiveHeaderFactory/sortableHeader.html

@@ -1,7 +1,7 @@
 <template>
     <!-- Header Content -->
     <span class={computedClass} tabindex={internalTabIndex} style={columnStyles}>
-        
+
         <a href="javascript:void(0);"
            class={computedSortClass}
            role={headerRole}
@@ -48,6 +48,7 @@
         <!-- Header Actions -->
         <template if:true={hasActions}>
             <lightning-primitive-header-actions
+                column-header={def.label}
                 col-key-value={def.colKeyValue}
                 actions={actions}
                 tabindex={internalTabIndex}
@@ -67,6 +68,7 @@
                  col-index={colIndex}
                  class="slds-resizable"
                  data-navigation="enable"
+                 is-last-col={def.isLastCol}
                  step={resizeStep}>
             </lightning-primitive-resize-handler>
         </template>

package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.css

@@ -1,3 +1,14 @@
 :host {
     display: block;
 }
+
+/* fix styles for last resizer, needed for div mode */
+.slds-resizable__handle[data-is-last-col='true'] {
+    width: 0.75rem;
+    right: 0;
+}
+
+.slds-resizable__divider[data-is-last-col='true']::before,
+.slds-resizable__divider[data-is-last-col='true']::after {
+    right: 0;
+}

package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.html

@@ -20,6 +20,7 @@
            tabindex="-1"
     >
     <span class="slds-resizable__handle"
+          data-is-last-col={isLastCol}
           onmousedown={onMouseDown}
           ontouchstart={onTouchStart}
           ontouchmove={onTouchMove}
@@ -27,6 +28,6 @@
           ontouchcancel={onTouchEnd}
           onclick={onClick}
           style="will-change: transform;">
-        <span class="slds-resizable__divider"></span>
+        <span class="slds-resizable__divider" data-is-last-col={isLastCol}></span>
     </span>
 </template>

package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.js

@@ -14,6 +14,7 @@ export default class PrimitiveResizeHandler extends LightningElement {
     @api label = '';
     @api colIndex;
     @api internalTabIndex;
+    @api isLastCol;
     @api step = 10;
     @api value;
 

package/src/lightning/progressStep/base.html

@@ -1,18 +1,17 @@
 <template>
-    <button class={computedButtonClass}
-            title={label}
+    <div class={computedBaseStepClass}
             data-label={label}
-            type="button"
             onmouseenter={handleMouseEnter}
             onmouseleave={handleMouseLeave}
             onfocus={handleFocus}
-            onblur={handleBlur}>
+            onblur={handleBlur}
+            tabindex="0">
         <template if:true={hasIcon}>
             <lightning-primitive-icon
                     icon-name={baseIconName}
-                    svg-class="slds-button__icon"
+                    svg-class="slds-icon slds-icon_xx-small"
                     variant="bare"></lightning-primitive-icon>
         </template>
         <span if:true={assistiveText} class="slds-assistive-text">{assistiveText}</span>
-    </button>
+    </div>
 </template>

package/src/lightning/progressStep/progressStep.js

@@ -1,8 +1,9 @@
 import labelCurrentStage from '@salesforce/label/LightningProgressIndicator.currentStage';
 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 { classSet } from 'lightning/utils';
+import { classSet, formatLabel } from 'lightning/utils';
 import { classListMutation } from 'lightning/utilsPrivate';
 import { Tooltip, TooltipType, Direction } from 'lightning/tooltipLibrary';
 import path from './path.html';
@@ -15,6 +16,7 @@ const i18n = {
     currentStage: labelCurrentStage,
     stageComplete: labelStageComplete,
     notStartedStage: labelNotStartedStage,
+    errorStage: labelErrorStage,
 };
 
 // Maps the status of the base progress-step to the icon it should render
@@ -59,6 +61,9 @@ export default class LightningProgressStep extends LightningElement {
         this.state.index = newIndex;
         this.state.active = newActive;
         this.initializeTooltip();
+        // Ensures correct role gets added to respective variants of progress-indicator
+        // Path - presentation, Base - listitem
+        this.setAttribute('role', this.isPath ? 'presentation' : 'listitem');
     }
     /**
      * Text to display as the name or tooltip for the step.
@@ -92,7 +97,6 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     connectedCallback() {
-        this.setAttribute('role', 'listitem');
         this.dispatchEvent(
             new CustomEvent('privateregisterstep', {
                 bubbles: true,
@@ -122,11 +126,10 @@ export default class LightningProgressStep extends LightningElement {
         }
     }
 
-    get computedButtonClass() {
-        const classes = classSet('slds-button slds-progress__marker');
+    get computedBaseStepClass() {
+        const classes = classSet('slds-progress__marker');
         if (this.hasIcon) {
             classes
-                .add('slds-button_icon')
                 .add('slds-progress__marker')
                 .add('slds-progress__marker_icon');
         }
@@ -157,11 +160,13 @@ export default class LightningProgressStep extends LightningElement {
 
     get assistiveText() {
         if (this.state.status === 'completed') {
-            return `${this.label} - ${this.i18n.stageComplete}`;
+            return formatLabel(this.i18n.stageComplete, this.label);
         } else if (this.state.status === 'current') {
-            return `${this.label} - ${this.i18n.currentStage}`;
+            return formatLabel(this.i18n.currentStage, this.label);
         } else if (this.state.status === 'incomplete') {
-            return `${this.label} - ${this.i18n.notStartedStage}`;
+            return formatLabel(this.i18n.notStartedStage, this.label);
+        } else if (this.state.status === 'error') {
+            return formatLabel(this.i18n.errorStage, this.label);
         }
         return this.state.type === 'path' ? '' : this.label;
     }
@@ -228,7 +233,7 @@ export default class LightningProgressStep extends LightningElement {
             // dom during initial rendering.
             this._tooltip = new Tooltip(this._privateLabel, {
                 root: this,
-                target: () => this.template.querySelector('button'),
+                target: () => this.template.querySelector('div'),
                 type: TooltipType.Toggle,
                 align: {
                     horizontal: Direction.Center,

package/src/lightning/prompt/__docs__/prompt.md

@@ -1,4 +1,4 @@
-The `lightning/prompt` module lets you create an prompt modal within your component. Use `LightningPrompt` on your components to ask the user to provide information before they continue.
+The `lightning/prompt` module lets you create a prompt modal within your component. Use `LightningPrompt` on your components to ask the user to provide information before they continue.
 
 Use `LightningPrompt.open()` instead of the native `window.prompt()` for a more consistent user experience. They have similar functions, but `LightningPrompt.open()` works in cross-origin iframes, where the `.prompt()` method is no longer supported in Chrome and Safari. Unlike `window.prompt()`, `LightningPrompt.open()` doesn't halt execution on the page, it returns a Promise. Use `async`/`await` or `.then()` for any code you want to execute after the prompt has closed.
 

package/src/lightning/shadowBaseClassPrivate/shadowBaseClassPrivate.js

@@ -1,8 +1,6 @@
 import { LightningElement } from 'lwc';
 
 export default class LightningShadowBaseClass extends LightningElement {
-    static shadowSupportMode = 'any';
-
     connectedCallback() {
         if (!this.template.synthetic) {
             this.setAttribute('data-render-mode', 'shadow');

package/src/lightning/sldsCommon/sldsCommon.css

@@ -11,45 +11,60 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     box-sizing: border-box;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+:host([data-render-mode='shadow']) h1,
+:host([data-render-mode='shadow']) h2,
+:host([data-render-mode='shadow']) h3,
+:host([data-render-mode='shadow']) h4,
+:host([data-render-mode='shadow']) h5,
+:host([data-render-mode='shadow']) h6 {
     font-weight: var(--sds-s-heading-font-weight, inherit);
-    margin-block-start: var(--sds-s-heading-spacing-block-start, var(--sds-s-heading-spacing-block));
-    margin-block-end: var(--sds-s-heading-spacing-block-end, var(--sds-s-heading-spacing-block));
+    margin-block-start: var(
+        --sds-s-heading-spacing-block-start,
+        var(--sds-s-heading-spacing-block)
+    );
+    margin-block-end: var(
+        --sds-s-heading-spacing-block-end,
+        var(--sds-s-heading-spacing-block)
+    );
     font-size: 1em;
 }
 
-a {
+:host([data-render-mode='shadow']) a {
     color: var(--slds-g-link-color, var(--slds-g-color-brand-base-50, #0176d3));
     text-decoration: var(--_slds-g-font-decoration, none);
     transition: color 0.1s linear;
     background-color: transparent;
 }
 
-a:active,
-a:hover {
+:host([data-render-mode='shadow']) a:active,
+:host([data-render-mode='shadow']) a:hover {
     outline: 0;
 }
 
-a:hover,
-a:focus {
+:host([data-render-mode='shadow']) a:hover,
+:host([data-render-mode='shadow']) a:focus {
     text-decoration: var(--_slds-g-font-decoration-hover, underline);
-    color: var(--slds-g-link-color-hover, var(--slds-g-color-brand-base-30, #014486));
+    color: var(
+        --slds-g-link-color-hover,
+        var(--slds-g-color-brand-base-30, #014486)
+    );
 }
 
-a:active {
-    color: var(--slds-g-link-color-active, var(--slds-g-color-brand-base-30, #014486));
+:host([data-render-mode='shadow']) a:active {
+    color: var(
+        --slds-g-link-color-active,
+        var(--slds-g-color-brand-base-30, #014486)
+    );
 }
 
-a:focus-visible {
-    outline-color: var(--_slds-g-color-outline, var(--slds-g-color-brand-base-50, #0176d3));
+:host([data-render-mode='shadow']) a:focus-visible {
+    outline-color: var(
+        --_slds-g-color-outline,
+        var(--slds-g-color-brand-base-50, #0176d3)
+    );
 }
 
-a:focus {
+:host([data-render-mode='shadow']) a:focus {
     box-shadow: var(--_slds-g-shadow);
     border-color: var(--_slds-g-color-border);
     border-width: var(--_slds-g-sizing-border);
@@ -57,16 +72,20 @@ a:focus {
     outline: var(--_slds-g-font-decoration-hover);
 }
 
-a,
-button {
+:host([data-render-mode='shadow']) a,
+:host([data-render-mode='shadow']) button {
     cursor: pointer;
 }
 
-p {
-    margin-block-start: var(--sds-s-content-spacing-block-start,
-            var(--sds-s-content-spacing-block, 0));
-    margin-block-end: var(--sds-s-content-spacing-block-end,
-            var(--sds-s-content-spacing-block, 0));
+:host([data-render-mode='shadow']) p {
+    margin-block-start: var(
+        --sds-s-content-spacing-block-start,
+        var(--sds-s-content-spacing-block, 0)
+    );
+    margin-block-end: var(
+        --sds-s-content-spacing-block-end,
+        var(--sds-s-content-spacing-block, 0)
+    );
     margin-inline-start: 0;
     margin-inline-end: 0;
     padding-block-start: 0;
@@ -75,56 +94,65 @@ p {
     padding-inline-end: 0;
 }
 
-ol,
-ul {
+:host([data-render-mode='shadow']) ol,
+:host([data-render-mode='shadow']) ul {
     list-style: none;
     padding: 0;
-    margin-block-start: var(--sds-s-content-spacing-block-start,
-            var(--sds-s-content-spacing-block));
-    margin-block-end: var(--sds-s-content-spacing-block-end,
-            var(--sds-s-content-spacing-block));
-}
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+    margin-block-start: var(
+        --sds-s-content-spacing-block-start,
+        var(--sds-s-content-spacing-block)
+    );
+    margin-block-end: var(
+        --sds-s-content-spacing-block-end,
+        var(--sds-s-content-spacing-block)
+    );
+}
+
+:host([data-render-mode='shadow']) button,
+:host([data-render-mode='shadow']) [type='button'],
+:host([data-render-mode='shadow']) [type='reset'],
+:host([data-render-mode='shadow']) [type='submit'] {
     -webkit-appearance: button;
     appearance: button;
     cursor: pointer;
 }
 
-[type='search'] {
+:host([data-render-mode='shadow']) [type='search'] {
     -webkit-appearance: textfield;
     outline-offset: -2px;
 }
 
-[type=search]::-webkit-search-decoration,
-[type=search]::-webkit-search-cancel-button,
-[type=search]::-webkit-search-results-button,
-[type=search]::-webkit-search-results-decoration {
+:host([data-render-mode='shadow']) [type='search']::-webkit-search-decoration,
+:host([data-render-mode='shadow'])
+    [type='search']::-webkit-search-cancel-button,
+:host([data-render-mode='shadow'])
+    [type='search']::-webkit-search-results-button,
+:host([data-render-mode='shadow'])
+    [type='search']::-webkit-search-results-decoration {
     display: none;
 }
 
 /* Below selectors are commented out
-because it seems to disrupt synthetic mode
-styling but exist in SLDS-internal.
-They are added in to individual component css
-(ex. calendar.css) */
+  because it seems to disrupt synthetic mode
+  styling but exist in SLDS-internal.
+  They are added in to individual component css
+  (ex. calendar.css) */
+
 /* button,
-input,
-optgroup,
-textarea, */
-select {
+  input,
+  optgroup,
+  textarea, */
+
+:host([data-render-mode='shadow']) select {
     color: inherit;
     font: inherit;
     margin: 0;
 }
 
-input:focus,
-button:focus,
-select:focus,
-textarea:focus {
+:host([data-render-mode='shadow']) input:focus,
+:host([data-render-mode='shadow']) button:focus,
+:host([data-render-mode='shadow']) select:focus,
+:host([data-render-mode='shadow']) textarea:focus {
     outline-offset: 0;
 }
 
@@ -150,119 +178,127 @@ textarea:focus {
     box-shadow: none;
 }
 
-code,
-kbd,
-samp,
-pre {
-    font-family: var(--sds-g-font-family-monospace, monospace);
-    font-size: var(--sds-g-font-size-base, 1rem);
-}
-
-img,
-[type='image'] {
+:host([data-render-mode='shadow']) code,
+:host([data-render-mode='shadow']) kbd,
+:host([data-render-mode='shadow']) samp,
+:host([data-render-mode='shadow']) pre {
+    font-family: var(
+        --sds-g-font-family-monospace,
+        Consolas,
+        Menlo,
+        Monaco,
+        Courier,
+        monospace,
+        monospace
+    );
+    font-size: var(--sds-g-font-size-base, 0.875rem, 1rem);
+}
+
+:host([data-render-mode='shadow']) img,
+:host([data-render-mode='shadow']) [type='image'] {
     max-width: 100%;
     height: auto;
     border: 0;
     vertical-align: middle;
 }
 
-iframe {
+:host([data-render-mode='shadow']) iframe {
     border-style: none;
 }
 
-svg:not([fill]) {
+:host([data-render-mode='shadow']) svg:not([fill]) {
     fill: currentColor;
 }
 
-abbr[title] {
+:host([data-render-mode='shadow']) abbr[title] {
     text-decoration: none;
     cursor: help;
 }
 
-table {
+:host([data-render-mode='shadow']) table {
     border-collapse: collapse;
     border-spacing: 0;
     border: 0;
     width: 100%;
 }
 
-hr {
+:host([data-render-mode='shadow']) hr {
     display: block;
-    margin: var(--sds-g-spacing-6, 2rem) 0;
-    border-top: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, #c9c9c9);
-    height: var(--sds-g-sizing-border-1, 1px);
+    margin: var(--sds-g-spacing-6, 2rem, 2rem) 0;
+    border-top: var(--sds-g-sizing-border-1, 1px, 1px) solid
+        var(--slds-g-color-border-base-1, #c9c9c9);
+    height: var(--sds-g-sizing-border-1, 1px, 1px);
     clear: both;
     box-sizing: content-box;
     border: 0;
     padding: 0;
-
 }
 
-abbr[title] {
-    border-bottom: var(--sds-g-sizing-border-1, 1px) dotted;
+:host([data-render-mode='shadow']) abbr[title] {
+    border-bottom: var(--sds-g-sizing-border-1, 1px, 1px) dotted;
     text-decoration: none;
     border: 0;
     cursor: help;
 }
 
-caption,
-th,
-td {
+:host([data-render-mode='shadow']) caption,
+:host([data-render-mode='shadow']) th,
+:host([data-render-mode='shadow']) td {
     text-align: left;
 }
 
-td,
-th {
+:host([data-render-mode='shadow']) td,
+:host([data-render-mode='shadow']) th {
     padding: 0;
 }
 
-dl {
+:host([data-render-mode='shadow']) dl {
     margin: 0;
     padding: 0;
 }
 
-dd {
+:host([data-render-mode='shadow']) dd {
     margin: 0;
 }
 
-pre {
+:host([data-render-mode='shadow']) pre {
     overflow: auto;
 }
 
-mark {
+:host([data-render-mode='shadow']) mark {
     background-color: #ff0;
     color: #000;
 }
 
-small {
+:host([data-render-mode='shadow']) small {
     font-size: 80%;
 }
 
-sub,
-sup {
+:host([data-render-mode='shadow']) sub,
+:host([data-render-mode='shadow']) sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
 }
 
-sup {
+:host([data-render-mode='shadow']) sup {
     top: -0.5em;
 }
 
-sub {
+:host([data-render-mode='shadow']) sub {
     bottom: -0.25em;
 }
 
-b,
-strong,
-dfn {
-    font-weight: var(--sds-g-font-weight-7, 700);
+:host([data-render-mode='shadow']) b,
+:host([data-render-mode='shadow']) strong,
+:host([data-render-mode='shadow']) dfn {
+    font-weight: var(--sds-g-font-weight-7, 700, 700);
 }
 
-b,
-strong {
-    font-weight: var(--sds-g-font-weight-bold, bold);
+:host([data-render-mode='shadow']) b,
+:host([data-render-mode='shadow']) strong {
+    font-weight: var(--sds-g-font-weight-bold, bold, bold);
 }
 
 /**
@@ -270,7 +306,7 @@ strong {
  * have correct styling in native shadow
  */
 
- [data-f6-region].f6-highlight {
+[data-f6-region].f6-highlight {
     position: relative;
 }
 

package/src/lightning/sldsUtilsAlignment/sldsUtilsAlignment.css

@@ -1,7 +1,7 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-.slds-align_absolute-center {
+:host([data-render-mode='shadow']) .slds-align_absolute-center {
     display: flex;
     justify-content: center;
     align-content: center;

package/src/lightning/sldsUtilsBox/sldsUtilsBox.css

@@ -1,24 +1,25 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-.slds-box,
-::slotted(.slds-box) {
+:host([data-render-mode='shadow']) .slds-box,
+:host([data-render-mode='shadow']) ::slotted(.slds-box) {
     padding: var(--slds-g-spacing-4, 1rem);
-    border-radius: var(--slds-g-spacing-1, .25rem);
-    border: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, #e5e5e5);
+    border-radius: var(--slds-g-spacing-1, 0.25rem);
+    border: var(--slds-g-sizing-border-1, 1px) solid
+        var(--slds-g-color-border-base-1, #e5e5e5);
 }
 
-.slds-box_xx-small,
-::slotted(.slds-box_xx-small) {
-    padding: var(--slds-g-spacing-1, .25rem);
+:host([data-render-mode='shadow']) .slds-box_xx-small,
+:host([data-render-mode='shadow']) ::slotted(.slds-box_xx-small) {
+    padding: var(--slds-g-spacing-1, 0.25rem);
 }
 
-.slds-box_x-small,
-::slotted(.slds-box_x-small) {
-    padding: var(--slds-g-spacing-2, .5rem);
+:host([data-render-mode='shadow']) .slds-box_x-small,
+:host([data-render-mode='shadow']) ::slotted(.slds-box_x-small) {
+    padding: var(--slds-g-spacing-2, 0.5rem);
 }
 
-.slds-box_small,
-::slotted(.slds-box_small) {
-    padding: var(--slds-g-spacing-3, .75rem);
+:host([data-render-mode='shadow']) .slds-box_small,
+:host([data-render-mode='shadow']) ::slotted(.slds-box_small) {
+    padding: var(--slds-g-spacing-3, 0.75rem);
 }