DO NOT MERGE - Main branch for v5.0.0 changes

.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/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/legal-swans-occur.md

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

.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/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

README.md

@@ -1,3 +1,5 @@
+<!-- TEMPORARY ADDITION SO BRANCH DIVERGES FROM MAIN -->
+
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://github.com/hashicorp/design-system/assets/788096/5d6969b7-f8b4-4ad3-9ece-b16b4527522e" width="300">
   <source media="(prefers-color-scheme: light)" srcset="https://github.com/hashicorp/design-system/assets/788096/8e278094-427f-40cc-912f-9ccd3a0ff879" width="300">

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

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

packages/components/package.json

@@ -59,7 +59,6 @@
     "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-concurrency": "^4.0.4",
     "ember-element-helper": "^0.8.6",
     "ember-focus-trap": "^1.1.1",
@@ -71,10 +70,9 @@
     "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",
@@ -113,6 +111,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",
@@ -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.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-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';

packages/components/src/components/hds/dropdown/index.ts

@@ -15,7 +15,7 @@ import {
 } from './types.ts';
 
 import type { ComponentLike } from '@glint/template';
-import type { MenuPrimitiveSignature } from '../menu-primitive';
+import type { HdsPopoverPrimitiveSignature } from '../popover-primitive/index.ts';
 import type { HdsDropdownFooterSignature } from './footer';
 import type { HdsDropdownHeaderSignature } from './header';
 import type { HdsDropdownListItemCheckboxSignature } from './list-item/checkbox';
@@ -39,15 +39,16 @@ export const POSITIONS: HdsDropdownPositions[] = Object.values(
 );
 
 export interface HdsDropdownSignature {
-  Args: MenuPrimitiveSignature['Args'] & {
+  Args: {
     height?: string;
     isInline?: boolean;
-    isOpen?: boolean;
+    isOpen?: HdsPopoverPrimitiveSignature['Args']['isOpen'];
     listPosition?: HdsDropdownPositions;
     width?: string;
     enableCollisionDetection?: HdsAnchoredPositionOptions['enableCollisionDetection'];
     preserveContentInDom?: boolean;
     matchToggleWidth?: boolean;
+    onClose?: HdsPopoverPrimitiveSignature['Args']['onClose'];
   };
   Blocks: {
     default: [
@@ -69,7 +70,7 @@ export interface HdsDropdownSignature {
       },
     ];
   };
-  Element: MenuPrimitiveSignature['Element'];
+  Element: HTMLDivElement;
 }
 
 export default class HdsDropdown extends Component<HdsDropdownSignature> {

packages/components/src/components/hds/dropdown/list-item/interactive.hbs

@@ -9,11 +9,7 @@
         <Hds::Icon @name="loading" />
       </div>
       <Hds::Text::Body @tag="div" @size="100" @weight="regular" class="hds-dropdown-list-item__interactive-text">
-        {{#if (has-block)}}
-          {{yield (hash Badge=(component "hds/badge" size="small"))}}
-        {{else}}
-          {{this.text}}
-        {{/if}}
+        {{yield (hash Badge=(component "hds/badge" size="small"))}}
       </Hds::Text::Body>
     </div>
   {{else}}
@@ -34,11 +30,7 @@
         </span>
       {{/if}}
       <Hds::Text::Body class="hds-dropdown-list-item__interactive-text" @tag="span" @size="200" @weight="medium">
-        {{#if (has-block)}}
-          {{yield (hash Badge=(component "hds/badge" size="small"))}}
-        {{else}}
-          {{this.text}}
-        {{/if}}
+        {{yield (hash Badge=(component "hds/badge" size="small"))}}
       </Hds::Text::Body>
       {{#if @trailingIcon}}
         <span class="hds-dropdown-list-item__interactive-icon hds-dropdown-list-item__interactive-icon--trailing">

packages/components/src/components/hds/dropdown/list-item/interactive.ts

@@ -4,7 +4,7 @@
  */
 
 import Component from '@glimmer/component';
-import { assert, deprecate } from '@ember/debug';
+import { assert } from '@ember/debug';
 
 import { HdsDropdownListItemInteractiveColorValues } from './types.ts';
 
@@ -13,7 +13,6 @@ import type { HdsInteractiveSignature } from '../../interactive';
 import type { HdsDropdownListItemInteractiveColors } from './types.ts';
 import type { ComponentLike } from '@glint/template';
 import type { HdsBadgeSignature } from '../../badge/index.ts';
-import type Owner from '@ember/owner';
 
 export const DEFAULT_COLOR = HdsDropdownListItemInteractiveColorValues.Action;
 export const COLORS: HdsDropdownListItemInteractiveColors[] = Object.values(
@@ -25,10 +24,6 @@ export interface HdsDropdownListItemInteractiveSignature {
     color?: HdsDropdownListItemInteractiveColors;
     icon?: HdsIconSignature['Args']['name'];
     isLoading?: boolean;
-    /**
-     * @deprecated The `@text` argument for "Hds::Dropdown::ListItem::Interactive" has been deprecated. Please put text in the yielded block. See: https://helios.hashicorp.design/components/dropdown?tab=version%20history#4100
-     */
-    text?: string;
     trailingIcon?: HdsIconSignature['Args']['name'];
   };
   Blocks: {
@@ -42,41 +37,6 @@ export interface HdsDropdownListItemInteractiveSignature {
 }
 
 export default class HdsDropdownListItemInteractive extends Component<HdsDropdownListItemInteractiveSignature> {
-  constructor(
-    owner: Owner,
-    args: HdsDropdownListItemInteractiveSignature['Args']
-  ) {
-    super(owner, args);
-
-    if (args.text !== undefined) {
-      deprecate(
-        'The `@text` argument for "Hds::Dropdown::ListItem::Interactive" has been deprecated. Please put text in the yielded block.',
-        false,
-        {
-          id: 'hds.dropdown.list-item.interactive',
-          until: '5.0.0',
-          url: 'https://helios.hashicorp.design/components/dropdown?tab=version%20history#4100',
-          for: '@hashicorp/design-system-components',
-          since: {
-            available: '4.10.0',
-            enabled: '5.0.0',
-          },
-        }
-      );
-    }
-  }
-
-  get text(): string {
-    const { text } = this.args;
-
-    assert(
-      '@text for "Hds::Dropdown::ListItem::Interactive" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
   get color(): HdsDropdownListItemInteractiveColors {
     const { color = DEFAULT_COLOR } = this.args;