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

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
@@ -14,3 +14,8 @@ export declare class ProgressView extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'progress-view': ProgressView;
+    }
+}

package/generated/components/progress-view.js

@@ -6,7 +6,7 @@ import { html, queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
 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

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

@@ -1,8 +1,13 @@
 /**
- * @summary A wrapper to {hv}-stacks
+ * @summary A wrapper for {hv}-stacks
  */
 export declare class ScrollViewProxy extends HTMLElement {
     constructor();
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scroll-view-proxy': ScrollViewProxy;
+    }
+}

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
@@ -13,3 +15,8 @@ export declare class ScrollView extends HTMLElement {
     connectedCallback(): void;
     centerScrollToElement(child: Element): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scroll-view': ScrollView;
+    }
+}

package/generated/components/scroll-view.js

@@ -6,6 +6,8 @@ import { $, devFlags, frame, onoff, slowHideShow } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 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

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

@@ -5,3 +5,8 @@ export declare class SearchView extends InputBase {
     static polyfillConnectedCallback(el: InputBase): void;
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'search-view': SearchView;
+    }
+}

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

@@ -14,3 +14,8 @@ export declare class SectionView extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'section-view': SectionView;
+    }
+}

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,7 +1,15 @@
+/**
+ * @summary A control that shows or hides the sidebar view.
+ */
 export declare class SidebarToggle extends HTMLElement {
     #private;
     constructor();
-    connectedCallback(): void;
     disconnectedCallback(): void;
+    connectedCallback(): void;
     private static query;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'sidebar-toggle': SidebarToggle;
+    }
+}

package/generated/components/sidebar-toggle.js

@@ -3,10 +3,19 @@ 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();
     }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        observers.unobserve(this);
+        CleanupRegistry.unregister(this);
+    }
     connectedCallback() {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ connect`);
@@ -18,12 +27,6 @@ export class SidebarToggle extends HTMLElement {
         // @ts-expect-error
         _a.#handleMeasure([entry]);
     }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
-        observers.unobserve(this);
-        CleanupRegistry.unregister(this);
-    }
     static query(target) {
         const container = target?.closest('navigation-split-view,tab-view'), sideBar = container?.querySelector(':scope>[is=sidebar-view]');
         return { container, sideBar };

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/sticky-container.d.ts

@@ -1,6 +1,11 @@
 export declare class StickyContainer extends HTMLElement {
     #private;
     constructor();
-    connectedCallback(): void;
     disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sticky-container': StickyContainer;
+    }
 }

package/generated/components/sticky-container.js

@@ -4,17 +4,17 @@ export class StickyContainer extends HTMLElement {
     constructor() {
         super();
     }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${StickyContainer.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
     connectedCallback() {
         if (devFlags.debug)
             console.debug(`${StickyContainer.name} ⚡️ connect`);
         // CleanupRegistry.register(this, onoff('transitionend transitionstart transitioncancel', this.#handleTransitionrun as unknown as EventListener, this).on())
         CleanupRegistry.register(this, onoff('transitionrun', this.#handleTransitionrun, this).on());
     }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${StickyContainer.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(this);
-    }
     #handleTransitionrun = ({ target, propertyName, pseudoElement }) => {
         if (!(target instanceof HTMLElement))
             return;

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
  *
@@ -19,7 +20,12 @@ export declare class TabView extends HTMLElement {
     get tabBarPlacement(): "bottom-bar" | "ornament" | "sidebar" | "top-bar" | undefined;
     get moreTab(): NavigationStack | null;
     connectedCallback(): void;
-    get selectedTab(): (NavigationStack | NavigationSplitView)[];
-    set selectedTab(tabs: (NavigationStack | NavigationSplitView)[]);
+    get selectedTab(): (NavigationSplitView | NavigationStack)[];
+    set selectedTab(tabs: (NavigationSplitView | NavigationStack)[]);
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tab-view': TabView;
+    }
 }
 export {};

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
  *
@@ -19,3 +19,8 @@ export declare class TableView extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'table-view': TableView;
+    }
+}

package/generated/components/table-view.js

@@ -6,7 +6,7 @@ import { $, devFlags, listActive, onoff } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
 /**
- * @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
  *

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

@@ -20,7 +20,6 @@ export declare class TextField extends FormAssociatedBase {
     set text(v: string);
     /**
      * Form participation property
-     * @type {string}
      */
     get name(): string;
     get value(): string;
@@ -28,8 +27,14 @@ export declare class TextField extends FormAssociatedBase {
     get negativeNumbersAllowed(): boolean;
     setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
     setCustomValidity: (message: string) => void;
-    formAssociatedCallback: (form: HTMLFormElement) => void;
-    formDisabledCallback: (disabled: boolean) => void;
-    formResetCallback: () => void;
+    formStateRestoreCallback(state: string, reason: string): void;
+    formAssociatedCallback(form: HTMLFormElement): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'text-field': TextField;
+    }
 }
 export {};

package/generated/components/text-field.js

@@ -14,7 +14,33 @@ const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
  */
 export class TextField extends FormAssociatedBase {
     static get observedAttributes() {
-        return ['prompt', 'minimum', 'maximum', 'min-length', 'max-length', 'label', 'name', 'text', 'text-input-autocapitalization', 'disable-autocorrection', 'keyboard-type', 'required', 'disabled'];
+        return [
+            'prompt',
+            'minimum',
+            'maximum',
+            'min-length',
+            'max-length',
+            'label',
+            'name',
+            'text',
+            'text-input-autocapitalization',
+            /**
+             * @type {boolean}
+             */
+            'disable-autocorrection',
+            /**
+             * @type {decimal-pad|number-pad|default}
+             */
+            'keyboard-type',
+            /**
+             * @type {boolean}
+             */
+            'required',
+            /**
+             * @type {boolean}
+             */
+            'disabled',
+        ];
     }
     static #template;
     static get template() {
@@ -396,7 +422,6 @@ export class TextField extends FormAssociatedBase {
     };
     /**
      * Form participation property
-     * @type {string}
      */
     get name() {
         return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
@@ -438,14 +463,8 @@ export class TextField extends FormAssociatedBase {
         }
     }
     get negativeNumbersAllowed() {
-        // switch (this.keyboardType) {
-        //   case 'decimal-pad':
-        //   case 'number-pad':
         const min = this.getAttribute('minimum') ?? '-Infinity', max = this.getAttribute('maximum') ?? 'Infinity';
         return compareBigDecimals('0', min) >= 0 && compareBigDecimals('0', max) <= 0;
-        //   default:
-        //     return false
-        // }
     }
     setValidity = (flags, message, anchor) => {
         // let msg
@@ -487,16 +506,19 @@ export class TextField extends FormAssociatedBase {
         else
             this.#sendValueToForm(false);
     };
-    formAssociatedCallback = (form) => {
-        this.#sendValueToForm();
-    };
-    formDisabledCallback = (disabled) => {
+    formStateRestoreCallback(state, reason) {
+        this.text = state;
+    }
+    formAssociatedCallback(form) {
+        this.#sendValueToForm(false);
+    }
+    formDisabledCallback(disabled) {
         for (const el of this.#shadowRoot.querySelectorAll('input'))
             el.toggleAttribute('disabled', !disabled);
-    };
-    formResetCallback = () => {
+    }
+    formResetCallback() {
         this.text = '';
         this.#sendValueToForm(false);
-    };
+    }
 }
 _a = TextField;

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

@@ -4,6 +4,8 @@ export type ToggleStyle = (typeof toggleStyles)[number];
 /**
  * @summary A control that switches between on and off states.
  *
+ * @fires toggle:change — User toggled the control
+ *
  * @slot label
  * @slot validity-options
  */
@@ -20,15 +22,20 @@ export declare class ToggleView extends FormAssociatedBase {
     set isOn(v: boolean);
     /**
      * Form participation property
-     * @type {string}
      */
     get name(): string;
     get value(): string | null;
     set value(v: string | null);
     setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
     setCustomValidity: (message: string) => void;
-    formAssociatedCallback: (form: HTMLFormElement) => void;
-    formDisabledCallback: (disabled: boolean) => void;
-    formResetCallback: () => void;
+    formStateRestoreCallback(state: string, reason: string): void;
+    formAssociatedCallback(form: HTMLFormElement): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'toggle-view': ToggleView;
+    }
 }
 export {};

package/generated/components/toggle-view.js

@@ -8,12 +8,12 @@ const toggleStyles = ['switch', 'button'];
 /**
  * @summary A control that switches between on and off states.
  *
+ * @fires toggle:change — User toggled the control
+ *
  * @slot label
  * @slot validity-options
  */
 export class ToggleView extends FormAssociatedBase {
-    // declare addEventListener: TypedEventTargetMethods<ToggleViewEventMap>['addEventListener']
-    // declare removeEventListener: TypedEventTargetMethods<ToggleViewEventMap>['removeEventListener']
     static get observedAttributes() {
         return ['label', 'name', 'value', 'is-on', 'keyboard-type', 'required', 'disabled'];
     }
@@ -164,7 +164,6 @@ export class ToggleView extends FormAssociatedBase {
     };
     /**
      * Form participation property
-     * @type {string}
      */
     get name() {
         return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
@@ -215,16 +214,19 @@ export class ToggleView extends FormAssociatedBase {
         else
             this.#sendValueToForm(false);
     };
-    formAssociatedCallback = (form) => {
-        this.#sendValueToForm();
-    };
-    formDisabledCallback = (disabled) => {
+    formStateRestoreCallback(state, reason) {
+        this.value = state;
+    }
+    formAssociatedCallback(form) {
+        this.#sendValueToForm(false);
+    }
+    formDisabledCallback(disabled) {
         for (const el of this.#shadowRoot.querySelectorAll('input'))
             el.toggleAttribute('disabled', !disabled);
-    };
-    formResetCallback = () => {
+    }
+    formResetCallback() {
         this.value = '';
-        this.#sendValueToForm();
-    };
+        this.#sendValueToForm(false);
+    }
 }
 _a = ToggleView;

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

@@ -1,8 +1,13 @@
 /**
- * A model that represents a group of `ToolbarItems` which can be placed in the toolbar or navigation bar.
+ * @summary A container view that groups items together in the toolbar or navigation bar.
  */
 export declare class ToolBarItemGroup extends HTMLElement {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'tool-bar-item-group': ToolBarItemGroup;
+    }
+}

package/generated/components/tool-bar-item-group.js

@@ -9,7 +9,7 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { adaptiveSlot } from '../internal/decorators';
 import { devFlags } from '../internal/utils';
 /**
- * A model that represents a group of `ToolbarItems` which can be placed in the toolbar or navigation bar.
+ * @summary A container view that groups items together in the toolbar or navigation bar.
  */
 let ToolBarItemGroup = ToolBarItemGroup_1 = class ToolBarItemGroup extends HTMLElement {
     constructor() {

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

@@ -1,5 +1,5 @@
 /**
- * @summary A model that represents an item which can be placed in the toolbar or navigation bar.
+ * @summary A view placed in the toolbar or navigation bar.
  */
 export declare class ToolBarItem extends HTMLElement {
     #private;
@@ -9,3 +9,8 @@ export declare class ToolBarItem extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'tool-bar-item': ToolBarItem;
+    }
+}

package/generated/components/tool-bar-item.js

@@ -10,7 +10,7 @@ import { adaptiveSlot } from '../internal/decorators';
 import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 /**
- * @summary A model that represents an item which can be placed in the toolbar or navigation bar.
+ * @summary A view placed in the toolbar or navigation bar.
  */
 let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
     static get observedAttributes() {

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

@@ -1,5 +1,5 @@
 /**
- * @summary Populates the toolbar or navigation bar with the specified items.
+ * @summary A list of items placed into the toolbar or navigation bar around your content.
  *
  * @slot cancellation-action — The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
  * @slot primary-action — The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
@@ -19,3 +19,8 @@ export declare class ToolBar extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'tool-bar': ToolBar;
+    }
+}

package/generated/components/tool-bar.js

@@ -3,7 +3,7 @@ import { ResizeObserverSingleton } from '../internal/class/resize-observer-singl
 import { $, devFlags } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
 /**
- * @summary Populates the toolbar or navigation bar with the specified items.
+ * @summary A list of items placed into the toolbar or navigation bar around your content.
  *
  * @slot cancellation-action — The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
  * @slot primary-action — The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal

package/generated/components/v-keyboard.d.ts

@@ -13,3 +13,8 @@ export declare class VKeyboard extends HTMLElement {
     connectedCallback(): void;
     set shouldKeyboardBeOpen(fn: () => boolean);
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'v-keyboard': VKeyboard;
+    }
+}

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

@@ -3,9 +3,9 @@
  *
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
  *
- * @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 {@inlineSet} alignment — The cross-axis alignment
  * @attr {@blockSet} distribution — The main-axis alignment
@@ -17,3 +17,8 @@ export declare class VStack extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'v-stack': VStack;
+    }
+}

package/generated/components/v-stack.js

@@ -4,9 +4,9 @@ import { devFlags } from '../internal/utils';
  *
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
  *
- * @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 {@inlineSet} alignment — The cross-axis alignment
  * @attr {@blockSet} distribution — The main-axis alignment