# Progress — accessible headless progress bar
#
# Exposes progress value as CSS custom property for styling.
# Ships zero CSS.
#
# Usage:
#   Progress value: 0.65
#   Progress value: 42, max: 100

export Progress = component
  @value:: number := 0
  @max:: number := 1
  @label:: any := null

  percent ~= Math.min(100, Math.max(0, (@value / @max) * 100))

  render
    div role: "progressbar"
      aria-valuenow: @value
      aria-valuemin: 0
      aria-valuemax: @max
      aria-label: @label?!
      style: "--progress-value: #{@value}; --progress-percent: #{percent}%"
      $complete: (percent >= 100)?!
      slot
