12.1.0-beta.0

Design System [12.1.0-beta.0]

🚨 Breaking

• Fixed inconsistencies in Review heading styles (#3342)
• Fixed inconsistencies in Alert heading styles (#3334)

💅 Changed

• Updated ds-button, ds-hint and ds-inline-error to use the Shadow DOM (#3391)
• Updated ds-autocomplete to allow pass through props into Textfield (#3331)
• Updated USA Banner to match Figma (#3319)

🚀 Added

• Added quote icon for consumption in NoteBox component (#3418)
• Updated Alert to dynamically assign role based on variation (#3366)
• Added test coverage for fetching async data with ds-autocomplete & Autocomplete (#3354, #3351)
• Extended Autocomplete & ds-autocomplete to support grouped items under headers and added stories (#3344, #3352)
• Implemented ds-modal-dialog web component (#3302)
• Added analytics support to web components (#3296)
• Implemented ds-review web component (#3285)

🛠 Fixed

• Pulled in an accessibility fix for react-aria's <HiddenSelect /> (#3452)
• Enabled DateInput to switch between MM/DD and DD/MM formats based on page language (#3451)
• Fixed hintClassName being applied to DOM elements (#3393)
• Standardized inputRef prop types (#3356, #3361)
• Fixed analytics={false} being passed into ds-modal-dialog (#3350)
• Added a fix to prevent double firing of exit event in NativeDialog (#3330)
• Fixed Angular event binding on nested web components (#3327)
• Removed aria-disabled from TabPanel components (#3315)
• Removed ds-tab-panel module (#3304)
• Added the optional hintClassName prop to the useHint interface (#3292)
• Fixed arrow key behavior for disabled Tab components (#3286)
• Added Angular example project and fix Angular web component content issue (#3275)

📦 Internal

• Migrated yarn to npm (#3397)
• Removed outdated humanize-react library (#3380)
• Upgraded Astro from 4.4.8 to 5.1.2 (#3365)
• Increased usage of the isPossibleValue utility and added a spec (#3345)
• Updated Autocomplete tests to skip combinations that trigger a Playwright bug (#3367)
• Upgraded Playwright from 1.31 to 1.49 (#3364)
• Updated snapshots for nightly tests (#3300, #3328, #3293)
• Updated PR Template to reflect new script that updates all browser tests (#3329)
• Enabled --list for custom Playwright test reporter (#3362)
• Formatted example files when template is applied (#3360)
• Added functionality to calculate unit test code coverage (#3359)
• Changed the failure threshold for VRT screenshots (#3353)
• Added missing version to versions.json (#3341)
• Added custom playwright reporter to provide JSON summary of test metrics (#3335)
• Added error handling for missing alias case in sync:from-figma script (#3428)

Medicare.gov Design System [14.1.0-beta.0]

All changes from the core design system and...

💅 Changed

• Updated Pagination Styling for Medicare (#3312)
• Made Medicare URLs language-aware in SimpleFooter (#3466)

🚀 Added

• Added Medicare footer web-component ds-simple-footer (#3405)

CMS.gov Design System [12.1.0-beta.0]

All changes from the core design system and...

💅 Changed

• Swapped bold headers with semibold headers on CMSgov theme (#3291)

Healthcare.gov Design System [16.1.0-beta.0]

All changes from the core design system.

Documentation

💅 Changed

• Updated Angular Example (#3358)

🚀 Added

• Added subcomponents table for web components (#3463)
• Added missing web component sections to several doc site component pages (#3313, #3308)
• Added a web component section to Accordion doc site page (#3307)
• Added ds-drawer to Astro example project (#3399)

🛠 Fixed

• Added default analytics value for empty string searches (#3471)
• Added search results position to search event (#3470)
• Updated link events to point link URLs at link destination (#3469)
• Made Figma use the external link event (#3468)
• Renamed font size story (#3427)
• Removed empty StepList data snapshots (#3403)
• Fixed dead links to old developer docs (#3402)
• Added a preemptive fix for CORS blocking stylesheet access in web component CDN example (#3394)
• Updated the description of the design system package dist folder (#3379)
• Fixed wrong Storybook iframes loading on doc site (#3357)
• Added markdown rendering to web component Storybook docs (#3303)

📦 Internal

• Cleaned up release script (#3429)
• Validated compatibility with different React versions through automated testing (#3407)

12.0.0

For a high-level overview, please read our Release 12.0 blog post

Design System [12.0.0]

🚨 Breaking

• Removed Privacy Settings Dialog (#3083)

Healthcare.gov Design System [16.0.0]

All changes from the core design system.

Medicare.gov Design System [14.0.0]

All changes from the core design system.

12.0.0-beta.0

For a high-level overview, please read our Release 12.0 blog post

Design System [12.0.0-beta.0]

🚨 Breaking

• Removed Privacy Settings Dialog (#3083)

Healthcare.gov Design System [16.0.0-beta.0]

All changes from the core design system.

11.1.0

Design System [11.1.0]

💅 Changed

• Updated the color of the inline tooltip to each theme's base color (#3199)

🚀 Added

• Added ds-filter-chip web component (#3270)
• Added customizable arialabel prop to Tabs component. (#3264)
• Added ds-autocomplete web component (#3257)
• Added ds-drawer web component. (#3256)
• Added ds-tooltip web component (#3249)
• Added ds-tabs web component. (#3234)
• Added ds-step-list web component. (#3215)
• Added Email, Link, RSS, and What's New Icon components (#3202)

🛠 Fixed

• Resolved stylelint errors and updated snapshots (#3281)
• Simplified NPM distribution method for web components (#3262)
• Local state in web components is now maintained when attributes change (#3253)

📦 Internal

• Expanded the clean command with clean:builds subcommand (#3274)
• Added optional bundle analysis to the build command (#3258)
• Updated versions script and added latest patch and release versions (#3233)
• Figma token scope values are now sorted alphabetically (#3226)

CMS.gov Design System [11.1.0]

All changes from the core design system and...

💅 Changed

• Changed headers to Lexend (#3268)
• Changed body copy to Public Sans (#3251, #3276)
• Changed focus color from orchid to copper (#3246)

🚀 Added

• Added Lexend and Public Sans font files to CMS.gov theme (#3250)

Documentation

💅 Changed

• Removed doc site email icon (#3243)

🚀 Added

• Created dedicated stories for the ds-tab-panel web component (#3279)
• Added a shared web components example template and new example project (#3267)
• Added utility actions pattern guidance page (#3198)

📦 Internal

• Added default value overrides to Storybook (#3216)

11.0.1

Design System [11.0.1]

🛠 Fixed

• Reintroduces semibold font weight that was removed in version 11 (#3266)

Healthcare.gov Design System [15.0.1]

All changes from the core design system

Medicare.gov Design System [13.0.1]

All changes from the core design system

11.0.0

For a high-level overview, please read our Release 11.0 blog post

Design System [11.0.0]

🚨 Breaking

• As a result of migrating to Figma (#3138), a number of CSS variables have been changed to increase consistency and facilitate bi-directional syncing between our codebase and the Figma design library. More context can be found in the Release 11 blog post. The specific CSS variables that have been updated, replaced, or added are listed in the section below.

  Details of CSS Variable updates (#3107, #3110, #3111, #3112, #3131, #3133, #3116, #3230)

  • Increased hint text size to match the size of inline-error text, improve legibility, and be consistent with other CMS brands

  • Removed --button_font-weight variable in favor of the following new variables:

    • --font-weight-button-sm
    • --font-weight-button-md
    • --font-weight-button-lg

  • Removed these font variables:

    • --font-sans
    • --font-serif
    • --font-weight-light
    • --font-weight-semibold
    • --typography-body__font-family
    • --typography-heading-2xl__font-size--mobile
    • --typography-heading-2xl__font-size
    • --typography-heading-3xl__font-size--mobile
    • --typography-heading-3xl__font-size
    • --typography-heading-3xl__font-weight
    • --typography-heading-4xl__font-size--mobile
    • --typography-heading-4xl__font-size
    • --typography-heading-4xl__font-weight
    • --typography-heading-5xl__font-size--mobile
    • --typography-heading-5xl__font-size--tablet
    • --typography-heading-5xl__font-size
    • --typography-heading-lg__font-size
    • --typography-heading-lg__font-weight
    • --typography-heading-md__font-size
    • --typography-heading-md__font-weight
    • --typography-heading-sm__font-size
    • --typography-heading-sm__font-weight
    • --typography-heading-xl__font-size
    • --typography-heading__font-family
    • --typography-heading__font-weight

  • Added the following font variables:

    • --font-family-body
    • --font-family-button
    • --font-family-heading
    • --font-family-link
    • --font-weight-body-lg
    • --font-weight-body-md
    • --font-weight-body-sm
    • --font-weight-button-lg
    • --font-weight-button-md
    • --font-weight-button-sm
    • --font-weight-heading-2xl
    • --font-weight-heading-3xl
    • --font-weight-heading-4xl
    • --font-weight-heading-5xl
    • --font-weight-heading-lg
    • --font-weight-heading-md
    • --font-weight-heading-sm
    • --font-weight-heading-xl

  • Added globally inherited font variables:

    • --global__font-family
    • --global__font-size
    • --global__line-height

  • Removed the ds-u-sans-serif and ds-u-serif classes and related variables:

    • --font-sans
    • --font-serif

  • Removed shadow variables:

    • --shadow-base-blur-radius
    • --shadow-base-color
    • --shadow-base-offset-x
    • --shadow-base-offset-y
    • --shadow-base
    • --shadow-focus-inverse
    • --shadow-focus-link
    • --shadow-focus

  • Removed the ds-u-font-weight--semibold utility class

  • Removed USA Banner variables:

    • --usa-banner-gutter-width
      • This variable can continue to be used by teams to modify the component, but we will no longer be providing a default value in the theme files because it is redundant information.
    • --usa-banner__max-width
      • Similar to the previous variable, teams can still use it to change the max width from the default, but we'll no longer be declaring it.
    • --usa-banner-color
      • Same as above. It's still an option for customizing, but we don't declare it ourselves.
    • --usa-banner-link__color
      • Same as above. It's still an option for customizing, but we don't declare it ourselves.
    • --usa-banner-heading__font-family
    • --usa-banner-heading__font-size
    • --usa-banner-heading__line-height
    • --usa-banner-panel__font-family
    • --usa-banner-panel__font-size
    • --usa-banner-panel__line-height

  • Removed the following CSS variables:

    • --form__max-width
    • --form__max-width--small
    • --form__max-width--medium

  • Replaced them with these:

    • --field-max-width
    • --field-max-width--small
    • --field-max-width--medium

  • Removed the following CSS variables:

    • --autocomplete*
    • --dropdown*

  • Split --accordion__border-radius into the following variables to support Figma:

    • --accordion__border-bottom-left-radius
    • --accordion__border-bottom-right-radius
    • --accordion__border-top-left-radius
    • --accordion__border-top-right-radius

  • Healthcare

    • Removed the following CSS variables:
      • --inset__border-width
      • --footer__list-marker-size
      • --accordion-icon__size

  • Medicare

    • Removed --hint__font-size from medicare theme
    • Replaced --choice__translateY with --choice-label__top-offset
    • Replaced --datefield-separator__display with --datefield__hide-separators

• Improved ChoiceList accessibility by preventing nested errors (#3145)

• Removed the onEnter prop from Dialog (#3057)

• Removed ds-u-truncate class (#3021)

• Changed the optional component prop for the React StepList component from accepting keyof JSX.IntrinsicElement to just "a" (#3089)

⚠️ Deprecated

• As part of the Figma migration, there is now a single file for Sass tokens called core-theme.scss (and based on theme, e.g. cmsgov-theme.scss, healthcare-theme.scss, medicare-theme.scss) that you can import instead of core-tokens.scss and core-component-tokens.scss (same pattern applies for the other themes: cmsgov, healthcare, and medicare), but we’ve left those two older files for backwards compatibility. (#3100, #3230)

💅 Changed

• CSS variables in theme CSS files reference other CSS variables (#3135)
• Fixed Link component based on Figma token constraints (#3123)
• Implemented stricter warnings when the isOpen prop isn't used with the Dialog component (#3121)
• Reduced dialog polyfill to bare minimum (#2996)
• Increased Hint text size to match the size of inline-error text
• Standardized and applied the following attributes to <ds-alert>, <ds-choice>, <ds-button>, <ds-dropdown>, and <ds-month-picker> (#3089):
  • analytics
  • analytics-label-override
  • analytics-event-type-override
  • analytics-parent-heading
  • analytics-parent-type
  • label
  • label-class-name
  • label-id
  • hint
  • hint-id
  • requirement-label
  • error-id
  • error-placement
  • error-message
  • error-message-class-name

🚀 Added

• Added cmsds-migrate script for v11 CSS changes as described in the “Breaking” section (above). Attention: use this script to highlight CSS variables that were removed or require replacement. (#3208)
• Added PrintIcon component (#3196)
• Added ds-date-field web component (#3182)
• Added ds-text-field component (#3172)
• Increased scope of Prettier formatting for the design system token package (#3102)
• Added full support for font-family tokens when syncing with Figma (#3101)

🛠 Fixed

• Prevent console error from onAnalyticsEvent attribute rendering to DOM through HelpDrawer (#3210)
• Fixed SCSS token generation and consumption (#3100)
• Removed unused storybook styles, add support for font fallbacks (#3153)
• Removed inversed prop from label-div (#3122)
• Fixed bug causing drawers to always trap focus (#3108)
• Fixed overrides in HelpDrawer, HelpDrawerToggle, and ThirdPartyExternalLink and made side effects consistent across packages (#3157)

📦 Internal

• Deleted Sketch plugin (#3097)
• Updated design system token build scripts to rely on version-controlled JSON source (#2952)

Healthcare.gov Design System [15.0.0]

All changes from the core design system and ...

🚨 Breaking

• In the wake of migrating to Figma (more information can be found in the Release 11 blog post), removed the following CSS variables:
  • --inset__border-width
  • --footer__list-marker-size
  • --accordion-icon__size

🚀 Added

• Improved potential for tree-shaking (#3157)

🛠 Fixed

• Defined a better return type for defaultMenuLinks (#3211)

Medicare.gov Design System [13.0.0]

All changes from the core design system and...

🚨 Breaking

• Increased the size of form-field hint text to be consistent with other CMS brands and to improve legibility for Medicare.gov users (#3110, #3116)
• In the wake of migrating to Figma (more information can be found in the Release 11 blog post), made the following changes to CSS variables:
  • Removed --hint__font-size
  • Replaced --choice__translateY with --choice-label__top-offset
  • Replaced --datefield-separator__display with --datefield__hide-separators

🛠 Fixed

• Fixed overrides in HelpDrawer, HelpDrawerToggle, and ThirdPartyExternalLink (#3157)

Documentation

💅 Changed

• Component and pattern guidance found on design.cms.gov now link to Figma pages (#3189)
• Design.cms.gov references new JSON tokens (#3098)
• The ThirdPartyExternalLink component is used on design.cms.gov (#2522)

🚀 Added

• Updated third party external lin...

11.0.0-beta.1

For a high-level overview, please read our Release 11.0 blog post

Design System [11.0.0-beta.1]

🚨 Breaking

• Undo the removal of the <PrivacySettingsDialog> dialog (6280081)

🚀 Added

• Add cmsds-migrate script for v11 CSS changes as described in the previous beta release notes. Attention: use this script to highlight CSS variables that were removed or require replacement. (#3208)

🛠 Fixed

• Prevent console error from onAnalyticsEvent attribute rendering to DOM through HelpDrawer (#3210)

Healthcare.gov Design System [15.0.0-beta.1]

All changes from the core design system and...

🛠 Fixed

• Define a better return type for defaultMenuLinks (#3211)

Documentation

🛠 Fixed

• Render default stories for Modal Dialog and Drawer in Storybook (#3203)

10.1.3

Design System [10.1.3]

🛠 Fixed

• Fixed bug causing drawers to always trap focus (#3108)
• Fix onAnalyticsEvent prop bleeding into <dialog> DOM elements through HelpDrawer. (#3210)
• Fix Define a better return type for defaultMenuLinks (#3211)

Healthcare.gov Design System [14.1.3]

All changes from the core design system.

Medicare.gov Design System [12.1.3]

All changes from the core design system.

11.0.0-beta.0

For a high-level overview, please read our Release 11.0 blog post

Design System [11.0.0-beta.0]

🚨 Breaking

• As a result of migrating to Figma (#3138), a number of CSS variables have been changed to increase consistency and facilitate bi-directional syncing between our codebase and the Figma design library. More context can be found in the Release 11 blog post. The specific CSS variables that have been updated, replaced, or added are listed in the section below.

  Details of CSS Variable updates (#3107, #3110, #3111, #3112, #3131, #3133)

  • Removed --button_font-weight variable in favor of the following new variables:

    • --font-weight-button-sm
    • --font-weight-button-md
    • --font-weight-button-lg

  • Removed these font variables:

    • --font-sans
    • --font-serif
    • --font-weight-light
    • --font-weight-semibold
    • --typography-body__font-family
    • --typography-heading-2xl__font-size--mobile
    • --typography-heading-2xl__font-size
    • --typography-heading-3xl__font-size--mobile
    • --typography-heading-3xl__font-size
    • --typography-heading-3xl__font-weight
    • --typography-heading-4xl__font-size--mobile
    • --typography-heading-4xl__font-size
    • --typography-heading-4xl__font-weight
    • --typography-heading-5xl__font-size--mobile
    • --typography-heading-5xl__font-size--tablet
    • --typography-heading-5xl__font-size
    • --typography-heading-lg__font-size
    • --typography-heading-lg__font-weight
    • --typography-heading-md__font-size
    • --typography-heading-md__font-weight
    • --typography-heading-sm__font-size
    • --typography-heading-sm__font-weight
    • --typography-heading-xl__font-size
    • --typography-heading__font-family
    • --typography-heading__font-weight

  • Added the following font variables:

    • --font-family-body
    • --font-family-button
    • --font-family-heading
    • --font-family-link
    • --font-weight-body-lg
    • --font-weight-body-md
    • --font-weight-body-sm
    • --font-weight-button-lg
    • --font-weight-button-md
    • --font-weight-button-sm
    • --font-weight-heading-2xl
    • --font-weight-heading-3xl
    • --font-weight-heading-4xl
    • --font-weight-heading-5xl
    • --font-weight-heading-lg
    • --font-weight-heading-md
    • --font-weight-heading-sm
    • --font-weight-heading-xl

  • Added globally inherited font variables:

    • --global__font-family
    • --global__font-size
    • --global__line-height

  • Removed the ds-u-sans-serif and ds-u-serif classes and related variables:

    • --font-sans
    • --font-serif

  • Removed shadow variables:

    • --shadow-base-blur-radius
    • --shadow-base-color
    • --shadow-base-offset-x
    • --shadow-base-offset-y
    • --shadow-base
    • --shadow-focus-inverse
    • --shadow-focus-link
    • --shadow-focus

  • Removed the ds-u-font-weight--semibold utility class

  • Removed USA Banner variables:

    • --usa-banner-gutter-width
      • This variable can continue to be used by teams to modify the component, but we will no longer be providing a default value in the theme files because it is redundant information.
    • --usa-banner__max-width
      • Similar to the previous variable, teams can still use it to change the max width from the default, but we'll no longer be declaring it.
    • --usa-banner-color
      • Same as above. It's still an option for customizing, but we don't declare it ourselves.
    • --usa-banner-link__color
      • Same as above. It's still an option for customizing, but we don't declare it ourselves.
    • --usa-banner-heading__font-family
    • --usa-banner-heading__font-size
    • --usa-banner-heading__line-height
    • --usa-banner-panel__font-family
    • --usa-banner-panel__font-size
    • --usa-banner-panel__line-height

  • Removed the following CSS variables:

    • --form__max-width
    • --form__max-width--small
    • --form__max-width--medium

  • Replaced them with these:

    • --field-max-width
    • --field-max-width--small
    • --field-max-width--medium

  • Removed the following CSS variables:

    • --autocomplete*
    • --dropdown*

  • Split --accordion__border-radius into the following variables to support Figma:

    • --accordion__border-bottom-left-radius
    • --accordion__border-bottom-right-radius
    • --accordion__border-top-left-radius
    • --accordion__border-top-right-radius

  • Healthcare

    • Removed the following CSS variables:
      • --inset__border-width
      • --footer__list-marker-size
      • --accordion-icon__size

  • Medicare

    • Increased hint text size to match the size of inline-error text, improve legibility, and be consistent with other CMS brands (#3110, #3116)
    • Removed --hint__font-size from medicare theme
    • Replaced --choice__translateY with --choice-label__top-offset
    • Replaced --datefield-separator__display with --datefield__hide-separators

• Improved ChoiceList accessibility by preventing nested errors (#3145)

• Removed the <PrivacySettingsDialog> dialog (#3083)

• Removed the onEnter prop from Dialog (#3057)

• Removed ds-u-truncate class (#3021)

• Changed the optional component prop for the React StepList component from accepting keyof JSX.IntrinsicElement to just "a" (#3089)

💅 Changed

• CSS variables in theme CSS files reference other CSS variables (#3135)
• Fixed Link component based on Figma token constraints (#3123)
• Implemented stricter warnings when the isOpen prop isn't used with the Dialog component (#3121)
• Reduced dialog polyfill to bare minimum (#2996)
• Standardized and applied the following attributes to <ds-alert>, <ds-choice>, <ds-button>, <ds-dropdown>, and <ds-month-picker> (#3089):
  • analytics
  • analytics-label-override
  • analytics-event-type-override
  • analytics-parent-heading
  • analytics-parent-type
  • label
  • label-class-name
  • label-id
  • hint
  • hint-id
  • requirement-label
  • error-id
  • error-placement
  • error-message
  • error-message-class-name

🚀 Added

• Added PrintIcon component (#3196)
• Added ds-date-field web component (#3182)
• Added ds-text-field component (#3172)
• Increased scope of Prettier formatting for the design system token package (#3102)
• Added full support for font-family tokens when syncing with Figma (#3101)

🛠 Fixed

• Fixed SCSS token generation and consumption (#3100)
• Removed unused storybook styles, add support for font fallbacks (#3153)
• Removed inversed prop from label-div (#3122)
• Fixed bug causing drawers to always trap focus (#3108)

📦 Internal

• Deleted Sketch plugin (#3097)
• Updated design system token build scripts to rely on version-controlled JSON source (#2952)

💅 Changed

• Increased Hint text size to match the size of inline-error text

🛠 Fixed

• Fixed overrides in HelpDrawer, HelpDrawerToggle, and ThirdPartyExternalLink and made side effects consistent across packages (#3157)

Healthcare.gov Design System [15.0.0-beta.0]

All changes from the core design system and ...

🚨 Breaking

• In the wake of migrating to Figma (more information can be found in the Release 11 blog post), removed the following CSS variables:
  • --inset__border-width
  • --footer__list-marker-size
  • --accordion-icon__size

🚀 Added

• Improved potential for tree-shaking (#3157)

Medicare.gov Design System [13.0.0-beta.0]

All changes from the core design system and...

🚨 Breaking

• Increased the size of form-field hint text to be consistent with other CMS brands and to improve legibility for Medicare.gov users (#3110, #3116)
• In the wake of migrating to Figma (more information can be found in the Release 11 blog post), made the following changes to CSS variables:
  • Removed --hint__font-size
  • Replaced --choice__translateY with --choice-label__top-offset
  • Replaced --datefield-separator__display with --datefield__hide-separators

🛠 Fixed

• Fixed overrides in HelpDrawer, HelpDrawerToggle, and ThirdPartyExternalLink (#3157)

Documentation

💅 Changed

• Component and pattern guidance found on design.cms.gov now link to Figma pages (#3189)
• Design.cms.gov references new JSON tokens (#3098)
• The ThirdPartyExternalLink component is used on design.cms.gov (#2522)

🚀 Added

• Updated third party external link docs to include PDF guidance (#3156)
• Added links to analytics docs from prop descriptions in Storybook (#3124)
• Added Form Validation pattern guidance to the docs site (#3093)

🛠 Fixed

• Fixed broken links in COMPONENT_MATURITY.md (...

9.0.3

Design System [9.0.3]

🛠 Fixed

• Export the new Hint component (#3096)
• Export the new useDialog hook (#3130)

Healthcare.gov Design System [13.0.3]

All changes from the core design system

Medicare.gov Design System [11.0.3]

All changes from the core design system