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

package/src/lightning/button/button.slds.css

@@ -187,14 +187,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-icon-sizing: 0.875rem;
   --slds-c-icon-color-foreground: currentcolor;
 
-
   --sds-c-button-font-lineheight: var(
     --slds-c-button-neutral-font-lineheight,
     var(--slds-s-button-font-lineheight, 1.875rem)
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4)) ;
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -214,7 +213,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     * In all other variants, it is ok to use the previous state as a fallback value.
     */
 
-
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
     --slds-c-button-radius-border-startstart,
@@ -257,7 +255,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-button-neutral-color-background-hover,
     var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
+  --sds-c-button-color-background-focus: var(
+    --slds-c-button-neutral-color-background-focus,
+    var(--slds-g-color-surface-container-2)
+  );
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
     var(--slds-g-color-surface-container-2)
@@ -280,8 +281,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
-  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(
+    --slds-c-button-neutral-text-color-hover,
+    var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))
+  );
+  --sds-c-button-text-color-focus: var(
+    --slds-c-button-neutral-text-color-focus,
+    var(--slds-g-color-accent-3)
+  );
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
     var(--slds-g-color-accent-3)
@@ -293,17 +300,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 /* Overriding primitiveBaseButton */
 :host([data-render-mode="shadow"]) [part~='button']:disabled {
-   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
-   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+  --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 
-   /** 
+  /** 
     * Needed to override 
     * `pointer-event: none` coming from sds
     * that prevent tooltip from showing
    */
-   pointer-events: auto;
-   cursor: default;
+  pointer-events: auto;
+  cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:
@@ -414,9 +421,18 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-error-1);
-  --slds-c-button-neutral-color-border-hover: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-focus: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --slds-c-button-neutral-color-border-hover: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-focus: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-active: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
   --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
@@ -436,7 +452,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /**
   * text variant is for button-stateful
 */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button'] {
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -483,7 +499,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"]) [part~='end'] {
   display: inline-flex;
   padding-inline-start: 0;
-
 }
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.

package/src/lightning/buttonGroup/__docs__/buttonGroup.md

@@ -19,11 +19,11 @@ examples:
 
 A `lightning-button-group` component represents a set of buttons that can be displayed together to create a navigational bar. The body of the component can contain one or more of the following components:
 
--   `lightning-button`
--   `lightning-button-icon`
--   `lightning-button-icon-stateful`
--   `lightning-button-menu`
--   `lightning-button-stateful`.
+- `lightning-button`
+- `lightning-button-icon`
+- `lightning-button-icon-stateful`
+- `lightning-button-menu`
+- `lightning-button-stateful`.
 
 If navigational tabs are needed, use `lightning-tabset` instead of `lightning-button-group`.
 

package/src/lightning/buttonGroup/button-group.slds.css

@@ -1,12 +1,11 @@
 
-
 :host([data-render-mode="shadow"]) [part='button-group'] {
   display: inline-flex;
 
   /**
     * Kill border radius, rebuild it below depending on position.
     */
-    --slds-c-button-radius-border: 0;
+  --slds-c-button-radius-border: 0;
 }
 
 /* Nudge buttons over to remove double border effect */

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

@@ -1,2 +1,2 @@
 @import 'lightning/sldsCommon';
-@import './button-group.slds.css';
+@import './button-group.slds.css';

package/src/lightning/buttonIcon/__docs__/buttonIcon.md

@@ -69,13 +69,13 @@ is available in your org.
 
 Use the `variant` attribute with one of these values to apply styling.
 
--   `bare` displays an icon without a container or border
--   `bare-inverse` displays an icon in white color without a container or border, useful for dark backgrounds
--   `border` is the default variant, an icon in a transparent container with a border
--   `border-filled` displays an icon in a filled container with a border
--   `border-inverse` displays an icon in a transparent container with a border, useful for dark backgrounds
--   `brand` displays an icon in white color in a blue container with a blue border
--   `container` displays an icon in a transparent container without a border
+- `bare` displays an icon without a container or border
+- `bare-inverse` displays an icon in white color without a container or border, useful for dark backgrounds
+- `border` is the default variant, an icon in a transparent container with a border
+- `border-filled` displays an icon in a filled container with a border
+- `border-inverse` displays an icon in a transparent container with a border, useful for dark backgrounds
+- `brand` displays an icon in white color in a blue container with a blue border
+- `container` displays an icon in a transparent container without a border
 
 For the `bare` and `bare-inverse` variants, the `size` class applies to the icon itself. For all other variants, the `size` class applies to the button.
 
@@ -87,17 +87,17 @@ Adjust the button and icon sizes using the `size` attribute with one of these va
 
 For `bare` and `bare-inverse` variants:
 
--   `medium` is the default size, which creates a 14px by 14px icon
--   `small` creates a 12px by 12px icon
--   `x-small` creates a 8px by 8px icon
--   `large` creates a 24px by 24px icon
+- `medium` is the default size, which creates a 14px by 14px icon
+- `small` creates a 12px by 12px icon
+- `x-small` creates a 8px by 8px icon
+- `large` creates a 24px by 24px icon
 
 For other variants:
 
--   `medium` is the default size, which creates a 32px by 32px button enclosing a 14px by 14px icon.
--   `small` creates a 24px by 24px button enclosing a 14px by 14px icon
--   `x-small` creates a 20px by 20px button enclosing a 12px by 12px icon
--   `xx-small` creates a 16px by 16px button enclosing a 8px by 8px icon
+- `medium` is the default size, which creates a 32px by 32px button enclosing a 14px by 14px icon.
+- `small` creates a 24px by 24px button enclosing a 14px by 14px icon
+- `x-small` creates a 20px by 20px button enclosing a 12px by 12px icon
+- `xx-small` creates a 16px by 16px button enclosing a 8px by 8px icon
 
 ##### Customize Component Styling
 
@@ -130,12 +130,12 @@ To apply custom styling, use the `:host` selector or define a custom class using
 ></lightning-button-icon>
 ```
 
-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. 
+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 [Buttons Styling Hooks Overview](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) for a list of CSS custom properties. for documentation on component-specific hooks for this component. `lightning-button-icon` contains the same customizable elements as `lightning-button`, which supports `--slds-c-button-*` custom properties. Custom properties for button icons work only with particular `lightning-button-icon` variants.
 
-| CSS Custom Property               | `lightning-button-icon` Variants                             |
-| --------------------------------- | ------------------------------------------------------------ |
+| CSS Custom Property                | `lightning-button-icon` Variants                             |
+| ---------------------------------- | ------------------------------------------------------------ |
 | `--slds-c-button-color-background` | `border` (default), `bare`, `bare-inverse`, and `container`  |
 | `--slds-c-button-color-border`     | `bare`, `bare-inverse`, and `container`                      |
 | `--slds-c-button-text-color`       | N/A                                                          |
@@ -160,8 +160,8 @@ Use the `alternative-text` attribute to describe the icon. The description shoul
 
 The description you provide to `alternative-text` is available to users in two ways.
 
--   As hover text when you hover over the button
--   As hidden text for assistive technologies
+- As hover text when you hover over the button
+- As hidden text for assistive technologies
 
 To override the hover text provided by `alternative-text`, use the `title` attribute, which corresponds to the native browser tooltip.
 The description you provide to `title` displays when you hover over the button. To support touch-only devices, keyboard navigation, and assistive technologies, use `title` together with `label` or `alternative-text`.

package/src/lightning/buttonIcon/button-icon.slds.css

@@ -190,14 +190,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-icon-sizing: 0.875rem;
   --slds-c-icon-color-foreground: currentcolor;
 
-
   --sds-c-button-font-lineheight: var(
     --slds-c-button-neutral-font-lineheight,
     var(--slds-s-button-font-lineheight, 1.875rem)
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4)) ;
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -217,7 +216,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     * In all other variants, it is ok to use the previous state as a fallback value.
     */
 
-
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
     --slds-c-button-radius-border-startstart,
@@ -260,7 +258,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-button-neutral-color-background-hover,
     var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
+  --sds-c-button-color-background-focus: var(
+    --slds-c-button-neutral-color-background-focus,
+    var(--slds-g-color-surface-container-2)
+  );
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
     var(--slds-g-color-surface-container-2)
@@ -283,8 +284,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
-  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(
+    --slds-c-button-neutral-text-color-hover,
+    var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))
+  );
+  --sds-c-button-text-color-focus: var(
+    --slds-c-button-neutral-text-color-focus,
+    var(--slds-g-color-accent-3)
+  );
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
     var(--slds-g-color-accent-3)
@@ -296,17 +303,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 /* Overriding primitiveBaseButton */
 :host([data-render-mode="shadow"]) [part~='button']:disabled {
-   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
-   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+  --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 
-   /** 
+  /** 
     * Needed to override 
     * `pointer-event: none` coming from sds
     * that prevent tooltip from showing
    */
-   pointer-events: auto;
-   cursor: default;
+  pointer-events: auto;
+  cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:
@@ -417,9 +424,18 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-error-1);
-  --slds-c-button-neutral-color-border-hover: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-focus: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --slds-c-button-neutral-color-border-hover: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-focus: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-active: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
   --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
@@ -439,7 +455,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /**
   * text variant is for button-stateful
 */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button'] {
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -486,7 +502,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"]) [part~='end'] {
   display: inline-flex;
   padding-inline-start: 0;
-
 }
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
@@ -641,7 +656,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Icon */
   --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
-  --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
+  --slds-c-buttonicon-color-foreground-hover: color-mix(
+    in oklab,
+    var(--slds-g-color-on-surface-inverse-1),
+    transparent 25%
+  );
   --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
 
@@ -736,17 +755,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   * utility package solution.
   */
 :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;
-  }
+  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;
+}
 :host([data-render-mode="shadow"][size='large']) [part~='button-icon'],:host([data-render-mode="shadow"][size='medium']) [part~='button-icon'] {
-    height: var(--slds-c-buttonicon-sizing-height, var(--slds-g-sizing-9));
-  }
+  height: var(--slds-c-buttonicon-sizing-height, var(--slds-g-sizing-9));
+}

package/src/lightning/buttonIconStateful/__docs__/buttonIconStateful.md

@@ -71,18 +71,18 @@ SLDS resources become available only when the new release is available in your o
 
 Use the `variant` attribute with one of these values to apply styling.
 
--   `border` is the default variant, an icon in a transparent container with a border
--   `border-filled` displays an icon in a filled container with a border
--   `border-inverse` displays an icon in a transparent container with a border, useful for dark backgrounds
+- `border` is the default variant, an icon in a transparent container with a border
+- `border-filled` displays an icon in a filled container with a border
+- `border-inverse` displays an icon in a transparent container with a border, useful for dark backgrounds
 
 ##### Sizes
 
 Adjust the button and icon sizes using the `size` attribute with one of these values.
 
--   `medium` is the default size, which creates a 32px by 32px button enclosing a 14px by 14px icon.
--   `small` creates a 24px by 24px button enclosing a 14px by 14px icon
--   `x-small` creates a 20px by 20px button enclosing a 12px by 12px icon
--   `xx-small` creates a 16px by 16px button enclosing a 8px by 8px icon
+- `medium` is the default size, which creates a 32px by 32px button enclosing a 14px by 14px icon.
+- `small` creates a 24px by 24px button enclosing a 14px by 14px icon
+- `x-small` creates a 20px by 20px button enclosing a 12px by 12px icon
+- `xx-small` creates a 16px by 16px button enclosing a 8px by 8px icon
 
 ##### Customize Component Styling
 
@@ -106,14 +106,14 @@ This example adds a margin to the left of the second button using an SLDS class.
 ></lightning-button-icon-stateful>
 ```
 
-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. 
+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 [Buttons: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component. `lightning-button-icon-stateful` contains the same customizable elements as `lightning-button`, which supports `--slds-c-button-*` custom properties.
 
 Custom properties for stateful button icons work only with particular `lightning-button-icon-stateful` variants.
 
-| CSS Custom Property               | `lightning-button-icon-stateful` Variants |
-| --------------------------------- | ----------------------------------------- |
+| CSS Custom Property                | `lightning-button-icon-stateful` Variants |
+| ---------------------------------- | ----------------------------------------- |
 | `--slds-c-button-color-background` | `border` (default) and `border-inverse`   |
 | `--slds-c-button-color-border`     | N/A                                       |
 | `--slds-c-button-text-color`       | N/A                                       |
@@ -140,8 +140,8 @@ The description should indicate what happens when you click the button, for exam
 
 The text is available to users in two ways.
 
--   On the tooltip when you hover over the button
--   As text for assistive technologies
+- On the tooltip when you hover over the button
+- As text for assistive technologies
 
 Buttons that only show an icon to represent do not have an accessible name. For `lightning-button-icon-stateful`, provide the accessible name using the `aria-label` attribute.
 

package/src/lightning/buttonIconStateful/button-icon-stateful.slds.css

@@ -1,43 +1,36 @@
 
+/* :host::part(button-icon-stateful), */
+:host([data-render-mode="shadow"]) [part='button-icon-stateful'] {
+  display: inline-flex;
+  height: 100%;
+}
+/* Override default button-icon styles */
+:host([data-render-mode="shadow"]) [part~='button-icon'] {
+  --slds-c-button-neutral-color-border: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-2);
+}
+/* Selected + Variants */
+:host([data-render-mode="shadow"][selected]) [part~='button-icon'] {
+  --slds-c-buttonicon-color-foreground: var(--slds-g-color-on-accent-1);
+  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-on-accent-1);
+  --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-on-accent-1);
+  --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-on-accent-1);
 
-  /* :host::part(button-icon-stateful), */
-  :host([data-render-mode="shadow"]) [part='button-icon-stateful'] {
-    display: inline-flex;
-    height: 100%;
-  }
-  /* Override default button-icon styles */
-  :host([data-render-mode="shadow"]) [part~='button-icon'] {
-    --slds-c-button-neutral-color-border: var(--slds-g-color-border-2);
-    --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-2);
-    --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-2);
-    --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-2);
-  }
-  /* Selected + Variants */
-  :host([data-render-mode="shadow"][selected]) [part~='button-icon'] {
-    --slds-c-buttonicon-color-foreground: var(--slds-g-color-on-accent-1);
-    --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-on-accent-1);
-    --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-on-accent-1);
-    --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-on-accent-1);
+  --slds-c-button-neutral-color-background: var(--slds-g-color-accent-container-1);
+  --slds-c-button-neutral-color-background-hover: var(--slds-g-color-accent-container-3);
+  --slds-c-button-neutral-color-background-focus: var(--slds-g-color-accent-container-3);
+  --slds-c-button-neutral-color-background-active: var(--slds-g-color-accent-container-3);
 
-    --slds-c-button-neutral-color-background: var(--slds-g-color-accent-container-1);
-    --slds-c-button-neutral-color-background-hover: 
-      var(--slds-g-color-accent-container-3);
-    --slds-c-button-neutral-color-background-focus: var(--slds-g-color-accent-container-3);
-    --slds-c-button-neutral-color-background-active:
-      var(--slds-g-color-accent-container-3);
-
-    --slds-c-button-neutral-color-border: 
-      var(--slds-g-color-border-accent-1);
-    --slds-c-button-neutral-color-border-hover: 
-      var(--slds-g-color-border-accent-3);
-    --slds-c-button-neutral-color-border-focus:
-      var(--slds-g-color-border-accent-3);
-    --slds-c-button-neutral-color-border-active:
-      var(--slds-g-color-border-accent-3);
-  }
-  /* Selected + Disabled + Variants */
-  :host([data-render-mode="shadow"][selected][disabled]) [part~='button-icon'] {
-    --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-2);
-    --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-    --slds-c-icon-color-foreground: var(--slds-g-color-on-disabled-2);
-  }
+  --slds-c-button-neutral-color-border: var(--slds-g-color-border-accent-1);
+  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-accent-3);
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-accent-3);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-accent-3);
+}
+/* Selected + Disabled + Variants */
+:host([data-render-mode="shadow"][selected][disabled]) [part~='button-icon'] {
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-2);
+  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+  --slds-c-icon-color-foreground: var(--slds-g-color-on-disabled-2);
+}