lightning-base-components 1.22.3-alpha → 1.26.2-rc.0-alpha

package/src/lightning/baseCombobox/dropdown.slds.css

@@ -1,8 +1,4 @@
 
-/* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
-Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"]) .slds-nubbin_top::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top::after {
     width: var(--slds-g-spacing-4);
@@ -18,10 +14,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     margin-left: calc((var(--slds-g-spacing-4) * 0.5) * -1);
     z-index: -1;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_top::after {
     box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_top-left::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-left-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-left::after,:host([data-render-mode="shadow"]) 
@@ -39,11 +37,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     margin-left: calc((var(--slds-g-spacing-4) * 0.5) * -1);
     z-index: -1;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_top-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-left-corner::after {
     box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_top-right::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
@@ -63,11 +63,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     margin-right: calc((var(--slds-g-spacing-4) * 0.5) * -1);
     z-index: -1;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::after {
     box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom::after {
     width: var(--slds-g-spacing-4);
@@ -83,10 +85,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     margin-left: calc((var(--slds-g-spacing-4) * 0.5) * -1);
     z-index: -1;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom::after {
     box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
@@ -106,11 +110,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     margin-top: calc((var(--slds-g-spacing-4) * 0.5) * -1);
     z-index: -1;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left-corner::after {
     box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
@@ -129,11 +135,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     margin-left: calc((var(--slds-g-spacing-4) * 0.5) * -1);
     z-index: -1;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right-corner::after {
     box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
   }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_left::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left::after {
     width: var(--slds-g-spacing-4);
@@ -149,10 +157,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     margin-top: calc((var(--slds-g-spacing-4) * 0.5) * -1);
     z-index: -1;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_left::after {
     box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_left-top::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
@@ -170,11 +180,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     top: var(--slds-g-spacing-5);
     z-index: -1;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top-corner::after {
     box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
@@ -193,15 +205,18 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     bottom: var(--slds-g-spacing-4);
     z-index: -1;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::before {
     margin-bottom: -1px;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::after {
     box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_right::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right::after {
     width: var(--slds-g-spacing-4);
@@ -217,10 +232,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     margin-top: calc((var(--slds-g-spacing-4) * 0.5) * -1);
     z-index: -1;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_right::after {
     box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_right-top::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
@@ -238,11 +255,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     top: var(--slds-g-spacing-5);
     z-index: -1;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top-corner::after {
     box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
@@ -261,71 +280,90 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     bottom: var(--slds-g-spacing-4);
     z-index: -1;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::before {
     margin-bottom: -1px;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::after {
     box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_top-left-corner {
     border-radius: var(--slds-g-sizing-border-2) var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-4);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_top-left-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-left-corner::after {
     left: var(--slds-g-spacing-3);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left-corner {
     border-radius: var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-2);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left-corner::after {
     left: var(--slds-g-spacing-3);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_top-right-corner {
     border-radius: var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-2) var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-4);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::after {
     right: var(--slds-g-spacing-3);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right-corner {
     border-radius: var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-2) var(--slds-g-sizing-border-4);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right-corner::after {
     right: var(--slds-g-spacing-3);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_left-top-corner {
     border-radius: var(--slds-g-sizing-border-2) var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-4);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_left-top-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top-corner::after {
     top: var(--slds-g-spacing-3);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_right-top-corner {
     border-radius: var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-2) var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-4);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_right-top-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top-corner::after {
     top: var(--slds-g-spacing-3);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom-corner {
     border-radius: var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-2);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::after {
     bottom: var(--slds-g-spacing-1);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom-corner {
     border-radius: var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-4) var(--slds-g-sizing-border-2) var(--slds-g-sizing-border-4);
 }
+
 :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::after {
     bottom: var(--slds-g-spacing-1);
 }
+
 :host([data-render-mode="shadow"]) [part~='dropdown'] {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     --_dropdown-size-x-small: 12rem;
@@ -336,7 +374,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
 
     background-color:var(--slds-g-color-surface-container-1);
-    color: var(--slds-g-color-on-surface-3);
+    color: var(--slds-c-dropdown-color, var(--slds-g-color-on-surface-3));
     border-radius: var(--slds-g-radius-border-2);
     border-width: var(--slds-g-sizing-border-1);
     border-color: var(--slds-g-color-border-1);
@@ -353,18 +391,28 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable */
     max-width: var(--_dropdown-size-medium);
     /* stylelint-enable */
+    width: max-content; /* This is needed as replacement for legacy `white-space: nowrap;` from the inner menu-item */
     margin-block-start: calc(var(--slds-g-spacing-1) / 2);
     margin-block-end: calc(var(--slds-g-spacing-1) / 2);
-    font-size: var(--slds-g-font-scale-neg-1);
+    font-family: var(--slds-c-dropdown-font-family);
+    font-size: var(--slds-c-dropdown-font-size, var(--slds-g-font-scale-neg-1));
+    font-weight: var(--slds-c-dropdown-font-weight);
+    font-style: var(--slds-c-dropdown-font-style);
+    text-decoration: var(--slds-c-dropdown-font-decoration);
+    line-height: var(--slds-c-dropdown-font-lineheight);
+    letter-spacing: var(--slds-c-dropdown-letter-spacing);
     border-style: solid;
     transform: translateX(-50%);
   }
+
 /* May need to be moved into menu-item but doesn't appear supported atm */
+
 :host([data-render-mode="shadow"]) mark {
     font-weight: var(--slds-g-font-weight-bold);
     background-color: transparent;
     color: inherit;
   }
+
 :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -377,28 +425,35 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     text-transform: none !important;
     white-space: nowrap !important;
   }
+
 :host([data-render-mode="shadow"].slds-dropdown-trigger),:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger {
     position: relative;
     display: inline-block; /* Required to expand to block children */
   }
+
 :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger .slds-dropdown {
     top: 100%;
   }
+
 :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown_bottom,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger .slds-dropdown_bottom {
     top: auto;
   }
+
 /* Deal with positioning when target is just an icon */
+
 :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'],:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'] {
     left: calc(var(--slds-g-spacing-2) * -1);
   }
+
 :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'],:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'] {
     right: calc(var(--slds-g-spacing-2) * -1);
   }
+
 :host([data-render-mode="shadow"].slds-dropdown-trigger_hover) .slds-dropdown,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger_hover .slds-dropdown {
     visibility: hidden;
@@ -407,11 +462,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     transition: opacity var(--_duration-quickly) linear, visibility var(--_duration-quickly) linear;
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
   }
+
 :host([data-render-mode="shadow"].slds-dropdown-trigger_hover:hover),:host([data-render-mode="shadow"].slds-dropdown-trigger_hover:focus),:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger_hover:hover,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger_hover:focus {
     outline: 0;
   }
+
 :host([data-render-mode="shadow"].slds-dropdown-trigger_hover:hover) .slds-dropdown,:host([data-render-mode="shadow"].slds-dropdown-trigger_hover:focus) .slds-dropdown,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger_hover:hover .slds-dropdown,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger_hover:focus .slds-dropdown {
@@ -421,64 +478,80 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     transition: opacity var(--_duration-quickly) linear, visibility var(--_duration-quickly) linear;
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
   }
+
 :host([data-render-mode="shadow"].slds-dropdown-trigger_click) .slds-dropdown,:host([data-render-mode="shadow"].slds-dropdown-trigger_click:hover) .slds-dropdown,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger_click .slds-dropdown,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger_click:hover .slds-dropdown {
     display: none;
   }
+
 :host([data-render-mode="shadow"].slds-dropdown-trigger_click.slds-is-open) .slds-dropdown,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger_click.slds-is-open .slds-dropdown {
     display: block;
     visibility: visible;
     opacity: 1;
   }
+
 /* Adjust position of dropdown with top nubbin */
+
 :host([data-render-mode="shadow"]) [part~='dropdown'][class*='slds-nubbin_top'] {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     margin-top: calc(var(--_nubbin-size-default) * 0.5);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
   }
+
 /* Adjust position of dropdown with bottom nubbin */
+
 :host([data-render-mode="shadow"]) [part~='dropdown'][class*='slds-nubbin_bottom'] {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     margin-bottom: calc(var(--_nubbin-size-default) * 0.5);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_left {
     left: 0;
     right: auto;
     transform: translateX(0);
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_right {
     left: auto;
     right: 0;
     transform: translateX(0);
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_bottom {
     bottom: 100%;
   }
+
 /* Width */
+
 :host([data-render-mode="shadow"]) .slds-dropdown_xx-small {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     min-width: var(--dropdown-size-xx-small);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_x-small {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     min-width: var(--_dropdown-size-x-small);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_small {
     min-width: var(--slds-g-sizing-14);
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_medium {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     min-width: var(--_dropdown-size-medium);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_large {
     min-width: 25rem;
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_fluid {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     min-width: var(
@@ -488,41 +561,49 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     max-width: 100%;
     width: 100%;
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_length-5 {
     max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 5);
     overflow-y: auto;
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_length-7 {
     max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 7);
     overflow-y: auto;
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_length-10 {
     max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 10);
     overflow-y: auto;
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_length-with-icon-5 {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--slds-g-spacing-4)) * 5);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     overflow-y: auto;
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_length-with-icon-7 {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--slds-g-spacing-4)) * 7);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     overflow-y: auto;
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_length-with-icon-10 {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--slds-g-spacing-4)) * 10);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     overflow-y: auto;
   }
+
 :host([data-render-mode="shadow"]) [dir='rtl'] .slds-dropdown_center {
     left: auto;
     right: auto;
     transform: translateX(calc(50% - (0.875rem / 2)));
   }
+
 /**
    * Variant - Inverse
    *
@@ -531,56 +612,70 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * styles are currently dormant and have not been fully refactored to
    * native shadow DOM.
    */
+
 :host([data-render-mode="shadow"]) .slds-dropdown_inverse {
     background: var(--slds-g-color-brand-base-10);
     border-color: var(--slds-g-color-brand-base-10);
     color: var(--slds-g-color-neutral-base-100);
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a {
     color: var(--slds-g-color-neutral-base-100);
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a:hover,:host([data-render-mode="shadow"]) 
   .slds-dropdown_inverse .slds-dropdown__item > a:focus {
     color: var(--slds-g-color-neutral-base-90);
     background-color: transparent;
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a:active {
     color: var(--slds-g-color-neutral-base-80);
     background-color: transparent;
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled='true'] {
     color: var(--slds-g-color-palette-blue-20);
     cursor: default;
   }
+
 :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled='true']:hover {
     background-color: transparent;
   }
+
 /**
    * Variant - Actions
    *
    * Appears to be unsupported, not refactored like variant - inverse above.
    */
+
 :host([data-render-mode="shadow"]) .slds-dropdown_actions a {
     color: var(--slds-g-color-accent-2);
   }
+
 /* These .slds-has-submenu classes for on the list item but .slds-dropdown_submenu goes on the div where .slds-dropdown exists */
+
 :host([data-render-mode="shadow"]) .slds-has-submenu .slds-dropdown_submenu {
     top: 0;
     transform: none;
   }
+
 :host([data-render-mode="shadow"]) .slds-has-submenu .slds-dropdown_submenu-right {
     left: 100%;
     margin-left: var(--slds-g-spacing-1);
   }
+
 :host([data-render-mode="shadow"]) .slds-has-submenu .slds-dropdown_submenu-left {
     left: 100%;
     margin-left: var(--slds-g-spacing-1);
   }
+
 :host([data-render-mode="shadow"]) .slds-has-submenu .slds-dropdown_submenu-bottom {
     top: auto;
     bottom: 0;
     margin-bottom: calc(var(--slds-g-spacing-1) * -1);
   }
+
 /**
    * is-loading - spinner
    *
@@ -589,6 +684,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * space for the spinner which is out of the flow of the document.
    * This is bit of a hack until utilities are figured out.
    */
+
 :host([data-render-mode="shadow"]) .slds-p-vertical_large {
     padding: var(--slds-g-spacing-5);
   }

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

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-scale-neg-2)
+            var(--slds-g-font-size-base)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        align-items: center;
+        flex-direction: column;
     }
 /**
    * Input Container
@@ -272,6 +272,8 @@
 :host([data-render-mode="shadow"]) [part='input-container'] {
         flex: 1 0 100%;
         align-items: stretch;
+        --sds-c-inputtext-spacing-inline: 0;
+        --sds-c-inputtext-spacing-block: 0;
     }
 :host([data-render-mode="shadow"]) [part='input-container'][type='range'] {
         border: none;
@@ -348,6 +350,20 @@
         --slds-c-inputtext-color-border: var(--slds-g-color-border-error-1);
         --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
     }
+:host([data-render-mode="shadow"][invalid]) .slds-input-has-icon .slds-button_icon:hover {
+        --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
+     }
+:host([data-render-mode="shadow"][invalid]) input[type="search"] {
+      --slds-c-input-color-background: var(--slds-s-input-color-background-invalid);
+      --slds-c-input-color-border: var(--slds-g-color-border-error-1);
+      --slds-c-input-text-color: var(--slds-s-input-color-invalid);
+
+      background-clip: padding-box;
+    }
+:host([data-render-mode="shadow"][invalid]) input[type="search"] + lightning-primitive-icon::part(icon) {
+      fill: var(--slds-g-color-error-1);
+      color: var(--slds-g-color-error-1);
+    }
 /**
    * Invalid State - Focus
    *
@@ -371,6 +387,10 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
+:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
+        --sds-c-inputtext-text-color-placeholder:
+            var(--slds-g-color-on-disabled-2);
+    }
 /**
    * Label
    *
@@ -384,10 +404,6 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(
-            --slds-c-inputtext-label-font-size,
-            var(--slds-g-font-scale-neg-3)
-        );
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
@@ -446,7 +462,7 @@
     }
 :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon:focus,:host([data-render-mode="shadow"]) 
     .slds-input-has-icon .slds-button_icon:hover {
-        --slds-c-icon-color-foreground: var(--slds-g-color-accent-4);
+        --slds-c-icon-color-foreground: var(--slds-g-color-accent-3);
     }
 :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-input__icon {
         width: 0.875rem;

package/src/lightning/baseCombobox/keyboard.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { runActionOnBufferedTypedCharacters } from 'lightning/utilsPrivate';
 
 function preventDefaultAndStopPropagation(event) {
@@ -103,11 +108,20 @@ function handleEscapeKey({ event, dropdownInterface }) {
 }
 
 function handleTabKey({ event, dropdownInterface, currentIndex }) {
-    if (dropdownInterface.isDropdownVisible() && currentIndex >= 0) {
-        event.stopPropagation();
-        dropdownInterface.closeDropdown();
+    if (!dropdownInterface.isDropdownVisible()) return;
+
+    // @W-16102957 - different Tab press behavior between readonly and non-readonly basecombobox
+    // we want select if: readonly OR non-readonly but the most recent interaction was in the dropdown (not in editing mode)
+    const shouldSelectOnTabPress =
+        dropdownInterface.isInputReadOnly() ||
+        !dropdownInterface.getEditingMode();
+
+    if (currentIndex >= 0 && shouldSelectOnTabPress) {
         dropdownInterface.selectByIndex(currentIndex);
     }
+
+    event.stopPropagation();
+    dropdownInterface.closeDropdown();
 }
 
 function handleDeletionKeys({ event, dropdownInterface }) {