@swiftwc/ui 0.0.0-dev.99 → 1.0.0-canary.1

package/generated/components/fine-tooltip.js

@@ -1,6 +1,6 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, devFlags, onoff } from '../internal/utils';
+import { $, debug, onoff } from '../internal/utils';
 import { html } from '../tpl';
 /**
  * @summary A tooltip that shows an unobtrusive helpful message on pointer:fine screens. Use it by adding a `help` attribute to any element.
@@ -20,8 +20,7 @@ export class FineTooltip extends HTMLElement {
                 this.#render(target.getAttribute(attributeName));
     };
     #handleMeasure = ([{ target, borderBoxSize }]) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ measure`);
+        debug(`${_a.name} ⚡️ measure`);
         if (target.hasAttribute('closing'))
             return;
         if (!(target instanceof HTMLElement))
@@ -51,8 +50,7 @@ export class FineTooltip extends HTMLElement {
             label.removeAttribute('title');
     };
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.removeAttribute('closing');
         this.popover = 'manual';
         this.inert = true;
@@ -61,8 +59,7 @@ export class FineTooltip extends HTMLElement {
         this.showPopover();
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#resizeObserver.unobserve(this);
         this.#mutationObserver?.disconnect();
         this.#mutationObserver2?.disconnect();

package/generated/components/form-view.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, listActive, onoff } from '../internal/utils';
+import { debug, 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.
@@ -11,14 +11,12 @@ export class FormView extends FormBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${FormView.name} ⚡️ disconnect`);
+        debug(`${FormView.name} ⚡️ disconnect`);
         // finally
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${FormView.name} ⚡️ connect`);
+        debug(`${FormView.name} ⚡️ connect`);
         if (el.closest('[is=sidebar-view],[is=tab-bar]')) {
             el.method = 'dialog';
             el.noValidate = true;

package/generated/components/glass-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -25,19 +25,16 @@ export class GlassButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${GlassButton.name} ⚡️ disconnect`);
+        debug(`${GlassButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${GlassButton.name} ⚡️ connect`);
+        debug(`${GlassButton.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
         el.tabIndex = 0;
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        if (devFlags.debug)
-            console.debug(`${GlassButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        debug(`${GlassButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         const node = target instanceof HTMLButtonElement;
         if (!node)
             return;

package/generated/components/glass-prominent-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -25,19 +25,16 @@ export class GlassProminentButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${GlassProminentButton.name} ⚡️ disconnect`);
+        debug(`${GlassProminentButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${GlassProminentButton.name} ⚡️ connect`);
+        debug(`${GlassProminentButton.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
         el.tabIndex = 0;
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        if (devFlags.debug)
-            console.debug(`${GlassProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        debug(`${GlassProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         const node = target instanceof HTMLButtonElement;
         if (!node)
             return;

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

@@ -0,0 +1,11 @@
+export declare class HDivider extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-divider': HDivider;
+    }
+}

package/generated/components/h-divider.js

@@ -0,0 +1,15 @@
+import { debug } from '../internal/utils';
+export class HDivider extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        debug(`${HDivider.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        debug(`${HDivider.name} ⚡️ disconnect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${HDivider.name} ⚡️ attr-change [${name}]`);
+    }
+}

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

@@ -0,0 +1,16 @@
+/**
+ * @summary A view that arranges its children side by side.
+ *
+ * @attr {@Spacing} spacing — The gap between the primary axis
+ *
+ */
+export declare class HFlexStack extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-flex-stack': HFlexStack;
+    }
+}

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

@@ -0,0 +1,18 @@
+import { debug } from '../internal/utils';
+/**
+ * @summary A view that arranges its children side by side.
+ *
+ * @attr {@Spacing} spacing — The gap between the primary axis
+ *
+ */
+export class HFlexStack extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        debug(`${HFlexStack.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        debug(`${HFlexStack.name} ⚡️ disconnect`);
+    }
+}

package/generated/components/h-stack.js

@@ -1,4 +1,4 @@
-import { devFlags } from '../internal/utils';
+import { debug } from '../internal/utils';
 /**
  * @summary A view that arranges its children side by side.
  *
@@ -16,11 +16,9 @@ export class HStack extends HTMLElement {
         super();
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${HStack.name} ⚡️ connect`);
+        debug(`${HStack.name} ⚡️ connect`);
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${HStack.name} ⚡️ disconnect`);
+        debug(`${HStack.name} ⚡️ disconnect`);
     }
 }

package/generated/components/image-view.js

@@ -1,4 +1,4 @@
-import { $, devFlags } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
@@ -20,8 +20,7 @@ export class ImageView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${ImageView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${ImageView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         if (oldValue === newValue)
             return;
         switch (name) {
@@ -58,11 +57,9 @@ export class ImageView extends HTMLElement {
         // container.classList.add(...tokens)
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ImageView.name} ⚡️ disconnect`);
+        debug(`${ImageView.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ImageView.name} ⚡️ connect`);
+        debug(`${ImageView.name} ⚡️ connect`);
     }
 }

package/generated/components/index.d.ts

@@ -1,17 +1,20 @@
 export * from './alert-dialog';
-export * from './body-view';
 export * from './bordered-button';
 export * from './bordered-prominent-button';
 export * from './borderless-button';
 export * from './color-scheme';
 export * from './confirmation-dialog';
 export * from './content-unavailable';
+export * from './content-view';
 export * from './date-picker';
+export * from './detail-placeholder';
 export * from './disclosure-group';
 export * from './fine-tooltip';
 export * from './form-view';
 export * from './glass-button';
 export * from './glass-prominent-button';
+export * from './h-divider';
+export * from './h-flex-stack';
 export * from './h-stack';
 export * from './image-view';
 export * from './label-view';
@@ -39,9 +42,12 @@ export * from './tab-item';
 export * from './tab-view';
 export * from './table-view';
 export * from './text-field';
+export * from './text-view';
 export * from './toggle-view';
 export * from './tool-bar-item-group';
 export * from './tool-bar-item';
 export * from './tool-bar';
+export * from './v-divider';
+export * from './v-flex-stack';
 export * from './v-keyboard';
 export * from './v-stack';

package/generated/components/index.js

@@ -1,17 +1,20 @@
 export * from './alert-dialog';
-export * from './body-view';
 export * from './bordered-button';
 export * from './bordered-prominent-button';
 export * from './borderless-button';
 export * from './color-scheme';
 export * from './confirmation-dialog';
 export * from './content-unavailable';
+export * from './content-view';
 export * from './date-picker';
+export * from './detail-placeholder';
 export * from './disclosure-group';
 export * from './fine-tooltip';
 export * from './form-view';
 export * from './glass-button';
 export * from './glass-prominent-button';
+export * from './h-divider';
+export * from './h-flex-stack';
 export * from './h-stack';
 export * from './image-view';
 export * from './label-view';
@@ -39,9 +42,12 @@ export * from './tab-item';
 export * from './tab-view';
 export * from './table-view';
 export * from './text-field';
+export * from './text-view';
 export * from './toggle-view';
 export * from './tool-bar-item-group';
 export * from './tool-bar-item';
 export * from './tool-bar';
+export * from './v-divider';
+export * from './v-flex-stack';
 export * from './v-keyboard';
 export * from './v-stack';

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

@@ -11,9 +11,9 @@
  * @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.
  *
- * @cssprop --label-gap — The gap between the icon and the title.
+ * @cssprop {length} --label-gap — The gap between the icon and the title.
  * @cssprop {number} --label-image-size — The size of the icon.
- * @cssprop --label-padding-inline — The padding inline of the label.
+ * @cssprop {length}--label-padding-inline — The padding inline of the label.
  *
  */
 export declare class LabelView extends HTMLElement {

package/generated/components/label-view.js

@@ -1,4 +1,4 @@
-import { $, devFlags } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
@@ -14,9 +14,9 @@ import { html } from '../tpl';
  * @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.
  *
- * @cssprop --label-gap — The gap between the icon and the title.
+ * @cssprop {length} --label-gap — The gap between the icon and the title.
  * @cssprop {number} --label-image-size — The size of the icon.
- * @cssprop --label-padding-inline — The padding inline of the label.
+ * @cssprop {length}--label-padding-inline — The padding inline of the label.
  *
  */
 export class LabelView extends HTMLElement {
@@ -53,8 +53,7 @@ export class LabelView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         if (oldValue === newValue)
             return;
         // this.#scheduleReflect()
@@ -77,11 +76,9 @@ export class LabelView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${LabelView.name} ⚡️ disconnect`);
+        debug(`${LabelView.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${LabelView.name} ⚡️ connect`);
+        debug(`${LabelView.name} ⚡️ connect`);
     }
 }

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

@@ -1,7 +1,13 @@
 /**
  * @summary A container view that pairs a label with a value.
  *
- * @slot — The default slot.
+ * @example <labeled-content label="Label" value="Content"></labeled-content> — Creates a standard labeled element, with a view that conveys the value of the element and a label
+ *
+ * @example <labeled-content label="Height" value="6" format="unit::unit=foot"></labeled-content> — Creates a labeled element from a formatted value
+ *
+ * @example <labeled-content value="Content"><label-view slot="label" title="Custom Value"></label-view><label-view slot="label" title="Custom Subtitle Value"></label-view></labeled-content> — Creates a labeled element that displays a custom label and a custom subtitle to the label
+ *
+ * @slot — The default slot
  * @slot label — Use the `slot="label"` attribute to place childen in the label block.
  * @slot header
  * @slot footer

package/generated/components/labeled-content.js

@@ -1,10 +1,16 @@
-import { $, devFlags } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
  * @summary A container view that pairs a label with a value.
  *
- * @slot — The default slot.
+ * @example <labeled-content label="Label" value="Content"></labeled-content> — Creates a standard labeled element, with a view that conveys the value of the element and a label
+ *
+ * @example <labeled-content label="Height" value="6" format="unit::unit=foot"></labeled-content> — Creates a labeled element from a formatted value
+ *
+ * @example <labeled-content value="Content"><label-view slot="label" title="Custom Value"></label-view><label-view slot="label" title="Custom Subtitle Value"></label-view></labeled-content> — Creates a labeled element that displays a custom label and a custom subtitle to the label
+ *
+ * @slot — The default slot
  * @slot label — Use the `slot="label"` attribute to place childen in the label block.
  * @slot header
  * @slot footer
@@ -22,9 +28,16 @@ export class LabeledContent extends HTMLElement {
             'header',
             'footer',
             /**
+             * Use this to force a specific style.
+             *
              * @type {vertical|horizontal}
              */
             'labeled-content-style',
+            /**
+             * Use this to format the text inside the value attribute. For example `format="currency::currency=USD" value="1234.5"` produces a value of `$1,234.50`.
+             *
+             * @type {"<format-type>:<locale?>:<format-options?>"}
+             */
             'format',
         ];
     }
@@ -52,46 +65,23 @@ export class LabeledContent extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${LabeledContent.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${LabeledContent.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         if (oldValue === newValue)
             return;
         switch (name) {
             case 'header':
-                // if (!newValue) {
-                //   this.querySelector(':scope>[slot=header]')?.remove()
-                //   break
-                // }
-                // const header = this.querySelector(':scope>[slot=header]') ?? this.appendChild(Object.assign(document.createElement('header'), { slot: 'header' }))
                 queryMorph('[slot=header]', html `<header slot="header">
             <label-view font="callout">
               <span>${newValue}</span>
             </label-view>
           </header>`, this, { removeIf: !newValue });
-                // render(
-                //   html`<label-view font="callout">
-                //     <span>${newValue}</span>
-                //   </label-view>`,
-                //   header
-                // )
                 break;
             case 'footer':
-                // if (!newValue) {
-                //   this.querySelector(':scope>[slot=footer]')?.remove()
-                //   break
-                // }
-                // const footer = this.querySelector(':scope>[slot=footer]') ?? this.appendChild(Object.assign(document.createElement('footer'), { slot: 'footer' }))
                 queryMorph('[slot=footer]', html `<footer slot="footer">
             <label-view font="callout">
               <span>${newValue}</span>
             </label-view>
           </footer>`, this, { removeIf: !newValue });
-                // render(
-                //   html`<label-view font="callout">
-                //     <span>${newValue}</span>
-                //   </label-view>`,
-                //   footer
-                // )
                 break;
             case 'value': {
                 const val = this.#fmt(newValue, this.getAttribute('format'));
@@ -109,12 +99,10 @@ export class LabeledContent extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${LabeledContent.name} ⚡️ disconnect`);
+        debug(`${LabeledContent.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${LabeledContent.name} ⚡️ connect`);
+        debug(`${LabeledContent.name} ⚡️ connect`);
     }
     // <type>:<locale>;<option>=<value>;<option>=<value>
     #fmt = (value, format) => {
@@ -125,7 +113,7 @@ export class LabeledContent extends HTMLElement {
                     locale: navigator.language,
                     options: {},
                 };
-            const [type, locale = navigator.language, opts = {}] = format.split(':', 3), loc = new Intl.Locale(locale), options = Object.fromEntries(new URLSearchParams(opts));
+            const [type, locale, opts = {}] = format.split(':', 3), loc = new Intl.Locale(locale || navigator.language), options = Object.fromEntries(new URLSearchParams(opts));
             return {
                 type,
                 locale: loc.toString(),
@@ -152,7 +140,19 @@ export class LabeledContent extends HTMLElement {
                 return new Intl.ListFormat(locale, options).format(value?.split('~') ?? []); // '' { style: 'long', type: 'conjunction' } "Foo, Bar, and Baz"
             case 'region':
                 return value ? new Intl.DisplayNames(locale, { type: 'region' }).of(value) : ''; // "Greece"
-            // "Foo, Bar, and Baz"
+            case 'byte-count': {
+                const bytes = Number(value);
+                if (!Number.isFinite(bytes))
+                    return value;
+                const units = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte', 'petabyte', 'exabyte'];
+                const index = Math.min(Math.floor(Math.log(Math.abs(bytes)) / Math.log(1024)), units.length - 1);
+                return new Intl.NumberFormat(locale, {
+                    style: 'unit',
+                    unit: units[Math.max(0, index)],
+                    unitDisplay: 'short',
+                    ...options,
+                }).format(bytes / 1024 ** Math.max(0, index));
+            }
             default:
                 return value;
         }

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

@@ -1,7 +1,11 @@
 /**
  * @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.
+ * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside
+ * @attr {sidebar} preferred-root-disclosure-style
+ *
+ * @cssprop {length} --list-row-gap — The gap between rows
+ * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row
  */
 export declare class ListView extends HTMLElement {
     constructor();

package/generated/components/list-view.js

@@ -1,22 +1,24 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, listActive, onoff } from '../internal/utils';
+import { debug, 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.
+ * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside
+ * @attr {sidebar} preferred-root-disclosure-style
+ *
+ * @cssprop {length} --list-row-gap — The gap between rows
+ * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row
  */
 export class ListView extends HTMLElement {
     constructor() {
         super();
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ListView.name} ⚡️ disconnect`);
+        debug(`${ListView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ListView.name} ⚡️ connect`);
+        debug(`${ListView.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(listActive(this), this).on());
     }
 }

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

@@ -1,7 +1,7 @@
 /**
  * @summary A control that opens a menu of actions.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot label
  */
 export declare class MenuView extends HTMLElement {