@vollowx/seele 0.14.3 → 0.14.4

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

@@ -0,0 +1,53 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Anchor } from '../../base/anchor.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+import { targetStyles } from '../target-styles.css.js';
+import { iconButtonStyles } from './icon-button-styles.css.js';
+import { sharedButtonLinkStyles } from './shared-button-link-styles.css.js';
+import { sharedButtonStyles } from './shared-button-styles.css.js';
+/**
+ * @tag md-icon-button-link
+ *
+ * @csspart anchor
+ * @csspart icon
+ *
+ * @slot - icon
+ */
+let M3IconButtonLink = class M3IconButtonLink extends Anchor {
+    constructor() {
+        super(...arguments);
+        this.size = 's';
+        this.color = 'primary';
+        this.variant = 'text';
+        this.width = 'standard';
+    }
+    static { this.styles = [
+        ...super.styles,
+        targetStyles,
+        sharedButtonStyles,
+        sharedButtonLinkStyles,
+        iconButtonStyles,
+    ]; }
+    render() {
+        return this._renderAnchor(html `<md-focus-ring></md-focus-ring><md-ripple></md-ripple><span part="target"></span><slot part="icon"></slot>`);
+    }
+};
+__decorate([
+    property({ reflect: true })
+], M3IconButtonLink.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], M3IconButtonLink.prototype, "color", void 0);
+__decorate([
+    property({ reflect: true })
+], M3IconButtonLink.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], M3IconButtonLink.prototype, "width", void 0);
+M3IconButtonLink = __decorate([
+    customElement('md-icon-button-link')
+], M3IconButtonLink);
+export { M3IconButtonLink };

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

@@ -12,7 +12,7 @@ declare const M3IconButtonToggle_base: Constructor<import("../../base/mixins/but
  */
 export declare class M3IconButtonToggle extends M3IconButtonToggle_base {
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -14,7 +14,7 @@ export declare class M3IconButton extends Button {
     variant: 'text' | 'filled' | 'tonal' | 'outlined';
     width: 'standard' | 'narrow' | 'wide';
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const sharedButtonLinkStyles = css`@layer main{a{all:inherit;justify-content:center;display:inline-flex}}@layer override{:host{display:contents}}`;

package/src/m3/button-group/connected-button-group.d.ts

@@ -10,7 +10,7 @@ export declare class M3ConnectedButtonGroup extends LitElement {
     multiple: boolean;
     $buttons: Array<ToggleButton>;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/button-group/standard-button-group.d.ts

@@ -1,4 +1,8 @@
 import { LitElement } from 'lit';
+declare const shapeAnimation: unique symbol;
+type ShapeAnimatedElement = HTMLElement & {
+    [shapeAnimation]?: Animation;
+};
 /**
  * @tag md-button-group
  *
@@ -7,9 +11,9 @@ import { LitElement } from 'lit';
 export declare class M3StandardButtonGroup extends LitElement {
     #private;
     size: 'xs' | 's' | '';
-    $buttons: Array<HTMLElement>;
+    $buttons: Array<ShapeAnimatedElement>;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     constructor();
     connectedCallback(): void;
     firstUpdated(): Promise<void>;
@@ -24,3 +28,4 @@ declare global {
         'md-button-group': M3StandardButtonGroup;
     }
 }
+export {};

package/src/m3/button-group/standard-button-group.js

@@ -97,7 +97,9 @@ let M3StandardButtonGroup = class M3StandardButtonGroup extends LitElement {
      * Passing no element resets all shape changes
      */
     updateLayout(target = null) {
-        const pressedIndex = target ? this.$buttons.indexOf(target) : -1;
+        const pressedIndex = target
+            ? this.$buttons.indexOf(target)
+            : -1;
         this.#activeIndex = pressedIndex;
         const pressedBaseWidth = pressedIndex !== -1 ? this.#baseWidths[pressedIndex] : 0;
         const isPressedAtEdge = pressedIndex === 0 || pressedIndex === this.$buttons.length - 1;

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}@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}}`;
+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);margin:calc((40px - var(--_checkbox-size)) / 2);-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;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

@@ -12,10 +12,10 @@ import type { M3Ripple } from '../ripple/ripple.js';
  */
 export declare class M3Checkbox extends Checkbox {
     error: boolean;
-    $ripple: M3Ripple;
+    $ripple: M3Ripple | null;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
-    renderIcon(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    renderIcon(): import("lit").TemplateResult<1>;
     firstUpdated(): void;
 }
 declare global {

package/src/m3/dialog/dialog.d.ts

@@ -1,9 +1,18 @@
 import { Dialog } from '../../base/dialog.js';
+type AnimationPart = 'container' | 'effects' | 'scrim' | 'body' | 'actions';
+type AnimationRecipe = {
+    keyframes: Keyframe[];
+    options: KeyframeAnimationOptions;
+};
+type DialogAnimations = {
+    open: Partial<Record<AnimationPart, AnimationRecipe>>;
+    close: Partial<Record<AnimationPart, AnimationRecipe>>;
+};
+export declare const getFadeAnimations: (host: M3Dialog) => DialogAnimations;
+export declare const getDefaultAnimations: (host: M3Dialog) => DialogAnimations;
 /**
  * TODO: test if form actions `cancel` and other things related work - no,
  *       event listener needed
- * FIXME: on Firefox, the focus is not autoatically set to the first tabbable
- *        element
  *
  * @tag md-dialog
  *
@@ -19,25 +28,17 @@ import { Dialog } from '../../base/dialog.js';
  */
 export declare class M3Dialog extends Dialog {
     #private;
-    _config: {
-        openEase: string;
-        closeEase: string;
-        vertSlide: number;
-        openDur: number;
-        closeDur: number;
-        bodyFadeInDur: number;
-        bodyFadeOutDur: number;
-    };
     private hasIcon;
-    $container: HTMLDivElement;
-    $body: HTMLDivElement;
-    $icon: HTMLSlotElement;
-    $actions: HTMLDivElement;
-    $actionsPlaceholder: HTMLDivElement;
-    $scrim: HTMLDivElement;
+    $container: HTMLDivElement | null;
+    $body: HTMLDivElement | null;
+    $icon: HTMLSlotElement | null;
+    $actions: HTMLDivElement | null;
+    $actionsPlaceholder: HTMLDivElement | null;
+    $scrim: HTMLDivElement | null;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     firstUpdated(): Promise<void>;
+    _fullHeight: number;
     show(): Promise<void>;
     close(): Promise<void>;
 }
@@ -46,3 +47,4 @@ declare global {
         'md-dialog': M3Dialog;
     }
 }
+export {};

package/src/m3/dialog/dialog.js

@@ -3,12 +3,111 @@ import { html } from 'lit';
 import { query, state, customElement } from 'lit/decorators.js';
 import { ensureSlottedReady } from '../../core/ensure-ready.js';
 import { Dialog } from '../../base/dialog.js';
+import { getSpring } from '../styles/motion.js';
 import { dialogStyles } from './dialog-styles.css.js';
+// Was based on https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration#e5b958f0-435d-4e84-aed4-8d1ea395fa5c
+// TODO: use curves and durations from motion physics
+const options = {
+    openEase: 'cubic-bezier(0, 0, 0, 1)',
+    closeEase: 'cubic-bezier(0.3, 0, 1, 1)',
+    vertSlide: 40,
+    openDur: 500,
+    closeDur: 200,
+    bodyFadeInDur: 200,
+    bodyFadeOutDur: 100,
+};
+const opacity = (from, to, options) => ({
+    keyframes: [{ opacity: from }, { opacity: to }],
+    options,
+});
+export const getFadeAnimations = (host) => {
+    const effectsFast = getSpring(host, 'effects', 'fast');
+    const fade = (from, to) => opacity(from, to, { ...effectsFast, fill: 'forwards' });
+    const container = getComputedStyle(host.$container), scrim = getComputedStyle(host.$scrim);
+    return {
+        open: {
+            container: fade('0', '1'),
+            scrim: fade('0', '0.32'),
+        },
+        close: {
+            container: fade(container.opacity, '0'),
+            scrim: fade(scrim.opacity, '0'),
+        },
+    };
+};
+export const getDefaultAnimations = (host) => {
+    const container = getComputedStyle(host.$container), scrim = getComputedStyle(host.$scrim), body = getComputedStyle(host.$body), actions = getComputedStyle(host.$actions);
+    return {
+        open: {
+            container: {
+                keyframes: [
+                    {
+                        height: '0px',
+                        minHeight: '0px',
+                        transform: `translateY(-${options.vertSlide}px)`,
+                    },
+                    {
+                        height: `${host._fullHeight}px`,
+                        minHeight: '0px',
+                        transform: 'translateY(0px)',
+                    },
+                ],
+                options: { duration: options.openDur, easing: options.openEase },
+            },
+            scrim: opacity('0', '0.32', {
+                duration: options.openDur,
+                easing: options.openEase,
+                fill: 'forwards',
+            }),
+            body: opacity('0.2', '1', {
+                duration: options.bodyFadeInDur,
+                fill: 'forwards',
+            }),
+            actions: opacity('0.5', '1', {
+                duration: options.bodyFadeInDur,
+                fill: 'forwards',
+            }),
+        },
+        close: {
+            container: {
+                keyframes: [
+                    {
+                        height: container.height,
+                        minHeight: '0px',
+                        transform: container.transform,
+                    },
+                    {
+                        height: `${host._fullHeight * 0.35}px`,
+                        minHeight: '0px',
+                        transform: `translateY(-${options.vertSlide}px)`,
+                    },
+                ],
+                options: { duration: options.closeDur, easing: options.closeEase },
+            },
+            effects: opacity(container.opacity, '0', {
+                duration: options.closeDur - options.bodyFadeOutDur,
+                delay: options.bodyFadeOutDur,
+                fill: 'forwards',
+            }),
+            scrim: opacity(scrim.opacity, '0', {
+                duration: options.closeDur,
+                easing: options.closeEase,
+                fill: 'forwards',
+            }),
+            body: opacity(body.opacity, '0', {
+                duration: options.bodyFadeOutDur,
+                fill: 'forwards',
+            }),
+            actions: opacity(actions.opacity, '0', {
+                duration: options.bodyFadeOutDur,
+                fill: 'forwards',
+            }),
+        },
+    };
+};
 /**
  * TODO: test if form actions `cancel` and other things related work - no,
  *       event listener needed
- * FIXME: on Firefox, the focus is not autoatically set to the first tabbable
- *        element
  *
  * @tag md-dialog
  *
@@ -25,19 +124,9 @@ import { dialogStyles } from './dialog-styles.css.js';
 let M3Dialog = class M3Dialog extends Dialog {
     constructor() {
         super(...arguments);
-        // Was based on https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration#e5b958f0-435d-4e84-aed4-8d1ea395fa5c
-        // TODO: use curves and durations from motion physics
-        this._config = {
-            openEase: 'cubic-bezier(0, 0, 0, 1)',
-            closeEase: 'cubic-bezier(0.3, 0, 1, 1)',
-            vertSlide: 40,
-            openDur: 500,
-            closeDur: 200,
-            bodyFadeInDur: 200,
-            bodyFadeOutDur: 100,
-        };
         this.hasIcon = false;
         this.#activeAnimations = [];
+        this._fullHeight = 0;
         this.#handleClick = (e) => {
             const target = e.target;
             if (!this.$container.contains(target) && !this.contains(target))
@@ -63,103 +152,64 @@ let M3Dialog = class M3Dialog extends Dialog {
         this.#activeAnimations = [];
         this.#opening = this.#closing = false;
     }
+    #animate(recipes) {
+        const targets = {
+            container: this.$container,
+            effects: this.$container,
+            scrim: this.$scrim,
+            body: this.$body,
+            actions: this.$actions,
+        };
+        const animations = {};
+        for (const [name, recipe] of Object.entries(recipes)) {
+            animations[name] = targets[name].animate(recipe.keyframes, recipe.options);
+            this.#activeAnimations.push(animations[name]);
+        }
+        return animations;
+    }
+    get #fade() {
+        return (window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
+            getComputedStyle(this)
+                .getPropertyValue('--md-dialog-animation')
+                .trim() === 'fade');
+    }
     #handleClick;
     #handleIconSlotChange;
     #opening;
     async show() {
         if (this.#opening)
             return;
+        await this.updateComplete;
         this.#clearAnimations();
         this.#opening = true;
         // Reset margins to allow browser centering
         this.$dialog.style.marginTop = 'auto';
         this.$dialog.style.marginBottom = 'auto';
-        super.show();
+        await super.show();
         const actionsHeight = this.$actions.offsetHeight;
         this.$actionsPlaceholder.style.height = `${actionsHeight}px`;
         this.$container.style.height = 'auto';
-        const startHeight = 0;
-        const endHeight = this.$container.offsetHeight;
+        this._fullHeight = this.$container.offsetHeight;
         // Lock the position to prevent auto-centering during animation
         const rect = this.$container.getBoundingClientRect();
         this.$dialog.style.marginTop = `${rect.top}px`;
         this.$dialog.style.marginBottom = 'auto';
-        this.$container.style.minHeight = '0px';
-        const container = this.$container.animate([
-            {
-                height: `${startHeight}px`,
-                transform: `translateY(-${this._config.vertSlide}px)`,
-            },
-            {
-                height: `${endHeight}px`,
-                transform: 'translateY(0px)',
-            },
-        ], { duration: this._config.openDur, easing: this._config.openEase });
-        const scrim = this.$scrim.animate([{ opacity: 0 }, { opacity: 0.32 }], {
-            duration: this._config.openDur,
-            easing: this._config.openEase,
-            fill: 'forwards',
-        });
-        const body = this.$body.animate([{ opacity: 0.2 }, { opacity: 1 }], {
-            duration: this._config.bodyFadeInDur,
-            easing: 'linear',
-            fill: 'forwards',
-        });
-        const actions = this.$actions.animate([{ opacity: 0.5 }, { opacity: 1 }], {
-            duration: this._config.bodyFadeInDur,
-            easing: 'linear',
-            fill: 'forwards',
-        });
-        this.#activeAnimations.push(container, scrim, body, actions);
-        container.onfinish = () => {
-            this.$container.style.minHeight = '';
-            this.#clearAnimations();
-        };
+        const getAnimations = this.#fade ? getFadeAnimations : getDefaultAnimations;
+        const animations = this.#animate(getAnimations(this).open);
+        animations.container.onfinish = () => this.#clearAnimations();
     }
     #closing;
     async close() {
         if (this.#closing)
             return;
+        await this.updateComplete;
+        const getAnimations = this.#fade ? getFadeAnimations : getDefaultAnimations;
+        const recipes = getAnimations(this).close;
         this.#clearAnimations();
         this.#closing = true;
-        const startHeight = this.$container.offsetHeight;
-        const endHeight = startHeight * 0.35;
-        this.$container.style.minHeight = '0px';
-        const containerSpatial = this.$container.animate([
-            { height: `${startHeight}px`, transform: 'translateY(0px)' },
-            {
-                height: `${endHeight}px`,
-                transform: `translateY(-${this._config.vertSlide}px)`,
-            },
-        ], {
-            duration: this._config.closeDur,
-            easing: this._config.closeEase,
-        });
-        const containerEffects = this.$container.animate([{ opacity: 1 }, { opacity: 0 }], {
-            duration: this._config.closeDur - this._config.bodyFadeOutDur,
-            delay: this._config.bodyFadeOutDur,
-            easing: 'linear',
-            fill: 'forwards',
-        });
-        const scrim = this.$scrim.animate([{ opacity: 0.32 }, { opacity: 0 }], {
-            duration: this._config.closeDur,
-            easing: this._config.closeEase,
-            fill: 'forwards',
-        });
-        const body = this.$body.animate([{ opacity: 1 }, { opacity: 0 }], {
-            duration: this._config.bodyFadeOutDur,
-            easing: 'linear',
-            fill: 'forwards',
-        });
-        const actions = this.$actions.animate([{ opacity: 1 }, { opacity: 0 }], {
-            duration: this._config.bodyFadeOutDur,
-            easing: 'linear',
-            fill: 'forwards',
-        });
-        this.#activeAnimations.push(containerSpatial, containerEffects, scrim, body, actions);
-        containerSpatial.onfinish = () => {
-            this.$container.style.minHeight = '';
-            super.close();
+        const animations = this.#animate(recipes);
+        animations.container.onfinish = async () => {
+            await super.close();
             this.#clearAnimations();
         };
     }

package/src/m3/fab/fab.d.ts

@@ -14,7 +14,7 @@ export declare class M3Fab extends Button {
     size: 's' | 'm' | 'l';
     color: 'surface' | 'primary-container' | 'secondary-container' | 'tertiary-container' | 'primary' | 'secondary' | 'tertiary';
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/field/field.d.ts

@@ -1,10 +1,6 @@
-import { PropertyValues, TemplateResult } from 'lit';
-import { Field } from '../../base/field.js';
-/**
- * @fires {Event} change - Fired when the selected value has changed.
- * @fires {Event} input - Fired when the selected value has changed.
- */
-export declare abstract class M3Field extends Field {
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+export declare abstract class M3Field extends LitElement {
+    #private;
     label: string;
     supportingText: string;
     disabled: boolean;
@@ -19,10 +15,9 @@ export declare abstract class M3Field extends Field {
     /**
      * Should be implemented by subclasses.
      */
-    protected abstract renderContainerContent(): TemplateResult;
-    protected renderSupportingText(): "" | TemplateResult<1>;
-    protected renderStart(): TemplateResult<1>;
-    protected renderEnd(): TemplateResult<1>;
+    abstract renderContainerContent(): TemplateResult;
+    renderSupportingText(): "" | TemplateResult<1>;
+    renderStart(): TemplateResult<1>;
+    renderEnd(): TemplateResult<1>;
     update(changedProperties: PropertyValues): void;
-    protected handleSlotChange(e: Event): void;
 }

package/src/m3/field/field.js

@@ -1,13 +1,8 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
+import { html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { Field } from '../../base/field.js';
 import { fieldStyles } from './field-styles.css.js';
-/**
- * @fires {Event} change - Fired when the selected value has changed.
- * @fires {Event} input - Fired when the selected value has changed.
- */
-export class M3Field extends Field {
+export class M3Field extends LitElement {
     constructor() {
         super(...arguments);
         this.label = '';
@@ -31,10 +26,10 @@ export class M3Field extends Field {
         return html `<div class="supporting-text">${this.supportingText}</div>`;
     }
     renderStart() {
-        return html `<slot name="start" class="start" ?hidden="${!this.hasStart}" @slotchange="${this.handleSlotChange}"></slot>`;
+        return html `<slot name="start" class="start" ?hidden="${!this.hasStart}" @slotchange="${this.#handleSlotChange}"></slot>`;
     }
     renderEnd() {
-        return html `<slot name="end" class="end" ?hidden="${!this.hasEnd}" @slotchange="${this.handleSlotChange}"></slot>`;
+        return html `<slot name="end" class="end" ?hidden="${!this.hasEnd}" @slotchange="${this.#handleSlotChange}"></slot>`;
     }
     update(changedProperties) {
         if (changedProperties.has('label')) {
@@ -42,7 +37,7 @@ export class M3Field extends Field {
         }
         super.update(changedProperties);
     }
-    handleSlotChange(e) {
+    #handleSlotChange(e) {
         const slot = e.target;
         const hasContent = slot.assignedNodes({ flatten: true }).length > 0;
         if (slot.name === 'start')

package/src/m3/field/filled-field.d.ts

@@ -2,7 +2,7 @@ import { M3Field } from './field.js';
 import '../ripple/ripple.js';
 export declare class M3FilledField extends M3Field {
     static styles: any[];
-    protected renderContainerContent(): import("lit-html").TemplateResult<1>;
+    renderContainerContent(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/field/outlined-field.d.ts

@@ -1,8 +1,8 @@
 import { M3Field } from './field.js';
 export declare class M3OutlinedField extends M3Field {
     static styles: any[];
-    protected renderContainerContent(): import("lit-html").TemplateResult<1>;
-    protected renderOutline(): import("lit-html").TemplateResult<1>;
+    renderContainerContent(): import("lit").TemplateResult<1>;
+    renderOutline(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -53,8 +53,9 @@ let M3FocusRing = class M3FocusRing extends Attachable(InternalsAttached(LitElem
             pointerdown: this.#handlePointerDown,
         };
         Object.keys(eventHandlers).forEach((eventName) => {
-            prev?.removeEventListener(eventName, eventHandlers[eventName]);
-            next?.addEventListener(eventName, eventHandlers[eventName]);
+            const handler = eventHandlers[eventName];
+            prev?.removeEventListener(eventName, handler);
+            next?.addEventListener(eventName, handler);
         });
     }
 };

package/src/m3/item/item.d.ts

@@ -1,4 +1,4 @@
-import { Item } from '../../base/item.js';
+import { LitElement } from 'lit';
 /**
  * @tag md-item
  *
@@ -19,10 +19,10 @@ import { Item } from '../../base/item.js';
  * @slot trailing-supporting-text - trailing supporting text
  * @slot end - end content
  */
-export declare class M3Item extends Item {
+export declare class M3Item extends LitElement {
     multiline: boolean;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/item/item.js

@@ -1,7 +1,6 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { Item } from '../../base/item.js';
 import { itemStyles } from './item-styles.css.js';
 /**
  * @tag md-item
@@ -23,7 +22,7 @@ import { itemStyles } from './item-styles.css.js';
  * @slot trailing-supporting-text - trailing supporting text
  * @slot end - end content
  */
-let M3Item = class M3Item extends Item {
+let M3Item = class M3Item extends LitElement {
     constructor() {
         super(...arguments);
         this.multiline = false;

package/src/m3/list/list-item.d.ts

@@ -10,10 +10,10 @@ import type { M3FocusRing } from '../focus-ring/focus-ring.js';
  * @slot - contents in md-item
  */
 export declare class M3ListItem extends ListItem {
-    $ripple: M3Ripple;
-    $focusRing: M3FocusRing;
+    $ripple: M3Ripple | null;
+    $focusRing: M3FocusRing | null;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     constructor();
     protected updated(changed: Map<string, any>): void;
 }