@moni-labs/moni-ui 0.4.0 → 0.4.2

package/dist/cdn/components/moni-side-sheet.js

@@ -0,0 +1,234 @@
+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";import{t as s}from"../chunks/query-SWT-tzvq.js";import"./moni-icon.js";import"./moni-button.js";var c=class extends t{constructor(...e){super(...e),this.open=!1,this.modal=!1,this.side=`right`,this.title=``,this.detached=!1,this.showBack=!1,this.noBorder=!1,this.withHandle=!1,this.hideClose=!1,this.expandedWidth=`600px`,this.maxWidth=``,this._isDragging=!1,this._startX=0,this._currentTranslationX=0,this._sheetWidth=0,this._defaultWidth=0,this._justDragged=!1}_getMaxWidthPx(){let e=this.expandedWidth||`600px`;return e.endsWith(`%`)||e.endsWith(`vw`)?window.innerWidth*(parseFloat(e)/100):e.endsWith(`px`)?parseFloat(e):600}updated(e){if(super.updated(e),e.has(`expandedWidth`)&&this.style.setProperty(`--moni-side-sheet-expanded-width`,this.expandedWidth),e.has(`maxWidth`)&&this.style.setProperty(`--moni-side-sheet-max-width`,this.maxWidth||`400px`),e.has(`open`)&&this._dialog){if(this.open)this.modal?this._dialog.open||(typeof this._dialog.showModal==`function`?this._dialog.showModal():this._dialog.open=!0):this._dialog.open||(typeof this._dialog.show==`function`?this._dialog.show():this._dialog.open=!0),this._dialog.getBoundingClientRect(),this._dialog.classList.add(`opened`);else if(this._dialog.open){this._dialog.classList.remove(`opened`);let e=t=>{t.target===this._dialog&&(t.propertyName===`transform`||t.propertyName===`opacity`)&&(this._dialog.removeEventListener(`transitionend`,e),!this.open&&this._dialog.open&&(this._dialog.classList.remove(`expanded`),this._dialog.close()))};this._dialog.addEventListener(`transitionend`,e),setTimeout(()=>{!this.open&&this._dialog.open&&(this._dialog.classList.remove(`expanded`),this._dialog.close())},350)}}}_onPointerDown(e){if(!this.withHandle)return;let t=e.target;!t.closest(`.handle`)&&!t.closest(`header`)||(this._isDragging=!0,this._startX=e.clientX,this._sheetWidth=this._dialog.getBoundingClientRect().width,this._currentTranslationX=0,this._dialog.classList.contains(`expanded`)||(this._defaultWidth=this._sheetWidth),t.setPointerCapture(e.pointerId),this._dialog.classList.add(`dragging`))}_onPointerMove(e){if(!this._isDragging)return;let t=e.clientX-this._startX,n=this._dialog.classList.contains(`expanded`),r=this._getMaxWidthPx(),i=this.side===`right`?t:-t;if(n){if(i>0){let e=this._sheetWidth-i;this._dialog.style.transform=``,this._dialog.style.width=`${Math.max(0,e)}px`}else{let e=this._sheetWidth-i*.2;this._dialog.style.width=`${Math.min(r,e)}px`}}else if(i>0)this._currentTranslationX=i,this._dialog.style.transform=`translateX(${this.side===`right`?i:-i}px)`,this._dialog.style.width=``;else{let e=this._sheetWidth-i;this._dialog.style.transform=``,this._dialog.style.width=`${Math.min(r,e)}px`}}_onPointerUp(e){if(!this._isDragging)return;e.target.releasePointerCapture(e.pointerId),this._isDragging=!1,this._dialog.classList.remove(`dragging`);let t=e.clientX-this._startX;Math.abs(t)>5&&(this._justDragged=!0,setTimeout(()=>{this._justDragged=!1},50));let n=this._dialog.classList.contains(`expanded`),r=this._getMaxWidthPx(),i=this.side===`right`?t:-t;if(n){let e=this._sheetWidth-i;if(e<this._defaultWidth-80){this._dialog.classList.remove(`expanded`),this._dialog.classList.remove(`opened`),this._dialog.style.transform=this.side===`right`?`translateX(100%)`:`translateX(-100%)`,this._dialog.style.width=``;let e=()=>{this._dialog.removeEventListener(`transitionend`,e),this._dialog.style.transform=``,this._dialog.style.width=``,this.open=!1,this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0}))};this._dialog.addEventListener(`transitionend`,e),setTimeout(()=>{this.open&&e()},300)}else e<(r+this._defaultWidth)/2?(this._dialog.classList.remove(`expanded`),this._dialog.style.transform=``,this._dialog.style.width=``):(this._dialog.style.transform=``,this._dialog.style.width=``)}else if(i<0)this._sheetWidth-i>(r+this._sheetWidth)/2||-i>80?(this._dialog.classList.add(`expanded`),this._dialog.style.transform=``,this._dialog.style.width=``):(this._dialog.style.transform=``,this._dialog.style.width=``);else{let e=Math.min(150,this._sheetWidth*.4);if(Math.abs(this._currentTranslationX)>e){this._dialog.classList.remove(`opened`),this._dialog.style.transform=this.side===`right`?`translateX(100%)`:`translateX(-100%)`,this._dialog.style.width=``;let e=()=>{this._dialog.removeEventListener(`transitionend`,e),this._dialog.style.transform=``,this._dialog.style.width=``,this.open=!1,this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0}))};this._dialog.addEventListener(`transitionend`,e),setTimeout(()=>{this.open&&e()},300)}else this._dialog.style.transform=``,this._dialog.style.width=``}}_onPointerCancel(e){this._isDragging&&(e.target.releasePointerCapture(e.pointerId),this._isDragging=!1,this._dialog.classList.remove(`dragging`),this._dialog.style.transform=``,this._dialog.style.width=``)}_onCloseClick(){this.open=!1,this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0}))}_onBackClick(){this.dispatchEvent(new CustomEvent(`back`,{bubbles:!0,composed:!0}))}_onDialogClick(e){if(this._justDragged){this._justDragged=!1;return}this.modal&&e.target===this._dialog&&this._onCloseClick()}static{this.styles=[i,n`
+			:host {
+				display: contents;
+			}
+
+			dialog {
+				display: flex;
+				flex-direction: column;
+				border: none;
+				position: fixed;
+				top: 0;
+				bottom: 0;
+				block-size: 100vh;
+				inline-size: 100%;
+				max-inline-size: var(--moni-side-sheet-max-width, 400px);
+				background-color: var(--surface);
+				color: var(--on-surface);
+				box-sizing: border-box;
+				padding: 0;
+				margin: 0;
+				z-index: 90;
+				outline: none;
+				overflow: hidden;
+				transition:
+					transform var(--speed3) cubic-bezier(0.2, 0, 0, 1),
+					width var(--speed3) cubic-bezier(0.2, 0, 0, 1),
+					max-width var(--speed3) cubic-bezier(0.2, 0, 0, 1),
+					opacity var(--speed3),
+					visibility var(--speed3);
+				opacity: 0;
+				visibility: hidden;
+			}
+
+			dialog.dragging {
+				transition: none !important;
+			}
+
+			dialog.expanded {
+				max-inline-size: var(--moni-side-sheet-expanded-width, 600px) !important;
+			}
+
+			/* Alignments */
+			dialog.right {
+				right: 0;
+				left: auto;
+				transform: translateX(100%);
+				border-left: 1px solid var(--outline-variant);
+				border-radius: 1.75rem 0 0 1.75rem;
+			}
+
+			dialog.left {
+				left: 0;
+				right: auto;
+				transform: translateX(-100%);
+				border-right: 1px solid var(--outline-variant);
+				border-radius: 0 1.75rem 1.75rem 0;
+			}
+
+			/* Detached alignment */
+			dialog.detached {
+				top: 16px;
+				bottom: 16px;
+				block-size: calc(100vh - 32px);
+				border-radius: 1.75rem !important;
+				border: 1px solid var(--outline-variant);
+				box-shadow: var(--elevate1);
+			}
+
+			dialog.detached.right {
+				right: 16px;
+			}
+
+			dialog.detached.left {
+				left: 16px;
+			}
+
+			/* Borders overrides */
+			dialog.no-border {
+				border: none !important;
+			}
+
+			/* Modal Styles */
+			dialog.modal {
+				background-color: var(--surface-container-low);
+				box-shadow: var(--elevate3);
+				z-index: 100;
+			}
+
+			/* Backdrop for Modal */
+			dialog::backdrop {
+				background-color: rgba(0, 0, 0, 0.4);
+				opacity: 0;
+				transition: opacity var(--speed3);
+			}
+
+			/* Opened State */
+			dialog.opened {
+				opacity: 1;
+				visibility: visible;
+				transform: translateX(0);
+			}
+
+			dialog.opened::backdrop {
+				opacity: 1;
+			}
+
+			/* Drag handle */
+			.handle {
+				position: absolute;
+				top: 50%;
+				width: 4px;
+				height: 48px;
+				background: var(--outline-variant);
+				border-radius: 999px;
+				cursor: grab;
+				transform: translateY(-50%);
+				touch-action: none;
+				z-index: 10;
+				opacity: 0.8;
+				transition: background-color var(--speed1);
+			}
+			.handle:hover {
+				background: var(--on-surface-variant);
+			}
+			.handle:active {
+				background: var(--on-surface-variant);
+				cursor: grabbing;
+			}
+
+			dialog.right .handle {
+				left: 6px;
+			}
+
+			dialog.left .handle {
+				right: 6px;
+			}
+
+			/* Header & Spacing */
+			header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 1.25rem 1.5rem 0.75rem;
+				gap: 0.5rem;
+				cursor: grab;
+				touch-action: none;
+				user-select: none;
+			}
+			header:active {
+				cursor: grabbing;
+			}
+
+			.header-start {
+				display: flex;
+				align-items: center;
+				gap: 0.75rem;
+				flex: 1;
+			}
+
+			.headline {
+				font-size: 1.5rem;
+				font-weight: 400;
+				margin: 0;
+				color: var(--on-surface);
+			}
+
+			.content {
+				flex: 1;
+				overflow-y: auto;
+				padding: 0 1.5rem 1.5rem;
+			}
+
+			footer {
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+				padding: 1rem 1.5rem 1.5rem;
+				gap: 0.5rem;
+				border-top: 1px solid var(--outline-variant);
+			}
+
+			footer.no-border {
+				border-top: none !important;
+			}
+
+			/* If no footer slot is passed, hide it */
+			footer:not(:has(slot[name="footer"])) {
+				display: none;
+			}
+		`]}render(){let t=[this.side,this.modal?`modal`:`standard`,this.detached?`detached`:``,this.noBorder?`no-border`:``].filter(Boolean).join(` `);return e`
+			<dialog
+				part="dialog"
+				?open=${this.open}
+				class=${t}
+				@click=${this._onDialogClick}
+				@pointerdown=${this._onPointerDown}
+				@pointermove=${this._onPointerMove}
+				@pointerup=${this._onPointerUp}
+				@pointercancel=${this._onPointerCancel}
+			>
+				${this.withHandle?e`<div class="handle" aria-hidden="true"></div>`:``}
+				<header part="header">
+					<div class="header-start">
+						${this.showBack?e`
+									<moni-button
+										variant="icon"
+										@click=${this._onBackClick}
+										aria-label="Volver"
+									>
+										<moni-icon>arrow_back</moni-icon>
+									</moni-button>
+							  `:``}
+						<slot name="header">
+							<h2 class="headline">${this.title}</h2>
+						</slot>
+					</div>
+					${this.hideClose?``:e`
+								<moni-button
+									variant="icon"
+									@click=${this._onCloseClick}
+									aria-label="Cerrar"
+								>
+									<moni-icon>close</moni-icon>
+								</moni-button>
+						  `}
+				</header>
+				<div class="content" part="content">
+					<slot></slot>
+				</div>
+				<footer class=${this.noBorder?`no-border`:``} part="footer">
+					<slot name="footer"></slot>
+				</footer>
+			</dialog>
+		`}};o([r({type:Boolean,reflect:!0})],c.prototype,`open`,void 0),o([r({type:Boolean,reflect:!0})],c.prototype,`modal`,void 0),o([r({reflect:!0})],c.prototype,`side`,void 0),o([r({reflect:!0})],c.prototype,`title`,void 0),o([r({type:Boolean,reflect:!0})],c.prototype,`detached`,void 0),o([r({type:Boolean,reflect:!0,attribute:`show-back`})],c.prototype,`showBack`,void 0),o([r({type:Boolean,reflect:!0,attribute:`no-border`})],c.prototype,`noBorder`,void 0),o([r({type:Boolean,reflect:!0,attribute:`with-handle`})],c.prototype,`withHandle`,void 0),o([r({type:Boolean,reflect:!0,attribute:`hide-close`})],c.prototype,`hideClose`,void 0),o([r({reflect:!0,attribute:`expanded-width`})],c.prototype,`expandedWidth`,void 0),o([r({reflect:!0,attribute:`max-width`})],c.prototype,`maxWidth`,void 0),o([s(`dialog`)],c.prototype,`_dialog`,void 0),c=o([a(`moni-side-sheet`)],c);

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

@@ -0,0 +1,252 @@
+import{a as e,c as t,d as n,i as r,m as i,o as a,r as o,s,t as c}from"../chunks/decorate-DxX3e27g.js";import"./moni-icon.js";import{t as l}from"../chunks/if-defined-CuEAJKpp.js";var u=class extends r{constructor(...e){super(...e),this.name=``,this.min=`0`,this.max=`100`,this.step=``,this.tickInterval=null,this.insetIcon=``,this.indicatorPlacement=`top`,this.size=`medium`,this.range=!1,this.disabled=!1,this.ticks=!1,this.indicator=!1,this.isVertical=!1,this._value=`50`,this._valueEnd=`75`}get value(){return this._value}set value(e){this._value=e}get valueEnd(){return this._valueEnd}set valueEnd(e){this._valueEnd=e}_pct(e){let t=parseFloat(this.min)||0,n=parseFloat(this.max)||100;return Math.max(0,Math.min(100,((parseFloat(e)||0)-t)/(n-t)*100))}_onInput(e,t){let n=e.target;t===0?this._value=n.value:this._valueEnd=n.value,this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0}))}_onChange(e,t){let n=e.target;t===0?this._value=n.value:this._valueEnd=n.value,this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}_renderDatalist(){if(this.tickInterval!=null&&this.tickInterval>0){let e=parseFloat(this.min)||0,t=parseFloat(this.max)||100,r=this.tickInterval,i=[];for(let n=e;n<=t;n+=r)i.push(Math.round(n*1e3)/1e3);return n`<datalist id="ticks">
+				${i.map(e=>n`<option value=${e}></option>`)}
+			</datalist>`}return this.ticks?n`<datalist id="ticks">
+				<option value=${this.min}></option>
+				<option value=${this.max}></option>
+			</datalist>`:t}static{this.styles=[o,i`
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			/* BeerCSS .slider.vertical */
+			:host([vertical]) {
+				display: inline-block;
+				inline-size: var(--_thumb, 2.5rem);
+				block-size: var(--moni-slider-height, 150px);
+				vertical-align: middle;
+				position: relative;
+			}
+
+			:host([vertical]) .slider {
+				margin: 0.5rem auto !important;
+				padding: 50% 0;
+				transform: rotate(-90deg);
+				inline-size: 100%;
+			}
+
+			/* BeerCSS .slider */
+			.slider {
+				--_start: 0%;
+				--_end: 0%;
+				--_track: 1rem;
+				--_thumb: max(2.5rem, calc(var(--_track, 0) + 0.5rem));
+				display: flex;
+				align-items: center !important;
+				inline-size: auto;
+				block-size: var(--_thumb);
+				flex: none;
+				direction: ltr;
+				margin: 0 1.25rem;
+				color: var(--primary);
+				position: relative;
+			}
+
+			.slider.tiny  { --_track: 1rem; }
+			.slider.small { --_track: 1.5rem; }
+			.slider.medium { --_track: 2.5rem; }
+			.slider.large { --_track: 3.5rem; }
+			.slider.extra { --_track: 6rem; }
+
+			/* BeerCSS: track background via ::before */
+			.slider::before {
+				content: "";
+				position: absolute;
+				inline-size: 100%;
+				block-size: var(--_track);
+				border-radius: 1rem;
+				background: var(--active);
+				clip-path: polygon(
+					calc(var(--_start, 0) - 0.5rem) 0, 0 0, 0 100%,
+					calc(var(--_start, 0) - 0.5rem) 100%, calc(var(--_start, 0) - 0.5rem) 0,
+					calc(100% - var(--_end, 0) + 0.5rem) 0, 100% 0, 100% 100%,
+					calc(100% - var(--_end, 0) + 0.5rem) 100%, calc(100% - var(--_end, 0) + 0.5rem) 0
+				);
+			}
+
+			/* BeerCSS: colored fill span */
+			.slider > span:not([class]) {
+				position: absolute;
+				block-size: var(--_track);
+				border-radius: 1rem 0 0 1rem;
+				background: currentColor;
+				color: currentColor;
+				z-index: 0;
+				inset: calc(50% - (var(--_track, 0) / 2))
+					calc(var(--_end) + 0.5rem) auto var(--_start);
+			}
+
+			.slider > input[type='range'] + input[type='range'] ~ span:not([class]) {
+				border-radius: 0;
+				inset: calc(50% - (var(--_track, 0) / 2))
+					calc(var(--_end) + 0.5rem) auto
+					calc(var(--_start) + 0.5rem);
+			}
+
+			/* BeerCSS slider inputs */
+			.slider > input {
+				appearance: none;
+				box-shadow: none;
+				border: none;
+				outline: none;
+				pointer-events: none;
+				inline-size: 100%;
+				block-size: var(--_track);
+				background: none;
+				z-index: 1;
+				padding: 0;
+				margin: 0;
+				touch-action: none;
+			}
+
+			.slider > input:only-of-type {
+				pointer-events: all;
+			}
+
+			.slider > input ~ input {
+				position: absolute;
+			}
+
+			/* BeerCSS thumb styles */
+			.slider > input::-webkit-slider-thumb {
+				appearance: none;
+				box-shadow: none;
+				border: none;
+				outline: none;
+				pointer-events: all;
+				block-size: var(--_thumb);
+				inline-size: 0.25rem;
+				border-radius: 0.25rem;
+				background: currentColor;
+				cursor: grab;
+				margin: 0;
+				z-index: 1;
+				transform: scaleX(1);
+				transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), border-radius 180ms cubic-bezier(0.2, 0, 0, 1);
+			}
+			.slider > input::-webkit-slider-thumb:active { cursor: grabbing; }
+
+			.slider > input::-moz-range-thumb {
+				appearance: none;
+				box-shadow: none;
+				border: none;
+				outline: none;
+				pointer-events: all;
+				block-size: 2.75rem;
+				inline-size: 0.25rem;
+				border-radius: 0.25rem;
+				background: var(--primary);
+				cursor: grab;
+				margin: 0;
+				transform: scaleX(1);
+				transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), border-radius 180ms cubic-bezier(0.2, 0, 0, 1);
+			}
+
+			.slider > input:not(:disabled):is(:focus, :active)::-webkit-slider-thumb,
+			.slider > input:not(:disabled):is(:focus, :active)::-moz-range-thumb {
+				transform: scaleX(0.6);
+				border-radius: 0.375rem;
+			}
+
+			.slider > input:disabled { cursor: not-allowed; }
+			.slider > input:disabled::-webkit-slider-thumb { background: var(--outline); cursor: not-allowed; }
+			.slider > input:disabled::-moz-range-thumb { background: var(--outline); cursor: not-allowed; }
+			.slider > input:disabled ~ span:not([class]) { background: var(--outline); }
+
+			.slider:has(> [disabled]) { opacity: 0.62; }
+
+			/* Focus visible outline */
+			.slider > input:focus-visible::-webkit-slider-thumb {
+				outline: 0.1875rem solid var(--primary);
+				outline-offset: 0.25rem;
+			}
+			.slider > input:focus-visible::-moz-range-thumb {
+				outline: 0.1875rem solid var(--primary);
+				outline-offset: 0.25rem;
+			}
+
+			/* Inset icon */
+			.slider > span > i {
+				position: absolute;
+				block-size: auto;
+				inset: 0 auto 0 0.5rem;
+				color: var(--inverse-primary);
+				z-index: 1;
+			}
+			.slider:not(.medium, .large, .extra) > span > i { display: none; }
+
+			/* Value indicator tooltip */
+			.slider > .tooltip {
+				--_indicator-gap: 0.5rem;
+				visibility: hidden;
+				opacity: 0;
+				border-radius: 2rem;
+				transform-origin: 50% 100%;
+				transform: translate(-50%, calc(-100% + 0.25rem)) scale(0.82);
+				transition:
+					opacity 150ms cubic-bezier(0.2, 0, 0, 1),
+					transform 200ms cubic-bezier(0.2, 0, 0, 1),
+					visibility 0s linear 200ms;
+				inset-block-start: calc(50% - (var(--_thumb) / 2) - var(--_indicator-gap));
+				padding: 0.75rem 1rem;
+				position: absolute;
+				background-color: var(--inverse-surface);
+				color: var(--inverse-on-surface);
+				font-size: 0.75rem;
+				font-weight: 500;
+				z-index: 2;
+				white-space: nowrap;
+			}
+
+			.slider > .tooltip.bottom {
+				transform-origin: 50% 0;
+				transform: translate(-50%, calc(100% - 0.25rem)) scale(0.82);
+				inset-block: auto calc(50% - (var(--_thumb) / 2) - var(--_indicator-gap));
+			}
+
+			/* BeerCSS: tooltip shows on :focus of the input */
+			.slider > input:first-of-type:focus ~ .tooltip-1,
+			.slider > input:nth-of-type(2):focus ~ .tooltip-2 {
+				opacity: 1;
+				visibility: visible;
+				transform: translate(-50%, -100%) scale(1);
+				transition-delay: 0s;
+			}
+
+			.slider > input:first-of-type:focus ~ .tooltip-1.bottom,
+			.slider > input:nth-of-type(2):focus ~ .tooltip-2.bottom {
+				transform: translate(-50%, 100%) scale(1);
+			}
+
+			@media (prefers-reduced-motion: reduce) {
+				.slider > input::-webkit-slider-thumb,
+				.slider > input::-moz-range-thumb,
+				.slider > .tooltip {
+					transition-duration: 0.01ms;
+				}
+			}
+		`]}render(){let e=this._pct(this._value),r=this._pct(this._valueEnd),i=this.range?e:0,a=this.range?100-r:100-e,o=(e,r)=>n`
+			<input
+				part="control"
+				type="range"
+				min=${this.min}
+				max=${this.max}
+				step=${l(this.step||void 0)}
+				list=${l(this.ticks?`ticks`:void 0)}
+				?disabled=${this.disabled}
+				.value=${r}
+				name=${e===0?l(this.name||void 0):t}
+				@input=${t=>this._onInput(t,e)}
+				@change=${t=>this._onChange(t,e)}
+			/>
+		`,s=this.insetIcon&&[`medium`,`large`,`extra`].includes(this.size)?n`<i><moni-icon name="${this.insetIcon}"></moni-icon></i>`:``,c=this.indicator?n`<div class="tooltip tooltip-1 ${this.indicatorPlacement}" style="inset-inline-start: ${e}%;">${this._value}</div>`:t,u=this.indicator&&this.range?n`<div class="tooltip tooltip-2 ${this.indicatorPlacement}" style="inset-inline-start: ${r}%;">${this._valueEnd}</div>`:t;return n`<div
+			class="slider ${this.size}${this.isVertical?` vertical`:``}"
+			part="root"
+			style="--_start: ${i}%; --_end: ${a}%;"
+		>
+			${this._renderDatalist()}
+			${this.range?n`${o(0,this._value)}${o(1,this._valueEnd)}`:o(0,this._value)}
+			<span>${s}</span>
+			${c}
+			${u}
+		</div>`}};c([a({reflect:!0})],u.prototype,`name`,void 0),c([a({reflect:!0})],u.prototype,`min`,void 0),c([a({reflect:!0})],u.prototype,`max`,void 0),c([a({reflect:!0})],u.prototype,`step`,void 0),c([a({type:Number,reflect:!0,attribute:`tick-interval`})],u.prototype,`tickInterval`,void 0),c([a({reflect:!0,attribute:`inset-icon`})],u.prototype,`insetIcon`,void 0),c([a({reflect:!0,attribute:`indicator-placement`})],u.prototype,`indicatorPlacement`,void 0),c([a({reflect:!0})],u.prototype,`size`,void 0),c([a({type:Boolean,reflect:!0})],u.prototype,`range`,void 0),c([a({type:Boolean,reflect:!0})],u.prototype,`disabled`,void 0),c([a({type:Boolean,reflect:!0})],u.prototype,`ticks`,void 0),c([a({type:Boolean,reflect:!0})],u.prototype,`indicator`,void 0),c([a({type:Boolean,reflect:!0,attribute:`vertical`})],u.prototype,`isVertical`,void 0),c([e()],u.prototype,`_value`,void 0),c([e()],u.prototype,`_valueEnd`,void 0),c([a({reflect:!0})],u.prototype,`value`,null),c([a({reflect:!0,attribute:`value-end`})],u.prototype,`valueEnd`,null),u=c([s(`moni-slider`)],u);

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

@@ -0,0 +1,91 @@
+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";import"./moni-icon.js";var s=class extends t{constructor(...e){super(...e),this.text=``,this.action=``,this.placement=`bottom`,this.active=!1,this.maxLines=2}static{this.styles=[i,n`
+			:host {
+				/* Use block instead of contents so position:fixed inside
+				   works relative to the viewport (its containing block). */
+				display: block;
+				font-family: var(--font);
+				/* Host itself takes no space */
+				position: fixed;
+				inset: 0;
+				pointer-events: none;
+				z-index: 200;
+			}
+
+			/* BeerCSS .snackbar */
+			.snackbar {
+				position: fixed;
+				/* BeerCSS: inset: auto auto 6rem 50% for bottom placement */
+				inset-block-end: 6rem;
+				inset-block-start: auto;
+				inset-inline: 50% auto;
+				inline-size: 80%;
+				block-size: auto;
+				z-index: 200;
+				visibility: hidden;
+				display: flex;
+				box-shadow: var(--elevate2);
+				color: var(--inverse-on-surface);
+				background-color: var(--inverse-surface);
+				padding: 1rem;
+				cursor: pointer;
+				text-align: start;
+				align-items: center;
+				border-radius: 0.25rem;
+				gap: 0.5rem;
+				transition: all var(--speed2);
+				transform: translate(-50%, 1rem);
+				opacity: 0;
+				pointer-events: auto;
+			}
+
+			/* BeerCSS .snackbar.top */
+			.snackbar.top {
+				inset-block-start: 6rem;
+				inset-block-end: auto;
+				transform: translate(-50%, -1rem);
+			}
+
+			/* BeerCSS .snackbar.active */
+			:host([active]) .snackbar {
+				visibility: visible;
+				transform: translate(-50%, 0);
+				opacity: 1;
+			}
+
+			.snackbar > .max {
+				flex: auto;
+				/* M3 spec § Message: clamp at 2 lines (configurable via
+				   max-lines attribute). */
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: var(--_max-lines, 2);
+				line-clamp: var(--_max-lines, 2);
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.action {
+				font-weight: 500;
+				text-transform: uppercase;
+				font-size: 0.875rem;
+				letter-spacing: 0.05em;
+				color: var(--inverse-primary);
+				white-space: nowrap;
+			}
+
+			@media only screen and (min-width: 993px) {
+				.snackbar {
+					inline-size: 40%;
+				}
+			}
+		`]}render(){return e`<div
+			class="snackbar ${this.placement}"
+			part="snackbar"
+			role="status"
+			aria-live="polite"
+			style="--_max-lines: ${this.maxLines}"
+		>
+			<slot name="icon"></slot>
+			<span class="max" part="text"><slot>${this.text}</slot></span>
+			${this.action?e`<span class="action" part="action">${this.action}</span>`:``}
+		</div>`}};o([r({reflect:!0})],s.prototype,`text`,void 0),o([r({reflect:!0})],s.prototype,`action`,void 0),o([r({reflect:!0})],s.prototype,`placement`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`active`,void 0),o([r({type:Number,reflect:!0,attribute:`max-lines`})],s.prototype,`maxLines`,void 0),s=o([a(`moni-snackbar`)],s);

package/dist/cdn/components/moni-split-button.js

@@ -0,0 +1,110 @@
+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";import{t as s}from"../chunks/query-assigned-elements-BBHe1xEY.js";var c=class extends t{constructor(...e){super(...e),this.variant=`filled`,this.size=`small`,this.gap=``}static{this.styles=[i,n`
+			:host {
+				display: inline-flex;
+				align-items: center;
+				vertical-align: middle;
+			}
+
+			.wrapper {
+				--_split-button-gap: 0.125rem;
+				--_split-height: 3.5rem;
+				--_split-leading-start: 1.5rem;
+				--_split-leading-end: 1.5rem;
+				--_split-content-gap: 0.5rem;
+				--_split-leading-icon: 1.5rem;
+				--_split-trailing-icon: 1.625rem;
+				--_split-trailing-width: 3.5rem;
+				--_split-label-size: 1rem;
+				--_split-inner-radius: 0.25rem;
+				display: inline-flex;
+				align-items: center;
+				gap: var(--_split-button-gap);
+				width: 100%;
+			}
+
+			slot {
+				display: contents;
+			}
+
+			::slotted(*) {
+				margin-inline: 0;
+			}
+
+			::slotted([slot='leading-button']) {
+				--moni-button-box-sizing: border-box;
+				--moni-button-height: var(--_split-height);
+				--moni-button-min-inline-size: 0px;
+				--moni-button-padding: 0 var(--_split-leading-end) 0 var(--_split-leading-start);
+				--moni-button-gap: var(--_split-content-gap);
+				--moni-button-font-size: var(--_split-label-size);
+				--moni-button-icon-size: var(--_split-leading-icon);
+				--moni-button-border-radius: calc(var(--_split-height) / 2) var(--_split-inner-radius) var(--_split-inner-radius) calc(var(--_split-height) / 2);
+			}
+
+			::slotted([slot='trailing-button']) {
+				--moni-button-box-sizing: border-box;
+				--moni-button-height: var(--_split-height);
+				--moni-button-inline-size: var(--_split-trailing-width);
+				--moni-button-min-inline-size: var(--_split-trailing-width);
+				--moni-button-padding: 0;
+				--moni-button-gap: 0;
+				--moni-button-font-size: var(--_split-label-size);
+				--moni-button-icon-size: var(--_split-trailing-icon);
+				--moni-button-icon-offset: -0.0625rem;
+				--moni-button-border-radius: var(--_split-inner-radius) calc(var(--_split-height) / 2) calc(var(--_split-height) / 2) var(--_split-inner-radius);
+			}
+
+			::slotted([slot='trailing-button'][active]) {
+				--moni-button-icon-offset: 0px;
+			}
+
+			:host([size='xsmall']) .wrapper {
+				--_split-height: 2rem;
+				--_split-leading-start: 0.75rem;
+				--_split-leading-end: 0.625rem;
+				--_split-content-gap: 0.25rem;
+				--_split-leading-icon: 1.25rem;
+				--_split-trailing-icon: 1.375rem;
+				--_split-trailing-width: 3rem;
+				--_split-label-size: 0.875rem;
+			}
+
+			:host([size='small']) .wrapper {
+				--_split-height: 2.5rem;
+				--_split-leading-start: 1rem;
+				--_split-leading-end: 0.75rem;
+				--_split-content-gap: 0.5rem;
+				--_split-leading-icon: 1.25rem;
+				--_split-trailing-icon: 1.375rem;
+				--_split-trailing-width: 3rem;
+				--_split-label-size: 0.875rem;
+			}
+
+			:host([size='large']) .wrapper {
+				--_split-height: 6rem;
+				--_split-leading-start: 3rem;
+				--_split-leading-end: 3rem;
+				--_split-content-gap: 0.75rem;
+				--_split-leading-icon: 2rem;
+				--_split-trailing-icon: 2.375rem;
+				--_split-trailing-width: 6rem;
+				--_split-label-size: 1.5rem;
+			}
+
+			:host([size='xlarge']) .wrapper,
+			:host([size='extra']) .wrapper {
+				--_split-height: 8.5rem;
+				--_split-leading-start: 4rem;
+				--_split-leading-end: 4rem;
+				--_split-content-gap: 1rem;
+				--_split-leading-icon: 2.5rem;
+				--_split-trailing-icon: 3.125rem;
+				--_split-trailing-width: 8.5rem;
+				--_split-label-size: 2rem;
+			}
+		`]}updated(e){super.updated(e),(e.has(`variant`)||e.has(`size`)||e.has(`gap`))&&this.updateChildren()}handleSlotChange(){this.updateChildren()}getGapValue(e){if(!e)return``;let t=e.toLowerCase();return t===`xs`||t===`xsmall`?`1.125rem`:t===`s`||t===`small`?`0.75rem`:t===`m`||t===`medium`||t===`l`||t===`large`||t===`xl`||t===`xlarge`?`0.5rem`:e}updateChildren(){let e=this.leadingElements.find(e=>e.tagName.toLowerCase()===`moni-button`||e.tagName.toLowerCase()===`moni-icon-button`),t=this.trailingElements.find(e=>e.tagName.toLowerCase()===`moni-button`||e.tagName.toLowerCase()===`moni-icon-button`),n=this.gap.trim().toLowerCase(),r=![`0`,`0px`,`0rem`,`0em`].includes(n);e&&(e.setAttribute(`split-position`,`leading`),e.setAttribute(`shape`,r?`left-round`:`left-round-flat`),e.setAttribute(`size`,this.size),e.setAttribute(`variant`,this.variant)),t&&(t.setAttribute(`split-position`,`trailing`),t.setAttribute(`shape`,r?`right-round`:`right-round-flat`),t.setAttribute(`size`,this.size),t.setAttribute(`variant`,this.variant))}render(){let t=this.getGapValue(this.gap),n=this.gap.trim().toLowerCase(),r=[`0`,`0px`,`0rem`,`0em`].includes(n),i=`${t?`--_split-button-gap: ${t};`:``}${r?`--_split-inner-radius: 0;`:``}`;return e`
+			<div class="wrapper" style=${i} part="wrapper">
+				<slot name="leading-button" @slotchange=${this.handleSlotChange}></slot>
+				<slot name="trailing-button" @slotchange=${this.handleSlotChange}></slot>
+			</div>
+		`}};o([r({reflect:!0})],c.prototype,`variant`,void 0),o([r({reflect:!0})],c.prototype,`size`,void 0),o([r()],c.prototype,`gap`,void 0),o([s({slot:`leading-button`,flatten:!0})],c.prototype,`leadingElements`,void 0),o([s({slot:`trailing-button`,flatten:!0})],c.prototype,`trailingElements`,void 0),c=o([a(`moni-split-button`)],c);