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

package/generated/components/date-picker.js

@@ -1,8 +1,9 @@
 var _a;
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { FormAssociatedBase, getInternals, makeSlotchangeHandler } from '../internal/class/form-associated-base';
-import { $, clamp, kebabCase, onoff, set } from '../internal/utils';
+import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
+import { MutationObserverSet } from '../internal/class/mutation-observer-set';
+import { $, clamp, debug, kebabCase, onoff, set } from '../internal/utils';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
 export class DatePicker extends FormAssociatedBase {
     static get observedAttributes() {
@@ -24,9 +25,14 @@ export class DatePicker extends FormAssociatedBase {
     }
     static #templates = new Map();
     // #lastRenderedStyle?: DatePickerStyle //string | null
+    #renderValidityMsgs = (entries) => {
+        debug(`${_a.name} ⚡️ mutation`);
+        this.setValidity(this.validity, this.validationMessage);
+    };
     #shadowRoot;
     #customValidity = '';
     #slots = new Map();
+    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
     // #validitiesSlot?: HTMLSlotElement
     #inputs = [];
     get #internals() {
@@ -69,18 +75,19 @@ export class DatePicker extends FormAssociatedBase {
         if (!this.hasAttribute('selection'))
             return;
         const [y = '', m = '', d = ''] = (this.getAttribute('selection') ?? '').split(/\D+/);
-        this.selectedDate = { year: y, month: m, day: d };
+        this.#selectedDate = { year: y, month: m, day: d };
         this.#sendValueToForm(false);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.#validityObservers.unobserveAll();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'selection':
                 const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/);
-                this.selectedDate = { year: y, month: m, day: d };
+                this.#selectedDate = { year: y, month: m, day: d };
                 break;
             case 'required':
                 for (const input of this.#inputs)
@@ -117,7 +124,7 @@ export class DatePicker extends FormAssociatedBase {
         return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '') ? this.getAttribute('date-picker-style') : 'automatic';
     }
     #render() {
-        console.debug(`${_a.name} ⚡️ render (${this.datePickerStyle})`);
+        debug(`${_a.name} ⚡️ render (${this.datePickerStyle})`);
         if (!this.isConnected)
             return;
         // if (this.#lastRenderedStyle === this.datePickerStyle) return // skip if already applied
@@ -131,7 +138,7 @@ export class DatePicker extends FormAssociatedBase {
             this.#slots = new Map();
         }, 'slots');
         CleanupRegistry.unregister(this, 'validities');
-        CleanupRegistry.register(this, onoff(makeSlotchangeHandler(this), this.#slots?.get('validity-options')).on(), 'validities');
+        CleanupRegistry.register(this, onoff('slotchange', this.#handleValiditiesSlotchange, this.#slots?.get('validity-options')).on(), 'validities');
         switch (this.datePickerStyle) {
             default:
                 const [yyyy = '', mm = '', dd = ''] = new Date().toISOString().split('T').shift()?.split('-') ?? [], map = { year: yyyy, month: mm, day: dd };
@@ -162,7 +169,16 @@ export class DatePicker extends FormAssociatedBase {
                 break;
         }
     }
-    get selectedDate() {
+    #handleValiditiesSlotchange = ({ type, target: slot }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement && slot))
+            return;
+        const assigned = slot.assignedElements();
+        this.#validityObservers.syncObservations(assigned, ['value', 'label']);
+        if (0 < assigned.length)
+            this.#renderValidityMsgs([]);
+    };
+    get #selectedDate() {
         const map = Object.fromEntries(this.#inputs.map(({ name, value }) => [name, value]));
         return {
             year: map.year ?? '',
@@ -170,7 +186,7 @@ export class DatePicker extends FormAssociatedBase {
             day: map.day ?? '',
         };
     }
-    set selectedDate(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);
@@ -182,9 +198,9 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleClick = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const target = evt.target instanceof HTMLElement && evt.target;
-        if (!target)
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target } = evt;
+        if (!(target instanceof HTMLElement && target))
             return;
         const input = target.closest('input');
         if (input)
@@ -217,7 +233,7 @@ export class DatePicker extends FormAssociatedBase {
             else
                 this.setValidity({});
         }
-        const selection = `${this.selectedDate.year}-${this.selectedDate.month}-${this.selectedDate.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);
@@ -225,9 +241,9 @@ export class DatePicker extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection }, bubbles: true, composed: true }));
     };
     #handleInputPaste = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target instanceof HTMLInputElement && evt.target;
-        if (!input)
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target: input } = evt;
+        if (!(input instanceof HTMLInputElement && input))
             return;
         evt.preventDefault();
         const data = [...`${(evt.clipboardData?.getData('text') ?? '').trim()}`].reduce((acc, ch, i) => {
@@ -247,9 +263,9 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputBeforeinput = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target instanceof HTMLInputElement && evt.target;
-        if (!input)
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target: input } = evt;
+        if (!(input instanceof HTMLInputElement && input))
             return;
         if ('insertText' !== evt.inputType)
             return;
@@ -270,7 +286,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     };
     #handleInputKeydown = ({ type, target, key }) => {
-        console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement && target))
             return;
         const input = target;
@@ -289,14 +305,13 @@ export class DatePicker extends FormAssociatedBase {
         this.#inputs[index]?.focus();
     };
     #handleInputFocus = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         for (const input of this.#inputs)
             input.classList.toggle('focus', input === evt.target);
     };
-    #handleInputBlur = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const target = evt.target instanceof HTMLInputElement && evt.target;
-        if (!target)
+    #handleInputBlur = ({ target, type }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLInputElement && target))
             return;
         const input = target;
         if (0 === input.value.length)
@@ -308,7 +323,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputInput = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
     // Optional: form participation properties
@@ -413,7 +428,7 @@ export class DatePicker extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        console.debug(`${_a.name} ⚡️ validity-change`);
+        debug(`${_a.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#inputs.at(0));
     };
     setCustomValidity = (message) => {
@@ -431,7 +446,7 @@ export class DatePicker extends FormAssociatedBase {
             input.toggleAttribute('disabled', !disabled);
     };
     formResetCallback = () => {
-        this.selectedDate = {
+        this.#selectedDate = {
             year: '',
             month: '',
             day: '',

package/generated/components/disclosure-group.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { cssTime, onoff, timeout } from '../internal/utils';
+import { cssTime, debug, onoff, timeout } from '../internal/utils';
 import { DetailsBase } from '../namespace-browser/base';
 const toggleTimers = new WeakMap();
 export class DisclosureGroup extends DetailsBase {
@@ -15,15 +15,15 @@ export class DisclosureGroup extends DetailsBase {
         super();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${DisclosureGroup.name} ⚡️ attr-change [${name}]`);
+        debug(`${DisclosureGroup.name} ⚡️ attr-change [${name}]`);
         // if (CSS.supports('interpolate-size', 'allow-keywords')) return
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${DisclosureGroup.name} ⚡️ disconnect`);
+        debug(`${DisclosureGroup.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${DisclosureGroup.name} ⚡️ connect`);
+        debug(`${DisclosureGroup.name} ⚡️ connect`);
         const newValue = el.open ? 'open' : 'closed';
         if (newValue !== el.dataset.state)
             el.dataset.state = newValue;
@@ -34,7 +34,7 @@ export class DisclosureGroup extends DetailsBase {
         });
     }
     static #handleToggle = async (evt) => {
-        console.debug(`${DisclosureGroup.name} ⚡️ ${evt?.type}`);
+        debug(`${DisclosureGroup.name} ⚡️ ${evt?.type}`);
         const details = evt.currentTarget instanceof HTMLDetailsElement && evt.currentTarget;
         if (!details)
             return;

package/generated/components/fine-tooltip.js

@@ -1,6 +1,6 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, onoff } from '../internal/utils';
+import { $, debug, onoff } from '../internal/utils';
 export class FineTooltip extends HTMLElement {
     constructor() {
         super();
@@ -16,7 +16,7 @@ export class FineTooltip extends HTMLElement {
                 this.#render(target.getAttribute(attributeName));
     };
     #handleMeasure = ([{ target, borderBoxSize }]) => {
-        console.debug(`${_a.name} ⚡️ measure`);
+        debug(`${_a.name} ⚡️ measure`);
         if (target.hasAttribute('closing'))
             return;
         if (!(target instanceof HTMLElement && target))
@@ -46,7 +46,7 @@ export class FineTooltip extends HTMLElement {
             label.removeAttribute('title');
     };
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.removeAttribute('closing');
         this.popover = 'manual';
         this.inert = true;
@@ -55,7 +55,7 @@ export class FineTooltip extends HTMLElement {
         this.showPopover();
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#resizeObserver.unobserve(this);
         this.#mutationObserver?.disconnect();
         this.#mutationObserver2?.disconnect();

package/generated/components/form-view.js

@@ -1,17 +1,17 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { listActive, onoff } from '../internal/utils';
+import { debug, listActive, onoff } from '../internal/utils';
 import { FormBase } from '../namespace-browser/base';
 export class FormView extends FormBase {
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${FormView.name} ⚡️ disconnect`);
+        debug(`${FormView.name} ⚡️ disconnect`);
         // finally
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${FormView.name} ⚡️ connect`);
+        debug(`${FormView.name} ⚡️ connect`);
         if (el.closest('[is=sidebar-view],[is=tab-bar]')) {
             el.method = 'dialog';
             el.noValidate = true;

package/generated/components/glass-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -14,16 +14,16 @@ export class GlassButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${GlassButton.name} ⚡️ disconnect`);
+        debug(`${GlassButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        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 }]) {
-        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 && target;
         if (!node)
             return;

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

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -14,16 +14,16 @@ export class GlassProminentButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${GlassProminentButton.name} ⚡️ disconnect`);
+        debug(`${GlassProminentButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        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 }]) {
-        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 && target;
         if (!node)
             return;

package/generated/components/index.d.ts

@@ -24,6 +24,7 @@ export * from './progress-view';
 export * from './screen-view';
 export * from './scroll-view-proxy';
 export * from './scroll-view';
+export * from './search-view';
 export * from './section-view';
 export * from './sheet-view';
 export * from './sidebar-toggle';

package/generated/components/index.js

@@ -24,6 +24,7 @@ export * from './progress-view';
 export * from './screen-view';
 export * from './scroll-view-proxy';
 export * from './scroll-view';
+export * from './search-view';
 export * from './section-view';
 export * from './sheet-view';
 export * from './sidebar-toggle';

package/generated/components/label-view.js

@@ -1,4 +1,4 @@
-import { $ } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 export class LabelView extends HTMLElement {
     static get observedAttributes() {
         return ['system-image', 'title', 'line-limit', 'truncation-mode'];
@@ -25,13 +25,13 @@ export class LabelView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     disconnectedCallback() {
-        console.debug(`${LabelView.name} ⚡️ disconnect`);
+        debug(`${LabelView.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        console.debug(`${LabelView.name} ⚡️ connect`);
+        debug(`${LabelView.name} ⚡️ connect`);
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'system-image':
                 let image = this.querySelector(':scope>[slot=image]');

package/generated/components/list-view.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { listActive, onoff } from '../internal/utils';
+import { debug, listActive, onoff } from '../internal/utils';
 export class ListView extends HTMLElement {
     // static #template: DocumentFragment
     // static get template() {
@@ -17,11 +17,11 @@ export class ListView extends HTMLElement {
         // this.#shadowRoot.appendChild(document.importNode((this.constructor as typeof ListView).template, true))
     }
     disconnectedCallback() {
-        console.debug(`${ListView.name} ⚡️ disconnect`);
+        debug(`${ListView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        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 { $, onoff, touchGlass } from '../internal/utils';
+import { $, debug, onoff, touchGlass } from '../internal/utils';
 export class MenuView extends HTMLElement {
     static get observedAttributes() {
         return ['open', 'closing', 'label'];
@@ -27,7 +27,7 @@ export class MenuView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         // const dialog = this.#shadowRoot.querySelector('dialog'),
         //   trigger = this.#shadowRoot.querySelector('button')
         // trigger?.removeEventListener('click', this.#handleTriggerClick)
@@ -40,7 +40,7 @@ export class MenuView extends HTMLElement {
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        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());
@@ -49,9 +49,8 @@ export class MenuView extends HTMLElement {
             { types: 'close', listener: this.#handleDialogClose },
             { types: 'cancel', listener: this.#handleDialogCancel },
         ], this.#dialog).on());
-        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t, (evt) => {
-            const target = evt.target instanceof HTMLElement && evt.target;
-            if (!target)
+        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t, ({ target }) => {
+            if (!(target instanceof HTMLElement && target))
                 return true;
             if (target.matches('menu-view'))
                 return false;
@@ -65,14 +64,14 @@ export class MenuView extends HTMLElement {
         dialogPart?.style.setProperty('position-anchor', newAnchorName); // $.prop('position-anchor', newAnchorName, dialogPart) //
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        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) {
-                    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'))
@@ -82,7 +81,7 @@ export class MenuView extends HTMLElement {
                     });
                 }
                 if ('' === newValue && !this.#dialog.open) {
-                    console.debug(`${_a.name} ⚡️ will-open`);
+                    debug(`${_a.name} ⚡️ will-open`);
                     this.removeAttribute('closing');
                     const form = this.#shadowRoot.querySelector('form');
                     form.scrollTop = 0;
@@ -100,10 +99,9 @@ export class MenuView extends HTMLElement {
                 break;
         }
     }
-    #handleDialogClick = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const target = evt.target instanceof HTMLElement && evt.target;
-        if (!target)
+    #handleDialogClick = ({ type, target }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement && target))
             return;
         if (target.matches('dialog'))
             return this.toggleAttribute('open', false); // click outside
@@ -119,19 +117,19 @@ export class MenuView extends HTMLElement {
         // event.stopPropagation() //NOTE: add this only if not nested, disposes all nicely if ommited
     };
     #handleTriggerClick = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', true);
     };
     // intercept to modify open attr
     #handleDialogCancel = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         evt.preventDefault();
         this.toggleAttribute('open', false);
     };
     #handleDialogClose = (evt) => {
-        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, 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) {
@@ -76,13 +76,13 @@ export class NavigationLargeTitle extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#clearScrollState();
         this.#styleObserver?.disconnect();
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -105,7 +105,7 @@ export class NavigationLargeTitle extends HTMLElement {
         });
     }
     #handleStyleChange = () => {
-        console.debug(`${_a.name} ⚡️ style`);
+        debug(`${_a.name} ⚡️ style`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -150,7 +150,7 @@ export class NavigationLargeTitle extends HTMLElement {
     //   this.#applySlowness(root, isIntersecting)
     // }
     #handleIntersect = (entries, { root }) => {
-        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,4 +1,5 @@
 import { NavigationView } from '../internal/class/navigation-view';
+import { debug } from '../internal/utils';
 /**
  * @summary A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section.
  */
@@ -7,15 +8,15 @@ export class NavigationSplitView extends NavigationView {
         super();
     }
     disconnectedCallback() {
-        console.debug(`${NavigationSplitView.name} ⚡️ disconnect`);
+        debug(`${NavigationSplitView.name} ⚡️ disconnect`);
         super.disconnectedCallback();
     }
     connectedCallback() {
-        console.debug(`${NavigationSplitView.name} ⚡️ connect`);
+        debug(`${NavigationSplitView.name} ⚡️ connect`);
         super.connectedCallback();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         super.attributeChangedCallback(name, oldValue, newValue);
     }
 }

package/generated/components/navigation-stack.js

@@ -1,4 +1,5 @@
 import { NavigationView } from '../internal/class/navigation-view';
+import { debug } from '../internal/utils';
 /**
  * @summary A view that shows a main screen and lets you open other screens on top of it.
  */
@@ -7,15 +8,15 @@ export class NavigationStack extends NavigationView {
         super();
     }
     disconnectedCallback() {
-        console.debug(`${NavigationStack.name} ⚡️ disconnect`);
+        debug(`${NavigationStack.name} ⚡️ disconnect`);
         super.disconnectedCallback();
     }
     connectedCallback() {
-        console.debug(`${NavigationStack.name} ⚡️ connect`);
+        debug(`${NavigationStack.name} ⚡️ connect`);
         super.connectedCallback();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         super.attributeChangedCallback(name, oldValue, newValue);
         // Snapshot.waitReady.then(() => {
         switch (name) {

package/generated/components/navigation-title.js

@@ -1,4 +1,4 @@
-import { $ } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 export class NavigationTitle extends HTMLElement {
     static get observedAttributes() {
         return ['value', 'subtitle'];
@@ -7,13 +7,13 @@ export class NavigationTitle extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        console.debug(`${NavigationTitle.name} ⚡️ disconnect`);
+        debug(`${NavigationTitle.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        console.debug(`${NavigationTitle.name} ⚡️ connect`);
+        debug(`${NavigationTitle.name} ⚡️ connect`);
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${NavigationTitle.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${NavigationTitle.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         const sibling = this.closest('scroll-view') ?? undefined;
         switch (name) {
             case 'value':

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

@@ -1,5 +1,5 @@
 import { FormAssociatedBase } from '../internal/class/form-associated-base';
-declare const pickerStyles: readonly ["menu", "inline", "automatic"];
+declare const pickerStyles: readonly ["menu", "inline", "navigation-link", "sheet", "automatic"];
 export type PickerStyle = (typeof pickerStyles)[number];
 export declare class PickerView extends FormAssociatedBase {
     #private;
@@ -8,6 +8,7 @@ export declare class PickerView extends FormAssociatedBase {
         LABEL: string;
         PICKER_STYLE: string;
         SELECTION: string;
+        SEARCHABLE: string;
     };
     static get observedAttributes(): string[];
     get template(): DocumentFragment;
@@ -16,7 +17,6 @@ export declare class PickerView extends FormAssociatedBase {
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     get pickerStyle(): PickerStyle;
-    static wrapTag(node: Element, slotName?: string): Element;
     get name(): string;
     setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
     setCustomValidity: (message: string) => void;