lightning-base-components 1.17.3-alpha → 1.17.6-alpha

package/src/lightning/modalFooter/modalFooter.js

@@ -8,6 +8,9 @@ const hideClass = 'slds-hide';
 // selectors
 const footerSelector = `.${footerClass}`;
 const footerSlotSelector = '[data-footer-slot]';
+// timeout footer height check
+const SIZE_CHECK_TIMER = 50;
+const MAX_HEIGHT_CHECKS = 4;
 
 /**
  * The modal footer component to display footer content in lightning modal.
@@ -18,6 +21,9 @@ export default class LightningModalFooter extends LightningElement {
     initialSlotRender = true;
     hideFooter = false;
     unregisterCallback = null;
+    footerHeightTracked = 0;
+    footerHeightChecked = 0;
+    timeoutId = 0;
 
     /**
      * Handle the default slot change event
@@ -57,7 +63,9 @@ export default class LightningModalFooter extends LightningElement {
         const divElem = this.template.querySelector(footerSelector);
         const footerRect = divElem ? divElem.getBoundingClientRect() : {};
         const { height } = footerRect;
-        return height || 0;
+        const heightValue = height || 0;
+        this.footerHeightTracked = heightValue;
+        return heightValue;
     }
 
     /**
@@ -125,6 +133,47 @@ export default class LightningModalFooter extends LightningElement {
         this.dispatchEvent(evtRegister);
     }
 
+    /**
+     * Provide a means to check whether the tracked footer height
+     * is different than the current footer height to only call modalBase
+     * when there is a change in footer height
+     * @private
+     */
+    hasFooterHeightChanged() {
+        // note: calling this.footerHeight updates this.footerHeightTracked
+        // order of values checked here is required
+        const previousRenderedHeight = this.footerHeightTracked;
+        const currentRenderedHeight = this.footerHeight;
+        return currentRenderedHeight !== previousRenderedHeight;
+    }
+
+    /**
+     * On first render, provide a quick means of updating modalBase,
+     * if the modalFooter height changes.
+     * In rare cases, the height of the footer between the
+     * normal or full size rendering can change depending on
+     * content of footer and window width
+     * @private
+     */
+    scheduleFooterHeightCheck() {
+        if (this.initialRender && this.timeoutId === 0) {
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            this.timeoutId = setInterval(() => {
+                if (this.footerHeightChecked >= MAX_HEIGHT_CHECKS) {
+                    clearTimeout(this.timeoutId);
+                    this.timeoutId = 0;
+                    this.footerHeightChecked = 0;
+                } else {
+                    this.footerHeightChecked++;
+                    const hasChanged = this.hasFooterHeightChanged();
+                    if (hasChanged) {
+                        this.registerWithParent();
+                    }
+                }
+            }, SIZE_CHECK_TIMER);
+        }
+    }
+
     /**
      * When modal footer is being created, initialize
      * private tracked modal footer state
@@ -137,6 +186,9 @@ export default class LightningModalFooter extends LightningElement {
         this.initialSlotRender = true;
         this.hideFooter = false;
         this.unregisterCallback = null;
+        this.footerHeightTracked = 0;
+        this.footerHeightChecked = 0;
+        this.timeoutId = 0;
     }
 
     connectedCallback() {
@@ -149,11 +201,15 @@ export default class LightningModalFooter extends LightningElement {
         if (this.unregisterCallback) {
             this.unregisterCallback();
         }
+        clearTimeout(this.timeoutId);
+        this.timeoutId = 0;
+        this.footerHeightChecked = 0;
     }
 
     renderedCallback() {
         if (this.initialRender) {
             this.registerWithParent();
+            this.scheduleFooterHeightCheck();
             this.initialRender = false;
         }
         this.hideFooter = !this.isDefaultSlotPopulated;

package/src/lightning/navigation/__docs__/navigation.md

@@ -25,7 +25,7 @@ export default class MyCustomElement extends NavigationMixin(
 ) {}
 ```
 
-The `NavigationMixin` adds two APIs to your component's class.
+The `NavigationMixin` adds two APIs to your component's class. Invoking these functions before the element is connected to the DOM can have unexpected results.
 
 -   `[NavigationMixin.Navigate](pageReference, [replace])` - A component calls this API to navigate to another page in the application.
 -   `[NavigationMixin.GenerateUrl](pageReference)` - A component calls this API to get a `promise` that resolves to the resulting URL. The component can use the URL in the `href` attribute of an anchor. It can also use the URL to open a new window using the `window.open(url)` browser API.

package/src/lightning/popup/popover.slds.css

@@ -0,0 +1,121 @@
+
+@supports (--styling-hooks: '') {
+    :host([data-render-mode="shadow"]) .slds-popover {
+        position: relative;
+        border-radius: var(--sds-g-radius-border-2, 0.25rem);
+        width: var(--sds-g-sizing-15, 20rem);
+        min-height: calc(var(--sds-g-sizing-5, 1rem) * 2);
+        z-index: var(--slds-c-popover-position-zindex, 6000);
+        background-color: var(--slds-c-popover-color-background, 
+            var(--slds-g-color-neutral-base-100, 
+                var(--sds-g-color-neutral-base-100, #ffffff)));
+        display: inline-block;
+        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); 
+        border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
+    }
+    
+    :host([data-render-mode="shadow"]) .slds-popover__meta {
+        margin-block-end: var(--sds-g-sizing-4, 0.75rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__body {
+        padding-block: var(--sds-g-spacing-2, 0.5rem);
+        padding-inline: var(--sds-g-spacing-3, 0.75rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__body .slds-popover__header {
+        padding-block: 0 var(--sds-g-sizing-3, 0.5rem);
+        padding-inline: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__body,:host([data-render-mode="shadow"]) 
+    .slds-popover__header,:host([data-render-mode="shadow"]) 
+    .slds-popover__footer {
+        position: relative;
+        padding-block: var(--sds-g-spacing-2, 0.5rem);
+        padding-inline: var(--sds-g-spacing-3, 0.75rem);
+        word-wrap: break-word;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__header {
+        border-bottom: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__footer {
+        border-block-start: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
+        background-color: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
+        border-end-start-radius: inherit;
+        border-end-end-radius: inherit;
+        padding-block: var(--sds-g-spacing-2, 0.5rem);
+        padding-inline: var(--sds-g-spacing-3, 0.75rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__footer_form {
+        text-align: center;
+        background: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
+        border-radius: 0 0 var(--sds-g-radius-border-2, 0.25rem) var(--sds-g-radius-border-2, 0.25rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__body_small {
+        max-height: var(--sds-g-sizing-14, 15rem);
+        overflow-y: auto;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__close {
+        position: relative;
+        margin-block: var(--sds-g-spacing-1, 0.25rem);
+        margin-inline: var(--sds-g-spacing-1, 0.25rem);
+        z-index: calc(var(--slds-c-popover-position-zindex, 6000) + 1);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_small {
+        max-width: var(--sds-g-sizing-14, 15rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_medium {
+        min-width: var(--sds-g-sizing-15, 20rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_large {
+        min-width: 25rem;
+        max-width: 512px;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover[class*="theme_"] {
+        border: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover *:last-child {
+        margin-bottom: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_full-width {
+        width: 100%;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_hide {
+        display: none;
+    }
+    
+    :host([data-render-mode="shadow"]) .slds-popover_dark {
+        background-color: var(--slds-g-color-brand-base-30, var(--sds-g-color-brand-base-30, #014486));
+        color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-badge {
+        background-color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__close {
+        color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-icon-text-default {
+        fill: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__footer {
+        border-top-color: var(--slds-g-color-brand-base-10, var(--sds-g-color-brand-base-10, #001639));
+        background-color: var(--slds-g-color-brand-base-20, var(--sds-g-color-brand-base-20, #032d60));
+    }
+}

package/src/lightning/popup/popup.css

@@ -0,0 +1,3 @@
+/* @import 'lightning/sldsCommon';
+@import './popover.slds.css';
+ */

package/src/lightning/positionLibrary/direction.js

@@ -179,24 +179,17 @@ export function checkFlipPossibility(parent, element, target, leftAsBoundary) {
 
     // If there is no space above and below, recalculate space based on window
     // when there is still no space above and below based on window then select the maximum available space
-    if (!hasSpaceAbove && !hasSpaceBelow && parent) {
-        belowSpace =
-            viewPort.height -
-            (referenceElemRect.bottom - viewPort.top) -
-            height;
-        if (belowSpace < 0) {
-            if (parent.scrollTop > 0) {
-                aboveSpace =
-                    referenceElemRect.top -
-                    viewPort.top +
-                    parent.scrollTop -
-                    height;
-            }
-        }
-        hasSpaceAbove =
-            aboveSpace >= 0 || (belowSpace < 0 && aboveSpace > belowSpace);
+
+    if (
+        !hasSpaceAbove &&
+        !hasSpaceBelow &&
+        parent &&
+        element.style &&
+        element.style.position === 'fixed'
+    ) {
+        hasSpaceAbove = referenceElemRect.top - windowViewPort.top - height > 0;
         hasSpaceBelow =
-            belowSpace >= 0 || (aboveSpace < 0 && belowSpace > aboveSpace);
+            windowViewPort.height - referenceElemRect.bottom - height > 0;
     }
 
     // Assuming center alignment, does the viewport have space to fit half of the element around

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -18,6 +18,13 @@ export default class LightningPrimitiveBubble extends LightningElement {
         contentId: '',
     };
 
+    /*
+        Tooltip manages the visibility state of the PrimitiveBubble element
+        to ensure there are no differences beteween TooltipLibrary._visible and
+        LightningPrimitiveBubble.state.visible. See @W-12512833
+    */
+    @api disableVisibilityChangeOnLeave;
+
     @api
     get contentId() {
         return this.state.contentId;
@@ -135,6 +142,14 @@ export default class LightningPrimitiveBubble extends LightningElement {
     }
 
     handleMouseLeave() {
-        this.visible = false;
+        /**
+         * This causes a number of issues when primitive-bubble is managed through tooltipLibrary, due to the fact
+         * that changing the visibility inside the primitive bubble creates a mismatch with the tooltipLibrary Tooltip._visible state.
+         * This contributes to a number of problems and can result in the tooltip being made visible again in unwanted situations.
+         * (W-12512833). Remove this completely if no longer required by other consumers.
+         */
+        if (!this.disableVisibilityChangeOnLeave) {
+            this.visible = false;
+        }
     }
 }

package/src/lightning/select/__docs__/select.md

@@ -6,6 +6,15 @@ examples:
     - name: multiple
       label: Multiple Select
       description: A dropdown menu with multiple selection enabled.
+    - name: disabled
+      label: Disabled Select
+      description: A dropdown menu with disabled state.
+    - name: hidden
+      label: Hidden Select
+      description: A dropdown menu with hidden label.
+    - name: inline
+      label: Inline Select
+      description: A dropdown menu with inline label.
 ---
 
 `lightning-select` enables single and multiple selection on a menu of options using the HTML `select` element and `option` elements. To specify whether multiple options can be selected, use the `multiple` attribute. The `size` attribute can be used to specify how many options are visible at once. `lightning-select` also accepts most general form input attributes such as `required` and `disabled`.

package/src/lightning/select/__examples__/disabled/disabled.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-select
+        value={selectVal}
+        label="Select a product"
+        options={productOptions}
+        onchange={handleChange}
+        disabled
+        message-when-value-missing="Which area can we help you with?">
+    </lightning-select>
+</template>

package/src/lightning/select/__examples__/disabled/disabled.js

@@ -0,0 +1,27 @@
+import { LightningElement } from 'lwc';
+
+export default class SelectDisabled extends LightningElement {
+    selectVal = '';
+    productOptions = [
+        {
+            label: '--None--',
+            value: '',
+        },
+        {
+            label: 'Sales',
+            value: 'sales',
+        },
+        {
+            label: 'Marketing',
+            value: 'marketing',
+        },
+        {
+            label: 'Service',
+            value: 'service',
+        },
+    ];
+
+    handleChange(event) {
+        this.selectVal = event.detail.value;
+    }
+}

package/src/lightning/select/__examples__/hidden/hidden.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-select
+        value={selectVal}
+        label="Select a product"
+        options={productOptions}
+        onchange={handleChange}
+        variant="label-hidden"
+        message-when-value-missing="Which area can we help you with?">
+    </lightning-select>
+</template>

package/src/lightning/select/__examples__/hidden/hidden.js

@@ -0,0 +1,27 @@
+import { LightningElement } from 'lwc';
+
+export default class SelectHidden extends LightningElement {
+    selectVal = '';
+    productOptions = [
+        {
+            label: '--None--',
+            value: '',
+        },
+        {
+            label: 'Sales',
+            value: 'sales',
+        },
+        {
+            label: 'Marketing',
+            value: 'marketing',
+        },
+        {
+            label: 'Service',
+            value: 'service',
+        },
+    ];
+
+    handleChange(event) {
+        this.selectVal = event.detail.value;
+    }
+}

package/src/lightning/select/__examples__/inline/inline.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-select
+        name="tickets"
+        value={selectVal}
+        label="How many tickets?"
+        options={productOptions}
+        onchange={handleChange}
+        variant="label-inline">
+    </lightning-select>
+</template>

package/src/lightning/select/__examples__/inline/inline.js

@@ -0,0 +1,27 @@
+import { LightningElement } from 'lwc';
+
+export default class SelectInline extends LightningElement {
+    selectVal = '';
+    productOptions = [
+        {
+            label: '--None--',
+            value: '',
+        },
+        {
+            label: 'Sales',
+            value: 'sales',
+        },
+        {
+            label: 'Marketing',
+            value: 'marketing',
+        },
+        {
+            label: 'Service',
+            value: 'service',
+        },
+    ];
+
+    handleChange(event) {
+        this.selectVal = event.detail.value;
+    }
+}

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

@@ -0,0 +1,232 @@
+
+/* 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: '') {
+    /* FORM ELEMENT: BASE */
+    :host([data-render-mode="shadow"]) .slds-form-element {
+        position: relative;
+        min-width: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        hyphens: auto;
+        display: inline-block;
+        color: var(--sds-g-color-neutral-base-30, #444444);
+        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        margin-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
+        margin: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__control {
+        clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio,:host([data-render-mode="shadow"]) 
+    .slds-form-element__control .slds-checkbox {
+        display: block;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon {
+        display: inline-block;
+        position: relative;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        vertical-align: top;
+        line-height: var(--sds-g-font-lineheight-1, 1);
+        z-index: 1;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
+    .slds-form-element__helper { 
+        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+        margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        display: block;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
+        flex-basis: 0%;
+        border-bottom: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
+        padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        padding-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__legend {
+        font-weight: var(--sds-g-font-weight-7, 700);
+        float: left;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__addon {
+        display: inline-block;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
+        margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        align-self: center;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-word;
+        display: inline-block;
+        font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+        font-weight: var(--sds-g-font-weight-4, 400);
+        color: var(--sds-g-color-neutral-base-10, #181818);
+        width: 100%;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
+        min-height: calc(var(--sds-g-sizing-6, 1.25rem) + 1px);
+        vertical-align: bottom;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-required {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        margin-inline-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: STACKED */
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+        display: block;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
+        padding: 0 var(--sds-g-spacing-1, 0.25rem);
+    }
+  
+    :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']):not([class*="slds-size"]) {
+          width: 100%;
+          flex-basis: 100%;
+    }
+  
+    :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 {
+        width: 100%;
+        flex-basis: 100%;
+        clear: left;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+        float: none;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    /* --------------------------------------- */
+    
+    /* FORM ELEMENT: INLINE */
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) {
+        display: block;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']):not([class*="slds-size"]) {
+        width: 100%;
+        flex-basis: 100%;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
+        padding: var(--sds-g-spacing-1, 0.25rem);   
+    }
+  
+    :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 {
+          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 */
+          flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
+          margin-block-end: 0;
+          position: relative;
+          z-index: 1;
+        }
+  
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+          padding-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 {
+          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 {
+            width: auto;
+            max-width: 100%;
+            -ms-flex-preferred-size: auto;
+            flex-basis: auto;
+            float: none;
+            position: relative;
+            padding-inline-start: 0;
+            margin-block-end: 0;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+            clear: none;
+        }
+    }
+}

package/src/lightning/select/select.css

@@ -0,0 +1,3 @@
+/* @import 'lightning/sldsCommon';
+@import "./form-element.slds.css";
+@import "./select.slds.css"; */