Hardware · specialized

Detent dial

hardware.detent-dial

Detent dial: A software representation of a physical device, state, or tactile control.

detent dialthe device controlthe hardware-style indicator

States5

Touch target44px

Evidence6

Introduced by2 kits

Visual specimen

Same contract. Every kit voice.

MAVAN renderingdefault

Translation table

What code calls it.

Webcustom controlThis component is composed from multiple web primitives.pattern

ARIAsliderThe primary accessibility role or state pattern.direct

SwiftUICustom View compositionSwiftUI has no single direct equivalent; compose and name the behavior explicitly.approximation

AppKitNSSlider or custom NSControlThe nearest named AppKit API.direct

Anatomy

Every part, named.

1Device frame
2Value or state indicator
3Physical affordance
4Keyboard or pointer control

Often confused with

Similar shape. Different contract.

Battery indicatorhardware.battery

Shares a visual family, but has a different role, state model, or interaction contract.

Device cardhardware.device-card

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Detent dial component (hardware.detent-dial). Detent dial: A software representation of a physical device, state, or tactile control. Support these states: default, hover, focus-visible, active, disabled. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.

Studio contract

What must be proven.

Required states

default · hover · focus-visible · active · disabled

Required evidence

implementation · state-matrix · responsive · keyboard · touch · reduced-motion

Source union

jade · mavan