@swiftwc/ui 0.0.0-dev.103 → 0.0.0-dev.106

package/generated/components/glass-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -25,19 +25,16 @@ export class GlassButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${GlassButton.name} ⚡️ disconnect`);
+        debug(`${GlassButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${GlassButton.name} ⚡️ connect`);
+        debug(`${GlassButton.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
         el.tabIndex = 0;
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        if (devFlags.debug)
-            console.debug(`${GlassButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        debug(`${GlassButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         const node = target instanceof HTMLButtonElement;
         if (!node)
             return;

package/generated/components/glass-prominent-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -25,19 +25,16 @@ export class GlassProminentButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${GlassProminentButton.name} ⚡️ disconnect`);
+        debug(`${GlassProminentButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${GlassProminentButton.name} ⚡️ connect`);
+        debug(`${GlassProminentButton.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
         el.tabIndex = 0;
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        if (devFlags.debug)
-            console.debug(`${GlassProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        debug(`${GlassProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         const node = target instanceof HTMLButtonElement;
         if (!node)
             return;

package/generated/components/h-divider.d.ts

@@ -0,0 +1,11 @@
+export declare class HDivider extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-divider': HDivider;
+    }
+}

package/generated/components/h-divider.js

@@ -0,0 +1,15 @@
+import { debug } from '../internal/utils';
+export class HDivider extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        debug(`${HDivider.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        debug(`${HDivider.name} ⚡️ disconnect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${HDivider.name} ⚡️ attr-change [${name}]`);
+    }
+}

package/generated/components/h-stack.js

@@ -1,4 +1,4 @@
-import { devFlags } from '../internal/utils';
+import { debug } from '../internal/utils';
 /**
  * @summary A view that arranges its children side by side.
  *
@@ -16,11 +16,9 @@ export class HStack extends HTMLElement {
         super();
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${HStack.name} ⚡️ connect`);
+        debug(`${HStack.name} ⚡️ connect`);
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${HStack.name} ⚡️ disconnect`);
+        debug(`${HStack.name} ⚡️ disconnect`);
     }
 }

package/generated/components/image-view.js

@@ -1,4 +1,4 @@
-import { $, devFlags } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
@@ -20,8 +20,7 @@ export class ImageView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${ImageView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${ImageView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         if (oldValue === newValue)
             return;
         switch (name) {
@@ -58,11 +57,9 @@ export class ImageView extends HTMLElement {
         // container.classList.add(...tokens)
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ImageView.name} ⚡️ disconnect`);
+        debug(`${ImageView.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ImageView.name} ⚡️ connect`);
+        debug(`${ImageView.name} ⚡️ connect`);
     }
 }

package/generated/components/index.d.ts

@@ -13,6 +13,7 @@ export * from './fine-tooltip';
 export * from './form-view';
 export * from './glass-button';
 export * from './glass-prominent-button';
+export * from './h-divider';
 export * from './h-stack';
 export * from './image-view';
 export * from './label-view';
@@ -45,5 +46,6 @@ export * from './toggle-view';
 export * from './tool-bar-item-group';
 export * from './tool-bar-item';
 export * from './tool-bar';
+export * from './v-divider';
 export * from './v-keyboard';
 export * from './v-stack';

package/generated/components/index.js

@@ -13,6 +13,7 @@ export * from './fine-tooltip';
 export * from './form-view';
 export * from './glass-button';
 export * from './glass-prominent-button';
+export * from './h-divider';
 export * from './h-stack';
 export * from './image-view';
 export * from './label-view';
@@ -45,5 +46,6 @@ export * from './toggle-view';
 export * from './tool-bar-item-group';
 export * from './tool-bar-item';
 export * from './tool-bar';
+export * from './v-divider';
 export * from './v-keyboard';
 export * from './v-stack';

package/generated/components/label-view.js

@@ -1,4 +1,4 @@
-import { $, devFlags } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
@@ -53,8 +53,7 @@ export class LabelView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         if (oldValue === newValue)
             return;
         // this.#scheduleReflect()
@@ -77,11 +76,9 @@ export class LabelView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${LabelView.name} ⚡️ disconnect`);
+        debug(`${LabelView.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${LabelView.name} ⚡️ connect`);
+        debug(`${LabelView.name} ⚡️ connect`);
     }
 }

package/generated/components/labeled-content.js

@@ -1,4 +1,4 @@
-import { $, devFlags } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
@@ -65,8 +65,7 @@ export class LabeledContent extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${LabeledContent.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${LabeledContent.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         if (oldValue === newValue)
             return;
         switch (name) {
@@ -100,12 +99,10 @@ export class LabeledContent extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${LabeledContent.name} ⚡️ disconnect`);
+        debug(`${LabeledContent.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${LabeledContent.name} ⚡️ connect`);
+        debug(`${LabeledContent.name} ⚡️ connect`);
     }
     // <type>:<locale>;<option>=<value>;<option>=<value>
     #fmt = (value, format) => {

package/generated/components/list-view.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, listActive, onoff } from '../internal/utils';
+import { debug, listActive, onoff } from '../internal/utils';
 /**
  * @summary A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.
  *
@@ -13,13 +13,11 @@ export class ListView extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ListView.name} ⚡️ disconnect`);
+        debug(`${ListView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ListView.name} ⚡️ connect`);
+        debug(`${ListView.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(listActive(this), this).on());
     }
 }

package/generated/components/menu-view.js

@@ -1,6 +1,6 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, devFlags, onoff, touchGlass } from '../internal/utils';
+import { $, debug, onoff, touchGlass } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
@@ -34,16 +34,14 @@ export class MenuView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'open':
                 if (!this.#dialog)
                     break;
                 this.#dialog.inert = null === newValue;
                 if (null === newValue && this.#dialog.open) {
-                    if (devFlags.debug)
-                        console.debug(`${_a.name} ⚡️ will-close`);
+                    debug(`${_a.name} ⚡️ will-close`);
                     this.setAttribute('closing', '');
                     Promise.allSettled(this.#dialog.getAnimations().map(({ finished }) => finished)).then(() => {
                         if (!this.hasAttribute('closing'))
@@ -53,8 +51,7 @@ export class MenuView extends HTMLElement {
                     });
                 }
                 if ('' === newValue && !this.#dialog.open) {
-                    if (devFlags.debug)
-                        console.debug(`${_a.name} ⚡️ will-open`);
+                    debug(`${_a.name} ⚡️ will-open`);
                     this.removeAttribute('closing');
                     const form = this.#shadowRoot.querySelector('form');
                     form.scrollTop = 0;
@@ -67,16 +64,14 @@ export class MenuView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         const summaryPart = this.#shadowRoot.querySelector('[part*=menu-summary]'), dialogPart = this.#shadowRoot.querySelector('[part*=menu-dialog]');
         summaryPart?.style.removeProperty('anchor-name'); //$.prop('anchor-name', null, summaryPart)
         dialogPart?.style.removeProperty('position-anchor'); //$.prop('position-anchor', null, dialogPart)
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.#dialog = this.#shadowRoot.querySelector('dialog') ?? undefined;
         const trigger = this.#shadowRoot.querySelector('button') ?? undefined;
         CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, trigger).on());
@@ -100,8 +95,7 @@ export class MenuView extends HTMLElement {
         dialogPart?.style.setProperty('position-anchor', newAnchorName); // $.prop('position-anchor', newAnchorName, dialogPart) //
     }
     #handleDialogClick = ({ type, target }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         if (target.matches('dialog'))
@@ -118,22 +112,19 @@ export class MenuView extends HTMLElement {
         // event.stopPropagation() //NOTE: add this only if not nested, disposes all nicely if ommited
     };
     #handleTriggerClick = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', true);
     };
     // intercept to modify open attr
     #handleDialogCancel = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         evt.preventDefault();
         this.toggleAttribute('open', false);
     };
     #handleDialogClose = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', this.#shadowRoot.querySelector('dialog')?.open ?? false);
     };
 }

package/generated/components/navigation-large-title.js

@@ -1,7 +1,7 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { add, devFlags, frame, onoff, slowHideShow, timeout } from '../internal/utils';
+import { add, debug, frame, onoff, slowHideShow, timeout } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 const observing = new WeakSet();
 function observeResizeEnd(el, callback, stableFrames = 4) {
@@ -83,15 +83,13 @@ export class NavigationLargeTitle extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#clearScrollState();
         this.#styleObserver?.disconnect();
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -114,8 +112,7 @@ export class NavigationLargeTitle extends HTMLElement {
         });
     }
     #handleStyleChange = () => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ style`);
+        debug(`${_a.name} ⚡️ style`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -160,8 +157,7 @@ export class NavigationLargeTitle extends HTMLElement {
     //   this.#applySlowness(root, isIntersecting)
     // }
     #handleIntersect = (entries, { root }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
+        debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
         if (!(root instanceof HTMLElement))
             return;
         for (const { isIntersecting } of entries)

package/generated/components/navigation-split-view.js

@@ -1,5 +1,5 @@
 import { NavigationView } from '../internal/class/navigation-view';
-import { devFlags } from '../internal/utils';
+import { debug } from '../internal/utils';
 /**
  * @summary A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.
  */
@@ -8,18 +8,15 @@ export class NavigationSplitView extends NavigationView {
         super();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         super.attributeChangedCallback(name, oldValue, newValue);
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${NavigationSplitView.name} ⚡️ disconnect`);
+        debug(`${NavigationSplitView.name} ⚡️ disconnect`);
         super.disconnectedCallback();
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${NavigationSplitView.name} ⚡️ connect`);
+        debug(`${NavigationSplitView.name} ⚡️ connect`);
         super.connectedCallback();
     }
 }

package/generated/components/navigation-stack.js

@@ -1,5 +1,5 @@
 import { NavigationView } from '../internal/class/navigation-view';
-import { devFlags } from '../internal/utils';
+import { debug } from '../internal/utils';
 /**
  * @summary A container view that shows a main screen and lets the user open other screens on top of it.
  */
@@ -8,8 +8,7 @@ export class NavigationStack extends NavigationView {
         super();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         super.attributeChangedCallback(name, oldValue, newValue);
         switch (name) {
             case 'hidden':
@@ -17,13 +16,11 @@ export class NavigationStack extends NavigationView {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${NavigationStack.name} ⚡️ disconnect`);
+        debug(`${NavigationStack.name} ⚡️ disconnect`);
         super.disconnectedCallback();
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${NavigationStack.name} ⚡️ connect`);
+        debug(`${NavigationStack.name} ⚡️ connect`);
         super.connectedCallback();
     }
 }

package/generated/components/navigation-title.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var NavigationTitle_1;
 import { microtaskOnConnected } from '../internal/decorators';
-import { devFlags } from '../internal/utils';
+import { debug } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
@@ -22,17 +22,14 @@ let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElem
         super();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${NavigationTitle_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${NavigationTitle_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         this.#render(this.getAttribute('value'), this.getAttribute('subtitle'), this.getAttribute('system-image'), this.getAttribute('system-image-weight'));
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${NavigationTitle_1.name} ⚡️ disconnect`);
+        debug(`${NavigationTitle_1.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${NavigationTitle_1.name} ⚡️ connect`);
+        debug(`${NavigationTitle_1.name} ⚡️ connect`);
     }
     #render = (title, subtitle, systemImage, systemImageWeight) => {
         queryMorph(':not([slot])', html `