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

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-5TH3P53V.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-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`
   :host {
     position: fixed;
     display: block;
@@ -116,16 +116,10 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
   }
 
   :host(:not([severity])) {
-    --_background: var(
-      --toast-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
+    --_background: var(--eun-color-grey-100, #f7f8fa);
     --_backgroundFilled: var(--_background);
-    --_borderColor: var(
-      --toast-border-color,
-      var(--eun-color-grey-300, #dee0e7)
-    );
-    --_titleColor: var(--toast-color, var(--eun-text-color, #071621));
+    --_borderColor: var(--eun-color-grey-300, #dee0e7);
+    --_titleColor: var(--eun-text-color, #071621);
   }
   :host([severity="info"]) {
     --_background: var(--eun-color-info-30, #f0f7fa);
@@ -152,6 +146,7 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
     --_titleColor: var(--eun-color-critical-100, #aa0014);
   }
   :host([severity="neutral"]) {
+    --_onFilled: var(--eun-color-grey-0, #ffffff);
     --_background: var(--eun-color-grey-200, #ecedf0);
     --_backgroundFilled: var(--eun-color-grey-700, #484e61);
     --_borderColor: var(--eun-color-grey-700, #484e61);
@@ -167,8 +162,13 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
     row-gap: var(--toast-row-gap, var(--eun-space-s, 8px));
     width: 100%;
     box-sizing: border-box;
-    padding: var(--toast-padding, var(--eun-space-m, 16px));
-    border-radius: var(--toast-border-radius, var(--eun-borderRadius-m, 8px));
+    --_bw: var(--toast-border-width, var(--eun-border-width-s, 1px));
+    /* 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-radius: var(--toast-border-radius, var(--eun-border-radius-m, 8px));
     box-shadow: var(
       --toast-shadow,
       var(
@@ -177,7 +177,7 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
         rgba(0, 0, 0, 0.05) 0 4px 6px -2px
       )
     );
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     --_contentColor: var(--toast-content-color, var(--eun-text-color, #071621));
     color: var(--_contentColor);
   }
@@ -191,42 +191,42 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
   :host([appearance="default"]) #toast {
     background: linear-gradient(
       to right,
-      var(--_borderColor) 4px,
-      var(--eun-surface-color, #ffffff) 4px
+      var(--toast-border-color, var(--_borderColor)) 4px,
+      var(--toast-background-color, var(--eun-surface-color, #ffffff)) 4px
     );
   }
   :host([appearance="flat"]) #toast {
-    background: var(--_background);
+    background: var(--toast-background-color, var(--_background));
   }
   :host([appearance="outline"]) #toast {
-    background: var(--eun-surface-color, #ffffff);
-    border: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    --_frame: var(--_borderColor);
+    background: var(--toast-background-color, var(--eun-surface-color, #ffffff));
   }
   :host([appearance="fill"]) #toast {
-    background: var(--_backgroundFilled);
-    --_contentColor: var(--toast-content-color, #fff);
+    background: var(--toast-background-color, var(--_backgroundFilled));
+    --_contentColor: var(--toast-content-color, var(--_onFilled, #fff));
   }
 
   #heading {
-    color: var(--_titleColor);
-    font-weight: var(--eun-fontWeight-l, 700);
+    color: var(--toast-color, var(--_titleColor));
+    font-weight: var(--eun-font-weight-l, 700);
     grid-column: 2;
     grid-row: 1;
     align-self: center;
   }
   :host([appearance="fill"]) #heading {
-    color: #fff;
+    color: var(--toast-color, var(--_onFilled, #fff));
   }
 
   slot[name="icon"] {
-    --icon-color: var(--toast-icon-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, #fff);
+    --icon-color: var(--toast-icon-color, var(--toast-color, var(--_onFilled, #fff)));
   }
 
   #description,
@@ -244,7 +244,10 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
     margin-block-end: 0;
   }
   #rich-text a {
-    color: var(--_titleColor);
+    color: var(--toast-color, var(--_titleColor));
+  }
+  :host([appearance="fill"]) #rich-text a {
+    color: var(--toast-color, var(--_onFilled, #fff));
   }
 
   ::slotted([slot="description"]) {
@@ -255,16 +258,17 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
     display: inline-block;
   }
   :host([appearance="fill"]) ::slotted([slot="action"]) {
-    --link-color: #fff;
-    --link-color-hover: #fff;
-    --link-color-visited: #fff;
-    --link-color-visited-hover: #fff;
-    --button-text: #fff;
+    --link-color: var(--_onFilled, #fff);
+    --link-color-hover: var(--_onFilled, #fff);
+    --link-color-visited: var(--_onFilled, #fff);
+    --link-color-visited-hover: var(--_onFilled, #fff);
+    --button-text: var(--_onFilled, #fff);
   }
 
   :host([closeable]) #toast {
     padding-right: calc(
-      var(--toast-padding, var(--eun-space-s, 8px)) + var(--eun-space-l, 32px)
+      var(--toast-padding, max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))) +
+        var(--eun-space-l, 32px)
     );
   }
   #close-button {
@@ -273,7 +277,7 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
     display: flex;
     top: var(--eun-space-s, 8px);
     right: var(--eun-space-s, 8px);
-    --button-text: var(--_titleColor);
+    --button-text: var(--toast-color, var(--_titleColor));
     --button-focus-outline: var(
       --toast-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -282,7 +286,7 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
     justify-content: center;
   }
   :host([appearance="fill"]) #close-button {
-    --button-text: #fff;
+    --button-text: var(--toast-color, var(--_onFilled, #fff));
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -290,7 +294,7 @@ import{a as x}from"./chunks/chunk-YQU6RVX4.js";import{e as _}from"./chunks/chunk
       transition-duration: 0.01ms;
     }
   }
-`,E=T;var I="eun-toast",w=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,w)}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`
+`,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`
       <div
         id="toast"
         role=${t}
@@ -336,4 +340,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(I)],e);export{e as EunomiaToast,I as EunomiaToastTagName};
+    `}};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};

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

@@ -1,34 +1,131 @@
-import{a as T}from"./chunks/chunk-SD2H5UDZ.js";import{a as C}from"./chunks/chunk-ONYUXQV2.js";import{a as I}from"./chunks/chunk-T7WABJEJ.js";import{a as E}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as p}from"./chunks/chunk-5EVP7YNE.js";import{a as s,b as g,c as f,d as b,f as y,g as x,h as c,j as m,l as k,n as d,p as v,s as w}from"./chunks/chunk-XH6NREVZ.js";var $=x`
+import{a as $}from"./chunks/chunk-EST3M4AO.js";import{a as T}from"./chunks/chunk-SD2H5UDZ.js";import{a as A}from"./chunks/chunk-YYCEPZUN.js";import{a as _}from"./chunks/chunk-T7WABJEJ.js";import{a as b}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as p}from"./chunks/chunk-5EVP7YNE.js";import{a as s,b as g,c as w,d as y,f as k,g as E,h as c,j as x,l as C,n as d,p as v,s as I}from"./chunks/chunk-XH6NREVZ.js";var R=E`
   :host {
     display: inline-flex;
+    width: fit-content;
+    max-width: 100%;
+    --_arrowsColor: var(
+      --toggle-group-arrows-color,
+      var(--eun-surface-sunken, #f7f8fa)
+    );
+    --_arrowsBase: var(
+      --toggle-group-arrows-color,
+      var(--eun-surface-color, #ffffff)
+    );
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
+  }
+  :host([appearance="outline"]),
+  :host([appearance="flat"]) {
+    --_arrowsColor: var(
+      --toggle-group-arrows-color,
+      var(--eun-surface-color, #ffffff)
+    );
+  }
+  :host([full]) {
+    display: flex;
+    width: 100%;
   }
   :host([disabled]) {
     opacity: 0.5;
   }
-  #track {
+  #scrollable-wrapper {
+    position: relative;
+    min-width: 0;
+  }
+  :host([full]) #scrollable-wrapper {
+    width: 100%;
+  }
+  #scrollable {
     position: relative;
+    box-sizing: border-box;
     display: inline-flex;
+    max-width: 100%;
     gap: var(--toggle-group-gap, var(--eun-space-xs, 4px));
     padding: var(--toggle-group-padding, 4px);
     border-radius: var(
       --toggle-group-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     background: var(
       --toggle-group-background,
-      var(--eun-color-grey-100, #f7f8fa)
+      var(--eun-surface-sunken, #f7f8fa)
     );
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--toggle-group-border-color, var(--eun-color-grey-300, #dee0e7));
+    scrollbar-width: none;
+    overflow-x: hidden;
   }
-  :host([appearance="outline"]) #track,
-  :host([appearance="flat"]) #track {
+  #scrollable::-webkit-scrollbar {
+    display: none;
+  }
+  :has(#arrows arrow-container.visible) #scrollable {
+    overflow-x: scroll;
+  }
+  :host([full]) #scrollable {
+    width: 100%;
+  }
+  :host([appearance="outline"]) #scrollable,
+  :host([appearance="flat"]) #scrollable {
     padding: 0;
-    background: transparent;
+    background: var(--toggle-group-background, transparent);
     border: none;
   }
+  #arrows {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    pointer-events: none;
+  }
+  arrow-container {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    opacity: 0;
+    min-width: 24px;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    display: flex;
+    align-items: center;
+  }
+  arrow-container.visible {
+    opacity: 1;
+    pointer-events: all;
+    cursor: pointer;
+  }
+  arrow-container:nth-of-type(1) {
+    left: 0;
+    justify-content: flex-start;
+    background:
+      linear-gradient(
+        90deg,
+        var(--_arrowsColor) 0%,
+        var(--_arrowsColor) 60%,
+        transparent 100%
+      ),
+      linear-gradient(
+        90deg,
+        var(--_arrowsBase) 0%,
+        var(--_arrowsBase) 60%,
+        transparent 100%
+      );
+  }
+  arrow-container:nth-of-type(2) {
+    right: 0;
+    justify-content: flex-end;
+    background:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--_arrowsColor) 40%,
+        var(--_arrowsColor) 100%
+      ),
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--_arrowsBase) 40%,
+        var(--_arrowsBase) 100%
+      );
+  }
   #indicator {
     position: absolute;
     top: var(--toggle-group-padding, 4px);
@@ -38,7 +135,7 @@ import{a as T}from"./chunks/chunk-SD2H5UDZ.js";import{a as C}from"./chunks/chunk
     opacity: 0;
     z-index: 0;
     border-radius: calc(
-      var(--toggle-group-border-radius, var(--eun-borderRadius-m, 8px)) - 3px
+      var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
     );
     background: var(
       --toggle-group-active-background,
@@ -66,27 +163,36 @@ import{a as T}from"./chunks/chunk-SD2H5UDZ.js";import{a as C}from"./chunks/chunk
     --_hoverBackground: var(--toggle-group-hover-background, transparent);
     --_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);
     --_variantColor: var(
       --toggle-group-active-background,
-      var(--eun-color-primary-500, #3d6fff)
+      var(--_variantColorDefault)
+    );
+    --_variantTint: var(--_customTint, var(--_variantTintDefault));
+    --_customTint: color-mix(
+      in srgb,
+      var(--toggle-group-active-background) 15%,
+      transparent
     );
-    --_variantTint: var(--eun-color-primary-transparent, #3d6fff33);
     position: relative;
     z-index: 1;
     display: inline-flex;
     align-items: center;
+    flex-shrink: 0;
     gap: var(--eun-space-xs, 4px);
     font: inherit;
     text-transform: capitalize;
+    white-space: nowrap;
     cursor: pointer;
     border: none;
     background: transparent;
     color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
     padding: calc(var(--eun-space-xs, 4px) * 1.5) var(--eun-space-m, 16px);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
     outline: 2px solid transparent;
     border-radius: calc(
-      var(--toggle-group-border-radius, var(--eun-borderRadius-m, 8px)) - 3px
+      var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
     );
     box-shadow: var(--_boxShadow);
     transition:
@@ -94,6 +200,13 @@ import{a as T}from"./chunks/chunk-SD2H5UDZ.js";import{a as C}from"./chunks/chunk
       color 0.2s ease-out,
       box-shadow 0.2s ease-out;
   }
+  :host([full]) button,
+  :host([full]) ::slotted(eun-toggle-item) {
+    flex: 1 1 0%;
+  }
+  :host([full]) button {
+    justify-content: center;
+  }
   :host(:not([disabled])) button:hover {
     box-shadow: var(--_boxShadow-hover);
   }
@@ -111,13 +224,15 @@ import{a as T}from"./chunks/chunk-SD2H5UDZ.js";import{a as C}from"./chunks/chunk
   button[disabled] {
     cursor: not-allowed;
   }
-  :host([appearance="default"]) #track:has(#indicator) button.active {
+  :host([appearance="default"]) #scrollable:has(#indicator) button.active {
     color: var(
       --toggle-group-active-color,
       var(--eun-color-on-primary-500, #ffffff)
     );
   }
-  :host([appearance="default"]) #track:not(:has(#indicator)) button.active {
+  :host([appearance="default"])
+    #scrollable:not(:has(#indicator))
+    button.active {
     background: var(
       --toggle-group-active-background,
       var(--eun-color-primary-500, #3d6fff)
@@ -133,85 +248,103 @@ import{a as T}from"./chunks/chunk-SD2H5UDZ.js";import{a as C}from"./chunks/chunk
   }
 
   button[data-variant="secondary"] {
-    --_variantColor: var(--eun-color-secondary-500, #e5a030);
-    --_variantTint: var(--eun-color-secondary-transparent, #e5a03033);
+    --_variantColorDefault: var(--eun-color-secondary-500, #e5a030);
+    --_variantTintDefault: var(--eun-color-secondary-transparent, #e5a03033);
   }
   button[data-variant="critical"] {
-    --_variantColor: var(--eun-color-critical-100, #aa0014);
-    --_variantTint: var(--eun-color-critical-30, #faf0f1);
+    --_variantColorDefault: var(--eun-color-critical-100, #aa0014);
+    --_variantTintDefault: var(--eun-color-critical-30, #faf0f1);
   }
   button[data-variant="success"] {
-    --_variantColor: var(--eun-color-success-100, #1a9948);
-    --_variantTint: var(--eun-color-success-30, #f1f9f4);
+    --_variantColorDefault: var(--eun-color-success-100, #1a9948);
+    --_variantTintDefault: var(--eun-color-success-30, #f1f9f4);
   }
   button[data-variant="warning"] {
-    --_variantColor: var(--eun-color-warning-100, #c85207);
-    --_variantTint: var(--eun-color-warning-30, #fcf5f0);
+    --_variantColorDefault: var(--eun-color-warning-100, #c85207);
+    --_variantTintDefault: var(--eun-color-warning-30, #fcf5f0);
   }
   :host([appearance="outline"]) button,
   :host([appearance="flat"]) button {
     border-radius: var(
       --toggle-group-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
   }
   :host([appearance="outline"]) button {
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--toggle-group-border-color, var(--eun-color-grey-300, #dee0e7));
   }
   :host([appearance="flat"]) button {
-    border: var(--eun-borderWidth-s, 1px) solid transparent;
+    border: var(--eun-border-width-s, 1px) solid
+      var(--toggle-group-border-color, transparent);
   }
   :host([appearance="outline"]) button.active,
   :host([appearance="flat"]) button.active {
     background: var(--_variantTint);
-    color: var(--_variantColor);
-    font-weight: var(--eun-fontWeight-b, 700);
+    color: var(--toggle-group-active-color, var(--_variantColor));
+    font-weight: var(--eun-font-weight-b, 700);
   }
   :host([appearance="outline"]) button.active {
     border-color: var(--_variantColor);
   }
   :host([appearance="outline"]:not([disabled])) button:not(.active):hover,
   :host([appearance="flat"]:not([disabled])) button:not(.active):hover {
-    color: var(--_variantColor);
+    color: var(--toggle-group-hover-color, var(--_variantColor));
   }
   :host([appearance="outline"]) button:focus-visible,
   :host([appearance="flat"]) button:focus-visible {
     outline-color: var(--_variantColor);
-    color: var(--_variantColor);
-  }
-`;var A="eun-toggle-group",u,h,n=class extends I(w){constructor(){super(...arguments);this.options=[];this.value=[];this.single=!1;this.appearance="default";f(this,u);f(this,h,!1);this.debounceMoveIndicator=T(()=>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?.(),b(this,u,new ResizeObserver(this.debounceMoveIndicator)),g(this,u).observe(this)}disconnectedCallback(){g(this,u)?.disconnect(),super.disconnectedCallback?.()}firstUpdated(){this.settleAndSync(!1)}updated(e){super.updated(e),e.has("disabled")&&this.removeAttribute("tabindex"),(e.has("value")||e.has("options")||e.has("single")||e.has("appearance"))&&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){this.whenItemsReady().then(()=>{this.seedInitialValue(),this.applyExclusiveDefault(),this.syncItems(),this.refreshIndicator(e)})}seedInitialValue(){if(g(this,h)||(b(this,h,!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 C)}}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)}),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,i=r===t?"0":"-1";this.whenItemReady(o).then(()=>{o.setAttribute("tabindex",i)})})}refreshIndicator(e){if(!this.exclusive||this.appearance!=="default")return;let t=this.entries.find(a=>a.value===this.value[0]);if(t&&t.element.tagName!=="BUTTON"){this.whenItemReady(t.element).then(()=>this.moveIndicator(e));return}this.moveIndicator(e)}moveIndicator(e){let t=this.indicatorEl;if(!this.exclusive||!t||!this.trackEl)return;let a=this.entries.find(i=>i.value===this.value[0]);if(!a){t.style.opacity="0";return}let r=this.trackEl.getBoundingClientRect(),o=a.element.getBoundingClientRect();e||(t.style.transition="none"),t.style.opacity="1",t.style.width=`${Math.floor(o.width)}px`,t.style.transform=`translateX(${Math.floor(o.left-r.left)}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 i=t[o];!i||i.disabled||(this.activateValue(i.value),i.element.focus())}render(){let e=this.exclusive,t=e&&this.appearance==="default";return d`
-      <div
-        id="track"
-        role=${e?"radiogroup":"group"}
-        part="track"
-        aria-label=${this.ariaLabel??v}
-        aria-disabled=${this.disabled?"true":"false"}
-        @keydown=${a=>this.handleKeydown(a)}
-      >
-        ${t?d`<span
-              id="indicator"
-              part="indicator"
-              aria-hidden="true"
-            ></span>`:v}
-        ${this.options.map((a,r)=>{let o=this.value.includes(a.value),i=!!a.icon&&!a.showLabel;return d`
-            <button
-              type="button"
-              class=${E({active:o,"icon-only":i})}
-              data-value=${a.value}
-              data-variant=${p(a.variant)}
-              role=${e?"radio":"checkbox"}
-              aria-checked=${o?"true":"false"}
-              aria-label=${p(i?a.label:void 0)}
-              title=${p(i?a.label:void 0)}
-              tabindex=${p(e?this.exclusiveTabIndex(a.value,r):void 0)}
-              ?disabled=${this.disabled}
-              @click=${()=>this.activateValue(a.value)}
-            >
-              ${a.icon?d`<eun-icon name=${a.icon} size="16"></eun-icon>`:v}
-              ${i?v:a.label}
-            </button>
-          `})}
-        <slot @slotchange=${this.handleSlotChange}></slot>
+    color: var(--toggle-group-hover-color, var(--_variantColor));
+  }
+`;var m=28,D="eun-toggle-group",u,h,n=class extends $(_(I)){constructor(){super(...arguments);this.options=[];this.value=[];this.single=!1;this.appearance="default";this.full=!1;w(this,u);w(this,h,!1);this.debounceMoveIndicator=T(()=>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)),g(this,u).observe(this)}disconnectedCallback(){g(this,u)?.disconnect(),super.disconnectedCallback?.()}firstUpdated(e){super.firstUpdated(e),this.settleAndSync(!1)}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){this.whenItemsReady().then(()=>{this.seedInitialValue(),this.applyExclusiveDefault(),this.syncItems(),this.refreshIndicator(e),this.updateScroll()})}seedInitialValue(){if(g(this,h)||(y(this,h,!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 A(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,i=r===t?"0":"-1";this.whenItemReady(o).then(()=>{o.setAttribute("tabindex",i)})})}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(),i=o.left-r.left-t.clientLeft,l=i+o.width,f=0;i<m?f=i-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(),i=o.left-r.left-this.trackEl.clientLeft+this.trackEl.scrollLeft;e||(t.style.transition="none"),t.style.opacity="1",t.style.width=`${Math.floor(o.width)}px`,t.style.transform=`translateX(${Math.floor(i)}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 i=t[o];!i||i.disabled||(this.activateValue(i.value),i.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"
+          role=${e?"radiogroup":"group"}
+          part="track"
+          aria-label=${this.ariaLabel??v}
+          aria-disabled=${this.disabled?"true":"false"}
+          @keydown=${a=>this.handleKeydown(a)}
+          @scroll=${this.updateScroll}
+        >
+          ${t?d`<span
+                id="indicator"
+                part="indicator"
+                aria-hidden="true"
+              ></span>`:v}
+          ${this.options.map((a,r)=>{let o=this.value.includes(a.value),i=!!a.icon&&!a.showLabel;return d`
+              <button
+                type="button"
+                class=${b({active:o,"icon-only":i})}
+                data-value=${a.value}
+                data-variant=${p(a.variant)}
+                role=${e?"radio":"checkbox"}
+                aria-checked=${o?"true":"false"}
+                aria-label=${p(i?a.label:void 0)}
+                title=${p(i?a.label:void 0)}
+                tabindex=${p(e?this.exclusiveTabIndex(a.value,r):void 0)}
+                ?disabled=${this.disabled}
+                @click=${()=>this.activateValue(a.value)}
+              >
+                ${a.icon?d`<eun-icon name=${a.icon} size="16"></eun-icon>`:v}
+                ${i?v:a.label}
+              </button>
+            `})}
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <div id="arrows">
+          <arrow-container
+            class=${b({visible:this.arrowVisible("start")})}
+            @click=${this.scrollItem("back")}
+          >
+            <eun-icon name="chevron_left"></eun-icon>
+          </arrow-container>
+          <arrow-container
+            class=${b({visible:this.arrowVisible("end")})}
+            @click=${this.scrollItem("front")}
+          >
+            <eun-icon name="chevron_right"></eun-icon>
+          </arrow-container>
+        </div>
       </div>
-    `}};u=new WeakMap,h=new WeakMap,n.styles=[$],s([c({type:Array,reflect:!0})],n.prototype,"options",2),s([c({type:Array,reflect:!0})],n.prototype,"value",2),s([c({type:Boolean,reflect:!0})],n.prototype,"single",2),s([c({reflect:!0})],n.prototype,"appearance",2),s([k()],n.prototype,"items",2),s([m("#track")],n.prototype,"trackEl",2),s([m("#indicator")],n.prototype,"indicatorEl",2),n=s([y(A)],n);export{n as EunomiaToggleGroup,A as EunomiaToggleGroupTagName};
+    `}};u=new WeakMap,h=new WeakMap,n.styles=[R],s([c({type:Array,reflect:!0})],n.prototype,"options",2),s([c({type:Array,reflect:!0})],n.prototype,"value",2),s([c({type:Boolean,reflect:!0})],n.prototype,"single",2),s([c({reflect:!0})],n.prototype,"appearance",2),s([c({type:Boolean,reflect:!0})],n.prototype,"full",2),s([C()],n.prototype,"items",2),s([x("#scrollable")],n.prototype,"trackEl",2),s([x("#indicator")],n.prototype,"indicatorEl",2),n=s([k(D)],n);export{n as EunomiaToggleGroup,D as EunomiaToggleGroupTagName};