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

package/dist/cdn/components/eun-toggle-item.js

@@ -1,4 +1,4 @@
-import{a as l}from"./chunks/chunk-T7WABJEJ.js";import{a as e,f as i,g as n,h as r,n as t,p as c,s}from"./chunks/chunk-XH6NREVZ.js";var u=n`
+import{a as s}from"./chunks/chunk-T7WABJEJ.js";import{a as e,f as i,g as n,h as r,n as t,p as l,s as c}from"./chunks/chunk-XH6NREVZ.js";var u=n`
   :host {
     --_hoverColor: var(
       --toggle-group-hover-color,
@@ -10,22 +10,28 @@ import{a as l}from"./chunks/chunk-T7WABJEJ.js";import{a as e,f as i,g as n,h as
     position: relative;
     z-index: 1;
     display: inline-block;
+    flex-shrink: 0;
     outline: none !important;
   }
+  :host([full]) {
+    flex: 1 1 0%;
+  }
   #item {
     box-sizing: border-box;
+    width: 100%;
     display: inline-flex;
     align-items: center;
     gap: var(--eun-space-xs, 4px);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-m, 500);
     text-transform: capitalize;
+    white-space: nowrap;
     cursor: pointer;
     color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
     padding: 6px 14px;
     border-radius: calc(
-      var(--toggle-group-border-radius, var(--eun-borderRadius-m, 8px)) - 3px
+      var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
     );
     outline: 2px solid transparent;
     box-shadow: var(--_boxShadow);
@@ -53,6 +59,9 @@ import{a as l}from"./chunks/chunk-T7WABJEJ.js";import{a as e,f as i,g as n,h as
     cursor: not-allowed;
     opacity: 0.5;
   }
+  :host([full]) #item {
+    justify-content: center;
+  }
   :host([checked]:not([exclusive])) #item {
     background: var(
       --toggle-group-active-background,
@@ -67,69 +76,77 @@ import{a as l}from"./chunks/chunk-T7WABJEJ.js";import{a as e,f as i,g as n,h as
   }
 
   :host {
+    --_variantColorDefault: var(--eun-color-primary-500, #3d6fff);
+    --_variantTintDefault: var(--eun-color-primary-transparent, #3d6fff33);
     --_variantColor: var(
       --toggle-group-active-background,
-      var(--eun-color-primary-500, #3d6fff)
+      var(--_variantColorDefault)
+    );
+    --_variantTint: var(--_customTint, var(--_variantTintDefault));
+    --_customTint: color-mix(
+      in srgb,
+      var(--toggle-group-active-background) 15%,
+      transparent
     );
-    --_variantTint: var(--eun-color-primary-transparent, #3d6fff33);
   }
   :host([variant="secondary"]) {
-    --_variantColor: var(--eun-color-secondary-500, #e5a030);
-    --_variantTint: var(--eun-color-secondary-transparent, #e5a03033);
+    --_variantColorDefault: var(--eun-color-secondary-500, #e5a030);
+    --_variantTintDefault: var(--eun-color-secondary-transparent, #e5a03033);
   }
   :host([variant="critical"]) {
-    --_variantColor: var(--eun-color-critical-100, #aa0014);
-    --_variantTint: var(--eun-color-critical-30, #faf0f1);
+    --_variantColorDefault: var(--eun-color-critical-100, #aa0014);
+    --_variantTintDefault: var(--eun-color-critical-30, #faf0f1);
   }
   :host([variant="success"]) {
-    --_variantColor: var(--eun-color-success-100, #1a9948);
-    --_variantTint: var(--eun-color-success-30, #f1f9f4);
+    --_variantColorDefault: var(--eun-color-success-100, #1a9948);
+    --_variantTintDefault: var(--eun-color-success-30, #f1f9f4);
   }
   :host([variant="warning"]) {
-    --_variantColor: var(--eun-color-warning-100, #c85207);
-    --_variantTint: var(--eun-color-warning-30, #fcf5f0);
+    --_variantColorDefault: var(--eun-color-warning-100, #c85207);
+    --_variantTintDefault: var(--eun-color-warning-30, #fcf5f0);
   }
   :host([appearance="outline"]) #item,
   :host([appearance="flat"]) #item {
     border-radius: var(
       --toggle-group-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
   }
   :host([appearance="outline"]) #item {
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--toggle-group-border-color, var(--eun-color-grey-300, #dee0e7));
   }
   :host([appearance="flat"]) #item {
-    border: var(--eun-borderWidth-s, 1px) solid transparent;
+    border: var(--eun-border-width-s, 1px) solid
+      var(--toggle-group-border-color, transparent);
   }
   :host([appearance="outline"][checked]) #item,
   :host([appearance="flat"][checked]) #item {
     background: var(--_variantTint);
-    color: var(--_variantColor);
-    font-weight: var(--eun-fontWeight-b, 700);
+    color: var(--toggle-group-active-color, var(--_variantColor));
+    font-weight: var(--eun-font-weight-b, 700);
   }
   :host([appearance="outline"][checked]) #item {
     border-color: var(--_variantColor);
   }
   :host([appearance="outline"]:not([disabled]):not([checked]):hover) #item,
   :host([appearance="flat"]:not([disabled]):not([checked]):hover) #item {
-    color: var(--_variantColor);
+    color: var(--toggle-group-hover-color, var(--_variantColor));
   }
   :host([appearance="outline"]:focus-visible) #item,
   :host([appearance="flat"]:focus-visible) #item {
     outline-color: var(--_variantColor);
-    color: var(--_variantColor);
+    color: var(--toggle-group-hover-color, var(--_variantColor));
   }
   :host([appearance="outline"]:not([disabled]):not([checked]):hover) #item,
   :host([appearance="outline"]:focus-visible) #item {
     border-color: var(--_variantColor);
   }
-`;var d="eun-toggle-item",v="eun-toggle-group",o=class extends l(s){constructor(){super(...arguments);this.checked=!1;this.activate=()=>{this.disabled||this.closest(v)?.activateItem(this)}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","checkbox"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("click",this.activate)}disconnectedCallback(){this.removeEventListener("click",this.activate),super.disconnectedCallback?.()}updated(a){super.updated(a),a.has("checked")&&this.setAttribute("aria-checked",String(this.checked))}render(){return t`
+`;var v="eun-toggle-item",d="eun-toggle-group",o=class extends s(c){constructor(){super(...arguments);this.checked=!1;this.activate=()=>{this.disabled||this.closest(d)?.activateItem(this)}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","checkbox"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("click",this.activate)}disconnectedCallback(){this.removeEventListener("click",this.activate),super.disconnectedCallback?.()}updated(a){super.updated(a),a.has("checked")&&this.setAttribute("aria-checked",String(this.checked))}render(){return t`
       <div id="item" part="item">
         <slot name="icon">
-          ${this.icon?t`<eun-icon name=${this.icon} size="16"></eun-icon>`:c}
+          ${this.icon?t`<eun-icon name=${this.icon} size="16"></eun-icon>`:l}
         </slot>
         <slot></slot>
       </div>
-    `}};o.styles=[u],e([r({reflect:!0})],o.prototype,"value",2),e([r()],o.prototype,"icon",2),e([r({reflect:!0})],o.prototype,"variant",2),e([r({type:Boolean,reflect:!0})],o.prototype,"checked",2),o=e([i(d)],o);export{o as EunomiaToggleItem,d as EunomiaToggleItemTagName};
+    `}};o.styles=[u],e([r({reflect:!0})],o.prototype,"value",2),e([r()],o.prototype,"icon",2),e([r({reflect:!0})],o.prototype,"variant",2),e([r({type:Boolean,reflect:!0})],o.prototype,"checked",2),o=e([i(v)],o);export{o as EunomiaToggleItem,v as EunomiaToggleItemTagName};

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

@@ -19,8 +19,8 @@ import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk
     gap: var(--eun-space-xs, 4px);
     cursor: pointer;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-m, 500);
     text-transform: capitalize;
     color: var(--toggle-color, var(--eun-color-grey-600, #666e8a));
     padding: var(
@@ -28,9 +28,9 @@ import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk
       calc(var(--eun-space-xs, 4px) * 1.5) var(--eun-space-m, 16px)
     );
     outline: 2px solid transparent;
-    border-radius: var(--toggle-border-radius, var(--eun-borderRadius-m, 8px));
-    background: var(--toggle-background, var(--eun-color-grey-100, #f7f8fa));
-    border: var(--toggle-border-size, var(--eun-borderWidth-s, 1px)) solid
+    border-radius: var(--toggle-border-radius, var(--eun-border-radius-m, 8px));
+    background: var(--toggle-background, var(--eun-surface-sunken, #f7f8fa));
+    border: var(--toggle-border-size, var(--eun-border-width-s, 1px)) solid
       var(--toggle-border-color, var(--eun-color-grey-300, #dee0e7));
     box-shadow: var(--_boxShadow);
     transition:
@@ -73,11 +73,14 @@ import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk
     );
   }
   :host([appearance="flat"]:not([disabled])) #toggle {
-    background: var(--toggle-background, var(--eun-color-grey-100, #f7f8fa));
-    border-color: transparent;
+    background: var(--toggle-background, var(--eun-surface-sunken, #f7f8fa));
+    border-color: var(--toggle-border-color, transparent);
   }
   :host([appearance="flat"]:not([disabled]):hover) #toggle {
-    border-color: var(--toggle-border-color-hover, transparent);
+    border-color: var(
+      --toggle-border-color-hover,
+      var(--toggle-border-color, transparent)
+    );
   }
   :host([checked]:not([swap])) #toggle {
     background: var(

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

@@ -31,7 +31,9 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
       color-mix(in srgb, var(--_background) 90%, transparent)
     );
     --_panelColor: var(--toolbar-panel-color, var(--_color));
-    --_panelPadding: var(--toolbar-panel-padding, 24px);
+    --_panelPadding: var(--toolbar-panel-padding, 14px);
+    --_burgerAlign: var(--toolbar-burger-align, center);
+    --_burgerPadding: var(--toolbar-burger-padding, 0 var(--_panelPadding));
     --_panelGap: var(--toolbar-panel-gap, 8px);
     --_panelBackdropBlur: var(--toolbar-panel-backdrop-blur, 8px);
     --_skipLinksHeight: var(--toolbar-skip-links-height, 40px);
@@ -85,7 +87,7 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
     padding: var(--_padding);
     background: var(--_background);
     color: var(--_color);
-    border-block-end: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-block-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     box-shadow: var(--_shadow);
     transition:
       height var(--_transitionDuration) ease,
@@ -144,7 +146,7 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
     outline-offset: 2px;
     outline: 2px solid transparent;
     transition: outline 0.2s ease-out;
-    border-radius: var(--eun-borderRadius-s);
+    border-radius: var(--eun-border-radius-s);
   }
   #logo-link:focus-visible {
     outline-color: var(--eun-color-primary-500);
@@ -191,7 +193,7 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
     display: inline-flex;
     align-items: center;
     color: inherit;
-    font-size: var(--eun-fontSize-s, 13px);
+    font-size: var(--eun-font-size-s, 13px);
     text-decoration: none;
     white-space: nowrap;
   }
@@ -202,7 +204,7 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
     --link-color-focus: var(--_skipLinksColor);
     --link-padding: var(--eun-space-xs, 4px);
     --link-background-focus: var(--eun-color-secondary-transparent, #edbd6f33);
-    --link-border-radius: var(--eun-borderRadius-l, 999px);
+    --link-border-radius: var(--eun-border-radius-l, 999px);
   }
 
   #skip-links ::slotted(a),
@@ -210,7 +212,7 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
     padding: var(--eun-space-xs, 4px);
     outline: 2px solid transparent;
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-l, 999px);
+    border-radius: var(--eun-border-radius-l, 999px);
     transition:
       outline 0.2s ease-out,
       background 0.2s ease-out;
@@ -279,13 +281,17 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
   }
 
   #panel-header {
+    box-sizing: border-box;
     position: absolute;
     inset-block-start: 0;
     inset-inline-end: 0;
     z-index: 1;
     display: flex;
-    padding: var(--_panelPadding);
+    align-items: var(--_burgerAlign);
+    height: calc(var(--_currentHeight) - var(--eun-border-width-s, 1px));
+    padding: var(--_burgerPadding);
     pointer-events: auto;
+    transition: height var(--_transitionDuration) ease;
   }
 
   #panel-body {
@@ -350,6 +356,7 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
   @media (prefers-reduced-motion: reduce) {
     #bar,
     #panel,
+    #panel-header,
     #panel-body,
     #skip-links {
       transition-duration: 0.01ms;

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

@@ -1,64 +1,126 @@
-import{c as f}from"./chunks/chunk-CEDHJUUH.js";import{a as k}from"./chunks/chunk-LK5BJ4SH.js";import{a as m}from"./chunks/chunk-LYYQAALT.js";import{e as C}from"./chunks/chunk-5TH3P53V.js";import{a as v}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as T}from"./chunks/chunk-5EVP7YNE.js";import{a,f as E,g as h,h as s,l as x,m as u,n as c,p as A,r as P,s as S}from"./chunks/chunk-XH6NREVZ.js";var L=h`
+import{c as y}from"./chunks/chunk-CEDHJUUH.js";import{a as C}from"./chunks/chunk-LK5BJ4SH.js";import{a as m}from"./chunks/chunk-LYYQAALT.js";import{e as T}from"./chunks/chunk-LGLQ36QB.js";import{a as f}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as v}from"./chunks/chunk-5EVP7YNE.js";import{a,f as E,g as c,h as l,l as S,m as u,n as h,p as A,r as _,s as P}from"./chunks/chunk-XH6NREVZ.js";var L=c`
   :host {
     display: contents;
   }
-`,R=h`
-  .eun-tooltip-panel:not([data-severity]) {
-    --_accent: var(--tooltip-color, var(--eun-text-color, #071621));
-    --_borderColor: var(--eun-color-grey-300, #dee0e7);
-    --_backgroundFilled: var(--eun-color-grey-700, #484e61);
+`,R=c`
+  /*
+   * Step 1 : the palette (severity, else color) fills --_solid (strong
+   * color), --_onSolid (text on it) and --_accent (text on a pale or neutral
+   * surface). Step 2 : the appearance reads them into --_bg, --_head (the
+   * heading and links), --_body (the description) and --_bd (the border).
+   * The --tooltip-* custom properties are applied last, on the panel, so they
+   * win over every combination.
+   */
+  .eun-tooltip-panel {
+    --_solid: var(--eun-color-primary-500, #3d6fff);
+    --_onSolid: var(--eun-color-on-primary-500, #ffffff);
+    --_accent: var(--eun-color-primary-500, #3d6fff);
   }
   .eun-tooltip-panel[data-severity="info"] {
+    --_solid: var(--eun-color-info-100, #097faf);
     --_accent: var(--eun-color-info-100, #097faf);
-    --_borderColor: var(--eun-color-info-100, #097faf);
-    --_backgroundFilled: var(--eun-color-info-100, #097faf);
   }
   .eun-tooltip-panel[data-severity="success"] {
+    --_solid: var(--eun-color-success-100, #1a9948);
     --_accent: var(--eun-color-success-100, #1a9948);
-    --_borderColor: var(--eun-color-success-100, #1a9948);
-    --_backgroundFilled: var(--eun-color-success-100, #1a9948);
   }
   .eun-tooltip-panel[data-severity="warning"] {
+    --_solid: var(--eun-color-warning-100, #c85207);
     --_accent: var(--eun-color-warning-100, #c85207);
-    --_borderColor: var(--eun-color-warning-100, #c85207);
-    --_backgroundFilled: var(--eun-color-warning-100, #c85207);
   }
   .eun-tooltip-panel[data-severity="critical"] {
+    --_solid: var(--eun-color-critical-100, #aa0014);
     --_accent: var(--eun-color-critical-100, #aa0014);
-    --_borderColor: var(--eun-color-critical-100, #aa0014);
-    --_backgroundFilled: var(--eun-color-critical-100, #aa0014);
   }
   .eun-tooltip-panel[data-severity="neutral"] {
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+    --_solid: var(--eun-color-grey-700, #484e61);
     --_accent: var(--eun-color-grey-700, #484e61);
-    --_borderColor: var(--eun-color-grey-700, #484e61);
-    --_backgroundFilled: var(--eun-color-grey-700, #484e61);
-  }
-  .eun-tooltip-panel:not([data-severity])[data-color="primary"] {
-    --_accent: var(--eun-color-primary-500, #3d6fff);
-    --_borderColor: var(--eun-color-primary-500, #3d6fff);
-    --_backgroundFilled: var(--eun-color-primary-500, #3d6fff);
   }
   .eun-tooltip-panel:not([data-severity])[data-color="secondary"] {
+    --_onSolid: var(--eun-color-on-secondary-500, #000000de);
+    --_solid: var(--eun-color-secondary-500, #e5a030);
     --_accent: var(--eun-color-secondary-500, #e5a030);
-    --_borderColor: var(--eun-color-secondary-500, #e5a030);
-    --_backgroundFilled: var(--eun-color-secondary-500, #e5a030);
-  }
-  .eun-tooltip-panel:not([data-severity])[data-color="light"] {
-    --_accent: var(--eun-color-grey-600, #666e8a);
-    --_borderColor: var(--eun-color-grey-300, #dee0e7);
-    --_backgroundFilled: var(--eun-color-grey-0, #ffffff);
   }
   .eun-tooltip-panel:not([data-severity])[data-color="medium"] {
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+    --_solid: var(--eun-color-grey-700, #484e61);
     --_accent: var(--eun-color-grey-900, #000000);
-    --_borderColor: var(--eun-color-grey-300, #dee0e7);
-    --_backgroundFilled: var(--eun-color-grey-700, #484e61);
   }
+
+  /*
+   * light and dark are absolute colors : white and black whatever the
+   * appearance. The panel is always opaque, so there's no pale wash and no
+   * transparent outline : default is as solid as fill, and outline is the
+   * color as border and text over a surface of the opposite tone. flat is
+   * the same neutral surface as every other palette. By default they follow
+   * the grey scale, which flips with the active theme ; fixed-color pins
+   * them to the light theme's white and black.
+   */
+  .eun-tooltip-panel:not([data-severity])[data-color="light"] {
+    --_solid: var(--eun-color-grey-0, #ffffff);
+    --_onSolid: var(--eun-color-grey-900, #000000);
+    --_opposite: var(--eun-color-grey-800, #071621);
+  }
+  .eun-tooltip-panel:not([data-severity])[data-color="light"][data-fixed-color] {
+    --_solid: #ffffff;
+    --_onSolid: #000000;
+    --_opposite: #071621;
+  }
+  .eun-tooltip-panel:not([data-severity])[data-color="dark"] {
+    --_solid: var(--eun-color-grey-800, #071621);
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+    --_opposite: var(--eun-color-grey-0, #ffffff);
+  }
+  .eun-tooltip-panel:not([data-severity])[data-color="dark"][data-fixed-color] {
+    --_solid: #071621;
+    --_onSolid: #ffffff;
+    --_opposite: #ffffff;
+  }
+  .eun-tooltip-panel:not([data-severity])[data-color="light"],
   .eun-tooltip-panel:not([data-severity])[data-color="dark"] {
-    --_accent: var(--eun-color-grey-800, #071621);
-    --_borderColor: var(--eun-color-grey-800, #071621);
-    --_backgroundFilled: var(--eun-color-grey-800, #071621);
-    --_defaultBackground: var(--_accent);
-    --_defaultText: var(--eun-color-grey-0, #ffffff);
+    --_accent: var(--eun-text-color, #071621);
+  }
+
+  .eun-tooltip-panel[data-appearance="default"] {
+    --_bg: color-mix(
+      in srgb,
+      var(--_accent) 12%,
+      var(--eun-surface-color, #ffffff)
+    );
+    --_head: var(--_accent);
+    --_body: var(--_accent);
+    --_bd: transparent;
+  }
+  .eun-tooltip-panel[data-appearance="flat"] {
+    --_bg: var(--eun-color-grey-100, #f7f8fa);
+    --_head: var(--_accent);
+    --_body: var(--eun-text-color, #071621);
+    --_bd: transparent;
+  }
+  .eun-tooltip-panel[data-appearance="outline"] {
+    --_bg: var(--eun-color-grey-100, #f7f8fa);
+    --_head: var(--_accent);
+    --_body: var(--eun-text-color, #071621);
+    --_bd: var(--_solid);
+  }
+  .eun-tooltip-panel[data-appearance="fill"] {
+    --_bg: var(--_solid);
+    --_head: var(--_onSolid);
+    --_body: var(--_onSolid);
+    --_bd: transparent;
+  }
+  .eun-tooltip-panel:not([data-severity])[data-color="light"][data-appearance="default"],
+  .eun-tooltip-panel:not([data-severity])[data-color="dark"][data-appearance="default"] {
+    --_bg: var(--_solid);
+    --_head: var(--_onSolid);
+    --_body: var(--_onSolid);
+  }
+  .eun-tooltip-panel:not([data-severity])[data-color="light"][data-appearance="outline"],
+  .eun-tooltip-panel:not([data-severity])[data-color="dark"][data-appearance="outline"] {
+    --_bg: var(--_opposite);
+    --_head: var(--_solid);
+    --_body: var(--_solid);
   }
 
   .eun-tooltip-panel {
@@ -75,13 +137,20 @@ import{c as f}from"./chunks/chunk-CEDHJUUH.js";import{a as k}from"./chunks/chunk
     max-width: var(--tooltip-max-width, 280px);
     padding: var(
       --tooltip-padding,
-      var(--eun-space-s, 8px) var(--eun-space-m, 16px)
+      max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))
+        max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
     );
     border-radius: var(
       --tooltip-border-radius,
-      var(--eun-borderRadius-m, 10px)
+      var(--eun-border-radius-m, 10px)
     );
-    color: var(--tooltip-content-color, var(--eun-text-color, #071621));
+    --_bw: var(--tooltip-border-width, var(--eun-border-width-s, 1px));
+    background: var(--tooltip-background-color, var(--_bg));
+    color: var(--tooltip-content-color, var(--_body));
+    /* Every appearance carries the same border box (transparent unless
+       drawn), taken out of the padding, so switching appearance or adding a
+       --tooltip-border-* never changes the panel's size. */
+    border: var(--_bw) solid var(--tooltip-border-color, var(--_bd));
     box-shadow: var(
       --tooltip-shadow,
       var(
@@ -91,15 +160,9 @@ import{c as f}from"./chunks/chunk-CEDHJUUH.js";import{a as k}from"./chunks/chunk
       )
     );
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     opacity: 0;
     scale: 0.96;
-    --_defaultBackground: color-mix(
-      in srgb,
-      var(--_accent) 12%,
-      var(--eun-surface-color, #ffffff)
-    );
-    --_defaultText: var(--_accent);
   }
   .eun-tooltip-panel.no-heading {
     row-gap: 0;
@@ -112,35 +175,9 @@ import{c as f}from"./chunks/chunk-CEDHJUUH.js";import{a as k}from"./chunks/chunk
     scale: 1;
   }
 
-  .eun-tooltip-panel[data-appearance="default"] {
-    background: var(--tooltip-background-color, var(--_defaultBackground));
-    color: var(--tooltip-content-color, var(--_defaultText));
-  }
-  .eun-tooltip-panel[data-appearance="flat"] {
-    background: var(
-      --tooltip-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
-  }
-  .eun-tooltip-panel[data-appearance="outline"] {
-    background: var(
-      --tooltip-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
-    border: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
-  }
-  .eun-tooltip-panel[data-appearance="fill"] {
-    background: var(--tooltip-background-color, var(--_backgroundFilled));
-    --_accent: var(--tooltip-color, #fff);
-    color: var(--tooltip-content-color, #fff);
-  }
-
   .eun-tooltip-heading {
-    color: var(--_accent);
-    font-weight: var(--eun-fontWeight-l, 700);
-  }
-  .eun-tooltip-panel[data-appearance="default"] .eun-tooltip-heading {
-    color: var(--tooltip-color, var(--_defaultText));
+    color: var(--tooltip-color, var(--_head));
+    font-weight: var(--eun-font-weight-l, 700);
   }
   .eun-tooltip-heading-mirror,
   .eun-tooltip-description-mirror {
@@ -151,7 +188,7 @@ import{c as f}from"./chunks/chunk-CEDHJUUH.js";import{a as k}from"./chunks/chunk
   }
   .eun-tooltip-description {
     color: var(--tooltip-content-color, inherit);
-    font-weight: var(--tooltip-font-weight, var(--eun-fontWeight-s, 300));
+    font-weight: var(--tooltip-font-weight, var(--eun-font-weight-s, 300));
   }
   .eun-tooltip-description.hidden {
     display: none;
@@ -166,16 +203,13 @@ import{c as f}from"./chunks/chunk-CEDHJUUH.js";import{a as k}from"./chunks/chunk
     margin-block-end: 0;
   }
   .eun-tooltip-rich-text a {
-    color: var(--_accent);
-  }
-  .eun-tooltip-panel[data-appearance="default"] .eun-tooltip-rich-text a {
-    color: var(--tooltip-color, var(--_defaultText));
+    color: var(--tooltip-color, var(--_head));
   }
   .eun-tooltip-description ::slotted(*) {
     margin: 0;
     color: inherit;
   }
-`,y=R,H=h`
+`,g=R,H=c`
   @supports (anchor-name: --a) {
     .eun-tooltip-panel[data-placement="top"]:popover-open {
       position-try-fallbacks: --eun-tooltip-try-bottom;
@@ -229,16 +263,17 @@ import{c as f}from"./chunks/chunk-CEDHJUUH.js";import{a as k}from"./chunks/chunk
       right: calc(anchor(left) + var(--tooltip-gap, 8px));
     }
   }
-`,g=H;var N="eun-tooltip",F=0,$=0,_=new WeakSet,B=["--tooltip-z-index","--tooltip-gap","--tooltip-viewport-gap","--tooltip-min-width","--tooltip-max-width","--tooltip-background-color","--tooltip-color","--tooltip-content-color","--tooltip-font-weight","--tooltip-border-radius","--tooltip-padding","--tooltip-row-gap","--tooltip-shadow","--tooltip-transition-duration"],V=k(S),i=class extends V{constructor(){super(...arguments);this.color="primary";this.appearance="default";this.placement="top";this.open=!1;this.lazy=!1;this.showDelay=100;this.hideDelay=150;this.pinned=!1;this.panelId=`eun-tooltip-panel-${++$}`;this.headingId=`${this.panelId}-heading`;this.ariaDescribedByApplied=!1;this.handleReposition=()=>{this.reposition()};this.handleDocumentKeydown=e=>{e.key==="Escape"&&this.hide()};this.handleDocumentPointerDown=e=>{if(!this.pinned)return;let t=e.composedPath();this.anchorEl&&t.includes(this.anchorEl)||this.panelEl&&t.includes(this.panelEl)||this.hide()};this.handleAnchorSlotChange=()=>{this.rebindAnchorListeners()};this.handleAnchorPointerEnter=()=>{this.scheduleShow()};this.handleAnchorPointerLeave=()=>{this.scheduleHide()};this.handleAnchorFocusIn=()=>{this.clearShowTimer(),this.clearHideTimer(),this.show()};this.handleAnchorFocusOut=()=>{this.pinned=!1,this.hide()};this.handleAnchorClick=()=>{this.pinned=!this.pinned,this.pinned?(this.clearShowTimer(),this.clearHideTimer(),this.show()):this.scheduleHide()};this.handlePanelPointerEnter=()=>{this.clearHideTimer()};this.handlePanelPointerLeave=()=>{this.scheduleHide()};this.handleSlotChange=()=>{this.requestUpdate()}}supportsAnchorPositioning(){return i.nativeAnchorPositioningSupported}connectedCallback(){super.connectedCallback(),this.hasUpdated&&!this.lazy&&this.ensurePortal()}firstUpdated(e){super.firstUpdated(e),this.rebindAnchorListeners(),this.lazy||this.ensurePortal()}disconnectedCallback(){this.unbindAnchorListeners(),this.clearShowTimer(),this.clearHideTimer(),this.panelAnimation?.cancel(),this.panelAnimation=void 0,this.removeGlobalListeners(),this.portalContainer?.remove(),this.portalContainer=void 0,this.portalRoot=void 0,this.panelEl=void 0,super.disconnectedCallback?.()}updated(e){if(super.updated(e),this.portalContainer&&this.renderPortal(),e.has("open")){this.open?this.openTooltip():this.closeTooltip();return}e.has("placement")&&this.open&&this.reposition()}show(){this.open=!0}hide(){this.open=!1}toggle(){this.open=!this.open}get anchorEl(){return this.anchorSlotEls[0]}ensurePortal(){if(this.portalContainer||!this.anchorEl)return;let e=this.anchorEl.getRootNode();this.portalRoot=e,this.installPanelStyles(e);let t=document.createElement("div");t.style.display="contents",(e===document?document.body:e).appendChild(t),this.portalContainer=t,this.renderPortal()}installPanelStyles(e){if(_.has(e)||!y.styleSheet)return;_.add(e);let t=[y.styleSheet];!m&&g.styleSheet&&t.push(g.styleSheet),e.adoptedStyleSheets=[...e.adoptedStyleSheets,...t]}renderPortal(){this.portalContainer&&(P(this.renderPanel(),this.portalContainer,{host:this}),this.panelEl=this.portalContainer.querySelector(".eun-tooltip-panel")??void 0,this.forwardCssVariables(),this.mirrorSlottedContent())}forwardCssVariables(){if(!this.panelEl)return;let e=getComputedStyle(this);for(let t of B)this.panelEl.style.setProperty(t,e.getPropertyValue(t))}openTooltip(){if(this.ensurePortal(),!this.anchorEl||!this.panelEl)return;this.applyAriaDescribedBy();let e=this.panelEl,t=this.panelAnimation!==void 0;this.panelAnimation?.cancel(),this.panelAnimation=void 0;let n=!e.matches(":popover-open");n&&e.showPopover(),this.reposition(),(n||t)&&this.playEnterAnimation(e),window.addEventListener("resize",this.handleReposition),window.addEventListener("scroll",this.handleReposition,!0),document.addEventListener("keydown",this.handleDocumentKeydown),document.addEventListener("pointerdown",this.handleDocumentPointerDown,!0),this.observeAnchorVisibility(this.anchorEl,()=>this.hide())}closeTooltip(){this.pinned=!1;let e=this.panelEl;this.panelAnimation?.cancel(),this.panelAnimation=void 0,e?.matches(":popover-open")&&this.playExitAnimation(e),this.removeGlobalListeners(),this.unobserveAnchorVisibility()}static panelAnimationDuration(e){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return 0;let t=getComputedStyle(e).getPropertyValue("--tooltip-transition-duration").trim();if(t){let n=t.endsWith("ms")?Number.parseFloat(t):Number.parseFloat(t)*1e3;if(Number.isFinite(n)&&n>=0)return n}return 150}playEnterAnimation(e){e.style.removeProperty("pointer-events");let t=i.panelAnimationDuration(e);t!==0&&(this.panelAnimation=e.animate([{opacity:0,scale:.96},{opacity:1,scale:1}],{duration:t,easing:"ease",fill:"forwards"}))}playExitAnimation(e){e.style.pointerEvents="none";let t=i.panelAnimationDuration(e);if(t===0){e.hidePopover();return}let n=e.animate([{opacity:1,scale:1},{opacity:0,scale:.96}],{duration:t,easing:"ease",fill:"forwards"});this.panelAnimation=n,n.finished.then(()=>{this.panelAnimation===n&&(this.panelAnimation=void 0),e.hidePopover()}).catch(()=>{})}removeGlobalListeners(){window.removeEventListener("resize",this.handleReposition),window.removeEventListener("scroll",this.handleReposition,!0),document.removeEventListener("keydown",this.handleDocumentKeydown),document.removeEventListener("pointerdown",this.handleDocumentPointerDown,!0)}reposition(){!this.anchorEl||!this.panelEl||(this.supportsAnchorPositioning()?(this.anchorPositionName??=`--eun-tooltip-anchor-${++F}`,this.anchorEl.style.setProperty("anchor-name",this.anchorPositionName),this.panelEl.style.setProperty("position-anchor",this.anchorPositionName)):this.updateFallbackPosition(),this.clampPanelToViewport())}getEffectivePlacementFallback(e,t,n,o){let r=this.readGap();if(this.placement==="left"||this.placement==="right"){let D=window.innerWidth,b=e.right+r+t.width<=D,w=e.left-r-t.width>=0;return this.placement==="right"&&!b&&w?"left":this.placement==="left"&&!w&&b?"right":this.placement}let p=window.innerHeight,d=e.bottom+r+t.height<=p-o,l=e.top-r-t.height>=n;return this.placement==="top"&&!l&&d?"bottom":this.placement==="bottom"&&!d&&l?"top":this.placement}updateFallbackPosition(){if(!this.anchorEl||!this.panelEl)return;let e=this.readGap(),t=this.readViewportInset(this.panelEl,"--eun-viewport-inset-top"),n=this.readViewportInset(this.panelEl,"--eun-viewport-inset-bottom"),o=this.anchorEl.getBoundingClientRect(),r=this.panelEl.getBoundingClientRect(),p=this.getEffectivePlacementFallback(o,r,t,n),d,l;p==="top"||p==="bottom"?(d=p==="top"?o.top-r.height-e:o.bottom+e,l=f(o.left+o.width/2-r.width/2,r.width,window.innerWidth,e)):(l=p==="left"?o.left-r.width-e:o.right+e,d=f(o.top+o.height/2-r.height/2,r.height,window.innerHeight,e)),this.panelEl.style.setProperty("--_panelTop",`${d}px`),this.panelEl.style.setProperty("--_panelLeft",`${l}px`)}clampPanelToViewport(){if(!this.panelEl)return;let e=this.readPixelVar("--tooltip-viewport-gap",8),t=this.readViewportInset(this.panelEl,"--eun-viewport-inset-top"),n=this.readViewportInset(this.panelEl,"--eun-viewport-inset-bottom"),o=this.panelEl.getBoundingClientRect(),r=0;o.left<e?r=e-o.left:o.right>window.innerWidth-e&&(r=window.innerWidth-e-o.right);let p=t+e,d=window.innerHeight-n-e,l=0;o.top<p?l=p-o.top:o.bottom>d&&(l=d-o.bottom),this.panelEl.style.transform=r||l?`translate(${r}px, ${l}px)`:""}readPixelVar(e,t){if(!this.panelEl)return t;let n=getComputedStyle(this.panelEl).getPropertyValue(e),o=Number.parseFloat(n);return Number.isFinite(o)?o:t}readGap(){return this.readPixelVar("--tooltip-gap",8)}applyAriaDescribedBy(){if(this.ariaDescribedByApplied||!this.anchorEl)return;this.ariaDescribedByApplied=!0;let e=this.anchorEl.getAttribute("aria-describedby"),t=e?e.split(/\s+/):[];t.includes(this.panelId)||(t.push(this.panelId),this.anchorEl.setAttribute("aria-describedby",t.join(" ")))}clearShowTimer(){this.showTimer!==void 0&&(clearTimeout(this.showTimer),this.showTimer=void 0)}clearHideTimer(){this.hideTimer!==void 0&&(clearTimeout(this.hideTimer),this.hideTimer=void 0)}scheduleShow(){this.clearHideTimer(),!this.open&&(this.clearShowTimer(),this.showTimer=setTimeout(()=>{this.showTimer=void 0,this.show()},this.showDelay))}scheduleHide(){this.clearShowTimer(),!this.pinned&&(this.clearHideTimer(),this.hideTimer=setTimeout(()=>{this.hideTimer=void 0,this.pinned||this.hide()},this.hideDelay))}rebindAnchorListeners(){let e=this.anchorEl;this.boundAnchorEl!==e&&(this.unbindAnchorListeners(),this.boundAnchorEl=e,this.ariaDescribedByApplied=!1,e&&(e.addEventListener("pointerenter",this.handleAnchorPointerEnter),e.addEventListener("pointerleave",this.handleAnchorPointerLeave),e.addEventListener("focusin",this.handleAnchorFocusIn),e.addEventListener("focusout",this.handleAnchorFocusOut),e.addEventListener("click",this.handleAnchorClick)))}unbindAnchorListeners(){this.boundAnchorEl?.removeEventListener("pointerenter",this.handleAnchorPointerEnter),this.boundAnchorEl?.removeEventListener("pointerleave",this.handleAnchorPointerLeave),this.boundAnchorEl?.removeEventListener("focusin",this.handleAnchorFocusIn),this.boundAnchorEl?.removeEventListener("focusout",this.handleAnchorFocusOut),this.boundAnchorEl?.removeEventListener("click",this.handleAnchorClick)}hasDescription(){return!!this.richText||this.descriptionSlotNodes.length>0}hasHeading(){return!!this.heading||this.defaultSlotNodes.some(e=>e.nodeType!==Node.TEXT_NODE||!!e.textContent?.trim())}mirrorSlottedContent(){if(!this.panelEl)return;this.heading||this.panelEl.querySelector(".eun-tooltip-heading-mirror")?.replaceChildren(...this.defaultSlotNodes.map(n=>n.cloneNode(!0))),this.panelEl.querySelector(".eun-tooltip-description-mirror")?.replaceChildren(...this.descriptionSlotNodes.map(t=>t.cloneNode(!0)))}renderPanel(){let e=this.heading?this.heading:c`<span class="eun-tooltip-heading-mirror"></span>`;return c`
+`,b=H;var N="eun-tooltip",$=0,V=0,D=new WeakSet,B=["--tooltip-z-index","--tooltip-gap","--tooltip-viewport-gap","--tooltip-min-width","--tooltip-max-width","--tooltip-background-color","--tooltip-color","--tooltip-content-color","--tooltip-border-color","--tooltip-border-width","--tooltip-font-weight","--tooltip-border-radius","--tooltip-padding","--tooltip-row-gap","--tooltip-shadow","--tooltip-transition-duration"],M=C(P),o=class extends M{constructor(){super(...arguments);this.color="primary";this.appearance="default";this.fixedColor=!1;this.placement="top";this.open=!1;this.lazy=!1;this.showDelay=100;this.hideDelay=150;this.pinned=!1;this.panelId=`eun-tooltip-panel-${++V}`;this.headingId=`${this.panelId}-heading`;this.ariaDescribedByApplied=!1;this.handleReposition=()=>{this.reposition()};this.handleDocumentKeydown=e=>{e.key==="Escape"&&this.hide()};this.handleDocumentPointerDown=e=>{if(!this.pinned)return;let t=e.composedPath();this.anchorEl&&t.includes(this.anchorEl)||this.panelEl&&t.includes(this.panelEl)||this.hide()};this.handleAnchorSlotChange=()=>{this.rebindAnchorListeners()};this.handleAnchorPointerEnter=()=>{this.scheduleShow()};this.handleAnchorPointerLeave=()=>{this.scheduleHide()};this.handleAnchorFocusIn=()=>{this.clearShowTimer(),this.clearHideTimer(),this.show()};this.handleAnchorFocusOut=()=>{this.pinned=!1,this.hide()};this.handleAnchorClick=()=>{this.pinned=!this.pinned,this.pinned?(this.clearShowTimer(),this.clearHideTimer(),this.show()):this.scheduleHide()};this.handlePanelPointerEnter=()=>{this.clearHideTimer()};this.handlePanelPointerLeave=()=>{this.scheduleHide()};this.handleSlotChange=()=>{this.requestUpdate()}}supportsAnchorPositioning(){return o.nativeAnchorPositioningSupported}connectedCallback(){super.connectedCallback(),this.hasUpdated&&!this.lazy&&this.ensurePortal()}firstUpdated(e){super.firstUpdated(e),this.rebindAnchorListeners(),this.lazy||this.ensurePortal()}disconnectedCallback(){this.unbindAnchorListeners(),this.clearShowTimer(),this.clearHideTimer(),this.panelAnimation?.cancel(),this.panelAnimation=void 0,this.removeGlobalListeners(),this.portalContainer?.remove(),this.portalContainer=void 0,this.portalRoot=void 0,this.panelEl=void 0,super.disconnectedCallback?.()}updated(e){if(super.updated(e),this.portalContainer&&this.renderPortal(),e.has("open")){this.open?this.openTooltip():this.closeTooltip();return}e.has("placement")&&this.open&&this.reposition()}show(){this.open=!0}hide(){this.open=!1}toggle(){this.open=!this.open}get anchorEl(){return this.anchorSlotEls[0]}ensurePortal(){if(this.portalContainer||!this.anchorEl)return;let e=this.anchorEl.getRootNode();this.portalRoot=e,this.installPanelStyles(e);let t=document.createElement("div");t.style.display="contents",(e===document?document.body:e).appendChild(t),this.portalContainer=t,this.renderPortal()}installPanelStyles(e){if(D.has(e)||!g.styleSheet)return;D.add(e);let t=[g.styleSheet];!m&&b.styleSheet&&t.push(b.styleSheet),e.adoptedStyleSheets=[...e.adoptedStyleSheets,...t]}renderPortal(){this.portalContainer&&(_(this.renderPanel(),this.portalContainer,{host:this}),this.panelEl=this.portalContainer.querySelector(".eun-tooltip-panel")??void 0,this.forwardCssVariables(),this.mirrorSlottedContent())}forwardCssVariables(){if(!this.panelEl)return;let e=getComputedStyle(this);for(let t of B)this.panelEl.style.setProperty(t,e.getPropertyValue(t))}openTooltip(){if(this.ensurePortal(),!this.anchorEl||!this.panelEl)return;this.applyAriaDescribedBy();let e=this.panelEl,t=this.panelAnimation!==void 0;this.panelAnimation?.cancel(),this.panelAnimation=void 0;let n=!e.matches(":popover-open");n&&e.showPopover(),this.reposition(),(n||t)&&this.playEnterAnimation(e),window.addEventListener("resize",this.handleReposition),window.addEventListener("scroll",this.handleReposition,!0),document.addEventListener("keydown",this.handleDocumentKeydown),document.addEventListener("pointerdown",this.handleDocumentPointerDown,!0),this.observeAnchorVisibility(this.anchorEl,()=>this.hide())}closeTooltip(){this.pinned=!1;let e=this.panelEl;this.panelAnimation?.cancel(),this.panelAnimation=void 0,e?.matches(":popover-open")&&this.playExitAnimation(e),this.removeGlobalListeners(),this.unobserveAnchorVisibility()}static panelAnimationDuration(e){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return 0;let t=getComputedStyle(e).getPropertyValue("--tooltip-transition-duration").trim();if(t){let n=t.endsWith("ms")?Number.parseFloat(t):Number.parseFloat(t)*1e3;if(Number.isFinite(n)&&n>=0)return n}return 150}playEnterAnimation(e){e.style.removeProperty("pointer-events");let t=o.panelAnimationDuration(e);t!==0&&(this.panelAnimation=e.animate([{opacity:0,scale:.96},{opacity:1,scale:1}],{duration:t,easing:"ease",fill:"forwards"}))}playExitAnimation(e){e.style.pointerEvents="none";let t=o.panelAnimationDuration(e);if(t===0){e.hidePopover();return}let n=e.animate([{opacity:1,scale:1},{opacity:0,scale:.96}],{duration:t,easing:"ease",fill:"forwards"});this.panelAnimation=n,n.finished.then(()=>{this.panelAnimation===n&&(this.panelAnimation=void 0),e.hidePopover()}).catch(()=>{})}removeGlobalListeners(){window.removeEventListener("resize",this.handleReposition),window.removeEventListener("scroll",this.handleReposition,!0),document.removeEventListener("keydown",this.handleDocumentKeydown),document.removeEventListener("pointerdown",this.handleDocumentPointerDown,!0)}reposition(){!this.anchorEl||!this.panelEl||(this.supportsAnchorPositioning()?(this.anchorPositionName??=`--eun-tooltip-anchor-${++$}`,this.anchorEl.style.setProperty("anchor-name",this.anchorPositionName),this.panelEl.style.setProperty("position-anchor",this.anchorPositionName)):this.updateFallbackPosition(),this.clampPanelToViewport())}getEffectivePlacementFallback(e,t,n,i){let r=this.readGap();if(this.placement==="left"||this.placement==="right"){let k=window.innerWidth,w=e.right+r+t.width<=k,x=e.left-r-t.width>=0;return this.placement==="right"&&!w&&x?"left":this.placement==="left"&&!x&&w?"right":this.placement}let p=window.innerHeight,d=e.bottom+r+t.height<=p-i,s=e.top-r-t.height>=n;return this.placement==="top"&&!s&&d?"bottom":this.placement==="bottom"&&!d&&s?"top":this.placement}updateFallbackPosition(){if(!this.anchorEl||!this.panelEl)return;let e=this.readGap(),t=this.readViewportInset(this.panelEl,"--eun-viewport-inset-top"),n=this.readViewportInset(this.panelEl,"--eun-viewport-inset-bottom"),i=this.anchorEl.getBoundingClientRect(),r=this.panelEl.getBoundingClientRect(),p=this.getEffectivePlacementFallback(i,r,t,n),d,s;p==="top"||p==="bottom"?(d=p==="top"?i.top-r.height-e:i.bottom+e,s=y(i.left+i.width/2-r.width/2,r.width,window.innerWidth,e)):(s=p==="left"?i.left-r.width-e:i.right+e,d=y(i.top+i.height/2-r.height/2,r.height,window.innerHeight,e)),this.panelEl.style.setProperty("--_panelTop",`${d}px`),this.panelEl.style.setProperty("--_panelLeft",`${s}px`)}clampPanelToViewport(){if(!this.panelEl)return;let e=this.readPixelVar("--tooltip-viewport-gap",8),t=this.readViewportInset(this.panelEl,"--eun-viewport-inset-top"),n=this.readViewportInset(this.panelEl,"--eun-viewport-inset-bottom"),i=this.panelEl.getBoundingClientRect(),r=0;i.left<e?r=e-i.left:i.right>window.innerWidth-e&&(r=window.innerWidth-e-i.right);let p=t+e,d=window.innerHeight-n-e,s=0;i.top<p?s=p-i.top:i.bottom>d&&(s=d-i.bottom),this.panelEl.style.transform=r||s?`translate(${r}px, ${s}px)`:""}readPixelVar(e,t){if(!this.panelEl)return t;let n=getComputedStyle(this.panelEl).getPropertyValue(e),i=Number.parseFloat(n);return Number.isFinite(i)?i:t}readGap(){return this.readPixelVar("--tooltip-gap",8)}applyAriaDescribedBy(){if(this.ariaDescribedByApplied||!this.anchorEl)return;this.ariaDescribedByApplied=!0;let e=this.anchorEl.getAttribute("aria-describedby"),t=e?e.split(/\s+/):[];t.includes(this.panelId)||(t.push(this.panelId),this.anchorEl.setAttribute("aria-describedby",t.join(" ")))}clearShowTimer(){this.showTimer!==void 0&&(clearTimeout(this.showTimer),this.showTimer=void 0)}clearHideTimer(){this.hideTimer!==void 0&&(clearTimeout(this.hideTimer),this.hideTimer=void 0)}scheduleShow(){this.clearHideTimer(),!this.open&&(this.clearShowTimer(),this.showTimer=setTimeout(()=>{this.showTimer=void 0,this.show()},this.showDelay))}scheduleHide(){this.clearShowTimer(),!this.pinned&&(this.clearHideTimer(),this.hideTimer=setTimeout(()=>{this.hideTimer=void 0,this.pinned||this.hide()},this.hideDelay))}rebindAnchorListeners(){let e=this.anchorEl;this.boundAnchorEl!==e&&(this.unbindAnchorListeners(),this.boundAnchorEl=e,this.ariaDescribedByApplied=!1,e&&(e.addEventListener("pointerenter",this.handleAnchorPointerEnter),e.addEventListener("pointerleave",this.handleAnchorPointerLeave),e.addEventListener("focusin",this.handleAnchorFocusIn),e.addEventListener("focusout",this.handleAnchorFocusOut),e.addEventListener("click",this.handleAnchorClick)))}unbindAnchorListeners(){this.boundAnchorEl?.removeEventListener("pointerenter",this.handleAnchorPointerEnter),this.boundAnchorEl?.removeEventListener("pointerleave",this.handleAnchorPointerLeave),this.boundAnchorEl?.removeEventListener("focusin",this.handleAnchorFocusIn),this.boundAnchorEl?.removeEventListener("focusout",this.handleAnchorFocusOut),this.boundAnchorEl?.removeEventListener("click",this.handleAnchorClick)}hasDescription(){return!!this.richText||this.descriptionSlotNodes.length>0}hasHeading(){return!!this.heading||this.defaultSlotNodes.some(e=>e.nodeType!==Node.TEXT_NODE||!!e.textContent?.trim())}mirrorSlottedContent(){if(!this.panelEl)return;this.heading||this.panelEl.querySelector(".eun-tooltip-heading-mirror")?.replaceChildren(...this.defaultSlotNodes.map(n=>n.cloneNode(!0))),this.panelEl.querySelector(".eun-tooltip-description-mirror")?.replaceChildren(...this.descriptionSlotNodes.map(t=>t.cloneNode(!0)))}renderPanel(){let e=this.heading?this.heading:h`<span class="eun-tooltip-heading-mirror"></span>`;return h`
       <div
         id=${this.panelId}
-        class=${v({"eun-tooltip-panel":!0,"no-heading":!this.hasHeading()})}
+        class=${f({"eun-tooltip-panel":!0,"no-heading":!this.hasHeading()})}
         role="tooltip"
         aria-labelledby=${this.headingId}
         popover="manual"
-        data-severity=${T(this.severity)}
+        data-severity=${v(this.severity)}
         data-color=${this.color}
         data-appearance=${this.appearance}
+        data-fixed-color=${v(this.fixedColor?"":void 0)}
         data-placement=${this.placement}
         @pointerenter=${this.handlePanelPointerEnter}
         @pointerleave=${this.handlePanelPointerLeave}
@@ -247,15 +282,15 @@ import{c as f}from"./chunks/chunk-CEDHJUUH.js";import{a as k}from"./chunks/chunk
           ${e}
         </div>
         <div
-          class=${v({"eun-tooltip-description":!0,hidden:!this.hasDescription()})}
+          class=${f({"eun-tooltip-description":!0,hidden:!this.hasDescription()})}
         >
-          ${this.richText?c`<div class="eun-tooltip-rich-text">
-                ${C(this.richText)}
+          ${this.richText?h`<div class="eun-tooltip-rich-text">
+                ${T(this.richText)}
               </div>`:A}
           <span class="eun-tooltip-description-mirror"></span>
         </div>
       </div>
-    `}render(){return c`
+    `}render(){return h`
       <slot name="anchor" @slotchange=${this.handleAnchorSlotChange}></slot>
       <slot hidden @slotchange=${this.handleSlotChange}></slot>
       <slot
@@ -263,4 +298,4 @@ import{c as f}from"./chunks/chunk-CEDHJUUH.js";import{a as k}from"./chunks/chunk
         hidden
         @slotchange=${this.handleSlotChange}
       ></slot>
-    `}};i.styles=L,i.nativeAnchorPositioningSupported=typeof CSS<"u"&&CSS.supports("anchor-name: --a")&&!m,a([s({reflect:!0})],i.prototype,"severity",2),a([s({reflect:!0})],i.prototype,"color",2),a([s({reflect:!0})],i.prototype,"appearance",2),a([s({reflect:!0})],i.prototype,"placement",2),a([s()],i.prototype,"heading",2),a([s({attribute:"rich-text"})],i.prototype,"richText",2),a([s({type:Boolean,reflect:!0})],i.prototype,"open",2),a([s({type:Boolean,reflect:!0})],i.prototype,"lazy",2),a([s({type:Number,attribute:"show-delay"})],i.prototype,"showDelay",2),a([s({type:Number,attribute:"hide-delay"})],i.prototype,"hideDelay",2),a([x({slot:"anchor"})],i.prototype,"anchorSlotEls",2),a([u()],i.prototype,"defaultSlotNodes",2),a([u({slot:"description"})],i.prototype,"descriptionSlotNodes",2),i=a([E(N)],i);export{i as EunomiaTooltip,N as EunomiaTooltipTagName};
+    `}};o.styles=L,o.nativeAnchorPositioningSupported=typeof CSS<"u"&&CSS.supports("anchor-name: --a")&&!m,a([l({reflect:!0})],o.prototype,"severity",2),a([l({reflect:!0})],o.prototype,"color",2),a([l({reflect:!0})],o.prototype,"appearance",2),a([l({type:Boolean,reflect:!0,attribute:"fixed-color"})],o.prototype,"fixedColor",2),a([l({reflect:!0})],o.prototype,"placement",2),a([l()],o.prototype,"heading",2),a([l({attribute:"rich-text"})],o.prototype,"richText",2),a([l({type:Boolean,reflect:!0})],o.prototype,"open",2),a([l({type:Boolean,reflect:!0})],o.prototype,"lazy",2),a([l({type:Number,attribute:"show-delay"})],o.prototype,"showDelay",2),a([l({type:Number,attribute:"hide-delay"})],o.prototype,"hideDelay",2),a([S({slot:"anchor"})],o.prototype,"anchorSlotEls",2),a([u()],o.prototype,"defaultSlotNodes",2),a([u({slot:"description"})],o.prototype,"descriptionSlotNodes",2),o=a([E(N)],o);export{o as EunomiaTooltip,N as EunomiaTooltipTagName};