diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 00000000..a799cc3d
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,16 @@
+module.exports = {
+ root: true,
+ // This tells ESLint to load the config from the package `eslint-config-custom`
+ extends: ['custom'],
+ plugins: ['eslint-plugin-html'],
+ overrides: [
+ {
+ files: ['**/*.html', '**/*.yml']
+ }
+ ],
+ settings: {
+ next: {
+ rootDir: ['apps/*/']
+ }
+ }
+}
diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
new file mode 100644
index 00000000..6076b899
--- /dev/null
+++ b/.github/actions/setup/action.yml
@@ -0,0 +1,33 @@
+name: Set up
+description: Node.js LTS, pnpm, store cache, and install dependencies
+
+runs:
+ using: composite
+ steps:
+ - name: Set up Node.js
+ uses: actions/setup-node@v3
+ with:
+ node-version-file: .nvmrc
+
+ - name: Install pnpm
+ id: pnpm-install
+ shell: bash
+ run: npm install -g pnpm
+
+ - name: Get pnpm store directory
+ id: pnpm-cache
+ shell: bash
+ run: |
+ echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+ - uses: actions/cache@v3
+ name: Set up pnpm cache
+ with:
+ path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+ key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+ restore-keys: |
+ ${{ runner.os }}-pnpm-store-
+
+ - name: Install dependencies
+ run: pnpm install --no-frozen-lockfile
+ shell: bash
diff --git a/.github/screenshot.png b/.github/screenshot.png
new file mode 100644
index 00000000..1e4a0f3e
Binary files /dev/null and b/.github/screenshot.png differ
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 00000000..1ec78e07
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,26 @@
+name: CI
+
+on:
+ push:
+ branches:
+ - main
+ pull_request:
+ branches:
+ - main
+ - dev
+jobs:
+ build:
+ strategy:
+ matrix:
+ os: ["ubuntu-latest"]
+ runs-on: ${{ matrix.os }}
+ steps:
+ - name: Checkout Repository
+ uses: actions/checkout@v3
+ with:
+ fetch-depth: 0
+ - name: Setup Environment
+ uses: ./.github/actions/setup
+
+ - name: Build Component Library
+ run: pnpm run build
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..d1595af4
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+# vercel
+.vercel
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000..ded82e2f
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+auto-install-peers = true
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..805b5a4e
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v20.9.0
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..28621c79
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,87 @@
+{
+ "eslint.workingDirectories": [
+ {
+ "mode": "auto"
+ }
+ ],
+ "workbench.localHistory.exclude": {
+ "**/pnpm-lock.yaml": true,
+ "**/node_modules": true,
+ "**/dist": true,
+ "**/._*": true,
+ "**/.turbo/": true,
+ ".vscode": true,
+ "**/next-env.d.ts": true
+ },
+ "workbench.editor.highlightModifiedTabs": true,
+ "explorer.sortOrder": "type",
+ "files.trimFinalNewlines": true,
+ "files.exclude": {
+ "**/.git": true,
+ "**/.turbo": true,
+ "**/.next": true,
+ "**/.angular": true,
+ "**/.stencil": true,
+ "**/.vscode": true,
+ "**/build": true,
+ "**/dist": true,
+ "**/node_modules": true,
+ "**/storybook-static": true,
+ "**/out": true
+ },
+ "search.exclude": {
+ "**/.git": true,
+ "**/.turbo": true,
+ "**/.next": true,
+ "**/.angular": true,
+ "**/.stencil": true,
+ "**/.vscode": true,
+ "**/build": true,
+ "**/dist": true,
+ "**/node_modules": true,
+ "**/storybook-static": true,
+ "**/out": true
+ },
+ "workbench.editor.showTabs": "multiple",
+ "workbench.editor.tabSizing": "shrink",
+ "workbench.statusBar.visible": true,
+ "workbench.editor.enablePreview": false,
+ "javascript.format.enable": false,
+ "typescript.format.enable": false,
+ "javascript.updateImportsOnFileMove.enabled": "always",
+ "typescript.updateImportsOnFileMove.enabled": "always",
+ "typescript.suggest.completeFunctionCalls": true,
+ "typescript.suggest.paths": true,
+ "typescript.preferences.importModuleSpecifier": "non-relative",
+ "workbench.colorCustomizations": {
+ "activityBar.activeBackground": "#e4db32",
+ "activityBar.background": "#e4db32",
+ "activityBar.foreground": "#15202b",
+ "activityBar.inactiveForeground": "#15202b99",
+ "activityBarBadge.background": "#16a9a2",
+ "activityBarBadge.foreground": "#e7e7e7",
+ "commandCenter.border": "#15202b99",
+ "sash.hoverBorder": "#e4db32",
+ "statusBar.background": "#c9c01a",
+ "statusBar.foreground": "#15202b",
+ "statusBarItem.hoverBackground": "#9c9514",
+ "statusBarItem.remoteBackground": "#c9c01a",
+ "statusBarItem.remoteForeground": "#15202b",
+ "titleBar.activeBackground": "#c9c01a",
+ "titleBar.activeForeground": "#15202b",
+ "titleBar.inactiveBackground": "#c9c01a99",
+ "titleBar.inactiveForeground": "#15202b99"
+ },
+ "peacock.color": "#c9c01a",
+
+ // Formatters
+ "editor.defaultFormatter": "biomejs.biome",
+
+ // Use Prettier for specific file types
+ "[html]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "[markdown]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ }
+}
diff --git a/README.md b/README.md
new file mode 100644
index 00000000..46409041
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+# TODO
diff --git a/apps/demo-angular/.editorconfig b/apps/demo-angular/.editorconfig
new file mode 100644
index 00000000..59d9a3a3
--- /dev/null
+++ b/apps/demo-angular/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/apps/demo-angular/.gitignore b/apps/demo-angular/.gitignore
new file mode 100644
index 00000000..0711527e
--- /dev/null
+++ b/apps/demo-angular/.gitignore
@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
diff --git a/apps/demo-angular/README.md b/apps/demo-angular/README.md
new file mode 100644
index 00000000..abf190e6
--- /dev/null
+++ b/apps/demo-angular/README.md
@@ -0,0 +1,27 @@
+# AppAngular
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.4.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
diff --git a/apps/demo-angular/angular.json b/apps/demo-angular/angular.json
new file mode 100644
index 00000000..e4973ca5
--- /dev/null
+++ b/apps/demo-angular/angular.json
@@ -0,0 +1,83 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "demo-angular": {
+ "projectType": "application",
+ "schematics": {},
+ "root": "",
+ "sourceRoot": "src",
+ "prefix": "app",
+ "architect": {
+ "build": {
+ "builder": "@angular-devkit/build-angular:browser",
+ "options": {
+ "outputPath": "dist/demo-angular",
+ "index": "src/index.html",
+ "main": "src/main.ts",
+ "polyfills": ["zone.js"],
+ "tsConfig": "tsconfig.app.json",
+ "assets": ["src/favicon.ico", "src/assets"],
+ "styles": ["src/styles.css"],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kb",
+ "maximumError": "1mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "2kb",
+ "maximumError": "4kb"
+ }
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "buildOptimizer": false,
+ "optimization": false,
+ "vendorChunk": true,
+ "extractLicenses": false,
+ "sourceMap": true,
+ "namedChunks": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "browserTarget": "demo-angular:build:production"
+ },
+ "development": {
+ "browserTarget": "demo-angular:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "builder": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "browserTarget": "demo-angular:build"
+ }
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "polyfills": ["zone.js", "zone.js/testing"],
+ "tsConfig": "tsconfig.spec.json",
+ "assets": ["src/favicon.ico", "src/assets"],
+ "styles": ["src/styles.css"],
+ "scripts": []
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/apps/demo-angular/package.json b/apps/demo-angular/package.json
new file mode 100644
index 00000000..bbff9f28
--- /dev/null
+++ b/apps/demo-angular/package.json
@@ -0,0 +1,41 @@
+{
+ "private": true,
+ "name": "demo-angular",
+ "version": "0.0.0",
+ "scripts": {
+ "build": "ng build",
+ "clean": "rm -rf node_modules .turbo dist",
+ "ng": "ng",
+ "start": "ng serve",
+ "test": "ng test",
+ "watch": "ng build --watch --configuration development"
+ },
+ "dependencies": {
+ "@angular/animations": "^16.2.11",
+ "@angular/common": "^16.2.11",
+ "@angular/compiler": "^16.2.11",
+ "@angular/core": "^16.2.11",
+ "@angular/forms": "^16.2.11",
+ "@angular/platform-browser": "^16.2.11",
+ "@angular/platform-browser-dynamic": "^16.2.11",
+ "@angular/router": "^16.2.11",
+ "ui-stencil-angular": "workspace:*",
+ "rxjs": "~7.8.1",
+ "tslib": "^2.6.2",
+ "ui-stencil": "workspace:*",
+ "zone.js": "~0.14.1"
+ },
+ "devDependencies": {
+ "@angular-devkit/build-angular": "^16.2.8",
+ "@angular/cli": "~16.2.8",
+ "@angular/compiler-cli": "^16.2.11",
+ "@types/jasmine": "~5.1.1",
+ "jasmine-core": "~5.1.1",
+ "karma": "~6.4.2",
+ "karma-chrome-launcher": "~3.2.0",
+ "karma-coverage": "~2.2.1",
+ "karma-jasmine": "~5.1.0",
+ "karma-jasmine-html-reporter": "~2.1.0",
+ "typescript": "~4.9.3"
+ }
+}
diff --git a/apps/demo-angular/src/app/app-routing.module.ts b/apps/demo-angular/src/app/app-routing.module.ts
new file mode 100644
index 00000000..02972627
--- /dev/null
+++ b/apps/demo-angular/src/app/app-routing.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+ imports: [RouterModule.forRoot(routes)],
+ exports: [RouterModule]
+})
+export class AppRoutingModule { }
diff --git a/apps/demo-angular/src/app/app.component.css b/apps/demo-angular/src/app/app.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/demo-angular/src/app/app.component.html b/apps/demo-angular/src/app/app.component.html
new file mode 100644
index 00000000..1bf25041
--- /dev/null
+++ b/apps/demo-angular/src/app/app.component.html
@@ -0,0 +1,15 @@
+
+
+
+
+ Stencil Components
+
+
+
+
+
+
+
diff --git a/apps/demo-angular/src/app/app.component.spec.ts b/apps/demo-angular/src/app/app.component.spec.ts
new file mode 100644
index 00000000..06fcbed0
--- /dev/null
+++ b/apps/demo-angular/src/app/app.component.spec.ts
@@ -0,0 +1,31 @@
+import { TestBed } from '@angular/core/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import { AppComponent } from './app.component'
+
+describe('AppComponent', () => {
+ beforeEach(() =>
+ TestBed.configureTestingModule({
+ imports: [RouterTestingModule],
+ declarations: [AppComponent]
+ })
+ )
+
+ it('should create the app', () => {
+ const fixture = TestBed.createComponent(AppComponent)
+ const app = fixture.componentInstance
+ expect(app).toBeTruthy()
+ })
+
+ it(`should have as title 'demo-angular'`, () => {
+ const fixture = TestBed.createComponent(AppComponent)
+ const app = fixture.componentInstance
+ expect(app.title).toEqual('demo-angular')
+ })
+
+ it('should render title', () => {
+ const fixture = TestBed.createComponent(AppComponent)
+ fixture.detectChanges()
+ const compiled = fixture.nativeElement as HTMLElement
+ expect(compiled.querySelector('.content span')?.textContent).toContain('demo-angular app is running!')
+ })
+})
diff --git a/apps/demo-angular/src/app/app.component.ts b/apps/demo-angular/src/app/app.component.ts
new file mode 100644
index 00000000..2904aa48
--- /dev/null
+++ b/apps/demo-angular/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+ title = 'demo-angular'
+}
diff --git a/apps/demo-angular/src/app/app.module.ts b/apps/demo-angular/src/app/app.module.ts
new file mode 100644
index 00000000..c3ade62d
--- /dev/null
+++ b/apps/demo-angular/src/app/app.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+
+import { ComponentLibraryModule } from 'ui-stencil-angular/dist/component-library'
+
+import { AppRoutingModule } from './app-routing.module'
+import { AppComponent } from './app.component'
+
+@NgModule({
+ declarations: [AppComponent],
+ imports: [BrowserModule, AppRoutingModule, ComponentLibraryModule],
+ providers: [],
+ bootstrap: [AppComponent],
+ schemas: []
+})
+export class AppModule {}
diff --git a/apps/demo-angular/src/assets/.gitkeep b/apps/demo-angular/src/assets/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/demo-angular/src/favicon.ico b/apps/demo-angular/src/favicon.ico
new file mode 100644
index 00000000..997406ad
Binary files /dev/null and b/apps/demo-angular/src/favicon.ico differ
diff --git a/apps/demo-angular/src/index.html b/apps/demo-angular/src/index.html
new file mode 100644
index 00000000..d1bf2899
--- /dev/null
+++ b/apps/demo-angular/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ AppAngular
+
+
+
+
+
+
+
+
diff --git a/apps/demo-angular/src/main.ts b/apps/demo-angular/src/main.ts
new file mode 100644
index 00000000..c58dc05c
--- /dev/null
+++ b/apps/demo-angular/src/main.ts
@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+ .catch(err => console.error(err));
diff --git a/apps/demo-angular/src/styles.css b/apps/demo-angular/src/styles.css
new file mode 100644
index 00000000..97d65914
--- /dev/null
+++ b/apps/demo-angular/src/styles.css
@@ -0,0 +1,124 @@
+/* You can add global styles to this file, and also import other style files */
+#root {
+ background-color: #fff;
+ min-height: 100vh;
+}
+
+main {
+ padding: 1rem;
+}
+
+/* Custom CSS Reset by Josh W Comeau https://www.joshwcomeau.com/css/custom-css-reset/ */
+
+/*
+ 1. Use a more-intuitive box-sizing model.
+ */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/*
+ 2. Remove default margin
+ */
+* {
+ margin: 0;
+}
+
+/*
+ 3. Allow percentage-based heights in the application
+ */
+html,
+body {
+ height: 100%;
+ padding: 0;
+}
+
+/* Typographic tweaks!
+ 4. Add accessible line-height
+ 5. Improve text rendering
+ */
+body {
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+/*
+ 6. Improve media defaults
+ */
+img,
+picture,
+video,
+canvas,
+svg {
+ display: block;
+ max-width: 100%;
+}
+/*
+ 7. Remove built-in form typography styles
+ */
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+/*
+ 8. Avoid text overflows
+ */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ overflow-wrap: break-word;
+}
+
+/*
+ 9. Create a root stacking context
+ */
+#root,
+#__next {
+ isolation: isolate;
+}
+
+/* PWA enhancements */
+body {
+ -webkit-overflow-scrolling: touch;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-touch-callout: none;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+strong {
+ font-weight: 800;
+}
+
+h1 {
+ font-size: 2rem;
+ font-weight: bold;
+ margin-bottom: 1rem;
+}
+h2 {
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+}
+section {
+ margin-bottom: 1rem;
+}
+
+.component-row {
+ background-color: #ddd;
+ padding: 1rem;
+ border-radius: 1rem;
+}
diff --git a/apps/demo-angular/tsconfig.app.json b/apps/demo-angular/tsconfig.app.json
new file mode 100644
index 00000000..374cc9d2
--- /dev/null
+++ b/apps/demo-angular/tsconfig.app.json
@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/app",
+ "types": []
+ },
+ "files": [
+ "src/main.ts"
+ ],
+ "include": [
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/apps/demo-angular/tsconfig.json b/apps/demo-angular/tsconfig.json
new file mode 100644
index 00000000..ed966d43
--- /dev/null
+++ b/apps/demo-angular/tsconfig.json
@@ -0,0 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "baseUrl": "./",
+ "outDir": "./dist/out-tsc",
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "sourceMap": true,
+ "declaration": false,
+ "downlevelIteration": true,
+ "experimentalDecorators": true,
+ "moduleResolution": "node",
+ "importHelpers": true,
+ "target": "ES2022",
+ "module": "ES2022",
+ "useDefineForClassFields": false,
+ "lib": [
+ "ES2022",
+ "dom"
+ ]
+ },
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
+}
diff --git a/apps/demo-angular/tsconfig.spec.json b/apps/demo-angular/tsconfig.spec.json
new file mode 100644
index 00000000..be7e9da7
--- /dev/null
+++ b/apps/demo-angular/tsconfig.spec.json
@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/spec",
+ "types": [
+ "jasmine"
+ ]
+ },
+ "include": [
+ "src/**/*.spec.ts",
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/apps/demo-react/.eslintrc.cjs b/apps/demo-react/.eslintrc.cjs
new file mode 100644
index 00000000..1dc7153b
--- /dev/null
+++ b/apps/demo-react/.eslintrc.cjs
@@ -0,0 +1,27 @@
+/* eslint-env node */
+
+module.exports = {
+ root: true,
+ env: { browser: true, es2020: true },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:@typescript-eslint/recommended-requiring-type-checking',
+ 'plugin:react-hooks/recommended',
+ ],
+ parser: '@typescript-eslint/parser',
+ parserOptions: {
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ project: true,
+ tsconfigRootDir: __dirname,
+ },
+ plugins: ['react-refresh'],
+ rules: {
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ '@typescript-eslint/no-non-null-assertion': 'off',
+ },
+}
diff --git a/apps/demo-react/.gitignore b/apps/demo-react/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/apps/demo-react/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/demo-react/index.html b/apps/demo-react/index.html
new file mode 100644
index 00000000..e0d1c840
--- /dev/null
+++ b/apps/demo-react/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Vite + React + TS
+
+
+
+
+
+
diff --git a/apps/demo-react/package.json b/apps/demo-react/package.json
new file mode 100644
index 00000000..b5d2af18
--- /dev/null
+++ b/apps/demo-react/package.json
@@ -0,0 +1,30 @@
+{
+ "private": true,
+ "name": "demo-react",
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "build": "tsc && vite build",
+ "clean": "rm -rf node_modules .turbo dist",
+ "dev": "vite",
+ "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "ui-stencil-react": "workspace:*",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.33",
+ "@types/react-dom": "^18.2.14",
+ "@typescript-eslint/eslint-plugin": "^6.9.1",
+ "@typescript-eslint/parser": "^6.9.1",
+ "@vitejs/plugin-react": "^4.1.0",
+ "eslint": "^8.52.0",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.4.4",
+ "typescript": "^0",
+ "vite": "^4.5.0"
+ }
+}
diff --git a/apps/demo-react/public/vite.svg b/apps/demo-react/public/vite.svg
new file mode 100644
index 00000000..e7b8dfb1
--- /dev/null
+++ b/apps/demo-react/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/demo-react/src/App.css b/apps/demo-react/src/App.css
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/demo-react/src/App.tsx b/apps/demo-react/src/App.tsx
new file mode 100644
index 00000000..ab200f8c
--- /dev/null
+++ b/apps/demo-react/src/App.tsx
@@ -0,0 +1,23 @@
+import './App.css'
+import { defineCustomElements } from 'ui-stencil-react'
+
+void defineCustomElements()
+
+function App() {
+ return (
+ <>
+
+
+
+
+ Stencil Components
+ {/* */}
+
+
+ >
+ )
+}
+
+export default App
diff --git a/apps/demo-react/src/assets/react.svg b/apps/demo-react/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/apps/demo-react/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/demo-react/src/index.css b/apps/demo-react/src/index.css
new file mode 100644
index 00000000..6b18b398
--- /dev/null
+++ b/apps/demo-react/src/index.css
@@ -0,0 +1,123 @@
+#root {
+ background-color: #fff;
+ min-height: 100vh;
+}
+
+main {
+ padding: 1rem;
+}
+
+/* Custom CSS Reset by Josh W Comeau https://www.joshwcomeau.com/css/custom-css-reset/ */
+
+/*
+ 1. Use a more-intuitive box-sizing model.
+ */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/*
+ 2. Remove default margin
+ */
+* {
+ margin: 0;
+}
+
+/*
+ 3. Allow percentage-based heights in the application
+ */
+html,
+body {
+ height: 100%;
+ padding: 0;
+}
+
+/* Typographic tweaks!
+ 4. Add accessible line-height
+ 5. Improve text rendering
+ */
+body {
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+/*
+ 6. Improve media defaults
+ */
+img,
+picture,
+video,
+canvas,
+svg {
+ display: block;
+ max-width: 100%;
+}
+/*
+ 7. Remove built-in form typography styles
+ */
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+/*
+ 8. Avoid text overflows
+ */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ overflow-wrap: break-word;
+}
+
+/*
+ 9. Create a root stacking context
+ */
+#root,
+#__next {
+ isolation: isolate;
+}
+
+/* PWA enhancements */
+body {
+ -webkit-overflow-scrolling: touch;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-touch-callout: none;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+strong {
+ font-weight: 800;
+}
+
+h1 {
+ font-size: 2rem;
+ font-weight: bold;
+ margin-bottom: 1rem;
+}
+h2 {
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+}
+section {
+ margin-bottom: 1rem;
+}
+
+.component-row {
+ background-color: #ddd;
+ padding: 1rem;
+ border-radius: 1rem;
+}
diff --git a/apps/demo-react/src/main.tsx b/apps/demo-react/src/main.tsx
new file mode 100644
index 00000000..3d7150da
--- /dev/null
+++ b/apps/demo-react/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
diff --git a/apps/demo-react/src/vite-env.d.ts b/apps/demo-react/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/apps/demo-react/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/apps/demo-react/tsconfig.json b/apps/demo-react/tsconfig.json
new file mode 100644
index 00000000..a7fc6fbf
--- /dev/null
+++ b/apps/demo-react/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/apps/demo-react/tsconfig.node.json b/apps/demo-react/tsconfig.node.json
new file mode 100644
index 00000000..42872c59
--- /dev/null
+++ b/apps/demo-react/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/apps/demo-react/vite.config.ts b/apps/demo-react/vite.config.ts
new file mode 100644
index 00000000..5a33944a
--- /dev/null
+++ b/apps/demo-react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+})
diff --git a/apps/demo-vue/.gitignore b/apps/demo-vue/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/apps/demo-vue/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/demo-vue/.vscode/extensions.json b/apps/demo-vue/.vscode/extensions.json
new file mode 100644
index 00000000..c0a6e5a4
--- /dev/null
+++ b/apps/demo-vue/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+ "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/apps/demo-vue/README.md b/apps/demo-vue/README.md
new file mode 100644
index 00000000..ef72fd52
--- /dev/null
+++ b/apps/demo-vue/README.md
@@ -0,0 +1,18 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `
+