lightning-base-components 1.17.2-alpha → 1.17.5-alpha

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"; */

package/src/lightning/select/select.html

@@ -1,5 +1,5 @@
 <template>
-    <label class={computedLabelClass} for="select">
+    <label class={computedLabelClass} for="select" part="select-label">
         <template if:true={required}>
             <abbr class="slds-required" title={i18n.required}>*</abbr>
         </template>
@@ -23,7 +23,7 @@
                 accesskey={accessKey}
                 size={size}
                 aria-invalid={computedAriaInvalid}
-            >
+                part="select">
                 <template for:each={options} for:item="option">
                     <template if:true={option.disabled}>
                         <option disabled key={option.value} value={option.value}>{option.label}</option>

package/src/lightning/select/select.js

@@ -7,6 +7,7 @@ import {
     getRealDOMId,
     normalizeBoolean,
     synchronizeAttrs,
+    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import {
     FieldConstraintApi,
@@ -122,6 +123,7 @@ export default class LightningSelect extends LightningElement {
     set variant(value) {
         this._variant = normalizeVariant(value);
         this.updateClassList();
+        reflectAttribute(this, 'variant', this._variant);
     }
 
     /**
@@ -136,6 +138,7 @@ export default class LightningSelect extends LightningElement {
 
     set multiple(value) {
         this._multiple = normalizeBoolean(value);
+        reflectAttribute(this, 'multiple', this._multiple);
     }
 
     /**

package/src/lightning/select/select.slds.css

@@ -0,0 +1,398 @@
+/* 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~='help-text'] {
+    --slds-c-buttonicon-color-background: var(--slds-c-helptext-color-background);
+    --slds-c-buttonicon-color-background-hover: var(--slds-c-helptext-color-background-hover);
+    --slds-c-buttonicon-color-background-focus: var(--slds-c-helptext-color-background-focus);
+    --slds-c-buttonicon-color-background-active: var(--slds-c-helptext-color-background-active);
+    --slds-c-buttonicon-color-foreground: var(--slds-c-helptext-color-foreground);
+    --slds-c-buttonicon-color-foreground-hover: var(--slds-c-helptext-color-foreground-hover);
+    --slds-c-buttonicon-color-foreground-focus: var(--slds-c-helptext-color-foreground-focus);
+    --slds-c-buttonicon-color-foreground-active: var(--slds-c-helptext-color-foreground-active);
+    --slds-c-buttonicon-color-border: var(--slds-c-helptext-color-border, transparent);
+    --slds-c-buttonicon-color-border-hover: var(--slds-c-helptext-color-border-hover, transparent);
+    --slds-c-buttonicon-color-border-focus: var(--slds-c-helptext-color-border-focus, transparent);
+    --slds-c-buttonicon-color-border-active: var(--slds-c-helptext-color-border-active, transparent);
+    --slds-c-buttonicon-spacing-block: var(--slds-c-helptext-spacing-block, 0);
+    --slds-c-buttonicon-spacing-inline: var(--slds-c-helptext-spacing-inline, 0);
+
+    /**
+     * The extra wrapper div creates a new formatting context which messes up
+     * our consistent height and vertical alignment. We don't want this element
+     * to inherit any styling so we pass through to the contents. This element
+     * is for setting Styling Hooks only.
+     */
+    display: contents;
+  }
+}
+
+/* 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;
+        }
+    }
+}
+
+@supports (--styling-hooks: '') {
+    /* SELECT */
+    :host([data-render-mode="shadow"]) [part~='select'] {
+      height: calc(var(--slds-c-select-input-sizing-height, 1.875rem) + (var(--sds-g-sizing-border-1, 1px) * 2));
+      width: 100%;
+      border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-c-select-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
+      border-radius: var(--slds-c-select-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+      background-color: var(--slds-c-select-color-background,
+      var(--sds-g-color-neutral-base-100, #ffffff));
+      color: var(--slds-c-select-text-color, currentColor, var(--sds-g-color-neutral-base-10, #181818));
+      box-shadow: var(--slds-c-select-shadow);
+      transition: border 0.1s linear, background-color 0.1s linear;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='select'][required] {
+      box-shadow: none; /* @legacy: This is ported over from SLDS but not clear why this design decision is made.  */
+    }
+
+    :host([data-render-mode="shadow"]) [part~='select']:focus,:host([data-render-mode="shadow"]) 
+    [part~='select']:active {
+      outline: 0;
+      border-color: var(--slds-c-select-color-border-focus, var(--sds-g-color-brand-base-60, #1b96ff));
+      background-color: var(--slds-c-select-color-background-focus, var(--sds-g-color-neutral-base-100, #ffffff));
+      color: var(--slds-c-select-text-color-focus);
+      box-shadow: var(--slds-c-select-shadow-focus, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
+    }
+
+    :host([data-render-mode="shadow"]) [part~='select'][disabled] {
+      background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+      border-color: var(--sds-g-color-neutral-base-80, #c9c9c9);
+      color: var(--sds-g-color-neutral-base-50, #747474);
+      cursor: not-allowed;
+      user-select: none;
+      opacity: 1;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='select'][disabled]:focus,:host([data-render-mode="shadow"])  
+    [part~='select'][disabled]:active {
+      box-shadow: none;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='select'][size],:host([data-render-mode="shadow"])  
+    [part~='select'][multiple] {
+      min-height: calc(var(--slds-c-select-input-sizing-height) + (var(--sds-g-sizing-border-1, 1px) * 2));
+      height: inherit;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='select'][size] option,:host([data-render-mode="shadow"])  
+    [part~='select'][multiple] option {
+      padding: var(--sds-g-spacing-2, 0.5rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-select_container {
+      position: relative;
+      color: var(--slds-c-select-container-color);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-select_container [part~="select"] {
+      /* stylelint-disable property-no-vendor-prefix */
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      /* stylelint-enable property-no-vendor-prefix */
+      padding: 0 var(--sds-g-spacing-5, 1.5rem) 0 var(--sds-g-spacing-2, 0.5rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-select_container [part~="select"]::-ms-expand {
+      display: none;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-select_container::before,:host([data-render-mode="shadow"])  
+    .slds-select_container::after {
+      position: absolute;
+      content: '';
+      display: block;
+      right: var(--sds-g-spacing-2, 0.5rem);
+      width: 0;
+      height: 0;
+      border-left: 3px solid transparent;
+      border-right: 3px solid transparent;
+      pointer-events: none;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-select_container::before {
+      border-bottom: 5px solid currentColor;
+      top: calc((var(--sds-g-sizing-8, 1.75rem) / 2) - 6px);
+    }
+ 
+    :host([data-render-mode="shadow"]) .slds-select_container::after {
+      border-top: 5px solid currentColor;
+      bottom: calc((var(--sds-g-sizing-8, 1.75rem) / 2) - 6px);
+    }
+
+    :host([data-render-mode="shadow"][multiple]) .slds-select_container::before,:host([data-render-mode="shadow"][multiple]) .slds-select_container::after {
+      display: none;
+    }
+
+    :host([data-render-mode="shadow"][invalid]) [part~="select"] {
+      border-color: var(--sds-g-color-error-base-50, #ea001e);
+      box-shadow: var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset;
+      background-clip: padding-box;
+    }
+
+    :host([data-render-mode="shadow"][invalid]) [part~="select"]:focus,:host([data-render-mode="shadow"][invalid]) [part~="select"]:active {
+      box-shadow: var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+    }
+
+    /* LABEL */
+
+    /* Styling Specifically for select label */
+    :host([data-render-mode="shadow"]) [part~="select-label"] {
+      padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+      color: var(--slds-c-select-label-color, var(--sds-g-color-neutral-base-30, #444444));
+      font-size: var(--slds-c-select-label-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
+  
+      /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
+      display: inline-flex;
+  
+      /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
+      column-gap: 0.125rem;
+    }
+
+    /* ASSISTIVE TEXT */
+    :host([data-render-mode="shadow"]) .slds-assistive-text {
+      position: absolute !important;
+      margin: -1px !important;
+      border: 0 !important;
+      padding: 0 !important;
+      width: 1px !important;
+      height: 1px !important;
+      overflow: hidden !important;
+      clip: rect(0 0 0 0) !important;
+      text-transform: none !important;
+      white-space: nowrap !important;
+    }
+}