@hashicorp/design-system-components 3.6.0 → 4.1.0

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

@@ -0,0 +1,157 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+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<Hds::Interactive\n  class={{this.classNames}}\n  @current-when={{@current-when}}\n  @models={{hds-link-to-models @model @models}}\n  @query={{hds-link-to-query @query}}\n  @replace={{@replace}}\n  @route={{@route}}\n  @isRouteExternal={{@isRouteExternal}}\n  @href={{@href}}\n  @isHrefExternal={{@isHrefExternal}}\n  ...attributes\n  aria-label={{if this.isIconOnly this.text null}}\n>\n  {{#if this.isIconOnly}}\n    <span class=\"hds-button__icon\">\n      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />\n    </span>\n  {{else}}\n    {{#if this.icon}}\n      {{#if (eq this.iconPosition \"leading\")}}\n        <span class=\"hds-button__icon\">\n          <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />\n        </span>\n        <span class=\"hds-button__text\">\n          {{this.text}}\n        </span>\n      {{else}}\n        <span class=\"hds-button__text\">\n          {{this.text}}\n        </span>\n        <span class=\"hds-button__icon\">\n          <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />\n        </span>\n      {{/if}}\n    {{else}}\n      <span class=\"hds-button__text\">\n        {{this.text}}\n      </span>\n    {{/if}}\n  {{/if}}\n</Hds::Interactive>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_COLOR = 'primary';
+const DEFAULT_ICONPOSITION = 'leading';
+const SIZES = ['small', 'medium', 'large'];
+const COLORS = ['primary', 'secondary', 'tertiary', 'critical'];
+const ICONPOSITIONS = ['leading', 'trailing'];
+class HdsButtonIndexComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the button or value of `aria-label` if `isIconOnly` is set to `true`. If no text value is defined an error will be thrown.
+   */
+  get text() {
+    let {
+      text
+    } = this.args;
+    assert('@text for "Hds::Button" must have a valid value', text !== undefined);
+    return text;
+  }
+
+  /**
+   * @param size
+   * @type {string}
+   * @default medium
+   * @description The size of the button; acceptable values are `small`, `medium`, and `large`
+   */
+  get size() {
+    let {
+      size = DEFAULT_SIZE
+    } = this.args;
+    assert(`@size for "Hds::Button" must be one of the following: ${SIZES.join(', ')}; received: ${size}`, SIZES.includes(size));
+    return size;
+  }
+
+  /**
+   * @param color
+   * @type {string}
+   * @default primary
+   * @description Determines the color of button to be used; acceptable values are `primary`, `secondary`, and `critical`
+   */
+  get color() {
+    let {
+      color = DEFAULT_COLOR
+    } = this.args;
+    assert(`@color for "Hds::Button" must be one of the following: ${COLORS.join(', ')}; received: ${color}`, COLORS.includes(color));
+    return color;
+  }
+
+  /**
+   * @param icon
+   * @type {string}
+   * @default null
+   * @description The name of the icon to be used.
+   */
+  get icon() {
+    assert(`when the "Hds::Button" @color is "tertiary" an @icon is required`, !(this.color === 'tertiary' && !this.args.icon));
+    return this.args.icon ?? null;
+  }
+
+  /**
+   * @param isIconOnly
+   * @type {boolean}
+   * @default false
+   * @description Indicates if the button will only contain an icon; component will also ensure that accessible text is still applied to the component.
+   */
+  get isIconOnly() {
+    if (this.icon) {
+      return this.args.isIconOnly ?? false;
+    }
+    return false;
+  }
+
+  /**
+   * @param iconPosition
+   * @type {string}
+   * @default leading
+   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`
+   */
+  get iconPosition() {
+    let {
+      iconPosition = DEFAULT_ICONPOSITION
+    } = this.args;
+    assert(`@iconPosition for "Hds::Button" must be one of the following: ${ICONPOSITIONS.join(', ')}; received: ${iconPosition}`, ICONPOSITIONS.includes(iconPosition));
+    return iconPosition;
+  }
+
+  /**
+   * @param iconSize
+   * @type {string}
+   * @default 16
+   * @description ensures that the correct icon size is used. Automatically calculated.
+   */
+  get iconSize() {
+    if (this.args.size === 'large') {
+      return '24';
+    } else {
+      return '16';
+    }
+  }
+
+  /**
+   * @param isFullWidth
+   * @type {boolean}
+   * @default false
+   * @description Indicates that a button should take up the full width of the parent container. The default is false.
+   */
+  get isFullWidth() {
+    return this.args.isFullWidth ?? false;
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method Button#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-button'];
+
+    // add a class based on the @color argument
+    classes.push(`hds-button--color-${this.color}`);
+
+    // add a class based on the @isFullWidth argument
+    if (this.isFullWidth) {
+      classes.push('hds-button--width-full');
+    }
+
+    // add a class based on isIconOnly argument
+    if (this.isIconOnly) {
+      classes.push('hds-button--is-icon-only');
+    }
+
+    // add a class based on the @isInline argument
+    if (this.args.isInline) {
+      classes.push('hds-button--is-inline');
+    }
+
+    // add a class based on the @size argument
+    classes.push(`hds-button--size-${this.size}`);
+    return classes.join(' ');
+  }
+}
+setComponentTemplate(TEMPLATE, HdsButtonIndexComponent);
+
+export { COLORS, DEFAULT_COLOR, DEFAULT_ICONPOSITION, DEFAULT_SIZE, ICONPOSITIONS, SIZES, HdsButtonIndexComponent as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/button/index.hbs","../../../../src/components/hds/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<Hds::Interactive\\n  class={{this.classNames}}\\n  @current-when={{@current-when}}\\n  @models={{hds-link-to-models @model @models}}\\n  @query={{hds-link-to-query @query}}\\n  @replace={{@replace}}\\n  @route={{@route}}\\n  @isRouteExternal={{@isRouteExternal}}\\n  @href={{@href}}\\n  @isHrefExternal={{@isHrefExternal}}\\n  ...attributes\\n  aria-label={{if this.isIconOnly this.text null}}\\n>\\n  {{#if this.isIconOnly}}\\n    <span class=\\\"hds-button__icon\\\">\\n      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />\\n    </span>\\n  {{else}}\\n    {{#if this.icon}}\\n      {{#if (eq this.iconPosition \\\"leading\\\")}}\\n        <span class=\\\"hds-button__icon\\\">\\n          <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />\\n        </span>\\n        <span class=\\\"hds-button__text\\\">\\n          {{this.text}}\\n        </span>\\n      {{else}}\\n        <span class=\\\"hds-button__text\\\">\\n          {{this.text}}\\n        </span>\\n        <span class=\\\"hds-button__icon\\\">\\n          <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />\\n        </span>\\n      {{/if}}\\n    {{else}}\\n      <span class=\\\"hds-button__text\\\">\\n        {{this.text}}\\n      </span>\\n    {{/if}}\\n  {{/if}}\\n</Hds::Interactive>\")","/**\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 { type HdsInteractiveSignature } from '../interactive';\n\nexport const DEFAULT_SIZE = 'medium';\nexport const DEFAULT_COLOR = 'primary';\nexport const DEFAULT_ICONPOSITION = 'leading';\nexport const SIZES = ['small', 'medium', 'large'] as const;\nexport const COLORS = ['primary', 'secondary', 'tertiary', 'critical'] as const;\nexport const ICONPOSITIONS = ['leading', 'trailing'] as const;\n\nexport type HdsButtonSize = typeof SIZES[number];\nexport type HdsButtonColor = typeof COLORS[number];\nexport type HdsButtonIconPosition = typeof ICONPOSITIONS[number];\n\nexport interface HdsButtonSignature {\n  Args: HdsInteractiveSignature['Args'] & {\n    size?: HdsButtonSize;\n    color?: HdsButtonColor;\n    text: string;\n    icon?: string;\n    iconPosition?: HdsButtonIconPosition;\n    isIconOnly?: boolean;\n    isInline?: boolean;\n    isFullWidth?: boolean;\n  };\n  Element: HdsInteractiveSignature['Element'];\n}\n\nexport default class HdsButtonIndexComponent extends Component<HdsButtonSignature> {\n  /**\n   * @param text\n   * @type {string}\n   * @description The text of the button or value of `aria-label` if `isIconOnly` is set to `true`. If no text value is defined an error will be thrown.\n   */\n  get text() {\n    let { text } = this.args;\n\n    assert(\n      '@text for \"Hds::Button\" must have a valid value',\n      text !== undefined\n    );\n\n    return text;\n  }\n\n  /**\n   * @param size\n   * @type {string}\n   * @default medium\n   * @description The size of the button; acceptable values are `small`, `medium`, and `large`\n   */\n  get size() {\n    let { size = DEFAULT_SIZE } = this.args;\n\n    assert(\n      `@size for \"Hds::Button\" must be one of the following: ${SIZES.join(\n        ', '\n      )}; received: ${size}`,\n      SIZES.includes(size)\n    );\n\n    return size;\n  }\n\n  /**\n   * @param color\n   * @type {string}\n   * @default primary\n   * @description Determines the color of button to be used; acceptable values are `primary`, `secondary`, and `critical`\n   */\n  get color() {\n    let { color = DEFAULT_COLOR } = this.args;\n\n    assert(\n      `@color for \"Hds::Button\" must be one of the following: ${COLORS.join(\n        ', '\n      )}; received: ${color}`,\n      COLORS.includes(color)\n    );\n\n    return color;\n  }\n\n  /**\n   * @param icon\n   * @type {string}\n   * @default null\n   * @description The name of the icon to be used.\n   */\n  get icon() {\n    assert(\n      `when the \"Hds::Button\" @color is \"tertiary\" an @icon is required`,\n      !(this.color === 'tertiary' && !this.args.icon)\n    );\n\n    return this.args.icon ?? null;\n  }\n\n  /**\n   * @param isIconOnly\n   * @type {boolean}\n   * @default false\n   * @description Indicates if the button will only contain an icon; component will also ensure that accessible text is still applied to the component.\n   */\n  get isIconOnly() {\n    if (this.icon) {\n      return this.args.isIconOnly ?? false;\n    }\n    return false;\n  }\n\n  /**\n   * @param iconPosition\n   * @type {string}\n   * @default leading\n   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`\n   */\n  get iconPosition() {\n    let { iconPosition = DEFAULT_ICONPOSITION } = this.args;\n\n    assert(\n      `@iconPosition for \"Hds::Button\" must be one of the following: ${ICONPOSITIONS.join(\n        ', '\n      )}; received: ${iconPosition}`,\n      ICONPOSITIONS.includes(iconPosition)\n    );\n\n    return iconPosition;\n  }\n\n  /**\n   * @param iconSize\n   * @type {string}\n   * @default 16\n   * @description ensures that the correct icon size is used. Automatically calculated.\n   */\n  get iconSize() {\n    if (this.args.size === 'large') {\n      return '24';\n    } else {\n      return '16';\n    }\n  }\n\n  /**\n   * @param isFullWidth\n   * @type {boolean}\n   * @default false\n   * @description Indicates that a button should take up the full width of the parent container. The default is false.\n   */\n  get isFullWidth() {\n    return this.args.isFullWidth ?? false;\n  }\n\n  /**\n   * Get the class names to apply to the component.\n   * @method Button#classNames\n   * @return {string} The \"class\" attribute to apply to the component.\n   */\n  get classNames() {\n    let classes = ['hds-button'];\n\n    // add a class based on the @color argument\n    classes.push(`hds-button--color-${this.color}`);\n\n    // add a class based on the @isFullWidth argument\n    if (this.isFullWidth) {\n      classes.push('hds-button--width-full');\n    }\n\n    // add a class based on isIconOnly argument\n    if (this.isIconOnly) {\n      classes.push('hds-button--is-icon-only');\n    }\n\n    // add a class based on the @isInline argument\n    if (this.args.isInline) {\n      classes.push('hds-button--is-inline');\n    }\n\n    // add a class based on the @size argument\n    classes.push(`hds-button--size-${this.size}`);\n\n    return classes.join(' ');\n  }\n}\n\ndeclare module '@glint/environment-ember-loose/registry' {\n  export default interface Registry {\n    'Hds::Button': typeof HdsButtonIndexComponent;\n    'hds/button': typeof HdsButtonIndexComponent;\n  }\n}\n"],"names":["DEFAULT_SIZE","DEFAULT_COLOR","DEFAULT_ICONPOSITION","SIZES","COLORS","ICONPOSITIONS","HdsButtonIndexComponent","Component","text","args","assert","undefined","size","join","includes","color","icon","isIconOnly","iconPosition","iconSize","isFullWidth","classNames","classes","push","isInline","setComponentTemplate","TEMPLATE"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+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<div class=\"hds-button-set\" ...attributes>\n  {{yield}}\n</div>");
+
+var index = setComponentTemplate(TEMPLATE, templateOnly());
+
+export { index as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/button-set/index.hbs","../../../../src/components/hds/button-set/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<div class=\\\"hds-button-set\\\" ...attributes>\\n  {{yield}}\\n</div>\")","import templateOnly from '@ember/component/template-only';\nexport default templateOnly();\n"],"names":["setComponentTemplate","TEMPLATE","templateOnly"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,0LAA0L;;ACA5N,YAAAA,oBAAA,CAAAC,QAAA,EAAeC,YAAY,EAAE,CAAA;;;;"}

package/dist/components/hds/card/container.js

@@ -0,0 +1,130 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+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<div class={{this.classNames}} ...attributes>\n  {{yield}}\n</div>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const DEFAULT_LEVEL = 'base';
+const DEFAULT_BACKGROUND = 'neutral-primary';
+const DEFAULT_OVERFLOW = 'visible';
+const LEVELS = ['base', 'mid', 'high'];
+const BACKGROUNDS = ['neutral-primary', 'neutral-secondary'];
+const OVERFLOWS = ['hidden', 'visible'];
+class HdsCardContainerComponent extends Component {
+  /**
+   * Sets the "elevation" level for the component
+   * Accepted values: base, mid, high
+   *
+   * @param level
+   * @type {string}
+   * @default 'base'
+   */
+  get level() {
+    let {
+      level = DEFAULT_LEVEL
+    } = this.args;
+    assert(`@level for "Hds::Card::Container" must be one of the following: ${LEVELS.join(', ')}; received: ${level}`, LEVELS.includes(level));
+    return level;
+  }
+
+  /**
+   * Sets the "elevation" level for the component on ":hover" state
+   * Accepted values: base, mid, high
+   *
+   * @param levelHover
+   * @type {string}
+   */
+  get levelHover() {
+    let {
+      levelHover
+    } = this.args;
+    if (levelHover) {
+      assert(`@levelHover for "Hds::Card::Container" must be one of the following: ${LEVELS.join(', ')}; received: ${levelHover}`, LEVELS.includes(levelHover));
+    }
+    return levelHover;
+  }
+
+  /**
+   * Sets the "elevation" level for the component on ":active" state
+   * Accepted values: base, mid, high
+   *
+   * @param levelActive
+   * @type {string}
+   */
+  get levelActive() {
+    let {
+      levelActive
+    } = this.args;
+    if (levelActive) {
+      assert(`@levelActive for "Hds::Card::Container" must be one of the following: ${LEVELS.join(', ')}; received: ${levelActive}`, LEVELS.includes(levelActive));
+    }
+    return levelActive;
+  }
+
+  /**
+   * Sets the background for the component
+   * Accepted values: neutral-primary, neutral-secondary
+   *
+   * @param background
+   * @type {string}
+   * @default 'base'
+   */
+  get background() {
+    let {
+      background = DEFAULT_BACKGROUND
+    } = this.args;
+    assert(`@background for "Hds::Card::Container" must be one of the following: ${BACKGROUNDS.join(', ')}; received: ${background}`, BACKGROUNDS.includes(background));
+    return background;
+  }
+
+  /**
+   * Sets the level for the card
+   * Accepted values: visible, hidden
+   *
+   * @param overflow
+   * @type {string}
+   * @default 'visible'
+   */
+  get overflow() {
+    let {
+      overflow = DEFAULT_OVERFLOW
+    } = this.args;
+    assert(`@overflow for "Hds::Card::Container" must be one of the following: ${OVERFLOWS.join(', ')}; received: ${overflow}`, OVERFLOWS.includes(overflow));
+    return overflow;
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method Card#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-card__container'];
+
+    // add "elevation" classes based on the @level and @hasBorder arguments
+    classes.push(`hds-card__container--level-${this.args.hasBorder ? 'surface' : 'elevation'}-${this.level}`);
+    if (this.levelHover) {
+      classes.push(`hds-card__container--hover-level-${this.args.hasBorder ? 'surface' : 'elevation'}-${this.levelHover}`);
+    }
+    if (this.levelActive) {
+      classes.push(`hds-card__container--active-level-${this.args.hasBorder ? 'surface' : 'elevation'}-${this.levelActive}`);
+    }
+
+    // add a class based on the @background argument
+    classes.push(`hds-card__container--background-${this.background}`);
+
+    // add a class based on the @overflow argument
+    classes.push(`hds-card__container--overflow-${this.overflow}`);
+    return classes.join(' ');
+  }
+}
+setComponentTemplate(TEMPLATE, HdsCardContainerComponent);
+
+export { BACKGROUNDS, DEFAULT_BACKGROUND, DEFAULT_LEVEL, DEFAULT_OVERFLOW, LEVELS, OVERFLOWS, HdsCardContainerComponent as default };
+//# sourceMappingURL=container.js.map

package/dist/components/hds/card/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sources":["../../../../src/components/hds/card/container.hbs","../../../../src/components/hds/card/container.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<div class={{this.classNames}} ...attributes>\\n  {{yield}}\\n</div>\")","/**\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 DEFAULT_LEVEL = 'base';\nexport const DEFAULT_BACKGROUND = 'neutral-primary';\nexport const DEFAULT_OVERFLOW = 'visible';\nexport const LEVELS = ['base', 'mid', 'high'];\nexport const BACKGROUNDS = ['neutral-primary', 'neutral-secondary'];\nexport const OVERFLOWS = ['hidden', 'visible'];\n\nexport default class HdsCardContainerComponent extends Component {\n  /**\n   * Sets the \"elevation\" level for the component\n   * Accepted values: base, mid, high\n   *\n   * @param level\n   * @type {string}\n   * @default 'base'\n   */\n  get level() {\n    let { level = DEFAULT_LEVEL } = this.args;\n\n    assert(\n      `@level for \"Hds::Card::Container\" must be one of the following: ${LEVELS.join(\n        ', '\n      )}; received: ${level}`,\n      LEVELS.includes(level)\n    );\n\n    return level;\n  }\n\n  /**\n   * Sets the \"elevation\" level for the component on \":hover\" state\n   * Accepted values: base, mid, high\n   *\n   * @param levelHover\n   * @type {string}\n   */\n  get levelHover() {\n    let { levelHover } = this.args;\n\n    if (levelHover) {\n      assert(\n        `@levelHover for \"Hds::Card::Container\" must be one of the following: ${LEVELS.join(\n          ', '\n        )}; received: ${levelHover}`,\n        LEVELS.includes(levelHover)\n      );\n    }\n\n    return levelHover;\n  }\n\n  /**\n   * Sets the \"elevation\" level for the component on \":active\" state\n   * Accepted values: base, mid, high\n   *\n   * @param levelActive\n   * @type {string}\n   */\n  get levelActive() {\n    let { levelActive } = this.args;\n\n    if (levelActive) {\n      assert(\n        `@levelActive for \"Hds::Card::Container\" must be one of the following: ${LEVELS.join(\n          ', '\n        )}; received: ${levelActive}`,\n        LEVELS.includes(levelActive)\n      );\n    }\n\n    return levelActive;\n  }\n\n  /**\n   * Sets the background for the component\n   * Accepted values: neutral-primary, neutral-secondary\n   *\n   * @param background\n   * @type {string}\n   * @default 'base'\n   */\n  get background() {\n    let { background = DEFAULT_BACKGROUND } = this.args;\n\n    assert(\n      `@background for \"Hds::Card::Container\" must be one of the following: ${BACKGROUNDS.join(\n        ', '\n      )}; received: ${background}`,\n      BACKGROUNDS.includes(background)\n    );\n\n    return background;\n  }\n\n  /**\n   * Sets the level for the card\n   * Accepted values: visible, hidden\n   *\n   * @param overflow\n   * @type {string}\n   * @default 'visible'\n   */\n  get overflow() {\n    let { overflow = DEFAULT_OVERFLOW } = this.args;\n\n    assert(\n      `@overflow for \"Hds::Card::Container\" must be one of the following: ${OVERFLOWS.join(\n        ', '\n      )}; received: ${overflow}`,\n      OVERFLOWS.includes(overflow)\n    );\n\n    return overflow;\n  }\n\n  /**\n   * Get the class names to apply to the component.\n   * @method Card#classNames\n   * @return {string} The \"class\" attribute to apply to the component.\n   */\n  get classNames() {\n    let classes = ['hds-card__container'];\n\n    // add \"elevation\" classes based on the @level and @hasBorder arguments\n    classes.push(\n      `hds-card__container--level-${\n        this.args.hasBorder ? 'surface' : 'elevation'\n      }-${this.level}`\n    );\n    if (this.levelHover) {\n      classes.push(\n        `hds-card__container--hover-level-${\n          this.args.hasBorder ? 'surface' : 'elevation'\n        }-${this.levelHover}`\n      );\n    }\n    if (this.levelActive) {\n      classes.push(\n        `hds-card__container--active-level-${\n          this.args.hasBorder ? 'surface' : 'elevation'\n        }-${this.levelActive}`\n      );\n    }\n\n    // add a class based on the @background argument\n    classes.push(`hds-card__container--background-${this.background}`);\n\n    // add a class based on the @overflow argument\n    classes.push(`hds-card__container--overflow-${this.overflow}`);\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_LEVEL","DEFAULT_BACKGROUND","DEFAULT_OVERFLOW","LEVELS","BACKGROUNDS","OVERFLOWS","HdsCardContainerComponent","Component","level","args","assert","join","includes","levelHover","levelActive","background","overflow","classNames","classes","push","hasBorder","setComponentTemplate","TEMPLATE"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+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\n<Hds::Copy::Button\n  class=\"hds-code-block__copy-button\"\n  @text=\"Copy\"\n  @isIconOnly={{true}}\n  @size=\"small\"\n  @targetToCopy={{@targetToCopy}}\n  ...attributes\n/>");
+
+var copyButton = setComponentTemplate(TEMPLATE, templateOnly());
+
+export { copyButton as default };
+//# sourceMappingURL=copy-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.js","sources":["../../../../src/components/hds/code-block/copy-button.hbs","../../../../src/components/hds/code-block/copy-button.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::Copy::Button\\n  class=\\\"hds-code-block__copy-button\\\"\\n  @text=\\\"Copy\\\"\\n  @isIconOnly={{true}}\\n  @size=\\\"small\\\"\\n  @targetToCopy={{@targetToCopy}}\\n  ...attributes\\n/>\")","import templateOnly from '@ember/component/template-only';\nexport default templateOnly();\n"],"names":["setComponentTemplate","TEMPLATE","templateOnly"],"mappings":";;;;AACA,eAAe,kBAAkB,CAAC,2SAA2S;;ACA7U,iBAAAA,oBAAA,CAAAC,QAAA,EAAeC,YAAY,EAAE,CAAA;;;;"}

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

@@ -0,0 +1,10 @@
+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\n<Hds::Text::Body @tag=\"p\" @size=\"100\" class=\"hds-code-block__description\" ...attributes>\n  {{yield}}\n</Hds::Text::Body>");
+
+var description = setComponentTemplate(TEMPLATE, templateOnly());
+
+export { description as default };
+//# sourceMappingURL=description.js.map

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

@@ -0,0 +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,YAAY,EAAE,CAAA;;;;"}

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

@@ -0,0 +1,160 @@
+import { a as _applyDecoratedDescriptor, b as _initializerDefineProperty, _ as _defineProperty } from '../../../_rollupPluginBabelHelpers-lqPQKyNs.js';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+import { next, schedule } from '@ember/runloop';
+import { htmlSafe } from '@ember/template';
+import { guidFor } from '@ember/object/internals';
+import Prism from 'prismjs';
+import 'prismjs/plugins/line-numbers/prism-line-numbers';
+import 'prismjs/plugins/line-highlight/prism-line-highlight';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-hcl';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-log';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-shell-session';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-markup-templating';
+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 _class, _descriptor;
+let HdsCodeBlockIndexComponent = (_class = class HdsCodeBlockIndexComponent extends Component {
+  constructor(...args) {
+    super(...args);
+    _initializerDefineProperty(this, "prismCode", _descriptor, this);
+    /**
+     * Generates a unique ID for the code content
+     *
+     * @param preCodeId
+     */
+    _defineProperty(this, "preCodeId", 'pre-code-' + guidFor(this));
+  }
+  /**
+   * @param code
+   * @type {string}
+   * @description code text content for the CodeBlock
+   */
+  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);
+    }
+    return code;
+  }
+
+  /**
+   * @param language
+   * @type {string}
+   * @default undefined
+   * @description name of coding language used within CodeBlock for syntax highlighting
+   */
+  get language() {
+    return this.args.language ?? undefined;
+  }
+
+  /**
+   * @param hasLineNumbers
+   * @type {boolean}
+   * @default true
+   * @description Displays line numbers if true
+   */
+  get hasLineNumbers() {
+    return this.args.hasLineNumbers ?? true;
+  }
+
+  /**
+   * @param isStandalone
+   * @type {boolean}
+   * @default true
+   * @description Make CodeBlock container corners appear rounded
+   */
+  get isStandalone() {
+    return this.args.isStandalone ?? true;
+  }
+
+  /**
+   * @param hasLineWrapping
+   * @type {boolean}
+   * @default false
+   * @description Make text content wrap on multiple lines
+   */
+  get hasLineWrapping() {
+    return this.args.hasLineWrapping ?? false;
+  }
+  setPrismCode(element) {
+    const code = this.code;
+    const language = this.language;
+    const grammar = Prism.languages[language];
+    if (code) {
+      next(() => {
+        if (language && grammar) {
+          this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));
+        } else {
+          this.prismCode = htmlSafe(Prism.util.encode(code));
+        }
+
+        // Force prism-line-numbers plugin initialization, required for Prism.highlight usage
+        // See https://github.com/PrismJS/prism/issues/1234
+        Prism.hooks.run('complete', {
+          code,
+          element
+        });
+
+        // Force prism-line-highlight plugin initialization
+        // Context: https://github.com/hashicorp/design-system/pull/1749#discussion_r1374288785
+        if (this.args.highlightLines) {
+          // 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
+          schedule('afterRender', () => {
+            // 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
+            if (window) window.dispatchEvent(new Event('resize'));
+          });
+        }
+      });
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  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'];
+    if (this.language) {
+      classes.push(`language-${this.language}`);
+    }
+    if (this.isStandalone === true) {
+      classes.push('hds-code-block--is-standalone');
+    }
+    if (this.hasLineWrapping === true) {
+      classes.push('hds-code-block--has-line-wrapping');
+    }
+
+    // Note: Prism.js is using the specific class name "line-numbers" to determine implementation of line numbers in the UI
+    if (this.hasLineNumbers || this.args.highlightLines) {
+      classes.push('line-numbers');
+    }
+    return classes.join(' ');
+  }
+}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "prismCode", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return '';
+  }
+}), _applyDecoratedDescriptor(_class.prototype, "setPrismCode", [action], Object.getOwnPropertyDescriptor(_class.prototype, "setPrismCode"), _class.prototype)), _class);
+setComponentTemplate(TEMPLATE, HdsCodeBlockIndexComponent);
+
+export { HdsCodeBlockIndexComponent as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,10 @@
+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\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, templateOnly());
+
+export { title as default };
+//# sourceMappingURL=title.js.map

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

@@ -0,0 +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,YAAY,EAAE,CAAA;;;;"}