From 4f1bff1b514b10b5a90563d503374d425d3bf649 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Wed, 27 Nov 2024 10:35:10 -0800
Subject: [PATCH 01/12] feat(icon-indicators): new component

---
 packages/styles/scss/_zone.scss               |   4 +-
 .../icon-indicator/_icon-indicator.scss       |  89 +++++++
 .../components/icon-indicator/_index.scss     |  16 ++
 .../components/icon-indicator/_tokens.scss    | 224 ++++++++++++++++++
 packages/themes/scss/_component-tokens.scss   |   1 +
 .../src/component-tokens/status/index.js      |   1 +
 .../src/component-tokens/status/tokens.js     |  71 ++++++
 packages/themes/src/index.js                  |   2 +
 packages/themes/src/tokens/components.js      |  15 ++
 packages/themes/tasks/build.js                |   7 +
 .../tasks/builders/modules-status-tokens.js   |  43 ++++
 .../web-components/.storybook/_container.scss |   2 +
 .../components/icon-indicator/.gitignore      |  22 ++
 .../components/icon-indicator/.sassrc         |   6 +
 .../components/icon-indicator/cdn.html        |  31 +++
 .../components/icon-indicator/index.html      |  31 +++
 .../components/icon-indicator/package.json    |  22 ++
 .../icon-indicator/sandbox.config.json        |   3 +
 .../components/icon-indicator/src/index.js    |  10 +
 .../components/icon-indicator/src/styles.scss |  12 +
 .../components/icon-indicator/vite.config.js  |  12 +
 .../stories/data-table-dynamic.stories.ts     |  67 ++++--
 .../src/components/icon-indicator/defs.ts     |  70 ++++++
 .../icon-indicator/docs/overview.mdx          |  12 +
 .../icon-indicator/icon-indicator.mdx         |  36 +++
 .../icon-indicator/icon-indicator.scss        |  67 ++++++
 .../icon-indicator/icon-indicator.stories.ts  |  85 +++++++
 .../icon-indicator/icon-indicator.ts          | 127 ++++++++++
 .../src/components/icon-indicator/index.ts    |  10 +
 29 files changed, 1080 insertions(+), 18 deletions(-)
 create mode 100644 packages/styles/scss/components/icon-indicator/_icon-indicator.scss
 create mode 100644 packages/styles/scss/components/icon-indicator/_index.scss
 create mode 100644 packages/styles/scss/components/icon-indicator/_tokens.scss
 create mode 100644 packages/themes/src/component-tokens/status/index.js
 create mode 100644 packages/themes/src/component-tokens/status/tokens.js
 create mode 100644 packages/themes/tasks/builders/modules-status-tokens.js
 create mode 100644 packages/web-components/examples/components/icon-indicator/.gitignore
 create mode 100644 packages/web-components/examples/components/icon-indicator/.sassrc
 create mode 100644 packages/web-components/examples/components/icon-indicator/cdn.html
 create mode 100644 packages/web-components/examples/components/icon-indicator/index.html
 create mode 100644 packages/web-components/examples/components/icon-indicator/package.json
 create mode 100644 packages/web-components/examples/components/icon-indicator/sandbox.config.json
 create mode 100644 packages/web-components/examples/components/icon-indicator/src/index.js
 create mode 100644 packages/web-components/examples/components/icon-indicator/src/styles.scss
 create mode 100644 packages/web-components/examples/components/icon-indicator/vite.config.js
 create mode 100644 packages/web-components/src/components/icon-indicator/defs.ts
 create mode 100644 packages/web-components/src/components/icon-indicator/docs/overview.mdx
 create mode 100644 packages/web-components/src/components/icon-indicator/icon-indicator.mdx
 create mode 100644 packages/web-components/src/components/icon-indicator/icon-indicator.scss
 create mode 100644 packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts
 create mode 100644 packages/web-components/src/components/icon-indicator/icon-indicator.ts
 create mode 100644 packages/web-components/src/components/icon-indicator/index.ts

diff --git a/packages/styles/scss/_zone.scss b/packages/styles/scss/_zone.scss
index bf79c8074a56..22dbd05097f6 100644
--- a/packages/styles/scss/_zone.scss
+++ b/packages/styles/scss/_zone.scss
@@ -17,6 +17,7 @@
 @use './components/button/tokens' as button;
 @use './components/notification/tokens' as notification;
 @use './components/tag/tokens' as tag;
+@use './components/icon-indicator/tokens' as icon-indicator;
 
 /// Specify a Map of zones where the key will be used as part of the selector
 /// and the value will be a map used to emit CSS Custom Properties for all color
@@ -31,7 +32,8 @@ $zones: (
 $-components: (
   button.$button-tokens,
   notification.$notification-tokens,
-  tag.$tag-tokens
+  tag.$tag-tokens,
+  icon-indicator.$icon-indicator-tokens
 );
 
 @each $name, $theme in $zones {
diff --git a/packages/styles/scss/components/icon-indicator/_icon-indicator.scss b/packages/styles/scss/components/icon-indicator/_icon-indicator.scss
new file mode 100644
index 000000000000..228325c480a7
--- /dev/null
+++ b/packages/styles/scss/components/icon-indicator/_icon-indicator.scss
@@ -0,0 +1,89 @@
+//
+// Copyright IBM Corp. 2016, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../config' as *;
+@use '../../spacing' as *;
+@use './tokens' as *;
+
+/// icon-indicator styles
+/// @access public
+/// @group tag
+@mixin icon-indicator {
+  .#{$prefix}--icon-indicator {
+    @include type-style('body-compact-01');
+
+    display: flex;
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--icon-indicator svg {
+    align-self: center;
+    margin-inline-end: $spacing-03;
+  }
+
+  .#{$prefix}--icon-indicator--md {
+    @include type-style('body-compact-02');
+  }
+
+  .#{$prefix}--icon--error {
+    fill: $status-red;
+  }
+
+  .#{$prefix}--icon--caution-major {
+    fill: $status-orange;
+
+    path:first-of-type {
+      fill: $status-accessibility-background;
+    }
+  }
+
+  .#{$prefix}--icon--caution-minor {
+    fill: $status-yellow;
+
+    path:first-of-type {
+      fill: $status-accessibility-background;
+    }
+  }
+
+  .#{$prefix}--icon--undefined {
+    fill: $status-purple;
+  }
+
+  .#{$prefix}--icon--succeeded {
+    fill: $status-green;
+  }
+
+  .#{$prefix}--icon--normal {
+    fill: $status-blue;
+  }
+
+  .#{$prefix}--icon--in-progress {
+    fill: $status-blue;
+  }
+
+  .#{$prefix}--icon--incomplete {
+    fill: $status-blue;
+  }
+
+  .#{$prefix}--icon--not-started {
+    fill: $status-gray;
+  }
+
+  .#{$prefix}--icon--pending {
+    fill: $status-gray;
+  }
+
+  .#{$prefix}--icon--unknown {
+    fill: $status-gray;
+  }
+
+  .#{$prefix}--icon--information {
+    fill: $status-blue;
+  }
+}
diff --git a/packages/styles/scss/components/icon-indicator/_index.scss b/packages/styles/scss/components/icon-indicator/_index.scss
new file mode 100644
index 000000000000..9c2a757521d6
--- /dev/null
+++ b/packages/styles/scss/components/icon-indicator/_index.scss
@@ -0,0 +1,16 @@
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'icon-indicator';
+@forward 'tokens';
+
+@use '../../theme';
+@use 'icon-indicator';
+@use 'tokens';
+
+@include theme.add-component-tokens(tokens.$status-tokens);
+@include icon-indicator.icon-indicator;
diff --git a/packages/styles/scss/components/icon-indicator/_tokens.scss b/packages/styles/scss/components/icon-indicator/_tokens.scss
new file mode 100644
index 000000000000..f0917edb87f3
--- /dev/null
+++ b/packages/styles/scss/components/icon-indicator/_tokens.scss
@@ -0,0 +1,224 @@
+//
+// Copyright IBM Corp. 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:color';
+@use 'sass:map';
+@use '../../config';
+@use '../../colors';
+@use '../../themes';
+@use '../../theme' as *;
+@use '../../utilities/component-tokens';
+@use '@carbon/themes/scss/component-tokens' as status;
+
+// status-red
+$status-red: (
+  fallback: map.get(status.$status-red, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-red, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-red, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-red, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-red, g-100),
+    ),
+  ),
+) !default;
+
+// status-orange
+$status-orange: (
+  fallback: map.get(status.$status-orange, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-orange, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-orange, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-orange, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-orange, g-100),
+    ),
+  ),
+) !default;
+
+// status-yellow
+$status-yellow: (
+  fallback: map.get(status.$status-yellow, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-yellow, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-yellow, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-yellow, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-yellow, g-100),
+    ),
+  ),
+) !default;
+
+// status-green
+$status-green: (
+  fallback: map.get(status.$status-green, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-green, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-green, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-green, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-green, g-100),
+    ),
+  ),
+) !default;
+
+// status-blue
+$status-blue: (
+  fallback: map.get(status.$status-blue, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-blue, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-blue, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-blue, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-blue, g-100),
+    ),
+  ),
+) !default;
+
+// status-purple
+$status-purple: (
+  fallback: map.get(status.$status-purple, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-purple, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-purple, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-purple, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-purple, g-100),
+    ),
+  ),
+) !default;
+
+// status-gray
+$status-gray: (
+  fallback: map.get(status.$status-gray, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-gray, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-gray, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-gray, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-gray, g-100),
+    ),
+  ),
+) !default;
+
+// status-accessibility-background
+$status-accessibility-background: (
+  fallback: map.get(status.$status-accessibility-background, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-accessibility-background, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-accessibility-background, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-accessibility-background, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-accessibility-background, g-100),
+    ),
+  ),
+) !default;
+
+// Add to $status-tokens map
+$status-tokens: (
+  status-red: $status-red,
+  status-orange: $status-orange,
+  status-yellow: $status-yellow,
+  status-green: $status-green,
+  status-blue: $status-blue,
+  status-purple: $status-purple,
+  status-gray: $status-gray,
+  status-accessibility-background: $status-accessibility-background,
+);
+
+// Generate CSS custom properties for each token
+$status-red: component-tokens.get-var($status-red, 'status-red');
+$status-orange: component-tokens.get-var($status-orange, 'status-orange');
+$status-yellow: component-tokens.get-var($status-yellow, 'status-yellow');
+$status-green: component-tokens.get-var($status-green, 'status-green');
+$status-blue: component-tokens.get-var($status-blue, 'status-blue');
+$status-purple: component-tokens.get-var($status-purple, 'status-purple');
+$status-gray: component-tokens.get-var($status-gray, 'status-gray');
+$status-accessibility-background: component-tokens.get-var(
+  $status-accessibility-background,
+  'status-accessibility-background'
+);
diff --git a/packages/themes/scss/_component-tokens.scss b/packages/themes/scss/_component-tokens.scss
index 0769ba109d05..060ba363e555 100644
--- a/packages/themes/scss/_component-tokens.scss
+++ b/packages/themes/scss/_component-tokens.scss
@@ -8,3 +8,4 @@
 @forward 'generated/button-tokens';
 @forward 'generated/tag-tokens';
 @forward 'generated/notification-tokens';
+@forward 'generated/status-tokens';
diff --git a/packages/themes/src/component-tokens/status/index.js b/packages/themes/src/component-tokens/status/index.js
new file mode 100644
index 000000000000..ed8dbbdedc16
--- /dev/null
+++ b/packages/themes/src/component-tokens/status/index.js
@@ -0,0 +1 @@
+export * as statusTokens from './tokens';
diff --git a/packages/themes/src/component-tokens/status/tokens.js b/packages/themes/src/component-tokens/status/tokens.js
new file mode 100644
index 000000000000..b61b50bc5353
--- /dev/null
+++ b/packages/themes/src/component-tokens/status/tokens.js
@@ -0,0 +1,71 @@
+import {
+  red50,
+  red60,
+  orange40,
+  yellow30,
+  purple50,
+  purple60,
+  green40,
+  green50,
+  blue50,
+  blue70,
+  gray50,
+  gray60,
+  white,
+  gray100,
+} from '@carbon/colors';
+
+export const statusRed = {
+  whiteTheme: red60,
+  g10: red60,
+  g90: red50,
+  g100: red50,
+};
+
+export const statusOrange = {
+  whiteTheme: orange40,
+  g10: orange40,
+  g90: orange40,
+  g100: orange40,
+};
+
+export const statusYellow = {
+  whiteTheme: yellow30,
+  g10: yellow30,
+  g90: yellow30,
+  g100: yellow30,
+};
+
+export const statusPurple = {
+  whiteTheme: purple60,
+  g10: purple60,
+  g90: purple50,
+  g100: purple50,
+};
+
+export const statusGreen = {
+  whiteTheme: green50,
+  g10: green50,
+  g90: green40,
+  g100: green40,
+};
+
+export const statusBlue = {
+  whiteTheme: blue70,
+  g10: blue70,
+  g90: blue50,
+  g100: blue50,
+};
+
+export const statusGray = {
+  whiteTheme: gray60,
+  g10: gray60,
+  g90: gray50,
+  g100: gray50,
+};
+export const statusAccessibilityBackground = {
+  whiteTheme: white,
+  g10: white,
+  g90: gray100,
+  g100: gray100,
+};
diff --git a/packages/themes/src/index.js b/packages/themes/src/index.js
index 42843674e8bc..2c84f5e9dbea 100644
--- a/packages/themes/src/index.js
+++ b/packages/themes/src/index.js
@@ -13,6 +13,7 @@ import * as v10 from './v10';
 import * as buttonTokens from './component-tokens/button';
 import * as tagTokens from './component-tokens/tag';
 import * as notificationTokens from './component-tokens/notification';
+import * as statusTokens from './component-tokens/status';
 import { formatTokenName } from './tools';
 import { unstable_metadata } from './tokens';
 
@@ -34,6 +35,7 @@ export {
   buttonTokens,
   tagTokens,
   notificationTokens,
+  statusTokens,
   unstable_metadata,
   formatTokenName,
 };
diff --git a/packages/themes/src/tokens/components.js b/packages/themes/src/tokens/components.js
index 8c98807421fd..fa13aaba879b 100644
--- a/packages/themes/src/tokens/components.js
+++ b/packages/themes/src/tokens/components.js
@@ -92,3 +92,18 @@ export const tag = TokenGroup.create({
     'tag-hover-warm-gray',
   ],
 });
+
+export const status = TokenGroup.create({
+  name: 'Status',
+  properties: [],
+  tokens: [
+    'status-red',
+    'status-orange',
+    'status-yellow',
+    'status-purple',
+    'status-green',
+    'status-blue',
+    'status-gray',
+    'status-accessibility-background',
+  ],
+});
diff --git a/packages/themes/tasks/build.js b/packages/themes/tasks/build.js
index 9a1e2013b3ba..b4a6559157a6 100644
--- a/packages/themes/tasks/build.js
+++ b/packages/themes/tasks/build.js
@@ -20,6 +20,7 @@ const buildModulesTokensFile = require('./builders/modules-tokens');
 const buildModulesButtonTokens = require('./builders/modules-button-tokens');
 const buildModulesTagTokens = require('./builders/modules-tag-tokens');
 const buildModulesNotificationTokens = require('./builders/modules-notification-tokens');
+const buildModulesStatusTokens = require('./builders/modules-status-tokens');
 
 async function build() {
   reporter.info('Building scss files for themes...');
@@ -69,6 +70,12 @@ async function build() {
         return buildModulesNotificationTokens();
       },
     },
+    {
+      filepath: path.join(GENERATED_SCSS_DIR, '_status-tokens.scss'),
+      builder() {
+        return buildModulesStatusTokens();
+      },
+    },
   ];
 
   for (const { filepath, builder } of files) {
diff --git a/packages/themes/tasks/builders/modules-status-tokens.js b/packages/themes/tasks/builders/modules-status-tokens.js
new file mode 100644
index 000000000000..84c3b292c902
--- /dev/null
+++ b/packages/themes/tasks/builders/modules-status-tokens.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright IBM Corp. 2015, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { types: t } = require('@carbon/scss-generator');
+const { TokenFormat } = require('../../src/tokens');
+const { statusTokens } = require('../../src/component-tokens/status');
+const { FILE_BANNER, primitive } = require('./shared');
+const { paramCase } = require('change-case');
+
+function buildThemesFile() {
+  const imports = [t.SassModule('sass:map')];
+
+  const variables = Object.entries(statusTokens).flatMap(
+    ([key, statusToken]) => {
+      return [
+        t.Newline(),
+        t.Assignment({
+          id: t.Identifier(paramCase(key)),
+          init: t.SassMap({
+            properties: Object.entries(statusToken).map(([token, value]) => {
+              const id = TokenFormat.convert({
+                name: token,
+                format: TokenFormat.formats.scss,
+              });
+              return t.SassMapProperty(t.Identifier(id), primitive(value));
+            }),
+          }),
+          default: true,
+        }),
+      ];
+    }
+  );
+
+  return t.StyleSheet([FILE_BANNER, t.Newline(), ...imports, ...variables]);
+}
+
+module.exports = buildThemesFile;
diff --git a/packages/web-components/.storybook/_container.scss b/packages/web-components/.storybook/_container.scss
index 8397ebacc793..19c03457552d 100644
--- a/packages/web-components/.storybook/_container.scss
+++ b/packages/web-components/.storybook/_container.scss
@@ -15,9 +15,11 @@
 @use '@carbon/styles/scss/components/button/tokens' as button-tokens;
 @use '@carbon/styles/scss/components/notification/tokens' as notification-tokens;
 @use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@use '@carbon/styles/scss/components/icon-indicator/tokens' as status-tokens;
 @include theme.add-component-tokens(button-tokens.$button-tokens);
 @include theme.add-component-tokens(notification-tokens.$notification-tokens);
 @include theme.add-component-tokens(tag-tokens.$tag-tokens);
+@include theme.add-component-tokens(status-tokens.$status-tokens);
 
 // Emit the flex-grid styles
 @include grid.flex-grid();
diff --git a/packages/web-components/examples/components/icon-indicator/.gitignore b/packages/web-components/examples/components/icon-indicator/.gitignore
new file mode 100644
index 000000000000..d94d6e13e948
--- /dev/null
+++ b/packages/web-components/examples/components/icon-indicator/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/packages/web-components/examples/components/icon-indicator/.sassrc b/packages/web-components/examples/components/icon-indicator/.sassrc
new file mode 100644
index 000000000000..956b9e0a3d8a
--- /dev/null
+++ b/packages/web-components/examples/components/icon-indicator/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/web-components/examples/components/icon-indicator/cdn.html b/packages/web-components/examples/components/icon-indicator/cdn.html
new file mode 100644
index 000000000000..977f364c444c
--- /dev/null
+++ b/packages/web-components/examples/components/icon-indicator/cdn.html
@@ -0,0 +1,31 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-icon-indicator:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/icon-indicator.min.js"></script>
+</head>
+<body class="cds-theme-zone-white">
+  <cds-icon-indicator type="gray" title="Clear selection">
+    This is a icon-indicator
+  </cds-icon-indicator>
+</body>
+</html>
diff --git a/packages/web-components/examples/components/icon-indicator/index.html b/packages/web-components/examples/components/icon-indicator/index.html
new file mode 100644
index 000000000000..464008fd3a0e
--- /dev/null
+++ b/packages/web-components/examples/components/icon-indicator/index.html
@@ -0,0 +1,31 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>carbon-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+
+  <link rel="stylesheet" href="src/styles.scss" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-icon-indicator:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <cds-icon-indicator type="gray" title="Clear selection">
+    This is a tag
+  </cds-icon-indicator>
+</body>
+</html>
diff --git a/packages/web-components/examples/components/icon-indicator/package.json b/packages/web-components/examples/components/icon-indicator/package.json
new file mode 100644
index 000000000000..c94bb213b9a4
--- /dev/null
+++ b/packages/web-components/examples/components/icon-indicator/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "carbon-web-components-icon-indicator-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "vite build",
+    "clean": "rimraf node_modules dist .cache",
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "vite": "5.2.13",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/packages/web-components/examples/components/icon-indicator/sandbox.config.json b/packages/web-components/examples/components/icon-indicator/sandbox.config.json
new file mode 100644
index 000000000000..a4df8557d7bf
--- /dev/null
+++ b/packages/web-components/examples/components/icon-indicator/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}
diff --git a/packages/web-components/examples/components/icon-indicator/src/index.js b/packages/web-components/examples/components/icon-indicator/src/index.js
new file mode 100644
index 000000000000..4143768e5159
--- /dev/null
+++ b/packages/web-components/examples/components/icon-indicator/src/index.js
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/web-components/es/components/icon-indicator/index.js';
diff --git a/packages/web-components/examples/components/icon-indicator/src/styles.scss b/packages/web-components/examples/components/icon-indicator/src/styles.scss
new file mode 100644
index 000000000000..dcbf34e26210
--- /dev/null
+++ b/packages/web-components/examples/components/icon-indicator/src/styles.scss
@@ -0,0 +1,12 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+@use '@carbon/styles/scss/components/icon-indicator/tokens' as status-tokens;
+@include theme.add-component-tokens(status-tokens.$status-tokens);
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/web-components/examples/components/icon-indicator/vite.config.js b/packages/web-components/examples/components/icon-indicator/vite.config.js
new file mode 100644
index 000000000000..1e91b76eb5da
--- /dev/null
+++ b/packages/web-components/examples/components/icon-indicator/vite.config.js
@@ -0,0 +1,12 @@
+import { resolve } from "path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, "index.html"),
+      },
+    },
+  },
+});
diff --git a/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts b/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts
index 487cf2a93d2a..2283189f8b28 100644
--- a/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts
+++ b/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts
@@ -18,6 +18,7 @@ import Download16 from '@carbon/icons/lib/download/16.js';
 // @ts-ignore
 import Settings16 from '@carbon/icons/lib/settings/16.js';
 import '../index';
+import '../../icon-indicator/index';
 import storyDocs from './data-table.mdx';
 
 const sizes = {
@@ -186,9 +187,9 @@ export const Default = {
           <cds-table-cell>3000</cds-table-cell>
           <cds-table-cell>Round robin</cds-table-cell>
           <cds-table-cell>Kevin's VM Groups</cds-table-cell>
-          <cds-table-cell
-            ><cds-link disabled>Disabled</cds-link></cds-table-cell
-          >
+          <cds-table-cell>
+            <cds-icon-indicator type="error" label="Error"></cds-icon-indicator>
+          </cds-table-cell>
         </cds-table-row>
         <cds-table-row selection-name="1">
           <cds-table-cell>Load Balancer 1</cds-table-cell>
@@ -196,7 +197,11 @@ export const Default = {
           <cds-table-cell>443</cds-table-cell>
           <cds-table-cell>Round robin</cds-table-cell>
           <cds-table-cell>Maureen's VM Groups</cds-table-cell>
-          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+          <cds-table-cell
+            ><cds-icon-indicator
+              type="succeeded"
+              label="Succeeded"></cds-icon-indicator
+          ></cds-table-cell>
         </cds-table-row>
         <cds-table-row selection-name="2">
           <cds-table-cell>Load Balancer 2</cds-table-cell>
@@ -204,7 +209,11 @@ export const Default = {
           <cds-table-cell>80</cds-table-cell>
           <cds-table-cell>DNS delegation</cds-table-cell>
           <cds-table-cell>Andrew's VM Groups</cds-table-cell>
-          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+          <cds-table-cell
+            ><cds-icon-indicator
+              type="in-progress"
+              label="in-progress"></cds-icon-indicator
+          ></cds-table-cell>
         </cds-table-row>
         <cds-table-row selection-name="3">
           <cds-table-cell>Load Balancer 6</cds-table-cell>
@@ -213,8 +222,8 @@ export const Default = {
           <cds-table-cell>Round robin</cds-table-cell>
           <cds-table-cell>Marc's VM Groups</cds-table-cell>
           <cds-table-cell
-            ><cds-link disabled>Disabled</cds-link></cds-table-cell
-          >
+            ><cds-icon-indicator type="error" label="Error"></cds-icon-indicator
+          ></cds-table-cell>
         </cds-table-row>
         <cds-table-row selection-name="4">
           <cds-table-cell>Load Balancer 4</cds-table-cell>
@@ -222,7 +231,11 @@ export const Default = {
           <cds-table-cell>443</cds-table-cell>
           <cds-table-cell>Round robin</cds-table-cell>
           <cds-table-cell>Mel's VM Groups</cds-table-cell>
-          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+          <cds-table-cell
+            ><cds-icon-indicator
+              type="succeeded"
+              label="Succeeded"></cds-icon-indicator
+          ></cds-table-cell>
         </cds-table-row>
         <cds-table-row selection-name="5">
           <cds-table-cell>Load Balancer 5</cds-table-cell>
@@ -230,7 +243,11 @@ export const Default = {
           <cds-table-cell>80</cds-table-cell>
           <cds-table-cell>DNS delegation</cds-table-cell>
           <cds-table-cell>Ronja's VM Groups</cds-table-cell>
-          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+          <cds-table-cell
+            ><cds-icon-indicator
+              type="in-progress"
+              label="in-progress"></cds-icon-indicator
+          ></cds-table-cell>
         </cds-table-row>
       </cds-table-body>
     </cds-table>
@@ -308,8 +325,8 @@ export const Playground = {
           <cds-table-cell>Round robin</cds-table-cell>
           <cds-table-cell>Kevin's VM Groups</cds-table-cell>
           <cds-table-cell
-            ><cds-link disabled>Disabled</cds-link></cds-table-cell
-          >
+            ><cds-icon-indicator type="error" label="Error"></cds-icon-indicator
+          ></cds-table-cell>
         </cds-table-row>
         <cds-table-expanded-row>
           <h6>Expandable row content</h6>
@@ -321,7 +338,11 @@ export const Playground = {
           <cds-table-cell>443</cds-table-cell>
           <cds-table-cell>Round robin</cds-table-cell>
           <cds-table-cell>Maureen's VM Groups</cds-table-cell>
-          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+          <cds-table-cell
+            ><cds-icon-indicator
+              type="succeeded"
+              label="Succeeded"></cds-icon-indicator
+          ></cds-table-cell>
         </cds-table-row>
         <cds-table-expanded-row>
           <h6>Expandable row content</h6>
@@ -333,7 +354,11 @@ export const Playground = {
           <cds-table-cell>80</cds-table-cell>
           <cds-table-cell>DNS delegation</cds-table-cell>
           <cds-table-cell>Andrew's VM Groups</cds-table-cell>
-          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+          <cds-table-cell
+            ><cds-icon-indicator
+              type="in-progress"
+              label="in-progress"></cds-icon-indicator
+          ></cds-table-cell>
         </cds-table-row>
         <cds-table-expanded-row>
           <h6>Expandable row content</h6>
@@ -346,8 +371,8 @@ export const Playground = {
           <cds-table-cell>Round robin</cds-table-cell>
           <cds-table-cell>Marc's VM Groups</cds-table-cell>
           <cds-table-cell
-            ><cds-link disabled>Disabled</cds-link></cds-table-cell
-          >
+            ><cds-icon-indicator type="error" label="Error"></cds-icon-indicator
+          ></cds-table-cell>
         </cds-table-row>
         <cds-table-expanded-row>
           <h6>Expandable row content</h6>
@@ -359,7 +384,11 @@ export const Playground = {
           <cds-table-cell>443</cds-table-cell>
           <cds-table-cell>Round robin</cds-table-cell>
           <cds-table-cell>Mel's VM Groups</cds-table-cell>
-          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+          <cds-table-cell
+            ><cds-icon-indicator
+              type="succeeded"
+              label="Succeeded"></cds-icon-indicator
+          ></cds-table-cell>
         </cds-table-row>
         <cds-table-expanded-row>
           <h6>Expandable row content</h6>
@@ -371,7 +400,11 @@ export const Playground = {
           <cds-table-cell>80</cds-table-cell>
           <cds-table-cell>DNS delegation</cds-table-cell>
           <cds-table-cell>Ronja's VM Groups</cds-table-cell>
-          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+          <cds-table-cell
+            ><cds-icon-indicator
+              type="in-progress"
+              label="in-progress"></cds-icon-indicator
+          ></cds-table-cell>
         </cds-table-row>
         <cds-table-expanded-row>
           <h6>Expandable row content</h6>
diff --git a/packages/web-components/src/components/icon-indicator/defs.ts b/packages/web-components/src/components/icon-indicator/defs.ts
new file mode 100644
index 000000000000..e5d57e3013a9
--- /dev/null
+++ b/packages/web-components/src/components/icon-indicator/defs.ts
@@ -0,0 +1,70 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export enum ICON_INDICATOR_TYPE {
+  /**
+   * Error
+   */
+  ERROR = 'error',
+
+  /**
+   * Caution major.
+   */
+  'CAUTION-MAJOR' = 'caution-major',
+
+  /**
+   * Caution minor.
+   */
+  'CAUTION-MINOR' = 'caution-minor',
+
+  /**
+   * Undefined.
+   */
+  UNDEFINED = 'undefined',
+
+  /**
+   * Succeeded.
+   */
+  SUCCEEDED = 'succeeded',
+
+  /**
+   * Normal.
+   */
+  NORMAL = 'normal',
+
+  /**
+   * In-progress.
+   */
+  'IN-PROGRESS' = 'in-progress',
+
+  /**
+   * Incomplete.
+   */
+  INCOMPLETE = 'incomplete',
+
+  /**
+   * Not started.
+   */
+  'NOT-STARTED' = 'not-started',
+
+  /**
+   * Pending.
+   */
+  PENDING = 'pending',
+
+  /**
+   * Unknown.
+   */
+  UNKNOWN = 'unknown',
+
+  /**
+   * Information.
+   */
+  INFORMATION = 'information',
+}
diff --git a/packages/web-components/src/components/icon-indicator/docs/overview.mdx b/packages/web-components/src/components/icon-indicator/docs/overview.mdx
new file mode 100644
index 000000000000..d6870bba0a01
--- /dev/null
+++ b/packages/web-components/src/components/icon-indicator/docs/overview.mdx
@@ -0,0 +1,12 @@
+## Live demo
+
+<StorybookDemo
+  tall
+  url="https://www.ibm.com/standards/carbon/carbon-web-components"
+  variants={[
+    {
+      label: 'Default',
+      variant: 'components-icon-indicator--default'
+    },
+  ]}
+/>
diff --git a/packages/web-components/src/components/icon-indicator/icon-indicator.mdx b/packages/web-components/src/components/icon-indicator/icon-indicator.mdx
new file mode 100644
index 000000000000..3dc74ad2f905
--- /dev/null
+++ b/packages/web-components/src/components/icon-indicator/icon-indicator.mdx
@@ -0,0 +1,36 @@
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as IconIndicatorStories from './icon-indicator.stories';
+
+<Meta of={IconIndicatorStories} />
+
+# Icon indicator
+
+> 💡 Check our
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/icon-indicator)
+> example implementation.
+
+[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/icon-indicator)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/icon-indicator/index.js';
+```
+
+<Markdown>{`${cdnJs({ components: ['icon-indicator'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
+
+### HTML
+
+```html
+<cds-icon-indicator type="error" text="Error"></cds-icon-indicator>
+```
+
+## `<cds-icon-indicator>` attributes and properties
+
+<ArgTypes of="cds-icon-indicator" />
diff --git a/packages/web-components/src/components/icon-indicator/icon-indicator.scss b/packages/web-components/src/components/icon-indicator/icon-indicator.scss
new file mode 100644
index 000000000000..6dd16acdcc81
--- /dev/null
+++ b/packages/web-components/src/components/icon-indicator/icon-indicator.scss
@@ -0,0 +1,67 @@
+//
+// Copyright IBM Corp. 2019, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/components/icon-indicator/index' as *;
+
+:host(#{$prefix}-icon-indicator) {
+  @extend .#{$prefix}--icon-indicator;
+}
+
+:host(#{$prefix}-icon-indicator[size='md']) {
+  @extend .#{$prefix}--icon-indicator--md;
+}
+
+:host(#{$prefix}-icon-indicator[type='error']) svg {
+  @extend .#{$prefix}--icon--error;
+}
+
+:host(#{$prefix}-icon-indicator[type='caution-major']) svg {
+  @extend .#{$prefix}--icon--caution-major;
+}
+
+:host(#{$prefix}-icon-indicator[type='caution-minor']) svg {
+  @extend .#{$prefix}--icon--caution-minor;
+}
+
+:host(#{$prefix}-icon-indicator[type='undefined']) svg {
+  @extend .#{$prefix}--icon--undefined;
+}
+
+:host(#{$prefix}-icon-indicator[type='succeeded']) svg {
+  @extend .#{$prefix}--icon--succeeded;
+}
+
+:host(#{$prefix}-icon-indicator[type='normal']) svg {
+  @extend .#{$prefix}--icon--normal;
+}
+
+:host(#{$prefix}-icon-indicator[type='in-progress']) svg {
+  @extend .#{$prefix}--icon--in-progress;
+}
+
+:host(#{$prefix}-icon-indicator[type='incomplete']) svg {
+  @extend .#{$prefix}--icon--incomplete;
+}
+
+:host(#{$prefix}-icon-indicator[type='not-started']) svg {
+  @extend .#{$prefix}--icon--not-started;
+}
+
+:host(#{$prefix}-icon-indicator[type='pending']) svg {
+  @extend .#{$prefix}--icon--pending;
+}
+
+:host(#{$prefix}-icon-indicator[type='unknown']) svg {
+  @extend .#{$prefix}--icon--unknown;
+}
+
+:host(#{$prefix}-icon-indicator[type='information']) svg {
+  @extend .#{$prefix}--icon--information;
+}
diff --git a/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts b/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts
new file mode 100644
index 000000000000..0e18c1b411f6
--- /dev/null
+++ b/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts
@@ -0,0 +1,85 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import './index';
+import { ICON_INDICATOR_TYPE } from './defs';
+
+const types = [
+  'error',
+  'caution-major',
+  'caution-minor',
+  'undefined',
+  'succeeded',
+  'normal',
+  'in-progress',
+  'incomplete',
+  'not-started',
+  'pending',
+  'unknown',
+  'information',
+];
+
+export const Default = {
+  render: () => html`
+    ${types.map(
+      (type) => html`
+        <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
+          <cds-icon-indicator
+            type="${type}"
+            label="${type}"></cds-icon-indicator>
+          <cds-icon-indicator
+            type="${type}"
+            label="${type}"
+            size=${20}></cds-icon-indicator>
+        </div>
+      `
+    )}
+  `,
+};
+
+const defaultArgs = {
+  label: 'Label',
+  type: ICON_INDICATOR_TYPE.ERROR,
+  size: 16,
+};
+
+const controls = {
+  size: {
+    control: 'select',
+    description:
+      'Specify the size of the Icon Indicator. Currently supports either 16 (default) or 20  sizes.',
+    options: [16, 20],
+  },
+  label: {
+    control: 'text',
+    description: 'Label next to the icon.',
+  },
+  type: {
+    control: 'select',
+    description: 'Specify the type of the Icon Indicator.',
+    options: types,
+  },
+};
+
+export const Playground = {
+  argTypes: controls,
+  args: defaultArgs,
+  render: ({ label, size, type }) =>
+    html` <cds-icon-indicator
+      type="${type}"
+      size="${size}"
+      label="${label}"></cds-icon-indicator>`,
+};
+
+const meta = {
+  title: 'Components/Icon Indicator',
+};
+
+export default meta;
diff --git a/packages/web-components/src/components/icon-indicator/icon-indicator.ts b/packages/web-components/src/components/icon-indicator/icon-indicator.ts
new file mode 100644
index 000000000000..207ec5146812
--- /dev/null
+++ b/packages/web-components/src/components/icon-indicator/icon-indicator.ts
@@ -0,0 +1,127 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import { ICON_INDICATOR_TYPE } from './defs';
+import ErrorFilled16 from '@carbon/icons/lib/error--filled/16.js';
+import ErrorFilled20 from '@carbon/icons/lib/error--filled/20.js';
+import WarningAltInvertedFilled16 from '@carbon/icons/lib/warning--alt-inverted--filled/16.js';
+import WarningAltInvertedFilled20 from '@carbon/icons/lib/warning--alt-inverted--filled/20.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
+import WarningAltFilled20 from '@carbon/icons/lib/warning--alt--filled/20.js';
+import UndefinedFilled16 from '@carbon/icons/lib/undefined--filled/16.js';
+import UndefinedFilled20 from '@carbon/icons/lib/undefined--filled/20.js';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16.js';
+import CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20.js';
+import CheckmarkOutline16 from '@carbon/icons/lib/checkmark--outline/16.js';
+import CheckmarkOutline20 from '@carbon/icons/lib/checkmark--outline/20.js';
+import InProgress16 from '@carbon/icons/lib/in-progress/16.js';
+import InProgress20 from '@carbon/icons/lib/in-progress/20.js';
+import Incomplete16 from '@carbon/icons/lib/incomplete/16.js';
+import Incomplete20 from '@carbon/icons/lib/incomplete/20.js';
+import CircleDash16 from '@carbon/icons/lib/circle-dash/16.js';
+import CircleDash20 from '@carbon/icons/lib/circle-dash/20.js';
+import Pending16 from '@carbon/icons/lib/pending/16.js';
+import Pending20 from '@carbon/icons/lib/pending/20.js';
+import UnknownFilled16 from '@carbon/icons/lib/unknown--filled/16.js';
+import UnknownFilled20 from '@carbon/icons/lib/unknown--filled/20.js';
+import WarningSquareFilled16 from '@carbon/icons/lib/warning-square--filled/16.js';
+import WarningSquareFilled20 from '@carbon/icons/lib/warning-square--filled/20.js';
+export { ICON_INDICATOR_TYPE };
+
+import styles from './icon-indicator.scss?lit';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+
+const iconMap = {
+  [ICON_INDICATOR_TYPE.ERROR]: {
+    16: ErrorFilled16,
+    20: ErrorFilled20,
+  },
+  [ICON_INDICATOR_TYPE['CAUTION-MAJOR']]: {
+    16: WarningAltInvertedFilled16,
+    20: WarningAltInvertedFilled20,
+  },
+  [ICON_INDICATOR_TYPE['CAUTION-MINOR']]: {
+    16: WarningAltFilled16,
+    20: WarningAltFilled20,
+  },
+  [ICON_INDICATOR_TYPE.UNDEFINED]: {
+    16: UndefinedFilled16,
+    20: UndefinedFilled20,
+  },
+  [ICON_INDICATOR_TYPE.SUCCEEDED]: {
+    16: CheckmarkFilled16,
+    20: CheckmarkFilled20,
+  },
+  [ICON_INDICATOR_TYPE.NORMAL]: {
+    16: CheckmarkOutline16,
+    20: CheckmarkOutline20,
+  },
+  [ICON_INDICATOR_TYPE['IN-PROGRESS']]: {
+    16: InProgress16,
+    20: InProgress20,
+  },
+  [ICON_INDICATOR_TYPE.INCOMPLETE]: {
+    16: Incomplete16,
+    20: Incomplete20,
+  },
+  [ICON_INDICATOR_TYPE['NOT-STARTED']]: {
+    16: CircleDash16,
+    20: CircleDash20,
+  },
+  [ICON_INDICATOR_TYPE.PENDING]: {
+    16: Pending16,
+    20: Pending20,
+  },
+  [ICON_INDICATOR_TYPE.UNKNOWN]: {
+    16: UnknownFilled16,
+    20: UnknownFilled20,
+  },
+  [ICON_INDICATOR_TYPE.INFORMATION]: {
+    16: WarningSquareFilled16,
+    20: WarningSquareFilled20,
+  },
+};
+
+/**
+ * Icon Indicator.
+ *
+ * @element cds-icon-indicator
+ */
+@customElement(`${prefix}-icon-indicator`)
+class CDSIconIndicator extends LitElement {
+  /**
+   * Icon indicator should be size 16 or 20
+   */
+  @property()
+  size = 16;
+
+  /**
+   * Label next to the icon.
+   */
+  @property()
+  label!: string;
+
+  /**
+   * Icon Indicator type
+   */
+  @property()
+  type!: ICON_INDICATOR_TYPE;
+
+  render() {
+    const icon = iconMap[this.type]?.[this.size];
+    return html`${icon()}${this.label}`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+}
+
+export default CDSIconIndicator;
diff --git a/packages/web-components/src/components/icon-indicator/index.ts b/packages/web-components/src/components/icon-indicator/index.ts
new file mode 100644
index 000000000000..4f59fbfc8300
--- /dev/null
+++ b/packages/web-components/src/components/icon-indicator/index.ts
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './icon-indicator';

From 1c96c9bf11e9c8f541aee73e4f64e618c3451a74 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Wed, 27 Nov 2024 10:44:02 -0800
Subject: [PATCH 02/12] fix(icon-indicator): styles

---
 .../icon-indicator/_icon-indicator.scss       | 26 ++++++++---------
 .../icon-indicator/icon-indicator.scss        | 28 +++++++++----------
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/styles/scss/components/icon-indicator/_icon-indicator.scss b/packages/styles/scss/components/icon-indicator/_icon-indicator.scss
index 228325c480a7..3826e9120f55 100644
--- a/packages/styles/scss/components/icon-indicator/_icon-indicator.scss
+++ b/packages/styles/scss/components/icon-indicator/_icon-indicator.scss
@@ -27,15 +27,15 @@
     margin-inline-end: $spacing-03;
   }
 
-  .#{$prefix}--icon-indicator--md {
+  .#{$prefix}--icon-indicator--20 {
     @include type-style('body-compact-02');
   }
 
-  .#{$prefix}--icon--error {
+  .#{$prefix}--icon-indicator--error {
     fill: $status-red;
   }
 
-  .#{$prefix}--icon--caution-major {
+  .#{$prefix}--icon-indicator--caution-major {
     fill: $status-orange;
 
     path:first-of-type {
@@ -43,7 +43,7 @@
     }
   }
 
-  .#{$prefix}--icon--caution-minor {
+  .#{$prefix}--icon-indicator--caution-minor {
     fill: $status-yellow;
 
     path:first-of-type {
@@ -51,39 +51,39 @@
     }
   }
 
-  .#{$prefix}--icon--undefined {
+  .#{$prefix}--icon-indicator--undefined {
     fill: $status-purple;
   }
 
-  .#{$prefix}--icon--succeeded {
+  .#{$prefix}--icon-indicator--succeeded {
     fill: $status-green;
   }
 
-  .#{$prefix}--icon--normal {
+  .#{$prefix}--icon-indicator--normal {
     fill: $status-blue;
   }
 
-  .#{$prefix}--icon--in-progress {
+  .#{$prefix}--icon-indicator--in-progress {
     fill: $status-blue;
   }
 
-  .#{$prefix}--icon--incomplete {
+  .#{$prefix}--icon-indicator--incomplete {
     fill: $status-blue;
   }
 
-  .#{$prefix}--icon--not-started {
+  .#{$prefix}--icon-indicator--not-started {
     fill: $status-gray;
   }
 
-  .#{$prefix}--icon--pending {
+  .#{$prefix}--icon-indicator--pending {
     fill: $status-gray;
   }
 
-  .#{$prefix}--icon--unknown {
+  .#{$prefix}--icon-indicator--unknown {
     fill: $status-gray;
   }
 
-  .#{$prefix}--icon--information {
+  .#{$prefix}--icon-indicator--information {
     fill: $status-blue;
   }
 }
diff --git a/packages/web-components/src/components/icon-indicator/icon-indicator.scss b/packages/web-components/src/components/icon-indicator/icon-indicator.scss
index 6dd16acdcc81..8c963932e382 100644
--- a/packages/web-components/src/components/icon-indicator/icon-indicator.scss
+++ b/packages/web-components/src/components/icon-indicator/icon-indicator.scss
@@ -14,54 +14,54 @@ $css--plex: true !default;
   @extend .#{$prefix}--icon-indicator;
 }
 
-:host(#{$prefix}-icon-indicator[size='md']) {
-  @extend .#{$prefix}--icon-indicator--md;
+:host(#{$prefix}-icon-indicator[size='20']) {
+  @extend .#{$prefix}--icon-indicator--20;
 }
 
 :host(#{$prefix}-icon-indicator[type='error']) svg {
-  @extend .#{$prefix}--icon--error;
+  @extend .#{$prefix}--icon-indicator--error;
 }
 
 :host(#{$prefix}-icon-indicator[type='caution-major']) svg {
-  @extend .#{$prefix}--icon--caution-major;
+  @extend .#{$prefix}--icon-indicator--caution-major;
 }
 
 :host(#{$prefix}-icon-indicator[type='caution-minor']) svg {
-  @extend .#{$prefix}--icon--caution-minor;
+  @extend .#{$prefix}--icon-indicator--caution-minor;
 }
 
 :host(#{$prefix}-icon-indicator[type='undefined']) svg {
-  @extend .#{$prefix}--icon--undefined;
+  @extend .#{$prefix}--icon-indicator--undefined;
 }
 
 :host(#{$prefix}-icon-indicator[type='succeeded']) svg {
-  @extend .#{$prefix}--icon--succeeded;
+  @extend .#{$prefix}--icon-indicator--succeeded;
 }
 
 :host(#{$prefix}-icon-indicator[type='normal']) svg {
-  @extend .#{$prefix}--icon--normal;
+  @extend .#{$prefix}--icon-indicator--normal;
 }
 
 :host(#{$prefix}-icon-indicator[type='in-progress']) svg {
-  @extend .#{$prefix}--icon--in-progress;
+  @extend .#{$prefix}--icon-indicator--in-progress;
 }
 
 :host(#{$prefix}-icon-indicator[type='incomplete']) svg {
-  @extend .#{$prefix}--icon--incomplete;
+  @extend .#{$prefix}--icon-indicator--incomplete;
 }
 
 :host(#{$prefix}-icon-indicator[type='not-started']) svg {
-  @extend .#{$prefix}--icon--not-started;
+  @extend .#{$prefix}--icon-indicator--not-started;
 }
 
 :host(#{$prefix}-icon-indicator[type='pending']) svg {
-  @extend .#{$prefix}--icon--pending;
+  @extend .#{$prefix}--icon-indicator--pending;
 }
 
 :host(#{$prefix}-icon-indicator[type='unknown']) svg {
-  @extend .#{$prefix}--icon--unknown;
+  @extend .#{$prefix}--icon-indicator--unknown;
 }
 
 :host(#{$prefix}-icon-indicator[type='information']) svg {
-  @extend .#{$prefix}--icon--information;
+  @extend .#{$prefix}--icon-indicator--information;
 }

From d5d46d2ed587641e6e7112ebbb5ca1129fc876e8 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Tue, 3 Dec 2024 12:14:34 -0800
Subject: [PATCH 03/12] feat(react): add icon-indicator and more updates

---
 .../IconIndicator-test.avt.e2e.js             |  23 ++++
 .../IconIndicator/IconIndicator-test.e2e.js   |  25 ++++
 .../__snapshots__/PublicAPI-test.js.snap      |   1 +
 .../IconIndicator/IconIndicator.mdx           |  58 ++++++++
 .../IconIndicator/IconIndicator.stories.js    |  62 +++++++++
 .../__tests__/IconIndicator-test.js           |  36 +++++
 .../IconIndicator/docs/overview.mdx           |  12 ++
 .../src/components/IconIndicator/index.tsx    | 129 ++++++++++++++++++
 packages/styles/scss/_zone.scss               |   2 +-
 packages/styles/scss/components/_index.scss   |   1 +
 .../icon-indicator/_icon-indicator.scss       |   5 +-
 .../components/icon-indicator/_tokens.scss    |  28 ----
 .../src/tokens/__tests__/metadata-test.js     |  28 ++++
 packages/themes/src/tokens/components.js      |   1 -
 .../src/components/icon-indicator/defs.ts     |   2 +-
 .../icon-indicator/docs/overview.mdx          |   2 +-
 .../icon-indicator/icon-indicator.mdx         |   6 +-
 .../icon-indicator/icon-indicator.scss        |  24 ++--
 .../icon-indicator/icon-indicator.stories.ts  |  32 ++---
 .../icon-indicator/icon-indicator.ts          |  38 +++---
 20 files changed, 433 insertions(+), 82 deletions(-)
 create mode 100644 e2e/components/IconIndicator/IconIndicator-test.avt.e2e.js
 create mode 100644 e2e/components/IconIndicator/IconIndicator-test.e2e.js
 create mode 100644 packages/react/src/components/IconIndicator/IconIndicator.mdx
 create mode 100644 packages/react/src/components/IconIndicator/IconIndicator.stories.js
 create mode 100644 packages/react/src/components/IconIndicator/__tests__/IconIndicator-test.js
 create mode 100644 packages/react/src/components/IconIndicator/docs/overview.mdx
 create mode 100644 packages/react/src/components/IconIndicator/index.tsx

diff --git a/e2e/components/IconIndicator/IconIndicator-test.avt.e2e.js b/e2e/components/IconIndicator/IconIndicator-test.avt.e2e.js
new file mode 100644
index 000000000000..72b48b56de48
--- /dev/null
+++ b/e2e/components/IconIndicator/IconIndicator-test.avt.e2e.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+import { expect, test } from '@playwright/test';
+import { visitStory } from '../../test-utils/storybook';
+
+test.describe('@avt IconIndicator', () => {
+  test('@avt-default-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'IconIndicator',
+      id: 'components-statusindicators-iconindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('IconIndicator');
+  });
+});
diff --git a/e2e/components/IconIndicator/IconIndicator-test.e2e.js b/e2e/components/IconIndicator/IconIndicator-test.e2e.js
new file mode 100644
index 000000000000..bf4b2ad4974f
--- /dev/null
+++ b/e2e/components/IconIndicator/IconIndicator-test.e2e.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+const { test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory } = require('../../test-utils/storybook');
+
+test.describe('IconIndicator', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('icon indicator @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'IconIndicator',
+          id: 'components-statusindicators-iconindicator--default',
+          theme,
+        });
+      });
+    });
+  });
+});
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
index deeae8dc8bda..2f04a6c6c3b0 100644
--- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -324,6 +324,7 @@ Array [
   "spacing11",
   "spacing12",
   "spacing13",
+  "statusTokens",
   "styles",
   "supportCautionMajor",
   "supportCautionMinor",
diff --git a/packages/react/src/components/IconIndicator/IconIndicator.mdx b/packages/react/src/components/IconIndicator/IconIndicator.mdx
new file mode 100644
index 000000000000..95aba1d8e05a
--- /dev/null
+++ b/packages/react/src/components/IconIndicator/IconIndicator.mdx
@@ -0,0 +1,58 @@
+import { ArgTypes, Meta } from '@storybook/blocks';
+
+<Meta isTemplate />
+
+# IconIndicator
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/IconIndicator)
+&nbsp;
+
+{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}
+
+## Overview
+
+The `IconIndicator` component is useful for communicating severity level
+information to users. The shapes and colors, communicate severity that enables
+users to quickly assess and identify status and respond accordingly.
+
+```jsx
+import { IconIndicator } from '@carbon/react';
+
+function ExampleComponent() {
+  return (
+    <IconIndicator kind="error" label="Error">
+  );
+}
+```
+
+## Kind
+
+Icon indicators can take the form of error, caution major, caution minor,
+undefined, succeeded, normal, in-progressm incomplete, not started, pending,
+unknown, and information.
+
+## Size
+
+Icon indicators have two size options 16 and 20. The default is 16.
+
+## Customizing the label
+
+You can set a string to customize the label of the Icon indicator.
+
+## Component API
+
+<ArgTypes />
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/IconIndicator/IconIndicator.mdx).
diff --git a/packages/react/src/components/IconIndicator/IconIndicator.stories.js b/packages/react/src/components/IconIndicator/IconIndicator.stories.js
new file mode 100644
index 000000000000..04a605c2e340
--- /dev/null
+++ b/packages/react/src/components/IconIndicator/IconIndicator.stories.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import IconIndicator from '.';
+import { IconIndicatorKinds } from './index';
+import mdx from './IconIndicator.mdx';
+
+export default {
+  title: 'Components/StatusIndicators/IconIndicator',
+  component: IconIndicator,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => {
+  return IconIndicatorKinds.map((type) => (
+    <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
+      <IconIndicator kind={type} label={type} />
+      <IconIndicator kind={type} label={type} size={20} />
+    </div>
+  ));
+};
+
+const PlaygroundStory = (props) => {
+  return <IconIndicator {...props} />;
+};
+
+export const Playground = PlaygroundStory.bind({});
+
+Playground.args = {
+  label: 'Custom label',
+  kind: 'error',
+  size: 16,
+};
+
+Playground.argTypes = {
+  label: {
+    control: {
+      type: 'text',
+    },
+  },
+  kind: {
+    control: {
+      type: 'select',
+    },
+    options: IconIndicatorKinds,
+  },
+  size: {
+    control: {
+      type: 'select',
+    },
+    options: [16, 20],
+  },
+};
diff --git a/packages/react/src/components/IconIndicator/__tests__/IconIndicator-test.js b/packages/react/src/components/IconIndicator/__tests__/IconIndicator-test.js
new file mode 100644
index 000000000000..bbe1c6c31be1
--- /dev/null
+++ b/packages/react/src/components/IconIndicator/__tests__/IconIndicator-test.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import IconIndicator from '../index';
+
+describe('IconIndicator', () => {
+  it('should use a custom label', () => {
+    render(<IconIndicator kind="error" label="label" />);
+    expect(screen.getByText('label')).toBeInTheDocument();
+  });
+
+  it('should update with size prop', () => {
+    render(<IconIndicator kind="error" label="label" size={20} />);
+    expect(screen.getByText('label')).toHaveClass('cds--icon-indicator--20');
+  });
+
+  it('should update with kind prop', () => {
+    render(<IconIndicator kind="pending" label="label" size={20} />);
+    expect(document.querySelector('svg')).toHaveClass(
+      'cds--icon-indicator--pending'
+    );
+  });
+
+  it('should pass in an extra className when one is given', () => {
+    render(
+      <IconIndicator kind="error" label="label" className="custom-class" />
+    );
+    expect(screen.getByText('label')).toHaveClass('custom-class');
+  });
+});
diff --git a/packages/react/src/components/IconIndicator/docs/overview.mdx b/packages/react/src/components/IconIndicator/docs/overview.mdx
new file mode 100644
index 000000000000..747a86cea343
--- /dev/null
+++ b/packages/react/src/components/IconIndicator/docs/overview.mdx
@@ -0,0 +1,12 @@
+## Live demo
+
+<StorybookDemo
+  themeSelector
+  url="https://react.carbondesignsystem.com"
+  variants={[
+    {
+      label: 'Default',
+      variant: 'components-statusindicator-iconindicator--playground'
+    }
+  ]}
+/>
diff --git a/packages/react/src/components/IconIndicator/index.tsx b/packages/react/src/components/IconIndicator/index.tsx
new file mode 100644
index 000000000000..f6d70fe061aa
--- /dev/null
+++ b/packages/react/src/components/IconIndicator/index.tsx
@@ -0,0 +1,129 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import {
+  ErrorFilled,
+  CheckmarkFilled,
+  WarningAltFilled,
+  WarningAltInvertedFilled,
+  UndefinedFilled,
+  InProgress,
+  Incomplete,
+  CircleDash,
+  UnknownFilled,
+  WarningSquareFilled,
+  CheckmarkOutline,
+  PendingFilled,
+} from '@carbon/icons-react';
+
+export const IconIndicatorKinds = [
+  'error',
+  'caution-major',
+  'caution-minor',
+  'undefined',
+  'succeeded',
+  'normal',
+  'in-progress',
+  'incomplete',
+  'not-started',
+  'pending',
+  'unknown',
+  'information',
+];
+
+const iconTypes = {
+  error: ErrorFilled,
+  ['caution-major']: WarningAltInvertedFilled,
+  ['caution-minor']: WarningAltFilled,
+  undefined: UndefinedFilled,
+  succeeded: CheckmarkFilled,
+  normal: CheckmarkOutline,
+  ['in-progress']: InProgress,
+  incomplete: Incomplete,
+  ['not-started']: CircleDash,
+  pending: PendingFilled,
+  unknown: UnknownFilled,
+  information: WarningSquareFilled,
+};
+
+export type IconIndicatorKind = (typeof IconIndicatorKinds)[number];
+
+interface IconIndicatorProps {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+
+  /**
+   * Specify the kind of icon to be used
+   */
+  kind: IconIndicatorKind;
+
+  /**
+   * Label next to the icon
+   */
+  label: string;
+
+  /**
+   * Specify the size of the Icon Indicator. Currently supports either 16 (default) or 20 sizes.
+   */
+  size?: number;
+}
+
+const IconIndicator = ({
+  className: customClassName,
+  kind,
+  label,
+  size = 16,
+}: IconIndicatorProps) => {
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--icon-indicator`, customClassName, {
+    [`${prefix}--icon-indicator--20`]: size == 20,
+  });
+
+  const IconForKind = iconTypes[kind];
+  if (!IconForKind) {
+    return null;
+  }
+  return (
+    <div className={classNames}>
+      <IconForKind
+        size={size}
+        className={`${prefix}--icon-indicator--${kind}`}
+      />
+      {label}
+    </div>
+  );
+};
+
+IconIndicator.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the kind of the Icon Indicator
+   */
+  kind: PropTypes.oneOf(IconIndicatorKinds).isRequired,
+
+  /**
+   * Label next to the icon.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Specify the size of the Icon Indicator. Currently supports either 16 (default) or 20  sizes
+   */
+  size: PropTypes.oneOf([16, 20]),
+};
+
+export default IconIndicator;
diff --git a/packages/styles/scss/_zone.scss b/packages/styles/scss/_zone.scss
index 22dbd05097f6..8f78b112fdc6 100644
--- a/packages/styles/scss/_zone.scss
+++ b/packages/styles/scss/_zone.scss
@@ -33,7 +33,7 @@ $-components: (
   button.$button-tokens,
   notification.$notification-tokens,
   tag.$tag-tokens,
-  icon-indicator.$icon-indicator-tokens
+  icon-indicator.$status-tokens
 );
 
 @each $name, $theme in $zones {
diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss
index 0877a1b896ec..a8f4126a8f09 100644
--- a/packages/styles/scss/components/_index.scss
+++ b/packages/styles/scss/components/_index.scss
@@ -38,6 +38,7 @@
 @use 'fluid-text-input';
 @use 'fluid-time-picker';
 @use 'form';
+@use 'icon-indicator';
 @use 'inline-loading';
 @use 'link';
 @use 'list';
diff --git a/packages/styles/scss/components/icon-indicator/_icon-indicator.scss b/packages/styles/scss/components/icon-indicator/_icon-indicator.scss
index 3826e9120f55..0459bee39aa9 100644
--- a/packages/styles/scss/components/icon-indicator/_icon-indicator.scss
+++ b/packages/styles/scss/components/icon-indicator/_icon-indicator.scss
@@ -9,6 +9,7 @@
 @use '../../type' as *;
 @use '../../config' as *;
 @use '../../spacing' as *;
+@use '../../colors' as *;
 @use './tokens' as *;
 
 /// icon-indicator styles
@@ -39,7 +40,7 @@
     fill: $status-orange;
 
     path:first-of-type {
-      fill: $status-accessibility-background;
+      fill: $black;
     }
   }
 
@@ -47,7 +48,7 @@
     fill: $status-yellow;
 
     path:first-of-type {
-      fill: $status-accessibility-background;
+      fill: $black;
     }
   }
 
diff --git a/packages/styles/scss/components/icon-indicator/_tokens.scss b/packages/styles/scss/components/icon-indicator/_tokens.scss
index f0917edb87f3..253b532172dd 100644
--- a/packages/styles/scss/components/icon-indicator/_tokens.scss
+++ b/packages/styles/scss/components/icon-indicator/_tokens.scss
@@ -175,29 +175,6 @@ $status-gray: (
   ),
 ) !default;
 
-// status-accessibility-background
-$status-accessibility-background: (
-  fallback: map.get(status.$status-accessibility-background, white-theme),
-  values: (
-    (
-      theme: themes.$white,
-      value: map.get(status.$status-accessibility-background, white-theme),
-    ),
-    (
-      theme: themes.$g10,
-      value: map.get(status.$status-accessibility-background, g-10),
-    ),
-    (
-      theme: themes.$g90,
-      value: map.get(status.$status-accessibility-background, g-90),
-    ),
-    (
-      theme: themes.$g100,
-      value: map.get(status.$status-accessibility-background, g-100),
-    ),
-  ),
-) !default;
-
 // Add to $status-tokens map
 $status-tokens: (
   status-red: $status-red,
@@ -207,7 +184,6 @@ $status-tokens: (
   status-blue: $status-blue,
   status-purple: $status-purple,
   status-gray: $status-gray,
-  status-accessibility-background: $status-accessibility-background,
 );
 
 // Generate CSS custom properties for each token
@@ -218,7 +194,3 @@ $status-green: component-tokens.get-var($status-green, 'status-green');
 $status-blue: component-tokens.get-var($status-blue, 'status-blue');
 $status-purple: component-tokens.get-var($status-purple, 'status-purple');
 $status-gray: component-tokens.get-var($status-gray, 'status-gray');
-$status-accessibility-background: component-tokens.get-var(
-  $status-accessibility-background,
-  'status-accessibility-background'
-);
diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js
index ce25421ff6a9..8a8e8a92ac97 100644
--- a/packages/themes/src/tokens/__tests__/metadata-test.js
+++ b/packages/themes/src/tokens/__tests__/metadata-test.js
@@ -1273,6 +1273,34 @@ test('metadata', () => {
           "name": "notification-action-tertiary-inverse-text-on-color-disabled",
           "type": "color",
         },
+        Object {
+          "name": "status-red",
+          "type": "color",
+        },
+        Object {
+          "name": "status-orange",
+          "type": "color",
+        },
+        Object {
+          "name": "status-yellow",
+          "type": "color",
+        },
+        Object {
+          "name": "status-purple",
+          "type": "color",
+        },
+        Object {
+          "name": "status-green",
+          "type": "color",
+        },
+        Object {
+          "name": "status-blue",
+          "type": "color",
+        },
+        Object {
+          "name": "status-gray",
+          "type": "color",
+        },
         Object {
           "name": "tag-background-red",
           "type": "color",
diff --git a/packages/themes/src/tokens/components.js b/packages/themes/src/tokens/components.js
index fa13aaba879b..6cb1549ef52b 100644
--- a/packages/themes/src/tokens/components.js
+++ b/packages/themes/src/tokens/components.js
@@ -104,6 +104,5 @@ export const status = TokenGroup.create({
     'status-green',
     'status-blue',
     'status-gray',
-    'status-accessibility-background',
   ],
 });
diff --git a/packages/web-components/src/components/icon-indicator/defs.ts b/packages/web-components/src/components/icon-indicator/defs.ts
index e5d57e3013a9..ea849791fa7c 100644
--- a/packages/web-components/src/components/icon-indicator/defs.ts
+++ b/packages/web-components/src/components/icon-indicator/defs.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export enum ICON_INDICATOR_TYPE {
+export enum ICON_INDICATOR_KIND {
   /**
    * Error
    */
diff --git a/packages/web-components/src/components/icon-indicator/docs/overview.mdx b/packages/web-components/src/components/icon-indicator/docs/overview.mdx
index d6870bba0a01..4314c34fed03 100644
--- a/packages/web-components/src/components/icon-indicator/docs/overview.mdx
+++ b/packages/web-components/src/components/icon-indicator/docs/overview.mdx
@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-icon-indicator--default'
+      variant: 'components-status-indicators-icon-indicator--default'
     },
   ]}
 />
diff --git a/packages/web-components/src/components/icon-indicator/icon-indicator.mdx b/packages/web-components/src/components/icon-indicator/icon-indicator.mdx
index 3dc74ad2f905..d54495321638 100644
--- a/packages/web-components/src/components/icon-indicator/icon-indicator.mdx
+++ b/packages/web-components/src/components/icon-indicator/icon-indicator.mdx
@@ -6,6 +6,10 @@ import * as IconIndicatorStories from './icon-indicator.stories';
 
 # Icon indicator
 
+The icon-indicator component is useful for communicating severity level
+information to users. The shapes and colors, communicate severity that enables
+users to quickly assess and identify status and respond accordingly.
+
 > 💡 Check our
 > [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/icon-indicator)
 > example implementation.
@@ -28,7 +32,7 @@ import '@carbon/web-components/es/components/icon-indicator/index.js';
 ### HTML
 
 ```html
-<cds-icon-indicator type="error" text="Error"></cds-icon-indicator>
+<cds-icon-indicator kind="error" text="Error"></cds-icon-indicator>
 ```
 
 ## `<cds-icon-indicator>` attributes and properties
diff --git a/packages/web-components/src/components/icon-indicator/icon-indicator.scss b/packages/web-components/src/components/icon-indicator/icon-indicator.scss
index 8c963932e382..deefcc9b4a0f 100644
--- a/packages/web-components/src/components/icon-indicator/icon-indicator.scss
+++ b/packages/web-components/src/components/icon-indicator/icon-indicator.scss
@@ -18,50 +18,50 @@ $css--plex: true !default;
   @extend .#{$prefix}--icon-indicator--20;
 }
 
-:host(#{$prefix}-icon-indicator[type='error']) svg {
+:host(#{$prefix}-icon-indicator[kind='error']) svg {
   @extend .#{$prefix}--icon-indicator--error;
 }
 
-:host(#{$prefix}-icon-indicator[type='caution-major']) svg {
+:host(#{$prefix}-icon-indicator[kind='caution-major']) svg {
   @extend .#{$prefix}--icon-indicator--caution-major;
 }
 
-:host(#{$prefix}-icon-indicator[type='caution-minor']) svg {
+:host(#{$prefix}-icon-indicator[kind='caution-minor']) svg {
   @extend .#{$prefix}--icon-indicator--caution-minor;
 }
 
-:host(#{$prefix}-icon-indicator[type='undefined']) svg {
+:host(#{$prefix}-icon-indicator[kind='undefined']) svg {
   @extend .#{$prefix}--icon-indicator--undefined;
 }
 
-:host(#{$prefix}-icon-indicator[type='succeeded']) svg {
+:host(#{$prefix}-icon-indicator[kind='succeeded']) svg {
   @extend .#{$prefix}--icon-indicator--succeeded;
 }
 
-:host(#{$prefix}-icon-indicator[type='normal']) svg {
+:host(#{$prefix}-icon-indicator[kind='normal']) svg {
   @extend .#{$prefix}--icon-indicator--normal;
 }
 
-:host(#{$prefix}-icon-indicator[type='in-progress']) svg {
+:host(#{$prefix}-icon-indicator[kind='in-progress']) svg {
   @extend .#{$prefix}--icon-indicator--in-progress;
 }
 
-:host(#{$prefix}-icon-indicator[type='incomplete']) svg {
+:host(#{$prefix}-icon-indicator[kind='incomplete']) svg {
   @extend .#{$prefix}--icon-indicator--incomplete;
 }
 
-:host(#{$prefix}-icon-indicator[type='not-started']) svg {
+:host(#{$prefix}-icon-indicator[kind='not-started']) svg {
   @extend .#{$prefix}--icon-indicator--not-started;
 }
 
-:host(#{$prefix}-icon-indicator[type='pending']) svg {
+:host(#{$prefix}-icon-indicator[kind='pending']) svg {
   @extend .#{$prefix}--icon-indicator--pending;
 }
 
-:host(#{$prefix}-icon-indicator[type='unknown']) svg {
+:host(#{$prefix}-icon-indicator[kind='unknown']) svg {
   @extend .#{$prefix}--icon-indicator--unknown;
 }
 
-:host(#{$prefix}-icon-indicator[type='information']) svg {
+:host(#{$prefix}-icon-indicator[kind='information']) svg {
   @extend .#{$prefix}--icon-indicator--information;
 }
diff --git a/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts b/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts
index 0e18c1b411f6..67be1b11023c 100644
--- a/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts
+++ b/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts
@@ -9,9 +9,9 @@
 
 import { html } from 'lit';
 import './index';
-import { ICON_INDICATOR_TYPE } from './defs';
+import { ICON_INDICATOR_KIND } from './defs';
 
-const types = [
+const kinds = [
   'error',
   'caution-major',
   'caution-minor',
@@ -28,15 +28,15 @@ const types = [
 
 export const Default = {
   render: () => html`
-    ${types.map(
-      (type) => html`
+    ${kinds.map(
+      (kind) => html`
         <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
           <cds-icon-indicator
-            type="${type}"
-            label="${type}"></cds-icon-indicator>
+            kind="${kind}"
+            label="${kind}"></cds-icon-indicator>
           <cds-icon-indicator
-            type="${type}"
-            label="${type}"
+            kind="${kind}"
+            label="${kind}"
             size=${20}></cds-icon-indicator>
         </div>
       `
@@ -45,8 +45,8 @@ export const Default = {
 };
 
 const defaultArgs = {
-  label: 'Label',
-  type: ICON_INDICATOR_TYPE.ERROR,
+  label: 'Custom label',
+  kind: ICON_INDICATOR_KIND.ERROR,
   size: 16,
 };
 
@@ -61,25 +61,25 @@ const controls = {
     control: 'text',
     description: 'Label next to the icon.',
   },
-  type: {
+  kind: {
     control: 'select',
-    description: 'Specify the type of the Icon Indicator.',
-    options: types,
+    description: 'Specify the kind of the Icon Indicator.',
+    options: kinds,
   },
 };
 
 export const Playground = {
   argTypes: controls,
   args: defaultArgs,
-  render: ({ label, size, type }) =>
+  render: ({ label, size, kind }) =>
     html` <cds-icon-indicator
-      type="${type}"
+      kind="${kind}"
       size="${size}"
       label="${label}"></cds-icon-indicator>`,
 };
 
 const meta = {
-  title: 'Components/Icon Indicator',
+  title: 'Components/Status Indicators/Icon Indicator',
 };
 
 export default meta;
diff --git a/packages/web-components/src/components/icon-indicator/icon-indicator.ts b/packages/web-components/src/components/icon-indicator/icon-indicator.ts
index 207ec5146812..6c3070efbe3a 100644
--- a/packages/web-components/src/components/icon-indicator/icon-indicator.ts
+++ b/packages/web-components/src/components/icon-indicator/icon-indicator.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import { ICON_INDICATOR_TYPE } from './defs';
+import { ICON_INDICATOR_KIND } from './defs';
 import ErrorFilled16 from '@carbon/icons/lib/error--filled/16.js';
 import ErrorFilled20 from '@carbon/icons/lib/error--filled/20.js';
 import WarningAltInvertedFilled16 from '@carbon/icons/lib/warning--alt-inverted--filled/16.js';
@@ -29,63 +29,63 @@ import Incomplete16 from '@carbon/icons/lib/incomplete/16.js';
 import Incomplete20 from '@carbon/icons/lib/incomplete/20.js';
 import CircleDash16 from '@carbon/icons/lib/circle-dash/16.js';
 import CircleDash20 from '@carbon/icons/lib/circle-dash/20.js';
-import Pending16 from '@carbon/icons/lib/pending/16.js';
-import Pending20 from '@carbon/icons/lib/pending/20.js';
+import Pending16 from '@carbon/icons/lib/pending--filled/16.js';
+import Pending20 from '@carbon/icons/lib/pending--filled/20.js';
 import UnknownFilled16 from '@carbon/icons/lib/unknown--filled/16.js';
 import UnknownFilled20 from '@carbon/icons/lib/unknown--filled/20.js';
 import WarningSquareFilled16 from '@carbon/icons/lib/warning-square--filled/16.js';
 import WarningSquareFilled20 from '@carbon/icons/lib/warning-square--filled/20.js';
-export { ICON_INDICATOR_TYPE };
+export { ICON_INDICATOR_KIND };
 
 import styles from './icon-indicator.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 const iconMap = {
-  [ICON_INDICATOR_TYPE.ERROR]: {
+  [ICON_INDICATOR_KIND.ERROR]: {
     16: ErrorFilled16,
     20: ErrorFilled20,
   },
-  [ICON_INDICATOR_TYPE['CAUTION-MAJOR']]: {
+  [ICON_INDICATOR_KIND['CAUTION-MAJOR']]: {
     16: WarningAltInvertedFilled16,
     20: WarningAltInvertedFilled20,
   },
-  [ICON_INDICATOR_TYPE['CAUTION-MINOR']]: {
+  [ICON_INDICATOR_KIND['CAUTION-MINOR']]: {
     16: WarningAltFilled16,
     20: WarningAltFilled20,
   },
-  [ICON_INDICATOR_TYPE.UNDEFINED]: {
+  [ICON_INDICATOR_KIND.UNDEFINED]: {
     16: UndefinedFilled16,
     20: UndefinedFilled20,
   },
-  [ICON_INDICATOR_TYPE.SUCCEEDED]: {
+  [ICON_INDICATOR_KIND.SUCCEEDED]: {
     16: CheckmarkFilled16,
     20: CheckmarkFilled20,
   },
-  [ICON_INDICATOR_TYPE.NORMAL]: {
+  [ICON_INDICATOR_KIND.NORMAL]: {
     16: CheckmarkOutline16,
     20: CheckmarkOutline20,
   },
-  [ICON_INDICATOR_TYPE['IN-PROGRESS']]: {
+  [ICON_INDICATOR_KIND['IN-PROGRESS']]: {
     16: InProgress16,
     20: InProgress20,
   },
-  [ICON_INDICATOR_TYPE.INCOMPLETE]: {
+  [ICON_INDICATOR_KIND.INCOMPLETE]: {
     16: Incomplete16,
     20: Incomplete20,
   },
-  [ICON_INDICATOR_TYPE['NOT-STARTED']]: {
+  [ICON_INDICATOR_KIND['NOT-STARTED']]: {
     16: CircleDash16,
     20: CircleDash20,
   },
-  [ICON_INDICATOR_TYPE.PENDING]: {
+  [ICON_INDICATOR_KIND.PENDING]: {
     16: Pending16,
     20: Pending20,
   },
-  [ICON_INDICATOR_TYPE.UNKNOWN]: {
+  [ICON_INDICATOR_KIND.UNKNOWN]: {
     16: UnknownFilled16,
     20: UnknownFilled20,
   },
-  [ICON_INDICATOR_TYPE.INFORMATION]: {
+  [ICON_INDICATOR_KIND.INFORMATION]: {
     16: WarningSquareFilled16,
     20: WarningSquareFilled20,
   },
@@ -111,13 +111,13 @@ class CDSIconIndicator extends LitElement {
   label!: string;
 
   /**
-   * Icon Indicator type
+   * Icon Indicator kind
    */
   @property()
-  type!: ICON_INDICATOR_TYPE;
+  kind!: ICON_INDICATOR_KIND;
 
   render() {
-    const icon = iconMap[this.type]?.[this.size];
+    const icon = iconMap[this.kind]?.[this.size];
     return html`${icon()}${this.label}`;
   }
 

From 4fc15b68284200551771ca93cc801ba1654cfb6f Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Tue, 3 Dec 2024 12:31:13 -0800
Subject: [PATCH 04/12] feat(data-table): dyanmic with icon-indicators

---
 .../DataTable-dynamic-content.stories.js      | 60 ++++++++++++++++++-
 .../stories/data-table-dynamic.stories.ts     | 24 ++++----
 2 files changed, 71 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
index 6413dca871c3..05492e22cf0d 100644
--- a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
+++ b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
@@ -31,7 +31,65 @@ import DataTable, {
   TableToolbarSearch,
   TableToolbarMenu,
 } from '../..';
-import { batchActionClick, rows, headers } from '../shared';
+import { batchActionClick, headers } from '../shared';
+import IconIndicator from '../../../IconIndicator';
+
+const rows = [
+  {
+    id: 'a',
+    name: 'Load Balancer 3',
+    protocol: 'HTTP',
+    port: 3000,
+    rule: 'Round robin',
+    attached_groups: 'Kevin’s VM Groups',
+    status: <IconIndicator kind="error" label="Error" />,
+  },
+  {
+    id: 'b',
+    name: 'Load Balancer 1',
+    protocol: 'HTTP',
+    port: 443,
+    rule: 'Round robin',
+    attached_groups: 'Maureen’s VM Groups',
+    status: <IconIndicator kind="in-progress" label="In progress" />,
+  },
+  {
+    id: 'c',
+    name: 'Load Balancer 2',
+    protocol: 'HTTP',
+    port: 80,
+    rule: 'DNS delegation',
+    attached_groups: 'Andrew’s VM Groups',
+    status: <IconIndicator kind="succeeded" label="Succeeded" />,
+  },
+  {
+    id: 'd',
+    name: 'Load Balancer 6',
+    protocol: 'HTTP',
+    port: 3000,
+    rule: 'Round robin',
+    attached_groups: 'Marc’s VM Groups',
+    status: <IconIndicator kind="error" label="Error" />,
+  },
+  {
+    id: 'e',
+    name: 'Load Balancer 4',
+    protocol: 'HTTP',
+    port: 443,
+    rule: 'Round robin',
+    attached_groups: 'Mel’s VM Groups',
+    status: <IconIndicator kind="in-progress" label="In progress" />,
+  },
+  {
+    id: 'f',
+    name: 'Load Balancer 5',
+    protocol: 'HTTP',
+    port: 80,
+    rule: 'DNS delegation',
+    attached_groups: 'Ronja’s VM Groups',
+    status: <IconIndicator kind="succeeded" label="Succeeded" />,
+  },
+];
 
 export default {
   title: 'Components/DataTable/Dynamic',
diff --git a/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts b/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts
index 2283189f8b28..be884137f087 100644
--- a/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts
+++ b/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts
@@ -188,7 +188,7 @@ export const Default = {
           <cds-table-cell>Round robin</cds-table-cell>
           <cds-table-cell>Kevin's VM Groups</cds-table-cell>
           <cds-table-cell>
-            <cds-icon-indicator type="error" label="Error"></cds-icon-indicator>
+            <cds-icon-indicator kind="error" label="Error"></cds-icon-indicator>
           </cds-table-cell>
         </cds-table-row>
         <cds-table-row selection-name="1">
@@ -199,7 +199,7 @@ export const Default = {
           <cds-table-cell>Maureen's VM Groups</cds-table-cell>
           <cds-table-cell
             ><cds-icon-indicator
-              type="succeeded"
+              kind="succeeded"
               label="Succeeded"></cds-icon-indicator
           ></cds-table-cell>
         </cds-table-row>
@@ -211,7 +211,7 @@ export const Default = {
           <cds-table-cell>Andrew's VM Groups</cds-table-cell>
           <cds-table-cell
             ><cds-icon-indicator
-              type="in-progress"
+              kind="in-progress"
               label="in-progress"></cds-icon-indicator
           ></cds-table-cell>
         </cds-table-row>
@@ -222,7 +222,7 @@ export const Default = {
           <cds-table-cell>Round robin</cds-table-cell>
           <cds-table-cell>Marc's VM Groups</cds-table-cell>
           <cds-table-cell
-            ><cds-icon-indicator type="error" label="Error"></cds-icon-indicator
+            ><cds-icon-indicator kind="error" label="Error"></cds-icon-indicator
           ></cds-table-cell>
         </cds-table-row>
         <cds-table-row selection-name="4">
@@ -233,7 +233,7 @@ export const Default = {
           <cds-table-cell>Mel's VM Groups</cds-table-cell>
           <cds-table-cell
             ><cds-icon-indicator
-              type="succeeded"
+              kind="succeeded"
               label="Succeeded"></cds-icon-indicator
           ></cds-table-cell>
         </cds-table-row>
@@ -245,7 +245,7 @@ export const Default = {
           <cds-table-cell>Ronja's VM Groups</cds-table-cell>
           <cds-table-cell
             ><cds-icon-indicator
-              type="in-progress"
+              kind="in-progress"
               label="in-progress"></cds-icon-indicator
           ></cds-table-cell>
         </cds-table-row>
@@ -325,7 +325,7 @@ export const Playground = {
           <cds-table-cell>Round robin</cds-table-cell>
           <cds-table-cell>Kevin's VM Groups</cds-table-cell>
           <cds-table-cell
-            ><cds-icon-indicator type="error" label="Error"></cds-icon-indicator
+            ><cds-icon-indicator kind="error" label="Error"></cds-icon-indicator
           ></cds-table-cell>
         </cds-table-row>
         <cds-table-expanded-row>
@@ -340,7 +340,7 @@ export const Playground = {
           <cds-table-cell>Maureen's VM Groups</cds-table-cell>
           <cds-table-cell
             ><cds-icon-indicator
-              type="succeeded"
+              kind="succeeded"
               label="Succeeded"></cds-icon-indicator
           ></cds-table-cell>
         </cds-table-row>
@@ -356,7 +356,7 @@ export const Playground = {
           <cds-table-cell>Andrew's VM Groups</cds-table-cell>
           <cds-table-cell
             ><cds-icon-indicator
-              type="in-progress"
+              kind="in-progress"
               label="in-progress"></cds-icon-indicator
           ></cds-table-cell>
         </cds-table-row>
@@ -371,7 +371,7 @@ export const Playground = {
           <cds-table-cell>Round robin</cds-table-cell>
           <cds-table-cell>Marc's VM Groups</cds-table-cell>
           <cds-table-cell
-            ><cds-icon-indicator type="error" label="Error"></cds-icon-indicator
+            ><cds-icon-indicator kind="error" label="Error"></cds-icon-indicator
           ></cds-table-cell>
         </cds-table-row>
         <cds-table-expanded-row>
@@ -386,7 +386,7 @@ export const Playground = {
           <cds-table-cell>Mel's VM Groups</cds-table-cell>
           <cds-table-cell
             ><cds-icon-indicator
-              type="succeeded"
+              kind="succeeded"
               label="Succeeded"></cds-icon-indicator
           ></cds-table-cell>
         </cds-table-row>
@@ -402,7 +402,7 @@ export const Playground = {
           <cds-table-cell>Ronja's VM Groups</cds-table-cell>
           <cds-table-cell
             ><cds-icon-indicator
-              type="in-progress"
+              kind="in-progress"
               label="in-progress"></cds-icon-indicator
           ></cds-table-cell>
         </cds-table-row>

From 44633855a82567522a0fcf70e46e5f003577456a Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Tue, 17 Dec 2024 09:09:16 -0800
Subject: [PATCH 05/12] fix(icon-indicator): review comment updates

---
 .../IconIndicator-test.avt.e2e.js             |  2 +-
 .../IconIndicator/IconIndicator-test.e2e.js   |  2 +-
 examples/custom-theme/src/App.jsx             |  3 ++-
 examples/custom-theme/src/index.scss          |  3 +++
 .../IconIndicator/IconIndicator.stories.js    | 23 +++++++++++-----
 .../__tests__/IconIndicator-test.js           | 14 +++++++---
 .../src/components/IconIndicator/index.tsx    | 26 +++++++++++--------
 packages/react/src/index.js                   |  2 ++
 packages/react/src/index.ts                   |  1 +
 .../icon-indicator/icon-indicator.stories.ts  | 15 ++++++-----
 10 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/e2e/components/IconIndicator/IconIndicator-test.avt.e2e.js b/e2e/components/IconIndicator/IconIndicator-test.avt.e2e.js
index 72b48b56de48..f8a2af15707b 100644
--- a/e2e/components/IconIndicator/IconIndicator-test.avt.e2e.js
+++ b/e2e/components/IconIndicator/IconIndicator-test.avt.e2e.js
@@ -13,7 +13,7 @@ test.describe('@avt IconIndicator', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'IconIndicator',
-      id: 'components-statusindicators-iconindicator--default',
+      id: 'experimental-statusindicators-unstable-iconindicator--default',
       globals: {
         theme: 'white',
       },
diff --git a/e2e/components/IconIndicator/IconIndicator-test.e2e.js b/e2e/components/IconIndicator/IconIndicator-test.e2e.js
index bf4b2ad4974f..e390bf8f781a 100644
--- a/e2e/components/IconIndicator/IconIndicator-test.e2e.js
+++ b/e2e/components/IconIndicator/IconIndicator-test.e2e.js
@@ -16,7 +16,7 @@ test.describe('IconIndicator', () => {
       test('icon indicator @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'IconIndicator',
-          id: 'components-statusindicators-iconindicator--default',
+          id: 'experimental-statusindicators-unstable-iconindicator--default',
           theme,
         });
       });
diff --git a/examples/custom-theme/src/App.jsx b/examples/custom-theme/src/App.jsx
index 8b7af2fb2149..26fd351a03b0 100644
--- a/examples/custom-theme/src/App.jsx
+++ b/examples/custom-theme/src/App.jsx
@@ -1,10 +1,11 @@
-import { Button } from '@carbon/react';
+import { Button, IconIndicator } from '@carbon/react';
 import React from 'react';
 
 export default function App() {
   return (
     <div>
       <Button>Button with custom theme</Button>
+      <IconIndicator kind="error" label="Custom status red"></IconIndicator>
       <div className="background color">$background</div>
       <div className="background-active color">$background-active</div>
       <div className="background-inverse color">$background-inverse</div>
diff --git a/examples/custom-theme/src/index.scss b/examples/custom-theme/src/index.scss
index cb948032c55e..2a1c7fb6e122 100644
--- a/examples/custom-theme/src/index.scss
+++ b/examples/custom-theme/src/index.scss
@@ -17,6 +17,9 @@
 @use '@carbon/react/scss/components/button/tokens' as button-tokens with (
   $button-primary: #3f51b5
 );
+@use '@carbon/react/scss/components/icon-indicator/tokens' as status-tokens with (
+  $status-red: #b53f3f
+);
 @use '@carbon/react';
 
 :root {
diff --git a/packages/react/src/components/IconIndicator/IconIndicator.stories.js b/packages/react/src/components/IconIndicator/IconIndicator.stories.js
index 04a605c2e340..427144784de0 100644
--- a/packages/react/src/components/IconIndicator/IconIndicator.stories.js
+++ b/packages/react/src/components/IconIndicator/IconIndicator.stories.js
@@ -11,7 +11,7 @@ import { IconIndicatorKinds } from './index';
 import mdx from './IconIndicator.mdx';
 
 export default {
-  title: 'Components/StatusIndicators/IconIndicator',
+  title: 'Experimental/StatusIndicators/unstable__IconIndicator',
   component: IconIndicator,
   parameters: {
     docs: {
@@ -21,12 +21,23 @@ export default {
 };
 
 export const Default = () => {
-  return IconIndicatorKinds.map((type) => (
-    <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
-      <IconIndicator kind={type} label={type} />
-      <IconIndicator kind={type} label={type} size={20} />
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'auto auto',
+        columnGap: '1rem',
+        rowGap: '0.5rem',
+        width: 'fit-content',
+      }}>
+      {IconIndicatorKinds.map((type) => (
+        <>
+          <IconIndicator kind={type} label={type} />
+          <IconIndicator kind={type} label={type} size={20} />
+        </>
+      ))}
     </div>
-  ));
+  );
 };
 
 const PlaygroundStory = (props) => {
diff --git a/packages/react/src/components/IconIndicator/__tests__/IconIndicator-test.js b/packages/react/src/components/IconIndicator/__tests__/IconIndicator-test.js
index bbe1c6c31be1..ca1bf9cc0ffb 100644
--- a/packages/react/src/components/IconIndicator/__tests__/IconIndicator-test.js
+++ b/packages/react/src/components/IconIndicator/__tests__/IconIndicator-test.js
@@ -27,10 +27,18 @@ describe('IconIndicator', () => {
     );
   });
 
-  it('should pass in an extra className when one is given', () => {
-    render(
+  it('should support a custom class name on the outermost element', () => {
+    const { container } = render(
       <IconIndicator kind="error" label="label" className="custom-class" />
     );
-    expect(screen.getByText('label')).toHaveClass('custom-class');
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should support a ref on the outermost element', () => {
+    const ref = jest.fn();
+    const { container } = render(
+      <IconIndicator kind="error" label="label" ref={ref} />
+    );
+    expect(ref).toHaveBeenCalledWith(container.firstChild);
   });
 });
diff --git a/packages/react/src/components/IconIndicator/index.tsx b/packages/react/src/components/IconIndicator/index.tsx
index f6d70fe061aa..3aaf30d6d89f 100644
--- a/packages/react/src/components/IconIndicator/index.tsx
+++ b/packages/react/src/components/IconIndicator/index.tsx
@@ -73,17 +73,21 @@ interface IconIndicatorProps {
   label: string;
 
   /**
-   * Specify the size of the Icon Indicator. Currently supports either 16 (default) or 20 sizes.
+   * Specify the size of the Icon Indicator. Defaults to 16.
    */
-  size?: number;
+  size?: 16 | 20;
 }
 
-const IconIndicator = ({
-  className: customClassName,
-  kind,
-  label,
-  size = 16,
-}: IconIndicatorProps) => {
+export const IconIndicator = React.forwardRef(function IconIndicatorContent(
+  {
+    className: customClassName,
+    kind,
+    label,
+    size = 16,
+    ...rest
+  }: IconIndicatorProps,
+  ref: React.Ref<HTMLDivElement>
+) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--icon-indicator`, customClassName, {
     [`${prefix}--icon-indicator--20`]: size == 20,
@@ -94,7 +98,7 @@ const IconIndicator = ({
     return null;
   }
   return (
-    <div className={classNames}>
+    <div className={classNames} ref={ref}>
       <IconForKind
         size={size}
         className={`${prefix}--icon-indicator--${kind}`}
@@ -102,7 +106,7 @@ const IconIndicator = ({
       {label}
     </div>
   );
-};
+});
 
 IconIndicator.propTypes = {
   /**
@@ -121,7 +125,7 @@ IconIndicator.propTypes = {
   label: PropTypes.string.isRequired,
 
   /**
-   * Specify the size of the Icon Indicator. Currently supports either 16 (default) or 20  sizes
+   * Specify the size of the Icon Indicator. Defaults to 16.
    */
   size: PropTypes.oneOf([16, 20]),
 };
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index 8700ebd8142e..1319bc6b99df 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -335,3 +335,5 @@ export {
   ChatButton as unstable__ChatButton,
   ChatButtonSkeleton as unstable__ChatButtonSkeleton,
 } from './components/ChatButton';
+
+export { IconIndicator as unstable__IconIndicator } from './components/IconIndicator';
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 7adc10746533..b60be8450aad 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -189,3 +189,4 @@ export * from './components/Tooltip/DefinitionTooltip';
 export * from './components/Theme';
 export * from './internal/usePrefix';
 export { useIdPrefix } from './internal/useIdPrefix';
+export { IconIndicator as unstable__IconIndicator } from './components/IconIndicator';
diff --git a/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts b/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts
index 67be1b11023c..df496c7bfe27 100644
--- a/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts
+++ b/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts
@@ -28,9 +28,10 @@ const kinds = [
 
 export const Default = {
   render: () => html`
-    ${kinds.map(
-      (kind) => html`
-        <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
+    <div
+      style="display: grid; grid-template-columns: 'auto auto'; column-gap: 1rem; row-gap: .5rem; width: 'fit-content'">
+      ${kinds.map(
+        (kind) => html`
           <cds-icon-indicator
             kind="${kind}"
             label="${kind}"></cds-icon-indicator>
@@ -38,9 +39,9 @@ export const Default = {
             kind="${kind}"
             label="${kind}"
             size=${20}></cds-icon-indicator>
-        </div>
-      `
-    )}
+        `
+      )}
+    </div>
   `,
 };
 
@@ -79,7 +80,7 @@ export const Playground = {
 };
 
 const meta = {
-  title: 'Components/Status Indicators/Icon Indicator',
+  title: 'Experimental/Status Indicators/Icon Indicator',
 };
 
 export default meta;

From 1231adcc8e7148ee8a185121444c7e309b82c9d8 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Tue, 17 Dec 2024 09:23:07 -0800
Subject: [PATCH 06/12] fix(icon-indicator): web-components

---
 .../src/components/icon-indicator/icon-indicator.stories.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts b/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts
index df496c7bfe27..080e204b1911 100644
--- a/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts
+++ b/packages/web-components/src/components/icon-indicator/icon-indicator.stories.ts
@@ -29,7 +29,7 @@ const kinds = [
 export const Default = {
   render: () => html`
     <div
-      style="display: grid; grid-template-columns: 'auto auto'; column-gap: 1rem; row-gap: .5rem; width: 'fit-content'">
+      style="display: grid; grid-template-columns: auto auto; column-gap: 1rem; row-gap: .5rem; width: fit-content">
       ${kinds.map(
         (kind) => html`
           <cds-icon-indicator

From 78b1cf14c04d1c05659f79b09a397bee26c54970 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Wed, 18 Dec 2024 09:41:24 -0800
Subject: [PATCH 07/12] chore(update): missing imports and unstable mdx

---
 packages/react/src/__tests__/index-test.js                    | 1 +
 packages/react/src/components/IconIndicator/IconIndicator.mdx | 2 +-
 packages/styles/files.js                                      | 2 ++
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
index 3fc8a6767449..38d85dbf7bed 100644
--- a/packages/react/src/__tests__/index-test.js
+++ b/packages/react/src/__tests__/index-test.js
@@ -283,6 +283,7 @@ describe('Carbon Components React', () => {
         "unstable__FluidTimePicker",
         "unstable__FluidTimePickerSelect",
         "unstable__FluidTimePickerSkeleton",
+        "unstable__IconIndicator",
         "unstable__Slug",
         "unstable__SlugActions",
         "unstable__SlugContent",
diff --git a/packages/react/src/components/IconIndicator/IconIndicator.mdx b/packages/react/src/components/IconIndicator/IconIndicator.mdx
index 95aba1d8e05a..d1e998c34fa9 100644
--- a/packages/react/src/components/IconIndicator/IconIndicator.mdx
+++ b/packages/react/src/components/IconIndicator/IconIndicator.mdx
@@ -24,7 +24,7 @@ information to users. The shapes and colors, communicate severity that enables
 users to quickly assess and identify status and respond accordingly.
 
 ```jsx
-import { IconIndicator } from '@carbon/react';
+import { IconIndicator as unstable__IconIndicator } from '@carbon/react';
 
 function ExampleComponent() {
   return (
diff --git a/packages/styles/files.js b/packages/styles/files.js
index b31759d83e32..d1cd1c82e866 100644
--- a/packages/styles/files.js
+++ b/packages/styles/files.js
@@ -100,6 +100,8 @@ const files = [
   'scss/components/fluid-text-input/_index.scss',
   'scss/components/fluid-time-picker/_fluid-time-picker.scss',
   'scss/components/fluid-time-picker/_index.scss',
+  'scss/components/icon-indicator/_icon-indicator.scss',
+  'scss/components/icon-indicator/_index.scss',
   'scss/components/inline-loading/_index.scss',
   'scss/components/inline-loading/_inline-loading.scss',
   'scss/components/link/_index.scss',

From 261b9f3884adc64399c3c5c477b02ee6ecbfdffb Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Wed, 18 Dec 2024 13:13:38 -0500
Subject: [PATCH 08/12] chore: generated style files

---
 .../scss/components/icon-indicator/_icon-indicator.scss  | 9 +++++++++
 .../scss/components/icon-indicator/_index.scss           | 9 +++++++++
 .../scss/components/icon-indicator/_icon-indicator.scss  | 9 +++++++++
 .../scss/components/icon-indicator/_index.scss           | 9 +++++++++
 .../scss/components/icon-indicator/_icon-indicator.scss  | 9 +++++++++
 .../react/scss/components/icon-indicator/_index.scss     | 9 +++++++++
 6 files changed, 54 insertions(+)
 create mode 100644 packages/carbon-components-react/scss/components/icon-indicator/_icon-indicator.scss
 create mode 100644 packages/carbon-components-react/scss/components/icon-indicator/_index.scss
 create mode 100644 packages/carbon-components/scss/components/icon-indicator/_icon-indicator.scss
 create mode 100644 packages/carbon-components/scss/components/icon-indicator/_index.scss
 create mode 100644 packages/react/scss/components/icon-indicator/_icon-indicator.scss
 create mode 100644 packages/react/scss/components/icon-indicator/_index.scss

diff --git a/packages/carbon-components-react/scss/components/icon-indicator/_icon-indicator.scss b/packages/carbon-components-react/scss/components/icon-indicator/_icon-indicator.scss
new file mode 100644
index 000000000000..da5dd0bc1454
--- /dev/null
+++ b/packages/carbon-components-react/scss/components/icon-indicator/_icon-indicator.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator/icon-indicator';
diff --git a/packages/carbon-components-react/scss/components/icon-indicator/_index.scss b/packages/carbon-components-react/scss/components/icon-indicator/_index.scss
new file mode 100644
index 000000000000..25c1fa65bc50
--- /dev/null
+++ b/packages/carbon-components-react/scss/components/icon-indicator/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator';
diff --git a/packages/carbon-components/scss/components/icon-indicator/_icon-indicator.scss b/packages/carbon-components/scss/components/icon-indicator/_icon-indicator.scss
new file mode 100644
index 000000000000..f615b318b076
--- /dev/null
+++ b/packages/carbon-components/scss/components/icon-indicator/_icon-indicator.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator/icon-indicator';
diff --git a/packages/carbon-components/scss/components/icon-indicator/_index.scss b/packages/carbon-components/scss/components/icon-indicator/_index.scss
new file mode 100644
index 000000000000..64849481615a
--- /dev/null
+++ b/packages/carbon-components/scss/components/icon-indicator/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator';
diff --git a/packages/react/scss/components/icon-indicator/_icon-indicator.scss b/packages/react/scss/components/icon-indicator/_icon-indicator.scss
new file mode 100644
index 000000000000..8fe9070c9ee5
--- /dev/null
+++ b/packages/react/scss/components/icon-indicator/_icon-indicator.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator/icon-indicator';
diff --git a/packages/react/scss/components/icon-indicator/_index.scss b/packages/react/scss/components/icon-indicator/_index.scss
new file mode 100644
index 000000000000..aebc92cede58
--- /dev/null
+++ b/packages/react/scss/components/icon-indicator/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator';

From 15db0ad129b375995990ccc3fabcdaec779e637d Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Wed, 18 Dec 2024 10:23:36 -0800
Subject: [PATCH 09/12] fix(custom-theme): remove for now

---
 examples/custom-theme/src/App.jsx    | 3 +--
 examples/custom-theme/src/index.scss | 3 ---
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/examples/custom-theme/src/App.jsx b/examples/custom-theme/src/App.jsx
index 26fd351a03b0..8b7af2fb2149 100644
--- a/examples/custom-theme/src/App.jsx
+++ b/examples/custom-theme/src/App.jsx
@@ -1,11 +1,10 @@
-import { Button, IconIndicator } from '@carbon/react';
+import { Button } from '@carbon/react';
 import React from 'react';
 
 export default function App() {
   return (
     <div>
       <Button>Button with custom theme</Button>
-      <IconIndicator kind="error" label="Custom status red"></IconIndicator>
       <div className="background color">$background</div>
       <div className="background-active color">$background-active</div>
       <div className="background-inverse color">$background-inverse</div>
diff --git a/examples/custom-theme/src/index.scss b/examples/custom-theme/src/index.scss
index 2a1c7fb6e122..cb948032c55e 100644
--- a/examples/custom-theme/src/index.scss
+++ b/examples/custom-theme/src/index.scss
@@ -17,9 +17,6 @@
 @use '@carbon/react/scss/components/button/tokens' as button-tokens with (
   $button-primary: #3f51b5
 );
-@use '@carbon/react/scss/components/icon-indicator/tokens' as status-tokens with (
-  $status-red: #b53f3f
-);
 @use '@carbon/react';
 
 :root {

From 00d56f6777ecfc5edddf903179d5d7b7c585a6c0 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Wed, 18 Dec 2024 10:37:30 -0800
Subject: [PATCH 10/12] fix(snapshot): add styles

---
 .../styles/__tests__/__snapshots__/styles-test.js.snap | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/styles/__tests__/__snapshots__/styles-test.js.snap b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
index ef00ac6812af..dcba62e42ef3 100644
--- a/packages/styles/__tests__/__snapshots__/styles-test.js.snap
+++ b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
@@ -407,6 +407,16 @@ Array [
     "importPath": "@carbon/styles/scss/components/fluid-time-picker",
     "relativePath": "scss/components/fluid-time-picker",
   },
+  Object {
+    "filepath": "scss/components/icon-indicator/_icon-indicator.scss",
+    "importPath": "@carbon/styles/scss/components/icon-indicator/icon-indicator",
+    "relativePath": "scss/components/icon-indicator/icon-indicator",
+  },
+  Object {
+    "filepath": "scss/components/icon-indicator/_index.scss",
+    "importPath": "@carbon/styles/scss/components/icon-indicator",
+    "relativePath": "scss/components/icon-indicator",
+  },
   Object {
     "filepath": "scss/components/inline-loading/_index.scss",
     "importPath": "@carbon/styles/scss/components/inline-loading",

From e03891aa107dd7f1a0a33002ade680f795c0c450 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Thu, 19 Dec 2024 11:14:13 -0800
Subject: [PATCH 11/12] chore(update): api

---
 .../__snapshots__/PublicAPI-test.js.snap      | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 123c4036d672..814cf1137877 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -10964,6 +10964,48 @@ Map {
       },
     },
   },
+  "unstable__IconIndicator" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "kind": Object {
+        "args": Array [
+          Array [
+            "error",
+            "caution-major",
+            "caution-minor",
+            "undefined",
+            "succeeded",
+            "normal",
+            "in-progress",
+            "incomplete",
+            "not-started",
+            "pending",
+            "unknown",
+            "information",
+          ],
+        ],
+        "isRequired": true,
+        "type": "oneOf",
+      },
+      "label": Object {
+        "isRequired": true,
+        "type": "string",
+      },
+      "size": Object {
+        "args": Array [
+          Array [
+            16,
+            20,
+          ],
+        ],
+        "type": "oneOf",
+      },
+    },
+    "render": [Function],
+  },
   "unstable__Slug" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {

From bff899b7ee61b9f4d06367ad56e6d8a8e2f8370e Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Thu, 19 Dec 2024 12:50:14 -0800
Subject: [PATCH 12/12] fix(icon-indicator): add wc export

---
 packages/web-components/src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
index 7d8135fd4c64..c384fd2a5746 100644
--- a/packages/web-components/src/index.ts
+++ b/packages/web-components/src/index.ts
@@ -55,6 +55,7 @@ export { default as CDSDropdownSkeleton } from './components/dropdown/dropdown-s
 export { default as CDSFormItem } from './components/form/form-item';
 export { default as CDSFormGroup } from './components/form-group/form-group';
 export { default as CDSIconButton } from './components/icon-button/icon-button';
+export { default as CDSIconIndicator } from './components/icon-indicator/icon-indicator';
 export { default as CDSTextInput } from './components/text-input/text-input';
 export { default as CDSTextInputSkeleton } from './components/text-input/text-input-skeleton';
 export { default as CDSInlineLoading } from './components/inline-loading/inline-loading';