lightning-base-components 1.18.7-alpha → 1.18.8-alpha

package/metadata/raptor.json

@@ -1365,6 +1365,12 @@
   "groupedCombobox": {
     "slotNames": [],
     "properties": [
+      {
+        "name": "customAriaHasPopup"
+      },
+      {
+        "name": "customRole"
+      },
       {
         "name": "disableDefaultHighlight"
       },
@@ -1555,6 +1561,7 @@
   "industriesActionablelistApi": {},
   "industriesAssessmentApi": {},
   "industriesAuditTrailExportApi": {},
+  "industriesAutomotiveApi": {},
   "industriesCibApi": {},
   "industriesClmApi": {},
   "industriesContextApi": {},
@@ -1570,13 +1577,16 @@
   "industriesExplainabilityApi": {},
   "industriesExternalDocumentApi": {},
   "industriesFeatureValidationApi": {},
+  "industriesFieldsetApi": {},
   "industriesFundraisingApi": {},
   "industriesGroupApi": {},
   "industriesHealthcloudApi": {},
   "industriesHealthcloudHpiApi": {},
   "industriesIdentityVerificationApi": {},
+  "industriesInstantPricingApi": {},
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},
+  "industriesMaterialityAssessmentCalculateApi": {},
   "industriesPricingApi": {},
   "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},
@@ -2599,6 +2609,12 @@
       },
       {
         "name": "focus"
+      },
+      {
+        "name": "reportValidity"
+      },
+      {
+        "name": "setCustomValidity"
       }
     ]
   },
@@ -2827,6 +2843,10 @@
   "platformShowToastEvent": {
     "minVersion": "45.0"
   },
+  "platformWorkspaceApi": {
+    "minVersion": "59.0"
+  },
+  "platformWorkspaceApiUtils": {},
   "popup": {
     "slotNames": [
       ""
@@ -3160,14 +3180,23 @@
       {
         "name": "label"
       },
+      {
+        "name": "matchingInfo"
+      },
       {
         "name": "objectApiName"
       },
       {
         "name": "placeholder"
       },
+      {
+        "name": "required"
+      },
       {
         "name": "value"
+      },
+      {
+        "name": "variant"
       }
     ],
     "methods": [
@@ -3179,19 +3208,12 @@
       },
       {
         "name": "focus"
-      }
-    ]
-  },
-  "recordPickerGetRecord": {
-    "properties": [
-      {
-        "name": "displayInfo"
       },
       {
-        "name": "objectApiName"
+        "name": "reportValidity"
       },
       {
-        "name": "recordId"
+        "name": "setCustomValidity"
       }
     ]
   },
@@ -3418,6 +3440,7 @@
       }
     ]
   },
+  "serviceDataCategoryApi": {},
   "showToastEvent": {},
   "sitesApi": {},
   "slider": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.18.7-alpha",
+    "version": "1.18.8-alpha",
     "license": "MIT",
     "files": [
         "external",

package/src/lightning/accordion/accordion.slds.css

@@ -484,14 +484,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 
@@ -537,7 +543,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         border-top-color: var(--slds-c-accordionsection-color-border,  var(--slds-g-color-border-base-1));
     }
 
-    :host([data-render-mode="shadow"]) [part~="accordion-section"] {
+    :host([data-render-mode="shadow"]) [part="accordion-section"] {
         padding-block-start: var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
         padding-block-end: var(--slds-c-accordionsection-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
         padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-spacing-3, 0.75rem));
@@ -577,11 +583,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         box-shadow: none;
     }
 
-    /* Note: 
-    Currently button is being hard coded so using 
-    [part~="button"] to style button. 
+    /* Note:
+    Currently button is being hard coded so using
+    [part="button"] to style button.
     However this should be changed to lightning-button::part(button) once hard coded button gets refactored to lightning-button */
-    :host([data-render-mode="shadow"]) [part~="button"] {
+    :host([data-render-mode="shadow"]) [part="button"] {
         display: inline-flex;
         flex-grow: 1;
         align-items: center;
@@ -602,20 +608,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-sizing-4, 0.75rem));
         padding-inline-start: var(--slds-c-accordionsection-spacing-inline-start, var(--sds-g-sizing-4, 0.75rem));
     }
-    
-    /* Note: 
-    Should be changed to lightning-button::part(button) 
+
+    /* Note:
+    Should be changed to lightning-button::part(button)
     if button can be refactored to slds-button
     */
-    :host([data-render-mode="shadow"]) [part~="button"]:hover,:host([data-render-mode="shadow"]) 
-    [part~="button"]:focus {
+    :host([data-render-mode="shadow"]) [part="button"]:hover,:host([data-render-mode="shadow"]) 
+    [part="button"]:focus {
         --slds-c-icon-color-foreground-default: var(--slds-c-accordion-heading-color-hover, var(--sds-g-color-brand-base-30, #014486));
 
         color: var(--slds-c-accordion-heading-color-hover, var(--sds-g-color-brand-base-30, #014486));
     }
 
-    /* Note: 
-    Media query will need to be worked out properly 
+    /* Note:
+    Media query will need to be worked out properly
     and be replaced with utility classes */
     @media (min-width: 64.0625em) {
         :host([data-render-mode="shadow"]) .slds-accordion__summary-content {
@@ -646,21 +652,21 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 @supports (--styling-hooks: '') {
-    /* To Do: 
+    /* To Do:
         Currently the code below will not work as our script to add data-render-mode into our css will break the css selector.
         We had to add a temporary fix in interop/accordion/accordion.css that
         does the exact same thing to have the styles applied.
-        Once our script is fixed (should be addressed in W-12439890) remove the duplicated code found in accordion.css (interop) 
+        Once our script is fixed (should be addressed in W-12439890) remove the duplicated code found in accordion.css (interop)
     */
-    
+
     /* Removes first child border top */
     :host([data-render-mode="shadow"]) ::slotted(lightning-accordion-section:first-child) {
         --slds-c-accordionsection-sizing-border: 0;
     }
 
-    :host([data-render-mode="shadow"]) [part~="accordion"] {
-        /* Note: The following styling hooks are remapped from accordion-section for usability reason. 
-        Users will have an option to use spacing styling hooks from both accordion and accordion-section making it 
+    :host([data-render-mode="shadow"]) [part="accordion"] {
+        /* Note: The following styling hooks are remapped from accordion-section for usability reason.
+        Users will have an option to use spacing styling hooks from both accordion and accordion-section making it
         easier to use our styling hook based on our internal styling hook naming rules */
         --slds-c-accordionsection-spacing-block-start: var(--slds-c-accordion-spacing-block-start);
         --slds-c-accordionsection-spacing-block-end: var(--slds-c-accordion-spacing-block-end);

package/src/lightning/accordionSection/accordion-section.slds.css

@@ -484,14 +484,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 
@@ -537,7 +543,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         border-top-color: var(--slds-c-accordionsection-color-border,  var(--slds-g-color-border-base-1));
     }
 
-    :host([data-render-mode="shadow"]) [part~="accordion-section"] {
+    :host([data-render-mode="shadow"]) [part="accordion-section"] {
         padding-block-start: var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
         padding-block-end: var(--slds-c-accordionsection-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
         padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-spacing-3, 0.75rem));
@@ -577,11 +583,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         box-shadow: none;
     }
 
-    /* Note: 
-    Currently button is being hard coded so using 
-    [part~="button"] to style button. 
+    /* Note:
+    Currently button is being hard coded so using
+    [part="button"] to style button.
     However this should be changed to lightning-button::part(button) once hard coded button gets refactored to lightning-button */
-    :host([data-render-mode="shadow"]) [part~="button"] {
+    :host([data-render-mode="shadow"]) [part="button"] {
         display: inline-flex;
         flex-grow: 1;
         align-items: center;
@@ -602,20 +608,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-sizing-4, 0.75rem));
         padding-inline-start: var(--slds-c-accordionsection-spacing-inline-start, var(--sds-g-sizing-4, 0.75rem));
     }
-    
-    /* Note: 
-    Should be changed to lightning-button::part(button) 
+
+    /* Note:
+    Should be changed to lightning-button::part(button)
     if button can be refactored to slds-button
     */
-    :host([data-render-mode="shadow"]) [part~="button"]:hover,:host([data-render-mode="shadow"]) 
-    [part~="button"]:focus {
+    :host([data-render-mode="shadow"]) [part="button"]:hover,:host([data-render-mode="shadow"]) 
+    [part="button"]:focus {
         --slds-c-icon-color-foreground-default: var(--slds-c-accordion-heading-color-hover, var(--sds-g-color-brand-base-30, #014486));
 
         color: var(--slds-c-accordion-heading-color-hover, var(--sds-g-color-brand-base-30, #014486));
     }
 
-    /* Note: 
-    Media query will need to be worked out properly 
+    /* Note:
+    Media query will need to be worked out properly
     and be replaced with utility classes */
     @media (min-width: 64.0625em) {
         :host([data-render-mode="shadow"]) .slds-accordion__summary-content {

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

@@ -44,7 +44,7 @@
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
-  :host([data-render-mode="shadow"]) [part~='boundary'] {
+  :host([data-render-mode="shadow"]) [part='boundary'] {
     /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
     --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
@@ -74,7 +74,7 @@
     display: inline-flex;
   }
 
-  :host([data-render-mode="shadow"]) [part~='icon'] {
+  :host([data-render-mode="shadow"]) [part='icon'] {
     --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
     --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
     --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
@@ -159,7 +159,7 @@
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
   --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
-  
+
   position: absolute;
   top: 50%;
   margin-block-start: -0.4375rem;
@@ -185,7 +185,7 @@
     white-space: nowrap !important;
   }
 
-  :host([data-render-mode="shadow"]) [part~='avatar'] {
+  :host([data-render-mode="shadow"]) [part='avatar'] {
     width: var(--slds-c-avatar-sizing, var(--sds-g-sizing-9, 2rem));
     height: var(--slds-c-avatar-sizing, var(--sds-g-sizing-9, 2rem));
     overflow: hidden;
@@ -197,28 +197,28 @@
     color: var(--slds-c-avatar-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
   }
 
-  :host([data-render-mode="shadow"][size='x-small']) [part~='avatar'] {
+  :host([data-render-mode="shadow"][size='x-small']) [part='avatar'] {
     width: var(--sds-g-sizing-6, 1.25rem);
     height: var(--sds-g-sizing-6, 1.25rem);
     font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
     --slds-c-icon-sizing: var(--sds-g-sizing-6, 1.25rem);
   }
 
-  :host([data-render-mode="shadow"][size='small']) [part~='avatar'] {
+  :host([data-render-mode="shadow"][size='small']) [part='avatar'] {
     width: var(--sds-g-sizing-7, 1.5rem);
     height: var(--sds-g-sizing-7, 1.5rem);
     font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
     --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
-  :host([data-render-mode="shadow"][size='medium']) [part~='avatar'] {
+  :host([data-render-mode="shadow"][size='medium']) [part='avatar'] {
     width: var(--sds-g-sizing-9, 2rem);
     height: var(--sds-g-sizing-9, 2rem);
     font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
     --slds-c-icon-sizing: var(--sds-g-sizing-9, 2rem);
   }
 
-  :host([data-render-mode="shadow"][size='large']) [part~='avatar'] {
+  :host([data-render-mode="shadow"][size='large']) [part='avatar'] {
     width: var(--sds-g-sizing-10, 3rem);
     height: var(--sds-g-sizing-10, 3rem);
     font-size: var(--sds-g-font-scale-1, 1.125rem);
@@ -226,11 +226,11 @@
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant='circle']) [part~='avatar'] {
+  :host([data-render-mode="shadow"][variant='circle']) [part='avatar'] {
     border-radius: calc(var(--sds-g-radius-border-circle, 100%) / 2);
   }
 
-  :host([data-render-mode="shadow"].slds-avatar_empty) [part~='avatar'] {
+  :host([data-render-mode="shadow"].slds-avatar_empty) [part='avatar'] {
     border: var(--sds-g-sizing-border-1, 1px) dashed var(--sds-g-color-neutral-base-90, #e5e5e5);
   }
 

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

@@ -872,7 +872,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    /**
    * Input Text
    */
-    :host([data-render-mode="shadow"]) [part~='input-text'] {
+    :host([data-render-mode="shadow"]) [part='input-text'] {
         /* Host reassignments to composed slds-icon */
         --slds-c-icon-color-foreground: var(
             --slds-c-inputtext-icon-color-foreground,
@@ -918,23 +918,23 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    /**
    * Input Container
    */
-    :host([data-render-mode="shadow"]) [part~='input-container'] {
+    :host([data-render-mode="shadow"]) [part='input-container'] {
         flex: 1 0 100%;
         align-items: stretch;
     }
 
-    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range'] {
+    :host([data-render-mode="shadow"]) [part='input-container'][type~='range'] {
         border: none;
         display: inline-block;
     }
 
-    :host([data-render-mode="shadow"]) [part~='input'][type~='range'] {
+    :host([data-render-mode="shadow"]) [part='input'][type~='range'] {
         min-height: calc(1.875rem + (1px * 2));
         margin: 0;
     }
 
-    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range']:focus-within,:host([data-render-mode="shadow"]) 
-    [part~='input-container'][type~='range']:active {
+    :host([data-render-mode="shadow"]) [part='input-container'][type~='range']:focus-within,:host([data-render-mode="shadow"]) 
+    [part='input-container'][type~='range']:active {
         --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
         --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
         --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
@@ -947,7 +947,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    /**
    * Input
    */
-    :host([data-render-mode="shadow"]) [part~='input'] {
+    :host([data-render-mode="shadow"]) [part='input'] {
         padding-inline-start: var(
             --slds-c-inputtext-spacing-inline-start,
             var(--sds-g-spacing-3, 0.75rem));
@@ -961,8 +961,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    /**
    * Focus / active State
    */
-    :host([data-render-mode="shadow"]) [part~="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
-    [part~="input-container"]:active {
+    :host([data-render-mode="shadow"]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
+    [part="input-container"]:active {
       --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
       --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
       --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
@@ -973,7 +973,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    /**
    * Read Only State
    */
-    :host([data-render-mode="shadow"][readonly]) [part~='input-text'] {
+    :host([data-render-mode="shadow"][readonly]) [part='input-text'] {
         --sds-c-inputtext-spacing-inline-start-readonly: 0;
         --sds-c-inputtext-color-border-focus: transparent;
         --slds-c-inputtext-color-border: transparent;
@@ -988,7 +988,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * tied to :host([aria-invalid]) which this subsystem does not use. Instead, it
    * uses :host([invalid]).
    */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-text'] {
+    :host([data-render-mode="shadow"][invalid]) [part='input-text'] {
         --sds-c-inputtext-shadow: 0 0 0 var(--sds-g-sizing-border-1, 1px) inset
             var(--sds-g-color-error-base-50, #ea001e);
         --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
@@ -1001,7 +1001,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * The following styling hooks are included in SDS and need to be reassigned
    * here to prevent a bug with the focus state border and box-shadow
    */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-container']:focus-within {
+    :host([data-render-mode="shadow"][invalid]) [part='input-container']:focus-within {
       --sds-c-inputtext-shadow:
         var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset,
         0 0 var(--sds-g-sizing-border-3, 3px) var(--sds-g-color-brand-base-50, #0176d3);
@@ -1013,7 +1013,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    *
    * Both parts form the visible form control.
    */
-    :host([data-render-mode="shadow"][disabled]) [part~='input-container'],:host([data-render-mode="shadow"][disabled]) [part~='input'] {
+    :host([data-render-mode="shadow"][disabled]) [part='input-container'],:host([data-render-mode="shadow"][disabled]) [part='input'] {
         cursor: not-allowed;
         --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-95, #f3f3f3);
         --sds-c-inputtext-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
@@ -1023,10 +1023,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /**
    * Label
    *
-   * Add [part~='input-text'] to increase specificity and
-   * avoid collisions with other components using [part~='label'] (e.g. slds-input-checkbox)
+   * Add [part='input-text'] to increase specificity and
+   * avoid collisions with other components using [part='label'] (e.g. slds-input-checkbox)
    */
-    :host([data-render-mode="shadow"]) [part~='input-text'] [part~='label'] {
+    :host([data-render-mode="shadow"]) [part='input-text'] [part='label'] {
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
         color: var(
@@ -1050,7 +1050,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * so we don't add spacing to other icons composed in the component, e.g.,
    * the icon in the inline help text.
    */
-    :host([data-render-mode="shadow"]) [part~='start'] {
+    :host([data-render-mode="shadow"]) [part='start'] {
         --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
@@ -1067,11 +1067,11 @@ 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'] {
+        :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 +1079,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);
         }
@@ -1093,7 +1093,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         left: var(--sds-g-spacing-3, 0.75rem);
         fill: var(--slds-g-color-neutral-base-50, #747474);
     }
-    
+
     :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon {
         background-color: transparent;
     }
@@ -1145,7 +1145,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
         --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
     }
-   
+
   /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *

package/src/lightning/baseCombobox/baseCombobox.css

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

package/src/lightning/baseCombobox/baseCombobox.html

@@ -17,9 +17,9 @@
                             <input id="combobox-input"
                                 class={computedInputClass}
                                 type="text"
-                                role="combobox"
+                                role={customRole}
                                 aria-expanded={computedAriaExpanded}
-                                aria-haspopup="listbox"
+                                aria-haspopup={customAriaHasPopup}
                                 required={required}
                                 readonly={_inputAriaReadOnly}
                                 autocomplete={autocomplete}
@@ -48,9 +48,9 @@
                         type="button"
                         class={computedInputClass}
                         aria-expanded={computedAriaExpanded}
-                        aria-haspopup="listbox"
+                        aria-haspopup={customAriaHasPopup}
                         name={name}
-                        role="combobox"
+                        role={customRole}
                         data-value={computedInputValue}
                         disabled={disabled}
                         aria-label={computedButtonTriggerAriaLabel}
@@ -147,13 +147,9 @@
                         </template>
                     </template>
                     <template if:true={showDropdownActivityIndicator}>
-                        <div role="presentation" class="slds-listbox__item">
-                            <div class="slds-align_absolute-center slds-p-top_medium">
-                                <div role="status" class="slds-spinner slds-spinner_x-small slds-spinner_inline">
-                                    <span class="slds-assistive-text">{i18n.loadingText}</span>
-                                    <div class="slds-spinner__dot-a"></div>
-                                    <div class="slds-spinner__dot-b"></div>
-                                </div>
+                        <div role="presentation" class="slds-listbox__item slds-spinner_inline">
+                            <div class="slds-align_absolute-center slds-p-top_medium slds-p-bottom_medium">
+                                <lightning-spinner size="x-small" alternative-text={i18n.loadingText}></lightning-spinner>
                             </div>
                         </div>
                     </template>