@vollowx/seele 0.14.1 → 0.14.2

package/src/base/tooltip.js

@@ -1,23 +1,32 @@
+// References:
+// - https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+// - https://sarahmhigley.com/writing/tooltips-in-wcag-21/#best-practices-summary
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { LitElement, html, isServer } from 'lit';
+import { property } from 'lit/decorators.js';
+import { autoUpdate, computePosition, arrow, flip, offset, shift, } from '@floating-ui/dom';
 import { focusVisible } from '../core/focus.js';
 import { Attachable, handleControlChange } from './mixins/attachable.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
-import { PopoverController } from './controllers/popover-controller.js';
+import { transformOriginFromArrow } from './positioning.js';
+import { tooltipStyles } from './tooltip-styles.css.js';
 let lastHidingTime = 0;
+let userSelectHolders = { count: 0, prevUserSelect: '' };
+// To prevent text zoom bubbles in Safari. Ignore the `webkitUserSelect`s.
 const Base = Attachable(InternalsAttached(LitElement));
 /**
  * TODO: Check if $control controls a menu/popover and keep hidden when it is open.
+ * TODO: Allow adding a real arrow
  */
 export class Tooltip extends Base {
+    static { this.styles = [tooltipStyles]; }
     render() {
-        return html `<slot @slotchange="${this.#handleSlotChange}"></slot>`;
+        return html `<slot></slot>`;
     }
-    // Different from those in the popoverController, these timers are used to
-    // manage the delay before showing/hiding the tooltip.
+    // Used to manage the delay before showing/hiding the tooltip.
     #openTimer;
     #closeTimer;
+    #holdingUserSelect;
     constructor() {
         super();
         this._delays = {
@@ -26,62 +35,75 @@ export class Tooltip extends Base {
             touch: { show: 700, hide: 1500 },
             recentlyShowed: 800,
         };
-        this._durations = { show: 100, hide: 100 };
         this.align = 'top';
         this.offset = 4;
+        this.windowPadding = 8;
         this.forceInvisible = false;
-        // Different from those in the popoverController, these timers are used to
-        // manage the delay before showing/hiding the tooltip.
+        this.open = false;
+        // Used to manage the delay before showing/hiding the tooltip.
         this.#openTimer = null;
         this.#closeTimer = null;
-        this.popoverController = new PopoverController(this, {
-            popover: () => this,
-            trigger: () => this.$control,
-            positioning: {
-                placement: () => this.align,
-                strategy: () => 'absolute',
-                offset: () => this.offset,
-                windowPadding: () => 16,
-            },
-            durations: {
-                open: () => this._durations.show,
-                close: () => this._durations.hide,
-            },
-            onClickAway: () => {
-                this.visible = false;
-            },
-        });
-        this.#handleSlotChange = () => {
-            if (!this.visible)
-                this.$control.setAttribute('aria-label', this.textContent ?? '');
-        };
+        this.#holdingUserSelect = false;
         this.#handleFocusIn = () => {
             if (!focusVisible)
                 return;
-            this.#show(this._delays.focus.show);
+            this.#scheduleShow(this._delays.focus.show, true);
         };
         this.#handleFocusOut = () => {
-            this.#hide(this._delays.focus.hide);
+            this.#scheduleHide(this._delays.focus.hide);
         };
         this.#handlePointerEnter = (e) => {
             const evt = e;
             if (evt.pointerType === 'touch')
                 return;
-            this.#show(this._delays.mouse.show);
+            this.#scheduleShow(this._delays.mouse.show, true);
         };
         this.#handlePointerLeave = (e) => {
             const evt = e;
             if (evt.pointerType === 'touch')
                 return;
-            this.#hide(this._delays.mouse.hide);
+            this.#scheduleHide(this._delays.mouse.hide);
         };
         this.#handleTouchStart = () => {
-            this.#show(this._delays.touch.show);
+            this.#editUserSelect();
+            this.#scheduleShow(this._delays.touch.show);
         };
         this.#handleTouchEnd = () => {
-            this.#hide(this._delays.touch.hide);
+            this.#restoreUserSelect();
+            this.#scheduleHide(this._delays.touch.hide);
+        };
+        this.#handleGlobalPointerUp = (event) => {
+            const trigger = this.$control;
+            const path = event.composedPath();
+            if (trigger && path.includes(trigger))
+                return;
+            if (path.includes(this))
+                return;
+            this.open = false;
+        };
+        this.#handleGlobalKeyDown = (event) => {
+            if (event.key === 'Escape')
+                this.open = false;
         };
+        this.#dummyArrow = isServer ? null : document.createElement('div');
         this[internals].role = 'tooltip';
+        if (!this.hasAttribute('popover'))
+            this.setAttribute('popover', 'manual');
+    }
+    disconnectedCallback() {
+        this._cleanup();
+        window.removeEventListener('pointerup', this.#handleGlobalPointerUp);
+        window.removeEventListener('keydown', this.#handleGlobalKeyDown);
+        this.#restoreUserSelect();
+        super.disconnectedCallback();
+    }
+    updated(changedProperties) {
+        if (!changedProperties.has('open'))
+            return;
+        if (this.open)
+            this.#show();
+        else
+            this.#hide();
     }
     [handleControlChange](prev = null, next = null) {
         const eventHandlers = {
@@ -97,50 +119,115 @@ export class Tooltip extends Base {
             next?.addEventListener(key, eventHandlers[key]);
         });
         if (prev)
-            prev.removeAttribute('aria-label');
+            prev.ariaDescribedByElements = [];
         if (next)
-            next.setAttribute('aria-label', this.textContent ?? '');
-    }
-    set visible(value) {
-        if (value) {
-            this.popoverController.animateOpen();
-        }
-        else {
-            this.popoverController.animateClose();
-        }
+            next.ariaDescribedByElements = [this];
     }
-    #handleSlotChange;
     #handleFocusIn;
     #handleFocusOut;
     #handlePointerEnter;
     #handlePointerLeave;
     #handleTouchStart;
     #handleTouchEnd;
-    #show(delay) {
+    #handleGlobalPointerUp;
+    #handleGlobalKeyDown;
+    #scheduleShow(delay, allowInstantShow = false) {
         clearTimeout(this.#closeTimer);
         this.#openTimer = setTimeout(() => {
-            this.visible = true;
-        }, Math.max(Date.now() - lastHidingTime < this._delays.recentlyShowed ? 0 : delay));
+            this.open = true;
+        }, allowInstantShow &&
+            Date.now() - lastHidingTime < this._delays.recentlyShowed
+            ? 0
+            : delay);
     }
-    #hide(delay) {
-        if (this.popoverController.open) {
+    #scheduleHide(delay) {
+        if (this.open) {
             lastHidingTime = Date.now();
         }
         clearTimeout(this.#openTimer);
         this.#closeTimer = setTimeout(() => {
-            this.visible = false;
+            this.open = false;
         }, delay);
     }
+    async #show() {
+        setTimeout(() => {
+            if (this.open)
+                window.addEventListener('pointerup', this.#handleGlobalPointerUp);
+        }, 0);
+        window.addEventListener('keydown', this.#handleGlobalKeyDown);
+        const trigger = this.$control;
+        if (this.isConnected && !this.matches(':popover-open'))
+            this.showPopover({ source: trigger ?? undefined });
+        if (trigger) {
+            this._cleanup();
+            this.#cleanupAutoUpdate = autoUpdate(trigger, this, () => this.reposition());
+            await this.reposition();
+        }
+    }
+    #hide() {
+        window.removeEventListener('pointerup', this.#handleGlobalPointerUp);
+        window.removeEventListener('keydown', this.#handleGlobalKeyDown);
+        this._cleanup();
+        this.#restoreUserSelect();
+        if (this.matches(':popover-open'))
+            this.hidePopover();
+    }
+    #editUserSelect() {
+        if (!userSelectHolders.count) {
+            userSelectHolders.prevUserSelect = document.body.style.webkitUserSelect;
+            document.body.style.webkitUserSelect = 'none';
+        }
+        ++userSelectHolders.count;
+        this.#holdingUserSelect = true;
+    }
+    #restoreUserSelect() {
+        if (!this.#holdingUserSelect)
+            return;
+        this.#holdingUserSelect = false;
+        userSelectHolders.count = Math.max(0, userSelectHolders.count - 1);
+        if (!userSelectHolders.count)
+            document.body.style.webkitUserSelect = userSelectHolders.prevUserSelect;
+    }
+    #cleanupAutoUpdate;
+    #dummyArrow;
+    async reposition() {
+        const trigger = this.$control;
+        if (!trigger)
+            return Promise.resolve();
+        return computePosition(trigger, this, {
+            placement: this.align,
+            strategy: 'absolute',
+            middleware: [
+                offset(this.offset),
+                flip({ padding: this.windowPadding }),
+                shift({ padding: this.windowPadding, crossAxis: true }),
+                arrow({ element: this.#dummyArrow }),
+            ],
+        }).then(({ x, y, placement, middlewareData }) => {
+            Object.assign(this.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+                transformOrigin: transformOriginFromArrow(placement, middlewareData.arrow),
+            });
+        });
+    }
+    _cleanup() {
+        this.#cleanupAutoUpdate?.();
+        this.#cleanupAutoUpdate = undefined;
+    }
 }
 __decorate([
     property({ reflect: true })
 ], Tooltip.prototype, "align", void 0);
 __decorate([
-    property({ type: Number, reflect: true })
+    property({ type: Number })
 ], Tooltip.prototype, "offset", void 0);
+__decorate([
+    property({ type: Number, attribute: 'window-padding' })
+], Tooltip.prototype, "windowPadding", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'force-invisible' })
 ], Tooltip.prototype, "forceInvisible", void 0);
 __decorate([
-    query('slot')
-], Tooltip.prototype, "$slot", void 0);
+    property({ type: Boolean, reflect: true })
+], Tooltip.prototype, "open", void 0);

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const autocompleteStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}::slotted([slot=input]){cursor:pointer;outline:none;width:100%}[part=popup]{--md-menu-max-height:300px;min-width:inherit}`;
+export const autocompleteStyles = css`:host{-webkit-user-select:none;user-select:none;width:300px;display:inline-block;position:relative}::slotted([slot=input]){cursor:pointer;outline:none;width:100%}[part=popup]{width:inherit}[part=menu]{max-height:400px}`;

package/src/m3/autocomplete/autocomplete.js

@@ -11,7 +11,7 @@ import { autocompleteStyles } from './autocomplete-styles.css.js';
 let M3Autocomplete = class M3Autocomplete extends Autocomplete {
     static { this.styles = [autocompleteStyles]; }
     renderMenu() {
-        return html `<md-popup part="popup" role="presentation" no-focus-control quick .open="${this.open}" @toggle="${(e) => (this.open = e.newState === 'open')}"><md-menu part="menu" id="menu" type="listbox" tabindex="-1" @action="${this.handleMenuAction}"><slot @slotchange="${this.handleItemsSlotChange}"></slot></md-menu></md-popup>`;
+        return html `<md-popup part="popup" role="presentation" no-focus-control quick .open="${this.open}" @toggle="${(e) => (this.open = e.newState === 'open')}"><md-menu part="menu" id="menu" role="listbox" tabindex="-1" @action="${this.handleMenuAction}"><slot @slotchange="${this.handleItemsSlotChange}"></slot></md-menu></md-popup>`;
     }
 };
 M3Autocomplete = __decorate([

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const badgeStyles = css`:host{--md-badge-offset:0}[part~=root]{vertical-align:middle;flex-shrink:0;display:inline-flex;position:relative}[part~=badge]{--md-badge-scale:1;top:var(--md-badge-offset);right:var(--md-badge-offset);box-sizing:border-box;font:var(--md-sys-typography-label-small);z-index:1;background-color:var(--md-sys-color-error);min-width:16px;height:16px;color:var(--md-sys-color-on-error);transform:scale(var(--md-badge-scale)) translate(50%, -50%);transform-origin:100% 0;transition:transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);pointer-events:none;border-radius:8px;flex-flow:wrap;justify-content:center;align-items:center;padding:0 2.5px;display:flex;position:absolute}:host([small]) [part~=badge]{--md-badge-scale:.375;color:#0000}:host([hidden]){display:hidden}:host([value="0"]:not([show-zero])) [part~=badge],:host([hidden]) [part~=badge]{--md-badge-scale:0}:host([circle]){--md-badge-offset:14%}:host([left]:not([dir=rtl])) [part~=badge],:host(:not([left])[dir=rtl]) [part~=badge]{right:auto;left:var(--md-badge-offset);transform:scale(var(--md-badge-scale)) translate(-50%, -50%);transform-origin:0 0}:host([bottom]) [part~=badge]{top:auto;bottom:var(--md-badge-offset);transform:scale(var(--md-badge-scale)) translate(50%, 50%);transform-origin:100% 100%}:host([left][bottom]:not([dir=rtl])) [part~=badge],:host(:not([left])[dir=rtl][bottom]) [part~=badge]{transform:scale(var(--md-badge-scale)) translate(-50%, 50%);transform-origin:0 100%}`;
+export const badgeStyles = css`:host{--md-badge-offset:0}[part~=root]{vertical-align:middle;flex-shrink:0;display:inline-flex;position:relative}[part~=badge]{--md-badge-scale:1;top:var(--md-badge-offset);right:var(--md-badge-offset);box-sizing:border-box;font:var(--md-sys-typography-label-small);background-color:var(--md-sys-color-error);min-width:16px;height:16px;color:var(--md-sys-color-on-error);transform:scale(var(--md-badge-scale)) translate(50%, -50%);transform-origin:100% 0;transition:transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);pointer-events:none;border-radius:8px;flex-flow:wrap;justify-content:center;align-items:center;padding:0 2.5px;display:flex;position:absolute}:host([small]) [part~=badge]{--md-badge-scale:.375;color:#0000}:host([hidden]){display:hidden}:host([value="0"]:not([show-zero])) [part~=badge],:host([hidden]) [part~=badge]{--md-badge-scale:0}:host([circle]){--md-badge-offset:14%}:host([left]:not([dir=rtl])) [part~=badge],:host(:not([left])[dir=rtl]) [part~=badge]{right:auto;left:var(--md-badge-offset);transform:scale(var(--md-badge-scale)) translate(-50%, -50%);transform-origin:0 0}:host([bottom]) [part~=badge]{top:auto;bottom:var(--md-badge-offset);transform:scale(var(--md-badge-scale)) translate(50%, 50%);transform-origin:100% 100%}:host([left][bottom]:not([dir=rtl])) [part~=badge],:host(:not([left])[dir=rtl][bottom]) [part~=badge]{transform:scale(var(--md-badge-scale)) translate(-50%, 50%);transform-origin:0 100%}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const itemStyles = css`:host{border-radius:inherit;box-sizing:border-box;font:var(--md-sys-typography-body-large);text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex:1;align-items:center;gap:16px;min-height:48px;padding:12px;display:flex;position:relative}:host([multiline]){min-height:72px}[name=container]{border-radius:inherit}[name=container]::slotted(*){position:absolute;inset:0}.default-slot{display:inline}.default-slot,.text ::slotted(*){text-overflow:ellipsis;overflow:hidden}.text{flex-direction:column;flex:1;display:flex;overflow:hidden}[name=overline]{font:var(--md-sys-typography-label-small)}[name=supporting-text]{color:var(--md-item-supporting-text-color,var(--md-sys-color-on-surface-variant));font:var(--md-sys-typography-body-medium)}`;
+export const itemStyles = css`:host{border-radius:inherit;box-sizing:border-box;font:var(--md-sys-typography-body-large);min-height:calc(48px + 4px * var(--md-sys-spacing-density,0));padding:calc(12px + 2px * var(--md-sys-spacing-density,0)) 12px;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex:1;align-items:center;gap:16px;display:flex;position:relative}:host([multiline]){min-height:72px}[name=container]{border-radius:inherit}[name=container]::slotted(*){position:absolute;inset:0}.default-slot{display:inline}.default-slot,.text ::slotted(*){text-overflow:ellipsis;overflow:hidden}.text{flex-direction:column;flex:1;display:flex;overflow:hidden}[name=overline]{font:var(--md-sys-typography-label-small)}[name=supporting-text]{color:var(--md-item-supporting-text-color,var(--md-sys-color-on-surface-variant));font:var(--md-sys-typography-body-medium)}`;

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}@media (forced-colors:active){:host{forced-color-adjust:none;color:canvastext}:host(:hover),:host(:state(selected)){color:highlighttext;background:highlight}}`;
+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],:state(selected)):first-of-type){border-radius:12px 12px 4px 4px}:host(:not([hidden],:state(selected)):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}md-ripple:before{transition:none}md-ripple::part(ripple){display:none}@media (forced-colors:active){:host{forced-color-adjust:none;color:canvastext}:host(:hover),:host(:state(selected)){color:highlighttext;background:highlight}}`;

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const loadingStyles = css`:host{aspect-ratio:1;background-color:var(--md-sys-color-surface);border-radius:9999px;place-items:center;width:48px;display:grid}:host([contained]){background-color:var(--md-sys-color-primary-container)}canvas{width:82%;height:82%;display:block}`;

package/src/m3/{loading-indicator/loading-indicator.d.ts → loading/loading.d.ts}

@@ -1,5 +1,11 @@
+/**
+ * @license
+ * Copyright 2026 brahmkshatriya
+ * Modifications Copyright 2026 Lucas X. Zhao
+ * SPDX-License-Identifier: Apache-2.0
+ */
 import { LitElement } from 'lit';
-declare const M3LoadingIndicator_base: Constructor<import("../../base/mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+declare const M3Loading_base: Constructor<import("../../base/mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 /**
  * @tag md-loading
  *
@@ -8,7 +14,7 @@ declare const M3LoadingIndicator_base: Constructor<import("../../base/mixins/int
  *       pulls the color once per second
  * NOTE: the pantagon is completely not following the shape system
  */
-export declare class M3LoadingIndicator extends M3LoadingIndicator_base {
+export declare class M3Loading extends M3Loading_base {
     #private;
     contained: boolean;
     $canvas: HTMLCanvasElement;
@@ -20,7 +26,7 @@ export declare class M3LoadingIndicator extends M3LoadingIndicator_base {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'md-loading': M3LoadingIndicator;
+        'md-loading': M3Loading;
     }
 }
 export {};

package/src/m3/{loading-indicator/loading-indicator.js → loading/loading.js}

@@ -1,9 +1,15 @@
-// Origin: https://github.com/brahmkshatriya/material-osc/blob/main/assets/loading-shape-morph-demo.html
+/**
+ * @license
+ * Copyright 2026 brahmkshatriya
+ * Modifications Copyright 2026 Lucas X. Zhao
+ * SPDX-License-Identifier: Apache-2.0
+ */
 import { __decorate } from "tslib";
+// Origin: https://github.com/brahmkshatriya/material-osc/blob/main/assets/loading-shape-morph-demo.html
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { InternalsAttached, internals } from '../../base/mixins/internals-attached.js';
-import { loadingIndicatorStyles } from './loading-indicator-styles.css.js';
+import { loadingStyles } from './loading-styles.css.js';
 const STEP_MS = 650;
 const FULL_ROTATION_MS = 4666;
 const QUARTER_ROTATION = 90;
@@ -19,8 +25,8 @@ const CENTER = CANVAS_SIZE / 2;
  *       pulls the color once per second
  * NOTE: the pantagon is completely not following the shape system
  */
-let M3LoadingIndicator = class M3LoadingIndicator extends InternalsAttached(LitElement) {
-    static { this.styles = [loadingIndicatorStyles]; }
+let M3Loading = class M3Loading extends InternalsAttached(LitElement) {
+    static { this.styles = [loadingStyles]; }
     render() {
         return html `<canvas width="${CANVAS_SIZE}" height="${CANVAS_SIZE}" aria-hidden="true"></canvas>`;
     }
@@ -102,14 +108,14 @@ let M3LoadingIndicator = class M3LoadingIndicator extends InternalsAttached(LitE
 };
 __decorate([
     property({ type: Boolean, reflect: true })
-], M3LoadingIndicator.prototype, "contained", void 0);
+], M3Loading.prototype, "contained", void 0);
 __decorate([
     query('canvas')
-], M3LoadingIndicator.prototype, "$canvas", void 0);
-M3LoadingIndicator = __decorate([
+], M3Loading.prototype, "$canvas", void 0);
+M3Loading = __decorate([
     customElement('md-loading')
-], M3LoadingIndicator);
-export { M3LoadingIndicator };
+], M3Loading);
+export { M3Loading };
 const lerp = (a, b, t) => a + (b - a) * t;
 const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
 const dist = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);

package/src/m3/menu/composed-menu.d.ts

@@ -1,16 +1,11 @@
-import { handleControlChange } from '../../base/mixins/attachable.js';
-import { Popup } from '../../base/popup.js';
-import { M3Menu } from './menu.js';
+import { ComposedMenu } from '../../base/composed-menu.js';
+import './menu.js';
 /**
- * TODO: consider adding ariaLabel that is passed to the menu
+ * @tag md-composed-menu
  */
-export declare class M3ComposedMenu extends Popup {
+export declare class M3ComposedMenu extends ComposedMenu {
     vibrant: boolean;
-    $menu: M3Menu;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
-    constructor();
-    [handleControlChange](prev: HTMLElement | null, next: HTMLElement | null): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/menu/composed-menu.js

@@ -1,41 +1,21 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
-import { property, customElement, query } from 'lit/decorators.js';
-import { ensureReady } from '../../core/ensure-ready.js';
-import { internals } from '../../base/mixins/internals-attached.js';
-import { handleControlChange } from '../../base/mixins/attachable.js';
-import { Popup } from '../../base/popup.js';
+import { customElement, property } from 'lit/decorators.js';
+import { ComposedMenu } from '../../base/composed-menu.js';
+import './menu.js';
 import { popupStyles } from '../popup/popup-styles.css.js';
 /**
- * TODO: consider adding ariaLabel that is passed to the menu
+ * @tag md-composed-menu
  */
-let M3ComposedMenu = class M3ComposedMenu extends Popup {
-    static { this.styles = [...super.styles, popupStyles]; }
-    render() {
-        return html `<md-menu><slot></slot></md-menu>`;
-    }
+let M3ComposedMenu = class M3ComposedMenu extends ComposedMenu {
     constructor() {
-        super();
+        super(...arguments);
         this.vibrant = false;
-        this[internals].role = 'application';
-    }
-    [handleControlChange](prev, next) {
-        if (next) {
-            next.ariaHasPopup = 'menu';
-            ensureReady(this.$menu).then(() => {
-                next.ariaControlsElements = [this.$menu];
-                this.$menu[internals].ariaLabelledByElements = [this.$control];
-            });
-        }
-        super[handleControlChange](prev, next);
     }
+    static { this.styles = [...super.styles, popupStyles]; }
 };
 __decorate([
     property({ type: Boolean, reflect: true })
 ], M3ComposedMenu.prototype, "vibrant", void 0);
-__decorate([
-    query('md-menu')
-], M3ComposedMenu.prototype, "$menu", void 0);
 M3ComposedMenu = __decorate([
     customElement('md-composed-menu')
 ], M3ComposedMenu);

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const menuStyles = css`:host{box-sizing:border-box;height:inherit;max-height:300px;width:inherit;-webkit-user-select:none;user-select:none;outline:0;padding:4px;scroll-padding-block:4px;display:block;overflow-y:auto}[part=items]{flex-direction:column;gap:2px;display:flex}::slotted(md-divider){margin-block:6px}@media (forced-colors:active){:host{border:1px solid canvastext}}`;
+export const menuStyles = css`:host{box-sizing:border-box;height:inherit;max-height:calc(100dvh - 16px);min-width:inherit;width:inherit;-webkit-user-select:none;user-select:none;outline:0;padding:4px;scroll-padding-block:4px;display:block;overflow-y:auto}[part=items]{flex-direction:column;gap:2px;display:flex}::slotted(md-divider){margin-block:6px}@media (forced-colors:active){:host{border:1px solid canvastext}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const navigationRailStyles = css`:host{background-color:var(--md-sys-color-surface-container);box-sizing:border-box;-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-block: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}::slotted([end]){margin-block-start:auto}`;
+export const navigationRailStyles = css`:host{background-color:var(--md-sys-color-surface-container);box-sizing:border-box;-webkit-user-select:none;user-select:none;flex-shrink:0;grid-template-rows:min-content auto;justify-content:space-between;gap:40px;width:96px;height:100%;padding-block:20px;display:grid;overflow:visible}.actions{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}::slotted([end]){margin-block-start:auto}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const popupStyles = css`:host{--_fast:var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);--_d:var(--md-sys-motion-spatial-default-duration);--_default:var(--_d) var(--md-sys-motion-spatial-default);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(--_fast), border-radius var(--_fast), display var(--_d) allow-discrete, overlay var(--_d) allow-discrete;border-radius:16px/46px;transform:scaleY(.35)}:host([strategy=fixed]){position:fixed}:host([vibrant]){--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)}}slot{opacity:0;transition:opacity 67ms;display:block}:host(:popover-open){opacity:1;transition:opacity 67ms linear, transform var(--_default), border-radius var(--_default);border-radius:16px;transform:scaleY(1);& slot{opacity:1;transition:opacity 67ms linear 67ms}}@starting-style{:host(:popover-open){opacity:0;border-radius:16px/46px;transform:scaleY(.35);& slot{opacity:0}}}`;
+export const popupStyles = css`:host{--_f:var(--md-sys-motion-spatial-fast-duration);--_fast:var(--_f) var(--md-sys-motion-spatial-fast);--_default:var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);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 .15s linear, transform var(--_fast), border-radius var(--_fast), display var(--_f) allow-discrete, overlay var(--_f) allow-discrete;border-radius:16px/32px;transform:scaleY(.5)}:host([quick]),:host([quick]) slot{transition:none!important}:host([vibrant]){--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)}}slot{opacity:0;transition:opacity 67ms;display:block}:host(:popover-open){opacity:1;transition:opacity 83ms linear, transform var(--_default), border-radius var(--_default);border-radius:16px;transform:scaleY(1);& slot{opacity:1;transition:opacity 67ms linear 67ms}}@starting-style{:host(:popover-open){opacity:0;border-radius:16px/32px;transform:scaleY(.5);& slot{opacity:0}}}`;

package/src/m3/popup/popup.d.ts

@@ -1,5 +1,6 @@
 import { Popup } from '../../base/popup.js';
 export declare class M3Popup extends Popup {
+    quick: boolean;
     vibrant: boolean;
     static styles: any[];
 }

package/src/m3/popup/popup.js

@@ -5,10 +5,14 @@ import { popupStyles } from './popup-styles.css.js';
 let M3Popup = class M3Popup extends Popup {
     constructor() {
         super(...arguments);
+        this.quick = false;
         this.vibrant = false;
     }
     static { this.styles = [...super.styles, popupStyles]; }
 };
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Popup.prototype, "quick", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Popup.prototype, "vibrant", void 0);

package/src/m3/progress/linear-progress-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const linearProgressStyles = css`:host{--_thickness:var(--md-linear-progress-thickness,4px);height:var(--_thickness);align-items:center;width:100%;display:flex;position:relative;overflow-x:hidden}[part~=gap]{max-width:4px;height:4px;position:relative}[part~=gap][part~=after]{flex-shrink:0;width:4px}[part~=track]{background-color:var(--md-sys-color-secondary-container);height:var(--_thickness);border-radius:9999px}[part~=track][part~=before]{flex-shrink:0;width:0}[part~=track][part~=after]{flex-shrink:0;width:100%}[part=active]{background-color:var(--md-sys-color-primary);height:var(--_thickness);transform-origin:0 0;border-radius:9999px;flex-grow:1;flex-shrink:1;width:0;margin:auto 0;transition:min-width .25s cubic-bezier(.4,0,.6,1);inset-block:0}[part=stop]{background-color:var(--md-sys-color-primary);height:4px;border-radius:9999px;width:4px;position:absolute;inset-inline-end:calc(2px * clamp(0, (var(--_thickness) - 4px) / 1px * 1000000, 1))}:host([indeterminate]){& [part~=gap][part~=before]{width:4px;animation:1.3s linear infinite gap-before}& [part~=gap][part~=after]{flex-shrink:1;animation:1.3s linear infinite gap-after}& [part~=track][part~=before]{animation:1.3s cubic-bezier(.3,0,.8,.15) infinite track-before}& [part~=track][part~=after]{animation:1.3s cubic-bezier(.3,0,.8,.15) infinite track-after}& [part=stop]{display:none}}@keyframes gap-before{0%{width:0}9.8%{width:0}20%{width:4px}to{width:4px}}@keyframes gap-after{61.5385%{width:4px}61.6385%{width:0}to{width:0}}@keyframes track-before{0%{width:0}18%{width:0}61.5385%{width:calc(50% - 4px);animation-timing-function:cubic-bezier(.05,.7,.1,1)}to{width:100%}}@keyframes track-after{0%{width:100%}61.5385%{width:0}to{width:0}}`;

package/src/m3/progress/linear-progress.d.ts

@@ -0,0 +1,22 @@
+import { ProgressBar } from '../../base/progressbar.js';
+/**
+ * TODO: wavy?
+ * NOTE: buffering progress indicator is no longer documented in MD3
+ *
+ * @tag md-linear-progress
+ *
+ * @csspart track
+ * @csspart gap
+ * @csspart active
+ * @csspart before
+ * @csspart after
+ */
+export declare class M3LinearProgress extends ProgressBar {
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-linear-progress': M3LinearProgress;
+    }
+}

package/src/m3/progress/linear-progress.js

@@ -0,0 +1,35 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { customElement } from '../../core/decorators.js';
+import { ProgressBar } from '../../base/progressbar.js';
+import { linearProgressStyles } from './linear-progress-styles.css.js';
+/**
+ * TODO: wavy?
+ * NOTE: buffering progress indicator is no longer documented in MD3
+ *
+ * @tag md-linear-progress
+ *
+ * @csspart track
+ * @csspart gap
+ * @csspart active
+ * @csspart before
+ * @csspart after
+ */
+let M3LinearProgress = class M3LinearProgress extends ProgressBar {
+    static { this.styles = [linearProgressStyles]; }
+    render() {
+        const progress = Math.min(Math.max(this.value, 0), 100);
+        const gapAfterStyle = {
+            width: this.indeterminate || (progress > 0 && progress < 100) ? '' : '0',
+        };
+        const trackAfterStyle = {
+            width: this.indeterminate ? '' : `${100 - progress}%`,
+        };
+        return html `<div part="track before"></div><div part="gap before"></div><div part="active"></div><div part="gap after" style="${styleMap(gapAfterStyle)}"></div><div part="track after" style="${styleMap(trackAfterStyle)}"></div><div part="stop"></div>`;
+    }
+};
+M3LinearProgress = __decorate([
+    customElement('md-linear-progress')
+], M3LinearProgress);
+export { M3LinearProgress };

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const radioStyles = css`:host{--_d:var(--md-sys-motion-effects-default-duration);--_default:var(--_d) var(--md-sys-motion-effects-default);--_slow:var(--md-sys-motion-effects-slow-duration) var(--md-sys-motion-effects-slow);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:20px;outline:0;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex;position:relative}.icon{z-index:1;width:20px;height:20px}.ring{fill:none;r:9px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px;transition:stroke var(--_default);will-change:r, stroke-width}:host(:state(checked)) .ring{stroke:var(--md-sys-color-primary)}.dot{fill:var(--md-sys-color-primary);r:0px;will-change:r}:host(:state(checked)) .dot{r:5px}:host(:state(checking)) .ring{animation:check-ring-1 var(--_default), check-ring-2 var(--_slow) var(--_d)}:host(:state(checking)) .dot{animation:check-dot-1 var(--_default), check-dot-2 var(--_slow) var(--_d)}@keyframes check-ring-1{0%{r:9px;stroke-width:2px}to{r:4.5px;stroke-width:9px}}@keyframes check-ring-2{0%{r:8px;stroke-width:2px}to{r:9px;stroke-width:2px}}@keyframes check-dot-1{0%,to{r:0px}}@keyframes check-dot-2{0%{r:7px}to{r:5px}}:host(:state(unchecking)) .ring{animation:uncheck-ring-1 var(--_default), uncheck-ring-2 var(--_slow) var(--_d)}:host(:state(unchecking)) .dot{animation:uncheck-dot-1 var(--_default)}@keyframes uncheck-ring-1{0%{r:9px;stroke:var(--md-sys-color-primary);stroke-width:2px}to{r:8px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px}}@keyframes uncheck-ring-2{0%{r:4.5px;stroke-width:9px}to{r:9px;stroke-width:2px}}@keyframes uncheck-dot-1{0%{fill:var(--md-sys-color-primary);r:5px}to{fill:var(--md-sys-color-on-surface-variant);r:7.5px}}:host([disabled]){pointer-events:none}:host([disabled]) .ring{stroke:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}:host([disabled]) .dot{fill:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-on-surface-variant:CanvasText}:host(:disabled) .ring{stroke:graytext}:host(:disabled) .dot{fill:graytext}}`;
+export const radioStyles = css`:host{--_d:var(--md-sys-motion-effects-default-duration);--_default:var(--_d) var(--md-sys-motion-effects-default);--_slow:var(--md-sys-motion-effects-slow-duration) var(--md-sys-motion-effects-slow);cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:20px;outline:0;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex;position:relative}.icon{z-index:1;width:20px;height:20px}.ring{fill:none;r:9px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px;transition:stroke var(--_default);will-change:r, stroke-width}:host(:state(checked)) .ring{stroke:var(--md-sys-color-primary)}.dot{fill:var(--md-sys-color-primary);r:0px;will-change:r}:host(:state(checked)) .dot{r:5px}:host(:state(checking)) .ring{animation:check-ring-1 var(--_default), check-ring-2 var(--_slow) var(--_d)}:host(:state(checking)) .dot{animation:check-dot-1 var(--_default), check-dot-2 var(--_slow) var(--_d)}@keyframes check-ring-1{0%{r:9px;stroke-width:2px}to{r:4.5px;stroke-width:9px}}@keyframes check-ring-2{0%{r:8px;stroke-width:2px}to{r:9px;stroke-width:2px}}@keyframes check-dot-1{0%,to{r:0px}}@keyframes check-dot-2{0%{r:7px}to{r:5px}}:host(:state(unchecking)) .ring{animation:uncheck-ring-1 var(--_default), uncheck-ring-2 var(--_slow) var(--_d)}:host(:state(unchecking)) .dot{animation:uncheck-dot-1 var(--_default)}@keyframes uncheck-ring-1{0%{r:9px;stroke:var(--md-sys-color-primary);stroke-width:2px}to{r:8px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px}}@keyframes uncheck-ring-2{0%{r:4.5px;stroke-width:9px}to{r:9px;stroke-width:2px}}@keyframes uncheck-dot-1{0%{fill:var(--md-sys-color-primary);r:5px}to{fill:var(--md-sys-color-on-surface-variant);r:7.5px}}:host([disabled]){pointer-events:none}:host([disabled]) .ring{stroke:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}:host([disabled]) .dot{fill:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-on-surface-variant:CanvasText}:host(:disabled) .ring{stroke:graytext}:host(:disabled) .dot{fill:graytext}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const selectStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}[part=field]{cursor:pointer;outline:none;width:100%}[part=value]{font:var(--md-sys-typography-body-large);height:1.5em}[part=popup]{--md-menu-max-height:300px;min-width:inherit}`;
+export const selectStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}[part=field]{cursor:pointer;outline:none;width:100%}[part=value]{font:var(--md-sys-typography-body-large);height:1.5em}[part=popup]{min-width:inherit}[part=menu]{max-height:400px}`;