lightning-base-components 1.21.2-alpha → 1.21.3-alpha

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

@@ -10,29 +10,35 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
 
 
-@supports (--styling-hooks: '') {
-
-    :host([data-render-mode="shadow"]) [part='checkbox-toggle'] {
+:host([data-render-mode="shadow"]) [part='checkbox-toggle'] {
       width: 100%;
       display: flex
     }
 
-    /* Container for text to show when checkbox is toggle off */
-    :host([data-render-mode="shadow"]) .slds-checkbox_off {
+
+/* Container for text to show when checkbox is toggle off */
+
+
+:host([data-render-mode="shadow"]) .slds-checkbox_off {
       display: block;
     }
 
-    /* Container for text to show when checkbox is toggle on */
-    :host([data-render-mode="shadow"]) .slds-checkbox_on {
+
+/* Container for text to show when checkbox is toggle on */
+
+
+:host([data-render-mode="shadow"]) .slds-checkbox_on {
       display: none;
     }
 
-    :host([data-render-mode="shadow"]) .slds-checkbox_faux_container {
+
+:host([data-render-mode="shadow"]) .slds-checkbox_faux_container {
         font-size: var(--slds-g-font-scale-neg-4);
         color: var(--slds-g-color-on-surface-2);
     }
 
-    :host([data-render-mode="shadow"]) [part='indicator']{
+
+:host([data-render-mode="shadow"]) [part='indicator']{
       display: block;
       position: relative;
       width: var(--slds-g-sizing-10);
@@ -47,7 +53,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       transition: background-color 0.2s cubic-bezier(0.75, 0, 0.08, 1);
     }
 
-    :host([data-render-mode="shadow"]) [part='indicator']:hover,:host([data-render-mode="shadow"]) 
+
+:host([data-render-mode="shadow"]) [part='indicator']:hover,:host([data-render-mode="shadow"]) 
     [part='indicator']:focus {
       --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-hover, var(--slds-g-color-accent-container-2));
       --slds-c-checkbox-toggle-color-border: var(--slds-c-checkbox-toggle-color-border-hover);
@@ -55,7 +62,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       cursor: pointer;
     }
 
-    :host([data-render-mode="shadow"]) [part='indicator']::after {
+
+:host([data-render-mode="shadow"]) [part='indicator']::after {
       content: '';
       position: absolute;
       top: 1px;
@@ -66,7 +74,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       border-radius: var(--slds-c-checkbox-toggle-radius-border, 15rem);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'] {
+
+:host([data-render-mode="shadow"]) [part='checkbox'] {
       height: 1px;
       width: 1px;
       border: 0;
@@ -77,29 +86,35 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       position: absolute;
     }
 
-    :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']  {
         --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-3);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_off {
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_off {
         display: none;
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_on {
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_on {
         display: block;
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator'] {
+
+: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);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']:hover,:host([data-render-mode="shadow"]) 
+
+: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 {
         --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-container-3);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']::before {
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']::before {
         content: '';
         position: absolute;
         top: 1px;
@@ -111,7 +126,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         transition: transform 0.2s cubic-bezier(0.75, 0, 0.08, 1);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']::after {
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']::after {
         --slds-c-checkbox-toggle-switch-color-background: transparent;
         --slds-c-checkbox-toggle-radius-border: 0;
 
@@ -130,32 +146,40 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         transform: rotate(45deg);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator'] {
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator'] {
         background-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-disabled-container-1));
         border-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-border-disabled-2));
         pointer-events: none;
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']::after {
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']::after {
         background-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-disabled-1));
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']:hover,:host([data-render-mode="shadow"]) 
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']:hover,:host([data-render-mode="shadow"]) 
     [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']:focus {
         background-color: var(--slds-g-color-disabled-1, var(--slds-g-color-disabled-2));
         cursor: default;
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::before {
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::before {
         background-color: var(--slds-g-color-disabled-1);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::after {
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::after {
         background-color: transparent;
     }
 
-    /* ASSISTIVE TEXT */
-    :host([data-render-mode="shadow"]) .slds-assistive-text {
+
+/* ASSISTIVE TEXT */
+
+
+:host([data-render-mode="shadow"]) .slds-assistive-text {
       position: absolute !important;
       margin: -1px !important;
       border: 0 !important;
@@ -167,4 +191,3 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       text-transform: none !important;
       white-space: nowrap !important;
     }
-  }

package/src/lightning/primitiveInputToggle/primitiveInputToggle.js

@@ -1,4 +1,5 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     isNativeComponent,
     normalizeAriaAttribute,
@@ -7,11 +8,12 @@ import {
 import { VARIANT } from 'lightning/inputUtils';
 import labelRequired from '@salesforce/label/LightningControl.required';
 
+
 const i18n = {
     required: labelRequired,
 };
 
-export default class LightningPrimitiveInputToggle extends LightningElement {
+export default class LightningPrimitiveInputToggle extends LightningShadowBaseClass {
     _checked;
     _value = '';
     _ariaLabel;
@@ -156,6 +158,7 @@ export default class LightningPrimitiveInputToggle extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this._isNativeShadow = isNativeComponent(this);
     }
 

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

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/progressBar/progress-bar.slds.css

@@ -2,7 +2,6 @@
 /* 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="progress-bar"] {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     --_slds-c-progressbar-height: var(--slds-g-sizing-3); /* 0.5rem */
@@ -18,39 +17,39 @@
     position: relative;
 }
 
-:host([data-render-mode="shadow"]) .slds-progress-bar__value {
+  :host([data-render-mode="shadow"]) .slds-progress-bar__value {
   /* TODO: Need to update this var to `--slds-g-color-brand-base-50` once v2.22 is out */
   background: var(--slds-g-color-accent-2, #1ab9ff);
   display: block;
   height: 100%;
 }
 
-
-:host([data-render-mode="shadow"]) .slds-progress-bar_x-small {
+  :host([data-render-mode="shadow"]) .slds-progress-bar_x-small {
   height: calc(var(--_slds-c-progressbar-height) * 0.25); /* 0.125rem */
 }
 
-:host([data-render-mode="shadow"]) .slds-progress-bar_small {
+  :host([data-render-mode="shadow"]) .slds-progress-bar_small {
   height: calc(var(--_slds-c-progressbar-height) * 0.5); /* 0.25rem */
 }
 
-:host([data-render-mode="shadow"]) .slds-progress-bar_medium {
+  :host([data-render-mode="shadow"]) .slds-progress-bar_medium {
   height: var(--_slds-c-progressbar-height); /* 0.5rem */
 }
 
-:host([data-render-mode="shadow"]) .slds-progress-bar_large {
+  :host([data-render-mode="shadow"]) .slds-progress-bar_large {
   height: calc(var(--_slds-c-progressbar-height) * 1.5); /* 0.75rem */
 }
 
-:host([data-render-mode="shadow"]) .slds-progress-bar_circular {
+  :host([data-render-mode="shadow"]) .slds-progress-bar_circular {
   border-radius: var(--slds-g-radius-border-3);
 }
 
-:host([data-render-mode="shadow"]) .slds-progress-bar_circular .slds-progress-bar__value {
+  :host([data-render-mode="shadow"]) .slds-progress-bar_circular .slds-progress-bar__value {
   border-radius: var(--slds-g-radius-border-3);
 }
 
   /* TODO W-12674349: remove after name-value-list utils are added */
+
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -63,4 +62,3 @@
     text-transform: none !important;
     white-space: nowrap !important;
   }
-}

package/src/lightning/progressRing/progress-ring.slds.css

@@ -1,5 +1,4 @@
 
-@supports (--styling-hooks: '') {
     /* progress-ring */
     :host([data-render-mode="shadow"]) .slds-progress-ring {
         position: relative;
@@ -9,11 +8,9 @@
         border-radius: 1.5rem;
         background: var(--slds-g-color-border-base-1, var(--slds-g-color-surface-container-3));
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring .slds-icon_container {
         line-height: 0;
     }
-
     /* progress-ring_progress */
     :host([data-render-mode="shadow"]) .slds-progress-ring__progress {
         position: absolute;
@@ -23,16 +20,13 @@
         width: 100%;
         transform: scale(-1, 1) rotate(-90deg);
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring__progress svg {
         width: 100%;
     }
-
     /* progress-ring_path */
     :host([data-render-mode="shadow"]) .slds-progress-ring__path {
         fill: var(--slds-g-color-success-1);
     }
-
     /* progress-ring_progress-head */
     :host([data-render-mode="shadow"]) .slds-progress-ring__progress-head {
         position: absolute;
@@ -42,7 +36,6 @@
         left: -0.1875rem;
         transform: scale(-1, 1) rotate(-90deg);
     }
-
     /* progress-ring_content */
     :host([data-render-mode="shadow"]) .slds-progress-ring__content {
         position: absolute;
@@ -60,65 +53,51 @@
         border-radius: 1.5rem;
         background: var(--slds-g-color-surface-container-1);
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring__content .slds-icon {
         width: 0.75rem;
     }
-
     /* variant = warning */
     :host([data-render-mode="shadow"]) .slds-progress-ring_warning .slds-progress-ring__content {
         background: var(--slds-g-color-surface-container-1);
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring_warning .slds-icon,:host([data-render-mode="shadow"]) 
     .slds-progress-ring_warning .slds-icon svg,:host([data-render-mode="shadow"]) 
     .slds-progress-ring_warning .slds-progress-ring__path {
         fill: var(--slds-g-color-warning-1);
     }
-
     /* variant = expired */
     :host([data-render-mode="shadow"]) .slds-progress-ring_expired .slds-progress-ring__content {
         background: var(--slds-g-color-surface-container-1);
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring_expired .slds-icon,:host([data-render-mode="shadow"]) 
     .slds-progress-ring_expired .slds-icon svg,:host([data-render-mode="shadow"]) 
     .slds-progress-ring_expired .slds-progress-ring__path {
         fill: var(--slds-g-color-error-1);
     }
-
-
     /* variant = complete */
     :host([data-render-mode="shadow"]) .slds-progress-ring_complete .slds-icon,:host([data-render-mode="shadow"]) 
     .slds-progress-ring_complete .slds-icon svg {
         fill: var(--slds-g-color-on-success-1);
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring_complete .slds-progress-ring__path {
         fill: var(--slds-g-color-success-2);
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring_complete .slds-progress-ring__content {
         background: var(--slds-g-color-success-container-2);
     }
-
     /* size = large */
     :host([data-render-mode="shadow"]) .slds-progress-ring_large {
         height: 2rem;
         width: 2rem;
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring_large .slds-icon {
         width: 1rem;
     }
-
     /* variant = active-step */
     :host([data-render-mode="shadow"]) .slds-progress-ring_active-step .slds-progress-ring__path {
         fill: var(--slds-g-color-accent-1);
     }
-
     /* additional classes */
-
     /* TODO W-12674349: remove after name-value-list utils are added */
     :host([data-render-mode="shadow"]) .slds-assistive-text {
         position: absolute !important;
@@ -132,5 +111,3 @@
         text-transform: none !important;
         white-space: nowrap !important;
     }
-
-}

package/src/lightning/progressStep/progressStep.js

@@ -177,7 +177,6 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleMouseLeave() {
-        this.clearAriaDescribedBy();
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepmouseleave', {
@@ -198,7 +197,6 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleBlur() {
-        this.clearAriaDescribedBy();
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepblur', {
@@ -208,15 +206,6 @@ export default class LightningProgressStep extends LightningElement {
         );
     }
 
-    clearAriaDescribedBy() {
-        if (this.state.type === 'base') {
-            const button = this.template.querySelector('button');
-            if (button) {
-                button.removeAttribute('aria-describedBy');
-            }
-        }
-    }
-
     focusPathLink() {
         const pathLink = this.template.querySelector('a.slds-path__link');
         if (pathLink) {
@@ -249,11 +238,9 @@ export default class LightningProgressStep extends LightningElement {
                     horizontal: Direction.Center,
                     vertical: Direction.Top,
                 },
+                disableAriaDescribedBy: true,
             });
             this._tooltip.initialize();
-
-            // unset aria-describedby that would've been set by tooltipLibrary
-            this.clearAriaDescribedBy();
         }
     }
 }