From 4d19de70543c36406bfbaa9e47ee2a6af6774b8c Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Tue, 23 Sep 2025 16:51:24 +0100
Subject: [PATCH 01/18] basic implementation of
 `<ShwCarbonizationComparisonGrid>`

---
 .../page-components/badge/index.gts           |  2 +
 .../badge/sub-sections/carbonization.gts      | 46 +++++++++++++++++
 .../carbonization/comparison-grid/index.gts   | 38 ++++++++++++++
 .../carbonization/comparison-grid/item.gts    | 51 +++++++++++++++++++
 showcase/app/components/shw/yield.gts         | 18 +++++++
 showcase/app/styles/app.scss                  |  1 +
 .../carbonization/comparison-grid.scss        | 43 ++++++++++++++++
 7 files changed, 199 insertions(+)
 create mode 100644 showcase/app/components/page-components/badge/sub-sections/carbonization.gts
 create mode 100644 showcase/app/components/shw/carbonization/comparison-grid/index.gts
 create mode 100644 showcase/app/components/shw/carbonization/comparison-grid/item.gts
 create mode 100644 showcase/app/components/shw/yield.gts
 create mode 100644 showcase/app/styles/showcase-components/carbonization/comparison-grid.scss

diff --git a/showcase/app/components/page-components/badge/index.gts b/showcase/app/components/page-components/badge/index.gts
index 532b10f63e2..771bdabc803 100644
--- a/showcase/app/components/page-components/badge/index.gts
+++ b/showcase/app/components/page-components/badge/index.gts
@@ -11,6 +11,7 @@ import ShwTextH1 from 'showcase/components/shw/text/h1';
 import SubSectionContainers from 'showcase/components/page-components/badge/sub-sections/containers';
 import SubSectionContent from 'showcase/components/page-components/badge/sub-sections/content';
 import SubSectionVariants from 'showcase/components/page-components/badge/sub-sections/variants';
+import SubSectionCarbonization from 'showcase/components/page-components/badge/sub-sections/carbonization';
 
 const BadgeIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Badge Component"}}
@@ -21,6 +22,7 @@ const BadgeIndex: TemplateOnlyComponent = <template>
     <SubSectionContent />
     <SubSectionVariants />
     <SubSectionContainers />
+    <SubSectionCarbonization />
   </section>
 </template>;
 
diff --git a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
new file mode 100644
index 00000000000..3b1da3f33dc
--- /dev/null
+++ b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwDivider from 'showcase/components/shw/divider';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+const SubSectionCarbonization: TemplateOnlyComponent = <template>
+  <ShwDivider />
+  <ShwDivider />
+
+  <ShwTextH2>Carbonization</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid @label="grid label as argument" as |CG|>
+    <CG.Item @area="hds" class="test #1" @label="at-label #1">
+      CG.Item Content #1
+    </CG.Item>
+    <CG.Item @area="cds-g90" class="test #2">
+      CG.Item Content #2
+    </CG.Item>
+    <CG.Item @area="wc-g10" class="test #3" as |CGI|>
+      <CGI.Label>cgi-label #3</CGI.Label>
+      CG.Item Content #3
+    </CG.Item>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwCarbonizationComparisonGrid as |CG|>
+    <CG.Label>Yielded label</CG.Label>
+    <CG.Item @area="hds" class="test #1" @label="at-label #1">
+      CG.Item Content #1
+    </CG.Item>
+    <CG.Item @area="cds-g90" class="test #2">
+      CG.Item Content #2
+    </CG.Item>
+    <CG.Item @area="wc-g10" class="test #3" as |CGI|>
+      <CGI.Label>cgi-label #3</CGI.Label>
+      CG.Item Content #3
+    </CG.Item>
+  </ShwCarbonizationComparisonGrid>
+</template>;
+
+export default SubSectionCarbonization;
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/index.gts b/showcase/app/components/shw/carbonization/comparison-grid/index.gts
new file mode 100644
index 00000000000..31fa957055c
--- /dev/null
+++ b/showcase/app/components/shw/carbonization/comparison-grid/index.gts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { hash } from '@ember/helper';
+
+import ShwLabel from 'showcase/components/shw/label';
+import ShwCarbonizationComparisonGridItem from './item';
+
+export interface ShwCarbonizationComparisonGridSignature {
+  Args: {
+    label?: string;
+  };
+  Blocks: {
+    default: [
+      {
+        Label: typeof ShwLabel;
+        Item: typeof ShwCarbonizationComparisonGridItem;
+        // Item: WithBoundArgs<typeof ShwCarbonizationComparisonGridItem, 'area'>;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+const ShwCarbonizationComparisonGrid: TemplateOnlyComponent<ShwCarbonizationComparisonGridSignature> =
+  <template>
+    {{#if @label}}
+      <ShwLabel>{{@label}}</ShwLabel>
+    {{/if}}
+    <div class="shw-carbonization-comparison-grid" ...attributes>
+      {{yield (hash Label=ShwLabel Item=ShwCarbonizationComparisonGridItem)}}
+    </div>
+  </template>;
+
+export default ShwCarbonizationComparisonGrid;
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/item.gts b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
new file mode 100644
index 00000000000..983eb878cdf
--- /dev/null
+++ b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
@@ -0,0 +1,51 @@
+import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
+
+import ShwLabel from '../../label';
+
+import type { ComponentLike } from '@glint/template';
+import type { ShwLabelSignature } from 'showcase/components/shw/label';
+
+export interface ShwCarbonizationComparisonGridItemSignature {
+  Args: {
+    area:
+      | 'hds'
+      | 'cds-g0'
+      | 'cds-g10'
+      | 'cds-g90'
+      | 'cds-g100'
+      | 'wc-g0'
+      | 'wc-g10'
+      | 'wc-g90'
+      | 'wc-g100';
+    label?: string;
+  };
+  Blocks: {
+    default: [
+      {
+        Label?: ComponentLike<ShwLabelSignature>;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class ShwCarbonizationComparisonGridItem extends Component<ShwCarbonizationComparisonGridItemSignature> {
+  get classNames(): string {
+    const classes = ['shw-carbonization-comparison-grid__item'];
+
+    // add a class based on the @area argument
+    classes.push(`shw-carbonization-comparison-grid__item--${this.args.area}`);
+
+    return classes.join(' ');
+  }
+
+  <template>
+    <div class={{this.classNames}} ...attributes>
+      {{#if @label}}
+        <ShwLabel>{{@label}}</ShwLabel>
+      {{/if}}
+      {{yield (hash Label=ShwLabel)}}
+    </div>
+  </template>
+}
diff --git a/showcase/app/components/shw/yield.gts b/showcase/app/components/shw/yield.gts
new file mode 100644
index 00000000000..2bc89c6157b
--- /dev/null
+++ b/showcase/app/components/shw/yield.gts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+export interface ShwYieldSignature {
+  Blocks: {
+    default?: [];
+  };
+}
+
+const ShwYield: TemplateOnlyComponent<ShwYieldSignature> = <template>
+  <yield />
+</template>;
+
+export default ShwYield;
diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss
index c3151eb5e6e..3aaf20bd4ee 100644
--- a/showcase/app/styles/app.scss
+++ b/showcase/app/styles/app.scss
@@ -25,6 +25,7 @@
 @use "./showcase-components/outliner";
 @use "./showcase-components/placeholder";
 @use "./showcase-components/theme-switcher";
+@use "./showcase-components/carbonization/comparison-grid";
 @use "./mock-components/app";
 @use "./mock-components/demo/breakpoints";
 
diff --git a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
new file mode 100644
index 00000000000..5401d9c59af
--- /dev/null
+++ b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
@@ -0,0 +1,43 @@
+.shw-carbonization-comparison-grid {
+  & + & {
+    margin-top: 1rem;
+  }
+
+  display: grid;
+  grid-template-areas:
+    "label label label label label"
+    "hds cds-g0 cds-g10 cds-g90 cds-g100"
+    "--- wc-g0 wc-g10 wc-g90 wc-g100";
+  grid-template-rows: repeat(3, auto);
+  grid-template-columns: repeat(5, 1fr);
+  row-gap: 0; // we use vertical margin to separate the web-components row from the one above
+  column-gap: 1rem;
+
+  // fallback for when `@label` can't be used (eg. it contains tags)
+  > .shw-label {
+    grid-area: label;
+  }
+}
+
+// .shw-carbonization-comparison-grid__item {}
+
+@each $area in 'hds', 'cds-g0', 'cds-g10', 'cds-g90', 'cds-g100', 'wc-g0', 'wc-g10', 'wc-g90', 'wc-g100' {
+  .shw-carbonization-comparison-grid__item--#{$area} {
+    grid-area: #{$area};
+  }
+}
+
+@each $area in 'wc-g0', 'wc-g10', 'wc-g90', 'wc-g100' {
+  .shw-carbonization-comparison-grid__item--#{$area} {
+    margin-top: 1rem;
+  }
+}
+
+// DEBUG
+
+// .shw-carbonization-comparison-grid {
+//   outline: 1px solid blue;
+// }
+// .shw-carbonization-comparison-grid__item {
+//   outline: 1px dotted magenta;
+// }

From 731454fa273d37fe1a59abc0655fd38e0f6ca4f4 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Tue, 23 Sep 2025 18:38:25 +0100
Subject: [PATCH 02/18] refactored implementation of
 `<ShwCarbonizationComparisonGrid>`

---
 .../badge/sub-sections/carbonization.gts      | 33 +++---------
 .../carbonization/comparison-grid/index.gts   | 47 +++++++++++++---
 .../carbonization/comparison-grid/item.gts    | 54 ++++++++++++++-----
 .../carbonization/comparison-grid.scss        | 19 +++----
 4 files changed, 95 insertions(+), 58 deletions(-)

diff --git a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
index 3b1da3f33dc..63e50bd1c81 100644
--- a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
+++ b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
@@ -15,31 +15,14 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
 
   <ShwTextH2>Carbonization</ShwTextH2>
 
-  <ShwCarbonizationComparisonGrid @label="grid label as argument" as |CG|>
-    <CG.Item @area="hds" class="test #1" @label="at-label #1">
-      CG.Item Content #1
-    </CG.Item>
-    <CG.Item @area="cds-g90" class="test #2">
-      CG.Item Content #2
-    </CG.Item>
-    <CG.Item @area="wc-g10" class="test #3" as |CGI|>
-      <CGI.Label>cgi-label #3</CGI.Label>
-      CG.Item Content #3
-    </CG.Item>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwCarbonizationComparisonGrid as |CG|>
-    <CG.Label>Yielded label</CG.Label>
-    <CG.Item @area="hds" class="test #1" @label="at-label #1">
-      CG.Item Content #1
-    </CG.Item>
-    <CG.Item @area="cds-g90" class="test #2">
-      CG.Item Content #2
-    </CG.Item>
-    <CG.Item @area="wc-g10" class="test #3" as |CGI|>
-      <CGI.Label>cgi-label #3</CGI.Label>
-      CG.Item Content #3
-    </CG.Item>
+  <ShwCarbonizationComparisonGrid>
+    <:label>Yielded label</:label>
+    <:themed>
+      Themed content
+    </:themed>
+    <:reference>
+      Reference content
+    </:reference>
   </ShwCarbonizationComparisonGrid>
 </template>;
 
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/index.gts b/showcase/app/components/shw/carbonization/comparison-grid/index.gts
index 31fa957055c..edce12cf845 100644
--- a/showcase/app/components/shw/carbonization/comparison-grid/index.gts
+++ b/showcase/app/components/shw/carbonization/comparison-grid/index.gts
@@ -1,10 +1,5 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
-import { hash } from '@ember/helper';
+import { eq } from 'ember-truth-helpers';
 
 import ShwLabel from 'showcase/components/shw/label';
 import ShwCarbonizationComparisonGridItem from './item';
@@ -14,6 +9,9 @@ export interface ShwCarbonizationComparisonGridSignature {
     label?: string;
   };
   Blocks: {
+    label: [];
+    themed: [];
+    reference: [];
     default: [
       {
         Label: typeof ShwLabel;
@@ -25,13 +23,48 @@ export interface ShwCarbonizationComparisonGridSignature {
   Element: HTMLDivElement;
 }
 
+export const THEMES = [
+  'hds',
+  'cds-g0',
+  'cds-g10',
+  'cds-g90',
+  'cds-g100',
+] as const;
+
+export type Theme = (typeof THEMES)[number];
+
 const ShwCarbonizationComparisonGrid: TemplateOnlyComponent<ShwCarbonizationComparisonGridSignature> =
   <template>
     {{#if @label}}
       <ShwLabel>{{@label}}</ShwLabel>
     {{/if}}
+    {{#if (has-block "label")}}
+      <ShwLabel>{{yield to="label"}}</ShwLabel>
+    {{/if}}
     <div class="shw-carbonization-comparison-grid" ...attributes>
-      {{yield (hash Label=ShwLabel Item=ShwCarbonizationComparisonGridItem)}}
+      {{#if (has-block "themed")}}
+        {{#each THEMES as |theme|}}
+          <ShwCarbonizationComparisonGridItem
+            @scope="show"
+            @theme={{theme}}
+            @label={{theme}}
+          >
+            {{yield to="themed"}}
+          </ShwCarbonizationComparisonGridItem>
+        {{/each}}
+      {{/if}}
+      {{#if (has-block "reference")}}
+        {{#each THEMES as |theme|}}
+          {{#unless (eq theme "hds")}}
+            <ShwCarbonizationComparisonGridItem
+              @scope="reference"
+              @theme={{theme}}
+            >
+              {{yield to="reference"}}
+            </ShwCarbonizationComparisonGridItem>
+          {{/unless}}
+        {{/each}}
+      {{/if}}
     </div>
   </template>;
 
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/item.gts b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
index 983eb878cdf..275cea1b8ad 100644
--- a/showcase/app/components/shw/carbonization/comparison-grid/item.gts
+++ b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
@@ -1,24 +1,19 @@
 import Component from '@glimmer/component';
 import { hash } from '@ember/helper';
+import { eq } from 'ember-truth-helpers';
 
 import ShwLabel from '../../label';
 
 import type { ComponentLike } from '@glint/template';
 import type { ShwLabelSignature } from 'showcase/components/shw/label';
 
+import type { Theme } from './index';
+
 export interface ShwCarbonizationComparisonGridItemSignature {
   Args: {
-    area:
-      | 'hds'
-      | 'cds-g0'
-      | 'cds-g10'
-      | 'cds-g90'
-      | 'cds-g100'
-      | 'wc-g0'
-      | 'wc-g10'
-      | 'wc-g90'
-      | 'wc-g100';
     label?: string;
+    theme: Theme;
+    scope: 'show' | 'reference';
   };
   Blocks: {
     default: [
@@ -31,17 +26,50 @@ export interface ShwCarbonizationComparisonGridItemSignature {
 }
 
 export default class ShwCarbonizationComparisonGridItem extends Component<ShwCarbonizationComparisonGridItemSignature> {
+  get areaName(): string {
+    if (this.args.scope === 'reference') {
+      // `hds` is not included in the loop for the references
+      return this.args.theme.replace('cds', 'wc');
+    } else {
+      return this.args.theme;
+    }
+  }
+
   get classNames(): string {
     const classes = ['shw-carbonization-comparison-grid__item'];
 
-    // add a class based on the @area argument
-    classes.push(`shw-carbonization-comparison-grid__item--${this.args.area}`);
+    // add a class based on the `@scope` argument
+    classes.push(
+      `shw-carbonization-comparison-grid__item--scope-${this.args.scope}`,
+    );
+
+    // add a class based on `this.area`
+    classes.push(
+      `shw-carbonization-comparison-grid__item--area-${this.areaName}`,
+    );
 
     return classes.join(' ');
   }
 
+  get themeSelector(): string {
+    if (this.args.scope === 'reference') {
+      // TODO! once the theming CSS is ready, update this to use the right CSS selector
+      return `data-hds-theme="${this.args.theme}"`;
+      // TODO! add here a way for the Carbon web components to be locally themed
+    } else {
+      return `data-cds-theme="${this.args.theme}"`;
+    }
+  }
+
   <template>
-    <div class={{this.classNames}} ...attributes>
+    <div
+      class={{this.classNames}}
+      ...attributes
+      {{! TODO! once the theming CSS is ready, update this to use the right CSS selector }}
+      data-hds-theme={{if (eq @scope "show") @theme}}
+      {{! TODO! add here a way for the Carbon web components to be locally themed }}
+      data-cds-theme={{if (eq @scope "reference") @theme}}
+    >
       {{#if @label}}
         <ShwLabel>{{@label}}</ShwLabel>
       {{/if}}
diff --git a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
index 5401d9c59af..c40fed465f3 100644
--- a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
+++ b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
@@ -7,29 +7,22 @@
   grid-template-areas:
     "label label label label label"
     "hds cds-g0 cds-g10 cds-g90 cds-g100"
-    "--- wc-g0 wc-g10 wc-g90 wc-g100";
+    "---  wc-g0  wc-g10  wc-g90  wc-g100";
   grid-template-rows: repeat(3, auto);
   grid-template-columns: repeat(5, 1fr);
   row-gap: 0; // we use vertical margin to separate the web-components row from the one above
   column-gap: 1rem;
-
-  // fallback for when `@label` can't be used (eg. it contains tags)
-  > .shw-label {
-    grid-area: label;
-  }
 }
 
 // .shw-carbonization-comparison-grid__item {}
 
-@each $area in 'hds', 'cds-g0', 'cds-g10', 'cds-g90', 'cds-g100', 'wc-g0', 'wc-g10', 'wc-g90', 'wc-g100' {
-  .shw-carbonization-comparison-grid__item--#{$area} {
-    grid-area: #{$area};
-  }
+.shw-carbonization-comparison-grid__item--scope-reference {
+  margin-top: 1rem;
 }
 
-@each $area in 'wc-g0', 'wc-g10', 'wc-g90', 'wc-g100' {
-  .shw-carbonization-comparison-grid__item--#{$area} {
-    margin-top: 1rem;
+@each $area in 'hds', 'cds-g0', 'cds-g10', 'cds-g90', 'cds-g100', 'wc-g0', 'wc-g10', 'wc-g90', 'wc-g100' {
+  .shw-carbonization-comparison-grid__item--area-#{$area} {
+    grid-area: #{$area};
   }
 }
 

From a5b1a677a553fecbe4459be4a7f88f25e09dc2ed Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Tue, 23 Sep 2025 19:27:56 +0100
Subject: [PATCH 03/18] =?UTF-8?q?implemented=20=E2=80=9CCarbonization?=
 =?UTF-8?q?=E2=80=9D=20section=20for=20`Badge`=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page-components/badge/index.gts           |   9 ++
 .../badge/sub-sections/carbonization.gts      | 107 ++++++++++++++++--
 .../badge/sub-sections/content.gts            |   2 +-
 .../carbonization/comparison-grid/index.gts   |  10 +-
 .../carbonization/comparison-grid/item.gts    |   2 +-
 .../carbonization/comparison-grid.scss        |   9 +-
 6 files changed, 115 insertions(+), 24 deletions(-)

diff --git a/showcase/app/components/page-components/badge/index.gts b/showcase/app/components/page-components/badge/index.gts
index 771bdabc803..9fb9e9d2721 100644
--- a/showcase/app/components/page-components/badge/index.gts
+++ b/showcase/app/components/page-components/badge/index.gts
@@ -7,6 +7,7 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionContainers from 'showcase/components/page-components/badge/sub-sections/containers';
 import SubSectionContent from 'showcase/components/page-components/badge/sub-sections/content';
@@ -22,6 +23,14 @@ const BadgeIndex: TemplateOnlyComponent = <template>
     <SubSectionContent />
     <SubSectionVariants />
     <SubSectionContainers />
+  </section>
+
+  <ShwDivider />
+  <ShwDivider />
+
+  <ShwTextH1>Carbonization</ShwTextH1>
+
+  <section>
     <SubSectionCarbonization />
   </section>
 </template>;
diff --git a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
index 63e50bd1c81..f4430b2c6bd 100644
--- a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
+++ b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
@@ -4,26 +4,115 @@
  */
 
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier';
+import { notEq } from 'ember-truth-helpers';
 
 import ShwTextH2 from 'showcase/components/shw/text/h2';
-import ShwDivider from 'showcase/components/shw/divider';
+import ShwFlex from 'showcase/components/shw/flex';
+// import ShwDivider from 'showcase/components/shw/divider';
 import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
 
+import { HdsBadge } from '@hashicorp/design-system-components/components';
+import {
+  COLORS,
+  SIZES,
+  TYPES,
+} from '@hashicorp/design-system-components/components/hds/badge/index';
+
 const SubSectionCarbonization: TemplateOnlyComponent = <template>
-  <ShwDivider />
-  <ShwDivider />
+  <ShwTextH2>Content</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        <SF.Item>
+          <HdsBadge @text="Only text" />
+        </SF.Item>
+        <SF.Item>
+          <HdsBadge @icon="activity" @text="Text + icon" />
+        </SF.Item>
+        <SF.Item>
+          <HdsBadge @icon="activity" @text="Only icon" @isIconOnly={{true}} />
+        </SF.Item>
+        <SF.Item {{style width="200px"}}>
+          <HdsBadge
+            @icon="activity"
+            @text="This is a very long text that should go on two lines"
+          />
+        </SF.Item>
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Size</ShwTextH2>
 
-  <ShwTextH2>Carbonization</ShwTextH2>
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        {{#each SIZES as |size|}}
+          <SF.Item>
+            <HdsBadge
+              @icon="activity"
+              @isIconOnly={{true}}
+              @text="Lorem ipsum"
+              @size={{size}}
+            />
+            <HdsBadge @icon="activity" @text="Lorem ipsum" @size={{size}} />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Type</ShwTextH2>
 
   <ShwCarbonizationComparisonGrid>
-    <:label>Yielded label</:label>
     <:themed>
-      Themed content
+      <ShwFlex @direction="column" as |SF|>
+        {{#each TYPES as |type|}}
+          <SF.Item>
+            <HdsBadge
+              @icon="activity"
+              @isIconOnly={{true}}
+              @text="Lorem ipsum"
+              @type={{type}}
+            />
+            <HdsBadge @icon="activity" @text="Lorem ipsum" @type={{type}} />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
     </:themed>
-    <:reference>
-      Reference content
-    </:reference>
   </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Color</ShwTextH2>
+
+  {{#each COLORS as |color index|}}
+    <ShwCarbonizationComparisonGrid
+      @hideThemeLabels={{(if (notEq index 0) true)}}
+    >
+      <:themed>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item class="shw-component-badge-sample-color--{{color}}">
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem Ipsum"
+                @type={{type}}
+                @color={{color}}
+                @isIconOnly={{true}}
+              />
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem ipsum"
+                @type={{type}}
+                @color={{color}}
+              />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:themed>
+    </ShwCarbonizationComparisonGrid>
+  {{/each}}
 </template>;
 
 export default SubSectionCarbonization;
diff --git a/showcase/app/components/page-components/badge/sub-sections/content.gts b/showcase/app/components/page-components/badge/sub-sections/content.gts
index 0f49ea5915a..2e08c5da7a1 100644
--- a/showcase/app/components/page-components/badge/sub-sections/content.gts
+++ b/showcase/app/components/page-components/badge/sub-sections/content.gts
@@ -6,8 +6,8 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import style from 'ember-style-modifier';
 
-import ShwFlex from 'showcase/components/shw/flex';
 import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwFlex from 'showcase/components/shw/flex';
 
 import { HdsBadge } from '@hashicorp/design-system-components/components';
 
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/index.gts b/showcase/app/components/shw/carbonization/comparison-grid/index.gts
index edce12cf845..386a499dffd 100644
--- a/showcase/app/components/shw/carbonization/comparison-grid/index.gts
+++ b/showcase/app/components/shw/carbonization/comparison-grid/index.gts
@@ -7,18 +7,12 @@ import ShwCarbonizationComparisonGridItem from './item';
 export interface ShwCarbonizationComparisonGridSignature {
   Args: {
     label?: string;
+    hideThemeLabels?: boolean;
   };
   Blocks: {
     label: [];
     themed: [];
     reference: [];
-    default: [
-      {
-        Label: typeof ShwLabel;
-        Item: typeof ShwCarbonizationComparisonGridItem;
-        // Item: WithBoundArgs<typeof ShwCarbonizationComparisonGridItem, 'area'>;
-      },
-    ];
   };
   Element: HTMLDivElement;
 }
@@ -47,7 +41,7 @@ const ShwCarbonizationComparisonGrid: TemplateOnlyComponent<ShwCarbonizationComp
           <ShwCarbonizationComparisonGridItem
             @scope="show"
             @theme={{theme}}
-            @label={{theme}}
+            @label={{(unless @hideThemeLabels theme)}}
           >
             {{yield to="themed"}}
           </ShwCarbonizationComparisonGridItem>
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/item.gts b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
index 275cea1b8ad..e38b4e44bf7 100644
--- a/showcase/app/components/shw/carbonization/comparison-grid/item.gts
+++ b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
@@ -29,7 +29,7 @@ export default class ShwCarbonizationComparisonGridItem extends Component<ShwCar
   get areaName(): string {
     if (this.args.scope === 'reference') {
       // `hds` is not included in the loop for the references
-      return this.args.theme.replace('cds', 'wc');
+      return this.args.theme.replace('cds', 'cwc');
     } else {
       return this.args.theme;
     }
diff --git a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
index c40fed465f3..f5c2e53e92d 100644
--- a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
+++ b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
@@ -1,14 +1,13 @@
 .shw-carbonization-comparison-grid {
   & + & {
-    margin-top: 1rem;
+    margin-top: 2rem;
   }
 
   display: grid;
   grid-template-areas:
-    "label label label label label"
     "hds cds-g0 cds-g10 cds-g90 cds-g100"
-    "---  wc-g0  wc-g10  wc-g90  wc-g100";
-  grid-template-rows: repeat(3, auto);
+    "--- cwc-g0 cwc-g10 cwc-g90 cwc-g100";
+  grid-template-rows: auto, auto;
   grid-template-columns: repeat(5, 1fr);
   row-gap: 0; // we use vertical margin to separate the web-components row from the one above
   column-gap: 1rem;
@@ -20,7 +19,7 @@
   margin-top: 1rem;
 }
 
-@each $area in 'hds', 'cds-g0', 'cds-g10', 'cds-g90', 'cds-g100', 'wc-g0', 'wc-g10', 'wc-g90', 'wc-g100' {
+@each $area in 'hds', 'cds-g0', 'cds-g10', 'cds-g90', 'cds-g100', 'cwc-g0', 'cwc-g10', 'cwc-g90', 'cwc-g100' {
   .shw-carbonization-comparison-grid__item--area-#{$area} {
     grid-area: #{$area};
   }

From feba07404cb3e188311a1bd9ebe78792351e2540 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Tue, 23 Sep 2025 22:12:49 +0100
Subject: [PATCH 04/18] =?UTF-8?q?implemented=20=E2=80=9CCarbonization?=
 =?UTF-8?q?=E2=80=9D=20section=20for=20`BadgeCount`=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page-components/badge-count/index.gts     | 12 +++-
 .../sub-sections/carbonization.gts            | 72 +++++++++++++++++++
 2 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts

diff --git a/showcase/app/components/page-components/badge-count/index.gts b/showcase/app/components/page-components/badge-count/index.gts
index f0783b3ad1d..af27dacb306 100644
--- a/showcase/app/components/page-components/badge-count/index.gts
+++ b/showcase/app/components/page-components/badge-count/index.gts
@@ -4,13 +4,14 @@
  */
 
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
-
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionContent from 'showcase/components/page-components/badge-count/sub-sections/content';
 import SubSectionVariants from 'showcase/components/page-components/badge-count/sub-sections/variants';
+import SubSectionCarbonization from 'showcase/components/page-components/badge-count/sub-sections/carbonization';
 
 const BadgeCountIndex: TemplateOnlyComponent = <template>
   {{pageTitle "BadgeCount Component"}}
@@ -21,6 +22,15 @@ const BadgeCountIndex: TemplateOnlyComponent = <template>
     <SubSectionContent />
     <SubSectionVariants />
   </section>
+
+  <ShwDivider />
+  <ShwDivider />
+
+  <ShwTextH1>Carbonization</ShwTextH1>
+
+  <section>
+    <SubSectionCarbonization />
+  </section>
 </template>;
 
 export default BadgeCountIndex;
diff --git a/showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts b/showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts
new file mode 100644
index 00000000000..21e9f6e361e
--- /dev/null
+++ b/showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { notEq } from 'ember-truth-helpers';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwFlex from 'showcase/components/shw/flex';
+// import ShwDivider from 'showcase/components/shw/divider';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+import { HdsBadgeCount } from '@hashicorp/design-system-components/components';
+import {
+  COLORS,
+  SIZES,
+  TYPES,
+} from '@hashicorp/design-system-components/components/hds/badge-count/index';
+
+const SubSectionCarbonization: TemplateOnlyComponent = <template>
+  <ShwTextH2>Size</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        {{#each SIZES as |size|}}
+          <SF.Item>
+            <HdsBadgeCount @text="3" @size={{size}} />
+            <HdsBadgeCount @text="99+" @size={{size}} />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Type</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        {{#each TYPES as |type|}}
+          <SF.Item>
+            <HdsBadgeCount @text="3" @type={{type}} />
+            <HdsBadgeCount @text="99+" @type={{type}} />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Color</ShwTextH2>
+
+  {{#each COLORS as |color index|}}
+    <ShwCarbonizationComparisonGrid
+      @hideThemeLabels={{(if (notEq index 0) true)}}
+    >
+      <:themed>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item class="shw-component-badge-sample-color--{{color}}">
+              <HdsBadgeCount @text="3" @type={{type}} @color={{color}} />
+              <HdsBadgeCount @text="99+" @type={{type}} @color={{color}} />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:themed>
+    </ShwCarbonizationComparisonGrid>
+  {{/each}}
+</template>;
+
+export default SubSectionCarbonization;

From 25832d3bfc60778853096eac0d8c57a6d229bf41 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Tue, 23 Sep 2025 22:58:11 +0100
Subject: [PATCH 05/18] =?UTF-8?q?implemented=20=E2=80=9CCarbonization?=
 =?UTF-8?q?=E2=80=9D=20section=20for=20`Button`=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page-components/button/index.gts          |  11 ++
 .../button/sub-sections/carbonization.gts     | 128 ++++++++++++++++++
 2 files changed, 139 insertions(+)
 create mode 100644 showcase/app/components/page-components/button/sub-sections/carbonization.gts

diff --git a/showcase/app/components/page-components/button/index.gts b/showcase/app/components/page-components/button/index.gts
index fcebeaf707f..edbb65c94e0 100644
--- a/showcase/app/components/page-components/button/index.gts
+++ b/showcase/app/components/page-components/button/index.gts
@@ -6,6 +6,7 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionContainers from 'showcase/components/page-components/button/sub-sections/containers';
 import SubSectionContent from 'showcase/components/page-components/button/sub-sections/content';
@@ -13,6 +14,7 @@ import SubSectionDisplay from 'showcase/components/page-components/button/sub-se
 import SubSectionGeneratedElement from 'showcase/components/page-components/button/sub-sections/generated-element';
 import SubSectionStates from 'showcase/components/page-components/button/sub-sections/states';
 import SubSectionVariants from 'showcase/components/page-components/button/sub-sections/variants';
+import SubSectionCarbonization from 'showcase/components/page-components/button/sub-sections/carbonization';
 
 const ButtonIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Button Component"}}
@@ -28,6 +30,15 @@ const ButtonIndex: TemplateOnlyComponent = <template>
     <SubSectionStates />
     <SubSectionContainers />
   </section>
+
+  <ShwDivider />
+  <ShwDivider />
+
+  <ShwTextH1>Carbonization</ShwTextH1>
+
+  <section>
+    <SubSectionCarbonization />
+  </section>
 </template>;
 
 export default ButtonIndex;
diff --git a/showcase/app/components/page-components/button/sub-sections/carbonization.gts b/showcase/app/components/page-components/button/sub-sections/carbonization.gts
new file mode 100644
index 00000000000..3f41a999f47
--- /dev/null
+++ b/showcase/app/components/page-components/button/sub-sections/carbonization.gts
@@ -0,0 +1,128 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier';
+import { capitalize } from '@ember/string';
+import { eq } from 'ember-truth-helpers';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwTextH3 from 'showcase/components/shw/text/h3';
+import ShwTextBody from 'showcase/components/shw/text/body';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import {
+  COLORS,
+  SIZES,
+} from '@hashicorp/design-system-components/components/hds/button/index';
+
+// these are used only for presentation purpose in the showcase
+const STATES = ['default', 'hover', 'active', 'focus', 'disabled'];
+
+import CodeFragmentWithLoadingState from 'showcase/components/page-components/button/code-fragments/with-loading-state';
+
+const SubSectionCarbonization: TemplateOnlyComponent = <template>
+  <ShwTextH2>Content</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        <SF.Item>
+          <HdsButton @text="Lorem ipsum" />
+        </SF.Item>
+        <SF.Item>
+          <HdsButton @icon="plus" @iconPosition="leading" @text="Lorem ipsum" />
+        </SF.Item>
+        <SF.Item>
+          <HdsButton
+            @icon="arrow-right"
+            @iconPosition="trailing"
+            @text="Lorem ipsum"
+          />
+        </SF.Item>
+        <SF.Item>
+          <HdsButton @icon="plus" @isIconOnly={{true}} @text="Lorem ipsum" />
+        </SF.Item>
+        <SF.Item {{style width="200px"}}>
+          <HdsButton
+            @icon="plus"
+            @text="This is a very long text that should go on multiple lines"
+          />
+        </SF.Item>
+        <SF.Item {{style width="150px"}}>
+          <CodeFragmentWithLoadingState />
+        </SF.Item>
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Sizes</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        {{#each SIZES as |size|}}
+          <SF.Item>
+            <HdsButton
+              @icon="plus"
+              @text="Lorem ipsum"
+              @size={{size}}
+              @isInline={{true}}
+            />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Colors</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        {{#each COLORS as |color|}}
+          <SF.Item>
+            <HdsButton @icon="plus" @text="Lorem ipsum" @color={{color}} />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>States</ShwTextH2>
+
+  {{#each COLORS as |color|}}
+    <ShwTextH3>{{capitalize color}}</ShwTextH3>
+    {{#each STATES as |state|}}
+      <ShwTextBody>{{state}}</ShwTextBody>
+      <ShwCarbonizationComparisonGrid>
+        <:themed>
+          <ShwFlex @direction="column" @gap="0.75rem" as |SF|>
+            {{#each SIZES as |size|}}
+              <SF.Item>
+                {{#if (eq state "disabled")}}
+                  <HdsButton
+                    @icon="plus"
+                    @text="Lorem"
+                    @size={{size}}
+                    @color={{color}}
+                    disabled
+                  />
+                {{else}}
+                  <HdsButton
+                    @icon="plus"
+                    @text="Lorem"
+                    @size={{size}}
+                    @color={{color}}
+                    mock-state-value={{state}}
+                  />
+                {{/if}}
+              </SF.Item>
+            {{/each}}
+          </ShwFlex>
+        </:themed>
+      </ShwCarbonizationComparisonGrid>
+    {{/each}}
+  {{/each}}
+</template>;
+
+export default SubSectionCarbonization;

From bd2188c70e5bf6a721cf4e8d71d3c742fb116b92 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 24 Sep 2025 13:40:32 +0100
Subject: [PATCH 06/18] =?UTF-8?q?implemented=20=E2=80=9CCarbonization?=
 =?UTF-8?q?=E2=80=9D=20section=20for=20`Focus=20Ring`=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page-foundations/focus-ring/index.gts     | 11 ++++
 .../focus-ring/sub-sections/carbonization.gts | 61 +++++++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts

diff --git a/showcase/app/components/page-foundations/focus-ring/index.gts b/showcase/app/components/page-foundations/focus-ring/index.gts
index 696af96d4ea..7efc5d2c742 100644
--- a/showcase/app/components/page-foundations/focus-ring/index.gts
+++ b/showcase/app/components/page-foundations/focus-ring/index.gts
@@ -6,9 +6,11 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionBase from 'showcase/components/page-foundations/focus-ring/sub-sections/base';
 import SubSectionVariants from 'showcase/components/page-foundations/focus-ring/sub-sections/variants';
+import SubSectionCarbonization from 'showcase/components/page-foundations/focus-ring/sub-sections/carbonization';
 
 const FocusRingIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Focus ring"}}
@@ -19,6 +21,15 @@ const FocusRingIndex: TemplateOnlyComponent = <template>
     <SubSectionBase />
     <SubSectionVariants />
   </section>
+
+  <ShwDivider />
+  <ShwDivider />
+
+  <ShwTextH1>Carbonization</ShwTextH1>
+
+  <section>
+    <SubSectionCarbonization />
+  </section>
 </template>;
 
 export default FocusRingIndex;
diff --git a/showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts b/showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts
new file mode 100644
index 00000000000..b48c7417471
--- /dev/null
+++ b/showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier/modifiers/style';
+
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwPlaceholder from 'showcase/components/shw/placeholder';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+const SubSectionCarbonization: TemplateOnlyComponent = <template>
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        <SF.Item>
+          <div
+            class="hds-focus-ring-action-box-shadow"
+            {{style width="fit-content"}}
+          >
+            <ShwPlaceholder
+              @text="no radius"
+              @width="100"
+              @height="100"
+              @background="transparent"
+            />
+          </div>
+        </SF.Item>
+        <SF.Item>
+          <div
+            class="hds-focus-ring-action-box-shadow"
+            {{style border-radius="5px" width="fit-content"}}
+          >
+            <ShwPlaceholder
+              @text="with border radius"
+              @width="100"
+              @height="100"
+              @background="transparent"
+            />
+          </div>
+        </SF.Item>
+        <SF.Item>
+          <div
+            class="hds-focus-ring-critical-box-shadow"
+            {{style border-radius="5px" width="fit-content"}}
+          >
+            <ShwPlaceholder
+              @text="with border radius"
+              @width="100"
+              @height="100"
+              @background="transparent"
+            />
+          </div>
+        </SF.Item>
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+</template>;
+
+export default SubSectionCarbonization;

From a689b1b48cafa370eca8202bd8aaf1fc65dd22bf Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 24 Sep 2025 13:51:54 +0100
Subject: [PATCH 07/18] =?UTF-8?q?implemented=20=E2=80=9CCarbonization?=
 =?UTF-8?q?=E2=80=9D=20section=20for=20`Typography`=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page-foundations/typography/index.gts     | 11 ++++++
 .../typography/sub-sections/carbonization.gts | 34 +++++++++++++++++++
 .../typography/sub-sections/styles.gts        |  2 +-
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts

diff --git a/showcase/app/components/page-foundations/typography/index.gts b/showcase/app/components/page-foundations/typography/index.gts
index 02a1b0e68e5..c8c87ffd3c7 100644
--- a/showcase/app/components/page-foundations/typography/index.gts
+++ b/showcase/app/components/page-foundations/typography/index.gts
@@ -6,10 +6,12 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionFamilies from 'showcase/components/page-foundations/typography/sub-sections/families';
 import SubSectionWeights from 'showcase/components/page-foundations/typography/sub-sections/weights';
 import SubSectionStyles from 'showcase/components/page-foundations/typography/sub-sections/styles';
+import SubSectionCarbonization from 'showcase/components/page-foundations/typography/sub-sections/carbonization';
 
 const TypographyIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Typography"}}
@@ -21,6 +23,15 @@ const TypographyIndex: TemplateOnlyComponent = <template>
     <SubSectionWeights />
     <SubSectionStyles />
   </section>
+
+  <ShwDivider />
+  <ShwDivider />
+
+  <ShwTextH1>Carbonization</ShwTextH1>
+
+  <section>
+    <SubSectionCarbonization />
+  </section>
 </template>;
 
 export default TypographyIndex;
diff --git a/showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts b/showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts
new file mode 100644
index 00000000000..48ebfe226bb
--- /dev/null
+++ b/showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { notEq } from 'ember-truth-helpers';
+
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+import { STYLES_COMBINATIONS } from './styles';
+
+const SubSectionCarbonization: TemplateOnlyComponent = <template>
+  {{#each-in STYLES_COMBINATIONS as |style weights|}}
+    <ShwCarbonizationComparisonGrid
+      @hideThemeLabels={{(if (notEq style "display-500") true)}}
+    >
+      <:themed>
+        <ShwFlex @direction="column" as |SF|>
+          {{#each weights as |weight|}}
+            <SF.Item>
+              <p
+                class="hds-typography-{{style}} hds-font-weight-{{weight}}"
+              >{{style}} / {{weight}}</p>
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:themed>
+    </ShwCarbonizationComparisonGrid>
+  {{/each-in}}
+</template>;
+
+export default SubSectionCarbonization;
diff --git a/showcase/app/components/page-foundations/typography/sub-sections/styles.gts b/showcase/app/components/page-foundations/typography/sub-sections/styles.gts
index a79719d9629..ff1ceb8a4f2 100644
--- a/showcase/app/components/page-foundations/typography/sub-sections/styles.gts
+++ b/showcase/app/components/page-foundations/typography/sub-sections/styles.gts
@@ -9,7 +9,7 @@ import ShwTextBody from 'showcase/components/shw/text/body';
 import ShwTextH2 from 'showcase/components/shw/text/h2';
 
 // we add all the allowed combinations here, per design specs
-const STYLES_COMBINATIONS = {
+export const STYLES_COMBINATIONS = {
   'display-500': ['bold'],
   'display-400': ['medium', 'semibold', 'bold'],
   'display-300': ['medium', 'semibold', 'bold'],

From d2dc41efc4a4edaddc491ebaaf6d97501a009d1d Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 24 Sep 2025 18:27:25 +0100
Subject: [PATCH 08/18] =?UTF-8?q?implemented=20=E2=80=9CCarbonization?=
 =?UTF-8?q?=E2=80=9D=20section=20for=20(new)=20`Color`=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page-foundations/color/index.gts          | 22 +++++++++
 .../color/sub-sections/carbonization.gts      | 22 +++++++++
 .../carbonization/comparison-grid/index.gts   |  8 +++-
 .../token-preview-color/index.gts             | 45 +++++++++++++++++++
 showcase/app/router.ts                        |  1 +
 showcase/app/styles/app.scss                  |  1 +
 .../carbonization/comparison-grid.scss        |  4 ++
 .../carbonization/token-preview-color.scss    |  6 +++
 showcase/app/templates/index.hbs              |  5 +++
 .../app/templates/page-foundations/color.gts  | 13 ++++++
 10 files changed, 125 insertions(+), 2 deletions(-)
 create mode 100644 showcase/app/components/page-foundations/color/index.gts
 create mode 100644 showcase/app/components/page-foundations/color/sub-sections/carbonization.gts
 create mode 100644 showcase/app/components/shw/carbonization/token-preview-color/index.gts
 create mode 100644 showcase/app/styles/showcase-components/carbonization/token-preview-color.scss
 create mode 100644 showcase/app/templates/page-foundations/color.gts

diff --git a/showcase/app/components/page-foundations/color/index.gts b/showcase/app/components/page-foundations/color/index.gts
new file mode 100644
index 00000000000..6cb8f1791d7
--- /dev/null
+++ b/showcase/app/components/page-foundations/color/index.gts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { pageTitle } from 'ember-page-title';
+
+import ShwTextH1 from 'showcase/components/shw/text/h1';
+
+import SubSectionCarbonization from 'showcase/components/page-foundations/color/sub-sections/carbonization';
+
+const ColorIndex: TemplateOnlyComponent = <template>
+  {{pageTitle "Color"}}
+
+  <ShwTextH1>Color - Carbonization</ShwTextH1>
+
+  <section>
+    <SubSectionCarbonization />
+  </section>
+</template>;
+
+export default ColorIndex;
diff --git a/showcase/app/components/page-foundations/color/sub-sections/carbonization.gts b/showcase/app/components/page-foundations/color/sub-sections/carbonization.gts
new file mode 100644
index 00000000000..df26203c27d
--- /dev/null
+++ b/showcase/app/components/page-foundations/color/sub-sections/carbonization.gts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+import ShwCarbonizationTokenPreviewColor from 'showcase/components/shw/carbonization/token-preview-color';
+
+import TOKENS_RAW from '@hashicorp/design-system-tokens/dist/docs/products/tokens.json';
+
+export default class SubSectionCarbonized extends Component {
+  get allColorTokens() {
+    return TOKENS_RAW.filter((token) => token.$type === 'color');
+  }
+
+  <template>
+    {{#each this.allColorTokens as |token|}}
+      <ShwCarbonizationTokenPreviewColor @token={{token}} />
+    {{/each}}
+  </template>
+}
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/index.gts b/showcase/app/components/shw/carbonization/comparison-grid/index.gts
index 386a499dffd..fa111986ea6 100644
--- a/showcase/app/components/shw/carbonization/comparison-grid/index.gts
+++ b/showcase/app/components/shw/carbonization/comparison-grid/index.gts
@@ -30,10 +30,14 @@ export type Theme = (typeof THEMES)[number];
 const ShwCarbonizationComparisonGrid: TemplateOnlyComponent<ShwCarbonizationComparisonGridSignature> =
   <template>
     {{#if @label}}
-      <ShwLabel>{{@label}}</ShwLabel>
+      <ShwLabel
+        class="shw-carbonization-comparison-grid__top-label"
+      >{{@label}}</ShwLabel>
     {{/if}}
     {{#if (has-block "label")}}
-      <ShwLabel>{{yield to="label"}}</ShwLabel>
+      <ShwLabel class="shw-carbonization-comparison-grid__top-label">{{yield
+          to="label"
+        }}</ShwLabel>
     {{/if}}
     <div class="shw-carbonization-comparison-grid" ...attributes>
       {{#if (has-block "themed")}}
diff --git a/showcase/app/components/shw/carbonization/token-preview-color/index.gts b/showcase/app/components/shw/carbonization/token-preview-color/index.gts
new file mode 100644
index 00000000000..703a7225e7f
--- /dev/null
+++ b/showcase/app/components/shw/carbonization/token-preview-color/index.gts
@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+
+import type { SafeString } from '@ember/template';
+
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+interface ColorTokenRaw {
+  name: string;
+  $value: string;
+}
+
+export interface ShwCarbonizationTokenPreviewColorSignature {
+  Args: {
+    token: ColorTokenRaw;
+  };
+}
+
+export default class ShwCarbonizationTokenPreviewColor extends Component<ShwCarbonizationTokenPreviewColorSignature> {
+  get shortName(): string {
+    return this.args.token.name.replace(/^token-/, '');
+  }
+
+  get style(): SafeString | undefined {
+    const styles: string[] = [];
+    if (this.args.token.$value) {
+      styles.push(`background: ${this.args.token.$value}`);
+    }
+    return styles.length > 0 ? htmlSafe(styles.join('; ')) : undefined;
+  }
+
+  <template>
+    <ShwCarbonizationComparisonGrid
+      @label={{this.shortName}}
+      @hideThemeLabels={{true}}
+    >
+      <:themed>
+        <div
+          class="shw-carbonization-token-preview-color"
+          style={{this.style}}
+        />
+      </:themed>
+    </ShwCarbonizationComparisonGrid>
+  </template>
+}
diff --git a/showcase/app/router.ts b/showcase/app/router.ts
index c63b6c679e1..9f2c666ffdd 100644
--- a/showcase/app/router.ts
+++ b/showcase/app/router.ts
@@ -13,6 +13,7 @@ export default class Router extends EmberRouter {
 
 Router.map(function () {
   this.route('page-foundations', { path: 'foundations' }, function () {
+    this.route('color');
     this.route('typography');
     this.route('elevation');
     this.route('focus-ring');
diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss
index 3aaf20bd4ee..270ee3ca8b5 100644
--- a/showcase/app/styles/app.scss
+++ b/showcase/app/styles/app.scss
@@ -26,6 +26,7 @@
 @use "./showcase-components/placeholder";
 @use "./showcase-components/theme-switcher";
 @use "./showcase-components/carbonization/comparison-grid";
+@use "./showcase-components/carbonization/token-preview-color";
 @use "./mock-components/app";
 @use "./mock-components/demo/breakpoints";
 
diff --git a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
index f5c2e53e92d..4b905b45826 100644
--- a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
+++ b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
@@ -13,6 +13,10 @@
   column-gap: 1rem;
 }
 
+.shw-carbonization-comparison-grid__top-label {
+  margin-top: 2rem;
+}
+
 // .shw-carbonization-comparison-grid__item {}
 
 .shw-carbonization-comparison-grid__item--scope-reference {
diff --git a/showcase/app/styles/showcase-components/carbonization/token-preview-color.scss b/showcase/app/styles/showcase-components/carbonization/token-preview-color.scss
new file mode 100644
index 00000000000..8c8adb39d5b
--- /dev/null
+++ b/showcase/app/styles/showcase-components/carbonization/token-preview-color.scss
@@ -0,0 +1,6 @@
+.shw-carbonization-token-preview-color {
+  width: 100%;
+  height: 32px;
+  border-radius: 6px;
+  box-shadow: inset 0 0 1px 0 rgb(0, 0, 0, 25%);
+}
diff --git a/showcase/app/templates/index.hbs b/showcase/app/templates/index.hbs
index 76a5d9969d8..dea0d26a233 100644
--- a/showcase/app/templates/index.hbs
+++ b/showcase/app/templates/index.hbs
@@ -7,6 +7,11 @@
   <div>
     <Shw::Text::H2>Foundations</Shw::Text::H2>
     <ol class="shw-text-body">
+      <li>
+        <LinkTo @route="page-foundations.color">
+          Color
+        </LinkTo>
+      </li>
       <li>
         <LinkTo @route="page-foundations.typography">
           Typography
diff --git a/showcase/app/templates/page-foundations/color.gts b/showcase/app/templates/page-foundations/color.gts
new file mode 100644
index 00000000000..79e5611c648
--- /dev/null
+++ b/showcase/app/templates/page-foundations/color.gts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import ColorIndex from 'showcase/components/page-foundations/color';
+
+const PageFoundationsColor: TemplateOnlyComponent = <template>
+  <ColorIndex />
+</template>;
+
+export default PageFoundationsColor;

From 730fec7a78888c9d4773517f9128aa59cf4616cf Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 24 Sep 2025 19:27:38 +0100
Subject: [PATCH 09/18] added `@carbon/web-components` as devDependency to
 Showcase app

---
 pnpm-lock.yaml        | 213 ++++++++++++++++++++++++++++++++++++++++++
 showcase/package.json |   1 +
 2 files changed, 214 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af2a45e3679..fd857d19cb3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -491,6 +491,9 @@ importers:
       '@babel/plugin-proposal-decorators':
         specifier: ^7.27.1
         version: 7.28.0(@babel/core@7.28.0)
+      '@carbon/web-components':
+        specifier: ^2.38.0
+        version: 2.38.0(sass@1.89.2)
       '@codemirror/lint':
         specifier: ^6.8.4
         version: 6.8.5
@@ -1883,21 +1886,53 @@ packages:
   '@carbon/colors@11.39.0':
     resolution: {integrity: sha512-H1hL9NW1I1vks469KuIV/YY4zHUiDQJ/MOlJgv8iCLi0SQS4DWkDslccXAhce8U8qRtx1JPfePhiYkRBbjgKgw==}
 
+  '@carbon/colors@11.40.0':
+    resolution: {integrity: sha512-mzMtp8vOKQMWrGRKb34ldntpd2Z5WdHyDRLA0nfg8PgPWHQq0zI5Eznrng8OHOuy8bFurMxzA5t8OGqKEuP9cg==}
+
+  '@carbon/feature-flags@0.30.0':
+    resolution: {integrity: sha512-0zOcm4QmjdikW4AXoOeW/DZic4Pd220UFUgPJtCvNgsnLV4hrsTmfdvm2GKrHMm4ob4Q6rPXsZGAdqp/vRiZHA==}
+
   '@carbon/grid@11.42.0':
     resolution: {integrity: sha512-l91wFV7uMhaf2PX89cW1zS5iMnzrFVY2d81Xf7U9OdNu8sBTQWxUPtj1RnZyep4F7v/HG8U4DOzfa+nO5GgZeA==}
 
+  '@carbon/grid@11.43.0':
+    resolution: {integrity: sha512-AXSCOpTRtkKwZ6qceFYwaQ9CZBFPBnBL+yzbYwCtsuYwFtx7zse3cogs/mYxWXIAMzNxc62UovMy90vGNBTd6w==}
+
   '@carbon/layout@11.40.0':
     resolution: {integrity: sha512-2wIOPJZFjt5Y+TZ7NwPTf0l3zif14hBiPwv/nQo76J2Wr1i/NJrYNfBTpUnKxoq6IZEsVd0e6Ab4RLGGIP2eVA==}
 
+  '@carbon/layout@11.41.0':
+    resolution: {integrity: sha512-yDv2/ZUnTYrO8YDkK4PLbxeAIXd5zXH0akly5s6Gs5mwyHJpgzVoUffAGx2/z7ns60zsuCN+JDZFD5iYqYJ3aw==}
+
   '@carbon/motion@11.34.0':
     resolution: {integrity: sha512-Gc5VcfXO70un5jeCUqlplKal8PpRLzUfxg8x8b1LwKfzjWrgxilHtNk3B4dGj190M9dyrTKVfCCrLKlVtyhEQw==}
 
+  '@carbon/motion@11.35.0':
+    resolution: {integrity: sha512-z6GAUF5O1d7wma51bMDe/CIYMu1/nBIpb95mmt9CBQrkRswl2sCJdpLELG74HqXV5r3+Ie7OxbWlvZMMsUC+Gw==}
+
+  '@carbon/styles@1.90.0':
+    resolution: {integrity: sha512-M0mJmlJWrVxKdrulM1vffYZKZfWI0RrueXM6tNGPEN0Qr15sKeiYUgpbMZZ2A9E20Mmm1Y14U1Uv3bEJukI0Fw==}
+    peerDependencies:
+      sass: ^1.33.0
+    peerDependenciesMeta:
+      sass:
+        optional: true
+
   '@carbon/themes@11.59.0':
     resolution: {integrity: sha512-vnFuKTuThYVGQ9f8G/amO0laun6pyr8Nze1KuD6LrOJl6waEC2LPJqNz3rg4ySLievFg9+993R0GNUI9HjC2bw==}
 
+  '@carbon/themes@11.60.0':
+    resolution: {integrity: sha512-Zhtq4TwDROLgXVuvGVlNWMMrgTORdIzhc43bV/SDjpUlPaUglb1I2KfaaJ/ITjMdM4EmbhsiIbtylDTFF18CGQ==}
+
   '@carbon/type@11.46.0':
     resolution: {integrity: sha512-Xt2lhYsRuRrpEESy8BW+xjsf1TXnzv4CdxgAvjL+YSQxzdD0gbMnIhEIpJiDAyWddviqH8ZwxIdlnlfqKrA9rg==}
 
+  '@carbon/type@11.47.0':
+    resolution: {integrity: sha512-P2Ta59Hzvq4SD0vqrovuUh+U0MaXKk/7Gj2JgmK+7cSCQ9S+xY9bmTjTSSfWVdonF8coXE3EykSbaXOkmpgAqA==}
+
+  '@carbon/web-components@2.38.0':
+    resolution: {integrity: sha512-/b4r14HGBgY7tYuwyIkRHbWsRpjAbJyC/NdRlc+JALNJ7FUPPThhuWBvkcZ+c9YqE/r11opXDlylU/pERPPmbw==}
+
   '@changesets/apply-release-plan@7.0.12':
     resolution: {integrity: sha512-EaET7As5CeuhTzvXTQCRZeBUcisoYPDDcXvgTE/2jmmypKp0RC7LxKj/yzqeh/1qFTZI7oDGFcL1PHRuQuketQ==}
 
@@ -2874,6 +2909,34 @@ packages:
     resolution: {integrity: sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==}
     engines: {node: '>=18.18'}
 
+  '@ibm/plex-mono@1.1.0':
+    resolution: {integrity: sha512-hpsdRxR3BRJkC6wGM4MZcUFD6C8M+mmK76RtAy/hlsfPro9FzpXVdIWC+G3jeQOXof109dxlUvmeKxpeKUG68A==}
+
+  '@ibm/plex-sans-arabic@1.1.0':
+    resolution: {integrity: sha512-u8wIS6szLAOFvlBjCFZmtpKIqbhuIuniG2N0J+sio8vV6INH58hP0t0QNYrSl9SZtCv2Fwb4oQGuZJY3kJ4+QA==}
+
+  '@ibm/plex-sans-devanagari@1.1.0':
+    resolution: {integrity: sha512-IVNV9NxXZDzcGZRao/xj+kiFwkdLkcw5vNiKwY8wEzzkpjApXJnPhJ0a7mIKNAh8oIadTIF68+iGtzRKK3nXAQ==}
+
+  '@ibm/plex-sans-hebrew@0.0.3-alpha.0':
+    resolution: {integrity: sha512-sMsn1jU8kyYfSlWMfjcbvpGXJIIXGOZD+sxtBcogZz4umnCq5ys+bmsqlzkfGR25DCB49WvseD2IHbejes0/aA==}
+
+  '@ibm/plex-sans-thai-looped@0.0.3-alpha.0':
+    resolution: {integrity: sha512-mcddR5ZcAQx5TjmaxaXd6gTdtOgxlyVaKqjzQAjUbzNQy0cjTGhIJHB5VrFES7yJLRCtQNCNGP+bzupzHOQERw==}
+
+  '@ibm/plex-sans-thai@0.0.3-alpha.0':
+    resolution: {integrity: sha512-3RteUFhshRTmP5Swq9LYravDXmVvjxtxsZ7qeSqjn31CUgeSuZKprDWb+RzSQrO+Jg7AI4g1lolzTr/jG/LnxA==}
+
+  '@ibm/plex-sans@1.1.0':
+    resolution: {integrity: sha512-WPgvO6Yfj2w5YbhyAr1tv95RUz4LRJlqN+CmYvBglabXteufP1D1E9BABMde+ZIKdRbFJDoKF5eQzfhpnbgZcQ==}
+
+  '@ibm/plex-serif@0.0.3-alpha.0':
+    resolution: {integrity: sha512-wuyglvk5dVTiOtRMlGhbRdu9zptl84CHLhjzuWPb2LwU3IiFlVWAirKaRKRv/AFwtAT9RoTtvT7spEyffdCzFw==}
+
+  '@ibm/plex@6.0.0-next.6':
+    resolution: {integrity: sha512-B3uGruTn2rS5gweynLmfSe7yCawSRsJguJJQHVQiqf4rh2RNgJFu8YLE2Zd/JHV0ZXoVMOslcXP2k3hMkxKEyA==}
+    engines: {node: '>=14'}
+
   '@ibm/telemetry-js@1.10.1':
     resolution: {integrity: sha512-aQcDq03BKbgNnkHujHbA950wJVHtJnY0PsMHKyxgRvr3XPgInWjDfgxJQmKIp9I8Vy2wpfe0cGmduJfIX0HewQ==}
     hasBin: true
@@ -3060,6 +3123,15 @@ packages:
     resolution: {integrity: sha512-F5z53uvRIF4dYfFfJP3a2Cqg+4P1dgJchJsFnsZE0eZp0LK8X7g2J0CsJHRgns+skpXOlM7n5vFGwkWCWj8qJg==}
     engines: {node: 12.* || >= 14}
 
+  '@lit-labs/ssr-dom-shim@1.4.0':
+    resolution: {integrity: sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==}
+
+  '@lit/context@1.1.6':
+    resolution: {integrity: sha512-M26qDE6UkQbZA2mQ3RjJ3Gzd8TxP+/0obMgE5HfkfLhEEyYE3Bui4A5XHiGPjy0MUGAyxB3QgVuw2ciS0kHn6A==}
+
+  '@lit/reactive-element@2.1.1':
+    resolution: {integrity: sha512-N+dm5PAYdQ8e6UlywyyrgI2t++wFGXfHx+dSJ1oBrg6FAxUj40jId++EaRm80MKX5JnlH1sBsyZ5h0bcZKemCg==}
+
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
 
@@ -3788,6 +3860,9 @@ packages:
   '@types/tinycolor2@1.4.6':
     resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -7126,6 +7201,9 @@ packages:
   flat-cache@6.1.12:
     resolution: {integrity: sha512-U+HqqpZPPXP5d24bWuRzjGqVqUcw64k4nZAbruniDwdRg0H10tvN7H6ku1tjhA4rg5B9GS3siEvwO2qjJJ6f8Q==}
 
+  flatpickr@4.6.13:
+    resolution: {integrity: sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==}
+
   flatted@2.0.2:
     resolution: {integrity: sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==}
 
@@ -8514,6 +8592,15 @@ packages:
   linkify-it@5.0.0:
     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
 
+  lit-element@4.2.1:
+    resolution: {integrity: sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==}
+
+  lit-html@3.3.1:
+    resolution: {integrity: sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==}
+
+  lit@3.3.1:
+    resolution: {integrity: sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==}
+
   livereload-js@3.4.1:
     resolution: {integrity: sha512-5MP0uUeVCec89ZbNOT/i97Mc+q3SxXmiUGhRFOTmhrGPn//uWVQdCvcLJDy64MSBR5MidFdOR7B9viumoavy6g==}
 
@@ -12917,19 +13004,62 @@ snapshots:
     dependencies:
       '@ibm/telemetry-js': 1.10.1
 
+  '@carbon/colors@11.40.0':
+    dependencies:
+      '@ibm/telemetry-js': 1.10.1
+
+  '@carbon/feature-flags@0.30.0':
+    dependencies:
+      '@ibm/telemetry-js': 1.10.1
+
   '@carbon/grid@11.42.0':
     dependencies:
       '@carbon/layout': 11.40.0
       '@ibm/telemetry-js': 1.10.1
 
+  '@carbon/grid@11.43.0':
+    dependencies:
+      '@carbon/layout': 11.41.0
+      '@ibm/telemetry-js': 1.10.1
+
   '@carbon/layout@11.40.0':
     dependencies:
       '@ibm/telemetry-js': 1.10.1
 
+  '@carbon/layout@11.41.0':
+    dependencies:
+      '@ibm/telemetry-js': 1.10.1
+
   '@carbon/motion@11.34.0':
     dependencies:
       '@ibm/telemetry-js': 1.10.1
 
+  '@carbon/motion@11.35.0':
+    dependencies:
+      '@ibm/telemetry-js': 1.10.1
+
+  '@carbon/styles@1.90.0(sass@1.89.2)':
+    dependencies:
+      '@carbon/colors': 11.40.0
+      '@carbon/feature-flags': 0.30.0
+      '@carbon/grid': 11.43.0
+      '@carbon/layout': 11.41.0
+      '@carbon/motion': 11.35.0
+      '@carbon/themes': 11.60.0
+      '@carbon/type': 11.47.0
+      '@ibm/plex': 6.0.0-next.6
+      '@ibm/plex-mono': 1.1.0
+      '@ibm/plex-sans': 1.1.0
+      '@ibm/plex-sans-arabic': 1.1.0
+      '@ibm/plex-sans-devanagari': 1.1.0
+      '@ibm/plex-sans-hebrew': 0.0.3-alpha.0
+      '@ibm/plex-sans-thai': 0.0.3-alpha.0
+      '@ibm/plex-sans-thai-looped': 0.0.3-alpha.0
+      '@ibm/plex-serif': 0.0.3-alpha.0
+      '@ibm/telemetry-js': 1.10.1
+    optionalDependencies:
+      sass: 1.89.2
+
   '@carbon/themes@11.59.0':
     dependencies:
       '@carbon/colors': 11.39.0
@@ -12938,12 +13068,39 @@ snapshots:
       '@ibm/telemetry-js': 1.10.1
       color: 4.2.3
 
+  '@carbon/themes@11.60.0':
+    dependencies:
+      '@carbon/colors': 11.40.0
+      '@carbon/layout': 11.41.0
+      '@carbon/type': 11.47.0
+      '@ibm/telemetry-js': 1.10.1
+      color: 4.2.3
+
   '@carbon/type@11.46.0':
     dependencies:
       '@carbon/grid': 11.42.0
       '@carbon/layout': 11.40.0
       '@ibm/telemetry-js': 1.10.1
 
+  '@carbon/type@11.47.0':
+    dependencies:
+      '@carbon/grid': 11.43.0
+      '@carbon/layout': 11.41.0
+      '@ibm/telemetry-js': 1.10.1
+
+  '@carbon/web-components@2.38.0(sass@1.89.2)':
+    dependencies:
+      '@carbon/styles': 1.90.0(sass@1.89.2)
+      '@floating-ui/dom': 1.7.3
+      '@ibm/telemetry-js': 1.10.1
+      '@lit/context': 1.1.6
+      flatpickr: 4.6.13
+      lit: 3.3.1
+      lodash-es: 4.17.21
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - sass
+
   '@changesets/apply-release-plan@7.0.12':
     dependencies:
       '@changesets/config': 3.1.1
@@ -14334,6 +14491,32 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.2': {}
 
+  '@ibm/plex-mono@1.1.0':
+    dependencies:
+      '@ibm/telemetry-js': 1.10.1
+
+  '@ibm/plex-sans-arabic@1.1.0':
+    dependencies:
+      '@ibm/telemetry-js': 1.10.1
+
+  '@ibm/plex-sans-devanagari@1.1.0':
+    dependencies:
+      '@ibm/telemetry-js': 1.10.1
+
+  '@ibm/plex-sans-hebrew@0.0.3-alpha.0': {}
+
+  '@ibm/plex-sans-thai-looped@0.0.3-alpha.0': {}
+
+  '@ibm/plex-sans-thai@0.0.3-alpha.0': {}
+
+  '@ibm/plex-sans@1.1.0':
+    dependencies:
+      '@ibm/telemetry-js': 1.10.1
+
+  '@ibm/plex-serif@0.0.3-alpha.0': {}
+
+  '@ibm/plex@6.0.0-next.6': {}
+
   '@ibm/telemetry-js@1.10.1': {}
 
   '@inquirer/figures@1.0.9': {}
@@ -14651,6 +14834,16 @@ snapshots:
       tslib: 2.8.1
       upath: 2.0.1
 
+  '@lit-labs/ssr-dom-shim@1.4.0': {}
+
+  '@lit/context@1.1.6':
+    dependencies:
+      '@lit/reactive-element': 2.1.1
+
+  '@lit/reactive-element@2.1.1':
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.4.0
+
   '@manypkg/find-root@1.1.0':
     dependencies:
       '@babel/runtime': 7.28.2
@@ -15484,6 +15677,8 @@ snapshots:
 
   '@types/tinycolor2@1.4.6': {}
 
+  '@types/trusted-types@2.0.7': {}
+
   '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
@@ -20965,6 +21160,8 @@ snapshots:
       flatted: 3.3.3
       hookified: 1.11.0
 
+  flatpickr@4.6.13: {}
+
   flatted@2.0.2: {}
 
   flatted@3.3.3: {}
@@ -22724,6 +22921,22 @@ snapshots:
     dependencies:
       uc.micro: 2.1.0
 
+  lit-element@4.2.1:
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.4.0
+      '@lit/reactive-element': 2.1.1
+      lit-html: 3.3.1
+
+  lit-html@3.3.1:
+    dependencies:
+      '@types/trusted-types': 2.0.7
+
+  lit@3.3.1:
+    dependencies:
+      '@lit/reactive-element': 2.1.1
+      lit-element: 4.2.1
+      lit-html: 3.3.1
+
   livereload-js@3.4.1: {}
 
   load-json-file@4.0.0:
diff --git a/showcase/package.json b/showcase/package.json
index 471363afa66..3b708ce94f3 100644
--- a/showcase/package.json
+++ b/showcase/package.json
@@ -39,6 +39,7 @@
     "@babel/core": "^7.27.1",
     "@babel/eslint-parser": "^7.27.1",
     "@babel/plugin-proposal-decorators": "^7.27.1",
+    "@carbon/web-components": "^2.38.0",
     "@codemirror/lint": "^6.8.4",
     "@codemirror/state": "^6.5.0",
     "@ember/optional-features": "^2.2.0",

From 672d50bb55e8f919b96e2f4344ce9630af322cc6 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Thu, 25 Sep 2025 12:28:38 +0100
Subject: [PATCH 10/18] added `@carbon/[themes|layout|grid|type]` + `@ibm/plex`
 as devDependencies to Showcase app

---
 pnpm-lock.yaml        | 148 +++++++++++++++++++++++++-----------------
 showcase/package.json |   5 ++
 2 files changed, 92 insertions(+), 61 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd857d19cb3..d3c6a4af94f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -415,22 +415,22 @@ importers:
     devDependencies:
       '@carbon/colors':
         specifier: ^11.39.0
-        version: 11.39.0
+        version: 11.40.0
       '@carbon/grid':
         specifier: ^11.42.0
-        version: 11.42.0
+        version: 11.43.0
       '@carbon/layout':
         specifier: ^11.40.0
-        version: 11.40.0
+        version: 11.41.0
       '@carbon/motion':
         specifier: ^11.34.0
-        version: 11.34.0
+        version: 11.35.0
       '@carbon/themes':
         specifier: ^11.59.0
-        version: 11.59.0
+        version: 11.60.0
       '@carbon/type':
         specifier: ^11.46.0
-        version: 11.46.0
+        version: 11.47.0
       '@types/fs-extra':
         specifier: ^11.0.4
         version: 11.0.4
@@ -491,6 +491,18 @@ importers:
       '@babel/plugin-proposal-decorators':
         specifier: ^7.27.1
         version: 7.28.0(@babel/core@7.28.0)
+      '@carbon/grid':
+        specifier: ^11.43.0
+        version: 11.43.0
+      '@carbon/layout':
+        specifier: ^11.41.0
+        version: 11.41.0
+      '@carbon/themes':
+        specifier: ^11.60.0
+        version: 11.60.0
+      '@carbon/type':
+        specifier: ^11.47.0
+        version: 11.47.0
       '@carbon/web-components':
         specifier: ^2.38.0
         version: 2.38.0(sass@1.89.2)
@@ -548,6 +560,9 @@ importers:
       '@hashicorp/design-system-tokens':
         specifier: workspace:*
         version: link:../packages/tokens
+      '@ibm/plex':
+        specifier: ^6.4.1
+        version: 6.4.1
       '@nullvoxpopuli/ember-composable-helpers':
         specifier: ^5.2.11
         version: 5.2.11(@babel/core@7.28.0)(ember-source@6.5.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5))
@@ -1883,53 +1898,53 @@ packages:
   '@bundled-es-modules/memfs@4.17.0':
     resolution: {integrity: sha512-ykdrkEmQr9BV804yd37ikXfNnvxrwYfY9Z2/EtMHFEFadEjsQXJ1zL9bVZrKNLDtm91UdUOEHso6Aweg93K6xQ==}
 
-  '@carbon/colors@11.39.0':
-    resolution: {integrity: sha512-H1hL9NW1I1vks469KuIV/YY4zHUiDQJ/MOlJgv8iCLi0SQS4DWkDslccXAhce8U8qRtx1JPfePhiYkRBbjgKgw==}
-
   '@carbon/colors@11.40.0':
     resolution: {integrity: sha512-mzMtp8vOKQMWrGRKb34ldntpd2Z5WdHyDRLA0nfg8PgPWHQq0zI5Eznrng8OHOuy8bFurMxzA5t8OGqKEuP9cg==}
 
-  '@carbon/feature-flags@0.30.0':
-    resolution: {integrity: sha512-0zOcm4QmjdikW4AXoOeW/DZic4Pd220UFUgPJtCvNgsnLV4hrsTmfdvm2GKrHMm4ob4Q6rPXsZGAdqp/vRiZHA==}
+  '@carbon/colors@11.41.0':
+    resolution: {integrity: sha512-Rr2R4sW4QaNaL6d3jEgrhiw3EkN/odpvU6qXYBd1iTxPEUWespbjuEKQjAGBa7RkpVnZjjrlzF9BW0kF9wVfQw==}
 
-  '@carbon/grid@11.42.0':
-    resolution: {integrity: sha512-l91wFV7uMhaf2PX89cW1zS5iMnzrFVY2d81Xf7U9OdNu8sBTQWxUPtj1RnZyep4F7v/HG8U4DOzfa+nO5GgZeA==}
+  '@carbon/feature-flags@0.31.0':
+    resolution: {integrity: sha512-ikDGgyOc6SZIoNb7jGBTN/ieTbju7WuB4mzzSXDFA4JJKhj9EpZy+cmMiXpRE+dwK+KIFTwjtz6iDyyd52TK0Q==}
 
   '@carbon/grid@11.43.0':
     resolution: {integrity: sha512-AXSCOpTRtkKwZ6qceFYwaQ9CZBFPBnBL+yzbYwCtsuYwFtx7zse3cogs/mYxWXIAMzNxc62UovMy90vGNBTd6w==}
 
-  '@carbon/layout@11.40.0':
-    resolution: {integrity: sha512-2wIOPJZFjt5Y+TZ7NwPTf0l3zif14hBiPwv/nQo76J2Wr1i/NJrYNfBTpUnKxoq6IZEsVd0e6Ab4RLGGIP2eVA==}
+  '@carbon/grid@11.44.0':
+    resolution: {integrity: sha512-bB+yQ09Zw+Z0xkCNAeX+vla9PyZXUREQvzcz1WTcKqUKDwYJlAm1yxbPUM21ORy48EqfRHWUoLjTSKACi3syfg==}
 
   '@carbon/layout@11.41.0':
     resolution: {integrity: sha512-yDv2/ZUnTYrO8YDkK4PLbxeAIXd5zXH0akly5s6Gs5mwyHJpgzVoUffAGx2/z7ns60zsuCN+JDZFD5iYqYJ3aw==}
 
-  '@carbon/motion@11.34.0':
-    resolution: {integrity: sha512-Gc5VcfXO70un5jeCUqlplKal8PpRLzUfxg8x8b1LwKfzjWrgxilHtNk3B4dGj190M9dyrTKVfCCrLKlVtyhEQw==}
+  '@carbon/layout@11.42.0':
+    resolution: {integrity: sha512-+R1AxIt918TEcr73yvT+xNP/JL2+xBQfRt1qlLKwv492yAVqo7KhtISLQeku8nxNS5Osf+iBXvfUG88XX0BMUA==}
 
   '@carbon/motion@11.35.0':
     resolution: {integrity: sha512-z6GAUF5O1d7wma51bMDe/CIYMu1/nBIpb95mmt9CBQrkRswl2sCJdpLELG74HqXV5r3+Ie7OxbWlvZMMsUC+Gw==}
 
-  '@carbon/styles@1.90.0':
-    resolution: {integrity: sha512-M0mJmlJWrVxKdrulM1vffYZKZfWI0RrueXM6tNGPEN0Qr15sKeiYUgpbMZZ2A9E20Mmm1Y14U1Uv3bEJukI0Fw==}
+  '@carbon/motion@11.36.0':
+    resolution: {integrity: sha512-Zc8yocsWN5H3Usa9mzHMA0nhuP+SP5+HRxhyi2RHD5U/eN69j9Tr0TKafHmL4D0WxWBk+d3LPWyMJQ73Bknuzw==}
+
+  '@carbon/styles@1.91.0':
+    resolution: {integrity: sha512-B4KPWQrUpKODms7TaII0tP3NrwH2MON1c4fdVm2iszVo/f34GOfOVj0HKDpCCvo9+4xjwBX0iz3qkOjL98qo+w==}
     peerDependencies:
       sass: ^1.33.0
     peerDependenciesMeta:
       sass:
         optional: true
 
-  '@carbon/themes@11.59.0':
-    resolution: {integrity: sha512-vnFuKTuThYVGQ9f8G/amO0laun6pyr8Nze1KuD6LrOJl6waEC2LPJqNz3rg4ySLievFg9+993R0GNUI9HjC2bw==}
-
   '@carbon/themes@11.60.0':
     resolution: {integrity: sha512-Zhtq4TwDROLgXVuvGVlNWMMrgTORdIzhc43bV/SDjpUlPaUglb1I2KfaaJ/ITjMdM4EmbhsiIbtylDTFF18CGQ==}
 
-  '@carbon/type@11.46.0':
-    resolution: {integrity: sha512-Xt2lhYsRuRrpEESy8BW+xjsf1TXnzv4CdxgAvjL+YSQxzdD0gbMnIhEIpJiDAyWddviqH8ZwxIdlnlfqKrA9rg==}
+  '@carbon/themes@11.61.0':
+    resolution: {integrity: sha512-z626NnhPOBzcpocvb0On9Awrrnr/+0RXZuG7uM8ALKjc9vAYLb1cCw+GXyWHnGGkKbB9OhFTerRzL5Tx3ZU42w==}
 
   '@carbon/type@11.47.0':
     resolution: {integrity: sha512-P2Ta59Hzvq4SD0vqrovuUh+U0MaXKk/7Gj2JgmK+7cSCQ9S+xY9bmTjTSSfWVdonF8coXE3EykSbaXOkmpgAqA==}
 
+  '@carbon/type@11.48.0':
+    resolution: {integrity: sha512-zHD/od5FbuZjdP48yhfAHHnZ5wYML5OL4tyJ/s0fCmJ51rtxgby11kjOof0hKir3K5XgwKE1RzrAEZJy4Lfpqw==}
+
   '@carbon/web-components@2.38.0':
     resolution: {integrity: sha512-/b4r14HGBgY7tYuwyIkRHbWsRpjAbJyC/NdRlc+JALNJ7FUPPThhuWBvkcZ+c9YqE/r11opXDlylU/pERPPmbw==}
 
@@ -2921,8 +2936,8 @@ packages:
   '@ibm/plex-sans-hebrew@0.0.3-alpha.0':
     resolution: {integrity: sha512-sMsn1jU8kyYfSlWMfjcbvpGXJIIXGOZD+sxtBcogZz4umnCq5ys+bmsqlzkfGR25DCB49WvseD2IHbejes0/aA==}
 
-  '@ibm/plex-sans-thai-looped@0.0.3-alpha.0':
-    resolution: {integrity: sha512-mcddR5ZcAQx5TjmaxaXd6gTdtOgxlyVaKqjzQAjUbzNQy0cjTGhIJHB5VrFES7yJLRCtQNCNGP+bzupzHOQERw==}
+  '@ibm/plex-sans-thai-looped@1.1.0':
+    resolution: {integrity: sha512-9zbDGzmtscHgBRTF88y3/92zQx6lmKjz5ZxhgcljilwOpj08BAytDc3mzUl9XGUh+DmOMl0Ql1lk6ecsEYYg2w==}
 
   '@ibm/plex-sans-thai@0.0.3-alpha.0':
     resolution: {integrity: sha512-3RteUFhshRTmP5Swq9LYravDXmVvjxtxsZ7qeSqjn31CUgeSuZKprDWb+RzSQrO+Jg7AI4g1lolzTr/jG/LnxA==}
@@ -2930,13 +2945,16 @@ packages:
   '@ibm/plex-sans@1.1.0':
     resolution: {integrity: sha512-WPgvO6Yfj2w5YbhyAr1tv95RUz4LRJlqN+CmYvBglabXteufP1D1E9BABMde+ZIKdRbFJDoKF5eQzfhpnbgZcQ==}
 
-  '@ibm/plex-serif@0.0.3-alpha.0':
-    resolution: {integrity: sha512-wuyglvk5dVTiOtRMlGhbRdu9zptl84CHLhjzuWPb2LwU3IiFlVWAirKaRKRv/AFwtAT9RoTtvT7spEyffdCzFw==}
+  '@ibm/plex-serif@1.1.0':
+    resolution: {integrity: sha512-ORIyWlK8t8mvpFI7AAfhVFH+sacink2l9AjLiKZscmAzLVSa2dqFckrPOXqx4dK/cax567gWwCpJNEYk7xWxBQ==}
 
   '@ibm/plex@6.0.0-next.6':
     resolution: {integrity: sha512-B3uGruTn2rS5gweynLmfSe7yCawSRsJguJJQHVQiqf4rh2RNgJFu8YLE2Zd/JHV0ZXoVMOslcXP2k3hMkxKEyA==}
     engines: {node: '>=14'}
 
+  '@ibm/plex@6.4.1':
+    resolution: {integrity: sha512-fnsipQywHt3zWvsnlyYKMikcVI7E2fEwpiPnIHFqlbByXVfQfANAAeJk1IV4mNnxhppUIDlhU0TzwYwL++Rn2g==}
+
   '@ibm/telemetry-js@1.10.1':
     resolution: {integrity: sha512-aQcDq03BKbgNnkHujHbA950wJVHtJnY0PsMHKyxgRvr3XPgInWjDfgxJQmKIp9I8Vy2wpfe0cGmduJfIX0HewQ==}
     hasBin: true
@@ -13000,21 +13018,16 @@ snapshots:
       stream: 0.0.3
       util: 0.12.5
 
-  '@carbon/colors@11.39.0':
-    dependencies:
-      '@ibm/telemetry-js': 1.10.1
-
   '@carbon/colors@11.40.0':
     dependencies:
       '@ibm/telemetry-js': 1.10.1
 
-  '@carbon/feature-flags@0.30.0':
+  '@carbon/colors@11.41.0':
     dependencies:
       '@ibm/telemetry-js': 1.10.1
 
-  '@carbon/grid@11.42.0':
+  '@carbon/feature-flags@0.31.0':
     dependencies:
-      '@carbon/layout': 11.40.0
       '@ibm/telemetry-js': 1.10.1
 
   '@carbon/grid@11.43.0':
@@ -13022,15 +13035,16 @@ snapshots:
       '@carbon/layout': 11.41.0
       '@ibm/telemetry-js': 1.10.1
 
-  '@carbon/layout@11.40.0':
+  '@carbon/grid@11.44.0':
     dependencies:
+      '@carbon/layout': 11.42.0
       '@ibm/telemetry-js': 1.10.1
 
   '@carbon/layout@11.41.0':
     dependencies:
       '@ibm/telemetry-js': 1.10.1
 
-  '@carbon/motion@11.34.0':
+  '@carbon/layout@11.42.0':
     dependencies:
       '@ibm/telemetry-js': 1.10.1
 
@@ -13038,15 +13052,19 @@ snapshots:
     dependencies:
       '@ibm/telemetry-js': 1.10.1
 
-  '@carbon/styles@1.90.0(sass@1.89.2)':
+  '@carbon/motion@11.36.0':
     dependencies:
-      '@carbon/colors': 11.40.0
-      '@carbon/feature-flags': 0.30.0
-      '@carbon/grid': 11.43.0
-      '@carbon/layout': 11.41.0
-      '@carbon/motion': 11.35.0
-      '@carbon/themes': 11.60.0
-      '@carbon/type': 11.47.0
+      '@ibm/telemetry-js': 1.10.1
+
+  '@carbon/styles@1.91.0(sass@1.89.2)':
+    dependencies:
+      '@carbon/colors': 11.41.0
+      '@carbon/feature-flags': 0.31.0
+      '@carbon/grid': 11.44.0
+      '@carbon/layout': 11.42.0
+      '@carbon/motion': 11.36.0
+      '@carbon/themes': 11.61.0
+      '@carbon/type': 11.48.0
       '@ibm/plex': 6.0.0-next.6
       '@ibm/plex-mono': 1.1.0
       '@ibm/plex-sans': 1.1.0
@@ -13054,20 +13072,12 @@ snapshots:
       '@ibm/plex-sans-devanagari': 1.1.0
       '@ibm/plex-sans-hebrew': 0.0.3-alpha.0
       '@ibm/plex-sans-thai': 0.0.3-alpha.0
-      '@ibm/plex-sans-thai-looped': 0.0.3-alpha.0
-      '@ibm/plex-serif': 0.0.3-alpha.0
+      '@ibm/plex-sans-thai-looped': 1.1.0
+      '@ibm/plex-serif': 1.1.0
       '@ibm/telemetry-js': 1.10.1
     optionalDependencies:
       sass: 1.89.2
 
-  '@carbon/themes@11.59.0':
-    dependencies:
-      '@carbon/colors': 11.39.0
-      '@carbon/layout': 11.40.0
-      '@carbon/type': 11.46.0
-      '@ibm/telemetry-js': 1.10.1
-      color: 4.2.3
-
   '@carbon/themes@11.60.0':
     dependencies:
       '@carbon/colors': 11.40.0
@@ -13076,11 +13086,13 @@ snapshots:
       '@ibm/telemetry-js': 1.10.1
       color: 4.2.3
 
-  '@carbon/type@11.46.0':
+  '@carbon/themes@11.61.0':
     dependencies:
-      '@carbon/grid': 11.42.0
-      '@carbon/layout': 11.40.0
+      '@carbon/colors': 11.41.0
+      '@carbon/layout': 11.42.0
+      '@carbon/type': 11.48.0
       '@ibm/telemetry-js': 1.10.1
+      color: 4.2.3
 
   '@carbon/type@11.47.0':
     dependencies:
@@ -13088,9 +13100,15 @@ snapshots:
       '@carbon/layout': 11.41.0
       '@ibm/telemetry-js': 1.10.1
 
+  '@carbon/type@11.48.0':
+    dependencies:
+      '@carbon/grid': 11.44.0
+      '@carbon/layout': 11.42.0
+      '@ibm/telemetry-js': 1.10.1
+
   '@carbon/web-components@2.38.0(sass@1.89.2)':
     dependencies:
-      '@carbon/styles': 1.90.0(sass@1.89.2)
+      '@carbon/styles': 1.91.0(sass@1.89.2)
       '@floating-ui/dom': 1.7.3
       '@ibm/telemetry-js': 1.10.1
       '@lit/context': 1.1.6
@@ -14505,7 +14523,9 @@ snapshots:
 
   '@ibm/plex-sans-hebrew@0.0.3-alpha.0': {}
 
-  '@ibm/plex-sans-thai-looped@0.0.3-alpha.0': {}
+  '@ibm/plex-sans-thai-looped@1.1.0':
+    dependencies:
+      '@ibm/telemetry-js': 1.10.1
 
   '@ibm/plex-sans-thai@0.0.3-alpha.0': {}
 
@@ -14513,10 +14533,16 @@ snapshots:
     dependencies:
       '@ibm/telemetry-js': 1.10.1
 
-  '@ibm/plex-serif@0.0.3-alpha.0': {}
+  '@ibm/plex-serif@1.1.0':
+    dependencies:
+      '@ibm/telemetry-js': 1.10.1
 
   '@ibm/plex@6.0.0-next.6': {}
 
+  '@ibm/plex@6.4.1':
+    dependencies:
+      '@ibm/telemetry-js': 1.10.1
+
   '@ibm/telemetry-js@1.10.1': {}
 
   '@inquirer/figures@1.0.9': {}
diff --git a/showcase/package.json b/showcase/package.json
index 3b708ce94f3..815b25ba03d 100644
--- a/showcase/package.json
+++ b/showcase/package.json
@@ -39,6 +39,10 @@
     "@babel/core": "^7.27.1",
     "@babel/eslint-parser": "^7.27.1",
     "@babel/plugin-proposal-decorators": "^7.27.1",
+    "@carbon/grid": "^11.43.0",
+    "@carbon/layout": "^11.41.0",
+    "@carbon/themes": "^11.60.0",
+    "@carbon/type": "^11.47.0",
     "@carbon/web-components": "^2.38.0",
     "@codemirror/lint": "^6.8.4",
     "@codemirror/state": "^6.5.0",
@@ -58,6 +62,7 @@
     "@glint/template": "^1.5.2",
     "@hashicorp/design-system-components": "workspace:*",
     "@hashicorp/design-system-tokens": "workspace:*",
+    "@ibm/plex": "^6.4.1",
     "@nullvoxpopuli/ember-composable-helpers": "^5.2.11",
     "@percy/cli": "^1.30.5",
     "@percy/ember": "^4.2.0",

From fc5a3226899b0fad8dd0aa12e7ac5f63b7d7c5c7 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Thu, 25 Sep 2025 13:32:44 +0100
Subject: [PATCH 11/18] refactored `ComparisonGrid` component to add themed
 background color to the cells/areas

---
 .../carbonization/comparison-grid/item.gts    | 18 +++++-----
 showcase/app/styles/app.scss                  |  7 ++--
 .../carbonization/cds-theming.scss            | 29 +++++++++++++++
 .../carbonization/comparison-grid.scss        | 35 ++++++++++++++++++-
 4 files changed, 77 insertions(+), 12 deletions(-)
 create mode 100644 showcase/app/styles/showcase-components/carbonization/cds-theming.scss

diff --git a/showcase/app/components/shw/carbonization/comparison-grid/item.gts b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
index e38b4e44bf7..61967d6489c 100644
--- a/showcase/app/components/shw/carbonization/comparison-grid/item.gts
+++ b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
@@ -51,13 +51,11 @@ export default class ShwCarbonizationComparisonGridItem extends Component<ShwCar
     return classes.join(' ');
   }
 
-  get themeSelector(): string {
+  get carbonTheme(): string | undefined {
     if (this.args.scope === 'reference') {
-      // TODO! once the theming CSS is ready, update this to use the right CSS selector
-      return `data-hds-theme="${this.args.theme}"`;
-      // TODO! add here a way for the Carbon web components to be locally themed
+      return this.args.theme.replace(/^cds-/, '');
     } else {
-      return `data-cds-theme="${this.args.theme}"`;
+      return undefined;
     }
   }
 
@@ -65,15 +63,17 @@ export default class ShwCarbonizationComparisonGridItem extends Component<ShwCar
     <div
       class={{this.classNames}}
       ...attributes
-      {{! TODO! once the theming CSS is ready, update this to use the right CSS selector }}
+      {{! here we use the custom HDS theming selector/value combination }}
       data-hds-theme={{if (eq @scope "show") @theme}}
-      {{! TODO! add here a way for the Carbon web components to be locally themed }}
-      data-cds-theme={{if (eq @scope "reference") @theme}}
+      {{! here we use the "standard" Carbon theming selector/value combination }}
+      data-carbon-theme={{if (eq @scope "reference") this.carbonTheme}}
     >
       {{#if @label}}
         <ShwLabel>{{@label}}</ShwLabel>
       {{/if}}
-      {{yield (hash Label=ShwLabel)}}
+      <div class="shw-carbonization-comparison-grid__item-content">
+        {{yield (hash Label=ShwLabel)}}
+      </div>
     </div>
   </template>
 }
diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss
index 270ee3ca8b5..a63a273e1f0 100644
--- a/showcase/app/styles/app.scss
+++ b/showcase/app/styles/app.scss
@@ -25,11 +25,14 @@
 @use "./showcase-components/outliner";
 @use "./showcase-components/placeholder";
 @use "./showcase-components/theme-switcher";
-@use "./showcase-components/carbonization/comparison-grid";
-@use "./showcase-components/carbonization/token-preview-color";
 @use "./mock-components/app";
 @use "./mock-components/demo/breakpoints";
 
+// carbonization
+
+@use "./showcase-components/carbonization/cds-theming";
+@use "./showcase-components/carbonization/comparison-grid";
+@use "./showcase-components/carbonization/token-preview-color";
 
 // Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
 // START COMPONENT PAGES IMPORTS
diff --git a/showcase/app/styles/showcase-components/carbonization/cds-theming.scss b/showcase/app/styles/showcase-components/carbonization/cds-theming.scss
new file mode 100644
index 00000000000..2b78280fddc
--- /dev/null
+++ b/showcase/app/styles/showcase-components/carbonization/cds-theming.scss
@@ -0,0 +1,29 @@
+// inspired by:
+// - https://github.com/CarloMcG/portfolio/blob/d96e73f2841bc47317318a98dc1c755a64c9eeb4/src/theme.scss
+// - https://github.com/carbon-design-system/carbon/blob/b78a6bda8a594cc5f3b60ab3141edd63378d5aa6/packages/react/.storybook/styles.scss#L8-L27
+
+// @use '@carbon/themes' as cds-themes with (
+//   $font-path: '~@ibm/plex'
+// );
+@use '@carbon/themes' as cds-themes;
+@use '@carbon/themes/scss/themes' as *;
+
+:root {
+  @include cds-themes.theme($white);
+}
+
+[data-carbon-theme='g0'] {
+  @include cds-themes.theme($white);
+}
+
+[data-carbon-theme='g10'] {
+  @include cds-themes.theme($g10);
+}
+
+[data-carbon-theme='g90'] {
+  @include cds-themes.theme($g90);
+}
+
+[data-carbon-theme='g100'] {
+  @include cds-themes.theme($g100);
+}
diff --git a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
index 4b905b45826..5dba8e741c0 100644
--- a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
+++ b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
@@ -10,7 +10,7 @@
   grid-template-rows: auto, auto;
   grid-template-columns: repeat(5, 1fr);
   row-gap: 0; // we use vertical margin to separate the web-components row from the one above
-  column-gap: 1rem;
+  column-gap: 8px;
 }
 
 .shw-carbonization-comparison-grid__top-label {
@@ -29,6 +29,39 @@
   }
 }
 
+// THEMING BACKGROUNDS
+
+.shw-carbonization-comparison-grid__item-content {
+  padding: 8px;
+  background-color: var(--background-color);
+}
+
+.shw-carbonization-comparison-grid__item--area-hds {
+  --background-color: var(--token-color-surface-primary);
+}
+
+// TODO replace the hex values (copied from the `--cds-background` themed variable) with CSS design tokens from our theming
+.shw-carbonization-comparison-grid__item--area-cds-g0 {
+  --background-color: #ffffff;
+}
+.shw-carbonization-comparison-grid__item--area-cds-g10 {
+  --background-color: #f4f4f4;
+}
+.shw-carbonization-comparison-grid__item--area-cds-g90 {
+  --background-color: #262626;
+}
+.shw-carbonization-comparison-grid__item--area-cds-g100 {
+  --background-color: #161616;
+}
+
+.shw-carbonization-comparison-grid__item--area-cwc-g0,
+.shw-carbonization-comparison-grid__item--area-cwc-g10,
+.shw-carbonization-comparison-grid__item--area-cwc-g90,
+.shw-carbonization-comparison-grid__item--area-cwc-g100 {
+  --background-color: var(--cds-background);
+}
+
+
 // DEBUG
 
 // .shw-carbonization-comparison-grid {

From 73c817a1ba0bf8b397faff6393a21a244e907e9c Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Thu, 25 Sep 2025 17:09:23 +0100
Subject: [PATCH 12/18] added temporary support for IBM Plex font-family

---
 .../carbonization/cds-theming.scss              | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/showcase/app/styles/showcase-components/carbonization/cds-theming.scss b/showcase/app/styles/showcase-components/carbonization/cds-theming.scss
index 2b78280fddc..e69401ad5f2 100644
--- a/showcase/app/styles/showcase-components/carbonization/cds-theming.scss
+++ b/showcase/app/styles/showcase-components/carbonization/cds-theming.scss
@@ -27,3 +27,20 @@
 [data-carbon-theme='g100'] {
   @include cds-themes.theme($g100);
 }
+
+// TODO TEMP understand how we can set the font-family for the web components without defining it at `<body>` level
+
+[data-carbon-theme='g0'],
+[data-carbon-theme='g10'],
+[data-carbon-theme='g90'],
+[data-carbon-theme='g100'] {
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+
+  code {
+    font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace
+  }
+
+  button, select, input, textarea {
+    font-family: inherit
+  }
+}

From 5740e2843640a6814c1b57c918f2808d33e9d5f8 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Thu, 25 Sep 2025 17:28:27 +0100
Subject: [PATCH 13/18] refactored code to support theming for reference web
 components, based on Carbon implementation/specifications

---
 .../badge/sub-sections/carbonization.gts      | 56 ++++++++++++-------
 .../carbonization/comparison-grid/item.gts    | 42 ++++++++------
 showcase/app/index.html                       | 32 ++++++++++-
 .../carbonization/cds-theming.scss            | 49 +++++++++-------
 4 files changed, 122 insertions(+), 57 deletions(-)

diff --git a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
index f4430b2c6bd..363ed80ba99 100644
--- a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
+++ b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
@@ -4,7 +4,6 @@
  */
 
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
-import style from 'ember-style-modifier';
 import { notEq } from 'ember-truth-helpers';
 
 import ShwTextH2 from 'showcase/components/shw/text/h2';
@@ -12,7 +11,10 @@ import ShwFlex from 'showcase/components/shw/flex';
 // import ShwDivider from 'showcase/components/shw/divider';
 import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
 
-import { HdsBadge } from '@hashicorp/design-system-components/components';
+import {
+  HdsBadge,
+  HdsIcon,
+} from '@hashicorp/design-system-components/components';
 import {
   COLORS,
   SIZES,
@@ -24,24 +26,40 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
 
   <ShwCarbonizationComparisonGrid>
     <:themed>
-      <ShwFlex @direction="column" as |SF|>
-        <SF.Item>
-          <HdsBadge @text="Only text" />
-        </SF.Item>
-        <SF.Item>
-          <HdsBadge @icon="activity" @text="Text + icon" />
-        </SF.Item>
-        <SF.Item>
-          <HdsBadge @icon="activity" @text="Only icon" @isIconOnly={{true}} />
-        </SF.Item>
-        <SF.Item {{style width="200px"}}>
-          <HdsBadge
-            @icon="activity"
-            @text="This is a very long text that should go on two lines"
-          />
-        </SF.Item>
-      </ShwFlex>
+      <HdsBadge @text="Only text" />
+    </:themed>
+    <:reference>
+      <cds-tag>Lorem ipsum</cds-tag>
+    </:reference>
+  </ShwCarbonizationComparisonGrid>
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <HdsBadge @icon="activity" @text="Text + icon" />
+    </:themed>
+    <:reference>
+      <cds-tag>Lorem ipsum <HdsIcon @name="activity" slot="icon" /></cds-tag>
+    </:reference>
+  </ShwCarbonizationComparisonGrid>
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <HdsBadge @icon="activity" @text="Only icon" @isIconOnly={{true}} />
+    </:themed>
+    <:reference>
+      {{! <cds-tag><cds-icon shape="check"></cds-icon></cds-tag> }}
+      <cds-tag><HdsIcon @name="activity" slot="icon" /></cds-tag>
+    </:reference>
+  </ShwCarbonizationComparisonGrid>
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <HdsBadge
+        @icon="activity"
+        @text="This is a very long text that should go on two lines"
+      />
     </:themed>
+    <:reference>
+      <cds-tag><HdsIcon @name="activity" slot="icon" />
+        This is a very long text that should go on multiple lines</cds-tag>
+    </:reference>
   </ShwCarbonizationComparisonGrid>
 
   <ShwTextH2>Size</ShwTextH2>
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/item.gts b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
index 61967d6489c..293608f29b0 100644
--- a/showcase/app/components/shw/carbonization/comparison-grid/item.gts
+++ b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
@@ -43,6 +43,31 @@ export default class ShwCarbonizationComparisonGridItem extends Component<ShwCar
       `shw-carbonization-comparison-grid__item--scope-${this.args.scope}`,
     );
 
+    if (this.args.scope === 'show') {
+      // here we use the custom HDS theming selector
+      classes.push(`hds-theme-${this.args.theme}`);
+    }
+
+    if (this.args.scope === 'reference') {
+      // here we use the web-components specific selector (see: https://github.com/carbon-design-system/carbon/blob/main/packages/web-components/docs/carbon-cdn-style-helpers.mdx#carbon-theme-zoning-classes)
+      let selector;
+      switch (this.args.theme) {
+        case 'cds-g100':
+          selector = 'cds-theme-zone-g100';
+          break;
+        case 'cds-g90':
+          selector = 'cds-theme-zone-g90';
+          break;
+        case 'cds-g10':
+          selector = 'cds-theme-zone-g10';
+          break;
+        default:
+          selector = 'cds-theme-zone-white';
+          break;
+      }
+      classes.push(selector);
+    }
+
     // add a class based on `this.area`
     classes.push(
       `shw-carbonization-comparison-grid__item--area-${this.areaName}`,
@@ -51,23 +76,8 @@ export default class ShwCarbonizationComparisonGridItem extends Component<ShwCar
     return classes.join(' ');
   }
 
-  get carbonTheme(): string | undefined {
-    if (this.args.scope === 'reference') {
-      return this.args.theme.replace(/^cds-/, '');
-    } else {
-      return undefined;
-    }
-  }
-
   <template>
-    <div
-      class={{this.classNames}}
-      ...attributes
-      {{! here we use the custom HDS theming selector/value combination }}
-      data-hds-theme={{if (eq @scope "show") @theme}}
-      {{! here we use the "standard" Carbon theming selector/value combination }}
-      data-carbon-theme={{if (eq @scope "reference") this.carbonTheme}}
-    >
+    <div class={{this.classNames}} ...attributes>
       {{#if @label}}
         <ShwLabel>{{@label}}</ShwLabel>
       {{/if}}
diff --git a/showcase/app/index.html b/showcase/app/index.html
index e62bd7fa867..eab0e6c3c46 100644
--- a/showcase/app/index.html
+++ b/showcase/app/index.html
@@ -27,6 +27,36 @@
 
   <link rel="shortcut icon" href="/assets/logos/favicon.png" />
 
+  <!-- IBM Carbon Web Components - Import via CDN -->
+  <script type="module"
+    src="https://1.www.s81c.com/common/carbon/web-components/version/v2.28.0/badge-indicator.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.28.0/tag.min.js"></script>
+  <script type="module"
+    src="https://1.www.s81c.com/common/carbon/web-components/version/v2.28.0/inline-loading.min.js"></script>
+  <!-- This contains global styles and CSS resets too! -->
+  <!-- <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/latest/themes.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+  <style type="text/css">
+    /* manually setting the default font */
+    /* body {
+        font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+      } */
+
+    /* Suppress custom element until styles are loaded */
+    cds-badge-indicator:not(:defined),
+    cds-icon:not(:defined),
+    /* cds-icon-button:not(:defined), */
+    cds-tag:not(:defined),
+    cds-dismissible-tag:not(:defined),
+    cds-operational-tag:not(:defined),
+    cds-selectable-tag:not(:defined) {
+      visibility: hidden;
+    }
+  </style>
+
   {{content-for "head-footer"}}
 </head>
 
@@ -39,4 +69,4 @@
   {{content-for "body-footer"}}
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/showcase/app/styles/showcase-components/carbonization/cds-theming.scss b/showcase/app/styles/showcase-components/carbonization/cds-theming.scss
index e69401ad5f2..bae5496881b 100644
--- a/showcase/app/styles/showcase-components/carbonization/cds-theming.scss
+++ b/showcase/app/styles/showcase-components/carbonization/cds-theming.scss
@@ -5,35 +5,42 @@
 // @use '@carbon/themes' as cds-themes with (
 //   $font-path: '~@ibm/plex'
 // );
-@use '@carbon/themes' as cds-themes;
-@use '@carbon/themes/scss/themes' as *;
+// @use '@carbon/themes' as cds-themes;
+// @use '@carbon/themes/scss/themes' as *;
 
-:root {
-  @include cds-themes.theme($white);
-}
+// :root {
+//   @include cds-themes.theme($white);
+// }
 
-[data-carbon-theme='g0'] {
-  @include cds-themes.theme($white);
-}
+// [data-carbon-theme='g0'] {
+//   @include cds-themes.theme($white);
+// }
 
-[data-carbon-theme='g10'] {
-  @include cds-themes.theme($g10);
-}
+// [data-carbon-theme='g10'] {
+//   @include cds-themes.theme($g10);
+// }
 
-[data-carbon-theme='g90'] {
-  @include cds-themes.theme($g90);
-}
+// [data-carbon-theme='g90'] {
+//   @include cds-themes.theme($g90);
+// }
 
-[data-carbon-theme='g100'] {
-  @include cds-themes.theme($g100);
-}
+// [data-carbon-theme='g100'] {
+//   @include cds-themes.theme($g100);
+// }
 
 // TODO TEMP understand how we can set the font-family for the web components without defining it at `<body>` level
 
-[data-carbon-theme='g0'],
-[data-carbon-theme='g10'],
-[data-carbon-theme='g90'],
-[data-carbon-theme='g100'] {
+// these are commented for now
+// [data-carbon-theme='g0'],
+// [data-carbon-theme='g10'],
+// [data-carbon-theme='g90'],
+// [data-carbon-theme='g100']
+
+// see: https://github.com/carbon-design-system/carbon/blob/main/packages/web-components/docs/carbon-cdn-style-helpers.mdx#carbon-theme-zoning-classes
+.cds-theme-zone-white,
+.cds-theme-zone-g10,
+.cds-theme-zone-g90,
+.cds-theme-zone-g100 {
   font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
 
   code {

From 228563d62242ac369f1b51d602b549211578f68f Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Thu, 25 Sep 2025 17:32:48 +0100
Subject: [PATCH 14/18] small refactoring

---
 .../sub-sections/carbonization.gts            | 12 ++++----
 .../badge/sub-sections/carbonization.gts      | 28 +++++++++----------
 .../button/sub-sections/carbonization.gts     | 16 +++++------
 .../focus-ring/sub-sections/carbonization.gts |  4 +--
 .../typography/sub-sections/carbonization.gts |  4 +--
 .../carbonization/comparison-grid/index.gts   |  8 +++---
 .../carbonization/comparison-grid/item.gts    |  4 +--
 .../token-preview-color/index.gts             |  4 +--
 8 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts b/showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts
index 21e9f6e361e..482ec2f594c 100644
--- a/showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts
+++ b/showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts
@@ -22,7 +22,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
   <ShwTextH2>Size</ShwTextH2>
 
   <ShwCarbonizationComparisonGrid>
-    <:themed>
+    <:theming>
       <ShwFlex @direction="column" as |SF|>
         {{#each SIZES as |size|}}
           <SF.Item>
@@ -31,13 +31,13 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
           </SF.Item>
         {{/each}}
       </ShwFlex>
-    </:themed>
+    </:theming>
   </ShwCarbonizationComparisonGrid>
 
   <ShwTextH2>Type</ShwTextH2>
 
   <ShwCarbonizationComparisonGrid>
-    <:themed>
+    <:theming>
       <ShwFlex @direction="column" as |SF|>
         {{#each TYPES as |type|}}
           <SF.Item>
@@ -46,7 +46,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
           </SF.Item>
         {{/each}}
       </ShwFlex>
-    </:themed>
+    </:theming>
   </ShwCarbonizationComparisonGrid>
 
   <ShwTextH2>Color</ShwTextH2>
@@ -55,7 +55,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
     <ShwCarbonizationComparisonGrid
       @hideThemeLabels={{(if (notEq index 0) true)}}
     >
-      <:themed>
+      <:theming>
         <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
           {{#each TYPES as |type|}}
             <SF.Item class="shw-component-badge-sample-color--{{color}}">
@@ -64,7 +64,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
             </SF.Item>
           {{/each}}
         </ShwFlex>
-      </:themed>
+      </:theming>
     </ShwCarbonizationComparisonGrid>
   {{/each}}
 </template>;
diff --git a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
index 363ed80ba99..83dc4cd2d5f 100644
--- a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
+++ b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
@@ -25,37 +25,37 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
   <ShwTextH2>Content</ShwTextH2>
 
   <ShwCarbonizationComparisonGrid>
-    <:themed>
+    <:theming>
       <HdsBadge @text="Only text" />
-    </:themed>
+    </:theming>
     <:reference>
       <cds-tag>Lorem ipsum</cds-tag>
     </:reference>
   </ShwCarbonizationComparisonGrid>
   <ShwCarbonizationComparisonGrid>
-    <:themed>
+    <:theming>
       <HdsBadge @icon="activity" @text="Text + icon" />
-    </:themed>
+    </:theming>
     <:reference>
       <cds-tag>Lorem ipsum <HdsIcon @name="activity" slot="icon" /></cds-tag>
     </:reference>
   </ShwCarbonizationComparisonGrid>
   <ShwCarbonizationComparisonGrid>
-    <:themed>
+    <:theming>
       <HdsBadge @icon="activity" @text="Only icon" @isIconOnly={{true}} />
-    </:themed>
+    </:theming>
     <:reference>
       {{! <cds-tag><cds-icon shape="check"></cds-icon></cds-tag> }}
       <cds-tag><HdsIcon @name="activity" slot="icon" /></cds-tag>
     </:reference>
   </ShwCarbonizationComparisonGrid>
   <ShwCarbonizationComparisonGrid>
-    <:themed>
+    <:theming>
       <HdsBadge
         @icon="activity"
         @text="This is a very long text that should go on two lines"
       />
-    </:themed>
+    </:theming>
     <:reference>
       <cds-tag><HdsIcon @name="activity" slot="icon" />
         This is a very long text that should go on multiple lines</cds-tag>
@@ -65,7 +65,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
   <ShwTextH2>Size</ShwTextH2>
 
   <ShwCarbonizationComparisonGrid>
-    <:themed>
+    <:theming>
       <ShwFlex @direction="column" as |SF|>
         {{#each SIZES as |size|}}
           <SF.Item>
@@ -79,13 +79,13 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
           </SF.Item>
         {{/each}}
       </ShwFlex>
-    </:themed>
+    </:theming>
   </ShwCarbonizationComparisonGrid>
 
   <ShwTextH2>Type</ShwTextH2>
 
   <ShwCarbonizationComparisonGrid>
-    <:themed>
+    <:theming>
       <ShwFlex @direction="column" as |SF|>
         {{#each TYPES as |type|}}
           <SF.Item>
@@ -99,7 +99,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
           </SF.Item>
         {{/each}}
       </ShwFlex>
-    </:themed>
+    </:theming>
   </ShwCarbonizationComparisonGrid>
 
   <ShwTextH2>Color</ShwTextH2>
@@ -108,7 +108,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
     <ShwCarbonizationComparisonGrid
       @hideThemeLabels={{(if (notEq index 0) true)}}
     >
-      <:themed>
+      <:theming>
         <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
           {{#each TYPES as |type|}}
             <SF.Item class="shw-component-badge-sample-color--{{color}}">
@@ -128,7 +128,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
             </SF.Item>
           {{/each}}
         </ShwFlex>
-      </:themed>
+      </:theming>
     </ShwCarbonizationComparisonGrid>
   {{/each}}
 </template>;
diff --git a/showcase/app/components/page-components/button/sub-sections/carbonization.gts b/showcase/app/components/page-components/button/sub-sections/carbonization.gts
index 3f41a999f47..070ec461959 100644
--- a/showcase/app/components/page-components/button/sub-sections/carbonization.gts
+++ b/showcase/app/components/page-components/button/sub-sections/carbonization.gts
@@ -24,7 +24,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
   <ShwTextH2>Content</ShwTextH2>
 
   <ShwCarbonizationComparisonGrid>
-    <:themed>
+    <:theming>
       <ShwFlex @direction="column" as |SF|>
         <SF.Item>
           <HdsButton @text="Lorem ipsum" />
@@ -52,13 +52,13 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
           <CodeFragmentWithLoadingState />
         </SF.Item>
       </ShwFlex>
-    </:themed>
+    </:theming>
   </ShwCarbonizationComparisonGrid>
 
   <ShwTextH2>Sizes</ShwTextH2>
 
   <ShwCarbonizationComparisonGrid>
-    <:themed>
+    <:theming>
       <ShwFlex @direction="column" as |SF|>
         {{#each SIZES as |size|}}
           <SF.Item>
@@ -71,13 +71,13 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
           </SF.Item>
         {{/each}}
       </ShwFlex>
-    </:themed>
+    </:theming>
   </ShwCarbonizationComparisonGrid>
 
   <ShwTextH2>Colors</ShwTextH2>
 
   <ShwCarbonizationComparisonGrid>
-    <:themed>
+    <:theming>
       <ShwFlex @direction="column" as |SF|>
         {{#each COLORS as |color|}}
           <SF.Item>
@@ -85,7 +85,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
           </SF.Item>
         {{/each}}
       </ShwFlex>
-    </:themed>
+    </:theming>
   </ShwCarbonizationComparisonGrid>
 
   <ShwTextH2>States</ShwTextH2>
@@ -95,7 +95,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
     {{#each STATES as |state|}}
       <ShwTextBody>{{state}}</ShwTextBody>
       <ShwCarbonizationComparisonGrid>
-        <:themed>
+        <:theming>
           <ShwFlex @direction="column" @gap="0.75rem" as |SF|>
             {{#each SIZES as |size|}}
               <SF.Item>
@@ -119,7 +119,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
               </SF.Item>
             {{/each}}
           </ShwFlex>
-        </:themed>
+        </:theming>
       </ShwCarbonizationComparisonGrid>
     {{/each}}
   {{/each}}
diff --git a/showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts b/showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts
index b48c7417471..722d4dbf06f 100644
--- a/showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts
+++ b/showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts
@@ -12,7 +12,7 @@ import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonizatio
 
 const SubSectionCarbonization: TemplateOnlyComponent = <template>
   <ShwCarbonizationComparisonGrid>
-    <:themed>
+    <:theming>
       <ShwFlex @direction="column" as |SF|>
         <SF.Item>
           <div
@@ -54,7 +54,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
           </div>
         </SF.Item>
       </ShwFlex>
-    </:themed>
+    </:theming>
   </ShwCarbonizationComparisonGrid>
 </template>;
 
diff --git a/showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts b/showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts
index 48ebfe226bb..47c7b17ae60 100644
--- a/showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts
+++ b/showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts
@@ -16,7 +16,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
     <ShwCarbonizationComparisonGrid
       @hideThemeLabels={{(if (notEq style "display-500") true)}}
     >
-      <:themed>
+      <:theming>
         <ShwFlex @direction="column" as |SF|>
           {{#each weights as |weight|}}
             <SF.Item>
@@ -26,7 +26,7 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
             </SF.Item>
           {{/each}}
         </ShwFlex>
-      </:themed>
+      </:theming>
     </ShwCarbonizationComparisonGrid>
   {{/each-in}}
 </template>;
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/index.gts b/showcase/app/components/shw/carbonization/comparison-grid/index.gts
index fa111986ea6..4da8f4e6fd7 100644
--- a/showcase/app/components/shw/carbonization/comparison-grid/index.gts
+++ b/showcase/app/components/shw/carbonization/comparison-grid/index.gts
@@ -11,7 +11,7 @@ export interface ShwCarbonizationComparisonGridSignature {
   };
   Blocks: {
     label: [];
-    themed: [];
+    theming: [];
     reference: [];
   };
   Element: HTMLDivElement;
@@ -40,14 +40,14 @@ const ShwCarbonizationComparisonGrid: TemplateOnlyComponent<ShwCarbonizationComp
         }}</ShwLabel>
     {{/if}}
     <div class="shw-carbonization-comparison-grid" ...attributes>
-      {{#if (has-block "themed")}}
+      {{#if (has-block "theming")}}
         {{#each THEMES as |theme|}}
           <ShwCarbonizationComparisonGridItem
-            @scope="show"
+            @scope="theming"
             @theme={{theme}}
             @label={{(unless @hideThemeLabels theme)}}
           >
-            {{yield to="themed"}}
+            {{yield to="theming"}}
           </ShwCarbonizationComparisonGridItem>
         {{/each}}
       {{/if}}
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/item.gts b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
index 293608f29b0..e6d92753cca 100644
--- a/showcase/app/components/shw/carbonization/comparison-grid/item.gts
+++ b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
@@ -13,7 +13,7 @@ export interface ShwCarbonizationComparisonGridItemSignature {
   Args: {
     label?: string;
     theme: Theme;
-    scope: 'show' | 'reference';
+    scope: 'theming' | 'reference';
   };
   Blocks: {
     default: [
@@ -43,7 +43,7 @@ export default class ShwCarbonizationComparisonGridItem extends Component<ShwCar
       `shw-carbonization-comparison-grid__item--scope-${this.args.scope}`,
     );
 
-    if (this.args.scope === 'show') {
+    if (this.args.scope === 'theming') {
       // here we use the custom HDS theming selector
       classes.push(`hds-theme-${this.args.theme}`);
     }
diff --git a/showcase/app/components/shw/carbonization/token-preview-color/index.gts b/showcase/app/components/shw/carbonization/token-preview-color/index.gts
index 703a7225e7f..46601622dbb 100644
--- a/showcase/app/components/shw/carbonization/token-preview-color/index.gts
+++ b/showcase/app/components/shw/carbonization/token-preview-color/index.gts
@@ -34,12 +34,12 @@ export default class ShwCarbonizationTokenPreviewColor extends Component<ShwCarb
       @label={{this.shortName}}
       @hideThemeLabels={{true}}
     >
-      <:themed>
+      <:theming>
         <div
           class="shw-carbonization-token-preview-color"
           style={{this.style}}
         />
-      </:themed>
+      </:theming>
     </ShwCarbonizationComparisonGrid>
   </template>
 }

From a6dce01425a492623b37d56f3da798ad4fb9a1b9 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Thu, 25 Sep 2025 18:49:15 +0100
Subject: [PATCH 15/18] small refactorings

---
 .../badge/sub-sections/carbonization.gts      | 251 ++++++++++++++++--
 .../carbonization/comparison-grid/item.gts    |   9 +-
 .../carbonization/comparison-grid.scss        |  27 +-
 3 files changed, 241 insertions(+), 46 deletions(-)

diff --git a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
index 83dc4cd2d5f..2e343539760 100644
--- a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
+++ b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
@@ -5,6 +5,7 @@
 
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { notEq } from 'ember-truth-helpers';
+import { array } from '@ember/helper';
 
 import ShwTextH2 from 'showcase/components/shw/text/h2';
 import ShwFlex from 'showcase/components/shw/flex';
@@ -80,6 +81,24 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
         {{/each}}
       </ShwFlex>
     </:theming>
+    <:reference>
+      <ShwFlex @direction="column" as |SF|>
+        {{#let (array "sm" "md" "lg") as |SIZES|}}
+          {{#each SIZES as |size|}}
+            <SF.Item>
+              <cds-tag size={{size}}><HdsIcon
+                  @name="activity"
+                  slot="icon"
+                /></cds-tag>
+              <cds-tag size={{size}}><HdsIcon
+                  @name="activity"
+                  slot="icon"
+                />Lorem ipsum</cds-tag>
+            </SF.Item>
+          {{/each}}
+        {{/let}}
+      </ShwFlex>
+    </:reference>
   </ShwCarbonizationComparisonGrid>
 
   <ShwTextH2>Type</ShwTextH2>
@@ -100,37 +119,215 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
         {{/each}}
       </ShwFlex>
     </:theming>
+    <:reference>
+      <ShwFlex @direction="column" as |SF|>
+        {{#let (array "gray" "high-contrast" "outline") as |TYPES|}}
+          {{#each TYPES as |type|}}
+            <SF.Item>
+              <cds-tag type={{type}}><HdsIcon
+                  @name="activity"
+                  slot="icon"
+                /></cds-tag>
+              <cds-tag type={{type}}><HdsIcon @name="activity" slot="icon" />
+                Lorem ipsum</cds-tag>
+            </SF.Item>
+          {{/each}}
+        {{/let}}
+      </ShwFlex>
+    </:reference>
   </ShwCarbonizationComparisonGrid>
 
   <ShwTextH2>Color</ShwTextH2>
 
-  {{#each COLORS as |color index|}}
-    <ShwCarbonizationComparisonGrid
-      @hideThemeLabels={{(if (notEq index 0) true)}}
-    >
-      <:theming>
-        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
-          {{#each TYPES as |type|}}
-            <SF.Item class="shw-component-badge-sample-color--{{color}}">
-              <HdsBadge
-                @icon="activity"
-                @text="Lorem Ipsum"
-                @type={{type}}
-                @color={{color}}
-                @isIconOnly={{true}}
-              />
-              <HdsBadge
-                @icon="activity"
-                @text="Lorem ipsum"
-                @type={{type}}
-                @color={{color}}
-              />
-            </SF.Item>
-          {{/each}}
-        </ShwFlex>
-      </:theming>
-    </ShwCarbonizationComparisonGrid>
-  {{/each}}
+  <ShwCarbonizationComparisonGrid @label="neutral">
+    <:theming>
+      <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+        {{#each TYPES as |type|}}
+          <SF.Item class="shw-component-badge-sample-color--neutral">
+            <HdsBadge
+              @icon="activity"
+              @text="Lorem Ipsum"
+              @type={{type}}
+              @color="neutral"
+              @isIconOnly={{true}}
+            />
+            <HdsBadge
+              @icon="activity"
+              @text="Lorem ipsum"
+              @type={{type}}
+              @color="neutral"
+            />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:theming>
+    <:reference>
+      <ShwFlex @direction="column" as |SF|>
+        <SF.Item>
+          <cds-tag type="gray"><HdsIcon
+              @name="activity"
+              slot="icon"
+            /></cds-tag>
+          <cds-tag type="gray"><HdsIcon @name="activity" slot="icon" />
+            Lorem ipsum</cds-tag>
+        </SF.Item>
+        <SF.Item>
+          <cds-tag type="outline"><HdsIcon
+              @name="activity"
+              slot="icon"
+            /></cds-tag>
+          <cds-tag type="outline"><HdsIcon @name="activity" slot="icon" />
+            Lorem ipsum</cds-tag>
+        </SF.Item>
+      </ShwFlex>
+    </:reference>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwCarbonizationComparisonGrid @label="neutral-dark-mode">
+    <:theming>
+      <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+        {{#each TYPES as |type|}}
+          <SF.Item class="shw-component-badge-sample-color--neutral-dark-mode">
+            <HdsBadge
+              @icon="activity"
+              @text="Lorem Ipsum"
+              @type={{type}}
+              @color="neutral-dark-mode"
+              @isIconOnly={{true}}
+            />
+            <HdsBadge
+              @icon="activity"
+              @text="Lorem ipsum"
+              @type={{type}}
+              @color="neutral-dark-mode"
+            />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:theming>
+    <:reference>
+      <cds-tag type="high-contrast"><HdsIcon
+          @name="activity"
+          slot="icon"
+        /></cds-tag>
+      <cds-tag type="high-contrast"><HdsIcon @name="activity" slot="icon" />
+        Lorem ipsum</cds-tag>
+    </:reference>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwCarbonizationComparisonGrid @label="highlight">
+    <:theming>
+      <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+        {{#each TYPES as |type|}}
+          <SF.Item class="shw-component-badge-sample-color--highlight">
+            <HdsBadge
+              @icon="activity"
+              @text="Lorem Ipsum"
+              @type={{type}}
+              @color="highlight"
+              @isIconOnly={{true}}
+            />
+            <HdsBadge
+              @icon="activity"
+              @text="Lorem ipsum"
+              @type={{type}}
+              @color="highlight"
+            />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:theming>
+    <:reference>
+      <cds-tag type="purple"><HdsIcon @name="activity" slot="icon" /></cds-tag>
+      <cds-tag type="purple"><HdsIcon @name="activity" slot="icon" />
+        Lorem ipsum</cds-tag>
+    </:reference>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwCarbonizationComparisonGrid @label="success">
+    <:theming>
+      <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+        {{#each TYPES as |type|}}
+          <SF.Item class="shw-component-badge-sample-color--success">
+            <HdsBadge
+              @icon="activity"
+              @text="Lorem Ipsum"
+              @type={{type}}
+              @color="success"
+              @isIconOnly={{true}}
+            />
+            <HdsBadge
+              @icon="activity"
+              @text="Lorem ipsum"
+              @type={{type}}
+              @color="success"
+            />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:theming>
+    <:reference>
+      <cds-tag type="green"><HdsIcon @name="activity" slot="icon" /></cds-tag>
+      <cds-tag type="green"><HdsIcon @name="activity" slot="icon" />
+        Lorem ipsum</cds-tag>
+    </:reference>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwCarbonizationComparisonGrid @label="warning">
+    <:theming>
+      <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+        {{#each TYPES as |type|}}
+          <SF.Item class="shw-component-badge-sample-color--warning">
+            <HdsBadge
+              @icon="activity"
+              @text="Lorem Ipsum"
+              @type={{type}}
+              @color="warning"
+              @isIconOnly={{true}}
+            />
+            <HdsBadge
+              @icon="activity"
+              @text="Lorem ipsum"
+              @type={{type}}
+              @color="warning"
+            />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:theming>
+    <:reference>
+      <code>???</code>
+    </:reference>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwCarbonizationComparisonGrid @hideThemeLabels={{true}} @label="critical">
+    <:theming>
+      <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+        {{#each TYPES as |type|}}
+          <SF.Item class="shw-component-badge-sample-color--critical">
+            <HdsBadge
+              @icon="activity"
+              @text="Lorem Ipsum"
+              @type={{type}}
+              @color="critical"
+              @isIconOnly={{true}}
+            />
+            <HdsBadge
+              @icon="activity"
+              @text="Lorem ipsum"
+              @type={{type}}
+              @color="critical"
+            />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:theming>
+    <:reference>
+      <cds-tag type="red"><HdsIcon @name="activity" slot="icon" /></cds-tag>
+      <cds-tag type="red"><HdsIcon @name="activity" slot="icon" />
+        Lorem ipsum</cds-tag>
+    </:reference>
+  </ShwCarbonizationComparisonGrid>
 </template>;
 
 export default SubSectionCarbonization;
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/item.gts b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
index e6d92753cca..d9c8f759e42 100644
--- a/showcase/app/components/shw/carbonization/comparison-grid/item.gts
+++ b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
@@ -38,11 +38,6 @@ export default class ShwCarbonizationComparisonGridItem extends Component<ShwCar
   get classNames(): string {
     const classes = ['shw-carbonization-comparison-grid__item'];
 
-    // add a class based on the `@scope` argument
-    classes.push(
-      `shw-carbonization-comparison-grid__item--scope-${this.args.scope}`,
-    );
-
     if (this.args.scope === 'theming') {
       // here we use the custom HDS theming selector
       classes.push(`hds-theme-${this.args.theme}`);
@@ -79,7 +74,9 @@ export default class ShwCarbonizationComparisonGridItem extends Component<ShwCar
   <template>
     <div class={{this.classNames}} ...attributes>
       {{#if @label}}
-        <ShwLabel>{{@label}}</ShwLabel>
+        <ShwLabel
+          class="shw-carbonization-comparison-grid__item-label"
+        >{{@label}}</ShwLabel>
       {{/if}}
       <div class="shw-carbonization-comparison-grid__item-content">
         {{yield (hash Label=ShwLabel)}}
diff --git a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
index 5dba8e741c0..42aa034779d 100644
--- a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
+++ b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
@@ -7,9 +7,9 @@
   grid-template-areas:
     "hds cds-g0 cds-g10 cds-g90 cds-g100"
     "--- cwc-g0 cwc-g10 cwc-g90 cwc-g100";
-  grid-template-rows: auto, auto;
+  grid-template-rows: auto auto;
   grid-template-columns: repeat(5, 1fr);
-  row-gap: 0; // we use vertical margin to separate the web-components row from the one above
+  row-gap: 12px;
   column-gap: 8px;
 }
 
@@ -17,11 +17,7 @@
   margin-top: 2rem;
 }
 
-// .shw-carbonization-comparison-grid__item {}
-
-.shw-carbonization-comparison-grid__item--scope-reference {
-  margin-top: 1rem;
-}
+// ITEM
 
 @each $area in 'hds', 'cds-g0', 'cds-g10', 'cds-g90', 'cds-g100', 'cwc-g0', 'cwc-g10', 'cwc-g90', 'cwc-g100' {
   .shw-carbonization-comparison-grid__item--area-#{$area} {
@@ -29,26 +25,31 @@
   }
 }
 
+.shw-carbonization-comparison__item-label {
+  // override the margin since we're using `row-gap` above
+  margin-bottom: 0;
+}
+
 // THEMING BACKGROUNDS
 
 .shw-carbonization-comparison-grid__item-content {
   padding: 8px;
-  background-color: var(--background-color);
+  background-color: var(--content-background-color);
 }
 
 .shw-carbonization-comparison-grid__item--area-hds {
-  --background-color: var(--token-color-surface-primary);
+  --content-background-color: var(--token-color-surface-primary);
 }
 
 // TODO replace the hex values (copied from the `--cds-background` themed variable) with CSS design tokens from our theming
 .shw-carbonization-comparison-grid__item--area-cds-g0 {
-  --background-color: #ffffff;
+  --content-background-color: #ffffff;
 }
 .shw-carbonization-comparison-grid__item--area-cds-g10 {
-  --background-color: #f4f4f4;
+  --content-background-color: #f4f4f4;
 }
 .shw-carbonization-comparison-grid__item--area-cds-g90 {
-  --background-color: #262626;
+  --content-background-color: #262626;
 }
 .shw-carbonization-comparison-grid__item--area-cds-g100 {
   --background-color: #161616;
@@ -58,7 +59,7 @@
 .shw-carbonization-comparison-grid__item--area-cwc-g10,
 .shw-carbonization-comparison-grid__item--area-cwc-g90,
 .shw-carbonization-comparison-grid__item--area-cwc-g100 {
-  --background-color: var(--cds-background);
+  --content-background-color: var(--cds-background);
 }
 
 

From cb3e61310510cd67dd40c294b26b96dd2b46c4b7 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Thu, 25 Sep 2025 19:19:28 +0100
Subject: [PATCH 16/18] refactored content organization to have the
 carbonization pages as standalone pages

---
 .../badge-count/carbonization.gts             |  81 ++++
 .../page-components/badge-count/index.gts     |  11 -
 .../sub-sections/carbonization.gts            |  72 ----
 .../page-components/badge/carbonization.gts   | 352 ++++++++++++++++++
 .../page-components/badge/index.gts           |  11 -
 .../badge/sub-sections/carbonization.gts      | 333 -----------------
 .../page-components/button/carbonization.gts  | 149 ++++++++
 .../page-components/button/index.gts          |  11 -
 .../button/sub-sections/carbonization.gts     | 128 -------
 .../page-foundations/color/carbonization.gts  |  25 ++
 .../page-foundations/color/index.gts          |   6 +-
 .../focus-ring/carbonization.gts              |  67 ++++
 .../page-foundations/focus-ring/index.gts     |  11 -
 .../focus-ring/sub-sections/carbonization.gts |  61 ---
 .../typography/carbonization.gts              |  42 +++
 .../page-foundations/typography/index.gts     |  11 -
 .../typography/sub-sections/carbonization.gts |  34 --
 showcase/app/router.ts                        |  24 +-
 showcase/app/styles/_globals.scss             |   6 +
 .../carbonization/comparison-grid.scss        |   2 +-
 showcase/app/templates/index.hbs              |  41 ++
 .../badge-count/carbonization.gts             |  13 +
 .../index.gts}                                |   0
 .../page-components/badge/carbonization.gts   |  13 +
 .../{badge.gts => badge/index.gts}            |   0
 .../page-components/button/carbonization.gts  |  13 +
 .../{button.gts => button/index.gts}          |   0
 .../page-foundations/color/carbonization.gts  |  13 +
 .../{color.gts => color/index.gts}            |   0
 .../focus-ring/carbonization.gts              |  13 +
 .../{focus-ring.gts => focus-ring/index.gts}  |   0
 .../typography/carbonization.gts              |   9 +
 .../{typography.gts => typography/index.gts}  |   0
 33 files changed, 858 insertions(+), 694 deletions(-)
 create mode 100644 showcase/app/components/page-components/badge-count/carbonization.gts
 delete mode 100644 showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts
 create mode 100644 showcase/app/components/page-components/badge/carbonization.gts
 delete mode 100644 showcase/app/components/page-components/badge/sub-sections/carbonization.gts
 create mode 100644 showcase/app/components/page-components/button/carbonization.gts
 delete mode 100644 showcase/app/components/page-components/button/sub-sections/carbonization.gts
 create mode 100644 showcase/app/components/page-foundations/color/carbonization.gts
 create mode 100644 showcase/app/components/page-foundations/focus-ring/carbonization.gts
 delete mode 100644 showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts
 create mode 100644 showcase/app/components/page-foundations/typography/carbonization.gts
 delete mode 100644 showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts
 create mode 100644 showcase/app/templates/page-components/badge-count/carbonization.gts
 rename showcase/app/templates/page-components/{badge-count.gts => badge-count/index.gts} (100%)
 create mode 100644 showcase/app/templates/page-components/badge/carbonization.gts
 rename showcase/app/templates/page-components/{badge.gts => badge/index.gts} (100%)
 create mode 100644 showcase/app/templates/page-components/button/carbonization.gts
 rename showcase/app/templates/page-components/{button.gts => button/index.gts} (100%)
 create mode 100644 showcase/app/templates/page-foundations/color/carbonization.gts
 rename showcase/app/templates/page-foundations/{color.gts => color/index.gts} (100%)
 create mode 100644 showcase/app/templates/page-foundations/focus-ring/carbonization.gts
 rename showcase/app/templates/page-foundations/{focus-ring.gts => focus-ring/index.gts} (100%)
 create mode 100644 showcase/app/templates/page-foundations/typography/carbonization.gts
 rename showcase/app/templates/page-foundations/{typography.gts => typography/index.gts} (100%)

diff --git a/showcase/app/components/page-components/badge-count/carbonization.gts b/showcase/app/components/page-components/badge-count/carbonization.gts
new file mode 100644
index 00000000000..6f0f1e24a25
--- /dev/null
+++ b/showcase/app/components/page-components/badge-count/carbonization.gts
@@ -0,0 +1,81 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { pageTitle } from 'ember-page-title';
+import { notEq } from 'ember-truth-helpers';
+
+import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwDivider from 'showcase/components/shw/divider';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+import { HdsBadgeCount } from '@hashicorp/design-system-components/components';
+import {
+  COLORS,
+  SIZES,
+  TYPES,
+} from '@hashicorp/design-system-components/components/hds/badge-count/index';
+
+const BadgeCountIndex: TemplateOnlyComponent = <template>
+  {{pageTitle "BadgeCount - Carbonization"}}
+
+  <ShwTextH1>BadgeCount - Carbonization</ShwTextH1>
+
+  <section>
+
+    <ShwTextH2>Size</ShwTextH2>
+
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <ShwFlex @direction="column" as |SF|>
+          {{#each SIZES as |size|}}
+            <SF.Item>
+              <HdsBadgeCount @text="3" @size={{size}} />
+              <HdsBadgeCount @text="99+" @size={{size}} />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwDivider @level={{2}} />
+
+    <ShwTextH2>Type</ShwTextH2>
+
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <ShwFlex @direction="column" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item>
+              <HdsBadgeCount @text="3" @type={{type}} />
+              <HdsBadgeCount @text="99+" @type={{type}} />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwDivider @level={{2}} />
+
+    <ShwTextH2>Color</ShwTextH2>
+
+    {{#each COLORS as |color index|}}
+      <ShwCarbonizationComparisonGrid
+        @hideThemeLabels={{(if (notEq index 0) true)}}
+      >
+        <:theming>
+          <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+            {{#each TYPES as |type|}}
+              <SF.Item class="shw-component-badge-sample-color--{{color}}">
+                <HdsBadgeCount @text="3" @type={{type}} @color={{color}} />
+                <HdsBadgeCount @text="99+" @type={{type}} @color={{color}} />
+              </SF.Item>
+            {{/each}}
+          </ShwFlex>
+        </:theming>
+      </ShwCarbonizationComparisonGrid>
+    {{/each}}
+
+  </section>
+</template>;
+
+export default BadgeCountIndex;
diff --git a/showcase/app/components/page-components/badge-count/index.gts b/showcase/app/components/page-components/badge-count/index.gts
index af27dacb306..dbe5d3eef33 100644
--- a/showcase/app/components/page-components/badge-count/index.gts
+++ b/showcase/app/components/page-components/badge-count/index.gts
@@ -7,11 +7,9 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
-import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionContent from 'showcase/components/page-components/badge-count/sub-sections/content';
 import SubSectionVariants from 'showcase/components/page-components/badge-count/sub-sections/variants';
-import SubSectionCarbonization from 'showcase/components/page-components/badge-count/sub-sections/carbonization';
 
 const BadgeCountIndex: TemplateOnlyComponent = <template>
   {{pageTitle "BadgeCount Component"}}
@@ -22,15 +20,6 @@ const BadgeCountIndex: TemplateOnlyComponent = <template>
     <SubSectionContent />
     <SubSectionVariants />
   </section>
-
-  <ShwDivider />
-  <ShwDivider />
-
-  <ShwTextH1>Carbonization</ShwTextH1>
-
-  <section>
-    <SubSectionCarbonization />
-  </section>
 </template>;
 
 export default BadgeCountIndex;
diff --git a/showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts b/showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts
deleted file mode 100644
index 482ec2f594c..00000000000
--- a/showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { TemplateOnlyComponent } from '@ember/component/template-only';
-import { notEq } from 'ember-truth-helpers';
-
-import ShwTextH2 from 'showcase/components/shw/text/h2';
-import ShwFlex from 'showcase/components/shw/flex';
-// import ShwDivider from 'showcase/components/shw/divider';
-import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
-
-import { HdsBadgeCount } from '@hashicorp/design-system-components/components';
-import {
-  COLORS,
-  SIZES,
-  TYPES,
-} from '@hashicorp/design-system-components/components/hds/badge-count/index';
-
-const SubSectionCarbonization: TemplateOnlyComponent = <template>
-  <ShwTextH2>Size</ShwTextH2>
-
-  <ShwCarbonizationComparisonGrid>
-    <:theming>
-      <ShwFlex @direction="column" as |SF|>
-        {{#each SIZES as |size|}}
-          <SF.Item>
-            <HdsBadgeCount @text="3" @size={{size}} />
-            <HdsBadgeCount @text="99+" @size={{size}} />
-          </SF.Item>
-        {{/each}}
-      </ShwFlex>
-    </:theming>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwTextH2>Type</ShwTextH2>
-
-  <ShwCarbonizationComparisonGrid>
-    <:theming>
-      <ShwFlex @direction="column" as |SF|>
-        {{#each TYPES as |type|}}
-          <SF.Item>
-            <HdsBadgeCount @text="3" @type={{type}} />
-            <HdsBadgeCount @text="99+" @type={{type}} />
-          </SF.Item>
-        {{/each}}
-      </ShwFlex>
-    </:theming>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwTextH2>Color</ShwTextH2>
-
-  {{#each COLORS as |color index|}}
-    <ShwCarbonizationComparisonGrid
-      @hideThemeLabels={{(if (notEq index 0) true)}}
-    >
-      <:theming>
-        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
-          {{#each TYPES as |type|}}
-            <SF.Item class="shw-component-badge-sample-color--{{color}}">
-              <HdsBadgeCount @text="3" @type={{type}} @color={{color}} />
-              <HdsBadgeCount @text="99+" @type={{type}} @color={{color}} />
-            </SF.Item>
-          {{/each}}
-        </ShwFlex>
-      </:theming>
-    </ShwCarbonizationComparisonGrid>
-  {{/each}}
-</template>;
-
-export default SubSectionCarbonization;
diff --git a/showcase/app/components/page-components/badge/carbonization.gts b/showcase/app/components/page-components/badge/carbonization.gts
new file mode 100644
index 00000000000..a60cec94f89
--- /dev/null
+++ b/showcase/app/components/page-components/badge/carbonization.gts
@@ -0,0 +1,352 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { pageTitle } from 'ember-page-title';
+import { array } from '@ember/helper';
+
+import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwDivider from 'showcase/components/shw/divider';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+import {
+  HdsBadge,
+  HdsIcon,
+} from '@hashicorp/design-system-components/components';
+import {
+  SIZES,
+  TYPES,
+} from '@hashicorp/design-system-components/components/hds/badge/index';
+
+const BadgeCarbonization: TemplateOnlyComponent = <template>
+  {{pageTitle "Badge - Carbonization"}}
+
+  <ShwTextH1>Badge - Carbonization</ShwTextH1>
+
+  <section>
+
+    <ShwTextH2>Content</ShwTextH2>
+
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <HdsBadge @text="Only text" />
+      </:theming>
+      <:reference>
+        <cds-tag>Lorem ipsum</cds-tag>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <HdsBadge @icon="activity" @text="Text + icon" />
+      </:theming>
+      <:reference>
+        <cds-tag>Lorem ipsum <HdsIcon @name="activity" slot="icon" /></cds-tag>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <HdsBadge @icon="activity" @text="Only icon" @isIconOnly={{true}} />
+      </:theming>
+      <:reference>
+        {{! <cds-tag><cds-icon shape="check"></cds-icon></cds-tag> }}
+        <cds-tag><HdsIcon @name="activity" slot="icon" /></cds-tag>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <HdsBadge
+          @icon="activity"
+          @text="This is a very long text that should go on two lines"
+        />
+      </:theming>
+      <:reference>
+        <cds-tag><HdsIcon @name="activity" slot="icon" />
+          This is a very long text that should go on multiple lines</cds-tag>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwDivider @level={{2}} />
+
+    <ShwTextH2>Size</ShwTextH2>
+
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <ShwFlex @direction="column" as |SF|>
+          {{#each SIZES as |size|}}
+            <SF.Item>
+              <HdsBadge
+                @icon="activity"
+                @isIconOnly={{true}}
+                @text="Lorem ipsum"
+                @size={{size}}
+              />
+              <HdsBadge @icon="activity" @text="Lorem ipsum" @size={{size}} />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+      <:reference>
+        <ShwFlex @direction="column" as |SF|>
+          {{#let (array "sm" "md" "lg") as |SIZES|}}
+            {{#each SIZES as |size|}}
+              <SF.Item>
+                <cds-tag size={{size}}><HdsIcon
+                    @name="activity"
+                    slot="icon"
+                  /></cds-tag>
+                <cds-tag size={{size}}><HdsIcon
+                    @name="activity"
+                    slot="icon"
+                  />Lorem ipsum</cds-tag>
+              </SF.Item>
+            {{/each}}
+          {{/let}}
+        </ShwFlex>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwDivider @level={{2}} />
+
+    <ShwTextH2>Type</ShwTextH2>
+
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <ShwFlex @direction="column" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item>
+              <HdsBadge
+                @icon="activity"
+                @isIconOnly={{true}}
+                @text="Lorem ipsum"
+                @type={{type}}
+              />
+              <HdsBadge @icon="activity" @text="Lorem ipsum" @type={{type}} />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+      <:reference>
+        <ShwFlex @direction="column" as |SF|>
+          {{#let (array "gray" "high-contrast" "outline") as |TYPES|}}
+            {{#each TYPES as |type|}}
+              <SF.Item>
+                <cds-tag type={{type}}><HdsIcon
+                    @name="activity"
+                    slot="icon"
+                  /></cds-tag>
+                <cds-tag type={{type}}><HdsIcon @name="activity" slot="icon" />
+                  Lorem ipsum</cds-tag>
+              </SF.Item>
+            {{/each}}
+          {{/let}}
+        </ShwFlex>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwDivider @level={{2}} />
+
+    <ShwTextH2>Color</ShwTextH2>
+
+    <ShwCarbonizationComparisonGrid @label="neutral">
+      <:theming>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item class="shw-component-badge-sample-color--neutral">
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem Ipsum"
+                @type={{type}}
+                @color="neutral"
+                @isIconOnly={{true}}
+              />
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem ipsum"
+                @type={{type}}
+                @color="neutral"
+              />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+      <:reference>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          <SF.Item>
+            <cds-tag type="gray"><HdsIcon
+                @name="activity"
+                slot="icon"
+              /></cds-tag>
+            <cds-tag type="gray"><HdsIcon @name="activity" slot="icon" />
+              Lorem ipsum</cds-tag>
+          </SF.Item>
+          <SF.Item>
+            <cds-tag type="outline"><HdsIcon
+                @name="activity"
+                slot="icon"
+              /></cds-tag>
+            <cds-tag type="outline"><HdsIcon @name="activity" slot="icon" />
+              Lorem ipsum</cds-tag>
+          </SF.Item>
+        </ShwFlex>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwCarbonizationComparisonGrid @label="neutral-dark-mode">
+      <:theming>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item
+              class="shw-component-badge-sample-color--neutral-dark-mode"
+            >
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem Ipsum"
+                @type={{type}}
+                @color="neutral-dark-mode"
+                @isIconOnly={{true}}
+              />
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem ipsum"
+                @type={{type}}
+                @color="neutral-dark-mode"
+              />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+      <:reference>
+        <cds-tag type="high-contrast"><HdsIcon
+            @name="activity"
+            slot="icon"
+          /></cds-tag>
+        <cds-tag type="high-contrast"><HdsIcon @name="activity" slot="icon" />
+          Lorem ipsum</cds-tag>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwCarbonizationComparisonGrid @label="highlight">
+      <:theming>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item class="shw-component-badge-sample-color--highlight">
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem Ipsum"
+                @type={{type}}
+                @color="highlight"
+                @isIconOnly={{true}}
+              />
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem ipsum"
+                @type={{type}}
+                @color="highlight"
+              />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+      <:reference>
+        <cds-tag type="purple"><HdsIcon
+            @name="activity"
+            slot="icon"
+          /></cds-tag>
+        <cds-tag type="purple"><HdsIcon @name="activity" slot="icon" />
+          Lorem ipsum</cds-tag>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwCarbonizationComparisonGrid @label="success">
+      <:theming>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item class="shw-component-badge-sample-color--success">
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem Ipsum"
+                @type={{type}}
+                @color="success"
+                @isIconOnly={{true}}
+              />
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem ipsum"
+                @type={{type}}
+                @color="success"
+              />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+      <:reference>
+        <cds-tag type="green"><HdsIcon @name="activity" slot="icon" /></cds-tag>
+        <cds-tag type="green"><HdsIcon @name="activity" slot="icon" />
+          Lorem ipsum</cds-tag>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwCarbonizationComparisonGrid @label="warning">
+      <:theming>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item class="shw-component-badge-sample-color--warning">
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem Ipsum"
+                @type={{type}}
+                @color="warning"
+                @isIconOnly={{true}}
+              />
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem ipsum"
+                @type={{type}}
+                @color="warning"
+              />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+      <:reference>
+        <code>???</code>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwCarbonizationComparisonGrid @hideThemeLabels={{true}} @label="critical">
+      <:theming>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item class="shw-component-badge-sample-color--critical">
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem Ipsum"
+                @type={{type}}
+                @color="critical"
+                @isIconOnly={{true}}
+              />
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem ipsum"
+                @type={{type}}
+                @color="critical"
+              />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+      <:reference>
+        <cds-tag type="red"><HdsIcon @name="activity" slot="icon" /></cds-tag>
+        <cds-tag type="red"><HdsIcon @name="activity" slot="icon" />
+          Lorem ipsum</cds-tag>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+
+  </section>
+</template>;
+
+export default BadgeCarbonization;
diff --git a/showcase/app/components/page-components/badge/index.gts b/showcase/app/components/page-components/badge/index.gts
index 9fb9e9d2721..532b10f63e2 100644
--- a/showcase/app/components/page-components/badge/index.gts
+++ b/showcase/app/components/page-components/badge/index.gts
@@ -7,12 +7,10 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
-import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionContainers from 'showcase/components/page-components/badge/sub-sections/containers';
 import SubSectionContent from 'showcase/components/page-components/badge/sub-sections/content';
 import SubSectionVariants from 'showcase/components/page-components/badge/sub-sections/variants';
-import SubSectionCarbonization from 'showcase/components/page-components/badge/sub-sections/carbonization';
 
 const BadgeIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Badge Component"}}
@@ -24,15 +22,6 @@ const BadgeIndex: TemplateOnlyComponent = <template>
     <SubSectionVariants />
     <SubSectionContainers />
   </section>
-
-  <ShwDivider />
-  <ShwDivider />
-
-  <ShwTextH1>Carbonization</ShwTextH1>
-
-  <section>
-    <SubSectionCarbonization />
-  </section>
 </template>;
 
 export default BadgeIndex;
diff --git a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
deleted file mode 100644
index 2e343539760..00000000000
--- a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
+++ /dev/null
@@ -1,333 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { TemplateOnlyComponent } from '@ember/component/template-only';
-import { notEq } from 'ember-truth-helpers';
-import { array } from '@ember/helper';
-
-import ShwTextH2 from 'showcase/components/shw/text/h2';
-import ShwFlex from 'showcase/components/shw/flex';
-// import ShwDivider from 'showcase/components/shw/divider';
-import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
-
-import {
-  HdsBadge,
-  HdsIcon,
-} from '@hashicorp/design-system-components/components';
-import {
-  COLORS,
-  SIZES,
-  TYPES,
-} from '@hashicorp/design-system-components/components/hds/badge/index';
-
-const SubSectionCarbonization: TemplateOnlyComponent = <template>
-  <ShwTextH2>Content</ShwTextH2>
-
-  <ShwCarbonizationComparisonGrid>
-    <:theming>
-      <HdsBadge @text="Only text" />
-    </:theming>
-    <:reference>
-      <cds-tag>Lorem ipsum</cds-tag>
-    </:reference>
-  </ShwCarbonizationComparisonGrid>
-  <ShwCarbonizationComparisonGrid>
-    <:theming>
-      <HdsBadge @icon="activity" @text="Text + icon" />
-    </:theming>
-    <:reference>
-      <cds-tag>Lorem ipsum <HdsIcon @name="activity" slot="icon" /></cds-tag>
-    </:reference>
-  </ShwCarbonizationComparisonGrid>
-  <ShwCarbonizationComparisonGrid>
-    <:theming>
-      <HdsBadge @icon="activity" @text="Only icon" @isIconOnly={{true}} />
-    </:theming>
-    <:reference>
-      {{! <cds-tag><cds-icon shape="check"></cds-icon></cds-tag> }}
-      <cds-tag><HdsIcon @name="activity" slot="icon" /></cds-tag>
-    </:reference>
-  </ShwCarbonizationComparisonGrid>
-  <ShwCarbonizationComparisonGrid>
-    <:theming>
-      <HdsBadge
-        @icon="activity"
-        @text="This is a very long text that should go on two lines"
-      />
-    </:theming>
-    <:reference>
-      <cds-tag><HdsIcon @name="activity" slot="icon" />
-        This is a very long text that should go on multiple lines</cds-tag>
-    </:reference>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwTextH2>Size</ShwTextH2>
-
-  <ShwCarbonizationComparisonGrid>
-    <:theming>
-      <ShwFlex @direction="column" as |SF|>
-        {{#each SIZES as |size|}}
-          <SF.Item>
-            <HdsBadge
-              @icon="activity"
-              @isIconOnly={{true}}
-              @text="Lorem ipsum"
-              @size={{size}}
-            />
-            <HdsBadge @icon="activity" @text="Lorem ipsum" @size={{size}} />
-          </SF.Item>
-        {{/each}}
-      </ShwFlex>
-    </:theming>
-    <:reference>
-      <ShwFlex @direction="column" as |SF|>
-        {{#let (array "sm" "md" "lg") as |SIZES|}}
-          {{#each SIZES as |size|}}
-            <SF.Item>
-              <cds-tag size={{size}}><HdsIcon
-                  @name="activity"
-                  slot="icon"
-                /></cds-tag>
-              <cds-tag size={{size}}><HdsIcon
-                  @name="activity"
-                  slot="icon"
-                />Lorem ipsum</cds-tag>
-            </SF.Item>
-          {{/each}}
-        {{/let}}
-      </ShwFlex>
-    </:reference>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwTextH2>Type</ShwTextH2>
-
-  <ShwCarbonizationComparisonGrid>
-    <:theming>
-      <ShwFlex @direction="column" as |SF|>
-        {{#each TYPES as |type|}}
-          <SF.Item>
-            <HdsBadge
-              @icon="activity"
-              @isIconOnly={{true}}
-              @text="Lorem ipsum"
-              @type={{type}}
-            />
-            <HdsBadge @icon="activity" @text="Lorem ipsum" @type={{type}} />
-          </SF.Item>
-        {{/each}}
-      </ShwFlex>
-    </:theming>
-    <:reference>
-      <ShwFlex @direction="column" as |SF|>
-        {{#let (array "gray" "high-contrast" "outline") as |TYPES|}}
-          {{#each TYPES as |type|}}
-            <SF.Item>
-              <cds-tag type={{type}}><HdsIcon
-                  @name="activity"
-                  slot="icon"
-                /></cds-tag>
-              <cds-tag type={{type}}><HdsIcon @name="activity" slot="icon" />
-                Lorem ipsum</cds-tag>
-            </SF.Item>
-          {{/each}}
-        {{/let}}
-      </ShwFlex>
-    </:reference>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwTextH2>Color</ShwTextH2>
-
-  <ShwCarbonizationComparisonGrid @label="neutral">
-    <:theming>
-      <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
-        {{#each TYPES as |type|}}
-          <SF.Item class="shw-component-badge-sample-color--neutral">
-            <HdsBadge
-              @icon="activity"
-              @text="Lorem Ipsum"
-              @type={{type}}
-              @color="neutral"
-              @isIconOnly={{true}}
-            />
-            <HdsBadge
-              @icon="activity"
-              @text="Lorem ipsum"
-              @type={{type}}
-              @color="neutral"
-            />
-          </SF.Item>
-        {{/each}}
-      </ShwFlex>
-    </:theming>
-    <:reference>
-      <ShwFlex @direction="column" as |SF|>
-        <SF.Item>
-          <cds-tag type="gray"><HdsIcon
-              @name="activity"
-              slot="icon"
-            /></cds-tag>
-          <cds-tag type="gray"><HdsIcon @name="activity" slot="icon" />
-            Lorem ipsum</cds-tag>
-        </SF.Item>
-        <SF.Item>
-          <cds-tag type="outline"><HdsIcon
-              @name="activity"
-              slot="icon"
-            /></cds-tag>
-          <cds-tag type="outline"><HdsIcon @name="activity" slot="icon" />
-            Lorem ipsum</cds-tag>
-        </SF.Item>
-      </ShwFlex>
-    </:reference>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwCarbonizationComparisonGrid @label="neutral-dark-mode">
-    <:theming>
-      <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
-        {{#each TYPES as |type|}}
-          <SF.Item class="shw-component-badge-sample-color--neutral-dark-mode">
-            <HdsBadge
-              @icon="activity"
-              @text="Lorem Ipsum"
-              @type={{type}}
-              @color="neutral-dark-mode"
-              @isIconOnly={{true}}
-            />
-            <HdsBadge
-              @icon="activity"
-              @text="Lorem ipsum"
-              @type={{type}}
-              @color="neutral-dark-mode"
-            />
-          </SF.Item>
-        {{/each}}
-      </ShwFlex>
-    </:theming>
-    <:reference>
-      <cds-tag type="high-contrast"><HdsIcon
-          @name="activity"
-          slot="icon"
-        /></cds-tag>
-      <cds-tag type="high-contrast"><HdsIcon @name="activity" slot="icon" />
-        Lorem ipsum</cds-tag>
-    </:reference>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwCarbonizationComparisonGrid @label="highlight">
-    <:theming>
-      <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
-        {{#each TYPES as |type|}}
-          <SF.Item class="shw-component-badge-sample-color--highlight">
-            <HdsBadge
-              @icon="activity"
-              @text="Lorem Ipsum"
-              @type={{type}}
-              @color="highlight"
-              @isIconOnly={{true}}
-            />
-            <HdsBadge
-              @icon="activity"
-              @text="Lorem ipsum"
-              @type={{type}}
-              @color="highlight"
-            />
-          </SF.Item>
-        {{/each}}
-      </ShwFlex>
-    </:theming>
-    <:reference>
-      <cds-tag type="purple"><HdsIcon @name="activity" slot="icon" /></cds-tag>
-      <cds-tag type="purple"><HdsIcon @name="activity" slot="icon" />
-        Lorem ipsum</cds-tag>
-    </:reference>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwCarbonizationComparisonGrid @label="success">
-    <:theming>
-      <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
-        {{#each TYPES as |type|}}
-          <SF.Item class="shw-component-badge-sample-color--success">
-            <HdsBadge
-              @icon="activity"
-              @text="Lorem Ipsum"
-              @type={{type}}
-              @color="success"
-              @isIconOnly={{true}}
-            />
-            <HdsBadge
-              @icon="activity"
-              @text="Lorem ipsum"
-              @type={{type}}
-              @color="success"
-            />
-          </SF.Item>
-        {{/each}}
-      </ShwFlex>
-    </:theming>
-    <:reference>
-      <cds-tag type="green"><HdsIcon @name="activity" slot="icon" /></cds-tag>
-      <cds-tag type="green"><HdsIcon @name="activity" slot="icon" />
-        Lorem ipsum</cds-tag>
-    </:reference>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwCarbonizationComparisonGrid @label="warning">
-    <:theming>
-      <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
-        {{#each TYPES as |type|}}
-          <SF.Item class="shw-component-badge-sample-color--warning">
-            <HdsBadge
-              @icon="activity"
-              @text="Lorem Ipsum"
-              @type={{type}}
-              @color="warning"
-              @isIconOnly={{true}}
-            />
-            <HdsBadge
-              @icon="activity"
-              @text="Lorem ipsum"
-              @type={{type}}
-              @color="warning"
-            />
-          </SF.Item>
-        {{/each}}
-      </ShwFlex>
-    </:theming>
-    <:reference>
-      <code>???</code>
-    </:reference>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwCarbonizationComparisonGrid @hideThemeLabels={{true}} @label="critical">
-    <:theming>
-      <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
-        {{#each TYPES as |type|}}
-          <SF.Item class="shw-component-badge-sample-color--critical">
-            <HdsBadge
-              @icon="activity"
-              @text="Lorem Ipsum"
-              @type={{type}}
-              @color="critical"
-              @isIconOnly={{true}}
-            />
-            <HdsBadge
-              @icon="activity"
-              @text="Lorem ipsum"
-              @type={{type}}
-              @color="critical"
-            />
-          </SF.Item>
-        {{/each}}
-      </ShwFlex>
-    </:theming>
-    <:reference>
-      <cds-tag type="red"><HdsIcon @name="activity" slot="icon" /></cds-tag>
-      <cds-tag type="red"><HdsIcon @name="activity" slot="icon" />
-        Lorem ipsum</cds-tag>
-    </:reference>
-  </ShwCarbonizationComparisonGrid>
-</template>;
-
-export default SubSectionCarbonization;
diff --git a/showcase/app/components/page-components/button/carbonization.gts b/showcase/app/components/page-components/button/carbonization.gts
new file mode 100644
index 00000000000..a7979a785be
--- /dev/null
+++ b/showcase/app/components/page-components/button/carbonization.gts
@@ -0,0 +1,149 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { pageTitle } from 'ember-page-title';
+import { capitalize } from '@ember/string';
+import style from 'ember-style-modifier';
+import { eq } from 'ember-truth-helpers';
+
+import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwTextH3 from 'showcase/components/shw/text/h3';
+import ShwTextBody from 'showcase/components/shw/text/body';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwDivider from 'showcase/components/shw/divider';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import {
+  COLORS,
+  SIZES,
+} from '@hashicorp/design-system-components/components/hds/button/index';
+
+// these are used only for presentation purpose in the showcase
+const STATES = ['default', 'hover', 'active', 'focus', 'disabled'];
+
+import CodeFragmentWithLoadingState from 'showcase/components/page-components/button/code-fragments/with-loading-state';
+
+const ButtonCarbonization: TemplateOnlyComponent = <template>
+  {{pageTitle "Button - Carbonization"}}
+
+  <ShwTextH1>Button - Carbonization</ShwTextH1>
+
+  <section>
+
+    <ShwTextH2>Content</ShwTextH2>
+
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <ShwFlex @direction="column" as |SF|>
+          <SF.Item>
+            <HdsButton @text="Lorem ipsum" />
+          </SF.Item>
+          <SF.Item>
+            <HdsButton
+              @icon="plus"
+              @iconPosition="leading"
+              @text="Lorem ipsum"
+            />
+          </SF.Item>
+          <SF.Item>
+            <HdsButton
+              @icon="arrow-right"
+              @iconPosition="trailing"
+              @text="Lorem ipsum"
+            />
+          </SF.Item>
+          <SF.Item>
+            <HdsButton @icon="plus" @isIconOnly={{true}} @text="Lorem ipsum" />
+          </SF.Item>
+          <SF.Item {{style width="200px"}}>
+            <HdsButton
+              @icon="plus"
+              @text="This is a very long text that should go on multiple lines"
+            />
+          </SF.Item>
+          <SF.Item {{style width="150px"}}>
+            <CodeFragmentWithLoadingState />
+          </SF.Item>
+        </ShwFlex>
+      </:theming>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwDivider @level={{2}} />
+
+    <ShwTextH2>Sizes</ShwTextH2>
+
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <ShwFlex @direction="column" as |SF|>
+          {{#each SIZES as |size|}}
+            <SF.Item>
+              <HdsButton
+                @icon="plus"
+                @text="Lorem ipsum"
+                @size={{size}}
+                @isInline={{true}}
+              />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwDivider @level={{2}} />
+
+    <ShwTextH2>Colors</ShwTextH2>
+
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <ShwFlex @direction="column" as |SF|>
+          {{#each COLORS as |color|}}
+            <SF.Item>
+              <HdsButton @icon="plus" @text="Lorem ipsum" @color={{color}} />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwDivider @level={{2}} />
+
+    <ShwTextH2>States</ShwTextH2>
+
+    {{#each COLORS as |color|}}
+      <ShwTextH3>{{capitalize color}}</ShwTextH3>
+      {{#each STATES as |state|}}
+        <ShwTextBody>{{state}}</ShwTextBody>
+        <ShwCarbonizationComparisonGrid>
+          <:theming>
+            <ShwFlex @direction="column" @gap="0.75rem" as |SF|>
+              {{#each SIZES as |size|}}
+                <SF.Item>
+                  {{#if (eq state "disabled")}}
+                    <HdsButton
+                      @icon="plus"
+                      @text="Lorem"
+                      @size={{size}}
+                      @color={{color}}
+                      disabled
+                    />
+                  {{else}}
+                    <HdsButton
+                      @icon="plus"
+                      @text="Lorem"
+                      @size={{size}}
+                      @color={{color}}
+                      mock-state-value={{state}}
+                    />
+                  {{/if}}
+                </SF.Item>
+              {{/each}}
+            </ShwFlex>
+          </:theming>
+        </ShwCarbonizationComparisonGrid>
+      {{/each}}
+    {{/each}}
+
+  </section>
+</template>;
+
+export default ButtonCarbonization;
diff --git a/showcase/app/components/page-components/button/index.gts b/showcase/app/components/page-components/button/index.gts
index edbb65c94e0..fcebeaf707f 100644
--- a/showcase/app/components/page-components/button/index.gts
+++ b/showcase/app/components/page-components/button/index.gts
@@ -6,7 +6,6 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
-import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionContainers from 'showcase/components/page-components/button/sub-sections/containers';
 import SubSectionContent from 'showcase/components/page-components/button/sub-sections/content';
@@ -14,7 +13,6 @@ import SubSectionDisplay from 'showcase/components/page-components/button/sub-se
 import SubSectionGeneratedElement from 'showcase/components/page-components/button/sub-sections/generated-element';
 import SubSectionStates from 'showcase/components/page-components/button/sub-sections/states';
 import SubSectionVariants from 'showcase/components/page-components/button/sub-sections/variants';
-import SubSectionCarbonization from 'showcase/components/page-components/button/sub-sections/carbonization';
 
 const ButtonIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Button Component"}}
@@ -30,15 +28,6 @@ const ButtonIndex: TemplateOnlyComponent = <template>
     <SubSectionStates />
     <SubSectionContainers />
   </section>
-
-  <ShwDivider />
-  <ShwDivider />
-
-  <ShwTextH1>Carbonization</ShwTextH1>
-
-  <section>
-    <SubSectionCarbonization />
-  </section>
 </template>;
 
 export default ButtonIndex;
diff --git a/showcase/app/components/page-components/button/sub-sections/carbonization.gts b/showcase/app/components/page-components/button/sub-sections/carbonization.gts
deleted file mode 100644
index 070ec461959..00000000000
--- a/showcase/app/components/page-components/button/sub-sections/carbonization.gts
+++ /dev/null
@@ -1,128 +0,0 @@
-import type { TemplateOnlyComponent } from '@ember/component/template-only';
-import style from 'ember-style-modifier';
-import { capitalize } from '@ember/string';
-import { eq } from 'ember-truth-helpers';
-
-import ShwTextH2 from 'showcase/components/shw/text/h2';
-import ShwTextH3 from 'showcase/components/shw/text/h3';
-import ShwTextBody from 'showcase/components/shw/text/body';
-import ShwFlex from 'showcase/components/shw/flex';
-import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
-
-import { HdsButton } from '@hashicorp/design-system-components/components';
-import {
-  COLORS,
-  SIZES,
-} from '@hashicorp/design-system-components/components/hds/button/index';
-
-// these are used only for presentation purpose in the showcase
-const STATES = ['default', 'hover', 'active', 'focus', 'disabled'];
-
-import CodeFragmentWithLoadingState from 'showcase/components/page-components/button/code-fragments/with-loading-state';
-
-const SubSectionCarbonization: TemplateOnlyComponent = <template>
-  <ShwTextH2>Content</ShwTextH2>
-
-  <ShwCarbonizationComparisonGrid>
-    <:theming>
-      <ShwFlex @direction="column" as |SF|>
-        <SF.Item>
-          <HdsButton @text="Lorem ipsum" />
-        </SF.Item>
-        <SF.Item>
-          <HdsButton @icon="plus" @iconPosition="leading" @text="Lorem ipsum" />
-        </SF.Item>
-        <SF.Item>
-          <HdsButton
-            @icon="arrow-right"
-            @iconPosition="trailing"
-            @text="Lorem ipsum"
-          />
-        </SF.Item>
-        <SF.Item>
-          <HdsButton @icon="plus" @isIconOnly={{true}} @text="Lorem ipsum" />
-        </SF.Item>
-        <SF.Item {{style width="200px"}}>
-          <HdsButton
-            @icon="plus"
-            @text="This is a very long text that should go on multiple lines"
-          />
-        </SF.Item>
-        <SF.Item {{style width="150px"}}>
-          <CodeFragmentWithLoadingState />
-        </SF.Item>
-      </ShwFlex>
-    </:theming>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwTextH2>Sizes</ShwTextH2>
-
-  <ShwCarbonizationComparisonGrid>
-    <:theming>
-      <ShwFlex @direction="column" as |SF|>
-        {{#each SIZES as |size|}}
-          <SF.Item>
-            <HdsButton
-              @icon="plus"
-              @text="Lorem ipsum"
-              @size={{size}}
-              @isInline={{true}}
-            />
-          </SF.Item>
-        {{/each}}
-      </ShwFlex>
-    </:theming>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwTextH2>Colors</ShwTextH2>
-
-  <ShwCarbonizationComparisonGrid>
-    <:theming>
-      <ShwFlex @direction="column" as |SF|>
-        {{#each COLORS as |color|}}
-          <SF.Item>
-            <HdsButton @icon="plus" @text="Lorem ipsum" @color={{color}} />
-          </SF.Item>
-        {{/each}}
-      </ShwFlex>
-    </:theming>
-  </ShwCarbonizationComparisonGrid>
-
-  <ShwTextH2>States</ShwTextH2>
-
-  {{#each COLORS as |color|}}
-    <ShwTextH3>{{capitalize color}}</ShwTextH3>
-    {{#each STATES as |state|}}
-      <ShwTextBody>{{state}}</ShwTextBody>
-      <ShwCarbonizationComparisonGrid>
-        <:theming>
-          <ShwFlex @direction="column" @gap="0.75rem" as |SF|>
-            {{#each SIZES as |size|}}
-              <SF.Item>
-                {{#if (eq state "disabled")}}
-                  <HdsButton
-                    @icon="plus"
-                    @text="Lorem"
-                    @size={{size}}
-                    @color={{color}}
-                    disabled
-                  />
-                {{else}}
-                  <HdsButton
-                    @icon="plus"
-                    @text="Lorem"
-                    @size={{size}}
-                    @color={{color}}
-                    mock-state-value={{state}}
-                  />
-                {{/if}}
-              </SF.Item>
-            {{/each}}
-          </ShwFlex>
-        </:theming>
-      </ShwCarbonizationComparisonGrid>
-    {{/each}}
-  {{/each}}
-</template>;
-
-export default SubSectionCarbonization;
diff --git a/showcase/app/components/page-foundations/color/carbonization.gts b/showcase/app/components/page-foundations/color/carbonization.gts
new file mode 100644
index 00000000000..2f858525e11
--- /dev/null
+++ b/showcase/app/components/page-foundations/color/carbonization.gts
@@ -0,0 +1,25 @@
+import Component from '@glimmer/component';
+import { pageTitle } from 'ember-page-title';
+
+import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwCarbonizationTokenPreviewColor from 'showcase/components/shw/carbonization/token-preview-color';
+
+import TOKENS_RAW from '@hashicorp/design-system-tokens/dist/docs/products/tokens.json';
+
+export default class ColorCarbonization extends Component {
+  get allColorTokens() {
+    return TOKENS_RAW.filter((token) => token.$type === 'color');
+  }
+
+  <template>
+    {{pageTitle "Color - Carbonization"}}
+
+    <ShwTextH1>Color - Carbonization</ShwTextH1>
+
+    <section>
+      {{#each this.allColorTokens as |token|}}
+        <ShwCarbonizationTokenPreviewColor @token={{token}} />
+      {{/each}}
+    </section>
+  </template>
+}
diff --git a/showcase/app/components/page-foundations/color/index.gts b/showcase/app/components/page-foundations/color/index.gts
index 6cb8f1791d7..ece3c576e18 100644
--- a/showcase/app/components/page-foundations/color/index.gts
+++ b/showcase/app/components/page-foundations/color/index.gts
@@ -7,15 +7,13 @@ import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
 
-import SubSectionCarbonization from 'showcase/components/page-foundations/color/sub-sections/carbonization';
-
 const ColorIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Color"}}
 
-  <ShwTextH1>Color - Carbonization</ShwTextH1>
+  <ShwTextH1>Color</ShwTextH1>
 
   <section>
-    <SubSectionCarbonization />
+    <pre>This page is not used</pre>
   </section>
 </template>;
 
diff --git a/showcase/app/components/page-foundations/focus-ring/carbonization.gts b/showcase/app/components/page-foundations/focus-ring/carbonization.gts
new file mode 100644
index 00000000000..d3feb5292cf
--- /dev/null
+++ b/showcase/app/components/page-foundations/focus-ring/carbonization.gts
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { pageTitle } from 'ember-page-title';
+import style from 'ember-style-modifier/modifiers/style';
+
+import ShwTextH1 from 'showcase/components/shw/text/h1';
+
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwPlaceholder from 'showcase/components/shw/placeholder';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+const FocusRingIndex: TemplateOnlyComponent = <template>
+  {{pageTitle "Focus ring"}}
+
+  <ShwTextH1>Focus ring - Carbonization</ShwTextH1>
+
+  <section>
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <ShwFlex @direction="column" as |SF|>
+          <SF.Item>
+            <div
+              class="hds-focus-ring-action-box-shadow"
+              {{style width="fit-content"}}
+            >
+              <ShwPlaceholder
+                @width="100"
+                @height="100"
+                @background="transparent"
+              />
+            </div>
+          </SF.Item>
+          <SF.Item>
+            <div
+              class="hds-focus-ring-action-box-shadow"
+              {{style border-radius="5px" width="fit-content"}}
+            >
+              <ShwPlaceholder
+                @width="100"
+                @height="100"
+                @background="transparent"
+              />
+            </div>
+          </SF.Item>
+          <SF.Item>
+            <div
+              class="hds-focus-ring-critical-box-shadow"
+              {{style border-radius="5px" width="fit-content"}}
+            >
+              <ShwPlaceholder
+                @width="100"
+                @height="100"
+                @background="transparent"
+              />
+            </div>
+          </SF.Item>
+        </ShwFlex>
+      </:theming>
+    </ShwCarbonizationComparisonGrid>
+
+  </section>
+</template>;
+
+export default FocusRingIndex;
diff --git a/showcase/app/components/page-foundations/focus-ring/index.gts b/showcase/app/components/page-foundations/focus-ring/index.gts
index 7efc5d2c742..696af96d4ea 100644
--- a/showcase/app/components/page-foundations/focus-ring/index.gts
+++ b/showcase/app/components/page-foundations/focus-ring/index.gts
@@ -6,11 +6,9 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
-import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionBase from 'showcase/components/page-foundations/focus-ring/sub-sections/base';
 import SubSectionVariants from 'showcase/components/page-foundations/focus-ring/sub-sections/variants';
-import SubSectionCarbonization from 'showcase/components/page-foundations/focus-ring/sub-sections/carbonization';
 
 const FocusRingIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Focus ring"}}
@@ -21,15 +19,6 @@ const FocusRingIndex: TemplateOnlyComponent = <template>
     <SubSectionBase />
     <SubSectionVariants />
   </section>
-
-  <ShwDivider />
-  <ShwDivider />
-
-  <ShwTextH1>Carbonization</ShwTextH1>
-
-  <section>
-    <SubSectionCarbonization />
-  </section>
 </template>;
 
 export default FocusRingIndex;
diff --git a/showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts b/showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts
deleted file mode 100644
index 722d4dbf06f..00000000000
--- a/showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { TemplateOnlyComponent } from '@ember/component/template-only';
-import style from 'ember-style-modifier/modifiers/style';
-
-import ShwFlex from 'showcase/components/shw/flex';
-import ShwPlaceholder from 'showcase/components/shw/placeholder';
-import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
-
-const SubSectionCarbonization: TemplateOnlyComponent = <template>
-  <ShwCarbonizationComparisonGrid>
-    <:theming>
-      <ShwFlex @direction="column" as |SF|>
-        <SF.Item>
-          <div
-            class="hds-focus-ring-action-box-shadow"
-            {{style width="fit-content"}}
-          >
-            <ShwPlaceholder
-              @text="no radius"
-              @width="100"
-              @height="100"
-              @background="transparent"
-            />
-          </div>
-        </SF.Item>
-        <SF.Item>
-          <div
-            class="hds-focus-ring-action-box-shadow"
-            {{style border-radius="5px" width="fit-content"}}
-          >
-            <ShwPlaceholder
-              @text="with border radius"
-              @width="100"
-              @height="100"
-              @background="transparent"
-            />
-          </div>
-        </SF.Item>
-        <SF.Item>
-          <div
-            class="hds-focus-ring-critical-box-shadow"
-            {{style border-radius="5px" width="fit-content"}}
-          >
-            <ShwPlaceholder
-              @text="with border radius"
-              @width="100"
-              @height="100"
-              @background="transparent"
-            />
-          </div>
-        </SF.Item>
-      </ShwFlex>
-    </:theming>
-  </ShwCarbonizationComparisonGrid>
-</template>;
-
-export default SubSectionCarbonization;
diff --git a/showcase/app/components/page-foundations/typography/carbonization.gts b/showcase/app/components/page-foundations/typography/carbonization.gts
new file mode 100644
index 00000000000..02e70fc5953
--- /dev/null
+++ b/showcase/app/components/page-foundations/typography/carbonization.gts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { pageTitle } from 'ember-page-title';
+import { notEq } from 'ember-truth-helpers';
+
+import ShwTextH1 from 'showcase/components/shw/text/h1';
+
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+import { STYLES_COMBINATIONS } from './sub-sections/styles';
+
+const TypographyCarbonization: TemplateOnlyComponent = <template>
+  {{pageTitle "Typography - Carbonization"}}
+
+  <ShwTextH1>Typography - Carbonization</ShwTextH1>
+
+  <section>
+    {{#each-in STYLES_COMBINATIONS as |style weights|}}
+      <ShwCarbonizationComparisonGrid
+        @hideThemeLabels={{(if (notEq style "display-500") true)}}
+      >
+        <:theming>
+          <ShwFlex @direction="column" as |SF|>
+            {{#each weights as |weight|}}
+              <SF.Item>
+                <p
+                  class="hds-typography-{{style}} hds-font-weight-{{weight}}"
+                >{{style}} / {{weight}}</p>
+              </SF.Item>
+            {{/each}}
+          </ShwFlex>
+        </:theming>
+      </ShwCarbonizationComparisonGrid>
+    {{/each-in}}
+  </section>
+</template>;
+
+export default TypographyCarbonization;
diff --git a/showcase/app/components/page-foundations/typography/index.gts b/showcase/app/components/page-foundations/typography/index.gts
index c8c87ffd3c7..02a1b0e68e5 100644
--- a/showcase/app/components/page-foundations/typography/index.gts
+++ b/showcase/app/components/page-foundations/typography/index.gts
@@ -6,12 +6,10 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
-import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionFamilies from 'showcase/components/page-foundations/typography/sub-sections/families';
 import SubSectionWeights from 'showcase/components/page-foundations/typography/sub-sections/weights';
 import SubSectionStyles from 'showcase/components/page-foundations/typography/sub-sections/styles';
-import SubSectionCarbonization from 'showcase/components/page-foundations/typography/sub-sections/carbonization';
 
 const TypographyIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Typography"}}
@@ -23,15 +21,6 @@ const TypographyIndex: TemplateOnlyComponent = <template>
     <SubSectionWeights />
     <SubSectionStyles />
   </section>
-
-  <ShwDivider />
-  <ShwDivider />
-
-  <ShwTextH1>Carbonization</ShwTextH1>
-
-  <section>
-    <SubSectionCarbonization />
-  </section>
 </template>;
 
 export default TypographyIndex;
diff --git a/showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts b/showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts
deleted file mode 100644
index 47c7b17ae60..00000000000
--- a/showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { TemplateOnlyComponent } from '@ember/component/template-only';
-import { notEq } from 'ember-truth-helpers';
-
-import ShwFlex from 'showcase/components/shw/flex';
-import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
-
-import { STYLES_COMBINATIONS } from './styles';
-
-const SubSectionCarbonization: TemplateOnlyComponent = <template>
-  {{#each-in STYLES_COMBINATIONS as |style weights|}}
-    <ShwCarbonizationComparisonGrid
-      @hideThemeLabels={{(if (notEq style "display-500") true)}}
-    >
-      <:theming>
-        <ShwFlex @direction="column" as |SF|>
-          {{#each weights as |weight|}}
-            <SF.Item>
-              <p
-                class="hds-typography-{{style}} hds-font-weight-{{weight}}"
-              >{{style}} / {{weight}}</p>
-            </SF.Item>
-          {{/each}}
-        </ShwFlex>
-      </:theming>
-    </ShwCarbonizationComparisonGrid>
-  {{/each-in}}
-</template>;
-
-export default SubSectionCarbonization;
diff --git a/showcase/app/router.ts b/showcase/app/router.ts
index 9f2c666ffdd..18884f9f6cc 100644
--- a/showcase/app/router.ts
+++ b/showcase/app/router.ts
@@ -13,10 +13,16 @@ export default class Router extends EmberRouter {
 
 Router.map(function () {
   this.route('page-foundations', { path: 'foundations' }, function () {
-    this.route('color');
-    this.route('typography');
+    this.route('color', function () {
+      this.route('carbonization');
+    });
+    this.route('typography', function () {
+      this.route('carbonization');
+    });
     this.route('elevation');
-    this.route('focus-ring');
+    this.route('focus-ring', function () {
+      this.route('carbonization');
+    });
     this.route('breakpoints', function () {
       this.route('frameless', function () {
         this.route('demo-viewport-breakpoints-visualization');
@@ -46,10 +52,16 @@ Router.map(function () {
       });
     });
     this.route('application-state');
-    this.route('badge');
-    this.route('badge-count');
+    this.route('badge', function () {
+      this.route('carbonization');
+    });
+    this.route('badge-count', function () {
+      this.route('carbonization');
+    });
     this.route('breadcrumb');
-    this.route('button');
+    this.route('button', function () {
+      this.route('carbonization');
+    });
     this.route('button-set');
     this.route('card');
     this.route('code-block');
diff --git a/showcase/app/styles/_globals.scss b/showcase/app/styles/_globals.scss
index 76695a082fc..da3f4dd3b55 100644
--- a/showcase/app/styles/_globals.scss
+++ b/showcase/app/styles/_globals.scss
@@ -5,6 +5,8 @@
 
 @use "./typography" as *;
 
+@use '@carbon/type' as carbon-type;
+
 *,
 *::before,
 *::after {
@@ -173,6 +175,10 @@ body {
       }
     }
   }
+
+  .shw-landing-lists__vertical-divider {
+    border-left: 2px solid #ccc;
+  }
 }
 
 // special classes for headings with anchor links
diff --git a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
index 42aa034779d..90838047a78 100644
--- a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
+++ b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
@@ -52,7 +52,7 @@
   --content-background-color: #262626;
 }
 .shw-carbonization-comparison-grid__item--area-cds-g100 {
-  --background-color: #161616;
+  --content-background-color: #161616;
 }
 
 .shw-carbonization-comparison-grid__item--area-cwc-g0,
diff --git a/showcase/app/templates/index.hbs b/showcase/app/templates/index.hbs
index dea0d26a233..760e48fa998 100644
--- a/showcase/app/templates/index.hbs
+++ b/showcase/app/templates/index.hbs
@@ -47,6 +47,7 @@
         </LinkTo>
       </li>
     </ol>
+
   </div>
 
   <div>
@@ -391,4 +392,44 @@
       </li>
     </ol>
   </div>
+
+  <div class="shw-landing-lists__vertical-divider" />
+
+  <div>
+    <Shw::Text::H2>Carbonization</Shw::Text::H2>
+    <ol class="shw-text-body">
+      <li>
+        <LinkTo @route="page-foundations.color.carbonization">
+          Color
+        </LinkTo>
+      </li>
+      <li>
+        <LinkTo @route="page-foundations.typography.carbonization">
+          Typography
+        </LinkTo>
+      </li>
+      <li>
+        <LinkTo @route="page-foundations.focus-ring.carbonization">
+          Focus-ring
+        </LinkTo>
+      </li>
+    </ol>
+    <ol class="shw-text-body">
+      <li>
+        <LinkTo @route="page-components.badge.carbonization">
+          Badge
+        </LinkTo>
+      </li>
+      <li>
+        <LinkTo @route="page-components.badge-count.carbonization">
+          BadgeCount
+        </LinkTo>
+      </li>
+      <li>
+        <LinkTo @route="page-components.button.carbonization">
+          Button
+        </LinkTo>
+      </li>
+    </ol>
+  </div>
 </div>
\ No newline at end of file
diff --git a/showcase/app/templates/page-components/badge-count/carbonization.gts b/showcase/app/templates/page-components/badge-count/carbonization.gts
new file mode 100644
index 00000000000..aebdf86a67b
--- /dev/null
+++ b/showcase/app/templates/page-components/badge-count/carbonization.gts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import BadgeCountCarbonization from 'showcase/components/page-components/badge-count/carbonization';
+
+const PageComponentsBadgeCountCarbonization: TemplateOnlyComponent = <template>
+  <BadgeCountCarbonization />
+</template>;
+
+export default PageComponentsBadgeCountCarbonization;
diff --git a/showcase/app/templates/page-components/badge-count.gts b/showcase/app/templates/page-components/badge-count/index.gts
similarity index 100%
rename from showcase/app/templates/page-components/badge-count.gts
rename to showcase/app/templates/page-components/badge-count/index.gts
diff --git a/showcase/app/templates/page-components/badge/carbonization.gts b/showcase/app/templates/page-components/badge/carbonization.gts
new file mode 100644
index 00000000000..24fa74bfc3e
--- /dev/null
+++ b/showcase/app/templates/page-components/badge/carbonization.gts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import BadgeCarbonization from 'showcase/components/page-components/badge/carbonization';
+
+const PageComponentsBadgeCarbonization: TemplateOnlyComponent = <template>
+  <BadgeCarbonization />
+</template>;
+
+export default PageComponentsBadgeCarbonization;
diff --git a/showcase/app/templates/page-components/badge.gts b/showcase/app/templates/page-components/badge/index.gts
similarity index 100%
rename from showcase/app/templates/page-components/badge.gts
rename to showcase/app/templates/page-components/badge/index.gts
diff --git a/showcase/app/templates/page-components/button/carbonization.gts b/showcase/app/templates/page-components/button/carbonization.gts
new file mode 100644
index 00000000000..0e8250f863f
--- /dev/null
+++ b/showcase/app/templates/page-components/button/carbonization.gts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import ButtonCarbonization from 'showcase/components/page-components/button/carbonization';
+
+const PageComponentsButtonCarbonization: TemplateOnlyComponent = <template>
+  <ButtonCarbonization />
+</template>;
+
+export default PageComponentsButtonCarbonization;
diff --git a/showcase/app/templates/page-components/button.gts b/showcase/app/templates/page-components/button/index.gts
similarity index 100%
rename from showcase/app/templates/page-components/button.gts
rename to showcase/app/templates/page-components/button/index.gts
diff --git a/showcase/app/templates/page-foundations/color/carbonization.gts b/showcase/app/templates/page-foundations/color/carbonization.gts
new file mode 100644
index 00000000000..279d97b1a0d
--- /dev/null
+++ b/showcase/app/templates/page-foundations/color/carbonization.gts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import ColorCarbonization from 'showcase/components/page-foundations/color/carbonization';
+
+const PageFoundationsColorCarbonization: TemplateOnlyComponent = <template>
+  <ColorCarbonization />
+</template>;
+
+export default PageFoundationsColorCarbonization;
diff --git a/showcase/app/templates/page-foundations/color.gts b/showcase/app/templates/page-foundations/color/index.gts
similarity index 100%
rename from showcase/app/templates/page-foundations/color.gts
rename to showcase/app/templates/page-foundations/color/index.gts
diff --git a/showcase/app/templates/page-foundations/focus-ring/carbonization.gts b/showcase/app/templates/page-foundations/focus-ring/carbonization.gts
new file mode 100644
index 00000000000..a9904339527
--- /dev/null
+++ b/showcase/app/templates/page-foundations/focus-ring/carbonization.gts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import FocusRingCarbonization from 'showcase/components/page-foundations/focus-ring/carbonization';
+
+const PageFoundationsFocusRingCarbonization: TemplateOnlyComponent = <template>
+  <FocusRingCarbonization />
+</template>;
+
+export default PageFoundationsFocusRingCarbonization;
diff --git a/showcase/app/templates/page-foundations/focus-ring.gts b/showcase/app/templates/page-foundations/focus-ring/index.gts
similarity index 100%
rename from showcase/app/templates/page-foundations/focus-ring.gts
rename to showcase/app/templates/page-foundations/focus-ring/index.gts
diff --git a/showcase/app/templates/page-foundations/typography/carbonization.gts b/showcase/app/templates/page-foundations/typography/carbonization.gts
new file mode 100644
index 00000000000..c567b92767f
--- /dev/null
+++ b/showcase/app/templates/page-foundations/typography/carbonization.gts
@@ -0,0 +1,9 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import TypographyCarbonization from 'showcase/components/page-foundations/typography/carbonization';
+
+const PageFoundationsTypographyCarbonization: TemplateOnlyComponent = <template>
+  <TypographyCarbonization />
+</template>;
+
+export default PageFoundationsTypographyCarbonization;
diff --git a/showcase/app/templates/page-foundations/typography.gts b/showcase/app/templates/page-foundations/typography/index.gts
similarity index 100%
rename from showcase/app/templates/page-foundations/typography.gts
rename to showcase/app/templates/page-foundations/typography/index.gts

From 8b162e900a9c253442345ca4bef5f674dff52231 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Tue, 7 Oct 2025 19:04:43 +0100
Subject: [PATCH 17/18] added carbon web components for comparison on
 `BadgeCount` page

---
 .../badge-count/carbonization.gts             | 93 +++++++++++++++----
 1 file changed, 76 insertions(+), 17 deletions(-)

diff --git a/showcase/app/components/page-components/badge-count/carbonization.gts b/showcase/app/components/page-components/badge-count/carbonization.gts
index 6f0f1e24a25..17fe83b598e 100644
--- a/showcase/app/components/page-components/badge-count/carbonization.gts
+++ b/showcase/app/components/page-components/badge-count/carbonization.gts
@@ -1,5 +1,6 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
+import { array } from '@ember/helper';
 import { notEq } from 'ember-truth-helpers';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
@@ -10,7 +11,6 @@ import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonizatio
 
 import { HdsBadgeCount } from '@hashicorp/design-system-components/components';
 import {
-  COLORS,
   SIZES,
   TYPES,
 } from '@hashicorp/design-system-components/components/hds/badge-count/index';
@@ -35,6 +35,18 @@ const BadgeCountIndex: TemplateOnlyComponent = <template>
           {{/each}}
         </ShwFlex>
       </:theming>
+      <:reference>
+        <ShwFlex @direction="column" as |SF|>
+          {{#let (array "sm" "md" "lg") as |SIZES|}}
+            {{#each SIZES as |size|}}
+              <SF.Item>
+                <cds-tag size={{size}}>3</cds-tag>
+                <cds-tag size={{size}}>99+</cds-tag>
+              </SF.Item>
+            {{/each}}
+          {{/let}}
+        </ShwFlex>
+      </:reference>
     </ShwCarbonizationComparisonGrid>
 
     <ShwDivider @level={{2}} />
@@ -52,28 +64,75 @@ const BadgeCountIndex: TemplateOnlyComponent = <template>
           {{/each}}
         </ShwFlex>
       </:theming>
+      <:reference>
+        <ShwFlex @direction="column" as |SF|>
+          {{#let (array "gray" "high-contrast" "outline") as |TYPES|}}
+            {{#each TYPES as |type|}}
+              <SF.Item>
+                <cds-tag type={{type}}>3</cds-tag>
+                <cds-tag type={{type}}>99+</cds-tag>
+              </SF.Item>
+            {{/each}}
+          {{/let}}
+        </ShwFlex>
+      </:reference>
     </ShwCarbonizationComparisonGrid>
 
     <ShwDivider @level={{2}} />
 
     <ShwTextH2>Color</ShwTextH2>
 
-    {{#each COLORS as |color index|}}
-      <ShwCarbonizationComparisonGrid
-        @hideThemeLabels={{(if (notEq index 0) true)}}
-      >
-        <:theming>
-          <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
-            {{#each TYPES as |type|}}
-              <SF.Item class="shw-component-badge-sample-color--{{color}}">
-                <HdsBadgeCount @text="3" @type={{type}} @color={{color}} />
-                <HdsBadgeCount @text="99+" @type={{type}} @color={{color}} />
-              </SF.Item>
-            {{/each}}
-          </ShwFlex>
-        </:theming>
-      </ShwCarbonizationComparisonGrid>
-    {{/each}}
+    <ShwCarbonizationComparisonGrid @label="neutral">
+      <:theming>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item class="shw-component-badge-sample-color--neutral">
+              <HdsBadgeCount @text="3" @type={{type}} @color="neutral" />
+              <HdsBadgeCount @text="99+" @type={{type}} @color="neutral" />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+      <:reference>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          <SF.Item>
+            <cds-tag type="gray">3</cds-tag>
+            <cds-tag type="gray">99+</cds-tag>
+          </SF.Item>
+          <SF.Item>
+            <cds-tag type="outline">3</cds-tag>
+            <cds-tag type="outline">99+</cds-tag>
+          </SF.Item>
+        </ShwFlex>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwCarbonizationComparisonGrid @label="neutral-dark-mode">
+      <:theming>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item
+              class="shw-component-badge-sample-color--neutral-dark-mode"
+            >
+              <HdsBadgeCount
+                @text="3"
+                @type={{type}}
+                @color="neutral-dark-mode"
+              />
+              <HdsBadgeCount
+                @text="99+"
+                @type={{type}}
+                @color="neutral-dark-mode"
+              />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+      <:reference>
+        <cds-tag type="high-contrast">3</cds-tag>
+        <cds-tag type="high-contrast">99+</cds-tag>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
 
   </section>
 </template>;

From 911cf491b677e37d1d809f939cefeb56defac541 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Tue, 7 Oct 2025 21:58:19 +0100
Subject: [PATCH 18/18] added carbon web components for comparison on `Button`
 page

---
 .../badge-count/carbonization.gts             |   1 -
 .../page-components/button/carbonization.gts  | 126 ++++++++++++++++--
 showcase/app/index.html                       |  12 +-
 3 files changed, 121 insertions(+), 18 deletions(-)

diff --git a/showcase/app/components/page-components/badge-count/carbonization.gts b/showcase/app/components/page-components/badge-count/carbonization.gts
index 17fe83b598e..d6b29dc18f6 100644
--- a/showcase/app/components/page-components/badge-count/carbonization.gts
+++ b/showcase/app/components/page-components/badge-count/carbonization.gts
@@ -1,7 +1,6 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 import { array } from '@ember/helper';
-import { notEq } from 'ember-truth-helpers';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
 import ShwTextH2 from 'showcase/components/shw/text/h2';
diff --git a/showcase/app/components/page-components/button/carbonization.gts b/showcase/app/components/page-components/button/carbonization.gts
index a7979a785be..64228d339f9 100644
--- a/showcase/app/components/page-components/button/carbonization.gts
+++ b/showcase/app/components/page-components/button/carbonization.gts
@@ -1,6 +1,8 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { helper } from '@ember/component/helper';
 import { pageTitle } from 'ember-page-title';
 import { capitalize } from '@ember/string';
+import { array } from '@ember/helper';
 import style from 'ember-style-modifier';
 import { eq } from 'ember-truth-helpers';
 
@@ -12,7 +14,10 @@ import ShwFlex from 'showcase/components/shw/flex';
 import ShwDivider from 'showcase/components/shw/divider';
 import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
 
-import { HdsButton } from '@hashicorp/design-system-components/components';
+import {
+  HdsButton,
+  HdsIcon,
+} from '@hashicorp/design-system-components/components';
 import {
   COLORS,
   SIZES,
@@ -21,7 +26,16 @@ import {
 // these are used only for presentation purpose in the showcase
 const STATES = ['default', 'hover', 'active', 'focus', 'disabled'];
 
-import CodeFragmentWithLoadingState from 'showcase/components/page-components/button/code-fragments/with-loading-state';
+const MAPPING_HDS_COLOR_TO_CDS_KIND = {
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+  critical: 'danger',
+} as const;
+
+const mapHdsColorToCdsKind = helper(function ([color]) {
+  return MAPPING_HDS_COLOR_TO_CDS_KIND[color];
+});
 
 const ButtonCarbonization: TemplateOnlyComponent = <template>
   {{pageTitle "Button - Carbonization"}}
@@ -62,10 +76,46 @@ const ButtonCarbonization: TemplateOnlyComponent = <template>
             />
           </SF.Item>
           <SF.Item {{style width="150px"}}>
-            <CodeFragmentWithLoadingState />
+            <HdsButton @text="Loading" @icon="loading" @isFullWidth={{true}} />
           </SF.Item>
         </ShwFlex>
       </:theming>
+      <:reference>
+        <ShwFlex @direction="column" as |SF|>
+          <SF.Item>
+            <cds-button size="md" kind="primary">Lorem ipsum</cds-button>
+          </SF.Item>
+          <SF.Item>
+            <cds-button size="md" kind="primary"><HdsIcon
+                @name="plus"
+                slot="icon"
+              />Lorem ipsum</cds-button>
+          </SF.Item>
+          <SF.Item>
+            {{! same as 'cds-icon-button' - see: https://ibm-studios.slack.com/archives/C08Q3RGAGR5/p1759864437238719?thread_ts=1759863653.216359&cid=C08Q3RGAGR5 }}
+            <cds-button
+              size="md"
+              kind="primary"
+              tooltip-text="cds-button description (via attribute)"
+              tooltip-position="top"
+            >
+              <HdsIcon @name="plus" slot="icon" />
+            </cds-button>
+          </SF.Item>
+          <SF.Item>
+            <cds-button size="md" kind="primary"><HdsIcon
+                @name="plus"
+                slot="icon"
+              />This is a very long text that should go on multiple lines</cds-button>
+          </SF.Item>
+          <SF.Item {{style width="150px"}}>
+            <cds-button size="md" kind="primary"><HdsIcon
+                @name="loading"
+                slot="icon"
+              />Loading</cds-button>
+          </SF.Item>
+        </ShwFlex>
+      </:reference>
     </ShwCarbonizationComparisonGrid>
 
     <ShwDivider @level={{2}} />
@@ -87,23 +137,39 @@ const ButtonCarbonization: TemplateOnlyComponent = <template>
           {{/each}}
         </ShwFlex>
       </:theming>
+      <:reference>
+        <ShwFlex @direction="column" as |SF|>
+          {{#let (array "sm" "md" "lg") as |SIZES|}}
+            {{#each SIZES as |size|}}
+              <SF.Item>
+                <cds-button size={{size}}><HdsIcon
+                    @name="plus"
+                    slot="icon"
+                  />Lorem ipsum</cds-button>
+              </SF.Item>
+            {{/each}}
+          {{/let}}
+        </ShwFlex>
+      </:reference>
     </ShwCarbonizationComparisonGrid>
 
     <ShwDivider @level={{2}} />
 
     <ShwTextH2>Colors</ShwTextH2>
 
-    <ShwCarbonizationComparisonGrid>
-      <:theming>
-        <ShwFlex @direction="column" as |SF|>
-          {{#each COLORS as |color|}}
-            <SF.Item>
-              <HdsButton @icon="plus" @text="Lorem ipsum" @color={{color}} />
-            </SF.Item>
-          {{/each}}
-        </ShwFlex>
-      </:theming>
-    </ShwCarbonizationComparisonGrid>
+    {{#each COLORS as |color|}}
+      <ShwCarbonizationComparisonGrid @label={{color}}>
+        <:theming>
+          <HdsButton @icon="plus" @text="Lorem ipsum" @color={{color}} />
+        </:theming>
+        <:reference>
+          <cds-button size="md" kind={{mapHdsColorToCdsKind color}}><HdsIcon
+              @name="plus"
+              slot="icon"
+            />Lorem ipsum</cds-button>
+        </:reference>
+      </ShwCarbonizationComparisonGrid>
+    {{/each}}
 
     <ShwDivider @level={{2}} />
 
@@ -139,6 +205,38 @@ const ButtonCarbonization: TemplateOnlyComponent = <template>
               {{/each}}
             </ShwFlex>
           </:theming>
+          <:reference>
+            {{#if (eq state "default")}}
+              <ShwFlex @direction="column" @gap="0.75rem" as |SF|>
+                {{#let (array "sm" "md" "lg") as |SIZES|}}
+                  {{#each SIZES as |size|}}
+                    <SF.Item>
+                      <cds-button
+                        size={{size}}
+                        kind={{mapHdsColorToCdsKind color}}
+                      ><HdsIcon @name="plus" slot="icon" />Lorem ipsum</cds-button>
+                    </SF.Item>
+                  {{/each}}
+                {{/let}}
+              </ShwFlex>
+            {{else if (eq state "disabled")}}
+              <ShwFlex @direction="column" @gap="0.75rem" as |SF|>
+                {{#let (array "sm" "md" "lg") as |SIZES|}}
+                  {{#each SIZES as |size|}}
+                    <SF.Item>
+                      <cds-button
+                        size={{size}}
+                        kind={{mapHdsColorToCdsKind color}}
+                        disabled
+                      ><HdsIcon @name="plus" slot="icon" />Lorem ipsum</cds-button>
+                    </SF.Item>
+                  {{/each}}
+                {{/let}}
+              </ShwFlex>
+            {{else}}
+              <pre>TODO: add static image here</pre>
+            {{/if}}
+          </:reference>
         </ShwCarbonizationComparisonGrid>
       {{/each}}
     {{/each}}
diff --git a/showcase/app/index.html b/showcase/app/index.html
index eab0e6c3c46..9ee3df3661e 100644
--- a/showcase/app/index.html
+++ b/showcase/app/index.html
@@ -29,10 +29,15 @@
 
   <!-- IBM Carbon Web Components - Import via CDN -->
   <script type="module"
-    src="https://1.www.s81c.com/common/carbon/web-components/version/v2.28.0/badge-indicator.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.28.0/tag.min.js"></script>
+    src="https://1.www.s81c.com/common/carbon/web-components/version/v2.39.1/badge-indicator.min.js"></script>
   <script type="module"
-    src="https://1.www.s81c.com/common/carbon/web-components/version/v2.28.0/inline-loading.min.js"></script>
+    src="https://1.www.s81c.com/common/carbon/web-components/version/v2.39.1/button.min.js"></script>
+  <!-- <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.39.1/icon.min.js"></script> -->
+  <script type="module"
+    src="https://1.www.s81c.com/common/carbon/web-components/version/v2.39.1/icon-button.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.39.1/tag.min.js"></script>
+  <script type="module"
+    src="https://1.www.s81c.com/common/carbon/web-components/version/v2.39.1/inline-loading.min.js"></script>
   <!-- This contains global styles and CSS resets too! -->
   <!-- <link
           rel="stylesheet"
@@ -47,6 +52,7 @@
 
     /* Suppress custom element until styles are loaded */
     cds-badge-indicator:not(:defined),
+    cds-button:not(:defined),
     cds-icon:not(:defined),
     /* cds-icon-button:not(:defined), */
     cds-tag:not(:defined),