@moni-labs/moni-ui 0.4.0 → 0.4.2

package/dist/cdn/components/moni-nav.js

@@ -0,0 +1,161 @@
+import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-DxX3e27g.js";var s=class extends t{constructor(...e){super(...e),this.placement=`top`,this.variant=`rail`,this.modal=!1,this.open=!0,this.layout=`auto`,this._propagateToItems=()=>{this.querySelectorAll(`moni-nav-item`).forEach(e=>{e.setAttribute(`placement`,this.placement),e.setAttribute(`variant`,this.variant),e.setAttribute(`layout`,this.layout)})}}connectedCallback(){super.connectedCallback(),this._onKeydown=this._onKeydown.bind(this),document.addEventListener(`keydown`,this._onKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`keydown`,this._onKeydown)}_onKeydown(e){e.key===`Escape`&&this.modal&&this.open&&(this.open=!1)}_closeModal(){this.modal&&(this.open=!1)}updated(e){(e.has(`placement`)||e.has(`variant`)||e.has(`layout`)||e.has(`modal`)||e.has(`open`))&&this._propagateToItems()}static{this.styles=[i,n`
+			:host {
+				/* Block so the host establishes a layout context for fixed
+				   descendants. The inner <nav> still handles all positioning. */
+				display: block;
+				font-family: var(--font);
+				inline-size: 100%;
+			}
+
+			nav {
+				display: flex;
+				gap: 0.5rem;
+				padding: 0 1rem;
+				background-color: var(--surface-container);
+				color: var(--on-surface);
+				align-items: center;
+				box-sizing: border-box;
+			}
+
+			:host([placement='top']) nav,
+			:host([placement='bottom']) nav {
+				flex-direction: row;
+				justify-content: space-around;
+				inline-size: 100%;
+			}
+
+			:host([placement='bottom']) nav {
+				position: fixed;
+				inset-block-end: 0;
+				inset-inline: 0;
+				z-index: 100;
+				background-color: var(--surface-container);
+				min-block-size: 4rem; /* 64dp flexible nav bar */
+				padding-block-end: env(safe-area-inset-bottom, 0px);
+			}
+
+			:host([placement='top']) nav {
+				position: sticky;
+				inset-block-start: 0;
+				z-index: 100;
+				background-color: var(--surface-container);
+				min-block-size: 4rem; /* 64dp flexible nav bar */
+			}
+
+			:host([placement='left']) nav,
+			:host([placement='right']) nav {
+				flex-direction: column;
+				block-size: 100dvh;
+				padding-block: 1rem;
+			}
+
+			:host([placement='left'][variant='rail']) nav,
+			:host([placement='right'][variant='rail']) nav {
+				min-inline-size: 6rem;
+			}
+
+			:host([placement='left'][variant='drawer']) nav,
+			:host([placement='right'][variant='drawer']) nav {
+				min-inline-size: 16rem;
+			}
+
+			:host([placement='left']) nav {
+				position: fixed;
+				inset-inline-start: 0;
+				inset-block: 0;
+				z-index: 100;
+			}
+
+			:host([placement='right']) nav {
+				position: fixed;
+				inset-inline-end: 0;
+				inset-block: 0;
+				z-index: 100;
+			}
+
+			/* Modal drawer scrim/backdrop */
+			.scrim {
+				display: none;
+				position: fixed;
+				inset: 0;
+				z-index: 99;
+				background-color: var(--scrim);
+				opacity: 0;
+				transition: opacity var(--speed2);
+			}
+
+			:host([variant='drawer'][modal]) .scrim {
+				display: block;
+			}
+
+			:host([variant='drawer'][modal][open]) .scrim {
+				opacity: 1;
+			}
+
+			/* Modal drawer closed state slides off-screen */
+			:host([placement='left'][variant='drawer'][modal]:not([open])) nav {
+				transform: translateX(-100%);
+			}
+			:host([placement='right'][variant='drawer'][modal]:not([open])) nav {
+				transform: translateX(100%);
+			}
+
+			:host([variant='drawer'][modal]) nav {
+				transition: transform var(--speed3) cubic-bezier(0.2, 0, 0, 1);
+			}
+
+			/* Nav items inside horizontal placements stretch to fill. */
+			:host([placement='top']) ::slotted(moni-nav-item),
+			:host([placement='bottom']) ::slotted(moni-nav-item) {
+				flex: 1;
+				min-inline-size: 0;
+			}
+
+			/* Slots header/footer in vertical nav */
+			:host([placement='left']) ::slotted([slot='header']),
+			:host([placement='right']) ::slotted([slot='header']) {
+				padding-block: 1rem;
+				inline-size: 100%;
+			}
+			:host([placement='left']) ::slotted([slot='footer']),
+			:host([placement='right']) ::slotted([slot='footer']) {
+				margin-block-start: auto;
+				padding-block: 1rem;
+				inline-size: 100%;
+			}
+
+			@media only screen and (max-width: 600px) {
+				nav {
+					position: fixed !important;
+					inset-block-end: 0 !important;
+					inset-inline: 0 !important;
+					z-index: 100 !important;
+					background-color: var(--surface-container) !important;
+					min-block-size: 4rem !important;
+					padding-block-end: env(safe-area-inset-bottom, 0px) !important;
+					flex-direction: row !important;
+					justify-content: space-around !important;
+					block-size: auto !important;
+					inline-size: 100% !important;
+				}
+				::slotted(moni-nav-item) {
+					flex: 1 !important;
+					min-inline-size: 0 !important;
+				}
+			}
+		`]}render(){let t=this.variant===`drawer`&&this.modal,n=[this.placement,this.variant===`drawer`?`max`:``].filter(Boolean).join(` `),r=t?e`<div
+					class="scrim"
+					part="scrim"
+					@click=${this._closeModal}
+					aria-hidden="true"
+				></div>`:``;return e`${r}<nav
+				class=${n}
+				part="nav"
+				role=${t?`dialog`:void 0}
+				aria-modal=${t?`true`:void 0}
+				aria-expanded=${t?this.open?`true`:`false`:void 0}
+			>
+				<slot name="header"></slot>
+				<slot @slotchange=${this._propagateToItems}></slot>
+				<slot name="footer"></slot>
+			</nav>`}};o([r({reflect:!0})],s.prototype,`placement`,void 0),o([r({reflect:!0})],s.prototype,`variant`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`modal`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`open`,void 0),o([r({reflect:!0})],s.prototype,`layout`,void 0),s=o([a(`moni-nav`)],s);

package/dist/cdn/components/moni-progress.js

@@ -0,0 +1,420 @@
+import{a as e,c as t,d as n,i as r,m as i,o as a,p as o,r as s,s as c,t as l}from"../chunks/decorate-DxX3e27g.js";var u=class extends r{constructor(...e){super(...e),this.value=0,this.max=100,this.variant=`linear`,this.size=`medium`,this.indeterminate=!1,this.mode=`determinate`,this.bufferValue=0,this.stopIndicator=!1,this.waveTransition=!1,this.label=`Progress`,this._percentage=0,this._reduceMotion=!1,this._handleMotionPreference=e=>{this._reduceMotion=e.matches}}connectedCallback(){super.connectedCallback(),!(typeof window>`u`||!window.matchMedia)&&(this._motionQuery=window.matchMedia(`(prefers-reduced-motion: reduce)`),this._reduceMotion=this._motionQuery.matches,this._motionQuery.addEventListener(`change`,this._handleMotionPreference))}disconnectedCallback(){this._motionQuery?.removeEventListener(`change`,this._handleMotionPreference),this._motionQuery=void 0,super.disconnectedCallback()}willUpdate(e){if(e.has(`value`)||e.has(`max`)){let e=Number.isFinite(this.max)&&this.max>0?this.max:100,t=Number.isFinite(this.value)?this.value:0;this._percentage=Math.min(100,Math.max(0,t/e*100))}e.has(`variant`)&&![`linear`,`circular`,`wavy`,`circular-wavy`].includes(this.variant)&&(this.variant=`linear`),e.has(`mode`)&&![`determinate`,`buffer`].includes(this.mode)&&(this.mode=`determinate`)}get _isCircular(){return this.variant===`circular`||this.variant===`circular-wavy`}get _isWavy(){return this.variant===`wavy`||this.variant===`circular-wavy`}get _isBuffer(){return!this.indeterminate&&this.mode===`buffer`}get _bufferPercentage(){let e=Number.isFinite(this.max)&&this.max>0?this.max:100,t=Number.isFinite(this.bufferValue)?this.bufferValue:0;return Math.max(this._percentage,Math.min(100,Math.max(0,t/e*100)))}_aria(){return{role:`progressbar`,label:this.label,valueNow:this.indeterminate?t:this.value,valueText:this.indeterminate?`Loading`:`${Math.round(this._percentage)}%`}}_renderLinear(){let e=this._aria(),r=this._percentage>0,i=r&&this._percentage<=2,a=r?this._percentage:0,s=this._isBuffer&&this._bufferPercentage>a,c=`M-40 7 C-35 7 -35 4 -30 4 S-25 7 -20 7 S-15 10 -10 10 S-5 7 0 7 C5 7 5 4 10 4 S15 7 20 7 S25 10 30 10 S35 7 40 7 C45 7 45 4 50 4 S55 7 60 7 S65 10 70 10 S75 7 80 7`,l=`M-40 7 C-35 7 -35 7 -30 7 S-25 7 -20 7 S-15 7 -10 7 S-5 7 0 7 C5 7 5 7 10 7 S15 7 20 7 S25 7 30 7 S35 7 40 7 C45 7 45 7 50 7 S55 7 60 7 S65 7 70 7 S75 7 80 7`;return n`
+			<div
+				class="linear progress-linear ${this._isWavy?`wavy progress-wavy`:`flat`} ${this.indeterminate?`indeterminate`:this._isBuffer?`buffer`:`determinate`}"
+				part="progress"
+				role=${e.role}
+				aria-label=${e.label}
+				aria-valuemin="0"
+				aria-valuemax=${this.max}
+				aria-valuenow=${e.valueNow}
+				aria-valuetext=${e.valueText}
+				style="--_progress: ${this._percentage}%; --_p: ${this._percentage}; --_active-end: ${r?`max(var(--_thickness), ${this._percentage}%)`:`0px`}; --_buffer-start: ${a}%; --_buffer-end: ${this._bufferPercentage}%; --_buffer-gap-start: ${r?`var(--_gap)`:`0px`};"
+			>
+				${this._isWavy?n`<svg class="wave-svg" aria-hidden="true">
+						<defs>
+							<pattern id="progress-wave" width="40" height="14" patternUnits="userSpaceOnUse">
+								<path d=${c}>
+									${this.waveTransition&&!this._reduceMotion?o`<animate attributeName="d" values="${c};${l};${l};${c};${c}" keyTimes="0;0.25;0.5;0.75;1" dur="2s" calcMode="spline" keySplines="0.2 0 0 1;0 0 1 1;0.2 0 0 1;0 0 1 1" repeatCount="indefinite"></animate>`:t}
+								</path>
+							</pattern>
+							${this.indeterminate?o`
+								<mask id="wave-active-mask">
+									<rect width="100%" height="14" fill="black"></rect>
+									<rect class="mask-window primary-window" width="8%" height="14" rx="7" fill="white"></rect>
+									<rect class="mask-window secondary-window" width="8%" height="14" rx="7" fill="white"></rect>
+								</mask>
+								<mask id="wave-track-mask">
+									<rect width="100%" height="14" fill="white"></rect>
+									<rect class="mask-window inverse-window primary-window" width="8%" height="14" rx="7" fill="black"></rect>
+									<rect class="mask-window inverse-window secondary-window" width="8%" height="14" rx="7" fill="black"></rect>
+								</mask>`:t}
+						</defs>
+						${this.indeterminate?o`<rect class="indeterminate-track" x="0" y="5" width="100%" height="4" rx="2" mask="url(#wave-track-mask)"></rect>
+								<rect class="wave-surface" x="0" y="0" width="100%" height="14" mask="url(#wave-active-mask)" part="indicator"></rect>`:o`<rect class="wave-window active ${i?`initial`:``}" part="indicator" x="0" y="0" width="${this._percentage}%" height="14" rx="7" ry="7"></rect>
+								${i?o`<circle class="initial-dot" cx="7" cy="7" r="2"></circle>`:t}`}
+					</svg>`:this.indeterminate?n`<svg class="flat-indeterminate-svg" aria-hidden="true">
+							<defs>
+								<mask id="flat-active-mask">
+									<rect width="100%" height="100%" fill="black"></rect>
+									<rect class="mask-window primary-window" width="8%" height="100%" rx="7" fill="white"></rect>
+									<rect class="mask-window secondary-window" width="8%" height="100%" rx="7" fill="white"></rect>
+								</mask>
+								<mask id="flat-track-mask">
+									<rect width="100%" height="100%" fill="white"></rect>
+									<rect class="mask-window inverse-window primary-window" width="8%" height="100%" rx="7" fill="black"></rect>
+									<rect class="mask-window inverse-window secondary-window" width="8%" height="100%" rx="7" fill="black"></rect>
+								</mask>
+							</defs>
+							<rect class="flat-track-surface" width="100%" height="100%" rx="7" mask="url(#flat-track-mask)"></rect>
+							<rect class="flat-active-surface" width="100%" height="100%" mask="url(#flat-active-mask)" part="indicator"></rect>
+						</svg>`:n`<span class="active" part="indicator"></span>`}
+				${s?n`<span class="buffer-segment" part="buffer"></span>`:t}
+				<span class="track track-before" part="track"></span>
+				<span class="track track-after" part="track"></span>
+				${this.stopIndicator?n`<span class="stop" part="stop-indicator"></span>`:t}
+			</div>
+		`}_circularPath(e=0,t=100,n=1.6,r=0){let i=Math.max(0,t-e),a=Math.max(2,Math.ceil(i/100*120)),o=[];for(let t=0;t<=a;t++){let s=e+t/a*i,c=s/100*Math.PI*2-Math.PI/2,l=19+Math.sin((s/100*8+r)*Math.PI*2)*n,u=26+Math.cos(c)*l,d=26+Math.sin(c)*l;o.push(`${t===0?`M`:`L`}${u.toFixed(2)} ${d.toFixed(2)}`)}return o.join(` `)}_circularWaveFrames(e){let t=this.waveTransition?[1.6,0,0,1.6,1.6]:[1.6,1.6,1.6,1.6,1.6];return[0,.25,.5,.75,1].map((n,r)=>this._circularPath(0,e,t[r],n)).join(`;`)}_circularGapPercentage(){let{size:e,thickness:t}={small:{size:40,thickness:4},medium:{size:44,thickness:8},large:{size:48,thickness:4},xlarge:{size:52,thickness:8}}[this.size],n=19/52*e,r=Math.PI*2*n;return(4+t)/r*100}_renderCircular(){let e=this._aria(),r=this._circularGapPercentage(),i=r/2,a=this._percentage<=0,s=this._percentage>=100,c=this._isBuffer?this._bufferPercentage:this._percentage,l=c>=100,u=s?100:Math.max(0,this._percentage-i),d=a?0:Math.min(100,this._percentage+i),f=l?100-r:Math.max(d,c-i),p=this._isBuffer&&c>this._percentage&&f>d,m=p?c:this._percentage,h=m<=0,g=h?0:Math.min(100,m+i),_=h?100:Math.max(g,100-r),v=h?100:Math.max(0,100-r-g),y=h?1:Math.min(1,v/r),b=m<100,x=this._circularPath(),S=this._circularWaveFrames(100),C=this._circularPath(0,u),w=this._circularPath(0,Math.max(.01,u),0),T=this._circularWaveFrames(s?100:u),E=p?this._circularPath(d,f,0):``,D=b?this._circularPath(g,_,0):``;return n`
+			<div
+				class="circular progress-circular ${this._isWavy?`wavy`:`flat`} ${this.indeterminate?`indeterminate`:this._isBuffer?`buffer`:`determinate`}"
+				part="progress"
+				role=${e.role}
+				aria-label=${e.label}
+				aria-valuemin="0"
+				aria-valuemax=${this.max}
+				aria-valuenow=${e.valueNow}
+				aria-valuetext=${e.valueText}
+				style="--_progress: ${this._percentage}; --_p: ${this._percentage};"
+			>
+				<svg part="svg" viewBox="0 0 52 52" aria-hidden="true">
+					${this.indeterminate&&this._isWavy?o`<defs>
+						<mask id="circular-wavy-track-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="52" height="52">
+							<circle class="window-mask" cx="26" cy="26" r="19" pathLength="100" transform="rotate(-90 26 26)" stroke="white" stroke-dasharray="56 44" stroke-dashoffset="-28">
+								${this._reduceMotion?t:o`
+									<animate attributeName="stroke-dasharray" values="56 44;0 100;56 44" keyTimes="0;0.5;1" dur="3.2s" calcMode="spline" keySplines="0.25 0.1 0.25 1;0.25 0.1 0.25 1" repeatCount="indefinite"></animate>
+									<animate attributeName="stroke-dashoffset" values="-28;-102;-128" keyTimes="0;0.5;1" dur="3.2s" calcMode="spline" keySplines="0.25 0.1 0.25 1;0.25 0.1 0.25 1" repeatCount="indefinite"></animate>
+								`}
+							</circle>
+						</mask>
+						<mask id="circular-wavy-active-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="52" height="52">
+							<circle class="window-mask" cx="26" cy="26" r="19" pathLength="100" transform="rotate(-90 26 26)" stroke="white" stroke-dasharray="12 88" stroke-dashoffset="0">
+								${this._reduceMotion?t:o`
+									<animate attributeName="stroke-dasharray" values="12 88;68 32;12 88" keyTimes="0;0.5;1" dur="3.2s" calcMode="spline" keySplines="0.25 0.1 0.25 1;0.25 0.1 0.25 1" repeatCount="indefinite"></animate>
+									<animate attributeName="stroke-dashoffset" values="0;-18;-100" keyTimes="0;0.5;1" dur="3.2s" calcMode="spline" keySplines="0.25 0.1 0.25 1;0.25 0.1 0.25 1" repeatCount="indefinite"></animate>
+								`}
+							</circle>
+						</mask>
+					</defs>`:t}
+					${this.indeterminate?o`<circle class="track" part="track" cx="26" cy="26" r="19" pathLength="100" mask=${this._isWavy?`url(#circular-wavy-track-mask)`:t}></circle>`:b?o`<path class="track" part="track" d=${D} style="opacity: ${y}"></path>`:t}
+					${p?o`<path class="buffer-segment" part="buffer" d=${E}></path>`:t}
+					${this._isWavy?this.indeterminate?o`<path class="active" part="indicator" d=${x} pathLength="100" mask="url(#circular-wavy-active-mask)">
+								${this._reduceMotion?t:o`<animate
+									attributeName="d"
+									values=${S}
+									keyTimes="0;0.25;0.5;0.75;1"
+									dur="1s"
+									calcMode="linear"
+									repeatCount="indefinite"
+								></animate>`}
+							</path>`:a?t:o`<path class="active" part="indicator" d=${s?x:C}>
+									${this._reduceMotion?t:o`<animate
+										attributeName="d"
+										values=${T}
+										keyTimes="0;0.25;0.5;0.75;1"
+										dur="1s"
+										calcMode="linear"
+										repeatCount="indefinite"
+									></animate>`}
+								</path>`:s?o`<circle class="active" part="indicator" cx="26" cy="26" r="19"></circle>`:a?t:o`<path class="active" part="indicator" d=${w}></path>`}
+				</svg>
+			</div>
+		`}render(){return this._isCircular?this._renderCircular():this._renderLinear()}static{this.styles=[s,i`
+			@keyframes linear-indeterminate-primary {
+				0% { inset-inline-start: -145.167%; inline-size: 8%; }
+				20% { inset-inline-start: -113.333%; inline-size: 48%; }
+				60% { inset-inline-start: 56.333%; inline-size: 78%; }
+				100% { inset-inline-start: 100%; inline-size: 8%; }
+			}
+
+			@keyframes linear-indeterminate-secondary {
+				0% { inset-inline-start: -54.888%; inline-size: 8%; }
+				20% { inset-inline-start: -20%; inline-size: 48%; }
+				60% { inset-inline-start: 60%; inline-size: 78%; }
+				100% { inset-inline-start: 160%; inline-size: 8%; }
+			}
+
+			@keyframes circular-rotate { to { transform: rotate(360deg); } }
+			@keyframes circular-grow {
+				0% { stroke-dasharray: 12 88; stroke-dashoffset: 0; }
+				50% { stroke-dasharray: 68 32; stroke-dashoffset: -18; }
+				100% { stroke-dasharray: 12 88; stroke-dashoffset: -100; }
+			}
+			@keyframes circular-track-grow {
+				0% {
+					stroke-dasharray: 60 40;
+					stroke-dashoffset: -26;
+				}
+				50% {
+					stroke-dasharray: 4 96;
+					stroke-dashoffset: -100;
+				}
+				100% {
+					stroke-dasharray: 60 40;
+					stroke-dashoffset: -126;
+				}
+			}
+
+			@keyframes wave-phase {
+				to { transform: translateX(40px); }
+			}
+
+			@keyframes buffer-dots {
+				to { mask-position: calc(var(--_thickness) * -2) 0; }
+			}
+
+			@keyframes circular-buffer-dots {
+				to { stroke-dashoffset: calc(var(--_thickness) * 2); }
+			}
+
+			@keyframes wavy-indeterminate-primary {
+				0% { transform: translateX(-145.167%); width: 8%; }
+				20% { transform: translateX(-113.333%); width: 48%; }
+				60% { transform: translateX(56.333%); width: 78%; }
+				100% { transform: translateX(100%); width: 8%; }
+			}
+
+			@keyframes wavy-indeterminate-secondary {
+				0% { transform: translateX(-54.888%); width: 8%; }
+				20% { transform: translateX(-20%); width: 48%; }
+				60% { transform: translateX(60%); width: 78%; }
+				100% { transform: translateX(160%); width: 8%; }
+			}
+
+			:host {
+				--_active-color: var(--moni-progress-active, var(--primary));
+				--_track-color: var(--moni-progress-track, var(--secondary-container, var(--active)));
+				--_gap: 4px;
+				--_stop: 4px;
+				--_thickness: 4px;
+				--_linear-height: 4px;
+				--_circular-size: 40px;
+				display: inline-flex;
+				inline-size: 100%;
+				color: var(--_active-color);
+				contain: layout style;
+			}
+
+			:host([size='medium']) {
+				--_thickness: 8px;
+				--_linear-height: 8px;
+				--_circular-size: 44px;
+			}
+
+			:host([size='large']) {
+				--_thickness: 4px;
+				--_linear-height: 10px;
+				--_circular-size: 48px;
+			}
+
+			:host([size='xlarge']) {
+				--_thickness: 8px;
+				--_linear-height: 14px;
+				--_circular-size: 52px;
+			}
+
+			:host([variant='circular']),
+			:host([variant='circular-wavy']) {
+				inline-size: var(--_circular-size);
+				block-size: var(--_circular-size);
+			}
+
+			.linear {
+				position: relative;
+				inline-size: 100%;
+				block-size: var(--_linear-height);
+				overflow: hidden;
+			}
+
+			.linear > span {
+				position: absolute;
+				inset-block-start: 50%;
+				transform: translateY(-50%);
+			}
+
+			.linear > .active {
+				inset-inline-start: 0;
+				inline-size: var(--_active-end);
+				block-size: var(--_thickness);
+				background: var(--_active-color);
+				border-radius: 999px;
+				transition: inline-size 300ms cubic-bezier(0.2, 0, 0, 1);
+			}
+
+			.linear .track {
+				inset-inline-start: min(100%, calc(var(--_active-end) + var(--_gap)));
+				inset-inline-end: 0;
+				block-size: 4px;
+				background: var(--_track-color);
+				border-radius: 999px;
+				transition: inset-inline-start 300ms cubic-bezier(0.2, 0, 0, 1);
+			}
+
+			.linear .buffer-segment {
+				inset-inline-start: min(100%, calc(var(--_buffer-start) + var(--_buffer-gap-start)));
+				inset-inline-end: max(0%, calc(100% - var(--_buffer-end)));
+				block-size: var(--_thickness);
+				background: var(--_track-color);
+				border-radius: 999px;
+				transition: inset-inline-start 300ms cubic-bezier(0.2, 0, 0, 1), inset-inline-end 300ms cubic-bezier(0.2, 0, 0, 1);
+			}
+
+			.linear.buffer .track-after {
+				inset-inline-start: min(100%, calc(var(--_buffer-end) + var(--_gap)));
+				background-color: var(--_track-color);
+				mask-image: radial-gradient(circle, #000 0, #000 calc(var(--_thickness) / 2), transparent calc(var(--_thickness) / 2));
+				mask-size: calc(var(--_thickness) * 2) 100%;
+				mask-repeat: repeat;
+				animation: buffer-dots 250ms linear infinite;
+			}
+
+			.linear .track-before {
+				display: none;
+				inset-inline-start: 0;
+			}
+
+			.linear .stop {
+				inset-inline-end: 0;
+				inline-size: var(--_stop);
+				block-size: var(--_stop);
+				background: var(--_active-color);
+				border-radius: 50%;
+			}
+
+			.linear.wavy {
+				block-size: calc(var(--_thickness) + 6px);
+			}
+
+			.wave-svg {
+				position: absolute;
+				inset-inline: 0;
+				inset-block-start: 50%;
+				inline-size: 100%;
+				block-size: 14px;
+				transform: translateY(-50%);
+				overflow: hidden;
+				z-index: 1;
+			}
+
+			.wave-svg pattern path {
+				fill: none;
+				stroke: var(--_active-color);
+				stroke-width: var(--_thickness);
+				stroke-linecap: round;
+				/* BeerCSS uses a one-second translation embedded in wavy.svg. */
+				animation: wave-phase 1s linear infinite;
+			}
+
+			.wave-window {
+				fill: url(#progress-wave);
+				width: var(--_active-end);
+				transition: width 300ms cubic-bezier(0.2, 0, 0, 1);
+			}
+
+			.wave-window.initial { visibility: hidden; }
+			.initial-dot {
+				fill: var(--_active-color);
+				r: calc(var(--_thickness) / 2);
+			}
+
+			.wave-surface { fill: url(#progress-wave); }
+			.indeterminate-track {
+				fill: var(--_track-color);
+				y: calc(7px - var(--_thickness) / 2);
+				height: var(--_thickness);
+			}
+			.mask-window { transform-box: view-box; }
+			.inverse-window {
+				stroke: black;
+				stroke-width: calc(var(--_gap) * 2);
+			}
+			.primary-window {
+				animation: wavy-indeterminate-primary 2.1s linear infinite;
+			}
+			.secondary-window {
+				animation: wavy-indeterminate-secondary 2.1s linear 1.15s infinite backwards;
+			}
+
+			.flat-indeterminate-svg {
+				position: absolute;
+				inset: 0;
+				inline-size: 100%;
+				block-size: 100%;
+				overflow: hidden;
+				z-index: 1;
+			}
+			.flat-track-surface { fill: var(--_track-color); }
+			.flat-active-surface { fill: var(--_active-color); }
+
+			.linear.flat.indeterminate > .track { display: none; }
+			.linear.wavy.indeterminate > .track { display: none; }
+			.linear.indeterminate .stop { display: none; }
+
+			.linear.indeterminate::after { display: none; }
+
+			.circular,
+			.circular svg {
+				inline-size: var(--_circular-size);
+				block-size: var(--_circular-size);
+			}
+
+			.circular svg { overflow: visible; }
+			.circular :is(circle, path) {
+				fill: none;
+				stroke-linecap: round;
+				stroke-width: var(--_thickness);
+				vector-effect: non-scaling-stroke;
+			}
+
+			.circular .window-mask {
+				stroke-width: 12;
+				stroke-linecap: round;
+				vector-effect: none;
+			}
+
+			.circular .track {
+				stroke: var(--_track-color);
+				transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1);
+			}
+
+			.circular .buffer-segment {
+				stroke: var(--_track-color);
+			}
+
+			.circular.buffer .track {
+				stroke-dasharray: 0.01px calc(var(--_thickness) * 2);
+				animation: circular-buffer-dots 250ms linear infinite;
+			}
+
+			.circular .active {
+				stroke: var(--_active-color);
+				stroke-dashoffset: 0;
+				transition: stroke-dasharray 300ms cubic-bezier(0.2, 0, 0, 1);
+			}
+
+			.circular.indeterminate .track { display: none; }
+			.circular.indeterminate svg { animation: circular-rotate 1s linear infinite; }
+			.circular.indeterminate .active {
+				animation: circular-grow 3.2s ease infinite;
+				transition: none;
+			}
+			.circular.wavy.indeterminate .active {
+				animation: none;
+			}
+			.circular.wavy.indeterminate .track {
+				display: block;
+				animation: none;
+			}
+
+			@media (prefers-reduced-motion: reduce) {
+				.linear .active,
+				.linear .track,
+				.circular .active { transition: none; }
+				.linear.flat.indeterminate > .active {
+					animation: none;
+					inset-inline-start: 0;
+					inline-size: 40%;
+				}
+				.linear.indeterminate::after { display: none; }
+				.mask-window { animation: none; }
+				.primary-window { transform: translateX(0); width: 40%; }
+				.secondary-window { visibility: hidden; }
+				.wave-svg pattern path { animation: none; }
+				.circular.indeterminate svg,
+				.circular.indeterminate .active { animation: none; }
+				.circular.wavy.indeterminate .track { animation: none; }
+				.circular.indeterminate .active { stroke-dasharray: 28 72 !important; }
+				.circular.wavy.indeterminate .track {
+					stroke-dasharray: 44 56 !important;
+					stroke-dashoffset: -42 !important;
+				}
+			}
+		`]}};l([a({type:Number,reflect:!0})],u.prototype,`value`,void 0),l([a({type:Number,reflect:!0})],u.prototype,`max`,void 0),l([a({reflect:!0})],u.prototype,`variant`,void 0),l([a({reflect:!0})],u.prototype,`size`,void 0),l([a({type:Boolean,reflect:!0})],u.prototype,`indeterminate`,void 0),l([a({reflect:!0})],u.prototype,`mode`,void 0),l([a({type:Number,reflect:!0,attribute:`buffer-value`})],u.prototype,`bufferValue`,void 0),l([a({type:Boolean,reflect:!0,attribute:`stop-indicator`})],u.prototype,`stopIndicator`,void 0),l([a({type:Boolean,reflect:!0,attribute:`wave-transition`})],u.prototype,`waveTransition`,void 0),l([a({attribute:`aria-label`})],u.prototype,`label`,void 0),l([e()],u.prototype,`_percentage`,void 0),l([e()],u.prototype,`_reduceMotion`,void 0),u=l([c(`moni-progress`)],u);