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

package/src/lightning/datetimepicker/form-element.slds.css

@@ -133,42 +133,42 @@
 
     /* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+    :host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
+    :host([variant='label-stacked']):not(.slds-is-editing) {
         padding: 0 var(--sds-g-spacing-1);
     } */
 
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
     }
@@ -177,7 +177,7 @@
 
     /* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
+    :host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
@@ -187,32 +187,32 @@
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
         padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
+    :host([variant='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
 
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
+    :host([variant='label-inline']:not(.slds-is-editing)) {
         padding: var(--sds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
 
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
           float: left;
           max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
@@ -222,23 +222,22 @@
           z-index: 1;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+        :host([data-render-mode="shadow"][variant='label-inline']) lightning-helptext {
           float: left;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control {
           margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
-            -ms-flex-preferred-size: auto;
             flex-basis: auto;
             float: none;
             position: relative;
@@ -246,11 +245,11 @@
             margin-block-end: 0;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
           margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
@@ -283,7 +282,7 @@
 
     /* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
 }

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

@@ -153,18 +153,18 @@
         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);
@@ -179,10 +179,10 @@
    */
     :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');
@@ -281,7 +281,7 @@
    * 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);
     }
 
     /**
@@ -296,12 +296,12 @@
    *
    * 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 */
@@ -309,11 +309,11 @@
             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);
         }
@@ -348,7 +348,7 @@
    * 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"]) 
@@ -360,7 +360,7 @@
    * 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"]) 
@@ -372,8 +372,8 @@
    * 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);
     }
 
   /**

package/src/lightning/dialog/README.md

@@ -4,7 +4,7 @@
 * **For any new modal work, starting in release 236, please use `lightning-modal`**
 * **We do not recommend or support the use of `lightning-dialog` in one.app, mobile or any other case where the stacking context can't be controlled**
 * **The `lightning-dialog` is bound by the stacking context, meaning that if any sibling of a root parent of the modal has a higher z-index than the modal dialog, it will show on top of the modal created with the `lightning-dialog` component.**
-* **The `lighting-dialog` is not Aura (one.app) panel manager aware and as such will not open scoped modals nor work correctly when opened from an aura (panel manager based) dialog.**
+* **The `lightning-dialog` is not Aura (one.app) panel manager aware and as such will not open scoped modals nor work correctly when opened from an aura (panel manager based) dialog.**
 
 A `lightning-dialog` component creates a modal dialog, which displays in a layer above the app
 and keeps focus until you close the dialog.

package/src/lightning/dualListbox/__docs__/dualListbox.md

@@ -116,7 +116,7 @@ Use the `variant` attribute with one of these values to position the labels diff
 
 To apply additional styling, use the SLDS [utility classes](https://www.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.
 
-To customize the SLDS styles on the "Move selection to Selected" or "Move selection up" buttons, use SLDS styling hooks. 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.
+To customize the SLDS styles on the "Move selection to Selected" or "Move selection up" buttons, use SLDS styling hooks. 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.
 
 #### Usage Considerations
 

package/src/lightning/dualListbox/dual-listbox.slds.css

@@ -24,12 +24,7 @@
 
   /* Handles the layout of the dueling picklist */
   :host([data-render-mode="shadow"]) .slds-dueling-list__column {
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
     display: inline-flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
     flex-direction: column;
   }
 
@@ -44,10 +39,7 @@
 
   /* Changes the layout of the dueling picklist to be responsive */
   :host([data-render-mode="shadow"]) .slds-dueling-list__column_responsive {
-    -webkit-box-flex: 1;
-    -ms-flex: 1 1 15rem;
     flex: 1 1 15rem;
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     overflow: hidden;
     min-width: calc(var(--sds-g-sizing-9, 2rem) * 3);
@@ -83,7 +75,6 @@
   }
 
   :host([data-render-mode="shadow"]) .slds-dueling-list__options .slds-is-grabbed {
-    -webkit-transform: rotate(3deg);
     transform: rotate(3deg);
   }
 
@@ -107,19 +98,19 @@
     background-color: transparent;
   }
 
-  :host([data-render-mode="shadow"][variant~='label-inline']) {
+  :host([data-render-mode="shadow"][variant='label-inline']) {
     margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     width: 100%;
     flex-basis: 100%;
     padding: var(--sds-g-spacing-1, 0.25rem);
   }
 
-  :host([data-render-mode="shadow"][variant~='label-inline']).slds-form-element {
+  :host([data-render-mode="shadow"][variant='label-inline']).slds-form-element {
     padding: 0;
     margin-block-end: 0;
   }
 
-  :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+  :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
     margin-inline-start: 33%;
   }
 
@@ -185,7 +176,7 @@
     margin-inline-end: 0;
   }
 
-  @media (max-width: 48em) {
+  @media (width <= 48em) {
 
     :host([data-render-mode="shadow"]) .slds-media_responsive {
       display: block;

package/src/lightning/dualListbox/form-element.slds.css

@@ -133,42 +133,42 @@
 
     /* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+    :host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
+    :host([variant='label-stacked']):not(.slds-is-editing) {
         padding: 0 var(--sds-g-spacing-1);
     } */
 
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
     }
@@ -177,7 +177,7 @@
 
     /* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
+    :host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
@@ -187,32 +187,32 @@
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
         padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
+    :host([variant='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
 
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
+    :host([variant='label-inline']:not(.slds-is-editing)) {
         padding: var(--sds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
 
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
           float: left;
           max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
@@ -222,23 +222,22 @@
           z-index: 1;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+        :host([data-render-mode="shadow"][variant='label-inline']) lightning-helptext {
           float: left;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control {
           margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
-            -ms-flex-preferred-size: auto;
             flex-basis: auto;
             float: none;
             position: relative;
@@ -246,11 +245,11 @@
             margin-block-end: 0;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
           margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
@@ -283,7 +282,7 @@
 
     /* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
 }

package/src/lightning/dualListbox/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/dynamicIcon/dynamic-icon-ellie.slds.css

@@ -44,8 +44,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(2n + 1) {
-  fill: currentColor;
-  stroke: currentColor;
+  fill: currentcolor;
+  stroke: currentcolor;
   stroke-width: 4px;
 }
 

package/src/lightning/dynamicIcon/dynamic-icon-eq.slds.css

@@ -58,6 +58,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @keyframes slds-icon-eq {
   to {
-    transform: scaleY(4.6666666667);
+    transform: scaleY(4.6667);
   }
 }

package/src/lightning/dynamicIcon/dynamic-icon-trend.slds.css

@@ -77,7 +77,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   :host([data-render-mode="shadow"]) .slds-icon-trend__arrow,:host([data-render-mode="shadow"]) 
   .slds-icon-trend__circle {
-    stroke: currentColor;
+    stroke: currentcolor;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;

package/src/lightning/formattedDateTime/__docs__/formattedDateTime.md

@@ -217,7 +217,7 @@ Displays: December 03, 2017, 12:00 PM
 
 #### Usage Considerations
 
-This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
 
 #### Source Code
 

package/src/lightning/formattedNumber/__docs__/formattedNumber.md

@@ -164,7 +164,7 @@ In these cases the unformatted value is shown.
 The locale set in your Salesforce user preferences determines how numbers are formatted. Some locales such as the Arabic (Lebanon) and Bangla (Bangladesh) locales also specify a numeral system other than the Hindu-Arabic numerals 0-9. The org permission “Show Hindu-Arabic Numbers” is intended to override a locale's default numerals. However, `lightning-formatted-number` displays the locale's default numerals even when this permission is enabled in your org. See [Supported Number, Name, and Address Formats (ICU)](https://help.salesforce.com/articleView?id=admin_supported_locales.htm").
 
 The `format-style` attribute is called the `style` attribute in the Aura version of this component.
-See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components).
+See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components).
 
 #### Source Code
 

package/src/lightning/formattedRichText/formatted-rich-text.slds.css

@@ -3,8 +3,6 @@
   line-height: var(--sds-g-font-lineheight, 1.5);
   overflow-wrap: break-word;
   word-wrap: break-word;
-  -webkit-hyphens: manual;
-  -ms-hyphens: manual;
   hyphens: manual;
 }