@moni-labs/moni-ui 0.4.0 → 0.4.2

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

@@ -0,0 +1,111 @@
+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.title=``,this.description=``,this.active=!1,this.completed=!1,this.icon=``,this.index=0,this.orientation=`horizontal`}static{this.styles=[i,n`
+			:host {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				text-align: center;
+				gap: 0.5rem;
+				font-family: var(--font);
+				color: var(--on-surface-variant);
+				position: relative;
+				flex: 1;
+			}
+
+			:host(:not(:last-child))::after {
+				content: '';
+				position: absolute;
+				inset-inline-start: calc(50% + 1rem);
+				inset-inline-end: calc(-50% + 1rem - var(--_stepper-gap, 0.5rem));
+				inset-block-start: 1rem;
+				block-size: 0.0625rem;
+				transform: translateY(-50%);
+				background-color: var(--outline-variant);
+				z-index: 0;
+			}
+
+			:host([orientation='vertical']) {
+				flex-direction: row;
+				align-items: flex-start;
+				text-align: start;
+				gap: 1rem;
+				min-block-size: 4rem;
+			}
+
+			/* Conector vertical. Geometría: el punto (dot) ocupa y=0 a y=2rem en
+			   la parte superior del paso (el host es flex de columna con min-block-size 4rem).
+			   El conector va desde la parte INFERIOR del punto actual (y=2rem) hasta
+			   la parte INFERIOR del paso actual (y=100%). Esta fórmula se mantiene
+			   calibrada independientemente de la altura del paso. */
+			:host([orientation='vertical']:not(:last-child))::after {
+				position: absolute;
+				inset-inline-start: calc(1rem - 0.03125rem);
+				inset-block-start: 2rem;
+				inset-inline-end: auto;
+				inline-size: 0.0625rem;
+				block-size: calc(100% - 2rem + var(--_stepper-gap, 0.5rem));
+				transform: none;
+				z-index: 0;
+				margin: 0;
+				background-color: var(--outline-variant);
+			}
+
+			.dot {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				inline-size: 2rem;
+				block-size: 2rem;
+				border-radius: 50%;
+				background-color: var(--surface-container);
+				color: var(--on-surface-variant);
+				font-size: 0.875rem;
+				font-weight: 500;
+				flex: none;
+				z-index: 1;
+			}
+
+			:host([active]) .dot {
+				background-color: var(--primary);
+				color: var(--on-primary);
+			}
+
+			:host([completed]) .dot {
+				background-color: var(--primary);
+				color: var(--on-primary);
+			}
+
+			:host([active]) .text {
+				color: var(--on-surface);
+			}
+
+			.text {
+				display: flex;
+				flex-direction: column;
+				min-inline-size: 0;
+				z-index: 1;
+			}
+			.title {
+				font-size: 0.875rem;
+				font-weight: 500;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			.description {
+				font-size: 0.75rem;
+				opacity: 0.7;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		`]}render(){let t=this.completed?e`<moni-icon name="check"></moni-icon>`:this.icon?e`<moni-icon name="${this.icon}"></moni-icon>`:e`${this.index+1}`;return e`
+			<span class="dot" part="dot">${t}</span>
+			<div class="text" part="text">
+				<span class="title" part="title"
+					><slot>${this.title}</slot></span
+				>
+				<span class="description" part="description"
+					>${this.description}</span
+				>
+			</div>
+		`}};o([r({reflect:!0})],s.prototype,`title`,void 0),o([r({reflect:!0})],s.prototype,`description`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`active`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`completed`,void 0),o([r({reflect:!0})],s.prototype,`icon`,void 0),o([r({type:Number,reflect:!0})],s.prototype,`index`,void 0),o([r({reflect:!0})],s.prototype,`orientation`,void 0),s=o([a(`moni-step`)],s);

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

@@ -0,0 +1,25 @@
+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.orientation=`horizontal`,this.current=0,this._onSlotChange=()=>{this._syncSteps()}}updated(e){(e.has(`current`)||e.has(`orientation`)||e.size===0)&&this._syncSteps()}_syncSteps(){Promise.resolve().then(()=>{let e=this._steps||[];e.length===0&&(e=Array.from(this.querySelectorAll(`moni-step`))),e.forEach((e,t)=>{e.index=t,e.orientation=this.orientation,e.completed=t<this.current,e.active=t===this.current})})}static{this.styles=[i,n`
+			:host {
+				--_stepper-gap: 0.5rem;
+				display: block;
+				font-family: var(--font);
+			}
+
+			.list {
+				display: flex;
+				gap: var(--_stepper-gap);
+				padding: 0;
+				margin: 0;
+				list-style: none;
+			}
+			:host([orientation='vertical']) .list {
+				flex-direction: column;
+			}
+
+			::slotted(*) {
+				flex: 1;
+				min-inline-size: 0;
+			}
+		`]}render(){return e`<ol class="list" part="stepper">
+			<slot @slotchange=${this._onSlotChange}></slot>
+		</ol>`}};o([r({reflect:!0})],c.prototype,`orientation`,void 0),o([r({type:Number,reflect:!0})],c.prototype,`current`,void 0),o([s({selector:`moni-step`})],c.prototype,`_steps`,void 0),c=o([a(`moni-stepper`)],c);

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

@@ -0,0 +1,169 @@
+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{t as c}from"../chunks/if-defined-CuEAJKpp.js";var l=class extends t{static{this.formAssociated=!0}constructor(){super(),this.label=``,this.checked=!1,this.disabled=!1,this.icon=!1,this.uncheckedIcon=``,this.checkedIcon=``,this.name=``,this.value=``,this._internals=this.attachInternals()}updated(e){this._input&&(e.has(`checked`)&&(this._input.checked=this.checked,this._internals?.setFormValue?.(this.checked?this.value||`on`:null)),e.has(`disabled`)&&(this._input.disabled=this.disabled))}_onChange(e){this.checked=e.target.checked,this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}static{this.styles=[i,n`
+			:host {
+				display: inline-flex;
+				font-family: var(--font);
+			}
+
+			.switch {
+				--_thumb: 1rem; /* 16dp unselected (M3) */
+				--_track-w: 3.25rem; /* 52dp */
+				--_track-h: 2rem; /* 32dp */
+				inline-size: auto;
+				block-size: auto;
+				line-height: normal;
+				white-space: nowrap;
+				cursor: pointer;
+				display: inline-flex;
+				align-items: center;
+				direction: ltr;
+			}
+
+			/* Input hit area: 52dp × 32dp track */
+			.switch > input {
+				inline-size: var(--_track-w);
+				block-size: var(--_track-h);
+				opacity: 0;
+				cursor: pointer;
+				flex: none;
+			}
+
+			/* Text label span */
+			.switch > span {
+				display: inline-flex;
+				align-items: center;
+				color: var(--on-surface);
+				font-size: 0.875rem;
+				position: relative;
+			}
+
+			/* Track */
+			.switch > span::after {
+				content: "";
+				position: absolute;
+				inset: 50% auto auto 0;
+				background-color: var(--surface-container-highest);
+				border: 0.125rem solid var(--outline);
+				box-sizing: border-box;
+				inline-size: var(--_track-w);
+				block-size: var(--_track-h);
+				border-radius: var(--_track-h);
+				/* Shift the track to sit behind the input (input is to the left) */
+				transform: translate(calc(-1 * var(--_track-w)), -50%);
+				pointer-events: none;
+				transition: background-color var(--speed2), border-color var(--speed2);
+			}
+
+			/* Thumb (handle) */
+			.switch > span::before,
+			.switch.icon > span > i {
+				position: absolute;
+				inset: 50% auto auto 0;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 50%;
+				transition: all var(--speed2);
+				font-size: calc(var(--_thumb) - 0.25rem);
+				user-select: none;
+				min-inline-size: var(--_thumb);
+				min-block-size: var(--_thumb);
+				content: "";
+				color: var(--on-surface-variant);
+				background-color: var(--outline);
+				/* Unchecked: 16dp thumb sits 2dp from track start */
+				transform: translate(calc(-1 * var(--_track-w) + 0.25rem), -50%);
+				z-index: 2;
+				pointer-events: none;
+			}
+
+			/* Icon mode uses a 24dp thumb at rest */
+			.switch.icon > span > i {
+				--_thumb: 1.5rem;
+				transform: translate(calc(-1 * var(--_track-w) + 0.25rem), -50%);
+				font-family: var(--font-icon);
+			}
+
+			/* 40dp circular state layer behind the thumb on hover/focus */
+			.switch > span::before,
+			.switch.icon > span > i {
+				box-shadow: 0 0 0 0 transparent;
+			}
+			.switch > input:not(:disabled):is(:focus, :hover) + span::before,
+			.switch.icon > input:not(:disabled):is(:focus, :hover) + span > i {
+				box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--on-surface) 8%, transparent);
+			}
+			.switch > input:not(:disabled):is(:focus, :hover):checked + span::before,
+			.switch.icon > input:not(:disabled):is(:focus, :hover):checked + span > i {
+				box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--primary) 12%, transparent);
+			}
+
+			/* Checked: track fills with primary */
+			.switch > input:checked + span::after {
+				border: none;
+				background-color: var(--primary);
+			}
+
+			/* Checked: thumb grows to 24dp and slides right */
+			.switch > input:checked + span::before {
+				--_thumb: 1.5rem;
+				content: "";
+				color: var(--primary);
+				background-color: var(--on-primary);
+				transform: translate(calc(-1.75rem), -50%);
+			}
+
+			/* Checked icon mode: show check icon */
+			.switch.icon > input:checked + span > i {
+				content: "check";
+				color: var(--primary);
+				background-color: var(--on-primary);
+				transform: translate(-1.75rem, -50%);
+				font-family: var(--font-icon);
+			}
+
+			/* Active (pressed) states: 28dp thumb */
+			.switch > input:active:not(:disabled) + span::before {
+				--_thumb: 1.75rem;
+				/* Preserve the 16dp resting thumb's center while growing to 28dp. */
+				transform: translate(calc(-1 * var(--_track-w) - 0.125rem), -50%);
+			}
+
+			.switch.icon > input:active:not(:disabled) + span > i {
+				--_thumb: 1.75rem;
+				/* Icon thumbs rest at 24dp, so 28dp adds 2dp on each side. */
+				transform: translate(calc(-1 * var(--_track-w) + 0.125rem), -50%);
+			}
+
+			.switch > input:active:checked:not(:disabled) + span::before,
+			.switch.icon > input:active:checked:not(:disabled) + span > i {
+				--_thumb: 1.75rem;
+				/* Keep the checked thumb centered at 36dp while it grows. */
+				transform: translate(-1.875rem, -50%);
+			}
+
+			/* Disabled */
+			.switch > input:disabled + span {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+
+			/* Focus outline on the track */
+			.switch > :focus-visible + span::after {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.25rem;
+			}
+		`]}render(){let t=this.icon||!!(this.uncheckedIcon||this.checkedIcon),n=this.uncheckedIcon||(this.icon?`close`:``),r=this.checkedIcon||(this.icon?`check`:``),i=this.checked?r:n;return e`<label class=${t?`switch icon`:`switch`} part="switch">
+			<input
+				type="checkbox"
+				role="switch"
+				.checked=${this.checked}
+				?disabled=${this.disabled}
+				name=${c(this.name||void 0)}
+				value=${c(this.value||void 0)}
+				@change=${this._onChange}
+			/>
+			<span>
+				${t?e`<i>${i}</i>`:``}
+				${this.label?e`<span class="label" part="label">&nbsp;${this.label}</span>`:e`<slot></slot>`}
+			</span>
+		</label>`}};o([r({reflect:!0})],l.prototype,`label`,void 0),o([r({type:Boolean,reflect:!0})],l.prototype,`checked`,void 0),o([r({type:Boolean,reflect:!0})],l.prototype,`disabled`,void 0),o([r({type:Boolean,reflect:!0})],l.prototype,`icon`,void 0),o([r({reflect:!0,attribute:`unchecked-icon`})],l.prototype,`uncheckedIcon`,void 0),o([r({reflect:!0,attribute:`checked-icon`})],l.prototype,`checkedIcon`,void 0),o([r({reflect:!0})],l.prototype,`name`,void 0),o([r({reflect:!0})],l.prototype,`value`,void 0),o([s(`input`)],l.prototype,`_input`,void 0),l=o([a(`moni-switch`)],l);

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

@@ -0,0 +1,93 @@
+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.active=!1,this.icon=``,this.label=``,this.href=`#`}static{this.styles=[i,n`
+			:host {
+				display: inline-flex;
+				font-family: var(--font);
+			}
+
+			:host-context(moni-tabs[vertical]) {
+				display: flex;
+				inline-size: 100%;
+			}
+
+			a {
+				position: relative;
+				display: flex;
+				font-size: 0.875rem;
+				font-weight: 500;
+				color: var(--on-surface-variant);
+				padding: 0.5rem 1rem;
+				text-align: center;
+				min-block-size: 3rem;
+				inline-size: 100%;
+				gap: 0.25rem;
+				text-decoration: none;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+				transition: color var(--speed2);
+			}
+
+			:host-context(moni-tabs[vertical]) a {
+				flex-direction: column;
+				gap: 0.25rem;
+				min-block-size: 4.5rem;
+				border-inline-end: 0.125rem solid transparent;
+				border-block-end: none;
+			}
+
+			a:hover {
+				color: var(--primary);
+			}
+
+			a.active,
+			a.active > * {
+				color: var(--primary);
+			}
+
+			a.active::before {
+				content: '';
+				position: absolute;
+				inset: auto 0 0 0;
+				/* M3 Expressive: indicator thickness 3dp. */
+				block-size: 0.1875rem;
+				/* M3 Expressive default: full tab width. */
+				border-radius: 0.75rem;
+				background-color: var(--primary);
+			}
+
+			:host-context(moni-tabs[vertical]) a.active::before {
+				inset: 0 0 0 auto;
+				inline-size: 0.1875rem;
+				block-size: auto;
+			}
+
+			/* M3 indicator-size='min': 24dp de altura (centrado en la pestaña) con
+			   radio superior/inferior de 8dp — coincide con la especificación M3 § Indicator anatomy. */
+			:host-context(moni-tabs[indicator-size='min']) a.active::before {
+				margin: 0 auto;
+				max-inline-size: min(100%, 4rem);
+				block-size: 1.5rem;
+				border-radius: 0.5rem;
+			}
+
+			:host-context(moni-tabs[vertical][indicator-size='min'])
+				a.active::before {
+				margin: auto 0;
+				max-block-size: 4rem;
+				max-inline-size: 0.1875rem;
+				border-radius: 0.5rem;
+			}
+
+			/* M3 indicator-size='max': altura completa de la pestaña, sin redondeo. */
+			:host-context(moni-tabs[indicator-size='max']) a.active::before {
+				border-radius: 0;
+			}
+		`]}render(){return e`<a
+			href=${this.href||`#`}
+			class=${this.active?`active`:``}
+			part="tab"
+			aria-selected=${this.active}
+		>
+			${this.icon?e`<moni-icon name="${this.icon}" part="icon"></moni-icon>`:e`<slot name="icon"></slot>`}
+			<span part="label"><slot>${this.label}</slot></span>
+		</a>`}};o([r({type:Boolean,reflect:!0})],s.prototype,`active`,void 0),o([r({reflect:!0})],s.prototype,`icon`,void 0),o([r({reflect:!0})],s.prototype,`label`,void 0),o([r({reflect:!0})],s.prototype,`href`,void 0),s=o([a(`moni-tab`)],s);

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

@@ -0,0 +1,38 @@
+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.mode=`primary`,this.scrollable=!1,this.vertical=!1,this.align=`default`,this.indicatorSize=`default`}static{this.styles=[i,n`
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			nav {
+				display: flex;
+				white-space: nowrap;
+				border-block-end: 0.0625rem solid var(--surface-variant);
+				border-radius: 0;
+				overflow-x: auto;
+			}
+
+			nav.left-align {
+				justify-content: flex-start;
+			}
+			nav.center-align {
+				justify-content: center;
+			}
+			nav.right-align {
+				justify-content: flex-end;
+			}
+			:host(:not([align])) nav,
+			nav:not(.left-align):not(.center-align):not(.right-align) {
+				justify-content: space-around;
+			}
+
+			:host([vertical]) nav {
+				flex-direction: column;
+				border-block-end: none;
+				border-inline-end: 0.0625rem solid var(--surface-variant);
+				overflow-x: visible;
+				overflow-y: auto;
+			}
+		`]}render(){let t=[`tabs`,this.align==="default"?``:`${this.align}-align`,this.indicatorSize==="default"?``:this.indicatorSize,this.mode,this.vertical?`vertical`:``].filter(Boolean).join(` `);return e`<nav class=${t} part="tabs">
+			<slot></slot>
+		</nav>`}};o([r({reflect:!0})],s.prototype,`mode`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`scrollable`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`vertical`,void 0),o([r({reflect:!0})],s.prototype,`align`,void 0),o([r({reflect:!0,attribute:`indicator-size`})],s.prototype,`indicatorSize`,void 0),s=o([a(`moni-tabs`)],s);