<pt-knob> — potentiomètre
Bipolaire dès que min < 0 < max (anneau depuis le centre). label affiché + aria-label, unit exposé aux lecteurs d'écran.
<pt-knob min="-12" max="12" value="0" default="0"
label="HI" unit="dB"></pt-knob>
<pt-knob sensitivity="600" step="1"> … "Précis"
<pt-knob disabled> … inerte + aria-disabled
<pt-fader> — fader
curve="log" = taper audio (le milieu de la course ≈ ¼ de la plage) : comparez les deux au drag.
<pt-fader min="0" max="1" value="0.5"
curve="log" label="Vol"></pt-fader>
<pt-slider> — slider
Curseur en flèche, portion parcourue allumée (bipolaire depuis zéro si min < 0 < max). Horizontal par défaut, orientation="v" pour le vertical, color par instance.
<pt-slider min="-12" max="12" value="3" default="0"
label="Gain" unit="dB"></pt-slider>
<pt-slider orientation="v" color="#b18aff"></pt-slider>
<pt-mix> — répartition à somme constante
Des sliders liés qui se partagent un total : bougez-en un, les autres compensent
(mode="prop|equal|cascade"). Cadenas = piste verrouillée, double-clic = répartition égale,
step garantit une somme exacte. Chaque piste a son label, sa description et sa couleur.
<pt-mix total="10" unit="€" step="0.5" mode="prop">
<pt-mix-track label="Courses" description="Alimentation" value="4" color="#3ddc84"></pt-mix-track>
<pt-mix-track label="Épargne" value="3" locked></pt-mix-track>
</pt-mix>
mix.addEventListener('input', e => e.detail); // { values, labels, index }
<pt-crossfader> + crossfadeGains()
Le crossfader pilote ici les deux VU via les courbes équi-puissance et sharp — les gains A/B sont calculés en direct.
import { crossfadeGains } from 'potard';
const { a, b } = crossfadeGains(xf.value, 'constant-power');
<pt-xy> — surface XY
Positionnement absolu au pointeur (bas-gauche = min), plages indépendantes par axe, flèches clavier, double-clic = défauts.
<pt-xy min-x="20" max-x="20000" value-x="800"
min-y="0" max-y="1" value-y="0.3"
label="Filter"></pt-xy>
xy.addEventListener('input', e => e.detail); // { x, y }
<pt-switch> · <pt-led> · <pt-stepper>
Le switch (Espace/Entrée au clavier) pilote la LED ; le stepper boucle sur ses options (flèches, molette, ‹ ›).
<pt-switch label="Sync" checked></pt-switch> <pt-led on color="#3ddc84" blink></pt-led> <pt-stepper options="lin,log,exp" value="log"></pt-stepper>
<pt-vumeter> — VU-mètre
Segments paramétrables, orientation verticale ou horizontale, mémoire de pic (ligne blanche). Piloté ici par le fader « Niveau ».
<pt-vumeter segments="24"></pt-vumeter> <pt-vumeter orientation="h"></pt-vumeter> meter.level = 0.75; // 0..1, peak automatique
<pt-button> — bouton
Momentané (événement press) ou verrouillé avec toggle (événement change, propriété active).
<pt-button toggle>KILL</pt-button>
btn.addEventListener('change', e => e.detail); // boolean
<pt-button>NUDGE</pt-button> → événement 'press'