Changelog

Unreleased

5.3.0 (2026-06-23)

• ✨ [label] add component
• ✨ [model-card] add component
• ✨ [varia] add .tng-no-touch-target
• ♻️ [list] use label component
• 💄 [date-picker] remove selected hover button token
• ⬆️ update figma tokens

List

The powertrain subtitle marker now uses the new Label component (.tng-label.is-blue) instead of a bare <em>. The .tng-list-powertrain styles are unchanged, so existing markup keeps working — but new code should reach for the Label component.

<em>
  <i class="tng-icon icon-plug-droplet"></i>
  <span>Powertrain</span>
</em>
<span class="tng-label is-blue">
  <i class="tng-icon icon-plug-droplet" aria-hidden="true"></i>
  <span>Powertrain</span>
</span>

5.2.2 (2026-06-18)

• 💄 [control] use input tokens
• 💄 [field] use input tokens

5.2.1 (2026-06-17)

• 🐛 [popover] fix contrast background
• 💄 [accordion] improve group spacings
• ⬆️ update figma tokens

5.2.0 (2026-06-17)

• ✨ [skeleton] add component
• 💄 [accordion] improve group spacings
• 🐛 [count-indicator] fix RTL icons
• 🐛 add font-family sans-serif fallback

5.1.0 (2026-06-08)

• ✨ [frame] support iframe and picture
• ✨ [divider] add edge start/end variants
• 🐛 [content] set default foreground
• 🐛 [popover] fix arrow gap
• 🐛 fix flex column children’s inline sizing
• ⬆️ update figma tokens

5.0.0 (2026-05-27)

• 💥 ✨ [count-indicator] rework component
• 🐛 [popover] simplify contrast surface
• ⬆️ update figma tokens

Count indicator

The dots pagination has been removed. The component is now an inline flex wrapper around an optional label pill (.tng-count-indicator-label) and any combination of .tng-icon-button siblings. The internal layout sub-elements — .tng-count-indicator-helper, .tng-count-indicator-dots, .tng-count-indicator-buttons — are gone; mark up the label and icon buttons as direct children of .tng-count-indicator.

<div class="tng-count-indicator">
  <div class="tng-count-indicator-helper">1 of 6</div>
  <div class="tng-count-indicator-dots">
    <div class="is-current"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="tng-count-indicator-buttons">
    <button class="tng-icon-button is-sm" aria-label="Previous">
      <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
    </button>
    <button class="tng-icon-button is-sm" aria-label="Next">
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </button>
  </div>
  <span class="tng-count-indicator-label">1 of 6</span>
  <button class="tng-icon-button is-sm" aria-label="Previous">
    <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
  </button>
  <button class="tng-icon-button is-sm" aria-label="Next">
    <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
  </button>
</div>

The label may sit at the start, in the middle, or at the end of the wrapper; spacing adapts to its position. Its block size tracks the sibling .tng-icon-button size (.is-xs, .is-sm, .is-md, .is-lg), so the label and buttons stay aligned without manual sizing.

4.0.2 (2026-05-22)

• 🐛 [tabs] overflow, focus ring, multiline labels
• 🐛 [display] fix 2/3 xl utilities

4.0.1 (2026-05-19)

• 🐛 [button] fix primary border

4.0.0 (2026-05-19)

• 💥 ⬆️ update figma tokens
• 💥 🚚 [social-media-button] rename from social-share-button
• ✨ [icon-button] add xs size
• ✨ [chip] add on-image variant
• ✨ [border] add soft, primary-emphasis and secondary-emphasis utilities
• ♻️ [stepper] use new tokens

Social media button

The component class has been renamed to align with the Figma component name.

<button class="tng-social-button tng-social-media-button">
  <span class="tng-icon icon-facebook"></span>
</button>

.tng-social-button is kept as a backwards-compatible alias of .tng-social-media-button.

Tokens

The Figma tokens upgrade renames several token custom properties. Consumers that reference styleguide classes are unaffected; if you read tokens directly:

• Variant / scheme order swapped on icon-button tokens: --tng-buttons-icon-button-{variant}-{scheme}-* becomes --tng-buttons-icon-button-{scheme}-{variant}-* (e.g. --tng-buttons-icon-button-filled-neutral-rested-fill-color → --tng-buttons-icon-button-neutral-filled-rested-fill-color).
• disabled-background-color is now disabled-fill-color on chips and on the secondary main button’s contrast scheme.

3.2.0 (2026-05-11)

• ✨ [asset-download] implement
• ✨ [split-content] implement
• ✨ [alternate-content] implement module
• ✨ [divider] add has-edge modifier
• 🐛 [media-button] fix icon sizes
• 🐛 [chip] remove textbox trim

3.1.0 (2026-05-07)

• [popover] fix chrome
• ✨ [media-button] implement
• 🐛 [content] improve
• ⬆️ update figma tokens

3.0.0 (2026-05-04)

• 🐛 remove root container
• 🐛 [content] fix some typography
• 💥 ✨ [divider] remove ev / sizes
• 🐛 [list] fix plain list typography
• ✨ [assets] add assets
• ✨ restructure pages

Divider

EV removed

The EV styles have been removed.

<div class="tng-divider is-ev"></div>

Contrast

The primary color no longer switches to contrast mode.

<div class="tng-divider is-primary"></div>

Default

Contrast

Sizes

Intrinsic sizing has been removed. You have to add your own sizing declaration if you need any size other than 100%.

<header class="tng-stack">
  <h2 class="mbe-4xl | tng-text-title is-5">Title Heading</h2>
  <div class="tng-divider is-primary" style="inline-size: 40px"></div>
</header>

Title Heading

2.3.0 (2026-04-22)

• 📝 [size] update stretch to 100%
• 📝 [carousel] update documentation
• 📝 update drafts
• 🔥 clean up badges < 2 months
• ✨ [chip] implement
• 🐛 [carousel] fix prefers-reduced-motion
• 🔥 [carousel] remove recipe custom types
• 🔥 [overflow] remove unneeded property

2.2.4 (2026-04-12)

• 🐛 [toggle] input shrink 0
• 🐛 [stepper] fix label
• 🐛 [checkbox] input shrink 0
• 🐛 [radio] input shrink 0
• 🐛 [size] fix size-full on firefox/webkit
• ⬆️ update figma tokens

2.2.3 (2026-04-10)

• 🐛 [size] fix size-full on firefox/webkit
• 📝 update DX playbook domains
• ✨ [carousel] implement
• ⚡️ [cds] contain layout paint

2.2.2 (2026-04-08)

• 🐛 [link] fix inline link
• ✨ [stepper] improve label
• ✨ [overflow] support scheme

2.2.1 (2026-04-07)

• 📱 [stepper] improve mobile / tablet
• 📝 [icon] fix non-monochrome icon examples
• 📝 [z-index] improve example
• 🐛 [background] fix decorative backgrounds
• ✨ [overflow] hide scroll bars within indicators
• 🐛 [control] fix control button focus outline

2.2.0 (2026-03-26)

• 💄 [modal] fix maximum on small viewport
• ✨ [date-picker] implement

2.1.0 (2026-03-25)

• ✨ [stepper] implement
• ✨ update figma tokens
• 💄 [tabs] add number label example
• ✨ [overflow] improve indicators
• 🐛 [cds] fix inset demo
• 📝 [count-indicator] review documentation

2.0.0 (2026-03-17)

• 🐛 [modal] fix chrome close render flash
• 💄 [control] review
• ✨ [z-index] add above
• ♻️ [focus] review
• 🔥 [control] remove is-valid variant
• ✨ [radio] implement
• ✨ [checkbox] implement
• ✨ [simple-card] implement
• 🚚 align forms with figma
• 💥 🚚 restructure exports

Exports

The exports have a breaking change in this release.

Export	Before	After
assets.css	none	Export assets
styles.css	Export styles + assets	Export styles
no-icons.css	Export styles	none

Meaning we now have mutually exclusive exports for styles and assets.

1.3.0 (2026-03-05)

• 📝 [usage] improve layers documentation
• 🚚 rename tng-box to tng-scheme
• ♻️ remove tng-box reliance
• 📝 clean up documentation
• ♻️ [color-utilities] refactor out custom properties
• ✨ [layouts] add flex nowrap
• ♻️ [position] refactor out custom properties
• ♻️ [layouts] refactor out custom properties
• 📝 [modal] remove unused background color
• 🩹 [position] don’t assume size
• ♻️ [spacing] refactor out custom properties
• ♻️ [elevation] refactor out custom property
• 💄 [cds] fix selector

1.2.0 (2026-03-04)

• ✨ [platform-badge] add platform badges
• ♻️ [figma] render dedicated text styles variables
• 📝 [figma] fix content
• 🐛 [figma] render box border size
• 🐛 [cds] render dimension fallback
• 💄 [figma] tweak components
• 📝 [figma] review documentation
• 📝 [buttons] align cross-topic button structure
• 👷 [gh] non-prod always builds preview mode
• 🐛 [apply] re-apply revert

1.1.1 (2026-02-25)

• 📝 [figma] add radio button documentation
• 📝 [figma] add input field documentation
• 📝 [figma] add sticky bottom bar documentation
• 📝 [figma] group forms documentation
• 📝 [figma] add checkbox documentation
• 📝 [figma] add stepper documentation
• 📝 [figma] add tag documentation
• 📝 [figma] add popover documentation
• 📝 [figma] add tabs documentation
• 📝 [figma] add modal documentation
• 📝 [figma] add list documentation
• 📝 [figma] add slider documentation
• 📝 [figma] add dropdown documentation
• 📝 [figma] add count indicator documentation
• 📝 [figma] add divider documentation
• 📝 [figma] add link documentation
• 📝 [figma] add social media button documentation
• 📝 [figma] add pill button documentation
• 📝 [figma] add icon button documentation
• 📝 [figma] add main button documentation
• 📝 [figma] add backdrop documentation
• 📝 [cds] add agent figma component mapping documentation
• 📝 [figma] review accordion documentation
• 📝 [link] document sizes
• 📝 [figma] review typography documentation
• 📝 [figma] review color documentation
• 🐛 [revert] set initial for inherited properties

1.1.0 (2026-02-25)

• 📱 [cds] responsive hero
• 💄 [cds] update brand select to buttons
• 🚚 [cds] tweak titles
• 📝 [reset] document .tng-legacy-apply
• 📝 [cds] expand utility documentation
• ✨ [z-index] add semantic stacking
• ✨ [slider] implement slider
• 💄 [cds] fix markdown li max-inline-size

1.0.1 (2026-02-24)

• 🩹 [cds] disable RTL / dark mode for now
• 💄 [cds] redesign splash hero
• 🔥 [cds] remove GitHub links
• 🧪 [count-indicator] add visual tests
• 💄 [sticky-bottom-bar] fix documentation demo
• 💄 [cds] increase content width
• 🚚 [cds] pluralize foundations
• 💄 [cds] tweak components
• 💄 [cds] use own tokens
• 🐛 [cds] hide related pages on splash page
• ✨ [cds] switch logos with theme select
• 🚚 [cds] don’t structure content around teams
• 🔥 [cds] remove archive

1.0.0 (2026-02-20)

• ♿️ prefer aria-label over sr-only
• ♿️ improve recipe a11y
• ✨ [checkbox] add fieldset / reset
• 📝 expand a11y documentation
• 📝 [sticky-bottom-bar] add module and recipe
• ✨ [count-indicator] update implementation
• ✨ add aemglobal CSS layer
• 🚚 [count-indicator] rename pagination to count indicator

0.31.0 (2026-02-18)

• 💥 ♻️ [list] deprecate internal dividers
• 📝 [usage] add CSS layers caveats
• 📝 [varia] add focus documentation
• 📝 align color utilities
• 💫 document and implement consistent animations
• 🩹 [reset] improve border box
• 💥 ♻️ [accordion] use divider component
• 🐛 [tabs] fix overflow gradient
• 💥 ♻️ [box] refactor surface into box and utlities
• 🔥 [stroke] deprecate
• 🐛 [list] fix padding on interactive control
• ✨ introduce related pages

Surface ➡️ Box

We used to have a Surface foundations core component that could handle some things like backgrounds and borders. Now we have implemented color utilities for background, border, and foreground.

These utilities include all semantic tokens for backgrounds, surfaces, and fills. Consequently the component needed to be renamed.

Accordion / List Dividers

The Accordion and List components no longer have their own with dividers variant. All divider responsibility is now handled by the Divider component.

<div class="tng-stack | tng-has-dividers">
  <details class="tng-accordion has-divider">
    <summary class="tng-accordion-trigger">
      <span>Personal information</span>
      <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
    </summary>
    <p class="tng-text-body">
      Your personal information is kept private and secure.
    </p>
  </details>
</div>

Deprecate .stroke-…

The stroke classes have been removed from the documentation a long time ago but have remained in the styles.

Use (eg.) .border-xs in favour of stroke-xs.

0.30.0 (2026-02-10)

• ✨ [dropdown] implement control
• ✨ [field/control] implement
• ♻️ [text-box] remove default display
• 🐛 [modal] fix at maximum sizing
• ✨ [icons] add ISO

List Option

It used to be list options still require a lot of manual styles to position its contents. The List Option now can handle leading/trailing icons and interactive content.

<li class="tng-list-option">
  <a href="#">
    <i aria-hidden="true" class="tng-icon icon-car is-md"></i>
    <span>Option</span>
    <i
      aria-hidden="true"
      class="tng-icon icon-chevron-right tng-rtl-flip-x"
    ></i>
  </a>
  <i aria-hidden="true" class="tng-icon icon-chevron-right tng-rtl-flip-x"></i>
</li>

If you want your whole list option to be interface (a / button) make sure to have all icons inside of the element. The list option will delegate its layout rendering to its interactive child.

<li class="tng-list-option">
  <a href="#">
    <i aria-hidden="true" class="tng-icon icon-car is-md"></i>
    <span>Option</span>
    <i
      aria-hidden="true"
      class="tng-icon icon-chevron-right tng-rtl-flip-x"
    ></i>
  </a>
  <i aria-hidden="true" class="tng-icon icon-chevron-right tng-rtl-flip-x"></i>
</li>

0.29.2 (2026-02-13)

• 🚚 [icons] move ai-search to brandless

0.29.1 (2026-02-11)

• 🐛 [modal] fix at maximum sizing

0.29.0 (2026-02-04)

• 📱 [modal] improve small viewports
• 📝 [modal] document overflow
• ✨ [list] add select list with links
• 📝 [figma] add accordion component documentation
• 📝 [figma] add foundations typography documentation
• 📝 [figma] add foundations 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" aria-label="Close">
    <i class="tng-icon icon-close" aria-hidden="true"></i>
  </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 media 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