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

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.')`.
+ * @summaryA 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.')`.
+ * @summaryA 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,8 +1,13 @@
 /**
- * @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();
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'body-view': BodyView;
+    }
+}

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/color-scheme.d.ts

@@ -5,3 +5,8 @@ export declare class ColorScheme extends HTMLElement {
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'color-scheme': ColorScheme;
+    }
+}

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

@@ -23,3 +23,8 @@ export declare class ContentUnavailable extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'content-unavailable': ContentUnavailable;
+    }
+}

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

@@ -15,7 +15,6 @@ export declare class DatePicker extends FormAssociatedBase {
     get datePickerStyle(): DatePickerStyle;
     /**
      * Form participation property
-     * @type {string}
      */
     get name(): string;
     get value(): {
@@ -40,8 +39,14 @@ export declare class DatePicker extends FormAssociatedBase {
     } | 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 {
+        'date-picker': DatePicker;
+    }
 }
 export {};

package/generated/components/date-picker.js

@@ -17,11 +17,17 @@ export class DatePicker extends FormAssociatedBase {
              * @type {"graphical"|"field"|"automatic"}
              */
             'date-picker-style',
+            /**
+             * @type {boolean}
+             */
             'required',
             'prompt',
             'label',
             'name',
             'selection',
+            /**
+             * @type {boolean}
+             */
             'disabled',
             'minimum',
             'maximum',
@@ -335,7 +341,6 @@ export class DatePicker extends FormAssociatedBase {
     };
     /**
      * Form participation property
-     * @type {string}
      */
     get name() {
         return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
@@ -453,20 +458,23 @@ export class DatePicker extends FormAssociatedBase {
         else
             this.#sendValueToForm(false);
     };
-    formAssociatedCallback = (form) => {
-        this.#sendValueToForm();
-    };
-    formDisabledCallback = (disabled) => {
+    formStateRestoreCallback(state, reason) {
+        //
+    }
+    formAssociatedCallback(form) {
+        this.#sendValueToForm(false);
+    }
+    formDisabledCallback(disabled) {
         for (const input of this.#inputs)
             input.toggleAttribute('disabled', !disabled);
-    };
-    formResetCallback = () => {
+    }
+    formResetCallback() {
         this.#selectedDate = {
             year: '',
             month: '',
             day: '',
         };
-        this.#sendValueToForm();
-    };
+        this.#sendValueToForm(false);
+    }
 }
 _a = DatePicker;

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

@@ -5,3 +5,8 @@ export declare class FineTooltip extends HTMLElement {
     disconnectedCallback(): void;
     hidePopover(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'fine-tooltip': FineTooltip;
+    }
+}

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 {
@@ -7,3 +9,8 @@ export declare class FormView extends FormBase {
     static polyfillDisconnectedCallback(el: HTMLFormElement): void;
     static polyfillConnectedCallback(el: HTMLFormElement): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'form-view': FormView;
+    }
+}

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
@@ -15,3 +15,8 @@ export declare class HStack extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-stack': HStack;
+    }
+}

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

package/generated/components/image-view.js

@@ -1,5 +1,9 @@
 import { $, devFlags } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
+/**
+ * @summary A view that displays an image.
+ *
+ */
 export class ImageView extends HTMLElement {
     static get observedAttributes() {
         return ['system-name', 'system-weight'];

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

@@ -1,12 +1,15 @@
 /**
  * @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
+ * @example <label-view><span>Hello world!</span></label-view> — Creating a label using a `span` element
+ * @example <label-view title="Hello world!"></label-view> — Creating a label using the `title` attribute
+ * @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 — 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.
+ * @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.
  *
  */
 export declare class LabelView extends HTMLElement {

package/generated/components/label-view.js

@@ -3,17 +3,28 @@ 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
+ * @example <label-view><span>Hello world!</span></label-view> — Creating a label using a `span` element
+ * @example <label-view title="Hello world!"></label-view> — Creating a label using the `title` attribute
+ * @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 — 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.
+ * @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.
  *
  */
 export class LabelView extends HTMLElement {
     static get observedAttributes() {
-        return ['system-image', 'title', 'line-limit', 'truncation-mode'];
+        return [
+            'system-image',
+            'title',
+            'line-limit',
+            /**
+             * @type {tail}
+             */
+            'truncation-mode',
+        ];
     }
     static #template;
     static get template() {

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

@@ -1,3 +1,11 @@
+/**
+ * @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
+ */
 export declare class LabeledContent extends HTMLElement {
     #private;
     static get observedAttributes(): string[];
@@ -7,3 +15,8 @@ export declare class LabeledContent extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'labeled-content': LabeledContent;
+    }
+}

package/generated/components/labeled-content.js

@@ -1,8 +1,26 @@
 import { $, devFlags } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
+/**
+ * @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
+ */
 export class LabeledContent extends HTMLElement {
     static get observedAttributes() {
-        return ['value', 'label', 'header', 'footer', 'labeled-content-style', 'format'];
+        return [
+            'value',
+            'label',
+            'header',
+            'footer',
+            /**
+             * @type {vertical|horizontal}
+             */
+            'labeled-content-style',
+            'format',
+        ];
     }
     static #template;
     static get template() {

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

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

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

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

@@ -1,6 +1,18 @@
+/**
+ *
+ * @attr {grouped} background-style
+ * @attr {boolean} padding
+ * @attr {boolean} navigation-bar-auto-hide
+ *
+ */
 export declare class NavigationLargeTitle extends HTMLElement {
     #private;
     constructor();
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-large-title': NavigationLargeTitle;
+    }
+}

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();
@@ -8,3 +8,8 @@ export declare class NavigationSplitView extends NavigationView {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-split-view': NavigationSplitView;
+    }
+}

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();
@@ -8,3 +8,8 @@ export declare class NavigationStack extends NavigationView {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-stack': NavigationStack;
+    }
+}

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[];
@@ -6,3 +11,8 @@ export declare class NavigationTitle extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-title': NavigationTitle;
+    }
+}

package/generated/components/navigation-title.js

@@ -8,6 +8,11 @@ var NavigationTitle_1;
 import { microtaskOnConnected } from '../internal/decorators';
 import { devFlags } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
+/**
+ * @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

@@ -51,13 +51,18 @@ export declare class PickerView extends FormAssociatedBase {
     get pickerStyle(): PickerStyle;
     /**
      * Form participation property
-     * @type {string}
      */
     get name(): string;
     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 {
+        'picker-view': PickerView;
+    }
 }
 export {};

package/generated/components/picker-view.js

@@ -1088,7 +1088,6 @@ export class PickerView extends FormAssociatedBase {
     }
     /**
      * Form participation property
-     * @type {string}
      */
     get name() {
         return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
@@ -1133,18 +1132,21 @@ export class PickerView extends FormAssociatedBase {
         else
             this.#sendValueToForm(false);
     };
-    formAssociatedCallback = (form) => {
-        this.#sendValueToForm();
-    };
-    formDisabledCallback = (disabled) => {
+    formStateRestoreCallback(state, reason) {
+        //
+    }
+    formAssociatedCallback(form) {
+        this.#sendValueToForm(false);
+    }
+    formDisabledCallback(disabled) {
         for (const btn of this.#shadowRoot.querySelectorAll('button'))
             btn.toggleAttribute('disabled', !disabled);
-    };
-    formResetCallback = () => {
+    }
+    formResetCallback() {
         this.#selection = '';
         this.#reflectSelectionOnButtons();
         this.#reflectSelectionOnCurrentValueLabel();
-        this.#sendValueToForm();
-    };
+        this.#sendValueToForm(false);
+    }
 }
 _a = PickerView;