@swiftwc/ui 0.0.0-dev.46 → 0.0.0-dev.48

package/generated/components/table-view.js

@@ -109,7 +109,7 @@ export class TableView extends HTMLElement {
     #handleColumnSlotchange = ({ type, target: slot }) => {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(slot instanceof HTMLSlotElement && slot))
+        if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
         this.#observers.syncObservations(assigned);
@@ -164,7 +164,7 @@ export class TableView extends HTMLElement {
         }
     };
     #handleMenuClick = ({ target }) => {
-        if (!(target instanceof HTMLElement && target))
+        if (!(target instanceof HTMLElement))
             return;
         const btn = target.closest('button');
         if (!btn)

package/generated/components/text-field.d.ts

@@ -10,9 +10,9 @@ export declare class TextField extends FormAssociatedBase {
     static get observedAttributes(): string[];
     static get template(): DocumentFragment;
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
     get keyboardType(): KeyboardType;
     get text(): string;
     set text(v: string);

package/generated/components/text-field.js

@@ -64,18 +64,6 @@ export class TextField extends FormAssociatedBase {
             this.text = this.text;
         }, I18n.on).on());
     }
-    connectedCallback() {
-        super.connectedCallback();
-        // finally
-        if (!this.hasAttribute('text'))
-            return;
-        this.text = this.getAttribute('text') ?? ''; // this.#input.value = this.getAttribute('text') ?? ''
-        this.#sendValueToForm(false);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#validityObservers.unobserveAll();
-    }
     attributeChangedCallback(name, oldValue, newValue) {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
@@ -181,6 +169,18 @@ export class TextField extends FormAssociatedBase {
                 break;
         }
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#validityObservers.unobserveAll();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // finally
+        if (!this.hasAttribute('text'))
+            return;
+        this.text = this.getAttribute('text') ?? ''; // this.#input.value = this.getAttribute('text') ?? ''
+        this.#sendValueToForm(false);
+    }
     get keyboardType() {
         return keyboardTypes.includes(this.getAttribute('keyboard-type') ?? '') ? this.getAttribute('keyboard-type') : 'default';
     }
@@ -202,7 +202,7 @@ export class TextField extends FormAssociatedBase {
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(slot instanceof HTMLSlotElement && slot))
+        if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
         this.#validityObservers.syncObservations(assigned, ['value', 'label']);
@@ -245,7 +245,7 @@ export class TextField extends FormAssociatedBase {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
-        if (!(input instanceof HTMLInputElement && input))
+        if (!(input instanceof HTMLInputElement))
             return;
         evt.preventDefault();
         const data = this.#identity(evt.clipboardData?.getData('text') ?? ''); // number is now sanitized but contains edge cases like '+' and also global one separator that could be wither dot or decimal.
@@ -349,7 +349,7 @@ export class TextField extends FormAssociatedBase {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
-        if (!(input instanceof HTMLInputElement && input))
+        if (!(input instanceof HTMLInputElement))
             return;
         if ('insertText' !== evt.inputType)
             return;
@@ -384,7 +384,7 @@ export class TextField extends FormAssociatedBase {
     #handleInputBlur = ({ type, target: input }) => {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(input instanceof HTMLInputElement && input))
+        if (!(input instanceof HTMLInputElement))
             return;
         if (0 === input.value.length)
             return;

package/generated/components/tool-bar-item.d.ts

@@ -2,7 +2,7 @@ export declare class ToolBarItem extends HTMLElement {
     #private;
     static get observedAttributes(): string[];
     constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

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

@@ -17,23 +17,6 @@ let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
     constructor() {
         super();
     }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ToolBarItem_1.name} ⚡️ disconnect`);
-        this.#mutationObserver?.disconnect();
-        CleanupRegistry.unregister(this);
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ToolBarItem_1.name} ⚡️ connect`);
-        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, ({ target }) => {
-            if (!(target instanceof HTMLElement && target))
-                return true;
-            if (target.closest('menu-view[open]'))
-                return false;
-            return true;
-        }), this).on());
-    }
     attributeChangedCallback(name, oldValue, newValue) {
         if (devFlags.debug)
             console.debug(`${ToolBarItem_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
@@ -48,7 +31,7 @@ let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
                         ensurePlaceholder(this.querySelector(':scope>button'), role, tKey);
                         this.#mutationObserver = new MutationObserver((mutations) => {
                             for (const { target } of mutations)
-                                if (target instanceof HTMLElement && target)
+                                if (target instanceof HTMLElement)
                                     ensurePlaceholder(this.querySelector(':scope>button'), role, tKey);
                         });
                         this.#mutationObserver.observe(this, {
@@ -59,6 +42,23 @@ let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
             }
         }
     }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ToolBarItem_1.name} ⚡️ disconnect`);
+        this.#mutationObserver?.disconnect();
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ToolBarItem_1.name} ⚡️ connect`);
+        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, ({ target }) => {
+            if (!(target instanceof HTMLElement))
+                return true;
+            if (target.closest('menu-view[open]'))
+                return false;
+            return true;
+        }), this).on());
+    }
 };
 ToolBarItem = ToolBarItem_1 = __decorate([
     adaptiveSlot((el) => !el.closest('tool-bar-item-group'))

package/generated/css/index.css

@@ -5253,9 +5253,63 @@
   :where([foreground=blue]) {
     color: var(--blue);
   }
+  :where([foreground=red]) {
+    color: var(--red);
+  }
+  :where([foreground=green]) {
+    color: var(--green);
+  }
+  :where([foreground=orange]) {
+    color: var(--orange);
+  }
   :where([foreground="blue.secondary"]) {
     color: var(--blue2);
   }
+  :where([foreground="red.secondary"]) {
+    color: var(--red2);
+  }
+  :where([foreground="green.secondary"]) {
+    color: var(--green2);
+  }
+  :where([foreground="orange.secondary"]) {
+    color: var(--orange2);
+  }
+  :where([foreground="blue.tertiary"]) {
+    color: var(--blue3);
+  }
+  :where([foreground="red.tertiary"]) {
+    color: var(--red3);
+  }
+  :where([foreground="green.tertiary"]) {
+    color: var(--green3);
+  }
+  :where([foreground="orange.tertiary"]) {
+    color: var(--orange3);
+  }
+  :where([foreground="blue.quaternary"]) {
+    color: var(--blue4);
+  }
+  :where([foreground="red.quaternary"]) {
+    color: var(--red4);
+  }
+  :where([foreground="green.quaternary"]) {
+    color: var(--green4);
+  }
+  :where([foreground="orange.quaternary"]) {
+    color: var(--orange4);
+  }
+  :where([foreground="blue.quinary"]) {
+    color: var(--blue5);
+  }
+  :where([foreground="red.quinary"]) {
+    color: var(--red5);
+  }
+  :where([foreground="green.quinary"]) {
+    color: var(--green5);
+  }
+  :where([foreground="orange.quinary"]) {
+    color: var(--orange5);
+  }
   :where([tint=gray],
   [list-item-tint=gray]) {
     --accentColorEffective: var(--gray);

package/generated/internal/class/navigation-view.d.ts

@@ -2,7 +2,7 @@ export declare class NavigationView extends HTMLElement {
     #private;
     static get observedAttributes(): string[];
     constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

package/generated/internal/class/navigation-view.js

@@ -11,30 +11,6 @@ export class NavigationView extends HTMLElement {
     constructor() {
         super();
     }
-    disconnectedCallback() {
-        CleanupRegistry.unregister(this);
-        this.#recentBefore = undefined;
-        // this.removeEventListener('tabreveal', this.#handleTabReveal)
-        if (this.closest('tab-view'))
-            frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('tabhide', { detail: { tag: this.id }, bubbles: true, composed: true })));
-    }
-    connectedCallback() {
-        if (this.closest('tab-view')) {
-            // frame(this).then((r) => {
-            //   if (!r) return
-            //   this.dispatchEvent(new CustomEvent<TabDetail>('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true }))
-            // })
-            CleanupRegistry.register(this, onoff('beforetabreveal beforetabswap', this.#handleBeforeTabRevealOrSwap, this).on());
-        }
-        // Snapshot.waitReady.then(async () => {
-        if (this.hasAttribute('hidden'))
-            return; // will be picked up by attr-change!
-        if (this.closest('tab-view'))
-            frame(this).then(() => {
-                // if (!r) return
-                lifecycleObserver.dispatchEvent(new CustomEvent('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true }));
-            });
-    }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
             case 'hidden':
@@ -42,15 +18,14 @@ export class NavigationView extends HTMLElement {
                     break;
                 if (!this.closest('tab-view'))
                     break; // tabview stuff
+                // trigger show/hide/reveal/swap on NEXT tick
+                // show/hide run on initial render too (show on NEXT tick, is also taken care of on connected on initial render)
                 let eventType = this.hasAttribute(name) ? 'tabhide' : 'tabshow', target = lifecycleObserver;
                 // isRecent by 100ms window
-                if (this.#recentBefore && performance.now() - this.#recentBefore.time <= 100) {
-                    if (this.#recentBefore.type === 'beforetabreveal') {
-                        eventType = 'tabreveal';
-                        target = this;
-                    }
-                    else if (this.#recentBefore.type === 'beforetabswap') {
-                        eventType = 'tabswap';
+                // && performance.now() - this.#recentBefore.time <= 100) {
+                if (this.#recentBefore) {
+                    if (['beforetabreveal', 'beforetabswap'].includes(this.#recentBefore.type)) {
+                        eventType = this.#recentBefore.type === 'beforetabreveal' ? 'tabreveal' : 'tabswap';
                         target = this;
                     }
                     // consume it (important so it doesn’t leak to next change)
@@ -58,22 +33,40 @@ export class NavigationView extends HTMLElement {
                 }
                 if (devFlags.debug)
                     console.debug(`${_a.name} 💡 ${eventType}`);
-                frame(this).then(() => {
-                    // if (!r) return
-                    target.dispatchEvent(new CustomEvent(eventType, { detail: { tag: this.id }, bubbles: true, composed: true }));
-                });
+                frame(this).then(() => target.dispatchEvent(new CustomEvent(eventType, { detail: { tag: this.id }, bubbles: true, composed: true })));
                 break;
         }
     }
-    #handleBeforeTabRevealOrSwap = (evt) => {
+    disconnectedCallback() {
+        CleanupRegistry.unregister(this);
+        this.#recentBefore = undefined;
+        // trigger hide on NEXT tick
+        if (!this.closest('tab-view'))
+            return;
+        frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('tabhide', { detail: { tag: this.id }, bubbles: true, composed: true })));
+    }
+    connectedCallback() {
+        if (!this.closest('tab-view'))
+            return;
+        // wire befores
+        CleanupRegistry.register(this, onoff('beforetabreveal beforetabswap', this.#handleBeforeTabRevealOrSwap, this).on());
+        // trigger show on NEXT tick
+        if (this.hasAttribute('hidden'))
+            return; // skip if already rendered by attr-change during upgrade!
+        frame(this).then(() => lifecycleObserver.dispatchEvent(new CustomEvent('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true })));
+    }
+    #handleBeforeTabRevealOrSwap = ({ type, detail }) => {
         if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if (this.id !== evt.detail?.tag)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (this.id !== detail?.tag)
             return;
         this.#recentBefore = {
-            type: evt.type, // beforetabreveal / beforetabswap
+            type, // beforetabreveal / beforetabswap
             time: performance.now(),
         };
+        self.queueMicrotask(() => {
+            this.#recentBefore = undefined;
+        }); // auto-expire after current task
     };
 }
 _a = NavigationView;

package/generated/internal/decorators/index.d.ts

@@ -2,3 +2,5 @@ export { default as adaptiveSlot } from './adaptive-slot';
 export * from './adaptive-slot';
 export { default as customElement } from './custom-element';
 export * from './custom-element';
+export { default as microtaskOnConnected } from './microtask-on-connected';
+export * from './microtask-on-connected';

package/generated/internal/decorators/index.js

@@ -2,3 +2,5 @@ export { default as adaptiveSlot } from './adaptive-slot';
 export * from './adaptive-slot';
 export { default as customElement } from './custom-element';
 export * from './custom-element';
+export { default as microtaskOnConnected } from './microtask-on-connected';
+export * from './microtask-on-connected';

package/generated/internal/decorators/microtask-on-connected.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Replacement for this
+class() {
+#pendingSync = false
+  #scheduleSync() {
+    if (this.#pendingSync) return
+    this.#pendingSync = true
+    self.queueMicrotask(() => {
+      this.#pendingSync = false
+      this.#syncSibling()
+    })
+  }
+  #syncSibling = () => {
+    const sibling = this.closest<ScrollView>('scroll-view'),
+      value = this.getAttribute('value'),
+      subtitle = this.getAttribute('subtitle')
+
+    if (null === value) sibling?.removeAttribute('navigation-inline-title')
+    else sibling?.setAttribute('navigation-inline-title', value)
+
+    if (null === subtitle) sibling?.removeAttribute('navigation-inline-subtitle')
+    else sibling?.setAttribute('navigation-inline-subtitle', subtitle)
+  }
+}
+  connectedCallback() {
+    if (devFlags.debug) console.debug(`${NavigationTitle.name} ⚡️ connect`)
+
+    this.#scheduleSync()
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    if (devFlags.debug) console.debug(`${NavigationTitle.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`)
+
+    this.#scheduleSync()
+
+    this.#render(this.getAttribute('value'), this.getAttribute('subtitle'))
+  }
+ */
+export default function <T extends HTMLElement>(fn: (el: T) => void): <C extends CustomElementConstructor>(Base: C, _context?: ClassDecoratorContext<C>) => void;

package/generated/internal/decorators/microtask-on-connected.js

@@ -0,0 +1,67 @@
+/**
+ * Replacement for this
+class() {
+#pendingSync = false
+  #scheduleSync() {
+    if (this.#pendingSync) return
+    this.#pendingSync = true
+    self.queueMicrotask(() => {
+      this.#pendingSync = false
+      this.#syncSibling()
+    })
+  }
+  #syncSibling = () => {
+    const sibling = this.closest<ScrollView>('scroll-view'),
+      value = this.getAttribute('value'),
+      subtitle = this.getAttribute('subtitle')
+
+    if (null === value) sibling?.removeAttribute('navigation-inline-title')
+    else sibling?.setAttribute('navigation-inline-title', value)
+
+    if (null === subtitle) sibling?.removeAttribute('navigation-inline-subtitle')
+    else sibling?.setAttribute('navigation-inline-subtitle', subtitle)
+  }
+}
+  connectedCallback() {
+    if (devFlags.debug) console.debug(`${NavigationTitle.name} ⚡️ connect`)
+
+    this.#scheduleSync()
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    if (devFlags.debug) console.debug(`${NavigationTitle.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`)
+
+    this.#scheduleSync()
+
+    this.#render(this.getAttribute('value'), this.getAttribute('subtitle'))
+  }
+ */
+// const _sync = Symbol('sync')
+// @microtaskOnConnected((el) => (el as NavigationTitle)[_sync]())
+// attributeChangedCallback fires
+//   → originalAttrChanged (your #render) runs synchronously  ✅
+//   → schedule() queues microtask
+//     → microtask flush: syncToScrollView runs with already-updated attrs ✅
+export default function (fn) {
+    return function (Base, _context) {
+        const originalConnected = Base.prototype.connectedCallback, originalAttrChanged = Base.prototype.attributeChangedCallback;
+        Base.prototype.connectedCallback = function () {
+            originalConnected?.call(this);
+            schedule(this, fn);
+        };
+        Base.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
+            originalAttrChanged?.call(this, name, oldValue, newValue);
+            schedule(this, fn);
+        };
+    };
+}
+const pendingMap = new WeakMap();
+function schedule(el, fn) {
+    if (pendingMap.get(el))
+        return;
+    pendingMap.set(el, true);
+    self.queueMicrotask(() => {
+        pendingMap.delete(el);
+        fn(el);
+    });
+}

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

@@ -1,6 +1,6 @@
 const touchList = new WeakMap();
 function onDown({ target }) {
-    if (!(target instanceof HTMLElement && target))
+    if (!(target instanceof HTMLElement))
         return;
     const el = target.closest('button,summary');
     if (!el)
@@ -14,7 +14,7 @@ function onDown({ target }) {
     el.closest('scroll-view')?.addEventListener('scroll', onScroll, { once: true, passive: true });
 }
 function onOver({ target, buttons }) {
-    if (!(target instanceof HTMLElement && target))
+    if (!(target instanceof HTMLElement))
         return;
     const el = target.closest('button,summary');
     if (!el)
@@ -26,7 +26,7 @@ function onOver({ target, buttons }) {
     el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
 }
 function onLeave({ target }) {
-    if (!(target instanceof HTMLElement && target))
+    if (!(target instanceof HTMLElement))
         return;
     const el = target.closest('button,summary');
     if (!el)
@@ -42,7 +42,7 @@ function onLeave({ target }) {
     // })
 }
 function onCancel({ target }) {
-    if (!(target instanceof HTMLElement && target))
+    if (!(target instanceof HTMLElement))
         return;
     const el = target.closest('button,summary');
     if (!el)
@@ -58,7 +58,7 @@ function onCancel({ target }) {
     // })
 }
 function onScroll({ target }) {
-    if (!(target instanceof HTMLElement && target))
+    if (!(target instanceof HTMLElement))
         return;
     for (const el of target.querySelectorAll('button,summary') ?? []) {
         el.classList.remove('active');

package/generated/namespace-browser/base.d.ts

@@ -3,43 +3,43 @@ export declare abstract class DialogBase extends HTMLDialogElement {
     static polyfillConnectedCallback(el: HTMLDialogElement): void;
     static polyfillDisconnectedCallback(el: HTMLDialogElement): void;
     static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
 export declare abstract class InputBase extends HTMLInputElement {
     static polyfillExtends: "input";
     static polyfillConnectedCallback(el: HTMLInputElement): void;
     static polyfillDisconnectedCallback(el: HTMLInputElement): void;
     static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
 export declare abstract class ButtonBase extends HTMLButtonElement {
     static polyfillExtends: "button";
     static polyfillConnectedCallback(el: HTMLButtonElement): void;
     static polyfillDisconnectedCallback(el: HTMLButtonElement): void;
     static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
 export declare abstract class DetailsBase extends HTMLDetailsElement {
     static polyfillExtends: "details";
     static polyfillConnectedCallback(el: HTMLDetailsElement): void;
     static polyfillDisconnectedCallback(el: HTMLDetailsElement): void;
     static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
 export declare abstract class FormBase extends HTMLFormElement {
     static polyfillExtends: "form";
     static polyfillConnectedCallback(el: HTMLFormElement): void;
     static polyfillDisconnectedCallback(el: HTMLFormElement): void;
     static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }