@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.110

package/generated/components/glass-button.d.ts

@@ -1,6 +1,16 @@
 import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @summary A control that starts an action. Styled with a glass border, adapting to the button’s surroundings.
+ *
+ * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a glass button
+ *
+ * @slot overlay
+ *
+ */
 export declare class GlassButton extends ButtonBase {
+    static get observedAttributes(): string[];
     constructor();
     static polyfillDisconnectedCallback(el: ButtonBase): void;
     static polyfillConnectedCallback(el: ButtonBase): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }

package/generated/components/glass-button.js

@@ -1,17 +1,50 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, touchGlass } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @summary A control that starts an action. Styled with a glass border, adapting to the button’s surroundings.
+ *
+ * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a glass button
+ *
+ * @slot overlay
+ *
+ */
 export class GlassButton extends ButtonBase {
+    static get observedAttributes() {
+        return [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
+    }
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${GlassButton.name} ⚡️ disconnect`);
+        debug(`${GlassButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        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 }]) {
+        debug(`${GlassButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'title-key':
+            case 'role':
+                Snapshot.waitReady.then(() => {
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'), Snapshot.config);
+                });
+                break;
+        }
+    }
 }

package/generated/components/glass-prominent-button.d.ts

@@ -1,6 +1,16 @@
 import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @summary A control that starts an action. Styled with a prominent glass border, adapting to the button’s surroundings.
+ *
+ * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent glass button
+ *
+ * @slot overlay
+ *
+ */
 export declare class GlassProminentButton extends ButtonBase {
+    static get observedAttributes(): string[];
     constructor();
     static polyfillDisconnectedCallback(el: ButtonBase): void;
     static polyfillConnectedCallback(el: ButtonBase): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }

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

@@ -1,17 +1,50 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, touchGlass } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @summary A control that starts an action. Styled with a prominent glass border, adapting to the button’s surroundings.
+ *
+ * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent glass button
+ *
+ * @slot overlay
+ *
+ */
 export class GlassProminentButton extends ButtonBase {
+    static get observedAttributes() {
+        return [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
+    }
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${GlassProminentButton.name} ⚡️ disconnect`);
+        debug(`${GlassProminentButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        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 }]) {
+        debug(`${GlassProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'title-key':
+            case 'role':
+                Snapshot.waitReady.then(() => {
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'), Snapshot.config);
+                });
+                break;
+        }
+    }
 }

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

@@ -0,0 +1,22 @@
+/**
+ * @summary A view that arranges its children side by side.
+ *
+ * @attr {@Template} template — The main-axis grid template
+ *
+ * @attr {@Spacing} spacing — The gap between the primary axis
+ *
+ * @attr {@blockSet} alignment — The cross-axis alignment
+ * @attr {@inlineSet} distribution — The main-axis alignment
+ * @attr {@inlinePlacementSet} placement — The main-axis alignment
+ *
+ */
+export declare class HStack extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-stack': HStack;
+    }
+}

package/generated/components/h-stack.js

@@ -0,0 +1,24 @@
+import { debug } from '../internal/utils';
+/**
+ * @summary A view that arranges its children side by side.
+ *
+ * @attr {@Template} template — The main-axis grid template
+ *
+ * @attr {@Spacing} spacing — The gap between the primary axis
+ *
+ * @attr {@blockSet} alignment — The cross-axis alignment
+ * @attr {@inlineSet} distribution — The main-axis alignment
+ * @attr {@inlinePlacementSet} placement — The main-axis alignment
+ *
+ */
+export class HStack extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        debug(`${HStack.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        debug(`${HStack.name} ⚡️ disconnect`);
+    }
+}

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

@@ -0,0 +1,18 @@
+/**
+ * @summary A view that displays an image.
+ *
+ */
+export declare class ImageView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'image-view': ImageView;
+    }
+}

package/generated/components/image-view.js

@@ -0,0 +1,65 @@
+import { $, debug } from '../internal/utils';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
+/**
+ * @summary A view that displays an image.
+ *
+ */
+export class ImageView extends HTMLElement {
+    static get observedAttributes() {
+        return ['system-name', 'system-weight'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(html `<slot></slot>`));
+    }
+    #shadowRoot;
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${ImageView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (oldValue === newValue)
+            return;
+        switch (name) {
+            case 'system-weight': {
+                this.#render(this.getAttribute('system-name'), newValue);
+                break;
+            }
+            case 'system-name': {
+                this.#render(newValue, this.getAttribute('system-weight'));
+                // // this.innerHTML = `<i style="line-height: 1.05" class="ph ph-${newValue}"></i>`
+                // //this.setAttribute('class', `ph ph-${newValue}`)
+                // let image = this.querySelector(':scope>:not([slot])')
+                // if (newValue) {
+                //   const el = image ?? $(`<i style="line-height: 1"></i>`, '>1')
+                //   el.setAttribute('class', `ph ph-${newValue}`)
+                //   image ??= this.appendChild(el)
+                //   // image ??= this.appendChild($(`<i style="line-height: 1.05"></i>`, '>1'))
+                //   // image.setAttribute('class', `ph ph-${newValue}`)
+                // } else image?.remove()
+                break;
+            }
+        }
+    }
+    #render(icon, weight) {
+        // if (!icon) {
+        //   this.querySelector(':scope>:not([slot])')?.remove()
+        //   return
+        // }
+        const tokens = [`ph${weight ? `-${weight}` : ''}`, `ph-${icon}`];
+        // const container = this.querySelector<HTMLElement>(':scope>:not([slot])') ?? this.appendChild<HTMLElement>($(`<i style="line-height: 1"></i>`, '>1'))
+        queryMorph(':not([slot])', html `<i style="line-height: 1" class="${tokens.join(' ')}"></i>`, this, { removeIf: !icon });
+        // if ('1' !== container.style.getPropertyValue('line-height')) container.style.setProperty('line-height', '1')
+        // for (const token of container.classList) if (token.startsWith('ph') && !tokens.includes(token)) container.classList.remove(token)
+        // container.classList.add(...tokens)
+    }
+    disconnectedCallback() {
+        debug(`${ImageView.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        debug(`${ImageView.name} ⚡️ connect`);
+    }
+}

package/generated/components/index.d.ts

@@ -1,17 +1,23 @@
-/**
- * @file Automatically generated by barrelsby.
- */
+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 './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-stack';
+export * from './image-view';
 export * from './label-view';
+export * from './labeled-content';
 export * from './list-view';
 export * from './menu-view';
 export * from './navigation-large-title';
@@ -20,8 +26,11 @@ export * from './navigation-stack';
 export * from './navigation-title';
 export * from './picker-view';
 export * from './plain-button';
+export * from './progress-view';
 export * from './screen-view';
+export * from './scroll-view-proxy';
 export * from './scroll-view';
+export * from './search-view';
 export * from './section-view';
 export * from './sheet-view';
 export * from './sidebar-toggle';
@@ -32,8 +41,11 @@ 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-keyboard';
 export * from './v-stack';

package/generated/components/index.js

@@ -1,17 +1,23 @@
-/**
- * @file Automatically generated by barrelsby.
- */
+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 './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-stack';
+export * from './image-view';
 export * from './label-view';
+export * from './labeled-content';
 export * from './list-view';
 export * from './menu-view';
 export * from './navigation-large-title';
@@ -20,8 +26,11 @@ export * from './navigation-stack';
 export * from './navigation-title';
 export * from './picker-view';
 export * from './plain-button';
+export * from './progress-view';
 export * from './screen-view';
+export * from './scroll-view-proxy';
 export * from './scroll-view';
+export * from './search-view';
 export * from './section-view';
 export * from './sheet-view';
 export * from './sidebar-toggle';
@@ -32,8 +41,11 @@ 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-keyboard';
 export * from './v-stack';

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

@@ -1,9 +1,27 @@
+/**
+ * @summary A view that labels items with an icon 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 {@Font} font — Sets the default font for text in this view.
+ *
+ * @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 {length} --label-gap — The gap between the icon and the title.
+ * @cssprop {number} --label-image-size — The size of the icon.
+ * @cssprop {length}--label-padding-inline — The padding inline of the label.
+ *
+ */
 export declare class LabelView extends HTMLElement {
     #private;
     static get observedAttributes(): string[];
     static get template(): DocumentFragment;
     constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

package/generated/components/label-view.js

@@ -1,83 +1,84 @@
-import { $ } from '../internal/utils';
+import { $, debug } from '../internal/utils';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
+/**
+ * @summary A view that labels items with an icon 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 {@Font} font — Sets the default font for text in this view.
+ *
+ * @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 {length} --label-gap — The gap between the icon and the title.
+ * @cssprop {number} --label-image-size — The size of the icon.
+ * @cssprop {length}--label-padding-inline — The padding inline 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() {
-        return (this.#template ??= $(String.raw `
-  <div part="root label-image-stack">
-    <slot name="image"></slot>
-  </div>
-  <div part="root label-title-stack">
-    <slot></slot>
-  </div>`, ''));
+        return (this.#template ??= $(html `
+      <slot name="icon"></slot>
+      <slot></slot>
+    `));
+        //     String.raw`
+        // <div part="root label-image-stack">
+        //   <slot name="image"></slot>
+        // </div>
+        // <div part="root label-title-stack">
+        //   <slot></slot>
+        // </div>`
     }
     #shadowRoot;
-    // #imgSlot?: HTMLSlotElement
-    // #slot?: HTMLSlotElement
+    // #reflectScheduled = false
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-        // Snapshot.waitReady.then(() => {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        // // this.#imgSlot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot[name=image]') ?? undefined
-        // // this.#slot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot:not([name])') ?? undefined
-        //
-        // // this.#slot?.addEventListener('slotchange', this.#handleSlotchange)
-        // // // this.#imgSlot?.addEventListener('slotchange', this.#handleSlotchange)
-        // // // this.#handleSlotchange(new CustomEvent('slotchange'))
-        // })
-    }
-    disconnectedCallback() {
-        console.debug(`${LabelView.name} ⚡️ disconnect`);
-        // this.#slot?.removeEventListener('slotchange', this.#handleSlotchange)
-    }
-    connectedCallback() {
-        console.debug(`${LabelView.name} ⚡️ connect`);
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        // Snapshot.waitReady.then(() => {
+        debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (oldValue === newValue)
+            return;
+        // this.#scheduleReflect()
         switch (name) {
+            // case 'system-image':
+            // case 'title':
+            //   render(
+            //     html`${this.getAttribute('title') ? html`<span>${this.getAttribute('title')}</span>` : null}${this.getAttribute('system-image')
+            //       ? html`<image-view slot="icon" system-name="${this.getAttribute('system-image')}"></image-view>`
+            //       : null}`,
+            //     this
+            //   )
+            //   break
             case 'system-image':
-                let image = this.querySelector(':scope>[slot=image]');
-                if (newValue) {
-                    image ??= this.appendChild($(`<i slot="image"></i>`));
-                    image.setAttribute('class', `ph ph-${newValue}`);
-                }
-                else
-                    image?.remove();
-                // // const imgSlot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot[name=image]')
-                // // if (!imgSlot) break
-                // const assigned = this.#imgSlot!.assignedElements({ flatten: true }) as HTMLElement[]
-                // let el = assigned[0] as HTMLElement | undefined
-                // if (!el) {
-                //   el = document.createElement('i')
-                //   el.slot = 'image'
-                //   this.append(el)
-                // }
-                // el.setAttribute('class', `ph ph-${newValue}`)
+                queryMorph('[slot=icon]', html `<image-view slot="icon" system-name="${newValue}"></image-view>`, this, { removeIf: !newValue });
                 break;
             case 'title':
-                let title = this.querySelector(':scope>:not([slot])');
-                if (newValue) {
-                    title ??= this.appendChild($(`<span></span>`));
-                    title.textContent = newValue;
-                }
-                else
-                    title?.remove();
-                // // const titleSlot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot:not([name])')
-                // // if (!titleSlot) break
-                // const title = this.#slot!.assignedElements({ flatten: true }) as HTMLElement[]
-                // let el2 = title[0] as HTMLElement | undefined
-                // if (!el2) {
-                //   el2 = document.createElement('span')
-                //   this.append(el2)
-                // }
-                // el2.textContent = newValue //el2.replaceChildren(escapeHTMLPolicy.createHTML(newValue))
+                queryMorph(':not([slot])', html `<span>${newValue}</span>`, this, { removeIf: !newValue });
                 break;
         }
-        // })
+    }
+    disconnectedCallback() {
+        debug(`${LabelView.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        debug(`${LabelView.name} ⚡️ connect`);
     }
 }

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

@@ -0,0 +1,33 @@
+/**
+ * @summary A container view that pairs a label with a value.
+ *
+ * @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
+ *
+ * @csspart labeled-content-container
+ * @csspart labeled-content-stack
+ * @csspart labeled-content-label-stack
+ * @csspart labeled-content-value-stack
+ */
+export declare class LabeledContent extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'labeled-content': LabeledContent;
+    }
+}