@vollowx/seele 0.13.6 → 0.13.8

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;

package/src/base/mixins/internals-attached.js

@@ -1,5 +1,6 @@
 export const internals = Symbol('internals');
 const privateInternals = Symbol('privateInternals');
+export const replaceStates = Symbol('replaceStates');
 export const InternalsAttached = (superClass) => {
     class InternalsAttachedElement extends superClass {
         get [internals]() {
@@ -8,6 +9,10 @@ export const InternalsAttached = (superClass) => {
             }
             return this[privateInternals];
         }
+        [replaceStates](del, add) {
+            del.forEach((state) => this[internals].states.delete(state));
+            add.forEach((state) => this[internals].states.add(state));
+        }
     }
     return InternalsAttachedElement;
 };

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

@@ -1,47 +1,8 @@
-import { LitElement } from 'lit';
-declare const Base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
-export declare class ToggleButton extends Base {
-    #private;
-    static styles: any[];
-    checked: boolean;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changed: Map<string, any>): void;
-    protected _updateInternals(): void;
-    /**
-     * --> 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)
-     */
-    protected _ignoreClick: boolean;
-    protected toggleChecked(): void;
-    formResetCallback(): void;
-    formStateRestoreCallback(state: string, _reason: string): void;
+import { Button } from './button.js';
+declare const ToggleButton_base: Constructor<import("./mixins/button-toggle-mixin.js").ToggleableInterface> & typeof Button;
+/**
+ * @deprecated compose the mixins yourself instead
+ */
+export declare class ToggleButton extends ToggleButton_base {
 }
 export {};

package/src/base/toggle-button.js

@@ -1,136 +1,7 @@
-import { __decorate } from "tslib";
-import { LitElement } from 'lit';
-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';
-const PROPERTY_FROM_ARIA_PRESSED = {
-    true: 'checked',
-    false: 'unchecked',
-};
-const Base = FormAssociated(InternalsAttached(LitElement));
-export class ToggleButton extends Base {
-    static { this.styles = [hiddenStyles]; }
-    constructor() {
-        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.#handleLabelClick = () => {
-            this._ignoreClick = false;
-        };
-        this.#handleClick = (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            if (this._ignoreClick) {
-                this._ignoreClick = false;
-                return;
-            }
-            this.toggleChecked();
-        };
-        this.#handleKeyDown = (e) => {
-            if (e.key !== ' ' && e.key !== 'Enter')
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            if (e.key === 'Enter')
-                this.toggleChecked();
-        };
-        this.#handleKeyUp = (e) => {
-            if (e.key === ' ') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.toggleChecked();
-            }
-        };
-        this[internals].role = 'button';
-        this.checked = this.hasAttribute('checked');
-        this._updateInternals();
-        this.setAttribute('notransition', '');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this.#handleClick);
-        this.addEventListener('keydown', this.#handleKeyDown);
-        this.addEventListener('keyup', this.#handleKeyUp);
-        this.labels.forEach((label) => {
-            label.addEventListener('click', this.#handleLabelClick);
-        });
-        requestAnimationFrame(() => requestAnimationFrame(() => this.removeAttribute('notransition')));
-    }
-    disconnectedCallback() {
-        this.removeEventListener('click', this.#handleClick);
-        this.removeEventListener('keydown', this.#handleKeyDown);
-        this.removeEventListener('keyup', this.#handleKeyUp);
-        this.labels.forEach((label) => {
-            label.removeEventListener('click', this.#handleLabelClick);
-        });
-        super.disconnectedCallback();
-    }
-    updated(changed) {
-        if (changed.has('checked') || changed.has('disabled')) {
-            this._updateInternals();
-        }
-    }
-    _updateInternals() {
-        this[internals].states.delete('unchecked');
-        this[internals].states.delete('checked');
-        this[internals].ariaPressed = this.checked ? 'true' : 'false';
-        this[internals].states.add(`${PROPERTY_FROM_ARIA_PRESSED[this[internals].ariaPressed]}`);
-        this.setAttribute('tabindex', this.disabled ? '-1' : '0');
-        this[internals].ariaDisabled = this.disabled ? 'true' : 'false';
-        this[internals].setFormValue(this.checked ? 'on' : null);
-    }
-    #handleLabelClick;
-    #handleClick;
-    #handleKeyDown;
-    #handleKeyUp;
-    toggleChecked() {
-        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';
-    }
+import { Button } from './button.js';
+import { ButtonToggleMixin } from './mixins/button-toggle-mixin.js';
+/**
+ * @deprecated compose the mixins yourself instead
+ */
+export class ToggleButton extends ButtonToggleMixin(Button) {
 }
-__decorate([
-    property({ type: Boolean })
-], ToggleButton.prototype, "checked", void 0);

package/src/core/ensure-ready.d.ts

@@ -0,0 +1 @@
+export declare function ensureReady(element: HTMLElement): Promise<HTMLElement>;

package/src/core/ensure-ready.js

@@ -0,0 +1,15 @@
+export async function ensureReady(element) {
+    if (!element)
+        return null;
+    if (element.matches(':not(:defined)'))
+        await customElements.whenDefined(element.tagName.toLowerCase());
+    // Handles Lit update
+    if ('updateComplete' in element) {
+        await element.updateComplete;
+    }
+    else {
+        // Yield to the next frame to allow initial render to finish
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+    }
+    return element;
+}

package/src/m3/autocomplete/autocomplete.d.ts

@@ -1,4 +1,5 @@
 import { Autocomplete } from '../../base/autocomplete.js';
+import '../menu/menu.js';
 /**
  * TODO: Check if manually dispatching input/change events on input is necessary
  */

package/src/m3/autocomplete/autocomplete.js

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { Autocomplete } from '../../base/autocomplete.js';
+import '../menu/menu.js';
 import { autocompleteStyles } from './autocomplete-styles.css.js';
 /**
  * TODO: Check if manually dispatching input/change events on input is necessary

package/src/m3/badge/badge.d.ts

@@ -4,6 +4,7 @@ export declare class M3Badge extends LitElement {
     value: number;
     max: number;
     showZero: boolean;
+    small: boolean;
     left: boolean;
     bottom: boolean;
     $badge: HTMLSpanElement;

package/src/m3/badge/badge.js

@@ -7,6 +7,7 @@ let M3Badge = class M3Badge extends LitElement {
     constructor() {
         super(...arguments);
         this.showZero = false;
+        this.small = false;
         this.left = false;
         this.bottom = false;
     }
@@ -32,6 +33,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'show-zero' })
 ], M3Badge.prototype, "showZero", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Badge.prototype, "small", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Badge.prototype, "left", void 0);

package/src/m3/button/common-button-toggle.d.ts

@@ -1,6 +1,7 @@
-import { ToggleButton } from '../../base/toggle-button.js';
 import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
+import { M3Button } from './common-button.js';
+declare const M3ButtonToggle_base: Constructor<import("../../base/mixins/button-toggle-mixin.js").ToggleableInterface> & typeof M3Button;
 /**
  * @tag md-button-toggle
  *
@@ -12,15 +13,7 @@ import '../ripple/ripple.js';
  * @slot - label
  * @slot icon - leading icon
  */
-export declare class M3ButtonToggle extends ToggleButton {
-    size: 'xs' | 's' | 'm' | 'l' | 'xl';
-    square: boolean;
-    color: 'primary' | 'secondary' | 'tertiary';
-    variant: 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';
-    /**
-     * Whether to show the icon at the end of the button.
-     */
-    trailingIcon: boolean;
+export declare class M3ButtonToggle extends M3ButtonToggle_base {
     static styles: any[];
     render(): import("lit-html").TemplateResult<1>;
 }
@@ -29,3 +22,4 @@ declare global {
         'md-button-toggle': M3ButtonToggle;
     }
 }
+export {};

package/src/m3/button/common-button-toggle.js

@@ -1,13 +1,11 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { ToggleButton } from '../../base/toggle-button.js';
 import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
-import { targetStyles } from '../target-styles.css.js';
-import { sharedButtonStyles } from './shared-button-styles.css.js';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { M3Button } from './common-button.js';
+import { ButtonToggleMixin } from '../../base/mixins/button-toggle-mixin.js';
 import { sharedButtonToggleStyles } from './shared-button-toggle-styles.css.js';
-import { commonButtonStyles } from './common-button-styles.css.js';
 /**
  * @tag md-button-toggle
  *
@@ -19,44 +17,12 @@ import { commonButtonStyles } from './common-button-styles.css.js';
  * @slot - label
  * @slot icon - leading icon
  */
-let M3ButtonToggle = class M3ButtonToggle extends ToggleButton {
-    constructor() {
-        super(...arguments);
-        this.size = 's';
-        this.square = false;
-        this.color = 'primary';
-        this.variant = 'filled';
-        /**
-         * Whether to show the icon at the end of the button.
-         */
-        this.trailingIcon = false;
-    }
-    static { this.styles = [
-        ...super.styles,
-        targetStyles,
-        sharedButtonStyles,
-        sharedButtonToggleStyles,
-        commonButtonStyles,
-    ]; }
+let M3ButtonToggle = class M3ButtonToggle extends ButtonToggleMixin(M3Button) {
+    static { this.styles = [...super.styles, sharedButtonToggleStyles]; }
     render() {
         return html `<md-focus-ring></md-focus-ring><md-ripple></md-ripple><span part="target"></span><slot part="icon unchecked" name="icon" aria-hidden="true"></slot><slot part="icon checked" name="icon-checked" aria-hidden="true"></slot><slot part="label unchecked"></slot><slot part="label checked" name="checked"></slot>`;
     }
 };
-__decorate([
-    property({ reflect: true })
-], M3ButtonToggle.prototype, "size", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], M3ButtonToggle.prototype, "square", void 0);
-__decorate([
-    property({ reflect: true })
-], M3ButtonToggle.prototype, "color", void 0);
-__decorate([
-    property({ reflect: true })
-], M3ButtonToggle.prototype, "variant", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })
-], M3ButtonToggle.prototype, "trailingIcon", void 0);
 M3ButtonToggle = __decorate([
     customElement('md-button-toggle')
 ], M3ButtonToggle);

package/src/m3/button/icon-button-toggle.d.ts

@@ -1,6 +1,7 @@
-import { ToggleButton } from '../../base/toggle-button.js';
 import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
+import { M3IconButton } from './icon-button.js';
+declare const M3IconButtonToggle_base: Constructor<import("../../base/mixins/button-toggle-mixin.js").ToggleableInterface> & typeof M3IconButton;
 /**
  * @tag md-icon-button-toggle
  *
@@ -9,16 +10,13 @@ import '../ripple/ripple.js';
  * @slot - icon
  * @slot checked - icon when checked
  */
-export declare class M3IconButtonToggle extends ToggleButton {
+export declare class M3IconButtonToggle extends M3IconButtonToggle_base {
     static styles: any[];
     render(): import("lit-html").TemplateResult<1>;
-    size: 'xs' | 's' | 'm' | 'l' | 'xl';
-    color: 'primary' | 'secondary' | 'tertiary';
-    variant: 'text' | 'filled' | 'tonal' | 'outlined';
-    width: 'standard' | 'narrow' | 'wide';
 }
 declare global {
     interface HTMLElementTagNameMap {
         'md-icon-button-toggle': M3IconButtonToggle;
     }
 }
+export {};

package/src/m3/button/icon-button-toggle.js

@@ -1,13 +1,11 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { ToggleButton } from '../../base/toggle-button.js';
 import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
-import { targetStyles } from '../target-styles.css.js';
-import { sharedButtonStyles } from './shared-button-styles.css.js';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { M3IconButton } from './icon-button.js';
+import { ButtonToggleMixin } from '../../base/mixins/button-toggle-mixin.js';
 import { sharedButtonToggleStyles } from './shared-button-toggle-styles.css.js';
-import { iconButtonStyles } from './icon-button-styles.css.js';
 /**
  * @tag md-icon-button-toggle
  *
@@ -16,37 +14,12 @@ import { iconButtonStyles } from './icon-button-styles.css.js';
  * @slot - icon
  * @slot checked - icon when checked
  */
-let M3IconButtonToggle = class M3IconButtonToggle extends ToggleButton {
-    constructor() {
-        super(...arguments);
-        this.size = 's';
-        this.color = 'primary';
-        this.variant = 'text';
-        this.width = 'standard';
-    }
-    static { this.styles = [
-        ...super.styles,
-        targetStyles,
-        sharedButtonStyles,
-        sharedButtonToggleStyles,
-        iconButtonStyles,
-    ]; }
+let M3IconButtonToggle = class M3IconButtonToggle extends ButtonToggleMixin(M3IconButton) {
+    static { this.styles = [...super.styles, sharedButtonToggleStyles]; }
     render() {
         return html `<md-focus-ring></md-focus-ring><md-ripple enterbehavior="always"></md-ripple><span part="target"></span><slot part="icon unchecked"></slot><slot part="icon checked" name="checked"></slot>`;
     }
 };
-__decorate([
-    property({ reflect: true })
-], M3IconButtonToggle.prototype, "size", void 0);
-__decorate([
-    property({ reflect: true })
-], M3IconButtonToggle.prototype, "color", void 0);
-__decorate([
-    property({ reflect: true })
-], M3IconButtonToggle.prototype, "variant", void 0);
-__decorate([
-    property({ reflect: true })
-], M3IconButtonToggle.prototype, "width", void 0);
 M3IconButtonToggle = __decorate([
     customElement('md-icon-button-toggle')
 ], M3IconButtonToggle);

package/src/m3/button/shared-button-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const sharedButtonStyles = css`@layer common-button,icon-button;@layer shared{:host{--_on-color:var(--md-sys-color-on-primary);--_color:var(--md-sys-color-primary);--_h:40px;--_icon-size:20px;--_rs:12px;--_rp:8px;--_text-color:var(--_on-color);--_background-color:var(--_color);box-sizing:border-box;cursor:pointer;height:var(--_h);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;vertical-align:top;border-start-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));border-start-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));outline:0;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}:host([notransition]){transition:none!important}md-ripple,md-focus-ring{position:absolute}:host([size=xs]){--_h:32px}:host([size=m]){--_h:56px;--_icon-size:24px;--_rs:16px;--_rp:12px}:host([size=l]){--_h:96px;--_icon-size:32px;--_rs:28px;--_rp:16px}:host([size=xl]){--_h:136px;--_icon-size:40px;--_rs:28px;--_rp:16px}:host([color=secondary]){--_on-color:var(--md-sys-color-on-secondary);--_color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_on-color:var(--md-sys-color-on-tertiary);--_color:var(--md-sys-color-tertiary)}:host([variant=tonal]){--_background-color:var(--md-sys-color-secondary-container);--_text-color:var(--md-sys-color-on-secondary-container)}:host([variant=outlined]){--_background-color:transparent;--_text-color:var(--md-sys-color-on-surface-variant);--md-focus-ring-offset:3px;border-color:color-mix(in srgb, var(--md-sys-color-outline-variant) 100%, transparent);border-style:solid;border-width:1px}:host([variant=text]){--_text-color:var(--_color);--_background-color:transparent!important}:host([square]){--md-focus-ring-shape:var(--_rs);border-radius:var(--_rs)}}@layer shared-toggle,override;@layer active{:host(:active){--md-focus-ring-shape:var(--_rp);border-radius:var(--_rp)}}@layer disabled{:host([variant=outlined]:disabled){--_background-color:var(--md-sys-color-outline)}:host(:disabled),:host([variant=outlined]:state(checked):disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:10%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;border-color:color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);box-shadow:none;pointer-events:none}}`;
+export const sharedButtonStyles = css`@layer common-button,icon-button;@layer shared{:host{--_on-color:var(--md-sys-color-on-primary);--_color:var(--md-sys-color-primary);--_h:40px;--_icon-size:20px;--_rs:12px;--_rp:8px;--_text-color:var(--_on-color);--_background-color:var(--_color);box-sizing:border-box;cursor:pointer;height:var(--_h);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;vertical-align:top;border-start-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));border-start-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));outline:0;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}:host([notransition]){transition:none!important}md-ripple,md-focus-ring{position:absolute}:host([size=xs]){--_h:32px}:host([size=m]){--_h:56px;--_icon-size:24px;--_rs:16px;--_rp:12px}:host([size=l]){--_h:96px;--_icon-size:32px;--_rs:28px;--_rp:16px}:host([size=xl]){--_h:136px;--_icon-size:40px;--_rs:28px;--_rp:16px}:host([color=secondary]){--_on-color:var(--md-sys-color-on-secondary);--_color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_on-color:var(--md-sys-color-on-tertiary);--_color:var(--md-sys-color-tertiary)}:host([variant=tonal]){--_background-color:var(--md-sys-color-secondary-container);--_text-color:var(--md-sys-color-on-secondary-container)}:host([variant=outlined]){--_background-color:transparent;--_text-color:var(--md-sys-color-on-surface-variant);--md-focus-ring-offset:3px;border-color:color-mix(in srgb, var(--md-sys-color-outline-variant) 100%, transparent);border-style:solid;border-width:1px}:host([variant=text]){--_text-color:var(--_color);--_background-color:transparent!important}:host([square]){--md-focus-ring-shape:var(--_rs);border-radius:var(--_rs)}@media (forced-colors:active){:host{forced-color-adjust:none;color:buttontext;background:buttonface;border:1px solid buttonborder}}}@layer shared-toggle,override;@layer active{:host(:active),:host(:state(active)){--md-focus-ring-shape:var(--_rp);border-radius:var(--_rp)}}@layer disabled{:host([variant=outlined]:disabled){--_background-color:var(--md-sys-color-outline)}:host(:disabled),:host([variant=outlined]:state(checked):disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:10%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;border-color:color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);box-shadow:none;pointer-events:none}@media (forced-colors:active){:host(:disabled){color:graytext;border-color:graytext}}}`;

package/src/m3/button/shared-button-toggle-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const sharedButtonToggleStyles = css`@layer shared-toggle{:host{transition:border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast)}:host(:state(checked)){--md-focus-ring-shape:var(--_rs);border-radius:var(--_rs)}:host(:state(checked)) [part~=unchecked],:host(:not(:state(checked))) [part~=checked]{display:none}:host([variant=filled]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=tonal]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container-highest);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=outlined]:state(checked)){--_background-color:var(--md-sys-color-inverse-surface);--_text-color:var(--md-sys-color-inverse-on-surface);border-width:0}}`;
+export const sharedButtonToggleStyles = css`@layer shared-toggle{:host{transition:border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast)}:host(:state(checked)){--md-focus-ring-shape:var(--_rs);border-radius:var(--_rs)}:host(:state(checked)) [part~=unchecked],:host(:not(:state(checked))) [part~=checked]{display:none}:host([variant=filled]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=tonal]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container-highest);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=outlined]:state(checked)){--_background-color:var(--md-sys-color-inverse-surface);--_text-color:var(--md-sys-color-inverse-on-surface);border-width:0}@media (forced-colors:active){:host(:state(checked)){color:highlighttext;background:highlight}}}`;

package/src/m3/checkbox/checkbox-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const checkboxStyles = css`:host{--md-focus-ring-radius:9999px;--_container-color:transparent;--_outline-color:var(--md-sys-color-on-surface-variant);--_mark-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);--_checkbox-size:18px;background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);border-color:color-mix(in srgb, var(--_outline-color) var(--_outline-opacity,100%), transparent);border-style:solid;border-width:var(--md-checkbox-outline-width,2px);box-sizing:border-box;cursor:pointer;height:var(--_checkbox-size);-webkit-tap-highlight-color:transparent;transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), border-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);-webkit-user-select:none;user-select:none;vertical-align:top;width:var(--_checkbox-size);border-radius:2px;outline:0;place-content:center;place-items:center;margin:15px;display:inline-grid;position:relative}:host(:state(checked)),:host(:state(indeterminate)){--_container-color:var(--md-sys-color-primary);--_outline-color:var(--md-sys-color-primary);--_mark-color:var(--md-sys-color-on-primary);--_mark-opacity:100%;--_ripple-color:var(--md-sys-color-primary)}:host([error]){--_outline-color:var(--md-sys-color-error);--_mark-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-error)}:host([error]:state(checked)),:host([error]:state(indeterminate)){--_container-color:var(--md-sys-color-error);--_outline-color:var(--md-sys-color-error);--_mark-color:var(--md-sys-color-on-error);--_ripple-color:var(--md-sys-color-error)}:host(:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:38%;--_mark-color:var(--md-sys-color-surface-container-highest);cursor:default;pointer-events:none}:host(:disabled:state(checked)),:host(:disabled:state(indeterminate)){--_container-color:var(--md-sys-color-on-surface);--_container-opacity:38%;--_outline-color:var(--md-sys-color-surface);--_outline-opacity:0%;--_mark-color:var(--md-sys-color-surface)}@media (hover:hover) and (pointer:fine){:host(:hover){--_unchecked-outline-color:var(--md-sys-color-on-surface)}}@media (forced-colors:active){:host{forced-color-adjust:none}}:host(:disabled){--_unchecked-container-opacity:38%}[part~=icon]{fill:color-mix(in srgb, var(--_mark-color) var(--_mark-opacity,0%), transparent);height:18px;transition:fill var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);width:18px;position:absolute;inset:-2px}[part~=mark]{transition-duration:var(--md-sys-motion-effects-default-duration);transition-timing-function:var(--md-sys-motion-effects-default);transform:scaleY(-1)translate(7px,-14px)rotate(45deg)}:host(:state(indeterminate)) [part~=mark]{transform:scaleY(-1)translate(4px,-10px)rotate(0)}:host(:state(checked)) [part~=mark],:host(:state(indeterminate)) [part~=mark]{transition-duration:var(--md-sys-motion-effects-default-duration);transition-timing-function:var(--md-sys-motion-effects-default)}[part~=mark-short]{width:2px;height:0;transition-property:transform,height}[part~=mark-long]{width:0;height:2px;transition-property:transform,width}:host(:not(:state(checked)):not(:state(indeterminate)):state(was-checked)) [part~=mark],:host(:not(:state(checked)):not(:state(indeterminate)):state(was-indeterminate)) [part~=mark]{transition-delay:var(--md-sys-motion-effects-fast-duration)}:host(:state(checked)) [part~=mark-short]{height:5.65685px}:host(:state(checked)) [part~=mark-long]{width:11.3137px}:host(:state(checked):state(was-unchecked)) [part~=mark-short]{transition-property:none}:host(:state(indeterminate)) [part~=mark-short]{height:2px}:host(:state(indeterminate)) [part~=mark-long]{width:10px}:host(:state(indeterminate):state(was-unchecked)) [part~=mark-short]{transition-property:height}:host(:state(indeterminate):state(was-unchecked)) [part~=mark-long]{transition-property:width}md-focus-ring{height:44px;inset:unset;width:44px}md-ripple{--md-ripple-color:var(--_ripple-color);height:40px;inset:unset;border-radius:9999px;width:40px}`;
+export const checkboxStyles = css`:host{--md-focus-ring-radius:9999px;--_container-color:transparent;--_outline-color:var(--md-sys-color-on-surface-variant);--_mark-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);--_checkbox-size:18px;background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);border-color:color-mix(in srgb, var(--_outline-color) var(--_outline-opacity,100%), transparent);border-style:solid;border-width:var(--md-checkbox-outline-width,2px);box-sizing:border-box;cursor:pointer;height:var(--_checkbox-size);-webkit-tap-highlight-color:transparent;transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), border-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);-webkit-user-select:none;user-select:none;vertical-align:top;width:var(--_checkbox-size);border-radius:2px;outline:0;place-content:center;place-items:center;margin:15px;display:inline-grid;position:relative}:host(:state(checked)),:host(:state(indeterminate)){--_container-color:var(--md-sys-color-primary);--_outline-color:var(--md-sys-color-primary);--_mark-color:var(--md-sys-color-on-primary);--_mark-opacity:100%;--_ripple-color:var(--md-sys-color-primary)}:host([error]){--_outline-color:var(--md-sys-color-error);--_mark-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-error)}:host([error]:state(checked)),:host([error]:state(indeterminate)){--_container-color:var(--md-sys-color-error);--_outline-color:var(--md-sys-color-error);--_mark-color:var(--md-sys-color-on-error);--_ripple-color:var(--md-sys-color-error)}:host(:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:38%;--_mark-color:var(--md-sys-color-surface-container-highest);cursor:default;pointer-events:none}:host(:disabled:state(checked)),:host(:disabled:state(indeterminate)){--_container-color:var(--md-sys-color-on-surface);--_container-opacity:38%;--_outline-color:var(--md-sys-color-surface);--_outline-opacity:0%;--_mark-color:var(--md-sys-color-surface)}@media (hover:hover) and (pointer:fine){:host(:hover){--_unchecked-outline-color:var(--md-sys-color-on-surface)}}@media (forced-colors:active){:host{forced-color-adjust:none}}:host(:disabled){--_unchecked-container-opacity:38%}[part~=icon]{fill:color-mix(in srgb, var(--_mark-color) var(--_mark-opacity,0%), transparent);height:18px;transition:fill var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);width:18px;position:absolute;inset:-2px}[part~=mark]{transition-duration:var(--md-sys-motion-effects-default-duration);transition-timing-function:var(--md-sys-motion-effects-default);transform:scaleY(-1)translate(7px,-14px)rotate(45deg)}:host(:state(indeterminate)) [part~=mark]{transform:scaleY(-1)translate(4px,-10px)rotate(0)}:host(:state(checked)) [part~=mark],:host(:state(indeterminate)) [part~=mark]{transition-duration:var(--md-sys-motion-effects-default-duration);transition-timing-function:var(--md-sys-motion-effects-default)}[part~=mark-short]{width:2px;height:0;transition-property:transform,height}[part~=mark-long]{width:0;height:2px;transition-property:transform,width}:host(:not(:state(checked)):not(:state(indeterminate)):state(was-checked)) [part~=mark],:host(:not(:state(checked)):not(:state(indeterminate)):state(was-indeterminate)) [part~=mark]{transition-delay:var(--md-sys-motion-effects-fast-duration)}:host(:state(checked)) [part~=mark-short]{height:5.65685px}:host(:state(checked)) [part~=mark-long]{width:11.3137px}:host(:state(checked):state(was-unchecked)) [part~=mark-short]{transition-property:none}:host(:state(indeterminate)) [part~=mark-short]{height:2px}:host(:state(indeterminate)) [part~=mark-long]{width:10px}:host(:state(indeterminate):state(was-unchecked)) [part~=mark-short]{transition-property:height}:host(:state(indeterminate):state(was-unchecked)) [part~=mark-long]{transition-property:width}md-focus-ring{height:44px;inset:unset;width:44px}md-ripple{--md-ripple-color:var(--_ripple-color);height:40px;inset:unset;border-radius:9999px;width:40px}@media (forced-colors:active){:host{--_outline-color:CanvasText;--_ripple-color:CanvasText}:host(:is(:state(checked),:state(indeterminate))){--md-sys-color-primary:SelectedItem;--_mark-color:SelectedItemText}}`;

package/src/m3/checkbox/checkbox.d.ts

@@ -1,7 +1,7 @@
 import { Checkbox } from '../../base/checkbox.js';
 import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
-import { M3Ripple } from '../ripple/ripple.js';
+import type { M3Ripple } from '../ripple/ripple.js';
 /**
  * @tag md-checkbox
  *

package/src/m3/dialog/dialog-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const dialogStyles = css`dialog{background:0 0;border:none;outline:0;min-width:280px;max-width:min(560px,100% - 48px);min-height:140px;max-height:min(560px,100% - 48px);padding:0;overflow:visible}dialog[open]{display:flex}dialog::backdrop{background:0 0}[part=container]{box-sizing:border-box;will-change:height, transform, opacity;background-color:var(--md-sys-color-surface-container-high);border-radius:28px;flex-direction:column;flex-grow:1;padding-top:8px;display:flex;position:relative;overflow:hidden}[part=headline]{flex-direction:column;display:flex}::slotted([slot=icon]){block-size:1em;color:var(--md-sys-color-secondary);fill:currentColor;inline-size:1em;margin:16px 0 0;font-size:24px}::slotted([slot=headline]){box-sizing:border-box;font:var(--md-sys-typography-headline-small);color:var(--md-sys-color-on-surface);margin:0;padding:16px 24px 0}[part=headline].has-icon{align-items:center}[part=content]{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typography-body-medium);will-change:opacity;padding:16px 24px 0;display:block}[part=actions]{justify-content:flex-end;gap:8px;display:flex;position:absolute;bottom:0;left:0;right:0}slot[name=actions]::slotted(*){box-sizing:border-box;justify-content:flex-end;gap:8px;padding:24px;display:flex}[part=scrim]{background:var(--md-sys-color-scrim);opacity:.32;pointer-events:none;z-index:1;display:none;position:fixed;inset:0}dialog[open]+[part=scrim]{display:block}`;
+export const dialogStyles = css`dialog{background:0 0;border:none;outline:0;min-width:280px;max-width:min(560px,100% - 48px);min-height:140px;max-height:min(560px,100% - 48px);padding:0;overflow:visible}dialog[open]{display:flex}dialog::backdrop{background:0 0}[part=container]{box-sizing:border-box;will-change:height, transform, opacity;background-color:var(--md-sys-color-surface-container-high);border-radius:28px;flex-direction:column;flex-grow:1;padding-top:8px;display:flex;position:relative;overflow:hidden}[part=headline]{flex-direction:column;display:flex}::slotted([slot=icon]){block-size:1em;color:var(--md-sys-color-secondary);fill:currentColor;inline-size:1em;margin:16px 0 0;font-size:24px}::slotted([slot=headline]){box-sizing:border-box;font:var(--md-sys-typography-headline-small);color:var(--md-sys-color-on-surface);margin:0;padding:16px 24px 0}[part=headline].has-icon{align-items:center}[part=content]{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typography-body-medium);will-change:opacity;padding:16px 24px 0;display:block}[part=actions]{justify-content:flex-end;gap:8px;display:flex;position:absolute;bottom:0;left:0;right:0}slot[name=actions]::slotted(*){box-sizing:border-box;justify-content:flex-end;gap:8px;padding:24px;display:flex}[part=scrim]{background:var(--md-sys-color-scrim);opacity:.32;pointer-events:none;z-index:1;display:none;position:fixed;inset:0}dialog[open]+[part=scrim]{display:block}@media (forced-colors:active){[part=container]{outline:2px solid windowtext}}`;

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const popupStyles = css`:host{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);color:var(--md-sys-color-on-surface);opacity:0;transition:opacity var(--md-sys-motion-effects-fast-duration), transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), display var(--md-sys-motion-spatial-default-duration) allow-discrete, overlay var(--md-sys-motion-spatial-default-duration) allow-discrete;border-radius:16px;transform:scaleY(.35)}slot{opacity:0;transition:opacity 67ms}:host(:popover-open){opacity:1;transition:opacity 67ms linear, transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);transform:scaleY(1);& slot{opacity:1;transition:opacity 67ms linear 67ms}}@starting-style{:host(:popover-open){opacity:0;transform:scaleY(.35);& slot{opacity:0}}}`;

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

@@ -0,0 +1,9 @@
+import { Popup } from '../../base/experimental/popup.js';
+export declare class M3Popup extends Popup {
+    static styles: any[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-popup': M3Popup;
+    }
+}