Varia

Focus

Sometimes you may want to move the focus area to a parent element for better accessibility. Set .tng-focus-within on a parent element to apply focus styles when any child element receives focus.

<div class="tng-surface border-xs p-xl | tng-focus-within">
  <button class="tng-button">Focusable Element</button>
</div>

These components implement the focus utility by default:

Checkbox
List (option)

RTL

Direction

For some complex components, it may be necessary to adjust calculations based on the text direction (LTR or RTL). The direction utility class can be used to facilitate this.

Set .tng-direction on an element to expose a CSS property --tng-direction that will automatically be set to 1 for LTR and -1 for RTL.

These components implement the direction utility by default:

Toggle

Flip X

If you need a component, like an icon, to flip horizontally in RTL, you can use the flip X utility class.

<span class="tng-icon icon-arrow-right | tng-rtl-flip-x"></span>

Touch Target

For accessibility, it’s important to ensure that interactive elements have a sufficient touch target size.

<button class="tng-touch-target tng-debug">Click Me</button>

These components implement the touch target utility by default:

Accordion (trigger)
Button
Link