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

package/generated/components/alert-dialog.d.ts

@@ -1,7 +1,6 @@
 import { DialogBase } from '../namespace-browser/base';
 /**
- * A representation of an alert presentation.
- * Use it from the client module like `void alert('Save failed.')`.
+ * @summary A representation of an alert presentation. Use it from the client module like `void alert('Save failed.')`.
  */
 export declare class AlertDialog extends DialogBase {
     #private;

package/generated/components/alert-dialog.js

@@ -3,8 +3,7 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 /**
- * A representation of an alert presentation.
- * Use it from the client module like `void alert('Save failed.')`.
+ * @summary A representation of an alert presentation. Use it from the client module like `void alert('Save failed.')`.
  */
 export class AlertDialog extends DialogBase {
     constructor() {

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

@@ -1,3 +1,6 @@
+/**
+ * @summary The content and behavior of the view.
+ */
 export declare class BodyView extends HTMLElement {
     constructor();
     disconnectedCallback(): void;

package/generated/components/body-view.js

@@ -1,4 +1,7 @@
 import { devFlags } from '../internal/utils';
+/**
+ * @summary The content and behavior of the view.
+ */
 export class BodyView extends HTMLElement {
     constructor() {
         super();

package/generated/components/bordered-button.d.ts

@@ -1,8 +1,8 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
- * @summary A control that initiates an action. Styled with standard border artwork based on the button’s context.
+ * @summary A control that starts an action. Styled with a standard border, adapting to the button’s surroundings.
  *
- * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a menu from a configuration
+ * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a bordered button
  *
  * @slot overlay
  *

package/generated/components/bordered-button.js

@@ -3,9 +3,9 @@ import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
- * @summary A control that initiates an action. Styled with standard border artwork based on the button’s context.
+ * @summary A control that starts an action. Styled with a standard border, adapting to the button’s surroundings.
  *
- * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a menu from a configuration
+ * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a bordered button
  *
  * @slot overlay
  *

package/generated/components/bordered-prominent-button.d.ts

@@ -1,8 +1,8 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
- * @summary A control that initiates an action. Styled with standard border prominent artwork based on the button’s context.
+ * @summary A control that starts an action. Styled with a prominent border, adapting to the button’s surroundings.
  *
- * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent bordered button
  *
  * @slot overlay
  *

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

@@ -3,9 +3,9 @@ import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
- * @summary A control that initiates an action. Styled with standard border prominent artwork based on the button’s context.
+ * @summary A control that starts an action. Styled with a prominent border, adapting to the button’s surroundings.
  *
- * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent bordered button
  *
  * @slot overlay
  *

package/generated/components/borderless-button.d.ts

@@ -1,8 +1,8 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
- * @summary A control that initiates an action. Styled without any borders.
+ * @summary A control that starts an action. Styled without any borders.
  *
- * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a `borderless-button`
  *
  * @slot overlay
  *

package/generated/components/borderless-button.js

@@ -3,9 +3,9 @@ import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
- * @summary A control that initiates an action. Styled without any borders.
+ * @summary A control that starts an action. Styled without any borders.
  *
- * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a `borderless-button`
  *
  * @slot overlay
  *

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

@@ -0,0 +1,25 @@
+/**
+ * @summary A message with a title and extra information that you show when part of your app can’t be used.
+ *
+ * @example <content-unavailable search></content-unavailable>
+ *
+ * @example <content-unavailable search="foo"></content-unavailable>
+ *
+ * @example <content-unavailable padding><label-view title="No Mail"><i class="ph ph-tray" slot="icon" foreground="secondary"></i></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>
+ *
+ * @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 description
+ * @slot actions
+ *
+ */
+export declare class ContentUnavailable extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

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

@@ -4,20 +4,20 @@ import { $, devFlags, onoff } from '../internal/utils';
 /**
  * @summary A message with a title and extra information that you show when part of your app can’t be used.
  *
- * @example <content-unavailable-view search></content-unavailable-view>
+ * @example <content-unavailable search></content-unavailable>
  *
- * @example <content-unavailable-view search="foo"></content-unavailable-view>
+ * @example <content-unavailable search="foo"></content-unavailable>
  *
- * @example <content-unavailable-view padding><label-view title="No Mail"><i class="ph ph-tray" slot="icon" foreground="secondary"></i></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-view>
+ * @example <content-unavailable padding><label-view title="No Mail"><i class="ph ph-tray" slot="icon" foreground="secondary"></i></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>
  *
- * @example <content-unavailable-view 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-view>
+ * @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 description
  * @slot actions
  *
  */
-export class ContentUnavailableView extends HTMLElement {
+export class ContentUnavailable extends HTMLElement {
     static get observedAttributes() {
         return ['search'];
     }
@@ -48,7 +48,7 @@ export class ContentUnavailableView extends HTMLElement {
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (devFlags.debug)
-            console.debug(`${ContentUnavailableView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+            console.debug(`${ContentUnavailable.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'search':
                 if (oldValue === newValue)
@@ -63,11 +63,11 @@ export class ContentUnavailableView extends HTMLElement {
     }
     disconnectedCallback() {
         if (devFlags.debug)
-            console.debug(`${ContentUnavailableView.name} ⚡️ disconnect`);
+            console.debug(`${ContentUnavailable.name} ⚡️ disconnect`);
     }
     connectedCallback() {
         if (devFlags.debug)
-            console.debug(`${ContentUnavailableView.name} ⚡️ connect`);
+            console.debug(`${ContentUnavailable.name} ⚡️ connect`);
     }
     #renderSearch = (search) => {
         const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<label-view><i class="ph ph-magnifying-glass" slot="icon" foreground="secondary"></i></label-view>`, '>1')), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(`<label-view foreground="secondary" slot="description"></label-view>`, '>1'));

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

@@ -2,7 +2,7 @@ import { FormAssociatedBase } from '../internal/class/form-associated-base';
 declare const datePickerStyles: readonly ["graphical", "field", "automatic"];
 export type DatePickerStyle = (typeof datePickerStyles)[number];
 /**
- * @summary A control for selecting an absolute date.
+ * @summary A control that selects an absolute date.
  */
 export declare class DatePicker extends FormAssociatedBase {
     #private;

package/generated/components/date-picker.js

@@ -7,7 +7,7 @@ import { $, clamp, devFlags, kebabCase, onoff, set } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
 /**
- * @summary A control for selecting an absolute date.
+ * @summary A control that selects an absolute date.
  */
 export class DatePicker extends FormAssociatedBase {
     static get observedAttributes() {
@@ -93,7 +93,7 @@ export class DatePicker extends FormAssociatedBase {
                     input.setAttribute('placeholder', map[input.name] ?? '');
                 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':

package/generated/components/glass-button.d.ts

@@ -1,8 +1,8 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
- * @summary A control that initiates an action. Styled with glass border artwork based on the button’s context.
+ * @summary A control that starts an action. Styled with a glass border, adapting to the button’s surroundings.
  *
- * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a glass button
  *
  * @slot overlay
  *

package/generated/components/glass-button.js

@@ -3,9 +3,9 @@ import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/util
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
- * @summary A control that initiates an action. Styled with glass border artwork based on the button’s context.
+ * @summary A control that starts an action. Styled with a glass border, adapting to the button’s surroundings.
  *
- * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a glass button
  *
  * @slot overlay
  *

package/generated/components/glass-prominent-button.d.ts

@@ -1,8 +1,8 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
- * @summary A control that initiates an action. Styled with prominent glass border artwork based on the button’s context.
+ * @summary A control that starts an action. Styled with a prominent glass border, adapting to the button’s surroundings.
  *
- * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent glass button
  *
  * @slot overlay
  *

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

@@ -3,9 +3,9 @@ import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/util
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
- * @summary A control that initiates an action. Styled with prominent glass border artwork based on the button’s context.
+ * @summary A control that starts an action. Styled with a prominent glass border, adapting to the button’s surroundings.
  *
- * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent glass button
  *
  * @slot overlay
  *

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

@@ -1,5 +1,5 @@
 /**
- * @summary A view that arranges its subviews in a horizontal line.
+ * @summary A view that arranges its children side by side.
  *
  * @attr {@templateSet} template — The main-axis grid template
  *

package/generated/components/h-stack.js

@@ -1,6 +1,6 @@
 import { devFlags } from '../internal/utils';
 /**
- * @summary A view that arranges its subviews in a horizontal line.
+ * @summary A view that arranges its children side by side.
  *
  * @attr {@templateSet} template — The main-axis grid template
  *

package/generated/components/index.d.ts

@@ -5,7 +5,7 @@ export * from './bordered-prominent-button';
 export * from './borderless-button';
 export * from './color-scheme';
 export * from './confirmation-dialog';
-export * from './content-unavailable-view';
+export * from './content-unavailable';
 export * from './date-picker';
 export * from './disclosure-group';
 export * from './fine-tooltip';

package/generated/components/index.js

@@ -5,7 +5,7 @@ export * from './bordered-prominent-button';
 export * from './borderless-button';
 export * from './color-scheme';
 export * from './confirmation-dialog';
-export * from './content-unavailable-view';
+export * from './content-unavailable';
 export * from './date-picker';
 export * from './disclosure-group';
 export * from './fine-tooltip';

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

@@ -1,9 +1,12 @@
 /**
+ * @summary A view that labels items with an icon and a title.
+ *
+ * @example <label-view system-image="hand-tap"><span>Hello</span></label-view> — Creating a label with an icon image and a title
  *
  * @attr {@fontSet} font — Sets the default font for text in this view.
  *
- * @slot — The default slot.
- * @slot icon
+ * @slot — Place children without a `slot` attribute inside the main block of the label.
+ * @slot icon — Place children with a `slot="icon"` attribute in the icon block of the label.
  *
  */
 export declare class LabelView extends HTMLElement {

package/generated/components/label-view.js

@@ -1,11 +1,14 @@
 import { $, devFlags } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 /**
+ * @summary A view that labels items with an icon and a title.
+ *
+ * @example <label-view system-image="hand-tap"><span>Hello</span></label-view> — Creating a label with an icon image and a title
  *
  * @attr {@fontSet} font — Sets the default font for text in this view.
  *
- * @slot — The default slot.
- * @slot icon
+ * @slot — Place children without a `slot` attribute inside the main block of the label.
+ * @slot icon — Place children with a `slot="icon"` attribute in the icon block of the label.
  *
  */
 export class LabelView extends HTMLElement {
@@ -51,10 +54,10 @@ export class LabelView extends HTMLElement {
             //   )
             //   break
             case 'system-image':
-                queryMorph('[slot=icon]', html `<image-view slot="icon" system-name="${newValue}"></image-view>`, this, { removeIf: !newValue }); //renderLabelIcon(this, newValue)
+                queryMorph('[slot=icon]', html `<image-view slot="icon" system-name="${newValue}"></image-view>`, this, { removeIf: !newValue });
                 break;
             case 'title':
-                queryMorph(':not([slot])', html `<span>${newValue}</span>`, this, { removeIf: !newValue }); //renderLabelTitle(this, newValue)
+                queryMorph(':not([slot])', html `<span>${newValue}</span>`, this, { removeIf: !newValue });
                 break;
         }
     }

package/generated/components/labeled-content.js

@@ -71,16 +71,16 @@ export class LabeledContent extends HTMLElement {
                 break;
             case 'value': {
                 const val = this.#fmt(newValue, this.getAttribute('format'));
-                queryMorph('label-view:not([slot])', html `<label-view>${val ? html `<span>${val}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this, this.#fmt(newValue, this.getAttribute('format')))
+                queryMorph('label-view:not([slot])', html `<label-view>${val ? html `<span>${val}</span>` : null}</label-view>`, this);
                 break;
             }
             case 'format': {
                 const val = this.#fmt(this.getAttribute('value'), newValue);
-                queryMorph('label-view:not([slot])', html `<label-view>${val ? html `<span>${val}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this, this.#fmt(this.getAttribute('value'), newValue))
+                queryMorph('label-view:not([slot])', html `<label-view>${val ? html `<span>${val}</span>` : null}</label-view>`, this);
                 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;
         }
     }

package/generated/components/list-view.js

@@ -4,20 +4,8 @@ import { devFlags, listActive, onoff } from '../internal/utils';
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
  */
 export class ListView extends HTMLElement {
-    // static #template: DocumentFragment
-    // static get template() {
-    //   return (this.#template ??= $(
-    //     String.raw`
-    //   <slot name="searchable"></slot>
-    //   <slot></slot>
-    //   `
-    //   ))
-    // }
-    // #shadowRoot
     constructor() {
         super();
-        // this.#shadowRoot = this.attachShadow({ mode: 'closed' })
-        // this.#shadowRoot.appendChild(document.importNode((this.constructor as typeof ListView).template, true))
     }
     disconnectedCallback() {
         if (devFlags.debug)

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

@@ -1,5 +1,5 @@
 /**
- * @summary A control for presenting a menu of actions.
+ * @summary A control that opens a menu of actions.
  *
  * @slot — The default slot.
  * @slot label

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-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.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
  *

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

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.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.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