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

package/README.md

@@ -76,7 +76,7 @@ list is just the map.
 
 ## Sizing assumes `1rem = 16px`
 
-Every size token (`--eun-fontSize-*`, `--eun-space-*`, icon sizes,
+Every size token (`--eun-font-size-*`, `--eun-space-*`, icon sizes,
 button padding, ...) is expressed in `rem`, which is always relative to
 the `font-size` on `<html>`, never to a nearby parent. The values shown
 throughout the documentation site assume the browser default of 16px,

package/dist/cdn/components/chunks/chunk-2JLDJFYD.js

@@ -0,0 +1,48 @@
+import{a as k,b as f,c as _}from"./chunk-SGM2X2TC.js";import{a as c,b as v,c as y,d as x,f as T,g as E,h,i as I,n as b,o as w,p as d,s as S}from"./chunk-XH6NREVZ.js";var o=class extends _{constructor(r){if(super(r),this.it=d,r.type!==k.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===d||r==null)return this._t=void 0,this.it=r;if(r===w)return r;if(typeof r!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;let e=[r];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}};o.directiveName="unsafeHTML",o.resultType=1;var H=f(o);var l=class extends o{};l.directiveName="unsafeSVG",l.resultType=2;var $=f(l);var N=E`
+  :host {
+    display: flex;
+    --_size: var(--icon-size, 1rem);
+    --_color: var(--icon-color, currentColor);
+    --_background: var(--icon-background, transparent);
+  }
+  span {
+    box-sizing: content-box;
+    width: var(--_size);
+    height: var(--_size);
+    padding: var(--icon-padding, 0);
+    fill: var(--_color);
+    color: var(--_color);
+    background-color: var(--_background);
+    border-radius: var(--icon-border-radius, var(--eun-border-radius-m, 8px));
+    text-decoration: none;
+    display: inline-block;
+    user-select: none;
+    transition: 0.2s;
+  }
+  svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  svg path {
+    stroke-width: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    span {
+      transition: none;
+    }
+  }
+`;var U="eun-icon",M=new RegExp("_(outline|round|sharp)$"),C=import.meta.url,m,g=new Set;function q(a){m=a.endsWith("/")?a.slice(0,-1):a,g.forEach(r=>r.reload())}var p,i=class extends S{constructor(){super(...arguments);y(this,p)}set size(e){x(this,p,e);let t;e?/%$/.test(e)?t=`${parseFloat(e)/100}rem`:/^\d+(\.\d+)?$/.test(e)?t=`${e}px`:t=e:t="1rem",this.style.setProperty("--_size",t)}get size(){return v(this,p)}connectedCallback(){super.connectedCallback(),g.add(this)}disconnectedCallback(){super.disconnectedCallback(),g.delete(this)}reload(){this.updateSvg(this.name)}updated(e){(e.has("name")||e.has("shape"))&&this.updateSvg(this.name)}updateSvg(e){if(!e)return;this.name=e;let t=this.getTargetIconFolder(e),s=this.stripShapeSuffix(e),u=t==="default"?s:`${s}_${t}`;this.fetchIconSvg(t,u).then(n=>{this.svgMarkup=n}).catch(()=>{t!=="default"&&this.fetchIconSvg("default",s).then(n=>{this.svgMarkup=n}).catch(()=>{})})}async fetchIconSvg(e,t){let s;if(m)s=`${m}/${e}/${t}.svg`;else{let n=new URL(C);if(n.protocol==="file:")throw new Error("eun-icon can't locate its icons: the bundler rewrote import.meta.url to a file: URL. Serve the icons folder and call setIconBaseUrl().");let L=n.pathname.slice(0,n.pathname.lastIndexOf("/"));n.pathname=`${L}/icons/${e}/${t}.svg`,s=n.href}let u=await fetch(s);if(!u.ok)throw new Error(`Icon not found: ${s}`);return u.text()}getTargetIconFolder(e){if(this.shape)return this.shape;let t=this.extractKeywordFromIconName(e);return t||"default"}extractKeywordFromIconName(e){let t=e.match(M);if(t)return t[1]}stripShapeSuffix(e){return e.replace(M,"")}render(){return this.name?b`<span part="wrapper" aria-hidden="true">
+      ${this.svgMarkup?$(this.svgMarkup):d}
+    </span>`:d}};p=new WeakMap,i.styles=[N],c([h()],i.prototype,"name",2),c([h()],i.prototype,"shape",2),c([I()],i.prototype,"svgMarkup",2),c([h({hasChanged:()=>!1})],i.prototype,"size",1),i=c([T(U)],i);export{U as a,q as b,i as c};
+/*! Bundled license information:
+
+lit-html/directives/unsafe-html.js:
+lit-html/directives/unsafe-svg.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

package/dist/cdn/components/chunks/chunk-4MXL6PZC.js

@@ -0,0 +1,124 @@
+import{a as r,g as s,h as o}from"./chunk-XH6NREVZ.js";var u=n=>{class e extends n{constructor(){super(...arguments);this.type="button";this.fixedColor=!1;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(t){if(this.disabled||this.loading){t.stopImmediatePropagation();return}if(this.hasAttribute("commandfor")){this.handleCommandClick?.();return}if(this.hasAttribute("popovertarget")){this.handlePopoverClick?.();return}this.handleFormBehavior()}handleKeydown(t){this.disabled||this.loading||!["Enter"," "].includes(t.key)||(t.preventDefault(),this.handleFormBehavior()||this.dispatchEvent(new Event("click")))}handleFormBehavior(){if(this.type!=="submit"&&this.type!=="reset")return!1;let t;if(this.form?t=this.getRootNode()?.getElementById(this.form):t=this.closest("form"),!t||!(t instanceof HTMLFormElement))throw new Error("The element link to the button does not exist or is invalid");return this.type==="reset"&&t.reset(),this.type==="submit"&&t.requestSubmit(),!0}}return r([o({reflect:!0})],e.prototype,"type",2),r([o({reflect:!0})],e.prototype,"variant",2),r([o({type:Boolean,reflect:!0,attribute:"fixed-color"})],e.prototype,"fixedColor",2),r([o({reflect:!0})],e.prototype,"size",2),r([o({type:Boolean,reflect:!0})],e.prototype,"rounded",2),r([o({type:Boolean,reflect:!0})],e.prototype,"slide",2),r([o()],e.prototype,"form",2),r([o()],e.prototype,"href",2),r([o()],e.prototype,"target",2),r([o()],e.prototype,"download",2),r([o({type:Boolean,reflect:!0})],e.prototype,"loading",2),e};var c=class n extends Event{static{this.eventName="command"}constructor(e,a){super(n.eventName,{bubbles:!1,composed:!0,cancelable:!0}),this.command=e,this.source=a}};function d(n,e){let a=globalThis.CommandEvent;return typeof a=="function"?new a(c.eventName,{command:n,source:e,cancelable:!0,composed:!0}):new c(n,e)}var g=n=>{class e extends n{handleCommandClick(){let i=this.getAttribute("commandfor");if(!i)return;let l=this.getRootNode().getElementById(i);if(!l)throw new Error(`The given id [${i}] do not correspond to any command target`);l.dispatchEvent(d(this.getAttribute("command")??"",this))}}return r([o({reflect:!0})],e.prototype,"command",2),r([o({attribute:"commandfor"})],e.prototype,"commandFor",2),e};var x=s`
+  :host {
+    --_solid: var(--eun-color-primary-500, #3d6fff);
+    --_solid-hover: var(--eun-color-primary-700, #3662e0);
+    --_solid-active: var(--eun-color-primary-800, #2d52bd);
+    --_onSolid: var(--eun-color-on-primary-500, #ffffff);
+    --_accent: var(--eun-color-primary-500, #3d6fff);
+    --_tint: var(--eun-color-primary-transparent, #3d6fff33);
+    --_tint-hover: var(--eun-color-primary-transparent-hover, #3d6fff4d);
+    --_tint-active: var(--eun-color-primary-transparent-active, #3d6fff66);
+    --_fgTint: var(--_accent);
+    --_wash-hover: var(--_tint-hover);
+    --_wash-active: var(--_tint-active);
+    --_flat: var(--eun-surface-sunken, #f7f8fa);
+    --_flat-hover: var(--eun-surface-sunken-hover, #edeff0);
+    --_flatFg: var(--eun-text-secondary, #484e61);
+    --_ring: var(--eun-color-primary-700, #3662e0);
+  }
+  :host([variant="secondary"]) {
+    --_solid: var(--eun-color-secondary-500, #e5a030);
+    --_solid-hover: var(--eun-color-secondary-700, #ca8d2a);
+    --_solid-active: var(--eun-color-secondary-800, #a97624);
+    --_onSolid: var(--eun-color-on-secondary-500, #000000de);
+    --_accent: var(--eun-color-secondary-500, #e5a030);
+    --_tint: var(--eun-color-secondary-transparent, #e5a03033);
+    --_tint-hover: var(--eun-color-secondary-transparent-hover, #e5a0304d);
+    --_tint-active: var(--eun-color-secondary-transparent-active, #e5a03066);
+    --_ring: var(--eun-color-secondary-700, #ca8d2a);
+  }
+  :host([variant="critical"]) {
+    --_solid: var(--eun-color-critical-100, #aa0014);
+    --_solid-hover: var(--eun-color-critical-100, #aa0014);
+    --_solid-active: var(--eun-color-critical-100, #aa0014);
+    --_onSolid: #fff;
+    --_accent: var(--eun-color-critical-100, #aa0014);
+    --_tint: var(--eun-color-critical-30, #faf0f1);
+    --_tint-hover: var(--eun-color-critical-50, #f1d6d9);
+    --_tint-active: var(--eun-color-critical-90, #e4adb4);
+    --_ring: var(--eun-color-critical-100, #aa0014);
+  }
+  :host([variant="success"]) {
+    --_solid: var(--eun-color-success-100, #1a9948);
+    --_solid-hover: var(--eun-color-success-100, #1a9948);
+    --_solid-active: var(--eun-color-success-100, #1a9948);
+    --_onSolid: #fff;
+    --_accent: var(--eun-color-success-100, #1a9948);
+    --_tint: var(--eun-color-success-30, #f1f9f4);
+    --_tint-hover: var(--eun-color-success-50, #daefe2);
+    --_tint-active: var(--eun-color-success-90, #b6dec4);
+    --_ring: var(--eun-color-success-100, #1a9948);
+  }
+  :host([variant="warning"]) {
+    --_solid: var(--eun-color-warning-100, #c85207);
+    --_solid-hover: var(--eun-color-warning-100, #c85207);
+    --_solid-active: var(--eun-color-warning-100, #c85207);
+    --_onSolid: #fff;
+    --_accent: var(--eun-color-warning-100, #c85207);
+    --_tint: var(--eun-color-warning-30, #fcf5f0);
+    --_tint-hover: var(--eun-color-warning-50, #f6e3d7);
+    --_tint-active: var(--eun-color-warning-90, #edc8b0);
+    --_ring: var(--eun-color-warning-100, #c85207);
+  }
+  :host([variant="medium"]) {
+    --_solid: var(--eun-color-grey-700, #484e61);
+    --_solid-hover: var(--eun-color-grey-800, #071621);
+    --_solid-active: var(--eun-color-grey-900, #000000);
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+    --_accent: var(--eun-color-grey-900, #000000);
+    --_tint: color-mix(
+      in srgb,
+      var(--eun-color-grey-700, #484e61) 20%,
+      transparent
+    );
+    --_tint-hover: color-mix(
+      in srgb,
+      var(--eun-color-grey-700, #484e61) 30%,
+      transparent
+    );
+    --_tint-active: color-mix(
+      in srgb,
+      var(--eun-color-grey-700, #484e61) 40%,
+      transparent
+    );
+    --_ring: var(--eun-color-grey-700, #484e61);
+  }
+  :host([variant="light"]) {
+    --_solid: var(--eun-color-grey-0, #ffffff);
+    --_solid-hover: var(--eun-color-grey-200, #ecedf0);
+    --_solid-active: var(--eun-color-grey-300, #dee0e7);
+    --_onSolid: var(--eun-color-grey-900, #000000);
+  }
+  :host([variant="light"][fixed-color]) {
+    --_solid: #ffffff;
+    --_solid-hover: #ecedf0;
+    --_solid-active: #dee0e7;
+    --_onSolid: #000000;
+  }
+  :host([variant="dark"]) {
+    --_solid: var(--eun-color-grey-800, #071621);
+    --_solid-hover: var(--eun-color-grey-900, #000000);
+    --_solid-active: var(--eun-color-grey-900, #000000);
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+  }
+  :host([variant="dark"][fixed-color]) {
+    --_solid: #071621;
+    --_solid-hover: #000000;
+    --_solid-active: #000000;
+    --_onSolid: #ffffff;
+  }
+  :host([variant="light"]),
+  :host([variant="dark"]) {
+    --_accent: var(--_solid);
+    --_tint: var(--_solid);
+    --_tint-hover: var(--_solid-hover);
+    --_tint-active: var(--_solid-active);
+    --_fgTint: var(--_onSolid);
+    --_wash-hover: color-mix(in srgb, var(--_solid) 16%, transparent);
+    --_wash-active: color-mix(in srgb, var(--_solid) 28%, transparent);
+    --_flat: color-mix(in srgb, var(--_solid) 16%, transparent);
+    --_flat-hover: color-mix(in srgb, var(--_solid) 24%, transparent);
+    --_flatFg: var(--_solid);
+    --_ring: var(--_solid);
+  }
+`;export{u as a,x as b,g as c};

package/dist/cdn/components/chunks/{chunk-32KRPOPV.js → chunk-5XJGYXW7.js}

@@ -11,10 +11,10 @@ import{g as o}from"./chunk-XH6NREVZ.js";var r=o`
     max-height: var(--field-listbox-max-height, 260px);
     overflow-y: auto;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--_textColor);
     background: var(--eun-surface-color, #ffffff);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     box-shadow: var(
       --eun-shadow-m,
@@ -46,13 +46,13 @@ import{g as o}from"./chunk-XH6NREVZ.js";var r=o`
     background: var(--eun-content-hover, #edeff0);
   }
   #listbox li.selected {
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(--eun-color-primary-500, #3d6fff);
   }
   #listbox li mark {
     background: var(--field-match-background, none);
     color: var(--field-match-color, var(--eun-color-primary-500, #3d6fff));
-    font-weight: var(--field-match-font-weight, var(--eun-fontWeight-l, 700));
+    font-weight: var(--field-match-font-weight, var(--eun-font-weight-l, 700));
     text-decoration: var(--field-match-text-decoration, none);
   }
   #listbox .no-results,
@@ -64,8 +64,8 @@ import{g as o}from"./chunk-XH6NREVZ.js";var r=o`
   #listbox .group-label {
     cursor: default;
     padding-block-end: var(--eun-space-xxs, 1.6px);
-    font-size: var(--eun-fontSize-xs, 12px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-xs, 12px);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(--_placeholderColor);
     text-transform: uppercase;
   }

package/dist/cdn/components/chunks/{chunk-O2HNWH65.js → chunk-5XJLIHAU.js}

@@ -1,4 +1,4 @@
-import{a as b}from"./chunk-MMLIPCOY.js";import{a as f}from"./chunk-A4EQSU36.js";import{a as m}from"./chunk-5EVP7YNE.js";import{a,b as l,c as d,d as p,f as c,g as n,h as r,n as s,s as u}from"./chunk-XH6NREVZ.js";var v=n`
+import{a as b}from"./chunk-MMLIPCOY.js";import{a as m}from"./chunk-A4EQSU36.js";import{a as f}from"./chunk-5EVP7YNE.js";import{a,b as l,c as d,d as p,f as u,g as n,h as r,n as s,s as c}from"./chunk-XH6NREVZ.js";var v=n`
   :host {
     display: inline-flex;
     align-items: center;
@@ -87,11 +87,11 @@ import{a as b}from"./chunk-MMLIPCOY.js";import{a as f}from"./chunk-A4EQSU36.js";
     overflow: hidden;
     border-radius: var(
       --loader-bar-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     background: var(
       --loader-bar-track-color,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken-strong, #ecedf0)
     );
   }
 
@@ -138,19 +138,19 @@ import{a as b}from"./chunk-MMLIPCOY.js";import{a as f}from"./chunk-A4EQSU36.js";
       animation-duration: 2.8s;
     }
   }
-`,h=[v,y];var k="eun-loader",i,t=class extends u{constructor(){super(...arguments);this.label="Loading\u2026";this.variant="dots";d(this,i);this.sticky=!1;this.stickyPosition="top"}set size(e){if(p(this,i,e),!e){this.style.removeProperty("--_size");return}let o;/%$/.test(e)?o=`${parseFloat(e)/100}rem`:/^\d+(\.\d+)?$/.test(e)?o=`${e}px`:o=e,this.style.setProperty("--_size",o)}get size(){return l(this,i)}get clampedValue(){return this.value===void 0?void 0:Math.min(100,Math.max(0,this.value))}render(){if(this.variant==="bar"){let e=this.clampedValue;return s`
+`,h=[v,y];var k="eun-loader",i,t=class extends c{constructor(){super(...arguments);this.label="Loading\u2026";this.variant="dots";d(this,i);this.sticky=!1;this.stickyPosition="top"}set size(e){if(p(this,i,e),!e){this.style.removeProperty("--_size");return}let o;/%$/.test(e)?o=`${parseFloat(e)/100}rem`:/^\d+(\.\d+)?$/.test(e)?o=`${e}px`:o=e,this.style.setProperty("--_size",o)}get size(){return l(this,i)}get clampedValue(){return this.value===void 0?void 0:Math.min(100,Math.max(0,this.value))}render(){if(this.variant==="bar"){let e=this.clampedValue;return s`
         <div
           id="track"
           role="progressbar"
           aria-label=${this.label}
           aria-valuemin="0"
           aria-valuemax="100"
-          aria-valuenow=${m(e)}
+          aria-valuenow=${f(e)}
         >
           <div
             id="fill"
-            class=${f({indeterminate:e===void 0})}
+            class=${m({indeterminate:e===void 0})}
             style=${b({width:e===void 0?"":`${e}%`})}
           ></div>
         </div>
-      `}return s`<span role="status" aria-label=${this.label}></span>`}};i=new WeakMap,t.styles=h,a([r()],t.prototype,"label",2),a([r({reflect:!0})],t.prototype,"variant",2),a([r({hasChanged:()=>!1})],t.prototype,"size",1),a([r({type:Number})],t.prototype,"value",2),a([r({type:Boolean,reflect:!0})],t.prototype,"sticky",2),a([r({attribute:"sticky-position",reflect:!0})],t.prototype,"stickyPosition",2),t=a([c(k)],t);export{k as a,t as b};
+      `}return s`<span role="status" aria-label=${this.label}></span>`}};i=new WeakMap,t.styles=h,a([r()],t.prototype,"label",2),a([r({reflect:!0})],t.prototype,"variant",2),a([r({hasChanged:()=>!1})],t.prototype,"size",1),a([r({type:Number})],t.prototype,"value",2),a([r({type:Boolean,reflect:!0})],t.prototype,"sticky",2),a([r({attribute:"sticky-position",reflect:!0})],t.prototype,"stickyPosition",2),t=a([u(k)],t);export{k as a,t as b};

package/dist/cdn/components/chunks/{chunk-5GF2Q3NR.js → chunk-74AOAB4X.js}

@@ -1,7 +1,7 @@
 import{g as o}from"./chunk-XH6NREVZ.js";var r=o`
   :host {
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: inline-block;
     outline: none;
   }

package/dist/cdn/components/chunks/{chunk-WYMBUIKX.js → chunk-A6KGFALA.js}

@@ -6,9 +6,9 @@ import{a as i,d as b,e as d,f as u}from"./chunk-E74CM7UG.js";import{a as t,f as
       var(--eun-surface-color, #ffffff)
     );
     box-shadow: inset 0 0 0 9999px transparent;
-    border-bottom: var(--eun-borderWidth-s, 1px) solid
+    border-bottom: var(--eun-border-width-s, 1px) solid
       var(--table-border-color, var(--eun-border-color, #dee0e7));
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
     transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
   }
 
@@ -74,7 +74,7 @@ import{a as i,d as b,e as d,f as u}from"./chunk-E74CM7UG.js";import{a as t,f as
       var(--table-header-background, var(--eun-surface-color, #ffffff))
     );
     box-shadow: inset 0 0 0 9999px transparent;
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)
@@ -119,7 +119,7 @@ import{a as i,d as b,e as d,f as u}from"./chunk-E74CM7UG.js";import{a as t,f as
     );
     box-shadow: inset 0 0 0 9999px transparent;
     transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid
+    border-inline-start: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)