pickit-color 1.0.0

package/dist/esm/tsconfig.esm.tsbuildinfo

@@ -0,0 +1 @@
+{"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2016.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","../../node_modules/typescript/lib/lib.es2017.date.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/typescript/lib/lib.decorators.d.ts","../../node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../src/colorpicker.d.ts","../../src/index.ts","../../node_modules/@types/node/globals.d.ts","../../node_modules/@types/node/async_hooks.d.ts","../../node_modules/@types/node/buffer.d.ts","../../node_modules/@types/node/child_process.d.ts","../../node_modules/@types/node/cluster.d.ts","../../node_modules/@types/node/console.d.ts","../../node_modules/@types/node/constants.d.ts","../../node_modules/@types/node/crypto.d.ts","../../node_modules/@types/node/dgram.d.ts","../../node_modules/@types/node/dns.d.ts","../../node_modules/@types/node/domain.d.ts","../../node_modules/@types/node/events.d.ts","../../node_modules/@types/node/fs.d.ts","../../node_modules/@types/node/fs/promises.d.ts","../../node_modules/@types/node/http.d.ts","../../node_modules/@types/node/http2.d.ts","../../node_modules/@types/node/https.d.ts","../../node_modules/@types/node/inspector.d.ts","../../node_modules/@types/node/module.d.ts","../../node_modules/@types/node/net.d.ts","../../node_modules/@types/node/os.d.ts","../../node_modules/@types/node/path.d.ts","../../node_modules/@types/node/perf_hooks.d.ts","../../node_modules/@types/node/process.d.ts","../../node_modules/@types/node/punycode.d.ts","../../node_modules/@types/node/querystring.d.ts","../../node_modules/@types/node/readline.d.ts","../../node_modules/@types/node/repl.d.ts","../../node_modules/@types/node/stream.d.ts","../../node_modules/@types/node/string_decoder.d.ts","../../node_modules/@types/node/timers.d.ts","../../node_modules/@types/node/tls.d.ts","../../node_modules/@types/node/trace_events.d.ts","../../node_modules/@types/node/tty.d.ts","../../node_modules/@types/node/url.d.ts","../../node_modules/@types/node/util.d.ts","../../node_modules/@types/node/v8.d.ts","../../node_modules/@types/node/vm.d.ts","../../node_modules/@types/node/worker_threads.d.ts","../../node_modules/@types/node/zlib.d.ts","../../node_modules/@types/node/ts3.4/base.d.ts","../../node_modules/@types/node/globals.global.d.ts","../../node_modules/@types/node/wasi.d.ts","../../node_modules/@types/node/ts3.6/base.d.ts","../../node_modules/@types/node/assert.d.ts","../../node_modules/@types/node/base.d.ts","../../node_modules/@types/node/index.d.ts","../../node_modules/@types/stylus/index.d.ts"],"fileIdsList":[[80,81],[48,49,56,65],[40,48,56],[72],[44,49,57],[65],[46,48,56],[48],[48,50,65,71],[49],[56,65,71],[48,49,51,56,65,68,71],[48,51,68,71],[82],[71],[46,48,65],[38],[70],[48,65],[63,72,74],[44,46,56,65],[37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76],[77,78,79],[56],[62],[48,50,65,71,74],[48,83]],"fileInfos":[{"version":"c430d44666289dae81f30fa7b2edebf186ecc91a2d4c71266ea6ae76388792e1","affectsGlobalScope":true,"impliedFormat":1},{"version":"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","impliedFormat":1},{"version":"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","impliedFormat":1},{"version":"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962","impliedFormat":1},{"version":"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","impliedFormat":1},{"version":"080941d9f9ff9307f7e27a83bcd888b7c8270716c39af943532438932ec1d0b9","affectsGlobalScope":true,"impliedFormat":1},{"version":"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671","affectsGlobalScope":true,"impliedFormat":1},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true,"impliedFormat":1},{"version":"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71","affectsGlobalScope":true,"impliedFormat":1},{"version":"0559b1f683ac7505ae451f9a96ce4c3c92bdc71411651ca6ddb0e88baaaad6a3","affectsGlobalScope":true,"impliedFormat":1},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true,"impliedFormat":1},{"version":"fb0f136d372979348d59b3f5020b4cdb81b5504192b1cacff5d1fbba29378aa1","affectsGlobalScope":true,"impliedFormat":1},{"version":"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a","affectsGlobalScope":true,"impliedFormat":1},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true,"impliedFormat":1},{"version":"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e","affectsGlobalScope":true,"impliedFormat":1},{"version":"a680117f487a4d2f30ea46f1b4b7f58bef1480456e18ba53ee85c2746eeca012","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true,"impliedFormat":1},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true,"impliedFormat":1},{"version":"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"d6d7ae4d1f1f3772e2a3cde568ed08991a8ae34a080ff1151af28b7f798e22ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"639e512c0dfc3fad96a84caad71b8834d66329a1f28dc95e3946c9b58176c73a","affectsGlobalScope":true,"impliedFormat":1},{"version":"811c71eee4aa0ac5f7adf713323a5c41b0cf6c4e17367a34fbce379e12bbf0a4","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true,"impliedFormat":1},"e7662e79ae21b1f16ea6bd668b238d79a7f4337f5ad95de573356bfa086275f8","a092af7dc8e35af34e084706c117c17fe357d5068cb95318a6ef12c2395dd5b1",{"version":"215d8d9a2c480fd460127edc048d68d9931d3b27f95132253a6e71975f060bb1","affectsGlobalScope":true,"impliedFormat":1},{"version":"c438b413e94ff76dfa20ae005f33a1c84f2480d1d66e0fd687501020d0de9b50","impliedFormat":1},{"version":"bc6a78961535181265845bf9b9e8a147ffd0ca275097ceb670a9b92afa825152","impliedFormat":1},{"version":"987249e7b75023387c5fd9dc2f959ee777cb8989b7900f5a9eb4a67d290f2cba","impliedFormat":1},{"version":"123ec69e4b3a686eb49afd94ebe3292a5c84a867ecbcb6bb84bdd720a12af803","impliedFormat":1},{"version":"eb5197aade83cb0e360ac407289c53a8009e8fdae7939892a0240d30444496b6","affectsGlobalScope":true,"impliedFormat":1},{"version":"90c85ddbb8de82cd19198bda062065fc51b7407c0f206f2e399e65a52e979720","impliedFormat":1},{"version":"2636f61a2d5f76d4039c7110f65c407a028ec5265e03d855fc2cf62b198ac415","impliedFormat":1},{"version":"7e050b767ed10c7ffbc01f314defbf420bf0b5d54ce666e1c87507c035dfc191","impliedFormat":1},{"version":"7db7569fbb3e2b01ba8751c761cdd3f0debd104170d5665b7dc20a11630df3a9","impliedFormat":1},{"version":"cde4d7f6274468180fa39847b183aec22626e8212ff885d535c53f4cd7c225fd","affectsGlobalScope":true,"impliedFormat":1},{"version":"365e8358843a23944be84b810b1f774ea0223adfccc085f30fd7f4c13dc8a09f","affectsGlobalScope":true,"impliedFormat":1},{"version":"f87f95c015900102a5c0edcdebb17596de1382510e6cc17ab79f375d3505bb12","impliedFormat":1},{"version":"05b5679a897598ebe556ee93415b3af1f456e674ea82e4d7afcd716bfe43aa98","impliedFormat":1},{"version":"35fe02b2c10616cc7ac3db9c15778df7ed9c99276889efdd9be31f342841cfcd","impliedFormat":1},{"version":"1c3fe66943f587685aa4a42f664f794655da1767401d2f85910177dac78aa45d","impliedFormat":1},{"version":"c969bf4c7cdfe4d5dd28aa09432f99d09ad1d8d8b839959646579521d0467d1a","impliedFormat":1},{"version":"6c3857edaeeaaf43812f527830ebeece9266b6e8eb5271ab6d2f0008306c9947","impliedFormat":1},{"version":"bc6a77e750f4d34584e46b1405b771fb69a224197dd6bafe5b0392a29a70b665","impliedFormat":1},{"version":"8de97668870cfb20fc9d355d2ef379e897bdd8a98c889c7d8a6de40ee408ad52","impliedFormat":1},{"version":"ed4ae81196cccc10f297d228bca8d02e31058e6d723a3c5bc4be5fb3c61c6a34","impliedFormat":1},{"version":"84044697c8b3e08ef24e4b32cfe6440143d07e469a5e34bda0635276d32d9f35","impliedFormat":1},{"version":"4982d94cb6427263c8839d8d6324a8bbe129e931deb61a7380f8fad17ba2cfc0","impliedFormat":1},{"version":"ae4bc1dd4d9de7bbea6ce419db45af82a81358e6014c9e1235b5d252e06f8ab8","affectsGlobalScope":true,"impliedFormat":1},{"version":"3f6a1fd73c9dc3bd7f4b79bc075297ca6527904df69b0f2c2c94e4c4c7d9a32c","impliedFormat":1},{"version":"884560fda6c3868f925f022adc3a1289fe6507bbb45adb10fa1bbcc73a941bb0","impliedFormat":1},{"version":"6b2bb67b0942bcfce93e1d6fad5f70afd54940a2b13df7f311201fba54b2cbe9","impliedFormat":1},{"version":"acbed967a379b3e9f73237ba9473f8b337eeea14b7dc64d445430b5d695751da","impliedFormat":1},{"version":"272a46cc8f494677af587d17939e61e7db2b1925633e4da0c186ba17f6732521","impliedFormat":1},{"version":"d67e08745494b000da9410c1ae2fdc9965fc6d593fe0f381a47491f75417d457","impliedFormat":1},{"version":"b40652bf8ce4a18133b31349086523b219724dca8df3448c1a0742528e7ad5b9","impliedFormat":1},{"version":"c52eb62e3388a01b966c57bd14ca0ee9d5f6e656d6a18f6ce6b7cdece63734a3","impliedFormat":1},{"version":"a77fdb357c78b70142b2fdbbfb72958d69e8f765fd2a3c69946c1018e89d4638","impliedFormat":1},{"version":"3c2ac350c3baa61fd2b1925844109e098f4376d0768a4643abc82754fd752748","impliedFormat":1},{"version":"80ffc1786a5dab91b4aa59a72720f02f25df8b7c76b593e04d5e381aec284ccb","impliedFormat":1},{"version":"f5b9d446783f075eed9e93dfba1a5055b3fd61aab285fef3bbc761eadf598204","impliedFormat":1},{"version":"289be113bad7ee27ee7fa5b1e373c964c9789a5e9ed7db5ddcb631371120b953","impliedFormat":1},{"version":"baf0b82ffc5d2616f44a6fb1f81e8d798545bebf0c30f5d8b003a1dba1acfb3f","impliedFormat":1},{"version":"c6a5b34f1e725019445754f1e733585f113e0dced75f137bd3c4af5853d3f6ab","impliedFormat":1},{"version":"15fbe50526244954eb2f933546bca6cdcf0db16c9428d099b3b386c1db5799ab","impliedFormat":1},{"version":"d44028ae0127eb3e9fcfa5f55a8b81d64775ce15aca1020fe25c511bbb055834","impliedFormat":1},{"version":"2708349d5a11a5c2e5f3a0765259ebe7ee00cdcc8161cb9990cb4910328442a1","affectsGlobalScope":true,"impliedFormat":1},{"version":"4e0a4d84b15692ea8669fe4f3d05a4f204567906b1347da7a58b75f45bae48d3","impliedFormat":1},{"version":"ad1ae5ae98eceb9af99061e83e867b9897d267aebc8f3b938c9424deabadf4bb","impliedFormat":1},{"version":"6fbe72eed85e363ad83b763e03be824558c6ea7456c7259a48bcf0afdeb9d7e4","impliedFormat":1},{"version":"e61a21e9418f279bc480394a94d1581b2dee73747adcbdef999b6737e34d721b","impliedFormat":1},{"version":"5825520e2099309182c6e2a2b3061b060d42a098c58f67d1754880a7e2cce99a","impliedFormat":1},{"version":"c6db2268b4c7189a5d33b3bbf6616f3cc83bdad97468a25a172901d7ec28ff82","impliedFormat":1}],"root":[35,36],"options":{"allowSyntheticDefaultImports":true,"esModuleInterop":true,"module":5,"noImplicitAny":true,"noUnusedLocals":true,"noUnusedParameters":true,"outDir":"./","removeComments":true,"strict":true,"target":1},"referencedMap":[[82,1],[40,2],[41,3],[42,4],[43,5],[44,6],[45,7],[47,8],[49,9],[50,10],[51,11],[52,12],[53,13],[83,14],[54,8],[55,15],[56,16],[59,17],[60,18],[63,19],[64,20],[65,8],[68,21],[77,22],[80,23],[70,24],[71,25],[73,6],[75,26],[76,6],[84,27]],"version":"5.9.3"}

package/dist/index.d.ts

@@ -0,0 +1,79 @@
+export interface ColorPickerOptions {
+    defaultColor?: string;
+    format?: "hex" | "rgb" | "hsl";
+    showAlpha?: boolean;
+    sliderMode?: boolean;
+    eyeDropper?: boolean;
+    presetColors?: string[];
+    presetLabels?: string[];
+    presetsOnly?: boolean;
+    listView?: boolean;
+    inline?: boolean;
+    compact?: boolean;
+    inputPreview?: boolean;
+    onChange?: (color: string) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    appendTo?: HTMLElement;
+    position?: "auto" | "above" | "below";
+    closeOnSelect?: boolean;
+    ariaLabels?: {
+        hue?: string;
+        saturation?: string;
+        lightness?: string;
+        alpha?: string;
+        presets?: string;
+    };
+}
+export declare class ColorPicker {
+    private input;
+    private options;
+    private container;
+    private colorBox;
+    private hueSlider;
+    private saturationSlider;
+    private lightnessSlider;
+    private alphaSlider;
+    private hexInput;
+    private currentColor;
+    private isOpen;
+    private saturationPointer;
+    private compactButton;
+    private inputPreview;
+    private static instances;
+    constructor(element: string | HTMLInputElement, options?: ColorPickerOptions);
+    private init;
+    private buildColorPicker;
+    private createCompactButton;
+    private createInputPreview;
+    private supportsEyeDropper;
+    private openEyeDropper;
+    private setupEventListeners;
+    private onSaturationMouseDown;
+    private updateSaturationFromMouse;
+    private onSaturationKeyDown;
+    private updateColorDisplay;
+    private formatColor;
+    private getPlaceholder;
+    private parseColor;
+    private hexToHsl;
+    private rgbToHsl;
+    private hslToRgb;
+    private toHex;
+    private toHSLString;
+    private toRGBString;
+    private isValidHex;
+    private isValidColor;
+    private announceColorChange;
+    private announceTimeout;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    private positionPicker;
+    setColor(color: string): void;
+    getColor(): string;
+    destroy(): void;
+    static getInstance(element: HTMLElement): ColorPicker | undefined;
+}
+export default function colorpicker(selector: string | HTMLInputElement, options?: ColorPickerOptions): ColorPicker;
+export declare function initColorPickers(root?: Document | HTMLElement): ColorPicker[];

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "pickit-color",
+  "version": "1.0.0",
+  "description": "A modern, accessible color picker with HSL support, presets, slider mode, and screen color picking",
+  "main": "dist/colorpicker.js",
+  "module": "dist/esm/colorpicker/index.js",
+  "types": "dist/colorpicker.d.ts",
+  "author": {
+    "name": "Thomas Skerbis",
+    "email": "thomas@klxm.de",
+    "url": "https://github.com/skerbis"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/skerbis"
+  },
+  "license": "SEE LICENSE IN LICENSE.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/skerbis/pickit-color.git"
+  },
+  "bugs": {
+    "url": "https://github.com/skerbis/pickit-color/issues"
+  },
+  "homepage": "https://github.com/skerbis/pickit-color#readme",
+  "keywords": [
+    "color-picker",
+    "colorpicker",
+    "hsl",
+    "rgba",
+    "hex",
+    "eyedropper",
+    "accessibility",
+    "a11y",
+    "typescript",
+    "vanilla-js"
+  ],
+  "files": [
+    "dist/**/*",
+    "src/**/*",
+    "LICENSE.md",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "run-s build:pre build:build build:esm build:types",
+    "build:pre": "rimraf dist",
+    "build:build": "ts-node --transpile-only build.ts",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:types": "tsc -p tsconfig.declarations.json",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.14",
+    "@types/stylus": "^0.48.33",
+    "autoprefixer-stylus": "latest",
+    "chokidar": "^3.4.3",
+    "fs-extra": "^9.0.1",
+    "glob": "^7.1.6",
+    "npm-run-all": ">=4.1.5",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.35.1",
+    "rollup-plugin-typescript": "^1.0.1",
+    "stylus": "latest",
+    "terser": "^5.5.1",
+    "ts-node": "^9.1.1",
+    "tslib": "^2.7.0",
+    "typescript": "^5.7.2"
+  }
+}

package/src/README.md

@@ -0,0 +1,292 @@
+# Pickit ColorPicker
+
+Ein barrierefreier, leichtgewichtiger Color Picker inspiriert von Flatpickr mit vollständiger Unterstützung moderner Farbformate.
+
+## ✨ Features
+
+- **♿ Vollständig Barrierefrei**: WCAG 2.1 AA konform mit ARIA-Labels und Tastaturnavigation
+- **🎨 Moderne Farbformate**: Unterstützt HEX, RGB, HSL mit optionalem Alpha-Kanal
+- **🎯 Voreingestellte Farben**: Schneller Zugriff auf Markenfarben oder gängige Farbpaletten
+- **⌨️ Tastaturnavigation**: Volle Steuerung per Pfeiltasten (Shift für größere Schritte)
+- **🌙 Dark Mode**: Automatische Unterstützung über `prefers-color-scheme`
+- **📱 Responsive**: Optimiert für Desktop und mobile Geräte
+- **🎭 Inline oder Popup**: Flexibel als Dropdown oder dauerhaft eingebetteter Picker
+- **⚡ Leichtgewichtig**: Keine Abhängigkeiten, nur ~10KB gzipped
+- **🔧 Anpassbar**: Umfangreiche Optionen und Callbacks
+
+## 📦 Installation
+
+```bash
+npm install pickit
+```
+
+Oder über CDN:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/pickit/dist/colorpicker.css">
+<script src="https://unpkg.com/pickit/dist/colorpicker.js"></script>
+```
+
+## 🚀 Grundlegende Verwendung
+
+### HTML
+
+```html
+<input type="text" id="colorInput" placeholder="Farbe auswählen">
+```
+
+### JavaScript
+
+```javascript
+import colorpicker from 'pickit/colorpicker';
+
+const picker = colorpicker('#colorInput', {
+  defaultColor: '#3b82f6',
+  format: 'hex',
+  onChange: (color) => {
+    console.log('Ausgewählte Farbe:', color);
+  }
+});
+```
+
+## ⚙️ Optionen
+
+| Option | Typ | Standard | Beschreibung |
+|--------|-----|----------|--------------|
+| `defaultColor` | `string` | `'#3b82f6'` | Standardfarbe beim Initialisieren |
+| `format` | `'hex' \| 'rgb' \| 'hsl'` | `'hex'` | Ausgabeformat der Farbe |
+| `showAlpha` | `boolean` | `false` | Alpha-Kanal (Transparenz) aktivieren |
+| `presetColors` | `string[]` | `[...]` | Array vordefinierter Farben |
+| `inline` | `boolean` | `false` | Picker dauerhaft sichtbar machen |
+| `appendTo` | `HTMLElement` | `document.body` | Element, an das der Picker angehängt wird |
+| `position` | `'auto' \| 'above' \| 'below'` | `'auto'` | Position des Pickers relativ zum Input |
+| `closeOnSelect` | `boolean` | `true` | Picker nach Auswahl schließen |
+| `onChange` | `function` | `() => {}` | Callback bei Farbänderung |
+| `onOpen` | `function` | `() => {}` | Callback beim Öffnen |
+| `onClose` | `function` | `() => {}` | Callback beim Schließen |
+| `ariaLabels` | `object` | `{...}` | Anpassbare ARIA-Labels für Barrierefreiheit |
+
+## 📖 Beispiele
+
+### HEX Format
+
+```javascript
+const picker = colorpicker('#hex-input', {
+  format: 'hex',
+  defaultColor: '#3b82f6'
+});
+```
+
+### RGB mit Alpha
+
+```javascript
+const picker = colorpicker('#rgb-input', {
+  format: 'rgb',
+  showAlpha: true,
+  defaultColor: 'rgba(59, 130, 246, 0.8)',
+  onChange: (color) => {
+    document.body.style.backgroundColor = color;
+  }
+});
+```
+
+### HSL Format
+
+```javascript
+const picker = colorpicker('#hsl-input', {
+  format: 'hsl',
+  defaultColor: 'hsl(217, 91%, 60%)'
+});
+```
+
+### Eigene Markenfarben
+
+```javascript
+const picker = colorpicker('#brand-input', {
+  format: 'hex',
+  presetColors: [
+    '#6366f1', // Indigo
+    '#8b5cf6', // Purple
+    '#ec4899', // Pink
+    '#f59e0b', // Amber
+    '#10b981', // Emerald
+    '#06b6d4', // Cyan
+  ],
+  closeOnSelect: true
+});
+```
+
+### Inline Modus
+
+```javascript
+const picker = colorpicker('#inline-input', {
+  inline: true,
+  appendTo: document.querySelector('.color-container'),
+  format: 'hex',
+  onChange: (color) => {
+    console.log('Farbe geändert:', color);
+  }
+});
+```
+
+### Position steuern
+
+```javascript
+const picker = colorpicker('#positioned-input', {
+  position: 'above', // Immer oberhalb des Inputs
+  format: 'hex'
+});
+```
+
+### ARIA-Labels anpassen
+
+```javascript
+const picker = colorpicker('#accessible-input', {
+  ariaLabels: {
+    hue: 'Farbton',
+    saturation: 'Sättigung und Helligkeit',
+    lightness: 'Helligkeit',
+    alpha: 'Transparenz',
+    presets: 'Vordefinierte Farben'
+  }
+});
+```
+
+## 🎹 Tastaturnavigation
+
+Der ColorPicker ist vollständig per Tastatur bedienbar:
+
+| Taste | Funktion |
+|-------|----------|
+| `↑` `↓` `←` `→` | Sättigung und Helligkeit anpassen |
+| `Shift` + Pfeiltasten | Größere Schritte |
+| `Tab` | Zwischen Steuerelementen wechseln |
+| `Escape` | Picker schließen |
+| `Enter` | Farbauswahl bestätigen |
+
+## 🔧 API-Methoden
+
+### setColor(color: string)
+
+Farbe programmatisch setzen:
+
+```javascript
+picker.setColor('#ff0000');
+picker.setColor('rgb(255, 0, 0)');
+picker.setColor('hsl(0, 100%, 50%)');
+```
+
+### getColor(): string
+
+Aktuelle Farbe abrufen:
+
+```javascript
+const currentColor = picker.getColor();
+console.log(currentColor); // "#ff0000"
+```
+
+### open()
+
+Picker öffnen:
+
+```javascript
+picker.open();
+```
+
+### close()
+
+Picker schließen:
+
+```javascript
+picker.close();
+```
+
+### toggle()
+
+Picker umschalten:
+
+```javascript
+picker.toggle();
+```
+
+### destroy()
+
+Picker entfernen und Event Listener aufräumen:
+
+```javascript
+picker.destroy();
+```
+
+### getInstance(element: HTMLElement)
+
+Bestehende Picker-Instanz abrufen:
+
+```javascript
+const picker = colorpicker.getInstance(inputElement);
+```
+
+## 🎨 Farbkonvertierung
+
+Der ColorPicker versteht automatisch alle gängigen Farbformate:
+
+```javascript
+// Alle diese Formate werden erkannt:
+picker.setColor('#ff0000');           // HEX
+picker.setColor('#ff0000ff');         // HEX mit Alpha
+picker.setColor('rgb(255, 0, 0)');    // RGB
+picker.setColor('rgba(255, 0, 0, 0.5)'); // RGB mit Alpha
+picker.setColor('hsl(0, 100%, 50%)'); // HSL
+picker.setColor('hsla(0, 100%, 50%, 0.5)'); // HSL mit Alpha
+```
+
+## 🌙 Dark Mode
+
+Der ColorPicker unterstützt automatisch Dark Mode über CSS:
+
+```css
+@media (prefers-color-scheme: dark) {
+  /* Styles werden automatisch angepasst */
+}
+```
+
+Eigenes Dark Mode Styling:
+
+```css
+.colorpicker-container {
+  background: #1f2937;
+  border-color: #374151;
+}
+```
+
+## ♿ Barrierefreiheit
+
+Der ColorPicker ist nach WCAG 2.1 AA Standards entwickelt:
+
+- **ARIA-Labels**: Alle interaktiven Elemente sind beschriftet
+- **Tastaturnavigation**: Vollständige Steuerung per Tastatur
+- **Screen Reader**: Optimiert für Screen Reader
+- **Focus Indicators**: Klare visuelle Fokusanzeigen
+- **High Contrast**: Unterstützung für hohen Kontrast
+- **Reduced Motion**: Respektiert `prefers-reduced-motion`
+
+## 🎯 Browser-Unterstützung
+
+- Chrome/Edge: Letzte 2 Versionen
+- Firefox: Letzte 2 Versionen
+- Safari: Version 12+
+- iOS Safari: Version 12+
+- Android Chrome: Letzte 2 Versionen
+
+## 📄 Lizenz
+
+MIT License - siehe [LICENSE.md](../LICENSE.md)
+
+## 🤝 Beitragen
+
+Contributions sind willkommen! Siehe das Haupt-Repository für Guidelines.
+
+## 🔗 Links
+
+- [Hauptprojekt: Pickit](../README.md)
+- [Demo](demo-colorpicker.html)
+- [GitHub](https://github.com/skerbis/pickit)

package/src/colorpicker.d.ts

@@ -0,0 +1,52 @@
+declare module "pickit/colorpicker" {
+  export interface ColorPickerOptions {
+    defaultColor?: string;
+    format?: "hex" | "rgb" | "hsl";
+    showAlpha?: boolean;
+    sliderMode?: boolean;
+    eyeDropper?: boolean;
+    presetColors?: string[];
+    presetLabels?: string[];
+    presetsOnly?: boolean;
+    listView?: boolean;
+    inputPreview?: boolean;
+    inline?: boolean;
+    compact?: boolean;
+    onChange?: (color: string) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    appendTo?: HTMLElement;
+    position?: "auto" | "above" | "below";
+    closeOnSelect?: boolean;
+    ariaLabels?: {
+      hue?: string;
+      saturation?: string;
+      lightness?: string;
+      alpha?: string;
+      presets?: string;
+    };
+  }
+
+  export class ColorPicker {
+    constructor(
+      element: string | HTMLInputElement,
+      options?: ColorPickerOptions
+    );
+    open(): void;
+    close(): void;
+    toggle(): void;
+    setColor(color: string): void;
+    getColor(): string;
+    destroy(): void;
+    static getInstance(element: HTMLElement): ColorPicker | undefined;
+  }
+
+  export default function colorpicker(
+    selector: string | HTMLInputElement,
+    options?: ColorPickerOptions
+  ): ColorPicker;
+
+  export function initColorPickers(
+    root?: Document | HTMLElement
+  ): ColorPicker[];
+}