@lion/ui 0.18.1 → 0.19.1

package/components/input-file/translations/hu.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Már volt ilyen nevű fájl.',
   selectTextMultipleFile: 'Fájl(ok) kiválasztása',
   selectTextSingleFile: 'Fájl kiválasztása',
+  maxFileCountExceeded: 'A feltöltött fájlok száma nem haladhatja meg a {maxFileCount}-ot.',
 };

package/components/input-file/translations/id.js

@@ -16,4 +16,5 @@ export default {
   selectTextDuplicateFileName: 'File dengan nama file yang sama sudah ada.',
   selectTextMultipleFile: 'Pilih beberapa file',
   selectTextSingleFile: 'Pilih berkas',
+  maxFileCountExceeded: 'Jumlah file yang diunggah tidak boleh melebihi {maxFileCount}.',
 };

package/components/input-file/translations/it.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Un file con lo stesso nome file era già presente.',
   selectTextMultipleFile: 'Seleziona file',
   selectTextSingleFile: 'Seleziona file',
+  maxFileCountExceeded: 'Il numero di file caricati non può superare {maxFileCount}.',
 };

package/components/input-file/translations/nl.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Er bestaat al een bestand met dezelfde bestandsnaam.',
   selectTextMultipleFile: 'Selecteer bestanden',
   selectTextSingleFile: 'Selecteer bestand',
+  maxFileCountExceeded: 'Het aantal geüploade bestanden mag niet meer dan {maxFileCount} zijn.',
 };

package/components/input-file/translations/pl.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Plik o tej samej nazwie już istnieje.',
   selectTextMultipleFile: 'Wybierz pliki',
   selectTextSingleFile: 'Wybierz plik',
+  maxFileCountExceeded: 'Liczba przesłanych plików nie może przekraczać {maxFileCount}.',
 };

package/components/input-file/translations/ro.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Există deja un fişier cu acelaşi nume de fişier.',
   selectTextMultipleFile: 'Selectare fișiere',
   selectTextSingleFile: 'Selectare fișier',
+  maxFileCountExceeded: 'Numărul de fișiere încărcate nu poate depăși {maxFileCount}.',
 };

package/components/input-file/translations/ru.js

@@ -16,4 +16,5 @@ export default {
   selectTextDuplicateFileName: 'Файл с таким названием уже существует.',
   selectTextMultipleFile: 'Выберите файлы',
   selectTextSingleFile: 'Выберите файл',
+  maxFileCountExceeded: 'Количество загруженных файлов не может превышать {maxFileCount}.',
 };

package/components/input-file/translations/sk.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Súbor s rovnakým názvom súboru už existoval.',
   selectTextMultipleFile: 'Vybrať súbory',
   selectTextSingleFile: 'Vybrať súbor',
+  maxFileCountExceeded: 'Počet nahratých súborov nesmie prekročiť {maxFileCount}.',
 };

package/components/input-file/translations/uk.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Файл із такою назвою вже існував.',
   selectTextMultipleFile: 'Виберіть файли',
   selectTextSingleFile: 'Виберіть файл',
+  maxFileCountExceeded: 'Кількість завантажених файлів не може перевищувати {maxFileCount}.',
 };

package/components/input-file/translations/zh.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: '已存在具有相同文件名的文件。',
   selectTextMultipleFile: '选择多个文件',
   selectTextSingleFile: '选择文件',
+  maxFileCountExceeded: '上传的文件数量不能超过 {maxFileCount} 个。',
 };

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

@@ -137,6 +137,7 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
    */
   constructor() {
     super();
+    this.autocomplete = 'tel';
 
     /**
      * Determines what the formatter output should look like.
@@ -192,7 +193,6 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
    */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
-
     // This will trigger the right keyboard on mobile
     this._inputNode.inputMode = 'tel';
   }

package/components/input-tel/test-suites/LionInputTel.suite.js

@@ -222,6 +222,13 @@ export function runInputTelSuite({ klass = LionInputTel } = {}) {
         expect(el._inputNode.inputMode).to.equal('tel');
       });
 
+      it('sets autocomplete to "tel"', async () => {
+        const el = await fixture(html` <${tag}></${tag}> `);
+        await el.updateComplete;
+        // @ts-expect-error [allow-protected] inside tests
+        expect(el._inputNode.getAttribute('autocomplete')).to.equal('tel');
+      });
+
       it('formats according to locale', async () => {
         const el = await fixture(
           html` <${tag} .modelValue="${'+31612345678'}" .allowedRegions="${['NL']}"></${tag}> `,

package/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js

@@ -5,14 +5,27 @@
 
 // N.B. Below logic is tested in LionTooltip
 
+// TODO: this is copied from menu system. Move them to common ancestor entrypoint (maybe a core entrypoint for all interactive controls)
+/**
+ * @param {HTMLElement|undefined} item
+ */
+export function isDisabled(item) {
+  return item && (item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true');
+}
+
 /**
  * Use for tooltips and [flyout menus](https://www.w3.org/WAI/tutorials/menus/flyout/).
  * Note that it handles both mouse hover and focus interaction.
  * Provide delayIn and delayOut when the content needs a small delay before being showed
- * @param {{ delayIn?: number, delayOut?: number  }} options
+ * @param {{ isHoverSupported?: boolean, longpressDuration?: number, delayIn?: number, delayOut?: number  }} options
  * @returns {Partial<OverlayConfig>}
  */
-export function withHoverInteraction({ delayIn = 0, delayOut = 300 }) {
+export function withHoverInteraction({
+  isHoverSupported = window.matchMedia('(hover: hover)').matches,
+  longpressDuration = 500,
+  delayOut = 300,
+  delayIn = 0,
+} = {}) {
   return {
     visibilityTriggerFunction: (
       /** @type {{ controller: OverlayController }} */ { controller },
@@ -20,53 +33,146 @@ export function withHoverInteraction({ delayIn = 0, delayOut = 300 }) {
       let isFocused = false;
       let isHovered = false;
       /** @type {NodeJS.Timeout} */
-      let delayTimeout;
+      let pendingDelayTimeout;
+      /** @type {NodeJS.Timeout} */
+      let pendingLongpressTimeout;
+      let longpressCompleted = false;
+      // A tap fires pointerdown → pointerup → focusin because the browser moves keyboard focus to
+      // the tapped element. We only want focusin to open the tooltip when triggered by keyboard (Tab),
+      // not by tap. isLastPointerTouch marks that the preceding pointer event was a touch so the
+      // focusin handler can skip it.
+      let isLastPointerTouch = false;
+      // A tap fires the full mouse compatibility sequence: pointerdown → pointerup → mousedown → mouseup → click.
+      // Browsers generate these compatibility events automatically so touch works with mouse-only code.
+      // After a longpress the same click fires, which would trigger any click handler on the invoker
+      // e.g. opening a dialog alongside the tooltip. We register a capture-phase listener at longpress
+      // completion to intercept it, as capture runs before bubble so we stop it regardless of registration order.
+      /** @type {((e: Event) => void) | null} */
+      let pendingClickSuppressor = null;
 
       function resetActive() {
         isFocused = false;
         isHovered = false;
+        longpressCompleted = false;
+        if (pendingClickSuppressor) {
+          controller.invokerNode?.removeEventListener('click', pendingClickSuppressor, {
+            capture: true,
+          });
+          pendingClickSuppressor = null;
+        }
       }
 
       /**
-       * @param {Event} event
+       * @param {{ shouldOpen: boolean, openTimeout?: number, closeTimeout?: number }} cfg
        */
-      function handleOpenClosed(event) {
-        const { type } = event;
+      function openClose({ shouldOpen, openTimeout = 0, closeTimeout = 0 }) {
+        clearTimeout(pendingDelayTimeout);
+        if (shouldOpen && !isDisabled(controller.invokerNode)) {
+          pendingDelayTimeout = setTimeout(() => controller.show(), openTimeout);
+        } else {
+          pendingDelayTimeout = setTimeout(() => controller.hide(), closeTimeout);
+        }
+      }
 
-        clearTimeout(delayTimeout);
+      /**
+       * @param {Event|PointerEvent} event
+       */
+      function handleHoverAndFocus(event) {
+        const { type } = event;
         isFocused = type === 'focusout' ? false : isFocused || type === 'focusin';
         isHovered = type === 'mouseleave' ? false : isHovered || type === 'mouseenter';
+        if (!isHoverSupported && type === 'focusin') {
+          if (isLastPointerTouch) {
+            isLastPointerTouch = false;
+            return;
+          }
+          if (!controller.invokerNode?.matches(':focus-visible')) return;
+        }
         const shouldOpen = isFocused || isHovered;
+        openClose({ shouldOpen, openTimeout: delayIn, closeTimeout: delayOut });
+      }
 
-        if (shouldOpen && !controller._hasDisabledInvoker()) {
-          delayTimeout = setTimeout(() => {
-            controller.show();
-          }, delayIn);
+      /** @param {Event} e */
+      function preventContextMenu(e) {
+        e.preventDefault();
+      }
+
+      /** @param {PointerEvent} event */
+      function handleLongpress(event) {
+        clearTimeout(pendingLongpressTimeout);
+        if (event.pointerType !== 'touch') return;
+        const { type } = event;
+
+        if (type === 'pointerdown') {
+          longpressCompleted = false;
+          isLastPointerTouch = true;
+          pendingLongpressTimeout = setTimeout(() => {
+            longpressCompleted = true;
+            // Intercept the compatibility click the browser generates at the end of the touch sequence.
+            // Capture phase ensures we run before any bubble-phase handler (e.g. a dialog opener).
+            pendingClickSuppressor = e => e.stopImmediatePropagation();
+            controller.invokerNode?.addEventListener('click', pendingClickSuppressor, {
+              once: true, // auto-removes after first click
+              capture: true,
+            });
+            openClose({ shouldOpen: true });
+          }, longpressDuration);
         } else {
-          delayTimeout = setTimeout(() => {
-            controller.hide();
-          }, delayOut);
+          openClose({
+            shouldOpen: false,
+            closeTimeout: longpressCompleted ? longpressDuration : 0,
+          });
         }
       }
 
       return {
         init: () => {
           controller.addEventListener('hide', resetActive);
-          controller.contentNode?.addEventListener('mouseenter', handleOpenClosed);
-          controller.contentNode?.addEventListener('mouseleave', handleOpenClosed);
-          controller.invokerNode?.addEventListener('mouseenter', handleOpenClosed);
-          controller.invokerNode?.addEventListener('mouseleave', handleOpenClosed);
-          controller.invokerNode?.addEventListener('focusin', handleOpenClosed);
-          controller.invokerNode?.addEventListener('focusout', handleOpenClosed);
+
+          controller.invokerNode?.addEventListener('focusin', handleHoverAndFocus);
+          controller.invokerNode?.addEventListener('focusout', handleHoverAndFocus);
+
+          if (isHoverSupported) {
+            controller.contentNode?.addEventListener('mouseenter', handleHoverAndFocus);
+            controller.contentNode?.addEventListener('mouseleave', handleHoverAndFocus);
+            controller.invokerNode?.addEventListener('mouseenter', handleHoverAndFocus);
+            controller.invokerNode?.addEventListener('mouseleave', handleHoverAndFocus);
+          } else {
+            controller.invokerNode?.style.setProperty('-webkit-touch-callout', 'none');
+            controller.invokerNode?.style.setProperty('user-select', 'none');
+            controller.invokerNode?.style.setProperty('-webkit-user-select', 'none');
+            controller.invokerNode?.addEventListener('contextmenu', preventContextMenu);
+            controller.invokerNode?.addEventListener('pointerdown', handleLongpress);
+            controller.invokerNode?.addEventListener('pointerup', handleLongpress);
+            controller.invokerNode?.addEventListener('pointerleave', handleLongpress);
+          }
         },
         teardown: () => {
           controller.removeEventListener('hide', resetActive);
-          controller.contentNode?.removeEventListener('mouseenter', handleOpenClosed);
-          controller.contentNode?.removeEventListener('mouseleave', handleOpenClosed);
-          controller.invokerNode?.removeEventListener('mouseenter', handleOpenClosed);
-          controller.invokerNode?.removeEventListener('mouseleave', handleOpenClosed);
-          controller.invokerNode?.removeEventListener('focusin', handleOpenClosed);
-          controller.invokerNode?.removeEventListener('focusout', handleOpenClosed);
+
+          controller.invokerNode?.removeEventListener('focusin', handleHoverAndFocus);
+          controller.invokerNode?.removeEventListener('focusout', handleHoverAndFocus);
+
+          if (isHoverSupported) {
+            controller.contentNode?.removeEventListener('mouseenter', handleHoverAndFocus);
+            controller.contentNode?.removeEventListener('mouseleave', handleHoverAndFocus);
+            controller.invokerNode?.removeEventListener('mouseenter', handleHoverAndFocus);
+            controller.invokerNode?.removeEventListener('mouseleave', handleHoverAndFocus);
+          } else {
+            controller.invokerNode?.style.removeProperty('-webkit-touch-callout');
+            controller.invokerNode?.style.removeProperty('user-select');
+            controller.invokerNode?.style.removeProperty('-webkit-user-select');
+            controller.invokerNode?.removeEventListener('contextmenu', preventContextMenu);
+            controller.invokerNode?.removeEventListener('pointerdown', handleLongpress);
+            controller.invokerNode?.removeEventListener('pointerup', handleLongpress);
+            controller.invokerNode?.removeEventListener('pointerleave', handleLongpress);
+            if (pendingClickSuppressor) {
+              controller.invokerNode?.removeEventListener('click', pendingClickSuppressor, {
+                capture: true,
+              });
+              pendingClickSuppressor = null;
+            }
+          }
         },
       };
     },

package/components/overlays/test/withHoverInteraction.test.js

@@ -0,0 +1,118 @@
+import { OverlayController } from '@lion/ui/overlays.js';
+import { expect, fixtureSync, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import { withHoverInteraction } from '../src/configurations/visibility-trigger-partials/withHoverInteraction.js';
+
+function makeCtrl(opts = {}) {
+  return new OverlayController({
+    placementMode: 'local',
+    contentNode: /** @type {HTMLElement} */ (fixtureSync(html`<div>content</div>`)),
+    invokerNode: /** @type {HTMLElement} */ (fixtureSync(html`<button>invoker</button>`)),
+    ...withHoverInteraction(opts),
+  });
+}
+
+describe('withHoverInteraction (isHoverSupported: false)', () => {
+  /** @type {sinon.SinonFakeTimers} */
+  let clock;
+  /** @type {OverlayController} */
+  let ctrl;
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers();
+    ctrl = makeCtrl({ isHoverSupported: false });
+  });
+
+  afterEach(() => {
+    ctrl.teardown();
+    clock.restore();
+  });
+
+  it('opens after holding for longpressDuration (500ms)', async () => {
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+    );
+    clock.runAll();
+    await Promise.resolve();
+    expect(ctrl.isShown).to.equal(true);
+  });
+
+  it('stays hidden on brief touch: pointerup cancels the timer', () => {
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+    );
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerup', { pointerType: 'touch', bubbles: true }),
+    );
+    clock.tick(500);
+    expect(ctrl.isShown).to.equal(false);
+  });
+
+  it('ignores non-touch pointer events (mouse)', () => {
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerdown', { pointerType: 'mouse', bubbles: true }),
+    );
+    clock.tick(500);
+    expect(ctrl.isShown).to.equal(false);
+  });
+
+  it('auto-closes after longpressDuration once press ends', async () => {
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+    );
+    clock.runAll();
+    await Promise.resolve();
+    expect(ctrl.isShown).to.equal(true);
+
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerup', { pointerType: 'touch', bubbles: true }),
+    );
+    await clock.tickAsync(501);
+    expect(ctrl.isShown).to.equal(false);
+  });
+
+  it('disables text selection on the invoker on init and restores it on teardown', () => {
+    const { invokerNode } = ctrl;
+    const getUserSelect = () =>
+      invokerNode?.style.getPropertyValue('user-select') ||
+      invokerNode?.style.getPropertyValue('-webkit-user-select');
+    expect(getUserSelect()).to.equal('none');
+
+    ctrl.teardown();
+    expect(getUserSelect()).to.equal('');
+  });
+
+  it('does not open on tap-triggered focusin', () => {
+    ctrl.invokerNode?.dispatchEvent(new Event('focusin', { bubbles: true }));
+    clock.tick(300);
+    expect(ctrl.isShown).to.equal(false);
+  });
+
+  it('suppresses focusin that immediately follows a touch pointerdown', () => {
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+    );
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerup', { pointerType: 'touch', bubbles: true }),
+    );
+    ctrl.invokerNode?.dispatchEvent(new Event('focusin', { bubbles: true }));
+    clock.tick(1); // fires any 0ms open timer if focusin was not suppressed
+    expect(ctrl.isShown).to.equal(false);
+  });
+
+  it('suppresses the click event that fires after a completed longpress', async () => {
+    ctrl.invokerNode?.dispatchEvent(
+      new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
+    );
+    clock.runAll();
+    await Promise.resolve();
+    expect(ctrl.isShown).to.equal(true);
+
+    let clickFired = false;
+    ctrl.invokerNode?.addEventListener('click', () => {
+      clickFired = true;
+    });
+    ctrl.invokerNode?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    expect(clickFired).to.equal(false);
+  });
+});