@hashicorp/design-system-components 4.13.1 → 4.14.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/app-side-nav/list/index.hbs","../../../../../src/components/hds/app-side-nav/list/index.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{!\\n  Copyright (c) HashiCorp, Inc.\\n  SPDX-License-Identifier: MPL-2.0\\n}}\\n\\n<nav class=\\\"hds-app-side-nav__list-wrapper\\\" aria-labelledby=\\\"hds-app-side-nav-header\\\" ...attributes>\\n  {{yield (hash ExtraBefore=(component \\\"hds/yield\\\"))}}\\n  <ul class=\\\"hds-app-side-nav__list\\\" role=\\\"list\\\" aria-labelledby={{this.titleIds}}>\\n    {{yield\\n      (hash\\n        Item=(component \\\"hds/app-side-nav/list/item\\\")\\n        BackLink=(component \\\"hds/app-side-nav/list/back-link\\\")\\n        Title=(component \\\"hds/app-side-nav/list/title\\\" didInsertTitle=this.didInsertTitle)\\n        Link=(component \\\"hds/app-side-nav/list/link\\\")\\n      )\\n    }}\\n  </ul>\\n  {{yield (hash ExtraAfter=(component \\\"hds/yield\\\"))}}\\n</nav>\")","/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport type { ComponentLike } from '@glint/template';\nimport type { HdsYieldSignature } from '../../yield';\nimport type { HdsAppSideNavListItemSignature } from './item';\nimport type { HdsAppSideNavListBackLinkSignature } from './back-link';\nimport type { HdsAppSideNavListTitleSignature } from './title';\nimport type { HdsAppSideNavListLinkSignature } from './link';\n\nexport interface HdsAppSideNavListSignature {\n  Blocks: {\n    default: [\n      {\n        ExtraBefore?: ComponentLike<HdsYieldSignature>;\n        Item?: ComponentLike<HdsAppSideNavListItemSignature>;\n        BackLink?: ComponentLike<HdsAppSideNavListBackLinkSignature>;\n        Title?: ComponentLike<HdsAppSideNavListTitleSignature>;\n        Link?: ComponentLike<HdsAppSideNavListLinkSignature>;\n        ExtraAfter?: ComponentLike<HdsYieldSignature>;\n      },\n    ];\n  };\n  Element: HTMLElement;\n}\n\nexport default class HdsAppSideNavList extends Component<HdsAppSideNavListSignature> {\n  @tracked _titleIds: string[] = [];\n\n  get titleIds(): string {\n    return this._titleIds.join(' ');\n  }\n\n  @action\n  didInsertTitle(titleId: string): void {\n    this._titleIds = [...this._titleIds, titleId];\n  }\n}\n"],"names":["HdsAppSideNavList","_class","Component","constructor","args","_initializerDefineProperty","_descriptor","titleIds","_titleIds","join","didInsertTitle","titleId","_applyDecoratedDescriptor","prototype","tracked","configurable","enumerable","writable","initializer","action","Object","getOwnPropertyDescriptor","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;AACA,eAAe,kBAAkB,CAAC,otBAAotB;;;AC8BjuBA,IAAAA,iBAAiB,IAAAC,MAAA,GAAvB,MAAMD,iBAAiB,SAASE,SAAS,CAA6B;AAAAC,EAAAA,WAAAA,CAAA,GAAAC,IAAA,EAAA;AAAA,IAAA,KAAA,CAAA,GAAAA,IAAA,CAAA,CAAA;AAAAC,IAAAA,0BAAA,oBAAAC,WAAA,EAAA,IAAA,CAAA,CAAA;AAAA,GAAA;EAGnF,IAAIC,QAAQA,GAAW;AACrB,IAAA,OAAO,IAAI,CAACC,SAAS,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;AACjC,GAAA;EAGAC,cAAcA,CAACC,OAAe,EAAQ;IACpC,IAAI,CAACH,SAAS,GAAG,CAAC,GAAG,IAAI,CAACA,SAAS,EAAEG,OAAO,CAAC,CAAA;AAC/C,GAAA;AACF,CAAC,GAAAL,WAAA,GAAAM,yBAAA,CAAAX,MAAA,CAAAY,SAAA,EAAA,WAAA,EAAA,CAVEC,OAAO,CAAA,EAAA;EAAAC,YAAA,EAAA,IAAA;EAAAC,UAAA,EAAA,IAAA;EAAAC,QAAA,EAAA,IAAA;AAAAC,EAAAA,WAAA,cAAA;AAAA,IAAA,OAAuB,EAAE,CAAA;AAAA,GAAA;AAAA,CAAAN,CAAAA,EAAAA,yBAAA,CAAAX,MAAA,CAAAY,SAAA,EAMhCM,gBAAAA,EAAAA,CAAAA,MAAM,GAAAC,MAAA,CAAAC,wBAAA,CAAApB,MAAA,CAAAY,SAAA,EAAA,gBAAA,CAAA,EAAAZ,MAAA,CAAAY,SAAA,IAAAZ,MAAA,EAAA;AAP6BqB,oBAAA,CAAAC,QAAA,EAAjBvB,iBAAiB,CAAA;;;;"}

package/dist/components/hds/app-side-nav/list/item.js

@@ -0,0 +1,16 @@
+import TemplateOnlyComponent from '@ember/component/template-only';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<li class=\"hds-app-side-nav__list-item\" ...attributes>\n  {{yield}}\n</li>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const HdsAppSideNavListItem = TemplateOnlyComponent();
+var item = setComponentTemplate(TEMPLATE, HdsAppSideNavListItem);
+
+export { item as default };
+//# sourceMappingURL=item.js.map

package/dist/components/hds/app-side-nav/list/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sources":["../../../../../src/components/hds/app-side-nav/list/item.hbs","../../../../../src/components/hds/app-side-nav/list/item.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{!\\n  Copyright (c) HashiCorp, Inc.\\n  SPDX-License-Identifier: MPL-2.0\\n}}\\n\\n<li class=\\\"hds-app-side-nav__list-item\\\" ...attributes>\\n  {{yield}}\\n</li>\")","/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport TemplateOnlyComponent from '@ember/component/template-only';\n\nexport interface HdsAppSideNavListItemSignature {\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLLIElement;\n}\n\nconst HdsAppSideNavListItem =\n  TemplateOnlyComponent<HdsAppSideNavListItemSignature>();\n\nexport default HdsAppSideNavListItem;\n"],"names":["HdsAppSideNavListItem","TemplateOnlyComponent","setComponentTemplate","TEMPLATE"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,8JAA8J;;ACDhM;AACA;AACA;AACA;;AAWA,MAAMA,qBAAqB,GACzBC,qBAAqB,EAAkC,CAAA;AAEzD,WAAAC,oBAAA,CAAAC,QAAA,EAAeH,qBAAqB,CAAA;;;;"}

package/dist/components/hds/app-side-nav/list/link.js

@@ -0,0 +1,16 @@
+import TemplateOnlyComponent from '@ember/component/template-only';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<Hds::AppSideNav::List::Item>\n  <Hds::Interactive\n    class=\"hds-app-side-nav__list-item-link {{if @isActive \'active\'}}\"\n    @current-when={{@current-when}}\n    @models={{hds-link-to-models @model @models}}\n    @query={{hds-link-to-query @query}}\n    @replace={{@replace}}\n    @route={{@route}}\n    @isRouteExternal={{@isRouteExternal}}\n    @href={{@href}}\n    @isHrefExternal={{@isHrefExternal}}\n    aria-current={{if @isActive \"page\"}}\n    ...attributes\n  >\n    {{#if @icon}}\n      <Hds::Icon class=\"hds-app-side-nav__list-item-icon-leading\" @name={{@icon}} />\n    {{/if}}\n\n    {{#if @text}}\n      <span class=\"hds-app-side-nav__list-item-text hds-typography-body-200 hds-font-weight-medium\">\n        {{@text}}\n      </span>\n    {{/if}}\n\n    {{#if @count}}\n      <Hds::BadgeCount @text={{@count}} @type=\"outlined\" @size=\"small\" />\n    {{/if}}\n\n    {{#if @badge}}\n      <Hds::Badge @text={{@badge}} @type=\"outlined\" @size=\"small\" />\n    {{/if}}\n\n    {{yield}}\n\n    {{#if @hasSubItems}}\n      <span class=\"hds-app-side-nav__list-item-icon-trailing\">\n        <Hds::Icon @name=\"chevron-right\" />\n      </span>\n    {{/if}}\n    {{#if @isHrefExternal}}\n      <span class=\"hds-app-side-nav__list-item-icon-trailing\">\n        <Hds::Icon @name=\"external-link\" />\n      </span>\n    {{/if}}\n  </Hds::Interactive>\n</Hds::AppSideNav::List::Item>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const HdsAppSideNavListLink = TemplateOnlyComponent();
+var link = setComponentTemplate(TEMPLATE, HdsAppSideNavListLink);
+
+export { link as default };
+//# sourceMappingURL=link.js.map

package/dist/components/hds/app-side-nav/list/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sources":["../../../../../src/components/hds/app-side-nav/list/link.hbs","../../../../../src/components/hds/app-side-nav/list/link.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{!\\n  Copyright (c) HashiCorp, Inc.\\n  SPDX-License-Identifier: MPL-2.0\\n}}\\n\\n<Hds::AppSideNav::List::Item>\\n  <Hds::Interactive\\n    class=\\\"hds-app-side-nav__list-item-link {{if @isActive \\'active\\'}}\\\"\\n    @current-when={{@current-when}}\\n    @models={{hds-link-to-models @model @models}}\\n    @query={{hds-link-to-query @query}}\\n    @replace={{@replace}}\\n    @route={{@route}}\\n    @isRouteExternal={{@isRouteExternal}}\\n    @href={{@href}}\\n    @isHrefExternal={{@isHrefExternal}}\\n    aria-current={{if @isActive \\\"page\\\"}}\\n    ...attributes\\n  >\\n    {{#if @icon}}\\n      <Hds::Icon class=\\\"hds-app-side-nav__list-item-icon-leading\\\" @name={{@icon}} />\\n    {{/if}}\\n\\n    {{#if @text}}\\n      <span class=\\\"hds-app-side-nav__list-item-text hds-typography-body-200 hds-font-weight-medium\\\">\\n        {{@text}}\\n      </span>\\n    {{/if}}\\n\\n    {{#if @count}}\\n      <Hds::BadgeCount @text={{@count}} @type=\\\"outlined\\\" @size=\\\"small\\\" />\\n    {{/if}}\\n\\n    {{#if @badge}}\\n      <Hds::Badge @text={{@badge}} @type=\\\"outlined\\\" @size=\\\"small\\\" />\\n    {{/if}}\\n\\n    {{yield}}\\n\\n    {{#if @hasSubItems}}\\n      <span class=\\\"hds-app-side-nav__list-item-icon-trailing\\\">\\n        <Hds::Icon @name=\\\"chevron-right\\\" />\\n      </span>\\n    {{/if}}\\n    {{#if @isHrefExternal}}\\n      <span class=\\\"hds-app-side-nav__list-item-icon-trailing\\\">\\n        <Hds::Icon @name=\\\"external-link\\\" />\\n      </span>\\n    {{/if}}\\n  </Hds::Interactive>\\n</Hds::AppSideNav::List::Item>\")","/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport TemplateOnlyComponent from '@ember/component/template-only';\n\nimport type { HdsIconSignature } from '../../icon';\nimport type { HdsInteractiveSignature } from '../../interactive';\n\nexport interface HdsAppSideNavListLinkSignature {\n  Args: HdsInteractiveSignature['Args'] & {\n    icon?: HdsIconSignature['Args']['name'];\n    text?: string;\n    badge?: string;\n    count?: string;\n    hasSubItems?: boolean;\n    isActive?: boolean;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HdsInteractiveSignature['Element'];\n}\n\nconst HdsAppSideNavListLink =\n  TemplateOnlyComponent<HdsAppSideNavListLinkSignature>();\n\nexport default HdsAppSideNavListLink;\n"],"names":["HdsAppSideNavListLink","TemplateOnlyComponent","setComponentTemplate","TEMPLATE"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,88CAA88C;;ACDh/C;AACA;AACA;AACA;;AAsBA,MAAMA,qBAAqB,GACzBC,qBAAqB,EAAkC,CAAA;AAEzD,WAAAC,oBAAA,CAAAC,QAAA,EAAeH,qBAAqB,CAAA;;;;"}

package/dist/components/hds/app-side-nav/list/title.js

@@ -0,0 +1,29 @@
+import { _ as _applyDecoratedDescriptor, a as _defineProperty } from '../../../../_rollupPluginBabelHelpers-KIi_qCIU.js';
+import { guidFor } from '@ember/object/internals';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<Hds::AppSideNav::List::Item>\n  <div\n    class=\"hds-app-side-nav__list-title hds-typography-body-100 hds-font-weight-semibold\"\n    id={{this.titleId}}\n    {{did-insert this.didInsertTitle}}\n    ...attributes\n  >{{~yield~}}</div>\n</Hds::AppSideNav::List::Item>");
+
+var _class;
+let HdsAppSideNavListTitle = (_class = class HdsAppSideNavListTitle extends Component {
+  constructor(...args) {
+    super(...args);
+    /*  Generate a unique ID for each Title */
+    _defineProperty(this, "titleId", 'title-' + guidFor(this));
+  }
+  didInsertTitle(element) {
+    const {
+      didInsertTitle
+    } = this.args;
+    if (typeof didInsertTitle === 'function') {
+      didInsertTitle(element.id);
+    }
+  }
+}, (_applyDecoratedDescriptor(_class.prototype, "didInsertTitle", [action], Object.getOwnPropertyDescriptor(_class.prototype, "didInsertTitle"), _class.prototype)), _class);
+setComponentTemplate(TEMPLATE, HdsAppSideNavListTitle);
+
+export { HdsAppSideNavListTitle as default };
+//# sourceMappingURL=title.js.map

package/dist/components/hds/app-side-nav/list/title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","sources":["../../../../../src/components/hds/app-side-nav/list/title.hbs","../../../../../src/components/hds/app-side-nav/list/title.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{!\\n  Copyright (c) HashiCorp, Inc.\\n  SPDX-License-Identifier: MPL-2.0\\n}}\\n\\n<Hds::AppSideNav::List::Item>\\n  <div\\n    class=\\\"hds-app-side-nav__list-title hds-typography-body-100 hds-font-weight-semibold\\\"\\n    id={{this.titleId}}\\n    {{did-insert this.didInsertTitle}}\\n    ...attributes\\n  >{{~yield~}}</div>\\n</Hds::AppSideNav::List::Item>\")","/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { guidFor } from '@ember/object/internals';\nimport { action } from '@ember/object';\nimport Component from '@glimmer/component';\n\nexport interface HdsAppSideNavListTitleSignature {\n  Args: {\n    didInsertTitle?: (titleId: string) => void;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsAppSideNavListTitle extends Component<HdsAppSideNavListTitleSignature> {\n  /*  Generate a unique ID for each Title */\n  titleId = 'title-' + guidFor(this);\n\n  @action\n  didInsertTitle(element: HTMLElement): void {\n    const { didInsertTitle } = this.args;\n\n    if (typeof didInsertTitle === 'function') {\n      didInsertTitle(element.id);\n    }\n  }\n}\n"],"names":["HdsAppSideNavListTitle","_class","Component","constructor","args","_defineProperty","guidFor","didInsertTitle","element","id","_applyDecoratedDescriptor","prototype","action","Object","getOwnPropertyDescriptor","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;AACA,eAAe,kBAAkB,CAAC,8VAA8V;;;ACkB3WA,IAAAA,sBAAsB,IAAAC,MAAA,GAA5B,MAAMD,sBAAsB,SAASE,SAAS,CAAkC;AAAAC,EAAAA,WAAAA,CAAA,GAAAC,IAAA,EAAA;AAAA,IAAA,KAAA,CAAA,GAAAA,IAAA,CAAA,CAAA;AAC7F;AAAAC,IAAAA,eAAA,kBACU,QAAQ,GAAGC,OAAO,CAAC,IAAI,CAAC,CAAA,CAAA;AAAA,GAAA;EAGlCC,cAAcA,CAACC,OAAoB,EAAQ;IACzC,MAAM;AAAED,MAAAA,cAAAA;KAAgB,GAAG,IAAI,CAACH,IAAI,CAAA;AAEpC,IAAA,IAAI,OAAOG,cAAc,KAAK,UAAU,EAAE;AACxCA,MAAAA,cAAc,CAACC,OAAO,CAACC,EAAE,CAAC,CAAA;AAC5B,KAAA;AACF,GAAA;AACF,CAAC,GAAAC,yBAAA,CAAAT,MAAA,CAAAU,SAAA,EAAA,gBAAA,EAAA,CAREC,MAAM,CAAAC,EAAAA,MAAA,CAAAC,wBAAA,CAAAb,MAAA,CAAAU,SAAA,qBAAAV,MAAA,CAAAU,SAAA,CAAA,GAAAV,MAAA,EAAA;AAJkCc,oBAAA,CAAAC,QAAA,EAAtBhB,sBAAsB,CAAA;;;;"}

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

@@ -0,0 +1,16 @@
+import TemplateOnlyComponent from '@ember/component/template-only';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<Portal @target={{if @targetName @targetName \"hds-app-side-nav-portal-target\"}}>\n  <div class=\"hds-app-side-nav__content-panel\" ...attributes>\n    <Hds::AppSideNav::List aria-label={{@ariaLabel}} as |ListElements|>\n      {{yield ListElements}}\n    </Hds::AppSideNav::List>\n  </div>\n</Portal>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const HdsAppSideNavPortal = TemplateOnlyComponent();
+var index = setComponentTemplate(TEMPLATE, HdsAppSideNavPortal);
+
+export { index as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/app-side-nav/portal/index.hbs","../../../../../src/components/hds/app-side-nav/portal/index.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{!\\n  Copyright (c) HashiCorp, Inc.\\n  SPDX-License-Identifier: MPL-2.0\\n}}\\n\\n<Portal @target={{if @targetName @targetName \\\"hds-app-side-nav-portal-target\\\"}}>\\n  <div class=\\\"hds-app-side-nav__content-panel\\\" ...attributes>\\n    <Hds::AppSideNav::List aria-label={{@ariaLabel}} as |ListElements|>\\n      {{yield ListElements}}\\n    </Hds::AppSideNav::List>\\n  </div>\\n</Portal>\")","/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport TemplateOnlyComponent from '@ember/component/template-only';\n\nimport type { HdsAppSideNavListSignature } from '../list/index';\n\n// TODO! understand how this should be done \"correctly\"\n// import type { PortalSignature } from 'ember-stargate/components/portal';\ninterface PortalSignature {\n  Args: {\n    target: string;\n    renderInPlace?: boolean;\n    fallback?: 'inplace';\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nexport interface HdsAppSideNavPortalSignature {\n  Args: PortalSignature['Args'] & {\n    ariaLabel?: string;\n    targetName?: string;\n  };\n  Blocks: HdsAppSideNavListSignature['Blocks'];\n  Element: HTMLDivElement;\n}\n\nconst HdsAppSideNavPortal =\n  TemplateOnlyComponent<HdsAppSideNavPortalSignature>();\n\nexport default HdsAppSideNavPortal;\n"],"names":["HdsAppSideNavPortal","TemplateOnlyComponent","setComponentTemplate","TEMPLATE"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,+XAA+X;;ACDja;AACA;AACA;AACA;;AA4BA,MAAMA,mBAAmB,GACvBC,qBAAqB,EAAgC,CAAA;AAEvD,YAAAC,oBAAA,CAAAC,QAAA,EAAeH,mBAAmB,CAAA;;;;"}

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

@@ -0,0 +1,173 @@
+import { _ as _applyDecoratedDescriptor, b as _initializerDefineProperty, a as _defineProperty } from '../../../../_rollupPluginBabelHelpers-KIi_qCIU.js';
+import Component from '@glimmer/component';
+import { inject } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { DEBUG } from '@glimmer/env';
+import { macroCondition, isTesting } from '@embroider/macros';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<div class=\"hds-app-side-nav__content\" ...attributes>\n  <PortalTarget\n    @multiple={{true}}\n    @onChange={{this.panelsChanged}}\n    @name={{if @targetName @targetName \"hds-app-side-nav-portal-target\"}}\n    class=\"hds-app-side-nav__content-panels hds-app-side-nav-hide-when-minimized\"\n    {{did-update this.didUpdateSubnav this.numSubnavs}}\n  />\n</div>");
+
+var _class, _descriptor, _descriptor2, _descriptor3;
+let HdsAppSideNavPortalTarget = (_class = class HdsAppSideNavPortalTarget extends Component {
+  constructor(...args) {
+    super(...args);
+    _initializerDefineProperty(this, "router", _descriptor, this);
+    _initializerDefineProperty(this, "numSubnavs", _descriptor2, this);
+    _initializerDefineProperty(this, "lastPanelEl", _descriptor3, this);
+    _defineProperty(this, "prefersReducedMotionMQ", window.matchMedia('(prefers-reduced-motion: reduce)'));
+  }
+  static get prefersReducedMotionOverride() {
+    return macroCondition(isTesting()) ? true : false;
+  }
+  get prefersReducedMotion() {
+    return HdsAppSideNavPortalTarget.prefersReducedMotionOverride || this.prefersReducedMotionMQ && this.prefersReducedMotionMQ.matches;
+  }
+  panelsChanged(portalCount) {
+    this.numSubnavs = portalCount;
+  }
+  didUpdateSubnav(element, [count]) {
+    this.animateSubnav(element, [count]);
+  }
+  animateSubnav(element, [count]) {
+    /*
+     * Here is ascii art of what the layout looks like for this setup
+     *
+                                     AppSideNav
+                                    +----------------------+
+                                    | +------------------+ |
+                                    | |    ("header")    | |
+                                    | +------------------+ |
+                                    |                      |
+                                    | +------------------+ |
+                                    | |    ("body")      | |
+        (PortalTarget)              | |                  | |
+        +----------------------------------------------+ | |
+        | +----------+  +----------+  |  +----------+  | | |
+        | | (Portal) |  | (Portal) |     | (Portal) |  | | |
+        | |          |  |          |  |  |          |  | | |
+        | |  hidden  |  |  hidden  |     | *active* |  | | |
+        | |   panel  |  |   panel  |  |  |   panel  |  | | |
+        | |          |  |          |     |          |  | | |
+        | |          |  |          |  |  |          |  | | |
+        | |          |  |          |     |          |  | | |
+        | |          |  |          |  |  |          |  | | |
+        | |          |  |          |     |          |  | | |
+        | |          |  |          |  |  |          |  | | |
+        | |          |  |          |     |          |  | | |
+        | +----------+  +----------+  |  +----------+  | | |
+        +----------------------------------------------+ | |
+                                    | |                  | |
+                                    | +------------------+ |
+                                    |                      |
+                                    | +------------------+ |
+                                    | |    ("footer")    | |
+                                    | +------------------+ |
+                                    +----------------------+
+      *
+     * every time `HcAppFrame::SideNav::Portal` renders, it contains a portaled "panel"
+     * that is rendered into the `hds-app-side-nav__content-panels` (inside the PortalTarget).
+     *
+     * Rendering or unrendering other `HcAppFrame::SideNav::Portal`s triggers the number of
+     * subnavs to change (via `numSubnavs`), so this function runs and slides
+     * `hds-app-side-nav__content-panels` left or right using the `element.animate` api.
+     *
+     * */
+
+    const activeIndex = count - 1;
+    const targetElement = element;
+    const {
+      prefersReducedMotion
+    } = this;
+    const styles = getComputedStyle(targetElement);
+    const columnWidth = styles.getPropertyValue('--hds-app-sidenav-width-expanded');
+    const slideDuration = prefersReducedMotion ? 0 : 150;
+    let fadeDuration = prefersReducedMotion ? 0 : 175;
+    let fadeDelay = prefersReducedMotion ? 0 : 50;
+
+    // slide entire parent panel
+    const start = styles.transform;
+    const end = `translateX(-${activeIndex * parseInt(columnWidth, 10)}px)`;
+    const anim = targetElement.animate([{
+      transform: start
+    }, {
+      transform: end
+    }], {
+      duration: slideDuration,
+      easing: 'cubic-bezier(0.65, 0, 0.35, 1)',
+      fill: 'forwards'
+    });
+    anim.finished.then(() => {
+      // uncomment this if we need/want to scroll the element to the top
+      // targetElement.scrollIntoView(true);
+      if (activeIndex > 0) {
+        const allPrev = Array.from(targetElement.children).slice(0, activeIndex);
+        for (const ele of allPrev) {
+          ele.ariaHidden = 'true';
+          ele.style.setProperty('visibility', 'hidden');
+          ele.style.setProperty('opacity', '0');
+        }
+      }
+      // 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
+      if (DEBUG) {
+        // Check the visibility of the element before attempting to commitStyles.
+        if (targetElement.offsetParent !== null) {
+          anim.commitStyles();
+        }
+      }
+    });
+
+    // fade in next panel
+    const nextPanelEl = targetElement.children[activeIndex];
+
+    // get reference to last child panel
+    const lastPanelEl = targetElement.children[targetElement.children.length - 1];
+    if (nextPanelEl) {
+      nextPanelEl.ariaHidden = 'false';
+      nextPanelEl.style.setProperty('visibility', 'visible');
+      // this eliminates a flicker if there's only one subnav rendering or if we
+      // already just rendered this panel.
+      if (this.lastPanelEl) {
+        if (activeIndex === 0 || nextPanelEl.isSameNode(this.lastPanelEl)) {
+          fadeDelay = 0;
+          fadeDuration = 0;
+        }
+      }
+
+      // remember the last panel
+      this.lastPanelEl = lastPanelEl;
+      nextPanelEl.animate([{
+        opacity: '0'
+      }, {
+        opacity: '1'
+      }], {
+        delay: fadeDelay,
+        duration: fadeDuration,
+        fill: 'forwards'
+      });
+    }
+  }
+}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "router", [inject], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, "numSubnavs", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return 0;
+  }
+}), _descriptor3 = _applyDecoratedDescriptor(_class.prototype, "lastPanelEl", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _applyDecoratedDescriptor(_class.prototype, "panelsChanged", [action], Object.getOwnPropertyDescriptor(_class.prototype, "panelsChanged"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "didUpdateSubnav", [action], Object.getOwnPropertyDescriptor(_class.prototype, "didUpdateSubnav"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "animateSubnav", [action], Object.getOwnPropertyDescriptor(_class.prototype, "animateSubnav"), _class.prototype)), _class);
+setComponentTemplate(TEMPLATE, HdsAppSideNavPortalTarget);
+
+export { HdsAppSideNavPortalTarget as default };
+//# sourceMappingURL=target.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"target.js","sources":["../../../../../src/components/hds/app-side-nav/portal/target.hbs","../../../../../src/components/hds/app-side-nav/portal/target.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{!\\n  Copyright (c) HashiCorp, Inc.\\n  SPDX-License-Identifier: MPL-2.0\\n}}\\n\\n<div class=\\\"hds-app-side-nav__content\\\" ...attributes>\\n  <PortalTarget\\n    @multiple={{true}}\\n    @onChange={{this.panelsChanged}}\\n    @name={{if @targetName @targetName \\\"hds-app-side-nav-portal-target\\\"}}\\n    class=\\\"hds-app-side-nav__content-panels hds-app-side-nav-hide-when-minimized\\\"\\n    {{did-update this.didUpdateSubnav this.numSubnavs}}\\n  />\\n</div>\")","/**\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 { DEBUG } from '@glimmer/env';\nimport { macroCondition, isTesting } from '@embroider/macros';\n\nimport type { HdsAppSideNavPortalSignature } from './index';\n\n// import { PortalTargetSignature } from 'ember-stargate/components/portal-target';\ninterface PortalTargetSignature {\n  Element: HTMLDivElement;\n  Args: {\n    name: string;\n    multiple?: boolean;\n    onChange?: (count: number) => void;\n  };\n  Blocks: {\n    default: [number];\n  };\n}\n\nimport type { Registry as Services } from '@ember/service';\n\ninterface HdsAppSideNavPortalTargetSignature {\n  Args: PortalTargetSignature['Args'] & {\n    targetName?: HdsAppSideNavPortalSignature['Args']['targetName'];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsAppSideNavPortalTarget extends Component<HdsAppSideNavPortalTargetSignature> {\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      HdsAppSideNavPortalTarget.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 ascii art of what the layout looks like for this setup\n     *\n\n                                    AppSideNav\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-app-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-app-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    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 (DEBUG) {\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":["HdsAppSideNavPortalTarget","_class","Component","constructor","args","_initializerDefineProperty","_descriptor","_descriptor2","_descriptor3","_defineProperty","window","matchMedia","prefersReducedMotionOverride","macroCondition","isTesting","prefersReducedMotion","prefersReducedMotionMQ","matches","panelsChanged","portalCount","numSubnavs","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","DEBUG","offsetParent","commitStyles","nextPanelEl","lastPanelEl","length","isSameNode","opacity","delay","_applyDecoratedDescriptor","prototype","service","configurable","enumerable","writable","initializer","tracked","action","Object","getOwnPropertyDescriptor","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/app-side-nav/toggle-button.js

@@ -0,0 +1,16 @@
+import TemplateOnlyComponent from '@ember/component/template-only';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<button class=\"hds-app-side-nav__toggle-button\" type=\"button\" ...attributes>\n  <Hds::Icon @name={{@icon}} />\n</button>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const HdsAppSideNavToggleButton = TemplateOnlyComponent();
+var toggleButton = setComponentTemplate(TEMPLATE, HdsAppSideNavToggleButton);
+
+export { toggleButton as default };
+//# sourceMappingURL=toggle-button.js.map

package/dist/components/hds/app-side-nav/toggle-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.js","sources":["../../../../src/components/hds/app-side-nav/toggle-button.hbs","../../../../src/components/hds/app-side-nav/toggle-button.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{!\\n  Copyright (c) HashiCorp, Inc.\\n  SPDX-License-Identifier: MPL-2.0\\n}}\\n<button class=\\\"hds-app-side-nav__toggle-button\\\" type=\\\"button\\\" ...attributes>\\n  <Hds::Icon @name={{@icon}} />\\n</button>\")","/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport TemplateOnlyComponent from '@ember/component/template-only';\n\nimport type { HdsIconSignature } from '../icon';\n\ninterface HdsAppSideNavToggleButtonSignature {\n  Args: {\n    icon: HdsIconSignature['Args']['name'];\n  };\n  Element: HTMLButtonElement;\n}\n\nconst HdsAppSideNavToggleButton =\n  TemplateOnlyComponent<HdsAppSideNavToggleButtonSignature>();\n\nexport default HdsAppSideNavToggleButton;\n"],"names":["HdsAppSideNavToggleButton","TemplateOnlyComponent","setComponentTemplate","TEMPLATE"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,4MAA4M;;ACD9O;AACA;AACA;AACA;;AAaA,MAAMA,yBAAyB,GAC7BC,qBAAqB,EAAsC,CAAA;AAE7D,mBAAAC,oBAAA,CAAAC,QAAA,EAAeH,yBAAyB,CAAA;;;;"}

package/dist/components/hds/application-state/body.js

@@ -1,4 +1,4 @@
-import templateOnlyComponent from '@ember/component/template-only';
+import TemplateOnlyComponent from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -9,7 +9,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const HdsApplicationStateBody = templateOnlyComponent();
+const HdsApplicationStateBody = TemplateOnlyComponent();
 var body = setComponentTemplate(TEMPLATE, HdsApplicationStateBody);
 
 export { body as default };

package/dist/components/hds/application-state/footer.js

@@ -1,4 +1,4 @@
-import templateOnlyComponent from '@ember/component/template-only';
+import TemplateOnlyComponent from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -9,7 +9,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const HdsApplicationStateFooter = templateOnlyComponent();
+const HdsApplicationStateFooter = TemplateOnlyComponent();
 var footer = setComponentTemplate(TEMPLATE, HdsApplicationStateFooter);
 
 export { footer as default };

package/dist/components/hds/application-state/media.js

@@ -1,4 +1,4 @@
-import templateOnlyComponent from '@ember/component/template-only';
+import TemplateOnlyComponent from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -9,7 +9,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const HdsApplicationStateMedia = templateOnlyComponent();
+const HdsApplicationStateMedia = TemplateOnlyComponent();
 var media = setComponentTemplate(TEMPLATE, HdsApplicationStateMedia);
 
 export { media as default };

package/dist/components/hds/button-set/index.js

@@ -1,4 +1,4 @@
-import templateOnlyComponent from '@ember/component/template-only';
+import TemplateOnlyComponent from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -9,7 +9,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const HdsButtonSet = templateOnlyComponent();
+const HdsButtonSet = TemplateOnlyComponent();
 var index = setComponentTemplate(TEMPLATE, HdsButtonSet);
 
 export { index as default };

package/dist/components/hds/code-block/copy-button.js

@@ -1,4 +1,4 @@
-import templateOnlyComponent from '@ember/component/template-only';
+import TemplateOnlyComponent from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -9,7 +9,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const HdsCodeBlockCopyButton = templateOnlyComponent();
+const HdsCodeBlockCopyButton = TemplateOnlyComponent();
 var copyButton = setComponentTemplate(TEMPLATE, HdsCodeBlockCopyButton);
 
 export { copyButton as default };

package/dist/components/hds/code-block/description.js

@@ -1,4 +1,4 @@
-import templateOnlyComponent from '@ember/component/template-only';
+import TemplateOnlyComponent from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -9,7 +9,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const HdsCodeBlockDescription = templateOnlyComponent();
+const HdsCodeBlockDescription = TemplateOnlyComponent();
 var description = setComponentTemplate(TEMPLATE, HdsCodeBlockDescription);
 
 export { description as default };

package/dist/components/hds/dialog-primitive/body.js

@@ -1,4 +1,4 @@
-import templateOnlyComponent from '@ember/component/template-only';
+import TemplateOnlyComponent from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -9,7 +9,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const HdsDialogPrimitiveBody = templateOnlyComponent();
+const HdsDialogPrimitiveBody = TemplateOnlyComponent();
 var body = setComponentTemplate(TEMPLATE, HdsDialogPrimitiveBody);
 
 export { body as default };

package/dist/components/hds/dialog-primitive/description.js

@@ -1,4 +1,4 @@
-import templateOnlyComponent from '@ember/component/template-only';
+import TemplateOnlyComponent from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -9,7 +9,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const HdsDialogPrimitiveDescription = templateOnlyComponent();
+const HdsDialogPrimitiveDescription = TemplateOnlyComponent();
 var description = setComponentTemplate(TEMPLATE, HdsDialogPrimitiveDescription);
 
 export { description as default };

package/dist/components/hds/dialog-primitive/overlay.js

@@ -1,4 +1,4 @@
-import templateOnlyComponent from '@ember/component/template-only';
+import TemplateOnlyComponent from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -9,7 +9,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const HdsDialogPrimitiveOverlay = templateOnlyComponent();
+const HdsDialogPrimitiveOverlay = TemplateOnlyComponent();
 var overlay = setComponentTemplate(TEMPLATE, HdsDialogPrimitiveOverlay);
 
 export { overlay as default };

package/dist/components/hds/dialog-primitive/wrapper.js

@@ -1,4 +1,4 @@
-import templateOnlyComponent from '@ember/component/template-only';
+import TemplateOnlyComponent from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -9,7 +9,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const HdsDialogPrimitiveWrapper = templateOnlyComponent();
+const HdsDialogPrimitiveWrapper = TemplateOnlyComponent();
 var wrapper = setComponentTemplate(TEMPLATE, HdsDialogPrimitiveWrapper);
 
 export { wrapper as default };

package/dist/components/hds/dropdown/footer.js

@@ -1,4 +1,4 @@
-import templateOnlyComponent from '@ember/component/template-only';
+import TemplateOnlyComponent from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -9,7 +9,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const HdsDropdownFooter = templateOnlyComponent();
+const HdsDropdownFooter = TemplateOnlyComponent();
 var footer = setComponentTemplate(TEMPLATE, HdsDropdownFooter);
 
 export { footer as default };

package/dist/components/hds/dropdown/header.js

@@ -1,4 +1,4 @@
-import templateOnlyComponent from '@ember/component/template-only';
+import TemplateOnlyComponent from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -9,7 +9,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const HdsDropdownHeader = templateOnlyComponent();
+const HdsDropdownHeader = TemplateOnlyComponent();
 var header = setComponentTemplate(TEMPLATE, HdsDropdownHeader);
 
 export { header as default };

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

@@ -28,13 +28,17 @@ let HdsDropdown = (_class = class HdsDropdown extends Component {
   get enableCollisionDetection() {
     return this.args.enableCollisionDetection ?? false;
   }
+  get matchToggleWidth() {
+    return this.args.matchToggleWidth ?? false;
+  }
   get anchoredPositionOptions() {
     // custom options specific for the `RichTooltip` component
     // for details see the `hds-anchored-position` modifier
     return {
       placement: HdsDropdownPositionToPlacementValues[this.listPosition],
       offsetOptions: 4,
-      enableCollisionDetection: this.enableCollisionDetection ? 'flip' : false
+      enableCollisionDetection: this.enableCollisionDetection ? 'flip' : false,
+      matchToggleWidth: this.matchToggleWidth
     };
   }
 
@@ -66,8 +70,8 @@ let HdsDropdown = (_class = class HdsDropdown extends Component {
     // context: https://github.com/hashicorp/design-system/pull/2309#discussion_r1706941892
     classes.push(`hds-dropdown__content--position-${this.listPosition}`);
 
-    // add a class based on the @width argument
-    if (this.args.width) {
+    // add a class based on the @width or @matchToggleWidth arguments
+    if (this.args.width || this.args.matchToggleWidth) {
       classes.push('hds-dropdown__content--fixed-width');
     }
     return classes.join(' ');