feat(select-rich): provide generic mechanism for overrifing overlay type

packages/select-rich/src/LionSelectRich.js

@@ -548,11 +548,15 @@ export class LionSelectRich extends FormRegistrarMixin(
     }
   }
 
-  __setupOverlay() {
+  /**
-    this.__overlay = overlays.add(
+   * @overridable Subclassers can override the default
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _defineOverlay({ invokerNode, contentNode } = {}) {
+    return overlays.add(
       new LocalOverlayController({
-        contentNode: this._listboxNode,
+        contentNode,
-        invokerNode: this._invokerNode,
+        invokerNode,
         hidesOnEsc: false,
         hidesOnOutsideClick: true,
         inheritsReferenceObjectWidth: true,
@@ -566,6 +570,13 @@ export class LionSelectRich extends FormRegistrarMixin(
         },
       }),
     );
+  }
+
+  __setupOverlay() {
+    this.__overlay = this._defineOverlay({
+      invokerNode: this._invokerNode,
+      contentNode: this._listboxNode,
+    });
 
     this.__overlayOnShow = () => {
       this.opened = true;

packages/select-rich/test/lion-select-rich.test.js

@@ -1,9 +1,16 @@
-import { expect, fixture, html, aTimeout } from '@open-wc/testing';
+import { expect, fixture, html, aTimeout, defineCE, unsafeStatic } from '@open-wc/testing';
-import './keyboardEventShimIE.js';
-
 import '@lion/option/lion-option.js';
+import {
+  overlays,
+  LocalOverlayController,
+  GlobalOverlayController,
+  DynamicOverlayController,
+} from '@lion/overlays';
+
+import './keyboardEventShimIE.js';
 import '../lion-options.js';
 import '../lion-select-rich.js';
+import { LionSelectRich } from '../index.js';
 
 describe('lion-select-rich', () => {
   it('does not have a tabindex', async () => {
@@ -328,4 +335,51 @@ describe('lion-select-rich', () => {
       });
     });
   });
+
+  describe('Subclassers', () => {
+    it('allows to override the type of overlays', async () => {
+      const mySelectTagString = defineCE(
+        class MySelect extends LionSelectRich {
+          _defineOverlay({ invokerNode, contentNode }) {
+            // add a DynamicOverlayController
+            const dynamicCtrl = new DynamicOverlayController();
+
+            const localCtrl = overlays.add(
+              new LocalOverlayController({
+                contentNode,
+                invokerNode,
+              }),
+            );
+            dynamicCtrl.add(localCtrl);
+
+            const globalCtrl = overlays.add(
+              new GlobalOverlayController({
+                contentNode,
+                invokerNode,
+              }),
+            );
+            dynamicCtrl.add(globalCtrl);
+
+            return dynamicCtrl;
+          }
+        },
+      );
+
+      const mySelectTag = unsafeStatic(mySelectTagString);
+
+      const el = await fixture(html`
+        <${mySelectTag} label="Favorite color" name="color">
+          <lion-options slot="input">
+            ${Array(2).map(
+              (_, i) => html`
+                <lion-option .modelValue="${{ value: i, checked: false }}">value ${i}</lion-option>
+              `,
+            )}
+          </lion-options>
+        </${mySelectTag}>
+      `);
+
+      expect(el.__overlay).to.be.instanceOf(DynamicOverlayController);
+    });
+  });
 });