@editora/ui-core 0.1.8 → 0.1.10

package/dist/rating.cjs.js

@@ -0,0 +1,355 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const V=require("./ElementBase-1b301e7f.js"),C=`
+  :host {
+    --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-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-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));
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-rating-gap);
+    color-scheme: light dark;
+    font-family: var(--ui-font-family, var(--default-font-family, system-ui, sans-serif));
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([block]) {
+    display: flex;
+    inline-size: 100%;
+    justify-content: flex-start;
+  }
+
+  :host([tone="neutral"]) {
+    --ui-rating-color: color-mix(in srgb, var(--ui-color-muted, #64748b) 74%, var(--ui-color-text, #0f172a) 26%);
+  }
+
+  :host([tone="info"]) {
+    --ui-rating-color: var(--ui-color-primary, #2563eb);
+  }
+
+  :host([tone="success"]) {
+    --ui-rating-color: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-rating-color: var(--ui-color-warning, #f59e0b);
+  }
+
+  :host([tone="danger"]) {
+    --ui-rating-color: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([theme="dark"]) {
+    --ui-rating-color-empty: color-mix(in srgb, var(--ui-color-text, #e2e8f0) 22%, transparent);
+    --ui-rating-color-disabled: color-mix(in srgb, var(--ui-color-text, #e2e8f0) 32%, transparent);
+  }
+
+  :host([theme="brand"]) {
+    --ui-rating-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 78%, #0ea5e9 22%);
+  }
+
+  :host([variant="soft"]) {
+    --ui-rating-color: color-mix(in srgb, var(--ui-rating-color) 60%, #ffffff);
+    --ui-rating-color-hover: color-mix(in srgb, var(--ui-rating-color) 70%, #ffffff);
+    --ui-rating-color-active: color-mix(in srgb, var(--ui-rating-color) 80%, #ffffff);
+  }
+
+  :host([variant="glass"]) {
+    --ui-rating-shadow: 0 8px 20px rgba(2, 6, 23, 0.14), 0 24px 48px rgba(2, 6, 23, 0.16);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-rating-color: #fbbf24;
+    --ui-rating-color-empty: #334155;
+    --ui-rating-color-hover: #fde047;
+    --ui-rating-color-active: #fde047;
+    --ui-rating-shadow: 0 14px 34px rgba(2, 6, 23, 0.46), 0 30px 60px rgba(2, 6, 23, 0.42);
+  }
+
+  :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-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);
+  }
+
+  :host([shape="square"]) {
+    --ui-rating-radius: 0px;
+  }
+
+  :host([shape="pill"]) {
+    --ui-rating-radius: 999px;
+  }
+
+  :host([size="sm"]) {
+    --ui-rating-size: 16px;
+    --ui-rating-gap: 4px;
+  }
+
+  :host([size="lg"]) {
+    --ui-rating-size: 24px;
+    --ui-rating-gap: 8px;
+  }
+
+  :host([state="disabled"]) {
+    opacity: 0.62;
+    cursor: not-allowed;
+  }
+
+  :host([data-animation="scale"]) .star:not([data-state="disabled"]) {
+    transition: transform var(--ui-rating-duration) var(--ui-rating-easing);
+  }
+
+  :host([data-animation="scale"]) .star:not([data-state="disabled"]):hover {
+    transform: scale(1.1);
+  }
+
+  :host([data-animation="pulse"]) .star:not([data-state="disabled"]):hover {
+    animation: ui-rating-pulse 900ms ease-in-out infinite;
+  }
+
+  :host([data-animation="none"]) .star {
+    transition: none;
+    animation: none;
+  }
+
+  :host([headless]) .stars {
+    display: none;
+  }
+
+  .stars {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-rating-gap);
+    position: relative;
+  }
+
+  .star {
+    inline-size: var(--ui-rating-size);
+    block-size: var(--ui-rating-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ui-rating-color-empty);
+    cursor: pointer;
+    position: relative;
+    transition:
+      color var(--ui-rating-duration) var(--ui-rating-easing),
+      transform var(--ui-rating-duration) var(--ui-rating-easing);
+    outline: none;
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    flex: 0 0 auto;
+  }
+
+  .star:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-rating-color) 70%, transparent);
+    outline-offset: 2px;
+  }
+
+  .star[data-state="disabled"] {
+    color: var(--ui-rating-color-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .star-icon {
+    position: relative;
+    inline-size: 100%;
+    block-size: 100%;
+    display: block;
+  }
+
+  .star-base,
+  .star-fill {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    display: block;
+  }
+
+  .star-base {
+    color: var(--ui-rating-color-empty);
+  }
+
+  .star-fill {
+    color: var(--ui-rating-color-active);
+  }
+
+  .star[data-state="hover"] .star-fill {
+    color: var(--ui-rating-color-hover);
+  }
+
+  /* The clip area changes width, but the inner icon stays full-size */
+  .star-fill-clip {
+    position: absolute;
+    inset: 0 auto 0 0;
+    inline-size: var(--fill-percent, 0%);
+    block-size: 100%;
+    overflow: hidden;
+  }
+
+  .star-base svg {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+    stroke: currentColor;
+    stroke-width: 1;
+    filter: drop-shadow(var(--ui-rating-shadow, none));
+    pointer-events: none;
+  }
+
+  /* Critical fix: full-size icon inside the clip, never shrink with clip width */
+  .star-fill-svg {
+    position: absolute;
+    inset: 0;
+    inline-size: var(--ui-rating-size);
+    block-size: var(--ui-rating-size);
+    width: var(--ui-rating-size);
+    height: var(--ui-rating-size);
+    min-inline-size: var(--ui-rating-size);
+    min-block-size: var(--ui-rating-size);
+    fill: currentColor;
+    stroke: currentColor;
+    stroke-width: 1;
+    filter: drop-shadow(var(--ui-rating-shadow, none));
+    pointer-events: none;
+  }
+
+  .star::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--ui-rating-radius);
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 140ms var(--ui-rating-easing);
+  }
+
+  .star:hover::after {
+    opacity: 0.08;
+  }
+
+  .star:active::after {
+    opacity: 0.12;
+  }
+
+  .label {
+    font-size: var(--ui-font-size-sm, 12px);
+    color: var(--ui-color-muted, #64748b);
+    white-space: nowrap;
+  }
+
+  .value {
+    font-size: var(--ui-font-size-sm, 12px);
+    color: var(--ui-color-text, #0f172a);
+    font-weight: 600;
+    white-space: nowrap;
+    margin-inline-start: 6px;
+  }
+
+  .sr-only {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+  }
+
+  @keyframes ui-rating-pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .star {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .star {
+      border: 1px solid currentColor;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-rating-color: Highlight;
+      --ui-rating-color-empty: ButtonFace;
+      --ui-rating-color-hover: Highlight;
+      --ui-rating-color-active: Highlight;
+      --ui-rating-color-disabled: ButtonFace;
+    }
+
+    .star {
+      forced-color-adjust: auto;
+      color: ButtonText;
+      background: ButtonFace;
+    }
+
+    .star-base,
+    .star-fill {
+      forced-color-adjust: auto;
+    }
+  }
+`;function x(e){return e!==null&&e.toLowerCase()!=="false"&&e!=="0"}function $(e){return e==="soft"||e==="glass"||e==="contrast"||e==="minimal"?e:"default"}function N(e){return e==="sm"||e==="lg"?e:"md"}function T(e){return e==="square"||e==="pill"?e:"rounded"}function I(e){return e==="neutral"||e==="info"||e==="success"||e==="warning"||e==="danger"?e:null}function q(e){return e==="hover"||e==="focus"||e==="disabled"?e:"idle"}function y(e){return e==="scale"||e==="pulse"||e==="none"?e:null}function B(e){if(!e)return null;const t=e.trim();return t?t==="full"?"999px":/^-?\\d+(\\.\\d+)?$/.test(t)?`${t}px`:t:null}function A(e){const t=Number(e);return!Number.isFinite(t)||t<=0?1:t===.5?.5:1}function l(e,t,i){return Math.min(i,Math.max(t,e))}function u(e,t){const i=Math.round(e/t)*t;return Number(i.toFixed(2))}function o(e,t){const i=e.getAttribute(t);if(i!=null)return i;const r=e[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];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 z(e){return`
+    <svg viewBox="0 0 24 24" aria-hidden="true"${e?` class="${e}"`:""}>
+      <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._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,i,r){if(i!==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())}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"){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 i=Number(t);if(!Number.isFinite(i))return;const r=l(u(i,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())}get precision(){return this._precision}set precision(t){this._precision=t===.5?.5:1,this.setAttribute("precision",String(this._precision)),this._value=l(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 i=Number(t.dataset.index);return Number.isFinite(i)?i:-1}_getValueFromPointer(t,i){const r=this._getStarIndex(i);if(r===-1)return this._value;if(this._precision!==.5)return r+1;const s=i.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 i=t,r=this._getStarFromEventTarget(i.target);r&&(this.value=this._getValueFromPointer(i,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())}_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);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 i=t,r=this._getStarFromEventTarget(i.target),s=this._getStarIndex(r);if(s===-1)return;let a=this._value;const n=this._precision;switch(i.key){case"ArrowRight":case"ArrowUp":case"+":a=l(this._value+n,0,this._max);break;case"ArrowLeft":case"ArrowDown":case"-":a=l(this._value-n,0,this._max);break;case"Home":a=0;break;case"End":a=this._max;break;case" ":case"Enter":a=s+1;break;default:return}i.preventDefault(),this.value=a}_getFillPercent(t,i){const r=i-(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)=>{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");return}if(i.removeAttribute("aria-disabled"),this._hoverValue>0){a>0?i.setAttribute("data-state","hover"):i.removeAttribute("data-state");return}a>0?i.setAttribute("data-state","active"):i.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)=>{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===.5?`${r+.5} to ${r+1}`:`${r+1}`;i.setAttribute("data-fill",String(a)),i.setAttribute("data-star-value",String(s)),i.setAttribute("aria-label",`${n}`)})}_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=f(this,"disabled"),i=f(this,"readonly"),r=$(o(this,"variant")),s=N(o(this,"size")),a=o(this,"theme"),n=I(o(this,"tone")),h=q(o(this,"state")),g=y(o(this,"animation")),c=T(o(this,"shape")),m=B(o(this,"radius")),R=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"),S=o(this,"value"),E=o(this,"max");this._max=Math.max(1,Number(E)||5),this._precision=R,this._value=l(u(Number(S)||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 F=Array.from({length:this._max},(P,L)=>`
+      <button
+        type="button"
+        class="star"
+        tabindex="-1"
+        data-index="${L}"
+        part="star"
+        style="--fill-percent: 0%;"
+      >
+        <span class="star-icon">
+          <span class="star-base">${z()}</span>
+          <span class="star-fill">
+            <span class="star-fill-clip">
+              ${z("star-fill-svg")}
+            </span>
+          </span>
+        </span>
+      </button>
+    `).join(""),M=b?`${this._formatValue(this._value)} / ${this._max}`:"";this.setContent(`
+      <style>${C}</style>
+      <div
+        class="stars"
+        part="stars"
+        aria-hidden="true"
+      >
+        ${F}
+      </div>
+      ${d||b?`
+            <div class="label" part="label">
+              ${d?`<span class="label-text">${w(d)}</span>`:""}
+              ${b?`<span class="value">${w(M)}</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()}}typeof customElements<"u"&&!customElements.get("ui-rating")&&customElements.define("ui-rating",k);exports.UIRating=k;