@swiftwc/ui 0.0.0-dev.92 → 0.0.0-dev.94

package/generated/components/menu-view.js

@@ -3,7 +3,7 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, devFlags, onoff, touchGlass } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 /**
- * @summary A control for presenting a menu of actions.
+ * @summary A control that opens a menu of actions.
  *
  * @slot — The default slot.
  * @slot label
@@ -62,19 +62,13 @@ export class MenuView extends HTMLElement {
                 }
                 break;
             case 'label':
-                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue)
+                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
                 break;
         }
     }
     disconnectedCallback() {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ disconnect`);
-        // const dialog = this.#shadowRoot.querySelector('dialog'),
-        //   trigger = this.#shadowRoot.querySelector('button')
-        // trigger?.removeEventListener('click', this.#handleTriggerClick)
-        // dialog?.removeEventListener('click', this.#handleDialogClick)
-        // dialog?.removeEventListener('close', this.#handleDialogClose)
-        // dialog?.removeEventListener('cancel', this.#handleDialogCancel)
         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)

package/generated/components/navigation-large-title.d.ts

@@ -4,3 +4,8 @@ export declare class NavigationLargeTitle extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-large-title': NavigationLargeTitle;
+    }
+}

package/generated/components/navigation-split-view.d.ts

@@ -8,3 +8,8 @@ export declare class NavigationSplitView extends NavigationView {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-split-view': NavigationSplitView;
+    }
+}

package/generated/components/navigation-stack.d.ts

@@ -8,3 +8,8 @@ export declare class NavigationStack extends NavigationView {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-stack': NavigationStack;
+    }
+}

package/generated/components/navigation-stack.js

@@ -11,12 +11,10 @@ export class NavigationStack extends NavigationView {
         if (devFlags.debug)
             console.debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         super.attributeChangedCallback(name, oldValue, newValue);
-        // Snapshot.waitReady.then(() => {
         switch (name) {
             case 'hidden':
                 break;
         }
-        // })
     }
     disconnectedCallback() {
         if (devFlags.debug)

package/generated/components/navigation-title.d.ts

@@ -6,3 +6,8 @@ export declare class NavigationTitle extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-title': NavigationTitle;
+    }
+}

package/generated/components/navigation-title.js

@@ -29,8 +29,6 @@ let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElem
             console.debug(`${NavigationTitle_1.name} ⚡️ connect`);
     }
     #render = (title, subtitle, systemImage, systemImageWeight) => {
-        // const container = this.querySelector(':scope>:not([slot])') ?? this.appendChild(document.createElement('navigation-large-title'))
-        // render(template, container)
         queryMorph(':not([slot])', html `
         <navigation-large-title>
           <v-stack alignment="fill">
@@ -50,13 +48,6 @@ let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElem
           </v-stack>
         </navigation-large-title>
       `, this);
-        // const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"><span></span></label-view>`,
-        //   subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span></span></label-view>`,
-        //   vStactTemplate = `<v-stack spacing="0" alignment="fill">${titleTemplate}${subtitleTemplate}</v-stack>`
-        // const el = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<navigation-large-title>${vStactTemplate}</navigation-large-title>`, '>1')),
-        //   vStack = el.querySelector(':scope>v-stack') ?? el.appendChild($(vStactTemplate, '>1'))
-        // renderLabel(':scope>label-view:nth-child(1)', titleTemplate, vStack, title)
-        // renderLabel(':scope>label-view:nth-child(2)', subtitleTemplate, vStack, subtitle)
     };
 };
 NavigationTitle = NavigationTitle_1 = __decorate([

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

@@ -10,6 +10,7 @@ export type DictEntry = {
 };
 export type Dictionary = DictEntry[];
 /**
+ * @summary A control that selects one value from a set of options.
  *
  * @attr {menu|inline|navigation-link|sheet|automatic} picker-style
  *
@@ -50,13 +51,18 @@ export declare class PickerView extends FormAssociatedBase {
     get pickerStyle(): PickerStyle;
     /**
      * Form participation property
-     * @type {string}
      */
     get name(): string;
     setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
     setCustomValidity: (message: string) => void;
-    formAssociatedCallback: (form: HTMLFormElement) => void;
-    formDisabledCallback: (disabled: boolean) => void;
-    formResetCallback: () => void;
+    formStateRestoreCallback(state: string, reason: string): void;
+    formAssociatedCallback(form: HTMLFormElement): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'picker-view': PickerView;
+    }
 }
 export {};

package/generated/components/picker-view.js

@@ -116,6 +116,7 @@ const indexGroups = (nodes, parentPath = '') => {
 };
 const collectLeafValues = (node) => (node.children.length ? node.children.flatMap(collectLeafValues) : [node.value]);
 /**
+ * @summary A control that selects one value from a set of options.
  *
  * @attr {menu|inline|navigation-link|sheet|automatic} picker-style
  *
@@ -437,7 +438,7 @@ export class PickerView extends FormAssociatedBase {
                 const value = this.getAttribute(this.constructor.ATTR.LABEL);
                 if (value) {
                     const hStack = $(`<h-stack distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view><label-view><span></span></label-view></h-stack>`, '>1');
-                    queryMorph('label-view:nth-child(2)', htmx `<label-view>${value ? htmx `<span>${value}</span>` : null}</label-view>`, hStack); //renderLabel(':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, hStack, value)
+                    queryMorph('label-view:nth-child(2)', htmx `<label-view>${value ? htmx `<span>${value}</span>` : null}</label-view>`, hStack);
                     // if (label) renderLabelTitle(label, value) //label.setAttribute('title', value)
                     section.insertAdjacentElement('beforeend', hStack);
                 }
@@ -984,7 +985,7 @@ export class PickerView extends FormAssociatedBase {
     #reflectLabel(value) {
         if (devFlags.debug)
             console.debug(`${_a.name} #reflectLabel`);
-        queryMorph('[slot=label]', htmx `<label-view slot="label">${value ? htmx `<span>${value}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, value)
+        queryMorph('[slot=label]', htmx `<label-view slot="label">${value ? htmx `<span>${value}</span>` : null}</label-view>`, this);
         this.#renderSlotted([]);
     }
     #reflectSelectionOnButtons() {
@@ -1032,8 +1033,8 @@ export class PickerView extends FormAssociatedBase {
                     // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
                     // else currentValueLabel.removeAttribute('foreground')
                     const title = this.#currentValueLabel || this.#selection || this.getAttribute(this.constructor.ATTR.PLACEHOLDER), systemImage = this.#currentValueIcon || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON);
-                    queryMorph(':not([slot])', htmx `<span>${title}</span>`, currentValueLabel, { removeIf: !title }); //renderLabelTitle(currentValueLabel, this.#currentValueLabel || this.#selection || this.getAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER))
-                    queryMorph('[slot=icon]', htmx `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage }); //renderLabelIcon(currentValueLabel, this.#currentValueIcon || this.getAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER_ICON))
+                    queryMorph(':not([slot])', htmx `<span>${title}</span>`, currentValueLabel, { removeIf: !title });
+                    queryMorph('[slot=icon]', htmx `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage });
                     // morph(
                     //   htmx`<label-view>${systemImage ? htmx`<image-view slot="icon" system-name="${systemImage}"></image-view>` : null}${title ? htmx`<span>${title}</span>` : null}</label-view>`,
                     //   currentValueLabel
@@ -1047,8 +1048,8 @@ export class PickerView extends FormAssociatedBase {
                     // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
                     // else currentValueLabel.removeAttribute('foreground')
                     const title = this.#currentValueLabel || this.#selection || this.getAttribute(this.constructor.ATTR.PLACEHOLDER), systemImage = this.#currentValueIcon || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON);
-                    queryMorph(':not([slot])', htmx `<span>${title}</span>`, currentValueLabel, { removeIf: !title }); //renderLabelTitle(currentValueLabel, this.#currentValueLabel || this.#selection || this.getAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER))
-                    queryMorph('[slot=icon]', htmx `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage }); //renderLabelIcon(currentValueLabel, this.#currentValueIcon || this.getAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER_ICON))
+                    queryMorph(':not([slot])', htmx `<span>${title}</span>`, currentValueLabel, { removeIf: !title });
+                    queryMorph('[slot=icon]', htmx `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage });
                     // morph(
                     //   htmx`<label-view slot="label">${systemImage ? htmx`<image-view slot="icon" system-name="${systemImage}"></image-view>` : null}${title ? htmx`<span>${title}</span>` : null}</label-view>`,
                     //   currentValueLabel
@@ -1087,7 +1088,6 @@ export class PickerView extends FormAssociatedBase {
     }
     /**
      * Form participation property
-     * @type {string}
      */
     get name() {
         return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
@@ -1132,18 +1132,21 @@ export class PickerView extends FormAssociatedBase {
         else
             this.#sendValueToForm(false);
     };
-    formAssociatedCallback = (form) => {
-        this.#sendValueToForm();
-    };
-    formDisabledCallback = (disabled) => {
+    formStateRestoreCallback(state, reason) {
+        //
+    }
+    formAssociatedCallback(form) {
+        this.#sendValueToForm(false);
+    }
+    formDisabledCallback(disabled) {
         for (const btn of this.#shadowRoot.querySelectorAll('button'))
             btn.toggleAttribute('disabled', !disabled);
-    };
-    formResetCallback = () => {
+    }
+    formResetCallback() {
         this.#selection = '';
         this.#reflectSelectionOnButtons();
         this.#reflectSelectionOnCurrentValueLabel();
-        this.#sendValueToForm();
-    };
+        this.#sendValueToForm(false);
+    }
 }
 _a = PickerView;

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

@@ -14,3 +14,8 @@ export declare class ProgressView extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'progress-view': ProgressView;
+    }
+}

package/generated/components/progress-view.js

@@ -72,7 +72,7 @@ export class ProgressView extends HTMLElement {
                 break;
             }
             case 'current-value-label': {
-                queryMorph('[slot=current-value]', html `<label-view slot="current-value" font="callout" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>[slot=current-value]', `<label-view slot="current-value" font="callout" foreground="secondary"><span></span></label-view>`, this, newValue)
+                queryMorph('[slot=current-value]', html `<label-view slot="current-value" font="callout" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
                 break;
             }
         }

package/generated/components/scroll-view-proxy.d.ts

@@ -6,3 +6,8 @@ export declare class ScrollViewProxy extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scroll-view-proxy': ScrollViewProxy;
+    }
+}

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

@@ -13,3 +13,8 @@ export declare class ScrollView extends HTMLElement {
     connectedCallback(): void;
     centerScrollToElement(child: Element): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scroll-view': ScrollView;
+    }
+}

package/generated/components/scroll-view.js

@@ -40,7 +40,6 @@ export class ScrollView extends HTMLElement {
     }
     #shadowRoot;
     #slots = new Map();
-    // #navbarPrincipalSlot?: HTMLSlotElement
     #isMidScroll;
     #lastScrollTop = 0;
     // #stopRecordingScrollTop?: boolean = false

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

@@ -5,3 +5,8 @@ export declare class SearchView extends InputBase {
     static polyfillConnectedCallback(el: InputBase): void;
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'search-view': SearchView;
+    }
+}

package/generated/components/search-view.js

@@ -2,9 +2,6 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, onoff, touchGlass } from '../internal/utils';
 import { InputBase } from '../namespace-browser/base';
 export class SearchView extends InputBase {
-    // static get observedAttributes() {
-    //   return ['role', 'title-key']
-    // }
     constructor() {
         super();
     }

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

@@ -1,5 +1,5 @@
 /**
- * @summary A container view that you can use to add hierarchy within certain views.
+ * @summary A container view that groups related content together.
  *
  * @slot — The default slot.
  * @slot header
@@ -14,3 +14,8 @@ export declare class SectionView extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'section-view': SectionView;
+    }
+}

package/generated/components/section-view.js

@@ -1,7 +1,7 @@
 import { $, devFlags } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 /**
- * @summary A container view that you can use to add hierarchy within certain views.
+ * @summary A container view that groups related content together.
  *
  * @slot — The default slot.
  * @slot header
@@ -26,84 +26,39 @@ export class SectionView extends HTMLElement {
         // <div class="sticky-sentinel" style="grid-area:sentinel;inline-size:100%;block-size:0.1px;pointer-events:none;"></div>
     }
     #shadowRoot;
-    // #observer?: IntersectionObserver
-    // #sibling?: HTMLElement
-    // #sentinel?: HTMLElement
-    // #sentinelIsIntersecting: boolean = false
-    // #isIntersecting: boolean = false
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-        // Snapshot.waitReady.then(() => {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        // this.#sentinel = this.#shadowRoot.querySelector('.sticky-sentinel') ?? undefined
-        // })
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (devFlags.debug)
             console.debug(`${SectionView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        // Snapshot.waitReady.then(() => {
         switch (name) {
             case 'header':
-                // if (!newValue) {
-                //   this.querySelector(':scope>[slot=header]')?.remove()
-                //   break
-                // }
-                // const header = this.querySelector(':scope>[slot=header]') ?? this.appendChild(Object.assign(document.createElement('header'), { slot: 'header' }))
                 queryMorph('[slot=header]', html `<header slot="header">
             <label-view line-limit="1" truncation-mode="tail" font="callout">
               <span>${newValue}</span>
             </label-view>
           </header>`, this, { removeIf: !newValue });
-                // render(
-                //   html`<label-view line-limit="1" truncation-mode="tail" font="callout">
-                //     <span>${newValue}</span>
-                //   </label-view>`,
-                //   header
-                // )
                 break;
             case 'footer':
-                // if (!newValue) {
-                //   this.querySelector(':scope>[slot=footer]')?.remove()
-                //   break
-                // }
-                // const footer = this.querySelector(':scope>[slot=footer]') ?? this.appendChild(Object.assign(document.createElement('footer'), { slot: 'footer' }))
                 queryMorph('[slot=footer]', html `<footer slot="footer">
             <label-view line-limit="1" truncation-mode="tail" font="callout">
               <span>${newValue}</span>
             </label-view>
           </footer>`, this, { removeIf: !newValue });
-                // render(
-                //   html`<label-view line-limit="1" truncation-mode="tail" font="callout">
-                //     <span>${newValue}</span>
-                //   </label-view>`,
-                //   footer
-                // )
                 break;
         }
-        // })
     }
     disconnectedCallback() {
         if (devFlags.debug)
             console.debug(`${SectionView.name} ⚡️ disconnect`);
-        // if (this.#sentinel) this.#observer?.unobserve(this.#sentinel)
-        // this.#observer?.unobserve(this)
+        //
     }
     connectedCallback() {
         if (devFlags.debug)
             console.debug(`${SectionView.name} ⚡️ connect`);
-        // this.#sibling = this.closest('scroll-view') ?? undefined
-        // Snapshot.waitReady.then(() => {
-        // if (!(await frame(this))) return // NOTE: Required or BREAKS transitions  // self.requestAnimationFrame(() => {
-        // const blockSizeProp = getComputedStyle(this).getPropertyValue('--navigation-bar-block-size') || '0', //`${document.documentElement.computedStyleMap().get(`--navigation-bar-block-size`) ?? '0'}`, //
-        //   blockSize = parseFloat(blockSizeProp) * (blockSizeProp.endsWith('rem') ? parseFloat(getComputedStyle(document.documentElement).fontSize) : 1)
-        // this.#observer = new IntersectionObserver(this.#handleIntersect, {
-        //   root: this.#sibling,
-        //   rootMargin: `-${blockSize}px 0px 0px 0px`,
-        //   threshold: [0, 1],
-        // })
-        // if (this.#sentinel) this.#observer.observe(this.#sentinel)
-        // this.#observer.observe(this)
-        // })
+        //
     }
 }

package/generated/components/sheet-view.js

@@ -22,26 +22,6 @@ export class SheetView extends DialogBase {
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
         if (devFlags.debug)
             console.debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
-        // // NOTE: wait for config
-        // Snapshot.waitReady.then(() => {
-        //   switch (attributeName) {
-        //     case 'fine-presentation-large-adaptation':
-        //       const node = target instanceof HTMLDialogElement && target
-        //       if (!node) break
-        //       CleanupRegistry.unregister(node, 'mediaquery')
-        //       if ('bottom-bar' !== target.getAttribute(attributeName ?? '')) break
-        //       const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${Snapshot.config!['ipad-sheet-view-inline-size']}) and (min-height: ${Snapshot.config!['ipad-sheet-view-height']})`)
-        //       SheetView.#handleMediaChange(
-        //         node,
-        //         new MediaQueryListEvent(`media-change`, {
-        //           matches: mediaQueryList.matches,
-        //         })
-        //       ) // Initial check
-        //       const handler1 = SheetView.#handleMediaChange.bind(null, node)
-        //       CleanupRegistry.register(node, onoff('change', handler1 as unknown as EventListener, mediaQueryList).on(), 'mediaquery')
-        //       break
-        //   }
-        // })
     }
     static #handleKeydown = (evt) => {
         if (devFlags.debug)

package/generated/components/sidebar-toggle.d.ts

@@ -1,7 +1,12 @@
 export declare class SidebarToggle extends HTMLElement {
     #private;
     constructor();
-    connectedCallback(): void;
     disconnectedCallback(): void;
+    connectedCallback(): void;
     private static query;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'sidebar-toggle': SidebarToggle;
+    }
+}

package/generated/components/sidebar-toggle.js

@@ -7,6 +7,12 @@ export class SidebarToggle extends HTMLElement {
     constructor() {
         super();
     }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        observers.unobserve(this);
+        CleanupRegistry.unregister(this);
+    }
     connectedCallback() {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ connect`);
@@ -18,12 +24,6 @@ export class SidebarToggle extends HTMLElement {
         // @ts-expect-error
         _a.#handleMeasure([entry]);
     }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
-        observers.unobserve(this);
-        CleanupRegistry.unregister(this);
-    }
     static query(target) {
         const container = target?.closest('navigation-split-view,tab-view'), sideBar = container?.querySelector(':scope>[is=sidebar-view]');
         return { container, sideBar };

package/generated/components/sidebar-view.js

@@ -22,7 +22,7 @@ export class SidebarView extends DialogBase {
         }), el).on());
         el.autofocus = true;
     }
-    /** Autoclose on click outside. */
+    // Autoclose on click outside.
     static #handleClick = async ({ target, type }) => {
         if (devFlags.debug)
             console.debug(`${SidebarView.name} ⚡️ ${type}`);

package/generated/components/sticky-container.d.ts

@@ -1,6 +1,11 @@
 export declare class StickyContainer extends HTMLElement {
     #private;
     constructor();
-    connectedCallback(): void;
     disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sticky-container': StickyContainer;
+    }
 }

package/generated/components/sticky-container.js

@@ -4,17 +4,17 @@ export class StickyContainer extends HTMLElement {
     constructor() {
         super();
     }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${StickyContainer.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
     connectedCallback() {
         if (devFlags.debug)
             console.debug(`${StickyContainer.name} ⚡️ connect`);
         // CleanupRegistry.register(this, onoff('transitionend transitionstart transitioncancel', this.#handleTransitionrun as unknown as EventListener, this).on())
         CleanupRegistry.register(this, onoff('transitionrun', this.#handleTransitionrun, this).on());
     }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${StickyContainer.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(this);
-    }
     #handleTransitionrun = ({ target, propertyName, pseudoElement }) => {
         if (!(target instanceof HTMLElement))
             return;

package/generated/components/tab-bar.js

@@ -18,8 +18,6 @@ export class TabBar extends DialogBase {
         if (devFlags.debug)
             console.debug(`${TabBar.name} ⚡️ connect`);
         el.autofocus = true;
-        // Snapshot.waitReadyFor(el).then((r) => {
-        //   if (!r) return
         CleanupRegistry.register(el, onoff('click', TabBar.#handleClick, el).on());
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, ({ target }) => {
             if (!(target instanceof HTMLElement))
@@ -30,7 +28,6 @@ export class TabBar extends DialogBase {
                 return false;
             return true;
         }), el).on());
-        // })
     }
     static #handleClick = async ({ target, type }) => {
         if (devFlags.debug)

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

@@ -19,7 +19,12 @@ export declare class TabView extends HTMLElement {
     get tabBarPlacement(): "bottom-bar" | "ornament" | "sidebar" | "top-bar" | undefined;
     get moreTab(): NavigationStack | null;
     connectedCallback(): void;
-    get selectedTab(): (NavigationStack | NavigationSplitView)[];
-    set selectedTab(tabs: (NavigationStack | NavigationSplitView)[]);
+    get selectedTab(): (NavigationSplitView | NavigationStack)[];
+    set selectedTab(tabs: (NavigationSplitView | NavigationStack)[]);
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tab-view': TabView;
+    }
 }
 export {};