@eunomia/elements 1.0.0-beta.5 → 1.0.0-beta.6

package/dist/cdn/components/eun-image-carousel.js

@@ -1,9 +1,12 @@
-import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk-SD2H5UDZ.js";import{a as k}from"./chunks/chunk-VRGRCYIO.js";import{a as c}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as I}from"./chunks/chunk-SJWRE6PW.js";import{a as n,f as w,g as T,h as s,i as g,j as p,n as o,p as l,s as $}from"./chunks/chunk-XH6NREVZ.js";var m=class P extends Event{static{this.eventName="eunimagechange"}constructor(v){super(P.eventName,{bubbles:!0,composed:!1}),this.index=v.index,this.count=v.count}};var S=T`
+import{a as E}from"./chunks/chunk-E5LQKBFI.js";import{a as L}from"./chunks/chunk-624VJYNA.js";import{a as k}from"./chunks/chunk-PD62MBOJ.js";import"./chunks/chunk-BKZGTCMF.js";import{a as D}from"./chunks/chunk-SD2H5UDZ.js";import{a as p}from"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import{a as I}from"./chunks/chunk-LMVW522V.js";import"./chunks/chunk-KSZRQRN4.js";import{a as n,f as w,h as T,j as s,k as g,l as c,p as o,r as l,u as $}from"./chunks/chunk-YITWLCD3.js";var v=class S extends Event{static{this.eventName="eunimagechange"}constructor(m){super(S.eventName,{bubbles:!0,composed:!1}),this.index=m.index,this.count=m.count}};var M=T`
   :host {
     display: block;
     --_magnifierZoom: 2.5;
     --_transitionDuration: var(--image-carousel-transition-duration, 380ms);
-    --_swipe-duration: var(--image-carousel-swipe-duration, 200ms);
+    --_swipe-duration: var(
+      --image-carousel-swipe-duration,
+      var(--eun-duration-m, 200ms)
+    );
   }
 
   :host([transition="none"]) {
@@ -36,7 +39,18 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
       var(--eun-surface-sunken, #f7f8fa)
     );
     outline: 3px solid transparent;
-    transition: outline-color 0.2s ease-out;
+    transition: outline-color var(--eun-duration-m, 200ms)
+      var(--eun-easing-out, ease-out);
+  }
+  #stage::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    border: var(--image-carousel-border-width, var(--eun-border-width-s, 1px))
+      solid var(--image-carousel-border-color, transparent);
+    border-radius: inherit;
+    pointer-events: none;
   }
 
   #stage:has(#expand-trigger:focus-visible) {
@@ -74,7 +88,8 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
   }
 
   #main-image {
-    transition: transform 0.15s ease;
+    transition: transform var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   #main-image.zoomed {
     transform: scale(var(--_magnifierZoom));
@@ -132,22 +147,28 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
     }
   }
   .transition-slide.entering.dir-next {
-    animation: ic-slide-in-next var(--_transitionDuration) ease;
+    animation: ic-slide-in-next var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-slide.entering.dir-prev {
-    animation: ic-slide-in-prev var(--_transitionDuration) ease;
+    animation: ic-slide-in-prev var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-slide.leaving.dir-next {
-    animation: ic-slide-out-next var(--_transitionDuration) ease;
+    animation: ic-slide-out-next var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-slide.leaving.dir-prev {
-    animation: ic-slide-out-prev var(--_transitionDuration) ease;
+    animation: ic-slide-out-prev var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-fade.entering {
-    animation: ic-fade-in var(--_transitionDuration) ease;
+    animation: ic-fade-in var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-fade.leaving {
-    animation: ic-fade-out var(--_transitionDuration) ease;
+    animation: ic-fade-out var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
 
   #expand-icon {
@@ -164,7 +185,8 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
     background: rgba(7, 22, 33, 0.55);
     color: #fff;
     opacity: 0.85;
-    transition: opacity 0.2s ease;
+    transition: opacity var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
     cursor: pointer;
   }
 
@@ -187,9 +209,10 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
     box-shadow: none;
     outline: 2px solid transparent;
     transition:
-      outline 0.2s ease-out,
-      background-color 0.2s ease,
-      box-shadow 0.2s ease;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   #prev {
     left: var(--eun-space-s, 8px);
@@ -242,16 +265,17 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
     width: var(--image-carousel-thumbnail-size, 64px);
     height: var(--image-carousel-thumbnail-size, 64px);
     overflow: hidden;
-    border: var(--eun-border-width-m, 1.5px) solid transparent;
+    border: var(--eun-border-width-m, 1.5px) solid
+      var(--image-carousel-thumbnail-border-color, transparent);
     border-radius: var(--eun-border-radius-s, 6px);
     cursor: pointer;
     opacity: 0.6;
     outline: 2px solid transparent;
     outline-offset: -2px;
     transition:
-      opacity 0.2s ease,
-      outline 0.2s ease-out,
-      border-color 0.2s ease;
+      opacity var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   .thumbnail img {
     display: block;
@@ -264,7 +288,10 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
   }
   .thumbnail[aria-current="true"] {
     opacity: 1;
-    border-color: var(--eun-color-primary-500, #3d6fff);
+    border-color: var(
+      --image-carousel-thumbnail-active-border-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
   }
   .thumbnail:focus-visible {
     outline-color: var(--eun-color-primary-500, #3d6fff);
@@ -291,9 +318,10 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
     outline: 2px solid transparent;
     outline-offset: 2px;
     transition:
-      width 0.2s ease,
-      border-radius 0.2s ease,
-      background-color 0.2s ease;
+      width var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      border-radius var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease);
   }
   .dot:focus-visible {
     outline-color: var(--eun-color-primary-500, #3d6fff);
@@ -308,6 +336,7 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
   }
 
   #modal {
+    --modal-padding: 0;
     --modal-width: var(--image-carousel-lightbox-width, min(1200px, 94vw));
     --modal-max-height: var(
       --image-carousel-lightbox-max-height,
@@ -358,7 +387,8 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
     cursor: pointer;
     outline: 2px solid transparent;
     outline-offset: 2px;
-    transition: background-color 0.2s ease;
+    transition: background-color var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
   }
   #lightbox-prev {
     left: var(--eun-space-m, 16px);
@@ -400,20 +430,21 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
     overflow-y: auto;
     background: var(--eun-surface-color, #ffffff);
     border-left: var(--eun-border-width-s, 1px) solid
-      var(--eun-border-color, #dee0e7);
+      var(--image-carousel-divider-color, var(--eun-border-color, #dee0e7));
   }
   .grid-item {
     all: unset;
     box-sizing: border-box;
     aspect-ratio: 1;
     overflow: hidden;
-    border: var(--eun-border-width-m, 1.5px) solid transparent;
+    border: var(--eun-border-width-m, 1.5px) solid
+      var(--image-carousel-thumbnail-border-color, transparent);
     border-radius: var(--eun-border-radius-s, 6px);
     cursor: pointer;
     opacity: 0.7;
     transition:
-      opacity 0.2s ease,
-      border-color 0.2s ease;
+      opacity var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   .grid-item img {
     display: block;
@@ -426,14 +457,17 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
   }
   .grid-item[aria-current="true"] {
     opacity: 1;
-    border-color: var(--eun-color-primary-500, #3d6fff);
+    border-color: var(
+      --image-carousel-thumbnail-active-border-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
   }
   .grid-item:focus-visible {
     outline: 2px solid var(--eun-color-primary-500, #3d6fff);
     outline-offset: 2px;
   }
 
-  @media (max-width: ${k.mobile}px) {
+  @media ${k("mobile")} {
     #lightbox {
       flex-direction: column;
     }
@@ -446,7 +480,7 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
       overflow-x: auto;
       overflow-y: hidden;
       border-top: var(--eun-border-width-s, 1px) solid
-        var(--eun-border-color, #dee0e7);
+        var(--image-carousel-divider-color, var(--eun-border-color, #dee0e7));
       border-left: none;
     }
   }
@@ -465,11 +499,11 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
       animation: none !important;
     }
   }
-`,E=S;var M="eun-image-carousel",r=class extends I($){constructor(){super(...arguments);this.images=[];this.activeIndex=0;this.magnifier=!1;this.magnifierZoom=2.5;this.showThumbnails=!0;this.showDots=!0;this.lightbox=!0;this.lightboxGrid=!0;this.loop=!1;this.transition="slide";this.autoplay=!1;this.autoplayInterval=4e3;this.ariaLabelPrevious="Previous image";this.ariaLabelNext="Next image";this.ariaLabelExpand="View full-size image";this.ariaLabelLightbox="Image viewer";this.announcement="";this.transitionDirection=1;this.dragActive=!1;this.dragDirection=1;this.dragHasTarget=!1;this.suppressNextClick=!1;this.manuallyPaused=!1;this.scheduleAnnounce=D(()=>{this.announcement=this.buildAnnouncement()},150);this.handleTransientPause=()=>{this.stopAutoplay()};this.handleTransientResume=()=>{this.startAutoplay()};this.handleStageDragMove=e=>{this.dragActive||this.beginImageDrag(e),this.updateImageDragPosition(e)};this.handleStageDragEnd=(e,t)=>{this.dragActive&&(this.suppressNextClick=!0,this.settleImageDrag(t&&this.dragHasTarget))};this.handleStageDragCancel=()=>{this.dragActive&&(this.suppressNextClick=!0,this.settleImageDrag(!1))};this.handleLeaveAnimationEnd=()=>{this.previousImage=void 0};this.handleKeydown=e=>{switch(e.key){case"ArrowLeft":e.preventDefault(),this.previous();break;case"ArrowRight":e.preventDefault(),this.next();break;case"Home":e.preventDefault(),this.goToIndex(0,-1);break;case"End":e.preventDefault(),this.goToIndex(this.images.length-1,1);break;default:break}};this.handlePointerEnter=e=>{!this.magnifier||e.pointerType==="touch"||this.mainImageEl?.classList.add("zoomed")};this.handlePointerMove=e=>{if(!this.magnifier||e.pointerType==="touch")return;let{clientX:t,clientY:i}=e;this.pointerRaf===void 0&&(this.pointerRaf=requestAnimationFrame(()=>{this.pointerRaf=void 0,this.updateMagnifierOrigin(t,i)}))};this.handlePointerLeave=()=>{this.mainImageEl?.classList.remove("zoomed")};this.handleSwipeStart=e=>{e.pointerType==="touch"&&(this.swipeStart={x:e.clientX,y:e.clientY})};this.handleSwipeEnd=e=>{let t=this.swipeStart;if(this.swipeStart=void 0,e.pointerType!=="touch"||!t)return;let i=e.clientX-t.x,a=e.clientY-t.y;Math.abs(i)<r.SWIPE_THRESHOLD||Math.abs(i)<Math.abs(a)||(this.suppressNextClick=!0,i<0?this.next():this.previous())};this.handleSwipeCancel=()=>{this.swipeStart=void 0};this.handleExpandClick=()=>{if(this.suppressNextClick){this.suppressNextClick=!1;return}this.openLightbox()}}connectedCallback(){super.connectedCallback?.(),this.addEventListener("mouseenter",this.handleTransientPause),this.addEventListener("mouseleave",this.handleTransientResume),this.addEventListener("focusin",this.handleTransientPause),this.addEventListener("focusout",this.handleTransientResume)}willUpdate(e){if(super.willUpdate(e),e.has("images")){let t=Math.max(0,this.images.length-1);this.activeIndex>t&&(this.activeIndex=t)}if(e.has("activeIndex")||e.has("loop")||e.has("images")){let t=this.shadowRoot?.activeElement;this.focusedNavButton=t instanceof HTMLButtonElement&&this.isNavButton(t)?t:void 0}}updated(e){super.updated(e),e.has("magnifierZoom")&&this.style.setProperty("--_magnifierZoom",String(this.magnifierZoom)),(e.has("autoplay")||e.has("images"))&&(this.autoplay?this.startAutoplay():this.stopAutoplay()),this.focusedNavButton&&(this.restoreNavFocusIfDisabled(this.focusedNavButton),this.focusedNavButton=void 0),!this.swipeGesture&&this.stageEl&&(this.swipeGesture=L(this.stageEl,{threshold:r.SWIPE_THRESHOLD,onDragMove:this.handleStageDragMove,onDragEnd:this.handleStageDragEnd,onDragCancel:this.handleStageDragCancel}))}isNavButton(e){return e.classList.contains("stage-nav")||e.classList.contains("lightbox-nav")}restoreNavFocusIfDisabled(e){if(!e.isConnected||!e.disabled)return;let t=e.classList.contains("stage-nav")?".stage-nav":".lightbox-nav";Array.from(this.shadowRoot?.querySelectorAll(t)??[]).find(a=>a!==e&&!a.disabled)?.focus()}disconnectedCallback(){this.stopAutoplay(),this.removeEventListener("mouseenter",this.handleTransientPause),this.removeEventListener("mouseleave",this.handleTransientResume),this.removeEventListener("focusin",this.handleTransientPause),this.removeEventListener("focusout",this.handleTransientResume),this.pointerRaf!==void 0&&cancelAnimationFrame(this.pointerRaf),this.swipeGesture?.destroy(),this.dragPreviewEl?.remove(),super.disconnectedCallback?.()}startAutoplay(){this.autoplayTimer||!this.autoplay||this.manuallyPaused||this.images.length<=1||(this.autoplayTimer=setInterval(()=>this.next(),this.autoplayInterval))}stopAutoplay(){clearInterval(this.autoplayTimer),this.autoplayTimer=void 0}pauseAutoplay(){this.manuallyPaused=!0,this.stopAutoplay()}resumeAutoplay(){this.manuallyPaused=!1,this.startAutoplay()}previous(){this.goToIndex(this.activeIndex-1,-1)}next(){this.goToIndex(this.activeIndex+1,1)}goTo(e){this.goToIndex(e)}openLightbox(e){this.images.length&&(typeof e=="number"&&this.goToIndex(e),this.handleTransientPause(),this.modalEl?.show())}closeLightbox(){this.modalEl?.hide(),this.handleTransientResume()}goToIndex(e,t,i){let a=this.images.length;if(a===0)return;let d=a-1,u=this.loop?(e%a+a)%a:Math.max(0,Math.min(e,d));if(u===this.activeIndex)return;let h=this.images[this.activeIndex];this.transitionDirection=t??(u>this.activeIndex?1:-1),this.activeIndex=u,i?.skipTransition||this.beginTransition(h),this.resetMagnifier(),this.scheduleAnnounce(),this.dispatchEvent(new m({index:u,count:a}))}beginImageDrag(e){this.dragActive=!0,this.dragDirection=e<0?1:-1;let t=this.images.length,i=this.activeIndex+this.dragDirection;if(this.dragHasTarget=this.loop?t>1:i>=0&&i<t,this.dragTargetIndex=this.dragHasTarget?(i%t+t)%t:void 0,this.mainImageEl&&(this.mainImageEl.style.transition="none"),this.dragTargetIndex===void 0||!this.stageImagesEl)return;let a=document.createElement("img");a.className="img-layer",a.src=this.images[this.dragTargetIndex].src,a.alt="",a.setAttribute("aria-hidden","true"),this.stageImagesEl.appendChild(a),this.dragPreviewEl=a}updateImageDragPosition(e){let t=this.mainImageEl;if(t){if(!this.dragHasTarget){t.style.transform=`translateX(${e*r.EDGE_RESISTANCE}px)`;return}t.style.transform=`translateX(${e}px)`,this.dragPreviewEl&&(this.dragPreviewEl.style.transform=`translateX(calc(${this.dragDirection*100}% + ${e}px))`)}}settleImageDrag(e){let t=this.mainImageEl,i=this.dragPreviewEl,a=this.dragDirection,d=e?`${-a*100}%`:"0px",u=e?"0px":`${a*100}%`,h=getComputedStyle(this).getPropertyValue("--_swipe-duration"),b=Number.parseFloat(h)<=0,f=b?"none":"transform var(--_swipe-duration) ease-out";if(t&&(t.style.transition=f,t.style.transform=`translateX(${d})`),i&&(i.style.transition=f,i.style.transform=`translateX(${u})`),b){this.finalizeImageDrag(e);return}let x=!1,y=()=>{x||(x=!0,this.finalizeImageDrag(e))};t?.addEventListener("transitionend",y,{once:!0}),window.setTimeout(y,Number.parseFloat(h)||260)}finalizeImageDrag(e){let t=this.mainImageEl,i=this.dragPreviewEl,a=this.dragTargetIndex,d=this.dragDirection;this.dragActive=!1,this.dragTargetIndex=void 0,this.dragHasTarget=!1,this.dragPreviewEl=void 0;let u=()=>{t&&(t.style.transition="none",t.style.removeProperty("transform")),i?.remove(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{t?.style.removeProperty("transition")})})};e&&a!==void 0?(this.goToIndex(a,d,{skipTransition:!0}),this.updateComplete.then(u)):u()}resetMagnifier(){this.mainImageEl?.classList.remove("zoomed")}beginTransition(e){if(this.transition==="none"||this.prefersReducedMotion()){this.previousImage=void 0;return}this.previousImage=e}prefersReducedMotion(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}buildAnnouncement(){if(!this.images.length)return"";let e=this.images[this.activeIndex],t=`Image ${this.activeIndex+1} of ${this.images.length}`;return e?.alt?`${t}: ${e.alt}`:t}updateMagnifierOrigin(e,t){let i=this.mainImageEl;if(!i)return;let a=i.getBoundingClientRect(),d=Math.min(100,Math.max(0,(e-a.left)/a.width*100)),u=Math.min(100,Math.max(0,(t-a.top)/a.height*100));i.style.setProperty("transform-origin",`${d}% ${u}%`)}layerClasses(e){let t=!!this.previousImage;return{"img-layer":!0,[e]:t,[`transition-${this.transition}`]:t,"dir-next":t&&this.transitionDirection===1,"dir-prev":t&&this.transitionDirection===-1}}renderMainImage(e,t){let i=o`
+`,P=M;var z="eun-image-carousel",r=class extends I($){constructor(){super(...arguments);this.images=[];this.activeIndex=0;this.magnifier=!1;this.magnifierZoom=2.5;this.showThumbnails=!0;this.showDots=!0;this.lightbox=!0;this.lightboxGrid=!0;this.loop=!1;this.transition="slide";this.autoplay=!1;this.autoplayInterval=4e3;this.announcement="";this.transitionDirection=1;this.dragActive=!1;this.dragDirection=1;this.dragHasTarget=!1;this.suppressNextClick=!1;this.manuallyPaused=!1;this.scheduleAnnounce=D(()=>{this.announcement=this.buildAnnouncement()},150);this.handleTransientPause=()=>{this.stopAutoplay()};this.handleTransientResume=()=>{this.startAutoplay()};this.handleStageDragMove=e=>{this.dragActive||this.beginImageDrag(e),this.updateImageDragPosition(e)};this.handleStageDragEnd=(e,t)=>{this.dragActive&&(this.suppressNextClick=!0,this.settleImageDrag(t&&this.dragHasTarget))};this.handleStageDragCancel=()=>{this.dragActive&&(this.suppressNextClick=!0,this.settleImageDrag(!1))};this.handleLeaveAnimationEnd=()=>{this.previousImage=void 0};this.handleKeydown=e=>{switch(e.key){case"ArrowLeft":e.preventDefault(),this.previous();break;case"ArrowRight":e.preventDefault(),this.next();break;case"Home":e.preventDefault(),this.goToIndex(0,-1);break;case"End":e.preventDefault(),this.goToIndex(this.images.length-1,1);break;default:break}};this.handlePointerEnter=e=>{!this.magnifier||e.pointerType==="touch"||this.mainImageEl?.classList.add("zoomed")};this.handlePointerMove=e=>{if(!this.magnifier||e.pointerType==="touch")return;let{clientX:t,clientY:i}=e;this.pointerRaf===void 0&&(this.pointerRaf=requestAnimationFrame(()=>{this.pointerRaf=void 0,this.updateMagnifierOrigin(t,i)}))};this.handlePointerLeave=()=>{this.mainImageEl?.classList.remove("zoomed")};this.handleSwipeStart=e=>{e.pointerType==="touch"&&(this.swipeStart={x:e.clientX,y:e.clientY})};this.handleSwipeEnd=e=>{let t=this.swipeStart;if(this.swipeStart=void 0,e.pointerType!=="touch"||!t)return;let i=e.clientX-t.x,a=e.clientY-t.y;Math.abs(i)<r.SWIPE_THRESHOLD||Math.abs(i)<Math.abs(a)||(this.suppressNextClick=!0,i<0?this.next():this.previous())};this.handleSwipeCancel=()=>{this.swipeStart=void 0};this.handleExpandClick=()=>{if(this.suppressNextClick){this.suppressNextClick=!1;return}this.openLightbox()}}connectedCallback(){super.connectedCallback?.(),this.addEventListener("mouseenter",this.handleTransientPause),this.addEventListener("mouseleave",this.handleTransientResume),this.addEventListener("focusin",this.handleTransientPause),this.addEventListener("focusout",this.handleTransientResume)}willUpdate(e){if(super.willUpdate(e),e.has("images")){let t=Math.max(0,this.images.length-1);this.activeIndex>t&&(this.activeIndex=t)}if(e.has("activeIndex")||e.has("loop")||e.has("images")){let t=this.shadowRoot?.activeElement;this.focusedNavButton=t instanceof HTMLButtonElement&&this.isNavButton(t)?t:void 0}}updated(e){super.updated(e),e.has("magnifierZoom")&&this.style.setProperty("--_magnifierZoom",String(this.magnifierZoom)),(e.has("autoplay")||e.has("images"))&&(this.autoplay?this.startAutoplay():this.stopAutoplay()),this.focusedNavButton&&(this.restoreNavFocusIfDisabled(this.focusedNavButton),this.focusedNavButton=void 0),!this.swipeGesture&&this.stageEl&&(this.swipeGesture=E(this.stageEl,{threshold:r.SWIPE_THRESHOLD,onDragMove:this.handleStageDragMove,onDragEnd:this.handleStageDragEnd,onDragCancel:this.handleStageDragCancel}))}isNavButton(e){return e.classList.contains("stage-nav")||e.classList.contains("lightbox-nav")}restoreNavFocusIfDisabled(e){if(!e.isConnected||!e.disabled)return;let t=e.classList.contains("stage-nav")?".stage-nav":".lightbox-nav";Array.from(this.shadowRoot?.querySelectorAll(t)??[]).find(a=>a!==e&&!a.disabled)?.focus()}disconnectedCallback(){this.stopAutoplay(),this.removeEventListener("mouseenter",this.handleTransientPause),this.removeEventListener("mouseleave",this.handleTransientResume),this.removeEventListener("focusin",this.handleTransientPause),this.removeEventListener("focusout",this.handleTransientResume),this.pointerRaf!==void 0&&cancelAnimationFrame(this.pointerRaf),this.swipeGesture?.destroy(),this.dragPreviewEl?.remove(),super.disconnectedCallback?.()}startAutoplay(){this.autoplayTimer||!this.autoplay||this.manuallyPaused||this.images.length<=1||(this.autoplayTimer=setInterval(()=>this.next(),this.autoplayInterval))}stopAutoplay(){clearInterval(this.autoplayTimer),this.autoplayTimer=void 0}pauseAutoplay(){this.manuallyPaused=!0,this.stopAutoplay()}resumeAutoplay(){this.manuallyPaused=!1,this.startAutoplay()}previous(){this.goToIndex(this.activeIndex-1,-1)}next(){this.goToIndex(this.activeIndex+1,1)}goTo(e){this.goToIndex(e)}openLightbox(e){this.images.length&&(typeof e=="number"&&this.goToIndex(e),this.handleTransientPause(),this.modalEl?.show())}closeLightbox(){this.modalEl?.hide(),this.handleTransientResume()}goToIndex(e,t,i){let a=this.images.length;if(a===0)return;let d=a-1,u=this.loop?(e%a+a)%a:Math.max(0,Math.min(e,d));if(u===this.activeIndex)return;let h=this.images[this.activeIndex];this.transitionDirection=t??(u>this.activeIndex?1:-1),this.activeIndex=u,i?.skipTransition||this.beginTransition(h),this.resetMagnifier(),this.scheduleAnnounce(),this.dispatchEvent(new v({index:u,count:a}))}beginImageDrag(e){this.dragActive=!0,this.dragDirection=e<0?1:-1;let t=this.images.length,i=this.activeIndex+this.dragDirection;if(this.dragHasTarget=this.loop?t>1:i>=0&&i<t,this.dragTargetIndex=this.dragHasTarget?(i%t+t)%t:void 0,this.mainImageEl&&(this.mainImageEl.style.transition="none"),this.dragTargetIndex===void 0||!this.stageImagesEl)return;let a=document.createElement("img");a.className="img-layer",a.src=this.images[this.dragTargetIndex].src,a.alt="",a.setAttribute("aria-hidden","true"),this.stageImagesEl.appendChild(a),this.dragPreviewEl=a}updateImageDragPosition(e){let t=this.mainImageEl;if(t){if(!this.dragHasTarget){t.style.transform=`translateX(${e*r.EDGE_RESISTANCE}px)`;return}t.style.transform=`translateX(${e}px)`,this.dragPreviewEl&&(this.dragPreviewEl.style.transform=`translateX(calc(${this.dragDirection*100}% + ${e}px))`)}}settleImageDrag(e){let t=this.mainImageEl,i=this.dragPreviewEl,a=this.dragDirection,d=e?`${-a*100}%`:"0px",u=e?"0px":`${a*100}%`,h=L(getComputedStyle(this).getPropertyValue("--_swipe-duration"))??260,b=h<=0,f=b?"none":"transform var(--_swipe-duration) var(--eun-easing-out, ease-out)";if(t&&(t.style.transition=f,t.style.transform=`translateX(${d})`),i&&(i.style.transition=f,i.style.transform=`translateX(${u})`),b){this.finalizeImageDrag(e);return}let x=!1,y=()=>{x||(x=!0,this.finalizeImageDrag(e))};t?.addEventListener("transitionend",y,{once:!0}),window.setTimeout(y,h||260)}finalizeImageDrag(e){let t=this.mainImageEl,i=this.dragPreviewEl,a=this.dragTargetIndex,d=this.dragDirection;this.dragActive=!1,this.dragTargetIndex=void 0,this.dragHasTarget=!1,this.dragPreviewEl=void 0;let u=()=>{t&&(t.style.transition="none",t.style.removeProperty("transform")),i?.remove(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{t?.style.removeProperty("transition")})})};e&&a!==void 0?(this.goToIndex(a,d,{skipTransition:!0}),this.updateComplete.then(u)):u()}resetMagnifier(){this.mainImageEl?.classList.remove("zoomed")}beginTransition(e){if(this.transition==="none"||this.prefersReducedMotion()){this.previousImage=void 0;return}this.previousImage=e}prefersReducedMotion(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}buildAnnouncement(){if(!this.images.length)return"";let e=this.images[this.activeIndex],t=`Image ${this.activeIndex+1} of ${this.images.length}`;return e?.alt?`${t}: ${e.alt}`:t}updateMagnifierOrigin(e,t){let i=this.mainImageEl;if(!i)return;let a=i.getBoundingClientRect(),d=Math.min(100,Math.max(0,(e-a.left)/a.width*100)),u=Math.min(100,Math.max(0,(t-a.top)/a.height*100));i.style.setProperty("transform-origin",`${d}% ${u}%`)}layerClasses(e){let t=!!this.previousImage;return{"img-layer":!0,[e]:t,[`transition-${this.transition}`]:t,"dir-next":t&&this.transitionDirection===1,"dir-prev":t&&this.transitionDirection===-1}}renderMainImage(e,t){let i=o`
       <div id="stage-images">
         ${this.previousImage?o`
               <img
-                class=${c(this.layerClasses("leaving"))}
+                class=${p(this.layerClasses("leaving"))}
                 src=${this.previousImage.src}
                 alt=""
                 aria-hidden="true"
@@ -478,7 +512,7 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
             `:l}
         <img
           id="main-image"
-          class=${c(this.layerClasses("entering"))}
+          class=${p(this.layerClasses("entering"))}
           src=${e.src}
           alt=${this.lightbox?"":e.alt}
           @pointerenter=${this.handlePointerEnter}
@@ -491,7 +525,7 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
         type="button"
         id="expand-trigger"
         aria-haspopup="dialog"
-        aria-label="${this.ariaLabelExpand} (${this.activeIndex+1}/${t})"
+        aria-label="${this.ariaLabelExpand??this.dictionary.imageCarousel.expand} (${this.activeIndex+1}/${t})"
         @click=${this.handleExpandClick}
       >
         ${i}
@@ -502,7 +536,7 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
         type="button"
         class="stage-nav"
         id="prev"
-        aria-label=${this.ariaLabelPrevious}
+        aria-label=${this.ariaLabelPrevious??this.dictionary.imageCarousel.previous}
         ?disabled=${e}
         @click=${()=>this.previous()}
       >
@@ -512,14 +546,18 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
         type="button"
         class="stage-nav"
         id="next"
-        aria-label=${this.ariaLabelNext}
+        aria-label=${this.ariaLabelNext??this.dictionary.imageCarousel.next}
         ?disabled=${t}
         @click=${()=>this.next()}
       >
         <eun-icon name="chevron_right" size="18"></eun-icon>
       </button>
     `}renderThumbnails(e){return o`
-      <div id="thumbnails" role="group" aria-label=${this.dictionary.imageCarousel.selectImage}>
+      <div
+        id="thumbnails"
+        role="group"
+        aria-label=${this.dictionary.imageCarousel.selectImage}
+      >
         ${this.images.map((t,i)=>o`
             <button
               type="button"
@@ -533,7 +571,11 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
           `)}
       </div>
     `}renderDots(e){return o`
-      <div id="dots" role="group" aria-label=${this.dictionary.imageCarousel.imageNavigation}>
+      <div
+        id="dots"
+        role="group"
+        aria-label=${this.dictionary.imageCarousel.imageNavigation}
+      >
         ${this.images.map((t,i)=>{let a=i===this.activeIndex;return o`
             <button
               type="button"
@@ -547,9 +589,8 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
     `}renderThumbnailsOrDots(e){return this.showThumbnails?this.renderThumbnails(e):this.showDots?this.renderDots(e):l}renderLightbox(e,t,i){return o`
       <eun-modal
         id="modal"
-        kind="search"
         hide-actions
-        aria-label=${this.ariaLabelLightbox}
+        aria-label=${this.ariaLabelLightbox??this.dictionary.imageCarousel.lightbox}
         @euncancel=${()=>this.handleTransientResume()}
       >
         <div id="lightbox" @keydown=${this.handleKeydown}>
@@ -562,7 +603,7 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
             <div id="lightbox-images">
               ${this.previousImage?o`
                     <img
-                      class=${c(this.layerClasses("leaving"))}
+                      class=${p(this.layerClasses("leaving"))}
                       src=${this.previousImage.src}
                       alt=""
                       aria-hidden="true"
@@ -571,7 +612,7 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
                   `:l}
               <img
                 id="lightbox-image"
-                class=${c(this.layerClasses("entering"))}
+                class=${p(this.layerClasses("entering"))}
                 src=${e.src}
                 alt=${e.alt}
               />
@@ -581,7 +622,7 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
                     type="button"
                     class="lightbox-nav"
                     id="lightbox-prev"
-                    aria-label=${this.ariaLabelPrevious}
+                    aria-label=${this.ariaLabelPrevious??this.dictionary.imageCarousel.previous}
                     ?disabled=${!this.loop&&this.activeIndex<=0}
                     @click=${()=>this.previous()}
                   >
@@ -591,7 +632,7 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
                     type="button"
                     class="lightbox-nav"
                     id="lightbox-next"
-                    aria-label=${this.ariaLabelNext}
+                    aria-label=${this.ariaLabelNext??this.dictionary.imageCarousel.next}
                     ?disabled=${!this.loop&&this.activeIndex>=t-1}
                     @click=${()=>this.next()}
                   >
@@ -603,7 +644,11 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
                 `:l}
           </div>
           ${this.lightboxGrid&&i?o`
-                <div id="lightbox-grid" role="group" aria-label=${this.dictionary.imageCarousel.allImages}>
+                <div
+                  id="lightbox-grid"
+                  role="group"
+                  aria-label=${this.dictionary.imageCarousel.allImages}
+                >
                   ${this.images.map((a,d)=>o`
                       <button
                         type="button"
@@ -627,7 +672,7 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
       <div
         id="stage"
         role="group"
-        aria-label=${this.ariaLabel||"Image gallery"}
+        aria-label=${this.ariaLabel||this.dictionary.imageCarousel.gallery}
         @keydown=${this.handleKeydown}
       >
         ${this.renderMainImage(e,t)}
@@ -641,4 +686,4 @@ import{a as L}from"./chunks/chunk-E5LQKBFI.js";import{a as D}from"./chunks/chunk
       <span class="sr-only" role="status" aria-live="polite"
         >${this.announcement}</span
       >
-    `}};r.styles=E,r.SWIPE_THRESHOLD=40,r.EDGE_RESISTANCE=.3,n([s({type:Array,reflect:!0})],r.prototype,"images",2),n([s({type:Number,attribute:"active-index"})],r.prototype,"activeIndex",2),n([s({type:Boolean,reflect:!0})],r.prototype,"magnifier",2),n([s({type:Number,attribute:"magnifier-zoom"})],r.prototype,"magnifierZoom",2),n([s({type:Boolean,attribute:"show-thumbnails"})],r.prototype,"showThumbnails",2),n([s({type:Boolean,attribute:"show-dots"})],r.prototype,"showDots",2),n([s({type:Boolean})],r.prototype,"lightbox",2),n([s({type:Boolean,attribute:"lightbox-grid"})],r.prototype,"lightboxGrid",2),n([s({type:Boolean})],r.prototype,"loop",2),n([s({reflect:!0})],r.prototype,"transition",2),n([s({type:Boolean})],r.prototype,"autoplay",2),n([s({type:Number,attribute:"autoplay-interval"})],r.prototype,"autoplayInterval",2),n([s({attribute:"aria-label-previous"})],r.prototype,"ariaLabelPrevious",2),n([s({attribute:"aria-label-next"})],r.prototype,"ariaLabelNext",2),n([s({attribute:"aria-label-expand"})],r.prototype,"ariaLabelExpand",2),n([s({attribute:"aria-label-lightbox"})],r.prototype,"ariaLabelLightbox",2),n([g()],r.prototype,"announcement",2),n([g()],r.prototype,"previousImage",2),n([g()],r.prototype,"transitionDirection",2),n([p("#modal")],r.prototype,"modalEl",2),n([p("#main-image")],r.prototype,"mainImageEl",2),n([p("#stage")],r.prototype,"stageEl",2),n([p("#stage-images")],r.prototype,"stageImagesEl",2),r=n([w(M)],r);export{r as EunomiaImageCarousel,M as EunomiaImageCarouselTagName};
+    `}};r.styles=P,r.SWIPE_THRESHOLD=40,r.EDGE_RESISTANCE=.3,n([s({type:Array,reflect:!0})],r.prototype,"images",2),n([s({type:Number,attribute:"active-index"})],r.prototype,"activeIndex",2),n([s({type:Boolean,reflect:!0})],r.prototype,"magnifier",2),n([s({type:Number,attribute:"magnifier-zoom"})],r.prototype,"magnifierZoom",2),n([s({type:Boolean,attribute:"show-thumbnails"})],r.prototype,"showThumbnails",2),n([s({type:Boolean,attribute:"show-dots"})],r.prototype,"showDots",2),n([s({type:Boolean})],r.prototype,"lightbox",2),n([s({type:Boolean,attribute:"lightbox-grid"})],r.prototype,"lightboxGrid",2),n([s({type:Boolean})],r.prototype,"loop",2),n([s({reflect:!0})],r.prototype,"transition",2),n([s({type:Boolean})],r.prototype,"autoplay",2),n([s({type:Number,attribute:"autoplay-interval"})],r.prototype,"autoplayInterval",2),n([s({attribute:"aria-label-previous"})],r.prototype,"ariaLabelPrevious",2),n([s({attribute:"aria-label-next"})],r.prototype,"ariaLabelNext",2),n([s({attribute:"aria-label-expand"})],r.prototype,"ariaLabelExpand",2),n([s({attribute:"aria-label-lightbox"})],r.prototype,"ariaLabelLightbox",2),n([g()],r.prototype,"announcement",2),n([g()],r.prototype,"previousImage",2),n([g()],r.prototype,"transitionDirection",2),n([c("#modal")],r.prototype,"modalEl",2),n([c("#main-image")],r.prototype,"mainImageEl",2),n([c("#stage")],r.prototype,"stageEl",2),n([c("#stage-images")],r.prototype,"stageImagesEl",2),r=n([w(z)],r);export{r as EunomiaImageCarousel,z as EunomiaImageCarouselTagName};

package/dist/cdn/components/eun-infinite-list.js

@@ -1,21 +1,30 @@
-import{a as K,b as G}from"./chunks/chunk-ZYC7DHES.js";import"./chunks/chunk-5XJLIHAU.js";import"./chunks/chunk-MMLIPCOY.js";import"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as q}from"./chunks/chunk-5EVP7YNE.js";import{a as c,b as t,c as u,d as p,e as l,f as B,g as R,h as f,i as I,j as L,n as _,s as U}from"./chunks/chunk-XH6NREVZ.js";var V=R`
+import{a as Q,b as X}from"./chunks/chunk-ZYC7DHES.js";import"./chunks/chunk-7KKWYPHY.js";import"./chunks/chunk-22D3SRFR.js";import{a as j}from"./chunks/chunk-PPCHQG7P.js";import"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import{a as J}from"./chunks/chunk-LMVW522V.js";import"./chunks/chunk-KSZRQRN4.js";import{a as u,b as t,c as a,d as p,e as r,f as q,h as K,j as f,k as V,l as O,p as G,u as W}from"./chunks/chunk-YITWLCD3.js";var Y=K`
   :host {
     display: block;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
   }
   #scroller {
     max-block-size: var(--infinite-list-height, none);
+    padding: var(
+      --infinite-list-padding,
+      var(--infinite-list-padding-block, 0)
+        var(--infinite-list-padding-inline, 0)
+    );
+  }
+  #scroller.contained {
     overflow-y: auto;
     overscroll-behavior: contain;
-    padding: var(--infinite-list-padding, 0);
   }
   #feed {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(
+      var(--infinite-list-columns, 1),
+      minmax(0, 1fr)
+    );
     gap: var(--infinite-list-gap, var(--eun-space-m, 16px));
   }
-  .eun-il-spacer {
-    flex: none;
+  ::slotted(.eun-il-spacer) {
+    grid-column: 1 / -1;
     visibility: hidden;
   }
   #sentinel {
@@ -57,19 +66,22 @@ import{a as K,b as G}from"./chunks/chunk-ZYC7DHES.js";import"./chunks/chunk-5XJL
       );
     outline-offset: 2px;
   }
-`;var X="eun-infinite-list",O="eun-il-spacer",Y=56,Z='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',h,v,g,E,S,m,y,w,P,s,M,C,T,j,W,A,J,F,Q,x,$,H,k,D,a=class extends G(U){constructor(){super(...arguments);u(this,s);this.pageSize=20;this.virtualize=!0;this.virtualizeThreshold=100;this.bufferPages=1;this.loading=!1;this.hasMore=!1;this.loadingLabel="Loading more items\u2026";this.rootMargin="400px";this.itemCount=0;u(this,h,[]);u(this,v,new Set);u(this,g,new Map);u(this,E,[]);u(this,S,Y);u(this,m,0);u(this,y,!1);u(this,w,0);u(this,P);u(this,C,()=>{this.scheduleAnimationFrame(()=>l(this,s,T).call(this))});u(this,H,e=>{if(!e.defaultPrevented)switch(e.key){case"ArrowDown":case"PageDown":e.preventDefault(),l(this,s,x).call(this,t(this,m)+1);break;case"ArrowUp":case"PageUp":e.preventDefault(),l(this,s,x).call(this,t(this,m)-1);break;case"Home":e.preventDefault(),e.ctrlKey||e.metaKey?l(this,s,$).call(this,-1):l(this,s,x).call(this,0);break;case"End":e.preventDefault(),e.ctrlKey||e.metaKey?l(this,s,$).call(this,1):l(this,s,x).call(this,t(this,h).length-1);break;default:break}});u(this,k,e=>{let i=e.target;if(!(i instanceof HTMLElement))return;let n=t(this,h).findIndex(o=>o===i||o.contains(i));n===-1||n===t(this,m)||(p(this,m,n),l(this,s,M).call(this))});u(this,D,()=>{this.syncItemsFromLightDom()})}disconnectedCallback(){this.teardownLoadMoreSentinel(),t(this,P)?.disconnect(),super.disconnectedCallback()}firstUpdated(){this.syncItemsFromLightDom(),l(this,s,F).call(this),p(this,P,new ResizeObserver(()=>this.scheduleAnimationFrame(()=>l(this,s,T).call(this)))),this.scrollerEl&&(t(this,P).observe(this.scrollerEl),this.scrollerEl.addEventListener("scroll",t(this,C),{passive:!0})),this.addEventListener("keydown",t(this,H)),this.addEventListener("focusin",t(this,k))}updated(e){super.updated(e),e.has("rootMargin")&&l(this,s,F).call(this),e.has("hasMore")&&l(this,s,M).call(this),(e.has("virtualize")||e.has("virtualizeThreshold")||e.has("bufferPages")||e.has("pageSize"))&&this.scheduleAnimationFrame(()=>l(this,s,T).call(this))}syncItemsFromLightDom(){if(t(this,y))return;let e=[];for(let r of Array.from(this.children))if(!(!(r instanceof HTMLElement)||r.hasAttribute("slot"))){if(r.classList.contains(O)){let b=Number(r.dataset.eunPage);e.push(...t(this,g).get(b)??[]);continue}e.push(r)}let i=e.length>t(this,h).length&&t(this,h).every((r,b)=>e[b]===r),n=e.length-t(this,h).length;i||(t(this,g).clear(),p(this,E,[]),p(this,m,0),this.scrollerEl&&(this.scrollerEl.scrollTop=0)),p(this,h,e),this.itemCount=e.length;let o=Math.ceil(e.length/this.pageSize),d=new Set;for(let r=0;r<o;r++)t(this,g).has(r)||d.add(r);p(this,v,d),l(this,s,M).call(this),i&&n>0&&this.announcerEl&&(this.announcerEl.textContent=`${n} more item${n>1?"s":""} loaded`),this.scheduleAnimationFrame(()=>l(this,s,T).call(this)),this.reobserveSentinel(this.sentinelEl)}render(){let e=this.itemCount>0&&!this.hasMore&&!this.loading,i=this.itemCount===0&&!this.loading;return _`
+`;var se="eun-infinite-list",$="eun-il-spacer",ne=56,re='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',d,v,g,T,x,m,y,C,E,S,A,s,M,U,k,H,z,Z,ee,D,te,P,ie,w,_,N,F,I,B,h=class extends J(X(W)){constructor(){super(...arguments);a(this,s);this.pageSize=20;this.virtualize=!1;this.virtualizeThreshold=100;this.bufferPages=1;this.loading=!1;this.hasMore=!1;this.itemTabStop="roving";this.rootMargin="400px";this.itemCount=0;a(this,d,[]);a(this,v,new Set);a(this,g,new Map);a(this,T,[]);a(this,x,ne);a(this,m,0);a(this,y,!1);a(this,C,0);a(this,E);a(this,S,!1);a(this,A,1);a(this,k,()=>{this.scheduleAnimationFrame(()=>r(this,s,z).call(this))});a(this,H,()=>{t(this,S)||t(this,k).call(this)});a(this,N,e=>{if(!e.defaultPrevented)switch(e.key){case"ArrowDown":case"PageDown":e.preventDefault(),r(this,s,w).call(this,t(this,m)+1);break;case"ArrowUp":case"PageUp":e.preventDefault(),r(this,s,w).call(this,t(this,m)-1);break;case"Home":e.preventDefault(),e.ctrlKey||e.metaKey?r(this,s,_).call(this,-1):r(this,s,w).call(this,0);break;case"End":e.preventDefault(),e.ctrlKey||e.metaKey?r(this,s,_).call(this,1):r(this,s,w).call(this,t(this,d).length-1);break;default:break}});a(this,F,e=>{let i=e.target;if(!(i instanceof HTMLElement))return;let n=t(this,d).findIndex(o=>o===i||o.contains(i));n===-1||n===t(this,m)||(p(this,m,n),r(this,s,M).call(this))});a(this,I,e=>{let i=e.target;this.itemTabStop==="none"&&i instanceof HTMLElement&&t(this,d).includes(i)&&i.removeAttribute("tabindex")});a(this,B,()=>{this.syncItemsFromLightDom()})}connectedCallback(){super.connectedCallback(),window.addEventListener("scroll",t(this,H),{passive:!0}),this.hasUpdated&&this.scrollerEl&&(t(this,E)?.observe(this.scrollerEl),r(this,s,P).call(this))}disconnectedCallback(){this.teardownLoadMoreSentinel(),t(this,E)?.disconnect(),window.removeEventListener("scroll",t(this,H)),super.disconnectedCallback()}firstUpdated(){r(this,s,U).call(this),this.syncItemsFromLightDom(),r(this,s,P).call(this),p(this,E,new ResizeObserver(()=>this.scheduleAnimationFrame(()=>{r(this,s,U).call(this),r(this,s,z).call(this)}))),this.scrollerEl&&(t(this,E).observe(this.scrollerEl),this.scrollerEl.addEventListener("scroll",t(this,k),{passive:!0})),this.addEventListener("keydown",t(this,N)),this.addEventListener("focusin",t(this,F)),this.addEventListener("focusout",t(this,I))}updated(e){super.updated(e),e.has("rootMargin")&&r(this,s,P).call(this),(e.has("hasMore")||e.has("itemTabStop"))&&r(this,s,M).call(this),(e.has("virtualize")||e.has("virtualizeThreshold")||e.has("bufferPages")||e.has("pageSize"))&&this.scheduleAnimationFrame(()=>r(this,s,z).call(this))}syncItemsFromLightDom(){if(t(this,y))return;let e=[];for(let l of Array.from(this.children))if(!(!(l instanceof HTMLElement)||l.hasAttribute("slot"))){if(l.classList.contains($)){let b=Number(l.dataset.eunPage);e.push(...t(this,g).get(b)??[]);continue}e.push(l)}let i=e.length>t(this,d).length&&t(this,d).every((l,b)=>e[b]===l),n=e.length-t(this,d).length;i||(t(this,g).clear(),p(this,T,[]),p(this,m,0),this.scrollerEl&&(this.scrollerEl.scrollTop=0)),p(this,d,e),this.itemCount=e.length;let o=Math.ceil(e.length/this.pageSize),c=new Set;for(let l=0;l<o;l++)t(this,g).has(l)||c.add(l);p(this,v,c),r(this,s,M).call(this),i&&n>0&&this.announcerEl&&(this.announcerEl.textContent=this.dictionary.infiniteList.itemsLoaded(n)),this.scheduleAnimationFrame(()=>r(this,s,z).call(this)),this.reobserveSentinel(this.sentinelEl)}render(){let e=this.itemCount>0&&!this.hasMore&&!this.loading,i=this.itemCount===0&&!this.loading;return G`
       <div id="scroller">
         <div
           id="feed"
+          part="feed"
           role="feed"
-          aria-label=${q(this.label)}
+          aria-label=${j(this.label)}
           aria-busy=${this.loading?"true":"false"}
         >
-          <slot @slotchange=${t(this,D)}></slot>
+          <slot @slotchange=${t(this,B)}></slot>
         </div>
         <div id="sentinel" aria-hidden="true"></div>
         <div id="loading-row" ?hidden=${!this.loading}>
-          <eun-loader label=${this.loadingLabel}></eun-loader>
+          <eun-loader
+            label=${this.loadingLabel??this.dictionary.infiniteList.loadingMore}
+          ></eun-loader>
         </div>
         <div id="end" ?hidden=${!e}><slot name="end"></slot></div>
         <div id="empty" ?hidden=${!i}><slot name="empty"></slot></div>
@@ -80,4 +92,4 @@ import{a as K,b as G}from"./chunks/chunk-ZYC7DHES.js";import"./chunks/chunk-5XJL
         aria-live="polite"
         class="visually-hidden"
       ></div>
-    `}};h=new WeakMap,v=new WeakMap,g=new WeakMap,E=new WeakMap,S=new WeakMap,m=new WeakMap,y=new WeakMap,w=new WeakMap,P=new WeakMap,s=new WeakSet,M=function(){let e=this.hasMore?-1:t(this,h).length;t(this,h).forEach((i,n)=>{i.isConnected&&(i.hasAttribute("role")||i.setAttribute("role","article"),i.setAttribute("aria-posinset",String(n+1)),i.setAttribute("aria-setsize",String(e)),i.tabIndex=n===t(this,m)?0:-1)})},C=new WeakMap,T=function(){let e=t(this,h).length;if(e===0)return;let i=Math.ceil(e/this.pageSize);if(!this.virtualize||e<=this.virtualizeThreshold){for(let r=0;r<i;r++)l(this,s,A).call(this,r);return}if(!this.scrollerEl||this.scrollerEl.clientHeight===0)return;let n=l(this,s,j).call(this,i),o=Math.max(0,n-this.bufferPages),d=Math.min(i-1,n+this.bufferPages);for(let r=0;r<i;r++)r>=o&&r<=d?l(this,s,A).call(this,r):l(this,s,J).call(this,r)},j=function(e){let i=this.scrollerEl;if(!i)return 0;let n=i.scrollTop+i.clientHeight/2,o=0;for(let d=0;d<e;d++){let r=t(this,E)[d]??l(this,s,W).call(this,d);if(n<o+r)return d;o+=r}return Math.max(0,e-1)},W=function(e){let i=Math.ceil(t(this,h).length/this.pageSize);return(e===i-1?t(this,h).length-e*this.pageSize:this.pageSize)*t(this,S)},A=function(e){if(t(this,v).has(e))return;let i=t(this,g).get(e);if(!i||i.length===0)return;let n=this.querySelector(`.${O}[data-eun-page="${e}"]`);if(p(this,y,!0),n){for(let o of i)n.before(o);n.remove()}else for(let o of i)this.append(o);queueMicrotask(()=>{p(this,y,!1)}),t(this,g).delete(e),t(this,v).add(e),l(this,s,M).call(this)},J=function(e){if(!t(this,v).has(e))return;let i=e*this.pageSize,n=Math.min(i+this.pageSize,t(this,h).length),o=t(this,h).slice(i,n).filter(N=>N.isConnected);if(o.length===0)return;let d=o[0],b=o[o.length-1].getBoundingClientRect().bottom-d.getBoundingClientRect().top;if(b<=0)return;t(this,E)[e]=b,p(this,S,(t(this,S)+b/o.length)/2);let z=document.createElement("div");z.className=O,z.dataset.eunPage=String(e),z.style.blockSize=`${b}px`,z.setAttribute("aria-hidden","true"),p(this,y,!0),d.before(z);for(let N of o)N.remove();queueMicrotask(()=>{p(this,y,!1)}),t(this,g).set(e,o),t(this,v).delete(e)},F=function(){this.setupLoadObserver(this.sentinelEl,this.scrollerEl??null,this.rootMargin,()=>l(this,s,Q).call(this))},Q=function(){this.loading||!this.hasMore||(this.loading=!0,p(this,w,t(this,w)+1),this.dispatchEvent(new K(t(this,w),this.pageSize)))},x=function(e){if(e<0||e>=t(this,h).length)return;let i=Math.floor(e/this.pageSize);l(this,s,A).call(this,i),p(this,m,e),l(this,s,M).call(this);let n=t(this,h)[e];n.focus(),n.scrollIntoView({block:"nearest"})},$=function(e){let i=Array.from(document.querySelectorAll(Z)).filter(o=>{if(o===this||this.contains(o))return!1;let d=this.compareDocumentPosition(o);return e===1?!!(d&Node.DOCUMENT_POSITION_FOLLOWING):!!(d&Node.DOCUMENT_POSITION_PRECEDING)});(e===1?i[0]:i[i.length-1])?.focus()},H=new WeakMap,k=new WeakMap,D=new WeakMap,a.styles=V,c([f({attribute:"page-size",type:Number})],a.prototype,"pageSize",2),c([f({type:Boolean,reflect:!0})],a.prototype,"virtualize",2),c([f({attribute:"virtualize-threshold",type:Number})],a.prototype,"virtualizeThreshold",2),c([f({attribute:"buffer-pages",type:Number})],a.prototype,"bufferPages",2),c([f({type:Boolean,reflect:!0})],a.prototype,"loading",2),c([f({attribute:"has-more",type:Boolean,reflect:!0})],a.prototype,"hasMore",2),c([f({attribute:"loading-label"})],a.prototype,"loadingLabel",2),c([f()],a.prototype,"label",2),c([f({attribute:"root-margin"})],a.prototype,"rootMargin",2),c([I()],a.prototype,"itemCount",2),c([L("#scroller")],a.prototype,"scrollerEl",2),c([L("#sentinel")],a.prototype,"sentinelEl",2),c([L("#announcer")],a.prototype,"announcerEl",2),a=c([B(X)],a);export{a as EunomiaInfiniteList,X as EunomiaInfiniteListTagName};
+    `}};d=new WeakMap,v=new WeakMap,g=new WeakMap,T=new WeakMap,x=new WeakMap,m=new WeakMap,y=new WeakMap,C=new WeakMap,E=new WeakMap,S=new WeakMap,A=new WeakMap,s=new WeakSet,M=function(){let e=this.hasMore?-1:t(this,d).length,i=this.itemTabStop!=="none";t(this,d).forEach((n,o)=>{n.isConnected&&(n.hasAttribute("role")||n.setAttribute("role","article"),n.setAttribute("aria-posinset",String(o+1)),n.setAttribute("aria-setsize",String(e)),i&&o===t(this,m)?n.tabIndex=0:n.matches(":focus")||n.removeAttribute("tabindex"))})},U=function(){let e=this.scrollerEl;if(!e)return;let i=Number.parseInt(getComputedStyle(this).getPropertyValue("--infinite-list-columns"),10);p(this,A,i>0?i:1);let n=getComputedStyle(e).maxBlockSize!=="none";n!==t(this,S)&&(p(this,S,n),e.classList.toggle("contained",n),this.loadObserver&&r(this,s,P).call(this))},k=new WeakMap,H=new WeakMap,z=function(){let e=t(this,d).length;if(e===0)return;let i=Math.ceil(e/this.pageSize);if(!this.virtualize||t(this,A)>1||e<=this.virtualizeThreshold){for(let l=0;l<i;l++)r(this,s,D).call(this,l);return}if(!this.scrollerEl||this.scrollerEl.clientHeight===0)return;let n=r(this,s,Z).call(this,i),o=Math.max(0,n-this.bufferPages),c=Math.min(i-1,n+this.bufferPages);for(let l=0;l<i;l++)l>=o&&l<=c?r(this,s,D).call(this,l):r(this,s,te).call(this,l)},Z=function(e){let i=this.scrollerEl;if(!i)return 0;let n=t(this,S)?i.scrollTop+i.clientHeight/2:window.innerHeight/2-i.getBoundingClientRect().top,o=0;for(let c=0;c<e;c++){let l=t(this,T)[c]??r(this,s,ee).call(this,c);if(n<o+l)return c;o+=l}return Math.max(0,e-1)},ee=function(e){let i=Math.ceil(t(this,d).length/this.pageSize);return(e===i-1?t(this,d).length-e*this.pageSize:this.pageSize)*t(this,x)},D=function(e){if(t(this,v).has(e))return;let i=t(this,g).get(e);if(!i||i.length===0)return;let n=this.querySelector(`.${$}[data-eun-page="${e}"]`);if(p(this,y,!0),n){for(let o of i)n.before(o);n.remove()}else for(let o of i)this.append(o);queueMicrotask(()=>{p(this,y,!1)}),t(this,g).delete(e),t(this,v).add(e),r(this,s,M).call(this)},te=function(e){if(!t(this,v).has(e))return;let i=e*this.pageSize,n=Math.min(i+this.pageSize,t(this,d).length),o=t(this,d).slice(i,n).filter(R=>R.isConnected);if(o.length===0)return;let c=o[0],b=o[o.length-1].getBoundingClientRect().bottom-c.getBoundingClientRect().top;if(b<=0)return;t(this,T)[e]=b,p(this,x,(t(this,x)+b/o.length)/2);let L=document.createElement("div");L.className=$,L.dataset.eunPage=String(e),L.style.blockSize=`${b}px`,L.setAttribute("aria-hidden","true"),p(this,y,!0),c.before(L);for(let R of o)R.remove();queueMicrotask(()=>{p(this,y,!1)}),t(this,g).set(e,o),t(this,v).delete(e)},P=function(){this.setupLoadObserver(this.sentinelEl,t(this,S)?this.scrollerEl??null:null,this.rootMargin,()=>r(this,s,ie).call(this))},ie=function(){this.loading||!this.hasMore||(this.loading=!0,p(this,C,t(this,C)+1),this.dispatchEvent(new Q(t(this,C),this.pageSize)))},w=function(e){if(e<0||e>=t(this,d).length)return;let i=Math.floor(e/this.pageSize);r(this,s,D).call(this,i),p(this,m,e),r(this,s,M).call(this);let n=t(this,d)[e];this.itemTabStop==="none"&&(n.tabIndex=0),n.focus(),n.scrollIntoView({block:"nearest"})},_=function(e){let i=Array.from(document.querySelectorAll(re)).filter(o=>{if(o===this||this.contains(o))return!1;let c=this.compareDocumentPosition(o);return e===1?!!(c&Node.DOCUMENT_POSITION_FOLLOWING):!!(c&Node.DOCUMENT_POSITION_PRECEDING)});(e===1?i[0]:i[i.length-1])?.focus()},N=new WeakMap,F=new WeakMap,I=new WeakMap,B=new WeakMap,h.styles=Y,u([f({attribute:"page-size",type:Number})],h.prototype,"pageSize",2),u([f({type:Boolean,reflect:!0})],h.prototype,"virtualize",2),u([f({attribute:"virtualize-threshold",type:Number})],h.prototype,"virtualizeThreshold",2),u([f({attribute:"buffer-pages",type:Number})],h.prototype,"bufferPages",2),u([f({type:Boolean,reflect:!0})],h.prototype,"loading",2),u([f({attribute:"has-more",type:Boolean,reflect:!0})],h.prototype,"hasMore",2),u([f({attribute:"loading-label"})],h.prototype,"loadingLabel",2),u([f({attribute:"item-tab-stop"})],h.prototype,"itemTabStop",2),u([f()],h.prototype,"label",2),u([f({attribute:"root-margin"})],h.prototype,"rootMargin",2),u([V()],h.prototype,"itemCount",2),u([O("#scroller")],h.prototype,"scrollerEl",2),u([O("#sentinel")],h.prototype,"sentinelEl",2),u([O("#announcer")],h.prototype,"announcerEl",2),h=u([q(se)],h);export{h as EunomiaInfiniteList,se as EunomiaInfiniteListTagName};