Changelog

Unreleased

6.3.2 (2026-07-30)

• 🐛 [reset] restore the legacy Bootstrap responsive grid tiers (.col-sm-* … .col-xl-*) inside .tng-legacy-apply. 6.3.1 re-applied only the base .col-1….col-12; because @layer order is resolved before specificity and media queries, that base .col-12 { max-width: 100% } (in the apply-legacy layer) outranked the clientlib’s @media … { .col-lg-3 { max-width: 25% } } and collapsed every responsive column to full width — a legacy dealer/map grid stacked instead of sitting side by side. apply.css now re-declares the .col-{sm,md,lg,xl}-* widths in that same layer so they override the base at each breakpoint

6.3.1 (2026-07-30)

• 🐛 [reset] restore the legacy Bootstrap .col-1….col-12 grid inside .tng-legacy-apply. The container/grid reset started reverting those classes (so they can’t leak onto our col-* span utilities), but the symmetric re-apply was never added — a legacy component using the col-* grid collapsed to unstyled columns when wrapped in .tng-legacy-apply. apply.css now re-declares the clientlib grid values so nested legacy components keep their original layout

6.3.0 (2026-07-29)

• ✨ [media-button] apply the Lexus copper gradient to the progress arc and the hover / active ring. The resting button keeps its flat grey ring; on Lexus the swept progress arc and the ring on hover / active both paint copper, reusing the shared --tng-color-border-gradient-* tokens the rectangular gradient borders draw from, so arc and ring resolve one colour and share one outer edge (hover recolours the ring without thickening it). The circular ring is a linear-gradient masked into an annulus — no background-clip: border-area — so it renders in every browser; contrast uses the copper-200 → copper-500 stops. Also fixes the recipe’s play / pause toggle so .tng-icon honours [hidden]
• 🗂️ [icon] move ai-sparkle from the operations category to technology

6.2.0 (2026-07-17)

• ✨ [segmented-control] add a pure-CSS, zero-JS segmented control — a single-select group built on a native <fieldset> + same-name <input type="radio"> segments, so grouping, single-select, roving arrow-key navigation and the accessible name come from the platform (no ARIA, no JS). The selected / hover / disabled / focus looks key off :has(input:*); ships .is-sm / .is-md / .is-lg sizes, an icon-only .is-icon variant, neutral / .is-contrast schemes, and equal-width 2–5 segments. Quarantine

6.1.0 (2026-07-16)

• ✨ [gradient] add brand-aware gradient strokes & fills — paint a brand’s stroke or fill as a colour gradient instead of a flat swatch, animated rested→hover. Lexus copper auto-applies to secondary / tertiary borders, the selected EV tab, and the slider EV track; the .tng-gradient-border hook and .border-secondary / .border-secondary-emphasis / .border-ev utilities opt any element in; brands with no bespoke stops get a gradient derived from their secondary accent
• 🐛 [field] stop the button-control label floating to the top under load
• 🐛 [typography] .tng-text-body (and siblings) no longer set a background — the token was never set, so it resolved to transparent and clobbered the .tng-scheme background
• 🔥 [icon] remove the duplicate Lexus ai-sparkle icon (kept elsewhere in the set)
• ⬆️ update figma tokens (14.0.0)
• 📦 [package] figma-tokens is build-time inlined into the CSS and moved to devDependencies, so the published styleguide is self-contained and no longer pulls @tmedxp/figma-tokens into consumers’ dependency trees

6.0.0 (2026-07-10)

• ✨ [container] add .tng-container-v2 — an opt-in full-width page frame with responsive side margins (20/40/56/80/96px at base/sm/md/lg/xl), no max-width, and the .tng-container-fullbleed helper to reach the viewport edge. Pair it with the separate .tng-grid primitive for a full-width, 12-column page layout; the default .tng-container stays the centred/capped wrapper
• 💥 [responsiveness] realign breakpoints to the shared grid tiers — sm 576→390, lg 992→1024, xl 1200→1440, 2xl 1600→1920 (md unchanged); the 3xl breakpoint and its .hidden-3xl* display utilities are dropped
• ✨ [tabs] add a tab picker semantic — wrap a native <input type="radio"> in a .tng-tabs-item <label> and the tab strip becomes a single-select radio group; the selected / disabled / focus looks key off :has(input:*) and the radio is visually hidden but stays focusable, so it needs no JS and no ARIA. The existing tab panel is unchanged
• ✨ [grid] add .tng-grid — a fresh, self-contained 12-column grid for laying columns out inside components/cards; children place with the col-* span utilities. The is-2-up / is-3-up modifiers make it responsive (stack on mobile, snap to N-up from md/lg), and an explicit col-* on a child opts it out as a full-width feature cell. Supersedes the legacy .tng-simple-grid
• ✨ [grid] add col-* column-span utilities — numeric col-1–col-12 plus named fractions (col-half, col-1-third, col-2-third, col-1-fourth, col-3-fourth) for placing children on a .tng-grid; siblings auto-flow, so spans that sum to 12 tile a row with no explicit positioning
• ✨ [container] expose --tng-container-inline-size on the .tng-container-v2 frame (the content width — viewport minus margins) for descendants that need to fit the page content area, with a var(…, fallback) for when they’re used standalone
• 🐛 [field] fix Chrome autofill — the input now fits the control’s border box so the autofill background no longer bleeds past the border
• ♻️ [responsiveness] remove the unused --tng-viewport-size-* custom properties

Container

.tng-container is unchanged — the default centred, max-width-capped wrapper (1140px / 1440px). Alongside it, .tng-container-v2 is a new opt-in full-width page frame: a full-browser-width block whose only job is the responsive side margin — 20 / 40 / 56 / 80 / 96px at base / sm / md / lg / xl — that keeps content off the viewport edges. It has no max-width and draws no columns; the 12-column rhythm lives in the separate .tng-grid primitive you nest inside.

Adopt the full-width grid by opting into .tng-container-v2 and nesting a .tng-grid, placing children with col-* spans:

<div class="tng-container-v2">
  <div class="tng-grid">
    <div class="col-8">main</div>
    <div class="col-4">aside</div>
  </div>
</div>

Edge-to-edge content inside the frame uses the standalone .tng-container-fullbleed helper (it composes onto a child at any depth). The default .tng-container keeps its .is-fullbleed child modifier for the same intent.

Breakpoints & display utilities

The breakpoint values were realigned to design’s shared grid tiers (ADR 0003). The two-letter token vocabulary (sm / md / lg / xl / 2xl) is unchanged — only the widths move — so any consumer reading a --tng-breakpoint-* token or a --tng-media-gte-* custom-media picks up the new trigger points automatically, and the display utilities (.hidden-sm, .hidden-lg, …) now switch at the new widths:

Tier	Old	New
xs	375px	– (default)
sm	576px	390px
md	768px	768px (unchanged)
lg	992px	1024px
xl	1200px	1440px
2xl	1600px	1920px

There are no classes to rename, but audit any layout that depends on a specific switch point — a .hidden-lg block now hides from 1024px instead of 992px, and sm-gated styles now begin at 390px instead of 576px.

The 3xl band is gone

2xl (1920px) is now the topmost band. The 3xl breakpoint — its --tng-breakpoint-3xl token, the --tng-media-gte-3xl custom-media, and the .hidden-3xl, .hidden-3xl-only and .hidden-no-3xl display utilities — is removed with no replacement. Because there is no wider band for it to reappear in, .hidden-2xl-only now behaves identically to .hidden-2xl; prefer the latter:

<div class="hidden-2xl-only">…</div>
<div class="hidden-2xl">…</div>

The spacing scale’s 3xl step (.gap-3xl, .pb-3xl, …) is a separate scale and is untouched.

5.8.0 (2026-07-29)

• ✨ [media-button] apply the Lexus copper gradient to the progress arc and the hover / active ring. The resting button keeps its flat grey ring; on Lexus the swept progress arc and the ring on hover / active both paint copper, reusing the shared --tng-color-border-gradient-* tokens the rectangular gradient borders draw from, so arc and ring resolve one colour and share one outer edge (hover recolours the ring without thickening it). The circular ring is a linear-gradient masked into an annulus — no background-clip: border-area — so it renders in every browser; contrast uses the copper-200 → copper-500 stops. Also fixes the recipe’s play / pause toggle so .tng-icon honours [hidden]
• 🗂️ [icon] move ai-sparkle from the operations category to technology

5.7.0 (2026-07-17)

• ✨ [segmented-control] add a pure-CSS, zero-JS segmented control — a single-select group built on a native <fieldset> + same-name <input type="radio"> segments, so grouping, single-select, roving arrow-key navigation and the accessible name come from the platform (no ARIA, no JS). The selected / hover / disabled / focus looks key off :has(input:*); ships .is-sm / .is-md / .is-lg sizes, an icon-only .is-icon variant, neutral / .is-contrast schemes, and equal-width 2–5 segments. Quarantine

5.6.1 (2026-07-16)

• 🔥 [icon] remove the duplicate Lexus ai-sparkle icon (kept elsewhere in the set)
• ⬆️ update figma tokens (14.0.0)

5.6.0 (2026-07-15)

• ✨ [tabs] add a tab picker semantic — wrap a native <input type="radio"> in a .tng-tabs-item <label> and the tab strip becomes a single-select radio group; the selected / disabled / focus looks key off :has(input:*) and the radio is visually hidden but stays focusable, so it needs no JS and no ARIA. The existing tab panel is unchanged
• ✨ [gradient] add brand-aware gradient strokes & fills — paint a brand’s stroke or fill as a colour gradient instead of a flat swatch, animated rested→hover. Lexus copper auto-applies to secondary / tertiary borders, the selected EV tab, and the slider EV track; the .tng-gradient-border hook and .border-secondary / .border-secondary-emphasis / .border-ev utilities opt any element in; brands with no bespoke stops get a gradient derived from their secondary accent
• 🐛 [field] stop the button-control label floating to the top under load
• 🐛 [field] fix autofill
• 🐛 [typography] .tng-text-body (and siblings) no longer set a background — the token was never set, so it resolved to transparent and clobbered the .tng-scheme background
• 📦 [package] figma-tokens is build-time inlined into the CSS and moved to devDependencies, so the published styleguide is self-contained and no longer pulls @tmedxp/figma-tokens into consumers’ dependency trees

5.5.1 (2026-07-03)

• 🩹 [reset] target app-root children instead of the root element
• 🩹 [legacy] fix heading selector

5.5.0 (2026-07-01)

• ♻️ [package] inline component tokens — per-component entries move to {brand}/components/* (also forms, cards) with the brand’s tokens baked in; the brand-neutral components/*, forms/*, cards/* entries and dependencies.json are removed
• ♻️ [field] merge control + field into one component
• ♻️ [field] name the component field; control classes are now tng-field-control* (old tng-control* kept as compat aliases)
• ⬆️ update figma tokens

5.4.0 (2026-06-25)

• ✨ [package] add chunked exports
• ✨ [chat-messages] add component
• ✨ [chip] add suggestion variant
• 💄 [chip] use active tokens
• 🐛 [alert] fix header typography
• 🐛 [carousel] fix control typography
• ⬆️ update figma tokens

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-ghost" 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