@swiftwc/ui 0.0.0-dev.97 → 0.0.0-dev.99

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

@@ -12,7 +12,7 @@
  * @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 --label-image-size — The size of the icon.
+ * @cssprop {number} --label-image-size — The size of the icon.
  * @cssprop --label-padding-inline — The padding inline of the label.
  *
  */

package/generated/components/label-view.js

@@ -15,7 +15,7 @@ import { html } from '../tpl';
  * @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 --label-image-size — The size of the icon.
+ * @cssprop {number} --label-image-size — The size of the icon.
  * @cssprop --label-padding-inline — The padding inline of the label.
  *
  */

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

@@ -23,7 +23,7 @@ export type Dictionary = DictEntry[];
  * @slot — The default slot.
  * @slot label
  * @slot list
- * @slot validity-options
+ * @slot {HTMLOptionElement[]} validity-options
  */
 export declare class PickerView extends FormAssociatedBase {
     #private;

package/generated/components/picker-view.js

@@ -129,7 +129,7 @@ const collectLeafValues = (node) => (node.children.length ? node.children.flatMa
  * @slot — The default slot.
  * @slot label
  * @slot list
- * @slot validity-options
+ * @slot {HTMLOptionElement[]} validity-options
  */
 export class PickerView extends FormAssociatedBase {
     static get ATTR() {

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

@@ -8,7 +8,6 @@ export declare class ProgressView extends HTMLElement {
     #private;
     static get observedAttributes(): string[];
     get progressViewStyle(): "circular" | "linear";
-    get template(): DocumentFragment;
     constructor();
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;

package/generated/components/progress-view.js

@@ -25,7 +25,7 @@ export class ProgressView extends HTMLElement {
     get progressViewStyle() {
         return this.#progressViewStyle ?? 'circular';
     }
-    get template() {
+    get #template() {
         if (!_a.#templates.has(this.progressViewStyle))
             switch (this.progressViewStyle) {
                 case 'linear':
@@ -109,7 +109,7 @@ export class ProgressView extends HTMLElement {
         if (this.#lastRenderedStyle === this.#progressViewStyle)
             return; // skip if already applied
         this.#lastRenderedStyle = this.#progressViewStyle;
-        this.#shadowRoot.replaceChildren(document.importNode(this.template, true)); // clear shadow DOM
+        this.#shadowRoot.replaceChildren(document.importNode(this.#template, true)); // clear shadow DOM
         CleanupRegistry.unregister(this, 'slots');
         for (const slot of this.#shadowRoot.querySelectorAll('slot'))
             this.#slots?.set(slot.name, slot);

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

@@ -7,7 +7,7 @@ export type KeyboardType = (typeof keyboardTypes)[number];
  * @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
  *
  * @slot label
- * @slot validity-options
+ * @slot {HTMLOptionElement[]} validity-options
  */
 export declare class TextField extends FormAssociatedBase {
     #private;

package/generated/components/text-field.js

@@ -13,7 +13,7 @@ const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
  * @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
  *
  * @slot label
- * @slot validity-options
+ * @slot {HTMLOptionElement[]} validity-options
  */
 export class TextField extends FormAssociatedBase {
     static get observedAttributes() {

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

@@ -7,7 +7,7 @@ export type ToggleStyle = (typeof toggleStyles)[number];
  * @fires toggle:change — User toggled the control
  *
  * @slot label
- * @slot validity-options
+ * @slot {HTMLOptionElement[]} validity-options
  */
 export declare class ToggleView extends FormAssociatedBase {
     #private;

package/generated/components/toggle-view.js

@@ -2,7 +2,7 @@ var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, devFlags, kebabCase, onoff } from '../internal/utils';
+import { $, devFlags, kebabCase, onoff, touchGlass } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 const toggleStyles = ['switch', 'button'];
@@ -12,7 +12,7 @@ const toggleStyles = ['switch', 'button'];
  * @fires toggle:change — User toggled the control
  *
  * @slot label
- * @slot validity-options
+ * @slot {HTMLOptionElement[]} validity-options
  */
 export class ToggleView extends FormAssociatedBase {
     static get observedAttributes() {
@@ -24,7 +24,6 @@ export class ToggleView extends FormAssociatedBase {
              * @type {boolean}
              */
             'is-on',
-            'keyboard-type',
             /**
              * @type {boolean}
              */
@@ -42,8 +41,7 @@ export class ToggleView extends FormAssociatedBase {
           <slot name="label"></slot>
         </div>
         <div part="root toggle-input-stack">
-          <!--<input type="checkbox" part="root input toggle-form-input">-->
-          <div part="root toggle-form-input" tabindex="0"></div>
+          <div part="root toggle-track" tabindex="0"></div>
         </div>
         <slot name="validity-options" hidden></slot>
       </label>`));
@@ -57,10 +55,30 @@ export class ToggleView extends FormAssociatedBase {
     #customValidity = '';
     #slots = new Map();
     #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
-    #input;
+    #track;
     #value = 'on';
     #isOn = false;
-    #connected = false;
+    #didDrag = false;
+    #trackWidth = 0;
+    #dotSize = 0;
+    get #trackMinX() {
+        return 0;
+    }
+    get #trackMaxX() {
+        return this.#trackWidth - this.#dotSize;
+    }
+    #handleMeasure = ([{ target, borderBoxSize }]) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ measure`);
+        if (!(target instanceof HTMLElement))
+            return;
+        this.#trackWidth = borderBoxSize.at(0)?.inlineSize ?? 0;
+        this.#dotSize = borderBoxSize.at(0)?.blockSize ?? 0;
+    };
+    #resizeObserver = new ResizeObserver(this.#handleMeasure);
+    get #isDragging() {
+        return '0ms' === this.#track?.style.getPropertyValue('--toggle--dot-transition-duration');
+    }
     get #internals() {
         return getInternals(this);
     }
@@ -75,14 +93,18 @@ export class ToggleView extends FormAssociatedBase {
         });
         CleanupRegistry.unregister(this, 'validities');
         CleanupRegistry.register(this, onoff('slotchange', this.#handleValiditiesSlotchange, this.#slots?.get('validity-options')).on(), 'validities');
-        this.#input = this.#shadowRoot.querySelector('[part*=toggle-form-input]') ?? undefined;
-        this.#input?.addEventListener('click', () => {
-            this.isOn = !this.isOn;
-            this.#sendValueToForm(this.#connected);
-        });
+        this.#track = this.#shadowRoot.querySelector('[part*=toggle-track]') ?? undefined;
         CleanupRegistry.register(this, onoff([{ types: 'focusin', listener: this.#handleFocusin }], this).on());
-        CleanupRegistry.register(this, onoff([{ types: 'keydown', listener: this.#handleInputKeydown }], this.#input).on());
-        // CleanupRegistry.register(this, onoff([{ types: 'input', listener: this.#handleInputInput }], this.#input).on())
+        CleanupRegistry.register(this, onoff([
+            { types: 'keydown', listener: this.#handleTrackKeydown },
+            { types: 'click', listener: this.#handleTrackClick },
+            { types: 'pointerdown', listener: this.#handleTrackPointerdown },
+            { types: 'pointerup', listener: this.#handleTrackPointerup },
+            { types: 'pointercancel', listener: this.#handleTrackPointercancel },
+            { types: 'pointermove', listener: this.#handleTrackPointermove },
+            { types: 'lostpointercapture', listener: this.#handleTrackPointercancel },
+        ], this.#track).on());
+        CleanupRegistry.register(this, onoff([{ types: 'blur', listener: this.#handleWindowBlur }], self).on());
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (devFlags.debug)
@@ -90,18 +112,18 @@ export class ToggleView extends FormAssociatedBase {
         switch (name) {
             case 'value':
                 this.value = String(newValue); // this.#input?.setAttribute('checked', newValue ?? '')
-                this.#sendValueToForm(this.#connected);
+                this.#sendValueToForm(false);
                 break;
             case 'is-on':
                 this.isOn = newValue !== null; // this.#input?.setAttribute('checked', newValue ?? '')
-                this.#sendValueToForm(this.#connected);
+                this.#sendValueToForm(false);
                 break;
             case 'required':
                 // this.#input?.setAttribute(name, newValue ?? '')
-                this.#sendValueToForm(this.#connected);
+                this.#sendValueToForm(false);
                 break;
             case 'name':
-                this.#sendValueToForm(this.#connected);
+                this.#sendValueToForm(false);
                 break;
             case 'label':
                 queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
@@ -114,16 +136,18 @@ export class ToggleView extends FormAssociatedBase {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        if (this.#track)
+            this.#resizeObserver.unobserve(this.#track);
         this.#validityObservers.unobserveAll();
     }
     connectedCallback() {
         super.connectedCallback();
-        // finally
-        // if (this.hasAttribute('value')) this.value = this.getAttribute('value') ?? ''
         if (this.hasAttribute('is-on'))
             this.isOn = this.hasAttribute('is-on');
         this.#sendValueToForm(false);
-        this.#connected = true;
+        if (this.#track)
+            this.#resizeObserver.observe(this.#track);
+        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t, ({ clientX, clientY }) => this.#measurePointerIsOverDot(clientX, clientY) ?? false), this).on());
     }
     get toggleStyle() {
         return toggleStyles.includes(this.getAttribute('toggle-style') ?? '') ? this.getAttribute('toggle-style') : 'switch';
@@ -149,7 +173,116 @@ export class ToggleView extends FormAssociatedBase {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${type}`);
         if (target === this)
-            this.#input?.focus();
+            this.#track?.focus();
+    };
+    #handleTrackClick = ({ type }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (this.#didDrag)
+            return (this.#didDrag = false);
+        this.#applyIsOnWithFlip(!this.isOn);
+        this.#sendValueToForm(true);
+    };
+    #measurePointerIsOverDot = (clientX, clientY) => {
+        if (!this.#track)
+            return;
+        const { left, top, height } = this.#track.getBoundingClientRect();
+        const dotLeft = left + parseFloat(self.getComputedStyle(this.#track, '::before').left);
+        const dotCenterX = dotLeft + this.#dotSize / 2;
+        const dotCenterY = top + height / 2;
+        return Math.hypot(clientX - dotCenterX, clientY - dotCenterY) <= this.#dotSize / 2;
+    };
+    #dragOffsetX = 0;
+    get #baseX() {
+        return this.isOn ? this.#trackMaxX : this.#trackMinX;
+    }
+    #handleTrackPointerdown = ({ type, pointerId, clientX, clientY }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!this.#track)
+            return;
+        if (!this.#measurePointerIsOverDot(clientX, clientY))
+            return; // ignore taps elsewhere on the track
+        this.#didDrag = true; // dot was engaged — settle() will own the outcome, click must be swallowed
+        const currentDelta = parseFloat(self.getComputedStyle(this.#track).getPropertyValue('--toggle--dot-x')) || 0;
+        const currentAbsoluteX = this.#baseX + currentDelta;
+        this.#dragOffsetX = clientX - this.#track.getBoundingClientRect().left - currentAbsoluteX;
+        this.#track.style.setProperty('--toggle--dot-transition-duration', '0ms');
+        this.#track.setPointerCapture(pointerId);
+        // this.#updateFromEvent(clientX)
+    };
+    #handleTrackPointermove = ({ type, clientX }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!this.#isDragging)
+            return;
+        this.#updateFromEvent(clientX);
+    };
+    #handleTrackPointerup = ({ type, pointerId }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!this.#isDragging)
+            return; // pointerdown never engaged (missed the dot) — plain click, nothing to settle
+        this.#track?.style.removeProperty('--toggle--dot-transition-duration');
+        this.#track?.releasePointerCapture(pointerId);
+        this.#settle();
+    };
+    #handleTrackPointercancel = ({ type }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!this.#isDragging)
+            return; // already settled via pointerup, or nothing to settle
+        this.#track?.style.removeProperty('--toggle--dot-transition-duration');
+        this.#settle();
+    };
+    #handleWindowBlur = () => {
+        if (!this.#isDragging)
+            return;
+        this.#track?.style.removeProperty('--toggle--dot-transition-duration');
+        this.#settle();
+    };
+    #updateFromEvent = (clientX) => {
+        if (!this.#track)
+            return;
+        const { left } = this.#track.getBoundingClientRect();
+        const absoluteX = Math.min(Math.max(clientX - left - this.#dragOffsetX, this.#trackMinX), this.#trackMaxX);
+        this.#track.style.setProperty('--toggle--dot-x', `${Math.round(absoluteX - this.#baseX)}px`);
+    };
+    #settle = () => {
+        if (!this.#track)
+            return;
+        const deltaX = parseFloat(self.getComputedStyle(this.#track).getPropertyValue('--toggle--dot-x')) || 0;
+        const absoluteX = this.#baseX + deltaX;
+        const nextIsOn = absoluteX > this.#trackMaxX / 2;
+        if (nextIsOn === this.isOn)
+            return this.#track.style.removeProperty('--toggle--dot-x'); // pure transform animation back to rest, inset untouched
+        this.#applyIsOnWithFlip(nextIsOn);
+        this.#sendValueToForm(true);
+    };
+    #handleTrackKeydown = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (' ' !== evt.key)
+            return;
+        evt.preventDefault();
+        this.#applyIsOnWithFlip(!this.isOn);
+        this.#sendValueToForm(true);
+    };
+    #applyIsOnWithFlip = (nextIsOn) => {
+        if (!this.#track || nextIsOn === this.isOn)
+            return;
+        // capture current visual position under the OLD base, before flipping state
+        const deltaX = parseFloat(self.getComputedStyle(this.#track).getPropertyValue('--toggle--dot-x')) || 0, oldAbsoluteX = this.#baseX + deltaX;
+        this.isOn = nextIsOn; // changes --toggle--dot-inset-inline-start/-end via aria-checked
+        const compensationX = oldAbsoluteX - this.#baseX; // baseX now reflects the NEW state
+        // make inset + transform jump together, instantly, so nothing is visibly out of sync
+        this.#track.style.setProperty('--toggle--dot-transition-duration', '0ms');
+        this.#track.style.setProperty('--toggle--dot-x', `${Math.round(compensationX)}px`);
+        void this.#track.offsetWidth; // force reflow so the instant jump is committed before re-enabling transitions
+        this.#track.style.removeProperty('--toggle--dot-transition-duration');
+        self.requestAnimationFrame(() => {
+            this.#track?.style.removeProperty('--toggle--dot-x'); // only transform animates from here — single source of motion
+        });
     };
     #sendValueToForm = (dispatchEvent = true) => {
         // input.value has already been updated/synced !!
@@ -158,9 +291,8 @@ export class ToggleView extends FormAssociatedBase {
         if (this.hasAttribute('required') && !this.isOn) {
             this.setValidity({ valueMissing: true });
         }
-        else {
+        else
             this.setValidity({});
-        }
         const entries = new FormData();
         if (this.value)
             entries.append(this.name, this.value);
@@ -168,17 +300,6 @@ export class ToggleView extends FormAssociatedBase {
         if (dispatchEvent)
             this.dispatchEvent(new CustomEvent('toggle:change', { detail: { value: this.value, isOn: this.isOn }, bubbles: true, composed: true }));
     };
-    #handleInputKeydown = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        this.isOn = !this.isOn;
-        this.#sendValueToForm();
-    };
-    #handleInputInput = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        this.#sendValueToForm();
-    };
     /**
      * Form participation property
      */
@@ -222,7 +343,7 @@ export class ToggleView extends FormAssociatedBase {
             }
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ validity-change`);
-        return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#input);
+        return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#track);
     };
     setCustomValidity = (message) => {
         this.#customValidity = message;

package/generated/components/tool-bar-item.js

@@ -31,11 +31,11 @@ let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
                 const role = this.getAttribute('data-previous-slot') ?? this.getAttribute('slot') ?? '', tKey = this.getAttribute('title-key');
                 if (['confirmation-action', 'cancellation-action'].includes(role))
                     Snapshot.waitReady.then(() => {
-                        ensurePlaceholder(this.querySelector(':scope>button'), role, tKey, Snapshot.config);
+                        ensurePlaceholder(this.querySelector(':scope>button:not(:has(> :not([slot])))'), role, tKey, Snapshot.config);
                         this.#mutationObserver = new MutationObserver((mutations) => {
                             for (const { target } of mutations)
                                 if (target instanceof HTMLElement)
-                                    ensurePlaceholder(this.querySelector(':scope>button'), role, tKey, Snapshot.config);
+                                    ensurePlaceholder(this.querySelector(':scope>button:not(:has(> :not([slot])))'), role, tKey, Snapshot.config);
                         });
                         this.#mutationObserver.observe(this, {
                             childList: true,

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

@@ -1,6 +1,7 @@
 /**
  * @summary A view that arranges its children one on top of the other.
  *
+ * @attr {@FrameInlineLength} readable — Shortcut for `placement="leading fill" frame:alignment="center" frame:width="infinity" frame:max-width="{length}"`
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
  *
  * @attr {@Template} template — The main-axis grid template

package/generated/components/v-stack.js

@@ -2,6 +2,7 @@ import { devFlags } from '../internal/utils';
 /**
  * @summary A view that arranges its children one on top of the other.
  *
+ * @attr {@FrameInlineLength} readable — Shortcut for `placement="leading fill" frame:alignment="center" frame:width="infinity" frame:max-width="{length}"`
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
  *
  * @attr {@Template} template — The main-axis grid template