@eunomia/elements 1.0.0-beta.2 → 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;
-    outline: none;
+    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

@@ -1,4 +1,4 @@
-import{a as c}from"./chunks/chunk-ONYUXQV2.js";import{a as d}from"./chunks/chunk-T7WABJEJ.js";import{a as r,f as l,g as n,h as t,n as a,s}from"./chunks/chunk-XH6NREVZ.js";var i=n`
+import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk-T7WABJEJ.js";import{a as r,f as l,g as s,h as t,n as a,s as n}from"./chunks/chunk-XH6NREVZ.js";var i=s`
   :host {
     --_hoverColor: var(
       --toggle-hover-color,
@@ -19,8 +19,8 @@ import{a as c}from"./chunks/chunk-ONYUXQV2.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-ONYUXQV2.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-ONYUXQV2.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(
@@ -102,4 +105,4 @@ import{a as c}from"./chunks/chunk-ONYUXQV2.js";import{a as d}from"./chunks/chunk
   :host(:not([checked])) ::slotted([slot="checked"]) {
     display: none;
   }
-`;var g="eun-toggle",o=class extends d(s){constructor(){super(...arguments);this.checked=!1;this.swap=!1;this.appearance="default";this.toggle=()=>{this.disabled||(this.checked=!this.checked,this.dispatchEvent(new c))};this.handleKeydown=e=>{e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.toggle())}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","button"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("click",this.toggle),this.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback?.()}updated(e){super.updated(e),e.has("checked")&&this.setAttribute("aria-pressed",String(this.checked))}render(){let e=this.swap?a`<slot name="unchecked"></slot><slot name="checked"></slot>`:a`<slot></slot>`;return a`<div id="toggle" part="toggle">${e}</div>`}};o.styles=[i],r([t({type:Boolean,reflect:!0})],o.prototype,"checked",2),r([t({type:Boolean,reflect:!0})],o.prototype,"swap",2),r([t({reflect:!0})],o.prototype,"appearance",2),o=r([l(g)],o);export{o as EunomiaToggle,g as EunomiaToggleTagName};
+`;var g="eun-toggle",o=class extends d(n){constructor(){super(...arguments);this.checked=!1;this.swap=!1;this.appearance="default";this.toggle=()=>{this.disabled||(this.checked=!this.checked,this.dispatchEvent(new c(this.checked)))};this.handleKeydown=e=>{e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.toggle())}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","button"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("click",this.toggle),this.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback?.()}updated(e){super.updated(e),e.has("checked")&&this.setAttribute("aria-pressed",String(this.checked))}render(){let e=this.swap?a`<slot name="unchecked"></slot><slot name="checked"></slot>`:a`<slot></slot>`;return a`<div id="toggle" part="toggle">${e}</div>`}};o.styles=[i],r([t({type:Boolean,reflect:!0})],o.prototype,"checked",2),r([t({type:Boolean,reflect:!0})],o.prototype,"swap",2),r([t({reflect:!0})],o.prototype,"appearance",2),o=r([l(g)],o);export{o as EunomiaToggle,g as EunomiaToggleTagName};

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

@@ -1,4 +1,4 @@
-import{a as b}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js";import"./chunks/chunk-UDOZRIJZ.js";import{a as l}from"./chunks/chunk-ONYUXQV2.js";import{a as v}from"./chunks/chunk-VRGRCYIO.js";import{a as u}from"./chunks/chunk-BKHD4S57.js";import{a as i,f as d,g as c,h as r,j as p,n as o,p as n,s as h}from"./chunks/chunk-XH6NREVZ.js";var m=c`
+import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js";import"./chunks/chunk-UDOZRIJZ.js";import{a as s}from"./chunks/chunk-YYCEPZUN.js";import{a as b}from"./chunks/chunk-VRGRCYIO.js";import{a as v}from"./chunks/chunk-BKHD4S57.js";import{a as i,f as c,g as h,h as r,j as p,l as d,n as o,p as l,s as u}from"./chunks/chunk-XH6NREVZ.js";var f=h`
   :host {
     --_height: var(--toolbar-height, 72px);
     --_heightCollapsed: var(--toolbar-height-collapsed, 56px);
@@ -31,7 +31,9 @@ import{a as b}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);
@@ -44,6 +46,7 @@ import{a as b}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
       color-mix(in srgb, var(--_skipLinksBase) 82%, black 18%)
     );
     --_skipLinksColor: var(--toolbar-skip-links-color, #fff);
+    --_skipLinksGap: var(--toolbar-skip-links-gap, var(--eun-space-m, 16px));
     --_skipLinksSeparatorColor: var(
       --toolbar-skip-links-separator-color,
       color-mix(in srgb, var(--_skipLinksColor) 50%, transparent)
@@ -84,7 +87,7 @@ import{a as b}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,
@@ -143,7 +146,7 @@ import{a as b}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);
@@ -166,7 +169,7 @@ import{a as b}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
     z-index: calc(var(--_zIndex) + 2);
     display: flex;
     align-items: center;
-    gap: var(--eun-space-m);
+    gap: var(--_skipLinksGap);
     overflow: hidden;
     height: var(--_skipLinksHeight);
     padding-inline: var(--eun-space-m);
@@ -190,7 +193,7 @@ import{a as b}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;
   }
@@ -201,7 +204,7 @@ import{a as b}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),
@@ -209,7 +212,7 @@ import{a as b}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;
@@ -218,13 +221,12 @@ import{a as b}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
   #skip-links ::slotted(a:not(:first-child)),
   #skip-links ::slotted(eun-link:not(:first-child)) {
     position: relative;
-    padding-inline-start: var(--eun-space-s);
   }
   #skip-links ::slotted(a:not(:first-child))::before,
   #skip-links ::slotted(eun-link:not(:first-child))::before {
     content: "";
     position: absolute;
-    inset-inline-start: 0;
+    inset-inline-start: calc(var(--_skipLinksGap) / -2);
     inset-block: 0;
     width: 1px;
     background: var(--_skipLinksSeparatorColor);
@@ -279,13 +281,17 @@ import{a as b}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,12 +356,13 @@ import{a as b}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;
     }
   }
-`,g=m;var f="eun-toolbar",t=class extends b(h){constructor(){super(...arguments);this.position="sticky";this.logoAlt="Home";this.logoHref="#";this.mobileBreakpoint=v.tablet;this.open=!1;this.panelDirection="top";this.closeOnBackdrop=!0;this.ariaLabelMenuOpen="Open menu";this.ariaLabelMenuClose="Close menu";this.ariaLabelMenu="Menu";this.collapseOnScroll=!1;this.collapseThreshold=24;this.collapsed=!1;this.transparentAtTop=!1;this.atTop=!0;this.adaptiveTheme=!1;this.adaptiveThemeSelector="[data-toolbar-theme]";this.theme="light";this.defaultTheme="light";this.skipLinkLabel="Skip to main content";this.mobile=!1;this.scrollTargetEl=window;this.scrollListenerAttached=!1;this.intersectingThemeEls=new Set;this.handleMediaChange=e=>{this.mobile=e.matches,!this.mobile&&this.open&&this.hide()};this.handleScroll=()=>{this.scrollRafId===void 0&&(this.scrollRafId=requestAnimationFrame(()=>{this.scrollRafId=void 0,this.updateScrollState()}))};this.handleThemeIntersect=e=>{for(let a of e)a.isIntersecting?this.intersectingThemeEls.add(a.target):this.intersectingThemeEls.delete(a.target);this.resolveAdaptiveTheme()};this.handleLogoClick=e=>{u(this,e,this.logoHref,"_self")};this.handlePanelToggle=e=>{let a=e;if(this.syncingFromPopover=!0,this.open=a.newState==="open",this.syncingFromPopover=!1,this.open){this.openDialogSurface({surfaceEl:this.panelEl,onEscape:()=>this.hide(),onOutsideClick:()=>{this.closeOnBackdrop&&this.hide()}}),this.dispatchEvent(new l),this.updateComplete.then(()=>this.focusInitialElement());return}this.closeDialogSurface(this.burgerEl),this.dispatchEvent(new l)};this.handleSkipLinkClick=e=>{let s=e.composedPath().find(k=>k instanceof HTMLAnchorElement)?.getAttribute("href");!s||!s.startsWith("#")||s.length<2||document.getElementById(s.slice(1))?.focus()}}connectedCallback(){super.connectedCallback(),this.updateMediaQuery(),this.syncScrollListener()}disconnectedCallback(){this.mediaQueryList?.removeEventListener("change",this.handleMediaChange),this.detachScrollListener(),this.teardownAdaptiveThemeObserver(),this.teardownDialogSurface(this.open),super.disconnectedCallback()}updated(e){super.updated(e),e.has("mobileBreakpoint")&&this.updateMediaQuery(),e.has("open")&&this.syncPopoverOpenState(this.open,this.panelEl),e.has("panelSize")&&(this.panelSize?this.style.setProperty("--toolbar-panel-size",this.panelSize):this.style.removeProperty("--toolbar-panel-size")),this.updateScrollListenerFor(e),this.updateAdaptiveThemeObserverFor(e)}updateScrollListenerFor(e){(e.has("collapseOnScroll")||e.has("transparentAtTop"))&&this.syncScrollListener(),e.has("scrollTarget")&&this.scrollListenerAttached&&this.attachScrollListener()}updateAdaptiveThemeObserverFor(e){if(e.has("adaptiveTheme")){this.adaptiveTheme?this.setupAdaptiveThemeObserver():(this.teardownAdaptiveThemeObserver(),this.theme=this.defaultTheme);return}this.adaptiveTheme&&(e.has("adaptiveThemeSelector")||e.has("collapsed")||e.has("scrollTarget"))&&this.setupAdaptiveThemeObserver()}show(){this.open=!0}hide(){this.open=!1}toggle(){this.open=!this.open}refreshAdaptiveTheme(){this.themeObserver&&(this.themeObserver.disconnect(),this.intersectingThemeEls.clear(),document.querySelectorAll(this.adaptiveThemeSelector).forEach(e=>this.themeObserver?.observe(e)),this.resolveAdaptiveTheme())}updateMediaQuery(){this.mediaQueryList?.removeEventListener("change",this.handleMediaChange),this.mediaQueryList=window.matchMedia(`(max-width: ${Math.max(this.mobileBreakpoint-1,0)}px)`),this.mediaQueryList.addEventListener("change",this.handleMediaChange),this.mobile=this.mediaQueryList.matches}resolveScrollTarget(){if(this.scrollTarget){let e=document.querySelector(this.scrollTarget);if(e)return e}return window}resolveIntersectionRoot(){if(this.scrollTarget){let e=document.querySelector(this.scrollTarget);if(e)return e}return null}syncScrollListener(){let e=this.collapseOnScroll||this.transparentAtTop;e&&!this.scrollListenerAttached?(this.attachScrollListener(),this.scrollListenerAttached=!0):!e&&this.scrollListenerAttached&&(this.detachScrollListener(),this.scrollListenerAttached=!1)}attachScrollListener(){this.scrollTargetEl?.removeEventListener("scroll",this.handleScroll),this.scrollTargetEl=this.resolveScrollTarget(),this.scrollTargetEl.addEventListener("scroll",this.handleScroll,{passive:!0}),this.updateScrollState()}detachScrollListener(){this.scrollTargetEl?.removeEventListener("scroll",this.handleScroll),this.scrollRafId!==void 0&&(cancelAnimationFrame(this.scrollRafId),this.scrollRafId=void 0)}currentScrollY(){return this.scrollTargetEl instanceof Element?this.scrollTargetEl.scrollTop:window.scrollY}updateScrollState(){let e=this.currentScrollY();this.collapseOnScroll&&this.setCollapsed(e>this.collapseThreshold),this.transparentAtTop&&(this.atTop=e<=0)}setCollapsed(e){this.collapsed!==e&&(this.collapsed=e,this.dispatchEvent(new l))}setTheme(e){this.theme!==e&&(this.theme=e,this.dispatchEvent(new l))}barHeightPx(){return this.barEl?.getBoundingClientRect().height??(this.collapsed?56:72)}setupAdaptiveThemeObserver(){this.teardownAdaptiveThemeObserver();let e=this.barHeightPx();this.themeObserver=new IntersectionObserver(this.handleThemeIntersect,{root:this.resolveIntersectionRoot(),rootMargin:`-${e}px 0px -85% 0px`}),document.querySelectorAll(this.adaptiveThemeSelector).forEach(a=>this.themeObserver?.observe(a)),this.resolveAdaptiveTheme()}teardownAdaptiveThemeObserver(){this.themeObserver?.disconnect(),this.themeObserver=void 0,this.intersectingThemeEls.clear()}resolveAdaptiveTheme(){if(this.intersectingThemeEls.size===0){this.setTheme(this.defaultTheme);return}let e=document.querySelectorAll(this.adaptiveThemeSelector);for(let a=e.length-1;a>=0;a-=1)if(this.intersectingThemeEls.has(e[a])){this.setTheme(e[a].getAttribute("data-toolbar-theme")==="dark"?"dark":"light");return}this.setTheme(this.defaultTheme)}focusInitialElement(){let e=this.querySelector("[autofocus]");if(e){e.focus();return}this.panelEl?.focus()}hasSkipLinksContent(){return this.skipLinkTarget!==void 0||this.querySelector('[slot="skip-links"]')!==null}renderSkipLinks(){return o`
+`,k=f;var y="eun-toolbar",t=class extends g(u){constructor(){super(...arguments);this.position="sticky";this.logoAlt="Home";this.logoHref="#";this.mobileBreakpoint=b.tablet;this.open=!1;this.panelDirection="top";this.closeOnBackdrop=!0;this.ariaLabelMenuOpen="Open menu";this.ariaLabelMenuClose="Close menu";this.ariaLabelMenu="Menu";this.collapseOnScroll=!1;this.collapseThreshold=24;this.collapsed=!1;this.transparentAtTop=!1;this.atTop=!0;this.adaptiveTheme=!1;this.adaptiveThemeSelector="[data-toolbar-theme]";this.theme="light";this.defaultTheme="light";this.skipLinkLabel="Skip to main content";this.mobile=!1;this.handleIconSlotChange=()=>{this.requestUpdate()};this.scrollTargetEl=window;this.scrollListenerAttached=!1;this.intersectingThemeEls=new Set;this.handleMediaChange=e=>{this.mobile=e.matches,!this.mobile&&this.open&&this.hide()};this.handleScroll=()=>{this.scrollRafId===void 0&&(this.scrollRafId=requestAnimationFrame(()=>{this.scrollRafId=void 0,this.updateScrollState()}))};this.handleThemeIntersect=e=>{for(let a of e)a.isIntersecting?this.intersectingThemeEls.add(a.target):this.intersectingThemeEls.delete(a.target);this.resolveAdaptiveTheme()};this.handleLogoClick=e=>{v(this,e,this.logoHref,"_self")};this.handlePanelToggle=e=>{let a=e;if(this.syncingFromPopover=!0,this.open=a.newState==="open",this.syncingFromPopover=!1,this.open){this.openDialogSurface({surfaceEl:this.panelEl,onEscape:()=>this.hide(),onOutsideClick:()=>{this.closeOnBackdrop&&this.hide()}}),this.dispatchEvent(new s),this.updateComplete.then(()=>this.focusInitialElement());return}this.closeDialogSurface(this.burgerEl),this.dispatchEvent(new s)};this.handleSkipLinkClick=e=>{let n=e.composedPath().find(m=>m instanceof HTMLAnchorElement)?.getAttribute("href");!n||!n.startsWith("#")||n.length<2||document.getElementById(n.slice(1))?.focus()}}connectedCallback(){super.connectedCallback(),this.updateMediaQuery(),this.syncScrollListener()}disconnectedCallback(){this.mediaQueryList?.removeEventListener("change",this.handleMediaChange),this.detachScrollListener(),this.teardownAdaptiveThemeObserver(),this.teardownDialogSurface(this.open),super.disconnectedCallback()}updated(e){super.updated(e),e.has("mobileBreakpoint")&&this.updateMediaQuery(),e.has("open")&&this.syncPopoverOpenState(this.open,this.panelEl),e.has("panelSize")&&(this.panelSize?this.style.setProperty("--toolbar-panel-size",this.panelSize):this.style.removeProperty("--toolbar-panel-size")),this.updateScrollListenerFor(e),this.updateAdaptiveThemeObserverFor(e)}updateScrollListenerFor(e){(e.has("collapseOnScroll")||e.has("transparentAtTop"))&&this.syncScrollListener(),e.has("scrollTarget")&&this.scrollListenerAttached&&this.attachScrollListener()}updateAdaptiveThemeObserverFor(e){if(e.has("adaptiveTheme")){this.adaptiveTheme?this.setupAdaptiveThemeObserver():(this.teardownAdaptiveThemeObserver(),this.theme=this.defaultTheme);return}this.adaptiveTheme&&(e.has("adaptiveThemeSelector")||e.has("collapsed")||e.has("scrollTarget"))&&this.setupAdaptiveThemeObserver()}show(){this.open=!0}hide(){this.open=!1}toggle(){this.open=!this.open}refreshAdaptiveTheme(){this.themeObserver&&(this.themeObserver.disconnect(),this.intersectingThemeEls.clear(),document.querySelectorAll(this.adaptiveThemeSelector).forEach(e=>this.themeObserver?.observe(e)),this.resolveAdaptiveTheme())}updateMediaQuery(){this.mediaQueryList?.removeEventListener("change",this.handleMediaChange),this.mediaQueryList=window.matchMedia(`(max-width: ${Math.max(this.mobileBreakpoint-1,0)}px)`),this.mediaQueryList.addEventListener("change",this.handleMediaChange),this.mobile=this.mediaQueryList.matches}resolveScrollTarget(){if(this.scrollTarget){let e=document.querySelector(this.scrollTarget);if(e)return e}return window}resolveIntersectionRoot(){if(this.scrollTarget){let e=document.querySelector(this.scrollTarget);if(e)return e}return null}syncScrollListener(){let e=this.collapseOnScroll||this.transparentAtTop;e&&!this.scrollListenerAttached?(this.attachScrollListener(),this.scrollListenerAttached=!0):!e&&this.scrollListenerAttached&&(this.detachScrollListener(),this.scrollListenerAttached=!1)}attachScrollListener(){this.scrollTargetEl?.removeEventListener("scroll",this.handleScroll),this.scrollTargetEl=this.resolveScrollTarget(),this.scrollTargetEl.addEventListener("scroll",this.handleScroll,{passive:!0}),this.updateScrollState()}detachScrollListener(){this.scrollTargetEl?.removeEventListener("scroll",this.handleScroll),this.scrollRafId!==void 0&&(cancelAnimationFrame(this.scrollRafId),this.scrollRafId=void 0)}currentScrollY(){return this.scrollTargetEl instanceof Element?this.scrollTargetEl.scrollTop:window.scrollY}updateScrollState(){let e=this.currentScrollY();this.collapseOnScroll&&this.setCollapsed(e>this.collapseThreshold),this.transparentAtTop&&(this.atTop=e<=0)}setCollapsed(e){this.collapsed!==e&&(this.collapsed=e,this.dispatchEvent(new s))}setTheme(e){this.theme!==e&&(this.theme=e,this.dispatchEvent(new s))}barHeightPx(){return this.barEl?.getBoundingClientRect().height??(this.collapsed?56:72)}setupAdaptiveThemeObserver(){this.teardownAdaptiveThemeObserver();let e=this.barHeightPx();this.themeObserver=new IntersectionObserver(this.handleThemeIntersect,{root:this.resolveIntersectionRoot(),rootMargin:`-${e}px 0px -85% 0px`}),document.querySelectorAll(this.adaptiveThemeSelector).forEach(a=>this.themeObserver?.observe(a)),this.resolveAdaptiveTheme()}teardownAdaptiveThemeObserver(){this.themeObserver?.disconnect(),this.themeObserver=void 0,this.intersectingThemeEls.clear()}resolveAdaptiveTheme(){if(this.intersectingThemeEls.size===0){this.setTheme(this.defaultTheme);return}let e=document.querySelectorAll(this.adaptiveThemeSelector);for(let a=e.length-1;a>=0;a-=1)if(this.intersectingThemeEls.has(e[a])){this.setTheme(e[a].getAttribute("data-toolbar-theme")==="dark"?"dark":"light");return}this.setTheme(this.defaultTheme)}focusInitialElement(){let e=this.querySelector("[autofocus]");if(e){e.focus();return}this.panelEl?.focus()}hasSkipLinksContent(){return this.skipLinkTarget!==void 0||this.querySelector('[slot="skip-links"]')!==null}renderSkipLinks(){return o`
       <div id="skip-links" @click=${this.handleSkipLinkClick}>
         <slot name="skip-links">
           ${this.skipLinkTarget?o`
@@ -366,7 +373,7 @@ import{a as b}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
                 >
                   ${this.skipLinkLabel}
                 </a>
-              `:n}
+              `:l}
         </slot>
       </div>
     `}renderStart(){return o`
@@ -379,10 +386,10 @@ import{a as b}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
               >
                 <img id="logo-image" src=${this.logoSrc} alt=${this.logoAlt} />
               </a>
-            `:n}
+            `:l}
         <slot name="start"></slot>
       </div>
-    `}renderEnd(){return o` <div id="end"><slot name="end"></slot></div> `}renderBurger(){return o`
+    `}renderEnd(){return o` <div id="end"><slot name="end"></slot></div> `}renderBurger(){let e=this.open?"close-icon":"menu-icon",a=this.open?"close":"menu",n=this.open?this.closeIconSlotEls.length:this.menuIconSlotEls.length;return o`
       <eun-button
         id="burger"
         appearance="ghost"
@@ -392,7 +399,9 @@ import{a as b}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
         aria-label=${this.open?this.ariaLabelMenuClose:this.ariaLabelMenuOpen}
         @click=${()=>this.toggle()}
       >
-        <eun-icon name=${this.open?"close":"menu"} size="20"></eun-icon>
+        <slot name=${e} @slotchange=${this.handleIconSlotChange}>
+          ${n?l:o`<eun-icon name=${a} size="20"></eun-icon>`}
+        </slot>
       </eun-button>
     `}renderPanel(){return o`
       <div
@@ -411,11 +420,11 @@ import{a as b}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
         </div>
       </div>
     `}render(){return o`
-      ${this.hasSkipLinksContent()?this.renderSkipLinks():n}
+      ${this.hasSkipLinksContent()?this.renderSkipLinks():l}
       <nav id="bar" aria-label=${this.ariaLabel??"Main navigation"}>
         ${this.renderStart()}
         <div id="center"><slot name="center"></slot></div>
         ${this.renderEnd()}
       </nav>
-      ${this.mobile?this.renderPanel():n}
-    `}};t.styles=g,i([r({reflect:!0})],t.prototype,"position",2),i([r({attribute:"logo-src"})],t.prototype,"logoSrc",2),i([r({attribute:"logo-alt"})],t.prototype,"logoAlt",2),i([r({attribute:"logo-href"})],t.prototype,"logoHref",2),i([r({type:Number,attribute:"mobile-breakpoint"})],t.prototype,"mobileBreakpoint",2),i([r({type:Boolean,reflect:!0})],t.prototype,"open",2),i([r({reflect:!0,attribute:"panel-direction"})],t.prototype,"panelDirection",2),i([r({attribute:"panel-size"})],t.prototype,"panelSize",2),i([r({type:Boolean,attribute:"close-on-backdrop"})],t.prototype,"closeOnBackdrop",2),i([r({attribute:"aria-label-menu-open"})],t.prototype,"ariaLabelMenuOpen",2),i([r({attribute:"aria-label-menu-close"})],t.prototype,"ariaLabelMenuClose",2),i([r({attribute:"aria-label-menu"})],t.prototype,"ariaLabelMenu",2),i([r({type:Boolean,attribute:"collapse-on-scroll"})],t.prototype,"collapseOnScroll",2),i([r({type:Number,attribute:"collapse-threshold"})],t.prototype,"collapseThreshold",2),i([r({type:Boolean,reflect:!0})],t.prototype,"collapsed",2),i([r({type:Boolean,attribute:"transparent-at-top"})],t.prototype,"transparentAtTop",2),i([r({type:Boolean,reflect:!0,attribute:"at-top"})],t.prototype,"atTop",2),i([r({attribute:"scroll-target"})],t.prototype,"scrollTarget",2),i([r({type:Boolean,attribute:"adaptive-theme"})],t.prototype,"adaptiveTheme",2),i([r({attribute:"adaptive-theme-selector"})],t.prototype,"adaptiveThemeSelector",2),i([r({reflect:!0})],t.prototype,"theme",2),i([r({attribute:"default-theme"})],t.prototype,"defaultTheme",2),i([r({attribute:"skip-link-target"})],t.prototype,"skipLinkTarget",2),i([r({attribute:"skip-link-label"})],t.prototype,"skipLinkLabel",2),i([r({type:Boolean,reflect:!0})],t.prototype,"mobile",2),i([p("#bar")],t.prototype,"barEl",2),i([p("#panel")],t.prototype,"panelEl",2),i([p("#burger")],t.prototype,"burgerEl",2),t=i([d(f)],t);export{t as EunomiaToolbar,f as EunomiaToolbarTagName};
+      ${this.mobile?this.renderPanel():l}
+    `}};t.styles=k,i([r({reflect:!0})],t.prototype,"position",2),i([r({attribute:"logo-src"})],t.prototype,"logoSrc",2),i([r({attribute:"logo-alt"})],t.prototype,"logoAlt",2),i([r({attribute:"logo-href"})],t.prototype,"logoHref",2),i([r({type:Number,attribute:"mobile-breakpoint"})],t.prototype,"mobileBreakpoint",2),i([r({type:Boolean,reflect:!0})],t.prototype,"open",2),i([r({reflect:!0,attribute:"panel-direction"})],t.prototype,"panelDirection",2),i([r({attribute:"panel-size"})],t.prototype,"panelSize",2),i([r({type:Boolean,attribute:"close-on-backdrop"})],t.prototype,"closeOnBackdrop",2),i([r({attribute:"aria-label-menu-open"})],t.prototype,"ariaLabelMenuOpen",2),i([r({attribute:"aria-label-menu-close"})],t.prototype,"ariaLabelMenuClose",2),i([r({attribute:"aria-label-menu"})],t.prototype,"ariaLabelMenu",2),i([r({type:Boolean,attribute:"collapse-on-scroll"})],t.prototype,"collapseOnScroll",2),i([r({type:Number,attribute:"collapse-threshold"})],t.prototype,"collapseThreshold",2),i([r({type:Boolean,reflect:!0})],t.prototype,"collapsed",2),i([r({type:Boolean,attribute:"transparent-at-top"})],t.prototype,"transparentAtTop",2),i([r({type:Boolean,reflect:!0,attribute:"at-top"})],t.prototype,"atTop",2),i([r({attribute:"scroll-target"})],t.prototype,"scrollTarget",2),i([r({type:Boolean,attribute:"adaptive-theme"})],t.prototype,"adaptiveTheme",2),i([r({attribute:"adaptive-theme-selector"})],t.prototype,"adaptiveThemeSelector",2),i([r({reflect:!0})],t.prototype,"theme",2),i([r({attribute:"default-theme"})],t.prototype,"defaultTheme",2),i([r({attribute:"skip-link-target"})],t.prototype,"skipLinkTarget",2),i([r({attribute:"skip-link-label"})],t.prototype,"skipLinkLabel",2),i([r({type:Boolean,reflect:!0})],t.prototype,"mobile",2),i([p("#bar")],t.prototype,"barEl",2),i([p("#panel")],t.prototype,"panelEl",2),i([p("#burger")],t.prototype,"burgerEl",2),i([d({slot:"menu-icon"})],t.prototype,"menuIconSlotEls",2),i([d({slot:"close-icon"})],t.prototype,"closeIconSlotEls",2),t=i([c(y)],t);export{t as EunomiaToolbar,y as EunomiaToolbarTagName};