@lion/ui 0.4.1 → 0.5.0

package/components/radio-group/test/lion-radio-group.test.js

@@ -49,6 +49,35 @@ describe('<lion-radio-group>', () => {
       await el.updateComplete;
       expect(el.modelValue).to.deep.equal('female');
     });
+
+    it('restores default values if changes were made to a group containing options with formatters', async () => {
+      const formatter = /** @type {(modelValue: { value: string}) => string} */ modelValue =>
+        modelValue.value.charAt(0);
+      const el = await fixture(html`
+        <lion-radio-group name="gender" label="Gender">
+          <lion-radio label="Male" .formatter=${formatter} .choiceValue=${'male'}></lion-radio>
+          <lion-radio
+            label="Female"
+            .formatter=${formatter}
+            .modelValue=${{ value: 'female', checked: true }}
+          ></lion-radio>
+          <lion-radio label="Other" .formatter=${formatter} .choiceValue=${'other'}></lion-radio>
+        </lion-radio-group>
+      `);
+      el.formElements[0].checked = true;
+      expect(el.modelValue).to.deep.equal('male');
+
+      el.resetGroup();
+      expect(el.modelValue).to.deep.equal('female');
+
+      el.formElements[2].checked = true;
+      expect(el.modelValue).to.deep.equal('other');
+
+      el.resetGroup();
+      await el.formElements[1].updateComplete;
+      await el.updateComplete;
+      expect(el.modelValue).to.deep.equal('female');
+    });
   });
 
   it('should have role = radiogroup', async () => {

package/components/select/test/lion-select.test.js

@@ -60,7 +60,7 @@ describe('lion-select', () => {
     expect(lionSelect.formattedValue).to.equal('');
 
     const select = /** @type {HTMLSlotElement} */ (
-      lionSelect.shadowRoot?.querySelector('slot[name=input]')
+      /** @type {ShadowRoot} */ (lionSelect.shadowRoot).querySelector('slot[name=input]')
     ).assignedElements()[0];
     const options = select.querySelectorAll('option');
     options[1].textContent = 'Item 2';

package/components/switch/src/LionSwitchButton.js

@@ -4,10 +4,6 @@ import { DisabledWithTabIndexMixin } from '@lion/ui/core.js';
 export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
   static get properties() {
     return {
-      role: {
-        type: String,
-        reflect: true,
-      },
       checked: {
         type: Boolean,
         reflect: true,
@@ -76,7 +72,6 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
     // inputNode = this, which always requires a value prop
     this.value = '';
 
-    this.role = 'switch';
     this.checked = false;
     this.__initialized = false;
     /** @protected */
@@ -89,6 +84,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
 
   connectedCallback() {
     super.connectedCallback();
+    this.setAttribute('role', 'switch');
     this.setAttribute('aria-checked', `${this.checked}`);
     this.addEventListener('click', this._toggleChecked);
     this.addEventListener('keydown', this.__handleKeydown);

package/components/tabs/src/LionTabs.js

@@ -345,6 +345,13 @@ export class LionTabs extends LitElement {
     }
   }
 
+  /**
+   * @return {number}
+   */
+  get selectedIndex() {
+    return this.__selectedIndex || 0;
+  }
+
   /**
    * @param {number} value The new index
    */
@@ -371,13 +378,6 @@ export class LionTabs extends LitElement {
     this.requestUpdate('selectedIndex', stale);
   }
 
-  /**
-   * @return {number}
-   */
-  get selectedIndex() {
-    return this.__selectedIndex || 0;
-  }
-
   /** @protected */
   get _pairCount() {
     return (this.__store && this.__store.length) || 0;

package/components/textarea/src/LionTextarea.js

@@ -198,7 +198,7 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
     let count = 3; // max tasks to wait for
     // @ts-ignore this property is added by webcomponentsjs polyfill for old browsers
     while (count !== 0 && !this.__shady_native_contains(this._inputNode)) {
-      // eslint-disable-next-line no-await-in-loop
+      // eslint-disable-next-line no-await-in-loop, no-promise-executor-return
       await new Promise(resolve => setTimeout(resolve));
       count -= 1;
     }