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:
This release introduces the Card Image component, a versatile new element designed for rendering card visuals with support for multiple image formats (PNG, JPEG, SVG), gradient backgrounds with customizable opacity and direction, blur effects, and corner masking. This component is built to be modular enough to support a variety of card variants across different platforms and account types.
The Input component now supports several new input types tailored for the banking and financial industry. Developers can now use built-in input masking for routing numbers, SWIFT/BIC codes, IBAN, and CLABE formats, making it easier to build forms that guide users through entering structured financial data correctly.
The Area Chart component now allows developers to set minimum and maximum values for both the x and y axes. This gives teams greater control over how data is displayed, making charts more impactful by allowing the y-axis to start at values other than zero.
The Detail component now supports a center alignment option in addition to the existing left and right alignments, providing more flexibility when laying out informational content.
The Tooltip component gains a new property that keeps the tooltip visible when hovered. This ensures that users who need to interact with tooltip content, such as reading longer text or using assistive technologies, can do so without the tooltip disappearing unexpectedly.
The Option component has been refined with additional padding when a slotted Item component is present, improving visual consistency. A new internal configuration also allows the space reserved for the selected state indicator to be hidden, which the Dropdown component now uses by default for a cleaner appearance.
The Select component now has improved top and bottom padding when multiline-options is enabled, ensuring the padding matches the existing left and right spacing for a more balanced layout.
Four new icons have been added to the Icon library: celebration, document-stacked, areachart-stacked, and cash-flow.
This release introduces tct-prefixed event names across all components. Events like change and input now have corresponding tctChange and tctInput variants. This prefix prevents conflicts with native browser event names, resolves warnings in Stencil, and improves compatibility with React and Vue framework wrappers. The original event names continue to work, so no migration is required at this time.
The Select component now correctly emits keydown events for modifier keys like Shift. Previously, the internal key handling was calling stopPropagation, which prevented these events from reaching external listeners — a particular issue for developers implementing custom focus traps.
The Input component's date format modifier now works correctly for formats like M-D-YY. Previously, single-character date segments were not being masked as expected, causing values like "1-2-34" to incorrectly display as "12-34".
The Textarea component no longer causes VoiceOver to prematurely announce character count information on page load. The count is now only read when the textarea receives focus, providing a less disruptive experience for screen reader users.
The Meter component's built-in tooltip positioning has been corrected to prevent it from rendering in unexpected locations when used within certain layouts.
The Dropdown component no longer causes the page to scroll to the top when opened via keyboard (Enter or ArrowDown). The fix ensures that the scroll-into-view behavior for the active option waits until the popover has been fully positioned.
The Checkbox toggle variant now correctly maps its CSS custom properties. The --tct-checkbox-toggle-active-track-color variable properly updates the track, and --tct-checkbox-toggle-active-color properly updates the indicator, resolving a mismatch introduced in a previous update.
The Payrecs brand icon (brand-payrecs-filled) is now rendering correctly in the Icon library.
This release includes a major expansion of automated accessibility testing across 23 components. Axe DevTools end-to-end test coverage has been improved for Checkbox Group, Currency, Data Table, Detail, Dropdown, Dropdown Item, Editable Field, File Picker, Input, Item, List, Message, Option, Option List, Pagination, Pill, Radio, Radio Group, Select, Stepper, Tab Container, Tag, and Textarea. These tests now cover all states that affect accessibility, ensuring that screen readers, keyboard navigation, and other assistive technologies work reliably across the design system.
Tecton widgets rendered on the Account Details page in UUX now receive the accountId as starting context. This means extensions built with the Tecton SDK can access the account identifier directly through the platform context, removing the need for workarounds when building account-specific functionality.
The Releases page on the Tecton documentation site has been cleaned up. The version prefix inconsistency in the "Start Version" select field has been resolved, and the most recent release is now clearly labeled (e.g., "1.65.0 (current)"). A note has also been added clarifying that release changes apply to all installable Tecton packages, including SDK, Platform, and Design System.
The Currency component documentation has been corrected to properly display the period symbol when no size property is provided.
Documentation for the Section Container component has been added to the Tecton docs site.