feat: add new components and templates webcomponents

[Marina-L-Stoyanova]

closes #1783

• Introduced IgcSnackbarActionTemplate for Snackbar with action button.
• Added IgcSplitterTemplate and IgcSplitterVerticalTemplate for horizontal and vertical splitters.
• Created IgcStepperTemplate and IgcStepperVerticalTemplate for stepper components.
• Implemented IgcThemeProviderTemplate for theme management.
• Developed IgcTileManagerTemplate for tile management layout.
• Added IgcToastTemplate for toast notifications.
• Introduced IgcToggleButtonTemplate for toggle button functionality.
• Created IgcTooltipTemplate for tooltip interactions.
• Implemented IgcVirtualScrollTemplate for efficient rendering of large lists.
• Added corresponding test files for each component to ensure functionality.

[coveralls]

coverage: 88.451% (+0.6%) from 87.816% — mstoyanova/component_template into master

[Copilot]

🟡 Changes recommended

The Toggle Button test suite includes assertions against non-existent rendered elements/values and will fail unless updated.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds a large set of Ignite UI for Web Components (igc-ts) CLI templates (component metadata, template registrations, and Lit-based example implementations) along with Vitest smoke tests to ensure generated views instantiate.

Changes:

• Introduces new BaseComponent registrations for multiple Web Components (e.g., Snackbar, Toast, Tooltip, Splitter, Stepper, Virtual Scroll, etc.).
• Adds corresponding IgniteUIForWebComponentsTemplate implementations (including variants like vertical stepper/splitter and snackbar action).
• Adds Lit example files plus Vitest instantiation tests for each added template.

File summaries

File	Description
packages/cli/templates/webcomponents/igc-ts/virtual-scroll/index.ts	Registers Virtual Scroll component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/index.ts	Registers the default Virtual Scroll template.
packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/files/src/app/path/filePrefix.ts	Lit example rendering igc-virtual-scroll with a list.
packages/cli/templates/webcomponents/igc-ts/virtual-scroll/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Virtual Scroll template output.
packages/cli/templates/webcomponents/igc-ts/tooltip/index.ts	Registers Tooltip component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/tooltip/default/index.ts	Registers the default Tooltip template.
packages/cli/templates/webcomponents/igc-ts/tooltip/default/files/src/app/path/filePrefix.ts	Lit example rendering igc-tooltip anchored to a button.
packages/cli/templates/webcomponents/igc-ts/tooltip/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Tooltip template output.
packages/cli/templates/webcomponents/igc-ts/toggle-button/index.ts	Registers Toggle Button component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/toggle-button/default/index.ts	Registers the default Toggle Button template.
packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/path/filePrefix.ts	Lit example rendering multiple igc-toggle-button instances.
packages/cli/templates/webcomponents/igc-ts/toggle-button/default/files/src/app/path/filePrefix.test.ts	Vitest tests for Toggle Button template output.
packages/cli/templates/webcomponents/igc-ts/toast/index.ts	Registers Toast component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/toast/default/index.ts	Registers the default Toast template.
packages/cli/templates/webcomponents/igc-ts/toast/default/files/src/app/path/filePrefix.ts	Lit example rendering igc-toast with a trigger button.
packages/cli/templates/webcomponents/igc-ts/toast/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Toast template output.
packages/cli/templates/webcomponents/igc-ts/tile-manager/index.ts	Registers Tile Manager component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/tile-manager/default/index.ts	Registers the default Tile Manager template.
packages/cli/templates/webcomponents/igc-ts/tile-manager/default/files/src/app/path/filePrefix.ts	Lit example rendering igc-tile-manager with tiles.
packages/cli/templates/webcomponents/igc-ts/tile-manager/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Tile Manager template output.
packages/cli/templates/webcomponents/igc-ts/theme-provider/index.ts	Registers Theme Provider component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/theme-provider/default/index.ts	Registers the default Theme Provider template.
packages/cli/templates/webcomponents/igc-ts/theme-provider/default/files/src/app/path/filePrefix.ts	Lit example demonstrating scoped theming via igc-theme-provider.
packages/cli/templates/webcomponents/igc-ts/theme-provider/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Theme Provider template output.
packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/index.ts	Registers the vertical Stepper template variant.
packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/files/src/app/path/filePrefix.ts	Lit example rendering a vertical, linear stepper.
packages/cli/templates/webcomponents/igc-ts/stepper/stepper-vertical/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for vertical Stepper template output.
packages/cli/templates/webcomponents/igc-ts/stepper/index.ts	Registers Stepper component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/stepper/default/index.ts	Registers the default Stepper template.
packages/cli/templates/webcomponents/igc-ts/stepper/default/files/src/app/path/filePrefix.ts	Lit example rendering a horizontal stepper.
packages/cli/templates/webcomponents/igc-ts/stepper/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Stepper template output.
packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/index.ts	Registers the vertical Splitter template variant.
packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/files/src/app/path/filePrefix.ts	Lit example rendering a vertical splitter.
packages/cli/templates/webcomponents/igc-ts/splitter/splitter-vertical/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for vertical Splitter template output.
packages/cli/templates/webcomponents/igc-ts/splitter/index.ts	Registers Splitter component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/splitter/default/index.ts	Registers the default Splitter template.
packages/cli/templates/webcomponents/igc-ts/splitter/default/files/src/app/path/filePrefix.ts	Lit example rendering a horizontal splitter.
packages/cli/templates/webcomponents/igc-ts/splitter/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Splitter template output.
packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/index.ts	Registers the Snackbar “action button” template variant.
packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/files/src/app/path/filePrefix.ts	Lit example rendering snackbar with an action slot.
packages/cli/templates/webcomponents/igc-ts/snackbar/snackbar-action/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for snackbar-action template output.
packages/cli/templates/webcomponents/igc-ts/snackbar/index.ts	Registers Snackbar component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/snackbar/default/index.ts	Registers the default Snackbar template.
packages/cli/templates/webcomponents/igc-ts/snackbar/default/files/src/app/path/filePrefix.ts	Lit example rendering snackbar with a trigger button.
packages/cli/templates/webcomponents/igc-ts/snackbar/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Snackbar template output.
packages/cli/templates/webcomponents/igc-ts/select/select-groups/index.ts	Registers the “grouped items” Select template variant.
packages/cli/templates/webcomponents/igc-ts/select/select-groups/files/src/app/path/filePrefix.ts	Lit example rendering grouped select items and headers.
packages/cli/templates/webcomponents/igc-ts/select/select-groups/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for select-groups template output.
packages/cli/templates/webcomponents/igc-ts/select/index.ts	Registers Select component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/select/default/index.ts	Registers the default Select template.
packages/cli/templates/webcomponents/igc-ts/select/default/files/src/app/path/filePrefix.ts	Lit example rendering a basic select.
packages/cli/templates/webcomponents/igc-ts/select/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Select template output.
packages/cli/templates/webcomponents/igc-ts/range-slider/index.ts	Registers Range Slider component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/range-slider/default/index.ts	Registers the default Range Slider template.
packages/cli/templates/webcomponents/igc-ts/range-slider/default/files/src/app/path/filePrefix.ts	Lit example rendering a configured range slider.
packages/cli/templates/webcomponents/igc-ts/range-slider/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Range Slider template output.
packages/cli/templates/webcomponents/igc-ts/qr-code/index.ts	Registers QR Code component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/qr-code/default/index.ts	Registers the default QR Code template.
packages/cli/templates/webcomponents/igc-ts/qr-code/default/files/src/app/path/filePrefix.ts	Lit example rendering a QR code with a URL value.
packages/cli/templates/webcomponents/igc-ts/qr-code/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for QR Code template output.
packages/cli/templates/webcomponents/igc-ts/nav-drawer/index.ts	Registers Nav Drawer component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/index.ts	Registers the default Nav Drawer template.
packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/files/src/app/path/filePrefix.ts	Lit example rendering a nav drawer toggled by a button.
packages/cli/templates/webcomponents/igc-ts/nav-drawer/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Nav Drawer template output.
packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/index.ts	Registers the Mask Input “formats” template variant.
packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/files/src/app/path/filePrefix.ts	Lit example rendering multiple mask formats.
packages/cli/templates/webcomponents/igc-ts/mask-input/mask-input-formats/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for mask-input-formats template output.
packages/cli/templates/webcomponents/igc-ts/mask-input/index.ts	Registers Mask Input component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/mask-input/default/index.ts	Registers the default Mask Input template.
packages/cli/templates/webcomponents/igc-ts/mask-input/default/files/src/app/path/filePrefix.ts	Lit example rendering a phone-number masked input.
packages/cli/templates/webcomponents/igc-ts/mask-input/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Mask Input template output.
packages/cli/templates/webcomponents/igc-ts/highlight/index.ts	Registers Highlight component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/highlight/default/index.ts	Registers the default Highlight template.
packages/cli/templates/webcomponents/igc-ts/highlight/default/files/src/app/path/filePrefix.ts	Lit example rendering highlight with a search input.
packages/cli/templates/webcomponents/igc-ts/highlight/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Highlight template output.
packages/cli/templates/webcomponents/igc-ts/file-input/index.ts	Registers File Input component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/file-input/default/index.ts	Registers the default File Input template.
packages/cli/templates/webcomponents/igc-ts/file-input/default/files/src/app/path/filePrefix.ts	Lit example rendering a multi-file input.
packages/cli/templates/webcomponents/igc-ts/file-input/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for File Input template output.
packages/cli/templates/webcomponents/igc-ts/dialog/index.ts	Registers Dialog component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/index.ts	Registers the Dialog “form” template variant.
packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/files/src/app/path/filePrefix.ts	Lit example rendering a dialog that hosts a form.
packages/cli/templates/webcomponents/igc-ts/dialog/dialog-form/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for dialog-form template output.
packages/cli/templates/webcomponents/igc-ts/dialog/default/index.ts	Registers the default Dialog template.
packages/cli/templates/webcomponents/igc-ts/dialog/default/files/src/app/path/filePrefix.ts	Lit example rendering a confirmation dialog.
packages/cli/templates/webcomponents/igc-ts/dialog/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Dialog template output.
packages/cli/templates/webcomponents/igc-ts/date-range-picker/index.ts	Registers Date Range Picker component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/index.ts	Registers the default Date Range Picker template.
packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/files/src/app/path/filePrefix.ts	Lit example rendering a date range picker.
packages/cli/templates/webcomponents/igc-ts/date-range-picker/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Date Range Picker template output.
packages/cli/templates/webcomponents/igc-ts/combo/index.ts	Registers Combo component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/combo/default/index.ts	Registers the default Combo template.
packages/cli/templates/webcomponents/igc-ts/combo/default/files/src/app/path/filePrefix.ts	Lit example rendering a combo with local string data.
packages/cli/templates/webcomponents/igc-ts/combo/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Combo template output.
packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/index.ts	Registers the Combo “grouped items” template variant.
packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/files/src/app/path/filePrefix.ts	Lit example rendering grouped combo data.
packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for combo-groups template output.
packages/cli/templates/webcomponents/igc-ts/color-picker/index.ts	Registers Color Picker component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/color-picker/default/index.ts	Registers the default Color Picker template.
packages/cli/templates/webcomponents/igc-ts/color-picker/default/files/src/app/path/filePrefix.ts	Lit example rendering a color picker with swatches.
packages/cli/templates/webcomponents/igc-ts/color-picker/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Color Picker template output.
packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/index.ts	Registers the Color Picker “alpha/input mode” template variant.
packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/files/src/app/path/filePrefix.ts	Lit example enabling alpha + input mode in color picker.
packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for color-picker-alpha template output.
packages/cli/templates/webcomponents/igc-ts/chat/index.ts	Registers Chat component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/chat/default/index.ts	Registers the default Chat template.
packages/cli/templates/webcomponents/igc-ts/chat/default/files/src/app/path/filePrefix.ts	Lit example rendering igc-chat with options/messages.
packages/cli/templates/webcomponents/igc-ts/chat/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Chat template output.
packages/cli/templates/webcomponents/igc-ts/carousel/index.ts	Registers Carousel component metadata for the CLI.
packages/cli/templates/webcomponents/igc-ts/carousel/default/index.ts	Registers the default Carousel template.
packages/cli/templates/webcomponents/igc-ts/carousel/default/files/src/app/path/filePrefix.ts	Lit example rendering a basic carousel.
packages/cli/templates/webcomponents/igc-ts/carousel/default/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for Carousel template output.
packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/index.ts	Registers the vertical Carousel template variant.
packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/files/src/app/path/filePrefix.ts	Lit example rendering a vertical carousel.
packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/files/src/app/path/filePrefix.test.ts	Vitest instantiation smoke test for carousel-vertical template output.

Review details

• Files reviewed: 115/115 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.