Release notes

npm package: @hashicorp/design-system-components

7.0.0

Major changes

Conducted a one-off mechanical rename in @hashicorp/design-system-components of internal component CSS variables. Consumers consuming or overriding HDS CSS variables will need to update --hds-* references to --hds-var-*.

AdvancedTable - Changed the component CSS custom property prefix from --hds-* to --hds-var-*.

hds-advanced-table-sticky-column-offset → hds-var-advanced-table-sticky-column-offset

Accordion - Changed the component CSS custom property prefix from --hds-* to --hds-var-*.

hds-accordion-item-button-focus-ring-inset-hds → hds-var-accordion-item-button-focus-ring-inset-hds
hds-accordion-item-content-padding-bottom → hds-var-accordion-item-content-padding-bottom
hds-accordion-item-content-padding-left → hds-var-accordion-item-content-padding-left
hds-accordion-item-content-padding-right → hds-var-accordion-item-content-padding-right
hds-accordion-item-content-padding-top → hds-var-accordion-item-content-padding-top
hds-accordion-item-toggle-gap → hds-var-accordion-item-toggle-gap
hds-accordion-item-toggle-icon-size → hds-var-accordion-item-toggle-icon-size
hds-accordion-item-toggle-padding-bottom → hds-var-accordion-item-toggle-padding-bottom
hds-accordion-item-toggle-padding-left → hds-var-accordion-item-toggle-padding-left
hds-accordion-item-toggle-padding-right → hds-var-accordion-item-toggle-padding-right
hds-accordion-item-toggle-padding-top → hds-var-accordion-item-toggle-padding-top

AppFooter - Changed the component CSS custom property prefix from --hds-* to --hds-var-*.

hds-app-footer-status-icon-color → hds-var-app-footer-status-icon-color

AppSideNav - Changed the component CSS custom property prefix from --hds-* to --hds-var-*.

hds-app-side-nav-animation-delay → hds-var-app-side-nav-animation-delay
hds-app-side-nav-animation-duration → hds-var-app-side-nav-animation-duration
hds-app-side-nav-animation-easing → hds-var-app-side-nav-animation-easing
hds-app-side-nav-toggle-button-width → hds-var-app-side-nav-toggle-button-width
hds-app-side-nav-width-expanded → hds-var-app-side-nav-width-expanded
hds-app-side-nav-width-fixed → hds-var-app-side-nav-width-fixed
hds-app-side-nav-width-minimized → hds-var-app-side-nav-width-minimized

CodeBlock - Changed the component CSS custom property prefix from --hds-* to --hds-var-*.

hds-code-block-color-{property} → hds-var-code-block-color-{property}

FilterBar - Changed the component CSS custom property prefix from --filter-bar to --hds-var-filter-bar.

--filter-bar-filters-dropdown-height → --hds-var-filter-bar-filters-dropdown-height

Flyout - Changed the component CSS custom property prefix from --hds-* to --hds-var-*.

hds-app-side-nav-width-minimized → hds-var-app-side-nav-width-minimized

Form - Changed the component CSS custom property prefix from --hds-* to --hds-var-*.

hds-form-section-max-width → hds-var-form-section-max-width
hds-form-section-multi-field-group-item-width → hds-var-form-section-multi-field-group-item-width

KeyValueInputs - Changed the component CSS custom property prefix from --hds-* to --hds-var-*.

hds-key-value-inputs-column-index → hds-var-key-value-inputs-column-index
hds-key-value-inputs-columns → hds-var-key-value-inputs-columns

SuperSelect - Changed the component CSS custom property prefix from --hds-* to --hds-var-*.

hds-form-super-select-dropdown-max-width → hds-var-form-super-select-dropdown-max-width
hds-form-super-select-selected-text → hds-var-form-super-select-selected-text
hds-form-super-select-selected-text-display → hds-var-form-super-select-selected-text-display

SegmentedGroup - Changed the component CSS custom property prefix from --hds-* to --hds-var-*.

hds-segmented-group-max-width → hds-var-segmented-group-max-width

Stepper Nav - Changed the component CSS custom property prefix from --hds-* to --hds-var-*.

hds-stepper-nav-progress-bar-width → hds-var-stepper-nav-progress-bar-width

Tag - Changed the component CSS custom property prefix from --hds-* to --hds-var-*.

hds-tag-focus-ring-inset-left-cds → hds-var-tag-focus-ring-inset-left-cds
hds-tag-focus-ring-inset-right-cds → hds-var-tag-focus-ring-inset-right-cds

Tooltip - Changed the component CSS custom property prefix from --token-* to --hds-var-*.

token-tooltip-max-width → hds-tooltip-max-width

Flex - Changed the layout CSS custom property prefix from --hds-* to --hds-var-*.

hds-layout-flex-column-gap → hds-var-layout-flex-column-gap
hds-layout-flex-row-gap → hds-var-layout-flex-row-gap

Grid - Changed the layout CSS custom property prefix from --hds-* to --hds-var-*.

hds-layout-grid-column-fill-type → hds-var-layout-grid-column-fill-type
hds-layout-grid-column-gap → hds-var-layout-grid-column-gap
hds-layout-grid-column-min-width → hds-var-layout-grid-column-min-width
hds-layout-grid-column-span → hds-var-layout-grid-column-span
hds-layout-grid-column-span-lg → hds-var-layout-grid-column-span-lg
hds-layout-grid-column-span-md → hds-var-layout-grid-column-span-md
hds-layout-grid-column-span-sm → hds-var-layout-grid-column-span-sm
hds-layout-grid-column-span-xl → hds-var-layout-grid-column-span-xl
hds-layout-grid-column-span-xxl → hds-var-layout-grid-column-span-xxl
hds-layout-grid-column-width-lg → hds-var-layout-grid-column-width-lg
hds-layout-grid-column-width-md → hds-var-layout-grid-column-width-md
hds-layout-grid-column-width-sm → hds-var-layout-grid-column-width-sm
hds-layout-grid-column-width-xl → hds-var-layout-grid-column-width-xl
hds-layout-grid-column-width-xxl → hds-var-layout-grid-column-width-xxl
hds-layout-grid-row-gap → hds-var-layout-grid-row-gap
hds-layout-grid-row-span → hds-var-layout-grid-row-span
hds-layout-grid-row-span-lg → hds-var-layout-grid-row-span-lg
hds-layout-grid-row-span-md → hds-var-layout-grid-row-span-md
hds-layout-grid-row-span-sm → hds-var-layout-grid-row-span-sm
hds-layout-grid-row-span-xl → hds-var-layout-grid-row-span-xl
hds-layout-grid-row-span-xxl → hds-var-layout-grid-row-span-xxl

#4076

AdvancedTable - Added new value secondary-muted for the @color argument in ThContextMenu.

secondary-muted is identical to secondary for HDS themes, but differs for Carbon themes

Button - Added new value secondary-muted for the @color argument

CodeBlock - Updated footer button @color from secondary to secondary-muted

Dropdown - Added new value secondary-muted for the @color argument in ToggleButton and ToggleIcon

FilterBar - Updated toggle @color from secondary to secondary-muted in ActionsDropdown and FiltersDropdown and applied filters button

SuperSelect - Updated AfterOptions show and clear button @color from secondary to secondary-muted

CodeEditor - Removed dark theme modifiers and replaced them with theme agnostic versions

Removed the hdsDarkHighlightStyle style modifier and replaced it with a theme-agnostic hdsHighlightStyle modifier
Removed the hdsDark style modifier and replaced it with a theme-agnostic hdsTheme modifier

Added the hds-form-control-border and hds-form-control-invalid-outline sass mixins

RadioCard - Updated RadioCardDescription element from HdsTextBody to a HTMLSpanElement

RadioCard - Updated RadioCardLabel element from HdsTextDisplay to a HTMLSpanElement

AdvancedTable - Removed hds-typography-body-200 and hds-font-weight-semibold classes from hds-advanced-table__th-content-text element in AdvancedTableTh

Table - Removed hds-typography-body-200 and hds-font-weight-regular classes from hds-table__td element in TableTd

Table - Removed hds-typography-body-200 and hds-font-weight-semibold classes from hds-table__td element in TableTh and TableThSort

Tooltip - Replaced custom arrow with hds-tooltip-pointer class with native popover arrow

DialogPrimitive - Updated internal text element from HdsTextBody to a HTMLDivElement

Removed the hds-interactive-dark-theme mixin

Updated the hds-focus-ring-basic sass mixin Added the hds-focus-ring-advanced sass mixin Removed the hds-focus-ring-with-pseudo-element and hds-focus-ring-with-pseudo-element-focus-always-visible sass mixins

#4076

Added HdsTheming service for theming

Added HdsIconRegistry service for async icons loading

Added @ibm/plex-[mono|sans] packages as dependencies

Added design-system-plex-fonts.scss to the packages/components styles Included subset of IBM Plex fonts to the dist/public folder of the addon

Added a hds-apply-only-if-carbon sass mixin to apply styles only for Carbon themes

ThemeContext - Added headless component

Icon - Made significant changes to icon loading and available icons to support Carbon themes

Changed the way that icons are loaded (from SVG sprite to dynamic importing and generation at runtime)
Added support for loading Carbon icons when the user is using a Carbon theme
The full SVG sprite is no longer injected into the consuming application
Consumers can safely remove the flightIconsSpriteLazyEmbed setting in their config/environment.js file.

#4076

Patch changes

🔄 Updated dependencies:

@hashicorp/design-system-tokens@6.0.0
@hashicorp/flight-icons@5.3.0

6.6.0

6.6.0 documentation

Minor changes

Form::MaskedInput - Fixed a few accessibility issues in Form::MaskedInput::Base and Form::MaskedInput::Field, including:

Changed @visibilityToggleAriaLabel to have a static value for visible and hidden states. Added the aria-pressed attribute to the visibility toggle button to communicate state.
Added @visibilityToggleAriaMessageTextWhenVisible argument to set a custom message for the visible state.

Form::TextInput - Fixed a few accessibility issues in Form::TextInput::Field, including:

Changed @visibilityToggleAriaLabel to have a static value for visible and hidden states. Added the aria-pressed attribute to the visibility toggle button to communicate state.
Added @visibilityToggleAriaMessageTextWhenVisible argument to set a custom message for the visible state.

Form::VisibilityToggle - Added @ariaMessageTextWhenVisible argument to set a message for the visible state.

#4118

Tabs - Added arguments to support customizing the icon on a Tab, including:

@iconColor to set an icon color
@iconTitle to add accessible text to an icon

#4157

Patch changes

AppFooter - Removed unused @color property from [AF].Link contextual component

#4099

CodeBlock - Added extra right-side padding around code when copy button is enabled preventing overlap when text-wrapping is enabled and allowing users to scroll farther to the right to view all code

#4132

Form::Fieldset - Added missing @id argument to the component signature.

#4107

Dropdown - Set text alignment of Title and Description to left explicitly to prevent accidental override

#4134

Time - Removed unused @isoUtcString argument

#4108

Form::KeyValueInputs - Removed unused @ariaLabel argument from [F].AddRowButton contextual component

#4114

6.5.1

6.5.1 documentation

Patch changes

🔄 Updated dependencies:

@hashicorp/flight-icons@5.2.0

6.5.0

6.5.0 documentation

Minor changes

SegmentedGroup - Added SuperSelect and SuperSelectMultiple as yielded contextual components.

SegmentedGroup - Added isFullWidth and maxWidth arguments.

#4008

AdvancedTable - Updated the resize column behavior to support cascading resizes while guaranteeing that columns will never inadvertently shrink below the size of their container.

#4020

Table - Added .hds-table__tr--is-selected class to table rows when they are selected.

AdvancedTable - Added .hds-advanced-table__tr--is-selected class to table rows when they are selected.

#4021

Patch changes

FilterBar - Added support for ActionsGeneric wrapping to new line

#4034

AdvancedTable - Fixed bug where the bottom scroll indicator was always present if reordering was enabled.

#4042

AdvancedTable - Fixed issue where keyboard order did not match visual order after sorting the table.

#4044

StepperNav - Added screen reader text for step number

StepperList - Added screen reader text for step number

#3993

AdvancedTable - Fixed an issue where clicking a cell scrolled the page to center that cell

#4017

AdvancedTable - Updated reorder handle to not be visible on resize handle hover / focus

AdvancedTable - FIxed a bug where tooltips in the table header would be cut off behind the empty state message.

#4038

🔄 Updated dependencies:

@hashicorp/flight-icons@5.1.0

6.4.0

6.4.0 documentation

Minor changes

FilterBar - Added a searchAriaLabel feature to expose the value of the search input aria-label, allowing the value to be customized

#3980

6.3.0

6.3.0 documentation

Minor changes

AppFooter - Exported THEMES constant.

#3946

Alert - Deprecated the Generic yielded block which renders below actions and added GenericContent and GenericFooter yielded blocks for including custom content either above or below Alert actions.

#3932

Patch changes

StepperList - Fixed description and content contextual blocks to be hidden if conditionally empty

#3899

Toggle - Added the aria-checked attribute to the input for accessibility. It is synced with the checked attribute.

#3918

Pagination - Added keyboard focus management at the beginning and end of pagination. When an arrow button becomes disabled after clicking because a boundary has been reached, focus moves to the opposite arrow button.

#3917

Modal - Fixed issue causing Modal to close unexpectedly by checking that a click on the Overlay both starts and ends within the Overlay before closing

#3923

SegmentedGroup - Fixed border radius styling issue of icon-only Dropdowns when used within SegmentedGroup

#3945

Flyout - Replaced custom box shadow with standard elevation-overlay-box-shadow token.

Form Primitives - Replaced rendering of text via HDS Text component and used standard HTML tags, then updated CSS styles to use newly added component-level design tokens.

Components updated:

FormCharacterCount
FormError
FormHelperText
FormIndicator
FormLabel
FormLegend

IconTile - Replaced [product]-colored icon with standard [product] icon in @logo="[product]" variant.

LinkStandalone - Set explicit secondary hover state color to avoid possible overrides.

Pagination - Multiple changes:

Added extra modifier classes hds-pagination--numbered/hds-pagination—compact to variants.
Removed extra whitespace in label for PaginationSizeSelector.

Tag - Multiple changes:

Added extra modifier classes hds-tag--is-interactive/hds-tag--is-static to variants.
Fixed classes selectors for focus state (no visible changes).

#3947

🔄 Updated dependencies:

@hashicorp/design-system-tokens@5.1.0

6.2.1

6.2.1 documentation

Patch changes

Dropdown - Fixed vertical alignment between text and Badge in DropdownListItemInteractive

#3889

CodeBlock - Translated strings for height toggle button text

#3895

CopySnippet - Fixed a11y issue by adding @ariaMessageText argument to an aria-live region to announce to screen readers when content has been copied. Added handling for copy to clipboard error state in ariaMessageText

CopyButton - Added handling for copy to clipboard error state in ariaMessageText

#3890

Stepper::Nav - Refactored classes for step to removed unneeded interactive classes

#3885

HdsAppFooter - Switched usage of inline styles with ember-style-modifier.

HdsBreadcrumbItem - Switched usage of inline styles with ember-style-modifier.

HdsClipboard Modifier - Switched usage of setAttribute for setProperty when updating a style value.

#3856 - Thanks @kgriffcodes for the contribution! 🙏

6.2.0

6.2.0 documentation

Minor changes

AdvancedTable - Replaced custom keyboard navigation modifiers with the Composite utility component.

#3818

AdvancedTable - Added support for allowing a pinnable first column and reorderable columns at the same time.

#3707

AdvancedTable - Added generic types for @model values.

#3699

Composite - Added a new utility component that enables accessible arrow-key keyboard navigation for complex components, such as Tabs and AdvancedTable.

#3649

Patch changes

CopySnippet - Translated aria-label string for button.

#3816

AdvancedTable - Fixed typing for sticky first-column cells by exposing isStickyColumn in the yielded table-cell API and by passing an explicit parentId value when rendering row header cells.

Form::Indicator - Fixed invocation of HdsTextBody to use named arguments, which prevented incorrect argument forwarding.

Form::MaskedInput - Fixed element typing to match the underlying control element (input or textarea) instead of a generic HTMLElement.

Form::Textarea - Fixed element typing to HTMLTextAreaElement for stricter and more accurate Glint checks.

Table::ThSort - Fixed element typing to HTMLTableCellElement to reflect the actual rendered table-cell element.

#3810 - Thanks @aklkv for the contribution! 🙏

AdvancedTable - Converted component to gts format.

#3797

Tag - Fixed a runtime error when ResizeObserver is undefined (e.g. SSR).

#3839

CopySnippet - Translated aria-label string for button.

#3816

KeyValueInputs - Translated strings for DeleteRowButton and Field screen reader text.

#3823

6.1.1

6.1.1 documentation

Patch changes

KeyValueInputs - Translated strings for the KeyValueInputs AddRowButton ariaLabel and description text.

#3681

Checkbox - Fixed CheckboxField signature element to be HTMLInputElement instead of HTMLElement.

FileInput - Fixed FileInputField signature element to be HTMLInputElement instead of HTMLElement.

Radio - Fixed RadioField signature element to be HTMLInputElement instead of HTMLElement.

Select - Fixed SelectField signature element to be HTMLInputElement instead of HTMLElement.

TextInput - Fixed TextInputField signature element to be HTMLInputElement instead of HTMLElement.

Textarea - Fixed TextareaField signature element to be HTMLInputElement instead of HTMLElement.

Toggle - Fixed ToggleField signature element to be HTMLInputElement instead of HTMLElement.

#3700

AdvancedTable - Replaced model-based state with a DDAU architecture, improving isolation and decoupling row/column logic.

#3546

Pagination - Translated strings for PaginationCompact and PaginationNumbered ariaLabels. Translated strings for PaginationNavArrow ariaLabels and button text.

#3781

Table - Converted component to gts format.

#3607

StepperList - Translated strings for Step status value types

StepperNav - Translated strings for status value types

#3727

AppFooter - Translated strings for AppFooterStatusLink status value types

#3729

AdvancedTable - Translated strings for ThSelectable ariaLabel and context menu Dropdown ToggleIcon

Table - Translated string for ThSelectable ariaLabel

#3730

🔄 Updated dependencies:

@hashicorp/flight-icons@5.0.0
@hashicorp/design-system-tokens@5.0.0

6.1.0

6.1.0 documentation

Minor changes

FilterBar - Added support for an array of values for the generic filter type data

FilterBar - Added @onClear argument to FilterGroup contextual component

#3591

PopoverPrimitive - Added @onFocusOut argument to manage focus for dynamic popover content and prevent the popover from closing when content changes

Dropdown - Added @onFocusOut argument to manage focus for dynamic dropdown content and prevent the dropdown from closing when content changes

FilterBar - Added @onFocusOut argument to the FiltersDropdown to help manage focus for dynamic dropdown content and prevent the dropdown from closing when content changes

RichTooltip - Added @onFocusOut argument to manage focus for dynamic tooltip content and prevent the tooltip from closing when content changes

#3571

Upgraded ember-truth-helpers from 4.0.3 to 5.0.0

Upgraded @ember/test-waiters from 3.1.0 to 4.1.1

#3609

Patch changes

AppHeader - Converted component to gts format.

#3580

Checkbox - Converted component to gts format.

#3585

ApplicationState - Converted component to gts format.

#3605

RadioCard - Converted component to gts format.

#3597

FormLayout - Converted components to gts format.

#3614

CodeEditor - Converted component to gts format.

#3646

AppFooter - Removed usage of hdsLinkToModels and hdsLinkToQuery helpers, instead forward the arguments to HdsLinkInline.

AppHeader - Removed usage of hdsLinkToModels and hdsLinkToQuery helpers, instead forward the arguments to HdsInteractive.

Button - Removed usage of hdsLinkToModels and hdsLinkToQuery helpers, instead forward the arguments to HdsInteractive.

LinkInline - Removed usage of hdsLinkToModels and hdsLinkToQuery helpers, instead forward the arguments to HdsInteractive.

LinkStandalone - Removed usage of hdsLinkToModels and hdsLinkToQuery helpers, instead forward the arguments to HdsInteractive.

Tag - Removed usage of hdsLinkToModels and hdsLinkToQuery helpers, instead forward the arguments to HdsInteractive.

#3621

Flex - Converted component to gts format.

#3625

AppFrame - Converted component to gts format.

#3581

KeyValueInputs - Converted component to gts format.

#3619

PopoverPrimitive - Converted component to gts format.

#3600

Tabs - Converted component to gts format.

#3635

FormCharacterCount - Converted component to gts format. FormError - Converted component to gts format. FormField - Converted component to gts format. FormFieldset - Converted component to gts format. FormHelperText - Converted component to gts format. FormIndicator - Converted component to gts format. FormLabel - Converted component to gts format. FormLegend - Converted component to gts format. FormVisibilityToggle - Converted component to gts format.

#3554

Accordion - Converted component to gts format.

#3567

Toggle - Converted component to gts format.

#3593

Stepper::List - Converted component to gts format.

Stepper::Nav - Converted component to gts format.

Stepper::Indicator - Converted component to gts format.

#3636

Modal - Converted the component to gts format.

#3573

CodeBlock - Converted component to gts format.

#3640

CopyButton - Converted component to gts format.

CopySnippet - Converted component to gts format.

#3589

Flyout - Converted component to gts format.

#3574

FileInput - Converted component to gts format.

#3586

AppSideNav - Converted component to gts format.

#3639

DisclosurePrimitive - Converted component to gts format.

#3542

Reveal - Converted component to gts format.

#3577

Pagination - Converted component to gts format.

#3628

PageHeader - Converted component to gts format.

#3627

Radio - Converted component to gts format.

#3582

IconTile - Converted component to gts format.

#3578

Breadcrumb - Converted component to gts format.

#3620

Tooltip - Fixed issue where showing the Tooltip caused page layout shift by reducing the width of the Tooltip container from 100% to the Tooltip max width of 280px.

#3651

Dropdown - Converted component to gts format.

#3606

MaskedInput - Converted component to gts format.

#3615

SuperSelect - Converted component to gts format.

#3617

Select - Converted component to gts format.

#3616

TextInput - Converted component to gts format.

#3596

Time - Converted component to gts format.

#3637

AppFooter - Translated strings for AppFooter ariaLabel and AppFooterLegalLinks ariaLabel

#3658

RichTooltip - Converted component to gts format.

#3631

Textarea - Converted component to gts format.

#3594

Grid - Converted component to gts format.

#3626

Card - Converted component to gts format.

#3543

DialogPrimitive - Converted component to gts format.

#3544

AppFooter - Converted component to gts format.

#3579

Tag - Converted component to gts format.

#3576

FilterBar - Converted component to gts format.

#3648

PopoverPrimitive - Set anchoredPositionOptions argument on setupPrimitivePopover modifier to optional

#3668

Toast - Converted component to gts format.

#3529

AdvancedTable - Explicitly set table header tooltip placement to below the tooltip button.

#3659

🔄 Updated dependencies:

@hashicorp/flight-icons@4.2.1
@hashicorp/design-system-tokens@4.0.1

6.0.0

6.0.0 documentation

Major changes

Removed ember-engines as a peer dependency, and added the hds-link-to-external utility. If your application uses Ember engines, it is now necessary to add a configuration to the app.js file.

import LinkToExternal from "ember-engines/components/link-to-external";
import { setLinkToExternal } from "@hashicorp/design-system-components/utils/hds-link-to-external";

setLinkToExternal(LinkToExternal);

#3429 - Thanks @meirish for the contribution! 🙏

SideNav - removed the component.

#3541

Minor changes

Breadcrumb - Added @href argument to Breadcrumb::Item.

Interactive - Refactored the component to use the hds-link-to-external utility. If your application uses Ember engines, it is now necessary to add a configuration to the app.js file.

import LinkToExternal from "ember-engines/components/link-to-external";
import { setLinkToExternal } from "@hashicorp/design-system-components/utils/hds-link-to-external";

setLinkToExternal(LinkToExternal);

#3429 - Thanks @meirish for the contribution! 🙏

LayoutGridItem - Added responsive options to the @colspan and @rowspan arguments. Supported views include: "sm", "md", "lg", "xl", and "xxl".`

#3438

FilterBar - Added FilterBar component and related sub-components

AdvancedTable - Added support for filtering within the table with new actions named block and FilterBar contextual component

AdvancedTable - Added a named block emptyState and support for displaying content in the table when the model length is 0

#3386

LayoutGrid - Added responsive column width options to the @columnWidth argument. Supported views include: "sm", "md", "lg", "xl", and "xxl".

#3438

Text - Converted component and all sub-components to gts

#3478

Added the @codemirror/autocomplete to the re-exported CodeMirror packages.

#3552

Badge - Converted component to .gts format

#3445

Updated ember-intl to version 8.0.0 and changed the peer dependency requirement from ^7.3.0 to ^8.0.0 || ^7.3.0"

#3460

SuperSelect - Updated ember-power-select library to 8.12.0 and replaced usage of PowerSelectMultiple to PowerSelect with @multiple set to true

#3345 - Thanks @RobbieTheWagner for the contribution! 🙏

Patch changes

TooltipButton - Converted component to gts format

#3488

ButtonSet - Converted ButtonSet to gts

#3492

Alert - converted component and subcomponents to gts format.

#3524

AdvancedTable - Updated HdsIntlService service declarations to align how services are declared

AppSideNav - Updated router service declaration to align how services are declared

CodeEditor - Updated HdsIntlService service declaration in CodeEditor modifier to align how services are declared

CopyButton - Updated HdsIntlService service declaration to align how services are declared

DismissButton - Updated HdsIntlService service declaration to align how services are declared

MaskedInput - Updated HdsIntlService service declaration to align how services are declared

Pagination - Updated HdsIntlService service declaration for PaginationInfo to align how services are declared

Table - Updated HdsIntlService service declarations to align how services are declared

#3484

Table - Fixed a bug in the cleanup logic of selectable rows where data updates caused the internal selection state to be incorrectly reset.

#3480

BadgeCount - Converted component to gts format

#3477

LinkInline - converted component to gts format.

LinkStandalone - converted component to gts format.

#3517

DismissButton - Converted component to gts format

#3476

Separator - Converted component to gts

#3490

Button - converted component to gts format.

#3518

Interactive - Converted component to gts format.

#3514

AppHeader - Fixed issue with disabled styles for nested elements in AppHeader not applying to non-HDS components when AppSideNav is open in mobile view

#3467

AppSideNav - Fixed an a11y issue by preventing a screenreader from reading content outside the menu when expanded on narrow devices.

#3470

Yield - Converted component to gts format

#3475

SegmentedGroup - Converted component to gts format

#3491

CodeEditor - Normalized error messages into readable strings

#3528

🔄 Updated dependencies:

@hashicorp/flight-icons@4.2.0
@hashicorp/design-system-tokens@4.0.0

5.2.0

5.2.0 documentation

Minor changes

Icon - Converted component to .gts format

#3444

Added Floating UI boundary option to hds-anchored-position modifier

PopoverPrimitive - Added Floating UI boundary option

Dropdown - Added Floating UI boundary option

RichTooltip - Added Floating UI boundary option

#3406

Patch changes

SuperSelect - Removed styling incorrectly adding a checkbox next to the "Loading options…" message for search results

#3439

AdvancedTable - Added a guard against accessing hdsIntl service after component destruction

#3195

CodeBlock - Fixed issue with font-family and font-size targeting so styles will correctly apply to nested element containing code content

CodeEditor - Fixed issue with font-family and font-size targeting so styles will correctly apply to nested element containing code content

#3455

Flyout - Updated variable controlling the Flyout max-width to align with the AppSideNav minimized width

#3456

🔄 Updated dependencies:

@hashicorp/flight-icons@4.1.1

5.1.0

5.1.0 documentation

Minor changes

CodeEditor - Added a new @customExtensions argument which allows consumers to provide their own custom CodeMirror extensions.

#3372

Patch changes

Dropdown - Updated component signature for ListItemCheckbox and ListItemRadio to have an optional @id argument.

#3371

Fix mixed sass declaration syntax to silence warnings

#3368

AdvancedTable - Fixed a bug in the cleanup logic of selectable rows where data updates caused the internal selection state to be incorrectly reset.

#3373

Button - Optimized CSS used to apply dark theme styles within AppHeader and SideNav

Dropdown - Optimized CSS used to apply dark theme styles within AppHeader and SideNav

SideNav: - Made CSS updates including:

Optimized CSS used to apply dark theme styles to Buttons & Dropdowns
Removed deprecated .hds-side-nav__dropdown class name which is redundant to the HDS Dropdown class name referenced in styles

AppHeader - Optimized CSS used to apply dark theme styles to Buttons & Dropdowns

#3356

🔄 Updated dependencies:

@hashicorp/flight-icons@4.1.0

5.0.0

5.0.0 documentation

Major changes

Flyout - Removed deprecated HdsFlyoutHeader, HdsFlyoutBody, HdsFlyoutDescription, and HdsFlyoutFooter subcomponents.

Modal - Removed deprecated HdsModalHeader, HdsModalBody, and HdsModalFooter subcomponents.

#3211

Dropdown - Removed the deprecated @text argument from the HdsDropdownListItemInteractive component.

To migrate, run the codemod v4/dropdown-list-item-interactive (see readme file)

#3211

Dropdown - Added assertion to the ToggleIcon to provide improved developer guidance for the hasChevron attribute

#3211

Added ember-basic-dropdown as a peer dependency required by ember-power-select. To migrate, if your application uses SuperSelect, make sure to add this dependency.

#3211

ApplicationState - Replaced the default opinionated margin: 0 auto; rule from the component's root element with a new @isAutoCentered argument (which defaults to true, to preserve the existing centering behavior). This delegates the horizontal alignment control to the consumers, allowing them to disable it when needed.

#3211

Removed support for Ember 3.28. New minimum support target is Ember 4.12.

#3211

Removed sass and ember-cli-sass dependencies. Consumers using sass in their projects should make sure it's added as a direct dependency to their project.

#3211

AdvancedTable - Removed the @isVisuallyHidden argument from HdsAdvancedTableTh component. This setting is supported via setting isVisuallyHidden in the corresponding @columns item's configuration.

#3211

Removed the deprecated MenuPrimitive component

#3211

Upgraded ember-a11y-refocus dependency to version 5.0 Upgraded @glimmer/component dependency to version 2.0

#3211

Card - Removed the component invocation paths Hds::Card and hds/card. Consumers must update their templates to use <Hds::Card::Container> or hds/card/container.

#3211

SideNav - Removed deprecated features

Removed the @ariaLabel argument
Removed the HdsSideNavHeaderIconButton component
Updated the deprecation removal version from 5.0.0 to 6.0.0

#3211

Icon - Renamed the volume-2 icon to volume-up

#3211

Removed support for deprecated ember-flight-icons lazyEmbed config

#3211

Patch changes

SideNav - Fixed the type of @a11yRefocusRouteChangeValidator to match the expected type from ember-a11y-refocus. The new type is (transition: Transition) => boolean instead of string.

AppHeader - Fixed the type of @a11yRefocusRouteChangeValidator to match the expected type from ember-a11y-refocus. The new type is (transition: Transition) => boolean instead of string.

#3211

🔄 Updated dependencies:

@hashicorp/flight-icons@4.0.0

4.24.1

4.24.1 documentation

Patch changes

CodeBlock - Fixed a11y issue with its CopyButton by adding copySuccessMessageText parameter to an aria-live region to announce to screen readers when content has been copied

CopyButton - Fixed a11y issue by adding ariaMessageText parameter to an aria-live region to announce to screen readers when content has been copied

#3304

FileInput - Added width of 100% to prevent the component from overflowing its container and making it consistent with other Input components

#3318

Button - Fixed color inheritance for Buttons within DialogPrimitive based components (such as the Modal and Flyout) when triggered from within the SideNav or AppHeader

SideNav - Fixed color inheritance for Buttons within DialogPrimitive based components (such as the Modal and Flyout) when triggered from within the SideNav

AppHeader - Fixed color inheritance for Buttons within DialogPrimitive based components (such as the Modal and Flyout) when triggered from within the AppHeader

#3335

AppFooter - Updated company name in copyright text

#3314

SuperSelect - Fixed issue with tabbing to SuperSelectMultiple with search enabled by adding tabindex of "0"

#3333

Modal - Refactored the component to not use ember-render-modifiers which fixes issues where the DOM may not be cleaned up when the Modal is closed.

Flyout - Refactored the component to not use ember-render-modifiers which fixes issues where the DOM may not be cleaned up when the Flyout is closed.

#3215

SuperSelect - Fixed color style for disabled option items.

#3331

🔄 Updated dependencies:

@hashicorp/flight-icons@3.14.0

4.24.0

4.24.0 documentation

Minor changes

PopoverPrimitive - Added support for dynamic swap/injection of the toggle element.

#3189

AdvancedTable - Added support for column reordering.

Added @hasReorderableColumns argument. When set to true, enables column reordering.
Added optional @columnOrder argument for setting the initial order of columns by their keys.
Added optional @onColumnReorder argument which accepts a callback function that is called when reordering is completed.
Added optional @reorderedMessageText which overrides the default message text that is rendered in the table caption when a column is reordered.

#2997

Patch changes

Table - Update the model and returned B.data to use generic types, so the type of the data is retained.

KeyValueInputs - Update the data and returned R.rowData to use generic types, so the type of the data is retained.

#3150 - Thanks @aklkv for the contribution! 🙏

🔄 Updated dependencies:

@hashicorp/design-system-tokens@3.0.0

4.23.1

Patch changes

Stepper::Nav - Fixed bug with stacking context styles causing step content's z-index to not work as expected

#3176

🔄 Updated dependencies:

@hashicorp/design-system-tokens@2.3.1

4.23.0

4.23.0 documentation

Minor changes

CodeEditor - Added a cspNonce argument which passes a value of the same name to the hds-code-editor modifier. cspNonce is used to add a nonce value to the style tag

#3132

Time - removed deprecated @task decorator to avoid warnings

#3144 - Thanks @aklkv for the contribution! 🙏

Card - Updated all exported types to use template literals instead of enum values.

IconTile - Updated exported HdsIconTileColors type to use template literals instead of enum values.

#3106

AdvancedTable - Added features and fixed issues for column pinning including:

Added support for pinning first column in context menu
Translated template strings in context menu
Fixed style for scroll indicator when first column is sticky and has a px width

#3104

AdvancedTable - Fixed bug with automatic column resizing and scroll-shadow placement.

#3081

AppHeader - return close callback to the :logo named block so the menu actions can be hidden programmatically when the component is in a mobile view.

#3121

Patch changes

AdvancedTable - simplified AdvancedTable::Tr type signature so the @selectionKey argument is not incorrectly marked as required.

#3108

PopoverPrimitive - Updated the type of the hidePopover callback to allow an optional event to be passed.

RichTooltip - Updated the type of the close callback to allow an optional event to be passed.

Dropdown - Updated the type of the close callback to allow an optional event to be passed and to make it always returned.

#3118

AppHeader - Fixed classname so that non-active controls in the AppHeader will be styled as disabled when the AppSideNav is expanded and in overlay mode

#3116

Button - Removed CSS declaration for pseudo element in disabled state

Dropdown - Removed CSS declaration for pseudo element in disabled state

FileInput - Removed CSS declaration for pseudo element in disabled state that led to invalid CSS (ignored by browsers)

#3131

🔄 Updated dependencies:

@hashicorp/flight-icons@3.13.0

4.22.1

Patch changes

AdvancedTable - Fixed styles for right and center aligned cells.

#3093

AppFrame - Changed media query styles for frame header and sidebar containers to use level 3 vs level 4 CSS syntax

#3110

4.22.0

4.22.0 documentation

Minor changes

Added ember-intl as a dependency

Added hdsIntl service for translations in HDS components with default fallback values
Added hds-t helper which uses the hds-intl service to provide translations in HSD templates

AdvancedTable - Translated template strings. Removed extraneous screen-reader-only text.

AppFooter - Translated template strings

AppSideNav - Translated template strings

ApplicationState - Translated template strings

CodeEditor - Translated template strings

DismissButton - Translated template strings

MaskedInput - Translated template strings

SuperSelect - Translated template strings

Pagination - Translated template strings

SideNav - Translated template strings

Table - Translated template strings

Time - Translated template strings

#2878

Reveal - Added support for the aria-describedby attribute on the toggle.

#3084

Patch changes

AppHeader - Changed the default breakpoint from lg to md.

#3072

Stepper::List - Fixed type for status argument in List::Step to be HdsStepperStatuses instead of enum HdsStepperStatusesValues

#3073

AdvancedTable::Tr - Updated @isSelected argument type from false to boolean

Table::Tr - Updated @isSelected argument type from false to boolean

#3066

CodeEditor - Fixed the type of the CodeEditor signature to indicate that the [CE].Title and [CE].Description have bound arguments.

#3068

Read the full changelog

npm package: @hashicorp/design-system-tokens

6.0.0

Major changes

Renamed design tokens to align with the approved nomenclature.

Changed the prefix for all CSS and Sass tokens from token to hds.
Changed the "core" color token namespace from color-palette to core-color.
Changed the "semantic" color token namespace from color-[semantic] to [semantic]-color.
Changed the "product" color token namespace from color-<product> to product-<product>-…-color.
Changed the "focus-ring" box-shadow token names from focus-ring-[variant]-box-shadow to focus-ring-box-shadow-[variant].
Changed the form-radiocard token namespace to form-radio-card.
Changed "component-level" tokens' names to follow more closely new nomenclature

Updated alias and group references to match the new structure. Updated build and post-processing scripts accordingly.

Added new design tokens for components, according to needs in the carbonization process, and in some cases removed existing design tokens when not needed anymore (or replaced by other tokens).

👉 The full list of renamed, added, and removed tokens is available in the 6.0.0 migration guide.

CSS helper classes for the focus ring have been renamed to follow the same naming convention as renamed tokens:

CSS Class / Before	CSS Class / After
`.hds-focus-ring-action-box-shadow`	`.hds-focus-ring-box-shadow-action`
`.hds-focus-ring-critical-box-shadow`	`.hds-focus-ring-box-shadow-critical`

Added CSS helper class .hds-surface-high-contrast.

#4035

5.1.0

Minor changes

Added design token for color-transform.direction for CSS lightness transformation.

Added more specialized component tokens for Form/Primitives base elements (color and typography)
Added component tokens for Badge and BadgeCount components
Added component tokens for IconTile component

#3948

5.0.0

Major changes

Removed devdot (developer.hashicorp.com/) and marketing (www.hashicorp.com) as targets for the tokens pipeline

#3772

4.0.1

Patch changes

Updated CSS helpers for font-weight property to use aliases to HDS tokens instead of direct values

#3562

4.0.0

Major changes

Removed tokens previously used by the HdsSideNav component. Component was removed in the 6.0.0 release of the components package.

#3541

3.0.0

Major changes

Upgraded Style Dictionary to version 5

Updated format of the src JSON tokens files to use the community standard DTCG format
Updated the tokens pipeline scripts to use the new format

Note: this is only a breaking change for consumers who use the src files to generate their own design tokens. For consumers using the design tokens in their compiled format, directly or via the @hashicorp/design-system-components package, this change will have no impact at all.

#3138

2.3.1

Patch changes

cloud-ui/email - Fixed CSS helpers for "elevation" styles

#3158

2.3.0

Minor changes

Added global tokens for border radius

#2595

2.2.2

Patch changes

Upgraded style-dictionary to 4.2.0

#2560

2.2.1

Patch changes

Updated design tokens for Vagrant primary gradient to match Figma.

#2366

2.2.0

Minor changes

AppHeader - Added design tokens:

--token-app-header-height
--token-app-header-home-link-size
--token-app-header-logo-size

#2161

2.1.0

Minor changes

Added new pipeline to Style Dictionary for cloud-email - email/sass-variables to be used in email templating

#1965

2.0.0

Major changes

New tokens added for large and medium size Tab variants. The "medium" tokens replace the former equivalent tokens which were not differentiated by size.

--token-tabs-tab-height-medium (Replaces --token-tabs-tab-height)
--token-tabs-tab-height-large (New)
--token-tabs-tab-padding-horizontal-medium (Replaces --token-tabs-tab-padding-horizontal)
--token-tabs-tab-padding-horizontal-large (New)

#1937

1.11.0

Minor changes

Updated vault, vault-secrets, and vault-radar brand color values

#1914

Added design token for terraform-brand-on-dark color

#1915

1.10.0

Minor changes

Added color tokens for “Vault Radar” product

#1904

1.9.0

Minor changes

Added design tokens for SideNav with @isCollapsible (to control if users can collapse the sidenav on 'desktop' viewports) and @isMinimized (to control the default state on 'desktop' viewports) arguments

#1630

1.8.0

Minor changes

Added color tokens for “Vault Secrets” product

#1640

1.7.0

Minor changes

Added JSON output format for marketing target (and in the process refactored internal logic for tokens generation)

#1513 - Thanks @dstaley for the contribution! 🙏

1.6.0

Minor changes

Added design token for loading state icon on search input

#1452

1.5.0

Minor changes

Added new TooltipButton component and hds-tooltip modifier
Added design tokens for Tooltip

#1283

Read the full changelog

npm package: @hashicorp/flight-icons

5.3.0

Minor changes

Added a monochrome Carbon-theme fallback for all the colored Services icons and some Products icons

The Services and Products icons have no IBM Carbon equivalent. Their ***-color glyphs don't always work against dark backgrounds. So when the Carbon themes are activated, and their colored glyph is rendered, there are color contrast issues (eg. a dark icon on a dark background).

With this change they now fall back to their monochrome counterpart (eg. aws-cloudwatch-color to aws-cloudwatch, hashicorp-color to hashicorp), whose dynamic color is emitted as currentColor so it adapts to the current theme.

This is handled entirely in the build pipeline: the generated registry keeps its existing shape, so no changes are required in consuming applications.

#4159

5.2.0

Minor changes

Added portal icon.

#4161

5.1.0

Minor changes

Added icons delay and user-minus Added Carbon icon references to contributed icons

#3995

Added incomplete-normal, circle-dash, and error-filled icons.

#4002

5.0.0

Major changes

"Carbonized" all the assets, by adding two glyphs under the same icon (one for the "classic" HDS Flight icon, one for the IBM Carbon icon; in Figma they're controlled by isHDS/isCDS variables, while in code they are handled by the HdsIcon component). This change has updated the internal SVG code for every icon (hence the "major" version change), but visually everything should remain the same.

#3692

Minor changes

workspace icon added

#3689

Added additional build and sync scripts which generate loader modules and types to support the transition from Flight to Carbon icons systems.

#3709

Patch changes

Re-generated all the assets due to an upgrade of the svgo optimization library. This change has updated the internal SVG code for every icon, due to a different optimization algorithm, but visually everything should remain the same.

#3720

4.2.1

Patch changes

Fixed naming for ping-identity icon (there was a space after the name)

#3623

4.2.0

Minor changes

Add cloudability and cloudability-color service icons.

#3530

4.1.1

Patch changes

Added "aap" to Ansible icon keywords for easier search.

#3430

4.1.0

Minor changes

ansible-community, ansible-community-color, ansible-automation-platform, and ansible-automation-platform-color icons added.

#3404

4.0.0

Major changes

Renamed volume-2 to volume-up.

#3211

3.14.0

Minor changes

Added openstack and openstack-color icons.

#3353

jenkins and jenkins-color icons added.

#3337

3.13.0

Minor changes

pin-off icon added.

#3120

3.12.0

Minor changes

move-horizontal and resize-column icons added.

#2972

3.11.1

Patch changes

Removed extra space in PingID name, and updated description.

#2959

3.11.0

Minor changes

start, end, and text-wrap icons added. Fixed the vertical alignment of top and bottom.

#2917

3.10.0

Minor changes

duo and ping-identity service icons added.

#2782

3.9.0

Minor changes

confluence and confluence-color icons added.

#2635

3.8.0

Minor changes

Postgres service icon added.

#2563

3.7.0

Minor changes

Confluent icon added

#2505

Updated okta and okta-color to reflect updated branding.

#2489

3.6.0

Minor changes

bucket icon added.

#2424

3.5.0

Minor changes

mongodb and twilio icons have been added.

#2260

Read the full changelog

Components library

Figma library: HDS Components UI Kit v2.0

August 18, 2026

Resolved an issue that was causing icon instances to either revert to the "dynamic" color, or fail to persist colors applied to them in component instances.

August 11th, 2026

FilterBar - Added wrapping to the "main" auto-layout container to ensure generic content wraps as expected.

February 4th, 2026

FilterBar - New component added.

January 12th, 2026

SuperSelect - Fixed a bug where the nested ListItems weren't being published.

December 4th, 2025

Breadcrumb - Fixed a bug that caused the text styles in the default state of the Breadcrumb Item to detach.

November 5th, 2025

This changelog corresponds with the 5.0 release.

AppFooter - Updated the copyright language to read "HashiCorp, an IBM Company" per brand guidance.

October 1st, 2025

This changelog corresponds with the 4.24 release.

AdvancedTable - Added support for reordering columns.

StepperNav - Fixed a bug that was preventing the progress line from scaling property.

Form / Layout - Updated the order of actions to correspond with button organization guidelines.

SuperSelect / Multiple - Added Separator and GroupTitle list items to the component.

September 4th, 2025

This changelog corresponds with the 4.23 release.

AdvancedTable - Added support for toggling pinning the first column in context menu and fixed visual bug for focus state for the table cells.

AppHeader - Added size property for breakpoint definition.

August 7th, 2025

This changelog corresponds with the 4.22 release.

Modal - Fixed a color inheritance bug for the tagline.

SuperSelect - Updated the tags to better reflect the Ember component functionality. Added missing boolean property for helper text.

Tab - Fixed an auto layout bug to correct indicator length for longer text.

RadioCard - Fixed a color override bug for the icons within each card.

Form Primitives - Added a text property for the number/count in CharacterCount.

July 2nd, 2025

This changelog corresponds with the 4.21 release.

KeyValueInputs - Added new [Template] component.

Form / Layout - Added new Form Layout [Template] component.

AppHeader - Added text property to the home link.

AdvancedTable - Added support for resizing columns, restructured the component to support functions within a context menu.

Read the full changelog

Foundations library

Figma library: HDS Foundations UI Kit v2.0

June 4, 2025

Breakpoints - Added new variables for each breakpoint including:

sm : 480
md : 768
lg : 1088
xl : 1440
xxl : 1920

April 2nd, 2025

Typography - Added font weight variables to each type style.

December 20th, 2024

Deprecated HDS Foundations UI Kit v1.0. It will no longer receive updates or support.
Released HDS Foundations UI Kit v2.0.

Migrating Figma designs from the v1.0 library to the v2.0 library mainly requires replacing Figma Styles with Variables and is considered a breaking change. A comprehensive list of how these changes will impact your designs can be found in the changelog document.

November 2nd, 2023

Elevation / Mid - Fixed style not being correctly published to consuming libraries.

October 31st, 2023

Components / Code Block / Code / 200 - Added component-specific text style for the CodeBlock.

October 20th, 2023

Components / Code Block / Syntax - Added syntax highlighting styles used by the CodeBlock component.

Read the full changelog

Patterns library

Figma library: HDS Patterns UI Kit

August 7th, 2025

Description List - Added a new Template to standardize how key-value pairs are displayed.

June 4th, 2025

Application Template - Updated to include each of the breakpoints for their widths.

May 9th, 2025

This changelog corresponds with the 4.19 release.

Application Template - Updated to use the Enterprise Navigation components; AppHeader and AppSideNav.

December 20th, 2024

Released HDS Patterns UI Kit v2.0.

Read the full changelog

Utility libraries

Figma library: Utility libraries

On this page: