We documented a workaround for a bug in nys-icon in 1.19.2 breaking changes.

Those changes are no longer required to get the default library to work.

Responsive margin and padding classes now available

Check out the updated documentation for Responsive utility classes featuring Margin and Padding variants!

Style overrides added for <nys-accordionitem> header text color

You can now override the accordion item header text color by modifying the --nys-accordion-color--header variable in your CSS.

MCP server updates

We made quite a few changes to the MCP server this release:

• Revamp all component code examples in source JSDocs
• Clarify when to enable nysLogo in <nys-globalheader>
• Document user-actions slot in <nys-globalheader>
• Document events fired by <nys-unavheader>

<nys-button> acts more like native <button> now

You can now label an <nys-button> like a native button:

<nys-button>This didn't work before 1.19.3!</nys-button>

Default <nys-icon> library redux

We made a significant improvement to <nys-icon> in v1.19.0. We added the ability to load in custom icons from any icon library. Unfortunately, this led to a break in the default icon library. We created a workaround for the issue, but we felt it was still lacking a ZERO-CONFIG option.

v1.19.3 "reverts" the change to the default library, while continuing to support defining external libraries. Learn how to implement a custom library in 1.19.3.

Expose files/value accessors in <nys-fileinput>

We were missing the native functionality of a file input component. The native functionality lists the files as a value. This fix aligns <nys-fileinput> with native requirements.

Continuing our automation journey

One of our guiding principles for the NYS Design System is to automate everything that is easily repeatable. In an effort to automate our documentation generation, Emily wrote a script that scans the source code Typescript file for @JSDoc-compatible comments and extracts the documentation automatically.

This change removed over 35 MDX files which was functionally duplicate code from our stories files. So we now generate our Storybook stories directly from the component source code, reducing the amount of duplication across the entire repository. Next up? Automating that documentation directly to this website.

Bug fixes

• Translate icon fixed in unavheader
• Accordion height tweaks
• Modal width and height cap removed
• Fix overlapping text in <nys-alert>, <nys-badge>, and <nys-icon>
• Checkbox label weight parity
• Fix checkbox for Drupal
• Lit as peer dep of packages

🚨 Breaking changes

• none

⚠️ Known issues

• Users running NYSDS 1.19.0 through 1.19.2 should immediately upgrade to 1.19.3 to fix the default icon library bug introduced in 1.19.0.

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.19.3 →

Read the 1.19.0 release notes and 1.19.2 breaking changes to see how to migrate

New subheading for <nys-globalfooter>

Use agencySubheading to display a short description beneath the agency name.

<nys-globalfooter
  agencyName="NYS Design System"
  agencySubheading="A product of the NYS Office of Information Technology Services"
>
</nys-globalfooter>

Two new icons

We added two new icons to the icon library:

schedule
location_on

Reminder: When using the <nys-icon>, you can now choose to load in icons from any other library. You can serve the icons locally or via a Content Delivery Network (CDN).

Quarterly audit fixes

We take stock of our progress every quarter. We do this to ensure that we're being consistent and that we speak with one voice. We need to check for new accessibility issues, and general bugs.

During our quarterly audit we uncovered 89 findings and remediated them. Here is a summarized list of fixes that were implemented:

• <nys-button> could execute arbitrary code
• <nys-backtotop> broke server-side rendering
• Missing sideEffects risked breaking tree-shaking changes
• Accessibility issues resolved for <nys-breadcrumb> and <nys-datepicker>
• Multiple security vulnerabilities patched
• Tooling changes

🚨 Breaking changes

• <nys-icon> in 1.19.0 libraries break on "chunked" frameworks (like React, Angular). Library break fixed in 1.19.1
• nys-grid-gap in 1.19.0 added vertical spacing to grid-gap gutters. Read about the grid-gap classes
• <nys-datepicker> default width changed from md to full. See note about width

⚠️ Known issues

• none

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.19.2 →

Read the nys-icon and grid-gap documentation below to see how to migrate

“Upper Wolf Jaw” 🏔️

The winning vote during Office Hours this week was for naming this release “Upper Wolf Jaw” after the 29^th highest peak in New York: Upper Wolfjaw Mountain. The Mountain has an elevation of 4,185 ft (1,276 m). That is as tall as 50,400 New York bagels !

Learn more about Upper Wolfjaw Mountain

Custom icon library support

When using the <nys-icon>, you can now choose to load in icons from any other library. You can serve the icons locally or via a Content Delivery Network (CDN).

Migrating to the new <nys-icon>

To migrate to the new <nys-icon> libraries, you'll need to ensure your icon files are in the correct location, and you may need to configure the "default" library to point to your icon files. Learn how to manage your libraries.

Custom icon library demos

Below, you will find two examples which retrieve icons from Font Awesome and Material:

Font Awesome demo

Material demo

Grid-gap vertical spacing

We enhanced the functionality of the grid-gap classes to add vertical spacing in addition to the pre-existing horizontal spacing. Add vertical space to your grid layouts today!

New <nys-divider> subtle variant

The <nys-divider> component got a new subtle attribute that provides a more understated visual separation between content. The subtle divider is ideal for use in situations where a less prominent division is desired.

<nys-divider subtle></nys-divider>

Bug fixes

• Align dev environment linting processes and prettier the Sass
• Remove horizontal padding of text buttons
• Fix href and fullWidth button configurations
• Rework <nys-radiobutton> for better accessibility
• Updated security vulnerabilities
• Fix missing color fill on certain <nys-icon> glyphs
• New tokens for underline regular and strong styles

🚨 Breaking changes

• <nys-icon> libraries break on "chunked" frameworks (like React, Angular). Library break fix
• nys-grid-gap added vertical spacing to grid-gap gutters. Read about the grid-gap classes

⚠️ Known issues

• none

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.19.0 →

<nys-icon
  name="delete"
  size="5xl"
></nys-icon>

Bug fixes

• Consolidate MCP token tools from 4 to 3
• Remove performance-heavy resize listeners
• Spacebar styling fixes for <nys-button>
• Fix an a11y issue with <nys-avatar>
• <nys-backtotop> now targets the body tag
• Ghost and text button icon spacing fixes
• Enhancement to <nys-stepper> documentation
• Added instructions for getting latest MCP updates
• Branded custom test reporter implemented
• New listener for out-of-bounds clicks to close global header menu
• Remove double focus a11y VO on <nys-checkbox>
• Fix a11y keyboard navigation and VO for nys-radiobutton
• Fix <nys-textinput> "tel" type reset functionality
• Fix <nys-textinput> "other" not disabling in <nys-checkbox> and <nys-radiobutton>
• Fix alignment of responsive <nys-breadcrumbs>
• Fix alignment in <nys-globalheader> gutters and padding to align with Figma
• Fix grid-gap overlapping and running off screen

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

Shout-outs

We want to take a moment to give a shout-out to our faithful contributors. These fearless folks have provided feedback, filed bug reports, and pitched new component proposals:

Jess Brislin, Bradley Bouchard, Jason Fiorini, Hemanth Kuvvarapu, Gregory Sweet, Melih Kartal, Uday Kiran Buddi, Jody Boucher, Kutumba Nunna, Tyler Deemer, Robert Schuchman, Conrad Weykamp, Alan Charlesworth, David Ackerman, Rachel Wang, Adam Fasoldt, Eric Neuls, Avery Parslow

We're shouting this from the rafters: Thank You!

🚨 Breaking changes

• none

⚠️ 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.3 →

“Cascade” 🏔️

We held a vote during our office hours this week, and the winning vote was for naming this release “Cascade” after the 36^th 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

<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:

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 →

We held a vote during our office hours this week, and the winning vote was for naming this release “Grace” after the 42^nd highest peak in New York: Grace Peak. Grace Peak has an elevation of 4,012 ft (1,223 m).

Learn more about Grace Peak.

<nys-breadcrumbs> now available

The new <nys-breadcrumbs> component shows users their location within a site's structure and provides links to navigate back through parent pages. The new component provides a couple of customization options like size and background color. It should be placed near the main content of your web pages.

Read the full breadcrumbs documentation

<nys-breadcrumbs>
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/tickets">Ticket System</a></li>
    <li>Current Page</li>
  </ol>
</nys-breadcrumbs>

Robert Chen followed the trail of breadcrumbs

<nys-button> text variant now allows prefixIcon and suffixIcon

Our initial design of the text variant of the button restricted use of icons. We were presented with use cases for adding the icons to the text buttons, so we added the ability to use a prefixIcon or suffixIcon along with the text variant of the <nys-button>.

Read the full icon button documentation

<nys-button
  variant="text"
  label="Review Component Proposals"
  href="https://github.com/ITS-HCD/nysds/discussions/categories/component-proposals"
  suffixIcon="open_in_new">
</nys-button>

Emily Gorelik is an icon

Figma updates

Today we’re launching the official version of the breadcrumbs component in our design library.

• Breadcrumbs now available in Figma
• Tabs now available as a “preview” version in Figma

Mashya Mumin designed her first component this sprint!

Kristin Sorrentino tabbed to the tabs

Bug fixes

• Added more Web Test Runner tests
• Unable to set null values to form components
• <nys-pagination> properly announces the current page
• Bundle the CEM and token data into MCP server
• Align <nys-datepicker> error message display
• <nys-dropdown> focus ring too persistent
• First push to address ElementInternals standardization across all components

Emily Gorelik, Robert Chen, and Jesse Gardner fix broken things

🚨 Breaking changes

• none

⚠️ 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.17.0 →

At the heart of that consistency are design tokens. Design tokens are not just an abstract concept, they are named design decisions that map to specific values and can be reused across platforms. In the NYS Design System, tokens are actual defined values that live in the package. One of their key strengths is that they are platform-agnostic: the same token definitions can be compiled down into different formats depending on the target platform, such as XML for Android or Swift for iOS. In our case, they are rendered into CSS custom properties (more commonly called CSS variables). These design tokens connect design intent and implementation, enabling the systematic definition, reuse, and override of values. In the NYS Design System, design tokens are created at a primitive level that then map to a semantic level above that. Then in the components themselves, these design tokens are applied to CSS custom properties (more commonly called variables) that have the same syntax structure of the tokens themselves.

Let’s unpack how that works.

What Are CSS Variables?

A CSS variable works like a variable in any programming language; it holds a value that is then used throughout the stylesheet. Instead of writing the same hex code or pixel value repeatedly, you assign it once and reference it with a name.

:root {
  --nys-component-background-color: #154973;
}

Then, anywhere you need that color:

.nys-component {
  background-color: var(--nys-component-background-color);
}

Change the value once, and every element that uses it updates automatically. That’s the power of variables: one definition, infinite reuse. But CSS variables in our design system go beyond convenience: they establish a language for consistency and scalability.

Primitive Tokens — The Foundation

Primitive tokens are the building blocks of the design system. They are the raw values (hex codes, spacing units, font sizes, border radii) that everything else references.

For example, our color system is organized in ramps. Each color family has a scale, from light to dark, where smaller values represent a soft tint, while larger values represent a deep, saturated tone. This predictable pattern lets designers and developers discuss color consistently, and in a structured way. The same logic applies to spacing, typography, and radius.

--nys-color-red-10
--nys-color-red-50
--nys-color-red-100
--nys-color-red-200
...
--nys-color-red-900

These primitives are stable. Their names never change, even if the underlying values are updated over time. --nys-color-red-100 might shift to meet new accessibility or brand needs, but the token itself will always exist as a constant in the system.

Semantic Tokens — Meaning and Context

On top of primitives are semantic tokens, which describe intent rather than raw value. This distinction matters: semantic tokens make it clear what to use where. Rather than leaving developers to guess whether to reach for --nys-color-red-600 or -nys-color-red-500, semantic tokens communicate purpose directly in their name. Primitive tokens should only ever be referenced when mapping them to a semantic token. When codebases skip this layer and reference primitives directly, changes become painful: a single rebrand or accessibility adjustment means hunting down every raw value instead of updating one token.

Instead of referencing --nys-color-red-600, we use:

--nys-color-danger: var(--nys-color-red-600);

The semantic term "danger," communicates the intent conveyed by the color it maps to. It tells anyone reading the code that "this color indicates an error or destructive action."

If an agency decides their "danger" color shouldn’t be as intense, they can override just one variable:

--nys-color-danger: var(--nys-color-red-400);

Every instance of "danger" across their application is automatically updated. They don’t need to hunt through dozens of components or CSS files.

Semantic tokens abstract meaning from implementation, making the design system adaptable to different contexts (like accessibility needs or branding variations) without compromising structure.

Public vs. Private Tokens

Not every variable is intended for direct use or override. To keep things predictable, we use an underscore convention to distinguish between internal and public-facing tokens:

• --_nys-button-background-color: internal (used inside the component)
• --nys-button-background-color: public (documented and safe to override)

CSS doesn’t support private variables, so this convention helps our team organize and maintain the system. From a user perspective, you don’t need to worry about which is which—if a variable is safe to override, it will appear on the component’s documentation page under CSS Variables. Please note that most components will NOT have overridable variables, these public variables are rare and created intentionally to ensure a cohesive design system.

Internally, private tokens often map to their semantic or primitive version. Let’s look at the background color of nys-button and follow its token map:

--_nys-button-background-color: var(--nys-button-background-color, var(--nys-color-theme));

This means:

• If a public override exists, use it.
• If not, fall back to the default color, in this scenario --nys-color-theme.

That layering ensures reliability even when variables aren’t explicitly defined.

Override Hierarchy and Theming

One of the most significant advantages of this token structure is theming.

Agency groupings under the NYS umbrella often have distinct brand colors: Environmental uses green, Admin uses orange, Safety uses gray. Instead of rewriting styles, they simply override semantic tokens through the data-theme attribute. So while the default --nys-color-theme is set to var(--nys-color-nys-blue-600), by setting data-theme="admin" at the top most level of the project, --nys-color-theme will instead map to var(--nys-color-admin-orange-700).

All components referencing --nys-color-theme automatically adapt to use the proper color ramp of the set theme. This design makes the New York State Design System scalable across diverse agencies while maintaining visual unity and predictable behavior.

When (and Why) Overrides Inform the System

When multiple teams consistently override the same token in the same way, it suggests a gap in the system.

For example, if several agencies keep overriding the --nys-button-background-color to the agency’s accent color, that’s valuable data. It tells us that an "accent" button might deserve to become an official variant. If you find your team doing this often, consider helping us (and ultimately you) by suggesting a new variant or enhancement.

In other words, overrides help the system evolve organically, guided by real-world use rather than guesswork.

Balancing Flexibility and Control

Design systems often struggle between two extremes:

• Too rigid: teams can’t adapt the components to their needs.
• Too loose: every team customizes everything, and consistency collapses.

CSS variables offer a middle ground. They allow overrides for legitimate edge cases without introducing dozens of one-off variants.

By creating public-facing CSS variables we are not encouraging teams to stray from the provided variants of our existing components, but, instead, we are providing a safe way for them to diverge in these edge-case scenarios where the existing options are not possible to implement.

Naming Conventions and Readability

One final principle: readability beats cleverness.

Every variable name in our design system maps directly to its CSS property name. For instance, the text color of a button maps to --_nys-button-color rather than to --_nys-button-text-color.

This one-to-one mapping reduces cognitive load for engineers. No need to remember abbreviations or shorthand. You can look at the variable and instantly know which property it controls.

Modifiers (--hover, --active, etc.) extend that clarity to states. Note: If you override --nys-button-background-color, remember to override the hover and active variants too. Otherwise, your hover state will revert to the default.

Why This Matters

CSS variables are the key to making our web components scalable, flexible, and maintainable. Because the CSS variables used the shared vocabulary of the design tokens across the ecosystem, color, spacing, and typography mean the same thing in every product.

They allow:

• Designers to define intent once and apply it everywhere.
• Developers to override safely within a structured system.
• Agencies to customize branding without rewriting components.
• The NYS Design System team to evolve the design language based on actual usage.

This shared language is what turns our collection of components into a true design system.

We've added the ability to restrict selectable dates in the datepicker component. See it live in action below. Special thanks to @Sqrrl for maintaining the base wc-datepicker component our nys-datepicker is based off of. Read the minDate maxDate documentation.

<nys-datepicker
  label="Select a date"
  description="Only dates within April 4/5/2026 - 4/15/2026 are selectable"
  minDate="2026-04-05"
  maxDate="2026-04-15"
></nys-datepicker>

Figma updates

Today we’re launching the preview version of the breadcrumb and tab components in our design library.

• Breadcrumbs now available in Figma
• Tabs now available in Figma

Kristin Sorrentino and Mashya Mumin are creating important components!

Bug fixes

• BUG: nys-video min-width breaks out of mobile viewports
• Update Storybook
• Fix JSX errors
• Simplify border-radius setup
• Fix empty submission bug in <nys-combobox>
• Add CSS inverted border to button
• Fix <nys-video> package contents

Emily Gorelik, Robert Chen, and Eric Steinborn fix broken things.

🚨 Breaking changes

• none

⚠️ 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.16.1 →

We held a vote during our office hours this week, and the winning vote was for naming this release “Algonquin” after the 2^nd highest peak in New York: Algonquin Peak. Algonquin Peak has an elevation of 5,114 ft (1,558 m).

Learn more about Algonquin Peak.

<nys-video> now available

The new <nys-video> embeds a YouTube video with a clickable thumbnail and on-demand playback. The iframe loads only after interaction by default, helping improve page performance while keeping the experience responsive and accessible.

Read the full video documentation.

<nys-video
  videourl="https://www.youtube.com/watch?v=TBfFzt0150Q"
  titleText="IT'S a Tech Podcast, Episode 3: Human-Centered Design"
></nys-video>

Robert Chen pressed play on this one.

.nys-flex-gap classes now available

We've added flex gap configuration classes to the NYS DS styles package. You can use them in your HTML to set gap widths that fit your application needs.

Read the full flex-gap documentation.

Emily Gorelik Flexed her muscles on this one.

Figma updates

Today we’re launching the official version of the video component in our design library.

• Video Player now available in Figma

Kristin Sorrentino is creating important components!

Bug fixes

• <nys-dropdownmenu> in v1.15.0 had z-index issues. They have been resolved in this release.
• maxLength fixed in <nys-textinput>
• React support has expanded to add react wrappers and JSX definitions for React-like
• Dispatch events now bubble up and are composed
• Project build time reduced significantly
• Fixed table sort event not firing
• Globalheader no longer scheduling updates
• Fixes to build scripts
• Focus and logic fixes for <nys-checkboxgroup>
• Removed extraneous getButtonElement() function from <nys-modal>
• Icon alignment fixes
• MCP server fixes

Emily Gorelik, Robert Chen, Eric Steinborn, and Jesse Gardner fix broken things.

🚨 Breaking changes

• none

⚠️ Known issues

• BUG: nys-video min-width breaks out of mobile viewports

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.16.0 →

This is our 35^th release of the New York State Design System. Nye is the 45^th highest peak in New York, with an elevation of 3,895 ft (1,187 m)!

Learn more about Nye Mountain.

<nys-combobox> now available

The new <nys-combobox> combines a text box with a dropdown list, allowing users to either select a predefined option or type to select a value from the list.

Read the full combobox documentation.

<nys-combobox label="Choose a county" id='my-combobox'>
  <option value="albany">Albany</option>
  <option value="allegany">Allegany</option>
  <option value="bronx">Bronx</option>
  <option value="broome">Broome</option>
  ...rest of options...
</nys-combobox>

Emily Gorelik combo'd these boxes.

<nys-dropdownmenu> now available

The new <nys-dropdownmenu> is a highly rquested feature for the NYS Design System. Featuring a trigger element, and dropdown content you can either assign URL's to the dropdown items, or listen to their JavaScript events to fire off a script. Give it a try today in the <nys-globalheader>.

Read the full dropdownmenu documentation.

<nys-button id="my-trigger-id" label="Dropdown Menu"></nys-button>
<nys-dropdownmenu id="my-dropdownmenu" for="my-trigger-id">
  <nys-dropdownmenuitem label="Profile" href="/profile"></nys-dropdownmenuitem>
  <nys-dropdownmenuitem label="Repositories & Github Pages" href="/repos"></nys-dropdownmenuitem>
  <nys-dropdownmenuitem label="Organizations" href="/organizations"></nys-dropdownmenuitem>
  <nys-dropdownmenuitem label="Sign out" href="/logout"></nys-dropdownmenuitem>
</nys-dropdownmenu>

Robert Chen dropped this hot new component!

Custom language list in <nys-unavheader>

Different agencies solve the multi-lingual issue in different ways. Initially the unavheader component only supported specifically formatted URLs with subdomains for each language. The latest update to <nys-unavheader> allows you to customize the language list in the "translate" dropdown.

Read the full custom language endpoint documentation.

<nys-unavheader id="my-header" hideSearch></nys-unavheader>
<script>
  const header = document.querySelector('#my-header');
  header.languages = [
    { code: 'en', label: 'Custom' },
    { code: 'es', label: 'Language' , url: '?lang=es'},
    { code: 'fr', label: 'Support', url: '?lang=fr'},
    { code: 'fr', label: 'in v1.15.0', url: '?lang=js'},
  ];
</script>

Emily Gorelik customized the header!

Three new icons available:

Check out the new icons in <nys-icon>: filter_list, filter_alt, and sort are now available for use!

View the full icon list.

Robert Chen sorted this out!

Figma updates

Today we’re launching the official versions of our new combobox and dropdown components in our design library.

• Combobox - Give your users a type-ahead list of values to search and select
• Dropdown - A trigger with a dropdown attached to it
• Video Player now available in Figma

Kristin Sorrentino is creating important components!

Bug fixes

• Fix form field ability to be focused programatically
• Dispatch unique events for both <nys-checkbox> and <nys-radiobutton> “other” fields
• Fixed buttons that were taking up too much horizontal space in the DOM
• De-duplicate the build script to only build each component once
• Re-apply version numbers to build JS and CSS files
• Fixed Sass errors in utility scripts
• <nys-radiobutton> and <nys-checkbox> with no label no longer prints "false"
• Dispatch an input event when typing in <nys-datepicker>

Emily Gorelik, Robert Chen, and Eric Steinborn fix broken things.

🚨 Breaking changes

• none

⚠️ Known issues

• <nys-dropdownmenu> in v1.15.0 has z-index issues. They have been resolved in a hotfix, but will not be released until next release.

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.15.0 →

Mount Marcy is huge. This release is a huge milestone for us too. This is our one year anniversary of the 1.0 release of the NYS Design System, so we figured we'd go with the biggest mountain around! Marcy is the highest peak in New York, with an elevation of 5,343.1 ft (1,628.6 m)!

Learn more about Mount Marcy.

New approach to agency themes

New agency theme files have been added back to the @nysds/styles package. They are no longer minified so they are easier to read. To get the new agency themes to work, you'll need to either link to the separate file, or add a data-theme attribute to your body or HTML tags.

There are now three ways to apply agency themes to your apps and sites:

1. <html lang="en" data-theme="admin">
2. <link rel="stylesheet" href="theme-admin.css">
3. <body class="nys-theme-admin">

Jesse Gardner and Eric Steinborn are stylish.

Customize the <nys-accordion>

Based off a contribution from Brian Miller (in discussion #1270) we realized that in some instances you may want an accordion's content to expand the full width of a screen. Additionally, we have provided a set of new css variables which can be overridden to set a max length for accordion content, and to color the accordion headings. Read the accordion documentation.

<style>
  :root {
    --nys-accordion-background-color--header: var(--nys-color-theme-weak);
    --nys-accordion-background-color--header--hover: var(--nys-color-theme-weaker);
    --nys-accordion-content-max-width: 150ch;
  }
</style>
<nys-accordion>
  <nys-accordionitem id="accordionId1" heading="How do I renew my passport or apply for a new one?" expanded>
    <p>
      You can apply for or renew a U.S. passport through the U.S. Department
      of State. Some renewals can be done by mail.
    </p>
    <div>
      <a href="https://www.ny.gov" target="_blank">Check your registration</a>
      <a href="https://www.ny.gov" target="_blank">Fill out application</a>
    </div>
  </nys-accordionitem>
  <nys-accordionitem id="accordionId2" heading="How can I find out if I’m registered to vote?">
    <p>You can check your registration status, update your information, or find out how to register through the National Association of Secretaries of State.</p>
  </nys-accordionitem>
</nys-accordion>

Robert Chen performed accordion surgery.

“Other” option available in <nys-checkbox>

Most times when you need to collect information from a user you present them with a list. Somethings though, that list is incomplete, and you need an option for a user to type in their reply. The other option is now available to create a user-entered selection in a <nys-radiobutton> and <nys-checkbox>. Read the checkbox other documentation Read the radiobutton other documentation

<nys-checkboxgroup label="Select your favorite New York landmarks">
  <nys-checkbox label="Adirondacks" name="landmarks" value="adirondacks"></nys-checkbox>
  <nys-checkbox name="landmarks" value="finger-lakes" label="Finger Lakes"></nys-checkbox>
  <nys-checkbox name="landmarks" value="catskills" label="Catskills"></nys-checkbox>
  <nys-checkbox name="landmarks" other></nys-checkbox>
</nys-checkboxgroup>

Robert Chen checked the both for “other.”

Figma updates

Today we’re launching the preview versions of our new combobox and dropdown components in our design library.

• Combobox - Give your users a type-ahead list of values to search and select
• Dropdown - A trigger with a dropdown attached to it
• other option now available for radiobuttons and checkboxes
• <nys-label> font style is "normal" instead of "italics"
• <nys-accordion> max width is now 80ch in Figma
• Updated the hover and pressed state varibale on NYS Ghost Button

Kristin Sorrentino is creating important components!

Bug fixes

• Fix radiobutton focus styles
• Output CSS theme files again (sorry)
• Stylelint rule fixes
• MCP server fixes
• Properly following the DTCG schema
• Lint and lint:fix working in Windows
• Datepicker accessibility fixes
• nys-label accessibility fixes
• Properly export React type definitions
• Many JSDoc updates for better Custom Element Manifest integration

Emily Gorelik, Robert Chen, and Aaron Mendez fix broken things.

🚨 Breaking changes

• none

⚠️ Known issues

• nys-datepicker missing dispatch event for calendar clicks

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.14.0 →

Thanks to Doug Bartow and Kevin Luddy for designing and animating the perfect birthday badge for our one year anniversary!

New homepage

We've redesigned the homepage to better reflect the work being done on the design system. We've added sections with quick access to popular features like design tokens, and typography. We list the latest updates so you can keep track of releases right from the homepage. More improvements to come!

Quicker access to the things you need

Improved the search function on the website to fit into the unav header (top white bar on this page). This allowed us to remove a separate search link in the header and implements the unified unav search pattern.

New contribute page

There are multiple ways to contribute to the NYS Design System. Our new contributing page provides multiple ways you can contribute to the NYS Design System. We've included a link for requesting new components and enhancements, a link for reporting bugs, and a link to join the conversation in our MS Teams channel. We love contributions!

Thanks to Mashya Mumin, Kristin Sorrentino, and Doug Bartow for this new style!

The <nys-unavheader> now supports a custom search url. Simply change the property "searchUrl" to point to a valid search endpoint and be sure to include the search parameter (Usually "q=", but your mileage may vary). To see an example of the search, use the search at the very top right of this page to search this site. Read the custom search endpoint documentation for <nys-unavheader>.

Emily Gorelik searched for this solution.

New <nys-badge> STRONG variants

When creating the <nys-table> component we realized that the muted color badges we created were not standing out enough in a crowd of other table cells. So we created an additional variant: "strong." Use the strong badge variant to help your badges stand out in a crowd. Continue to use the default variant in most cases. Read the badge documentation.

<nys-badge label="Neutral" variant="strong" prefixIcon></nys-badge>
<nys-badge label="Error" intent="error" variant="strong" prefixIcon></nys-badge>
<nys-badge label="Warning" intent="warning" variant="strong" prefixIcon></nys-badge>
<nys-badge label="Success" intent="success" variant="strong" prefixIcon></nys-badge>

Emily Gorelik showed her strength.

Bug fixes

• Windows build fixes
• Pagination style fixes
• Modal component fixes
• Remove Stepper demo files from NPM package
• Table fixed "scheduled update" error

Emily Gorelik, Robert Chen, and Aaron Mendez squashed these bugs.

🚨 Breaking changes

• none

⚠️ 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.13.1 →

When we name our releases, we pick from a list of Adirondack high peaks. For this release, we felt it appropriate to name it after the <nys-table> component. TableTop is the 19th highest peak in New York, with an elevation of 4,427 feet (1,349 m)!

Learn more about TableTop Mountain.

New <nys-datepicker> component

The user experience for scheduling appointments, and selecting future dates, can be confusing without a calendar view. The new <nys-datepicker> component provides you a way to give users a quick calendar view of dates. Importantly, do not use this for “memorable dates” such as “date of birth” or “anniversary date,” instead use a textinput for entering the date manually. Read the datepicker documentation.

<nys-datepicker></nys-datepicker>

Robert Chen saved the date!

New <nys-table> component

Tables are very useful for displaying structured data on the web. The new <nys-table> component aims to standardize the look, feel, and functionality of a table element. You'll find features such as zebra striping, column sorting, and more. Read the table documentation

<nys-table id="table3" name="table3" bordered sortable striped>
  <table>
    <caption>
    New York State High Peaks and Popular Hikes
    </caption>
    <thead>
      <tr>
        <th>Mountain</th>
        <th>Peak Height (ft)</th>
        <th>Hike Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Marcy</td>
        <td>5,344</td>
        <td>Van Hoevenberg Trail</td>
      </tr>
      <tr>
        <td>Algonquin</td>
        <td>5,114</td>
        <td>Northeast Trail</td>
      </tr>
      <tr>
        <td>Haystack</td>
        <td>4,960</td>
        <td>Johns Brook Trail</td>
      </tr>
      <tr>
        <td>Skylight</td>
        <td>4,926</td>
        <td>Lake Tear Trail</td>
      </tr>
      <tr>
        <td>Whiteface</td>
        <td>4,867</td>
        <td>Whiteface Mountain Trail</td>
      </tr>
    </tbody>
  </table>
</nys-table>

Emily Gorelik tabled this component.

“User Actions” in <nys-globalheader>

Based on community feedback, we identified a need to allow engineers to add a “user” menu to the global header. The <nys-globalheader> component includes a named slot called user-actions. This slot allows you to insert custom HTML content, such as user profile links, settings, or logout buttons, into the header. Read the user actions documentation

<nys-globalheader 
  appName="User Registration Form" 
  agencyName="Office of Information Technology Services"
>
  <nys-button slot="user-actions" label="Sign out" prefixIcon="slotted">
    <nys-avatar
      slot="prefix-icon"
      ariaLabel="User avatar"
      initials="NY"
    ></nys-avatar>
  </nys-button>
</nys-globalheader>

Emily Gorelik modified this component.

Figma updates

Today we’re launching the official versions of our new table and datepicker components in our design library.

• Table - The table component is ready to use in your Figma designs.
• Datepicker - The datepicker component is ready to use in your Figma designs, too!

Kristin Sorrentino updated these important components!

Bug fixes

• Fixed some heading tokens to align with Figma library
• <nys-select> now has a default height applied
• <nys-select> now has a proper disabled state color applied
• <nys-table> has a default filled background color now
• Clicking the description on an <nys-checkbox> or <nys-radiobutton> now properly selects the element
• Many JSDoc updates for better Custom Element Manifest integration

Emily Gorelik and Robert Chen fix broken things.

🚨 Breaking changes

• none

⚠️ 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.13.0 →

Visit our NYS Design System 2025 Wrapped page to see our highlighted accomplishments for the Design System over the last year. We shipped 34 releases featuring a lot of capabilities and configuration options. Design Tokens made available as CSS variables will transform any old UI into an NYS-branded UI in a short amount of time!

Figma updates

Today we’re launching PREVIEW versions of our new table and datepicker components.

• Table - The table component is ready to use in your Figma designs. (Code is close to release!)
• Datepicker - The datepicker component is ready to use in your Figma designs, too!

Leo Vogel and Kristin Sorrentino updated these important components!

Bug fixes

• Stepper voiceover bugfix
• Begin JSDoc documentation for code components
• Fix RTL support in nys-alert and nys-button
• Fixed readonly and required props interfering with each other
• Added more tests to some components

Emily Gorelik and Robert Chen fix broken things.

🚨 Breaking changes

• none

⚠️ 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.12.1 →

When we name our releases, we pick from a list of Adirondack high peaks. For this release, we held a vote in our teams channel and Office Hours. After a total of 34 responses, our winner is Skylight with 17 votes! Skylight is the fourth-highest peak in New York, with an elevation of 4,924 feet (1,501 m)!

Learn more about Mount Skylight.

Hello new tooltip!

We realized soon after releasing the <nys-tooltip> component that is was too limited in scope. It was only able to be wrapped around buttons and icons. So we took a look at other design systems and decided to implement tooltip as a stand-alone component. Using a for attribute to target an id will display tooltips on the following elements:

• <nys-button>
• <nys-icon>
• <nys-textinput> (appears as a hint icon)
• <nys-textarea> (appears as a hint icon)
• <nys-select> (appears as a hint icon)
• <nys-checkboxgroup> (appears as a hint icon)
• <nys-checkbox> (appears as a hint icon)
• <nys-radiogroup> (appears as a hint icon)
• <nys-fileinput> (appears as a hint icon)

Tooltip demo

<nys-tooltip for="my-textinput" text="I am a tooltip."></nys-tooltip>
<nys-textinput id="my-textinput" name='fullName' label="Full name" description="Enter your full legal name" width="md"></nys-textinput>

Robert Chen was tipped off about this change.

New responsive utility classes

We have added new responsive variants for our popular utility classes. You can now apply certain utility classes at specific breakpoints as written below:

<div class="nys-grid-row">
  <div class="nys-tablet:nys-grid-col-6 nys-desktop:nys-grid-col-4">12 columns at mobile size.</div>
  <div class="nys-tablet:nys-grid-col-6 nys-desktop:nys-grid-col-4">6 columns at tablet size.</div>
  <div class="nys-tablet:nys-grid-col-6 nys-desktop:nys-grid-col-4">4 columns at desktop size.</div>
</div>

You can read the full documentation for the new responsive utility classes on our responsive utility documentation page.

Eric Steinborn was responsible for these.

Figma updates

• Table - The table component is ready to use in your Figma designs!
• Datepicker - The datepicker component is ready to use in your Figma designs, too!

Leo Vogel and Kristin Sorrentino rose to the challenge!

Updates to Custom Element Manifest (CEM)

• Added missing events to several components including <nys-textinput>, <nys-textarea>, and <nys-select>.
• Improved descriptions and typings for various properties and methods across multiple components.
• VSCode intellisense now properly reports back options for properties like size in <nys-icon> and width in <nys-button>.

Emily Gorelik insisted on improving intellisense.

🚨 Breaking changes

• <nys-tooltip> is now a standalone component. The old tooltip wrapper has been removed from the package. If you are using it, please update your code to use the new standalone tooltip component.

⚠️ 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.12.0 →

The Figma Library for the New York State Design System is now available in the Figma Community for non-NYS Employees. If you are an NYS Employee, contractor, or vendor of NYS please use the actual Figma library.

The Community library contains all of the components in the system, the project template, and you can even configure a custom theme so local governments within New York State can adopt the design system. Use the NYS Design System Figma file today.

Leo Vogel and Kristin Sorrentino published the Figma file.

Sass under the hood

Our initial setup for the NYS Design System included raw CSS file imports through JavaScript. We have run out of runway with vanilla CSS and have made the conversion to Sass for all style files. Sass gives us more flexibility in generating CSS programatically. All components have been converted to use Sass, and an added benefit, the file size for the package was reduced by 40KB just by including minified CSS instead of expanded. Stay tuned for an extensive utility class expansion coming soon!

Eric Steinborn ended up getting real sassy.

VSCode autocomplete support

To add NYS Design System vscode autocompletion to your editor:

Copy the .vscode/ folder into the root of your project. You can find it in /node_modules/@nysds/components/dist/.vscode

Edit the following file (create it if it doesn't exist)

./vscode/settings.json

Add the following lines and save the file:

"html.customData": [".vscode/vscode.html-custom-data.json"],
"css.customData": [".vscode/vscode.css-custom-data.json"]

If you have existing settings, add the custom data in addition to the files already listed.

Notable bug fixes

• Fix: Pagination edge case bug by @emilygorelik
• Fix: select initial validation by @emilygorelik
• Fix: unavheader aria role by @emilygorelik
• Fix: Typography token weights by @emilygorelik

Emily Gorelik is a verified exterminator.

New icons

expand_all

height

straight

Robert Chen sees icons in his sleep.

🚨 Breaking changes

• None

⚠️ 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.11.3 →

• <nys-fileinput> used to double click on keyboard. This is no longer the case, a single click is all you will get now!
• Updated our LICENSE.md. We now identify Lit.dev and Material icon licenses.
• Our consoles were filled with warnings, NO LONGER! We fixed ALL browser warnings in Web Test Runner and lit-analyze tests.

Robert Chen, Emily Gorelik, and Ben Greenberg exterminated these bugs, cleared the console, and updated our license.

Notable Figma changes

• Image component - Decorative property added for accessibility.
• Screen template instructions - Added detailed guidance for using the Screen Template component, including explanations of fidelity mode, and instructions on adjusting the size and theme.

Leo Vogel and Kristin Sorrentino made these changes.

🚨 Breaking changes

• None

⚠️ 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.11.2 →

Why “Gothics?”

When we name our releases, we pick from a list of Adirondack high peaks. This week's release is named Gothics. We wanted to take advantage of spooky season and find an appropriate name! BOO! 👻

Learn more about Gothics mountain.

<nys-option> deprecated

<nys-select> has been updated to use “native guts.” If you are running v1.11.0 or higher, you should use native <option> and <optgroup> tags instead of <nys-option>. Check it out below and on the <nys-select> documentation page.

<nys-select label="Which New York State service are you contacting us about?" description="This is for demo purposes and the list might not be exhaustive.">
  <optgroup label="Transportation Services">
    <option value="mta">MTA / Public Transit</option>
    <option value="dmv">Department of Motor Vehicles (DMV)</option>
    <option value="highway">Highway Maintenance</option>
  </optgroup>
  <optgroup label="Health & Human Services">
    <option value="medicaid">Medicaid / Health Insurance</option>
    <option value="mental-health">Mental Health Support</option>
    <option value="child-family">Child and Family Services</option>
  </optgroup>
  <optgroup label="Public Safety">
    <option value="state-police">State Police</option>
    <option value="emergency-management">Emergency Management</option>
    <option value="fire-safety">Fire Safety</option>
  </optgroup>
  <optgroup label="Environment & Energy">
    <option value="environmental-conservation">Environmental Conservation</option>
    <option value="clean-energy">Clean Energy Programs</option>
    <option value="waste-management">Waste Management</option>
  </optgroup>
</nys-select>

Emily Gorelik selected this ticket to work on.

nys-icon size ramp change

<nys-icon> sizes synced between design and code - Read the icon size documentation. This release includes major changes to the icon size system to align with new design tokens and improve consistency between Figma and code.

Relative size updates:

• Added: 5xl
• Removed: 2xs
• md is now the default size (previously sm)
• The size ramp has been shifted up, so if you have been using relative sizes, your icons may be smaller

Literal size updates:

• Added: 14, 18, 20, 40, 50
• Removed: 48, 64

If you reference icon sizes directly in code, Figma, or documentation, please review and update your usage accordingly.
See the updated size documentation →

Robert Chen, Kristin Sorrentino, and Leo Vogel ramped this up!

Other notable code changes

• Keyboard controls work with buttons again - #935.
• New elevation design tokens - Check out the elevation tokens.
• Better accessibility in <nys-globalfooter> - The agencyname value now prints as an <h2>.

Robert Chen and Emily Gorelik, Thank you.

Figma Screen Template changes

Added option to add modal and ability to configure screen size from top of right sidebar before detaching. Also revised layer names for better code generation by AI from Figma Screens.

Other notable Figma changes

• Text input and text area components now have a "readonly" property.
• Fixed prototyping issues in nys-unavheader and nys-unavfooter.
• Size naming in nys-icon have been resolved.

Leo Vogel and Kristin Sorrentino made these changes.

Bug fixes

• <nys-select> now defaults to full width instead of md
• <nys-select> font is now properly Proxima Nova
• <nys-globalfooter> now uses native <nys-divider>

🚨 Breaking changes

• <nys-icon> size scale updated

If you have used or referenced icon sizes directly in code, Figma, or documentation, please review and update your usage accordingly.
See the updated size documentation →

⚠️ 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.11.0 →

We added a search feature to the site. You can click the Search link in the site navigation to search the whole site.

New 404 page

We've updated our 404 (page not found) error page to include a mascot and a search box. See the 404 page in action.

Direct Links to Headings

When you are on a page, you'll notice a button with a link icon next to headings. Click that button to copy the URL direct to that page and heading. Check out the headings on this page for an example of how it works.

<nys-globalfooter> now accepts a set of <ul>s and displays them in columns. This allows for more standard footer layouts. Read the full documentation for link columns on the <nys-globalfooter> component.

<nys-globalfooter agencyName="Office of Information Technology Services">
  <ul>
    <li>
      <span>About</span>
      <ul>
        <li><a href="https://its.ny.gov/about-us">About ITS</a></li>
        <li><a href="https://its.ny.gov/contact-us">Contact</a></li>
        <li><a href="https://its.ny.gov/policies">Policies</a></li>
      </ul>
    </li>
    <li>
      <span>Resources</span>
      <ul>
        <li><a href="https://its.ny.gov/resources">Developer Tools</a></li>
        <li><a href="https://its.ny.gov/accessibility">Accessibility</a></li>
        <li><a href="https://its.ny.gov/privacy">Privacy</a></li>
      </ul>
    </li>
  </ul>
</nys-globalfooter>

Robert Chen expanded linkage.

No more disappearing pagination buttons

The <nys-pagination> component has been updated to no longer hide the "previous" and "next" buttons when you are on the first or last page. This update will now disable these buttons instead of removing them. This results in a more consistent user experience.

<nys-pagination
  id="pagination"
  name="pagination"
  currentPage=4
  totalPages=10
></nys-pagination>

Emily Gorelik disabled the buttons.

Bug fixes

• Update NPM packages for security fixes
• Hide unloaded components before they are processed by JS
• Fix checkbox labels failing accessibility tests
• Unav Header mobile padding fix

🚨 Breaking changes

• none

⚠️ Known issues

• <nys-button> not triggering click on keydown #935

If you notice any other 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.10.1 →

Multiple pages? No problem

The <nys-pagination> component allows you to hook into functionality to present pagination functionality to your apps and sites. For more information, read the full documentation for <nys-pagination> component.

<nys-pagination
  id="pagination"
  name="pagination"
  currentPage=4
  totalPages=10
></nys-pagination>

Emily Gorelik shipped the pagination component!

Modal now available

The <nys-modal> component brings pop up content within a page. Use it for providing context to your existing process flows. For more information, read the full documentation for <nys-modal> component.

<nys-button
    label="Open Modal"
    onclick="showModal();"
    type="button"
    id="open-modal-button"
  ></nys-button>
  <nys-modal
    id="modal1"
    heading="Update Available"
    subheading="A new version of this application is ready to install."
  >
    <p>
      Would you like to install the latest version? Albany ipsum dolor sit
      Empire, Hudson consectetur Adirondack elit, sed do MetroCard tempor
      incididunt ut Capitol et Broadway magna Niagara. Ut enim ad Erie
      veniam, quis nostrud Catskill ullamco Bronx nisi ut LongIsland ex ea
      Cuomo consequat.
    </p>
    <p>
      Would you like to install the latest version? Albany ipsum dolor sit
      Empire, Hudson consectetur Adirondack elit, sed do MetroCard tempor
      incididunt ut Capitol et Broadway magna Niagara. Ut enim ad Erie
      veniam, quis nostrud Catskill ullamco Bronx nisi ut LongIsland ex ea
      Cuomo consequat.
    </p>
    <div slot="actions">
      <nys-button label="Not now" variant="text" onclick="closeModal();"></nys-button>
      <nys-button label="Update" onclick="closeModal();"></nys-button>
    </div>
  </nys-modal>
  <script>
    function showModal() {
      const modal = document.getElementById('modal1');
      if (modal) {
        modal.open = true;
      }
    };
    function closeModal() {
      const modal = document.getElementById('modal1');
      if (modal) {
        modal.open = false;
      }
    };
  </script>