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

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

@@ -1,4 +1,4 @@
-import{a as y}from"./chunks/chunk-UDOZRIJZ.js";import{b as u}from"./chunks/chunk-LYYQAALT.js";import{a as s}from"./chunks/chunk-YYCEPZUN.js";import{e as m}from"./chunks/chunk-LGLQ36QB.js";import{a as c}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as t,f as v,g as f,h as o,i as g,j as l,l as d,n as r,p as i,s as b}from"./chunks/chunk-XH6NREVZ.js";var x=f`
+import{a as x}from"./chunks/chunk-UDOZRIJZ.js";import{b as h}from"./chunks/chunk-LYYQAALT.js";import{a as s}from"./chunks/chunk-YYCEPZUN.js";import{e as m}from"./chunks/chunk-GDBPWZN6.js";import{a as c}from"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import{a as t,f as v,h as g,j as r,k as f,l,n as d,p as a,r as i,u as b}from"./chunks/chunk-YITWLCD3.js";var y=g`
   :host {
     display: block;
     width: 100%;
@@ -47,8 +47,29 @@ import{a as y}from"./chunks/chunk-UDOZRIJZ.js";import{b as u}from"./chunks/chunk
       --collapse-border-radius,
       var(--eun-border-radius-l, 16px)
     );
-    --_padding: var(--collapse-padding, var(--eun-space-m, 16px));
-    --_transitionDuration: var(--collapse-transition-duration, 0.3s);
+    --_padding: var(
+      --collapse-padding,
+      var(--collapse-padding-block, var(--eun-space-m, 16px))
+        var(--collapse-padding-inline, var(--eun-space-m, 16px))
+    );
+    --_panelPadding: var(
+      --collapse-panel-padding,
+      var(
+        --collapse-padding,
+        var(
+            --collapse-panel-padding-block,
+            var(--collapse-padding-block, var(--eun-space-m, 16px))
+          )
+          var(
+            --collapse-panel-padding-inline,
+            var(--collapse-padding-inline, var(--eun-space-m, 16px))
+          )
+      )
+    );
+    --_transitionDuration: var(
+      --collapse-transition-duration,
+      var(--eun-duration-xl, 300ms)
+    );
   }
   #header {
     display: flex;
@@ -68,10 +89,11 @@ import{a as y}from"./chunks/chunk-UDOZRIJZ.js";import{b as u}from"./chunks/chunk
     cursor: pointer;
     outline: 2px solid transparent;
     transition:
-      color var(--_transitionDuration) ease-out,
-      background-color var(--_transitionDuration) ease-out,
-      outline-color var(--_transitionDuration) ease-out,
-      border-radius var(--_transitionDuration) ease-out
+      color var(--_transitionDuration) var(--eun-easing-out, ease-out),
+      background-color var(--_transitionDuration)
+        var(--eun-easing-out, ease-out),
+      outline-color var(--_transitionDuration) var(--eun-easing-out, ease-out),
+      border-radius var(--_transitionDuration) var(--eun-easing-out, ease-out)
         var(--_transitionDuration);
   }
   #header eun-icon {
@@ -113,7 +135,7 @@ import{a as y}from"./chunks/chunk-UDOZRIJZ.js";import{b as u}from"./chunks/chunk
   #heading {
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--collapse-heading-font-size, var(--eun-font-size-s, 14px));
   }
   #heading ::slotted(*) {
     margin: 0;
@@ -121,7 +143,10 @@ import{a as y}from"./chunks/chunk-UDOZRIJZ.js";import{b as u}from"./chunks/chunk
     color: inherit;
   }
   #subheading {
-    font-size: var(--eun-font-size-xs, 14px);
+    font-size: var(
+      --collapse-subheading-font-size,
+      var(--eun-font-size-xs, 14px)
+    );
     font-weight: var(--eun-font-weight-m);
     color: var(--_subheadingColor);
   }
@@ -141,7 +166,8 @@ import{a as y}from"./chunks/chunk-UDOZRIJZ.js";import{b as u}from"./chunks/chunk
   }
   #chevron {
     display: inline-flex;
-    transition: transform var(--_transitionDuration) ease-out;
+    transition: transform var(--_transitionDuration)
+      var(--eun-easing-out, ease-out);
   }
   #panel {
     display: grid;
@@ -152,17 +178,19 @@ import{a as y}from"./chunks/chunk-UDOZRIJZ.js";import{b as u}from"./chunks/chunk
     border-bottom-right-radius: var(--_borderRadius);
     overflow-anchor: none;
     transition:
-      grid-template-rows var(--_transitionDuration) ease-out,
-      margin-top var(--_transitionDuration) ease-out,
-      background-color var(--_transitionDuration) ease-out;
+      grid-template-rows var(--_transitionDuration)
+        var(--eun-easing-out, ease-out),
+      margin-top var(--_transitionDuration) var(--eun-easing-out, ease-out),
+      background-color var(--_transitionDuration)
+        var(--eun-easing-out, ease-out);
   }
   #panel-inner {
     overflow: hidden;
   }
   #panel-content {
-    border-top: var(--eun-border-width-s, 1px) solid
-      var(--eun-color-grey-300, #dee0e7);
-    padding: var(--_padding);
+    border-top: var(--collapse-divider-width, var(--eun-border-width-s, 1px))
+      solid var(--collapse-divider-color, var(--eun-color-grey-300, #dee0e7));
+    padding: var(--_panelPadding);
     color: var(--_contentColor);
     font-size: var(--_contentFontSize);
   }
@@ -184,8 +212,9 @@ import{a as y}from"./chunks/chunk-UDOZRIJZ.js";import{b as u}from"./chunks/chunk
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     transition:
-      color var(--_transitionDuration) ease-out,
-      background-color var(--_transitionDuration) ease-out;
+      color var(--_transitionDuration) var(--eun-easing-out, ease-out),
+      background-color var(--_transitionDuration)
+        var(--eun-easing-out, ease-out);
   }
   .open #panel {
     grid-template-rows: 1fr;
@@ -214,13 +243,13 @@ import{a as y}from"./chunks/chunk-UDOZRIJZ.js";import{b as u}from"./chunks/chunk
       transition: none;
     }
   }
-`;var w="eun-collapse",n=class extends b{constructor(){super(...arguments);this.chevronIcon="add";this.open=!1;this.disabled=!1;this.independent=!1;this.panelHidden=!1;this.deferPanelHidden=!1;this.openedViaFocus=!1;this.handleSlotChange=()=>{this.requestUpdate()};this.handlePanelTransitionEnd=e=>{e.target!==this.panelEl||e.propertyName!=="grid-template-rows"||(this.panelEl?.removeEventListener("transitionend",this.handlePanelTransitionEnd),this.open||(this.panelHidden=!0))};this.toggle=()=>{this.disabled||(this.openedViaFocus=!1,this.open=!this.open,this.dispatchEvent(new s))};this.handleBeforeMatch=()=>{this.open=!0,this.dispatchEvent(new s)};this.handleHeaderKeydown=e=>{if(e.key!=="Tab"||e.shiftKey||this.open||!this.panelContentEl)return;let[a]=y(this.panelContentEl,{requireRendered:!1});a&&(e.preventDefault(),this.openedViaFocus=!0,this.open=!0,this.dispatchEvent(new s),this.updateComplete.then(()=>a.focus()))};this.handleFocusOut=e=>{!this.openedViaFocus||e.relatedTarget instanceof Node&&this.contains(e.relatedTarget)||(this.openedViaFocus=!1,this.open=!1,this.dispatchEvent(new s))}}connectedCallback(){super.connectedCallback(),this.addEventListener("focusout",this.handleFocusOut)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusout",this.handleFocusOut),this.panelEl?.removeEventListener("transitionend",this.handlePanelTransitionEnd)}willUpdate(e){if(!e.has("open")&&!e.has("disabled")){this.deferPanelHidden=!1;return}let a=e.get("open");if(!(!this.open&&!this.disabled&&u)){this.panelHidden=!1,this.deferPanelHidden=!1;return}let h=a===!0&&!this.open,_=window.matchMedia("(prefers-reduced-motion: reduce)").matches;if(!h||_){this.panelHidden=!0,this.deferPanelHidden=!1;return}this.deferPanelHidden=!0}updated(e){super.updated(e),e.has("open")&&!this.open&&document.activeElement&&this.contains(document.activeElement)&&this.headerEl?.focus(),this.deferPanelHidden&&this.panelEl?.addEventListener("transitionend",this.handlePanelTransitionEnd)}renderHeadingWrapper(e){switch(this.level){case 2:return r`<h2>${e}</h2>`;case 3:return r`<h3>${e}</h3>`;case 4:return r`<h4>${e}</h4>`;case 5:return r`<h5>${e}</h5>`;case 6:return r`<h6>${e}</h6>`;default:return e}}renderTag(){let e=[...this.querySelectorAll(':scope > [slot="tag"]')],a=e.some(h=>h.localName.includes("-")),p=r`<slot name="tag" @slotchange=${this.handleSlotChange}
+`;var k="eun-collapse",n=class extends b{constructor(){super(...arguments);this.chevronIcon="add";this.open=!1;this.disabled=!1;this.independent=!1;this.panelHidden=!1;this.deferPanelHidden=!1;this.openedViaFocus=!1;this.handleSlotChange=()=>{this.requestUpdate()};this.handlePanelTransitionEnd=e=>{e.target!==this.panelEl||e.propertyName!=="grid-template-rows"||(this.panelEl?.removeEventListener("transitionend",this.handlePanelTransitionEnd),this.open||(this.panelHidden=!0))};this.toggle=()=>{this.disabled||(this.openedViaFocus=!1,this.open=!this.open,this.dispatchEvent(new s))};this.handleBeforeMatch=()=>{this.open=!0,this.dispatchEvent(new s)};this.handleHeaderKeydown=e=>{if(e.key!=="Tab"||e.shiftKey||this.open||!this.panelContentEl)return;let[o]=x(this.panelContentEl,{requireRendered:!1});o&&(e.preventDefault(),this.openedViaFocus=!0,this.open=!0,this.dispatchEvent(new s),this.updateComplete.then(()=>o.focus()))};this.handleFocusOut=e=>{!this.openedViaFocus||e.relatedTarget instanceof Node&&this.contains(e.relatedTarget)||(this.openedViaFocus=!1,this.open=!1,this.dispatchEvent(new s))}}connectedCallback(){super.connectedCallback(),this.addEventListener("focusout",this.handleFocusOut)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusout",this.handleFocusOut),this.panelEl?.removeEventListener("transitionend",this.handlePanelTransitionEnd)}willUpdate(e){if(!e.has("open")&&!e.has("disabled")){this.deferPanelHidden=!1;return}let o=e.get("open");if(!(!this.open&&!this.disabled&&h)){this.panelHidden=!1,this.deferPanelHidden=!1;return}let u=o===!0&&!this.open,_=window.matchMedia("(prefers-reduced-motion: reduce)").matches;if(!u||_){this.panelHidden=!0,this.deferPanelHidden=!1;return}this.deferPanelHidden=!0}updated(e){super.updated(e),e.has("open")&&!this.open&&document.activeElement&&this.contains(document.activeElement)&&this.headerEl?.focus(),this.deferPanelHidden&&this.panelEl?.addEventListener("transitionend",this.handlePanelTransitionEnd)}renderHeadingWrapper(e){switch(this.level){case 2:return a`<h2>${e}</h2>`;case 3:return a`<h3>${e}</h3>`;case 4:return a`<h4>${e}</h4>`;case 5:return a`<h5>${e}</h5>`;case 6:return a`<h6>${e}</h6>`;default:return e}}renderTag(){let e=[...this.querySelectorAll(':scope > [slot="tag"]')],o=e.some(u=>u.localName.includes("-")),p=a`<slot name="tag" @slotchange=${this.handleSlotChange}
       >${this.tag}</slot
-    >`;return a?p:!this.tag&&!e.length?r`<slot
+    >`;return o?p:!this.tag&&!e.length?a`<slot
         name="tag"
         class="hidden"
         @slotchange=${this.handleSlotChange}
-      ></slot>`:r`<eun-tag color="primary" size="s" rounded>${p}</eun-tag>`}render(){let e=r`
+      ></slot>`:a`<eun-tag color="primary" size="s" rounded>${p}</eun-tag>`}render(){let e=a`
       <button
         type="button"
         id="header"
@@ -236,7 +265,7 @@ import{a as y}from"./chunks/chunk-UDOZRIJZ.js";import{b as u}from"./chunks/chunk
             class=${c({hidden:!this.icon&&!this.iconSlotEls.length})}
             @slotchange=${this.handleSlotChange}
           >
-            ${this.icon?r`<eun-icon name=${this.icon} size="20"></eun-icon>`:i}
+            ${this.icon?a`<eun-icon name=${this.icon} size="20"></eun-icon>`:i}
           </slot>
           <span id="heading-group">
             <span id="heading"
@@ -255,7 +284,7 @@ import{a as y}from"./chunks/chunk-UDOZRIJZ.js";import{b as u}from"./chunks/chunk
           ${this.renderTag()}
           <span id="chevron">
             <slot name="chevron" @slotchange=${this.handleSlotChange}>
-              ${this.chevronSlotEls.length?i:r`<eun-icon
+              ${this.chevronSlotEls.length?i:a`<eun-icon
                     name=${this.chevronIcon}
                     size="20"
                   ></eun-icon>`}
@@ -263,18 +292,18 @@ import{a as y}from"./chunks/chunk-UDOZRIJZ.js";import{b as u}from"./chunks/chunk
           </span>
         </span>
       </button>
-    `;return r`
+    `;return a`
       <div id="wrapper" class=${c({open:this.open})}>
         ${this.renderHeadingWrapper(e)}
         <div
           id="panel"
-          ?inert=${!this.open&&(this.disabled||!u)}
+          ?inert=${!this.open&&(this.disabled||!h)}
           hidden=${this.panelHidden?"until-found":i}
           @beforematch=${this.handleBeforeMatch}
         >
           <div id="panel-inner">
             <div id="panel-content">
-              ${this.richText?r`<div id="rich-text">
+              ${this.richText?a`<div id="rich-text">
                     ${m(this.richText)}
                   </div>`:i}
               <slot></slot>
@@ -282,4 +311,4 @@ import{a as y}from"./chunks/chunk-UDOZRIJZ.js";import{b as u}from"./chunks/chunk
           </div>
         </div>
       </div>
-    `}};n.styles=[x],t([o()],n.prototype,"heading",2),t([o()],n.prototype,"subheading",2),t([o({type:Number})],n.prototype,"level",2),t([o()],n.prototype,"icon",2),t([o()],n.prototype,"tag",2),t([o({attribute:"chevron-icon"})],n.prototype,"chevronIcon",2),t([o({attribute:"rich-text"})],n.prototype,"richText",2),t([o({type:Boolean,reflect:!0})],n.prototype,"open",2),t([o({type:Boolean,reflect:!0})],n.prototype,"disabled",2),t([o({type:Boolean,reflect:!0})],n.prototype,"independent",2),t([l("#header")],n.prototype,"headerEl",2),t([l("#panel-content")],n.prototype,"panelContentEl",2),t([l("#panel")],n.prototype,"panelEl",2),t([g()],n.prototype,"panelHidden",2),t([d({slot:"icon"})],n.prototype,"iconSlotEls",2),t([d({slot:"subheading"})],n.prototype,"subheadingSlotEls",2),t([d({slot:"chevron"})],n.prototype,"chevronSlotEls",2),n=t([v(w)],n);export{n as EunomiaCollapse,w as EunomiaCollapseTagName};
+    `}};n.styles=[y],t([r()],n.prototype,"heading",2),t([r()],n.prototype,"subheading",2),t([r({type:Number})],n.prototype,"level",2),t([r()],n.prototype,"icon",2),t([r()],n.prototype,"tag",2),t([r({attribute:"chevron-icon"})],n.prototype,"chevronIcon",2),t([r({attribute:"rich-text"})],n.prototype,"richText",2),t([r({type:Boolean,reflect:!0})],n.prototype,"open",2),t([r({type:Boolean,reflect:!0})],n.prototype,"disabled",2),t([r({type:Boolean,reflect:!0})],n.prototype,"independent",2),t([l("#header")],n.prototype,"headerEl",2),t([l("#panel-content")],n.prototype,"panelContentEl",2),t([l("#panel")],n.prototype,"panelEl",2),t([f()],n.prototype,"panelHidden",2),t([d({slot:"icon"})],n.prototype,"iconSlotEls",2),t([d({slot:"subheading"})],n.prototype,"subheadingSlotEls",2),t([d({slot:"chevron"})],n.prototype,"chevronSlotEls",2),n=t([v(k)],n);export{n as EunomiaCollapse,k as EunomiaCollapseTagName};

package/dist/cdn/components/eun-color-picker.js

@@ -1,4 +1,4 @@
-import{a as P}from"./chunks/chunk-KBH5PCUO.js";import{a as _}from"./chunks/chunk-E4IS25H7.js";import{a as N,b as V}from"./chunks/chunk-5XJGYXW7.js";import{a as k,b as H}from"./chunks/chunk-T4PTHUYF.js";import{a as S}from"./chunks/chunk-LK5BJ4SH.js";import{a as z}from"./chunks/chunk-L65WUTXM.js";import{a as x}from"./chunks/chunk-LYYQAALT.js";import{a as B}from"./chunks/chunk-LFCXUVDO.js";import{a as F}from"./chunks/chunk-GW3VP2L7.js";import{a as O,c as D,d as R,e as y}from"./chunks/chunk-OAULRKHQ.js";import{a as C}from"./chunks/chunk-YYCEPZUN.js";import{a as M}from"./chunks/chunk-32DTNR52.js";import{a as c}from"./chunks/chunk-A4EQSU36.js";import{a as b,b as I,c as T}from"./chunks/chunk-SGM2X2TC.js";import{a as h}from"./chunks/chunk-5EVP7YNE.js";import{a as s,f as $,g as L,h as p,i as g,j as m,k as E,n as d,o as v,p as l,s as A}from"./chunks/chunk-XH6NREVZ.js";var f=I(class extends T{constructor(n){if(super(n),n.type!==b.PROPERTY&&n.type!==b.ATTRIBUTE&&n.type!==b.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!k(n))throw Error("`live` bindings can only contain a single expression")}render(n){return n}update(n,[o]){if(o===v||o===l)return o;let e=n.element,t=n.name;if(n.type===b.PROPERTY){if(o===e[t])return v}else if(n.type===b.BOOLEAN_ATTRIBUTE){if(!!o===e.hasAttribute(t))return v}else if(n.type===b.ATTRIBUTE&&e.getAttribute(t)===o+"")return v;return H(n),o}});var U=L`
+import{a as V}from"./chunks/chunk-GWLD2I3P.js";import{a as u}from"./chunks/chunk-B5XMGWM7.js";import{a as H}from"./chunks/chunk-UVHVQRPT.js";import{a as z,b as B}from"./chunks/chunk-LVKMAHMU.js";import"./chunks/chunk-VJCNHMQZ.js";import{a as R}from"./chunks/chunk-LK5BJ4SH.js";import{a as S}from"./chunks/chunk-UYZR4JXZ.js";import{b as K,c as g}from"./chunks/chunk-624VJYNA.js";import{a as x}from"./chunks/chunk-LYYQAALT.js";import{a as _}from"./chunks/chunk-GVS6IUKC.js";import{a as O}from"./chunks/chunk-BO3JOEWM.js";import{c as D,d as T,e as k,f as m}from"./chunks/chunk-TLBXTBMM.js";import{a as F}from"./chunks/chunk-YYCEPZUN.js";import{a as C}from"./chunks/chunk-3BMACIDO.js";import{a as d}from"./chunks/chunk-PPCHQG7P.js";import{a as p}from"./chunks/chunk-O7PHBLH2.js";import"./chunks/chunk-SGM2X2TC.js";import{a as M}from"./chunks/chunk-62RLISRD.js";import"./chunks/chunk-QL5GSW2A.js";import{a,f as L,h as I,j as l,k as v,l as f,m as E,p as n,r as o,u as A}from"./chunks/chunk-YITWLCD3.js";var W=I`
   button#field {
     flex: 1 1 auto;
     display: flex;
@@ -37,7 +37,8 @@ import{a as P}from"./chunks/chunk-KBH5PCUO.js";import{a as _}from"./chunks/chunk
     flex: 0 0 auto;
     color: var(--_iconColor);
     font-size: var(--eun-font-size-s, 14px);
-    transition: transform 0.15s ease;
+    transition: transform var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   #field-arrow.open {
     transform: rotate(180deg);
@@ -52,8 +53,8 @@ import{a as P}from"./chunks/chunk-KBH5PCUO.js";import{a as _}from"./chunks/chunk
     background-color: var(--_swatchColor, transparent);
     outline: 2px solid transparent;
     transition:
-      outline 0.2s ease-out,
-      border 0.2s ease-out;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
   .swatch.empty {
     background-image: conic-gradient(
@@ -93,10 +94,10 @@ import{a as P}from"./chunks/chunk-KBH5PCUO.js";import{a as _}from"./chunks/chunk
     --_swatchColor: var(--_optionColor);
     outline: 2px solid transparent;
     transition:
-      outline 0.2s ease-out,
-      border 0.2s ease-out;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
-  .swatch-button[aria-checked="true"] .swatch {
+  .swatch-button[aria-selected="true"] .swatch {
     border-color: var(--eun-color-primary-500, #3d6fff);
     border-width: calc(var(--eun-border-width-m, 1.5px) * 2);
   }
@@ -193,7 +194,7 @@ import{a as P}from"./chunks/chunk-KBH5PCUO.js";import{a as _}from"./chunks/chunk
     outline: 2px solid var(--_focusIndicator);
     outline-offset: 2px;
   }
-`,K=[z,N,...x?[]:[V],U];function w(n){let o=n.trim();if(!o)return null;if(/^#[0-9a-f]{6}$/i.test(o))return o.toLowerCase();if(/^#[0-9a-f]{3}$/i.test(o)){let[i,r,u]=o.slice(1);return`#${i}${i}${r}${r}${u}${u}`.toLowerCase()}let e=o.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/i);if(!e)return null;let t=i=>Math.min(255,Math.max(0,Math.round(Number(i)))).toString(16).padStart(2,"0");return`#${t(e[1])}${t(e[2])}${t(e[3])}`}var Y="eun-color-picker",j=M(R(A)),G=S(B(F(O(_(D(j)))))),a=class extends G{constructor(){super(...arguments);this.emptyValueLabel="No color selected";this.swatchesLabel="Presets";this.customLabel="Custom";this.nativeInputLabel="Pick a custom color";this.hexInputLabel="Hex color";this.confirmLabel="Confirm";this.cancelLabel="Cancel";this.noAnimation=!1;this.swatchOnly=!1;this.presetsOnly=!1;this.presetsInline=!1;this.isOpen=!1;this.hexDraft="";this.handlePopoverToggle=e=>{if(e.newState==="open"){this.isOpen=!0,this.fieldWrapperEl&&this.listboxEl&&this.anchorFloatingElement(this.fieldWrapperEl,this.listboxEl,{forceFallback:x}),this.observeAnchorVisibility(this.fieldWrapperEl,()=>this.closeListbox());return}this.isOpen=!1,this.unanchorFloatingElement(),this.unobserveAnchorVisibility()};this.handleWindowBlur=()=>{this.isOpen&&this.closeListbox()};this.handleFocusOut=()=>{this.isOpen&&requestAnimationFrame(()=>{document.activeElement!==this&&this.closeListbox()})};this.handleConfirmClick=()=>{this.closeListbox(),this.confirmEdit()};this.handleCancelClick=()=>{this.closeListbox(),this.cancelEdit()}}get defaultValue(){return super.defaultValue}set defaultValue(e){let t=Array.isArray(e)?e[0]:e;super.defaultValue=t}get presets(){return P(this.children)}get hexDraftInvalid(){return this.hexDraft!==""&&w(this.hexDraft)===null}get triggerAccessibleLabel(){return this.label?this.label:this.ariaLabel?this.ariaLabel:this.swatchOnly?this.value||this.emptyValueLabel:void 0}connectedCallback(){super.connectedCallback?.(),window.addEventListener("blur",this.handleWindowBlur)}disconnectedCallback(){window.removeEventListener("blur",this.handleWindowBlur),super.disconnectedCallback?.()}willUpdate(e){super.willUpdate(e),e.has("value")&&!this.isOpen&&(this.hexDraft=this.value??"")}getFocusAnchor(){return this.fieldEl??void 0}focus(){super.focus?.(),this.fieldEl?.focus()}openListbox(){if(this.disabled||this.readonly)return;this.hexDraft=this.value??"";let e=this.listboxEl;this.listboxAnimation?.cancel(),this.listboxAnimation=void 0,e?.matches(":popover-open")||e?.showPopover(),e&&this.playListboxOpenAnimation(e)}listboxAnimationDuration(e){if(this.noAnimation||window.matchMedia("(prefers-reduced-motion: reduce)").matches)return 0;let t=getComputedStyle(e).getPropertyValue("--field-listbox-transition-duration").trim();if(t){let i=t.endsWith("ms")?Number.parseFloat(t):Number.parseFloat(t)*1e3;if(Number.isFinite(i)&&i>=0)return i}return 200}playListboxOpenAnimation(e){e.style.removeProperty("pointer-events");let t=this.listboxAnimationDuration(e);t!==0&&(this.listboxAnimation=e.animate([{opacity:0,transform:"scaleY(0.01)"},{opacity:1,transform:"scaleY(1)"}],{duration:t,easing:"ease",fill:"forwards"}))}closeListbox(){let e=this.listboxEl;this.listboxAnimation?.cancel(),this.listboxAnimation=void 0,e?.matches(":popover-open")&&this.playListboxCloseAnimation(e)}playListboxCloseAnimation(e){e.style.pointerEvents="none";let t=this.listboxAnimationDuration(e);if(t===0){e.hidePopover();return}let i=e.animate([{opacity:1,transform:"scaleY(1)"},{opacity:0,transform:"scaleY(0.01)"}],{duration:t,easing:"ease",fill:"forwards"});this.listboxAnimation=i,i.finished.then(()=>{this.listboxAnimation===i&&(this.listboxAnimation=void 0),e.hidePopover()}).catch(()=>{})}handleFieldActivate(){this.isOpen||this.openListbox()}handleFieldKeydown(e){e.key==="ArrowDown"&&!this.isOpen&&(e.preventDefault(),this.openListbox())}handleSelect(e){this.value=e,this.hexDraft=e,this.dispatchEvent(new C(this.value)),this.closeListbox()}handlePresetKeydown(e,t){let i=this.presets,r;switch(e.key){case"ArrowRight":case"ArrowDown":r=(t+1)%i.length;break;case"ArrowLeft":case"ArrowUp":r=(t-1+i.length)%i.length;break;case"Home":r=0;break;case"End":r=i.length-1;break;default:return}e.preventDefault(),this.presetButtonEls[r]?.focus()}handleNativeInput(e){this.handleSelect(e.target.value)}handleHexInput(e){this.hexDraft=e.target.value}handleHexCommit(){let e=w(this.hexDraft);e?this.handleSelect(e):this.hexDraft=this.value??""}handleSlotChange(){this.requestUpdate()}renderEditActions(){return d`
+`,N=[S,z,...x?[]:[B],W];function w($){let c=$.trim();if(!c)return null;if(/^#[0-9a-f]{6}$/i.test(c))return c.toLowerCase();if(/^#[0-9a-f]{3}$/i.test(c)){let[r,s,h]=c.slice(1);return`#${r}${r}${s}${s}${h}${h}`.toLowerCase()}let e=c.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/i);if(!e)return null;let i=r=>Math.min(255,Math.max(0,Math.round(Number(r)))).toString(16).padStart(2,"0");return`#${i(e[1])}${i(e[2])}${i(e[3])}`}var q="eun-color-picker",U=C(k(A)),Y=M(R(_(O(T(H(D(U))))))),t=class extends Y{constructor(){super(...arguments);this.swatchesLabel="Presets";this.customLabel="Custom";this.nativeInputLabel="Pick a custom color";this.hexInputLabel="Hex color";this.noAnimation=!1;this.swatchOnly=!1;this.presetsOnly=!1;this.presetsInline=!1;this.isOpen=!1;this.hexDraft="";this.presetFocusIndex=-1;this.handlePopoverToggle=e=>{if(e.newState==="open"){this.isOpen=!0,this.fieldWrapperEl&&this.listboxEl&&this.anchorFloatingElement(this.fieldWrapperEl,this.listboxEl,{forceFallback:x}),this.observeAnchorVisibility(this.fieldWrapperEl,()=>this.closeListbox());return}this.isOpen=!1,this.unanchorFloatingElement(),this.unobserveAnchorVisibility()};this.handleWindowBlur=()=>{this.isOpen&&this.closeListbox()};this.handleFocusOut=()=>{this.isOpen&&requestAnimationFrame(()=>{document.activeElement!==this&&this.closeListbox()})};this.handleConfirmClick=()=>{this.closeListbox(),this.confirmEdit()};this.handleCancelClick=()=>{this.closeListbox(),this.cancelEdit()}}get defaultValue(){return super.defaultValue}set defaultValue(e){let i=Array.isArray(e)?e[0]:e;super.defaultValue=i}get presets(){return V(this.children)}get hexDraftInvalid(){return this.hexDraft!==""&&w(this.hexDraft)===null}get triggerAccessibleLabel(){return this.label?this.label:this.ariaLabel?this.ariaLabel:this.swatchOnly?this.value||(this.emptyValueLabel??this.dictionary.colorPicker.noColor):void 0}connectedCallback(){super.connectedCallback?.(),window.addEventListener("blur",this.handleWindowBlur)}disconnectedCallback(){window.removeEventListener("blur",this.handleWindowBlur),super.disconnectedCallback?.()}willUpdate(e){super.willUpdate(e),e.has("value")&&!this.isOpen&&(this.hexDraft=this.value??"")}get hostTabStop(){return!1}getFocusAnchor(){return this.fieldEl??void 0}focus(){super.focus?.(),this.fieldEl?.focus()}openListbox(){if(this.disabled||this.readonly)return;this.hexDraft=this.value??"";let e=this.listboxEl;this.listboxAnimation?.cancel(),this.listboxAnimation=void 0,e?.matches(":popover-open")||e?.showPopover(),e&&this.playListboxOpenAnimation(e)}listboxAnimationDuration(e){return this.noAnimation||window.matchMedia("(prefers-reduced-motion: reduce)").matches?0:K(e,"--field-listbox-transition-duration","m",200)}playListboxOpenAnimation(e){e.style.removeProperty("pointer-events");let i=this.listboxAnimationDuration(e);i!==0&&(this.listboxAnimation=e.animate([{opacity:0,transform:"scaleY(0.01)"},{opacity:1,transform:"scaleY(1)"}],{duration:i,easing:g(e),fill:"forwards"}))}closeListbox(){let e=this.listboxEl;this.listboxAnimation?.cancel(),this.listboxAnimation=void 0,e?.matches(":popover-open")&&this.playListboxCloseAnimation(e)}playListboxCloseAnimation(e){e.style.pointerEvents="none";let i=this.listboxAnimationDuration(e);if(i===0){e.hidePopover();return}let r=e.animate([{opacity:1,transform:"scaleY(1)"},{opacity:0,transform:"scaleY(0.01)"}],{duration:i,easing:g(e),fill:"forwards"});this.listboxAnimation=r,r.finished.then(()=>{this.listboxAnimation===r&&(this.listboxAnimation=void 0),e.hidePopover()}).catch(()=>{})}handleFieldActivate(){this.isOpen||this.openListbox()}handleFieldKeydown(e){e.key==="ArrowDown"&&!this.isOpen&&(e.preventDefault(),this.openListbox())}handleSelect(e){this.presetFocusIndex=-1,this.value=e,this.hexDraft=e,this.dispatchEvent(new F(this.value)),this.closeListbox()}handlePresetKeydown(e,i){let r=this.presets,s;switch(e.key){case"ArrowRight":case"ArrowDown":s=(i+1)%r.length;break;case"ArrowLeft":case"ArrowUp":s=(i-1+r.length)%r.length;break;case"Home":s=0;break;case"End":s=r.length-1;break;default:return}e.preventDefault(),this.presetFocusIndex=s,this.presetButtonEls[s]?.focus()}handleNativeInput(e){this.handleSelect(e.target.value)}handleHexInput(e){this.hexDraft=e.target.value}handleHexCommit(){let e=w(this.hexDraft);e?this.handleSelect(e):this.hexDraft=this.value??""}handleSlotChange(){this.requestUpdate()}renderEditActions(){return n`
       <div id="edit-actions">
         <eun-button
           class="confirm"
@@ -203,7 +204,7 @@ import{a as P}from"./chunks/chunk-KBH5PCUO.js";import{a as _}from"./chunks/chunk
           rounded
           type="button"
           @click=${this.handleConfirmClick}
-          >${this.confirmLabel}</eun-button
+          >${this.confirmLabel??this.dictionary.common.confirm}</eun-button
         >
         <eun-button
           class="cancel"
@@ -212,91 +213,91 @@ import{a as P}from"./chunks/chunk-KBH5PCUO.js";import{a as _}from"./chunks/chunk
           rounded
           type="button"
           @click=${this.handleCancelClick}
-          >${this.cancelLabel}</eun-button
+          >${this.cancelLabel??this.dictionary.common.cancel}</eun-button
         >
       </div>
-    `}renderReadonlyDisplay(){return d`
+    `}renderReadonlyDisplay(){return n`
       <div
         id="readonly-display"
         role="button"
         tabindex="0"
-        aria-label=${h(this.triggerAccessibleLabel)}
+        aria-label=${d(this.triggerAccessibleLabel)}
         @click=${this.startEdit}
         @keydown=${e=>(e.key==="Enter"||e.key===" ")&&this.startEdit()}
       >
         <span
-          class=${c({swatch:!0,empty:!this.value})}
-          style="--_swatchColor: ${h(this.value)}"
+          class=${p({swatch:!0,empty:!this.value})}
+          style="--_swatchColor: ${d(this.value)}"
         ></span>
-        ${this.swatchOnly?l:d`
-              <span class=${c({empty:!this.value})}
-                >${this.value||this.emptyValueLabel}</span
+        ${this.swatchOnly?o:n`
+              <span class=${p({empty:!this.value})}
+                >${this.value||(this.emptyValueLabel??this.dictionary.colorPicker.noColor)}</span
               >
             `}
       </div>
-    `}renderPresets(e){return d`
+    `}renderPresets(e){return n`
       <div>
         <span id="swatches-label">${this.swatchesLabel}</span>
-        ${this.renderSwatchRadiogroup(e,this.swatchesLabel,!1)}
+        ${this.renderSwatchListbox(e,this.swatchesLabel,!1)}
       </div>
-    `}renderSwatchRadiogroup(e,t,i){return d`
+    `}renderSwatchListbox(e,i,r){let s=e.findIndex(b=>b.value===this.value),h=this.presetFocusIndex>=0&&this.presetFocusIndex<e.length?this.presetFocusIndex:Math.max(s,0);return n`
       <div
         id="swatches"
-        role="radiogroup"
-        aria-label=${h(t)}
-        aria-describedby=${i?"description":l}
+        role="listbox"
+        aria-label=${d(i)}
+        aria-describedby=${r?"description":o}
       >
-        ${e.map((r,u)=>{let W=this.value===r.value;return d`
+        ${e.map((b,y)=>n`
             <button
               type="button"
               class="swatch-button"
-              role="radio"
-              aria-checked=${W?"true":"false"}
-              aria-label=${r.label}
-              tabindex="0"
-              style="--_optionColor: ${r.value}"
-              @click=${()=>this.handleSelect(r.value)}
-              @keydown=${q=>this.handlePresetKeydown(q,u)}
+              role="option"
+              aria-selected=${y===s?"true":"false"}
+              aria-label=${b.label}
+              tabindex=${y===h?"0":"-1"}
+              style="--_optionColor: ${b.value}"
+              @click=${()=>this.handleSelect(b.value)}
+              @keydown=${P=>this.handlePresetKeydown(P,y)}
             >
               <span class="swatch"></span>
             </button>
-          `})}
+          `)}
       </div>
-    `}renderHexRow(){return d`
+    `}renderHexRow(){return n`
       <div>
         <span id="custom-label">${this.customLabel}</span>
         <input
           type="text"
           id="hex-input"
           aria-label=${this.hexInputLabel}
-          aria-invalid=${!this.hideError&&!this.disabled&&this.hexDraftInvalid}
+          aria-invalid=${!this.hideError&&!this.disabled&&this.hexDraftInvalid||this.showError}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
-          .value=${f(this.hexDraft)}
+          .value=${u(this.hexDraft)}
           @input=${this.handleHexInput}
           @change=${this.handleHexCommit}
           @keydown=${e=>{e.key==="Enter"&&(e.preventDefault(),this.handleHexCommit())}}
         />
       </div>
-    `}renderInlinePresetsField(e){return d`
+    `}renderInlinePresetsField(e){return n`
       <div id="field-wrapper">
-        ${this.renderSwatchRadiogroup(this.presets,this.triggerAccessibleLabel,e)}
+        ${this.renderSwatchListbox(this.presets,this.triggerAccessibleLabel,e)}
       </div>
-      ${this.readonlyAvailable?this.renderEditActions():l}
-    `}renderInlineCustomField(e){return d`
+      ${this.readonlyAvailable?this.renderEditActions():o}
+    `}renderInlineCustomField(e){return n`
       <div id="field-wrapper">
         <div id="custom-row">
           <label id="native-swatch">
             <span
-              class=${c({swatch:!0,empty:!this.value})}
-              style="--_swatchColor: ${h(this.value)}"
+              class=${p({swatch:!0,empty:!this.value})}
+              style="--_swatchColor: ${d(this.value)}"
             ></span>
             <input
               type="color"
               id="native-input"
               aria-label=${this.nativeInputLabel}
               ?disabled=${this.disabled||this.readonly}
-              .value=${f(this.value||"#000000")}
+              .value=${u(this.value||"#000000")}
               @input=${this.handleNativeInput}
             />
           </label>
@@ -304,33 +305,33 @@ import{a as P}from"./chunks/chunk-KBH5PCUO.js";import{a as _}from"./chunks/chunk
             type="text"
             id="field"
             aria-label=${this.label||this.hexInputLabel}
-            aria-describedby=${e?"description":l}
+            aria-describedby=${e?"description":o}
             aria-required=${this.required?"true":"false"}
-            aria-invalid=${!this.hideError&&!this.disabled&&(this.hexDraftInvalid||!this.valid)}
+            aria-invalid=${!this.hideError&&!this.disabled&&this.hexDraftInvalid||this.showError}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
-            .value=${f(this.hexDraft)}
+            .value=${u(this.hexDraft)}
             @input=${this.handleHexInput}
             @change=${this.handleHexCommit}
-            @keydown=${t=>{t.key==="Enter"&&(t.preventDefault(),this.handleHexCommit())}}
+            @keydown=${i=>{i.key==="Enter"&&(i.preventDefault(),this.handleHexCommit())}}
           />
         </div>
       </div>
-      ${this.readonlyAvailable?this.renderEditActions():l}
-    `}renderField(e){return d`
+      ${this.readonlyAvailable?this.renderEditActions():o}
+    `}renderField(e){return n`
       <div id="field-wrapper">
-        ${this.presetsOnly?l:d`
+        ${this.presetsOnly?o:n`
               <label id="native-swatch">
                 <span
-                  class=${c({swatch:!0,empty:!this.value})}
-                  style="--_swatchColor: ${h(this.value)}"
+                  class=${p({swatch:!0,empty:!this.value})}
+                  style="--_swatchColor: ${d(this.value)}"
                 ></span>
                 <input
                   type="color"
                   id="native-input"
                   aria-label=${this.nativeInputLabel}
                   ?disabled=${this.disabled||this.readonly}
-                  .value=${f(this.value||"#000000")}
+                  .value=${u(this.value||"#000000")}
                   @input=${this.handleNativeInput}
                 />
               </label>
@@ -338,78 +339,70 @@ import{a as P}from"./chunks/chunk-KBH5PCUO.js";import{a as _}from"./chunks/chunk
         <button
           type="button"
           id="field"
-          aria-haspopup="true"
+          aria-haspopup="dialog"
           aria-expanded=${this.isOpen}
-          aria-label=${h(this.triggerAccessibleLabel)}
-          aria-describedby=${e?"description":l}
+          aria-label=${d(this.triggerAccessibleLabel)}
+          aria-describedby=${e?"description":o}
           ?disabled=${this.disabled}
           aria-required=${this.required?"true":"false"}
-          aria-invalid=${!this.hideError&&!this.disabled&&!this.valid}
+          aria-invalid=${this.showError}
           @click=${this.handleFieldActivate}
           @keydown=${this.handleFieldKeydown}
         >
-          ${this.presetsOnly?d`
+          ${this.presetsOnly?n`
                 <span
                   id="trigger-swatch"
-                  class=${c({swatch:!0,empty:!this.value})}
-                  style="--_swatchColor: ${h(this.value)}"
+                  class=${p({swatch:!0,empty:!this.value})}
+                  style="--_swatchColor: ${d(this.value)}"
                 ></span>
-              `:l}
-          <span id="value-text" class=${c({empty:!this.value})}>
-            ${this.value||this.emptyValueLabel}
+              `:o}
+          <span id="value-text" class=${p({empty:!this.value})}>
+            ${this.value||(this.emptyValueLabel??this.dictionary.colorPicker.noColor)}
           </span>
           <span
             id="field-arrow"
-            class=${c({open:this.isOpen})}
+            class=${p({open:this.isOpen})}
             aria-hidden="true"
             >▾</span
           >
         </button>
       </div>
-      ${this.readonlyAvailable?this.renderEditActions():l}
+      ${this.readonlyAvailable?this.renderEditActions():o}
       <div
         id="listbox"
+        role="dialog"
         popover="auto"
-        aria-label=${h(this.label)}
+        aria-label=${d(this.label)}
         @toggle=${this.handlePopoverToggle}
       >
         ${this.renderPresets(this.presets)}
-        ${this.presetsOnly?l:this.renderHexRow()}
+        ${this.presetsOnly?o:this.renderHexRow()}
       </div>
-    `}renderSwatchOnlyField(e){return d`
+    `}renderSwatchOnlyField(e){return n`
       <div id="field-wrapper">
         <label id="swatch-only-trigger">
           <span
             id="trigger-swatch"
-            class=${c({swatch:!0,empty:!this.value})}
-            style="--_swatchColor: ${h(this.value)}"
+            class=${p({swatch:!0,empty:!this.value})}
+            style="--_swatchColor: ${d(this.value)}"
           ></span>
           <input
             type="color"
             id="field"
-            aria-label=${h(this.triggerAccessibleLabel)}
-            aria-describedby=${e?"description":l}
+            aria-label=${d(this.triggerAccessibleLabel)}
+            aria-describedby=${e?"description":o}
             ?disabled=${this.disabled||this.readonly}
-            aria-invalid=${!this.hideError&&!this.disabled&&!this.valid}
-            .value=${f(this.value||"#000000")}
+            aria-invalid=${this.showError}
+            .value=${u(this.value||"#000000")}
             @input=${this.handleNativeInput}
           />
         </label>
       </div>
-      ${this.readonlyAvailable?this.renderEditActions():l}
-    `}render(){let e=this.readonlyAvailable&&!this.editing,t=this.renderDescription(),i=t!==l,r,u=this.presets.length>0;return e?r=this.renderReadonlyDisplay():this.swatchOnly?r=this.renderSwatchOnlyField(i):this.presetsInline&&u?r=this.renderInlinePresetsField(i):u?r=this.renderField(i):r=this.renderInlineCustomField(i),d`
+      ${this.readonlyAvailable?this.renderEditActions():o}
+    `}render(){let e=this.readonlyAvailable&&!this.editing,i=this.renderDescription(),r=i!==o,s,h=this.presets.length>0;return e?s=this.renderReadonlyDisplay():this.swatchOnly?s=this.renderSwatchOnlyField(r):this.presetsInline&&h?s=this.renderInlinePresetsField(r):h?s=this.renderField(r):s=this.renderInlineCustomField(r),n`
       <div id="wrapper" @focusout=${this.handleFocusOut}>
         ${this.renderFormLabels(e?void 0:"field")}
-        ${r} ${t}
+        ${s} ${i}
         <slot hidden @slotchange=${this.handleSlotChange}></slot>
       </div>
-    `}};a.styles=[K,y.base,y.errorMessages,y.hintMessages],s([p({attribute:"default-value"})],a.prototype,"defaultValue",1),s([p({attribute:"empty-value-label"})],a.prototype,"emptyValueLabel",2),s([p({attribute:"swatches-label"})],a.prototype,"swatchesLabel",2),s([p({attribute:"custom-label"})],a.prototype,"customLabel",2),s([p({attribute:"native-input-label"})],a.prototype,"nativeInputLabel",2),s([p({attribute:"hex-input-label"})],a.prototype,"hexInputLabel",2),s([p({attribute:"confirm-label"})],a.prototype,"confirmLabel",2),s([p({attribute:"cancel-label"})],a.prototype,"cancelLabel",2),s([p({type:Boolean,reflect:!0,attribute:"no-animation"})],a.prototype,"noAnimation",2),s([p({type:Boolean,reflect:!0,attribute:"swatch-only"})],a.prototype,"swatchOnly",2),s([p({type:Boolean,reflect:!0,attribute:"presets-only"})],a.prototype,"presetsOnly",2),s([p({type:Boolean,reflect:!0,attribute:"presets-inline"})],a.prototype,"presetsInline",2),s([g()],a.prototype,"isOpen",2),s([g()],a.prototype,"hexDraft",2),s([m("#field")],a.prototype,"fieldEl",2),s([m("#field-wrapper")],a.prototype,"fieldWrapperEl",2),s([m("#listbox")],a.prototype,"listboxEl",2),s([E(".swatch-button")],a.prototype,"presetButtonEls",2),a=s([$(Y)],a);export{a as EunomiaColorPicker,Y as EunomiaColorPickerTagName};
-/*! Bundled license information:
-
-lit-html/directives/live.js:
-  (**
-   * @license
-   * Copyright 2020 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-*/
+    `}};t.styles=[N,m.base,m.errorMessages,m.hintMessages],a([l({attribute:"default-value"})],t.prototype,"defaultValue",1),a([l({attribute:"empty-value-label"})],t.prototype,"emptyValueLabel",2),a([l({attribute:"swatches-label"})],t.prototype,"swatchesLabel",2),a([l({attribute:"custom-label"})],t.prototype,"customLabel",2),a([l({attribute:"native-input-label"})],t.prototype,"nativeInputLabel",2),a([l({attribute:"hex-input-label"})],t.prototype,"hexInputLabel",2),a([l({attribute:"confirm-label"})],t.prototype,"confirmLabel",2),a([l({attribute:"cancel-label"})],t.prototype,"cancelLabel",2),a([l({type:Boolean,reflect:!0,attribute:"no-animation"})],t.prototype,"noAnimation",2),a([l({type:Boolean,reflect:!0,attribute:"swatch-only"})],t.prototype,"swatchOnly",2),a([l({type:Boolean,reflect:!0,attribute:"presets-only"})],t.prototype,"presetsOnly",2),a([l({type:Boolean,reflect:!0,attribute:"presets-inline"})],t.prototype,"presetsInline",2),a([v()],t.prototype,"isOpen",2),a([v()],t.prototype,"hexDraft",2),a([v()],t.prototype,"presetFocusIndex",2),a([f("#field")],t.prototype,"fieldEl",2),a([f("#field-wrapper")],t.prototype,"fieldWrapperEl",2),a([f("#listbox")],t.prototype,"listboxEl",2),a([E(".swatch-button")],t.prototype,"presetButtonEls",2),t=a([L(q)],t);export{t as EunomiaColorPicker,q as EunomiaColorPickerTagName};