@vollowx/seele 0.14.1 → 0.14.3

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

@@ -0,0 +1,29 @@
+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 { circularProgressStyles } from './circular-progress-styles.css.js';
+/**
+ * TODO: wavy?
+ *
+ * @tag md-circular-progress
+ *
+ * @csspart container
+ * @csspart track
+ * @csspart active
+ */
+let M3CircularProgress = class M3CircularProgress extends ProgressBar {
+    static { this.styles = [circularProgressStyles]; }
+    render() {
+        const progress = Math.min(Math.max(this.value, 0), 100);
+        const style = {
+            '--_value': `${progress === 100 ? 1.08 : (progress) / 100}`,
+        };
+        return html `<div part="container" aria-hidden="true" style="${styleMap(style)}"><svg xmlns="http://www.w3.org/2000/svg"><circle part="track"></circle><circle part="active"></circle></svg></div>`;
+    }
+};
+M3CircularProgress = __decorate([
+    customElement('md-circular-progress')
+], M3CircularProgress);
+export { M3CircularProgress };

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:oklch(from var(--md-sys-color-on-surface) l c h / 38%)}:host([disabled]) .dot{fill:oklch(from var(--md-sys-color-on-surface) l c h / 38%)}@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}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const sliderStyles = css`:host{--_target-size:48px;--_half-target:calc(var(--_target-size) / 2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,2px);--_track-shape:8px;--_track-height:var(--md-slider-track-height,16px);vertical-align:middle;min-inline-size:200px;display:inline-flex}md-focus-ring{width:16px;height:56px;inset:unset}:host([disabled]){opacity:.38}:host([disabled]) input{cursor:default;pointer-events:none}.container{--_start-px:calc(100% * var(--_start));--_end-px:calc(100% * var(--_end));--_inv-start-px:calc(100% * (1 - var(--_start)));--_inv-end-px:calc(100% * (1 - var(--_end)));--_mask-offset-start:calc(var(--_handle-width-start) / 2 + var(--_handle-margin));--_mask-offset-end:calc(var(--_handle-width-end) / 2 + var(--_handle-margin));--_cut-start:calc(var(--_start-px) + var(--_mask-offset-start));--_cut-end:calc(var(--_inv-end-px) + var(--_mask-offset-end));--_cut-inv-start:calc(var(--_inv-start-px) + var(--_mask-offset-start));--_cut-inv-end:calc(var(--_end-px) + var(--_mask-offset-end));block-size:var(--_target-size);pointer-events:none;touch-action:none;user-select:none;flex:1;align-items:center;display:flex;position:relative}.track,.tickmarks{block-size:var(--_track-height);align-items:center;display:flex;position:absolute;inset-inline:0}.track div,.tickmarks div{inset:0 calc(var(--_target-size) / 2);position:absolute}.track div{border-radius:var(--_track-shape)}.track .inactive-before,.track .inactive-after{background:var(--md-sys-color-secondary-container)}.track .active{background:var(--md-sys-color-primary)}:host([disabled]) .track .inactive-before,:host([disabled]) .track .inactive-after{background:var(--md-sys-color-on-surface);opacity:.315789}:host([disabled]) .track .active{background:var(--md-sys-color-on-surface)}.tickmarks div{--_tick-color:var(--md-sys-color-on-secondary-container);background-size:calc((100% - var(--_tick-size) * 2) / var(--_ticks)) 100%;background-image:radial-gradient(circle at var(--_tick-size) center, var(--_tick-color) 0, var(--_tick-color) calc(var(--_tick-size) / 2), transparent calc(var(--_tick-size) / 2))}.tickmarks .active{--_tick-color:var(--md-sys-color-on-primary)}:host([disabled]) .tickmarks div{--_tick-color:var(--md-sys-color-on-surface)}:host([disabled]) .tickmarks .active{--_tick-color:var(--md-sys-color-inverse-on-surface)}.inactive-before{clip-path:inset(0 var(--_cut-inv-start) 0 0 round 2px)}.inactive-after{clip-path:inset(0 0 0 var(--_cut-inv-end) round 2px)}.active{clip-path:inset(0 var(--_cut-end) 0 0 round 2px)}.ranged .active{clip-path:inset(0 var(--_cut-end) 0 var(--_cut-start) round 2px)}:host(:dir(rtl)) .inactive-before{clip-path:inset(0 0 0 var(--_cut-inv-start) round 2px)}:host(:dir(rtl)) .inactive-after{clip-path:inset(0 var(--_cut-inv-end) 0 0 round 2px)}:host(:dir(rtl)) .active{clip-path:inset(0 0 0 var(--_cut-end) round 2px)}:host(:dir(rtl)) .ranged .active{clip-path:inset(0 var(--_cut-start) 0 var(--_cut-end) round 2px)}.handles-padded{block-size:100%;inline-size:100%;padding-inline:calc(var(--_target-size) / 2);box-sizing:border-box;position:absolute;inset:0}.handles{block-size:100%;inline-size:100%;inline-size:calc(var(--_end-px) - var(--_start-px));position:relative;inset-block:0;inset-inline-start:var(--_start-px)}.handle{--md-ripple-color:var(--md-sys-color-primary);block-size:var(--_target-size);inline-size:var(--_target-size);border-radius:var(--_handle-shape);place-content:center;place-items:center;display:flex;position:absolute}.handle.start{inset-inline-start:calc(0px - var(--_half-target))}.handle.end{inset-inline-end:calc(0px - var(--_half-target))}.nub{height:var(--_handle-height);width:var(--_handle-width-end);border-radius:var(--_handle-shape);background:var(--md-sys-color-primary);transition:width var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);position:absolute}.start .nub{width:var(--_handle-width-start)}:host([disabled]) .nub{background:var(--md-sys-color-on-surface)}.onTop.isOverlapping .nub{border:1px solid var(--md-sys-color-surface)}.label{box-sizing:border-box;color:var(--md-sys-color-inverse-on-surface);background:var(--md-sys-color-inverse-surface);font:var(--md-sys-typography-label-large);opacity:0;border-radius:9999px;place-content:center;place-items:center;min-block-size:44px;min-inline-size:48px;padding:0 16px;transition:opacity 67ms linear;display:flex;position:absolute;inset-block-end:100%;transform:translateY(-2px)}:host(:not(:disabled)) :where(:has(input:active)) .label,:host(:not(:disabled)) :where(:has(input:focus-visible)) .label{opacity:1}@media (hover:hover) and (pointer:fine){:host(:not(:disabled)) :where(:has(input:hover)) .label{opacity:1}}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box;cursor:pointer;pointer-events:auto;appearance:none;width:100%;height:100%;margin:0;position:absolute}input[type=range]:focus{outline:none}:host(:not([disabled])) :has(input.start:active){--_handle-width-start:2px}:host(:not([disabled])) :has(input.end:active){--_handle-width-end:2px}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2;transform:scaleX(0)}.ranged input{--track-len:calc(100% - var(--_target-size));--mid-frac:calc(var(--_start) + ((var(--_end) - var(--_start)) / 2));--clip-px:calc(var(--_half-target) + var(--track-len) * var(--mid-frac))}.ranged input.start{clip-path:inset(0 calc(100% - var(--clip-px)) 0 0)}.ranged input.end{clip-path:inset(0 0 0 var(--clip-px))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - var(--clip-px)))}.ranged input.end:dir(rtl){clip-path:inset(0 var(--clip-px) 0 0)}.onTop{z-index:1}`;
+export const sliderStyles = css`:host{--_target-width:48px;--_half-target:calc(var(--_target-width) / 2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,4px);--_tick-color:var(--md-sys-color-on-secondary-container);--_tick-active-color:var(--md-sys-color-on-primary);--_track-shape:var(--md-slider-track-shape,8px);--_track-height:var(--md-slider-track-height,16px);isolation:isolate;vertical-align:middle;min-inline-size:200px;display:inline-flex}:host([size=s]){--md-slider-track-height:24px}:host([size=m]){--md-slider-handle-height:52px;--md-slider-track-height:40px;--md-slider-track-shape:12px}:host([size=l]){--md-slider-handle-height:68px;--md-slider-track-height:56px;--md-slider-track-shape:16px}:host([size=xl]){--md-slider-handle-height:108px;--md-slider-track-height:96px;--md-slider-track-shape:28px}md-focus-ring{height:calc(var(--_handle-height) + 12px);width:16px;inset:unset}:host([disabled]){--_tick-color:oklch(from var(--md-sys-color-on-surface) l c h / .38);--_tick-active-color:var(--md-sys-color-inverse-on-surface)}:host([disabled]) input{cursor:default;pointer-events:none}.container{block-size:var(--_handle-height);pointer-events:none;touch-action:none;user-select:none;flex:1;align-items:center;display:flex;position:relative}.track,.tickmarks{block-size:var(--_track-height);align-items:center;display:flex;position:absolute;inset-inline:0}.track div,.tickmarks div{--_clip-1:calc(var(--_clip-offset) + var(--_handle-margin) + (100% - var(--_clip-offset) * 2) * var(--_start-value) + var(--_handle-width-start) / 2);--_clip-1-till-end:calc(var(--_clip-offset) + var(--_handle-margin) + (100% - var(--_clip-offset) * 2) * (1 - var(--_start-value)) + var(--_handle-width-start) / 2);--_clip-2:calc(var(--_clip-offset) + var(--_handle-margin) + (100% - var(--_clip-offset) * 2) * var(--_end-value) + var(--_handle-width-end) / 2);--_clip-2-till-end:calc(var(--_clip-offset) + var(--_handle-margin) + (100% - var(--_clip-offset) * 2) * (1 - var(--_end-value)) + var(--_handle-width-end) / 2);inset:0 calc(var(--_target-width) / 2);position:absolute}.track div{--_clip-offset:6px;inset:0 calc(var(--_target-width) / 2 - var(--_clip-offset))}.track .inactive-before,.track .inactive-after{background:var(--md-sys-color-secondary-container)}.track .active{background:var(--md-sys-color-primary)}:host([disabled]) .track .inactive-before,:host([disabled]) .track .inactive-after{background:oklch(from var(--md-sys-color-on-surface) l c h / .12)}:host([disabled]) .track .active{background:oklch(from var(--md-sys-color-on-surface) l c h / .38)}.tickmarks div{--_clip-offset:calc(var(--_tick-size) / 2);inset:0 calc(var(--_target-width) / 2 - var(--_clip-offset));background-size:calc((100% - var(--_tick-size)) / var(--_ticks)) 100%;background-image:radial-gradient(circle at calc(var(--_tick-size) / 2) center, var(--_tick-color) 0, var(--_tick-color) calc(var(--_tick-size) / 2), transparent calc(var(--_tick-size) / 2))}.tickmarks .active{--_tick-color:var(--_tick-active-color)}.inactive-before{clip-path:inset(0 var(--_clip-1-till-end) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape))}.inactive-after{clip-path:inset(0 0 0 var(--_clip-2) round 2px var(--_track-shape) var(--_track-shape) 2px)}.active{clip-path:inset(0 var(--_clip-2-till-end) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape))}.ranged .active{clip-path:inset(0 var(--_clip-2-till-end) 0 var(--_clip-1) round 2px)}:host(:dir(rtl)) .inactive-before{clip-path:inset(0 0 0 var(--_clip-1-till-end) round 2px var(--_track-shape) var(--_track-shape) 2px)}:host(:dir(rtl)) .inactive-after{clip-path:inset(0 var(--_clip-2) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape))}:host(:dir(rtl)) .active{clip-path:inset(0 0 0 var(--_clip-2-till-end) round 2px var(--_track-shape) var(--_track-shape) 2px)}:host(:dir(rtl)) .ranged .active{clip-path:inset(0 var(--_clip-1) 0 var(--_clip-2-till-end) round 2px)}:host([stop]:not(:is([ticks],[range]))) .inactive-after:before{content:"";inline-size:var(--_tick-size);block-size:var(--_tick-size);background:var(--_tick-color);border-radius:50%;margin-block:auto;position:absolute;inset-block:0;inset-inline-end:calc(var(--_clip-offset) - var(--_tick-size) / 2)}.handles-padded{block-size:100%;inline-size:100%;padding-inline:calc(var(--_target-width) / 2);box-sizing:border-box;position:absolute;inset:0}.handles{block-size:100%;inline-size:100%;inline-size:calc(100% * (var(--_end-value) - var(--_start-value)));position:relative;inset-block:0;inset-inline-start:calc(100% * var(--_start-value))}.handle{block-size:var(--_handle-height);inline-size:var(--_target-width);place-content:center;place-items:center;display:flex;position:absolute}.handle.start{inset-inline-start:calc(0px - var(--_half-target))}.handle.end{inset-inline-end:calc(0px - var(--_half-target))}.nub{height:var(--_handle-height);width:var(--_handle-width-end);border-radius:var(--_handle-shape);background:var(--md-sys-color-primary);transition:width var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);position:absolute}.start .nub{width:var(--_handle-width-start)}:host([disabled]) .nub{background:oklch(from var(--md-sys-color-on-surface) l c h / .38)}.onTop.isOverlapping .nub{border:1px solid var(--md-sys-color-surface)}.label{box-sizing:border-box;color:var(--md-sys-color-inverse-on-surface);background:var(--md-sys-color-inverse-surface);font:var(--md-sys-typography-label-large);opacity:0;border-radius:9999px;place-content:center;place-items:center;min-block-size:44px;min-inline-size:48px;padding:0 16px;transition:opacity 67ms linear;display:flex;position:absolute;inset-block-end:100%;transform:translateY(-2px)}:host(:not(:disabled)) :where(:has(input:active)) .label,:host(:not(:disabled)) :where(:has(input:focus-visible)) .label{opacity:1}@media (hover:hover) and (pointer:fine){:host(:not(:disabled)) :where(:has(input:hover)) .label{opacity:1}}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box;cursor:pointer;pointer-events:auto;appearance:none;width:100%;height:100%;margin:0;position:absolute}input[type=range]:focus{outline:none}:host(:not([disabled])) :has(input.start:active){--_handle-width-start:2px}:host(:not([disabled])) :has(input.end:active){--_handle-width-end:2px}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_handle-height);inline-size:var(--_target-width);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_handle-height);inline-size:var(--_target-width);opacity:0;z-index:2;transform:scaleX(0)}.ranged input{--_track-len:calc(100% - var(--_target-width));--_mid-frac:calc(var(--_start-value) + ((var(--_end-value) - var(--_start-value)) / 2));--_clip-input:calc(var(--_half-target) + var(--_track-len) * var(--_mid-frac))}.ranged input.start{clip-path:inset(0 calc(100% - var(--_clip-input)) 0 0)}.ranged input.end{clip-path:inset(0 0 0 var(--_clip-input))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - var(--_clip-input)))}.ranged input.end:dir(rtl){clip-path:inset(0 var(--_clip-input) 0 0)}.onTop{z-index:1}`;

package/src/m3/slider/slider.d.ts

@@ -1,12 +1,15 @@
 import { Slider } from '../../base/slider.js';
 import '../focus-ring/focus-ring.js';
 /**
- * TODO: Add size variants
  * TODO: Add orientation: vertical
  *
  * @tag md-slider
  */
 export declare class M3Slider extends Slider {
+    size: 'xs' | 's' | 'm' | 'l' | 'xl';
+    stop: boolean;
+    ticks: boolean;
+    labeled: boolean;
     static styles: any[];
     render(): import("lit-html").TemplateResult<1>;
     private renderTrack;

package/src/m3/slider/slider.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
@@ -8,12 +8,18 @@ import { Slider } from '../../base/slider.js';
 import '../focus-ring/focus-ring.js';
 import { sliderStyles } from './slider-styles.css.js';
 /**
- * TODO: Add size variants
  * TODO: Add orientation: vertical
  *
  * @tag md-slider
  */
 let M3Slider = class M3Slider extends Slider {
+    constructor() {
+        super(...arguments);
+        this.size = 'xs';
+        this.stop = false;
+        this.ticks = false;
+        this.labeled = false;
+    }
     static { this.styles = [sliderStyles]; }
     render() {
         const step = this.step === 0 ? 1 : this.step;
@@ -23,8 +29,8 @@ let M3Slider = class M3Slider extends Slider {
             : 0;
         const endFraction = ((this.renderValueEnd ?? this.min) - this.min) / range;
         const containerStyles = {
-            '--_start': String(startFraction),
-            '--_end': String(endFraction),
+            '--_start-value': String(startFraction),
+            '--_end-value': String(endFraction),
             '--_ticks': String(range / step),
         };
         const containerClasses = { ranged: this.range };
@@ -76,6 +82,18 @@ let M3Slider = class M3Slider extends Slider {
         })}"><md-focus-ring part="focus-ring" for="${name}"></md-focus-ring><div class="nub"></div>${when(this.labeled, () => this.renderLabel(label))}</div>`;
     }
 };
+__decorate([
+    property({ reflect: true })
+], M3Slider.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], M3Slider.prototype, "stop", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], M3Slider.prototype, "ticks", void 0);
+__decorate([
+    property({ type: Boolean })
+], M3Slider.prototype, "labeled", void 0);
 M3Slider = __decorate([
     customElement('md-slider')
 ], M3Slider);

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const switchStyles = css`:host{--_outline-color:var(--md-sys-color-outline);--_track-color:var(--md-sys-color-surface-container-highest);--_thumb-color:var(--md-sys-color-outline);--_icon-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb, var(--_track-color) var(--_track-opacity,100%), transparent);border-color:color-mix(in srgb, var(--_outline-color) var(--_outline-opacity,100%), transparent);box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;height:32px;transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), border-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);-webkit-user-select:none;user-select:none;vertical-align:top;border-style:solid;border-width:2px;border-radius:9999px;outline:0;place-content:center;place-items:center;width:52px;display:inline-grid;position:relative}:host(:state(checked)){--_outline-color:var(--md-sys-color-primary);--_track-color:var(--md-sys-color-primary);--_thumb-color:var(--md-sys-color-on-primary);--_icon-color:var(--md-sys-color-on-primary-container);--_ripple-color:var(--md-sys-color-primary)}:host(:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:12%;--_track-color:var(--md-sys-color-surface-variant);--_track-opacity:12%;--_thumb-color:var(--md-sys-color-on-surface);--_thumb-opacity:38%;--_icon-color:var(--md-sys-color-surface-container-highest);cursor:default;pointer-events:none}:host(:disabled:state(checked)){--_outline-color:var(--md-sys-color-surface);--_track-color:var(--md-sys-color-on-surface);--_thumb-color:var(--md-sys-color-surface);--_thumb-opacity:100%;--_icon-color:var(--md-sys-color-on-surface)}:host([icons]:not(:state(checked)):not([checked-icon-only])) [part~=icon-off],:host([icons]:state(checked)) [part~=icon-on]{--_icon-opacity:100%}:host([icons]:state(checked):disabled) [part~=icon-on]{--_icon-opacity:38%}@media (hover:hover) and (pointer:fine){:host(:hover){--_thumb-color:var(--md-sys-color-on-surface-variant)}:host(:state(checked):hover){--_thumb-color:var(--md-sys-color-primary-container)}}@media (forced-colors:active){:host{forced-color-adjust:none}}[part~=thumb]{--_thumb-diameter:16px;--_thumb-diff-default:20px;background-color:color-mix(in srgb, var(--_thumb-color) var(--_thumb-opacity,100%), transparent);height:var(--_thumb-diameter);transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), width var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), height var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), margin var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);width:var(--_thumb-diameter);z-index:1;border-radius:50%;place-content:center;place-items:center;margin-inline-start:calc(var(--_thumb-diff-pointer,0px) - var(--_thumb-diff-default));display:grid;position:absolute}:host(:state(checked)) [part~=thumb]{--_thumb-diameter:24px;--_thumb-diff-default:-20px;background-color:var(--_thumb-color)}:host([icons]:not([checked-icon-only])) [part~=thumb]{--_thumb-diameter:24px}:host(:active) [part~=thumb]{--_thumb-color:var(--md-sys-color-on-surface-variant);--_thumb-diameter:28px!important}:host(:state(checked):active) [part~=thumb]{--_thumb-color:var(--md-sys-color-primary-container)}[part~=icons]{fill:color-mix(in srgb, var(--_icon-color) var(--_icon-opacity,0%), transparent);width:16px;height:16px;transition:fill 67ms linear;position:absolute}md-focus-ring{inset:-4px}md-ripple{color:var(--_ripple-color);height:40px;inset:unset;width:40px}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-primary-container:SelectedItemText;--md-sys-color-on-primary:SelectedItemText}}`;
+export const switchStyles = css`:host{--_outline-color:var(--md-sys-color-outline);--_track-color:var(--md-sys-color-surface-container-highest);--_thumb-color:var(--md-sys-color-outline);--_icon-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb, var(--_track-color) var(--_track-opacity,100%), transparent);border-color:color-mix(in srgb, var(--_outline-color) var(--_outline-opacity,100%), transparent);box-sizing:border-box;cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent;touch-action:none;height:32px;transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), border-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);-webkit-user-select:none;user-select:none;vertical-align:top;border-style:solid;border-width:2px;border-radius:9999px;outline:0;place-content:center;place-items:center;width:52px;display:inline-grid;position:relative}:host(:state(checked)){--_outline-color:var(--md-sys-color-primary);--_track-color:var(--md-sys-color-primary);--_thumb-color:var(--md-sys-color-on-primary);--_icon-color:var(--md-sys-color-on-primary-container);--_ripple-color:var(--md-sys-color-primary)}:host(:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:12%;--_track-color:var(--md-sys-color-surface-variant);--_track-opacity:12%;--_thumb-color:var(--md-sys-color-on-surface);--_thumb-opacity:38%;--_icon-color:var(--md-sys-color-surface-container-highest);cursor:default;pointer-events:none}:host(:disabled:state(checked)){--_outline-color:var(--md-sys-color-surface);--_track-color:var(--md-sys-color-on-surface);--_thumb-color:var(--md-sys-color-surface);--_thumb-opacity:100%;--_icon-color:var(--md-sys-color-on-surface)}:host([icons]:not(:state(checked)):not([checked-icon-only])) [part~=icon-off],:host([icons]:state(checked)) [part~=icon-on]{--_icon-opacity:100%}:host([icons]:state(checked):disabled) [part~=icon-on]{--_icon-opacity:38%}@media (hover:hover) and (pointer:fine){:host(:hover){--_thumb-color:var(--md-sys-color-on-surface-variant)}:host(:state(checked):hover){--_thumb-color:var(--md-sys-color-primary-container)}}@media (forced-colors:active){:host{forced-color-adjust:none}}[part~=thumb]{--_thumb-diameter:16px;--_thumb-diff-default:20px;background-color:color-mix(in srgb, var(--_thumb-color) var(--_thumb-opacity,100%), transparent);height:var(--_thumb-diameter);transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), width var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), height var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), margin var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);width:var(--_thumb-diameter);z-index:1;border-radius:50%;place-content:center;place-items:center;margin-inline-start:calc(var(--_thumb-diff-pointer,0px) - var(--_thumb-diff-default));display:grid;position:absolute}:host(:state(checked)) [part~=thumb]{--_thumb-diameter:24px;--_thumb-diff-default:-20px;background-color:var(--_thumb-color)}:host([icons]:not([checked-icon-only])) [part~=thumb]{--_thumb-diameter:24px}:host(:active) [part~=thumb]{--_thumb-color:var(--md-sys-color-on-surface-variant);--_thumb-diameter:28px!important}:host(:state(checked):active) [part~=thumb]{--_thumb-color:var(--md-sys-color-primary-container)}[part~=icons]{fill:color-mix(in srgb, var(--_icon-color) var(--_icon-opacity,0%), transparent);width:16px;height:16px;transition:fill 67ms linear;position:absolute}md-focus-ring{inset:-4px}md-ripple{color:var(--_ripple-color);height:40px;inset:unset;width:40px}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-primary-container:SelectedItemText;--md-sys-color-on-primary:SelectedItemText}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tabStyles = css`:host{--md-focus-ring-shape:12px;box-sizing:border-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:var(--md-sys-typography-title-small);-webkit-tap-highlight-color:transparent;text-wrap-mode:nowrap;user-select:none;-webkit-user-select-:none;outline:none;flex-shrink:0;justify-content:center;padding:0 16px;display:inline-flex;position:relative}:host([selected]){color:var(--_tab-selected-color);& md-focus-ring{margin-bottom:calc(var(--_indicator-height) + 2px)}& [part=indicator]{opacity:1}}:host([disabled]){pointer-events:none;color:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}[part=content]{flex-direction:var(--_tab-flex-dir,row);align-items:center;gap:var(--_tab-gap,8px);height:var(--_tab-height,48px);justify-content:center;display:inline-flex;position:relative}[part=indicator]{height:var(--_indicator-height);background-color:var(--md-sys-color-primary);opacity:0;transform-origin:0;pointer-events:none;will-change:transform, opacity;border-radius:3px 3px 0 0;min-width:24px;position:absolute;bottom:0;left:2px;right:2px}::slotted([slot=icon]){fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;
+export const tabStyles = css`:host{--md-focus-ring-shape:12px;box-sizing:border-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:var(--md-sys-typography-title-small);-webkit-tap-highlight-color:transparent;text-wrap-mode:nowrap;user-select:none;-webkit-user-select-:none;outline:none;flex-shrink:0;justify-content:center;padding:0 16px;display:inline-flex;position:relative}:host([selected]){color:var(--_tab-selected-color);& md-focus-ring{margin-bottom:calc(var(--_indicator-height) + 2px)}& [part=indicator]{opacity:1}}:host([disabled]){pointer-events:none;color:oklch(from var(--md-sys-color-on-surface) l c h / 38%)}[part=content]{flex-direction:var(--_tab-flex-dir,row);align-items:center;gap:var(--_tab-gap,8px);height:var(--_tab-height,48px);justify-content:center;display:inline-flex;position:relative}[part=indicator]{height:var(--_indicator-height);background-color:var(--md-sys-color-primary);opacity:0;transform-origin:0;pointer-events:none;will-change:transform, opacity;border-radius:3px 3px 0 0;min-width:24px;position:absolute;bottom:0;left:2px;right:2px}::slotted([slot=icon]){fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tooltipStyles = css`:host{background-color:var(--md-sys-color-inverse-surface);box-sizing:border-box;color:#0000;font:var(--md-sys-typography-body-small);max-width:var(--_max-width,300px);opacity:0;pointer-events:none;z-index:800;border-radius:4px;align-items:center;width:max-content;min-height:24px;padding:4px 8px;display:flex;position:absolute;top:0;left:0;transform:scaleY(.35)}:host(:state(closed)){display:none}:host(:state(opening):not([force-invisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transition:color linear 67ms 67ms, opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);transform:scaleY(1)}:host(:state(opened):not([force-invisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transform:scaleY(1)}:host(:state(closing):not([force-invisible])){color:#0000;opacity:0;transition:color linear 67ms, opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);transform:scaleY(.35)}`;
+export const tooltipStyles = css`:host{background-color:var(--md-sys-color-inverse-surface);color:#0000;font:var(--md-sys-typography-body-small);max-width:var(--_max-width,300px);opacity:0;width:max-content;min-height:24px;transition:color linear 67ms, opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), display var(--md-sys-motion-spatial-fast-duration) allow-discrete, overlay var(--md-sys-motion-spatial-fast-duration) allow-discrete;border-radius:4px;align-items:center;padding:4px 8px;display:flex;top:0;left:0;transform:scaleY(.5)}:host(:popover-open){color:var(--md-sys-color-inverse-on-surface);opacity:1;transition:color 67ms linear 67ms, opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);transform:scaleY(1)}@starting-style{:host(:popover-open){color:#0000;opacity:0;transform:scaleY(.5)}}`;

package/src/m3/tooltip/tooltip.d.ts

@@ -1,15 +1,8 @@
 import { Tooltip } from '../../base/tooltip.js';
 /**
  * @tag md-tooltip
- *
- * TODO: should not disable SSR, since the raw text would flash, but could try
- * to SSR a simpler one
  */
 export declare class M3Tooltip extends Tooltip {
-    readonly _durations: {
-        show: number;
-        hide: number;
-    };
     static styles: any[];
 }
 declare global {

package/src/m3/tooltip/tooltip.js

@@ -4,16 +4,9 @@ import { Tooltip } from '../../base/tooltip.js';
 import { tooltipStyles } from './tooltip-styles.css.js';
 /**
  * @tag md-tooltip
- *
- * TODO: should not disable SSR, since the raw text would flash, but could try
- * to SSR a simpler one
  */
 let M3Tooltip = class M3Tooltip extends Tooltip {
-    constructor() {
-        super(...arguments);
-        this._durations = { show: 150, hide: 150 };
-    }
-    static { this.styles = [tooltipStyles]; }
+    static { this.styles = [...super.styles, tooltipStyles]; }
 };
 M3Tooltip = __decorate([
     customElement('md-tooltip', true)

package/src/base/controllers/popover-controller.d.ts

@@ -1,35 +0,0 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { InternalsAttachedInterface } from '../mixins/internals-attached.js';
-import { MiddlewareData, Placement, Strategy } from '@floating-ui/dom';
-export declare function transformOriginFromArrow(placement: Placement, arrowData?: MiddlewareData['arrow']): string;
-export interface PopoverControllerConfig {
-    popover: () => HTMLElement | null;
-    trigger: () => HTMLElement | null;
-    positioning: {
-        placement: () => Placement;
-        strategy: () => Strategy;
-        offset: () => number;
-        windowPadding: () => number;
-    };
-    durations: {
-        open: () => number;
-        close: () => number;
-    };
-    onClickAway?: () => void;
-}
-export declare class PopoverController implements ReactiveController {
-    #private;
-    host: ReactiveControllerHost & InternalsAttachedInterface;
-    private readonly config;
-    private _open;
-    get open(): boolean;
-    private cleanupAutoUpdate?;
-    constructor(host: ReactiveControllerHost & InternalsAttachedInterface, config: PopoverControllerConfig);
-    hostConnected(): void;
-    hostDisconnected(): void;
-    animateOpen(): Promise<void>;
-    animateClose(): Promise<void>;
-    private cleanup;
-    private _dummyArrow;
-    reposition(): Promise<void>;
-}

package/src/base/controllers/popover-controller.js

@@ -1,163 +0,0 @@
-import { isServer } from 'lit';
-import { internals, } from '../mixins/internals-attached.js';
-import { autoUpdate, computePosition, arrow, flip, offset, shift, } from '@floating-ui/dom';
-export function transformOriginFromArrow(placement, arrowData) {
-    const { x: arrowX, y: arrowY } = arrowData || {};
-    const [side] = placement.split('-');
-    let originX = '';
-    let originY = '';
-    if (side === 'top') {
-        originX = arrowX != null ? `${arrowX}px` : 'center';
-        originY = 'bottom';
-    }
-    else if (side === 'bottom') {
-        originX = arrowX != null ? `${arrowX}px` : 'center';
-        originY = 'top';
-    }
-    else if (side === 'left') {
-        originX = 'right';
-        originY = arrowY != null ? `${arrowY}px` : 'center';
-    }
-    else if (side === 'right') {
-        originX = 'left';
-        originY = arrowY != null ? `${arrowY}px` : 'center';
-    }
-    return `${originX} ${originY}`;
-}
-export class PopoverController {
-    get open() {
-        return this._open;
-    }
-    constructor(host, config) {
-        this._open = false;
-        // Different from those in the Tooltip, these timers are used to manage the
-        // animation timing.
-        this.#openTimer = null;
-        this.#closeTimer = null;
-        // TODO: Provide the ability to specify an arrow element.
-        this._dummyArrow = isServer ? null : document.createElement('div');
-        this.#handleClickAway = (event) => {
-            const trigger = this.config.trigger();
-            const popover = this.config.popover();
-            const path = event.composedPath();
-            if (trigger && path.includes(trigger))
-                return;
-            if (popover && path.includes(popover))
-                return;
-            this.config.onClickAway?.();
-        };
-        (this.host = host).addController(this);
-        this.config = config;
-    }
-    hostConnected() {
-        // Initial state
-        if (!this._open) {
-            this.host[internals].states.add('closed');
-        }
-    }
-    hostDisconnected() {
-        this.cleanupAutoUpdate?.();
-        window.removeEventListener('pointerup', this.#handleClickAway);
-    }
-    // Different from those in the Tooltip, these timers are used to manage the
-    // animation timing.
-    #openTimer;
-    #closeTimer;
-    async animateOpen() {
-        if (this._open)
-            return;
-        this._open = true;
-        // Prevent the click that triggered the open from immediately closing it
-        // TODO: Use a global event listener to manage this more effectively
-        setTimeout(() => {
-            if (this._open) {
-                window.addEventListener('pointerup', this.#handleClickAway);
-            }
-        }, 0);
-        clearTimeout(this.#openTimer);
-        clearTimeout(this.#closeTimer);
-        const openDuration = this.config.durations.open();
-        this.host[internals].states.delete('closed');
-        this.host[internals].states.delete('closing');
-        const trigger = this.config.trigger();
-        const popover = this.config.popover();
-        if (trigger && popover) {
-            this.cleanupAutoUpdate?.();
-            this.cleanupAutoUpdate = autoUpdate(trigger, popover, () => this.reposition());
-            // Initial position
-            await this.reposition();
-        }
-        if (openDuration === 0) {
-            this.host[internals].states.add('opened');
-        }
-        else {
-            // Wait for a frame to ensure the element is rendered with base styles
-            // e.g. (opacity 0) before adding the opening state e.g. (opacity 1) to
-            // trigger transition.
-            requestAnimationFrame(() => {
-                if (this._open) {
-                    this.host[internals].states.add('opening');
-                }
-            });
-            this.#openTimer = setTimeout(() => {
-                this.host[internals].states.delete('opening');
-                this.host[internals].states.add('opened');
-            }, openDuration);
-        }
-    }
-    async animateClose() {
-        if (!this._open)
-            return;
-        this._open = false;
-        window.removeEventListener('pointerup', this.#handleClickAway);
-        clearTimeout(this.#openTimer);
-        clearTimeout(this.#closeTimer);
-        const closeDuration = this.config.durations.close();
-        const wasOpened = this.host[internals].states.has('opened');
-        this.host[internals].states.delete('opened');
-        this.host[internals].states.delete('opening');
-        if (closeDuration === 0 || !wasOpened) {
-            this.cleanup();
-            this.host[internals].states.delete('closing');
-            this.host[internals].states.add('closed');
-        }
-        else {
-            this.host[internals].states.add('closing');
-            this.#closeTimer = setTimeout(() => {
-                this.cleanup();
-                this.host[internals].states.delete('closing');
-                this.host[internals].states.add('closed');
-            }, closeDuration);
-        }
-    }
-    cleanup() {
-        this.cleanupAutoUpdate?.();
-        this.cleanupAutoUpdate = undefined;
-    }
-    async reposition() {
-        const trigger = this.config.trigger();
-        const popover = this.config.popover();
-        if (!trigger || !popover)
-            return Promise.resolve();
-        return computePosition(trigger, popover, {
-            placement: this.config.positioning.placement(),
-            strategy: this.config.positioning.strategy(),
-            middleware: [
-                offset(this.config.positioning.offset()),
-                flip({ padding: this.config.positioning.windowPadding() }),
-                shift({
-                    padding: this.config.positioning.windowPadding(),
-                    crossAxis: true,
-                }),
-                arrow({ element: this._dummyArrow }),
-            ],
-        }).then(({ x, y, placement, middlewareData }) => {
-            Object.assign(popover.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-                transformOrigin: transformOriginFromArrow(placement, middlewareData.arrow),
-            });
-        });
-    }
-    #handleClickAway;
-}

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

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export const loadingIndicatorStyles = 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}`;