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

package/src/lightning/card/__docs__/card.md

@@ -86,7 +86,7 @@ Visit [icons](https://lightningdesignsystem.com/icons/) to view available icons.
 
 To apply additional styling, use the SLDS [utility classes](https://www.lightningdesignsystem.com/utilities/alignment) with the `class` attribute, as shown in the **Add an Action to the Footer Slot** section.
 
-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 [Cards: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/cards/#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 [Cards: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/cards/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component.
 
 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.
 

package/src/lightning/card/__examples__/custom/custom.css

@@ -1,4 +1,4 @@
 :host {
-    min-width:430px;
-    max-width:620px;
+    min-width: 430px;
+    max-width: 620px;
 }

package/src/lightning/card/card.slds.css

@@ -1,117 +1,95 @@
 
-  :host([data-render-mode="shadow"]) [part="card"] {
-    /**
+:host([data-render-mode="shadow"]) [part='card'] {
+  /**
      * Reassignments for parity with SLDS blueprint
      * https://www.lightningdesignsystem.com/components/breadcrumbs/#Styling-Hooks-Overview
      */
-     /* stylelint-disable */
-     --slds-c-card-spacing-blockstart: var(--slds-c-card-spacing-block-start);
-     --slds-c-card-spacing-blockend: var(--slds-c-card-spacing-block-end);
-     --slds-c-card-spacing-inlinestart: var(--slds-c-card-spacing-inline-start);
-     --slds-c-card-spacing-inlineend: var(--slds-c-card-spacing-inline-end);
-     --slds-c-card-header-spacing-blockstart: var(--slds-c-card-header-spacing-block-start);
-     --slds-c-card-header-spacing-blockend: var(--slds-c-card-header-spacing-block-end);
-     --slds-c-card-header-spacing-inlinestart: var(--slds-c-card-header-spacing-inline-start);
-     --slds-c-card-header-spacing-inlineend: var(--slds-c-card-header-spacing-inline-end);
-     --slds-c-card-body-spacing-blockstart: var(--slds-c-card-body-spacing-block-start);
-     --slds-c-card-body-spacing-blockend: var(--slds-c-card-body-spacing-block-end);
-     --slds-c-card-body-spacing-inlinestart: var(--slds-c-card-body-spacing-inline-start);
-     --slds-c-card-body-spacing-inlineend: var(--slds-c-card-body-spacing-inline-end);
-     --slds-c-card-footer-spacing-blockstart: var(--slds-c-card-footer-spacing-block-start);
-     --slds-c-card-footer-spacing-blockend: var(--slds-c-card-footer-spacing-block-end);
-     --slds-c-card-footer-spacing-inlinestart: var(--slds-c-card-footer-spacing-inline-start);
-     --slds-c-card-footer-spacing-inlineend: var(--slds-c-card-footer-spacing-inline-end);
-     /* stylelint-enable */
-
-
-    position: relative;
-    /* stylelint-disable */
-    padding-block-start:
-      var(--slds-c-card-spacing-blockstart, 0);
-    padding-block-end:
-      var(--slds-c-card-spacing-blockend 0);
-    padding-inline-start:
-      var(--slds-c-card-spacing-inlinestart, 0);
-    padding-inline-end:
-      var(--slds-c-card-spacing-inlineend, 0);
-    /* stylelint-enable */
-    background:
-      var(--slds-c-card-color-background,
-        var(--slds-g-color-surface-container-1));
-    border-width:
-      var(--slds-c-card-sizing-border,
-        var(--slds-g-sizing-border-1));
-    border-color:
-      var(--slds-c-card-color-border,
-        var(--slds-g-color-border-base-1,
-          var(--slds-g-color-border-1)));
-    border-radius:
-      var(--slds-c-card-radius-border,
-        var(--slds-g-radius-border-2));
-    box-shadow:
-      var(--slds-c-card-shadow,
-        0 2px 2px 0 var(--slds-g-shadow-2));
-    color: var(--slds-c-card-text-color);
-    border-style: solid;
-    background-clip: padding-box;
-  }
-
-  :host([data-render-mode="shadow"]) [part='header'] {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    grid-template-areas: 'icon title actions';
-    align-items: center;
-
-    /* Padding */
-    /* stylelint-disable */
-    padding-block-start:
-      var(--slds-c-card-header-spacing-blockstart,
-          var(--slds-g-spacing-3));
-    padding-block-end:
-      var(--slds-c-card-header-spacing-blockend, 0);
-    padding-inline-start:
-      var(--slds-c-card-header-spacing-inlinestart,
-          var(--slds-g-spacing-4));
-    padding-inline-end:
-      var(--slds-c-card-header-spacing-inlineend,
-          var(--slds-g-spacing-4));
-
-    /* Margin */
-    margin-block-end: var(--slds-c-card-header-spacing-blockend,
-        var(--slds-g-spacing-3));
-    /* stylelint-enable */
-
-    /**
+  /* stylelint-disable */
+  --slds-c-card-spacing-blockstart: var(--slds-c-card-spacing-block-start);
+  --slds-c-card-spacing-blockend: var(--slds-c-card-spacing-block-end);
+  --slds-c-card-spacing-inlinestart: var(--slds-c-card-spacing-inline-start);
+  --slds-c-card-spacing-inlineend: var(--slds-c-card-spacing-inline-end);
+  --slds-c-card-header-spacing-blockstart: var(--slds-c-card-header-spacing-block-start);
+  --slds-c-card-header-spacing-blockend: var(--slds-c-card-header-spacing-block-end);
+  --slds-c-card-header-spacing-inlinestart: var(--slds-c-card-header-spacing-inline-start);
+  --slds-c-card-header-spacing-inlineend: var(--slds-c-card-header-spacing-inline-end);
+  --slds-c-card-body-spacing-blockstart: var(--slds-c-card-body-spacing-block-start);
+  --slds-c-card-body-spacing-blockend: var(--slds-c-card-body-spacing-block-end);
+  --slds-c-card-body-spacing-inlinestart: var(--slds-c-card-body-spacing-inline-start);
+  --slds-c-card-body-spacing-inlineend: var(--slds-c-card-body-spacing-inline-end);
+  --slds-c-card-footer-spacing-blockstart: var(--slds-c-card-footer-spacing-block-start);
+  --slds-c-card-footer-spacing-blockend: var(--slds-c-card-footer-spacing-block-end);
+  --slds-c-card-footer-spacing-inlinestart: var(--slds-c-card-footer-spacing-inline-start);
+  --slds-c-card-footer-spacing-inlineend: var(--slds-c-card-footer-spacing-inline-end);
+  /* stylelint-enable */
+
+  position: relative;
+  /* stylelint-disable */
+  padding-block-start: var(--slds-c-card-spacing-blockstart, 0);
+  padding-block-end: var(--slds-c-card-spacing-blockend 0);
+  padding-inline-start: var(--slds-c-card-spacing-inlinestart, 0);
+  padding-inline-end: var(--slds-c-card-spacing-inlineend, 0);
+  /* stylelint-enable */
+  background: var(--slds-c-card-color-background, var(--slds-g-color-surface-container-1));
+  border-width: var(--slds-c-card-sizing-border, var(--slds-g-sizing-border-1));
+  border-color: var(
+    --slds-c-card-color-border,
+    var(--slds-g-color-border-base-1, var(--slds-g-color-border-1))
+  );
+  border-radius: var(--slds-c-card-radius-border, var(--slds-g-radius-border-2));
+  box-shadow: var(--slds-c-card-shadow, 0 2px 2px 0 var(--slds-g-shadow-2));
+  color: var(--slds-c-card-text-color);
+  border-style: solid;
+  background-clip: padding-box;
+}
+
+:host([data-render-mode="shadow"]) [part='header'] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-areas: 'icon title actions';
+  align-items: center;
+
+  /* Padding */
+  /* stylelint-disable */
+  padding-block-start: var(--slds-c-card-header-spacing-blockstart, var(--slds-g-spacing-3));
+  padding-block-end: var(--slds-c-card-header-spacing-blockend, 0);
+  padding-inline-start: var(--slds-c-card-header-spacing-inlinestart, var(--slds-g-spacing-4));
+  padding-inline-end: var(--slds-c-card-header-spacing-inlineend, var(--slds-g-spacing-4));
+
+  /* Margin */
+  margin-block-end: var(--slds-c-card-header-spacing-blockend, var(--slds-g-spacing-3));
+  /* stylelint-enable */
+
+  /**
      * These become reassignments once base headings get hooks.
      * See [part='header'] h2 rule block for more info.
      */
-    font-size: var(--slds-c-card-heading-font-size);
-    font-weight: var(--slds-g-font-weight-bold,
-        var(--slds-g-font-weight-bold));
-    line-height: var(--slds-g-font-lineheight-2);
-  }
+  font-size: var(--slds-c-card-heading-font-size);
+  font-weight: var(--slds-g-font-weight-bold, var(--slds-g-font-weight-bold));
+  line-height: var(--slds-g-font-lineheight-2);
+}
 
-  /*
+/*
 * Header's grid layout areas
 *
 * The header sections utilize grid areas and 'part' apis to allow the header's
 * layout be modular (grid-area) and explicitly customized (part).
 */
 
-  :host([data-render-mode="shadow"]) [part="icon"] {
-    grid-area: icon;
-    line-height: 0;
-  }
+:host([data-render-mode="shadow"]) [part='icon'] {
+  grid-area: icon;
+  line-height: 0;
+}
 
-  :host([data-render-mode="shadow"]) [part="title"] {
-    grid-area: title;
-  }
+:host([data-render-mode="shadow"]) [part='title'] {
+  grid-area: title;
+}
 
-  :host([data-render-mode="shadow"]) [part="actions"] {
-    grid-area: actions;
-  }
+:host([data-render-mode="shadow"]) [part='actions'] {
+  grid-area: actions;
+}
 
-  /**
+/**
 * This would be a reassignment in :host if styling hooks existed for headings.
 * Until that exists, we have to do a hard reset here. This can be removed once
 * headings get hooks.
@@ -119,88 +97,72 @@
 * :host { --slds-g-heading-font-size: var(--slds-c-card-heading-font-size); }
 */
 
-  :host([data-render-mode="shadow"]) [part="title"] h2 {
-    font-weight: var(--slds-c-card-heading-font-weight, var(--slds-g-font-weight-7));
-    font-size: inherit;
-  }
+:host([data-render-mode="shadow"]) [part='title'] h2 {
+  font-weight: var(--slds-c-card-heading-font-weight, var(--slds-g-font-weight-7));
+  font-size: inherit;
+}
 
-  /**
+/**
 * Recreating truncation explicitly here so the behavior is consistent with
 * current SLDS.
 *
 * @TODO: Evaluate if this should be a utility or something similar.
 */
 
-  :host([data-render-mode="shadow"]) [part="title"] span {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  :host([data-render-mode="shadow"]) [part="body"] {
-    /* stylelint-disable */
-    margin-block-start:
-      var(--slds-c-card-body-spacing-blockstart);
-    margin-block-end:
-      var(--slds-c-card-body-spacing-blockend);
-    padding-inline-start:
-      var(--slds-c-card-body-spacing-inlinestart);
-    padding-inline-end:
-      var(--slds-c-card-body-spacing-inlineend);
-    --slds-c-card-color-border: transparent;
-    --slds-c-card-shadow: none;
-  }
-
-  :host([data-render-mode="shadow"]) [part='footer'] {
-    padding-block-start:
-      var(--slds-c-card-footer-spacing-blockstart,
-          var(--slds-g-spacing-3));
-    padding-block-end:
-      var(--slds-c-card-footer-spacing-blockend,
-          var(--slds-g-spacing-3));
-    padding-inline-start:
-      var(--slds-c-card-footer-spacing-inlinestart,
-          var(--slds-g-spacing-4));
-    padding-inline-end:
-      var(--slds-c-card-footer-spacing-inlineend,
-          var(--slds-g-spacing-4));
-    border-top-width:
-
-      var(--slds-c-card-footer-sizing-border,
-        var(--slds-g-sizing-border-1));
-    border-top-color:
-      var(--slds-c-card-footer-color-border,
-        var(--slds-g-color-border-base-1,
-          var(--slds-g-color-border-1)));
-
-    border-top-style: solid;
-    text-align: var(--slds-c-card-footer-text-align, center);
-    justify-content: center;
-    /* stylelint-enable */
-    font-size: var(--slds-c-card-footer-font-size,
-        var(--slds-g-font-scale-neg-2));
-  }
-
-  :host([data-render-mode="shadow"]) .slds-card__body:empty,:host([data-render-mode="shadow"]) 
-  .slds-card__footer:empty {
-    display: none;
-  }
-
-  /* Note: Refactor the below. Utility classes that should be removed once utility implementation is completed. */
-
-  :host([data-render-mode="shadow"]) .slds-media__figure {
-    flex-shrink: 0;
-    margin-inline-end: var(--slds-g-spacing-3);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-text-heading_small {
-    font-size: var(--slds-g-font-size-base);
-    line-height: var(--slds-g-font-lineheight-2);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-truncate {
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+:host([data-render-mode="shadow"]) [part='title'] span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:host([data-render-mode="shadow"]) [part='body'] {
+  /* stylelint-disable */
+  margin-block-start: var(--slds-c-card-body-spacing-blockstart);
+  margin-block-end: var(--slds-c-card-body-spacing-blockend);
+  padding-inline-start: var(--slds-c-card-body-spacing-inlinestart);
+  padding-inline-end: var(--slds-c-card-body-spacing-inlineend);
+  --slds-c-card-color-border: transparent;
+  --slds-c-card-shadow: none;
+}
+
+:host([data-render-mode="shadow"]) [part='footer'] {
+  padding-block-start: var(--slds-c-card-footer-spacing-blockstart, var(--slds-g-spacing-3));
+  padding-block-end: var(--slds-c-card-footer-spacing-blockend, var(--slds-g-spacing-3));
+  padding-inline-start: var(--slds-c-card-footer-spacing-inlinestart, var(--slds-g-spacing-4));
+  padding-inline-end: var(--slds-c-card-footer-spacing-inlineend, var(--slds-g-spacing-4));
+  border-top-width: var(--slds-c-card-footer-sizing-border, var(--slds-g-sizing-border-1));
+  border-top-color: var(
+    --slds-c-card-footer-color-border,
+    var(--slds-g-color-border-base-1, var(--slds-g-color-border-1))
+  );
+
+  border-top-style: solid;
+  text-align: var(--slds-c-card-footer-text-align, center);
+  justify-content: center;
+  /* stylelint-enable */
+  font-size: var(--slds-c-card-footer-font-size, var(--slds-g-font-scale-neg-2));
+}
+
+:host([data-render-mode="shadow"]) .slds-card__body:empty,:host([data-render-mode="shadow"]) 
+.slds-card__footer:empty {
+  display: none;
+}
+
+/* Note: Refactor the below. Utility classes that should be removed once utility implementation is completed. */
+
+:host([data-render-mode="shadow"]) .slds-media__figure {
+  flex-shrink: 0;
+  margin-inline-end: var(--slds-g-spacing-3);
+}
+
+:host([data-render-mode="shadow"]) .slds-text-heading_small {
+  font-size: var(--slds-g-font-size-base);
+  line-height: var(--slds-g-font-lineheight-2);
+}
+
+:host([data-render-mode="shadow"]) .slds-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/lightning/carousel/button-menu.slds.css

@@ -1,14 +1,13 @@
 
-
-  /**
+/**
    * Spacing amount between elements in button_icon versus standard button
    * are different so we target button_icon specifically. display: flex
    * comes from parent button styles.
    */
-  :host([data-render-mode="shadow"]) [part~='button-icon'] {
-    gap: var(--slds-g-spacing-1);
-  }
-  /**
+:host([data-render-mode="shadow"]) [part~='button-icon'] {
+  gap: var(--slds-g-spacing-1);
+}
+/**
    * Note: the remaining CSS in this file is required due to the hardcoded
    * button-icon in lightning-button-menu's template which isn't refactorable
    * at the time of this implementation. This CSS should be removed when the
@@ -17,139 +16,138 @@
    * Refactoring to component version is important, until then this code is
    * fragile because it is forked, changes to button-icon won't be reflected here.
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-more {
-    --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
-    --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
-    --slds-c-buttonicon-color-background-focus: var(--slds-g-color-surface-container-1);
-    --slds-c-buttonicon-color-background-active: var(--slds-g-color-surface-container-1);
-    --sds-c-button-spacing-inline: var(--slds-g-sizing-3);
-    --sds-c-button-spacing-block: var(--slds-g-sizing-3);
-    --sds-c-button-sizing-width: auto;
-  }
-  /**
+:host([data-render-mode="shadow"]) .slds-button_icon-more {
+  --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
+  --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
+  --slds-c-buttonicon-color-background-focus: var(--slds-g-color-surface-container-1);
+  --slds-c-buttonicon-color-background-active: var(--slds-g-color-surface-container-1);
+  --sds-c-button-spacing-inline: var(--slds-g-sizing-3);
+  --sds-c-button-spacing-block: var(--slds-g-sizing-3);
+  --sds-c-button-sizing-width: auto;
+}
+/**
    * SLDS sizing of the "more" icon is inconsistent and potentially broken.
    * Until fixed, we'll stick with a consistent size across all size variants.
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-more lightning-primitive-icon:last-of-type {
-    --slds-c-icon-sizing: var(--slds-g-sizing-3);
-  }
-  /**
+:host([data-render-mode="shadow"]) .slds-button_icon-more lightning-primitive-icon:last-of-type {
+  --slds-c-icon-sizing: var(--slds-g-sizing-3);
+}
+/**
    * Sizing hacks
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-xx-small { 
-    --slds-c-icon-sizing: var(--slds-g-sizing-3);
-    --sds-c-button-sizing-height: var(--slds-g-sizing-5);
-    --sds-c-button-sizing-width: var(--slds-g-sizing-5);
-  }
-  :host([data-render-mode="shadow"]) .slds-button_icon-x-small {
-    --slds-c-icon-sizing: var(--slds-g-sizing-4);
-    --sds-c-button-sizing-height: var(--slds-g-sizing-6);
-    --sds-c-button-sizing-width: var(--slds-g-sizing-6);
-  }
-  :host([data-render-mode="shadow"]) .slds-button_icon-small {
-    --sds-c-button-sizing-height: var(--slds-g-sizing-7);
-    --sds-c-button-sizing-width: var(--slds-g-sizing-7);
-  }
-  :host([data-render-mode="shadow"]) .slds-button_icon-large {
-    --slds-c-icon-sizing: var(--slds-g-sizing-7);
-    --sds-c-button-sizing-height: var(--slds-g-sizing-10);
-    --sds-c-button-sizing-width: var(--slds-g-sizing-10);
-  }
-  /**
+:host([data-render-mode="shadow"]) .slds-button_icon-xx-small {
+  --slds-c-icon-sizing: var(--slds-g-sizing-3);
+  --sds-c-button-sizing-height: var(--slds-g-sizing-5);
+  --sds-c-button-sizing-width: var(--slds-g-sizing-5);
+}
+:host([data-render-mode="shadow"]) .slds-button_icon-x-small {
+  --slds-c-icon-sizing: var(--slds-g-sizing-4);
+  --sds-c-button-sizing-height: var(--slds-g-sizing-6);
+  --sds-c-button-sizing-width: var(--slds-g-sizing-6);
+}
+:host([data-render-mode="shadow"]) .slds-button_icon-small {
+  --sds-c-button-sizing-height: var(--slds-g-sizing-7);
+  --sds-c-button-sizing-width: var(--slds-g-sizing-7);
+}
+:host([data-render-mode="shadow"]) .slds-button_icon-large {
+  --slds-c-icon-sizing: var(--slds-g-sizing-7);
+  --sds-c-button-sizing-height: var(--slds-g-sizing-10);
+  --sds-c-button-sizing-width: var(--slds-g-sizing-10);
+}
+/**
   * Note: Styling below for bare and bare-inverse sizes 
   * are not yet supported but should be used once 
   * the fixes are in. Additional styles would need to 
   * be added as well.
   */
-  :host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-x-small,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-x-small {
-    --slds-c-icon-sizing: var(--slds-g-sizing-3);
-  }
-  :host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-small,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-small {
-    --slds-c-icon-sizing: var(--slds-g-sizing-4);
-  }
-  :host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-large,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-large {
-    --slds-c-icon-sizing: var(--slds-g-sizing-7);
-  }
-  /**
+:host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-x-small,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-x-small {
+  --slds-c-icon-sizing: var(--slds-g-sizing-3);
+}
+:host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-small,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-small {
+  --slds-c-icon-sizing: var(--slds-g-sizing-4);
+}
+:host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-large,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-large {
+  --slds-c-icon-sizing: var(--slds-g-sizing-7);
+}
+/**
    * Variant Hacks - Container
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-container {
-    --slds-c-buttonicon-color-border: transparent;
-    --slds-c-buttonicon-color-border-hover: transparent;
-    --slds-c-buttonicon-color-border-focus: transparent;
+:host([data-render-mode="shadow"]) .slds-button_icon-container {
+  --slds-c-buttonicon-color-border: transparent;
+  --slds-c-buttonicon-color-border-hover: transparent;
+  --slds-c-buttonicon-color-border-focus: transparent;
 
-    /* Disabled */
-    --slds-c-buttonicon-color-border-disabled: transparent;
-  }
-  /**
+  /* Disabled */
+  --slds-c-buttonicon-color-border-disabled: transparent;
+}
+/**
    * Variant Hacks - Border Filled
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-border-filled {
-    --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
-    --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
-    --slds-c-buttonicon-color-background-focus: var(--slds-g-color-surface-container-1);
-    --slds-c-buttonicon-color-background-active: var(--slds-g-color-surface-container-1);
-  }
-  /**
+:host([data-render-mode="shadow"]) .slds-button_icon-border-filled {
+  --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
+  --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
+  --slds-c-buttonicon-color-background-focus: var(--slds-g-color-surface-container-1);
+  --slds-c-buttonicon-color-background-active: var(--slds-g-color-surface-container-1);
+}
+/**
    * Variant Hacks - Border Inverse
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-border-inverse {
-    /* Border */
-    --slds-c-buttonicon-color-border: var(--slds-g-color-brand-base-100);
-    --slds-c-buttonicon-color-border-hover: var(--slds-g-color-brand-base-100);
-    --slds-c-buttonicon-color-border-focus: var(--slds-g-color-brand-base-100);
-    --slds-c-buttonicon-color-border-active: var(--slds-g-color-brand-base-100);
+:host([data-render-mode="shadow"]) .slds-button_icon-border-inverse {
+  /* Border */
+  --slds-c-buttonicon-color-border: var(--slds-g-color-brand-base-100);
+  --slds-c-buttonicon-color-border-hover: var(--slds-g-color-brand-base-100);
+  --slds-c-buttonicon-color-border-focus: var(--slds-g-color-brand-base-100);
+  --slds-c-buttonicon-color-border-active: var(--slds-g-color-brand-base-100);
 
-    /* Shadow */
-    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--slds-g-color-brand-base-100);
+  /* Shadow */
+  --slds-c-buttonicon-shadow-focus: 0 0 3px var(--slds-g-color-brand-base-100);
 
-    /* Icon */
-    --slds-c-buttonicon-color-foreground: var(--slds-g-color-brand-base-100);
-    --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-brand-base-95);
-    --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-brand-base-95);
-    --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-brand-base-90);
-  }
-  :host([data-render-mode="shadow"]) .slds-button_icon-inverse {
-    /* Background */
-    --slds-c-buttonicon-color-background-active: transparent;
+  /* Icon */
+  --slds-c-buttonicon-color-foreground: var(--slds-g-color-brand-base-100);
+  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-brand-base-95);
+  --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-brand-base-95);
+  --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-brand-base-90);
+}
+:host([data-render-mode="shadow"]) .slds-button_icon-inverse {
+  /* Background */
+  --slds-c-buttonicon-color-background-active: transparent;
 
-    /* Border */
-    --slds-c-buttonicon-color-border: transparent;
-    --slds-c-buttonicon-color-border-hover: transparent;
-    --slds-c-buttonicon-color-border-focus: var(--slds-g-color-brand-base-100);
+  /* Border */
+  --slds-c-buttonicon-color-border: transparent;
+  --slds-c-buttonicon-color-border-hover: transparent;
+  --slds-c-buttonicon-color-border-focus: var(--slds-g-color-brand-base-100);
 
-    /* Spacing */
-    --slds-c-buttonicon-spacing-inline: 0;
-    --slds-c-buttonicon-spacing-block: 0;
+  /* Spacing */
+  --slds-c-buttonicon-spacing-inline: 0;
+  --slds-c-buttonicon-spacing-block: 0;
 
-    /* Shadow */
-    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--slds-g-color-brand-base-100);
+  /* Shadow */
+  --slds-c-buttonicon-shadow-focus: 0 0 3px var(--slds-g-color-brand-base-100);
 
-    /* Icon */
-    --slds-c-buttonicon-color-foreground: var(--slds-g-color-brand-base-100);
-    --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-brand-base-95);
-    --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-brand-base-95);
-    --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-brand-base-95);
+  /* Icon */
+  --slds-c-buttonicon-color-foreground: var(--slds-g-color-brand-base-100);
+  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-brand-base-95);
+  --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-brand-base-95);
+  --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-brand-base-95);
 
-    /* Disabled */
-    --slds-c-buttonicon-color-border-disabled: transparent;
-  }
-  /**
+  /* Disabled */
+  --slds-c-buttonicon-color-border-disabled: transparent;
+}
+/**
    * Variant Hacks - Bare
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-bare {
-    --slds-c-buttonicon-color-border: transparent;
-    --slds-c-buttonicon-color-border-hover: transparent;
-    --slds-c-buttonicon-color-border-focus: transparent;
-    --slds-c-buttonicon-color-border-active: transparent;
-    --slds-c-buttonicon-spacing-inline: 0;
-    --slds-c-buttonicon-spacing-block: 0;
-
-    /* Disabled */
-    --slds-c-buttonicon-color-border-disabled: transparent;
-  }
-  :host([data-render-mode="shadow"]) [part~='button-icon'][label] {
-    --sds-c-button-sizing-height: auto;
-    --sds-c-button-sizing-width: auto;
-  }
+:host([data-render-mode="shadow"]) .slds-button_icon-bare {
+  --slds-c-buttonicon-color-border: transparent;
+  --slds-c-buttonicon-color-border-hover: transparent;
+  --slds-c-buttonicon-color-border-focus: transparent;
+  --slds-c-buttonicon-color-border-active: transparent;
+  --slds-c-buttonicon-spacing-inline: 0;
+  --slds-c-buttonicon-spacing-block: 0;
 
+  /* Disabled */
+  --slds-c-buttonicon-color-border-disabled: transparent;
+}
+:host([data-render-mode="shadow"]) [part~='button-icon'][label] {
+  --sds-c-button-sizing-height: auto;
+  --sds-c-button-sizing-width: auto;
+}