lightning-base-components 1.18.7-alpha → 1.18.7-ssr

package/src/lightning/combobox/combobox.css

@@ -1,6 +1,6 @@
-/* @import 'lightning/sldsCommon';
+@import 'lightning/sldsCommon';
 @import './form-element.slds.css';
-@import './combobox.slds.css'; */
+@import './combobox.slds.css';
 
 :host {
     display: block;

package/src/lightning/combobox/combobox.js

@@ -1,7 +1,8 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     classListMutation,
@@ -29,7 +30,7 @@ const i18n = {
  * A widget that provides an input field that is readonly,
  * accompanied by a dropdown list of selectable options.
  */
-export default class LightningCombobox extends LightningElement {
+export default class LightningCombobox extends LightningShadowBaseClass {
     static delegatesFocus = true;
     static validationOptOut = ['class'];
 
@@ -95,6 +96,7 @@ export default class LightningCombobox extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();

package/src/lightning/combobox/combobox.slds.css

@@ -6,7 +6,7 @@
   /**
    * Invalid State
    */
-  :host([data-render-mode="shadow"][invalid]) [part~='combobox'] {
+  :host([data-render-mode="shadow"][invalid]) [part='combobox'] {
     --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
     --slds-c-inputtext-sizing-border: var(--sds-g-sizing-border-1, 1px);
   }

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

@@ -278,4 +278,12 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }

package/src/lightning/datatable/datatable.js

@@ -84,6 +84,7 @@ import {
     getActiveCellElement,
     getDataRow,
     FOCUS_CLASS,
+    updateActiveCellTabIndexAfterSync,
 } from './keyboard';
 import {
     getRowNumberOffset,
@@ -333,6 +334,8 @@ export default class LightningDatatable extends LightningElement {
         if (hasValidKeyField(this.state)) {
             this.updateRowsAndCellIndexes(this.state);
         }
+
+        updateActiveCellTabIndexAfterSync(this.state);
     }
 
     /**

package/src/lightning/datatable/keyboard.js

@@ -1173,10 +1173,7 @@ export function updateTabIndexActiveCell(state, index = 0) {
     }
 
     // we need to check again because maybe there is no active cell after sync
-    if (state.activeCell && !isRowNavigationMode(state)) {
-        const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        updateTabIndex(state, rowIndex, colIndex, index);
-    }
+    updateActiveCellTabIndexAfterSync(state, index);
     return state;
 }
 
@@ -1417,3 +1414,10 @@ function isActiveCellValid(state) {
     }
     return false;
 }
+
+export function updateActiveCellTabIndexAfterSync(state, index = 0) {
+    if (state.activeCell && !isRowNavigationMode(state)) {
+        const { rowIndex, colIndex } = getIndexesActiveCell(state);
+        updateTabIndex(state, rowIndex, colIndex, index);
+    }
+}

package/src/lightning/datatable/sort.js

@@ -133,7 +133,7 @@ export function updateColumnSortingState(column, state) {
     } else {
         Object.assign(column, {
             sorted: false,
-            sortAriaLabel: column.sortable ? 'none' : null,
+            sortAriaLabel: column.sortable ? 'other' : null,
             sortedDirection: defaultSortDirection,
         });
     }

package/src/lightning/datepicker/datepicker.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/datepicker/datepicker.js

@@ -7,7 +7,8 @@ import labelMinAndMaxRangeMessage from '@salesforce/label/LightningDateTimePicke
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelSelectDateFor from '@salesforce/label/LightningDateTimePicker.selectDateFor';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     normalizeISODate,
     parseFormattedDate,
@@ -63,7 +64,7 @@ const DATE_STYLE = {
     LONG: 'long',
 };
 
-export default class LightningDatePicker extends LightningElement {
+export default class LightningDatePicker extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -381,6 +382,7 @@ export default class LightningDatePicker extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.connected = true;
 
         this.keyboardInterface = this.datepickerKeyboardInterface();
@@ -750,7 +752,7 @@ export default class LightningDatePicker extends LightningElement {
         const isAriaInvalid =
             this.template.host.getAttribute('data-aria-invalid') ||
             this._errorMessage;
-        return computeAriaInvalid(isAriaInvalid, this.value);
+        return computeAriaInvalid(isAriaInvalid, this.hasBadInput() || '');
     }
 
     get helptextAlternativeText() {

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

@@ -278,4 +278,12 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }

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

@@ -102,7 +102,7 @@
    /**
    * Input Text
    */
-    :host([data-render-mode="shadow"]) [part~='input-text'] {
+    :host([data-render-mode="shadow"]) [part='input-text'] {
         /* Host reassignments to composed slds-icon */
         --slds-c-icon-color-foreground: var(
             --slds-c-inputtext-icon-color-foreground,
@@ -148,23 +148,23 @@
    /**
    * Input Container
    */
-    :host([data-render-mode="shadow"]) [part~='input-container'] {
+    :host([data-render-mode="shadow"]) [part='input-container'] {
         flex: 1 0 100%;
         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);
@@ -177,7 +177,7 @@
    /**
    * Input
    */
-    :host([data-render-mode="shadow"]) [part~='input'] {
+    :host([data-render-mode="shadow"]) [part='input'] {
         padding-inline-start: var(
             --slds-c-inputtext-spacing-inline-start,
             var(--sds-g-spacing-3, 0.75rem));
@@ -191,8 +191,8 @@
    /**
    * Focus / active State
    */
-    :host([data-render-mode="shadow"]) [part~="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
-    [part~="input-container"]:active {
+    :host([data-render-mode="shadow"]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
+    [part="input-container"]: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);
@@ -203,7 +203,7 @@
    /**
    * Read Only State
    */
-    :host([data-render-mode="shadow"][readonly]) [part~='input-text'] {
+    :host([data-render-mode="shadow"][readonly]) [part='input-text'] {
         --sds-c-inputtext-spacing-inline-start-readonly: 0;
         --sds-c-inputtext-color-border-focus: transparent;
         --slds-c-inputtext-color-border: transparent;
@@ -218,7 +218,7 @@
    * tied to :host([aria-invalid]) which this subsystem does not use. Instead, it
    * uses :host([invalid]).
    */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-text'] {
+    :host([data-render-mode="shadow"][invalid]) [part='input-text'] {
         --sds-c-inputtext-shadow: 0 0 0 var(--sds-g-sizing-border-1, 1px) inset
             var(--sds-g-color-error-base-50, #ea001e);
         --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
@@ -231,7 +231,7 @@
    * The following styling hooks are included in SDS and need to be reassigned
    * here to prevent a bug with the focus state border and box-shadow
    */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-container']:focus-within {
+    :host([data-render-mode="shadow"][invalid]) [part='input-container']:focus-within {
       --sds-c-inputtext-shadow:
         var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset,
         0 0 var(--sds-g-sizing-border-3, 3px) var(--sds-g-color-brand-base-50, #0176d3);
@@ -243,7 +243,7 @@
    *
    * Both parts form the visible form control.
    */
-    :host([data-render-mode="shadow"][disabled]) [part~='input-container'],:host([data-render-mode="shadow"][disabled]) [part~='input'] {
+    :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(--sds-g-color-neutral-base-95, #f3f3f3);
         --sds-c-inputtext-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
@@ -253,10 +253,10 @@
     /**
    * Label
    *
-   * Add [part~='input-text'] to increase specificity and
-   * avoid collisions with other components using [part~='label'] (e.g. slds-input-checkbox)
+   * Add [part='input-text'] to increase specificity and
+   * avoid collisions with other components using [part='label'] (e.g. slds-input-checkbox)
    */
-    :host([data-render-mode="shadow"]) [part~='input-text'] [part~='label'] {
+    :host([data-render-mode="shadow"]) [part='input-text'] [part='label'] {
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
         color: var(
@@ -280,7 +280,7 @@
    * so we don't add spacing to other icons composed in the component, e.g.,
    * the icon in the inline help text.
    */
-    :host([data-render-mode="shadow"]) [part~='start'] {
+    :host([data-render-mode="shadow"]) [part='start'] {
         --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
@@ -297,11 +297,11 @@
    * 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'] {
+        :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);
         }
@@ -323,7 +323,7 @@
         left: var(--sds-g-spacing-3, 0.75rem);
         fill: var(--slds-g-color-neutral-base-50, #747474);
     }
-    
+
     :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon {
         background-color: transparent;
     }
@@ -375,7 +375,7 @@
         --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
         --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
     }
-   
+
   /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *

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.js

@@ -4,7 +4,8 @@ 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 { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -34,7 +35,7 @@ const i18n = {
     helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
-export default class LightningDateTimePicker extends LightningElement {
+export default class LightningDateTimePicker extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -409,6 +410,7 @@ export default class LightningDateTimePicker extends LightningElement {
     }
 
     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

@@ -278,4 +278,12 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }

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

@@ -102,7 +102,7 @@
    /**
    * Input Text
    */
-    :host([data-render-mode="shadow"]) [part~='input-text'] {
+    :host([data-render-mode="shadow"]) [part='input-text'] {
         /* Host reassignments to composed slds-icon */
         --slds-c-icon-color-foreground: var(
             --slds-c-inputtext-icon-color-foreground,
@@ -148,23 +148,23 @@
    /**
    * Input Container
    */
-    :host([data-render-mode="shadow"]) [part~='input-container'] {
+    :host([data-render-mode="shadow"]) [part='input-container'] {
         flex: 1 0 100%;
         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);
@@ -177,7 +177,7 @@
    /**
    * Input
    */
-    :host([data-render-mode="shadow"]) [part~='input'] {
+    :host([data-render-mode="shadow"]) [part='input'] {
         padding-inline-start: var(
             --slds-c-inputtext-spacing-inline-start,
             var(--sds-g-spacing-3, 0.75rem));
@@ -191,8 +191,8 @@
    /**
    * Focus / active State
    */
-    :host([data-render-mode="shadow"]) [part~="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
-    [part~="input-container"]:active {
+    :host([data-render-mode="shadow"]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
+    [part="input-container"]: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);
@@ -203,7 +203,7 @@
    /**
    * Read Only State
    */
-    :host([data-render-mode="shadow"][readonly]) [part~='input-text'] {
+    :host([data-render-mode="shadow"][readonly]) [part='input-text'] {
         --sds-c-inputtext-spacing-inline-start-readonly: 0;
         --sds-c-inputtext-color-border-focus: transparent;
         --slds-c-inputtext-color-border: transparent;
@@ -218,7 +218,7 @@
    * tied to :host([aria-invalid]) which this subsystem does not use. Instead, it
    * uses :host([invalid]).
    */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-text'] {
+    :host([data-render-mode="shadow"][invalid]) [part='input-text'] {
         --sds-c-inputtext-shadow: 0 0 0 var(--sds-g-sizing-border-1, 1px) inset
             var(--sds-g-color-error-base-50, #ea001e);
         --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
@@ -231,7 +231,7 @@
    * The following styling hooks are included in SDS and need to be reassigned
    * here to prevent a bug with the focus state border and box-shadow
    */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-container']:focus-within {
+    :host([data-render-mode="shadow"][invalid]) [part='input-container']:focus-within {
       --sds-c-inputtext-shadow:
         var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset,
         0 0 var(--sds-g-sizing-border-3, 3px) var(--sds-g-color-brand-base-50, #0176d3);
@@ -243,7 +243,7 @@
    *
    * Both parts form the visible form control.
    */
-    :host([data-render-mode="shadow"][disabled]) [part~='input-container'],:host([data-render-mode="shadow"][disabled]) [part~='input'] {
+    :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(--sds-g-color-neutral-base-95, #f3f3f3);
         --sds-c-inputtext-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
@@ -253,10 +253,10 @@
     /**
    * Label
    *
-   * Add [part~='input-text'] to increase specificity and
-   * avoid collisions with other components using [part~='label'] (e.g. slds-input-checkbox)
+   * Add [part='input-text'] to increase specificity and
+   * avoid collisions with other components using [part='label'] (e.g. slds-input-checkbox)
    */
-    :host([data-render-mode="shadow"]) [part~='input-text'] [part~='label'] {
+    :host([data-render-mode="shadow"]) [part='input-text'] [part='label'] {
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
         color: var(
@@ -280,7 +280,7 @@
    * so we don't add spacing to other icons composed in the component, e.g.,
    * the icon in the inline help text.
    */
-    :host([data-render-mode="shadow"]) [part~='start'] {
+    :host([data-render-mode="shadow"]) [part='start'] {
         --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
@@ -297,11 +297,11 @@
    * 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'] {
+        :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);
         }
@@ -323,7 +323,7 @@
         left: var(--sds-g-spacing-3, 0.75rem);
         fill: var(--slds-g-color-neutral-base-50, #747474);
     }
-    
+
     :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon {
         background-color: transparent;
     }
@@ -375,7 +375,7 @@
         --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
         --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
     }
-   
+
   /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *

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

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

@@ -278,4 +278,12 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }

package/src/lightning/dynamicIcon/dynamicIcon.js

@@ -1,4 +1,5 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 import eqHtml from './eq.html';
@@ -12,7 +13,7 @@ import defaultHtml from './default.html';
 /**
  * Represents various animated icons with different states.
  */
-export default class LightningDynamicIcon extends LightningElement {
+export default class LightningDynamicIcon extends LightningShadowBaseClass {
     /**
      * The alternative text used to describe the dynamic icon.
      * This text should describe what's happening.

package/src/lightning/dynamicIcon/ellie.css

@@ -1 +1 @@
-/* @import './dynamic-icon-ellie.slds.css'; */
+@import './dynamic-icon-ellie.slds.css';

package/src/lightning/dynamicIcon/eq.css

@@ -1 +1 @@
-/* @import './dynamic-icon-eq.slds.css'; */
+@import './dynamic-icon-eq.slds.css';

package/src/lightning/dynamicIcon/score.css

@@ -1 +1 @@
-/* @import './dynamic-icon-score.slds.css'; */
+@import './dynamic-icon-score.slds.css';

package/src/lightning/dynamicIcon/strength.css

@@ -1 +1 @@
-/* @import './dynamic-icon-strength.slds.css'; */
+@import './dynamic-icon-strength.slds.css';

package/src/lightning/dynamicIcon/trend.css

@@ -1 +1 @@
-/* @import './dynamic-icon-trend.slds.css'; */
+@import './dynamic-icon-trend.slds.css';

package/src/lightning/dynamicIcon/waffle.css

@@ -1 +1 @@
-/* @import './dynamic-icon-waffle.slds.css'; */
+@import './dynamic-icon-waffle.slds.css';