@helixui/library 0.1.0

package/dist/shared/hx-rating-t4o150-R.js

@@ -0,0 +1,358 @@
+import { css as p, LitElement as f, html as o, nothing as m } from "lit";
+import { property as n, state as v, customElement as b } from "lit/decorators.js";
+import { t as y } from "./lit-Dpo7RLp4.js";
+const g = p`
+  :host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+
+  /* ─── Base Container ─── */
+
+  .base {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-rating-gap, var(--hx-space-1, 0.25rem));
+    font-size: var(--hx-rating-size, var(--hx-font-size-xl, 1.25rem));
+  }
+
+  .base--readonly {
+    cursor: default;
+  }
+
+  .base--disabled {
+    cursor: not-allowed;
+  }
+
+  /* ─── Symbol (each star) ─── */
+
+  .symbol {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));
+    line-height: 1;
+    transition: transform var(--hx-transition-fast, 0.15s ease);
+  }
+
+  .symbol:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 0.125rem);
+  }
+
+  .symbol--full,
+  .symbol--half {
+    color: var(--hx-rating-color, var(--hx-color-warning-400, #fbbf24));
+  }
+
+  .symbol--disabled {
+    cursor: not-allowed;
+  }
+
+  .base:not(.base--readonly) .symbol:hover {
+    transform: scale(1.15);
+    color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #fcd34d));
+  }
+
+  /* ─── Half-Star Layout ─── */
+
+  .star-half {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 1em;
+    height: 1em;
+  }
+
+  .star-half__filled {
+    position: absolute;
+    left: 0;
+    top: 0;
+    /* Clip to left 50% for the filled half */
+    clip-path: inset(0 50% 0 0);
+  }
+
+  .star-half__empty {
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));
+    /* Clip to right 50% for the empty half */
+    clip-path: inset(0 0 0 50%);
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .symbol {
+      transition: none;
+    }
+  }
+`;
+var _ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (e, t, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? x(t, s) : t, h = e.length - 1, d; h >= 0; h--)
+    (d = e[h]) && (a = (r ? d(t, s, a) : d(a)) || a);
+  return r && a && _(t, s, a), a;
+};
+let l = class extends f {
+  constructor() {
+    super(), this.value = 0, this.max = 5, this.precision = 1, this.readonly = !1, this.disabled = !1, this.name = "", this.label = "", this._hoverValue = null, this._internals = this.attachInternals();
+  }
+  // ─── Lifecycle ───
+  updated(e) {
+    (e.has("value") || e.has("name")) && this._internals.setFormValue(String(this.value));
+  }
+  // ─── Helpers ───
+  get _displayValue() {
+    return this._hoverValue ?? this.value;
+  }
+  _clampAndSnap(e) {
+    const t = Math.min(Math.max(0, e), this.max), r = Math.round(t / this.precision) * this.precision;
+    return parseFloat(r.toFixed(this.precision === 0.5 ? 1 : 0));
+  }
+  _getStarState(e) {
+    const t = this._displayValue;
+    return t >= e ? "full" : this.precision === 0.5 && t >= e - 0.5 ? "half" : "empty";
+  }
+  /** Star i is "checked" when its integer value or its half-value matches the current value. */
+  _isChecked(e) {
+    return Math.abs(this.value - e) < 0.01 || this.precision === 0.5 && Math.abs(this.value - (e - 0.5)) < 0.01;
+  }
+  /** Resolve the clicked/hovered value from mouse position within a star element. */
+  _resolveValue(e, t) {
+    if (this.precision === 0.5) {
+      const s = e.currentTarget.getBoundingClientRect();
+      return (e.clientX - s.left) / s.width < 0.5 ? t - 0.5 : t;
+    }
+    return t;
+  }
+  // ─── Event Handlers ───
+  _setValue(e) {
+    if (this.readonly || this.disabled) return;
+    const t = this._clampAndSnap(e);
+    this.value = t, this._internals.setFormValue(String(t)), this.dispatchEvent(
+      new CustomEvent("hx-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: t }
+      })
+    );
+  }
+  _handleKeydown(e) {
+    if (this.readonly || this.disabled) return;
+    let t = null;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        e.preventDefault(), t = this._clampAndSnap(this.value + this.precision);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        e.preventDefault(), t = this._clampAndSnap(this.value - this.precision);
+        break;
+      case "Home":
+        e.preventDefault(), t = 0;
+        break;
+      case "End":
+        e.preventDefault(), t = this.max;
+        break;
+      default:
+        return;
+    }
+    t !== null && (this._setValue(t), this.updateComplete.then(() => {
+      var s, r;
+      (r = (s = this.shadowRoot) == null ? void 0 : s.querySelector('[part="symbol"][tabindex="0"]')) == null || r.focus();
+    }));
+  }
+  _handleSymbolClick(e, t) {
+    this.readonly || this.disabled || this._setValue(this._resolveValue(e, t));
+  }
+  _handleSymbolMouseEnter(e, t) {
+    if (this.readonly || this.disabled) return;
+    const s = this._resolveValue(e, t);
+    this._hoverValue = s, this.dispatchEvent(
+      new CustomEvent("hx-hover", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: s }
+      })
+    );
+  }
+  _handleSymbolMouseMove(e, t) {
+    if (this.readonly || this.disabled || this.precision !== 0.5) return;
+    const s = e.currentTarget.getBoundingClientRect(), a = (e.clientX - s.left) / s.width < 0.5 ? t - 0.5 : t;
+    a !== this._hoverValue && (this._hoverValue = a, this.dispatchEvent(
+      new CustomEvent("hx-hover", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: a }
+      })
+    ));
+  }
+  _handleMouseLeave() {
+    this._hoverValue = null;
+  }
+  // ─── SVG Star Icons ───
+  _renderFullStar() {
+    return o`
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        aria-hidden="true"
+        width="1em"
+        height="1em"
+      >
+        <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"
+        />
+      </svg>
+    `;
+  }
+  _renderHalfStar() {
+    return o`
+      <span class="star-half" aria-hidden="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          width="1em"
+          height="1em"
+          class="star-half__filled"
+        >
+          <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"
+          />
+        </svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          width="1em"
+          height="1em"
+          class="star-half__empty"
+        >
+          <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"
+          />
+        </svg>
+      </span>
+    `;
+  }
+  _renderEmptyStar() {
+    return o`
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        aria-hidden="true"
+        width="1em"
+        height="1em"
+      >
+        <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"
+        />
+      </svg>
+    `;
+  }
+  _renderStarIcon(e) {
+    return e === "full" ? this._renderFullStar() : e === "half" ? this._renderHalfStar() : this._renderEmptyStar();
+  }
+  // ─── Render ───
+  render() {
+    const e = this.label || "Rating";
+    return this.readonly ? o`
+        <div
+          part="base"
+          class="base base--readonly"
+          role="img"
+          aria-label="${e}: ${this.value} out of ${this.max}"
+        >
+          ${Array.from({ length: this.max }, (t, s) => {
+      const r = s + 1, a = this._getStarState(r);
+      return o`
+              <span part="symbol" class="symbol symbol--${a}" data-index="${r}">
+                <slot name="icon" data-state="${a}">${this._renderStarIcon(a)}</slot>
+              </span>
+            `;
+    })}
+        </div>
+      ` : o`
+      <div
+        part="base"
+        class="base${this.disabled ? " base--disabled" : ""}"
+        role="radiogroup"
+        aria-label="${e}"
+        aria-disabled="${this.disabled ? "true" : m}"
+        tabindex="-1"
+        @keydown="${this._handleKeydown}"
+        @mouseleave="${this._handleMouseLeave}"
+      >
+        ${Array.from({ length: this.max }, (t, s) => {
+      const r = s + 1, a = this._getStarState(r), h = this._isChecked(r), d = r === 1 ? "1 star" : `${r} stars`, c = this.value > 0 ? Math.ceil(this.value) === r : r === 1;
+      return o`
+            <span
+              part="symbol"
+              class="symbol symbol--${a}${this.disabled ? " symbol--disabled" : ""}"
+              role="radio"
+              aria-label="${d}"
+              aria-checked="${h ? "true" : "false"}"
+              tabindex="${!this.disabled && c ? "0" : "-1"}"
+              data-index="${r}"
+              @click="${(u) => this._handleSymbolClick(u, r)}"
+              @mouseenter="${(u) => this._handleSymbolMouseEnter(u, r)}"
+              @mousemove="${(u) => this._handleSymbolMouseMove(u, r)}"
+            >
+              <slot name="icon" data-state="${a}">${this._renderStarIcon(a)}</slot>
+            </span>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+l.styles = [y, g];
+l.formAssociated = !0;
+i([
+  n({ type: Number, reflect: !0 })
+], l.prototype, "value", 2);
+i([
+  n({ type: Number, reflect: !0 })
+], l.prototype, "max", 2);
+i([
+  n({ type: Number, reflect: !0 })
+], l.prototype, "precision", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], l.prototype, "readonly", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+i([
+  n({ type: String })
+], l.prototype, "name", 2);
+i([
+  n({ type: String })
+], l.prototype, "label", 2);
+i([
+  v()
+], l.prototype, "_hoverValue", 2);
+l = i([
+  b("hx-rating")
+], l);
+export {
+  l as H
+};
+//# sourceMappingURL=hx-rating-t4o150-R.js.map

package/dist/shared/hx-rating-t4o150-R.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-rating-t4o150-R.js","sources":["../../src/components/hx-rating/hx-rating.styles.ts","../../src/components/hx-rating/hx-rating.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixRatingStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Base Container ─── */\n\n  .base {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-rating-gap, var(--hx-space-1, 0.25rem));\n    font-size: var(--hx-rating-size, var(--hx-font-size-xl, 1.25rem));\n  }\n\n  .base--readonly {\n    cursor: default;\n  }\n\n  .base--disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─── Symbol (each star) ─── */\n\n  .symbol {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    cursor: pointer;\n    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));\n    line-height: 1;\n    transition: transform var(--hx-transition-fast, 0.15s ease);\n  }\n\n  .symbol:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.125rem);\n  }\n\n  .symbol--full,\n  .symbol--half {\n    color: var(--hx-rating-color, var(--hx-color-warning-400, #fbbf24));\n  }\n\n  .symbol--disabled {\n    cursor: not-allowed;\n  }\n\n  .base:not(.base--readonly) .symbol:hover {\n    transform: scale(1.15);\n    color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #fcd34d));\n  }\n\n  /* ─── Half-Star Layout ─── */\n\n  .star-half {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    width: 1em;\n    height: 1em;\n  }\n\n  .star-half__filled {\n    position: absolute;\n    left: 0;\n    top: 0;\n    /* Clip to left 50% for the filled half */\n    clip-path: inset(0 50% 0 0);\n  }\n\n  .star-half__empty {\n    position: absolute;\n    left: 0;\n    top: 0;\n    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));\n    /* Clip to right 50% for the empty half */\n    clip-path: inset(0 0 0 50%);\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .symbol {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixRatingStyles } from './hx-rating.styles.js';\n\n/**\n * A star rating input component for user feedback and display.\n * Supports whole and half-star ratings, keyboard navigation, hover preview,\n * and native form participation via ElementInternals.\n *\n * ### Accessibility\n *\n * - **Interactive mode**: Uses `role=\"radiogroup\"` with individual `role=\"radio\"` stars.\n *   Each star has `aria-label` (\"1 star\", \"2 stars\", etc.) and `aria-checked`.\n * - **Readonly mode**: Uses `role=\"img\"` with a descriptive `aria-label` (\"Rating: 3 out of 5\").\n * - **Keyboard**: Arrow keys (Left/Right/Up/Down) adjust value by `precision` step.\n *   Home sets to 0, End sets to `max`. Focus follows the active tab stop.\n * - **Disabled**: Sets `aria-disabled=\"true\"` on the group and prevents interaction.\n *\n * @summary Star rating input for user feedback and display.\n *\n * @tag hx-rating\n *\n * @slot icon - Custom rating icon. Receives `data-state` attribute (\"full\" | \"half\" | \"empty\").\n *\n * @fires {CustomEvent<{value: number}>} hx-change - Dispatched when the rating value changes.\n * @fires {CustomEvent<{value: number}>} hx-hover - Dispatched while hovering over a star for preview.\n *\n * @csspart base - The outer container element.\n * @csspart symbol - Each individual star/icon element.\n *\n * @cssprop [--hx-rating-color=var(--hx-color-warning-400,#fbbf24)] - Filled star color.\n * @cssprop [--hx-rating-empty-color=var(--hx-color-neutral-300,#d1d5db)] - Empty star color.\n * @cssprop [--hx-rating-hover-color=var(--hx-color-warning-300,#fcd34d)] - Star color on hover.\n * @cssprop [--hx-rating-size=var(--hx-font-size-xl,1.25rem)] - Star icon size.\n * @cssprop [--hx-rating-gap=var(--hx-space-1,0.25rem)] - Gap between stars.\n *\n * @example\n * ```html\n * <!-- Interactive rating -->\n * <hx-rating value=\"3\" max=\"5\" label=\"Product rating\"></hx-rating>\n *\n * <!-- Read-only display -->\n * <hx-rating value=\"4.5\" max=\"5\" precision=\"0.5\" readonly></hx-rating>\n * ```\n */\n@customElement('hx-rating')\nexport class HelixRating extends LitElement {\n  static override styles = [tokenStyles, helixRatingStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The current rating value (0 to max).\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value = 0;\n\n  /**\n   * The maximum number of stars.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 5;\n\n  /**\n   * The minimum selectable increment. Use 0.5 for half-star ratings.\n   * @attr precision\n   */\n  @property({ type: Number, reflect: true })\n  precision: 0.5 | 1 = 1;\n\n  /**\n   * When true, the rating is display-only and cannot be changed.\n   * @attr readonly\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * When true, the rating is disabled and cannot be interacted with.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The name submitted with the form.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Accessible label for the rating group.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /** @internal */\n  @state() private _hoverValue: number | null = null;\n\n  // ─── Lifecycle ───\n\n  override updated(changedProps: Map<string, unknown>): void {\n    if (changedProps.has('value') || changedProps.has('name')) {\n      this._internals.setFormValue(String(this.value));\n    }\n  }\n\n  // ─── Helpers ───\n\n  private get _displayValue(): number {\n    return this._hoverValue ?? this.value;\n  }\n\n  private _clampAndSnap(v: number): number {\n    const clamped = Math.min(Math.max(0, v), this.max);\n    const steps = Math.round(clamped / this.precision);\n    const snapped = steps * this.precision;\n    return parseFloat(snapped.toFixed(this.precision === 0.5 ? 1 : 0));\n  }\n\n  private _getStarState(i: number): 'full' | 'half' | 'empty' {\n    const dv = this._displayValue;\n    if (dv >= i) return 'full';\n    if (this.precision === 0.5 && dv >= i - 0.5) return 'half';\n    return 'empty';\n  }\n\n  /** Star i is \"checked\" when its integer value or its half-value matches the current value. */\n  private _isChecked(i: number): boolean {\n    if (Math.abs(this.value - i) < 0.01) return true;\n    if (this.precision === 0.5 && Math.abs(this.value - (i - 0.5)) < 0.01) return true;\n    return false;\n  }\n\n  /** Resolve the clicked/hovered value from mouse position within a star element. */\n  private _resolveValue(e: MouseEvent, i: number): number {\n    if (this.precision === 0.5) {\n      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n      const isLeftHalf = (e.clientX - rect.left) / rect.width < 0.5;\n      return isLeftHalf ? i - 0.5 : i;\n    }\n    return i;\n  }\n\n  // ─── Event Handlers ───\n\n  private _setValue(v: number): void {\n    if (this.readonly || this.disabled) return;\n    const next = this._clampAndSnap(v);\n    this.value = next;\n    this._internals.setFormValue(String(next));\n    this.dispatchEvent(\n      new CustomEvent('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: next },\n      }),\n    );\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (this.readonly || this.disabled) return;\n    let next: number | null = null;\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        e.preventDefault();\n        next = this._clampAndSnap(this.value + this.precision);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        e.preventDefault();\n        next = this._clampAndSnap(this.value - this.precision);\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = this.max;\n        break;\n      default:\n        return;\n    }\n\n    if (next !== null) {\n      this._setValue(next);\n      void this.updateComplete.then(() => {\n        this.shadowRoot?.querySelector<HTMLElement>('[part=\"symbol\"][tabindex=\"0\"]')?.focus();\n      });\n    }\n  }\n\n  private _handleSymbolClick(e: MouseEvent, i: number): void {\n    if (this.readonly || this.disabled) return;\n    this._setValue(this._resolveValue(e, i));\n  }\n\n  private _handleSymbolMouseEnter(e: MouseEvent, i: number): void {\n    if (this.readonly || this.disabled) return;\n    const val = this._resolveValue(e, i);\n    this._hoverValue = val;\n    this.dispatchEvent(\n      new CustomEvent('hx-hover', {\n        bubbles: true,\n        composed: true,\n        detail: { value: val },\n      }),\n    );\n  }\n\n  private _handleSymbolMouseMove(e: MouseEvent, i: number): void {\n    if (this.readonly || this.disabled || this.precision !== 0.5) return;\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const isLeftHalf = (e.clientX - rect.left) / rect.width < 0.5;\n    const val = isLeftHalf ? i - 0.5 : i;\n    if (val !== this._hoverValue) {\n      this._hoverValue = val;\n      this.dispatchEvent(\n        new CustomEvent('hx-hover', {\n          bubbles: true,\n          composed: true,\n          detail: { value: val },\n        }),\n      );\n    }\n  }\n\n  private _handleMouseLeave(): void {\n    this._hoverValue = null;\n  }\n\n  // ─── SVG Star Icons ───\n\n  private _renderFullStar() {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n        width=\"1em\"\n        height=\"1em\"\n      >\n        <path\n          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\"\n        />\n      </svg>\n    `;\n  }\n\n  private _renderHalfStar() {\n    return html`\n      <span class=\"star-half\" aria-hidden=\"true\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          width=\"1em\"\n          height=\"1em\"\n          class=\"star-half__filled\"\n        >\n          <path\n            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\"\n          />\n        </svg>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          width=\"1em\"\n          height=\"1em\"\n          class=\"star-half__empty\"\n        >\n          <path\n            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\"\n          />\n        </svg>\n      </span>\n    `;\n  }\n\n  private _renderEmptyStar() {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        aria-hidden=\"true\"\n        width=\"1em\"\n        height=\"1em\"\n      >\n        <path\n          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\"\n        />\n      </svg>\n    `;\n  }\n\n  private _renderStarIcon(state: 'full' | 'half' | 'empty') {\n    if (state === 'full') return this._renderFullStar();\n    if (state === 'half') return this._renderHalfStar();\n    return this._renderEmptyStar();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const ariaLabel = this.label || 'Rating';\n\n    if (this.readonly) {\n      return html`\n        <div\n          part=\"base\"\n          class=\"base base--readonly\"\n          role=\"img\"\n          aria-label=\"${ariaLabel}: ${this.value} out of ${this.max}\"\n        >\n          ${Array.from({ length: this.max }, (_, idx) => {\n            const i = idx + 1;\n            const state = this._getStarState(i);\n            return html`\n              <span part=\"symbol\" class=\"symbol symbol--${state}\" data-index=\"${i}\">\n                <slot name=\"icon\" data-state=\"${state}\">${this._renderStarIcon(state)}</slot>\n              </span>\n            `;\n          })}\n        </div>\n      `;\n    }\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"base${this.disabled ? ' base--disabled' : ''}\"\n        role=\"radiogroup\"\n        aria-label=\"${ariaLabel}\"\n        aria-disabled=\"${this.disabled ? 'true' : nothing}\"\n        tabindex=\"-1\"\n        @keydown=\"${this._handleKeydown}\"\n        @mouseleave=\"${this._handleMouseLeave}\"\n      >\n        ${Array.from({ length: this.max }, (_, idx) => {\n          const i = idx + 1;\n          const state = this._getStarState(i);\n          const checked = this._isChecked(i);\n          const starLabel = i === 1 ? '1 star' : `${i} stars`;\n          const isActiveTabStop = this.value > 0 ? Math.ceil(this.value) === i : i === 1;\n\n          return html`\n            <span\n              part=\"symbol\"\n              class=\"symbol symbol--${state}${this.disabled ? ' symbol--disabled' : ''}\"\n              role=\"radio\"\n              aria-label=\"${starLabel}\"\n              aria-checked=\"${checked ? 'true' : 'false'}\"\n              tabindex=\"${!this.disabled && isActiveTabStop ? '0' : '-1'}\"\n              data-index=\"${i}\"\n              @click=\"${(e: MouseEvent) => this._handleSymbolClick(e, i)}\"\n              @mouseenter=\"${(e: MouseEvent) => this._handleSymbolMouseEnter(e, i)}\"\n              @mousemove=\"${(e: MouseEvent) => this._handleSymbolMouseMove(e, i)}\"\n            >\n              <slot name=\"icon\" data-state=\"${state}\">${this._renderStarIcon(state)}</slot>\n            </span>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-rating': HelixRating;\n  }\n}\n"],"names":["helixRatingStyles","css","HelixRating","LitElement","changedProps","v","clamped","snapped","i","dv","rect","next","_b","_a","val","html","state","ariaLabel","_","idx","nothing","checked","starLabel","isActiveTabStop","e","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}