add control part to select

docs/resources/changelog.md

@@ -10,6 +10,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Added initial surface design tokens
 - Added missing background color to `<sl-details>`
+- Added the `control` part to `<sl-select>` so you can target the main control with CSS [#538](https://github.com/shoelace-style/shoelace/issues/538)
+- Changed the default `distance` in `<sl-dropdown>` from `2` to `0` [#538](https://github.com/shoelace-style/shoelace/issues/538)
 - Modified the color scale to no longer use a luminance shift
 
 ## 2.0.0-beta.52
@@ -19,7 +21,6 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added the `--speed` custom property to `<sl-spinner>`
 - Added the `--size` and `--track-width` custom properties to `<sl-progress-ring>`
 - Added tests for `<sl-badge>` [#530](https://github.com/shoelace-style/shoelace/pull/530)
-- Changed the default `distance` in `<sl-dropdown>` from `2` to `0`
 - Fixed a bug where `<sl-tab>` wasn't using a border radius token [#523](https://github.com/shoelace-style/shoelace/issues/523)
 - Fixed a bug in the Remix Icons example where some icons would 404 [#528](https://github.com/shoelace-style/shoelace/issues/528)
 - Updated `<sl-progress-ring>` to use only CSS for styling

src/components/select/select.styles.ts

@@ -14,7 +14,7 @@ export default css`
     display: block;
   }
 
-  .select__box {
+  .select__control {
     display: inline-flex;
     align-items: center;
     justify-content: start;
@@ -31,13 +31,13 @@ export default css`
     cursor: pointer;
   }
 
-  .select:not(.select--disabled) .select__box:hover {
+  .select:not(.select--disabled) .select__control:hover {
     background-color: rgb(var(--sl-input-background-color-hover));
     border-color: rgb(var(--sl-input-border-color-hover));
     color: rgb(var(--sl-input-color-hover));
   }
 
-  .select.select--focused:not(.select--disabled) .select__box {
+  .select.select--focused:not(.select--disabled) .select__control {
     background-color: rgb(var(--sl-input-background-color-focus));
     border-color: rgb(var(--sl-input-border-color-focus));
     box-shadow: var(--sl-focus-ring);
@@ -45,7 +45,7 @@ export default css`
     color: rgb(var(--sl-input-color-focus));
   }
 
-  .select--disabled .select__box {
+  .select--disabled .select__control {
     background-color: rgb(var(--sl-input-background-color-disabled));
     border-color: rgb(var(--sl-input-border-color-disabled));
     color: rgb(var(--sl-input-color-disabled));
@@ -141,7 +141,7 @@ export default css`
    */
 
   /* Small */
-  .select--small .select__box {
+  .select--small .select__control {
     border-radius: var(--sl-input-border-radius-small);
     font-size: var(--sl-input-font-size-small);
     min-height: var(--sl-input-height-small);
@@ -184,7 +184,7 @@ export default css`
   }
 
   /* Medium */
-  .select--medium .select__box {
+  .select--medium .select__control {
     border-radius: var(--sl-input-border-radius-medium);
     font-size: var(--sl-input-font-size-medium);
     min-height: var(--sl-input-height-medium);
@@ -227,7 +227,7 @@ export default css`
   }
 
   /* Large */
-  .select--large .select__box {
+  .select--large .select__control {
     border-radius: var(--sl-input-border-radius-large);
     font-size: var(--sl-input-font-size-large);
     min-height: var(--sl-input-height-large);
@@ -271,15 +271,15 @@ export default css`
   /*
    * Pill modifier
    */
-  .select--pill.select--small .select__box {
+  .select--pill.select--small .select__control {
     border-radius: var(--sl-input-height-small);
   }
 
-  .select--pill.select--medium .select__box {
+  .select--pill.select--medium .select__control {
     border-radius: var(--sl-input-height-medium);
   }
 
-  .select--pill.select--large .select__box {
+  .select--pill.select--large .select__control {
     border-radius: var(--sl-input-height-large);
   }
 `;

src/components/select/select.test.ts

@@ -30,12 +30,12 @@ describe('<sl-select>', () => {
         <sl-menu-item value="option-3">Option 3</sl-menu-item>
       </sl-select>
     `)) as SlSelect;
-    const selectBox = el.shadowRoot.querySelector('.select__box') as HTMLSelectElement;
-    selectBox.focus();
+    const control = el.shadowRoot.querySelector('.select__control') as HTMLSelectElement;
+    control.focus();
     const rKeyEvent = new KeyboardEvent('keydown', { key: 'r' });
-    selectBox.dispatchEvent(rKeyEvent);
+    control.dispatchEvent(rKeyEvent);
     await aTimeout(100);
-    expect(selectBox.getAttribute('aria-expanded')).to.equal('true');
+    expect(control.getAttribute('aria-expanded')).to.equal('true');
   });
 
   it('should not open the menu when ctrl + R is pressed with sl-select is on focus', async () => {
@@ -46,11 +46,11 @@ describe('<sl-select>', () => {
         <sl-menu-item value="option-3">Option 3</sl-menu-item>
       </sl-select>
     `)) as SlSelect;
-    const selectBox = el.shadowRoot.querySelector('.select__box') as HTMLSelectElement;
-    selectBox.focus();
+    const control = el.shadowRoot.querySelector('.select__control') as HTMLSelectElement;
+    control.focus();
     const rKeyEvent = new KeyboardEvent('keydown', { key: 'r', ctrlKey: true });
-    selectBox.dispatchEvent(rKeyEvent);
+    control.dispatchEvent(rKeyEvent);
     await aTimeout(100);
-    expect(selectBox.getAttribute('aria-expanded')).to.equal('false');
+    expect(control.getAttribute('aria-expanded')).to.equal('false');
   });
 });

src/components/select/select.ts

@@ -44,6 +44,7 @@ let id = 0;
  *
  * @csspart base - The component's base wrapper.
  * @csspart clear-button - The input's clear button, exported from <sl-input>.
+ * @csspart control - The container that holds the prefix, label, and suffix.
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart help-text - The select's help text.
  * @csspart icon - The select's icon.
@@ -59,7 +60,7 @@ export default class SlSelect extends LitElement {
   static styles = styles;
 
   @query('.select') dropdown: SlDropdown;
-  @query('.select__box') box: SlDropdown;
+  @query('.select__control') control: SlDropdown;
   @query('.select__hidden-select') input: HTMLInputElement;
   @query('.select__menu') menu: SlMenu;
 
@@ -266,7 +267,7 @@ export default class SlSelect extends LitElement {
   }
 
   handleLabelClick() {
-    const box = this.shadowRoot?.querySelector('.select__box') as HTMLElement;
+    const box = this.shadowRoot?.querySelector('.select__control') as HTMLElement;
     box.focus();
   }
 
@@ -293,7 +294,7 @@ export default class SlSelect extends LitElement {
     this.isOpen = false;
 
     // Restore focus on the box after the menu is hidden
-    this.box.focus();
+    this.control.focus();
   }
 
   @watch('multiple')
@@ -351,7 +352,7 @@ export default class SlSelect extends LitElement {
   }
 
   resizeMenu() {
-    const box = this.shadowRoot?.querySelector('.select__box') as HTMLElement;
+    const box = this.shadowRoot?.querySelector('.select__control') as HTMLElement;
     this.menu.style.width = `${box.clientWidth}px`;
 
     if (this.dropdown) {
@@ -464,9 +465,10 @@ export default class SlSelect extends LitElement {
           @sl-hide=${this.handleMenuHide}
         >
           <div
+            part="control"
             slot="trigger"
             id=${this.inputId}
-            class="select__box"
+            class="select__control"
             role="combobox"
             aria-labelledby=${ifDefined(
               getLabelledBy({