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

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

@@ -1,4 +1,4 @@
-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`
+import{a as $}from"./chunks/chunk-SMTIDNGW.js";import{a as R}from"./chunks/chunk-YYCEPZUN.js";import{a as T}from"./chunks/chunk-RS7TWEMQ.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 $}from"./chunks/chunk-EST3M4AO.js";import{a as T}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 $}from"./chunks/chunk-EST3M4AO.js";import{a as T}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)
@@ -52,9 +62,14 @@ import{a as $}from"./chunks/chunk-EST3M4AO.js";import{a as T}from"./chunks/chunk
     );
     border: var(--eun-border-width-s, 1px) solid
       var(--toggle-group-border-color, var(--eun-color-grey-300, #dee0e7));
+    box-shadow: var(--toggle-group-box-shadow, none);
     scrollbar-width: none;
     overflow-x: hidden;
   }
+  #scrollable:not(.settled) {
+    --_toggleTransition: none;
+    --icon-transition: none;
+  }
   #scrollable::-webkit-scrollbar {
     display: none;
   }
@@ -66,13 +81,19 @@ import{a as $}from"./chunks/chunk-EST3M4AO.js";import{a as T}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;
   }
@@ -83,7 +104,8 @@ import{a as $}from"./chunks/chunk-EST3M4AO.js";import{a as T}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;
   }
@@ -128,8 +150,8 @@ import{a as $}from"./chunks/chunk-EST3M4AO.js";import{a as T}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;
@@ -146,13 +168,14 @@ import{a as $}from"./chunks/chunk-EST3M4AO.js";import{a as T}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 {
@@ -164,7 +187,7 @@ import{a as $}from"./chunks/chunk-EST3M4AO.js";import{a as T}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)
@@ -182,7 +205,6 @@ import{a as $}from"./chunks/chunk-EST3M4AO.js";import{a as T}from"./chunks/chunk
     flex-shrink: 0;
     gap: var(--eun-space-xs, 4px);
     font: inherit;
-    text-transform: capitalize;
     white-space: nowrap;
     cursor: pointer;
     border: none;
@@ -195,10 +217,13 @@ import{a as $}from"./chunks/chunk-EST3M4AO.js";import{a as T}from"./chunks/chunk
       var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
     );
     box-shadow: var(--_boxShadow);
-    transition:
-      background-color 0.2s ease-out,
-      color 0.2s ease-out,
-      box-shadow 0.2s ease-out;
+    transition: var(
+      --_toggleTransition,
+      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,
   :host([full]) ::slotted(eun-toggle-item) {
@@ -218,8 +243,9 @@ import{a as $}from"./chunks/chunk-EST3M4AO.js";import{a as T}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;
@@ -247,21 +273,21 @@ import{a as $}from"./chunks/chunk-EST3M4AO.js";import{a as T}from"./chunks/chunk
     padding: 6px;
   }
 
-  button[data-variant="secondary"] {
+  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-variant="critical"] {
+  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-variant="success"] {
+  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-variant="warning"] {
+  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 {
@@ -296,10 +322,11 @@ import{a as $}from"./chunks/chunk-EST3M4AO.js";import{a as T}from"./chunks/chunk
     outline-color: var(--_variantColor);
     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`
+`;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"
+          class=${h({settled:this.settled})}
           role=${e?"radiogroup":"group"}
           part="track"
           aria-label=${this.ariaLabel??v}
@@ -312,39 +339,39 @@ import{a as $}from"./chunks/chunk-EST3M4AO.js";import{a as T}from"./chunks/chunk
                 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`
+          ${this.options.map((a,r)=>{let o=this.value.includes(a.value),n=!!a.icon&&!a.showLabel;return d`
               <button
                 type="button"
-                class=${b({active:o,"icon-only":i})}
+                class=${h({active:o,"icon-only":n})}
                 data-value=${a.value}
-                data-variant=${p(a.variant)}
+                data-color=${p(a.color)}
                 role=${e?"radio":"checkbox"}
                 aria-checked=${o?"true":"false"}
-                aria-label=${p(i?a.label:void 0)}
-                title=${p(i?a.label: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(a.value)}
               >
                 ${a.icon?d`<eun-icon name=${a.icon} size="16"></eun-icon>`:v}
-                ${i?v:a.label}
+                ${n?v:a.label}
               </button>
             `})}
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>
         <div id="arrows">
           <arrow-container
-            class=${b({visible:this.arrowVisible("start")})}
+            class=${h({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")})}
+            class=${h({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=[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};
+    `}};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})],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-T7WABJEJ.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-RS7TWEMQ.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-T7WABJEJ.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));
@@ -35,10 +34,13 @@ import{a as s}from"./chunks/chunk-T7WABJEJ.js";import{a as e,f as i,g as n,h as
     );
     outline: 2px solid transparent;
     box-shadow: var(--_boxShadow);
-    transition:
-      background-color 0.2s ease-out,
-      color 0.2s ease-out,
-      box-shadow 0.2s ease-out;
+    transition: var(
+      --_toggleTransition,
+      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 {
     box-shadow: var(--_boxShadow-hover);
@@ -51,9 +53,10 @@ import{a as s}from"./chunks/chunk-T7WABJEJ.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;
@@ -77,7 +80,7 @@ import{a as s}from"./chunks/chunk-T7WABJEJ.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)
@@ -89,21 +92,21 @@ import{a as s}from"./chunks/chunk-T7WABJEJ.js";import{a as e,f as i,g as n,h as
       transparent
     );
   }
-  :host([variant="secondary"]) {
+  :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([variant="critical"]) {
+  :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([variant="success"]) {
+  :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([variant="warning"]) {
+  :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 {
@@ -142,11 +145,11 @@ import{a as s}from"./chunks/chunk-T7WABJEJ.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>
-    `}};o.styles=[u],e([r({reflect:!0})],o.prototype,"value",2),e([r()],o.prototype,"icon",2),e([r({reflect:!0})],o.prototype,"variant",2),e([r({type:Boolean,reflect:!0})],o.prototype,"checked",2),o=e([i(v)],o);export{o as EunomiaToggleItem,v as EunomiaToggleItemTagName};
+    `}};o.styles=[u],e([r({reflect:!0})],o.prototype,"value",2),e([r()],o.prototype,"icon",2),e([r({reflect:!0})],o.prototype,"color",2),e([r({type:Boolean,reflect:!0})],o.prototype,"checked",2),o=e([i(v)],o);export{o as EunomiaToggleItem,v as EunomiaToggleItemTagName};

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-T7WABJEJ.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-RS7TWEMQ.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})],o.prototype,"appearance",2),o=r([n(g)],o);export{o as EunomiaToggle,g as EunomiaToggleTagName};