From 0d45f281b664842093fc0e7a65b18940b8279021 Mon Sep 17 00:00:00 2001
From: mstoyanova <mstoyanova@infragistics.com>
Date: Tue, 1 Sep 2026 15:59:36 +0300
Subject: [PATCH 1/3] feat: add new components and templates for Snackbar,
 Splitter, Stepper, Theme Provider, Tile Manager, Toast, Toggle Button,
 Tooltip, and Virtual Scroll

---
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 46 +++++++++++++
 .../carousel/carousel-vertical/index.ts       | 15 +++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 45 +++++++++++++
 .../igc-ts/carousel/default/index.ts          | 15 +++++
 .../webcomponents/igc-ts/carousel/index.ts    | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 46 +++++++++++++
 .../igc-ts/chat/default/index.ts              | 15 +++++
 .../webcomponents/igc-ts/chat/index.ts        | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 31 +++++++++
 .../color-picker/color-picker-alpha/index.ts  | 15 +++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 29 +++++++++
 .../igc-ts/color-picker/default/index.ts      | 15 +++++
 .../igc-ts/color-picker/index.ts              | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 39 +++++++++++
 .../igc-ts/combo/combo-groups/index.ts        | 15 +++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 31 +++++++++
 .../igc-ts/combo/default/index.ts             | 15 +++++
 .../webcomponents/igc-ts/combo/index.ts       | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 17 +++++
 .../igc-ts/date-range-picker/default/index.ts | 15 +++++
 .../igc-ts/date-range-picker/index.ts         | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 28 ++++++++
 .../igc-ts/dialog/default/index.ts            | 15 +++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 32 ++++++++++
 .../igc-ts/dialog/dialog-form/index.ts        | 15 +++++
 .../webcomponents/igc-ts/dialog/index.ts      | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 21 ++++++
 .../igc-ts/file-input/default/index.ts        | 15 +++++
 .../webcomponents/igc-ts/file-input/index.ts  | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 34 ++++++++++
 .../igc-ts/highlight/default/index.ts         | 15 +++++
 .../webcomponents/igc-ts/highlight/index.ts   | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 17 +++++
 .../igc-ts/mask-input/default/index.ts        | 15 +++++
 .../webcomponents/igc-ts/mask-input/index.ts  | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 20 ++++++
 .../mask-input/mask-input-formats/index.ts    | 15 +++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 40 ++++++++++++
 .../igc-ts/nav-drawer/default/index.ts        | 15 +++++
 .../webcomponents/igc-ts/nav-drawer/index.ts  | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 20 ++++++
 .../igc-ts/qr-code/default/index.ts           | 15 +++++
 .../webcomponents/igc-ts/qr-code/index.ts     | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 26 ++++++++
 .../igc-ts/range-slider/default/index.ts      | 15 +++++
 .../igc-ts/range-slider/index.ts              | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 26 ++++++++
 .../igc-ts/select/default/index.ts            | 15 +++++
 .../webcomponents/igc-ts/select/index.ts      | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 42 ++++++++++++
 .../igc-ts/select/select-groups/index.ts      | 15 +++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 24 +++++++
 .../igc-ts/snackbar/default/index.ts          | 15 +++++
 .../webcomponents/igc-ts/snackbar/index.ts    | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 25 ++++++++
 .../igc-ts/snackbar/snackbar-action/index.ts  | 15 +++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 31 +++++++++
 .../igc-ts/splitter/default/index.ts          | 15 +++++
 .../webcomponents/igc-ts/splitter/index.ts    | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 27 ++++++++
 .../splitter/splitter-vertical/index.ts       | 15 +++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 38 +++++++++++
 .../igc-ts/stepper/default/index.ts           | 15 +++++
 .../webcomponents/igc-ts/stepper/index.ts     | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 37 +++++++++++
 .../igc-ts/stepper/stepper-vertical/index.ts  | 15 +++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 40 ++++++++++++
 .../igc-ts/theme-provider/default/index.ts    | 15 +++++
 .../igc-ts/theme-provider/index.ts            | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 40 ++++++++++++
 .../igc-ts/tile-manager/default/index.ts      | 15 +++++
 .../igc-ts/tile-manager/index.ts              | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 22 +++++++
 .../igc-ts/toast/default/index.ts             | 15 +++++
 .../webcomponents/igc-ts/toast/index.ts       | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   | 29 +++++++++
 .../files/src/app/__path__/__filePrefix__.ts  | 61 ++++++++++++++++++
 .../igc-ts/toggle-button/default/index.ts     | 15 +++++
 .../igc-ts/toggle-button/index.ts             | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 22 +++++++
 .../igc-ts/tooltip/default/index.ts           | 15 +++++
 .../webcomponents/igc-ts/tooltip/index.ts     | 14 ++++
 .../src/app/__path__/__filePrefix__.test.ts   |  9 +++
 .../files/src/app/__path__/__filePrefix__.ts  | 64 +++++++++++++++++++
 .../igc-ts/virtual-scroll/default/index.ts    | 15 +++++
 .../igc-ts/virtual-scroll/index.ts            | 14 ++++
 115 files changed, 2093 insertions(+)
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/carousel/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/carousel/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/carousel/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/carousel/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/chat/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/chat/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/chat/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/chat/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/color-picker/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/color-picker/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/color-picker/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/color-picker/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/combo/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/combo/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/combo/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/combo/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/date-range-picker/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/dialog/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/dialog/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/dialog/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/dialog/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/file-input/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/file-input/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/file-input/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/file-input/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/highlight/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/highlight/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/highlight/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/highlight/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/mask-input/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/mask-input/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/mask-input/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/mask-input/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/nav-drawer/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/qr-code/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/qr-code/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/qr-code/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/qr-code/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/range-slider/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/range-slider/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/range-slider/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/range-slider/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/select/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/select/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/select/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/select/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/select/select-groups/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/select/select-groups/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/select/select-groups/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/snackbar/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/snackbar/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/snackbar/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/snackbar/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/splitter/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/splitter/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/splitter/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/splitter/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/stepper/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/stepper/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/stepper/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/stepper/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/theme-provider/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/theme-provider/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/tile-manager/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/tile-manager/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/toast/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/toast/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/toast/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/toast/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/toggle-button/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/toggle-button/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/tooltip/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/tooltip/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/tooltip/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/tooltip/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/files/src/app/__path__/__filePrefix__.test.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/files/src/app/__path__/__filePrefix__.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/index.ts
 create mode 100644 packages/cli/templates/webcomponents/igc-ts/virtual-scroll/index.ts

diff --git a/packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..e63143dcc
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcCarouselComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..6f29ba780
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,46 @@
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcCarouselComponent,
+  IgcCarouselSlideComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcCarouselComponent,
+  IgcCarouselSlideComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    igc-carousel {
+      height: 320px;
+      width: 420px;
+    }
+    .slide {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: white;
+      font: 600 24px sans-serif;
+    }
+  `;
+
+  render() {
+    return html`
+      <igc-carousel vertical indicators-orientation="start">
+        <igc-carousel-slide>
+          <div class="slide" style="background: #4a6fa5;">Slide 1</div>
+        </igc-carousel-slide>
+        <igc-carousel-slide>
+          <div class="slide" style="background: #6b8f71;">Slide 2</div>
+        </igc-carousel-slide>
+        <igc-carousel-slide>
+          <div class="slide" style="background: #a5644a;">Slide 3</div>
+        </igc-carousel-slide>
+      </igc-carousel>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/index.ts b/packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/index.ts
new file mode 100644
index 000000000..48b96b2a7
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcCarouselVerticalTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Carousel"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "carousel-vertical";
+		this.projectType = "igc-ts";
+		this.name = "Carousel Vertical";
+		this.description = "IgcCarousel with vertical slide transitions";
+	}
+}
+module.exports = new IgcCarouselVerticalTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/carousel/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/carousel/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..e63143dcc
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/carousel/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcCarouselComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/carousel/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/carousel/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..33e7de476
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/carousel/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,45 @@
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcCarouselComponent,
+  IgcCarouselSlideComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcCarouselComponent,
+  IgcCarouselSlideComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    igc-carousel {
+      height: 260px;
+    }
+    .slide {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: white;
+      font: 600 24px sans-serif;
+    }
+  `;
+
+  render() {
+    return html`
+      <igc-carousel>
+        <igc-carousel-slide>
+          <div class="slide" style="background: #4a6fa5;">Slide 1</div>
+        </igc-carousel-slide>
+        <igc-carousel-slide>
+          <div class="slide" style="background: #6b8f71;">Slide 2</div>
+        </igc-carousel-slide>
+        <igc-carousel-slide>
+          <div class="slide" style="background: #a5644a;">Slide 3</div>
+        </igc-carousel-slide>
+      </igc-carousel>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/carousel/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/carousel/default/index.ts
new file mode 100644
index 000000000..76062805e
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/carousel/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcCarouselTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Carousel"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "carousel";
+		this.projectType = "igc-ts";
+		this.name = "Carousel";
+		this.description = "basic IgcCarousel with local slides";
+	}
+}
+module.exports = new IgcCarouselTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/carousel/index.ts b/packages/cli/templates/webcomponents/igc-ts/carousel/index.ts
new file mode 100644
index 000000000..7f209f294
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/carousel/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcCarouselComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Carousel";
+		this.group = "Layouts";
+		this.description = `Browse or navigate through a collection of slides`;
+	}
+}
+module.exports = new IgcCarouselComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/chat/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/chat/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..0ba387add
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/chat/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcChatComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/chat/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/chat/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..58c21ba05
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/chat/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,46 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcChatComponent,
+  type IgcChatMessage,
+  type IgcChatOptions,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcChatComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  // host must have an explicit width - it's a flex item with no intrinsic size
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+
+  private options: IgcChatOptions = {
+    currentUserId: 'me',
+    headerText: 'Support Chat',
+    inputPlaceholder: 'Type a message...',
+  };
+
+  private messages: IgcChatMessage[] = [
+    {
+      id: '1',
+      sender: 'support',
+      text: 'Hi! How can I help you today?',
+      timestamp: Date.now().toString(),
+    },
+  ];
+
+  render() {
+    return html`
+      <igc-chat
+        style="--igc-chat-height: 480px;"
+        .options=${this.options}
+        .messages=${this.messages}
+      ></igc-chat>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/chat/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/chat/default/index.ts
new file mode 100644
index 000000000..f7351761d
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/chat/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcChatTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Chat"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "chat";
+		this.projectType = "igc-ts";
+		this.name = "Chat";
+		this.description = "basic IgcChat";
+	}
+}
+module.exports = new IgcChatTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/chat/index.ts b/packages/cli/templates/webcomponents/igc-ts/chat/index.ts
new file mode 100644
index 000000000..b949ed8b3
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/chat/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcChatComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Chat";
+		this.group = "Data Entry & Display";
+		this.description = `Complete conversational UI with messages, attachments and suggestions`;
+	}
+}
+module.exports = new IgcChatComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..37ba21404
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcColorPickerComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..6b6adeac0
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,31 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcColorPickerComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  private swatches = [
+    'rgba(0, 0, 0, 0.5)',
+    'rgba(255, 255, 255, 0.5)',
+    '#4a6fa5',
+    '#a5644a',
+  ];
+
+  render() {
+    return html`
+      <igc-color-picker
+        label="Overlay color"
+        mode="input"
+        format="rgb"
+        show-alpha
+        value="rgba(74, 111, 165, 0.6)"
+        .swatches=${this.swatches}
+      ></igc-color-picker>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/index.ts b/packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/index.ts
new file mode 100644
index 000000000..b62a1e91b
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcColorPickerAlphaTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Color Picker"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "color-picker-alpha";
+		this.projectType = "igc-ts";
+		this.name = "Color Picker Alpha";
+		this.description = "IgcColorPicker in input mode with an alpha slider";
+	}
+}
+module.exports = new IgcColorPickerAlphaTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/color-picker/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/color-picker/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..37ba21404
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/color-picker/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcColorPickerComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/color-picker/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/color-picker/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..5bb6ef042
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/color-picker/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcColorPickerComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  private swatches = [
+    '#4a6fa5',
+    '#6b8f71',
+    '#a5644a',
+    '#8a4fbe',
+    '#c94f4f',
+  ];
+
+  render() {
+    return html`
+      <igc-color-picker
+        label="Brand color"
+        value="#4a6fa5"
+        .swatches=${this.swatches}
+      ></igc-color-picker>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/color-picker/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/color-picker/default/index.ts
new file mode 100644
index 000000000..c0bc1f216
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/color-picker/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcColorPickerTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Color Picker"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "color-picker";
+		this.projectType = "igc-ts";
+		this.name = "Color Picker";
+		this.description = "basic IgcColorPicker with predefined swatches";
+	}
+}
+module.exports = new IgcColorPickerTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/color-picker/index.ts b/packages/cli/templates/webcomponents/igc-ts/color-picker/index.ts
new file mode 100644
index 000000000..cbec0595a
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/color-picker/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcColorPickerComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Color Picker";
+		this.group = "Data Entry & Display";
+		this.description = `Lets users pick a color from a canvas, sliders or predefined swatches`;
+	}
+}
+module.exports = new IgcColorPickerComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..6d6827908
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcComboComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..85b32de84
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,39 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcComboComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcComboComponent);
+
+interface Country {
+  name: string;
+  continent: string;
+}
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  private countries: Country[] = [
+    { name: 'Bulgaria', continent: 'Europe' },
+    { name: 'France', continent: 'Europe' },
+    { name: 'Germany', continent: 'Europe' },
+    { name: 'Japan', continent: 'Asia' },
+    { name: 'South Korea', continent: 'Asia' },
+    { name: 'Canada', continent: 'North America' },
+    { name: 'United States', continent: 'North America' },
+  ];
+
+  render() {
+    return html`
+      <igc-combo
+        label="Country"
+        placeholder="Select countries"
+        value-key="name"
+        display-key="name"
+        group-key="continent"
+        .data=${this.countries}
+      ></igc-combo>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/index.ts b/packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/index.ts
new file mode 100644
index 000000000..0a4919e9c
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcComboGroupsTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Combo"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "combo-groups";
+		this.projectType = "igc-ts";
+		this.name = "Combo Groups";
+		this.description = "IgcCombo with grouped, data-bound items";
+	}
+}
+module.exports = new IgcComboGroupsTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/combo/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/combo/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..6d6827908
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/combo/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcComboComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/combo/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/combo/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..423d92a02
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/combo/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,31 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcComboComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcComboComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  private countries = [
+    'Bulgaria',
+    'France',
+    'Germany',
+    'Italy',
+    'Spain',
+    'United Kingdom',
+    'United States',
+  ];
+
+  render() {
+    return html`
+      <igc-combo
+        label="Country"
+        placeholder="Select countries"
+        .data=${this.countries}
+      ></igc-combo>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/combo/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/combo/default/index.ts
new file mode 100644
index 000000000..6b4809b87
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/combo/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcComboTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Combo"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "combo";
+		this.projectType = "igc-ts";
+		this.name = "Combo";
+		this.description = "basic IgcCombo with local data";
+	}
+}
+module.exports = new IgcComboTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/combo/index.ts b/packages/cli/templates/webcomponents/igc-ts/combo/index.ts
new file mode 100644
index 000000000..f327bd966
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/combo/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcComboComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Combo";
+		this.group = "Data Entry & Display";
+		this.description = `Provides easy filtering and selection of multiple items from a data-bound list`;
+	}
+}
+module.exports = new IgcComboComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..f1ad22457
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcDateRangePickerComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..76c6986a4
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,17 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcDateRangePickerComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcDateRangePickerComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-date-range-picker label="Trip dates"></igc-date-range-picker>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/index.ts
new file mode 100644
index 000000000..564702ec2
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcDateRangePickerTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Date Range Picker"];
+		this.controlGroup = "Scheduling";
+		this.listInComponentTemplates = true;
+		this.id = "date-range-picker";
+		this.projectType = "igc-ts";
+		this.name = "Date Range Picker";
+		this.description = "basic IgcDateRangePicker";
+	}
+}
+module.exports = new IgcDateRangePickerTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/date-range-picker/index.ts b/packages/cli/templates/webcomponents/igc-ts/date-range-picker/index.ts
new file mode 100644
index 000000000..21a673731
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/date-range-picker/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcDateRangePickerComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Date Range Picker";
+		this.group = "Scheduling";
+		this.description = `Lets users pick a start and end date from a dual calendar popover`;
+	}
+}
+module.exports = new IgcDateRangePickerComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/dialog/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/dialog/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..fc7b508a0
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/dialog/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcDialogComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/dialog/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/dialog/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..4106a62b5
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/dialog/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,28 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcDialogComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcButtonComponent,
+  IgcDialogComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-button command="--show" commandfor="delete-dialog">Delete account</igc-button>
+      <igc-dialog id="delete-dialog" title="Delete account">
+        <p>Are you sure you want to delete your account? This action cannot be undone.</p>
+        <div slot="footer">
+          <igc-button command="--hide" commandfor="delete-dialog" variant="flat">Cancel</igc-button>
+          <igc-button command="--hide" commandfor="delete-dialog" variant="contained">Delete</igc-button>
+        </div>
+      </igc-dialog>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/dialog/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/dialog/default/index.ts
new file mode 100644
index 000000000..aa0e0b650
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/dialog/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcDialogTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Dialog"];
+		this.controlGroup = "Interactions";
+		this.listInComponentTemplates = true;
+		this.id = "dialog";
+		this.projectType = "igc-ts";
+		this.name = "Dialog";
+		this.description = "basic IgcDialog";
+	}
+}
+module.exports = new IgcDialogTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..fc7b508a0
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcDialogComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..17d04e9a4
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,32 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcDialogComponent,
+  IgcInputComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcButtonComponent,
+  IgcDialogComponent,
+  IgcInputComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-button command="--show" commandfor="invite-dialog">Invite teammate</igc-button>
+      <igc-dialog id="invite-dialog" title="Invite a teammate" close-on-outside-click>
+        <form id="invite-form">
+          <igc-input name="email" type="email" label="Email address" required></igc-input>
+        </form>
+        <div slot="footer">
+          <igc-button command="--hide" commandfor="invite-dialog" variant="flat">Cancel</igc-button>
+          <igc-button command="--hide" commandfor="invite-dialog" variant="contained">Send invite</igc-button>
+        </div>
+      </igc-dialog>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/index.ts b/packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/index.ts
new file mode 100644
index 000000000..854956f67
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcDialogFormTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Dialog"];
+		this.controlGroup = "Interactions";
+		this.listInComponentTemplates = true;
+		this.id = "dialog-form";
+		this.projectType = "igc-ts";
+		this.name = "Dialog Form";
+		this.description = "IgcDialog hosting a short form";
+	}
+}
+module.exports = new IgcDialogFormTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/dialog/index.ts b/packages/cli/templates/webcomponents/igc-ts/dialog/index.ts
new file mode 100644
index 000000000..9ba5272f8
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/dialog/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcDialogComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Dialog";
+		this.group = "Interactions";
+		this.description = `Customizable modal dialog component`;
+	}
+}
+module.exports = new IgcDialogComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/file-input/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/file-input/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..c225baa67
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/file-input/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcFileInputComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/file-input/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/file-input/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..f97538a8a
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/file-input/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,21 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcFileInputComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcFileInputComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-file-input
+        label="Attach files"
+        accept=".jpg, .png, .pdf"
+        multiple
+      ></igc-file-input>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/file-input/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/file-input/default/index.ts
new file mode 100644
index 000000000..436191f46
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/file-input/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcFileInputTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["File Input"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "file-input";
+		this.projectType = "igc-ts";
+		this.name = "File Input";
+		this.description = "basic IgcFileInput";
+	}
+}
+module.exports = new IgcFileInputTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/file-input/index.ts b/packages/cli/templates/webcomponents/igc-ts/file-input/index.ts
new file mode 100644
index 000000000..86bb0e985
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/file-input/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcFileInputComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "File Input";
+		this.group = "Data Entry & Display";
+		this.description = `Input control for selecting and uploading one or more files`;
+	}
+}
+module.exports = new IgcFileInputComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/highlight/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/highlight/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..c815631c0
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/highlight/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcHighlightComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/highlight/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/highlight/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..be5c00a4c
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/highlight/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,34 @@
+import { html, LitElement } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcHighlightComponent,
+  IgcInputComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcHighlightComponent,
+  IgcInputComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  @query(IgcHighlightComponent.tagName)
+  private highlight!: IgcHighlightComponent;
+
+  private handleSearch(event: CustomEvent<string>) {
+    this.highlight.searchText = event.detail;
+  }
+
+  render() {
+    return html`
+      <igc-input label="Search" @igcInput=${this.handleSearch}></igc-input>
+      <igc-highlight>
+        <p>
+          Ignite UI for Web Components ships native, framework-agnostic UI
+          components that work with any framework.
+        </p>
+      </igc-highlight>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/highlight/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/highlight/default/index.ts
new file mode 100644
index 000000000..c9b306ad3
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/highlight/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcHighlightTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Highlight"];
+		this.controlGroup = "Interactions";
+		this.listInComponentTemplates = true;
+		this.id = "highlight";
+		this.projectType = "igc-ts";
+		this.name = "Highlight";
+		this.description = "basic IgcHighlight";
+	}
+}
+module.exports = new IgcHighlightTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/highlight/index.ts b/packages/cli/templates/webcomponents/igc-ts/highlight/index.ts
new file mode 100644
index 000000000..f0c2c02c5
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/highlight/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcHighlightComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Highlight";
+		this.group = "Interactions";
+		this.description = `Searches and highlights matching text projected into its default slot`;
+	}
+}
+module.exports = new IgcHighlightComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/mask-input/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/mask-input/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..961fe6195
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/mask-input/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcMaskInputComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/mask-input/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/mask-input/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..40b86c517
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/mask-input/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,17 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcMaskInputComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcMaskInputComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-mask-input label="Phone number" mask="(000) 000-0000"></igc-mask-input>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/mask-input/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/mask-input/default/index.ts
new file mode 100644
index 000000000..099ba2b4d
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/mask-input/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcMaskInputTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Mask Input"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "mask-input";
+		this.projectType = "igc-ts";
+		this.name = "Mask Input";
+		this.description = "basic IgcMaskInput with a phone number mask";
+	}
+}
+module.exports = new IgcMaskInputTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/mask-input/index.ts b/packages/cli/templates/webcomponents/igc-ts/mask-input/index.ts
new file mode 100644
index 000000000..ef3e27635
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/mask-input/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcMaskInputComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Mask Input";
+		this.group = "Data Entry & Display";
+		this.description = `Text input where user entry is constrained to a configurable character mask`;
+	}
+}
+module.exports = new IgcMaskInputComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..961fe6195
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcMaskInputComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..a19542ec9
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,20 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcMaskInputComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcMaskInputComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <div style="display: flex; flex-direction: column; gap: 16px; max-width: 280px;">
+        <igc-mask-input label="Postal code" mask="L0L 0L0" placeholder="A1A 1A1"></igc-mask-input>
+        <igc-mask-input label="Confirmation code" mask="CCCC-CCCC" prompt="*"></igc-mask-input>
+      </div>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/index.ts b/packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/index.ts
new file mode 100644
index 000000000..d6283024b
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcMaskInputFormatsTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Mask Input"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "mask-input-formats";
+		this.projectType = "igc-ts";
+		this.name = "Mask Input Formats";
+		this.description = "IgcMaskInput with letter and digit mask patterns";
+	}
+}
+module.exports = new IgcMaskInputFormatsTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..73ec7dff4
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcNavDrawerComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..0221ff1a6
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,40 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcNavDrawerComponent,
+  IgcNavDrawerItemComponent,
+  IgcNavDrawerHeaderItemComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcButtonComponent,
+  IgcNavDrawerComponent,
+  IgcNavDrawerItemComponent,
+  IgcNavDrawerHeaderItemComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-button command="--toggle" commandfor="app-drawer">Menu</igc-button>
+      <igc-nav-drawer id="app-drawer">
+        <igc-nav-drawer-header-item>My Application</igc-nav-drawer-header-item>
+        <igc-nav-drawer-item active>
+          <span slot="content">Dashboard</span>
+        </igc-nav-drawer-item>
+        <igc-nav-drawer-item>
+          <span slot="content">Orders</span>
+        </igc-nav-drawer-item>
+        <igc-nav-drawer-item>
+          <span slot="content">Settings</span>
+        </igc-nav-drawer-item>
+        <igc-nav-drawer-item disabled>
+          <span slot="content">Archived</span>
+        </igc-nav-drawer-item>
+      </igc-nav-drawer>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/index.ts
new file mode 100644
index 000000000..6376abcdb
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcNavDrawerTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Nav Drawer"];
+		this.controlGroup = "Menus";
+		this.listInComponentTemplates = true;
+		this.id = "nav-drawer";
+		this.projectType = "igc-ts";
+		this.name = "Nav Drawer";
+		this.description = "basic IgcNavDrawer toggled from a button";
+	}
+}
+module.exports = new IgcNavDrawerTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/nav-drawer/index.ts b/packages/cli/templates/webcomponents/igc-ts/nav-drawer/index.ts
new file mode 100644
index 000000000..319bbbb7f
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/nav-drawer/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcNavDrawerComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Nav Drawer";
+		this.group = "Menus";
+		this.description = `Collapsible side navigation container for quick access between views`;
+	}
+}
+module.exports = new IgcNavDrawerComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/qr-code/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/qr-code/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..7a64e6a40
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/qr-code/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcQrCodeComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/qr-code/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/qr-code/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..5435c4148
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/qr-code/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,20 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcQrCodeComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-qr-code
+        value="https://www.infragistics.com/products/ignite-ui-web-components"
+        size="160"
+      ></igc-qr-code>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/qr-code/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/qr-code/default/index.ts
new file mode 100644
index 000000000..138534f90
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/qr-code/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcQrCodeTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Qr Code"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "qr-code";
+		this.projectType = "igc-ts";
+		this.name = "Qr Code";
+		this.description = "basic IgcQrCode";
+	}
+}
+module.exports = new IgcQrCodeTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/qr-code/index.ts b/packages/cli/templates/webcomponents/igc-ts/qr-code/index.ts
new file mode 100644
index 000000000..1811cf213
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/qr-code/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcQrCodeComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Qr Code";
+		this.group = "Data Entry & Display";
+		this.description = `Renders a scannable QR code as an SVG based on the provided value`;
+	}
+}
+module.exports = new IgcQrCodeComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/range-slider/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/range-slider/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..30375dca2
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/range-slider/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcRangeSliderComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/range-slider/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/range-slider/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..6015a7e4a
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/range-slider/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,26 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcRangeSliderComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcRangeSliderComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+    <igc-range-slider
+      style="margin: 40px 20px; width: 200px;"
+      min="0"
+      max="100"
+      lower="20"
+      upper="80"
+      primary-ticks="5"
+    >
+      Price range
+    </igc-range-slider>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/range-slider/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/range-slider/default/index.ts
new file mode 100644
index 000000000..c9c90854f
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/range-slider/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcRangeSliderTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Range Slider"];
+		this.controlGroup = "Interactions";
+		this.listInComponentTemplates = true;
+		this.id = "range-slider";
+		this.projectType = "igc-ts";
+		this.name = "Range Slider";
+		this.description = "basic IgcRangeSlider";
+	}
+}
+module.exports = new IgcRangeSliderTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/range-slider/index.ts b/packages/cli/templates/webcomponents/igc-ts/range-slider/index.ts
new file mode 100644
index 000000000..2587e4ebb
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/range-slider/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcRangeSliderComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Range Slider";
+		this.group = "Interactions";
+		this.description = `Basic range slider component`;
+	}
+}
+module.exports = new IgcRangeSliderComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/select/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/select/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..0e0182dfb
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/select/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcSelectComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/select/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/select/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..3e9b2b923
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/select/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,26 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcSelectComponent,
+  IgcSelectItemComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcSelectComponent,
+  IgcSelectItemComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-select label="Priority" placeholder="Choose a priority">
+        <igc-select-item value="low">Low</igc-select-item>
+        <igc-select-item value="medium">Medium</igc-select-item>
+        <igc-select-item value="high">High</igc-select-item>
+        <igc-select-item value="urgent" disabled>Urgent</igc-select-item>
+      </igc-select>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/select/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/select/default/index.ts
new file mode 100644
index 000000000..ca633ba6c
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/select/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcSelectTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Select"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "select";
+		this.projectType = "igc-ts";
+		this.name = "Select";
+		this.description = "basic IgcSelect";
+	}
+}
+module.exports = new IgcSelectTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/select/index.ts b/packages/cli/templates/webcomponents/igc-ts/select/index.ts
new file mode 100644
index 000000000..71b0ce178
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/select/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcSelectComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Select";
+		this.group = "Data Entry & Display";
+		this.description = `Provides an input with a dropdown list allowing selection of a single item`;
+	}
+}
+module.exports = new IgcSelectComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/select/select-groups/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/select/select-groups/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..0e0182dfb
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/select/select-groups/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcSelectComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/select/select-groups/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/select/select-groups/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..c0949b092
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/select/select-groups/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,42 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcSelectComponent,
+  IgcSelectItemComponent,
+  IgcSelectGroupComponent,
+  IgcSelectHeaderComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcSelectComponent,
+  IgcSelectItemComponent,
+  IgcSelectGroupComponent,
+  IgcSelectHeaderComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-select label="Assignee">
+        <igc-select-header>Tasks</igc-select-header>
+        <igc-select-group>
+          <span slot="label">Pre development</span>
+          <igc-select-item value="spec">Specification</igc-select-item>
+        </igc-select-group>
+        <igc-select-group>
+          <span slot="label">Development</span>
+          <igc-select-item value="impl">Implementation</igc-select-item>
+          <igc-select-item value="testing">Testing</igc-select-item>
+        </igc-select-group>
+        <igc-select-group>
+          <span slot="label">Post development</span>
+          <igc-select-item value="samples">Samples</igc-select-item>
+          <igc-select-item value="docs">Documentation</igc-select-item>
+          <igc-select-item value="builds">Builds</igc-select-item>
+        </igc-select-group>
+      </igc-select>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/select/select-groups/index.ts b/packages/cli/templates/webcomponents/igc-ts/select/select-groups/index.ts
new file mode 100644
index 000000000..03e313798
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/select/select-groups/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcSelectGroupsTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Select"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "select-groups";
+		this.projectType = "igc-ts";
+		this.name = "Select Groups";
+		this.description = "IgcSelect with grouped and header items";
+	}
+}
+module.exports = new IgcSelectGroupsTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/snackbar/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/snackbar/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..ba8bbb26a
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/snackbar/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcSnackbarComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/snackbar/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/snackbar/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..7713441e8
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/snackbar/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,24 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcSnackbarComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcButtonComponent,
+  IgcSnackbarComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-button command="--show" commandfor="offline-snackbar">Go offline</igc-button>
+      <igc-snackbar id="offline-snackbar" display-time="3000">
+        You are currently offline.
+      </igc-snackbar>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/snackbar/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/snackbar/default/index.ts
new file mode 100644
index 000000000..680f7e686
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/snackbar/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcSnackbarTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Snackbar"];
+		this.controlGroup = "Notifications";
+		this.listInComponentTemplates = true;
+		this.id = "snackbar";
+		this.projectType = "igc-ts";
+		this.name = "Snackbar";
+		this.description = "basic IgcSnackbar";
+	}
+}
+module.exports = new IgcSnackbarTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/snackbar/index.ts b/packages/cli/templates/webcomponents/igc-ts/snackbar/index.ts
new file mode 100644
index 000000000..71fcc21b4
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/snackbar/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcSnackbarComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Snackbar";
+		this.group = "Notifications";
+		this.description = `Customizable snackbar component`;
+	}
+}
+module.exports = new IgcSnackbarComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..ba8bbb26a
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcSnackbarComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..d0adc9245
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,25 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcSnackbarComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcButtonComponent,
+  IgcSnackbarComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-button command="--show" commandfor="delete-snackbar">Delete message</igc-button>
+      <igc-snackbar id="delete-snackbar" display-time="4000">
+        Message deleted.
+        <igc-button slot="action" variant="flat">Undo</igc-button>
+      </igc-snackbar>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/index.ts b/packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/index.ts
new file mode 100644
index 000000000..fb0ee01d3
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcSnackbarActionTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Snackbar"];
+		this.controlGroup = "Notifications";
+		this.listInComponentTemplates = true;
+		this.id = "snackbar-action";
+		this.projectType = "igc-ts";
+		this.name = "Snackbar Action";
+		this.description = "IgcSnackbar with an action button";
+	}
+}
+module.exports = new IgcSnackbarActionTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/splitter/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/splitter/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..f4873554c
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/splitter/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcSplitterComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/splitter/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/splitter/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..698e97b0c
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/splitter/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,31 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcSplitterComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcSplitterComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  // host must have an explicit width - it's a flex item with no intrinsic size
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+
+  render() {
+    return html`
+      <igc-splitter
+        style="height: 240px; border: 1px solid var(--ig-gray-300, #ccc);"
+        start-size="30%"
+      >
+        <div slot="start" style="padding: 16px;">Navigation</div>
+        <div slot="end" style="padding: 16px;">Content</div>
+      </igc-splitter>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/splitter/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/splitter/default/index.ts
new file mode 100644
index 000000000..28b5d2bc5
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/splitter/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcSplitterTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Splitter"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "splitter";
+		this.projectType = "igc-ts";
+		this.name = "Splitter";
+		this.description = "IgcSplitter with two horizontally split panes";
+	}
+}
+module.exports = new IgcSplitterTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/splitter/index.ts b/packages/cli/templates/webcomponents/igc-ts/splitter/index.ts
new file mode 100644
index 000000000..5d0725786
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/splitter/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcSplitterComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Splitter";
+		this.group = "Layouts";
+		this.description = `Resizable, collapsible panes split horizontally or vertically`;
+	}
+}
+module.exports = new IgcSplitterComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..f4873554c
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcSplitterComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..d2fe06caf
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,27 @@
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcSplitterComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcSplitterComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    igc-splitter {
+      height: 320px;
+      border: 1px solid var(--ig-gray-300, #ccc);
+    }
+  `;
+
+  render() {
+    return html`
+      <igc-splitter orientation="vertical" start-size="40%">
+        <div slot="start" style="padding: 16px;">Editor</div>
+        <div slot="end" style="padding: 16px;">Console output</div>
+      </igc-splitter>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/index.ts b/packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/index.ts
new file mode 100644
index 000000000..ccb18d1a3
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcSplitterVerticalTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Splitter"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "splitter-vertical";
+		this.projectType = "igc-ts";
+		this.name = "Splitter Vertical";
+		this.description = "IgcSplitter with vertically stacked, collapsible panes";
+	}
+}
+module.exports = new IgcSplitterVerticalTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/stepper/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/stepper/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..6b8278688
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/stepper/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcStepperComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/stepper/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/stepper/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..1fb8a94e5
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/stepper/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,38 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcStepperComponent,
+  IgcStepComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcStepperComponent,
+  IgcStepComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-stepper>
+        <igc-step complete>
+          <span slot="title">Account</span>
+          <p>Your account details have been saved.</p>
+        </igc-step>
+        <igc-step active>
+          <span slot="title">Profile</span>
+          <p>Tell us a bit more about yourself.</p>
+        </igc-step>
+        <igc-step optional>
+          <span slot="title">Preferences</span>
+          <p>Choose how you'd like to be notified.</p>
+        </igc-step>
+        <igc-step>
+          <span slot="title">Confirmation</span>
+          <p>Review and confirm your details.</p>
+        </igc-step>
+      </igc-stepper>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/stepper/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/stepper/default/index.ts
new file mode 100644
index 000000000..488d65455
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/stepper/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcStepperTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Stepper"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "stepper";
+		this.projectType = "igc-ts";
+		this.name = "Stepper";
+		this.description = "IgcStepper with horizontal steps";
+	}
+}
+module.exports = new IgcStepperTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/stepper/index.ts b/packages/cli/templates/webcomponents/igc-ts/stepper/index.ts
new file mode 100644
index 000000000..4c30704e9
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/stepper/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcStepperComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Stepper";
+		this.group = "Layouts";
+		this.description = `Visualizes content as a process divided into steps`;
+	}
+}
+module.exports = new IgcStepperComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..6b8278688
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcStepperComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..b7644cd9e
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,37 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcStepperComponent,
+  IgcStepComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcStepperComponent,
+  IgcStepComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-stepper orientation="vertical" linear>
+        <igc-step complete>
+          <span slot="title">Shipping address</span>
+          <span slot="subtitle">Where should we send your order?</span>
+          <p>123 Main St, Springfield</p>
+        </igc-step>
+        <igc-step active>
+          <span slot="title">Payment method</span>
+          <span slot="subtitle">Add a card or choose a saved one</span>
+          <p>Enter your payment details to continue.</p>
+        </igc-step>
+        <igc-step disabled>
+          <span slot="title">Review order</span>
+          <span slot="subtitle">Double-check everything before you pay</span>
+          <p>Available once payment is complete.</p>
+        </igc-step>
+      </igc-stepper>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/index.ts b/packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/index.ts
new file mode 100644
index 000000000..7bb65bc34
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcStepperVerticalTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Stepper"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "stepper-vertical";
+		this.projectType = "igc-ts";
+		this.name = "Stepper Vertical";
+		this.description = "IgcStepper with vertical, linear steps";
+	}
+}
+module.exports = new IgcStepperVerticalTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..357d5f88e
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcThemeProviderComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..ff298b8d7
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,40 @@
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcThemeProviderComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcThemeProviderComponent,
+  IgcButtonComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    .row {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px;
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="row">
+        <span>Global theme:</span>
+        <igc-button variant="contained">Save</igc-button>
+      </div>
+
+      <igc-theme-provider theme="material" variant="dark">
+        <div class="row">
+          <span>Scoped: material dark</span>
+          <igc-button variant="contained">Save</igc-button>
+        </div>
+      </igc-theme-provider>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/theme-provider/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/theme-provider/default/index.ts
new file mode 100644
index 000000000..fb63180e4
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/theme-provider/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcThemeProviderTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Theme Provider"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "theme-provider";
+		this.projectType = "igc-ts";
+		this.name = "Theme Provider";
+		this.description = "basic IgcThemeProvider";
+	}
+}
+module.exports = new IgcThemeProviderTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/theme-provider/index.ts b/packages/cli/templates/webcomponents/igc-ts/theme-provider/index.ts
new file mode 100644
index 000000000..e36f9d457
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/theme-provider/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcThemeProviderComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Theme Provider";
+		this.group = "Layouts";
+		this.description = `Scopes a theme to its descendant components via the Lit context API`;
+	}
+}
+module.exports = new IgcThemeProviderComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..766435ceb
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcTileManagerComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..2abd0780f
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,40 @@
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcTileComponent,
+  IgcTileManagerComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcTileManagerComponent,
+  IgcTileComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    igc-tile-manager {
+      height: 360px;
+    }
+  `;
+
+  render() {
+    return html`
+      <igc-tile-manager column-count="2">
+        <igc-tile>
+          <span slot="title">Revenue</span>
+          <p>$48,320 this month</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Active Users</span>
+          <p>1,204 online now</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Open Tickets</span>
+          <p>12 awaiting response</p>
+        </igc-tile>
+      </igc-tile-manager>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/tile-manager/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/tile-manager/default/index.ts
new file mode 100644
index 000000000..3319c3f10
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/tile-manager/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcTileManagerTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Tile Manager"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "tile-manager";
+		this.projectType = "igc-ts";
+		this.name = "Tile Manager";
+		this.description = "basic IgcTileManager";
+	}
+}
+module.exports = new IgcTileManagerTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/tile-manager/index.ts b/packages/cli/templates/webcomponents/igc-ts/tile-manager/index.ts
new file mode 100644
index 000000000..85b2e8612
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/tile-manager/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcTileManagerComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Tile Manager";
+		this.group = "Layouts";
+		this.description = `Displays content in tiles users can rearrange and resize`;
+	}
+}
+module.exports = new IgcTileManagerComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/toast/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/toast/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..dc28558d3
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/toast/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcToastComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/toast/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/toast/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..ec2b39918
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/toast/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,22 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcToastComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcButtonComponent,
+  IgcToastComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-button command="--show" commandfor="save-toast">Save changes</igc-button>
+      <igc-toast id="save-toast" display-time="3000">Your changes have been saved.</igc-toast>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/toast/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/toast/default/index.ts
new file mode 100644
index 000000000..810ca32de
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/toast/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcToastTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Toast"];
+		this.controlGroup = "Notifications";
+		this.listInComponentTemplates = true;
+		this.id = "toast";
+		this.projectType = "igc-ts";
+		this.name = "Toast";
+		this.description = "basic IgcToast";
+	}
+}
+module.exports = new IgcToastTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/toast/index.ts b/packages/cli/templates/webcomponents/igc-ts/toast/index.ts
new file mode 100644
index 000000000..77653d221
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/toast/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcToastComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Toast";
+		this.group = "Notifications";
+		this.description = `Customizable toast component`;
+	}
+}
+module.exports = new IgcToastComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..81c0dd87a
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcToggleButtonComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+
+  it('clicking a toggle button updates the displayed active formats', async () => {
+    const element = document.createElement('app-$(path)') as $(ClassName);
+    document.body.appendChild(element);
+    await element.updateComplete;
+
+    const status = element.shadowRoot!.querySelector('[data-testid="status"]')!;
+    expect(status.textContent).to.contain('bold');
+    expect(status.textContent).to.not.contain('italic');
+
+    const italicButton = element.shadowRoot!.querySelector(
+      'igc-toggle-button[value="italic"]'
+    ) as HTMLElement;
+    italicButton.click();
+    await element.updateComplete;
+
+    expect(status.textContent).to.contain('italic');
+
+    element.remove();
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..08cabf82c
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,61 @@
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcToggleButtonComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcToggleButtonComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    .settings {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      max-width: 360px;
+    }
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    .title {
+      font-weight: 600;
+    }
+    .subtitle {
+      font-size: 13px;
+      opacity: 0.7;
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="settings">
+        <div class="row">
+          <div>
+            <div class="title">Email notifications</div>
+            <div class="subtitle">Get a daily summary sent to your inbox</div>
+          </div>
+          <igc-toggle-button value="email" selected>On</igc-toggle-button>
+        </div>
+        <div class="row">
+          <div>
+            <div class="title">SMS alerts</div>
+            <div class="subtitle">Text messages for time-sensitive updates</div>
+          </div>
+          <igc-toggle-button value="sms">Off</igc-toggle-button>
+        </div>
+        <div class="row">
+          <div>
+            <div class="title">Push notifications</div>
+            <div class="subtitle">Not available on this device</div>
+          </div>
+          <igc-toggle-button value="push" disabled>Off</igc-toggle-button>
+        </div>
+      </div>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/index.ts
new file mode 100644
index 000000000..b3901ff37
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcToggleButtonTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Toggle button"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "toggle-button";
+		this.projectType = "igc-ts";
+		this.name = "Toggle Button";
+		this.description = "basic IgcToggleButton";
+	}
+}
+module.exports = new IgcToggleButtonTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/toggle-button/index.ts b/packages/cli/templates/webcomponents/igc-ts/toggle-button/index.ts
new file mode 100644
index 000000000..720acfa9d
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/toggle-button/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcToggleButtonComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Toggle button";
+		this.group = "Data Entry & Display";
+		this.description = `A button that toggles between selected and unselected state`;
+	}
+}
+module.exports = new IgcToggleButtonComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/tooltip/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/tooltip/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..2606b9e3f
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/tooltip/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcTooltipComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/tooltip/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/tooltip/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..f82b2e24d
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/tooltip/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,22 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcTooltipComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcButtonComponent,
+  IgcTooltipComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-button id="tooltip-target">Hover or focus me</igc-button>
+      <igc-tooltip anchor="tooltip-target" message="This action can't be undone."></igc-tooltip>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/tooltip/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/tooltip/default/index.ts
new file mode 100644
index 000000000..e041a54a2
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/tooltip/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcTooltipTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Tooltip"];
+		this.controlGroup = "Interactions";
+		this.listInComponentTemplates = true;
+		this.id = "tooltip";
+		this.projectType = "igc-ts";
+		this.name = "Tooltip";
+		this.description = "IgcTooltip anchored to a target element";
+	}
+}
+module.exports = new IgcTooltipTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/tooltip/index.ts b/packages/cli/templates/webcomponents/igc-ts/tooltip/index.ts
new file mode 100644
index 000000000..b10fec8ce
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/tooltip/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcTooltipComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Tooltip";
+		this.group = "Interactions";
+		this.description = `Displays informative text when users hover, focus or tap an element`;
+	}
+}
+module.exports = new IgcTooltipComponent();
diff --git a/packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/files/src/app/__path__/__filePrefix__.test.ts
new file mode 100644
index 000000000..96f5ff58c
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcVirtualScrollComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/files/src/app/__path__/__filePrefix__.ts
new file mode 100644
index 000000000..1f67f9926
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/files/src/app/__path__/__filePrefix__.ts
@@ -0,0 +1,64 @@
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcAvatarComponent,
+  IgcListComponent,
+  IgcListItemComponent,
+  IgcVirtualScrollComponent,
+  type VirtualScrollItemContext,
+  type VirtualScrollItemTemplate,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcVirtualScrollComponent,
+  IgcListComponent,
+  IgcListItemComponent,
+  IgcAvatarComponent,
+);
+
+interface Employee {
+  name: string;
+  email: string;
+}
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  // host must have an explicit width - it's a flex item with no intrinsic size
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    igc-virtual-scroll {
+      height: 320px;
+    }
+  `;
+
+  private employees: Employee[] = Array.from({ length: 1000 }, (_, i) => ({
+    name: `Employee ${i + 1}`,
+    email: `employee${i + 1}@example.com`,
+  }));
+
+  private itemTemplate: VirtualScrollItemTemplate<Employee> = (
+    ctx: VirtualScrollItemContext<Employee>
+  ) => html`
+    <igc-list-item>
+      <igc-avatar slot="start" shape="circle" initials=${ctx.value.name.slice(0, 2)}></igc-avatar>
+      <span slot="title">${ctx.value.name}</span>
+      <span slot="subtitle">${ctx.value.email}</span>
+    </igc-list-item>
+  `;
+
+  render() {
+    return html`
+      <igc-list>
+        <igc-virtual-scroll
+          .data=${this.employees}
+          .itemTemplate=${this.itemTemplate as VirtualScrollItemTemplate<unknown>}
+        ></igc-virtual-scroll>
+      </igc-list>
+    `;
+  }
+}
diff --git a/packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/index.ts
new file mode 100644
index 000000000..cfb52c415
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcVirtualScrollTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Virtual Scroll"];
+		this.controlGroup = "Grids & Lists";
+		this.listInComponentTemplates = true;
+		this.id = "virtual-scroll";
+		this.projectType = "igc-ts";
+		this.name = "Virtual Scroll";
+		this.description = "basic IgcVirtualScroll";
+	}
+}
+module.exports = new IgcVirtualScrollTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/virtual-scroll/index.ts b/packages/cli/templates/webcomponents/igc-ts/virtual-scroll/index.ts
new file mode 100644
index 000000000..effc09b8f
--- /dev/null
+++ b/packages/cli/templates/webcomponents/igc-ts/virtual-scroll/index.ts
@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcVirtualScrollComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Virtual Scroll";
+		this.group = "Grids & Lists";
+		this.description = `Efficiently renders large or unbounded lists by only rendering visible items`;
+	}
+}
+module.exports = new IgcVirtualScrollComponent();

From 20cead93bfc739bf9da9cb86675a19dbce086f32 Mon Sep 17 00:00:00 2001
From: Marina Stoyanova <Marina-L-Stoyanova@users.noreply.github.com>
Date: Tue, 1 Sep 2026 16:22:15 +0300
Subject: [PATCH 2/3] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 .../webcomponents/igc-ts/toggle-button/default/index.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/index.ts
index b3901ff37..719c23138 100644
--- a/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/index.ts
+++ b/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/index.ts
@@ -8,7 +8,7 @@ class IgcToggleButtonTemplate extends IgniteUIForWebComponentsTemplate {
 		this.listInComponentTemplates = true;
 		this.id = "toggle-button";
 		this.projectType = "igc-ts";
-		this.name = "Toggle Button";
+		this.name = "Toggle button";
 		this.description = "basic IgcToggleButton";
 	}
 }

From 3fb48a24f67d3eb7d1315f87a81c94a6a4837b74 Mon Sep 17 00:00:00 2001
From: Marina Stoyanova <Marina-L-Stoyanova@users.noreply.github.com>
Date: Tue, 1 Sep 2026 16:50:41 +0300
Subject: [PATCH 3/3] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 .../src/app/__path__/__filePrefix__.test.ts    | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.test.ts
index 81c0dd87a..eae697323 100644
--- a/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.test.ts
+++ b/packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -7,22 +7,18 @@ describe('IgcToggleButtonComponent', () => {
     expect(element).to.be.instanceOf($(ClassName));
   });
 
-  it('clicking a toggle button updates the displayed active formats', async () => {
+  it('renders toggle buttons with expected initial states', async () => {
     const element = document.createElement('app-$(path)') as $(ClassName);
     document.body.appendChild(element);
     await element.updateComplete;
 
-    const status = element.shadowRoot!.querySelector('[data-testid="status"]')!;
-    expect(status.textContent).to.contain('bold');
-    expect(status.textContent).to.not.contain('italic');
+    const emailButton = element.shadowRoot!.querySelector('igc-toggle-button[value="email"]');
+    const pushButton = element.shadowRoot!.querySelector('igc-toggle-button[value="push"]');
 
-    const italicButton = element.shadowRoot!.querySelector(
-      'igc-toggle-button[value="italic"]'
-    ) as HTMLElement;
-    italicButton.click();
-    await element.updateComplete;
-
-    expect(status.textContent).to.contain('italic');
+    expect(emailButton).to.not.equal(null);
+    expect(pushButton).to.not.equal(null);
+    expect((emailButton as HTMLElement).hasAttribute('selected')).to.equal(true);
+    expect((pushButton as HTMLElement).hasAttribute('disabled')).to.equal(true);
 
     element.remove();
   });