@hashicorp/design-system-components 4.1.2 → 4.3.0

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

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
+import { HdsTextColorValues, HdsTextAlignValues } from './types.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -10,9 +11,12 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const AVAILABLE_ALIGNS = ['left', 'center', 'right'];
-const AVAILABLE_COLORS = ['primary', 'strong', 'faint', 'disabled', 'high-contrast', 'action', 'action-hover', 'action-active', 'highlight', 'highlight-on-surface', 'highlight-high-contrast', 'success', 'success-on-surface', 'success-high-contrast', 'warning', 'warning-on-surface', 'warning-high-contrast', 'critical', 'critical-on-surface', 'critical-high-contrast'];
-class HdsTextIndexComponent extends Component {
+const AVAILABLE_COLORS = Object.values(HdsTextColorValues);
+const AVAILABLE_ALIGNS = Object.values(HdsTextAlignValues);
+
+// A union of all types in the HTMLElementTagNameMap interface
+
+class HdsTextComponent extends Component {
   /**
    * Get a tag to render based on the `@tag` argument passed or the value of `this.size` (via mapping)
    *
@@ -20,7 +24,7 @@ class HdsTextIndexComponent extends Component {
    * @return {string} The html tag to use in the dynamic render of the component
    */
   get componentTag() {
-    let {
+    const {
       tag = 'span'
     } = this.args;
     return tag;
@@ -35,7 +39,7 @@ class HdsTextIndexComponent extends Component {
    * @param variant
    */
   get variant() {
-    let {
+    const {
       group,
       size
     } = this.args;
@@ -53,7 +57,7 @@ class HdsTextIndexComponent extends Component {
    * @type {string}
    */
   get align() {
-    let {
+    const {
       align
     } = this.args;
     if (align) {
@@ -70,10 +74,10 @@ class HdsTextIndexComponent extends Component {
    * @type {string}
    */
   get predefinedColor() {
-    let {
+    const {
       color
     } = this.args;
-    if (AVAILABLE_COLORS.includes(color)) {
+    if (color && AVAILABLE_COLORS.includes(color)) {
       return color;
     } else {
       return undefined;
@@ -87,10 +91,10 @@ class HdsTextIndexComponent extends Component {
    * @type {string}
    */
   get customColor() {
-    let {
+    const {
       color
     } = this.args;
-    if (!AVAILABLE_COLORS.includes(color)) {
+    if (color && !AVAILABLE_COLORS.includes(color)) {
       return color;
     } else {
       return undefined;
@@ -103,7 +107,7 @@ class HdsTextIndexComponent extends Component {
    * @return {string} The "class" attribute to apply to the component.
    */
   get classNames() {
-    let classes = ['hds-text'];
+    const classes = ['hds-text'];
 
     // add a (helper) class based on the "group + size" variant
     classes.push(`hds-typography-${this.variant}`);
@@ -125,7 +129,7 @@ class HdsTextIndexComponent extends Component {
     return classes.join(' ');
   }
 }
-setComponentTemplate(TEMPLATE, HdsTextIndexComponent);
+setComponentTemplate(TEMPLATE, HdsTextComponent);
 
-export { AVAILABLE_ALIGNS, AVAILABLE_COLORS, HdsTextIndexComponent as default };
+export { AVAILABLE_ALIGNS, AVAILABLE_COLORS, HdsTextComponent as default };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/hds/text/index.hbs","../../../../src/components/hds/text/index.js"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{!\\n  Copyright (c) HashiCorp, Inc.\\n  SPDX-License-Identifier: MPL-2.0\\n}}\\n{{! IMPORTANT: we removed any extra newlines before/after the `let` to reduce the issues with unexpected whitespaces (see https://github.com/hashicorp/design-system/pull/1652) }}\\n{{#let (element this.componentTag) as |Tag|}}<Tag\\n    class={{this.classNames}}\\n    {{style color=this.customColor}}\\n    ...attributes\\n  >{{yield}}</Tag>{{/let}}\")","/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { assert } from '@ember/debug';\n\nexport const AVAILABLE_ALIGNS = ['left', 'center', 'right'];\n\nexport const AVAILABLE_COLORS = [\n  'primary',\n  'strong',\n  'faint',\n  'disabled',\n  'high-contrast',\n  'action',\n  'action-hover',\n  'action-active',\n  'highlight',\n  'highlight-on-surface',\n  'highlight-high-contrast',\n  'success',\n  'success-on-surface',\n  'success-high-contrast',\n  'warning',\n  'warning-on-surface',\n  'warning-high-contrast',\n  'critical',\n  'critical-on-surface',\n  'critical-high-contrast',\n];\n\nexport default class HdsTextIndexComponent extends Component {\n  /**\n   * Get a tag to render based on the `@tag` argument passed or the value of `this.size` (via mapping)\n   *\n   * @method #componentTag\n   * @return {string} The html tag to use in the dynamic render of the component\n   */\n  get componentTag() {\n    let { tag = 'span' } = this.args;\n\n    return tag;\n  }\n\n  /**\n   * Sets the \"variant\" (style) for the text\n   * Accepted values: see AVAILABLE_VARIANTS\n   *\n   * @type {string}\n   *\n   * @param variant\n   */\n  get variant() {\n    let { group, size } = this.args;\n\n    // notice: for performance reasons we don't do any other extra check on these values\n    // we assume they've already been validated by the \"parent\" components\n    return `${group}-${size}`;\n  }\n\n  /**\n   * Sets the alignment of the text\n   * Accepted values: see AVAILABLE_ALIGNS\n   *\n   * @param align\n   * @type {string}\n   */\n  get align() {\n    let { align } = this.args;\n\n    if (align) {\n      assert(\n        `@align for \"Hds::Text\" must be one of the following: ${AVAILABLE_ALIGNS.join(\n          ', '\n        )}; received: ${align}`,\n        AVAILABLE_ALIGNS.includes(align)\n      );\n    }\n\n    return align;\n  }\n\n  /**\n   * Sets the color of the text as pre-defined value\n   * Accepted values: see AVAILABLE_COLORS\n   *\n   * @param color\n   * @type {string}\n   */\n  get predefinedColor() {\n    let { color } = this.args;\n\n    if (AVAILABLE_COLORS.includes(color)) {\n      return color;\n    } else {\n      return undefined;\n    }\n  }\n\n  /**\n   * Sets the color of the text as custom value (via inline style)\n   *\n   * @param color\n   * @type {string}\n   */\n  get customColor() {\n    let { color } = this.args;\n\n    if (!AVAILABLE_COLORS.includes(color)) {\n      return color;\n    } else {\n      return undefined;\n    }\n  }\n\n  /**\n   * Get the class names to apply to the component.\n   * @method #classNames\n   * @return {string} The \"class\" attribute to apply to the component.\n   */\n  get classNames() {\n    let classes = ['hds-text'];\n\n    // add a (helper) class based on the \"group + size\" variant\n    classes.push(`hds-typography-${this.variant}`);\n\n    // add a (helper) class based on the @weight argument\n    if (this.args.weight) {\n      classes.push(`hds-font-weight-${this.args.weight}`);\n    }\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-text--align-${this.align}`);\n    }\n\n    // add a (helper) class based on the @color argument (if pre-defined)\n    if (this.predefinedColor) {\n      classes.push(`hds-foreground-${this.predefinedColor}`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["AVAILABLE_ALIGNS","AVAILABLE_COLORS","HdsTextIndexComponent","Component","componentTag","tag","args","variant","group","size","align","assert","join","includes","predefinedColor","color","undefined","customColor","classNames","classes","push","weight","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/text/index.hbs","../../../../src/components/hds/text/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{{! IMPORTANT: we removed any extra newlines before/after the `let` to reduce the issues with unexpected whitespaces (see https://github.com/hashicorp/design-system/pull/1652) }}\\n{{#let (element this.componentTag) as |Tag|}}<Tag\\n    class={{this.classNames}}\\n    {{style color=this.customColor}}\\n    ...attributes\\n  >{{yield}}</Tag>{{/let}}\")","/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { assert } from '@ember/debug';\nimport { HdsTextAlignValues, HdsTextColorValues } from './types.ts';\nimport type {\n  HdsTextAligns,\n  HdsTextColors,\n  HdsTextGroups,\n  HdsTextSizes,\n  HdsTextTags,\n  HdsTextWeights,\n} from './types.ts';\n\nexport const AVAILABLE_COLORS: string[] = Object.values(HdsTextColorValues);\nexport const AVAILABLE_ALIGNS: string[] = Object.values(HdsTextAlignValues);\n\n// A union of all types in the HTMLElementTagNameMap interface\ntype AvailableElements = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];\n\nexport interface HdsTextSignature {\n  Args: {\n    size: HdsTextSizes;\n    tag?: HdsTextTags;\n    weight?: HdsTextWeights;\n    align?: HdsTextAligns;\n    color?: string | HdsTextColors;\n    group: HdsTextGroups;\n  };\n  Element: AvailableElements;\n  Blocks: {\n    default: [];\n  };\n}\n\nexport default class HdsTextComponent extends Component<HdsTextSignature> {\n  /**\n   * Get a tag to render based on the `@tag` argument passed or the value of `this.size` (via mapping)\n   *\n   * @method #componentTag\n   * @return {string} The html tag to use in the dynamic render of the component\n   */\n  get componentTag(): HdsTextTags {\n    const { tag = 'span' } = this.args;\n\n    return tag;\n  }\n\n  /**\n   * Sets the \"variant\" (style) for the text\n   * Accepted values: see AVAILABLE_VARIANTS\n   *\n   * @type {string}\n   *\n   * @param variant\n   */\n  get variant() {\n    const { group, size } = this.args;\n\n    // notice: for performance reasons we don't do any other extra check on these values\n    // we assume they've already been validated by the \"parent\" components\n    return `${group}-${size}`;\n  }\n\n  /**\n   * Sets the alignment of the text\n   * Accepted values: see AVAILABLE_ALIGNS\n   *\n   * @param align\n   * @type {string}\n   */\n  get align() {\n    const { align } = this.args;\n\n    if (align) {\n      assert(\n        `@align for \"Hds::Text\" must be one of the following: ${AVAILABLE_ALIGNS.join(\n          ', '\n        )}; received: ${align}`,\n        AVAILABLE_ALIGNS.includes(align)\n      );\n    }\n\n    return align;\n  }\n\n  /**\n   * Sets the color of the text as pre-defined value\n   * Accepted values: see AVAILABLE_COLORS\n   *\n   * @param color\n   * @type {string}\n   */\n  get predefinedColor() {\n    const { color } = this.args;\n\n    if (color && AVAILABLE_COLORS.includes(color)) {\n      return color;\n    } else {\n      return undefined;\n    }\n  }\n\n  /**\n   * Sets the color of the text as custom value (via inline style)\n   *\n   * @param color\n   * @type {string}\n   */\n  get customColor() {\n    const { color } = this.args;\n\n    if (color && !AVAILABLE_COLORS.includes(color)) {\n      return color;\n    } else {\n      return undefined;\n    }\n  }\n\n  /**\n   * Get the class names to apply to the component.\n   * @method #classNames\n   * @return {string} The \"class\" attribute to apply to the component.\n   */\n  get classNames() {\n    const classes = ['hds-text'];\n\n    // add a (helper) class based on the \"group + size\" variant\n    classes.push(`hds-typography-${this.variant}`);\n\n    // add a (helper) class based on the @weight argument\n    if (this.args.weight) {\n      classes.push(`hds-font-weight-${this.args.weight}`);\n    }\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-text--align-${this.align}`);\n    }\n\n    // add a (helper) class based on the @color argument (if pre-defined)\n    if (this.predefinedColor) {\n      classes.push(`hds-foreground-${this.predefinedColor}`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["AVAILABLE_COLORS","Object","values","HdsTextColorValues","AVAILABLE_ALIGNS","HdsTextAlignValues","HdsTextComponent","Component","componentTag","tag","args","variant","group","size","align","assert","join","includes","predefinedColor","color","undefined","customColor","classNames","classes","push","weight","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/text/types.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+let HdsTextColorValues = /*#__PURE__*/function (HdsTextColorValues) {
+  HdsTextColorValues["Primary"] = "primary";
+  HdsTextColorValues["Strong"] = "strong";
+  HdsTextColorValues["Faint"] = "faint";
+  HdsTextColorValues["Disabled"] = "disabled";
+  HdsTextColorValues["HighContrast"] = "high-contrast";
+  HdsTextColorValues["Action"] = "action";
+  HdsTextColorValues["ActionHover"] = "action-hover";
+  HdsTextColorValues["ActionActive"] = "action-active";
+  HdsTextColorValues["Highlight"] = "highlight";
+  HdsTextColorValues["HighlightOnSurface"] = "highlight-on-surface";
+  HdsTextColorValues["HighlightHighContrast"] = "highlight-high-contrast";
+  HdsTextColorValues["Success"] = "success";
+  HdsTextColorValues["SuccessOnSurface"] = "success-on-surface";
+  HdsTextColorValues["SuccessHighContrast"] = "success-high-contrast";
+  HdsTextColorValues["Warning"] = "warning";
+  HdsTextColorValues["WarningOnSurface"] = "warning-on-surface";
+  HdsTextColorValues["WarningHighContrast"] = "warning-high-contrast";
+  HdsTextColorValues["Critical"] = "critical";
+  HdsTextColorValues["CriticalOnSurface"] = "critical-on-surface";
+  HdsTextColorValues["CriticalHighContrast"] = "critical-high-contrast";
+  return HdsTextColorValues;
+}({});
+let HdsTextAlignValues = /*#__PURE__*/function (HdsTextAlignValues) {
+  HdsTextAlignValues["Left"] = "left";
+  HdsTextAlignValues["Center"] = "center";
+  HdsTextAlignValues["Right"] = "right";
+  return HdsTextAlignValues;
+}({});
+let HdsTextWeightValues = /*#__PURE__*/function (HdsTextWeightValues) {
+  HdsTextWeightValues["Regular"] = "regular";
+  HdsTextWeightValues["Medium"] = "medium";
+  HdsTextWeightValues["Semibold"] = "semibold";
+  HdsTextWeightValues["Bold"] = "bold";
+  return HdsTextWeightValues;
+}({});
+let HdsTextSizeValues = /*#__PURE__*/function (HdsTextSizeValues) {
+  HdsTextSizeValues[HdsTextSizeValues["FiveHundred"] = 500] = "FiveHundred";
+  HdsTextSizeValues[HdsTextSizeValues["FourHundred"] = 400] = "FourHundred";
+  HdsTextSizeValues[HdsTextSizeValues["ThreeHundred"] = 300] = "ThreeHundred";
+  HdsTextSizeValues[HdsTextSizeValues["TwoHundred"] = 200] = "TwoHundred";
+  HdsTextSizeValues[HdsTextSizeValues["OneHundred"] = 100] = "OneHundred";
+  return HdsTextSizeValues;
+}({});
+let HdsTextGroupValues = /*#__PURE__*/function (HdsTextGroupValues) {
+  HdsTextGroupValues["Code"] = "code";
+  HdsTextGroupValues["Display"] = "display";
+  HdsTextGroupValues["Body"] = "body";
+  return HdsTextGroupValues;
+}({});
+
+export { HdsTextAlignValues, HdsTextColorValues, HdsTextGroupValues, HdsTextSizeValues, HdsTextWeightValues };
+//# sourceMappingURL=types.js.map

package/dist/components/hds/text/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../src/components/hds/text/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport type HdsTextTags = keyof HTMLElementTagNameMap;\n\nexport enum HdsTextColorValues {\n  Primary = 'primary',\n  Strong = 'strong',\n  Faint = 'faint',\n  Disabled = 'disabled',\n  HighContrast = 'high-contrast',\n  Action = 'action',\n  ActionHover = 'action-hover',\n  ActionActive = 'action-active',\n  Highlight = 'highlight',\n  HighlightOnSurface = 'highlight-on-surface',\n  HighlightHighContrast = 'highlight-high-contrast',\n  Success = 'success',\n  SuccessOnSurface = 'success-on-surface',\n  SuccessHighContrast = 'success-high-contrast',\n  Warning = 'warning',\n  WarningOnSurface = 'warning-on-surface',\n  WarningHighContrast = 'warning-high-contrast',\n  Critical = 'critical',\n  CriticalOnSurface = 'critical-on-surface',\n  CriticalHighContrast = 'critical-high-contrast',\n}\nexport type HdsTextColors = `${HdsTextColorValues}`;\n\nexport enum HdsTextAlignValues {\n  Left = 'left',\n  Center = 'center',\n  Right = 'right',\n}\nexport type HdsTextAligns = `${HdsTextAlignValues}`;\n\nexport enum HdsTextWeightValues {\n  Regular = 'regular',\n  Medium = 'medium',\n  Semibold = 'semibold',\n  Bold = 'bold',\n}\nexport type HdsTextWeights = `${HdsTextWeightValues}`;\n\nexport enum HdsTextSizeValues {\n  FiveHundred = 500,\n  FourHundred = 400,\n  ThreeHundred = 300,\n  TwoHundred = 200,\n  OneHundred = 100,\n}\ntype HdsTextSizesString = `${HdsTextSizeValues}`;\ntype HdsTextSizesNumber =\n  `${HdsTextSizeValues}` extends `${infer T extends number}` ? T : never;\nexport type HdsTextSizes = HdsTextSizesString | HdsTextSizesNumber;\n\nexport enum HdsTextGroupValues {\n  Code = 'code',\n  Display = 'display',\n  Body = 'body',\n}\nexport type HdsTextGroups = `${HdsTextGroupValues}`;\n"],"names":["HdsTextColorValues","HdsTextAlignValues","HdsTextWeightValues","HdsTextSizeValues","HdsTextGroupValues"],"mappings":"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"}

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

@@ -2,9 +2,15 @@ import templateOnly from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{! @glint-nocheck: not typesafe yet }}\n{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<Hds::Alert\n  class=\"hds-toast\"\n  @type=\"inline\"\n  @color={{@color}}\n  @icon={{@icon}}\n  @onDismiss={{@onDismiss}}\n  ...attributes\n  as |A|\n>\n  {{yield\n    (hash Title=A.Title Description=A.Description Button=A.Button LinkStandalone=A.LinkStandalone Generic=A.Generic)\n  }}\n</Hds::Alert>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<Hds::Alert\n  class=\"hds-toast\"\n  @type=\"inline\"\n  @color={{@color}}\n  @icon={{@icon}}\n  @onDismiss={{@onDismiss}}\n  ...attributes\n  as |A|\n>\n  {{yield\n    (hash Title=A.Title Description=A.Description Button=A.Button LinkStandalone=A.LinkStandalone Generic=A.Generic)\n  }}\n</Hds::Alert>");
 
-var index = setComponentTemplate(TEMPLATE, templateOnly());
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const HdsToastComponent = templateOnly();
+var index = setComponentTemplate(TEMPLATE, HdsToastComponent);
 
 export { index as default };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/hds/toast/index.hbs","../../../../src/components/hds/toast/index.js"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{! @glint-nocheck: not typesafe yet }}\\n{{!\\n  Copyright (c) HashiCorp, Inc.\\n  SPDX-License-Identifier: MPL-2.0\\n}}\\n<Hds::Alert\\n  class=\\\"hds-toast\\\"\\n  @type=\\\"inline\\\"\\n  @color={{@color}}\\n  @icon={{@icon}}\\n  @onDismiss={{@onDismiss}}\\n  ...attributes\\n  as |A|\\n>\\n  {{yield\\n    (hash Title=A.Title Description=A.Description Button=A.Button LinkStandalone=A.LinkStandalone Generic=A.Generic)\\n  }}\\n</Hds::Alert>\")","import templateOnly from '@ember/component/template-only';\nexport default templateOnly();\n"],"names":["setComponentTemplate","TEMPLATE","templateOnly"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,waAAwa;;ACA1c,YAAAA,oBAAA,CAAAC,QAAA,EAAeC,YAAY,EAAE,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/toast/index.hbs","../../../../src/components/hds/toast/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<Hds::Alert\\n  class=\\\"hds-toast\\\"\\n  @type=\\\"inline\\\"\\n  @color={{@color}}\\n  @icon={{@icon}}\\n  @onDismiss={{@onDismiss}}\\n  ...attributes\\n  as |A|\\n>\\n  {{yield\\n    (hash Title=A.Title Description=A.Description Button=A.Button LinkStandalone=A.LinkStandalone Generic=A.Generic)\\n  }}\\n</Hds::Alert>\")","/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport TemplateOnlyComponent from '@ember/component/template-only';\nimport type { HdsAlertSignature } from '../alert/';\n\nexport interface HdsToastSignature extends Omit<HdsAlertSignature, 'Args'> {\n  Args: Omit<HdsAlertSignature['Args'], 'type'>;\n}\n\nconst HdsToastComponent = TemplateOnlyComponent<HdsToastSignature>();\n\nexport default HdsToastComponent;\n"],"names":["HdsToastComponent","TemplateOnlyComponent","setComponentTemplate","TEMPLATE"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,+XAA+X;;ACDja;AACA;AACA;AACA;;AASA,MAAMA,iBAAiB,GAAGC,YAAqB,EAAqB,CAAA;AAEpE,YAAAC,oBAAA,CAAAC,QAAA,EAAeH,iBAAiB,CAAA;;;;"}

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

@@ -2,9 +2,15 @@ import templateOnly from '@ember/component/template-only';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{! @glint-nocheck: not typesafe yet }}\n{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n{{! template-lint-disable no-yield-only }}\n{{yield}}");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n{{! template-lint-disable no-yield-only }}\n{{yield}}");
 
-var index = setComponentTemplate(TEMPLATE, templateOnly());
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const HdsYieldComponent = templateOnly();
+var index = setComponentTemplate(TEMPLATE, HdsYieldComponent);
 
 export { index as default };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/hds/yield/index.hbs","../../../../src/components/hds/yield/index.js"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{! @glint-nocheck: not typesafe yet }}\\n{{!\\n  Copyright (c) HashiCorp, Inc.\\n  SPDX-License-Identifier: MPL-2.0\\n}}\\n{{! template-lint-disable no-yield-only }}\\n{{yield}}\")","import templateOnly from '@ember/component/template-only';\nexport default templateOnly();\n"],"names":["setComponentTemplate","TEMPLATE","templateOnly"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,8KAA8K;;ACAhN,YAAAA,oBAAA,CAAAC,QAAA,EAAeC,YAAY,EAAE,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/yield/index.hbs","../../../../src/components/hds/yield/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{{! template-lint-disable no-yield-only }}\\n{{yield}}\")","/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport TemplateOnlyComponent from '@ember/component/template-only';\n\nexport interface HdsYieldSignature {\n  Blocks: {\n    default: [];\n  };\n}\n\nconst HdsYieldComponent = TemplateOnlyComponent<HdsYieldSignature>();\n\nexport default HdsYieldComponent;\n"],"names":["HdsYieldComponent","TemplateOnlyComponent","setComponentTemplate","TEMPLATE"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,qIAAqI;;ACDvK;AACA;AACA;AACA;;AAUA,MAAMA,iBAAiB,GAAGC,YAAqB,EAAqB,CAAA;AAEpE,YAAAC,oBAAA,CAAAC,QAAA,EAAeH,iBAAiB,CAAA;;;;"}

package/dist/helpers/hds-link-to-models.js.map

@@ -1 +1 @@
-{"version":3,"file":"hds-link-to-models.js","sources":["../../src/helpers/hds-link-to-models.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { helper } from '@ember/component/helper';\nimport { assert } from '@ember/debug';\n\n/*\n * This helper can be used to support both @model and @models arguments when wrapping\n * the `<LinkTo>` component without it triggering assertions or having to use the component helper.\n *\n * The result of this helper should be passed into the `@models` argument of the `<LinkTo>` component:\n *\n * ```hbs\n * <LinkTo @models={{hds-link-to-models @model @models}} />\n * ```\n */\n\nexport function hdsLinkToModels<T>([model, models]: [T | undefined, T[] | undefined]) {\n  assert(\n    'You cannot provide both the `@model` and `@models` arguments to the component.',\n    !model || !models\n  );\n\n  if (model) {\n    return [model];\n  } else if (models) {\n    return models;\n  } else {\n    return [];\n  }\n}\n\nconst hdsLinkToModelsHelper = helper(hdsLinkToModels);\nexport default hdsLinkToModelsHelper;\n"],"names":["hdsLinkToModels","model","models","assert","hdsLinkToModelsHelper","helper"],"mappings":";;;AAAA;AACA;AACA;AACA;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEO,SAASA,eAAeA,CAAI,CAACC,KAAK,EAAEC,MAAM,CAAmC,EAAE;EACpFC,MAAM,CACJ,gFAAgF,EAChF,CAACF,KAAK,IAAI,CAACC,MACb,CAAC,CAAA;AAED,EAAA,IAAID,KAAK,EAAE;IACT,OAAO,CAACA,KAAK,CAAC,CAAA;GACf,MAAM,IAAIC,MAAM,EAAE;AACjB,IAAA,OAAOA,MAAM,CAAA;AACf,GAAC,MAAM;AACL,IAAA,OAAO,EAAE,CAAA;AACX,GAAA;AACF,CAAA;AAEA,MAAME,qBAAqB,GAAGC,MAAM,CAACL,eAAe;;;;"}
+{"version":3,"file":"hds-link-to-models.js","sources":["../../src/helpers/hds-link-to-models.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { helper } from '@ember/component/helper';\nimport { assert } from '@ember/debug';\n\n/*\n * This helper can be used to support both @model and @models arguments when wrapping\n * the `<LinkTo>` component without it triggering assertions or having to use the component helper.\n *\n * The result of this helper should be passed into the `@models` argument of the `<LinkTo>` component:\n *\n * ```hbs\n * <LinkTo @models={{hds-link-to-models @model @models}} />\n * ```\n */\n\nexport function hdsLinkToModels<T>([model, models]: [\n  T | undefined,\n  T[] | undefined\n]) {\n  assert(\n    'You cannot provide both the `@model` and `@models` arguments to the component.',\n    !model || !models\n  );\n\n  if (model) {\n    return [model];\n  } else if (models) {\n    return models;\n  } else {\n    return [];\n  }\n}\n\nconst hdsLinkToModelsHelper = helper(hdsLinkToModels);\nexport default hdsLinkToModelsHelper;\n"],"names":["hdsLinkToModels","model","models","assert","hdsLinkToModelsHelper","helper"],"mappings":";;;AAAA;AACA;AACA;AACA;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEO,SAASA,eAAeA,CAAI,CAACC,KAAK,EAAEC,MAAM,CAGhD,EAAE;EACDC,MAAM,CACJ,gFAAgF,EAChF,CAACF,KAAK,IAAI,CAACC,MACb,CAAC,CAAA;AAED,EAAA,IAAID,KAAK,EAAE;IACT,OAAO,CAACA,KAAK,CAAC,CAAA;GACf,MAAM,IAAIC,MAAM,EAAE;AACjB,IAAA,OAAOA,MAAM,CAAA;AACf,GAAC,MAAM;AACL,IAAA,OAAO,EAAE,CAAA;AACX,GAAA;AACF,CAAA;AAEA,MAAME,qBAAqB,GAAGC,MAAM,CAACL,eAAe;;;;"}

package/dist/modifiers/hds-anchored-position.js

@@ -0,0 +1,175 @@
+import { modifier } from 'ember-modifier';
+import { assert } from '@ember/debug';
+import { autoUpdate, limitShift, offset, flip, shift, autoPlacement, arrow, computePosition } from '@floating-ui/dom';
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const DEFAULT_PLACEMENT = 'bottom';
+const PLACEMENTS = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'];
+
+// share the same default value of "padding" for `flip/shift/autoPlacement` options
+// this refers to the minimum distance from the boundaries' edges (the viewport)
+// before the floating element changes its position (flips, shifts, or autoplace itself)
+const DEFAULT_EDGE_DISTANCE = 8;
+
+// we use this function to process all the options provided to the modifier in a single place,
+// in relation to the Floating UI APIs, and keep the modifier code more clean/simple
+const getFloatingUIOptions = options => {
+  let {
+    placement = DEFAULT_PLACEMENT,
+    strategy = 'absolute',
+    // we don't need to use `fixed` if we use the Popover API for the "floating" element (it puts the element in the `top-layer`)
+    offsetOptions,
+    flipOptions = {
+      padding: DEFAULT_EDGE_DISTANCE
+    },
+    shiftOptions = {
+      padding: DEFAULT_EDGE_DISTANCE,
+      limiter: limitShift()
+    },
+    autoPlacementOptions = {
+      padding: DEFAULT_EDGE_DISTANCE
+    },
+    middlewareExtra = [],
+    enableCollisionDetection,
+    arrowElement,
+    arrowPadding
+  } = options;
+
+  // we build dynamically the list of middleware functions to invoke, depending on the options provided
+
+  const middleware = [];
+
+  // https://floating-ui.com/docs/offset
+  middleware.push(offset(offsetOptions));
+
+  // https://floating-ui.com/docs/flip
+  // https://floating-ui.com/docs/shift
+  // https://floating-ui.com/docs/autoPlacement
+  if (enableCollisionDetection === true || enableCollisionDetection === 'flip') {
+    middleware.push(flip(flipOptions));
+  }
+  if (enableCollisionDetection === true || enableCollisionDetection === 'shift') {
+    middleware.push(shift(shiftOptions));
+  }
+  if (enableCollisionDetection === 'auto') {
+    middleware.push(autoPlacement(autoPlacementOptions));
+  }
+
+  // https://floating-ui.com/docs/arrow
+  if (arrowElement) {
+    middleware.push(arrow({
+      element: arrowElement,
+      padding: arrowPadding ?? 0
+    }));
+  }
+
+  // TODO? commenting this for now, will need to make this conditional to some argument (and understand how this relates to the `@height` argument)
+  // https://floating-ui.com/docs/size#match-reference-width
+  // size({
+  //   apply({ rects, elements }) {
+  //     Object.assign(elements.floating.style, {
+  //       width: `${rects.reference.width}px`,
+  //     });
+  //   },
+  // });
+  // size({
+  //   apply: ({ availableWidth, availableHeight, middlewareData }) => {
+  //     middlewareData.size = { availableWidth, availableHeight };
+  //   },
+  // }),
+
+  middleware.push(...middlewareExtra);
+  return {
+    placement,
+    strategy,
+    middleware
+  };
+};
+
+// Notice: we use a function-based modifier here instead of a class-based one
+// because it's quite simple in its logic, and doesn't require injecting services
+// see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers
+
+var anchoredPositionModifier = modifier((element, positional, named = {}) => {
+  // the element that "floats" next to the "anchor" (whose position is calculated in relation to the anchor)
+  // notice: this is the element the Ember modifier is attached to
+  const floatingElement = element;
+
+  // the element that acts as an "anchor" for the "floating" element
+  // it can be a DOM (string) selector or a DOM element
+  // notice: it's expressed as "positional" argument (array of arguments) for the modifier
+  const _anchorTarget = positional[0];
+  const anchorElement = typeof _anchorTarget === 'string' ? document.querySelector(_anchorTarget) : _anchorTarget;
+  assert('`hds-anchored-position` modifier - the provided "anchoring" element is not defined correctly', anchorElement instanceof HTMLElement || anchorElement instanceof SVGElement);
+
+  // the "arrow" element (optional) associated with the "floating" element
+  // it can be a DOM selector (string) or a DOM element
+  // notice: it's declared inside the "named" argument (object) for the modifier
+  // but we need to extract it also here so it can be used to assign inline styles to it
+  let arrowElement;
+  if (named.arrowElement) {
+    assert('`hds-anchored-position` modifier - the `element` provided for the "arrow" element is not a valid DOM node', named.arrowElement instanceof HTMLElement || named.arrowElement instanceof SVGElement);
+    arrowElement = named.arrowElement;
+  } else if (named.arrowSelector) {
+    assert('`hds-anchored-position` modifier - the `selector` provided for the "arrow" element must be a string', typeof named.arrowSelector === 'string');
+    arrowElement = document.querySelector(named.arrowSelector);
+    assert('`hds-anchored-position` modifier - the `selector` provided for the "arrow" element is not a valid DOM selector', arrowElement);
+  }
+
+  // the Floating UI "options" to apply to the "floating" element
+  // notice: we spread the `named` argument and override its `arrowElement` value instead of setting it directly because Ember complains that modifier's arguments must be immutable
+  const floatingOptions = getFloatingUIOptions({
+    ...named,
+    arrowElement
+  });
+  const computeFloatingPosition = async () => {
+    // important to know: `computePosition()` is not stateful, it only positions the "floating" element once
+    // see: https://floating-ui.com/docs/computePosition
+    const state = await computePosition(anchorElement, floatingElement, floatingOptions);
+    let {
+      x,
+      y,
+      placement,
+      strategy,
+      middlewareData
+    } = state;
+    Object.assign(floatingElement.style, {
+      position: strategy,
+      top: `${y}px`,
+      left: `${x}px`
+      // TODO? commenting this for now, will need to make this conditional to some argument (and understand how this relates to the `@height` argument)
+      // maxHeight: `${middlewareData.size.availableHeight - 10}px`,
+    });
+    if (arrowElement && middlewareData.arrow) {
+      // we assign a "data" attribute to the "arrow" element so we can use CSS (in the consuming components) to position/rotate it accordingly and we avoid calculating at runtime values that technically we already know
+      // (similar to what Tippy.js does: https://github.com/atomiks/tippyjs/blob/master/src/scss/svg-arrow.scss)
+      // IMPORTANT: floating-ui assumes the "arrow" container is square!
+      arrowElement.setAttribute('data-hds-anchored-arrow-placement', placement);
+
+      // we set `x` or `y` value (depends on the position of the arrow in relation to the "floating" element placement)
+      // see: https://floating-ui.com/docs/arrow#usage
+      Object.assign(arrowElement.style, {
+        left: middlewareData.arrow.x != null ? `${middlewareData.arrow.x}px` : '',
+        top: middlewareData.arrow.y != null ? `${middlewareData.arrow.y}px` : ''
+      });
+    }
+  };
+
+  // the `autoUpdate` function automatically updates the position of the floating element when necessary.
+  // it should only be called when the floating element is mounted on the DOM or visible on the screen.
+  // it returns a "cleanup" function that should be invoked when the floating element is removed from the DOM or hidden from the screen.
+  // see: https://floating-ui.com/docs/autoUpdate
+  const cleanupFloatingUI = autoUpdate(anchorElement, floatingElement, computeFloatingPosition);
+
+  // this (teardown) function is run when the element is removed from the DOM
+  return () => {
+    cleanupFloatingUI();
+  };
+});
+
+export { DEFAULT_PLACEMENT, PLACEMENTS, anchoredPositionModifier as default, getFloatingUIOptions };
+//# sourceMappingURL=hds-anchored-position.js.map

package/dist/modifiers/hds-anchored-position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hds-anchored-position.js","sources":["../../src/modifiers/hds-anchored-position.js"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { modifier } from 'ember-modifier';\nimport { assert } from '@ember/debug';\n\nimport {\n  autoUpdate,\n  computePosition,\n  offset,\n  flip,\n  shift,\n  limitShift,\n  autoPlacement,\n  arrow,\n  // ---\n  // this could be used in the future if we want to give consumers an option to hide the \"floating\" element when the \"anchor\" hides from the viewport\n  // see: https://floating-ui.com/docs/hide\n  // hide,\n  // ---\n  // this could be used in the future if we want to give consumers an option to:\n  // - let the \"floating\" element auto-resize when there is not enough space (usually vertical) in the viewport to contain the entire \"floating\" element\n  // - let the \"floating\" element match the width of the \"trigger\" (it may have min/max width/heigh via CSS too)\n  // see: https://floating-ui.com/docs/size\n  // notice: below you can find a preliminary code implementation that was tested and worked relatively well\n  // size,\n  // ---\n} from '@floating-ui/dom';\n\nexport const DEFAULT_PLACEMENT = 'bottom';\nexport const PLACEMENTS = [\n  'top',\n  'top-start',\n  'top-end',\n  'right',\n  'right-start',\n  'right-end',\n  'bottom',\n  'bottom-start',\n  'bottom-end',\n  'left',\n  'left-start',\n  'left-end',\n];\n\n// share the same default value of \"padding\" for `flip/shift/autoPlacement` options\n// this refers to the minimum distance from the boundaries' edges (the viewport)\n// before the floating element changes its position (flips, shifts, or autoplace itself)\nconst DEFAULT_EDGE_DISTANCE = 8;\n\n// we use this function to process all the options provided to the modifier in a single place,\n// in relation to the Floating UI APIs, and keep the modifier code more clean/simple\nexport const getFloatingUIOptions = (options) => {\n  let {\n    placement = DEFAULT_PLACEMENT,\n    strategy = 'absolute', // we don't need to use `fixed` if we use the Popover API for the \"floating\" element (it puts the element in the `top-layer`)\n    offsetOptions,\n    flipOptions = { padding: DEFAULT_EDGE_DISTANCE },\n    shiftOptions = { padding: DEFAULT_EDGE_DISTANCE, limiter: limitShift() },\n    autoPlacementOptions = { padding: DEFAULT_EDGE_DISTANCE },\n    middlewareExtra = [],\n    enableCollisionDetection,\n    arrowElement,\n    arrowPadding,\n  } = options;\n\n  // we build dynamically the list of middleware functions to invoke, depending on the options provided\n\n  const middleware = [];\n\n  // https://floating-ui.com/docs/offset\n  middleware.push(offset(offsetOptions));\n\n  // https://floating-ui.com/docs/flip\n  // https://floating-ui.com/docs/shift\n  // https://floating-ui.com/docs/autoPlacement\n  if (\n    enableCollisionDetection === true ||\n    enableCollisionDetection === 'flip'\n  ) {\n    middleware.push(flip(flipOptions));\n  }\n  if (\n    enableCollisionDetection === true ||\n    enableCollisionDetection === 'shift'\n  ) {\n    middleware.push(shift(shiftOptions));\n  }\n  if (enableCollisionDetection === 'auto') {\n    middleware.push(autoPlacement(autoPlacementOptions));\n  }\n\n  // https://floating-ui.com/docs/arrow\n  if (arrowElement) {\n    middleware.push(\n      arrow({\n        element: arrowElement,\n        padding: arrowPadding ?? 0,\n      })\n    );\n  }\n\n  // TODO? commenting this for now, will need to make this conditional to some argument (and understand how this relates to the `@height` argument)\n  // https://floating-ui.com/docs/size#match-reference-width\n  // size({\n  //   apply({ rects, elements }) {\n  //     Object.assign(elements.floating.style, {\n  //       width: `${rects.reference.width}px`,\n  //     });\n  //   },\n  // });\n  // size({\n  //   apply: ({ availableWidth, availableHeight, middlewareData }) => {\n  //     middlewareData.size = { availableWidth, availableHeight };\n  //   },\n  // }),\n\n  middleware.push(...middlewareExtra);\n\n  return {\n    placement,\n    strategy,\n    middleware,\n  };\n};\n\n// Notice: we use a function-based modifier here instead of a class-based one\n// because it's quite simple in its logic, and doesn't require injecting services\n// see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers\n\nexport default modifier((element, positional, named = {}) => {\n  // the element that \"floats\" next to the \"anchor\" (whose position is calculated in relation to the anchor)\n  // notice: this is the element the Ember modifier is attached to\n  const floatingElement = element;\n\n  // the element that acts as an \"anchor\" for the \"floating\" element\n  // it can be a DOM (string) selector or a DOM element\n  // notice: it's expressed as \"positional\" argument (array of arguments) for the modifier\n  const _anchorTarget = positional[0];\n  const anchorElement =\n    typeof _anchorTarget === 'string'\n      ? document.querySelector(_anchorTarget)\n      : _anchorTarget;\n\n  assert(\n    '`hds-anchored-position` modifier - the provided \"anchoring\" element is not defined correctly',\n    anchorElement instanceof HTMLElement || anchorElement instanceof SVGElement\n  );\n\n  // the \"arrow\" element (optional) associated with the \"floating\" element\n  // it can be a DOM selector (string) or a DOM element\n  // notice: it's declared inside the \"named\" argument (object) for the modifier\n  // but we need to extract it also here so it can be used to assign inline styles to it\n  let arrowElement;\n  if (named.arrowElement) {\n    assert(\n      '`hds-anchored-position` modifier - the `element` provided for the \"arrow\" element is not a valid DOM node',\n      named.arrowElement instanceof HTMLElement ||\n        named.arrowElement instanceof SVGElement\n    );\n\n    arrowElement = named.arrowElement;\n  } else if (named.arrowSelector) {\n    assert(\n      '`hds-anchored-position` modifier - the `selector` provided for the \"arrow\" element must be a string',\n      typeof named.arrowSelector === 'string'\n    );\n\n    arrowElement = document.querySelector(named.arrowSelector);\n\n    assert(\n      '`hds-anchored-position` modifier - the `selector` provided for the \"arrow\" element is not a valid DOM selector',\n      arrowElement\n    );\n  }\n\n  // the Floating UI \"options\" to apply to the \"floating\" element\n  // notice: we spread the `named` argument and override its `arrowElement` value instead of setting it directly because Ember complains that modifier's arguments must be immutable\n  const floatingOptions = getFloatingUIOptions({ ...named, arrowElement });\n\n  const computeFloatingPosition = async () => {\n    // important to know: `computePosition()` is not stateful, it only positions the \"floating\" element once\n    // see: https://floating-ui.com/docs/computePosition\n    const state = await computePosition(\n      anchorElement,\n      floatingElement,\n      floatingOptions\n    );\n\n    let { x, y, placement, strategy, middlewareData } = state;\n\n    Object.assign(floatingElement.style, {\n      position: strategy,\n      top: `${y}px`,\n      left: `${x}px`,\n      // TODO? commenting this for now, will need to make this conditional to some argument (and understand how this relates to the `@height` argument)\n      // maxHeight: `${middlewareData.size.availableHeight - 10}px`,\n    });\n\n    if (arrowElement && middlewareData.arrow) {\n      // we assign a \"data\" attribute to the \"arrow\" element so we can use CSS (in the consuming components) to position/rotate it accordingly and we avoid calculating at runtime values that technically we already know\n      // (similar to what Tippy.js does: https://github.com/atomiks/tippyjs/blob/master/src/scss/svg-arrow.scss)\n      // IMPORTANT: floating-ui assumes the \"arrow\" container is square!\n      arrowElement.setAttribute('data-hds-anchored-arrow-placement', placement);\n\n      // we set `x` or `y` value (depends on the position of the arrow in relation to the \"floating\" element placement)\n      // see: https://floating-ui.com/docs/arrow#usage\n      Object.assign(arrowElement.style, {\n        left:\n          middlewareData.arrow.x != null ? `${middlewareData.arrow.x}px` : '',\n        top:\n          middlewareData.arrow.y != null ? `${middlewareData.arrow.y}px` : '',\n      });\n    }\n  };\n\n  // the `autoUpdate` function automatically updates the position of the floating element when necessary.\n  // it should only be called when the floating element is mounted on the DOM or visible on the screen.\n  // it returns a \"cleanup\" function that should be invoked when the floating element is removed from the DOM or hidden from the screen.\n  // see: https://floating-ui.com/docs/autoUpdate\n  const cleanupFloatingUI = autoUpdate(\n    anchorElement,\n    floatingElement,\n    computeFloatingPosition\n  );\n\n  // this (teardown) function is run when the element is removed from the DOM\n  return () => {\n    cleanupFloatingUI();\n  };\n});\n"],"names":["DEFAULT_PLACEMENT","PLACEMENTS","DEFAULT_EDGE_DISTANCE","getFloatingUIOptions","options","placement","strategy","offsetOptions","flipOptions","padding","shiftOptions","limiter","limitShift","autoPlacementOptions","middlewareExtra","enableCollisionDetection","arrowElement","arrowPadding","middleware","push","offset","flip","shift","autoPlacement","arrow","element","modifier","positional","named","floatingElement","_anchorTarget","anchorElement","document","querySelector","assert","HTMLElement","SVGElement","arrowSelector","floatingOptions","computeFloatingPosition","state","computePosition","x","y","middlewareData","Object","assign","style","position","top","left","setAttribute","cleanupFloatingUI","autoUpdate"],"mappings":"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"}

package/dist/modifiers/hds-register-event.js

@@ -0,0 +1,40 @@
+import { modifier } from 'ember-modifier';
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+
+// Notice: we use a function-based modifier here instead of a class-based one
+// because it's quite simple in its logic, and doesn't require injecting services
+// see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers
+
+// this modifier is a "replacement" of the standard `{{on 'event' myFunction}}`
+// it's needed because the {{on}} modifier can't be applied conditionally, apparently
+// see: https://github.com/emberjs/ember.js/issues/19869#issuecomment-1909118910
+// see: https://github.com/emberjs/ember.js/pull/20629
+// see also: https://github.com/emberjs/ember.js/blob/main/packages/%40ember/-internals/glimmer/lib/modifiers/on.ts#L30
+var registerEvent = modifier((element, positional, named = {}) => {
+  // the "target" element the listeners are added to
+  // notice: this is the element the Ember modifier is attached to
+  const targetElement = element;
+  // the event name and handler to apply to the element
+  // notice: it's expressed as "positional" argument (array) for the modifier
+  const [event, eventHandler] = positional;
+  // the options for the `addEventListener()` method
+  // see: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+  // notice: it's expressed as "named" argument (object) for the modifier
+  const {
+    useCapture = false
+  } = named;
+  targetElement.addEventListener(event, eventHandler, useCapture);
+
+  // this (teardown) function is run when the element is removed from the DOM
+  return () => {
+    targetElement.removeEventListener(event, eventHandler, useCapture);
+  };
+});
+
+export { registerEvent as default };
+//# sourceMappingURL=hds-register-event.js.map

package/dist/modifiers/hds-register-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hds-register-event.js","sources":["../../src/modifiers/hds-register-event.js"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { modifier } from 'ember-modifier';\n\n// Notice: we use a function-based modifier here instead of a class-based one\n// because it's quite simple in its logic, and doesn't require injecting services\n// see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers\n\n// this modifier is a \"replacement\" of the standard `{{on 'event' myFunction}}`\n// it's needed because the {{on}} modifier can't be applied conditionally, apparently\n// see: https://github.com/emberjs/ember.js/issues/19869#issuecomment-1909118910\n// see: https://github.com/emberjs/ember.js/pull/20629\n// see also: https://github.com/emberjs/ember.js/blob/main/packages/%40ember/-internals/glimmer/lib/modifiers/on.ts#L30\nexport default modifier((element, positional, named = {}) => {\n  // the \"target\" element the listeners are added to\n  // notice: this is the element the Ember modifier is attached to\n  const targetElement = element;\n  // the event name and handler to apply to the element\n  // notice: it's expressed as \"positional\" argument (array) for the modifier\n  const [event, eventHandler] = positional;\n  // the options for the `addEventListener()` method\n  // see: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener\n  // notice: it's expressed as \"named\" argument (object) for the modifier\n  const { useCapture = false } = named;\n\n  targetElement.addEventListener(event, eventHandler, useCapture);\n\n  // this (teardown) function is run when the element is removed from the DOM\n  return () => {\n    targetElement.removeEventListener(event, eventHandler, useCapture);\n  };\n});\n"],"names":["modifier","element","positional","named","targetElement","event","eventHandler","useCapture","addEventListener","removeEventListener"],"mappings":";;AAAA;AACA;AACA;AACA;;;AAIA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,oBAAeA,QAAQ,CAAC,CAACC,OAAO,EAAEC,UAAU,EAAEC,KAAK,GAAG,EAAE,KAAK;AAC3D;AACA;EACA,MAAMC,aAAa,GAAGH,OAAO,CAAA;AAC7B;AACA;AACA,EAAA,MAAM,CAACI,KAAK,EAAEC,YAAY,CAAC,GAAGJ,UAAU,CAAA;AACxC;AACA;AACA;EACA,MAAM;AAAEK,IAAAA,UAAU,GAAG,KAAA;AAAM,GAAC,GAAGJ,KAAK,CAAA;EAEpCC,aAAa,CAACI,gBAAgB,CAACH,KAAK,EAAEC,YAAY,EAAEC,UAAU,CAAC,CAAA;;AAE/D;AACA,EAAA,OAAO,MAAM;IACXH,aAAa,CAACK,mBAAmB,CAACJ,KAAK,EAAEC,YAAY,EAAEC,UAAU,CAAC,CAAA;GACnE,CAAA;AACH,CAAC,CAAC;;;;"}

package/dist/modifiers/hds-tooltip.js

@@ -1,4 +1,4 @@
-import { c as _classPrivateMethodInitSpec, _ as _defineProperty, d as _classPrivateMethodGet } from '../_rollupPluginBabelHelpers-lqPQKyNs.js';
+import { c as _classPrivateMethodInitSpec, a as _defineProperty, d as _assertClassBrand } from '../_rollupPluginBabelHelpers-NoJJJNhk.js';
 import Modifier from 'ember-modifier';
 import { assert } from '@ember/debug';
 import { registerDestructor } from '@ember/destroyable';
@@ -31,15 +31,11 @@ function cleanup(instance) {
  * @class TooltipModifier
  *
  */
-var _setup = /*#__PURE__*/new WeakSet();
-var _update = /*#__PURE__*/new WeakSet();
-var _getTooltipProps = /*#__PURE__*/new WeakSet();
+var _HdsTooltipModifier_brand = /*#__PURE__*/new WeakSet();
 class HdsTooltipModifier extends Modifier {
   constructor(owner, args) {
     super(owner, args);
-    _classPrivateMethodInitSpec(this, _getTooltipProps);
-    _classPrivateMethodInitSpec(this, _update);
-    _classPrivateMethodInitSpec(this, _setup);
+    _classPrivateMethodInitSpec(this, _HdsTooltipModifier_brand);
     _defineProperty(this, "didSetup", false);
     _defineProperty(this, "interval", null);
     _defineProperty(this, "needsTabIndex", false);
@@ -70,21 +66,21 @@ class HdsTooltipModifier extends Modifier {
   modify(element, positional, named) {
     assert('Tooltip must have an element', element);
     if (!this.didSetup) {
-      _classPrivateMethodGet(this, _setup, _setup2).call(this, element, positional, named);
+      _assertClassBrand(_HdsTooltipModifier_brand, this, _setup).call(this, element, positional, named);
       this.didSetup = true;
     }
-    _classPrivateMethodGet(this, _update, _update2).call(this, element, positional, named);
+    _assertClassBrand(_HdsTooltipModifier_brand, this, _update).call(this, element, positional, named);
   }
 }
-function _setup2(element, positional, named) {
-  const tooltipProps = _classPrivateMethodGet(this, _getTooltipProps, _getTooltipProps2).call(this, element, positional, named);
+function _setup(element, positional, named) {
+  const tooltipProps = _assertClassBrand(_HdsTooltipModifier_brand, this, _getTooltipProps).call(this, element, positional, named);
   this.tooltip = tippy(element, tooltipProps);
 }
-function _update2(element, positional, named) {
-  const tooltipProps = _classPrivateMethodGet(this, _getTooltipProps, _getTooltipProps2).call(this, element, positional, named);
+function _update(element, positional, named) {
+  const tooltipProps = _assertClassBrand(_HdsTooltipModifier_brand, this, _getTooltipProps).call(this, element, positional, named);
   this.tooltip.setProps(tooltipProps);
 }
-function _getTooltipProps2(element, positional, named) {
+function _getTooltipProps(element, positional, named) {
   const {
     options = {}
   } = named;