@eunomia/elements 1.0.0-beta.9 → 1.0.0

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

@@ -1,351 +1,40 @@
-import{a as C}from"./chunks/chunk-3MTUVMM5.js";import{a as m,b as y}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 x}from"./chunks/chunk-JGV7LHEI.js";import"./chunks/chunk-GNAUNTS5.js";import{a as e,b as a,c as p,d as u,f,h as b,j as n,n as g,p as l,r as c,u as _}from"./chunks/chunk-YITWLCD3.js";var w=b`
-  :host {
-    --_color: var(--link-color, var(--eun-text-color, #071621));
-    --_colorHover: var(
-      --link-color-hover,
-      var(--eun-color-primary-500, #3d6fff)
-    );
-    --_colorFocus: var(
-      --link-color-focus,
-      var(--eun-color-primary-700, #3662e0)
-    );
-    --_colorVisited: var(
-      --link-color-visited,
-      var(--eun-color-purple-600, #991bed)
-    );
-    --_colorVisitedHover: var(
-      --link-color-visited-hover,
-      color-mix(in srgb, var(--_colorVisited) 80%, black)
-    );
-    --_colorCurrent: var(
-      --link-color-current,
-      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);
-    line-height: var(--link-line-height, inherit);
-    display: inline-flex;
-    align-items: center;
-  }
-  :host([theme="dark"]) {
-    --_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)
-    );
-  }
-  slot[name="icon"] {
-    display: none;
-  }
-  slot[name="icon"].has-icon {
-    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-color 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,
-      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-style: pretty;
-    border-radius: var(--link-border-radius, var(--eun-border-radius-m, 8px));
-    cursor: pointer;
-    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-color var(--_duration) var(--eun-easing-out, ease-out),
-      text-decoration-color var(--_duration) var(--eun-easing-out, ease-out);
-  }
-  #link:hover {
-    background: var(
-      --link-background-hover,
-      var(--link-background, transparent)
-    );
-  }
-  #link:visited {
-    color: var(--_colorVisited);
-    text-decoration-color: var(--_colorVisited);
-  }
-  #link:visited:hover {
-    color: var(--_colorVisitedHover);
-    text-decoration-color: var(--_colorVisitedHover);
-  }
-  :host([visited-style="off"]) #link:visited {
-    color: var(--_color);
-    text-decoration-color: currentColor;
-  }
-  :host([visited-style="off"]) #link:visited:hover {
-    color: var(--_colorHover);
-    text-decoration-color: currentColor;
-  }
-  :host([visited-style="on"]) #link {
-    color: var(--_colorVisited);
-    text-decoration-color: var(--_colorVisited);
-  }
-  :host([visited-style="on"]) #link:hover {
-    color: var(--_colorVisitedHover);
-    text-decoration-color: var(--_colorVisitedHover);
-  }
-  #link:hover {
-    color: var(--_colorHover);
-    --icon-color: var(--link-icon-color, var(--_colorHover));
-  }
-  #link:focus-visible {
-    color: var(--_colorHover) !important;
-    text-decoration: none;
-    background: var(
-      --link-background-focus,
-      var(--link-background, transparent)
-    );
-    outline-color: var(--_colorFocus);
-    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,
-  :host([current]) #link:hover,
-  :host([current]) #link:visited:hover,
-  :host([current]) #link:focus-visible {
-    color: var(--_colorCurrent) !important;
-    text-decoration-color: var(--_colorCurrent);
-    --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));
-    /* Transparent before the icon outline below is drawn, so it never fades
-       in from currentColor once has-icon lands after the first render. */
-    outline-color: transparent;
-    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-color 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));
-  }
-
-  :host([block]) {
-    display: flex;
-    width: 100%;
-    min-width: 0;
-    white-space: nowrap;
-  }
-  :host([block]) #link {
-    box-sizing: border-box;
-    flex: 1;
-    min-width: 0;
-  }
-  :host([block]) #link.has-icon:focus-visible,
-  :host([block]:state(focus-visible)) #link.slotted-link {
-    background: var(
-      --link-background-focus,
-      var(--link-background, transparent)
-    );
-    outline-color: var(--_colorFocus);
-    outline-offset: 2px;
-  }
-  :host([block]) #link.has-icon:focus-visible #label {
-    background: none;
-    outline-color: transparent;
-  }
-  :host([block]) #link.has-icon ::slotted(a:focus-visible) {
-    background: none;
-    outline-color: transparent;
-  }
-
-  :host([block]) #label,
-  :host([block]) ::slotted(a) {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    #link,
-    ::slotted(a) {
-      transition: none;
-    }
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    white-space: nowrap;
-    border: 0;
-  }
-`,H=w;var $="eun-link",r,h,t=class extends x(_){constructor(){super();this.target="_self";this.theme="light";this.visitedStyle="auto";this.current=!1;this.block=!1;p(this,r);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;a(this,r)&&a(this,r)!==o&&(a(this,r).removeAttribute("aria-current"),u(this,r,void 0)),o&&(y(this),this.current?(o.setAttribute("aria-current","page"),u(this,r,o)):a(this,r)===o&&(o.removeAttribute("aria-current"),u(this,r,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 l`<span id="external-link-icon">
+import{b as A}from"./chunks/chunk-GMWUHGNI.js";import{a as k}from"./chunks/chunk-3MTUVMM5.js";import{a as y,b as S}from"./chunks/chunk-5GKM5DIB.js";import{a as h}from"./chunks/chunk-PPCHQG7P.js";import{a as u}from"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import{a as $}from"./chunks/chunk-WP6ZYBAC.js";import"./chunks/chunk-2XPIGFBD.js";import{a as s,b as l,c as f,d,f as v,j as r,n as g,p as a,r as c,u as m}from"./chunks/chunk-YITWLCD3.js";var E="eun-link",n,p,e=class extends $(m){constructor(){super();this.target="_self";this.theme="light";this.visitedStyle="auto";this.current=!1;this.block=!1;f(this,n);f(this,p,new k(this,()=>this.slottedAnchor,()=>this.dictionary.link.opensInNewTab));this.handleDefaultSlotChange=()=>{this.requestUpdate()};this.handleSlottedFocusIn=t=>{let i=t.target;i===this.slottedAnchor&&i.matches(":focus-visible")&&this.states?.add("focus-visible")};this.handleSlottedFocusOut=t=>{t.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(t,i,o){if(t==="visitedstyle"){this.visitedStyle=o??"auto";return}super.attributeChangedCallback(t,i,o)}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(t){super.updated(t),this.syncSlottedAnchor()}syncSlottedAnchor(){let t=this.slottedAnchor;l(this,n)&&l(this,n)!==t&&(l(this,n).removeAttribute("aria-current"),d(this,n,void 0)),t&&(S(this),this.current?(t.setAttribute("aria-current","page"),d(this,n,t)):l(this,n)===t&&(t.removeAttribute("aria-current"),d(this,n,void 0)))}handleFocus(t){t.currentTarget.matches(":focus-visible")&&this.states?.add("focus-visible")}handleBlur(){this.states?.delete("focus-visible")}handleClick(t){y(this,t,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=l`<slot
+    </span>`}render(){let t=this.target==="_blank",i=!!this.icon||this.iconSlotEls?.length>0,o=a`<slot
       name="icon"
-      class=${v({"has-icon":i})}
+      class=${u({"has-icon":i})}
       @slotchange=${this.handleIconSlotChange}
     >
-      ${this.icon?l`<eun-icon name=${this.icon}></eun-icon>`:c}
-    </slot>`;if(this.slottedAnchor)return l`
+      ${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})}
+          class=${u({"has-icon":i,"slotted-link":!0})}
         >
-          ${s}
+          ${o}
           <slot @slotchange=${this.handleDefaultSlotChange}></slot>
-          ${a(this,h).isBlank?this.renderExternalLinkIcon():c}
+          ${l(this,p).isBlank?this.renderExternalLinkIcon():c}
         </span>
-      `;let k=`(${this.dictionary.link.opensInNewTab})`;return l`
+      `;let b=`(${this.dictionary.link.opensInNewTab})`;return a`
       <a
         id="link"
         part="link"
-        class=${v({"has-icon":i})}
-        href=${d(this.href)}
+        class=${u({"has-icon":i})}
+        href=${h(this.href)}
         target=${this.target}
-        aria-current=${d(this.current?"page":void 0)}
-        rel=${d(o?"noopener noreferrer":void 0)}
-        aria-label=${d(o&&this.ariaLabel?`${this.ariaLabel} ${k}`:this.ariaLabel??void 0)}
+        aria-current=${h(this.current?"page":void 0)}
+        rel=${h(t?"noopener noreferrer":void 0)}
+        aria-label=${h(t&&this.ariaLabel?`${this.ariaLabel} ${b}`:this.ariaLabel??void 0)}
         @click=${this.handleClick}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
       >
-        ${s}
+        ${o}
         <span id="label"
           ><slot @slotchange=${this.handleDefaultSlotChange}></slot
         ></span>
-        ${o&&!this.ariaLabel?l`<span class="sr-only"> ${k}</span>`:c}
-        ${o?this.renderExternalLinkIcon():c}
+        ${t&&!this.ariaLabel?a`<span class="sr-only"> ${b}</span>`:c}
+        ${t?this.renderExternalLinkIcon():c}
       </a>
-    `}};r=new WeakMap,h=new WeakMap,t.styles=H,e([n()],t.prototype,"href",2),e([n()],t.prototype,"target",2),e([n()],t.prototype,"icon",2),e([n({reflect:!0,converter:{toAttribute:o=>o==="light"?null:o}})],t.prototype,"theme",2),e([n({reflect:!0,attribute:"visited-style",converter:{toAttribute:o=>o==="auto"?null:o}})],t.prototype,"visitedStyle",2),e([n({type:Boolean,reflect:!0})],t.prototype,"current",2),e([n({type:Boolean,reflect:!0})],t.prototype,"block",2),e([g({slot:"icon"})],t.prototype,"iconSlotEls",2),t=e([f($)],t);export{t as EunomiaLink,$ as EunomiaLinkTagName};
+    `}};n=new WeakMap,p=new WeakMap,e.styles=A,s([r()],e.prototype,"href",2),s([r()],e.prototype,"target",2),s([r()],e.prototype,"icon",2),s([r({reflect:!0,converter:{toAttribute:t=>t==="light"?null:t}})],e.prototype,"theme",2),s([r({reflect:!0,attribute:"visited-style",converter:{toAttribute:t=>t==="auto"?null:t}})],e.prototype,"visitedStyle",2),s([r({type:Boolean,reflect:!0})],e.prototype,"current",2),s([r({type:Boolean,reflect:!0})],e.prototype,"block",2),s([g({slot:"icon"})],e.prototype,"iconSlotEls",2),e=s([v(E)],e);export{e as EunomiaLink,E as EunomiaLinkTagName};

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

@@ -1 +1 @@
-import{a,b}from"./chunks/chunk-Q34EQ5HZ.js";import"./chunks/chunk-22D3SRFR.js";import"./chunks/chunk-PPCHQG7P.js";import"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import"./chunks/chunk-JGV7LHEI.js";import"./chunks/chunk-GNAUNTS5.js";import"./chunks/chunk-YITWLCD3.js";export{b as EunomiaLoader,a as EunomiaLoaderTagName};
+import{a,b}from"./chunks/chunk-A623JJXJ.js";import"./chunks/chunk-22D3SRFR.js";import"./chunks/chunk-PPCHQG7P.js";import"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import"./chunks/chunk-WP6ZYBAC.js";import"./chunks/chunk-2XPIGFBD.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 b,b as g,c as x}from"./chunks/chunk-6VK6SHCG.js";import{a as y}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js";import"./chunks/chunk-E6UOI36Q.js";import{a as C,b as k}from"./chunks/chunk-RANI7H4F.js";import{a as v}from"./chunks/chunk-5LXGJVJR.js";import{a as s}from"./chunks/chunk-PPCHQG7P.js";import{a as c}from"./chunks/chunk-6TIEBY34.js";import{a as h}from"./chunks/chunk-JGV7LHEI.js";import"./chunks/chunk-GNAUNTS5.js";import{a as t,f as p,h as u,j as i,k as f,l as n,p as r,r as a,u as m}from"./chunks/chunk-YITWLCD3.js";var l=class d extends Event{static{this.eventName="eunconfirm"}constructor(){super(d.eventName,{bubbles:!0,composed:!0,cancelable:!0})}};var D=u`
+import{a as b,b as v,c as g}from"./chunks/chunk-6VK6SHCG.js";import{b as y}from"./chunks/chunk-M6ZJHL4Q.js";import"./chunks/chunk-XCBQ4CKH.js";import"./chunks/chunk-HXESKTK2.js";import{a as x,b as C}from"./chunks/chunk-RANI7H4F.js";import{a as h}from"./chunks/chunk-5LXGJVJR.js";import{a as s}from"./chunks/chunk-PPCHQG7P.js";import{a as m}from"./chunks/chunk-WP6ZYBAC.js";import"./chunks/chunk-2XPIGFBD.js";import{a as t,f as d,h as p,j as i,k as u,l as n,p as r,r as a,u as f}from"./chunks/chunk-YITWLCD3.js";var l=class c extends Event{static{this.eventName="eunconfirm"}constructor(){super(c.eventName,{bubbles:!0,composed:!0,cancelable:!0})}};var $=p`
   :host {
     display: contents;
     /* Rendered width of the size="xs" close button. */
@@ -133,7 +133,7 @@ import{a as b,b as g,c as x}from"./chunks/chunk-6VK6SHCG.js";import{a as y}from"
   #description {
     margin: var(--eun-space-xs, 4px) 0 0;
     font-size: var(--eun-font-size-s, 14px);
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--eun-text-secondary, #666e8a);
   }
   #actions {
     flex: none;
@@ -151,23 +151,25 @@ import{a as b,b as g,c as x}from"./chunks/chunk-6VK6SHCG.js";import{a as y}from"
       transition-duration: 0.01ms;
     }
   }
-`,E=D;var L="eun-modal",e=class extends y(h(m)){constructor(){super(...arguments);this.open=!1;this.kind="dialog";this.closeOnBackdrop=!0;this.dirty=!1;this.hideActions=!1;this.initialFocus="auto";this.closeable=!0;this.confirmColor="primary";this.confirmCloseHeading="Discard changes?";this.confirmCloseDescription="You have unsaved changes. This action can't be undone.";this.mountConfirmModal=!1;this.handleDiscardConfirmed=o=>{o.stopPropagation(),this.confirmDiscard()};this.stopDialogPropagation=o=>{o.stopPropagation()};this.handleToggle=o=>{let $=o;if(this.syncingFromPopover=!0,this.open=$.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=>{x(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?.(),C(),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 l;this.dispatchEvent(o),o.defaultPrevented||(this.open=!1)}cancel(){let o=new b;this.dispatchEvent(o),o.defaultPrevented||(this.open=!1)}requestClose(){if(this.dirty){let o=new g;this.dispatchEvent(o),o.defaultPrevented||this.confirmCloseModalEl?.show();return}this.cancel()}confirmDiscard(){this.dirty=!1,this.cancel()}focusFirstField(){if(this.initialFocus!=="first-field"||!k())return!1;let[o]=this.bodyEl?v(this.bodyEl):[];return o?.focus(),o!==void 0}focusInitialElement(){let o=this.querySelector("[autofocus]");if(o){o.focus();return}if(!this.focusFirstField()){if(!this.hideActions){this.cancelButtonEl?.focus();return}this.surfaceEl?.focus()}}renderHeader(){return!this.heading&&!this.description?a:r`
+`,k=$;var D="eun-modal",o=class extends y(m(f)){constructor(){super(...arguments);this.open=!1;this.kind="dialog";this.closeOnBackdrop=!1;this.dirty=!1;this.hideActions=!1;this.initialFocus="auto";this.closeable=!1;this.confirmColor="primary";this.mountConfirmModal=!1;this.handleDiscardConfirmed=e=>{e.stopPropagation(),this.confirmDiscard()};this.stopDialogPropagation=e=>{e.stopPropagation()};this.handleToggle=e=>{let E=e;if(this.syncingFromPopover=!0,this.open=E.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=e=>{g(e,this)}}willUpdate(e){e.has("dirty")&&this.dirty&&(this.mountConfirmModal=!0)}updated(e){super.updated(e),e.has("open")&&this.syncPopoverOpenState(this.open,this.surfaceEl)}connectedCallback(){super.connectedCallback?.(),x(),this.addEventListener("command",this.handleCommandEvent)}disconnectedCallback(){this.removeEventListener("command",this.handleCommandEvent),this.teardownDialogSurface(),super.disconnectedCallback?.()}show(){this.open=!0}hide(){this.open=!1}confirm(){let e=new l;this.dispatchEvent(e),e.defaultPrevented||(this.open=!1)}cancel(){let e=new b;this.dispatchEvent(e),e.defaultPrevented||(this.open=!1)}requestClose(){if(this.dirty){let e=new v;this.dispatchEvent(e),e.defaultPrevented||this.confirmCloseModalEl?.show();return}this.cancel()}confirmDiscard(){this.dirty=!1,this.cancel()}focusFirstField(){if(this.initialFocus!=="first-field"||!C())return!1;let[e]=this.bodyEl?h(this.bodyEl):[];return e?.focus(),e!==void 0}focusInitialElement(){let e=this.querySelector("[autofocus]");if(e){e.focus();return}if(!this.focusFirstField()){if(!this.hideActions){this.cancelButtonEl?.focus();return}this.surfaceEl?.focus()}}renderHeader(){return!this.heading&&!this.description?a:r`
       <div id="header">
         ${this.heading?r`<h2 id="heading">${this.heading}</h2>`:a}
         ${this.description?r`<p id="description">${this.description}</p>`:a}
       </div>
-    `}renderConfirmCloseModal(){return r`
+    `}renderConfirmCloseModal(){let e=this.confirmCloseDescription??this.dictionary.common.discardChangesDescription;return r`
       <eun-modal
         id="confirm-close-modal"
         kind="alert"
-        heading=${this.confirmCloseHeading}
+        closeable
+        close-on-backdrop
+        heading=${this.confirmCloseHeading??this.dictionary.common.discardChangesHeading}
         cancel-label=${this.confirmCloseCancelLabel??this.dictionary.common.keepEditing}
         confirm-label=${this.confirmCloseConfirmLabel??this.dictionary.common.discard}
         confirm-color="critical"
         @eunconfirm=${this.handleDiscardConfirmed}
         @euncancel=${this.stopDialogPropagation}
       >
-        ${this.confirmCloseDescription?r`<p>${this.confirmCloseDescription}</p>`:a}
+        ${e?r`<p>${e}</p>`:a}
         <slot name="confirm-close"></slot>
       </eun-modal>
     `}render(){return r`
@@ -218,4 +220,4 @@ import{a as b,b as g,c as x}from"./chunks/chunk-6VK6SHCG.js";import{a as y}from"
             `}
       </div>
       ${this.mountConfirmModal?this.renderConfirmCloseModal():a}
-    `}};e.styles=E,t([i({type:Boolean,reflect:!0})],e.prototype,"open",2),t([i()],e.prototype,"heading",2),t([i()],e.prototype,"description",2),t([i({reflect:!0,useDefault:!0})],e.prototype,"kind",2),t([i({converter:c,attribute:"close-on-backdrop"})],e.prototype,"closeOnBackdrop",2),t([i({type:Boolean,reflect:!0})],e.prototype,"dirty",2),t([i({type:Boolean,attribute:"hide-actions"})],e.prototype,"hideActions",2),t([i({attribute:"initial-focus",reflect:!0,useDefault:!0})],e.prototype,"initialFocus",2),t([n("#body")],e.prototype,"bodyEl",2),t([i({converter:c,reflect:!0})],e.prototype,"closeable",2),t([i({attribute:"cancel-label"})],e.prototype,"cancelLabel",2),t([i({attribute:"confirm-label"})],e.prototype,"confirmLabel",2),t([i({attribute:"confirm-color"})],e.prototype,"confirmColor",2),t([i({attribute:"cancel-color"})],e.prototype,"cancelColor",2),t([i({attribute:"close-label"})],e.prototype,"closeLabel",2),t([i({attribute:"confirm-close-heading"})],e.prototype,"confirmCloseHeading",2),t([i({attribute:"confirm-close-description"})],e.prototype,"confirmCloseDescription",2),t([i({attribute:"confirm-close-cancel-label"})],e.prototype,"confirmCloseCancelLabel",2),t([i({attribute:"confirm-close-confirm-label"})],e.prototype,"confirmCloseConfirmLabel",2),t([n("#surface")],e.prototype,"surfaceEl",2),t([n("#cancel-button")],e.prototype,"cancelButtonEl",2),t([n("#confirm-close-modal")],e.prototype,"confirmCloseModalEl",2),t([f()],e.prototype,"mountConfirmModal",2),e=t([p(L)],e);export{e as EunomiaModal,L as EunomiaModalTagName};
+    `}};o.styles=k,t([i({type:Boolean,reflect:!0})],o.prototype,"open",2),t([i()],o.prototype,"heading",2),t([i()],o.prototype,"description",2),t([i({reflect:!0,useDefault:!0})],o.prototype,"kind",2),t([i({type:Boolean,attribute:"close-on-backdrop"})],o.prototype,"closeOnBackdrop",2),t([i({type:Boolean,reflect:!0})],o.prototype,"dirty",2),t([i({type:Boolean,attribute:"hide-actions"})],o.prototype,"hideActions",2),t([i({attribute:"initial-focus",reflect:!0,useDefault:!0})],o.prototype,"initialFocus",2),t([n("#body")],o.prototype,"bodyEl",2),t([i({type:Boolean,reflect:!0})],o.prototype,"closeable",2),t([i({attribute:"cancel-label"})],o.prototype,"cancelLabel",2),t([i({attribute:"confirm-label"})],o.prototype,"confirmLabel",2),t([i({attribute:"confirm-color"})],o.prototype,"confirmColor",2),t([i({attribute:"cancel-color"})],o.prototype,"cancelColor",2),t([i({attribute:"close-label"})],o.prototype,"closeLabel",2),t([i({attribute:"confirm-close-heading"})],o.prototype,"confirmCloseHeading",2),t([i({attribute:"confirm-close-description"})],o.prototype,"confirmCloseDescription",2),t([i({attribute:"confirm-close-cancel-label"})],o.prototype,"confirmCloseCancelLabel",2),t([i({attribute:"confirm-close-confirm-label"})],o.prototype,"confirmCloseConfirmLabel",2),t([n("#surface")],o.prototype,"surfaceEl",2),t([n("#cancel-button")],o.prototype,"cancelButtonEl",2),t([n("#confirm-close-modal")],o.prototype,"confirmCloseModalEl",2),t([u()],o.prototype,"mountConfirmModal",2),o=t([d(D)],o);export{o as EunomiaModal,D as EunomiaModalTagName};