Move scrolling from menu to dropdown panel

docs/components/dropdown.md

@@ -15,6 +15,23 @@ Dropdowns are designed to work well with [menus](/components/menu.md) to provide
     <sl-menu-item>Dropdown Item 1</sl-menu-item>
     <sl-menu-item>Dropdown Item 2</sl-menu-item>
     <sl-menu-item>Dropdown Item 3</sl-menu-item>
+    <sl-menu-item>Dropdown Item 4</sl-menu-item>
+    <sl-menu-item>Dropdown Item 5</sl-menu-item>
+    <sl-menu-item>Dropdown Item 6</sl-menu-item>
+    <sl-menu-item>Dropdown Item 7</sl-menu-item>
+    <sl-menu-item>Dropdown Item 8</sl-menu-item>
+    <sl-menu-item>Dropdown Item 9</sl-menu-item>
+    <sl-menu-item>Dropdown Item 10</sl-menu-item>
+    <sl-menu-item>Dropdown Item 11</sl-menu-item>
+    <sl-menu-item>Dropdown Item 12</sl-menu-item>
+    <sl-menu-item>Dropdown Item 13</sl-menu-item>
+    <sl-menu-item>Dropdown Item 14</sl-menu-item>
+    <sl-menu-item>Dropdown Item 15</sl-menu-item>
+    <sl-menu-item>Dropdown Item 16</sl-menu-item>
+    <sl-menu-item>Dropdown Item 17</sl-menu-item>
+    <sl-menu-item>Dropdown Item 18</sl-menu-item>
+    <sl-menu-item>Dropdown Item 19</sl-menu-item>
+    <sl-menu-item>Dropdown Item 20</sl-menu-item>
     <sl-menu-divider></sl-menu-divider>
     <sl-menu-item checked>Checked</sl-menu-item>
     <sl-menu-item disabled>Disabled</sl-menu-item>

docs/components/select.md

@@ -9,10 +9,24 @@ Selects allow you to choose one or more items from a dropdown menu.
   <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-menu-divider></sl-menu-divider>
   <sl-menu-item value="option-4">Option 4</sl-menu-item>
   <sl-menu-item value="option-5">Option 5</sl-menu-item>
   <sl-menu-item value="option-6">Option 6</sl-menu-item>
+  <sl-menu-item value="option-7">Option 7</sl-menu-item>
+  <sl-menu-item value="option-8">Option 8</sl-menu-item>
+  <sl-menu-item value="option-9">Option 9</sl-menu-item>
+  <sl-menu-item value="option-10">Option 10</sl-menu-item>
+  <sl-menu-divider></sl-menu-divider>
+  <sl-menu-item value="option-11">Option 11</sl-menu-item>
+  <sl-menu-item value="option-12">Option 12</sl-menu-item>
+  <sl-menu-item value="option-13">Option 13</sl-menu-item>
+  <sl-menu-item value="option-14">Option 14</sl-menu-item>
+  <sl-menu-item value="option-15">Option 15</sl-menu-item>
+  <sl-menu-item value="option-16">Option 16</sl-menu-item>
+  <sl-menu-item value="option-17">Option 17</sl-menu-item>
+  <sl-menu-item value="option-18">Option 18</sl-menu-item>
+  <sl-menu-item value="option-19">Option 19</sl-menu-item>
+  <sl-menu-item value="option-20">Option 20</sl-menu-item>
 </sl-select>
 ```
 

src/components/color-picker/color-picker.scss

@@ -235,6 +235,7 @@
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 .color-dropdown::part(panel) {
+  max-height: none;
   overflow: visible;
 }
 

src/components/dropdown/dropdown.scss

@@ -15,6 +15,7 @@
 .dropdown__panel {
   position: absolute;
   z-index: var(--sl-z-index-dropdown);
+  max-height: 50vh;
   font-family: var(--sl-font-sans);
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
@@ -25,13 +26,10 @@
   box-shadow: var(--sl-shadow-large);
   opacity: 0;
   overflow: auto;
+  overscroll-behavior: none;
   transition: var(--sl-transition-fast) opacity;
 
   &.popover-visible {
     opacity: 1;
   }
-
-  ::slotted(sl-menu) {
-    max-height: 50vh;
-  }
 }

src/components/menu/menu.scss

@@ -6,8 +6,6 @@
 
 .menu {
   padding: var(--sl-spacing-x-small) 0;
-  overflow-y: auto;
-  overscroll-behavior: none;
 
   &:focus {
     outline: none;