lightning-base-components 1.18.7-alpha → 1.18.7-ssr

package/src/lightning/badge/badge.slds.css

@@ -0,0 +1,73 @@
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) [part="badge"] {
+    /**
+      * Remap to SLDS blueprint hooks for parity
+      * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+      *
+      */
+    --slds-c-badge-line-height: var(var(--slds-c-badge-font-lineheight));
+
+    display: inline-flex;
+    align-items: center;
+    padding: var(--sds-g-spacing-1, 0.25rem) var(--sds-g-spacing-2, 0.5rem);
+    color: var(--slds-c-badge-text-color, var(--sds-g-color-neutral-base-10, #181818));
+    font-size: var(--slds-c-badge-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
+    font-weight: var(--sds-g-font-weight-7, 700);
+    line-height: var(--slds-c-badge-font-lineheight, normal);
+    white-space: nowrap;
+    border-width: var(--slds-c-badge-sizing-border, var(--sds-g-sizing-border-1, 1px));
+    border-style: solid;
+    border-color: var(--slds-c-badge-color-border, transparent);
+    border-radius: var(--slds-c-badge-radius-border, 15rem);
+    background-color: var(--slds-c-badge-color-background, var(--sds-g-color-neutral-base-95, #f3f3f3));
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"]:empty {
+    padding: 0;
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--slds-c-badge-icon-color-foreground, var(--slds-g-color-neutral-base-50, var(--sds-g-color-neutral-base-50, #747474)));
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_inverse {
+    --slds-c-badge-icon-color-foreground: var(--slds-c-badge-icon-inverse-color-foreground, currentColor);
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_left {
+    margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
+  }
+  
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_right {
+    margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] lightning-primitive-icon {
+    vertical-align: middle;
+  }
+
+  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class. 
+     However, the public API for this component does not expose an attribute for this class. Establishing a programmatic 
+     mapping between the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
+  :host([data-render-mode="shadow"].slds-badge_inverse) {
+    --slds-c-badge-color-background: var(--slds-c-badge-inverse-color-background, var(--slds-g-color-neutral-base-50, var(--sds-g-color-neutral-base-50, #747474)));
+    --slds-c-badge-text-color: var(--slds-c-badge-inverse-text-color, var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff)));
+  }
+
+  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class. 
+     However, the public API for badge does not expose an attribute for this class. Establishing a programmatic mapping between
+     the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
+  :host([data-render-mode="shadow"].slds-badge_lightest) {
+    --slds-c-badge-color-background: var(--slds-c-badge-lightest-color-background, var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff)));
+    --slds-c-badge-color-border: var(--slds-c-badge-lightest-color-border, var(--slds-g-color-border-base-1, var(--sds-g-color-neutral-base-90, #e5e5e5)));
+  }
+
+  :host([data-render-mode="shadow"].slds-badge:not(:first-of-type)) {
+    margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
+  }
+}

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

@@ -872,7 +872,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    /**
    * Input Text
    */
-    :host([data-render-mode="shadow"]) [part~='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,
@@ -918,23 +918,23 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    /**
    * Input Container
    */
-    :host([data-render-mode="shadow"]) [part~='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'] {
+    :host([data-render-mode="shadow"]) [part='input-container'][type~='range'] {
         border: none;
         display: inline-block;
     }
 
-    :host([data-render-mode="shadow"]) [part~='input'][type~='range'] {
+    :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 {
+    :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);
@@ -947,7 +947,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    /**
    * Input
    */
-    :host([data-render-mode="shadow"]) [part~='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));
@@ -961,8 +961,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    /**
    * Focus / active State
    */
-    :host([data-render-mode="shadow"]) [part~="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
-    [part~="input-container"]:active {
+    :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);
@@ -973,7 +973,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    /**
    * Read Only State
    */
-    :host([data-render-mode="shadow"][readonly]) [part~='input-text'] {
+    :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;
@@ -988,7 +988,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * 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'] {
+    :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);
@@ -1001,7 +1001,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * 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 {
+    :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);
@@ -1013,7 +1013,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    *
    * Both parts form the visible form control.
    */
-    :host([data-render-mode="shadow"][disabled]) [part~='input-container'],:host([data-render-mode="shadow"][disabled]) [part~='input'] {
+    :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);
@@ -1023,10 +1023,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /**
    * Label
    *
-   * Add [part~='input-text'] to increase specificity and
-   * avoid collisions with other components using [part~='label'] (e.g. slds-input-checkbox)
+   * 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'] {
+    :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(
@@ -1050,7 +1050,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * 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'] {
+    :host([data-render-mode="shadow"]) [part='start'] {
         --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
@@ -1067,11 +1067,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * 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'] {
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part='input-text'] {
             display: block;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='label'] {
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part='label'] {
             float: left;
 
             /* TODO: Get rid of these magic numbers */
@@ -1079,11 +1079,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-container'] {
+        :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'] {
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part='inline-help'] {
             float: left;
             padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         }
@@ -1093,7 +1093,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         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;
     }
@@ -1145,7 +1145,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         --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.
  *

package/src/lightning/baseCombobox/baseCombobox.css

@@ -1,6 +1,6 @@
-/* @import 'lightning/sldsCommon';
+@import 'lightning/sldsCommon';
 @import './base-combobox.slds.css';
-@import './spinner.slds.css'; */
+@import './spinner.slds.css';
 
 .slds-inline-logo {
     height: 1rem;

package/src/lightning/baseCombobox/baseCombobox.html

@@ -17,9 +17,9 @@
                             <input id="combobox-input"
                                 class={computedInputClass}
                                 type="text"
-                                role="combobox"
+                                role={customRole}
                                 aria-expanded={computedAriaExpanded}
-                                aria-haspopup="listbox"
+                                aria-haspopup={customAriaHasPopup}
                                 required={required}
                                 readonly={_inputAriaReadOnly}
                                 autocomplete={autocomplete}
@@ -48,9 +48,9 @@
                         type="button"
                         class={computedInputClass}
                         aria-expanded={computedAriaExpanded}
-                        aria-haspopup="listbox"
+                        aria-haspopup={customAriaHasPopup}
                         name={name}
-                        role="combobox"
+                        role={customRole}
                         data-value={computedInputValue}
                         disabled={disabled}
                         aria-label={computedButtonTriggerAriaLabel}
@@ -147,13 +147,9 @@
                         </template>
                     </template>
                     <template if:true={showDropdownActivityIndicator}>
-                        <div role="presentation" class="slds-listbox__item">
-                            <div class="slds-align_absolute-center slds-p-top_medium">
-                                <div role="status" class="slds-spinner slds-spinner_x-small slds-spinner_inline">
-                                    <span class="slds-assistive-text">{i18n.loadingText}</span>
-                                    <div class="slds-spinner__dot-a"></div>
-                                    <div class="slds-spinner__dot-b"></div>
-                                </div>
+                        <div role="presentation" class="slds-listbox__item slds-spinner_inline">
+                            <div class="slds-align_absolute-center slds-p-top_medium slds-p-bottom_medium">
+                                <lightning-spinner size="x-small" alternative-text={i18n.loadingText}></lightning-spinner>
                             </div>
                         </div>
                     </template>

package/src/lightning/baseCombobox/baseCombobox.js

@@ -3,7 +3,8 @@ import labelDeselectOptionKeyboard from '@salesforce/label/LightningCombobox.des
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelPillCloseButtonAlternativeText from '@salesforce/label/LightningCombobox.pillCloseButtonAlternativeText';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { handleKeyDownOnInput } from './keyboard';
 import { BaseComboboxEvents } from './baseComboboxEvents';
 import { classSet } from 'lightning/utils';
@@ -20,7 +21,7 @@ import {
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
 import { VARIANT } from 'lightning/inputUtils';
 import AriaObserver from 'lightning/ariaObserver';
-
+import { isCSR } from 'lightning/utilsPrivate';
 const i18n = {
     ariaSelectedOptions: labelAriaSelectedOptions,
     deselectOptionKeyboard: labelDeselectOptionKeyboard,
@@ -32,6 +33,8 @@ const i18n = {
 const SMALL_MIN_HEIGHT = '2.25rem';
 const MEDIUM_MIN_HEIGHT = '6.75rem';
 const INPUT_ELEMENT_SELECTOR = '.slds-combobox__input';
+const INPUT_PART_ELEMENT_SELECTOR = '[part~="input-text"]';
+const FAUX_INPUT_BUTTON_ELEMENT_SELECTOR = `${INPUT_ELEMENT_SELECTOR}.slds-input_faux`;
 
 /**
  * Breakpoint when viewport height doesn't fit 10 items in the dropdown
@@ -46,8 +49,9 @@ const ARIA_LABEL = 'aria-label';
 const ARIA_ACTIVEDESCENDANT = 'aria-activedescendant';
 const ARIA_INVALID = 'aria-invalid';
 
-export default class LightningBaseCombobox extends LightningElement {
+export default class LightningBaseCombobox extends LightningShadowBaseClass {
     static delegatesFocus = true;
+    static validationOptOut = ['class'];
 
     /**
      * Controls auto-filling of the input. Set the attribute to pass
@@ -73,23 +77,24 @@ export default class LightningBaseCombobox extends LightningElement {
     @api required = false;
     @api placeholder = i18n.placeholder;
     @api inputLabel;
+    @api customRole = 'combobox';
+    @api customAriaHasPopup = 'listbox';
 
     @api name;
     @api inputPill;
     @api attributionLogoUrl;
     @api attributionLogoAssistiveText;
 
-    @track _showDropdownActivityIndicator = false;
+    _showDropdownActivityIndicator = false;
     @track _items = [];
-    @track _disabled = false;
-    @track _dropdownVisible = false;
-    @track _hasDropdownOpened = false;
-    @track _highlightedOptionElementId = null;
-    @track _variant;
-    @track _dropdownHeight = 'standard';
-    @track _readonly = false;
-    @track _logoLoaded = false;
-
+    _disabled = false;
+    _dropdownVisible = false;
+    _hasDropdownOpened = false;
+    _highlightedOptionElementId = null;
+    _variant;
+    _dropdownHeight = 'standard';
+    _readonly = false;
+    _logoLoaded = false;
     _inputDescribedBy = [];
     _inputAriaControls;
     _activeElementDomId;
@@ -98,11 +103,13 @@ export default class LightningBaseCombobox extends LightningElement {
     originDisableDefaultHighlight;
     privateDisableDefaultHighlight;
     _editingMode = false;
+    _connected = false;
+    ariaObserver = null;
 
     constructor() {
         super();
         this._events = new BaseComboboxEvents(this);
-        this.ariaObserver = new AriaObserver(this);
+        this.setupAriaObserverIfAbsent();
     }
 
     renderedCallback() {
@@ -114,19 +121,16 @@ export default class LightningBaseCombobox extends LightningElement {
                 },
             })
         );
-
-        if (this.isConnected) {
-            this.ariaObserver.sync();
-        }
-
+        this.syncAriaObserver();
         this.synchronizeA11y();
     }
 
     connectedCallback() {
-        if (!this.ariaObserver) {
-            this.ariaObserver = new AriaObserver(this);
+        super.connectedCallback();
+        this.setupAriaObserverIfAbsent();
+        if (isCSR) {
+            this.overrideDropdownAlignment();
         }
-        this.overrideDropdownAlignment();
         this.classList.add('slds-combobox_container');
         this._connected = true;
         this._keyboardInterface = this.dropdownKeyboardInterface();
@@ -135,9 +139,19 @@ export default class LightningBaseCombobox extends LightningElement {
     disconnectedCallback() {
         this._connected = false;
         this._listBoxElementCache = undefined;
-        if (this.ariaObserver) {
+        this.removeAriaObserver();
+    }
+
+    setupAriaObserverIfAbsent() {
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+        }
+    }
+
+    removeAriaObserver() {
+        if (this.ariaObserver && this.ariaObserver.disconnect) {
             this.ariaObserver.disconnect();
-            this.ariaObserver = undefined;
+            this.ariaObserver = null;
         }
     }
 
@@ -160,6 +174,15 @@ export default class LightningBaseCombobox extends LightningElement {
         this.connectAriaControls();
     }
 
+    syncAriaObserver() {
+        this.setupAriaObserverIfAbsent();
+        const ariaObserverSyncExists =
+            this.ariaObserver && this.ariaObserver.sync;
+        if (this.isConnected && ariaObserverSyncExists) {
+            this.ariaObserver.sync();
+        }
+    }
+
     connectAriaControls() {
         this.connectAriaAttribute({
             attribute: ARIA_CONTROLS,
@@ -169,15 +192,18 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     connectAriaAttribute(params) {
-        const relatedNodeIds = Array.isArray(params.relatedNodeIds)
-            ? params.relatedNodeIds.map((el) => getRealDOMId(el)).join(' ')
-            : getRealDOMId(params.relatedNodeIds);
-
-        this.ariaObserver.connect({
-            ...params,
-            targetSelector: INPUT_ELEMENT_SELECTOR,
-            relatedNodeIds,
-        });
+        this.setupAriaObserverIfAbsent();
+        if (this.ariaObserver && this.ariaObserver.connect) {
+            const relatedNodeIds = Array.isArray(params.relatedNodeIds)
+                ? params.relatedNodeIds.map((el) => getRealDOMId(el)).join(' ')
+                : getRealDOMId(params.relatedNodeIds);
+
+            this.ariaObserver.connect({
+                ...params,
+                targetSelector: INPUT_ELEMENT_SELECTOR,
+                relatedNodeIds,
+            });
+        }
     }
 
     @api
@@ -228,7 +254,10 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     set rootAriaNode(root) {
-        this.ariaObserver.root = root;
+        this.setupAriaObserverIfAbsent();
+        if (this.ariaObserver) {
+            this.ariaObserver.root = root;
+        }
     }
 
     get inputId() {
@@ -572,7 +601,9 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     get dropdownElement() {
-        return this.template.querySelector('[data-dropdown-element]');
+        return isCSR
+            ? this.template.querySelector('[data-dropdown-element]')
+            : null;
     }
 
     get i18n() {
@@ -917,7 +948,9 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     get inputElement() {
-        return this.template.querySelector(INPUT_ELEMENT_SELECTOR);
+        return isCSR
+            ? this.template.querySelector(INPUT_ELEMENT_SELECTOR)
+            : null;
     }
 
     // remove-next-line-for-c-namespace
@@ -930,8 +963,25 @@ export default class LightningBaseCombobox extends LightningElement {
             this._autoPosition = new AutoPosition(this);
         }
 
+        // when using dropdown-alignment='auto' positioning and standard variant lighting-combobox
+        // the selector for 'target' is determined by this.isUserInputDisabled
+        // when TRUE the target is a BUTTON element acting as a faux / fake INPUT element
+        // when FALSE the target is an INPUT element
+        // NOTE: isUserInputDisabled is NOT determined by combobox.disabled
+        // instead isUserInputDisabled is determined by
+        // this.isStandardVariant && !this.isAutocompleteEnabled (which is an internal variable)
+        // this means that the INPUT is often NOT present, and instead a BUTTON is
+        // this selector for .start({ target }) is used to
+        // position the element from so this.isUserInputDisabled
+        // must be taken into account so the proper selector can be used
+        // the 'element' below is always the same without IF/ELSE, so there
+        // is not a need to switch between selectors
+        const selectorToUse = this.isUserInputDisabled
+            ? FAUX_INPUT_BUTTON_ELEMENT_SELECTOR
+            : INPUT_PART_ELEMENT_SELECTOR;
+
         this._autoPosition.start({
-            target: () => this.template.querySelector("[part~='input-text']"),
+            target: () => this.template.querySelector(selectorToUse),
             element: () => this.template.querySelector('div.slds-dropdown'),
             align: {
                 horizontal: Direction.Left,