@lion/ui 0.4.1 → 0.5.0

package/components/form-core/test-suites/choice-group/CustomChoiceGroupMixin.suite.js

@@ -0,0 +1,265 @@
+import '@lion/ui/define/lion-fieldset.js';
+import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-checkbox.js';
+import { expect, fixture, fixtureSync, html, unsafeStatic } from '@open-wc/testing';
+
+/**
+ *
+ * @typedef {import('../../test/choice-group/CustomChoiceGroupMixin.test.js').CustomChoiceGroup} CustomChoiceGroup
+ */
+
+/**
+ * @param {{ parentTagString?:string, childTagString?: string, choiceType?: string}} config
+ */
+export function runCustomChoiceGroupMixinSuite({
+  parentTagString,
+  childTagString,
+  choiceType,
+} = {}) {
+  const cfg = {
+    parentTagString: parentTagString || 'custom-choice-input-group',
+    childTagString: childTagString || 'custom-choice-input',
+    choiceType: choiceType || 'single',
+  };
+
+  const parentTag = unsafeStatic(cfg.parentTagString);
+  const childTag = unsafeStatic(cfg.childTagString);
+
+  describe(`CustomChoiceGroupMixin: ${cfg.parentTagString}`, () => {
+    if (cfg.choiceType === 'single') {
+      it('has a single modelValue representing a custom value', async () => {
+        const el = /** @type {CustomChoiceGroup} */ (
+          await fixture(html`
+          <${parentTag} allow-custom-choice name="gender[]">
+            <${childTag} .choiceValue=${'male'}></${childTag}>
+            <${childTag} checked .choiceValue=${'female'}></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        await el.registrationComplete;
+
+        expect(el.modelValue).to.equal('female');
+        el.modelValue = 'male';
+        expect(el.modelValue).to.equal('male');
+
+        el.modelValue = 'other';
+        expect(el.modelValue).to.equal('other');
+
+        expect(el.formElements[0].checked).to.be.false;
+        expect(el.formElements[1].checked).to.be.false;
+      });
+
+      it('has a single formattedValue representing a custom value', async () => {
+        const el = /** @type {CustomChoiceGroup} */ (
+          await fixture(html`
+          <${parentTag} allow-custom-choice name="gender">
+            <${childTag} .choiceValue=${'male'}></${childTag}>
+            <${childTag} .choiceValue=${'female'} checked></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        el.modelValue = 'other';
+        expect(el.formattedValue).to.equal('other');
+      });
+    }
+
+    it('can set initial custom modelValue on creation', async () => {
+      const el = /** @type {CustomChoiceGroup} */ (
+        await fixture(html`
+        <${parentTag} allow-custom-choice name="gender[]" .modelValue=${'other'}>
+          <${childTag} .choiceValue=${'male'}></${childTag}>
+          <${childTag} .choiceValue=${'female'}></${childTag}>
+        </${parentTag}>
+      `)
+      );
+
+      if (cfg.choiceType === 'single') {
+        expect(el.modelValue).to.equal('other');
+      } else {
+        expect(el.modelValue).to.deep.equal(['other']);
+      }
+      expect(el.formElements[0].checked).to.be.false;
+      expect(el.formElements[1].checked).to.be.false;
+    });
+
+    it('can set initial custom serializedValue on creation', async () => {
+      const el = /** @type {CustomChoiceGroup} */ (
+        await fixture(html`
+        <${parentTag} allow-custom-choice name="gender[]" .serializedValue=${'other'}>
+          <${childTag} .choiceValue=${'male'}></${childTag}>
+          <${childTag} .choiceValue=${'female'}></${childTag}>
+        </${parentTag}>
+      `)
+      );
+
+      if (cfg.choiceType === 'single') {
+        expect(el.serializedValue).to.equal('other');
+      } else {
+        expect(el.serializedValue).to.deep.equal(['other']);
+      }
+      expect(el.formElements[0].checked).to.be.false;
+      expect(el.formElements[1].checked).to.be.false;
+    });
+
+    it('can set initial custom formattedValue on creation', async () => {
+      const el = /** @type {CustomChoiceGroup} */ (
+        await fixture(html`
+        <${parentTag} allow-custom-choice name="gender[]" .formattedValue=${'other'}>
+          <${childTag} .choiceValue=${'male'}></${childTag}>
+          <${childTag} .choiceValue=${'female'}></${childTag}>
+        </${parentTag}>
+      `)
+      );
+
+      if (cfg.choiceType === 'single') {
+        expect(el.formattedValue).to.equal('other');
+      } else {
+        expect(el.formattedValue).to.deep.equal(['other']);
+      }
+      expect(el.formElements[0].checked).to.be.false;
+      expect(el.formElements[1].checked).to.be.false;
+    });
+
+    it('correctly handles custom modelValue being set before registrationComplete', async () => {
+      const el = /** @type {CustomChoiceGroup} */ (
+        fixtureSync(html`
+        <${parentTag} allow-custom-choice name="gender[]" .modelValue=${null}>
+          <${childTag} .choiceValue=${'male'}></${childTag}>
+          <${childTag} .choiceValue=${'female'}></${childTag}>
+        </${parentTag}>
+      `)
+      );
+
+      if (cfg.choiceType === 'single') {
+        el.modelValue = 'other';
+        await el.registrationComplete;
+        expect(el.modelValue).to.equal('other');
+      } else {
+        el.modelValue = ['other'];
+        await el.registrationComplete;
+        expect(el.modelValue).to.deep.equal(['other']);
+      }
+    });
+
+    it('correctly handles custom serializedValue being set before registrationComplete', async () => {
+      const el = /** @type {CustomChoiceGroup} */ (
+        fixtureSync(html`
+        <${parentTag} allow-custom-choice name="gender[]" .serializedValue=${null}>
+          <${childTag} .choiceValue=${'male'}></${childTag}>
+          <${childTag} .choiceValue=${'female'}></${childTag}>
+        </${parentTag}>
+      `)
+      );
+
+      if (cfg.choiceType === 'single') {
+        // @ts-expect-error
+        el.serializedValue = 'other';
+        await el.registrationComplete;
+        expect(el.serializedValue).to.equal('other');
+      } else {
+        // @ts-expect-error
+        el.serializedValue = ['other'];
+        await el.registrationComplete;
+        expect(el.serializedValue).to.deep.equal(['other']);
+      }
+    });
+
+    it('can be cleared, even when a custom value is selected', async () => {
+      const el = /** @type {CustomChoiceGroup} */ (
+        await fixture(html`
+        <${parentTag} allow-custom-choice name="gender[]">
+          <${childTag} .choiceValue=${'male'}></${childTag}>
+          <${childTag} .choiceValue=${'female'}></${childTag}>
+        </${parentTag}>
+      `)
+      );
+      if (cfg.choiceType === 'single') {
+        el.modelValue = 'other';
+      } else {
+        el.modelValue = ['other'];
+      }
+
+      el.clear();
+
+      if (cfg.choiceType === 'single') {
+        expect(el.serializedValue).to.deep.equal('');
+      } else {
+        expect(el.serializedValue).to.deep.equal([]);
+      }
+    });
+
+    describe('multipleChoice', () => {
+      it('has a single modelValue representing all currently checked values, including custom values', async () => {
+        const el = /** @type {CustomChoiceGroup} */ (
+          await fixture(html`
+          <${parentTag} allow-custom-choice multiple-choice name="gender[]">
+            <${childTag} .choiceValue=${'male'}></${childTag}>
+            <${childTag} .choiceValue=${'female'} checked></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        expect(el.modelValue).to.eql(['female']);
+
+        el.modelValue = ['female', 'male'];
+        expect(el.modelValue).to.eql(['male', 'female']);
+
+        el.modelValue = ['female', 'male', 'other'];
+        expect(el.modelValue).to.eql(['male', 'female', 'other']);
+      });
+
+      it('has a single serializedValue representing all currently checked values, including custom values', async () => {
+        const el = /** @type {CustomChoiceGroup} */ (
+          await fixture(html`
+          <${parentTag} allow-custom-choice multiple-choice name="gender[]">
+            <${childTag} .choiceValue=${'male'}></${childTag}>
+            <${childTag} .choiceValue=${'female'} checked></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        expect(el.serializedValue).to.eql(['female']);
+
+        el.modelValue = ['female', 'male', 'other'];
+        expect(el.serializedValue).to.eql(['male', 'female', 'other']);
+      });
+
+      it('has a single formattedValue representing all currently checked values', async () => {
+        const el = /** @type {CustomChoiceGroup} */ (
+          await fixture(html`
+          <${parentTag} allow-custom-choice multiple-choice name="gender[]">
+            <${childTag} .choiceValue=${'male'}></${childTag}>
+            <${childTag} .choiceValue=${'female'} checked></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        expect(el.formattedValue).to.eql(['female']);
+
+        el.modelValue = ['female', 'male', 'other'];
+        expect(el.formattedValue).to.eql(['male', 'female', 'other']);
+      });
+
+      it('unchecks non-matching checkboxes when setting the modelValue', async () => {
+        const el = /** @type {CustomChoiceGroup} */ (
+          await fixture(html`
+          <${parentTag} allow-custom-choice multiple-choice name="gender[]">
+            <${childTag} .choiceValue=${'male'} checked></${childTag}>
+            <${childTag} .choiceValue=${'female'} checked></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        expect(el.modelValue).to.eql(['male', 'female']);
+        expect(el.formElements[0].checked).to.be.true;
+        expect(el.formElements[1].checked).to.be.true;
+
+        el.modelValue = ['other'];
+        expect(el.formElements[0].checked).to.be.false;
+        expect(el.formElements[1].checked).to.be.false;
+      });
+    });
+  });
+}

package/components/form-core/types/choice-group/ChoiceGroupMixinTypes.ts

@@ -25,7 +25,7 @@ export declare class ChoiceGroupHost {
     filterFn?: (el: FormControl, property?: string) => boolean,
   ): void;
   protected _throwWhenInvalidChildModelValue(child: FormControlHost): void;
-  protected _isEmpty(): void;
+  protected _isEmpty(): boolean;
   protected _checkSingleChoiceElements(ev: Event): void;
   protected _getCheckedElements(): ChoiceInputHost[];
   protected _setCheckedElements(value: any, check: boolean): void;

package/components/form-core/types/choice-group/CustomChoiceGroupMixinTypes.ts

@@ -0,0 +1,30 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+
+import { ChoiceGroupHost } from './ChoiceGroupMixinTypes.js';
+
+export declare class CustomChoiceGroupHost {
+  allowCustomChoice: boolean;
+  get modelValue(): any;
+  set modelValue(value: any);
+  get serializedValue(): string;
+  set serializedValue(value: string);
+  get formattedValue(): string;
+  set formattedValue(value: string);
+
+  clear(): void;
+  parser(value: string | string[]): string | string[];
+
+  protected _isEmpty(): boolean;
+}
+
+export declare function CustomChoiceGroupImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<CustomChoiceGroupHost> &
+  Pick<typeof CustomChoiceGroupHost, keyof typeof CustomChoiceGroupHost> &
+  Constructor<ChoiceGroupHost> &
+  Pick<typeof ChoiceGroupHost, keyof typeof ChoiceGroupHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type CustomChoiceGroupMixin = typeof CustomChoiceGroupImplementation;

package/components/form-core/types/choice-group/index.ts

@@ -1,2 +1,3 @@
 export * from './ChoiceInputMixinTypes.js';
 export * from './ChoiceGroupMixinTypes.js';
+export * from './CustomChoiceGroupMixinTypes.js';

package/components/helpers/src/SbActionLogger.js

@@ -5,6 +5,7 @@ import { css, html, LitElement, render } from 'lit';
 export class SbActionLogger extends LitElement {
   static get properties() {
     return {
+      // eslint-disable-next-line lit/no-native-attributes
       title: { type: String, reflect: true },
       simple: { type: Boolean, reflect: true },
       __logCounter: { type: Number },

package/components/icon/src/LionIcon.js

@@ -57,14 +57,6 @@ export class LionIcon extends LitElement {
         type: String,
         attribute: 'icon-id',
       },
-      /**
-       * @private
-       */
-      role: {
-        type: String,
-        attribute: 'role',
-        reflect: true,
-      },
     };
   }
 
@@ -101,7 +93,6 @@ export class LionIcon extends LitElement {
 
   constructor() {
     super();
-    this.role = 'img';
     this.ariaLabel = '';
     this.iconId = '';
     /**
@@ -131,6 +122,7 @@ export class LionIcon extends LitElement {
     // ensures that aria-hidden is set if there is no aria-label attribute
     this._onLabelChanged();
     super.connectedCallback();
+    this.setAttribute('role', 'img');
   }
 
   /**

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

@@ -185,10 +185,12 @@ describe('lion-icon', () => {
     try {
       icons.addIconResolver(
         'foo',
+        // eslint-disable-next-line no-promise-executor-return
         () => new Promise(resolve => setTimeout(() => resolve(heartSvg), 10)),
       );
       icons.addIconResolver(
         'bar',
+        // eslint-disable-next-line no-promise-executor-return
         () => new Promise(resolve => setTimeout(() => resolve(hammerSvg), 4)),
       );
       const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);

package/components/input-amount/src/LionInputAmount.js

@@ -159,6 +159,9 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     if (currency) {
       if (!this.__currencyDisplayNodeIsConnected) {
         this.appendChild(this.__currencyDisplayNode);
+        this.addToAriaLabelledBy(this.__currencyDisplayNode, {
+          idPrefix: this._currencyDisplayNodeSlot,
+        });
         this.__currencyDisplayNodeIsConnected = true;
       }
       this.__currencyDisplayNode.textContent = this.__currencyLabel;
@@ -182,11 +185,11 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
   }
 
   /**
-   * @returns the current currency display node
+   * @returns {HTMLElement | undefined} the current currency display node
    * @private
    */
   get __currencyDisplayNode() {
-    const node = Array.from(this.children).find(
+    const node = /** @type {HTMLElement[]} */ (Array.from(this.children)).find(
       child => child.slot === this._currencyDisplayNodeSlot,
     );
     if (node) {

package/components/input-amount/test/lion-input-amount.test.js

@@ -308,6 +308,27 @@ describe('<lion-input-amount>', () => {
       expect(_inputNode.getAttribute('aria-labelledby')).to.contain(label?.id);
     });
 
+    it('adds currency id to aria-labelledby of input when currency switches from undefined', async () => {
+      const el = /** @type {LionInputAmount} */ (
+        await fixture(`<lion-input-amount></lion-input-amount>`)
+      );
+
+      el.currency = 'EUR';
+
+      let resolved = await el.updateComplete;
+      while (!resolved) {
+        resolved = await el.updateComplete;
+      }
+
+      const label = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
+        child => child.slot === 'after',
+      );
+      const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ (el));
+
+      expect(label?.id).not.equal('');
+      expect(_inputNode.getAttribute('aria-labelledby')).to.contain(label?.id);
+    });
+
     it('adds an aria-label to currency slot', async () => {
       const el = /** @type {LionInputAmount} */ (
         await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)

package/components/input-range/test/lion-input-range.test.js

@@ -19,10 +19,14 @@ describe('<lion-input-range>', () => {
       <lion-input-range .modelValue=${75} unit="${`%`}"></lion-input-range>
     `);
     expect(
-      /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.input-range__value')).innerText,
+      /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__value')
+      ).innerText,
     ).to.equal('75');
     expect(
-      /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.input-range__unit')).innerText,
+      /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__unit')
+      ).innerText,
     ).to.equal('%');
   });
 
@@ -30,12 +34,14 @@ describe('<lion-input-range>', () => {
     const el = await fixture(`<lion-input-range min="100" max="200"></lion-input-range>`);
     expect(el.shadowRoot?.querySelectorAll('.input-range__limits span').length).to.equal(2);
     expect(
-      /** @type {HTMLElement} */ (el.shadowRoot?.querySelectorAll('.input-range__limits span')[0])
-        .innerText,
+      /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits span')[0]
+      ).innerText,
     ).to.equal(el.min.toString());
     expect(
-      /** @type {HTMLElement} */ (el.shadowRoot?.querySelectorAll('.input-range__limits span')[1])
-        .innerText,
+      /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits span')[1]
+      ).innerText,
     ).to.equal(el.max.toString());
   });
 

package/components/listbox/src/LionOptions.js

@@ -7,10 +7,6 @@ import { FormRegistrarPortalMixin } from '@lion/ui/form-core.js';
 export class LionOptions extends FormRegistrarPortalMixin(LitElement) {
   static get properties() {
     return {
-      role: {
-        type: String,
-        reflect: true,
-      },
       tabIndex: {
         type: Number,
         reflect: true,
@@ -21,10 +17,14 @@ export class LionOptions extends FormRegistrarPortalMixin(LitElement) {
 
   constructor() {
     super();
-    this.role = 'listbox';
     this.tabIndex = 0;
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'listbox');
+  }
+
   createRenderRoot() {
     return this;
   }

package/components/listbox/src/ListboxMixin.js

@@ -196,22 +196,6 @@ const ListboxMixinImplementation = superclass =>
       return this._listboxNode;
     }
 
-    /**
-     * @override ChoiceGroupMixin
-     */
-    get serializedValue() {
-      return this.modelValue;
-    }
-
-    // Duplicating from FormGroupMixin, because you cannot independently inherit/override getter + setter.
-    // If you override one, gotta override the other, they go in pairs.
-    /**
-     * @override ChoiceGroupMixin
-     */
-    set serializedValue(value) {
-      super.serializedValue = value;
-    }
-
     get activeIndex() {
       return this.formElements.findIndex(el => el.active === true);
     }
@@ -473,6 +457,7 @@ const ListboxMixinImplementation = superclass =>
     }
 
     clear() {
+      super.clear();
       this.setCheckedIndex(-1);
       this.resetInteractionState();
     }

package/components/listbox/test/lion-options.test.js

@@ -12,6 +12,6 @@ describe('lion-options', () => {
         <lion-options .registrationTarget=${registrationTargetEl}></lion-options>
       `)
     );
-    expect(el.role).to.equal('listbox');
+    expect(el.getAttribute('role')).to.equal('listbox');
   });
 });

package/components/listbox/test-suites/ListboxMixin.suite.js

@@ -163,7 +163,7 @@ export function runListboxMixinSuite(customConfig = {}) {
       });
 
       it('requests update for modelValue when checkedIndex changes', async () => {
-        const el = await fixture(html`
+        const el = /** @type {LionListbox} */ await fixture(html`
           <${tag} name="gender" .modelValue=${'other'}>
             <${optionTag} .choiceValue=${'male'}></${optionTag}>
             <${optionTag} .choiceValue=${'female'}></${optionTag}>

package/components/localize/src/date/getMonthNames.js

@@ -1,5 +1,6 @@
 import { normalizeIntlDate } from './utils/normalizeIntlDate.js';
 import { forceShortMonthNamesForEnGb } from './utils/forceShortMonthNamesForEnGb.js';
+import { forceDotsForNlnl } from './utils/forceDotsForNlnl.js';
 
 /** @type {Object.<string, Object.<string,string[]>>} */
 const monthsLocaleCache = {};
@@ -29,6 +30,8 @@ export function getMonthNames({ locale = 'en-GB', style = 'long' } = {}) {
   }
   if (locale === 'en-GB' && style === 'short') {
     months = forceShortMonthNamesForEnGb(months);
+  } else if (locale === 'nl-NL' && style === 'short') {
+    months = forceDotsForNlnl(months);
   }
   monthsLocaleCache[locale] = monthsLocaleCache[locale] || {};
   monthsLocaleCache[locale][style] = months;

package/components/localize/src/date/utils/forceDotsForNlnl.js

@@ -0,0 +1,11 @@
+/**
+ * @param {string[]} months
+ */
+export function forceDotsForNlnl(months) {
+  return months.map(m => {
+    if (m !== 'mei' && !m.endsWith('.')) {
+      return `${m}.`;
+    }
+    return m;
+  });
+}

package/components/localize/src/number/utils/normalize-format-number-to-parts/forceAddGroupSeparators.js

@@ -13,7 +13,7 @@ export function forceAddGroupSeparators(formattedParts, groupSeparator) {
   let integerPart;
 
   for (let i = 0; i < formattedParts.length; i += 1) {
-    if (formattedParts[i].type === 'integer') {
+    if (formattedParts[i].type === 'integer' && formattedParts[i].value.length > 3) {
       firstPart = formattedParts.splice(0, i);
       integerPart = formattedParts.splice(0, 1);
     }
@@ -66,6 +66,8 @@ export function forceAddGroupSeparators(formattedParts, groupSeparator) {
     if (firstPart) {
       concatArray = firstPart.concat(numberArray, formattedParts);
     }
+  } else {
+    return formattedParts;
   }
   return concatArray;
 }

package/components/localize/src/number/utils/normalize-format-number-to-parts/forceSymbols.js

@@ -17,6 +17,7 @@ const CURRENCY_CODE_SYMBOL_MAP = {
  * @param {string[]} currencyScope
  * @returns {FormatNumberPart[]}
  */
+// eslint-disable-next-line default-param-last
 export function forceSymbols(formattedParts, { currency, currencyDisplay } = {}, currencyScope) {
   const result = formattedParts;
   if (
@@ -44,6 +45,7 @@ export function forceSymbols(formattedParts, { currency, currencyDisplay } = {},
  */
 export function forceFRBESymbols(
   formattedParts,
+  // eslint-disable-next-line default-param-last
   { currency, currencyDisplay } = {},
   currencyScope,
 ) {

package/components/localize/src/number/utils/normalize-format-number-to-parts/normalizeIntl.js

@@ -17,6 +17,7 @@ import { forceFRBESymbols, forceSymbols } from './forceSymbols.js';
  * @param {string} _locale
  * @returns {FormatNumberPart[]}
  */
+// eslint-disable-next-line default-param-last
 export function normalizeIntl(formattedParts, options = {}, _locale) {
   let normalize = forceNormalSpaces(formattedParts);
   // Dutch and Belgian currency must be moved to end of number

package/components/localize/test/date/getMonthNames.test.js

@@ -25,6 +25,7 @@ describe('getMonthNames', () => {
     // expect(getMonthNames({ locale: 'en-GB', style: 'short' })).to.deep.equal(
     //   s`Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec`,
     // );
+    // Chromium default is leading
     expect(getMonthNames({ locale: 'nl-NL', style: 'short' })).to.deep.equal(
       s`jan. feb. mrt. apr. mei jun. jul. aug. sep. okt. nov. dec.`,
     );

package/components/localize/test-helpers/fake-imports.js

@@ -56,5 +56,6 @@ export async function fakeImport(path, ms = 0) {
       setTimeout(() => resolveOrReject(result, resolve, reject), ms);
     });
   }
+  // eslint-disable-next-line no-promise-executor-return
   return new Promise((resolve, reject) => resolveOrReject(result, resolve, reject));
 }

package/components/overlays/src/utils/adopt-styles.js

@@ -119,7 +119,7 @@ export function adoptStyle(renderRoot, style, { teardown = false } = {}) {
   if (!teardown) {
     // @ts-ignore
     // eslint-disable-next-line no-param-reassign
-    renderRoot.adoptedStyleSheets.push(sheet);
+    renderRoot.adoptedStyleSheets = [...renderRoot.adoptedStyleSheets, sheet];
   } else if (renderRoot.adoptedStyleSheets.includes(sheet)) {
     renderRoot.adoptedStyleSheets.splice(renderRoot.adoptedStyleSheets.indexOf(sheet), 1);
   }

package/components/radio-group/src/LionRadioGroup.js

@@ -23,7 +23,7 @@ export class LionRadioGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement))
         child.reset();
         // If the value was initially checked save this
         if (child.checked) {
-          initValue = child.value;
+          initValue = child.choiceValue;
         }
       }
     });