lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/buttonMenu/{dropdown.slds.css → button-menu.slds.css}

@@ -101,51 +101,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   pointer-events: none;
 }
 
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-:host([data-render-mode="shadow"]) [part~='overlay'] {
-  background-color: var(
-    --sds-c-overlay-color-background,
-    var(--sds-s-popup-color-background, var(--sds-g-color-neutral-base-1))
-  );
-  color: var(
-    --sds-c-overlay-text-color,
-    var(--sds-s-popup-text-color, var(--sds-g-color-neutral-base-contrast-4))
-  );
-  border-radius: var(
-    --sds-c-overlay-radius-border,
-    var(--sds-s-popup-radius-border, var(--sds-g-radius-border-2, 0.25rem))
-  );
-  border-width: var(
-    --sds-c-overlay-sizing-border,
-    var(--sds-s-popup-sizing-border, var(--sds-g-sizing-border-1, 1px))
-  );
-  border-color: var(
-    --sds-c-overlay-color-border,
-    var(--sds-s-popup-color-border, var(--sds-g-color-border-base-1, #c9c9c9))
-  );
-  box-shadow: var(--sds-c-overlay-shadow, var(--sds-s-popup-shadow, var(--sds-g-shadow-1, 0 0 2px 0 #18181814, 0 2px 4px 1px #18181828)));
-
-  /* TODO: consider semantics of the shared hook for overlays/popups. */
-  padding-left: var(
-    --sds-c-overlay-spacing-inline-start,
-    var(--sds-c-overlay-spacing-inline, var(--sds-s-popup-spacing-inline, var(--sds-g-spacing-3, 0.75rem)))
-  );
-  padding-right: var(
-    --sds-c-overlay-spacing-inline-end,
-    var(--sds-c-overlay-spacing-inline, var(--sds-s-popup-spacing-inline, var(--sds-g-spacing-3, 0.75rem)))
-  );
-  padding-top: var(
-    --sds-c-overlay-spacing-block-start,
-    var(--sds-c-overlay-spacing-block, var(--sds-s-popup-spacing-block, var(--sds-g-spacing-3, 0.75rem)))
-  );
-  padding-bottom: var(
-    --sds-c-overlay-spacing-block-end,
-    var(--sds-c-overlay-spacing-block, var(--sds-s-popup-spacing-block, var(--sds-g-spacing-3, 0.75rem)))
-  );
-}
-
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
@@ -197,39 +152,39 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"][size~='xxx-small']) {
-    --slds-c-icon-sizing: 0.5rem;
+    --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
   }
 
   :host([data-render-mode="shadow"][size~='xx-small']) {
-    --slds-c-icon-sizing: 0.875rem;
+    --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
   }
 
   :host([data-render-mode="shadow"][size~='x-small']) {
-    --slds-c-icon-sizing: 1rem;
+    --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
   }
 
   :host([data-render-mode="shadow"][size~='small']) {
-    --slds-c-icon-sizing: 1.5rem;
+    --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
   :host([data-render-mode="shadow"][size~='large']) {
-    --slds-c-icon-sizing: 3rem;
+    --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
   :host([data-render-mode="shadow"][variant~='warning']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-4);
+    --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
   }
 
   :host([data-render-mode="shadow"][variant~='success']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-contrast-1);
+    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
   }
 
   :host([data-render-mode="shadow"][variant~='error']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-contrast-1);
+    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
   }
 
   :host([data-render-mode="shadow"][variant~='light']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-contrast-1);
+    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
   :host([data-render-mode="shadow"]) [part~='boundary'] {
@@ -263,15 +218,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   :host([data-render-mode="shadow"]) [part~='icon'] {
-    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-1));
-    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, 2rem));
-    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, 2rem));
+    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
+    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
+    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
   }
 
   :host([data-render-mode="shadow"][icon-name*='action']) {
-    --slds-c-icon-spacing-block: 0.5rem;
-    --slds-c-icon-spacing-inline: 0.5rem;
-    --slds-c-icon-radius-border: 50%;
+    --slds-c-icon-spacing-block: var(--sds-g-sizing-3, 0.5rem);
+    --slds-c-icon-spacing-inline: var(--sds-g-sizing-3, 0.5rem);
+    --slds-c-icon-radius-border: calc(var(--sds-g-radius-border-circle, 100%) / 2);
   }
 }
 
@@ -300,12 +255,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /*! @css-var-fallback fill */
   --slds-c-icon-color-foreground: var(
     --slds-c-icon-color-foreground-default,
-    var(--sds-c-icon-color-foreground-default, #706e6b)
+    var(--sds-c-icon-color-foreground-default, var(
+      --sds-g-color-neutral-base-50, #747474))
   );
 }
 
 :host([data-render-mode="shadow"]) .slds-icon-text-default.slds-is-disabled {
-  fill: #dddbda;
+  fill: var(--sds-g-color-neutral-base-80, #c9c9c9);
 }
 
 /**
@@ -344,21 +300,413 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   background-color: currentColor;
 }
 
+:host([data-render-mode="shadow"]) .slds-input__icon {
+  --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
+  
+  position: absolute;
+  top: 50%;
+  margin-block-start: -0.4375rem;
+  line-height: var(--sds-g-font-lineheight-1, 1);
+  border: 0;
+  z-index: 2;
+}
+
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) {
-    display: inline-flex;
+  /**
+   * LBC default is the 'neutral' variant.
+   *
+   * We retain the 'neutral' variant in the hook names for interoperability
+   * with SLDS light DOM blueprints which do explicitly define a 'neutral'
+   * variant which is not the default.
+   *
+   * See 'base' variant below.
+   *
+   */
+
+  :host([data-render-mode="shadow"]) [part~='button'] {
+    /* Element spacing, display flex set by SDS button */
+    gap: var(--sds-g-spacing-2, 0.5rem);
+
+    /* slds-icon mapping */
+    --slds-c-icon-sizing-border: 0;
+    --slds-c-icon-sizing: 0.875rem;
+    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentColor);
+
+    --sds-c-button-line-height: 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(--sds-g-spacing-4, 1rem))
+    );
+    --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
+
+    /**
+     * A note about fallbacks on the default variant:
+     *
+     * We cannot use --sds-c-button-* as fallbacks because the sds-button's state
+     * hooks are tied to a selector with higher specificity. In the default variant,
+     * attempting to use the previous state's hook as a fallback will fail because
+     * it picks up on sds-button's state hooks instead and creates an infinite loop
+     * which ultimately breaks styling.
+     *
+     * This is another use-case for removing the opinion of state selectors in SDS.
+     *
+     * So in the default variant below, you'll see many repeated fallback values.
+     *
+     * 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-neutral-radius-border-startstart,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))
+      )
+    );
+    --sds-c-button-radius-border-endstart: var(
+      --slds-c-button-radius-border-endstart,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-endstart, var(--slds-s-button-radius-border))
+      )
+    );
+    --sds-c-button-radius-border-startend: var(
+      --slds-c-button-radius-border-startend,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-startend, var(--slds-s-button-radius-border))
+      )
+    );
+    --sds-c-button-radius-border-endend: var(
+      --slds-c-button-radius-border-endend,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-endend, var(--slds-s-button-radius-border))
+      )
+    );
+
+    /* Background color */
+    --sds-c-button-color-background: var(
+      --slds-c-button-neutral-color-background,
+      var(--sds-g-color-neutral-base-100, #ffffff)
+    );
+    --sds-c-button-color-background-hover: var(
+      --slds-c-button-neutral-color-background-hover,
+      var(--sds-g-color-neutral-base-95, #f3f3f3)
+    );
+    --sds-c-button-color-background-focus: var(
+      --slds-c-button-neutral-color-background-focus,
+      var(--sds-c-button-color-background-hover)
+    );
+    --sds-c-button-color-background-active: var(
+      --slds-c-button-neutral-color-background-active,
+      var(--sds-g-color-neutral-base-95, #f3f3f3)
+    );
+
+    /* Border color */
+    --sds-c-button-color-border: var(
+      --slds-c-button-neutral-color-border,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+    --sds-c-button-color-border-hover: var(
+      --slds-c-button-neutral-color-border-hover,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+    --sds-c-button-color-border-focus: var(
+      --slds-c-button-neutral-color-border-focus,
+      var(--sds-c-button-color-border-hover)
+    );
+    --sds-c-button-color-border-active: var(
+      --slds-c-button-neutral-color-border-active,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+      );
+
+    /* Text color */
+    --sds-c-button-text-color: var(
+      --slds-c-button-neutral-text-color,
+      var(--sds-g-color-brand-base-50, #0176d3)
+    );
+    --sds-c-button-text-color-hover: var(
+      --slds-c-button-neutral-text-color-hover,
+      var(--sds-g-color-brand-base-30, #014486)
+    );
+    --sds-c-button-text-color-focus: var(
+      --slds-c-button-neutral-text-color-focus,
+      var(--slds-c-button-neutral-text-color-hover)
+
+    );
+    --sds-c-button-text-color-active: var(
+      --slds-c-button-neutral-text-color-active,
+      var(--sds-g-color-brand-base-30, #014486)
+    );
+
+    /* Shadow */
+    --sds-c-button-shadow: var(--slds-c-button-neutral-shadow);
+    --sds-c-button-shadow-focus: var(--slds-c-button-neutral-shadow-focus);
+
+    /* Disabled */
+    --sds-c-button-color-background-disabled: var(
+      --slds-c-button-neutral-color-background-disabled,
+      var(--sds-g-color-neutral-base-100, #ffffff)
+    );
+    --sds-c-button-color-border-disabled: var(
+      --slds-c-button-neutral-color-border-disabled,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+    --sds-c-button-text-color-disabled: var(
+      --slds-c-button-neutral-text-color-disabled,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+  }
+
+  :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
+    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
+    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
+    --slds-c-button-neutral-color-background: var(
+      --slds-c-button-brand-color-background,
+      var(--sds-g-color-brand-base-50, #0176d3)
+    );
+
+    --slds-c-button-neutral-color-border: var(
+      --slds-c-button-brand-color-border,
+      var(--sds-g-color-brand-base-50, #0176d3)
+    );
+
+    --slds-c-button-neutral-color-border-hover: var(
+      --slds-c-button-brand-color-border-hover,
+      var(--sds-g-color-brand-base-40, #0b5cab)
+    );
+    --slds-c-button-neutral-color-border-focus: var(
+      --slds-c-button-brand-color-border-focus,
+      var(--slds-c-button-brand-color-border-hover)
+    );
+    --slds-c-button-neutral-color-border-active: var(
+      --slds-c-button-brand-color-border-active,
+      var(--slds-c-button-brand-color-background-active)
+    );
+
+    --slds-c-button-neutral-text-color: var(
+      --slds-c-button-brand-text-color,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+
+    --slds-c-button-neutral-color-background-hover: var(
+      --slds-c-button-brand-color-background-hover,
+      var(--sds-g-color-brand-base-30, #014486)
+    );
+    --slds-c-button-neutral-color-background-focus: var(
+      --slds-c-button-brand-color-background-focus,
+      var(--sds-g-color-brand-base-30, #014486)
+    );
+    --slds-c-button-neutral-color-background-active: var(
+      --slds-c-button-brand-color-background-active,
+      var(--sds-g-color-brand-base-30, #014486)
+    );
+    --slds-c-button-neutral-text-color-hover: var(
+      --slds-c-button-brand-text-color-hover,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-button-neutral-text-color-active: var(
+      --slds-c-button-brand-text-color-active,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-button-neutral-text-color-focus: var(
+      --slds-c-button-brand-text-color-focus,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-button-neutral-color-background-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-neutral-color-background-disabled);
+    --slds-c-button-neutral-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  :host([data-render-mode="shadow"][variant='brand-outline']) [part~='button'] {
+    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
+    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
+    --slds-c-button-neutral-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
+    --slds-c-button-neutral-color-border: var(--sds-g-color-brand-base-50, #0176d3);
+    --slds-c-button-neutral-text-color: var(--sds-g-color-brand-base-40, #0b5cab);
+    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-brand-base-50, #0176d3);
+    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-background-active: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-brand-base-30, #014486);
+    --slds-c-button-neutral-text-color-focus: var(--sds-g-color-brand-base-30, #014486);
+    --slds-c-button-neutral-text-color-active: var(--sds-g-color-brand-base-30, #014486);
+    --slds-c-button-neutral-color-border-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
+  }
+
+  :host([data-render-mode="shadow"][variant='inverse']) [part~='button'] {
+    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
+    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
+    --slds-c-button-neutral-color-background: transparent;
+    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-background-active: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-border: var(--sds-g-color-brand-base-100, #ffffff);
+    --slds-c-button-neutral-text-color: var(--sds-g-color-brand-base-100, #ffffff);
+    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-brand-base-50, #0176d3);
+    --slds-c-button-neutral-text-color-active: var(--sds-g-color-brand-base-50, #0176d3);
+    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-brand-base-100, #ffffff);
+    --slds-c-button-neutral-color-border-disabled: var(--sds-g-color-neutral-base-60, #939393);
+    --slds-c-button-neutral-color-background-disabled: transparent;
+  }
+
+  :host([data-render-mode="shadow"][variant='destructive']) [part~='button'] {
+    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
+    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
+    --slds-c-button-neutral-color-background: var(--sds-g-color-error-base-40, #ba0517);
+    --slds-c-button-neutral-color-border: var(--sds-g-color-error-base-40, #ba0517);
+    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-error-base-40, #ba0517);
+    --slds-c-button-neutral-text-color: var(--sds-g-color-error-base-100, #ffffff);
+    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-error-base-30, #8e030f);
+    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-error-base-30, #8e030f);
+    --slds-c-button-neutral-color-background-active: var(--sds-g-color-error-base-30, #8e030f);
+    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-error-base-100, #ffffff);
+    --slds-c-button-neutral-text-color-focus: var(--sds-g-color-error-base-100, #ffffff);
+    --slds-c-button-neutral-text-color-active: var(--sds-g-color-error-base-100, #ffffff);
+    --slds-c-button-neutral-color-background-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-neutral-color-background-disabled);
+    --slds-c-button-neutral-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  :host([data-render-mode="shadow"][variant='success']) [part~='button'] {
+    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
+    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
+    --slds-c-button-neutral-color-background: var(--sds-g-color-success-base-70, #45c65a);
+    --slds-c-button-neutral-color-border: var(--sds-g-color-success-base-80, #91db8b);
+    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-success-base-50, #2e844a);
+    --slds-c-button-neutral-color-border-active: var(--sds-g-color-success-base-50, #2e844a);
+    --slds-c-button-neutral-text-color: var(--sds-g-color-neutral-base-10, #181818);
+    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-success-base-50, #2e844a);
+    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-success-base-50, #2e844a);
+    --slds-c-button-neutral-color-background-active: var(--sds-g-color-success-base-50, #2e844a);
+    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-success-base-100, #ffffff);
+    --slds-c-button-neutral-text-color-focus: var(--sds-g-color-success-base-100, #ffffff);
+    --slds-c-button-neutral-text-color-active: var(--sds-g-color-success-base-100, #ffffff);
+    --slds-c-button-neutral-color-background-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-neutral-color-background-disabled);
+    --slds-c-button-neutral-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  :host([data-render-mode="shadow"][variant='destructive-text']) [part~='button'] {
+    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
+    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
+    --slds-c-button-neutral-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
+    --slds-c-button-neutral-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    --slds-c-button-neutral-text-color: var(--sds-g-color-error-base-50, #ea001e);
+    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-color-background-active: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-error-base-40, #ba0517);
+    --slds-c-button-neutral-text-color-focus: var(--sds-g-color-error-base-40, #ba0517);
+    --slds-c-button-neutral-text-color-active: var(--sds-g-color-error-base-40, #ba0517);
+    --slds-c-button-neutral-color-border-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
   }
 
   /**
-   * part - button-icon
+   * 'base' variant is not the default in LBC. It is the default in the light
+   * DOM version of SLDS.
    *
-   * Default styling is "border" variant
+   * So even though this is a non-default variant in this context, the hooks
+   * for this variant are written as the default for interoperability with
+   * SLDS light DOM.
+   *
+   * E.g. --slds-c-button-color-background
    */
+  :host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button'] {
+    --slds-c-button-neutral-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-button-neutral-text-color: var(--sds-g-color-brand-base-40, #0b5cab);
+    --slds-c-button-neutral-color-border: transparent;
+    --slds-c-button-neutral-color-border-hover: transparent;
+    --slds-c-button-neutral-color-border-focus: transparent;
+    --slds-c-button-neutral-color-border-active: var(--sds-g-color-neutral-base-30, #444444);
+    --slds-c-button-neutral-color-border-disabled: transparent;
+    --slds-c-button-neutral-color-background-hover: transparent;
+    --slds-c-button-neutral-color-background-active: transparent;
+  }
+
+  :host([data-render-mode="shadow"][stretch]) [part~='button'] {
+    --sds-c-button-sizing-width: 100%;
 
-  /* :host::part('button-icon'), */
+    justify-content: center;
+  }
+
+  /**
+   * Center button on all variants except 'base', and 'text'
+   *
+   * This addresses the issue of customers relying on preexisting x-axis centering
+   * when they arbitrarily change the width of the button without the stretch variant.
+   *
+   * Ref
+   * - https://github.com/salesforce-ux/design-system-internal/pull/4344
+   * - https://github.com/salesforce-ux/design-system-internal/pull/4949
+   */
+  :host([data-render-mode="shadow"][variant='brand']) [part~='button'],:host([data-render-mode="shadow"][variant='brand-outline']) [part~='button'],:host([data-render-mode="shadow"][variant='inverse']) [part~='button'],:host([data-render-mode="shadow"][variant='success']) [part~='button'],:host([data-render-mode="shadow"][variant='destructive']) [part~='button'],:host([data-render-mode="shadow"][variant='destructive-text']) [part~='button'] {
+    justify-content: center;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='start'] {
+    display: inline-flex;
+    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+  }
+
+  :host([data-render-mode="shadow"]) [part~='end'] {
+    display: inline-flex;
+    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+  }
+}
+
+/**
+ * A temporarily baked-in utility class until SLDS gets a proper utility package.
+ *
+ * This is a hybrid patch between synthetic and native shadow. The ideal final
+ * outcome is the removal of this class and replacing the class with the SLDS
+ * 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;
+}
+
+:host([data-render-mode="shadow"]) .slds-button_reset {
+  font-size: inherit;
+  color: inherit;
+  line-height: inherit;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  text-align: inherit;
+}
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) [part~='button-icon'] {
+    display: inline-flex;
+  }
+
+  /**
+      * part - button-icon
+      *
+      * Default styling is "border" variant
+      */
   :host([data-render-mode="shadow"]) [part~='button-icon'] {
     /* slds-icon mapping */
     --slds-c-icon-sizing-border: 0;
@@ -368,43 +716,66 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       var(--sds-g-color-neutral-base-50, #747474)
     );
 
-    /* sds-button mapping - note: should be slds-button, requires refactoring */
-    --sds-c-button-color-background: var(--slds-c-buttonicon-color-background);
-    --sds-c-button-color-background-hover: var(--slds-c-buttonicon-color-background-hover);
-    --sds-c-button-color-background-focus: var(--slds-c-buttonicon-color-background-focus);
-    --sds-c-button-color-background-active: var(--slds-c-buttonicon-color-background-active);
-    --sds-c-button-spacing-inline: var(
+    /* Text */
+    --slds-c-button-neutral-font-lineheight: var(
+      --slds-c-buttonicon-neutral-font-lineheight,
+      var(--sds-g-font-lineheight-1, 1)
+    );
+
+    /* Background */
+    --slds-c-button-neutral-color-background: var(--slds-c-buttonicon-color-background, transparent);
+    --slds-c-button-neutral-color-background-hover: var(
+      --slds-c-buttonicon-color-background-hover,
+      transparent
+    );
+    --slds-c-button-neutral-color-background-focus: var(
+      --slds-c-buttonicon-color-background-focus,
+      transparent
+    );
+    --slds-c-button-neutral-color-background-active: var(
+      --slds-c-buttonicon-color-background-active,
+      var(--slds-c-button-neutral-color-background-focus)
+    );
+
+    /* Spacing */
+    --slds-c-button-neutral-spacing-inline: var(
       --slds-c-buttonicon-spacing-inline,
       var(--sds-s-button-spacing-inline, var(--sds-g-spacing-2, 0.5rem))
     );
-    --sds-c-button-spacing-block: var(
+    --slds-c-button-neutral-spacing-block: var(
       --slds-c-buttonicon-spacing-block,
       var(--sds-s-button-spacing-block, var(--sds-g-spacing-2, 0.5rem))
     );
 
-    /* @TODO: Investigate hooks that open up interaction states and the specificity issues it creates. */
-    --sds-c-button-color-border: var(--slds-c-buttonicon-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
-    --sds-c-button-color-border-hover: var(
+    /* Border */
+    --slds-c-button-neutral-color-border: var(
+      --slds-c-buttonicon-color-border,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+    --slds-c-button-neutral-color-border-hover: var(
       --slds-c-buttonicon-color-border-hover,
       var(--sds-g-color-neutral-base-80, #c9c9c9)
     );
-    --sds-c-button-color-border-focus: var(
+    --slds-c-button-neutral-color-border-focus: var(
       --slds-c-buttonicon-color-border-focus,
       var(--sds-g-color-neutral-base-80, #c9c9c9)
     );
-    --sds-c-button-color-border-active: var(
+    --slds-c-button-neutral-color-border-active: var(
       --slds-c-buttonicon-color-border-active,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
+      var(--slds-c-button-neutral-color-border-focus)
     );
 
-    /* Disabled:
-    To Do: This should work once button's host selector is fixed, add this to doc */
+    /* Shadow */
+    --slds-c-button-neutral-shadow: var(--slds-c-buttonicon-shadow);
+    --slds-c-button-neutral-shadow-focus: var(--slds-c-buttonicon-shadow-focus);
+
+    /* Disabled */
     --slds-c-button-neutral-color-background-disabled: var(--slds-c-buttonicon-color-background-disabled);
     --slds-c-button-neutral-color-border-disabled: var(--slds-c-buttonicon-color-border-disabled);
     --slds-c-button-neutral-text-color-disabled: var(--slds-c-buttonicon-text-color-disabled);
   }
 
-  /* :host(:hover)::part(button-icon), */
+  /* slds-icon interaction states */
   :host([data-render-mode="shadow"]) [part~='button-icon']:hover {
     --slds-c-icon-color-foreground: var(
       --slds-c-buttonicon-color-foreground-hover,
@@ -445,19 +816,29 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    *    its own variant saves us having to expose additional styling APIs on all
    *    the other variants just to reassign what `bare` is doing if it is default.
    */
-  :host([data-render-mode="shadow"][variant='bare']) {
+  :host([data-render-mode="shadow"][variant='bare']) [part~='button-icon'] {
     --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-bare-color-border, transparent);
     --slds-c-buttonicon-color-border-hover: var(--slds-c-buttonicon-bare-color-border-hover, transparent);
     --slds-c-buttonicon-color-border-focus: var(--slds-c-buttonicon-bare-color-border-focus, transparent);
     --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-bare-color-border-active, transparent);
     --slds-c-buttonicon-spacing-inline: var(--slds-c-buttonicon-bare-spacing-inline, 0);
     --slds-c-buttonicon-spacing-block: var(--slds-c-buttonicon-bare-spacing-block, 0);
+
+    /* Disabled */
+    --slds-c-buttonicon-color-border-disabled: var(
+      --slds-c-buttonicon-bare-color-border-disabled,
+      transparent
+    );
+    --slds-c-buttonicon-color-background-disabled: var(
+      --slds-c-buttonicon-bare-color-background-disabled,
+      transparent
+    );
   }
 
   /**
-   * Variant - Container
-   */
-  :host([data-render-mode="shadow"][variant='container']) {
+      * Variant - Container
+      */
+  :host([data-render-mode="shadow"][variant='container']) [part~='button-icon'] {
     --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-container-color-border, transparent);
     --slds-c-buttonicon-color-border-hover: var(
       --slds-c-buttonicon-container-color-border-hover,
@@ -467,48 +848,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       --slds-c-buttonicon-container-color-border-focus,
       transparent
     );
-    --slds-c-buttonicon-color-border-active: var(
-      --slds-c-buttonicon-container-color-border-active,
+    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-container-color-border-active);
+
+    /* Disabled */
+    --slds-c-buttonicon-color-border-disabled: var(
+      --slds-c-buttonicon-container-color-border-disabled,
       transparent
     );
   }
 
   /**
-   * Variant - Brand
-   */
-  :host([data-render-mode="shadow"][variant='brand']) {
-    --slds-c-buttonicon-color-background: var(
-      --slds-c-buttonicon-brand-color-background,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
-    --slds-c-buttonicon-color-background-hover: var(
-      --slds-c-buttonicon-brand-color-background-hover,
-      var(--sds-g-color-brand-base-40, #0b5cab)
-    );
-    --slds-c-buttonicon-color-background-focus: var(
-      --slds-c-buttonicon-brand-color-background-focus,
-      var(--sds-g-color-brand-base-40, #0b5cab)
-    );
-    --slds-c-buttonicon-color-background-active: var(
-      --slds-c-buttonicon-brand-color-background-active,
-      var(--sds-g-color-brand-base-10, #001639)
-    );
-    --slds-c-buttonicon-color-border: var(
-      --slds-c-buttonicon-brand-color-border,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
-    --slds-c-buttonicon-color-border-hover: var(
-      --slds-c-buttonicon-brand-color-border-hover,
-      var(--sds-g-color-brand-base-40, #0b5cab)
-    );
-    --slds-c-buttonicon-color-border-focus: var(
-      --slds-c-buttonicon-brand-color-border-focus,
-      var(--sds-g-color-brand-base-40, #0b5cab)
-    );
-    --slds-c-buttonicon-color-border-active: var(
-      --slds-c-buttonicon-brand-color-border-active,
-      var(--sds-g-color-brand-base-10, #001639)
-    );
+      * Variant - Brand
+      */
+  :host([data-render-mode="shadow"][variant='brand']) [part~='button-icon'] {
+    --slds-c-button-brand-color-background: var(--slds-c-buttonicon-brand-color-background);
+    --slds-c-button-brand-color-background-hover: var(--slds-c-buttonicon-brand-color-background-hover);
+    --slds-c-button-brand-color-background-focus: var(--slds-c-buttonicon-brand-color-background-focus);
+    --slds-c-button-brand-color-background-active: var(--slds-c-buttonicon-brand-color-background-active);
+    --slds-c-button-brand-color-border: var(--slds-c-buttonicon-brand-color-border);
+    --slds-c-button-brand-color-border-hover: var(--slds-c-buttonicon-brand-color-border-hover);
+    --slds-c-button-brand-color-border-focus: var(--slds-c-buttonicon-brand-color-border-focus);
+    --slds-c-button-brand-color-border-active: var(--slds-c-buttonicon-brand-color-border-active);
 
     --slds-c-buttonicon-color-foreground: var(
       --slds-c-buttonicon-brand-color-foreground,
@@ -529,9 +889,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   /**
-   * Variant - Bare Inverse
-   */
-  :host([data-render-mode="shadow"][variant='bare-inverse']) {
+      * Variant - Bare Inverse
+      */
+  :host([data-render-mode="shadow"][variant='bare-inverse']) [part~='button-icon'] {
+    /* Background */
+    --slds-c-buttonicon-color-background-active: transparent;
+
+    /* Border */
     --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-bareinverse-color-border, transparent);
     --slds-c-buttonicon-color-border-hover: var(
       --slds-c-buttonicon-bareinverse-color-border-hover,
@@ -539,36 +903,47 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --slds-c-buttonicon-color-border-focus: var(
       --slds-c-buttonicon-bareinverse-color-border-focus,
-      transparent
-    );
-    --slds-c-buttonicon-color-border-active: var(
-      --slds-c-buttonicon-bareinverse-color-border-active,
-      transparent
+      var(--sds-g-color-brand-base-100, #ffffff)
     );
+    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-color-border-focus);
+
+    /* Spacing */
     --slds-c-buttonicon-spacing-inline: var(--slds-c-buttonicon-bareinverse-spacing-inline, 0);
     --slds-c-buttonicon-spacing-block: var(--slds-c-buttonicon-bareinverse-spacing-block, 0);
+
+    /* Shadow */
+    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-100, #ffffff);
+
+    /* Icon */
     --slds-c-buttonicon-color-foreground: var(
       --slds-c-buttonicon-bareinverse-color-foreground,
       var(--sds-g-color-brand-base-100, #ffffff)
     );
     --slds-c-buttonicon-color-foreground-hover: var(
       --slds-c-buttonicon-bareinverse-color-foreground-hover,
-      var(--sds-g-color-brand-base-100, #ffffff)
+      var(--sds-g-color-brand-base-95, #eef4ff)
     );
     --slds-c-buttonicon-color-foreground-focus: var(
       --slds-c-buttonicon-bareinverse-color-foreground-focus,
-      var(--sds-g-color-brand-base-100, #ffffff)
+      var(--sds-g-color-brand-base-95, #eef4ff)
     );
     --slds-c-buttonicon-color-foreground-active: var(
       --slds-c-buttonicon-bareinverse-color-foreground-active,
-      var(--sds-g-color-brand-base-100, #ffffff)
+      var(--sds-g-color-brand-base-95, #eef4ff)
+    );
+
+    /* Disabled */
+    --slds-c-buttonicon-color-border-disabled: var(
+      --slds-c-buttonicon-bareinverse-color-border-disabled,
+      transparent
     );
   }
 
   /**
-   * Variant - Border Inverse
-   */
-  :host([data-render-mode="shadow"][variant='border-inverse']) {
+      * Variant - Border Inverse
+      */
+  :host([data-render-mode="shadow"][variant='border-inverse']) [part~='button-icon'] {
+    /* Border */
     --slds-c-buttonicon-color-border: var(
       --slds-c-buttonicon-borderinverse-color-border,
       var(--sds-g-color-brand-base-100, #ffffff)
@@ -586,28 +961,32 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       var(--sds-g-color-brand-base-100, #ffffff)
     );
 
+    /* Shadow */
+    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-100, #ffffff);
+
+    /* Icon */
     --slds-c-buttonicon-color-foreground: var(
       --slds-c-buttonicon-borderinverse-color-foreground,
       var(--sds-g-color-brand-base-100, #ffffff)
     );
     --slds-c-buttonicon-color-foreground-hover: var(
       --slds-c-buttonicon-borderinverse-color-foreground-hover,
-      var(--sds-g-color-brand-base-100, #ffffff)
+      var(--sds-g-color-brand-base-95, #eef4ff)
     );
     --slds-c-buttonicon-color-foreground-focus: var(
       --slds-c-buttonicon-borderinverse-color-foreground-focus,
-      var(--sds-g-color-brand-base-100, #ffffff)
+      var(--sds-g-color-brand-base-95, #eef4ff)
     );
     --slds-c-buttonicon-color-foreground-active: var(
       --slds-c-buttonicon-borderinverse-color-foreground-active,
-      var(--sds-g-color-brand-base-100, #ffffff)
+      var(--sds-g-color-brand-base-90, #d8e6fe)
     );
   }
 
   /**
-   * Variant - Border Filled
-   */
-  :host([data-render-mode="shadow"][variant='border-filled']) {
+      * Variant - Border Filled
+      */
+  :host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon'] {
     --slds-c-buttonicon-color-background: var(
       --slds-c-buttonicon-borderfilled-color-background,
       var(--sds-g-color-neutral-base-100, #ffffff)
@@ -631,57 +1010,58 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   /**
-   * Sizes
-   *
-   * Sizes are restricted to specific variants.
-   */
-
-  :host([data-render-mode="shadow"][size='xx-small']) {
-    --slds-c-buttonicon-spacing-block: 0.25rem;
-    --slds-c-buttonicon-spacing-inline: 0.25rem;
+      * Sizes
+      *
+      * Sizes are restricted to specific variants.
+      */
+  :host([data-render-mode="shadow"][size='xx-small']) [part~='button-icon'] {
+    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
     --slds-c-buttonicon-sizing: 0.5rem;
   }
 
-  :host([data-render-mode="shadow"][size='x-small']) {
-    --slds-c-buttonicon-spacing-block: 0.25rem;
-    --slds-c-buttonicon-spacing-inline: 0.25rem;
+  :host([data-render-mode="shadow"][size='x-small']) [part~='button-icon'] {
+    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
     --slds-c-buttonicon-sizing: 0.75rem;
   }
 
-  :host([data-render-mode="shadow"][size='small']) {
-    --slds-c-buttonicon-spacing-block: 0.25rem;
-    --slds-c-buttonicon-spacing-inline: 0.25rem;
+  :host([data-render-mode="shadow"][size='small']) [part~='button-icon'] {
+    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
     --slds-c-buttonicon-sizing: 0.875rem;
   }
 
-  :host([data-render-mode="shadow"][size='x-small'][variant='bare']) {
+  :host([data-render-mode="shadow"][size='x-small'][variant='bare']) [part~='button-icon'] {
     --slds-c-buttonicon-spacing-block: 0;
     --slds-c-buttonicon-spacing-inline: 0;
     --slds-c-buttonicon-sizing: 0.5rem;
   }
 
-  :host([data-render-mode="shadow"][size='small'][variant='bare']) {
+  :host([data-render-mode="shadow"][size='small'][variant='bare']) [part~='button-icon'] {
     --slds-c-buttonicon-spacing-block: 0;
     --slds-c-buttonicon-spacing-inline: 0;
     --slds-c-buttonicon-sizing: 0.75rem;
   }
 
-  :host([data-render-mode="shadow"][size='large'][variant='bare']) {
+  :host([data-render-mode="shadow"][size='large'][variant='bare']) [part~='button-icon'] {
     --slds-c-buttonicon-sizing: 1.5rem;
   }
 
-  /* :host::part(end), */
+  /**
+      * End part
+      */
   :host([data-render-mode="shadow"]) [part~='end'] {
-    padding-inline-start: var(--slds-c-buttonicon-end-padding-inline-start, 0);
+    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
   }
 
   /**
-   * A temporarily baked-in utility class until SLDS gets a proper utility package.
-   *
-   * This is a hybrid patch between synthetic and native shadow. The ideal final
-   * outcome is the removal of this class and replacing the class with the SLDS
-   * utility package solution.
-   */
+      * A temporarily baked-in utility class until SLDS gets a proper utility package.
+      *
+      * This is a hybrid patch between synthetic and native shadow. The ideal final
+      * outcome is the removal of this class and replacing the class with the SLDS
+      * utility package solution.
+      */
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -696,6 +1076,51 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 }
 
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+:host([data-render-mode="shadow"]) [part~='overlay'] {
+  background-color: var(
+    --sds-c-overlay-color-background,
+    var(--sds-s-popup-color-background, var(--sds-g-color-neutral-base-1))
+  );
+  color: var(
+    --sds-c-overlay-text-color,
+    var(--sds-s-popup-text-color, var(--sds-g-color-neutral-base-contrast-4))
+  );
+  border-radius: var(
+    --sds-c-overlay-radius-border,
+    var(--sds-s-popup-radius-border, var(--sds-g-radius-border-2, 0.25rem))
+  );
+  border-width: var(
+    --sds-c-overlay-sizing-border,
+    var(--sds-s-popup-sizing-border, var(--sds-g-sizing-border-1, 1px))
+  );
+  border-color: var(
+    --sds-c-overlay-color-border,
+    var(--sds-s-popup-color-border, var(--sds-g-color-border-base-1, #c9c9c9))
+  );
+  box-shadow: var(--sds-c-overlay-shadow, var(--sds-s-popup-shadow, var(--sds-g-shadow-1, 0 0 2px 0 #18181814, 0 2px 4px 1px #18181828)));
+
+  /* TODO: consider semantics of the shared hook for overlays/popups. */
+  padding-left: var(
+    --sds-c-overlay-spacing-inline-start,
+    var(--sds-c-overlay-spacing-inline, var(--sds-s-popup-spacing-inline, var(--sds-g-spacing-3, 0.75rem)))
+  );
+  padding-right: var(
+    --sds-c-overlay-spacing-inline-end,
+    var(--sds-c-overlay-spacing-inline, var(--sds-s-popup-spacing-inline, var(--sds-g-spacing-3, 0.75rem)))
+  );
+  padding-top: var(
+    --sds-c-overlay-spacing-block-start,
+    var(--sds-c-overlay-spacing-block, var(--sds-s-popup-spacing-block, var(--sds-g-spacing-3, 0.75rem)))
+  );
+  padding-bottom: var(
+    --sds-c-overlay-spacing-block-end,
+    var(--sds-c-overlay-spacing-block, var(--sds-s-popup-spacing-block, var(--sds-g-spacing-3, 0.75rem)))
+  );
+}
+
 /* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
@@ -1071,7 +1496,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part~="dropdown"] {
+  :host([data-render-mode="shadow"]) [part~='dropdown'] {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     --_dropdown-size-x-small: 12rem;
     --_dropdown-size-medium: var(--sds-g-sizing-15, 20rem);
@@ -1079,8 +1504,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --_nubbin-size-default: var(--sds-g-sizing-5, 1rem);
     --_duration-quickly: 0.1s;
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    
-    --sds-c-overlay-color-background: var(--slds-c-dropdown-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+
+    --sds-c-overlay-color-background: var(
+      --slds-c-dropdown-color-background,
+      var(--sds-g-color-neutral-base-100, #ffffff)
+    );
     --sds-c-overlay-text-color: var(--slds-c-dropdown-text-color, var(--sds-g-color-neutral-base-10, #181818));
     --sds-c-overlay-radius-border: var(--slds-c-dropdown-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-overlay-sizing-border: var(--slds-c-dropdown-sizing-border, var(--sds-g-sizing-border-1, 1px));
@@ -1088,8 +1516,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-overlay-shadow: var(--slds-c-dropdown-shadow, 0 2px 3px 0 rgba(0, 0, 0, 0.16));
     --sds-c-overlay-spacing-inline-start: 0;
     --sds-c-overlay-spacing-inline-end: 0;
-    --sds-c-overlay-spacing-block-start: var(--slds-c-dropdown-spacing-block-start, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem)));
-    --sds-c-overlay-spacing-block-end: var(--slds-c-dropdown-spacing-block-end, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem)));
+    --sds-c-overlay-spacing-block-start: var(
+      --slds-c-dropdown-spacing-block-start,
+      var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
+    );
+    --sds-c-overlay-spacing-block-end: var(
+      --slds-c-dropdown-spacing-block-end,
+      var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
+    );
 
     position: absolute;
     z-index: 7000;
@@ -1100,26 +1534,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     max-width: var(--slds-c-dropdown-sizing-width-max, var(--_dropdown-size-medium));
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     /* stylelint-disable */
-    margin-block-start: calc(var(--slds-c-dropdown-spacing-block-start, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) / 2);
-    margin-block-end: calc(var(--slds-c-dropdown-spacing-block-end, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) / 2); 
-    /* stylelint-enable */ 
+    margin-block-start: calc(
+      var(--slds-c-dropdown-spacing-block-start, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
+        2
+    );
+    margin-block-end: calc(
+      var(--slds-c-dropdown-spacing-block-end, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
+        2
+    );
+    /* stylelint-enable */
     font-size: var(--slds-c-dropdown-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
     border-style: solid;
     transform: translateX(-50%);
   }
 
+  /* May need to be moved into menu-item but doesn't appear supported atm */
   :host([data-render-mode="shadow"]) mark {
     font-weight: var(--sds-g-font-weight-bold, bold);
     background-color: transparent;
     color: inherit;
   }
 
-  :host([data-render-mode="shadow"]) .slds-dropdown_inverse {
-    background: var(--sds-g-color-brand-base-10, #001639);
-    border-color: var(--sds-g-color-brand-base-10, #001639);
-    color: var(--sds-g-color-neutral-base-100, #ffffff);
-  }
-
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -1133,31 +1568,35 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     white-space: nowrap !important;
   }
 
-  :host([data-render-mode="shadow"].slds-dropdown-trigger) {
+  :host([data-render-mode="shadow"].slds-dropdown-trigger),:host([data-render-mode="shadow"]) 
+  .slds-dropdown-trigger {
     position: relative;
-    
-    /* display: inline-block; */
+    display: inline-block; /* Required to expand to block children */
   }
 
-  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown {
+  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown,:host([data-render-mode="shadow"]) 
+  .slds-dropdown-trigger .slds-dropdown {
     top: 100%;
   }
 
-  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown_bottom {
+  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown_bottom,:host([data-render-mode="shadow"])  
+  .slds-dropdown-trigger .slds-dropdown_bottom {
     top: auto;
   }
 
   /* Deal with positioning when target is just an icon */
-  :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*="slds-button_icon"] ~ .slds-dropdown_left[class*="slds-nubbin"] {
-    left: calc(var(--sds-g-spacing-2, 0.5rem) * -1);
+  :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'],:host([data-render-mode="shadow"]) 
+  .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'] {
+    left: (var(--sds-g-spacing-2, 0.5rem) * -1);
   }
 
-  :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*="slds-button_icon"] ~ .slds-dropdown_right[class*="slds-nubbin"] {
-    right: calc(var(--sds-g-spacing-2, 0.5rem) * -1);
+  :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'],:host([data-render-mode="shadow"]) 
+  .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'] {
+    right: (var(--sds-g-spacing-2, 0.5rem) * -1);
   }
 
-  
-  :host([data-render-mode="shadow"].slds-dropdown-trigger_hover) .slds-dropdown {
+  :host([data-render-mode="shadow"].slds-dropdown-trigger_hover) .slds-dropdown,:host([data-render-mode="shadow"]) 
+  .slds-dropdown-trigger_hover .slds-dropdown {
     visibility: hidden;
     opacity: 0;
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
@@ -1165,11 +1604,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
   }
 
-  :host([data-render-mode="shadow"].slds-dropdown-trigger_hover:hover),:host([data-render-mode="shadow"].slds-dropdown-trigger_hover:focus) {
+  :host([data-render-mode="shadow"].slds-dropdown-trigger_hover:hover),:host([data-render-mode="shadow"].slds-dropdown-trigger_hover:focus),:host([data-render-mode="shadow"]) 
+  .slds-dropdown-trigger_hover:hover,:host([data-render-mode="shadow"]) 
+  .slds-dropdown-trigger_hover:focus {
     outline: 0;
   }
 
-  :host([data-render-mode="shadow"].slds-dropdown-trigger_hover:hover) .slds-dropdown,:host([data-render-mode="shadow"].slds-dropdown-trigger_hover:focus) .slds-dropdown {
+  :host([data-render-mode="shadow"].slds-dropdown-trigger_hover:hover) .slds-dropdown,:host([data-render-mode="shadow"].slds-dropdown-trigger_hover:focus) .slds-dropdown,:host([data-render-mode="shadow"]) 
+  .slds-dropdown-trigger_hover:hover .slds-dropdown,:host([data-render-mode="shadow"]) 
+  .slds-dropdown-trigger_hover:focus .slds-dropdown {
     visibility: visible;
     opacity: 1;
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
@@ -1177,25 +1620,28 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
   }
 
-  :host([data-render-mode="shadow"].slds-dropdown-trigger_click) .slds-dropdown,:host([data-render-mode="shadow"].slds-dropdown-trigger_click:hover) .slds-dropdown {
+  :host([data-render-mode="shadow"].slds-dropdown-trigger_click) .slds-dropdown,:host([data-render-mode="shadow"].slds-dropdown-trigger_click:hover) .slds-dropdown,:host([data-render-mode="shadow"]) 
+  .slds-dropdown-trigger_click .slds-dropdown,:host([data-render-mode="shadow"]) 
+  .slds-dropdown-trigger_click:hover .slds-dropdown {
     display: none;
   }
 
-  :host([data-render-mode="shadow"].slds-dropdown-trigger_click.slds-is-open) .slds-dropdown {
+  :host([data-render-mode="shadow"].slds-dropdown-trigger_click.slds-is-open) .slds-dropdown,:host([data-render-mode="shadow"]) 
+  .slds-dropdown-trigger_click.slds-is-open .slds-dropdown {
     display: block;
     visibility: visible;
     opacity: 1;
   }
 
   /* Adjust position of dropdown with top nubbin */
-  :host([data-render-mode="shadow"]) [part~='dropdown'][class*="slds-nubbin_top"] {
+  :host([data-render-mode="shadow"]) [part~='dropdown'][class*='slds-nubbin_top'] {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     margin-top: calc(var(--_nubbin-size-default) * 0.5);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
   }
 
   /* Adjust position of dropdown with bottom nubbin */
-  :host([data-render-mode="shadow"]) [part~='dropdown'][class*="slds-nubbin_bottom"] {
+  :host([data-render-mode="shadow"]) [part~='dropdown'][class*='slds-nubbin_bottom'] {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     margin-bottom: calc(var(--_nubbin-size-default) * 0.5);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
@@ -1246,26 +1692,43 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   :host([data-render-mode="shadow"]) .slds-dropdown_fluid {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    min-width: var(--_dropdown-size-x-small); /* Prevents menu from being illegible when input's width is small */
+    min-width: var(
+      --_dropdown-size-x-small
+    ); /* Prevents menu from being illegible when input's width is small */
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     max-width: 100%;
     width: 100%;
   }
 
   :host([data-render-mode="shadow"]) .slds-dropdown_length-5 {
-    max-height: calc(((var(--slds-c-dropdown-font-size, var(--sds-g-font-scale-neg-3, 0.75rem)) * var(--sds-g-font-lineheight, 1.5)) + var(--sds-g-spacing-4, 1rem)) * 5);
+    max-height: calc(
+      (
+          (var(--slds-c-dropdown-font-size, var(--sds-g-font-scale-neg-3, 0.75rem)) * var(--sds-g-font-lineheight, 1.5)) +
+            var(--sds-g-spacing-4, 1rem)
+        ) * 5
+    );
     -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
   :host([data-render-mode="shadow"]) .slds-dropdown_length-7 {
-    max-height: calc(((var(--slds-c-dropdown-font-size, var(--sds-g-font-scale-neg-3, 0.75rem)) * var(--sds-g-font-lineheight, 1.5)) + var(--sds-g-spacing-4, 1rem)) * 7);
+    max-height: calc(
+      (
+          (var(--slds-c-dropdown-font-size, var(--sds-g-font-scale-neg-3, 0.75rem)) * var(--sds-g-font-lineheight, 1.5)) +
+            var(--sds-g-spacing-4, 1rem)
+        ) * 7
+    );
     -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
   :host([data-render-mode="shadow"]) .slds-dropdown_length-10 {
-    max-height: calc(((var(--slds-c-dropdown-font-size, var(--sds-g-font-scale-neg-3, 0.75rem)) * var(--sds-g-font-lineheight, 1.5)) + var(--sds-g-spacing-4, 1rem)) * 10);
+    max-height: calc(
+      (
+          (var(--slds-c-dropdown-font-size, var(--sds-g-font-scale-neg-3, 0.75rem)) * var(--sds-g-font-lineheight, 1.5)) +
+            var(--sds-g-spacing-4, 1rem)
+        ) * 10
+    );
     -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
@@ -1294,20 +1757,34 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     overflow-y: auto;
   }
 
-  :host([data-render-mode="shadow"]) [dir="rtl"] .slds-dropdown_center {
+  :host([data-render-mode="shadow"]) [dir='rtl'] .slds-dropdown_center {
     left: auto;
     right: auto;
     transform: translateX(calc(50% - (0.875rem / 2)));
   }
 
-  /* LIST ITEM CSS: */
+  /**
+   * Variant - Inverse
+   *
+   * dropdown_inverse is not currently supported in LBC. button-icon inverse
+   * variant class is loaded, but nothing happens to dropdown, so these
+   * styles are currently dormant and have not been fully refactored to
+   * native shadow DOM.
+   */
+
+  :host([data-render-mode="shadow"]) .slds-dropdown_inverse {
+    background: var(--sds-g-color-brand-base-10, #001639);
+    border-color: var(--sds-g-color-brand-base-10, #001639);
+    color: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
   :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a {
     color: var(--sds-g-color-neutral-base-100, #ffffff);
   }
 
-  :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a:hover,:host([data-render-mode="shadow"])  
+  :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a:hover,:host([data-render-mode="shadow"]) 
   .slds-dropdown_inverse .slds-dropdown__item > a:focus {
-    color: var(--sds-g-color-neutral-base-90, #e5e5e5); /* updated to remove alpha color value */
+    color: var(--sds-g-color-neutral-base-90, #e5e5e5);
     background-color: transparent;
   }
 
@@ -1316,16 +1793,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     background-color: transparent;
   }
 
-  :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled="true"] {
+  :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled='true'] {
     color: var(--sds-g-color-palette-blue-20, #032d60);
     cursor: default;
   }
 
-  :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled="true"]:hover {
+  :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled='true']:hover {
     background-color: transparent;
   }
 
-  /* slds-dropdown_actions goes on dropdown component but targets list item */
+  /**
+   * Variant - Actions
+   *
+   * Appears to be unsupported, not refactored like variant - inverse above.
+   */
   :host([data-render-mode="shadow"]) .slds-dropdown_actions a {
     color: var(--sds-g-color-brand-base-50, #0176d3);
   }
@@ -1352,9 +1833,164 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     margin-bottom: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
   }
 
-  /*
-    To Do: Bring in the following classnames when working on menu-item
-    - .slds-dropdown__header
-    - .slds-dropdown__item > a , etc
-  */
-}
+  /**
+   * is-loading - spinner
+   *
+   * Attr is-loading passed to button-menu which loads lightning-spinner
+   * and triggers the utility class. We tap into it and use it to make
+   * space for the spinner which is out of the flow of the document.
+   * This is bit of a hack until utilities are figured out.
+   */
+  :host([data-render-mode="shadow"]) .slds-p-vertical_large {
+    padding: var(--sds-g-spacing-5, 1.5rem);
+  }
+}
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  /**
+   * 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(--sds-g-spacing-1, 0.25rem);
+  }
+
+  /**
+   * 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
+   * button-icon is refactored to use the component version.
+   *
+   * 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(--sds-g-color-neutral-base-100, #ffffff);
+    --slds-c-buttonicon-color-background-hover: var(--sds-g-color-neutral-base-100, #ffffff);
+    --slds-c-buttonicon-color-background-focus: var(--sds-g-color-neutral-base-100, #ffffff);
+    --slds-c-buttonicon-color-background-active: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  /**
+   * 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(--sds-g-sizing-3, 0.5rem);
+  }
+
+  /**
+   * Sizing hacks
+   */
+  :host([data-render-mode="shadow"]) .slds-button_icon-xx-small {
+    /* No hook for the value we need, so we calc to get it and keep things relative */
+    --slds-c-buttonicon-spacing-block: calc(var(--sds-g-spacing-1, 0.25rem) / 1.5);
+    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-2, 0.5rem);
+    --slds-c-buttonicon-sizing: var(--sds-g-sizing-3, 0.5rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-button_icon-x-small {
+    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-2, 0.5rem);
+    --slds-c-buttonicon-sizing: var(--sds-g-sizing-4, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-button_icon-small {
+    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-2, 0.5rem);
+    --slds-c-buttonicon-sizing: 0.875rem;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-button_icon-large {
+    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-3, 0.75rem);
+    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-2, 0.5rem);
+    --slds-c-buttonicon-sizing: var(--sds-g-sizing-7, 1.5rem);
+  }
+
+  /**
+   * 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;
+
+    /* 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(--sds-g-color-neutral-base-100, #ffffff);
+    --slds-c-buttonicon-color-background-hover: var(--sds-g-color-neutral-base-100, #ffffff);
+    --slds-c-buttonicon-color-background-focus: var(--sds-g-color-neutral-base-100, #ffffff);
+    --slds-c-buttonicon-color-background-active: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  /**
+   * Variant Hacks - Border Inverse
+   */
+  :host([data-render-mode="shadow"]) .slds-button_icon-border-inverse {
+    /* Border */
+    --slds-c-buttonicon-color-border: var(--sds-g-color-brand-base-100, #ffffff);
+    --slds-c-buttonicon-color-border-hover: var(--sds-g-color-brand-base-100, #ffffff);
+    --slds-c-buttonicon-color-border-focus: var(--sds-g-color-brand-base-100, #ffffff);
+    --slds-c-buttonicon-color-border-active: var(--sds-g-color-brand-base-100, #ffffff);
+
+    /* Shadow */
+    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-100, #ffffff);
+
+    /* Icon */
+    --slds-c-buttonicon-color-foreground: var(--sds-g-color-brand-base-100, #ffffff);
+    --slds-c-buttonicon-color-foreground-hover: var(--sds-g-color-brand-base-95, #eef4ff);
+    --slds-c-buttonicon-color-foreground-focus: var(--sds-g-color-brand-base-95, #eef4ff);
+    --slds-c-buttonicon-color-foreground-active: var(--sds-g-color-brand-base-90, #d8e6fe);
+  }
+
+  :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(--sds-g-color-brand-base-100, #ffffff);
+
+    /* Spacing */
+    --slds-c-buttonicon-spacing-inline: 0;
+    --slds-c-buttonicon-spacing-block: 0;
+
+    /* Shadow */
+    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-100, #ffffff);
+
+    /* Icon */
+    --slds-c-buttonicon-color-foreground: var(--sds-g-color-brand-base-100, #ffffff);
+    --slds-c-buttonicon-color-foreground-hover: var(--sds-g-color-brand-base-95, #eef4ff);
+    --slds-c-buttonicon-color-foreground-focus: var(--sds-g-color-brand-base-95, #eef4ff);
+    --slds-c-buttonicon-color-foreground-active: var(--sds-g-color-brand-base-95, #eef4ff);
+
+    /* 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;
+  }
+}