@hashicorp/design-system-components 5.2.0-rc-20251218142150 → 5.2.0-rc-20251218214528

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,9 +3,10 @@
3
3
  * SPDX-License-Identifier: MPL-2.0
4
4
  */
5
5
  import Component from '@glimmer/component';
6
- import type { HdsIconSizes, HdsIconColors } from './types';
7
6
  import type { IconName } from '@hashicorp/flight-icons/svg';
8
7
  import type Owner from '@ember/owner';
8
+ import { HdsIconSizeValues } from './types.ts';
9
+ import type { HdsIconSizes, HdsIconColors } from './types';
9
10
  export declare const COLORS: HdsIconColors[];
10
11
  export declare const NAMES: readonly ["loading", "loading-static", "running", "running-static", "apple", "apple-color", "alibaba", "alibaba-color", "amazon-ecs", "amazon-ecs-color", "amazon-eks", "amazon-eks-color", "ansible-community", "ansible-community-color", "ansible-automation-platform", "ansible-automation-platform-color", "auth0", "auth0-color", "aws", "aws-color", "aws-cdk", "aws-cdk-color", "aws-cloudwatch", "aws-cloudwatch-color", "aws-ec2", "aws-ec2-color", "aws-lambda", "aws-lambda-color", "aws-s3", "aws-s3-color", "azure", "azure-color", "azure-aks", "azure-aks-color", "azure-blob-storage", "azure-blob-storage-color", "azure-devops", "azure-devops-color", "azure-vms", "azure-vms-color", "bitbucket", "bitbucket-color", "bridgecrew", "bridgecrew-color", "cisco", "cisco-color", "codepen", "codepen-color", "confluence", "confluence-color", "confluent", "confluent-color", "datadog", "datadog-color", "digital-ocean", "digital-ocean-color", "docker", "docker-color", "duo", "duo-color", "elastic-observability", "elastic-observability-color", "f5", "f5-color", "facebook", "facebook-color", "figma", "figma-color", "gcp", "gcp-color", "git", "git-color", "gitlab", "gitlab-color", "github", "github-color", "google", "google-color", "google-docs", "google-docs-color", "google-drive", "google-drive-color", "google-forms", "google-forms-color", "google-sheets", "google-sheets-color", "google-slides", "google-slides-color", "grafana", "grafana-color", "helm", "helm-color", "infracost", "infracost-color", "jenkins", "jenkins-color", "jfrog", "jfrog-color", "jira", "jira-color", "jwt", "jwt-color", "kubernetes", "kubernetes-color", "lightlytics", "lightlytics-color", "linkedin", "linkedin-color", "linode", "linode-color", "linux", "linux-color", "loom", "loom-color", "meetup", "meetup-color", "microsoft", "microsoft-color", "microsoft-teams", "microsoft-teams-color", "minio", "minio-color", "mongodb", "mongodb-color", "new-relic", "new-relic-color", "okta", "okta-color", "oracle", "oracle-color", "opa", "opa-color", "openid", "openid-color", "openstack", "openstack-color", "pack", "pack-color", "pager-duty", "pager-duty-color", "ping-identity ", "ping-identity-color", "postgres", "postgres-color", "rabbitmq", "rabbitmq-color", "saml", "saml-color", "service-now", "service-now-color", "slack", "slack-color", "snyk", "snyk-color", "splunk", "splunk-color", "twilio", "twilio-color", "twitch", "twitch-color", "twitter", "twitter-color", "twitter-x", "twitter-x-color", "vantage", "vantage-color", "venafi", "venafi-color", "vercel", "vercel-color", "vmware", "vmware-color", "youtube", "youtube-color", "boundary", "boundary-color", "boundary-fill", "boundary-fill-color", "boundary-square", "boundary-square-color", "consul", "consul-color", "consul-fill", "consul-fill-color", "consul-square", "consul-square-color", "nomad", "nomad-color", "nomad-fill", "nomad-fill-color", "nomad-square", "nomad-square-color", "packer", "packer-color", "packer-fill", "packer-fill-color", "packer-square", "packer-square-color", "terraform", "terraform-color", "terraform-fill", "terraform-fill-color", "terraform-square", "terraform-square-color", "vagrant", "vagrant-color", "vagrant-fill", "vagrant-fill-color", "vagrant-square", "vagrant-square-color", "vault", "vault-color", "vault-fill", "vault-fill-color", "vault-square", "vault-square-color", "vault-radar", "vault-radar-color", "vault-radar-fill", "vault-radar-fill-color", "vault-radar-square", "vault-radar-square-color", "vault-secrets", "vault-secrets-color", "vault-secrets-fill", "vault-secrets-fill-color", "vault-secrets-square", "vault-secrets-square-color", "waypoint", "waypoint-color", "waypoint-fill", "waypoint-fill-color", "waypoint-square", "waypoint-square-color", "hashicorp", "hashicorp-color", "hashicorp-fill", "hashicorp-fill-color", "hashicorp-square", "hashicorp-square-color", "hcp", "hcp-color", "hcp-fill", "hcp-fill-color", "hcp-square", "hcp-square-color", "accessibility", "folder-users", "frown", "identity-service", "identity-user", "meh", "robot", "smile", "user", "user-check", "user-circle", "user-circle-fill", "user-minus", "user-plus", "user-x", "users", "ampersand", "beaker", "bucket", "bulb", "circle", "circle-dot", "circle-fill", "circle-half", "diamond", "diamond-fill", "disc", "dot", "dot-half", "droplet", "flag", "gift", "government", "handshake", "hash", "hexagon", "hexagon-fill", "labyrinth", "layers", "moon", "octagon", "outline", "random", "rocket", "sparkle", "square", "square-fill", "sun", "triangle", "triangle-fill", "truck", "wand", "zap", "zap-off", "docs", "docs-download", "docs-link", "guide", "guide-link", "help", "info", "info-fill", "learn", "learn-link", "support", "alert-circle", "alert-circle-fill", "alert-diamond", "alert-diamond-fill", "alert-octagon", "alert-octagon-fill", "alert-triangle", "alert-triangle-fill", "check", "check-circle", "check-circle-fill", "check-diamond", "check-diamond-fill", "check-hexagon", "check-hexagon-fill", "check-square", "check-square-fill", "skip", "x", "x-circle", "x-circle-fill", "x-diamond", "x-diamond-fill", "x-hexagon", "x-hexagon-fill", "x-square", "x-square-fill", "bug", "certificate", "eye", "eye-off", "fingerprint", "key", "keychain", "lock", "lock-fill", "lock-off", "shield", "shield-alert", "shield-check", "shield-off", "shield-x", "token", "unlock", "verified", "wall", "minus", "minus-circle", "minus-circle-fill", "minus-plus", "minus-plus-circle", "minus-plus-square", "minus-square", "minus-square-fill", "plus", "plus-circle", "plus-circle-fill", "plus-square", "camera", "camera-off", "cast", "closed-caption", "fast-forward", "film", "headphones", "image", "music", "pause", "pause-circle", "play", "play-circle", "radio", "rewind", "rss", "skip-back", "skip-forward", "speaker", "stop-circle", "volume", "volume-down", "volume-up", "volume-x", "wifi", "wifi-off", "compass", "crosshair", "map", "map-pin", "navigation", "navigation-alt", "redirect", "target", "align-center", "align-justify", "align-left", "align-right", "battery", "battery-charging", "bookmark", "bookmark-add", "bookmark-add-fill", "bookmark-fill", "bookmark-remove", "bookmark-remove-fill", "bottom", "command", "crop", "dashboard", "delete", "download", "edit", "end", "entry-point", "exit-point", "external-link", "filter", "filter-circle", "filter-fill", "grid", "grid-alt", "home", "jump-link", "layout", "link", "list", "maximize", "maximize-alt", "menu", "minimize", "minimize-alt", "more-horizontal", "more-vertical", "mouse-pointer", "move-horizontal", "paperclip", "pen-tool", "pencil-tool", "pin", "pin-off", "power", "printer", "reload", "repeat", "resize-column", "rotate-cw", "rotate-ccw", "search", "share", "sidebar", "sidebar-hide", "sidebar-show", "sign-in", "sign-out", "slash", "slash-square", "sort-asc", "sort-desc", "start", "switcher", "sync", "sync-alert", "sync-reverse", "tag", "text-wrap", "toggle-left", "toggle-right", "top", "trash", "type", "unfold-close", "unfold-open", "upload", "zoom-in", "zoom-out", "archive", "clipboard", "clipboard-checked", "clipboard-copy", "clipboard-x", "file", "file-change", "file-check", "file-diff", "file-minus", "file-plus", "file-source", "file-text", "file-x", "files", "folder", "folder-fill", "folder-minus", "folder-minus-fill", "folder-plus", "folder-plus-fill", "folder-star", "inbox", "api", "auto-apply", "build", "change", "change-circle", "change-square", "channel", "cloud", "cloud-check", "cloud-download", "cloud-lightning", "cloud-lock", "cloud-off", "cloud-upload", "cloud-x", "code", "connection", "connection-gateway", "cpu", "duplicate", "gateway", "git-branch", "git-commit", "git-merge", "git-pull-request", "git-repo", "hammer", "key-values", "mainframe", "mesh", "module", "monitor", "network", "network-alt", "node", "path", "pipeline", "plug", "replication-direct", "replication-perf", "scissors", "server", "server-cluster", "serverless", "service", "settings", "sliders", "smartphone", "socket", "step", "tablet", "terminal", "terminal-screen", "test", "tools", "transform-data", "tv", "webhook", "wrench", "calendar", "clock", "clock-filled", "delay", "event", "history", "hourglass", "watch", "bar-chart", "bar-chart-alt", "box", "collections", "database", "hard-drive", "line-chart", "line-chart-up", "logs", "package", "pie-chart", "queue", "save", "trend-down", "trend-up", "activity", "at-sign", "award", "bell", "bell-active", "bell-active-fill", "bell-off", "discussion-circle", "discussion-square", "heart", "heart-fill", "heart-off", "mail", "mail-open", "message-circle", "message-circle-fill", "message-square", "message-square-fill", "mic", "mic-off", "newspaper", "phone", "phone-call", "phone-off", "send", "star", "star-circle", "star-fill", "star-off", "thumbs-down", "thumbs-up", "video", "video-off", "bank-vault", "briefcase", "credit-card", "dollar-sign", "enterprise", "globe", "globe-private", "org", "provider", "shopping-bag", "shopping-cart", "arrow-down", "arrow-down-circle", "arrow-down-left", "arrow-down-right", "arrow-left", "arrow-left-circle", "arrow-right", "arrow-right-circle", "arrow-up", "arrow-up-circle", "arrow-up-left", "arrow-up-right", "caret", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-down", "chevrons-left", "chevrons-right", "chevrons-up", "corner-down-left", "corner-down-right", "corner-left-down", "corner-left-up", "corner-right-down", "corner-right-up", "corner-up-left", "corner-up-right", "load-balancer", "migrate", "move", "shuffle", "swap-horizontal", "swap-vertical"];
11
12
  export interface HdsIconSignature {
@@ -24,15 +25,15 @@ export default class HdsIcon extends Component<HdsIconSignature> {
24
25
  private _titleId;
25
26
  constructor(owner: Owner, args: HdsIconSignature['Args']);
26
27
  get isInline(): boolean;
27
- get predefinedColor(): HdsIconColors | undefined;
28
+ get predefinedColor(): "strong" | "primary" | "faint" | "disabled" | "high-contrast" | "action" | "action-hover" | "action-active" | "highlight" | "highlight-on-surface" | "highlight-high-contrast" | "success" | "success-on-surface" | "success-high-contrast" | "warning" | "warning-on-surface" | "warning-high-contrast" | "critical" | "critical-on-surface" | "critical-high-contrast" | undefined;
28
29
  get fillColor(): string;
29
- get size(): string;
30
+ get size(): "16" | "24" | HdsIconSizeValues.Sixteen;
30
31
  get svgSize(): {
31
32
  width: string;
32
33
  height: string;
33
34
  };
34
35
  get title(): string | null;
35
- get role(): string | null;
36
+ get role(): "img" | null;
36
37
  get ariaLabelledby(): string | null;
37
38
  get classNames(): string;
38
39
  }
@@ -150,7 +150,7 @@ export * from './components/hds/form/text-input/types.ts';
150
150
  export { default as HdsFormToggleBase } from './components/hds/form/toggle/base.ts';
151
151
  export { default as HdsFormToggleField } from './components/hds/form/toggle/field.ts';
152
152
  export { default as HdsFormToggleGroup } from './components/hds/form/toggle/group.ts';
153
- export { default as HdsIcon } from './components/hds/icon/index.ts';
153
+ export { default as HdsIcon } from './components/hds/icon/index';
154
154
  export * from './components/hds/icon/types.ts';
155
155
  export { default as HdsIconTile } from './components/hds/icon-tile/index.ts';
156
156
  export * from './components/hds/icon-tile/types.ts';
@@ -1,18 +1,15 @@
1
1
  import Component from '@glimmer/component';
2
- import { guidFor } from '@ember/object/internals';
3
2
  import { assert } from '@ember/debug';
3
+ import { guidFor } from '@ember/object/internals';
4
4
  import { iconNames } from '@hashicorp/flight-icons/svg';
5
5
  import { HdsIconSizeValues, HdsIconColorValues } from './types.js';
6
6
  import { precompileTemplate } from '@ember/template-compilation';
7
7
  import { setComponentTemplate } from '@ember/component';
8
8
 
9
- var TEMPLATE = precompileTemplate("{{!\n Copyright IBM Corp. 2021, 2025\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>");
10
-
11
9
  /**
12
10
  * Copyright IBM Corp. 2021, 2025
13
11
  * SPDX-License-Identifier: MPL-2.0
14
12
  */
15
-
16
13
  const COLORS = Object.values(HdsIconColorValues);
17
14
  const NAMES = iconNames;
18
15
  class HdsIcon extends Component {
@@ -69,26 +66,27 @@ class HdsIcon extends Component {
69
66
  name
70
67
  } = this.args;
71
68
  const classes = ['hds-icon'];
72
-
73
69
  // add a class based on the @name argument
74
70
  classes.push(`hds-icon-${name}`);
75
71
  if (this.isInline) {
76
72
  classes.push('hds-icon--is-inline');
77
73
  }
78
-
79
74
  // add a (helper) class based on the @color argument (if pre-defined)
80
75
  if (this.predefinedColor) {
81
76
  classes.push(`hds-foreground-${this.predefinedColor}`);
82
77
  }
83
-
84
78
  // add an extra class to control the animation (depends on the icon)
85
79
  if (['loading', 'running'].includes(name)) {
86
80
  classes.push(`hds-icon--animation-${name}`);
87
81
  }
88
82
  return classes.join(' ');
89
83
  }
84
+ static {
85
+ setComponentTemplate(precompileTemplate("\n <svg class={{this.classNames}} ...attributes aria-hidden={{if @title \"false\" \"true\"}} aria-labelledby={{this.ariaLabelledby}} data-test-icon={{@name}} fill={{this.fillColor}} id={{this._iconId}} role={{this.role}} width={{this.svgSize.width}} height={{this.svgSize.height}} viewBox=\"0 0 {{this.size}} {{this.size}}\" xmlns=\"http://www.w3.org/2000/svg\">\n {{#if @title}}\n <title id={{this._titleId}}>{{@title}}</title>\n <g role=\"presentation\">\n <use href=\"#flight-{{@name}}-{{this.size}}\" />\n </g>\n {{else}}\n <use href=\"#flight-{{@name}}-{{this.size}}\" />\n {{/if}}\n </svg>\n ", {
86
+ strictMode: true
87
+ }), this);
88
+ }
90
89
  }
91
- setComponentTemplate(TEMPLATE, HdsIcon);
92
90
 
93
91
  export { COLORS, NAMES, HdsIcon as default };
94
92
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/hds/icon/index.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2021, 2025\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';\nimport type Owner from '@ember/owner';\n\nexport const COLORS: HdsIconColors[] = Object.values(HdsIconColorValues);\nexport const NAMES = iconNames;\n\nexport interface HdsIconSignature {\n Args: {\n name: IconName;\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\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 private _iconId = 'icon-' + guidFor(this);\n private _titleId = 'title-' + guidFor(this);\n\n constructor(owner: Owner, 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 && COLORS.includes(color as HdsIconColors)) {\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":["COLORS","Object","values","HdsIconColorValues","NAMES","iconNames","HdsIcon","Component","_iconId","guidFor","_titleId","constructor","owner","args","name","assert","includes","isInline","predefinedColor","color","undefined","fillColor","size","HdsIconSizeValues","Sixteen","svgSize","width","stretched","height","title","role","ariaLabelledby","classNames","classes","push","join","setComponentTemplate","TEMPLATE"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/hds/icon/index.gts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { assert } from '@ember/debug';\nimport { guidFor } from '@ember/object/internals';\nimport { iconNames } from '@hashicorp/flight-icons/svg';\nimport type { IconName } from '@hashicorp/flight-icons/svg';\nimport type Owner from '@ember/owner';\n\nimport { HdsIconSizeValues, HdsIconColorValues } from './types.ts';\nimport type { HdsIconSizes, HdsIconColors } from './types';\n\nexport const COLORS: HdsIconColors[] = Object.values(HdsIconColorValues);\nexport const NAMES = iconNames;\n\nexport interface HdsIconSignature {\n Args: {\n name: IconName;\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\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 private _iconId = 'icon-' + guidFor(this);\n private _titleId = 'title-' + guidFor(this);\n\n constructor(owner: Owner, 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() {\n return this.args.isInline ?? false;\n }\n\n get predefinedColor() {\n const { color } = this.args;\n\n if (color && COLORS.includes(color as HdsIconColors)) {\n return color as HdsIconColors;\n } else {\n return undefined;\n }\n }\n\n get fillColor() {\n if (this.predefinedColor !== undefined) {\n return 'currentColor';\n } else {\n return this.args.color ?? 'currentColor';\n }\n }\n\n get size() {\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() {\n return this.args.title ?? null;\n }\n\n get role() {\n return this.args.title ? 'img' : null;\n }\n\n get ariaLabelledby() {\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 <template>\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}}\" />\n </g>\n {{else}}\n <use href=\"#flight-{{@name}}-{{this.size}}\" />\n {{/if}}\n </svg>\n </template>\n}\n"],"names":["COLORS","Object","values","HdsIconColorValues","NAMES","iconNames","HdsIcon","Component","_iconId","guidFor","_titleId","constructor","owner","args","name","assert","includes","isInline","predefinedColor","color","undefined","fillColor","size","HdsIconSizeValues","Sixteen","svgSize","width","stretched","height","title","role","ariaLabelledby","classNames","classes","push","join","setComponentTemplate","precompileTemplate","strictMode"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/design-system-components",
3
- "version": "5.2.0-rc-20251218142150",
3
+ "version": "5.2.0-rc-20251218214528",
4
4
  "description": "Helios Design System Components",
5
5
  "keywords": [
6
6
  "hashicorp",
@@ -35,8 +35,8 @@
35
35
  "@embroider/macros": "^1.18.1",
36
36
  "@embroider/util": "^1.13.4",
37
37
  "@floating-ui/dom": "^1.6.12",
38
- "@hashicorp/design-system-tokens": "4.0.0-rc-20251218142150",
39
- "@hashicorp/flight-icons": "4.1.1-rc-20251218142150",
38
+ "@hashicorp/design-system-tokens": "4.0.0-rc-20251218214528",
39
+ "@hashicorp/flight-icons": "4.1.1-rc-20251218214528",
40
40
  "@lezer/highlight": "^1.2.1",
41
41
  "@nullvoxpopuli/ember-composable-helpers": "^5.2.11",
42
42
  "clipboard-polyfill": "^4.1.1",
@@ -83,10 +83,10 @@
83
83
  "ember-template-lint": "^7.0.2",
84
84
  "ember-template-lint-plugin-prettier": "^5.0.0",
85
85
  "eslint": "^9.23.0",
86
- "eslint-config-prettier": "^10.1.1",
86
+ "eslint-config-prettier": "^10.1.5",
87
87
  "eslint-plugin-ember": "^12.5.0",
88
88
  "eslint-plugin-import": "^2.31.0",
89
- "eslint-plugin-n": "^17.17.0",
89
+ "eslint-plugin-n": "^17.18.0",
90
90
  "globals": "^16.0.0",
91
91
  "postcss": "^8.5.3",
92
92
  "prettier": "^3.5.3",