@eunomia/elements 1.0.0-beta.6 → 1.0.0-beta.7

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

@@ -1,4 +1,4 @@
-import{a as i}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk-RS7TWEMQ.js";import{a as r,f as n,h as l,j as t,p as a,u as s}from"./chunks/chunk-YITWLCD3.js";var c=l`
+import{a as i}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk-3BMACIDO.js";import{a as r,f as n,h as l,j as t,p as a,u as s}from"./chunks/chunk-YITWLCD3.js";var c=l`
   :host {
     --_hoverColor: var(
       --toggle-hover-color,
@@ -107,4 +107,4 @@ import{a as i}from"./chunks/chunk-YYCEPZUN.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 i(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=[c],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([n(g)],o);export{o as EunomiaToggle,g as EunomiaToggleTagName};
+`;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 i(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=[c],r([t({type:Boolean,reflect:!0})],o.prototype,"checked",2),r([t({type:Boolean,reflect:!0})],o.prototype,"swap",2),r([t({reflect:!0,useDefault:!0})],o.prototype,"appearance",2),o=r([n(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 s}from"./chunks/chunk-YYCEPZUN.js";import{a as v}from"./chunks/chunk-BKZGTCMF.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 m=h`
+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-BKZGTCMF.js";import{a as v}from"./chunks/chunk-62RLISRD.js";import"./chunks/chunk-QL5GSW2A.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 f=h`
   :host {
     --_height: var(--toolbar-height, 72px);
     --_heightCollapsed: var(--toolbar-height-collapsed, 56px);
@@ -381,7 +381,7 @@ import{a as b}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
       transition-duration: 0.01ms;
     }
   }
-`,g=m;var f="eun-toolbar",t=class extends b(u){constructor(){super(...arguments);this.position="sticky";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.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(k=>k 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`
+`,k=f;var y="eun-toolbar",t=class extends g(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.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.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(m=>m 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`
       <div id="skip-links" @click=${this.handleSkipLinkClick}>
         <slot name="skip-links">
           ${this.skipLinkTarget?n`
@@ -406,7 +406,7 @@ import{a as b}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
         rounded
         size="s"
         aria-expanded=${this.open}
-        aria-label=${this.open?this.ariaLabelMenuClose:this.ariaLabelMenuOpen}
+        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}>
@@ -419,7 +419,7 @@ import{a as b}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
         popover="manual"
         role="dialog"
         aria-modal="true"
-        aria-label=${this.ariaLabelMenu}
+        aria-label=${this.menuLabel??this.dictionary.toolbar.menu}
         data-direction=${this.panelDirection}
         tabindex="-1"
         @toggle=${this.handlePanelToggle}
@@ -437,4 +437,4 @@ import{a as b}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
         ${this.renderEnd()}
       </nav>
       ${this.mobile?this.renderPanel():l}
-    `}};t.styles=g,r([i({reflect:!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"})],t.prototype,"panelDirection",2),r([i({attribute:"panel-size"})],t.prototype,"panelSize",2),r([i({type:Boolean,attribute:"close-on-backdrop"})],t.prototype,"closeOnBackdrop",2),r([i({attribute:"aria-label-menu-open"})],t.prototype,"ariaLabelMenuOpen",2),r([i({attribute:"aria-label-menu-close"})],t.prototype,"ariaLabelMenuClose",2),r([i({attribute:"aria-label-menu"})],t.prototype,"ariaLabelMenu",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})],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(f)],t);export{t as EunomiaToolbar,f as EunomiaToolbarTagName};
+    `}};t.styles=k,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({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-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(y)],t);export{t as EunomiaToolbar,y as EunomiaToolbarTagName};

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

@@ -1,4 +1,4 @@
-import{c as g}from"./chunks/chunk-EUWUDCBZ.js";import{a as C}from"./chunks/chunk-LK5BJ4SH.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 S,h as c,j as l,n as A,o as u,p as h,r as _,t as P,u as T}from"./chunks/chunk-YITWLCD3.js";var D=c`
+import{c as g}from"./chunks/chunk-EUWUDCBZ.js";import{a as C}from"./chunks/chunk-LK5BJ4SH.js";import{b as D,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 S,h as c,j as l,n as A,o as u,p as h,r as _,t as P,u as T}from"./chunks/chunk-YITWLCD3.js";var k=c`
   :host {
     display: contents;
   }
@@ -279,7 +279,7 @@ import{c as g}from"./chunks/chunk-EUWUDCBZ.js";import{a as C}from"./chunks/chunk
       right: calc(anchor(left) + var(--tooltip-gap, 8px));
     }
   }
-`,w=$;var M="eun-tooltip",B=0,V=0,R=new WeakSet,I=["--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-padding-block","--tooltip-padding-inline","--tooltip-row-gap","--tooltip-shadow","--tooltip-transition-duration"],F=C(T),o=class extends F{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(R.has(e)||!b.styleSheet)return;R.add(e);let t=[b.styleSheet];!m&&w.styleSheet&&t.push(w.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 I)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 r=!e.matches(":popover-open");r&&e.showPopover(),this.reposition(),(r||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){return window.matchMedia("(prefers-reduced-motion: reduce)").matches?0:k(e,"--tooltip-transition-duration","s",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:y(e),fill:"forwards"}))}playExitAnimation(e){e.style.pointerEvents="none";let t=o.panelAnimationDuration(e);if(t===0){e.hidePopover();return}let r=e.animate([{opacity:1,scale:1},{opacity:0,scale:.96}],{duration:t,easing:y(e),fill:"forwards"});this.panelAnimation=r,r.finished.then(()=>{this.panelAnimation===r&&(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-${++B}`,this.anchorEl.style.setProperty("anchor-name",this.anchorPositionName),this.panelEl.style.setProperty("position-anchor",this.anchorPositionName)):this.updateFallbackPosition(),this.clampPanelToViewport())}getEffectivePlacementFallback(e,t,r,i){let n=this.readGap();if(this.placement==="left"||this.placement==="right"){let H=window.innerWidth,x=e.right+n+t.width<=H,E=e.left-n-t.width>=0;return this.placement==="right"&&!x&&E?"left":this.placement==="left"&&!E&&x?"right":this.placement}let p=window.innerHeight,d=e.bottom+n+t.height<=p-i,s=e.top-n-t.height>=r;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"),r=this.readViewportInset(this.panelEl,"--eun-viewport-inset-bottom"),i=this.anchorEl.getBoundingClientRect(),n=this.panelEl.getBoundingClientRect(),p=this.getEffectivePlacementFallback(i,n,t,r),d,s;p==="top"||p==="bottom"?(d=p==="top"?i.top-n.height-e:i.bottom+e,s=g(i.left+i.width/2-n.width/2,n.width,window.innerWidth,e)):(s=p==="left"?i.left-n.width-e:i.right+e,d=g(i.top+i.height/2-n.height/2,n.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"),r=this.readViewportInset(this.panelEl,"--eun-viewport-inset-bottom"),i=this.panelEl.getBoundingClientRect(),n=0;i.left<e?n=e-i.left:i.right>window.innerWidth-e&&(n=window.innerWidth-e-i.right);let p=t+e,d=window.innerHeight-r-e,s=0;i.top<p?s=p-i.top:i.bottom>d&&(s=d-i.bottom),this.panelEl.style.transform=n||s?`translate(${n}px, ${s}px)`:""}readPixelVar(e,t){if(!this.panelEl)return t;let r=getComputedStyle(this.panelEl).getPropertyValue(e),i=Number.parseFloat(r);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(r=>r.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`
+`,w=$;var M="eun-tooltip",B=0,V=0,R=new WeakSet,I=["--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-padding-block","--tooltip-padding-inline","--tooltip-row-gap","--tooltip-shadow","--tooltip-transition-duration"],F=C(T),o=class extends F{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(R.has(e)||!b.styleSheet)return;R.add(e);let t=[b.styleSheet];!m&&w.styleSheet&&t.push(w.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 I)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 r=!e.matches(":popover-open");r&&e.showPopover(),this.reposition(),(r||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){return window.matchMedia("(prefers-reduced-motion: reduce)").matches?0:D(e,"--tooltip-transition-duration","s",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:y(e),fill:"forwards"}))}playExitAnimation(e){e.style.pointerEvents="none";let t=o.panelAnimationDuration(e);if(t===0){e.hidePopover();return}let r=e.animate([{opacity:1,scale:1},{opacity:0,scale:.96}],{duration:t,easing:y(e),fill:"forwards"});this.panelAnimation=r,r.finished.then(()=>{this.panelAnimation===r&&(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-${++B}`,this.anchorEl.style.setProperty("anchor-name",this.anchorPositionName),this.panelEl.style.setProperty("position-anchor",this.anchorPositionName)):this.updateFallbackPosition(),this.clampPanelToViewport())}getEffectivePlacementFallback(e,t,r,i){let n=this.readGap();if(this.placement==="left"||this.placement==="right"){let H=window.innerWidth,x=e.right+n+t.width<=H,E=e.left-n-t.width>=0;return this.placement==="right"&&!x&&E?"left":this.placement==="left"&&!E&&x?"right":this.placement}let p=window.innerHeight,d=e.bottom+n+t.height<=p-i,s=e.top-n-t.height>=r;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"),r=this.readViewportInset(this.panelEl,"--eun-viewport-inset-bottom"),i=this.anchorEl.getBoundingClientRect(),n=this.panelEl.getBoundingClientRect(),p=this.getEffectivePlacementFallback(i,n,t,r),d,s;p==="top"||p==="bottom"?(d=p==="top"?i.top-n.height-e:i.bottom+e,s=g(i.left+i.width/2-n.width/2,n.width,window.innerWidth,e)):(s=p==="left"?i.left-n.width-e:i.right+e,d=g(i.top+i.height/2-n.height/2,n.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"),r=this.readViewportInset(this.panelEl,"--eun-viewport-inset-bottom"),i=this.panelEl.getBoundingClientRect(),n=0;i.left<e?n=e-i.left:i.right>window.innerWidth-e&&(n=window.innerWidth-e-i.right);let p=t+e,d=window.innerHeight-r-e,s=0;i.top<p?s=p-i.top:i.bottom>d&&(s=d-i.bottom),this.panelEl.style.transform=n||s?`translate(${n}px, ${s}px)`:""}readPixelVar(e,t){if(!this.panelEl)return t;let r=getComputedStyle(this.panelEl).getPropertyValue(e),i=Number.parseFloat(r);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(r=>r.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=${f({"eun-tooltip-panel":!0,"no-heading":!this.hasHeading()})}
@@ -314,4 +314,4 @@ import{c as g}from"./chunks/chunk-EUWUDCBZ.js";import{a as C}from"./chunks/chunk
         hidden
         @slotchange=${this.handleSlotChange}
       ></slot>
-    `}};o.styles=D,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([A({slot:"anchor"})],o.prototype,"anchorSlotEls",2),a([u()],o.prototype,"defaultSlotNodes",2),a([u({slot:"description"})],o.prototype,"descriptionSlotNodes",2),o=a([S(M)],o);export{o as EunomiaTooltip,M as EunomiaTooltipTagName};
+    `}};o.styles=k,o.nativeAnchorPositioningSupported=typeof CSS<"u"&&CSS.supports("anchor-name: --a")&&!m,a([l({reflect:!0})],o.prototype,"severity",2),a([l({reflect:!0,useDefault:!0})],o.prototype,"color",2),a([l({reflect:!0,useDefault:!0})],o.prototype,"appearance",2),a([l({type:Boolean,reflect:!0,attribute:"fixed-color"})],o.prototype,"fixedColor",2),a([l({reflect:!0,useDefault:!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([A({slot:"anchor"})],o.prototype,"anchorSlotEls",2),a([u()],o.prototype,"defaultSlotNodes",2),a([u({slot:"description"})],o.prototype,"descriptionSlotNodes",2),o=a([S(M)],o);export{o as EunomiaTooltip,M as EunomiaTooltipTagName};

package/dist/components/action/button/button.d.ts

@@ -96,7 +96,8 @@ export declare class EunomiaButton extends EunomiaButton_base {
      * regardless of `color` ; `raised` adds a drop shadow ; `ghost` has no
      * visible surface at rest at all — a border (and a tinted background)
      * only appear on hover/focus/active, defaulting to a neutral gray when
-     * `color` isn't also set.
+     * `color` isn't also set. The default isn't reflected, so an SSR framework
+     * doesn't see an attribute it never rendered.
      * @default fill
      */
     appearance: EunomiaButtonAppearance;

package/dist/components/action/button/button.js

@@ -98,7 +98,8 @@ let EunomiaButton = class EunomiaButton extends ButtonMixin(CommandMixin(Disable
          * regardless of `color` ; `raised` adds a drop shadow ; `ghost` has no
          * visible surface at rest at all — a border (and a tinted background)
          * only appear on hover/focus/active, defaulting to a neutral gray when
-         * `color` isn't also set.
+         * `color` isn't also set. The default isn't reflected, so an SSR framework
+         * doesn't see an attribute it never rendered.
          * @default fill
          */
         this.appearance = "fill";
@@ -317,7 +318,7 @@ __decorate([
     property({ reflect: true })
 ], EunomiaButton.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaButton.prototype, "appearance", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

package/dist/components/action/button/button.styles.js

@@ -319,7 +319,7 @@ const appearances = css `
   }
 
   :host(
-      [appearance="fill"]:is(
+      :is([appearance="fill"], :not([appearance])):is(
           [color="critical"],
           [color="success"],
           [color="warning"]
@@ -327,7 +327,7 @@ const appearances = css `
     )
     #button,
   :host(
-      [appearance="fill"]:is(
+      :is([appearance="fill"], :not([appearance])):is(
           [color="critical"],
           [color="success"],
           [color="warning"]
@@ -336,9 +336,14 @@ const appearances = css `
     #button:is(:hover, :focus-visible) {
     filter: brightness(0.9);
   }
-  :host([appearance="fill"][color="critical"]:not([disabled])) #button:active,
-  :host([appearance="fill"][color="success"]:not([disabled])) #button:active,
-  :host([appearance="fill"][color="warning"]:not([disabled])) #button:active {
+  :host(
+      :is([appearance="fill"], :not([appearance])):is(
+          [color="critical"],
+          [color="success"],
+          [color="warning"]
+        ):not([disabled])
+    )
+    #button:active {
     filter: brightness(0.8);
   }
 `;

package/dist/components/action/dropdown-button/dropdown-button.js

@@ -1116,16 +1116,21 @@ __decorate([
     property({ reflect: true })
 ], EunomiaDropdownButton.prototype, "severity", void 0);
 __decorate([
-    property({ type: Array, reflect: true })
+    property({ type: Array, reflect: true, useDefault: true })
 ], EunomiaDropdownButton.prototype, "options", void 0);
 __decorate([
-    property({ type: Array, reflect: true, attribute: "disabled-keys" })
+    property({
+        type: Array,
+        reflect: true,
+        attribute: "disabled-keys",
+        useDefault: true,
+    })
 ], EunomiaDropdownButton.prototype, "disabledKeys", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaDropdownButton.prototype, "disabled", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDropdownButton.prototype, "size", void 0);
 __decorate([
     property({ reflect: true })
@@ -1137,10 +1142,10 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaDropdownButton.prototype, "rounded", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDropdownButton.prototype, "appearance", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDropdownButton.prototype, "placement", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

package/dist/components/action/toggle/toggle-group.js

@@ -750,7 +750,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaToggleGroup.prototype, "single", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaToggleGroup.prototype, "appearance", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

package/dist/components/action/toggle/toggle-group.styles.js

@@ -272,13 +272,15 @@ export const toggleGroupStyles = css `
   button[disabled] {
     cursor: not-allowed;
   }
-  :host([appearance="default"]) #scrollable:has(#indicator) button.active {
+  :host(:is([appearance="default"], :not([appearance])))
+    #scrollable:has(#indicator)
+    button.active {
     color: var(
       --toggle-group-active-color,
       var(--eun-color-on-primary-500, #ffffff)
     );
   }
-  :host([appearance="default"])
+  :host(:is([appearance="default"], :not([appearance])))
     #scrollable:not(:has(#indicator))
     button.active {
     background: var(

package/dist/components/action/toggle/toggle.js

@@ -161,7 +161,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaToggle.prototype, "swap", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaToggle.prototype, "appearance", void 0);
 EunomiaToggle = __decorate([
     customElement(EunomiaToggleTagName)

package/dist/components/alert/alert/alert.d.ts

@@ -13,6 +13,7 @@ type AlertSeverity = EunomiaSeverity;
  * All available alert surface treatments.
  */
 type AlertAppearance = EunomiaDisplayAppearance;
+declare const EunomiaAlert_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * An inline banner that relays information to the user without
  * interrupting their current task, such as a form submission result, a
@@ -44,8 +45,8 @@ type AlertAppearance = EunomiaDisplayAppearance;
  * @prop {string} [richText] - Lightweight formatted content rendered above the description slot, combining with it. Supports simple lists, links, bold, and italic text
  * @attr {string} [rich-text] - Lightweight formatted content rendered above the description slot
  * @prop {boolean} [closeable=false] - Shows a close button. Clicking it fires the close event without changing the alert's own rendering
- * @prop {string} [ariaLabelClose='Close'] - The accessible label of the close button
- * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
+ * @attr {string} [close-label] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @cssprop [--alert-background-color] - Sets the background color, for every appearance and severity
  * @cssprop [--alert-border-color] - Sets the border color, for every appearance and severity: the leading accent of the default appearance, and the border of every other one
  * @cssprop [--alert-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so it keeps its size
@@ -58,10 +59,10 @@ type AlertAppearance = EunomiaDisplayAppearance;
  * @cssprop [--alert-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --alert-padding is set
  * @cssprop [--alert-gap] - Sets the gap between the icon column and the heading and content column
  * @cssprop [--alert-row-gap] - Sets the gap between the heading, description, and action rows
- * @cssprop [--alert-focus-outline-color] - Sets the focus outline color of the close button
+ * @cssprop [--alert-focus-outline-color] - Sets the focus outline color of the close button, and of the alert itself when it's given focus
  * @element eun-alert
  */
-export declare class EunomiaAlert extends LitElement {
+export declare class EunomiaAlert extends EunomiaAlert_base {
     /**
      * Styles to import to the component.
      *
@@ -75,7 +76,8 @@ export declare class EunomiaAlert extends LitElement {
      */
     severity?: AlertSeverity;
     /**
-     * The surface treatment of the alert.
+     * The surface treatment of the alert. The default isn't reflected, so an
+     * SSR framework doesn't see an attribute it never rendered.
      * @default default
      */
     appearance: AlertAppearance;
@@ -108,9 +110,9 @@ export declare class EunomiaAlert extends LitElement {
     closeable: boolean;
     /**
      * Accessible label of the close button.
-     * @default Close
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelClose: string;
+    closeLabel?: string;
     /**
      * Elements assigned to the `description` slot, if any ; queried live so
      * {@link render} can decide whether the description row should render at

package/dist/components/alert/alert/alert.js

@@ -12,6 +12,7 @@ import { CloseEvent } from "../../../events/close.event.js";
 import { formatRichText } from "../../../utils/rich-text.utils.js";
 import { resolveIcon } from "../../../utils/severity-icon.utils.js";
 import { alertStyles } from "./alert.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the alert component.
  */
@@ -47,8 +48,8 @@ export const EunomiaAlertTagName = "eun-alert";
  * @prop {string} [richText] - Lightweight formatted content rendered above the description slot, combining with it. Supports simple lists, links, bold, and italic text
  * @attr {string} [rich-text] - Lightweight formatted content rendered above the description slot
  * @prop {boolean} [closeable=false] - Shows a close button. Clicking it fires the close event without changing the alert's own rendering
- * @prop {string} [ariaLabelClose='Close'] - The accessible label of the close button
- * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
+ * @attr {string} [close-label] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @cssprop [--alert-background-color] - Sets the background color, for every appearance and severity
  * @cssprop [--alert-border-color] - Sets the border color, for every appearance and severity: the leading accent of the default appearance, and the border of every other one
  * @cssprop [--alert-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so it keeps its size
@@ -61,14 +62,15 @@ export const EunomiaAlertTagName = "eun-alert";
  * @cssprop [--alert-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --alert-padding is set
  * @cssprop [--alert-gap] - Sets the gap between the icon column and the heading and content column
  * @cssprop [--alert-row-gap] - Sets the gap between the heading, description, and action rows
- * @cssprop [--alert-focus-outline-color] - Sets the focus outline color of the close button
+ * @cssprop [--alert-focus-outline-color] - Sets the focus outline color of the close button, and of the alert itself when it's given focus
  * @element eun-alert
  */
-let EunomiaAlert = class EunomiaAlert extends LitElement {
+let EunomiaAlert = class EunomiaAlert extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
-         * The surface treatment of the alert.
+         * The surface treatment of the alert. The default isn't reflected, so an
+         * SSR framework doesn't see an attribute it never rendered.
          * @default default
          */
         this.appearance = "default";
@@ -83,11 +85,6 @@ let EunomiaAlert = class EunomiaAlert extends LitElement {
          * @default false
          */
         this.closeable = false;
-        /**
-         * Accessible label of the close button.
-         * @default Close
-         */
-        this.ariaLabelClose = "Close";
         /**
          * Re-renders when a named slot's assigned content changes, so the
          * description/action rows correctly appear/disappear as content is slotted
@@ -179,7 +176,7 @@ let EunomiaAlert = class EunomiaAlert extends LitElement {
                 appearance="ghost"
                 rounded
                 size="xs"
-                aria-label=${this.ariaLabelClose}
+                aria-label=${this.closeLabel ?? this.dictionary.common.close}
                 @click=${this.handleClose}
               >
                 <eun-icon name="close" size="16"></eun-icon>
@@ -235,7 +232,7 @@ __decorate([
     property({ reflect: true })
 ], EunomiaAlert.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaAlert.prototype, "appearance", void 0);
 __decorate([
     property()
@@ -253,8 +250,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaAlert.prototype, "closeable", void 0);
 __decorate([
-    property({ attribute: "aria-label-close" })
-], EunomiaAlert.prototype, "ariaLabelClose", void 0);
+    property({ attribute: "close-label" })
+], EunomiaAlert.prototype, "closeLabel", void 0);
 __decorate([
     queryAssignedElements({ slot: "description" })
 ], EunomiaAlert.prototype, "descriptionSlotEls", void 0);

package/dist/components/alert/alert/alert.styles.js

@@ -15,7 +15,7 @@ import { css } from "lit";
  * [--alert-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --alert-padding is set
  * [--alert-gap] - Set a custom gap between the icon column and the heading/content column
  * [--alert-row-gap] - Set a custom gap between the heading, description, and action rows
- * [--alert-focus-outline-color] - Set a custom focus outline color for the close button
+ * [--alert-focus-outline-color] - Set a custom focus outline color for the close button, and for the alert itself when it's given focus
  */
 const base = css `
   :host {
@@ -23,6 +23,12 @@ const base = css `
     width: 100%;
     box-sizing: border-box;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
+    border-radius: var(--alert-border-radius, var(--eun-border-radius-m, 8px));
+  }
+  :host(:focus-visible) {
+    outline: 2px solid
+      var(--alert-focus-outline-color, var(--eun-color-primary-500, #3d6fff));
+    outline-offset: 2px;
   }
 
   :host(:not([severity])) {
@@ -98,7 +104,8 @@ const base = css `
     grid-column: 1;
   }
 
-  :host([appearance="default"]) #alert {
+  :host([appearance="default"]) #alert,
+  :host(:not([appearance])) #alert {
     background: linear-gradient(
         to right,
         var(--alert-border-color, var(--_borderColor)) 4px,

package/dist/components/alert/drawer/drawer.d.ts

@@ -7,7 +7,7 @@ export declare const EunomiaDrawerTagName = "eun-drawer";
  * Which edge of the viewport the drawer slides in from.
  */
 export type EunomiaDrawerPosition = "start" | "end";
-declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/dialog-surface.mixin.js").DialogSurfaceMixinInterface> & typeof LitElement;
+declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/dialog-surface.mixin.js").DialogSurfaceMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A full-height side panel that behaves as a modal overlay, sliding in from
  * an edge of the screen. It's the same idea as a modal turned into a
@@ -32,8 +32,8 @@ declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").C
  * @prop {boolean} [open=false] - Whether the drawer is open
  * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the drawer requests a close
  * @prop {boolean} [dirty=false] - Marks the drawer as having unsaved changes, requiring confirmation before it closes
- * @prop {string} ariaLabelClose - The accessible label of the close button
- * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
+ * @attr {string} [close-label] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @prop {string} [confirmCloseHeading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @attr {string} [confirm-close-heading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @prop {string} confirmCloseDescription - The description of the internal discard confirmation dialog
@@ -98,9 +98,9 @@ export declare class EunomiaDrawer extends EunomiaDrawer_base {
     dirty: boolean;
     /**
      * Accessible label of the close (X) button.
-     * @default Close
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelClose: string;
+    closeLabel?: string;
     /**
      * Heading of the internal discard-confirmation dialog.
      * @default Discard changes?

package/dist/components/alert/drawer/drawer.js

@@ -12,6 +12,7 @@ import { DirtyCloseEvent } from "../../../events/dirty-close.event.js";
 import { handleDialogCommand } from "../../../utils/command.utils.js";
 import { DialogSurfaceMixin } from "../../../mixins/dialog-surface.mixin.js";
 import { drawerStyles } from "./drawer.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the drawer component.
  */
@@ -40,8 +41,8 @@ export const EunomiaDrawerTagName = "eun-drawer";
  * @prop {boolean} [open=false] - Whether the drawer is open
  * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the drawer requests a close
  * @prop {boolean} [dirty=false] - Marks the drawer as having unsaved changes, requiring confirmation before it closes
- * @prop {string} ariaLabelClose - The accessible label of the close button
- * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
+ * @attr {string} [close-label] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @prop {string} [confirmCloseHeading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @attr {string} [confirm-close-heading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @prop {string} confirmCloseDescription - The description of the internal discard confirmation dialog
@@ -63,7 +64,7 @@ export const EunomiaDrawerTagName = "eun-drawer";
  * @cssprop [--drawer-transition-duration] - Sets the duration of the slide transition
  * @element eun-drawer
  */
-let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
+let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LocalizableMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -93,11 +94,6 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
          * @default false
          */
         this.dirty = false;
-        /**
-         * Accessible label of the close (X) button.
-         * @default Close
-         */
-        this.ariaLabelClose = "Close";
         /**
          * Heading of the internal discard-confirmation dialog.
          * @default Discard changes?
@@ -404,7 +400,7 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
                 appearance="ghost"
                 rounded
                 size="xs"
-                aria-label=${this.ariaLabelClose}
+                aria-label=${this.closeLabel ?? this.dictionary.common.close}
                 @click=${() => this.requestClose()}
               >
                 <eun-icon name="close" size="16"></eun-icon>
@@ -491,7 +487,7 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
  */
 EunomiaDrawer.styles = drawerStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDrawer.prototype, "position", void 0);
 __decorate([
     property()
@@ -509,8 +505,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaDrawer.prototype, "dirty", void 0);
 __decorate([
-    property({ attribute: "aria-label-close" })
-], EunomiaDrawer.prototype, "ariaLabelClose", void 0);
+    property({ attribute: "close-label" })
+], EunomiaDrawer.prototype, "closeLabel", void 0);
 __decorate([
     property({ attribute: "confirm-close-heading" })
 ], EunomiaDrawer.prototype, "confirmCloseHeading", void 0);

package/dist/components/alert/drawer/drawer.styles.js

@@ -72,7 +72,7 @@ const base = css `
   #surface[closing]::backdrop {
     background-color: rgba(7, 22, 33, 0);
   }
-  :host([position="end"]) #surface {
+  :host(:is([position="end"], :not([position]))) #surface {
     justify-content: flex-end;
   }
   :host([position="start"]) #surface {