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

package/generated/components/tab-view.js

@@ -48,23 +48,6 @@ export class TabView extends HTMLElement {
         });
         this.#cssStyleObserver.observe(this, this.#handleStyleChange);
         Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange)); // Snapshot.waitReady.then(this.#handleStyleChange)
-        // NOTE: wait for config
-        // Snapshot.waitReady.then(() => { // FIXME: Check this removed!
-        // for (const [or, w, handler] of [
-        //   ['portrait', `max-width:${Snapshot.config!['ipad-portrait-bp-max']}`, this.#handleMediaChange],
-        //   ['landscape', `max-width:${Snapshot.config!['ipad-landscape-bp-max']}`, this.#handleMediaChange],
-        //   ['portrait', `min-width:${Snapshot.config!['ipad-portrait-bp-min']}`, this.#handleMediaChange],
-        //   ['landscape', `min-width:${Snapshot.config!['ipad-landscape-bp-min']}`, this.#handleMediaChange],
-        // ]) {
-        //   const mediaQueryList = self.matchMedia(`(orientation:${or}) and (${w})`)
-        //   if (mediaQueryList.matches)
-        //     this.#handleMediaChange(
-        //       new MediaQueryListEvent('media-change', {
-        //         matches: mediaQueryList.matches,
-        //       })
-        //     ) // Initial check
-        //   CleanupRegistry.register(this, onoff('change', handler as EventListener, mediaQueryList).on())
-        // }
         CleanupRegistry.register(this, onoff([
             { types: 'tabreveal tabswap', listener: this.#debouncedHandler },
             { types: 'beforetabreveal beforetabswap', listener: this.#addAnimations },
@@ -75,7 +58,6 @@ export class TabView extends HTMLElement {
                 listener: this.#handleSummaryClick,
             },
         ], this).on());
-        // })
     }
     #handleSummaryClick = ({ target }) => {
         if (!(target instanceof HTMLElement))
@@ -116,57 +98,6 @@ export class TabView extends HTMLElement {
             }));
         }
     };
-    // #handleMediaChange: (evt: MediaQueryListEvent) => void = (evt) => {
-    //   if (devFlags.debug) console.debug(`${TabView.name} ⚡️ ${evt?.type}`)
-    //   if (!evt.matches) return
-    //   this.#handleStyleChange()
-    //   // if (evt.matches) {
-    //   //   const placement = self.getComputedStyle(this).getPropertyValue('--adaptable-tab-bar-placement'), // or do it manually without any computedstyle
-    //   //     newValue = (TAB_BAR_PLACEMENTS as readonly string[]).includes(placement) ? (placement as (typeof TAB_BAR_PLACEMENTS)[number]) : 'bottom-bar'
-    //   //   if (newValue !== this.#cachedAdaptableTabBarPlacement) {
-    //   //     const oldValue = this.#cachedAdaptableTabBarPlacement
-    //   //     this.#cachedAdaptableTabBarPlacement = newValue
-    //   //     this.dispatchEvent(
-    //   //       new CustomEvent<TabViewAdaptableTabBarPlacementDetail>('tab-view:adaptable-tab-bar-placement-change', {
-    //   //         detail: { oldValue, newValue },
-    //   //         bubbles: true,
-    //   //         composed: true,
-    //   //       })
-    //   //     )
-    //   //   }
-    //   // }
-    //   // // trigger more-stack (dis)allowed event
-    //   // if (evt.matches !== this.#moreStackAllowed) {
-    //   //   this.#moreStackAllowed = evt.matches
-    //   //   const eventType = evt.matches ? 'tab-view:more-tab-allowed' : 'tab-view:more-tab-disallowed'
-    //   //   this.dispatchEvent(new CustomEvent<TabMoreStackAllowanceDetail>(eventType, { detail: { moreTab: this.moreTab }, bubbles: true, composed: true }))
-    //   // }
-    //   // if (evt.matches) return // no button triggers should happen, already on iphone portrait
-    //   // const innerSelection = this.moreTab?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id
-    //   // if (innerSelection) {
-    //   //   const btn = this.querySelector<HTMLButtonElement>(`[is="tab-item"][value="${CSS.escape(innerSelection)}"]`)
-    //   //   // NOTE: simulate btn click BU WITHOUT tabroot functionality!
-    //   //   if (btn) {
-    //   //     const newTab = this.querySelector<NavigationStack | NavigationSplitView>(`#${btn.getAttribute('value')}`)
-    //   //     if (newTab) {
-    //   //       this.selectedTab = TabView.gatherTab(newTab)
-    //   //       return
-    //   //     }
-    //   //   }
-    //   // }
-    //   // const outerSelection = this?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id
-    //   // if (outerSelection && outerSelection === this.moreTab?.id) {
-    //   //   const btn = this.querySelector<HTMLButtonElement>(`[is="tab-item"]:not([value="${CSS.escape(outerSelection)}"])`)
-    //   //   // NOTE: simulate btn click BU WITHOUT tabroot functionality!
-    //   //   if (btn) {
-    //   //     const newTab = this.querySelector<NavigationStack | NavigationSplitView>(`#${btn.getAttribute('value')}`)
-    //   //     if (newTab) {
-    //   //       this.selectedTab = TabView.gatherTab(newTab)
-    //   //       return
-    //   //     }
-    //   //   }
-    //   // }
-    // }
     #handleAdaptableTabBarPlacementChange = (evt) => {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${evt?.type}`);
@@ -198,7 +129,6 @@ export class TabView extends HTMLElement {
         }
     };
     get selectedTab() {
-        // return this.querySelector<NavigationStack | NavigationSplitView>(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')
         return [...this.querySelectorAll('navigation-stack:not([hidden]),navigation-split-view:not([hidden])')];
     }
     set selectedTab(tabs) {

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/table-view.js

@@ -116,8 +116,8 @@ export class TableView extends HTMLElement {
           <label-view font="callout" foreground="secondary"></label-view>
         </v-stack>
       </button>`, '>1'), title = btn.querySelector('label-view:first-child') ?? undefined, subTitle = btn.querySelector('label-view:last-child') ?? undefined;
-            queryMorph(':not([slot])', html `<span>${node.textContent.trim()}</span>`, title, { removeIf: !node.textContent.trim() }); //renderLabelTitle(title, node.textContent.trim()) //title?.setAttribute('title', node.textContent.trim())
-            queryMorph(':not([slot])', html `<span>${node.ariaSort ?? ''}</span>`, subTitle, { removeIf: !(node.ariaSort ?? '') }); //renderLabelTitle(subTitle, node.ariaSort ?? '') //subTitle?.setAttribute('title', node.ariaSort ?? '')
+            queryMorph(':not([slot])', html `<span>${node.textContent.trim()}</span>`, title, { removeIf: !node.textContent.trim() });
+            queryMorph(':not([slot])', html `<span>${node.ariaSort ?? ''}</span>`, subTitle, { removeIf: !(node.ariaSort ?? '') });
             this.#compactToolbarItem.appendChild(btn);
         }
     };

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

@@ -2,7 +2,7 @@ import { FormAssociatedBase } from '../internal/class/form-associated-base';
 declare const keyboardTypes: readonly ["decimal-pad", "number-pad", "default"];
 export type KeyboardType = (typeof keyboardTypes)[number];
 /**
- * @summary A control that displays an editable text interface.
+ * @summary A control that displays an editable text area.
  *
  * @slot label
  * @slot validity-options
@@ -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

@@ -7,14 +7,40 @@ import { $, compareBigDecimals, devFlags, kebabCase, onoff, set } from '../inter
 import { html, queryMorph } from '../morphdom';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
 /**
- * @summary A control that displays an editable text interface.
+ * @summary A control that displays an editable text area.
  *
  * @slot label
  * @slot validity-options
  */
 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() {
@@ -140,7 +166,7 @@ export class TextField extends FormAssociatedBase {
                 this.#sendValueToForm();
                 break;
             case 'label':
-                queryMorph('[slot=label]', html `<label-view slot="label" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue)
+                queryMorph('[slot=label]', html `<label-view slot="label" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
                 // this.#sendValueToForm()
                 break;
             case 'disabled':
@@ -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

@@ -2,6 +2,10 @@ import { FormAssociatedBase } from '../internal/class/form-associated-base';
 declare const toggleStyles: readonly ["switch", "button"];
 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
  */
@@ -18,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

@@ -6,12 +6,14 @@ import { $, devFlags, kebabCase, onoff } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 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'];
     }
@@ -85,7 +87,7 @@ export class ToggleView extends FormAssociatedBase {
                 this.#sendValueToForm(this.#connected);
                 break;
             case 'label':
-                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue)
+                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
                 break;
             case 'disabled':
                 for (const el of this.#shadowRoot.querySelectorAll('input'))
@@ -162,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 ?? '';
@@ -213,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

@@ -1,5 +1,5 @@
 /**
- * @summary A view that arranges its subviews in a vertical line.
+ * @summary A view that arranges its children one on top of the other.
  *
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
  *
@@ -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

@@ -1,6 +1,6 @@
 import { devFlags } from '../internal/utils';
 /**
- * @summary A view that arranges its subviews in a vertical line.
+ * @summary A view that arranges its children one on top of the other.
  *
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
  *

package/generated/css/index.css

@@ -1070,6 +1070,7 @@
   :where(navigation-stack:not([hidden]),
   navigation-split-view:not([hidden]),
   navigation-large-title:not([hidden]),
+  navigation-title:not([hidden]),
   scroll-view:not([hidden]),
   body-view:not([hidden]),
   tab-view:not([hidden]),
@@ -1093,7 +1094,7 @@
   [is=glass-prominent-button]:not([hidden]),
   list-view:not([hidden]),
   table-view:not([hidden]),
-  content-unavailable-view:not([hidden]),
+  content-unavailable:not([hidden]),
   progress-view:not([hidden]),
   tool-bar-item:not([hidden]),
   tool-bar-item-group:not([hidden]),
@@ -1119,9 +1120,9 @@
   :where(labeled-content)::part(labeled-content-label-stack),
   :where(labeled-content)::part(labeled-content-value-stack),
   :where(progress-view)::part(progress-control),
-  :where(content-unavailable-view)::part(content-unavailable-title-stack),
-  :where(content-unavailable-view)::part(content-unavailable-description-stack),
-  :where(content-unavailable-view)::part(content-unavailable-actions-stack),
+  :where(content-unavailable)::part(content-unavailable-title-stack),
+  :where(content-unavailable)::part(content-unavailable-description-stack),
+  :where(content-unavailable)::part(content-unavailable-actions-stack),
   :where(table-view)::part(table-container),
   :where(table-view)::part(table-column-stack),
   :where(table-view)::part(table-header-stack),
@@ -1745,7 +1746,7 @@
   }
 }
 @layer sw-components {
-  :where(content-unavailable-view) {
+  :where(content-unavailable) {
     place-content: center;
     place-items: center;
     text-align: center;
@@ -1753,24 +1754,24 @@
     padding-inline: 1rem;
     padding-block: 1rem;
   }
-  :where(content-unavailable-view)::part(content-unavailable-actions-stack), :where(content-unavailable-view)::part(content-unavailable-title-stack), :where(content-unavailable-view)::part(content-unavailable-description-stack) {
+  :where(content-unavailable)::part(content-unavailable-actions-stack), :where(content-unavailable)::part(content-unavailable-title-stack), :where(content-unavailable)::part(content-unavailable-description-stack) {
     max-inline-size: 20rem;
   }
-  :where(content-unavailable-view)::part(content-unavailable-actions-stack) {
+  :where(content-unavailable)::part(content-unavailable-actions-stack) {
     row-gap: 0.2rem;
   }
-  :where(content-unavailable-view)::part(content-unavailable-title-stack) {
+  :where(content-unavailable)::part(content-unavailable-title-stack) {
     --label-flow: vertical;
     --label-font: title3;
   }
-  :where(content-unavailable-view > :not([slot])) {
+  :where(content-unavailable > :not([slot])) {
     --label-image-size: 5;
     --label-gap: 1;
   }
-  :where(content-unavailable-view:not(:has(> [slot=description])))::part(content-unavailable-description-stack) {
+  :where(content-unavailable:not(:has(> [slot=description])))::part(content-unavailable-description-stack) {
     display: none;
   }
-  :where(content-unavailable-view:not(:has(> [slot=actions])))::part(content-unavailable-actions-stack) {
+  :where(content-unavailable:not(:has(> [slot=actions])))::part(content-unavailable-actions-stack) {
     display: none;
   }
 }
@@ -3395,7 +3396,7 @@
     --toggle--trigger-bg: lightgray;
   }
   :where(toggle-view)::part(toggle-stack) {
-    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr) auto;
     grid-template-rows: minmax(0, 1fr);
     column-gap: var(--labeled-content-column-gap);
   }
@@ -3490,6 +3491,16 @@
   labeled-content > [slot=header],
   labeled-content > [slot=footer]) {
     color: var(--secondary);
+    --label-font: callout;
+  }
+  @supports not (x: if(else:red)) {
+    :where(labeled-content > :nth-child(n+2 of [slot=label]),
+    labeled-content > [slot=header],
+    labeled-content > [slot=footer]) {
+      --label--titlestack-font-size: var(--label-callout-font-size);
+      --label--titlestack-line-height: var(--label-callout-line-height);
+      --label--titlestack-font-weight: var(--label-callout-font-weight);
+    }
   }
 }
 @layer sw-components {}
@@ -3512,11 +3523,7 @@
     padding-block: 1rem;
   }
 }
-@layer sw-components {
-  :where(navigation-title) {
-    display: grid;
-  }
-}
+@layer sw-components {}
 @layer sw-components {
   :where(tab-view:not([tab-view-style=tab-bar-only]) > sidebar-toggle, navigation-split-view > sidebar-toggle) {
     position: fixed;

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/scroll-view.js

@@ -1,5 +1 @@
 export {};
-// export interface ScrollViewEventMap {
-//   pagereveal: CustomEvent<PageRevealSwapDetail>
-//   pageswap: CustomEvent<PageRevealSwapDetail>
-// }