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

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

@@ -1,4 +1,4 @@
-import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk-LGLQ36QB.js";import{a as y}from"./chunks/chunk-UP4M7TER.js";import{a as h}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as b}from"./chunks/chunk-5EVP7YNE.js";import{a as i,f,g,h as a,l as d,n as s,p,s as m}from"./chunks/chunk-XH6NREVZ.js";var c=new Map;function S(r){let n=getComputedStyle(r).getPropertyValue("--toast-stack-gap").trim(),t=Number.parseFloat(n);return Number.isNaN(t)?8:t}function k(r){let n=c.get(r);if(!n||n.length===0)return;let t=0;for(let o=n.length-1;o>=0;o-=1){let l=n[o];l.el.style.setProperty("--_toastStackOffset",`${t}px`);let C=l.el.getBoundingClientRect().height;t+=C+S(l.el)}}function u(r,n){let t=c.get(r)??[];t.some(o=>o.el===n)||(t.push({position:r,el:n}),c.set(r,t)),k(r)}function v(r,n){let t=c.get(r);if(!t)return;let o=t.findIndex(l=>l.el===n);if(o!==-1){if(t.splice(o,1),t.length===0){c.delete(r);return}k(r)}}var T=g`
+import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk-GDBPWZN6.js";import{a as y}from"./chunks/chunk-UP4M7TER.js";import{a as b}from"./chunks/chunk-PPCHQG7P.js";import{a as h}from"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import{a as k}from"./chunks/chunk-62RLISRD.js";import"./chunks/chunk-QL5GSW2A.js";import{a as i,f,h as g,j as a,n as d,p as s,r as p,u as m}from"./chunks/chunk-YITWLCD3.js";var c=new Map;function T(r){let n=getComputedStyle(r).getPropertyValue("--toast-stack-gap").trim(),t=Number.parseFloat(n);return Number.isNaN(t)?8:t}function E(r){let n=c.get(r);if(!n||n.length===0)return;let t=0;for(let o=n.length-1;o>=0;o-=1){let l=n[o];l.el.style.setProperty("--_toastStackOffset",`${t}px`);let C=l.el.getBoundingClientRect().height;t+=C+T(l.el)}}function u(r,n){let t=c.get(r)??[];t.some(o=>o.el===n)||(t.push({position:r,el:n}),c.set(r,t)),E(r)}function v(r,n){let t=c.get(r);if(!t)return;let o=t.findIndex(l=>l.el===n);if(o!==-1){if(t.splice(o,1),t.length===0){c.delete(r);return}E(r)}}var w=g`
   :host {
     position: fixed;
     display: block;
@@ -10,14 +10,17 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
     z-index: var(--toast-z-index, 2147483000);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     --_gapEdge: var(--toast-viewport-gap, var(--eun-space-m, 16px));
-    --_transitionDuration: var(--toast-transition-duration, 0.3s);
+    --_transitionDuration: var(
+      --toast-transition-duration,
+      var(--eun-duration-xl, 300ms)
+    );
     --_baseX: var(--_enterX, 0px);
     --_baseY: var(--_enterY, 0px);
     visibility: hidden;
     opacity: 0;
     transition:
-      opacity var(--_transitionDuration) ease,
-      transform var(--_transitionDuration) ease,
+      opacity var(--_transitionDuration) var(--eun-easing-default, ease),
+      transform var(--_transitionDuration) var(--eun-easing-default, ease),
       visibility 0s linear var(--_transitionDuration);
   }
 
@@ -27,8 +30,8 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
     --_baseX: 0px;
     --_baseY: 0px;
     transition:
-      opacity var(--_transitionDuration) ease,
-      transform var(--_transitionDuration) ease,
+      opacity var(--_transitionDuration) var(--eun-easing-default, ease),
+      transform var(--_transitionDuration) var(--eun-easing-default, ease),
       visibility 0s linear 0s;
   }
 
@@ -53,7 +56,7 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
     --_stackSign: 1;
     --_enterY: -24px;
   }
-  :host([position="top-right"]) {
+  :host(:is([position="top-right"], :not([position]))) {
     top: var(--_gapEdge);
     right: var(--_gapEdge);
     --_stackSign: 1;
@@ -98,7 +101,7 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
     --_enterX: -24px;
     --_enterY: 0px;
   }
-  :host([position="top-right"][slide="horizontal"]),
+  :host(:is([position="top-right"], :not([position]))[slide="horizontal"]),
   :host([position="bottom-right"][slide="horizontal"]) {
     --_enterX: 24px;
     --_enterY: 0px;
@@ -122,25 +125,25 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
     --_titleColor: var(--eun-text-color, #071621);
   }
   :host([severity="info"]) {
-    --_background: var(--eun-color-info-30, #f0f7fa);
+    --_background: var(--eun-color-info-alpha-5, #097faf0d);
     --_backgroundFilled: var(--eun-color-info-100, #097faf);
     --_borderColor: var(--eun-color-info-100, #097faf);
     --_titleColor: var(--eun-color-info-100, #097faf);
   }
   :host([severity="success"]) {
-    --_background: var(--eun-color-success-30, #f1f9f4);
+    --_background: var(--eun-color-success-alpha-5, #1a99480d);
     --_backgroundFilled: var(--eun-color-success-100, #1a9948);
     --_borderColor: var(--eun-color-success-100, #1a9948);
     --_titleColor: var(--eun-color-success-100, #1a9948);
   }
   :host([severity="warning"]) {
-    --_background: var(--eun-color-warning-30, #fcf5f0);
+    --_background: var(--eun-color-warning-alpha-5, #c852070d);
     --_backgroundFilled: var(--eun-color-warning-100, #c85207);
     --_borderColor: var(--eun-color-warning-100, #c85207);
     --_titleColor: var(--eun-color-warning-100, #c85207);
   }
   :host([severity="critical"]) {
-    --_background: var(--eun-color-critical-30, #faf0f1);
+    --_background: var(--eun-color-critical-alpha-5, #aa00140d);
     --_backgroundFilled: var(--eun-color-critical-100, #aa0014);
     --_borderColor: var(--eun-color-critical-100, #aa0014);
     --_titleColor: var(--eun-color-critical-100, #aa0014);
@@ -166,8 +169,19 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
     /* Every appearance carries the same border box (transparent unless
        drawn), taken out of the padding, so switching appearance or adding a
        --toast-border-* never changes the size. */
-    border: var(--_bw) solid var(--toast-border-color, var(--_frame, transparent));
-    padding: var(--toast-padding, max(0px, calc(var(--eun-space-m, 16px) - var(--_bw))));
+    border: var(--_bw) solid
+      var(--toast-border-color, var(--_frame, transparent));
+    padding: var(
+      --toast-padding,
+      var(
+          --toast-padding-block,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        )
+        var(
+          --toast-padding-inline,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        )
+    );
     border-radius: var(--toast-border-radius, var(--eun-border-radius-m, 8px));
     box-shadow: var(
       --toast-shadow,
@@ -188,7 +202,7 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
     grid-column: 1;
   }
 
-  :host([appearance="default"]) #toast {
+  :host(:is([appearance="default"], :not([appearance]))) #toast {
     background: linear-gradient(
       to right,
       var(--toast-border-color, var(--_borderColor)) 4px,
@@ -200,7 +214,10 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
   }
   :host([appearance="outline"]) #toast {
     --_frame: var(--_borderColor);
-    background: var(--toast-background-color, var(--eun-surface-color, #ffffff));
+    background: var(
+      --toast-background-color,
+      var(--eun-surface-color, #ffffff)
+    );
   }
   :host([appearance="fill"]) #toast {
     background: var(--toast-background-color, var(--_backgroundFilled));
@@ -219,14 +236,20 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
   }
 
   slot[name="icon"] {
-    --icon-color: var(--toast-icon-color, var(--toast-color, var(--_titleColor)));
+    --icon-color: var(
+      --toast-icon-color,
+      var(--toast-color, var(--_titleColor))
+    );
     grid-column: 1;
     grid-row: 1;
     align-self: center;
     display: flex;
   }
   :host([appearance="fill"]) slot[name="icon"] {
-    --icon-color: var(--toast-icon-color, var(--toast-color, var(--_onFilled, #fff)));
+    --icon-color: var(
+      --toast-icon-color,
+      var(--toast-color, var(--_onFilled, #fff))
+    );
   }
 
   #description,
@@ -267,7 +290,13 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
 
   :host([closeable]) #toast {
     padding-right: calc(
-      var(--toast-padding, max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))) +
+      var(
+          --toast-padding,
+          var(
+            --toast-padding-inline,
+            max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))
+          )
+        ) +
         var(--eun-space-l, 32px)
     );
   }
@@ -294,7 +323,7 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
       transition-duration: 0.01ms;
     }
   }
-`,E=T;var w="eun-toast",F=600,e=class extends m{constructor(){super(...arguments);this.appearance="default";this.position="top-right";this.hideIcon=!1;this.closeable=!0;this.ariaLabelClose="Close";this.duration=5e3;this.open=!0;this.remainingMs=0;this.deadline=0;this.paused=!1;this.exitDispatched=!1;this.stacked=!1;this.handlePauseStart=()=>{this.isPersistent()||this.timerId===void 0||(this.paused=!0,this.remainingMs=Math.max(this.deadline-Date.now(),0),this.clearTimer())};this.handlePauseEnd=()=>{if(this.paused){if(this.paused=!1,this.remainingMs<=0){this.hide();return}this.armTimer()}};this.handleSlotChange=()=>{this.requestUpdate()};this.handleCloseClick=()=>{this.hide()}}connectedCallback(){super.connectedCallback(),this.open&&(this.setAttribute("entering",""),this.enteringFrameId=requestAnimationFrame(()=>{this.enteringFrameId=requestAnimationFrame(()=>{this.enteringFrameId=void 0,this.removeAttribute("entering")})}))}disconnectedCallback(){this.enteringFrameId!==void 0&&(cancelAnimationFrame(this.enteringFrameId),this.enteringFrameId=void 0),this.clearTimer(),this.clearExitDispatch(),this.leaveStack(),super.disconnectedCallback()}updated(t){if(super.updated(t),t.has("open")){this.open?(this.exitDispatched=!1,this.joinStack(),this.scheduleAutoClose()):(this.clearTimer(),this.leaveStack(),this.armExitDispatch());return}t.has("position")&&this.open&&this.stacked&&(v(t.get("position"),this),u(this.position,this)),(t.has("duration")||t.has("severity"))&&this.open&&!this.paused&&this.scheduleAutoClose()}isFixedPositioned(){return getComputedStyle(this).position==="fixed"}joinStack(){this.isFixedPositioned()&&(this.stacked=!0,u(this.position,this))}leaveStack(){this.stacked&&(this.stacked=!1,v(this.position,this))}show(){this.open=!0}hide(){this.open=!1}isPersistent(){return this.severity==="critical"||this.duration<=0}scheduleAutoClose(){this.clearTimer(),!this.isPersistent()&&(this.remainingMs=this.duration,this.paused=!1,this.armTimer())}armTimer(){this.deadline=Date.now()+this.remainingMs,this.timerId=setTimeout(()=>this.hide(),this.remainingMs)}clearTimer(){this.timerId!==void 0&&(clearTimeout(this.timerId),this.timerId=void 0)}armExitDispatch(){this.clearExitDispatch(),this.exitDispatched=!1;let t=()=>{this.exitDispatched||(this.exitDispatched=!0,this.clearExitDispatch(),this.dispatchEvent(new x))};this.exitTransitionListener=o=>{o.target===this&&o.propertyName==="opacity"&&t()},this.addEventListener("transitionend",this.exitTransitionListener),this.exitFallbackId=setTimeout(t,F)}clearExitDispatch(){this.exitTransitionListener&&(this.removeEventListener("transitionend",this.exitTransitionListener),this.exitTransitionListener=void 0),this.exitFallbackId!==void 0&&(clearTimeout(this.exitFallbackId),this.exitFallbackId=void 0)}getIconName(){return y(this.icon,this.severity,"severity")}shouldHideIcon(){return this.hideIcon?!0:this.iconSlotEls.length>0||this.severity?!1:!this.icon}shouldShowCloseButton(){return this.closeable||this.severity==="critical"}hasDescription(){return!!this.richText||this.descriptionSlotEls.length>0}hasAction(){return this.actionSlotEls.length>0}render(){let t=this.severity==="warning"||this.severity==="critical"?"alert":"status",o=this.shouldHideIcon();return s`
+`,S=w;var F="eun-toast",I=600,e=class extends k(m){constructor(){super(...arguments);this.appearance="default";this.position="top-right";this.hideIcon=!1;this.closeable=!0;this.duration=5e3;this.open=!0;this.remainingMs=0;this.deadline=0;this.paused=!1;this.exitDispatched=!1;this.stacked=!1;this.handlePauseStart=()=>{this.isPersistent()||this.timerId===void 0||(this.paused=!0,this.remainingMs=Math.max(this.deadline-Date.now(),0),this.clearTimer())};this.handlePauseEnd=()=>{if(this.paused){if(this.paused=!1,this.remainingMs<=0){this.hide();return}this.armTimer()}};this.handleSlotChange=()=>{this.requestUpdate()};this.handleCloseClick=()=>{this.hide()}}connectedCallback(){super.connectedCallback(),this.open&&(this.setAttribute("entering",""),this.enteringFrameId=requestAnimationFrame(()=>{this.enteringFrameId=requestAnimationFrame(()=>{this.enteringFrameId=void 0,this.removeAttribute("entering")})}))}disconnectedCallback(){this.enteringFrameId!==void 0&&(cancelAnimationFrame(this.enteringFrameId),this.enteringFrameId=void 0),this.clearTimer(),this.clearExitDispatch(),this.leaveStack(),super.disconnectedCallback()}updated(t){if(super.updated(t),t.has("open")){this.open?(this.exitDispatched=!1,this.joinStack(),this.scheduleAutoClose()):(this.clearTimer(),this.leaveStack(),this.armExitDispatch());return}t.has("position")&&this.open&&this.stacked&&(v(t.get("position"),this),u(this.position,this)),(t.has("duration")||t.has("severity"))&&this.open&&!this.paused&&this.scheduleAutoClose()}isFixedPositioned(){return getComputedStyle(this).position==="fixed"}joinStack(){this.isFixedPositioned()&&(this.stacked=!0,u(this.position,this))}leaveStack(){this.stacked&&(this.stacked=!1,v(this.position,this))}show(){this.open=!0}hide(){this.open=!1}isPersistent(){return this.severity==="critical"||this.duration<=0}scheduleAutoClose(){this.clearTimer(),!this.isPersistent()&&(this.remainingMs=this.duration,this.paused=!1,this.armTimer())}armTimer(){this.deadline=Date.now()+this.remainingMs,this.timerId=setTimeout(()=>this.hide(),this.remainingMs)}clearTimer(){this.timerId!==void 0&&(clearTimeout(this.timerId),this.timerId=void 0)}armExitDispatch(){this.clearExitDispatch(),this.exitDispatched=!1;let t=()=>{this.exitDispatched||(this.exitDispatched=!0,this.clearExitDispatch(),this.dispatchEvent(new x))};this.exitTransitionListener=o=>{o.target===this&&o.propertyName==="opacity"&&t()},this.addEventListener("transitionend",this.exitTransitionListener),this.exitFallbackId=setTimeout(t,I)}clearExitDispatch(){this.exitTransitionListener&&(this.removeEventListener("transitionend",this.exitTransitionListener),this.exitTransitionListener=void 0),this.exitFallbackId!==void 0&&(clearTimeout(this.exitFallbackId),this.exitFallbackId=void 0)}getIconName(){return y(this.icon,this.severity,"severity")}shouldHideIcon(){return this.hideIcon?!0:this.iconSlotEls.length>0||this.severity?!1:!this.icon}shouldShowCloseButton(){return this.closeable||this.severity==="critical"}hasDescription(){return!!this.richText||this.descriptionSlotEls.length>0}hasAction(){return this.actionSlotEls.length>0}render(){let t=this.severity==="warning"||this.severity==="critical"?"alert":"status",o=this.shouldHideIcon();return s`
       <div
         id="toast"
         role=${t}
@@ -310,7 +339,7 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
                 appearance="ghost"
                 rounded
                 size="xs"
-                aria-label=${this.ariaLabelClose}
+                aria-label=${this.closeLabel??this.dictionary.common.close}
                 @click=${this.handleCloseClick}
               >
                 <eun-icon name="close" size="16"></eun-icon>
@@ -340,4 +369,4 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
           <slot name="action" @slotchange=${this.handleSlotChange}></slot>
         </div>
       </div>
-    `}};e.styles=E,i([a({reflect:!0})],e.prototype,"severity",2),i([a({reflect:!0})],e.prototype,"appearance",2),i([a({reflect:!0})],e.prototype,"position",2),i([a({reflect:!0})],e.prototype,"slide",2),i([a()],e.prototype,"heading",2),i([a()],e.prototype,"icon",2),i([a({type:Boolean,attribute:"hide-icon"})],e.prototype,"hideIcon",2),i([a({attribute:"rich-text"})],e.prototype,"richText",2),i([a({type:Boolean,reflect:!0})],e.prototype,"closeable",2),i([a({attribute:"aria-label-close"})],e.prototype,"ariaLabelClose",2),i([a({type:Number})],e.prototype,"duration",2),i([a({type:Boolean,reflect:!0})],e.prototype,"open",2),i([d({slot:"description"})],e.prototype,"descriptionSlotEls",2),i([d({slot:"action"})],e.prototype,"actionSlotEls",2),i([d({slot:"icon"})],e.prototype,"iconSlotEls",2),e=i([f(w)],e);export{e as EunomiaToast,w as EunomiaToastTagName};
+    `}};e.styles=S,i([a({reflect:!0})],e.prototype,"severity",2),i([a({reflect:!0,useDefault:!0})],e.prototype,"appearance",2),i([a({reflect:!0,useDefault:!0})],e.prototype,"position",2),i([a({reflect:!0})],e.prototype,"slide",2),i([a()],e.prototype,"heading",2),i([a()],e.prototype,"icon",2),i([a({type:Boolean,attribute:"hide-icon"})],e.prototype,"hideIcon",2),i([a({attribute:"rich-text"})],e.prototype,"richText",2),i([a({type:Boolean,reflect:!0})],e.prototype,"closeable",2),i([a({attribute:"close-label"})],e.prototype,"closeLabel",2),i([a({type:Number})],e.prototype,"duration",2),i([a({type:Boolean,reflect:!0})],e.prototype,"open",2),i([d({slot:"description"})],e.prototype,"descriptionSlotEls",2),i([d({slot:"action"})],e.prototype,"actionSlotEls",2),i([d({slot:"icon"})],e.prototype,"iconSlotEls",2),e=i([f(F)],e);export{e as EunomiaToast,F as EunomiaToastTagName};

package/dist/cdn/components/eun-toggle-group.js

@@ -1,4 +1,4 @@
-import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk-SD2H5UDZ.js";import{a as $}from"./chunks/chunk-YYCEPZUN.js";import{a as T}from"./chunks/chunk-32DTNR52.js";import{a as h}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as p}from"./chunks/chunk-5EVP7YNE.js";import{a as s,b,c as w,d as y,f as k,g as E,h as c,i as C,j as x,l as _,n as d,p as v,s as I}from"./chunks/chunk-XH6NREVZ.js";var S=E`
+import{a as $}from"./chunks/chunk-SMTIDNGW.js";import{a as R}from"./chunks/chunk-YYCEPZUN.js";import{a as T}from"./chunks/chunk-3BMACIDO.js";import{a as p}from"./chunks/chunk-PPCHQG7P.js";import{a as A}from"./chunks/chunk-SD2H5UDZ.js";import{a as h}from"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import{a as s,b,c as w,d as y,f as k,h as _,j as c,k as E,l as x,n as C,p as d,r as v,u as I}from"./chunks/chunk-YITWLCD3.js";var B=_`
   :host {
     display: inline-flex;
     width: fit-content;
@@ -11,11 +11,21 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
       --toggle-group-arrows-color,
       var(--eun-surface-color, #ffffff)
     );
+    --_trackPaddingBlock: var(
+      --toggle-group-padding,
+      var(--toggle-group-padding-block, 4px)
+    );
+    --_trackPaddingInline: var(
+      --toggle-group-padding,
+      var(--toggle-group-padding-inline, 4px)
+    );
+    --_focusRoom: 0px;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     font-size: var(--eun-font-size-s, 14px);
   }
   :host([appearance="outline"]),
   :host([appearance="flat"]) {
+    --_focusRoom: 4px;
     --_arrowsColor: var(
       --toggle-group-arrows-color,
       var(--eun-surface-color, #ffffff)
@@ -41,7 +51,7 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
     display: inline-flex;
     max-width: 100%;
     gap: var(--toggle-group-gap, var(--eun-space-xs, 4px));
-    padding: var(--toggle-group-padding, 4px);
+    padding: var(--_trackPaddingBlock) var(--_trackPaddingInline);
     border-radius: var(
       --toggle-group-border-radius,
       var(--eun-border-radius-m, 8px)
@@ -71,13 +81,19 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
   }
   :host([appearance="outline"]) #scrollable,
   :host([appearance="flat"]) #scrollable {
-    padding: 0;
+    padding: var(--_focusRoom);
+    margin: calc(-1 * var(--_focusRoom));
+    max-width: calc(100% + 2 * var(--_focusRoom));
     background: var(--toggle-group-background, transparent);
     border: none;
   }
+  :host([full][appearance="outline"]) #scrollable,
+  :host([full][appearance="flat"]) #scrollable {
+    width: calc(100% + 2 * var(--_focusRoom));
+  }
   #arrows {
     position: absolute;
-    inset: 0;
+    inset: calc(-1 * var(--_focusRoom));
     z-index: 2;
     pointer-events: none;
   }
@@ -88,7 +104,8 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
     opacity: 0;
     min-width: 24px;
     pointer-events: none;
-    transition: opacity 0.2s ease;
+    transition: opacity var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
     display: flex;
     align-items: center;
   }
@@ -133,8 +150,8 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
   }
   #indicator {
     position: absolute;
-    top: var(--toggle-group-padding, 4px);
-    bottom: var(--toggle-group-padding, 4px);
+    top: var(--_trackPaddingBlock);
+    bottom: var(--_trackPaddingBlock);
     left: 0;
     width: 0;
     opacity: 0;
@@ -151,13 +168,14 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
       var(--eun-shadow-xs, rgba(7, 22, 33, 0.08) 0 1px 2px)
     );
     transition:
-      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-      width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-      opacity 0.15s ease-out;
+      transform var(--eun-duration-l, 250ms) cubic-bezier(0.4, 0, 0.2, 1),
+      width var(--eun-duration-l, 250ms) cubic-bezier(0.4, 0, 0.2, 1),
+      opacity var(--eun-duration-s, 150ms) var(--eun-easing-out, ease-out);
   }
   @media (prefers-reduced-motion: reduce) {
     #indicator {
-      transition: opacity 0.15s ease-out;
+      transition: opacity var(--eun-duration-s, 150ms)
+        var(--eun-easing-out, ease-out);
     }
   }
   button {
@@ -169,7 +187,7 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
     --_boxShadow: var(--toggle-group-shadow, none);
     --_boxShadow-hover: var(--toggle-group-shadow-hover, var(--_boxShadow));
     --_variantColorDefault: var(--eun-color-primary-500, #3d6fff);
-    --_variantTintDefault: var(--eun-color-primary-transparent, #3d6fff33);
+    --_variantTintDefault: var(--eun-color-primary-alpha-20, #3d6fff33);
     --_variantColor: var(
       --toggle-group-active-background,
       var(--_variantColorDefault)
@@ -187,7 +205,6 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
     flex-shrink: 0;
     gap: var(--eun-space-xs, 4px);
     font: inherit;
-    text-transform: capitalize;
     white-space: nowrap;
     cursor: pointer;
     border: none;
@@ -202,9 +219,10 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
     box-shadow: var(--_boxShadow);
     transition: var(
       --_toggleTransition,
-      background-color 0.2s ease-out,
-      color 0.2s ease-out,
-      box-shadow 0.2s ease-out
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out),
+      color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out)
     );
   }
   :host([full]) button,
@@ -225,19 +243,22 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
     outline-color: var(--eun-color-primary-500, #3d6fff);
     outline-offset: 2px;
     transition:
-      outline-color 0.2s ease-out,
-      outline-offset 0.2s ease-out;
+      outline-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      outline-offset var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out);
   }
   button[disabled] {
     cursor: not-allowed;
   }
-  :host([appearance="default"]) #scrollable:has(#indicator) button.active {
+  :host(:is([appearance="default"], :not([appearance])))
+    #scrollable:has(#indicator)
+    button.active {
     color: var(
       --toggle-group-active-color,
       var(--eun-color-on-primary-500, #ffffff)
     );
   }
-  :host([appearance="default"])
+  :host(:is([appearance="default"], :not([appearance])))
     #scrollable:not(:has(#indicator))
     button.active {
     background: var(
@@ -256,19 +277,19 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
 
   button[data-color="secondary"] {
     --_variantColorDefault: var(--eun-color-secondary-500, #e5a030);
-    --_variantTintDefault: var(--eun-color-secondary-transparent, #e5a03033);
+    --_variantTintDefault: var(--eun-color-secondary-alpha-20, #edbd6f33);
   }
   button[data-color="critical"] {
     --_variantColorDefault: var(--eun-color-critical-100, #aa0014);
-    --_variantTintDefault: var(--eun-color-critical-30, #faf0f1);
+    --_variantTintDefault: var(--eun-color-critical-alpha-5, #aa00140d);
   }
   button[data-color="success"] {
     --_variantColorDefault: var(--eun-color-success-100, #1a9948);
-    --_variantTintDefault: var(--eun-color-success-30, #f1f9f4);
+    --_variantTintDefault: var(--eun-color-success-alpha-5, #1a99480d);
   }
   button[data-color="warning"] {
     --_variantColorDefault: var(--eun-color-warning-100, #c85207);
-    --_variantTintDefault: var(--eun-color-warning-30, #fcf5f0);
+    --_variantTintDefault: var(--eun-color-warning-alpha-5, #c852070d);
   }
   :host([appearance="outline"]) button,
   :host([appearance="flat"]) button {
@@ -303,7 +324,7 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
     outline-color: var(--_variantColor);
     color: var(--toggle-group-hover-color, var(--_variantColor));
   }
-`;var m=28,B="eun-toggle-group",u,f,i=class extends R(T(I)){constructor(){super(...arguments);this.options=[];this.value=[];this.single=!1;this.appearance="default";this.full=!1;w(this,u);w(this,f,!1);this.settled=!1;this.debounceMoveIndicator=A(()=>this.moveIndicator(!0),50);this.handleSlotChange=()=>{this.settleAndSync(!1)}}get totalCount(){return this.options.length+(this.items?.length??0)}get exclusive(){return this.single||this.totalCount===2}get entries(){let e=Array.from(this.trackEl?.querySelectorAll("button")??[]),t=this.options.map((a,o)=>({value:a.value,disabled:!!this.disabled,element:e[o]})),r=(this.items??[]).map(a=>({value:a.value,disabled:!!this.disabled||!!a.disabled,element:a}));return[...t,...r]}connectedCallback(){super.connectedCallback?.(),y(this,u,new ResizeObserver(this.debounceMoveIndicator)),b(this,u).observe(this)}disconnectedCallback(){b(this,u)?.disconnect(),super.disconnectedCallback?.()}firstUpdated(e){super.firstUpdated(e),this.settleAndSync(!1).then(()=>Promise.all((this.items??[]).map(t=>this.whenItemReady(t)))).then(()=>{requestAnimationFrame(()=>requestAnimationFrame(()=>{this.settled=!0}))})}updated(e){super.updated(e),e.has("disabled")&&this.removeAttribute("tabindex"),(e.has("value")||e.has("options")||e.has("single")||e.has("appearance")||e.has("full"))&&this.settleAndSync(!0),e.has("disabled")&&this.disabled&&this.items?.forEach(t=>{t.disabled=!0})}whenItemsReady(){let e=new Set((this.items??[]).filter(t=>!customElements.get(t.tagName.toLowerCase())).map(t=>t.tagName.toLowerCase()));return e.size?Promise.all([...e].map(t=>customElements.whenDefined(t))):Promise.resolve()}settleAndSync(e){return this.whenItemsReady().then(()=>{this.seedInitialValue(),this.applyExclusiveDefault(),this.syncItems(),this.refreshIndicator(e),this.updateScroll()})}seedInitialValue(){if(b(this,f)||(y(this,f,!0),this.value.length))return;let e=(this.items??[]).filter(t=>t.checked).map(t=>t.value);e.length&&(this.value=this.exclusive?[e[0]]:e)}applyExclusiveDefault(){if(!this.exclusive||this.value.length)return;let[e]=this.entries;e&&(this.value=[e.value])}activateValue(e){if(!this.disabled){if(this.exclusive){if(this.value[0]===e)return;this.value=[e]}else this.value=this.value.includes(e)?this.value.filter(t=>t!==e):[...this.value,e];this.dispatchEvent(new $(this.value))}}activateItem(e){this.disabled||e.disabled||this.activateValue(e.value)}syncItems(){this.items?.length&&(this.items.forEach(e=>{e.checked=this.value.includes(e.value),e.toggleAttribute("exclusive",this.exclusive),e.setAttribute("appearance",this.appearance),e.toggleAttribute("full",this.full)}),this.exclusive&&this.applyRovingTabindex())}whenItemReady(e){return typeof e.updateComplete?.then=="function"?e.updateComplete:customElements.whenDefined(e.tagName.toLowerCase()).then(()=>e.updateComplete)}applyRovingTabindex(){let e=this.entries,t=Math.max(0,e.findIndex(r=>r.value===this.value[0]));e.forEach((r,a)=>{if(r.element.tagName==="BUTTON")return;let o=r.element,n=a===t?"0":"-1";this.whenItemReady(o).then(()=>{o.setAttribute("tabindex",n)})})}refreshIndicator(e){if(!this.exclusive)return;let t=()=>{this.appearance==="default"&&this.moveIndicator(e),this.revealActive(e)},r=this.entries.find(a=>a.value===this.value[0]);if(r&&r.element.tagName!=="BUTTON"){this.whenItemReady(r.element).then(t);return}t()}revealActive(e){let t=this.trackEl,r=this.entries.find(D=>D.value===this.value[0]);if(!t||!r||t.scrollWidth<=t.clientWidth)return;let a=t.getBoundingClientRect(),o=r.element.getBoundingClientRect(),n=o.left-a.left-t.clientLeft,l=n+o.width,g=0;n<m?g=n-m:l>t.clientWidth-m&&(g=l-(t.clientWidth-m)),g&&t.scrollBy({left:g,behavior:e?"smooth":"instant"})}moveIndicator(e){let t=this.indicatorEl;if(!this.exclusive||!t||!this.trackEl)return;let r=this.entries.find(l=>l.value===this.value[0]);if(!r){t.style.opacity="0";return}let a=this.trackEl.getBoundingClientRect(),o=r.element.getBoundingClientRect(),n=o.left-a.left-this.trackEl.clientLeft+this.trackEl.scrollLeft;e||(t.style.transition="none"),t.style.opacity="1",t.style.width=`${o.width}px`,t.style.transform=`translateX(${n}px)`,e||(t.getBoundingClientRect(),t.style.transition="")}exclusiveTabIndex(e,t){let r=this.value[0]===e,a=this.value.length===0;return r||a&&t===0?0:-1}handleKeydown(e){if(this.disabled)return;if(!this.exclusive){let l=e.target;this.items?.includes(l)&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.activateItem(l));return}let t=this.entries;if(!t.length)return;let r=t.findIndex(l=>l.value===this.value[0]),a,o;switch(e.key){case"ArrowRight":case"ArrowDown":a=1,o=r===-1?0:(r+1)%t.length;break;case"ArrowLeft":case"ArrowUp":a=-1,o=r===-1?t.length-1:(r-1+t.length)%t.length;break;case"Home":a=1,o=0;break;case"End":a=-1,o=t.length-1;break;default:return}e.preventDefault();for(let l=0;l<t.length&&t[o]?.disabled;l+=1)o=(o+a+t.length)%t.length;let n=t[o];!n||n.disabled||(this.activateValue(n.value),n.element.focus())}arrowVisible(e){return this.overflowState?["middle",e==="start"?"end":"start"].includes(String(this.overflowState)):!1}isOnOverflow(){let e=this.trackEl;return!!e&&e.scrollWidth>e.clientWidth}render(){let e=this.exclusive,t=e&&this.appearance==="default";return d`
+`;var m=28,D="eun-toggle-group",u,g,i=class extends $(T(I)){constructor(){super(...arguments);this.options=[];this.value=[];this.single=!1;this.appearance="default";this.full=!1;w(this,u);w(this,g,!1);this.settled=!1;this.debounceMoveIndicator=A(()=>this.moveIndicator(!0),50);this.handleSlotChange=()=>{this.settleAndSync(!1)}}get totalCount(){return this.options.length+(this.items?.length??0)}get exclusive(){return this.single||this.totalCount===2}get entries(){let e=Array.from(this.trackEl?.querySelectorAll("button")??[]),t=this.options.map((r,o)=>({value:r.value,disabled:!!this.disabled,element:e[o]})),a=(this.items??[]).map(r=>({value:r.value,disabled:!!this.disabled||!!r.disabled,element:r}));return[...t,...a]}connectedCallback(){super.connectedCallback?.(),y(this,u,new ResizeObserver(this.debounceMoveIndicator)),b(this,u).observe(this)}disconnectedCallback(){b(this,u)?.disconnect(),super.disconnectedCallback?.()}firstUpdated(e){super.firstUpdated(e),this.settleAndSync(!1).then(()=>Promise.all((this.items??[]).map(t=>this.whenItemReady(t)))).then(()=>{requestAnimationFrame(()=>requestAnimationFrame(()=>{this.settled=!0}))})}updated(e){super.updated(e),e.has("disabled")&&this.removeAttribute("tabindex"),(e.has("value")||e.has("options")||e.has("single")||e.has("appearance")||e.has("full"))&&this.settleAndSync(!0),e.has("disabled")&&this.disabled&&this.items?.forEach(t=>{t.disabled=!0})}whenItemsReady(){let e=new Set((this.items??[]).filter(t=>!customElements.get(t.tagName.toLowerCase())).map(t=>t.tagName.toLowerCase()));return e.size?Promise.all([...e].map(t=>customElements.whenDefined(t))):Promise.resolve()}settleAndSync(e){return this.whenItemsReady().then(()=>{this.seedInitialValue(),this.applyExclusiveDefault(),this.syncItems(),this.refreshIndicator(e),this.updateScroll()})}seedInitialValue(){if(b(this,g)||(y(this,g,!0),this.value.length))return;let e=(this.items??[]).filter(t=>t.checked).map(t=>t.value);e.length&&(this.value=this.exclusive?[e[0]]:e)}applyExclusiveDefault(){if(!this.exclusive||this.value.length)return;let[e]=this.entries;e&&(this.value=[e.value])}activateValue(e){if(!this.disabled){if(this.exclusive){if(this.value[0]===e)return;this.value=[e]}else this.value=this.value.includes(e)?this.value.filter(t=>t!==e):[...this.value,e];this.dispatchEvent(new R(this.value))}}activateItem(e){this.disabled||e.disabled||this.activateValue(e.value)}syncItems(){this.items?.length&&(this.items.forEach(e=>{e.checked=this.value.includes(e.value),e.toggleAttribute("exclusive",this.exclusive),e.setAttribute("appearance",this.appearance),e.toggleAttribute("full",this.full)}),this.exclusive&&this.applyRovingTabindex())}whenItemReady(e){return typeof e.updateComplete?.then=="function"?e.updateComplete:customElements.whenDefined(e.tagName.toLowerCase()).then(()=>e.updateComplete)}applyRovingTabindex(){let e=this.entries,t=Math.max(0,e.findIndex(a=>a.value===this.value[0]));e.forEach((a,r)=>{if(a.element.tagName==="BUTTON")return;let o=a.element,n=r===t?"0":"-1";this.whenItemReady(o).then(()=>{o.setAttribute("tabindex",n)})})}refreshIndicator(e){if(!this.exclusive)return;let t=()=>{this.appearance==="default"&&this.moveIndicator(e),this.revealActive(e)},a=this.entries.find(r=>r.value===this.value[0]);if(a&&a.element.tagName!=="BUTTON"){this.whenItemReady(a.element).then(t);return}t()}revealActive(e){let t=this.trackEl,a=this.entries.find(S=>S.value===this.value[0]);if(!t||!a||t.scrollWidth<=t.clientWidth)return;let r=t.getBoundingClientRect(),o=a.element.getBoundingClientRect(),n=o.left-r.left-t.clientLeft,l=n+o.width,f=0;n<m?f=n-m:l>t.clientWidth-m&&(f=l-(t.clientWidth-m)),f&&t.scrollBy({left:f,behavior:e?"smooth":"instant"})}moveIndicator(e){let t=this.indicatorEl;if(!this.exclusive||!t||!this.trackEl)return;let a=this.entries.find(l=>l.value===this.value[0]);if(!a){t.style.opacity="0";return}let r=this.trackEl.getBoundingClientRect(),o=a.element.getBoundingClientRect(),n=o.left-r.left-this.trackEl.clientLeft+this.trackEl.scrollLeft;e||(t.style.transition="none"),t.style.opacity="1",t.style.width=`${o.width}px`,t.style.transform=`translateX(${n}px)`,e||(t.getBoundingClientRect(),t.style.transition="")}exclusiveTabIndex(e,t){let a=this.value[0]===e,r=this.value.length===0;return a||r&&t===0?0:-1}handleKeydown(e){if(this.disabled)return;if(!this.exclusive){let l=e.target;this.items?.includes(l)&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.activateItem(l));return}let t=this.entries;if(!t.length)return;let a=t.findIndex(l=>l.value===this.value[0]),r,o;switch(e.key){case"ArrowRight":case"ArrowDown":r=1,o=a===-1?0:(a+1)%t.length;break;case"ArrowLeft":case"ArrowUp":r=-1,o=a===-1?t.length-1:(a-1+t.length)%t.length;break;case"Home":r=1,o=0;break;case"End":r=-1,o=t.length-1;break;default:return}e.preventDefault();for(let l=0;l<t.length&&t[o]?.disabled;l+=1)o=(o+r+t.length)%t.length;let n=t[o];!n||n.disabled||(this.activateValue(n.value),n.element.focus())}arrowVisible(e){return this.overflowState?["middle",e==="start"?"end":"start"].includes(String(this.overflowState)):!1}isOnOverflow(){let e=this.trackEl;return!!e&&e.scrollWidth>e.clientWidth}render(){let e=this.exclusive,t=e&&this.appearance==="default";return d`
       <div id="scrollable-wrapper">
         <div
           id="scrollable"
@@ -312,7 +333,7 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
           part="track"
           aria-label=${this.ariaLabel??v}
           aria-disabled=${this.disabled?"true":"false"}
-          @keydown=${r=>this.handleKeydown(r)}
+          @keydown=${a=>this.handleKeydown(a)}
           @scroll=${this.updateScroll}
         >
           ${t?d`<span
@@ -320,22 +341,22 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
                 part="indicator"
                 aria-hidden="true"
               ></span>`:v}
-          ${this.options.map((r,a)=>{let o=this.value.includes(r.value),n=!!r.icon&&!r.showLabel;return d`
+          ${this.options.map((a,r)=>{let o=this.value.includes(a.value),n=!!a.icon&&!a.showLabel;return d`
               <button
                 type="button"
                 class=${h({active:o,"icon-only":n})}
-                data-value=${r.value}
-                data-color=${p(r.color)}
+                data-value=${a.value}
+                data-color=${p(a.color)}
                 role=${e?"radio":"checkbox"}
                 aria-checked=${o?"true":"false"}
-                aria-label=${p(n?r.label:void 0)}
-                title=${p(n?r.label:void 0)}
-                tabindex=${p(e?this.exclusiveTabIndex(r.value,a):void 0)}
+                aria-label=${p(n?a.label:void 0)}
+                title=${p(n?a.label:void 0)}
+                tabindex=${p(e?this.exclusiveTabIndex(a.value,r):void 0)}
                 ?disabled=${this.disabled}
-                @click=${()=>this.activateValue(r.value)}
+                @click=${()=>this.activateValue(a.value)}
               >
-                ${r.icon?d`<eun-icon name=${r.icon} size="16"></eun-icon>`:v}
-                ${n?v:r.label}
+                ${a.icon?d`<eun-icon name=${a.icon} size="16"></eun-icon>`:v}
+                ${n?v:a.label}
               </button>
             `})}
           <slot @slotchange=${this.handleSlotChange}></slot>
@@ -355,4 +376,4 @@ import{a as R}from"./chunks/chunk-EST3M4AO.js";import{a as A}from"./chunks/chunk
           </arrow-container>
         </div>
       </div>
-    `}};u=new WeakMap,f=new WeakMap,i.styles=[S],s([c({type:Array,reflect:!0,converter:{toAttribute:e=>e?.length?JSON.stringify(e):null}})],i.prototype,"options",2),s([c({type:Array,reflect:!0,converter:{toAttribute:e=>e?.length?JSON.stringify(e):null}})],i.prototype,"value",2),s([c({type:Boolean,reflect:!0})],i.prototype,"single",2),s([c({reflect:!0})],i.prototype,"appearance",2),s([c({type:Boolean,reflect:!0})],i.prototype,"full",2),s([_()],i.prototype,"items",2),s([x("#scrollable")],i.prototype,"trackEl",2),s([x("#indicator")],i.prototype,"indicatorEl",2),s([C()],i.prototype,"settled",2),i=s([k(B)],i);export{i as EunomiaToggleGroup,B as EunomiaToggleGroupTagName};
+    `}};u=new WeakMap,g=new WeakMap,i.styles=[B],s([c({type:Array,reflect:!0,converter:{toAttribute:e=>e?.length?JSON.stringify(e):null}})],i.prototype,"options",2),s([c({type:Array,reflect:!0,converter:{toAttribute:e=>e?.length?JSON.stringify(e):null}})],i.prototype,"value",2),s([c({type:Boolean,reflect:!0})],i.prototype,"single",2),s([c({reflect:!0,useDefault:!0})],i.prototype,"appearance",2),s([c({type:Boolean,reflect:!0})],i.prototype,"full",2),s([C()],i.prototype,"items",2),s([x("#scrollable")],i.prototype,"trackEl",2),s([x("#indicator")],i.prototype,"indicatorEl",2),s([E()],i.prototype,"settled",2),i=s([k(D)],i);export{i as EunomiaToggleGroup,D as EunomiaToggleGroupTagName};

package/dist/cdn/components/eun-toggle-item.js

@@ -1,4 +1,4 @@
-import{a as s}from"./chunks/chunk-32DTNR52.js";import{a as e,f as i,g as n,h as r,n as t,p as l,s as c}from"./chunks/chunk-XH6NREVZ.js";var u=n`
+import{a as s}from"./chunks/chunk-3BMACIDO.js";import{a as e,f as i,h as n,j as r,p as a,r as l,u as c}from"./chunks/chunk-YITWLCD3.js";var u=n`
   :host {
     --_hoverColor: var(
       --toggle-group-hover-color,
@@ -25,7 +25,6 @@ import{a as s}from"./chunks/chunk-32DTNR52.js";import{a as e,f as i,g as n,h as
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     font-size: var(--eun-font-size-s, 14px);
     font-weight: var(--eun-font-weight-m, 500);
-    text-transform: capitalize;
     white-space: nowrap;
     cursor: pointer;
     color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
@@ -37,9 +36,10 @@ import{a as s}from"./chunks/chunk-32DTNR52.js";import{a as e,f as i,g as n,h as
     box-shadow: var(--_boxShadow);
     transition: var(
       --_toggleTransition,
-      background-color 0.2s ease-out,
-      color 0.2s ease-out,
-      box-shadow 0.2s ease-out
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out),
+      color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out)
     );
   }
   :host(:not([disabled]):hover) #item {
@@ -53,9 +53,10 @@ import{a as s}from"./chunks/chunk-32DTNR52.js";import{a as e,f as i,g as n,h as
     outline-color: var(--eun-color-primary-500, #3d6fff);
     outline-offset: 2px;
     transition:
-      outline-color 0.2s ease-out,
-      border-color 0.2s ease-out,
-      outline-offset 0.2s ease-out;
+      outline-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      outline-offset var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out);
   }
   :host([disabled]) #item {
     cursor: not-allowed;
@@ -79,7 +80,7 @@ import{a as s}from"./chunks/chunk-32DTNR52.js";import{a as e,f as i,g as n,h as
 
   :host {
     --_variantColorDefault: var(--eun-color-primary-500, #3d6fff);
-    --_variantTintDefault: var(--eun-color-primary-transparent, #3d6fff33);
+    --_variantTintDefault: var(--eun-color-primary-alpha-20, #3d6fff33);
     --_variantColor: var(
       --toggle-group-active-background,
       var(--_variantColorDefault)
@@ -93,19 +94,19 @@ import{a as s}from"./chunks/chunk-32DTNR52.js";import{a as e,f as i,g as n,h as
   }
   :host([color="secondary"]) {
     --_variantColorDefault: var(--eun-color-secondary-500, #e5a030);
-    --_variantTintDefault: var(--eun-color-secondary-transparent, #e5a03033);
+    --_variantTintDefault: var(--eun-color-secondary-alpha-20, #edbd6f33);
   }
   :host([color="critical"]) {
     --_variantColorDefault: var(--eun-color-critical-100, #aa0014);
-    --_variantTintDefault: var(--eun-color-critical-30, #faf0f1);
+    --_variantTintDefault: var(--eun-color-critical-alpha-5, #aa00140d);
   }
   :host([color="success"]) {
     --_variantColorDefault: var(--eun-color-success-100, #1a9948);
-    --_variantTintDefault: var(--eun-color-success-30, #f1f9f4);
+    --_variantTintDefault: var(--eun-color-success-alpha-5, #1a99480d);
   }
   :host([color="warning"]) {
     --_variantColorDefault: var(--eun-color-warning-100, #c85207);
-    --_variantTintDefault: var(--eun-color-warning-30, #fcf5f0);
+    --_variantTintDefault: var(--eun-color-warning-alpha-5, #c852070d);
   }
   :host([appearance="outline"]) #item,
   :host([appearance="flat"]) #item {
@@ -144,10 +145,10 @@ import{a as s}from"./chunks/chunk-32DTNR52.js";import{a as e,f as i,g as n,h as
   :host([appearance="outline"]:focus-visible) #item {
     border-color: var(--_variantColor);
   }
-`;var v="eun-toggle-item",d="eun-toggle-group",o=class extends s(c){constructor(){super(...arguments);this.checked=!1;this.activate=()=>{this.disabled||this.closest(d)?.activateItem(this)}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","checkbox"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("click",this.activate)}disconnectedCallback(){this.removeEventListener("click",this.activate),super.disconnectedCallback?.()}updated(a){super.updated(a),a.has("checked")&&this.setAttribute("aria-checked",String(this.checked))}render(){return t`
+`;var v="eun-toggle-item",d="eun-toggle-group",o=class extends s(c){constructor(){super(...arguments);this.checked=!1;this.activate=()=>{this.disabled||this.closest(d)?.activateItem(this)}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","checkbox"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("click",this.activate)}disconnectedCallback(){this.removeEventListener("click",this.activate),super.disconnectedCallback?.()}updated(t){super.updated(t),t.has("checked")&&this.setAttribute("aria-checked",String(this.checked))}render(){return a`
       <div id="item" part="item">
         <slot name="icon">
-          ${this.icon?t`<eun-icon name=${this.icon} size="16"></eun-icon>`:l}
+          ${this.icon?a`<eun-icon name=${this.icon} size="16"></eun-icon>`:l}
         </slot>
         <slot></slot>
       </div>

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

@@ -1,4 +1,4 @@
-import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk-32DTNR52.js";import{a as r,f as l,g as s,h as t,n as a,s as n}from"./chunks/chunk-XH6NREVZ.js";var i=s`
+import{a as i}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk-3BMACIDO.js";import{a as r,f as n,h as l,j as t,p as a,u as s}from"./chunks/chunk-YITWLCD3.js";var c=l`
   :host {
     --_hoverColor: var(
       --toggle-hover-color,
@@ -21,11 +21,11 @@ import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     font-size: var(--eun-font-size-s, 14px);
     font-weight: var(--eun-font-weight-m, 500);
-    text-transform: capitalize;
     color: var(--toggle-color, var(--eun-color-grey-600, #666e8a));
     padding: var(
       --toggle-padding,
-      calc(var(--eun-space-xs, 4px) * 1.5) var(--eun-space-m, 16px)
+      var(--toggle-padding-block, calc(var(--eun-space-xs, 4px) * 1.5))
+        var(--toggle-padding-inline, var(--eun-space-m, 16px))
     );
     outline: 2px solid transparent;
     border-radius: var(--toggle-border-radius, var(--eun-border-radius-m, 8px));
@@ -34,10 +34,11 @@ import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk
       var(--toggle-border-color, var(--eun-color-grey-300, #dee0e7));
     box-shadow: var(--_boxShadow);
     transition:
-      background-color 0.2s ease-out,
-      color 0.2s ease-out,
-      border-color 0.2s ease-out,
-      box-shadow 0.2s ease-out;
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out),
+      color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
   :host(:not([disabled]):hover) #toggle {
     box-shadow: var(--_boxShadow-hover);
@@ -55,8 +56,9 @@ import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk
     outline-color: var(--eun-color-primary-500, #3d6fff);
     outline-offset: 2px;
     transition:
-      outline-color 0.2s ease-out,
-      outline-offset 0.2s ease-out;
+      outline-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      outline-offset var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out);
   }
   :host([disabled]) #toggle {
     cursor: not-allowed;
@@ -105,4 +107,4 @@ import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk
   :host(:not([checked])) ::slotted([slot="checked"]) {
     display: none;
   }
-`;var g="eun-toggle",o=class extends d(n){constructor(){super(...arguments);this.checked=!1;this.swap=!1;this.appearance="default";this.toggle=()=>{this.disabled||(this.checked=!this.checked,this.dispatchEvent(new c(this.checked)))};this.handleKeydown=e=>{e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.toggle())}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","button"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("click",this.toggle),this.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback?.()}updated(e){super.updated(e),e.has("checked")&&this.setAttribute("aria-pressed",String(this.checked))}render(){let e=this.swap?a`<slot name="unchecked"></slot><slot name="checked"></slot>`:a`<slot></slot>`;return a`<div id="toggle" part="toggle">${e}</div>`}};o.styles=[i],r([t({type:Boolean,reflect:!0})],o.prototype,"checked",2),r([t({type:Boolean,reflect:!0})],o.prototype,"swap",2),r([t({reflect:!0})],o.prototype,"appearance",2),o=r([l(g)],o);export{o as EunomiaToggle,g as EunomiaToggleTagName};
+`;var g="eun-toggle",o=class extends d(s){constructor(){super(...arguments);this.checked=!1;this.swap=!1;this.appearance="default";this.toggle=()=>{this.disabled||(this.checked=!this.checked,this.dispatchEvent(new i(this.checked)))};this.handleKeydown=e=>{e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.toggle())}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","button"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("click",this.toggle),this.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback?.()}updated(e){super.updated(e),e.has("checked")&&this.setAttribute("aria-pressed",String(this.checked))}render(){let e=this.swap?a`<slot name="unchecked"></slot><slot name="checked"></slot>`:a`<slot></slot>`;return a`<div id="toggle" part="toggle">${e}</div>`}};o.styles=[c],r([t({type:Boolean,reflect:!0})],o.prototype,"checked",2),r([t({type:Boolean,reflect:!0})],o.prototype,"swap",2),r([t({reflect:!0,useDefault:!0})],o.prototype,"appearance",2),o=r([n(g)],o);export{o as EunomiaToggle,g as EunomiaToggleTagName};