@swiftwc/ui 0.0.0-dev.66 → 0.0.0-dev.67

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

@@ -2,6 +2,10 @@
  *
  * @attr {@spacingSet} spacing - The gap between the primary axis
  *
+ * @attr {@alignmentSet} alignment - The cross-axis alignment
+ * @attr {@distributionSet} distribution - The main-axis alignment
+ * @attr {@placementSet} placement - The main-axis alignment
+ *
  */
 export declare class HStack extends HTMLElement {
     constructor();

package/generated/components/h-stack.js

@@ -3,6 +3,10 @@ import { devFlags } from '../internal/utils';
  *
  * @attr {@spacingSet} spacing - The gap between the primary axis
  *
+ * @attr {@alignmentSet} alignment - The cross-axis alignment
+ * @attr {@distributionSet} distribution - The main-axis alignment
+ * @attr {@placementSet} placement - The main-axis alignment
+ *
  */
 export class HStack extends HTMLElement {
     constructor() {

package/generated/components/index.d.ts

@@ -39,6 +39,7 @@ export * from './tab-item';
 export * from './tab-view';
 export * from './table-view';
 export * from './text-field';
+export * from './toggle-view';
 export * from './tool-bar-item-group';
 export * from './tool-bar-item';
 export * from './tool-bar';

package/generated/components/index.js

@@ -39,6 +39,7 @@ export * from './tab-item';
 export * from './tab-view';
 export * from './table-view';
 export * from './text-field';
+export * from './toggle-view';
 export * from './tool-bar-item-group';
 export * from './tool-bar-item';
 export * from './tool-bar';

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

@@ -1,3 +1,8 @@
+/**
+ *
+ * @attr {@fontSet} font - Sets the default font for text in this view.
+ *
+ */
 export declare class LabelView extends HTMLElement {
     #private;
     static get observedAttributes(): string[];

package/generated/components/label-view.js

@@ -1,4 +1,9 @@
 import { $, devFlags, renderLabelIcon, renderLabelTitle } from '../internal/utils';
+/**
+ *
+ * @attr {@fontSet} font - Sets the default font for text in this view.
+ *
+ */
 export class LabelView extends HTMLElement {
     static get observedAttributes() {
         return ['system-image', 'title', 'line-limit', 'truncation-mode'];

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

@@ -0,0 +1,28 @@
+import { FormAssociatedBase } from '../internal/class/form-associated-base';
+declare const toggleStyles: readonly ["switch", "button"];
+export type ToggleStyle = (typeof toggleStyles)[number];
+/**
+ * @slot label
+ * @slot validity-options
+ */
+export declare class ToggleView extends FormAssociatedBase {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    get toggleStyle(): ToggleStyle;
+    get isOn(): boolean;
+    set isOn(v: boolean);
+    get name(): string;
+    get value(): string | null;
+    set value(v: string | null);
+    setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
+    setCustomValidity: (message: string) => void;
+    formAssociatedCallback: (form: HTMLFormElement) => void;
+    formDisabledCallback: (disabled: boolean) => void;
+    formResetCallback: () => void;
+}
+export {};

package/generated/components/toggle-view.js

@@ -0,0 +1,222 @@
+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, renderLabel } from '../internal/utils';
+const toggleStyles = ['switch', 'button'];
+/**
+ * @slot label
+ * @slot validity-options
+ */
+export class ToggleView extends FormAssociatedBase {
+    static get observedAttributes() {
+        return ['label', 'name', 'value', 'is-on', 'keyboard-type', 'required', 'disabled'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+    <label part="root toggle-stack">
+    <div part="root toggle-label-stack">
+      <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>
+    <slot name="validity-options" hidden></slot>
+  </label>`));
+    }
+    #renderValidityMsgs = (entries) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
+        this.setValidity(this.validity, this.validationMessage);
+    };
+    #shadowRoot;
+    #customValidity = '';
+    #slots = new Map();
+    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
+    #input;
+    #value = 'on';
+    #isOn = false;
+    #connected = false;
+    get #internals() {
+        return getInternals(this);
+    }
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
+        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);
+        });
+        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())
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'value':
+                this.value = String(newValue); // this.#input?.setAttribute('checked', newValue ?? '')
+                this.#sendValueToForm(this.#connected);
+                break;
+            case 'is-on':
+                this.isOn = newValue !== null; // this.#input?.setAttribute('checked', newValue ?? '')
+                this.#sendValueToForm(this.#connected);
+                break;
+            case 'required':
+                // this.#input?.setAttribute(name, newValue ?? '')
+                this.#sendValueToForm(this.#connected);
+                break;
+            case 'name':
+                this.#sendValueToForm(this.#connected);
+                break;
+            case 'label':
+                renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue);
+                break;
+            case 'disabled':
+                for (const el of this.#shadowRoot.querySelectorAll('input'))
+                    el.toggleAttribute('disabled', !newValue);
+                break;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        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;
+    }
+    get toggleStyle() {
+        return toggleStyles.includes(this.getAttribute('toggle-style') ?? '') ? this.getAttribute('toggle-style') : 'switch';
+    }
+    get isOn() {
+        return this.#isOn;
+    }
+    set isOn(v) {
+        this.#isOn = Boolean(v);
+        this.#value = this.#isOn ? (this.getAttribute('value') ?? 'on') : null;
+        this.ariaChecked = `${this.#isOn}`;
+    }
+    #handleValiditiesSlotchange = ({ type, target: slot }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement))
+            return;
+        const assigned = slot.assignedElements();
+        this.#validityObservers.syncObservations(assigned, ['value', 'label']);
+        this.#renderValidityMsgs([]);
+    };
+    #handleFocusin = ({ type, target }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (target === this)
+            this.#input?.focus();
+    };
+    #sendValueToForm = (dispatchEvent = true) => {
+        // input.value has already been updated/synced !!
+        if (this.matches(':disabled'))
+            return this.setValidity({});
+        if (this.hasAttribute('required') && !this.isOn) {
+            this.setValidity({ valueMissing: true });
+        }
+        else {
+            this.setValidity({});
+        }
+        const entries = new FormData();
+        if (this.value)
+            entries.append(this.name, this.value);
+        this.#internals.setFormValue(entries);
+        if (dispatchEvent)
+            this.dispatchEvent(new CustomEvent('commit', { 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();
+    };
+    // Optional: form participation properties
+    get name() {
+        return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
+    }
+    get value() {
+        return this.#value;
+    }
+    set value(v) {
+        this.#value = this.isOn ? String(v) : null;
+    }
+    setValidity = (flags, message, anchor) => {
+        // let msg
+        // if (message)
+        for (const k in flags) {
+            const key = k; // ✅ type-safe cast
+            if (true !== flags[key])
+                continue;
+            for (const el of this.#slots?.get('validity-options')?.assignedElements({ flatten: true }) ?? []) {
+                if (!el.matches('option'))
+                    continue;
+                const { label, value } = el;
+                if (`${kebabCase(key)}` === value) {
+                    message = label;
+                    break;
+                }
+                else if (`${kebabCase(key)}:${message}` === value) {
+                    message = label;
+                    break;
+                }
+            }
+        }
+        if (!message)
+            for (const k in flags) {
+                const key = k; // ✅ type-safe cast
+                if (true !== flags[key])
+                    continue;
+                message = kebabCase(key);
+                break;
+            }
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ validity-change`);
+        return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#input);
+    };
+    setCustomValidity = (message) => {
+        this.#customValidity = message;
+        if (this.#customValidity)
+            this.#internals.setValidity({ ...this.#internals.validity, customError: true }, message);
+        else
+            this.#sendValueToForm(false);
+    };
+    formAssociatedCallback = (form) => {
+        this.#sendValueToForm();
+    };
+    formDisabledCallback = (disabled) => {
+        for (const el of this.#shadowRoot.querySelectorAll('input'))
+            el.toggleAttribute('disabled', !disabled);
+    };
+    formResetCallback = () => {
+        this.value = '';
+        this.#sendValueToForm();
+    };
+}
+_a = ToggleView;

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

@@ -5,6 +5,10 @@
  *
  * @attr {@spacingSet} spacing - The gap between the primary axis
  *
+ * @attr {@alignmentSet} alignment - The cross-axis alignment
+ * @attr {@distributionSet} distribution - The main-axis alignment
+ * @attr {@placementSet} placement - The main-axis alignment
+ *
  */
 export declare class VStack extends HTMLElement {
     constructor();

package/generated/components/v-stack.js

@@ -6,6 +6,10 @@ import { devFlags } from '../internal/utils';
  *
  * @attr {@spacingSet} spacing - The gap between the primary axis
  *
+ * @attr {@alignmentSet} alignment - The cross-axis alignment
+ * @attr {@distributionSet} distribution - The main-axis alignment
+ * @attr {@placementSet} placement - The main-axis alignment
+ *
  */
 export class VStack extends HTMLElement {
     constructor() {

package/generated/css/index.css

@@ -1134,6 +1134,10 @@
   :where(table-view)::part(table-footer-leading-stack),
   :where(table-view)::part(table-footer-principal-stack),
   :where(table-view)::part(table-footer-trailing-stack),
+  :where(toggle-view)::part(toggle-stack),
+  :where(toggle-view)::part(toggle-label-stack),
+  :where(toggle-view)::part(toggle-input-stack),
+  :where(toggle-view)::part(text-field-form-input),
   :where(text-field)::part(text-field-stack),
   :where(text-field)::part(text-field-label-stack),
   :where(text-field)::part(text-field-input-stack),
@@ -1421,8 +1425,8 @@
   :where(detail-placeholder > scroll-view) {
     overflow: clip auto;
     pointer-events: all;
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
     container: scroll-view/size;
     padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
     padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
@@ -1911,8 +1915,8 @@
   }
   :where(navigation-stack > scroll-view, navigation-split-view > scroll-view, [is=sidebar-view] > scroll-view, body-view > scroll-view, [is=full-screen] > scroll-view, [is=sheet-view] > scroll-view) {
     overflow: clip auto;
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
     padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
     padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
     container: scroll-view/size;
@@ -1993,8 +1997,6 @@
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack,
   scroll-view-proxy:has(> v-stack, > h-stack) > h-stack) {
     position: relative;
-    overscroll-behavior: contain;
-    -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
     container: scroll-view-proxy/inline-size;
   }
@@ -2010,10 +2012,14 @@
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack) {
     overflow: clip auto;
     scroll-snap-type: block mandatory;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-block: contain;
   }
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack) {
     overflow: auto clip;
     scroll-snap-type: inline mandatory;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-inline: contain;
   }
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack[padding]) {
     scroll-padding-inline: 1rem;
@@ -2039,9 +2045,36 @@
   :where(h-stack[template="auto spacer auto"]) {
     grid-template-columns: auto minmax(0, 1fr) auto;
   }
+  :where(h-stack[template="repeat(1,spacer)"]) {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(2,spacer)"]) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(3,spacer)"]) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   :where(h-stack[template="repeat(4,spacer)"]) {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  :where(h-stack[template="repeat(5,spacer)"]) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(6,spacer)"]) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(7,spacer)"]) {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(8,spacer)"]) {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(9,spacer)"]) {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(10,spacer)"]) {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
   :where(h-stack[template="repeat(2,spacer) auto"]) {
     grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
   }
@@ -2575,14 +2608,6 @@
     grid-template-rows: auto 1fr auto;
     grid-template-areas: "top-bar" "spacer" "bottom-bar";
   }
-  :where(tool-bar > *:not(sidebar-toggle), tool-bar > sidebar-toggle > tool-bar-item, tab-view > sidebar-toggle > tool-bar-item, navigation-split-view > sidebar-toggle > tool-bar-item) {
-    backdrop-filter: var(--liquid-glass-backdrop-filter);
-    box-shadow: var(--toolbar-cell-box-shadow);
-    min-inline-size: var(--toolbar-cell-min-size);
-    transform: var(--toolbar-cell-scale, );
-    filter: var(--toolbar-cell-filter, );
-    opacity: var(--toolbar-cell-opacity, );
-  }
   :where(tool-bar)::part(top-bar), :where(tool-bar)::part(bottom-bar) {
     position: relative;
     padding-inline: var(--safe-area-inset-left, 0px) var(--safe-area-inset-right, 0px);
@@ -2609,6 +2634,14 @@
     column-gap: var(--toolbar-col-gap);
     padding-inline: var(--toolbar-col-gap) var(--toolbar-col-gap);
   }
+  :where(tool-bar > *:not(sidebar-toggle), tool-bar > sidebar-toggle > tool-bar-item, tab-view > sidebar-toggle > tool-bar-item, navigation-split-view > sidebar-toggle > tool-bar-item) {
+    backdrop-filter: var(--liquid-glass-backdrop-filter);
+    box-shadow: var(--toolbar-cell-box-shadow);
+    min-inline-size: var(--toolbar-cell-min-size);
+    transform: var(--toolbar-cell-scale, );
+    filter: var(--toolbar-cell-filter, );
+    opacity: var(--toolbar-cell-opacity, );
+  }
   @media (min-width: 37rem) and (min-height: 27.75rem) {
     :where([is=sheet-view] tool-bar)::part(top-bar), :where([is=sheet-view] tool-bar)::part(bottom-bar) {
       --safe-area-inset-left: 0px;
@@ -3088,6 +3121,52 @@
     }
   }
 }
+@layer sw-components {
+  :where(toggle-view) {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    --toggle--trigger-bg: lightgray;
+  }
+  :where(toggle-view)::part(toggle-stack) {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    column-gap: var(--labeled-content-column-gap);
+  }
+  :where(toggle-view)::part(toggle-label-stack) {
+    color: var(--secondary);
+  }
+  :where(toggle-view)::part(toggle-input-stack) {
+    place-items: stretch;
+    place-content: stretch;
+  }
+  :where(toggle-view)::part(toggle-form-input):focus {
+    outline: blue solid 5px;
+  }
+  :where(toggle-view)::part(toggle-form-input) {
+    text-align: end;
+    position: relative;
+    display: grid;
+    outline: red solid 3px;
+    border-radius: 2rem;
+    inline-size: 4rem;
+    block-size: 1rem;
+    background: var(--toggle--trigger-bg);
+  }
+  :where(toggle-view)::part(toggle-form-input)::before {
+    content: "";
+    display: grid;
+    position: absolute;
+    inset: 0 auto auto 0;
+    inline-size: 1rem;
+    block-size: 1rem;
+    border-radius: 1rem;
+    backdrop-filter: var(--liquid-glass-backdrop-filter);
+    box-shadow: var(--liquid-glass-box-shadow);
+  }
+  toggle-view[aria-checked=true] {
+    --toggle--trigger-bg: green;
+  }
+}
 @layer sw-components {
   :where(labeled-content) {
     container: labeled-content/inline-size;
@@ -3250,8 +3329,8 @@
     pointer-events: none;
   }
   :where(menu-view)::part(menu-form) {
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
     --menu--dialog-max-inline-size: anchor-size();
     --menu--dialog-max-block-size: anchor-size();
   }
@@ -3302,7 +3381,7 @@
     --menu--dialog-max-inline-size: anchor-size();
     --menu--dialog-max-block-size: anchor-size();
   }
-  menu-view[open]:not(tool-bar-item > menu-view) {
+  :where(menu-view[open]:not(tool-bar-item > menu-view)) {
     --menu--summary-scale: scale(0.01);
     --menu--summary-filter: blur(10px);
   }
@@ -4209,6 +4288,21 @@
     grid-template-areas: "header" "main" "footer";
     gap: 0.5rem;
   }
+  :where(section-view)::part(section-header-stack), :where(section-view)::part(section-footer-stack) {
+    pointer-events: none;
+  }
+  :where(section-view)::part(section-header-stack) {
+    grid-area: header;
+  }
+  :where(section-view)::part(section-main-stack) {
+    grid-area: main;
+  }
+  :where(section-view)::part(section-footer-stack) {
+    grid-area: footer;
+  }
+  :where(section-view)::part(section-header-stack) {
+    order: -1;
+  }
   :where(section-view:has(> [slot=header]):not(:has(> [slot=footer]))) {
     grid-template-rows: auto minmax(max-content, 1fr);
     grid-template-areas: "header" "main";
@@ -4227,21 +4321,6 @@
   :where(section-view:not(:has(> [slot=footer])))::part(section-footer-stack) {
     display: none;
   }
-  :where(section-view)::part(section-header-stack), :where(section-view)::part(section-footer-stack) {
-    pointer-events: none;
-  }
-  :where(section-view)::part(section-header-stack) {
-    grid-area: header;
-  }
-  :where(section-view)::part(section-main-stack) {
-    grid-area: main;
-  }
-  :where(section-view)::part(section-footer-stack) {
-    grid-area: footer;
-  }
-  :where(section-view)::part(section-header-stack) {
-    order: -1;
-  }
   section-view {
     /*  :where(&:not(& &))::part(section-footer-stack),
     :where(&:not(& &))::part(section-header-stack) {
@@ -4302,7 +4381,7 @@
     border-radius: 0 0 var(--insetlist-item-border-radius) var(--insetlist-item-border-radius);
     border-top: 1px solid var(--separator);
   }
-  :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-header-leading-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-header-principal-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-header-trailing-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-footer-leading-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-footer-principal-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-footer-trailing-stack) {
+  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-header-leading-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-header-principal-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-header-trailing-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-footer-leading-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-footer-principal-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-footer-trailing-stack) {
     grid-auto-flow: column;
     grid-template-columns: minmax(0, 1fr);
     column-gap: var(--toolbar-col-gap);
@@ -5317,8 +5396,8 @@
     z-index: -1;
   }
   :where([is=tab-bar] > [is=form-view]) {
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
     pointer-events: all;
     touch-action: none;
     grid-auto-flow: column;

package/generated/events/index.d.ts

@@ -6,3 +6,4 @@ export * from './picker-view';
 export * from './scroll-view';
 export * from './tab-view';
 export * from './text-field';
+export * from './toggle-view';

package/generated/events/index.js

@@ -6,3 +6,4 @@ export * from './picker-view';
 export * from './scroll-view';
 export * from './tab-view';
 export * from './text-field';
+export * from './toggle-view';

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

@@ -0,0 +1,9 @@
+export type ToggleChangeDetail = {
+    isOn: boolean;
+    value: string | null;
+};
+declare global {
+    interface HTMLElementEventMap {
+        change: CustomEvent<ToggleChangeDetail>;
+    }
+}

package/generated/events/toggle-view.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.66",
+  "version": "0.0.0-dev.67",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/_components.scss

@@ -52,6 +52,8 @@
 
 @forward 'components/label-view';
 
+@forward 'components/toggle-view';
+
 @forward 'components/labeled-content';
 
 // @forward 'components/button-view';

package/scss/components/_date-picker.scss

@@ -5,26 +5,26 @@
     :where(&) {
       grid-template-columns: minmax(0, 1fr);
       grid-template-rows: minmax(0, 1fr);
-    }
 
-    :where(&)::part(date-picker-stack) {
-      grid-template-columns: auto minmax(0, 1fr);
-      grid-template-rows: minmax(0, 1fr);
-    }
+      &::part(date-picker-stack) {
+        grid-template-columns: auto minmax(0, 1fr);
+        grid-template-rows: minmax(0, 1fr);
+      }
 
-    :where(&)::part(date-picker-label-stack) {
-      // display: grid;
-    }
+      &::part(date-picker-label-stack) {
+        // display: grid;
+      }
 
-    :where(&)::part(date-picker-input-stack) {
-      place-items: stretch;
-      place-content: stretch;
+      &::part(date-picker-input-stack) {
+        place-items: stretch;
+        place-content: stretch;
 
-      grid-auto-flow: column;
-    }
+        grid-auto-flow: column;
+      }
 
-    :where(&)::part(date-picker-form-input) {
-      text-align: end;
+      &::part(date-picker-form-input) {
+        text-align: end;
+      }
     }
   }
 }