Breaking changes for v5.0.0 release

.changeset/bitter-baboons-tease.md

@@ -0,0 +1,11 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/flyout -->
+`Flyout` - Removed deprecated `HdsFlyoutHeader`, `HdsFlyoutBody`, `HdsFlyoutDescription`, and `HdsFlyoutFooter` subcomponents.
+<!-- END -->
+
+<!-- START components/modal -->
+`Modal` - Removed deprecated `HdsModalHeader`, `HdsModalBody`, and `HdsModalFooter` subcomponents.
+<!-- END -->

.changeset/cold-worlds-notice.md

@@ -0,0 +1,11 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/dropdown -->
+
+`Dropdown` - Removed the deprecated `@text` argument from the `HdsDropdownListItemInteractive` component.
+
+To migrate, run the codemod `v4/dropdown-list-item-interactive` (see [readme file](https://github.com/hashicorp/design-system/tree/main/packages/codemods/transforms/v4/dropdown-list-item-interactive))
+
+<!-- END -->

.changeset/deep-wings-arrive.md

@@ -0,0 +1,9 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/dropdown -->
+
+`Dropdown` - Added assertion to the `ToggleIcon` to provide improved developer guidance for the `hasChevron` attribute
+
+<!-- END -->

.changeset/dull-showers-dream.md

@@ -0,0 +1,9 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/form/super-select -->
+
+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.
+
+<!-- END -->

.changeset/easy-owls-create.md

@@ -0,0 +1,8 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/application-state -->
+
+`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.
+<!-- END -->

.changeset/fluffy-places-ask.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+Removed support for Ember 3.28. New minimum support target is Ember 4.12.

.changeset/full-showers-kiss.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+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.

.changeset/hot-owls-rescue.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/table/advanced-table -->
+`AdvancedTable` - Removed the `@isVisuallyHidden` argument from `HdsAdvancedTableTh` component. This setting is supported via setting `isVisuallyHidden` in the corresponding `@columns` item's configuration.
+<!-- END -->

.changeset/khaki-bananas-know.md

@@ -0,0 +1,11 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+<!-- START components/side-nav -->
+`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`.
+<!-- END -->
+
+<!-- START components/app-header -->
+`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`.
+<!-- END -->

.changeset/legal-swans-occur.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+Removed the deprecated `MenuPrimitive` component

.changeset/puny-months-sit.md

@@ -0,0 +1,6 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+Upgraded `ember-a11y-refocus` dependency to version `5.0`
+Upgraded `@glimmer/component` dependency to version `2.0`

.changeset/seven-windows-crash.md

@@ -0,0 +1,6 @@
+---
+"@hashicorp/design-system-components": major
+---
+<!-- START components/card -->
+`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}}`
+<!-- END -->

.changeset/solid-dolls-strive.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/flight-icons": major
+---
+
+Renamed `volume-2` to `volume-up`.

.changeset/spicy-ads-roll.md

@@ -0,0 +1,10 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/side-nav -->
+`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`
+<!-- END -->

.changeset/sweet-mangos-relate.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/icon -->
+`Icon` - Renamed the `volume-2` icon to `volume-up`
+<!-- END -->

.changeset/young-meals-knock.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+Removed support for deprecated `ember-flight-icons` `lazyEmbed` config

.github/workflows/ci-components.yml

@@ -7,7 +7,7 @@ on:
   pull_request: {}
 
 env:
-  NODE_VERSION: '22.x'
+  NODE_VERSION: "22.x"
 
 concurrency:
   group: ci-components-${{ github.head_ref || github.ref }}
@@ -28,7 +28,7 @@ jobs:
         run: ./.github/scripts/filter_changed_files.sh "packages/components" "packages/flight-icons/catalog.json" "showcase" ".github/workflows/ci-components.yml" "packages/tokens"
 
   test:
-    name: 'Tests'
+    name: "Tests"
     runs-on: ubuntu-latest
     needs: [conditional-skip]
     if: needs.conditional-skip.outputs.trigger-ci == 'true'
@@ -63,13 +63,12 @@ jobs:
   try-scenarios:
     name: ${{ matrix.try-scenario }}
     runs-on: ubuntu-latest
-    needs: 'test'
+    needs: "test"
 
     strategy:
       fail-fast: false
       matrix:
         try-scenario:
-          - ember-lts-3.28
           - ember-lts-4.12
           # - ember-release
           - ember-beta

package.json

@@ -26,6 +26,7 @@
   },
   "pnpm": {
     "overrides": {
+      "@glimmer/component": "^2.0.0",
       "ember-composable-helpers": "npm:@nullvoxpopuli/ember-composable-helpers@^5.2.11"
     },
     "patchedDependencies": {

packages/components/README.md

@@ -8,9 +8,9 @@ A package containing the components for the Helios Design System.
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v3.28 or above
-* Ember CLI v3.28 or above
-* Node.js v16 or above
+* Ember.js v4.12 or above
+* Ember CLI v4.12 or above
+* Node.js v18 or above
 
 Installation
 ------------------------------------------------------------------------------

packages/components/addon-main.cjs

@@ -8,12 +8,10 @@ const flightIconSprite = require('@hashicorp/flight-icons/svg-sprite/svg-sprite-
 
 module.exports = {
   ...addonV1Shim(__dirname),
-  contentFor(type, config) {
-    const legacyLazyEmbed = config?.emberFlightIcons?.lazyEmbed;
 
+  contentFor(type, config) {
     if (
       !config.flightIconsSpriteLazyEmbed &&
-      !legacyLazyEmbed &&
       !config.__flightIconsSpriteLoaded &&
       type === 'body-footer'
     ) {

packages/components/package.json

@@ -45,7 +45,7 @@
     "@codemirror/lint": "^6.8.4",
     "@codemirror/state": "^6.5.0",
     "@codemirror/view": "^6.36.2",
-    "@ember/render-modifiers": "^2.1.0",
+    "@ember/render-modifiers": "^3.0.0",
     "@ember/test-waiters": "^3.1.0",
     "@embroider/addon-shim": "^1.10.0",
     "@embroider/macros": "^1.18.1",
@@ -58,23 +58,20 @@
     "clipboard-polyfill": "^4.1.1",
     "codemirror-lang-hcl": "^0.0.0-beta.2",
     "decorator-transforms": "^2.3.0",
-    "ember-a11y-refocus": "^4.1.4",
-    "ember-cli-sass": "^11.0.1",
+    "ember-a11y-refocus": "^5.1.0",
     "ember-concurrency": "^4.0.4",
     "ember-element-helper": "^0.8.6",
     "ember-focus-trap": "^1.1.1",
-    "ember-get-config": "^2.1.1",
     "ember-modifier": "^4.2.2",
     "ember-power-select": "^8.7.1",
-    "ember-stargate": "^0.5.0",
+    "ember-stargate": "^1.0.2",
     "ember-style-modifier": "^4.4.0",
     "ember-truth-helpers": "^4.0.3",
     "luxon": "^3.4.2",
     "prismjs": "^1.30.0",
-    "sass": "^1.83.0",
-    "tracked-built-ins": "^4.0.0",
     "tabbable": "^6.2.0",
-    "tippy.js": "^6.3.7"
+    "tippy.js": "^6.3.7",
+    "tracked-built-ins": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
@@ -85,7 +82,7 @@
     "@ember/test-helpers": "^4.0.4",
     "@embroider/addon-dev": "^7.1.5",
     "@eslint/js": "^9.23.0",
-    "@glimmer/component": "^1.1.2",
+    "@glimmer/component": "^2.0.0",
     "@glint/core": "^1.5.2",
     "@glint/environment-ember-loose": "^1.5.2",
     "@glint/environment-ember-template-imports": "^1.5.2",
@@ -113,6 +110,7 @@
     "rollup": "^4.39.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-scss": "^4.0.1",
+    "sass": "^1.89.2",
     "stylelint": "^16.17.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard-scss": "^14.0.0",
@@ -122,6 +120,7 @@
   },
   "peerDependencies": {
     "@ember/string": "^3.1.1 || ^4.0.0",
+    "ember-basic-dropdown": "^7.3.0 || ^8.6.1",
     "ember-engines": ">= 0.11.0",
     "ember-intl": "^7.3.0"
   },
@@ -236,10 +235,6 @@
       "./components/hds/dropdown/toggle/button.js": "./dist/_app_/components/hds/dropdown/toggle/button.js",
       "./components/hds/dropdown/toggle/chevron.js": "./dist/_app_/components/hds/dropdown/toggle/chevron.js",
       "./components/hds/dropdown/toggle/icon.js": "./dist/_app_/components/hds/dropdown/toggle/icon.js",
-      "./components/hds/flyout/body.js": "./dist/_app_/components/hds/flyout/body.js",
-      "./components/hds/flyout/description.js": "./dist/_app_/components/hds/flyout/description.js",
-      "./components/hds/flyout/footer.js": "./dist/_app_/components/hds/flyout/footer.js",
-      "./components/hds/flyout/header.js": "./dist/_app_/components/hds/flyout/header.js",
       "./components/hds/flyout.js": "./dist/_app_/components/hds/flyout.js",
       "./components/hds/form/character-count.js": "./dist/_app_/components/hds/form/character-count.js",
       "./components/hds/form/checkbox/base.js": "./dist/_app_/components/hds/form/checkbox/base.js",
@@ -305,10 +300,6 @@
       "./components/hds/layout/grid/item.js": "./dist/_app_/components/hds/layout/grid/item.js",
       "./components/hds/link/inline.js": "./dist/_app_/components/hds/link/inline.js",
       "./components/hds/link/standalone.js": "./dist/_app_/components/hds/link/standalone.js",
-      "./components/hds/menu-primitive.js": "./dist/_app_/components/hds/menu-primitive.js",
-      "./components/hds/modal/body.js": "./dist/_app_/components/hds/modal/body.js",
-      "./components/hds/modal/footer.js": "./dist/_app_/components/hds/modal/footer.js",
-      "./components/hds/modal/header.js": "./dist/_app_/components/hds/modal/header.js",
       "./components/hds/modal.js": "./dist/_app_/components/hds/modal.js",
       "./components/hds/page-header/actions.js": "./dist/_app_/components/hds/page-header/actions.js",
       "./components/hds/page-header/badges.js": "./dist/_app_/components/hds/page-header/badges.js",
@@ -333,7 +324,6 @@
       "./components/hds/separator.js": "./dist/_app_/components/hds/separator.js",
       "./components/hds/side-nav/base.js": "./dist/_app_/components/hds/side-nav/base.js",
       "./components/hds/side-nav/header/home-link.js": "./dist/_app_/components/hds/side-nav/header/home-link.js",
-      "./components/hds/side-nav/header/icon-button.js": "./dist/_app_/components/hds/side-nav/header/icon-button.js",
       "./components/hds/side-nav/header.js": "./dist/_app_/components/hds/side-nav/header.js",
       "./components/hds/side-nav.js": "./dist/_app_/components/hds/side-nav.js",
       "./components/hds/side-nav/list/back-link.js": "./dist/_app_/components/hds/side-nav/list/back-link.js",

packages/components/src/components.ts

@@ -279,7 +279,6 @@ export { default as HdsSideNav } from './components/hds/side-nav/index.ts';
 export { default as HdsSideNavBase } from './components/hds/side-nav/base.ts';
 export { default as HdsSideNavHeader } from './components/hds/side-nav/header/index.ts';
 export { default as HdsSideNavHeaderHomeLink } from './components/hds/side-nav/header/home-link.ts';
-export { default as HdsSideNavHeaderIconButton } from './components/hds/side-nav/header/icon-button.ts';
 export { default as HdsSideNavList } from './components/hds/side-nav/list/index.ts';
 export { default as HdsSideNavListBackLink } from './components/hds/side-nav/list/back-link.ts';
 export { default as HdsSideNavListItem } from './components/hds/side-nav/list/item.ts';
@@ -390,8 +389,5 @@ export { default as HdsDismissButton } from './components/hds/dismiss-button/ind
 // Interactive
 export { default as HdsInteractive } from './components/hds/interactive/index.ts';
 
-// MenuPrimitive
-export { default as HdsMenuPrimitive } from './components/hds/menu-primitive/index.ts';
-
 // PopoverPrimitive
 export { default as HdsPopoverPrimitive } from './components/hds/popover-primitive/index.ts';

packages/components/src/components/hds/advanced-table/index.hbs

@@ -84,7 +84,6 @@
               @isExpandable={{column.isExpandable}}
               @isStickyColumn={{this._isStickyColumn column}}
               @isStickyColumnPinned={{this.isStickyColumnPinned}}
-              @isVisuallyHidden={{column.isVisuallyHidden}}
               @tableHeight={{this._tableHeight}}
               @tooltip={{column.tooltip}}
               @onClickToggle={{this._tableModel.toggleAll}}

packages/components/src/components/hds/advanced-table/th-resize-handle.ts

@@ -9,6 +9,7 @@ import { action } from '@ember/object';
 import { modifier } from 'ember-modifier';
 import { requestAnimationFrameWaiter } from './utils.ts';
 import { BORDER_WIDTH } from './index.ts';
+import type Owner from '@ember/owner';
 
 import type HdsAdvancedTableColumn from './models/column.ts';
 import type { HdsAdvancedTableSignature } from './index.ts';
@@ -90,7 +91,7 @@ export default class HdsAdvancedTableThResizeHandle extends Component<HdsAdvance
   );
 
   constructor(
-    owner: unknown,
+    owner: Owner,
     args: HdsAdvancedTableThResizeHandleSignature['Args']
   ) {
     super(owner, args);

packages/components/src/components/hds/advanced-table/th.ts

@@ -44,7 +44,6 @@ export interface HdsAdvancedTableThSignature {
     isExpandable?: boolean;
     isStickyColumn?: boolean;
     isStickyColumnPinned?: boolean;
-    isVisuallyHidden?: boolean;
     newLabel?: string;
     parentId?: string;
     rowspan?: number;

packages/components/src/components/hds/app-header/index.hbs

@@ -10,7 +10,6 @@
   ...attributes
 >
   {{#if (and this.hasA11yRefocus (not this._isOpen))}}
-    {{! @glint-expect-error - `ember-a11y-refocus` doesn't expose types yet }}
     <NavigationNarrator
       @routeChangeValidator={{@a11yRefocusRouteChangeValidator}}
       @skipTo={{this.a11yRefocusSkipTo}}

packages/components/src/components/hds/app-header/index.ts

@@ -9,6 +9,7 @@ import { guidFor } from '@ember/object/internals';
 import { tracked } from '@glimmer/tracking';
 import { registerDestructor } from '@ember/destroyable';
 import type Owner from '@ember/owner';
+import type { NavigationNarratorSignature } from 'ember-a11y-refocus/components/navigation-narrator';
 
 import { hdsBreakpoints } from '../../../utils/hds-breakpoints.ts';
 
@@ -19,7 +20,7 @@ export interface HdsAppHeaderSignature {
     a11yRefocusSkipTo?: string;
     a11yRefocusSkipText?: string;
     a11yRefocusNavigationText?: string;
-    a11yRefocusRouteChangeValidator?: string;
+    a11yRefocusRouteChangeValidator?: NavigationNarratorSignature['Args']['routeChangeValidator'];
     a11yRefocusExcludeAllQueryParams?: boolean;
   };
   Blocks: {

packages/components/src/components/hds/app-side-nav/portal/target.ts

@@ -4,7 +4,7 @@
  */
 
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { macroCondition, isTesting } from '@embroider/macros';