@swiftwc/ui 1.0.1-canary.0 → 1.0.1-canary.1

package/generated/client/index.js

@@ -29,7 +29,10 @@ for (const [k, Ctor] of Object.entries(Components)) {
 }
 debug(polyfills);
 if (0 < polyfills.size) {
-    const polyfillTagNamesCache = new Set([...polyfills.values()].map((v) => String(v.polyfillExtends ?? '').toUpperCase()).filter(Boolean)); // ['TAG-NAME1', 'TAG-NAME2', ...]
+    const polyfillTagNamesCache = new Set(polyfills
+        .values()
+        .map((v) => String(v.polyfillExtends ?? '').toUpperCase())
+        .filter(Boolean)); // ['TAG-NAME1', 'TAG-NAME2', ...]
     const handlers = new WeakMap();
     const observe = (el, polyfill) => {
         if (!Array.isArray(polyfill.observedAttributes))
@@ -197,7 +200,7 @@ export const alert = (title, message, actions, options) => {
         off?.();
         dialog?.close();
         // dialog?.remove()
-        reason === undefined ? resolve(undefined) : reject(reason instanceof Error ? reason : new DOMException('Alert dismissed', 'AbortError'));
+        reason === undefined ? resolve(undefined) : reject(Error.isError(reason) ? reason : new DOMException('Alert dismissed', 'AbortError'));
     };
     if (options?.signal)
         if (options.signal.aborted)

package/generated/components/date-picker.js

@@ -1,4 +1,3 @@
-var _a;
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
@@ -37,7 +36,7 @@ export class DatePicker extends FormAssociatedBase {
     static #templates = new Map();
     // #lastRenderedStyle?: DatePickerStyle //string | null
     #renderValidityMsgs = (entries) => {
-        debug(`${_a.name} ⚡️ mutation`);
+        debug(`${DatePicker.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #shadowRoot;
@@ -50,32 +49,55 @@ export class DatePicker extends FormAssociatedBase {
         return getInternals(this);
     }
     get template() {
-        if (!_a.#templates.has(this.datePickerStyle))
+        // if (!DatePicker.#templates.has(this.datePickerStyle))
+        //   switch (this.datePickerStyle) {
+        //     default:
+        //       DatePicker.#templates.set(
+        //         this.datePickerStyle,
+        //         $(
+        //           html`<label part="root date-picker-stack">
+        //             <div part="root date-picker-label-stack">
+        //               <slot name="label"></slot>
+        //             </div>
+        //             <div part="root date-picker-input-stack">
+        //               <input type="text" name="month" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="12" part="root input date-picker-form-input" />
+        //               <span part="root date-picker-separator"></span>
+        //               <input type="text" name="day" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="31" part="root input date-picker-form-input" />
+        //               <span part="root date-picker-separator"></span>
+        //               <input type="text" name="year" inputmode="numeric" pattern="d*" minlength="4" maxlength="4" min="0" max="9999" part="root input date-picker-form-input" />
+        //             </div>
+        //             <slot name="validity-options" hidden></slot>
+        //           </label>`
+        //         )
+        //       )
+        //       break
+        //   }
+        // return DatePicker.#templates.get(this.datePickerStyle)!
+        return DatePicker.#templates.getOrInsertComputed(this.datePickerStyle, () => {
             switch (this.datePickerStyle) {
                 default:
-                    _a.#templates.set(this.datePickerStyle, $(html `<label part="root date-picker-stack">
-                <div part="root date-picker-label-stack">
-                  <slot name="label"></slot>
-                </div>
-                <div part="root date-picker-input-stack">
-                  <input type="text" name="month" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="12" part="root input date-picker-form-input" />
-                  <span part="root date-picker-separator"></span>
-                  <input type="text" name="day" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="31" part="root input date-picker-form-input" />
-                  <span part="root date-picker-separator"></span>
-                  <input type="text" name="year" inputmode="numeric" pattern="d*" minlength="4" maxlength="4" min="0" max="9999" part="root input date-picker-form-input" />
-                </div>
-                <slot name="validity-options" hidden></slot>
-              </label>`));
-                    break;
+                    return $(html `<label part="root date-picker-stack">
+              <div part="root date-picker-label-stack">
+                <slot name="label"></slot>
+              </div>
+              <div part="root date-picker-input-stack">
+                <input type="text" name="month" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="12" part="root input date-picker-form-input" />
+                <span part="root date-picker-separator"></span>
+                <input type="text" name="day" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="31" part="root input date-picker-form-input" />
+                <span part="root date-picker-separator"></span>
+                <input type="text" name="year" inputmode="numeric" pattern="d*" minlength="4" maxlength="4" min="0" max="9999" part="root input date-picker-form-input" />
+              </div>
+              <slot name="validity-options" hidden></slot>
+            </label>`);
             }
-        return _a.#templates.get(this.datePickerStyle);
+        });
     }
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${DatePicker.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'selection':
                 // nothing happens// const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/)
@@ -128,7 +150,7 @@ export class DatePicker extends FormAssociatedBase {
         return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '') ? this.getAttribute('date-picker-style') : 'automatic';
     }
     #render() {
-        debug(`${_a.name} ⚡️ #render (${this.datePickerStyle})`);
+        debug(`${DatePicker.name} ⚡️ #render (${this.datePickerStyle})`);
         // if (this.#lastRenderedStyle === this.datePickerStyle) return // skip if already applied
         // this.#lastRenderedStyle = this.datePickerStyle
         // clear shadow DOM
@@ -172,7 +194,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${DatePicker.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -192,15 +214,15 @@ export class DatePicker extends FormAssociatedBase {
         for (const input of this.#inputs) {
             const nv = v[input.name] ?? '', pattern = /^(\d+)?$/;
             let finalValue = pattern.test(nv) ? nv : '', parsedValue = parseInt(finalValue);
-            if (_a.#min(input) > parsedValue)
+            if (DatePicker.#min(input) > parsedValue)
                 finalValue = '';
-            else if (_a.#max(input) < parsedValue)
+            else if (DatePicker.#max(input) < parsedValue)
                 finalValue = '';
             input.value = finalValue;
         }
     }
     #handleClick = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
         const { target } = evt;
         if (!(target instanceof HTMLElement))
             return;
@@ -243,7 +265,7 @@ export class DatePicker extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection }, bubbles: true, composed: true }));
     };
     #handleInputPaste = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -265,7 +287,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputBeforeinput = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -288,7 +310,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     };
     #handleInputKeydown = ({ type, target, key }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${DatePicker.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement))
             return;
         const input = target;
@@ -307,25 +329,25 @@ export class DatePicker extends FormAssociatedBase {
         this.#inputs[index]?.focus();
     };
     #handleInputFocus = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
         for (const input of this.#inputs)
             input.classList.toggle('focus', input === evt.target);
     };
     #handleInputBlur = ({ target, type }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${DatePicker.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement))
             return;
         const input = target;
         if (0 === input.value.length)
             return;
-        const finalText = `${clamp(this.value[input.name] ?? '0', _a.#min(input), _a.#max(input))}`.padStart(parseInt(input.getAttribute('maxlength') ?? '0'), '0');
+        const finalText = `${clamp(this.value[input.name] ?? '0', DatePicker.#min(input), DatePicker.#max(input))}`.padStart(parseInt(input.getAttribute('maxlength') ?? '0'), '0');
         if (!set(input, 'value', finalText))
             return;
         // this.selection = this.selection
         this.#sendValueToForm();
     };
     #handleInputInput = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
     /**
@@ -436,7 +458,7 @@ export class DatePicker extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        debug(`${_a.name} ⚡️ validity-change`);
+        debug(`${DatePicker.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#inputs.at(0));
     };
     setCustomValidity = (message) => {
@@ -465,4 +487,3 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm(false);
     }
 }
-_a = DatePicker;

package/generated/components/disclosure-group.js

@@ -49,12 +49,14 @@ export class DisclosureGroup extends DetailsBase {
         const newValue = details.open ? 'opening' : 'closing';
         if (newValue !== details.dataset.state)
             details.dataset.state = newValue;
-        if (!toggleTimers.has(details))
-            toggleTimers.set(details, timeout()); //if (!toggleTimeouts.has(details)) toggleTimeouts.set(details, null)
+        // if (!toggleTimers.has(details)) toggleTimers.set(details, timeout()) //if (!toggleTimeouts.has(details)) toggleTimeouts.set(details, null)
         // Cancel previous timeout for this instance
         //if (toggleTimeouts.has(details) && toggleTimeouts.get(details)) self.clearTimeout(toggleTimeouts.get(details))
         // Schedule a new hook
-        toggleTimers.get(details).next(() => {
+        // toggleTimers.get(details)!.next(
+        toggleTimers
+            .getOrInsertComputed(details, () => timeout())
+            .next(() => {
             details.dataset.state = details.open ? 'open' : 'closed';
             details?.dispatchEvent(new CustomEvent(`is-${details.open ? 'expanded' : 'collapsed'}`, { bubbles: true, composed: true }));
         }, cssTime(`${details.computedStyleMap().get('--disclosure-group-animation-duration')}`));

package/generated/components/fine-tooltip.js

@@ -1,4 +1,3 @@
-var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, debug, onoff } from '../internal/utils';
 import { html } from '../tpl';
@@ -20,7 +19,7 @@ export class FineTooltip extends HTMLElement {
                 this.#render(target.getAttribute(attributeName));
     };
     #handleMeasure = ([{ target, borderBoxSize }]) => {
-        debug(`${_a.name} ⚡️ measure`);
+        debug(`${FineTooltip.name} ⚡️ measure`);
         if (target.hasAttribute('closing'))
             return;
         if (!(target instanceof HTMLElement))
@@ -50,7 +49,7 @@ export class FineTooltip extends HTMLElement {
             label.removeAttribute('title');
     };
     connectedCallback() {
-        debug(`${_a.name} ⚡️ connect`);
+        debug(`${FineTooltip.name} ⚡️ connect`);
         this.removeAttribute('closing');
         this.popover = 'manual';
         this.inert = true;
@@ -59,7 +58,7 @@ export class FineTooltip extends HTMLElement {
         this.showPopover();
     }
     disconnectedCallback() {
-        debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${FineTooltip.name} ⚡️ disconnect`);
         this.#resizeObserver.unobserve(this);
         this.#mutationObserver?.disconnect();
         this.#mutationObserver2?.disconnect();
@@ -105,4 +104,3 @@ export class FineTooltip extends HTMLElement {
         });
     }
 }
-_a = FineTooltip;

package/generated/components/menu-view.js

@@ -1,4 +1,3 @@
-var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, debug, onoff, touchGlass } from '../internal/utils';
 import { queryMorph } from '../morphdom';
@@ -34,14 +33,14 @@ export class MenuView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${MenuView.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) {
-                    debug(`${_a.name} ⚡️ will-close`);
+                    debug(`${MenuView.name} ⚡️ will-close`);
                     this.setAttribute('closing', '');
                     Promise.allSettled(this.#dialog.getAnimations().map(({ finished }) => finished)).then(() => {
                         if (!this.hasAttribute('closing'))
@@ -51,7 +50,7 @@ export class MenuView extends HTMLElement {
                     });
                 }
                 if ('' === newValue && !this.#dialog.open) {
-                    debug(`${_a.name} ⚡️ will-open`);
+                    debug(`${MenuView.name} ⚡️ will-open`);
                     this.removeAttribute('closing');
                     const form = this.#shadowRoot.querySelector('form');
                     form.scrollTop = 0;
@@ -64,14 +63,14 @@ export class MenuView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${MenuView.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() {
-        debug(`${_a.name} ⚡️ connect`);
+        debug(`${MenuView.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());
@@ -95,7 +94,7 @@ export class MenuView extends HTMLElement {
         dialogPart?.style.setProperty('position-anchor', newAnchorName); // $.prop('position-anchor', newAnchorName, dialogPart) //
     }
     #handleDialogClick = ({ type, target }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${MenuView.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         if (target.matches('dialog'))
@@ -112,20 +111,19 @@ export class MenuView extends HTMLElement {
         // event.stopPropagation() //NOTE: add this only if not nested, disposes all nicely if ommited
     };
     #handleTriggerClick = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${MenuView.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', true);
     };
     // intercept to modify open attr
     #handleDialogCancel = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${MenuView.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         evt.preventDefault();
         this.toggleAttribute('open', false);
     };
     #handleDialogClose = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${MenuView.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', this.#shadowRoot.querySelector('dialog')?.open ?? false);
     };
 }
-_a = MenuView;

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

@@ -1,4 +1,3 @@
-var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { add, debug, frame, onoff, slowHideShow, timeout } from '../internal/utils';
@@ -82,13 +81,13 @@ export class NavigationLargeTitle extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${NavigationLargeTitle.name} ⚡️ disconnect`);
         this.#clearScrollState();
         this.#styleObserver?.disconnect();
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        debug(`${_a.name} ⚡️ connect`);
+        debug(`${NavigationLargeTitle.name} ⚡️ connect`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -111,7 +110,7 @@ export class NavigationLargeTitle extends HTMLElement {
         });
     }
     #handleStyleChange = () => {
-        debug(`${_a.name} ⚡️ style`);
+        debug(`${NavigationLargeTitle.name} ⚡️ style`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -156,7 +155,7 @@ export class NavigationLargeTitle extends HTMLElement {
     //   this.#applySlowness(root, isIntersecting)
     // }
     #handleIntersect = (entries, { root }) => {
-        debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
+        debug(`${NavigationLargeTitle.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
         if (!(root instanceof HTMLElement))
             return;
         for (const { isIntersecting } of entries)
@@ -180,4 +179,3 @@ export class NavigationLargeTitle extends HTMLElement {
             slowHideShow(isIntersecting ? 'show' : 'hide', this);
     };
 }
-_a = NavigationLargeTitle;