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

package/README.md

@@ -63,11 +63,11 @@ list is just the map.
 - **Form:** `checkbox`/`checkbox-list`/`check-card`, `switch`, `input`,
   `date-picker`, `time-picker`, `counter`, `input-phone`, `textarea`,
   `form-label`, `radio`/`radio-list`/`radio-card`, `search`, `select`,
-  `input-file`, `slider`
+  `input-file`, `slider`, `rating`
 - **Layout:** `animate`, `infinite-list`, `divider`
 - **Loader:** `loader`, `skeleton`
 - **Navigation:** `tab-group`/`tab`/`tab-panel`, `carousel`,
-  `breadcrumb`/`breadcrumb-item`, `pagination`, `stepper`/`step`,
+  `breadcrumb`, `pagination`, `stepper`/`step`,
   `toolbar`, `sidebar`
 - **Scheduler:** `scheduler`, `calendar`, `scheduler-event-card`,
   `scheduler-event-editor`

package/dist/breakpoints.d.ts

@@ -1,15 +1,21 @@
 /**
- * Pixel-width breakpoints shared by every component's responsive `@media`
- * rule, so a single set of numbers backs each layout switch in the library
- * instead of every component hand-picking its own threshold. Exported so
- * consumers can align their own layout code with the same switch points
- * the components themselves react to.
+ * The library's breakpoints, in pixels : the single source of every width
+ * the components, the Sass mixins, the grid classes and the
+ * `--eun-breakpoint-*` custom properties switch at.
+ * `styles/tools/variables/eunomia.breakpoints.scss` is generated from this
+ * object by `scripts/breakpoints.mjs`, never edited by hand, and
+ * `npm run lint` fails if the two drift apart or if a width is written as
+ * a raw number anywhere else.
  *
- * This scale is independent from the Sass breakpoints under
- * `styles/tools/variables/eunomia.breakpoints.scss` (used by the docs site
- * build) — the two happen to share the `768`/`1024`/`1280` steps, but this
- * one exists for a single component's own internal layout, not a whole
- * page grid.
+ * Each value is where a level starts : `tablet` is 768, so the tablet
+ * level applies from 768px up, and everything below it stops just under
+ * 768px. Media conditions use the range syntax (`width < 768px`,
+ * `width >= 768px`), so the two sides of a breakpoint never overlap and
+ * leave no gap at fractional widths.
+ *
+ * This file is published as-is as the `./breakpoints.js` subpath, so it
+ * must stay free of imports and side effects : importing it on a server
+ * never registers a component.
  */
 export declare const EUNOMIA_BREAKPOINTS: {
     readonly mobile: 600;
@@ -17,4 +23,25 @@ export declare const EUNOMIA_BREAKPOINTS: {
     readonly laptop: 1024;
     readonly desktop: 1280;
 };
+/**
+ * The name of one of the {@link EUNOMIA_BREAKPOINTS}.
+ */
 export type EunomiaBreakpoint = keyof typeof EUNOMIA_BREAKPOINTS;
+/**
+ * The media condition matching every width below `breakpoint`, such as
+ * `(width < 768px)` for `"tablet"`. Same range as the
+ * `eunomia-below-<breakpoint>` Sass mixin.
+ *
+ * @param breakpoint the breakpoint the range stops under.
+ * @returns the media condition, for `matchMedia`, `@media` or `@container`.
+ */
+export declare function mediaBelow(breakpoint: EunomiaBreakpoint): string;
+/**
+ * The media condition matching every width from `breakpoint` up, such as
+ * `(width >= 768px)` for `"tablet"`. Same range as the
+ * `eunomia-from-<breakpoint>` Sass mixin.
+ *
+ * @param breakpoint the breakpoint the range starts at.
+ * @returns the media condition, for `matchMedia`, `@media` or `@container`.
+ */
+export declare function mediaFrom(breakpoint: EunomiaBreakpoint): string;

package/dist/breakpoints.js

@@ -1,15 +1,21 @@
 /**
- * Pixel-width breakpoints shared by every component's responsive `@media`
- * rule, so a single set of numbers backs each layout switch in the library
- * instead of every component hand-picking its own threshold. Exported so
- * consumers can align their own layout code with the same switch points
- * the components themselves react to.
+ * The library's breakpoints, in pixels : the single source of every width
+ * the components, the Sass mixins, the grid classes and the
+ * `--eun-breakpoint-*` custom properties switch at.
+ * `styles/tools/variables/eunomia.breakpoints.scss` is generated from this
+ * object by `scripts/breakpoints.mjs`, never edited by hand, and
+ * `npm run lint` fails if the two drift apart or if a width is written as
+ * a raw number anywhere else.
  *
- * This scale is independent from the Sass breakpoints under
- * `styles/tools/variables/eunomia.breakpoints.scss` (used by the docs site
- * build) — the two happen to share the `768`/`1024`/`1280` steps, but this
- * one exists for a single component's own internal layout, not a whole
- * page grid.
+ * Each value is where a level starts : `tablet` is 768, so the tablet
+ * level applies from 768px up, and everything below it stops just under
+ * 768px. Media conditions use the range syntax (`width < 768px`,
+ * `width >= 768px`), so the two sides of a breakpoint never overlap and
+ * leave no gap at fractional widths.
+ *
+ * This file is published as-is as the `./breakpoints.js` subpath, so it
+ * must stay free of imports and side effects : importing it on a server
+ * never registers a component.
  */
 export const EUNOMIA_BREAKPOINTS = {
     mobile: 600,
@@ -17,3 +23,25 @@ export const EUNOMIA_BREAKPOINTS = {
     laptop: 1024,
     desktop: 1280,
 };
+/**
+ * The media condition matching every width below `breakpoint`, such as
+ * `(width < 768px)` for `"tablet"`. Same range as the
+ * `eunomia-below-<breakpoint>` Sass mixin.
+ *
+ * @param breakpoint the breakpoint the range stops under.
+ * @returns the media condition, for `matchMedia`, `@media` or `@container`.
+ */
+export function mediaBelow(breakpoint) {
+    return `(width < ${EUNOMIA_BREAKPOINTS[breakpoint]}px)`;
+}
+/**
+ * The media condition matching every width from `breakpoint` up, such as
+ * `(width >= 768px)` for `"tablet"`. Same range as the
+ * `eunomia-from-<breakpoint>` Sass mixin.
+ *
+ * @param breakpoint the breakpoint the range starts at.
+ * @returns the media condition, for `matchMedia`, `@media` or `@container`.
+ */
+export function mediaFrom(breakpoint) {
+    return `(width >= ${EUNOMIA_BREAKPOINTS[breakpoint]}px)`;
+}

package/dist/cdn/components/chunks/{chunk-MMLIPCOY.js → chunk-22D3SRFR.js}

@@ -1,4 +1,4 @@
-import{a as l,b as c,c as a}from"./chunk-SGM2X2TC.js";import{o as i}from"./chunk-XH6NREVZ.js";var u="important",d=" !"+u,h=c(class extends a{constructor(s){if(super(s),s.type!==l.ATTRIBUTE||s.name!=="style"||s.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(s){return Object.keys(s).reduce((r,t)=>{let e=s[t];return e==null?r:r+`${t=t.includes("-")?t:t.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`},"")}update(s,[r]){let{style:t}=s.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(r)),this.render(r);for(let e of this.ft)r[e]==null&&(this.ft.delete(e),e.includes("-")?t.removeProperty(e):t[e]=null);for(let e in r){let n=r[e];if(n!=null){this.ft.add(e);let o=typeof n=="string"&&n.endsWith(d);e.includes("-")||o?t.setProperty(e,o?n.slice(0,-11):n,o?u:""):t[e]=n}}return i}});export{h as a};
+import{a as l,b as c,c as a}from"./chunk-SGM2X2TC.js";import{q as i}from"./chunk-YITWLCD3.js";var u="important",d=" !"+u,h=c(class extends a{constructor(s){if(super(s),s.type!==l.ATTRIBUTE||s.name!=="style"||s.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(s){return Object.keys(s).reduce((r,t)=>{let e=s[t];return e==null?r:r+`${t=t.includes("-")?t:t.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`},"")}update(s,[r]){let{style:t}=s.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(r)),this.render(r);for(let e of this.ft)r[e]==null&&(this.ft.delete(e),e.includes("-")?t.removeProperty(e):t[e]=null);for(let e in r){let n=r[e];if(n!=null){this.ft.add(e);let o=typeof n=="string"&&n.endsWith(d);e.includes("-")||o?t.setProperty(e,o?n.slice(0,-11):n,o?u:""):t[e]=n}}return i}});export{h as a};
 /*! Bundled license information:
 
 lit-html/directives/style-map.js:

package/dist/cdn/components/chunks/chunk-36KLGY6U.js

@@ -0,0 +1,209 @@
+import{a as I}from"./chunk-VJCNHMQZ.js";import{a as O}from"./chunk-SD2H5UDZ.js";import{a as L}from"./chunk-O7PHBLH2.js";import{a as _,b as T,c as H}from"./chunk-SGM2X2TC.js";import{h as A,p,r as w}from"./chunk-YITWLCD3.js";function ne(e,t){if(t===12||t===24)return t;let r=new Intl.DateTimeFormat(e,{hour:"numeric"}).resolvedOptions().hourCycle;return r==="h11"||r==="h12"?12:24}function M(e){let t=B(e);return{hour:e%12===0?12:e%12,period:t}}function $(e,t){let r=e%12;return t==="PM"?r+12:r}function B(e){return e<12?"AM":"PM"}function F(e,t){return((e+t)%24+24)%24}function N(e,t){return((e+t)%60+60)%60}function E(e){return e==="AM"?"PM":"AM"}function oe(e){return e===12?["hour","minute","period"]:["hour","minute"]}var V=["period","hour","minute"];function ie(e){let r=new Intl.DateTimeFormat(e,{hour:"numeric",minute:"numeric",hourCycle:"h12"}).formatToParts(new Date(2e3,0,1,14,30)).map(n=>n.type).map(n=>n==="hour"?"hour":n==="minute"?"minute":n==="dayPeriod"?"period":null).filter(n=>n!==null);return r.length===3?r:V}function ae(e,t,r){if(e===null||t===null)return{hour:"",minute:"",period:""};if(r===12){let{hour:n,period:o}=M(e);return{hour:String(n).padStart(2,"0"),minute:String(t).padStart(2,"0"),period:o}}return{hour:String(e).padStart(2,"0"),minute:String(t).padStart(2,"0"),period:""}}function ue(e,t){if(e.hour===""||e.minute==="")return null;let r=Number(e.minute);if(!Number.isInteger(r)||r<0||r>59)return null;let n=Number(e.hour);return Number.isInteger(n)?t===12?n<1||n>12||e.period!=="AM"&&e.period!=="PM"?null:{hour:$(n,e.period),minute:r}:n<0||n>23?null:{hour:n,minute:r}:null}function le(e,t){let r=e.hour.length===2&&e.minute.length===2;return t===12?r&&e.period!=="":r}function P(e){return String(e).padStart(2,"0")}function C(e){return String(e).padStart(2,"0")}function se(e){if(!e)return null;let t=/^(\d{1,2}):(\d{2})$/.exec(e.trim());if(!t)return null;let r=Number(t[1]),n=Number(t[2]);return r<0||r>23||n<0||n>59?null:{hour:r,minute:n}}function v(e){return e.hour*60+e.minute}function ce(e,t,r){if(!t&&!r)return{valid:!0};let n=v(e);if(t&&r){let o=v(t),i=v(r);return o<=i?n<o?{valid:!1,violation:"min"}:n>i?{valid:!1,violation:"max"}:{valid:!0}:n>=o||n<=i?{valid:!0}:{valid:!1,violation:"max"}}return t&&n<v(t)?{valid:!1,violation:"min"}:r&&n>v(r)?{valid:!1,violation:"max"}:{valid:!0}}var j=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],G=new Map;function Q(e){let t=G.get(e);return t||(t=new Intl.DateTimeFormat("en-US",{timeZone:e,hourCycle:"h23",year:"numeric",month:"numeric",day:"numeric",hour:"numeric",minute:"numeric",second:"numeric",weekday:"short"}),G.set(e,t)),t}function x(){return Intl.DateTimeFormat().resolvedOptions().timeZone}function W(e,t){let r=t??x(),n=Q(r).formatToParts(e),o=d=>n.find(l=>l.type===d)?.value??"",i=Number(o("hour"))%24,s=o("weekday"),c=j.indexOf(s);return{year:Number(o("year")),month:Number(o("month")),day:Number(o("day")),hour:i,minute:Number(o("minute")),second:Number(o("second")),weekday:c===-1?0:c}}function K(e,t){let r=W(e,t),n=Date.UTC(r.year,r.month-1,r.day,r.hour,r.minute,r.second);return Math.round((n-e.getTime())/6e4)}function X(e,t){let r=e.second??0,n=Date.UTC(e.year,e.month-1,e.day,e.hour,e.minute,r),o=K(new Date(n),t),i=n-o*6e4,s=K(new Date(i),t);return s===o?new Date(i):new Date(n-s*6e4)}function me(e,t,r,n){let o=t??x(),{year:i,month:s,day:c}=W(e,o);return X({year:i,month:s,day:c,hour:r,minute:n},o)}function he(e,t){return(e??x())===(t??x())}function fe(e,t,r={}){return new Intl.DateTimeFormat(r.locale,{timeZone:t,timeZoneName:r.style??"shortOffset",hour:"numeric"}).formatToParts(e).find(o=>o.type==="timeZoneName")?.value??""}var g=(e,t)=>{let r=e._$AN;if(r===void 0)return!1;for(let n of r)n._$AO?.(t,!1),g(n,t);return!0},y=e=>{let t,r;do{if((t=e._$AM)===void 0)break;r=t._$AN,r.delete(e),e=t}while(r?.size===0)},R=e=>{for(let t;t=e._$AM;e=t){let r=t._$AN;if(r===void 0)t._$AN=r=new Set;else if(r.has(e))break;r.add(e),J(t)}};function Y(e){this._$AN!==void 0?(y(this),this._$AM=e,R(this)):this._$AM=e}function q(e,t=!1,r=0){let n=this._$AH,o=this._$AN;if(o!==void 0&&o.size!==0)if(t)if(Array.isArray(n))for(let i=r;i<n.length;i++)g(n[i],!1),y(n[i]);else n!=null&&(g(n,!1),y(n));else g(this,e)}var J=e=>{e.type==_.CHILD&&(e._$AP??=q,e._$AQ??=Y)},k=class extends H{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,r,n){super._$AT(t,r,n),R(this),this.isConnected=t._$AU}_$AO(t,r=!0){t!==this.isConnected&&(this.isConnected=t,t?this.reconnected?.():this.disconnected?.()),r&&(g(this,t),y(this))}setValue(t){if(I(this._$Ct))this._$Ct._$AI(t,this);else{let r=[...this._$Ct._$AH];r[this._$Ci]=t,this._$Ct._$AI(r,this,0)}}disconnected(){}reconnected(){}};var D=new WeakMap,U=T(class extends k{render(e){return w}update(e,[t]){let r=t!==this.G;return r&&this.rt(void 0),(r||this.lt!==this.ct)&&(this.G=t,this.ht=e.options?.host,this.rt(this.ct=e.element)),w}rt(e){if(this.G!==void 0)if(this.isConnected||(e=void 0),typeof this.G=="function"){let t=this.ht??globalThis,r=D.get(t);r===void 0&&(r=new WeakMap,D.set(t,r)),r.get(this.G)!==void 0&&this.G.call(this.ht,void 0),r.set(this.G,e),e!==void 0&&this.G.call(this.ht,e)}else this.G.value=e}get lt(){return typeof this.G=="function"?D.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}});var z=40;function Fe(e){let{visual:t,format:r,hour:n,minute:o,period:i,stepMinute:s,disabled:c=!1,noAnimation:d=!1}=e,l=r===12?M(n):{hour:n,period:i},f=r===12?1:0,a=r===12?12:23,m=[];for(let u=f;u<=a;u+=1)m.push({value:u,text:P(u),selected:u===l.hour});let h=[];for(let u=0;u<60;u+=Math.max(1,s))h.push({value:u,text:C(u),selected:u===o});let b=u=>{e.onHourChange(F(n,u))},Z=u=>{e.onMinuteChange(N(o,u*Math.max(1,s)))};return p`
+    <div
+      class="tp-columns"
+      role="group"
+      aria-label=${e.ariaLabelGroup??"Time"}
+    >
+      ${S({kind:"hour",visual:t,disabled:c,noAnimation:d,label:e.ariaLabelHour??"Hour",incrementLabel:e.incrementLabel??"Increase hour",decrementLabel:e.decrementLabel??"Decrease hour",min:f,max:a,current:l.hour,valueText:P(l.hour),items:m,onStep:b,onPick:u=>e.onHourChange(r===12?$(u,l.period):u)})}
+      ${S({kind:"minute",visual:t,disabled:c,noAnimation:d,label:e.ariaLabelMinute??"Minute",incrementLabel:e.incrementLabel??"Increase minute",decrementLabel:e.decrementLabel??"Decrease minute",min:0,max:59,current:o,valueText:C(o),items:h,onStep:Z,onPick:u=>e.onMinuteChange(u)})}
+      ${r===12?S({kind:"period",visual:t,disabled:c,noAnimation:d,label:e.ariaLabelPeriod??"AM/PM",incrementLabel:e.incrementLabel??"Toggle AM/PM",decrementLabel:e.decrementLabel??"Toggle AM/PM",min:0,max:1,current:i==="AM"?0:1,valueText:i,items:[{value:0,text:"AM",selected:i==="AM"},{value:1,text:"PM",selected:i==="PM"}],onStep:()=>e.onPeriodChange(E(i)),onPick:u=>e.onPeriodChange(u===0?"AM":"PM")}):null}
+    </div>
+  `}function S(e){let{kind:t,visual:r,disabled:n,label:o,min:i,max:s,current:c,valueText:d,onStep:l}=e,f=a=>{switch(a.key){case"ArrowUp":a.preventDefault(),l(1);break;case"ArrowDown":a.preventDefault(),l(-1);break;case"PageUp":a.preventDefault(),l(5);break;case"PageDown":a.preventDefault(),l(-5);break;case"Home":a.preventDefault(),e.onPick(i);break;case"End":a.preventDefault(),e.onPick(s);break;default:break}};return p`
+    <div class="tp-column" data-kind=${t}>
+      <button
+        type="button"
+        class="tp-arrow tp-arrow-up"
+        tabindex="-1"
+        aria-label=${e.incrementLabel}
+        ?disabled=${n}
+        @click=${()=>l(1)}
+      >
+        <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">
+          <path d="M8 4l5 6H3z" fill="currentColor" />
+        </svg>
+      </button>
+      ${r==="wheel"?ee(e):p`
+            <div
+              class="tp-value"
+              role="spinbutton"
+              tabindex=${n?"-1":"0"}
+              aria-label=${o}
+              aria-valuemin=${i}
+              aria-valuemax=${s}
+              aria-valuenow=${c}
+              aria-valuetext=${d}
+              aria-disabled=${n?"true":"false"}
+              @keydown=${f}
+            >
+              ${d}
+            </div>
+          `}
+      <button
+        type="button"
+        class="tp-arrow tp-arrow-down"
+        tabindex="-1"
+        aria-label=${e.decrementLabel}
+        ?disabled=${n}
+        @click=${()=>l(-1)}
+      >
+        <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">
+          <path d="M3 6h10l-5 6z" fill="currentColor" />
+        </svg>
+      </button>
+    </div>
+  `}function ee(e){let{min:t,max:r,current:n,valueText:o,label:i,disabled:s,noAnimation:c}=e,d=a=>{switch(a.key){case"ArrowUp":a.preventDefault(),e.onStep(1);break;case"ArrowDown":a.preventDefault(),e.onStep(-1);break;case"PageUp":a.preventDefault(),e.onStep(5);break;case"PageDown":a.preventDefault(),e.onStep(-5);break;case"Home":a.preventDefault(),e.onPick(t);break;case"End":a.preventDefault(),e.onPick(r);break;default:break}},l,f=O(a=>{let m=a.currentTarget,h=Math.round(m.scrollTop/z);if(h===l)return;let b=e.items[Math.min(Math.max(h,0),e.items.length-1)];b&&b.value!==n&&e.onPick(b.value)},120);return p`
+    <div
+      class="tp-wheel"
+      role="spinbutton"
+      tabindex=${s?"-1":"0"}
+      aria-label=${i}
+      aria-valuemin=${t}
+      aria-valuemax=${r}
+      aria-valuenow=${n}
+      aria-valuetext=${o}
+      aria-disabled=${s?"true":"false"}
+      @keydown=${d}
+      @scroll=${f}
+      ${U(a=>{let m=e.items.findIndex(h=>h.selected);l=m===-1?void 0:m,te(a,m,c)})}
+    >
+      <div class="tp-wheel-pad" aria-hidden="true"></div>
+      ${e.items.map(a=>p`
+          <button
+            type="button"
+            class=${L({"tp-wheel-item":!0,selected:a.selected})}
+            tabindex="-1"
+            aria-hidden="true"
+            @click=${()=>e.onPick(a.value)}
+          >
+            ${a.text}
+          </button>
+        `)}
+      <div class="tp-wheel-pad" aria-hidden="true"></div>
+    </div>
+  `}function te(e,t,r){if(t===-1||!(e instanceof HTMLElement))return;let n=t*z;if(Math.abs(e.scrollTop-n)<1)return;let o=typeof window<"u"&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;e.scrollTo({top:n,behavior:r||o?"instant":"smooth"})}var re=A`
+  .tp-columns {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--eun-space-m, 16px);
+    padding: var(--eun-space-m, 16px);
+  }
+  .tp-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--eun-space-xs, 4px);
+  }
+  .tp-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: var(--eun-border-radius-s, 5px);
+    background: none;
+    padding: var(--eun-space-xxs, 1.6px);
+    color: var(--_iconColor, var(--eun-text-secondary, #484e61));
+    cursor: pointer;
+    transition: background-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
+  }
+  .tp-arrow:hover:not(:disabled) {
+    background-color: var(
+      --time-picker-hover-background,
+      var(--eun-content-hover, #edeff0)
+    );
+  }
+  .tp-arrow:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+  .tp-value,
+  .tp-wheel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 48px;
+    font-size: var(--eun-font-size-l, 24px);
+    font-weight: var(--eun-font-weight-m, 600);
+    color: var(--_textColor, var(--eun-text-color, #071621));
+    font-variant-numeric: tabular-nums;
+  }
+  .tp-value {
+    padding: var(--eun-space-xs, 4px);
+    border-radius: var(--eun-border-radius-s, 5px);
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    cursor: default;
+  }
+  .tp-value:focus-visible {
+    outline-color: var(
+      --field-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
+  }
+  .tp-wheel {
+    flex-direction: column;
+    height: 120px;
+    width: 56px;
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+    scrollbar-width: none;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    border-radius: var(--eun-border-radius-s, 5px);
+  }
+  .tp-wheel::-webkit-scrollbar {
+    display: none;
+  }
+  .tp-wheel:focus-visible {
+    outline-color: var(
+      --field-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
+  }
+  .tp-wheel-pad {
+    flex: none;
+    height: 40px;
+  }
+  .tp-wheel-item {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    scroll-snap-align: center;
+    border: none;
+    background: none;
+    padding: 0;
+    color: var(--_placeholderColor, var(--eun-color-grey-400, #c1c9d6));
+    font: inherit;
+    cursor: pointer;
+    transition: color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
+  }
+  .tp-wheel-item.selected {
+    color: var(--_textColor, var(--eun-text-color, #071621));
+    font-weight: var(--eun-font-weight-l, 700);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .tp-wheel {
+      scroll-behavior: auto;
+    }
+  }
+`,Ge=re;export{ne as a,M as b,$ as c,E as d,oe as e,ie as f,ae as g,ue as h,le as i,se as j,ce as k,x as l,W as m,X as n,me as o,he as p,fe as q,Fe as r,Ge as s};
+/*! Bundled license information:
+
+lit-html/async-directive.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/directives/ref.js:
+  (**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

package/dist/cdn/components/chunks/chunk-3BMACIDO.js

@@ -0,0 +1 @@
+import{a as i,j as r}from"./chunk-YITWLCD3.js";var l=s=>{class e extends s{constructor(){super(...arguments);this.disabled=!1}get hostTabStop(){return!0}updated(t){super.updated(t),t.has("disabled")&&(this.disabled?this.setAttribute("tabindex","-1"):this.hostTabStop?this.setAttribute("tabindex","0"):this.removeAttribute("tabindex"),this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}return i([r({type:Boolean,reflect:!0})],e.prototype,"disabled",2),e};export{l as a};

package/dist/cdn/components/chunks/{chunk-IDKZKLJR.js → chunk-3PNGQEG4.js}

@@ -1,4 +1,4 @@
-import{a as f}from"./chunk-VRGRCYIO.js";import{a as o}from"./chunk-5EVP7YNE.js";import{a,f as u,g as p,h as i,n,p as c,s as m}from"./chunk-XH6NREVZ.js";var r=class d extends Event{static{this.eventName="euntableaction"}constructor(b,e){super(d.eventName,{bubbles:!0,composed:!1}),this.key=b,this.optionKey=e}};var v=p`
+import{a as f}from"./chunk-PD62MBOJ.js";import{a as o}from"./chunk-PPCHQG7P.js";import{a as h}from"./chunk-62RLISRD.js";import{a,f as u,h as p,j as i,p as r,r as c,u as m}from"./chunk-YITWLCD3.js";var n=class d extends Event{static{this.eventName="euntableaction"}constructor(b,e){super(d.eventName,{bubbles:!0,composed:!1}),this.key=b,this.optionKey=e}};var g=p`
   :host {
     position: fixed;
     bottom: var(--table-action-bar-offset-bottom, var(--eun-space-l, 32px));
@@ -7,7 +7,19 @@ import{a as f}from"./chunk-VRGRCYIO.js";import{a as o}from"./chunk-5EVP7YNE.js";
     z-index: var(--table-action-bar-z-index, 100);
     display: block;
     max-width: calc(100vw - var(--eun-space-l, 32px) * 2);
-    animation: eun-table-action-bar-in 180ms ease both;
+    animation: eun-table-action-bar-in var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease) both;
+  }
+
+  :host([popover]) {
+    top: auto;
+    right: auto;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    overflow: visible;
+    color: inherit;
   }
 
   :host([hidden]) {
@@ -55,7 +67,7 @@ import{a as f}from"./chunk-VRGRCYIO.js";import{a as o}from"./chunk-5EVP7YNE.js";
     }
   }
 
-  @media (max-width: ${f.mobile}px) {
+  @media ${f("mobile")} {
     :host {
       left: var(--eun-space-s, 8px);
       right: var(--eun-space-s, 8px);
@@ -112,7 +124,7 @@ import{a as f}from"./chunk-VRGRCYIO.js";import{a as o}from"./chunk-5EVP7YNE.js";
       animation: none;
     }
   }
-`,h=v;var x="eun-table-action-bar",t=class extends m{constructor(){super(...arguments);this.selectedCount=0;this.totalCount=0;this.actions=[];this.toolbarAriaLabel="Selection actions";this.selectedLabel="selected";this.selectAllLabel="Select all";this.deselectAllLabel="Deselect all";this.closeAriaLabel="Clear selection";this.handleSelectAllClick=()=>{this.onSelectAll?.()};this.handleCloseClick=()=>{this.onClose?.()}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","region")}updated(e){super.updated(e),e.has("toolbarAriaLabel")&&this.setAttribute("aria-label",this.toolbarAriaLabel)}get allSelected(){return this.totalCount>0&&this.selectedCount===this.totalCount}handleActionClick(e){e.disabled||this.dispatchEvent(new r(e.key))}handleActionSelect(e,l){this.dispatchEvent(new r(e.key,l.key))}renderAction(e){let l=e.color==="critical";return e.dropdown?n`
+`,v=g;var y="eun-table-action-bar",t=class extends h(m){constructor(){super(...arguments);this.selectedCount=0;this.totalCount=0;this.actions=[];this.handleSelectAllClick=()=>{this.onSelectAll?.()};this.handleCloseClick=()=>{this.onClose?.()}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","region")}updated(e){super.updated(e),(e.has("toolbarAriaLabel")||e.has("locale"))&&this.setAttribute("aria-label",this.toolbarAriaLabel??this.dictionary.table.selectionActions)}get allSelected(){return this.totalCount>0&&this.selectedCount===this.totalCount}handleActionClick(e){e.disabled||this.dispatchEvent(new n(e.key))}handleActionSelect(e,l){this.dispatchEvent(new n(e.key,l.key))}renderAction(e){let l=e.color==="critical";return e.dropdown?r`
         <eun-dropdown-button
           label=${e.label}
           icon=${o(e.icon)}
@@ -122,14 +134,14 @@ import{a as f}from"./chunk-VRGRCYIO.js";import{a as o}from"./chunk-5EVP7YNE.js";
           ?disabled=${e.disabled}
           @eunselect=${s=>this.handleActionSelect(e,s)}
         >
-          ${e.icon?n`<eun-icon
+          ${e.icon?r`<eun-icon
                 slot="start"
                 name=${e.icon}
                 size="16"
               ></eun-icon>`:c}
           ${e.label}</eun-dropdown-button
         >
-      `:n`
+      `:r`
       <eun-button
         color=${o(l?"critical":void 0)}
         label=${e.label}
@@ -137,18 +149,19 @@ import{a as f}from"./chunk-VRGRCYIO.js";import{a as o}from"./chunk-5EVP7YNE.js";
         ?disabled=${e.disabled}
         @click=${()=>this.handleActionClick(e)}
       >
-        ${e.icon?n`<eun-icon
+        ${e.icon?r`<eun-icon
               slot="start"
               name=${e.icon}
               size="16"
             ></eun-icon>`:c}
         ${e.label}
       </eun-button>
-    `}render(){let l=this.allSelected?this.deselectAllLabel:this.selectAllLabel;return n`
+    `}render(){let l=this.allSelected?this.deselectAllLabel??this.dictionary.table.deselectAll:this.selectAllLabel??this.dictionary.table.selectAll;return r`
       <div id="bar" part="bar">
         <div id="left">
           <eun-tag role="status"
-            >${this.selectedCount} ${this.selectedLabel}</eun-tag
+            >${this.selectedCount}
+            ${this.selectedLabel??this.dictionary.table.selected}</eun-tag
           >
           <eun-button
             appearance="flat"
@@ -170,11 +183,11 @@ import{a as f}from"./chunk-VRGRCYIO.js";import{a as o}from"./chunk-5EVP7YNE.js";
             size="xs"
             rounded
             appearance="flat"
-            aria-label=${this.closeAriaLabel}
+            aria-label=${this.closeAriaLabel??this.dictionary.table.clearSelection}
             @click=${this.handleCloseClick}
           >
             <eun-icon name="close" size="16"></eun-icon>
           </eun-button>
         </div>
       </div>
-    `}};t.styles=h,a([i({type:Number,attribute:"selected-count"})],t.prototype,"selectedCount",2),a([i({type:Number,attribute:"total-count"})],t.prototype,"totalCount",2),a([i({attribute:!1})],t.prototype,"actions",2),a([i({attribute:"toolbar-aria-label"})],t.prototype,"toolbarAriaLabel",2),a([i({attribute:"selected-label"})],t.prototype,"selectedLabel",2),a([i({attribute:"select-all-label"})],t.prototype,"selectAllLabel",2),a([i({attribute:"deselect-all-label"})],t.prototype,"deselectAllLabel",2),a([i({attribute:"close-aria-label"})],t.prototype,"closeAriaLabel",2),t=a([u(x)],t);export{r as a,x as b,t as c};
+    `}};t.styles=v,a([i({type:Number,attribute:"selected-count"})],t.prototype,"selectedCount",2),a([i({type:Number,attribute:"total-count"})],t.prototype,"totalCount",2),a([i({attribute:!1})],t.prototype,"actions",2),a([i({attribute:"toolbar-aria-label"})],t.prototype,"toolbarAriaLabel",2),a([i({attribute:"selected-label"})],t.prototype,"selectedLabel",2),a([i({attribute:"select-all-label"})],t.prototype,"selectAllLabel",2),a([i({attribute:"deselect-all-label"})],t.prototype,"deselectAllLabel",2),a([i({attribute:"close-aria-label"})],t.prototype,"closeAriaLabel",2),t=a([u(y)],t);export{n as a,y as b,t as c};

package/dist/cdn/components/chunks/{chunk-NBIENHLV.js → chunk-5XPOGBPL.js}

@@ -1,4 +1,4 @@
-import{a as c}from"./chunk-32DTNR52.js";import{a as b}from"./chunk-VRGRCYIO.js";import{a,f as s,g as n,h as o,l as r,n as i,p as d,s as l}from"./chunk-XH6NREVZ.js";var v=n`
+import{a as b}from"./chunk-3BMACIDO.js";import{b as c}from"./chunk-PD62MBOJ.js";import{a,f as s,h as n,j as r,n as o,p as i,r as d,u as l}from"./chunk-YITWLCD3.js";var h=n`
   :host {
     --_textColor: var(--tab-text-color, var(--eun-text-color, #071621));
     --_textColor-hover: var(
@@ -12,14 +12,15 @@ import{a as c}from"./chunk-32DTNR52.js";import{a as b}from"./chunk-VRGRCYIO.js";
     --_background: var(--tab-background-color, transparent);
     --_padding: var(
       --tab-padding,
-      var(--eun-space-s, 8px) var(--eun-space-m, 16px)
+      var(--tab-padding-block, var(--eun-space-s, 8px))
+        var(--tab-padding-inline, var(--eun-space-m, 16px))
     );
     --_border: var(--tab-border);
     --_border-radius: var(--tab-border-radius, 8px);
     --_pointerEvents: all;
-    font-size: var(--eun-font-size-s, 14px);
-    font-weight: var(--eun-font-weight-m, 500);
-    outline: none;
+    font-size: var(--tab-font-size, var(--eun-font-size-s, 14px));
+    font-weight: var(--tab-font-weight, var(--eun-font-weight-m, 500));
+    outline: none !important;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     z-index: 1;
   }
@@ -59,16 +60,19 @@ import{a as c}from"./chunk-32DTNR52.js";import{a as b}from"./chunk-VRGRCYIO.js";
     border: var(--_border);
     border-radius: var(--_border-radius);
     background: var(--_background);
-    outline: 2px solid transparent;
-    outline-offset: -8px;
+    outline: var(--tab-focus-outline-width, 2px) solid transparent;
+    outline-offset: var(--tab-focus-outline-offset, -2px);
     user-select: none;
-    transition: all 0.2s ease-out;
+    transition: all var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
     color: var(--_textColor);
     fill: var(--_textColor);
   }
   :host(:focus-visible) div {
-    outline-offset: var(--tab-focus-outline-offset, -6px);
     outline-color: var(--_focusIndicator);
+    background: var(
+      --tab-focus-background-color,
+      var(--eun-color-primary-alpha-10, #3d6fff1a)
+    );
   }
   :host([badge]) div,
   div[has-badge] {
@@ -117,13 +121,12 @@ import{a as c}from"./chunk-32DTNR52.js";import{a as b}from"./chunk-VRGRCYIO.js";
       var(--eun-color-critical-100, #aa0014)
     );
     border-radius: var(--eun-border-radius-xl, 999px);
-    transition: scale 0.2s cubic-bezier(0.35, 0.92, 0.65, 1.28);
+    transition: scale var(--eun-duration-m, 200ms)
+      cubic-bezier(0.35, 0.92, 0.65, 1.28);
     scale: 1;
     place-self: var(--_badge-place, start);
     translate: var(--_y-correction, 0 -2px);
   }
-  /* A real slotted badge (slot="badge") takes priority over the plain
-     dot indicator when both are present, rather than rendering both. */
   :host([badge]) div[has-badge]::after {
     display: none;
   }
@@ -142,10 +145,7 @@ import{a as c}from"./chunk-32DTNR52.js";import{a as b}from"./chunk-VRGRCYIO.js";
     }
   }
 
-  @media (min-width: ${b.tablet}px) {
-    :host {
-      font-size: var(--eun-font-size-s, 14px);
-    }
+  @media ${c("tablet")} {
     :host([badge]) div::after {
       --_y-correction: none;
     }
@@ -162,7 +162,7 @@ import{a as c}from"./chunk-32DTNR52.js";import{a as b}from"./chunk-VRGRCYIO.js";
       --_badge-place: start;
     }
   }
-`,h=v;var p="eun-tab",e=class extends c(l){constructor(){super(...arguments);this.active=!1;this.badge=!1;this.resizebserver=new ResizeObserver(()=>{this.closest("eun-tab-group")?.updateIndicator()})}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","tab"),this.hasAttribute("aria-controls")||this.setAttribute("aria-controls",this.panel),this.hasAttribute("id")||this.setAttribute("id",`tab-${this.panel}`),this.addEventListener("click",this.activateTab)}disconnectedCallback(){this.removeEventListener("click",this.activateTab),super.disconnectedCallback?.()}activateTab(){this.disabled||this.closest("eun-tab-group")?.activate(this)}firstUpdated(t){this.resizebserver.observe(this)}updated(t){super.updated(t),!(!t.has("active")||this.disabled)&&(this.setAttribute("aria-selected",String(this.active)),this.setAttribute("tabindex",this.active?"0":"-1"),this.active&&this.activateTab())}handleIconChange(){let t=this.shadowRoot.querySelector("div");t&&t.toggleAttribute("has-icon",!!this.slotIcon?.length)}handleBadgeSlotChange(){let t=this.shadowRoot.querySelector("div");t&&t.toggleAttribute("has-badge",!!this.slotBadge?.length)}render(){return i`
+`,v=h;var u="eun-tab",e=class extends b(l){constructor(){super(...arguments);this.active=!1;this.badge=!1;this.resizebserver=new ResizeObserver(()=>{this.closest("eun-tab-group")?.updateIndicator()})}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","tab"),this.hasAttribute("aria-controls")||this.setAttribute("aria-controls",this.panel),this.hasAttribute("id")||this.setAttribute("id",`tab-${this.panel}`),this.addEventListener("click",this.activateTab)}disconnectedCallback(){this.removeEventListener("click",this.activateTab),super.disconnectedCallback?.()}activateTab(){this.disabled||this.closest("eun-tab-group")?.activate(this)}firstUpdated(t){this.resizebserver.observe(this)}updated(t){super.updated(t),!(!t.has("active")||this.disabled)&&(this.setAttribute("aria-selected",String(this.active)),this.setAttribute("tabindex",this.active?"0":"-1"),this.active&&this.activateTab())}handleIconChange(){let t=this.shadowRoot.querySelector("div");t&&t.toggleAttribute("has-icon",!!this.slotIcon?.length)}handleBadgeSlotChange(){let t=this.shadowRoot.querySelector("div");t&&t.toggleAttribute("has-badge",!!this.slotBadge?.length)}render(){return i`
       <div>
         <slot name="icon" @slotchange=${this.handleIconChange}>
           ${this.icon?i`<eun-icon name=${this.icon}></eun-icon>`:d}
@@ -170,4 +170,4 @@ import{a as c}from"./chunk-32DTNR52.js";import{a as b}from"./chunk-VRGRCYIO.js";
         <slot></slot>
         <slot name="badge" @slotchange=${this.handleBadgeSlotChange}></slot>
       </div>
-    `}};e.styles=h,a([o({reflect:!0})],e.prototype,"panel",2),a([o({type:Boolean,reflect:!0})],e.prototype,"active",2),a([o({reflect:!0})],e.prototype,"icon",2),a([o({type:Boolean,reflect:!0})],e.prototype,"badge",2),a([r({slot:"icon"})],e.prototype,"slotIcon",2),a([r({slot:"badge"})],e.prototype,"slotBadge",2),e=a([s(p)],e);export{p as a,e as b};
+    `}};e.styles=v,a([r({reflect:!0})],e.prototype,"panel",2),a([r({type:Boolean,reflect:!0})],e.prototype,"active",2),a([r({reflect:!0})],e.prototype,"icon",2),a([r({type:Boolean,reflect:!0})],e.prototype,"badge",2),a([o({slot:"icon"})],e.prototype,"slotIcon",2),a([o({slot:"badge"})],e.prototype,"slotBadge",2),e=a([s(u)],e);export{u as a,e as b};

package/dist/cdn/components/chunks/chunk-624VJYNA.js

@@ -0,0 +1 @@
+var i={default:"ease",out:"ease-out"};function o(t){let e=t.trim();if(!e)return;let n=e.endsWith("ms")?Number.parseFloat(e):Number.parseFloat(e)*1e3;return Number.isFinite(n)&&n>=0?n:void 0}function s(t,e,n,u){let r=getComputedStyle(t);return o(r.getPropertyValue(e))??o(r.getPropertyValue(`--eun-duration-${n}`))??u}function a(t,e="default"){return getComputedStyle(t).getPropertyValue(`--eun-easing-${e}`).trim()||i[e]}export{o as a,s as b,a as c};

package/dist/cdn/components/chunks/chunk-62RLISRD.js

@@ -0,0 +1 @@
+import{a as i,b as t}from"./chunk-QL5GSW2A.js";import{a as r,j as o}from"./chunk-YITWLCD3.js";var f=n=>{class e extends n{get dictionary(){let c=this.locale??i();return t[c]??t.en}}return r([o({reflect:!0})],e.prototype,"locale",2),e};export{f as a};

package/dist/cdn/components/chunks/{chunk-6ETDXUH2.js → chunk-6FYW5TQU.js}

@@ -1,4 +1,4 @@
-import{a as b,c as p,d as f,e as i}from"./chunk-OAULRKHQ.js";import{a as h}from"./chunk-YYCEPZUN.js";import{a as u}from"./chunk-32DTNR52.js";import{a as o,f as d,g as s,h as a,n as l,s as c}from"./chunk-XH6NREVZ.js";var v=n=>{class r extends n{constructor(){super(...arguments);this.checked=!1;this.checkable=!0;this.buildCommonValidators=()=>this.required&&!this.checked?{validity:{valueMissing:!0},message:"Field value is missing"}:{validity:{}}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","radio"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.defaultChecked!==void 0&&!this.hasAttribute("checked")&&(this.checked=this.defaultChecked),this.addEventListener("keydown",this.handleKeydown)}formResetCallback(){this.checked=this.defaultChecked??!1,this.dirty=!1,this.touched=!1}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback?.()}updated(e){super.updated(e),e.has("checked")&&(this.setAttribute("aria-checked",String(this.checked)),this.updateInternals()),(e.has("valid")||e.has("hideError")||e.has("disabled"))&&this.setAttribute("aria-invalid",String(!this.hideError&&!this.disabled&&!this.valid))}handleClick(e){this.handleChange(e)}handleChange(e){if(e.stopPropagation(),!(this.disabled||this.readonly||this.inert)&&(e.preventDefault(),!this.checked)){if(this.checked=!0,this.updateInternals(),this.checkValidity(this.checked),this.description){let k=this.description instanceof Array?this.description.join(","):this.description;this.setAttribute("aria-description",k)}else this.removeAttribute("aria-description");this.dispatchEvent(new h(this.checked))}}handleKeydown(e){e.key===" "&&(e.preventDefault(),this.handleChange(e))}updateInternals(){this.setFormValue(this.valueState)}}return o([a({type:Boolean,reflect:!0})],r.prototype,"checked",2),o([a({type:Boolean,attribute:"default-checked"})],r.prototype,"defaultChecked",2),r};var x=s`
+import{b,c as p,d as f,e as v,f as i}from"./chunk-TLBXTBMM.js";import{a as h}from"./chunk-YYCEPZUN.js";import{a as u}from"./chunk-3BMACIDO.js";import{a as o,f as d,h as l,j as t,p as s,u as c}from"./chunk-YITWLCD3.js";var m=n=>{class r extends n{constructor(){super(...arguments);this.checked=!1;this.checkable=!0;this.descriptionOnHost=!0;this.errorOnChange=!0;this.buildCommonValidators=()=>this.required&&!this.checked?{validity:{valueMissing:!0},message:this.validationDictionary.validation.valueMissing}:{validity:{}}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","radio"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.defaultChecked!==void 0&&!this.hasAttribute("checked")&&(this.checked=this.defaultChecked),this.addEventListener("keydown",this.handleKeydown)}formResetCallback(){this.checked=this.defaultChecked??!1,this.dirty=!1,this.touched=!1}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback?.()}updated(e){super.updated(e),e.has("checked")&&(this.setAttribute("aria-checked",String(this.checked)),this.updateInternals()),b(e)&&this.setAttribute("aria-invalid",String(this.showError))}handleClick(e){this.handleChange(e)}handleChange(e){e.stopPropagation(),!(this.disabled||this.readonly||this.inert)&&(e.preventDefault(),!this.checked&&(this.checked=!0,this.updateInternals(),this.checkValidity(this.checked),this.dispatchEvent(new h(this.checked))))}handleKeydown(e){e.key===" "&&(e.preventDefault(),this.handleChange(e))}updateInternals(){this.setFormValue(this.valueState)}}return o([t({type:Boolean,reflect:!0})],r.prototype,"checked",2),o([t({type:Boolean,attribute:"default-checked"})],r.prototype,"defaultChecked",2),r};var x=l`
   :host {
     --_borderColor: var(--radio-border-color, var(--eun-border-color, #dee0e7));
     --_background: var(--radio-background, transparent);
@@ -17,14 +17,14 @@ import{a as b,c as p,d as f,e as i}from"./chunk-OAULRKHQ.js";import{a as h}from"
     --_roundGap: 2px;
     --_cursor: pointer;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--field-label-font-size, var(--eun-font-size-s, 14px));
     display: inline-flex;
     align-items: center;
     outline: none;
   }
 
   :host #radio {
-    transition: all 0.2s ease-out;
+    transition: all var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
 
   :host(:focus-visible) #radio {
@@ -130,7 +130,7 @@ import{a as b,c as p,d as f,e as i}from"./chunk-OAULRKHQ.js";import{a as h}from"
     border-radius: 50%;
     display: inline-block;
     box-sizing: border-box;
-    transition: all 0.2s ease;
+    transition: all var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
     outline: 2px solid transparent;
   }
 
@@ -140,7 +140,7 @@ import{a as b,c as p,d as f,e as i}from"./chunk-OAULRKHQ.js";import{a as h}from"
     inset: 0;
     border-radius: 50%;
     background: var(--_background);
-    transition: all ease 0.2s;
+    transition: all var(--eun-easing-default, ease) var(--eun-duration-m, 200ms);
     top: var(--_roundGap);
     bottom: var(--_roundGap);
     left: var(--_roundGap);
@@ -150,7 +150,7 @@ import{a as b,c as p,d as f,e as i}from"./chunk-OAULRKHQ.js";import{a as h}from"
   slot {
     display: inline-block;
   }
-`,m=x;var y="eun-radio",_=v(b(p(u(f(c))))),t=class extends _{get defaultValue(){return super.defaultValue}set defaultValue(r){super.defaultValue=r}updated(r){super.updated?.(r),r.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}render(){return l`
+`,k=x;var y="eun-radio",g=m(f(p(u(v(c))))),a=class extends g{get defaultValue(){return super.defaultValue}set defaultValue(r){super.defaultValue=r}updated(r){super.updated?.(r),r.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}render(){return s`
       <div>
         <div id="radio-component" @click=${this.handleClick}>
           <div id="radio"></div>
@@ -160,4 +160,4 @@ import{a as b,c as p,d as f,e as i}from"./chunk-OAULRKHQ.js";import{a as h}from"
         </div>
         ${this.renderDescription()}
       </div>
-    `}};t.styles=[m,i.base,i.errorMessages,i.hintMessages],o([a()],t.prototype,"label",2),o([a({attribute:"default-value"})],t.prototype,"defaultValue",1),t=o([d(y)],t);export{y as a,t as b};
+    `}};a.styles=[k,i.base,i.errorMessages,i.hintMessages],o([t()],a.prototype,"label",2),o([t({attribute:"default-value"})],a.prototype,"defaultValue",1),a=o([d(y)],a);export{y as a,a as b};