@swiftwc/ui 0.0.0-dev.114 → 0.0.0-dev.117

package/generated/client/index.js

@@ -2,12 +2,12 @@ import { alertDialog, confirmationDialog as confirmationDialogBus, lifecycleObse
 import * as Components from '../components';
 import { I18n } from '../i18n';
 import { NavigationPath } from '../internal/class/navigation-path';
-import flags from '../internal/flags';
+import devFlags from '../internal/dev-flags';
 import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
 import { $, debug, kebabCase, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 import { html, render } from '../tpl';
-debug(flags);
+debug(devFlags);
 //#region polyfills
 export const polyfills = new Map();
 for (const [k, Ctor] of Object.entries(Components)) {
@@ -263,7 +263,7 @@ export const confirmationDialog = async (trigger, title, message, actions, optio
         }
         dialog.insertAdjacentElement('beforeend', btn);
     }
-    trigger.closest('body-view,dialog')?.insertAdjacentElement('beforeend', dialog); // dialog.showModal()
+    trigger.closest('content-view,dialog')?.insertAdjacentElement('beforeend', dialog); // dialog.showModal()
     const { promise, resolve } = Promise.withResolvers(), off = onoff('confirmation:return', (evt) => {
         const { detail } = evt;
         off();

package/generated/components/content-unavailable.d.ts

@@ -9,7 +9,7 @@
  *
  * @example <content-unavailable padding><label-view title="No Mail"><svg slot="icon" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable>
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot description
  * @slot actions
  *

package/generated/components/content-unavailable.js

@@ -13,7 +13,7 @@ import { html } from '../tpl';
  *
  * @example <content-unavailable padding><label-view title="No Mail"><svg slot="icon" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable>
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot description
  * @slot actions
  *

package/generated/components/{body-view.d.ts → content-view.d.ts}

@@ -1,13 +1,13 @@
 /**
  * @summary A container view that wraps a scroll view, marking it as a screen your app can navigate to.
  */
-export declare class BodyView extends HTMLElement {
+export declare class ContentView extends HTMLElement {
     constructor();
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'body-view': BodyView;
+        'content-view': ContentView;
     }
 }

package/generated/components/{body-view.js → content-view.js}

@@ -2,14 +2,14 @@ import { debug } from '../internal/utils';
 /**
  * @summary A container view that wraps a scroll view, marking it as a screen your app can navigate to.
  */
-export class BodyView extends HTMLElement {
+export class ContentView extends HTMLElement {
     constructor() {
         super();
     }
     disconnectedCallback() {
-        debug(`${BodyView.name} ⚡️ disconnect`);
+        debug(`${ContentView.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        debug(`${BodyView.name} ⚡️ connect`);
+        debug(`${ContentView.name} ⚡️ connect`);
     }
 }

package/generated/components/index.d.ts

@@ -1,11 +1,11 @@
 export * from './alert-dialog';
-export * from './body-view';
 export * from './bordered-button';
 export * from './bordered-prominent-button';
 export * from './borderless-button';
 export * from './color-scheme';
 export * from './confirmation-dialog';
 export * from './content-unavailable';
+export * from './content-view';
 export * from './date-picker';
 export * from './detail-placeholder';
 export * from './disclosure-group';

package/generated/components/index.js

@@ -1,11 +1,11 @@
 export * from './alert-dialog';
-export * from './body-view';
 export * from './bordered-button';
 export * from './bordered-prominent-button';
 export * from './borderless-button';
 export * from './color-scheme';
 export * from './confirmation-dialog';
 export * from './content-unavailable';
+export * from './content-view';
 export * from './date-picker';
 export * from './detail-placeholder';
 export * from './disclosure-group';

package/generated/components/labeled-content.d.ts

@@ -7,7 +7,7 @@
  *
  * @example <labeled-content value="Content"><label-view slot="label" title="Custom Value"></label-view><label-view slot="label" title="Custom Subtitle Value"></label-view></labeled-content> — Creates a labeled element that displays a custom label and a custom subtitle to the label
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot label — Use the `slot="label"` attribute to place childen in the label block.
  * @slot header
  * @slot footer

package/generated/components/labeled-content.js

@@ -10,7 +10,7 @@ import { html } from '../tpl';
  *
  * @example <labeled-content value="Content"><label-view slot="label" title="Custom Value"></label-view><label-view slot="label" title="Custom Subtitle Value"></label-view></labeled-content> — Creates a labeled element that displays a custom label and a custom subtitle to the label
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot label — Use the `slot="label"` attribute to place childen in the label block.
  * @slot header
  * @slot footer

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

@@ -1,7 +1,7 @@
 /**
  * @summary A control that opens a menu of actions.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot label
  */
 export declare class MenuView extends HTMLElement {

package/generated/components/menu-view.js

@@ -6,7 +6,7 @@ import { html } from '../tpl';
 /**
  * @summary A control that opens a menu of actions.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot label
  */
 export class MenuView extends HTMLElement {

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

@@ -16,7 +16,7 @@ export type Dictionary = DictEntry[];
  *
  * @attr {boolean} horizontal-radio-group-layout
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot label
  * @slot list
  * @slot {HTMLOptionElement[]} validity-options

package/generated/components/picker-view.js

@@ -136,7 +136,7 @@ const flattenDictionary = (tree) => {
  *
  * @attr {boolean} horizontal-radio-group-layout
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot label
  * @slot list
  * @slot {HTMLOptionElement[]} validity-options
@@ -184,7 +184,7 @@ export class PickerView extends FormAssociatedBase {
             const { target } = evt;
             if (!(target instanceof HTMLElement))
                 return;
-            const newPage = this.#spawnPage(el instanceof Element ? Array.from(el.children) : el.children, 'body-view', groupId, this.hasAttribute('searchable'), extractLabel(el));
+            const newPage = this.#spawnPage(el instanceof Element ? Array.from(el.children) : el.children, 'content-view', groupId, this.hasAttribute('searchable'), extractLabel(el));
             if (!newPage)
                 return;
             newPage.dataset.groupId = groupId; // <-- tag the spawned page
@@ -212,7 +212,7 @@ export class PickerView extends FormAssociatedBase {
                   </tool-bar-item>
                 </tool-bar>
               </dialog>`, '>1')
-            : $(html `<body-view>
+            : $(html `<content-view>
                 <scroll-view>
                   <v-stack placement="leading fill">
                     <list-view preferred-expanded-style="inset"></list-view>
@@ -225,7 +225,7 @@ export class PickerView extends FormAssociatedBase {
                     </button>
                   </tool-bar-item>
                 </tool-bar>
-              </body-view>`, '>1'), sv = body.querySelector('scroll-view'), list = body.querySelector('list-view'), backBtn = body.querySelector('button');
+              </content-view>`, '>1'), sv = body.querySelector('scroll-view'), list = body.querySelector('list-view'), backBtn = body.querySelector('button');
         if (title)
             sv?.setAttribute('navigation-inline-title', title);
         if (searchable) {
@@ -336,8 +336,8 @@ export class PickerView extends FormAssociatedBase {
         if (!this.#spawn)
             return;
         const groupMap = indexGroups(freshRoot);
-        for (const el of this.#spawn.querySelectorAll('body-view')) {
-            const depth = ancestors('body-view,[is=sheet-view]', el).indexOf(this.#spawn);
+        for (const el of this.#spawn.querySelectorAll('content-view')) {
+            const depth = ancestors('content-view,[is=sheet-view]', el).indexOf(this.#spawn);
             if (0 >= depth)
                 continue;
             const groupId = el.dataset.groupId;
@@ -348,7 +348,7 @@ export class PickerView extends FormAssociatedBase {
             }
             const children = source instanceof Element ? Array.from(source.children) : source.children;
             const title = source instanceof Element ? extractLabel(source) : (source.title ?? null);
-            const newPage = this.#spawnPage(children, 'body-view', groupId, this.hasAttribute('searchable'), title);
+            const newPage = this.#spawnPage(children, 'content-view', groupId, this.hasAttribute('searchable'), title);
             newPage.dataset.groupId = groupId;
             reflectSpawnedPage(el, newPage);
         }
@@ -422,18 +422,18 @@ export class PickerView extends FormAssociatedBase {
                 if (!this.#spawn)
                     break;
                 // rerender level 0
-                reflectSpawnedPage(this.#spawn, this.#spawnPage(input.source, 'DIALOG' === this.#spawn.tagName ? 'sheet-view' : 'body-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label')));
+                reflectSpawnedPage(this.#spawn, this.#spawnPage(input.source, 'DIALOG' === this.#spawn.tagName ? 'sheet-view' : 'content-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label')));
                 this.#resyncSpawnedPages(input.source);
                 // // FIXME:
-                // for (const el of this.#spawn.querySelectorAll<HTMLElement>('body-view')) {
-                //   const depth = $.ancestors('body-view,[is=sheet-view]', el).indexOf(this.#spawn)
+                // for (const el of this.#spawn.querySelectorAll<HTMLElement>('content-view')) {
+                //   const depth = $.ancestors('content-view,[is=sheet-view]', el).indexOf(this.#spawn)
                 //   if (0 >= depth) continue
                 //   const datalist = this.querySelector<HTMLElement>(`:scope>${Array.from({ length: depth }, () => 'datalist').join('>')}`)
                 //   if (!datalist) {
                 //     el.remove()
                 //     break
                 //   }
-                //   reflectSpawnedElement(el, this.#spawnPage(Array.from(datalist.children), 'body-view', this.hasAttribute('searchable'), datalist.dataset.label))
+                //   reflectSpawnedElement(el, this.#spawnPage(Array.from(datalist.children), 'content-view', this.hasAttribute('searchable'), datalist.dataset.label))
                 // }
                 break;
             }
@@ -788,7 +788,7 @@ export class PickerView extends FormAssociatedBase {
         this.#spawn?.remove?.();
         const { source } = this.#resolveSource();
         const level0 = this.#spawnPage(source, // this.hasAttribute('dictionary') ? parseDictionary(this.getAttribute('dictionary')) : (this.#slots?.get('list')?.assignedElements() ?? []),
-        'sheet' === this.pickerStyle ? 'sheet-view' : 'body-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label'));
+        'sheet' === this.pickerStyle ? 'sheet-view' : 'content-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label'));
         if (!level0)
             return;
         const path = new NavigationPath(target)?.hydrate();

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

@@ -1,7 +1,7 @@
 /**
  * @summary A view that shows how far along a task is.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot current-value
  */
 export declare class ProgressView extends HTMLElement {

package/generated/components/progress-view.js

@@ -9,7 +9,7 @@ const progressViewStyles = ['circular', 'linear'];
 /**
  * @summary A view that shows how far along a task is.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot current-value
  */
 export class ProgressView extends HTMLElement {

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

@@ -1,7 +1,7 @@
 /**
  * @summary A view that scrolls its content when it doesn’t fit the screen.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot top-bar-principal
  * @slot bottom-bar-principal
  */

package/generated/components/scroll-view.js

@@ -9,7 +9,7 @@ const observers = new ResizeObserverSingleton();
 /**
  * @summary A view that scrolls its content when it doesn’t fit the screen.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot top-bar-principal
  * @slot bottom-bar-principal
  */

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

@@ -1,7 +1,7 @@
 /**
  * @summary A container view that groups related content together.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot header
  * @slot footer
  */

package/generated/components/section-view.js

@@ -4,7 +4,7 @@ import { html } from '../tpl';
 /**
  * @summary A container view that groups related content together.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot header
  * @slot footer
  */

package/generated/components/tab-view.js

@@ -38,7 +38,12 @@ export class TabView extends HTMLElement {
         return this.#cachedAdaptableTabBarPlacement;
     }
     get moreTab() {
-        return this.querySelector(':scope>navigation-stack:has(> navigation-stack,> navigation-split-view)');
+        try {
+            return this.querySelector(':scope>navigation-stack:has(> navigation-stack,> navigation-split-view)');
+        }
+        catch {
+            return this.querySelector(':scope>navigation-stack:has(> navigation-stack)') ?? this.querySelector(':scope>navigation-stack:has(> navigation-split-view)');
+        }
     }
     connectedCallback() {
         debug(`${_a.name} ⚡️ connect`);

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

@@ -3,7 +3,7 @@
  *
  * @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 — The default slot
  * @slot header-leading
  * @slot header-principal
  * @slot header-trailing

package/generated/components/table-view.js

@@ -11,7 +11,7 @@ import { html } from '../tpl';
  *
  * @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 — The default slot
  * @slot header-leading
  * @slot header-principal
  * @slot header-trailing