@swiftwc/ui 1.0.1-canary.3 → 1.0.1-canary.5

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

@@ -1,5 +1,7 @@
 /**
  * @summary A container view that wraps a scroll view, marking it as a screen your app can navigate to.
+ *
+ * @slot — The default slot
  */
 export declare class ContentView extends HTMLElement {
     constructor();

package/generated/components/content-view.js

@@ -1,6 +1,8 @@
 import { debug } from '../internal/utils';
 /**
  * @summary A container view that wraps a scroll view, marking it as a screen your app can navigate to.
+ *
+ * @slot — The default slot
  */
 export class ContentView extends HTMLElement {
     constructor() {

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

@@ -3,6 +3,8 @@ declare const datePickerStyles: readonly ["graphical", "field", "automatic"];
 export type DatePickerStyle = (typeof datePickerStyles)[number];
 /**
  * @summary A control that selects an absolute date.
+ *
+ * @slot — The default slot
  */
 export declare class DatePicker extends FormAssociatedBase {
     #private;

package/generated/components/date-picker.js

@@ -1,3 +1,4 @@
+var _a;
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
@@ -8,6 +9,8 @@ import { html } from '../tpl';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
 /**
  * @summary A control that selects an absolute date.
+ *
+ * @slot — The default slot
  */
 export class DatePicker extends FormAssociatedBase {
     static get observedAttributes() {
@@ -36,7 +39,7 @@ export class DatePicker extends FormAssociatedBase {
     static #templates = new Map();
     // #lastRenderedStyle?: DatePickerStyle //string | null
     #renderValidityMsgs = (entries) => {
-        debug(`${DatePicker.name} ⚡️ mutation`);
+        debug(`${_a.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #shadowRoot;
@@ -73,7 +76,7 @@ export class DatePicker extends FormAssociatedBase {
         //       break
         //   }
         // return DatePicker.#templates.get(this.datePickerStyle)!
-        return DatePicker.#templates.getOrInsertComputed(this.datePickerStyle, () => {
+        return _a.#templates.getOrInsertComputed(this.datePickerStyle, () => {
             switch (this.datePickerStyle) {
                 default:
                     return $(html `<label part="root date-picker-stack">
@@ -97,7 +100,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        debug(`${DatePicker.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'selection':
                 // nothing happens// const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/)
@@ -150,7 +153,7 @@ export class DatePicker extends FormAssociatedBase {
         return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '') ? this.getAttribute('date-picker-style') : 'automatic';
     }
     #render() {
-        debug(`${DatePicker.name} ⚡️ #render (${this.datePickerStyle})`);
+        debug(`${_a.name} ⚡️ #render (${this.datePickerStyle})`);
         // if (this.#lastRenderedStyle === this.datePickerStyle) return // skip if already applied
         // this.#lastRenderedStyle = this.datePickerStyle
         // clear shadow DOM
@@ -194,7 +197,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        debug(`${DatePicker.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -214,15 +217,15 @@ export class DatePicker extends FormAssociatedBase {
         for (const input of this.#inputs) {
             const nv = v[input.name] ?? '', pattern = /^(\d+)?$/;
             let finalValue = pattern.test(nv) ? nv : '', parsedValue = parseInt(finalValue);
-            if (DatePicker.#min(input) > parsedValue)
+            if (_a.#min(input) > parsedValue)
                 finalValue = '';
-            else if (DatePicker.#max(input) < parsedValue)
+            else if (_a.#max(input) < parsedValue)
                 finalValue = '';
             input.value = finalValue;
         }
     }
     #handleClick = (evt) => {
-        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target } = evt;
         if (!(target instanceof HTMLElement))
             return;
@@ -265,7 +268,7 @@ export class DatePicker extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection }, bubbles: true, composed: true }));
     };
     #handleInputPaste = (evt) => {
-        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -287,7 +290,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputBeforeinput = (evt) => {
-        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -310,7 +313,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     };
     #handleInputKeydown = ({ type, target, key }) => {
-        debug(`${DatePicker.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement))
             return;
         const input = target;
@@ -329,25 +332,25 @@ export class DatePicker extends FormAssociatedBase {
         this.#inputs[index]?.focus();
     };
     #handleInputFocus = (evt) => {
-        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         for (const input of this.#inputs)
             input.classList.toggle('focus', input === evt.target);
     };
     #handleInputBlur = ({ target, type }) => {
-        debug(`${DatePicker.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement))
             return;
         const input = target;
         if (0 === input.value.length)
             return;
-        const finalText = `${clamp(this.value[input.name] ?? '0', DatePicker.#min(input), DatePicker.#max(input))}`.padStart(parseInt(input.getAttribute('maxlength') ?? '0'), '0');
+        const finalText = `${clamp(this.value[input.name] ?? '0', _a.#min(input), _a.#max(input))}`.padStart(parseInt(input.getAttribute('maxlength') ?? '0'), '0');
         if (!set(input, 'value', finalText))
             return;
         // this.selection = this.selection
         this.#sendValueToForm();
     };
     #handleInputInput = (evt) => {
-        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
     /**
@@ -458,7 +461,7 @@ export class DatePicker extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        debug(`${DatePicker.name} ⚡️ validity-change`);
+        debug(`${_a.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#inputs.at(0));
     };
     setCustomValidity = (message) => {
@@ -487,3 +490,4 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm(false);
     }
 }
+_a = DatePicker;

package/generated/components/detail-placeholder.d.ts

@@ -1,3 +1,7 @@
+/**
+ *
+ * @slot — The default slot
+ */
 export declare class DetailPlaceholder extends HTMLElement {
     constructor();
     connectedCallback(): void;

package/generated/components/detail-placeholder.js

@@ -1,4 +1,8 @@
 import { debug } from '../internal/utils';
+/**
+ *
+ * @slot — The default slot
+ */
 export class DetailPlaceholder extends HTMLElement {
     constructor() {
         super();

package/generated/components/disclosure-group.d.ts

@@ -4,6 +4,8 @@ import { DetailsBase } from '../namespace-browser/base';
  *
  * @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> — Use the `is` attribute to convert a `details` element into a disclosure group
  *
+ * @slot — The default slot
+ *
  * @fires is-expanded
  * @fires is-collapsed
  */

package/generated/components/disclosure-group.js

@@ -7,6 +7,8 @@ const toggleTimers = new WeakMap();
  *
  * @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> — Use the `is` attribute to convert a `details` element into a disclosure group
  *
+ * @slot — The default slot
+ *
  * @fires is-expanded
  * @fires is-collapsed
  */

package/generated/components/fine-tooltip.js

@@ -1,3 +1,4 @@
+var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, debug, onoff } from '../internal/utils';
 import { html } from '../tpl';
@@ -19,7 +20,7 @@ export class FineTooltip extends HTMLElement {
                 this.#render(target.getAttribute(attributeName));
     };
     #handleMeasure = ([{ target, borderBoxSize }]) => {
-        debug(`${FineTooltip.name} ⚡️ measure`);
+        debug(`${_a.name} ⚡️ measure`);
         if (target.hasAttribute('closing'))
             return;
         if (!(target instanceof HTMLElement))
@@ -49,7 +50,7 @@ export class FineTooltip extends HTMLElement {
             label.removeAttribute('title');
     };
     connectedCallback() {
-        debug(`${FineTooltip.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.removeAttribute('closing');
         this.popover = 'manual';
         this.inert = true;
@@ -58,7 +59,7 @@ export class FineTooltip extends HTMLElement {
         this.showPopover();
     }
     disconnectedCallback() {
-        debug(`${FineTooltip.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#resizeObserver.unobserve(this);
         this.#mutationObserver?.disconnect();
         this.#mutationObserver2?.disconnect();
@@ -104,3 +105,4 @@ export class FineTooltip extends HTMLElement {
         });
     }
 }
+_a = FineTooltip;

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

@@ -2,6 +2,8 @@ import { FormBase } from '../namespace-browser/base';
 /**
  * @summary A container view that groups controls together for entering data, like a settings screen.
  *
+ * @slot — The default slot
+ *
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
  */
 export declare class FormView extends FormBase {

package/generated/components/form-view.js

@@ -4,6 +4,8 @@ import { FormBase } from '../namespace-browser/base';
 /**
  * @summary A container view that groups controls together for entering data, like a settings screen.
  *
+ * @slot — The default slot
+ *
  * @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-flex-stack.d.ts

@@ -3,6 +3,8 @@
  *
  * @attr {@Spacing} spacing — The gap between the primary axis
  *
+ * @slot — The default slot
+ *
  */
 export declare class HFlexStack extends HTMLElement {
     constructor();

package/generated/components/h-flex-stack.js

@@ -4,6 +4,8 @@ import { debug } from '../internal/utils';
  *
  * @attr {@Spacing} spacing — The gap between the primary axis
  *
+ * @slot — The default slot
+ *
  */
 export class HFlexStack extends HTMLElement {
     constructor() {

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

@@ -9,6 +9,8 @@
  * @attr {@inlineSet} distribution — The main-axis alignment
  * @attr {@inlinePlacementSet} placement — The main-axis alignment
  *
+ * @slot — The default slot
+ *
  */
 export declare class HStack extends HTMLElement {
     constructor();

package/generated/components/h-stack.js

@@ -10,6 +10,8 @@ import { debug } from '../internal/utils';
  * @attr {@inlineSet} distribution — The main-axis alignment
  * @attr {@inlinePlacementSet} placement — The main-axis alignment
  *
+ * @slot — The default slot
+ *
  */
 export class HStack extends HTMLElement {
     constructor() {

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

@@ -1,6 +1,9 @@
 /**
  * @summary A view that displays an image.
  *
+ *
+ * @slot — The default slot
+ *
  */
 export declare class ImageView extends HTMLElement {
     #private;

package/generated/components/image-view.js

@@ -4,6 +4,9 @@ import { html } from '../tpl';
 /**
  * @summary A view that displays an image.
  *
+ *
+ * @slot — The default slot
+ *
  */
 export class ImageView extends HTMLElement {
     static get observedAttributes() {

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

@@ -4,6 +4,8 @@
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside
  * @attr {sidebar} preferred-root-disclosure-style
  *
+ * @slot — The default slot
+ *
  * @cssprop {length} --list-row-gap — The gap between rows
  * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row
  */

package/generated/components/list-view.js

@@ -6,6 +6,8 @@ import { debug, listActive, onoff } from '../internal/utils';
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside
  * @attr {sidebar} preferred-root-disclosure-style
  *
+ * @slot — The default slot
+ *
  * @cssprop {length} --list-row-gap — The gap between rows
  * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row
  */

package/generated/components/menu-view.js

@@ -1,3 +1,4 @@
+var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, debug, onoff, touchGlass } from '../internal/utils';
 import { queryMorph } from '../morphdom';
@@ -33,14 +34,14 @@ export class MenuView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        debug(`${MenuView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'open':
                 if (!this.#dialog)
                     break;
                 this.#dialog.inert = null === newValue;
                 if (null === newValue && this.#dialog.open) {
-                    debug(`${MenuView.name} ⚡️ will-close`);
+                    debug(`${_a.name} ⚡️ will-close`);
                     this.setAttribute('closing', '');
                     Promise.allSettled(this.#dialog.getAnimations().map(({ finished }) => finished)).then(() => {
                         if (!this.hasAttribute('closing'))
@@ -50,7 +51,7 @@ export class MenuView extends HTMLElement {
                     });
                 }
                 if ('' === newValue && !this.#dialog.open) {
-                    debug(`${MenuView.name} ⚡️ will-open`);
+                    debug(`${_a.name} ⚡️ will-open`);
                     this.removeAttribute('closing');
                     const form = this.#shadowRoot.querySelector('form');
                     form.scrollTop = 0;
@@ -63,14 +64,14 @@ export class MenuView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        debug(`${MenuView.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         const summaryPart = this.#shadowRoot.querySelector('[part*=menu-summary]'), dialogPart = this.#shadowRoot.querySelector('[part*=menu-dialog]');
         summaryPart?.style.removeProperty('anchor-name'); //$.prop('anchor-name', null, summaryPart)
         dialogPart?.style.removeProperty('position-anchor'); //$.prop('position-anchor', null, dialogPart)
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        debug(`${MenuView.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.#dialog = this.#shadowRoot.querySelector('dialog') ?? undefined;
         const trigger = this.#shadowRoot.querySelector('button') ?? undefined;
         CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, trigger).on());
@@ -94,7 +95,7 @@ export class MenuView extends HTMLElement {
         dialogPart?.style.setProperty('position-anchor', newAnchorName); // $.prop('position-anchor', newAnchorName, dialogPart) //
     }
     #handleDialogClick = ({ type, target }) => {
-        debug(`${MenuView.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         if (target.matches('dialog'))
@@ -111,19 +112,20 @@ export class MenuView extends HTMLElement {
         // event.stopPropagation() //NOTE: add this only if not nested, disposes all nicely if ommited
     };
     #handleTriggerClick = (evt) => {
-        debug(`${MenuView.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', true);
     };
     // intercept to modify open attr
     #handleDialogCancel = (evt) => {
-        debug(`${MenuView.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         evt.preventDefault();
         this.toggleAttribute('open', false);
     };
     #handleDialogClose = (evt) => {
-        debug(`${MenuView.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', this.#shadowRoot.querySelector('dialog')?.open ?? false);
     };
 }
+_a = MenuView;

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

@@ -3,6 +3,7 @@
  * @attr {boolean} padding
  * @attr {boolean} navigation-bar-auto-hide
  *
+ * @slot — The default slot
  */
 export declare class NavigationLargeTitle extends HTMLElement {
     #private;

package/generated/components/navigation-large-title.js

@@ -1,3 +1,4 @@
+var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { add, debug, frame, onoff, slowHideShow, timeout } from '../internal/utils';
@@ -71,6 +72,7 @@ function isIntersectingWithContainer(el, container, rootMargin = '0px 0px 0px 0p
  * @attr {boolean} padding
  * @attr {boolean} navigation-bar-auto-hide
  *
+ * @slot — The default slot
  */
 export class NavigationLargeTitle extends HTMLElement {
     #styleObserver;
@@ -81,13 +83,13 @@ export class NavigationLargeTitle extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        debug(`${NavigationLargeTitle.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#clearScrollState();
         this.#styleObserver?.disconnect();
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        debug(`${NavigationLargeTitle.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -110,7 +112,7 @@ export class NavigationLargeTitle extends HTMLElement {
         });
     }
     #handleStyleChange = () => {
-        debug(`${NavigationLargeTitle.name} ⚡️ style`);
+        debug(`${_a.name} ⚡️ style`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -155,7 +157,7 @@ export class NavigationLargeTitle extends HTMLElement {
     //   this.#applySlowness(root, isIntersecting)
     // }
     #handleIntersect = (entries, { root }) => {
-        debug(`${NavigationLargeTitle.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
+        debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
         if (!(root instanceof HTMLElement))
             return;
         for (const { isIntersecting } of entries)
@@ -179,3 +181,4 @@ export class NavigationLargeTitle extends HTMLElement {
             slowHideShow(isIntersecting ? 'show' : 'hide', this);
     };
 }
+_a = NavigationLargeTitle;

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

@@ -1,6 +1,8 @@
 import { NavigationView } from '../internal/class/navigation-view';
 /**
  * @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.
+ *
+ * @slot — The default slot
  */
 export declare class NavigationSplitView extends NavigationView {
     constructor();

package/generated/components/navigation-split-view.js

@@ -2,6 +2,8 @@ import { NavigationView } from '../internal/class/navigation-view';
 import { debug } from '../internal/utils';
 /**
  * @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.
+ *
+ * @slot — The default slot
  */
 export class NavigationSplitView extends NavigationView {
     constructor() {

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

@@ -1,6 +1,8 @@
 import { NavigationView } from '../internal/class/navigation-view';
 /**
  * @summary A container view that shows a main screen and lets the user open other screens on top of it.
+ *
+ * @slot — The default slot
  */
 export declare class NavigationStack extends NavigationView {
     constructor();

package/generated/components/navigation-stack.js

@@ -2,6 +2,8 @@ import { NavigationView } from '../internal/class/navigation-view';
 import { debug } from '../internal/utils';
 /**
  * @summary A container view that shows a main screen and lets the user open other screens on top of it.
+ *
+ * @slot — The default slot
  */
 export class NavigationStack extends NavigationView {
     constructor() {