@editora/ui-core 0.1.25 → 0.2.1

package/dist/rating.esm.js

@@ -4,14 +4,14 @@ const V = `
     --ui-rating-size: var(--ui-control-size, var(--ui-font-size-lg, 20px));
     --ui-rating-gap: var(--ui-control-gap, 6px);
     --ui-rating-color: var(--ui-color-warning, #f59e0b);
-    --ui-rating-color-empty: var(--ui-color-muted, #cbd5e1);
+    --ui-rating-color-empty: var(--ui-color-line-strong, #cbd5e1);
     --ui-rating-color-hover: color-mix(in srgb, var(--ui-rating-color) 86%, #ffffff);
     --ui-rating-color-active: color-mix(in srgb, var(--ui-rating-color) 92%, #ffffff);
-    --ui-rating-color-disabled: color-mix(in srgb, var(--ui-color-muted, #cbd5e1) 60%, transparent);
-    --ui-rating-shadow: 0 1px 2px rgba(2, 6, 23, 0.12);
+    --ui-rating-color-disabled: color-mix(in srgb, var(--ui-color-line-strong, #cbd5e1) 70%, transparent);
+    --ui-rating-shadow: none;
     --ui-rating-duration: var(--ui-motion-base, 160ms);
     --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));
+    --ui-rating-radius: var(--ui-control-radius, var(--ui-radius, 6px));
     display: inline-flex;
     flex-wrap: wrap;
     max-inline-size: 100%;
@@ -79,7 +79,7 @@ const V = `
   :host([variant="minimal"]) {
     --ui-rating-shadow: none;
     --ui-rating-color: color-mix(in srgb, var(--ui-rating-color) 70%, #ffffff);
-    --ui-rating-color-empty: color-mix(in srgb, var(--ui-color-muted, #cbd5e1) 50%, transparent);
+    --ui-rating-color-empty: color-mix(in srgb, var(--ui-color-line-strong, #cbd5e1) 60%, transparent);
     --ui-rating-color-hover: color-mix(in srgb, var(--ui-rating-color) 80%, #ffffff);
     --ui-rating-color-active: color-mix(in srgb, var(--ui-rating-color) 85%, #ffffff);
   }
@@ -245,12 +245,8 @@ const V = `
     transition: opacity 140ms var(--ui-rating-easing);
   }
 
-  .star:hover::after {
-    opacity: 0.08;
-  }
-
   .star:active::after {
-    opacity: 0.12;
+    opacity: 0.08;
   }
 
   .label {
@@ -340,7 +336,7 @@ function I(i) {
 function y(i) {
   return i === "scale" || i === "pulse" || i === "none" ? i : null;
 }
-function q(i) {
+function D(i) {
   if (!i) return null;
   const t = i.trim();
   return t ? t === "full" ? "999px" : /^-?\\d+(\\.\\d+)?$/.test(t) ? `${t}px` : t : null;
@@ -349,14 +345,14 @@ function A(i) {
   const t = Number(i);
   return !Number.isFinite(t) || t <= 0 ? 1 : t === 0.5 ? 0.5 : 1;
 }
-function n(i, t, e) {
+function l(i, t, e) {
   return Math.min(e, Math.max(t, i));
 }
-function u(i, t) {
+function h(i, t) {
   const e = Math.round(i / t) * t;
   return Number(e.toFixed(2));
 }
-function o(i, t) {
+function a(i, t) {
   const e = i.getAttribute(t);
   if (e != null) return e;
   const r = i[t];
@@ -378,9 +374,11 @@ function z(i) {
     </svg>
   `;
 }
-class B extends M {
+class q extends M {
   constructor() {
-    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);
+    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._onHostKeyDown = (t) => {
+      t.composedPath()[0] === this && this._onRootKeyDown(t, !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 [
@@ -406,22 +404,22 @@ class B extends M {
     ];
   }
   connectedCallback() {
-    super.connectedCallback(), this.root.addEventListener("click", this._onRootClick, !0), this.root.addEventListener("mousemove", this._onRootMouseMove, !0), this.root.addEventListener("mouseleave", this._onRootMouseLeave, !0), this.root.addEventListener("focusin", this._onRootFocusIn, !0), this.root.addEventListener("focusout", this._onRootFocusOut, !0), this.root.addEventListener("keydown", this._onRootKeyDown, !0);
+    super.connectedCallback(), this.root.addEventListener("click", this._onRootClick, !0), this.root.addEventListener("mousemove", this._onRootMouseMove, !0), this.root.addEventListener("mouseleave", this._onRootMouseLeave, !0), this.root.addEventListener("focusin", this._onRootFocusIn, !0), this.root.addEventListener("focusout", this._onRootFocusOut, !0), this.root.addEventListener("keydown", this._onRootKeyDown, !0), this.addEventListener("keydown", this._onHostKeyDown);
   }
   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();
+    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), this.removeEventListener("keydown", this._onHostKeyDown), super.disconnectedCallback();
   }
   attributeChangedCallback(t, e, r) {
     if (e !== r) {
       if (t === "value") {
         const s = Number(r);
-        Number.isFinite(s) && (this._value = n(u(s, this._precision), 0, this._max), this._syncStars(), this._syncAria());
+        Number.isFinite(s) && (this._value = l(h(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 = 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") {
+      if (t === "precision" && (this._precision = A(r), this._value = l(h(this._value, this._precision), 0, this._max), this._hoverValue = this._hoverValue > 0 ? l(h(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");
       }
@@ -434,7 +432,7 @@ class B extends M {
   set value(t) {
     const e = Number(t);
     if (!Number.isFinite(e)) return;
-    const r = n(u(e, this._precision), 0, this._max);
+    const r = l(h(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() {
@@ -448,7 +446,7 @@ class B extends M {
     return this._precision;
   }
   set precision(t) {
-    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();
+    this._precision = t === 0.5 ? 0.5 : 1, this.setAttribute("precision", String(this._precision)), this._value = l(h(this._value, this._precision), 0, this._max), this.requestRender();
   }
   get disabled() {
     return this._disabled;
@@ -475,8 +473,8 @@ class B extends M {
     if (r === -1) return this._value;
     if (this._precision !== 0.5)
       return r + 1;
-    const s = e.getBoundingClientRect(), l = t.clientX - s.left <= s.width / 2 ? 0.5 : 1;
-    return r + l;
+    const s = e.getBoundingClientRect(), n = t.clientX - s.left <= s.width / 2 ? 0.5 : 1;
+    return r + n;
   }
   _formatValue(t) {
     return Number.isInteger(t) ? String(t) : t.toFixed(1);
@@ -505,37 +503,37 @@ class B extends M {
   _onRootFocusOut() {
     this._disabled || this._readonly || (this._hoverValue = 0, this.removeAttribute("state"), this._syncStars());
   }
-  _onRootKeyDown(t) {
+  _onRootKeyDown(t, e = !1) {
     if (this._disabled || this._readonly) return;
-    const e = t, r = this._getStarFromEventTarget(e.target), s = this._getStarIndex(r);
-    if (s === -1) return;
-    let a = this._value;
-    const l = this._precision;
-    switch (e.key) {
+    const r = t, s = this._getStarFromEventTarget(r.target), o = e ? Math.max(0, Math.ceil(this._value) - 1) : this._getStarIndex(s);
+    if (o === -1) return;
+    let n = this._value;
+    const u = this._precision;
+    switch (r.key) {
       case "ArrowRight":
       case "ArrowUp":
       case "+":
-        a = n(this._value + l, 0, this._max);
+        n = l(this._value + u, 0, this._max);
         break;
       case "ArrowLeft":
       case "ArrowDown":
       case "-":
-        a = n(this._value - l, 0, this._max);
+        n = l(this._value - u, 0, this._max);
         break;
       case "Home":
-        a = 0;
+        n = 0;
         break;
       case "End":
-        a = this._max;
+        n = this._max;
         break;
       case " ":
       case "Enter":
-        a = s + 1;
+        n = o + 1;
         break;
       default:
         return;
     }
-    e.preventDefault(), this.value = a;
+    r.preventDefault(), this.value = n;
   }
   _getFillPercent(t, e) {
     const r = e - (t - 1);
@@ -544,23 +542,23 @@ class B extends M {
   _syncStars() {
     const t = this._hoverValue > 0 ? this._hoverValue : this._value;
     this._stars.forEach((e, r) => {
-      const s = r + 1, a = this._getFillPercent(s, t);
-      if (e.style.setProperty("--fill-percent", `${a}%`), this._disabled) {
+      const s = r + 1, o = this._getFillPercent(s, t);
+      if (e.style.setProperty("--fill-percent", `${o}%`), this._disabled) {
         e.setAttribute("data-state", "disabled"), e.setAttribute("aria-disabled", "true");
         return;
       }
       if (e.removeAttribute("aria-disabled"), this._hoverValue > 0) {
-        a > 0 ? e.setAttribute("data-state", "hover") : e.removeAttribute("data-state");
+        o > 0 ? e.setAttribute("data-state", "hover") : e.removeAttribute("data-state");
         return;
       }
-      a > 0 ? e.setAttribute("data-state", "active") : e.removeAttribute("data-state");
+      o > 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((e, r) => {
-      const s = r + 1, a = this._getFillPercent(s, this._hoverValue > 0 ? this._hoverValue : this._value);
-      e.setAttribute("aria-hidden", "true"), e.setAttribute("data-fill", String(a)), e.setAttribute("data-star-value", String(s));
+      const s = r + 1, o = this._getFillPercent(s, this._hoverValue > 0 ? this._hoverValue : this._value);
+      e.setAttribute("aria-hidden", "true"), e.setAttribute("data-fill", String(o)), e.setAttribute("data-star-value", String(s));
     });
   }
   _emit(t) {
@@ -579,9 +577,9 @@ class B extends M {
     );
   }
   render() {
-    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) => `
+    const t = g(this, "disabled"), e = g(this, "readonly"), r = C(a(this, "variant")), s = $(a(this, "size")), o = a(this, "theme"), n = T(a(this, "tone")), u = I(a(this, "state")), m = y(a(this, "animation")), d = N(a(this, "shape")), v = D(a(this, "radius")), k = A(a(this, "precision")), _ = this._autoAriaLabel ? null : a(this, "aria-label"), f = a(this, "aria-labelledby"), p = a(this, "aria-describedby"), c = a(this, "label"), b = g(this, "show-value"), R = a(this, "value"), S = a(this, "max");
+    this._max = Math.max(1, Number(S) || 5), this._precision = k, this._value = l(h(Number(R) || 0, this._precision), 0, this._max), this._disabled = t, this._readonly = e, m ? this.setAttribute("data-animation", m) : this.removeAttribute("data-animation"), o === "dark" || o === "brand" ? this.setAttribute("theme", o) : this.removeAttribute("theme"), n ? this.setAttribute("tone", n) : this.removeAttribute("tone"), u === "disabled" ? this.setAttribute("state", "disabled") : u !== "idle" ? this.setAttribute("state", u) : 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 }, (H, L) => `
       <span
         class="star"
         aria-hidden="true"
@@ -608,18 +606,18 @@ class B extends M {
       >
         ${E}
       </div>
-      ${h || b ? `
+      ${c || b ? `
             <div class="label" part="label">
-              ${h ? `<span class="label-text">${w(h)}</span>` : ""}
+              ${c ? `<span class="label-text">${w(c)}</span>` : ""}
               ${b ? `<span class="value">${w(F)}</span>` : ""}
             </div>
           ` : ""}
     `), queueMicrotask(() => {
       this._stars = Array.from(this.root.querySelectorAll(".star")), this._syncStars();
-    }), 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();
+    }), this._autoAriaLabel = !1, _ ? this.setAttribute("aria-label", _) : f ? this.removeAttribute("aria-label") : (this.setAttribute("aria-label", (c || "").trim() || "Rating"), this._autoAriaLabel = !0), f ? this.setAttribute("aria-labelledby", f) : this.removeAttribute("aria-labelledby"), p ? this.setAttribute("aria-describedby", p) : 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);
+typeof customElements < "u" && !customElements.get("ui-rating") && customElements.define("ui-rating", q);
 export {
-  B as UIRating
+  q as UIRating
 };