@swiftwc/ui 0.0.0-dev.91 → 0.0.0-dev.93

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

@@ -10,15 +10,17 @@ 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
  *
- * @attr {string} help - Adds a help tooltip to the trigger of the picker, if style supports one
+ * @attr {string} help — Adds a help tooltip to the trigger of the picker, if style supports one
  *
- * @attr {DictEntry[]} dictionary - Renders all options using this array
+ * @attr {DictEntry[]} dictionary — Renders all options using this array
  *
  * @attr {vertical|horizontal|auto} label-value-placement
  *
+ * @slot — The default slot.
  * @slot label
  * @slot list
  * @slot validity-options
@@ -47,6 +49,10 @@ export declare class PickerView extends FormAssociatedBase {
     disconnectedCallback(): void;
     connectedCallback(): void;
     get pickerStyle(): PickerStyle;
+    /**
+     * Form participation property
+     * @type {string}
+     */
     get name(): string;
     setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
     setCustomValidity: (message: string) => void;

package/generated/components/picker-view.js

@@ -116,15 +116,17 @@ 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
  *
- * @attr {string} help - Adds a help tooltip to the trigger of the picker, if style supports one
+ * @attr {string} help — Adds a help tooltip to the trigger of the picker, if style supports one
  *
- * @attr {DictEntry[]} dictionary - Renders all options using this array
+ * @attr {DictEntry[]} dictionary — Renders all options using this array
  *
  * @attr {vertical|horizontal|auto} label-value-placement
  *
+ * @slot — The default slot.
  * @slot label
  * @slot list
  * @slot validity-options
@@ -436,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);
                 }
@@ -983,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() {
@@ -1031,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
@@ -1046,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
@@ -1084,7 +1086,10 @@ export class PickerView extends FormAssociatedBase {
         else
             trigger?.removeAttribute(this.constructor.ATTR.TRIGGER_HELP);
     }
-    // Optional: form participation properties
+    /**
+     * Form participation property
+     * @type {string}
+     */
     get name() {
         return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
     }

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

@@ -1,6 +1,7 @@
 /**
  * @summary A view that shows the progress toward completion of a task.
  *
+ * @slot — The default slot.
  * @slot current-value
  */
 export declare class ProgressView extends HTMLElement {

package/generated/components/progress-view.js

@@ -8,6 +8,7 @@ const progressViewStyles = ['circular', 'linear'];
 /**
  * @summary A view that shows the progress toward completion of a task.
  *
+ * @slot — The default slot.
  * @slot current-value
  */
 export class ProgressView extends HTMLElement {
@@ -71,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.d.ts

@@ -1,4 +1,5 @@
 /**
+ * @slot — The default slot.
  * @slot top-bar-principal
  * @slot bottom-bar-principal
  */

package/generated/components/scroll-view.js

@@ -6,12 +6,22 @@ import { $, devFlags, frame, onoff, slowHideShow } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 const observers = new ResizeObserverSingleton();
 /**
+ * @slot — The default slot.
  * @slot top-bar-principal
  * @slot bottom-bar-principal
  */
 export class ScrollView extends HTMLElement {
     static get observedAttributes() {
-        return ['navigation-title', 'navigation-inline-title', 'navigation-inline-subtitle', 'navigation-icon', 'navigation-bar-title-display-mode'];
+        return [
+            /**
+             * Configures the view’s title for purposes of navigation. Shorthand for `<v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"><span>Navigation Title</span></label-view></v-stack>`
+             */
+            'navigation-title',
+            'navigation-inline-title',
+            'navigation-inline-subtitle',
+            'navigation-icon',
+            'navigation-bar-title-display-mode',
+        ];
     }
     static #template;
     static get template() {
@@ -30,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.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,6 +1,7 @@
 /**
- * @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
  * @slot footer
  */

package/generated/components/section-view.js

@@ -1,8 +1,9 @@
 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
  * @slot footer
  */
@@ -25,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-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/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

@@ -3,8 +3,11 @@ 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
+ *
+ * @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
  */

package/generated/components/tab-view.js

@@ -6,8 +6,11 @@ import { $, cssTime, debounce, devFlags, frame, onoff, timeout } from '../intern
 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
+ *
+ * @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
  */
@@ -45,23 +48,6 @@ export class TabView extends HTMLElement {
         });
         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 },
@@ -72,7 +58,6 @@ export class TabView extends HTMLElement {
                 listener: this.#handleSummaryClick,
             },
         ], this).on());
-        // })
     }
     #handleSummaryClick = ({ target }) => {
         if (!(target instanceof HTMLElement))
@@ -113,57 +98,6 @@ export class TabView extends HTMLElement {
             }));
         }
     };
-    // #handleMediaChange: (evt: MediaQueryListEvent) => void = (evt) => {
-    //   if (devFlags.debug) 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) => {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${evt?.type}`);
@@ -195,7 +129,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) {

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

@@ -1,8 +1,9 @@
 /**
  * @summary Display selectable, sortable data arranged in rows and columns.
  *
- * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template - Sets the template areas when the table is in compact mode
+ * @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

package/generated/components/table-view.js

@@ -8,8 +8,9 @@ import { Snapshot } from '../snapshot';
 /**
  * @summary Display selectable, sortable data arranged in rows and columns.
  *
- * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template - Sets the template areas when the table is in compact mode
+ * @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
@@ -115,8 +116,8 @@ export class TableView extends HTMLElement {
           <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() }); //renderLabelTitle(title, node.textContent.trim()) //title?.setAttribute('title', node.textContent.trim())
-            queryMorph(':not([slot])', html `<span>${node.ariaSort ?? ''}</span>`, subTitle, { removeIf: !(node.ariaSort ?? '') }); //renderLabelTitle(subTitle, node.ariaSort ?? '') //subTitle?.setAttribute('title', node.ariaSort ?? '')
+            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);
         }
     };

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

@@ -2,6 +2,8 @@ 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.
+ *
  * @slot label
  * @slot validity-options
  */
@@ -16,6 +18,10 @@ export declare class TextField extends FormAssociatedBase {
     get keyboardType(): KeyboardType;
     get text(): string;
     set text(v: string);
+    /**
+     * Form participation property
+     * @type {string}
+     */
     get name(): string;
     get value(): string;
     get valueAsNumber(): number | "";

package/generated/components/text-field.js

@@ -7,6 +7,8 @@ import { $, compareBigDecimals, devFlags, kebabCase, onoff, set } from '../inter
 import { html, queryMorph } from '../morphdom';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
 /**
+ * @summary A control that displays an editable text area.
+ *
  * @slot label
  * @slot validity-options
  */
@@ -138,7 +140,7 @@ export class TextField extends FormAssociatedBase {
                 this.#sendValueToForm();
                 break;
             case 'label':
-                queryMorph('[slot=label]', html `<label-view slot="label" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue)
+                queryMorph('[slot=label]', html `<label-view slot="label" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
                 // this.#sendValueToForm()
                 break;
             case 'disabled':
@@ -392,7 +394,10 @@ export class TextField extends FormAssociatedBase {
             console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
-    // Optional: form participation properties
+    /**
+     * Form participation property
+     * @type {string}
+     */
     get name() {
         return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
     }

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

@@ -2,6 +2,8 @@ import { FormAssociatedBase } from '../internal/class/form-associated-base';
 declare const toggleStyles: readonly ["switch", "button"];
 export type ToggleStyle = (typeof toggleStyles)[number];
 /**
+ * @summary A control that switches between on and off states.
+ *
  * @slot label
  * @slot validity-options
  */
@@ -16,6 +18,10 @@ export declare class ToggleView extends FormAssociatedBase {
     get toggleStyle(): ToggleStyle;
     get isOn(): boolean;
     set isOn(v: boolean);
+    /**
+     * Form participation property
+     * @type {string}
+     */
     get name(): string;
     get value(): string | null;
     set value(v: string | null);

package/generated/components/toggle-view.js

@@ -6,6 +6,8 @@ import { $, devFlags, kebabCase, onoff } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 const toggleStyles = ['switch', 'button'];
 /**
+ * @summary A control that switches between on and off states.
+ *
  * @slot label
  * @slot validity-options
  */
@@ -85,7 +87,7 @@ export class ToggleView extends FormAssociatedBase {
                 this.#sendValueToForm(this.#connected);
                 break;
             case 'label':
-                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[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;
             case 'disabled':
                 for (const el of this.#shadowRoot.querySelectorAll('input'))
@@ -160,7 +162,10 @@ export class ToggleView extends FormAssociatedBase {
             console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
-    // Optional: form participation properties
+    /**
+     * Form participation property
+     * @type {string}
+     */
     get name() {
         return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
     }

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

@@ -1,16 +1,16 @@
 /**
  * @summary Populates the toolbar or navigation bar with the specified items.
  *
- * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
- * @slot primary-action - The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
- * @slot confirmation-action - The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
- * @slot destructive-action - The item represents a destructive action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
- * @slot top-bar-leading - Places the item in the leading edge of the top bar
- * @slot top-bar-principal - Places the item in the middle of the top bar
- * @slot top-bar-trailing - Places the item in the trailing edge of the top bar
- * @slot bottom-bar-leading - Places the item in the leading edge of the bottom bar
- * @slot bottom-bar-principal - Places the item in the middle of the bottom bar
- * @slot bottom-bar-trailing - Places the item in the trailing edge of the bottom bar
+ * @slot cancellation-action — The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot primary-action — The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot confirmation-action — The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot destructive-action — The item represents a destructive action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
+ * @slot top-bar-leading — Places the item in the leading edge of the top bar
+ * @slot top-bar-principal — Places the item in the middle of the top bar
+ * @slot top-bar-trailing — Places the item in the trailing edge of the top bar
+ * @slot bottom-bar-leading — Places the item in the leading edge of the bottom bar
+ * @slot bottom-bar-principal — Places the item in the middle of the bottom bar
+ * @slot bottom-bar-trailing — Places the item in the trailing edge of the bottom bar
  */
 export declare class ToolBar extends HTMLElement {
     #private;