lightning-base-components 1.17.2-alpha → 1.17.5-alpha

package/src/lightning/breadcrumb/breadcrumb.slds.css

@@ -0,0 +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 */
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) [part~='breadcrumb'] {
+    /* Host reassignments to composed breadcrumbs for parity with SLDS blueprint
+        https://www.lightningdesignsystem.com/components/breadcrumbs/#Styling-Hooks-Overview */
+    --slds-c-breadcrumbs-spacing-inline-start: var(--slds-c-breadcrumb-spacing-inline-start);
+    --slds-c-breadcrumbs-spacing-inline-end: var(--slds-c-breadcrumb-spacing-inline-end);
+
+    display: block;
+    padding-block-start: 0;
+    padding-inline-end: var(--slds-c-breadcrumb-spacing-inline-end, var(--sds-g-spacing-2, 0.5rem));
+    padding-block-end: 0;
+    padding-inline-start: var(--slds-c-breadcrumb-spacing-inline-start, var(--sds-g-spacing-2, 0.5rem));
+    color: var(--slds-g-color-brand-base-50, var(--sds-g-color-brand-base-50, #0176d3));
+  }
+
+  :host([data-render-mode="shadow"]) [part~='breadcrumb']:hover, [part~='breadcrumb']:focus {
+    text-decoration: none;
+    color: var(--slds-g-color-brand-base-30, var(--sds-g-color-brand-base-30, #014486));
+  }
+}

package/src/lightning/breadcrumbs/breadcrumbs.css

@@ -1,3 +1,6 @@
+/* @import 'lightning/sldsCommon';
+@import './breadcrumbs.slds.css'; */
+
 :host {
     display: block;
 }

package/src/lightning/breadcrumbs/breadcrumbs.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="slds-breadcrumb slds-list_horizontal slds-wrap" role="list">
+    <div class="slds-breadcrumb slds-list_horizontal slds-wrap" role="list" part="breadcrumbs">
         <slot onslotchange={handleSlotChange}></slot>
     </div>
 </template>

package/src/lightning/breadcrumbs/breadcrumbs.slds.css

@@ -0,0 +1,33 @@
+
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] {
+    flex-wrap: wrap;
+    align-items: flex-start;
+    display: flex;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] ::slotted(*) {
+    position: relative;
+  }
+
+  /* Positions a '>' separator before breadcrumb */
+  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] ::slotted(:not(:first-child))::before {
+    content: '\003E';
+    position: absolute;
+    left: calc((var(--sds-g-spacing-2, 0.5rem) * 0.5) * -1);
+  }
+
+  /* Don't include '>' separator before first breadcrumb */
+  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] ::slotted(:first-child)::before {
+    content: '';
+  }
+
+  /* Don't include spacing before first breadcrumb */
+  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] ::slotted(:first-child) {
+    --slds-c-breadcrumb-spacing-inline-start: 0;
+  }
+}

package/src/lightning/button/button.html

@@ -16,7 +16,8 @@
             aria-haspopup={computedAriaHasPopup}
             aria-live={computedAriaLive}
             aria-pressed={computedAriaPressed}
-            aria-relevant={computedAriaRelevant}>
+            aria-relevant={computedAriaRelevant}
+            tabindex={tabIndex}>
         <template if:true={showIconLeft}>
             <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
         </template>

package/src/lightning/button/button.js

@@ -38,6 +38,15 @@ export default class LightningButton extends LightningPrimitiveButton {
      */
     @api label;
 
+    /**
+     * Reserved for internal use only.
+     * Should be set to -1 if button should not
+     * be focused during tab navigation and should
+     * be set to 0 if button should be focused.
+     * @type {number}
+     */
+    @api tabIndex;
+
     /**
      * The variant changes the appearance of the button.
      * Accepted variants include base, neutral, brand, brand-outline, destructive, destructive-text, inverse, and success.

package/src/lightning/buttonIcon/button-icon.slds.css

@@ -899,6 +899,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       --slds-c-buttonicon-bare-color-border-disabled,
       transparent
     );
+    --slds-c-buttonicon-color-background-disabled: var(
+      --slds-c-buttonicon-bare-color-background-disabled,
+      transparent
+    );
   }
 
   /**
@@ -1128,7 +1132,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       * outcome is the removal of this class and replacing the class with the SLDS
       * utility package solution.
       */
-  :host([data-render-mode="shadow"]) [part~='button-icon'] .slds-assistive-text {
+  :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
     border: 0 !important;

package/src/lightning/buttonIcon/buttonIcon.html

@@ -13,7 +13,8 @@
             aria-live={computedAriaLive}
             aria-atomic={computedAriaAtomic}
             aria-haspopup={computedAriaHasPopup}
-            part="button button-icon">
+            part="button button-icon"
+            tabindex={tabIndex}>
 
         <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
 

package/src/lightning/buttonIcon/buttonIcon.js

@@ -32,6 +32,15 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      */
     @api value;
 
+    /**
+     * Reserved for internal use only.
+     * Should be set to -1 if button should not
+     * be focused during tab navigation and should
+     * be set to 0 if button should be focused.
+     * @type {number}
+     */
+    @api tabIndex;
+
     /**
      * The variant changes the appearance of button-icon.
      * Accepted variants include bare, container, brand, border, border-filled, bare-inverse, and border-inverse.
@@ -326,7 +335,7 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
         super.renderedCallback();
 
         // remove-next-line-for-c-namespace
-        if (this.tooltipValue) {
+        if (this.tooltipValue && !this._tooltip) {
             this.createTooltip(this.tooltipValue);
         }
 

package/src/lightning/buttonIconStateful/button-icon-stateful.slds.css

@@ -939,6 +939,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       --slds-c-buttonicon-bare-color-border-disabled,
       transparent
     );
+    --slds-c-buttonicon-color-background-disabled: var(
+      --slds-c-buttonicon-bare-color-background-disabled,
+      transparent
+    );
   }
 
   /**
@@ -1168,7 +1172,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       * outcome is the removal of this class and replacing the class with the SLDS
       * utility package solution.
       */
-  :host([data-render-mode="shadow"]) [part~='button-icon'] .slds-assistive-text {
+  :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
     border: 0 !important;

package/src/lightning/card/__docs__/card.md

@@ -58,7 +58,7 @@ For a View All link, set the href value of the tag to a URL to take the user to
         <lightning-button label="Old" slot="actions"></lightning-button>
         <p class="slds-p-horizontal_small">Card Body (custom component)</p>
         <div slot="footer">
-            <a class="slds-card__footer-action" href="javascript:void(0);"
+            <a class="slds-card__footer-action" href="#"
                 >View All
                 <span class="slds-assistive-text">Accounts</span>
             </a>

package/src/lightning/card/card.js

@@ -140,7 +140,7 @@ export default class LightningCard extends LightningElement {
     get computedHidden() {
         if (!this.label && this.hideHeader) {
             console.warn(
-                'Setting header without a label can cause accessibility issues'
+                'A `lightning-card` with `hide-header` requires `label` to be set.'
             );
         }
         return !this.hideHeader;

package/src/lightning/datatable/datatable.js

@@ -213,6 +213,7 @@ export default class LightningDatatable extends LightningElement {
     _renderMode = 'table';
     _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
     _suppressBottomBar = false;
+    _checkboxColumnHeaderId;
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -864,27 +865,13 @@ export default class LightningDatatable extends LightningElement {
         return styleToString(styles);
     }
 
-    /**
-     * Private method to get datatable header element
-     * used when getting checkboxColumnHeaderId for
-     * aria-labelledby in checkbox column
-     * @returns {(HTMLElement|null)}
-     */
-    get checkboxColumnHeaderElement() {
-        return this.template.querySelector(
-            'lightning-primitive-header-factory'
-        );
-    }
-
     /**
      * Private method to get computedCheckboxColumnHeaderId
      * from checkboxColumnHeaderElement for
      * aria-labelledby in checkbox column
      */
     get computedCheckboxColumnHeaderId() {
-        return this.checkboxColumnHeaderElement
-            ? this.checkboxColumnHeaderElement.computedColumnHeaderId
-            : '';
+        return this._checkboxColumnHeaderId;
     }
 
     get computedAriaLiveClassForNavMode() {
@@ -1344,6 +1331,10 @@ export default class LightningDatatable extends LightningElement {
         this.fireSortedColumnChange(fieldName, columnKey, sortDirection);
     }
 
+    handleCheckboxHeaderId(event) {
+        this._checkboxColumnHeaderId = event.detail;
+    }
+
     /**
      * Handles the `resizecol` event on lightning-datatable
      *

package/src/lightning/datatable/templates/div/div.html

@@ -84,7 +84,8 @@
                                                 sorted-direction={def.sortedDirection}
                                                 column-width={def.columnWidth}
                                                 show-checkbox={showSelectAllCheckbox}
-                                                hide-header={hideTableHeader}>
+                                                hide-header={hideTableHeader}
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                         <template if:false={def.fixedWidth}>
@@ -105,7 +106,8 @@
                                                 column-width={def.columnWidth}
                                                 resizable={hasResizebleColumns}
                                                 resizestep={widthsData.resizeStep}
-                                                hide-header={hideTableHeader}>
+                                                hide-header={hideTableHeader}
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                     </div>

package/src/lightning/datatable/templates/table/table.html

@@ -73,7 +73,8 @@
                                                 sorted-direction={def.sortedDirection}
                                                 column-width={def.columnWidth}
                                                 show-checkbox={showSelectAllCheckbox}
-                                                hide-header={hideTableHeader}>
+                                                hide-header={hideTableHeader}
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                         <template if:false={def.fixedWidth}>
@@ -94,7 +95,8 @@
                                                 column-width={def.columnWidth}
                                                 resizable={hasResizebleColumns}
                                                 resizestep={widthsData.resizeStep}
-                                                hide-header={hideTableHeader}>
+                                                hide-header={hideTableHeader}
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                     </th>

package/src/lightning/dialog/README.md

@@ -1,4 +1,4 @@
-# Dialog
+# Dialog (Deprecated)
 
 ## Important:
 * **For any new modal work, starting in release 236, please use `lightning-modal`**

package/src/lightning/dualListbox/dual-listbox.slds.css

@@ -0,0 +1,200 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) .slds-assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+  }
+
+  /* Initializes a dueling picklist */
+  :host([data-render-mode="shadow"]) .slds-dueling-list {
+    display: flex;
+    clear: left;
+  }
+
+  /* Handles the layout of the dueling picklist */
+  :host([data-render-mode="shadow"]) .slds-dueling-list__column {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__column > lightning-button-icon {
+    margin-block: var(--sds-g-spacing-4, 1rem);
+    margin-inline: var(--sds-g-spacing-1, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__column > lightning-button-icon:first-of-type {
+    margin-block-start: var(--sds-g-spacing-5, 1.5rem);
+  }
+
+  /* Changes the layout of the dueling picklist to be responsive */
+  :host([data-render-mode="shadow"]) .slds-dueling-list__column_responsive {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 15rem;
+    flex: 1 1 15rem;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    overflow: hidden;
+    min-width: calc(var(--sds-g-sizing-9, 2rem) * 3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__column_responsive .slds-dueling-list__options {
+    width: auto;
+    max-width: 100%;
+  }
+
+  /* Bounding visual container for listbox of options */
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options {
+    border: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-80, #c9c9c9);
+    border-radius: var(--sds-g-radius-border-2, 0.25rem);
+    padding-block: var(--sds-g-spacing-1, 0.25rem);
+    padding-inline: 0;
+    width: var(--sds-g-sizing-14, 15rem);
+    height: var(--sds-g-sizing-14, 15rem);
+    background-color: var(--sds-g-color-neutral-base-100, #ffffff);
+    overflow: auto;
+  }
+
+  /* Selected/dragging state of a listbox option, not currently supported by lbc */
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options [aria-selected='true'] {
+    background-color: var(--sds-g-color-brand-base-50, #0176d3);
+    color: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options [aria-selected='true']:hover,:host([data-render-mode="shadow"]) 
+  .slds-dueling-list__options [aria-selected='true']:focus {
+    background: var(--sds-g-color-brand-base-30, #014486);
+    color: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options .slds-is-grabbed {
+    -webkit-transform: rotate(3deg);
+    transform: rotate(3deg);
+  }
+
+  /* Disabled state of a picklist option */
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options.slds-is-disabled {
+    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    border-color: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    color: var(--sds-g-color-neutral-base-30, #444444);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options.slds-is-disabled:hover {
+    cursor: not-allowed;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options.slds-is-disabled .slds-listbox__option:hover {
+    cursor: not-allowed;
+    background-color: transparent;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-dueling-list__options.slds-is-disabled .slds-listbox__option:focus {
+    background-color: transparent;
+  }
+
+  :host([data-render-mode="shadow"][variant~='label-inline']) {
+    margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    width: 100%;
+    flex-basis: 100%;
+    padding: var(--sds-g-spacing-1, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"][variant~='label-inline']).slds-form-element {
+    padding: 0;
+    margin-block-end: 0;
+  }
+
+  :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+    margin-inline-start: 33%;
+  }
+
+  /* ----------------------------------------------------------------------------------------------- */
+
+  /* Media Object classes need to be pulled out for reusability  */
+  :host([data-render-mode="shadow"]) .slds-media {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__figure {
+    flex-shrink: 0;
+    margin-inline-end: var(--sds-g-spacing-3, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
+    min-width: var(--sds-g-sizing-10, 3rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__body,:host([data-render-mode="shadow"]) 
+  .slds-media__body> :last-child {
+    margin-block-end: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media-body-iefix {
+    flex-shrink: 0;
+    flex-basis: auto;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure {
+    margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
+    margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
+    margin-inline-end: var(--sds-g-spacing-5, 1.5rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
+    margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_inline .slds-media__body {
+    flex: 0 1 auto;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_center {
+    align-items: center;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__figure_reverse {
+    margin-block: 0;
+    margin-inline-start: var(--sds-g-spacing-3, 0.75rem);
+    margin-inline-end: 0;
+  }
+
+  @media (max-width: 48em) {
+
+    :host([data-render-mode="shadow"]) .slds-media_responsive {
+      display: block;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-media_responsive .slds-media__figure {
+      margin-block: 0;
+      margin-inline-start: var(--sds-g-spacing-3, 0.75rem);
+      margin-inline-end: 0;
+    }
+  }
+}

package/src/lightning/dualListbox/dualListbox.css

@@ -1,5 +1,7 @@
 /* @import 'lightning/sldsCommon';
-@import './listbox.slds.css'; */
+@import "./form-element.slds.css";
+@import './listbox.slds.css';
+@import './dual-listbox.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/dualListbox/dualListbox.html

@@ -1,9 +1,9 @@
 <template>
-    <div role="group" aria-labelledby="group-label">
+    <div role="group" aria-labelledby="group-label" part="dual-listbox">
 
         <div id="group-label" class={computedGroupLabelClass}>
             <template if:true={required}>
-                <abbr class="slds-required" title={i18n.required}>*</abbr>
+                <abbr class="slds-required" title={i18n.required} aria-label={i18n.required}>*</abbr>
             </template>{label}
         </div>
         <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>

package/src/lightning/dualListbox/dualListbox.js

@@ -25,6 +25,7 @@ import {
     normalizeBoolean,
     getRealDOMId,
     classListMutation,
+    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import {
     InteractingState,
@@ -238,6 +239,7 @@ export default class LightningDualListbox extends LightningElement {
     set variant(value) {
         this._variant = normalizeVariant(value);
         this.updateClassList();
+        reflectAttribute(this, 'variant', this._variant);
     }
 
     set size(value) {