Primitives

Progress

A determinate bar. The number is stated once and rendered twice from the same source — the element carries --aura-value and the stylesheet turns it into a width, while aria-valuenow reports it. Values are clamped: a bar past its own end is a bug the caller should not see.

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

Code

index.html

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-3);min-width:320px;">
  <div role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload" class="aura-progress">
    <div class="aura-progress__fill" style="--aura-value:64"></div>
  </div>
  <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="Overshoot, clamped to 100" class="aura-progress">
    <div class="aura-progress__fill" style="--aura-value:100"></div>
  </div>
</div>

Demo.tsx

import { Progress, Stack } from '@ilomee/aura-react';

/**
 * `minWidth`, as the Field and Select demos do it. A bar is `width: 100%`, and the preview
 * panel is a shrink-to-fit flex row — a percentage against a parent with no width of its own
 * resolves to nothing, so the demo rendered two bars 0px wide and looked like an empty stage.
 * In a page there is always something to fill; a preview has to be given it.
 */
export default function Demo() {
  return (
    <Stack gap={3} style={{ minWidth: 320 }}>
      <Progress value={64} label="Upload" />
      {/* Clamped, not drawn past its own end. */}
      <Progress value={140} label="Overshoot, clamped to 100" />
    </Stack>
  );
}

Demo.vue

<script setup lang="ts">
import { Progress } from '@ilomee/aura-vue';
</script>

<template>
  <Progress :value="64" label="Upload" />
</template>

Demo.svelte

<script lang="ts">
  import { Progress } from '@ilomee/aura-svelte';
</script>

<Progress value={64} label="Upload" />

Used as aura-progress.

demo.component.ts

import { AuraProgress } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraProgress],
  template: `<aura-progress [value]="64" label="Upload" />`,
})
export class DemoComponent {}

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
value	`number`	`0`	0–100, clamped.
label	`string`	—

Name	Type	Default	Notes
value	`number`	`0`
label	`string`	—

Name	Type	Default	Notes
value	`number`	`0`
label	`string`	—

Name	Type	Default	Notes
value	`number`	`0`
label	`string`	—

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-progress	base	Required. A modifier does nothing without it.
.aura-progress__fill	element

Tokens and rules

components.css

height: var(--progress-h)
track: var(--surface-3)
fill: var(--gradient) · width: calc(var(--aura-value) * 1%)