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

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

@@ -1,4 +1,4 @@
-import{a as s}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as i}from"./chunks/chunk-5EVP7YNE.js";import{a as p}from"./chunks/chunk-BKHD4S57.js";import{a as r,f as d,g as v,h as t,l as u,n,p as a,s as h}from"./chunks/chunk-XH6NREVZ.js";var k=v`
+import{a as C}from"./chunks/chunk-3MTUVMM5.js";import{a as m,b as x}from"./chunks/chunk-5GKM5DIB.js";import{a as d}from"./chunks/chunk-PPCHQG7P.js";import{a as v}from"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import{a as y}from"./chunks/chunk-LMVW522V.js";import"./chunks/chunk-KSZRQRN4.js";import{a as r,b as l,c as p,d as u,f as k,h as b,j as n,n as g,p as a,r as c,u as _}from"./chunks/chunk-YITWLCD3.js";var $=b`
   :host {
     --_color: var(--link-color, var(--eun-text-color, #071621));
     --_colorHover: var(
@@ -22,6 +22,7 @@ import{a as s}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js
       var(--eun-color-primary-500, #3d6fff)
     );
     --_textDecoration: var(--link-text-decoration, underline);
+    --_duration: var(--link-transition-duration, var(--eun-duration-xl, 300ms));
     --_iconColor: var(--link-icon-color, var(--_color));
     --icon-color: var(--_iconColor);
     font-size: var(--link-font-size, unset);
@@ -30,9 +31,12 @@ import{a as s}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js
     align-items: center;
   }
   :host([theme="dark"]) {
-    --_color: var(--link-color, rgba(255, 255, 255, 0.7));
-    --_colorHover: var(--link-color-hover, #fff);
-    --_colorFocus: var(--link-color-focus, #fff);
+    --_color: var(
+      --link-color,
+      var(--eun-text-on-inverse-secondary, rgba(255, 255, 255, 0.7))
+    );
+    --_colorHover: var(--link-color-hover, var(--eun-text-on-inverse, #fff));
+    --_colorFocus: var(--link-color-focus, var(--eun-text-on-inverse, #fff));
     --_colorVisited: var(
       --link-color-visited,
       var(--eun-color-purple-300, #bea0ed)
@@ -45,24 +49,42 @@ import{a as s}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js
     display: inline-flex;
     flex-shrink: 0;
   }
+  slot[name="icon"] {
+    --icon-size: var(--link-icon-size, 18px);
+    font-size: var(--link-icon-size, inherit);
+  }
+  #label {
+    border-radius: var(--link-border-radius, var(--eun-border-radius-m, 8px));
+    outline: 2px solid transparent;
+    transition: outline var(--_duration) var(--eun-easing-out, ease-out);
+  }
+  #external-link-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    margin-inline-start: calc(-1 * var(--eun-space-xs, 4px));
+    transform: rotate(-45deg);
+  }
   #link {
     display: inline-flex;
     align-items: center;
     gap: var(--eun-space-s, 8px);
-    padding: var(--link-padding, 0);
+    padding: var(
+      --link-padding,
+      var(--link-padding-block, 0) var(--link-padding-inline, 0)
+    );
     background: var(--link-background, transparent);
     color: var(--_color);
     font: inherit;
     text-decoration: var(--_textDecoration);
-    text-wrap: pretty;
+    text-wrap-style: pretty;
     border-radius: var(--link-border-radius, var(--eun-border-radius-m, 8px));
     cursor: pointer;
     outline: 2px solid transparent;
     transition:
-      color 0.3s ease-out,
-      background-color 0.3s ease-out,
-      outline 0.3s ease-out,
-      text-decoration-color 0.3s ease-out;
+      color var(--_duration) var(--eun-easing-out, ease-out),
+      background-color var(--_duration) var(--eun-easing-out, ease-out),
+      outline var(--_duration) var(--eun-easing-out, ease-out),
+      text-decoration-color var(--_duration) var(--eun-easing-out, ease-out);
   }
   #link:visited {
     color: var(--_colorVisited);
@@ -103,6 +125,18 @@ import{a as s}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js
     outline-offset: 2px;
     --icon-color: var(--link-icon-color, var(--_colorHover));
   }
+  #link.has-icon:focus-visible {
+    background: var(--link-background, transparent);
+    outline-color: transparent;
+  }
+  #link.has-icon:focus-visible #label {
+    background: var(
+      --link-background-focus,
+      var(--link-background, transparent)
+    );
+    outline-color: var(--_colorFocus);
+    outline-offset: 2px;
+  }
 
   :host([current]) #link,
   :host([current]) #link:visited,
@@ -114,8 +148,106 @@ import{a as s}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js
     --icon-color: var(--link-icon-color, var(--_colorCurrent));
   }
 
+  #link.slotted-link {
+    position: relative;
+    text-decoration: none;
+    cursor: auto;
+  }
+  ::slotted(a)::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
+  ::slotted(a) {
+    color: var(--_color);
+    font: inherit;
+    text-decoration: var(--_textDecoration);
+    text-wrap-style: pretty;
+    border-radius: var(--link-border-radius, var(--eun-border-radius-m, 8px));
+    transition:
+      color var(--_duration) var(--eun-easing-out, ease-out),
+      background-color var(--_duration) var(--eun-easing-out, ease-out),
+      text-decoration-color var(--_duration) var(--eun-easing-out, ease-out);
+  }
+  ::slotted(a:visited) {
+    color: var(--_colorVisited);
+    text-decoration-color: var(--_colorVisited);
+  }
+  ::slotted(a:visited:hover) {
+    color: var(--_colorVisitedHover);
+    text-decoration-color: var(--_colorVisitedHover);
+  }
+  :host([visited-style="off"]) ::slotted(a:visited) {
+    color: var(--_color);
+    text-decoration-color: currentColor;
+  }
+  :host([visited-style="off"]) ::slotted(a:visited:hover) {
+    color: var(--_colorHover);
+    text-decoration-color: currentColor;
+  }
+  :host([visited-style="on"]) ::slotted(a) {
+    color: var(--_colorVisited);
+    text-decoration-color: var(--_colorVisited);
+  }
+  :host([visited-style="on"]) ::slotted(a:hover) {
+    color: var(--_colorVisitedHover);
+    text-decoration-color: var(--_colorVisitedHover);
+  }
+  ::slotted(a:hover) {
+    color: var(--_colorHover);
+  }
+  #link.slotted-link:hover {
+    --icon-color: var(--link-icon-color, var(--_colorHover));
+  }
+  ::slotted(a:focus-visible) {
+    color: var(--_colorHover) !important;
+    text-decoration: none;
+    outline: none;
+  }
+  #link.has-icon ::slotted(a) {
+    outline: 2px solid transparent;
+    transition:
+      color var(--_duration) var(--eun-easing-out, ease-out),
+      background-color var(--_duration) var(--eun-easing-out, ease-out),
+      outline var(--_duration) var(--eun-easing-out, ease-out),
+      text-decoration-color var(--_duration) var(--eun-easing-out, ease-out);
+  }
+  #link.has-icon ::slotted(a:focus-visible) {
+    background: var(
+      --link-background-focus,
+      var(--link-background, transparent)
+    );
+    outline-color: var(--_colorFocus);
+    outline-offset: 2px;
+  }
+  :host(:state(focus-visible)) #link.slotted-link.has-icon {
+    --icon-color: var(--link-icon-color, var(--_colorHover));
+  }
+  :host(:state(focus-visible)) #link.slotted-link:not(.has-icon) {
+    background: var(
+      --link-background-focus,
+      var(--link-background, transparent)
+    );
+    outline-color: var(--_colorFocus);
+    outline-offset: 2px;
+    --icon-color: var(--link-icon-color, var(--_colorHover));
+  }
+  :host([current]) ::slotted(a),
+  :host([current]) ::slotted(a:visited),
+  :host([current]) ::slotted(a:hover),
+  :host([current]) ::slotted(a:visited:hover),
+  :host([current]) ::slotted(a:focus-visible) {
+    color: var(--_colorCurrent) !important;
+    text-decoration-color: var(--_colorCurrent);
+  }
+  :host([current]) #link.slotted-link {
+    --icon-color: var(--link-icon-color, var(--_colorCurrent));
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    #link {
+    #link,
+    ::slotted(a) {
       transition: none;
     }
   }
@@ -131,28 +263,43 @@ import{a as s}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js
     white-space: nowrap;
     border: 0;
   }
-`,f=k;var b="eun-link",o=class extends h{constructor(){super();this.target="_self";this.theme="light";this.visitedStyle="auto";this.current=!1;this.handleIconSlotChange=()=>{this.requestUpdate()};typeof this.attachInternals=="function"&&(this.internals=this.attachInternals())}get states(){return this.internals?.states}static get observedAttributes(){return[...super.observedAttributes,"visitedstyle"]}attributeChangedCallback(e,l,c){if(e==="visitedstyle"){this.visitedStyle=c??"auto";return}super.attributeChangedCallback(e,l,c)}handleFocus(e){e.currentTarget.matches(":focus-visible")&&this.states?.add("focus-visible")}handleBlur(){this.states?.delete("focus-visible")}handleClick(e){p(this,e,this.href,this.target)}render(){let e=this.target==="_blank",l=!!this.icon||this.iconSlotEls?.length>0;return n`
+`,H=$;var S="eun-link",e,h,t=class extends y(_){constructor(){super();this.target="_self";this.theme="light";this.visitedStyle="auto";this.current=!1;p(this,e);p(this,h,new C(this,()=>this.slottedAnchor,()=>this.dictionary.link.opensInNewTab));this.handleDefaultSlotChange=()=>{this.requestUpdate()};this.handleSlottedFocusIn=o=>{let i=o.target;i===this.slottedAnchor&&i.matches(":focus-visible")&&this.states?.add("focus-visible")};this.handleSlottedFocusOut=o=>{o.target===this.slottedAnchor&&this.states?.delete("focus-visible")};this.handleIconSlotChange=()=>{this.requestUpdate()};typeof this.attachInternals=="function"&&(this.internals=this.attachInternals())}get states(){return this.internals?.states}static get observedAttributes(){return[...super.observedAttributes,"visitedstyle"]}attributeChangedCallback(o,i,s){if(o==="visitedstyle"){this.visitedStyle=s??"auto";return}super.attributeChangedCallback(o,i,s)}get slottedAnchor(){return this.href?null:this.querySelector(":scope > a")}connectedCallback(){super.connectedCallback(),this.addEventListener("focusin",this.handleSlottedFocusIn),this.addEventListener("focusout",this.handleSlottedFocusOut)}disconnectedCallback(){this.removeEventListener("focusin",this.handleSlottedFocusIn),this.removeEventListener("focusout",this.handleSlottedFocusOut),super.disconnectedCallback()}updated(o){super.updated(o),this.syncSlottedAnchor()}syncSlottedAnchor(){let o=this.slottedAnchor;l(this,e)&&l(this,e)!==o&&(l(this,e).removeAttribute("aria-current"),u(this,e,void 0)),o&&(x(this),this.current?(o.setAttribute("aria-current","page"),u(this,e,o)):l(this,e)===o&&(o.removeAttribute("aria-current"),u(this,e,void 0)))}handleFocus(o){o.currentTarget.matches(":focus-visible")&&this.states?.add("focus-visible")}handleBlur(){this.states?.delete("focus-visible")}handleClick(o){m(this,o,this.href,this.target)}renderExternalLinkIcon(){return a`<span id="external-link-icon">
+      <eun-icon name="arrow_forward" shape="round" size="14"></eun-icon>
+    </span>`}render(){let o=this.target==="_blank",i=!!this.icon||this.iconSlotEls?.length>0,s=a`<slot
+      name="icon"
+      class=${v({"has-icon":i})}
+      @slotchange=${this.handleIconSlotChange}
+    >
+      ${this.icon?a`<eun-icon name=${this.icon}></eun-icon>`:c}
+    </slot>`;if(this.slottedAnchor)return a`
+        <span
+          id="link"
+          part="link"
+          class=${v({"has-icon":i,"slotted-link":!0})}
+        >
+          ${s}
+          <slot @slotchange=${this.handleDefaultSlotChange}></slot>
+          ${l(this,h).isBlank?this.renderExternalLinkIcon():c}
+        </span>
+      `;let f=`(${this.dictionary.link.opensInNewTab})`;return a`
       <a
         id="link"
         part="link"
-        class=${s({"has-icon":l})}
-        href=${i(this.href)}
+        class=${v({"has-icon":i})}
+        href=${d(this.href)}
         target=${this.target}
-        aria-current=${i(this.current?"page":void 0)}
-        rel=${i(e?"noopener noreferrer":void 0)}
-        aria-label=${i(e&&this.ariaLabel?`${this.ariaLabel} (opens in a new tab)`:this.ariaLabel??void 0)}
+        aria-current=${d(this.current?"page":void 0)}
+        rel=${d(o?"noopener noreferrer":void 0)}
+        aria-label=${d(o&&this.ariaLabel?`${this.ariaLabel} ${f}`:this.ariaLabel??void 0)}
         @click=${this.handleClick}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
       >
-        <slot
-          name="icon"
-          class=${s({"has-icon":l})}
-          @slotchange=${this.handleIconSlotChange}
-        >
-          ${this.icon?n`<eun-icon name=${this.icon} size="18"></eun-icon>`:a}
-        </slot>
-        <slot></slot>
-        ${e&&!this.ariaLabel?n`<span class="sr-only"> (opens in a new tab)</span>`:a}
+        ${s}
+        <span id="label"
+          ><slot @slotchange=${this.handleDefaultSlotChange}></slot
+        ></span>
+        ${o&&!this.ariaLabel?a`<span class="sr-only"> ${f}</span>`:c}
+        ${o?this.renderExternalLinkIcon():c}
       </a>
-    `}};o.styles=f,r([t()],o.prototype,"href",2),r([t()],o.prototype,"target",2),r([t()],o.prototype,"icon",2),r([t({reflect:!0})],o.prototype,"theme",2),r([t({reflect:!0,attribute:"visited-style"})],o.prototype,"visitedStyle",2),r([t({type:Boolean,reflect:!0})],o.prototype,"current",2),r([u({slot:"icon"})],o.prototype,"iconSlotEls",2),o=r([d(b)],o);export{o as EunomiaLink,b as EunomiaLinkTagName};
+    `}};e=new WeakMap,h=new WeakMap,t.styles=H,r([n()],t.prototype,"href",2),r([n()],t.prototype,"target",2),r([n()],t.prototype,"icon",2),r([n({reflect:!0,converter:{toAttribute:o=>o==="light"?null:o}})],t.prototype,"theme",2),r([n({reflect:!0,attribute:"visited-style",converter:{toAttribute:o=>o==="auto"?null:o}})],t.prototype,"visitedStyle",2),r([n({type:Boolean,reflect:!0})],t.prototype,"current",2),r([g({slot:"icon"})],t.prototype,"iconSlotEls",2),t=r([k(S)],t);export{t as EunomiaLink,S as EunomiaLinkTagName};

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

@@ -1 +1 @@
-import{a,b}from"./chunks/chunk-5XJLIHAU.js";import"./chunks/chunk-MMLIPCOY.js";import"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import"./chunks/chunk-5EVP7YNE.js";import"./chunks/chunk-XH6NREVZ.js";export{b as EunomiaLoader,a as EunomiaLoaderTagName};
+import{a,b}from"./chunks/chunk-7KKWYPHY.js";import"./chunks/chunk-22D3SRFR.js";import"./chunks/chunk-PPCHQG7P.js";import"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import"./chunks/chunk-YITWLCD3.js";export{b as EunomiaLoader,a as EunomiaLoaderTagName};

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

@@ -1,4 +1,4 @@
-import{a as m,b as h,c as b}from"./chunks/chunk-6VK6SHCG.js";import{a as v}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js";import"./chunks/chunk-UDOZRIJZ.js";import{a as n}from"./chunks/chunk-5EVP7YNE.js";import{a as i,f as d,g as p,h as o,i as u,j as s,n as a,p as r,s as f}from"./chunks/chunk-XH6NREVZ.js";var l=class c extends Event{static{this.eventName="eunconfirm"}constructor(){super(c.eventName,{bubbles:!0,composed:!0,cancelable:!0})}};var y=p`
+import{a as m,b as h,c as v}from"./chunks/chunk-6VK6SHCG.js";import{a as b}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js";import"./chunks/chunk-UDOZRIJZ.js";import{a as n}from"./chunks/chunk-PPCHQG7P.js";import{a as t,f as d,h as p,j as r,k as u,l,p as i,r as a,u as f}from"./chunks/chunk-YITWLCD3.js";var s=class c extends Event{static{this.eventName="eunconfirm"}constructor(){super(c.eventName,{bubbles:!0,composed:!0,cancelable:!0})}};var C=p`
   :host {
     display: contents;
   }
@@ -16,8 +16,10 @@ import{a as m,b as h,c as b}from"./chunks/chunk-6VK6SHCG.js";import{a as v}from"
     );
     padding: var(
       --modal-padding,
-      var(--eun-space-l, 32px) var(--eun-space-m, 16px) var(--eun-space-m, 16px)
-        var(--eun-space-l, 32px)
+      var(--modal-padding-block, var(--eun-space-l, 32px))
+        var(--modal-padding-inline, var(--eun-space-m, 16px))
+        var(--modal-padding-block, var(--eun-space-m, 16px))
+        var(--modal-padding-inline, var(--eun-space-l, 32px))
     );
     box-sizing: border-box;
     display: flex;
@@ -39,8 +41,8 @@ import{a as m,b as h,c as b}from"./chunks/chunk-6VK6SHCG.js";import{a as v}from"
     opacity: 0;
     transform: scale(0.96);
     transition:
-      opacity 0.18s ease,
-      transform 0.18s ease;
+      opacity var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      transform var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   #surface:popover-open {
     visibility: visible;
@@ -67,12 +69,17 @@ import{a as m,b as h,c as b}from"./chunks/chunk-6VK6SHCG.js";import{a as v}from"
     background-color: rgba(7, 22, 33, 0);
     backdrop-filter: blur(0px);
     transition:
-      background-color 0.18s ease,
-      backdrop-filter 0.18s ease;
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease),
+      backdrop-filter var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease);
   }
   #surface:popover-open::backdrop {
     pointer-events: auto;
-    background-color: var(--modal-backdrop-color, rgba(7, 22, 33, 0.45));
+    background-color: var(
+      --modal-backdrop-color,
+      var(--eun-backdrop-color, rgba(7, 22, 33, 0.45))
+    );
     backdrop-filter: blur(var(--modal-backdrop-blur, 0px));
   }
   @starting-style {
@@ -134,26 +141,26 @@ import{a as m,b as h,c as b}from"./chunks/chunk-6VK6SHCG.js";import{a as v}from"
       transition-duration: 0.01ms;
     }
   }
-`,g=y;var C="eun-modal",e=class extends v(f){constructor(){super(...arguments);this.open=!1;this.kind="dialog";this.closeOnBackdrop=!0;this.dirty=!1;this.hideActions=!1;this.closeable=!0;this.cancelLabel="Cancel";this.confirmLabel="Confirm";this.confirmVariant="primary";this.ariaLabelClose="Close";this.confirmCloseHeading="Discard changes?";this.confirmCloseDescription="You have unsaved changes. This action can't be undone.";this.confirmCloseCancelLabel="Keep editing";this.confirmCloseConfirmLabel="Discard";this.mountConfirmModal=!1;this.handleDiscardConfirmed=t=>{t.stopPropagation(),this.confirmDiscard()};this.stopDialogPropagation=t=>{t.stopPropagation()};this.handleToggle=t=>{let x=t;if(this.syncingFromPopover=!0,this.open=x.newState==="open",this.syncingFromPopover=!1,this.open){this.openDialogSurface({surfaceEl:this.surfaceEl,onEscape:()=>this.requestClose(),onOutsideClick:()=>{this.closeOnBackdrop&&this.requestClose()}}),this.updateComplete.then(()=>this.focusInitialElement());return}this.closeDialogSurface()};this.handleCommandEvent=t=>{b(t,this)}}willUpdate(t){t.has("dirty")&&this.dirty&&(this.mountConfirmModal=!0)}updated(t){super.updated(t),t.has("open")&&this.syncPopoverOpenState(this.open,this.surfaceEl)}connectedCallback(){super.connectedCallback?.(),this.addEventListener("command",this.handleCommandEvent)}disconnectedCallback(){this.removeEventListener("command",this.handleCommandEvent),this.teardownDialogSurface(this.open),super.disconnectedCallback?.()}show(){this.open=!0}hide(){this.open=!1}confirm(){let t=new l;this.dispatchEvent(t),t.defaultPrevented||(this.open=!1)}cancel(){let t=new m;this.dispatchEvent(t),t.defaultPrevented||(this.open=!1)}requestClose(){if(this.dirty){let t=new h;this.dispatchEvent(t),t.defaultPrevented||this.confirmCloseModalEl?.show();return}this.cancel()}confirmDiscard(){this.dirty=!1,this.cancel()}focusInitialElement(){let t=this.querySelector("[autofocus]");if(t){t.focus();return}if(!this.hideActions){this.cancelButtonEl?.focus();return}this.surfaceEl?.focus()}renderHeader(){return!this.heading&&!this.description?r:a`
+`,g=C;var y="eun-modal",e=class extends b(f){constructor(){super(...arguments);this.open=!1;this.kind="dialog";this.closeOnBackdrop=!0;this.dirty=!1;this.hideActions=!1;this.closeable=!0;this.cancelLabel="Cancel";this.confirmLabel="Confirm";this.confirmColor="primary";this.ariaLabelClose="Close";this.confirmCloseHeading="Discard changes?";this.confirmCloseDescription="You have unsaved changes. This action can't be undone.";this.confirmCloseCancelLabel="Keep editing";this.confirmCloseConfirmLabel="Discard";this.mountConfirmModal=!1;this.handleDiscardConfirmed=o=>{o.stopPropagation(),this.confirmDiscard()};this.stopDialogPropagation=o=>{o.stopPropagation()};this.handleToggle=o=>{let x=o;if(this.syncingFromPopover=!0,this.open=x.newState==="open",this.syncingFromPopover=!1,this.open){this.openDialogSurface({surfaceEl:this.surfaceEl,onEscape:()=>this.requestClose(),onOutsideClick:()=>{this.closeOnBackdrop&&this.requestClose()}}),this.updateComplete.then(()=>this.focusInitialElement());return}this.closeDialogSurface()};this.handleCommandEvent=o=>{v(o,this)}}willUpdate(o){o.has("dirty")&&this.dirty&&(this.mountConfirmModal=!0)}updated(o){super.updated(o),o.has("open")&&this.syncPopoverOpenState(this.open,this.surfaceEl)}connectedCallback(){super.connectedCallback?.(),this.addEventListener("command",this.handleCommandEvent)}disconnectedCallback(){this.removeEventListener("command",this.handleCommandEvent),this.teardownDialogSurface(this.open),super.disconnectedCallback?.()}show(){this.open=!0}hide(){this.open=!1}confirm(){let o=new s;this.dispatchEvent(o),o.defaultPrevented||(this.open=!1)}cancel(){let o=new m;this.dispatchEvent(o),o.defaultPrevented||(this.open=!1)}requestClose(){if(this.dirty){let o=new h;this.dispatchEvent(o),o.defaultPrevented||this.confirmCloseModalEl?.show();return}this.cancel()}confirmDiscard(){this.dirty=!1,this.cancel()}focusInitialElement(){let o=this.querySelector("[autofocus]");if(o){o.focus();return}if(!this.hideActions){this.cancelButtonEl?.focus();return}this.surfaceEl?.focus()}renderHeader(){return!this.heading&&!this.description?a:i`
       <div id="header">
-        ${this.heading?a`<h2 id="heading">${this.heading}</h2>`:r}
-        ${this.description?a`<p id="description">${this.description}</p>`:r}
+        ${this.heading?i`<h2 id="heading">${this.heading}</h2>`:a}
+        ${this.description?i`<p id="description">${this.description}</p>`:a}
       </div>
-    `}renderConfirmCloseModal(){return a`
+    `}renderConfirmCloseModal(){return i`
       <eun-modal
         id="confirm-close-modal"
         kind="alert"
         heading=${this.confirmCloseHeading}
         cancel-label=${this.confirmCloseCancelLabel}
         confirm-label=${this.confirmCloseConfirmLabel}
-        confirm-variant="critical"
+        confirm-color="critical"
         @eunconfirm=${this.handleDiscardConfirmed}
         @euncancel=${this.stopDialogPropagation}
       >
-        ${this.confirmCloseDescription?a`<p>${this.confirmCloseDescription}</p>`:r}
+        ${this.confirmCloseDescription?i`<p>${this.confirmCloseDescription}</p>`:a}
         <slot name="confirm-close"></slot>
       </eun-modal>
-    `}render(){return a`
+    `}render(){return i`
       <div
         id="surface"
         popover="manual"
@@ -165,7 +172,7 @@ import{a as m,b as h,c as b}from"./chunks/chunk-6VK6SHCG.js";import{a as v}from"
         tabindex="-1"
         @toggle=${this.handleToggle}
       >
-        ${this.closeable?a`
+        ${this.closeable?i`
               <eun-button
                 id="close-button"
                 appearance="ghost"
@@ -176,23 +183,23 @@ import{a as m,b as h,c as b}from"./chunks/chunk-6VK6SHCG.js";import{a as v}from"
               >
                 <eun-icon name="close" size="16"></eun-icon>
               </eun-button>
-            `:r}
+            `:a}
         ${this.renderHeader()}
         <div id="body">
           <slot></slot>
         </div>
-        ${this.hideActions?r:a`
+        ${this.hideActions?a:i`
               <div id="actions">
                 <slot name="footer">
                   <eun-button
                     id="cancel-button"
                     appearance="ghost"
-                    variant=${n(this.cancelVariant)}
+                    color=${n(this.cancelColor)}
                     @click=${()=>this.requestClose()}
                     >${this.cancelLabel}</eun-button
                   >
                   <eun-button
-                    variant=${this.confirmVariant}
+                    color=${this.confirmColor}
                     @click=${()=>this.confirm()}
                     >${this.confirmLabel}</eun-button
                   >
@@ -200,5 +207,5 @@ import{a as m,b as h,c as b}from"./chunks/chunk-6VK6SHCG.js";import{a as v}from"
               </div>
             `}
       </div>
-      ${this.mountConfirmModal?this.renderConfirmCloseModal():r}
-    `}};e.styles=g,i([o({type:Boolean,reflect:!0})],e.prototype,"open",2),i([o()],e.prototype,"heading",2),i([o()],e.prototype,"description",2),i([o({reflect:!0})],e.prototype,"kind",2),i([o({type:Boolean,attribute:"close-on-backdrop"})],e.prototype,"closeOnBackdrop",2),i([o({type:Boolean,reflect:!0})],e.prototype,"dirty",2),i([o({type:Boolean,attribute:"hide-actions"})],e.prototype,"hideActions",2),i([o({type:Boolean,reflect:!0})],e.prototype,"closeable",2),i([o({attribute:"cancel-label"})],e.prototype,"cancelLabel",2),i([o({attribute:"confirm-label"})],e.prototype,"confirmLabel",2),i([o({attribute:"confirm-variant"})],e.prototype,"confirmVariant",2),i([o({attribute:"cancel-variant"})],e.prototype,"cancelVariant",2),i([o({attribute:"aria-label-close"})],e.prototype,"ariaLabelClose",2),i([o({attribute:"confirm-close-heading"})],e.prototype,"confirmCloseHeading",2),i([o({attribute:"confirm-close-description"})],e.prototype,"confirmCloseDescription",2),i([o({attribute:"confirm-close-cancel-label"})],e.prototype,"confirmCloseCancelLabel",2),i([o({attribute:"confirm-close-confirm-label"})],e.prototype,"confirmCloseConfirmLabel",2),i([s("#surface")],e.prototype,"surfaceEl",2),i([s("#cancel-button")],e.prototype,"cancelButtonEl",2),i([s("#confirm-close-modal")],e.prototype,"confirmCloseModalEl",2),i([u()],e.prototype,"mountConfirmModal",2),e=i([d(C)],e);export{e as EunomiaModal,C as EunomiaModalTagName};
+      ${this.mountConfirmModal?this.renderConfirmCloseModal():a}
+    `}};e.styles=g,t([r({type:Boolean,reflect:!0})],e.prototype,"open",2),t([r()],e.prototype,"heading",2),t([r()],e.prototype,"description",2),t([r({reflect:!0})],e.prototype,"kind",2),t([r({type:Boolean,attribute:"close-on-backdrop"})],e.prototype,"closeOnBackdrop",2),t([r({type:Boolean,reflect:!0})],e.prototype,"dirty",2),t([r({type:Boolean,attribute:"hide-actions"})],e.prototype,"hideActions",2),t([r({type:Boolean,reflect:!0})],e.prototype,"closeable",2),t([r({attribute:"cancel-label"})],e.prototype,"cancelLabel",2),t([r({attribute:"confirm-label"})],e.prototype,"confirmLabel",2),t([r({attribute:"confirm-color"})],e.prototype,"confirmColor",2),t([r({attribute:"cancel-color"})],e.prototype,"cancelColor",2),t([r({attribute:"aria-label-close"})],e.prototype,"ariaLabelClose",2),t([r({attribute:"confirm-close-heading"})],e.prototype,"confirmCloseHeading",2),t([r({attribute:"confirm-close-description"})],e.prototype,"confirmCloseDescription",2),t([r({attribute:"confirm-close-cancel-label"})],e.prototype,"confirmCloseCancelLabel",2),t([r({attribute:"confirm-close-confirm-label"})],e.prototype,"confirmCloseConfirmLabel",2),t([l("#surface")],e.prototype,"surfaceEl",2),t([l("#cancel-button")],e.prototype,"cancelButtonEl",2),t([l("#confirm-close-modal")],e.prototype,"confirmCloseModalEl",2),t([u()],e.prototype,"mountConfirmModal",2),e=t([d(y)],e);export{e as EunomiaModal,y as EunomiaModalTagName};

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

@@ -1,4 +1,4 @@
-import{a as N}from"./chunks/chunk-5EVP7YNE.js";import{a,f as y,g as $,h as i,n as r,p,s as z}from"./chunks/chunk-XH6NREVZ.js";var g=class b extends Event{static{this.eventName="eunpagechange"}constructor(d){super(b.eventName,{bubbles:!0,composed:!1}),this.page=d}};var h=class b extends Event{static{this.eventName="eunpagesizechange"}constructor(d){super(b.eventName,{bubbles:!0,composed:!1}),this.pageSize=d}};var S=$`
+import{a as N}from"./chunks/chunk-PPCHQG7P.js";import{a,f as y,h as $,j as r,p as i,r as p,u as z}from"./chunks/chunk-YITWLCD3.js";var g=class b extends Event{static{this.eventName="eunpagechange"}constructor(d){super(b.eventName,{bubbles:!0,composed:!1}),this.page=d}};var h=class b extends Event{static{this.eventName="eunpagesizechange"}constructor(d){super(b.eventName,{bubbles:!0,composed:!1}),this.pageSize=d}};var S=$`
   :host {
     display: block;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
@@ -58,9 +58,14 @@ import{a as N}from"./chunks/chunk-5EVP7YNE.js";import{a,f as y,g as $,h as i,n a
     outline-offset: 2px;
     user-select: none;
     transition:
-      background var(--pagination-transition-duration, 0.2s) ease-out,
-      outline var(--pagination-transition-duration, 0.2s) ease-out,
-      color var(--pagination-transition-duration, 0.2s) ease-out;
+      background
+        var(--pagination-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out),
+      outline
+        var(--pagination-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out),
+      color var(--pagination-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out);
   }
   button.control {
     cursor: pointer;
@@ -123,7 +128,7 @@ import{a as N}from"./chunks/chunk-5EVP7YNE.js";import{a,f as y,g as $,h as i,n a
   #page-size eun-select {
     width: 100%;
   }
-`;var C="eun-pagination",t=class extends z{constructor(){super(...arguments);this.page=1;this.totalPages=1;this.siblingCount=1;this.boundaryCount=1;this.hidePrevNext=!1;this.hideFirstLast=!1;this.disabled=!1;this.showLabels=!1;this.pageSizeOptions=[];this.pageSizeLabel="Items per page";this.ariaLabelPrevious="Previous page";this.ariaLabelNext="Next page";this.ariaLabelFirst="First page";this.ariaLabelLast="Last page";this.ariaLabelPage="Page"}getPageItems(){let e=(f,x)=>f>x?[]:Array.from({length:x-f+1},(k,P)=>f+P),{page:l,totalPages:s,siblingCount:c,boundaryCount:n}=this;if(n*2+c*2+3>=s)return e(1,s);let u=Math.max(l-c,n+2),m=Math.min(l+c,s-n-1),L=u>n+2,w=m<s-n-1,o=[...e(1,n)];return L?o.push("start-ellipsis"):o.push(...e(n+1,u-1)),o.push(...e(u,m)),w?o.push("end-ellipsis"):o.push(...e(m+1,s-n)),o.push(...e(s-n+1,s)),o}requestPage(e){e===this.page||e<1||e>this.totalPages||this.dispatchEvent(new g(e))}handlePageSizeChange(e){let l=Number(e.target.value);Number.isNaN(l)||this.dispatchEvent(new h(l))}renderControl(e,l,s,c,n){let v=r`<eun-icon name=${s} size="16"></eun-icon>`,u=this.showLabels?r`<span class="label">${l}</span>`:p;return r`
+`;var C="eun-pagination",t=class extends z{constructor(){super(...arguments);this.page=1;this.totalPages=1;this.siblingCount=1;this.boundaryCount=1;this.hidePrevNext=!1;this.hideFirstLast=!1;this.disabled=!1;this.showLabels=!1;this.pageSizeOptions=[];this.pageSizeLabel="Items per page";this.ariaLabelPrevious="Previous page";this.ariaLabelNext="Next page";this.ariaLabelFirst="First page";this.ariaLabelLast="Last page";this.ariaLabelPage="Page"}getPageItems(){let e=(f,x)=>f>x?[]:Array.from({length:x-f+1},(k,P)=>f+P),{page:l,totalPages:s,siblingCount:c,boundaryCount:n}=this;if(n*2+c*2+3>=s)return e(1,s);let u=Math.max(l-c,n+2),m=Math.min(l+c,s-n-1),L=u>n+2,w=m<s-n-1,o=[...e(1,n)];return L?o.push("start-ellipsis"):o.push(...e(n+1,u-1)),o.push(...e(u,m)),w?o.push("end-ellipsis"):o.push(...e(m+1,s-n)),o.push(...e(s-n+1,s)),o}requestPage(e){e===this.page||e<1||e>this.totalPages||this.dispatchEvent(new g(e))}handlePageSizeChange(e){let l=Number(e.target.value);Number.isNaN(l)||this.dispatchEvent(new h(l))}renderControl(e,l,s,c,n){let v=i`<eun-icon name=${s} size="16"></eun-icon>`,u=this.showLabels?i`<span class="label">${l}</span>`:p;return i`
       <li>
         <button
           type="button"
@@ -132,10 +137,10 @@ import{a as N}from"./chunks/chunk-5EVP7YNE.js";import{a,f as y,g as $,h as i,n a
           ?disabled=${this.disabled||c}
           @click=${()=>this.requestPage(e)}
         >
-          ${n==="start"?r`${v}${u}`:r`${u}${v}`}
+          ${n==="start"?i`${v}${u}`:i`${u}${v}`}
         </button>
       </li>
-    `}renderPageSizeSelector(){return r`
+    `}renderPageSizeSelector(){return i`
       <div id="page-size">
         <eun-select
           label=${this.pageSizeLabel}
@@ -143,10 +148,10 @@ import{a as N}from"./chunks/chunk-5EVP7YNE.js";import{a,f as y,g as $,h as i,n a
           ?disabled=${this.disabled}
           @eunchange=${this.handlePageSizeChange}
         >
-          ${this.pageSizeOptions.map(e=>r`<option value=${e}>${e}</option>`)}
+          ${this.pageSizeOptions.map(e=>i`<option value=${e}>${e}</option>`)}
         </eun-select>
       </div>
-    `}renderItem(e){return e==="start-ellipsis"||e==="end-ellipsis"?r`<li><span class="ellipsis" aria-hidden="true">…</span></li>`:e===this.page?r`
+    `}renderItem(e){return e==="start-ellipsis"||e==="end-ellipsis"?i`<li><span class="ellipsis" aria-hidden="true">…</span></li>`:e===this.page?i`
         <li>
           <span
             class="page current"
@@ -155,7 +160,7 @@ import{a as N}from"./chunks/chunk-5EVP7YNE.js";import{a,f as y,g as $,h as i,n a
             >${e}</span
           >
         </li>
-      `:r`
+      `:i`
       <li>
         <button
           type="button"
@@ -167,7 +172,7 @@ import{a as N}from"./chunks/chunk-5EVP7YNE.js";import{a,f as y,g as $,h as i,n a
           ${e}
         </button>
       </li>
-    `}render(){return r`
+    `}render(){return i`
       <nav aria-label=${this.ariaLabel??"Pagination"}>
         ${this.pageSizeOptions.length?this.renderPageSizeSelector():p}
         <ul id="list" role="list">
@@ -178,4 +183,4 @@ import{a as N}from"./chunks/chunk-5EVP7YNE.js";import{a,f as y,g as $,h as i,n a
           ${this.hideFirstLast?p:this.renderControl(this.totalPages,this.ariaLabelLast,"last_page",this.page>=this.totalPages,"end")}
         </ul>
       </nav>
-    `}};t.styles=[S],a([i({type:Number})],t.prototype,"page",2),a([i({type:Number,attribute:"total-pages"})],t.prototype,"totalPages",2),a([i({type:Number,attribute:"sibling-count"})],t.prototype,"siblingCount",2),a([i({type:Number,attribute:"boundary-count"})],t.prototype,"boundaryCount",2),a([i({type:Boolean,attribute:"hide-prev-next"})],t.prototype,"hidePrevNext",2),a([i({type:Boolean,attribute:"hide-first-last"})],t.prototype,"hideFirstLast",2),a([i({type:Boolean,reflect:!0})],t.prototype,"disabled",2),a([i({type:Boolean,attribute:"show-labels",reflect:!0})],t.prototype,"showLabels",2),a([i({type:Number,attribute:"page-size"})],t.prototype,"pageSize",2),a([i({type:Array,attribute:"page-size-options"})],t.prototype,"pageSizeOptions",2),a([i({attribute:"page-size-label"})],t.prototype,"pageSizeLabel",2),a([i({attribute:"aria-label-previous"})],t.prototype,"ariaLabelPrevious",2),a([i({attribute:"aria-label-next"})],t.prototype,"ariaLabelNext",2),a([i({attribute:"aria-label-first"})],t.prototype,"ariaLabelFirst",2),a([i({attribute:"aria-label-last"})],t.prototype,"ariaLabelLast",2),a([i({attribute:"aria-label-page"})],t.prototype,"ariaLabelPage",2),t=a([y(C)],t);export{t as EunomiaPagination,C as EunomiaPaginationTagName};
+    `}};t.styles=[S],a([r({type:Number})],t.prototype,"page",2),a([r({type:Number,attribute:"total-pages"})],t.prototype,"totalPages",2),a([r({type:Number,attribute:"sibling-count"})],t.prototype,"siblingCount",2),a([r({type:Number,attribute:"boundary-count"})],t.prototype,"boundaryCount",2),a([r({type:Boolean,attribute:"hide-prev-next"})],t.prototype,"hidePrevNext",2),a([r({type:Boolean,attribute:"hide-first-last"})],t.prototype,"hideFirstLast",2),a([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),a([r({type:Boolean,attribute:"show-labels",reflect:!0})],t.prototype,"showLabels",2),a([r({type:Number,attribute:"page-size"})],t.prototype,"pageSize",2),a([r({type:Array,attribute:"page-size-options"})],t.prototype,"pageSizeOptions",2),a([r({attribute:"page-size-label"})],t.prototype,"pageSizeLabel",2),a([r({attribute:"aria-label-previous"})],t.prototype,"ariaLabelPrevious",2),a([r({attribute:"aria-label-next"})],t.prototype,"ariaLabelNext",2),a([r({attribute:"aria-label-first"})],t.prototype,"ariaLabelFirst",2),a([r({attribute:"aria-label-last"})],t.prototype,"ariaLabelLast",2),a([r({attribute:"aria-label-page"})],t.prototype,"ariaLabelPage",2),t=a([y(C)],t);export{t as EunomiaPagination,C as EunomiaPaginationTagName};

package/dist/cdn/components/eun-password-strength.js

@@ -1,4 +1,4 @@
-import{a as x}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as f}from"./chunks/chunk-5EVP7YNE.js";import{a as s,f as c,g as u,h as l,j as v,n as i,p as g,s as h}from"./chunks/chunk-XH6NREVZ.js";var L=u`
+import{a as f}from"./chunks/chunk-PPCHQG7P.js";import{a as x}from"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import{a as s,f as c,h as u,j as l,l as v,p as i,r as g,u as h}from"./chunks/chunk-YITWLCD3.js";var L=u`
   :host {
     display: block;
     width: 100%;
@@ -57,7 +57,11 @@ import{a as x}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js
       var(--eun-surface-sunken-strong, #ecedf0)
     );
     transition: background-color
-      var(--password-strength-transition-duration, 0.3s) ease;
+      var(
+        --password-strength-transition-duration,
+        var(--eun-duration-xl, 300ms)
+      )
+      var(--eun-easing-default, ease);
   }
 
   .segment.filled {

package/dist/cdn/components/eun-progress-bar.js

@@ -1,4 +1,4 @@
-import{a as s}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a}from"./chunks/chunk-5EVP7YNE.js";import{a as e,f as i,g as l,h as o,l as t,n,s as u}from"./chunks/chunk-XH6NREVZ.js";var p=l`
+import{a}from"./chunks/chunk-PPCHQG7P.js";import{a as s}from"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import{a as e,f as i,h as l,j as o,n as t,p as n,u}from"./chunks/chunk-YITWLCD3.js";var p=l`
   :host {
     --_optimumColor: var(
       --progress-bar-fill-color,
@@ -125,7 +125,9 @@ import{a as s}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js
       --progress-bar-border-radius,
       var(--eun-border-radius-full, 999px)
     );
-    transition: width var(--progress-bar-transition-duration, 0.3s) ease;
+    transition: width
+      var(--progress-bar-transition-duration, var(--eun-duration-xl, 300ms))
+      var(--eun-easing-default, ease);
   }
 
   #field::-webkit-meter-suboptimum-value {
@@ -134,7 +136,9 @@ import{a as s}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js
       --progress-bar-border-radius,
       var(--eun-border-radius-full, 999px)
     );
-    transition: width var(--progress-bar-transition-duration, 0.3s) ease;
+    transition: width
+      var(--progress-bar-transition-duration, var(--eun-duration-xl, 300ms))
+      var(--eun-easing-default, ease);
   }
 
   #field::-webkit-meter-even-less-good-value {
@@ -143,7 +147,9 @@ import{a as s}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js
       --progress-bar-border-radius,
       var(--eun-border-radius-full, 999px)
     );
-    transition: width var(--progress-bar-transition-duration, 0.3s) ease;
+    transition: width
+      var(--progress-bar-transition-duration, var(--eun-duration-xl, 300ms))
+      var(--eun-easing-default, ease);
   }
 
   #field::-moz-meter-bar {
@@ -153,7 +159,9 @@ import{a as s}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js
       var(--eun-border-radius-full, 999px)
     );
     background: var(--_optimumColor);
-    transition: width var(--progress-bar-transition-duration, 0.3s) ease;
+    transition: width
+      var(--progress-bar-transition-duration, var(--eun-duration-xl, 300ms))
+      var(--eun-easing-default, ease);
   }
 
   #field:-moz-meter-sub-optimum::-moz-meter-bar {