@moni-labs/moni-ui 0.4.0 → 0.4.2

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

@@ -0,0 +1,154 @@
+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/if-defined-CuEAJKpp.js";import{t as l}from"../chunks/live-B7Rjg1kt.js";var u,d=class extends t{static{u=this}static{this.formAssociated=!0}constructor(){super(),this.label=``,this.checked=!1,this.disabled=!1,this.uncheckedIcon=``,this.checkedIcon=``,this.iconContainer=`circle`,this.size=`medium`,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))}static{this.styles=[i,n`
+			:host {
+				--_size: 1.5rem;
+				display: inline-flex;
+				font-family: var(--font);
+			}
+			:host([size='small'])  { --_size: 1rem; }
+			:host([size='large'])  { --_size: 2rem; }
+			:host([size='extra'])  { --_size: 2.5rem; }
+
+			/* BeerCSS .radio */
+			label {
+				inline-size: auto;
+				block-size: auto;
+				line-height: normal;
+				white-space: nowrap;
+				cursor: pointer;
+				display: inline-flex;
+				align-items: center;
+			}
+
+			/* BeerCSS: input has real size, opacity 0 */
+			input {
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				opacity: 0;
+				cursor: pointer;
+				flex: none;
+			}
+
+			/* BeerCSS: span wraps visible indicator + label */
+			span {
+				display: inline-flex;
+				align-items: center;
+				color: var(--on-surface);
+				font-size: 0.875rem;
+				position: relative;
+			}
+
+			/* Indicador visual del radio, superpuesto al input nativo. */
+			span > i {
+				--_size: inherit;
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				box-sizing: border-box;
+				margin: 0 auto;
+				outline: none;
+				color: var(--on-surface-variant);
+				position: absolute;
+				inset: auto auto auto calc(var(--_size) * -1);
+				border-radius: 50%;
+				user-select: none;
+				z-index: 1;
+				font-family: var(--font-icon);
+				font-size: var(--_size);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			/* Checked: selected radio icon */
+			input:checked + span > i {
+				color: var(--primary);
+			}
+
+			/* Los iconos personalizados viven dentro del círculo del radio. */
+			span.custom-icons > i {
+				inline-size: calc(var(--_size) * 0.75);
+				block-size: calc(var(--_size) * 0.75);
+				inset-inline-start: calc(var(--_size) * -0.875);
+				border: 0.125rem solid var(--on-surface-variant);
+				border-radius: 50%;
+				font-size: calc(var(--_size) * 0.55);
+				font-variation-settings: 'wght' 600;
+				transition: background-color var(--speed1), border-color var(--speed1), color var(--speed1);
+			}
+
+			input:checked + span.custom-icons > i {
+				border-color: var(--primary);
+				background-color: var(--primary);
+				color: var(--on-primary);
+			}
+
+			/* Variante de icono libre, sin círculo exterior. */
+			span.custom-icons.no-icon-container > i {
+				border-color: transparent;
+				background-color: transparent;
+				color: var(--on-surface-variant);
+			}
+
+			input:checked + span.custom-icons.no-icon-container > i {
+				border-color: transparent;
+				background-color: transparent;
+				color: var(--primary);
+			}
+
+			/* BeerCSS: span::after = hover ripple */
+			span::after {
+				--_size: inherit;
+				content: '';
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				box-sizing: border-box;
+				margin: 0 auto;
+				position: absolute;
+				inset: auto auto auto calc(var(--_size) * -1);
+				border-radius: 50%;
+				user-select: none;
+				transition: all var(--speed1);
+				background-color: currentColor;
+				box-shadow: 0 0 0 0 currentColor;
+				opacity: 0;
+			}
+
+			label:hover > input:not(:disabled) + span::after,
+			input:not(:disabled):focus + span::after {
+				box-shadow: 0 0 0 0.5rem currentColor;
+				opacity: 0.1;
+			}
+
+			/* Label padding */
+			span.has-label {
+				padding-inline-start: 0.25rem;
+			}
+
+			span.has-label.no-icon-container {
+				padding-inline-start: 0;
+			}
+
+			/* Disabled */
+			input:disabled + span {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+
+			/* Focus ring */
+			input:focus-visible + span > i {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.375rem;
+			}
+		`]}_onChange(e){if(this.checked=e.target.checked,this.checked&&this.name){let e=this.getRootNode();e&&e.querySelectorAll(`moni-radio[name="${this.name}"]`).forEach(e=>{e!==this&&e instanceof u&&(e.checked=!1)})}this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}render(){let t=!!(this.uncheckedIcon||this.checkedIcon),n=t?this.uncheckedIcon:`radio_button_unchecked`,r=t?this.checkedIcon:`radio_button_checked`,i=this.checked?r:n,a=[this.label?`has-label`:``,t?`custom-icons`:``,t&&this.iconContainer===`none`?`no-icon-container`:``].filter(Boolean).join(` `);return e`<label part="radio">
+			<input
+				type="radio"
+				.checked=${l(this.checked)}
+				?disabled=${this.disabled}
+				name=${c(this.name||void 0)}
+				value=${c(this.value||void 0)}
+				@change=${this._onChange}
+			/>
+			<span class=${a}>
+				<i aria-hidden="true">${i}</i>
+				${this.label?e`${this.label}`:e`<slot></slot>`}
+			</span>
+		</label>`}};o([r({reflect:!0})],d.prototype,`label`,void 0),o([r({type:Boolean,reflect:!0})],d.prototype,`checked`,void 0),o([r({type:Boolean,reflect:!0})],d.prototype,`disabled`,void 0),o([r({reflect:!0,attribute:`unchecked-icon`})],d.prototype,`uncheckedIcon`,void 0),o([r({reflect:!0,attribute:`checked-icon`})],d.prototype,`checkedIcon`,void 0),o([r({reflect:!0,attribute:`icon-container`})],d.prototype,`iconContainer`,void 0),o([r({reflect:!0})],d.prototype,`size`,void 0),o([r({reflect:!0})],d.prototype,`name`,void 0),o([r({reflect:!0})],d.prototype,`value`,void 0),o([s(`input`)],d.prototype,`_input`,void 0),d=u=o([a(`moni-radio`)],d);

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

@@ -0,0 +1,55 @@
+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.x=50,this.y=50,this.active=!1,this.speed=`normal`,this.color=`primary`,this._target=null,this._timeoutId=null,this._onPointerDown=e=>{if(!this._target)return;let t=this._target.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top;this.x=n/t.width*100,this.y=r/t.height*100,this._timeoutId&&(clearTimeout(this._timeoutId),this.active=!1),requestAnimationFrame(()=>{this.active=!0;let e=this.speed===`fast`?300:this.speed===`slow`?1200:600;this._timeoutId=setTimeout(()=>{this.active=!1,this._timeoutId=null},e)})}}connectedCallback(){super.connectedCallback(),this._target=this.parentElement,this._target&&(getComputedStyle(this._target).position===`static`&&(this._target.style.position=`relative`),this._target.addEventListener(`pointerdown`,this._onPointerDown))}disconnectedCallback(){this._target&&this._target.removeEventListener(`pointerdown`,this._onPointerDown),this._timeoutId&&clearTimeout(this._timeoutId),super.disconnectedCallback()}static{this.styles=[i,n`
+			:host {
+				display: block;
+				position: absolute;
+				inset: 0;
+				border-radius: inherit;
+				pointer-events: none;
+				overflow: hidden;
+				--_dur: 600ms;
+				color: var(--primary);
+				z-index: 1;
+			}
+			:host([speed='fast']) {
+				--_dur: 300ms;
+			}
+			:host([speed='slow']) {
+				--_dur: 1200ms;
+			}
+
+			.ripple {
+				position: absolute;
+				inline-size: 200%;
+				aspect-ratio: 1;
+				border-radius: 50%;
+				translate: -50% -50%;
+				opacity: 0;
+				pointer-events: none;
+				background-color: currentColor;
+				inset-block-start: var(--_y, 50%);
+				inset-inline-start: var(--_x, 50%);
+				scale: 0;
+				transition: opacity var(--_dur) ease, scale 0s var(--_dur);
+			}
+
+			:host([color='primary']) {
+				color: var(--primary);
+			}
+			:host([color='secondary']) {
+				color: var(--secondary);
+			}
+			:host([color='surface']) {
+				color: var(--surface-variant);
+			}
+
+			:host([active]) .ripple {
+				opacity: 0.25;
+				scale: 1;
+				transition: scale var(--_dur) cubic-bezier(0.2, 0, 0, 1),
+					opacity var(--_dur) ease;
+			}
+		`]}render(){return e`<span
+			class="ripple"
+			part="ripple"
+			style="--_x: ${this.x}%; --_y: ${this.y}%;"
+		></span>`}};o([r({type:Number,reflect:!0})],s.prototype,`x`,void 0),o([r({type:Number,reflect:!0})],s.prototype,`y`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`active`,void 0),o([r({reflect:!0})],s.prototype,`speed`,void 0),o([r({reflect:!0})],s.prototype,`color`,void 0),s=o([a(`moni-ripple`)],s);

package/dist/cdn/components/moni-segmented-button.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";import{t as s}from"../chunks/query-assigned-elements-BBHe1xEY.js";var c,l=class extends t{static{c=this}static{this.formAssociated=!0}static{this._deprecationWarned=!1}constructor(){super(),this.name=``,this.multi=!1,this.size=`small`,this.hideCheck=!1,this.gap=``,this.internals=this.attachInternals()}connectedCallback(){super.connectedCallback(),c._deprecationWarned||(c._deprecationWarned=!0,console.warn(`[moni-ui] <moni-segmented-button> is deprecated since v0.3.0. Material Design 3 Expressive no longer recommends segmented buttons. Use <moni-button-group variant="connected"> instead. See m3-docs/components/segmented-buttons/overview.md § M3 Expressive update.`))}get form(){return this.internals.form}get type(){return`segmented-button`}get value(){let e=this.segments.filter(e=>e.checked).map(e=>e.value);return this.multi?e.join(`,`):e[0]||``}get segments(){return this.slottedSegments.filter(e=>e.tagName.toLowerCase()===`moni-button-segment`)}static{this.styles=[i,n`
+			:host {
+				display: inline-flex;
+				align-items: center;
+				vertical-align: middle;
+			}
+
+			.group {
+				display: inline-flex;
+				align-items: center;
+				position: relative;
+				width: 100%;
+			}
+
+			slot {
+				display: contents;
+			}
+
+			::slotted(moni-button-segment) {
+				flex: 1 1 0;
+				min-inline-size: 0;
+				transition: flex-grow 300ms cubic-bezier(0.2, 0, 0, 1);
+			}
+
+			::slotted(moni-button-segment[checked]) {
+				flex-grow: 1.12;
+			}
+		`]}updated(e){super.updated(e),(e.has(`hideCheck`)||e.has(`size`)||e.has(`gap`))&&this.updateChildren(),this.updateFormValue()}handleSlotChange(){this.updateChildren(),this.updateFormValue()}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.segments,t=e.length;e.forEach((e,n)=>{e.hideCheck=this.hideCheck,e.size=this.size,e.position=t===1?`solo`:n===0?`first`:n===t-1?`last`:`middle`})}updateFormValue(){typeof this.internals.setFormValue==`function`&&this.internals.setFormValue(this.value)}handleClick(e){let t=e.target.closest(`moni-button-segment`);if(!t||t.disabled)return;let n=this.segments;this.multi?t.checked=!t.checked:n.forEach(e=>{e.checked=e===t&&!e.checked}),this.updateFormValue(),this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{value:this.value,segment:t,checked:t.checked}}))}render(){let t=this.getGapValue(this.gap),n=t?`gap: ${t}; --moni-button-segment-gap: 0px;`:``;return e`
+			<div class="group" style=${n} part="group" @click=${this.handleClick}>
+				<slot @slotchange=${this.handleSlotChange}></slot>
+			</div>
+		`}};o([r({reflect:!0})],l.prototype,`name`,void 0),o([r({type:Boolean,reflect:!0})],l.prototype,`multi`,void 0),o([r({reflect:!0})],l.prototype,`size`,void 0),o([r({type:Boolean,reflect:!0,attribute:`hide-check`})],l.prototype,`hideCheck`,void 0),o([r()],l.prototype,`gap`,void 0),o([s({flatten:!0})],l.prototype,`slottedSegments`,void 0),l=c=o([a(`moni-segmented-button`)],l);

package/dist/cdn/components/moni-select-option.js

@@ -0,0 +1,47 @@
+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.value=``,this.label=``,this.group=``,this.selected=!1,this.disabled=!1}static{this.styles=[i,n`
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			li {
+				all: unset;
+				box-sizing: border-box;
+				position: relative;
+				display: flex;
+				align-items: center;
+				text-align: start;
+				justify-content: flex-start;
+				white-space: nowrap;
+				gap: 1rem;
+				padding: 0.5rem 1rem;
+				min-block-size: 2.5rem;
+				flex: 1;
+				margin: 0 !important;
+				cursor: pointer;
+				border-radius: 0.25rem;
+				color: var(--on-surface);
+				font-size: 0.875rem;
+				transition: background-color var(--speed2), border-radius var(--speed2);
+			}
+
+			li:hover {
+				background-color: var(--active);
+			}
+			li.selected {
+				background-color: var(--tertiary-container);
+				color: var(--on-tertiary-container);
+			}
+			li:is(.selected, :active) {
+				border-radius: 0.75rem;
+			}
+			:host([disabled]) li {
+				opacity: 0.5;
+				pointer-events: none;
+			}
+		`]}render(){return e`<li
+			part="option"
+			class="${this.selected?`selected`:``}"
+		>
+			<span part="label"><slot>${this.label||this.value}</slot></span>
+		</li>`}};o([r({reflect:!0})],s.prototype,`value`,void 0),o([r({reflect:!0})],s.prototype,`label`,void 0),o([r({reflect:!0})],s.prototype,`group`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`selected`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),s=o([a(`moni-select-option`)],s);