@editora/ui-core 0.1.24 → 0.2.0

package/dist/radio.cjs.js

@@ -1,17 +1,17 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./ElementBase-DxbvhLJs.js"),u=`
   :host {
-    --ui-radio-size: 18px;
+    --ui-radio-size: 16px;
     --ui-radio-hit-area: 24px;
-    --ui-radio-dot-size: 8px;
-    --ui-radio-border: 1.5px solid color-mix(in srgb, var(--ui-radio-accent, var(--ui-primary, var(--ui-color-primary, #2563eb))) 44%, var(--ui-color-border, #cbd5e1) 56%);
-    --ui-radio-background: var(--ui-bg, var(--ui-color-surface, #ffffff));
+    --ui-radio-dot-size: 6px;
+    --ui-radio-border: 1px solid var(--ui-color-line-strong, var(--ui-color-border, #cbd5e1));
+    --ui-radio-background: var(--ui-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-radio-accent: var(--ui-primary, var(--ui-color-primary, #2563eb));
-    --ui-radio-dot-color: var(--ui-radio-accent);
-    --ui-radio-focus: 0 0 0 4px color-mix(in srgb, var(--ui-radio-accent) 24%, transparent);
+    --ui-radio-dot-color: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-radio-focus: 0 0 0 2px var(--ui-color-background, #ffffff), 0 0 0 4px var(--ui-ring-color, var(--ui-color-focus-ring, #2563eb));
     --ui-radio-invalid: var(--ui-color-danger, #dc2626);
-    --ui-radio-invalid-focus: 0 0 0 4px color-mix(in srgb, var(--ui-radio-invalid) 24%, transparent);
+    --ui-radio-invalid-focus: 0 0 0 2px var(--ui-color-background, #ffffff), 0 0 0 4px var(--ui-radio-invalid);
     --ui-radio-disabled-bg: color-mix(in srgb, var(--ui-color-surface-alt, #f1f5f9) 88%, #ffffff 12%);
-    --ui-radio-disabled-border: 1.5px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-radio-disabled-border: 1px solid var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-radio-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-radio-muted: var(--ui-color-muted, #526175);
     --ui-radio-duration: 170ms;
@@ -130,7 +130,7 @@
 
   :host([checked]) .control {
     border-color: var(--ui-radio-accent);
-    background: color-mix(in srgb, var(--ui-radio-accent) 8%, var(--ui-radio-background));
+    background: var(--ui-radio-accent);
   }
 
   :host([checked]) .control::before {
@@ -146,9 +146,12 @@
     box-shadow: var(--ui-radio-focus);
   }
 
-  :host(:not([disabled]):not([loading]):hover) .control {
-    transform: translateY(-0.5px);
-    border-color: color-mix(in srgb, var(--ui-radio-accent) 80%, #0f172a 20%);
+  :host(:not([disabled]):not([loading]):not([checked]):hover) .control {
+    border-color: var(--ui-color-text-secondary, #64748b);
+  }
+
+  :host(:not([disabled]):not([loading])[checked]:hover) .control {
+    background: color-mix(in srgb, var(--ui-radio-accent) 88%, var(--ui-color-text-strong, #0f172a));
   }
 
   :host(:not([disabled]):not([loading]):active) .control {

package/dist/radio.esm.js

@@ -1,18 +1,18 @@
 import { E as l } from "./ElementBase-BeZT54Hj.mjs";
 const u = `
   :host {
-    --ui-radio-size: 18px;
+    --ui-radio-size: 16px;
     --ui-radio-hit-area: 24px;
-    --ui-radio-dot-size: 8px;
-    --ui-radio-border: 1.5px solid color-mix(in srgb, var(--ui-radio-accent, var(--ui-primary, var(--ui-color-primary, #2563eb))) 44%, var(--ui-color-border, #cbd5e1) 56%);
-    --ui-radio-background: var(--ui-bg, var(--ui-color-surface, #ffffff));
+    --ui-radio-dot-size: 6px;
+    --ui-radio-border: 1px solid var(--ui-color-line-strong, var(--ui-color-border, #cbd5e1));
+    --ui-radio-background: var(--ui-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-radio-accent: var(--ui-primary, var(--ui-color-primary, #2563eb));
-    --ui-radio-dot-color: var(--ui-radio-accent);
-    --ui-radio-focus: 0 0 0 4px color-mix(in srgb, var(--ui-radio-accent) 24%, transparent);
+    --ui-radio-dot-color: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-radio-focus: 0 0 0 2px var(--ui-color-background, #ffffff), 0 0 0 4px var(--ui-ring-color, var(--ui-color-focus-ring, #2563eb));
     --ui-radio-invalid: var(--ui-color-danger, #dc2626);
-    --ui-radio-invalid-focus: 0 0 0 4px color-mix(in srgb, var(--ui-radio-invalid) 24%, transparent);
+    --ui-radio-invalid-focus: 0 0 0 2px var(--ui-color-background, #ffffff), 0 0 0 4px var(--ui-radio-invalid);
     --ui-radio-disabled-bg: color-mix(in srgb, var(--ui-color-surface-alt, #f1f5f9) 88%, #ffffff 12%);
-    --ui-radio-disabled-border: 1.5px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-radio-disabled-border: 1px solid var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-radio-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-radio-muted: var(--ui-color-muted, #526175);
     --ui-radio-duration: 170ms;
@@ -131,7 +131,7 @@ const u = `
 
   :host([checked]) .control {
     border-color: var(--ui-radio-accent);
-    background: color-mix(in srgb, var(--ui-radio-accent) 8%, var(--ui-radio-background));
+    background: var(--ui-radio-accent);
   }
 
   :host([checked]) .control::before {
@@ -147,9 +147,12 @@ const u = `
     box-shadow: var(--ui-radio-focus);
   }
 
-  :host(:not([disabled]):not([loading]):hover) .control {
-    transform: translateY(-0.5px);
-    border-color: color-mix(in srgb, var(--ui-radio-accent) 80%, #0f172a 20%);
+  :host(:not([disabled]):not([loading]):not([checked]):hover) .control {
+    border-color: var(--ui-color-text-secondary, #64748b);
+  }
+
+  :host(:not([disabled]):not([loading])[checked]:hover) .control {
+    background: color-mix(in srgb, var(--ui-radio-accent) 88%, var(--ui-color-text-strong, #0f172a));
   }
 
   :host(:not([disabled]):not([loading]):active) .control {

package/dist/rating.cjs.js

@@ -3,14 +3,14 @@
     --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%;
@@ -78,7 +78,7 @@
   :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);
   }
@@ -244,12 +244,8 @@
     transition: opacity 140ms var(--ui-rating-easing);
   }
 
-  .star:hover::after {
-    opacity: 0.08;
-  }
-
   .star:active::after {
-    opacity: 0.12;
+    opacity: 0.08;
   }
 
   .label {
@@ -317,11 +313,11 @@
       forced-color-adjust: auto;
     }
   }
-`;function x(i){return i!==null&&i.toLowerCase()!=="false"&&i!=="0"}function $(i){return i==="soft"||i==="glass"||i==="contrast"||i==="minimal"?i:"default"}function N(i){return i==="sm"||i==="lg"?i:"md"}function T(i){return i==="square"||i==="pill"?i:"rounded"}function I(i){return i==="neutral"||i==="info"||i==="success"||i==="warning"||i==="danger"?i:null}function q(i){return i==="hover"||i==="focus"||i==="disabled"?i:"idle"}function y(i){return i==="scale"||i==="pulse"||i==="none"?i:null}function B(i){if(!i)return null;const t=i.trim();return t?t==="full"?"999px":/^-?\\d+(\\.\\d+)?$/.test(t)?`${t}px`:t:null}function A(i){const t=Number(i);return!Number.isFinite(t)||t<=0?1:t===.5?.5:1}function n(i,t,e){return Math.min(e,Math.max(t,i))}function u(i,t){const e=Math.round(i/t)*t;return Number(e.toFixed(2))}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 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(i){return i.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function z(i){return`
+`;function x(i){return i!==null&&i.toLowerCase()!=="false"&&i!=="0"}function $(i){return i==="soft"||i==="glass"||i==="contrast"||i==="minimal"?i:"default"}function N(i){return i==="sm"||i==="lg"?i:"md"}function T(i){return i==="square"||i==="pill"?i:"rounded"}function I(i){return i==="neutral"||i==="info"||i==="success"||i==="warning"||i==="danger"?i:null}function q(i){return i==="hover"||i==="focus"||i==="disabled"?i:"idle"}function y(i){return i==="scale"||i==="pulse"||i==="none"?i:null}function D(i){if(!i)return null;const t=i.trim();return t?t==="full"?"999px":/^-?\\d+(\\.\\d+)?$/.test(t)?`${t}px`:t:null}function A(i){const t=Number(i);return!Number.isFinite(t)||t<=0?1:t===.5?.5:1}function l(i,t,e){return Math.min(e,Math.max(t,i))}function h(i,t){const e=Math.round(i/t)*t;return Number(e.toFixed(2))}function a(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 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(i){return i.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function z(i){return`
     <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 k extends V.ElementBase{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)}static get observedAttributes(){return["value","max","precision","disabled","readonly","variant","size","headless","theme","tone","state","animation","shape","radius","aria-label","aria-labelledby","aria-describedby","label","show-value"]}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)}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,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())}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"){const s=y(r);s?this.setAttribute("data-animation",s):this.removeAttribute("data-animation")}this.isConnected&&this.requestRender()}}get value(){return this._value}set value(t){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 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===.5?.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}set disabled(t){this._disabled=!!t,this._disabled?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this.requestRender()}get readonly(){return this._readonly}set readonly(t){this._readonly=!!t,this._readonly?this.setAttribute("readonly",""):this.removeAttribute("readonly"),this.requestRender()}_getStarFromEventTarget(t){return t instanceof Element?t.closest(".star"):null}_getStarIndex(t){if(!t)return-1;const e=Number(t.dataset.index);return Number.isFinite(e)?e:-1}_getValueFromPointer(t,e){const r=this._getStarIndex(e);if(r===-1)return this._value;if(this._precision!==.5)return r+1;const s=e.getBoundingClientRect(),l=t.clientX-s.left<=s.width/2?.5:1;return r+l}_formatValue(t){return Number.isInteger(t)?String(t):t.toFixed(1)}_getAriaValueText(t){return`${this._formatValue(t)} out of ${this._max}`}_onRootClick(t){if(this._disabled||this._readonly)return;const e=t,r=this._getStarFromEventTarget(e.target);r&&(this.value=this._getValueFromPointer(e,r))}_onRootMouseMove(t){if(this._disabled||this._readonly)return;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 e=this._getStarFromEventTarget(t.target),r=this._getStarIndex(e);r!==-1&&(this._hoverValue=r+1,this.setAttribute("state","focus"),this._syncStars())}_onRootFocusOut(){this._disabled||this._readonly||(this._hoverValue=0,this.removeAttribute("state"),this._syncStars())}_onRootKeyDown(t){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){case"ArrowRight":case"ArrowUp":case"+":a=n(this._value+l,0,this._max);break;case"ArrowLeft":case"ArrowDown":case"-":a=n(this._value-l,0,this._max);break;case"Home":a=0;break;case"End":a=this._max;break;case" ":case"Enter":a=s+1;break;default:return}e.preventDefault(),this.value=a}_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((e,r)=>{const s=r+1,a=this._getFillPercent(s,t);if(e.style.setProperty("--fill-percent",`${a}%`),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");return}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((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))})}_emit(t){this.dispatchEvent(new CustomEvent(t,{detail:{value:this._value,max:this._max,precision:this._precision,disabled:this._disabled,readonly:this._readonly},bubbles:!0,composed:!0}))}render(){const t=g(this,"disabled"),e=g(this,"readonly"),r=$(o(this,"variant")),s=N(o(this,"size")),a=o(this,"theme"),l=I(o(this,"tone")),c=q(o(this,"state")),m=y(o(this,"animation")),d=T(o(this,"shape")),v=B(o(this,"radius")),R=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"),S=o(this,"value"),E=o(this,"max");this._max=Math.max(1,Number(E)||5),this._precision=R,this._value=n(u(Number(S)||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 F=Array.from({length:this._max},(P,M)=>`
+  `}class k extends V.ElementBase{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._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["value","max","precision","disabled","readonly","variant","size","headless","theme","tone","state","animation","shape","radius","aria-label","aria-labelledby","aria-describedby","label","show-value"]}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),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),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=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=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")}this.isConnected&&this.requestRender()}}get value(){return this._value}set value(t){const e=Number(t);if(!Number.isFinite(e))return;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(){return this._max}set max(t){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===.5?.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}set disabled(t){this._disabled=!!t,this._disabled?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this.requestRender()}get readonly(){return this._readonly}set readonly(t){this._readonly=!!t,this._readonly?this.setAttribute("readonly",""):this.removeAttribute("readonly"),this.requestRender()}_getStarFromEventTarget(t){return t instanceof Element?t.closest(".star"):null}_getStarIndex(t){if(!t)return-1;const e=Number(t.dataset.index);return Number.isFinite(e)?e:-1}_getValueFromPointer(t,e){const r=this._getStarIndex(e);if(r===-1)return this._value;if(this._precision!==.5)return r+1;const s=e.getBoundingClientRect(),n=t.clientX-s.left<=s.width/2?.5:1;return r+n}_formatValue(t){return Number.isInteger(t)?String(t):t.toFixed(1)}_getAriaValueText(t){return`${this._formatValue(t)} out of ${this._max}`}_onRootClick(t){if(this._disabled||this._readonly)return;const e=t,r=this._getStarFromEventTarget(e.target);r&&(this.value=this._getValueFromPointer(e,r))}_onRootMouseMove(t){if(this._disabled||this._readonly)return;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 e=this._getStarFromEventTarget(t.target),r=this._getStarIndex(e);r!==-1&&(this._hoverValue=r+1,this.setAttribute("state","focus"),this._syncStars())}_onRootFocusOut(){this._disabled||this._readonly||(this._hoverValue=0,this.removeAttribute("state"),this._syncStars())}_onRootKeyDown(t,e=!1){if(this._disabled||this._readonly)return;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"+":n=l(this._value+u,0,this._max);break;case"ArrowLeft":case"ArrowDown":case"-":n=l(this._value-u,0,this._max);break;case"Home":n=0;break;case"End":n=this._max;break;case" ":case"Enter":n=o+1;break;default:return}r.preventDefault(),this.value=n}_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((e,r)=>{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){o>0?e.setAttribute("data-state","hover"):e.removeAttribute("data-state");return}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,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){this.dispatchEvent(new CustomEvent(t,{detail:{value:this._value,max:this._max,precision:this._precision,disabled:this._disabled,readonly:this._readonly},bubbles:!0,composed:!0}))}render(){const t=g(this,"disabled"),e=g(this,"readonly"),r=$(a(this,"variant")),s=N(a(this,"size")),o=a(this,"theme"),n=I(a(this,"tone")),u=q(a(this,"state")),m=y(a(this,"animation")),d=T(a(this,"shape")),v=D(a(this,"radius")),R=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"),S=a(this,"value"),E=a(this,"max");this._max=Math.max(1,Number(E)||5),this._precision=R,this._value=l(h(Number(S)||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 F=Array.from({length:this._max},(P,M)=>`
       <span
         class="star"
         aria-hidden="true"
@@ -347,10 +343,10 @@
       >
         ${F}
       </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(L)}</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()}}typeof customElements<"u"&&!customElements.get("ui-rating")&&customElements.define("ui-rating",k);exports.UIRating=k;
+    `),queueMicrotask(()=>{this._stars=Array.from(this.root.querySelectorAll(".star")),this._syncStars()}),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",k);exports.UIRating=k;

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
 };