@moni-labs/moni-ui 0.4.1 → 0.4.2

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

@@ -0,0 +1,218 @@
+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"./moni-progress.js";var l=class extends r{constructor(...e){super(...e),this.variant=`assist`,this.size=`small`,this.shape=`round`,this.selected=!1,this.removable=!1,this.disabled=!1,this.loading=!1,this.icon=``,this._hasSlottedIcon=!1}_handleSlotChange(e){let t=e.target;this._hasSlottedIcon=t.assignedNodes({flatten:!0}).length>0}_handleRemoveClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`remove`,{bubbles:!0,composed:!0}))}get _variant(){return this.variant===`outlined`?`assist`:this.variant===`fill`?`filter`:this.variant}static{this.styles=[o,i`
+			:host {
+				display: inline-flex;
+				vertical-align: middle;
+				font-family: var(--font);
+				position: relative;
+				user-select: none;
+			}
+
+			.chip {
+				--_padding: 1rem; /* 16dp when no leading icon (M3 spec) */
+				--_size: 2rem;
+				--_round: calc(var(--_size) / 2);
+				--_icon-size: 1.125rem;
+				box-sizing: border-box;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				block-size: var(--_size);
+				min-inline-size: var(--_size);
+				font-size: 0.875rem;
+				font-weight: 500;
+				background-color: transparent;
+				border: 0.0625rem solid var(--outline);
+				color: var(--on-surface);
+				padding: 0 var(--_padding);
+				border-radius: 0.5rem;
+				transition:
+					transform var(--speed2),
+					background-color var(--speed2),
+					border-color var(--speed2),
+					border-radius var(--speed2),
+					padding var(--speed3);
+				user-select: none;
+				gap: 0.5rem;
+				line-height: normal;
+				letter-spacing: normal;
+				font-family: inherit;
+				cursor: pointer;
+				position: relative;
+				overflow: hidden;
+			}
+
+			.chip::after {
+				content: '';
+				position: absolute;
+				inset: 0;
+				background: currentColor;
+				opacity: 0;
+				transition: opacity var(--speed2);
+				border-radius: inherit;
+				pointer-events: none;
+			}
+
+			.chip.has-icon {
+				--_padding: 0.5rem; /* 8dp when a leading icon is present (M3 spec) */
+			}
+
+			.chip.medium {
+				--_size: 2.5rem;
+				--_padding: 0.75rem;
+				--_icon-size: 1.25rem;
+			}
+			.chip.medium.has-icon {
+				--_padding: 0.75rem;
+			}
+			.chip.large {
+				--_padding: 1rem;
+				--_size: 3rem;
+				--_icon-size: 1.5rem;
+			}
+
+			.chip:hover:not(:disabled)::after {
+				opacity: 0.08;
+			}
+
+			.chip:active:not(:disabled) {
+				transform: scale(0.97);
+			}
+
+			/* ─── M3 variant colors ─── */
+			/* Filter and input chips use outline-variant + on-surface-variant
+			   for the resting state (M3 spec). Assist and suggestion use
+			   outline + on-surface for 3:1 contrast (a11y). */
+			.chip.filter,
+			.chip.input {
+				border-color: var(--outline-variant);
+				color: var(--on-surface-variant);
+			}
+
+			.chip.suggestion {
+				border-color: var(--outline);
+				color: var(--on-surface-variant);
+			}
+
+			/* Selected state — M3 filter/input show a leading check and
+			   secondary-container background. */
+			.chip.selected {
+				background-color: var(--secondary-container);
+				color: var(--on-secondary-container);
+				border-color: transparent;
+			}
+
+			/* Filter without selection can have leading check on hover to
+			   indicate the action. */
+			.chip.filter.selected::before,
+			.chip.input.selected::before {
+				content: '\\e5ca';
+				font-family: var(--font-icon);
+				font-size: var(--_icon-size);
+				font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+				margin-inline-end: 0.25rem;
+				color: currentColor;
+			}
+
+			.chip.no-round {
+				border-radius: 0;
+			}
+			.chip.square {
+				border-radius: 0.25rem;
+			}
+			.chip.circle {
+				inline-size: var(--_size);
+				padding: 0;
+				aspect-ratio: 1;
+				border-radius: 50%;
+			}
+			.chip.left-round {
+				border-radius: var(--_round) 0 0 var(--_round) !important;
+			}
+			.chip.right-round {
+				border-radius: 0 var(--_round) var(--_round) 0 !important;
+			}
+			.chip.top-round {
+				border-radius: var(--_round) var(--_round) 0 0 !important;
+			}
+			.chip.bottom-round {
+				border-radius: 0 0 var(--_round) var(--_round) !important;
+			}
+
+			.chip:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+				pointer-events: none;
+			}
+
+			.chip:focus-visible {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.125rem;
+			}
+
+			.icon,
+			::slotted([slot='icon']) {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-size: var(--_icon-size);
+				flex: none;
+				color: inherit;
+			}
+
+			/* An empty icon slot must not become a flex item: otherwise the
+			   container gap reserves space before the label. */
+			slot.icon[hidden] {
+				display: none;
+			}
+
+			.remove {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-size: var(--_icon-size);
+				opacity: 0.7;
+				margin-inline-start: 0.125rem;
+			}
+
+			.loading-spinner {
+				inline-size: var(--_icon-size);
+				block-size: var(--_icon-size);
+				color: currentColor;
+			}
+			.loading-spinner::part(progress) {
+				border-width: 0.1875rem;
+			}
+		`]}render(){let e=this._variant,r=!!this.icon||this._hasSlottedIcon,i=[`chip`,e,this.size,this.shape,this.selected?`selected`:``,r?`has-icon`:``].filter(Boolean).join(` `);if(this.loading)return n`<button
+				class=${i}
+				part="chip"
+				type="button"
+				?disabled=${this.disabled}
+				aria-busy="true"
+			>
+				<moni-progress
+					class="loading-spinner"
+					part="loading"
+					variant="circular"
+					indeterminate
+					size="small"
+				></moni-progress>
+			</button>`;let a=this.removable||e===`input`,o=this.icon?n`<span class="icon" part="icon"
+					><moni-icon name="${this.icon}"></moni-icon
+				></span>`:n`<slot
+					name="icon"
+					part="icon"
+					class="icon"
+					?hidden=${!this._hasSlottedIcon}
+					@slotchange=${this._handleSlotChange}
+				></slot>`,s=a?n`<span class="remove" part="remove" aria-hidden="true" @click=${this._handleRemoveClick}
+					><moni-icon name="close"></moni-icon
+				></span>`:t;return n`<button
+			class=${i}
+			part="chip"
+			type="button"
+			?disabled=${this.disabled}
+		>
+			${o}
+			<span part="label"><slot></slot></span>
+			${s}
+		</button>`}};c([a({reflect:!0})],l.prototype,`variant`,void 0),c([a({reflect:!0})],l.prototype,`size`,void 0),c([a({reflect:!0})],l.prototype,`shape`,void 0),c([a({type:Boolean,reflect:!0})],l.prototype,`selected`,void 0),c([a({type:Boolean,reflect:!0})],l.prototype,`removable`,void 0),c([a({type:Boolean,reflect:!0})],l.prototype,`disabled`,void 0),c([a({type:Boolean,reflect:!0})],l.prototype,`loading`,void 0),c([a({reflect:!0})],l.prototype,`icon`,void 0),c([e()],l.prototype,`_hasSlottedIcon`,void 0),l=c([s(`moni-chip`)],l);

package/dist/cdn/components/moni-color-field.js

@@ -0,0 +1,54 @@
+import{c as e,d as t,i as n,m as r,n as i,o as a,r as o,s,t as c}from"../chunks/decorate-DxX3e27g.js";import{t as l}from"../chunks/query-SWT-tzvq.js";import{t as u}from"../chunks/if-defined-CuEAJKpp.js";import{t as d}from"../chunks/class-map-DBljv-_e.js";var f=class extends n{constructor(...e){super(...e),this.name=``,this.label=``,this.variant=`outlined`,this.size=`medium`,this.shape=`no-round`,this.disabled=!1,this.helper=``,this.errorText=``,this.error=!1,this.value=`#6750a4`}updated(e){e.has(`value`)&&(this._colorInput&&(this._colorInput.value=this.value),this._textInput&&(this._textInput.value=this.value)),e.has(`disabled`)&&(this._colorInput&&(this._colorInput.disabled=this.disabled),this._textInput&&(this._textInput.disabled=this.disabled))}static{this.styles=[o,i,r`
+			.swatch {
+				inline-size: 1.5rem;
+				block-size: 1.5rem;
+				border-radius: 50%;
+				border: 0.0625rem solid var(--outline);
+				background-color: var(--_swatch, currentColor);
+				position: absolute;
+				inset: calc(50% - 0.75rem) auto auto 0.75rem;
+				pointer-events: none;
+				z-index: 1;
+			}
+			input[type='text'] {
+				padding-inline-start: 2.5rem !important;
+			}
+			input[type='color'] {
+				position: absolute;
+				inset: 0;
+				opacity: 0;
+				z-index: 2;
+				cursor: pointer;
+			}
+		`]}render(){let n=!!this.value,r={field:!0,label:!!this.label,fill:this.variant===`filled`,border:this.variant===`outlined`,small:this.size===`small`,large:this.size===`large`,extra:this.size===`extra`,prefix:!0,invalid:this.error,round:this.shape===`round`,square:this.shape===`no-round`};return t`<div class=${d(r)} part="field">
+			<span
+				class="swatch"
+				style="--_swatch: ${this.value};"
+				aria-hidden="true"
+			></span>
+			<input
+				type="color"
+				part="color"
+				.value=${this.value}
+				?disabled=${this.disabled}
+				name=${u(this.name?`${this.name}-color`:void 0)}
+				tabindex="-1"
+			/>
+			<input
+				type="text"
+				part="text"
+				readonly
+				.value=${this.value}
+				?disabled=${this.disabled}
+				name=${u(this.name||void 0)}
+				class=${n?`active`:``}
+			/>
+			${this.label?t`<label
+						part="label"
+						class=${d({active:n})}
+						>${this.label}</label
+					>`:e}
+			${this.error?t`<output part="helper" class="invalid"
+						>${this.errorText||this.helper}</output
+					>`:this.helper?t`<output part="helper">${this.helper}</output>`:e}
+		</div>`}};c([a({reflect:!0})],f.prototype,`name`,void 0),c([a({reflect:!0})],f.prototype,`label`,void 0),c([a({reflect:!0})],f.prototype,`variant`,void 0),c([a({reflect:!0})],f.prototype,`size`,void 0),c([a({reflect:!0})],f.prototype,`shape`,void 0),c([a({type:Boolean,reflect:!0})],f.prototype,`disabled`,void 0),c([a({reflect:!0})],f.prototype,`helper`,void 0),c([a({reflect:!0,attribute:`error-text`})],f.prototype,`errorText`,void 0),c([a({type:Boolean,reflect:!0})],f.prototype,`error`,void 0),c([a({reflect:!0})],f.prototype,`value`,void 0),c([l(`input[type="color"]`)],f.prototype,`_colorInput`,void 0),c([l(`input[type="text"]`)],f.prototype,`_textInput`,void 0),f=c([s(`moni-color-field`)],f);

package/dist/cdn/components/moni-context-menu.js

@@ -0,0 +1,24 @@
+import{a as e,d as t,i as n,m as r,o as i,r as a,s as o,t as s}from"../chunks/decorate-DxX3e27g.js";import{t as c}from"../chunks/query-SWT-tzvq.js";import"./moni-menu.js";var l=class extends n{constructor(...e){super(...e),this.placement=`bottom`,this.flip=!1,this._x=0,this._y=0,this._open=!1,this._resolvedPlacement=`bottom`,this._target=null,this._docKeydown=e=>this._onDocKeydown(e),this._onContextMenu=e=>{if(e.preventDefault(),this._target){let t=this._target.getBoundingClientRect();this._x=e.clientX-t.left,this._y=e.clientY-t.top}else this._x=e.clientX,this._y=e.clientY;this._resolvedPlacement=this.placement,this._open=!0,this.updateComplete.then(()=>this._maybeFlip())},this._onDocumentClick=()=>{this._open&&=!1},this._onDocKeydown=e=>{e.key===`Escape`&&this._open&&(this._open=!1)}}connectedCallback(){super.connectedCallback(),this._target=this.parentElement,this._target&&(getComputedStyle(this._target).position===`static`&&(this._target.style.position=`relative`),this._target.addEventListener(`contextmenu`,this._onContextMenu)),document.addEventListener(`click`,this._onDocumentClick),document.addEventListener(`keydown`,this._docKeydown)}disconnectedCallback(){this._target&&this._target.removeEventListener(`contextmenu`,this._onContextMenu),document.removeEventListener(`click`,this._onDocumentClick),document.removeEventListener(`keydown`,this._docKeydown),super.disconnectedCallback()}_maybeFlip(){if(!this.flip)return;let e=this._menuEl?.shadowRoot?.querySelector(`menu`);if(!e)return;let t=e.getBoundingClientRect(),n=window.innerWidth,r=window.innerHeight,i=t.bottom>r,a=t.right>n;this.placement===`bottom`&&i?this._resolvedPlacement=`top`:this.placement===`top`&&t.top<0?this._resolvedPlacement=`bottom`:this.placement===`right`&&a?this._resolvedPlacement=`left`:this.placement===`left`&&t.left<0&&(this._resolvedPlacement=`right`)}static{this.styles=[a,r`
+			:host {
+				display: contents;
+				font-family: var(--font);
+			}
+
+			.menu-host {
+				/* Absolute from parent which has position:relative */
+				position: absolute;
+				inset-inline-start: var(--_x, 0);
+				inset-block-start: var(--_y, 0);
+				z-index: 200;
+			}
+		`]}render(){let e=this._open?this._resolvedPlacement:this.placement;return t`<div
+			class="menu-host"
+			style="--_x: ${this._x}px; --_y: ${this._y}px;"
+		>
+			<moni-menu
+				placement=${e}
+				?active=${this._open}
+			>
+				<slot></slot>
+			</moni-menu>
+		</div>`}};s([i({reflect:!0})],l.prototype,`placement`,void 0),s([i({type:Boolean,reflect:!0})],l.prototype,`flip`,void 0),s([e()],l.prototype,`_x`,void 0),s([e()],l.prototype,`_y`,void 0),s([e()],l.prototype,`_open`,void 0),s([e()],l.prototype,`_resolvedPlacement`,void 0),s([c(`moni-menu`)],l.prototype,`_menuEl`,void 0),l=s([o(`moni-context-menu`)],l);

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

@@ -0,0 +1,191 @@
+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{t as c}from"../chunks/event-emitter-CGhsijUg.js";var l=class extends t{constructor(...e){super(...e),this.open=!1,this.modal=!1,this.side=`center`,this.size=`medium`,this.title=``}willUpdate(e){if(e.has(`open`)&&this.open!==e.get(`open`)){let e=this.open,t=e?`moni-request-open`:`moni-request-close`;c(this,t,{cancelable:!0})||(this.open=!e)}}updated(e){e.has(`open`)&&this._dialog&&(this.open?(c(this,`moni-open`),this.modal?this._dialog.open||this._dialog.showModal():this._dialog.open||this._dialog.show()):(c(this,`moni-close`),this._dialog.open&&this._dialog.close()))}_onTransitionEnd(e){e.target===this._dialog&&e.propertyName===`transform`&&(this.open?c(this,`moni-opened`):c(this,`moni-closed`))}static{this.styles=[i,n`
+			:host {
+				display: contents;
+			}
+
+			dialog {
+				--_padding: 1.5rem;
+				--_top: calc(var(--_padding) + env(safe-area-inset-top, 0));
+				--_bottom: calc(var(--_padding) + env(safe-area-inset-bottom, 0));
+				display: grid;
+				grid-template-rows: auto minmax(0, 1fr) auto;
+				box-sizing: border-box;
+				visibility: hidden;
+				border: none;
+				opacity: 0;
+				position: fixed;
+				box-shadow: var(--elevate2);
+				color: var(--on-surface);
+				background-color: var(--surface-container-high);
+				padding: var(--_padding);
+				z-index: 100;
+				inset: 10% auto auto 50%;
+				min-inline-size: 20rem;
+				max-inline-size: 100%;
+				max-block-size: 80%;
+				overflow-x: hidden;
+				overflow-y: hidden;
+				transition: all var(--speed3), 0s background-color;
+				border-radius: 1.75rem;
+				transform: translate(-50%, -4rem) scale(var(--moni-dialog-scale, 1));
+				transform-origin: top center;
+				outline: none;
+			}
+
+			dialog[open] {
+				visibility: visible;
+				opacity: 1;
+				transform: translate(-50%, 0) scale(var(--moni-dialog-scale, 1));
+			}
+
+			dialog::backdrop {
+				display: block !important;
+				opacity: 0;
+				visibility: hidden;
+				position: fixed;
+				inset: 0;
+				color: var(--on-surface);
+				background-color: rgb(0 0 0 / 0.5);
+				z-index: 100;
+				transition: all var(--speed3), 0s background-color;
+				border-radius: 0;
+			}
+
+			dialog[open]::backdrop {
+				opacity: 1;
+				visibility: visible;
+			}
+
+			dialog:is(.top, .right, .bottom, .left, .max) {
+				--_padding: 1rem;
+			}
+
+			dialog.top,
+			dialog.bottom {
+				opacity: 1;
+				block-size: auto;
+				inline-size: 100%;
+				min-inline-size: auto;
+				max-block-size: 100%;
+			}
+			dialog.top {
+				inset: 0 auto auto 0;
+				transform: translateY(-100%);
+				border-radius: 0 0 1rem 1rem;
+				padding-block-start: var(--_top);
+			}
+			dialog.bottom {
+				inset: auto auto 0 0;
+				transform: translateY(100%);
+				border-radius: 1rem 1rem 0 0;
+				padding-block-end: var(--_bottom);
+			}
+
+			dialog:is(.left, .right) {
+				opacity: 1;
+				inset: 0 auto auto 0;
+				inline-size: auto;
+				block-size: 100%;
+				max-block-size: 100%;
+				background-color: var(--surface);
+				padding-block: var(--_top) var(--_bottom);
+			}
+			dialog.left {
+				inset: 0 auto auto 0;
+				border-radius: 0 1rem 1rem 0;
+				transform: translateX(-100%);
+			}
+			dialog.right {
+				inset: 0 0 auto auto;
+				border-radius: 1rem 0 0 1rem;
+				transform: translateX(100%);
+			}
+
+			dialog.max {
+				inset: 0 auto auto 0;
+				inline-size: 100%;
+				block-size: 100%;
+				max-inline-size: 100%;
+				max-block-size: 100%;
+				transform: translateY(4rem);
+				background-color: var(--surface);
+				border-radius: 0;
+				padding-block: var(--_top) var(--_bottom);
+			}
+
+			dialog[open]:is(.left, .right, .top, .bottom, .max) {
+				transform: translate(0, 0);
+			}
+
+			dialog.small {
+				inline-size: 25%;
+			}
+			dialog.medium {
+				inline-size: 50%;
+			}
+			dialog.large {
+				inline-size: 75%;
+			}
+			dialog.small:is(.left, .right) {
+				inline-size: 20rem;
+			}
+			dialog.medium:is(.left, .right) {
+				inline-size: 32rem;
+			}
+			dialog.large:is(.left, .right) {
+				inline-size: 44rem;
+			}
+			dialog.small:is(.top, .bottom) {
+				block-size: 16rem;
+			}
+			dialog.medium:is(.top, .bottom) {
+				block-size: 24rem;
+			}
+			dialog.large:is(.top, .bottom) {
+				block-size: 32rem;
+			}
+
+			header,
+			footer {
+				display: grid;
+				align-content: center;
+				border-radius: 0;
+				padding: 0;
+			}
+			header {
+				min-block-size: 3rem;
+			}
+			[part='content'] {
+				min-block-size: 0;
+				overflow-x: hidden;
+				overflow-y: auto;
+				overscroll-behavior: contain;
+			}
+			footer {
+				min-block-size: 3.5rem;
+				position: relative;
+				z-index: 1;
+				background: inherit;
+			}
+
+			@media (max-width: 37.5rem), (max-height: 37.5rem) {
+				dialog:is(.small, .medium, .large):not(.top, .right, .bottom, .left, .max) {
+					--_padding: 1rem;
+					inline-size: calc(100vw - 2rem);
+					min-inline-size: 0;
+					max-inline-size: 35rem;
+					max-block-size: calc(100dvh - 2rem);
+					inset-block-start: 1rem;
+				}
+			}
+		`]}render(){let t=[this.side,this.size,this.modal?`modal`:``].filter(Boolean).join(` `);return e`<dialog
+			part="dialog"
+			class=${t}
+			@transitionend=${this._onTransitionEnd}
+		>
+			<header part="header">
+				<slot name="header">${this.title}</slot>
+			</header>
+			<div part="content"><slot></slot></div>
+			<footer part="footer"><slot name="footer"></slot></footer>
+		</dialog>`}};o([r({type:Boolean,reflect:!0})],l.prototype,`open`,void 0),o([r({type:Boolean,reflect:!0})],l.prototype,`modal`,void 0),o([r({reflect:!0})],l.prototype,`side`,void 0),o([r({reflect:!0})],l.prototype,`size`,void 0),o([r({reflect:!0})],l.prototype,`title`,void 0),o([s(`dialog`)],l.prototype,`_dialog`,void 0),l=o([a(`moni-dialog`)],l);

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

@@ -0,0 +1,32 @@
+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.inset=`leading`}static{this.styles=[i,n`
+			:host {
+				display: block;
+				font-family: var(--font);
+				/* Especificación M3: grosor de 1dp, on-surface-variant para una separación sutil. */
+				block-size: 0.0625rem;
+				min-inline-size: 0;
+				background-color: var(--outline-variant);
+				border: 0;
+				margin: 0;
+			}
+
+			/* Variantes de inserción. Especificación M3: 16dp desde el borde inicial. */
+			:host([inset='leading']) {
+				margin-inline-start: 1rem;
+				margin-inline-end: 0;
+			}
+			:host([inset='middle']) {
+				margin-inline: 1rem;
+			}
+			:host([inset='none']) {
+				margin-inline: 0;
+			}
+
+			/* Separador vertical (la especificación M3 también define el uso vertical). */
+			:host([vertical]) {
+				inline-size: 0.0625rem;
+				block-size: auto;
+				min-block-size: 100%;
+				align-self: stretch;
+			}
+		`]}render(){return e`<slot></slot>`}};o([r({reflect:!0})],s.prototype,`inset`,void 0),s=o([a(`moni-divider`)],s);

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

@@ -0,0 +1,50 @@
+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.open=!1,this.title=``}static{this.styles=[i,n`
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			details {
+				border-radius: 0.5rem;
+				overflow: hidden;
+			}
+
+			summary {
+				list-style-type: none;
+				cursor: pointer;
+				padding: 0.75rem 1rem;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 0.5rem;
+				font-weight: 500;
+				color: var(--on-surface);
+				background-color: var(--surface-container);
+			}
+			summary::-webkit-details-marker {
+				display: none;
+			}
+			summary::after {
+				content: 'expand_more';
+				font-family: var(--font-icon);
+				font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+				font-size: 1.25rem;
+				transition: transform var(--speed2);
+			}
+			details[open] > summary::after {
+				transform: rotate(180deg);
+			}
+
+			.body {
+				padding: 1rem;
+				background-color: var(--surface-container-low);
+				color: var(--on-surface);
+			}
+		`]}render(){return e`<details ?open=${this.open} part="expansion">
+			<summary part="summary">
+				<slot name="summary">${this.title}</slot>
+			</summary>
+			<div class="body" part="body">
+				<slot></slot>
+			</div>
+		</details>`}};o([r({type:Boolean,reflect:!0})],s.prototype,`open`,void 0),o([r({reflect:!0})],s.prototype,`title`,void 0),s=o([a(`moni-expansion`)],s);

package/dist/cdn/components/moni-fab-menu.js

@@ -0,0 +1,57 @@
+import{a as e,d as t,i as n,m as r,o as i,r as a,s as o,t as s}from"../chunks/decorate-DxX3e27g.js";import{t as c}from"../chunks/query-SWT-tzvq.js";import"./moni-fab.js";var l=class extends n{constructor(...e){super(...e),this.open=!1,this.disabled=!1,this.icon=`add`,this.closeIcon=`close`,this.label=`Abrir acciones`,this.closeLabel=`Cerrar acciones`,this.size=`medium`,this.color=`primary`,this.shape=`rounded`,this.direction=`up`,this.position=``,this._effectiveDirection=`up`,this._crossAlign=`end`,this._actions=[],this._restoreFocus=!1,this._onDocumentPointer=e=>{this.open&&!e.composedPath().includes(this)&&(this.open=!1)},this._onDocumentClick=e=>{this.open&&!e.composedPath().includes(this)&&(this.open=!1)},this._onDocumentKey=e=>{if(!this.open)return;if(e.key===`Escape`){e.preventDefault(),this._restoreFocus=!0,this.open=!1;return}if(![`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`Home`,`End`].includes(e.key))return;e.preventDefault();let t=this._actions.indexOf(document.activeElement),n=e.key===`ArrowDown`||e.key===`ArrowRight`,r=e.key===`Home`?0:e.key===`End`?this._actions.length-1:(t+(n?1:-1)+this._actions.length)%this._actions.length;this._actions[r]?.focus()},this._onViewportChange=()=>this._placeMenu(),this._toggle=()=>{this.disabled||(this._restoreFocus=this.open,this.open=!this.open)},this._slotChanged=()=>{this._actions.forEach(e=>e.removeEventListener(`click`,this._selectAction)),this._actions=this._slot.assignedElements({flatten:!0}).filter(e=>e.tagName===`MONI-FAB`),this._actions.forEach((e,t)=>{e.style.setProperty(`--_fab-menu-index`,String(t)),e.setAttribute(`role`,`menuitem`),e.addEventListener(`click`,this._selectAction)}),this.open&&queueMicrotask(()=>this._placeMenu())},this._selectAction=()=>{this._restoreFocus=!0,this.open=!1}}disconnectedCallback(){this._removeGlobalListeners(),super.disconnectedCallback()}updated(e){e.has(`direction`)&&!this.open&&(this._effectiveDirection=this.direction),e.has(`open`)&&(this.dispatchEvent(new CustomEvent(`moni-toggle`,{detail:{open:this.open},bubbles:!0,composed:!0})),this.open?(document.addEventListener(`pointerdown`,this._onDocumentPointer,!0),document.addEventListener(`click`,this._onDocumentClick,!0),document.addEventListener(`keydown`,this._onDocumentKey,!0),window.addEventListener(`resize`,this._onViewportChange),queueMicrotask(async()=>{await this._placeMenu(),this._actions[0]?.focus()})):(this._removeGlobalListeners(),this._restoreFocus&&queueMicrotask(()=>this._trigger?.focus()),this._restoreFocus=!1))}_removeGlobalListeners(){document.removeEventListener(`pointerdown`,this._onDocumentPointer,!0),document.removeEventListener(`click`,this._onDocumentClick,!0),document.removeEventListener(`keydown`,this._onDocumentKey,!0),window.removeEventListener(`resize`,this._onViewportChange)}_visibleBoundary(){let e=0,t=0,n=window.innerWidth,r=window.innerHeight,i=this.parentElement;for(;i;){let a=getComputedStyle(i);if(/(hidden|clip|auto|scroll)/.test(`${a.overflow}${a.overflowX}${a.overflowY}`)){let a=i.getBoundingClientRect();e=Math.max(e,a.left),t=Math.max(t,a.top),n=Math.min(n,a.right),r=Math.min(r,a.bottom)}i=i.parentElement}return new DOMRect(e,t,Math.max(0,n-e),Math.max(0,r-t))}async _placeMenu(){if(!this.open||!this._menu)return;let e=this._visibleBoundary(),t={left:`right`,right:`left`,up:`down`,down:`up`},n=this._trigger.getBoundingClientRect(),r=n.top-e.top>=e.bottom-n.bottom?[`up`,`down`]:[`down`,`up`],i=n.left-e.left>=e.right-n.right?[`left`,`right`]:[`right`,`left`],a=this.direction===`left`||this.direction===`right`?r:i,o=[this.direction,t[this.direction],...a].filter((e,t,n)=>n.indexOf(e)===t),s;for(let t of o){this._effectiveDirection=t,this._crossAlign=`end`,await this.updateComplete;let n=this._menu.getBoundingClientRect(),r=t===`up`||t===`down`;(r&&n.left<e.left||!r&&n.top<e.top)&&(this._crossAlign=`start`,await this.updateComplete,n=this._menu.getBoundingClientRect());let i=Math.max(0,e.left-n.left)+Math.max(0,n.right-e.right)+Math.max(0,e.top-n.top)+Math.max(0,n.bottom-e.bottom);if((!s||i<s.overflow)&&(s={direction:t,align:this._crossAlign,overflow:i}),i<=1)return}s&&(this._effectiveDirection=s.direction,this._crossAlign=s.align)}static{this.styles=[a,r`
+		:host { display: inline-flex; position: relative; vertical-align: middle; }
+		:host([position='bottom-trailing']), :host([position='bottom-leading']),
+		:host([position='top-trailing']), :host([position='top-leading']) { position: fixed; z-index: 13; }
+		:host([position='bottom-trailing']) { inset: auto max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) auto; }
+		:host([position='bottom-leading']) { inset: auto auto max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
+		:host([position='top-trailing']) { inset: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) auto auto; }
+		:host([position='top-leading']) { inset: max(1rem, env(safe-area-inset-top)) auto auto max(1rem, env(safe-area-inset-left)); }
+
+		.wrap { display: inline-grid; place-items: center; position: relative; }
+		.menu { position: absolute; display: flex; gap: .75rem; margin: 0; padding: 0; align-items: center; pointer-events: none; visibility: hidden; }
+		:host([open]) .menu { pointer-events: auto; visibility: visible; }
+		.wrap[data-direction='up'] .menu { inset-block-end: calc(100% + 1rem); flex-direction: column-reverse; }
+		.wrap[data-direction='down'] .menu { inset-block-start: calc(100% + 1rem); flex-direction: column; }
+		.wrap:is([data-direction='up'], [data-direction='down'])[data-align='end'] .menu { inset-inline-end: 0; align-items: flex-end; }
+		.wrap:is([data-direction='up'], [data-direction='down'])[data-align='start'] .menu { inset-inline-start: 0; align-items: flex-start; }
+		.wrap[data-direction='left'] .menu { inset-inline-end: calc(100% + 1rem); flex-direction: row-reverse; }
+		.wrap[data-direction='right'] .menu { inset-inline-start: calc(100% + 1rem); flex-direction: row; }
+		.wrap:is([data-direction='left'], [data-direction='right'])[data-align='end'] .menu { inset-block-end: 0; }
+		.wrap:is([data-direction='left'], [data-direction='right'])[data-align='start'] .menu { inset-block-start: 0; }
+
+		::slotted(moni-fab) {
+			opacity: 0;
+			transform: translateY(.75rem) scale(.8);
+			transform-origin: center;
+			transition: opacity 160ms ease, transform 300ms cubic-bezier(.2,0,0,1);
+			transition-delay: 0ms;
+		}
+		.wrap[data-direction='down'] ::slotted(moni-fab) { transform: translateY(-.75rem) scale(.8); }
+		.wrap[data-direction='left'] ::slotted(moni-fab) { transform: translateX(.75rem) scale(.8); }
+		.wrap[data-direction='right'] ::slotted(moni-fab) { transform: translateX(-.75rem) scale(.8); }
+		:host([open]) ::slotted(moni-fab) {
+			opacity: 1;
+			transform: translate(0) scale(1);
+			transition-delay: calc(var(--_fab-menu-index, 0) * 45ms);
+		}
+		.trigger::part(icon) { transition: transform 300ms cubic-bezier(.2,0,0,1); }
+		:host([open]) .trigger::part(icon) { transform: rotate(90deg); }
+		@media (prefers-reduced-motion: reduce) { ::slotted(moni-fab), .trigger::part(icon) { transition-duration: .01ms; transition-delay: 0ms; } }
+	`]}render(){return t`<div class="wrap" data-direction=${this._effectiveDirection} data-align=${this._crossAlign}>
+			<div class="menu fab-menu" part="menu" role="menu" aria-hidden=${String(!this.open)}>
+				<slot @slotchange=${this._slotChanged}></slot>
+			</div>
+			<moni-fab
+				class="trigger"
+				part="trigger"
+				.icon=${this.open?this.closeIcon:this.icon}
+				.size=${this.size}
+				.color=${this.color}
+				.shape=${this.shape}
+				.disabled=${this.disabled}
+				.accessibleLabel=${this.open?this.closeLabel:this.label}
+				aria-haspopup="menu"
+				aria-expanded=${String(this.open)}
+				@click=${this._toggle}
+			></moni-fab>
+		</div>`}};s([i({type:Boolean,reflect:!0})],l.prototype,`open`,void 0),s([i({type:Boolean,reflect:!0})],l.prototype,`disabled`,void 0),s([i({reflect:!0})],l.prototype,`icon`,void 0),s([i({reflect:!0,attribute:`close-icon`})],l.prototype,`closeIcon`,void 0),s([i({reflect:!0})],l.prototype,`label`,void 0),s([i({reflect:!0,attribute:`close-label`})],l.prototype,`closeLabel`,void 0),s([i({reflect:!0})],l.prototype,`size`,void 0),s([i({reflect:!0})],l.prototype,`color`,void 0),s([i({reflect:!0})],l.prototype,`shape`,void 0),s([i({reflect:!0})],l.prototype,`direction`,void 0),s([i({reflect:!0})],l.prototype,`position`,void 0),s([c(`.trigger`)],l.prototype,`_trigger`,void 0),s([c(`slot`)],l.prototype,`_slot`,void 0),s([c(`.menu`)],l.prototype,`_menu`,void 0),s([e()],l.prototype,`_effectiveDirection`,void 0),s([e()],l.prototype,`_crossAlign`,void 0),l=s([o(`moni-fab-menu`)],l);