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

package/styles/themes/prebuilt-themes/violet/eunomia-violet-dark.mixin.scss

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-violet-dark-theme-colors {
   $primary-500: #8b5bd5;
   $secondary-500: #65e6e5;
@@ -58,19 +60,7 @@
   --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
   --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
 
-  --eun-content-hover: rgba(255, 255, 255, 0.08);
-  --eun-content-pressed: rgba(255, 255, 255, 0.14);
-  --eun-divider-color: var(--eun-color-grey-300);
-  --eun-border-color: var(--eun-color-grey-300);
-  --eun-surface-color: var(--eun-color-grey-0);
-  --eun-disabled-color: var(--eun-color-grey-200);
-  --eun-readonly-color: var(--eun-color-grey-600);
-  --eun-text-color: var(--eun-color-grey-800);
-  --eun-text-secondary: var(--eun-color-grey-700);
-  --eun-placeholder-color: var(--eun-color-grey-400);
-  --eun-text-disabled-color: var(--eun-color-grey-500);
-  --eun-text-readonly-color: var(--eun-color-grey-400);
-  --eun-disabled-content: var(--eun-color-grey-400);
+  @include eunomia-dark-neutrals();
 
   --eun-surface-tint: #2a2d40;
   --eun-divider-tint: #666b8d;

package/styles/themes/prebuilt-themes/violet/eunomia-violet.mixin.scss

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-violet-theme-colors {
   $primary-500: #6d28d9;
   $secondary-500: #0ea5a4;
@@ -58,19 +60,7 @@
   --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
   --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
 
-  --eun-content-hover: #edeff0;
-  --eun-content-pressed: #e4e6e8;
-  --eun-divider-color: #dee0e7;
-  --eun-border-color: #dee0e7;
-  --eun-surface-color: #ffffff;
-  --eun-disabled-color: #ecedf0;
-  --eun-readonly-color: #666e8a;
-  --eun-text-color: #071621;
-  --eun-text-secondary: #484e61;
-  --eun-placeholder-color: var(--eun-color-grey-400, #c1c9d6);
-  --eun-text-disabled-color: #8d93aa;
-  --eun-text-readonly-color: #c1c9d6;
-  --eun-disabled-content: #c1c9d6;
+  @include eunomia-neutrals();
 
   --eun-surface-tint: #f8f4fd;
   --eun-divider-tint: #d8d7e6;

package/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss

@@ -9,6 +9,7 @@
 @use "./../../../tools/mixins/settings/eunomia-radius.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-border.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-shadows.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-alpha.mixin.scss" as *;
 @use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
 
 @mixin default-settings {
@@ -19,6 +20,7 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
   @include eunomia-grid-layouts();

package/styles/tools/indexes/eunomia-tools.index.scss

@@ -1,3 +1,4 @@
+@forward './../mixins/settings/eunomia-alpha.mixin.scss';
 @forward './../mixins/settings/eunomia-border.mixin.scss';
 @forward './../mixins/settings/eunomia-breakpoints.mixin.scss';
 @forward './../mixins/settings/eunomia-font.mixin.scss';

package/styles/tools/mixins/settings/eunomia-alpha.mixin.scss

@@ -0,0 +1,39 @@
+// Translucent surface/text primitives, derived from the active theme's
+// `--eun-surface-color` and `--eun-text-color`. Included next to each theme's
+// color mixin, so they follow light/dark and brand switches automatically.
+@mixin eunomia-alpha {
+  --eun-surface-transparent-25: color-mix(
+    in srgb,
+    var(--eun-surface-color) 25%,
+    transparent
+  );
+  --eun-surface-transparent-50: color-mix(
+    in srgb,
+    var(--eun-surface-color) 50%,
+    transparent
+  );
+  --eun-surface-transparent-75: color-mix(
+    in srgb,
+    var(--eun-surface-color) 75%,
+    transparent
+  );
+
+  --eun-text-transparent-25: color-mix(
+    in srgb,
+    var(--eun-text-color) 25%,
+    transparent
+  );
+  --eun-text-transparent-50: color-mix(
+    in srgb,
+    var(--eun-text-color) 50%,
+    transparent
+  );
+  --eun-text-transparent-75: color-mix(
+    in srgb,
+    var(--eun-text-color) 75%,
+    transparent
+  );
+
+  // Fixed (theme-independent) muted text, legible on a dark surface
+  --eun-text-on-dark-secondary: rgba(255, 255, 255, 0.7);
+}

package/styles/tools/mixins/settings/eunomia-border.mixin.scss

@@ -1,5 +1,5 @@
 @mixin eunomia-border-width {
-  --eun-borderWidth-s: 1px;
-  --eun-borderWidth-m: 1.5px;
-  --eun-borderWidth-l: 2px;
+  --eun-border-width-s: 1px;
+  --eun-border-width-m: 1.5px;
+  --eun-border-width-l: 2px;
 }

package/styles/tools/mixins/settings/eunomia-font.mixin.scss

@@ -34,19 +34,19 @@
 }
 
 @mixin eunomia-font-sizes {
-  --eun-fontSize-xxs: 0.4rem;
-  --eun-fontSize-xs: 0.6rem;
-  --eun-fontSize-s: 0.82rem;
-  --eun-fontSize-m: 1rem;
-  --eun-fontSize-l: 1.3rem;
-  --eun-fontSize-xl: 1.6rem;
-  --eun-fontSize-xxl: 2rem;
-  --eun-fontSize-xxxl: 3.4rem;
-  --eun-fontSize-xxxxl: 5rem;
+  --eun-font-size-xxs: 0.4rem;
+  --eun-font-size-xs: 0.6rem;
+  --eun-font-size-s: 0.82rem;
+  --eun-font-size-m: 1rem;
+  --eun-font-size-l: 1.3rem;
+  --eun-font-size-xl: 1.6rem;
+  --eun-font-size-xxl: 2rem;
+  --eun-font-size-xxxl: 3.4rem;
+  --eun-font-size-xxxxl: 5rem;
 }
 
 @mixin eunomia-font-weight {
-  --eun-fontWeight-s: 300;
-  --eun-fontWeight-m: 500;
-  --eun-fontWeight-l: 700;
+  --eun-font-weight-s: 300;
+  --eun-font-weight-m: 500;
+  --eun-font-weight-l: 700;
 }

package/styles/tools/mixins/settings/eunomia-radius.mixin.scss

@@ -1,6 +1,6 @@
 @mixin eunomia-border-radius {
-  --eun-borderRadius-s: 5px;
-  --eun-borderRadius-m: 10px;
-  --eun-borderRadius-l: 20px;
-  --eun-borderRadius-xl: 999px;
+  --eun-border-radius-s: 5px;
+  --eun-border-radius-m: 10px;
+  --eun-border-radius-l: 20px;
+  --eun-border-radius-xl: 999px;
 }

package/dist/cdn/components/chunks/chunk-5TH3P53V.js

@@ -1,16 +0,0 @@
-import{n as o,r as f}from"./chunk-XH6NREVZ.js";var N=[{name:"red",label:"Red",text:"#d8291c",highlight:"#fbe0de"},{name:"orange",label:"Orange",text:"#f2790f",highlight:"#fdead4"},{name:"yellow",label:"Yellow",text:"#b18f22",highlight:"#faf3d6"},{name:"green",label:"Green",text:"#1b7a4d",highlight:"#ddf0e6"},{name:"blue",label:"Blue",text:"#148cd2",highlight:"#dcefff"},{name:"purple",label:"Purple",text:"#6d28d9",highlight:"#ece3fc"},{name:"gray",label:"Gray",text:"#484e61",highlight:"#eceef2"}];function p(e){return N.find(t=>t.name===e)}var b=/^\[align:(start|center|end|justify)\]\n?/;function d(e){let t=b.exec(e);return t?{align:t[1],body:e.slice(t[0].length)}:{align:"start",body:e}}function T(e,t){return e==="start"?t:`[align:${e}]
-${t}`}function c(e){let t=[],i="",n=0,r=()=>{i&&(t.push({type:"text",value:i}),i="")};for(;n<e.length;){let a=e.slice(n),s=/^\[([^\]]+)\]\(([^)]+)\)/.exec(a);if(s){r(),t.push({type:"link",href:s[2],children:c(s[1])}),n+=s[0].length;continue}let g=/^\{color=([a-z]+)\}/.exec(a);if(g){let l=e.indexOf("{/color}",n+g[0].length);if(l!==-1){r(),t.push({type:"color",color:g[1],children:c(e.slice(n+g[0].length,l))}),n=l+8;continue}}let u=/^\{highlight=([a-z]+)\}/.exec(a);if(u){let l=e.indexOf("{/highlight}",n+u[0].length);if(l!==-1){r(),t.push({type:"highlight",color:u[1],children:c(e.slice(n+u[0].length,l))}),n=l+12;continue}}if(e.startsWith("***",n)){let l=e.indexOf("***",n+3);if(l!==-1){r(),t.push({type:"bold",children:[{type:"italic",children:c(e.slice(n+3,l))}]}),n=l+3;continue}}if(e.startsWith("**",n)){let l=e.indexOf("**",n+2);if(l!==-1){r(),t.push({type:"bold",children:c(e.slice(n+2,l))}),n=l+2;continue}}if(e.startsWith("__",n)){let l=e.indexOf("__",n+2);if(l!==-1){r(),t.push({type:"underline",children:c(e.slice(n+2,l))}),n=l+2;continue}}if(e[n]==="*"){let l=e.indexOf("*",n+1);if(l!==-1){r(),t.push({type:"italic",children:c(e.slice(n+1,l))}),n=l+1;continue}}i+=e[n],n+=1}return r(),t}function m(e){return e.reduce((t,i)=>i.type==="text"?t+i.value.length:t+m(i.children),0)}function C(e){let{body:t}=d(e),i=t.length?t.split(`
-`):[""];return i.reduce((n,r)=>n+m(c(r)),0)+i.length-1}function h(e){return o`${e.map($)}`}function $(e){switch(e.type){case"text":return e.value;case"bold":return o`<strong>${h(e.children)}</strong>`;case"italic":return o`<em>${h(e.children)}</em>`;case"underline":return o`<u>${h(e.children)}</u>`;case"color":{let t=p(e.color);return o`<span
-        data-color=${e.color}
-        style="color: ${t?.text??"inherit"}"
-        >${h(e.children)}</span
-      >`}case"highlight":{let t=p(e.color);return o`<span
-        data-highlight=${e.color}
-        style="background-color: ${t?.highlight??"transparent"}"
-        >${h(e.children)}</span
-      >`}case"link":return o`<a href=${e.href}>${h(e.children)}</a>`}}function _(e){let{body:t}=d(e),i=[],n=[],r=()=>{n.length&&(i.push(o`<ul>
-        ${n.map(a=>o`<li>${h(c(a))}</li>`)}
-      </ul>`),n=[])};return t.split(`
-`).forEach(a=>{let s=a.trim();if(s.startsWith("- ")){n.push(s.slice(2));return}r(),s&&i.push(o`<p>${h(c(s))}</p>`)}),r(),o`${i}`}function y(e){let t=[];e.childNodes.forEach(i=>{i.nodeType===Node.COMMENT_NODE?t.push(i):y(i)}),t.forEach(i=>e.removeChild(i))}function I(e){let t=document.createElement("div"),i=e.length?e.split(`
-`):[""];f(o`${i.map(r=>o`<p>${h(c(r))}</p>`)}`,t),y(t);let n=Array.from(t.children);return n.forEach(r=>{r.hasChildNodes()||r.appendChild(document.createElement("br"))}),n}function O(e,t){let{align:i,body:n}=d(t);e.style.textAlign=i==="start"?"":i,e.replaceChildren(...I(n))}var E={STRONG:["**","**"],B:["**","**"],EM:["*","*"],I:["*","*"],U:["__","__"]};function x(e){if(e.nodeType===Node.TEXT_NODE)return(e.textContent??"").replace(/\u200B/g,"");if(e.nodeName==="BR"||!(e instanceof HTMLElement))return"";let t=Array.from(e.childNodes).map(x).join(""),i=E[e.tagName];if(i)return`${i[0]}${t}${i[1]}`;if(e.tagName==="A")return`[${t}](${e.getAttribute("href")??""})`;if(e.tagName==="SPAN"){let n=e.dataset.color;if(n)return`{color=${n}}${t}{/color}`;let r=e.dataset.highlight;if(r)return`{highlight=${r}}${t}{/highlight}`}return t}function M(e){let t=Array.from(e.children),i=t.length?t.map(r=>Array.from(r.childNodes).map(x).join("")).join(`
-`):e.textContent??"",n=e.style.textAlign||"start";return T(n,i)}export{N as a,p as b,d as c,C as d,_ as e,O as f,M as g};

package/dist/cdn/components/chunks/chunk-KNM5QHDK.js

@@ -1,38 +0,0 @@
-import{a as m}from"./chunk-YYCEPZUN.js";import{a,g as h,h as n,i as o,n as d,p as g}from"./chunk-XH6NREVZ.js";var T=l=>{class i extends l{constructor(){super(...arguments);this.readonly=!1}updated(e){super.updated(e),e.has("readonly")&&this.setAttribute("aria-readonly",String(this.readonly))}}return a([n({type:Boolean,reflect:!0})],i.prototype,"readonly",2),i};function b(l,i,c){return l?i(l):c?.(l)}var B=l=>{class i extends l{constructor(...e){super(...e);this.hideError=!1;this.checkable=!1;this.checked=!1;this.dirty=!1;this.touched=!1;this.#e=()=>{this.dirty||(this.dirty=!0)};this.#t=()=>{this.touched||(this.touched=!0)};this.internals||(this.internals=this.attachInternals())}static{this.formAssociated=!0}#e;#t;get pristine(){return!this.dirty}get untouched(){return!this.touched}get defaultValue(){return this.internalDefaultValue}set defaultValue(e){let t=this.value==null||Array.isArray(this.value)&&this.value.length===0;e!=null&&(this.defaultValue==null||this.defaultValue==="")&&t&&(this.value=e),this.internalDefaultValue=e}get value(){return this.valueState}set value(e){this.valueState=e,this.setFormValue(e)}get description(){if(!this.hideError)return this.errorMessages.length?this.errorMessages:this.validationMessage.length?this.validationMessage:this.hint}get form(){return this.internals.form}get type(){return this.localName}connectedCallback(){super.connectedCallback?.(),this.checkable&&this.checked&&this.setFormValue(this.value),this.checkable||this.defaultValue===void 0||this.defaultValue===""||(this.value=this.defaultValue),this.checkValidity(this.value),this.addEventListener(m.eventName,this.#e),this.addEventListener("focusout",this.#t)}disconnectedCallback(){this.removeEventListener(m.eventName,this.#e),this.removeEventListener("focusout",this.#t),super.disconnectedCallback?.()}willUpdate(e){if(e.has("value")||e.has("valueState")||e.has("checked")||e.has("validators")||e.has("required")){let t=this.checkable?this.checked:this.value;this.checkValidity(t)}super.willUpdate(e)}setFormValue(e){let t=new FormData;if(this.disabled||this.checkable&&!this.checked){this.internals.setFormValue(t);return}let s=this.name||this.getAttribute("name");if(!s){this.internals.setFormValue(t);return}Array.isArray(e)?e.forEach(r=>t.append(s,r instanceof File?r:String(r))):e!=null&&(e instanceof File?t.append(s,e):t.append(s,this.checkable&&!this.value?"on":String(e))),this.internals.setFormValue(t)}formResetCallback(){this.checkable?this.checked=!1:this.value=this.defaultValue,this.dirty=!1,this.touched=!1}renderDescription(){return this.renderError()}renderError(){let{description:e}=this;return e&&e.length&&!(this.errorMessages&&this.errorMessages.length)&&!(this.validationMessage||this.validationMessage.length)?d`
-          <p id="description" class="hint-messages">
-            <span>${e}</span>
-          </p>
-        `:this.valid||this.hideError||this.disabled||!e?.length?g:d`
-        <p id="description" class="error-messages">
-          ${b(Array.isArray(e),()=>e.map(s=>d`<span>${s}</span>`),()=>d`<span>${e}</span>`)}
-        </p>
-      `}}return a([n({reflect:!0})],i.prototype,"name",2),a([n()],i.prototype,"hint",2),a([n({type:Boolean,attribute:"hide-error"})],i.prototype,"hideError",2),a([o()],i.prototype,"valueState",2),a([o()],i.prototype,"dirty",2),a([o()],i.prototype,"touched",2),a([n({attribute:"default-value",converter:{fromAttribute:e=>e?e.split(","):void 0,toAttribute:e=>e?.join(",")??null}})],i.prototype,"defaultValue",1),a([n()],i.prototype,"value",1),i};var z=l=>{class i extends l{constructor(...e){super(...e);this.required=!1;this.valid=!0;this.errorMessages=[];this.internals||(this.internals=this.attachInternals())}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}checkLocalValidators(){return{validity:{}}}buildCommonValidators(){let{value:e}=this,t={},s,r=e==null||typeof e=="string"&&e.trim()===""||e instanceof Array&&!e.length;return this.required&&r&&(t.valueMissing=!0,s="Field value is missing"),{validity:t,message:s}}checkValidity(e){let t=this.checkLocalValidators(),s=this.buildCommonValidators(),r={...t.validity,...s.validity},u=s.message||t.message;if(this.validators&&this.validators?.length){let f=this.validators.reduce((v,V)=>this.collectErrors(v,V,e),[]);this.errorMessages=f,f.length>0&&(r.customError=!0,u=f.join(" ; "))}else this.errorMessages=[];this.valid=!Object.values(r).some(Boolean);let p=this.getFocusAnchor?.();return this.valid||p||!this.getFocusAnchor?this.setValidity(r,u,p):this.updateComplete.then(()=>this.setValidity(r,u,p)),this.internals.checkValidity()}reportValidity(e){return this.checkValidity(e),this.internals.reportValidity()}collectErrors(e,t,s){if("~standard"in t){let r=t["~standard"].validate(s);if(r instanceof Promise)throw new TypeError("Validation schemas must be synchronous");r.issues&&e.push(...r.issues.map(u=>u.message))}return"isValid"in t&&(typeof t.isValid=="function"?!t.isValid(s,this.getValidityData()):t.isValid===!1)&&e.push(t.message),"isInvalid"in t&&t.isInvalid({value:s})&&e.push(t.message),e}setValidity(e,t,s){let r=this.validationMessage;this.internals.setValidity(e,t,s),t!==r&&this.requestUpdate("valid")}getValidityData(){return{}}}return a([n({type:Array})],i.prototype,"validators",2),a([n({type:Boolean})],i.prototype,"required",2),a([o()],i.prototype,"valid",2),i};var k=h`
-  #description {
-    font-family: var(--eun-font-family, "Mulish", sans-serif);
-    display: block;
-    margin-block-start: var(--eun-space-xs, 4px);
-    font-size: var(--eun-fontSize-xs, 12px);
-    margin-block: 0;
-  }
-  #description span {
-    display: block;
-    margin-top: var(--eun-space-xs, 4px);
-  }
-`,M=h`
-  .error-messages {
-    color: var(--_errorColor);
-  }
-`,E=h`
-  .hint-messages {
-    color: var(--_hintColor);
-  }
-`,G={base:k,errorMessages:M,hintMessages:E};export{T as a,b,B as c,z as d,G as e};
-/*! Bundled license information:
-
-lit-html/directives/when.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-*/

package/dist/cdn/components/chunks/chunk-MBF52GEL.js

@@ -1 +0,0 @@
-import{a as t,h as n}from"./chunk-XH6NREVZ.js";var d=r=>{class e extends r{constructor(){super(...arguments);this.type="button";this.size="m";this.rounded=!1;this.slide=!1;this.loading=!1}connectedCallback(){super.connectedCallback?.(),!this.href&&(this.hasAttribute("role")||this.setAttribute("role","button"),this.addEventListener("click",this.handleClick,!0),this.addEventListener("keydown",this.handleKeydown,!0))}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback?.()}handleClick(o){if(this.disabled||this.loading){o.stopImmediatePropagation();return}if(this.hasAttribute("commandfor")){this.handleCommandClick?.();return}if(this.hasAttribute("popovertarget")){this.handlePopoverClick?.();return}this.handleFormBehavior()}handleKeydown(o){this.disabled||this.loading||!["Enter"," "].includes(o.key)||(o.preventDefault(),this.handleFormBehavior()||this.dispatchEvent(new Event("click")))}handleFormBehavior(){if(this.type!=="submit"&&this.type!=="reset")return!1;let o;if(this.form?o=this.getRootNode()?.getElementById(this.form):o=this.closest("form"),!o||!(o instanceof HTMLFormElement))throw new Error("The element link to the button does not exist or is invalid");return this.type==="reset"&&o.reset(),this.type==="submit"&&o.requestSubmit(),!0}}return t([n({reflect:!0})],e.prototype,"type",2),t([n({reflect:!0})],e.prototype,"variant",2),t([n({reflect:!0})],e.prototype,"size",2),t([n({type:Boolean,reflect:!0})],e.prototype,"rounded",2),t([n({type:Boolean,reflect:!0})],e.prototype,"slide",2),t([n()],e.prototype,"form",2),t([n()],e.prototype,"href",2),t([n()],e.prototype,"target",2),t([n()],e.prototype,"download",2),t([n({type:Boolean,reflect:!0})],e.prototype,"loading",2),e};var m=class r extends Event{static{this.eventName="command"}constructor(e,i){super(r.eventName,{bubbles:!1,composed:!0,cancelable:!0}),this.command=e,this.source=i}};function l(r,e){let i=globalThis.CommandEvent;return typeof i=="function"?new i(m.eventName,{command:r,source:e,cancelable:!0,composed:!0}):new m(r,e)}var v=r=>{class e extends r{handleCommandClick(){let a=this.getAttribute("commandfor");if(!a)return;let c=this.getRootNode().getElementById(a);if(!c)throw new Error(`The given id [${a}] do not correspond to any command target`);c.dispatchEvent(l(this.getAttribute("command")??"",this))}}return t([n({reflect:!0})],e.prototype,"command",2),t([n({attribute:"commandfor"})],e.prototype,"commandFor",2),e};export{d as a,v as b};