@hashicorp/design-system-components 5.0.0-rc-20251013193429 → 5.0.0-rc-20251014173443

package/dist/components/hds/side-nav/header/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","sources":["../../../../../src/components/hds/side-nav/header/icon-button.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { assert, deprecate } from '@ember/debug';\n\nimport type { HdsIconSignature } from '../../icon';\nimport type { HdsInteractiveSignature } from '../../interactive/';\nimport type Owner from '@ember/owner';\n\nexport interface HdsSideNavHeaderIconButtonSignature {\n  Args: HdsInteractiveSignature['Args'] & {\n    icon: HdsIconSignature['Args']['name'];\n    ariaLabel: string;\n  };\n  Element: HdsInteractiveSignature['Element'];\n}\n\nexport default class HdsSideNavHeaderIconButton extends Component<HdsSideNavHeaderIconButtonSignature> {\n  constructor(owner: Owner, args: HdsSideNavHeaderIconButtonSignature['Args']) {\n    super(owner, args);\n\n    deprecate(\n      'The `Hds::SideNav::Header::IconButton` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::Button` with the `isIconOnly` variant instead.',\n      false,\n      {\n        id: 'hds.components.sidenav.header.iconbutton',\n        until: '5.0.0',\n        url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4100',\n        for: '@hashicorp/design-system-components',\n        since: {\n          available: '4.10.0',\n          enabled: '4.10.0',\n        },\n      }\n    );\n  }\n\n  get ariaLabel(): string {\n    const { ariaLabel } = this.args;\n\n    assert(\n      '@ariaLabel for \"Hds::SideNav::Header::IconButton\" must have a valid value',\n      ariaLabel !== undefined\n    );\n\n    return ariaLabel;\n  }\n}\n"],"names":["HdsSideNavHeaderIconButton","Component","constructor","owner","args","deprecate","id","until","url","for","since","available","enabled","ariaLabel","assert","undefined","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;;AAiBe,MAAMA,0BAA0B,SAASC,SAAS,CAAsC;AACrGC,EAAAA,WAAWA,CAACC,KAAY,EAAEC,IAAiD,EAAE;AAC3E,IAAA,KAAK,CAACD,KAAK,EAAEC,IAAI,CAAC;AAElBC,IAAAA,SAAS,CACP,yNAAyN,EACzN,KAAK,EACL;AACEC,MAAAA,EAAE,EAAE,0CAA0C;AAC9CC,MAAAA,KAAK,EAAE,OAAO;AACdC,MAAAA,GAAG,EAAE,gFAAgF;AACrFC,MAAAA,GAAG,EAAE,qCAAqC;AAC1CC,MAAAA,KAAK,EAAE;AACLC,QAAAA,SAAS,EAAE,QAAQ;AACnBC,QAAAA,OAAO,EAAE;AACX;AACF,KACF,CAAC;AACH,EAAA;EAEA,IAAIC,SAASA,GAAW;IACtB,MAAM;AAAEA,MAAAA;KAAW,GAAG,IAAI,CAACT,IAAI;AAE/BU,IAAAA,MAAM,CACJ,2EAA2E,EAC3ED,SAAS,KAAKE,SAChB,CAAC;AAED,IAAA,OAAOF,SAAS;AAClB,EAAA;AACF;AAACG,oBAAA,CAAAC,QAAA,EA9BoBjB,0BAA0B,CAAA;;;;"}

package/dist/components/hds/side-nav/index.js

@@ -7,7 +7,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { g, i, n } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n{{!\n  THIS COMPONENT IS NOW DEPRECATED\n}}\n\n{{! IMPORTANT: we need to add \"squishies\" here (~) because otherwise the whitespace added by Ember causes the empty element to still have visible padding - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }}\n\n<Hds::SideNav::Base\n  class={{concat this.classNames (unless (has-block \"header\") \" hds-side-nav--is-headerless\")}}\n  ...attributes\n  {{on \"transitionstart\" (fn this.setTransition \"start\")}}\n  {{on \"transitionend\" (fn this.setTransition \"end\")}}\n  {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}\n  {{focus-trap isActive=this.shouldTrapFocus}}\n  {{did-insert this.didInsert}}\n>\n  <:root>\n    {{#if this.hasA11yRefocus}}\n      <NavigationNarrator\n        @routeChangeValidator={{@a11yRefocusRouteChangeValidator}}\n        @skipTo={{this.a11yRefocusSkipTo}}\n        @skipText={{@a11yRefocusSkipText}}\n        @navigationText={{@a11yRefocusNavigationText}}\n        @excludeAllQueryParams={{@a11yRefocusExcludeAllQueryParams}}\n      />\n    {{/if}}\n    {{#if this.showToggleButton}}\n      {{! template-lint-disable no-invalid-interactive}}\n      <div class=\"hds-side-nav__overlay\" {{on \"click\" this.toggleMinimizedStatus}} />\n      {{! template-lint-enable no-invalid-interactive}}\n      <Hds::SideNav::ToggleButton\n        aria-labelledby=\"hds-side-nav-header\"\n        aria-expanded={{if this.isMinimized \"false\" \"true\"}}\n        @icon={{if this.isMinimized \"chevrons-right\" \"chevrons-left\"}}\n        {{on \"click\" this.toggleMinimizedStatus}}\n      />\n    {{/if}}\n  </:root>\n  <:header as |Header|>\n    {{~yield (hash Header=Header isMinimized=this.isMinimized) to=\"header\"~}}\n  </:header>\n  <:body as |Body|>\n    {{~yield (hash Body=Body isMinimized=this.isMinimized) to=\"body\"~}}\n  </:body>\n  <:footer as |Footer|>\n    {{~yield (hash Footer=Footer isMinimized=this.isMinimized) to=\"footer\"~}}\n  </:footer>\n</Hds::SideNav::Base>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n{{!\n  THIS COMPONENT IS NOW DEPRECATED\n}}\n\n{{! IMPORTANT: we need to add \"squishies\" here (~) because otherwise the whitespace added by Ember causes the empty element to still have visible padding - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }}\n\n<Hds::SideNav::Base\n  class={{concat this.classNames (unless (has-block \"header\") \" hds-side-nav--is-headerless\")}}\n  ...attributes\n  {{on \"transitionstart\" (fn this.setTransition \"start\")}}\n  {{on \"transitionend\" (fn this.setTransition \"end\")}}\n  {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}\n  {{focus-trap isActive=this.shouldTrapFocus}}\n  {{did-insert this.didInsert}}\n>\n  <:root>\n    {{#if this.hasA11yRefocus}}\n      {{! @glint-expect-error - `ember-a11y-refocus` doesn\'t expose types yet }}\n      <NavigationNarrator\n        @routeChangeValidator={{@a11yRefocusRouteChangeValidator}}\n        @skipTo={{this.a11yRefocusSkipTo}}\n        @skipText={{@a11yRefocusSkipText}}\n        @navigationText={{@a11yRefocusNavigationText}}\n        @excludeAllQueryParams={{@a11yRefocusExcludeAllQueryParams}}\n      />\n    {{/if}}\n    {{#if this.showToggleButton}}\n      {{! template-lint-disable no-invalid-interactive}}\n      <div class=\"hds-side-nav__overlay\" {{on \"click\" this.toggleMinimizedStatus}} />\n      {{! template-lint-enable no-invalid-interactive}}\n      <Hds::SideNav::ToggleButton\n        aria-label={{this.ariaLabel}}\n        aria-labelledby={{unless this.ariaLabel \"hds-side-nav-header\"}}\n        aria-expanded={{if this.isMinimized \"false\" \"true\"}}\n        @icon={{if this.isMinimized \"chevrons-right\" \"chevrons-left\"}}\n        {{on \"click\" this.toggleMinimizedStatus}}\n      />\n    {{/if}}\n  </:root>\n  <:header as |Header|>\n    {{~yield (hash Header=Header isMinimized=this.isMinimized) to=\"header\"~}}\n  </:header>\n  <:body as |Body|>\n    {{~yield (hash Body=Body isMinimized=this.isMinimized) to=\"body\"~}}\n  </:body>\n  <:footer as |Footer|>\n    {{~yield (hash Footer=Footer isMinimized=this.isMinimized) to=\"footer\"~}}\n  </:footer>\n</Hds::SideNav::Base>");
 
 /**
  * Copyright (c) HashiCorp, Inc.
@@ -49,7 +49,7 @@ class HdsSideNav extends Component {
     });
     deprecate('The `Hds::SideNav` component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::AppSideNav` instead.', false, {
       id: 'hds.components.sidenav',
-      until: '6.0.0',
+      until: '5.0.0',
       url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4140',
       for: '@hashicorp/design-system-components',
       since: {
@@ -57,6 +57,18 @@ class HdsSideNav extends Component {
         enabled: '5.0.0'
       }
     });
+    if (args.ariaLabel !== undefined) {
+      deprecate('The `@ariaLabel` argument for "Hds::SideNav" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button', false, {
+        id: 'hds.sidenav',
+        until: '5.0.0',
+        url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4140',
+        for: '@hashicorp/design-system-components',
+        since: {
+          available: '4.14.0',
+          enabled: '5.0.0'
+        }
+      });
+    }
   }
   addEventListeners() {
     // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -96,6 +108,13 @@ class HdsSideNav extends Component {
   get showToggleButton() {
     return this.isResponsive && !this.isDesktop || this.isCollapsible;
   }
+
+  /**
+   * @deprecated The `@ariaLabel` argument for "Hds::SideNav" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button
+   */
+  get ariaLabel() {
+    return this.args.ariaLabel;
+  }
   get classNames() {
     const classes = []; // `hds-side-nav` is already set by the "Hds::SideNav::Base" component
 

package/dist/components/hds/side-nav/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/hds/side-nav/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { deprecate } from '@ember/debug';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { registerDestructor } from '@ember/destroyable';\n\nimport type { HdsSideNavBaseSignature } from './base';\nimport type Owner from '@ember/owner';\nimport type { NavigationNarratorSignature } from 'ember-a11y-refocus/components/navigation-narrator';\n\nexport interface HdsSideNavSignature {\n  Args: {\n    isResponsive?: boolean;\n    isCollapsible?: boolean;\n    isMinimized?: boolean;\n    hasA11yRefocus?: boolean;\n    a11yRefocusSkipTo?: string;\n    a11yRefocusSkipText?: string;\n    a11yRefocusNavigationText?: string;\n    a11yRefocusRouteChangeValidator?: NavigationNarratorSignature['Args']['routeChangeValidator'];\n    a11yRefocusExcludeAllQueryParams?: boolean;\n\n    onToggleMinimizedStatus?: (arg: boolean) => void;\n\n    onDesktopViewportChange?: (arg: boolean) => void;\n  };\n  Blocks: {\n    header?: [\n      {\n        Header?: HdsSideNavBaseSignature['Blocks']['header'];\n        isMinimized?: boolean;\n      },\n    ];\n    body?: [\n      {\n        Body?: HdsSideNavBaseSignature['Blocks']['body'];\n        isMinimized?: boolean;\n      },\n    ];\n    footer?: [\n      {\n        Footer?: HdsSideNavBaseSignature['Blocks']['footer'];\n        isMinimized?: boolean;\n      },\n    ];\n  };\n  Element: HdsSideNavBaseSignature['Element'];\n}\n\nexport default class HdsSideNav extends Component<HdsSideNavSignature> {\n  @tracked isAnimating = false;\n  @tracked isDesktop = true;\n  @tracked isMinimized = false;\n\n  desktopMQ: MediaQueryList;\n  containersToHide!: NodeListOf<Element>;\n  hasA11yRefocus = this.args.hasA11yRefocus ?? true;\n  a11yRefocusSkipTo = '#' + (this.args.a11yRefocusSkipTo ?? 'hds-main');\n\n  desktopMQVal = getComputedStyle(document.documentElement).getPropertyValue(\n    '--hds-app-desktop-breakpoint'\n  );\n\n  constructor(owner: Owner, args: HdsSideNavSignature['Args']) {\n    super(owner, args);\n    // sets the default minimized state on 'desktop' viewports\n    this.isMinimized = this.args.isMinimized ?? false;\n    this.desktopMQ = window.matchMedia(`(min-width:${this.desktopMQVal})`);\n    this.addEventListeners();\n    registerDestructor(this, (): void => {\n      this.removeEventListeners();\n    });\n\n    deprecate(\n      'The `Hds::SideNav` component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::AppSideNav` instead.',\n      false,\n      {\n        id: 'hds.components.sidenav',\n        until: '6.0.0',\n        url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4140',\n        for: '@hashicorp/design-system-components',\n        since: {\n          available: '4.19.0',\n          enabled: '5.0.0',\n        },\n      }\n    );\n  }\n\n  addEventListeners(): void {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    document.addEventListener('keydown', this.escapePress, true);\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    this.desktopMQ.addEventListener('change', this.updateDesktopVariable, true);\n    // if not instantiated as minimized via arguments\n    if (!this.args.isMinimized) {\n      // set initial state based on viewport using a \"synthetic\" event\n      const syntheticEvent = new MediaQueryListEvent('change', {\n        matches: this.desktopMQ.matches,\n        media: this.desktopMQ.media,\n      });\n      this.updateDesktopVariable(syntheticEvent);\n    }\n  }\n\n  removeEventListeners(): void {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    document.removeEventListener('keydown', this.escapePress, true);\n    this.desktopMQ.removeEventListener(\n      'change',\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.updateDesktopVariable,\n      true\n    );\n  }\n\n  // controls if the component reacts to viewport changes\n  get isResponsive(): boolean {\n    return this.args.isResponsive ?? true;\n  }\n\n  // controls if users can collapse the appsidenav on 'desktop' viewports\n  get isCollapsible(): boolean {\n    return this.args.isCollapsible ?? false;\n  }\n\n  get shouldTrapFocus(): boolean {\n    return this.isResponsive && !this.isDesktop && !this.isMinimized;\n  }\n\n  get showToggleButton(): boolean {\n    return (this.isResponsive && !this.isDesktop) || this.isCollapsible;\n  }\n\n  get classNames(): string {\n    const classes = []; // `hds-side-nav` is already set by the \"Hds::SideNav::Base\" component\n\n    // add specific class names for the different possible states\n    if (this.isResponsive) {\n      classes.push('hds-side-nav--is-responsive');\n    }\n    if (!this.isDesktop && this.isResponsive) {\n      classes.push('hds-side-nav--is-mobile');\n    } else {\n      classes.push('hds-side-nav--is-desktop');\n    }\n    if (this.isMinimized && this.isResponsive) {\n      classes.push('hds-side-nav--is-minimized');\n    } else {\n      classes.push('hds-side-nav--is-not-minimized');\n    }\n    if (this.isAnimating) {\n      classes.push('hds-side-nav--is-animating');\n    }\n\n    return classes.join(' ');\n  }\n\n  synchronizeInert(): void {\n    this.containersToHide?.forEach((element): void => {\n      if (this.isMinimized) {\n        element.setAttribute('inert', '');\n      } else {\n        element.removeAttribute('inert');\n      }\n    });\n  }\n\n  @action\n  escapePress(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && !this.isMinimized && !this.isDesktop) {\n      this.isMinimized = true;\n      this.synchronizeInert();\n    }\n  }\n\n  @action\n  toggleMinimizedStatus(): void {\n    this.isMinimized = !this.isMinimized;\n\n    this.synchronizeInert();\n\n    const { onToggleMinimizedStatus } = this.args;\n\n    if (typeof onToggleMinimizedStatus === 'function') {\n      onToggleMinimizedStatus(this.isMinimized);\n    }\n  }\n\n  @action\n  didInsert(element: HTMLElement): void {\n    this.containersToHide = element.querySelectorAll(\n      '.hds-side-nav-hide-when-minimized'\n    );\n  }\n\n  @action\n  setTransition(phase: string, event: TransitionEvent): void {\n    // we only want to respond to `width` animation/transitions\n    if (event.propertyName !== 'width') {\n      return;\n    }\n    if (phase === 'start') {\n      this.isAnimating = true;\n    } else {\n      this.isAnimating = false;\n    }\n  }\n\n  @action\n  updateDesktopVariable(event: MediaQueryListEvent): void {\n    this.isDesktop = event.matches;\n\n    // automatically minimize on narrow viewports (when not in desktop mode)\n    this.isMinimized = !this.isDesktop;\n\n    this.synchronizeInert();\n\n    const { onDesktopViewportChange } = this.args;\n\n    if (typeof onDesktopViewportChange === 'function') {\n      onDesktopViewportChange(this.isDesktop);\n    }\n  }\n}\n"],"names":["HdsSideNav","Component","g","prototype","tracked","i","void 0","desktopMQ","containersToHide","hasA11yRefocus","args","a11yRefocusSkipTo","desktopMQVal","getComputedStyle","document","documentElement","getPropertyValue","constructor","owner","isMinimized","window","matchMedia","addEventListeners","registerDestructor","removeEventListeners","deprecate","id","until","url","for","since","available","enabled","addEventListener","escapePress","updateDesktopVariable","syntheticEvent","MediaQueryListEvent","matches","media","removeEventListener","isResponsive","isCollapsible","shouldTrapFocus","isDesktop","showToggleButton","classNames","classes","push","isAnimating","join","synchronizeInert","forEach","element","setAttribute","removeAttribute","event","key","n","action","toggleMinimizedStatus","onToggleMinimizedStatus","didInsert","querySelectorAll","setTransition","phase","propertyName","onDesktopViewportChange","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/side-nav/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { deprecate } from '@ember/debug';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { registerDestructor } from '@ember/destroyable';\n\nimport type { HdsSideNavBaseSignature } from './base';\nimport type Owner from '@ember/owner';\n\nexport interface HdsSideNavSignature {\n  Args: {\n    isResponsive?: boolean;\n    isCollapsible?: boolean;\n    isMinimized?: boolean;\n    hasA11yRefocus?: boolean;\n    a11yRefocusSkipTo?: string;\n    a11yRefocusSkipText?: string;\n    a11yRefocusNavigationText?: string;\n    a11yRefocusRouteChangeValidator?: string;\n    a11yRefocusExcludeAllQueryParams?: boolean;\n    /**\n     * @deprecated The `@ariaLabel` argument for \"Hds::SideNav\" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button\n     */\n    ariaLabel?: string | undefined;\n\n    onToggleMinimizedStatus?: (arg: boolean) => void;\n\n    onDesktopViewportChange?: (arg: boolean) => void;\n  };\n  Blocks: {\n    header?: [\n      {\n        Header?: HdsSideNavBaseSignature['Blocks']['header'];\n        isMinimized?: boolean;\n      },\n    ];\n    body?: [\n      {\n        Body?: HdsSideNavBaseSignature['Blocks']['body'];\n        isMinimized?: boolean;\n      },\n    ];\n    footer?: [\n      {\n        Footer?: HdsSideNavBaseSignature['Blocks']['footer'];\n        isMinimized?: boolean;\n      },\n    ];\n  };\n  Element: HdsSideNavBaseSignature['Element'];\n}\n\nexport default class HdsSideNav extends Component<HdsSideNavSignature> {\n  @tracked isAnimating = false;\n  @tracked isDesktop = true;\n  @tracked isMinimized = false;\n\n  desktopMQ: MediaQueryList;\n  containersToHide!: NodeListOf<Element>;\n  hasA11yRefocus = this.args.hasA11yRefocus ?? true;\n  a11yRefocusSkipTo = '#' + (this.args.a11yRefocusSkipTo ?? 'hds-main');\n\n  desktopMQVal = getComputedStyle(document.documentElement).getPropertyValue(\n    '--hds-app-desktop-breakpoint'\n  );\n\n  constructor(owner: Owner, args: HdsSideNavSignature['Args']) {\n    super(owner, args);\n    // sets the default minimized state on 'desktop' viewports\n    this.isMinimized = this.args.isMinimized ?? false;\n    this.desktopMQ = window.matchMedia(`(min-width:${this.desktopMQVal})`);\n    this.addEventListeners();\n    registerDestructor(this, (): void => {\n      this.removeEventListeners();\n    });\n\n    deprecate(\n      'The `Hds::SideNav` component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::AppSideNav` instead.',\n      false,\n      {\n        id: 'hds.components.sidenav',\n        until: '5.0.0',\n        url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4140',\n        for: '@hashicorp/design-system-components',\n        since: {\n          available: '4.19.0',\n          enabled: '5.0.0',\n        },\n      }\n    );\n\n    if (args.ariaLabel !== undefined) {\n      deprecate(\n        'The `@ariaLabel` argument for \"Hds::SideNav\" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button',\n        false,\n        {\n          id: 'hds.sidenav',\n          until: '5.0.0',\n          url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4140',\n          for: '@hashicorp/design-system-components',\n          since: {\n            available: '4.14.0',\n            enabled: '5.0.0',\n          },\n        }\n      );\n    }\n  }\n\n  addEventListeners(): void {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    document.addEventListener('keydown', this.escapePress, true);\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    this.desktopMQ.addEventListener('change', this.updateDesktopVariable, true);\n    // if not instantiated as minimized via arguments\n    if (!this.args.isMinimized) {\n      // set initial state based on viewport using a \"synthetic\" event\n      const syntheticEvent = new MediaQueryListEvent('change', {\n        matches: this.desktopMQ.matches,\n        media: this.desktopMQ.media,\n      });\n      this.updateDesktopVariable(syntheticEvent);\n    }\n  }\n\n  removeEventListeners(): void {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    document.removeEventListener('keydown', this.escapePress, true);\n    this.desktopMQ.removeEventListener(\n      'change',\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.updateDesktopVariable,\n      true\n    );\n  }\n\n  // controls if the component reacts to viewport changes\n  get isResponsive(): boolean {\n    return this.args.isResponsive ?? true;\n  }\n\n  // controls if users can collapse the appsidenav on 'desktop' viewports\n  get isCollapsible(): boolean {\n    return this.args.isCollapsible ?? false;\n  }\n\n  get shouldTrapFocus(): boolean {\n    return this.isResponsive && !this.isDesktop && !this.isMinimized;\n  }\n\n  get showToggleButton(): boolean {\n    return (this.isResponsive && !this.isDesktop) || this.isCollapsible;\n  }\n\n  /**\n   * @deprecated The `@ariaLabel` argument for \"Hds::SideNav\" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button\n   */\n  get ariaLabel(): string | undefined {\n    return this.args.ariaLabel;\n  }\n\n  get classNames(): string {\n    const classes = []; // `hds-side-nav` is already set by the \"Hds::SideNav::Base\" component\n\n    // add specific class names for the different possible states\n    if (this.isResponsive) {\n      classes.push('hds-side-nav--is-responsive');\n    }\n    if (!this.isDesktop && this.isResponsive) {\n      classes.push('hds-side-nav--is-mobile');\n    } else {\n      classes.push('hds-side-nav--is-desktop');\n    }\n    if (this.isMinimized && this.isResponsive) {\n      classes.push('hds-side-nav--is-minimized');\n    } else {\n      classes.push('hds-side-nav--is-not-minimized');\n    }\n    if (this.isAnimating) {\n      classes.push('hds-side-nav--is-animating');\n    }\n\n    return classes.join(' ');\n  }\n\n  synchronizeInert(): void {\n    this.containersToHide?.forEach((element): void => {\n      if (this.isMinimized) {\n        element.setAttribute('inert', '');\n      } else {\n        element.removeAttribute('inert');\n      }\n    });\n  }\n\n  @action\n  escapePress(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && !this.isMinimized && !this.isDesktop) {\n      this.isMinimized = true;\n      this.synchronizeInert();\n    }\n  }\n\n  @action\n  toggleMinimizedStatus(): void {\n    this.isMinimized = !this.isMinimized;\n\n    this.synchronizeInert();\n\n    const { onToggleMinimizedStatus } = this.args;\n\n    if (typeof onToggleMinimizedStatus === 'function') {\n      onToggleMinimizedStatus(this.isMinimized);\n    }\n  }\n\n  @action\n  didInsert(element: HTMLElement): void {\n    this.containersToHide = element.querySelectorAll(\n      '.hds-side-nav-hide-when-minimized'\n    );\n  }\n\n  @action\n  setTransition(phase: string, event: TransitionEvent): void {\n    // we only want to respond to `width` animation/transitions\n    if (event.propertyName !== 'width') {\n      return;\n    }\n    if (phase === 'start') {\n      this.isAnimating = true;\n    } else {\n      this.isAnimating = false;\n    }\n  }\n\n  @action\n  updateDesktopVariable(event: MediaQueryListEvent): void {\n    this.isDesktop = event.matches;\n\n    // automatically minimize on narrow viewports (when not in desktop mode)\n    this.isMinimized = !this.isDesktop;\n\n    this.synchronizeInert();\n\n    const { onDesktopViewportChange } = this.args;\n\n    if (typeof onDesktopViewportChange === 'function') {\n      onDesktopViewportChange(this.isDesktop);\n    }\n  }\n}\n"],"names":["HdsSideNav","Component","g","prototype","tracked","i","void 0","desktopMQ","containersToHide","hasA11yRefocus","args","a11yRefocusSkipTo","desktopMQVal","getComputedStyle","document","documentElement","getPropertyValue","constructor","owner","isMinimized","window","matchMedia","addEventListeners","registerDestructor","removeEventListeners","deprecate","id","until","url","for","since","available","enabled","ariaLabel","undefined","addEventListener","escapePress","updateDesktopVariable","syntheticEvent","MediaQueryListEvent","matches","media","removeEventListener","isResponsive","isCollapsible","shouldTrapFocus","isDesktop","showToggleButton","classNames","classes","push","isAnimating","join","synchronizeInert","forEach","element","setAttribute","removeAttribute","event","key","n","action","toggleMinimizedStatus","onToggleMinimizedStatus","didInsert","querySelectorAll","setTransition","phase","propertyName","onDesktopViewportChange","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/side-nav/portal/target.js

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { service } from '@ember/service';
+import { inject } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { macroCondition, isTesting } from '@embroider/macros';
@@ -16,7 +16,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
 
 class HdsSideNavPortalTarget extends Component {
   static {
-    g(this.prototype, "router", [service]);
+    g(this.prototype, "router", [inject]);
   }
   #router = (i(this, "router"), void 0);
   static {

package/dist/components/hds/side-nav/portal/target.js.map

@@ -1 +1 @@
-{"version":3,"file":"target.js","sources":["../../../../../src/components/hds/side-nav/portal/target.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { macroCondition, isTesting } from '@embroider/macros';\n\nimport type { HdsSideNavPortalSignature } from './index';\n\nimport type { Registry as Services } from '@ember/service';\n\nexport interface HdsSideNavPortalTargetSignature {\n  Args: {\n    targetName?: HdsSideNavPortalSignature['Args']['targetName'];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsSideNavPortalTarget extends Component<HdsSideNavPortalTargetSignature> {\n  @service router!: Services['router'];\n\n  @tracked numSubnavs = 0;\n  @tracked lastPanelEl: Element | undefined;\n\n  static get prefersReducedMotionOverride(): boolean {\n    return macroCondition(isTesting()) ? true : false;\n  }\n\n  prefersReducedMotionMQ = window.matchMedia(\n    '(prefers-reduced-motion: reduce)'\n  );\n\n  get prefersReducedMotion(): boolean {\n    return (\n      HdsSideNavPortalTarget.prefersReducedMotionOverride ||\n      (this.prefersReducedMotionMQ && this.prefersReducedMotionMQ.matches)\n    );\n  }\n\n  @action\n  panelsChanged(portalCount: number): void {\n    this.numSubnavs = portalCount;\n  }\n\n  @action\n  didUpdateSubnav(element: HTMLElement, [count]: [number]): void {\n    this.animateSubnav(element, [count]);\n  }\n\n  @action\n  animateSubnav(element: HTMLElement, [count]: [number]): void {\n    /*\n     * Here is what the layout looks like for this setup\n     *\n\n                                    SideNav\n                                    +----------------------+\n                                    | +------------------+ |\n                                    | |    (\"header\")    | |\n                                    | +------------------+ |\n                                    |                      |\n                                    | +------------------+ |\n                                    | |    (\"body\")      | |\n        (PortalTarget)              | |                  | |\n        +----------------------------------------------+ | |\n        | +----------+  +----------+  |  +----------+  | | |\n        | | (Portal) |  | (Portal) |     | (Portal) |  | | |\n        | |          |  |          |  |  |          |  | | |\n        | |  hidden  |  |  hidden  |     | *active* |  | | |\n        | |   panel  |  |   panel  |  |  |   panel  |  | | |\n        | |          |  |          |     |          |  | | |\n        | |          |  |          |  |  |          |  | | |\n        | |          |  |          |     |          |  | | |\n        | |          |  |          |  |  |          |  | | |\n        | |          |  |          |     |          |  | | |\n        | |          |  |          |  |  |          |  | | |\n        | |          |  |          |     |          |  | | |\n        | +----------+  +----------+  |  +----------+  | | |\n        +----------------------------------------------+ | |\n                                    | |                  | |\n                                    | +------------------+ |\n                                    |                      |\n                                    | +------------------+ |\n                                    | |    (\"footer\")    | |\n                                    | +------------------+ |\n                                    +----------------------+\n\n     *\n     * every time `HcAppFrame::SideNav::Portal` renders, it contains a portaled \"panel\"\n     * that is rendered into the `hds-side-nav__content-panels` (inside the PortalTarget).\n     *\n     * Rendering or unrendering other `HcAppFrame::SideNav::Portal`s triggers the number of\n     * subnavs to change (via `numSubnavs`), so this function runs and slides\n     * `hds-side-nav__content-panels` left or right using the `element.animate` api.\n     *\n     * */\n\n    const activeIndex = count - 1;\n    const targetElement = element;\n    const { prefersReducedMotion } = this;\n\n    const styles = getComputedStyle(targetElement);\n    const columnWidth = styles.getPropertyValue(\n      '--hds-app-sidenav-width-expanded'\n    );\n    const slideDuration = prefersReducedMotion ? 0 : 150;\n    let fadeDuration = prefersReducedMotion ? 0 : 175;\n    let fadeDelay = prefersReducedMotion ? 0 : 50;\n\n    // slide entire parent panel\n    const start = styles.transform;\n    const end = `translateX(-${activeIndex * parseInt(columnWidth, 10)}px)`;\n    const anim = targetElement.animate(\n      [{ transform: start }, { transform: end }],\n      {\n        duration: slideDuration,\n        easing: 'cubic-bezier(0.65, 0, 0.35, 1)',\n        fill: 'forwards',\n      }\n    );\n\n    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n    anim.finished.then((): void => {\n      // uncomment this if we need/want to scroll the element to the top\n      // targetElement.scrollIntoView(true);\n      if (activeIndex > 0) {\n        const allPrev = Array.from(targetElement.children).slice(\n          0,\n          activeIndex\n        ) as HTMLElement[];\n        for (const ele of allPrev) {\n          ele.ariaHidden = 'true';\n          ele.style.setProperty('visibility', 'hidden');\n          ele.style.setProperty('opacity', '0');\n        }\n      }\n      // Notice: we don't add the styles by default because it writes a `style` attribute to the element and it causes an additional re-render\n      if (macroCondition(isTesting())) {\n        // Check the visibility of the element before attempting to commitStyles.\n        if (targetElement.offsetParent !== null) {\n          anim.commitStyles();\n        }\n      }\n    });\n\n    // fade in next panel\n    const nextPanelEl = targetElement.children[activeIndex] as HTMLElement;\n\n    // get reference to last child panel\n    const lastPanelEl = targetElement.children[\n      targetElement.children.length - 1\n    ] as HTMLElement;\n\n    if (nextPanelEl) {\n      nextPanelEl.ariaHidden = 'false';\n      nextPanelEl.style.setProperty('visibility', 'visible');\n      // this eliminates a flicker if there's only one subnav rendering or if we\n      // already just rendered this panel.\n      if (this.lastPanelEl) {\n        if (activeIndex === 0 || nextPanelEl.isSameNode(this.lastPanelEl)) {\n          fadeDelay = 0;\n          fadeDuration = 0;\n        }\n      }\n\n      // remember the last panel\n      this.lastPanelEl = lastPanelEl;\n\n      nextPanelEl.animate([{ opacity: '0' }, { opacity: '1' }], {\n        delay: fadeDelay,\n        duration: fadeDuration,\n        fill: 'forwards',\n      });\n    }\n  }\n}\n"],"names":["HdsSideNavPortalTarget","Component","g","prototype","service","i","void 0","tracked","prefersReducedMotionOverride","macroCondition","isTesting","prefersReducedMotionMQ","window","matchMedia","prefersReducedMotion","matches","panelsChanged","portalCount","numSubnavs","n","action","didUpdateSubnav","element","count","animateSubnav","activeIndex","targetElement","styles","getComputedStyle","columnWidth","getPropertyValue","slideDuration","fadeDuration","fadeDelay","start","transform","end","parseInt","anim","animate","duration","easing","fill","finished","then","allPrev","Array","from","children","slice","ele","ariaHidden","style","setProperty","offsetParent","commitStyles","nextPanelEl","lastPanelEl","length","isSameNode","opacity","delay","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"target.js","sources":["../../../../../src/components/hds/side-nav/portal/target.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { inject as service } from '@ember/service';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { macroCondition, isTesting } from '@embroider/macros';\n\nimport type { HdsSideNavPortalSignature } from './index';\n\nimport type { Registry as Services } from '@ember/service';\n\nexport interface HdsSideNavPortalTargetSignature {\n  Args: {\n    targetName?: HdsSideNavPortalSignature['Args']['targetName'];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsSideNavPortalTarget extends Component<HdsSideNavPortalTargetSignature> {\n  @service router!: Services['router'];\n\n  @tracked numSubnavs = 0;\n  @tracked lastPanelEl: Element | undefined;\n\n  static get prefersReducedMotionOverride(): boolean {\n    return macroCondition(isTesting()) ? true : false;\n  }\n\n  prefersReducedMotionMQ = window.matchMedia(\n    '(prefers-reduced-motion: reduce)'\n  );\n\n  get prefersReducedMotion(): boolean {\n    return (\n      HdsSideNavPortalTarget.prefersReducedMotionOverride ||\n      (this.prefersReducedMotionMQ && this.prefersReducedMotionMQ.matches)\n    );\n  }\n\n  @action\n  panelsChanged(portalCount: number): void {\n    this.numSubnavs = portalCount;\n  }\n\n  @action\n  didUpdateSubnav(element: HTMLElement, [count]: [number]): void {\n    this.animateSubnav(element, [count]);\n  }\n\n  @action\n  animateSubnav(element: HTMLElement, [count]: [number]): void {\n    /*\n     * Here is what the layout looks like for this setup\n     *\n\n                                    SideNav\n                                    +----------------------+\n                                    | +------------------+ |\n                                    | |    (\"header\")    | |\n                                    | +------------------+ |\n                                    |                      |\n                                    | +------------------+ |\n                                    | |    (\"body\")      | |\n        (PortalTarget)              | |                  | |\n        +----------------------------------------------+ | |\n        | +----------+  +----------+  |  +----------+  | | |\n        | | (Portal) |  | (Portal) |     | (Portal) |  | | |\n        | |          |  |          |  |  |          |  | | |\n        | |  hidden  |  |  hidden  |     | *active* |  | | |\n        | |   panel  |  |   panel  |  |  |   panel  |  | | |\n        | |          |  |          |     |          |  | | |\n        | |          |  |          |  |  |          |  | | |\n        | |          |  |          |     |          |  | | |\n        | |          |  |          |  |  |          |  | | |\n        | |          |  |          |     |          |  | | |\n        | |          |  |          |  |  |          |  | | |\n        | |          |  |          |     |          |  | | |\n        | +----------+  +----------+  |  +----------+  | | |\n        +----------------------------------------------+ | |\n                                    | |                  | |\n                                    | +------------------+ |\n                                    |                      |\n                                    | +------------------+ |\n                                    | |    (\"footer\")    | |\n                                    | +------------------+ |\n                                    +----------------------+\n\n     *\n     * every time `HcAppFrame::SideNav::Portal` renders, it contains a portaled \"panel\"\n     * that is rendered into the `hds-side-nav__content-panels` (inside the PortalTarget).\n     *\n     * Rendering or unrendering other `HcAppFrame::SideNav::Portal`s triggers the number of\n     * subnavs to change (via `numSubnavs`), so this function runs and slides\n     * `hds-side-nav__content-panels` left or right using the `element.animate` api.\n     *\n     * */\n\n    const activeIndex = count - 1;\n    const targetElement = element;\n    const { prefersReducedMotion } = this;\n\n    const styles = getComputedStyle(targetElement);\n    const columnWidth = styles.getPropertyValue(\n      '--hds-app-sidenav-width-expanded'\n    );\n    const slideDuration = prefersReducedMotion ? 0 : 150;\n    let fadeDuration = prefersReducedMotion ? 0 : 175;\n    let fadeDelay = prefersReducedMotion ? 0 : 50;\n\n    // slide entire parent panel\n    const start = styles.transform;\n    const end = `translateX(-${activeIndex * parseInt(columnWidth, 10)}px)`;\n    const anim = targetElement.animate(\n      [{ transform: start }, { transform: end }],\n      {\n        duration: slideDuration,\n        easing: 'cubic-bezier(0.65, 0, 0.35, 1)',\n        fill: 'forwards',\n      }\n    );\n\n    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n    anim.finished.then((): void => {\n      // uncomment this if we need/want to scroll the element to the top\n      // targetElement.scrollIntoView(true);\n      if (activeIndex > 0) {\n        const allPrev = Array.from(targetElement.children).slice(\n          0,\n          activeIndex\n        ) as HTMLElement[];\n        for (const ele of allPrev) {\n          ele.ariaHidden = 'true';\n          ele.style.setProperty('visibility', 'hidden');\n          ele.style.setProperty('opacity', '0');\n        }\n      }\n      // Notice: we don't add the styles by default because it writes a `style` attribute to the element and it causes an additional re-render\n      if (macroCondition(isTesting())) {\n        // Check the visibility of the element before attempting to commitStyles.\n        if (targetElement.offsetParent !== null) {\n          anim.commitStyles();\n        }\n      }\n    });\n\n    // fade in next panel\n    const nextPanelEl = targetElement.children[activeIndex] as HTMLElement;\n\n    // get reference to last child panel\n    const lastPanelEl = targetElement.children[\n      targetElement.children.length - 1\n    ] as HTMLElement;\n\n    if (nextPanelEl) {\n      nextPanelEl.ariaHidden = 'false';\n      nextPanelEl.style.setProperty('visibility', 'visible');\n      // this eliminates a flicker if there's only one subnav rendering or if we\n      // already just rendered this panel.\n      if (this.lastPanelEl) {\n        if (activeIndex === 0 || nextPanelEl.isSameNode(this.lastPanelEl)) {\n          fadeDelay = 0;\n          fadeDuration = 0;\n        }\n      }\n\n      // remember the last panel\n      this.lastPanelEl = lastPanelEl;\n\n      nextPanelEl.animate([{ opacity: '0' }, { opacity: '1' }], {\n        delay: fadeDelay,\n        duration: fadeDuration,\n        fill: 'forwards',\n      });\n    }\n  }\n}\n"],"names":["HdsSideNavPortalTarget","Component","g","prototype","service","i","void 0","tracked","prefersReducedMotionOverride","macroCondition","isTesting","prefersReducedMotionMQ","window","matchMedia","prefersReducedMotion","matches","panelsChanged","portalCount","numSubnavs","n","action","didUpdateSubnav","element","count","animateSubnav","activeIndex","targetElement","styles","getComputedStyle","columnWidth","getPropertyValue","slideDuration","fadeDuration","fadeDelay","start","transform","end","parseInt","anim","animate","duration","easing","fill","finished","then","allPrev","Array","from","children","slice","ele","ariaHidden","style","setProperty","offsetParent","commitStyles","nextPanelEl","lastPanelEl","length","isSameNode","opacity","delay","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/time/index.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { typeOf } from '@ember/utils';
-import { service } from '@ember/service';
+import { inject } from '@ember/service';
 import { action } from '@ember/object';
 import { precompileTemplate } from '@ember/template-compilation';
 import { g, i, n } from 'decorator-transforms/runtime';
@@ -16,7 +16,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
 const dateIsValid = date => date instanceof Date && !isNaN(+date);
 class HdsTime extends Component {
   static {
-    g(this.prototype, "hdsTime", [service]);
+    g(this.prototype, "hdsTime", [inject]);
   }
   #hdsTime = (i(this, "hdsTime"), void 0);
   get date() {

package/dist/components/hds/time/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/hds/time/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { typeOf } from '@ember/utils';\nimport { service } from '@ember/service';\nimport { action } from '@ember/object';\nimport type { DisplayType } from '../../../services/hds-time-types.ts';\n\nimport type TimeService from '../../../services/hds-time';\n\nexport interface HdsTimeSignature {\n  Args: {\n    date?: Date | string;\n    startDate?: Date | string;\n    endDate?: Date | string;\n    display?:\n      | 'utc'\n      | 'relative'\n      | 'friendly-only'\n      | 'friendly-local'\n      | 'friendly-relative';\n    isOpen?: boolean;\n    hasTooltip?: boolean;\n    isoUtcString?: string;\n  };\n  Element: HTMLElement;\n}\n\nconst dateIsValid = (date?: Date | string): date is Date =>\n  date instanceof Date && !isNaN(+date);\n\nexport default class HdsTime extends Component<HdsTimeSignature> {\n  @service declare readonly hdsTime: TimeService;\n\n  get date(): Date | undefined {\n    const { date } = this.args;\n\n    // Sometimes an ISO date string might be passed in instead of a JS Date.\n    if (date) {\n      if (typeOf(date) === 'string') {\n        return new Date(date);\n      } else if (date instanceof Date) {\n        return date;\n      }\n    }\n  }\n\n  get startDate(): Date | undefined {\n    const { startDate } = this.args;\n\n    if (startDate) {\n      if (typeOf(startDate) === 'string') {\n        return new Date(startDate);\n      } else if (startDate instanceof Date) {\n        return startDate;\n      }\n    }\n  }\n\n  get endDate(): Date | undefined {\n    const { endDate } = this.args;\n\n    if (endDate) {\n      if (typeOf(endDate) === 'string') {\n        return new Date(endDate);\n      } else if (endDate instanceof Date) {\n        return endDate;\n      }\n    }\n  }\n\n  get isValidDate(): boolean {\n    return dateIsValid(this.date);\n  }\n\n  get isValidDateRange(): boolean {\n    if (dateIsValid(this.startDate) && dateIsValid(this.endDate)) {\n      return this.startDate <= this.endDate;\n    }\n    return false;\n  }\n\n  get hasTooltip(): boolean {\n    return this.args.hasTooltip ?? true;\n  }\n\n  get isoUtcString(): string {\n    const date = this.date;\n\n    if (dateIsValid(date)) {\n      const isoUtcString = this.hdsTime.toIsoUtcString(date);\n\n      if (isoUtcString) return isoUtcString;\n    }\n\n    return '';\n  }\n\n  get rangeIsoUtcString(): string {\n    const startDate = this.startDate;\n    const endDate = this.endDate;\n\n    if (dateIsValid(startDate) && dateIsValid(endDate)) {\n      return `${this.hdsTime.toIsoUtcString(startDate)}–${this.hdsTime.toIsoUtcString(endDate)}`;\n    }\n    return '';\n  }\n\n  get display(): DisplayType {\n    const date = this.date;\n    const { display } = this.args;\n\n    if (dateIsValid(date)) {\n      const nextDiff = this.hdsTime.timeDifference(this.hdsTime.now, date);\n      return this.hdsTime.format(nextDiff, display);\n    }\n    return {\n      options: undefined,\n      difference: { absValueInMs: 0, valueInMs: 0 },\n      relative: { value: 0, unit: undefined },\n    };\n  }\n\n  get isOpen(): boolean {\n    return this.args.isOpen ?? false;\n  }\n\n  @action\n  didInsertNode(): void {\n    const date = this.date;\n\n    if (dateIsValid(date)) {\n      this.hdsTime.register(date);\n    }\n  }\n\n  @action\n  willDestroyNode(): void {\n    const date = this.date;\n\n    if (dateIsValid(date)) {\n      this.hdsTime.unregister(date);\n    }\n  }\n}\n"],"names":["dateIsValid","date","Date","isNaN","HdsTime","Component","g","prototype","service","i","void 0","args","typeOf","startDate","endDate","isValidDate","isValidDateRange","hasTooltip","isoUtcString","hdsTime","toIsoUtcString","rangeIsoUtcString","display","nextDiff","timeDifference","now","format","options","undefined","difference","absValueInMs","valueInMs","relative","value","unit","isOpen","didInsertNode","register","n","action","willDestroyNode","unregister","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/time/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { typeOf } from '@ember/utils';\nimport { inject as service } from '@ember/service';\nimport { action } from '@ember/object';\nimport type { DisplayType } from '../../../services/hds-time-types.ts';\n\nimport type TimeService from '../../../services/hds-time';\n\nexport interface HdsTimeSignature {\n  Args: {\n    date?: Date | string;\n    startDate?: Date | string;\n    endDate?: Date | string;\n    display?:\n      | 'utc'\n      | 'relative'\n      | 'friendly-only'\n      | 'friendly-local'\n      | 'friendly-relative';\n    isOpen?: boolean;\n    hasTooltip?: boolean;\n    isoUtcString?: string;\n  };\n  Element: HTMLElement;\n}\n\nconst dateIsValid = (date?: Date | string): date is Date =>\n  date instanceof Date && !isNaN(+date);\n\nexport default class HdsTime extends Component<HdsTimeSignature> {\n  @service declare readonly hdsTime: TimeService;\n\n  get date(): Date | undefined {\n    const { date } = this.args;\n\n    // Sometimes an ISO date string might be passed in instead of a JS Date.\n    if (date) {\n      if (typeOf(date) === 'string') {\n        return new Date(date);\n      } else if (date instanceof Date) {\n        return date;\n      }\n    }\n  }\n\n  get startDate(): Date | undefined {\n    const { startDate } = this.args;\n\n    if (startDate) {\n      if (typeOf(startDate) === 'string') {\n        return new Date(startDate);\n      } else if (startDate instanceof Date) {\n        return startDate;\n      }\n    }\n  }\n\n  get endDate(): Date | undefined {\n    const { endDate } = this.args;\n\n    if (endDate) {\n      if (typeOf(endDate) === 'string') {\n        return new Date(endDate);\n      } else if (endDate instanceof Date) {\n        return endDate;\n      }\n    }\n  }\n\n  get isValidDate(): boolean {\n    return dateIsValid(this.date);\n  }\n\n  get isValidDateRange(): boolean {\n    if (dateIsValid(this.startDate) && dateIsValid(this.endDate)) {\n      return this.startDate <= this.endDate;\n    }\n    return false;\n  }\n\n  get hasTooltip(): boolean {\n    return this.args.hasTooltip ?? true;\n  }\n\n  get isoUtcString(): string {\n    const date = this.date;\n\n    if (dateIsValid(date)) {\n      const isoUtcString = this.hdsTime.toIsoUtcString(date);\n\n      if (isoUtcString) return isoUtcString;\n    }\n\n    return '';\n  }\n\n  get rangeIsoUtcString(): string {\n    const startDate = this.startDate;\n    const endDate = this.endDate;\n\n    if (dateIsValid(startDate) && dateIsValid(endDate)) {\n      return `${this.hdsTime.toIsoUtcString(startDate)}–${this.hdsTime.toIsoUtcString(endDate)}`;\n    }\n    return '';\n  }\n\n  get display(): DisplayType {\n    const date = this.date;\n    const { display } = this.args;\n\n    if (dateIsValid(date)) {\n      const nextDiff = this.hdsTime.timeDifference(this.hdsTime.now, date);\n      return this.hdsTime.format(nextDiff, display);\n    }\n    return {\n      options: undefined,\n      difference: { absValueInMs: 0, valueInMs: 0 },\n      relative: { value: 0, unit: undefined },\n    };\n  }\n\n  get isOpen(): boolean {\n    return this.args.isOpen ?? false;\n  }\n\n  @action\n  didInsertNode(): void {\n    const date = this.date;\n\n    if (dateIsValid(date)) {\n      this.hdsTime.register(date);\n    }\n  }\n\n  @action\n  willDestroyNode(): void {\n    const date = this.date;\n\n    if (dateIsValid(date)) {\n      this.hdsTime.unregister(date);\n    }\n  }\n}\n"],"names":["dateIsValid","date","Date","isNaN","HdsTime","Component","g","prototype","service","i","void 0","args","typeOf","startDate","endDate","isValidDate","isValidDateRange","hasTooltip","isoUtcString","hdsTime","toIsoUtcString","rangeIsoUtcString","display","nextDiff","timeDifference","now","format","options","undefined","difference","absValueInMs","valueInMs","relative","value","unit","isOpen","didInsertNode","register","n","action","willDestroyNode","unregister","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/time/range.js

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { service } from '@ember/service';
+import { inject } from '@ember/service';
 import { precompileTemplate } from '@ember/template-compilation';
 import { g, i } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
@@ -13,7 +13,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
 
 class HdsTimeRange extends Component {
   static {
-    g(this.prototype, "hdsTime", [service]);
+    g(this.prototype, "hdsTime", [inject]);
   }
   #hdsTime = (i(this, "hdsTime"), void 0);
   get startDateIsoUtcString() {

package/dist/components/hds/time/range.js.map

@@ -1 +1 @@
-{"version":3,"file":"range.js","sources":["../../../../src/components/hds/time/range.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\nimport type TimeService from '../../../services/hds-time';\n\nexport interface HdsTimeRangeSignature {\n  Args: {\n    startDate?: Date;\n    endDate?: Date;\n  };\n  Element: HTMLElement;\n}\n\nexport default class HdsTimeRange extends Component<HdsTimeRangeSignature> {\n  @service declare readonly hdsTime: TimeService;\n\n  get startDateIsoUtcString(): string | undefined {\n    const { startDate } = this.args;\n    if (startDate) {\n      return this.hdsTime.toIsoUtcString(startDate);\n    }\n  }\n\n  get endDateIsoUtcString(): string | undefined {\n    const { endDate } = this.args;\n    if (endDate) {\n      return this.hdsTime.toIsoUtcString(endDate);\n    }\n  }\n\n  get startDateDisplayFormat(): {\n    month: Intl.DateTimeFormatOptions['month'];\n    day: Intl.DateTimeFormatOptions['day'];\n    year?: Intl.DateTimeFormatOptions['year'];\n    hour?: Intl.DateTimeFormatOptions['hour'];\n    minute?: Intl.DateTimeFormatOptions['minute'];\n    second?: Intl.DateTimeFormatOptions['second'];\n  } {\n    const { startDate, endDate } = this.args;\n\n    if (startDate?.getFullYear() !== endDate?.getFullYear()) {\n      return {\n        month: 'short',\n        day: 'numeric',\n        year: 'numeric',\n      };\n    } else {\n      return {\n        month: 'short',\n        day: 'numeric',\n        year: undefined,\n      };\n    }\n  }\n\n  get endDateDisplayFormat(): {\n    month: Intl.DateTimeFormatOptions['month'];\n    day: Intl.DateTimeFormatOptions['day'];\n    year?: Intl.DateTimeFormatOptions['year'];\n    hour?: Intl.DateTimeFormatOptions['hour'];\n    minute?: Intl.DateTimeFormatOptions['minute'];\n    second?: Intl.DateTimeFormatOptions['second'];\n  } {\n    return {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    };\n  }\n}\n"],"names":["HdsTimeRange","Component","g","prototype","service","i","void 0","startDateIsoUtcString","startDate","args","hdsTime","toIsoUtcString","endDateIsoUtcString","endDate","startDateDisplayFormat","getFullYear","month","day","year","undefined","endDateDisplayFormat","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;;AAce,MAAMA,YAAY,SAASC,SAAS,CAAwB;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACxEC,OAAO,CAAA,CAAA;AAAA;AAAA,EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAAC,MAAA;EAER,IAAIC,qBAAqBA,GAAuB;IAC9C,MAAM;AAAEC,MAAAA;KAAW,GAAG,IAAI,CAACC,IAAI;AAC/B,IAAA,IAAID,SAAS,EAAE;AACb,MAAA,OAAO,IAAI,CAACE,OAAO,CAACC,cAAc,CAACH,SAAS,CAAC;AAC/C,IAAA;AACF,EAAA;EAEA,IAAII,mBAAmBA,GAAuB;IAC5C,MAAM;AAAEC,MAAAA;KAAS,GAAG,IAAI,CAACJ,IAAI;AAC7B,IAAA,IAAII,OAAO,EAAE;AACX,MAAA,OAAO,IAAI,CAACH,OAAO,CAACC,cAAc,CAACE,OAAO,CAAC;AAC7C,IAAA;AACF,EAAA;EAEA,IAAIC,sBAAsBA,GAOxB;IACA,MAAM;MAAEN,SAAS;AAAEK,MAAAA;KAAS,GAAG,IAAI,CAACJ,IAAI;IAExC,IAAID,SAAS,EAAEO,WAAW,EAAE,KAAKF,OAAO,EAAEE,WAAW,EAAE,EAAE;MACvD,OAAO;AACLC,QAAAA,KAAK,EAAE,OAAO;AACdC,QAAAA,GAAG,EAAE,SAAS;AACdC,QAAAA,IAAI,EAAE;OACP;AACH,IAAA,CAAC,MAAM;MACL,OAAO;AACLF,QAAAA,KAAK,EAAE,OAAO;AACdC,QAAAA,GAAG,EAAE,SAAS;AACdC,QAAAA,IAAI,EAAEC;OACP;AACH,IAAA;AACF,EAAA;EAEA,IAAIC,oBAAoBA,GAOtB;IACA,OAAO;AACLJ,MAAAA,KAAK,EAAE,OAAO;AACdC,MAAAA,GAAG,EAAE,SAAS;AACdC,MAAAA,IAAI,EAAE;KACP;AACH,EAAA;AACF;AAACG,oBAAA,CAAAC,QAAA,EAxDoBtB,YAAY,CAAA;;;;"}
+{"version":3,"file":"range.js","sources":["../../../../src/components/hds/time/range.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { inject as service } from '@ember/service';\nimport type TimeService from '../../../services/hds-time';\n\nexport interface HdsTimeRangeSignature {\n  Args: {\n    startDate?: Date;\n    endDate?: Date;\n  };\n  Element: HTMLElement;\n}\n\nexport default class HdsTimeRange extends Component<HdsTimeRangeSignature> {\n  @service declare readonly hdsTime: TimeService;\n\n  get startDateIsoUtcString(): string | undefined {\n    const { startDate } = this.args;\n    if (startDate) {\n      return this.hdsTime.toIsoUtcString(startDate);\n    }\n  }\n\n  get endDateIsoUtcString(): string | undefined {\n    const { endDate } = this.args;\n    if (endDate) {\n      return this.hdsTime.toIsoUtcString(endDate);\n    }\n  }\n\n  get startDateDisplayFormat(): {\n    month: Intl.DateTimeFormatOptions['month'];\n    day: Intl.DateTimeFormatOptions['day'];\n    year?: Intl.DateTimeFormatOptions['year'];\n    hour?: Intl.DateTimeFormatOptions['hour'];\n    minute?: Intl.DateTimeFormatOptions['minute'];\n    second?: Intl.DateTimeFormatOptions['second'];\n  } {\n    const { startDate, endDate } = this.args;\n\n    if (startDate?.getFullYear() !== endDate?.getFullYear()) {\n      return {\n        month: 'short',\n        day: 'numeric',\n        year: 'numeric',\n      };\n    } else {\n      return {\n        month: 'short',\n        day: 'numeric',\n        year: undefined,\n      };\n    }\n  }\n\n  get endDateDisplayFormat(): {\n    month: Intl.DateTimeFormatOptions['month'];\n    day: Intl.DateTimeFormatOptions['day'];\n    year?: Intl.DateTimeFormatOptions['year'];\n    hour?: Intl.DateTimeFormatOptions['hour'];\n    minute?: Intl.DateTimeFormatOptions['minute'];\n    second?: Intl.DateTimeFormatOptions['second'];\n  } {\n    return {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    };\n  }\n}\n"],"names":["HdsTimeRange","Component","g","prototype","service","i","void 0","startDateIsoUtcString","startDate","args","hdsTime","toIsoUtcString","endDateIsoUtcString","endDate","startDateDisplayFormat","getFullYear","month","day","year","undefined","endDateDisplayFormat","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;;AAce,MAAMA,YAAY,SAASC,SAAS,CAAwB;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACxEC,MAAO,CAAA,CAAA;AAAA;AAAA,EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAAC,MAAA;EAER,IAAIC,qBAAqBA,GAAuB;IAC9C,MAAM;AAAEC,MAAAA;KAAW,GAAG,IAAI,CAACC,IAAI;AAC/B,IAAA,IAAID,SAAS,EAAE;AACb,MAAA,OAAO,IAAI,CAACE,OAAO,CAACC,cAAc,CAACH,SAAS,CAAC;AAC/C,IAAA;AACF,EAAA;EAEA,IAAII,mBAAmBA,GAAuB;IAC5C,MAAM;AAAEC,MAAAA;KAAS,GAAG,IAAI,CAACJ,IAAI;AAC7B,IAAA,IAAII,OAAO,EAAE;AACX,MAAA,OAAO,IAAI,CAACH,OAAO,CAACC,cAAc,CAACE,OAAO,CAAC;AAC7C,IAAA;AACF,EAAA;EAEA,IAAIC,sBAAsBA,GAOxB;IACA,MAAM;MAAEN,SAAS;AAAEK,MAAAA;KAAS,GAAG,IAAI,CAACJ,IAAI;IAExC,IAAID,SAAS,EAAEO,WAAW,EAAE,KAAKF,OAAO,EAAEE,WAAW,EAAE,EAAE;MACvD,OAAO;AACLC,QAAAA,KAAK,EAAE,OAAO;AACdC,QAAAA,GAAG,EAAE,SAAS;AACdC,QAAAA,IAAI,EAAE;OACP;AACH,IAAA,CAAC,MAAM;MACL,OAAO;AACLF,QAAAA,KAAK,EAAE,OAAO;AACdC,QAAAA,GAAG,EAAE,SAAS;AACdC,QAAAA,IAAI,EAAEC;OACP;AACH,IAAA;AACF,EAAA;EAEA,IAAIC,oBAAoBA,GAOtB;IACA,OAAO;AACLJ,MAAAA,KAAK,EAAE,OAAO;AACdC,MAAAA,GAAG,EAAE,SAAS;AACdC,MAAAA,IAAI,EAAE;KACP;AACH,EAAA;AACF;AAACG,oBAAA,CAAAC,QAAA,EAxDoBtB,YAAY,CAAA;;;;"}

package/dist/components.js

@@ -81,7 +81,7 @@ export { default as HdsDropdownListItemTitle } from './components/hds/dropdown/l
 export { default as HdsDropdownToggleButton } from './components/hds/dropdown/toggle/button.js';
 export { default as HdsDropdownToggleIcon } from './components/hds/dropdown/toggle/icon.js';
 export { HdsDropdownListItemInteractiveColorValues } from './components/hds/dropdown/list-item/types.js';
-export { HdsDropdownToggleButtonColorValues, HdsDropdownToggleButtonSizeValues, HdsDropdownToggleIconSizeValues } from './components/hds/dropdown/toggle/types.js';
+export { HdsDropdownToggleButtonColorValues, HdsDropdownToggleButtonSizeValues, HdsDropdownToggleIconAllowedIconValues, HdsDropdownToggleIconSizeValues } from './components/hds/dropdown/toggle/types.js';
 export { HdsDropdownPositionToPlacementValues, HdsDropdownPositionValues } from './components/hds/dropdown/types.js';
 export { default as HdsFlyout } from './components/hds/flyout/index.js';
 export { HdsFlyoutSizesValues } from './components/hds/flyout/types.js';
@@ -182,6 +182,7 @@ export { default as HdsSideNav } from './components/hds/side-nav/index.js';
 export { default as HdsSideNavBase } from './components/hds/side-nav/base.js';
 export { default as HdsSideNavHeader } from './components/hds/side-nav/header/index.js';
 export { default as HdsSideNavHeaderHomeLink } from './components/hds/side-nav/header/home-link.js';
+export { default as HdsSideNavHeaderIconButton } from './components/hds/side-nav/header/icon-button.js';
 export { default as HdsSideNavList } from './components/hds/side-nav/list/index.js';
 export { default as HdsSideNavListBackLink } from './components/hds/side-nav/list/back-link.js';
 export { default as HdsSideNavListItem } from './components/hds/side-nav/list/item.js';
@@ -246,5 +247,6 @@ export { HdsDialogPrimitiveHeaderTitleTagValues } from './components/hds/dialog-
 export { default as HdsDisclosurePrimitive } from './components/hds/disclosure-primitive/index.js';
 export { default as HdsDismissButton } from './components/hds/dismiss-button/index.js';
 export { default as HdsInteractive } from './components/hds/interactive/index.js';
+export { default as HdsMenuPrimitive } from './components/hds/menu-primitive/index.js';
 export { default as HdsPopoverPrimitive } from './components/hds/popover-primitive/index.js';
 //# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/instance-initializers/load-sprite.js

@@ -6,8 +6,11 @@ import config from 'ember-get-config';
  */
 
 async function initialize() {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
+  const legacyLazyEmbed = config?.emberFlightIcons?.lazyEmbed;
+
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  if (config?.flightIconsSpriteLazyEmbed) {
+  if (config?.flightIconsSpriteLazyEmbed || legacyLazyEmbed) {
     const {
       default: svgSprite
     } = await import('@hashicorp/flight-icons/svg-sprite/svg-sprite-module');

package/dist/instance-initializers/load-sprite.js.map

@@ -1 +1 @@
-{"version":3,"file":"load-sprite.js","sources":["../../src/instance-initializers/load-sprite.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport config from 'ember-get-config';\n\nexport async function initialize() {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n  if (config?.flightIconsSpriteLazyEmbed) {\n    const { default: svgSprite } = await import(\n      '@hashicorp/flight-icons/svg-sprite/svg-sprite-module'\n    );\n\n    // in test environments we can inject the sprite directly into the ember testing container\n    // to avoid issues with tools like Percy that only consider content inside that element\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    if (config.environment === 'test') {\n      const container = window.document?.getElementById('ember-testing');\n\n      if (container && !container.querySelector('.flight-sprite-container')) {\n        container.insertAdjacentHTML('afterbegin', svgSprite);\n      }\n    } else {\n      const container = window.document?.body;\n\n      if (container && !container.querySelector('.flight-sprite-container')) {\n        container.insertAdjacentHTML('beforeend', svgSprite);\n      }\n    }\n  }\n}\n\nexport default {\n  initialize,\n};\n"],"names":["initialize","config","flightIconsSpriteLazyEmbed","default","svgSprite","environment","container","window","document","getElementById","querySelector","insertAdjacentHTML","body"],"mappings":";;AAAA;AACA;AACA;AACA;;AAIO,eAAeA,UAAUA,GAAG;AACjC;EACA,IAAIC,MAAM,EAAEC,0BAA0B,EAAE;IACtC,MAAM;AAAEC,MAAAA,OAAO,EAAEC;AAAU,KAAC,GAAG,MAAM,OACnC,sDACF,CAAC;;AAED;AACA;AACA;AACA,IAAA,IAAIH,MAAM,CAACI,WAAW,KAAK,MAAM,EAAE;MACjC,MAAMC,SAAS,GAAGC,MAAM,CAACC,QAAQ,EAAEC,cAAc,CAAC,eAAe,CAAC;MAElE,IAAIH,SAAS,IAAI,CAACA,SAAS,CAACI,aAAa,CAAC,0BAA0B,CAAC,EAAE;AACrEJ,QAAAA,SAAS,CAACK,kBAAkB,CAAC,YAAY,EAAEP,SAAS,CAAC;AACvD,MAAA;AACF,IAAA,CAAC,MAAM;AACL,MAAA,MAAME,SAAS,GAAGC,MAAM,CAACC,QAAQ,EAAEI,IAAI;MAEvC,IAAIN,SAAS,IAAI,CAACA,SAAS,CAACI,aAAa,CAAC,0BAA0B,CAAC,EAAE;AACrEJ,QAAAA,SAAS,CAACK,kBAAkB,CAAC,WAAW,EAAEP,SAAS,CAAC;AACtD,MAAA;AACF,IAAA;AACF,EAAA;AACF;AAEA,iBAAe;AACbJ,EAAAA;AACF,CAAC;;;;"}
+{"version":3,"file":"load-sprite.js","sources":["../../src/instance-initializers/load-sprite.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport config from 'ember-get-config';\n\nexport async function initialize() {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n  const legacyLazyEmbed = config?.emberFlightIcons?.lazyEmbed;\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n  if (config?.flightIconsSpriteLazyEmbed || legacyLazyEmbed) {\n    const { default: svgSprite } = await import(\n      '@hashicorp/flight-icons/svg-sprite/svg-sprite-module'\n    );\n\n    // in test environments we can inject the sprite directly into the ember testing container\n    // to avoid issues with tools like Percy that only consider content inside that element\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    if (config.environment === 'test') {\n      const container = window.document?.getElementById('ember-testing');\n\n      if (container && !container.querySelector('.flight-sprite-container')) {\n        container.insertAdjacentHTML('afterbegin', svgSprite);\n      }\n    } else {\n      const container = window.document?.body;\n\n      if (container && !container.querySelector('.flight-sprite-container')) {\n        container.insertAdjacentHTML('beforeend', svgSprite);\n      }\n    }\n  }\n}\n\nexport default {\n  initialize,\n};\n"],"names":["initialize","legacyLazyEmbed","config","emberFlightIcons","lazyEmbed","flightIconsSpriteLazyEmbed","default","svgSprite","environment","container","window","document","getElementById","querySelector","insertAdjacentHTML","body"],"mappings":";;AAAA;AACA;AACA;AACA;;AAIO,eAAeA,UAAUA,GAAG;AACjC;AACA,EAAA,MAAMC,eAAe,GAAGC,MAAM,EAAEC,gBAAgB,EAAEC,SAAS;;AAE3D;AACA,EAAA,IAAIF,MAAM,EAAEG,0BAA0B,IAAIJ,eAAe,EAAE;IACzD,MAAM;AAAEK,MAAAA,OAAO,EAAEC;AAAU,KAAC,GAAG,MAAM,OACnC,sDACF,CAAC;;AAED;AACA;AACA;AACA,IAAA,IAAIL,MAAM,CAACM,WAAW,KAAK,MAAM,EAAE;MACjC,MAAMC,SAAS,GAAGC,MAAM,CAACC,QAAQ,EAAEC,cAAc,CAAC,eAAe,CAAC;MAElE,IAAIH,SAAS,IAAI,CAACA,SAAS,CAACI,aAAa,CAAC,0BAA0B,CAAC,EAAE;AACrEJ,QAAAA,SAAS,CAACK,kBAAkB,CAAC,YAAY,EAAEP,SAAS,CAAC;AACvD,MAAA;AACF,IAAA,CAAC,MAAM;AACL,MAAA,MAAME,SAAS,GAAGC,MAAM,CAACC,QAAQ,EAAEI,IAAI;MAEvC,IAAIN,SAAS,IAAI,CAACA,SAAS,CAACI,aAAa,CAAC,0BAA0B,CAAC,EAAE;AACrEJ,QAAAA,SAAS,CAACK,kBAAkB,CAAC,WAAW,EAAEP,SAAS,CAAC;AACtD,MAAA;AACF,IAAA;AACF,EAAA;AACF;AAEA,iBAAe;AACbP,EAAAA;AACF,CAAC;;;;"}

package/dist/styles/@hashicorp/design-system-components.css

@@ -750,34 +750,6 @@
   padding: 0;
 }
 
-#ember-a11y-refocus-nav-message {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-}
-
-.ember-a11y-refocus-skip-link {
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 0.25rem;
-  color: #fff;
-  font-size: 0.75rem;
-  text-decoration: none;
-  background-color: rgba(0, 0, 0, 0.75);
-  transform: translateY(-100%);
-  transition: transform 0.3s ease-in-out;
-}
-
-.ember-a11y-refocus-skip-link:focus {
-  transform: translateY(0);
-}
-
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -2671,6 +2643,7 @@
   flex-direction: column;
   align-items: start;
   width: fit-content;
+  margin: 0 auto;
 }
 .hds-application-state.hds-application-state--align-center {
   align-items: center;
@@ -2681,9 +2654,6 @@
 .hds-application-state.hds-application-state--align-center .hds-application-state__footer {
   width: auto;
 }
-.hds-application-state.hds-application-state--is-auto-centered {
-  margin: 0 auto;
-}
 
 .hds-application-state__media {
   margin-bottom: 32px;
@@ -7301,6 +7271,15 @@ button.hds-button[href]::after {
   left: -7px;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+.hds-menu-primitive {
+  position: relative;
+  width: fit-content;
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -8514,6 +8493,75 @@ button.hds-button[href]::after {
   border-color: var(--token-color-palette-neutral-500);
 }
 
+.hds-side-nav__icon-button {
+  --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2;
+  border: 1px solid transparent;
+  cursor: pointer;
+  border-color: var(--token-color-palette-neutral-500);
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-700);
+  border-radius: var(--token-border-radius-small);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 5px;
+}
+.hds-side-nav__icon-button:hover, .hds-side-nav__icon-button.mock-hover {
+  border-color: var(--token-color-palette-neutral-500);
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-600);
+}
+.hds-side-nav__icon-button:focus, .hds-side-nav__icon-button.mock-focus {
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-700);
+  border-color: #bcc7fd;
+}
+.hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  z-index: -1;
+  border-radius: 5px;
+  content: "";
+}
+.hds-side-nav__icon-button:focus:focus::before, .hds-side-nav__icon-button:focus.mock-focus::before, .hds-side-nav__icon-button.mock-focus:focus::before, .hds-side-nav__icon-button.mock-focus.mock-focus::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-side-nav__icon-button:focus:focus:not(:focus-visible)::before, .hds-side-nav__icon-button.mock-focus:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-side-nav__icon-button:focus:focus-visible::before, .hds-side-nav__icon-button.mock-focus:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-side-nav__icon-button:focus:focus:active::before, .hds-side-nav__icon-button:focus.mock-focus.mock-active::before, .hds-side-nav__icon-button.mock-focus:focus:active::before, .hds-side-nav__icon-button.mock-focus.mock-focus.mock-active::before {
+  box-shadow: none;
+}
+.hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before {
+  color: var(--token-color-foreground-high-contrast);
+  border: none;
+}
+.hds-side-nav__icon-button:focus:focus:not(:focus-visible)::before {
+  box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2;
+}
+.hds-side-nav__icon-button:active, .hds-side-nav__icon-button.mock-active {
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-500);
+  border-color: var(--token-color-palette-neutral-400);
+}
+.hds-side-nav__icon-button:disabled, .hds-side-nav__icon-button[disabled], .hds-side-nav__icon-button.mock-disabled, .hds-side-nav__icon-button:disabled:focus, .hds-side-nav__icon-button[disabled]:focus, .hds-side-nav__icon-button.mock-disabled:focus, .hds-side-nav__icon-button:disabled:hover, .hds-side-nav__icon-button[disabled]:hover, .hds-side-nav__icon-button.mock-disabled:hover {
+  color: var(--token-color-foreground-disabled);
+  background-color: var(--token-color-palette-neutral-600);
+  border-color: var(--token-color-palette-neutral-500);
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0

package/dist/styles/@hashicorp/design-system-components.scss

@@ -10,9 +10,6 @@
 @use "helpers/focus-ring";
 @use "helpers/typography";
 
-// Vendor styles
-@use "./design-system-ember-a11y-refocus";
-
 // Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
 // START COMPONENTS CSS FILES IMPORTS
 @use "../components/accordion";
@@ -42,6 +39,7 @@
 @use "../components/icon-tile";
 @use "../components/layout"; // multiple components
 @use "../components/link"; // multiple components
+@use "../components/menu-primitive";
 @use "../components/modal";
 @use "../components/page-header";
 @use "../components/pagination";
@@ -61,7 +59,6 @@
 // END COMPONENT CSS FILES IMPORTS
 
 @use "../mixins/screen-reader-only" as *;
-
 // stylelint-disable-next-line selector-class-pattern
 .sr-only {
   @include screen-reader-only();

package/dist/styles/components/application-state.scss

@@ -14,6 +14,7 @@ $hds-application-state-content-max-width: 480px;
   flex-direction: column;
   align-items: start;
   width: fit-content;
+  margin: 0 auto; // this will center the component in the parent container
 
   &.hds-application-state--align-center {
     align-items: center;
@@ -25,11 +26,6 @@ $hds-application-state-content-max-width: 480px;
       width: auto;
     }
   }
-
-  // we want that by default the component is centered in the parent container
-  &.hds-application-state--is-auto-centered {
-    margin: 0 auto;
-  }
 }
 
 .hds-application-state__media {

package/dist/styles/components/dropdown.scss

@@ -207,7 +207,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 
 // LIST
 // UL ELEMENT
-// GOES INSIDE HDS::PopoverPrimitive's popover element
+// GOES INSIDE HDS::MenuPrimitive's :content block
 
 .hds-dropdown__content {
   position: relative;

package/dist/styles/components/menu-primitive.scss

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// MenuPrimitive COMPONENT
+//
+
+.hds-menu-primitive {
+  position: relative;
+  width: fit-content;
+}

package/dist/styles/components/side-nav/header.scss

@@ -94,3 +94,29 @@
     }
   }
 }
+
+// generic "icon-button"
+
+// TODO: Replace this component with Hds::Button
+.hds-side-nav__icon-button {
+  @include hds-interactive-dark-theme();
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px; // same height as the dropdown "toggle"
+  height: 36px;
+  padding: 5px; // we take in account the transparent border
+
+  // disabled state:
+  &:disabled,
+  &[disabled],
+  &.mock-disabled,
+  &:disabled:focus,
+  &[disabled]:focus,
+  &.mock-disabled:focus,
+  &:disabled:hover,
+  &[disabled]:hover,
+  &.mock-disabled:hover {
+    @include hds-interactive-dark-theme-state-disabled();
+  }
+}