chore: type enhancements SlotMixin, LocalizeMixin, SelectRichInvoker

.changeset/large-walls-dance.md

@@ -0,0 +1,11 @@
+---
+'@lion/core': patch
+'@lion/localize': patch
+'@lion/select-rich': patch
+---
+
+Type enhancements
+
+- LocalizeMixinTypes.d.ts extend from LitElement
+- Make `slots` a getter in SlotMixin types
+- selectedElement of type 'LionOption' in SelectRichInvoker

packages/core/types/SlotMixinTypes.d.ts

@@ -10,7 +10,7 @@ export declare class SlotHost {
   /**
    * Obtains all the slots to create
    */
-  slots: SlotsMap;
+  get slots(): SlotsMap;
 
   /**
    * Starts the creation of slots

packages/localize/types/LocalizeMixinTypes.d.ts

@@ -1,4 +1,5 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from '@lion/core';
 
 export interface FormatNumberPart {
   type: string;
@@ -68,7 +69,7 @@ declare class LocalizeMixinHost {
   private __localizeOnLocaleChanged(event: CustomEvent): void;
 }
 
-declare function LocalizeMixinImplementation<T extends Constructor<HTMLElement>>(
+declare function LocalizeMixinImplementation<T extends Constructor<LitElement>>(
   superclass: T,
 ): T & Constructor<LocalizeMixinHost> & typeof LocalizeMixinHost;
 

packages/select-rich/src/LionSelectInvoker.js

@@ -3,6 +3,7 @@ import { css, html } from '@lion/core';
 
 /**
  * @typedef {import('@lion/core').CSSResult} CSSResult
+ * @typedef {import('@lion/listbox').LionOption} LionOption
  */
 
 /**
@@ -66,8 +67,8 @@ export class LionSelectInvoker extends LionButton {
      */
     this.readOnly = false;
     /**
-     * The option Element that is currently selected
-     * @type {HTMLElement | null}
+     * The option element that is currently selected
+     * @type {LionOption | null}
      */
     this.selectedElement = null;
     /**

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

@@ -3,6 +3,10 @@ import { defineCE, expect, fixture, html } from '@open-wc/testing';
 import '../lion-select-invoker.js';
 import { LionSelectInvoker } from '../src/LionSelectInvoker.js';
 
+/**
+ * @typedef {import('@lion/listbox').LionOption} LionOption
+ */
+
 describe('lion-select-invoker', () => {
   it('should behave as a button', async () => {
     const el = await fixture(html`<lion-select-invoker></lion-select-invoker>`);
@@ -13,7 +17,7 @@ describe('lion-select-invoker', () => {
     const el = /** @type {LionSelectInvoker} */ (await fixture(
       html`<lion-select-invoker></lion-select-invoker>`,
     ));
-    el.selectedElement = /** @type {HTMLElement} */ (await fixture(
+    el.selectedElement = /** @type {LionOption} */ (await fixture(
       `<div class="option">Textnode<h2>I am</h2><p>2 lines</p></div>`,
     ));
     await el.updateComplete;
@@ -34,7 +38,7 @@ describe('lion-select-invoker', () => {
     const el = /** @type {LionSelectInvoker} */ (await fixture(
       html`<lion-select-invoker></lion-select-invoker>`,
     ));
-    el.selectedElement = /** @type {HTMLElement} */ (await fixture(
+    el.selectedElement = /** @type {LionOption} */ (await fixture(
       `<div class="option">just textContent</div>`,
     ));
     await el.updateComplete;
@@ -81,13 +85,13 @@ describe('lion-select-invoker', () => {
       );
       const el = /** @type {LionSelectInvoker} */ (await fixture(`<${myTag}></${myTag}>`));
 
-      el.selectedElement = /** @type {HTMLElement} */ (await fixture(
+      el.selectedElement = /** @type {LionOption} */ (await fixture(
         `<div class="option">cat</div>`,
       ));
       await el.updateComplete;
       expect(el._contentWrapperNode).lightDom.to.equal('cat selected');
 
-      el.selectedElement = /** @type {HTMLElement} */ (await fixture(
+      el.selectedElement = /** @type {LionOption} */ (await fixture(
         `<div class="option">dog</div>`,
       ));
       await el.updateComplete;