@eunomia/elements 1.0.0-beta.2 → 1.0.0-beta.4

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

@@ -1,7 +1,11 @@
-import{a as I}from"./chunks/chunk-SD2H5UDZ.js";import{a as R}from"./chunks/chunk-ATH2OAMU.js";import{a as g}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as s,f as k,g as S,h as i,i as l,j as x,l as P,n as u,p as d,s as T}from"./chunks/chunk-XH6NREVZ.js";var v=class y extends Event{static{this.eventName="eunslidechange"}constructor(f){super(y.eventName,{bubbles:!0,composed:!1}),this.index=f.index,this.count=f.count}};var L=S`
+import{a as I}from"./chunks/chunk-SD2H5UDZ.js";import{a as A}from"./chunks/chunk-ATH2OAMU.js";import{a as y}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as r,f as k,g as S,h as a,i as n,j as x,l as P,n as u,p as d,s as T}from"./chunks/chunk-XH6NREVZ.js";var v=class g extends Event{static{this.eventName="eunslidechange"}constructor(f){super(g.eventName,{bubbles:!0,composed:!1}),this.index=f.index,this.count=f.count}};var $=S`
   :host {
     display: block;
     --_visibleCount: 1;
+    --_effectiveVisibleCount: var(
+      --carousel-visible-slides,
+      var(--_visibleCount)
+    );
     --_snapAlign: start;
   }
 
@@ -19,7 +23,7 @@ import{a as I}from"./chunks/chunk-SD2H5UDZ.js";import{a as R}from"./chunks/chunk
 
   #carousel-header {
     display: flex;
-    align-items: var(--carousel-header-align, baseline);
+    align-items: var(--carousel-header-align, flex-end);
     justify-content: space-between;
     gap: var(--carousel-header-gap, var(--eun-space-m, 16px));
     margin-bottom: var(--eun-space-m, 16px);
@@ -53,6 +57,7 @@ import{a as I}from"./chunks/chunk-SD2H5UDZ.js";import{a as R}from"./chunks/chunk
   #viewport::before,
   #viewport::after {
     content: "";
+    display: var(--carousel-fade-display, block);
     position: absolute;
     top: 0;
     bottom: 0;
@@ -94,7 +99,7 @@ import{a as I}from"./chunks/chunk-SD2H5UDZ.js";import{a as R}from"./chunks/chunk
     scrollbar-width: none;
     outline: 2px solid transparent;
     outline-offset: 8px;
-    border-radius: var(--eun-borderRadius-m);
+    border-radius: var(--eun-border-radius-m);
     transition: outline 0.2s ease-out;
   }
   #track::-webkit-scrollbar {
@@ -125,8 +130,11 @@ import{a as I}from"./chunks/chunk-SD2H5UDZ.js";import{a as R}from"./chunks/chunk
     flex-basis: max(
       var(--carousel-min-slide-width, 220px),
       calc(
-        (100% - (var(--_visibleCount) - 1) * var(--carousel-gap, 16px)) /
-          var(--_visibleCount)
+        (
+            100% - (var(--_effectiveVisibleCount) - 1) *
+              var(--carousel-gap, 16px)
+          ) /
+          var(--_effectiveVisibleCount)
       )
     );
   }
@@ -136,9 +144,9 @@ import{a as I}from"./chunks/chunk-SD2H5UDZ.js";import{a as R}from"./chunks/chunk
       calc(
         (
             100% - var(--carousel-peek-size, 32px) -
-              (var(--_visibleCount) - 1) * var(--carousel-gap, 16px)
+              (var(--_effectiveVisibleCount) - 1) * var(--carousel-gap, 16px)
           ) /
-          var(--_visibleCount)
+          var(--_effectiveVisibleCount)
       )
     );
   }
@@ -159,7 +167,7 @@ import{a as I}from"./chunks/chunk-SD2H5UDZ.js";import{a as R}from"./chunks/chunk
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--carousel-nav-border-color, var(--eun-border-color, #dee0e7));
     background: var(
       --carousel-nav-background,
@@ -243,7 +251,7 @@ import{a as I}from"./chunks/chunk-SD2H5UDZ.js";import{a as R}from"./chunks/chunk
     width: calc(var(--carousel-dot-size, 6px) * 3.5);
     border-radius: var(
       --carousel-dot-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     background: var(
       --carousel-dot-active-color,
@@ -260,55 +268,55 @@ import{a as I}from"./chunks/chunk-SD2H5UDZ.js";import{a as R}from"./chunks/chunk
       transition: none;
     }
   }
-`,A=L;var N="eun-carousel",C="eun-carousel-active-slide",t=class extends R(T){constructor(){super(...arguments);this.layout="inline";this.navPlacement="end";this.responsiveBreakpoint=480;this.visibleSlides=1;this.fullSlides=!0;this.scrollStep=1;this.centerSnap=!1;this.edgeFade=!0;this.loop=!1;this.autoplay=!1;this.autoplayInterval=4e3;this.showArrows=!0;this.showDots=!0;this.ariaLabelPrevious="Previous slide";this.ariaLabelNext="Next slide";this.currentIndex=0;this.slideCount=0;this.manuallyPaused=!1;this.announcement="";this.hasTitle=!1;this.narrow=!1;this.resizeObserver=new ResizeObserver(()=>{this.resizeRaf!==void 0&&cancelAnimationFrame(this.resizeRaf),this.resizeRaf=requestAnimationFrame(()=>{this.resizeRaf=void 0,this.updateFromScrollPosition(),this.updateCenterPadding(),this.updateNarrow()})});this.handleScroll=()=>{this.scrollRaf===void 0&&(this.scrollRaf=requestAnimationFrame(()=>{this.scrollRaf=void 0,this.updateFromScrollPosition()}))};this.scheduleAnnounce=I(()=>{this.announcement=this.buildAnnouncement(),this.dispatchEvent(new v({index:this.currentIndex,count:this.slideCount}))},200);this.maxIndex=0;this.handleTransientPause=()=>{this.stopAutoplay()};this.handleTransientResume=()=>{this.startAutoplay()}}connectedCallback(){super.connectedCallback?.(),this.addEventListener("mouseenter",this.handleTransientPause),this.addEventListener("mouseleave",this.handleTransientResume),this.addEventListener("focusin",this.handleTransientPause),this.addEventListener("focusout",this.handleTransientResume)}disconnectedCallback(){this.stopAutoplay(),this.resizeObserver.disconnect(),this.removeEventListener("mouseenter",this.handleTransientPause),this.removeEventListener("mouseleave",this.handleTransientResume),this.removeEventListener("focusin",this.handleTransientPause),this.removeEventListener("focusout",this.handleTransientResume),this.scrollRaf!==void 0&&cancelAnimationFrame(this.scrollRaf),this.resizeRaf!==void 0&&cancelAnimationFrame(this.resizeRaf),super.disconnectedCallback?.()}firstUpdated(e){super.firstUpdated(e),this.resizeObserver.observe(this)}updated(e){super.updated(e),e.has("visibleSlides")&&this.style.setProperty("--_visibleCount",String(Math.max(1,this.visibleSlides))),e.has("centerSnap")&&(this.style.setProperty("--_snapAlign",this.centerSnap?"center":"start"),this.updateCenterPadding(),this.updateFromScrollPosition()),e.has("autoplay")&&(this.autoplay?this.startAutoplay():this.stopAutoplay()),e.has("responsiveBreakpoint")&&this.updateNarrow()}previous(){this.step(-1)}next(){this.step(1)}goTo(e){this.goToIndex(e)}getCssPixelValue(e,r){let a=Number.parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(a)?r:a}get pageCount(){return Math.ceil(this.maxIndex/Math.max(1,this.scrollStep))+1}measureMaxIndex(){if(!this.trackEl||!this.slides.length)return 0;if(this.centerSnap)return this.slides.length-1;let e=this.trackEl,r=e.getBoundingClientRect(),a=Math.max(0,e.scrollWidth-e.clientWidth),n=0,o=1/0;return this.slides.forEach((p,b)=>{let h=p.getBoundingClientRect().left-r.left+e.scrollLeft,c=Math.abs(h-a);c<o&&(o=c,n=b)}),n}updateCenterPadding(){if(!this.centerSnap||!this.trackEl||!this.slides.length){this.style.setProperty("--_centerPadding","0px");return}let e=this.trackEl.clientWidth,r=this.slides[0].getBoundingClientRect().width,a=Math.max(0,(e-r)/2);this.style.setProperty("--_centerPadding",`${a}px`)}updateNarrow(){this.narrow=this.responsiveBreakpoint>0&&this.getBoundingClientRect().width<this.responsiveBreakpoint}handleSlotChange(){this.slideCount=this.slides.length,this.slides.forEach((e,r)=>{e.setAttribute("role","group"),e.setAttribute("aria-roledescription","slide"),e.setAttribute("aria-label",this.dictionary.carousel.ofTotal(r+1,this.slideCount))}),this.updateFromScrollPosition(),this.updateCenterPadding(),this.startAutoplay()}handleTitleSlotChange(){this.hasTitle=(this.titleSlotEl?.assignedNodes({flatten:!0}).length??0)>0}scrollBehavior(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}goToIndex(e){if(!this.slides.length||!this.trackEl)return;let r=this.maxIndex,a=this.loop?(e%(r+1)+(r+1))%(r+1):Math.max(0,Math.min(e,r));if(!this.centerSnap&&a===r){this.trackEl.scrollTo({left:this.trackEl.scrollWidth-this.trackEl.clientWidth,behavior:this.scrollBehavior()});return}let n=this.slides[a];n&&n.scrollIntoView({behavior:this.scrollBehavior(),inline:this.centerSnap?"center":"start",block:"nearest"})}step(e){this.goToIndex(this.currentIndex+e*Math.max(1,this.scrollStep))}startAutoplay(){this.autoplayTimer||!this.autoplay||this.manuallyPaused||this.maxIndex<=0||(this.autoplayTimer=setInterval(()=>this.step(1),this.autoplayInterval))}stopAutoplay(){clearInterval(this.autoplayTimer),this.autoplayTimer=void 0}pauseAutoplay(){this.manuallyPaused=!0,this.stopAutoplay()}resumeAutoplay(){this.manuallyPaused=!1,this.startAutoplay()}buildAnnouncement(){if(!this.slideCount)return"";let e=this.currentIndex+1,r=Math.max(1,Math.min(this.visibleSlides,this.slideCount-this.currentIndex)),a=Math.min(e+r-1,this.slideCount);return a>e?`Showing slides ${e} to ${a} of ${this.slideCount}`:`Slide ${e} of ${this.slideCount}`}updateFromScrollPosition(){if(!this.trackEl||!this.slides.length)return;let e=this.trackEl.getBoundingClientRect(),r=this.centerSnap?e.left+e.width/2:e.left,a=0,n=1/0;this.slides.forEach((h,c)=>{let m=h.getBoundingClientRect(),$=this.centerSnap?m.left+m.width/2:m.left,w=Math.abs($-r);w<n&&(n=w,a=c)}),this.maxIndex=this.measureMaxIndex(),a=Math.min(a,this.maxIndex),this.slides.forEach((h,c)=>{h.classList.toggle(C,c===a)});let o=a!==this.currentIndex;this.currentIndex=a;let{scrollLeft:p}=this.trackEl,b=this.trackEl.scrollWidth-this.trackEl.clientWidth;this.style.setProperty("--_showLeftFade",p>1?"1":"0"),this.style.setProperty("--_showRightFade",p<b-1?"1":"0"),o&&this.scheduleAnnounce()}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);break;case"End":e.preventDefault(),this.goToIndex(this.maxIndex);break;default:break}}renderDots(){if(!this.showDots||this.pageCount<=1)return d;let e=Math.max(1,this.scrollStep),r=Math.round(this.currentIndex/e);return u`
+`,C=$;var L="eun-carousel",N="eun-carousel-active-slide",t=class extends A(T){constructor(){super(...arguments);this.layout="inline";this.navPlacement="end";this.responsiveBreakpoint=480;this.visibleSlides=1;this.fullSlides=!0;this.scrollStep=1;this.centerSnap=!1;this.edgeFade=!0;this.loop=!1;this.autoplay=!1;this.autoplayInterval=4e3;this.showArrows=!0;this.showDots=!0;this.ariaLabelPrevious="Previous slide";this.ariaLabelNext="Next slide";this.currentIndex=0;this.slideCount=0;this.manuallyPaused=!1;this.announcement="";this.hasTitle=!1;this.narrow=!1;this.effectiveVisibleSlides=1;this.effectiveScrollStep=1;this.resizeObserver=new ResizeObserver(()=>{this.resizeRaf!==void 0&&cancelAnimationFrame(this.resizeRaf),this.resizeRaf=requestAnimationFrame(()=>{this.resizeRaf=void 0,this.syncCssOverrides(),this.updateFromScrollPosition(),this.updateCenterPadding(),this.updateNarrow()})});this.handleScroll=()=>{this.scrollRaf===void 0&&(this.scrollRaf=requestAnimationFrame(()=>{this.scrollRaf=void 0,this.updateFromScrollPosition()}))};this.scheduleAnnounce=I(()=>{this.announcement=this.buildAnnouncement(),this.dispatchEvent(new v({index:this.currentIndex,count:this.slideCount}))},200);this.maxIndex=0;this.handleTransientPause=()=>{this.stopAutoplay()};this.handleTransientResume=()=>{this.startAutoplay()}}connectedCallback(){super.connectedCallback?.(),this.addEventListener("mouseenter",this.handleTransientPause),this.addEventListener("mouseleave",this.handleTransientResume),this.addEventListener("focusin",this.handleTransientPause),this.addEventListener("focusout",this.handleTransientResume)}disconnectedCallback(){this.stopAutoplay(),this.resizeObserver.disconnect(),this.removeEventListener("mouseenter",this.handleTransientPause),this.removeEventListener("mouseleave",this.handleTransientResume),this.removeEventListener("focusin",this.handleTransientPause),this.removeEventListener("focusout",this.handleTransientResume),this.scrollRaf!==void 0&&cancelAnimationFrame(this.scrollRaf),this.resizeRaf!==void 0&&cancelAnimationFrame(this.resizeRaf),super.disconnectedCallback?.()}firstUpdated(e){super.firstUpdated(e),this.syncCssOverrides(),this.resizeObserver.observe(this)}updated(e){super.updated(e),e.has("visibleSlides")&&this.style.setProperty("--_visibleCount",String(Math.max(1,this.visibleSlides))),(e.has("visibleSlides")||e.has("scrollStep"))&&this.syncCssOverrides(),e.has("centerSnap")&&(this.style.setProperty("--_snapAlign",this.centerSnap?"center":"start"),this.updateCenterPadding(),this.updateFromScrollPosition()),e.has("autoplay")&&(this.autoplay?this.startAutoplay():this.stopAutoplay()),e.has("responsiveBreakpoint")&&this.updateNarrow()}previous(){this.step(-1)}next(){this.step(1)}goTo(e){this.goToIndex(e)}getCssPixelValue(e,s){let i=Number.parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(i)?s:i}get pageCount(){return Math.ceil(this.maxIndex/this.effectiveScrollStep)+1}syncCssOverrides(){this.effectiveVisibleSlides=Math.max(1,Math.round(this.getCssPixelValue("--carousel-visible-slides",this.visibleSlides))),this.effectiveScrollStep=Math.max(1,Math.round(this.getCssPixelValue("--carousel-scroll-step",this.scrollStep)))}measureMaxIndex(){if(!this.trackEl||!this.slides.length)return 0;if(this.centerSnap)return this.slides.length-1;let e=this.trackEl,s=e.getBoundingClientRect(),i=Math.max(0,e.scrollWidth-e.clientWidth),o=0,l=1/0;return this.slides.forEach((p,b)=>{let h=p.getBoundingClientRect().left-s.left+e.scrollLeft,c=Math.abs(h-i);c<l&&(l=c,o=b)}),o}updateCenterPadding(){if(!this.centerSnap||!this.trackEl||!this.slides.length){this.style.setProperty("--_centerPadding","0px");return}let e=this.trackEl.clientWidth,s=this.slides[0].getBoundingClientRect().width,i=Math.max(0,(e-s)/2);this.style.setProperty("--_centerPadding",`${i}px`)}updateNarrow(){let e=this.getCssPixelValue("--carousel-responsive-breakpoint",this.responsiveBreakpoint);this.narrow=e>0&&this.getBoundingClientRect().width<e}handleSlotChange(){this.slideCount=this.slides.length,this.slides.forEach((e,s)=>{e.setAttribute("role","group"),e.setAttribute("aria-roledescription","slide"),e.setAttribute("aria-label",this.dictionary.carousel.ofTotal(s+1,this.slideCount))}),this.updateFromScrollPosition(),this.updateCenterPadding(),this.startAutoplay()}handleTitleSlotChange(){this.hasTitle=(this.titleSlotEl?.assignedNodes({flatten:!0}).length??0)>0}scrollBehavior(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}goToIndex(e){if(!this.slides.length||!this.trackEl)return;let s=this.maxIndex,i=this.loop?(e%(s+1)+(s+1))%(s+1):Math.max(0,Math.min(e,s));if(!this.centerSnap&&i===s){this.trackEl.scrollTo({left:this.trackEl.scrollWidth-this.trackEl.clientWidth,behavior:this.scrollBehavior()});return}let o=this.slides[i];o&&o.scrollIntoView({behavior:this.scrollBehavior(),inline:this.centerSnap?"center":"start",block:"nearest"})}step(e){this.syncCssOverrides(),this.goToIndex(this.currentIndex+e*this.effectiveScrollStep)}startAutoplay(){this.autoplayTimer||!this.autoplay||this.manuallyPaused||this.maxIndex<=0||(this.autoplayTimer=setInterval(()=>this.step(1),this.autoplayInterval))}stopAutoplay(){clearInterval(this.autoplayTimer),this.autoplayTimer=void 0}pauseAutoplay(){this.manuallyPaused=!0,this.stopAutoplay()}resumeAutoplay(){this.manuallyPaused=!1,this.startAutoplay()}buildAnnouncement(){if(!this.slideCount)return"";let e=this.currentIndex+1,s=Math.max(1,Math.min(this.effectiveVisibleSlides,this.slideCount-this.currentIndex)),i=Math.min(e+s-1,this.slideCount);return i>e?`Showing slides ${e} to ${i} of ${this.slideCount}`:`Slide ${e} of ${this.slideCount}`}updateFromScrollPosition(){if(!this.trackEl||!this.slides.length)return;let e=this.trackEl.getBoundingClientRect(),s=this.centerSnap?e.left+e.width/2:e.left,i=0,o=1/0;this.slides.forEach((h,c)=>{let m=h.getBoundingClientRect(),R=this.centerSnap?m.left+m.width/2:m.left,w=Math.abs(R-s);w<o&&(o=w,i=c)}),this.maxIndex=this.measureMaxIndex(),i=Math.min(i,this.maxIndex),this.slides.forEach((h,c)=>{h.classList.toggle(N,c===i)});let l=i!==this.currentIndex;this.currentIndex=i;let{scrollLeft:p}=this.trackEl,b=this.trackEl.scrollWidth-this.trackEl.clientWidth;this.style.setProperty("--_showLeftFade",p>1?"1":"0"),this.style.setProperty("--_showRightFade",p<b-1?"1":"0"),l&&this.scheduleAnnounce()}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);break;case"End":e.preventDefault(),this.goToIndex(this.maxIndex);break;default:break}}renderDots(){if(!this.showDots||this.pageCount<=1)return d;let e=this.effectiveScrollStep,s=Math.round(this.currentIndex/e);return u`
       <div
         id="dots"
         role="group"
         aria-label=${this.dictionary.carousel.slideNavigation}
       >
-        ${Array.from({length:this.pageCount},(a,n)=>{let o=n===r;return u`
+        ${Array.from({length:this.pageCount},(i,o)=>{let l=o===s;return u`
             <button
               type="button"
-              class=${g({dot:!0})}
-              aria-current=${o?"true":d}
-              aria-label=${this.dictionary.carousel.goToSlide(n*e+1,this.slideCount)}
-              @click=${()=>this.goTo(n*e)}
+              class=${y({dot:!0})}
+              aria-current=${l?"true":d}
+              aria-label=${this.dictionary.carousel.goToSlide(o*e+1,this.slideCount)}
+              @click=${()=>this.goTo(o*e)}
             ></button>
           `})}
       </div>
-    `}renderNavButton(e){let r=e==="prev",a=!this.loop&&(r?this.currentIndex<=0:this.currentIndex>=this.maxIndex);return u`
+    `}renderNavButton(e){let s=e==="prev",i=!this.loop&&(s?this.currentIndex<=0:this.currentIndex>=this.maxIndex);return u`
       <button
         type="button"
         id=${e}
         class="nav"
-        aria-label=${r?this.ariaLabelPrevious:this.ariaLabelNext}
+        aria-label=${s?this.ariaLabelPrevious:this.ariaLabelNext}
         aria-controls="track"
-        ?disabled=${a}
-        @click=${()=>r?this.previous():this.next()}
+        ?disabled=${i}
+        @click=${()=>s?this.previous():this.next()}
       >
         <eun-icon
-          name=${r?"chevron_left":"chevron_right"}
+          name=${s?"chevron_left":"chevron_right"}
           size=${this.getCssPixelValue("--carousel-nav-icon-size",20)}
         ></eun-icon>
       </button>
-    `}render(){let e=this.showDots&&this.pageCount>1,r=this.layout==="header"||this.layout==="inline"&&this.narrow,a=this.showArrows&&r&&this.pageCount>1,n=this.showArrows&&!r&&this.pageCount>1;return u`
+    `}render(){let e=this.showDots&&this.pageCount>1,s=this.layout==="header"||this.layout==="inline"&&this.narrow,i=this.showArrows&&s&&this.pageCount>1,o=this.showArrows&&!s&&this.pageCount>1;return u`
       <div
         id="carousel-header"
-        class=${g({"nav-start":a&&this.navPlacement==="start","nav-center":a&&this.navPlacement==="center"})}
-        ?hidden=${!(this.hasTitle||a)}
+        class=${y({"nav-start":i&&this.navPlacement==="start","nav-center":i&&this.navPlacement==="center"})}
+        ?hidden=${!(this.hasTitle||i)}
       >
         <slot
           name="title"
           @slotchange=${()=>this.handleTitleSlotChange()}
         ></slot>
-        ${a?u`
+        ${i?u`
               <div id="header-nav">
                 ${this.renderNavButton("prev")} ${this.renderNavButton("next")}
               </div>
             `:d}
       </div>
       <div id="viewport">
-        ${n?this.renderNavButton("prev"):d}
+        ${o?this.renderNavButton("prev"):d}
         <div
           id="track"
           role="region"
@@ -316,14 +324,14 @@ import{a as I}from"./chunks/chunk-SD2H5UDZ.js";import{a as R}from"./chunks/chunk
           aria-label=${this.ariaLabel||"Carousel"}
           tabindex="0"
           @scroll=${this.handleScroll}
-          @keydown=${o=>this.handleKeydown(o)}
+          @keydown=${l=>this.handleKeydown(l)}
         >
           <slot @slotchange=${()=>this.handleSlotChange()}></slot>
         </div>
-        ${n?this.renderNavButton("next"):d}
+        ${o?this.renderNavButton("next"):d}
       </div>
       ${e?this.renderDots():d}
       <span class="sr-only" role="status" aria-live="polite"
         >${this.announcement}</span
       >
-    `}};t.styles=A,s([i({reflect:!0})],t.prototype,"layout",2),s([i({reflect:!0,attribute:"nav-placement"})],t.prototype,"navPlacement",2),s([i({type:Number,attribute:"responsive-breakpoint"})],t.prototype,"responsiveBreakpoint",2),s([i({type:Number,attribute:"visible-slides"})],t.prototype,"visibleSlides",2),s([i({type:Boolean,reflect:!0,attribute:"full-slides"})],t.prototype,"fullSlides",2),s([i({type:Number,attribute:"scroll-step"})],t.prototype,"scrollStep",2),s([i({type:Boolean,reflect:!0,attribute:"center-snap"})],t.prototype,"centerSnap",2),s([i({type:Boolean,reflect:!0,attribute:"edge-fade"})],t.prototype,"edgeFade",2),s([i({type:Boolean,reflect:!0})],t.prototype,"loop",2),s([i({type:Boolean})],t.prototype,"autoplay",2),s([i({type:Number,attribute:"autoplay-interval"})],t.prototype,"autoplayInterval",2),s([i({type:Boolean,attribute:"show-arrows"})],t.prototype,"showArrows",2),s([i({type:Boolean,attribute:"show-dots"})],t.prototype,"showDots",2),s([i({attribute:"aria-label-previous"})],t.prototype,"ariaLabelPrevious",2),s([i({attribute:"aria-label-next"})],t.prototype,"ariaLabelNext",2),s([l()],t.prototype,"currentIndex",2),s([l()],t.prototype,"slideCount",2),s([l()],t.prototype,"manuallyPaused",2),s([l()],t.prototype,"announcement",2),s([l()],t.prototype,"hasTitle",2),s([l()],t.prototype,"narrow",2),s([x("#track")],t.prototype,"trackEl",2),s([x('slot[name="title"]')],t.prototype,"titleSlotEl",2),s([P()],t.prototype,"slides",2),s([l()],t.prototype,"maxIndex",2),t=s([k(N)],t);export{t as EunomiaCarousel,N as EunomiaCarouselTagName};
+    `}};t.styles=C,r([a({reflect:!0})],t.prototype,"layout",2),r([a({reflect:!0,attribute:"nav-placement"})],t.prototype,"navPlacement",2),r([a({type:Number,attribute:"responsive-breakpoint"})],t.prototype,"responsiveBreakpoint",2),r([a({type:Number,attribute:"visible-slides"})],t.prototype,"visibleSlides",2),r([a({type:Boolean,reflect:!0,attribute:"full-slides"})],t.prototype,"fullSlides",2),r([a({type:Number,attribute:"scroll-step"})],t.prototype,"scrollStep",2),r([a({type:Boolean,reflect:!0,attribute:"center-snap"})],t.prototype,"centerSnap",2),r([a({type:Boolean,reflect:!0,attribute:"edge-fade"})],t.prototype,"edgeFade",2),r([a({type:Boolean,reflect:!0})],t.prototype,"loop",2),r([a({type:Boolean})],t.prototype,"autoplay",2),r([a({type:Number,attribute:"autoplay-interval"})],t.prototype,"autoplayInterval",2),r([a({type:Boolean,attribute:"show-arrows"})],t.prototype,"showArrows",2),r([a({type:Boolean,attribute:"show-dots"})],t.prototype,"showDots",2),r([a({attribute:"aria-label-previous"})],t.prototype,"ariaLabelPrevious",2),r([a({attribute:"aria-label-next"})],t.prototype,"ariaLabelNext",2),r([n()],t.prototype,"currentIndex",2),r([n()],t.prototype,"slideCount",2),r([n()],t.prototype,"manuallyPaused",2),r([n()],t.prototype,"announcement",2),r([n()],t.prototype,"hasTitle",2),r([n()],t.prototype,"narrow",2),r([n()],t.prototype,"effectiveVisibleSlides",2),r([n()],t.prototype,"effectiveScrollStep",2),r([x("#track")],t.prototype,"trackEl",2),r([x('slot[name="title"]')],t.prototype,"titleSlotEl",2),r([P()],t.prototype,"slides",2),r([n()],t.prototype,"maxIndex",2),t=r([k(L)],t);export{t as EunomiaCarousel,L as EunomiaCarouselTagName};

package/dist/cdn/components/eun-check-card.js

@@ -1,4 +1,4 @@
-import{a as u}from"./chunks/chunk-5GF2Q3NR.js";import{b as s}from"./chunks/chunk-7WTSHE7M.js";import"./chunks/chunk-7Q6AHVI5.js";import{e as o}from"./chunks/chunk-2IQUMAMI.js";import"./chunks/chunk-ONYUXQV2.js";import"./chunks/chunk-T7WABJEJ.js";import{a as l}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as e,f as c,g as d,h as n,l as i,n as a,p as t}from"./chunks/chunk-XH6NREVZ.js";var v=d`
+import{a as u}from"./chunks/chunk-74AOAB4X.js";import{b as s}from"./chunks/chunk-SIHZFOTK.js";import"./chunks/chunk-GU6BVMFJ.js";import{e as o}from"./chunks/chunk-OAULRKHQ.js";import"./chunks/chunk-YYCEPZUN.js";import"./chunks/chunk-T7WABJEJ.js";import{a as l}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as e,f as c,g as d,h as n,l as i,n as a,p as t}from"./chunks/chunk-XH6NREVZ.js";var v=d`
   :host {
     --_borderWidth: var(--check-card-border-width, 1px);
     --_borderColor: var(
@@ -27,7 +27,7 @@ import{a as u}from"./chunks/chunk-5GF2Q3NR.js";import{b as s}from"./chunks/chunk
     --_padding: var(--check-card-padding, var(--eun-space-m, 16px));
     --_borderRadius: var(
       --check-card-border-radius,
-      var(--eun-borderRadius-m, 10px)
+      var(--eun-border-radius-m, 10px)
     );
     --_indicatorBackground: transparent;
     --_indicatorBorder: var(--_borderColor);
@@ -111,7 +111,7 @@ import{a as u}from"./chunks/chunk-5GF2Q3NR.js";import{b as s}from"./chunks/chunk
     align-items: center;
     justify-content: center;
     border: 1px solid var(--_indicatorBorder);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     background: var(--_indicatorBackground);
     color: var(--_indicatorIcon);
     transition: all 0.15s ease;

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

@@ -1,4 +1,4 @@
-import{a as g}from"./chunks/chunk-BQHYZB2W.js";import{a as b}from"./chunks/chunk-GW3VP2L7.js";import{a as f,c as m,d as v,e as o}from"./chunks/chunk-2IQUMAMI.js";import{a as u}from"./chunks/chunk-ONYUXQV2.js";import{a as p}from"./chunks/chunk-T7WABJEJ.js";import{a as c}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import"./chunks/chunk-5EVP7YNE.js";import{a as i,f as l,g as r,h as n,j as d,n as h,s as a}from"./chunks/chunk-XH6NREVZ.js";var x=r`
+import{a as g}from"./chunks/chunk-BQHYZB2W.js";import{a as b}from"./chunks/chunk-GW3VP2L7.js";import{a as f,c as m,d as v,e as o}from"./chunks/chunk-OAULRKHQ.js";import{a as u}from"./chunks/chunk-YYCEPZUN.js";import{a as p}from"./chunks/chunk-T7WABJEJ.js";import{a as c}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import"./chunks/chunk-5EVP7YNE.js";import{a as s,f as l,g as r,h as n,j as d,n as h,s as a}from"./chunks/chunk-XH6NREVZ.js";var x=r`
   :host {
     --_container-gap: var(--checkbox-list-gap, var(--eun-space-s, 8px));
     --_options-gap: var(--checkbox-list-options-gap, var(--eun-space-s, 8px));
@@ -7,7 +7,7 @@ import{a as g}from"./chunks/chunk-BQHYZB2W.js";import{a as b}from"./chunks/chunk
       var(--eun-color-critical-100, #aa0014)
     );
   }
-`,E=x;var k="eun-checkbox-list",y="eun-checkbox",C="eun-check-card",M=p(v(a)),s=class extends b(f(m(M))){constructor(){super(...arguments);this.inline=!1;this.handleChangeEvent=e=>{e.stopPropagation(),this.sendChangeEvent()}}get fields(){return Array.from(this.querySelectorAll(`:scope > ${y}, :scope > ${C}`))}get value(){return this.fields.filter(e=>e.checked).map(e=>e.valueState??e.value)}set value(e){this.updateComplete.then(()=>{this.fields.forEach(t=>{t.checked=e.includes(t.value)})})}firstUpdated(){if(this.optionsList?.addEventListener("eunchange",this.handleChangeEvent),this.defaultValue&&this.defaultValue.length>0){let e=this.defaultValue??[];this.fields.forEach(t=>{t.checked=e.includes(t.value)}),this.value=this.defaultValue,this.sendChangeEvent()}}disconnectedCallback(){this.optionsList?.removeEventListener("eunchange",this.handleChangeEvent),super.disconnectedCallback?.()}updated(e){super.updated(e),e.has("disabled")&&this.fields.forEach(t=>{t.disabled=this.disabled}),e.has("readonly")&&this.fields.forEach(t=>{t.readonly=this.readonly}),(e.has("valid")||e.has("hideError"))&&this.fields.forEach(t=>{t.valid=this.valid&&!this.hideError}),e.has("label")&&!this.hasAttribute("aria-label")&&this.setAttribute("aria-label",`${this.label}. ${this.instructions??""}`),e.has("name")&&this.fields.forEach(t=>{t.name=this.name})}getFocusAnchor(){return this.querySelector(`${y}, ${C}`)}focus(){super.focus?.(),this.fields[0]?.focus?.()}formResetCallback(){super.formResetCallback?.(),this.updateComplete.then(()=>{this.sendChangeEvent()})}sendChangeEvent(){this.checkValidity(this.value),this.dispatchEvent(new u)}handleSlotChange(){this.fields.forEach(e=>{e.name=this.name})}render(){return h`
+`,E=x;var k="eun-checkbox-list",y="eun-checkbox",C="eun-check-card",M=p(v(a)),i=class extends b(f(m(M))){constructor(){super(...arguments);this.inline=!1;this.handleChangeEvent=e=>{e.stopPropagation(),this.sendChangeEvent()}}get fields(){return Array.from(this.querySelectorAll(`:scope > ${y}, :scope > ${C}`))}get value(){return this.fields.filter(e=>e.checked).map(e=>e.valueState??e.value)}set value(e){this.updateComplete.then(()=>{this.fields.forEach(t=>{t.checked=e.includes(t.value)})})}firstUpdated(){if(this.optionsList?.addEventListener("eunchange",this.handleChangeEvent),this.defaultValue&&this.defaultValue.length>0){let e=this.defaultValue??[];this.fields.forEach(t=>{t.checked=e.includes(t.value)}),this.value=this.defaultValue,this.sendChangeEvent()}}disconnectedCallback(){this.optionsList?.removeEventListener("eunchange",this.handleChangeEvent),super.disconnectedCallback?.()}updated(e){super.updated(e),e.has("disabled")&&this.fields.forEach(t=>{t.disabled=this.disabled}),e.has("readonly")&&this.fields.forEach(t=>{t.readonly=this.readonly}),(e.has("valid")||e.has("hideError"))&&this.fields.forEach(t=>{t.valid=this.valid&&!this.hideError}),e.has("label")&&!this.hasAttribute("aria-label")&&this.setAttribute("aria-label",`${this.label}. ${this.instructions??""}`),e.has("name")&&this.fields.forEach(t=>{t.name=this.name})}getFocusAnchor(){return this.querySelector(`${y}, ${C}`)}focus(){super.focus?.(),this.fields[0]?.focus?.()}formResetCallback(){super.formResetCallback?.(),this.updateComplete.then(()=>{this.sendChangeEvent()})}sendChangeEvent(){this.checkValidity(this.value),this.dispatchEvent(new u(this.value))}handleSlotChange(){this.fields.forEach(e=>{e.name=this.name})}render(){return h`
       <fieldset id="fieldset">
         <div id="legend">${this.renderFormLabels("options")}</div>
         <div
@@ -24,4 +24,4 @@ import{a as g}from"./chunks/chunk-BQHYZB2W.js";import{a as b}from"./chunks/chunk
         </div>
         ${this.renderDescription()}
       </fieldset>
-    `}};s.styles=[E,g,o.base,o.errorMessages],s.shadowRootOptions={...a.shadowRootOptions,delegatesFocus:!0},i([n({type:Boolean,reflect:!0})],s.prototype,"inline",2),i([d("#options")],s.prototype,"optionsList",2),s=i([l(k)],s);export{s as EunomiaCheckboxList,k as EunomiaCheckboxListTagName};
+    `}};i.styles=[E,g,o.base,o.errorMessages],i.shadowRootOptions={...a.shadowRootOptions,delegatesFocus:!0},s([n({type:Boolean,reflect:!0})],i.prototype,"inline",2),s([d("#options")],i.prototype,"optionsList",2),i=s([l(k)],i);export{i as EunomiaCheckboxList,k as EunomiaCheckboxListTagName};

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

@@ -1 +1 @@
-import{a,b}from"./chunks/chunk-7WTSHE7M.js";import"./chunks/chunk-7Q6AHVI5.js";import"./chunks/chunk-2IQUMAMI.js";import"./chunks/chunk-ONYUXQV2.js";import"./chunks/chunk-T7WABJEJ.js";import"./chunks/chunk-XH6NREVZ.js";export{b as EunomiaCheckbox,a as EunomiaCheckboxTagName};
+import{a,b}from"./chunks/chunk-SIHZFOTK.js";import"./chunks/chunk-GU6BVMFJ.js";import"./chunks/chunk-OAULRKHQ.js";import"./chunks/chunk-YYCEPZUN.js";import"./chunks/chunk-T7WABJEJ.js";import"./chunks/chunk-XH6NREVZ.js";export{b as EunomiaCheckbox,a as EunomiaCheckboxTagName};

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

@@ -1,4 +1,4 @@
-import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk-YQU6RVX4.js";import{a as u}from"./chunks/chunk-UP4M7TER.js";import{a as e,f as n,g as l,h as a,i as d,l as s,n as o,p as t,s as p}from"./chunks/chunk-XH6NREVZ.js";var g=l`
+import{a as m}from"./chunks/chunk-P32B7BFD.js";import{a as u}from"./chunks/chunk-ATH2OAMU.js";import{a as h}from"./chunks/chunk-YQU6RVX4.js";import{a as v}from"./chunks/chunk-UP4M7TER.js";import{a,f as l,g as s,h as t,i as p,l as c,n as i,p as n,s as d}from"./chunks/chunk-XH6NREVZ.js";var g=s`
   :host {
     display: inline-flex;
     max-width: 100%;
@@ -7,190 +7,15 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
     vertical-align: middle;
   }
 
-  :host([color="primary"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-primary-transparent, #3d6fff33)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-primary-500, #3d6fff)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-primary-500, #3d6fff)
-    );
-    --_color: var(--chip-color, var(--eun-color-primary-500, #3d6fff));
-  }
-  :host([color="secondary"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-secondary-transparent, #e5a03033)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-secondary-500, #e5a030)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-secondary-500, #e5a030)
-    );
-    --_color: var(--chip-color, var(--eun-color-secondary-500, #e5a030));
-  }
-  :host([color="light"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
-    --_color: var(--chip-color, var(--eun-color-grey-600, #666e8a));
-  }
-  :host([color="light"][appearance="outline"]:not([severity])) {
-    --_color: var(--chip-color, var(--eun-color-grey-600, #666e8a));
-  }
-  :host([color="medium"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-grey-200, #ecedf0)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-grey-500, #8d93aa)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-grey-300, #dee0e7)
-    );
-    --_color: var(--chip-color, var(--eun-color-grey-900, #000000));
-  }
-  :host([color="dark"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-grey-800, #071621)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-grey-800, #071621)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-grey-800, #071621)
-    );
-    --_color: var(--chip-color, var(--eun-color-grey-0, #ffffff));
-  }
-  :host([color="dark"][appearance="outline"]:not([severity])) {
-    --_color: var(--chip-color, var(--eun-color-grey-800, #071621));
-  }
-
-  :host([severity="info"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-info-30, #f0f7fa)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-info-100, #097faf)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-info-100, #097faf)
-    );
-    --_color: var(--chip-color, var(--eun-color-info-100, #097faf));
-  }
-  :host([severity="success"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-success-30, #f1f9f4)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-success-100, #1a9948)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-success-100, #1a9948)
-    );
-    --_color: var(--chip-color, var(--eun-color-success-100, #1a9948));
-  }
-  :host([severity="warning"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-warning-30, #fcf5f0)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-warning-100, #c85207)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-warning-100, #c85207)
-    );
-    --_color: var(--chip-color, var(--eun-color-warning-100, #c85207));
-  }
-  :host([severity="critical"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-critical-30, #faf0f1)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-critical-100, #aa0014)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-critical-100, #aa0014)
-    );
-    --_color: var(--chip-color, var(--eun-color-critical-100, #aa0014));
-  }
-  :host([severity="neutral"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-grey-200, #ecedf0)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-grey-700, #484e61)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-grey-700, #484e61)
-    );
-    --_color: var(--chip-color, var(--eun-color-grey-700, #484e61));
-  }
-
-  :host([appearance="default"]) #chip {
-    background: var(--_background);
-  }
-
-  :host([appearance="fill"]) #chip {
-    --_color: var(--chip-color, #fff);
-    background: var(--_backgroundFilled);
-    color: var(--_color);
-  }
-
-  :host([appearance="outline"]) #chip {
-    background: var(--eun-surface-color, #ffffff);
-    border: var(--chip-border-width, var(--eun-borderWidth-s, 1px)) solid
-      var(--_border-color);
-  }
-
-  :host([appearance="flat"]) #chip {
-    --_color: var(--chip-color, var(--eun-text-secondary, #484e61));
-    background: var(--eun-content-hover, #edeff0);
-    color: var(--_color);
+  :host {
+    /* Unlike a tag's transparent outline, a chip's sits on the surface. */
+    --_bg-outline: var(--eun-surface-color, #ffffff);
   }
 
   :host([size="s"]) {
     --_height: 26px;
     --_paddingInline: 4px;
-    --_fontSize: var(--eun-fontSize-xs, 12px);
+    --_fontSize: var(--eun-font-size-xs, 12px);
     --_gap: 4px;
     --_avatarFontSize: 10px;
     --_avatarInsetSize: 16px;
@@ -199,7 +24,7 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
   :host(:not([size])) {
     --_height: 30px;
     --_paddingInline: 6px;
-    --_fontSize: var(--eun-fontSize-s, 14px);
+    --_fontSize: var(--eun-font-size-s, 14px);
     --_gap: 6px;
     --_avatarFontSize: 11px;
     --_avatarInsetSize: 20px;
@@ -207,17 +32,17 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
   :host([size="l"]) {
     --_height: 38px;
     --_paddingInline: 6px;
-    --_fontSize: var(--eun-fontSize-m, 16px);
+    --_fontSize: var(--eun-font-size-m, 16px);
     --_gap: 8px;
     --_avatarFontSize: 12px;
     --_avatarInsetSize: 24px;
   }
 
-  :host([rounded]) {
-    --_borderRadius: var(--eun-borderRadius-xl, 999px);
+  :host {
+    --_radius: var(--eun-border-radius-s, 5px);
   }
-  :host(:not([rounded])) {
-    --_borderRadius: var(--chip-border-radius, var(--eun-borderRadius-s, 5px));
+  :host([rounded]) {
+    --_radius: var(--eun-border-radius-xl, 999px);
   }
 
   #chip {
@@ -226,20 +51,30 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
     box-sizing: border-box;
     max-width: 100%;
     height: var(--_height);
-    border-radius: var(--_borderRadius);
-    padding-inline-start: var(--_paddingInline);
-    padding-inline-end: var(--_paddingInline);
+    --_borderWidth: var(--chip-border-width, var(--eun-border-width-s, 1px));
+    background: var(--chip-background-color, var(--_bg));
+    /* Every appearance carries the same border box (transparent unless
+       drawn), taken out of the padding, so switching appearance or adding a
+       --chip-border-* never changes the chip's size. */
+    border: var(--_borderWidth) solid var(--chip-border-color, var(--_bd));
+    border-radius: var(--chip-border-radius, var(--_radius));
+    padding-inline-start: max(0px, calc(var(--_paddingInline) - var(--_borderWidth)));
+    padding-inline-end: max(0px, calc(var(--_paddingInline) - var(--_borderWidth)));
     font-size: var(--_fontSize);
     gap: var(--chip-gap, var(--_gap));
-    color: var(--_color);
-    font-weight: var(--eun-fontWeight-m, 500);
+    color: var(--chip-color, var(--_fg));
+    font-weight: var(--eun-font-weight-m, 500);
     box-shadow: var(--chip-box-shadow, none);
-    --_leadingIconColor: var(--chip-icon-color, var(--_color));
+    --_textColor: var(--chip-color, var(--_fg));
+    --_leadingIconColor: var(--chip-icon-color, var(--_textColor));
   }
 
   #chip[data-leading="icon"],
   #chip[data-leading="none"] {
-    padding-inline-start: calc(var(--_paddingInline) + 4px);
+    padding-inline-start: max(
+      0px,
+      calc(var(--_paddingInline) + 4px - var(--_borderWidth))
+    );
   }
 
   #chip[data-leading="none"] slot[name="icon"] {
@@ -265,12 +100,12 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
     width: var(--chip-avatar-size, var(--_avatarInsetSize, 20px));
     height: var(--chip-avatar-size, var(--_avatarInsetSize, 20px));
     font-size: var(--_avatarFontSize);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     line-height: 1;
-    color: var(--chip-avatar-color, #fff);
+    color: var(--chip-avatar-color, var(--_onSolid, #fff));
     background: var(
       --chip-avatar-background,
-      var(--_backgroundFilled, var(--eun-color-grey-500, #8d93aa))
+      var(--_solid, var(--eun-color-grey-500, #8d93aa))
     );
     overflow: hidden;
   }
@@ -280,7 +115,7 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
   }
 
   #avatar[data-shape="square"] {
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
   }
 
   #avatar img {
@@ -297,7 +132,7 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
 
   #delete {
     flex-shrink: 0;
-    --button-text: var(--_color);
+    --button-text: var(--_textColor);
     --button-focus-outline: var(
       --chip-delete-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -307,30 +142,30 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
   :host([disabled]) #chip {
     opacity: 0.6;
   }
-`,b=g;var f="eun-chip",m={s:14,m:16,l:18},_={s:12,m:14,l:16},r=class extends h(p){constructor(){super(...arguments);this.color="medium";this.appearance="default";this.hideIcon=!1;this.avatarAlt="";this.avatarShape="circle";this.rounded=!0;this.removable=!0;this.disabled=!1;this.labelText="";this.handleIconSlotChange=()=>{this.requestUpdate()};this.updateLabelText=()=>{this.labelText=this.textContent?.trim()??""};this.handleRemove=()=>{this.dispatchEvent(new v)}}connectedCallback(){super.connectedCallback(),this.updateLabelText()}getRemoveLabel(){let i=this.ariaLabelRemove??this.dictionary.chip.remove;return this.labelText?`${i} ${this.labelText}`:i}getSize(){return this.size??"m"}getIconName(){if(!this.hideIcon)return u(this.icon,this.severity)}hasIconSlotted(){return!this.hideIcon&&this.iconSlotEls.length>0}getLeadingKind(){return this.avatarSrc||this.avatarInitials?"avatar":this.getIconName()||this.hasIconSlotted()?"icon":"none"}renderLeadingVisual(){let i=this.getSize();if(this.avatarSrc)return o`
+`,b=[m,g];var f="eun-chip",x={s:14,m:16,l:18},S={s:12,m:14,l:16},e=class extends u(d){constructor(){super(...arguments);this.color="medium";this.fixedColor=!1;this.appearance="default";this.hideIcon=!1;this.avatarAlt="";this.avatarShape="circle";this.rounded=!0;this.removable=!0;this.disabled=!1;this.labelText="";this.handleIconSlotChange=()=>{this.requestUpdate()};this.updateLabelText=()=>{this.labelText=this.textContent?.trim()??""};this.handleRemove=()=>{this.dispatchEvent(new h)}}connectedCallback(){super.connectedCallback(),this.updateLabelText()}getRemoveLabel(){let r=this.ariaLabelRemove??this.dictionary.chip.remove;return this.labelText?`${r} ${this.labelText}`:r}getSize(){return this.size??"m"}getIconName(){if(!this.hideIcon)return v(this.icon,this.severity)}hasIconSlotted(){return!this.hideIcon&&this.iconSlotEls.length>0}getLeadingKind(){return this.avatarSrc||this.avatarInitials?"avatar":this.getIconName()||this.hasIconSlotted()?"icon":"none"}renderLeadingVisual(){let r=this.getSize();if(this.avatarSrc)return i`
         <span id="avatar" data-shape=${this.avatarShape}>
           <img src=${this.avatarSrc} alt=${this.avatarAlt} />
         </span>
-      `;if(this.avatarInitials)return o`
+      `;if(this.avatarInitials)return i`
         <span id="avatar" data-shape=${this.avatarShape} aria-hidden="true">
           ${this.avatarInitials}
         </span>
-      `;let c=this.getIconName();return o`
+      `;let o=this.getIconName();return i`
       <slot name="icon" @slotchange=${this.handleIconSlotChange}>
-        ${c?o`<eun-icon
+        ${o?i`<eun-icon
               id="icon"
               shape="round"
-              size=${m[i]}
-              name=${c}
-            ></eun-icon>`:t}
+              size=${x[r]}
+              name=${o}
+            ></eun-icon>`:n}
       </slot>
-    `}render(){let i=this.getSize();return o`
+    `}render(){let r=this.getSize();return i`
       <div id="chip" part="chip" data-leading=${this.getLeadingKind()}>
         ${this.renderLeadingVisual()}
         <span id="label"
           ><slot @slotchange=${this.updateLabelText}></slot
         ></span>
-        ${this.removable?o`
+        ${this.removable?i`
               <eun-button
                 id="delete"
                 appearance="ghost"
@@ -342,9 +177,9 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
               >
                 <eun-icon
                   name="close"
-                  size=${_[i]}
+                  size=${S[r]}
                 ></eun-icon>
               </eun-button>
-            `:t}
+            `:n}
       </div>
-    `}};r.styles=b,e([a({reflect:!0})],r.prototype,"color",2),e([a({reflect:!0})],r.prototype,"severity",2),e([a({reflect:!0})],r.prototype,"appearance",2),e([a({reflect:!0})],r.prototype,"size",2),e([a()],r.prototype,"icon",2),e([a({type:Boolean,attribute:"hide-icon"})],r.prototype,"hideIcon",2),e([a({attribute:"avatar-src"})],r.prototype,"avatarSrc",2),e([a({attribute:"avatar-alt"})],r.prototype,"avatarAlt",2),e([a({attribute:"avatar-shape"})],r.prototype,"avatarShape",2),e([a({attribute:"avatar-initials"})],r.prototype,"avatarInitials",2),e([a({type:Boolean,reflect:!0})],r.prototype,"rounded",2),e([a({type:Boolean,reflect:!0})],r.prototype,"removable",2),e([a({type:Boolean,reflect:!0})],r.prototype,"disabled",2),e([a({attribute:"aria-label-remove"})],r.prototype,"ariaLabelRemove",2),e([d()],r.prototype,"labelText",2),e([s({slot:"icon"})],r.prototype,"iconSlotEls",2),r=e([n(f)],r);export{r as EunomiaChip,f as EunomiaChipTagName};
+    `}};e.styles=b,a([t({reflect:!0})],e.prototype,"color",2),a([t({type:Boolean,reflect:!0,attribute:"fixed-color"})],e.prototype,"fixedColor",2),a([t({reflect:!0})],e.prototype,"severity",2),a([t({reflect:!0})],e.prototype,"appearance",2),a([t({reflect:!0})],e.prototype,"size",2),a([t()],e.prototype,"icon",2),a([t({type:Boolean,attribute:"hide-icon"})],e.prototype,"hideIcon",2),a([t({attribute:"avatar-src"})],e.prototype,"avatarSrc",2),a([t({attribute:"avatar-alt"})],e.prototype,"avatarAlt",2),a([t({attribute:"avatar-shape"})],e.prototype,"avatarShape",2),a([t({attribute:"avatar-initials"})],e.prototype,"avatarInitials",2),a([t({type:Boolean,reflect:!0})],e.prototype,"rounded",2),a([t({type:Boolean,reflect:!0})],e.prototype,"removable",2),a([t({type:Boolean,reflect:!0})],e.prototype,"disabled",2),a([t({attribute:"aria-label-remove"})],e.prototype,"ariaLabelRemove",2),a([p()],e.prototype,"labelText",2),a([c({slot:"icon"})],e.prototype,"iconSlotEls",2),e=a([l(f)],e);export{e as EunomiaChip,f as EunomiaChipTagName};