@vollowx/seele 0.14.1 → 0.14.3

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const commonButtonStyles = css`@layer main{:host{--_padding:16px;--md-focus-ring-shape:calc(var(--_h) / 2);background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);font:var(--md-sys-typography-label-large);min-inline-size:64px;padding-inline:var(--_padding);transition:box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);justify-content:center;align-items:center;gap:8px;display:inline-flex}:host([size=xs]){--_padding:12px;gap:4px}:host([size=m]){--_padding:24px;font:var(--md-sys-typography-title-medium);gap:8px}:host([size=l]){--_padding:48px;font:var(--md-sys-typography-headline-small);gap:12px}:host([size=xl]){--_padding:64px;font:var(--md-sys-typography-headline-medium);gap:16px}:host([trailing-icon]){flex-direction:row-reverse}:host([variant=outlined]){padding-inline:calc(var(--_padding) - 1px)}:host([variant=text]){padding-inline:calc(var(--_padding) / 4 * 3)}::slotted([slot=icon]),::slotted([slot=icon-checked]){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([variant=elevated]){--_background-color:var(--md-sys-color-surface-container-low);--_text-color:var(--_color);box-shadow:var(--md-sys-elevation-shadow-1)}@media (hover:hover) and (pointer:fine){:host([variant=filled]:hover:not(:active)),:host([variant=tonal]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=elevated]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-2)}}}`;
+export const commonButtonStyles = css`@layer main{:host{--_padding:16px;--md-focus-ring-shape:calc(var(--_h) / 2);font:var(--md-sys-typography-label-large);min-inline-size:64px;padding-inline:var(--_padding);transition:box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);justify-content:center;align-items:center;gap:8px;display:inline-flex}:host([size=xs]){--_padding:12px;gap:4px}:host([size=m]){--_padding:24px;font:var(--md-sys-typography-title-medium);gap:8px}:host([size=l]){--_padding:48px;font:var(--md-sys-typography-headline-small);gap:12px}:host([size=xl]){--_padding:64px;font:var(--md-sys-typography-headline-medium);gap:16px}:host([trailing-icon]){flex-direction:row-reverse}:host([variant=outlined]){padding-inline:calc(var(--_padding) - 1px)}:host([variant=text]){padding-inline:calc(var(--_padding) / 4 * 3)}::slotted([slot=icon]),::slotted([slot=icon-checked]){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([variant=elevated]){background-color:var(--md-sys-color-surface-container-low);color:var(--_color);box-shadow:var(--md-sys-elevation-shadow-1)}@media (hover:hover) and (pointer:fine){:host([variant=filled]:hover:not(:active)),:host([variant=tonal]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=elevated]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-2)}}}`;

package/src/m3/button/icon-button-styles.css.js

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

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const sharedButtonStyles = css`@layer main;@layer shared{:host{--_on-color:var(--md-sys-color-on-primary);--_color:var(--md-sys-color-primary);--_h:40px;--_icon-size:20px;--_rs:12px;--_rp:8px;--_text-color:var(--_on-color);--_background-color:var(--_color);box-sizing:border-box;cursor:pointer;block-size:var(--_h);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;vertical-align:top;border-start-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));border-start-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));outline:0;flex-shrink:0;position:relative}:host([notransition]){transition:none!important}md-ripple,md-focus-ring{position:absolute}:host([size=xs]){--_h:32px}:host([size=m]){--_h:56px;--_icon-size:24px;--_rs:16px;--_rp:12px}:host([size=l]){--_h:96px;--_icon-size:32px;--_rs:28px;--_rp:16px}:host([size=xl]){--_h:136px;--_icon-size:40px;--_rs:28px;--_rp:16px}:host([color=secondary]){--_on-color:var(--md-sys-color-on-secondary);--_color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_on-color:var(--md-sys-color-on-tertiary);--_color:var(--md-sys-color-tertiary)}:host([variant=tonal]){--_background-color:var(--md-sys-color-secondary-container);--_text-color:var(--md-sys-color-on-secondary-container)}:host([variant=outlined]){--_background-color:transparent;--_text-color:var(--md-sys-color-on-surface-variant);--md-focus-ring-offset:3px;border-color:color-mix(in srgb, var(--md-sys-color-outline-variant) 100%, transparent);border-style:solid;border-width:1px;& md-ripple{inset:-1px}}:host([variant=text]){--_text-color:var(--_color);--_background-color:transparent!important}:host([square]){--md-focus-ring-shape:var(--_rs);border-radius:var(--_rs)}@media (forced-colors:active){:host{forced-color-adjust:none;color:buttontext;background:buttonface;border:1px solid buttonborder}}}@layer shared-toggle,override;@layer active{:host(:active),:host(:state(active)){--md-focus-ring-shape:var(--_rp);border-radius:var(--_rp)}}@layer disabled{:host([variant=outlined]:disabled){--_background-color:var(--md-sys-color-outline)}:host(:disabled),:host([variant=outlined]:state(checked):disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:10%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;border-color:color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);box-shadow:none;pointer-events:none}@media (forced-colors:active){:host(:disabled){color:graytext;border-color:graytext}}}`;
+export const sharedButtonStyles = css`@layer main;@layer shared{:host{--_on-color:var(--md-sys-color-on-primary);--_color:var(--md-sys-color-primary);--_h:40px;--_icon-size:20px;--_rs:12px;--_rp:8px;color:var(--_on-color);background-color:var(--_color);box-sizing:border-box;cursor:pointer;block-size:var(--_h);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;vertical-align:top;border-start-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));border-start-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));outline:0;flex-shrink:0;position:relative}:host([notransition]){transition:none!important}md-ripple,md-focus-ring{position:absolute}:host([size=xs]){--_h:32px}:host([size=m]){--_h:56px;--_icon-size:24px;--_rs:16px;--_rp:12px}:host([size=l]){--_h:96px;--_icon-size:32px;--_rs:28px;--_rp:16px}:host([size=xl]){--_h:136px;--_icon-size:40px;--_rs:28px;--_rp:16px}:host([color=secondary]){--_on-color:var(--md-sys-color-on-secondary);--_color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_on-color:var(--md-sys-color-on-tertiary);--_color:var(--md-sys-color-tertiary)}:host([variant=tonal]){background-color:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}:host([variant=outlined]){--md-focus-ring-offset:3px;color:var(--md-sys-color-on-surface-variant);border-color:var(--md-sys-color-outline-variant);background-color:#0000;border-style:solid;border-width:1px;& md-ripple{inset:-1px}}:host([variant=text]){color:var(--_color);background-color:#0000}:host([square]){--md-focus-ring-shape:var(--_rs);border-radius:var(--_rs)}@media (forced-colors:active){:host{forced-color-adjust:none;color:buttontext;background:buttonface;border:1px solid buttonborder}}}@layer shared-toggle,override;@layer active{:host(:active),:host(:state(active)){--md-focus-ring-shape:var(--_rp);border-radius:var(--_rp)}}@layer disabled{:host([variant=outlined]:disabled){background-color:oklch(from var(--md-sys-color-outline) l c h / 10%)}:host(:disabled),:host([variant=outlined]:state(checked):disabled){background-color:oklch(from var(--md-sys-color-on-surface) l c h / 10%);color:oklch(from var(--md-sys-color-on-surface) l c h / 38%);border-color:oklch(from var(--md-sys-color-on-surface) l c h / 10%);box-shadow:none;pointer-events:none}@media (forced-colors:active){:host(:disabled){color:graytext;border-color:graytext}}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const sharedButtonToggleStyles = css`@layer shared-toggle{:host{transition:border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast)}:host(:state(checked)){--md-focus-ring-shape:var(--_rs);border-radius:var(--_rs)}:host(:state(checked)) [part~=unchecked],:host(:not(:state(checked))) [part~=checked]{display:none}:host([variant=filled]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=tonal]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container-highest);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=outlined]:state(checked)){--_background-color:var(--md-sys-color-inverse-surface);--_text-color:var(--md-sys-color-inverse-on-surface);border-width:0}@media (forced-colors:active){:host(:state(checked)){color:highlighttext;background:highlight}}}`;
+export const sharedButtonToggleStyles = css`@layer shared-toggle{:host{transition:border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast)}:host(:state(checked)){--md-focus-ring-shape:var(--_rs);border-radius:var(--_rs)}:host(:state(checked)) [part~=unchecked],:host(:not(:state(checked))) [part~=checked]{display:none}:host([variant=filled]:not(:state(checked))){background-color:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant)}:host([variant=tonal]:not(:state(checked))){background-color:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface-variant)}:host([variant=outlined]:state(checked)){background-color:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface);border-width:0}@media (forced-colors:active){:host(:state(checked)){color:highlighttext;background:highlight}}}`;

package/src/m3/button-group/connected-button-group-styles.css.js

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

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const fabStyles = css`:host{--md-focus-ring-shape:var(--_border-radius);--_text-color:var(--md-sys-color-on-primary);--_background-color:var(--md-sys-color-primary);--_size:56px;--_border-radius:16px;--_icon-size:24px;background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);border-radius:var(--_border-radius);box-shadow:var(--md-sys-elevation-shadow-3);box-sizing:border-box;color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);cursor:pointer;font:var(--md-sys-typography-label-large);height:var(--_size);min-width:var(--_size);padding-inline:calc((var(--_size) - var(--_icon-size)) / 2);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);-webkit-user-select:none;user-select:none;vertical-align:middle;outline:0;justify-content:center;align-items:center;gap:8px;display:inline-flex;position:relative}md-ripple,md-focus-ring{position:absolute}:host([size=m]){--_size:80px;--_border-radius:20px;--_icon-size:28px}:host([size=l]){--_size:96px;--_border-radius:28px;--_icon-size:36px}:host([color=primary-container]){--_text-color:var(--md-sys-color-on-primary-container);--_background-color:var(--md-sys-color-primary-container)}:host([color=secondary-container]){--_text-color:var(--md-sys-color-on-secondary-container);--_background-color:var(--md-sys-color-secondary-container)}:host([color=tertiary-container]){--_text-color:var(--md-sys-color-on-tertiary-container);--_background-color:var(--md-sys-color-tertiary-container)}:host([color=secondary]){--_text-color:var(--md-sys-color-on-secondary);--_background-color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_text-color:var(--md-sys-color-on-tertiary);--_background-color:var(--md-sys-color-tertiary)}:host([color=surface]){--_text-color:var(--md-sys-color-primary);--_background-color:var(--md-sys-color-surface-container-high)}:host(:disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:12%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;box-shadow:none;pointer-events:none}@media (hover:hover) and (pointer:fine){:host(:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-4)}}::slotted(:not([slot=label])){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}::slotted([slot=label]){margin-inline:4px}@media (forced-colors:active){:host{forced-color-adjust:none;color:buttontext;background:buttonface;border:1px solid buttonborder}}`;
+export const fabStyles = css`:host{--md-focus-ring-shape:var(--_border-radius);--_size:56px;--_border-radius:16px;--_icon-size:24px;background-color:var(--md-sys-color-primary);border-radius:var(--_border-radius);box-shadow:var(--md-sys-elevation-shadow-3);box-sizing:border-box;color:var(--md-sys-color-on-primary);cursor:pointer;font:var(--md-sys-typography-label-large);height:var(--_size);min-width:var(--_size);padding-inline:calc((var(--_size) - var(--_icon-size)) / 2);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);-webkit-user-select:none;user-select:none;vertical-align:middle;outline:0;justify-content:center;align-items:center;gap:8px;display:inline-flex;position:relative}md-ripple,md-focus-ring{position:absolute}:host([size=m]){--_size:80px;--_border-radius:20px;--_icon-size:28px}:host([size=l]){--_size:96px;--_border-radius:28px;--_icon-size:36px}:host([color=primary-container]){color:var(--md-sys-color-on-primary-container);background-color:var(--md-sys-color-primary-container)}:host([color=secondary-container]){color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-secondary-container)}:host([color=tertiary-container]){color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container)}:host([color=secondary]){color:var(--md-sys-color-on-secondary);background-color:var(--md-sys-color-secondary)}:host([color=tertiary]){color:var(--md-sys-color-on-tertiary);background-color:var(--md-sys-color-tertiary)}:host([color=surface]){color:var(--md-sys-color-primary);background-color:var(--md-sys-color-surface-container-high)}:host(:disabled){background-color:oklch(from var(--md-sys-color-on-surface) l c h / 10%);color:oklch(from var(--md-sys-color-on-surface) l c h / 38%);box-shadow:none;pointer-events:none}@media (hover:hover) and (pointer:fine){:host(:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-4)}}::slotted(:not([slot=label])){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}::slotted([slot=label]){margin-inline:4px}@media (forced-colors:active){:host{forced-color-adjust:none;color:buttontext;background:buttonface;border:1px solid buttonborder}}`;

package/src/m3/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/circular-progress-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const circularProgressStyles = css`:host{--_size:var(--md-circular-progress-size,40px);--_thickness:var(--md-circular-progress-thickness,4px);--_gap:var(--md-circular-progress-gap,4px);--_value:0;height:var(--_size);width:var(--_size);display:inline-flex;position:relative;overflow:hidden}[part=container]{width:100%;height:100%;position:absolute;transform:rotate(-90deg)}svg{fill:#0000;width:100%;height:100%}[part~=track]{stroke:var(--md-sys-color-secondary-container);stroke-width:var(--_thickness);stroke-linecap:round;cx:calc(var(--_size) / 2);cy:calc(var(--_size) / 2);r:calc((var(--_size) - var(--_thickness)) / 2);stroke-dasharray:min((1 - var(--_value)) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) - var(--_gap) - var(--_thickness), 6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap) - var(--_gap) - 2 * var(--_thickness)) calc(6.28319 * (var(--_size) - var(--_thickness)) / 2 - min((1 - var(--_value)) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) - var(--_gap) - var(--_thickness), 6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap) - var(--_gap) - 2 * var(--_thickness)));stroke-dashoffset:calc(min((1 - var(--_value)) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) - var(--_gap) - var(--_thickness), 6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap) - var(--_gap) - 2 * var(--_thickness)) + var(--_gap) + var(--_thickness));transition:stroke-dasharray .5s cubic-bezier(0,0,.2,1),stroke-dashoffset .5s cubic-bezier(0,0,.2,1),stroke-width .25s cubic-bezier(.4,0,.6,1)}[part=active]{stroke:var(--md-sys-color-primary);stroke-width:var(--_thickness);stroke-linecap:round;cx:calc(var(--_size) / 2);cy:calc(var(--_size) / 2);r:calc((var(--_size) - var(--_thickness)) / 2);stroke-dasharray:calc(var(--_value) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) - var(--_thickness)) calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - var(--_value) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) + var(--_thickness));transition:stroke-dasharray .5s cubic-bezier(0,0,.2,1),stroke-width .25s cubic-bezier(.4,0,.6,1)}:host([indeterminate]){animation:6s linear infinite rotate;& [part=container]{animation:6s infinite container-rotate}& [part=track]{animation:6s infinite track-grow}& [part=active]{animation:6s infinite active-grow}}@keyframes rotate{0%{transform:rotate(-90deg)}to{transform:rotate(990deg)}}@keyframes container-rotate{0%{transform:rotate(0)}8.33333%{transform:rotate(90deg)}25%{transform:rotate(90deg)}33.3333%{transform:rotate(180deg)}50%{transform:rotate(180deg)}58.3333%{transform:rotate(270deg)}75%{transform:rotate(270deg)}83.3333%{transform:rotate(360deg)}to{transform:rotate(360deg)}}@keyframes track-grow{0%{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 - var(--_gap) - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 + var(--_gap) + var(--_thickness));stroke-dashoffset:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 - var(--_gap) - var(--_thickness) + var(--_gap) + var(--_thickness))}50%{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .13 - var(--_gap) - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .13 + var(--_gap) + var(--_thickness));stroke-dashoffset:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .13 - var(--_gap) - var(--_thickness) + var(--_gap) + var(--_thickness))}to{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 - var(--_gap) - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 + var(--_gap) + var(--_thickness));stroke-dashoffset:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 - var(--_gap) - var(--_thickness) + var(--_gap) + var(--_thickness))}}@keyframes active-grow{0%{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .16 - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .16 + var(--_thickness))}50%{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .87 - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .87 + var(--_thickness))}to{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .16 - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .16 + var(--_thickness))}}`;

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

@@ -0,0 +1,19 @@
+import { ProgressBar } from '../../base/progressbar.js';
+/**
+ * TODO: wavy?
+ *
+ * @tag md-circular-progress
+ *
+ * @csspart container
+ * @csspart track
+ * @csspart active
+ */
+export declare class M3CircularProgress extends ProgressBar {
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-circular-progress': M3CircularProgress;
+    }
+}