lightning-base-components 1.17.7-alpha → 1.18.2-alpha

package/src/lightning/baseCombobox/base-combobox.slds.css

@@ -0,0 +1,1585 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/* The Input Control Container holds the `start` and `end` slot contents, as well as the input control itself */
+
+:host([data-render-mode="shadow"]) [part~='input-container'] {
+  display: flex;
+  align-items: center;
+  position: relative;
+  min-height: var(--sds-c-inputtext-sizing-height);
+  padding-inline-end: var(--sds-c-inputtext-spacing-inline-end, var(--sds-c-inputtext-spacing-inline));
+  padding-inline-start: var(--sds-c-inputtext-spacing-inline-start, var(--sds-c-inputtext-spacing-inline));
+  background-color: var(--sds-c-inputtext-color-background, var(--sds-g-color-neutral-base-1));
+  border-width: var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1, 1px));
+  border-style: solid;
+  border-color: var(--sds-c-inputtext-color-border, var(--sds-g-color-neutral-base-contrast-3));
+  border-radius: var(--sds-c-inputtext-radius-border);
+  box-shadow: var(--sds-c-inputtext-shadow);
+}
+
+/* The Input element (in markup) */
+
+:host([data-render-mode="shadow"]) [part~='input'] {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  font-size: var(--sds-c-inputtext-font-size);
+  color: var(--sds-c-inputtext-text-color);
+  line-height: 1;
+  border: none;
+  background: transparent;
+}
+
+/* Placeholder Text */
+
+:host([data-render-mode="shadow"]) [part~='input']::placeholder {
+  color: var(--sds-c-inputtext-text-color-placeholder);
+  font-style: var(--sds-c-inputtext-font-style-placeholder);
+}
+
+/* Focus State */
+
+:host([data-render-mode="shadow"]) [part~='input-container']:focus-within {
+  --sds-c-inputtext-color-border: var(
+    --sds-c-inputtext-color-border-focus,
+    var(--sds-g-color-palette-blue-50, #0176d3)
+  );
+  --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, 0 0 3px var(--sds-g-color-palette-blue-50, #0176d3));
+  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-focus);
+  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-focus);
+}
+
+:host([data-render-mode="shadow"]) [part~='input']:focus {
+  outline: none;
+}
+
+/* Invalid state */
+
+:host([data-render-mode="shadow"][aria-invalid='true']) [part~='input-container'] {
+  --sds-c-inputtext-color-border: var(--sds-c-inputtext-color-border-invalid);
+  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-invalid);
+}
+
+:host([data-render-mode="shadow"][aria-invalid='true']) [part~='input'] {
+  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-invalid);
+}
+
+/* Valid State */
+
+:host([data-render-mode="shadow"][aria-invalid='false']) [part~='input-container'] {
+  --sds-c-inputtext-color-border: var(--sds-c-inputtext-color-border-valid);
+  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-valid);
+}
+
+:host([data-render-mode="shadow"][aria-invalid='false']) [part~='input'] {
+  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-valid);
+}
+
+/* Readonly State */
+
+:host([data-render-mode="shadow"][readonly]) [part~='input-container'] {
+  --sds-c-inputtext-sizing-border: var(--sds-c-inputtext-sizing-border-readonly);
+  --sds-c-inputtext-spacing-inline-start: var(
+    --sds-c-inputtext-spacing-inline-start-readonly,
+    var(--sds-c-inputtext-spacing-inline-readonly)
+  );
+  --sds-c-inputtext-spacing-inline-end: var(
+    --sds-c-inputtext-spacing-inline-end-readonly,
+    var(--sds-c-inputtext-spacing-inline-readonly)
+  );
+}
+
+/* Disabled State */
+
+:host([data-render-mode="shadow"][disabled]) [part~='input-container'] {
+  --sds-c-inputtext-text-color: #3e3e3c; /* TODO: Replace with Global Styling Hook Fallback */
+  --sds-c-inputtext-color-background: #ecebea; /* TODO: Replace with Global Styling Hook Fallback */
+  --sds-c-inputtext-color-border: #c9c7c5; /* TODO: Replace with Global Styling Hook Fallback */
+}
+
+/* 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, 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%);
+  }
+
+  /* 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
+    );
+    -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)));
+  }
+
+  /**
+   * 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);
+  }
+}
+
+@supports (--styling-hooks: '') {
+   /**
+   * Input Text
+   */
+    :host([data-render-mode="shadow"]) [part~='input-text'] {
+        /* Host reassignments to composed slds-icon */
+        --slds-c-icon-color-foreground: var(
+            --slds-c-inputtext-icon-color-foreground,
+            var(--sds-g-color-neutral-base-50, #747474)
+        );
+        --slds-c-icon-sizing: var(--slds-c-inputtext-icon-sizing, 14px);
+        --sds-c-inputtext-sizing-height: var(
+            --slds-c-inputtext-sizing-height,
+            var(--sds-g-sizing-9, 2rem)
+        );
+        --sds-c-inputtext-color-background: var(
+            --slds-c-inputtext-color-background,
+            var(--sds-g-color-neutral-base-100, #ffffff)
+        );
+        --sds-c-inputtext-color-background-focus: var(
+            --slds-c-inputtext-color-background-focus,
+            var(--sds-g-color-neutral-base-100, #ffffff)
+        );
+        --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
+        --sds-c-inputtext-font-size: var(
+            --slds-c-inputtext-font-size,
+            var(--sds-g-font-scale-neg-2, 0.8125rem)
+        );
+        --sds-c-inputtext-text-color-placeholder: var(
+            --slds-c-inputtext-text-color-placeholder,
+            var(--sds-g-color-neutral-base-50, #747474)
+        );
+        --sds-c-inputtext-color-border: var(
+            --slds-c-inputtext-color-border,
+            var(--sds-g-color-neutral-base-80, #c9c9c9)
+        );
+        --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
+        --sds-c-inputtext-radius-border: var(
+            --slds-c-inputtext-radius-border,
+            var(--sds-g-radius-border-2, 0.25rem)
+        );
+
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+   /**
+   * Input Container
+   */
+    :host([data-render-mode="shadow"]) [part~='input-container'] {
+        flex: 1 0 100%;
+        align-items: stretch;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range'] {
+        border: none;
+        display: inline-block;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='input'][type~='range'] {
+        min-height: calc(1.875rem + (1px * 2));
+        margin: 0;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range']:focus-within,:host([data-render-mode="shadow"]) 
+    [part~='input-container'][type~='range']:active {
+        --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
+        --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+        --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
+
+        outline: 0;
+        border-width: var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1, 1px));
+        border-color: var(--sds-c-inputtext-color-border, var(--sds-g-color-neutral-base-contrast-3));
+    }
+
+   /**
+   * Input
+   */
+    :host([data-render-mode="shadow"]) [part~='input'] {
+        padding-inline-start: var(
+            --slds-c-inputtext-spacing-inline-start,
+            var(--sds-g-spacing-3, 0.75rem));
+        padding-inline-end: var(
+            --slds-c-inputtext-spacing-inline-end,
+            var(--sds-g-spacing-4, 1rem));
+        height: unset;
+        font-family: var(--sds-g-font-family, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
+    }
+
+   /**
+   * Focus / active State
+   */
+    :host([data-render-mode="shadow"]) [part~="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
+    [part~="input-container"]:active {
+      --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
+      --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+      --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
+
+      outline: 0;
+    }
+
+   /**
+   * Read Only State
+   */
+    :host([data-render-mode="shadow"][readonly]) [part~='input-text'] {
+        --sds-c-inputtext-spacing-inline-start-readonly: 0;
+        --sds-c-inputtext-color-border-focus: transparent;
+        --slds-c-inputtext-color-border: transparent;
+        --slds-c-inputtext-color-background: transparent;
+        --slds-c-inputtext-color-background-focus: transparent;
+    }
+
+    /**
+   * Invalid State
+   *
+   * Does not use --sds-c-inputtext-color-border-invalid due to this hook being
+   * tied to :host([aria-invalid]) which this subsystem does not use. Instead, it
+   * uses :host([invalid]).
+   */
+    :host([data-render-mode="shadow"][invalid]) [part~='input-text'] {
+        --sds-c-inputtext-shadow: 0 0 0 var(--sds-g-sizing-border-1, 1px) inset
+            var(--sds-g-color-error-base-50, #ea001e);
+        --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
+        --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    /**
+   * Invalid State - Focus
+   *
+   * The following styling hooks are included in SDS and need to be reassigned
+   * here to prevent a bug with the focus state border and box-shadow
+   */
+    :host([data-render-mode="shadow"][invalid]) [part~='input-container']:focus-within {
+      --sds-c-inputtext-shadow:
+        var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset,
+        0 0 var(--sds-g-sizing-border-3, 3px) var(--sds-g-color-brand-base-50, #0176d3);
+      --sds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    /**
+   * Disabled State
+   *
+   * Both parts form the visible form control.
+   */
+    :host([data-render-mode="shadow"][disabled]) [part~='input-container'],:host([data-render-mode="shadow"][disabled]) [part~='input'] {
+        cursor: not-allowed;
+        --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-95, #f3f3f3);
+        --sds-c-inputtext-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
+        --sds-c-inputtext-text-color: var(--sds-g-color-neutral-base-50, #747474);
+    }
+
+    /**
+   * Label
+   *
+   * Add [part~='input-text'] to increase specificity and
+   * avoid collisions with other components using [part~='label'] (e.g. slds-input-checkbox)
+   */
+    :host([data-render-mode="shadow"]) [part~='input-text'] [part~='label'] {
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        color: var(
+            --slds-c-inputtext-label-color,
+            var(--sds-g-color-neutral-base-30, #444444)
+        );
+        font-size: var(
+            --slds-c-inputtext-label-font-size,
+            var(--sds-g-font-scale-neg-3, 0.75rem)
+        );
+        margin-block-end: var(--sds-g-sizing-1, 0.125rem);
+
+        /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
+        display: inline-flex;
+    }
+
+    /**
+   * Start
+   *
+   * Only expects an SLDS icon. We assign the SLDS Icon Styling Hook here
+   * so we don't add spacing to other icons composed in the component, e.g.,
+   * the icon in the inline help text.
+   */
+    :host([data-render-mode="shadow"]) [part~='start'] {
+        --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+
+    /**
+   * Label Inline Variant
+   *
+   * Note: all the 33% values you see are remnants of legacy SLDS. We need to
+   * keep this implementation intact so visual output is the same when used
+   * in a form that has non-shadow components. Attempting to refactor to a
+   * modern solution like flex is proving tricky due to the presence of the
+   * optional inline-help and the input needing to have exactly 33% of spacing
+   * from the inline-start.
+   *
+   * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
+   */
+    @media (min-width: 48em) {
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-text'] {
+            display: block;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='label'] {
+            float: left;
+
+            /* TODO: Get rid of these magic numbers */
+            max-width: calc(33% - 1.125rem);
+            padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-container'] {
+            margin-inline-start: 33%;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='inline-help'] {
+            float: left;
+            padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        }
+    }
+
+    :host([data-render-mode="shadow"]) input[type="search"] + lightning-primitive-icon::part(icon) {
+        left: var(--sds-g-spacing-3, 0.75rem);
+        fill: var(--slds-g-color-neutral-base-50, #747474);
+    }
+    
+    :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon {
+        background-color: transparent;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon:focus,:host([data-render-mode="shadow"]) 
+    .slds-input-has-icon .slds-button_icon:hover {
+        --slds-c-icon-color-foreground: var(--sds-g-color-brand-base-30, #014486);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-input__icon {
+        width: 0.875rem;
+        height: 0.875rem;
+        position: absolute;
+        top: 50%;
+        margin-top: -0.4375rem;
+        line-height: 1;
+        border: 0;
+        z-index: 2;
+    }
+
+    /**
+   * Has Icon Left
+   */
+    :host([data-render-mode="shadow"]) .slds-input-has-icon_left {
+        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input__icon,:host([data-render-mode="shadow"]) 
+    .slds-input-has-icon_left-right .slds-input__icon_left {
+        inset-inline-start: var(--sds-g-spacing-3, 0.75rem);
+    }
+
+    /**
+   * Has Icon Right
+   */
+    :host([data-render-mode="shadow"]) .slds-input-has-icon_right {
+        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input__icon,:host([data-render-mode="shadow"]) 
+    .slds-input-has-icon_left-right .slds-input__icon_right {
+        inset-inline-end: var(--sds-g-spacing-3, 0.75rem);
+    }
+
+    /**
+   * Has Icon Left & Right
+   */
+    :host([data-render-mode="shadow"]) .slds-input-has-icon_left-right {
+        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+    }
+   
+  /**
+ * 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;
+  }
+}
+
+@supports (--styling-hooks: '') {
+   :host([data-render-mode="shadow"]) [part~='listbox'] {
+     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     --_listbox-spacing-xxx-small: 0.125rem;
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+   }
+
+   /* Horizontal listbox - used for pill container */
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal {
+     display: inline-flex;
+     flex-wrap: wrap;
+     align-items: center;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
+     display: flex;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li+li {
+     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline-start: var(--_listbox-spacing-xxx-small);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+   }
+
+   /* Vertical listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
+   .slds-listbox_vertical .slds-listbox__option:hover,:host([data-render-mode="shadow"]) 
+   .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
+     background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+     text-decoration: none;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
+   .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover {
+     background-color: transparent;
+     cursor: default;
+   }
+
+   /* Modifies the listbox option if it contains an entity object */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity {
+     padding-block: var(--sds-g-spacing-1, 0.25rem);
+     padding-inline: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   /* Modifies the listbox option if it contains a plain object or string */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
+     padding-block: var(--sds-g-spacing-2, 0.5rem);
+     padding-inline: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
+     padding-block: var(--sds-g-spacing-2, 0.5rem);
+     padding-inline: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   /* Choosable option within listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
+     cursor: pointer;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
+     outline: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] {
+     color: var(--sds-g-color-neutral-base-80, #c9c9c9);
+   }
+
+   /* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
+
+   /* the _vertical variations only apply to combobox's */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure {
+     margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
+   }
+
+   /* If the listbox option has metadata or secondary information that sits below its primary text */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure {
+     margin-block-start: var(--sds-g-spacing-1, 0.25rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
+     display: inline-block;
+     vertical-align: middle;
+   }
+
+   /* Header for choosable option within listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-header {
+     font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+     font-weight: 700;
+   }
+
+   /* Container for listbox option icon */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-icon {
+     width: var(--sds-g-sizing-7, 1.5rem);
+     display: inline-flex;
+     align-content: center;
+     align-items: center;
+     justify-content: center;
+     color: var(--sds-g-color-neutral-base-50, #747474);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
+     color: currentColor;
+   }
+
+   /* The icon within a plain listbox that indicates if an option has been selected or not. */
+   :host([data-render-mode="shadow"]) .slds-listbox__icon-selected {
+     opacity: 0;
+     fill: var(--sds-g-color-brand-base-50, #0176d3);
+   }
+
+   /* Modifier that makes selected icon visible */
+   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
+     opacity: 1;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
+     color: var(--sds-g-color-brand-base-50, #0176d3);
+   }
+
+   /* The main text of an entity listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-text_entity {
+     max-width: 100%;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     display: block;
+      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     margin-block-end: var(--_listbox-spacing-xxx-small);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+   }
+
+   /* The metadata or secondary text of an entity listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-meta {
+     display: block;
+     margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+     color: var(--sds-g-color-neutral-base-30, #444444);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
+     color: currentColor;
+   }
+  
+   /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
+
+   /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
+
+   /* The container of pill selections found inside of a combobox group */
+   
+   /* .slds-listbox_selection-group items need to be moved out to pill/pill container */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group {
+     position: relative;
+     padding: 0;
+     padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) + var(--sds-g-spacing-3, 0.75rem));
+     height: 1.875rem;
+     overflow: hidden;
+   }
+
+   /* Expanded state of a selection group */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
+     height: auto;
+     padding: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
+     padding-block-start: 0;
+      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-block-end: var(--_listbox-spacing-xxx-small);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
+     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-block-start: var(--_listbox-spacing-xxx-small);
+     padding-block-end: 0;
+     padding-inline: var(--_listbox-spacing-xxx-small);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+   }
+
+   /* Toggle button to show all of the pill selections */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
+     position: absolute;
+     top: 50%;
+     transform: translateY(-50%);
+     right: var(--sds-g-spacing-2, 0.5rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
+     line-height: 1;
+   }
+
+   /* Media Object classes need to be pulled out for reusability */
+   :host([data-render-mode="shadow"]) .slds-media {
+     display: flex;
+     align-items: flex-start;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__figure {
+     flex-shrink: 0;
+     margin-inline-end: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
+     min-width: var(--sds-g-sizing-10, 3rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__body {
+     flex: 1;
+     min-width: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__body,:host([data-render-mode="shadow"]) 
+   .slds-media__body> :last-child {
+     margin-block-end: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media-body-iefix {
+     flex-shrink: 0;
+     flex-basis: auto;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure {
+     margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
+     margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
+     margin-inline-end: var(--sds-g-spacing-5, 1.5rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
+     margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_inline .slds-media__body {
+     flex: 0 1 auto;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_center {
+     align-items: center;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__figure_reverse {
+     margin-block: 0;
+     margin-inline-start: var(--sds-g-spacing-3, 0.75rem);
+     margin-inline-end: 0;
+   }
+
+   @media (max-width: 48em) {
+
+     :host([data-render-mode="shadow"]) .slds-media_responsive {
+       display: block;
+     }
+
+     :host([data-render-mode="shadow"]) .slds-media_responsive .slds-media__figure {
+       margin-block: 0;
+       margin-inline-start: var(--sds-g-spacing-3, 0.75rem);
+       margin-inline-end: 0;
+     }
+   }
+ }
+
+/* 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: '') {
+  /**
+   * Combobox
+   */
+  :host([data-render-mode="shadow"]) .slds-combobox {
+    position: static;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+  }
+
+  /**
+   * Combobox Container
+   */
+  :host([data-render-mode="shadow"]) .slds-combobox_container {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  /**
+   * Faux Input
+   */
+  :host([data-render-mode="shadow"]) .slds-input_faux {
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: var(--sds-g-spacing-3, 0.75rem);
+    padding-inline-end: var(--sds-g-spacing-4, 1rem);
+    width: 100%;
+    line-height: 1.875rem;
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    border: var(--slds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1, 1px)) solid
+      var(--slds-c-inputtext-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
+    border-radius: var(--slds-c-inputtext-radius, var(--sds-g-radius-border-2, 0.25rem));
+    background-color: var(--slds-c-inputtext-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+    color: var(--slds-c-inputtext-text-color);
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+    transition: border 0.1s linear, background-color 0.1s linear;
+    display: inline-flex;
+    flex: 1 1 auto;
+    text-align: left;
+  }
+
+  :host([data-render-mode="shadow"][invalid]) .slds-input_faux {
+    box-shadow: 0 0 0 1px inset var(--sds-g-color-error-base-50, #ea001e);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-input_faux:not(.slds-combobox__input-value) {
+    --slds-c-inputtext-text-color: var(--sds-g-color-neutral-base-50, #747474);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-input_faux.slds-is-disabled {
+    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    border-color: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    color: var(--sds-g-color-neutral-base-50, #747474);
+    cursor: not-allowed;
+    user-select: none;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-input_faux.slds-is-disabled:focus,:host([data-render-mode="shadow"]) 
+  .slds-input_faux.slds-is-disabled:active {
+    box-shadow: none;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-input_faux > span::before {
+    content: '';
+    display: inline-block;
+  }
+
+  /**
+   * Has Icon
+   */
+  :host([data-render-mode="shadow"]) .slds-input-has-icon {
+    position: relative;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-input__icon {
+    --slds-c-icon-sizing: 0.875rem;
+    --slds-c-icon-color-foreground-default: var(--sds-g-color-neutral-base-50, #747474);
+
+    position: absolute;
+    inset-block-start: 50%;
+    margin-top: calc((0.875rem * 0.5) * -1);
+    line-height: 1;
+    border: 0;
+    z-index: 2;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-input__icon:not(button) {
+    pointer-events: none;
+  }
+
+  /* Icon Left */
+  :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input__icon {
+    inset-inline-start: var(--sds-g-spacing-3, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input_faux {
+    padding-inline-start: var(--sds-g-spacing-6, 2rem);
+  }
+
+  /* Icon Right */
+  :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input__icon {
+    inset-inline-end: var(--sds-g-spacing-3, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input_faux {
+    padding-inline-end: var(--sds-g-spacing-6, 2rem);
+  }
+
+  /**
+   * Has Icon Group
+   */
+  :host([data-render-mode="shadow"]) .slds-input__icon-group {
+    position: absolute;
+    height: var(--sds-g-sizing-5, 1rem);
+
+    /* Subtle difference in height between light/native, we adjust here */
+    margin-block-start: calc(var(--sds-g-spacing-2, 0.5rem) * -1 - 1px);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-input__icon-group_right {
+    inset-inline-end: 0;
+    inset-block-start: 50%;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-input__icon-group_right .slds-input__icon_right {
+    inset-inline-end: var(--sds-g-spacing-2, 0.5rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-input__icon-group_right .slds-input__spinner {
+    inset-inline-end: var(--sds-g-spacing-5, 1.5rem);
+    inset-inline-start: auto;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-p-top_medium {
+    padding-top: var(--sds-g-spacing-4, 1rem)
+  }
+
+  :host([data-render-mode="shadow"]) .slds-p-bottom_medium {
+    padding-bottom: var(--sds-g-spacing-4, 1rem)
+  }
+
+  :host([data-render-mode="shadow"]) .slds-spinner_inline {
+    position: relative;
+  }
+}