@vollowx/seele 0.13.7 → 0.13.8

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/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/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;
+    }
+}

package/src/m3/experimental/popup.js

@@ -0,0 +1,11 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Popup } from '../../base/experimental/popup.js';
+import { popupStyles } from './popup-styles.css.js';
+let M3Popup = class M3Popup extends Popup {
+    static { this.styles = [...super.styles, popupStyles]; }
+};
+M3Popup = __decorate([
+    customElement('md-popup')
+], M3Popup);
+export { M3Popup };

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const fabStyles = css`:host{--md-focus-ring-shape:var(--_border-radius);--_text-color:var(--md-sys-color-on-primary);--_background-color:var(--md-sys-color-primary);--_size:56px;--_border-radius:16px;--_icon-size:24px;background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);border-radius:var(--_border-radius);box-shadow:var(--md-sys-elevation-shadow-3);box-sizing:border-box;color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);cursor:pointer;font:var(--md-sys-typography-label-large);height:var(--_size);min-width:var(--_size);padding-inline:calc((var(--_size) - var(--_icon-size)) / 2);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);-webkit-user-select:none;user-select:none;vertical-align:middle;outline:0;justify-content:center;align-items:center;gap:8px;display:inline-flex;position:relative}md-ripple,md-focus-ring{position:absolute}:host([size=m]){--_size:80px;--_border-radius:20px;--_icon-size:28px}:host([size=l]){--_size:96px;--_border-radius:28px;--_icon-size:36px}:host([color=primary-container]){--_text-color:var(--md-sys-color-on-primary-container);--_background-color:var(--md-sys-color-primary-container)}:host([color=secondary-container]){--_text-color:var(--md-sys-color-on-secondary-container);--_background-color:var(--md-sys-color-secondary-container)}:host([color=tertiary-container]){--_text-color:var(--md-sys-color-on-tertiary-container);--_background-color:var(--md-sys-color-tertiary-container)}:host([color=secondary]){--_text-color:var(--md-sys-color-on-secondary);--_background-color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_text-color:var(--md-sys-color-on-tertiary);--_background-color:var(--md-sys-color-tertiary)}:host([color=surface]){--_text-color:var(--md-sys-color-primary);--_background-color:var(--md-sys-color-surface-container-high)}:host(:disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:12%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;box-shadow:none;pointer-events:none}@media (hover:hover) and (pointer:fine){:host(:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-4)}}::slotted(:not([slot=label])){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}::slotted([slot=label]){margin-inline:4px}`;
+export const fabStyles = css`:host{--md-focus-ring-shape:var(--_border-radius);--_text-color:var(--md-sys-color-on-primary);--_background-color:var(--md-sys-color-primary);--_size:56px;--_border-radius:16px;--_icon-size:24px;background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);border-radius:var(--_border-radius);box-shadow:var(--md-sys-elevation-shadow-3);box-sizing:border-box;color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);cursor:pointer;font:var(--md-sys-typography-label-large);height:var(--_size);min-width:var(--_size);padding-inline:calc((var(--_size) - var(--_icon-size)) / 2);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);-webkit-user-select:none;user-select:none;vertical-align:middle;outline:0;justify-content:center;align-items:center;gap:8px;display:inline-flex;position:relative}md-ripple,md-focus-ring{position:absolute}:host([size=m]){--_size:80px;--_border-radius:20px;--_icon-size:28px}:host([size=l]){--_size:96px;--_border-radius:28px;--_icon-size:36px}:host([color=primary-container]){--_text-color:var(--md-sys-color-on-primary-container);--_background-color:var(--md-sys-color-primary-container)}:host([color=secondary-container]){--_text-color:var(--md-sys-color-on-secondary-container);--_background-color:var(--md-sys-color-secondary-container)}:host([color=tertiary-container]){--_text-color:var(--md-sys-color-on-tertiary-container);--_background-color:var(--md-sys-color-tertiary-container)}:host([color=secondary]){--_text-color:var(--md-sys-color-on-secondary);--_background-color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_text-color:var(--md-sys-color-on-tertiary);--_background-color:var(--md-sys-color-tertiary)}:host([color=surface]){--_text-color:var(--md-sys-color-primary);--_background-color:var(--md-sys-color-surface-container-high)}:host(:disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:12%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;box-shadow:none;pointer-events:none}@media (hover:hover) and (pointer:fine){:host(:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-4)}}::slotted(:not([slot=label])){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}::slotted([slot=label]){margin-inline:4px}@media (forced-colors:active){:host{forced-color-adjust:none;color:buttontext;background:buttonface;border:1px solid buttonborder}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const fieldStyles = css`:host{--_min-height:56px;--_padding-top:16px;--_padding-bottom:16px;cursor:text;-webkit-user-select:none;user-select:none;vertical-align:top;flex-direction:column;display:inline-flex;position:relative}.container{box-sizing:border-box;min-height:var(--_min-height);flex:1;align-items:center;display:flex;position:relative}:host([disabled]){opacity:.38;pointer-events:none}.start,.end{color:var(--md-sys-color-on-surface-variant);justify-content:center;align-items:center;min-width:48px;display:flex}.start[hidden],.end[hidden]{display:none}.middle{flex-direction:column;flex:1;justify-content:center;height:100%;display:flex;position:relative;overflow:hidden}.label{font:var(--md-sys-typography-body-large);pointer-events:none;text-overflow:ellipsis;transform-origin:0 0;max-width:calc(100% - 24px);transition:margin-top var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), font-size var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);white-space:nowrap}.input-wrapper{padding-block:var(--_padding-top) var(--_padding-bottom);flex:1;align-items:center;display:flex}:host([haslabel]:not([focused]):not([populated])) ::slotted(input:placeholder-shown),:host([haslabel]:not([focused]):not([populated])) ::slotted(textarea:placeholder-shown){opacity:0}::slotted(*){caret-color:var(--md-sys-color-primary);font:var(--md-sys-typography-body-large)}.supporting-text{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typography-body-small);padding-inline:16px;padding-top:4px}:host([error]) ::slotted(*){caret-color:var(--md-sys-color-error)}:host([error]) .supporting-text{color:var(--md-sys-color-error)}`;
+export const fieldStyles = css`:host{--_min-height:56px;--_padding-top:16px;--_padding-bottom:16px;cursor:text;-webkit-user-select:none;user-select:none;vertical-align:top;flex-direction:column;display:inline-flex;position:relative}.container{box-sizing:border-box;min-height:var(--_min-height);flex:1;align-items:center;display:flex;position:relative}:host([disabled]){opacity:.38;pointer-events:none}.start,.end{color:var(--md-sys-color-on-surface-variant);justify-content:center;align-items:center;min-width:48px;display:flex}.start[hidden],.end[hidden]{display:none}.middle{flex-direction:column;flex:1;justify-content:center;height:100%;display:flex;position:relative;overflow:hidden}.label{font:var(--md-sys-typography-body-large);pointer-events:none;text-overflow:ellipsis;transform-origin:0 0;max-width:calc(100% - 24px);transition:margin-top var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), font-size var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);white-space:nowrap}.input-wrapper{padding-block:var(--_padding-top) var(--_padding-bottom);flex:1;align-items:center;display:flex}:host([haslabel]:not([focused]):not([populated])) ::slotted(input:placeholder-shown),:host([haslabel]:not([focused]):not([populated])) ::slotted(textarea:placeholder-shown){opacity:0}::slotted(*){caret-color:var(--md-sys-color-primary);font:var(--md-sys-typography-body-large)}.supporting-text{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typography-body-small);padding-inline:16px;padding-top:4px}:host([error]) ::slotted(*){caret-color:var(--md-sys-color-error)}:host([error]) .supporting-text{color:var(--md-sys-color-error)}@media (forced-colors:active){:host{--md-sys-color-primary:Highlight;--md-sys-color-error:VisitedText}}`;

package/src/m3/field/filled-field-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const filledFieldStyles = css`.container{--_indicator-height:1px;--_indicator-color:var(--md-sys-color-on-surface-variant);background-color:var(--md-sys-color-surface-container-highest);box-shadow:inset 0 calc(var(--_indicator-height) * -1) 0 0 var(--_indicator-color);transition:box-shadow var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);border-radius:4px 4px 0 0;padding:0 16px}:host([haslabel]){--_padding-top:24px;--_padding-bottom:8px}.label{color:var(--md-sys-color-on-surface-variant);margin-top:calc((var(--_padding-top) + var(--_padding-bottom)) / 2);position:absolute;top:0}:host([focused]) .label{color:var(--md-sys-color-primary)}:host([error]) .label{color:var(--md-sys-color-error)}:host([populated]) .label,:host([focused]) .label{margin-top:calc(var(--_padding-top) / 2 - .75em);font-size:.75em}:host([focused]) .container{--_indicator-height:3px;--_indicator-color:var(--md-sys-color-primary)}:host([error]) .container,:host([error][focused]) .container{--_indicator-color:var(--md-sys-color-error)}`;
+export const filledFieldStyles = css`.container{--_indicator-height:1px;--_indicator-color:var(--md-sys-color-on-surface-variant);background-color:var(--md-sys-color-surface-container-highest);box-shadow:inset 0 calc(var(--_indicator-height) * -1) 0 0 var(--_indicator-color);transition:box-shadow var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);border-radius:4px 4px 0 0;padding:0 16px}:host([haslabel]){--_padding-top:24px;--_padding-bottom:8px}.label{color:var(--md-sys-color-on-surface-variant);margin-top:calc((var(--_padding-top) + var(--_padding-bottom)) / 2);position:absolute;top:0}:host([focused]) .label{color:var(--md-sys-color-primary)}:host([error]) .label{color:var(--md-sys-color-error)}:host([populated]) .label,:host([focused]) .label{margin-top:calc(var(--_padding-top) / 2 - .75em);font-size:.75em}:host([focused]) .container{--_indicator-height:3px;--_indicator-color:var(--md-sys-color-primary)}:host([error]) .container,:host([error][focused]) .container{--_indicator-color:var(--md-sys-color-error)}@media (forced-colors:active){:host{--md-sys-color-primary:Highlight;outline:1px solid canvastext}:host([focused]){outline-color:highlight}}`;

package/src/m3/focus-ring/focus-ring-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const focusRingStyles = css`:host{animation-delay:0s, calc(var(--md-focus-ring-duration,.6s) * .25);animation-duration:calc(var(--md-focus-ring-duration,.6s) * .25), calc(var(--md-focus-ring-duration,.6s) * .75);box-sizing:border-box;color:var(--md-focus-ring-color,var(--md-sys-color-secondary));pointer-events:none;animation-timing-function:cubic-bezier(.2,0,0,1),cubic-bezier(.2,0,0,1);display:none;position:absolute}:host(:state(visible)){display:flex}:host(:not([inward])){box-shadow:0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:calc(-1 * var(--md-focus-ring-outward-offset,2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));animation-name:outward-grow,outward-shrink}:host([inward]){box-shadow:inset 0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:var(--md-focus-ring-inward-offset,0px);border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));animation-name:inward-grow,inward-shrink}@keyframes outward-grow{0%{box-shadow:0 0}to{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes outward-shrink{0%{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-grow{0%{box-shadow:inset 0 0}to{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-shrink{0%{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@media (prefers-reduced-motion){:host{animation:none}}`;
+export const focusRingStyles = css`:host{animation-delay:0s, calc(var(--md-focus-ring-duration,.6s) * .25);animation-duration:calc(var(--md-focus-ring-duration,.6s) * .25), calc(var(--md-focus-ring-duration,.6s) * .75);box-sizing:border-box;color:var(--md-focus-ring-color,var(--md-sys-color-secondary));pointer-events:none;animation-timing-function:cubic-bezier(.2,0,0,1),cubic-bezier(.2,0,0,1);display:none;position:absolute}:host(:state(visible)){display:flex}:host(:not([inward])){box-shadow:0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:calc(-1 * var(--md-focus-ring-outward-offset,2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));animation-name:outward-grow,outward-shrink}:host([inward]){box-shadow:inset 0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:var(--md-focus-ring-inward-offset,0px);border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));animation-name:inward-grow,inward-shrink}@keyframes outward-grow{0%{box-shadow:0 0}to{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes outward-shrink{0%{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-grow{0%{box-shadow:inset 0 0}to{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-shrink{0%{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@media (prefers-reduced-motion){:host{animation:none}}@media (forced-colors:active){:host{color:highlight}}`;

package/src/m3/list/list-item-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const listItemStyles = css`:host{--md-focus-ring-shape:12px;--md-focus-ring-inward-offset:-3px;background-color:var(--_background,transparent);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:4px;outline:0;display:flex}:host(:not([hidden]):first-of-type){border-radius:12px 12px 4px 4px}:host(:not([hidden]):last-of-type){border-radius:4px 4px 12px 12px}:host(:state(selected)){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-radius:12px}:host(:disabled){cursor:default;opacity:.3;pointer-events:none}md-item,md-item div[slot=container]{border-radius:inherit}`;
+export const listItemStyles = css`:host{--md-focus-ring-shape:12px;--md-focus-ring-inward-offset:-3px;background-color:var(--_background,transparent);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:4px;outline:0;display:flex}:host(:not([hidden]):first-of-type){border-radius:12px 12px 4px 4px}:host(:not([hidden]):last-of-type){border-radius:4px 4px 12px 12px}:host(:state(selected)){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-radius:12px}:host(:disabled){cursor:default;opacity:.3;pointer-events:none}md-item,md-item div[slot=container]{border-radius:inherit}@media (forced-colors:active){:host{forced-color-adjust:none;color:canvastext}:host(:hover),:host(:state(selected)){color:highlighttext;background:highlight}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const menuStyles = css`:host{min-width:112px;display:contents}[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:var(--md-menu-max-height,inherit);max-width:inherit;min-width:inherit;opacity:0;-webkit-user-select:none;user-select:none;z-index:1000;border-radius:16px;outline:0;padding:4px;position:absolute;inset:auto;overflow-y:auto;transform:scaleY(.35)}:host([color=vibrant]){& [part=menu]{--md-divider-color:var(--md-sys-color-tertiary);--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}& ::slotted([selected]){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary);background-color:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}}:host([alignstrategy=fixed]) [part=menu]{position:fixed}[part=items]{opacity:0;flex-direction:column;gap:2px;display:flex}:host(:state(closed)) [part=menu]{display:none}:host(:state(opening)){& [part=menu]{opacity:1;transition:opacity 67ms, transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);display:block;transform:scaleY(1)}& [part=items]{opacity:1;transition:opacity 67ms linear 67ms}}:host(:state(opened)){& [part=menu]{opacity:1;display:block;transform:scaleY(1)}& [part=items]{opacity:1}}:host(:state(closing)){& [part=menu]{opacity:0;transition:opacity var(--md-sys-motion-effects-fast-duration), transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);transform:scaleY(.35)}& [part=items]{opacity:0;transition:opacity 67ms}}::slotted(md-divider){margin-block:6px}`;
+export const menuStyles = css`:host{min-width:112px;display:contents}[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:var(--md-menu-max-height,inherit);max-width:inherit;min-width:inherit;opacity:0;-webkit-user-select:none;user-select:none;z-index:1000;border-radius:16px;outline:0;padding:4px;position:absolute;inset:auto;overflow-y:auto;transform:scaleY(.35)}:host([color=vibrant]){& [part=menu]{--md-divider-color:var(--md-sys-color-tertiary);--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}& ::slotted([selected]){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary);background-color:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}}:host([alignstrategy=fixed]) [part=menu]{position:fixed}[part=items]{opacity:0;flex-direction:column;gap:2px;display:flex}:host(:state(closed)) [part=menu]{display:none}:host(:state(opening)){& [part=menu]{opacity:1;transition:opacity 67ms, transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);display:block;transform:scaleY(1)}& [part=items]{opacity:1;transition:opacity 67ms linear 67ms}}:host(:state(opened)){& [part=menu]{opacity:1;display:block;transform:scaleY(1)}& [part=items]{opacity:1}}:host(:state(closing)){& [part=menu]{opacity:0;transition:opacity var(--md-sys-motion-effects-fast-duration), transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);transform:scaleY(.35)}& [part=items]{opacity:0;transition:opacity 67ms}}::slotted(md-divider){margin-block:6px}@media (forced-colors:active){[part=menu]{border:1px solid canvastext}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const radioStyles = css`:host{--_d:var(--md-sys-motion-effects-default-duration);--_default:var(--_d) var(--md-sys-motion-effects-default);--_slow:var(--md-sys-motion-effects-slow-duration) var(--md-sys-motion-effects-slow);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:20px;outline:0;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex;position:relative}:host:before,.middle,:host:after{content:"";box-sizing:border-box;border-radius:50%;position:absolute;animation-fill-mode:forwards!important}:host:before{z-index:1;background-color:var(--md-sys-color-on-surface-variant);width:20px;height:20px;transition:background var(--_default)}.middle{z-index:2;background-color:var(--md-sys-color-surface);width:16px;height:16px}:host:after{z-index:3;background-color:var(--md-sys-color-primary);width:10px;height:10px;transform:scale(0)}:host(:state(unchecking)) .middle{animation:uncheck-mid-2 var(--_slow) var(--_d)}:host(:state(unchecking)):after{animation:uncheck-inner-1 var(--_default), uncheck-inner-2 var(--_slow) var(--_d)}:host([checked]):before{background-color:var(--md-sys-color-primary)}:host([checked]):after{transform:scale(1)}:host(:state(checking)) .middle{animation:check-mid-1 var(--_default), check-mid-2 var(--_slow) var(--_d)}:host(:state(checking)):after{animation:check-inner-1 var(--_default), check-inner-2 var(--_slow) var(--_d)}@keyframes uncheck-mid-2{0%,to{z-index:4}0%{transform:scale(0)}to{transform:scale(1)}}@keyframes uncheck-inner-1{0%{background-color:var(--md-sys-color-primary);transform:scale(1)}to{background-color:var(--md-sys-color-on-surface-variant);transform:scale(1.6)}}@keyframes uncheck-inner-2{0%{transform:scale(1.6)}to{transform:scale(1.6)}}@keyframes check-mid-1{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes check-mid-2{0%{transform:scale(.625)}to{transform:scale(1)}}@keyframes check-inner-1{0%,to{transform:scale(0)}}@keyframes check-inner-2{0%,to{transform:scale(1)}}:host([disabled]){pointer-events:none}:host([disabled]):before,:host([disabled]):after{background:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}`;
+export const radioStyles = css`:host{--_d:var(--md-sys-motion-effects-default-duration);--_default:var(--_d) var(--md-sys-motion-effects-default);--_slow:var(--md-sys-motion-effects-slow-duration) var(--md-sys-motion-effects-slow);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:20px;outline:0;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex;position:relative}:host:before,.middle,:host:after{content:"";box-sizing:border-box;border-radius:50%;position:absolute;animation-fill-mode:forwards!important}:host:before{z-index:1;background-color:var(--md-sys-color-on-surface-variant);width:20px;height:20px;transition:background var(--_default)}.middle{z-index:2;background-color:var(--md-sys-color-surface);width:16px;height:16px}:host:after{z-index:3;background-color:var(--md-sys-color-primary);width:10px;height:10px;transform:scale(0)}:host(:state(unchecking)) .middle{animation:uncheck-mid-2 var(--_slow) var(--_d)}:host(:state(unchecking)):after{animation:uncheck-inner-1 var(--_default), uncheck-inner-2 var(--_slow) var(--_d)}:host([checked]):before{background-color:var(--md-sys-color-primary)}:host([checked]):after{transform:scale(1)}:host(:state(checking)) .middle{animation:check-mid-1 var(--_default), check-mid-2 var(--_slow) var(--_d)}:host(:state(checking)):after{animation:check-inner-1 var(--_default), check-inner-2 var(--_slow) var(--_d)}@keyframes uncheck-mid-2{0%,to{z-index:4}0%{transform:scale(0)}to{transform:scale(1)}}@keyframes uncheck-inner-1{0%{background-color:var(--md-sys-color-primary);transform:scale(1)}to{background-color:var(--md-sys-color-on-surface-variant);transform:scale(1.6)}}@keyframes uncheck-inner-2{0%{transform:scale(1.6)}to{transform:scale(1.6)}}@keyframes check-mid-1{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes check-mid-2{0%{transform:scale(.625)}to{transform:scale(1)}}@keyframes check-inner-1{0%,to{transform:scale(0)}}@keyframes check-inner-2{0%,to{transform:scale(1)}}:host([disabled]){pointer-events:none}:host([disabled]):before,:host([disabled]):after{background:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-on-surface-variant:CanvasText}:host(:disabled):before,:host(:disabled):after{background:graytext}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const rippleStyles = css`:host{border-radius:inherit;pointer-events:none;display:block;position:absolute;inset:0;overflow:hidden}[part~=ripple]{background-image:radial-gradient(closest-side, var(--md-ripple-color,currentColor) max(calc(100% - 70px), 65%), transparent 100%);position:absolute;top:0;left:0}:host:before{background-color:var(--md-ripple-color,currentColor);border-radius:inherit;content:"";opacity:0;transition:opacity 67ms linear;display:block;position:absolute;inset:0}:host(:state(hover)):before{opacity:.08}`;
+export const rippleStyles = css`:host{--_color:var(--md-ripple-color,currentColor);border-radius:inherit;pointer-events:none;display:block;position:absolute;inset:0;overflow:hidden}[part~=ripple]{background-image:radial-gradient(closest-side, var(--_color) max(calc(100% - 70px), 65%), transparent 100%);position:absolute;top:0;left:0}:host:before{background-color:var(--_color);border-radius:inherit;content:"";opacity:0;transition:opacity 67ms linear;display:block;position:absolute;inset:0}:host(:state(hover)):before{opacity:.08}@media (forced-colors:active){:host{--_color:var(--md-ripple-color,Highlight)}}`;

package/src/m3/ripple/ripple.d.ts

@@ -20,20 +20,9 @@ export declare class M3Ripple extends M3Ripple_base {
     handlePointerDown: (e: PointerEvent) => void;
     handlePointerUp: () => void;
     handleControlChange(prev?: HTMLElement | null, next?: HTMLElement | HTMLInputElement | null): void;
-    calculateRipple(e?: MouseEvent | null): {
-        startCenter: {
-            x: number;
-            y: number;
-        };
-        endCenter: {
-            x: number;
-            y: number;
-        };
-        radius: number;
-    };
     addRipple(e?: MouseEvent | null): void;
     removeRipple(ripple: HTMLSpanElement): void;
-    removeRippleAll(): void;
+    keepLastRipple(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {