Varia

Ready to use

This page collects small, standalone utilities that don’t warrant their own page — focus rings, RTL support, and touch targets.

Focus

The focus utilities apply a consistent focus ring (outline) to interactive elements when they receive keyboard focus. This is a core accessibility requirement — keyboard users rely on focus indicators to know where they are on the page.

Custom properties

Property	Default	Description
--tng-ring-color	--tng-color-border-focus-neutral-default	Ring color
--tng-ring-offset	2px	Gap between element and ring

These can be overridden inline or in a descendant scope to customise the focus ring appearance.

.tng-focus

Apply to any interactive element to get a focus ring on :focus-visible.

<a class="tng-focus" href="#">Link</a>

Link

.tng-focus-within

Move the focus ring to a parent element. When any child receives focus, the parent shows the ring instead. This is useful for composite controls where the visual boundary should be on the container, not the inner focusable element.

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

Focusable Element

Components with built-in focus

These components implement the focus utility automatically:

Component	Focus pattern
.tng-checkbox-control	Focus-within
.tng-field-control	Focus-within
.tng-list-option	Focus / Focus-within
.tng-overflow-scroll	Focus (for keyboard scrolling)

RTL

Direction

For complex components that need calculations based on text direction (LTR vs RTL), the direction utility exposes a CSS variable that flips between 1 and -1.

Set .tng-direction on an element to get --tng-direction:

Direction	--tng-direction value
LTR	1
RTL	-1

This is useful for CSS translate, rotate, or calc() expressions that need to reverse in RTL without duplicating the entire rule.

Components with built-in direction support:

Component	Why it’s needed
.tng-slider	Track fill direction reverses in RTL
.tng-toggle-control	Knob slides in the opposite direction

Flip X

For elements like directional icons that should mirror horizontally in RTL, use .tng-rtl-flip-x.

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

This applies scale: -1 1 when the element is inside a dir="rtl" context. Use it on:

• Arrow icons (next, back, forward)
• Chevrons indicating navigation direction
• Any icon whose meaning is tied to physical left/right rather than start/end

Touch Target

Interactive elements must have a minimum touch target size for accessibility (WCAG 2.5.8 recommends at least 44 × 44 CSS pixels). The touch target utility enforces this using a pseudo-element overlay.

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

Click Me

The .tng-debug class visualises the touch target area with a red overlay — remove it in production.

Utility classes

Class	Min target size	Use case
.tng-touch-target	44 × 44px	Buttons, links, interactive icons
.tng-touch-target-sm	24 × 24px	Compact controls (e.g. close × )

Components with built-in touch targets

These components apply the touch target automatically:

Component	Target size
.tng-button	44 × 44px
.tng-accent-button	44 × 44px
.tng-icon-button	44 × 44px
.tng-link	44 × 44px
.tng-accordion-trigger	44 × 44px
.tng-pill-button	44 × 44px
.tng-social-media-button	44 × 44px

Caution

The touch target technique relies on setting position: relative on the interactive element. It will not work if the component already has a different position value set (e.g. .p-absolute). Elements with .p-absolute are explicitly excluded to avoid conflicts.

Opting out

The touch target works through an ::after pseudo-element. If you need that ::after for your own purposes — a custom overlay, decoration, or stretched-link hit area — the built-in touch target will get in your way. Add .tng-no-touch-target to opt out: it removes the position and ::after the utility would otherwise apply, leaving the pseudo-element free for you to use.

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

Click Me

This also disables the touch target on the components with built-in support listed above. Only reach for it when you genuinely need the ::after — most elements should keep the accessible hit area.

Accessibility

Focus visibility (WCAG 2.4.7)

.tng-focus and .tng-focus-within ensure interactive elements have a visible focus indicator. Never remove or suppress focus styles — keyboard users depend on them to know where they are on the page.

The focus ring uses :focus-visible rather than :focus, which means it only appears for keyboard navigation, not for mouse clicks. This provides the best experience for both input methods.

Touch targets (WCAG 2.5.8)

.tng-touch-target enforces a minimum 44 × 44 CSS pixel hit area. Apply it to small interactive elements that would otherwise be difficult to tap on touch devices. The 24px variant (.tng-touch-target-sm) is available for dense UIs where the standard target is too large, but use it sparingly.

RTL support

Use dir="rtl" on a parent element (typically <html> or a section) to enable right-to-left rendering. The .tng-direction utility and .tng-rtl-flip-x class ensure icons and layout calculations mirror correctly without any additional CSS overrides.