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

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

@@ -0,0 +1,263 @@
+import{b as g,c as S,d as C,e as E,f as b}from"./chunk-CEDHJUUH.js";import{a as L}from"./chunk-UP4M7TER.js";import{a as $}from"./chunk-A4EQSU36.js";import{a as f}from"./chunk-5EVP7YNE.js";import{a as r,f as x,g as M,h as l,i as k,j as y,l as O,n as p,p as d,s as A}from"./chunk-XH6NREVZ.js";var v=class w extends Event{static{this.eventName="eunselect"}constructor(T){super(w.eventName,{bubbles:!0,composed:!1}),this.key=T}};var R=M`
+  :host {
+    display: inline-block;
+  }
+  #menu {
+    position: fixed;
+    top: var(--_menuTop, 0);
+    left: var(--_menuLeft, 0);
+    min-width: var(--_menuWidth, auto);
+    margin: 0;
+    padding: var(--eun-space-xs, 4px) 0;
+    list-style: none;
+    max-height: 260px;
+    overflow-y: auto;
+    font-family: var(--eun-font-family, "Mulish", sans-serif);
+    font-size: var(--eun-font-size-s, 14px);
+    color: var(--dropdown-menu-color, var(--eun-text-color, #071621));
+    background: var(
+      --dropdown-menu-background,
+      var(--eun-surface-color, #ffffff)
+    );
+    border: var(--eun-border-width-s, 1px) solid
+      var(--dropdown-menu-border-color, var(--eun-border-color, #dee0e7));
+    border-radius: var(
+      --dropdown-menu-border-radius,
+      var(--eun-border-radius-m, 8px)
+    );
+    box-shadow: var(
+      --dropdown-menu-shadow,
+      var(
+        --eun-shadow-m,
+        0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05)
+      )
+    );
+    opacity: 0;
+    transform: translate(var(--_menuOffsetX, 0px), var(--_menuOffsetY, -4px))
+      scale(0.96);
+  }
+  #menu:not(:popover-open) {
+    display: none;
+  }
+  #menu:popover-open {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+
+  #menu li,
+  .submenu li {
+    display: flex;
+    align-items: center;
+    gap: var(--eun-space-s, 8px);
+    padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
+    cursor: pointer;
+    white-space: nowrap;
+    /*
+     * Fixed width/style, transparent by default : only outline-color
+     * itself needs to change on :focus-visible below, which is what makes
+     * it animatable in the first place — a style like "none" can't smoothly
+     * transition to "solid", only a color change can.
+     */
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    transition:
+      background 0.3s ease-out,
+      outline-color 0.3s ease-out;
+  }
+  #menu li:hover:not([aria-disabled="true"]),
+  #menu li:focus-visible:not([aria-disabled="true"]),
+  #menu li.highlighted:not([aria-disabled="true"]),
+  .submenu li:hover:not([aria-disabled="true"]),
+  .submenu li:focus-visible:not([aria-disabled="true"]),
+  .submenu li.highlighted:not([aria-disabled="true"]) {
+    background: linear-gradient(
+      90deg,
+      var(--dropdown-menu-accent-color, var(--eun-color-primary-500, #3d6fff))
+        2px,
+      var(--dropdown-menu-hover-background, var(--eun-content-hover, #edeff0))
+        2px,
+      var(--dropdown-menu-hover-background, var(--eun-content-hover, #edeff0))
+    );
+  }
+  #menu li:focus-visible,
+  .submenu li:focus-visible {
+    outline-color: var(
+      --dropdown-menu-accent-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
+  }
+  #menu li[aria-disabled="true"],
+  .submenu li[aria-disabled="true"] {
+    cursor: not-allowed;
+    color: var(
+      --dropdown-menu-disabled-color,
+      var(--eun-text-disabled-color, #8d93aa)
+    );
+  }
+  #menu li.active,
+  .submenu li.active {
+    font-weight: var(--eun-font-weight-l, 700);
+    color: var(
+      --dropdown-menu-accent-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
+  }
+  #menu li .option-icon,
+  .submenu li .option-icon,
+  #menu li .submenu-chevron,
+  .submenu li .submenu-chevron {
+    flex-shrink: 0;
+  }
+  #menu li .submenu-chevron,
+  .submenu li .submenu-chevron {
+    --icon-color: var(
+      --dropdown-menu-description-color,
+      var(--eun-text-secondary, #484e61)
+    );
+    margin-right: calc(-1 * var(--eun-space-s));
+  }
+  #menu li .option-text,
+  .submenu li .option-text {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  #menu li .title,
+  .submenu li .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  #menu li .description,
+  .submenu li .description {
+    font-size: var(--eun-font-size-xs, 12px);
+    color: var(
+      --dropdown-menu-description-color,
+      var(--eun-text-secondary, #484e61)
+    );
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .submenu {
+    position: fixed;
+    top: var(--_submenuTop, 0);
+    left: var(--_submenuLeft, 0);
+    margin: 0;
+    padding: var(--eun-space-xs, 4px) 0;
+    list-style: none;
+    min-width: 160px;
+    max-height: 260px;
+    overflow-y: auto;
+    font-family: var(--eun-font-family, "Mulish", sans-serif);
+    font-size: var(--eun-font-size-s, 14px);
+    color: var(--dropdown-menu-color, var(--eun-text-color, #071621));
+    background: var(
+      --dropdown-menu-background,
+      var(--eun-surface-color, #ffffff)
+    );
+    border: var(--eun-border-width-s, 1px) solid
+      var(--dropdown-menu-border-color, var(--eun-border-color, #dee0e7));
+    border-radius: var(
+      --dropdown-menu-border-radius,
+      var(--eun-border-radius-m, 8px)
+    );
+    box-shadow: var(
+      --dropdown-menu-shadow,
+      var(
+        --eun-shadow-m,
+        0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05)
+      )
+    );
+    opacity: 0;
+    transform: translate(var(--_submenuOffsetX, -4px), 0) scale(0.96);
+  }
+  .submenu:not(:popover-open) {
+    display: none;
+  }
+  .submenu:popover-open {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+`,P=R;var K="eun-dropdown-button",s=class extends A{constructor(){super(...arguments);this.options=[];this.disabledKeys=[];this.disabled=!1;this.size="m";this.fixedColor=!1;this.rounded=!1;this.appearance="fill";this.placement="bottom-start";this.open=!1;this.openSubmenuKey=null;this.handleReposition=()=>{this.positionMenu(),this.repositionOpenSubmenu()};this.skipTriggerRefocus=!1;this.handlePopoverToggle=e=>{if(e.newState==="open"){this.open=!0,this.positionMenu(),this.updateComplete.then(()=>g(this.menuEntries,0)),window.addEventListener("resize",this.handleReposition),window.addEventListener("scroll",this.handleReposition,!0);return}this.open=!1,this.closeSubmenu(),window.removeEventListener("resize",this.handleReposition),window.removeEventListener("scroll",this.handleReposition,!0),this.skipTriggerRefocus?this.skipTriggerRefocus=!1:this.triggerEl?.focus()}}disconnectedCallback(){window.removeEventListener("resize",this.handleReposition),window.removeEventListener("scroll",this.handleReposition,!0),clearTimeout(this.openSubmenuTimer),clearTimeout(this.closeSubmenuTimer),super.disconnectedCallback?.()}isOptionDisabled(e){return!!e.disabled||this.disabledKeys.includes(e.key)}get hasStartSlotContent(){return this.querySelector(':scope > [slot="start"]')!==null}openMenu(){this.disabled||this.updateComplete.then(()=>{let e=this.menuEl;if(!e)return;let t=this.menuAnimation!==void 0;this.menuAnimation?.cancel(),this.menuAnimation=void 0;let i=!e.matches(":popover-open");i&&e.showPopover(),(i||t)&&this.playMenuOpenAnimation(e)})}playMenuOpenAnimation(e){e.style.removeProperty("pointer-events");let t=b(e);if(t===0)return;let i=e.style.getPropertyValue("--_menuOffsetX")||"0px",n=e.style.getPropertyValue("--_menuOffsetY")||"-4px";this.menuAnimation=e.animate([{opacity:0,transform:`translate(${i}, ${n}) scale(0.96)`},{opacity:1,transform:"translate(0, 0) scale(1)"}],{duration:t,easing:"ease",fill:"forwards"})}closeMenu(){let e=this.menuEl;this.menuAnimation?.cancel(),this.menuAnimation=void 0,e?.matches(":popover-open")&&this.playMenuCloseAnimation(e)}playMenuCloseAnimation(e){e.style.pointerEvents="none";let t=b(e),i=e.style.getPropertyValue("--_menuOffsetX")||"0px",n=e.style.getPropertyValue("--_menuOffsetY")||"-4px";if(t===0){e.hidePopover();return}let o=e.animate([{opacity:1,transform:"translate(0, 0) scale(1)"},{opacity:0,transform:`translate(${i}, ${n}) scale(0.96)`}],{duration:t,easing:"ease",fill:"forwards"});this.menuAnimation=o,o.finished.then(()=>{this.menuAnimation===o&&(this.menuAnimation=void 0),e.hidePopover()}).catch(()=>{})}closeMenuOnTabAway(){this.skipTriggerRefocus=!0,this.closeMenu()}tabAway(){this.closeMenuOnTabAway()}get menuEntries(){return[...Array.from(this.menuEl?.querySelectorAll(":scope > li")??[]),...this.itemsList??[]]}entryKey(e){return e.tagName==="LI"?e.dataset.key??null:e.key??null}closeOtherSubmenus(e){if(!this.openSubmenuKey||this.openSubmenuKey===e)return;let t=this.menuEntries.find(i=>this.entryKey(i)===this.openSubmenuKey);t?.tagName==="LI"?this.closeSubmenu():(t?.closeSubmenu(),this.openSubmenuKey=null)}notifySubmenuOpened(e){this.openSubmenuKey=e}notifySubmenuClosed(e){this.openSubmenuKey===e&&(this.openSubmenuKey=null)}dispatchSelect(e){this.dispatchEvent(new v(e)),this.closeMenu()}selectByKey(e){this.dispatchSelect(e)}getEffectivePlacement(e,t){let n=document.documentElement.clientWidth,o=document.documentElement.clientHeight;if(this.placement==="left"||this.placement==="right"){let h=e.right+4+t.width<=n,c=e.left-4-t.width>=0;return this.placement==="right"&&!h&&c?"left":this.placement==="left"&&!c&&h?"right":this.placement}let m=e.bottom+4+t.height<=o,a=e.top-4-t.height>=0,u=this.placement.startsWith("top");return u&&!a&&m?this.placement.replace("top","bottom"):!u&&!m&&a?this.placement.replace("bottom","top"):this.placement}positionMenu(){if(!this.triggerEl||!this.menuEl)return;let e=4,t=document.documentElement.clientWidth,i=document.documentElement.clientHeight,n=this.triggerEl.getBoundingClientRect(),o=this.menuEl.getBoundingClientRect(),m=this.getEffectivePlacement(n,o),a,u,h=0,c=0;switch(m){case"top":a=n.top-o.height-e*3,u=n.left+n.width/2-o.width/2,c=4;break;case"top-start":a=n.top-o.height-e*3,u=n.left,c=4;break;case"top-end":a=n.top-o.height-e*3,u=n.right-o.width,c=4;break;case"right":a=n.top+n.height/2-o.height/2,u=n.right+e,h=-4;break;case"bottom":a=n.bottom+e,u=n.left+n.width/2-o.width/2,c=-4;break;case"bottom-end":a=n.bottom+e,u=n.right-o.width,c=-4;break;case"left":a=n.top+n.height/2-o.height/2,u=n.left-o.width-e,h=4;break;default:a=n.bottom+e,u=n.left,c=-4;break}m==="left"||m==="right"?a=S(a,o.height,i,e):u=S(u,o.width,t,e),this.menuEl.style.setProperty("--_menuTop",`${a}px`),this.menuEl.style.setProperty("--_menuLeft",`${u}px`),this.menuEl.style.setProperty("--_menuWidth",`${n.width}px`),this.menuEl.style.setProperty("--_menuOffsetX",`${h}px`),this.menuEl.style.setProperty("--_menuOffsetY",`${c}px`)}getSubmenuElements(e){let t=this.menuEl?.querySelector(`li[data-key="${CSS.escape(e)}"]`),i=t?.querySelector(":scope > ul");if(!(!t||!i))return{li:t,submenu:i}}positionSubmenu(e,t){let{top:n,left:o,offsetX:m}=C(e.getBoundingClientRect(),t.getBoundingClientRect(),4);t.style.setProperty("--_submenuTop",`${n}px`),t.style.setProperty("--_submenuLeft",`${o}px`),t.style.setProperty("--_submenuOffsetX",`${m}px`)}repositionOpenSubmenu(){if(!this.openSubmenuKey)return;let e=this.menuEntries.find(t=>this.entryKey(t)===this.openSubmenuKey);if(e?.tagName==="LI"){let t=this.getSubmenuElements(this.openSubmenuKey);t&&this.positionSubmenu(t.li,t.submenu)}else e?.repositionSubmenu()}openSubmenu(e){if(!e.options?.length||this.isOptionDisabled(e))return;clearTimeout(this.openSubmenuTimer),clearTimeout(this.closeSubmenuTimer),this.closeOtherSubmenus(e.key);let t=this.getSubmenuElements(e.key)?.submenu;if(!t)return;let i=this.submenuAnimation!==void 0;this.submenuAnimation?.cancel(),this.submenuAnimation=void 0;let n=!t.matches(":popover-open");!n&&!i||(n&&t.showPopover(),this.playSubmenuOpenAnimation(t))}playSubmenuOpenAnimation(e){e.style.removeProperty("pointer-events");let t=b(e);if(t===0)return;let i=e.style.getPropertyValue("--_submenuOffsetX")||"-4px";this.submenuAnimation=e.animate([{opacity:0,transform:`translate(${i}, 0) scale(0.96)`},{opacity:1,transform:"translate(0, 0) scale(1)"}],{duration:t,easing:"ease",fill:"forwards"})}playSubmenuCloseAnimation(e){e.style.pointerEvents="none";let t=b(e),i=e.style.getPropertyValue("--_submenuOffsetX")||"-4px";if(t===0){e.hidePopover();return}let n=e.animate([{opacity:1,transform:"translate(0, 0) scale(1)"},{opacity:0,transform:`translate(${i}, 0) scale(0.96)`}],{duration:t,easing:"ease",fill:"forwards"});this.submenuAnimation=n,n.finished.then(()=>{this.submenuAnimation===n&&(this.submenuAnimation=void 0),e.hidePopover()}).catch(()=>{})}closeSubmenu(){if(clearTimeout(this.openSubmenuTimer),clearTimeout(this.closeSubmenuTimer),!this.openSubmenuKey)return;let e=this.openSubmenuKey,t=this.menuEntries.find(i=>this.entryKey(i)===e);if(t?.tagName==="LI"){let i=this.getSubmenuElements(e)?.submenu;this.submenuAnimation?.cancel(),this.submenuAnimation=void 0,i?.matches(":popover-open")&&this.playSubmenuCloseAnimation(i)}else t?.closeSubmenu(),this.openSubmenuKey=null}handleSubmenuToggle(e,t){let i=e,n=e.currentTarget;if(i.newState==="open"){this.notifySubmenuOpened(t.key);let o=n.parentElement;o&&this.positionSubmenu(o,n),this.updateComplete.then(()=>{let m=Array.from(n.querySelectorAll(":scope > li"));g(m,0)});return}this.notifySubmenuClosed(t.key)}closeSubmenuAndRefocus(e){this.closeSubmenu(),this.updateComplete.then(()=>{this.menuEl?.querySelector(`li[data-key="${CSS.escape(e.key)}"]`)?.focus()})}toggleSubmenu(e){this.openSubmenuKey===e.key?this.closeSubmenu():this.openSubmenu(e)}scheduleCloseSubmenu(e){clearTimeout(this.closeSubmenuTimer),this.closeSubmenuTimer=setTimeout(()=>{if(this.openSubmenuKey!==e)return;let t=this.getSubmenuElements(e)?.submenu;this.submenuAnimation?.cancel(),this.submenuAnimation=void 0,t?.matches(":popover-open")&&this.playSubmenuCloseAnimation(t)},150)}scheduleCloseTrackedSubmenu(){clearTimeout(this.closeSubmenuTimer),this.closeSubmenuTimer=setTimeout(()=>{this.closeOtherSubmenus(null)},150)}handleItemMouseEnter(e){if(clearTimeout(this.closeSubmenuTimer),!e.options?.length){this.openSubmenuKey&&this.scheduleCloseTrackedSubmenu();return}this.isOptionDisabled(e)||this.openSubmenuKey===e.key||(clearTimeout(this.openSubmenuTimer),this.openSubmenuTimer=setTimeout(()=>this.openSubmenu(e),150))}handleItemMouseLeave(e){clearTimeout(this.openSubmenuTimer),e.options?.length&&this.scheduleCloseSubmenu(e.key)}handleSubmenuMouseEnter(){clearTimeout(this.closeSubmenuTimer)}handleSubmenuMouseLeave(e){this.scheduleCloseSubmenu(e)}handleToggleClick(){this.open?this.closeMenu():this.openMenu()}selectOption(e){this.isOptionDisabled(e)||this.dispatchSelect(e.key)}handleItemClick(e){if(!this.isOptionDisabled(e)){if(e.options?.length){this.toggleSubmenu(e);return}this.selectOption(e)}}renderOptionContent(e){return p`
+      ${e.icon?p`<eun-icon
+            class="option-icon"
+            name=${e.icon}
+            size="16"
+          ></eun-icon>`:d}
+      <div class="option-text">
+        <span class="title">${e.label}</span>
+        ${e.description?p`<span class="description">${e.description}</span>`:d}
+      </div>
+    `}renderOption(e){let t=!!e.options?.length,i=t&&this.openSubmenuKey===e.key,n=this.isOptionDisabled(e);return p`
+      <li
+        role="menuitem"
+        tabindex=${n?d:"-1"}
+        data-key=${e.key}
+        class=${$({highlighted:i,active:!!e.active})}
+        aria-disabled=${n?"true":"false"}
+        aria-haspopup=${f(t?"menu":void 0)}
+        aria-expanded=${f(t?i?"true":"false":void 0)}
+        @click=${()=>this.handleItemClick(e)}
+        @keydown=${o=>E(o,this.menuEntries,{onSelect:()=>this.selectOption(e),onOpenSubmenu:()=>this.openSubmenu(e),onTabAway:()=>this.closeMenuOnTabAway()})}
+        @mouseenter=${()=>this.handleItemMouseEnter(e)}
+        @mouseleave=${()=>this.handleItemMouseLeave(e)}
+      >
+        ${this.renderOptionContent(e)}
+        ${t?p`<eun-icon
+              class="submenu-chevron"
+              name="chevron_right"
+              size="16"
+            ></eun-icon>`:d}
+        ${t?this.renderSubmenu(e):d}
+      </li>
+    `}renderSubmenu(e){let t=e.options??[];return p`
+      <ul
+        class="submenu"
+        role="menu"
+        popover="auto"
+        @toggle=${i=>this.handleSubmenuToggle(i,e)}
+        @mouseenter=${()=>this.handleSubmenuMouseEnter()}
+        @mouseleave=${()=>this.handleSubmenuMouseLeave(e.key)}
+      >
+        ${t.map(i=>p`
+            <li
+              role="menuitem"
+              tabindex=${this.isOptionDisabled(i)?d:"-1"}
+              aria-disabled=${this.isOptionDisabled(i)?"true":"false"}
+              @click=${()=>this.selectOption(i)}
+              @keydown=${n=>{let o=n.currentTarget.closest("ul"),m=Array.from(o?.querySelectorAll(":scope > li")??[]);E(n,m,{onSelect:()=>this.selectOption(i),onClose:()=>this.closeSubmenuAndRefocus(e),onTabAway:()=>this.closeMenuOnTabAway()})}}
+            >
+              ${this.renderOptionContent(i)}
+            </li>
+          `)}
+      </ul>
+    `}renderTriggerStartContent(){if(this.hasStartSlotContent)return p`<slot name="start" slot="start"></slot>`;let e=L(this.icon,this.severity);return e?p`<eun-icon slot="start" name=${e} size="16"></eun-icon>`:d}render(){return p`
+      <eun-button
+        id="trigger"
+        type="button"
+        size=${this.size}
+        variant=${f(this.variant)}
+        ?fixed-color=${this.fixedColor}
+        appearance=${this.appearance}
+        ?rounded=${this.rounded}
+        ?disabled=${this.disabled}
+        aria-haspopup="menu"
+        aria-expanded=${this.open}
+        aria-label=${f(this.ariaLabel??void 0)}
+        @click=${this.handleToggleClick}
+      >
+        ${this.renderTriggerStartContent()}
+        <slot>${this.label}</slot>
+      </eun-button>
+      <ul
+        id="menu"
+        role="menu"
+        popover="auto"
+        @toggle=${this.handlePopoverToggle}
+      >
+        ${this.options.map(e=>this.renderOption(e))}
+        <slot name="items"></slot>
+      </ul>
+    `}};s.styles=P,r([l()],s.prototype,"label",2),r([l()],s.prototype,"icon",2),r([l({reflect:!0})],s.prototype,"severity",2),r([l({type:Array,reflect:!0})],s.prototype,"options",2),r([l({type:Array,reflect:!0,attribute:"disabled-keys"})],s.prototype,"disabledKeys",2),r([l({type:Boolean,reflect:!0})],s.prototype,"disabled",2),r([l({reflect:!0})],s.prototype,"size",2),r([l({reflect:!0})],s.prototype,"variant",2),r([l({type:Boolean,reflect:!0,attribute:"fixed-color"})],s.prototype,"fixedColor",2),r([l({type:Boolean,reflect:!0})],s.prototype,"rounded",2),r([l({reflect:!0})],s.prototype,"appearance",2),r([l({reflect:!0})],s.prototype,"placement",2),r([l({type:Boolean,reflect:!0})],s.prototype,"open",2),r([k()],s.prototype,"openSubmenuKey",2),r([O({slot:"items"})],s.prototype,"itemsList",2),r([y("#trigger")],s.prototype,"triggerEl",2),r([y("#menu")],s.prototype,"menuEl",2),s=r([x(K)],s);export{K as a,s as b};

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

@@ -0,0 +1 @@
+var e=class t extends Event{static{this.eventName="eunchange"}constructor(n){super(t.eventName,{bubbles:!0,composed:!1}),this.value=n}};export{e as a};

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

@@ -1,4 +1,4 @@
-import{a as f}from"./chunks/chunk-YQU6RVX4.js";import{e as v}from"./chunks/chunk-5TH3P53V.js";import{a as g}from"./chunks/chunk-UP4M7TER.js";import{a as n}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as h}from"./chunks/chunk-5EVP7YNE.js";import{a as o,f as s,g as d,h as r,l,m as u,n as t,p as a,s as p}from"./chunks/chunk-XH6NREVZ.js";var m=d`
+import{a as f}from"./chunks/chunk-YQU6RVX4.js";import{e as h}from"./chunks/chunk-LGLQ36QB.js";import{a as g}from"./chunks/chunk-UP4M7TER.js";import{a as n}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as v}from"./chunks/chunk-5EVP7YNE.js";import{a as r,f as s,g as d,h as o,l as i,m as u,n as a,p as t,s as p}from"./chunks/chunk-XH6NREVZ.js";var m=d`
   :host {
     display: block;
     width: 100%;
@@ -7,16 +7,10 @@ import{a as f}from"./chunks/chunk-YQU6RVX4.js";import{e as v}from"./chunks/chunk
   }
 
   :host(:not([severity])) {
-    --_background: var(
-      --alert-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
+    --_background: var(--eun-surface-sunken, #f7f8fa);
     --_backgroundFilled: var(--_background);
-    --_borderColor: var(
-      --alert-border-color,
-      var(--eun-color-grey-300, #dee0e7)
-    );
-    --_titleColor: var(--alert-color, var(--eun-text-color, #071621));
+    --_borderColor: var(--eun-color-grey-300, #dee0e7);
+    --_titleColor: var(--eun-text-color, #071621);
   }
   :host([severity="info"]) {
     --_background: var(--eun-color-info-30, #f0f7fa);
@@ -43,7 +37,8 @@ import{a as f}from"./chunks/chunk-YQU6RVX4.js";import{e as v}from"./chunks/chunk
     --_titleColor: var(--eun-color-critical-100, #aa0014);
   }
   :host([severity="neutral"]) {
-    --_background: var(--eun-color-grey-200, #ecedf0);
+    --_onFilled: var(--eun-color-grey-0, #ffffff);
+    --_background: var(--eun-surface-sunken-strong, #ecedf0);
     --_backgroundFilled: var(--eun-color-grey-700, #484e61);
     --_borderColor: var(--eun-color-grey-700, #484e61);
     --_titleColor: var(--eun-color-grey-700, #484e61);
@@ -58,9 +53,18 @@ import{a as f}from"./chunks/chunk-YQU6RVX4.js";import{e as v}from"./chunks/chunk
     row-gap: var(--alert-row-gap, var(--eun-space-s, 8px));
     width: 100%;
     box-sizing: border-box;
-    padding: var(--alert-padding, var(--eun-space-m, 16px));
-    border-radius: var(--alert-border-radius, var(--eun-borderRadius-m, 8px));
-    font-size: var(--eun-fontSize-s, 14px);
+    --_bw: var(--alert-border-width, var(--eun-border-width-s, 1px));
+    /* Every appearance carries the same border box (transparent unless
+       drawn), taken out of the padding, so switching appearance or adding a
+       --alert-border-* never changes the size. */
+    border: var(--_bw) solid
+      var(--alert-border-color, var(--_frame, transparent));
+    padding: var(
+      --alert-padding,
+      max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+    );
+    border-radius: var(--alert-border-radius, var(--eun-border-radius-m, 8px));
+    font-size: var(--eun-font-size-s, 14px);
     --_contentColor: var(--alert-content-color, var(--eun-text-color, #071621));
     color: var(--_contentColor);
   }
@@ -74,44 +78,53 @@ import{a as f}from"./chunks/chunk-YQU6RVX4.js";import{e as v}from"./chunks/chunk
   :host([appearance="default"]) #alert {
     background: linear-gradient(
       to right,
-      var(--_borderColor) 4px,
-      var(--_background) 4px
+      var(--alert-border-color, var(--_borderColor)) 4px,
+      var(--alert-background-color, var(--_background)) 4px
     );
   }
   :host([appearance="flat"]) #alert {
-    background: var(--_background);
+    background: var(--alert-background-color, var(--_background));
   }
   :host([appearance="outline"]) #alert {
-    background: var(--eun-surface-color, #ffffff);
-    border: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    --_frame: var(--_borderColor);
+    background: var(
+      --alert-background-color,
+      var(--eun-surface-color, #ffffff)
+    );
   }
   :host([appearance="fill"]) #alert {
-    background: var(--_backgroundFilled);
-    --_contentColor: var(--alert-content-color, #fff);
+    background: var(--alert-background-color, var(--_backgroundFilled));
+    --_contentColor: var(--alert-content-color, var(--_onFilled, #fff));
   }
 
   #heading {
-    color: var(--_titleColor);
+    color: var(--alert-color, var(--_titleColor));
   }
   :host([appearance="fill"]) #heading {
-    color: #fff;
+    color: var(--alert-color, var(--_onFilled, #fff));
   }
 
   slot[name="icon"] {
-    --icon-color: var(--alert-icon-color, var(--_titleColor));
+    --icon-color: var(
+      --alert-icon-color,
+      var(--alert-color, var(--_titleColor))
+    );
     grid-column: 1;
     grid-row: 1;
     align-self: center;
     display: flex;
   }
   :host([appearance="fill"]) slot[name="icon"] {
-    --icon-color: var(--alert-icon-color, #fff);
+    --icon-color: var(
+      --alert-icon-color,
+      var(--alert-color, var(--_onFilled, #fff))
+    );
   }
   #heading {
     grid-column: 2;
     grid-row: 1;
     align-self: center;
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
   }
 
   #description,
@@ -129,7 +142,10 @@ import{a as f}from"./chunks/chunk-YQU6RVX4.js";import{e as v}from"./chunks/chunk
     margin-block-end: 0;
   }
   #rich-text a {
-    color: var(--_titleColor);
+    color: var(--alert-color, var(--_titleColor));
+  }
+  :host([appearance="fill"]) #rich-text a {
+    color: var(--alert-color, var(--_onFilled, #fff));
   }
 
   ::slotted([slot="description"]) {
@@ -146,15 +162,19 @@ import{a as f}from"./chunks/chunk-YQU6RVX4.js";import{e as v}from"./chunks/chunk
     display: inline-block;
   }
   :host([appearance="fill"]) ::slotted([slot="action"]) {
-    --link-color: #fff;
-    --link-color-hover: #fff;
-    --link-color-visited: #fff;
-    --link-color-visited-hover: #fff;
+    --link-color: var(--_onFilled, #fff);
+    --link-color-hover: var(--_onFilled, #fff);
+    --link-color-visited: var(--_onFilled, #fff);
+    --link-color-visited-hover: var(--_onFilled, #fff);
   }
 
   :host([closeable]) #alert {
     padding-right: calc(
-      var(--alert-padding, var(--eun-space-m, 16px)) + var(--eun-space-l, 32px)
+      var(
+          --alert-padding,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        ) +
+        var(--eun-space-l, 32px)
     );
   }
   #close-button {
@@ -163,7 +183,7 @@ import{a as f}from"./chunks/chunk-YQU6RVX4.js";import{e as v}from"./chunks/chunk
     display: flex;
     top: var(--eun-space-s, 8px);
     right: var(--eun-space-s, 8px);
-    --button-text: var(--_titleColor);
+    --button-text: var(--alert-color, var(--_titleColor));
     --button-focus-outline: var(
       --alert-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -172,11 +192,11 @@ import{a as f}from"./chunks/chunk-YQU6RVX4.js";import{e as v}from"./chunks/chunk
     justify-content: center;
   }
   :host([appearance="fill"]) #close-button {
-    --button-text: #fff;
+    --button-text: var(--alert-color, var(--_onFilled, #fff));
   }
-`,b=m;var y="eun-alert",e=class extends p{constructor(){super(...arguments);this.appearance="default";this.hideIcon=!1;this.closeable=!1;this.ariaLabelClose="Close";this.handleSlotChange=()=>{this.requestUpdate()};this.handleClose=()=>{this.dispatchEvent(new f)}}getIconName(){return g(this.icon,this.severity,"severity")}shouldHideIcon(){return this.hideIcon?!0:this.iconSlotEls.length>0||this.severity?!1:!this.icon}hasDescription(){return!!this.richText||this.descriptionSlotEls.length>0||!!this.heading&&this.hasDefaultSlotContent()}hasDefaultSlotContent(){return this.defaultSlotNodes.some(i=>i.nodeType!==Node.TEXT_NODE||!!i.textContent?.trim())}hasAction(){return this.actionSlotEls.length>0}render(){let i=this.severity==="warning"||this.severity==="critical"?"alert":"status",c=this.shouldHideIcon();return t`
-      <div id="alert" role=${i} class=${n({"no-icon":c})}>
-        ${this.closeable?t`
+`,b=m;var _="eun-alert",e=class extends p{constructor(){super(...arguments);this.appearance="default";this.hideIcon=!1;this.closeable=!1;this.ariaLabelClose="Close";this.handleSlotChange=()=>{this.requestUpdate()};this.handleClose=()=>{this.dispatchEvent(new f)}}getIconName(){return g(this.icon,this.severity,"severity")}shouldHideIcon(){return this.hideIcon?!0:this.iconSlotEls.length>0||this.severity?!1:!this.icon}hasDescription(){return!!this.richText||this.descriptionSlotEls.length>0||!!this.heading&&this.hasDefaultSlotContent()}hasDefaultSlotContent(){return this.defaultSlotNodes.some(l=>l.nodeType!==Node.TEXT_NODE||!!l.textContent?.trim())}hasAction(){return this.actionSlotEls.length>0}render(){let l=this.severity==="warning"||this.severity==="critical"?"alert":"status",c=this.shouldHideIcon();return a`
+      <div id="alert" role=${l} class=${n({"no-icon":c})}>
+        ${this.closeable?a`
               <eun-button
                 id="close-button"
                 appearance="ghost"
@@ -187,33 +207,33 @@ import{a as f}from"./chunks/chunk-YQU6RVX4.js";import{e as v}from"./chunks/chunk
               >
                 <eun-icon name="close" size="16"></eun-icon>
               </eun-button>
-            `:a}
+            `:t}
         <slot name="icon" @slotchange=${this.handleSlotChange}>
-          ${c?a:t`
+          ${c?t:a`
                 <eun-icon
                   id="icon"
                   size="20"
                   shape="round"
-                  name=${h(this.getIconName())}
+                  name=${v(this.getIconName())}
                 ></eun-icon>
               `}
         </slot>
         <div id="heading">
-          ${this.heading?this.heading:t`<slot></slot>`}
+          ${this.heading?this.heading:a`<slot></slot>`}
         </div>
         <div
           id="description"
           class=${n({hidden:!this.hasDescription()})}
         >
-          ${this.richText?t`<div id="rich-text">${v(this.richText)}</div>`:a}
-          ${this.heading?t`<slot
+          ${this.richText?a`<div id="rich-text">${h(this.richText)}</div>`:t}
+          ${this.heading?a`<slot
                 id="default-description"
                 @slotchange=${this.handleSlotChange}
-              ></slot>`:a}
+              ></slot>`:t}
           <slot name="description" @slotchange=${this.handleSlotChange}></slot>
         </div>
         <div id="action" class=${n({hidden:!this.hasAction()})}>
           <slot name="action" @slotchange=${this.handleSlotChange}></slot>
         </div>
       </div>
-    `}};e.styles=b,o([r({reflect:!0})],e.prototype,"severity",2),o([r({reflect:!0})],e.prototype,"appearance",2),o([r()],e.prototype,"heading",2),o([r()],e.prototype,"icon",2),o([r({type:Boolean,attribute:"hide-icon"})],e.prototype,"hideIcon",2),o([r({attribute:"rich-text"})],e.prototype,"richText",2),o([r({type:Boolean,reflect:!0})],e.prototype,"closeable",2),o([r({attribute:"aria-label-close"})],e.prototype,"ariaLabelClose",2),o([l({slot:"description"})],e.prototype,"descriptionSlotEls",2),o([l({slot:"action"})],e.prototype,"actionSlotEls",2),o([l({slot:"icon"})],e.prototype,"iconSlotEls",2),o([u()],e.prototype,"defaultSlotNodes",2),e=o([s(y)],e);export{e as EunomiaAlert,y as EunomiaAlertTagName};
+    `}};e.styles=b,r([o({reflect:!0})],e.prototype,"severity",2),r([o({reflect:!0})],e.prototype,"appearance",2),r([o()],e.prototype,"heading",2),r([o()],e.prototype,"icon",2),r([o({type:Boolean,attribute:"hide-icon"})],e.prototype,"hideIcon",2),r([o({attribute:"rich-text"})],e.prototype,"richText",2),r([o({type:Boolean,reflect:!0})],e.prototype,"closeable",2),r([o({attribute:"aria-label-close"})],e.prototype,"ariaLabelClose",2),r([i({slot:"description"})],e.prototype,"descriptionSlotEls",2),r([i({slot:"action"})],e.prototype,"actionSlotEls",2),r([i({slot:"icon"})],e.prototype,"iconSlotEls",2),r([u()],e.prototype,"defaultSlotNodes",2),e=r([s(_)],e);export{e as EunomiaAlert,_ as EunomiaAlertTagName};