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

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

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

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/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 {required}
+             */
             'required',
             'prompt',
             'label',
             'name',
             'selection',
+            /**
+             * @type {disabled}
+             */
             '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/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

@@ -7,3 +7,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/h-stack.d.ts

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

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

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

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.
  *
- * @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 of the label.
+ * @slot icon — Use the `slot="icon"` attribute to place childen in the icon block of the label.
  *
  */
 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.
  *
- * @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 of the label.
+ * @slot icon — Use the `slot="icon"` attribute to place childen in the icon block of the label.
  *
  */
 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

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

package/generated/components/labeled-content.js

@@ -2,7 +2,17 @@ import { $, devFlags } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 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

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

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

@@ -4,3 +4,8 @@ export declare class NavigationLargeTitle extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-large-title': NavigationLargeTitle;
+    }
+}

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

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

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

@@ -6,3 +6,8 @@ export declare class NavigationTitle extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-title': NavigationTitle;
+    }
+}

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;

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

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

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

@@ -6,3 +6,8 @@ export declare class ScrollViewProxy extends HTMLElement {
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scroll-view-proxy': ScrollViewProxy;
+    }
+}

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

@@ -13,3 +13,8 @@ export declare class ScrollView extends HTMLElement {
     connectedCallback(): void;
     centerScrollToElement(child: Element): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scroll-view': ScrollView;
+    }
+}

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/sidebar-toggle.d.ts

@@ -1,7 +1,12 @@
 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

@@ -7,6 +7,12 @@ 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 +24,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/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-view.d.ts

@@ -19,7 +19,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/table-view.d.ts

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

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 {""}
+             */
+            'disable-autocorrection',
+            /**
+             * @type {decimal-pad|number-pad|default}
+             */
+            'keyboard-type',
+            /**
+             * @type {required}
+             */
+            'required',
+            /**
+             * @type {disabled}
+             */
+            '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

@@ -6,3 +6,8 @@ export declare class ToolBarItemGroup extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'tool-bar-item-group': ToolBarItemGroup;
+    }
+}

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

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

@@ -19,3 +19,8 @@ export declare class ToolBar extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'tool-bar': ToolBar;
+    }
+}

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

@@ -17,3 +17,8 @@ export declare class VStack extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'v-stack': VStack;
+    }
+}

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

@@ -1,8 +1,10 @@
 export type AlertReturnDetail = {
     returnValue: string;
 };
+export interface AlertReturnEvent extends CustomEvent<AlertReturnDetail> {
+}
 declare global {
     interface HTMLElementEventMap {
-        'alert:return': CustomEvent<AlertReturnDetail>;
+        'alert:return': AlertReturnEvent;
     }
 }

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

@@ -2,8 +2,10 @@ export type ConfirmationReturnDetail = {
     returnValue: string;
     positionAnchor: string;
 };
+export interface ConfirmationReturnEvent extends CustomEvent<ConfirmationReturnDetail> {
+}
 declare global {
     interface HTMLElementEventMap {
-        'confirmation:return': CustomEvent<ConfirmationReturnDetail>;
+        'confirmation:return': ConfirmationReturnEvent;
     }
 }

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

@@ -1,8 +1,10 @@
 export type DatePickerSelectionDetail = {
     selection: string;
 };
+export interface DatePickerSelectionEvent extends CustomEvent<DatePickerSelectionDetail> {
+}
 declare global {
     interface HTMLElementEventMap {
-        selection: CustomEvent<DatePickerSelectionDetail>;
+        selection: DatePickerSelectionEvent;
     }
 }

package/generated/events/lifecycle-observer.d.ts

@@ -2,9 +2,13 @@ import { type ScrollView } from '../components';
 export type PageShowHideDetail = {
     page: ScrollView;
 };
+export interface PageShowEvent extends CustomEvent<PageShowHideDetail> {
+}
+export interface PageHideEvent extends CustomEvent<PageShowHideDetail> {
+}
 declare global {
     interface HTMLElementEventMap {
-        pageshow: CustomEvent<PageShowHideDetail>;
-        pagehide: CustomEvent<PageShowHideDetail>;
+        pageshow: PageShowEvent;
+        pagehide: PageHideEvent;
     }
 }

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

@@ -5,11 +5,19 @@ export type PickerSearchableDetail = {
     element: HTMLElement;
     search: string;
 };
+export interface PickerSelectionEvent extends CustomEvent<PickerSelectionDetail> {
+}
+export interface PickerSearchfocusEvent extends CustomEvent<PickerSearchableDetail> {
+}
+export interface PickerSearchblurEvent extends CustomEvent<PickerSearchableDetail> {
+}
+export interface PickerSearchinputEvent extends CustomEvent<PickerSearchableDetail> {
+}
 declare global {
     interface HTMLElementEventMap {
-        selection: CustomEvent<PickerSelectionDetail>;
-        'picker:searchfocus': CustomEvent<PickerSearchableDetail>;
-        'picker:searchblur': CustomEvent<PickerSearchableDetail>;
-        'picker:searchinput': CustomEvent<PickerSearchableDetail>;
+        selection: PickerSelectionEvent;
+        'picker:searchfocus': PickerSearchfocusEvent;
+        'picker:searchblur': PickerSearchblurEvent;
+        'picker:searchinput': PickerSearchinputEvent;
     }
 }

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

@@ -2,9 +2,13 @@ import { type ScrollView } from '../components';
 export type PageRevealSwapDetail = {
     page: ScrollView;
 };
+export interface PagerevealEvent extends CustomEvent<PageRevealSwapDetail> {
+}
+export interface PageswapEvent extends CustomEvent<PageRevealSwapDetail> {
+}
 declare global {
     interface HTMLElementEventMap {
-        pagereveal: CustomEvent<PageRevealSwapDetail>;
-        pageswap: CustomEvent<PageRevealSwapDetail>;
+        pagereveal: PagerevealEvent;
+        pageswap: PageswapEvent;
     }
 }

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

@@ -14,15 +14,31 @@ export type TabViewAdaptableTabBarPlacementDetail = {
     oldValue?: TabBarPlacement;
     newValue?: TabBarPlacement;
 };
+export interface TabshowEvent extends CustomEvent<TabDetail> {
+}
+export interface TabhideEvent extends CustomEvent<TabDetail> {
+}
+export interface TabrevealEvent extends CustomEvent<TabDetail> {
+}
+export interface TabswapEvent extends CustomEvent<TabDetail> {
+}
+export interface BeforetabrevealEvent extends CustomEvent<TabBeforeDetail> {
+}
+export interface BeforetabswapEvent extends CustomEvent<TabBeforeDetail> {
+}
+export interface TabViewToggleEvent extends CustomEvent<TabViewDetail> {
+}
+export interface TabViewAdaptableTabBarPlacementChangeEvent extends CustomEvent<TabViewAdaptableTabBarPlacementDetail> {
+}
 declare global {
     interface HTMLElementEventMap {
-        tabshow: CustomEvent<TabDetail>;
-        tabhide: CustomEvent<TabDetail>;
-        tabreveal: CustomEvent<TabDetail>;
-        tabswap: CustomEvent<TabDetail>;
-        beforetabreveal: CustomEvent<TabBeforeDetail>;
-        beforetabswap: CustomEvent<TabBeforeDetail>;
-        'tab-view:toggle': CustomEvent<TabViewDetail>;
-        'tab-view:adaptable-tab-bar-placement-change': CustomEvent<TabViewAdaptableTabBarPlacementDetail>;
+        tabshow: TabshowEvent;
+        tabhide: TabhideEvent;
+        tabreveal: TabrevealEvent;
+        tabswap: TabswapEvent;
+        beforetabreveal: BeforetabrevealEvent;
+        beforetabswap: BeforetabswapEvent;
+        'tab-view:toggle': TabViewToggleEvent;
+        'tab-view:adaptable-tab-bar-placement-change': TabViewAdaptableTabBarPlacementChangeEvent;
     }
 }

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

@@ -1,8 +1,10 @@
 export type TextFieldCommitDetail = {
     text: string;
 };
+export interface TextFieldCommitEvent extends CustomEvent<TextFieldCommitDetail> {
+}
 declare global {
     interface HTMLElementEventMap {
-        commit: CustomEvent<TextFieldCommitDetail>;
+        commit: TextFieldCommitEvent;
     }
 }

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

@@ -2,8 +2,10 @@ export type ToggleChangeDetail = {
     isOn: boolean;
     value: string | null;
 };
+export interface ToggleChangeEvent extends CustomEvent<ToggleChangeDetail> {
+}
 declare global {
     interface HTMLElementEventMap {
-        'toggle:change': CustomEvent<ToggleChangeDetail>;
+        'toggle:change': ToggleChangeEvent;
     }
 }

package/generated/internal/class/form-associated-base.js

@@ -29,7 +29,7 @@ export class FormAssociatedBase extends HTMLElement {
     }
     constructor() {
         super();
-        internals.set(this, this.attachInternals());
+        internals.set(this, this.attachInternals?.());
         // trackedElements.set(this, new Set<Element>())
     }
     disconnectedCallback() {

package/generated/internal/utils/kebab-case.js

@@ -1,11 +1,8 @@
 export default function (str) {
-    return (str
-        // Replace uppercase letters with - + lowercase
-        .replace(/([A-Z])/g, '-$1')
-        // Replace spaces and underscores with -
-        .replace(/[\s_]+/g, '-')
-        // Convert to lowercase
-        .toLowerCase()
-        // Remove leading/trailing dashes
-        .replace(/^-+|-+$/g, ''));
+    return str
+        .replace(/([A-Z])/g, '-$1') // Replace uppercase letters with - + lowercase
+        .replace(/[\s_]+/g, '-') // Replace spaces and underscores with -
+        .replace(/-+/g, '-') // collapse any run of dashes into one
+        .toLowerCase() // Convert to lowercase
+        .replace(/^-+|-+$/g, ''); // Remove leading/trailing dashes
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.93",
+  "version": "0.0.0-dev.94",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/web-components.html-data/en.json

@@ -149,7 +149,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/date-picker"
         }
       ],
-      "description": "### **Properties:**\n- readonly **template** — DocumentFragment\n- readonly **datePickerStyle** — \"graphical\" | \"field\" | \"automatic\"\n- readonly **name** — string Form participation property\n- readonly **value** — { year: string; month: string; day: string; }\n- readonly **valueAsDate** — Date | null Returns the value as a Date object.\n- readonly **minimum** — { year: string; month: string; day: string; } | null\n- readonly **maximum** — { year: string; month: string; day: string; } | null",
+      "description": "### **Properties:**\n- readonly **template** — DocumentFragment\n- readonly **datePickerStyle** — \"graphical\" | \"field\" | \"automatic\"\n- readonly **name** — string\n- readonly **value** — { year: string; month: string; day: string; }\n- readonly **valueAsDate** — Date | null\n- readonly **minimum** — { year: string; month: string; day: string; } | null\n- readonly **maximum** — { year: string; month: string; day: string; } | null",
       "attributes": [
         {
           "name": "date-picker-style",
@@ -167,7 +167,13 @@
           ]
         },
         {
-          "name": "required"
+          "name": "required",
+          "description": "Value Type: “required”",
+          "values": [
+            {
+              "name": "required"
+            }
+          ]
         },
         {
           "name": "prompt"
@@ -182,7 +188,13 @@
           "name": "selection"
         },
         {
-          "name": "disabled"
+          "name": "disabled",
+          "description": "Value Type: “disabled”",
+          "values": [
+            {
+              "name": "disabled"
+            }
+          ]
         },
         {
           "name": "minimum"
@@ -344,7 +356,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/label-view"
         }
       ],
-      "description": "### **Slots:**\n- _default_ — Place children without a `slot` attribute inside the main block of the label.\n- **icon** — Place children with a `slot=\"icon\"` attribute in the icon block of the label.\n\n### **Examples:**\n**Creating a label with an icon image and a title:**\n```html\n<label-view system-image=\"hand-tap\"><span>Hello</span></label-view>\n\n```",
+      "description": "### **Slots:**\n- _default_ — Any children without a `slot` attribute are placed in the title block of the label.\n- **icon** — Use the `slot=\"icon\"` attribute to place childen in the icon block of the label.\n\n### **Examples:**\n**Creating a label using a `span` element:**\n```html\n<label-view><span>Hello world!</span></label-view>\n\n```\n**Creating a label using the `title` attribute:**\n```html\n<label-view title=\"Hello world!\"></label-view>\n\n```\n**Creating a label with an icon and a title using the `system-image` attribute:**\n```html\n<label-view system-image=\"hand-waving\"><span>Hello world!</span></label-view>\n\n```\n**Creating a label with an icon and a title using the `icon` slot:**\n```html\n<label-view>\n  <i slot=\"icon\" class=\"ph ph-duotone ph-hand-waving\"></i>\n  <span>Hello world!</span>\n</label-view>\n\n```",
       "attributes": [
         {
           "name": "font",
@@ -361,7 +373,13 @@
           "name": "line-limit"
         },
         {
-          "name": "truncation-mode"
+          "name": "truncation-mode",
+          "description": "Value Type: “tail”",
+          "values": [
+            {
+              "name": "tail"
+            }
+          ]
         }
       ]
     },
@@ -381,7 +399,16 @@
           "name": "footer"
         },
         {
-          "name": "labeled-content-style"
+          "name": "labeled-content-style",
+          "description": "Value Type: “vertical” | “horizontal”",
+          "values": [
+            {
+              "name": "vertical"
+            },
+            {
+              "name": "horizontal"
+            }
+          ]
         },
         {
           "name": "format"
@@ -481,7 +508,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/picker-view"
         }
       ],
-      "description": "### **Slots:**\n- _default_ — The default slot.\n- **label**\n- **list**\n- **validity-options**\n\n### **Properties:**\n- **selection** — string\n- readonly **template** — DocumentFragment\n- readonly **pickerStyle** — \"automatic\" | \"menu\" | \"inline\" | \"navigation-link\" | \"sheet\"\n- readonly **name** — string Form participation property",
+      "description": "### **Slots:**\n- _default_ — The default slot.\n- **label**\n- **list**\n- **validity-options**\n\n### **Properties:**\n- **selection** — string\n- readonly **template** — DocumentFragment\n- readonly **pickerStyle** — \"automatic\" | \"menu\" | \"inline\" | \"navigation-link\" | \"sheet\"\n- readonly **name** — string",
       "attributes": [
         {
           "name": "picker-style",
@@ -706,7 +733,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/text-field"
         }
       ],
-      "description": "### **Slots:**\n- **label**\n- **validity-options**\n\n### **Properties:**\n- readonly **keyboardType** — \"decimal-pad\" | \"number-pad\" | \"default\"\n- **text** — string\n- readonly **name** — string Form participation property\n- readonly **value** — string\n- readonly **valueAsNumber** — number | \"\"\n- readonly **negativeNumbersAllowed** — boolean",
+      "description": "### **Slots:**\n- **label**\n- **validity-options**\n\n### **Properties:**\n- readonly **keyboardType** — \"decimal-pad\" | \"number-pad\" | \"default\"\n- **text** — string\n- readonly **name** — string\n- readonly **value** — string\n- readonly **valueAsNumber** — number | \"\"\n- readonly **negativeNumbersAllowed** — boolean",
       "attributes": [
         {
           "name": "prompt"
@@ -736,16 +763,41 @@
           "name": "text-input-autocapitalization"
         },
         {
-          "name": "disable-autocorrection"
+          "name": "disable-autocorrection",
+          "description": ""
         },
         {
-          "name": "keyboard-type"
+          "name": "keyboard-type",
+          "description": "Value Type: “decimal-pad” | “number-pad” | “default”",
+          "values": [
+            {
+              "name": "decimal-pad"
+            },
+            {
+              "name": "number-pad"
+            },
+            {
+              "name": "default"
+            }
+          ]
         },
         {
-          "name": "required"
+          "name": "required",
+          "description": "Value Type: “required”",
+          "values": [
+            {
+              "name": "required"
+            }
+          ]
         },
         {
-          "name": "disabled"
+          "name": "disabled",
+          "description": "Value Type: “disabled”",
+          "values": [
+            {
+              "name": "disabled"
+            }
+          ]
         }
       ]
     },
@@ -757,7 +809,7 @@
           "url": "https://swiftwc.github.io/ui/web-components/toggle-view"
         }
       ],
-      "description": "### **Slots:**\n- **label**\n- **validity-options**\n\n### **Properties:**\n- readonly **toggleStyle** — \"button\" | \"switch\"\n- **isOn** — boolean\n- readonly **name** — string Form participation property\n- **value** — string | null",
+      "description": "### **Slots:**\n- **label**\n- **validity-options**\n\n### **Properties:**\n- readonly **toggleStyle** — \"button\" | \"switch\"\n- **isOn** — boolean\n- readonly **name** — string\n- **value** — string | null\n\n### **Events:**\n- **toggle:change** — User toggled the control",
       "attributes": [
         {
           "name": "label"