NYS Design System Release 1.18.0 “Cascade”

Releasing the new <nys-tab> component! We fixed some responsive utility CSS, as well as a few React and Preact bugs. BREAKING CHANGE to grid-gap CSS classes, read release notes for more info.

Eric Steinborn
3 min read time

“Cascade” 🏔️

We held a vote during our office hours this week, and the winning vote was for naming this release “Cascade” after the 36th highest peak in New York: Cascade Mountain. Cascade Mountain has an elevation of 4,098 ft (1,249 m). That is just over 4 Empire State Buildings tall (1,050 ft to roof)!

Learn more about Cascade Mountain

<nys-tab> now available

The <nys-tab> acts as a clickable interface to toggle between different sets of information without leaving the page. It is not intended for page navigation.

Read the full tabs documentation

Mount Marcy is the tallest peak in the Adirondacks. It has an elevation of 5344 feet with 3166 feet of elevation gain. The roundtrip hike to the top is 14.8 miles and is an out-and-back route. Algonquin Peak is the 2nd tallest peak in the Adirondacks. It has an elevation of 5114 feet with 3050 feet of elevation gain. The roundtrip hike to the top is 7.8 miles and is an out-and-back route. Mount Haystack is the 3rd tallest peak in the Adirondacks. It has an elevation of 4960 feet with 4000 feet of elevation gain. The roundtrip hike to the top is 16.4 miles and is an out-and-back route. Mount Skylight is the 4th tallest peak in the Adirondacks. It has an elevation of 4926 feet with 5100 feet of elevation gain. The roundtrip hike to the top is 16 miles and is an out-and-back route. Whiteface is the 5th tallest peak in the Adirondacks. It has an elevation of 4867 feet with 3050 feet of elevation gain. The roundtrip hike to the top is 7.2 miles and is an out-and-back route.

Note: The content in the tab panels was gathered from lakeplacid.com and may not be completely accurate. This is meant to be a demo of how the component works, not a hiking guide.

Copy Code
<nys-tabgroup>
    <nys-tab label="Marcy"></nys-tab>
    <nys-tab label="Algonquin"></nys-tab>
    ...rest of the tabs...
    <nys-tabpanel>content inside the tab panel</nys-tabpanel>
    <nys-tabpanel>content inside the tab panel</nys-tabpanel>
    ...rest of the tabpanels...
</nys-tabgroup>

Emily Gorelik tabbed her way to the summit

Figma updates

  • A new Figma-only Link component was released this week
  • Lots of research into the upcoming Card component. Stay tuned for your chance to contribute to the Card discussion!

Kristin Sorrentino and Mashya Mumin are designing the future of New York State

Bug fixes

  • Adjust <nys-icon> alignment. Icons are now aligned in the text variant of <nys-button>
  • Grid Gap classes were changed to use NYSDS ramps instead of USWDS ramps
  • Inverted options we not passing WCAG contrast specs, so they have been removed
  • Fixed no heading bug in <nys-alert>
  • Datepicker out-of-range month now visible
  • <nys-tooltip> no longer resets to the top left of the screen when you change the tooltip content
  • Accessibility fixes for <nys-backtotop>
  • Accessibility fixes for <nys-badge>
  • Slotted content is now properly updated for React and Preact environments
  • Fixed responsive utility classes to cascade (get it?) better
  • Updated lagging GitHub Actions from v4 to v6

Emily Gorelik, Robert Chen, and Eric Steinborn ain't afraid of no bugs!

🚨 Breaking changes

Grid gap utility classes renamed

The $grid-gaps SCSS map now uses the standard NYSDS ramp. Update any old grid gap classes in your project:

Old class New class
nys-grid-gap-sm nys-grid-gap-2px
nys-grid-gap-md nys-grid-gap-200
nys-grid-gap-lg nys-grid-gap-300
nys-grid-gap-05 nys-grid-gap-50
nys-grid-gap-1 nys-grid-gap-100
nys-grid-gap-2 nys-grid-gap-200
nys-grid-gap-3 nys-grid-gap-300
nys-grid-gap-4 nys-grid-gap-400
nys-grid-gap-5 nys-grid-gap-500
nys-grid-gap-6 nys-grid-gap-600

Additional options were added but are not breaking changes. See the full grid gap class documentation here

Emily Gorelik bridged the gap

⚠️ Known issues

  • none

If you notice any issues, please add them to our GitHub Issue Tracker

That’s it!

For full component updates, bug fixes, and the detailed changelog:

See the full developer release notes for v.1.18.0 →

  • release
  • tab

Edit this page on GitHub (Permissions required)

Last updated: May 14, 2026