@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.110

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

@@ -3,8 +3,12 @@ import { type NavigationStack } from './navigation-stack';
 declare const TAB_BAR_PLACEMENTS: readonly ["bottom-bar", "ornament", "sidebar", "top-bar"];
 export type TabBarPlacement = (typeof TAB_BAR_PLACEMENTS)[number];
 /**
- * @fires tabshow A Tab is shown
- * @fires tabhide A Tab is hidden
+ * @summary A container view that switches between screens using tabs.
+ *
+ * @cssprop --adaptable-tab-bar-placement
+ *
+ * @fires tabshow — A Tab is shown
+ * @fires tabhide — A Tab is hidden
  * @fires tab-view:toggle
  * @fires tab-view:adaptable-tab-bar-placement-change
  */
@@ -16,7 +20,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 {};

package/generated/components/tab-view.js

@@ -2,12 +2,16 @@ var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { NavigationPath } from '../internal/class/navigation-path';
-import { $, cssTime, debounce, frame, onoff, timeout } from '../internal/utils';
+import { cssTime, debounce, debug, frame, onoff, siblings, timeout } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 const TAB_BAR_PLACEMENTS = ['bottom-bar', 'ornament', 'sidebar', 'top-bar'];
 /**
- * @fires tabshow A Tab is shown
- * @fires tabhide A Tab is hidden
+ * @summary A container view that switches between screens using tabs.
+ *
+ * @cssprop --adaptable-tab-bar-placement
+ *
+ * @fires tabshow — A Tab is shown
+ * @fires tabhide — A Tab is hidden
  * @fires tab-view:toggle
  * @fires tab-view:adaptable-tab-bar-placement-change
  */
@@ -25,7 +29,7 @@ export class TabView extends HTMLElement {
         this.#debouncedHandler = debounce(this.#handleSelectionChange, 1);
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#afterTabRevealDelay.cancel();
         this.#cssStyleObserver?.disconnect();
         CleanupRegistry.unregister(this);
@@ -37,29 +41,12 @@ export class TabView extends HTMLElement {
         return this.querySelector(':scope>navigation-stack:has(> navigation-stack,> navigation-split-view)');
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.#cssStyleObserver = new CSSStyleObserver({
             properties: ['--adaptable-tab-bar-placement-index'],
         });
         this.#cssStyleObserver.observe(this, this.#handleStyleChange);
         Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange)); // Snapshot.waitReady.then(this.#handleStyleChange)
-        // NOTE: wait for config
-        // Snapshot.waitReady.then(() => { // FIXME: Check this removed!
-        // for (const [or, w, handler] of [
-        //   ['portrait', `max-width:${Snapshot.config!['ipad-portrait-bp-max']}`, this.#handleMediaChange],
-        //   ['landscape', `max-width:${Snapshot.config!['ipad-landscape-bp-max']}`, this.#handleMediaChange],
-        //   ['portrait', `min-width:${Snapshot.config!['ipad-portrait-bp-min']}`, this.#handleMediaChange],
-        //   ['landscape', `min-width:${Snapshot.config!['ipad-landscape-bp-min']}`, this.#handleMediaChange],
-        // ]) {
-        //   const mediaQueryList = self.matchMedia(`(orientation:${or}) and (${w})`)
-        //   if (mediaQueryList.matches)
-        //     this.#handleMediaChange(
-        //       new MediaQueryListEvent('media-change', {
-        //         matches: mediaQueryList.matches,
-        //       })
-        //     ) // Initial check
-        //   CleanupRegistry.register(this, onoff('change', handler as EventListener, mediaQueryList).on())
-        // }
         CleanupRegistry.register(this, onoff([
             { types: 'tabreveal tabswap', listener: this.#debouncedHandler },
             { types: 'beforetabreveal beforetabswap', listener: this.#addAnimations },
@@ -70,13 +57,14 @@ export class TabView extends HTMLElement {
                 listener: this.#handleSummaryClick,
             },
         ], this).on());
-        // })
     }
-    #handleSummaryClick = (evt) => {
-        const summary = evt.target.closest('summary');
+    #handleSummaryClick = ({ target }) => {
+        if (!(target instanceof HTMLElement))
+            return;
+        const summary = target.closest('summary');
         if (!summary)
             return;
-        if (0 === $.siblings('[aria-selected=true]', summary).length)
+        if (0 === siblings('[aria-selected=true]', summary).length)
             return;
         if (!summary.closest('scroll-view')?.matches('tab-view > [is=sidebar-view] > scroll-view'))
             return;
@@ -86,14 +74,14 @@ export class TabView extends HTMLElement {
         const style = self.getComputedStyle(form);
         if ('sidebar' !== style.getPropertyValue('--list-style'))
             return;
-        this.#addAnimations();
+        this.#addAnimations(new CustomEvent('beforetabreveal', { detail: { tag: '', ms: cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`) }, bubbles: true, composed: true }));
     };
     #handleTabViewPagereveal = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         void this.#syncBodyFace();
     };
     #handleStyleChange = () => {
-        console.debug(`${_a.name} ⚡️ style`);
+        debug(`${_a.name} ⚡️ style`);
         const style = self.getComputedStyle(this);
         const placement = style.getPropertyValue('--adaptable-tab-bar-placement'), // or do it manually without any computedstyle
         newValue = TAB_BAR_PLACEMENTS.includes(placement) ? placement : 'bottom-bar';
@@ -107,59 +95,8 @@ export class TabView extends HTMLElement {
             }));
         }
     };
-    // #handleMediaChange: (evt: MediaQueryListEvent) => void = (evt) => {
-    //   console.debug(`${TabView.name} ⚡️ ${evt?.type}`)
-    //   if (!evt.matches) return
-    //   this.#handleStyleChange()
-    //   // if (evt.matches) {
-    //   //   const placement = self.getComputedStyle(this).getPropertyValue('--adaptable-tab-bar-placement'), // or do it manually without any computedstyle
-    //   //     newValue = (TAB_BAR_PLACEMENTS as readonly string[]).includes(placement) ? (placement as (typeof TAB_BAR_PLACEMENTS)[number]) : 'bottom-bar'
-    //   //   if (newValue !== this.#cachedAdaptableTabBarPlacement) {
-    //   //     const oldValue = this.#cachedAdaptableTabBarPlacement
-    //   //     this.#cachedAdaptableTabBarPlacement = newValue
-    //   //     this.dispatchEvent(
-    //   //       new CustomEvent<TabViewAdaptableTabBarPlacementDetail>('tab-view:adaptable-tab-bar-placement-change', {
-    //   //         detail: { oldValue, newValue },
-    //   //         bubbles: true,
-    //   //         composed: true,
-    //   //       })
-    //   //     )
-    //   //   }
-    //   // }
-    //   // // trigger more-stack (dis)allowed event
-    //   // if (evt.matches !== this.#moreStackAllowed) {
-    //   //   this.#moreStackAllowed = evt.matches
-    //   //   const eventType = evt.matches ? 'tab-view:more-tab-allowed' : 'tab-view:more-tab-disallowed'
-    //   //   this.dispatchEvent(new CustomEvent<TabMoreStackAllowanceDetail>(eventType, { detail: { moreTab: this.moreTab }, bubbles: true, composed: true }))
-    //   // }
-    //   // if (evt.matches) return // no button triggers should happen, already on iphone portrait
-    //   // const innerSelection = this.moreTab?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id
-    //   // if (innerSelection) {
-    //   //   const btn = this.querySelector<HTMLButtonElement>(`[is="tab-item"][value="${CSS.escape(innerSelection)}"]`)
-    //   //   // NOTE: simulate btn click BU WITHOUT tabroot functionality!
-    //   //   if (btn) {
-    //   //     const newTab = this.querySelector<NavigationStack | NavigationSplitView>(`#${btn.getAttribute('value')}`)
-    //   //     if (newTab) {
-    //   //       this.selectedTab = TabView.gatherTab(newTab)
-    //   //       return
-    //   //     }
-    //   //   }
-    //   // }
-    //   // const outerSelection = this?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id
-    //   // if (outerSelection && outerSelection === this.moreTab?.id) {
-    //   //   const btn = this.querySelector<HTMLButtonElement>(`[is="tab-item"]:not([value="${CSS.escape(outerSelection)}"])`)
-    //   //   // NOTE: simulate btn click BU WITHOUT tabroot functionality!
-    //   //   if (btn) {
-    //   //     const newTab = this.querySelector<NavigationStack | NavigationSplitView>(`#${btn.getAttribute('value')}`)
-    //   //     if (newTab) {
-    //   //       this.selectedTab = TabView.gatherTab(newTab)
-    //   //       return
-    //   //     }
-    //   //   }
-    //   // }
-    // }
     #handleAdaptableTabBarPlacementChange = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if ('bottom-bar' !== evt.detail.oldValue)
             return; // button triggers should happen, ONLY when going FROM bottom-bar TO anything else
         const innerSelection = this.moreTab?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id;
@@ -188,7 +125,6 @@ export class TabView extends HTMLElement {
         }
     };
     get selectedTab() {
-        // return this.querySelector<NavigationStack | NavigationSplitView>(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')
         return [...this.querySelectorAll('navigation-stack:not([hidden]),navigation-split-view:not([hidden])')];
     }
     set selectedTab(tabs) {
@@ -199,28 +135,28 @@ export class TabView extends HTMLElement {
             throw new Error('selectedTab[] must be in order of parent>child. You provided an element that contains the previous sibling.');
         //
         const selectors = [':not(:is(:scope>{{tag}}))', ':is(:scope>{{tag}})']; // first nested ones, then root ones
+        const ms = cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`);
         for (const selector of selectors)
             for (const ns of this.querySelectorAll(`navigation-stack:not([hidden])${selector.replace('{{tag}}', 'navigation-stack')},navigation-split-view:not([hidden])${selector.replace('{{tag}}', 'navigation-split-view')}`)) {
                 if (!tabs.some((tab) => !ns.contains(tab)))
                     continue; // shouldRun
-                ns.dispatchEvent(new CustomEvent('beforetabswap', { detail: { tag: ns.id }, bubbles: true, composed: true }));
+                ns.dispatchEvent(new CustomEvent('beforetabswap', { detail: { tag: ns.id, ms }, bubbles: true, composed: true }));
                 ns.hidden = true; // triggers
             }
         for (const selector of selectors.reverse())
             for (const ns of this.querySelectorAll(`navigation-stack[hidden]${selector.replace('{{tag}}', 'navigation-stack')},navigation-split-view[hidden]${selector.replace('{{tag}}', 'navigation-split-view')}`)) {
                 if (!tabs.some((tab) => ns.contains(tab)))
                     continue; // shouldRun
-                ns.dispatchEvent(new CustomEvent('beforetabreveal', { detail: { tag: ns.id }, bubbles: true, composed: true }));
+                ns.dispatchEvent(new CustomEvent('beforetabreveal', { detail: { tag: ns.id, ms }, bubbles: true, composed: true }));
                 ns.hidden = false; // triggers
             }
     }
-    #addAnimations = () => {
+    #addAnimations = (evt) => {
         this.setAttribute('js-aftertabreveal', '');
+        // const ms = cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`)
         this.#afterTabRevealDelay.next(() => {
             this.removeAttribute('js-aftertabreveal');
-        }, cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`));
-        // this.removeAttribute('js-aftertabreveal')
-        // this.#afterTabRevealDelay = undefined
+        }, evt.detail.ms);
     };
     #handleSelectionChange = (evt) => {
         this.#triggerToggleEvent(evt);
@@ -228,7 +164,7 @@ export class TabView extends HTMLElement {
     #triggerToggleEvent = (evt) => {
         const eventType = 'tab-view:toggle';
         void this.#syncBodyFace();
-        console.debug(`${_a.name} 💡 ${eventType}`);
+        debug(`${_a.name} 💡 ${eventType}`);
         this.dispatchEvent(new CustomEvent(eventType, { detail: { selection: this.selectedTab }, bubbles: true, composed: true }));
     };
     #syncBodyFace = async () => {

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

@@ -1,3 +1,17 @@
+/**
+ * @summary A container view that arranges data in rows and columns, optionally letting the user select one or more of them.
+ *
+ * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template — Sets the template areas when the table is in compact mode
+ *
+ * @slot — The default slot.
+ * @slot header-leading
+ * @slot header-principal
+ * @slot header-trailing
+ * @slot column
+ * @slot footer-leading
+ * @slot footer-principal
+ * @slot footer-trailing
+ */
 export declare class TableView extends HTMLElement {
     #private;
     static get template(): DocumentFragment;
@@ -5,3 +19,8 @@ export declare class TableView extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'table-view': TableView;
+    }
+}

package/generated/components/table-view.js

@@ -1,97 +1,82 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { MutationObserverSingleton } from '../internal/class/mutation-observer-singleton';
-import { $, listActive, onoff } from '../internal/utils';
+import { MutationObserverSet } from '../internal/class/mutation-observer-set';
+import { $, debug, listActive, onoff } from '../internal/utils';
+import { queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
-const observers = new MutationObserverSingleton();
+import { html } from '../tpl';
+/**
+ * @summary A container view that arranges data in rows and columns, optionally letting the user select one or more of them.
+ *
+ * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template — Sets the template areas when the table is in compact mode
+ *
+ * @slot — The default slot.
+ * @slot header-leading
+ * @slot header-principal
+ * @slot header-trailing
+ * @slot column
+ * @slot footer-leading
+ * @slot footer-principal
+ * @slot footer-trailing
+ */
 export class TableView extends HTMLElement {
     #styleObserver;
     #compactToolbarItem;
-    #trackedElements = new Set();
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <div part="root table-container">
-      <div part="root table-header-stack">
-        <div part="root table-header-leading-stack">
-          <slot name="header-leading"></slot>
+        return (this.#template ??= $(html `<div part="root table-container">
+        <div part="root table-header-stack">
+          <div part="root table-header-leading-stack">
+            <slot name="header-leading"></slot>
+          </div>
+          <div part="root table-header-principal-stack">
+            <slot name="header-principal"></slot>
+          </div>
+          <div part="root table-header-trailing-stack">
+            <slot name="header-trailing"></slot>
+          </div>
         </div>
-        <div part="root table-header-principal-stack">
-          <slot name="header-principal"></slot>
+        <div part="root table-column-stack">
+          <slot name="column"></slot>
         </div>
-        <div part="root table-header-trailing-stack">
-          <slot name="header-trailing"></slot>
+        <slot><p>empty</p></slot>
+        <div part="root table-footer-stack">
+          <div part="root table-footer-leading-stack">
+            <slot name="footer-leading"></slot>
+          </div>
+          <div part="root table-footer-principal-stack">
+            <slot name="footer-principal"></slot>
+          </div>
+          <div part="root table-footer-trailing-stack">
+            <slot name="footer-trailing"></slot>
+          </div>
         </div>
-      </div>
-      <div part="root table-column-stack">
-        <slot name="column"></slot>
-      </div>
-      <slot><p>empty</p></slot>
-      <div part="root table-footer-stack">
-        <div part="root table-footer-leading-stack">
-          <slot name="footer-leading"></slot>
-        </div>
-        <div part="root table-footer-principal-stack">
-          <slot name="footer-principal"></slot>
-        </div>
-        <div part="root table-footer-trailing-stack">
-          <slot name="footer-trailing"></slot>
-        </div>
-      </div>
-    </div>`, ''));
+      </div>`));
     }
     #shadowRoot;
-    #colSlot;
-    // #slot?: HTMLSlotElement
+    #slots = new Map();
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        this.#colSlot = this.#shadowRoot.querySelector('slot[name=column]') ?? undefined;
-        // this.#slot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot:not([name])') ?? undefined
-        this.#colSlot?.addEventListener('slotchange', this.#handleSlotchange);
-        // this.append(
-        //   document.createRange().createContextualFragment(`<menu-view slot="header-trailing">
-        //               <label-view slot="label" title="Delete"></label-view>
-        //               <button type="button" tabindex="0">
-        //                 <label-view system-image="dots-three" title="Scan Documents"></label-view>
-        //               </button>
-        //               <button type="button" tabindex="0">
-        //                 <label-view system-image="dots-three" title="Connect to Server"></label-view>
-        //               </button>
-        //               <button type="button" tabindex="0">
-        //                 <label-view title="Edit Sidebar"></label-view>
-        //               </button>
-        //             </menu-view>
-        //             `)
-        // $(`<menu-view slot="header-trailing">
-        //             <label-view slot="label" title="Delete"></label-view>
-        //             <button type="button" tabindex="0">
-        //               <label-view system-image="dots-three" title="Scan Documents"></label-view>
-        //             </button>
-        //             <button type="button" tabindex="0">
-        //               <label-view system-image="dots-three" title="Connect to Server"></label-view>
-        //             </button>
-        //             <button type="button" tabindex="0">
-        //               <label-view title="Edit Sidebar"></label-view>
-        //             </button>
-        //           </menu-view>
-        //           <div slot="footer-leading">22</div>
-        //           <div slot="footer-trailing"><button>&lt;</button> <button>&gt;</button></div>`)
-        // )
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
+        this.#slots?.get('column')?.addEventListener('slotchange', this.#handleColumnSlotchange);
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         this.#styleObserver?.disconnect();
-        observers.clearObservationsSet(this.#trackedElements);
+        this.#observers.unobserveAll();
         this.#compactToolbarItem = undefined;
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(listActive(this), this).on());
-        // console.log(999, this.#shadowRoot.querySelector('[part*=table-column-stack]'))
         this.#styleObserver = new CSSStyleObserver({
             properties: ['--adaptable-table-style-index'],
         });
@@ -101,48 +86,40 @@ export class TableView extends HTMLElement {
         this.#styleObserver.observe(target, this.#handleStyleChange);
         Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
     }
-    #handleSlotchange = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const slot = evt.target, assigned = slot.assignedElements({ flatten: true });
-        observers.syncObservations(this.#trackedElements, assigned, this.#handleTagMutation);
-        if (0 < assigned.length)
-            this.#handleTagMutation();
+    #handleColumnSlotchange = ({ type, target: slot }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement))
+            return;
+        const assigned = slot.assignedElements();
+        this.#observers.syncObservations(assigned);
+        // if (0 < assigned.length)
+        this.#renderColumns([]);
     };
-    #handleTagMutation = (entry) => {
-        console.debug(`${_a.name} ⚡️ mutation`);
-        // const sourceSlot = 0 < (this.#colSlot?.assignedElements({ flatten: true }) ?? []).length ? this.#colSlot : this.#colSlot
-        // const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(`<menu-view></menu-view>`))
-        // menu.innerHTML = `<label-view slot="label" system-image="dots-three" title="rtyty"></label-view>`
-        // for (const el of sourceSlot?.assignedElements({ flatten: true }) ?? []) menu.insertAdjacentElement('beforeend', TableView.wrapTag(el, sourceSlot?.name))
-        //
+    #renderColumns = (entries) => {
+        debug(`${_a.name} ⚡️ mutation`);
         if (!this.#compactToolbarItem) {
-            this.#compactToolbarItem = $(`<menu-view tabindex="0" slot="header-trailing"></menu-view>`);
+            this.#compactToolbarItem = $(html `<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
             CleanupRegistry.unregister(this, 'compact_toolbar');
             CleanupRegistry.register(this, onoff('click', this.#handleMenuClick, this.#compactToolbarItem).on(), 'compact_toolbar');
         }
         this.#compactToolbarItem.innerHTML = `<label-view slot="label" system-image="dots-three"></label-view>`;
-        for (const node of this.#colSlot?.assignedElements({ flatten: true }) ?? []) {
+        for (const node of this.#slots?.get('column')?.assignedElements({ flatten: true }) ?? []) {
             if (!node.matches('[is=table-column]'))
                 continue;
-            const btn = $(`<button type="button" tabindex="0">
-        <v-stack spacing="0" alignment="leading">
-          <label-view></label-view>
-          <label-view font="callout" foreground="secondary"></label-view>
-        </v-stack>
-      </button>`), title = btn.querySelector('label-view:first-child'), subTitle = btn.querySelector('label-view:last-child');
-            title?.setAttribute('title', node.textContent.trim());
-            subTitle?.setAttribute('title', node.ariaSort ?? '');
+            const btn = $(html `<button type="button" tabindex="0">
+            <v-stack spacing="0" alignment="leading">
+              <label-view></label-view>
+              <label-view font="callout" foreground="secondary"></label-view>
+            </v-stack>
+          </button>`, '>1'), title = btn.querySelector('label-view:first-child') ?? undefined, subTitle = btn.querySelector('label-view:last-child') ?? undefined;
+            queryMorph(':not([slot])', html `<span>${node.textContent.trim()}</span>`, title, { removeIf: !node.textContent.trim() });
+            queryMorph(':not([slot])', html `<span>${node.ariaSort ?? ''}</span>`, subTitle, { removeIf: !(node.ariaSort ?? '') });
             this.#compactToolbarItem.appendChild(btn);
         }
-        // const wasConnected = this.#compactToolbarItem?.isConnected
-        // this.#compactToolbarItem?.removeEventListener('click', this.#handleMenuClick)
-        // this.#compactToolbarItem?.remove()
-        // this.#compactToolbarItem = menu
-        // this.#compactToolbarItem?.addEventListener('click', this.#handleMenuClick)
-        // if (wasConnected) this.insertAdjacentElement('beforeend', this.#compactToolbarItem)
     };
+    #observers = new MutationObserverSet(this.#renderColumns);
     #handleStyleChange = () => {
-        console.debug(`${_a.name} ⚡️ style`);
+        debug(`${_a.name} ⚡️ style`);
         const target = this.#shadowRoot.querySelector('[part*=table-container]') ?? undefined;
         if (!target)
             return;
@@ -150,25 +127,29 @@ export class TableView extends HTMLElement {
         const adaptableTableStyle = style.getPropertyValue('--adaptable-table-style') || 'compact';
         switch (adaptableTableStyle) {
             case 'expanded':
-                if (!this.#compactToolbarItem?.isConnected)
-                    break;
-                this.#compactToolbarItem?.remove();
+                if (this.#compactToolbarItem?.isConnected)
+                    this.#compactToolbarItem?.remove();
                 break;
             default:
                 if (!this.#compactToolbarItem)
                     break;
-                if (this.#compactToolbarItem?.isConnected)
+                if (!this.#slots
+                    ?.get('column')
+                    ?.assignedElements()
+                    .filter((el) => el.matches(':is(button[is=table-column])')).length)
                     break;
-                this.insertAdjacentElement('beforeend', this.#compactToolbarItem);
+                if (!this.#compactToolbarItem?.isConnected)
+                    this.insertAdjacentElement('beforeend', this.#compactToolbarItem);
                 break;
         }
     };
-    #handleMenuClick = (evt) => {
-        const btn = evt.target.closest('button');
+    #handleMenuClick = ({ target }) => {
+        if (!(target instanceof HTMLElement))
+            return;
+        const btn = target.closest('button');
         if (!btn)
             return;
-        const siblings = [...(btn.parentNode?.querySelectorAll(':scope>button') ?? [])];
-        const index = siblings.indexOf(btn);
+        const siblings = [...(btn.parentNode?.querySelectorAll(':scope>button') ?? [])], index = siblings.indexOf(btn);
         this.querySelector(`:scope>[slot=column]:nth-of-type(${index + 1})`)?.click();
     };
 }

package/generated/components/text-field.d.ts

@@ -2,28 +2,41 @@ import { FormAssociatedBase } from '../internal/class/form-associated-base';
 declare const keyboardTypes: readonly ["decimal-pad", "number-pad", "default"];
 export type KeyboardType = (typeof keyboardTypes)[number];
 /**
+ * @summary A control that displays an editable text area.
+ *
+ * @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
+ *
  * @slot label
- * @slot validity-options
+ * @slot {HTMLOptionElement[]} validity-options
  */
 export declare class TextField extends FormAssociatedBase {
     #private;
     static get observedAttributes(): string[];
     static get template(): DocumentFragment;
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
     get keyboardType(): KeyboardType;
     get text(): string;
     set text(v: string);
+    /**
+     * Form participation property
+     */
     get name(): string;
     get value(): string;
     get valueAsNumber(): number | "";
     get negativeNumbersAllowed(): boolean;
     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 {
+        'text-field': TextField;
+    }
 }
 export {};