NYS Design System Release 1.20.0 “Giant”

“Giant” 🏔️

We packed so much into this release, it really is giant! The winning vote during Office Hours was for naming this release “Giant” after the 12^th highest peak in New York: Giant Mountain. The Mountain has an elevation of 4,627 ft (1,410 m). That is 15 Statues of Liberty 🗽 (plus a Yankee Stadium foul pole ⚾) tall! We didn't coordinate naming for this, it was a happy coincidence!

Learn more about Giant Mountain

<nys-card> released!

The new <nys-card> component is a flexible container for content that can include a heading, subheading, media, and body content. It is designed to be used in a variety of contexts, such as displaying information about a location, product, or service.

Read the <nys-card> documentation

Giant Mountain is a mountain located in the Adirondack Mountains of New York. It is the 12th highest peak in the state, with an elevation of 4,627 feet (1,410 m). The mountain is part of the Great Range and is known for its challenging hiking trails and stunning views from the summit.

Example Code

Copy Code

<div class="nys-tablet:nys-grid-col-6 nys-desktop:nys-grid-col-4">
  <nys-card heading="Giant Mountain" subheading="12th highest peak in New York">
    <img slot="media" src="/assets/i/2026/giant-mountain-card.jpg" role="presentation" />
    <p>Giant Mountain is a mountain located in the Adirondack Mountains of New York. It is the 12th highest peak in the state, with an elevation of 4,627 feet (1,410 m). The mountain is part of the Great Range and is known for its challenging hiking trails and stunning views from the summit.</p>
  </nys-card>
</div>

<nys-iconlist> released!

The <nys-iconlist> component displays a collection of items paired with visual icons, making it easy to create structured, scannable lists across web projects. It is commonly used to present event details, requirements checklists, or contact information.

Read the <nys-iconlist> documentation

<nys-iconlist id="event-details">
<nys-iconlistitem icon="calendar_month">July 4, 2026</nys-iconlistitem>
<nys-iconlistitem icon="schedule">5:00 PM</nys-iconlistitem>
<nys-iconlistitem icon="location_on">Central Park West</nys-iconlistitem>
</nys-iconlist>

<nys-processlist> released!

The <nys-processlist> is a component that informs users about instructions that appear in sequence. This component is not for interactive flows. For guiding users through multi-step interactive flows, please use <nys-stepper>.

Add <nys-processlistitem> elements as children of <nys-processlist>. Each item takes a label and an optional description. Steps are numbered by the list, so items never set their own number.

Read the <nys-processlist> documentation

<nys-processlist id="application-steps">
<nys-processlistitem label="Gather your documents"></nys-processlistitem>
<nys-processlistitem label="Complete the application"></nys-processlistitem>
<nys-processlistitem label="Submit and await review"></nys-processlistitem>
</nys-processlist>

<nys-verticalnav> released!

The <nys-verticalnav> component renders a side navigation menu on desktop and collapses into an accordion on tablet and mobile. It's built for sites with many links that don't fit in a horizontal nav.

Read the <nys-verticalnav> documentation

<nys-verticalnav heading="NYS Design System" headingLevel="h2">
  <ul>
    <li><a href="/">Foundations</a></li>
    <li>
      <nys-verticalnavgroup label="Accessibility">
        <ul>
          <li><a aria-current="page" href="">WCAG Guidelines</a></li>
          <li><a href="">Screen Readers</a></li>
        </ul>
      </nys-verticalnavgroup>
    </li>
  </ul>
</nys-verticalnav>

Bug fixes

• Fix multiple instances of shadowDOM label association
• feat(a11y): cross-shadow label association + fix inert error association by @plasticmind
• Fix: nys-datepicker to dispatch input event on "clear" & "today" button by @NovaCat35
• Fix: Add focus ring on invalid submissions for nys-radiobutton and nys-fileinput by @NovaCat35
• Enhancement: Make nys-datepicker position auto by @NovaCat35
• Fix: read component dependencies from package.json by @emilygorelik
• Fix: Change nys-change event files value by @NovaCat35
• Enhancement: style overrides for headers, nys-globalfooter, breadcrumb by @NovaCat35
• Fix the customElements.define of nys-fileitem by @NovaCat35
• FIX: unav header how you know focus state by @emilygorelik
• Fix/textinput search clear focus by @emilygorelik
• ENHANCEMENT: Unav Header alert by @emilygorelik
• ENHANCEMENT: button a11y improvements by @emilygorelik
• Fix: nys-dropdown to toggle via keyboard once by @NovaCat35
• Fix: radiobutton rework by @NovaCat35
• FIX: scheduled an update by @emilygorelik
• Component: Card (try 2) by @emilygorelik
• feat(a11y): ElementInternals accessibility layer + WCAG 2.2 AA remediation across all components by @plasticmind

🚨 Breaking changes

• You may notice that external CSS may impact the styles of a few design system components in this release (table and accordion, specifically). You can override the styles yourself to correct anything that doesn't look right. Future releases should resolve these CSS override issues. You can report any style issues in our GitHub Issue Tracker.

⚠️ Known issues

• The <nys-accordion> component headings are now titled with an <h3> by default. If you need to change the heading level, you can use the headingLevel attribute to set it the correct hierarchy for your page. For example, <nys-accordion headingLevel="h2"> will render the heading as an <h2>.

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

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

See the full developer release notes for v.1.20.0 →