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

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'];
@@ -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/css/index.css

@@ -1138,6 +1138,7 @@
     display: grid;
   }
   :where(labeled-content)::part(labeled-content-container),
+  :where(labeled-content)::part(labeled-content-container),
   :where(labeled-content)::part(labeled-content-label-stack),
   :where(labeled-content)::part(labeled-content-value-stack),
   :where(progress-view)::part(progress-control),
@@ -3440,7 +3441,15 @@
   :where(toggle-view) {
     grid-template-columns: minmax(0, 1fr);
     grid-template-rows: minmax(0, 1fr);
-    --toggle--trigger-bg: lightgray;
+    --toggle--track-padding: 0.2rem;
+    --toggle--track-bg: lightgray;
+    --toggle--dot-size: 1.4rem;
+    --toggle--dot-inset-inline-start: 0;
+    --toggle--dot-inset-inline-end: 100%;
+    --toggle--dot-x: 0px;
+    --toggle--dot-transition-duration: 200ms;
+    --toggle--dot-scale: scale(1);
+    --toogle--track-brightness: brightness(1);
   }
   :where(toggle-view)::part(toggle-stack) {
     grid-template-columns: minmax(0, 1fr) auto;
@@ -3451,36 +3460,51 @@
     align-items: center;
     justify-items: end;
     place-content: stretch;
+    align-self: flex-start;
+    cursor: pointer;
+    padding-inline: var(--toggle--track-padding);
+    padding-block: var(--toggle--track-padding);
+    border-radius: var(--pill-border-radius);
+    background: var(--toggle--track-bg);
+    transition: background-color var(--toggle--dot-transition-duration) ease-out;
   }
-  :where(toggle-view)::part(toggle-form-input):focus {
-    outline: blue solid 5px;
-  }
-  :where(toggle-view)::part(toggle-form-input) {
+  :where(toggle-view)::part(toggle-track) {
+    container: toggle-track/size;
     text-align: end;
     position: relative;
-    display: grid;
-    outline: red solid 3px;
-    border-radius: 2rem;
+    outline: none;
+    border-radius: var(--pill-border-radius);
     inline-size: 4rem;
-    block-size: 1rem;
-    background: var(--toggle--trigger-bg);
+    block-size: var(--toggle--dot-size);
+    filter: var(--toogle--track-brightness, );
+    transition: background-color var(--toggle--dot-transition-duration) ease-out;
+    touch-action: none;
+  }
+  :where(toggle-view)::part(toggle-track):focus {
+    --toogle--track-brightness: brightness(0.9);
   }
-  :where(toggle-view)::part(toggle-form-input)::before {
+  :where(toggle-view)::part(toggle-track)::before {
     content: "";
     display: grid;
     position: absolute;
-    inset: 0 auto auto 0;
-    inline-size: 1rem;
-    block-size: 1rem;
-    border-radius: 1rem;
+    inset: 0 var(--toggle--dot-inset-inline-end) auto var(--toggle--dot-inset-inline-start);
+    inline-size: var(--toggle--dot-size);
+    block-size: var(--toggle--dot-size);
+    border-radius: var(--pill-border-radius);
     backdrop-filter: var(--liquid-glass-backdrop-filter);
     box-shadow: var(--liquid-glass-box-shadow);
+    transition: inset-inline-start var(--toggle--dot-transition-duration) ease-out, inset-inline-end var(--toggle--dot-transition-duration) ease-out, transform var(--toggle--dot-transition-duration) ease-out, scale var(--toggle--dot-press-duration) ease-out;
+    transform: translateX(var(--toggle--dot-x));
+    scale: var(--toggle--dot-scale, );
+    transform-origin: center;
   }
   :where(form toggle-view)::part(toggle-label-stack) {
     color: var(--secondary);
   }
   :where(toggle-view[aria-checked=true]) {
-    --toggle--trigger-bg: green;
+    --toggle--track-bg: green;
+    --toggle--dot-inset-inline-start: calc(100% - var(--toggle--dot-size));
+    --toggle--dot-inset-inline-end: 0;
   }
   :where(toggle-view > :nth-child(n+2 of [slot=label])) {
     --label-font: callout;
@@ -10528,6 +10552,10 @@
   } */
 }
 @layer sw-final {
+  :where(toggle-view[touch-glass]) {
+    --toggle--dot-scale: 1.22;
+    --toggle--dot-press-duration: 100ms;
+  }
   @media (pointer: coarse) {
     :where([is=glass-button][touch-glass],
     [is=glass-prominent-button][touch-glass]) {

package/package.json

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

package/scss/components/_index.scss

@@ -56,6 +56,7 @@
     }
   }
 
+  :where(labeled-content)::part(labeled-content-container),
   :where(labeled-content)::part(labeled-content-container),
   :where(labeled-content)::part(labeled-content-label-stack),
   :where(labeled-content)::part(labeled-content-value-stack),

package/scss/components/_toggle-view.scss

@@ -9,7 +9,19 @@
 
       grid-template-rows: minmax(0, 1fr);
 
-      --toggle--trigger-bg: lightgray;
+      --toggle--track-padding: 0.2rem;
+      --toggle--track-bg: lightgray;
+
+      --toggle--dot-size: 1.4rem;
+
+      --toggle--dot-inset-inline-start: 0;
+      --toggle--dot-inset-inline-end: 100%;
+
+      --toggle--dot-x: 0px;
+      --toggle--dot-transition-duration: 200ms;
+      --toggle--dot-scale: scale(1);
+
+      --toogle--track-brightness: brightness(1);
 
       &::part(toggle-stack) {
         grid-template-columns: minmax(0, 1fr) auto;
@@ -30,50 +42,73 @@
         justify-items: end;
 
         place-content: stretch;
-      }
+        align-self: flex-start;
+
+        cursor: pointer;
 
-      &::part(toggle-form-input):focus {
-        outline: blue solid 5px;
+        padding-inline: var(--toggle--track-padding);
+        padding-block: var(--toggle--track-padding);
+        border-radius: var(--pill-border-radius);
+        background: var(--toggle--track-bg);
+
+        transition: background-color var(--toggle--dot-transition-duration) ease-out;
       }
 
-      &::part(toggle-form-input) {
+      &::part(toggle-track) {
+        container: toggle-track / size;
+
         text-align: end;
 
         position: relative;
 
-        display: grid;
-        outline: red solid 3px;
-        border-radius: 2rem;
+        outline: none;
+
+        // display: grid;
+        // outline: red solid 3px;
+        border-radius: var(--pill-border-radius);
         inline-size: 4rem;
-        block-size: 1rem;
-        background: var(--toggle--trigger-bg);
+        block-size: var(--toggle--dot-size);
+        // background: var(--toggle--track-bg);
 
-        // appearance: none;
+        filter: var(--toogle--track-brightness,);
 
-        // border: 0;
+        transition: background-color var(--toggle--dot-transition-duration) ease-out;
 
-        // outline: 0;
+        touch-action: none; // prevent scrolling while dragging
 
-        // padding: 0;
+        &:focus {
+          // outline: blue solid 5px;
+          // --toggle--track-bg: gray;
 
-        // background-color: transparent;
-      }
+          --toogle--track-brightness: brightness(0.9);
+        }
+
+        &::before {
+          content: '';
 
-      &::part(toggle-form-input)::before {
-        content: '';
+          display: grid;
 
-        display: grid;
+          position: absolute;
+          inset: 0 var(--toggle--dot-inset-inline-end) auto var(--toggle--dot-inset-inline-start);
+          inline-size: var(--toggle--dot-size);
+          block-size: var(--toggle--dot-size);
+          border-radius: var(--pill-border-radius);
 
-        position: absolute;
-        inset: 0 auto auto 0;
-        inline-size: 1rem;
-        block-size: 1rem;
-        border-radius: 1rem;
-        // background: yellow;
+          backdrop-filter: var(--liquid-glass-backdrop-filter);
 
-        backdrop-filter: var(--liquid-glass-backdrop-filter);
+          box-shadow: var(--liquid-glass-box-shadow);
 
-        box-shadow: var(--liquid-glass-box-shadow);
+          transition:
+            inset-inline-start var(--toggle--dot-transition-duration) ease-out,
+            inset-inline-end var(--toggle--dot-transition-duration) ease-out,
+            transform var(--toggle--dot-transition-duration) ease-out,
+            scale var(--toggle--dot-press-duration) ease-out;
+
+          transform: translateX(var(--toggle--dot-x));
+          scale: var(--toggle--dot-scale,);
+
+          transform-origin: center;
+        }
       }
     }
 
@@ -85,7 +120,10 @@
 
     &[aria-checked='true'] {
       :where(&) {
-        --toggle--trigger-bg: green;
+        --toggle--track-bg: green;
+
+        --toggle--dot-inset-inline-start: calc(100% - var(--toggle--dot-size));
+        --toggle--dot-inset-inline-end: 0;
       }
     }
 

package/scss/final/_touch-glass.scss

@@ -2,6 +2,13 @@
 @use '../mixins';
 
 @layer #{vars.$final-layer} {
+  toggle-view {
+    :where(&[touch-glass]) {
+      --toggle--dot-scale: 1.22;
+      --toggle--dot-press-duration: 100ms;
+    }
+  }
+
   @media (pointer: coarse) {
     [is='glass-button'],
     [is='glass-prominent-button'] {

package/web-components.html-data/en.json

@@ -882,9 +882,6 @@
           "name": "is-on",
           "description": "Value Type: boolean"
         },
-        {
-          "name": "keyboard-type"
-        },
         {
           "name": "required",
           "description": "Value Type: boolean"
@@ -900,7 +897,7 @@
           "description": "Value Type: boolean"
         }
       ],
-      "description": "A control that switches between on and off states.\n---\n\n```ts\ninterface ToggleViewSignature {\n  Attributes: {\n    label?: string\n    name?: string\n    value?: string\n    'is-on'?: boolean\n    'keyboard-type'?: string\n    required?: boolean\n    disabled?: boolean\n  }\n\n  Slots: {\n    label: HTMLElement[]\n    'validity-options': HTMLOptionElement[]\n  }\n}\n\nclass ToggleView extends HTMLElement<ToggleViewSignature> {\n  static formAssociated = true\n\n  readonly toggleStyle: 'button' | 'switch'\n  isOn: boolean\n  readonly name: string // Form participation property\n  value: string | null\n\n  setValidity(): void\n  setCustomValidity(): void\n}\n\ninterface GlobalEventMap<\n  Targets = HTMLElementEventMap | DocumentEventMap | WindowEventMap,\n> {\n  'toggle:change': CustomEvent // User toggled the control\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'toggle-view': ToggleView // <toggle-view></toggle-view>\n  }\n}\n\n```\n"
+      "description": "A control that switches between on and off states.\n---\n\n```ts\ninterface ToggleViewSignature {\n  Attributes: {\n    label?: string\n    name?: string\n    value?: string\n    'is-on'?: boolean\n    required?: boolean\n    disabled?: boolean\n  }\n\n  Slots: {\n    label: HTMLElement[]\n    'validity-options': HTMLOptionElement[]\n  }\n}\n\nclass ToggleView extends HTMLElement<ToggleViewSignature> {\n  static formAssociated = true\n\n  readonly toggleStyle: 'button' | 'switch'\n  isOn: boolean\n  readonly name: string // Form participation property\n  value: string | null\n\n  setValidity(): void\n  setCustomValidity(): void\n}\n\ninterface GlobalEventMap<\n  Targets = HTMLElementEventMap | DocumentEventMap | WindowEventMap,\n> {\n  'toggle:change': CustomEvent // User toggled the control\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'toggle-view': ToggleView // <toggle-view></toggle-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "tool-bar-item-group",