lightning-base-components 1.18.8-alpha → 1.19.1-alpha

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.js

@@ -35,6 +35,8 @@ const INPUT_ELEMENT_SELECTOR = '.slds-combobox__input';
 const INPUT_PART_ELEMENT_SELECTOR = '[part~="input-text"]';
 const FAUX_INPUT_BUTTON_ELEMENT_SELECTOR = `${INPUT_ELEMENT_SELECTOR}.slds-input_faux`;
 
+const VARIANT_LOOKUP = 'lookup';
+
 /**
  * Breakpoint when viewport height doesn't fit 10 items in the dropdown
  * 834px is the height of 11 inch iPad in horizontal mode.
@@ -326,7 +328,13 @@ export default class LightningBaseCombobox extends LightningElement {
     set variant(value) {
         this._variant = normalizeString(value, {
             fallbackValue: VARIANT.STANDARD,
-            validValues: [VARIANT.STANDARD, 'lookup'],
+            validValues: [
+                VARIANT.STANDARD,
+                VARIANT.LABEL_INLINE,
+                VARIANT.LABEL_STACKED,
+                VARIANT.LABEL_HIDDEN,
+                VARIANT_LOOKUP,
+            ],
         });
     }
 
@@ -499,12 +507,17 @@ export default class LightningBaseCombobox extends LightningElement {
         return this.autocomplete && this.autocomplete !== 'off';
     }
 
-    get isStandardVariant() {
-        return this.variant === VARIANT.STANDARD;
+    get isStandardOrLabelVariant() {
+        return [
+            VARIANT.STANDARD,
+            VARIANT.LABEL_INLINE,
+            VARIANT.LABEL_STACKED,
+            VARIANT.LABEL_HIDDEN,
+        ].includes(this.variant);
     }
 
     get isDefaultReadOnlyTypes() {
-        return this.isStandardVariant || this.hasInputPill;
+        return this.isStandardOrLabelVariant || this.hasInputPill;
     }
 
     /**
@@ -512,7 +525,7 @@ export default class LightningBaseCombobox extends LightningElement {
      * Used to determine if input or button should be rendered
      */
     get isUserInputDisabled() {
-        return this.isStandardVariant && !this.isAutocompleteEnabled;
+        return this.isStandardOrLabelVariant && !this.isAutocompleteEnabled;
     }
 
     get _inputAriaReadOnly() {
@@ -520,7 +533,7 @@ export default class LightningBaseCombobox extends LightningElement {
         // so the user can type and search in the dropdown list
         // For grouped combobox, the input must remain editable because the search is done through
         // the input.
-        if (this._dropdownVisible && this.isStandardVariant) {
+        if (this._dropdownVisible && this.isStandardOrLabelVariant) {
             return true;
         }
 
@@ -967,7 +980,7 @@ export default class LightningBaseCombobox extends LightningElement {
         // when FALSE the target is an INPUT element
         // NOTE: isUserInputDisabled is NOT determined by combobox.disabled
         // instead isUserInputDisabled is determined by
-        // this.isStandardVariant && !this.isAutocompleteEnabled (which is an internal variable)
+        // this.isStandardOrLabelVariant && !this.isAutocompleteEnabled (which is an internal variable)
         // this means that the INPUT is often NOT present, and instead a BUTTON is
         // this selector for .start({ target }) is used to
         // position the element from so this.isUserInputDisabled

package/src/lightning/baseComboboxItem/listbox.slds.css

@@ -1,11 +1,5 @@
 
  @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;
@@ -18,9 +12,7 @@
    }
 
    :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 */
@@ -101,7 +93,7 @@
    }
 
    :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. */
@@ -126,9 +118,7 @@
      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 */
@@ -139,15 +129,15 @@
    }
 
    :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;
@@ -165,18 +155,14 @@
 
    :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 */
@@ -251,7 +237,7 @@
      margin-inline-end: 0;
    }
 
-   @media (max-width: 48em) {
+   @media (width <= 48em) {
 
      :host([data-render-mode="shadow"]) .slds-media_responsive {
        display: block;
@@ -264,4 +250,3 @@
      }
    }
  }
- 

package/src/lightning/breadcrumb/breadcrumb.slds.css

@@ -6,9 +6,9 @@
   :host([data-render-mode="shadow"]) [part='breadcrumb'] {
     display: block;
     padding-block-start: 0;
-    padding-inline-end: var(--slds-c-breadcrumb-spacing-inline-end, var(--sds-g-spacing-2, 0.5rem));
+    padding-inline-end: var(--slds-c-breadcrumb-spacing-inlineend, var(--sds-g-spacing-2, 0.5rem));
     padding-block-end: 0;
-    padding-inline-start: var(--slds-c-breadcrumb-spacing-inline-start, var(--sds-g-spacing-2, 0.5rem));
+    padding-inline-start: var(--slds-c-breadcrumb-spacing-inlinestart, var(--sds-g-spacing-2, 0.5rem));
     color: var(--slds-g-color-brand-base-50, var(--sds-g-color-brand-base-50, #0176d3));
   }
 

package/src/lightning/breadcrumbs/__docs__/breadcrumbs.md

@@ -43,14 +43,14 @@ Use SLDS styling hooks to customize the component's styles. For example, adjust
 
 ```css
 .my-breadcrumbs {
-    --slds-c-breadcrumbs-spacing-inline-end: 20px;
-    --slds-c-breadcrumbs-spacing-inline-start: 30px;
+    --slds-c-breadcrumbs-spacing-inlineend: 20px;
+    --slds-c-breadcrumbs-spacing-inlinestart: 30px;
 }
 ```
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/breadcrumbs/#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.
 
 #### Accessibility
 

package/src/lightning/breadcrumbs/breadcrumbs.slds.css

@@ -8,8 +8,8 @@
      * Reassignments for parity with SLDS blueprint
      * https://www.lightningdesignsystem.com/components/breadcrumbs/#Styling-Hooks-Overview
      */
-    --slds-c-breadcrumb-spacing-inline-start: var(--slds-c-breadcrumbs-spacing-inline-start);
-    --slds-c-breadcrumb-spacing-inline-end: var(--slds-c-breadcrumbs-spacing-inline-end);
+    --slds-c-breadcrumb-spacing-inlinestart: var(--slds-c-breadcrumbs-spacing-inlinestart);
+    --slds-c-breadcrumb-spacing-inlineend: var(--slds-c-breadcrumbs-spacing-inlineend);
 
     flex-wrap: wrap;
     align-items: flex-start;
@@ -33,7 +33,8 @@
   }
 
   /* Don't include spacing before first breadcrumb */
+
   :host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(:first-child) {
-    --slds-c-breadcrumb-spacing-inline-start: 0;
+    --slds-c-breadcrumbs-spacing-inlinestart: 0;
   }
 }