Packages
mishka_chelekom
0.0.9-beta.4
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
usage-rules/headless/progress.md
# progress (headless)
An unstyled, accessible **determinate** progress bar: a single `role="progressbar"` element with the WAI-ARIA value wiring, plus an inner indicator carrying a `--chelekom-progress` ratio you scale in CSS. Implements the [WAI-ARIA `progressbar` role](https://www.w3.org/TR/wai-aria-1.2/#progressbar). No JS.
## Generate
```bash
mix mishka.ui.gen.headless progress
```
Generates `lib/<app>_web/components/headless/progress.ex`. There is no JS engine to wire up — this component ships no `phx-hook` and no scripts.
## Anatomy
The root is a `<div role="progressbar">` with `class="chelekom-progress"`. It renders exactly one part, marked with a `data-part` hook:
| Part | Element | `data-part` | Class | Source |
|------|---------|-------------|-------|--------|
| root | `div` | — | `chelekom-progress` | always rendered |
| indicator | `div` | `indicator` | `chelekom-progress__indicator` | always rendered |
There are **no named slots** — the component takes its value entirely from attrs. The indicator sets an inline `style="--chelekom-progress: <ratio>"` where `ratio = @value / @max` (a `0..1` number) for you to consume in CSS (e.g. `transform: scaleX(...)`).
## ARIA & keyboard
Roles and aria attributes (wired statically by the template):
- **root** — `role="progressbar"` with:
- `aria-valuemin="0"` (constant),
- `aria-valuemax={@max}` (defaults to `100`),
- `aria-valuenow={@value}` (required),
- `aria-label={@label}` (optional accessible name).
Keyboard: **none.** The Progressbar pattern is a non-interactive status indicator, so the `.exs` `aria_pattern` lists no `keyboard` interactions and the component handles no key events.
## State
**No JS** — the `.exs` `state_attributes`, `hooks`, and `scripts` are all empty. There are no `data-open`/`data-closed` style paired-presence attributes and nothing toggles them. State is expressed purely through the live `aria-valuenow` value and the `--chelekom-progress` ratio, both re-rendered server-side whenever the `value` assign changes.
## Example
```heex
<.progress id="upload" value={@uploaded} max={100} label="Upload progress" />
```
With a custom max and extra classes:
```heex
<.progress
id="steps"
value={@current_step}
max={5}
label="Onboarding progress"
class="my-progress"
/>
```
Attrs: `value` (integer, **required**, between `0` and `max`), `max` (integer, default `100`), `id` (optional), `label` (optional accessible name), `class` (extra classes for the root), and `rest` (global). There are no slots. To advance the bar from the server, update the `value` assign.
## Styling
This component ships **no** colors or spacing — only structural markup. Style it via the `chelekom-progress*` classes (`chelekom-progress`, `chelekom-progress__indicator`) and the `--chelekom-progress` ratio (a `0..1` number) the indicator exposes inline, e.g.:
```css
.chelekom-progress {
/* track styles: height, background, border-radius, overflow: hidden */
}
.chelekom-progress__indicator {
height: 100%;
transform-origin: left;
transform: scaleX(var(--chelekom-progress));
}
```
Add your own classes to the root via the `class` attr.