pretty-color-picker 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +10 -4
  2. package/dist/index.d.ts +5 -0
  3. package/dist/pretty-color-picker.js +843 -826
  4. package/dist/pretty-color-picker.umd.cjs +12 -12
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -1,19 +1,21 @@
1
1
  # Pretty Color Picker
2
2
 
3
- A perceptually accurate color picker for the modern web. Colors are stored internally as **OKLCH** (`picker.color`); Hex, RGB, HSL, and OKLCH are edit/display formats. The 2D plane is a classic **saturation × value** slice at the current hue (the layout every color picker uses), not an OKLCH chroma × lightness plane.
3
+ A perceptually accurate color picker for the modern web. Colors live in **OKLCH** (`picker.color`); Hex, RGB, HSL, and OKLCH are there for editing and display. The plane is **saturation × value** at the current hue.
4
4
 
5
5
  Native **Web Component**. Works in any framework or plain HTML.
6
6
 
7
- **[Live demo](https://colors.kiira.in)** · **[GitHub](https://github.com/kiiradesign/pretty-color-picker)**
7
+ **[Live demo](https://colors.kiira.in)** · **[npm](https://www.npmjs.com/package/pretty-color-picker)** · **[GitHub](https://github.com/kiiradesign/pretty-color-picker)**
8
8
 
9
9
  The design and interactions are inspired by [DialKit](https://joshpuckett.me/dialkit). I'm considering contributing this component upstream.
10
10
 
11
11
  ## Features
12
12
 
13
- Saturation × value color plane with hue and alpha sliders, format tabs (Hex / RGB / HSL / OKLCH), Last Used history, label scrubbing, **popover** mode (anchored to a trigger), draggable panel header, light / dark / system themes, Shadow DOM.
13
+ Saturation × value color plane with hue and alpha sliders, format tabs (Hex / RGB / HSL / OKLCH), Last Used history, field label scrubbing, **popover** mode (anchored to a trigger), draggable panel header, customizable panel title, light / dark / system themes, Shadow DOM.
14
14
 
15
15
  ## Install
16
16
 
17
+ Published on npm as [`pretty-color-picker`](https://www.npmjs.com/package/pretty-color-picker) (v0.1.2).
18
+
17
19
  ```bash
18
20
  npm install pretty-color-picker
19
21
  ```
@@ -27,6 +29,9 @@ import 'pretty-color-picker'
27
29
  ```html
28
30
  <pretty-color-picker value="#6366f1" theme="system" header-action="close"></pretty-color-picker>
29
31
 
32
+ <!-- Custom panel title -->
33
+ <pretty-color-picker value="#6366f1" label="Brand color"></pretty-color-picker>
34
+
30
35
  <!-- Popover anchored to a trigger (click outside or Escape to close) -->
31
36
  <button type="button" id="color-btn">Pick color</button>
32
37
  <pretty-color-picker
@@ -47,6 +52,7 @@ import 'pretty-color-picker'
47
52
  | Attribute | Values | Description |
48
53
  | --------------- | --------------------------- | ------------------------------------------------ |
49
54
  | `value` | CSS color | Initial color |
55
+ | `label` | string | Panel header title (default: `Pretty Color Picker`; `label=""` hides it) |
50
56
  | `theme` | `light` \| `dark` \| `system` | Chrome theme |
51
57
  | `header-action` | `close` \| `theme` \| `none` | Close button, theme toggle, or no header button |
52
58
  | `mode` | `inline` \| `popover` | `popover` = floating panel anchored to `anchor` |
@@ -58,7 +64,7 @@ import 'pretty-color-picker'
58
64
 
59
65
  **Events:** `change` (`detail.color`, `detail.css`, `detail.hex`) fires while dragging sliders or scrubbing labels; field inputs commit on Enter/blur. Not fired on mount. `close` when the panel closes (`header-action="close"` or popover dismiss). `themechange` when the user clicks the built-in theme toggle (`header-action="theme"`).
60
66
 
61
- **API:** `picker.value`, `picker.color` (OKLCH), `picker.theme`, `picker.headerAction`, `picker.mode`, `picker.anchor`, `picker.open`, `picker.show()`, `picker.hide()`, `picker.toggle()`, `picker.movable`, `picker.history`.
67
+ **API:** `picker.value`, `picker.color` (OKLCH), `picker.label`, `picker.theme`, `picker.headerAction`, `picker.mode`, `picker.anchor`, `picker.open`, `picker.show()`, `picker.hide()`, `picker.toggle()`, `picker.movable`, `picker.history`.
62
68
 
63
69
  TypeScript types exported from `pretty-color-picker`.
64
70
 
package/dist/index.d.ts CHANGED
@@ -8,6 +8,8 @@ export declare type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch';
8
8
 
9
9
  export declare const DEFAULT_COLOR: OklchColor;
10
10
 
11
+ export declare const DEFAULT_PICKER_LABEL = "Pretty Color Picker";
12
+
11
13
  export declare interface FormatField {
12
14
  key: string;
13
15
  label: string;
@@ -61,6 +63,9 @@ export declare class PrettyColorPicker extends HTMLElement {
61
63
  set theme(value: PickerTheme);
62
64
  get headerAction(): PickerHeaderAction;
63
65
  set headerAction(value: PickerHeaderAction);
66
+ /** Panel header title. Default `Pretty Color Picker`. Set `label=""` to hide. */
67
+ get label(): string;
68
+ set label(value: string);
64
69
  get movable(): boolean;
65
70
  set movable(value: boolean);
66
71
  /** `inline` (default) or `popover` for a floating panel anchored to `anchor`. */