lightning-base-components 1.26.4-alpha → 1.27.2-alpha

package/src/lightning/relativeDateTime/__docs__/relativeDateTime.md

@@ -38,8 +38,8 @@ time in the past and future.
 
 The `past` and `future` attributes return:
 
--   2 hours ago
--   in 2 days
+- 2 hours ago
+- in 2 days
 
 ```javascript
 import { LightningElement } from 'lwc';
@@ -55,19 +55,19 @@ export default class MyComponentName extends LightningElement {
 
 Other sample output includes:
 
--   Relative past: a few seconds ago, a minute ago, 2 minutes ago, an hour ago, 2 hours ago, 2 days ago, 2 months ago, 2 years ago
--   Relative future: in a few seconds, in a minute, in 2 minutes, in an hour, in 2 hours, in 2 days, in 2 months, in 2 years in 2 days, in 2 months
+- Relative past: a few seconds ago, a minute ago, 2 minutes ago, an hour ago, 2 hours ago, 2 days ago, 2 months ago, 2 years ago
+- Relative future: in a few seconds, in a minute, in 2 minutes, in an hour, in 2 hours, in 2 days, in 2 months, in 2 years in 2 days, in 2 months
 
 The user's language setting in an org determines the language displayed for the units of time. If the locale uses a different language, the output uses the language setting and ignores the locale. For example, if you set the locale to Arabic and the language to English, the output uses digits 0-9 for numbers and English instead of Arabic numerals to be consistent with the language on the user interface. For more information, see [Supported Languages](https://help.salesforce.com/articleView?id=faq_getstart_what_languages_does.htm).
 
 Supported units of time include:
 
--   seconds
--   minutes
--   hours
--   days
--   months
--   years
+- seconds
+- minutes
+- hours
+- days
+- months
+- years
 
 To obtain the language and locale information in your org, use the `@salesforce/i18n` scoped module. For more information, see [Access Internationalization Properties](https://developer.salesforce.com/docs/platform/lwc/guide/create-i18n).
 

package/src/lightning/select/__docs__/select.md

@@ -229,16 +229,16 @@ You can use a combination of the `variant` and `class` attributes to customize t
 
 Use the `variant` attribute with one of these values to position the labels differently relative to the dropdown menu.
 
--   `standard` is the default, which displays the label above the dropdown menu.
--   `label-hidden` hides the label but make it available to assistive technology. If you provide a value for `field-level-help`, the tooltip icon is still displayed.
--   `label-inline` aligns the label and dropdown menu horizontally.
--   `label-stacked` places the label above the dropdown menu.
+- `standard` is the default, which displays the label above the dropdown menu.
+- `label-hidden` hides the label but make it available to assistive technology. If you provide a value for `field-level-help`, the tooltip icon is still displayed.
+- `label-inline` aligns the label and dropdown menu horizontally.
+- `label-stacked` places the label above the dropdown menu.
 
 ##### Customize Component Styling
 
 To apply additional styling, use the SLDS [utility classes](https://www.lightningdesignsystem.com/utilities/alignment) with the `class` attribute. For example, you can add padding on the top of the component using the `slds-p-top_medium` SLDS class.
 
-Component styling hooks use the --slds-c-* prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See [Select: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/select/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component. 
+Component styling hooks use the --slds-c-\* prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See [Select: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/select/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component.
 
 ## Usage Considerations
 

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

@@ -1,5 +1,4 @@
 
-
 /**
  * sldsFormElementUtils.css and form-element.css have many similarities
  * however, they are used for very different use cases, and this is why
@@ -255,7 +254,9 @@
   display: block;
 }
 
-:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {/* for rich text via lightning-quill */
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {
+  /* for rich text via lightning-quill */
+
   /* @W-14518344 The following line still exists in SLDS-internal
       but it was removed here because it was causing the input
       component to not display it's bottom border
@@ -294,8 +295,7 @@
 /* Force inner child input to not have padding and margin.
 The parent (ex. lightning-input-field) will provide it instead */
 
-:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline']
-{
+:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline'] {
   padding: 0;
   margin-block-end: 0;
 }

package/src/lightning/select/select.css

@@ -1 +1 @@
-@import './select.lbc.native.css';
+@import './select.lbc.native.css';

package/src/lightning/select/select.html

@@ -36,7 +36,10 @@
         </div>
     </div>
 
-    <template if:true={_helpMessage}>
-        <div aria-live="assertive" class="slds-form-element__help" data-help-message id="help-message">{_helpMessage}</div>
-    </template>
+    <div role="status">
+        <div if:true={_helpMessage} id="help-message" data-help-message class="slds-form-element__help">
+            <span class="slds-assistive-text">{label}</span>
+            {_helpMessage}
+        </div>
+    </div>
 </template>

package/src/lightning/select/select.lbc.native.css

@@ -1,3 +1,3 @@
 @import 'lightning/sldsCommon';
-@import "./form-element.slds.css";
-@import "./select.slds.css";
+@import './form-element.slds.css';
+@import './select.slds.css';

package/src/lightning/select/select.slds.css

@@ -1,118 +1,120 @@
 
+/* SELECT */
+:host([data-render-mode="shadow"]) [part='select'] {
+  height: calc(var(--slds-c-select-input-sizing-height, 1.875rem) + (var(--slds-g-sizing-border-1) * 2));
+  width: 100%;
+  border: var(--slds-g-sizing-border-1) solid
+    var(--slds-c-select-color-border, var(--slds-s-input-color-border, var(--slds-g-color-border-1)));
+  border-radius: var(--slds-c-select-radius-border, var(--slds-g-radius-border-2));
+  background-color: var(--slds-c-select-color-background, var(--slds-g-color-surface-container-1));
+  color: var(--slds-c-select-text-color, currentcolor, var(--slds-g-color-on-surface-1));
+  box-shadow: var(--slds-c-select-shadow);
+  transition:
+    border 0.1s linear,
+    background-color 0.1s linear;
+}
+:host([data-render-mode="shadow"]) [part='select'][required] {
+  box-shadow: none; /* @legacy: This is ported over from SLDS but not clear why this design decision is made.  */
+}
+:host([data-render-mode="shadow"]) [part='select']:focus,:host([data-render-mode="shadow"]) 
+[part='select']:active {
+  outline: 0;
+  border-color: var(--slds-c-select-color-border-focus, var(--slds-g-color-border-2));
+  background-color: var(--slds-c-select-color-background-focus, var(--slds-g-color-surface-container-1));
+  color: var(--slds-c-select-text-color-focus);
+  box-shadow: var(--slds-c-select-shadow-focus, 0 0 3px var(--slds-g-color-accent-2));
+}
+:host([data-render-mode="shadow"]) [part='select'][disabled] {
+  background-color: var(--slds-g-color-disabled-container-1);
+  border-color: var(--slds-g-color-border-disabled-1);
+  color: var(--slds-g-color-on-disabled-1);
+  cursor: not-allowed;
+  user-select: none;
+  opacity: 1;
+}
+:host([data-render-mode="shadow"]) [part='select'][disabled]:focus,:host([data-render-mode="shadow"]) 
+[part='select'][disabled]:active {
+  box-shadow: none;
+}
+:host([data-render-mode="shadow"]) [part='select'][size],:host([data-render-mode="shadow"]) 
+[part='select'][multiple] {
+  min-height: calc(var(--slds-c-select-input-sizing-height) + (var(--slds-g-sizing-border-1) * 2));
+  height: inherit;
+}
+:host([data-render-mode="shadow"]) [part='select'][size] option,:host([data-render-mode="shadow"]) 
+[part='select'][multiple] option {
+  padding: var(--slds-g-spacing-2);
+}
+:host([data-render-mode="shadow"]) .slds-select_container {
+  position: relative;
+  color: var(--slds-c-select-container-color);
+}
+:host([data-render-mode="shadow"]) .slds-select_container [part='select'] {
+  /* stylelint-disable property-no-vendor-prefix */
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  /* stylelint-enable property-no-vendor-prefix */
+  padding: 0 var(--slds-g-spacing-5) 0 var(--slds-g-spacing-2);
+}
+:host([data-render-mode="shadow"]) .slds-select_container [part='select']::-ms-expand {
+  display: none;
+}
+:host([data-render-mode="shadow"]) .slds-select_container::before,:host([data-render-mode="shadow"]) 
+.slds-select_container::after {
+  position: absolute;
+  content: '';
+  display: block;
+  right: var(--slds-g-spacing-2);
+  width: 0;
+  height: 0;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  pointer-events: none;
+}
+:host([data-render-mode="shadow"]) .slds-select_container::before {
+  border-bottom: 5px solid currentcolor;
+  top: calc((var(--slds-g-sizing-8) / 2) - 6px);
+}
+:host([data-render-mode="shadow"]) .slds-select_container::after {
+  border-top: 5px solid currentcolor;
+  bottom: calc((var(--slds-g-sizing-8) / 2) - 6px);
+}
+:host([data-render-mode="shadow"][multiple]) .slds-select_container::before,:host([data-render-mode="shadow"][multiple]) .slds-select_container::after {
+  display: none;
+}
+:host([data-render-mode="shadow"][invalid]) [part='select'] {
+  border-color: var(--slds-g-color-error-base-50);
+  box-shadow: var(--slds-g-color-error-base-50) 0 0 0 var(--slds-g-sizing-border-1) inset;
+  background-clip: padding-box;
+}
+:host([data-render-mode="shadow"][invalid]) [part='select']:focus,:host([data-render-mode="shadow"][invalid]) [part='select']:active {
+  box-shadow:
+    var(--slds-g-color-error-1) 0 0 0 var(--slds-g-sizing-border-1) inset,
+    0 0 3px var(--slds-g-color-border-error-1);
+}
+/* LABEL */
+/* Styling Specifically for select label */
+:host([data-render-mode="shadow"]) [part='select-label'] {
+  padding-inline-end: var(--slds-g-spacing-2);
+  color: var(--slds-c-select-label-color, var(--slds-g-color-on-surface-2));
+  font-size: var(--slds-c-select-label-font-size, var(--slds-g-font-scale-neg-1));
 
+  /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
+  display: inline-flex;
 
-    /* SELECT */
-    :host([data-render-mode="shadow"]) [part='select'] {
-      height: calc(var(--slds-c-select-input-sizing-height, 1.875rem) + (var(--slds-g-sizing-border-1) * 2));
-      width: 100%;
-      border: var(--slds-g-sizing-border-1) solid var(--slds-c-select-color-border, var(--slds-s-input-color-border, var(--slds-g-color-border-1)));
-      border-radius: var(--slds-c-select-radius-border, var(--slds-g-radius-border-2));
-      background-color: var(--slds-c-select-color-background,
-      var(--slds-g-color-surface-container-1));
-      color: var(--slds-c-select-text-color, currentcolor, var(--slds-g-color-on-surface-1));
-      box-shadow: var(--slds-c-select-shadow);
-      transition: border 0.1s linear, background-color 0.1s linear;
-    }
-    :host([data-render-mode="shadow"]) [part='select'][required] {
-      box-shadow: none; /* @legacy: This is ported over from SLDS but not clear why this design decision is made.  */
-    }
-    :host([data-render-mode="shadow"]) [part='select']:focus,:host([data-render-mode="shadow"]) 
-    [part='select']:active {
-      outline: 0;
-      border-color: var(--slds-c-select-color-border-focus, var(--slds-g-color-border-2));
-      background-color: var(--slds-c-select-color-background-focus, var(--slds-g-color-surface-container-1));
-      color: var(--slds-c-select-text-color-focus);
-      box-shadow: var(--slds-c-select-shadow-focus, 0 0 3px var(--slds-g-color-accent-2));
-    }
-    :host([data-render-mode="shadow"]) [part='select'][disabled] {
-      background-color: var(--slds-g-color-disabled-container-1);
-      border-color: var(--slds-g-color-border-disabled-1);
-      color: var(--slds-g-color-on-disabled-1);
-      cursor: not-allowed;
-      user-select: none;
-      opacity: 1;
-    }
-    :host([data-render-mode="shadow"]) [part='select'][disabled]:focus,:host([data-render-mode="shadow"]) 
-    [part='select'][disabled]:active {
-      box-shadow: none;
-    }
-    :host([data-render-mode="shadow"]) [part='select'][size],:host([data-render-mode="shadow"]) 
-    [part='select'][multiple] {
-      min-height: calc(var(--slds-c-select-input-sizing-height) + (var(--slds-g-sizing-border-1) * 2));
-      height: inherit;
-    }
-    :host([data-render-mode="shadow"]) [part='select'][size] option,:host([data-render-mode="shadow"]) 
-    [part='select'][multiple] option {
-      padding: var(--slds-g-spacing-2);
-    }
-    :host([data-render-mode="shadow"]) .slds-select_container {
-      position: relative;
-      color: var(--slds-c-select-container-color);
-    }
-    :host([data-render-mode="shadow"]) .slds-select_container [part="select"] {
-      /* stylelint-disable property-no-vendor-prefix */
-      -moz-appearance: none;
-      -webkit-appearance: none;
-      /* stylelint-enable property-no-vendor-prefix */
-      padding: 0 var(--slds-g-spacing-5) 0 var(--slds-g-spacing-2);
-    }
-    :host([data-render-mode="shadow"]) .slds-select_container [part="select"]::-ms-expand {
-      display: none;
-    }
-    :host([data-render-mode="shadow"]) .slds-select_container::before,:host([data-render-mode="shadow"]) 
-    .slds-select_container::after {
-      position: absolute;
-      content: '';
-      display: block;
-      right: var(--slds-g-spacing-2);
-      width: 0;
-      height: 0;
-      border-left: 3px solid transparent;
-      border-right: 3px solid transparent;
-      pointer-events: none;
-    }
-    :host([data-render-mode="shadow"]) .slds-select_container::before {
-      border-bottom: 5px solid currentcolor;
-      top: calc((var(--slds-g-sizing-8) / 2) - 6px);
-    }
-    :host([data-render-mode="shadow"]) .slds-select_container::after {
-      border-top: 5px solid currentcolor;
-      bottom: calc((var(--slds-g-sizing-8) / 2) - 6px);
-    }
-    :host([data-render-mode="shadow"][multiple]) .slds-select_container::before,:host([data-render-mode="shadow"][multiple]) .slds-select_container::after {
-      display: none;
-    }
-    :host([data-render-mode="shadow"][invalid]) [part="select"] {
-      border-color: var(--slds-g-color-error-base-50);
-      box-shadow: var(--slds-g-color-error-base-50) 0 0 0 var(--slds-g-sizing-border-1) inset;
-      background-clip: padding-box;
-    }
-    :host([data-render-mode="shadow"][invalid]) [part="select"]:focus,:host([data-render-mode="shadow"][invalid]) [part="select"]:active {
-      box-shadow: var(--slds-g-color-error-1) 0 0 0 var(--slds-g-sizing-border-1) inset, 0 0 3px var(--slds-g-color-border-error-1);
-    }
-    /* LABEL */
-    /* Styling Specifically for select label */
-    :host([data-render-mode="shadow"]) [part="select-label"] {
-      padding-inline-end: var(--slds-g-spacing-2);
-      color: var(--slds-c-select-label-color, var(--slds-g-color-on-surface-2));
-      font-size: var(--slds-c-select-label-font-size, var(--slds-g-font-scale-neg-1));
-
-      /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
-      display: inline-flex;
-
-      /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
-      column-gap: 0.125rem;
-    }
-    /* ASSISTIVE TEXT */
-    :host([data-render-mode="shadow"]) .slds-assistive-text {
-      position: absolute !important;
-      margin: -1px !important;
-      border: 0 !important;
-      padding: 0 !important;
-      width: 1px !important;
-      height: 1px !important;
-      overflow: hidden !important;
-      clip: rect(0 0 0 0) !important;
-      text-transform: none !important;
-      white-space: nowrap !important;
-    }
+  /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
+  column-gap: 0.125rem;
+}
+/* ASSISTIVE TEXT */
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}

package/src/lightning/sldsCommon/sldsCommon.css

@@ -1,4 +1,3 @@
-
 /**
  * Normalize box sizing to border box for all browsers.
  */

package/src/lightning/sldsFormElementUtils/sldsFormElementUtils.css

@@ -1,4 +1,3 @@
-
 /**
  * sldsFormElementUtils.css and form-element.css have many similarities
  * however, they are used for very different use cases, and this is why
@@ -23,7 +22,6 @@
  */
 
 @supports (--styling-hooks: '') {
-
     fieldset {
         border: 0;
         margin: 0;
@@ -44,10 +42,16 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-s-label-color, var(--slds-g-color-on-surface-2));
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(
+            --slds-s-label-font-size,
+            var(--slds-g-font-scale-neg-2)
+        );
         padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        margin-block-end: var(--slds-s-label-spacing-gap, calc(var(--slds-g-spacing-1) / 2));
+        margin-block-end: var(
+            --slds-s-label-spacing-gap,
+            calc(var(--slds-g-spacing-1) / 2)
+        );
     }
 
     .slds-form-element__label:empty {
@@ -87,14 +91,17 @@
     }
 
     /* error message styling for datatable inline edit */
-    div[data-name^="dt-inline-edit-"] {
+    div[data-name^='dt-inline-edit-'] {
         width: 100%;
         padding-inline-start: var(--slds-g-spacing-3);
     }
 
     .slds-form-element__help,
     .slds-form-element__helper {
-        font-size: var(--slds-s-helptext-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(
+            --slds-s-helptext-font-size,
+            var(--slds-g-font-scale-neg-2)
+        );
         margin-block-start: calc(var(--slds-g-spacing-1) / 2);
         display: block;
         color: var(--slds-s-helptext-color);
@@ -106,7 +113,8 @@
 
     .slds-form-element_readonly {
         flex-basis: 0%;
-        border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+        border-bottom: var(--slds-g-sizing-border-1) solid
+            var(--slds-g-color-border-1);
         margin-block-end: 0;
     }
 
@@ -124,7 +132,7 @@
         float: inline-start;
     }
 
-    [dir=rtl] .slds-form-element__legend {
+    [dir='rtl'] .slds-form-element__legend {
         float: inline-end;
         padding-inline-end: 0;
     }
@@ -143,7 +151,10 @@
         word-wrap: break-word;
         word-break: break-word;
         display: inline-block;
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-1));
+        font-size: var(
+            --slds-s-label-font-size,
+            var(--slds-g-font-scale-neg-1)
+        );
         font-weight: var(--slds-g-font-weight-4);
         color: var(--slds-g-color-neutral-base-10);
         width: 100%;
@@ -189,7 +200,6 @@
     }
 
     @media (width >= 30em) {
-
         .slds-form_inline .slds-form-element {
             margin-inline-end: var(--slds-g-spacing-2);
         }
@@ -205,7 +215,6 @@
             vertical-align: middle;
             margin-block-end: 0;
         }
-
     }
 
     .slds-form-element__legend_has-tooltip {
@@ -240,7 +249,7 @@
         margin-block-end: 0;
     }
 
-    .slds-form-element_stacked:not([class*=slds-size]) {
+    .slds-form-element_stacked:not([class*='slds-size']) {
         width: 100%;
         flex-basis: 100%;
     }
@@ -262,7 +271,7 @@
         clear: inline-start;
     }
 
-    [dir=rtl] .slds-form-element_stacked .slds-form-element__control {
+    [dir='rtl'] .slds-form-element_stacked .slds-form-element__control {
         clear: inline-end;
     }
 
@@ -287,7 +296,7 @@
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
-    .slds-form-element_horizontal:not([class*=slds-size]) {
+    .slds-form-element_horizontal:not([class*='slds-size']) {
         width: 100%;
         -ms-flex-preferred-size: 100%;
         flex-basis: 100%;
@@ -303,16 +312,22 @@
     }
 
     .slds-form-element_horizontal.slds-is-edited {
-        padding-block-start: calc(var(--slds-g-spacing-4) + var(--slds-g-spacing-1));
+        padding-block-start: calc(
+            var(--slds-g-spacing-4) + var(--slds-g-spacing-1)
+        );
     }
 
     @media (width >= 48em) {
-        .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__label {
+        .slds-form-element_horizontal.slds-form-element_1-col
+            .slds-form-element__label {
             max-width: calc((50% - 33.333%) - var(--slds-g-sizing-6));
         }
 
-        .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__control {
-            padding-inline-start: calc((50% - 33.333%) - var(--slds-g-sizing-3));
+        .slds-form-element_horizontal.slds-form-element_1-col
+            .slds-form-element__control {
+            padding-inline-start: calc(
+                (50% - 33.333%) - var(--slds-g-sizing-3)
+            );
         }
 
         .slds-form-element_horizontal .slds-form-element__label {
@@ -329,7 +344,9 @@
             clear: none;
         }
 
-        .slds-form-element_horizontal .slds-form-element__control .slds-form-element__control {
+        .slds-form-element_horizontal
+            .slds-form-element__control
+            .slds-form-element__control {
             padding-inline-start: 0;
         }
 
@@ -343,7 +360,9 @@
             padding-inline: 0;
         }
 
-        .slds-form-element_horizontal .slds-checkbox:not(.slds-checkbox_stacked) .slds-form-element__label,
+        .slds-form-element_horizontal
+            .slds-checkbox:not(.slds-checkbox_stacked)
+            .slds-form-element__label,
         .slds-form-element_horizontal .slds-radio .slds-form-element__label {
             position: relative;
             float: none;
@@ -351,13 +370,19 @@
             width: auto;
         }
 
-        .slds-form-element_horizontal .slds-form-element__row .slds-form-element__label,
-        .slds-form-element_horizontal .slds-form-element__row .slds-form-element__control,
-        .slds-form-element_horizontal .slds-dueling-list__column .slds-form-element__label {
+        .slds-form-element_horizontal
+            .slds-form-element__row
+            .slds-form-element__label,
+        .slds-form-element_horizontal
+            .slds-form-element__row
+            .slds-form-element__control,
+        .slds-form-element_horizontal
+            .slds-dueling-list__column
+            .slds-form-element__label {
             width: auto;
             max-width: 100%;
-            flex-basis:auto;
-            float:none;
+            flex-basis: auto;
+            float: none;
             position: relative;
             padding-inline-start: 0;
             margin-block-end: 0;
@@ -367,11 +392,15 @@
             clear: none;
         }
 
-        .slds-form-element_horizontal .slds-input-has-icon_left .slds-input__icon {
+        .slds-form-element_horizontal
+            .slds-input-has-icon_left
+            .slds-input__icon {
             inset-inline-start: calc(33% + var(--slds-g-sizing-4));
         }
 
-        .slds-form-element_horizontal .slds-input-has-icon_left-right .slds-input__icon_left {
+        .slds-form-element_horizontal
+            .slds-input-has-icon_left-right
+            .slds-input__icon_left {
             inset-inline-start: calc(33% + var(--slds-g-sizing-4));
         }
     }
@@ -390,7 +419,9 @@
         margin-inline-end: calc(var(--slds-g-spacing-1) * -1);
     }
 
-    .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
+    .slds-form-element_compound
+        .slds-form-element__row
+        .slds-form-element__label {
         padding-block-start: 0;
     }
 
@@ -429,7 +460,10 @@
         margin-block-end: 0;
     }
 
-    .slds-form_compound .slds-form-element__row .slds-form-element + .slds-form-element {
+    .slds-form_compound
+        .slds-form-element__row
+        .slds-form-element
+        + .slds-form-element {
         padding-inline-start: var(--slds-g-spacing-2);
         margin-block-start: 0;
     }

package/src/lightning/sldsMediaObject/sldsMediaObject.css

@@ -1,4 +1,3 @@
-
 .slds-media {
     display: flex;
     align-items: flex-start;
@@ -19,7 +18,7 @@
 }
 
 .slds-media__body,
-.slds-media__body> :last-child {
+.slds-media__body > :last-child {
     margin-block-end: 0;
 }
 
@@ -59,7 +58,6 @@
 }
 
 @media (width <= 48em) {
-
     .slds-media_responsive {
         display: block;
     }

package/src/lightning/sldsUtilsAlignment/sldsUtilsAlignment.css

@@ -1,4 +1,3 @@
-
 :host([data-render-mode='shadow']) .slds-align_absolute-center {
     display: flex;
     justify-content: center;

package/src/lightning/sldsUtilsBorders/sldsUtilsBorders.css

@@ -1,16 +1,19 @@
-
 .slds-border_top {
-    border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, #e5e5e5);
+    border-top: var(--slds-g-sizing-border-1, 1px) solid
+        var(--slds-g-color-border-base-1, #e5e5e5);
 }
 
 .slds-border_right {
-    border-right: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, #e5e5e5);
+    border-right: var(--slds-g-sizing-border-1, 1px) solid
+        var(--slds-g-color-border-base-1, #e5e5e5);
 }
 
 .slds-border_bottom {
-    border-bottom: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, #e5e5e5);
+    border-bottom: var(--slds-g-sizing-border-1, 1px) solid
+        var(--slds-g-color-border-base-1, #e5e5e5);
 }
 
 .slds-border_left {
-    border-left: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, #e5e5e5);
+    border-left: var(--slds-g-sizing-border-1, 1px) solid
+        var(--slds-g-color-border-base-1, #e5e5e5);
 }

package/src/lightning/sldsUtilsBox/sldsUtilsBox.css

@@ -1,4 +1,3 @@
-
 :host([data-render-mode='shadow']) .slds-box,
 :host([data-render-mode='shadow']) ::slotted(.slds-box) {
     padding: var(--slds-g-spacing-4, 1rem);

package/src/lightning/sldsUtilsFloats/sldsUtilsFloats.css

@@ -1,6 +1,5 @@
-
 .slds-clearfix:after {
-    content: "";
+    content: '';
     display: table;
     clear: both;
 }