@substrate-system/color-picker 0.0.3 → 0.0.4

package/README.md

@@ -1,7 +1,7 @@
 # color-picker
 [![tests](https://img.shields.io/github/actions/workflow/status/substrate-system/color-picker/nodejs.yml?style=flat-square)](https://github.com/substrate-system/color-picker/actions/workflows/nodejs.yml)
 [![types](https://img.shields.io/npm/types/@substrate-system/color-picker?style=flat-square)](README.md)
-[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)
+[![module](https://img.shields.io/badge/module-ESM-blue?style=flat-square)](README.md)
 [![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
 [![Common Changelog](https://nichoth.github.io/badge/common-changelog.svg)](./CHANGELOG.md)
 [![install size](https://flat.badgen.net/packagephobia/install/@substrate-system/color-picker)](https://packagephobia.com/result?p=@substrate-system/color-picker)
@@ -28,7 +28,6 @@ This was originally forked from [Simonwep/pickr](https://github.com/Simonwep/pic
   * [Keyboard navigation](#keyboard-navigation)
 - [Modules](#modules)
   * [ESM](#esm)
-  * [Common JS](#common-js)
 - [CSS](#css)
   * [Import CSS](#import-css)
   * [Customize CSS](#customize-css)
@@ -59,7 +58,8 @@ const picker = document.querySelector('color-picker')
 picker.swatches = ['#000', '#fff', '#ef4444', '#3b82f6']
 picker.value = '#000'
 
-picker.addEventListener('change', (ev) => {
+// use the `.on` method
+picker.on('change', (ev) => {
     console.log(ev.detail.value)   // selected color string
     console.log(ev.detail.index)   // index into swatches array
     console.log(ev.detail.source)  // 'pointer' | 'keyboard' | 'programmatic'
@@ -90,15 +90,27 @@ You can also set `value` via an HTML attribute:
 
 ### Events
 
-#### `change`
+#### `color-picker:change`
 
-Fired when the selected color changes.
+Fired when the selected color changes. This is a namespaced event,
+[as described here](https://github.com/substrate-system/web-component#emitnamestring-opts-bubbles-cancelable-detail-boolean).
+You should use the `.on` method to listen for it:
+
+```ts
+const picker = document.querySelector('color-picker')
+
+// `.on` will convert the given 'change' event to
+// the correct namespaced event name, `color-picker:change`.
+picker.on('change', ev => {
+  // ...
+})
+```
 
 ```ts
 interface ChangeDetail {
-    value:string | null
-    index:number | null
-    source:'pointer' | 'keyboard' | 'programmatic'
+    value:string|null
+    index:number|null
+    source:'pointer'|'keyboard'|'programmatic'
 }
 ```
 
@@ -114,27 +126,21 @@ When a swatch has focus:
 
 ## Modules
 
-This exposes ESM and Common JS via the
+This package ships ESM via the
 [package.json `exports` field](https://nodejs.org/api/packages.html#exports).
 
 ### ESM
 
 ```js
-import { registerColorPicker } from '@substrate-system/color-picker'
+import '@substrate-system/color-picker'
 ```
 
-Or import just the component class:
+Or import the component class:
 
 ```js
 import { ColorPicker } from '@substrate-system/color-picker'
 ```
 
-### Common JS
-
-```js
-const { registerColorPicker } = require('@substrate-system/color-picker')
-```
-
 ## CSS
 
 ### Import CSS
@@ -148,7 +154,7 @@ import '@substrate-system/color-picker/css'
 Or minified:
 
 ```js
-import '@substrate-system/color-picker/css/min'
+import '@substrate-system/color-picker/min/css'
 ```
 
 ### Customize CSS

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@substrate-system/color-picker",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Color picker web component",
   "type": "module",
   "main": "index.js",
@@ -16,14 +16,12 @@
   "scripts": {
     "lint": "eslint \"./**/*.{ts,js}\"",
     "lint:style": "stylelint src/*.css",
-    "test": "npm run test:node && npm run test:browser",
-    "test:node": "rm -rf .tmp-test && esbuild ./test/build-artifacts.test.ts ./test/example-smoke.test.ts ./test/example-interaction.test.ts --bundle --format=esm --platform=node --outdir=.tmp-test && node --test .tmp-test/*.js",
-    "test:browser": "esbuild --bundle --loader:.css=text ./test/index.ts | tapout",
+    "test": "esbuild --bundle --loader:.css=text ./test/index.ts | tapout",
     "build-css": "lightningcss --targets \">= 0.25%\" --sourcemap --nesting src/index.css -o ./dist/style.css",
     "build-css:min": "lightningcss --targets \">= 0.25%\" --sourcemap --minify --nesting src/index.css -o ./dist/style.min.css",
     "build-esm": "esbuild src/index.ts --format=esm --metafile=dist/meta.json --keep-names --tsconfig=tsconfig.build.json --outdir=./dist --sourcemap && tsc --emitDeclarationOnly --project tsconfig.build.json --outDir dist",
     "build-esm:min": "esbuild ./src/index.ts --format=esm --keep-names --bundle --loader:.css=text --tsconfig=tsconfig.build.json --minify --out-extension:.js=.min.js --outdir=./dist --sourcemap",
-    "build-example": "mkdir -p ./public && rm -rf ./public/* && NODE_ENV=development vite --mode staging --base=\"/color-picker\" build",
+    "build-example": "mkdir -p ./public && rm -rf ./public/* && vite --mode staging --base=\"/color-picker\" build",
     "build-docs": "typedoc --tsconfig tsconfig.build.json ./src/index.ts",
     "build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build-esm && npm run build-esm:min && npm run build-css && npm run build-css:min",
     "start": "vite",