Changelog

Note

There will still be breaking changes regularly before we reach v1.0. Note however even though some things get renamed we keep the previous classes (undocumented) around. This helps causing minimul disruption in upgrading.

0.29.0 (2026-02-04)

• 📱 [modal] improve small viewports
• 📝 [modal] document overflow
• ✨ [list] add select list with links
• 📝 [figma] add accordeon component documentation
• 📝 [figma] add foundation typography documentation
• 📝 [figma] add foundation color documentation
• ✨ add token descriptions

0.28.1 (2026-02-02)

• 🩹 [button] rename pill active state to selected
• ⬆️ bump figma tokens

0.28.0 (2026-01-30)

• ✨ [popover] add backdrop

0.27.2 (2026-01-29)

• 💄 [modal] default only default slots to checkered
• 💄 [modal] target only modal root frame

0.27.1 (2026-01-29)

• 💄 [popover] fix close button RTL

0.27.0 (2026-01-28)

• ✨ [button] finish pill button
• 💄 [button] fix icon button border color states
• ✨ [icons] add UI pause / spinner

0.26.5 (2026-01-27)

• 💄 [button] remove main tertiary inline padding

0.26.4 (2026-01-27)

• 🩹 [root] apply automatically to Storybook
• 🐛 [modal] fixed maximized modal

0.26.3 (2026-01-26)

• 🐛 [table] fix color

0.26.2 (2026-01-26)

• 🐛 [table] fix inline size
• 📝 [teams] update teams
• 💄 [teams] spruce up page

0.26.1 (2026-01-22)

• 🐛 [modal] remove aria-modal true(scroll lock)

0.26.0 (2026-01-16)

• 🐛 [modal] fix touch target interop
• 📝 [RTL] document flip X utility
• 🐛 [modal] fix and automate scroll lock
• 🐛 [modal] fix backdrop
• ✨ [varia] add focus-within utility
• 🐛 [toggle] fix RTL
• ✨ [varia] add touch target
• 📝 update glossary

0.25.1 (2026-01-15)

• 👷 [icons] fix ICONS type array literal
• 🐛 [icons] fix categories
• 👷 [icons] expose categories
• 📝 [icons] document import path change
• 💫 [modal] fix close transition

0.25.0 (2026-01-14)

• 🐛 [accordion] fix webkit render
• 🩹 [icons] optimize
• 👷 [icons] provide build without inlined icons
• 🚚 group form components

0.24.0 (2026-01-14)

• ✨ [overflow] add chevrons
• ✨ [tabs] finish implementation
• ✨ [overflow] add scroll indicators

0.23.0 (2026-01-13)

• 💄 [table] fix overflow breaking
• 💄 [table] fix font size
• 💄 [table] fix header alignment
• 📝 demo Georgian unicode range
• 🐛 [icon] fix operations view on / off
• 🚚 [icons] move to shared
• 🐛 [icons] fix rating star color
• 🔥 [slot] make default variant implicit
• 💥 [popover] remove header element
• 💥 ⬆️ bump figma tokens
• 🐛 [modal] fix scroll to top
• 🐛 [modal] fix Safari
• 📝 [popover] document different parts
• 🐛 [popover] move shadow to outer element
• 🧪 [popover] add title

Icons

The import paths for icons have changed.

import { ICONS, type Icon } from '@tmedxp/styleguide/toyota/icons';
import { ICONS, type Icon } from '@tmedxp/styleguide/toyota';

Or you can get the full namespace from either the root or the brand entry point.

import { Toyota } from '@tmedxp/styleguide';
import * as Toyota from '@tmedxp/styleguide/toyota';
let Toyota.ICONS: Toyota.Icon[];

Popover

The header element is not necessary anymore. The title can exists on its own and should be placed after the close icon, if present.

<div class="tng-popover-bubble">
  <div class="tng-popover-header">
    <div class="tng-text-title">${lorem0}</div>
  </div>
  <button class="tng-icon-button is-neutral">
    <i class="tng-icon icon-close" aria-hidden="true"></i>
    <span class="sr-only">Close</span>
  </button>
  <div class="tng-text-title">${lorem0}</div>
  <p class="tng-text-body">${lorem2}</p>
</div>

0.22.0 (2025-12-15)

• ✨ update divider implementation
• 🚚 [utilities] rename visibility to display
• 🐛 [typography] fix selection psuedo element

0.21.0 (2025-12-10)

• 💄 [typography] update heading inferred sizes
• 🐛 [icons] fix branded icons
• ✨ add tabs component
• 🧪 [visual test] add dir support
• 🐛 [rtl] fix issues
• ✨ add RTL toggle
• 💥 🚚 rename with-* to has-*
• 📝 [text box] document

Breaking

• List component modifier renamed with-divider to has-divider.

0.20.0 (2025-12-08)

• ✨ add accordion component
• ✨ update reset / root rendering
• 🐛 [content] fix heading typography
• ✨ implement energy labels
• 💄 implement text box
• 💥 🚚 [core] rename LexusType back to Nobel
• ♻️ replace content hr with divider
• 💥 ✨ rework typography

Breaking

Typography

• Typography has converged all its classes under tng-text-body and tng-text-title and switched to an ordinal scale.
• Lexus font family has been renamed from “Lexus Type” back to “Nobel”. Make sure to update your @font-face directives.

0.19.0 (2025-12-03)

• ✨ add table component
• 💥 🚚 rename lists

0.18.0 (2025-12-03)

• ✨ implement modal
• 📝 fix maximum positioning demo
• 💥 ♻️ rebrand placeholder as slot
• ✨ add select list
• 📝 add checkbox list recipe
• 🐛 fix col/row gap usage
• ♻️ rework focus reusage
• 💥 render tokens reference per brand
• 💥 update typography
• 🎨 fix icons format
• 👷 auto deploy releases to prev
• 🐛 [icon] rotate toyota trade-cycle-management
• 🐛 fix icons reference UI and copy
• ✨ add CloseWatcher to tooltip recipe
• 💄 add visual link button tests
• ✨ setup visual regression testing

Breaking

• Figma tokens update (^6 && ^7) has some small structural changes.
• tng-placeholder has been renamed to tng-slot.

0.17.0 (2025-11-24)

• ✨ add explicit default classes
• 💥 ♻️ prefix internal components
• 🐛 [button] fix lexus borders
• 💥 ✨ [popover] add border
• 🐛 [popover] fix contrast styles
• 🐛 [popover] fix typography
• 🐛 [link] remove default padding

Breaking

Popover

The HTML structure for popover has been updated.

Before

<div class="tng-popover">
  <div class="arrow"></div>
  <div class="header">
    <!--  -->
  </div>
  <p class="tng-text-body">
    <!--  -->
  </p>
</div>

After

<div class="tng-popover">
  <div class="tng-popover-arrow"></div>
  <div class="tng-popover-header">
    <!--  -->
  </div>
  <div class="tng-popover-bubble">
    <p class="tng-text-body">
      <!--  -->
    </p>
  </div>
</div>

0.16.0 (2025-11-20)

• 📝 document primitive tokens
• ✨ finish icon button
• 💥 ✨ finish link / link button
• 📝 [button] expand overflow documentation
• ✨ finish social button
• 🚚 merge recipes into components
• ✨ [button] add overflow constraints

Breaking

Link

tng-text-link has been renamed to tng-link.

0.15.0 (2025-11-19)

• 🚚 rename modules to recipes
• 🐛 [content] fix blockquote contrast scheme
• ✨ implement popover
• ♻️ move schemes to mixin
• 📝 add teams structure
• 🩹 [alert] simplify demo
• 🧑‍💻 [surface] add release note

0.14.1 (2025-11-17)

• ✨ [button] add tertiary ghost
• 🔥 [button] remove unused token
• 🐛 [button] fix gap

0.14.0 (2025-11-14)

• 🧑‍💻 add token values to reference
• 💥 🧑‍💻 merge border utilities
• ♻️ update tokens reference
• 🚚 move changelog into reference guide
• 💥 ♻️ merge box and scheme into surface
• 💥 ✨ add margin utilities

Breaking

Border

stroke-<size> has been renamed to border-<size>.

Surface

tng-box and tng-scheme have been merged into tng-surface.

• There’s no default padding anymore, add p-md to add the old default.
• There’s no default text styling mixin anymore. Add tng-text-body or which-ever typography class you want to the element or any of its children.

Margin

We have added margin utilities analog to the existing padding utilities.

• Margin can be applied to the Wrapper layout component.
• Padding can be applied to the Surface (previously Box) core component.
• The is-centered variant is removed from the Wrapper layout component. You can use the margin utility mi-auto now.

0.13.0 (2025-11-13)

Caution

In this release we have migrated to the reworked token structure. While the styleguide classes have remained largely unchanged make sure to check your token usage.

• 📝 split AEM / React documentation
• ✨ rework tokens

Breaking

Renamed tokens

• All primitive font tokens (--tng-font-*) have been heavily restructured.
• All semantic color tokens (--tng-(border|foreground|surface)-*) have been heavily restructured.
• All component tokens (--tng-(buttons)-*) have been heavily restructured.
• is-danger is renamed to is-error to match the terminology of the tokens.
• (is|on)-inverse is renamed to (is|on)-contrast to match the terminology of the tokens.

0.12.2 (2025-11-06)

• 📝 explicit icon scheme support
• 💄 improve list styles
• 🚸 enhance animations on no preferred motion
• ♻️ tweak styleguide export

0.12.1 (2025-11-05)

• 🐛 fix icons export types

0.12.0 (2025-11-04)

• ✨ align font families, subfamiles and weights document icon differences

0.11.0 (2025-10-30)

• 📝 Updated and restructured documentation
• 🚚 Rename CSS layer tng.modules to tng.userstyles
• ✨ add list component
• ✨ Added icons from scratch from Figma