docs + cleanup wrapper

src/components/select/select.styles.ts

@@ -32,28 +32,22 @@ export default css`
   }
 
   /* Combobox */
-  .select__combobox-wrapper {
-    flex: 1 0 auto;
+  .select__combobox {
+    flex: 1;
     display: flex;
     width: 100%;
     min-width: 0;
+    position: relative;
+    align-items: stretch;
+    justify-content: start;
     font-family: var(--sl-input-font-family);
     font-weight: var(--sl-input-font-weight);
     letter-spacing: var(--sl-input-letter-spacing);
     vertical-align: middle;
-    cursor: text;
+    overflow: hidden;
+    cursor: pointer;
     transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow,
       var(--sl-transition-fast) background-color;
-    cursor: pointer;
-  }
-
-  .select__combobox {
-    flex: 1;
-    display: flex;
-    position: relative;
-    align-items: stretch;
-    justify-content: start;
-    overflow: hidden;
   }
 
   .select__display-input {
@@ -83,12 +77,12 @@ export default css`
   }
 
   /* Standard selects */
-  .select--standard .select__combobox-wrapper {
+  .select--standard .select__combobox {
     background-color: var(--sl-input-background-color);
     border: solid var(--sl-input-border-width) var(--sl-input-border-color);
   }
 
-  .select--standard.select--disabled .select__combobox-wrapper {
+  .select--standard.select--disabled .select__combobox {
     background-color: var(--sl-input-background-color-disabled);
     border-color: var(--sl-input-border-color-disabled);
     color: var(--sl-input-color-disabled);
@@ -97,38 +91,38 @@ export default css`
     outline: none;
   }
 
-  .select--standard:not(.select--disabled).select--open .select__combobox-wrapper,
-  .select--standard:not(.select--disabled).select--focused .select__combobox-wrapper {
+  .select--standard:not(.select--disabled).select--open .select__combobox,
+  .select--standard:not(.select--disabled).select--focused .select__combobox {
     background-color: var(--sl-input-background-color-focus);
     border-color: var(--sl-input-border-color-focus);
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
   }
 
   /* Filled selects */
-  .select--filled .select__combobox-wrapper {
+  .select--filled .select__combobox {
     border: none;
     background-color: var(--sl-input-filled-background-color);
     color: var(--sl-input-color);
   }
 
-  .select--filled:hover:not(.select--disabled) .select__combobox-wrapper {
+  .select--filled:hover:not(.select--disabled) .select__combobox {
     background-color: var(--sl-input-filled-background-color-hover);
   }
 
-  .select--filled.select--disabled .select__combobox-wrapper {
+  .select--filled.select--disabled .select__combobox {
     background-color: var(--sl-input-filled-background-color-disabled);
     opacity: 0.5;
     cursor: not-allowed;
   }
 
-  .select--filled:not(.select--disabled).select--open .select__combobox-wrapper,
-  .select--filled:not(.select--disabled).select--focused .select__combobox-wrapper {
+  .select--filled:not(.select--disabled).select--open .select__combobox,
+  .select--filled:not(.select--disabled).select--focused .select__combobox {
     background-color: var(--sl-input-filled-background-color-focus);
     outline: var(--sl-focus-ring);
   }
 
   /* Sizes */
-  .select--small .select__combobox-wrapper {
+  .select--small .select__combobox {
     border-radius: var(--sl-input-border-radius-small);
     font-size: var(--sl-input-font-size-small);
     min-height: var(--sl-input-height-small);
@@ -143,7 +137,7 @@ export default css`
     margin-inline-end: var(--sl-input-spacing-small);
   }
 
-  .select--medium .select__combobox-wrapper {
+  .select--medium .select__combobox {
     border-radius: var(--sl-input-border-radius-medium);
     font-size: var(--sl-input-font-size-medium);
     height: var(--sl-input-height-medium);
@@ -158,7 +152,7 @@ export default css`
     margin-inline-end: var(--sl-input-spacing-medium);
   }
 
-  .select--large .select__combobox-wrapper {
+  .select--large .select__combobox {
     border-radius: var(--sl-input-border-radius-large);
     font-size: var(--sl-input-font-size-large);
     min-height: var(--sl-input-height-large);
@@ -174,15 +168,15 @@ export default css`
   }
 
   /* Pills */
-  .select--pill.select--small .select__combobox-wrapper {
+  .select--pill.select--small .select__combobox {
     border-radius: var(--sl-input-height-small);
   }
 
-  .select--pill.select--medium .select__combobox-wrapper {
+  .select--pill.select--medium .select__combobox {
     border-radius: var(--sl-input-height-medium);
   }
 
-  .select--pill.select--large .select__combobox-wrapper {
+  .select--pill.select--large .select__combobox {
     border-radius: var(--sl-input-height-large);
   }
 

src/components/select/select.ts

@@ -11,6 +11,8 @@ import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
 import { LocalizeController } from '../../utilities/localize';
+import '../icon/icon';
+import '../popup/popup';
 import styles from './select.styles';
 import type { ShoelaceFormControl } from '../../internal/shoelace-element';
 import type SlOption from '../option/option';
@@ -24,8 +26,10 @@ import type { CSSResultGroup } from 'lit';
  * @status stable
  *
  * @dependency sl-icon
+ * @dependency sl-popup
  *
  * @slot - The select's options in the form of menu items.
+ * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
  *
  * @event sl-change - Emitted when the control's value changes.
  * @event sl-clear - Emitted when the control's value is cleared.
@@ -41,6 +45,12 @@ import type { CSSResultGroup } from 'lit';
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The select's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
+ * @csspart listbox - The listbox container where options are slotted.
+ * @csspart clear-button - The clear button.
+ * @csspart expand-icon - The container that wraps the expand icon.
  */
 @customElement('sl-select')
 export default class SlSelect extends ShoelaceElement implements ShoelaceFormControl {
@@ -81,6 +91,9 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
   /** Disables the select control. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** Adds a clear button when the select is not empty. */
+  @property({ type: Boolean }) clearable = false;
+
   /**
    * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
    * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
@@ -114,9 +127,6 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
   /** The select's required attribute. */
   @property({ type: Boolean, reflect: true }) required = false;
 
-  /** Adds a clear button when the select is not empty. */
-  @property({ type: Boolean }) clearable = false;
-
   connectedCallback() {
     super.connectedCallback();
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
@@ -568,7 +578,6 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
 
         <div part="form-control-input" class="form-control-input">
           <sl-popup
-            part="base"
             class=${classMap({
               select: true,
               'select--standard': true,
@@ -592,47 +601,47 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
             auto-size-padding="10"
           >
             <div
+              part="combobox"
+              class="select__combobox"
               slot="anchor"
-              class="select__combobox-wrapper"
               @keydown=${this.handleComboboxKeyDown}
               @mousedown=${this.handleComboboxMouseDown}
             >
-              <div class="select__combobox">
-                <slot name="prefix" class="select__prefix"></slot>
+              <slot part="prefix" name="prefix" class="select__prefix"></slot>
 
-                <input
-                  class="select__display-input"
-                  type="text"
-                  placeholder=${this.placeholder}
-                  .disabled=${this.disabled}
-                  .value=${this.displayLabel}
-                  autocomplete="off"
-                  spellcheck="false"
-                  autocapitalize="off"
-                  readonly
-                  aria-controls="listbox"
-                  aria-expanded=${this.open ? 'true' : 'false'}
-                  aria-haspopup="listbox"
-                  aria-labelledby="label"
-                  aria-disabled=${this.disabled ? 'true' : 'false'}
-                  aria-describedby="help-text"
-                  role="combobox"
-                  tabindex="0"
-                  @focus=${this.handleFocus}
-                  @blur=${this.handleBlur}
-                />
+              <input
+                part="display-input"
+                class="select__display-input"
+                type="text"
+                placeholder=${this.placeholder}
+                .disabled=${this.disabled}
+                .value=${this.displayLabel}
+                autocomplete="off"
+                spellcheck="false"
+                autocapitalize="off"
+                readonly
+                aria-controls="listbox"
+                aria-expanded=${this.open ? 'true' : 'false'}
+                aria-haspopup="listbox"
+                aria-labelledby="label"
+                aria-disabled=${this.disabled ? 'true' : 'false'}
+                aria-describedby="help-text"
+                role="combobox"
+                tabindex="0"
+                @focus=${this.handleFocus}
+                @blur=${this.handleBlur}
+              />
 
-                <input
-                  class="select__value-input"
-                  type="text"
-                  ?disabled=${this.disabled}
-                  ?required=${this.required}
-                  .value=${this.value}
-                  tabindex="-1"
-                  aria-hidden="true"
-                  @focus=${() => this.focus()}
-                />
-              </div>
+              <input
+                class="select__value-input"
+                type="text"
+                ?disabled=${this.disabled}
+                ?required=${this.required}
+                .value=${this.value}
+                tabindex="-1"
+                aria-hidden="true"
+                @focus=${() => this.focus()}
+              />
 
               ${hasClearIcon
                 ? html`
@@ -652,11 +661,9 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
                   `
                 : ''}
 
-              <span part="expand-icon" class="select__expand-icon">
-                <slot part="expand-icon" name="expand-icon">
-                  <sl-icon library="system" name="chevron-down"></sl-icon>
-                </slot>
-              </span>
+              <slot name="expand-icon" part="expand-icon" class="select__expand-icon">
+                <sl-icon library="system" name="chevron-down"></sl-icon>
+              </slot>
             </div>
 
             <slot
@@ -665,7 +672,7 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
               aria-expanded=${this.open ? 'true' : 'false'}
               aria-multiselectable="false"
               aria-labelledby="label"
-              part="panel"
+              part="listbox"
               class="select__listbox"
               tabindex="-1"
               @mouseup=${this.handleOptionMouseUp}