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

package/src/lightning/avatar/avatar.slds.css

@@ -8,39 +8,39 @@
  */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size~='xxx-small']) {
+  :host([data-render-mode="shadow"][size='xxx-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='xx-small']) {
+  :host([data-render-mode="shadow"][size='xx-small']) {
     --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
   }
 
-  :host([data-render-mode="shadow"][size~='x-small']) {
+  :host([data-render-mode="shadow"][size='x-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
   }
 
-  :host([data-render-mode="shadow"][size~='small']) {
+  :host([data-render-mode="shadow"][size='small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='large']) {
+  :host([data-render-mode="shadow"][size='large']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant~='warning']) {
+  :host([data-render-mode="shadow"][variant='warning']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
   }
 
-  :host([data-render-mode="shadow"][variant~='success']) {
+  :host([data-render-mode="shadow"][variant='success']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
   }
 
-  :host([data-render-mode="shadow"][variant~='error']) {
+  :host([data-render-mode="shadow"][variant='error']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
   }
 
-  :host([data-render-mode="shadow"][variant~='light']) {
+  :host([data-render-mode="shadow"][variant='light']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
@@ -50,15 +50,15 @@
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
     --sds-c-icon-color-border: var(--slds-c-icon-color-border);
     --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-block-start,
+      --slds-c-icon-spacing-blockstart,
       var(--slds-c-icon-spacing-block)
     );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-block-end, var(--slds-c-icon-spacing-block));
+    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
     --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inline-start,
+      --slds-c-icon-spacing-inlinestart,
       var(--slds-c-icon-spacing-inline)
     );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inline-end, var(--slds-c-icon-spacing-inline));
+    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
 
     /**
      * There's a divergence in LBC that we have to support here: LBC splits their
@@ -154,7 +154,7 @@
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
@@ -172,6 +172,11 @@
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
+  /* re-assign icon color hook for avatar */
+  :host([data-render-mode="shadow"]) {
+    --sds-c-icon-color-background: var(--slds-c-avatar-color-background);
+  }
+
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -242,19 +247,13 @@
   :host([data-render-mode="shadow"]) .slds-avatar__initials {
     display: flex;
     justify-content: center;
-    -ms-flex-line-pack: center;
     align-content: center;
     align-items: center;
     margin: auto;
     color: var(--slds-c-avatar-text-color);
     height: 100%;
-    text-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    background-color: var(
-      --slds-c-avatar-color-background,
-      var(--sds-c-icon-color-background, var(--sds-g-color-brand-base-50, #0176d3))
-    );
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+    text-shadow: 0 0 1px rgba(0, 0, 0, 80%);
+    background-color: var(--slds-c-avatar-color-background, var(--sds-g-color-brand-base-50, #0176d3));
   }
 
   :host([data-render-mode="shadow"]) .slds-avatar__initials[title] {

package/src/lightning/badge/__docs__/badge.md

@@ -90,7 +90,7 @@ Use SLDS styling hooks to customize the component's styles. For example, specify
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/badges/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 To understand how we implemented SLDS in `lightning-badge`, see the **Source Code** section.
 

package/src/lightning/badge/__examples__/basic/basic.html

@@ -5,10 +5,8 @@
         </h2>
 
         <!-- Badge: basic -->
-        <lightning-badge label="Alpha"></lightning-badge>
+        <lightning-badge label="Alpha" class="slds-badge_inverse"></lightning-badge>
         <lightning-badge label="Beta"></lightning-badge>
         <lightning-badge label="Gamma"></lightning-badge>
-        <lightning-badge label="Inverse" class="slds-badge_inverse"></lightning-badge>
-        <lightning-badge label="Lightest" class="slds-badge_lightest"></lightning-badge>
     </div>
 </template>

package/src/lightning/badge/badge.html

@@ -1,19 +1,17 @@
 <template>
-    <span part="badge">
-        <template if:false={isIconBeforeLabel}>
-            {label}
-        </template>
-    
-        <template if:true={iconName}>
-            <span class={computedClass}>
-                <span class="slds-icon_container slds-current-color" title={iconAlternativeText}>
-                    <lightning-primitive-icon icon-name={iconName} size="xx-small"></lightning-primitive-icon>
-                </span>
+    <template if:false={isIconBeforeLabel}>
+        {label}
+    </template>
+
+    <template if:true={iconName}>
+        <span class={computedClass}>
+            <span class="slds-icon_container slds-current-color" title={iconAlternativeText}>
+                <lightning-primitive-icon icon-name={iconName} size="xx-small"></lightning-primitive-icon>
             </span>
-        </template>
-        
-        <template if:true={isIconBeforeLabel}>
-            {label}
-        </template>
-    </span>
+        </span>
+    </template>
+ 
+    <template if:true={isIconBeforeLabel}>
+        {label}
+    </template>
 </template>

package/src/lightning/badge/badge.js

@@ -1,7 +1,6 @@
-import { api } from 'lwc';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString } from 'lightning/utilsPrivate';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 const DEFAULT_POSITION = 'start';
 
@@ -9,7 +8,7 @@ const DEFAULT_POSITION = 'start';
  * Represents a label which holds a small amount of information, such as the
  * number of unread notifications.
  */
-export default class LightningBadge extends LightningShadowBaseClass {
+export default class LightningBadge extends LightningElement {
     /**
      * Normalized icon position
      */
@@ -56,7 +55,6 @@ export default class LightningBadge extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-badge');
     }
 

package/src/lightning/barcodeScanner/__docs__/barcodeScanner.md

@@ -1,4 +1,4 @@
-The `lightning-barcode-scanner` component embeds a barcode scanning function displayed as an icon, which launches the barcode scanner when the user clicks it. For more information on the the API this component uses, see [Use the BarcodeScanner API](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_barcodescanner_in_a_lightning_component) in the Lightning Web Components Developer Guide.
+The `lightning-barcode-scanner` component embeds a barcode scanning function displayed as an icon, which launches the barcode scanner when the user clicks it. For more information on the the API this component uses, see [Use the BarcodeScanner API](https://developer.salesforce.com/docs/platform/lwc/guide/use-barcodescanner-in-a-lightning-component) in the Lightning Web Components Developer Guide.
 
 ```html
 <template>
@@ -29,7 +29,7 @@ To enable continuous scanning, set the `enable-continuous-scan` attribute.
 
 #### Scanner Options
 
-The BarcodeScanner API for `lightning-barcode-scanner` supports various scanner options. For the list of barcode scanner option properties, see [BarcodeScannerOptions](docs/component-library/documentation/en/lwc/lwc.reference_lightning_barcodescanner_data_types) in the Lightning Web Components Developer Guide.
+The BarcodeScanner API for `lightning-barcode-scanner` supports various scanner options. For the list of barcode scanner option properties, see [BarcodeScannerOptions](https://developer.salesforce.com/docs/platform/lwc/guide/reference-lightning-barcodescanner-data-types) in the Lightning Web Components Developer Guide.
 
 You can configure various scanner options for a scanning session. For example, if you want your component to support only a specific set of barcode types, specify the types as a list in the `barcodeTypes` property. If you want to modify the size of the scanner camera view, specify the size in the `scannerSize` property. In this example, the barcode scanner supports only the specified types `CODE_128`,`EAN_13`, and `QR`, and will ignore the other types, and the barcode scanner camera view is changed to `LARGE`.
 

package/src/lightning/baseCombobox/base-combobox.slds.css

@@ -166,7 +166,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_top::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -190,15 +190,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :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, 0.16);
+    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-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::after {
-    width: var(--sds-g-spacing-4, 1rem); 
+    width: var(--sds-g-spacing-4, 1rem);
     height: var(--sds-g-spacing-4, 1rem);
     position: absolute;
     transform: rotate(45deg);
@@ -216,7 +216,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :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, 0.16);
+    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -237,7 +237,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -263,7 +263,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :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, 0.16);
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -279,19 +279,16 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     background-color: inherit;
 
     /* Position: Bottom */
-    bottom: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    left: auto;
-    right: var(--sds-g-spacing-5, 1.5rem);
-    top: 100%;
+    inset: 100% auto calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1) var(--sds-g-spacing-5, 1.5rem);
     margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
     margin-right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
+    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 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, 0.16);
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
   }
 
@@ -312,7 +309,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left::after {
-    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -336,7 +333,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :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, 0.16);
+    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -366,7 +363,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :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, 0.16);
+    box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -387,7 +384,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right::after {
-    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -411,7 +408,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :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, 0.16);
+    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -441,7 +438,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :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, 0.16);
+    box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -535,15 +532,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-overlay-radius-border: var(--slds-c-dropdown-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-overlay-sizing-border: var(--slds-c-dropdown-sizing-border, var(--sds-g-sizing-border-1, 1px));
     --sds-c-overlay-color-border: var(--slds-c-dropdown-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    --sds-c-overlay-shadow: var(--slds-c-dropdown-shadow, 0 2px 3px 0 rgba(0, 0, 0, 0.16));
+    --sds-c-overlay-shadow: var(--slds-c-dropdown-shadow, 0 2px 3px 0 rgba(0, 0, 0, 16%));
     --sds-c-overlay-spacing-inline-start: 0;
     --sds-c-overlay-spacing-inline-end: 0;
     --sds-c-overlay-spacing-block-start: var(
-      --slds-c-dropdown-spacing-block-start,
+      --slds-c-dropdown-spacing-blockstart,
       var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
     );
     --sds-c-overlay-spacing-block-end: var(
-      --slds-c-dropdown-spacing-block-end,
+      --slds-c-dropdown-spacing-blockend,
       var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
     );
 
@@ -557,11 +554,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     /* stylelint-disable */
     margin-block-start: calc(
-      var(--slds-c-dropdown-spacing-block-start, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
+      var(--slds-c-dropdown-spacing-blockstart, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
         2
     );
     margin-block-end: calc(
-      var(--slds-c-dropdown-spacing-block-end, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
+      var(--slds-c-dropdown-spacing-blockend, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
         2
     );
     /* stylelint-enable */
@@ -601,7 +598,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     top: 100%;
   }
 
-  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown_bottom,:host([data-render-mode="shadow"])  
+  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown_bottom,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger .slds-dropdown_bottom {
     top: auto;
   }
@@ -729,7 +726,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             var(--sds-g-spacing-4, 1rem)
         ) * 5
     );
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -740,7 +736,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             var(--sds-g-spacing-4, 1rem)
         ) * 7
     );
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -751,7 +746,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             var(--sds-g-spacing-4, 1rem)
         ) * 10
     );
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -759,7 +753,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 5);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -767,7 +760,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 7);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -775,7 +767,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 10);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -923,18 +914,18 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         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);
@@ -949,10 +940,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    */
     :host([data-render-mode="shadow"]) [part='input'] {
         padding-inline-start: var(
-            --slds-c-inputtext-spacing-inline-start,
+            --slds-c-inputtext-spacing-inlinestart,
             var(--sds-g-spacing-3, 0.75rem));
         padding-inline-end: var(
-            --slds-c-inputtext-spacing-inline-end,
+            --slds-c-inputtext-spacing-inlineend,
             var(--sds-g-spacing-4, 1rem));
         height: unset;
         font-family: var(--sds-g-font-family, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
@@ -1051,7 +1042,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * the icon in the inline help text.
    */
     :host([data-render-mode="shadow"]) [part='start'] {
-        --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        --slds-c-icon-spacing-inlineend: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /**
@@ -1066,12 +1057,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    *
    * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
    */
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='input-text'] {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='input-text'] {
             display: block;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='label'] {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='label'] {
             float: left;
 
             /* TODO: Get rid of these magic numbers */
@@ -1079,11 +1070,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             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);
         }
@@ -1118,7 +1109,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * Has Icon Left
    */
     :host([data-render-mode="shadow"]) .slds-input-has-icon_left {
-        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlinestart: var(--sds-g-spacing-6, 2rem);
     }
 
     :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input__icon,:host([data-render-mode="shadow"]) 
@@ -1130,7 +1121,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * Has Icon Right
    */
     :host([data-render-mode="shadow"]) .slds-input-has-icon_right {
-        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlineend: var(--sds-g-spacing-6, 2rem);
     }
 
     :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input__icon,:host([data-render-mode="shadow"]) 
@@ -1142,8 +1133,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * Has Icon Left & Right
    */
     :host([data-render-mode="shadow"]) .slds-input-has-icon_left-right {
-        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
-        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlinestart: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlineend: var(--sds-g-spacing-6, 2rem);
     }
 
   /**
@@ -1168,12 +1159,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 @supports (--styling-hooks: '') {
-   :host([data-render-mode="shadow"]) [part~='listbox'] {
-     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     --_listbox-spacing-xxx-small: 0.125rem;
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-   }
-
    /* Horizontal listbox - used for pill container */
    :host([data-render-mode="shadow"]) .slds-listbox_horizontal {
      display: inline-flex;
@@ -1186,9 +1171,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox_horizontal li+li {
-     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     padding-inline-start: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline-start: 0.125rem;
    }
 
    /* Vertical listbox */
@@ -1269,7 +1252,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
-     color: currentColor;
+     color: currentcolor;
    }
 
    /* The icon within a plain listbox that indicates if an option has been selected or not. */
@@ -1294,9 +1277,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
-      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     margin-block-end: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     margin-block-end: 0.125rem;
    }
 
    /* The metadata or secondary text of an entity listbox */
@@ -1307,15 +1288,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
-     color: currentColor;
+     color: currentcolor;
    }
-  
+
    /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
 
    /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
 
    /* The container of pill selections found inside of a combobox group */
-   
+
    /* .slds-listbox_selection-group items need to be moved out to pill/pill container */
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group {
      position: relative;
@@ -1333,18 +1314,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
      padding-block-start: 0;
-      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     padding-block-end: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-block-end: 0.125rem;
      padding-inline: 0;
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
-     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     padding-block-start: var(--_listbox-spacing-xxx-small);
+     padding-block-start: 0.125rem;
      padding-block-end: 0;
-     padding-inline: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline: 0.125rem;
    }
 
    /* Toggle button to show all of the pill selections */
@@ -1419,7 +1396,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
      margin-inline-end: 0;
    }
 
-   @media (max-width: 48em) {
+   @media (width <= 48em) {
 
      :host([data-render-mode="shadow"]) .slds-media_responsive {
        display: block;

package/src/lightning/baseCombobox/baseCombobox.css

@@ -1,6 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './base-combobox.slds.css';
-@import './spinner.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './base-combobox.slds.css'; */
 
 .slds-inline-logo {
     height: 1rem;