lightning-base-components 1.21.6-alpha → 1.21.8-alpha

package/src/lightning/ariaObserver/ariaObserver.js

@@ -5,6 +5,7 @@ import {
     setAriaDescribedBy,
     setAriaLabelledBy,
     setAriaControls,
+    setAriaDetails,
 } from './polyfill.js';
 
 const SUPPORTED_ATTRIBUTES_ARRAY = [
@@ -36,6 +37,13 @@ const SUPPORTED_ATTRIBUTES_ARRAY = [
             polyfill: setAriaActiveDescendant,
         },
     ],
+    [
+        'aria-details',
+        {
+            ariaReflection: 'ariaControlsElements',
+            polyfill: setAriaDetails,
+        },
+    ],
 ];
 
 /*
@@ -88,8 +96,13 @@ export default class AriaObserver {
             .split(/\s+/)
             .map((ref) => `[id*="${ref}"]`)
             .join(',');
-        const liveId = { refs, selector, callback };
-        this.liveIds[refs] = liveId;
+        let liveId;
+        if (this.liveIds[refs]) {
+            this.liveIds[refs].callbacks.push(callback);
+        } else {
+            liveId = { refs, selector, callbacks: [callback] };
+            this.liveIds[refs] = liveId;
+        }
     }
 
     /**
@@ -187,7 +200,6 @@ export default class AriaObserver {
             relatedNodeIds,
             relatedNodes,
         } = this.state[attrName];
-
         if (!targetNode) {
             return; // nothing to update
         }
@@ -314,7 +326,6 @@ export default class AriaObserver {
                         return;
                     }
                 }
-
                 const newThisId = this.privateExtractCorrectElements(
                     thisId.refs,
                     thisId.elements
@@ -323,7 +334,10 @@ export default class AriaObserver {
 
                 // only fire callback if the value changed and the root node has been rendered
                 if (newIds.length && newIds !== thisId.ids) {
-                    thisId.callback(newIds);
+                    // thisId.callback(newIds);
+                    for (let i = 0; i < thisId.callbacks.length; i++) {
+                        thisId.callbacks[i](newIds);
+                    }
                     thisId.ids = newIds;
                 }
             }

package/src/lightning/baseCombobox/base-combobox.slds.css

@@ -36,7 +36,7 @@
     line-height: 1.875rem;
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     border: var(--slds-c-inputtext-sizing-border, var(--slds-g-sizing-border-1)) solid
-      var(--slds-c-inputtext-color-border, var(--slds-g-color-border-1));
+      var(--slds-c-inputtext-color-border, var(--slds-s-input-color-border));
     border-radius: var(--slds-c-inputtext-radius, var(--slds-g-radius-border-2));
     background-color: var(--slds-c-inputtext-color-background, var(--slds-g-color-surface-container-1));
     color: var(--slds-c-inputtext-text-color);

package/src/lightning/baseCombobox/baseCombobox.html

@@ -18,6 +18,7 @@
                                 class={computedInputClass}
                                 type="text"
                                 role={customRole}
+                                accesskey={accessKey}
                                 aria-expanded={computedAriaExpanded}
                                 aria-haspopup={customAriaHasPopup}
                                 required={required}
@@ -29,7 +30,7 @@
                                 placeholder={computedPlaceholder}
                                 maxlength={inputMaxlength}
                                 disabled={disabled}
-                                aria-disabled={disabled}
+                                aria-disabled={computedAriaDisabled}
                                 aria-readonly={_inputAriaReadOnly}
                                 aria-autocomplete={computedAriaAutocomplete}
                                 aria-owns="dropdown-element"

package/src/lightning/baseCombobox/baseCombobox.js

@@ -46,6 +46,7 @@ const VARIANT_LOOKUP = 'lookup';
 const VIEWPORT_HEIGHT_SMALL = 834;
 
 const ARIA_CONTROLS = 'aria-controls';
+const ARIA_DETAILS = 'aria-details';
 const ARIA_LABELLEDBY = 'aria-labelledby';
 const ARIA_DESCRIBEDBY = 'aria-describedby';
 const ARIA_LABEL = 'aria-label';
@@ -82,6 +83,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     @api inputLabel;
     @api customRole = 'combobox';
     @api customAriaHasPopup = 'listbox';
+    @api accessKey;
 
     @api name;
     @api inputPill;
@@ -188,6 +190,19 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
         this.connectAriaControls();
     }
 
+    @api
+    get inputDetailsElements() {
+        return this._inputAriaDetails;
+    }
+
+    set inputDetailsElements(element) {
+        this._inputAriaDetails = element;
+        this.connectAriaAttribute({
+            attribute: ARIA_DETAILS,
+            relatedNodeIds: element,
+        });
+    }
+
     syncAriaObserver() {
         this.setupAriaObserverIfAbsent();
         const ariaObserverSyncExists =
@@ -308,6 +323,12 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
             }
         }
     }
+    @api ariaDisabled;
+
+    @api
+    get computedAriaDisabled() {
+        return this.ariaDisabled === 'true' || this.disabled ? true : false;
+    }
 
     @api
     get disabled() {

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

@@ -254,7 +254,7 @@
         );
         --sds-c-inputtext-color-border: var(
             --slds-c-inputtext-color-border,
-            var(--slds-g-color-border-1)
+            var(--slds-g-color-border-2)
         );
         --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
         --sds-c-inputtext-radius-border: var(
@@ -330,7 +330,7 @@
     }
 :host([data-render-mode="shadow"][readonly]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"][readonly]) [part="input-container"]:active {
        --sds-c-inputtext-color-border: var(--slds-g-color-disabled-container-2);
-       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-1);
+       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
        --sds-c-inputtext-color-background: transparent;
 
        outline: 0;
@@ -367,9 +367,9 @@
    */
 :host([data-render-mode="shadow"][disabled]) [part='input-container'],:host([data-render-mode="shadow"][disabled]) [part='input'] {
         cursor: not-allowed;
-        --sds-c-inputtext-color-background: var(--slds-g-color-disabled-container-1);
-        --sds-c-inputtext-color-border: var(--slds-g-color-border-1);
-        --sds-c-inputtext-text-color: var(--slds-g-color-on-surface-1);
+        --sds-c-inputtext-color-background: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1));
+        --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
+        --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
 /**
    * Label

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

@@ -38,5 +38,5 @@
   /* Don't include spacing before first breadcrumb */
 
   :host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(:first-child) {
-    --slds-c-breadcrumbs-spacing-inlinestart: 0;
+    --slds-c-breadcrumb-spacing-inlinestart: 0;
   }

package/src/lightning/button/button.js

@@ -272,6 +272,11 @@ export default class LightningButton extends LightningPrimitiveButton {
                 this.button.setAttribute(name, value);
             });
             animate(this.button);
+        } else {
+            const attributes = getKineticsAttributes(this._normalizedVariant);
+            attributes.forEach(({ name }) => {
+                this.button.removeAttribute(name);
+            });
         }
     }
 

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

@@ -194,7 +194,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4))
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -255,27 +255,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-color-background-hover: var(
     --slds-c-button-neutral-color-background-hover,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-1));
+  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
 
   /* Border color */
-  --sds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --sds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-2));
   --sds-c-button-color-border-hover: var(
     --slds-c-button-neutral-color-border-hover,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-focus: var(
     --slds-c-button-neutral-color-border-focus,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-active: var(
     --slds-c-button-neutral-color-border-active,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
 
   /* Text color */
@@ -290,11 +290,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /* Shadow */
   --sds-c-button-shadow: var(--slds-c-button-neutral-shadow);
   --sds-c-button-shadow-focus: var(--slds-c-button-neutral-shadow-focus);
-
-  /* Disabled */
-  --sds-c-button-color-background-disabled: var(--slds-g-color-surface-container-1);
-  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color-disabled: var(--slds-g-color-disabled-1);
+}
+/* Overriding primitiveBaseButton */
+:host([data-render-mode="shadow"]) [part~='button']:disabled {
+   --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);
 }
 /**
   * A note about fallbacks on the default variant:
@@ -410,9 +411,9 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
-  --sds-c-button-color-background: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
   --sds-c-button-color-border: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-text-color: var(--slds-g-color-on-disabled-2);
 }
 /**
    * 'base' variant is not the default in LBC. It is the default in the light

package/src/lightning/buttonIcon/__docs__/buttonIcon.md

@@ -79,6 +79,8 @@ Use the `variant` attribute with one of these values to apply styling.
 
 For the `bare` and `bare-inverse` variants, the `size` class applies to the icon itself. For all other variants, the `size` class applies to the button.
 
+Add the `disabled` attribute to prevent interaction with the button icon.
+
 ##### Sizes
 
 Adjust the button and icon sizes using the `size` attribute with one of these values.
@@ -193,6 +195,8 @@ For sighted users, make sure your description on `title` and `tooltip` are not r
 
 Buttons that display an icon instead of text do not have an accessible name. To provide an accessible name in `lightning-button-icon`, use the `aria-label` attribute. If there is visible text labeling the element, use `aria-labelled-by` instead.
 
+To inform screen readers that a button is disabled, set the `disabled` attribute to true.
+
 Use the following accessibility and `aria` attributes on `lightning-button-icon`.
 
 | Attribute        | Type              | Description                                                                                                                                                                                                                                                                                                                                          |

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

@@ -1,4 +1,20 @@
 <template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
+            Button-icons with the <code>disabled</code> attribute.
+        </h2>
+        <!-- with border / by default -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-icon icon-name="utility:settings"  disabled alternative-text="Settings" title="Settings"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:adduser"   disabled alternative-text="Add user" class="slds-m-left_xx-small" title="Add user"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:delete"    disabled alternative-text="Delete"   class="slds-m-left_xx-small" title="Delete"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:save"      disabled alternative-text="Save"     class="slds-m-left_xx-small" title="Save"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:bookmark"  disabled alternative-text="Bookmark" class="slds-m-left_xx-small" title="Bookmark"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomin"    disabled alternative-text="Zoom in"  class="slds-m-left_xx-small" title="Zoom in"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomout"   disabled alternative-text="Zoom out" class="slds-m-left_xx-small" title="Zoom out"></lightning-button-icon>
+        </div>
+    </div>
+
     <div class="slds-m-top_medium slds-m-bottom_x-large">
         <h2 class="slds-text-heading_medium slds-m-bottom_medium">
             Button-icons with the <code>variant</code> attribute omitted or set to the default value of <code>border</code>.
@@ -36,7 +52,7 @@
             <h2 class="slds-text-heading_medium slds-m-bottom_medium">
                 Button-icons with the <code>variant</code> attribute set to <code>brand</code>.
             </h2>
-    
+
             <!-- bare -->
             <div class="slds-p-around_medium lgc-bg">
                 <lightning-button-icon icon-name="utility:settings"  variant="brand" alternative-text="Settings"></lightning-button-icon>

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

@@ -197,7 +197,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4))
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -258,27 +258,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-color-background-hover: var(
     --slds-c-button-neutral-color-background-hover,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-1));
+  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
 
   /* Border color */
-  --sds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --sds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-2));
   --sds-c-button-color-border-hover: var(
     --slds-c-button-neutral-color-border-hover,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-focus: var(
     --slds-c-button-neutral-color-border-focus,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-active: var(
     --slds-c-button-neutral-color-border-active,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
 
   /* Text color */
@@ -293,11 +293,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /* Shadow */
   --sds-c-button-shadow: var(--slds-c-button-neutral-shadow);
   --sds-c-button-shadow-focus: var(--slds-c-button-neutral-shadow-focus);
-
-  /* Disabled */
-  --sds-c-button-color-background-disabled: var(--slds-g-color-surface-container-1);
-  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color-disabled: var(--slds-g-color-disabled-1);
+}
+/* Overriding primitiveBaseButton */
+:host([data-render-mode="shadow"]) [part~='button']:disabled {
+   --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);
 }
 /**
   * A note about fallbacks on the default variant:
@@ -413,9 +414,9 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
-  --sds-c-button-color-background: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
   --sds-c-button-color-border: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-text-color: var(--slds-g-color-on-disabled-2);
 }
 /**
    * 'base' variant is not the default in LBC. It is the default in the light
@@ -531,37 +532,42 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-active: transparent;
 
   /* Border */
-  --slds-c-button-neutral-color-border: var(--slds-g-color-border-1);
-  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-1);
-  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-1);
-  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-1);
+  --slds-c-button-neutral-color-border: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-2);
 
   /* Disabled */
   --sds-c-button-color-background-disabled: var(--slds-g-color-surface-container-1);
   --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,
-    var(--slds-g-color-accent-4)
+    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-4)
+    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-4)
+    var(--slds-g-color-accent-3)
   );
+
+  /* Shadow
+  * Added to override active shadow * inherited from button */
+  --sds-c-button-shadow-active: none;
 }
 /* Create disabled state for the 1st time since icon doesn't have disabled state. */
 :host([data-render-mode="shadow"]) [part~='button-icon']:disabled {
   --slds-c-icon-color-foreground: var(--slds-g-color-disabled-1);
+  --sds-c-button-color-background-disabled: transparent;
 }
 /**
   * Variant - Bare
@@ -662,6 +668,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   */
 :host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon'] {
   --slds-c-button-neutral-color-background: var(--slds-g-color-surface-container-1);
+  --slds-c-button-neutral-color-background-hover: var(--slds-g-color-surface-container-1);
+  --slds-c-button-neutral-color-background-focus: var(--slds-g-color-surface-container-1);
+  --slds-c-button-neutral-color-background-active: var(--slds-g-color-surface-container-1);
+}
+:host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon']:disabled {
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 }
 /**
   * Sizes
@@ -697,6 +709,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-buttonicon-spacing-inline: 0;
   --slds-c-icon-sizing: var(--slds-g-sizing-4);
 }
+:host([data-render-mode="shadow"][size='large'][variant='bare']) [part~='button-icon'],:host([data-render-mode="shadow"][size='large'][variant='bare-inverse']) [part~='button-icon'] {
+  --sds-c-button-sizing-height: auto;
+  --sds-c-button-sizing-width: auto;
+}
 /**
   * End part
   */