<svelte:options customElement={{ tag: 'm-linear-progressbar-percentage' }} />

<script lang="ts">
  /**
   * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
   */
  interface Props {
    [key: string]: any;
    /**
     * The current value of the progress bar.
     */
    value?: number;
  }

  let { value = 0, class: className, ...attrs }: Props = $props();
</script>

<div class={['mc-linear-progressbar-percentage', className]}>
  <div
    class="mc-linear-progressbar-percentage__indicator"
    role="progressbar"
    style={`--progress-value: ${value};`}
    aria-valuenow={value}
    aria-valuemin="0"
    aria-valuemax="100"
    {...attrs}
  >
    <div class="mc-linear-progressbar-percentage__label">
      <p class="mc-linear-progressbar-percentage__value">
        {value}
        <span class="mc-linear-progressbar-percentage__unit">%</span>
      </p>
    </div>
  </div>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-linear-progressbar-percentage {
  --progress-value: 40;
  font-family: var(--font-family, LeroyMerlin), sans-serif;
  background-color: var(--progressbar-color-background, #c9d0de);
  height: 1.5rem;
  position: relative;
  min-width: 6rem;
  border-radius: var(--border-radius-l, 1rem);
  box-sizing: border-box;
}
.mc-linear-progressbar-percentage__indicator {
  border-radius: var(--border-radius-l, 1rem);
  background-color: var(--progressbar-color-indicator, #464e63);
  min-width: 40px;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  transition: width 0.4s ease;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  width: calc(40px + var(--progress-value) * (100% - 40px) / 100);
}
.mc-linear-progressbar-percentage__label {
  box-sizing: border-box;
  border-radius: var(--border-radius-l, 1rem);
  background-color: var(--progressbar-badge-color-background, #ffffff);
  color: var(--progressbar-badge-color-text, #171b26);
  height: 1.5rem;
  width: 2.5rem;
  border: 0.125rem solid var(--progressbar-color-indicator, #464e63);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-linear-progressbar-percentage__value {
  font-size: var(--font-size-50, 0.75rem);
  font-weight: var(--font-weight-semi-bold, 600);
  margin: 0;
}
.mc-linear-progressbar-percentage__unit {
  font-size: var(--font-size-25, 0.625rem);
  font-weight: var(--font-weight-semi-bold, 600);
  margin: 0;
  position: relative;
  bottom: 1px;
}</style>
