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

package/dist/cdn/components/eun-check-card.js

@@ -1,4 +1,4 @@
-import{a as u}from"./chunks/chunk-5GF2Q3NR.js";import{b as s}from"./chunks/chunk-EAGGN3ZI.js";import"./chunks/chunk-GU6BVMFJ.js";import{e as o}from"./chunks/chunk-KNM5QHDK.js";import"./chunks/chunk-YYCEPZUN.js";import"./chunks/chunk-T7WABJEJ.js";import{a as l}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as e,f as c,g as d,h as n,l as i,n as a,p as t}from"./chunks/chunk-XH6NREVZ.js";var v=d`
+import{a as u}from"./chunks/chunk-74AOAB4X.js";import{b as s}from"./chunks/chunk-2XASWWKR.js";import"./chunks/chunk-GU6BVMFJ.js";import{e as o}from"./chunks/chunk-OAULRKHQ.js";import"./chunks/chunk-YYCEPZUN.js";import"./chunks/chunk-32DTNR52.js";import{a as l}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as e,f as c,g as d,h as n,l as i,n as a,p as t}from"./chunks/chunk-XH6NREVZ.js";var v=d`
   :host {
     --_borderWidth: var(--check-card-border-width, 1px);
     --_borderColor: var(
@@ -27,7 +27,7 @@ import{a as u}from"./chunks/chunk-5GF2Q3NR.js";import{b as s}from"./chunks/chunk
     --_padding: var(--check-card-padding, var(--eun-space-m, 16px));
     --_borderRadius: var(
       --check-card-border-radius,
-      var(--eun-borderRadius-m, 10px)
+      var(--eun-border-radius-m, 10px)
     );
     --_indicatorBackground: transparent;
     --_indicatorBorder: var(--_borderColor);
@@ -111,7 +111,7 @@ import{a as u}from"./chunks/chunk-5GF2Q3NR.js";import{b as s}from"./chunks/chunk
     align-items: center;
     justify-content: center;
     border: 1px solid var(--_indicatorBorder);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     background: var(--_indicatorBackground);
     color: var(--_indicatorIcon);
     transition: all 0.15s ease;

package/dist/cdn/components/eun-checkbox-list.js

@@ -1,4 +1,4 @@
-import{a as g}from"./chunks/chunk-BQHYZB2W.js";import{a as b}from"./chunks/chunk-GW3VP2L7.js";import{a as f,c as m,d as v,e as o}from"./chunks/chunk-KNM5QHDK.js";import{a as u}from"./chunks/chunk-YYCEPZUN.js";import{a as p}from"./chunks/chunk-T7WABJEJ.js";import{a as c}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import"./chunks/chunk-5EVP7YNE.js";import{a as i,f as l,g as r,h as n,j as d,n as h,s as a}from"./chunks/chunk-XH6NREVZ.js";var x=r`
+import{a as g}from"./chunks/chunk-BQHYZB2W.js";import{a as b}from"./chunks/chunk-GW3VP2L7.js";import{a as f,c as m,d as v,e as o}from"./chunks/chunk-OAULRKHQ.js";import{a as u}from"./chunks/chunk-YYCEPZUN.js";import{a as p}from"./chunks/chunk-32DTNR52.js";import{a as c}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import"./chunks/chunk-5EVP7YNE.js";import{a as s,f as l,g as r,h as n,j as d,n as h,s as a}from"./chunks/chunk-XH6NREVZ.js";var x=r`
   :host {
     --_container-gap: var(--checkbox-list-gap, var(--eun-space-s, 8px));
     --_options-gap: var(--checkbox-list-options-gap, var(--eun-space-s, 8px));
@@ -7,7 +7,7 @@ import{a as g}from"./chunks/chunk-BQHYZB2W.js";import{a as b}from"./chunks/chunk
       var(--eun-color-critical-100, #aa0014)
     );
   }
-`,E=x;var k="eun-checkbox-list",y="eun-checkbox",C="eun-check-card",M=p(v(a)),s=class extends b(f(m(M))){constructor(){super(...arguments);this.inline=!1;this.handleChangeEvent=e=>{e.stopPropagation(),this.sendChangeEvent()}}get fields(){return Array.from(this.querySelectorAll(`:scope > ${y}, :scope > ${C}`))}get value(){return this.fields.filter(e=>e.checked).map(e=>e.valueState??e.value)}set value(e){this.updateComplete.then(()=>{this.fields.forEach(t=>{t.checked=e.includes(t.value)})})}firstUpdated(){if(this.optionsList?.addEventListener("eunchange",this.handleChangeEvent),this.defaultValue&&this.defaultValue.length>0){let e=this.defaultValue??[];this.fields.forEach(t=>{t.checked=e.includes(t.value)}),this.value=this.defaultValue,this.sendChangeEvent()}}disconnectedCallback(){this.optionsList?.removeEventListener("eunchange",this.handleChangeEvent),super.disconnectedCallback?.()}updated(e){super.updated(e),e.has("disabled")&&this.fields.forEach(t=>{t.disabled=this.disabled}),e.has("readonly")&&this.fields.forEach(t=>{t.readonly=this.readonly}),(e.has("valid")||e.has("hideError"))&&this.fields.forEach(t=>{t.valid=this.valid&&!this.hideError}),e.has("label")&&!this.hasAttribute("aria-label")&&this.setAttribute("aria-label",`${this.label}. ${this.instructions??""}`),e.has("name")&&this.fields.forEach(t=>{t.name=this.name})}getFocusAnchor(){return this.querySelector(`${y}, ${C}`)}focus(){super.focus?.(),this.fields[0]?.focus?.()}formResetCallback(){super.formResetCallback?.(),this.updateComplete.then(()=>{this.sendChangeEvent()})}sendChangeEvent(){this.checkValidity(this.value),this.dispatchEvent(new u(this.value))}handleSlotChange(){this.fields.forEach(e=>{e.name=this.name})}render(){return h`
+`,E=x;var k="eun-checkbox-list",y="eun-checkbox",C="eun-check-card",M=p(v(a)),i=class extends b(f(m(M))){constructor(){super(...arguments);this.inline=!1;this.handleChangeEvent=e=>{e.stopPropagation(),this.sendChangeEvent()}}get fields(){return Array.from(this.querySelectorAll(`:scope > ${y}, :scope > ${C}`))}get value(){return this.fields.filter(e=>e.checked).map(e=>e.valueState??e.value)}set value(e){this.updateComplete.then(()=>{this.fields.forEach(t=>{t.checked=e.includes(t.value)})})}firstUpdated(){if(this.optionsList?.addEventListener("eunchange",this.handleChangeEvent),this.defaultValue&&this.defaultValue.length>0){let e=this.defaultValue??[];this.fields.forEach(t=>{t.checked=e.includes(t.value)}),this.value=this.defaultValue,this.sendChangeEvent()}}disconnectedCallback(){this.optionsList?.removeEventListener("eunchange",this.handleChangeEvent),super.disconnectedCallback?.()}updated(e){super.updated(e),e.has("disabled")&&this.fields.forEach(t=>{t.disabled=this.disabled}),e.has("readonly")&&this.fields.forEach(t=>{t.readonly=this.readonly}),(e.has("valid")||e.has("hideError"))&&this.fields.forEach(t=>{t.valid=this.valid&&!this.hideError}),e.has("label")&&!this.hasAttribute("aria-label")&&this.setAttribute("aria-label",`${this.label}. ${this.instructions??""}`),e.has("name")&&this.fields.forEach(t=>{t.name=this.name})}getFocusAnchor(){return this.querySelector(`${y}, ${C}`)}focus(){super.focus?.(),this.fields[0]?.focus?.()}formResetCallback(){super.formResetCallback?.(),this.updateComplete.then(()=>{this.sendChangeEvent()})}sendChangeEvent(){this.checkValidity(this.value),this.dispatchEvent(new u(this.value))}handleSlotChange(){this.fields.forEach(e=>{e.name=this.name})}render(){return h`
       <fieldset id="fieldset">
         <div id="legend">${this.renderFormLabels("options")}</div>
         <div
@@ -24,4 +24,4 @@ import{a as g}from"./chunks/chunk-BQHYZB2W.js";import{a as b}from"./chunks/chunk
         </div>
         ${this.renderDescription()}
       </fieldset>
-    `}};s.styles=[E,g,o.base,o.errorMessages],s.shadowRootOptions={...a.shadowRootOptions,delegatesFocus:!0},i([n({type:Boolean,reflect:!0})],s.prototype,"inline",2),i([d("#options")],s.prototype,"optionsList",2),s=i([l(k)],s);export{s as EunomiaCheckboxList,k as EunomiaCheckboxListTagName};
+    `}};i.styles=[E,g,o.base,o.errorMessages],i.shadowRootOptions={...a.shadowRootOptions,delegatesFocus:!0},s([n({type:Boolean,reflect:!0})],i.prototype,"inline",2),s([d("#options")],i.prototype,"optionsList",2),i=s([l(k)],i);export{i as EunomiaCheckboxList,k as EunomiaCheckboxListTagName};

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

@@ -1 +1 @@
-import{a,b}from"./chunks/chunk-EAGGN3ZI.js";import"./chunks/chunk-GU6BVMFJ.js";import"./chunks/chunk-KNM5QHDK.js";import"./chunks/chunk-YYCEPZUN.js";import"./chunks/chunk-T7WABJEJ.js";import"./chunks/chunk-XH6NREVZ.js";export{b as EunomiaCheckbox,a as EunomiaCheckboxTagName};
+import{a,b}from"./chunks/chunk-2XASWWKR.js";import"./chunks/chunk-GU6BVMFJ.js";import"./chunks/chunk-OAULRKHQ.js";import"./chunks/chunk-YYCEPZUN.js";import"./chunks/chunk-32DTNR52.js";import"./chunks/chunk-XH6NREVZ.js";export{b as EunomiaCheckbox,a as EunomiaCheckboxTagName};

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

@@ -1,4 +1,4 @@
-import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk-YQU6RVX4.js";import{a as u}from"./chunks/chunk-UP4M7TER.js";import{a as e,f as c,g as l,h as a,i as d,l as s,n as o,p as t,s as p}from"./chunks/chunk-XH6NREVZ.js";var g=l`
+import{a as m}from"./chunks/chunk-P32B7BFD.js";import{a as h}from"./chunks/chunk-YQU6RVX4.js";import{a as v}from"./chunks/chunk-UP4M7TER.js";import{a as u}from"./chunks/chunk-SJWRE6PW.js";import{a,f as l,g as s,h as t,i as p,l as c,n as i,p as n,s as d}from"./chunks/chunk-XH6NREVZ.js";var g=s`
   :host {
     display: inline-flex;
     max-width: 100%;
@@ -7,187 +7,15 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
     vertical-align: middle;
   }
 
-  :host([color="primary"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-primary-transparent, #3d6fff33)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-primary-500, #3d6fff)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-primary-500, #3d6fff)
-    );
-    --_color: var(--chip-color, var(--eun-color-primary-500, #3d6fff));
-  }
-  :host([color="secondary"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-secondary-transparent, #e5a03033)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-secondary-500, #e5a030)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-secondary-500, #e5a030)
-    );
-    --_color: var(--chip-color, var(--eun-color-secondary-500, #e5a030));
-  }
-  :host([color="light"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-grey-0, #ffffff)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-grey-0, #ffffff)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-grey-0, #ffffff)
-    );
-    --_color: var(--chip-color, var(--eun-color-grey-600, #666e8a));
-  }
-  :host([color="light"][appearance="outline"]:not([severity])) {
-    --_color: var(--chip-color, var(--eun-color-grey-600, #666e8a));
-  }
-  :host([color="medium"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      color-mix(in srgb, var(--eun-color-grey-700, #484e61) 20%, transparent)
-    );
-    --_backgroundFilled: var(--_background);
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-grey-700, #484e61)
-    );
-    --_color: var(--chip-color, var(--eun-color-grey-900, #000000));
-  }
-  :host([color="dark"]:not([severity])) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-grey-800, #071621)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-grey-800, #071621)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-grey-800, #071621)
-    );
-    --_color: var(--chip-color, var(--eun-color-grey-0, #ffffff));
-  }
-  :host([color="dark"][appearance="outline"]:not([severity])) {
-    --_color: var(--chip-color, var(--eun-color-grey-800, #071621));
-  }
-
-  :host([severity="info"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-info-30, #f0f7fa)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-info-100, #097faf)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-info-100, #097faf)
-    );
-    --_color: var(--chip-color, var(--eun-color-info-100, #097faf));
-  }
-  :host([severity="success"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-success-30, #f1f9f4)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-success-100, #1a9948)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-success-100, #1a9948)
-    );
-    --_color: var(--chip-color, var(--eun-color-success-100, #1a9948));
-  }
-  :host([severity="warning"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-warning-30, #fcf5f0)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-warning-100, #c85207)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-warning-100, #c85207)
-    );
-    --_color: var(--chip-color, var(--eun-color-warning-100, #c85207));
-  }
-  :host([severity="critical"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-critical-30, #faf0f1)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-critical-100, #aa0014)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-critical-100, #aa0014)
-    );
-    --_color: var(--chip-color, var(--eun-color-critical-100, #aa0014));
-  }
-  :host([severity="neutral"]) {
-    --_background: var(
-      --chip-background-color,
-      var(--eun-color-grey-200, #ecedf0)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-grey-700, #484e61)
-    );
-    --_border-color: var(
-      --chip-border-color,
-      var(--eun-color-grey-700, #484e61)
-    );
-    --_color: var(--chip-color, var(--eun-color-grey-700, #484e61));
-  }
-
-  :host([appearance="default"]) #chip {
-    background: var(--_background);
-  }
-
-  :host([appearance="fill"]) #chip {
-    --_color: var(--chip-color, #fff);
-    background: var(--_backgroundFilled);
-    color: var(--_color);
-  }
-
-  :host([appearance="outline"]) #chip {
-    background: var(--eun-surface-color, #ffffff);
-    border: var(--chip-border-width, var(--eun-borderWidth-s, 1px)) solid
-      var(--_border-color);
-  }
-
-  :host([appearance="flat"]) #chip {
-    --_color: var(--chip-color, var(--eun-text-secondary, #484e61));
-    background: var(--eun-content-hover, #edeff0);
-    color: var(--_color);
+  :host {
+    /* Unlike a tag's transparent outline, a chip's sits on the surface. */
+    --_bg-outline: var(--eun-surface-color, #ffffff);
   }
 
   :host([size="s"]) {
     --_height: 26px;
     --_paddingInline: 4px;
-    --_fontSize: var(--eun-fontSize-xs, 12px);
+    --_fontSize: var(--eun-font-size-xs, 12px);
     --_gap: 4px;
     --_avatarFontSize: 10px;
     --_avatarInsetSize: 16px;
@@ -196,7 +24,7 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
   :host(:not([size])) {
     --_height: 30px;
     --_paddingInline: 6px;
-    --_fontSize: var(--eun-fontSize-s, 14px);
+    --_fontSize: var(--eun-font-size-s, 14px);
     --_gap: 6px;
     --_avatarFontSize: 11px;
     --_avatarInsetSize: 20px;
@@ -204,17 +32,17 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
   :host([size="l"]) {
     --_height: 38px;
     --_paddingInline: 6px;
-    --_fontSize: var(--eun-fontSize-m, 16px);
+    --_fontSize: var(--eun-font-size-m, 16px);
     --_gap: 8px;
     --_avatarFontSize: 12px;
     --_avatarInsetSize: 24px;
   }
 
-  :host([rounded]) {
-    --_borderRadius: var(--eun-borderRadius-xl, 999px);
+  :host {
+    --_radius: var(--eun-border-radius-s, 5px);
   }
-  :host(:not([rounded])) {
-    --_borderRadius: var(--chip-border-radius, var(--eun-borderRadius-s, 5px));
+  :host([rounded]) {
+    --_radius: var(--eun-border-radius-xl, 999px);
   }
 
   #chip {
@@ -223,20 +51,30 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
     box-sizing: border-box;
     max-width: 100%;
     height: var(--_height);
-    border-radius: var(--_borderRadius);
-    padding-inline-start: var(--_paddingInline);
-    padding-inline-end: var(--_paddingInline);
+    --_borderWidth: var(--chip-border-width, var(--eun-border-width-s, 1px));
+    background: var(--chip-background-color, var(--_bg));
+    /* Every appearance carries the same border box (transparent unless
+       drawn), taken out of the padding, so switching appearance or adding a
+       --chip-border-* never changes the chip's size. */
+    border: var(--_borderWidth) solid var(--chip-border-color, var(--_bd));
+    border-radius: var(--chip-border-radius, var(--_radius));
+    padding-inline-start: max(0px, calc(var(--_paddingInline) - var(--_borderWidth)));
+    padding-inline-end: max(0px, calc(var(--_paddingInline) - var(--_borderWidth)));
     font-size: var(--_fontSize);
     gap: var(--chip-gap, var(--_gap));
-    color: var(--_color);
-    font-weight: var(--eun-fontWeight-m, 500);
+    color: var(--chip-color, var(--_fg));
+    font-weight: var(--eun-font-weight-m, 500);
     box-shadow: var(--chip-box-shadow, none);
-    --_leadingIconColor: var(--chip-icon-color, var(--_color));
+    --_textColor: var(--chip-color, var(--_fg));
+    --_leadingIconColor: var(--chip-icon-color, var(--_textColor));
   }
 
   #chip[data-leading="icon"],
   #chip[data-leading="none"] {
-    padding-inline-start: calc(var(--_paddingInline) + 4px);
+    padding-inline-start: max(
+      0px,
+      calc(var(--_paddingInline) + 4px - var(--_borderWidth))
+    );
   }
 
   #chip[data-leading="none"] slot[name="icon"] {
@@ -262,12 +100,12 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
     width: var(--chip-avatar-size, var(--_avatarInsetSize, 20px));
     height: var(--chip-avatar-size, var(--_avatarInsetSize, 20px));
     font-size: var(--_avatarFontSize);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     line-height: 1;
-    color: var(--chip-avatar-color, #fff);
+    color: var(--chip-avatar-color, var(--_onSolid, #fff));
     background: var(
       --chip-avatar-background,
-      var(--_backgroundFilled, var(--eun-color-grey-500, #8d93aa))
+      var(--_solid, var(--eun-color-grey-500, #8d93aa))
     );
     overflow: hidden;
   }
@@ -277,7 +115,7 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
   }
 
   #avatar[data-shape="square"] {
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
   }
 
   #avatar img {
@@ -294,7 +132,7 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
 
   #delete {
     flex-shrink: 0;
-    --button-text: var(--_color);
+    --button-text: var(--_textColor);
     --button-focus-outline: var(
       --chip-delete-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -304,30 +142,30 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
   :host([disabled]) #chip {
     opacity: 0.6;
   }
-`,b=g;var f="eun-chip",m={s:14,m:16,l:18},_={s:12,m:14,l:16},r=class extends h(p){constructor(){super(...arguments);this.color="medium";this.appearance="default";this.hideIcon=!1;this.avatarAlt="";this.avatarShape="circle";this.rounded=!0;this.removable=!0;this.disabled=!1;this.labelText="";this.handleIconSlotChange=()=>{this.requestUpdate()};this.updateLabelText=()=>{this.labelText=this.textContent?.trim()??""};this.handleRemove=()=>{this.dispatchEvent(new v)}}connectedCallback(){super.connectedCallback(),this.updateLabelText()}getRemoveLabel(){let i=this.ariaLabelRemove??this.dictionary.chip.remove;return this.labelText?`${i} ${this.labelText}`:i}getSize(){return this.size??"m"}getIconName(){if(!this.hideIcon)return u(this.icon,this.severity)}hasIconSlotted(){return!this.hideIcon&&this.iconSlotEls.length>0}getLeadingKind(){return this.avatarSrc||this.avatarInitials?"avatar":this.getIconName()||this.hasIconSlotted()?"icon":"none"}renderLeadingVisual(){let i=this.getSize();if(this.avatarSrc)return o`
+`,b=[m,g];var f="eun-chip",x={s:14,m:16,l:18},S={s:12,m:14,l:16},e=class extends u(d){constructor(){super(...arguments);this.color="medium";this.fixedColor=!1;this.appearance="default";this.hideIcon=!1;this.avatarAlt="";this.avatarShape="circle";this.rounded=!0;this.removable=!0;this.disabled=!1;this.labelText="";this.handleIconSlotChange=()=>{this.requestUpdate()};this.updateLabelText=()=>{this.labelText=this.textContent?.trim()??""};this.handleRemove=()=>{this.dispatchEvent(new h)}}connectedCallback(){super.connectedCallback(),this.updateLabelText()}getRemoveLabel(){let r=this.ariaLabelRemove??this.dictionary.chip.remove;return this.labelText?`${r} ${this.labelText}`:r}getSize(){return this.size??"m"}getIconName(){if(!this.hideIcon)return v(this.icon,this.severity)}hasIconSlotted(){return!this.hideIcon&&this.iconSlotEls.length>0}getLeadingKind(){return this.avatarSrc||this.avatarInitials?"avatar":this.getIconName()||this.hasIconSlotted()?"icon":"none"}renderLeadingVisual(){let r=this.getSize();if(this.avatarSrc)return i`
         <span id="avatar" data-shape=${this.avatarShape}>
           <img src=${this.avatarSrc} alt=${this.avatarAlt} />
         </span>
-      `;if(this.avatarInitials)return o`
+      `;if(this.avatarInitials)return i`
         <span id="avatar" data-shape=${this.avatarShape} aria-hidden="true">
           ${this.avatarInitials}
         </span>
-      `;let n=this.getIconName();return o`
+      `;let o=this.getIconName();return i`
       <slot name="icon" @slotchange=${this.handleIconSlotChange}>
-        ${n?o`<eun-icon
+        ${o?i`<eun-icon
               id="icon"
               shape="round"
-              size=${m[i]}
-              name=${n}
-            ></eun-icon>`:t}
+              size=${x[r]}
+              name=${o}
+            ></eun-icon>`:n}
       </slot>
-    `}render(){let i=this.getSize();return o`
+    `}render(){let r=this.getSize();return i`
       <div id="chip" part="chip" data-leading=${this.getLeadingKind()}>
         ${this.renderLeadingVisual()}
         <span id="label"
           ><slot @slotchange=${this.updateLabelText}></slot
         ></span>
-        ${this.removable?o`
+        ${this.removable?i`
               <eun-button
                 id="delete"
                 appearance="ghost"
@@ -339,9 +177,9 @@ import{a as h}from"./chunks/chunk-ATH2OAMU.js";import{a as v}from"./chunks/chunk
               >
                 <eun-icon
                   name="close"
-                  size=${_[i]}
+                  size=${S[r]}
                 ></eun-icon>
               </eun-button>
-            `:t}
+            `:n}
       </div>
-    `}};r.styles=b,e([a({reflect:!0})],r.prototype,"color",2),e([a({reflect:!0})],r.prototype,"severity",2),e([a({reflect:!0})],r.prototype,"appearance",2),e([a({reflect:!0})],r.prototype,"size",2),e([a()],r.prototype,"icon",2),e([a({type:Boolean,attribute:"hide-icon"})],r.prototype,"hideIcon",2),e([a({attribute:"avatar-src"})],r.prototype,"avatarSrc",2),e([a({attribute:"avatar-alt"})],r.prototype,"avatarAlt",2),e([a({attribute:"avatar-shape"})],r.prototype,"avatarShape",2),e([a({attribute:"avatar-initials"})],r.prototype,"avatarInitials",2),e([a({type:Boolean,reflect:!0})],r.prototype,"rounded",2),e([a({type:Boolean,reflect:!0})],r.prototype,"removable",2),e([a({type:Boolean,reflect:!0})],r.prototype,"disabled",2),e([a({attribute:"aria-label-remove"})],r.prototype,"ariaLabelRemove",2),e([d()],r.prototype,"labelText",2),e([s({slot:"icon"})],r.prototype,"iconSlotEls",2),r=e([c(f)],r);export{r as EunomiaChip,f as EunomiaChipTagName};
+    `}};e.styles=b,a([t({reflect:!0})],e.prototype,"color",2),a([t({type:Boolean,reflect:!0,attribute:"fixed-color"})],e.prototype,"fixedColor",2),a([t({reflect:!0})],e.prototype,"severity",2),a([t({reflect:!0})],e.prototype,"appearance",2),a([t({reflect:!0})],e.prototype,"size",2),a([t()],e.prototype,"icon",2),a([t({type:Boolean,attribute:"hide-icon"})],e.prototype,"hideIcon",2),a([t({attribute:"avatar-src"})],e.prototype,"avatarSrc",2),a([t({attribute:"avatar-alt"})],e.prototype,"avatarAlt",2),a([t({attribute:"avatar-shape"})],e.prototype,"avatarShape",2),a([t({attribute:"avatar-initials"})],e.prototype,"avatarInitials",2),a([t({type:Boolean,reflect:!0})],e.prototype,"rounded",2),a([t({type:Boolean,reflect:!0})],e.prototype,"removable",2),a([t({type:Boolean,reflect:!0})],e.prototype,"disabled",2),a([t({attribute:"aria-label-remove"})],e.prototype,"ariaLabelRemove",2),a([p()],e.prototype,"labelText",2),a([c({slot:"icon"})],e.prototype,"iconSlotEls",2),e=a([l(f)],e);export{e as EunomiaChip,f as EunomiaChipTagName};

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

@@ -1,4 +1,4 @@
-import{a as b}from"./chunks/chunk-UDOZRIJZ.js";import{b as p}from"./chunks/chunk-LYYQAALT.js";import{a as i}from"./chunks/chunk-YYCEPZUN.js";import{e as g}from"./chunks/chunk-5TH3P53V.js";import{a as c}from"./chunks/chunk-A4EQSU36.js";import"./chunks/chunk-SGM2X2TC.js";import{a as n,f as h,g as u,h as o,i as v,j as d,l,n as r,p as a,s as f}from"./chunks/chunk-XH6NREVZ.js";var m=u`
+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`
   :host {
     display: block;
     width: 100%;
@@ -10,7 +10,7 @@ import{a as b}from"./chunks/chunk-UDOZRIJZ.js";import{b as p}from"./chunks/chunk
   #wrapper {
     --_background: var(
       --collapse-background,
-      var(--eun-color-grey-100, #f7f8fa)
+      var(--eun-surface-sunken, #f7f8fa)
     );
     --_backgroundHover: var(--collapse-background-hover, var(--_background));
     --_backgroundOpen: var(--collapse-background-open, var(--_background));
@@ -33,7 +33,7 @@ import{a as b}from"./chunks/chunk-UDOZRIJZ.js";import{b as p}from"./chunks/chunk
     );
     --_contentFontSize: var(
       --collapse-content-font-size,
-      var(--eun-fontSize-s, 14px)
+      var(--eun-font-size-s, 14px)
     );
     --_richTextLinkColor: var(
       --collapse-rich-text-link-color,
@@ -45,7 +45,7 @@ import{a as b}from"./chunks/chunk-UDOZRIJZ.js";import{b as p}from"./chunks/chunk
     );
     --_borderRadius: var(
       --collapse-border-radius,
-      var(--eun-borderRadius-l, 16px)
+      var(--eun-border-radius-l, 16px)
     );
     --_padding: var(--collapse-padding, var(--eun-space-m, 16px));
     --_transitionDuration: var(--collapse-transition-duration, 0.3s);
@@ -62,8 +62,8 @@ import{a as b}from"./chunks/chunk-UDOZRIJZ.js";import{b as p}from"./chunks/chunk
     border-radius: var(--_borderRadius);
     color: var(--_color);
     font: inherit;
-    font-size: var(--eun-fontSize-m, 16px);
-    font-weight: var(--eun-fontWeight-l);
+    font-size: var(--eun-font-size-m, 16px);
+    font-weight: var(--eun-font-weight-l);
     text-align: left;
     cursor: pointer;
     outline: 2px solid transparent;
@@ -113,13 +113,26 @@ import{a as b}from"./chunks/chunk-UDOZRIJZ.js";import{b as p}from"./chunks/chunk
   #heading {
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
+  }
+  #heading ::slotted(*) {
+    margin: 0;
+    font: inherit;
+    color: inherit;
   }
   #subheading {
-    font-size: var(--eun-fontSize-xs, 14px);
-    font-weight: var(--eun-fontWeight-m);
+    font-size: var(--eun-font-size-xs, 14px);
+    font-weight: var(--eun-font-weight-m);
     color: var(--_subheadingColor);
   }
+  #subheading.hidden {
+    display: none;
+  }
+  #subheading ::slotted(*) {
+    margin: 0;
+    font: inherit;
+    color: inherit;
+  }
   #actions {
     display: flex;
     align-items: center;
@@ -137,6 +150,7 @@ import{a as b}from"./chunks/chunk-UDOZRIJZ.js";import{b as p}from"./chunks/chunk
     background: var(--_background);
     border-bottom-left-radius: var(--_borderRadius);
     border-bottom-right-radius: var(--_borderRadius);
+    overflow-anchor: none;
     transition:
       grid-template-rows var(--_transitionDuration) ease-out,
       margin-top var(--_transitionDuration) ease-out,
@@ -146,7 +160,7 @@ import{a as b}from"./chunks/chunk-UDOZRIJZ.js";import{b as p}from"./chunks/chunk
     overflow: hidden;
   }
   #panel-content {
-    border-top: var(--eun-borderWidth-s, 1px) solid
+    border-top: var(--eun-border-width-s, 1px) solid
       var(--eun-color-grey-300, #dee0e7);
     padding: var(--_padding);
     color: var(--_contentColor);
@@ -200,7 +214,13 @@ import{a as b}from"./chunks/chunk-UDOZRIJZ.js";import{b as p}from"./chunks/chunk
       transition: none;
     }
   }
-`;var _="eun-collapse",t=class extends f{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 i))};this.handleBeforeMatch=()=>{this.open=!0,this.dispatchEvent(new i)};this.handleHeaderKeydown=e=>{if(e.key!=="Tab"||e.shiftKey||this.open||!this.panelContentEl)return;let[s]=b(this.panelContentEl,{requireRendered:!1});s&&(e.preventDefault(),this.openedViaFocus=!0,this.open=!0,this.dispatchEvent(new i),this.updateComplete.then(()=>s.focus()))};this.handleFocusOut=e=>{!this.openedViaFocus||e.relatedTarget instanceof Node&&this.contains(e.relatedTarget)||(this.openedViaFocus=!1,this.open=!1,this.dispatchEvent(new i))}}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 s=e.get("open");if(!(!this.open&&!this.disabled&&p)){this.panelHidden=!1,this.deferPanelHidden=!1;return}let x=s===!0&&!this.open,y=window.matchMedia("(prefers-reduced-motion: reduce)").matches;if(!x||y){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}}render(){let e=r`
+`;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}
+      >${this.tag}</slot
+    >`;return a?p:!this.tag&&!e.length?r`<slot
+        name="tag"
+        class="hidden"
+        @slotchange=${this.handleSlotChange}
+      ></slot>`:r`<eun-tag color="primary" size="s" rounded>${p}</eun-tag>`}render(){let e=r`
       <button
         type="button"
         id="header"
@@ -216,26 +236,26 @@ import{a as b}from"./chunks/chunk-UDOZRIJZ.js";import{b as p}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>`:a}
+            ${this.icon?r`<eun-icon name=${this.icon} size="20"></eun-icon>`:i}
           </slot>
           <span id="heading-group">
-            <span id="heading">${this.heading}</span>
-            ${this.subheading?r`<span id="subheading">${this.subheading}</span>`:a}
+            <span id="heading"
+              ><slot name="heading">${this.heading}</slot></span
+            >
+            <span
+              id="subheading"
+              class=${c({hidden:!this.subheading&&!this.subheadingSlotEls.length})}
+              ><slot name="subheading" @slotchange=${this.handleSlotChange}
+                >${this.subheading}</slot
+              ></span
+            >
           </span>
         </span>
         <span id="actions">
-          <slot
-            name="tag"
-            class=${c({hidden:!this.tag&&!this.tagSlotEls.length})}
-            @slotchange=${this.handleSlotChange}
-          >
-            ${this.tag?r`<eun-tag color="primary" size="s" rounded
-                  >${this.tag}</eun-tag
-                >`:a}
-          </slot>
+          ${this.renderTag()}
           <span id="chevron">
             <slot name="chevron" @slotchange=${this.handleSlotChange}>
-              ${this.chevronSlotEls.length?a:r`<eun-icon
+              ${this.chevronSlotEls.length?i:r`<eun-icon
                     name=${this.chevronIcon}
                     size="20"
                   ></eun-icon>`}
@@ -248,18 +268,18 @@ import{a as b}from"./chunks/chunk-UDOZRIJZ.js";import{b as p}from"./chunks/chunk
         ${this.renderHeadingWrapper(e)}
         <div
           id="panel"
-          ?inert=${!this.open&&(this.disabled||!p)}
-          hidden=${this.panelHidden?"until-found":a}
+          ?inert=${!this.open&&(this.disabled||!u)}
+          hidden=${this.panelHidden?"until-found":i}
           @beforematch=${this.handleBeforeMatch}
         >
           <div id="panel-inner">
             <div id="panel-content">
               ${this.richText?r`<div id="rich-text">
-                    ${g(this.richText)}
-                  </div>`:a}
+                    ${m(this.richText)}
+                  </div>`:i}
               <slot></slot>
             </div>
           </div>
         </div>
       </div>
-    `}};t.styles=[m],n([o()],t.prototype,"heading",2),n([o()],t.prototype,"subheading",2),n([o({type:Number})],t.prototype,"level",2),n([o()],t.prototype,"icon",2),n([o()],t.prototype,"tag",2),n([o({attribute:"chevron-icon"})],t.prototype,"chevronIcon",2),n([o({attribute:"rich-text"})],t.prototype,"richText",2),n([o({type:Boolean,reflect:!0})],t.prototype,"open",2),n([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),n([o({type:Boolean,reflect:!0})],t.prototype,"independent",2),n([d("#header")],t.prototype,"headerEl",2),n([d("#panel-content")],t.prototype,"panelContentEl",2),n([d("#panel")],t.prototype,"panelEl",2),n([v()],t.prototype,"panelHidden",2),n([l({slot:"icon"})],t.prototype,"iconSlotEls",2),n([l({slot:"tag"})],t.prototype,"tagSlotEls",2),n([l({slot:"chevron"})],t.prototype,"chevronSlotEls",2),t=n([h(_)],t);export{t as EunomiaCollapse,_ as EunomiaCollapseTagName};
+    `}};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};