@vollowx/seele 0.14.2 → 0.14.4

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

@@ -20,6 +20,7 @@ let M3Button = class M3Button extends Button {
     constructor() {
         super(...arguments);
         this.size = 's';
+        this.square = false;
         this.color = 'primary';
         this.variant = 'filled';
         /**

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

@@ -0,0 +1,24 @@
+import { Anchor } from '../../base/anchor.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+/**
+ * @tag md-icon-button-link
+ *
+ * @csspart anchor
+ * @csspart icon
+ *
+ * @slot - icon
+ */
+export declare class M3IconButtonLink extends Anchor {
+    size: 'xs' | 's' | 'm' | 'l' | 'xl';
+    color: 'primary' | 'secondary' | 'tertiary';
+    variant: 'text' | 'filled' | 'tonal' | 'outlined';
+    width: 'standard' | 'narrow' | 'wide';
+    static styles: any[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-icon-button-link': M3IconButtonLink;
+    }
+}

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-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const iconButtonStyles = css`@layer main{:host{--_wn:32px;--_ww:52px;background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);transition:border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);inline-size:var(--_h);place-items:center;display:inline-grid}:host([size=xs]){--_wn:28px;--_ww:40px}:host([size=m]){--_wn:48px;--_ww:72px}:host([size=l]){--_wn:64px;--_ww:128px}:host([size=xl]){--_wn:104px;--_ww:184px}:host([width=narrow]){inline-size:var(--_wn)}:host([width=wide]){inline-size:var(--_ww)}::slotted(*){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([size=small]){--_icon-size:24px}:host([variant=text]){--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=text]:state(checked)){--_text-color:var(--_color)}}`;
+export const iconButtonStyles = css`@layer main{:host{--_wn:32px;--_ww:52px;transition:border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);inline-size:var(--_h);place-items:center;display:inline-grid}:host([size=xs]){--_wn:28px;--_ww:40px}:host([size=m]){--_wn:48px;--_ww:72px}:host([size=l]){--_wn:64px;--_ww:128px}:host([size=xl]){--_wn:104px;--_ww:184px}:host([width=narrow]){inline-size:var(--_wn)}:host([width=wide]){inline-size:var(--_ww)}::slotted(*){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([size=small]){--_icon-size:24px}:host([variant=text]){color:var(--md-sys-color-on-surface-variant)}:host([variant=text]:state(checked)){color:var(--_color)}}`;

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/shared-button-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const sharedButtonStyles = css`@layer main;@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;block-size: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;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;& md-ripple{inset:-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}}}`;
+export const sharedButtonStyles = css`@layer main;@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;color:var(--_on-color);background-color:var(--_color);box-sizing:border-box;cursor:pointer;block-size: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;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);color:var(--md-sys-color-on-secondary-container)}:host([variant=outlined]){--md-focus-ring-offset:3px;color:var(--md-sys-color-on-surface-variant);border-color:var(--md-sys-color-outline-variant);background-color:#0000;border-style:solid;border-width:1px;& md-ripple{inset:-1px}}:host([variant=text]){color:var(--_color);background-color:#0000}: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:oklch(from var(--md-sys-color-outline) l c h / 10%)}:host(:disabled),:host([variant=outlined]:state(checked):disabled){background-color:oklch(from var(--md-sys-color-on-surface) l c h / 10%);color:oklch(from var(--md-sys-color-on-surface) l c h / 38%);border-color:oklch(from var(--md-sys-color-on-surface) l c h / 10%);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}@media (forced-colors:active){:host(:state(checked)){color:highlighttext;background:highlight}}}`;
+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);color:var(--md-sys-color-on-surface-variant)}:host([variant=tonal]:not(:state(checked))){background-color:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface-variant)}:host([variant=outlined]:state(checked)){background-color:var(--md-sys-color-inverse-surface);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/button-group/connected-button-group-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const connectedButtonGroupStyles = css`:host{gap:2px;display:inline-flex}::slotted(*){flex:1}::slotted(:not(:first-child)[size=xs]){--_inner-left-radius:4px}::slotted(:not(:last-child)[size=xs]){--_inner-right-radius:4px}::slotted(:not(:first-child)){--_inner-left-radius:8px}::slotted(:not(:last-child)){--_inner-right-radius:8px}::slotted(:not(:first-child)[size=l]){--_inner-left-radius:16px}::slotted(:not(:last-child)[size=l]){--_inner-right-radius:16px}::slotted(:not(:first-child)[size=xl]){--_inner-left-radius:20px}::slotted(:not(:last-child)[size=xl]){--_inner-right-radius:20px}::slotted(:first-child:state(checked):not(:active,[square])){border-start-start-radius:calc(var(--_h) / 2);border-end-start-radius:calc(var(--_h) / 2)}::slotted(:last-child:state(checked):not(:active,[square])){border-start-end-radius:calc(var(--_h) / 2);border-end-end-radius:calc(var(--_h) / 2)}`;
+export const connectedButtonGroupStyles = css`:host{gap:2px;display:inline-flex}::slotted(*){flex:1}::slotted(:not(:first-child)[size=xs]){--_inner-left-radius:4px}::slotted(:not(:last-child)[size=xs]){--_inner-right-radius:4px}::slotted(:not(:first-child)){--_inner-left-radius:8px}::slotted(:not(:last-child)){--_inner-right-radius:8px}::slotted(:not(:first-child)[size=l]){--_inner-left-radius:16px}::slotted(:not(:last-child)[size=l]){--_inner-right-radius:16px}::slotted(:not(:first-child)[size=xl]){--_inner-left-radius:20px}::slotted(:not(:last-child)[size=xl]){--_inner-right-radius:20px}::slotted(:first-child:not([square])){border-start-start-radius:calc(var(--_h) / 2);border-end-start-radius:calc(var(--_h) / 2)}::slotted(:last-child:not([square])){border-start-end-radius:calc(var(--_h) / 2);border-end-end-radius:calc(var(--_h) / 2)}`;

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-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}@media (forced-colors:active){:host{forced-color-adjust:none;color:buttontext;background:buttonface;border:1px solid buttonborder}}`;
+export const fabStyles = css`:host{--md-focus-ring-shape:var(--_border-radius);--_size:56px;--_border-radius:16px;--_icon-size:24px;background-color:var(--md-sys-color-primary);border-radius:var(--_border-radius);box-shadow:var(--md-sys-elevation-shadow-3);box-sizing:border-box;color:var(--md-sys-color-on-primary);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]){color:var(--md-sys-color-on-primary-container);background-color:var(--md-sys-color-primary-container)}:host([color=secondary-container]){color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-secondary-container)}:host([color=tertiary-container]){color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container)}:host([color=secondary]){color:var(--md-sys-color-on-secondary);background-color:var(--md-sys-color-secondary)}:host([color=tertiary]){color:var(--md-sys-color-on-tertiary);background-color:var(--md-sys-color-tertiary)}:host([color=surface]){color:var(--md-sys-color-primary);background-color:var(--md-sys-color-surface-container-high)}:host(:disabled){background-color:oklch(from var(--md-sys-color-on-surface) l c h / 10%);color:oklch(from var(--md-sys-color-on-surface) l c h / 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/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;
 }