odontogram 0.0.1 → 0.1.1

package/dist/index.d.mts

@@ -0,0 +1,35 @@
+import * as lit from "lit";
+import { LitElement } from "lit";
+
+//#region src/og-tooth.d.ts
+interface ToothSurfaces {
+  vestibular: boolean;
+  distal: boolean;
+  palatine: boolean;
+  mesial: boolean;
+  occlusal: boolean;
+}
+declare class OgTooth extends LitElement {
+  toothId: string;
+  colorClick: string;
+  selections: ToothSurfaces;
+  private _toggle;
+  render(): lit.TemplateResult<1>;
+  static styles: lit.CSSResult;
+}
+//#endregion
+//#region src/og-odontogram.d.ts
+type PatientMode = 'adult' | 'baby' | 'old';
+declare class OgDontogram extends LitElement {
+  mode: PatientMode;
+  chartData: Record<string, ToothSurfaces>;
+  private teethState;
+  private layouts;
+  willUpdate(changedProperties: Map<string, any>): void;
+  private _updateState;
+  renderTooth(id: number): lit.TemplateResult<1>;
+  render(): lit.TemplateResult<1>;
+  static styles: lit.CSSResult;
+}
+//#endregion
+export { OgDontogram, OgTooth, PatientMode, ToothSurfaces };

package/dist/index.mjs

@@ -0,0 +1,297 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+//#region \0@oxc-project+runtime@0.114.0/helpers/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+//#endregion
+//#region src/og-tooth.ts
+let OgTooth = class OgTooth extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.toothId = "";
+		this.colorClick = "#ff6961";
+		this.selections = {
+			vestibular: false,
+			distal: false,
+			palatine: false,
+			mesial: false,
+			occlusal: false
+		};
+	}
+	_toggle(surface, clickFn, unclickFn) {
+		const isSelected = !this.selections[surface];
+		this.selections = {
+			...this.selections,
+			[surface]: isSelected
+		};
+		const eventName = isSelected ? clickFn : unclickFn;
+		this.dispatchEvent(new CustomEvent(eventName, {
+			detail: {
+				toothId: this.toothId,
+				surface,
+				state: isSelected
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		return html`
+      <div class="tooth-container">
+        <span class="label">${this.toothId}</span>
+        <div class="tooth-relative">
+          <div class="surface top ${this.selections.vestibular ? "selected" : ""}" 
+            @click=${() => this._toggle("vestibular", "vestibularC", "vestibularU")}></div>
+          
+          <div class="surface left ${this.selections.distal ? "selected" : ""}" 
+            @click=${() => this._toggle("distal", "distalC", "distalU")}></div>
+
+          <div class="surface bottom ${this.selections.palatine ? "selected" : ""}" 
+            @click=${() => this._toggle("palatine", "palatineC", "palatineU")}></div>
+
+          <div class="surface right ${this.selections.mesial ? "selected" : ""}" 
+            @click=${() => this._toggle("mesial", "mesialC", "mesialU")}></div>
+
+          <div class="surface center ${this.selections.occlusal ? "selected" : ""}" 
+            @click=${() => this._toggle("occlusal", "occlusalC", "occlusalU")}></div>
+        </div>
+      </div>
+    `;
+	}
+	static {
+		this.styles = css`
+    .tooth-container { display: flex; flex-direction: column; align-items: center; width: 50px; }
+    .label { font-size: 12px; margin-bottom: 5px; font-weight: bold; color: #333; }
+    .tooth-relative { position: relative; width: 44px; height: 44px; background: #eee; }
+    .surface {
+      position: absolute; width: 20px; height: 20px; outline: 2px solid #000;
+      background-color: #fff; cursor: pointer; box-sizing: border-box; transition: background-color 0.2s;
+    }
+    .selected { background-color: var(--click-color, #ff6961) !important; }
+    .top    { top: 0; left: 0; border-top-left-radius: 100%; }
+    .left   { bottom: 0; left: 0; border-bottom-left-radius: 100%; }
+    .bottom { bottom: 0; right: 0; border-bottom-right-radius: 100%; }
+    .right  { top: 0; right: 0; border-top-right-radius: 100%; }
+    .center { top: 25%; right: 25%; border-radius: 50%; z-index: 2; }
+  `;
+	}
+};
+__decorate([property({ type: String })], OgTooth.prototype, "toothId", void 0);
+__decorate([property({ type: String })], OgTooth.prototype, "colorClick", void 0);
+__decorate([property({ type: Object })], OgTooth.prototype, "selections", void 0);
+OgTooth = __decorate([customElement("og-tooth")], OgTooth);
+
+//#endregion
+//#region src/og-odontogram.ts
+let OgDontogram = class OgDontogram extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.mode = "adult";
+		this.chartData = {};
+		this.teethState = {};
+		this.layouts = {
+			adult: {
+				upperRight: [
+					18,
+					17,
+					16,
+					15,
+					14,
+					13,
+					12,
+					11
+				],
+				upperLeft: [
+					21,
+					22,
+					23,
+					24,
+					25,
+					26,
+					27,
+					28
+				],
+				lowerRight: [
+					48,
+					47,
+					46,
+					45,
+					44,
+					43,
+					42,
+					41
+				],
+				lowerLeft: [
+					31,
+					32,
+					33,
+					34,
+					35,
+					36,
+					37,
+					38
+				]
+			},
+			baby: {
+				upperRight: [
+					55,
+					54,
+					53,
+					52,
+					51
+				],
+				upperLeft: [
+					61,
+					62,
+					63,
+					64,
+					65
+				],
+				lowerRight: [
+					85,
+					84,
+					83,
+					82,
+					81
+				],
+				lowerLeft: [
+					71,
+					72,
+					73,
+					74,
+					75
+				]
+			},
+			old: {
+				upperRight: [
+					17,
+					16,
+					15,
+					14,
+					13,
+					12,
+					11
+				],
+				upperLeft: [
+					21,
+					22,
+					23,
+					24,
+					25,
+					26,
+					27
+				],
+				lowerRight: [
+					47,
+					46,
+					45,
+					44,
+					43,
+					42,
+					41
+				],
+				lowerLeft: [
+					31,
+					32,
+					33,
+					34,
+					35,
+					36,
+					37
+				]
+			}
+		};
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("chartData")) this.teethState = { ...this.chartData };
+	}
+	_updateState(id, region, value) {
+		const toothId = id.toString();
+		const newState = { ...this.teethState };
+		if (!newState[toothId]) newState[toothId] = {
+			vestibular: false,
+			distal: false,
+			palatine: false,
+			mesial: false,
+			occlusal: false
+		};
+		newState[toothId] = {
+			...newState[toothId],
+			[region]: value
+		};
+		this.teethState = newState;
+		this.dispatchEvent(new CustomEvent("odontogram-change", {
+			detail: {
+				data: this.teethState,
+				mode: this.mode
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	renderTooth(id) {
+		const state = this.teethState[id.toString()] || {
+			vestibular: false,
+			distal: false,
+			palatine: false,
+			mesial: false,
+			occlusal: false
+		};
+		return html`
+      <og-tooth 
+        .toothId=${id.toString()} 
+        .selections=${state}
+        @vestibularC=${() => this._updateState(id, "vestibular", true)}
+        @vestibularU=${() => this._updateState(id, "vestibular", false)}
+        @distalC=${() => this._updateState(id, "distal", true)}
+        @distalU=${() => this._updateState(id, "distal", false)}
+        @palatineC=${() => this._updateState(id, "palatine", true)}
+        @palatineU=${() => this._updateState(id, "palatine", false)}
+        @mesialC=${() => this._updateState(id, "mesial", true)}
+        @mesialU=${() => this._updateState(id, "mesial", false)}
+        @occlusalC=${() => this._updateState(id, "occlusal", true)}
+        @occlusalU=${() => this._updateState(id, "occlusal", false)}
+      ></og-tooth>
+    `;
+	}
+	render() {
+		const layout = this.layouts[this.mode] || this.layouts.adult;
+		return html`
+      <div class="odontogram-wrapper mode-${this.mode}">
+        <div class="arch">
+          <div class="quadrant">${layout.upperRight.map((id) => this.renderTooth(id))}</div>
+          <div class="quadrant">${layout.upperLeft.map((id) => this.renderTooth(id))}</div>
+        </div>
+        <div class="arch">
+          <div class="quadrant">${layout.lowerRight.map((id) => this.renderTooth(id))}</div>
+          <div class="quadrant">${layout.lowerLeft.map((id) => this.renderTooth(id))}</div>
+        </div>
+      </div>
+    `;
+	}
+	static {
+		this.styles = css`
+    :host { display: block; padding: 20px; }
+    .odontogram-wrapper { display: flex; flex-direction: column; gap: 40px; align-items: center; }
+    .arch { display: flex; gap: 40px; }
+    .quadrant { display: flex; gap: 4px; }
+    
+    /* You can add specific colors or spacing per mode if you want */
+    .mode-baby { gap: 20px; }
+    .mode-baby og-tooth { transform: scale(0.9); }
+  `;
+	}
+};
+__decorate([property({ type: String })], OgDontogram.prototype, "mode", void 0);
+__decorate([property({ type: Object })], OgDontogram.prototype, "chartData", void 0);
+__decorate([state()], OgDontogram.prototype, "teethState", void 0);
+OgDontogram = __decorate([customElement("og-dontogram")], OgDontogram);
+
+//#endregion
+export { OgDontogram, OgTooth };

package/package.json

@@ -1,120 +1,66 @@
 {
   "name": "odontogram",
-  "version": "0.0.1",
-  "description": "An Simple Web Component library for odontogram",
-  "author": "Pratik Sharma <sharma.pratik2016@gmail.com>",
+  "version": "0.1.1",
+  "description": "A lightweight, interactive web component odontogram built with Lit.",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.js",
+    "**/*.ts"
+  ],
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "keywords": [
     "odontogram",
     "react",
     "dental-chart"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/biomathcode/odontogram"
   },
-  "main": "dist/index.js",
   "type": "module",
   "scripts": {
-    "analyze": "cem analyze",
-    "analyze:dev": "cem analyze --watch",
-    "clean": "git clean -fqdx",
-    "dev": "npm run build && concurrently -k -r \"npm run analyze:dev\" \"npm run build:watch\" \"npm run storybook\"",
-    "test": "web-test-runner --group default",
-    "build": "tsc && npm run analyze && npm run build:kitchen-sink",
-    "build:cdn": "npx cross-env BUILD_TARGET=cdn vite build && npm run analyze",
-    "build:html": "npx cross-env BUILD_TARGET=html vite build",
-    "build:react": "npx cross-env BUILD_TARGET=react vite build && npx rimraf -rf ./public/react/html",
-    "build:kitchen-sink": "npx rimraf ./public && npm run build:cdn && npm run build:html && npm run build:react",
-    "build:watch": "concurrently -k -r \"tsc --watch\" \"npx cross-env BUILD_TARGET=cdn vite build --watch\"",
-    "new": "plop",
-    "deploy": "npm run build && npm publish",
-    "format": "npm run format:eslint && npm run format:prettier",
-    "format:eslint": "npx eslint --fix",
-    "format:prettier": "npx prettier . --write",
-    "lint": "wctools validate && npm run lint:eslint && npm run lint:prettier",
-    "lint:eslint": "npx eslint",
-    "lint:prettier": "npx prettier . --check",
-    "prepare": "husky && npx playwright install-deps",
+    "dev": "vite",
+    "build": "tsdown",
+    "build:vite": "tsc && vite build",
+    "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "code-bubble": "^1.3.3",
-    "lit": "^3.2.1",
-    "wc-dox": "^1.3.5"
+    "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@eslint/js": "^9.16.0",
-    "@eslint/json": "^0.8.0",
-    "@eslint/markdown": "^6.2.1",
-    "@open-wc/testing": "^4.0.0",
-    "@playwright/test": "^1.46.1",
-    "@storybook/addon-a11y": "^10.1.11",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-links": "^10.1.11",
-    "@storybook/web-components": "^10.1.11",
-    "@storybook/web-components-vite": "^10.1.11",
-    "@types/mocha": "^10.0.2",
-    "@wc-toolkit/cem-inheritance": "^1.2.2",
-    "@wc-toolkit/cem-sorter": "^1.0.1",
-    "@wc-toolkit/cem-validator": "^1.0.3",
-    "@wc-toolkit/jsdoc-tags": "^1.1.0",
-    "@wc-toolkit/jsx-types": "^1.5.2",
-    "@wc-toolkit/lazy-loader": "^1.0.1",
-    "@wc-toolkit/module-path-resolver": "^1.0.0",
-    "@wc-toolkit/react-wrappers": "^1.1.1",
-    "@wc-toolkit/storybook-helpers": "^10.0.0",
-    "@wc-toolkit/type-parser": "^1.2.0",
-    "@wc-toolkit/wctools": "^0.0.18",
-    "@web/dev-server-esbuild": "^1.0.4",
-    "@web/test-runner": "^0.20.2",
-    "@web/test-runner-commands": "^0.9.0",
-    "@web/test-runner-playwright": "^0.11.1",
-    "concurrently": "^9.1.0",
-    "custom-element-svelte-integration": "^1.1.2",
-    "custom-element-vuejs-integration": "^1.3.3",
-    "custom-elements-manifest-deprecator": "^1.1.1",
-    "eslint": "^9.16.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-lit": "^1.15.0",
-    "eslint-plugin-lit-a11y": "^5.1.1",
-    "eslint-plugin-require-extensions": "^0.1.3",
-    "eslint-plugin-storybook": "^10.1.11",
-    "glob": "^11.0.0",
-    "globals": "^15.13.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
-    "plop": "^4.0.1",
-    "prettier": "^3.3.2",
-    "rollup-plugin-summary": "^3.0.0",
-    "storybook": "^10.1.11",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.17.0",
-    "vite": "^7.3.0",
-    "vite-plugin-dts": "^4.5.4"
-  },
-  "lint-staged": {
-    "*.js": "eslint --cache --fix",
-    "*.format:prettier": "prettier --write"
-  },
-  "files": [
-    "cdn",
-    "eslint",
-    "dist",
-    "react",
-    "types",
-    "index.d.ts",
-    "index.js",
-    "package.json",
-    "custom-elements.json",
-    "vscode.css-custom-data.json",
-    "vscode.html-custom-data.json",
-    "web-types.json"
-  ],
-  "customElements": "custom-elements.json"
+    "@chromatic-com/storybook": "^5.0.1",
+    "@storybook/addon-a11y": "^10.2.13",
+    "@storybook/addon-docs": "^10.2.13",
+    "@storybook/addon-vitest": "^10.2.13",
+    "@storybook/web-components-vite": "^10.2.13",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "playwright": "^1.58.2",
+    "storybook": "^10.2.13",
+    "tsdown": "0.21.0-beta.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
+  }
 }

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './og-tooth';
+export * from './og-odontogram';

package/src/og-odontogram.ts

@@ -0,0 +1,109 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import type { ToothSurfaces } from './og-tooth';
+import './og-tooth';
+
+export type PatientMode = 'adult' | 'baby' | 'old';
+
+@customElement('og-dontogram')
+export class OgDontogram extends LitElement {
+    @property({ type: String }) mode: PatientMode = 'adult';
+    @property({ type: Object }) chartData: Record<string, ToothSurfaces> = {};
+    @state() private teethState: Record<string, ToothSurfaces> = {};
+
+    // FDI Tooth Layouts
+    private layouts = {
+        adult: {
+            upperRight: [18, 17, 16, 15, 14, 13, 12, 11],
+            upperLeft: [21, 22, 23, 24, 25, 26, 27, 28],
+            lowerRight: [48, 47, 46, 45, 44, 43, 42, 41],
+            lowerLeft: [31, 32, 33, 34, 35, 36, 37, 38]
+        },
+        baby: {
+            upperRight: [55, 54, 53, 52, 51],
+            upperLeft: [61, 62, 63, 64, 65],
+            lowerRight: [85, 84, 83, 82, 81],
+            lowerLeft: [71, 72, 73, 74, 75]
+        },
+        old: {
+            // Typically adult layout, but maybe we exclude wisdom teeth (18, 28, 38, 48)
+            upperRight: [17, 16, 15, 14, 13, 12, 11],
+            upperLeft: [21, 22, 23, 24, 25, 26, 27],
+            lowerRight: [47, 46, 45, 44, 43, 42, 41],
+            lowerLeft: [31, 32, 33, 34, 35, 36, 37]
+        }
+    };
+
+    willUpdate(changedProperties: Map<string, any>) {
+        if (changedProperties.has('chartData')) {
+            this.teethState = { ...this.chartData };
+        }
+    }
+
+    private _updateState(id: number, region: keyof ToothSurfaces, value: boolean) {
+        const toothId = id.toString();
+        const newState = { ...this.teethState };
+        if (!newState[toothId]) {
+            newState[toothId] = { vestibular: false, distal: false, palatine: false, mesial: false, occlusal: false };
+        }
+        newState[toothId] = { ...newState[toothId], [region]: value };
+        this.teethState = newState;
+
+        this.dispatchEvent(new CustomEvent('odontogram-change', {
+            detail: { data: this.teethState, mode: this.mode },
+            bubbles: true,
+            composed: true
+        }));
+    }
+
+    renderTooth(id: number) {
+        const state = this.teethState[id.toString()] || {
+            vestibular: false, distal: false, palatine: false, mesial: false, occlusal: false
+        };
+
+        return html`
+      <og-tooth 
+        .toothId=${id.toString()} 
+        .selections=${state}
+        @vestibularC=${() => this._updateState(id, 'vestibular', true)}
+        @vestibularU=${() => this._updateState(id, 'vestibular', false)}
+        @distalC=${() => this._updateState(id, 'distal', true)}
+        @distalU=${() => this._updateState(id, 'distal', false)}
+        @palatineC=${() => this._updateState(id, 'palatine', true)}
+        @palatineU=${() => this._updateState(id, 'palatine', false)}
+        @mesialC=${() => this._updateState(id, 'mesial', true)}
+        @mesialU=${() => this._updateState(id, 'mesial', false)}
+        @occlusalC=${() => this._updateState(id, 'occlusal', true)}
+        @occlusalU=${() => this._updateState(id, 'occlusal', false)}
+      ></og-tooth>
+    `;
+    }
+
+    render() {
+        const layout = this.layouts[this.mode] || this.layouts.adult;
+
+        return html`
+      <div class="odontogram-wrapper mode-${this.mode}">
+        <div class="arch">
+          <div class="quadrant">${layout.upperRight.map(id => this.renderTooth(id))}</div>
+          <div class="quadrant">${layout.upperLeft.map(id => this.renderTooth(id))}</div>
+        </div>
+        <div class="arch">
+          <div class="quadrant">${layout.lowerRight.map(id => this.renderTooth(id))}</div>
+          <div class="quadrant">${layout.lowerLeft.map(id => this.renderTooth(id))}</div>
+        </div>
+      </div>
+    `;
+    }
+
+    static styles = css`
+    :host { display: block; padding: 20px; }
+    .odontogram-wrapper { display: flex; flex-direction: column; gap: 40px; align-items: center; }
+    .arch { display: flex; gap: 40px; }
+    .quadrant { display: flex; gap: 4px; }
+    
+    /* You can add specific colors or spacing per mode if you want */
+    .mode-baby { gap: 20px; }
+    .mode-baby og-tooth { transform: scale(0.9); }
+  `;
+}

package/src/og-tooth.ts

@@ -0,0 +1,76 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+// Shared Interface for Type Safety
+export interface ToothSurfaces {
+    vestibular: boolean;
+    distal: boolean;
+    palatine: boolean;
+    mesial: boolean;
+    occlusal: boolean;
+}
+
+@customElement('og-tooth')
+export class OgTooth extends LitElement {
+    @property({ type: String }) toothId = '';
+    @property({ type: String }) colorClick = '#ff6961';
+
+    @property({ type: Object })
+    selections: ToothSurfaces = {
+        vestibular: false, distal: false, palatine: false, mesial: false, occlusal: false
+    };
+
+    private _toggle(surface: keyof ToothSurfaces, clickFn: string, unclickFn: string) {
+        const isSelected = !this.selections[surface];
+
+        // Create new object for Lit reactivity
+        this.selections = { ...this.selections, [surface]: isSelected };
+
+        const eventName = isSelected ? clickFn : unclickFn;
+        this.dispatchEvent(new CustomEvent(eventName, {
+            detail: { toothId: this.toothId, surface, state: isSelected },
+            bubbles: true,
+            composed: true
+        }));
+    }
+
+    render() {
+        return html`
+      <div class="tooth-container">
+        <span class="label">${this.toothId}</span>
+        <div class="tooth-relative">
+          <div class="surface top ${this.selections.vestibular ? 'selected' : ''}" 
+            @click=${() => this._toggle('vestibular', 'vestibularC', 'vestibularU')}></div>
+          
+          <div class="surface left ${this.selections.distal ? 'selected' : ''}" 
+            @click=${() => this._toggle('distal', 'distalC', 'distalU')}></div>
+
+          <div class="surface bottom ${this.selections.palatine ? 'selected' : ''}" 
+            @click=${() => this._toggle('palatine', 'palatineC', 'palatineU')}></div>
+
+          <div class="surface right ${this.selections.mesial ? 'selected' : ''}" 
+            @click=${() => this._toggle('mesial', 'mesialC', 'mesialU')}></div>
+
+          <div class="surface center ${this.selections.occlusal ? 'selected' : ''}" 
+            @click=${() => this._toggle('occlusal', 'occlusalC', 'occlusalU')}></div>
+        </div>
+      </div>
+    `;
+    }
+
+    static styles = css`
+    .tooth-container { display: flex; flex-direction: column; align-items: center; width: 50px; }
+    .label { font-size: 12px; margin-bottom: 5px; font-weight: bold; color: #333; }
+    .tooth-relative { position: relative; width: 44px; height: 44px; background: #eee; }
+    .surface {
+      position: absolute; width: 20px; height: 20px; outline: 2px solid #000;
+      background-color: #fff; cursor: pointer; box-sizing: border-box; transition: background-color 0.2s;
+    }
+    .selected { background-color: var(--click-color, #ff6961) !important; }
+    .top    { top: 0; left: 0; border-top-left-radius: 100%; }
+    .left   { bottom: 0; left: 0; border-bottom-left-radius: 100%; }
+    .bottom { bottom: 0; right: 0; border-bottom-right-radius: 100%; }
+    .right  { top: 0; right: 0; border-top-right-radius: 100%; }
+    .center { top: 25%; right: 25%; border-radius: 50%; z-index: 2; }
+  `;
+}