@eunomia/elements 1.0.0-beta.9 → 1.0.0

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

@@ -1,4 +1,4 @@
-import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js";import"./chunks/chunk-E6UOI36Q.js";import"./chunks/chunk-5LXGJVJR.js";import{a as s}from"./chunks/chunk-YYCEPZUN.js";import{a as b}from"./chunks/chunk-OTX6FWAF.js";import{a as g}from"./chunks/chunk-6TIEBY34.js";import{a as v}from"./chunks/chunk-JGV7LHEI.js";import"./chunks/chunk-GNAUNTS5.js";import{a as r,f as c,h,j as i,l as d,n as p,p as n,r as l,u}from"./chunks/chunk-YITWLCD3.js";var y=h`
+import{a as g,b as k}from"./chunks/chunk-M6ZJHL4Q.js";import"./chunks/chunk-XCBQ4CKH.js";import"./chunks/chunk-HXESKTK2.js";import"./chunks/chunk-5LXGJVJR.js";import{a as b}from"./chunks/chunk-YYCEPZUN.js";import{a as v}from"./chunks/chunk-OTX6FWAF.js";import{a as u}from"./chunks/chunk-WP6ZYBAC.js";import"./chunks/chunk-2XPIGFBD.js";import{a as r,f as p,h as c,j as i,l,n as d,p as n,r as s,u as h}from"./chunks/chunk-YITWLCD3.js";var y=c`
   :host {
     --_height: var(--toolbar-height, 72px);
     --_heightCollapsed: var(--toolbar-height-collapsed, 56px);
@@ -36,6 +36,14 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
       --toolbar-transition-duration,
       var(--eun-duration-l, 250ms)
     );
+    --_colorTransitionDuration: var(
+      --toolbar-color-transition-duration,
+      var(--_transitionDuration)
+    );
+    --_easing: var(
+      --toolbar-transition-easing,
+      var(--eun-easing-default, ease)
+    );
     --_panelSize: var(--toolbar-panel-size, 100%);
     --_panelBackground: var(
       --toolbar-panel-background,
@@ -73,6 +81,10 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
     );
     --_skipLinksColor: var(--toolbar-skip-links-color, #fff);
     --_skipLinksGap: var(--toolbar-skip-links-gap, var(--eun-space-m, 16px));
+    --_skipLinkPadding: var(
+      --toolbar-skip-link-padding,
+      var(--eun-space-xs, 4px)
+    );
     --_skipLinksSeparatorColor: var(
       --toolbar-skip-links-separator-color,
       color-mix(in srgb, var(--_skipLinksColor) 50%, transparent)
@@ -105,7 +117,8 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
     box-sizing: border-box;
     position: relative;
     display: grid;
-    grid-template-columns: 1fr auto 1fr;
+    grid-template-columns: var(--toolbar-columns, 1fr auto 1fr);
+    grid-template-rows: minmax(0, 1fr);
     align-items: center;
     gap: var(--_gap);
     height: var(--_currentHeight);
@@ -114,21 +127,26 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
     color: var(--_color);
     border-block-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     box-shadow: var(--_shadow);
+    backdrop-filter: blur(var(--toolbar-backdrop-blur));
+    -webkit-backdrop-filter: blur(var(--toolbar-backdrop-blur));
     transition:
-      height var(--_transitionDuration) var(--eun-easing-default, ease),
-      background-color var(--_transitionDuration)
-        var(--eun-easing-default, ease),
-      color var(--_transitionDuration) var(--eun-easing-default, ease),
-      border-color var(--_transitionDuration) var(--eun-easing-default, ease),
-      box-shadow var(--_transitionDuration) var(--eun-easing-default, ease);
+      height var(--_transitionDuration) var(--_easing),
+      background-color var(--_colorTransitionDuration) var(--_easing),
+      color var(--_colorTransitionDuration) var(--_easing),
+      border-color var(--_colorTransitionDuration) var(--_easing),
+      box-shadow var(--_colorTransitionDuration) var(--_easing);
+  }
+  :host([layout="between"]) #bar {
+    grid-template-columns: var(--toolbar-columns, auto 1fr auto);
   }
   :host([transparent-at-top][at-top]) #bar {
-    background: transparent;
+    background: var(--toolbar-background-at-top, transparent);
     border-color: transparent;
     box-shadow: none;
   }
 
   #start {
+    align-self: stretch;
     grid-column: 1;
     justify-self: start;
     display: flex;
@@ -137,6 +155,7 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
     min-width: 0;
   }
   #center {
+    align-self: stretch;
     grid-column: 2;
     justify-self: center;
     display: flex;
@@ -145,6 +164,7 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
     min-width: 0;
   }
   #end {
+    align-self: stretch;
     grid-column: 3;
     justify-self: end;
     display: flex;
@@ -162,14 +182,18 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
   #start ::slotted(*),
   #center ::slotted(*),
   #end ::slotted(*) {
-    max-height: var(--_currentHeight);
+    max-height: 100%;
   }
 
   #start ::slotted(eun-link),
   #center ::slotted(eun-link),
   #end ::slotted(eun-link) {
     --link-padding: var(--eun-space-xs, 4px);
-    --link-background-focus: var(--eun-color-primary-alpha-20, #3d6fff33);
+    --link-background-focus: var(
+      --toolbar-link-background-focus,
+      var(--eun-color-primary-alpha-20, #3d6fff33)
+    );
+    --link-focus-outline-color: var(--toolbar-focus-outline-color);
   }
 
   #start ::slotted(a) {
@@ -182,12 +206,28 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
     border-radius: var(--eun-border-radius-s);
   }
   #start ::slotted(a:focus-visible) {
-    outline-color: var(--eun-color-primary-500);
+    outline-color: var(
+      --toolbar-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
   }
 
   #burger {
+    --_burgerColor: var(--toolbar-burger-color, var(--_color));
+    --button-text: var(--_burgerColor);
+    --button-background-hover: var(
+      --toolbar-burger-background-hover,
+      color-mix(in srgb, var(--_burgerColor) 10%, transparent)
+    );
+    --button-background-active: var(
+      --toolbar-burger-background-active,
+      color-mix(in srgb, var(--_burgerColor) 16%, transparent)
+    );
     flex-shrink: 0;
   }
+  :host([open]) #burger {
+    --_burgerColor: var(--toolbar-burger-color, var(--_panelColor));
+  }
 
   #skip-links {
     box-sizing: border-box;
@@ -200,15 +240,18 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
     gap: var(--_skipLinksGap);
     overflow: hidden;
     height: var(--_skipLinksHeight);
-    padding-inline: var(--eun-space-m);
+    padding-inline: var(
+      --toolbar-skip-links-padding-inline,
+      var(--eun-space-m, 16px)
+    );
     background: var(--_skipLinksBackground);
     color: var(--_skipLinksColor);
     box-shadow: var(--eun-shadow-m, rgba(0, 0, 0, 0.1) 0 4px 6px -2px);
     transform: translateY(-100%);
     opacity: 0;
     transition:
-      transform var(--_transitionDuration) var(--eun-easing-default, ease),
-      opacity var(--_transitionDuration) var(--eun-easing-default, ease);
+      transform var(--_transitionDuration) var(--_easing),
+      opacity var(--_transitionDuration) var(--_easing);
   }
   #skip-links:focus-within {
     transform: translateY(0);
@@ -221,7 +264,10 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
     display: inline-flex;
     align-items: center;
     color: inherit;
-    font-size: var(--eun-font-size-s, 13px);
+    font-size: var(
+      --toolbar-skip-links-font-size,
+      var(--eun-font-size-s, 13px)
+    );
     text-decoration: none;
     white-space: nowrap;
   }
@@ -230,14 +276,21 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
     --link-color: var(--_skipLinksColor);
     --link-color-hover: var(--_skipLinksColor);
     --link-color-focus: var(--_skipLinksColor);
-    --link-padding: var(--eun-space-xs, 4px);
-    --link-background-focus: var(--eun-color-secondary-alpha-20, #edbd6f33);
+    --link-focus-outline-color: var(
+      --toolbar-skip-links-focus-outline-color,
+      var(--_skipLinksColor)
+    );
+    --link-padding: var(--_skipLinkPadding);
+    --link-background-focus: var(
+      --toolbar-skip-links-background-focus,
+      var(--eun-color-secondary-alpha-20, #edbd6f33)
+    );
     --link-border-radius: var(--eun-border-radius-l, 999px);
   }
 
   #skip-links ::slotted(a),
   .skip-link {
-    padding: var(--eun-space-xs, 4px);
+    padding: var(--_skipLinkPadding);
     outline: 2px solid transparent;
     outline-offset: 2px;
     border-radius: var(--eun-border-radius-l, 999px);
@@ -252,12 +305,27 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
   }
   #skip-links ::slotted(a:not(:first-child))::before,
   #skip-links ::slotted(eun-link:not(:first-child))::before {
-    content: "";
+    content: var(--toolbar-skip-links-separator, "");
     position: absolute;
-    inset-inline-start: calc(var(--_skipLinksGap) / -2);
+    inset-inline-start: calc(var(--_skipLinksGap) * -1);
     inset-block: 0;
-    width: 1px;
-    background: var(--_skipLinksSeparatorColor);
+    width: var(--_skipLinksGap);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--_skipLinksSeparatorColor);
+    /* The 1px line, centered in the gap. A glyph set through
+       --toolbar-skip-links-separator turns it off : a string is never a
+       valid image, so the declaration falls back to none. */
+    background: var(
+        --toolbar-skip-links-separator,
+        linear-gradient(
+          var(--_skipLinksSeparatorColor),
+          var(--_skipLinksSeparatorColor)
+        )
+      )
+      center / 1px 100% no-repeat;
+    pointer-events: none;
   }
   #skip-links ::slotted(a:hover),
   #skip-links ::slotted(a:focus-visible),
@@ -267,8 +335,14 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
   }
   #skip-links ::slotted(a:focus-visible),
   .skip-link:focus-visible {
-    outline-color: var(--_skipLinksColor);
-    background: var(--eun-color-secondary-alpha-20, #edbd6f33);
+    outline-color: var(
+      --toolbar-skip-links-focus-outline-color,
+      var(--_skipLinksColor)
+    );
+    background: var(
+      --toolbar-skip-links-background-focus,
+      var(--eun-color-secondary-alpha-20, #edbd6f33)
+    );
   }
 
   #panel {
@@ -303,8 +377,7 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
     height: calc(var(--_currentHeight) - var(--eun-border-width-s, 1px));
     padding: var(--_burgerPadding);
     pointer-events: auto;
-    transition: height var(--_transitionDuration)
-      var(--eun-easing-default, ease);
+    transition: height var(--_transitionDuration) var(--_easing);
   }
 
   #panel-body {
@@ -322,8 +395,8 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
     opacity: 0;
     pointer-events: none;
     transition:
-      opacity var(--_transitionDuration) var(--eun-easing-default, ease),
-      transform var(--_transitionDuration) var(--eun-easing-default, ease);
+      opacity var(--_transitionDuration) var(--_easing),
+      transform var(--_transitionDuration) var(--_easing);
   }
   #panel[data-direction="top"] #panel-body {
     inset-block-end: calc(100% - var(--_panelSize));
@@ -381,7 +454,7 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
       transition-duration: 0.01ms;
     }
   }
-`,m=y;var _="eun-toolbar",t=class extends k(v(u)){constructor(){super(...arguments);this.position="sticky";this.mobileBreakpoint=b.tablet;this.open=!1;this.panelDirection="top";this.closeOnBackdrop=!0;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.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.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 o=e.composedPath().find(f=>f instanceof HTMLAnchorElement)?.getAttribute("href");!o||!o.startsWith("#")||o.length<2||document.getElementById(o.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():e.get("adaptiveTheme")===!0&&(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(`(width < ${this.mobileBreakpoint}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 n`
+`,m=y;var _="eun-toolbar",t=class extends k(u(h)){constructor(){super(...arguments);this.position="sticky";this.layout="centered";this.mobileBreakpoint=v.tablet;this.open=!1;this.panelDirection="top";this.closeOnBackdrop=!1;this.collapseOnScroll=!1;this.collapseThreshold=24;this.collapsed=!1;this.transparentAtTop=!1;this.atTop=!0;this.adaptiveTheme=!1;this.adaptiveThemeAttribute="data-toolbar-theme";this.theme="light";this.defaultTheme="light";this.mobile=!1;this.handleIconSlotChange=()=>{this.requestUpdate()};this.scrollTargetEl=window;this.scrollListenerAttached=!1;this.intersectingThemeEls=new Set;this.observedThemeEls=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.handleThemeMutation=()=>{this.themeMarkerRafId===void 0&&(this.themeMarkerRafId=requestAnimationFrame(()=>{this.themeMarkerRafId=void 0,this.syncThemeMarkers()}))};this.handleThemeIntersect=e=>{for(let a of e)a.isIntersecting?this.intersectingThemeEls.add(a.target):this.intersectingThemeEls.delete(a.target);this.resolveAdaptiveTheme()};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.dispatchChange("open"),this.updateComplete.then(()=>this.focusInitialElement());return}this.closeDialogSurface(this.burgerEl),this.dispatchChange("open")};this.handleSkipLinkClick=e=>{let o=e.composedPath().find(f=>f instanceof HTMLAnchorElement)?.getAttribute("href");!o||!o.startsWith("#")||o.length<2||document.getElementById(o.slice(1))?.focus()}}connectedCallback(){super.connectedCallback(),this.updateMediaQuery(),this.syncScrollListener()}disconnectedCallback(){this.mediaQueryList?.removeEventListener("change",this.handleMediaChange),this.detachScrollListener(),this.teardownAdaptiveThemeObserver(),this.teardownDialogSurface(),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():e.get("adaptiveTheme")===!0&&(this.teardownAdaptiveThemeObserver(),this.theme=this.defaultTheme);return}this.adaptiveTheme&&(e.has("adaptiveThemeSelector")||e.has("adaptiveThemeAttribute")||e.has("collapsed")||e.has("scrollTarget"))&&this.setupAdaptiveThemeObserver()}show(){this.open=!0}hide(){this.open=!1}toggle(){this.open=!this.open}refreshAdaptiveTheme(){this.syncThemeMarkers()}get themeMarkerSelector(){return this.adaptiveThemeSelector??`[${this.adaptiveThemeAttribute}]`}updateMediaQuery(){this.mediaQueryList?.removeEventListener("change",this.handleMediaChange),this.mediaQueryList=window.matchMedia(`(width < ${this.mobileBreakpoint}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(){if(this.scrollTargetEl===window&&g())return;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.dispatchChange("collapsed"))}setTheme(e){this.theme!==e&&(this.theme=e,this.dispatchChange("theme"))}dispatchChange(e){this.dispatchEvent(new b({property:e,open:this.open,collapsed:this.collapsed,theme:this.theme}))}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.themeMarkerSelector).forEach(a=>{this.themeObserver?.observe(a),this.observedThemeEls.add(a)}),this.themeMarkerObserver=new MutationObserver(this.handleThemeMutation),this.themeMarkerObserver.observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[this.adaptiveThemeAttribute]}),this.resolveAdaptiveTheme()}teardownAdaptiveThemeObserver(){this.themeObserver?.disconnect(),this.themeObserver=void 0,this.themeMarkerObserver?.disconnect(),this.themeMarkerObserver=void 0,this.themeMarkerRafId!==void 0&&(cancelAnimationFrame(this.themeMarkerRafId),this.themeMarkerRafId=void 0),this.observedThemeEls.clear(),this.intersectingThemeEls.clear()}syncThemeMarkers(){if(!this.themeObserver)return;let e=new Set(document.querySelectorAll(this.themeMarkerSelector));for(let o of this.observedThemeEls)e.has(o)||(this.themeObserver.unobserve(o),this.observedThemeEls.delete(o),this.intersectingThemeEls.delete(o));let a=!1;for(let o of e)this.observedThemeEls.has(o)||(this.themeObserver.observe(o),this.observedThemeEls.add(o),a=!0);a||this.resolveAdaptiveTheme()}resolveAdaptiveTheme(){if(this.intersectingThemeEls.size===0){this.setTheme(this.defaultTheme);return}let e=document.querySelectorAll(this.themeMarkerSelector);for(let a=e.length-1;a>=0;a-=1)if(this.intersectingThemeEls.has(e[a])){this.setTheme(e[a].getAttribute(this.adaptiveThemeAttribute)==="dark"?"dark":"light");return}this.setTheme(this.defaultTheme)}focusInitialElement(){let e=this.querySelector("[autofocus]");if(e){e.focus();return}this.burgerEl?.focus()}hasSkipLinksContent(){return this.skipLinkTarget!==void 0||this.querySelector('[slot="skip-links"]')!==null}renderSkipLinks(){return n`
       <div id="skip-links" @click=${this.handleSkipLinkClick}>
         <slot name="skip-links">
           ${this.skipLinkTarget?n`
@@ -392,7 +465,7 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
                 >
                   ${this.skipLinkLabel??this.dictionary.toolbar.skipLink}
                 </a>
-              `:l}
+              `:s}
         </slot>
       </div>
     `}renderStart(){return n`
@@ -409,8 +482,13 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
         aria-label=${this.open?this.menuCloseLabel??this.dictionary.toolbar.menuClose:this.menuOpenLabel??this.dictionary.toolbar.menuOpen}
         @click=${()=>this.toggle()}
       >
-        <slot name=${e} @slotchange=${this.handleIconSlotChange}>
-          ${o?l:n`<eun-icon name=${a} size="20"></eun-icon>`}
+        <!-- burger-icon holds the per-state slots as its fallback, so a
+          single element slotted into it stays put across both states, free
+          to animate between them, and wins over menu-icon/close-icon. -->
+        <slot name="burger-icon">
+          <slot name=${e} @slotchange=${this.handleIconSlotChange}>
+            ${o?s:n`<eun-icon name=${a} size="20"></eun-icon>`}
+          </slot>
         </slot>
       </eun-button>
     `}renderPanel(){return n`
@@ -430,7 +508,7 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
         </div>
       </div>
     `}render(){return n`
-      ${this.hasSkipLinksContent()?this.renderSkipLinks():l}
+      ${this.hasSkipLinksContent()?this.renderSkipLinks():s}
       <nav
         id="bar"
         aria-label=${this.ariaLabel??this.dictionary.toolbar.navigation}
@@ -439,5 +517,5 @@ import{a as k}from"./chunks/chunk-4DRU3IYJ.js";import"./chunks/chunk-HGX6GPHM.js
         <div id="center"><slot name="center"></slot></div>
         ${this.renderEnd()}
       </nav>
-      ${this.mobile?this.renderPanel():l}
-    `}};t.styles=m,r([i({reflect:!0,useDefault:!0})],t.prototype,"position",2),r([i({type:Number,attribute:"mobile-breakpoint"})],t.prototype,"mobileBreakpoint",2),r([i({type:Boolean,reflect:!0})],t.prototype,"open",2),r([i({reflect:!0,attribute:"panel-direction",useDefault:!0})],t.prototype,"panelDirection",2),r([i({attribute:"panel-size"})],t.prototype,"panelSize",2),r([i({reflect:!0,attribute:"mobile-hide"})],t.prototype,"mobileHide",2),r([i({converter:g,attribute:"close-on-backdrop"})],t.prototype,"closeOnBackdrop",2),r([i({attribute:"menu-open-label"})],t.prototype,"menuOpenLabel",2),r([i({attribute:"menu-close-label"})],t.prototype,"menuCloseLabel",2),r([i({attribute:"menu-label"})],t.prototype,"menuLabel",2),r([i({type:Boolean,attribute:"collapse-on-scroll"})],t.prototype,"collapseOnScroll",2),r([i({type:Number,attribute:"collapse-threshold"})],t.prototype,"collapseThreshold",2),r([i({type:Boolean,reflect:!0})],t.prototype,"collapsed",2),r([i({type:Boolean,attribute:"transparent-at-top"})],t.prototype,"transparentAtTop",2),r([i({type:Boolean,reflect:!0,attribute:"at-top"})],t.prototype,"atTop",2),r([i({attribute:"scroll-target"})],t.prototype,"scrollTarget",2),r([i({type:Boolean,attribute:"adaptive-theme"})],t.prototype,"adaptiveTheme",2),r([i({attribute:"adaptive-theme-selector"})],t.prototype,"adaptiveThemeSelector",2),r([i({reflect:!0,useDefault:!0})],t.prototype,"theme",2),r([i({attribute:"default-theme"})],t.prototype,"defaultTheme",2),r([i({attribute:"skip-link-target"})],t.prototype,"skipLinkTarget",2),r([i({attribute:"skip-link-label"})],t.prototype,"skipLinkLabel",2),r([i({type:Boolean,reflect:!0})],t.prototype,"mobile",2),r([d("#bar")],t.prototype,"barEl",2),r([d("#panel")],t.prototype,"panelEl",2),r([d("#burger")],t.prototype,"burgerEl",2),r([p({slot:"menu-icon"})],t.prototype,"menuIconSlotEls",2),r([p({slot:"close-icon"})],t.prototype,"closeIconSlotEls",2),t=r([c(_)],t);export{t as EunomiaToolbar,_ as EunomiaToolbarTagName};
+      ${this.mobile?this.renderPanel():s}
+    `}};t.styles=m,r([i({reflect:!0,useDefault:!0})],t.prototype,"position",2),r([i({reflect:!0,useDefault:!0})],t.prototype,"layout",2),r([i({type:Number,attribute:"mobile-breakpoint"})],t.prototype,"mobileBreakpoint",2),r([i({type:Boolean,reflect:!0})],t.prototype,"open",2),r([i({reflect:!0,attribute:"panel-direction",useDefault:!0})],t.prototype,"panelDirection",2),r([i({attribute:"panel-size"})],t.prototype,"panelSize",2),r([i({reflect:!0,attribute:"mobile-hide"})],t.prototype,"mobileHide",2),r([i({type:Boolean,attribute:"close-on-backdrop"})],t.prototype,"closeOnBackdrop",2),r([i({attribute:"menu-open-label"})],t.prototype,"menuOpenLabel",2),r([i({attribute:"menu-close-label"})],t.prototype,"menuCloseLabel",2),r([i({attribute:"menu-label"})],t.prototype,"menuLabel",2),r([i({type:Boolean,attribute:"collapse-on-scroll"})],t.prototype,"collapseOnScroll",2),r([i({type:Number,attribute:"collapse-threshold"})],t.prototype,"collapseThreshold",2),r([i({type:Boolean,reflect:!0})],t.prototype,"collapsed",2),r([i({type:Boolean,attribute:"transparent-at-top"})],t.prototype,"transparentAtTop",2),r([i({type:Boolean,reflect:!0,attribute:"at-top"})],t.prototype,"atTop",2),r([i({attribute:"scroll-target"})],t.prototype,"scrollTarget",2),r([i({type:Boolean,attribute:"adaptive-theme"})],t.prototype,"adaptiveTheme",2),r([i({attribute:"adaptive-theme-attribute"})],t.prototype,"adaptiveThemeAttribute",2),r([i({attribute:"adaptive-theme-selector"})],t.prototype,"adaptiveThemeSelector",2),r([i({reflect:!0,useDefault:!0})],t.prototype,"theme",2),r([i({attribute:"default-theme"})],t.prototype,"defaultTheme",2),r([i({attribute:"skip-link-target"})],t.prototype,"skipLinkTarget",2),r([i({attribute:"skip-link-label"})],t.prototype,"skipLinkLabel",2),r([i({type:Boolean,reflect:!0})],t.prototype,"mobile",2),r([l("#bar")],t.prototype,"barEl",2),r([l("#panel")],t.prototype,"panelEl",2),r([l("#burger")],t.prototype,"burgerEl",2),r([d({slot:"menu-icon"})],t.prototype,"menuIconSlotEls",2),r([d({slot:"close-icon"})],t.prototype,"closeIconSlotEls",2),t=r([p(_)],t);export{t as EunomiaToolbar,_ as EunomiaToolbarTagName};

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

@@ -1,4 +1,4 @@
-import{c as g}from"./chunks/chunk-EUWUDCBZ.js";import{b as C}from"./chunks/chunk-5LXGJVJR.js";import{a as D}from"./chunks/chunk-QWTFP56P.js";import{b as k,c as y}from"./chunks/chunk-624VJYNA.js";import{a as m}from"./chunks/chunk-LYYQAALT.js";import{e as L}from"./chunks/chunk-GDBPWZN6.js";import{a as v}from"./chunks/chunk-PPCHQG7P.js";import{a as f}from"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import{a,f as P,h as c,j as s,n as x,o as u,p as h,r as S,t as _,u as T}from"./chunks/chunk-YITWLCD3.js";var N=c`
+import{c as g}from"./chunks/chunk-EUWUDCBZ.js";import{b as C}from"./chunks/chunk-5LXGJVJR.js";import{a as D}from"./chunks/chunk-7HXPLZ7C.js";import{b as k,c as y}from"./chunks/chunk-624VJYNA.js";import{a as m}from"./chunks/chunk-LYYQAALT.js";import{e as L}from"./chunks/chunk-GDBPWZN6.js";import{a as v}from"./chunks/chunk-PPCHQG7P.js";import{a as f}from"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import{a,f as P,h as c,j as s,n as x,o as u,p as h,r as S,t as _,u as T}from"./chunks/chunk-YITWLCD3.js";var N=c`
   :host {
     display: contents;
   }