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

package/README.md

@@ -76,7 +76,7 @@ list is just the map.
 
 ## Sizing assumes `1rem = 16px`
 
-Every size token (`--eun-fontSize-*`, `--eun-space-*`, icon sizes,
+Every size token (`--eun-font-size-*`, `--eun-space-*`, icon sizes,
 button padding, ...) is expressed in `rem`, which is always relative to
 the `font-size` on `<html>`, never to a nearby parent. The values shown
 throughout the documentation site assume the browser default of 16px,

package/dist/cdn/components/chunks/{chunk-3LMI7KUA.js → chunk-2JLDJFYD.js}

@@ -13,7 +13,7 @@ import{a as k,b as f,c as _}from"./chunk-SGM2X2TC.js";import{a as c,b as v,c as
     fill: var(--_color);
     color: var(--_color);
     background-color: var(--_background);
-    border-radius: var(--icon-border-radius, var(--eun-borderRadius-m, 8px));
+    border-radius: var(--icon-border-radius, var(--eun-border-radius-m, 8px));
     text-decoration: none;
     display: inline-block;
     user-select: none;

package/dist/cdn/components/chunks/chunk-4MXL6PZC.js

@@ -0,0 +1,124 @@
+import{a as r,g as s,h as o}from"./chunk-XH6NREVZ.js";var u=n=>{class e extends n{constructor(){super(...arguments);this.type="button";this.fixedColor=!1;this.size="m";this.rounded=!1;this.slide=!1;this.loading=!1}connectedCallback(){super.connectedCallback?.(),!this.href&&(this.hasAttribute("role")||this.setAttribute("role","button"),this.addEventListener("click",this.handleClick,!0),this.addEventListener("keydown",this.handleKeydown,!0))}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback?.()}handleClick(t){if(this.disabled||this.loading){t.stopImmediatePropagation();return}if(this.hasAttribute("commandfor")){this.handleCommandClick?.();return}if(this.hasAttribute("popovertarget")){this.handlePopoverClick?.();return}this.handleFormBehavior()}handleKeydown(t){this.disabled||this.loading||!["Enter"," "].includes(t.key)||(t.preventDefault(),this.handleFormBehavior()||this.dispatchEvent(new Event("click")))}handleFormBehavior(){if(this.type!=="submit"&&this.type!=="reset")return!1;let t;if(this.form?t=this.getRootNode()?.getElementById(this.form):t=this.closest("form"),!t||!(t instanceof HTMLFormElement))throw new Error("The element link to the button does not exist or is invalid");return this.type==="reset"&&t.reset(),this.type==="submit"&&t.requestSubmit(),!0}}return r([o({reflect:!0})],e.prototype,"type",2),r([o({reflect:!0})],e.prototype,"variant",2),r([o({type:Boolean,reflect:!0,attribute:"fixed-color"})],e.prototype,"fixedColor",2),r([o({reflect:!0})],e.prototype,"size",2),r([o({type:Boolean,reflect:!0})],e.prototype,"rounded",2),r([o({type:Boolean,reflect:!0})],e.prototype,"slide",2),r([o()],e.prototype,"form",2),r([o()],e.prototype,"href",2),r([o()],e.prototype,"target",2),r([o()],e.prototype,"download",2),r([o({type:Boolean,reflect:!0})],e.prototype,"loading",2),e};var c=class n extends Event{static{this.eventName="command"}constructor(e,a){super(n.eventName,{bubbles:!1,composed:!0,cancelable:!0}),this.command=e,this.source=a}};function d(n,e){let a=globalThis.CommandEvent;return typeof a=="function"?new a(c.eventName,{command:n,source:e,cancelable:!0,composed:!0}):new c(n,e)}var g=n=>{class e extends n{handleCommandClick(){let i=this.getAttribute("commandfor");if(!i)return;let l=this.getRootNode().getElementById(i);if(!l)throw new Error(`The given id [${i}] do not correspond to any command target`);l.dispatchEvent(d(this.getAttribute("command")??"",this))}}return r([o({reflect:!0})],e.prototype,"command",2),r([o({attribute:"commandfor"})],e.prototype,"commandFor",2),e};var x=s`
+  :host {
+    --_solid: var(--eun-color-primary-500, #3d6fff);
+    --_solid-hover: var(--eun-color-primary-700, #3662e0);
+    --_solid-active: var(--eun-color-primary-800, #2d52bd);
+    --_onSolid: var(--eun-color-on-primary-500, #ffffff);
+    --_accent: var(--eun-color-primary-500, #3d6fff);
+    --_tint: var(--eun-color-primary-transparent, #3d6fff33);
+    --_tint-hover: var(--eun-color-primary-transparent-hover, #3d6fff4d);
+    --_tint-active: var(--eun-color-primary-transparent-active, #3d6fff66);
+    --_fgTint: var(--_accent);
+    --_wash-hover: var(--_tint-hover);
+    --_wash-active: var(--_tint-active);
+    --_flat: var(--eun-surface-sunken, #f7f8fa);
+    --_flat-hover: var(--eun-surface-sunken-hover, #edeff0);
+    --_flatFg: var(--eun-text-secondary, #484e61);
+    --_ring: var(--eun-color-primary-700, #3662e0);
+  }
+  :host([variant="secondary"]) {
+    --_solid: var(--eun-color-secondary-500, #e5a030);
+    --_solid-hover: var(--eun-color-secondary-700, #ca8d2a);
+    --_solid-active: var(--eun-color-secondary-800, #a97624);
+    --_onSolid: var(--eun-color-on-secondary-500, #000000de);
+    --_accent: var(--eun-color-secondary-500, #e5a030);
+    --_tint: var(--eun-color-secondary-transparent, #e5a03033);
+    --_tint-hover: var(--eun-color-secondary-transparent-hover, #e5a0304d);
+    --_tint-active: var(--eun-color-secondary-transparent-active, #e5a03066);
+    --_ring: var(--eun-color-secondary-700, #ca8d2a);
+  }
+  :host([variant="critical"]) {
+    --_solid: var(--eun-color-critical-100, #aa0014);
+    --_solid-hover: var(--eun-color-critical-100, #aa0014);
+    --_solid-active: var(--eun-color-critical-100, #aa0014);
+    --_onSolid: #fff;
+    --_accent: var(--eun-color-critical-100, #aa0014);
+    --_tint: var(--eun-color-critical-30, #faf0f1);
+    --_tint-hover: var(--eun-color-critical-50, #f1d6d9);
+    --_tint-active: var(--eun-color-critical-90, #e4adb4);
+    --_ring: var(--eun-color-critical-100, #aa0014);
+  }
+  :host([variant="success"]) {
+    --_solid: var(--eun-color-success-100, #1a9948);
+    --_solid-hover: var(--eun-color-success-100, #1a9948);
+    --_solid-active: var(--eun-color-success-100, #1a9948);
+    --_onSolid: #fff;
+    --_accent: var(--eun-color-success-100, #1a9948);
+    --_tint: var(--eun-color-success-30, #f1f9f4);
+    --_tint-hover: var(--eun-color-success-50, #daefe2);
+    --_tint-active: var(--eun-color-success-90, #b6dec4);
+    --_ring: var(--eun-color-success-100, #1a9948);
+  }
+  :host([variant="warning"]) {
+    --_solid: var(--eun-color-warning-100, #c85207);
+    --_solid-hover: var(--eun-color-warning-100, #c85207);
+    --_solid-active: var(--eun-color-warning-100, #c85207);
+    --_onSolid: #fff;
+    --_accent: var(--eun-color-warning-100, #c85207);
+    --_tint: var(--eun-color-warning-30, #fcf5f0);
+    --_tint-hover: var(--eun-color-warning-50, #f6e3d7);
+    --_tint-active: var(--eun-color-warning-90, #edc8b0);
+    --_ring: var(--eun-color-warning-100, #c85207);
+  }
+  :host([variant="medium"]) {
+    --_solid: var(--eun-color-grey-700, #484e61);
+    --_solid-hover: var(--eun-color-grey-800, #071621);
+    --_solid-active: var(--eun-color-grey-900, #000000);
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+    --_accent: var(--eun-color-grey-900, #000000);
+    --_tint: color-mix(
+      in srgb,
+      var(--eun-color-grey-700, #484e61) 20%,
+      transparent
+    );
+    --_tint-hover: color-mix(
+      in srgb,
+      var(--eun-color-grey-700, #484e61) 30%,
+      transparent
+    );
+    --_tint-active: color-mix(
+      in srgb,
+      var(--eun-color-grey-700, #484e61) 40%,
+      transparent
+    );
+    --_ring: var(--eun-color-grey-700, #484e61);
+  }
+  :host([variant="light"]) {
+    --_solid: var(--eun-color-grey-0, #ffffff);
+    --_solid-hover: var(--eun-color-grey-200, #ecedf0);
+    --_solid-active: var(--eun-color-grey-300, #dee0e7);
+    --_onSolid: var(--eun-color-grey-900, #000000);
+  }
+  :host([variant="light"][fixed-color]) {
+    --_solid: #ffffff;
+    --_solid-hover: #ecedf0;
+    --_solid-active: #dee0e7;
+    --_onSolid: #000000;
+  }
+  :host([variant="dark"]) {
+    --_solid: var(--eun-color-grey-800, #071621);
+    --_solid-hover: var(--eun-color-grey-900, #000000);
+    --_solid-active: var(--eun-color-grey-900, #000000);
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+  }
+  :host([variant="dark"][fixed-color]) {
+    --_solid: #071621;
+    --_solid-hover: #000000;
+    --_solid-active: #000000;
+    --_onSolid: #ffffff;
+  }
+  :host([variant="light"]),
+  :host([variant="dark"]) {
+    --_accent: var(--_solid);
+    --_tint: var(--_solid);
+    --_tint-hover: var(--_solid-hover);
+    --_tint-active: var(--_solid-active);
+    --_fgTint: var(--_onSolid);
+    --_wash-hover: color-mix(in srgb, var(--_solid) 16%, transparent);
+    --_wash-active: color-mix(in srgb, var(--_solid) 28%, transparent);
+    --_flat: color-mix(in srgb, var(--_solid) 16%, transparent);
+    --_flat-hover: color-mix(in srgb, var(--_solid) 24%, transparent);
+    --_flatFg: var(--_solid);
+    --_ring: var(--_solid);
+  }
+`;export{u as a,x as b,g as c};

package/dist/cdn/components/chunks/{chunk-32KRPOPV.js → chunk-5XJGYXW7.js}

@@ -11,10 +11,10 @@ import{g as o}from"./chunk-XH6NREVZ.js";var r=o`
     max-height: var(--field-listbox-max-height, 260px);
     overflow-y: auto;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--_textColor);
     background: var(--eun-surface-color, #ffffff);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     box-shadow: var(
       --eun-shadow-m,
@@ -46,13 +46,13 @@ import{g as o}from"./chunk-XH6NREVZ.js";var r=o`
     background: var(--eun-content-hover, #edeff0);
   }
   #listbox li.selected {
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(--eun-color-primary-500, #3d6fff);
   }
   #listbox li mark {
     background: var(--field-match-background, none);
     color: var(--field-match-color, var(--eun-color-primary-500, #3d6fff));
-    font-weight: var(--field-match-font-weight, var(--eun-fontWeight-l, 700));
+    font-weight: var(--field-match-font-weight, var(--eun-font-weight-l, 700));
     text-decoration: var(--field-match-text-decoration, none);
   }
   #listbox .no-results,
@@ -64,8 +64,8 @@ import{g as o}from"./chunk-XH6NREVZ.js";var r=o`
   #listbox .group-label {
     cursor: default;
     padding-block-end: var(--eun-space-xxs, 1.6px);
-    font-size: var(--eun-fontSize-xs, 12px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-xs, 12px);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(--_placeholderColor);
     text-transform: uppercase;
   }

package/dist/cdn/components/chunks/{chunk-O2HNWH65.js → chunk-5XJLIHAU.js}

@@ -1,4 +1,4 @@
-import{a as b}from"./chunk-MMLIPCOY.js";import{a as f}from"./chunk-A4EQSU36.js";import{a as m}from"./chunk-5EVP7YNE.js";import{a,b as l,c as d,d as p,f as c,g as n,h as r,n as s,s as u}from"./chunk-XH6NREVZ.js";var v=n`
+import{a as b}from"./chunk-MMLIPCOY.js";import{a as m}from"./chunk-A4EQSU36.js";import{a as f}from"./chunk-5EVP7YNE.js";import{a,b as l,c as d,d as p,f as u,g as n,h as r,n as s,s as c}from"./chunk-XH6NREVZ.js";var v=n`
   :host {
     display: inline-flex;
     align-items: center;
@@ -87,11 +87,11 @@ import{a as b}from"./chunk-MMLIPCOY.js";import{a as f}from"./chunk-A4EQSU36.js";
     overflow: hidden;
     border-radius: var(
       --loader-bar-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     background: var(
       --loader-bar-track-color,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken-strong, #ecedf0)
     );
   }
 
@@ -138,19 +138,19 @@ import{a as b}from"./chunk-MMLIPCOY.js";import{a as f}from"./chunk-A4EQSU36.js";
       animation-duration: 2.8s;
     }
   }
-`,h=[v,y];var k="eun-loader",i,t=class extends u{constructor(){super(...arguments);this.label="Loading\u2026";this.variant="dots";d(this,i);this.sticky=!1;this.stickyPosition="top"}set size(e){if(p(this,i,e),!e){this.style.removeProperty("--_size");return}let o;/%$/.test(e)?o=`${parseFloat(e)/100}rem`:/^\d+(\.\d+)?$/.test(e)?o=`${e}px`:o=e,this.style.setProperty("--_size",o)}get size(){return l(this,i)}get clampedValue(){return this.value===void 0?void 0:Math.min(100,Math.max(0,this.value))}render(){if(this.variant==="bar"){let e=this.clampedValue;return s`
+`,h=[v,y];var k="eun-loader",i,t=class extends c{constructor(){super(...arguments);this.label="Loading\u2026";this.variant="dots";d(this,i);this.sticky=!1;this.stickyPosition="top"}set size(e){if(p(this,i,e),!e){this.style.removeProperty("--_size");return}let o;/%$/.test(e)?o=`${parseFloat(e)/100}rem`:/^\d+(\.\d+)?$/.test(e)?o=`${e}px`:o=e,this.style.setProperty("--_size",o)}get size(){return l(this,i)}get clampedValue(){return this.value===void 0?void 0:Math.min(100,Math.max(0,this.value))}render(){if(this.variant==="bar"){let e=this.clampedValue;return s`
         <div
           id="track"
           role="progressbar"
           aria-label=${this.label}
           aria-valuemin="0"
           aria-valuemax="100"
-          aria-valuenow=${m(e)}
+          aria-valuenow=${f(e)}
         >
           <div
             id="fill"
-            class=${f({indeterminate:e===void 0})}
+            class=${m({indeterminate:e===void 0})}
             style=${b({width:e===void 0?"":`${e}%`})}
           ></div>
         </div>
-      `}return s`<span role="status" aria-label=${this.label}></span>`}};i=new WeakMap,t.styles=h,a([r()],t.prototype,"label",2),a([r({reflect:!0})],t.prototype,"variant",2),a([r({hasChanged:()=>!1})],t.prototype,"size",1),a([r({type:Number})],t.prototype,"value",2),a([r({type:Boolean,reflect:!0})],t.prototype,"sticky",2),a([r({attribute:"sticky-position",reflect:!0})],t.prototype,"stickyPosition",2),t=a([c(k)],t);export{k as a,t as b};
+      `}return s`<span role="status" aria-label=${this.label}></span>`}};i=new WeakMap,t.styles=h,a([r()],t.prototype,"label",2),a([r({reflect:!0})],t.prototype,"variant",2),a([r({hasChanged:()=>!1})],t.prototype,"size",1),a([r({type:Number})],t.prototype,"value",2),a([r({type:Boolean,reflect:!0})],t.prototype,"sticky",2),a([r({attribute:"sticky-position",reflect:!0})],t.prototype,"stickyPosition",2),t=a([u(k)],t);export{k as a,t as b};

package/dist/cdn/components/chunks/{chunk-5GF2Q3NR.js → chunk-74AOAB4X.js}

@@ -1,7 +1,7 @@
 import{g as o}from"./chunk-XH6NREVZ.js";var r=o`
   :host {
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: inline-block;
     outline: none;
   }

package/dist/cdn/components/chunks/{chunk-WYMBUIKX.js → chunk-A6KGFALA.js}

@@ -6,9 +6,9 @@ import{a as i,d as b,e as d,f as u}from"./chunk-E74CM7UG.js";import{a as t,f as
       var(--eun-surface-color, #ffffff)
     );
     box-shadow: inset 0 0 0 9999px transparent;
-    border-bottom: var(--eun-borderWidth-s, 1px) solid
+    border-bottom: var(--eun-border-width-s, 1px) solid
       var(--table-border-color, var(--eun-border-color, #dee0e7));
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
     transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
   }
 
@@ -74,7 +74,7 @@ import{a as i,d as b,e as d,f as u}from"./chunk-E74CM7UG.js";import{a as t,f as
       var(--table-header-background, var(--eun-surface-color, #ffffff))
     );
     box-shadow: inset 0 0 0 9999px transparent;
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)
@@ -119,7 +119,7 @@ import{a as i,d as b,e as d,f as u}from"./chunk-E74CM7UG.js";import{a as t,f as
     );
     box-shadow: inset 0 0 0 9999px transparent;
     transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid
+    border-inline-start: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)

package/dist/cdn/components/chunks/chunk-BMQOI7HX.js

@@ -0,0 +1,371 @@
+import{a as v,b as h,c as f}from"./chunk-4MXL6PZC.js";import{a as _}from"./chunk-T7WABJEJ.js";import{a as p}from"./chunk-UP4M7TER.js";import{a as o}from"./chunk-5EVP7YNE.js";import{a as b}from"./chunk-BKHD4S57.js";import{a as n,f as c,g as i,h as s,n as a,p as l,s as u}from"./chunk-XH6NREVZ.js";var x=i`
+  :host {
+    --_focusIndicator: var(--button-focus-outline, var(--_ring));
+    --_hoverFromCustom: color-mix(in srgb, var(--button-background) 88%, black);
+    --_activeFromCustom: color-mix(
+      in srgb,
+      var(--button-background) 76%,
+      black
+    );
+    --_borderRadius: var(
+      --button-border-radius,
+      var(--eun-border-radius-m, 8px)
+    );
+    --_padding: var(
+      --button-padding,
+      var(--eun-space-s, 8px) calc(var(--eun-space-l, 32px) / 2)
+    );
+    --_boxShadow: var(--button-shadow, none);
+    --_boxShadow-hover: var(--button-shadow-hover, var(--_boxShadow));
+    --_transition: var(--button-transition, 0.2s);
+    --_borderSize: var(--button-border-size, 1.5px);
+    --_fontSize: var(--eun-font-size-s, 14px);
+    --_gap: var(--eun-space-xs, 4px);
+    --_lineHeight: 1rem;
+    --icon-size: var(--_lineHeight);
+    --_before-display: none;
+    --_cursor: pointer;
+    display: inline-flex;
+    width: fit-content;
+    position: relative;
+    user-select: none;
+    cursor: var(--_cursor);
+    outline: 2px solid transparent;
+    transition: all ease-out var(--_transition);
+    border-radius: var(--_borderRadius);
+    z-index: 0;
+  }
+  :host(:focus-visible) {
+    outline-offset: 2px;
+    outline-color: var(--_focusIndicator);
+  }
+  #button:focus-visible {
+    outline-offset: 2px;
+    outline-color: var(--_focusIndicator);
+  }
+  :host([size="xs"]) {
+    --_fontSize: var(--eun-font-size-xs, 10px);
+    --_padding: var(--eun-space-xxs, 1.6px) var(--eun-space-xs, 4px);
+    --_lineHeight: 10px;
+    --_borderRadius: var(--eun-border-radius-s, 999px);
+  }
+  :host([size="s"]) {
+    --_fontSize: var(--eun-font-size-xs, 10px);
+    --_padding: calc(var(--eun-space-s) / 2) var(--eun-space-s);
+    --_lineHeight: 10px;
+    --_borderRadius: var(--eun-border-radius-s, 999px);
+  }
+  :host([size="l"]) {
+    --_fontSize: var(--eun-font-size-m, 16px);
+    --_gap: var(--eun-space-m, 16px);
+    --_padding: calc(var(--eun-space-s, 8px) * 1.25) var(--eun-space-l, 32px);
+    --_lineHeight: 1.1rem;
+  }
+  :host([size="xl"]) {
+    --_fontSize: var(--eun-font-size-l, 1.3rem);
+    --_gap: var(--eun-space-m, 16px);
+    --_padding: calc(var(--eun-space-s, 8px) * 1.5) var(--eun-space-l, 32px);
+    --_lineHeight: 1.3rem;
+  }
+  :host([rounded]) {
+    --_borderRadius: var(--eun-border-radius-xl, 999px);
+  }
+  slot::slotted(*) {
+    color: var(--_textColor);
+  }
+  slot::slotted(*:not([fill])),
+  slot::slotted(*[fill="currentColor"]) {
+    fill: var(--_textColor);
+  }
+  slot[name="start"]::slotted(eun-icon),
+  slot[name="end"]::slotted(eun-icon) {
+    flex-shrink: 0;
+  }
+  .auto-icon {
+    flex-shrink: 0;
+  }
+  #button {
+    font-family: var(--eun-font-family, "Mulish", sans-serif);
+    --_textColor: var(--button-text, var(--_fg));
+    background: var(--button-background, var(--_bg));
+    border-radius: var(--_borderRadius);
+    color: var(--_textColor);
+    box-shadow: var(--_boxShadow);
+    display: flex;
+    width: 100%;
+    height: fit-content;
+    border: var(--_borderSize) solid var(--button-border-color, var(--_bd));
+    outline: 2px solid transparent;
+    padding: var(--_padding);
+    gap: var(--_gap);
+    transition: all ease-out var(--_transition);
+    font-size: var(--_fontSize);
+    line-height: var(--_lineHeight);
+    text-decoration: none;
+    align-items: center;
+    white-space: nowrap;
+  }
+  #button:hover,
+  :host(:focus-visible) #button,
+  #button:focus-visible {
+    box-shadow: var(--_boxShadow-hover);
+    border-color: var(
+      --button-border-color-hover,
+      var(--button-border-color, var(--_bd))
+    );
+  }
+  #external-link-icon {
+    display: inline-flex;
+    align-items: center;
+    margin-inline: var(--eun-space-s) calc(-1 * var(--eun-space-xs));
+    transform: rotate(-45deg);
+    --icon-color: var(--_textColor);
+  }
+  #content-hidden {
+    display: flex;
+    align-items: center;
+    gap: var(--_gap);
+    visibility: hidden;
+  }
+  #loader-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  :host([loading]) #button {
+    cursor: wait;
+    pointer-events: 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;
+  }
+`,m=i`
+  :host([appearance="fill"]),
+  :host(:not([appearance])) {
+    --_bg: var(--_solid);
+    --_bg-hover: var(--_solid-hover);
+    --_bg-active: var(--_solid-active);
+    --_fg: var(--_onSolid);
+    --_bd: transparent;
+  }
+  :host([appearance="default"]) {
+    --_bg: var(--_tint);
+    --_bg-hover: var(--_tint-hover);
+    --_bg-active: var(--_tint-active);
+    --_fg: var(--_fgTint);
+    --_bd: transparent;
+  }
+  :host([appearance="outline"]) {
+    --_bg: transparent;
+    --_bg-hover: var(--_wash-hover);
+    --_bg-active: var(--_wash-active);
+    --_fg: var(--_accent);
+    --_bd: var(--_solid);
+  }
+  :host([appearance="ghost"]) {
+    --_bg: transparent;
+    --_bg-hover: var(--_wash-hover);
+    --_bg-active: var(--_wash-active);
+    --_fg: var(--_accent);
+    --_bd: transparent;
+  }
+  :host([appearance="ghost"]:not([variant])) {
+    --_accent: var(--eun-text-secondary, #484e61);
+    --_wash-hover: var(--eun-content-hover, #edeff0);
+    --_wash-active: var(--eun-disabled-color, #ecedf0);
+  }
+  :host([appearance="raised"]) {
+    --_bg: transparent;
+    --_bg-hover: transparent;
+    --_bg-active: transparent;
+    --_fg: var(--_accent);
+    --_bd: transparent;
+    --_boxShadow: var(
+      --button-shadow,
+      var(--eun-shadow-s, "rgba(149, 157, 165, 0.2) 0px 8px 24px")
+    );
+    --_boxShadow-hover: var(
+      --button-shadow-hover,
+      var(
+        --eun-shadow-m,
+        "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px"
+      )
+    );
+  }
+  :host([appearance="flat"]) {
+    --_bg: var(--_flat);
+    --_bg-hover: var(--_flat-hover);
+    --_bg-active: var(--_flat-hover);
+    --_fg: var(--_flatFg);
+    --_bd: transparent;
+  }
+
+  /* States : a custom background wins, derived when only the rest one is set. */
+  :host(:not([disabled])) #button:is(:hover, :focus-visible),
+  :host(:not([disabled]):focus-visible) #button {
+    background: var(
+      --button-background-hover,
+      var(--_hoverFromCustom, var(--_bg-hover))
+    );
+  }
+  :host(:not([disabled])) #button:active {
+    background: var(
+      --button-background-active,
+      var(--_activeFromCustom, var(--_bg-active))
+    );
+  }
+  :host([appearance="raised"]:not([disabled])) #button:active {
+    box-shadow: var(
+      --eun-shadow-l,
+      "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px"
+    );
+  }
+
+  /* A solid semantic button darkens instead of switching color. */
+  :host(
+      [appearance="fill"]:is(
+          [variant="critical"],
+          [variant="success"],
+          [variant="warning"]
+        ):not([disabled]):is(:hover, :focus-visible)
+    )
+    #button,
+  :host(
+      [appearance="fill"]:is(
+          [variant="critical"],
+          [variant="success"],
+          [variant="warning"]
+        ):not([disabled])
+    )
+    #button:is(:hover, :focus-visible) {
+    filter: brightness(0.9);
+  }
+  :host([appearance="fill"][variant="critical"]:not([disabled])) #button:active,
+  :host([appearance="fill"][variant="success"]:not([disabled])) #button:active,
+  :host([appearance="fill"][variant="warning"]:not([disabled])) #button:active {
+    filter: brightness(0.8);
+  }
+`,w=i`
+  :host([disabled]) {
+    --_bg: var(--eun-disabled-color, #ecedf0);
+    --_bg-hover: var(--eun-disabled-color, #ecedf0);
+    --_bg-active: var(--eun-disabled-color, #ecedf0);
+    --_fg: var(--eun-text-disabled-color, #8d93aa);
+    --_bd: transparent;
+    --_boxShadow: none;
+    --_boxShadow-hover: none;
+    --_cursor: not-allowed;
+  }
+  :host([disabled]) #button {
+    --_icon-color: currentColor;
+    --_textColor: var(--_fg);
+    background: var(--_bg);
+    border-color: var(--_bd);
+    pointer-events: none;
+  }
+`,y=i`
+  :host([slide]) {
+    width: auto;
+  }
+  :host([slide]) #button {
+    display: grid;
+    grid-template-columns: auto 0fr auto;
+    gap: 0;
+    align-items: center;
+    justify-content: start;
+    transition: grid-template-columns ease var(--_transition);
+  }
+  :host([slide]:hover) #button,
+  :host([slide]:focus-visible) #button,
+  :host([slide]) #button:focus-visible {
+    grid-template-columns: auto 1fr auto;
+  }
+  :host([slide]) slot:not([name]) {
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-left: 0;
+    opacity: 0;
+    transition:
+      margin-left ease var(--_transition),
+      opacity ease var(--_transition);
+  }
+  :host([slide]:hover) slot:not([name]),
+  :host([slide]:focus-visible) slot:not([name]),
+  :host([slide]) #button:focus-visible slot:not([name]) {
+    margin-left: var(--_gap);
+    opacity: 1;
+  }
+`,k=i`
+  :host([full]) {
+    display: flex;
+    width: 100%;
+  }
+  :host([full]) #button {
+    justify-content: center;
+  }
+`,S=i`
+  @supports (width: if(style(--a: b): 1px; else: 2px)) {
+    :host {
+      width: if(style(--button-full: true): 100%; else: fit-content);
+    }
+    #button {
+      justify-content: if(style(--button-full: true): center; else: normal);
+    }
+  }
+`,g=[h,x,m,w,y,S,k];var z="eun-button",t=class extends v(f(_(u))){constructor(){super(...arguments);this.loadingLabel="Loading\u2026";this.appearance="fill";this.full=!1}updated(e){if(super.updated(e),e.has("href")||e.has("disabled")||e.has("loading")){let r=this.disabled||this.loading;this.href&&!r?this.removeAttribute("tabindex"):this.setAttribute("tabindex",r?"-1":"0")}}renderEndContent(){return this.href&&this.target==="_blank"?a`
+      <span id="external-link-icon">
+        <eun-icon name="arrow_forward" shape="round" size="12"></eun-icon>
+        ${this.ariaLabel?l:a`<span class="sr-only"> (opens in a new tab)</span>`}
+      </span>
+    `:a`<slot name="end"></slot>`}renderContent(){let e=p(this.icon,this.severity),r=a`
+      <slot name="start">
+        ${e?a`<eun-icon
+              class="auto-icon"
+              name=${e}
+              size="16"
+            ></eun-icon>`:l}
+      </slot>
+      <slot></slot>
+      ${this.renderEndContent()}
+    `;return this.loading?a`
+      <span id="content-hidden" aria-hidden="true">${r}</span>
+      <span id="loader-overlay">
+        <eun-loader label=${this.loadingLabel}></eun-loader>
+        <span class="sr-only" role="status" aria-live="polite"
+          >${this.loadingLabel}</span
+        >
+      </span>
+    `:r}handleLinkClick(e){this.download||b(this,e,this.href,this.target)}render(){let e=this.renderContent(),r=this.disabled||this.loading;if(this.href){let d=this.target==="_blank";return a`
+        <a
+          id="button"
+          href=${o(r?void 0:this.href)}
+          target=${o(this.target)}
+          rel=${o(d?"noopener noreferrer":void 0)}
+          download=${o(this.download)}
+          aria-label=${o(d&&this.ariaLabel?`${this.ariaLabel} (opens in a new tab)`:this.ariaLabel??void 0)}
+          aria-disabled=${o(this.disabled?"true":void 0)}
+          aria-busy=${o(this.loading?"true":void 0)}
+          @click=${this.handleLinkClick}
+        >
+          ${e}
+        </a>
+      `}return a`
+      <div
+        id="button"
+        aria-busy=${o(this.loading?"true":void 0)}
+      >
+        ${e}
+      </div>
+    `}};t.styles=g,n([s({attribute:"loading-label"})],t.prototype,"loadingLabel",2),n([s()],t.prototype,"icon",2),n([s({reflect:!0})],t.prototype,"severity",2),n([s({reflect:!0})],t.prototype,"appearance",2),n([s({type:Boolean,reflect:!0})],t.prototype,"full",2),t=n([c(z)],t);export{z as a,t as b};