Charge session

• The card is a labelled group with a real heading. Power, energy added, time to limit and cost are a description list, so each value is read with its name.
• The limit marker is a focusable role="slider" named Charge limit, with aria-valuetext such as Charge limit 80%, about 23 minutes to go. Arrows move it by 1%, Shift with an arrow or Page Up and Page Down by 10%, Home and End jump to the minimum and to 100%. The drag hint is linked with aria-describedby.
• Stopping, resuming, reaching the limit, starting a new session and a settled limit change are announced in a polite live region with the charge, energy and cost at that moment.
• The action button keeps one accessible label at a time (Stop charging, Resume charging, Start new session) and its width never changes.
• The scene and the curve plot are hidden from assistive technology; every value they show is also in the stats, the header or the slider.
• State never relies on color: the header pairs an icon with Charging, Stopped or Charged to limit, and time to limit reads Paused or Done.

• One requestAnimationFrame loop advances the session and writes SVG attributes, CSS variables and text directly; React renders only when the session state changes.
• Packets move along an arc length table of the cable curve, so they travel at an even pace, ease out of the charger, glide through the nub and slow as they meet the fill front, where each landing briefly brightens the front.
• Power follows the charge curve times an availability level that ramps up on start and drains exponentially on stop, so the numbers, the LED, the cable core, the packet pace and the live point on the curve all fall away together.
• Dragging the limit is one to one with the pointer; the pill lifts slightly while held. Raising the limit after the pack is full resumes charging, lowering it below the charge completes the session.
• The loop stops offscreen, in background tabs, when paused, and once the flow has fully drained.
• With reduced motion the session holds still: packets sit at even spacing along the path to show direction, values are current, and stop, resume and the limit all update at once.

• The scene is one SVG with a fixed aspect ratio that scales to any width, so the charger, cable and pack keep their proportions; the limit pill is HTML placed in container units, so its text and 44px touch target keep their real size.
• The curve stretches to its container with non scaling strokes; its labels and live point are HTML so they stay crisp and round.
• Above 640px the curve sits beside a two by two stats grid and the percentage grows to the display size. Below 420px padding tightens, the stats shrink one step and the action button spans the card.
• Dragging uses touch-action pan-y on the scene and the curve, so vertical page scroll still works on phones.

• A frame evaluates the power curve, a 48 step time to limit integral and 18 packets, well under a millisecond.
• Every write goes through a cache, so unchanged attributes and text are never touched; pointer math reads the target rectangle once per press.
• No canvas, no layout reads in the loop, and the loop idles completely once the flow has drained.

• Use it for EV charging apps, fleet and depot dashboards, charge point operator consoles, or any device charging flow where time to full and cost matter.
• The session is simulated from capacity, maxPower, taperAt and rate. For a real session, map your live state of charge onto startCharge and keep speed low, or say clearly that the view is an estimate.
• Keep the title to the charger or vehicle name and put the site and peak power in location.
• Stopping in the demo is local; wire onStateChange to your backend before calling it a real stop.

The full library index for assistants is at /llms.txt.