Progress

        export function Root(props: ProgressRootProps) {
  const max = () => props.max ?? 100
  const percentage = () => (props.value != null ? Math.round((props.value / max()) * 100) : null)
  const state = () => {
    if (props.value == null) return "loading"
    return props.value >= max() ? "complete" : "loading"
  }

  return (
    <div
      role="progressbar"
      aria-valuenow={props.value ?? undefined}
      aria-valuemin={0}
      aria-valuemax={max()}
      aria-label={props["aria-label"]}
      aria-labelledby={props["aria-labelledby"]}
      class={props.class}
      style={props.style}
      data-value={props.value ?? undefined}
      data-max={max()}
      data-percent={percentage() ?? undefined}
      {...applySemanticAttrs({
        scope: "progress",
        part: "root",
        state: state(),
      })}
    >
      {props.children}
    </div>
  )
}