@vollowx/seele 0.13.7 → 0.13.9

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;& 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}}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const standardButtonGroupStyles = css`:host{gap:8px;display:inline-flex}:host([size=s]){gap:12px}:host([size=ss]){gap:18px}`;
+export const standardButtonGroupStyles = css`:host{gap:8px;display:inline-flex}:host([size=s]){gap:12px}:host([size=xs]){gap:18px}`;

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

@@ -10,7 +10,9 @@ export declare class M3StandardButtonGroup extends LitElement {
     $buttons: Array<HTMLElement>;
     static styles: any[];
     render(): import("lit-html").TemplateResult<1>;
+    constructor();
     connectedCallback(): void;
+    firstUpdated(): Promise<void>;
     disconnectedCallback(): void;
     /**
      * Passing no element resets all shape changes

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

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { LitElement, html, isServer } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { customElement } from '../../core/decorators.js';
-import { getSpring } from '../system/motion.js';
+import { ensureSlottedReady } from '../../core/ensure-ready.js';
+import { getSpring } from '../styles/motion.js';
 import { standardButtonGroupStyles } from './standard-button-group-styles.css.js';
 const EXPAND_FACTOR = 1.15;
 const shapeAnimation = Symbol('shapeAnimation');
@@ -12,8 +13,12 @@ const shapeAnimation = Symbol('shapeAnimation');
  * @slot - buttons
  */
 let M3StandardButtonGroup = class M3StandardButtonGroup extends LitElement {
+    static { this.styles = [standardButtonGroupStyles]; }
+    render() {
+        return html `<slot @slotchange="${this.#handleSlotChange}"></slot>`;
+    }
     constructor() {
-        super(...arguments);
+        super();
         this.size = '';
         this.#activeIndex = -1;
         this.#baseWidths = [];
@@ -42,20 +47,21 @@ let M3StandardButtonGroup = class M3StandardButtonGroup extends LitElement {
                 this.updateLayout();
             }
         };
-    }
-    static { this.styles = [standardButtonGroupStyles]; }
-    render() {
-        return html `<slot @slotchange="${this.#handleSlotChange}"></slot>`;
+        if (!isServer) {
+            this.addEventListener('pointerdown', this.#handlePointerDown);
+            this.addEventListener('keydown', this.#handleKeyDown, { capture: true });
+        }
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('pointerdown', this.#handlePointerDown);
-        this.addEventListener('keydown', this.#handleKeyDown, { capture: true });
-        window.addEventListener('pointerup', this.#reset);
-        window.addEventListener('pointercancel', this.#reset);
-        window.addEventListener('keyup', this.#reset, { capture: true });
+        const signal = (this.#abortController = new AbortController()).signal;
+        window.addEventListener('pointerup', this.#reset, { signal });
+        window.addEventListener('pointercancel', this.#reset, { signal });
+        window.addEventListener('keyup', this.#reset, { capture: true, signal });
         this.#resizeObserver = new ResizeObserver((entries) => {
-            if (this.#activeIndex !== -1)
+            const isAnimating = this.#activeIndex !== -1 ||
+                this.$buttons.some((btn) => btn[shapeAnimation]);
+            if (isAnimating)
                 return; // Skip if animating
             entries.forEach((entry) => {
                 const target = entry.target;
@@ -63,22 +69,23 @@ let M3StandardButtonGroup = class M3StandardButtonGroup extends LitElement {
                 if (index !== -1) {
                     const currentWidth = target.style.width;
                     target.style.width = '';
-                    this.#baseWidths[index] = entry.target.getBoundingClientRect().width;
+                    this.#baseWidths[index] = target.getBoundingClientRect().width;
                     if (currentWidth)
                         target.style.width = currentWidth;
                 }
             });
         });
-        queueMicrotask(this.#handleSlotChange);
-        // Which is not called on a SSR'd element
+    }
+    async firstUpdated() {
+        await ensureSlottedReady(this, () => this.$buttons, true);
+        this.#handleSlotChange();
     }
     disconnectedCallback() {
-        window.removeEventListener('pointerup', this.#reset);
-        window.removeEventListener('pointercancel', this.#reset);
-        window.removeEventListener('keyup', this.#reset, { capture: true });
+        this.#abortController.abort();
         this.#resizeObserver.disconnect();
         super.disconnectedCallback();
     }
+    #abortController;
     #activeIndex;
     #resizeObserver;
     #baseWidths;
@@ -93,35 +100,34 @@ let M3StandardButtonGroup = class M3StandardButtonGroup extends LitElement {
         const pressedIndex = target ? this.$buttons.indexOf(target) : -1;
         this.#activeIndex = pressedIndex;
         const pressedBaseWidth = pressedIndex !== -1 ? this.#baseWidths[pressedIndex] : 0;
-        const expansionDelta = pressedBaseWidth * (EXPAND_FACTOR - 1);
         const isPressedAtEdge = pressedIndex === 0 || pressedIndex === this.$buttons.length - 1;
+        const delta = (pressedBaseWidth * (EXPAND_FACTOR - 1)) / (isPressedAtEdge ? 1 : 2);
+        const spring = getSpring(this, 'spatial', 'fast');
         this.$buttons.forEach((btn, i) => {
             const currentWidth = btn.getBoundingClientRect().width;
             let targetWidth = this.#baseWidths[i];
             if (pressedIndex !== -1) {
-                if (i === pressedIndex) {
+                if (i === pressedIndex)
                     targetWidth = pressedBaseWidth * EXPAND_FACTOR;
-                }
-                else if (Math.abs(i - pressedIndex) === 1) {
-                    if (isPressedAtEdge)
-                        targetWidth = this.#baseWidths[i] - expansionDelta;
-                    else
-                        targetWidth = this.#baseWidths[i] - expansionDelta / 2;
-                }
+                else if (Math.abs(i - pressedIndex) === 1)
+                    targetWidth -= delta;
             }
-            const spring = getSpring(this, 'spatial', 'fast');
-            if (btn[shapeAnimation])
-                btn[shapeAnimation].cancel();
-            btn[shapeAnimation] = btn.animate([{ width: `${currentWidth}px` }, { width: `${targetWidth}px` }], {
+            btn[shapeAnimation]?.cancel();
+            const anim = (btn[shapeAnimation] = btn.animate([{ width: `${currentWidth}px` }, { width: `${targetWidth}px` }], {
                 ...spring,
                 fill: 'forwards',
-            });
-            btn[shapeAnimation].onfinish = () => {
-                if (pressedIndex === -1) {
-                    btn.style.width = '';
-                    btn[shapeAnimation].cancel();
+            }));
+            anim.finished
+                .then(() => {
+                if (btn[shapeAnimation] === anim) {
+                    if (pressedIndex === -1) {
+                        btn.style.width = '';
+                        anim.cancel();
+                    }
+                    delete btn[shapeAnimation];
                 }
-            };
+            })
+                .catch(() => { });
         });
     }
 };

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

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

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

@@ -16,7 +16,7 @@ export declare class M3Checkbox extends Checkbox {
     static styles: any[];
     render(): import("lit-html").TemplateResult<1>;
     renderIcon(): import("lit-html").TemplateResult<1>;
-    connectedCallback(): void;
+    firstUpdated(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/checkbox/checkbox.js

@@ -26,12 +26,9 @@ let M3Checkbox = class M3Checkbox extends Checkbox {
     renderIcon() {
         return html `<svg part="icon" viewBox="0 0 18 18" aria-hidden="true"><rect part="mark mark-short"></rect><rect part="mark mark-long"></rect></svg>`;
     }
-    connectedCallback() {
-        super.connectedCallback();
+    firstUpdated() {
         // SSR'd <md-checkbox> components don't have their labels set up on time
-        this.updateComplete.then(() => {
-            this.$ripple.attach(this, true);
-        });
+        this.$ripple.attach(this, true);
     }
 };
 __decorate([

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/dialog/dialog.d.ts

@@ -2,6 +2,8 @@ import { Dialog } from '../../base/dialog.js';
 /**
  * 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
  *
@@ -35,7 +37,7 @@ export declare class M3Dialog extends Dialog {
     $scrim: HTMLDivElement;
     static styles: any[];
     render(): import("lit-html").TemplateResult<1>;
-    connectedCallback(): void;
+    firstUpdated(): Promise<void>;
     show(): void;
     close(): void;
 }

package/src/m3/dialog/dialog.js

@@ -1,11 +1,14 @@
 import { __decorate } from "tslib";
 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 { dialogStyles } from './dialog-styles.css.js';
 /**
  * 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
  *
@@ -50,10 +53,9 @@ let M3Dialog = class M3Dialog extends Dialog {
     render() {
         return html `<dialog part="dialog" @click="${this.#handleClick}" @cancel="${this._handleCancel}"><div part="container"><div part="body"><div part="headline" class="${this.hasIcon ? 'has-icon' : ''}"><slot name="icon" @slotchange="${this.#handleIconSlotChange}"></slot><slot name="headline"></slot></div><div part="content"><slot></slot></div><div class="actions-placeholder"></div></div><div part="actions"><slot name="actions"></slot></div></div></dialog><div part="scrim"></div>`;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        queueMicrotask(this.#handleIconSlotChange);
-        // Which is not called on a SSR'd element
+    async firstUpdated() {
+        await ensureSlottedReady(this);
+        this.#handleIconSlotChange();
     }
     #activeAnimations;
     #clearAnimations() {

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/focus-ring/focus-ring.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { handleControlChange } from '../../base/mixins/attachable.js';
 declare const M3FocusRing_base: Constructor<import("../../base/mixins/attachable.js").AttachableInterface> & Constructor<import("../../base/mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 /**
  * @tag md-focus-ring
@@ -22,7 +23,7 @@ export declare class M3FocusRing extends M3FocusRing_base {
     constructor();
     visualFocus(): void;
     visualBlur(): void;
-    handleControlChange(prev?: HTMLElement | null, next?: HTMLElement | null): void;
+    [handleControlChange](prev?: HTMLElement | null, next?: HTMLElement | null): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -3,8 +3,8 @@ import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { customElement } from '../../core/decorators.js';
 import { focusVisible } from '../../core/focus-visible.js';
-import { Attachable } from '../../base/mixins/attachable.js';
-import { InternalsAttached, internals, } from '../../base/mixins/internals-attached.js';
+import { Attachable, handleControlChange } from '../../base/mixins/attachable.js';
+import { InternalsAttached, internals, replaceStates, } from '../../base/mixins/internals-attached.js';
 import { focusRingStyles } from './focus-ring-styles.css.js';
 /**
  * @tag md-focus-ring
@@ -27,10 +27,7 @@ let M3FocusRing = class M3FocusRing extends Attachable(InternalsAttached(LitElem
         super();
         this.inward = false;
         this.#handleFocusIn = () => {
-            if (focusVisible)
-                this[internals].states.add('visible');
-            else
-                this[internals].states.delete('visible');
+            this[replaceStates](['visible'], [focusVisible ? 'visible' : null]);
         };
         this.#handleFocusOut = () => {
             this[internals].states.delete('visible');
@@ -49,7 +46,7 @@ let M3FocusRing = class M3FocusRing extends Attachable(InternalsAttached(LitElem
     visualBlur() {
         this.#handleFocusOut();
     }
-    handleControlChange(prev = null, next = null) {
+    [handleControlChange](prev = null, next = null) {
         const eventHandlers = {
             focusin: this.#handleFocusIn,
             focusout: this.#handleFocusOut,

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/nagivation/navigation-rail-item-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const navigationRailItemStyles = css`:host{color:var(--md-sys-color-on-surface-variant);cursor:pointer;outline:0;grid-template-rows:40px 1fr;justify-content:flex-start;width:max-content;display:grid;position:relative}.pill-root{grid-template:".start icon.label end."32px/20px 16px 24px 0 0fr 16px 20px;place-self:center;display:grid;position:relative}.pill{border-radius:9999px;grid-area:1/start-start/auto/end-end;position:relative}::slotted(*){fill:currentColor;place-self:center;block-size:1em;inline-size:1em;font-size:24px;position:absolute}::slotted([slot=active]){opacity:0}.label-inside{font:var(--md-sys-typography-label-large);display:none}.label-outside{font:var(--md-sys-typography-label-medium);pointer-events:none;text-align:center;word-break:break-word;grid-template-rows:1fr;width:96px;display:block;overflow:hidden}:host([active]){& .pill{color:var(--md-sys-color-on-secondary-container)}& md-ripple{background-color:var(--md-sys-color-secondary-container)}&::slotted([slot=active]){opacity:1}&::slotted(:not([slot=active])){opacity:0}& .label-outside{color:var(--md-sys-color-secondary)}}`;

package/src/m3/nagivation/navigation-rail-item.d.ts

@@ -0,0 +1,21 @@
+import { type PropertyValues } from 'lit';
+import { Button } from '../../base/button.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+import { type M3FocusRing } from '../focus-ring/focus-ring.js';
+import { type M3Ripple } from '../ripple/ripple.js';
+export declare class M3NavigationRailItem extends Button {
+    label: string;
+    active: boolean;
+    $focusRing: M3FocusRing;
+    $ripple: M3Ripple;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changed: PropertyValues): void;
+    firstUpdated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-nav-rail-item': M3NavigationRailItem;
+    }
+}

package/src/m3/nagivation/navigation-rail-item.js

@@ -0,0 +1,44 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { internals } from '../../base/mixins/internals-attached.js';
+import { Button } from '../../base/button.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+import { navigationRailItemStyles } from './navigation-rail-item-styles.css.js';
+let M3NavigationRailItem = class M3NavigationRailItem extends Button {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+    }
+    static { this.styles = [navigationRailItemStyles]; }
+    render() {
+        return html `<div class="pill-root"><div class="pill"><md-focus-ring></md-focus-ring><md-ripple></md-ripple></div><slot></slot><slot name="active"></slot><span class="label-inside">${this.label}</span></div><span class="label-outside">${this.label}</span>`;
+    }
+    updated(changed) {
+        if (changed.has('label'))
+            this[internals].ariaLabel = this.label;
+        if (changed.has('active'))
+            this[internals].ariaCurrent = this.active ? 'true' : null;
+    }
+    firstUpdated() {
+        this.$focusRing.attach(this);
+        this.$ripple.attach(this);
+    }
+};
+__decorate([
+    property({ reflect: true })
+], M3NavigationRailItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3NavigationRailItem.prototype, "active", void 0);
+__decorate([
+    query('md-focus-ring')
+], M3NavigationRailItem.prototype, "$focusRing", void 0);
+__decorate([
+    query('md-ripple')
+], M3NavigationRailItem.prototype, "$ripple", void 0);
+M3NavigationRailItem = __decorate([
+    customElement('md-nav-rail-item')
+], M3NavigationRailItem);
+export { M3NavigationRailItem };

package/src/m3/nagivation/navigation-rail-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const navigationRailStyles = css`:host{background-color:var(--md-sys-color-surface-container);-webkit-user-select:none;user-select:none;z-index:10;flex-shrink:0;grid-template-rows:min-content auto;justify-content:space-between;gap:40px;width:96px;height:100%;padding-top:44px;padding-bottom:20px;display:grid;overflow:visible}.actions{z-index:10;place-self:center;display:grid;position:sticky;top:-44px}::slotted(md-fab){box-shadow:none}.items{grid-template-areas:"stack";display:grid}slot:not([name]){flex-direction:column;grid-area:stack;gap:8px;padding:0;list-style:none;display:flex;position:relative}`;

package/src/m3/nagivation/navigation-rail.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import { type M3NavigationRailItem } from './navigation-rail-item.js';
+export declare class M3NavigationRail extends LitElement {
+    get $items(): Array<M3NavigationRailItem>;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-nav-rail': M3NavigationRail;
+    }
+}

package/src/m3/nagivation/navigation-rail.js

@@ -0,0 +1,17 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { navigationRailStyles } from './navigation-rail-styles.css.js';
+let M3NavigationRail = class M3NavigationRail extends LitElement {
+    get $items() {
+        return [...this.querySelectorAll('md-nav-rail-item')];
+    }
+    static { this.styles = [navigationRailStyles]; }
+    render() {
+        return html `<div class="actions"><slot name="menu"></slot><slot name="fab"></slot></div><div class="items"><slot></slot></div>`;
+    }
+};
+M3NavigationRail = __decorate([
+    customElement('md-nav-rail')
+], M3NavigationRail);
+export { M3NavigationRail };