lightning-base-components 1.18.8-ssr → 1.19.2-alpha

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

@@ -153,18 +153,18 @@
         align-items: stretch;
     }
 
-    :host([data-render-mode="shadow"]) [part='input-container'][type~='range'] {
+    :host([data-render-mode="shadow"]) [part='input-container'][type='range'] {
         border: none;
         display: inline-block;
     }
 
-    :host([data-render-mode="shadow"]) [part='input'][type~='range'] {
+    :host([data-render-mode="shadow"]) [part='input'][type='range'] {
         min-height: calc(1.875rem + (1px * 2));
         margin: 0;
     }
 
-    :host([data-render-mode="shadow"]) [part='input-container'][type~='range']:focus-within,:host([data-render-mode="shadow"]) 
-    [part='input-container'][type~='range']:active {
+    :host([data-render-mode="shadow"]) [part='input-container'][type='range']:focus-within,:host([data-render-mode="shadow"]) 
+    [part='input-container'][type='range']:active {
         --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
         --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
         --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
@@ -179,10 +179,10 @@
    */
     :host([data-render-mode="shadow"]) [part='input'] {
         padding-inline-start: var(
-            --slds-c-inputtext-spacing-inline-start,
+            --slds-c-inputtext-spacing-inlinestart,
             var(--sds-g-spacing-3, 0.75rem));
         padding-inline-end: var(
-            --slds-c-inputtext-spacing-inline-end,
+            --slds-c-inputtext-spacing-inlineend,
             var(--sds-g-spacing-4, 1rem));
         height: unset;
         font-family: var(--sds-g-font-family, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
@@ -281,7 +281,7 @@
    * the icon in the inline help text.
    */
     :host([data-render-mode="shadow"]) [part='start'] {
-        --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        --slds-c-icon-spacing-inlineend: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /**
@@ -296,12 +296,12 @@
    *
    * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
    */
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='input-text'] {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='input-text'] {
             display: block;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='label'] {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='label'] {
             float: left;
 
             /* TODO: Get rid of these magic numbers */
@@ -309,11 +309,11 @@
             padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='input-container'] {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='input-container'] {
             margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='inline-help'] {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
             float: left;
             padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         }
@@ -348,7 +348,7 @@
    * Has Icon Left
    */
     :host([data-render-mode="shadow"]) .slds-input-has-icon_left {
-        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlinestart: var(--sds-g-spacing-6, 2rem);
     }
 
     :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input__icon,:host([data-render-mode="shadow"]) 
@@ -360,7 +360,7 @@
    * Has Icon Right
    */
     :host([data-render-mode="shadow"]) .slds-input-has-icon_right {
-        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlineend: var(--sds-g-spacing-6, 2rem);
     }
 
     :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input__icon,:host([data-render-mode="shadow"]) 
@@ -372,8 +372,8 @@
    * Has Icon Left & Right
    */
     :host([data-render-mode="shadow"]) .slds-input-has-icon_left-right {
-        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
-        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlinestart: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlineend: var(--sds-g-spacing-6, 2rem);
     }
 
   /**

package/src/lightning/datetimepicker/datetimepicker.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './input-text.slds.css';
-@import './form-element.slds.css';
+@import './form-element.slds.css'; */

package/src/lightning/datetimepicker/datetimepicker.html

@@ -54,7 +54,7 @@
                     </div>
                 </div>
             </div>
-            <div data-error-message id="errormessage" class={computedClass} aria-live="assertive">{customErrorMessage}</div>
+            <div data-error-message id="errormessage" class={computedClass}>{customErrorMessage}</div>
 
         </fieldset>
     </div>

package/src/lightning/datetimepicker/datetimepicker.js

@@ -4,8 +4,7 @@ import labelRangeUnderflow from '@salesforce/label/LightningDateTimePicker.range
 import labelTime from '@salesforce/label/LightningDateTimePicker.timeLabel';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import sfTimeZone from '@salesforce/i18n/timeZone';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -35,7 +34,7 @@ const i18n = {
     helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
-export default class LightningDateTimePicker extends LightningShadowBaseClass {
+export default class LightningDateTimePicker extends LightningElement {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -410,7 +409,6 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.connected = true;
 
         // we set the initial values here in order to make sure timezone is available.

package/src/lightning/datetimepicker/form-element.slds.css

@@ -133,42 +133,42 @@
 
     /* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+    :host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
+    :host([variant='label-stacked']):not(.slds-is-editing) {
         padding: 0 var(--sds-g-spacing-1);
     } */
 
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
     }
@@ -177,7 +177,7 @@
 
     /* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
+    :host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
@@ -187,32 +187,32 @@
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
         padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
+    :host([variant='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
 
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
+    :host([variant='label-inline']:not(.slds-is-editing)) {
         padding: var(--sds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
 
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
           float: left;
           max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
@@ -222,23 +222,22 @@
           z-index: 1;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+        :host([data-render-mode="shadow"][variant='label-inline']) lightning-helptext {
           float: left;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control {
           margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
-            -ms-flex-preferred-size: auto;
             flex-basis: auto;
             float: none;
             position: relative;
@@ -246,11 +245,11 @@
             margin-block-end: 0;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
           margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
@@ -283,7 +282,7 @@
 
     /* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
 }

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

@@ -153,18 +153,18 @@
         align-items: stretch;
     }
 
-    :host([data-render-mode="shadow"]) [part='input-container'][type~='range'] {
+    :host([data-render-mode="shadow"]) [part='input-container'][type='range'] {
         border: none;
         display: inline-block;
     }
 
-    :host([data-render-mode="shadow"]) [part='input'][type~='range'] {
+    :host([data-render-mode="shadow"]) [part='input'][type='range'] {
         min-height: calc(1.875rem + (1px * 2));
         margin: 0;
     }
 
-    :host([data-render-mode="shadow"]) [part='input-container'][type~='range']:focus-within,:host([data-render-mode="shadow"]) 
-    [part='input-container'][type~='range']:active {
+    :host([data-render-mode="shadow"]) [part='input-container'][type='range']:focus-within,:host([data-render-mode="shadow"]) 
+    [part='input-container'][type='range']:active {
         --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
         --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
         --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
@@ -179,10 +179,10 @@
    */
     :host([data-render-mode="shadow"]) [part='input'] {
         padding-inline-start: var(
-            --slds-c-inputtext-spacing-inline-start,
+            --slds-c-inputtext-spacing-inlinestart,
             var(--sds-g-spacing-3, 0.75rem));
         padding-inline-end: var(
-            --slds-c-inputtext-spacing-inline-end,
+            --slds-c-inputtext-spacing-inlineend,
             var(--sds-g-spacing-4, 1rem));
         height: unset;
         font-family: var(--sds-g-font-family, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
@@ -281,7 +281,7 @@
    * the icon in the inline help text.
    */
     :host([data-render-mode="shadow"]) [part='start'] {
-        --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        --slds-c-icon-spacing-inlineend: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /**
@@ -296,12 +296,12 @@
    *
    * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
    */
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='input-text'] {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='input-text'] {
             display: block;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='label'] {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='label'] {
             float: left;
 
             /* TODO: Get rid of these magic numbers */
@@ -309,11 +309,11 @@
             padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='input-container'] {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='input-container'] {
             margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='inline-help'] {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
             float: left;
             padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         }
@@ -348,7 +348,7 @@
    * Has Icon Left
    */
     :host([data-render-mode="shadow"]) .slds-input-has-icon_left {
-        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlinestart: var(--sds-g-spacing-6, 2rem);
     }
 
     :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input__icon,:host([data-render-mode="shadow"]) 
@@ -360,7 +360,7 @@
    * Has Icon Right
    */
     :host([data-render-mode="shadow"]) .slds-input-has-icon_right {
-        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlineend: var(--sds-g-spacing-6, 2rem);
     }
 
     :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input__icon,:host([data-render-mode="shadow"]) 
@@ -372,8 +372,8 @@
    * Has Icon Left & Right
    */
     :host([data-render-mode="shadow"]) .slds-input-has-icon_left-right {
-        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
-        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlinestart: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlineend: var(--sds-g-spacing-6, 2rem);
     }
 
   /**

package/src/lightning/dialog/README.md

@@ -4,7 +4,7 @@
 * **For any new modal work, starting in release 236, please use `lightning-modal`**
 * **We do not recommend or support the use of `lightning-dialog` in one.app, mobile or any other case where the stacking context can't be controlled**
 * **The `lightning-dialog` is bound by the stacking context, meaning that if any sibling of a root parent of the modal has a higher z-index than the modal dialog, it will show on top of the modal created with the `lightning-dialog` component.**
-* **The `lighting-dialog` is not Aura (one.app) panel manager aware and as such will not open scoped modals nor work correctly when opened from an aura (panel manager based) dialog.**
+* **The `lightning-dialog` is not Aura (one.app) panel manager aware and as such will not open scoped modals nor work correctly when opened from an aura (panel manager based) dialog.**
 
 A `lightning-dialog` component creates a modal dialog, which displays in a layer above the app
 and keeps focus until you close the dialog.

package/src/lightning/dualListbox/__docs__/dualListbox.md

@@ -116,7 +116,7 @@ Use the `variant` attribute with one of these values to position the labels diff
 
 To apply additional styling, use the SLDS [utility classes](https://www.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.
 
-To customize the SLDS styles on the "Move selection to Selected" or "Move selection up" buttons, use SLDS styling hooks. For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+To customize the SLDS styles on the "Move selection to Selected" or "Move selection up" buttons, use SLDS styling hooks. For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 #### Usage Considerations
 

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

@@ -24,12 +24,7 @@
 
   /* 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;
   }
 
@@ -44,10 +39,7 @@
 
   /* 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);
@@ -83,7 +75,6 @@
   }
 
   :host([data-render-mode="shadow"]) .slds-dueling-list__options .slds-is-grabbed {
-    -webkit-transform: rotate(3deg);
     transform: rotate(3deg);
   }
 
@@ -107,19 +98,19 @@
     background-color: transparent;
   }
 
-  :host([data-render-mode="shadow"][variant~='label-inline']) {
+  :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 {
+  :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 {
+  :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
     margin-inline-start: 33%;
   }
 
@@ -185,7 +176,7 @@
     margin-inline-end: 0;
   }
 
-  @media (max-width: 48em) {
+  @media (width <= 48em) {
 
     :host([data-render-mode="shadow"]) .slds-media_responsive {
       display: block;

package/src/lightning/dualListbox/dualListbox.css

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

package/src/lightning/dualListbox/dualListbox.js

@@ -17,8 +17,7 @@ import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelMovedOptionsSingular from '@salesforce/label/LightningDualListbox.movedOptionsSingular';
 import labelMovedOptionsPlural from '@salesforce/label/LightningDualListbox.movedOptionsPlural';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { handleKeyDownOnOption } from './keyboard';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
@@ -60,7 +59,7 @@ const i18n = {
 /**
  * A pair of listboxes that enables multiple options to be selected and reordered.
  */
-export default class LightningDualListbox extends LightningShadowBaseClass {
+export default class LightningDualListbox extends LightningElement {
     // Component attributes
     /**
      * Label for the source options listbox.
@@ -355,7 +354,6 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.keyboardInterface = this.selectKeyboardInterface();