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

package/generated/components/v-keyboard.js

@@ -1,6 +1,6 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, devFlags, frame, onoff, sleep } from '../internal/utils';
+import { debug, frame, onoff, prop, sleep } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 /**
  * BUG: Safari on IOS reports inaccurate innerHeight (which is what we really want) on orientationchange.
@@ -22,13 +22,11 @@ export class VKeyboard extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.inert = true;
         CleanupRegistry.register(this, onoff([
             { types: 'scroll', listener: this.#handleWindowScroll },
@@ -54,21 +52,19 @@ export class VKeyboard extends HTMLElement {
     #handleVisualViewportResize = () => {
         const dvh = self.visualViewport?.height ?? 0, fullLvh = this.offsetHeight;
         const diff = Math.abs(self.outerHeight - (this.#shouldKeyboardBeOpenCallback() ? dvh : fullLvh));
-        $.prop('--100lvh', 30 < diff ? `${dvh}px` : `${fullLvh}px`, document.documentElement); //document.documentElement.style.setProperty('--100lvh', 30 < diff ? `${dvh}px` : `${fullLvh}px`)
-        $.prop('--keyboard-inset-top', 30 < diff ? `${dvh}px` : `${fullLvh}px`, document.documentElement); //document.documentElement.style.setProperty('--keyboard-inset-top', 30 < diff ? `${dvh}px` : `${fullLvh}px`)
-        $.prop('--keyboard-inset-height', 30 < diff ? `${diff}px` : `0px`, document.documentElement); //document.documentElement.style.setProperty('--keyboard-inset-height', 30 < diff ? `${diff}px` : `0px`)
+        prop('--100lvh', 30 < diff ? `${dvh}px` : `${fullLvh}px`, document.documentElement); //document.documentElement.style.setProperty('--100lvh', 30 < diff ? `${dvh}px` : `${fullLvh}px`)
+        prop('--keyboard-inset-top', 30 < diff ? `${dvh}px` : `${fullLvh}px`, document.documentElement); //document.documentElement.style.setProperty('--keyboard-inset-top', 30 < diff ? `${dvh}px` : `${fullLvh}px`)
+        prop('--keyboard-inset-height', 30 < diff ? `${diff}px` : `0px`, document.documentElement); //document.documentElement.style.setProperty('--keyboard-inset-height', 30 < diff ? `${diff}px` : `0px`)
         self.scrollTo(0, 0);
     };
     #handleWindowOrientationchange = async () => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ orientationchange`);
+        debug(`${_a.name} ⚡️ orientationchange`);
         if (!(await frame(this)))
             return; //self.requestAnimationFrame(this.#ifKeyboardScrollIntoActiveElement)
         this.#ifKeyboardScrollIntoActiveElement();
     };
     #handleBodyFocusin = async () => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ focusin`);
+        debug(`${_a.name} ⚡️ focusin`);
         await sleep(100); // self.setTimeout(this.#ifKeyboardScrollIntoActiveElement, 100)
         if (!this.isConnected)
             return;

package/generated/components/v-stack.js

@@ -1,4 +1,4 @@
-import { devFlags } from '../internal/utils';
+import { debug } from '../internal/utils';
 /**
  * @summary A view that arranges its children one on top of the other.
  *
@@ -19,11 +19,9 @@ export class VStack extends HTMLElement {
         super();
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${VStack.name} ⚡️ connect`);
+        debug(`${VStack.name} ⚡️ connect`);
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${VStack.name} ⚡️ disconnect`);
+        debug(`${VStack.name} ⚡️ disconnect`);
     }
 }

package/generated/css/index.css

@@ -1132,7 +1132,9 @@
   text-field:not([hidden]),
   detail-placeholder:not([hidden]),
   sticky-container:not([hidden]),
-  picker-view:not([hidden])) {
+  picker-view:not([hidden]),
+  h-divider:not([hidden]),
+  v-divider:not([hidden])) {
     display: grid;
   }
   :where(tab-view:has(navigation-stack:not(:defined),
@@ -1163,7 +1165,9 @@
   text-field:not(:defined),
   detail-placeholder:not(:defined),
   sticky-container:not(:defined),
-  picker-view:not(:defined)), navigation-split-view:has(navigation-stack:not(:defined),
+  picker-view:not(:defined),
+  h-divider:not(:defined),
+  v-divider:not(:defined)), navigation-split-view:has(navigation-stack:not(:defined),
   navigation-split-view:not(:defined),
   navigation-large-title:not(:defined),
   navigation-title:not(:defined),
@@ -1191,7 +1195,9 @@
   text-field:not(:defined),
   detail-placeholder:not(:defined),
   sticky-container:not(:defined),
-  picker-view:not(:defined)), navigation-stack:has(navigation-stack:not(:defined),
+  picker-view:not(:defined),
+  h-divider:not(:defined),
+  v-divider:not(:defined)), navigation-stack:has(navigation-stack:not(:defined),
   navigation-split-view:not(:defined),
   navigation-large-title:not(:defined),
   navigation-title:not(:defined),
@@ -1219,7 +1225,9 @@
   text-field:not(:defined),
   detail-placeholder:not(:defined),
   sticky-container:not(:defined),
-  picker-view:not(:defined))) {
+  picker-view:not(:defined),
+  h-divider:not(:defined),
+  v-divider:not(:defined))) {
     visibility: hidden;
   }
   :where([is=search-view]:not([hidden]),
@@ -5303,7 +5311,7 @@
       --picker--stack-grid-border: if(
         style(--picker-style: sheet): var(--itemborder,) ; style(--picker-style: navigation-link): var(--itemborder,) ; style(--picker-style: menu): var(--itemborder,) ;
       );
-      --picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
+      --picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): start ;);
     }
   }
   @supports not (x: if(else:red)) {

package/generated/internal/class/css-style-observer.js

@@ -1,5 +1,5 @@
 var _a;
-import { devFlags, onoff } from '../../internal/utils';
+import { debug, onoff } from '../../internal/utils';
 export class CSSStyleObserver {
     #cleanups;
     #options;
@@ -16,8 +16,7 @@ export class CSSStyleObserver {
         this.#cleanups?.();
     }
     #handleTransitionrun = (callback, evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type} (${evt.propertyName})`);
+        debug(`${_a.name} ⚡️ ${evt?.type} (${evt.propertyName})`);
         if (!this.#options?.properties.some((prop) => evt.propertyName.startsWith(prop)))
             return;
         callback?.(evt);

package/generated/internal/class/form-associated-base.js

@@ -1,4 +1,4 @@
-import { devFlags } from '../utils';
+import { debug } from '../../internal/utils';
 import { CleanupRegistry } from './cleanup-registry';
 const internals = new WeakMap();
 // const trackedElements = new WeakMap<FormAssociatedBase, Set<Element>>()
@@ -11,14 +11,14 @@ export function getInternals(instance) {
 }
 // export function makeSlotchangeHandler(t: FormAssociatedBase) {
 //   const handleSlotchange = ({ type, target: slot }: Event) => {
-//       if (devFlags.debug) console.debug(`${makeSlotchangeHandler.name} ⚡️ ${type}`)
+//       debug(`${makeSlotchangeHandler.name} ⚡️ ${type}`)
 //       if (!(slot instanceof HTMLSlotElement && slot)) return
 //       const assigned = slot.assignedElements({ flatten: true })
 //       observers.syncObservations(trackedElements.get(t) ?? new Set(), assigned, handleTagMutation, ['value', 'label'])
 //       if (0 < assigned.length) handleTagMutation()
 //     },
 //     handleTagMutation = (entry?: MutationRecord) => {
-//       if (devFlags.debug) console.debug(`${handleTagMutation.name} ⚡️ mutation`)
+//       debug(`${handleTagMutation.name} ⚡️ mutation`)
 //       t.setValidity(t.validity, t.validationMessage)
 //     }
 //   return [{ types: 'slotchange', listener: handleSlotchange }]
@@ -33,14 +33,12 @@ export class FormAssociatedBase extends HTMLElement {
         // trackedElements.set(this, new Set<Element>())
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${FormAssociatedBase.name} ⚡️ disconnect`);
+        debug(`${FormAssociatedBase.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         // observers.clearObservationsSet(trackedElements.get(this) ?? new Set())
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${FormAssociatedBase.name} ⚡️ connect`);
+        debug(`${FormAssociatedBase.name} ⚡️ connect`);
     }
     get type() {
         return this.localName;

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

@@ -1,7 +1,7 @@
 var _a;
 import { lifecycleObserver } from '../../buses';
 import { CleanupRegistry } from '../../internal/class/cleanup-registry';
-import { devFlags, frame, onoff } from '../utils';
+import { debug, frame, onoff } from '../utils';
 export class NavigationView extends HTMLElement {
     static get observedAttributes() {
         return ['hidden'];
@@ -31,8 +31,7 @@ export class NavigationView extends HTMLElement {
                     // consume it (important so it doesn’t leak to next change)
                     this.#recentBefore = undefined;
                 }
-                if (devFlags.debug)
-                    console.debug(`${_a.name} 💡 ${eventType}`);
+                debug(`${_a.name} 💡 ${eventType}`);
                 frame(this).then(() => target.dispatchEvent(new CustomEvent(eventType, { detail: { tag: this.id }, bubbles: true, composed: true })));
                 break;
         }
@@ -56,8 +55,7 @@ export class NavigationView extends HTMLElement {
         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} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (this.id !== detail?.tag)
             return;
         this.#recentBefore = {

package/generated/internal/decorators/adaptive-slot.js

@@ -1,10 +1,9 @@
 import { Snapshot } from '../../snapshot';
 import { CleanupRegistry } from '../class/cleanup-registry';
-import { devFlags, onoff } from '../utils';
+import { debug, onoff } from '../utils';
 export default function (filter) {
     const handleMediaChange = (el, { type, matches }) => {
-        if (devFlags.debug)
-            console.debug(`${el.localName} ⚡️ ${type}`);
+        debug(`${el.localName} ⚡️ ${type}`);
         if (matches) {
             if (!el.matches(`[slot="cancellation-action"],[slot="primary-action"],[slot="confirmation-action"],[slot="destructive-action"]`))
                 return;
@@ -23,8 +22,7 @@ export default function (filter) {
     return function (Base, _context) {
         const originalConnected = Base.prototype.connectedCallback, originalDisconnected = Base.prototype.disconnectedCallback;
         Base.prototype.connectedCallback = function () {
-            if (devFlags.debug)
-                console.debug(`decorator:[${this.localName}] ⚡️ connect`);
+            debug(`decorator:[${this.localName}] ⚡️ connect`);
             originalConnected?.call(this);
             if (filter && !filter(this))
                 return;
@@ -41,8 +39,7 @@ export default function (filter) {
             });
         };
         Base.prototype.disconnectedCallback = function () {
-            if (devFlags.debug)
-                console.debug(`decorator:[${this.localName}] ⚡️ disconnect`);
+            debug(`decorator:[${this.localName}] ⚡️ disconnect`);
             originalDisconnected?.call(this);
             CleanupRegistry.unregister(this, 'adaptive-slot');
         };

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

@@ -23,13 +23,13 @@ class() {
   }
 }
   connectedCallback() {
-    if (devFlags.debug) console.debug(`${NavigationTitle.name} ⚡️ connect`)
+    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}")`)
+    DEBUG && console.debug(`${NavigationTitle.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`)
 
     this.#scheduleSync()
 

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

@@ -23,13 +23,13 @@ class() {
   }
 }
   connectedCallback() {
-    if (devFlags.debug) console.debug(`${NavigationTitle.name} ⚡️ connect`)
+    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}")`)
+    DEBUG && console.debug(`${NavigationTitle.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`)
 
     this.#scheduleSync()
 

package/generated/internal/flags.json

@@ -0,0 +1,3 @@
+{
+    "DEBUG": false
+}

package/generated/internal/privateNamespace.js

@@ -1,5 +1,5 @@
 import { NavigationPath } from '../internal/class/navigation-path';
-import { devFlags } from '../internal/utils';
+import { debug } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 export function queryInsertPosition(frame) {
     if ('NAVIGATION-SPLIT-VIEW' === frame?.tagName)
@@ -18,8 +18,7 @@ const cleanup = (lm, type) => {
         el.classList.remove(...arr);
 };
 export const startViewTransition = async (target, type = 'forwards', updateCallbackOrOptions = async () => { }) => {
-    if (devFlags.debug)
-        console.debug(`startViewTransition (${type})`, target);
+    debug(`startViewTransition (${type})`, target);
     if (!(target instanceof HTMLElement))
         throw new TypeError("Argument 1 ('target') to client.startViewTransition must be an instance of HTMLElement");
     if (!['forwards', 'backwards', 'reload'].includes(type))
@@ -58,9 +57,9 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         // dialogFrames = [toFrame, ...(Snapshot.leaveFrames ?? [])].filter((item): item is HTMLDialogElement => item instanceof HTMLDialogElement) //[toFrame, ...(Snapshot.leaveFrames ?? [])].filter((item) => item?.matches('dialog'))
         // if ('DIALOG' === newHost?.tagName) {
         //   ;(newHost as HTMLDialogElement).showModal()
-        //   if (devFlags.debug) console.debug(`⚡️ view-transition-start (${type})`)
+        //   debug(`⚡️ view-transition-start (${type})`)
         //   await Promise.allSettled(newHost.getAnimations().map(({ finished }) => finished))
-        //   if (devFlags.debug) console.debug(`⚡️ view-transition-end (${type})`)
+        //   debug(`⚡️ view-transition-end (${type})`)
         //   return
         // }
         // purge
@@ -83,18 +82,14 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         if (0 < modalViews.length) {
             for await (const el of modalViews)
                 el.showModal();
-            if (devFlags.debug)
-                console.debug(`⚡️ view-dialog-transition-start (${type})`);
+            debug(`⚡️ view-dialog-transition-start (${type})`);
             await Promise.allSettled(modalViews?.[0].getAnimations().map(({ finished }) => finished));
-            if (devFlags.debug)
-                console.debug(`⚡️ view-dialog-transition-end (${type})`);
+            debug(`⚡️ view-dialog-transition-end (${type})`);
         }
         else {
-            if (devFlags.debug)
-                console.debug(`⚡️ view-transition-start (${type})`);
+            debug(`⚡️ view-transition-start (${type})`);
             await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to?.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
-            if (devFlags.debug)
-                console.debug(`⚡️ view-transition-end (${type})`);
+            debug(`⚡️ view-transition-end (${type})`);
         }
         if (0 < (to?.component?.querySelectorAll(`.${Snapshot.config?.['vt-fwd-class-name']},.bwd`) ?? []).length)
             return;
@@ -115,11 +110,9 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         if ('DIALOG' === from.component?.tagName) {
             from.body?.dispatchEvent(new CustomEvent('pageswap', { detail: { page: from.body }, bubbles: true, composed: true }));
             from.component.close();
-            if (devFlags.debug)
-                console.debug(`⚡️ view-dialog-transition-start (${type})`);
+            debug(`⚡️ view-dialog-transition-start (${type})`);
             await Promise.allSettled(from.component.getAnimations().map(({ finished }) => finished));
-            if (devFlags.debug)
-                console.debug(`⚡️ view-dialog-transition-end (${type})`);
+            debug(`⚡️ view-dialog-transition-end (${type})`);
             if (from.component.matches('[open]'))
                 return;
             await updateCallback();
@@ -154,11 +147,9 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         for (const el of inbetweenModals)
             el.close(); // close old inbetween modals
         // capture trans
-        if (devFlags.debug)
-            console.debug(`⚡️ view-transition-start (${type})`);
+        debug(`⚡️ view-transition-start (${type})`);
         await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
-        if (devFlags.debug)
-            console.debug(`⚡️ view-transition-end (${type})`);
+        debug(`⚡️ view-transition-end (${type})`);
         if (to.body?.closest(`.bwd,.${Snapshot.config?.['vt-fwd-class-name']}`))
             return;
         cleanup(root);

package/generated/internal/utils/$.d.ts

@@ -0,0 +1,9 @@
+import { type TemplateResult } from '../../tpl';
+declare const DEFAULT: ">1";
+interface MintFn {
+    (markup: TemplateResult): DocumentFragment;
+    <T extends Element = Element>(markup: TemplateResult, selector: typeof DEFAULT): T;
+    <T extends Element = Element>(markup: TemplateResult, selector: string): T;
+}
+declare const mint: MintFn;
+export default mint;

package/generated/internal/utils/$.js

@@ -0,0 +1,11 @@
+import { renderToString } from '../../morphdom';
+const DEFAULT = '>1';
+const mint = ((markup, selector) => {
+    const template = Object.assign(document.createElement('template'), { innerHTML: renderToString(markup).toString() });
+    if (!selector)
+        return template.content;
+    if (selector === DEFAULT)
+        return template.content.firstElementChild;
+    return template.content.querySelector('>1' === selector ? ':first-child' : selector);
+});
+export default mint;

package/generated/internal/utils/debug.d.ts

@@ -0,0 +1 @@
+export default function (...args: Parameters<typeof self.console.debug>): void;

package/generated/internal/utils/debug.js

@@ -0,0 +1,4 @@
+import flags from '../flags.json' with { type: 'json' };
+export default function (...args) {
+    flags.DEBUG && self.console.debug(...args);
+}

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

@@ -1,20 +1,54 @@
+export { default as $ } from './$';
+export * from './$';
 export { default as add } from './add';
-export { default as $ } from './cash';
+export * from './add';
+export { default as ancestors } from './ancestors';
+export * from './ancestors';
 export { default as clamp } from './clamp';
+export * from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
+export * from './compare-big-decimals';
 export { default as cssTime } from './css-time';
+export * from './css-time';
 export { default as debounce } from './debounce';
+export * from './debounce';
+export { default as debug } from './debug';
+export * from './debug';
 export { default as defineTranslations } from './define-translations';
-export { default as devFlags } from './dev-flags';
+export * from './define-translations';
 export { default as ensurePlaceholder } from './ensure-placeholder';
+export * from './ensure-placeholder';
 export { default as frame } from './frame';
+export * from './frame';
 export { default as isInside } from './is-inside';
+export * from './is-inside';
 export { default as kebabCase } from './kebab-case';
+export * from './kebab-case';
 export { default as listActive } from './list-active';
+export * from './list-active';
 export { default as microtask } from './microtask';
+export * from './microtask';
+export { default as nextAll } from './next-all';
+export * from './next-all';
+export { default as next } from './next';
+export * from './next';
 export { default as onoff } from './onoff';
+export * from './onoff';
+export { default as prevAll } from './prev-all';
+export * from './prev-all';
+export { default as prev } from './prev';
+export * from './prev';
+export { default as prop } from './prop';
+export * from './prop';
 export { default as set } from './set';
+export * from './set';
+export { default as siblings } from './siblings';
+export * from './siblings';
 export { default as sleep } from './sleep';
+export * from './sleep';
 export { default as slowHideShow } from './slow-hide-show';
+export * from './slow-hide-show';
 export { default as timeout } from './timeout';
+export * from './timeout';
 export { default as touchGlass } from './touch-glass';
+export * from './touch-glass';

package/generated/internal/utils/index.js

@@ -1,23 +1,54 @@
-// import * as _intl from './intl'
-// import cash from './cash'
+export { default as $ } from './$';
+export * from './$';
 export { default as add } from './add';
-export { default as $ } from './cash';
+export * from './add';
+export { default as ancestors } from './ancestors';
+export * from './ancestors';
 export { default as clamp } from './clamp';
+export * from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
+export * from './compare-big-decimals';
 export { default as cssTime } from './css-time';
+export * from './css-time';
 export { default as debounce } from './debounce';
+export * from './debounce';
+export { default as debug } from './debug';
+export * from './debug';
 export { default as defineTranslations } from './define-translations';
-export { default as devFlags } from './dev-flags';
+export * from './define-translations';
 export { default as ensurePlaceholder } from './ensure-placeholder';
+export * from './ensure-placeholder';
 export { default as frame } from './frame';
+export * from './frame';
 export { default as isInside } from './is-inside';
+export * from './is-inside';
 export { default as kebabCase } from './kebab-case';
+export * from './kebab-case';
 export { default as listActive } from './list-active';
+export * from './list-active';
 export { default as microtask } from './microtask';
+export * from './microtask';
+export { default as nextAll } from './next-all';
+export * from './next-all';
+export { default as next } from './next';
+export * from './next';
 export { default as onoff } from './onoff';
+export * from './onoff';
+export { default as prevAll } from './prev-all';
+export * from './prev-all';
+export { default as prev } from './prev';
+export * from './prev';
+export { default as prop } from './prop';
+export * from './prop';
 export { default as set } from './set';
+export * from './set';
+export { default as siblings } from './siblings';
+export * from './siblings';
 export { default as sleep } from './sleep';
+export * from './sleep';
 export { default as slowHideShow } from './slow-hide-show';
+export * from './slow-hide-show';
 export { default as timeout } from './timeout';
+export * from './timeout';
 export { default as touchGlass } from './touch-glass';
-// export const $: typeof cash = cash
+export * from './touch-glass';

package/generated/internal/utils/is-inside.js

@@ -1,4 +1,4 @@
 export default function (x, y, rect) {
     const { left, right, top, bottom } = rect;
-    return x >= left && x <= right && y >= top && y <= bottom;
+    return left <= x && x <= right && top <= y && y <= bottom;
 }

package/generated/snapshot/index.js

@@ -1,4 +1,4 @@
-import { devFlags, onoff } from '../internal/utils';
+import { debug, onoff } from '../internal/utils';
 export class Snapshot {
     static #readyCalled = false;
     static #config;
@@ -45,12 +45,10 @@ export class Snapshot {
         const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${this.#config['ipad-sheet-view-inline-size']}) and (min-height: ${this.#config['ipad-sheet-view-height']})`);
         this.#breakpoints = new Map([['fine_dialog_sheet', mediaQueryList.matches]]);
         this.#listeners.add(onoff('change', (evt) => this.#handleMediaChange(evt, 'fine_dialog_sheet:change'), mediaQueryList).on());
-        if (devFlags.debug)
-            console.debug(this.#config);
+        debug(this.#config);
     }
     static #handleMediaChange = ({ type, matches, media }, kind) => {
-        if (devFlags.debug)
-            console.debug(`${Snapshot.name} ⚡️ ${type}`);
+        debug(`${Snapshot.name} ⚡️ ${type}`);
         this.#breakpoints?.set('fine_dialog_sheet', matches);
         this.on.dispatchEvent(new MediaQueryListEvent(kind, {
             matches,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.103",
+  "version": "0.0.0-dev.106",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -66,20 +66,24 @@
     "build:ts": "tsc",
     "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",
     "build:manifest": "tsx scripts/make-manifest.ts && prettier ./web-components.html-data/en.json && prettier ./web-components.css-data/en.json --write",
-    "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:tpl && npm run build:barrels:morphdom && npm run build:barrels:i18n",
+    "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:i18n && npm run build:barrels:tpl && npm run build:barrels:morphdom && npm run build:barrels:decorators && npm run build:barrels:utils",
     "build:barrels:components": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
     "build:barrels:events": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/events --exclude \".\\.test\\.ts\"",
-    "build:barrels:buses": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/buses",
-    "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales",
+    "build:barrels:buses": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/buses --exclude \".\\.test\\.ts\"",
+    "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales --exclude \".\\.test\\.ts\"",
     "build:barrels:tpl": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/tpl --exclude \".\\.test\\.ts\"",
     "build:barrels:morphdom": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/morphdom --exclude \".\\.test\\.ts\"",
-    "build:barrels:decorators": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/decorators",
+    "build:barrels:decorators": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/decorators --exclude \".\\.test\\.ts\"",
+    "build:barrels:utils": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/utils --exclude \".\\.test\\.ts\"",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
     "lint:scripts": "tsc -p tsconfig.scripts.json --noEmit",
     "test": "vitest --dom",
-    "prepackage": "rm -rf generated",
-    "package": "npm run build:ts && npm run build:scss",
+    "prepackage": "rm -rf generated && npm run debug:off",
+    "package": "npm run build:ts && npm run build:scss ; npm run debug:reset",
+    "postpublish": "git checkout dev",
+    "debug:off": "node -e \"const fs=require('node:fs');const f='./js/internal/flags.json';const j=JSON.parse(fs.readFileSync(f));j.DEBUG=false;fs.writeFileSync(f,JSON.stringify(j,null,2)+'\\n')\"",
+    "debug:reset": "git checkout -- ./js/internal/flags.json",
     "version:pkg": "npm version $npm_config_bump --no-git-tag-version --preid=dev"
   },
   "devDependencies": {

package/scss/components/_index.scss

@@ -32,7 +32,9 @@
   text-field,
   detail-placeholder,
   sticky-container,
-  picker-view {
+  picker-view,
+  h-divider,
+  v-divider {
     :where(&:not([hidden])) {
       display: grid;
     }

package/scss/components/_picker-view.scss

@@ -248,7 +248,7 @@ $picker-ifs: (
           style(--picker-style: sheet): var(--itemborder,) ; style(--picker-style: navigation-link): var(--itemborder,) ; style(--picker-style: menu): var(--itemborder,) ;
         );
         // --picker--input-stack-child-place-self: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
-        --picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
+        --picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): start ;);
 
         // SECTION experimental only in chrome
         // --picker--input-stack-flex-shrink: if(

package/web-components.html-data/en.json

@@ -305,6 +305,10 @@
       ],
       "description": "A control that starts an action. Styled with a prominent glass border, adapting to the button’s surroundings.\n---\n\n```ts\ninterface GlassProminentButtonSignature {\n  Attributes: {\n    role?: 'destructive' | 'confirm' // A value that describes the purpose of a button\n    'title-key'?: string\n  }\n\n  Slots: {\n    overlay: HTMLElement[]\n  }\n}\n\nclass GlassProminentButton extends HTMLButtonElement<GlassProminentButtonSignature> {}\n\ndeclare global {\n  interface HTMLButtonElement {\n    is: 'glass-prominent-button' // <button is=\"glass-prominent-button\"></button>\n  }\n}\n\n```\n\n### **Examples:**\n**Creating a prominent glass button:**\n```html\n<button is=\"glass-prominent-button\">\n  <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```\n"
     },
+    {
+      "name": "h-divider",
+      "description": "undefined\n\n```ts\ninterface HDividerSignature {}\n\nclass HDivider extends HTMLElement<HDividerSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'h-divider': HDivider // <h-divider></h-divider>\n  }\n}\n\n```\n"
+    },
     {
       "name": "h-stack",
       "references": [
@@ -949,6 +953,10 @@
       ],
       "description": "A list of items placed into the toolbar or navigation bar around your content.\n---\n\n```ts\ninterface ToolBarSignature {\n  Slots: {\n    'cancellation-action': HTMLElement[] // The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal\n    'primary-action': HTMLElement[] // The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal\n    'confirmation-action': HTMLElement[] // The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal\n    'destructive-action': HTMLElement[] // The item represents a destructive action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal\n    'top-bar-leading': HTMLElement[] // Places the item in the leading edge of the top bar\n    'top-bar-principal': HTMLElement[] // Places the item in the middle of the top bar\n    'top-bar-trailing': HTMLElement[] // Places the item in the trailing edge of the top bar\n    'bottom-bar-leading': HTMLElement[] // Places the item in the leading edge of the bottom bar\n    'bottom-bar-principal': HTMLElement[] // Places the item in the middle of the bottom bar\n    'bottom-bar-trailing': HTMLElement[] // Places the item in the trailing edge of the bottom bar\n  }\n}\n\nclass ToolBar extends HTMLElement<ToolBarSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tool-bar': ToolBar // <tool-bar></tool-bar>\n  }\n}\n\n```\n"
     },
+    {
+      "name": "v-divider",
+      "description": "undefined\n\n```ts\ninterface VDividerSignature {}\n\nclass VDivider extends HTMLElement<VDividerSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'v-divider': VDivider // <v-divider></v-divider>\n  }\n}\n\n```\n"
+    },
     {
       "name": "v-keyboard",
       "references": [