@lion/ui 0.9.1 → 0.10.1

package/components/button/src/LionButton.js

@@ -149,7 +149,11 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
     super.updated(changedProperties);
 
     if (changedProperties.has('disabled')) {
-      this.setAttribute('aria-disabled', `${this.disabled}`); // create mixin if we need it in more places
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', 'true');
+      } else if (this.getAttribute('aria-disabled') !== null) {
+        this.removeAttribute('aria-disabled');
+      }
     }
   }
 

package/components/button/test-suites/LionButton.suite.js

@@ -40,7 +40,7 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
       el.disabled = false;
       await el.updateComplete;
       expect(el.getAttribute('tabindex')).to.equal('0');
-      expect(el.getAttribute('aria-disabled')).to.equal('false');
+      expect(el.getAttribute('aria-disabled')).to.not.exist;
       expect(el.hasAttribute('disabled')).to.equal(false);
 
       el.disabled = true;

package/components/calendar/src/LionCalendar.js

@@ -658,25 +658,16 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     day.ariaCurrent = day.today ? 'date' : undefined;
     day.disabledInfo = '';
 
+    if (day.disabled) {
+      day.disabledInfo = `${this.msgLit(`lion-calendar:defaultDisabledDate`)}`;
+    }
     if (this.minDate && normalizeDateTime(day.date) < normalizeDateTime(this.minDate)) {
       day.disabled = true;
-      // TODO: turn this into a translated string
-      day.disabledInfo = `This date is unavailable. Earliest date to select is ${
-        this.__getSelectableDateRange().earliestSelectableDate
-      }. Please select another date.`;
+      day.disabledInfo = `${this.msgLit(`lion-calendar:beforeDisabledDate`, { params: this.__getSelectableDateRange().earliestSelectableDate })}`;
     }
-
     if (this.maxDate && normalizeDateTime(day.date) > normalizeDateTime(this.maxDate)) {
       day.disabled = true;
-      // TODO: turn this into a translated string
-      day.disabledInfo = `This date is unavailable. Latest date to select is ${
-        this.__getSelectableDateRange().latestSelectableDate
-      }. Please select another date.`;
-    }
-
-    if (day.disabled) {
-      // TODO: turn this into a translated string
-      day.disabledInfo = `This date is unavailable. Please select another date`;
+      day.disabledInfo = `${this.msgLit(`lion-calendar:afterDisabledDate`, { params: this.__getSelectableDateRange().latestSelectableDate })}`;
     }
 
     return this.dayPreprocessor(day);

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

@@ -896,6 +896,94 @@ describe('<lion-calendar>', () => {
             'Next year, December 2001',
           );
         });
+
+        it('disables a date with disableDates function provide a correct message', async () => {
+          /** @param {Date} d */
+          const disable15th = d => d.getDate() === 15;
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${new Date('2000/12/01')}"
+              .disableDates=${disable15th}
+            ></lion-calendar>
+          `);
+          const elObj = new CalendarObject(el);
+          expect(elObj.getDayObj(15).isDisabled).to.equal(true);
+          expect(elObj.getDayObj(15).el).dom.to.equal(`
+            <div
+              class="calendar__day-button"
+              aria-disabled="true"
+              role="button"
+              tabindex="-1"
+              aria-pressed="false"
+              past=""
+              current-month="">
+              <span class="calendar__day-button__text">
+                15
+              </span>
+              <span class="u-sr-only">
+                December 2000 Friday This date is unavailable. Please choose another date.
+              </span>
+            </div>
+          `);
+        });
+
+        it('disables days before "minDate" property provide a correct message', async () => {
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${new Date('2000/12/31')}"
+              .minDate="${new Date('2000/12/09')}"
+            >
+            </lion-calendar>
+          `);
+          const elObj = new CalendarObject(el);
+          expect(elObj.getDayObj(1).isDisabled).to.equal(true);
+          expect(elObj.getDayObj(1).el).dom.to.equal(`
+            <div
+              class="calendar__day-button"
+              aria-disabled="true"
+              role="button"
+              tabindex="-1"
+              aria-pressed="false"
+              past=""
+              current-month="">
+              <span class="calendar__day-button__text">
+                1
+              </span>
+              <span class="u-sr-only">
+                December 2000 Friday This date is unavailable. Earliest available date is 9 December 2000. Please choose another date.
+              </span>
+            </div>
+          `);
+        });
+
+        it('disables days after "maxDate" property provide a correct message', async () => {
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${new Date('2000/12/31')}"
+              .maxDate="${new Date('2000/12/09')}"
+            >
+            </lion-calendar>
+          `);
+          const elObj = new CalendarObject(el);
+          expect(elObj.getDayObj(30).isDisabled).to.equal(true);
+          expect(elObj.getDayObj(30).el).dom.to.equal(`
+            <div
+              class="calendar__day-button"
+              aria-disabled="true"
+              role="button"
+              tabindex="-1"
+              aria-pressed="false"
+              past=""
+              current-month="">
+              <span class="calendar__day-button__text">
+                30
+              </span>
+              <span class="u-sr-only">
+                December 2000 Saturday This date is unavailable. Latest available date is 9 December 2000. Please choose another date.
+              </span>
+            </div>
+          `);
+        });
       });
     });
   });

package/components/calendar/translations/bg.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Предишен месец',
   nextFullYear: 'Следващ година',
   previousFullYear: 'Предишен година',
+  defaultDisabledDate: 'Тази дата не е налична. Моля, изберете друга дата.',
+  beforeDisabledDate:
+    'Тази дата не е налична. Най-ранната налична да е {params}. Моля, изберете друга дата.',
+  afterDisabledDate:
+    'Тази дата не е налична. Най-късната налична дата е {params}. Моля, изберете друга дата.',
 };

package/components/calendar/translations/cs.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Předchozí měsíc',
   nextFullYear: 'Příští rok',
   previousFullYear: 'Předchozí rok',
+  defaultDisabledDate: 'Toto datum není k dispozici. Vyberte jiné datum.',
+  beforeDisabledDate:
+    'Toto datum není k dispozici. Nejbližší dostupné datum je {params}. Vyberte jiné datum.',
+  afterDisabledDate:
+    'Toto datum není k dispozici. Poslední dostupné datum je {params}. Vyberte jiné datum.',
 };

package/components/calendar/translations/de.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Vorheriger Monat',
   nextFullYear: 'Nächstes Jahr',
   previousFullYear: 'Vorheriges Jahr',
+  defaultDisabledDate: 'Dieses Datum ist nicht verfügbar. Bitte wählen Sie ein anderes Datum aus.',
+  beforeDisabledDate:
+    'Dieses Datum ist nicht verfügbar. Das früheste verfügbare Datum ist {params}. Bitte wählen Sie ein anderes Datum aus.',
+  afterDisabledDate:
+    'Dieses Datum ist nicht verfügbar. Das späteste verfügbare Datum ist {params}. Bitte wählen Sie ein anderes Datum aus.',
 };

package/components/calendar/translations/en.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Previous month',
   nextFullYear: 'Next year',
   previousFullYear: 'Previous year',
+  defaultDisabledDate: 'This date is unavailable. Please choose another date.',
+  beforeDisabledDate:
+    'This date is unavailable. Earliest available date is {params}. Please choose another date.',
+  afterDisabledDate:
+    'This date is unavailable. Latest available date is {params}. Please choose another date.',
 };

package/components/calendar/translations/es.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Mes anterior',
   nextFullYear: 'Año siguiente',
   previousFullYear: 'Año anterior',
+  defaultDisabledDate: 'Esta fecha no está disponible. Elija otra.',
+  beforeDisabledDate:
+    'Esta fecha no está disponible. La fecha más próxima disponible es {params}. Elija otra.',
+  afterDisabledDate:
+    'Esta fecha no está disponible. La fecha más lejana disponible es {params}. Elija otra.',
 };

package/components/calendar/translations/fr.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Mois précédent',
   nextFullYear: 'An prochain',
   previousFullYear: 'An précédent',
+  defaultDisabledDate: "Cette date n'est pas disponible. Veuillez choisir une autre date.",
+  beforeDisabledDate:
+    "Cette date n'est pas disponible. La prochaine date disponible est la suivante : {params}. Veuillez choisir une autre date.",
+  afterDisabledDate:
+    "Cette date n'est pas disponible. La dernière date disponible est la suivante : {params}. Veuillez choisir une autre date.",
 };

package/components/calendar/translations/hu.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Előző hónap',
   nextFullYear: 'Következő év',
   previousFullYear: 'Előző év',
+  defaultDisabledDate: 'Ez a dátum nem választható. Válasszon másik dátumot.',
+  beforeDisabledDate:
+    'Ez a dátum nem választható. A legkorábbi elérhető dátum {params}. Válasszon másik dátumot.',
+  afterDisabledDate:
+    'Ez a dátum nem választható. A legkésőbbi elérhető dátum {params}. Válasszon másik dátumot.',
 };

package/components/calendar/translations/it.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Mese precedente',
   nextFullYear: 'Anno successivo',
   previousFullYear: 'Anno precedente',
+  defaultDisabledDate: "Questa data non è disponibile. Scegline un'altra.",
+  beforeDisabledDate:
+    "Questa data non è disponibile. La prima data disponibile è {params}. Scegline un'altra.",
+  afterDisabledDate:
+    "Questa data non è disponibile. L'ultima data disponibile è {params}. Scegline un'altra.",
 };

package/components/calendar/translations/nl.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Vorige maand',
   nextFullYear: 'Volgend jaar',
   previousFullYear: 'Vorig jaar',
+  defaultDisabledDate: 'Deze datum is niet beschikbaar. Kies een andere datum.',
+  beforeDisabledDate:
+    'Deze datum is niet beschikbaar. Vroegste beschikbare datum is {params}. Kies een andere datum.',
+  afterDisabledDate:
+    'Deze datum is niet beschikbaar. Laatste beschikbare datum is {params}. Kies een andere datum.',
 };

package/components/calendar/translations/pl.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Poprzedni miesiąc',
   nextFullYear: 'Następny rok',
   previousFullYear: 'Poprzedni rok',
+  defaultDisabledDate: 'Ta data jest niedostępna. Wybierz inną datę.',
+  beforeDisabledDate:
+    'Ta data jest niedostępna. Najwcześniejsza dostępna data to {params}. Wybierz inną datę.',
+  afterDisabledDate:
+    'Ta data jest niedostępna. Najpóźniejsza dostępna data to {params}. Wybierz inną datę.',
 };

package/components/calendar/translations/ro.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Luna anterioară',
   nextFullYear: 'An viitoare',
   previousFullYear: 'An anterioară',
+  defaultDisabledDate: 'Această dată nu este disponibilă. Vă rugăm să alegeți altă dată.',
+  beforeDisabledDate:
+    'Această dată nu este disponibilă. Cea mai apropiată dată disponibilă este {params}. Vă rugăm să alegeți altă dată.',
+  afterDisabledDate:
+    'Această dată nu este disponibilă. Ultima dată disponibilă este {params}. Vă rugăm să alegeți altă dată.',
 };

package/components/calendar/translations/ru.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Предыдущий месяц',
   nextFullYear: 'Следующий год',
   previousFullYear: 'Предыдущий год',
+  defaultDisabledDate: 'Эта дата недоступна. Выберите другую дату.',
+  beforeDisabledDate:
+    'Эта дата недоступна. Самая ранняя доступная дата — {params}. Выберите другую дату.',
+  afterDisabledDate:
+    'Эта дата недоступна. Самая поздняя доступная дата — {params}. Выберите другую дату.',
 };

package/components/calendar/translations/sk.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Predchádzajúci mesiac',
   nextFullYear: 'Nasledujúci rok',
   previousFullYear: 'Predchádzajúci rok',
+  defaultDisabledDate: 'Tento dátum nie je k dispozícii. Vyberte iný dátum.',
+  beforeDisabledDate:
+    'Tento dátum nie je k dispozícii. Najbližší možný dátum je {params}. Vyberte iný dátum.',
+  afterDisabledDate:
+    'Tento dátum nie je k dispozícii. Posledný možný dátum je {params}. Vyberte iný dátum.',
 };

package/components/calendar/translations/uk.js

@@ -3,4 +3,7 @@ export default {
   previousMonth: 'Попередній місяць',
   nextFullYear: 'Наступний року',
   previousFullYear: 'Попередній року',
+  defaultDisabledDate: 'Ця дата недоступна. Виберіть іншу дату.',
+  beforeDisabledDate: 'Ця дата недоступна. Найближча доступна дата {params}. Виберіть іншу дату.',
+  afterDisabledDate: 'Ця дата недоступна. Остання доступна дата {params}. Виберіть іншу дату.',
 };

package/components/calendar/translations/zh.js

@@ -3,4 +3,7 @@ export default {
   previousMonth: '前一个月',
   nextFullYear: '明一年',
   previousFullYear: '前一年',
+  defaultDisabledDate: '此日期不可选。请选择另一个日期。',
+  beforeDisabledDate: '此日期不可选。最早可选日期为 {params}。请选择另一个日期。',
+  afterDisabledDate: '此日期不可选。最晚可选日期为 {params}。请选择另一个日期。',
 };

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

@@ -229,6 +229,8 @@ describe('lion-combobox', () => {
             </lion-combobox>
           `)
         );
+        await el.updateComplete;
+
         const { _inputNode } = getComboboxMembers(el);
 
         _inputNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));

package/components/core/src/SlotMixin.js

@@ -182,6 +182,21 @@ const SlotMixinImplementation = superclass =>
       // Providing all options breaks Safari: we keep host and creationScope
       const { creationScope, host } = this.renderOptions;
       render(template, rerenderTarget, { creationScope, host, renderBefore });
+
+      // Assume we had this config:
+      // `'my-slot': () => ({ template: myBool ? html`<div id=a></div>` : html`<span id=b></span>`, renderAsDirectHostChild: true })`
+      // If myBool started as true, <div id=a></div> would be rendered in first render above, a slot would be applied,
+      // resulting in <div id=a slot=my-slot></div>
+      // However, when myBool changes to false, the <span id=b></span> would be rendered as root instead...
+      // We need to make sure that this "replaced root" gets the slot applied as well => <span id=b slot=my-slot></span>
+      const isRerenderingRootOfTemplate =
+        renderAsDirectHostChild &&
+        renderBefore.previousElementSibling &&
+        !renderBefore.previousElementSibling.slot;
+
+      if (isRerenderingRootOfTemplate) {
+        renderBefore.previousElementSibling.slot = slotName;
+      }
     }
 
     /**

package/components/core/test/ScopedElementsMixin.test.js

@@ -140,7 +140,7 @@ describe('ScopedElementsMixin', () => {
       }
       customElements.define('scoped-elements-host-no-reg-2', ScopedElementsHostNoReg2);
 
-      const errorSpy = sinon.spy(console, 'error');
+      const errorStub = sinon.stub(console, 'error');
       /** @type {ScopedElementsHostNoReg2} */ (
         await fixture(html`<scoped-elements-host-no-reg></scoped-elements-host-no-reg>`)
       );
@@ -148,7 +148,7 @@ describe('ScopedElementsMixin', () => {
         await fixture(html`<scoped-elements-host-no-reg-2></scoped-elements-host-no-reg-2>`)
       );
 
-      expect(errorSpy.args[0][0]).to.equal(
+      expect(errorStub.args[0][0]).to.equal(
         [
           'You are trying to re-register the "scoped-elements-child-no-reg" custom element with a different class via ScopedElementsMixin.',
           'This is only possible with a CustomElementRegistry.',
@@ -158,7 +158,7 @@ describe('ScopedElementsMixin', () => {
           'For more details you can visit https://open-wc.org/docs/development/scoped-elements/',
         ].join('\n'),
       );
-      errorSpy.restore();
+      errorStub.restore();
     });
   });
 });

package/components/core/test/SlotMixin.test.js

@@ -345,6 +345,56 @@ describe('SlotMixin', () => {
       expect(isActiveElement(el._focusableNode._buttonNode, { deep: true })).to.be.true;
     });
 
+    it('allows for switching template root in slot as a direct child', async () => {
+      const tagName = defineCE(
+        // @ts-expect-error
+        class extends SlotMixin(LitElement) {
+          static properties = { isSwitched: Boolean };
+
+          constructor() {
+            super();
+            this.isSwitched = false;
+          }
+
+          get slots() {
+            return {
+              ...super.slots,
+              'my-root-switcher-node': () => ({
+                template: this.isSwitched
+                  ? html`<div id="is-switched"></div>`
+                  : html`<span id="is-not-switched"> </span> `,
+                renderAsDirectHostChild: true,
+              }),
+            };
+          }
+
+          render() {
+            return html`<slot name="my-root-switcher-node"></slot>`;
+          }
+
+          get _myRootSwitcherNode() {
+            return /** @type HTMLSpanElement */ (
+              Array.from(this.children).find(elm => elm.slot === 'my-root-switcher-node')
+            );
+          }
+        },
+      );
+      const el = /** @type {* & SlotHost} */ (await fixture(`<${tagName}></${tagName}>`));
+
+      expect(el._myRootSwitcherNode.id).to.equal('is-not-switched');
+      expect(el.innerHTML).to.equal(
+        `<!--_start_slot_my-root-switcher-node_--><!----><span id="is-not-switched" slot="my-root-switcher-node"> </span> <!--_end_slot_my-root-switcher-node_-->`,
+      );
+
+      el.isSwitched = true;
+      await el.updateComplete;
+
+      expect(el._myRootSwitcherNode.id).to.equal('is-switched');
+      expect(el.innerHTML).to.equal(
+        `<!--_start_slot_my-root-switcher-node_--><!----><div id="is-switched" slot="my-root-switcher-node"></div><!--_end_slot_my-root-switcher-node_-->`,
+      );
+    });
+
     describe('firstRenderOnConnected (for backwards compatibility)', () => {
       it('does render on connected when firstRenderOnConnected:true', async () => {
         // Start with elem that does not render on connectedCallback

package/components/dialog/src/LionDialog.js

@@ -2,6 +2,18 @@ import { html, LitElement } from 'lit';
 import { OverlayMixin, withModalDialogConfig } from '@lion/ui/overlays.js';
 
 export class LionDialog extends OverlayMixin(LitElement) {
+  /** @type {any} */
+  static get properties() {
+    return {
+      isAlertDialog: { type: Boolean, attribute: 'is-alert-dialog' },
+    };
+  }
+
+  constructor() {
+    super();
+    this.isAlertDialog = false;
+  }
+
   /**
    * @protected
    */
@@ -9,6 +21,7 @@ export class LionDialog extends OverlayMixin(LitElement) {
   _defineOverlayConfig() {
     return {
       ...withModalDialogConfig(),
+      isAlertDialog: this.isAlertDialog,
     };
   }
 

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

@@ -2,6 +2,7 @@
 import { expect, fixture as _fixture, html, unsafeStatic, aTimeout } from '@open-wc/testing';
 import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js';
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
+import '../test-helpers/test-router.js';
 import '@lion/ui/define/lion-dialog.js';
 
 /**
@@ -169,6 +170,27 @@ describe('lion-dialog', () => {
   });
 
   describe('Accessibility', () => {
+    it('passes a11y audit', async () => {
+      const el = await fixture(html`
+        <lion-dialog>
+          <button slot="invoker">Invoker</button>
+          <div slot="content" class="dialog" aria-label="Dialog">Hey there</div>
+        </lion-dialog>
+      `);
+      await expect(el).to.be.accessible();
+    });
+
+    it('passes a11y audit when opened', async () => {
+      const el = await fixture(html`
+        <lion-dialog opened>
+          <button slot="invoker">Invoker</button>
+          <div slot="content" class="dialog" aria-label="Dialog">Hey there</div>
+        </lion-dialog>
+      `);
+      // error expected since we put role="none" on the dialog itself, which is valid but not recognized by Axe
+      await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
+    });
+
     it('does not add [aria-expanded] to invoker button', async () => {
       const el = await fixture(
         html` <lion-dialog>
@@ -186,5 +208,93 @@ describe('lion-dialog', () => {
       await aTimeout(0);
       expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
     });
+
+    it('has role="dialog" by default', async () => {
+      const el = await fixture(
+        html` <lion-dialog>
+          <div slot="content" class="dialog">Hey there</div>
+          <button slot="invoker">Popup button</button>
+        </lion-dialog>`,
+      );
+      const contentNode = /** @type {HTMLElement} */ (el.querySelector('[slot="content"]'));
+
+      expect(contentNode.getAttribute('role')).to.equal('dialog');
+    });
+
+    it('has role="alertdialog" by when "is-alert-dialog" is set', async () => {
+      const el = await fixture(
+        html` <lion-dialog is-alert-dialog>
+          <div slot="content" class="dialog">Hey there</div>
+          <button slot="invoker">Popup button</button>
+        </lion-dialog>`,
+      );
+      const contentNode = /** @type {HTMLElement} */ (el.querySelector('[slot="content"]'));
+
+      expect(contentNode.getAttribute('role')).to.equal('alertdialog');
+    });
+
+    it('passes a11y audit when opened and role="alertdialog"', async () => {
+      const el = await fixture(html`
+        <lion-dialog opened is-alert-dialog>
+          <button slot="invoker">Invoker</button>
+          <div slot="content" class="dialog" aria-label="Dialog">Hey there</div>
+        </lion-dialog>
+      `);
+      // error expected since we put role="none" on the dialog itself, which is valid but not recognized by Axe
+      await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('does not lose click event handler when was detached and reattached', async () => {
+      const el = await fixture(html`
+        <test-router
+          .routingMap="${{
+            a: html`
+              <lion-dialog>
+                <div slot="content" class="dialog">Hey there</div>
+                <button slot="invoker">Popup button</button>
+              </lion-dialog>
+            `,
+            b: html` <div>B</div> `,
+          }}"
+          path="a"
+        ></test-router>
+      `);
+
+      const getDialog = () =>
+        /** @type {LionDialog} */ (el.shadowRoot?.querySelector('lion-dialog'));
+      const getInvoker = () =>
+        /** @type {HTMLElement} */ (getDialog().querySelector('[slot="invoker"]'));
+
+      getInvoker().click();
+      const dialog = getDialog();
+      // @ts-expect-error [allow-protected-in-tests]
+      await dialog._overlayCtrl._showComplete;
+      expect(dialog.opened).to.be.true;
+
+      dialog.close();
+      // @ts-expect-error [allow-protected-in-tests]
+      await dialog._overlayCtrl._hideComplete;
+      expect(dialog.opened).to.be.false;
+
+      const buttonA = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('#path-a'));
+      const buttonB = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('#path-b'));
+
+      buttonB.click();
+      await el.updateComplete;
+      buttonA.click();
+      await el.updateComplete;
+      await el.updateComplete;
+
+      getInvoker().click();
+
+      const dialogAfterRouteChange = getDialog();
+      // @ts-expect-error [allow-protected-in-tests]
+      expect(dialogAfterRouteChange._overlayCtrl).not.to.be.undefined;
+      // @ts-expect-error [allow-protected-in-tests]
+      await dialogAfterRouteChange._overlayCtrl._showComplete;
+      expect(dialogAfterRouteChange.opened).to.be.true;
+    });
   });
 });

package/components/dialog/test-helpers/test-router.js

@@ -0,0 +1,43 @@
+import { html, LitElement } from 'lit';
+
+class TestRouter extends LitElement {
+  static properties = {
+    routingMap: {
+      type: Object,
+      attribute: false,
+    },
+    path: { type: String },
+  };
+
+  constructor() {
+    super();
+
+    /** @type {{ [path: string]: HTMLElement }} */
+    this.routingMap = {};
+    /** @type {string} */
+    this.path = '';
+  }
+
+  render() {
+    return html`
+      <div>
+        <div id="selector">
+          ${Object.keys(this.routingMap).map(
+            path =>
+              html`<button
+                id="path-${path}"
+                @click="${() => {
+                  this.path = path;
+                }}"
+              >
+                ${path}
+              </button>`,
+          )}
+        </div>
+        <div id="view">${this.routingMap[this.path]}</div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('test-router', TestRouter);