@swiftwc/ui 0.0.0-dev.34 → 0.0.0-dev.36

package/generated/client/index.js

@@ -4,6 +4,7 @@ import { I18n } from '../i18n';
 import { NavigationPath } from '../internal/class/navigation-path';
 import { $, kebabCase, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
+//#region polyfills
 export const polyfills = new Map();
 for (const [k, Ctor] of Object.entries(Components)) {
     const is = kebabCase(k);
@@ -101,6 +102,7 @@ if (0 < polyfills.size) {
 }
 // SECTION: Safari polyfill
 document.addEventListener('touchstart', () => { }, { passive: true });
+//#endregion
 // SECTION
 const handleHelp = ({ target, relatedTarget }) => {
     if (!(target instanceof HTMLElement && target))
@@ -164,7 +166,7 @@ if (mediaQueryList.matches)
         ['pointerout', handleDone],
     ])
         document.addEventListener(k, v, { passive: true });
-// SECTION: Transitions
+//#region Transitions
 const cleanup = (lm, type) => {
     let arr = [Snapshot.config['vt-fwd-class-name'], 'fwdd', 'fwn', 'fwnn', 'bwd', 'bwdd', 'bwn', 'bwnn'];
     if (['backwards', 'forwards'].includes(type ?? ''))
@@ -315,6 +317,8 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         await updateCallback();
     }
 };
+//#endregion
+//#region fns
 export const alert = async (title, message, actions, options) => {
     await navigator.locks.request('alert:', async () => {
         const dialog = $(`<dialog is="alert-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(`<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
@@ -410,6 +414,8 @@ export const confirmationDialog = async (trigger, title, message, actions, optio
     //   // controller.signal.addEventListener('abort', onAbort, { once: true })
     // })
 };
+//#endregion
 void Snapshot.waitReady; // void Snapshot.setOwnConfig()
-// SECTION
+//#region exports
 export { I18n, lifecycleObserver, NavigationPath, Snapshot };
+//#endregion

package/generated/components/bordered-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { buttonRole, onoff } from '../internal/utils';
+import { ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -31,7 +31,7 @@ export class BorderedButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

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

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { buttonRole, onoff } from '../internal/utils';
+import { ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -31,7 +31,7 @@ export class BorderedProminentButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

package/generated/components/borderless-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { buttonRole, onoff } from '../internal/utils';
+import { ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -31,7 +31,7 @@ export class BorderlessButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

package/generated/components/date-picker.d.ts

@@ -10,12 +10,12 @@ export declare class DatePicker extends FormAssociatedBase {
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     get datePickerStyle(): DatePickerStyle;
-    get selection(): {
+    get selectedDate(): {
         year: string;
         month: string;
         day: string;
     };
-    set selection(v: {
+    set selectedDate(v: {
         year: string;
         month: string;
         day: string;

package/generated/components/date-picker.js

@@ -69,7 +69,7 @@ export class DatePicker extends FormAssociatedBase {
         if (!this.hasAttribute('selection'))
             return;
         const [y = '', m = '', d = ''] = (this.getAttribute('selection') ?? '').split(/\D+/);
-        this.selection = { year: y, month: m, day: d };
+        this.selectedDate = { year: y, month: m, day: d };
         this.#sendValueToForm(false);
     }
     disconnectedCallback() {
@@ -80,7 +80,7 @@ export class DatePicker extends FormAssociatedBase {
         switch (name) {
             case 'selection':
                 const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/);
-                this.selection = { year: y, month: m, day: d };
+                this.selectedDate = { year: y, month: m, day: d };
                 break;
             case 'required':
                 for (const input of this.#inputs)
@@ -162,7 +162,7 @@ export class DatePicker extends FormAssociatedBase {
                 break;
         }
     }
-    get selection() {
+    get selectedDate() {
         const map = Object.fromEntries(this.#inputs.map(({ name, value }) => [name, value]));
         return {
             year: map.year ?? '',
@@ -170,7 +170,7 @@ export class DatePicker extends FormAssociatedBase {
             day: map.day ?? '',
         };
     }
-    set selection(v) {
+    set selectedDate(v) {
         for (const input of this.#inputs) {
             const nv = v[input.name] ?? '', pattern = /^(\d+)?$/;
             let finalValue = pattern.test(nv) ? nv : '', parsedValue = parseInt(finalValue);
@@ -217,7 +217,7 @@ export class DatePicker extends FormAssociatedBase {
             else
                 this.setValidity({});
         }
-        const selection = `${this.selection.year}-${this.selection.month}-${this.selection.day}`;
+        const selection = `${this.selectedDate.year}-${this.selectedDate.month}-${this.selectedDate.day}`;
         const entries = new FormData();
         entries.append(this.name, selection);
         this.#internals.setFormValue(entries);
@@ -431,7 +431,7 @@ export class DatePicker extends FormAssociatedBase {
             input.toggleAttribute('disabled', !disabled);
     };
     formResetCallback = () => {
-        this.selection = {
+        this.selectedDate = {
             year: '',
             month: '',
             day: '',

package/generated/components/glass-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { buttonRole, onoff, touchGlass } from '../internal/utils';
+import { ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -31,7 +31,7 @@ export class GlassButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

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

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { buttonRole, onoff, touchGlass } from '../internal/utils';
+import { ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -31,7 +31,7 @@ export class GlassProminentButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
                 });
                 break;
         }

package/generated/components/list-view.js

@@ -1,15 +1,20 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { listActive, onoff } from '../internal/utils';
 export class ListView extends HTMLElement {
-    // static formAssociated = true
-    // #internals
-    // #options
-    // #focusedIndex = 0
-    // #selected = new Set()
+    // static #template: DocumentFragment
+    // static get template() {
+    //   return (this.#template ??= $(
+    //     String.raw`
+    //   <slot name="searchable"></slot>
+    //   <slot></slot>
+    //   `
+    //   ))
+    // }
+    // #shadowRoot
     constructor() {
         super();
-        // this.#internals = this.attachInternals()
-        // this.tabIndex = 0
+        // this.#shadowRoot = this.attachShadow({ mode: 'closed' })
+        // this.#shadowRoot.appendChild(document.importNode((this.constructor as typeof ListView).template, true))
     }
     disconnectedCallback() {
         console.debug(`${ListView.name} ⚡️ disconnect`);
@@ -18,12 +23,5 @@ export class ListView extends HTMLElement {
     connectedCallback() {
         console.debug(`${ListView.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(listActive(this), this).on());
-        // this.setAttribute('role', 'listbox')
-        // this.setAttribute('aria-multiselectable', 'true')
-        // this.#options = Array.from(this.querySelectorAll('[option]'))
-        // this.addEventListener('pointerleave', this.#onCancel)
-        // this.addEventListener('click', this.#onClick)
-        // this.addEventListener('keydown', this.#onKeyDown)
-        // this.#updateOptionAttributes()
     }
 }

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

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

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

@@ -1,13 +1,19 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { buttonRole, onoff, touchGlass } from '../internal/utils';
+import { ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 export class ToolBarItem extends HTMLElement {
     static get observedAttributes() {
         return ['slot', 'data-previous-slot', 'title-key'];
     }
+    #mutationObserver;
     constructor() {
         super();
     }
+    disconnectedCallback() {
+        console.debug(`${ToolBarItem.name} ⚡️ disconnect`);
+        this.#mutationObserver?.disconnect();
+        CleanupRegistry.unregister(this);
+    }
     connectedCallback() {
         console.debug(`${ToolBarItem.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, (evt) => {
@@ -32,20 +38,25 @@ export class ToolBarItem extends HTMLElement {
         //   ) // Initial check
         // })
     }
-    disconnectedCallback() {
-        console.debug(`${ToolBarItem.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(this);
-    }
     attributeChangedCallback(name, oldValue, newValue) {
         console.debug(`${ToolBarItem.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'slot':
             case 'data-previous-slot':
             case 'title-key':
-                const target = this.querySelector(':scope>button'), nv = this.getAttribute('data-previous-slot') ?? this.getAttribute('slot') ?? '';
-                if (target && ['confirmation-action', 'cancellation-action'].includes(nv))
+                this.#mutationObserver?.disconnect();
+                const role = this.getAttribute('data-previous-slot') ?? this.getAttribute('slot') ?? '', tKey = this.getAttribute('title-key');
+                if (['confirmation-action', 'cancellation-action'].includes(role))
                     Snapshot.waitReady.then(() => {
-                        buttonRole(this, target, nv, this.getAttribute('title-key'));
+                        ensurePlaceholder(this.querySelector(':scope>button'), role, tKey);
+                        this.#mutationObserver = new MutationObserver((mutations) => {
+                            for (const { target } of mutations)
+                                if (target instanceof HTMLElement && target)
+                                    ensurePlaceholder(this.querySelector(':scope>button'), role, tKey);
+                        });
+                        this.#mutationObserver.observe(this, {
+                            childList: true,
+                        });
                     });
                 break;
         }

package/generated/css/index.css

@@ -1956,6 +1956,9 @@
     place-content: safe center;
     gap: 1rem;
   }
+  :where(h-stack[template="auto spacer"]) {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
   :where(h-stack[template="spacer auto"]) {
     grid-template-columns: minmax(0, 1fr) auto;
   }

package/generated/internal/utils/ensure-placeholder.d.ts

@@ -0,0 +1 @@
+export default function (target: HTMLElement | null, role: string | null, titleKey?: string | null): void;

package/generated/internal/utils/{button-role.js → ensure-placeholder.js}

@@ -1,10 +1,7 @@
 import { I18n } from '../../i18n';
 import { Snapshot } from '../../snapshot';
-import { CleanupRegistry } from '../class/cleanup-registry';
 import { default as $ } from './cash';
-import onoff from './onoff';
-const observing = new WeakMap();
-function ensurePlaceholder(el, role, titleKey) {
+function renderPlaceholder(el, role, titleKey) {
     // if (!el.isConnected) return
     // self.requestAnimationFrame(() => {
     //   if (!el.isConnected) return
@@ -48,15 +45,11 @@ function ensurePlaceholder(el, role, titleKey) {
     // } else label?.remove()
     // })
 }
-export default function (host, target, role, titleKey) {
+export default function (target, role, titleKey) {
+    if (!target)
+        return;
     const overiderTitle = typeof titleKey === 'string' && titleKey in I18n.t('ButtonRole') ? titleKey : undefined;
-    ensurePlaceholder(target, role, overiderTitle);
-    if (observing.has(host))
-        observing.get(host)?.disconnect();
-    CleanupRegistry.unregister(target, 'i18n');
-    CleanupRegistry.register(target, onoff('localechange', () => ensurePlaceholder(target, role, overiderTitle), I18n.on).on(), 'i18n');
-    observing.set(host, new MutationObserver(() => ensurePlaceholder(target, role, overiderTitle)));
-    observing.get(host)?.observe(host, {
-        childList: true,
-    });
+    renderPlaceholder(target, role, overiderTitle);
+    // CleanupRegistry.unregister(target, 'i18n')
+    // CleanupRegistry.register(target, onoff('localechange', () => renderPlaceholder(target, role, overiderTitle), I18n.on).on(), 'i18n')
 }

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

@@ -1,6 +1,6 @@
 import cash from './cash';
 export { default as add } from './add';
-export { default as buttonRole } from './button-role';
+export { default as ensurePlaceholder } from './ensure-placeholder';
 export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';

package/generated/internal/utils/index.js

@@ -1,7 +1,7 @@
 // import * as _intl from './intl'
 import cash from './cash';
 export { default as add } from './add';
-export { default as buttonRole } from './button-role';
+export { default as ensurePlaceholder } from './ensure-placeholder';
 export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.34",
+  "version": "0.0.0-dev.36",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/components/_h-stack.scss

@@ -3,7 +3,7 @@
 @use 'sass:string';
 @use 'sass:list';
 
-$h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (auto minmax(0, 1fr) auto), (repeat(4, minmax(0, 1fr))), (repeat(2, minmax(0, 1fr)) auto));
+$h-stack-templates: ((auto minmax(0, 1fr)), (minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (auto minmax(0, 1fr) auto), (repeat(4, minmax(0, 1fr))), (repeat(2, minmax(0, 1fr)) auto));
 
 @layer #{vars.$components-layer} {
   h-stack {

package/scss/placeholders/_lists.scss

@@ -494,7 +494,6 @@
           }
         }
       }
-      // }
     }
     // }
     // [is='disclosure-group'] summary [slot='marker'] {
@@ -505,6 +504,17 @@
     //     --itempadistart: calc(calc(var(--root-font-size) * 1px) * var(--list--accessory-size) + var(--list--item-padding-inline-start, 0px));
     //   }
     // }
+
+    // // SECTION: add searchable
+    // > [slot='searchable'] {
+    //   :where(&) {
+    //     position: sticky;
+
+    //     top: 20px
+
+    //     background: red;
+    //   }
+    // }
   }
 }
 

package/generated/internal/utils/button-role.d.ts

@@ -1 +0,0 @@
-export default function (host: HTMLElement, target: HTMLElement, role: string | null, titleKey?: string | null): void;