From 09442e705fef20d917e25956c1d70cd491db4fd4 Mon Sep 17 00:00:00 2001
From: RivaIvanova <ivanova.riva@gmail.com>
Date: Fri, 6 Oct 2023 14:34:09 +0300
Subject: [PATCH 1/2] feat(button-group): add samples

---
 browser/public/index.html                     |   8 ++
 .../inputs/button-group/alignment/.prettierrc |  11 ++
 .../inputs/button-group/alignment/ReadMe.md   |  51 +++++++++
 .../inputs/button-group/alignment/index.html  |  41 +++++++
 .../button-group/alignment/package.json       |  59 ++++++++++
 .../alignment/sandbox.config.json             |   7 ++
 .../button-group/alignment/src/index.css      |  10 ++
 .../button-group/alignment/src/index.ts       |  11 ++
 .../button-group/alignment/tsconfig.json      |  20 ++++
 .../button-group/alignment/webpack.config.js  | 105 ++++++++++++++++++
 .../inputs/button-group/overview/.prettierrc  |  11 ++
 .../inputs/button-group/overview/ReadMe.md    |  51 +++++++++
 .../inputs/button-group/overview/index.html   |  44 ++++++++
 .../inputs/button-group/overview/package.json |  59 ++++++++++
 .../button-group/overview/sandbox.config.json |   7 ++
 .../button-group/overview/src/index.css       |  10 ++
 .../inputs/button-group/overview/src/index.ts |  40 +++++++
 .../button-group/overview/tsconfig.json       |  20 ++++
 .../button-group/overview/webpack.config.js   | 105 ++++++++++++++++++
 .../inputs/button-group/selection/.prettierrc |  11 ++
 .../inputs/button-group/selection/ReadMe.md   |  51 +++++++++
 .../inputs/button-group/selection/index.html  |  47 ++++++++
 .../button-group/selection/package.json       |  59 ++++++++++
 .../selection/sandbox.config.json             |   7 ++
 .../button-group/selection/src/index.css      |  19 ++++
 .../button-group/selection/src/index.ts       |  48 ++++++++
 .../button-group/selection/tsconfig.json      |  20 ++++
 .../button-group/selection/webpack.config.js  | 105 ++++++++++++++++++
 samples/inputs/button-group/size/.prettierrc  |  11 ++
 samples/inputs/button-group/size/ReadMe.md    |  51 +++++++++
 samples/inputs/button-group/size/index.html   |  28 +++++
 samples/inputs/button-group/size/package.json |  59 ++++++++++
 .../button-group/size/sandbox.config.json     |   7 ++
 .../inputs/button-group/size/src/index.css    |   2 +
 samples/inputs/button-group/size/src/index.ts |  17 +++
 .../inputs/button-group/size/tsconfig.json    |  20 ++++
 .../button-group/size/webpack.config.js       | 105 ++++++++++++++++++
 .../inputs/button-group/styling/.prettierrc   |  11 ++
 samples/inputs/button-group/styling/ReadMe.md |  51 +++++++++
 .../inputs/button-group/styling/index.html    |  41 +++++++
 .../inputs/button-group/styling/package.json  |  59 ++++++++++
 .../button-group/styling/sandbox.config.json  |   7 ++
 .../inputs/button-group/styling/src/index.css |  30 +++++
 .../inputs/button-group/styling/src/index.ts  |  11 ++
 .../inputs/button-group/styling/tsconfig.json |  20 ++++
 .../button-group/styling/webpack.config.js    | 105 ++++++++++++++++++
 46 files changed, 1672 insertions(+)
 create mode 100644 samples/inputs/button-group/alignment/.prettierrc
 create mode 100644 samples/inputs/button-group/alignment/ReadMe.md
 create mode 100644 samples/inputs/button-group/alignment/index.html
 create mode 100644 samples/inputs/button-group/alignment/package.json
 create mode 100644 samples/inputs/button-group/alignment/sandbox.config.json
 create mode 100644 samples/inputs/button-group/alignment/src/index.css
 create mode 100644 samples/inputs/button-group/alignment/src/index.ts
 create mode 100644 samples/inputs/button-group/alignment/tsconfig.json
 create mode 100644 samples/inputs/button-group/alignment/webpack.config.js
 create mode 100644 samples/inputs/button-group/overview/.prettierrc
 create mode 100644 samples/inputs/button-group/overview/ReadMe.md
 create mode 100644 samples/inputs/button-group/overview/index.html
 create mode 100644 samples/inputs/button-group/overview/package.json
 create mode 100644 samples/inputs/button-group/overview/sandbox.config.json
 create mode 100644 samples/inputs/button-group/overview/src/index.css
 create mode 100644 samples/inputs/button-group/overview/src/index.ts
 create mode 100644 samples/inputs/button-group/overview/tsconfig.json
 create mode 100644 samples/inputs/button-group/overview/webpack.config.js
 create mode 100644 samples/inputs/button-group/selection/.prettierrc
 create mode 100644 samples/inputs/button-group/selection/ReadMe.md
 create mode 100644 samples/inputs/button-group/selection/index.html
 create mode 100644 samples/inputs/button-group/selection/package.json
 create mode 100644 samples/inputs/button-group/selection/sandbox.config.json
 create mode 100644 samples/inputs/button-group/selection/src/index.css
 create mode 100644 samples/inputs/button-group/selection/src/index.ts
 create mode 100644 samples/inputs/button-group/selection/tsconfig.json
 create mode 100644 samples/inputs/button-group/selection/webpack.config.js
 create mode 100644 samples/inputs/button-group/size/.prettierrc
 create mode 100644 samples/inputs/button-group/size/ReadMe.md
 create mode 100644 samples/inputs/button-group/size/index.html
 create mode 100644 samples/inputs/button-group/size/package.json
 create mode 100644 samples/inputs/button-group/size/sandbox.config.json
 create mode 100644 samples/inputs/button-group/size/src/index.css
 create mode 100644 samples/inputs/button-group/size/src/index.ts
 create mode 100644 samples/inputs/button-group/size/tsconfig.json
 create mode 100644 samples/inputs/button-group/size/webpack.config.js
 create mode 100644 samples/inputs/button-group/styling/.prettierrc
 create mode 100644 samples/inputs/button-group/styling/ReadMe.md
 create mode 100644 samples/inputs/button-group/styling/index.html
 create mode 100644 samples/inputs/button-group/styling/package.json
 create mode 100644 samples/inputs/button-group/styling/sandbox.config.json
 create mode 100644 samples/inputs/button-group/styling/src/index.css
 create mode 100644 samples/inputs/button-group/styling/src/index.ts
 create mode 100644 samples/inputs/button-group/styling/tsconfig.json
 create mode 100644 samples/inputs/button-group/styling/webpack.config.js

diff --git a/browser/public/index.html b/browser/public/index.html
index 1f8e88f1ac..fe9edd6316 100644
--- a/browser/public/index.html
+++ b/browser/public/index.html
@@ -571,6 +571,14 @@
            <a class="nav-link" href="#" data-nav="/samples/inputs/button/size">─<span>Size</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/inputs/button/styling">─<span>Styling</span></a> 
        </div>
+       <label id="nav-button-group" class="nav-component">Button Group</label> 
+       <div id="nav-button-group-list" class="nav-list" state="collapsed"> 
+           <a class="nav-link" href="#" data-nav="/samples/inputs/button-group/alignment">─<span>Alignment</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/inputs/button-group/overview">─<span>Overview</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/inputs/button-group/selection">─<span>Selection</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/inputs/button-group/size">─<span>Size</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/inputs/button-group/styling">─<span>Styling</span></a> 
+       </div>
        <label id="nav-checkbox" class="nav-component">Checkbox</label> 
        <div id="nav-checkbox-list" class="nav-list" state="collapsed"> 
            <a class="nav-link" href="#" data-nav="/samples/inputs/checkbox/checking">─<span>Checking</span></a> 
diff --git a/samples/inputs/button-group/alignment/.prettierrc b/samples/inputs/button-group/alignment/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/inputs/button-group/alignment/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/alignment/ReadMe.md b/samples/inputs/button-group/alignment/ReadMe.md
new file mode 100644
index 0000000000..77ad81965f
--- /dev/null
+++ b/samples/inputs/button-group/alignment/ReadMe.md
@@ -0,0 +1,51 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Alignment feature using [Button Group](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/button-group/alignment" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/inputs/button-group/alignment?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+cd ./igniteui-wc-examples
+cd ./samples/inputs/button-group/alignment
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/inputs/button-group/alignment/index.html b/samples/inputs/button-group/alignment/index.html
new file mode 100644
index 0000000000..7e35b064d9
--- /dev/null
+++ b/samples/inputs/button-group/alignment/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Button Group Alignment</title>
+    <meta charset="UTF-8" />
+
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+  </head>
+
+  <body>
+    <div id="root">
+      <div class="container sample">
+        <igc-button-group alignment="vertical">
+          <igc-toggle-button value="sofia">
+            <igc-ripple></igc-ripple>
+            Sofia
+          </igc-toggle-button>
+          <igc-toggle-button value="london">
+            <igc-ripple></igc-ripple>
+            London
+          </igc-toggle-button>
+          <igc-toggle-button value="new york" selected>
+            <igc-ripple></igc-ripple>
+            New York
+          </igc-toggle-button>
+          <igc-toggle-button value="tokyo">
+            <igc-ripple></igc-ripple>
+            Tokyo
+          </igc-toggle-button>
+        </igc-button-group>
+      </div>
+    </div>
+    <!-- This script is needed only for parcel and it will be excluded for webpack -->
+    <% if (false) { %><script src="src/index.ts"></script><% } %>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/inputs/button-group/alignment/package.json b/samples/inputs/button-group/alignment/package.json
new file mode 100644
index 0000000000..4b8d293561
--- /dev/null
+++ b/samples/inputs/button-group/alignment/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "wc-button-group-alignment",
+  "version": "1.0.0",
+  "description": "This project provides example of button group alignment using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "4.5.0-beta.1",
+    "lit": "^2.0.2",
+    "lit-html": "^2.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
diff --git a/samples/inputs/button-group/alignment/sandbox.config.json b/samples/inputs/button-group/alignment/sandbox.config.json
new file mode 100644
index 0000000000..5c5b54fe21
--- /dev/null
+++ b/samples/inputs/button-group/alignment/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+  
\ No newline at end of file
diff --git a/samples/inputs/button-group/alignment/src/index.css b/samples/inputs/button-group/alignment/src/index.css
new file mode 100644
index 0000000000..e224a9ca33
--- /dev/null
+++ b/samples/inputs/button-group/alignment/src/index.css
@@ -0,0 +1,10 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+igc-button-group {
+    width: 200px;
+}
+
+igc-ripple {
+    --color: gray;
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/alignment/src/index.ts b/samples/inputs/button-group/alignment/src/index.ts
new file mode 100644
index 0000000000..8a1078b247
--- /dev/null
+++ b/samples/inputs/button-group/alignment/src/index.ts
@@ -0,0 +1,11 @@
+import { defineComponents, IgcButtonGroupComponent, IgcRippleComponent } from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/material.css';
+import './index.css';
+
+defineComponents(IgcButtonGroupComponent, IgcRippleComponent);
+export class ButtonGroupAlignment {
+    constructor() {
+    }
+}
+
+new ButtonGroupAlignment();
\ No newline at end of file
diff --git a/samples/inputs/button-group/alignment/tsconfig.json b/samples/inputs/button-group/alignment/tsconfig.json
new file mode 100644
index 0000000000..de23257dd8
--- /dev/null
+++ b/samples/inputs/button-group/alignment/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/alignment/webpack.config.js b/samples/inputs/button-group/alignment/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/inputs/button-group/alignment/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};
diff --git a/samples/inputs/button-group/overview/.prettierrc b/samples/inputs/button-group/overview/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/inputs/button-group/overview/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/overview/ReadMe.md b/samples/inputs/button-group/overview/ReadMe.md
new file mode 100644
index 0000000000..6390ec8824
--- /dev/null
+++ b/samples/inputs/button-group/overview/ReadMe.md
@@ -0,0 +1,51 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Overview feature using [Button Group](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/button-group/overview" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/inputs/button-group/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+cd ./igniteui-wc-examples
+cd ./samples/inputs/button-group/overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/inputs/button-group/overview/index.html b/samples/inputs/button-group/overview/index.html
new file mode 100644
index 0000000000..cc95309656
--- /dev/null
+++ b/samples/inputs/button-group/overview/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Button Group Overview</title>
+    <meta charset="UTF-8" />
+
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+  </head>
+
+  <body>
+    <div id="root">
+      <div class="container sample">
+        <igc-button-group>
+          <igc-toggle-button value="left">
+            <igc-icon name="format_align_left" collection="material"></igc-icon>
+            <igc-ripple></igc-ripple>
+          </igc-toggle-button>
+
+          <igc-toggle-button value="center">
+            <igc-icon name="format_align_center" collection="material"></igc-icon>
+            <igc-ripple></igc-ripple>
+          </igc-toggle-button>
+
+          <igc-toggle-button value="right">
+            <igc-icon name="format_align_right" collection="material"></igc-icon>
+            <igc-ripple></igc-ripple>
+          </igc-toggle-button>
+
+          <igc-toggle-button value="justify" selected>
+            <igc-icon name="format_align_justify" collection="material"></igc-icon>
+            <igc-ripple></igc-ripple>
+          </igc-toggle-button>
+        </igc-button-group>
+      </div>
+    </div>
+    <!-- This script is needed only for parcel and it will be excluded for webpack -->
+    <% if (false) { %><script src="src/index.ts"></script><% } %>
+
+  </body>
+</html>
diff --git a/samples/inputs/button-group/overview/package.json b/samples/inputs/button-group/overview/package.json
new file mode 100644
index 0000000000..0e7ff7c8a4
--- /dev/null
+++ b/samples/inputs/button-group/overview/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "wc-button-group-overview",
+  "version": "1.0.0",
+  "description": "This project provides example of button group using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "4.5.0-beta.1",
+    "lit": "^2.0.2",
+    "lit-html": "^2.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
diff --git a/samples/inputs/button-group/overview/sandbox.config.json b/samples/inputs/button-group/overview/sandbox.config.json
new file mode 100644
index 0000000000..5c5b54fe21
--- /dev/null
+++ b/samples/inputs/button-group/overview/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+  
\ No newline at end of file
diff --git a/samples/inputs/button-group/overview/src/index.css b/samples/inputs/button-group/overview/src/index.css
new file mode 100644
index 0000000000..59cdda9df7
--- /dev/null
+++ b/samples/inputs/button-group/overview/src/index.css
@@ -0,0 +1,10 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+igc-button-group {
+    max-width: 400px;
+}
+
+igc-ripple {
+    --color: gray;
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/overview/src/index.ts b/samples/inputs/button-group/overview/src/index.ts
new file mode 100644
index 0000000000..c9641d9b44
--- /dev/null
+++ b/samples/inputs/button-group/overview/src/index.ts
@@ -0,0 +1,40 @@
+import {
+    defineComponents,
+    IgcButtonGroupComponent,
+    IgcIconComponent,
+    IgcRippleComponent,
+    registerIcon
+} from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/material.css';
+import './index.css';
+
+defineComponents(IgcButtonGroupComponent, IgcRippleComponent, IgcIconComponent);
+
+const icons = [
+    {
+        name: 'format_align_left',
+        url: 'https://unpkg.com/material-design-icons@3.0.1/editor/svg/production/ic_format_align_left_24px.svg',
+    },
+    {
+        name: 'format_align_center',
+        url: 'https://unpkg.com/material-design-icons@3.0.1/editor/svg/production/ic_format_align_center_24px.svg',
+    },
+    {
+        name: 'format_align_right',
+        url: 'https://unpkg.com/material-design-icons@3.0.1/editor/svg/production/ic_format_align_right_24px.svg',
+    },
+    {
+        name: 'format_align_justify',
+        url: 'https://unpkg.com/material-design-icons@3.0.1/editor/svg/production/ic_format_align_justify_24px.svg',
+    },
+];
+
+export class ButtonGroupOverview {
+    constructor() {
+        icons.forEach((icon) => {
+            registerIcon(icon.name, icon.url, 'material');
+        });
+    }
+}
+
+new ButtonGroupOverview();
\ No newline at end of file
diff --git a/samples/inputs/button-group/overview/tsconfig.json b/samples/inputs/button-group/overview/tsconfig.json
new file mode 100644
index 0000000000..de23257dd8
--- /dev/null
+++ b/samples/inputs/button-group/overview/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/overview/webpack.config.js b/samples/inputs/button-group/overview/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/inputs/button-group/overview/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};
diff --git a/samples/inputs/button-group/selection/.prettierrc b/samples/inputs/button-group/selection/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/inputs/button-group/selection/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/selection/ReadMe.md b/samples/inputs/button-group/selection/ReadMe.md
new file mode 100644
index 0000000000..e50c7d1b5f
--- /dev/null
+++ b/samples/inputs/button-group/selection/ReadMe.md
@@ -0,0 +1,51 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Selection feature using [Button Group](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/button-group/selection" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/inputs/button-group/selection?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+cd ./igniteui-wc-examples
+cd ./samples/inputs/button-group/selection
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/inputs/button-group/selection/index.html b/samples/inputs/button-group/selection/index.html
new file mode 100644
index 0000000000..dff02f3248
--- /dev/null
+++ b/samples/inputs/button-group/selection/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Button Group Selection</title>
+    <meta charset="UTF-8" />
+
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+  </head>
+
+  <body>
+    <div id="root">
+      <div class="container sample">
+        <div class="radio-group-container">
+          <label>Selection Mode</label>
+          <igc-radio-group alignment="horizontal">
+            <igc-radio name="mode" value="single" checked>Single</igc-radio>
+            <igc-radio name="mode" value="single-required">Single-Required</igc-radio>
+            <igc-radio name="mode" value="multiple">Multiple</igc-radio>
+          </igc-radio-group>
+        </div>
+        <igc-button-group>
+          <igc-toggle-button value="bold">
+            <igc-icon name="bold" collection="material"></igc-icon>
+            <igc-ripple></igc-ripple>
+          </igc-toggle-button>
+
+          <igc-toggle-button value="italic">
+            <igc-icon name="italic" collection="material"></igc-icon>
+            <igc-ripple></igc-ripple>
+          </igc-toggle-button>
+
+          <igc-toggle-button value="underline">
+            <igc-icon name="underline" collection="material"></igc-icon>
+            <igc-ripple></igc-ripple>
+          </igc-toggle-button>
+        </igc-button-group>
+      </div>
+    </div>
+    <!-- This script is needed only for parcel and it will be excluded for webpack -->
+    <% if (false) { %><script src="src/index.ts"></script><% } %>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/inputs/button-group/selection/package.json b/samples/inputs/button-group/selection/package.json
new file mode 100644
index 0000000000..5e4abe3763
--- /dev/null
+++ b/samples/inputs/button-group/selection/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "wc-button-group-selection",
+  "version": "1.0.0",
+  "description": "This project provides example of button group selection using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "4.5.0-beta.1",
+    "lit": "^2.0.2",
+    "lit-html": "^2.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
diff --git a/samples/inputs/button-group/selection/sandbox.config.json b/samples/inputs/button-group/selection/sandbox.config.json
new file mode 100644
index 0000000000..5c5b54fe21
--- /dev/null
+++ b/samples/inputs/button-group/selection/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+  
\ No newline at end of file
diff --git a/samples/inputs/button-group/selection/src/index.css b/samples/inputs/button-group/selection/src/index.css
new file mode 100644
index 0000000000..c7e74ab1f4
--- /dev/null
+++ b/samples/inputs/button-group/selection/src/index.css
@@ -0,0 +1,19 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+.radio-group-container {
+    width: 400px;
+    margin-bottom: 1rem;
+}
+
+igc-radio-group {
+    padding: 0.5rem;
+}
+
+igc-button-group {
+    width: 200px;
+}
+
+igc-ripple {
+    --color: gray;
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/selection/src/index.ts b/samples/inputs/button-group/selection/src/index.ts
new file mode 100644
index 0000000000..74da08657e
--- /dev/null
+++ b/samples/inputs/button-group/selection/src/index.ts
@@ -0,0 +1,48 @@
+import {
+    defineComponents,
+    IgcButtonGroupComponent,
+    IgcIconComponent,
+    IgcRadioComponent,
+    IgcRadioGroupComponent,
+    IgcRippleComponent,
+    registerIcon
+} from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/material.css';
+import './index.css';
+
+defineComponents(IgcButtonGroupComponent, IgcRippleComponent, IgcIconComponent, IgcRadioGroupComponent);
+
+const icons = [
+    {
+        name: 'bold',
+        url: 'https://unpkg.com/material-design-icons@3.0.1/editor/svg/production/ic_format_bold_24px.svg',
+    },
+    {
+        name: 'italic',
+        url: 'https://unpkg.com/material-design-icons@3.0.1/editor/svg/production/ic_format_italic_24px.svg',
+    },
+    {
+        name: 'underline',
+        url: 'https://unpkg.com/material-design-icons@3.0.1/editor/svg/production/ic_format_underlined_24px.svg',
+    },
+];
+
+export class ButtonGroupSelection {
+    private buttonGroup: IgcButtonGroupComponent;
+
+    constructor() {
+        icons.forEach((icon) => {
+            registerIcon(icon.name, icon.url, 'material');
+        });
+
+        this.buttonGroup = document.querySelector('igc-button-group') as IgcButtonGroupComponent;
+
+        document.addEventListener("igcChange", (e) => {
+            const radio = e.target as IgcRadioComponent;
+
+            this.buttonGroup.selection = radio.value as 'single' | 'single-required' | 'multiple';
+        });
+    }
+}
+
+new ButtonGroupSelection();
\ No newline at end of file
diff --git a/samples/inputs/button-group/selection/tsconfig.json b/samples/inputs/button-group/selection/tsconfig.json
new file mode 100644
index 0000000000..de23257dd8
--- /dev/null
+++ b/samples/inputs/button-group/selection/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/selection/webpack.config.js b/samples/inputs/button-group/selection/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/inputs/button-group/selection/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};
diff --git a/samples/inputs/button-group/size/.prettierrc b/samples/inputs/button-group/size/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/inputs/button-group/size/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/size/ReadMe.md b/samples/inputs/button-group/size/ReadMe.md
new file mode 100644
index 0000000000..e9c90325e0
--- /dev/null
+++ b/samples/inputs/button-group/size/ReadMe.md
@@ -0,0 +1,51 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Size feature using [Button Group](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/button-group/size" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/inputs/button-group/size?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+cd ./igniteui-wc-examples
+cd ./samples/inputs/button-group/size
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/inputs/button-group/size/index.html b/samples/inputs/button-group/size/index.html
new file mode 100644
index 0000000000..51bb36c9d6
--- /dev/null
+++ b/samples/inputs/button-group/size/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Button Group Size</title>
+    <meta charset="UTF-8" />
+
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+  </head>
+
+  <body>
+    <div id="root">
+      <div class="container sample">
+        <igc-button-group selection="single-required">
+          <igc-toggle-button value="small">Small</igc-toggle-button>
+          <igc-toggle-button value="medium">Medium</igc-toggle-button>
+          <igc-toggle-button value="large" selected>Large</igc-toggle-button>
+        </igc-button-group>
+      </div>
+    </div>
+    <!-- This script is needed only for parcel and it will be excluded for webpack -->
+    <% if (false) { %><script src="src/index.ts"></script><% } %>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/inputs/button-group/size/package.json b/samples/inputs/button-group/size/package.json
new file mode 100644
index 0000000000..281145b33c
--- /dev/null
+++ b/samples/inputs/button-group/size/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "wc-button-group-size",
+  "version": "1.0.0",
+  "description": "This project provides example of button group size using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "4.5.0-beta.1",
+    "lit": "^2.0.2",
+    "lit-html": "^2.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
diff --git a/samples/inputs/button-group/size/sandbox.config.json b/samples/inputs/button-group/size/sandbox.config.json
new file mode 100644
index 0000000000..5c5b54fe21
--- /dev/null
+++ b/samples/inputs/button-group/size/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+  
\ No newline at end of file
diff --git a/samples/inputs/button-group/size/src/index.css b/samples/inputs/button-group/size/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/inputs/button-group/size/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/button-group/size/src/index.ts b/samples/inputs/button-group/size/src/index.ts
new file mode 100644
index 0000000000..f0c924fd35
--- /dev/null
+++ b/samples/inputs/button-group/size/src/index.ts
@@ -0,0 +1,17 @@
+import { defineComponents, IgcButtonGroupComponent } from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/material.css';
+
+defineComponents(IgcButtonGroupComponent);
+export class ButtonGroupSize {
+  private buttonGroup: IgcButtonGroupComponent;
+
+  constructor() {
+    this.buttonGroup = document.querySelector('igc-button-group') as IgcButtonGroupComponent;
+
+    this.buttonGroup.addEventListener("igcSelect", (e) => {
+      this.buttonGroup.style.setProperty('--ig-size', `var(--ig-size-${e.detail})`);
+    });
+  }
+}
+
+new ButtonGroupSize();
\ No newline at end of file
diff --git a/samples/inputs/button-group/size/tsconfig.json b/samples/inputs/button-group/size/tsconfig.json
new file mode 100644
index 0000000000..de23257dd8
--- /dev/null
+++ b/samples/inputs/button-group/size/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/size/webpack.config.js b/samples/inputs/button-group/size/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/inputs/button-group/size/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};
diff --git a/samples/inputs/button-group/styling/.prettierrc b/samples/inputs/button-group/styling/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/inputs/button-group/styling/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/styling/ReadMe.md b/samples/inputs/button-group/styling/ReadMe.md
new file mode 100644
index 0000000000..1f986c4f92
--- /dev/null
+++ b/samples/inputs/button-group/styling/ReadMe.md
@@ -0,0 +1,51 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Styling feature using [Button Group](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/button-group/styling" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/inputs/button-group/styling?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+cd ./igniteui-wc-examples
+cd ./samples/inputs/button-group/styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/inputs/button-group/styling/index.html b/samples/inputs/button-group/styling/index.html
new file mode 100644
index 0000000000..4e666a5687
--- /dev/null
+++ b/samples/inputs/button-group/styling/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Button Group Alignment</title>
+    <meta charset="UTF-8" />
+
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+  </head>
+
+  <body>
+    <div id="root">
+      <div class="container sample">
+        <igc-button-group alignment="vertical">
+          <igc-toggle-button value="sofia">
+            <igc-ripple></igc-ripple>
+            Sofia
+          </igc-toggle-button>
+          <igc-toggle-button value="london">
+            <igc-ripple></igc-ripple>
+            London
+          </igc-toggle-button>
+          <igc-toggle-button value="new york">
+            <igc-ripple></igc-ripple>
+            New York
+          </igc-toggle-button>
+          <igc-toggle-button value="tokyo" disabled>
+            <igc-ripple></igc-ripple>
+            Tokyo
+          </igc-toggle-button>
+        </igc-button-group>
+      </div>
+    </div>
+    <!-- This script is needed only for parcel and it will be excluded for webpack -->
+    <% if (false) { %><script src="src/index.ts"></script><% } %>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/inputs/button-group/styling/package.json b/samples/inputs/button-group/styling/package.json
new file mode 100644
index 0000000000..01620245a7
--- /dev/null
+++ b/samples/inputs/button-group/styling/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "wc-button-group-styling",
+  "version": "1.0.0",
+  "description": "This project provides example of button group styling using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "4.5.0-beta.1",
+    "lit": "^2.0.2",
+    "lit-html": "^2.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
diff --git a/samples/inputs/button-group/styling/sandbox.config.json b/samples/inputs/button-group/styling/sandbox.config.json
new file mode 100644
index 0000000000..5c5b54fe21
--- /dev/null
+++ b/samples/inputs/button-group/styling/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+  
\ No newline at end of file
diff --git a/samples/inputs/button-group/styling/src/index.css b/samples/inputs/button-group/styling/src/index.css
new file mode 100644
index 0000000000..4c4814d446
--- /dev/null
+++ b/samples/inputs/button-group/styling/src/index.css
@@ -0,0 +1,30 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+igc-button-group {
+    width: 200px;
+}
+
+igc-ripple {
+    --color: gray;
+}
+
+igc-toggle-button::part(toggle) {
+    color: #fdfdfd;
+    background: #2f4d6a;
+}
+
+igc-toggle-button::part(toggle):hover {
+    color: #fdfdfd;
+    background: #1f3347;
+}
+
+igc-toggle-button[disabled]::part(toggle) {
+    color: gray;
+    background: lightgray;
+}
+
+igc-toggle-button[selected]::part(toggle) {
+    color: #fdfdfd;
+    background: #1f3347;
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/styling/src/index.ts b/samples/inputs/button-group/styling/src/index.ts
new file mode 100644
index 0000000000..b6c91178f4
--- /dev/null
+++ b/samples/inputs/button-group/styling/src/index.ts
@@ -0,0 +1,11 @@
+import { defineComponents, IgcButtonGroupComponent, IgcRippleComponent } from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/material.css';
+import './index.css';
+
+defineComponents(IgcButtonGroupComponent, IgcRippleComponent);
+export class ButtonGroupStyling {
+    constructor() {
+    }
+}
+
+new ButtonGroupStyling();
\ No newline at end of file
diff --git a/samples/inputs/button-group/styling/tsconfig.json b/samples/inputs/button-group/styling/tsconfig.json
new file mode 100644
index 0000000000..de23257dd8
--- /dev/null
+++ b/samples/inputs/button-group/styling/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/styling/webpack.config.js b/samples/inputs/button-group/styling/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/inputs/button-group/styling/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};

From cdfa7640e3708223f8e3b1a8f5550b23ec247396 Mon Sep 17 00:00:00 2001
From: RivaIvanova <ivanova.riva@gmail.com>
Date: Tue, 10 Oct 2023 09:35:19 +0300
Subject: [PATCH 2/2] refactor(button-group): update wc package to 4.5.0

---
 samples/inputs/button-group/alignment/package.json | 2 +-
 samples/inputs/button-group/overview/package.json  | 2 +-
 samples/inputs/button-group/selection/package.json | 2 +-
 samples/inputs/button-group/size/package.json      | 2 +-
 samples/inputs/button-group/styling/package.json   | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/samples/inputs/button-group/alignment/package.json b/samples/inputs/button-group/alignment/package.json
index 4b8d293561..c54b10252d 100644
--- a/samples/inputs/button-group/alignment/package.json
+++ b/samples/inputs/button-group/alignment/package.json
@@ -23,7 +23,7 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents": "4.5.0-beta.1",
+    "igniteui-webcomponents": "4.5.0",
     "lit": "^2.0.2",
     "lit-html": "^2.2.0",
     "tslib": "^2.0.0"
diff --git a/samples/inputs/button-group/overview/package.json b/samples/inputs/button-group/overview/package.json
index 0e7ff7c8a4..dd2553dcfb 100644
--- a/samples/inputs/button-group/overview/package.json
+++ b/samples/inputs/button-group/overview/package.json
@@ -23,7 +23,7 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents": "4.5.0-beta.1",
+    "igniteui-webcomponents": "4.5.0",
     "lit": "^2.0.2",
     "lit-html": "^2.2.0",
     "tslib": "^2.0.0"
diff --git a/samples/inputs/button-group/selection/package.json b/samples/inputs/button-group/selection/package.json
index 5e4abe3763..18b84ef448 100644
--- a/samples/inputs/button-group/selection/package.json
+++ b/samples/inputs/button-group/selection/package.json
@@ -23,7 +23,7 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents": "4.5.0-beta.1",
+    "igniteui-webcomponents": "4.5.0",
     "lit": "^2.0.2",
     "lit-html": "^2.2.0",
     "tslib": "^2.0.0"
diff --git a/samples/inputs/button-group/size/package.json b/samples/inputs/button-group/size/package.json
index 281145b33c..e68db28ff5 100644
--- a/samples/inputs/button-group/size/package.json
+++ b/samples/inputs/button-group/size/package.json
@@ -23,7 +23,7 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents": "4.5.0-beta.1",
+    "igniteui-webcomponents": "4.5.0",
     "lit": "^2.0.2",
     "lit-html": "^2.2.0",
     "tslib": "^2.0.0"
diff --git a/samples/inputs/button-group/styling/package.json b/samples/inputs/button-group/styling/package.json
index 01620245a7..466673df30 100644
--- a/samples/inputs/button-group/styling/package.json
+++ b/samples/inputs/button-group/styling/package.json
@@ -23,7 +23,7 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents": "4.5.0-beta.1",
+    "igniteui-webcomponents": "4.5.0",
     "lit": "^2.0.2",
     "lit-html": "^2.2.0",
     "tslib": "^2.0.0"