@lion/ui 0.7.2 → 0.7.3

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

@@ -164,15 +164,13 @@ export function LionButtonResetSuite({ klass = LionButtonReset } = {}) {
       const formSpyLater = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
 
       const form2El = /** @type {HTMLFormElement} */ (
-        await fixture(
-          html`
-            <div @click="${outsideSpy}">
-              <form @click="${formSpyEarly}">
-                <div @click="${insideSpy}">${lionButton}</div>
-              </form>
-            </div>
-          `,
-        )
+        await fixture(html`
+          <div @click="${outsideSpy}">
+            <form @click="${formSpyEarly}">
+              <div @click="${insideSpy}">${lionButton}</div>
+            </form>
+          </div>
+        `)
       );
       const form2Node = /** @type {HTMLFormElement} */ (form2El.querySelector('form'));
 

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

@@ -355,10 +355,12 @@ describe('<lion-calendar>', () => {
     it('has a initCentralDate() method for external contexts like datepickers', async () => {
       const initialCentralDate = new Date('2014/07/05');
       const initialSelectedDate = new Date('2014/07/07');
-      const el = await fixture(html`<lion-calendar
-        .centralDate="${initialCentralDate}"
-        .selectedDate="${initialSelectedDate}"
-      ></lion-calendar>`);
+      const el = await fixture(
+        html`<lion-calendar
+          .centralDate="${initialCentralDate}"
+          .selectedDate="${initialSelectedDate}"
+        ></lion-calendar>`,
+      );
 
       expect(el.selectedDate).to.equal(initialSelectedDate);
       expect(el.centralDate).to.equal(initialCentralDate);
@@ -408,14 +410,12 @@ describe('<lion-calendar>', () => {
       it('disables a date with disableDates function', 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 el = await fixture(html`
+          <lion-calendar
+            .selectedDate="${new Date('2000/12/01')}"
+            .disableDates=${disable15th}
+          ></lion-calendar>
+        `);
         const elObj = new CalendarObject(el);
         elObj.dayEls.forEach((d, i) => {
           const shouldBeDisabled = i === 15 - 1;
@@ -490,15 +490,13 @@ describe('<lion-calendar>', () => {
           // without normalization, selectedDate < minDate would wrongfully be disabled
           const minDate = new Date('2000-11-02T04:00:00');
 
-          const el = await fixture(
-            html`
-              <lion-calendar
-                .selectedDate="${selectedDate}"
-                .minDate="${minDate}"
-                .maxDate="${maxDate}"
-              ></lion-calendar>
-            `,
-          );
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${selectedDate}"
+              .minDate="${minDate}"
+              .maxDate="${maxDate}"
+            ></lion-calendar>
+          `);
           const elObj = new CalendarObject(el);
 
           expect(elObj.getDayObj(29).isDisabled).to.equal(false);
@@ -1531,15 +1529,13 @@ describe('<lion-calendar>', () => {
     });
 
     it('is accessible with disabled dates', async () => {
-      const el = await fixture(
-        html`
-          <lion-calendar
-            .disableDates=${
-              /** @param {Date} date */ date => date.getDay() === 6 || date.getDay() === 0
-            }
-          ></lion-calendar>
-        `,
-      );
+      const el = await fixture(html`
+        <lion-calendar
+          .disableDates=${
+            /** @param {Date} date */ date => date.getDay() === 6 || date.getDay() === 0
+          }
+        ></lion-calendar>
+      `);
       await expect(el).to.be.accessible();
     });
 

package/components/checkbox-group/test-suites/CheckboxIndeterminate.suite.js

@@ -40,8 +40,11 @@ export function runCheckboxIndeterminateSuite(customConfig) {
   let childTag;
 
   before(async () => {
+    // @ts-expect-error
     tag = unsafeStatic(cfg.tagString);
+    // @ts-expect-error
     groupTag = unsafeStatic(cfg.groupTagString);
+    // @ts-expect-error
     childTag = unsafeStatic(cfg.childTagString);
   });
 

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

@@ -2300,17 +2300,17 @@ describe('lion-combobox', () => {
             await fixture(html`
             <${tag} name="foo" autocomplete="both" multiple-choice>
               <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
-              value: 'Artichoke',
-            }}">Artichoke</lion-option>
+                value: 'Artichoke',
+              }}">Artichoke</lion-option>
               <lion-option .label="${'Chard as label'}" .choiceValue="${{
-              value: 'Chard',
-            }}">Chard</lion-option>
+                value: 'Chard',
+              }}">Chard</lion-option>
               <lion-option .label="${'Chicory as label'}" .choiceValue="${{
-              value: 'Chicory',
-            }}">Chicory</lion-option>
+                value: 'Chicory',
+              }}">Chicory</lion-option>
               <lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
-              value: 'Victoria Plum',
-            }}">Victoria Plum</lion-option>
+                value: 'Victoria Plum',
+              }}">Victoria Plum</lion-option>
             </${tag}>
           `)
           );
@@ -2353,17 +2353,17 @@ describe('lion-combobox', () => {
             await fixture(html`
             <${tag} name="foo">
               <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
-              value: 'Artichoke',
-            }}">Artichoke</lion-option>
+                value: 'Artichoke',
+              }}">Artichoke</lion-option>
               <lion-option .label="${'Chard as label'}" .choiceValue="${{
-              value: 'Chard',
-            }}" checked>Chard</lion-option>
+                value: 'Chard',
+              }}" checked>Chard</lion-option>
               <lion-option .label="${'Chicory as label'}" .choiceValue="${{
-              value: 'Chicory',
-            }}">Chicory</lion-option>
+                value: 'Chicory',
+              }}">Chicory</lion-option>
               <lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
-              value: 'Victoria Plum',
-            }}">Victoria Plum</lion-option>
+                value: 'Victoria Plum',
+              }}">Victoria Plum</lion-option>
             </${tag}>
           `)
           );
@@ -2403,17 +2403,17 @@ describe('lion-combobox', () => {
             await fixture(html`
             <${tag} name="foo" .modelValue="${{ value: 'Artichoke' }}">
               <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
-              value: 'Artichoke',
-            }}">Artichoke</lion-option>
+                value: 'Artichoke',
+              }}">Artichoke</lion-option>
               <lion-option .label="${'Chard as label'}" .choiceValue="${{
-              value: 'Chard',
-            }}">Chard</lion-option>
+                value: 'Chard',
+              }}">Chard</lion-option>
               <lion-option .label="${'Chicory as label'}" .choiceValue="${{
-              value: 'Chicory',
-            }}">Chicory</lion-option>
+                value: 'Chicory',
+              }}">Chicory</lion-option>
               <lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
-              value: 'Victoria Plum',
-            }}">Victoria Plum</lion-option>
+                value: 'Victoria Plum',
+              }}">Victoria Plum</lion-option>
             </${tag}>
           `)
           );
@@ -2450,17 +2450,17 @@ describe('lion-combobox', () => {
             await fixture(html`
             <${tag} name="foo">
               <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
-              value: 'Artichoke',
-            }}">Artichoke</lion-option>
+                value: 'Artichoke',
+              }}">Artichoke</lion-option>
               <lion-option .label="${'Chard as label'}" .choiceValue="${{
-              value: 'Chard',
-            }}">Chard</lion-option>
+                value: 'Chard',
+              }}">Chard</lion-option>
               <lion-option .label="${'Chicory as label'}" .choiceValue="${{
-              value: 'Chicory',
-            }}">Chicory</lion-option>
+                value: 'Chicory',
+              }}">Chicory</lion-option>
               <lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
-              value: 'Victoria Plum',
-            }}">Victoria Plum</lion-option>
+                value: 'Victoria Plum',
+              }}">Victoria Plum</lion-option>
             </${tag}>
           `)
           );

package/components/core/src/SlotMixin.js

@@ -131,7 +131,13 @@ const SlotMixinImplementation = superclass =>
       if (isFirstRender) {
         // @ts-expect-error wait for browser support
         const supportsScopedRegistry = !!ShadowRoot.prototype.createElement;
-        const registryRoot = supportsScopedRegistry ? this.shadowRoot || document : document;
+        const hasShadowRoot = Boolean(this.shadowRoot);
+        if (!hasShadowRoot) {
+          // TODO: throw an error in a breaking release
+          // eslint-disable-next-line no-console
+          console.error(`[SlotMixin] No shadowRoot was found`);
+        }
+        const registryRoot = supportsScopedRegistry ? this.shadowRoot : document;
 
         // @ts-expect-error wait for browser support
         const renderTargetThatRespectsShadowRootScoping = registryRoot.createElement('div');

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

@@ -208,8 +208,8 @@ describe('<lion-form>', () => {
       <lion-form>
         <form>
           <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
-      new Required(),
-    ]}></${childTag}>
+            new Required(),
+          ]}></${childTag}>
           <${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
           <button type="submit">submit</button>
         </form>
@@ -229,8 +229,8 @@ describe('<lion-form>', () => {
         <form>
           <lion-fieldset name="name">
             <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
-      new Required(),
-    ]}></${childTag}>
+              new Required(),
+            ]}></${childTag}>
             <${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
           </lion-fieldset>
           <button type="submit">submit</button>

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

@@ -788,6 +788,7 @@ export function runValidateMixinSuite(customConfig) {
           await fixture(html`
           <${tag}
             .validators="${[
+              // @ts-expect-error
               new EqualsLength(4, { getMessage: () => html`<div id="test123">test</div>` }),
             ]}" })]}"
             .modelValue="${'123'}"            

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

@@ -1485,9 +1485,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1503,9 +1503,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el2 = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1530,9 +1530,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1551,9 +1551,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el2 = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1574,9 +1574,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag}  .modelValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );
@@ -1595,9 +1595,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const el2 = /** @type {DynamicCWrapper} */ (
           await fixture(html`
         <${dynamicChildrenTag} .serializedValue="${{
-            firstName: 'foo',
-            lastName: 'bar',
-          }}">
+          firstName: 'foo',
+          lastName: 'bar',
+        }}">
         </${dynamicChildrenTag}>
       `)
         );

package/components/form-integrations/test/dialog-integrations.test.js

@@ -17,10 +17,12 @@ import '@lion/ui/define/lion-radio.js';
 // Test umbrella form inside dialog
 describe('Form inside dialog Integrations', () => {
   it('Successfully registers all form components inside a dialog', async () => {
-    const el = /** @type {LionDialog} */ await fixture(html` <lion-dialog>
-      <button slot="invoker">Open Dialog</button>
-      <umbrella-form slot="content"></umbrella-form>
-    </lion-dialog>`);
+    const el = /** @type {LionDialog} */ await fixture(
+      html` <lion-dialog>
+        <button slot="invoker">Open Dialog</button>
+        <umbrella-form slot="content"></umbrella-form>
+      </lion-dialog>`,
+    );
 
     // @ts-ignore
     const formEl = /** @type {LionForm} */ (el._overlayCtrl.contentNode._lionFormNode);

package/components/helpers/src/SbActionLogger.js

@@ -25,8 +25,17 @@ export class SbActionLogger extends LitElement {
 
           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
           display: block;
-          font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
-            BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+          font-family:
+            'Nunito Sans',
+            -apple-system,
+            '.SFNSText-Regular',
+            'San Francisco',
+            BlinkMacSystemFont,
+            'Segoe UI',
+            'Helvetica Neue',
+            Helvetica,
+            Arial,
+            sans-serif;
         }
 
         .header__info {

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

@@ -118,20 +118,18 @@ describe('lion-icon', () => {
       window.addEventListener('importDone', resolve);
     });
 
-    const el = await fixture(
-      html`
-        <lion-icon
-          .svg=${until(
-            import('./heart.svg.js').then(e => {
-              dispatchEvent(new CustomEvent('importDone'));
-              return e.default;
-            }),
-            html``,
-          )}
-          aria-label="Love"
-        ></lion-icon>
-      `,
-    );
+    const el = await fixture(html`
+      <lion-icon
+        .svg=${until(
+          import('./heart.svg.js').then(e => {
+            dispatchEvent(new CustomEvent('importDone'));
+            return e.default;
+          }),
+          html``,
+        )}
+        aria-label="Love"
+      ></lion-icon>
+    `);
 
     await svgLoading;
     // We need to await the until directive is resolved and rendered to the dom

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

@@ -36,24 +36,20 @@ describe('<lion-input-amount>', () => {
 
   it('formatAmount uses locale provided in formatOptions', async () => {
     let el = /** @type {LionInputAmount} */ (
-      await fixture(
-        html`
-          <lion-input-amount
-            .formatOptions="${{ locale: 'en-GB' }}"
-            .modelValue="${123}"
-          ></lion-input-amount>
-        `,
-      )
-    );
-    expect(el.formattedValue).to.equal('123.00');
-    el = await fixture(
-      html`
+      await fixture(html`
         <lion-input-amount
-          .formatOptions="${{ locale: 'nl-NL' }}"
+          .formatOptions="${{ locale: 'en-GB' }}"
           .modelValue="${123}"
         ></lion-input-amount>
-      `,
+      `)
     );
+    expect(el.formattedValue).to.equal('123.00');
+    el = await fixture(html`
+      <lion-input-amount
+        .formatOptions="${{ locale: 'nl-NL' }}"
+        .modelValue="${123}"
+      ></lion-input-amount>
+    `);
     expect(el.formattedValue).to.equal('123,00');
   });
 

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

@@ -286,10 +286,10 @@ describe('<lion-input-datepicker>', () => {
 
       it('converts MinDate validator to "minDate" property', async () => {
         const myMinDate = new Date('2019/06/15');
-        const el = await fixture(html` <lion-input-datepicker
-          .validators="${[new MinDate(myMinDate)]}"
-        >
-        </lion-input-datepicker>`);
+        const el = await fixture(
+          html` <lion-input-datepicker .validators="${[new MinDate(myMinDate)]}">
+          </lion-input-datepicker>`,
+        );
         const elObj = new DatepickerInputObject(el);
         await elObj.openCalendar();
 

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

@@ -637,9 +637,9 @@ describe('lion-input-file', () => {
         })
       );
 
-      const el = await fixture(
-        html` <lion-input-file multiple max-file-size="3" accept=".txt"></lion-input-file> `,
-      );
+      const el = await fixture(html`
+        <lion-input-file multiple max-file-size="3" accept=".txt"></lion-input-file>
+      `);
 
       setTimeout(() => {
         mimicSelectFile(el, [file, fileWrongSize, file2, fileWrongType]);

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

@@ -1,7 +1,8 @@
 import { runInputTelSuite } from '@lion/ui/input-tel-test-suites.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { ref } from 'lit/directives/ref.js';
-import { aTimeout, expect, fixture, html } from '@open-wc/testing';
+import { html } from 'lit';
+import { aTimeout, expect, fixture } from '@open-wc/testing';
 import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
 import { LionOption } from '@lion/ui/listbox.js';
 import { LionSelectRich } from '@lion/ui/select-rich.js';
@@ -45,8 +46,9 @@ class WithFormControlInputTelDropdown extends ScopedElementsMixin(LionInputTelDr
           ${repeat(
             data.regionMetaList,
             regionMeta => regionMeta.regionCode,
-            regionMeta =>
-              html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
+            regionMeta => html`
+              <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
+            `,
           )}
         </lion-select-rich>
       `;
@@ -85,8 +87,9 @@ describe('WithFormControlInputTelDropdown', () => {
               ${repeat(
                 data.regionMetaList,
                 regionMeta => regionMeta.regionCode,
-                regionMeta =>
-                  html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
+                regionMeta => html`
+                  <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
+                `,
               )}
             </lion-select-rich>
           `;
@@ -95,14 +98,12 @@ describe('WithFormControlInputTelDropdown', () => {
     }
     customElements.define('input-tel-dropdown-mac', InputTelDropdownMac);
     const el = /** @type {LionInputTelDropdown} */ (
-      await fixture(
-        html`
-          <input-tel-dropdown-mac
-            .allowedRegions="${['NL', 'BE']}"
-            .modelValue="${'+31612345678'}"
-          ></input-tel-dropdown-mac>
-        `,
-      )
+      await fixture(html`
+        <input-tel-dropdown-mac
+          .allowedRegions="${['NL', 'BE']}"
+          .modelValue="${'+31612345678'}"
+        ></input-tel-dropdown-mac>
+      `)
     );
     const dropdownElement = el.refs.dropdown.value;
     // @ts-expect-error [allow-protected-in-tests]
@@ -139,8 +140,9 @@ describe('WithFormControlInputTelDropdown', () => {
               ${repeat(
                 data.regionMetaList,
                 regionMeta => regionMeta.regionCode,
-                regionMeta =>
-                  html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
+                regionMeta => html`
+                  <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
+                `,
               )}
             </lion-select-rich>
           `;
@@ -149,14 +151,12 @@ describe('WithFormControlInputTelDropdown', () => {
     }
     customElements.define('input-tel-dropdown-windows', InputTelDropdownWindows);
     const el = /** @type {LionInputTelDropdown} */ (
-      await fixture(
-        html`
-          <input-tel-dropdown-windows
-            .allowedRegions="${['NL', 'BE']}"
-            .modelValue="${'+31612345678'}"
-          ></input-tel-dropdown-windows>
-        `,
-      )
+      await fixture(html`
+        <input-tel-dropdown-windows
+          .allowedRegions="${['NL', 'BE']}"
+          .modelValue="${'+31612345678'}"
+        ></input-tel-dropdown-windows>
+      `)
     );
     const dropdownElement = el.refs.dropdown.value;
     // @ts-expect-error [allow-protected-in-tests]

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

@@ -16,6 +16,7 @@ import {
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { getListboxMembers } from '../../../exports/listbox-test-helpers.js';
+import { browserDetection } from '../../core/src/browserDetection.js';
 
 /**
  * @typedef {import('../src/LionListbox.js').LionListbox} LionListbox
@@ -380,7 +381,12 @@ export function runListboxMixinSuite(customConfig = {}) {
         await aTimeout(1000);
 
         // top should be offset 2x40px (sticky header elems) instead of 0px
-        expect(el.scrollTop).to.equal(116);
+        if (browserDetection.isChrome || browserDetection.isChromium) {
+          // TODO: find out why this is different in recent Chromium
+          expect(el.scrollTop).to.equal(160);
+        } else {
+          expect(el.scrollTop).to.equal(116);
+        }
       });
     });
 
@@ -1633,8 +1639,9 @@ export function runListboxMixinSuite(customConfig = {}) {
               ${repeat(
                 this.options,
                 (/** @type {string} */ option) => option,
-                (/** @type {string} */ option) =>
-                  html` <lion-option .choiceValue="${option}">${option}</lion-option> `,
+                (/** @type {string} */ option) => html`
+                  <lion-option .choiceValue="${option}">${option}</lion-option>
+                `,
               )}
             </${tag}>
           `;

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

@@ -21,7 +21,6 @@ export function normalizeIntlDate(str, locale = '', { weekday, year, month, day
   }
 
   const result = dateString.join('');
-
   // Normalize webkit date formatting without year
   if (!year && weekday === 'long' && month === 'long' && day === '2-digit') {
     const CHINESE_LOCALES = [
@@ -43,7 +42,7 @@ export function normalizeIntlDate(str, locale = '', { weekday, year, month, day
       return result.replace(' ', '');
     }
 
-    if (result.indexOf(',') === -1 && locale === 'en-GB') {
+    if ((result.indexOf(',') === -1 && locale === 'en-GB') || locale === 'en-AU') {
       // Saturday 12 October -> Saturday, 12 October
       const match = result.match(/^(\w*) (\d*) (\w*)$/);
       if (match !== null) {
@@ -63,6 +62,18 @@ export function normalizeIntlDate(str, locale = '', { weekday, year, month, day
         return `${match[1]}, ${match[3]} ${match[2]}`;
       }
     }
+
+    if (locale === 'uk-UA') {
+      // суботу => субота
+      return result.replace('суботу', 'субота');
+    }
+  } else if (weekday === 'long' && month === 'long' && day === '2-digit') {
+    if (result.indexOf(',') === -1 && locale.startsWith('en-')) {
+      // Saturday 12 October 2023 -> Saturday, 12 October 2023
+      const [, _weekDayName, _monthDayNumber, _monthName, _year] =
+        result.match(/^(\w*) (\d*) (\w*) (\d*)$/) || [];
+      return `${_weekDayName}, ${_monthDayNumber} ${_monthName} ${_year}`;
+    }
   }
 
   return result;