@hashicorp/design-system-components 5.2.0-rc-20260105174051 → 5.2.0-rc-20260105213008

package/declarations/components/hds/icon/index.d.ts

@@ -3,9 +3,10 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 import Component from '@glimmer/component';
+import type { SafeString } from '@ember/template';
 import type { IconName } from '@hashicorp/flight-icons/svg';
-import type Owner from '@ember/owner';
-import { HdsIconSizeValues } from './types.ts';
+import type { HdsIconModule, HdsIconRegistryEntry } from '@hashicorp/flight-icons/symbol-js/registry.ts';
+import type HdsThemingService from '@hashicorp/design-system-components/services/hds-theming';
 import type { HdsIconSizes, HdsIconColors } from './types';
 export declare const COLORS: HdsIconColors[];
 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"];
@@ -21,13 +22,32 @@ export interface HdsIconSignature {
     Element: SVGElement;
 }
 export default class HdsIcon extends Component<HdsIconSignature> {
+    readonly hdsTheming: HdsThemingService;
+    iconModule: HdsIconModule | null;
     private _iconId;
     private _titleId;
-    constructor(owner: Owner, args: HdsIconSignature['Args']);
+    loadIconModule: import("ember-modifier").FunctionBasedModifier<{
+        Args: {
+            Positional: [];
+            Named: {
+                name: IconName;
+                size: HdsIconSizes;
+                carbonModeEnabled: boolean;
+            };
+        };
+        Element: SVGElement;
+    }>;
+    get name(): HdsIconSignature['Args']['name'];
+    get registryEntry(): HdsIconRegistryEntry | undefined;
+    get hasCarbonEquivalent(): boolean;
+    get carbonThemeEnabled(): boolean;
+    get isCarbon(): boolean;
+    get svgSymbol(): SafeString | undefined;
+    get uniqueSymbolId(): string;
     get isInline(): boolean;
     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;
     get fillColor(): string;
-    get size(): "16" | "24" | HdsIconSizeValues.Sixteen;
+    get size(): HdsIconSizes;
     get svgSize(): {
         width: string;
         height: string;
@@ -36,4 +56,5 @@ export default class HdsIcon extends Component<HdsIconSignature> {
     get role(): "img" | null;
     get ariaLabelledby(): string | null;
     get classNames(): string;
+    loadIconModuleTask: import("ember-concurrency").TaskForAsyncTaskFunction<unknown, (name: IconName, size: HdsIconSizes) => Promise<void>>;
 }

package/declarations/components/hds/theme-switcher/index.d.ts

@@ -36,8 +36,8 @@ export default class HdsThemeSwitcher extends Component<HdsThemeSwitcherSignatur
     };
     get hasDefaultOption(): boolean;
     get hasSystemOption(): boolean;
-    get _options(): Partial<Record<"default" | "light" | "dark" | "system", ThemeOption>>;
-    get currentTheme(): "default" | "light" | "dark" | "system" | undefined;
+    get _options(): Partial<Record<"default" | "system" | "light" | "dark", ThemeOption>>;
+    get currentTheme(): "default" | "system" | "light" | "dark" | undefined;
     onSelectTheme(theme: HdsThemes | undefined): void;
 }
 export {};

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

@@ -1,27 +1,79 @@
+import { buildTask } from 'ember-concurrency/async-arrow-runtime';
 import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
 import { guidFor } from '@ember/object/internals';
+import { assert } from '@ember/debug';
+import { htmlSafe } from '@ember/template';
 import { iconNames } from '@hashicorp/flight-icons/svg';
+import { IconRegistry } from '@hashicorp/flight-icons/symbol-js/registry';
+import 'ember-concurrency';
+import { modifier } from 'ember-modifier';
 import { HdsIconSizeValues, HdsIconColorValues } from './types.js';
+import { HdsThemeValues } from '@hashicorp/design-system-components/services/hds-theming';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
 
-/**
- * Copyright IBM Corp. 2021, 2025
- * SPDX-License-Identifier: MPL-2.0
- */
 const COLORS = Object.values(HdsIconColorValues);
 const NAMES = iconNames;
 class HdsIcon extends Component {
+  static {
+    g(this.prototype, "hdsTheming", [service]);
+  }
+  #hdsTheming = (i(this, "hdsTheming"), void 0);
+  static {
+    g(this.prototype, "iconModule", [tracked], function () {
+      return null;
+    });
+  }
+  #iconModule = (i(this, "iconModule"), void 0);
   _iconId = 'icon-' + guidFor(this);
   _titleId = 'title-' + guidFor(this);
-  constructor(owner, args) {
-    super(owner, args);
-    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`);
+  // reacts to changes to the name and size arguments to reload the icon
+  loadIconModule = modifier((_element, _positional, {
+    name,
+    size,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    carbonModeEnabled
+  }) => {
+    void this.loadIconModuleTask.perform(name, size);
+  });
+  get name() {
+    const {
+      name
+    } = this.args;
+    assert('Please provide to <Hds::Icon> a value for @name', name !== undefined);
+    return name;
+  }
+  get registryEntry() {
+    const {
+      name,
+      size
+    } = this.args;
+    const registryEntry = IconRegistry[this.name];
+    assert(`The icon @name "${name}" or @size "${size}" provided to <Hds::Icon> is not correct.`, registryEntry !== undefined);
+    return IconRegistry[this.name];
+  }
+  get hasCarbonEquivalent() {
+    return this.registryEntry?.carbon !== null;
+  }
+  get carbonThemeEnabled() {
+    return [HdsThemeValues.System, HdsThemeValues.Light, HdsThemeValues.Dark].includes(this.hdsTheming.currentTheme);
+  }
+  get isCarbon() {
+    return this.carbonThemeEnabled && this.hasCarbonEquivalent;
+  }
+  get svgSymbol() {
+    if (this.iconModule === null) {
+      return undefined;
     }
+    return htmlSafe(this.iconModule.default(this.uniqueSymbolId));
+  }
+  // this is the internal unique DOM `id` for the `<symbol>` element
+  get uniqueSymbolId() {
+    // note: we can't use just the `_iconId` because that's the DOM `id` of the `<svg>` element
+    return `${this._iconId}-symbol`;
   }
   get isInline() {
     return this.args.isInline ?? false;
@@ -81,8 +133,21 @@ class HdsIcon extends Component {
     }
     return classes.join(' ');
   }
+  loadIconModuleTask = buildTask(() => ({
+    context: this,
+    generator: function* (name, size) {
+      let loader = this.registryEntry?.flight[size];
+      let loaderAssertDesc = `Flight icon not available for "${name}" with size "${size}".`;
+      if (this.isCarbon) {
+        loader = this.registryEntry?.carbon ?? undefined;
+        loaderAssertDesc = `Carbon icon not available for "${name}".`;
+      }
+      assert(loaderAssertDesc, loader !== undefined);
+      this.iconModule = yield loader();
+    }
+  }), null, "loadIconModuleTask", null);
   static {
-    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  ", {
+    setComponentTemplate(precompileTemplate("\n    <svg class={{this.classNames}} ...attributes aria-hidden=\"{{if @title \"false\" \"true\"}}\" aria-labelledby={{this.ariaLabelledby}} data-test-icon={{this.name}} data-has-carbon-equivalent={{this.hasCarbonEquivalent}} data-is-carbon={{this.isCarbon}} 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\" {{this.loadIconModule name=this.name size=this.size carbonModeEnabled=this.carbonThemeEnabled}}>\n      {{#if @title}}\n        <title id={{this._titleId}}>{{@title}}</title>\n        <g role=\"presentation\">\n          <use href=\"#{{this.uniqueSymbolId}}\"></use>\n        </g>\n      {{else}}\n        <use href=\"#{{this.uniqueSymbolId}}\"></use>\n      {{/if}}\n\n      {{this.svgSymbol}}\n    </svg>\n  ", {
       strictMode: true
     }), this);
   }

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

@@ -1 +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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"}
+{"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 { tracked } from '@glimmer/tracking';\nimport { service } from '@ember/service';\nimport { guidFor } from '@ember/object/internals';\nimport { assert } from '@ember/debug';\nimport { htmlSafe } from '@ember/template';\nimport { iconNames } from '@hashicorp/flight-icons/svg';\nimport { IconRegistry } from '@hashicorp/flight-icons/symbol-js/registry';\nimport { task } from 'ember-concurrency';\nimport { modifier } from 'ember-modifier';\nimport { HdsIconSizeValues, HdsIconColorValues } from './types.ts';\nimport { HdsThemeValues } from '@hashicorp/design-system-components/services/hds-theming';\n\nimport type { SafeString } from '@ember/template';\nimport type { IconName } from '@hashicorp/flight-icons/svg';\nimport type {\n  HdsIconModule,\n  HdsIconRegistryEntry,\n} from '@hashicorp/flight-icons/symbol-js/registry.ts';\nimport type HdsThemingService from '@hashicorp/design-system-components/services/hds-theming';\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  @service declare readonly hdsTheming: HdsThemingService;\n\n  @tracked iconModule: HdsIconModule | null = null;\n\n  private _iconId = 'icon-' + guidFor(this);\n  private _titleId = 'title-' + guidFor(this);\n\n  // reacts to changes to the name and size arguments to reload the icon\n  loadIconModule = modifier(\n    (\n      _element: SVGElement,\n\n      _positional: [],\n      {\n        name,\n        size,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        carbonModeEnabled,\n      }: { name: IconName; size: HdsIconSizes; carbonModeEnabled: boolean }\n    ) => {\n      void this.loadIconModuleTask.perform(name, size);\n    }\n  );\n\n  get name(): HdsIconSignature['Args']['name'] {\n    const { name } = this.args;\n\n    assert(\n      'Please provide to <Hds::Icon> a value for @name',\n      name !== undefined\n    );\n\n    return name;\n  }\n\n  get registryEntry(): HdsIconRegistryEntry | undefined {\n    const { name, size } = this.args;\n    const registryEntry = IconRegistry[this.name];\n\n    assert(\n      `The icon @name \"${name}\" or @size \"${size}\" provided to <Hds::Icon> is not correct.`,\n      registryEntry !== undefined\n    );\n\n    return IconRegistry[this.name];\n  }\n\n  get hasCarbonEquivalent(): boolean {\n    return this.registryEntry?.carbon !== null;\n  }\n\n  get carbonThemeEnabled(): boolean {\n    return [\n      HdsThemeValues.System,\n      HdsThemeValues.Light,\n      HdsThemeValues.Dark,\n    ].includes(this.hdsTheming.currentTheme as HdsThemeValues);\n  }\n\n  get isCarbon(): boolean {\n    return this.carbonThemeEnabled && this.hasCarbonEquivalent;\n  }\n\n  get svgSymbol(): SafeString | undefined {\n    if (this.iconModule === null) {\n      return undefined;\n    }\n\n    return htmlSafe(this.iconModule.default(this.uniqueSymbolId));\n  }\n\n  // this is the internal unique DOM `id` for the `<symbol>` element\n  get uniqueSymbolId(): string {\n    // note: we can't use just the `_iconId` because that's the DOM `id` of the `<svg>` element\n    return `${this._iconId}-symbol`;\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(): HdsIconSizes {\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  loadIconModuleTask = task(\n    async (name: IconName, size: HdsIconSizes): Promise<void> => {\n      let loader = this.registryEntry?.flight[size];\n      let loaderAssertDesc = `Flight icon not available for \"${name}\" with size \"${size}\".`;\n\n      if (this.isCarbon) {\n        loader = this.registryEntry?.carbon ?? undefined;\n        loaderAssertDesc = `Carbon icon not available for \"${name}\".`;\n      }\n\n      assert(loaderAssertDesc, loader !== undefined);\n\n      this.iconModule = await loader();\n    }\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={{this.name}}\n      data-has-carbon-equivalent={{this.hasCarbonEquivalent}}\n      data-is-carbon={{this.isCarbon}}\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      {{this.loadIconModule\n        name=this.name\n        size=this.size\n        carbonModeEnabled=this.carbonThemeEnabled\n      }}\n    >\n      {{#if @title}}\n        <title id={{this._titleId}}>{{@title}}</title>\n        <g role=\"presentation\">\n          <use href=\"#{{this.uniqueSymbolId}}\"></use>\n        </g>\n      {{else}}\n        <use href=\"#{{this.uniqueSymbolId}}\"></use>\n      {{/if}}\n\n      {{this.svgSymbol}}\n    </svg>\n  </template>\n}\n"],"names":["COLORS","Object","values","HdsIconColorValues","NAMES","iconNames","HdsIcon","Component","g","prototype","service","i","void 0","tracked","_iconId","guidFor","_titleId","loadIconModule","modifier","_element","_positional","name","size","carbonModeEnabled","loadIconModuleTask","perform","args","assert","undefined","registryEntry","IconRegistry","hasCarbonEquivalent","carbon","carbonThemeEnabled","HdsThemeValues","System","Light","Dark","includes","hdsTheming","currentTheme","isCarbon","svgSymbol","iconModule","htmlSafe","default","uniqueSymbolId","isInline","predefinedColor","color","fillColor","HdsIconSizeValues","Sixteen","svgSize","width","stretched","height","title","role","ariaLabelledby","classNames","classes","push","join","_buildTask","context","generator","loader","flight","loaderAssertDesc","setComponentTemplate","precompileTemplate","strictMode"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "5.2.0-rc-20260105174051",
+  "version": "5.2.0-rc-20260105213008",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -35,8 +35,8 @@
     "@embroider/macros": "^1.18.1",
     "@embroider/util": "^1.13.4",
     "@floating-ui/dom": "^1.6.12",
-    "@hashicorp/design-system-tokens": "4.0.0-rc-20260105174051",
-    "@hashicorp/flight-icons": "4.1.1-rc-20260105174051",
+    "@hashicorp/design-system-tokens": "4.0.0-rc-20260105213008",
+    "@hashicorp/flight-icons": "4.1.1-rc-20260105213008",
     "@lezer/highlight": "^1.2.1",
     "@nullvoxpopuli/ember-composable-helpers": "^5.2.11",
     "clipboard-polyfill": "^4.1.1",