UI Components Rollout

1. Purpose & Scope

This article documents the UI Components Rollout shipped in Tiled v57.0.0. A suite of nine standardized, reusable UI components was introduced to replace ad-hoc or inconsistently implemented controls across Builder 2.0 and the Tiled Hub. These components form the foundation of Tiled's internal design system, ensuring consistent behavior, accessibility, and visual presentation across all product surfaces.

Scope: The UI component library is an internal platform capability. Its effects are visible to all Tiled users through the interfaces they interact with. This article documents each component's purpose, behavior, and the product surfaces it powers. Relevant for developers integrating components into new features and QA teams verifying cross-browser consistency.

2. Control Objective

The control objective is to standardize all interactive UI controls in Builder 2.0 and the Tiled Hub against a shared component library, ensuring consistent behavior (keyboard navigation, focus management, accessibility), consistent visual presentation across browsers, and a single point of maintenance for each control type.

3. Component Library — Full Reference

The following nine components were shipped in v57.0.0. Each component is a self-contained, reusable implementation that replaces previous one-off control implementations on the surfaces where it is deployed.

Component	Ticket	Description & Purpose
Button	TD-6384	The standard interactive button component. Supports primary, secondary, and destructive variants. Includes keyboard focus, hover, active, and disabled states. Used across all primary action surfaces in Builder 2.0 and the Hub.
Tooltip	TD-6385	A contextual tooltip component that surfaces on hover or focus for any interactive element. Ensures consistent tooltip positioning, delay, and dismissal behavior. Replaces previous ad-hoc tooltip implementations in Builder 2.0 toolbars and panels.
IconButton	TD-6386	An accessible button variant for icon-only controls — such as toolbar actions and panel controls — that includes a built-in aria-label for screen reader accessibility. Wraps the Button component with icon-display logic.
Input	TD-6391	The standard text input field component. Handles controlled and uncontrolled input states, validation display, label association, placeholder text, and disabled/read-only states. Used in forms across the Hub and Builder 2.0 panels.
Slider	TD-6393	A drag-to-value slider component for numeric property controls — such as opacity, size, and spacing values in Builder 2.0. Includes keyboard increment/decrement, min/max enforcement, and step-value support.
Select	TD-6446	A dropdown selection component for single-value choices. Replaces native HTML select elements and custom dropdown implementations with a consistent option list, keyboard navigation, and accessible role attributes.
Menu	TD-6456	A contextual menu component for multi-option action lists — such as right-click context menus and overflow menus in the Builder and Hub. Supports keyboard navigation, nested sub-menus, and dismiss-on-outside-click behavior.
Textarea	TD-6394	A multi-line text input component for longer-form text entry. Supports auto-resize, max-length enforcement, and consistent validation display. Used in description fields and configuration forms in the Hub.
Popover	TD-6473	A floating content container component for non-modal overlay content — such as color pickers, date selectors, and configuration panels. Handles positioning, focus trapping, and dismiss behavior consistently across surfaces.

4. Design System Principles

The UI component library is built on the following principles, which govern how each component behaves across all product surfaces:

Consistency	Every instance of a Button, Input, or other component type looks and behaves identically, regardless of where in the product it appears.
Accessibility	All components include appropriate ARIA roles, labels, keyboard navigation support, and focus management. This supports WCAG 2.1 AA compliance goals.
Single Source	Each component has one implementation. Behavior changes, bug fixes, or visual updates applied to the component library propagate to all surfaces that use it.
Composability	Components are designed to compose together — e.g., IconButton uses Button, Popover can contain Select or Slider — enabling complex controls to be built from primitive components.

5. Cross-Browser Verification

QA Scope: UI component cross-browser verification and Builder integration testing were included in the v57.0.0 QA scope. All nine components were tested in Chrome, Firefox, Safari, and Edge before the February 4, 2026 release.

Chrome	All nine components verified: interaction states, keyboard navigation, and visual rendering.
Firefox	All nine components verified: focus management and hover state rendering confirmed consistent.
Safari	All nine components verified: particular attention to Popover positioning and Slider drag behavior on macOS/iOS Safari.
Edge	All nine components verified: consistent with Chrome results across all interaction states.

6. Audit Evidence

• The UI component rollout is a CC8.1 (Change Management) artifact. Nine components were introduced in a single controlled release, each with a discrete Jira ticket and QA verification record.

• The accessibility attributes (ARIA roles, keyboard navigation) implemented in these components support Tiled's obligations to provide accessible software interfaces to its users.

7. Change History

v1.0 — February 4, 2026

Initial article. All nine UI components shipped in Tiled v57.0.0.

UI Components Rollout

Nine reusable UI components shipped to standardize forms and interactive controls across Builder 2.0 and the Tiled Hub