@editora/ui-core 0.1.9 → 0.1.10

package/dist/rating.esm.js

@@ -0,0 +1,637 @@
+import { E as V } from "./ElementBase-909688f3.mjs";
+const M = `
+  :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 C(e) {
+  return e === "soft" || e === "glass" || e === "contrast" || e === "minimal" ? e : "default";
+}
+function $(e) {
+  return e === "sm" || e === "lg" ? e : "md";
+}
+function N(e) {
+  return e === "square" || e === "pill" ? e : "rounded";
+}
+function T(e) {
+  return e === "neutral" || e === "info" || e === "success" || e === "warning" || e === "danger" ? e : null;
+}
+function I(e) {
+  return e === "hover" || e === "focus" || e === "disabled" ? e : "idle";
+}
+function y(e) {
+  return e === "scale" || e === "pulse" || e === "none" ? e : null;
+}
+function q(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 === 0.5 ? 0.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 B extends V {
+  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 === 0.5 ? 0.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 !== 0.5)
+      return r + 1;
+    const s = i.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);
+  }
+  _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 === 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}`);
+    });
+  }
+  _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 = 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 E = 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(""), F = b ? `${this._formatValue(this._value)} / ${this._max}` : "";
+    this.setContent(`
+      <style>${M}</style>
+      <div
+        class="stars"
+        part="stars"
+        aria-hidden="true"
+      >
+        ${E}
+      </div>
+      ${d || b ? `
+            <div class="label" part="label">
+              ${d ? `<span class="label-text">${w(d)}</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();
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-rating") && customElements.define("ui-rating", B);
+export {
+  B as UIRating
+};

package/dist/roving-focus-group-4350c9a7.mjs

@@ -0,0 +1,50 @@
+function a(e) {
+  return !!(e && typeof e == "object" && "disabled" in e && e.disabled);
+}
+function d(e, n, r = a) {
+  if (n === "first")
+    return e.findIndex((t) => !r(t));
+  for (let t = e.length - 1; t >= 0; t -= 1)
+    if (!r(e[t]))
+      return t;
+  return -1;
+}
+function o(e, n = {}) {
+  const r = n.getDisabled || a, t = n.activeIndex ?? -1, c = n.selectedIndex ?? -1;
+  return t >= 0 && t < e.length && !r(e[t]) ? t : c >= 0 && c < e.length && !r(e[c]) ? c : d(e, "first", r);
+}
+function i(e, n, r, t = {}) {
+  if (!e.length)
+    return -1;
+  const c = t.getDisabled || a, f = t.wrap !== !1;
+  let u = typeof t.fallbackIndex == "number" ? t.fallbackIndex : n;
+  for (let l = 0; l < e.length; l += 1) {
+    if (u += r, !f && (u < 0 || u >= e.length))
+      return -1;
+    if (u < 0 && (u = e.length - 1), u >= e.length && (u = 0), !c(e[u]))
+      return u;
+  }
+  return -1;
+}
+function s(e, n, r = {}) {
+  const t = r.activeAttribute === void 0 ? "data-active" : r.activeAttribute;
+  e.forEach((c) => {
+    const f = c === n;
+    c.setAttribute("tabindex", f ? "0" : "-1"), t && (f ? c.setAttribute(t, "true") : c.removeAttribute(t));
+  });
+}
+function b(e, n = { preventScroll: !0 }) {
+  if (e)
+    try {
+      e.focus(n);
+    } catch {
+      e.focus();
+    }
+}
+export {
+  b as f,
+  d as g,
+  i as m,
+  o as r,
+  s
+};

package/dist/roving-focus-group-5c059bf9.js

@@ -0,0 +1 @@
+"use strict";function f(e){return!!(e&&typeof e=="object"&&"disabled"in e&&e.disabled)}function i(e,n,r=f){if(n==="first")return e.findIndex(t=>!r(t));for(let t=e.length-1;t>=0;t-=1)if(!r(e[t]))return t;return-1}function a(e,n={}){const r=n.getDisabled||f,t=n.activeIndex??-1,c=n.selectedIndex??-1;return t>=0&&t<e.length&&!r(e[t])?t:c>=0&&c<e.length&&!r(e[c])?c:i(e,"first",r)}function l(e,n,r,t={}){if(!e.length)return-1;const c=t.getDisabled||f,o=t.wrap!==!1;let u=typeof t.fallbackIndex=="number"?t.fallbackIndex:n;for(let d=0;d<e.length;d+=1){if(u+=r,!o&&(u<0||u>=e.length))return-1;if(u<0&&(u=e.length-1),u>=e.length&&(u=0),!c(e[u]))return u}return-1}function s(e,n,r={}){const t=r.activeAttribute===void 0?"data-active":r.activeAttribute;e.forEach(c=>{const o=c===n;c.setAttribute("tabindex",o?"0":"-1"),t&&(o?c.setAttribute(t,"true"):c.removeAttribute(t))})}function v(e,n={preventScroll:!0}){if(e)try{e.focus(n)}catch{e.focus()}}exports.focusRovingItem=v;exports.getRovingFocusBoundaryIndex=i;exports.moveRovingFocusIndex=l;exports.resolveRovingFocusIndex=a;exports.syncRovingTabStops=s;

package/dist/roving-focus-group.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./roving-focus-group-5c059bf9.js");function d(n){if(!n.isConnected||n.hidden)return!1;const t=window.getComputedStyle(n);return!(t.display==="none"||t.visibility==="hidden")}function u(n){const t=n.getAttribute("aria-disabled");return n.hasAttribute("disabled")||t==="true"||n.disabled===!0}class l extends HTMLElement{constructor(){super(...arguments),this._container=null}static get observedAttributes(){return["item-selector","direct-item-selector","active-attribute","loop"]}get container(){return this._container}set container(t){this._container=t}get itemSelector(){return this.getAttribute("item-selector")||'[tabindex], button, [role="tab"], [role="radio"]'}get directItemSelector(){return this.getAttribute("direct-item-selector")||""}get activeAttribute(){const t=this.getAttribute("active-attribute");return t===""?null:t||null}queryItems(){const t=this._container||this,i=this.directItemSelector.trim();let e=i?Array.from(t.querySelectorAll(i)):[];return e.length||(e=Array.from(t.querySelectorAll(this.itemSelector))),e.filter(r=>d(r))}queryEnabledItems(){return this.queryItems().filter(t=>!u(t))}getActiveItem(){return this.queryItems().find(t=>t.getAttribute("tabindex")==="0")||null}setActiveItem(t,i={}){const e=this.queryItems(),r=t&&e.includes(t)&&!u(t)?t:null;return s.syncRovingTabStops(e,r,{activeAttribute:this.activeAttribute}),r&&i.focus&&s.focusRovingItem(r),this.dispatchEvent(new CustomEvent("active-item-change",{detail:{item:r},bubbles:!0,composed:!0})),r}focusBoundary(t,i={}){const e=this.queryItems(),r=s.getRovingFocusBoundaryIndex(e,t,u);return r<0?null:this.setActiveItem(e[r],i)}move(t,i={}){const e=this.queryItems();if(!e.length)return null;const r=i.current||this.getActiveItem(),o=r?e.indexOf(r):-1,a=s.resolveRovingFocusIndex(e,{activeIndex:o,getDisabled:u}),c=s.moveRovingFocusIndex(e,o,t,{wrap:i.wrap!==!1&&this.getAttribute("loop")!=="false",fallbackIndex:a,getDisabled:u});return c<0?null:this.setActiveItem(e[c],{focus:i.focus})}}typeof customElements<"u"&&!customElements.get("ui-roving-focus-group")&&customElements.define("ui-roving-focus-group",l);exports.UIRovingFocusGroup=l;