@jpahd/kalendus 0.1.7 → 0.7.0

package/dist/themes/midnight.css

@@ -0,0 +1,110 @@
+/*
+ * Kalendus — Midnight Theme
+ *
+ * Dark mode. Deep charcoal background, soft glowing accents,
+ * muted separators. Easy on the eyes.
+ *
+ * Usage:
+ *   import '@jpahd/kalendus/themes/midnight.css';
+ */
+
+lms-calendar {
+    /* ── Base text color — must be explicit for dark themes since
+       the unstyled base uses `color: inherit` from the page ──── */
+    color: rgba(255, 255, 255, 0.85);
+
+    /* ── Colors ─────────────────────────────────── */
+    --background-color: #1a1b2e;
+    --primary-color: #818cf8;
+    --separator-light: rgba(255, 255, 255, 0.08);
+    --separator-mid: rgba(255, 255, 255, 0.2);
+    --separator-dark: rgba(255, 255, 255, 0.85);
+
+    /* ── Typography ─────────────────────────────── */
+    --system-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
+    --monospace-ui: 'JetBrains Mono', 'Fira Code', monospace;
+    --header-text-color: rgba(255, 255, 255, 0.5);
+    --indicator-color: var(--primary-color);
+    --indicator-font-weight: 600;
+    --day-label-font-weight: 500;
+    --day-label-number-font-weight: 600;
+    --menu-item-font-weight: 500;
+    --menu-title-font-weight: 600;
+    --entry-title-weight: 500;
+    --entry-time-opacity: 0.7;
+    --title-column-weight: 500;
+    --month-label-font-weight: 600;
+    --year-weekday-font-weight: 500;
+
+    /* ── Border Radius ──────────────────────────── */
+    --border-radius-sm: 6px;
+    --border-radius-md: 8px;
+    --border-radius-lg: 12px;
+    --entry-border-radius: 4px;
+    --month-indicator-border-radius: 1em;
+    --year-day-cell-border-radius: 50%;
+    --float-text-border-radius: 4px;
+
+    /* ── Shadows ─────────────────────────────────── */
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
+    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
+    --shadow-hv: 0 8px 24px rgba(0, 0, 0, 0.4);
+    --active-indicator-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    --float-text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+
+    /* ── Transitions ────────────────────────────── */
+    --transition-speed: 0.2s;
+
+    /* ── Hover / Focus / Active ─────────────────── */
+    --hover-bg: rgba(255, 255, 255, 0.06);
+    --focus-bg: rgba(255, 255, 255, 0.08);
+    --peek-active-bg: rgba(255, 255, 255, 0.12);
+    --current-day-hover-opacity: 0.85;
+    --export-hover-opacity: 0.7;
+
+    /* ── Entry ───────────────────────────────────── */
+    --entry-background-color: rgba(255, 255, 255, 0.06);
+    --entry-color: var(--primary-color);
+    --entry-highlight-color: rgba(129, 140, 248, 0.1);
+    --entry-focus-color: var(--primary-color);
+
+    /* ── Header ──────────────────────────────────── */
+    --context-bg: rgba(255, 255, 255, 0.06);
+    --active-indicator-bg: rgba(255, 255, 255, 0.1);
+
+    /* ── Month ───────────────────────────────────── */
+    --indicator-backdrop-filter: blur(10px);
+
+    /* ── Week ────────────────────────────────────── */
+    --multi-day-separator: 2px solid rgba(255, 255, 255, 0.1);
+
+    /* ── Year ────────────────────────────────────── */
+    --year-month-label-hover-color: var(--primary-color);
+    --year-cw-color: rgba(255, 255, 255, 0.3);
+    --cw-hover-color: var(--primary-color);
+    --cw-hover-bg: rgba(255, 255, 255, 0.06);
+    --current-day-bg: var(--primary-color);
+    --current-day-color: #1a1b2e;
+    --current-day-font-weight: 600;
+    --current-dot-bg: #1a1b2e;
+    --year-heatmap-4-text: #1a1b2e;
+    --year-heatmap-1: rgba(129, 140, 248, 0.12);
+    --year-heatmap-2: rgba(129, 140, 248, 0.25);
+    --year-heatmap-3: rgba(129, 140, 248, 0.4);
+    --year-heatmap-4: rgba(129, 140, 248, 0.6);
+    --year-dot-color: var(--primary-color);
+
+    /* ── Float Text ──────────────────────────────── */
+    --float-text-bg: #252640;
+
+    /* ── Hour indicator ──────────────────────────── */
+    --hour-indicator-color: rgba(255, 255, 255, 0.35);
+
+    /* ── Month view ──────────────────────────────── */
+    --entry-month-text-color: rgba(255, 255, 255, 0.7);
+
+    /* ── Menu ────────────────────────────────────── */
+    --menu-transform-origin: scale(0.96);
+    --menu-transform-active: scale(1);
+}

package/dist/themes/soft.css

@@ -0,0 +1,97 @@
+/*
+ * Kalendus — Soft Theme
+ *
+ * Pastel palette, generous radii, gentle shadows and transitions.
+ * Warm and approachable.
+ *
+ * Usage:
+ *   import '@jpahd/kalendus/themes/soft.css';
+ */
+
+lms-calendar {
+    /* ── Colors ─────────────────────────────────── */
+    --background-color: #fefcfb;
+    --primary-color: #7c6beb;
+    --separator-light: rgba(124, 107, 235, 0.1);
+    --separator-mid: rgba(124, 107, 235, 0.25);
+    --separator-dark: #4a4458;
+
+    /* ── Typography ─────────────────────────────── */
+    --system-ui: 'Nunito', 'Segoe UI', system-ui, sans-serif;
+    --monospace-ui: 'Fira Code', 'Cascadia Code', monospace;
+    --header-text-color: #8b7faa;
+    --indicator-color: var(--primary-color);
+    --indicator-font-weight: 600;
+    --day-label-font-weight: 500;
+    --day-label-number-font-weight: 600;
+    --menu-item-font-weight: 500;
+    --menu-title-font-weight: 600;
+    --entry-title-weight: 500;
+    --entry-time-opacity: 0.7;
+    --title-column-weight: 500;
+    --month-label-font-weight: 600;
+    --year-weekday-font-weight: 500;
+
+    /* ── Border Radius ──────────────────────────── */
+    --border-radius-sm: 10px;
+    --border-radius-md: 14px;
+    --border-radius-lg: 20px;
+    --entry-border-radius: 8px;
+    --month-indicator-border-radius: 1.25em;
+    --year-day-cell-border-radius: 50%;
+    --float-text-border-radius: 8px;
+
+    /* ── Shadows ─────────────────────────────────── */
+    --shadow-sm: 0 1px 3px rgba(124, 107, 235, 0.08);
+    --shadow-md: 0 2px 6px rgba(124, 107, 235, 0.1);
+    --shadow-lg: 0 4px 16px rgba(124, 107, 235, 0.12);
+    --shadow-hv: 0 6px 20px rgba(124, 107, 235, 0.1);
+    --active-indicator-shadow: 0 1px 4px rgba(124, 107, 235, 0.12);
+    --float-text-shadow: 0 2px 8px rgba(124, 107, 235, 0.12);
+
+    /* ── Transitions ────────────────────────────── */
+    --transition-speed: 0.25s;
+
+    /* ── Hover / Focus / Active ─────────────────── */
+    --hover-bg: rgba(124, 107, 235, 0.06);
+    --focus-bg: rgba(124, 107, 235, 0.08);
+    --peek-active-bg: rgba(124, 107, 235, 0.12);
+    --current-day-hover-opacity: 0.9;
+    --export-hover-opacity: 0.75;
+
+    /* ── Entry ───────────────────────────────────── */
+    --entry-background-color: var(--background-color);
+    --entry-color: var(--primary-color);
+    --entry-highlight-color: rgba(124, 107, 235, 0.06);
+
+    /* ── Header ──────────────────────────────────── */
+    --context-bg: rgba(124, 107, 235, 0.06);
+    --active-indicator-bg: var(--background-color);
+
+    /* ── Month ───────────────────────────────────── */
+    --indicator-backdrop-filter: blur(12px);
+
+    /* ── Week ────────────────────────────────────── */
+    --multi-day-separator: 2px solid rgba(255, 255, 255, 0.5);
+
+    /* ── Year ────────────────────────────────────── */
+    --year-month-label-hover-color: var(--primary-color);
+    --cw-hover-color: var(--primary-color);
+    --cw-hover-bg: rgba(124, 107, 235, 0.06);
+    --current-day-bg: var(--primary-color);
+    --current-day-color: #fff;
+    --current-day-font-weight: 600;
+    --current-dot-bg: rgba(255, 255, 255, 0.9);
+    --year-heatmap-4-text: #fff;
+    --year-heatmap-1: rgba(124, 107, 235, 0.1);
+    --year-heatmap-2: rgba(124, 107, 235, 0.25);
+    --year-heatmap-3: rgba(124, 107, 235, 0.4);
+    --year-heatmap-4: rgba(124, 107, 235, 0.6);
+
+    /* ── Float Text ──────────────────────────────── */
+    --float-text-bg: rgba(254, 252, 251, 0.97);
+
+    /* ── Menu ────────────────────────────────────── */
+    --menu-transform-origin: scale(0.96);
+    --menu-transform-active: scale(1);
+}

package/package.json

@@ -1,125 +1,133 @@
 {
-    "name": "@jpahd/kalendus",
-    "version": "0.1.7",
-    "description": "A sophisticated, responsive calendar web component built with Lit 3.x and TypeScript.",
-    "keywords": [
-        "calendar",
-        "calendar-component",
-        "lit",
-        "lit-element",
-        "typescript",
-        "web-components"
-    ],
-    "homepage": "https://github.com/pders01/kalendus",
-    "bugs": {
-        "url": "https://github.com/pders01/kalendus/issues"
+  "name": "@jpahd/kalendus",
+  "version": "0.7.0",
+  "description": "A sophisticated, responsive calendar web component built with Lit 3.x and TypeScript.",
+  "keywords": [
+    "calendar",
+    "calendar-component",
+    "lit",
+    "lit-element",
+    "typescript",
+    "web-components"
+  ],
+  "homepage": "https://github.com/pders01/kalendus",
+  "bugs": {
+    "url": "https://github.com/pders01/kalendus/issues"
+  },
+  "license": "MIT",
+  "author": "Paul Derscheid <paul.derscheid@lmscloud.de>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pders01/kalendus.git"
+  },
+  "files": [
+    "dist",
+    "custom-elements.json"
+  ],
+  "type": "module",
+  "sideEffects": true,
+  "main": "./dist/kalendus.js",
+  "module": "./dist/kalendus.js",
+  "types": "./dist/lms-calendar.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/lms-calendar.d.ts",
+      "import": "./dist/kalendus.js",
+      "default": "./dist/kalendus.js"
     },
-    "license": "MIT",
-    "author": "Paul Derscheid <paul.derscheid@lmscloud.de>",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/pders01/kalendus.git"
-    },
-    "files": [
-        "dist",
-        "custom-elements.json"
-    ],
-    "type": "module",
-    "sideEffects": true,
-    "main": "./dist/kalendus.js",
-    "module": "./dist/kalendus.js",
-    "types": "./dist/lms-calendar.d.ts",
-    "exports": {
-        ".": {
-            "types": "./dist/lms-calendar.d.ts",
-            "import": "./dist/kalendus.js",
-            "default": "./dist/kalendus.js"
-        },
-        "./package.json": "./package.json"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "scripts": {
-        "build": "vite build && tsc --project tsconfig.build.json",
-        "build:iife": "vite build --config vite.config.iife.ts",
-        "build:all": "pnpm run build && pnpm run build:iife",
-        "build:watch": "vite build --watch",
-        "clean": "rimraf dist",
-        "lint": "npm run lint:lit-analyzer && npm run lint:oxlint",
-        "lint:oxlint": "oxlint src/",
-        "lint:lit-analyzer": "lit-analyzer",
-        "format": "oxfmt --write 'src/**/*.{ts,js}' '*.json' '*.md' '.storybook/**/*.ts'",
-        "format:check": "oxfmt --check 'src/**/*.{ts,js}' '*.json' '*.md' '.storybook/**/*.ts'",
-        "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\" --exclude \"src/lib/debug/**\"",
-        "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\" --exclude \"src/lib/debug/**\" --watch",
-        "checksize": "cat ./dist/kalendus.js | gzip -9 | wc -c",
-        "prepublishOnly": "npm run clean && npm run build && npm run test && npm run lint && npm run analyze",
-        "test": "NODE_OPTIONS=--experimental-vm-modules mocha",
-        "test:watch": "NODE_OPTIONS=--experimental-vm-modules mocha --watch",
-        "test:components": "web-test-runner",
-        "test:components:watch": "web-test-runner --watch",
-        "test:components:coverage": "web-test-runner --coverage",
-        "storybook": "storybook dev -p 6006",
-        "build-storybook": "storybook build",
-        "test-storybook": "vitest --project=storybook --run",
-        "test:e2e": "playwright test",
-        "i18n:extract": "lit-localize extract",
-        "i18n:build": "lit-localize build",
-        "demo:gif": "node scripts/record-demo-gif.mjs"
-    },
-    "dependencies": {
-        "@lit-labs/observers": "^2.1.0"
-    },
-    "devDependencies": {
-        "@11ty/eleventy": "^3.1.2",
-        "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
-        "@custom-elements-manifest/analyzer": "^0.11.0",
-        "@lit/localize": "^0.12.2",
-        "@lit/localize-tools": "^0.8.1",
-        "@open-wc/testing": "^4.0.0",
-        "@remcovaes/web-test-runner-vite-plugin": "^1.4.0",
-        "@storybook/addon-docs": "^10.2.13",
-        "@storybook/addon-vitest": "^10.2.13",
-        "@storybook/web-components": "10.2.13",
-        "@storybook/web-components-vite": "^10.2.13",
-        "@types/chai": "^5.2.3",
-        "@types/luxon": "^3.7.1",
-        "@types/mocha": "^10.0.10",
-        "@vitest/browser-playwright": "^4.0.18",
-        "@vitest/coverage-v8": "^4.0.18",
-        "@web/dev-server": "^0.4.6",
-        "@web/dev-server-esbuild": "^1.0.5",
-        "@web/dev-server-legacy": "^2.1.1",
-        "@web/rollup-plugin-html": "^3.1.0",
-        "@web/test-runner": "^0.20.2",
-        "@web/test-runner-playwright": "^0.11.1",
-        "@webcomponents/webcomponentsjs": "^2.8.0",
-        "chai": "^6.2.2",
-        "lit": "^3.3.2",
-        "lit-analyzer": "^2.0.3",
-        "luxon": "^3.7.2",
-        "mocha": "^11.7.5",
-        "oxfmt": "0.35.0",
-        "oxlint": "1.50.0",
-        "playwright": "^1.58.2",
-        "remeda": "^2.33.6",
-        "rimraf": "^6.1.3",
-        "rolldown": "1.0.0-rc.6",
-        "storybook": "^10.2.13",
-        "ts-ics": "^2.4.1",
-        "ts-node": "^10.9.2",
-        "ts-pattern": "^5.9.0",
-        "tslib": "^2.8.1",
-        "typescript": "^5.9.3",
-        "vite": "^7.3.1",
-        "vite-plugin-minify": "^2.1.0",
-        "vite-plugin-static-copy": "^3.2.0",
-        "vitest": "^4.0.18"
-    },
-    "peerDependencies": {
-        "lit": "^3.0.0",
-        "luxon": "^3.0.0"
-    },
-    "customElements": "custom-elements.json"
-}
+    "./themes/default.css": "./dist/themes/default.css",
+    "./themes/ink.css": "./dist/themes/ink.css",
+    "./themes/soft.css": "./dist/themes/soft.css",
+    "./themes/brutalist.css": "./dist/themes/brutalist.css",
+    "./themes/midnight.css": "./dist/themes/midnight.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@lit-labs/observers": "^2.1.0"
+  },
+  "devDependencies": {
+    "@11ty/eleventy": "^3.1.2",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@lit/localize": "^0.12.2",
+    "@lit/localize-tools": "^0.8.1",
+    "@open-wc/testing": "^4.0.0",
+    "@remcovaes/web-test-runner-vite-plugin": "^1.4.0",
+    "@storybook/addon-docs": "^10.2.13",
+    "@storybook/addon-vitest": "^10.2.13",
+    "@storybook/web-components": "10.2.13",
+    "@storybook/web-components-vite": "^10.2.13",
+    "@types/chai": "^5.2.3",
+    "@types/luxon": "^3.7.1",
+    "@types/mocha": "^10.0.10",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@web/dev-server": "^0.4.6",
+    "@web/dev-server-esbuild": "^1.0.5",
+    "@web/dev-server-legacy": "^2.1.1",
+    "@web/rollup-plugin-html": "^3.1.0",
+    "@web/test-runner": "^0.20.2",
+    "@web/test-runner-playwright": "^0.11.1",
+    "@webcomponents/webcomponentsjs": "^2.8.0",
+    "chai": "^6.2.2",
+    "lit": "^3.3.2",
+    "lit-analyzer": "^2.0.3",
+    "luxon": "^3.7.2",
+    "mocha": "^11.7.5",
+    "oxfmt": "0.35.0",
+    "oxlint": "1.50.0",
+    "playwright": "^1.58.2",
+    "remeda": "^2.33.6",
+    "rimraf": "^6.1.3",
+    "rolldown": "1.0.0-rc.6",
+    "storybook": "^10.2.13",
+    "ts-ics": "^2.4.1",
+    "ts-node": "^10.9.2",
+    "ts-pattern": "^5.9.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-minify": "^2.1.0",
+    "vite-plugin-static-copy": "^3.2.0",
+    "vitest": "^4.0.18"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "luxon": "^3.0.0"
+  },
+  "customElements": "custom-elements.json",
+  "scripts": {
+    "build": "vite build && tsc --project tsconfig.build.json",
+    "build:iife": "vite build --config vite.config.iife.ts",
+    "build:all": "pnpm run build && pnpm run build:iife",
+    "build:watch": "vite build --watch",
+    "clean": "rimraf dist",
+    "lint": "npm run lint:lit-analyzer && npm run lint:oxlint",
+    "lint:oxlint": "oxlint src/",
+    "lint:lit-analyzer": "lit-analyzer",
+    "format": "oxfmt --write 'src/**/*.{ts,js}' '*.json' '*.md' '.storybook/**/*.ts'",
+    "format:check": "oxfmt --check 'src/**/*.{ts,js}' '*.json' '*.md' '.storybook/**/*.ts'",
+    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\" --exclude \"src/lib/debug/**\"",
+    "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\" --exclude \"src/lib/debug/**\" --watch",
+    "checksize": "cat ./dist/kalendus.js | gzip -9 | wc -c",
+    "test": "NODE_OPTIONS=--experimental-vm-modules mocha",
+    "test:watch": "NODE_OPTIONS=--experimental-vm-modules mocha --watch",
+    "test:components": "web-test-runner",
+    "test:components:watch": "web-test-runner --watch",
+    "test:components:coverage": "web-test-runner --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test-storybook": "vitest --project=storybook --run",
+    "test:e2e": "playwright test",
+    "i18n:extract": "lit-localize extract",
+    "i18n:build": "lit-localize build",
+    "demo:gif": "node scripts/record-demo-gif.mjs",
+    "docs:sync": "node scripts/sync-docs.mjs",
+    "docs:sync:check": "node scripts/sync-docs.mjs --check",
+    "docs:build": "node scripts/sync-docs.mjs && eleventy",
+    "docs:serve": "eleventy --serve"
+  }
+}