@moni-labs/moni-ui 0.4.0 → 0.4.2

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

@@ -0,0 +1,143 @@
+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.variant=`elevated`,this.clickable=!1,this.draggable=!1,this.disabled=!1}static{this.styles=[i,n`
+			:host {
+				display: block;
+				font-family: var(--font);
+				/* M3 spec: 12dp corner, 16dp padding, 8dp max between cards. */
+				border-radius: 0.75rem;
+				color: var(--on-surface);
+				position: relative;
+				overflow: hidden;
+				transition:
+					box-shadow var(--speed2),
+					background-color var(--speed2),
+					border-color var(--speed2);
+			}
+
+			/* Elevated variant: surface-container-low + elevation 1. */
+			:host([variant='elevated']) {
+				background-color: var(--surface-container-low);
+				box-shadow: var(--elevate1);
+			}
+
+			/* Filled variant: surface-container-highest, no shadow. */
+			:host([variant='filled']) {
+				background-color: var(--surface-container-highest);
+			}
+
+			/* Outlined variant: surface + outline-variant 1dp. */
+			:host([variant='outlined']) {
+				background-color: var(--surface);
+				border: 0.0625rem solid var(--outline-variant);
+			}
+
+			/* Clickable cards expose hover/focus/pressed state layers. */
+			:host([clickable]) {
+				cursor: pointer;
+			}
+			:host([clickable]:hover) {
+				box-shadow: var(--elevate2);
+			}
+			:host([clickable]:focus-visible) {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.125rem;
+			}
+			:host([clickable]:active) {
+				box-shadow: var(--elevate1);
+			}
+
+			/* Draggable cards show elevation 3 when picked up. */
+			:host([draggable]) {
+				cursor: grab;
+			}
+			:host([draggable]:active) {
+				cursor: grabbing;
+				box-shadow: var(--elevate3);
+			}
+
+			/* Disabled state. */
+			:host([disabled]) {
+				opacity: 0.38;
+				pointer-events: none;
+				cursor: not-allowed;
+			}
+
+			/* ─── Card slots layout ─── */
+			.media {
+				display: block;
+				margin-block-end: 1rem;
+			}
+			.media[hidden] {
+				display: none;
+			}
+
+			.body {
+				padding: 0 1rem;
+				display: flex;
+				flex-direction: column;
+				gap: 0.5rem;
+			}
+
+			.headline {
+				font-size: 1.25rem;
+				line-height: 1.75rem;
+				font-weight: 400;
+				letter-spacing: 0;
+				color: var(--on-surface);
+				margin: 0;
+				padding: 0;
+			}
+			.subhead {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 500;
+				letter-spacing: 0.007em;
+				color: var(--on-surface-variant);
+				margin: 0;
+				padding: 0;
+			}
+			.supporting {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 400;
+				letter-spacing: 0.014em;
+				color: var(--on-surface-variant);
+				margin: 0;
+				padding: 0;
+			}
+
+			.actions {
+				display: flex;
+				gap: 0.5rem;
+				padding: 0.75rem 1rem 1rem;
+			}
+			.actions[hidden] {
+				display: none;
+			}
+
+			/* Ensure slotted headings inherit our typography reset
+			   (margin/padding/font-size) so consumers can use semantic
+			   h1..h6 without breaking the visual rhythm. */
+			::slotted(:is(h1, h2, h3, h4, h5, h6)) {
+				margin: 0;
+				padding: 0;
+				font-size: inherit;
+				font-weight: inherit;
+				line-height: inherit;
+				letter-spacing: inherit;
+				color: inherit;
+			}
+		`]}render(){return e`
+			<div class="media" part="media">
+				<slot name="media"></slot>
+			</div>
+			<div class="body" part="body">
+				<slot name="headline">
+					<slot></slot>
+				</slot>
+				<slot name="subhead"></slot>
+				<slot name="supporting"></slot>
+			</div>
+			<div class="actions" part="actions">
+				<slot name="actions"></slot>
+			</div>
+		`}};o([r({reflect:!0})],s.prototype,`variant`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`clickable`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`draggable`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),s=o([a(`moni-card`)],s);

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

@@ -0,0 +1,311 @@
+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/base-BIpe3L86.js";import{t as l}from"../chunks/query-SWT-tzvq.js";import{t as u}from"../chunks/event-emitter-CGhsijUg.js";import{t as d}from"../chunks/gsap-DWxn8li7.js";var f;function p(e){return(t,n)=>c(t,n,{get(){return(this.renderRoot??(f??=document.createDocumentFragment())).querySelectorAll(e)}})}var m=class extends n{constructor(...e){super(...e),this.items=[],this.layout=`multi-browse`,this.auto=!0,this.largeWidth=220,this.mediumWidth=96,this.smallWidth=48,this.gap=8,this.padding=16,this.borderRadius=28,this.showAll=!1,this.showAllText=`Show all`,this.headerText=``,this.hideNav=!1,this.infinite=!1,this.autoplay=!1,this.autoplayInterval=3e3,this._containerWidth=0,this._slottedItems=[],this._hasSlottedShowAll=!1,this._resizeObserver=null,this._logicalItemInViewport=[],this._isDragging=!1,this._dragStartX=0,this._scrollLeftAtDragStart=0,this._pointerVelocity=0,this._lastPointerTime=0,this._lastPointerX=0,this._totalDraggedDistance=0,this._animationFrameId=null,this._isMobile=!1,this._tickerTarget=0,this._tickerCurrent=0,this._isTicking=!1,this._infiniteInitialized=!1,this._autoplayTimer=null,this._cardSetX=[],this._cardSetWidth=[],this._imgSetX=[],this._titleSetOpacity=[],this._tick=()=>{let e=d.ticker.deltaRatio(),t=this._isMobile?.08:.15;this._tickerCurrent+=(this._tickerTarget-this._tickerCurrent)*t*e,Math.abs(this._tickerTarget-this._tickerCurrent)<5e-4&&(this._tickerCurrent=this._tickerTarget,d.ticker.remove(this._tick),this._isTicking=!1,this._checkInfiniteWrap()),this._applyLayout(this._tickerCurrent)},this._scheduleLayout=()=>{this._scrollContainer&&(this._tickerTarget=this._scrollContainer.scrollLeft/this.itemSize,this._isTicking||(this._isTicking=!0,d.ticker.add(this._tick)))},this.updateLayout=(e=!1)=>{if(!(!this._scrollContainer||!this._cards||this._cards.length===0)){if(this._cardSetX.length!==this._cards.length&&this._buildQuickSetters(),this.infinite&&!this._infiniteInitialized&&this.effectiveItems.length>0){let e=this.effectiveItems.length*this._visualCardsMultiplier,t=this._snapSetsCount,n=Math.floor(t/2);requestAnimationFrame(()=>{setTimeout(()=>{this._scrollContainer&&(this._scrollContainer.scrollWidth,this._scrollContainer.scrollLeft=n*e*this.itemSize,this._tickerTarget=this._scrollContainer.scrollLeft/this.itemSize,this._tickerCurrent=this._tickerTarget,this._applyLayout(this._tickerCurrent))},20)}),this._infiniteInitialized=!0}this._tickerTarget=this._scrollContainer.scrollLeft/this.itemSize,e||!this._isTicking&&this._tickerCurrent===0?(this._tickerCurrent=this._tickerTarget,this._applyLayout(this._tickerCurrent)):this._isTicking||(this._isTicking=!0,d.ticker.add(this._tick))}}}get effectiveItems(){return this.items&&this.items.length>0?this.items:this._slottedItems}static{this.styles=[a,r`
+			:host {
+				display: block;
+				width: 100%;
+				user-select: none;
+				-webkit-user-select: none;
+			}
+
+			.carousel-container {
+				position: relative;
+				width: 100%;
+				display: flex;
+				flex-direction: column;
+				gap: 12px;
+			}
+
+			.carousel-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-end;
+				padding: 0 var(--carousel-padding, 16px);
+			}
+
+			.carousel-header h3 {
+				margin: 0;
+				font-family: var(--font-title, serif);
+				font-size: 1.5rem;
+				font-weight: 500;
+				color: var(--on-surface);
+			}
+
+			.show-all-link {
+				color: var(--primary);
+				font-weight: 500;
+				font-size: 0.875rem;
+				text-decoration: none;
+				cursor: pointer;
+				transition: opacity var(--speed2);
+			}
+
+			.show-all-link:hover {
+				opacity: 0.8;
+				text-decoration: underline;
+			}
+
+			.carousel-viewport {
+				position: relative;
+				width: 100%;
+				overflow: hidden;
+			}
+
+			.scroll-container {
+				width: 100%;
+				height: 296px;
+				overflow-x: auto;
+				overflow-y: hidden;
+				scroll-snap-type: x mandatory;
+				scroll-padding-left: var(--carousel-padding, 16px);
+				scroll-padding-right: var(--carousel-padding, 16px);
+				scrollbar-width: none;
+				-webkit-overflow-scrolling: touch;
+				cursor: grab;
+			}
+
+			.scroll-container:active {
+				cursor: grabbing;
+			}
+
+			.scroll-container::-webkit-scrollbar {
+				display: none;
+			}
+
+			.snap-track {
+				display: flex;
+				width: calc(var(--carousel-track-width, 0px) + var(--carousel-right-padding, 128px));
+				gap: var(--carousel-gap, 8px);
+				padding: 8px 0 8px var(--carousel-padding, 16px);
+				height: 100%;
+				pointer-events: none;
+			}
+
+			.snap-item {
+				flex: 0 0 var(--carousel-snap-width, 220px);
+				height: 100%;
+				scroll-snap-align: start;
+				pointer-events: none;
+			}
+
+			.visual-track {
+				position: absolute;
+				left: 0;
+				top: 8px;
+				width: 0;
+				height: 280px;
+				overflow: visible;
+				pointer-events: none;
+			}
+
+			.card {
+				position: absolute;
+				top: 0;
+				height: 280px;
+				border-radius: var(--carousel-border-radius, 28px);
+				overflow: hidden;
+				background-color: var(--surface-container-high);
+				pointer-events: auto;
+				box-shadow: var(--elevate1);
+				will-change: transform;
+				cursor: pointer;
+				transition: box-shadow var(--speed2);
+			}
+
+			.card:hover {
+				box-shadow: var(--elevate2);
+			}
+
+			.card::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
+				pointer-events: none;
+				z-index: 1;
+			}
+
+			.img-parallax-container {
+				width: 100%;
+				height: 100%;
+				position: relative;
+				overflow: hidden;
+			}
+
+			.card img {
+				width: calc(100% + 50px);
+				height: 100%;
+				object-fit: cover;
+				position: absolute;
+				left: -25px;
+				pointer-events: none;
+				user-select: none;
+				-webkit-user-drag: none;
+				will-change: transform;
+			}
+
+			.card-title {
+				position: absolute;
+				bottom: 20px;
+				left: 20px;
+				right: 20px;
+				color: #ffffff;
+				margin: 0;
+				font-size: 1.1rem;
+				font-weight: 500;
+				pointer-events: none;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				z-index: 2;
+			}
+
+			/* Arrow navigation overlays */
+			.nav-button {
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				z-index: 10;
+				width: 48px;
+				height: 48px;
+				border-radius: 50%;
+				background-color: var(--surface-container-highest);
+				color: var(--on-surface);
+				border: none;
+				box-shadow: var(--elevate2);
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				cursor: pointer;
+				opacity: 0;
+				pointer-events: none;
+				transition: opacity var(--speed2), background-color var(--speed2);
+			}
+
+			.nav-button:hover {
+				background-color: var(--primary-container);
+				color: var(--on-primary-container);
+			}
+
+			.nav-button.prev {
+				left: 24px;
+			}
+
+			.nav-button.next {
+				right: 24px;
+			}
+
+			.carousel-viewport:hover .nav-button.visible {
+				opacity: 1;
+				pointer-events: auto;
+			}
+
+			@media (max-width: 600px) {
+				.nav-button {
+					display: none !important;
+				}
+			}
+
+			/* Utility icon style inside shadow dom */
+			.material-symbols {
+				font-family: var(--font-icon);
+				font-weight: normal;
+				font-style: normal;
+				font-size: 24px;
+				line-height: 1;
+				letter-spacing: normal;
+				text-transform: none;
+				display: inline-block;
+				white-space: nowrap;
+				word-wrap: normal;
+				direction: ltr;
+				-webkit-font-smoothing: antialiased;
+			}
+		`]}connectedCallback(){if(super.connectedCallback(),typeof ResizeObserver<`u`&&(this._resizeObserver=new ResizeObserver(e=>{for(let t of e)this._containerWidth=t.contentRect.width,this.updateLayout(!0),this.requestUpdate()}),this._resizeObserver.observe(this)),typeof window<`u`&&typeof window.matchMedia==`function`){let e=window.matchMedia(`(max-width: 600px)`);this._isMobile=e.matches;let t=e=>{this._isMobile=e.matches};e.addEventListener(`change`,t),this.__mqlCleanup=()=>e.removeEventListener(`change`,t)}}disconnectedCallback(){this._resizeObserver&&this._resizeObserver.disconnect(),this._animationFrameId!==null&&(cancelAnimationFrame(this._animationFrameId),this._animationFrameId=null),d.ticker.remove(this._tick),this._isTicking=!1,this.__mqlCleanup&&(this.__mqlCleanup(),delete this.__mqlCleanup),super.disconnectedCallback()}firstUpdated(){let e=this.shadowRoot?.querySelector(`slot:not([name])`);e&&this._handleSlotChange({target:e});let t=this.shadowRoot?.querySelector(`slot[name="show-all"]`);t&&this._handleShowAllSlotChange({target:t}),this._buildQuickSetters(),this.updateLayout(!0),this.autoplay&&this._startAutoplay()}updated(e){super.updated(e),(e.has(`layout`)||e.has(`largeWidth`)||e.has(`mediumWidth`)||e.has(`smallWidth`)||e.has(`gap`)||e.has(`padding`)||e.has(`items`)||e.has(`hideNav`)||e.has(`infinite`)||e.has(`autoplay`)||e.has(`autoplayInterval`)||e.has(`_containerWidth`)||e.has(`_slottedItems`)||e.has(`_hasSlottedShowAll`))&&((e.has(`infinite`)||e.has(`items`)||e.has(`_slottedItems`))&&(this._infiniteInitialized=!1),e.has(`layout`)&&this._scrollContainer&&(this._scrollContainer.scrollLeft=0,this._infiniteInitialized=!1,this._scrollContainer.style.scrollSnapType=this.layout===`uncontained`?`none`:`x mandatory`),this.updateLayout(!0),(e.has(`autoplay`)||e.has(`autoplayInterval`)||e.has(`items`)||e.has(`_slottedItems`))&&(this.autoplay?this._startAutoplay():this._stopAutoplay()))}get computedLayout(){let e=this._containerWidth||this.getBoundingClientRect().width||360,t=this.gap,n=e-2*this.padding,r=this.largeWidth,i=this.mediumWidth,a=this.smallWidth,o=1;if(this.auto){if(this.layout===`uncontained`)r=Math.min(n,260);else if(this.layout===`hero`)a=48,o=Math.max(1,Math.floor((n-a)/(250+t))),r=(n-a-o*t)/o,r<150&&(o=1,r=n-a-t);else{a=48;let e=1,s=220,c=1/0;for(let r=1;r<=10;r++){let i=(n-a-(r+1)*t)/(r+.45);if(i>=140&&i<=340){let t=Math.abs(i-220);t<c&&(c=t,e=r,s=i)}}c===1/0?(o=1,r=(n-a-2*t)/1.45):(o=e,r=s),i=.45*r}}else r=this.largeWidth,i=this.mediumWidth,a=this.smallWidth,o=this.layout===`hero`?1:this.layout===`uncontained`?Math.max(1,Math.floor(n/(r+t))):1;return{largeItemWidth:r,mediumItemWidth:i,smallItemWidth:a,largeItemCount:o}}get itemSize(){return this.computedLayout.largeItemWidth+this.gap}_getCardLayout(e){let{largeItemWidth:t,mediumItemWidth:n,smallItemWidth:r,largeItemCount:i}=this.computedLayout,a=this.gap,o=this.padding,s=t,c=o,l=1,u=!0;if(this.layout===`uncontained`){s=t,c=o+e*(t+a),l=1;let n=this._containerWidth||this.getBoundingClientRect().width||360;u=c+s>0&&c<n}else if(this.layout===`hero`){let n=o+i*(t+a),f=-r;if(e<=-1)s=r,c=f+(e- -1)*(r+Math.max(a,o)),l=0,u=!1;else if(e<=0)s=d.utils.interpolate(r,t,e+1),c=d.utils.interpolate(f,o,e+1),l=d.utils.interpolate(0,1,e+1),u=!0;else if(e<=i-1)s=t,c=o+e*(t+a),l=1,u=!0;else if(e<=i){let f=e-(i-1),p=o+(i-1)*(t+a);s=d.utils.interpolate(t,r,f),c=d.utils.interpolate(p,n,f),l=d.utils.interpolate(1,0,f),u=!0}else{let t=this._containerWidth||this.getBoundingClientRect().width||360;s=r;let a=Math.max(r+o,t-n);c=n+(e-i)*a,l=0,u=!1}}else{let f=o+i*(t+a),p=f+n+a,m=-r;if(e<=-1)s=r,c=m+(e- -1)*(r+Math.max(a,o)),l=0,u=!1;else if(e<=0)s=d.utils.interpolate(r,t,e+1),c=d.utils.interpolate(m,o,e+1),l=d.utils.interpolate(0,1,e+1),u=!0;else if(e<=i-1)s=t,c=o+e*(t+a),l=1,u=!0;else if(e<=i){let r=e-(i-1),p=o+(i-1)*(t+a);s=d.utils.interpolate(t,n,r),c=d.utils.interpolate(p,f,r),l=d.utils.interpolate(1,0,r),u=!0}else if(e<=i+1){let t=e-i;s=d.utils.interpolate(n,r,t),c=d.utils.interpolate(f,p,t),l=0,u=!0}else{let t=this._containerWidth||this.getBoundingClientRect().width||360;s=r;let n=Math.max(r+o,t-p);c=p+(e-(i+1))*n,l=0,u=!1}}return{width:s,x:c,opacity:l,visible:u}}_buildQuickSetters(){!this._cards||this._cards.length===0||(this._cardSetX=[],this._cardSetWidth=[],this._imgSetX=[],this._titleSetOpacity=[],this._logicalItemInViewport=Array(this.effectiveItems.length).fill(!1),this._cards.forEach(e=>{this._cardSetX.push(d.quickSetter(e,`x`,`px`)),this._cardSetWidth.push(d.quickSetter(e,`width`,`px`));let t=e.querySelector(`img`);this._imgSetX.push(t?d.quickSetter(t,`x`,`px`):(()=>{}));let n=e.querySelector(`.card-title`);this._titleSetOpacity.push(n?d.quickSetter(n,`opacity`):(()=>{}))}))}_applyLayout(e){let t=this._isMobile,n=this._cards.length,r=new Map,i=new Map;for(let a=0;a<n;a++){let o=a-e,s=this._cards[a],c=Number(s.dataset.index||0),l=this.infinite?c%this.effectiveItems.length:c;if(i.has(l)||i.set(l,s),this.infinite&&(o=a-e%n,o>n/2&&(o-=n),o<-n/2&&(o+=n)),o<-15||o>15){this._cardSetX[a](-9999),this._titleSetOpacity[a](0);continue}let u=this._getCardLayout(o);if(u.visible&&(r.has(l)||r.set(l,s)),this._cardSetX[a](u.x),this._cardSetWidth[a](u.width),!t){let e=Math.max(-1,Math.min(1,o));this._imgSetX[a](e*-25)}this._titleSetOpacity[a](u.opacity)}for(let e=0;e<this.effectiveItems.length;e++){let t=r.has(e);if(this._logicalItemInViewport[e]!==t){this._logicalItemInViewport[e]=t;let n=t?`moni-item-entered-viewport`:`moni-item-left-viewport`,a=r.get(e)||i.get(e)||null;u(this,n,{detail:{item:this.effectiveItems[e],index:e,card:a}})}}}get _visualCardsMultiplier(){if(!this.infinite||this.effectiveItems.length===0)return 1;let e=this.effectiveItems.length;return Math.max(1,Math.ceil(15/e))}get _snapSetsCount(){if(!this.infinite||this.effectiveItems.length===0)return 1;let e=this.effectiveItems.length*this._visualCardsMultiplier,t=Math.ceil(1e3/e);return t%2==0&&(t+=1),Math.max(3,t)}get _snapItemsCount(){if(this.infinite){let e=this.effectiveItems.length,t=this._visualCardsMultiplier;return this._snapSetsCount*(e*t)}return this.effectiveItems.length}_checkInfiniteWrap(){if(!this.infinite||this.effectiveItems.length===0||!this._scrollContainer)return;let e=this.effectiveItems.length*this._visualCardsMultiplier,t=this._snapSetsCount,n=Math.floor(t/2),r=e*this.itemSize,i=this._scrollContainer.scrollLeft,a=Math.floor(i/r);if(a!==n){let e=(n-a)*r,t=this._scrollContainer.style.scrollSnapType,i=this._scrollContainer.style.scrollBehavior;this._scrollContainer.style.scrollSnapType=`none`,this._scrollContainer.style.scrollBehavior=`auto`,this._scrollContainer.scrollLeft+=e,this._tickerTarget=this._scrollContainer.scrollLeft/this.itemSize,this._tickerCurrent=this._tickerTarget,this._applyLayout(this._tickerCurrent),this._scrollContainer.style.scrollBehavior=i,this._isDragging&&(this._scrollLeftAtDragStart+=e),t&&t!==`none`&&requestAnimationFrame(()=>{this._scrollContainer&&!this._isDragging&&(this._scrollContainer.style.scrollSnapType=t)})}}_startAutoplay(){this._stopAutoplay(),this.autoplay&&this.effectiveItems.length>0&&(this._autoplayTimer=setInterval(()=>{this._isDragging||this._scrollNext()},this.autoplayInterval))}_stopAutoplay(){this._autoplayTimer&&=(clearInterval(this._autoplayTimer),null)}_handleMouseEnter(){}_handleMouseLeave(){this._handleMouseUp()}_handleMouseDown(e){d.killTweensOf(this._scrollContainer),this._checkInfiniteWrap(),this._isDragging=!0,this._totalDraggedDistance=0,this._scrollContainer.style.scrollBehavior=`auto`,this._scrollContainer.style.scrollSnapType=`none`,this._dragStartX=e.pageX-this._scrollContainer.offsetLeft,this._scrollLeftAtDragStart=this._scrollContainer.scrollLeft,this._pointerVelocity=0,this._lastPointerX=e.pageX,this._lastPointerTime=performance.now()}_handleMouseMove(e){if(!this._isDragging)return;e.preventDefault();let t=e.pageX,n=t-this._scrollContainer.offsetLeft;this._scrollContainer.scrollLeft=this._scrollLeftAtDragStart+(this._dragStartX-n)*1.25;let r=performance.now(),i=r-this._lastPointerTime;i>0&&(this._pointerVelocity=(t-this._lastPointerX)/i),this._totalDraggedDistance+=Math.abs(t-this._lastPointerX),this._lastPointerX=t,this._lastPointerTime=r}_handleMouseUp(){if(!this._isDragging)return;this._isDragging=!1,performance.now()-this._lastPointerTime>100&&(this._pointerVelocity=0);let e=350+Math.abs(this._pointerVelocity)*300,t=this._scrollContainer.scrollLeft-this._pointerVelocity*e,n=15*this.itemSize;if(t<this._scrollContainer.scrollLeft-n?t=this._scrollContainer.scrollLeft-n:t>this._scrollContainer.scrollLeft+n&&(t=this._scrollContainer.scrollLeft+n),this.layout!==`uncontained`){this._scrollContainer.style.scrollSnapType=`none`;let e=Math.round(t/this.itemSize),n=this.effectiveItems.length>0?this._snapItemsCount-1:0;e=Math.max(0,Math.min(n,e));let r=e*this.itemSize,i=Math.round(this._scrollContainer.scrollLeft/this.itemSize),a=Math.abs(e-i),o=Math.min(.85,.25+a*.04);this._scrollContainer.style.scrollBehavior=`auto`,d.to(this._scrollContainer,{scrollLeft:r,duration:o,ease:`power3.out`,onComplete:()=>{!this._isDragging&&this._scrollContainer&&(this._scrollContainer.style.scrollSnapType=`x mandatory`)}})}}_handleTouchStart(e){d.killTweensOf(this._scrollContainer),this._checkInfiniteWrap(),this._isDragging=!0,this._totalDraggedDistance=0,this._scrollContainer.style.scrollBehavior=`auto`,this._scrollContainer.style.scrollSnapType=`none`;let t=e.touches[0];this._dragStartX=t.pageX-this._scrollContainer.offsetLeft,this._scrollLeftAtDragStart=this._scrollContainer.scrollLeft,this._pointerVelocity=0,this._lastPointerX=t.pageX,this._lastPointerTime=performance.now()}_handleTouchMove(e){if(!this._isDragging)return;let t=e.touches[0].pageX,n=t-this._scrollContainer.offsetLeft;this._scrollContainer.scrollLeft=this._scrollLeftAtDragStart+(this._dragStartX-n);let r=performance.now(),i=r-this._lastPointerTime;i>0&&(this._pointerVelocity=(t-this._lastPointerX)/i),this._totalDraggedDistance+=Math.abs(t-this._lastPointerX),this._lastPointerX=t,this._lastPointerTime=r}_handleTouchEnd(){this._handleMouseUp()}_handleWheel(e){if(Math.abs(e.deltaY)>Math.abs(e.deltaX)){let t=this._scrollContainer.scrollWidth-this._scrollContainer.clientWidth,n=this._scrollContainer.scrollLeft,r=n<=0,i=n>=t-1;if(e.deltaY<0&&r||e.deltaY>0&&i)return;e.preventDefault(),this._scrollContainer.style.scrollSnapType=`none`;let a=e.deltaY;e.deltaMode===1?a*=40:e.deltaMode===2&&(a*=800),this._scrollContainer.scrollLeft+=a,this._wheelTimeout&&clearTimeout(this._wheelTimeout),this._wheelTimeout=setTimeout(()=>{this.layout!==`uncontained`&&!this._isDragging&&(this._scrollContainer.style.scrollSnapType=`x mandatory`)},150)}}_handleCardClick(e,t,n){if(this._totalDraggedDistance>8){e.preventDefault(),e.stopPropagation();return}let r=n%this.effectiveItems.length;this.dispatchEvent(new CustomEvent(`item-click`,{bubbles:!0,composed:!0,detail:{item:t,index:r}})),u(this,`moni-item-click`,{detail:{item:t,index:r}})}_scrollPrevious(){let e=this._scrollContainer.scrollLeft-this.itemSize;this._scrollContainer.style.scrollBehavior=`smooth`,this._scrollContainer.scrollTo({left:e,behavior:`smooth`})}_scrollNext(){let e=this._scrollContainer.scrollLeft+this.itemSize;this._scrollContainer.style.scrollBehavior=`smooth`,this._scrollContainer.scrollTo({left:e,behavior:`smooth`})}_handleShowAllClick(e){let t=e.target;t.tagName.toLowerCase()===`a`&&t.getAttribute(`href`)===`#`&&e.preventDefault(),this.dispatchEvent(new CustomEvent(`show-all-click`,{bubbles:!0,composed:!0})),u(this,`moni-show-all-click`)}_handleShowAllSlotChange(e){let t=e.target,n=typeof t.assignedElements==`function`?t.assignedElements({flatten:!0}):[];n.length===0&&(n=t.assignedNodes().filter(e=>e.nodeType===1)),n.length===0&&(n=Array.from(this.querySelectorAll(`[slot="show-all"]`))),this._hasSlottedShowAll=n.length>0}_handleSlotChange(e){let t=e.target,n=typeof t.assignedElements==`function`?t.assignedElements({flatten:!0}):[];n.length===0&&(n=t.assignedNodes().filter(e=>e.nodeType===1)),n.length===0&&(n=Array.from(this.children).filter(e=>e.getAttribute(`slot`)!==`show-all`));let r=[];for(let e of n)if(e.tagName.toLowerCase()===`img`){let t=e;r.push({title:t.getAttribute(`title`)||t.getAttribute(`alt`)||``,img:t.src})}else if(e.tagName.toLowerCase()===`a`){let t=e,n=t.querySelector(`img`);n&&r.push({title:n.getAttribute(`title`)||n.getAttribute(`alt`)||t.getAttribute(`title`)||``,img:n.src,href:t.href,target:t.target})}this._slottedItems=r;let i=!!this.querySelector(`[slot="show-all"]`);i!==this._hasSlottedShowAll&&(this._hasSlottedShowAll=i),this.updateComplete.then(()=>{this.updateLayout(!0),u(this,`moni-slot-items-changed`,{detail:{items:this._slottedItems}})})}render(){let{largeItemWidth:e,mediumItemWidth:n,smallItemWidth:r}=this.computedLayout,i=this.effectiveItems&&this.effectiveItems.length>0,a=this._hasSlottedShowAll||!!this.querySelector(`[slot="show-all"]`),o=this.headerText||this.showAll||a,s=128;s=this.layout===`hero`?r+this.gap:this.layout===`uncontained`?16:n+r+2*this.gap;let c=(this._containerWidth||this.getBoundingClientRect().width||360)-e-this.padding+400;s<c&&(s=c);let l=i?this._snapItemsCount:0,u=this.effectiveItems;if(this.infinite&&i){let e=this._visualCardsMultiplier;u=[];for(let t=0;t<e;t++)u=u.concat(this.effectiveItems)}let d=i?l*e+(l-1)*this.gap:0,f=i&&this._scrollContainer&&this._scrollContainer.scrollWidth>this._scrollContainer.clientWidth,p=this.infinite||f&&this._scrollContainer.scrollLeft>5,m=this.infinite||f&&this._scrollContainer.scrollWidth-this._scrollContainer.scrollLeft-this._scrollContainer.clientWidth>5;return t`
+			<div class="carousel-container" style="
+				--carousel-snap-width: ${e}px;
+				--carousel-gap: ${this.gap}px;
+				--carousel-padding: ${this.padding}px;
+				--carousel-right-padding: ${s}px;
+				--carousel-border-radius: ${this.borderRadius}px;
+				--carousel-track-width: ${d}px;
+			">
+				<slot @slotchange=${this._handleSlotChange} style="display: none;"></slot>
+				${o?t`
+							<div class="carousel-header">
+								${this.headerText?t`<h3>${this.headerText}</h3>`:``}
+								<slot name="show-all" @slotchange=${this._handleShowAllSlotChange} @click=${this._handleShowAllClick}>
+									${this.showAll?t`
+												<a href="#" class="show-all-link">
+													${this.showAllText}
+												</a>
+											`:``}
+								</slot>
+							</div>
+						`:``}
+
+				<div class="carousel-viewport">
+					${this.hideNav?``:t`
+								<button 
+									class="nav-button prev ${p?`visible`:``}" 
+									@click=${this._scrollPrevious}
+									aria-label="Previous items"
+								>
+									<span class="material-symbols">chevron_left</span>
+								</button>
+							`}
+
+					<div
+						class="scroll-container"
+						@scroll=${this._scheduleLayout}
+						@mousedown=${this._handleMouseDown}
+						@mousemove=${this._handleMouseMove}
+						@mouseup=${this._handleMouseUp}
+						@mouseenter=${this._handleMouseEnter}
+						@mouseleave=${this._handleMouseLeave}
+						@touchstart=${this._handleTouchStart}
+						@touchmove=${this._handleTouchMove}
+						@touchend=${this._handleTouchEnd}
+						@wheel=${this._handleWheel}
+					>
+						<div class="snap-track">
+							${i?Array.from({length:l}).map(()=>t`<div class="snap-item"></div>`):``}
+						</div>
+						<div class="visual-track">
+							${i?u.map((e,n)=>t`
+											<div 
+												class="card" 
+												data-index="${n}"
+												@click=${t=>this._handleCardClick(t,e,n)}
+											>
+												${e.href?t`
+															<a href="${e.href}" target="${e.target||`_self`}" style="text-decoration:none; color:inherit;" draggable="false">
+																<div class="img-parallax-container">
+																	<img src="${e.img}" alt="${e.title}" draggable="false" loading="lazy" />
+																</div>
+																<h2 class="card-title">${e.title}</h2>
+															</a>
+														`:t`
+															<div class="img-parallax-container">
+																<img src="${e.img}" alt="${e.title}" draggable="false" loading="lazy" />
+															</div>
+															<h2 class="card-title">${e.title}</h2>
+														`}
+											</div>
+										`):``}
+						</div>
+					</div>
+
+					${this.hideNav?``:t`
+								<button 
+									class="nav-button next ${m?`visible`:``}" 
+									@click=${this._scrollNext}
+									aria-label="Next items"
+								>
+									<span class="material-symbols">chevron_right</span>
+								</button>
+							`}
+				</div>
+			</div>
+		`}};s([i({type:Array})],m.prototype,`items`,void 0),s([i({reflect:!0})],m.prototype,`layout`,void 0),s([i({type:Boolean,reflect:!0})],m.prototype,`auto`,void 0),s([i({type:Number,attribute:`large-width`})],m.prototype,`largeWidth`,void 0),s([i({type:Number,attribute:`medium-width`})],m.prototype,`mediumWidth`,void 0),s([i({type:Number,attribute:`small-width`})],m.prototype,`smallWidth`,void 0),s([i({type:Number})],m.prototype,`gap`,void 0),s([i({type:Number})],m.prototype,`padding`,void 0),s([i({type:Number,attribute:`border-radius`})],m.prototype,`borderRadius`,void 0),s([i({type:Boolean,attribute:`show-all`})],m.prototype,`showAll`,void 0),s([i({attribute:`show-all-text`})],m.prototype,`showAllText`,void 0),s([i({attribute:`header-text`})],m.prototype,`headerText`,void 0),s([i({type:Boolean,attribute:`hide-nav`})],m.prototype,`hideNav`,void 0),s([i({type:Boolean,reflect:!0})],m.prototype,`infinite`,void 0),s([i({type:Boolean,reflect:!0})],m.prototype,`autoplay`,void 0),s([i({type:Number,attribute:`autoplay-interval`})],m.prototype,`autoplayInterval`,void 0),s([e()],m.prototype,`_containerWidth`,void 0),s([e()],m.prototype,`_slottedItems`,void 0),s([e()],m.prototype,`_hasSlottedShowAll`,void 0),s([l(`.scroll-container`)],m.prototype,`_scrollContainer`,void 0),s([p(`.card`)],m.prototype,`_cards`,void 0),m=s([o(`moni-carousel`)],m);

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

@@ -0,0 +1,137 @@
+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";import{t as l}from"../chunks/if-defined-CuEAJKpp.js";import{t as u}from"../chunks/live-B7Rjg1kt.js";var d=class extends t{static{this.formAssociated=!0}constructor(){super(),this.label=``,this.checked=!1,this.disabled=!1,this.uncheckedIcon=``,this.checkedIcon=``,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 .checkbox */
+			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 — occupies real layout space */
+			input {
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				opacity: 0;
+				cursor: pointer;
+				flex: none;
+			}
+
+			/* BeerCSS: span wraps the visible indicator + label text */
+			span {
+				display: inline-flex;
+				align-items: center;
+				color: var(--on-surface);
+				font-size: 0.875rem;
+				position: relative;
+			}
+
+			/* Indicador visual, 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: filled checkbox icon */
+			input:checked + span > i {
+				font-variation-settings: 'FILL' 1;
+				color: var(--primary);
+			}
+
+			/* Los iconos personalizados viven dentro de la forma del checkbox. */
+			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: 0.125rem;
+				font-size: calc(var(--_size) * 0.55);
+				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);
+			}
+
+			/* BeerCSS: span::after = ripple/hover ring */
+			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;
+			}
+
+			/* BeerCSS: span:not(:empty) gets a small inline-start padding for the label */
+			span.has-label {
+				padding-inline-start: 0.25rem;
+			}
+
+			/* 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){this.checked=e.target.checked,c(this,`moni-change`,{detail:{value:this.checked,originalEvent:e}})}render(){let t=!!(this.uncheckedIcon||this.checkedIcon),n=t?this.uncheckedIcon:`check_box_outline_blank`,r=t?this.checkedIcon:`check_box`,i=this.checked?r:n;return e`<label part="checkbox">
+			<input
+				type="checkbox"
+				.checked=${u(this.checked)}
+				?disabled=${this.disabled}
+				name=${l(this.name||void 0)}
+				value=${l(this.value||void 0)}
+				@change=${this._onChange}
+			/>
+			<span class=${`${this.label?`has-label `:``}${t?`custom-icons`:``}`}>
+				<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})],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=o([a(`moni-checkbox`)],d);