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

package/generated/components/navigation-title.js

@@ -7,7 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var NavigationTitle_1;
 import { microtaskOnConnected } from '../internal/decorators';
 import { devFlags } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
+/**
+ * @summary A container view.
+ *
+ * @attr {boolean} padding
+ */
 let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElement {
     static get observedAttributes() {
         return ['value', 'subtitle', 'system-image', 'system-image-weight'];

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

@@ -14,7 +14,7 @@ export type Dictionary = DictEntry[];
  *
  * @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 help — Adds a help tooltip to the trigger of the picker, if style supports one
  *
  * @attr {DictEntry[]} dictionary — Renders all options using this array
  *

package/generated/components/picker-view.js

@@ -6,7 +6,7 @@ import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { NavigationPath } from '../internal/class/navigation-path';
 import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
 import { $, devFlags, kebabCase, onoff } from '../internal/utils';
-import { html as htmx, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
 import { html, render } from '../tpl';
 const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'automatic'];
 const update = (path, node, overwrite = true) => {
@@ -120,7 +120,7 @@ const collectLeafValues = (node) => (node.children.length ? node.children.flatMa
  *
  * @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 help — Adds a help tooltip to the trigger of the picker, if style supports one
  *
  * @attr {DictEntry[]} dictionary — Renders all options using this array
  *
@@ -173,7 +173,7 @@ export class PickerView extends FormAssociatedBase {
     #spawnPage = (elements, tag, parentGroupId, searchable = false, title) => {
         if (devFlags.debug)
             console.debug(`${_a.name} #spawnPage`);
-        const body = $(`<${'sheet-view' === tag ? 'dialog is="sheet-view"' : 'body-view'}><scroll-view><v-stack placement="leading fill"><list-view preferred-expanded-style="inset"></list-view></v-stack></scroll-view><tool-bar><tool-bar-item slot="top-bar-leading"><button type="button" tabindex="0"><label-view system-image="${'sheet-view' === tag ? 'x' : 'caret-left'}"></label-view></button></tool-bar-item></tool-bar></${'sheet-view' === tag ? 'dialog' : 'body-view'}>`, '>1'), sv = body.querySelector('scroll-view'), list = body.querySelector('list-view'), backBtn = body.querySelector('button');
+        const body = $(html `<${'sheet-view' === tag ? 'dialog is="sheet-view"' : 'body-view'}><scroll-view><v-stack placement="leading fill"><list-view preferred-expanded-style="inset"></list-view></v-stack></scroll-view><tool-bar><tool-bar-item slot="top-bar-leading"><button type="button" tabindex="0"><label-view system-image="${'sheet-view' === tag ? 'x' : 'caret-left'}"></label-view></button></tool-bar-item></tool-bar></${'sheet-view' === tag ? 'dialog' : 'body-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) {
@@ -372,7 +372,7 @@ export class PickerView extends FormAssociatedBase {
             case 'sheet':
             case 'navigation-link': {
                 // current value label only
-                const currentValueLabel = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(`<label-view></label-view>`, '>1'));
+                const currentValueLabel = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(html `<label-view></label-view>`, '>1'));
                 // reset state
                 // if (currentValueLabel) {
                 //   renderLabelIcon(currentValueLabel, 'dots-three') // overwritten
@@ -406,7 +406,7 @@ export class PickerView extends FormAssociatedBase {
                 break;
             }
             case 'menu': {
-                const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(`<menu-view></menu-view>`, '>1'));
+                const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(html `<menu-view></menu-view>`, '>1'));
                 // reset state
                 menu.innerHTML = '';
                 menu.tabIndex = 0;
@@ -414,7 +414,7 @@ export class PickerView extends FormAssociatedBase {
                 for (const el of this.querySelectorAll(':scope>:not([slot])'))
                     if (menu !== el)
                         el.remove();
-                const currentValueLabel = menu.querySelector(':scope>label-view[slot=label]') ?? menu.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
+                const currentValueLabel = menu.querySelector(':scope>label-view[slot=label]') ?? menu.appendChild($(html `<label-view slot="label"></label-view>`, '>1'));
                 // if (currentValueLabel) {
                 //   renderLabelIcon(currentValueLabel, 'dots-three') // overwritten
                 //   renderLabelTitle(currentValueLabel, this.#currentValueLabel) // overwritten
@@ -426,8 +426,8 @@ export class PickerView extends FormAssociatedBase {
             }
             case 'inline':
             default: {
-                const sectionTpl = `<section-view></section-view>`;
-                const inlineList = this.querySelector(':scope>list-view:not([slot])') ?? this.appendChild($(`<list-view>${sectionTpl}</list-view>`, '>1')), section = inlineList.querySelector(':scope>section-view') ?? inlineList.appendChild($(sectionTpl, '>1'));
+                const sectionTpl = html `<section-view></section-view>`;
+                const inlineList = this.querySelector(':scope>list-view:not([slot])') ?? this.appendChild($(html `<list-view>${sectionTpl}</list-view>`, '>1')), section = inlineList.querySelector(':scope>section-view') ?? inlineList.appendChild($(sectionTpl, '>1'));
                 // reset state
                 section.innerHTML = '';
                 // clear all siblings
@@ -437,8 +437,10 @@ export class PickerView extends FormAssociatedBase {
                 // add label as a plain element
                 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);
+                    const hStack = $(html `<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)', html `<label-view>${value ? html `<span>${value}</span>` : null}</label-view>`, hStack);
                     // if (label) renderLabelTitle(label, value) //label.setAttribute('title', value)
                     section.insertAdjacentElement('beforeend', hStack);
                 }
@@ -503,32 +505,32 @@ export class PickerView extends FormAssociatedBase {
             switch (this.pickerStyle) {
                 case 'sheet':
                 case 'navigation-link':
-                    _a.#templates.set(this.pickerStyle, $(String.raw `
-                <label part="root picker-stack">
-            <div part="root picker-label-stack">
-              <slot name="label"></slot>
-            </div>
-            <div part="root picker-input-stack">
-              <slot></slot>
-            </div>
-            <slot name="list" hidden></slot>
-            <slot name="validity-options" hidden></slot>
-          </label>
-                `));
+                    _a.#templates.set(this.pickerStyle, $(html `
+              <label part="root picker-stack">
+                <div part="root picker-label-stack">
+                  <slot name="label"></slot>
+                </div>
+                <div part="root picker-input-stack">
+                  <slot></slot>
+                </div>
+                <slot name="list" hidden></slot>
+                <slot name="validity-options" hidden></slot>
+              </label>
+            `));
                     break;
                 case 'menu':
-                    _a.#templates.set(this.pickerStyle, $(String.raw `
-                <label part="root picker-stack">
-            <div part="root picker-label-stack">
-              <slot name="label"></slot>
-            </div>
-            <div part="root picker-input-stack">
-              <slot></slot>
-            </div>
-            <slot name="list" hidden></slot>
-            <slot name="validity-options" hidden></slot>
-          </label>
-                `));
+                    _a.#templates.set(this.pickerStyle, $(html `
+              <label part="root picker-stack">
+                <div part="root picker-label-stack">
+                  <slot name="label"></slot>
+                </div>
+                <div part="root picker-input-stack">
+                  <slot></slot>
+                </div>
+                <slot name="list" hidden></slot>
+                <slot name="validity-options" hidden></slot>
+              </label>
+            `));
                     //   break
                     // case 'compact':
                     //   PickerView.#templates.set(
@@ -577,17 +579,16 @@ export class PickerView extends FormAssociatedBase {
                 //     break
                 case 'inline':
                 default:
-                    _a.#templates.set(this.pickerStyle, $(String.raw `
-          <label part="root picker-stack">
-          <div part="root picker-label-stack">
-            <slot name="label"></slot>
-          </div>
-          <div part="root picker-input-stack">
-            <slot></slot>
-          </div>
-          <slot name="list" hidden></slot>
-          <slot name="validity-options" hidden></slot>
-        </label>`));
+                    _a.#templates.set(this.pickerStyle, $(html ` <label part="root picker-stack">
+                <div part="root picker-label-stack">
+                  <slot name="label"></slot>
+                </div>
+                <div part="root picker-input-stack">
+                  <slot></slot>
+                </div>
+                <slot name="list" hidden></slot>
+                <slot name="validity-options" hidden></slot>
+              </label>`));
                     break;
             }
         return _a.#templates.get(this.pickerStyle);
@@ -985,7 +986,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);
+        queryMorph('[slot=label]', html `<label-view slot="label">${value ? html `<span>${value}</span>` : null}</label-view>`, this);
         this.#renderSlotted([]);
     }
     #reflectSelectionOnButtons() {
@@ -1033,8 +1034,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 });
-                    queryMorph('[slot=icon]', htmx `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage });
+                    queryMorph(':not([slot])', html `<span>${title}</span>`, currentValueLabel, { removeIf: !title });
+                    queryMorph('[slot=icon]', html `<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
@@ -1048,8 +1049,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 });
-                    queryMorph('[slot=icon]', htmx `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage });
+                    queryMorph(':not([slot])', html `<span>${title}</span>`, currentValueLabel, { removeIf: !title });
+                    queryMorph('[slot=icon]', html `<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.d.ts

@@ -1,5 +1,5 @@
 /**
- * @summary A view that shows the progress toward completion of a task.
+ * @summary A view that shows how far along a task is.
  *
  * @slot — The default slot.
  * @slot current-value

package/generated/components/progress-view.js

@@ -2,11 +2,12 @@ var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { $, devFlags } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
+import { html } from '../tpl';
 const progressViewStyles = ['circular', 'linear'];
 /**
- * @summary A view that shows the progress toward completion of a task.
+ * @summary A view that shows how far along a task is.
  *
  * @slot — The default slot.
  * @slot current-value
@@ -28,27 +29,27 @@ export class ProgressView extends HTMLElement {
         if (!_a.#templates.has(this.progressViewStyle))
             switch (this.progressViewStyle) {
                 case 'linear':
-                    _a.#templates.set(this.progressViewStyle, $(String.raw `
-            <slot></slot>
-            <div part="root progress-control progress-line-control"></div>
-            <slot name="current-value"></slot>
+                    _a.#templates.set(this.progressViewStyle, $(html `
+              <slot></slot>
+              <div part="root progress-control progress-line-control"></div>
+              <slot name="current-value"></slot>
             `));
                     break;
                 case 'circular':
                 default:
-                    _a.#templates.set(this.progressViewStyle, $(String.raw `
-            <div part="root progress-control progress-circular-control">
-              <div part="root progress-control progress-circular-blade progress-circular-blade-1"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-2"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-3"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-4"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-5"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-6"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-7"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-8"></div>
-            </div>
-            <slot></slot>
-            <slot name="current-value"></slot>
+                    _a.#templates.set(this.progressViewStyle, $(html `
+              <div part="root progress-control progress-circular-control">
+                <div part="root progress-control progress-circular-blade progress-circular-blade-1"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-2"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-3"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-4"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-5"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-6"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-7"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-8"></div>
+              </div>
+              <slot></slot>
+              <slot name="current-value"></slot>
             `));
                     break;
             }
@@ -63,7 +64,7 @@ export class ProgressView extends HTMLElement {
             console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'label': {
-                const label = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(`<label-view foreground="secondary"></label-view>`, '>1'));
+                const label = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(html `<label-view foreground="secondary"></label-view>`, '>1'));
                 if (newValue) {
                     label.setAttribute('title', newValue);
                 }

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

@@ -1,5 +1,5 @@
 /**
- * @summary A wrapper to {hv}-stacks
+ * @summary A wrapper for {hv}-stacks
  */
 export declare class ScrollViewProxy extends HTMLElement {
     constructor();

package/generated/components/scroll-view-proxy.js

@@ -1,6 +1,6 @@
 import { devFlags } from '../internal/utils';
 /**
- * @summary A wrapper to {hv}-stacks
+ * @summary A wrapper for {hv}-stacks
  */
 export class ScrollViewProxy extends HTMLElement {
     constructor() {

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

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

package/generated/components/scroll-view.js

@@ -3,9 +3,12 @@ import { lifecycleObserver } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
 import { $, devFlags, frame, onoff, slowHideShow } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const observers = new ResizeObserverSingleton();
 /**
+ * @summary A view that scrolls its content when it doesn’t fit the screen.
+ *
  * @slot — The default slot.
  * @slot top-bar-principal
  * @slot bottom-bar-principal
@@ -25,18 +28,17 @@ export class ScrollView extends HTMLElement {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-  <slot></slot>
-  <div part="root scroll-view-navbar">
-    <div part="root scroll-view-navbar-stack">
-      <slot name="top-bar-principal"></slot>
-    </div>
-  </div>
-  <div part="root scroll-view-toolbar">
-    <div part="root scroll-view-toolbar-stack">
-      <slot name="bottom-bar-principal"></slot>
-    </div>
-  </div>`));
+        return (this.#template ??= $(html `<slot></slot>
+        <div part="root scroll-view-navbar">
+          <div part="root scroll-view-navbar-stack">
+            <slot name="top-bar-principal"></slot>
+          </div>
+        </div>
+        <div part="root scroll-view-toolbar">
+          <div part="root scroll-view-toolbar-stack">
+            <slot name="bottom-bar-principal"></slot>
+          </div>
+        </div>`));
     }
     #shadowRoot;
     #slots = new Map();
@@ -228,7 +230,7 @@ export class ScrollView extends HTMLElement {
         // const container = ((vs = this.querySelector<HTMLElement>(':scope>v-stack') ?? (this.appendChild($(`<v-stack></v-stack>`, '>1')) as HTMLElement)) =>
         //   vs.querySelector<HTMLElement>(':scope>navigation-title:not([slot])') ??
         //   vs.appendChild($(html`<navigation-title value="${title}" subtitle="${subtitle}" system-image="${icon}" padding></navigation-title>`.toString(), '>1')))()
-        const container = this.querySelector(':scope>v-stack') ?? this.appendChild($(`<v-stack></v-stack>`, '>1'));
+        const container = this.querySelector(':scope>v-stack') ?? this.appendChild($(html `<v-stack></v-stack>`, '>1'));
         queryMorph('navigation-title:not([slot])', html `<navigation-title value="${title}" subtitle="${subtitle}" system-image="${icon}" padding></navigation-title>`, container);
     };
 }

package/generated/components/section-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 container view that groups related content together.
  *
@@ -13,16 +14,15 @@ export class SectionView extends HTMLElement {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-  <div part="root section-main-stack">
-    <slot></slot>
-  </div>
-  <div part="root section-header-stack">
-    <slot name="header"></slot>
-  </div>
-  <div part="root section-footer-stack">
-    <slot name="footer"></slot>
-  </div>`));
+        return (this.#template ??= $(html `<div part="root section-main-stack">
+          <slot></slot>
+        </div>
+        <div part="root section-header-stack">
+          <slot name="header"></slot>
+        </div>
+        <div part="root section-footer-stack">
+          <slot name="footer"></slot>
+        </div>`));
         // <div class="sticky-sentinel" style="grid-area:sentinel;inline-size:100%;block-size:0.1px;pointer-events:none;"></div>
     }
     #shadowRoot;

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

@@ -1,4 +1,7 @@
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A dialog that slides up over the current screen.
+ */
 export declare class SheetView extends DialogBase {
     #private;
     constructor();

package/generated/components/sheet-view.js

@@ -1,6 +1,9 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, onoff } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A dialog that slides up over the current screen.
+ */
 export class SheetView extends DialogBase {
     constructor() {
         super();

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

@@ -1,3 +1,6 @@
+/**
+ * @summary A control that shows or hides the sidebar view.
+ */
 export declare class SidebarToggle extends HTMLElement {
     #private;
     constructor();

package/generated/components/sidebar-toggle.js

@@ -3,6 +3,9 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
 import { debounce, devFlags, onoff } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
+/**
+ * @summary A control that shows or hides the sidebar view.
+ */
 export class SidebarToggle extends HTMLElement {
     constructor() {
         super();

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

@@ -1,4 +1,7 @@
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A container view that arranges navigation destinations in a single column.
+ */
 export declare class SidebarView extends DialogBase {
     #private;
     constructor();

package/generated/components/sidebar-view.js

@@ -1,6 +1,9 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A container view that arranges navigation destinations in a single column.
+ */
 export class SidebarView extends DialogBase {
     constructor() {
         super();

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

@@ -1,6 +1,6 @@
 import { DialogBase } from '../namespace-browser/base';
 /**
- * @summary A screen that lets users switch between different views using buttons, tabs, or other controls.
+ * @summary A container view that groups tab-items together along the top or bottom of the screen.
  */
 export declare class TabBar extends DialogBase {
     #private;

package/generated/components/tab-bar.js

@@ -2,7 +2,7 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 /**
- * @summary A screen that lets users switch between different views using buttons, tabs, or other controls.
+ * @summary A container view that groups tab-items together along the top or bottom of the screen.
  */
 export class TabBar extends DialogBase {
     constructor() {

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

@@ -1,4 +1,7 @@
 import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @summary A control that switches the tab view to this tab.
+ */
 export declare class TabItem extends ButtonBase {
     #private;
     constructor();

package/generated/components/tab-item.js

@@ -2,6 +2,9 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { TabView } from './tab-view';
+/**
+ * @summary A control that switches the tab view to this tab.
+ */
 export class TabItem extends ButtonBase {
     constructor() {
         super();

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

@@ -3,6 +3,7 @@ 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];
 /**
+ * @summary A container view that switches between screens using tabs.
  *
  * @cssprop --adaptable-tab-bar-placement
  *

package/generated/components/tab-view.js

@@ -6,6 +6,7 @@ import { $, cssTime, debounce, devFlags, frame, onoff, timeout } from '../intern
 import { Snapshot } from '../snapshot';
 const TAB_BAR_PLACEMENTS = ['bottom-bar', 'ornament', 'sidebar', 'top-bar'];
 /**
+ * @summary A container view that switches between screens using tabs.
  *
  * @cssprop --adaptable-tab-bar-placement
  *

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

@@ -1,5 +1,5 @@
 /**
- * @summary Display selectable, sortable data arranged in rows and columns.
+ * @summary A container view that arranges data in rows and columns, optionally letting the user select one or more of them.
  *
  * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template — Sets the template areas when the table is in compact mode
  *