Welcome to Tecton

Tecton is Q2's library of design system components and platform interface capabilities. It allows Q2 and our partners to build cohesive and consistent UI experiences for end users across a variety of Q2 products.

Tecton consists of:

We're excited to see what you'll build! To get started, feel free to check out some of the following links:

Tecton 1.69.0

New Components

  • Search Filter and Search Input — A dedicated component for filtering and searching through lists of options, with support for both local client-side filtering and asynchronous data fetching. Complements q2-select for scenarios where users need to search rather than browse a known list.

Component Features, and Improvements

  • OTP Flexible Field Grouping — Field grouping now accepts array syntax (e.g., length="[3,3]") for full control over digit cluster sizes, replacing the previous binary split property. A new showSendCode property lets consumers control send-code button visibility independently from the component's ready state.
  • Button External Form Association — Added a form attribute that associates a button with any form by its ID, enabling form submission even when the button is placed outside the form element in the DOM.
  • Item Vertical Alignment Control — A new vertical-align property allows decorators and single-slot content to be aligned to the top, center, or bottom of the item, giving layouts precise control over content positioning.
  • Item Hover Background — Hover behavior on clickable items now applies a customizable background color transition instead of a box-shadow, with proper disabled-state handling and correct focus-ring layering.
  • Data Table Row Status Indicators — A new status property on data table rows displays a colored accent bar and icon to convey row-level status (info, alert, error, warning, success), with CSS variables to customize the status column width, icon size, and accent bar colors per status type.
  • Input Placeholder Font Customization — New CSS custom properties (--tct-input-placeholder-font-size, --tct-input-placeholder-font-weight, --tct-input-placeholder-line-height, --tct-input-placeholder-padding) allow placeholder text to be styled independently from the input value, enabling use cases like large masked-input glyphs at normal label size.
  • Section Border Radius Variable — Added --tct-section-border-radius to allow consumers to customize the section wrapper's border radius (defaults to --app-border-radius-1, 4px).
  • Tag Compact Default Size — The tag component is now smaller by default, with the --tct-tag-clickable-size variable removed. Size customization remains available through existing CSS variables.

Capability Updates

  • showModal() Focus Restore Options — New refocus and refocusContainer options on the show-modal capability allow modals to automatically restore keyboard focus to the previously active element — or a specified fallback container — when the modal closes, improving keyboard navigation and accessibility in iframe-based applications.
  • tabbedOutlet Stable Tab Values — Dynamic tabs now emit stable feature and module identifiers as tab values instead of display labels, enabling reliable tab selection tracking and proper matching with pre-authored tab placeholders across tab container changes.
  • SDK Initialization Timing Fix — loadDesignSystem can now be called before the <body> is parsed, resolving a timing issue that caused elements to fail to initialize when the SDK setup script was placed in the document <head>.

View full changelog