@vollowx/seele 0.13.7 → 0.13.8

package/README.md

@@ -37,8 +37,9 @@ Check out [Overview](./docs/00-Overview.md).
 
 ## Documentations
 
+- [Documentations](./docs/00-Overview.md) (Markdown)
+  - [lucaz.srht.site](https://lucaz.srht.site/) (components rendered)
 - Previous [documentations and demos](https://tideover.cc/seele/docs/), being replaced
-- [Documentations](./docs/00-Overview.md)
 
 ## Download
 
@@ -50,25 +51,34 @@ Check out [Overview](./docs/00-Overview.md).
 
 seele relies on the following modern web standards:
 
-- [`ElementInternals`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals), Baseline 2023
-- [`:dir()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:dir), Baseline 2023, C 120, F 49
-- [Constructable Stylesheets](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet), Baseline 2024, C[^1] 90, F 126
-- [`:state()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:state), Baseline 2024, C 125, F 126
-- [`ariaActiveDescendantElement`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaActiveDescendantElement) and other similar ones, Baseline 2025, C 135, F 136
+| feature                                                | baseline | Chromium | Firefox | Safari |
+| ---                                                    | :---:    | :---:    | :---:   | :---:  |
+| [`ElementInternals`][element-internals]                | 2023     | -        | -       | -      |
+| [`:dir()`][:dir]                                       | 2023     | 120      | -       | -      |
+| [Constructable Stylesheets][constructable-stylesheets] | 2024     | -        | 126     | -      |
+| [`:state()`][:state]                                   | 2024     | 125      | 126     | -      |
+| [`aria*Element`][aria-active] and similar              | 2025     | 135      | 136     | 16.4   |
+| [`CSSNumericValue`][css-numeric-value]                 | not yet  | -        | Nightly | -      |
 
-And all that result in:
+_* `CSSNumericValue` is worked around currently so it does not raise the minimum
+version of Firefox_
+
+All of the above result in the following minimum requirements:
 
 - Chromium: >= 135
 - Firefox: >= 136
+- Safari: >= 16.4
 
-It is 2026 now, you don't really need to worry about this. But in the future,
-these following web features might be used and require higher browser versions:
+It is 2026 now, so you don't really need to worry about this. However, in the
+future, the following web features might be used and require higher browser
+versions:
 
-- [anchor()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/anchor), Baseline 2026, C 125, F 147, will remove the dependency `floating-dom`
-- [`::view-*`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::view-transition), Baseline 2025, C 111, F 144, will optimize some animations for menu, dialog, etc
-- [`CSSNumericValue`](https://developer.mozilla.org/en-US/docs/Web/API/CSSNumericValue), not Baseline, C 66, F Nightly, worked around currently
+- [Popover API][popover-api] — Baseline 2025, Safari 17, _will improve menu, popup, and combobox_
+- [`@starting-style`][starting-style] — Baseline 2025, Safari 17.5
+- [`anchor()`][anchor] — Baseline 2026, Firefox 147, Safari 26, _will remove the dependency `floating-dom`_
 
-[^1]: C = Chromium, F = Firefox.
+_* omitting a specific browser version means using that standard does not raise
+the minimum required version of seele_
 
 ## Other Information
 
@@ -79,3 +89,12 @@ these following web features might be used and require higher browser versions:
 [web-comps]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components
 [apg-patterns]: https://www.w3.org/WAI/ARIA/apg/patterns/
 [lit]: https://lit.dev/
+[element-internals]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals
+[:dir]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:dir
+[constructable-stylesheets]: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet
+[:state]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:state
+[aria-active]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaActiveDescendantElement
+[css-numeric-value]: https://developer.mozilla.org/en-US/docs/Web/API/CSSNumericValue
+[popover-api]: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+[starting-style]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@starting-style
+[anchor]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/anchor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.13.7",
+  "version": "0.13.8",
   "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",

package/src/all.d.ts

@@ -32,3 +32,5 @@ import './m3/text-field/outlined-text-field.js';
 import './m3/toolbar/toolbar.js';
 import './m3/tooltip/tooltip.js';
 import './win98/button/button.js';
+import './base/experimental/popup.js';
+import './m3/experimental/popup.js';

package/src/all.js

@@ -32,3 +32,5 @@ import './m3/text-field/outlined-text-field.js';
 import './m3/toolbar/toolbar.js';
 import './m3/tooltip/tooltip.js';
 import './win98/button/button.js';
+import './base/experimental/popup.js';
+import './m3/experimental/popup.js';

package/src/base/button.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+export declare const updateInternals: unique symbol;
 declare const Base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 export declare class Button extends Base {
     #private;
@@ -7,7 +8,8 @@ export declare class Button extends Base {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected updated(changed: Map<string, any>): void;
-    protected updateState(): void;
+    updated(changed: Map<string, any>): void;
+    [updateInternals](): void;
+    _handleClick(e: Event): void;
 }
 export {};

package/src/base/button.js

@@ -4,6 +4,7 @@ import { property } from 'lit/decorators.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
 import { FormAssociated } from './mixins/form-associated.js';
 import { hiddenStyles } from './hidden-styles.css.js';
+export const updateInternals = Symbol('updateInternals');
 const Base = FormAssociated(InternalsAttached(LitElement));
 export class Button extends Base {
     static { this.styles = [hiddenStyles]; }
@@ -17,20 +18,21 @@ export class Button extends Base {
             e.stopPropagation();
             if (e.key === 'Enter')
                 this.click();
+            else
+                this[internals].states.add('active');
+            // TODO: consider handle `pointerdown` and ditch native `:active` selector
+            // TODO: supporting `Enter` also requires listening on `focusout`
         };
         this.#handleKeyUp = (e) => {
             if (e.key === ' ') {
+                this[internals].states.delete('active');
                 e.preventDefault();
                 e.stopPropagation();
                 this.click();
             }
         };
-        this.#handleClick = () => {
-            if (this.type !== 'button')
-                this[internals].form?.[this.type]();
-        };
         this[internals].role = 'button';
-        this.updateState();
+        this[updateInternals]();
         // This is set to prevent a first-paint-time transition for styles like
         // `border-radius` on `:host`. Also in `ToggleButton`.
         // Double `requestAnimationFrame` is necessary since the callback inside is
@@ -41,26 +43,29 @@ export class Button extends Base {
         super.connectedCallback();
         this.addEventListener('keydown', this.#handleKeyDown);
         this.addEventListener('keyup', this.#handleKeyUp);
-        this.addEventListener('click', this.#handleClick);
+        this.addEventListener('click', this._handleClick.bind(this));
         requestAnimationFrame(() => requestAnimationFrame(() => this.removeAttribute('notransition')));
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('keydown', this.#handleKeyDown);
         this.removeEventListener('keyup', this.#handleKeyUp);
-        this.removeEventListener('click', this.#handleClick);
+        this.removeEventListener('click', this._handleClick.bind(this));
     }
     updated(changed) {
         if (changed.has('disabled'))
-            this.updateState();
+            this[updateInternals]();
     }
-    updateState() {
+    [updateInternals]() {
         this.tabIndex = this.disabled ? -1 : 0;
         this[internals].ariaDisabled = String(this.disabled);
     }
     #handleKeyDown;
     #handleKeyUp;
-    #handleClick;
+    _handleClick(e) {
+        if (this.type !== 'button')
+            this[internals].form?.[this.type]();
+    }
 }
 __decorate([
     property({ reflect: true })

package/src/base/checkbox.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { FormAssociated } from './mixins/form-associated.js';
-import { InternalsAttached, internals } from './mixins/internals-attached.js';
+import { InternalsAttached, internals, replaceStates, } from './mixins/internals-attached.js';
 import { hiddenStyles } from './hidden-styles.css.js';
 const PROPERTY_FROM_ARIA_CHECKED = {
     true: 'checked',
@@ -63,9 +63,7 @@ export class Checkbox extends Base {
     updateState() {
         const prevAriaChecked = this[internals]
             .ariaChecked;
-        this[internals].states.delete('was-unchecked');
-        this[internals].states.delete('was-checked');
-        this[internals].states.delete('was-indeterminate');
+        this[replaceStates](['was-unchecked', 'was-checked', 'was-indeterminate'], []);
         if (prevAriaChecked && PROPERTY_FROM_ARIA_CHECKED[prevAriaChecked]) {
             this[internals].states.add(`was-${PROPERTY_FROM_ARIA_CHECKED[prevAriaChecked]}`);
         }
@@ -76,10 +74,7 @@ export class Checkbox extends Base {
                 : 'false';
         const currentAriaChecked = this[internals]
             .ariaChecked;
-        this[internals].states.delete('unchecked');
-        this[internals].states.delete('checked');
-        this[internals].states.delete('indeterminate');
-        this[internals].states.add(`${PROPERTY_FROM_ARIA_CHECKED[currentAriaChecked]}`);
+        this[replaceStates](['unchecked', 'checked', 'indeterminate'], [PROPERTY_FROM_ARIA_CHECKED[currentAriaChecked]]);
         this.tabIndex = this.disabled ? -1 : 0;
         this[internals].ariaDisabled = String(this.disabled);
         this[internals].setFormValue(this.checked ? 'on' : null);

package/src/base/controllers/popover-controller.js

@@ -134,7 +134,7 @@ export class PopoverController {
         this.cleanupAutoUpdate?.();
         this.cleanupAutoUpdate = undefined;
     }
-    reposition() {
+    async reposition() {
         const trigger = this.config.trigger();
         const popover = this.config.popover();
         if (!trigger || !popover)

package/src/base/experimental/popup-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const popupStyles = css`:host([notransition]){transition:none!important}:host{box-sizing:border-box;border:none;margin:0;padding:0;position:absolute;inset:auto;overflow:auto}`;

package/src/base/experimental/popup.d.ts

@@ -0,0 +1,38 @@
+/**
+ * NOTE: demos at dev/pending.html
+ * NOTE: should apply writing style on event listeners to other files
+ * TODO: consider removing popoverController, but in case of tooltip, reserve
+ *       for now
+ * TODO: hijack all `hidePopover()`s to allow more complex JS animations
+ * TODO: simpler Menu that just inherits List - do we really need a separated
+ *       Menu? Why not just `<md-list role="presentation">`?
+ *
+ * Design: TO BE ADDED
+ */
+import { LitElement, PropertyValues } from 'lit';
+import { Placement, Strategy } from '@floating-ui/dom';
+export declare function lookForTabbable(root: Node): HTMLElement | null;
+declare const Popup_base: Constructor<import("../mixins/attachable.js").AttachableInterface> & Constructor<import("../mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+export declare class Popup extends Popup_base {
+    #private;
+    open: boolean;
+    noFocusControl: boolean;
+    placement: Placement;
+    strategy: Strategy;
+    offset: number;
+    windowPadding: number;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    handleControlChange(prev: HTMLElement | null, next: HTMLElement | null): void;
+    toggle(): Promise<void>;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    _show(): Promise<void>;
+    _hide(): Promise<void>;
+    _cleanup(): void;
+}
+export {};

package/src/base/experimental/popup.js

@@ -0,0 +1,276 @@
+/**
+ * NOTE: demos at dev/pending.html
+ * NOTE: should apply writing style on event listeners to other files
+ * TODO: consider removing popoverController, but in case of tooltip, reserve
+ *       for now
+ * TODO: hijack all `hidePopover()`s to allow more complex JS animations
+ * TODO: simpler Menu that just inherits List - do we really need a separated
+ *       Menu? Why not just `<md-list role="presentation">`?
+ *
+ * Design: TO BE ADDED
+ */
+import { __decorate } from "tslib";
+import { LitElement, html, isServer } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { autoUpdate, computePosition, arrow, flip, offset, shift, } from '@floating-ui/dom';
+import { InternalsAttached } from '../mixins/internals-attached.js';
+import { Attachable } from '../mixins/attachable.js';
+import { transformOriginFromArrow } from '../controllers/popover-controller.js';
+import { popupStyles } from './popup-styles.css.js';
+// Returns the first tabbable element within an eleent
+//
+// TODO: reverse search?
+export function lookForTabbable(root) {
+    const FOCUSABLE_SELECTOR = [
+        'a[href]',
+        'button',
+        'input',
+        'textarea',
+        'select',
+        'summary',
+        '[tabindex]',
+        '[contenteditable=true]',
+    ].join(',');
+    const isTabbable = (el) => el.matches(FOCUSABLE_SELECTOR) &&
+        !el.hasAttribute('disabled') &&
+        el.getAttribute('tabindex') !== '-1';
+    if ('shadowRoot' in root && root.shadowRoot) {
+        const shadowResult = lookForTabbable(root.shadowRoot);
+        if (shadowResult)
+            return shadowResult;
+    }
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (node) => {
+            const el = node;
+            return isTabbable(el) || el.shadowRoot
+                ? NodeFilter.FILTER_ACCEPT
+                : NodeFilter.FILTER_SKIP;
+        },
+    });
+    let currentNode = walker.nextNode();
+    while (currentNode) {
+        if (isTabbable(currentNode)) {
+            return currentNode;
+        }
+        if (currentNode.shadowRoot) {
+            const shadowFocusable = lookForTabbable(currentNode.shadowRoot);
+            if (shadowFocusable) {
+                return shadowFocusable;
+            }
+        }
+        currentNode = walker.nextNode();
+    }
+    return null;
+}
+let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
+    static { this.styles = [popupStyles]; }
+    render() {
+        return html `<slot></slot>`;
+    }
+    constructor() {
+        super();
+        this.open = false;
+        this.noFocusControl = false;
+        this.placement = 'bottom-start';
+        this.strategy = 'absolute';
+        this.offset = 0;
+        this.windowPadding = 8;
+        this.#onRequestHide = () => {
+            this.hide();
+        };
+        // #allowHidePopover = false;
+        // #onBeforeToggle = (e: ToggleEvent) => {
+        //   // Intercept browser light-dismiss (ESC, click outside) or external hidePopover() calls
+        //   if (e.newState === 'closed' && !this.#allowHidePopover) {
+        //     e.preventDefault();
+        //     if (this.open) {
+        //       this.hide();
+        //     }
+        //   }
+        // };
+        this.#onToggle = (e) => {
+            e.preventDefault();
+            if (e.newState === 'closed' && this.open)
+                this.hide();
+        };
+        this.#onFocusOut = (e) => {
+            // for `this` and `this.$control`
+            if (this.noFocusControl || !this.open)
+                return;
+            const target = e.relatedTarget;
+            if (target && (this.contains(target) || this.$control?.contains(target))) {
+                return;
+            }
+            if (target) {
+                this.hide();
+                return;
+            }
+            requestAnimationFrame(() => {
+                if (!document.hasFocus())
+                    this.hide();
+            });
+        };
+        this.#onTriggerClick = (e) => {
+            e.preventDefault();
+            this.toggle();
+        };
+        this.#dummyArrow = isServer ? null : document.createElement('div');
+        if (!this.hasAttribute('popover'))
+            this.setAttribute('popover', 'auto');
+        if (!isServer) {
+            this.addEventListener('request-popup-hide', this.#onRequestHide);
+            // this.addEventListener('beforetoggle', this.#onBeforeToggle);
+            this.addEventListener('toggle', this.#onToggle);
+            this.addEventListener('focusout', this.#onFocusOut);
+        }
+        this.setAttribute('notransition', '');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        requestAnimationFrame(() => requestAnimationFrame(() => this.removeAttribute('notransition')));
+    }
+    disconnectedCallback() {
+        this._cleanup();
+        super.disconnectedCallback();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('open')) {
+            if (this.open)
+                this._show();
+            else
+                this._hide();
+            this.#syncTriggerAria();
+        }
+    }
+    handleControlChange(prev, next) {
+        if (prev) {
+            prev.removeEventListener('click', this.#onTriggerClick);
+            prev.removeEventListener('focusout', this.#onFocusOut);
+        }
+        if (next) {
+            next.addEventListener('click', this.#onTriggerClick);
+            next.addEventListener('focusout', this.#onFocusOut);
+            next.ariaHasPopup = 'true';
+            next.ariaExpanded = String(this.open);
+            next.ariaControlsElements = [this];
+        }
+    }
+    #onRequestHide;
+    // #allowHidePopover = false;
+    // #onBeforeToggle = (e: ToggleEvent) => {
+    //   // Intercept browser light-dismiss (ESC, click outside) or external hidePopover() calls
+    //   if (e.newState === 'closed' && !this.#allowHidePopover) {
+    //     e.preventDefault();
+    //     if (this.open) {
+    //       this.hide();
+    //     }
+    //   }
+    // };
+    #onToggle;
+    #onFocusOut;
+    #onTriggerClick;
+    #syncTriggerAria() {
+        this.$control?.setAttribute('aria-expanded', String(this.open));
+    }
+    #focusFirstInteractiveElement() {
+        if (this.noFocusControl)
+            return;
+        const autoFocusEl = this.querySelector('[autofocus]');
+        if (autoFocusEl) {
+            autoFocusEl.focus();
+            return;
+        }
+        const firstFocusable = lookForTabbable(this);
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
+    }
+    async toggle() {
+        this.open = !this.open;
+    }
+    async show() {
+        this.open = true;
+    }
+    async hide() {
+        this.open = false;
+    }
+    async _show() {
+        if (this.isConnected && !this.matches(':popover-open'))
+            this.showPopover();
+        const trigger = this.$control;
+        if (trigger) {
+            this._cleanup();
+            this.#cleanupAutoUpdate = autoUpdate(trigger, this, () => this.#reposition());
+            await this.#reposition();
+        }
+        // await this._showing();
+        requestAnimationFrame(() => {
+            if (this.open)
+                this.#focusFirstInteractiveElement();
+        });
+    }
+    async _hide() {
+        // await this._hiding();
+        this._cleanup();
+        if (this.matches(':popover-open'))
+            this.hidePopover();
+        // if (this.matches(':popover-open')) {
+        //   this.#allowHidePopover = true;
+        //   try {
+        //     this.hidePopover();
+        //   } finally {
+        //     this.#allowHidePopover = false;
+        //   }
+        // }
+    }
+    // async _showing(): Promise<void> {}
+    // async _hiding(): Promise<void> {}
+    #cleanupAutoUpdate;
+    #dummyArrow;
+    async #reposition() {
+        const trigger = this.$control;
+        if (!trigger)
+            return;
+        const { x, y, placement, middlewareData } = await computePosition(trigger, this, {
+            placement: this.placement,
+            strategy: this.strategy,
+            middleware: [
+                offset(this.offset),
+                flip({ padding: this.windowPadding }),
+                shift({ padding: this.windowPadding, crossAxis: true }),
+                arrow({ element: this.#dummyArrow }),
+            ],
+        });
+        Object.assign(this.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+            transformOrigin: transformOriginFromArrow(placement, middlewareData.arrow),
+        });
+    }
+    _cleanup() {
+        this.#cleanupAutoUpdate?.();
+        this.#cleanupAutoUpdate = undefined;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Popup.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-focus-control' })
+], Popup.prototype, "noFocusControl", void 0);
+__decorate([
+    property({ type: String })
+], Popup.prototype, "placement", void 0);
+__decorate([
+    property({ type: String })
+], Popup.prototype, "strategy", void 0);
+__decorate([
+    property({ type: Number })
+], Popup.prototype, "offset", void 0);
+__decorate([
+    property({ type: Number })
+], Popup.prototype, "windowPadding", void 0);
+Popup = __decorate([
+    customElement('complementary-popup')
+], Popup);
+export { Popup };

package/src/base/mixins/button-toggle-mixin.d.ts

@@ -0,0 +1,7 @@
+import { Button } from '../button.js';
+export declare class ToggleableInterface {
+    checked: boolean;
+    _ignoreClick: boolean;
+    _toggle(): void;
+}
+export declare const ButtonToggleMixin: <T extends Constructor<Button>>(superClass: T) => Constructor<ToggleableInterface> & T;

package/src/base/mixins/button-toggle-mixin.js

@@ -0,0 +1,102 @@
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+import { internals, replaceStates } from './internals-attached.js';
+import { updateInternals } from '../button.js';
+const PROPERTY_FROM_ARIA_PRESSED = {
+    true: 'checked',
+    false: 'unchecked',
+};
+export const ButtonToggleMixin = (superClass) => {
+    class ButtonToggle extends superClass {
+        constructor(...args) {
+            super();
+            this.checked = false;
+            /**
+             * --> Drag-and-drop to the other side
+             *
+             * `checked` is supposed to be changed once
+             *
+             * 1. `pointerdown`: _ignoreClick = false
+             * 2. `pointermove`: _ignoreClick = true
+             * 3. `pointerup`: `checked` changed
+             * 4. `click`: ignored, _ignoreClick = false
+             *
+             * --> Drag-and-drop to the other side, then click
+             *
+             * `checked` is supposed to be changed twice
+             *
+             * 1. `pointerdown`: _ignoreClick = false
+             * 2. `pointermove`: _ignoreClick = true
+             * 3. `pointerup`: `checked` changed(1)
+             * 4. `click`: ignored, _ignoreClick = false
+             * 5. `click`: `checked` changed(2)
+             *
+             * --> Drag-and-drop to the other side, then click the label
+             *
+             * `checked` is supposed to be changed twice
+             *
+             * 1. `pointerdown`: _ignoreClick = false
+             * 2. `pointermove`: _ignoreClick = true
+             * 3. `pointerup`: `checked` changed(1)
+             * 4. `click` on label: _ignoreClick = false
+             * 5. `click` on switch: `checked` changed(2)
+             */
+            this._ignoreClick = false;
+            this.checked = this.hasAttribute('checked');
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.labels.forEach((label) => {
+                label.addEventListener('click', this.#handleLabelClick);
+            });
+        }
+        disconnectedCallback() {
+            this.labels.forEach((label) => {
+                label.removeEventListener('click', this.#handleLabelClick);
+            });
+            super.disconnectedCallback();
+        }
+        updated(changed) {
+            if (changed.has('checked'))
+                this[updateInternals]();
+        }
+        [updateInternals]() {
+            super[updateInternals]();
+            this[internals].ariaPressed = this.checked ? 'true' : 'false';
+            this[replaceStates](['unchecked', 'checked'], [PROPERTY_FROM_ARIA_PRESSED[this[internals].ariaPressed]]);
+            this[internals].setFormValue(this.checked ? 'on' : null);
+        }
+        #handleLabelClick() {
+            this._ignoreClick = false;
+        }
+        _handleClick(e) {
+            e.stopPropagation();
+            e.preventDefault();
+            if (this._ignoreClick) {
+                this._ignoreClick = false;
+                return;
+            }
+            this._toggle();
+        }
+        _toggle() {
+            if (this.disabled)
+                return;
+            this.checked = !this.checked;
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: this.checked,
+            }));
+        }
+        formResetCallback() {
+            this.checked = this.hasAttribute('checked');
+        }
+        formStateRestoreCallback(state, _reason) {
+            this.checked = state === 'on';
+        }
+    }
+    __decorate([
+        property({ type: Boolean })
+    ], ButtonToggle.prototype, "checked", void 0);
+    return ButtonToggle;
+};

package/src/base/mixins/internals-attached.d.ts

@@ -1,6 +1,8 @@
 import { LitElement } from 'lit';
 export declare const internals: unique symbol;
+export declare const replaceStates: unique symbol;
 export declare class InternalsAttachedInterface {
     [internals]: ElementInternals;
+    [replaceStates](del: Array<string>, add: Array<string>): void;
 }
 export declare const InternalsAttached: <T extends Constructor<LitElement>>(superClass: T) => Constructor<InternalsAttachedInterface> & T;