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

package/generated/client/index.js

@@ -19,7 +19,7 @@ for (const [k, Ctor] of Object.entries(Components)) {
         // const testEl = document.createElement('template')
         // testEl.innerHTML = `<${Ctor.polyfillExtends} is="${is}"></${Ctor.polyfillExtends}>`
         // const testNode = testEl.content.firstElementChild,
-        if (!($(`<${Ctor.polyfillExtends} is="${is}"></${Ctor.polyfillExtends}>`, '>1') instanceof Ctor))
+        if (!($(html `<${Ctor.polyfillExtends} is="${is}"></${Ctor.polyfillExtends}>`, '>1') instanceof Ctor))
             polyfills.set(is, Ctor);
         continue;
     }
@@ -119,7 +119,7 @@ const handleHelp = ({ target, relatedTarget }) => {
     if (relatedTarget instanceof HTMLElement && trigger.contains(relatedTarget))
         return;
     const newAnchorName = `--help-${self.crypto.randomUUID()}`;
-    const tooltip = $(`<fine-tooltip></fine-tooltip>`, '>1');
+    const tooltip = $(html `<fine-tooltip></fine-tooltip>`, '>1');
     trigger.style.setProperty('anchor-name', newAnchorName);
     tooltip.style.setProperty('position-anchor', newAnchorName);
     document.body.appendChild(tooltip);
@@ -236,26 +236,26 @@ export const alert = (title, message, actions, options) => {
 };
 export const confirmationDialog = async (trigger, title, message, actions, options) => {
     const newAnchorName = `--confirmation-dialog-${self.crypto.randomUUID()}`;
-    const dialog = $(`<dialog is="confirmation-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(`<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
+    const dialog = $(html `<dialog is="confirmation-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(html `<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
     trigger.style.setProperty('anchor-name', newAnchorName, 'important'); //$.prop('anchor-name', newAnchorName, trigger, 'important')
     dialog.style.setProperty('position-anchor', newAnchorName); //$.prop('position-anchor', newAnchorName, dialog)
     if (title && false !== options?.titleVisibility) {
-        const label = $(`<label-view font="headline"></label-view>`, '>1');
+        const label = $(html `<label-view font="headline"></label-view>`, '>1');
         label.setAttribute('title', title);
         vStack.insertAdjacentElement('beforeend', label);
     }
     if (message && false !== options?.titleVisibility) {
-        const label = $(`<label-view foreground="secondary" font="callout"></label-view>`, '>1');
+        const label = $(html `<label-view foreground="secondary" font="callout"></label-view>`, '>1');
         label.setAttribute('title', message);
         vStack.insertAdjacentElement('beforeend', label);
     }
     for (const [index, action] of (actions ?? []).entries()) {
-        const btn = $(`<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');
+        const btn = $(html `<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');
         btn.setAttribute('value', `${index}`);
         if (action?.role)
             btn.setAttribute('role', action.role);
         if (action.label || action.image) {
-            const label = $(`<label-view></label-view>`, '>1');
+            const label = $(html `<label-view></label-view>`, '>1');
             if (action.label)
                 label.setAttribute('title', action.label);
             if (action.image)

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

@@ -1,6 +1,6 @@
 import { DialogBase } from '../namespace-browser/base';
 /**
- * @summary A representation of an alert presentation. Use it from the client module like `void alert('Save failed.')`.
+ * @summary A dialog that shows a message. 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,7 +3,7 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 /**
- * @summary A representation of an alert presentation. Use it from the client module like `void alert('Save failed.')`.
+ * @summary A dialog that shows a message. 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,5 +1,5 @@
 /**
- * @summary The content and behavior of the view.
+ * @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 {
     constructor();

package/generated/components/body-view.js

@@ -1,6 +1,6 @@
 import { devFlags } from '../internal/utils';
 /**
- * @summary The content and behavior of the view.
+ * @summary A container view that wraps a scroll view, marking it as a screen your app can navigate to.
  */
 export class BodyView extends HTMLElement {
     constructor() {

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

@@ -1,7 +1,6 @@
 import { DialogBase } from '../namespace-browser/base';
 /**
- * A representation of a confirmation presentation.
- * Use it from the client module like `await confirmation(trigger, 'Permanently erase the items in the Trash?')`.
+ * @summary A dialog that asks the user to confirm an action. Use it from the client module like `await confirmationDialog(trigger, 'Permanently erase the items in the Trash?')`.
  */
 export declare class ConfirmationDialog extends DialogBase {
     #private;

package/generated/components/confirmation-dialog.js

@@ -3,8 +3,7 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, isInside, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 /**
- * A representation of a confirmation presentation.
- * Use it from the client module like `await confirmation(trigger, 'Permanently erase the items in the Trash?')`.
+ * @summary A dialog that asks the user to confirm an action. Use it from the client module like `await confirmationDialog(trigger, 'Permanently erase the items in the Trash?')`.
  */
 export class ConfirmationDialog extends DialogBase {
     static get observedAttributes() {

package/generated/components/content-unavailable.js

@@ -1,6 +1,7 @@
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, devFlags, onoff } from '../internal/utils';
+import { html } from '../tpl';
 /**
  * @summary A message with a title and extra information that you show when part of your app can’t be used.
  *
@@ -23,16 +24,15 @@ export class ContentUnavailable extends HTMLElement {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-      <div part="root content-unavailable-title-stack">
-        <slot></slot>
-      </div>
-      <div part="root content-unavailable-description-stack">
-        <slot name="description"></slot>
-      </div>
-      <div part="root content-unavailable-actions-stack">
-        <slot name="actions"></slot>
-      </div>`));
+        return (this.#template ??= $(html `<div part="root content-unavailable-title-stack">
+          <slot></slot>
+        </div>
+        <div part="root content-unavailable-description-stack">
+          <slot name="description"></slot>
+        </div>
+        <div part="root content-unavailable-actions-stack">
+          <slot name="actions"></slot>
+        </div>`));
     }
     #shadowRoot;
     #slots;
@@ -70,7 +70,7 @@ export class ContentUnavailable extends HTMLElement {
             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'));
+        const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(html `<label-view><i class="ph ph-magnifying-glass" slot="icon" foreground="secondary"></i></label-view>`, '>1')), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(html `<label-view foreground="secondary" slot="description"></label-view>`, '>1'));
         if (search) {
             const interpolate = (text, vars) => text.replaceAll(/\{(\w+)\}/g, (_, key) => vars[key] ?? '');
             titleLabel.setAttribute('title', interpolate(I18n.t('SearchUnavailableContent').Label, { search }));

package/generated/components/date-picker.js

@@ -4,7 +4,8 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { $, clamp, devFlags, kebabCase, onoff, set } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
 /**
  * @summary A control that selects an absolute date.
@@ -18,7 +19,7 @@ export class DatePicker extends FormAssociatedBase {
              */
             'date-picker-style',
             /**
-             * @type {required}
+             * @type {boolean}
              */
             'required',
             'prompt',
@@ -26,7 +27,7 @@ export class DatePicker extends FormAssociatedBase {
             'name',
             'selection',
             /**
-             * @type {disabled}
+             * @type {boolean}
              */
             'disabled',
             'minimum',
@@ -53,20 +54,19 @@ export class DatePicker extends FormAssociatedBase {
         if (!_a.#templates.has(this.datePickerStyle))
             switch (this.datePickerStyle) {
                 default:
-                    _a.#templates.set(this.datePickerStyle, $(String.raw `
-            <label part="root date-picker-stack">
-            <div part="root date-picker-label-stack">
-              <slot name="label"></slot>
-            </div>
-            <div part="root date-picker-input-stack">
-              <input type="text" name="month" inputmode="numeric" pattern="\d*" minlength="1" maxlength="2" min="1" max="12" part="root input date-picker-form-input">
-              <span part="root date-picker-separator"></span>
-              <input type="text" name="day" inputmode="numeric" pattern="\d*" minlength="1" maxlength="2" min="1" max="31" part="root input date-picker-form-input">
-              <span part="root date-picker-separator"></span>
-              <input type="text" name="year" inputmode="numeric" pattern="\d*" minlength="4" maxlength="4" min="0" max="9999" part="root input date-picker-form-input">
-            </div>
-            <slot name="validity-options" hidden></slot>
-          </label>`));
+                    _a.#templates.set(this.datePickerStyle, $(html `<label part="root date-picker-stack">
+                <div part="root date-picker-label-stack">
+                  <slot name="label"></slot>
+                </div>
+                <div part="root date-picker-input-stack">
+                  <input type="text" name="month" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="12" part="root input date-picker-form-input" />
+                  <span part="root date-picker-separator"></span>
+                  <input type="text" name="day" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="31" part="root input date-picker-form-input" />
+                  <span part="root date-picker-separator"></span>
+                  <input type="text" name="year" inputmode="numeric" pattern="d*" minlength="4" maxlength="4" min="0" max="9999" part="root input date-picker-form-input" />
+                </div>
+                <slot name="validity-options" hidden></slot>
+              </label>`));
                     break;
             }
         return _a.#templates.get(this.datePickerStyle);

package/generated/components/disclosure-group.d.ts

@@ -1,8 +1,11 @@
 import { DetailsBase } from '../namespace-browser/base';
 /**
- * @summary A view that shows or hides another content view, based on the state of a disclosure control.
+ * @summary A view that shows or hides another view when the user opens or closes it.
  *
  * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details>
+ *
+ * @fires is-expanded
+ * @fires is-collapsed
  */
 export declare class DisclosureGroup extends DetailsBase {
     #private;

package/generated/components/disclosure-group.js

@@ -3,15 +3,19 @@ import { cssTime, devFlags, onoff, timeout } from '../internal/utils';
 import { DetailsBase } from '../namespace-browser/base';
 const toggleTimers = new WeakMap();
 /**
- * @summary A view that shows or hides another content view, based on the state of a disclosure control.
+ * @summary A view that shows or hides another view when the user opens or closes it.
  *
  * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details>
+ *
+ * @fires is-expanded
+ * @fires is-collapsed
  */
 export class DisclosureGroup extends DetailsBase {
     static get observedAttributes() {
         return [
             /**
              * The status of this element
+             * @type {boolean}
              */
             'open',
         ];

package/generated/components/fine-tooltip.js

@@ -1,6 +1,7 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, devFlags, onoff } from '../internal/utils';
+import { html } from '../tpl';
 export class FineTooltip extends HTMLElement {
     constructor() {
         super();
@@ -40,7 +41,7 @@ export class FineTooltip extends HTMLElement {
         return trigger ?? undefined;
     }
     #render = (str) => {
-        const label = this.querySelector(':scope>label-view') ?? this.appendChild($(`<label-view></label-view>`, '>1'));
+        const label = this.querySelector(':scope>label-view') ?? this.appendChild($(html `<label-view></label-view>`, '>1'));
         if (str)
             label.setAttribute('title', str);
         else

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

@@ -1,5 +1,7 @@
 import { FormBase } from '../namespace-browser/base';
 /**
+ * @summary A container view that groups controls together for entering data, like a settings screen.
+ *
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
  */
 export declare class FormView extends FormBase {

package/generated/components/form-view.js

@@ -2,6 +2,8 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, listActive, onoff } from '../internal/utils';
 import { FormBase } from '../namespace-browser/base';
 /**
+ * @summary A container view that groups controls together for entering data, like a settings screen.
+ *
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
  */
 export class FormView extends FormBase {

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

@@ -1,9 +1,9 @@
 /**
  * @summary A view that arranges its children side by side.
  *
- * @attr {@templateSet} template — The main-axis grid template
+ * @attr {@Template} template — The main-axis grid template
  *
- * @attr {@spacingSet} spacing — The gap between the primary axis
+ * @attr {@Spacing} spacing — The gap between the primary axis
  *
  * @attr {@blockSet} alignment — The cross-axis alignment
  * @attr {@inlineSet} distribution — The main-axis alignment

package/generated/components/h-stack.js

@@ -2,9 +2,9 @@ import { devFlags } from '../internal/utils';
 /**
  * @summary A view that arranges its children side by side.
  *
- * @attr {@templateSet} template — The main-axis grid template
+ * @attr {@Template} template — The main-axis grid template
  *
- * @attr {@spacingSet} spacing — The gap between the primary axis
+ * @attr {@Spacing} spacing — The gap between the primary axis
  *
  * @attr {@blockSet} alignment — The cross-axis alignment
  * @attr {@inlineSet} distribution — The main-axis alignment

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

@@ -1,3 +1,7 @@
+/**
+ * @summary A view that displays an image.
+ *
+ */
 export declare class ImageView extends HTMLElement {
     #private;
     static get observedAttributes(): string[];

package/generated/components/image-view.js

@@ -1,12 +1,17 @@
 import { $, devFlags } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
+/**
+ * @summary A view that displays an image.
+ *
+ */
 export class ImageView extends HTMLElement {
     static get observedAttributes() {
         return ['system-name', 'system-weight'];
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `<slot></slot>`));
+        return (this.#template ??= $(html `<slot></slot>`));
     }
     #shadowRoot;
     constructor() {

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

@@ -6,10 +6,14 @@
  * @example <label-view system-image="hand-waving"><span>Hello world!</span></label-view> — Creating a label with an icon and a title using the `system-image` attribute
  * @example <label-view><i slot="icon" class="ph ph-duotone ph-hand-waving"></i><span>Hello world!</span></label-view> — Creating a label with an icon and a title using the `icon` slot
  *
- * @attr {@fontSet} font — Sets the default font for text in this view.
+ * @attr {@Font} font — Sets the default font for text in this view.
  *
- * @slot — Any children without a `slot` attribute are placed in the title block of the label.
- * @slot icon — Use the `slot="icon"` attribute to place childen in the icon block of the label.
+ * @slot — Any children without a `slot` attribute are placed in the title block.
+ * @slot icon — Use the `slot="icon"` attribute to place childen in the icon block.
+ *
+ * @cssprop --label-gap — The gap between the icon and the title.
+ * @cssprop --label-image-size — The size of the icon.
+ * @cssprop --label-padding-inline — The padding inline of the label.
  *
  */
 export declare class LabelView extends HTMLElement {

package/generated/components/label-view.js

@@ -1,5 +1,6 @@
 import { $, devFlags } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 /**
  * @summary A view that labels items with an icon and a title.
  *
@@ -8,10 +9,14 @@ import { html, queryMorph } from '../morphdom';
  * @example <label-view system-image="hand-waving"><span>Hello world!</span></label-view> — Creating a label with an icon and a title using the `system-image` attribute
  * @example <label-view><i slot="icon" class="ph ph-duotone ph-hand-waving"></i><span>Hello world!</span></label-view> — Creating a label with an icon and a title using the `icon` slot
  *
- * @attr {@fontSet} font — Sets the default font for text in this view.
+ * @attr {@Font} font — Sets the default font for text in this view.
  *
- * @slot — Any children without a `slot` attribute are placed in the title block of the label.
- * @slot icon — Use the `slot="icon"` attribute to place childen in the icon block of the label.
+ * @slot — Any children without a `slot` attribute are placed in the title block.
+ * @slot icon — Use the `slot="icon"` attribute to place childen in the icon block.
+ *
+ * @cssprop --label-gap — The gap between the icon and the title.
+ * @cssprop --label-image-size — The size of the icon.
+ * @cssprop --label-padding-inline — The padding inline of the label.
  *
  */
 export class LabelView extends HTMLElement {
@@ -21,17 +26,17 @@ export class LabelView extends HTMLElement {
             'title',
             'line-limit',
             /**
-             * @type {tail}
+             * @type {"tail"}
              */
             'truncation-mode',
         ];
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <slot name="icon"></slot>
-    <slot></slot>
-    `
+        return (this.#template ??= $(html `
+      <slot name="icon"></slot>
+      <slot></slot>
+    `));
         //     String.raw`
         // <div part="root label-image-stack">
         //   <slot name="image"></slot>
@@ -39,7 +44,6 @@ export class LabelView extends HTMLElement {
         // <div part="root label-title-stack">
         //   <slot></slot>
         // </div>`
-        ));
     }
     #shadowRoot;
     // #reflectScheduled = false

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

@@ -1,3 +1,16 @@
+/**
+ * @summary A container view that pairs a label with a value.
+ *
+ * @slot — The default slot.
+ * @slot label — Use the `slot="label"` attribute to place childen in the label block.
+ * @slot header
+ * @slot footer
+ *
+ * @csspart labeled-content-container
+ * @csspart labeled-content-stack
+ * @csspart labeled-content-label-stack
+ * @csspart labeled-content-value-stack
+ */
 export declare class LabeledContent extends HTMLElement {
     #private;
     static get observedAttributes(): string[];

package/generated/components/labeled-content.js

@@ -1,5 +1,19 @@
 import { $, devFlags } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
+/**
+ * @summary A container view that pairs a label with a value.
+ *
+ * @slot — The default slot.
+ * @slot label — Use the `slot="label"` attribute to place childen in the label block.
+ * @slot header
+ * @slot footer
+ *
+ * @csspart labeled-content-container
+ * @csspart labeled-content-stack
+ * @csspart labeled-content-label-stack
+ * @csspart labeled-content-value-stack
+ */
 export class LabeledContent extends HTMLElement {
     static get observedAttributes() {
         return [
@@ -16,19 +30,19 @@ export class LabeledContent extends HTMLElement {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <div part="root labeled-content-container">
-      <slot name="header"></slot>
-      <div part="root labeled-content-stack">
-        <div part="root labeled-content-label-stack">
-          <slot name="label"></slot>
-        </div>
-        <div part="root labeled-content-value-stack">
-          <slot></slot>
+        return (this.#template ??= $(html `
+      <div part="root labeled-content-container">
+        <slot name="header"></slot>
+        <div part="root labeled-content-stack">
+          <div part="root labeled-content-label-stack">
+            <slot name="label"></slot>
+          </div>
+          <div part="root labeled-content-value-stack">
+            <slot></slot>
+          </div>
         </div>
+        <slot name="footer"></slot>
       </div>
-      <slot name="footer"></slot>
-    </div>
     `));
     }
     #shadowRoot;

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

@@ -1,4 +1,6 @@
 /**
+ * @summary A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.
+ *
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
  */
 export declare class ListView extends HTMLElement {

package/generated/components/list-view.js

@@ -1,6 +1,8 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, listActive, onoff } from '../internal/utils';
 /**
+ * @summary A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.
+ *
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
  */
 export class ListView extends HTMLElement {

package/generated/components/menu-view.js

@@ -1,7 +1,8 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, devFlags, onoff, touchGlass } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 /**
  * @summary A control that opens a menu of actions.
  *
@@ -14,17 +15,16 @@ export class MenuView extends HTMLElement {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-  <button type="button" part="root button menu-summary">
-    <slot name="label"></slot>
-  </button>
-  <dialog part="root menu-dialog" autofocus inert>
-    <form part="root menu-form" method="dialog" novalidate>
-      <div part="root menu-scrollable">
-        <slot></slot>
-      </div>
-    </form>
-  </dialog>`));
+        return (this.#template ??= $(html `<button type="button" part="root button menu-summary">
+          <slot name="label"></slot>
+        </button>
+        <dialog part="root menu-dialog" autofocus inert>
+          <form part="root menu-form" method="dialog" novalidate>
+            <div part="root menu-scrollable">
+              <slot></slot>
+            </div>
+          </form>
+        </dialog>`));
     }
     #shadowRoot;
     #dialog;

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

@@ -1,3 +1,10 @@
+/**
+ *
+ * @attr {grouped} background-style
+ * @attr {boolean} padding
+ * @attr {boolean} navigation-bar-auto-hide
+ *
+ */
 export declare class NavigationLargeTitle extends HTMLElement {
     #private;
     constructor();

package/generated/components/navigation-large-title.js

@@ -67,6 +67,13 @@ function isIntersectingWithContainer(el, container, rootMargin = '0px 0px 0px 0p
     };
     return !(elRect.bottom < marginRect.top || elRect.top > marginRect.bottom || elRect.right < marginRect.left || elRect.left > marginRect.right);
 }
+/**
+ *
+ * @attr {grouped} background-style
+ * @attr {boolean} padding
+ * @attr {boolean} navigation-bar-auto-hide
+ *
+ */
 export class NavigationLargeTitle extends HTMLElement {
     #styleObserver;
     #scrollObserver;

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

@@ -1,6 +1,6 @@
 import { NavigationView } from '../internal/class/navigation-view';
 /**
- * @summary A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section.
+ * @summary A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.
  */
 export declare class NavigationSplitView extends NavigationView {
     constructor();

package/generated/components/navigation-split-view.js

@@ -1,7 +1,7 @@
 import { NavigationView } from '../internal/class/navigation-view';
 import { devFlags } from '../internal/utils';
 /**
- * @summary A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section.
+ * @summary A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.
  */
 export class NavigationSplitView extends NavigationView {
     constructor() {

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

@@ -1,6 +1,6 @@
 import { NavigationView } from '../internal/class/navigation-view';
 /**
- * @summary A view that shows a main screen and lets you open other screens on top of it.
+ * @summary A container view that shows a main screen and lets the user open other screens on top of it.
  */
 export declare class NavigationStack extends NavigationView {
     constructor();

package/generated/components/navigation-stack.js

@@ -1,7 +1,7 @@
 import { NavigationView } from '../internal/class/navigation-view';
 import { devFlags } from '../internal/utils';
 /**
- * @summary A view that shows a main screen and lets you open other screens on top of it.
+ * @summary A container view that shows a main screen and lets the user open other screens on top of it.
  */
 export class NavigationStack extends NavigationView {
     constructor() {

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

@@ -1,3 +1,8 @@
+/**
+ * @summary A container view.
+ *
+ * @attr {boolean} padding
+ */
 export declare class NavigationTitle extends HTMLElement {
     #private;
     static get observedAttributes(): string[];