Added placement property to sl-select (#687)

* added placement to sl-select

* sl-select placement: just allow top and bottom

docs/components/select.md

@@ -394,6 +394,33 @@ const App = () => (
 );
 ```
 
+### Placement
+
+The preferred placement of the dropdown can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport.
+
+```html preview
+<sl-select placement="top">
+  <sl-menu-item value="option-1">Option 1</sl-menu-item>
+  <sl-menu-item value="option-2">Option 2</sl-menu-item>
+  <sl-menu-item value="option-3">Option 3</sl-menu-item>
+</sl-select>
+```
+
+```jsx react
+import { 
+  SlMenuItem,
+  SlSelect
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSelect placement="top">
+    <SlMenuItem value="option-1">Option 1</SlMenuItem>
+    <SlMenuItem value="option-2">Option 2</SlMenuItem>
+    <SlMenuItem value="option-3">Option 3</SlMenuItem>
+  </SlDropdown> 
+);
+```
+
 ### Prefix & Suffix Icons
 
 Use the `prefix` and `suffix` slots to add icons.

src/components/select/select.ts

@@ -121,6 +121,12 @@ export default class SlSelect extends LitElement {
   /** The select's label. Alternatively, you can use the label slot. */
   @property() label = '';
 
+  /**
+   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+   * inside of the viewport.
+   */
+  @property() placement: 'top' | 'bottom' = 'bottom';
+
   /** The select's help text. Alternatively, you can use the help-text slot. */
   @property({ attribute: 'help-text' }) helpText = '';
 
@@ -451,6 +457,7 @@ export default class SlSelect extends LitElement {
         <sl-dropdown
           part="base"
           .hoist=${this.hoist}
+          .placement=${this.placement}
           .stayOpenOnSelect=${this.multiple}
           .containingElement=${this as HTMLElement}
           ?disabled=${this.disabled}