lightning-base-components 1.16.6-alpha → 1.16.8-alpha

package/src/lightning/buttonMenu/dropdown.slds.css

@@ -0,0 +1,1360 @@
+/* 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"]) [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 */
+
+: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: 0.5rem;
+  }
+
+  :host([data-render-mode="shadow"][size~='xx-small']) {
+    --slds-c-icon-sizing: 0.875rem;
+  }
+
+  :host([data-render-mode="shadow"][size~='x-small']) {
+    --slds-c-icon-sizing: 1rem;
+  }
+
+  :host([data-render-mode="shadow"][size~='small']) {
+    --slds-c-icon-sizing: 1.5rem;
+  }
+
+  :host([data-render-mode="shadow"][size~='large']) {
+    --slds-c-icon-sizing: 3rem;
+  }
+
+  :host([data-render-mode="shadow"][variant~='warning']) {
+    --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-4);
+  }
+
+  :host([data-render-mode="shadow"][variant~='success']) {
+    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-contrast-1);
+  }
+
+  :host([data-render-mode="shadow"][variant~='error']) {
+    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-contrast-1);
+  }
+
+  :host([data-render-mode="shadow"][variant~='light']) {
+    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-contrast-1);
+  }
+
+  :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-block-start,
+      var(--slds-c-icon-spacing-block)
+    );
+    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-block-end, var(--slds-c-icon-spacing-block));
+    --sds-c-icon-spacing-inline-start: var(
+      --slds-c-icon-spacing-inline-start,
+      var(--slds-c-icon-spacing-inline)
+    );
+    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inline-end, 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-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));
+  }
+
+  :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%;
+  }
+}
+
+/**
+ * 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, #706e6b)
+  );
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-text-default.slds-is-disabled {
+  fill: #dddbda;
+}
+
+/**
+ * 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;
+}
+
+/* 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;
+  }
+
+  /**
+   * part - button-icon
+   *
+   * Default styling is "border" variant
+   */
+
+  /* :host::part('button-icon'), */
+  :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)
+    );
+
+    /* 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(
+      --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-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(
+      --slds-c-buttonicon-color-border-hover,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+    --sds-c-button-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-buttonicon-color-border-active,
+      var(--sds-g-color-neutral-base-80, #c9c9c9)
+    );
+
+    /* Disabled:
+    To Do: This should work once button's host selector is fixed, add this to doc */
+    --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), */
+  :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']) {
+    --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);
+  }
+
+  /**
+   * Variant - Container
+   */
+  :host([data-render-mode="shadow"][variant='container']) {
+    --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,
+      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)
+    );
+
+    --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']) {
+    --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,
+      transparent
+    );
+    --slds-c-buttonicon-color-border-active: var(
+      --slds-c-buttonicon-bareinverse-color-border-active,
+      transparent
+    );
+    --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);
+    --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)
+    );
+    --slds-c-buttonicon-color-foreground-focus: var(
+      --slds-c-buttonicon-bareinverse-color-foreground-focus,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-foreground-active: var(
+      --slds-c-buttonicon-bareinverse-color-foreground-active,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+  }
+
+  /**
+   * Variant - Border Inverse
+   */
+  :host([data-render-mode="shadow"][variant='border-inverse']) {
+    --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)
+    );
+
+    --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)
+    );
+    --slds-c-buttonicon-color-foreground-focus: var(
+      --slds-c-buttonicon-borderinverse-color-foreground-focus,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+    --slds-c-buttonicon-color-foreground-active: var(
+      --slds-c-buttonicon-borderinverse-color-foreground-active,
+      var(--sds-g-color-brand-base-100, #ffffff)
+    );
+  }
+
+  /**
+   * Variant - Border Filled
+   */
+  :host([data-render-mode="shadow"][variant='border-filled']) {
+    --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']) {
+    --slds-c-buttonicon-spacing-block: 0.25rem;
+    --slds-c-buttonicon-spacing-inline: 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;
+    --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;
+    --slds-c-buttonicon-sizing: 0.875rem;
+  }
+
+  :host([data-render-mode="shadow"][size='x-small'][variant='bare']) {
+    --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']) {
+    --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']) {
+    --slds-c-buttonicon-sizing: 1.5rem;
+  }
+
+  /* :host::part(end), */
+  :host([data-render-mode="shadow"]) [part~='end'] {
+    padding-inline-start: var(--slds-c-buttonicon-end-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;
+  }
+}
+
+/* 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, 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, 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, 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, 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, 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 */
+    bottom: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
+    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
+    left: auto;
+    right: var(--sds-g-spacing-5, 1.5rem);
+    top: 100%;
+    margin-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_bottom-right::after,:host([data-render-mode="shadow"]) 
+.slds-nubbin_bottom-right-corner::after {
+    box-shadow: 2px 2px 4px 0 rgba(0, 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, 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, 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, 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, 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, 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, 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, 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)));
+
+    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-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%);
+  }
+
+  :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;
+    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) {
+    position: relative;
+    
+    /* display: inline-block; */
+  }
+
+  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown {
+    top: 100%;
+  }
+
+  :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_right[class*="slds-nubbin"] {
+    right: calc(var(--sds-g-spacing-2, 0.5rem) * -1);
+  }
+
+  
+  :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) {
+    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 {
+    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 {
+    display: none;
+  }
+
+  :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);
+    -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);
+    -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);
+    -webkit-overflow-scrolling: touch;
+    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 */
+    -webkit-overflow-scrolling: touch;
+    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 */
+    -webkit-overflow-scrolling: touch;
+    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 */
+    -webkit-overflow-scrolling: touch;
+    overflow-y: auto;
+  }
+
+  :host([data-render-mode="shadow"]) [dir="rtl"] .slds-dropdown_center {
+    left: auto;
+    right: auto;
+    transform: translateX(calc(50% - (0.875rem / 2)));
+  }
+
+  /* LIST ITEM CSS: */
+  :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); /* updated to remove alpha color value */
+    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;
+  }
+
+  /* slds-dropdown_actions goes on dropdown component but targets list item */
+  :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);
+  }
+
+  /*
+    To Do: Bring in the following classnames when working on menu-item
+    - .slds-dropdown__header
+    - .slds-dropdown__item > a , etc
+  */
+}