Merge branch 'next' of https://github.com/shoelace-style/shoelace into next

src/components/popup/popup.component.ts

@@ -272,8 +272,8 @@ export default class SlPopup extends ShoelaceElement {
   }
 
   private start() {
-    // We can't start the positioner without an anchor
-    if (!this.anchorEl) {
+    // We can't start the positioner without an anchor or when the popup is inactive
+    if (!this.anchorEl || !this.active) {
       return;
     }
 

src/components/popup/popup.test.ts

@@ -1,10 +1,33 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type SlPopup from './popup.js';
 
 describe('<sl-popup>', () => {
+  let element: SlPopup;
+
   it('should render a component', async () => {
     const el = await fixture(html` <sl-popup></sl-popup> `);
 
     expect(el).to.exist;
   });
+
+  it('should properly handle positioning when active changes', async () => {
+    element = await fixture('<sl-popup></sl-popup>');
+
+    element.active = true;
+    await element.updateComplete;
+
+    // SImulate a scroll event
+    const event = new Event('scroll');
+    window.dispatchEvent(event);
+
+    element.active = false;
+    await element.updateComplete;
+
+    // The component should not throw an error when the window is scrolled
+    expect(() => {
+      element.active = true;
+      window.dispatchEvent(event);
+    }).not.to.throw();
+  });
 });

src/components/select/select.styles.ts

@@ -176,7 +176,7 @@ export default css`
     margin-inline-end: var(--sl-input-spacing-small);
   }
 
-  .select--small.select--multiple .select__prefix::slotted(*) {
+  .select--small.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
     margin-inline-start: var(--sl-input-spacing-small);
   }
 
@@ -205,11 +205,11 @@ export default css`
     margin-inline-end: var(--sl-input-spacing-medium);
   }
 
-  .select--medium.select--multiple .select__prefix::slotted(*) {
+  .select--medium.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
     margin-inline-start: var(--sl-input-spacing-medium);
   }
 
-  .select--medium.select--multiple .select__combobox {
+  .select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
     padding-inline-start: 0;
     padding-block: 3px;
   }
@@ -234,11 +234,11 @@ export default css`
     margin-inline-end: var(--sl-input-spacing-large);
   }
 
-  .select--large.select--multiple .select__prefix::slotted(*) {
+  .select--large.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
     margin-inline-start: var(--sl-input-spacing-large);
   }
 
-  .select--large.select--multiple .select__combobox {
+  .select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
     padding-inline-start: 0;
     padding-block: 4px;
   }