@editora/ui-core 0.1.20 → 0.1.22

package/dist/rating.esm.js

@@ -1,5 +1,5 @@
-import { E as V } from "./ElementBase-YlTLMsGk.mjs";
-const M = `
+import { E as M } from "./ElementBase-YlTLMsGk.mjs";
+const V = `
   :host {
     --ui-rating-size: var(--ui-control-size, var(--ui-font-size-lg, 20px));
     --ui-rating-gap: var(--ui-control-gap, 6px);
@@ -13,6 +13,8 @@ const M = `
     --ui-rating-easing: var(--ui-motion-easing, cubic-bezier(0.2, 0.8, 0.2, 1));
     --ui-rating-radius: var(--ui-control-radius, var(--ui-radius, 4px));
     display: inline-flex;
+    flex-wrap: wrap;
+    max-inline-size: 100%;
     align-items: center;
     gap: var(--ui-rating-gap);
     color-scheme: light dark;
@@ -28,7 +30,7 @@ const M = `
   }
 
   :host([tone="neutral"]) {
-    --ui-rating-color: color-mix(in srgb, var(--ui-color-muted, #64748b) 74%, var(--ui-color-text, #0f172a) 26%);
+    --ui-rating-color: color-mix(in srgb, var(--ui-color-muted, #526175) 74%, var(--ui-color-text, #0f172a) 26%);
   }
 
   :host([tone="info"]) {
@@ -36,7 +38,7 @@ const M = `
   }
 
   :host([tone="success"]) {
-    --ui-rating-color: var(--ui-color-success, #16a34a);
+    --ui-rating-color: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
@@ -253,7 +255,7 @@ const M = `
 
   .label {
     font-size: var(--ui-font-size-sm, 12px);
-    color: var(--ui-color-muted, #64748b);
+    color: var(--ui-color-muted, #526175);
     white-space: nowrap;
   }
 
@@ -317,68 +319,68 @@ const M = `
     }
   }
 `;
-function x(e) {
-  return e !== null && e.toLowerCase() !== "false" && e !== "0";
+function x(i) {
+  return i !== null && i.toLowerCase() !== "false" && i !== "0";
 }
-function C(e) {
-  return e === "soft" || e === "glass" || e === "contrast" || e === "minimal" ? e : "default";
+function C(i) {
+  return i === "soft" || i === "glass" || i === "contrast" || i === "minimal" ? i : "default";
 }
-function $(e) {
-  return e === "sm" || e === "lg" ? e : "md";
+function $(i) {
+  return i === "sm" || i === "lg" ? i : "md";
 }
-function N(e) {
-  return e === "square" || e === "pill" ? e : "rounded";
+function N(i) {
+  return i === "square" || i === "pill" ? i : "rounded";
 }
-function T(e) {
-  return e === "neutral" || e === "info" || e === "success" || e === "warning" || e === "danger" ? e : null;
+function T(i) {
+  return i === "neutral" || i === "info" || i === "success" || i === "warning" || i === "danger" ? i : null;
 }
-function I(e) {
-  return e === "hover" || e === "focus" || e === "disabled" ? e : "idle";
+function I(i) {
+  return i === "hover" || i === "focus" || i === "disabled" ? i : "idle";
 }
-function y(e) {
-  return e === "scale" || e === "pulse" || e === "none" ? e : null;
+function y(i) {
+  return i === "scale" || i === "pulse" || i === "none" ? i : null;
 }
-function q(e) {
-  if (!e) return null;
-  const t = e.trim();
+function q(i) {
+  if (!i) return null;
+  const t = i.trim();
   return t ? t === "full" ? "999px" : /^-?\\d+(\\.\\d+)?$/.test(t) ? `${t}px` : t : null;
 }
-function A(e) {
-  const t = Number(e);
+function A(i) {
+  const t = Number(i);
   return !Number.isFinite(t) || t <= 0 ? 1 : t === 0.5 ? 0.5 : 1;
 }
-function l(e, t, i) {
-  return Math.min(i, Math.max(t, e));
+function n(i, t, e) {
+  return Math.min(e, Math.max(t, i));
 }
-function u(e, t) {
-  const i = Math.round(e / t) * t;
-  return Number(i.toFixed(2));
+function u(i, t) {
+  const e = Math.round(i / t) * t;
+  return Number(e.toFixed(2));
 }
-function o(e, t) {
-  const i = e.getAttribute(t);
-  if (i != null) return i;
-  const r = e[t];
+function o(i, t) {
+  const e = i.getAttribute(t);
+  if (e != null) return e;
+  const r = i[t];
   return typeof r == "string" && r.length > 0 ? r : null;
 }
-function f(e, t) {
-  const i = e.getAttribute(t);
-  if (i != null) return x(i);
-  const r = e[t];
+function g(i, t) {
+  const e = i.getAttribute(t);
+  if (e != null) return x(e);
+  const r = i[t];
   return typeof r == "boolean" ? r : typeof r == "string" ? x(r) : !1;
 }
-function w(e) {
-  return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function w(i) {
+  return i.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function z(e) {
+function z(i) {
   return `
-    <svg viewBox="0 0 24 24" aria-hidden="true"${e ? ` class="${e}"` : ""}>
+    <svg viewBox="0 0 24 24" aria-hidden="true"${i ? ` class="${i}"` : ""}>
       <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
     </svg>
   `;
 }
-class B extends V {
+class B extends M {
   constructor() {
-    super(), this._stars = [], this._value = 0, this._max = 5, this._precision = 1, this._disabled = !1, this._readonly = !1, this._hoverValue = 0, this._onRootClick = this._onRootClick.bind(this), this._onRootMouseMove = this._onRootMouseMove.bind(this), this._onRootMouseLeave = this._onRootMouseLeave.bind(this), this._onRootFocusIn = this._onRootFocusIn.bind(this), this._onRootFocusOut = this._onRootFocusOut.bind(this), this._onRootKeyDown = this._onRootKeyDown.bind(this);
+    super(), this._autoAriaLabel = !1, this._stars = [], this._value = 0, this._max = 5, this._precision = 1, this._disabled = !1, this._readonly = !1, this._hoverValue = 0, this._onRootClick = this._onRootClick.bind(this), this._onRootMouseMove = this._onRootMouseMove.bind(this), this._onRootMouseLeave = this._onRootMouseLeave.bind(this), this._onRootFocusIn = this._onRootFocusIn.bind(this), this._onRootFocusOut = this._onRootFocusOut.bind(this), this._onRootKeyDown = this._onRootKeyDown.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -409,17 +411,17 @@ class B extends V {
   disconnectedCallback() {
     this.root.removeEventListener("click", this._onRootClick, !0), this.root.removeEventListener("mousemove", this._onRootMouseMove, !0), this.root.removeEventListener("mouseleave", this._onRootMouseLeave, !0), this.root.removeEventListener("focusin", this._onRootFocusIn, !0), this.root.removeEventListener("focusout", this._onRootFocusOut, !0), this.root.removeEventListener("keydown", this._onRootKeyDown, !0), super.disconnectedCallback();
   }
-  attributeChangedCallback(t, i, r) {
-    if (i !== r) {
+  attributeChangedCallback(t, e, r) {
+    if (e !== r) {
       if (t === "value") {
         const s = Number(r);
-        Number.isFinite(s) && (this._value = l(u(s, this._precision), 0, this._max), this._syncStars(), this._syncAria());
+        Number.isFinite(s) && (this._value = n(u(s, this._precision), 0, this._max), this._syncStars(), this._syncAria());
       }
       if (t === "max") {
         const s = Number(r);
         Number.isFinite(s) && s > 0 && (this._max = Math.max(1, s), this._value > this._max && (this._value = this._max), this._syncStars(), this._syncAria());
       }
-      if (t === "precision" && (this._precision = A(r), this._value = l(u(this._value, this._precision), 0, this._max), this._hoverValue = this._hoverValue > 0 ? l(u(this._hoverValue, this._precision), 0, this._max) : 0, this._syncStars(), this._syncAria()), t === "disabled" && (this._disabled = r !== null), t === "readonly" && (this._readonly = r !== null), t === "animation") {
+      if (t === "precision" && (this._precision = A(r), this._value = n(u(this._value, this._precision), 0, this._max), this._hoverValue = this._hoverValue > 0 ? n(u(this._hoverValue, this._precision), 0, this._max) : 0, this._syncStars(), this._syncAria()), t === "disabled" && (this._disabled = r !== null), t === "readonly" && (this._readonly = r !== null), t === "animation") {
         const s = y(r);
         s ? this.setAttribute("data-animation", s) : this.removeAttribute("data-animation");
       }
@@ -430,23 +432,23 @@ class B extends V {
     return this._value;
   }
   set value(t) {
-    const i = Number(t);
-    if (!Number.isFinite(i)) return;
-    const r = l(u(i, this._precision), 0, this._max);
+    const e = Number(t);
+    if (!Number.isFinite(e)) return;
+    const r = n(u(e, this._precision), 0, this._max);
     this._value !== r && (this._value = r, this.setAttribute("value", String(this._value)), this._syncStars(), this._syncAria(), this._emit("change"), this._emit("input"));
   }
   get max() {
     return this._max;
   }
   set max(t) {
-    const i = Number(t);
-    Number.isFinite(i) && (this._max = Math.max(1, i), this.setAttribute("max", String(this._max)), this._value > this._max && (this._value = this._max, this.setAttribute("value", String(this._value))), this.requestRender());
+    const e = Number(t);
+    Number.isFinite(e) && (this._max = Math.max(1, e), this.setAttribute("max", String(this._max)), this._value > this._max && (this._value = this._max, this.setAttribute("value", String(this._value))), this.requestRender());
   }
   get precision() {
     return this._precision;
   }
   set precision(t) {
-    this._precision = t === 0.5 ? 0.5 : 1, this.setAttribute("precision", String(this._precision)), this._value = l(u(this._value, this._precision), 0, this._max), this.requestRender();
+    this._precision = t === 0.5 ? 0.5 : 1, this.setAttribute("precision", String(this._precision)), this._value = n(u(this._value, this._precision), 0, this._max), this.requestRender();
   }
   get disabled() {
     return this._disabled;
@@ -465,16 +467,16 @@ class B extends V {
   }
   _getStarIndex(t) {
     if (!t) return -1;
-    const i = Number(t.dataset.index);
-    return Number.isFinite(i) ? i : -1;
+    const e = Number(t.dataset.index);
+    return Number.isFinite(e) ? e : -1;
   }
-  _getValueFromPointer(t, i) {
-    const r = this._getStarIndex(i);
+  _getValueFromPointer(t, e) {
+    const r = this._getStarIndex(e);
     if (r === -1) return this._value;
     if (this._precision !== 0.5)
       return r + 1;
-    const s = i.getBoundingClientRect(), n = t.clientX - s.left <= s.width / 2 ? 0.5 : 1;
-    return r + n;
+    const s = e.getBoundingClientRect(), l = t.clientX - s.left <= s.width / 2 ? 0.5 : 1;
+    return r + l;
   }
   _formatValue(t) {
     return Number.isInteger(t) ? String(t) : t.toFixed(1);
@@ -484,20 +486,20 @@ class B extends V {
   }
   _onRootClick(t) {
     if (this._disabled || this._readonly) return;
-    const i = t, r = this._getStarFromEventTarget(i.target);
-    r && (this.value = this._getValueFromPointer(i, r));
+    const e = t, r = this._getStarFromEventTarget(e.target);
+    r && (this.value = this._getValueFromPointer(e, r));
   }
   _onRootMouseMove(t) {
     if (this._disabled || this._readonly) return;
-    const i = t, r = this._getStarFromEventTarget(i.target);
-    r && (this._hoverValue = this._getValueFromPointer(i, r), this.setAttribute("state", "hover"), this._syncStars());
+    const e = t, r = this._getStarFromEventTarget(e.target);
+    r && (this._hoverValue = this._getValueFromPointer(e, r), this.setAttribute("state", "hover"), this._syncStars());
   }
   _onRootMouseLeave() {
     this._disabled || this._readonly || (this._hoverValue = 0, this.removeAttribute("state"), this._syncStars());
   }
   _onRootFocusIn(t) {
     if (this._disabled || this._readonly) return;
-    const i = this._getStarFromEventTarget(t.target), r = this._getStarIndex(i);
+    const e = this._getStarFromEventTarget(t.target), r = this._getStarIndex(e);
     r !== -1 && (this._hoverValue = r + 1, this.setAttribute("state", "focus"), this._syncStars());
   }
   _onRootFocusOut() {
@@ -505,20 +507,20 @@ class B extends V {
   }
   _onRootKeyDown(t) {
     if (this._disabled || this._readonly) return;
-    const i = t, r = this._getStarFromEventTarget(i.target), s = this._getStarIndex(r);
+    const e = t, r = this._getStarFromEventTarget(e.target), s = this._getStarIndex(r);
     if (s === -1) return;
     let a = this._value;
-    const n = this._precision;
-    switch (i.key) {
+    const l = this._precision;
+    switch (e.key) {
       case "ArrowRight":
       case "ArrowUp":
       case "+":
-        a = l(this._value + n, 0, this._max);
+        a = n(this._value + l, 0, this._max);
         break;
       case "ArrowLeft":
       case "ArrowDown":
       case "-":
-        a = l(this._value - n, 0, this._max);
+        a = n(this._value - l, 0, this._max);
         break;
       case "Home":
         a = 0;
@@ -533,34 +535,32 @@ class B extends V {
       default:
         return;
     }
-    i.preventDefault(), this.value = a;
+    e.preventDefault(), this.value = a;
   }
-  _getFillPercent(t, i) {
-    const r = i - (t - 1);
+  _getFillPercent(t, e) {
+    const r = e - (t - 1);
     return r >= 1 ? 100 : r <= 0 ? 0 : r * 100;
   }
   _syncStars() {
     const t = this._hoverValue > 0 ? this._hoverValue : this._value;
-    this._stars.forEach((i, r) => {
+    this._stars.forEach((e, r) => {
       const s = r + 1, a = this._getFillPercent(s, t);
-      if (i.style.setProperty("--fill-percent", `${a}%`), this._disabled) {
-        i.setAttribute("data-state", "disabled"), i.setAttribute("aria-disabled", "true");
+      if (e.style.setProperty("--fill-percent", `${a}%`), this._disabled) {
+        e.setAttribute("data-state", "disabled"), e.setAttribute("aria-disabled", "true");
         return;
       }
-      if (i.removeAttribute("aria-disabled"), this._hoverValue > 0) {
-        a > 0 ? i.setAttribute("data-state", "hover") : i.removeAttribute("data-state");
+      if (e.removeAttribute("aria-disabled"), this._hoverValue > 0) {
+        a > 0 ? e.setAttribute("data-state", "hover") : e.removeAttribute("data-state");
         return;
       }
-      a > 0 ? i.setAttribute("data-state", "active") : i.removeAttribute("data-state");
+      a > 0 ? e.setAttribute("data-state", "active") : e.removeAttribute("data-state");
     }), this._syncAria();
   }
   _syncAria() {
     const t = this._getAriaValueText(this._value);
-    this.setAttribute("role", "slider"), this.setAttribute("tabindex", this._disabled || this._readonly ? "-1" : "0"), this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", String(this._max)), this.setAttribute("aria-valuenow", String(this._value)), this.setAttribute("aria-valuetext", t), this.setAttribute("aria-orientation", "horizontal"), this.setAttribute("aria-disabled", this._disabled ? "true" : "false"), this.setAttribute("aria-readonly", this._readonly ? "true" : "false"), this._stars.forEach((i, r) => {
+    this.setAttribute("role", "slider"), this.setAttribute("tabindex", this._disabled || this._readonly ? "-1" : "0"), this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", String(this._max)), this.setAttribute("aria-valuenow", String(this._value)), this.setAttribute("aria-valuetext", t), this.setAttribute("aria-orientation", "horizontal"), this.setAttribute("aria-disabled", this._disabled ? "true" : "false"), this.setAttribute("aria-readonly", this._readonly ? "true" : "false"), this._stars.forEach((e, r) => {
       const s = r + 1, a = this._getFillPercent(s, this._hoverValue > 0 ? this._hoverValue : this._value);
-      i.setAttribute("role", "presentation"), i.setAttribute("tabindex", "-1"), i.setAttribute("aria-hidden", "true"), i.setAttribute("aria-checked", "false");
-      const n = this._precision === 0.5 ? `${r + 0.5} to ${r + 1}` : `${r + 1}`;
-      i.setAttribute("data-fill", String(a)), i.setAttribute("data-star-value", String(s)), i.setAttribute("aria-label", `${n}`);
+      e.setAttribute("aria-hidden", "true"), e.setAttribute("data-fill", String(a)), e.setAttribute("data-star-value", String(s));
     });
   }
   _emit(t) {
@@ -579,13 +579,12 @@ class B extends V {
     );
   }
   render() {
-    const t = f(this, "disabled"), i = f(this, "readonly"), r = C(o(this, "variant")), s = $(o(this, "size")), a = o(this, "theme"), n = T(o(this, "tone")), h = I(o(this, "state")), g = y(o(this, "animation")), c = N(o(this, "shape")), m = q(o(this, "radius")), k = A(o(this, "precision")), v = o(this, "aria-label"), p = o(this, "aria-labelledby"), _ = o(this, "aria-describedby"), d = o(this, "label"), b = f(this, "show-value"), R = o(this, "value"), S = o(this, "max");
-    this._max = Math.max(1, Number(S) || 5), this._precision = k, this._value = l(u(Number(R) || 0, this._precision), 0, this._max), this._disabled = t, this._readonly = i, g ? this.setAttribute("data-animation", g) : this.removeAttribute("data-animation"), a === "dark" || a === "brand" ? this.setAttribute("theme", a) : this.removeAttribute("theme"), n ? this.setAttribute("tone", n) : this.removeAttribute("tone"), h === "disabled" ? this.setAttribute("state", "disabled") : h !== "idle" ? this.setAttribute("state", h) : this.removeAttribute("state"), c === "square" || c === "pill" ? this.setAttribute("shape", c) : this.removeAttribute("shape"), r === "default" ? this.removeAttribute("variant") : this.setAttribute("variant", r), s === "md" ? this.removeAttribute("size") : this.setAttribute("size", s), m ? this.style.setProperty("--ui-rating-radius", m) : this.style.removeProperty("--ui-rating-radius"), this.setAttribute("precision", String(this._precision));
+    const t = g(this, "disabled"), e = g(this, "readonly"), r = C(o(this, "variant")), s = $(o(this, "size")), a = o(this, "theme"), l = T(o(this, "tone")), c = I(o(this, "state")), m = y(o(this, "animation")), d = N(o(this, "shape")), v = q(o(this, "radius")), k = A(o(this, "precision")), p = this._autoAriaLabel ? null : o(this, "aria-label"), f = o(this, "aria-labelledby"), _ = o(this, "aria-describedby"), h = o(this, "label"), b = g(this, "show-value"), R = o(this, "value"), S = o(this, "max");
+    this._max = Math.max(1, Number(S) || 5), this._precision = k, this._value = n(u(Number(R) || 0, this._precision), 0, this._max), this._disabled = t, this._readonly = e, m ? this.setAttribute("data-animation", m) : this.removeAttribute("data-animation"), a === "dark" || a === "brand" ? this.setAttribute("theme", a) : this.removeAttribute("theme"), l ? this.setAttribute("tone", l) : this.removeAttribute("tone"), c === "disabled" ? this.setAttribute("state", "disabled") : c !== "idle" ? this.setAttribute("state", c) : this.removeAttribute("state"), d === "square" || d === "pill" ? this.setAttribute("shape", d) : this.removeAttribute("shape"), r === "default" ? this.removeAttribute("variant") : this.setAttribute("variant", r), s === "md" ? this.removeAttribute("size") : this.setAttribute("size", s), v ? this.style.setProperty("--ui-rating-radius", v) : this.style.removeProperty("--ui-rating-radius"), this.setAttribute("precision", String(this._precision));
     const E = Array.from({ length: this._max }, (P, L) => `
-      <button
-        type="button"
+      <span
         class="star"
-        tabindex="-1"
+        aria-hidden="true"
         data-index="${L}"
         part="star"
         style="--fill-percent: 0%;"
@@ -598,10 +597,10 @@ class B extends V {
             </span>
           </span>
         </span>
-      </button>
+      </span>
     `).join(""), F = b ? `${this._formatValue(this._value)} / ${this._max}` : "";
     this.setContent(`
-      <style>${M}</style>
+      <style>${V}</style>
       <div
         class="stars"
         part="stars"
@@ -609,15 +608,15 @@ class B extends V {
       >
         ${E}
       </div>
-      ${d || b ? `
+      ${h || b ? `
             <div class="label" part="label">
-              ${d ? `<span class="label-text">${w(d)}</span>` : ""}
+              ${h ? `<span class="label-text">${w(h)}</span>` : ""}
               ${b ? `<span class="value">${w(F)}</span>` : ""}
             </div>
           ` : ""}
     `), queueMicrotask(() => {
       this._stars = Array.from(this.root.querySelectorAll(".star")), this._syncStars();
-    }), v ? this.setAttribute("aria-label", v) : this.removeAttribute("aria-label"), p ? this.setAttribute("aria-labelledby", p) : this.removeAttribute("aria-labelledby"), _ ? this.setAttribute("aria-describedby", _) : this.removeAttribute("aria-describedby"), this._disabled ? this.setAttribute("disabled", "") : this.removeAttribute("disabled"), this._readonly ? this.setAttribute("readonly", "") : this.removeAttribute("readonly"), this._syncAria();
+    }), this._autoAriaLabel = !1, p ? this.setAttribute("aria-label", p) : f ? this.removeAttribute("aria-label") : (this.setAttribute("aria-label", (h || "").trim() || "Rating"), this._autoAriaLabel = !0), f ? this.setAttribute("aria-labelledby", f) : this.removeAttribute("aria-labelledby"), _ ? this.setAttribute("aria-describedby", _) : this.removeAttribute("aria-describedby"), this._disabled ? this.setAttribute("disabled", "") : this.removeAttribute("disabled"), this._readonly ? this.setAttribute("readonly", "") : this.removeAttribute("readonly"), this._syncAria();
   }
 }
 typeof customElements < "u" && !customElements.get("ui-rating") && customElements.define("ui-rating", B);