@hashicorp/design-system-components 4.8.0 → 4.9.0

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

@@ -2,9 +2,15 @@ import templateOnlyComponent 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\n<Hds::Text::Body @tag=\"p\" @size=\"100\" class=\"hds-code-block__description\" ...attributes>\n  {{yield}}\n</Hds::Text::Body>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<Hds::Text::Body @tag=\"p\" @size=\"100\" class=\"hds-code-block__description\" ...attributes>\n  {{yield}}\n</Hds::Text::Body>");
 
-var description = setComponentTemplate(TEMPLATE, templateOnlyComponent());
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const HdsCodeBlockDescriptionComponent = templateOnlyComponent();
+var description = setComponentTemplate(TEMPLATE, HdsCodeBlockDescriptionComponent);
 
 export { description as default };
 //# sourceMappingURL=description.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"description.js","sources":["../../../../src/components/hds/code-block/description.hbs","../../../../src/components/hds/code-block/description.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\\n<Hds::Text::Body @tag=\\\"p\\\" @size=\\\"100\\\" class=\\\"hds-code-block__description\\\" ...attributes>\\n  {{yield}}\\n</Hds::Text::Body>\")","import templateOnly from '@ember/component/template-only';\nexport default templateOnly();\n"],"names":["setComponentTemplate","TEMPLATE","templateOnly"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,0PAA0P;;ACA5R,kBAAAA,oBAAA,CAAAC,QAAA,EAAeC,qBAAY,EAAE,CAAA;;;;"}
+{"version":3,"file":"description.js","sources":["../../../../src/components/hds/code-block/description.hbs","../../../../src/components/hds/code-block/description.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::Text::Body @tag=\\\"p\\\" @size=\\\"100\\\" class=\\\"hds-code-block__description\\\" ...attributes>\\n  {{yield}}\\n</Hds::Text::Body>\")","/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport templateOnlyComponent from '@ember/component/template-only';\nimport type { HdsTextBodySignature } from '../text/body';\n\nexport interface HdsCodeBlockDescriptionSignature {\n  Blocks: {\n    default: [];\n  };\n  Element: HdsTextBodySignature['Element'];\n}\n\nconst HdsCodeBlockDescriptionComponent =\n  templateOnlyComponent<HdsCodeBlockDescriptionSignature>();\n\nexport default HdsCodeBlockDescriptionComponent;\n"],"names":["HdsCodeBlockDescriptionComponent","templateOnlyComponent","setComponentTemplate","TEMPLATE"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,iNAAiN;;ACDnP;AACA;AACA;AACA;;AAYA,MAAMA,gCAAgC,GACpCC,qBAAqB,EAAoC,CAAA;AAE3D,kBAAAC,oBAAA,CAAAC,QAAA,EAAeH,gCAAgC,CAAA;;;;"}

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

@@ -7,6 +7,7 @@ import { next, schedule } from '@ember/runloop';
 import { htmlSafe } from '@ember/template';
 import { guidFor } from '@ember/object/internals';
 import Prism from 'prismjs';
+import { HdsCodeBlockLanguageValues } from './types.js';
 import 'prismjs/plugins/line-numbers/prism-line-numbers';
 import 'prismjs/plugins/line-highlight/prism-line-highlight';
 import 'prismjs/components/prism-bash';
@@ -22,10 +23,11 @@ import 'prismjs/components/prism-handlebars';
 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\n<div class={{this.classNames}} ...attributes>\n  <div class=\"hds-code-block__header\">\n    {{~yield (hash Title=(component \"hds/code-block/title\"))~}}\n    {{~yield (hash Description=(component \"hds/code-block/description\"))~}}\n  </div>\n  <div class=\"hds-code-block__body\">\n    {{! content within pre tag is whitespace-sensitive; do not add new lines! }}\n    <pre\n      class=\"hds-code-block__code\"\n      {{style maxHeight=@maxHeight}}\n      data-line={{@highlightLines}}\n      id={{this.preCodeId}}\n      tabindex=\"0\"\n    ><code {{did-insert this.setPrismCode}} {{did-update this.setPrismCode this.code @language}}>\n        {{~this.prismCode~}}\n      </code></pre>\n\n    {{#if @hasCopyButton}}\n      <Hds::CodeBlock::CopyButton @targetToCopy=\"#{{this.preCodeId}}\" aria-describedby={{this.preCodeId}} />\n    {{/if}}\n  </div>\n</div>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<div class={{this.classNames}} ...attributes>\n  <div class=\"hds-code-block__header\">\n    {{~yield (hash Title=(component \"hds/code-block/title\"))~}}\n    {{~yield (hash Description=(component \"hds/code-block/description\"))~}}\n  </div>\n  <div class=\"hds-code-block__body\">\n    {{! content within pre tag is whitespace-sensitive; do not add new lines! }}\n    <pre\n      class=\"hds-code-block__code\"\n      {{style maxHeight=@maxHeight}}\n      data-line={{@highlightLines}}\n      id={{this.preCodeId}}\n      tabindex=\"0\"\n    ><code {{did-insert this.setPrismCode}} {{did-update this.setPrismCode this.code @language}}>\n        {{~this.prismCode~}}\n      </code></pre>\n\n    {{#if @hasCopyButton}}\n      <Hds::CodeBlock::CopyButton @targetToCopy=\"#{{this.preCodeId}}\" aria-describedby={{this.preCodeId}} />\n    {{/if}}\n  </div>\n</div>");
 
 var _class, _descriptor;
-let HdsCodeBlockIndexComponent = (_class = class HdsCodeBlockIndexComponent extends Component {
+const LANGUAGES = Object.values(HdsCodeBlockLanguageValues);
+let HdsCodeBlockComponent = (_class = class HdsCodeBlockComponent extends Component {
   constructor(...args) {
     super(...args);
     _initializerDefineProperty(this, "prismCode", _descriptor, this);
@@ -44,8 +46,8 @@ let HdsCodeBlockIndexComponent = (_class = class HdsCodeBlockIndexComponent exte
   get code() {
     const code = this.args.value;
     assert('@code for "Hds::CodeBlock" must have a valid value', code !== undefined);
-    if (Prism?.plugins?.NormalizeWhitespace) {
-      return Prism.plugins.NormalizeWhitespace.normalize(code);
+    if (Prism?.plugins?.['NormalizeWhitespace']) {
+      return Prism.plugins['NormalizeWhitespace'].normalize(code);
     }
     return code;
   }
@@ -92,13 +94,13 @@ let HdsCodeBlockIndexComponent = (_class = class HdsCodeBlockIndexComponent exte
   setPrismCode(element) {
     const code = this.code;
     const language = this.language;
-    const grammar = Prism.languages[language];
+    const grammar = language ? Prism.languages[language] : undefined;
     if (code) {
       next(() => {
         if (language && grammar) {
           this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));
         } else {
-          this.prismCode = htmlSafe(Prism.util.encode(code));
+          this.prismCode = htmlSafe(Prism.util.encode(code).toString());
         }
 
         // Force prism-line-numbers plugin initialization, required for Prism.highlight usage
@@ -129,7 +131,7 @@ let HdsCodeBlockIndexComponent = (_class = class HdsCodeBlockIndexComponent exte
   get classNames() {
     // Currently there is only one theme so the class name is hard-coded.
     // In the future, additional themes such as a "light" theme could be added.
-    let classes = ['hds-code-block', 'hds-code-block--theme-dark'];
+    const classes = ['hds-code-block', 'hds-code-block--theme-dark'];
     if (this.language) {
       classes.push(`language-${this.language}`);
     }
@@ -151,10 +153,10 @@ let HdsCodeBlockIndexComponent = (_class = class HdsCodeBlockIndexComponent exte
   enumerable: true,
   writable: true,
   initializer: function () {
-    return '';
+    return htmlSafe('');
   }
 }), _applyDecoratedDescriptor(_class.prototype, "setPrismCode", [action], Object.getOwnPropertyDescriptor(_class.prototype, "setPrismCode"), _class.prototype)), _class);
-setComponentTemplate(TEMPLATE, HdsCodeBlockIndexComponent);
+setComponentTemplate(TEMPLATE, HdsCodeBlockComponent);
 
-export { HdsCodeBlockIndexComponent as default };
+export { LANGUAGES, HdsCodeBlockComponent as default };
 //# sourceMappingURL=index.js.map

package/dist/components/hds/code-block/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/hds/code-block/index.hbs","../../../../src/components/hds/code-block/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\\n<div class={{this.classNames}} ...attributes>\\n  <div class=\\\"hds-code-block__header\\\">\\n    {{~yield (hash Title=(component \\\"hds/code-block/title\\\"))~}}\\n    {{~yield (hash Description=(component \\\"hds/code-block/description\\\"))~}}\\n  </div>\\n  <div class=\\\"hds-code-block__body\\\">\\n    {{! content within pre tag is whitespace-sensitive; do not add new lines! }}\\n    <pre\\n      class=\\\"hds-code-block__code\\\"\\n      {{style maxHeight=@maxHeight}}\\n      data-line={{@highlightLines}}\\n      id={{this.preCodeId}}\\n      tabindex=\\\"0\\\"\\n    ><code {{did-insert this.setPrismCode}} {{did-update this.setPrismCode this.code @language}}>\\n        {{~this.prismCode~}}\\n      </code></pre>\\n\\n    {{#if @hasCopyButton}}\\n      <Hds::CodeBlock::CopyButton @targetToCopy=\\\"#{{this.preCodeId}}\\\" aria-describedby={{this.preCodeId}} />\\n    {{/if}}\\n  </div>\\n</div>\")","/**\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 { assert } from '@ember/debug';\nimport { next, schedule } from '@ember/runloop';\nimport { htmlSafe } from '@ember/template';\nimport { guidFor } from '@ember/object/internals';\n\nimport Prism from 'prismjs';\n\nimport 'prismjs/plugins/line-numbers/prism-line-numbers';\nimport 'prismjs/plugins/line-highlight/prism-line-highlight';\n\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-go';\nimport 'prismjs/components/prism-hcl';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-log';\nimport 'prismjs/components/prism-ruby';\nimport 'prismjs/components/prism-shell-session';\nimport 'prismjs/components/prism-yaml';\n\n// These imports are required to overcome a global variable clash in Helios website\n// where language import are overriden by the Prism instance in `CodeBlock`\n// Note that `prism-handlebars` is dependant on `prism-markup-templating`\nimport 'prismjs/components/prism-markup-templating';\nimport 'prismjs/components/prism-handlebars';\n\nexport default class HdsCodeBlockIndexComponent extends Component {\n  @tracked prismCode = '';\n\n  /**\n   * Generates a unique ID for the code content\n   *\n   * @param preCodeId\n   */\n  preCodeId = 'pre-code-' + guidFor(this);\n\n  /**\n   * @param code\n   * @type {string}\n   * @description code text content for the CodeBlock\n   */\n  get code() {\n    const code = this.args.value;\n\n    assert(\n      '@code for \"Hds::CodeBlock\" must have a valid value',\n      code !== undefined\n    );\n\n    if (Prism?.plugins?.NormalizeWhitespace) {\n      return Prism.plugins.NormalizeWhitespace.normalize(code);\n    }\n\n    return code;\n  }\n\n  /**\n   * @param language\n   * @type {string}\n   * @default undefined\n   * @description name of coding language used within CodeBlock for syntax highlighting\n   */\n  get language() {\n    return this.args.language ?? undefined;\n  }\n\n  /**\n   * @param hasLineNumbers\n   * @type {boolean}\n   * @default true\n   * @description Displays line numbers if true\n   */\n  get hasLineNumbers() {\n    return this.args.hasLineNumbers ?? true;\n  }\n\n  /**\n   * @param isStandalone\n   * @type {boolean}\n   * @default true\n   * @description Make CodeBlock container corners appear rounded\n   */\n  get isStandalone() {\n    return this.args.isStandalone ?? true;\n  }\n\n  /**\n   * @param hasLineWrapping\n   * @type {boolean}\n   * @default false\n   * @description Make text content wrap on multiple lines\n   */\n  get hasLineWrapping() {\n    return this.args.hasLineWrapping ?? false;\n  }\n\n  @action\n  setPrismCode(element) {\n    const code = this.code;\n    const language = this.language;\n    const grammar = Prism.languages[language];\n\n    if (code) {\n      next(() => {\n        if (language && grammar) {\n          this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));\n        } else {\n          this.prismCode = htmlSafe(Prism.util.encode(code));\n        }\n\n        // Force prism-line-numbers plugin initialization, required for Prism.highlight usage\n        // See https://github.com/PrismJS/prism/issues/1234\n        Prism.hooks.run('complete', {\n          code,\n          element,\n        });\n\n        // Force prism-line-highlight plugin initialization\n        // Context: https://github.com/hashicorp/design-system/pull/1749#discussion_r1374288785\n        if (this.args.highlightLines) {\n          // we need to delay re-evaluating the context for prism-line-highlight for as much as possible, and `afterRender` is the 'latest' we can use in the component lifecycle\n          schedule('afterRender', () => {\n            // we piggy-back on the plugin's `resize` event listener to trigger a new call of the `highlightLines` function: https://github.com/PrismJS/prism/blob/master/plugins/line-highlight/prism-line-highlight.js#L337\n            if (window) window.dispatchEvent(new Event('resize'));\n          });\n        }\n      });\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    // Currently there is only one theme so the class name is hard-coded.\n    // In the future, additional themes such as a \"light\" theme could be added.\n    let classes = ['hds-code-block', 'hds-code-block--theme-dark'];\n\n    if (this.language) {\n      classes.push(`language-${this.language}`);\n    }\n\n    if (this.isStandalone === true) {\n      classes.push('hds-code-block--is-standalone');\n    }\n\n    if (this.hasLineWrapping === true) {\n      classes.push('hds-code-block--has-line-wrapping');\n    }\n\n    // Note: Prism.js is using the specific class name \"line-numbers\" to determine implementation of line numbers in the UI\n    if (this.hasLineNumbers || this.args.highlightLines) {\n      classes.push('line-numbers');\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["HdsCodeBlockIndexComponent","_class","Component","constructor","args","_initializerDefineProperty","_descriptor","_defineProperty","guidFor","code","value","assert","undefined","Prism","plugins","NormalizeWhitespace","normalize","language","hasLineNumbers","isStandalone","hasLineWrapping","setPrismCode","element","grammar","languages","next","prismCode","htmlSafe","highlight","util","encode","hooks","run","highlightLines","schedule","window","dispatchEvent","Event","classNames","classes","push","join","_applyDecoratedDescriptor","prototype","tracked","configurable","enumerable","writable","initializer","action","Object","getOwnPropertyDescriptor","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/code-block/index.hbs","../../../../src/components/hds/code-block/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<div class={{this.classNames}} ...attributes>\\n  <div class=\\\"hds-code-block__header\\\">\\n    {{~yield (hash Title=(component \\\"hds/code-block/title\\\"))~}}\\n    {{~yield (hash Description=(component \\\"hds/code-block/description\\\"))~}}\\n  </div>\\n  <div class=\\\"hds-code-block__body\\\">\\n    {{! content within pre tag is whitespace-sensitive; do not add new lines! }}\\n    <pre\\n      class=\\\"hds-code-block__code\\\"\\n      {{style maxHeight=@maxHeight}}\\n      data-line={{@highlightLines}}\\n      id={{this.preCodeId}}\\n      tabindex=\\\"0\\\"\\n    ><code {{did-insert this.setPrismCode}} {{did-update this.setPrismCode this.code @language}}>\\n        {{~this.prismCode~}}\\n      </code></pre>\\n\\n    {{#if @hasCopyButton}}\\n      <Hds::CodeBlock::CopyButton @targetToCopy=\\\"#{{this.preCodeId}}\\\" aria-describedby={{this.preCodeId}} />\\n    {{/if}}\\n  </div>\\n</div>\")","/**\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 { assert } from '@ember/debug';\nimport { next, schedule } from '@ember/runloop';\nimport { htmlSafe } from '@ember/template';\nimport { guidFor } from '@ember/object/internals';\n\nimport Prism from 'prismjs';\n\nimport type { SafeString } from '@ember/template/-private/handlebars';\nimport type { ComponentLike } from '@glint/template';\n\nimport type { HdsCodeBlockTitleSignature } from './title';\nimport type { HdsCodeBlockDescriptionSignature } from './description';\nimport { HdsCodeBlockLanguageValues } from './types.ts';\nimport type { HdsCodeBlockLanguages } from './types.ts';\n\nimport 'prismjs/plugins/line-numbers/prism-line-numbers';\nimport 'prismjs/plugins/line-highlight/prism-line-highlight';\n\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-go';\nimport 'prismjs/components/prism-hcl';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-log';\nimport 'prismjs/components/prism-ruby';\nimport 'prismjs/components/prism-shell-session';\nimport 'prismjs/components/prism-yaml';\n\n// These imports are required to overcome a global variable clash in Helios website\n// where language import are overriden by the Prism instance in `CodeBlock`\n// Note that `prism-handlebars` is dependant on `prism-markup-templating`\nimport 'prismjs/components/prism-markup-templating';\nimport 'prismjs/components/prism-handlebars';\n\nexport const LANGUAGES: string[] = Object.values(HdsCodeBlockLanguageValues);\n\nexport interface HdsCodeBlockSignature {\n  Args: {\n    hasCopyButton?: boolean;\n    hasLineNumbers?: boolean;\n    hasLineWrapping?: boolean;\n    highlightLines?: string;\n    isStandalone?: boolean;\n    language?: HdsCodeBlockLanguages;\n    maxHeight?: string;\n    value: string;\n  };\n  Blocks: {\n    default: [\n      {\n        Title?: ComponentLike<HdsCodeBlockTitleSignature>;\n        Description?: ComponentLike<HdsCodeBlockDescriptionSignature>;\n      },\n    ];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsCodeBlockComponent extends Component<HdsCodeBlockSignature> {\n  @tracked prismCode: SafeString = htmlSafe('');\n\n  /**\n   * Generates a unique ID for the code content\n   *\n   * @param preCodeId\n   */\n  preCodeId = 'pre-code-' + guidFor(this);\n\n  /**\n   * @param code\n   * @type {string}\n   * @description code text content for the CodeBlock\n   */\n  get code(): string {\n    const code = this.args.value;\n\n    assert(\n      '@code for \"Hds::CodeBlock\" must have a valid value',\n      code !== undefined\n    );\n\n    if (Prism?.plugins?.['NormalizeWhitespace']) {\n      return Prism.plugins['NormalizeWhitespace'].normalize(code);\n    }\n\n    return code;\n  }\n\n  /**\n   * @param language\n   * @type {string}\n   * @default undefined\n   * @description name of coding language used within CodeBlock for syntax highlighting\n   */\n  get language(): HdsCodeBlockLanguages | undefined {\n    return this.args.language ?? undefined;\n  }\n\n  /**\n   * @param hasLineNumbers\n   * @type {boolean}\n   * @default true\n   * @description Displays line numbers if true\n   */\n  get hasLineNumbers(): boolean {\n    return this.args.hasLineNumbers ?? true;\n  }\n\n  /**\n   * @param isStandalone\n   * @type {boolean}\n   * @default true\n   * @description Make CodeBlock container corners appear rounded\n   */\n  get isStandalone(): boolean {\n    return this.args.isStandalone ?? true;\n  }\n\n  /**\n   * @param hasLineWrapping\n   * @type {boolean}\n   * @default false\n   * @description Make text content wrap on multiple lines\n   */\n  get hasLineWrapping(): boolean {\n    return this.args.hasLineWrapping ?? false;\n  }\n\n  @action\n  setPrismCode(element: HTMLElement): void {\n    const code = this.code;\n    const language = this.language;\n    const grammar = language ? Prism.languages[language] : undefined;\n\n    if (code) {\n      next(() => {\n        if (language && grammar) {\n          this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));\n        } else {\n          this.prismCode = htmlSafe(Prism.util.encode(code).toString());\n        }\n\n        // Force prism-line-numbers plugin initialization, required for Prism.highlight usage\n        // See https://github.com/PrismJS/prism/issues/1234\n        Prism.hooks.run('complete', {\n          code,\n          element,\n        });\n\n        // Force prism-line-highlight plugin initialization\n        // Context: https://github.com/hashicorp/design-system/pull/1749#discussion_r1374288785\n        if (this.args.highlightLines) {\n          // we need to delay re-evaluating the context for prism-line-highlight for as much as possible, and `afterRender` is the 'latest' we can use in the component lifecycle\n          schedule('afterRender', () => {\n            // we piggy-back on the plugin's `resize` event listener to trigger a new call of the `highlightLines` function: https://github.com/PrismJS/prism/blob/master/plugins/line-highlight/prism-line-highlight.js#L337\n            if (window) window.dispatchEvent(new Event('resize'));\n          });\n        }\n      });\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(): string {\n    // Currently there is only one theme so the class name is hard-coded.\n    // In the future, additional themes such as a \"light\" theme could be added.\n    const classes = ['hds-code-block', 'hds-code-block--theme-dark'];\n\n    if (this.language) {\n      classes.push(`language-${this.language}`);\n    }\n\n    if (this.isStandalone === true) {\n      classes.push('hds-code-block--is-standalone');\n    }\n\n    if (this.hasLineWrapping === true) {\n      classes.push('hds-code-block--has-line-wrapping');\n    }\n\n    // Note: Prism.js is using the specific class name \"line-numbers\" to determine implementation of line numbers in the UI\n    if (this.hasLineNumbers || this.args.highlightLines) {\n      classes.push('line-numbers');\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["LANGUAGES","Object","values","HdsCodeBlockLanguageValues","HdsCodeBlockComponent","_class","Component","constructor","args","_initializerDefineProperty","_descriptor","_defineProperty","guidFor","code","value","assert","undefined","Prism","plugins","normalize","language","hasLineNumbers","isStandalone","hasLineWrapping","setPrismCode","element","grammar","languages","next","prismCode","htmlSafe","highlight","util","encode","toString","hooks","run","highlightLines","schedule","window","dispatchEvent","Event","classNames","classes","push","join","_applyDecoratedDescriptor","prototype","tracked","configurable","enumerable","writable","initializer","action","getOwnPropertyDescriptor","setComponentTemplate","TEMPLATE"],"mappings":"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"}

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

@@ -2,9 +2,15 @@ import templateOnlyComponent 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\n<Hds::Text::Body @size=\"200\" @tag=\"p\" @weight=\"semibold\" class=\"hds-code-block__title\" ...attributes>\n  {{yield}}\n</Hds::Text::Body>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<Hds::Text::Body @size=\"200\" @tag=\"p\" @weight=\"semibold\" class=\"hds-code-block__title\" ...attributes>\n  {{yield}}\n</Hds::Text::Body>");
 
-var title = setComponentTemplate(TEMPLATE, templateOnlyComponent());
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const HdsCodeBlockTitleComponent = templateOnlyComponent();
+var title = setComponentTemplate(TEMPLATE, HdsCodeBlockTitleComponent);
 
 export { title as default };
 //# sourceMappingURL=title.js.map

package/dist/components/hds/code-block/title.js.map

@@ -1 +1 @@
-{"version":3,"file":"title.js","sources":["../../../../src/components/hds/code-block/title.hbs","../../../../src/components/hds/code-block/title.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\\n<Hds::Text::Body @size=\\\"200\\\" @tag=\\\"p\\\" @weight=\\\"semibold\\\" class=\\\"hds-code-block__title\\\" ...attributes>\\n  {{yield}}\\n</Hds::Text::Body>\")","import templateOnly from '@ember/component/template-only';\nexport default templateOnly();\n"],"names":["setComponentTemplate","TEMPLATE","templateOnly"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,yQAAyQ;;ACA3S,YAAAA,oBAAA,CAAAC,QAAA,EAAeC,qBAAY,EAAE,CAAA;;;;"}
+{"version":3,"file":"title.js","sources":["../../../../src/components/hds/code-block/title.hbs","../../../../src/components/hds/code-block/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::Text::Body @size=\\\"200\\\" @tag=\\\"p\\\" @weight=\\\"semibold\\\" class=\\\"hds-code-block__title\\\" ...attributes>\\n  {{yield}}\\n</Hds::Text::Body>\")","/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport templateOnlyComponent from '@ember/component/template-only';\nimport type { HdsTextBodySignature } from '../text/body';\n\nexport interface HdsCodeBlockTitleSignature {\n  Blocks: {\n    default: [];\n  };\n  Element: HdsTextBodySignature['Element'];\n}\n\nconst HdsCodeBlockTitleComponent =\n  templateOnlyComponent<HdsCodeBlockTitleSignature>();\n\nexport default HdsCodeBlockTitleComponent;\n"],"names":["HdsCodeBlockTitleComponent","templateOnlyComponent","setComponentTemplate","TEMPLATE"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,gOAAgO;;ACDlQ;AACA;AACA;AACA;;AAYA,MAAMA,0BAA0B,GAC9BC,qBAAqB,EAA8B,CAAA;AAErD,YAAAC,oBAAA,CAAAC,QAAA,EAAeH,0BAA0B,CAAA;;;;"}

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

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+let HdsCodeBlockLanguageValues = /*#__PURE__*/function (HdsCodeBlockLanguageValues) {
+  HdsCodeBlockLanguageValues["Bash"] = "bash";
+  HdsCodeBlockLanguageValues["Go"] = "go";
+  HdsCodeBlockLanguageValues["Hcl"] = "hcl";
+  HdsCodeBlockLanguageValues["Json"] = "json";
+  HdsCodeBlockLanguageValues["Log"] = "log";
+  HdsCodeBlockLanguageValues["Ruby"] = "ruby";
+  HdsCodeBlockLanguageValues["ShellSession"] = "shell-session";
+  HdsCodeBlockLanguageValues["Yaml"] = "yaml";
+  return HdsCodeBlockLanguageValues;
+}({});
+
+export { HdsCodeBlockLanguageValues };
+//# sourceMappingURL=types.js.map

package/dist/components/hds/code-block/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../src/components/hds/code-block/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport enum HdsCodeBlockLanguageValues {\n  Bash = 'bash',\n  Go = 'go',\n  Hcl = 'hcl',\n  Json = 'json',\n  Log = 'log',\n  Ruby = 'ruby',\n  ShellSession = 'shell-session',\n  Yaml = 'yaml',\n}\n\nexport type HdsCodeBlockLanguages = `${HdsCodeBlockLanguageValues}`;\n"],"names":["HdsCodeBlockLanguageValues"],"mappings":"AAAA;AACA;AACA;AACA;;AAEYA,IAAAA,0BAA0B,0BAA1BA,0BAA0B,EAAA;EAA1BA,0BAA0B,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAA1BA,0BAA0B,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA;EAA1BA,0BAA0B,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;EAA1BA,0BAA0B,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAA1BA,0BAA0B,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;EAA1BA,0BAA0B,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAA1BA,0BAA0B,CAAA,cAAA,CAAA,GAAA,eAAA,CAAA;EAA1BA,0BAA0B,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;AAAA,EAAA,OAA1BA,0BAA0B,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

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

@@ -0,0 +1,89 @@
+import { a as _defineProperty } from '../../../_rollupPluginBabelHelpers-KIi_qCIU.js';
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { assert } from '@ember/debug';
+import { iconNames } from '@hashicorp/flight-icons/svg';
+import { HdsIconColorValues, HdsIconSizeValues } from './types.js';
+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<svg\n  class={{this.classNames}}\n  ...attributes\n  aria-hidden=\"{{if @title \'false\' \'true\'}}\"\n  aria-labelledby={{this.ariaLabelledby}}\n  data-test-icon={{@name}}\n  fill=\"{{this.fillColor}}\"\n  id={{this.iconId}}\n  role={{this.role}}\n  width=\"{{this.svgSize.width}}\"\n  height=\"{{this.svgSize.height}}\"\n  viewBox=\"0 0 {{this.size}} {{this.size}}\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  {{#if @title}}\n    <title id={{this.titleId}}>{{@title}}</title>\n    <g role=\"presentation\">\n      <use href=\"#flight-{{@name}}-{{this.size}}\"></use>\n    </g>\n  {{else}}\n    <use href=\"#flight-{{@name}}-{{this.size}}\"></use>\n  {{/if}}\n</svg>");
+
+const AVAILABLE_COLORS = Object.values(HdsIconColorValues);
+class HdsIcon extends Component {
+  constructor(owner, args) {
+    super(owner, args);
+    _defineProperty(this, "iconId", 'icon-' + guidFor(this));
+    _defineProperty(this, "titleId", 'title-' + guidFor(this));
+    if (!this.args.name) {
+      assert('Please provide to <Hds::Icon> a value for @name');
+    } else if (!iconNames.includes(this.args.name)) {
+      assert(`The icon @name "${this.args.name}" provided to <Hds::Icon> is not correct. Please verify it exists on https://helios.hashicorp.design/icons/library`);
+    }
+  }
+  get isInline() {
+    return this.args.isInline ?? false;
+  }
+  get predefinedColor() {
+    const {
+      color
+    } = this.args;
+    if (color && AVAILABLE_COLORS.includes(color)) {
+      return color;
+    } else {
+      return undefined;
+    }
+  }
+  get fillColor() {
+    if (this.predefinedColor !== undefined) {
+      return 'currentColor';
+    } else {
+      return this.args.color ?? 'currentColor';
+    }
+  }
+  get size() {
+    return this.args.size ?? HdsIconSizeValues.Sixteen;
+  }
+  get svgSize() {
+    return {
+      width: this.args.stretched ? '100%' : this.size,
+      height: this.args.stretched ? '100%' : this.size
+    };
+  }
+  get title() {
+    return this.args.title ?? null;
+  }
+  get role() {
+    return this.args.title ? 'img' : null;
+  }
+  get ariaLabelledby() {
+    return this.args.title ? this.titleId : null;
+  }
+  get classNames() {
+    const {
+      name
+    } = this.args;
+    const classes = ['hds-icon'];
+
+    // add a class based on the @name argument
+    classes.push(`hds-icon-${name}`);
+    if (this.isInline) {
+      classes.push('hds-icon--is-inline');
+    }
+
+    // add a (helper) class based on the @color argument (if pre-defined)
+    if (this.predefinedColor) {
+      classes.push(`hds-foreground-${this.predefinedColor}`);
+    }
+
+    // add an extra class to control the animation (depends on the icon)
+    if (['loading', 'running'].includes(name)) {
+      classes.push(`hds-icon--animation-${name}`);
+    }
+    return classes.join(' ');
+  }
+}
+setComponentTemplate(TEMPLATE, HdsIcon);
+
+export { AVAILABLE_COLORS, HdsIcon as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/icon/index.hbs","../../../../src/components/hds/icon/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<svg\\n  class={{this.classNames}}\\n  ...attributes\\n  aria-hidden=\\\"{{if @title \\'false\\' \\'true\\'}}\\\"\\n  aria-labelledby={{this.ariaLabelledby}}\\n  data-test-icon={{@name}}\\n  fill=\\\"{{this.fillColor}}\\\"\\n  id={{this.iconId}}\\n  role={{this.role}}\\n  width=\\\"{{this.svgSize.width}}\\\"\\n  height=\\\"{{this.svgSize.height}}\\\"\\n  viewBox=\\\"0 0 {{this.size}} {{this.size}}\\\"\\n  xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n>\\n  {{#if @title}}\\n    <title id={{this.titleId}}>{{@title}}</title>\\n    <g role=\\\"presentation\\\">\\n      <use href=\\\"#flight-{{@name}}-{{this.size}}\\\"></use>\\n    </g>\\n  {{else}}\\n    <use href=\\\"#flight-{{@name}}-{{this.size}}\\\"></use>\\n  {{/if}}\\n</svg>\")","/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { guidFor } from '@ember/object/internals';\nimport { assert } from '@ember/debug';\nimport { iconNames } from '@hashicorp/flight-icons/svg';\nimport { HdsIconSizeValues, HdsIconColorValues } from './types.ts';\nimport type { HdsIconSizes, HdsIconColors } from './types';\nimport type { IconName } from '@hashicorp/flight-icons/svg';\n\nexport const AVAILABLE_COLORS: string[] = Object.values(HdsIconColorValues);\n\nexport interface HdsIconSignature {\n  Args: {\n    name: IconName;\n    color?: HdsIconColors | string | undefined;\n    size?: HdsIconSizes;\n    stretched?: boolean;\n    isInline?: boolean;\n    title?: string;\n  };\n  Element: SVGElement;\n}\n\nexport default class HdsIcon extends Component<HdsIconSignature> {\n  iconId = 'icon-' + guidFor(this);\n  titleId = 'title-' + guidFor(this);\n\n  constructor(owner: unknown, args: HdsIconSignature['Args']) {\n    super(owner, args);\n\n    if (!this.args.name) {\n      assert('Please provide to <Hds::Icon> a value for @name');\n    } else if (!iconNames.includes(this.args.name)) {\n      assert(\n        `The icon @name \"${this.args.name}\" provided to <Hds::Icon> is not correct. Please verify it exists on https://helios.hashicorp.design/icons/library`\n      );\n    }\n  }\n\n  get isInline(): boolean {\n    return this.args.isInline ?? false;\n  }\n\n  get predefinedColor(): HdsIconColors | undefined {\n    const { color } = this.args;\n\n    if (color && AVAILABLE_COLORS.includes(color)) {\n      return color as HdsIconColors;\n    } else {\n      return undefined;\n    }\n  }\n\n  get fillColor(): string {\n    if (this.predefinedColor !== undefined) {\n      return 'currentColor';\n    } else {\n      return this.args.color ?? 'currentColor';\n    }\n  }\n\n  get size(): string {\n    return this.args.size ?? HdsIconSizeValues.Sixteen;\n  }\n\n  get svgSize(): { width: string; height: string } {\n    return {\n      width: this.args.stretched ? '100%' : this.size,\n      height: this.args.stretched ? '100%' : this.size,\n    };\n  }\n\n  get title(): string | null {\n    return this.args.title ?? null;\n  }\n\n  get role(): string | null {\n    return this.args.title ? 'img' : null;\n  }\n\n  get ariaLabelledby(): string | null {\n    return this.args.title ? this.titleId : null;\n  }\n\n  get classNames() {\n    const { name } = this.args;\n    const classes = ['hds-icon'];\n\n    // add a class based on the @name argument\n    classes.push(`hds-icon-${name}`);\n\n    if (this.isInline) {\n      classes.push('hds-icon--is-inline');\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    // add an extra class to control the animation (depends on the icon)\n    if (['loading', 'running'].includes(name)) {\n      classes.push(`hds-icon--animation-${name}`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["AVAILABLE_COLORS","Object","values","HdsIconColorValues","HdsIcon","Component","constructor","owner","args","_defineProperty","guidFor","name","assert","iconNames","includes","isInline","predefinedColor","color","undefined","fillColor","size","HdsIconSizeValues","Sixteen","svgSize","width","stretched","height","title","role","ariaLabelledby","titleId","classNames","classes","push","join","setComponentTemplate","TEMPLATE"],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+let HdsIconSizeValues = /*#__PURE__*/function (HdsIconSizeValues) {
+  HdsIconSizeValues["Sixteen"] = "16";
+  HdsIconSizeValues["TwentyFour"] = "24";
+  return HdsIconSizeValues;
+}({});
+let HdsIconColorValues = /*#__PURE__*/function (HdsIconColorValues) {
+  HdsIconColorValues["Primary"] = "primary";
+  HdsIconColorValues["Strong"] = "strong";
+  HdsIconColorValues["Faint"] = "faint";
+  HdsIconColorValues["Disabled"] = "disabled";
+  HdsIconColorValues["HighContrast"] = "high-contrast";
+  HdsIconColorValues["Action"] = "action";
+  HdsIconColorValues["ActionHover"] = "action-hover";
+  HdsIconColorValues["ActionActive"] = "action-active";
+  HdsIconColorValues["Highlight"] = "highlight";
+  HdsIconColorValues["HighlightOnSurface"] = "highlight-on-surface";
+  HdsIconColorValues["HighlightHighContrast"] = "highlight-high-contrast";
+  HdsIconColorValues["Success"] = "success";
+  HdsIconColorValues["SuccessOnSurface"] = "success-on-surface";
+  HdsIconColorValues["SuccessHighContrast"] = "success-high-contrast";
+  HdsIconColorValues["Warning"] = "warning";
+  HdsIconColorValues["WarningOnSurface"] = "warning-on-surface";
+  HdsIconColorValues["WarningHighContrast"] = "warning-high-contrast";
+  HdsIconColorValues["Critical"] = "critical";
+  HdsIconColorValues["CriticalOnSurface"] = "critical-on-surface";
+  HdsIconColorValues["CriticalHighContrast"] = "critical-high-contrast";
+  return HdsIconColorValues;
+}({});
+
+export { HdsIconColorValues, HdsIconSizeValues };
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../src/components/hds/icon/types.ts"],"sourcesContent":["export enum HdsIconSizeValues {\n  Sixteen = '16',\n  TwentyFour = '24',\n}\n\nexport type HdsIconSizes = `${HdsIconSizeValues}`;\n\nexport enum HdsIconColorValues {\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 HdsIconColors = `${HdsIconColorValues}`;\n"],"names":["HdsIconSizeValues","HdsIconColorValues"],"mappings":"AAAYA,IAAAA,iBAAiB,0BAAjBA,iBAAiB,EAAA;EAAjBA,iBAAiB,CAAA,SAAA,CAAA,GAAA,IAAA,CAAA;EAAjBA,iBAAiB,CAAA,YAAA,CAAA,GAAA,IAAA,CAAA;AAAA,EAAA,OAAjBA,iBAAiB,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAOjBC,IAAAA,kBAAkB,0BAAlBA,kBAAkB,EAAA;EAAlBA,kBAAkB,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAlBA,kBAAkB,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAlBA,kBAAkB,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;EAAlBA,kBAAkB,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAlBA,kBAAkB,CAAA,cAAA,CAAA,GAAA,eAAA,CAAA;EAAlBA,kBAAkB,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAlBA,kBAAkB,CAAA,aAAA,CAAA,GAAA,cAAA,CAAA;EAAlBA,kBAAkB,CAAA,cAAA,CAAA,GAAA,eAAA,CAAA;EAAlBA,kBAAkB,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAAlBA,kBAAkB,CAAA,oBAAA,CAAA,GAAA,sBAAA,CAAA;EAAlBA,kBAAkB,CAAA,uBAAA,CAAA,GAAA,yBAAA,CAAA;EAAlBA,kBAAkB,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAlBA,kBAAkB,CAAA,kBAAA,CAAA,GAAA,oBAAA,CAAA;EAAlBA,kBAAkB,CAAA,qBAAA,CAAA,GAAA,uBAAA,CAAA;EAAlBA,kBAAkB,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAlBA,kBAAkB,CAAA,kBAAA,CAAA,GAAA,oBAAA,CAAA;EAAlBA,kBAAkB,CAAA,qBAAA,CAAA,GAAA,uBAAA,CAAA;EAAlBA,kBAAkB,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAlBA,kBAAkB,CAAA,mBAAA,CAAA,GAAA,qBAAA,CAAA;EAAlBA,kBAAkB,CAAA,sBAAA,CAAA,GAAA,wBAAA,CAAA;AAAA,EAAA,OAAlBA,kBAAkB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

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

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
+import { HdsTooltipPlacementValues } from './types.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -10,7 +11,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const PLACEMENTS = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'];
+const PLACEMENTS = Object.values(HdsTooltipPlacementValues);
 class HdsTooltipIndexComponent extends Component {
   /**
    * @param text
@@ -18,23 +19,22 @@ class HdsTooltipIndexComponent extends Component {
    * @description text content for tooltip
    */
   get text() {
-    let {
+    const {
       text
     } = this.args;
     assert('@text for "Hds::TooltipButton" must have a valid value', text !== undefined);
     return text;
   }
   get options() {
-    let {
+    const {
       placement
     } = this.args;
     assert('@placement for "Hds::TooltipButton" must have a valid value', placement == undefined || PLACEMENTS.includes(placement));
     return {
       ...this.args.extraTippyOptions,
-      // takes string
       placement: placement,
-      // takes array of 2 numbers (skidding, distance): array(0, 0)
-      offset: this.args.offset
+      // takes array of 2 numbers (skidding, distance): array(0, 10)
+      offset: this.args.offset ? this.args.offset : [0, 10]
     };
   }
 
@@ -45,7 +45,7 @@ class HdsTooltipIndexComponent extends Component {
    * @description sets display for the button
    */
   get isInline() {
-    let {
+    const {
       isInline = true
     } = this.args;
     return isInline;
@@ -57,7 +57,7 @@ class HdsTooltipIndexComponent extends Component {
    * @return {string} The "class" attribute to apply to the component.
    */
   get classNames() {
-    let classes = ['hds-tooltip-button'];
+    const classes = ['hds-tooltip-button'];
 
     // add a class based on the @isInline argument
     if (this.isInline) {

package/dist/components/hds/tooltip-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/hds/tooltip-button/index.hbs","../../../../src/components/hds/tooltip-button/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\\n<button\\n  type=\\\"button\\\"\\n  class={{this.classNames}}\\n  {{hds-tooltip this.text options=this.options}}\\n  ...attributes\\n>{{~yield~}}</button>\")","/**\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 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\nexport default class HdsTooltipIndexComponent extends Component {\n  /**\n   * @param text\n   * @type {string}\n   * @description text content for tooltip\n   */\n  get text() {\n    let { text } = this.args;\n\n    assert(\n      '@text for \"Hds::TooltipButton\" must have a valid value',\n      text !== undefined\n    );\n\n    return text;\n  }\n\n  get options() {\n    let { placement } = this.args;\n\n    assert(\n      '@placement for \"Hds::TooltipButton\" must have a valid value',\n      placement == undefined || PLACEMENTS.includes(placement)\n    );\n\n    return {\n      ...this.args.extraTippyOptions,\n      // takes string\n      placement: placement,\n      // takes array of 2 numbers (skidding, distance): array(0, 0)\n      offset: this.args.offset,\n    };\n  }\n\n  /**\n   * @param isInline\n   * @type {boolean}\n   * @default true\n   * @description sets display for the button\n   */\n  get isInline() {\n    let { isInline = true } = this.args;\n    return isInline;\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-tooltip-button'];\n\n    // add a class based on the @isInline argument\n    if (this.isInline) {\n      classes.push('hds-tooltip-button--is-inline');\n    } else {\n      classes.push('hds-tooltip-button--is-block');\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["PLACEMENTS","HdsTooltipIndexComponent","Component","text","args","assert","undefined","options","placement","includes","extraTippyOptions","offset","isInline","classNames","classes","push","join","setComponentTemplate","TEMPLATE"],"mappings":";;;;;AACA,eAAe,kBAAkB,CAAC,mOAAmO;;ACDrQ;AACA;AACA;AACA;;AAKO,MAAMA,UAAU,GAAG,CACxB,KAAK,EACL,WAAW,EACX,SAAS,EACT,OAAO,EACP,aAAa,EACb,WAAW,EACX,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,UAAU,EACX;AAEc,MAAMC,wBAAwB,SAASC,SAAS,CAAC;AAC9D;AACF;AACA;AACA;AACA;EACE,IAAIC,IAAIA,GAAG;IACT,IAAI;AAAEA,MAAAA,IAAAA;KAAM,GAAG,IAAI,CAACC,IAAI,CAAA;AAExBC,IAAAA,MAAM,CACJ,wDAAwD,EACxDF,IAAI,KAAKG,SACX,CAAC,CAAA;AAED,IAAA,OAAOH,IAAI,CAAA;AACb,GAAA;EAEA,IAAII,OAAOA,GAAG;IACZ,IAAI;AAAEC,MAAAA,SAAAA;KAAW,GAAG,IAAI,CAACJ,IAAI,CAAA;AAE7BC,IAAAA,MAAM,CACJ,6DAA6D,EAC7DG,SAAS,IAAIF,SAAS,IAAIN,UAAU,CAACS,QAAQ,CAACD,SAAS,CACzD,CAAC,CAAA;IAED,OAAO;AACL,MAAA,GAAG,IAAI,CAACJ,IAAI,CAACM,iBAAiB;AAC9B;AACAF,MAAAA,SAAS,EAAEA,SAAS;AACpB;AACAG,MAAAA,MAAM,EAAE,IAAI,CAACP,IAAI,CAACO,MAAAA;KACnB,CAAA;AACH,GAAA;;AAEA;AACF;AACA;AACA;AACA;AACA;EACE,IAAIC,QAAQA,GAAG;IACb,IAAI;AAAEA,MAAAA,QAAQ,GAAG,IAAA;KAAM,GAAG,IAAI,CAACR,IAAI,CAAA;AACnC,IAAA,OAAOQ,QAAQ,CAAA;AACjB,GAAA;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,UAAUA,GAAG;AACf,IAAA,IAAIC,OAAO,GAAG,CAAC,oBAAoB,CAAC,CAAA;;AAEpC;IACA,IAAI,IAAI,CAACF,QAAQ,EAAE;AACjBE,MAAAA,OAAO,CAACC,IAAI,CAAC,+BAA+B,CAAC,CAAA;AAC/C,KAAC,MAAM;AACLD,MAAAA,OAAO,CAACC,IAAI,CAAC,8BAA8B,CAAC,CAAA;AAC9C,KAAA;AAEA,IAAA,OAAOD,OAAO,CAACE,IAAI,CAAC,GAAG,CAAC,CAAA;AAC1B,GAAA;AACF,CAAA;AAACC,oBAAA,CAAAC,QAAA,EA9DoBjB,wBAAwB,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/tooltip-button/index.hbs","../../../../src/components/hds/tooltip-button/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<button\\n  type=\\\"button\\\"\\n  class={{this.classNames}}\\n  {{hds-tooltip this.text options=this.options}}\\n  ...attributes\\n>{{~yield~}}</button>\")","/**\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\nimport type { Props as TippyProps } from 'tippy.js';\nimport { HdsTooltipPlacementValues } from './types.ts';\n\nexport const PLACEMENTS: string[] = Object.values(HdsTooltipPlacementValues);\n\nexport interface HdsTooltipSignature {\n  Args: {\n    extraTippyOptions: Omit<TippyProps, 'placement' | 'offset'>;\n    isInline?: boolean;\n    offset?: [number, number];\n    placement: HdsTooltipPlacementValues;\n    text: string;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLButtonElement;\n}\n\nexport default class HdsTooltipIndexComponent extends Component<HdsTooltipSignature> {\n  /**\n   * @param text\n   * @type {string}\n   * @description text content for tooltip\n   */\n  get text(): string {\n    const { text } = this.args;\n\n    assert(\n      '@text for \"Hds::TooltipButton\" must have a valid value',\n      text !== undefined\n    );\n\n    return text;\n  }\n\n  get options(): TippyProps {\n    const { placement } = this.args;\n\n    assert(\n      '@placement for \"Hds::TooltipButton\" must have a valid value',\n      placement == undefined || PLACEMENTS.includes(placement)\n    );\n\n    return {\n      ...this.args.extraTippyOptions,\n      placement: placement,\n      // takes array of 2 numbers (skidding, distance): array(0, 10)\n      offset: this.args.offset ? this.args.offset : [0, 10],\n    };\n  }\n\n  /**\n   * @param isInline\n   * @type {boolean}\n   * @default true\n   * @description sets display for the button\n   */\n  get isInline(): boolean {\n    const { isInline = true } = this.args;\n    return isInline;\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(): string {\n    const classes = ['hds-tooltip-button'];\n\n    // add a class based on the @isInline argument\n    if (this.isInline) {\n      classes.push('hds-tooltip-button--is-inline');\n    } else {\n      classes.push('hds-tooltip-button--is-block');\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["PLACEMENTS","Object","values","HdsTooltipPlacementValues","HdsTooltipIndexComponent","Component","text","args","assert","undefined","options","placement","includes","extraTippyOptions","offset","isInline","classNames","classes","push","join","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;AACA,eAAe,kBAAkB,CAAC,mOAAmO;;ACDrQ;AACA;AACA;AACA;;AAQO,MAAMA,UAAoB,GAAGC,MAAM,CAACC,MAAM,CAACC,yBAAyB,EAAC;AAgB7D,MAAMC,wBAAwB,SAASC,SAAS,CAAsB;AACnF;AACF;AACA;AACA;AACA;EACE,IAAIC,IAAIA,GAAW;IACjB,MAAM;AAAEA,MAAAA,IAAAA;KAAM,GAAG,IAAI,CAACC,IAAI,CAAA;AAE1BC,IAAAA,MAAM,CACJ,wDAAwD,EACxDF,IAAI,KAAKG,SACX,CAAC,CAAA;AAED,IAAA,OAAOH,IAAI,CAAA;AACb,GAAA;EAEA,IAAII,OAAOA,GAAe;IACxB,MAAM;AAAEC,MAAAA,SAAAA;KAAW,GAAG,IAAI,CAACJ,IAAI,CAAA;AAE/BC,IAAAA,MAAM,CACJ,6DAA6D,EAC7DG,SAAS,IAAIF,SAAS,IAAIT,UAAU,CAACY,QAAQ,CAACD,SAAS,CACzD,CAAC,CAAA;IAED,OAAO;AACL,MAAA,GAAG,IAAI,CAACJ,IAAI,CAACM,iBAAiB;AAC9BF,MAAAA,SAAS,EAAEA,SAAS;AACpB;AACAG,MAAAA,MAAM,EAAE,IAAI,CAACP,IAAI,CAACO,MAAM,GAAG,IAAI,CAACP,IAAI,CAACO,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,CAAA;KACrD,CAAA;AACH,GAAA;;AAEA;AACF;AACA;AACA;AACA;AACA;EACE,IAAIC,QAAQA,GAAY;IACtB,MAAM;AAAEA,MAAAA,QAAQ,GAAG,IAAA;KAAM,GAAG,IAAI,CAACR,IAAI,CAAA;AACrC,IAAA,OAAOQ,QAAQ,CAAA;AACjB,GAAA;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,oBAAoB,CAAC,CAAA;;AAEtC;IACA,IAAI,IAAI,CAACF,QAAQ,EAAE;AACjBE,MAAAA,OAAO,CAACC,IAAI,CAAC,+BAA+B,CAAC,CAAA;AAC/C,KAAC,MAAM;AACLD,MAAAA,OAAO,CAACC,IAAI,CAAC,8BAA8B,CAAC,CAAA;AAC9C,KAAA;AAEA,IAAA,OAAOD,OAAO,CAACE,IAAI,CAAC,GAAG,CAAC,CAAA;AAC1B,GAAA;AACF,CAAA;AAACC,oBAAA,CAAAC,QAAA,EA7DoBjB,wBAAwB,CAAA;;;;"}

package/dist/components/hds/tooltip-button/types.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+let HdsTooltipPlacementValues = /*#__PURE__*/function (HdsTooltipPlacementValues) {
+  HdsTooltipPlacementValues["Top"] = "top";
+  HdsTooltipPlacementValues["TopStart"] = "top-start";
+  HdsTooltipPlacementValues["TopEnd"] = "top-end";
+  HdsTooltipPlacementValues["Right"] = "right";
+  HdsTooltipPlacementValues["RightStart"] = "right-start";
+  HdsTooltipPlacementValues["RightEnd"] = "right-end";
+  HdsTooltipPlacementValues["Bottom"] = "bottom";
+  HdsTooltipPlacementValues["BottomStart"] = "bottom-start";
+  HdsTooltipPlacementValues["BottomEnd"] = "bottom-end";
+  HdsTooltipPlacementValues["Left"] = "left";
+  HdsTooltipPlacementValues["LeftStart"] = "left-start";
+  HdsTooltipPlacementValues["LeftEnd"] = "left-end";
+  return HdsTooltipPlacementValues;
+}({});
+
+export { HdsTooltipPlacementValues };
+//# sourceMappingURL=types.js.map

package/dist/components/hds/tooltip-button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../src/components/hds/tooltip-button/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport enum HdsTooltipPlacementValues {\n  Top = 'top',\n  TopStart = 'top-start',\n  TopEnd = 'top-end',\n  Right = 'right',\n  RightStart = 'right-start',\n  RightEnd = 'right-end',\n  Bottom = 'bottom',\n  BottomStart = 'bottom-start',\n  BottomEnd = 'bottom-end',\n  Left = 'left',\n  LeftStart = 'left-start',\n  LeftEnd = 'left-end',\n}\n\nexport type HdsTooltipPlacements = `${HdsTooltipPlacementValues}`;\n"],"names":["HdsTooltipPlacementValues"],"mappings":"AAAA;AACA;AACA;AACA;;AAEYA,IAAAA,yBAAyB,0BAAzBA,yBAAyB,EAAA;EAAzBA,yBAAyB,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;EAAzBA,yBAAyB,CAAA,UAAA,CAAA,GAAA,WAAA,CAAA;EAAzBA,yBAAyB,CAAA,QAAA,CAAA,GAAA,SAAA,CAAA;EAAzBA,yBAAyB,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;EAAzBA,yBAAyB,CAAA,YAAA,CAAA,GAAA,aAAA,CAAA;EAAzBA,yBAAyB,CAAA,UAAA,CAAA,GAAA,WAAA,CAAA;EAAzBA,yBAAyB,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAzBA,yBAAyB,CAAA,aAAA,CAAA,GAAA,cAAA,CAAA;EAAzBA,yBAAyB,CAAA,WAAA,CAAA,GAAA,YAAA,CAAA;EAAzBA,yBAAyB,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAAzBA,yBAAyB,CAAA,WAAA,CAAA,GAAA,YAAA,CAAA;EAAzBA,yBAAyB,CAAA,SAAA,CAAA,GAAA,UAAA,CAAA;AAAA,EAAA,OAAzBA,yBAAyB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/components.js

@@ -15,6 +15,10 @@ export { default as HdsBreadcrumbTruncation } from './components/hds/breadcrumb/
 export { default as HdsButton } from './components/hds/button/index.js';
 export { default as HdsButtonSet } from './components/hds/button-set/index.js';
 export { default as HdsCard } from './components/hds/card/container.js';
+export { default as HdsCodeBlock } from './components/hds/code-block/index.js';
+export { default as HdsCodeBlockCopyButton } from './components/hds/code-block/copy-button.js';
+export { default as HdsCodeBlockDescription } from './components/hds/code-block/description.js';
+export { default as HdsCodeBlockTitle } from './components/hds/code-block/title.js';
 export { default as HdsCopyButton } from './components/hds/copy/button/index.js';
 export { default as HdsCopySnippet } from './components/hds/copy/snippet/index.js';
 export { default as HdsDialogPrimitiveBody } from './components/hds/dialog-primitive/body.js';
@@ -61,6 +65,7 @@ export { default as HdsFormToggleBase } from './components/hds/form/toggle/base.
 export { default as HdsFormToggleField } from './components/hds/form/toggle/field.js';
 export { default as HdsFormToggleGroup } from './components/hds/form/toggle/group.js';
 export { default as HdsFormVisibilityToggle } from './components/hds/form/visibility-toggle/index.js';
+export { default as HdsIcon } from './components/hds/icon/index.js';
 export { default as HdsIconTile } from './components/hds/icon-tile/index.js';
 export { default as HdsInteractive } from './components/hds/interactive/index.js';
 export { default as HdsLinkInline } from './components/hds/link/inline.js';
@@ -93,4 +98,5 @@ export { default as HdsTextBody } from './components/hds/text/body.js';
 export { default as HdsTextCode } from './components/hds/text/code.js';
 export { default as HdsTextDisplay } from './components/hds/text/display.js';
 export { default as HdsToast } from './components/hds/toast/index.js';
+export { default as HdsTooltipButton } from './components/hds/tooltip-button/index.js';
 //# sourceMappingURL=components.js.map

package/dist/components.js.map

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

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

@@ -5155,6 +5155,46 @@ button.hds-button[href]::after {
   cursor: pointer;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+.hds-icon {
+  display: block;
+}
+
+.hds-icon--is-inline {
+  display: inline-block;
+}
+
+@keyframes hds-icon-animation-rotation {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.hds-icon--animation-loading {
+  animation: hds-icon-animation-rotation 9s linear infinite;
+}
+
+.hds-icon--animation-running {
+  animation: hds-icon-animation-rotation 9s linear infinite;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .hds-icon--animation-loading {
+    animation-duration: 0.7s;
+  }
+  .hds-icon--animation-running {
+    animation-duration: 1s;
+  }
+}
+.flight-sprite-container {
+  position: absolute;
+  width: 0;
+  height: 0;
+  visibility: hidden;
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0

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

@@ -35,6 +35,7 @@
 @use "../components/dropdown";
 @use "../components/flyout";
 @use "../components/form"; // multiple components
+@use "../components/icon";
 @use "../components/icon-tile";
 @use "../components/link"; // multiple components
 @use "../components/menu-primitive";

package/dist/styles/components/icon.scss

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.hds-icon {
+  display: block;
+}
+
+.hds-icon--is-inline {
+  display: inline-block;
+}
+
+@keyframes hds-icon-animation-rotation {
+  to {transform: rotate(360deg);}
+}
+
+.hds-icon--animation-loading {
+  animation: hds-icon-animation-rotation 9s linear infinite;
+}
+
+.hds-icon--animation-running {
+  animation: hds-icon-animation-rotation 9s linear infinite;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .hds-icon--animation-loading {
+    animation-duration: .7s;
+  }
+
+  .hds-icon--animation-running {
+    animation-duration: 1s;
+  }
+}
+
+.flight-sprite-container {
+  position: absolute;
+  width: 0;
+  height: 0;
+  visibility: hidden;
+}