Create Libraries and basic tooltip

.prettierrc

@@ -1,3 +1,9 @@
 {
-  "singleQuote": true
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "singleQuote": true,
+  "printWidth": 140,
+  "importOrder": ["^^@z-(.*)$", "^lit(.*)$", "rxjs", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderGroupNamespaceSpecifiers": true,
+  "importOrderParserPlugins": ["decorators", "typescript"]
 }

.verdaccio/config.yml

@@ -1,28 +0,0 @@
-# path to a directory with all packages
-storage: ../tmp/local-registry/storage
-
-# a list of other known repositories we can talk to
-uplinks:
-  npmjs:
-    url: https://verdaccio.hijlkema.codes/
-    maxage: 60m
-
-packages:
-  '**':
-    # give all users (including non-authenticated users) full access
-    # because it is a local registry
-    access: $all
-    publish: $all
-    unpublish: $all
-
-    # if package is not available locally, proxy requests to npm registry
-    proxy: npmjs
-
-# log settings
-logs:
-  type: stdout
-  format: pretty
-  level: warn
-
-publish:
-  allow_offline: true # set offline to true to allow publish offline

apps/libs/_internal/directives/tsconfig.lib.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["../../../../libs/_internal/directives/src/**/*.ts"],
+  "exclude": [
+    "../../../../libs/_internal/directives/jest.config.ts",
+    "../../../../libs/_internal/directives/src/**/*.spec.ts",
+    "../../../../libs/_internal/directives/src/**/*.test.ts"
+  ]
+}

apps/libs/tooltip/tsconfig.lib.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["../../../libs/tooltip/src/**/*.ts"],
+  "exclude": [
+    "../../../libs/tooltip/jest.config.ts",
+    "../../../libs/tooltip/src/**/*.spec.ts",
+    "../../../libs/tooltip/src/**/*.test.ts",
+    "../../../libs/tooltip/**/*.stories.ts",
+    "../../../libs/tooltip/**/*.stories.js"
+  ]
+}

libs/_internal/controllers/.eslintrc.json

@@ -0,0 +1,42 @@
+{
+  "extends": [
+    "../../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.json"
+      ],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

libs/_internal/controllers/README.md

@@ -0,0 +1,19 @@
+# _internal-controllers
+
+This library was generated with [Nx](https://nx.dev).
+
+
+
+## Building
+
+Run `nx build _internal-controllers` to build the library.
+
+
+
+
+
+## Running unit tests
+
+Run `nx test _internal-controllers` to execute the unit tests via [Jest](https://jestjs.io).
+
+

libs/_internal/controllers/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@z-elements/_internal/controllers",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

libs/_internal/controllers/project.json

@@ -0,0 +1,45 @@
+{
+  "name": "_internal-controllers",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/_internal/controllers/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "options": {
+        "outputPath": "dist/libs/_internal/controllers",
+        "main": "libs/_internal/controllers/src/index.ts",
+        "tsConfig": "libs/_internal/controllers/tsconfig.lib.json",
+        "assets": [
+          "libs/_internal/controllers/*.md"
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "libs/_internal/controllers/**/*.ts",
+          "libs/_internal/controllers/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": [
+        "{options.reportsDirectory}"
+      ],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../../coverage/libs/_internal/controllers"
+      }
+    }
+  },
+  "tags": []
+}

libs/_internal/controllers/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/destroy.controller';

libs/_internal/controllers/src/lib/destroy.controller.ts

@@ -0,0 +1,28 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { Subject } from 'rxjs';
+
+export class DestroyController implements ReactiveController {
+  /** Private variables */
+  private readonly _host: ReactiveControllerHost;
+  private readonly destroy$ = new Subject<void>();
+
+  /** Protected variables */
+
+  /** Public variables */
+  public readonly destroy = this.destroy$.asObservable();
+
+  /** constructor & lifecylce */
+  constructor(host: ReactiveControllerHost) {
+    (this._host = host).addController(this);
+  }
+
+  /** Public methods */
+  public hostDisconnected() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  /** Protected methods */
+
+  /** Private methods */
+}

libs/_internal/controllers/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": [
+      "vitest"
+    ]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/_internal/controllers/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

libs/_internal/controllers/tsconfig.spec.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

libs/_internal/controllers/vite.config.ts

@@ -0,0 +1,35 @@
+
+      /// <reference types="vitest" />
+      import { defineConfig } from 'vite';
+      
+      import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+      
+      
+      export default defineConfig({
+        cacheDir: '../../../node_modules/.vite/_internal-controllers',
+        
+        
+        
+    plugins: [
+      
+      
+      nxViteTsPaths(),
+    ],
+    
+        
+    // Uncomment this if you are using workers. 
+    // worker: {
+    //  plugins: [ nxViteTsPaths() ],
+    // },
+        
+        
+        test: {
+    globals: true,
+    cache: {
+      dir: '../../../node_modules/.vitest'
+    },
+    environment: 'node',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    
+  },
+      });

libs/_internal/directives/.eslintrc.json

@@ -0,0 +1,42 @@
+{
+  "extends": [
+    "../../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.json"
+      ],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

libs/_internal/directives/README.md

@@ -0,0 +1,19 @@
+# _internal-directives
+
+This library was generated with [Nx](https://nx.dev).
+
+
+
+## Building
+
+Run `nx build _internal-directives` to build the library.
+
+
+
+
+
+## Running unit tests
+
+Run `nx test _internal-directives` to execute the unit tests via [Jest](https://jestjs.io).
+
+

libs/_internal/directives/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@z-elements/_internal/directives",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

libs/_internal/directives/project.json

@@ -0,0 +1,45 @@
+{
+  "name": "_internal-directives",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/_internal/directives/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "options": {
+        "outputPath": "dist/libs/_internal/directives",
+        "main": "libs/_internal/directives/src/index.ts",
+        "tsConfig": "libs/_internal/directives/tsconfig.lib.json",
+        "assets": [
+          "libs/_internal/directives/*.md"
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "libs/_internal/directives/**/*.ts",
+          "libs/_internal/directives/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": [
+        "{options.reportsDirectory}"
+      ],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../../coverage/libs/_internal/directives"
+      }
+    }
+  },
+  "tags": []
+}

libs/_internal/directives/src/index.ts

@@ -0,0 +1 @@
+export { asyncDirective } from './lib/async-directive';

libs/_internal/directives/src/lib/async-directive.ts

@@ -0,0 +1,28 @@
+import { noChange } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+import { Observable, Subject, tap } from 'rxjs';
+
+class Async extends AsyncDirective {
+  private readonly destroy$ = new Subject<void>();
+
+  render(observable: Observable<unknown>) {
+    observable
+      .pipe(
+        tap((value: unknown) => {
+          this.setValue(value);
+        }),
+      )
+      .subscribe();
+
+    return noChange;
+  }
+
+  protected override disconnected(): void {
+    super.disconnected();
+
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}
+
+export const asyncDirective = directive(Async);

libs/_internal/directives/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": [
+      "vitest"
+    ]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/_internal/directives/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

libs/_internal/directives/tsconfig.spec.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

libs/_internal/directives/vite.config.ts

@@ -0,0 +1,35 @@
+
+      /// <reference types="vitest" />
+      import { defineConfig } from 'vite';
+      
+      import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+      
+      
+      export default defineConfig({
+        cacheDir: '../../../node_modules/.vite/_internal-directives',
+        
+        
+        
+    plugins: [
+      
+      
+      nxViteTsPaths(),
+    ],
+    
+        
+    // Uncomment this if you are using workers. 
+    // worker: {
+    //  plugins: [ nxViteTsPaths() ],
+    // },
+        
+        
+        test: {
+    globals: true,
+    cache: {
+      dir: '../../../node_modules/.vitest'
+    },
+    environment: 'node',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    
+  },
+      });

libs/container/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

libs/container/README.md

@@ -0,0 +1,13 @@
+# container
+
+> !note: this needs to be imported from stackblitz
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build container` to build the library.
+
+## Running unit tests
+
+Run `nx test container` to execute the unit tests via [Jest](https://jestjs.io).

libs/container/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'container',
+  preset: '../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/libs/container',
+};

libs/container/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@z-elements/container",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

libs/container/project.json

@@ -0,0 +1,43 @@
+{
+  "name": "container",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/container/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/container",
+        "main": "libs/container/src/index.ts",
+        "tsConfig": "libs/container/tsconfig.lib.json",
+        "assets": ["libs/container/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/container/**/*.ts",
+          "libs/container/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/container/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  },
+  "tags": []
+}

libs/container/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/container';

libs/container/src/lib/container.spec.ts

@@ -0,0 +1,7 @@
+import { container } from './container';
+
+describe('container', () => {
+  it('should work', () => {
+    expect(container()).toEqual('container');
+  });
+});

libs/container/src/lib/container.ts

@@ -0,0 +1,3 @@
+export function container(): string {
+  return 'container';
+}

libs/container/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/container/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

libs/container/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

libs/panels/bottom-panel/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

libs/panels/bottom-panel/README.md

@@ -0,0 +1,11 @@
+# panels-bottom-panel
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build panels-bottom-panel` to build the library.
+
+## Running unit tests
+
+Run `nx test panels-bottom-panel` to execute the unit tests via [Jest](https://jestjs.io).

libs/panels/bottom-panel/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@z-elements/panels/bottom-panel",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

libs/panels/bottom-panel/project.json

@@ -0,0 +1,37 @@
+{
+  "name": "panels-bottom-panel",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/panels/bottom-panel/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/panels/bottom-panel",
+        "main": "libs/panels/bottom-panel/src/index.ts",
+        "tsConfig": "libs/panels/bottom-panel/tsconfig.lib.json",
+        "assets": ["libs/panels/bottom-panel/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/panels/bottom-panel/**/*.ts",
+          "libs/panels/bottom-panel/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["coverage/libs/panels/bottom-panel"],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../../coverage/libs/panels/bottom-panel"
+      }
+    }
+  },
+  "tags": []
+}

libs/panels/bottom-panel/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/panels-bottom-panel';

libs/panels/bottom-panel/src/lib/panels-bottom-panel.spec.ts

@@ -0,0 +1,7 @@
+import { panelsBottomPanel } from './panels-bottom-panel';
+
+describe('panelsBottomPanel', () => {
+  it('should work', () => {
+    expect(panelsBottomPanel()).toEqual('panels-bottom-panel');
+  });
+});

libs/panels/bottom-panel/src/lib/panels-bottom-panel.ts

@@ -0,0 +1,3 @@
+export function panelsBottomPanel(): string {
+  return 'panels-bottom-panel';
+}

libs/panels/bottom-panel/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["vitest"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/panels/bottom-panel/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

libs/panels/bottom-panel/tsconfig.spec.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

libs/panels/bottom-panel/vite.config.ts

@@ -0,0 +1,24 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  cacheDir: '../../../node_modules/.vite/panels-bottom-panel',
+
+  plugins: [nxViteTsPaths()],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  test: {
+    globals: true,
+    cache: {
+      dir: '../../../node_modules/.vitest',
+    },
+    environment: 'node',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+  },
+});

libs/panels/side-panel/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

libs/panels/side-panel/README.md

@@ -0,0 +1,11 @@
+# panels-side-panel
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build panels-side-panel` to build the library.
+
+## Running unit tests
+
+Run `nx test panels-side-panel` to execute the unit tests via [Jest](https://jestjs.io).

libs/panels/side-panel/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@z-elements/panels/side-panel",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

libs/panels/side-panel/project.json

@@ -0,0 +1,37 @@
+{
+  "name": "panels-side-panel",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/panels/side-panel/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/panels/side-panel",
+        "main": "libs/panels/side-panel/src/index.ts",
+        "tsConfig": "libs/panels/side-panel/tsconfig.lib.json",
+        "assets": ["libs/panels/side-panel/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/panels/side-panel/**/*.ts",
+          "libs/panels/side-panel/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["coverage/libs/panels/side-panel"],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../../coverage/libs/panels/side-panel"
+      }
+    }
+  },
+  "tags": []
+}

libs/panels/side-panel/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/panels-side-panel';

libs/panels/side-panel/src/lib/panels-side-panel.spec.ts

@@ -0,0 +1,7 @@
+import { panelsSidePanel } from './panels-side-panel';
+
+describe('panelsSidePanel', () => {
+  it('should work', () => {
+    expect(panelsSidePanel()).toEqual('panels-side-panel');
+  });
+});

libs/panels/side-panel/src/lib/panels-side-panel.ts

@@ -0,0 +1,3 @@
+export function panelsSidePanel(): string {
+  return 'panels-side-panel';
+}

libs/panels/side-panel/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["vitest"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/panels/side-panel/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

libs/panels/side-panel/tsconfig.spec.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

libs/panels/side-panel/vite.config.ts

@@ -0,0 +1,24 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  cacheDir: '../../../node_modules/.vite/panels-side-panel',
+
+  plugins: [nxViteTsPaths()],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  test: {
+    globals: true,
+    cache: {
+      dir: '../../../node_modules/.vitest',
+    },
+    environment: 'node',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+  },
+});

libs/tooltip/.eslintrc.json

@@ -0,0 +1,42 @@
+{
+  "extends": [
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.json"
+      ],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

libs/tooltip/.storybook/main.ts

@@ -0,0 +1,35 @@
+import type { StorybookConfig } from '@storybook/web-components-vite';
+
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { mergeConfig } from 'vite';
+
+
+const config: StorybookConfig = {
+  stories: [
+    
+    '../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'
+  ],
+  addons: ['@storybook/addon-essentials' , '@storybook/addon-interactions' ],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {
+      
+    },
+  },
+  
+  viteFinal: async (config) =>
+    mergeConfig(config, {
+      plugins: [nxViteTsPaths()],
+    }),
+  
+};
+
+export default config;
+
+
+
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/packages/storybook/documents/custom-builder-configs
+

libs/tooltip/README.md

@@ -0,0 +1,11 @@
+# tooltip
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build tooltip` to build the library.
+
+## Running unit tests
+
+Run `nx test tooltip` to execute the unit tests via [Jest](https://jestjs.io).

libs/tooltip/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@z-elements/tooltip",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

libs/tooltip/project.json

@@ -0,0 +1,78 @@
+{
+  "name": "tooltip",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/tooltip/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "options": {
+        "outputPath": "dist/libs/tooltip",
+        "main": "libs/tooltip/src/index.ts",
+        "tsConfig": "libs/tooltip/tsconfig.lib.json",
+        "assets": [
+          "libs/tooltip/*.md"
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "libs/tooltip/**/*.ts",
+          "libs/tooltip/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": [
+        "coverage/libs/tooltip"
+      ],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../coverage/libs/tooltip"
+      }
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "libs/tooltip/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": [
+        "{options.outputDir}"
+      ],
+      "options": {
+        "outputDir": "dist/storybook/tooltip",
+        "configDir": "libs/tooltip/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "test-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "test-storybook -c libs/tooltip/.storybook --url=http://localhost:4400"
+      }
+    }
+  },
+  "tags": []
+}

libs/tooltip/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/tooltip.component';

libs/tooltip/src/lib/controllers/position.controller.ts

@@ -0,0 +1,134 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+import { Subject, debounceTime, fromEvent, takeUntil, tap } from 'rxjs';
+
+import { Placement } from '../models/placement.enum';
+import TooltipComponent from '../tooltip.component';
+
+/**
+ * Calculate the placement of the tooltip.
+ *
+ * If the tooltip does not fit in the screen it will try to find a better position. Does not stick to the sided of the screen.
+ * Moves along the item on screen resize after a slight delay.
+ *
+ */
+export class PositionController implements ReactiveController {
+  /** Private variables */
+  private readonly _host: ReactiveControllerHost<TooltipComponent>;
+  private _hostTarget: HTMLElement | undefined;
+
+  private readonly destroy$ = new Subject<void>();
+
+  /** Protected variables */
+
+  /** Public variables */
+  public top: number = 0;
+  public left: number = 0;
+  public position: Placement;
+
+  /** constructor & lifecycle */
+  constructor(host: ReactiveControllerHost<TooltipComponent>) {
+    (this._host = host).addController(this);
+  }
+
+  public hostConnected() {
+    this._hostTarget = this._host.targetHost;
+    this.position = this._host.preferredPlacement;
+
+    if (!this._hostTarget) {
+      throw new Error('TooltipComponent targetHost is undefined');
+    }
+
+    this.update();
+
+    fromEvent(window, 'resize')
+      .pipe(
+        debounceTime(300),
+        tap(() => this.update()),
+        takeUntil(this.destroy$),
+      )
+      .subscribe();
+  }
+
+  public hostDisconnected() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  /** Public methods */
+  public update() {
+    let topLeft = this.getPositions(this._host.preferredPlacement);
+    const preferredPosition = this._host.preferredPlacement;
+    const exhaustedPositions: Placement[] = [preferredPosition];
+    const availablePosition: Placement[] = [Placement.top, Placement.left, Placement.right, Placement.bottom];
+    this.position = this._host.preferredPlacement;
+
+    while (!this.doesPostionFitInScreen(topLeft) && exhaustedPositions.length < 4) {
+      topLeft = this.getPositions(availablePosition.find((p) => !exhaustedPositions.includes(p))!);
+      exhaustedPositions.push(availablePosition.find((p) => !exhaustedPositions.includes(p))!);
+
+      this.position = availablePosition.find((p) => !exhaustedPositions.includes(p))!;
+    }
+    console.log(this.position);
+
+    this.top = topLeft.top;
+    this.left = topLeft.left;
+
+    this._host.requestUpdate();
+  }
+
+  /** Protected methods */
+  protected getPositions(position: Placement): { top: number; left: number } {
+    const domRect = this.getElementBoundingClientRect(this._hostTarget!);
+    const topLeft = {
+      top: 0,
+      left: 0,
+    };
+
+    switch (position) {
+      case Placement.top:
+        topLeft.top = domRect.top - this._host.contentElement?.offsetHeight;
+        topLeft.left = domRect.left;
+        break;
+      case 'bottom':
+        topLeft.top = domRect.bottom;
+        topLeft.left = domRect.left;
+        break;
+      case 'left':
+        topLeft.top = domRect.top + domRect.height / 2 - this._host.contentElement?.offsetHeight / 2;
+        topLeft.left = domRect.left - this._host.contentElement?.offsetWidth;
+        break;
+      case 'right':
+        topLeft.top = domRect.top + domRect.height / 2 - this._host.contentElement?.offsetHeight / 2;
+        topLeft.left = domRect.right;
+        break;
+    }
+
+    return topLeft;
+  }
+
+  /** Private methods */
+  private getElementBoundingClientRect(element: Element): DOMRect {
+    return element.getBoundingClientRect();
+  }
+
+  private doesPostionFitInScreen(topLeft: { top: number; left: number }): boolean {
+    if (topLeft.top < 0) {
+      return false;
+    }
+
+    if (topLeft.left < 0) {
+      return false;
+    }
+
+    if (this.top + this._host.contentElement?.offsetHeight > window.innerHeight) {
+      return false;
+    }
+
+    if (this.left + this._host.contentElement?.offsetWidth > window.innerWidth) {
+      return false;
+    }
+
+    return true;
+  }
+}

libs/tooltip/src/lib/controllers/visibility.controller.ts

@@ -0,0 +1,125 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+import {
+  BehaviorSubject,
+  Subject,
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  finalize,
+  fromEvent,
+  map,
+  merge,
+  scan,
+  takeUntil,
+  tap,
+} from 'rxjs';
+
+import TooltipComponent from '../tooltip.component';
+
+const enum TooltipState {
+  open = 'open',
+  closed = 'closed',
+  forceOpen = 'forceOpen',
+  forceClosed = 'forceClosed',
+}
+
+export class VisibilityController implements ReactiveController {
+  /** Private variables */
+  private readonly _host: ReactiveControllerHost<TooltipComponent>;
+  private readonly destroy$ = new Subject<void>();
+
+  /** Protected variables */
+  protected isVisible$ = new BehaviorSubject<boolean>(false);
+  protected emitShow$: Subject<void> = new Subject<void>();
+  protected emitHide$: Subject<void> = new Subject<void>();
+
+  /** Public variables */
+  public isVisible = this.isVisible$.asObservable();
+  public show$ = this.emitShow$.asObservable();
+  public hide$ = this.emitHide$.asObservable();
+
+  /** constructor & lifecylce */
+  constructor(host: ReactiveControllerHost<TooltipComponent>) {
+    this._host = host;
+    this._host.addController(this);
+  }
+
+  hostConnected() {
+    const hostTarget = document.querySelector<HTMLElement>(`[aria-describedby="${this._host.id}"]`);
+
+    if (!hostTarget) {
+      return;
+    }
+
+    const openEvent$ = merge(
+      fromEvent(hostTarget, 'mouseenter').pipe(map(() => TooltipState.open)),
+      fromEvent(hostTarget, 'focus').pipe(map(() => TooltipState.open)),
+      fromEvent(hostTarget, 'click').pipe(map(() => TooltipState.open)),
+      fromEvent(this._host, 'mouseover').pipe(
+        filter(() => this._host.interactive),
+        map(() => TooltipState.forceOpen),
+      ),
+    );
+
+    const closeEvent$ = merge(
+      fromEvent(hostTarget, 'blur').pipe(map(() => TooltipState.closed)),
+      fromEvent(hostTarget, 'mouseleave').pipe(map(() => TooltipState.closed)),
+      fromEvent<MouseEvent>(this._host, 'click').pipe(
+        filter(() => this._host.interactive),
+        filter((event: MouseEvent) => event.target === this._host),
+        map(() => TooltipState.forceClosed),
+      ),
+      fromEvent<KeyboardEvent>(document, 'keydown').pipe(
+        debounceTime(100),
+        filter((event: KeyboardEvent) => !event.repeat), // Ignore auto-repeated keydown events
+        filter((event: KeyboardEvent) => event.key === 'Escape'),
+        map(() => TooltipState.forceClosed),
+      ),
+    );
+
+    merge(openEvent$, closeEvent$)
+      .pipe(
+        distinctUntilChanged(),
+        takeUntil(this.destroy$),
+        scan((acc, curr) => {
+          if (acc === TooltipState.forceOpen && curr !== TooltipState.forceClosed) {
+            return TooltipState.forceOpen;
+          }
+
+          return curr;
+        }),
+        tap((state) => {
+          if (state === TooltipState.open || state === TooltipState.forceOpen) {
+            this.show();
+          }
+
+          if (state === TooltipState.closed || state === TooltipState.forceClosed) {
+            this.hide();
+          }
+        }),
+        finalize(() => this.hide()),
+      )
+      .subscribe();
+  }
+
+  hostDisconnected() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  /** Public methods */
+  public show(): void {
+    this.isVisible$.next(true);
+    this.emitShow$.next();
+  }
+
+  public hide(): void {
+    this.isVisible$.next(false);
+    this.emitHide$.next();
+  }
+
+  /** Protected methods */
+
+  /** Private methods */
+}

libs/tooltip/src/lib/models/placement.enum.ts

@@ -0,0 +1,6 @@
+export const enum Placement {
+  top = 'top',
+  bottom = 'bottom',
+  left = 'left',
+  right = 'right',
+}

libs/tooltip/src/lib/styles/index.ts

@@ -0,0 +1,59 @@
+import { VariableHelper } from '@hijlkema-codes/internal/z-styles';
+
+import { css } from 'lit';
+
+export const basicStyles = css`
+  :host {
+    display: block;
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  :host([interactive][open]) {
+    pointer-events: auto;
+    background-color: var(--_tooltip--backdrop-color);
+    backdrop-filter: blur(2px);
+  }
+
+  div {
+    position: absolute;
+    top: calc(1px * var(--_pos-top, 0) + var(--_offset--top));
+    left: calc(1px * var(--_pos-left, 0) + var(--_offset--left));
+    display: none;
+  }
+
+  div[open] {
+    display: block;
+  }
+`;
+
+export const positioning = css`
+  [data-position='top'] {
+    --_offset--top: calc(-1px * var(--_tooltip--offset));
+    --_offset--left: 0px;
+  }
+  [data-position='right'] {
+    --_offset--top: 0px;
+    --_offset--left: calc(1px * var(--_tooltip--offset));
+  }
+  [data-position='bottom'] {
+    --_offset--top: calc(1px * var(--_tooltip--offset));
+    --_offset--left: 0px;
+  }
+  [data-position='left'] {
+    --_offset--top: 0px;
+    --_offset--left: calc(-1px * var(--_tooltip--offset));
+  }
+`;
+
+export const variables = css`
+  :host {
+    ${VariableHelper.fromProperty('--_tooltip--offset').withGroupModifier('tooltip').withVariableName('offset').withDefaultValue(0).toCss()}
+    ${VariableHelper.fromProperty('--_tooltip--backdrop-color')
+      .withVariableName('backdrop-color')
+      .withGroupModifier('tooltip')
+      .withDefaultValue('rgb(0 0 0 / 0.5)')
+      .toCss()}
+  }
+`;

libs/tooltip/src/lib/tooltip.component.stories.ts

@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+
+import { html } from 'lit';
+
+import { Placement } from './models/placement.enum';
+import './tooltip.component';
+import TooltipComponent from './tooltip.component';
+
+export default {
+  title: 'Atoms/Tooltip',
+  component: 'z-tooltip',
+  render: (args) => html`
+    <style>
+      p {
+        margin: 0;
+        background: #fff;
+        padding: 0.5rem;
+        border-radius: 0.25rem;
+        border: 1px solid #ccc;
+      }
+
+      h2 {
+        margin: 0;
+      }
+
+      :root {
+        --tooltip--offset: 16;
+      }
+    </style>
+
+    <h2 aria-describedby="op1" tabindex="0">Tooltip</h2>
+    <z-tooltip id="op1" ?interactive="${args.interactive}" preferred-placement="${args.preferredPlacement}">
+      <p>Tooltip Content</p>
+    </z-tooltip>
+  `,
+  args: {
+    interactive: false,
+    preferredPlacement: Placement.bottom,
+  },
+  argTypes: {
+    preferredPlacement: {
+      options: ['top', 'bottom', 'left', 'right'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<TooltipComponent>;
+
+type Story = StoryObj<TooltipComponent>;
+
+export const Primary: Story = {};
+
+export const Interactive: Story = {
+  args: {
+    interactive: true,
+  },
+};

libs/tooltip/src/lib/tooltip.component.ts

@@ -0,0 +1,87 @@
+import { DestroyController } from '@z-elements/_internal/controllers';
+import { asyncDirective } from '@z-elements/_internal/directives';
+
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { takeUntil, tap } from 'rxjs';
+
+import { PositionController } from './controllers/position.controller';
+import { VisibilityController } from './controllers/visibility.controller';
+import { Placement } from './models/placement.enum';
+import { basicStyles, positioning, variables } from './styles';
+
+@customElement('z-tooltip')
+export default class TooltipComponent extends LitElement {
+  /** Private variables */
+  private readonly _visibilityController = new VisibilityController(this);
+  private readonly _positionController = new PositionController(this);
+  private readonly _destroyController = new DestroyController(this);
+
+  /** Protected variables */
+
+  /** Public variables */
+  static override get styles() {
+    return [basicStyles, positioning, variables];
+  }
+
+  @property({ type: Boolean }) public interactive = false;
+  @property({ type: String, attribute: 'preferred-placement' }) public preferredPlacement: Placement = Placement.top;
+
+  @property({ type: Boolean, reflect: true }) public open = false;
+  @property({ type: String, reflect: true }) public override role = 'tooltip';
+  @property({ type: Number, reflect: true }) public override tabIndex = -1;
+
+  public get targetHost(): HTMLElement | null {
+    return document.querySelector<HTMLElement>(`[aria-describedby="${this.id}"]`);
+  }
+
+  @query('div[role="dialog"]')
+  public contentElement: HTMLDivElement | undefined;
+
+  /** constructor & lifecycle */
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this._visibilityController.hide();
+
+    this._visibilityController.isVisible
+      .pipe(
+        tap((isVisible: boolean) => {
+          this.open = isVisible;
+        }),
+        takeUntil(this._destroyController.destroy),
+      )
+      .subscribe();
+
+    this._visibilityController.show$
+      .pipe(
+        tap(() => {
+          this._positionController.update();
+        }),
+        takeUntil(this._destroyController.destroy),
+      )
+      .subscribe();
+  }
+
+  /** Public methods */
+
+  /** Protected methods */
+  protected override render(): unknown {
+    return html` <div
+      role="dialog"
+      ?open="${asyncDirective(this._visibilityController.isVisible)}"
+      data-position="${this._positionController.position}"
+      style="${styleMap({
+        '--_pos-top': this._positionController.top,
+        '--_pos-left': this._positionController.left,
+      })}"
+    >
+      <slot></slot>
+    </div>`;
+  }
+
+  /** Private methods */
+  // TODO(css): Styling api.
+}

libs/tooltip/src/lib/tooltip.spec.ts

@@ -0,0 +1,7 @@
+import { tooltip } from './tooltip.component';
+
+describe('tooltip', () => {
+  it('should work', () => {
+    expect(tooltip()).toEqual('tooltip');
+  });
+});

libs/tooltip/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": [
+      "vitest"
+    ]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
+    }
+  ]
+}

libs/tooltip/tsconfig.lib.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": [
+      "node"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "**/*.stories.ts",
+    "**/*.stories.js"
+  ]
+}

libs/tooltip/tsconfig.spec.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

libs/tooltip/tsconfig.storybook.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": [
+    "src/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.mdx",
+    ".storybook/*.js",
+    ".storybook/*.ts"
+  ]
+}

libs/tooltip/vite.config.ts

@@ -0,0 +1,24 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  cacheDir: '../../node_modules/.vite/tooltip',
+
+  plugins: [nxViteTsPaths()],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  test: {
+    globals: true,
+    cache: {
+      dir: '../../node_modules/.vitest',
+    },
+    environment: 'node',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+  },
+});

nx.json

@@ -4,17 +4,32 @@
     "default": {
       "runner": "nx/tasks-runners/default",
       "options": {
-        "cacheableOperations": ["build", "lint", "test", "e2e"]
+        "cacheableOperations": [
+          "build",
+          "lint",
+          "test",
+          "e2e",
+          "build-storybook"
+        ]
       }
     }
   },
   "targetDefaults": {
     "build": {
-      "dependsOn": ["^build"],
-      "inputs": ["production", "^production"]
+      "dependsOn": [
+        "^build"
+      ],
+      "inputs": [
+        "production",
+        "^production"
+      ]
     },
     "test": {
-      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"]
+      "inputs": [
+        "default",
+        "^production",
+        "{workspaceRoot}/jest.preset.js"
+      ]
     },
     "lint": {
       "inputs": [
@@ -22,10 +37,21 @@
         "{workspaceRoot}/.eslintrc.json",
         "{workspaceRoot}/.eslintignore"
       ]
+    },
+    "build-storybook": {
+      "inputs": [
+        "default",
+        "^production",
+        "{projectRoot}/.storybook/**/*",
+        "{projectRoot}/tsconfig.storybook.json"
+      ]
     }
   },
   "namedInputs": {
-    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "default": [
+      "{projectRoot}/**/*",
+      "sharedGlobals"
+    ],
     "production": [
       "default",
       "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
@@ -33,7 +59,10 @@
       "!{projectRoot}/.eslintrc.json",
       "!{projectRoot}/jest.config.[jt]s",
       "!{projectRoot}/src/test-setup.[jt]s",
-      "!{projectRoot}/test-setup.[jt]s"
+      "!{projectRoot}/test-setup.[jt]s",
+      "!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+      "!{projectRoot}/.storybook/**/*",
+      "!{projectRoot}/tsconfig.storybook.json"
     ],
     "sharedGlobals": []
   }

package.json

@@ -6,34 +6,49 @@
   "private": true,
   "dependencies": {
     "lit": "^2.8.0",
-    "tslib": "^2.3.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@nx/eslint-plugin": "16.6.0",
-    "@nx/jest": "16.6.0",
-    "@nx/js": "^16.6.0",
-    "@nx/linter": "16.6.0",
-    "@nx/vite": "^16.6.0",
-    "@nx/web": "^16.6.0",
-    "@nx/workspace": "16.6.0",
-    "@types/jest": "^29.4.0",
-    "@types/node": "18.7.1",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "@vitest/ui": "~0.32.0",
-    "eslint": "~8.15.0",
-    "eslint-config-prettier": "8.1.0",
-    "jest": "^29.4.1",
-    "jest-environment-node": "^29.4.1",
-    "nx": "16.6.0",
-    "prettier": "^2.6.2",
-    "ts-jest": "^29.1.0",
+    "@babel/plugin-proposal-decorators": "^7.22.10",
+    "@nx/eslint-plugin": "16.7.4",
+    "@nx/jest": "16.7.4",
+    "@nx/js": "16.7.4",
+    "@nx/linter": "16.7.4",
+    "@nx/storybook": "^16.7.4",
+    "@nx/vite": "16.7.4",
+    "@nx/web": "^16.7.4",
+    "@nx/workspace": "16.7.4",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/core-server": "^7.3.2",
+    "@storybook/jest": "~0.2.1",
+    "@storybook/test-runner": "^0.13.0",
+    "@storybook/testing-library": "~0.2.0",
+    "@storybook/web-components": "^7.3.2",
+    "@storybook/web-components-vite": "^7",
+    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
+    "@types/jest": "^29.5.4",
+    "@types/node": "20.5.6",
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
+    "@vitest/coverage-c8": "~0.32.0",
+    "@vitest/ui": "~0.34.3",
+    "eslint": "~8.47.0",
+    "eslint-config-prettier": "9.0.0",
+    "jest": "^29.6.4",
+    "jest-environment-node": "^29.6.4",
+    "nx": "16.7.4",
+    "prettier": "^3.0.2",
+    "rxjs": "^7.8.1",
+    "ts-jest": "^29.1.1",
     "ts-node": "10.9.1",
-    "typescript": "~5.1.3",
-    "verdaccio": "^5.0.4",
-    "vite": "~4.3.9",
-    "vite-plugin-dts": "~2.3.0",
-    "vitest": "~0.32.0"
+    "typescript": "~5.2.2",
+    "verdaccio": "^5.26.1",
+    "vite": "~4.4.9",
+    "vite-plugin-dts": "~3.5.2",
+    "vitest": "~0.34.3"
   },
   "nx": {
     "includedScripts": []

project.json

@@ -2,13 +2,6 @@
   "name": "@z-elements/source",
   "$schema": "node_modules/nx/schemas/project-schema.json",
   "targets": {
-    "local-registry": {
-      "executor": "@nx/js:verdaccio",
-      "options": {
-        "port": 4873,
-        "config": ".verdaccio/config.yml",
-        "storage": "tmp/local-registry/storage"
-      }
-    }
+
   }
 }

tsconfig.base.json

@@ -10,16 +10,42 @@
     "importHelpers": true,
     "target": "es2015",
     "module": "esnext",
-    "lib": ["es2020", "dom"],
+    "lib": [
+      "es2020",
+      "dom"
+    ],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@hijlkema-codes/z-accordion": ["libs/accordion/src/index.ts"],
       "@hijlkema-codes/internal/z-styles": [
         "libs/_internal/styles/src/index.ts"
+      ],
+      "@hijlkema-codes/z-accordion": [
+        "libs/accordion/src/index.ts"
+      ],
+      "@z-elements/_internal/controllers": [
+        "libs/_internal/controllers/src/index.ts"
+      ],
+      "@z-elements/_internal/directives": [
+        "libs/_internal/directives/src/index.ts"
+      ],
+      "@z-elements/container": [
+        "libs/container/src/index.ts"
+      ],
+      "@z-elements/panels/bottom-panel": [
+        "libs/panels/bottom-panel/src/index.ts"
+      ],
+      "@z-elements/panels/side-panel": [
+        "libs/panels/side-panel/src/index.ts"
+      ],
+      "@z-elements/tooltip": [
+        "libs/tooltip/src/index.ts"
       ]
     }
   },
-  "exclude": ["node_modules", "tmp"]
+  "exclude": [
+    "node_modules",
+    "tmp"
+  ]
 }