fix(select-rich): set focusableNode correctly so focused and focused-visible attributes are set when invoker gets focus

.changeset/swift-seals-deny.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[select-rich] set focusableNode correctly so focused and focused-visible attributes are set when invoker gets focus

packages/ui/components/select-rich/src/LionSelectRich.js

@@ -85,6 +85,15 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     );
   }
 
+  /**
+   * @protected
+   * @configure FocusMixin
+   */
+  // @ts-ignore
+  get _focusableNode() {
+    return this._invokerNode;
+  }
+
   /**
    * @configure ListboxMixin
    * @protected

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

@@ -49,10 +49,21 @@ describe('lion-select-rich', () => {
     expect(document.activeElement === document.body).to.be.true;
     const { _labelNode, _invokerNode } = getSelectRichMembers(el);
     _labelNode.click();
-
     expect(document.activeElement === _invokerNode).to.be.true;
   });
 
+  it('has an attribute focused when focused', async () => {
+    const el = await fixture(html` <lion-select-rich label="foo"> </lion-select-rich> `);
+
+    el.focus();
+    await el.updateComplete;
+    expect(el.hasAttribute('focused')).to.be.true;
+
+    el.blur();
+    await el.updateComplete;
+    expect(el.hasAttribute('focused')).to.be.false;
+  });
+
   it('checks the first enabled option', async () => {
     const el = await fixture(html`
       <lion-select-rich>