Tecton 1.70.0

New Components

• Surface Customizable Container Primitive — A versatile container component with support for multiple background colors, border styles, elevation levels, corner radius options, and interactive hover states. Extensive CSS variable customization enables flexible theming across aesthetics. Think of this as the successor to q2-card with a more modern, flexible API for building custom layouts and surfaces.

Component Features, and Improvements

• Stepper Custom Label and Description Slots — q2-stepper, q2-stepper-vertical, and q2-stepper-pane now support label and description slots, allowing custom HTML markup for step content while maintaining fallback to text attributes.
• Input, Calendar, Select Validation Success State — A new valid state property displays green success feedback on inputs, date pickers, and selection fields, completing the validation feedback loop alongside error states.
• Search Rich Content in Selected Slot — The search component in multiline mode now supports custom rich content in the selected slot, enabling complex nested layouts (e.g., q2-item with q2-detail) to display selected options with full styling control.
• Loc HTML Rendering in Localization — A new ignoreTag prop allows HTML tags in localized strings to be rendered as rich content rather than escaped as plain text. Sanitization prevents security issues while enabling formatted localization strings.

Accessibility and Styling Refinements

• Card Image Prop Rename — The accessibilityLabel prop has been renamed to tctAriaLabel to align with Tecton's standardized naming convention for aria attributes.
• Button Icon-Only Accessibility Documentation — Documentation now clarifies that icon-only buttons must include both label and hide-label attributes for proper screen reader support.
• Select, Pill Modernized Documentation — Updated documentation emphasizes the modern elevation attribute over custom CSS variable overrides, improving consistency with the Default2026 aesthetic template.
• Component Text Color Inheritance — Text colors across many components now inherit from parent elements by default, enabling better design flexibility and reducing color conflicts across background contexts.
• Pagination, Dropdown Accessibility Descriptions — Improved item count calculation to include all selectable items (both q2-option and q2-dropdown-item children), ensuring accessibility descriptions accurately reflect available options.
• Input, Select Multiline Display Padding — Refined custom display padding for multiline select components, improving spacing and visual consistency.

Component Fixes

• Search Focus Delegation — Programmatic focus now properly delegates to the inner input field, ensuring consistent keyboard navigation behavior in all focus scenarios.
• Data Table, Checkbox Selection State Synchronization — Fixed checked property to update synchronously before change events fire, and improved checkbox reversion when selection changes are cancelled.
• Select Multiselect Search Focus — Fixed focus management in searchable multiselect mode to maintain input focus and properly restore display when dismissing without selection.
• Item, Context Action Button Sizing — Fixed non-intent icon button sizing in item action slots to prevent oversized buttons and ensure consistent visual presentation across action types.
• Pagination Mobile Flickering — Fixed flickering behavior in mobile viewport by improving width baseline calculations during component size transitions.
• Editable Field Cancel After Failed Save — Fixed cancel behavior to properly reset the baseline value when a save is rejected, ensuring correct value restoration on subsequent edits.
• Theme Validation — Resolved theme validation test failures and corrected duplicate CSS custom property documentation in q2-item and q2-otp.