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

package/src/lightning/treeItem/calendar.slds.css

@@ -1,195 +1,192 @@
 
-
-
-    /* Adding these instead of sldsCommon
+/* Adding these instead of sldsCommon
     as they are conflicting with synthetic styles */
-    :host([data-render-mode="shadow"]) button,:host([data-render-mode="shadow"]) 
-    input,:host([data-render-mode="shadow"]) 
-    optgroup,:host([data-render-mode="shadow"]) 
-    textarea {
-        color: inherit;
-        font: inherit;
-        margin: 0;
-    }
-    :host([data-render-mode="shadow"]) [part~="calendar"] {
-        --slds-c-buttonicon-sizing: 0.875rem;
+:host([data-render-mode="shadow"]) button,:host([data-render-mode="shadow"]) 
+input,:host([data-render-mode="shadow"]) 
+optgroup,:host([data-render-mode="shadow"]) 
+textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+:host([data-render-mode="shadow"]) [part~='calendar'] {
+  --slds-c-buttonicon-sizing: 0.875rem;
 
-        padding: 0;
-        font-size: var(--slds-g-font-scale-neg-1);
-    }
-    :host([data-render-mode="shadow"]) [part~="calendar"] thead > tr > th,:host([data-render-mode="shadow"]) 
-    [part~="calendar"] tbody > tr > td {
-        text-align: center;
-    }
-    :host([data-render-mode="shadow"]) [part~="calendar"] thead > tr > th {
-        padding: var(--slds-g-spacing-2);
-        font-weight: var(--slds-g-font-weight-4);
-        color: var(--slds-g-color-on-surface-2);
-    }
-    :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td {
-        padding: var(--slds-g-spacing-1);
-        font-size: var(--slds-g-font-scale-neg-1);
-    }
-    :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td > .slds-day {
-        width: var(--slds-g-sizing-9);
-        height: var(--slds-g-sizing-9);
-        display: block;
-        position: relative;
-        min-width: var(--slds-g-sizing-9);
-        line-height: var(--slds-g-sizing-9);
-        border-radius: 50%;
-        margin: auto;
-    }
-    /* Indicates today */
-    :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td:hover > .slds-day,:host([data-render-mode="shadow"]) 
-    [part~="calendar"] tbody > tr > td:focus > .slds-day,:host([data-render-mode="shadow"]) 
-    [part~="calendar"] tbody > tr > td.slds-is-today > .slds-day {
-        cursor: pointer;
-    }
-    :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td.slds-is-today > .slds-day {
-        background-color: var(--slds-g-color-brand-base-90);
-        color: var(--slds-g-color-accent-2);
-    }
-    :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td:focus {
-        outline: 0;
-    }
-    :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td:focus > .slds-day {
-        
-        /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-pattern */
-        box-shadow: var(--slds-s-table-cell-shadow-selected);
-    }
-    :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td:hover > .slds-day {
-        background-color: var(--slds-g-color-brand-base-90);
-    }
-    /* Indicates selected days */
-    :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td.slds-is-selected > .slds-day {
-        background: var(--slds-g-color-accent-container-1);
-        color: var(--slds-g-color-on-accent-1);
-    }
-    :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td.slds-is-selected:focus > .slds-day {
-        background: var(--slds-g-color-accent-container-2);
-        box-shadow: var(--slds-g-shadow-5, 0 0 3px #0176d3);
-        color: var(--slds-g-color-on-accent-1);
-    }
-    /* Aligns filter items horizontally */
-    :host([data-render-mode="shadow"]) .slds-datepicker__filter {
-        padding: var(--slds-g-spacing-1);
-    }
-    /* Spaces out month filter */
-    :host([data-render-mode="shadow"]) .slds-datepicker__filter_month,:host([data-render-mode="shadow"]) 
-    .slds-datepicker__filter--month {
-        padding: 0 var(--slds-g-spacing-1) 0 0;
-    }
-    /* Month Table */
-    :host([data-render-mode="shadow"]) .slds-datepicker__month {
-        font-size: var(--slds-g-font-scale-neg-1);
-      }
-    :host([data-render-mode="shadow"]) .slds-has-error .slds-datepicker__filter .slds-select {
-        border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-base-1);
-        box-shadow: none;
-    }
-    /* Indicates days that are in previous/next months */
-    :host([data-render-mode="shadow"]) .slds-day_adjacent-month {
-        color: var(--slds-g-color-border-base-4);
-    }
-    :host([data-render-mode="shadow"]) .slds-table .slds-datepicker .slds-datepicker__month tbody > tr:hover > td {
-        background-color: unset;
-    }
-    /* css properties might look a bit different from
+  padding: 0;
+  font-size: var(--slds-g-font-scale-neg-1);
+}
+:host([data-render-mode="shadow"]) [part~='calendar'] thead > tr > th,:host([data-render-mode="shadow"]) 
+[part~='calendar'] tbody > tr > td {
+  text-align: center;
+}
+:host([data-render-mode="shadow"]) [part~='calendar'] thead > tr > th {
+  padding: var(--slds-g-spacing-2);
+  font-weight: var(--slds-g-font-weight-4);
+  color: var(--slds-g-color-on-surface-2);
+}
+:host([data-render-mode="shadow"]) [part~='calendar'] tbody > tr > td {
+  padding: var(--slds-g-spacing-1);
+  font-size: var(--slds-g-font-scale-neg-1);
+}
+:host([data-render-mode="shadow"]) [part~='calendar'] tbody > tr > td > .slds-day {
+  width: var(--slds-g-sizing-9);
+  height: var(--slds-g-sizing-9);
+  display: block;
+  position: relative;
+  min-width: var(--slds-g-sizing-9);
+  line-height: var(--slds-g-sizing-9);
+  border-radius: 50%;
+  margin: auto;
+}
+/* Indicates today */
+:host([data-render-mode="shadow"]) [part~='calendar'] tbody > tr > td:hover > .slds-day,:host([data-render-mode="shadow"]) 
+[part~='calendar'] tbody > tr > td:focus > .slds-day,:host([data-render-mode="shadow"]) 
+[part~='calendar'] tbody > tr > td.slds-is-today > .slds-day {
+  cursor: pointer;
+}
+:host([data-render-mode="shadow"]) [part~='calendar'] tbody > tr > td.slds-is-today > .slds-day {
+  background-color: var(--slds-g-color-brand-base-90);
+  color: var(--slds-g-color-accent-2);
+}
+:host([data-render-mode="shadow"]) [part~='calendar'] tbody > tr > td:focus {
+  outline: 0;
+}
+:host([data-render-mode="shadow"]) [part~='calendar'] tbody > tr > td:focus > .slds-day {
+  /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-pattern */
+  box-shadow: var(--slds-s-table-cell-shadow-selected);
+}
+:host([data-render-mode="shadow"]) [part~='calendar'] tbody > tr > td:hover > .slds-day {
+  background-color: var(--slds-g-color-brand-base-90);
+}
+/* Indicates selected days */
+:host([data-render-mode="shadow"]) [part~='calendar'] tbody > tr > td.slds-is-selected > .slds-day {
+  background: var(--slds-g-color-accent-container-1);
+  color: var(--slds-g-color-on-accent-1);
+}
+:host([data-render-mode="shadow"]) [part~='calendar'] tbody > tr > td.slds-is-selected:focus > .slds-day {
+  background: var(--slds-g-color-accent-container-2);
+  box-shadow: var(--slds-g-shadow-5, 0 0 3px #0176d3);
+  color: var(--slds-g-color-on-accent-1);
+}
+/* Aligns filter items horizontally */
+:host([data-render-mode="shadow"]) .slds-datepicker__filter {
+  padding: var(--slds-g-spacing-1);
+}
+/* Spaces out month filter */
+:host([data-render-mode="shadow"]) .slds-datepicker__filter_month,:host([data-render-mode="shadow"]) 
+.slds-datepicker__filter--month {
+  padding: 0 var(--slds-g-spacing-1) 0 0;
+}
+/* Month Table */
+:host([data-render-mode="shadow"]) .slds-datepicker__month {
+  font-size: var(--slds-g-font-scale-neg-1);
+}
+:host([data-render-mode="shadow"]) .slds-has-error .slds-datepicker__filter .slds-select {
+  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-base-1);
+  box-shadow: none;
+}
+/* Indicates days that are in previous/next months */
+:host([data-render-mode="shadow"]) .slds-day_adjacent-month {
+  color: var(--slds-g-color-border-base-4);
+}
+:host([data-render-mode="shadow"]) .slds-table .slds-datepicker .slds-datepicker__month tbody > tr:hover > td {
+  background-color: unset;
+}
+/* css properties might look a bit different from
     original SLDS but visual output should be same */
-    :host([data-render-mode="shadow"]) .slds-button {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        padding-block: 0;
-        padding-inline: 0;
-        background: none;
-        background-color: transparent;
-        background-clip: border-box;
-        border-color: transparent;
-        border-style: solid;
-        border-width: var(--slds-g-sizing-border-1);
-        border-radius: var(--slds-g-radius-border-2);
-        line-height: 1.875rem;
-        text-decoration: none;
-        color: var(--slds-g-color-on-surface-1);
-        white-space: normal;
-        user-select: none;
-    }
-    :host([data-render-mode="shadow"]) .slds-button:hover,:host([data-render-mode="shadow"]) 
-    .slds-button:focus,:host([data-render-mode="shadow"]) 
-    .slds-button:active,:host([data-render-mode="shadow"]) 
-    .slds-button:visited {
-        text-decoration: none;
-    }
-    :host([data-render-mode="shadow"]) .slds-button:hover,:host([data-render-mode="shadow"]) 
-    .slds-button:focus {
-        color: var(--slds-g-color-accent-4);
-    }
-    :host([data-render-mode="shadow"]) .slds-button:focus {
-        outline: 0;
-        box-shadow: 0 0 3px var(--slds-g-color-brand-base-50)
-    }
-    :host([data-render-mode="shadow"]) .slds-button:active {
-        color: var(--slds-g-color-accent-3);
-    }
-    :host([data-render-mode="shadow"]) .slds-button[disabled],:host([data-render-mode="shadow"]) 
-    .slds-button:disabled {
-        background-color: transparent;
-        border-color: transparent;
-        color: var(--slds-g-color-disabled-1);
-        cursor: default;
-    }
-    :host([data-render-mode="shadow"]) .slds-button[disabled] *,:host([data-render-mode="shadow"]) 
-    .slds-button:disabled * {
-        pointer-events: none;
-    }
-    :host([data-render-mode="shadow"]) .slds-button:hover .slds-button__icon,:host([data-render-mode="shadow"]) 
-    .slds-button:focus .slds-button__icon,:host([data-render-mode="shadow"]) 
-    .slds-button:active .slds-button__icon,:host([data-render-mode="shadow"]) 
-    .slds-button[disabled] .slds-button__icon,:host([data-render-mode="shadow"]) 
-    .slds-button:disabled .slds-button__icon {
-        fill: currentcolor;
-        pointer-events: none;
-    }
-    :host([data-render-mode="shadow"]) .slds-align_absolute-center {
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        align-items: center;
-        margin: auto;
-    }
-    :host([data-render-mode="shadow"]) .slds-text-link {
-        color: var(--slds-g-color-accent-2);
-        text-decoration: none;
-        transition: color 0.1s linear;
-    }
-    :host([data-render-mode="shadow"]) .slds-text-link:hover,:host([data-render-mode="shadow"]) 
-    .slds-text-link:focus {
-        text-decoration: underline;
-        color: var(--slds-g-color-accent-4);
-    }
-    :host([data-render-mode="shadow"]) .slds-text-link:active {
-        color: var(--slds-g-color-accent-3);
-    }
-    /* Utilities Grid */
-    :host([data-render-mode="shadow"]) .slds-grid {
-        display: flex;
-    }
-    :host([data-render-mode="shadow"]) .slds-align-middle {
-        vertical-align: middle;
-        align-self: center;
-    }
-    :host([data-render-mode="shadow"]) .slds-grid_align-spread,:host([data-render-mode="shadow"]) 
-    .slds-grid--align-spread {
-        justify-content: space-between;
-    }
-    :host([data-render-mode="shadow"]) .slds-grid_align-spread .slds-col,:host([data-render-mode="shadow"]) 
-    .slds-grid--align-spread .slds-col,:host([data-render-mode="shadow"]) 
-    .slds-grid_align-spread [class*="slds-col_padded"],:host([data-render-mode="shadow"]) 
-    .slds-grid--align-spread [class*="slds-col_padded"] {
-        flex-grow: 0;
-    }
-    :host([data-render-mode="shadow"]) .slds-grow {
-        flex-grow: 1;
-    }
+:host([data-render-mode="shadow"]) .slds-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding-block: 0;
+  padding-inline: 0;
+  background: none;
+  background-color: transparent;
+  background-clip: border-box;
+  border-color: transparent;
+  border-style: solid;
+  border-width: var(--slds-g-sizing-border-1);
+  border-radius: var(--slds-g-radius-border-2);
+  line-height: 1.875rem;
+  text-decoration: none;
+  color: var(--slds-g-color-on-surface-1);
+  white-space: normal;
+  user-select: none;
+}
+:host([data-render-mode="shadow"]) .slds-button:hover,:host([data-render-mode="shadow"]) 
+.slds-button:focus,:host([data-render-mode="shadow"]) 
+.slds-button:active,:host([data-render-mode="shadow"]) 
+.slds-button:visited {
+  text-decoration: none;
+}
+:host([data-render-mode="shadow"]) .slds-button:hover,:host([data-render-mode="shadow"]) 
+.slds-button:focus {
+  color: var(--slds-g-color-accent-4);
+}
+:host([data-render-mode="shadow"]) .slds-button:focus {
+  outline: 0;
+  box-shadow: 0 0 3px var(--slds-g-color-brand-base-50);
+}
+:host([data-render-mode="shadow"]) .slds-button:active {
+  color: var(--slds-g-color-accent-3);
+}
+:host([data-render-mode="shadow"]) .slds-button[disabled],:host([data-render-mode="shadow"]) 
+.slds-button:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--slds-g-color-disabled-1);
+  cursor: default;
+}
+:host([data-render-mode="shadow"]) .slds-button[disabled] *,:host([data-render-mode="shadow"]) 
+.slds-button:disabled * {
+  pointer-events: none;
+}
+:host([data-render-mode="shadow"]) .slds-button:hover .slds-button__icon,:host([data-render-mode="shadow"]) 
+.slds-button:focus .slds-button__icon,:host([data-render-mode="shadow"]) 
+.slds-button:active .slds-button__icon,:host([data-render-mode="shadow"]) 
+.slds-button[disabled] .slds-button__icon,:host([data-render-mode="shadow"]) 
+.slds-button:disabled .slds-button__icon {
+  fill: currentcolor;
+  pointer-events: none;
+}
+:host([data-render-mode="shadow"]) .slds-align_absolute-center {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  margin: auto;
+}
+:host([data-render-mode="shadow"]) .slds-text-link {
+  color: var(--slds-g-color-accent-2);
+  text-decoration: none;
+  transition: color 0.1s linear;
+}
+:host([data-render-mode="shadow"]) .slds-text-link:hover,:host([data-render-mode="shadow"]) 
+.slds-text-link:focus {
+  text-decoration: underline;
+  color: var(--slds-g-color-accent-4);
+}
+:host([data-render-mode="shadow"]) .slds-text-link:active {
+  color: var(--slds-g-color-accent-3);
+}
+/* Utilities Grid */
+:host([data-render-mode="shadow"]) .slds-grid {
+  display: flex;
+}
+:host([data-render-mode="shadow"]) .slds-align-middle {
+  vertical-align: middle;
+  align-self: center;
+}
+:host([data-render-mode="shadow"]) .slds-grid_align-spread,:host([data-render-mode="shadow"]) 
+.slds-grid--align-spread {
+  justify-content: space-between;
+}
+:host([data-render-mode="shadow"]) .slds-grid_align-spread .slds-col,:host([data-render-mode="shadow"]) 
+.slds-grid--align-spread .slds-col,:host([data-render-mode="shadow"]) 
+.slds-grid_align-spread [class*='slds-col_padded'],:host([data-render-mode="shadow"]) 
+.slds-grid--align-spread [class*='slds-col_padded'] {
+  flex-grow: 0;
+}
+:host([data-render-mode="shadow"]) .slds-grow {
+  flex-grow: 1;
+}

package/src/lightning/verticalNavigation/__docs__/verticalNavigation.md

@@ -42,11 +42,11 @@ This component inherits styling from [vertical navigation](https://www.lightning
 
 `lightning-vertical-navigation` is used together with these sub-components.
 
--   `lightning-vertical-navigation-section`
--   `lightning-vertical-navigation-item`
--   `lightning-vertical-navigation-overflow`
--   `lightning-vertical-navigation-item-badge`
--   `lightning-vertical-navigation-item-icon`
+- `lightning-vertical-navigation-section`
+- `lightning-vertical-navigation-item`
+- `lightning-vertical-navigation-overflow`
+- `lightning-vertical-navigation-item-badge`
+- `lightning-vertical-navigation-item-icon`
 
 This example creates a basic vertical navigation menu.
 

package/src/lightning/verticalNavigation/verticalNavigation.css

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

package/src/lightning/verticalNavigationItemBadge/badge.slds.css

@@ -1,76 +1,91 @@
 
-  :host([data-render-mode="shadow"]) [part="badge"] {
-    /**
+:host([data-render-mode="shadow"]) [part='badge'] {
+  /**
       * Remap to SLDS blueprint hooks for parity
       * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
       *
       */
-    /* stylelint-disable */
-    --slds-c-badge-font-lineheight: var(--slds-c-badge-line-height);
-    /* stylelint-enable */
-    display: inline-flex;
-    align-items: center;
-    padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2);
-    color: var(--slds-c-badge-text-color, var(--slds-g-color-on-surface-3));
-    font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-1));
-    font-weight: var(--slds-g-font-weight-7);
-    /* stylelint-disable */
-    line-height: var(--slds-c-badge-font-lineheight, initial);
-    /* stylelint-enable */
-    white-space: nowrap;
-    border-width: var(--slds-c-badge-sizing-border, var(--slds-g-sizing-border-1));
-    border-style: solid;
-    border-color: var(--slds-c-badge-color-border, transparent);
-    border-radius: var(--slds-c-badge-radius-border, 15rem);
-    background-color: var(--slds-c-badge-color-background, var(--slds-g-color-neutral-base-95));
-  }
+  /* stylelint-disable */
+  --slds-c-badge-font-lineheight: var(--slds-c-badge-line-height);
+  /* stylelint-enable */
+  display: inline-flex;
+  align-items: center;
+  padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2);
+  color: var(--slds-c-badge-text-color, var(--slds-g-color-on-surface-3));
+  font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-1));
+  font-weight: var(--slds-g-font-weight-7);
+  /* stylelint-disable */
+  line-height: var(--slds-c-badge-font-lineheight, initial);
+  /* stylelint-enable */
+  white-space: nowrap;
+  border-width: var(--slds-c-badge-sizing-border, var(--slds-g-sizing-border-1));
+  border-style: solid;
+  border-color: var(--slds-c-badge-color-border, transparent);
+  border-radius: var(--slds-c-badge-radius-border, 15rem);
+  background-color: var(--slds-c-badge-color-background, var(--slds-g-color-neutral-base-95));
+}
 
-  :host([data-render-mode="shadow"]) [part="badge"]:empty {
-    padding: 0;
-  }
+:host([data-render-mode="shadow"]) [part='badge']:empty {
+  padding: 0;
+}
 
-  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon {
-    display: inline-flex;
-    align-items: center;
-    color: var(--slds-c-badge-icon-color-foreground, var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50)));
-    line-height: 1;
-    vertical-align: middle;
-  }
+:host([data-render-mode="shadow"]) [part='badge'] .slds-badge__icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(
+    --slds-c-badge-icon-color-foreground,
+    var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50))
+  );
+  line-height: 1;
+  vertical-align: middle;
+}
 
-  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_inverse {
-    --slds-c-badge-icon-color-foreground: var(--slds-c-badge-icon-inverse-color-foreground, currentColor);
-  }
+:host([data-render-mode="shadow"]) [part='badge'] .slds-badge__icon.slds-badge__icon_inverse {
+  --slds-c-badge-icon-color-foreground: var(--slds-c-badge-icon-inverse-color-foreground, currentColor);
+}
 
-  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_left {
-    margin-inline-end: var(--slds-g-spacing-1);
-  }
+:host([data-render-mode="shadow"]) [part='badge'] .slds-badge__icon.slds-badge__icon_left {
+  margin-inline-end: var(--slds-g-spacing-1);
+}
 
-  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_right {
-    margin-inline-start: var(--slds-g-spacing-1);
-  }
+:host([data-render-mode="shadow"]) [part='badge'] .slds-badge__icon.slds-badge__icon_right {
+  margin-inline-start: var(--slds-g-spacing-1);
+}
 
-  :host([data-render-mode="shadow"]) [part="badge"] lightning-primitive-icon {
-    vertical-align: middle;
-  }
+:host([data-render-mode="shadow"]) [part='badge'] lightning-primitive-icon {
+  vertical-align: middle;
+}
 
-  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
+/* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
      However, the public API for this component does not expose an attribute for this class. Establishing a programmatic
      mapping between the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
 
-  :host([data-render-mode="shadow"].slds-badge_inverse) {
-    --slds-c-badge-color-background: var(--slds-c-badge-inverse-color-background, var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50)));
-    --slds-c-badge-text-color: var(--slds-c-badge-inverse-text-color, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
-  }
+:host([data-render-mode="shadow"].slds-badge_inverse) {
+  --slds-c-badge-color-background: var(
+    --slds-c-badge-inverse-color-background,
+    var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50))
+  );
+  --slds-c-badge-text-color: var(
+    --slds-c-badge-inverse-text-color,
+    var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100))
+  );
+}
 
-  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
+/* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
      However, the public API for badge does not expose an attribute for this class. Establishing a programmatic mapping between
      the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
 
-  :host([data-render-mode="shadow"].slds-badge_lightest) {
-    --slds-c-badge-color-background: var(--slds-c-badge-lightest-color-background, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
-    --slds-c-badge-color-border: var(--slds-c-badge-lightest-color-border, var(--slds-g-color-border-base-1, var(--slds-g-color-neutral-base-90)));
-  }
+:host([data-render-mode="shadow"].slds-badge_lightest) {
+  --slds-c-badge-color-background: var(
+    --slds-c-badge-lightest-color-background,
+    var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100))
+  );
+  --slds-c-badge-color-border: var(
+    --slds-c-badge-lightest-color-border,
+    var(--slds-g-color-border-base-1, var(--slds-g-color-neutral-base-90))
+  );
+}
 
-  :host([data-render-mode="shadow"].slds-badge:not(:first-of-type)) {
-    margin-inline-start: var(--slds-g-spacing-2);
-  }
+:host([data-render-mode="shadow"].slds-badge:not(:first-of-type)) {
+  margin-inline-start: var(--slds-g-spacing-2);
+}