lightning-base-components 1.21.1-alpha → 1.21.3-alpha

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

@@ -1,1422 +1,11 @@
-/* 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, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-left::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-left-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-left::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-left-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Top */
-    left: var(--sds-g-spacing-5, 1.5rem);
-    top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-left::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-left-corner::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-right::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-right-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Top */
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    left: auto;
-    right: var(--sds-g-spacing-5, 1.5rem);
-    top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-right-corner::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Bottom */
-    left: 50%;
-    bottom: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-left-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-left-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Bottom */
-    bottom: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    left: var(--sds-g-spacing-5, 1.5rem);
-    top: 100%;
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-left-corner::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-right-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-right-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Bottom */
-    inset: 100% auto calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1) var(--sds-g-spacing-5, 1.5rem);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-right-corner::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-  }
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Left */
-    top: 50%;
-    left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left::after {
-    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-top-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-top-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Left */
-    left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    top: var(--sds-g-spacing-5, 1.5rem);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-top-corner::after {
-    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-bottom-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-bottom-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Left */
-    left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    top: auto;
-    bottom: var(--sds-g-spacing-4, 1rem);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-bottom-corner::before {
-    margin-bottom: -1px;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-bottom-corner::after {
-    box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Right */
-    top: 50%;
-    right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right::after {
-    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-top-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-top-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Right */
-    right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    top: var(--sds-g-spacing-5, 1.5rem);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-top-corner::after {
-    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-bottom-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-bottom-corner::after {
-    width: var(--sds-g-spacing-4, 1rem);
-    height: var(--sds-g-spacing-4, 1rem);
-    position: absolute;
-    transform: rotate(45deg);
-    content: '';
-    background-color: inherit;
-
-    /* Position: Right */
-    right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    top: auto;
-    bottom: var(--sds-g-spacing-4, 1rem);
-    z-index: -1;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-bottom-corner::before {
-    margin-bottom: -1px;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-bottom-corner::after {
-    box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 16%);
-    z-index: -2;
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-left-corner {
-    border-radius: var(--sds-g-sizing-border-2, 2px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-left-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-left-corner::after {
-    left: var(--sds-g-spacing-3, 0.75rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left-corner {
-    border-radius: var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-2, 2px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-left-corner::after {
-    left: var(--sds-g-spacing-3, 0.75rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-right-corner {
-    border-radius: var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-2, 2px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-right-corner::after {
-    right: var(--sds-g-spacing-3, 0.75rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right-corner {
-    border-radius: var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-2, 2px) var(--sds-g-sizing-border-4, 4px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_bottom-right-corner::after {
-    right: var(--sds-g-spacing-3, 0.75rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top-corner {
-    border-radius: var(--sds-g-sizing-border-2, 2px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-top-corner::after {
-    top: var(--sds-g-spacing-3, 0.75rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top-corner {
-    border-radius: var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-2, 2px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-top-corner::after {
-    top: var(--sds-g-spacing-3, 0.75rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom-corner {
-    border-radius: var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-2, 2px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_left-bottom-corner::after {
-    bottom: var(--sds-g-spacing-1, 0.25rem);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom-corner {
-    border-radius: var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-4, 4px) var(--sds-g-sizing-border-2, 2px) var(--sds-g-sizing-border-4, 4px);
-}
-
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom-corner::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_right-bottom-corner::after {
-    bottom: var(--sds-g-spacing-1, 0.25rem);
-}
-
-@supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part~='dropdown'] {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    --_dropdown-size-x-small: 12rem;
-    --_dropdown-size-medium: var(--sds-g-sizing-15, 20rem);
-    --_dropdown-square-icon-small-boundary: var(--sds-g-sizing-7, 1.5rem);
-    --_nubbin-size-default: var(--sds-g-sizing-5, 1rem);
-    --_duration-quickly: 0.1s;
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-
-    --sds-c-overlay-color-background: var(
-      --slds-c-dropdown-color-background,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --sds-c-overlay-text-color: var(--slds-c-dropdown-text-color, var(--sds-g-color-neutral-base-10, #181818));
-    --sds-c-overlay-radius-border: var(--slds-c-dropdown-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-    --sds-c-overlay-sizing-border: var(--slds-c-dropdown-sizing-border, var(--sds-g-sizing-border-1, 1px));
-    --sds-c-overlay-color-border: var(--slds-c-dropdown-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    --sds-c-overlay-shadow: var(--slds-c-dropdown-shadow, 0 2px 3px 0 rgba(0, 0, 0, 16%));
-    --sds-c-overlay-spacing-inline-start: 0;
-    --sds-c-overlay-spacing-inline-end: 0;
-    --sds-c-overlay-spacing-block-start: var(
-      --slds-c-dropdown-spacing-blockstart,
-      var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
-    );
-    --sds-c-overlay-spacing-block-end: var(
-      --slds-c-dropdown-spacing-blockend,
-      var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
-    );
-
-    position: absolute;
-    z-index: 7000;
-    left: 50%;
-    float: left;
-    min-width: var(--slds-c-dropdown-sizing-width-min, 6rem);
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    max-width: var(--slds-c-dropdown-sizing-width-max, var(--_dropdown-size-medium));
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    /* stylelint-disable */
-    margin-block-start: calc(
-      var(--slds-c-dropdown-spacing-blockstart, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
-        2
-    );
-    margin-block-end: calc(
-      var(--slds-c-dropdown-spacing-blockend, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
-        2
-    );
-    /* stylelint-enable */
-    font-size: var(--slds-c-dropdown-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
-    border-style: solid;
-    transform: translateX(-50%);
-  }
-
-  /* May need to be moved into menu-item but doesn't appear supported atm */
-  :host([data-render-mode="shadow"]) mark {
-    font-weight: var(--sds-g-font-weight-bold, bold);
-    background-color: transparent;
-    color: inherit;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-assistive-text {
-    position: absolute !important;
-    margin: -1px !important;
-    border: 0 !important;
-    padding: 0 !important;
-    width: 1px !important;
-    height: 1px !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    text-transform: none !important;
-    white-space: nowrap !important;
-  }
-
-  :host([data-render-mode="shadow"].slds-dropdown-trigger),:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger {
-    position: relative;
-    display: inline-block; /* Required to expand to block children */
-  }
-
-  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown,:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger .slds-dropdown {
-    top: 100%;
-  }
-
-  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown_bottom,:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger .slds-dropdown_bottom {
-    top: auto;
-  }
-
-  /* Deal with positioning when target is just an icon */
-  :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'],:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'] {
-    left: (var(--sds-g-spacing-2, 0.5rem) * -1);
-  }
-
-  :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'],:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'] {
-    right: (var(--sds-g-spacing-2, 0.5rem) * -1);
-  }
-
-  :host([data-render-mode="shadow"].slds-dropdown-trigger_hover) .slds-dropdown,:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger_hover .slds-dropdown {
-    visibility: hidden;
-    opacity: 0;
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    transition: opacity var(--_duration-quickly) linear, visibility var(--_duration-quickly) linear;
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
-
-  :host([data-render-mode="shadow"].slds-dropdown-trigger_hover:hover),:host([data-render-mode="shadow"].slds-dropdown-trigger_hover:focus),:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger_hover:hover,:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger_hover:focus {
-    outline: 0;
-  }
-
-  :host([data-render-mode="shadow"].slds-dropdown-trigger_hover:hover) .slds-dropdown,:host([data-render-mode="shadow"].slds-dropdown-trigger_hover:focus) .slds-dropdown,:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger_hover:hover .slds-dropdown,:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger_hover:focus .slds-dropdown {
-    visibility: visible;
-    opacity: 1;
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    transition: opacity var(--_duration-quickly) linear, visibility var(--_duration-quickly) linear;
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
-
-  :host([data-render-mode="shadow"].slds-dropdown-trigger_click) .slds-dropdown,:host([data-render-mode="shadow"].slds-dropdown-trigger_click:hover) .slds-dropdown,:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger_click .slds-dropdown,:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger_click:hover .slds-dropdown {
-    display: none;
-  }
-
-  :host([data-render-mode="shadow"].slds-dropdown-trigger_click.slds-is-open) .slds-dropdown,:host([data-render-mode="shadow"]) 
-  .slds-dropdown-trigger_click.slds-is-open .slds-dropdown {
-    display: block;
-    visibility: visible;
-    opacity: 1;
-  }
-
-  /* Adjust position of dropdown with top nubbin */
-  :host([data-render-mode="shadow"]) [part~='dropdown'][class*='slds-nubbin_top'] {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    margin-top: calc(var(--_nubbin-size-default) * 0.5);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
-
-  /* Adjust position of dropdown with bottom nubbin */
-  :host([data-render-mode="shadow"]) [part~='dropdown'][class*='slds-nubbin_bottom'] {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    margin-bottom: calc(var(--_nubbin-size-default) * 0.5);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_left {
-    left: 0;
-    right: auto;
-    transform: translateX(0);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_right {
-    left: auto;
-    right: 0;
-    transform: translateX(0);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_bottom {
-    bottom: 100%;
-  }
-
-  /* Width */
-  :host([data-render-mode="shadow"]) .slds-dropdown_xx-small {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    min-width: var(--dropdown-size-xx-small);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_x-small {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    min-width: var(--_dropdown-size-x-small);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_small {
-    min-width: var(--sds-g-sizing-14, 15rem);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_medium {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    min-width: var(--_dropdown-size-medium);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_large {
-    min-width: 25rem;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_fluid {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    min-width: var(
-      --_dropdown-size-x-small
-    ); /* Prevents menu from being illegible when input's width is small */
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    max-width: 100%;
-    width: 100%;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_length-5 {
-    max-height: calc(
-      (
-          (var(--slds-c-dropdown-font-size, var(--sds-g-font-scale-neg-3, 0.75rem)) * var(--sds-g-font-lineheight, 1.5)) +
-            var(--sds-g-spacing-4, 1rem)
-        ) * 5
-    );
-    overflow-y: auto;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_length-7 {
-    max-height: calc(
-      (
-          (var(--slds-c-dropdown-font-size, var(--sds-g-font-scale-neg-3, 0.75rem)) * var(--sds-g-font-lineheight, 1.5)) +
-            var(--sds-g-spacing-4, 1rem)
-        ) * 7
-    );
-    overflow-y: auto;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_length-10 {
-    max-height: calc(
-      (
-          (var(--slds-c-dropdown-font-size, var(--sds-g-font-scale-neg-3, 0.75rem)) * var(--sds-g-font-lineheight, 1.5)) +
-            var(--sds-g-spacing-4, 1rem)
-        ) * 10
-    );
-    overflow-y: auto;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_length-with-icon-5 {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 5);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    overflow-y: auto;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_length-with-icon-7 {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 7);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    overflow-y: auto;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_length-with-icon-10 {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 10);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    overflow-y: auto;
-  }
-
-  :host([data-render-mode="shadow"]) [dir='rtl'] .slds-dropdown_center {
-    left: auto;
-    right: auto;
-    transform: translateX(calc(50% - (0.875rem / 2)));
-  }
-
-  /**
-   * Variant - Inverse
-   *
-   * dropdown_inverse is not currently supported in LBC. button-icon inverse
-   * variant class is loaded, but nothing happens to dropdown, so these
-   * styles are currently dormant and have not been fully refactored to
-   * native shadow DOM.
-   */
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_inverse {
-    background: var(--sds-g-color-brand-base-10, #001639);
-    border-color: var(--sds-g-color-brand-base-10, #001639);
-    color: var(--sds-g-color-neutral-base-100, #ffffff);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a {
-    color: var(--sds-g-color-neutral-base-100, #ffffff);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a:hover,:host([data-render-mode="shadow"]) 
-  .slds-dropdown_inverse .slds-dropdown__item > a:focus {
-    color: var(--sds-g-color-neutral-base-90, #e5e5e5);
-    background-color: transparent;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a:active {
-    color: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    background-color: transparent;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled='true'] {
-    color: var(--sds-g-color-palette-blue-20, #032d60);
-    cursor: default;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled='true']:hover {
-    background-color: transparent;
-  }
-
-  /**
-   * Variant - Actions
-   *
-   * Appears to be unsupported, not refactored like variant - inverse above.
-   */
-  :host([data-render-mode="shadow"]) .slds-dropdown_actions a {
-    color: var(--sds-g-color-brand-base-50, #0176d3);
-  }
-
-  /* These .slds-has-submenu classes for on the list item but .slds-dropdown_submenu goes on the div where .slds-dropdown exists */
-  :host([data-render-mode="shadow"]) .slds-has-submenu .slds-dropdown_submenu {
-    top: 0;
-    transform: none;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-has-submenu .slds-dropdown_submenu-right {
-    left: 100%;
-    margin-left: var(--sds-g-spacing-1, 0.25rem);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-has-submenu .slds-dropdown_submenu-left {
-    left: 100%;
-    margin-left: var(--sds-g-spacing-1, 0.25rem);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-has-submenu .slds-dropdown_submenu-bottom {
-    top: auto;
-    bottom: 0;
-    margin-bottom: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
-  }
-
-  /**
-   * is-loading - spinner
-   *
-   * Attr is-loading passed to button-menu which loads lightning-spinner
-   * and triggers the utility class. We tap into it and use it to make
-   * space for the spinner which is out of the flow of the document.
-   * This is bit of a hack until utilities are figured out.
-   */
-  :host([data-render-mode="shadow"]) .slds-p-vertical_large {
-    padding: var(--sds-g-spacing-5, 1.5rem);
-  }
-}
-
-@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-inlinestart,
-            var(--sds-g-spacing-3, 0.75rem));
-        padding-inline-end: var(
-            --slds-c-inputtext-spacing-inlineend,
-            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-inlineend: 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 (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-inlinestart: 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-inlineend: 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-inlinestart: var(--sds-g-spacing-6, 2rem);
-        --slds-c-inputtext-spacing-inlineend: 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: '') {
-   /* 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 {
-     padding-inline-start: 0.125rem;
-   }
-
-   /* 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;
-     margin-block-end: 0.125rem;
-   }
-
-   /* 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;
-     padding-block-end: 0.125rem;
-     padding-inline: 0;
-   }
-
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
-     padding-block-start: 0.125rem;
-     padding-block-end: 0;
-     padding-inline: 0.125rem;
-   }
-
-   /* 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 (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;
@@ -1427,6 +16,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Combobox Container
    */
+
   :host([data-render-mode="shadow"]) .slds-combobox_container {
     display: flex;
     flex-direction: column;
@@ -1436,18 +26,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * 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);
+    padding-inline-start: var(--slds-g-spacing-3);
+    padding-inline-end: var(--slds-g-spacing-4);
     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));
+    border: var(--slds-c-inputtext-sizing-border, var(--slds-g-sizing-border-1)) solid
+      var(--slds-c-inputtext-color-border, var(--slds-g-color-border-1));
+    border-radius: var(--slds-c-inputtext-radius, var(--slds-g-radius-border-2));
+    background-color: var(--slds-c-inputtext-color-background, var(--slds-g-color-surface-container-1));
     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;
@@ -1457,17 +48,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   :host([data-render-mode="shadow"][invalid]) .slds-input_faux {
-    box-shadow: 0 0 0 1px inset var(--sds-g-color-error-base-50, #ea001e);
+    box-shadow: 0 0 0 1px inset var(--slds-g-color-error-1);
   }
 
   :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);
+    --slds-c-inputtext-text-color: var(--slds-g-color-on-surface-1);
   }
 
   :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);
+    background-color: var(--slds-g-color-disabled-container-1);
+    border-color: var(--slds-g-color-border-1);
+    color: var(--slds-g-color-on-surface-1);
     cursor: not-allowed;
     user-select: none;
   }
@@ -1482,16 +73,26 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     display: inline-block;
   }
 
+  /**
+   * Combobox Focus State: When rendering `button` instead of `input`
+   */
+
+  :host([data-render-mode="shadow"]) .slds-input_faux:focus-within {
+    border-color: var(--slds-g-color-brand-base-60);
+    box-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-1);
+  }
+
   /**
    * 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);
+    --slds-c-icon-color-foreground-default: var(--slds-g-color-on-surface-1);
 
     position: absolute;
     inset-block-start: 50%;
@@ -1506,32 +107,35 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   /* 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);
+    inset-inline-start: var(--slds-g-spacing-3);
   }
 
   :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input_faux {
-    padding-inline-start: var(--sds-g-spacing-6, 2rem);
+    padding-inline-start: var(--slds-g-spacing-6);
   }
 
   /* 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);
+    inset-inline-end: var(--slds-g-spacing-3);
   }
 
   :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input_faux {
-    padding-inline-end: var(--sds-g-spacing-6, 2rem);
+    padding-inline-end: var(--slds-g-spacing-6);
   }
 
   /**
    * Has Icon Group
    */
+
   :host([data-render-mode="shadow"]) .slds-input__icon-group {
     position: absolute;
-    height: var(--sds-g-sizing-5, 1rem);
+    height: var(--slds-g-sizing-5);
 
     /* Subtle difference in height between light/native, we adjust here */
-    margin-block-start: calc(var(--sds-g-spacing-2, 0.5rem) * -1 - 1px);
+    margin-block-start: calc(var(--slds-g-spacing-2) * -1 - 1px);
   }
 
   :host([data-render-mode="shadow"]) .slds-input__icon-group_right {
@@ -1540,23 +144,92 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   :host([data-render-mode="shadow"]) .slds-input__icon-group_right .slds-input__icon_right {
-    inset-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    inset-inline-end: var(--slds-g-spacing-2);
   }
 
   :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-end: var(--slds-g-spacing-5);
     inset-inline-start: auto;
   }
 
   :host([data-render-mode="shadow"]) .slds-p-top_medium {
-    padding-top: var(--sds-g-spacing-4, 1rem)
+    padding-top: var(--slds-g-spacing-4);
   }
 
   :host([data-render-mode="shadow"]) .slds-p-bottom_medium {
-    padding-bottom: var(--sds-g-spacing-4, 1rem)
+    padding-bottom: var(--slds-g-spacing-4);
   }
 
   :host([data-render-mode="shadow"]) .slds-spinner_inline {
     position: relative;
   }
-}
+
+  /*
+    Grouped combobox data filter styles
+  */
+
+  :host([data-render-mode="shadow"][data-filter]) button.slds-combobox__input {
+    width: 7.5rem;
+    transition: width 80ms linear;
+
+  }
+
+  :host([data-render-mode="shadow"][data-filter]) button.slds-combobox__input:focus {
+    width: 10rem;
+  }
+
+  :host([data-render-mode="shadow"][data-filter]) .slds-truncate {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--slds-g-spacing-3);
+    color: var(--slds-g-color-on-surface-1);
+  }
+
+  :host([data-render-mode="shadow"][data-filter-on]) [part="input-container"] {
+    border-start-end-radius: var(--slds-g-sizing-border-4);
+    border-end-end-radius: var(--slds-g-sizing-border-4);
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  :host([data-render-mode="shadow"][data-filter]) .slds-combobox__input {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-start-start-radius: var(--slds-g-sizing-border-4);
+    border-end-start-radius: var(--slds-g-sizing-border-4);
+  }
+
+  /*
+    combobox with input-pill styles
+  */
+
+  :host([data-render-mode="shadow"][data-input-pill]) [part="input"] {
+    box-shadow: 0 0 0 var(--slds-g-sizing-border-2) var(--slds-g-color-surface-container-1) inset, 0 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-border-base-1, var(--slds-g-color-on-accent-1)) inset;
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    border-radius: var(--slds-c-inputtext-radius, var(--slds-g-radius-border-2));
+  }
+
+  :host([data-render-mode="shadow"][data-input-pill]) .slds-combobox__input-entity-icon {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: calc(var(--slds-g-spacing-1) + var(--slds-g-sizing-border-1));
+    z-index: 2;
+    transform: translateY(-50%)
+  }
+
+  :host([data-render-mode="shadow"][data-input-pill]) .slds-input__icon-group_right {
+    inset-inline-end: calc(var(--slds-g-spacing-1) + var(--slds-g-sizing-border-1));
+
+  }
+
+  :host([data-render-mode="shadow"][data-input-pill]) .slds-button_icon {
+    color: var(--slds-g-color-neutral-base-50, var(--slds-g-color-on-surface-1));
+  }
+
+  :host([data-render-mode="shadow"][data-input-pill]) [part="input-container"]:focus-within {
+    --sds-c-inputtext-color-border:
+      var(--slds-g-color-brand-base-60);
+    --sds-c-inputtext-shadow: none;
+  }