{"_id":"@dojo-ng/color-picker","name":"@dojo-ng/color-picker","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@dojo-ng/color-picker","version":"0.1.0","license":"BSD-3-Clause","description":"Dojo NG color-picker web component","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"tsc -p tsconfig.json","clean":"rm -rf dist"},"dependencies":{"@dojo-ng/dojo-element":"^0.1.0","@dojo-ng/slider":"^0.1.0","@dojo-ng/text-input":"^0.1.0","@dojo-ng/i18n":"^0.1.0","lit":"^3.3.0"},"_id":"@dojo-ng/color-picker@0.1.0","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-FRJcI2gg5A3jt1+iNyMoAFFonrtRMTQNmNLeo/mrfFNhST161MmqScrG7FeSihqoDvQNhpOt7gBeumEupPc85g==","shasum":"c7774f728317c629ba307496fd604c65960a2b54","tarball":"https://registry.npmjs.org/@dojo-ng/color-picker/-/color-picker-0.1.0.tgz","fileCount":10,"unpackedSize":32218,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCe58vBeHIMXLPaJ8HOiPK1ktOqA0HU1nzFF3+qt6d4BwIgL0KhRKcKVL1DmlodOnVOdJev/NlrhILmVyWDSW861wI="}]},"_npmUser":{"name":"bitranch","email":"bill@bitranch.com"},"directories":{},"maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/color-picker_0.1.0_1788374424262_0.5828728701061474"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-02T18:40:24.035Z","0.1.0":"2026-09-02T18:40:24.394Z","modified":"2026-09-02T18:40:25.423Z"},"maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"description":"Dojo NG color-picker web component","license":"BSD-3-Clause","readme":"# @dojo-ng/color-picker\n\n`<dj-color-picker>` — An inline color picker with a 2D saturation/brightness area, a hue slider, an optional opacity slider, a text field, and optional swatches.\n\nPart of [Dojo NG](../../README.md), a framework-agnostic web component library built on Lit. BSD-3-Clause.\n\nAn inline color picker with a 2D saturation/brightness area, a hue slider, an optional opacity slider, a text field, and optional swatches. Form-associated: it submits the formatted color string under `name`. There is no built-in trigger or popup — compose `dj-popup` to make it a dropdown. The internal model is HSV + alpha; `value` is a color STRING formatted through `format` (`hex`/`rgb`/`hsl`). Parts: `area`, `thumb`, `hue`, `alpha`, `input`, `swatches`, `swatch`.\n\n> An inline color picker: a 2D saturation/brightness area, a hue slider, an optional opacity slider (`alpha`), a text field, and optional `swatches`. Form-associated — it submits the formatted color string under `name`. There is no built-in trigger or popup by design; compose `dj-popup` to make a dropdown. The model is HSV internally; `value` is a color STRING formatted through `format` (`hex`/`rgb`/`hsl`), so reading `value` after switching `format` returns the new representation. `swatches` is an array of color strings or `{ value, label }`. Emits `dj-change` (`{ value }`) on every user change, including during a drag (no separate input event). Named CSS colors are not parsed; alpha appears in the output only when the color is translucent or `alpha` is on. Parts: `area`, `thumb`, `hue`, `alpha`, `input`, `swatches`, `swatch`.\n\n## Install\n\n```bash\nnpm install @dojo-ng/color-picker\n```\n\n## Usage\n\nImport the package to register the custom element, then use the tag.\n\nSet `format`, turn on `alpha` for opacity, and pass `swatches`. Listen for `dj-change` to read the formatted `value`.\n\n```html\n<dj-color-picker id=\"picker\" label=\"Brand color\" format=\"rgb\" alpha></dj-color-picker>\n<script type=\"module\">\n  import \"@dojo-ng/color-picker\";\n  const p = document.getElementById(\"picker\");\n  p.swatches = [\"#e11d48\", \"#2563eb\", { value: \"#16a34a\", label: \"Green\" }];\n  p.addEventListener(\"dj-change\", (e) => console.log(e.detail.value));\n</script>\n```\n\n## Properties\n\n`↻` marks an attribute reflected to the DOM; a dash means the property is set in JavaScript only.\n\n| Property | Attribute | Type | Default |\n|---|---|---|---|\n| `format` | format | `ColorFormat` | `\"hex\"` |\n| `alpha` | alpha ↻ | `boolean` | `false` |\n| `swatches` | — | `Swatch[]` | `[]` |\n| `label` | label | `string` | — |\n| `name` | name ↻ | `string` | — |\n| `disabled` | disabled ↻ | `boolean` | `false` |\n| `get` | get | `string` | — |\n\n**Parts:** `area`, `thumb`, `hue`, `alpha`, `input`, `swatches`, `swatch`, `picker`, `label`\n\n**Events:** `dj-change` (`{ value }`)\n\n**Methods:** `checkValidity(): boolean`, `reportValidity(): boolean`\n\n**CSS properties:** `--dj-color-picker-width` (default `240px`; Overall width of the inline panel.)\n\n## Theming\n\nStyled with Dojo NG `--dj-*` design tokens and exposes `::part()` hooks for targeted overrides.\n\n## Accessibility and i18n\n\nFollows the project's WCAG 2.2 AA and localization conventions.\n\n## More\n\nLive, interactive examples are in the playground (`playground/index.html`). For the full API reference, theming, accessibility, and localization guides, see the [Dojo NG documentation](../../README.md).\n","readmeFilename":"README.md","_rev":"1-7dfc57fcf974c259c818b78ade89b6d0"}