Changelog

Unreleased

7.11.2 (2026-10-28)

• 🐛 [link] .is-neutral links keep one colour on hover, press and visit — no markup change

7.11.1 (2026-10-26)

• 🐛 [reset] the reset reaches React fragments rendered directly under the AEM Headless root, such as a top-level <dialog> — no markup change

7.11.0 (2026-10-20)

• ✨ [playground] type CDS markup, watch it render, and share the URL — every HTML code sample opens there from beside its copy button
• 💄 [divider] .is-primary is a copper gradient on Lexus — no markup change
• ✨ [icons] ten Kinto-only icons, such as icon-business, icon-delivery and icon-wall-box, render on Kinto only
• 💄 [icons] Kinto draws its own version of 14 icons, following its Figma variants — no class changes
• ✨ [icons] new icon-bookmark-filled, icon-ui-arrow-up and icon-hybrid-electric-car-hev-sm, and icon-power-on renders on every brand
• 💄 [icons] icons that drifted from Figma are redrawn, so arrows, chevrons, socials and more change size or weight — no class changes
• 💄 the reset adds reseter.css defaults — borderless iframes, collapsed tables, dotted abbr[title] and sub/sup that keep line height
• 🐛 [hidden] always hides, images keep their aspect ratio, and smooth scrolling respects reduced motion
• ✨ [date & author] new .tng-date-author component, in quarantine — add .is-vertical to stack the date and author

7.10.0 (2026-10-16)

• 📝 [alternate content], [sticky bottom bar] leave quarantine — both are ready to use
• ⬆️ --tng-typography-title-<bp>-{1,2}-font-{family,weight} are renamed -{default,emphasis}-font-{family,weight} — update any direct reference
• ✨ [card] new .tng-card base card, in quarantine — compose cards from it with layouts and utilities, as its Modules show
• ✨ [varia] .text-start, .text-center and .text-end align text along the writing direction
• ✨ [breadcrumb] new .tng-breadcrumb component, in quarantine — add .is-collapsed to shorten a deep trail behind an ellipsis
• ✨ [icon button] .tng-labelled-icon-button puts a label beside an icon button — wrap both and point aria-labelledby at the label
• 💄 [icon button] filled icon buttons draw a 1px border in every state — visible on Lexus, with a copper gradient on hover; no markup change
• 💄 [typography] Lexus title 1 and 2 with .is-emphasis switch from the decorative face to Nobel
• 💄 [tabs], [tab picker] the selected underline is a copper gradient on Lexus for every selected item, not only EV — no markup change
• 💄 [chat messages] the bot sparkle takes its chat-message token — copper on Lexus — and neutral user text is a shade lighter
• 💄 [accent button] a disabled .is-bz4x accent button on a contrast surface takes its own fill on Lexus and Kinto — no markup change

7.9.0 (2026-10-07)

• ✨ [chip] a chip can trigger a dropdown — aria-expanded="true" matches .is-active and a trailing icon-chevron-down flips while open
• 🐛 [chip] .is-suggestion follows the contrast scheme — inside .is-contrast it takes the --tng-suggestion-contrast-* colours
• 💄 [simple card] corners take --tng-cards-corner-radius — square on Toyota, 8px on Lexus, 10px on Kinto
• 📝 move [simple card] into quarantine — its Figma component awaits design feedback, so its look may still change
• 🐛 [tabs] a selected tab keeps its look on hover — and Kinto’s selected label is teal as designed
• 🐛 [tabs] selected tabs in the contrast scheme drop the light fill — the underline alone marks the selection
• 💄 colour and opacity fades use a linear curve, as the Motions page prescribes
• 🐛 [tabs] the selected EV tab keeps its fill on Lexus — the gradient underline no longer wipes it
• 📝 move [pill button] into quarantine — Figma marks it deprecated, so expect a migration once GDI decide
• 🐛 [pill button] .on-overlay pills look the same inside .is-contrast
• 🐛 [radio] the selected dot takes its fill token instead of the border colour, so it looks slightly different
• 🐛 [link] visited links show their visited colour — darker on Toyota and Kinto
• 🐛 [toggle] a disabled toggle in the contrast scheme no longer looks rested
• 🐛 [pill button] .on-overlay.is-cta draws its 1px border again
• 🐛 [overflow] scroll-indicator fades point the right way in RTL
• ♻️ [toggle] the thumb no longer transitions background-color — a thumb colour you vary per state yourself now changes instantly
• 🐛 [media button] the progress ring no longer animates under reduced motion — it steps to each value instead
• ⬆️ the shipped CSS keeps native nesting — 70 KB smaller per bundle, and needs Chrome 120+, Safari 17.2+ or Firefox 117+

7.8.1 (2026-09-24)

• 🐛 [background] .fill-soft is no longer scheme-aware — it referenced a contrast token Figma never published, so it rendered transparent inside .is-contrast and now paints the neutral soft fill in every scheme
• 🐛 [tabs] the selected tab’s underline is back — its colour referenced a token Figma never published, so outside the EV variant the border resolved to none on every brand
• 🐛 [count indicator] the label now reads its own font-weight token instead of silently inheriting one, so the count renders lighter on Lexus and heavier on Kinto
• 📝 [spacing], [layout], [position] the spacing, gap and inset scale demos now print the value each size resolves to for the selected brand

7.8.0 (2026-09-23)

• 🐛 [overflow] the vertical scroll chevrons now centre correctly in RTL
• 🐛 [toggletip] the arrow now meets the bubble in RTL, on all four placements and on .tng-popover-arrow
• 🐛 [radio] the selected dot now stays centred in the button in RTL
• 🐛 [position] the centred placements — .at-center, .at-top, .at-bottom, .at-golden-ratio, .at-pretty-center — now centre in RTL, so every RTL page using one moves, Modal included
• ⬆️ --tng-color-{surface,fill,border}-dim-* and the overlay start colours now hold their colour directly, so redefining a --tng-color-opacity-* primitive no longer retints them
• ✨ [setup] the Lexus decorative face now ships — LexusDecorativeType joins the font-face stylesheet, so Lexus title 1 and 2 change appearance; it carries A–Z and space only, so keep it to short, all-alphabetic display strings
• 🐛 [radio] the button now centres on a wrapping label’s first line rather than the whole label, so every radio shifts by 1–2px and rows at the larger type sizes grow
• 🐛 [checkbox] the box now centres on a wrapping label’s first line rather than the whole label, so every checkbox shifts by 1–2px and rows at the larger type sizes grow
• 🐛 [list] markers now hang in a 1.5em gutter so a wrapped item indents under its text, and every list indents by 1.5em where it previously started flush
• ✨ [link] add .is-default for the default variant; a link has no default size and inherits the font size of its content, correcting the page’s is-md claim
• ✨ [alert], [badge], [tag], [label], [divider], [slot], [platform badge], [radio], [segmented control] every default variant and size now has a class you can write — .is-default, .is-block, .is-sm and .is-md, all optional, nothing renders differently
• ♻️ [main button], [accent button], [icon button] the default-variant fallback moves to :where(:not(…)), so an override on the component class alone now wins where it used to tie

7.7.0 (2026-09-18)

• 🐛 [main button], [accent button], [icon button], [pill button], [social media button], [media button], [icon] size and variant modifiers no longer style nested elements — eight nested blocks compiled to descendant selectors, so an element within a button or icon carrying .is-lg, .is-sm, .is-primary or .is-filled picked up that component’s padding, gap, size and type tokens. They now match the component itself. Every one renders identically, and an element nested inside one that was leaning on the leak loses those values; .is-lg and .is-sm also gain a class of specificity, matching .is-md, so an override of your own may need one more class to keep winning
• 🐛 [media button] the focus ring appears instantly on Lexus — the ring is drawn on the same outline the copper hover ring cross-fades, so it faded in over 200ms where every other brand showed it at once. Focus is now instant on every brand and the hover cross-fade is unchanged. The ring still fades out on blur, where the cross-fade owns the property again
• 💄 component sizing and layout spacing now scale with the root font size — icons, control heights, the width caps on text, and the spacing that wasn’t already on a token were fixed px and are now rem, so they grow with a user’s browser font-size preference like the tokens already do. Touch targets keep their 24px / 44px minimum as a floor, and borders, focus rings, shadows and breakpoints stay px. Pixel-identical on the 62.5% root; no markup change
• 💄 [gradient] the hover slide takes 400ms and the bloom’s size animates with it — the copper radial used to jump to its hover size while only its centre moved over 200ms, so the slide barely read. Position and size now both ease over --tng-transition-duration-m, on the Lexus secondary and tertiary buttons, the selected EV tab, the AI button and any explicit .tng-gradient-border or .tng-gradient-fill
• 💄 interactive components fade their colours between states — [main button] and the rest of the button family, [chip], [tabs], [list], [segmented control], [date picker], [slider] thumb, [model card], [stepper], [checkbox], [radio], [link], the [toggle] track, [field] label and text, and [media button] now fade the colours that change between their states over 200ms where they used to switch instantly. Focus rings and size or weight changes stay instant, and reduced motion turns the fade off. The radio’s hover state turns its border transparent instead of removing it, so the ring fades out with the fill. Automatic; no markup change. A transition you set on one of these components replaces the fade — see Motions
• ✨ [setup] ship the 62.5% root font size the tokens are sized against, as the lowest-priority rule on the page, so a host without the AEM clientlib no longer renders every CDS dimension 1.6× too large. Don’t set font-size on html or :root yourself
• ✨ [divider] add .is-emphasis — the default 1px line in the scheme’s high-contrast border colour, on .tng-divider, .tng-has-dividers and a .tng-content <hr>
• 💄 [typography] the body 4 and body 5 weight ladder shifts down one step — Figma inserted a third weight above emphasis, so on Toyota .is-4.is-emphasis and .is-5.is-emphasis go from semibold to medium and plain .is-5 goes from medium to regular. Any text on those two steps renders lighter than before. To keep the old weight, add .is-heavy — the new step carries the value emphasis used to. Lexus and Kinto keep their weights
• ✨ [typography] .is-heavy now works on body 4 and body 5 — it was wired for body 6, 7 and 8 only, because those were the only steps with a heavy token. All five steps now take the modifier
• 💄 [tabs] the selected tab’s underline is copper on Lexus — it resolved to the primary accent where Figma specifies the secondary one, so the selected indicator now matches the brand. It stays a flat copper line, not a gradient. A disabled EV tab also picks up its own foreground and border colours instead of borrowing the plain variant’s, and a disabled plain tab on Lexus softens by one step. Toyota and Kinto are unchanged
• ♻️ 💄 [divider] rewire onto the published divider/* tokens — the component hand-wired its colours from the generic --tng-color-border-* family, so it now reads the --tng-divider-* tokens Figma publishes for it. Toyota and Kinto are pixel-identical; on Lexus .is-primary dividers turn copper (the brand’s secondary accent) instead of red. Flat copper, as the proxy the tokens ship — a gradient divider line needs its own design pass
• 💄 [main button], [AI button] large buttons are one weight heavier on Lexus — --tng-buttons-lg-font-weight moves from the body 6 default to its emphasis step. Automatic; no markup change
• 🗂️ Lexus title 1 and 2 now name a decorative font the system does not ship — Figma points both at LexusDecorativeType, which is not licensed into this repo. The Playbook maps it to Nobel so those steps render exactly as before; a consumer that loads its own webfonts must either register the face or map --tng-font-font-family-lexus-decorative to a family it has, or the browser falls back to its default serif
• 🗂️ the refreshed tokens also publish a cards/* family that nothing consumes yet — --tng-cards-* has no unambiguous component here (Model Card owns its own family, and adopting it on Simple Card would change background, border and radius at once), so it is documented as deferred in the CSS rather than wired speculatively
• ✨ ♻️ [varia] --tng-direction is available on every element — the mirror sign was opt-in through .tng-direction and two component selectors; it is now set on [dir] itself, so any rule can multiply by it and the value comes from the nearest dir ancestor. That also fixes it resolving to the page’s direction inside a nested dir section, or on an element carrying dir itself. .tng-direction is dropped with the opt-in — leaving it in your markup is harmless, since the variable it switched on is always there now
• 🐛 [touch target] stop the hit area overflowing the page in RTL — every touch target is centred on its element by an inset-inline-start: 50% plus a pull-back, but the pull-back was hard-coded to the left while the inset flips to the right edge under dir="rtl". It now flips with the direction, so an RTL page no longer scrolls horizontally. Automatic; no markup change

7.6.1 (2026-09-10)

• 🐛 [segmented control] size each segment to its own label — segments were split to equal widths, so any label longer than average wrapped onto a second line while the control still had room. Each segment now hugs its own label, and uneven widths are expected. Quarantine
• 🐛 [overflow] stop .tng-overflow-ellipsis clipping descenders on the block axis — it clipped both axes where an ellipsis only ever acts on the inline one, slicing flat any glyph that overshot the box. Now overflow-x: clip; every box keeps its height to the pixel
• 🐛 [social follow], [special links] publish the CSS tab both pages were missing — each was authored against a stale develop slug, so the CSS documentation they already carried never rendered and neither page showed its CSS pill

7.6.0 (2026-09-09)

• 📝 promote [gradient] out of quarantine — .tng-gradient-border and .tng-gradient-fill, their rested-to-hover slide, the branded fallback for non-Lexus brands and the flat-border degradation behind @supports (background-clip: border-area) are now frozen. No CSS change
• ✨ ♻️ [tabs], [tab picker] the selected item paints its contrast fill automatically — .is-selected, aria-selected="true" and a checked nested radio all now carry the fill that had to be opted into per item, so every existing tab strip and tab picker changes appearance. .is-filled is soft deprecated: it still forces the fill and renders as before, but selection alone is enough now
• 🐛 [slider] keep the first and last scale labels inside the component — each label’s pull is now derived from its value rather than a flat -50%, so the end labels sit flush with the track instead of overhanging it, and a label can no longer wrap out of its row into the track. Automatic — no markup change
• ✨ [checkbox], [toggle] render the native :indeterminate state — both controls now draw a hairline dash for it, where checkbox was pixel-identical to unchecked and toggle kept its off cross at half travel. Set the property from JS as before; no markup or class change
• 🗂️ [segmented control] document the AEM component on its own React tab — its props and the markup it renders. React only; no CSS change. Quarantine
• 🗂️ [footer navigation] document the footer’s navigation region on its own page — up to four link columns that collapse into per-column accordions on narrow viewports. React only; no CSS change

7.5.0 (2026-09-03)

• 🐛 [text-box] stop a Link label losing its underline and descenders — .tng-link no longer auto-trims its <span>, which clipped both away on a label that was also a .tng-overflow-ellipsis box. Link labels are now one line-box taller in Chromium and WebKit, matching what Firefox already drew
• ✨ [icons] Toyota’s set is now the base set, resolved per brand at build time — a brand renders Toyota’s drawing of every name it doesn’t draw itself, so Kinto goes from 39 icons to 270 and Lexus gains the 13 it lacked. Lexus’s 32 exclusives stay Lexus-only (ADR 0010)
• ♻️ [icons] 39 icon rules narrow from unscoped to brand-scoped — inside a per-brand sheet (toyota/assets.css and friends) the brand-neutral icons (ui-*, the social set, iso, the Kinto service marks) now require data-brand, as the other 86% of that sheet already did — so non-breaking in practice. If you load a brand’s assets.css and render icons outside a data-brand subtree, set the attribute; the brandless /assets.css export still emits its rules unscoped, and grows from 39 names to 270
• 📝 [color] four tabs instead of two — Design keeps the guidance, a new Tokens tab takes the twenty token tables, the CSS tab is renamed Scheme for what it always documented, and a new Accessibility tab states the pairing contract. Design also gains the Lexus copper gradient stops; old ?tab=css links still land on the scheme docs
• 📝 [scheme] name the two schemes — neutral and contrast — matching Scheme.Neutral / Scheme.Contrast and the -neutral-* / -contrast-* token families. “Default scheme” was wrong wherever it appeared and is corrected across the site; every schemeTabs demo now labels its first tab Neutral
• 💥 💄 [asset-download] one glyph per row, and its shape says what the row does — the leading download glyph is dropped and the row’s single trailing glyph now encodes the behaviour: icon-external-link when the asset opens in a new tab, icon-download when an <a download> saves it. To migrate: delete the leading <i class="tng-icon icon-download">, and on every downloading row swap the trailing icon-external-link for icon-download; every row shifts left by the old glyph’s width. Quarantine
• 🗂️ [asset-download] document the AEM StaticAssetDownload component on its own React tab — its props, the required opensInNewWindowLabel, and how it derives the new-tab behaviour from the asset rather than from a prop. React only; no CSS change

7.4.0 (2026-08-31)

• 💥 ♻️ [asset-download] one link per row — the trailing Icon Button is removed and its external-link glyph becomes the Link’s own trailing icon, so an asset is one tab stop and one announcement instead of two. To migrate: drop the trailing <a class="tng-icon-button"> and its aria-label, move its <i> inside the label link, wrap the filename in a <span>, and move .tng-overflow-ellipsis from the <a> onto that span. Quarantine
• 🐛 [overflow] stop .tng-overflow-ellipsis clipping descenders and the underline off a label inside a Link, Button, Tag or any other control — the cap-height text-box trim now steps aside for both overflow utilities, which were never usable together
• 🐛 [alternate-content] update the module’s asset list to the one-link row — its snippets and demo still carried the trailing Icon Button removed from asset-download, which auto-placed into an implicit grid row. Quarantine
• 🗂️ [social-follow] document the footer’s social follow group on its own page — social media channels rendered as icon buttons alongside app store badges. React only; no CSS change
• 🗂️ [logo] document the brand logo on its own page — the linked brand mark that anchors the header, plus the BrandLogo SVG it renders. React only; no CSS change
• 🐛 [content] stop a long <pre> line pushing a horizontal scrollbar onto the whole document on Chrome 120 — the rule used overflow-inline, which did not ship until Chrome 135, so the declaration was dropped there. Now physical overflow-x; no change on current browsers
• ♻️ [accordion] restore the panel’s gap and padding on Chrome 120, where the unknown ::details-content (Chrome 131) invalidated the whole rule — a @supports fallback re-applies both, matching current browsers to the pixel. The expand/collapse animation is still lost there; show/hide, keyboard and screen-reader state are unaffected
• 🗂️ every styleguide declaration is now checked against Chrome 120, the retailer-screen floor, by a warn-only stylelint-browser-compat pass — the 14 findings were reviewed and cleared, so the baseline is clean and any new warning is genuinely new

7.3.0 (2026-08-24)

• 📝 promote [skeleton] out of quarantine — the .tng-skeleton block / .is-circle / .is-line shapes, their .is-sm / .is-md / .is-lg line presets, the --tng-skeleton-size custom property and the .is-pulse / .is-shimmer motion treatments are now frozen, with visual-regression coverage across brands and schemes. No CSS change; pick one motion treatment per view and keep it consistent

• 🔥 [alert] deprecate — Alert has been removed from the Figma library and has no design source, so it will not be developed further. Unusually, there is no replacement to migrate to: nothing else in the system covers a contextual, severity-coded page message. The CSS still ships and won’t be removed until a replacement is named — don’t build new surfaces on it

• ♻️ [asset-download] add .tng-asset-download-item — put it on every row; styling the bare <li> still works but is soft deprecated. The class also lets a single row render outside the <ul>, without its dividers. Quarantine

• 🗂️ the lifecycle badge now says whether a component is usable — Quarantine reads “Usable — may still change” and renders informational rather than warning, deprecated reads “migrate away”, and module pages carry a badge

• 📝 promote [chip], [chat messages], [label] and [model card] out of quarantine — each has settled markup and class names, a full set of Design / CSS / Accessibility tabs and visual-regression coverage, so the badge now reads Ready to use. No CSS change; the surface these pages already documented is simply frozen now

• 💥 ♻️ [tag] rewire onto the published tags/* tokens and promote out of quarantine — the component consumed one of the 48 tokens published for it and hand-wired the rest, so every existing tag changes appearance: colours, padding and typography all move, and Lexus tags are noticeably larger. A tag now reads the surrounding tng-scheme and picks its own treatment, so dark surfaces are supported, and .is-primary / .is-secondary / .is-warning complete Figma’s set of seven. Breaking: .is-bold is removed (superseded by the scheme behaviour) and .is-error is renamed .is-danger

• 📝 promote [date picker] out of quarantine — the calendar’s class names have been stable since it shipped, and the docs now match them: the CSS tab’s markup carries the role="grid" / role="gridcell" wrappers the styleguide’s display: contents rules already expect, the Accessibility tab describes the focus returns the recipe actually performs (Escape to the trigger, selecting a day to the field), and the recipe names every day cell with its full date. No CSS change

• 📝 promote [badge] out of quarantine — the Design, CSS and Accessibility tabs now match the CSS the styleguide actually ships (the documented is-subtle variant never existed, and the Design tab’s “Subtle / Contrast” emphasis axis isn’t in Figma either), and the component finally has visual-regression coverage across brands, schemes and direction. No CSS change; the badge is simply frozen now

• 📝 promote [toggle] out of quarantine — the Design, CSS and Accessibility tabs have been read against the current CSS, the component now has visual-regression coverage across both schemes and both directions, and the badge reads Ready to use. No CSS change. The docs gained the states the page never mentioned — :indeterminate, and the error treatment that applies to an :invalid input without is-error — and the Size property is now described for what it is: one fixed switch, with is-7 sizing the label only

• 📝 promote [split-content] out of quarantine — the two-pane layout’s markup and its one .is-full modifier have settled, and the visual-regression coverage now brackets all three breakpoint bands plus RTL, so the badge reads Ready to use. The page was corrected in the same pass: the layout switches on viewport media queries at md (768px) and xl (1200px), not on a container query at 1440px as it claimed, and the md step was undocumented. No CSS change

• 💄 [asset-download] restyle each row to the updated frame — a leading download glyph, the filename as an underlined .tng-link with the extension inline, the size on a second line, and an optional trailing open-in-browser control. Markup changed; the row is no longer one <a>

• 🗂️ [special links] document the footer link group on its own page — one or more Link items with mixed internal and external destinations, the external ones carrying an external-link glyph and an off-screen “Opens in new window”. No CSS change

7.2.0 (2026-08-12)

• 🐛 teach .tng-branded about Kinto — the brand-gated block utility only matched lexus and toyota, so any .tng-branded[data-brand="kinto"] block (the Icons page’s brand sets, the token lists) stayed display: none under Kinto
• ✨ [brands] add Kinto as a third brand — set data-brand="kinto" and load the new kinto/* styleguide and figma-tokens exports. Preview, not certified: unreviewed in design, and it renders the shared icon set only.
• 🗂️ [fundamentals] Foundations folds into Fundamentals — typography, motions (was animations), responsiveness, spacing and shape (was radius + stroke) move there, scheme becomes the Color page’s CSS tab, architecture moves to /cds/architecture, and every old URL redirects
• 🗂️ [tab-picker] document the tab picker on its own page — the tab strip’s single-select semantic leaves the Tabs page for /cds/components/tab-picker, with its own Design, CSS and Accessibility tabs. No CSS change: .tng-tabs / .tng-tabs-item still back both
• 🗂️ [components] split each component page’s Develop tab into CSS and React, so the tab bar reads Design / CSS / React / Accessibility and either implementation tab is optional. Old ?tab=develop links resolve to CSS
• ♻️ [chip] only apply cursor: pointer and the hover / active repaints when the chip is a control (button, a, label, input), so a <span> chip can be a static label — non-breaking, every documented chip is a <button>
• ♻️ [toggletip] rename Popover to Toggletip, retune the bubble (padding, width, arrow) and add a role="tooltip" variant for short hover text — non-breaking: .tng-popover* and --tng-popover-* stay as aliases, and the old URL redirects
• ⬆️ update figma tokens (14.1.0) — the buttons/ai-button/Number radius token is gone upstream; the AI button now takes the shared --tng-buttons-corner-radius like the rest of the buttons. It resolves to the same value per brand (Toyota radius-none, Lexus radius-xl), so there is no visual change — only the removal of --tng-buttons-ai-button-number from the published CSS
• ✨ [feature-list] add the feature list — a .tng-feature-list of label / data pairs for spec sheets and plan summaries, with .is-sm / .is-lg sizes, an optional trailing info icon button, and neutral / .is-contrast schemes. Quarantine

7.1.0 (2026-08-03)

• ✨ [grid] add .tng-debug — an opt-in overlay that paints the 12 columns as hotpink bars so the grid rhythm is visible while building a layout. A single absolutely-positioned ::before draws one bar per real 1fr track with the 20px gutters left transparent, pointer-events: none so it never intercepts interaction. Introduces the shared --tng-debug-color custom property (the touch-target debug overlay now reads the same tint)

7.0.0 (2026-08-03)

• 💥 [responsiveness] restore the v5 breakpoints as the system default — upgrading from v5 is non-breaking. sm 390→576, lg 1024→992, xl 1440→1200, 2xl 1920→1600 (md unchanged). The v6.0.0 realignment shipped ahead of teams being able to migrate, so the grid-aligned tiers now live only behind the opt-in .tng-grid and full-width container primitives (via internal -v2 custom-media that isn’t a consumer API); everything else — modal, typography, the default .tng-container, the .hidden-* display utilities — switches on the v5 values again. The major bump is because, relative to the 6.x line, this reverts a breaking change; relative to v5 nothing moves. 3xl stays dropped (verified unused). A future major will make the grid-aligned tiers the default (ADR 0009)
• ✨ [simple-header-bar] add a full-width header bar — a message + CTA + close block that fills the width of wherever it’s placed; is-contrast on the root cascades contrast tokens to all three, and the message is a tng-text-title pinned to title-10 (add tng-overflow-ellipsis to truncate). Quarantine
• ✨ [ai-button] add the AI (“Concierge”) button — an icon-only circle at rest that auto-expands on hover / focus / active to reveal its label, entirely in CSS (no JS; the label stays in the DOM as the accessible name). Wired to the --tng-buttons-ai-button-* token scale (rested / hover / active × neutral / contrast); Toyota expands to a sharp-cornered rect, Lexus to a rounded pill with a copper-gradient fill (linear → radial) that flips to the flat primary token on active. Quarantine
• ✨ [z-index] add .zz-top — an “always on top” helper (z-index: calc(infinity)) for the rare element that must sit above every layered surface
• 📝 [container] split the docs into Default and Full-width tabs — the default centred/capped wrapper leads; the opt-in .tng-container-v2 frame moves to its own tab, with a caution that it rides the staged grid-aligned tiers
• ⬆️ update figma tokens

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>

Open in playground

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>

Open in playground

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>

Open in playground

5.2.2 (2026-06-18)

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

5.2.1 (2026-06-17)

• 🐛 [toggletip] 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
• 🐛 [toggletip] fix arrow gap
• 🐛 fix flex column children’s inline sizing
• ⬆️ update figma tokens

5.0.0 (2026-05-27)

• 💥 ✨ [count-indicator] rework component
• 🐛 [toggletip] 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>

Open in playground

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>

Open in playground

.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)

• [toggletip] 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>

Open in playground

Contrast

The primary color no longer switches to contrast mode.

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

Open in playground

Neutral

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>

Open in playground

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>

Open in playground

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>

Open in playground

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>

Open in playground

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)

• ✨ [toggletip] 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)

• 💄 [toggletip] 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
• 💥 [toggletip] remove header element
• 💥 ⬆️ bump figma tokens
• 🐛 [modal] fix scroll to top
• 🐛 [modal] fix Safari
• 📝 [toggletip] document different parts
• 🐛 [toggletip] move shadow to outer element
• 🧪 [toggletip] 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>

Open in playground

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>

Open in playground

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>

Open in playground

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 toggletip
• ♻️ 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