@lion/ui 0.0.4 → 0.0.5

package/components/calendar/src/LionCalendar.js

@@ -317,11 +317,17 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
   }
 
   /**
-   * @param {string} name
-   * @param {?} oldValue
+   * @param {string} [name]
+   * @param {unknown} [oldValue]
+   * @param {import('lit').PropertyDeclaration} [options]
+   * @returns {void}
    */
-  requestUpdate(name, oldValue) {
-    super.requestUpdate(name, oldValue);
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
+
+    if (name === undefined) {
+      return;
+    }
 
     const map = {
       disableDates: () => this.__disableDatesChanged(),

package/components/combobox/src/LionCombobox.js

@@ -378,11 +378,13 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
   }
 
   /**
-   * @param {'disabled'|'modelValue'|'readOnly'|'focused'} name
-   * @param {unknown} oldValue
+   * @param {string} [name]
+   * @param {unknown} [oldValue]
+   * @param {import('lit').PropertyDeclaration} [options]
+   * @returns {void}
    */
-  requestUpdate(name, oldValue) {
-    super.requestUpdate(name, oldValue);
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
     if (name === 'disabled' || name === 'readOnly') {
       this.__setComboboxDisabledAndReadOnly();
     }

package/components/core/src/DisabledMixin.js

@@ -58,11 +58,13 @@ const DisabledMixinImplementation = superclass =>
     }
 
     /**
-     * @param {PropertyKey} name
-     * @param {?} oldValue
+     * @param {string} [name]
+     * @param {unknown} [oldValue]
+     * @param {import('lit').PropertyDeclaration} [options]
+     * @returns {void}
      */
-    requestUpdate(name, oldValue) {
-      super.requestUpdate(name, oldValue);
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
       if (name === 'disabled') {
         if (this.__isUserSettingDisabled) {
           this.__restoreDisabledTo = this.disabled;

package/components/core/src/DisabledWithTabIndexMixin.js

@@ -60,11 +60,13 @@ const DisabledWithTabIndexMixinImplementation = superclass =>
     }
 
     /**
-     * @param {PropertyKey} name
-     * @param {?} oldValue
+     * @param {string} [name]
+     * @param {unknown} [oldValue]
+     * @param {import('lit').PropertyDeclaration} [options]
+     * @returns {void}
      */
-    requestUpdate(name, oldValue) {
-      super.requestUpdate(name, oldValue);
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
 
       if (name === 'disabled') {
         if (this.disabled) {

package/components/core/types/SlotMixinTypes.ts

@@ -60,7 +60,7 @@ export declare class SlotHost {
  *   };
  * }
  */
-export declare function SlotMixinImplementation<T extends Constructor<LitElement>>(
+declare function SlotMixinImplementation<T extends Constructor<LitElement>>(
   superclass: T,
 ): T &
   Constructor<SlotHost> &

package/components/form-core/src/FormatMixin.js

@@ -70,19 +70,21 @@ const FormatMixinImplementation = superclass =>
     }
 
     /**
-     * @param {string} name
-     * @param {any} oldVal
+     * @param {string} [name]
+     * @param {unknown} [oldValue]
+     * @param {import('lit').PropertyDeclaration} [options]
+     * @returns {void}
      */
-    requestUpdate(name, oldVal) {
-      super.requestUpdate(name, oldVal);
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
 
-      if (name === 'modelValue' && this.modelValue !== oldVal) {
-        this._onModelValueChanged({ modelValue: this.modelValue }, { modelValue: oldVal });
+      if (name === 'modelValue' && this.modelValue !== oldValue) {
+        this._onModelValueChanged({ modelValue: this.modelValue }, { modelValue: oldValue });
       }
-      if (name === 'serializedValue' && this.serializedValue !== oldVal) {
+      if (name === 'serializedValue' && this.serializedValue !== oldValue) {
         this._calculateValues({ source: 'serialized' });
       }
-      if (name === 'formattedValue' && this.formattedValue !== oldVal) {
+      if (name === 'formattedValue' && this.formattedValue !== oldValue) {
         this._calculateValues({ source: 'formatted' });
       }
     }

package/components/form-core/src/InteractionStateMixin.js

@@ -33,12 +33,14 @@ const InteractionStateMixinImplementation = superclass =>
     }
 
     /**
-     * @param {PropertyKey} name
-     * @param {*} oldVal
+     * @param {string} [name]
+     * @param {unknown} [oldValue]
+     * @param {import('lit').PropertyDeclaration} [options]
+     * @returns {void}
      */
-    requestUpdate(name, oldVal) {
-      super.requestUpdate(name, oldVal);
-      if (name === 'touched' && this.touched !== oldVal) {
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
+      if (name === 'touched' && this.touched !== oldValue) {
         this._onTouchedChanged();
       }
 
@@ -48,7 +50,7 @@ const InteractionStateMixinImplementation = superclass =>
         this.filled = !this._isEmpty();
       }
 
-      if (name === 'dirty' && this.dirty !== oldVal) {
+      if (name === 'dirty' && this.dirty !== oldValue) {
         this._onDirtyChanged();
       }
     }

package/components/form-core/src/choice-group/ChoiceInputMixin.js

@@ -52,11 +52,13 @@ const ChoiceInputMixinImplementation = superclass =>
     }
 
     /**
-     * @param {string} name
-     * @param {any} oldValue
+     * @param {string} [name]
+     * @param {unknown} [oldValue]
+     * @param {import('lit').PropertyDeclaration} [options]
+     * @returns {void}
      */
-    requestUpdate(name, oldValue) {
-      super.requestUpdate(name, oldValue);
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
 
       if (name === 'modelValue') {
         if (this.modelValue.checked !== this.checked) {

package/components/form-core/src/utils/SyncUpdatableMixin.js

@@ -93,11 +93,16 @@ const SyncUpdatableMixinImplementation = superclass =>
     }
 
     /**
-     * @param {string} name
-     * @param {*} oldValue
+     * @param {string} [name]
+     * @param {unknown} [oldValue]
+     * @param {import('lit').PropertyDeclaration} [options]
+     * @returns {void}
      */
-    requestUpdate(name, oldValue) {
-      super.requestUpdate(name, oldValue);
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
+      if (name === undefined) {
+        return;
+      }
 
       this.__SyncUpdatableNamespace = this.__SyncUpdatableNamespace || {};
       const ns = this.__SyncUpdatableNamespace;

package/components/form-core/test/utils/SyncUpdatableMixin.test.js

@@ -147,11 +147,13 @@ describe('SyncUpdatableMixin', () => {
         }
 
         /**
-         * @param {string} name
-         * @param {*} oldValue
+         * @param {string} [name]
+         * @param {unknown} [oldValue]
+         * @param {import('lit').PropertyDeclaration} [options]
+         * @returns {void}
          */
-        requestUpdate(name, oldValue) {
-          super.requestUpdate(name, oldValue);
+        requestUpdate(name, oldValue, options) {
+          super.requestUpdate(name, oldValue, options);
           if (name === 'prop') {
             propChangedCount += 1;
           }

package/components/form-core/test-suites/ValidateMixin.suite.js

@@ -64,7 +64,7 @@ export function runValidateMixinSuite(customConfig) {
      * - *feedback-node*
      *   The 'this._feedbackNode' property (usually a getter) that returns/contains a reference to
      *   the output container for validation feedback. Messages will be written to this element
-     *   based on user defined or default validity feedback visibility conditions.
+     *   based on user-defined or default validity feedback visibility conditions.
      *
      * - *show-{type}-feedback-condition*
      *   The 'this.hasErrorVisible value that stores whether the

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

@@ -1234,7 +1234,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
           </${tag}>
         `)
           );
-          const childFieldsetEl = el.querySelector(tagString);
+          const childFieldsetEl = /** @type {FormGroup} */ (el.querySelector(tagString));
           const resetGroupSpy = sinon.spy(childFieldsetEl, 'resetGroup');
           el.resetGroup();
           expect(resetGroupSpy.callCount).to.equal(1);
@@ -1270,7 +1270,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
           </${tag}>
         `)
           );
-          const childFieldsetEl = el.querySelector(tagString);
+          const childFieldsetEl = /** @type {FormGroup} */ (el.querySelector(tagString));
           const clearGroupSpy = sinon.spy(childFieldsetEl, 'clearGroup');
           el.clearGroup();
           expect(clearGroupSpy.callCount).to.equal(1);

package/components/input/src/LionInput.js

@@ -64,11 +64,13 @@ export class LionInput extends NativeTextFieldMixin(LionField) {
   }
 
   /**
-   * @param {PropertyKey} [name]
-   * @param {?} [oldValue]
+   * @param {string} [name]
+   * @param {unknown} [oldValue]
+   * @param {import('lit').PropertyDeclaration} [options]
+   * @returns {void}
    */
-  requestUpdate(name, oldValue) {
-    super.requestUpdate(name, oldValue);
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
     if (name === 'readOnly') {
       this.__delegateReadOnly();
     }

package/components/input-datepicker/src/LionInputDatepicker.js

@@ -211,11 +211,13 @@ export class LionInputDatepicker extends ScopedElementsMixin(
   }
 
   /**
-   * @param {PropertyKey} name
-   * @param {?} oldValue
+   * @param {string} [name]
+   * @param {unknown} [oldValue]
+   * @param {import('lit').PropertyDeclaration} [options]
+   * @returns {void}
    */
-  requestUpdate(name, oldValue) {
-    super.requestUpdate(name, oldValue);
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
 
     if (name === 'disabled' || name === 'readOnly') {
       this.__toggleInvokerDisabled();

package/components/input-tel/src/LionInputTel.js

@@ -14,7 +14,7 @@ import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
  * @typedef {import('awesome-phonenumber').PhoneNumberFormat} PhoneNumberFormat
  * @typedef {import('awesome-phonenumber').PhoneNumberTypes} PhoneNumberTypes
  * @typedef {import('../../form-core/types/FormatMixinTypes.js').FormatOptions} FormatOptions
- * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
+ * @typedef {* & import('awesome-phonenumber')} AwesomePhoneNumber
  * @typedef {FormatOptions & {regionCode: RegionCode; formatStrategy: PhoneNumberFormat; formatCountryCodeStyle: string;}} FormatOptionsTel
  */
 
@@ -28,7 +28,6 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
     formatCountryCodeStyle: { type: String, attribute: 'format-country-code-style' },
     activeRegion: { type: String },
     _phoneUtil: { type: Object, state: true },
-    _needsLightDomRender: { type: Number, state: true },
   };
 
   static localizeNamespaces = [
@@ -72,10 +71,12 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
   get activePhoneNumberType() {
     let pn;
     try {
-      pn = this._phoneUtil && this._phoneUtil(this.modelValue, this.activeRegion);
+      pn =
+        this._phoneUtil &&
+        this._phoneUtil.parsePhoneNumber(this.modelValue, { regionCode: this.activeRegion });
       // eslint-disable-next-line no-empty
     } catch (_) {}
-    return pn?.g?.type || 'unknown';
+    return pn?.type || 'unknown';
   }
 
   // @ts-ignore read only
@@ -169,14 +170,6 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
       ? /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil)
       : null;
 
-    /**
-     * Helper that triggers a light dom render aligned with update loop.
-     * TODO: combine with render fn of SlotMixin
-     * @protected
-     * @type {number}
-     */
-    this._needsLightDomRender = 0;
-
     if (!PhoneUtilManager.isLoaded) {
       PhoneUtilManager.loadComplete.then(() => {
         this._onPhoneNumberUtilReady();
@@ -325,7 +318,8 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
     const value = !(this.modelValue instanceof Unparseable)
       ? this.modelValue
       : this.value.match(regex)?.join('');
-    const regionDerivedFromValue = value && this._phoneUtil && this._phoneUtil(value).g?.regionCode;
+    const regionDerivedFromValue =
+      value && this._phoneUtil && this._phoneUtil.parsePhoneNumber(value).regionCode;
 
     if (regionDerivedFromValue && this._allowedOrAllRegions.includes(regionDerivedFromValue)) {
       this._setActiveRegion(regionDerivedFromValue);

package/components/input-tel/src/PhoneUtilManager.js

@@ -2,21 +2,25 @@
 let resolveLoaded;
 
 /**
- * - Handles lazy loading of the (relatively large) google-libphonenumber library, allowing
+ * @typedef {* & import('awesome-phonenumber')} AwesomePhoneNumber
+ */
+
+/**
+ * - Handles lazy loading of the awesome-phonenumber library (relatively large, but way lighter than google-libphonenumber), allowing
  * for quick first paints
  * - Maintains one instance of phoneNumberUtil that can be shared across multiple places
  * - Allows for easy mocking in unit tests
  */
 export class PhoneUtilManager {
   static async loadLibPhoneNumber() {
-    const PhoneUtil = (await import('awesome-phonenumber')).default;
-    this.PhoneUtil = PhoneUtil;
+    const PhoneUtil = /** @type {AwesomePhoneNumber} */ (await import('awesome-phonenumber'));
+    this.PhoneUtil = { ...PhoneUtil };
     resolveLoaded(undefined);
     return PhoneUtil;
   }
 
   /**
-   * Check if google-libphonenumber has been loaded
+   * Check if awesome-phonenumber has been loaded
    */
   static get isLoaded() {
     return Boolean(this.PhoneUtil);
@@ -24,7 +28,7 @@ export class PhoneUtilManager {
 }
 
 /**
- * Wait till google-libphonenumber has been loaded
+ * Wait till awesome-phonenumber has been loaded
  * @example
  * ```js
  * await PhoneUtilManager.loadComplete;

package/components/input-tel/src/formatters.js

@@ -3,7 +3,6 @@ import { PhoneUtilManager } from './PhoneUtilManager.js';
 /**
  * @typedef {import('awesome-phonenumber').PhoneNumberFormat} PhoneNumberFormat
  * @typedef {import('../types/index.js').RegionCode} RegionCode
- * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
  */
 
 /**
@@ -42,33 +41,32 @@ export function formatPhoneNumber(
     return modelValue;
   }
 
-  // eslint-disable-next-line prefer-destructuring
-  const PhoneUtil = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil);
+  const AwesomePhoneNumber = PhoneUtilManager.PhoneUtil;
 
   let pn;
   try {
-    pn = new PhoneUtil(modelValue, regionCode);
+    pn = AwesomePhoneNumber.parsePhoneNumber(modelValue, { regionCode });
     // eslint-disable-next-line no-empty
   } catch (_) {}
 
-  if (modelValue?.length >= 4 && modelValue?.length <= 16 && pn?.isValid()) {
+  if (modelValue?.length >= 4 && modelValue?.length <= 16 && pn?.valid) {
     let formattedValue;
 
     switch (formatStrategy) {
       case 'e164':
-        formattedValue = pn.getNumber('e164'); // -> '+46707123456' (default)
+        formattedValue = pn.number.e164; // -> '+46707123456' (default)
         break;
       case 'international':
-        formattedValue = pn.getNumber('international'); // -> '+46 70 712 34 56'
+        formattedValue = pn.number.international; // -> '+46 70 712 34 56'
         break;
       case 'national':
-        formattedValue = pn.getNumber('national'); // -> '070-712 34 56'
+        formattedValue = pn.number.national; // -> '070-712 34 56'
         break;
       case 'rfc3966':
-        formattedValue = pn.getNumber('rfc3966'); // -> 'tel:+46-70-712-34-56'
+        formattedValue = pn.number.rfc3966; // -> 'tel:+46-70-712-34-56'
         break;
       case 'significant':
-        formattedValue = pn.getNumber('significant'); // -> '707123456'
+        formattedValue = pn.number.significant; // -> '707123456'
         break;
       default:
         break;

package/components/input-tel/src/parsers.js

@@ -2,7 +2,6 @@ import { PhoneUtilManager } from './PhoneUtilManager.js';
 
 /**
  * @typedef {import('../types/index.js').RegionCode} RegionCode
- * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
  */
 
 /**
@@ -17,17 +16,17 @@ export function parsePhoneNumber(viewValue, { regionCode }) {
   }
 
   // eslint-disable-next-line prefer-destructuring
-  const PhoneNumber = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil);
+  const AwesomePhoneNumber = PhoneUtilManager.PhoneUtil;
   const regex = /[+0-9]+/gi;
   const strippedViewValue = viewValue.match(regex)?.join('');
   let pn;
   try {
-    pn = PhoneNumber(strippedViewValue, regionCode);
+    pn = AwesomePhoneNumber.parsePhoneNumber(strippedViewValue, { regionCode });
     // eslint-disable-next-line no-empty
   } catch (_) {}
 
   if (pn) {
-    return pn.getNumber('e164');
+    return pn.number.e164;
   }
 
   return viewValue;

package/components/input-tel/src/preprocessors.js

@@ -4,7 +4,6 @@ import { PhoneUtilManager } from './PhoneUtilManager.js';
 /**
  * @typedef {import('../types/index.js').RegionCode} RegionCode
  * @typedef {import('awesome-phonenumber').PhoneNumberFormat} PhoneNumberFormat
- * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
  */
 
 /**
@@ -27,9 +26,8 @@ export function liveFormatPhoneNumber(
     return undefined;
   }
 
-  // eslint-disable-next-line prefer-destructuring
-  const PhoneNumber = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil);
-  const ayt = PhoneNumber.getAsYouType(regionCode);
+  const AwesomePhoneNumber = PhoneUtilManager.PhoneUtil;
+  const ayt = AwesomePhoneNumber.getAsYouType(regionCode);
 
   for (const char of viewValue) {
     if (char !== '') {

package/components/input-tel/src/validators.js

@@ -3,7 +3,6 @@ import { PhoneUtilManager } from './PhoneUtilManager.js';
 
 /**
  * @typedef {import('../types/index.js').RegionCode} RegionCode
- * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
  * @typedef {import('../../form-core/types/validate/validate.js').FeedbackMessageData} FeedbackMessageData
  */
 
@@ -13,22 +12,21 @@ import { PhoneUtilManager } from './PhoneUtilManager.js';
  * @returns {false|'invalid-country-code'|'unknown'|'too-long'|'too-short'}
  */
 function hasFeedback(modelValue, regionCode) {
-  // eslint-disable-next-line prefer-destructuring
-  const PhoneNumber = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil);
+  const AwesomePhoneNumber = PhoneUtilManager.PhoneUtil;
   let invalidCountryCode = false;
 
   if (regionCode && modelValue?.length >= 4 && modelValue?.length <= 16) {
     let pn;
     try {
-      pn = PhoneNumber(modelValue, regionCode);
-      invalidCountryCode = pn.g.regionCode !== regionCode;
+      pn = AwesomePhoneNumber.parsePhoneNumber(modelValue, { regionCode });
+      invalidCountryCode = pn.regionCode !== regionCode;
       if (invalidCountryCode) {
         return 'invalid-country-code';
       }
       // eslint-disable-next-line no-empty
     } catch (_) {}
     // too-short/too-long info seems to be not there (we get 'is-possible'?)
-    const enumValue = !pn.isValid() ? pn.g.possibility : false;
+    const enumValue = !pn.valid ? pn.possibility : false;
     if (enumValue === 'is-possible') {
       return 'unknown';
     }

package/components/input-tel/test/validators.test.js

@@ -4,7 +4,7 @@ import { PhoneNumber, PhoneUtilManager } from '@lion/ui/input-tel.js';
 import { mockPhoneUtilManager, restorePhoneUtilManager } from '@lion/ui/input-tel-test-helpers.js';
 
 /**
- * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
+ * @typedef {* & import('awesome-phonenumber')} AwesomePhoneNumber
  */
 
 // For enum output, see: https://www.npmjs.com/package/awesome-phonenumber
@@ -24,6 +24,7 @@ describe('PhoneNumber validation', () => {
     expect(validator.execute('foo', 'NL')).to.equal('unknown');
   });
 
+  // TODO: this changed after awesome-phonenumber v4. Skip for now, look into this later
   it('is invalid when wrong country code is entered, returns "invalid-country-code"', () => {
     const validator = new PhoneNumber();
     // 32 is BE region code
@@ -47,12 +48,13 @@ describe('PhoneNumber validation', () => {
 
   it('handles validation via awesome-phonenumber', () => {
     const validator = new PhoneNumber();
-    const spy = sinon.spy(PhoneUtilManager, 'PhoneUtil');
+    // @ts-ignore
+    const spy = sinon.spy(PhoneUtilManager.PhoneUtil, 'parsePhoneNumber');
     validator.execute('0123456789', 'NL');
     expect(spy).to.have.been.calledOnce;
-    expect(spy.lastCall.args[1]).to.equal('NL');
+    expect(spy.lastCall.args[1]).to.eql({ regionCode: 'NL' });
     validator.execute('0123456789', 'DE');
-    expect(spy.lastCall.args[1]).to.equal('DE');
+    expect(spy.lastCall.args[1]).to.eql({ regionCode: 'DE' });
     spy.restore();
   });
 
@@ -75,7 +77,8 @@ describe('PhoneNumber validation', () => {
 
     it('waits for the lib to be loaded before execution completes when still in async mode', async () => {
       const validator = new PhoneNumber();
-      const spy = sinon.spy(PhoneUtilManager, 'PhoneUtil');
+      // @ts-ignore
+      const spy = sinon.spy(PhoneUtilManager.PhoneUtil, 'parsePhoneNumber');
       const validationResult = validator.execute('061234', 'NL');
       expect(validationResult).to.be.instanceOf(Promise);
       expect(spy).to.not.have.been.called;

package/components/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -27,7 +27,6 @@ import { getFlagSymbol } from './getFlagSymbol.js';
  * @typedef {import('../types/index.js').OnDropdownChangeEvent} OnDropdownChangeEvent
  * @typedef {import('../types/index.js').DropdownRef} DropdownRef
  * @typedef {import('../types/index.js').RegionMeta} RegionMeta
- * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
  * @typedef {import('../../select-rich/src/LionSelectRich.js').LionSelectRich} LionSelectRich
  * @typedef {import('../../overlays/src/OverlayController.js').OverlayController} OverlayController
  * @typedef {TemplateDataForDropdownInputTel & {data: {regionMetaList:RegionMeta[]}}} TemplateDataForIntlInputTel
@@ -178,9 +177,7 @@ export class LionInputTelDropdown extends LionInputTel {
 
         return {
           template: templates.dropdown(this._templateDataDropdown),
-          afterRender: () => {
-            this.__syncRegionWithDropdown();
-          },
+          afterRender: this.__syncRegionWithDropdown,
         };
       },
     };
@@ -205,8 +202,6 @@ export class LionInputTelDropdown extends LionInputTel {
   _onPhoneNumberUtilReady() {
     super._onPhoneNumberUtilReady();
     this.__createRegionMeta();
-    // render dropdown (trigger render of prefix slot via SlotMixin)
-    this.requestUpdate();
   }
 
   /**
@@ -234,19 +229,27 @@ export class LionInputTelDropdown extends LionInputTel {
     /**
      * Contains everything needed for rendering region options:
      * region code, country code, display name according to locale, display name
+     * @private
      * @type {RegionMeta[]}
      */
     this.__regionMetaList = [];
 
     /**
      * A filtered `this.__regionMetaList`, containing all regions provided in `preferredRegions`
+     * @private
      * @type {RegionMeta[]}
      */
     this.__regionMetaListPreferred = [];
 
-    /** @type {EventListener} */
+    /**
+     * @protected
+     * @type {EventListener}
+     */
     this._onDropdownValueChange = this._onDropdownValueChange.bind(this);
-    /** @type {EventListener} */
+    /**
+     * @private
+     * @type {EventListener}
+     */
     this.__syncRegionWithDropdown = this.__syncRegionWithDropdown.bind(this);
   }
 
@@ -285,6 +288,9 @@ export class LionInputTelDropdown extends LionInputTel {
     }
   }
 
+  /**
+   * @protected
+   */
   _initModelValueBasedOnDropdown() {
     if (!this._initialModelValue && !this.dirty && this._phoneUtil) {
       const countryCode = this._phoneUtil.getCountryCodeForRegionCode(this.activeRegion);

package/components/listbox/src/LionOption.js

@@ -78,11 +78,13 @@ export class LionOption extends DisabledMixin(
   }
 
   /**
-   * @param {string} name
-   * @param {unknown} oldValue
+   * @param {string} [name]
+   * @param {unknown} [oldValue]
+   * @param {import('lit').PropertyDeclaration} [options]
+   * @returns {void}
    */
-  requestUpdate(name, oldValue) {
-    super.requestUpdate(name, oldValue);
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
 
     if (name === 'active' && this.active !== oldValue) {
       this.dispatchEvent(new Event('active-changed', { bubbles: true }));