@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.14

package/generated/client/index.js

@@ -14,6 +14,11 @@ for (const [k, Ctor] of Object.entries(Components)) {
         customElements.define(is, Ctor, { extends: Ctor.polyfillExtends });
         if (!(document.createElement(Ctor.polyfillExtends, { is }) instanceof Ctor))
             polyfills.set(is, Ctor);
+        // const testEl = document.createElement('template')
+        // testEl.innerHTML = `<${Ctor.polyfillExtends} is="${is}"></${Ctor.polyfillExtends}>`
+        // const testNode = testEl.content.firstElementChild,
+        if (!($(`<${Ctor.polyfillExtends} is="${is}"></${Ctor.polyfillExtends}>`) instanceof Ctor))
+            polyfills.set(is, Ctor);
         continue;
     }
     if (!customElements.get(is))

package/generated/components/tab-bar.js

@@ -25,9 +25,9 @@ export class TabBar extends DialogBase {
         }), el).on());
         // })
     }
-    static #handleClick = async (event) => {
-        console.debug(`${TabBar.name} ⚡️ ${event?.type}`);
-        if ('DIALOG' === event.target.tagName && 'tab-bar' === event.target.getAttribute('is'))
-            event?.target?.close?.();
+    static #handleClick = async (evt) => {
+        console.debug(`${TabBar.name} ⚡️ ${evt?.type}`);
+        if ('DIALOG' === evt.target.tagName && 'tab-bar' === evt.target.getAttribute('is'))
+            evt?.target?.close?.();
     };
 }

package/generated/components/tool-bar-item.js

@@ -6,8 +6,8 @@ export class ToolBarItem extends HTMLElement {
     }
     connectedCallback() {
         console.debug(`${ToolBarItem.name} ⚡️ connect`);
-        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, (event) => {
-            if (event.target.closest('menu-view[open]'))
+        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, (evt) => {
+            if (evt.target.closest('menu-view[open]'))
                 return false;
             return true;
         }), this).on());

package/generated/css/index.css

@@ -338,6 +338,7 @@
 @layer sw-base {
   :root {
     interpolate-size: allow-keywords;
+    touch-action: manipulation;
   }
   *,
   *::before,
@@ -4365,6 +4366,7 @@
     position: absolute;
     background-color: rgba(0, 0, 0, 0.4);
     pointer-events: none;
+    touch-action: none;
     position-anchor: --tab-view-tabbar-selection;
     inset: anchor(--tab-view-tabbar-selection top) auto auto anchor(--tab-view-tabbar-selection left);
     inline-size: anchor-size();
@@ -4376,6 +4378,7 @@
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
     pointer-events: all;
+    touch-action: none;
     grid-auto-flow: column;
     grid-template-rows: minmax(0, 1fr);
     margin-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
@@ -4527,6 +4530,7 @@
     position: absolute;
     background-color: rgba(0, 0, 0, 0.4);
     pointer-events: none;
+    touch-action: none;
     position-anchor: --tab-view-sidebar-selection;
     inset: anchor(--tab-view-sidebar-selection top) auto auto anchor(--tab-view-sidebar-selection left);
     inline-size: anchor-size();

package/generated/internal/utils/list-active.js

@@ -1,28 +1,73 @@
-function onClick(event) {
-    const el = event.target.closest('button,summary');
+const touchList = new WeakMap();
+function onDown(evt) {
+    const el = evt.target.closest('button,summary');
     if (!el)
         return;
+    touchList.set(el, setTimeout(() => {
+        if (!touchList.has(el))
+            return;
+        el.classList.add('active');
+    }, 70));
+    el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
+    el.closest('scroll-view')?.addEventListener('scroll', onScroll, { once: true, passive: true });
+}
+function onOver(evt) {
+    const el = evt.target.closest('button,summary');
+    if (!el)
+        return;
+    if (0 === evt.buttons)
+        return;
     el.classList.add('active');
-    el.addEventListener('pointerleave', onCancel);
+    el.removeEventListener('pointerover', onOver);
+    el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
 }
-function onCancel(event) {
-    const el = event.target.closest('button,summary');
+function onLeave(evt) {
+    const el = evt.target.closest('button,summary');
     if (!el)
         return;
-    self.requestAnimationFrame(() => {
-        el.removeEventListener('pointerleave', onCancel);
+    el.addEventListener('pointerover', onOver, { once: true, passive: true });
+    // self.requestAnimationFrame(() => {
+    el.removeEventListener('pointerleave', onLeave);
+    el.closest('scroll-view')?.removeEventListener('scroll', onScroll);
+    el.classList.remove('active');
+    if (touchList.has(el))
+        clearTimeout(touchList.get(el));
+    touchList.delete(el);
+    // })
+}
+function onCancel(evt) {
+    const el = evt.target.closest('button,summary');
+    if (!el)
+        return;
+    // self.requestAnimationFrame(() => {
+    el.removeEventListener('pointerleave', onLeave);
+    el.removeEventListener('pointerover', onOver);
+    el.closest('scroll-view')?.removeEventListener('scroll', onScroll);
+    el.classList.remove('active');
+    if (touchList.has(el))
+        clearTimeout(touchList.get(el));
+    touchList.delete(el);
+    // })
+}
+function onScroll(evt) {
+    for (const el of evt.target.querySelectorAll('button,summary')) {
         el.classList.remove('active');
-    });
+        if (touchList.has(el))
+            clearTimeout(touchList.get(el));
+        touchList.delete(el);
+        el.removeEventListener('pointerleave', onLeave);
+        el.removeEventListener('pointerover', onOver);
+    }
 }
-const makePointerDownHandler = (target) => {
-    return onClick;
+const makePointerdownHandler = (target) => {
+    return onDown;
 }, makePointerCancelHandler = (target) => {
     return onCancel;
 };
 export default function (t) {
-    const onListener = makePointerDownHandler(t), offListener = makePointerCancelHandler(t);
+    const downListener = makePointerdownHandler(t), offListener = makePointerCancelHandler(t);
     return [
-        { types: 'pointerdown', listener: onListener, addOptions: { passive: true } },
+        { types: 'pointerdown', listener: downListener, addOptions: { passive: true } },
         { types: 'pointerup pointercancel', listener: offListener, addOptions: { passive: true } },
     ];
 }

package/generated/internal/utils/touch-glass.js

@@ -1,19 +1,19 @@
-const makePointerDownHandler = (target, targetCallback, checkCallback) => {
+const makePointerdownHandler = (target, targetCallback, checkCallback) => {
     return function (evt) {
         // if (event.pointerType !== 'touch')  return
         if (!checkCallback(evt))
             return;
         targetCallback(target).toggleAttribute('touch-glass', true);
     };
-}, makePointerCancelHandler = (target, targetCallback) => {
+}, makePointercancelHandler = (target, targetCallback) => {
     return function (evt) {
         targetCallback(target).toggleAttribute('touch-glass', false);
     };
 };
 export default function (t, targetCallback, checkCallback) {
-    const onListener = makePointerDownHandler(t, targetCallback, checkCallback), offListener = makePointerCancelHandler(t, targetCallback);
+    const downListener = makePointerdownHandler(t, targetCallback, checkCallback), cancelListener = makePointercancelHandler(t, targetCallback);
     return [
-        { types: 'pointerdown', listener: onListener, addOptions: { passive: true } },
-        { types: 'pointerup pointercancel pointerleave', listener: offListener, addOptions: { passive: true } },
+        { types: 'pointerdown', listener: downListener, addOptions: { passive: true } },
+        { types: 'pointerup pointercancel pointerleave', listener: cancelListener, addOptions: { passive: true } },
     ];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.11",
+  "version": "0.0.0-dev.14",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -53,7 +53,7 @@
   },
   "scripts": {
     "prebuild": "rm -rf generated",
-    "build": "npm run build:ts && npm run build:scss",
+    "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels",
     "build:ts:watch": "npm run prebuild && tsc --watch",
     "build:ts": "tsc",
     "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",

package/scss/base/_reboot.scss

@@ -11,6 +11,8 @@
 
   :root {
     interpolate-size: allow-keywords;
+
+    touch-action: manipulation; // Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen
   }
 
   *,

package/scss/components/_tab-bar.scss

@@ -8,6 +8,7 @@
     position: absolute;
     background-color: rgba(0, 0, 0, 0.4);
     pointer-events: none;
+    touch-action: none;
 
     position-anchor: #{$anchor-name};
     // position-area: center;
@@ -161,6 +162,8 @@
 
         pointer-events: all;
 
+        touch-action: none; // important for backdrop pans!
+
         grid-auto-flow: column;
         grid-template-rows: minmax(0, 1fr);