component Rating {
  outputs {
    input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
    change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
  }

  props {
    size: string = "default"
    color: string = "primary"
    title: string = "Rating"
    description: string = ""
    items: unknown[] = []
    variant: string = "default"
    value: number = 0
    max: number = 5
    step: number = 1
    readonly: boolean = false
    disabled: boolean = false
    class: string = ""
  }
  state selectedValue = value
  functions {
    shared function stars() { return Array.from({ length: Math.max(1, Math.min(10, max)) }) }
    client function choose(index, sourceEvent) {
      if (readonly || disabled) { return }
      var rect = sourceEvent.currentTarget.getBoundingClientRect()
      var fraction = sourceEvent.detail > 0 && rect.width ? Math.max(0, Math.min(1, (sourceEvent.clientX - rect.left) / rect.width)) : 1
      var increment = Math.max(0.01, Number(step))
      var next = Math.ceil((index + fraction) / increment) * increment
      selectedValue = Number(Math.min(max, Math.max(0, next)).toFixed(2))
      output.input({ value: selectedValue, sourceEvent: sourceEvent })
      output.change({ value: selectedValue, sourceEvent: sourceEvent })
    }
  }
  view {
    <div {...attrs} class="wrn-rating {class}" data-wrn-owner="Rating" data-wrn-part="root" data-wrn-component="Rating" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
      {#if title}<strong>{title}</strong>{/if}
      {#if description}<p>{description}</p>{/if}
      <div role="group" aria-label="{title || 'Rating'}" class="wrn-rating__stars" data-wrn-owner="Rating" data-wrn-part="stars" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
        {#each stars() as star, index}<button type="button" aria-label="Rate {index + 1} of {max}" aria-pressed="{selectedValue === index + 1}" disabled="{disabled || readonly}" data-filled="{index < selectedValue}" style="--fill:{Math.max(0, Math.min(1, selectedValue - index)) * 100}%" @click="choose(index, event)" data-wrn-owner="Rating" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><svg viewBox="0 0 24 24" aria-hidden="true" data-wrn-owner="Rating" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z" /></svg><svg class="wrn-rating__fill" viewBox="0 0 24 24" aria-hidden="true" data-wrn-owner="Rating" data-wrn-part="fill" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z" /></svg></button>{/each}
        <input class="wrn-rating__precise" type="range" aria-label="Precise rating" min="0" max="{max}" step="{step}" value="{selectedValue}" disabled="{disabled || readonly}" @input="selectedValue = Number(event.currentTarget.value); output.input({ value: selectedValue })" @change="output.change({ value: selectedValue })"  data-wrn-owner="Rating" data-wrn-part="precise" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/><output aria-live="polite">{selectedValue} / {max}</output>
      </div><slot />
    </div>
  }

  style {
    .wrn-rating__precise { position:absolute; opacity:0; width:1px; height:1px; }
    .wrn-rating__precise:focus-visible { position:static; opacity:1; width:5rem; height:auto; accent-color:var(--wrn-color-primary); }
    .wrn-rating { display:grid; gap:.6rem; color:var(--wrn-color-text); }
    .wrn-rating p { margin:0; color:var(--wrn-color-muted); font-size:.875rem; }
    .wrn-rating__stars { display:flex; align-items:center; gap:.25rem; }
    .wrn-rating button {
      display: grid;
      place-items: center;
      width: 2rem;
      height: 2rem;
      padding: .2rem;
      border: 0;
      border-radius: calc(var(--wrn-radius-sm) - 2px);
      background: transparent;
      color: var(--wrn-color-border-strong, var(--wrn-color-muted));
      cursor: pointer;
      transition: color 120ms ease, transform 120ms ease;
    }
    .wrn-rating svg { width:1.5rem; height:1.5rem; fill:none; stroke:currentColor; stroke-width:1.5; }
    .wrn-rating button[data-filled="true"] {
      color: var(--wrn-color-warning);
    }
    .wrn-rating svg { grid-area:1 / 1; }
    .wrn-rating .wrn-rating__fill { fill:currentColor; clip-path:inset(0 calc(100% - var(--fill)) 0 0); }
    .wrn-rating output {
      margin-inline-start: .5rem;
      font-family: var(--wrn-font-mono, monospace);
      font-size: .75rem;
      font-variant-numeric: tabular-nums;
      color: var(--wrn-color-muted);
    }
    .wrn-rating button:focus-visible { outline:2px solid var(--wrn-color-focus); outline-offset:2px; border-radius:4px; }
  }
}