lightning-base-components 1.21.1-alpha → 1.21.2-alpha

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

@@ -1,1847 +1,3 @@
-/* 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"]:focus) {
-  outline: 0;
-}
-
-:host([data-render-mode="shadow"]) [part~='button'] {
-  display: var(--sds-c-button-display, inline-flex);
-  position: relative;
-  background: none;
-  background-color: var(--sds-c-button-color-background, var(--sds-s-button-color-background, transparent));
-  background-clip: border-box;
-  color: var(--sds-c-button-text-color, var(--sds-s-button-text-color, inherit));
-  padding-left: var(
-    --sds-c-button-spacing-inline-start,
-    var(--sds-c-button-spacing-inline, var(--sds-s-button-spacing-inline))
-  );
-  padding-right: var(
-    --sds-c-button-spacing-inline-end,
-    var(--sds-c-button-spacing-inline, var(--sds-s-button-spacing-inline))
-  );
-  padding-top: var(
-    --sds-c-button-spacing-block-start,
-    var(--sds-c-button-spacing-block, var(--sds-s-button-spacing-block))
-  );
-  padding-bottom: var(
-    --sds-c-button-spacing-block-start,
-    var(--sds-c-button-spacing-block, var(--sds-s-button-spacing-block))
-  );
-  border-width: var(--sds-c-button-sizing-border, var(--sds-s-button-sizing-border, 1px));
-  border-style: solid;
-  border-color: var(--sds-c-button-color-border, var(--sds-s-button-color-border, transparent));
-  border-radius: var(--sds-c-button-radius-border, var(--sds-c-button-radius-border, 0.25rem));
-  box-shadow: var(--sds-c-button-shadow, var(--sds-s-button-shadow));
-  width: var(--sds-c-button-width);
-  line-height: var(--sds-c-button-line-height);
-  white-space: normal;
-  user-select: none;
-  align-items: center;
-  text-decoration: var(--sds-c-button-text-decoration, none);
-  appearance: none;
-}
-
-:host([data-render-mode="shadow"]) [part~='button']:hover {
-  --sds-c-button-text-color: var(
-    --sds-c-button-text-color-hover,
-    var(--sds-s-button-text-color-hover, #0176d3)
-  );
-  --sds-c-button-color-background: var(
-    --sds-c-button-color-background-hover,
-    var(--sds-s-button-color-background-hover)
-  );
-  --sds-c-button-color-border: var(--sds-c-button-color-border-hover, var(--sds-s-button-color-border-hover));
-
-  cursor: pointer;
-}
-
-:host([data-render-mode="shadow"]) [part~='button']:focus {
-  --sds-c-button-color-background: var(
-    --sds-c-button-color-background-focus,
-    var(--sds-s-button-color-background-focus)
-  );
-  --sds-c-button-color-border: var(
-    --sds-c-button-color-border-focus,
-    var(--sds-s-button-color-border-focus, #0176d3)
-  );
-  --sds-c-button-text-color: var(
-    --sds-c-button-text-color-focus,
-    var(--sds-s-button-text-color-focus, #0176d3)
-  );
-  --sds-c-button-shadow: var(--sds-c-button-shadow-focus, var(--sds-s-button-shadow-focus, #0176d3 0 0 3px));
-
-  outline: 0;
-}
-
-:host([data-render-mode="shadow"]) [part~='button']:active {
-  --sds-c-button-text-color: var(
-    --sds-c-button-text-color-active,
-    var(--sds-s-button-text-color-active, currentColor)
-  );
-  --sds-c-button-color-background: var(
-    --sds-c-button-color-background-active,
-    var(--sds-s-button-color-background-active)
-  );
-  --sds-c-button-color-border: var(
-    --sds-c-button-color-border-active,
-    var(--sds-s-button-color-border-active, #0176d3)
-  );
-}
-
-:host([data-render-mode="shadow"]) [part~='button']:disabled {
-  --sds-c-button-text-color: var(--sds-c-button-text-color-disabled, #939393);
-  --sds-c-button-color-background: var(--sds-c-button-color-background-disabled);
-  --sds-c-button-color-border: var(--sds-c-button-color-border-disabled);
-
-  pointer-events: none;
-}
-
-:host([data-render-mode="shadow"]) [part~='button']:disabled * {
-  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"]) {
-  /**
-   * Establish independent formatting context, we don't want ancestor rules affecting our layout.
-   * This assumes there will not be a direct, child inline-level element.
-   * See https://www.w3.org/TR/css-display-3/#establish-an-independent-formatting-context
-   */
-  display: inline-flex;
-}
-
-:host([data-render-mode="shadow"]) [part~='boundary'] {
-  padding-block-start: var(--sds-c-icon-spacing-block-start, var(--sds-c-icon-spacing));
-  padding-block-end: var(--sds-c-icon-spacing-block-end, var(--sds-c-icon-spacing));
-  padding-inline-start: var(--sds-c-icon-spacing-inline-start, var(--sds-c-icon-spacing));
-  padding-inline-end: var(--sds-c-icon-spacing-inline-end, var(--sds-c-icon-spacing));
-  border-radius: var(--sds-c-icon-radius-border);
-  border-width: var(--sds-c-icon-sizing-border, 1px);
-  border-style: solid;
-  border-color: var(--sds-c-icon-color-border, transparent);
-  background-color: var(--sds-c-icon-color-background);
-}
-
-:host([data-render-mode="shadow"]) [part~='icon'] {
-  display: flex; /* See line #5 */
-  height: var(--sds-c-icon-sizing-height, var(--sds-c-icon-sizing));
-  width: var(--sds-c-icon-sizing-width, var(--sds-c-icon-sizing));
-  color: var(--sds-c-icon-color-foreground);
-}
-
-/**
- * Normalize svgs and control width/height with Styling Hooks
- */
-
-:host([data-render-mode="shadow"]) svg {
-  width: 100%;
-  height: 100%;
-}
-
-/**
- * @Note: Static fallbacks are in place until SLDS adopts SDS. Without static
- *        fallbacks, styles will regress due to invalid CSS variables from
- *        missing SLDS shared and globals.
- *
- *        Additionally, LBC are currently relying on 'part' attributes to
- *        receive styling. Authoring styles that rely on slots is not recommended.
- */
-
-@supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size='xxx-small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
-  }
-
-  :host([data-render-mode="shadow"][size='xx-small']) {
-    --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: var(--sds-g-sizing-5, 1rem);
-  }
-
-  :host([data-render-mode="shadow"][size='small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
-  }
-
-  :host([data-render-mode="shadow"][size='large']) {
-    --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-70, #fe9339);
-  }
-
-  :host([data-render-mode="shadow"][variant='success']) {
-    --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-50, #ea001e);
-  }
-
-  :host([data-render-mode="shadow"][variant='light']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
-  }
-
-  :host([data-render-mode="shadow"]) [part='boundary'] {
-    /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
-    --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-    --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
-    --sds-c-icon-color-border: var(--slds-c-icon-color-border);
-    --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-blockstart,
-      var(--slds-c-icon-spacing-block)
-    );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
-    --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inlinestart,
-      var(--slds-c-icon-spacing-inline)
-    );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
-
-    /**
-     * There's a divergence in LBC that we have to support here: LBC splits their
-     * icon implementation into two components: lightning-icon and lightning-primitive-icon.
-     * slds-icon is consumed within both with no issues except that the presence of an
-     * additional custom element (primitive-icon) creates an unexpected inline-level
-     * element and breaks our formatting context. tl;dr, we have to reset the formatting
-     * context of the boundary or else we'll inherit line-height from an ancestor and
-     * get visual regressions.
-     *
-     * If lightning-icon is refactored into a single component, this line can be removed.
-     */
-    display: inline-flex;
-  }
-
-  :host([data-render-mode="shadow"]) [part='icon'] {
-    --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: 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);
-  }
-}
-
-/**
- * P R I V A T E
- *
- * The following styling is implemented by classes within the shadow DOM.
- * They're expected to be private to the component and not for external use.
- *
- * See notes for each class for the rationale behind their inclusion.
- */
-
-/**
- * Utility icons traditionally added a class to change the default foreground
- * color (white) to a grey. This was done implicitly whereas other color changes
- * were done explicitly through the 'variant' attribute. So this is an outlier
- * to the overall pattern. Leaving it as-is since an update would require an
- * API change or more investigating.
- *
- * This is a hybrid patch between synthetic and native shadow. The ideal final
- * outcome is the removal of this class and the default utility styling would
- * be implemented through an attribute or some other class-less solution.
- */
-
-:host([data-render-mode="shadow"]) .slds-icon-text-default {
-  /*! @css-var-fallback fill */
-  --slds-c-icon-color-foreground: var(
-    --slds-c-icon-color-foreground-default,
-    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: var(--sds-g-color-neutral-base-80, #c9c9c9);
-}
-
-/**
- * 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;
-}
-
-/**
- * For the initial alpha version, we're hardcoding in the various unique icon styles.
- *
- * Next version, we want to dynamically generate these from legacy SLDS with the
- * following design pattern:
- *
- * [type="action"][icon-name="approval"] {
- *   --sds-c-icon-color-background: var(--slds-c-icon-color-background, #111);
- * }
- */
-
-:host([data-render-mode="shadow"]) .slds-icon_disabled {
-  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: '') {
-  /**
-   * 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);
-  }
-
-  /**
-   * 'base' variant is not the default in LBC. It is the default in the light
-   * DOM version of SLDS.
-   *
-   * 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%;
-
-    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;
-  }
-
-  /**
-   * Represents inner spacing around icon for icon-position="left", when present
-   */
-  :host([data-render-mode="shadow"]) [part='start'] {
-    display: inline-flex;
-    padding-inline-end: 0;
-  }
-
-  /**
-   * Represents inner spacing around icon for icon-position="right", when present
-   */
-  :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.
- *
- * 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;
-    --slds-c-icon-sizing: var(--slds-c-buttonicon-sizing, 0.875rem);
-    --slds-c-icon-color-foreground: var(
-      --slds-c-buttonicon-color-foreground,
-      var(--sds-g-color-neutral-base-50, #747474)
-    );
-
-    /* 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,
-      transparent
-    );
-
-    /* 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))
-    );
-    --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))
-    );
-
-    /* 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)
-    );
-    --slds-c-button-neutral-color-border-focus: var(
-      --slds-c-buttonicon-color-border-focus,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --slds-c-button-neutral-color-border-active: var(
-      --slds-c-buttonicon-color-border-active,
-      var(--slds-c-buttonicon-color-border-focus)
-    );
-
-    /* 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);
-  }
-
-  /* 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,
-      var(--sds-g-color-brand-base-30, #014486)
-    );
-  }
-
-  :host([data-render-mode="shadow"]) [part~='button-icon']:focus {
-    --slds-c-icon-color-foreground: var(
-      --slds-c-buttonicon-color-foreground-focus,
-      var(--sds-g-color-brand-base-30, #014486)
-    );
-  }
-
-  :host([data-render-mode="shadow"]) [part~='button-icon']:active {
-    --slds-c-icon-color-foreground: var(
-      --slds-c-buttonicon-color-foreground-active,
-      var(--sds-g-color-brand-base-30, #014486)
-    );
-  }
-
-  /* Create disabled state for the 1st time since icon doesn't have disabled state. */
-  :host([data-render-mode="shadow"]) [part~='button-icon']:disabled {
-    --slds-c-icon-color-foreground: var(--slds-c-buttonicon-color-foreground-disabled);
-  }
-
-  /**
-   * Variant - Bare
-   *
-   * Note: `_bare` variant is deprecated in SLDS and SLDS (light DOM version) assumes the `bare` variant
-   * will be the default styling.
-   *
-   * We include it here as an explicit variant for two reasons:
-   *
-   * 1. LBC parity; LBC uses `border` variant as default, not `bare`.
-   * 2. `bare` is the only variant that excludes padding; it is an outlier. All
-   *    variants share common styling except `bare`. Separating out `bare` into
-   *    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']) [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']) [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,
-      transparent
-    );
-    --slds-c-buttonicon-color-border-focus: var(
-      --slds-c-buttonicon-container-color-border-focus,
-      transparent
-    );
-    --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']) [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,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-foreground-hover: var(
-      --slds-c-buttonicon-brand-color-foreground-hover,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-foreground-focus: var(
-      --slds-c-buttonicon-brand-color-foreground-focus,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-foreground-active: var(
-      --slds-c-buttonicon-brand-color-foreground-active,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-  }
-
-  /**
-      * 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,
-      transparent
-    );
-    --slds-c-buttonicon-color-border-focus: var(
-      --slds-c-buttonicon-bareinverse-color-border-focus,
-      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-95, #eef4ff)
-    );
-    --slds-c-buttonicon-color-foreground-focus: var(
-      --slds-c-buttonicon-bareinverse-color-foreground-focus,
-      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-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']) [part~='button-icon'] {
-    /* Border */
-    --slds-c-buttonicon-color-border: var(
-      --slds-c-buttonicon-borderinverse-color-border,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-border-hover: var(
-      --slds-c-buttonicon-borderinverse-color-border-hover,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-border-focus: var(
-      --slds-c-buttonicon-borderinverse-color-border-focus,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-border-active: var(
-      --slds-c-buttonicon-borderinverse-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(
-      --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-95, #eef4ff)
-    );
-    --slds-c-buttonicon-color-foreground-focus: var(
-      --slds-c-buttonicon-borderinverse-color-foreground-focus,
-      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-90, #d8e6fe)
-    );
-  }
-
-  /**
-      * 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)
-    );
-    --slds-c-buttonicon-color-background-hover: var(
-      --slds-c-buttonicon-borderfilled-color-background-hover,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-background-focus: var(
-      --slds-c-buttonicon-borderfilled-color-background-focus,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-background-active: var(
-      --slds-c-buttonicon-borderfilled-color-background-active,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-borderfilled-color-border);
-    --slds-c-buttonicon-color-border-hover: var(--slds-c-buttonicon-borderfilled-color-border-hover);
-    --slds-c-buttonicon-color-border-focus: var(--slds-c-buttonicon-borderfilled-color-border-focus);
-    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-borderfilled-color-border-active);
-  }
-
-  /**
-      * 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']) [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']) [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']) [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']) [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']) [part~='button-icon'] {
-    --slds-c-buttonicon-sizing: 1.5rem;
-  }
-
-  /**
-      * End part
-      */
-  :host([data-render-mode="shadow"]) [part='end'] {
-    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inlinestart, 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.
-      */
-  :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;
-  }
-}
-
-/* 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 */
-
-/* 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"]) .slds-nubbin_top::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Top */
-    left: 50%;
-    top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-left::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-left-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-left::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-left-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Top */
-    left: var(--sds-g-spacing-5, 1.5rem);
-    top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-left::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-left-corner::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-right::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-right-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Top */
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    left: auto;
-    right: var(--sds-g-spacing-5, 1.5rem);
-    top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-right-corner::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Bottom */
-    left: 50%;
-    bottom: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-left-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-left-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Bottom */
-    bottom: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    left: var(--sds-g-spacing-5, 1.5rem);
-    top: 100%;
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-left-corner::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-right-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-right-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Bottom */
-    inset: 100% auto calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1) var(--sds-g-spacing-5, 1.5rem);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-right-corner::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-  }
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Left */
-    top: 50%;
-    left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left::after {
-    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-top-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-top-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Left */
-    left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    top: var(--sds-g-spacing-5, 1.5rem);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-top-corner::after {
-    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-bottom-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-bottom-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Left */
-    left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    top: auto;
-    bottom: var(--sds-g-spacing-4, 1rem);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-bottom-corner::before {
-    margin-bottom: -1px;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-bottom-corner::after {
-    box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Right */
-    top: 50%;
-    right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right::after {
-    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-top-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-top-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Right */
-    right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    top: var(--sds-g-spacing-5, 1.5rem);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-top-corner::after {
-    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-bottom-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-bottom-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Right */
-    right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    top: auto;
-    bottom: var(--sds-g-spacing-4, 1rem);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-bottom-corner::before {
-    margin-bottom: -1px;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-bottom-corner::after {
-    box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-left-corner {
-    border-radius: var(--sds-g-sizing-border-2, 2px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-left-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-left-corner::after {
-    left: var(--sds-g-spacing-3, 0.75rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left-corner {
-    border-radius: var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-2, 2px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-left-corner::after {
-    left: var(--sds-g-spacing-3, 0.75rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-right-corner {
-    border-radius: var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-2, 2px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-right-corner::after {
-    right: var(--sds-g-spacing-3, 0.75rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right-corner {
-    border-radius: var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-2, 2px) var(--sds-g-sizing-border-4, 4px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-right-corner::after {
-    right: var(--sds-g-spacing-3, 0.75rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top-corner {
-    border-radius: var(--sds-g-sizing-border-2, 2px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-top-corner::after {
-    top: var(--sds-g-spacing-3, 0.75rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top-corner {
-    border-radius: var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-2, 2px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-top-corner::after {
-    top: var(--sds-g-spacing-3, 0.75rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom-corner {
-    border-radius: var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-2, 2px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-bottom-corner::after {
-    bottom: var(--sds-g-spacing-1, 0.25rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom-corner {
-    border-radius: var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-2, 2px) var(--sds-g-sizing-border-4, 4px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-bottom-corner::after {
-    bottom: var(--sds-g-spacing-1, 0.25rem);
-}
-
-@supports (--styling-hooks: '') {
-  :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);
-    --_dropdown-square-icon-small-boundary: var(--sds-g-sizing-7, 1.5rem);
-    --_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-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));
-    --sds-c-overlay-color-border: var(--slds-c-dropdown-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    --sds-c-overlay-shadow: var(--slds-c-dropdown-shadow, 0 2px 3px 0 rgba(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-blockstart,
-      var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
-    );
-    --sds-c-overlay-spacing-block-end: var(
-      --slds-c-dropdown-spacing-blockend,
-      var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
-    );
-
-    position: absolute;
-    z-index: 7000;
-    left: 50%;
-    float: left;
-    min-width: var(--slds-c-dropdown-sizing-width-min, 6rem);
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    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-blockstart, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
-        2
-    );
-    margin-block-end: calc(
-      var(--slds-c-dropdown-spacing-blockend, 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-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-dropdown-trigger),:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger {
-    position: relative;
-    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 {
-    top: 100%;
-  }
-
-  :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'],: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'],: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 {
-    visibility: hidden;
-    opacity: 0;
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    transition: opacity var(--_duration-quickly) linear, visibility var(--_duration-quickly) linear;
-    /* 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 {
-    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 {
-    visibility: visible;
-    opacity: 1;
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    transition: opacity var(--_duration-quickly) linear, visibility var(--_duration-quickly) linear;
-    /* 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 {
-    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 {
-    display: block;
-    visibility: visible;
-    opacity: 1;
-  }
-
-  /* Adjust position of dropdown with top nubbin */
-  :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'] {
-    /* 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 */
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_left {
-    left: 0;
-    right: auto;
-    transform: translateX(0);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_right {
-    left: auto;
-    right: 0;
-    transform: translateX(0);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_bottom {
-    bottom: 100%;
-  }
-
-  /* Width */
-  :host([data-render-mode="shadow"]) .slds-dropdown_xx-small {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    min-width: var(--dropdown-size-xx-small);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_x-small {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    min-width: var(--_dropdown-size-x-small);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_small {
-    min-width: var(--sds-g-sizing-14, 15rem);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_medium {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    min-width: var(--_dropdown-size-medium);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_large {
-    min-width: 25rem;
-  }
-
-  :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 */
-    /* 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
-    );
-    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
-    );
-    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
-    );
-    overflow-y: auto;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_length-with-icon-5 {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 5);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    overflow-y: auto;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_length-with-icon-7 {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 7);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    overflow-y: auto;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_length-with-icon-10 {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 10);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    overflow-y: auto;
-  }
-
-  :host([data-render-mode="shadow"]) [dir='rtl'] .slds-dropdown_center {
-    left: auto;
-    right: auto;
-    transform: translateX(calc(50% - (0.875rem / 2)));
-  }
-
-  /**
-   * 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"]) 
-  .slds-dropdown_inverse .slds-dropdown__item > a:focus {
-    color: var(--sds-g-color-neutral-base-90, #e5e5e5);
-    background-color: transparent;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a:active {
-    color: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    background-color: transparent;
-  }
-
-  :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 {
-    background-color: transparent;
-  }
-
-  /**
-   * 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);
-  }
-
-  /* These .slds-has-submenu classes for on the list item but .slds-dropdown_submenu goes on the div where .slds-dropdown exists */
-  :host([data-render-mode="shadow"]) .slds-has-submenu .slds-dropdown_submenu {
-    top: 0;
-    transform: none;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-has-submenu .slds-dropdown_submenu-right {
-    left: 100%;
-    margin-left: var(--sds-g-spacing-1, 0.25rem);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-has-submenu .slds-dropdown_submenu-left {
-    left: 100%;
-    margin-left: var(--sds-g-spacing-1, 0.25rem);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-has-submenu .slds-dropdown_submenu-bottom {
-    top: auto;
-    bottom: 0;
-    margin-bottom: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
-  }
-
-  /**
-   * 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 */
@@ -1853,7 +9,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * comes from parent button styles.
    */
   :host([data-render-mode="shadow"]) [part='button-icon'] {
-    gap: var(--sds-g-spacing-1, 0.25rem);
+    gap: var(--slds-g-spacing-1);
   }
 
   /**
@@ -1866,10 +22,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * 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-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
+    --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
+    --slds-c-buttonicon-color-background-focus: var(--slds-g-color-surface-container-1);
+    --slds-c-buttonicon-color-background-active: var(--slds-g-color-surface-container-1);
   }
 
   /**
@@ -1877,7 +33,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * 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);
+    --slds-c-icon-sizing: var(--slds-g-sizing-3);
   }
 
   /**
@@ -1885,27 +41,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    */
   :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);
+    --slds-c-buttonicon-spacing-block: calc(var(--slds-g-spacing-1) / 1.5);
+    --slds-c-buttonicon-spacing-inline: var(--slds-g-spacing-2);
+    --slds-c-buttonicon-sizing: var(--slds-g-sizing-3);
   }
 
   :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);
+    --slds-c-buttonicon-spacing-block: var(--slds-g-spacing-1);
+    --slds-c-buttonicon-spacing-inline: var(--slds-g-spacing-2);
+    --slds-c-buttonicon-sizing: var(--slds-g-sizing-4);
   }
 
   :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-spacing-block: var(--slds-g-spacing-1);
+    --slds-c-buttonicon-spacing-inline: var(--slds-g-spacing-2);
     --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);
+    --slds-c-buttonicon-spacing-block: var(--slds-g-spacing-3);
+    --slds-c-buttonicon-spacing-inline: var(--slds-g-spacing-2);
+    --slds-c-buttonicon-sizing: var(--slds-g-sizing-7);
   }
 
   /**
@@ -1924,10 +80,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * 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);
+    --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
+    --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
+    --slds-c-buttonicon-color-background-focus: var(--slds-g-color-surface-container-1);
+    --slds-c-buttonicon-color-background-active: var(--slds-g-color-surface-container-1);
   }
 
   /**
@@ -1935,19 +91,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    */
   :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);
+    --slds-c-buttonicon-color-border: var(--slds-g-color-brand-base-100);
+    --slds-c-buttonicon-color-border-hover: var(--slds-g-color-brand-base-100);
+    --slds-c-buttonicon-color-border-focus: var(--slds-g-color-brand-base-100);
+    --slds-c-buttonicon-color-border-active: var(--slds-g-color-brand-base-100);
 
     /* Shadow */
-    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-100, #ffffff);
+    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--slds-g-color-brand-base-100);
 
     /* 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);
+    --slds-c-buttonicon-color-foreground: var(--slds-g-color-brand-base-100);
+    --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-brand-base-95);
+    --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-brand-base-95);
+    --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-brand-base-90);
   }
 
   :host([data-render-mode="shadow"]) .slds-button_icon-inverse {
@@ -1957,20 +113,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* 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);
+    --slds-c-buttonicon-color-border-focus: var(--slds-g-color-brand-base-100);
 
     /* Spacing */
     --slds-c-buttonicon-spacing-inline: 0;
     --slds-c-buttonicon-spacing-block: 0;
 
     /* Shadow */
-    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-100, #ffffff);
+    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--slds-g-color-brand-base-100);
 
     /* 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);
+    --slds-c-buttonicon-color-foreground: var(--slds-g-color-brand-base-100);
+    --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-brand-base-95);
+    --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-brand-base-95);
+    --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-brand-base-95);
 
     /* Disabled */
     --slds-c-buttonicon-color-border-disabled: transparent;