@vollowx/seele 0.13.8 → 0.13.10

package/src/base/tabs.js

@@ -1,133 +1,138 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { LitElement, html, isServer } from 'lit';
+import { property } from 'lit/decorators.js';
 import { internals } from './mixins/internals-attached.js';
 /**
- * @fires {CustomEvent} tab-select
+ * @fires {CustomEvent} select
  */
 export class Tabs extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._role = 'tablist';
-        this.switch = 'manual';
-        this.selected = '';
-        this.#handleSlotChange = (_) => {
-            const parent = this.$parent;
-            this.$tabs.forEach((tab) => {
-                const panel = parent.querySelector(`[seele-base="tab"][value="${tab.value}"]`);
-                if (!panel)
-                    console.error('[seele] cannot find a matching panel for tab ', tab);
-                // TODO: ariaLabelledByElements
-                tab.setAttribute('aria-controls', panel.id);
-                panel.setAttribute('aria-labelledby', tab.id);
-            });
-        };
-        this.#handleKeyDown = (event) => {
-            const tabs = this.$tabs;
-            if (!tabs.length)
-                return;
-            const activeElement = this.getRootNode()
-                .activeElement;
-            const currentIndex = tabs.findIndex((t) => t === activeElement || t.focused);
-            let nextIndex = currentIndex !== -1 ? currentIndex : 0;
-            let handled = false;
-            switch (event.key) {
-                case 'ArrowLeft':
-                    nextIndex = currentIndex <= 0 ? tabs.length - 1 : currentIndex - 1;
-                    handled = true;
-                    break;
-                case 'ArrowRight':
-                    nextIndex = currentIndex >= tabs.length - 1 ? 0 : currentIndex + 1;
-                    handled = true;
-                    break;
-                case 'Home':
-                    nextIndex = 0;
-                    handled = true;
-                    break;
-                case 'End':
-                    nextIndex = tabs.length - 1;
-                    handled = true;
-                    break;
-                case 'Enter':
-                case ' ':
-                    if (currentIndex !== -1) {
-                        this.selectTab(tabs[currentIndex]);
-                    }
-                    handled = true;
-                    break;
-            }
-            if (handled) {
-                event.preventDefault();
-                event.stopPropagation();
-                if (event.key !== 'Enter' && event.key !== ' ') {
-                    this.focusTab(tabs[nextIndex]);
-                    if (this.switch === 'auto')
-                        this.selectTab(tabs[nextIndex]);
-                }
-            }
-        };
-        this.#handleClick = (event) => {
-            const target = event.target;
-            const tab = target.closest('md-tab');
-            if (tab && this.$tabs.includes(tab)) {
-                this.focusTab(tab);
-                this.selectTab(tab);
-            }
-        };
-    }
     get $tabs() {
-        return this.$slotItems.filter((item) => item[internals].role === 'tab');
+        return [...this.querySelectorAll('[seele-base=tab]')];
     }
-    get $parent() {
-        return this.parentNode instanceof ShadowRoot
-            ? this.parentNode.host
-            : this.parentElement;
+    get $panels() {
+        return [
+            ...this.querySelectorAll('[seele-base=tabpanel]'),
+        ];
     }
     render() {
-        return html `<div part="tablist" role="tablist"><slot @slotchange="${this.#handleSlotChange}"></slot></div>`;
+        return html `<div part="tablist" role="tablist"><slot @slotchange="${this.#handleSlotChange}"></slot></div><slot name="panels"></slot>`;
+    }
+    constructor() {
+        super();
+        this.switch = 'manual';
+        this.selected = '';
+        if (!isServer) {
+            this.addEventListener('keydown', this.#handleKeyDown.bind(this));
+            this.addEventListener('click', this.#handleClick.bind(this));
+        }
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('keydown', this.#handleKeyDown.bind(this));
-        this.addEventListener('click', this.#handleClick.bind(this));
+        queueMicrotask(this.#handleSlotChange.bind(this));
     }
     updated(changed) {
         if (changed.has('selected') && this.selected) {
             const targetTab = this.$tabs.find((t) => t.value === this.selected);
-            if (targetTab && !targetTab.selected) {
-                this.selectTab(targetTab);
+            if (targetTab)
+                this._selectTab(targetTab);
+        }
+    }
+    #handleSlotChange() {
+        this.$tabs.forEach((tab) => {
+            const panel = this.$panels.find((panel) => panel.value === tab.value);
+            if (!panel) {
+                console.error('[seele] Cannot find a matching panel for tab ', tab);
+            }
+            else {
+                tab[internals].ariaControlsElements = [panel];
+                panel[internals].ariaLabelledByElements = [tab];
             }
+        });
+    }
+    #handleKeyDown(event) {
+        const tabs = this.$tabs.filter((t) => !t.disabled);
+        if (!tabs.length)
+            return;
+        const activeElement = this.getRootNode()
+            .activeElement;
+        const currentIndex = tabs.findIndex((t) => t === activeElement);
+        let nextIndex = currentIndex !== -1 ? currentIndex : 0;
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowLeft':
+                nextIndex = currentIndex <= 0 ? tabs.length - 1 : currentIndex - 1;
+                handled = true;
+                break;
+            case 'ArrowRight':
+                nextIndex = currentIndex >= tabs.length - 1 ? 0 : currentIndex + 1;
+                handled = true;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                handled = true;
+                break;
+            case 'End':
+                nextIndex = tabs.length - 1;
+                handled = true;
+                break;
+            case 'Enter':
+            case ' ':
+                if (currentIndex !== -1) {
+                    this._selectTab(tabs[currentIndex]);
+                }
+                handled = true;
+                break;
+        }
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                this.focusTab(tabs[nextIndex]);
+                if (this.switch === 'auto')
+                    this._selectTab(tabs[nextIndex], true);
+            }
+        }
+    }
+    #handleClick(event) {
+        const target = event.target;
+        const tab = target.closest('[seele-base=tab]');
+        if (tab && !tab.disabled && this.$tabs.includes(tab)) {
+            this.focusTab(tab);
+            this._selectTab(tab, true);
         }
     }
-    #handleSlotChange;
-    #handleKeyDown;
-    #handleClick;
     focusTab(tab) {
         this.$tabs.forEach((t) => {
             t.blur();
             t.tabIndex = -1;
         });
         tab.tabIndex = 0;
-        tab.focus();
+        // TODO: prevent scrolling in other containers
+        tab.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
+            behavior: 'smooth',
+        });
+        tab.focus({ preventScroll: true });
     }
-    selectTab(selectedTab) {
+    _selectTab(selectedTab, dispatchEvent = false) {
         this.selected = selectedTab.value;
-        const parent = this.$parent;
-        const panels = Array.from(parent.querySelectorAll('[seele-base="tabpanel"]'));
+        const panels = this.$panels;
         this.$tabs.forEach((tab) => {
             tab.selected = tab === selectedTab;
-            tab.tabIndex = tab === selectedTab ? 0 : -1;
+            tab.tabIndex = tab === selectedTab && !tab.disabled ? 0 : -1;
         });
         panels.forEach((panel) => {
             if (panel.value && selectedTab.value) {
-                panel.hidden = panel.value !== selectedTab.value;
+                panel.selected = panel.value === selectedTab.value;
             }
         });
-        this.dispatchEvent(new CustomEvent('tab-select', {
-            detail: { tab: selectedTab, value: this.selected },
-            bubbles: true,
-            composed: true,
-        }));
+        if (dispatchEvent)
+            this.dispatchEvent(new CustomEvent('select', {
+                detail: { tab: selectedTab, value: this.selected },
+                bubbles: true,
+                composed: true,
+            }));
     }
 }
 __decorate([
@@ -136,6 +141,3 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], Tabs.prototype, "selected", void 0);
-__decorate([
-    queryAssignedElements({ flatten: true })
-], Tabs.prototype, "$slotItems", void 0);

package/src/base/tooltip.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { handleControlChange } from './mixins/attachable.js';
 declare const Base: Constructor<import("./mixins/attachable.js").AttachableInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 /**
  * TODO: Check if $control controls a menu/popover and keep hidden when it is open.
@@ -31,7 +32,7 @@ export declare class Tooltip extends Base {
     render(): import("lit-html").TemplateResult<1>;
     private readonly popoverController;
     constructor();
-    handleControlChange(prev?: HTMLElement | null, next?: HTMLElement | null): void;
+    [handleControlChange](prev?: HTMLElement | null, next?: HTMLElement | null): void;
     set visible(value: boolean);
 }
 export {};

package/src/base/tooltip.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { focusVisible } from '../core/focus-visible.js';
-import { Attachable } from './mixins/attachable.js';
+import { Attachable, handleControlChange } from './mixins/attachable.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
 import { PopoverController } from './controllers/popover-controller.js';
 let lastHidingTime = 0;
@@ -83,7 +83,7 @@ export class Tooltip extends Base {
         };
         this[internals].role = 'tooltip';
     }
-    handleControlChange(prev = null, next = null) {
+    [handleControlChange](prev = null, next = null) {
         const eventHandlers = {
             focusin: this.#handleFocusIn,
             focusout: this.#handleFocusOut,

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

@@ -1 +1,2 @@
-export declare function ensureReady(element: HTMLElement): Promise<HTMLElement>;
+export declare function ensureReady(element: HTMLElement | null, useAnimationFrame?: boolean): Promise<void>;
+export declare function ensureSlottedReady(host: HTMLElement, getSlotted?: () => (HTMLElement | null)[], useAnimationFrame?: boolean): Promise<void>;

package/src/core/ensure-ready.js

@@ -1,15 +1,20 @@
-export async function ensureReady(element) {
+export async function ensureReady(element, useAnimationFrame = false) {
     if (!element)
         return null;
     if (element.matches(':not(:defined)'))
         await customElements.whenDefined(element.tagName.toLowerCase());
-    // Handles Lit update
-    if ('updateComplete' in element) {
+    if ('updateComplete' in element)
         await element.updateComplete;
-    }
-    else {
-        // Yield to the next frame to allow initial render to finish
+    if (useAnimationFrame)
         await new Promise((resolve) => requestAnimationFrame(resolve));
+}
+export async function ensureSlottedReady(host, getSlotted, useAnimationFrame = false) {
+    await ensureReady(host);
+    if (getSlotted) {
+        const elements = getSlotted();
+        await Promise.all(elements.map((el) => ensureReady(el, false)));
     }
-    return element;
+    // Might be useful when you need to use sth like `getBoundingClientRect()`
+    if (useAnimationFrame)
+        await new Promise((resolve) => requestAnimationFrame(resolve));
 }

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)}@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 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-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.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.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/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/navigation/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/navigation/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;
+    }
+}