LEARN / APPEARANCE

Effects and state feedback

Use effects to communicate state or structure. Existing settings cover surfaces and decoration; native HTML and accessible attributes describe the state.

Explore Effects Lab: Aura, Spring lift and Layered depth are experimental demo-only candidates for a future release. Their draft classes are not part of the released framework API, and acceptance testing remains deferred.

Give each setting one responsibility

Setting	Responsibility
`data-motion`	Animation intensity: none, subtle or expressive
`data-material`	Solid, glass, veil or soft surfaces
`data-depth`	Flat, subtle or pronounced shadows
`data-edge`	Plain, gradient, shine or animated edges
`data-fill`	Solid or gradient action fills

Configure inherited presets on html, then use local exceptions and CSS custom properties for numeric control. There is no universal effect attribute or separate per-component motion attribute. Animation can be disabled while useful static feedback remains.

States remain clear without animation

Keyboard focus uses a visible ring. Current navigation uses aria-current with a visible underline, marker or font emphasis appropriate to that component. Radio/checkbox selection remains native. Only set an accessible state when it describes the actual interface; CSS does not update ARIA or application state.

Fields use native :user-invalid or an explicit aria-invalid="true" border. Include visible error text associated through aria-describedby; do not communicate an error only through colour. Validation messages, announcement timing and submission remain the browser or application's responsibility.

Associated field error and native selection

Email address Enter a complete email address, such as alex@example.com.

Delivery preference Standard delivery Collect in person

<div class="form-group">
  <label for="effects-email">Email address</label>
  <input id="effects-email" name="email" type="email" value="alex" aria-invalid="true" aria-describedby="effects-email-error">
  <small class="field-error" id="effects-email-error">Enter a complete email address, such as alex@example.com.</small>
</div>
<fieldset>
  <legend>Delivery preference</legend>
  <label><input type="radio" name="effects-delivery" value="standard" checked> Standard delivery</label>
  <label><input type="radio" name="effects-delivery" value="collection"> Collect in person</label>
</fieldset>

Apply decoration to the right surface

Use existing depth, material and edge settings on interactive surfaces. Keep text and focus contrast visible over images or transparent backgrounds. Image-caption overlays, zoom treatments and overflow fades remain application composition, rather than framework presets.

The native gallery retains its scrollbar, instructions and view links as overflow cues; fades must not conceal essential content. Loading indicators need visible status text. Print removes decoration and reveals every gallery item.

Motion behavior · Materials and palettes · Accessibility and application responsibilities.