@editora/ui-core 0.1.8 → 0.1.10

package/dist/meter.cjs.js

@@ -0,0 +1,241 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-1b301e7f.js"),f=`
+  :host {
+    display: block;
+    width: 100%;
+    --ui-meter-bg: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 44%, transparent);
+    --ui-meter-fill: var(--ui-color-primary, #2563eb);
+    --ui-meter-fill-soft:
+      linear-gradient(
+        90deg,
+        color-mix(in srgb, var(--ui-meter-fill, #2563eb) 84%, white 16%),
+        var(--ui-meter-fill, #2563eb)
+      );
+    --ui-meter-text: var(--ui-color-text, #0f172a);
+    --ui-meter-muted: var(--ui-color-muted, #64748b);
+    --ui-meter-height: 12px;
+    --ui-meter-radius: 999px;
+    --ui-meter-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-meter-circle-size: 76px;
+    --ui-meter-circle-thickness: 9px;
+    color-scheme: light dark;
+  }
+
+  .root {
+    display: grid;
+    gap: 10px;
+    min-inline-size: 0;
+  }
+
+  .meta {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    min-block-size: 16px;
+    font: 600 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
+    color: var(--ui-meter-text);
+    letter-spacing: 0.01em;
+  }
+
+  .label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .value-text {
+    color: var(--ui-meter-muted);
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  .track {
+    position: relative;
+    inline-size: 100%;
+    block-size: var(--ui-meter-height);
+    overflow: hidden;
+    border-radius: var(--ui-meter-radius);
+    border: var(--ui-meter-border);
+    background: var(--ui-meter-bg);
+    box-sizing: border-box;
+  }
+
+  .fill {
+    position: absolute;
+    inset: 0 auto 0 0;
+    inline-size: calc(var(--ui-meter-percent, 0) * 1%);
+    block-size: 100%;
+    border-radius: inherit;
+    background: var(--ui-meter-fill-soft);
+    transition: inline-size 180ms cubic-bezier(0.2, 0.9, 0.24, 1), transform 140ms ease;
+    will-change: inline-size;
+  }
+
+  .fill::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 60%);
+    pointer-events: none;
+  }
+
+  .circle {
+    display: none;
+    inline-size: var(--ui-meter-circle-size);
+    block-size: var(--ui-meter-circle-size);
+    position: relative;
+    place-items: center;
+  }
+
+  .circle-track,
+  .circle-fill {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    -webkit-mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--ui-meter-circle-thickness)),
+      #000 calc(100% - var(--ui-meter-circle-thickness) + 1px)
+    );
+    mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--ui-meter-circle-thickness)),
+      #000 calc(100% - var(--ui-meter-circle-thickness) + 1px)
+    );
+  }
+
+  .circle-track {
+    background: color-mix(in srgb, var(--ui-meter-bg) 84%, transparent);
+  }
+
+  .circle-fill {
+    background: conic-gradient(var(--ui-meter-fill) calc(var(--ui-meter-percent, 0) * 1%), transparent 0);
+    transition: background 180ms cubic-bezier(0.2, 0.9, 0.24, 1);
+  }
+
+  .circle-value {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    inline-size: calc(var(--ui-meter-circle-size) - (var(--ui-meter-circle-thickness) * 2));
+    block-size: calc(var(--ui-meter-circle-size) - (var(--ui-meter-circle-thickness) * 2));
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent);
+    color: var(--ui-meter-text);
+    font: 700 12px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
+    text-align: center;
+    padding: 6px;
+    box-sizing: border-box;
+  }
+
+  :host([mode="circle"]) {
+    inline-size: fit-content;
+  }
+
+  :host([mode="circle"]) .track {
+    display: none;
+  }
+
+  :host([mode="circle"]) .circle {
+    display: grid;
+  }
+
+  :host([size="xs"]) {
+    --ui-meter-height: 6px;
+    --ui-meter-circle-size: 36px;
+    --ui-meter-circle-thickness: 4px;
+  }
+
+  :host([size="sm"]) {
+    --ui-meter-height: 8px;
+    --ui-meter-circle-size: 52px;
+    --ui-meter-circle-thickness: 6px;
+  }
+
+  :host([size="lg"]) {
+    --ui-meter-height: 16px;
+    --ui-meter-circle-size: 96px;
+    --ui-meter-circle-thickness: 10px;
+  }
+
+  :host([shape="round"]) { --ui-meter-radius: 10px; }
+  :host([shape="square"]) { --ui-meter-radius: 2px; }
+
+  :host([variant="solid"]) {
+    --ui-meter-fill-soft: var(--ui-meter-fill);
+  }
+
+  :host([variant="soft"]) {
+    --ui-meter-bg: color-mix(in srgb, var(--ui-meter-fill, #2563eb) 14%, transparent);
+    --ui-meter-border: 0;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-meter-bg: #1f2937;
+    --ui-meter-text: #f8fafc;
+    --ui-meter-muted: #cbd5e1;
+    --ui-meter-border: 1px solid #334155;
+    --ui-meter-fill-soft: var(--ui-meter-fill);
+  }
+
+  :host([tone="brand"]) { --ui-meter-fill: var(--ui-color-primary, #2563eb); }
+  :host([tone="success"]) { --ui-meter-fill: #16a34a; }
+  :host([tone="warning"]) { --ui-meter-fill: #d97706; }
+  :host([tone="danger"]) { --ui-meter-fill: #dc2626; }
+  :host([tone="neutral"]) { --ui-meter-fill: #64748b; }
+
+  :host([data-meter-state="low"]:not([tone])) {
+    --ui-meter-fill: #d97706;
+  }
+
+  :host([data-meter-state="optimum"]:not([tone])) {
+    --ui-meter-fill: #16a34a;
+  }
+
+  :host([data-meter-state="suboptimum"]:not([tone])) {
+    --ui-meter-fill: #f59e0b;
+  }
+
+  :host([data-meter-state="high"]:not([tone])) {
+    --ui-meter-fill: #2563eb;
+  }
+`;function s(i,e){if(i==null||i==="")return e;const t=Number(i);return Number.isFinite(t)?t:e}function o(i,e,t){return i<e?e:i>t?t:i}function g(i,e,t,r){return r==null?i<e?"low":i>t?"high":"optimum":r<e?i<=e?"optimum":i<=t?"suboptimum":"high":r>t?i>=t?"optimum":i>=e?"suboptimum":"low":i<e?"low":i>t?"high":"optimum"}class p extends b.ElementBase{constructor(){super(...arguments),this._lastChangeKey=""}static get observedAttributes(){return["value","min","max","low","high","optimum","label","show-label","format","precision","size","variant","tone","shape","mode"]}get metrics(){let e=s(this.getAttribute("min"),0),t=s(this.getAttribute("max"),1);t<=e&&(t=e+1);const r=o(s(this.getAttribute("value"),e),e,t),l=o(s(this.getAttribute("low"),e+(t-e)*.25),e,t),n=o(s(this.getAttribute("high"),e+(t-e)*.75),e,t),a=Math.min(l,n),c=Math.max(l,n),u=this.getAttribute("optimum"),m=u==null?null:o(s(u,r),e,t),d=(r-e)/(t-e)*100,h=g(r,a,c,m);return{value:r,min:e,max:t,low:a,high:c,optimum:m,percent:d,state:h,text:this._formatValue(r,e,t,d)}}_formatValue(e,t,r,l){const n=this.getAttribute("format")||"value",a=Math.max(0,Math.floor(s(this.getAttribute("precision"),0)));return n==="percent"?`${l.toFixed(a)}%`:n==="fraction"?`${e.toFixed(a)} / ${r.toFixed(a)}`:t===0&&r===1?e.toFixed(Math.max(a,2)):e.toFixed(a)}_emitChange(e){const t=[e.value,e.min,e.max,e.low,e.high,e.optimum??"",e.percent.toFixed(3),e.state].join("|");t!==this._lastChangeKey&&(this._lastChangeKey=t,this.dispatchEvent(new CustomEvent("change",{detail:{value:e.value,min:e.min,max:e.max,low:e.low,high:e.high,optimum:e.optimum,percent:e.percent,state:e.state},bubbles:!0,composed:!0})))}render(){const e=this.metrics,t=this.getAttribute("label")||"",r=this.hasAttribute("show-label")||!!t;this.setAttribute("data-meter-state",e.state),this.style.setProperty("--ui-meter-percent",e.percent.toFixed(3)),this.setContent(`
+      <style>${f}</style>
+      <div class="root">
+        ${r?`
+          <div class="meta" part="meta">
+            <span class="label" part="label">${t||"Meter"}</span>
+            <span class="value-text" part="value-text">${e.text}</span>
+          </div>
+        `:""}
+        <div
+          class="track"
+          part="track"
+          role="meter"
+          aria-valuemin="${e.min}"
+          aria-valuemax="${e.max}"
+          aria-valuenow="${e.value}"
+          aria-valuetext="${e.text}"
+          aria-label="${t||"Meter"}"
+        >
+          <div class="fill" part="fill"></div>
+        </div>
+        <div
+          class="circle"
+          part="circle"
+          role="meter"
+          aria-valuemin="${e.min}"
+          aria-valuemax="${e.max}"
+          aria-valuenow="${e.value}"
+          aria-valuetext="${e.text}"
+          aria-label="${t||"Meter"}"
+        >
+          <div class="circle-track" part="circle-track"></div>
+          <div class="circle-fill" part="circle-fill"></div>
+          <div class="circle-value" part="circle-value">${e.text}</div>
+        </div>
+      </div>
+    `),this._emitChange(e)}}typeof customElements<"u"&&!customElements.get("ui-meter")&&customElements.define("ui-meter",p);exports.UIMeter=p;

package/dist/meter.esm.js

@@ -0,0 +1,334 @@
+import { E as h } from "./ElementBase-909688f3.mjs";
+const b = `
+  :host {
+    display: block;
+    width: 100%;
+    --ui-meter-bg: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 44%, transparent);
+    --ui-meter-fill: var(--ui-color-primary, #2563eb);
+    --ui-meter-fill-soft:
+      linear-gradient(
+        90deg,
+        color-mix(in srgb, var(--ui-meter-fill, #2563eb) 84%, white 16%),
+        var(--ui-meter-fill, #2563eb)
+      );
+    --ui-meter-text: var(--ui-color-text, #0f172a);
+    --ui-meter-muted: var(--ui-color-muted, #64748b);
+    --ui-meter-height: 12px;
+    --ui-meter-radius: 999px;
+    --ui-meter-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-meter-circle-size: 76px;
+    --ui-meter-circle-thickness: 9px;
+    color-scheme: light dark;
+  }
+
+  .root {
+    display: grid;
+    gap: 10px;
+    min-inline-size: 0;
+  }
+
+  .meta {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    min-block-size: 16px;
+    font: 600 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
+    color: var(--ui-meter-text);
+    letter-spacing: 0.01em;
+  }
+
+  .label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .value-text {
+    color: var(--ui-meter-muted);
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  .track {
+    position: relative;
+    inline-size: 100%;
+    block-size: var(--ui-meter-height);
+    overflow: hidden;
+    border-radius: var(--ui-meter-radius);
+    border: var(--ui-meter-border);
+    background: var(--ui-meter-bg);
+    box-sizing: border-box;
+  }
+
+  .fill {
+    position: absolute;
+    inset: 0 auto 0 0;
+    inline-size: calc(var(--ui-meter-percent, 0) * 1%);
+    block-size: 100%;
+    border-radius: inherit;
+    background: var(--ui-meter-fill-soft);
+    transition: inline-size 180ms cubic-bezier(0.2, 0.9, 0.24, 1), transform 140ms ease;
+    will-change: inline-size;
+  }
+
+  .fill::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 60%);
+    pointer-events: none;
+  }
+
+  .circle {
+    display: none;
+    inline-size: var(--ui-meter-circle-size);
+    block-size: var(--ui-meter-circle-size);
+    position: relative;
+    place-items: center;
+  }
+
+  .circle-track,
+  .circle-fill {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    -webkit-mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--ui-meter-circle-thickness)),
+      #000 calc(100% - var(--ui-meter-circle-thickness) + 1px)
+    );
+    mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--ui-meter-circle-thickness)),
+      #000 calc(100% - var(--ui-meter-circle-thickness) + 1px)
+    );
+  }
+
+  .circle-track {
+    background: color-mix(in srgb, var(--ui-meter-bg) 84%, transparent);
+  }
+
+  .circle-fill {
+    background: conic-gradient(var(--ui-meter-fill) calc(var(--ui-meter-percent, 0) * 1%), transparent 0);
+    transition: background 180ms cubic-bezier(0.2, 0.9, 0.24, 1);
+  }
+
+  .circle-value {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    inline-size: calc(var(--ui-meter-circle-size) - (var(--ui-meter-circle-thickness) * 2));
+    block-size: calc(var(--ui-meter-circle-size) - (var(--ui-meter-circle-thickness) * 2));
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent);
+    color: var(--ui-meter-text);
+    font: 700 12px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
+    text-align: center;
+    padding: 6px;
+    box-sizing: border-box;
+  }
+
+  :host([mode="circle"]) {
+    inline-size: fit-content;
+  }
+
+  :host([mode="circle"]) .track {
+    display: none;
+  }
+
+  :host([mode="circle"]) .circle {
+    display: grid;
+  }
+
+  :host([size="xs"]) {
+    --ui-meter-height: 6px;
+    --ui-meter-circle-size: 36px;
+    --ui-meter-circle-thickness: 4px;
+  }
+
+  :host([size="sm"]) {
+    --ui-meter-height: 8px;
+    --ui-meter-circle-size: 52px;
+    --ui-meter-circle-thickness: 6px;
+  }
+
+  :host([size="lg"]) {
+    --ui-meter-height: 16px;
+    --ui-meter-circle-size: 96px;
+    --ui-meter-circle-thickness: 10px;
+  }
+
+  :host([shape="round"]) { --ui-meter-radius: 10px; }
+  :host([shape="square"]) { --ui-meter-radius: 2px; }
+
+  :host([variant="solid"]) {
+    --ui-meter-fill-soft: var(--ui-meter-fill);
+  }
+
+  :host([variant="soft"]) {
+    --ui-meter-bg: color-mix(in srgb, var(--ui-meter-fill, #2563eb) 14%, transparent);
+    --ui-meter-border: 0;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-meter-bg: #1f2937;
+    --ui-meter-text: #f8fafc;
+    --ui-meter-muted: #cbd5e1;
+    --ui-meter-border: 1px solid #334155;
+    --ui-meter-fill-soft: var(--ui-meter-fill);
+  }
+
+  :host([tone="brand"]) { --ui-meter-fill: var(--ui-color-primary, #2563eb); }
+  :host([tone="success"]) { --ui-meter-fill: #16a34a; }
+  :host([tone="warning"]) { --ui-meter-fill: #d97706; }
+  :host([tone="danger"]) { --ui-meter-fill: #dc2626; }
+  :host([tone="neutral"]) { --ui-meter-fill: #64748b; }
+
+  :host([data-meter-state="low"]:not([tone])) {
+    --ui-meter-fill: #d97706;
+  }
+
+  :host([data-meter-state="optimum"]:not([tone])) {
+    --ui-meter-fill: #16a34a;
+  }
+
+  :host([data-meter-state="suboptimum"]:not([tone])) {
+    --ui-meter-fill: #f59e0b;
+  }
+
+  :host([data-meter-state="high"]:not([tone])) {
+    --ui-meter-fill: #2563eb;
+  }
+`;
+function s(i, e) {
+  if (i == null || i === "")
+    return e;
+  const t = Number(i);
+  return Number.isFinite(t) ? t : e;
+}
+function o(i, e, t) {
+  return i < e ? e : i > t ? t : i;
+}
+function f(i, e, t, r) {
+  return r == null ? i < e ? "low" : i > t ? "high" : "optimum" : r < e ? i <= e ? "optimum" : i <= t ? "suboptimum" : "high" : r > t ? i >= t ? "optimum" : i >= e ? "suboptimum" : "low" : i < e ? "low" : i > t ? "high" : "optimum";
+}
+class g extends h {
+  constructor() {
+    super(...arguments), this._lastChangeKey = "";
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "min",
+      "max",
+      "low",
+      "high",
+      "optimum",
+      "label",
+      "show-label",
+      "format",
+      "precision",
+      "size",
+      "variant",
+      "tone",
+      "shape",
+      "mode"
+    ];
+  }
+  get metrics() {
+    let e = s(this.getAttribute("min"), 0), t = s(this.getAttribute("max"), 1);
+    t <= e && (t = e + 1);
+    const r = o(s(this.getAttribute("value"), e), e, t), l = o(s(this.getAttribute("low"), e + (t - e) * 0.25), e, t), n = o(s(this.getAttribute("high"), e + (t - e) * 0.75), e, t), a = Math.min(l, n), c = Math.max(l, n), u = this.getAttribute("optimum"), m = u == null ? null : o(s(u, r), e, t), d = (r - e) / (t - e) * 100, p = f(r, a, c, m);
+    return {
+      value: r,
+      min: e,
+      max: t,
+      low: a,
+      high: c,
+      optimum: m,
+      percent: d,
+      state: p,
+      text: this._formatValue(r, e, t, d)
+    };
+  }
+  _formatValue(e, t, r, l) {
+    const n = this.getAttribute("format") || "value", a = Math.max(0, Math.floor(s(this.getAttribute("precision"), 0)));
+    return n === "percent" ? `${l.toFixed(a)}%` : n === "fraction" ? `${e.toFixed(a)} / ${r.toFixed(a)}` : t === 0 && r === 1 ? e.toFixed(Math.max(a, 2)) : e.toFixed(a);
+  }
+  _emitChange(e) {
+    const t = [
+      e.value,
+      e.min,
+      e.max,
+      e.low,
+      e.high,
+      e.optimum ?? "",
+      e.percent.toFixed(3),
+      e.state
+    ].join("|");
+    t !== this._lastChangeKey && (this._lastChangeKey = t, this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: {
+          value: e.value,
+          min: e.min,
+          max: e.max,
+          low: e.low,
+          high: e.high,
+          optimum: e.optimum,
+          percent: e.percent,
+          state: e.state
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  render() {
+    const e = this.metrics, t = this.getAttribute("label") || "", r = this.hasAttribute("show-label") || !!t;
+    this.setAttribute("data-meter-state", e.state), this.style.setProperty("--ui-meter-percent", e.percent.toFixed(3)), this.setContent(`
+      <style>${b}</style>
+      <div class="root">
+        ${r ? `
+          <div class="meta" part="meta">
+            <span class="label" part="label">${t || "Meter"}</span>
+            <span class="value-text" part="value-text">${e.text}</span>
+          </div>
+        ` : ""}
+        <div
+          class="track"
+          part="track"
+          role="meter"
+          aria-valuemin="${e.min}"
+          aria-valuemax="${e.max}"
+          aria-valuenow="${e.value}"
+          aria-valuetext="${e.text}"
+          aria-label="${t || "Meter"}"
+        >
+          <div class="fill" part="fill"></div>
+        </div>
+        <div
+          class="circle"
+          part="circle"
+          role="meter"
+          aria-valuemin="${e.min}"
+          aria-valuemax="${e.max}"
+          aria-valuenow="${e.value}"
+          aria-valuetext="${e.text}"
+          aria-label="${t || "Meter"}"
+        >
+          <div class="circle-track" part="circle-track"></div>
+          <div class="circle-fill" part="circle-fill"></div>
+          <div class="circle-value" part="circle-value">${e.text}</div>
+        </div>
+      </div>
+    `), this._emitChange(e);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-meter") && customElements.define("ui-meter", g);
+export {
+  g as UIMeter
+};