chroma-panel 0.1.2 → 0.1.4

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 (9) hide show
  1. package/README.md +42 -24
  2. package/dist/modes/image/index.cjs +2 -0
  3. package/dist/modes/image/index.js +2 -0
  4. package/dist/modes/palettes/index.cjs +1 -1
  5. package/dist/modes/palettes/index.js +1 -1
  6. package/dist/style.css +1 -1
  7. package/dist/styles/css.cjs +1 -1
  8. package/dist/styles/css.js +1 -1
  9. package/package.json +27 -21
package/README.md CHANGED
@@ -1,20 +1,23 @@
1
- ![chroma-panel, a React color picker](https://raw.githubusercontent.com/re-sohail/chroma-panel/main/assets/hero.png)
1
+ [![chroma-panel, a React color picker: a color wheel, a photo with the palette extracted from it, and a 120-color pencil grid](https://raw.githubusercontent.com/re-sohail/chroma-panel/main/assets/hero.png)](https://chroma-panel.jscrate.dev)
2
2
 
3
3
  [![npm](https://img.shields.io/npm/v/chroma-panel?color=2d7ff9)](https://www.npmjs.com/package/chroma-panel)
4
- [![install size](https://img.shields.io/npm/unpacked-size/chroma-panel?color=2d7ff9&label=install%20size)](https://www.npmjs.com/package/chroma-panel)
4
+ <!-- [![install size](https://img.shields.io/npm/unpacked-size/chroma-panel?color=2d7ff9&label=install%20size)](https://www.npmjs.com/package/chroma-panel) -->
5
5
  [![downloads](https://img.shields.io/npm/dw/chroma-panel?color=2d7ff9)](https://www.npmjs.com/package/chroma-panel)
6
- [![licence](https://img.shields.io/npm/l/chroma-panel?color=2d7ff9)](./LICENSE)
6
+ [![docs](https://img.shields.io/badge/docs-chroma--panel.jscrate.dev-2d7ff9)](https://chroma-panel.jscrate.dev)
7
+ [![license](https://img.shields.io/npm/l/chroma-panel?color=2d7ff9)](./LICENSE)
7
8
 
8
- # chroma-panel
9
+ # chroma-panel — React color picker
9
10
 
10
- A React color picker with the look and feel of the macOS color panel.
11
+ A lightweight, accessible React color picker component with the look and feel of the macOS color panel. It includes a color wheel, precise RGB, HSL and HSV sliders, searchable swatches, image color sampling, opacity and an eyedropper—with zero runtime dependencies and TypeScript types included.
11
12
 
12
- - Five ways to pick: wheel, sliders, palettes, a 120-color pencil grid, and sampling from an image
13
- - An eyedropper for grabbing a color from anywhere on screen, where the browser supports it
14
- - Drops into a form like an `<input>`, with `name`, `required` and `form.reset()`
15
- - No runtime dependencies, TypeScript types included, ESM and CommonJS
13
+ **[Documentation and live demo](https://chroma-panel.jscrate.dev)** · [Quick start](https://chroma-panel.jscrate.dev/react/overview/quick-start) · [Comparison](https://chroma-panel.jscrate.dev/react/overview/comparison) · [FAQ](https://chroma-panel.jscrate.dev/react/overview/faq) · [Releases](https://chroma-panel.jscrate.dev/react/overview/releases)
16
14
 
17
- **[API reference](docs/api.md)** · **[Guide](docs/guides.md)**
15
+ - Five ways to pick a color: a [wheel](https://chroma-panel.jscrate.dev/react/modes/wheel), [RGB, HSL and HSB sliders](https://chroma-panel.jscrate.dev/react/modes/sliders), [palettes](https://chroma-panel.jscrate.dev/react/modes/palettes), a [120-color pencil grid](https://chroma-panel.jscrate.dev/react/modes/pencils), and [sampling from an image](https://chroma-panel.jscrate.dev/react/modes/image)
16
+ - Hex, RGB(A), HSL(A), HSB/HSV and opacity controls for exact color values
17
+ - An [eyedropper](https://chroma-panel.jscrate.dev/react/utils/use-eyedropper) for grabbing a color from anywhere on screen, where the browser supports it
18
+ - Drops into a [form](https://chroma-panel.jscrate.dev/react/handbook/forms) like an `<input>`, with `name`, `required` and `form.reset()`
19
+ - [Accessible](https://chroma-panel.jscrate.dev/react/overview/accessibility): every color channel is a real range input, so keyboards and screen readers work
20
+ - No runtime dependencies, TypeScript types included, ESM and CommonJS
18
21
 
19
22
  ## Install
20
23
 
@@ -22,7 +25,7 @@ A React color picker with the look and feel of the macOS color panel.
22
25
  npm install chroma-panel
23
26
  ```
24
27
 
25
- ## Use it
28
+ ## React color picker example
26
29
 
27
30
  ```tsx
28
31
  import { useState } from 'react';
@@ -41,13 +44,13 @@ export function Example() {
41
44
  }
42
45
  ```
43
46
 
44
- No CSS import and no provider. `ColorInput` renders a swatch button that opens the panel in a popover.
47
+ No CSS import and no provider. [`ColorInput`](https://chroma-panel.jscrate.dev/react/components/color-input) renders a swatch button that opens the panel in a popover.
45
48
 
46
- `onChange` fires continuously while you drag, `onChangeComplete` once when you let go. [Which to use](docs/api.md#onchange-vs-onchangecomplete).
49
+ `onChange` fires continuously while you drag, `onChangeComplete` once when you let go. [Which to use](https://chroma-panel.jscrate.dev/react/handbook/controlled#onchange-vs-onchangecomplete).
47
50
 
48
51
  ## Inline panel
49
52
 
50
- `ChromaPanel` is the same panel without the popover, for when you want it on the page:
53
+ [`ChromaPanel`](https://chroma-panel.jscrate.dev/react/components/chroma-panel) is the same panel without the popover, for when you want it on the page:
51
54
 
52
55
  ```tsx
53
56
  import { ChromaPanel } from 'chroma-panel';
@@ -55,6 +58,19 @@ import { ChromaPanel } from 'chroma-panel';
55
58
  <ChromaPanel defaultValue="#3366cc" modes={['wheel']} showTitleBar={false} />
56
59
  ```
57
60
 
61
+ ## Pick colors from an image
62
+
63
+ The image mode takes a dropped or chosen file and shows its dominant colors as swatches. The sampler behind it is exported too, for when you want the palette without the panel:
64
+
65
+ ```ts
66
+ import { extractPalette } from 'chroma-panel';
67
+
68
+ const { swatches } = await extractPalette(file, { maxColors: 8 });
69
+ // [{ hex: '#3e5f8a', rgb: [62, 95, 138], population: 4213 }, ...]
70
+ ```
71
+
72
+ It takes a `File`, a `Blob` or an image URL, and downscales large images before reading them. More in the [image mode docs](https://chroma-panel.jscrate.dev/react/modes/image).
73
+
58
74
  ## Smaller bundle
59
75
 
60
76
  Importing `chroma-panel` registers all five modes. If you only need one or two, import the shell and add them yourself:
@@ -66,11 +82,11 @@ import 'chroma-panel/wheel';
66
82
  <ChromaPanel modes={['wheel']} />
67
83
  ```
68
84
 
69
- That is 14.1 kB instead of 22.2 kB. Every mode has its own entry point — see [entry points](docs/api.md#entry-points).
85
+ That is 12.5 kB instead of 19.3 kB. Every mode has its own entry point — see [entry points](https://chroma-panel.jscrate.dev/react/utils/entry-points).
70
86
 
71
87
  ## Theming
72
88
 
73
- ![The chroma-panel color picker in light and dark themes](https://raw.githubusercontent.com/re-sohail/chroma-panel/main/assets/themes.png)
89
+ ![The chroma-panel React color picker in light and dark themes: the color wheel on a light page and the RGB sliders on a dark one](https://raw.githubusercontent.com/re-sohail/chroma-panel/main/assets/themes.png)
74
90
 
75
91
  The panel follows the system color scheme. To change how it looks, override the CSS variables or pass your own class per part:
76
92
 
@@ -78,7 +94,7 @@ The panel follows the system color scheme. To change how it looks, override the
78
94
  <ColorInput classNames={{ root: 'shadow-2xl', trigger: 'h-8 w-12' }} />
79
95
  ```
80
96
 
81
- Full details in the [theming guide](docs/guides.md#theming).
97
+ Full details in the [theming guide](https://chroma-panel.jscrate.dev/react/handbook/theming). Using Tailwind? See [styling with Tailwind](https://chroma-panel.jscrate.dev/react/handbook/tailwind).
82
98
 
83
99
  ## Why the color survives a round trip
84
100
 
@@ -92,8 +108,8 @@ Measured as the increase in a real Vite production build, gzipped, with React ex
92
108
 
93
109
  | What you import | Added to your app |
94
110
  | --- | --- |
95
- | all five modes | 22.2 kB |
96
- | shell plus one mode | 14.1 kB |
111
+ | all five modes | 19.3 kB |
112
+ | shell plus one mode | 12.5 kB |
97
113
 
98
114
  `dependencies` is empty. `react` and `react-dom` are peer dependencies, so the copy already in your app is the one that gets used.
99
115
 
@@ -106,14 +122,16 @@ Measured as the increase in a real Vite production build, gzipped, with React ex
106
122
  | Browsers | Chrome 123, Firefox 120, Safari 17.5 |
107
123
  | TypeScript | Types included, no `@types` package needed |
108
124
  | Modules | ESM and CommonJS |
109
- | Server rendering | Safe. Browser-dependent files are marked `'use client'` |
125
+ | Server rendering | Safe. Browser-dependent files are marked `'use client'`. [Next.js and SSR](https://chroma-panel.jscrate.dev/react/handbook/server-rendering) |
110
126
 
111
- The browser versions come from `light-dark()`, a CSS function the stylesheet relies on. [What happens on older browsers](docs/guides.md#browser-support).
127
+ The browser versions come from `light-dark()`, a CSS function the stylesheet relies on. [What happens on older browsers](https://chroma-panel.jscrate.dev/react/handbook/browser-support).
112
128
 
113
129
  ## Help
114
130
 
115
- Questions and bug reports: [github.com/re-sohail/chroma-panel/issues](https://github.com/re-sohail/chroma-panel/issues)
131
+ - Documentation: [chroma-panel.jscrate.dev](https://chroma-panel.jscrate.dev), including the [FAQ](https://chroma-panel.jscrate.dev/react/overview/faq) and [common mistakes](https://chroma-panel.jscrate.dev/react/handbook/common-mistakes)
132
+ - Reference in this repository: [API](docs/api.md) and [guides](docs/guides.md)
133
+ - Questions and bug reports: [github.com/re-sohail/chroma-panel/issues](https://github.com/re-sohail/chroma-panel/issues)
116
134
 
117
- ## Licence
135
+ ## License
118
136
 
119
- MIT © [Sohail Khan](https://resohail.me)
137
+ MIT © [Sohail Khan](https://me.jscrate.dev)
package/dist/modes/image/index.cjs CHANGED
@@ -165,6 +165,8 @@ function ImagePanel(props) {
165
165
  type: "file",
166
166
  accept: "image/*",
167
167
  disabled,
168
+ "aria-label": preview === null ? void 0 : "Choose a different image",
169
+ tabIndex: preview === null ? void 0 : -1,
168
170
  onChange: (e) => onFiles(e.currentTarget.files)
169
171
  }),
170
172
  preview !== null && status === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
package/dist/modes/image/index.js CHANGED
@@ -163,6 +163,8 @@ function ImagePanel(props) {
163
163
  type: "file",
164
164
  accept: "image/*",
165
165
  disabled,
166
+ "aria-label": preview === null ? void 0 : "Choose a different image",
167
+ tabIndex: preview === null ? void 0 : -1,
166
168
  onChange: (e) => onFiles(e.currentTarget.files)
167
169
  }),
168
170
  preview !== null && status === "error" && /* @__PURE__ */ jsx("p", {
package/dist/modes/palettes/index.cjs CHANGED
@@ -28,7 +28,7 @@ function PalettesPanel() {
28
28
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
29
29
  className: "cp-panel",
30
30
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
31
- className: "cp-field",
31
+ className: "cp-field cp-palette-search",
32
32
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
33
33
  className: "cp-field-label",
34
34
  htmlFor: searchId,
package/dist/modes/palettes/index.js CHANGED
@@ -26,7 +26,7 @@ function PalettesPanel() {
26
26
  return /* @__PURE__ */ jsxs("div", {
27
27
  className: "cp-panel",
28
28
  children: [/* @__PURE__ */ jsxs("div", {
29
- className: "cp-field",
29
+ className: "cp-field cp-palette-search",
30
30
  children: [/* @__PURE__ */ jsx("label", {
31
31
  className: "cp-field-label",
32
32
  htmlFor: searchId,
package/dist/style.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* chroma-panel — see https://www.npmjs.com/package/chroma-panel */
2
- @layer chroma-panel{.cp-root,.cp-sheet-root,.cp-popover{color-scheme:light dark;--cp-surface:light-dark(#ffffff,#191919);--cp-surface-raised:light-dark(#f4f4f6,#222222);--cp-surface-sunken:light-dark(#eaeaee,#111111);--cp-surface-overlay:light-dark(#ffffff,#222222);--cp-border:light-dark(#d6d6da,#3a3a3a);--cp-border-subtle:light-dark(rgb(0 0 0 / 9%),rgb(255 255 255 / 10%));--cp-text:light-dark(#1c1c1e,#ededed);--cp-text-muted:light-dark(#6b6b70,#a0a0a6);--cp-accent:light-dark(#2d7ff9,#4d94ff);--cp-focus:light-dark(#2d7ff9,#5b9cff);--cp-radius-lg:16px;--cp-radius:10px;--cp-radius-sm:7px;--cp-seg-pad:3px;--cp-ring-bleed:4px;--cp-thumb-size:18px;--cp-track-height:12px;--cp-control-height:32px;--cp-input-height:calc(var(--cp-control-height) + 2 * var(--cp-seg-pad));--cp-gap:12px;--cp-pad:14px;--cp-width:320px;--cp-disc-size:196px;--cp-panel-h:344px;--cp-h:0;--cp-s:0%;--cp-v:0%;--cp-a:1;--cp-hue-color:hsl(var(--cp-h) 100% 50%);--cp-checker-size:12px;--cp-checker:repeating-conic-gradient( light-dark(#00000014,#ffffff14) 0% 25%,transparent 0% 50%);--cp-elevation:light-dark( 0 0 0 1px rgb(0 0 0 / 6%),0 0 0 1px #3a3a3a ),light-dark( 0 10px 30px -6px rgb(0 0 0 / 18%),0 10px 24px -6px rgb(0 0 0 / 60%) ),light-dark( 0 2px 6px -2px rgb(0 0 0 / 10%),0 24px 48px -12px rgb(0 0 0 / 70%) )}.cp-root{box-sizing:border-box;width:var(--cp-width);max-width:100%;padding:var(--cp-pad);display:flex;flex-direction:column;gap:var(--cp-gap);background:var(--cp-surface);color:var(--cp-text);border-radius:var(--cp-radius-lg);box-shadow:0 0 0 1px var(--cp-border-subtle);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}.cp-root[data-cp-theme="light"],.cp-sheet-root:has(.cp-root[data-cp-theme="light"]){color-scheme:light}.cp-root[data-cp-theme="dark"],.cp-sheet-root:has(.cp-root[data-cp-theme="dark"]){color-scheme:dark}.cp-root *,.cp-root *::before,.cp-root *::after{box-sizing:border-box}.cp-root[data-cp-disabled="true"]{opacity:0.5;pointer-events:none}.cp-titlebar{display:flex;align-items:center;gap:8px;min-height:13px;--cp-light-size:14px;--cp-light-gap:10px}.cp-lights{display:flex;gap:var(--cp-light-gap)}.cp-light{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--cp-light-size);height:var(--cp-light-size);padding:0;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;color:rgb(0 0 0 / 62%)}.cp-light[data-cp-light="close"]{background:#ff5f57}.cp-light[data-cp-light="min"]{background:#febc2e}.cp-light[data-cp-light="max"]{background:#28c840}.cp-light[disabled]{opacity:0.42;cursor:default}.cp-light:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-light-glyph{width:8px;height:8px;display:block;opacity:0;transition:opacity 100ms ease}.cp-titlebar:hover .cp-light:not([disabled]) .cp-light-glyph,.cp-light:focus-visible .cp-light-glyph{opacity:1}.cp-titlebar-spacer{flex:none;width:calc(3 * var(--cp-light-size) + 2 * var(--cp-light-gap))}.cp-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--cp-text-muted)}.cp-body{display:flex;flex-direction:column;gap:var(--cp-gap);min-width:0;flex:1 1 auto;min-height:0}.cp-root[data-cp-collapsed="true"] .cp-body{display:none}.cp-root[data-cp-size="expanded"]{--cp-width:420px;--cp-disc-size:260px;--cp-panel-h:372px}.cp-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;isolation:isolate;padding:var(--cp-seg-pad);border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-seg::before{content:"";position:absolute;z-index:-1;top:var(--cp-seg-pad);bottom:var(--cp-seg-pad);left:var(--cp-seg-pad);width:calc((100% - 2 * var(--cp-seg-pad)) / var(--cp-seg-count,1));translate:calc(var(--cp-seg-active,0) * 100%) 0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:var(--cp-surface-overlay);box-shadow:0 1px 2px rgb(0 0 0 / 12%),0 0 0 1px var(--cp-border-subtle);transition:translate 180ms cubic-bezier(0.445,0.05,0.55,0.95)}.cp-seg-sm{--cp-radius:var(--cp-radius-sm);--cp-seg-pad:2px}.cp-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--cp-control-height);padding:0 6px;border:0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:transparent;color:var(--cp-text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:500;transition:color 120ms ease}.cp-tab:hover{color:var(--cp-text)}.cp-tab[aria-selected="true"]{color:var(--cp-text)}.cp-tab:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px}.cp-tab[disabled]{cursor:default}.cp-seg-sm .cp-tab{height:calc(var(--cp-control-height) - 8px);font-size:11px;letter-spacing:0.02em}.cp-tab svg{width:17px;height:17px;display:block}.cp-panel-host{display:flex;flex-direction:column;flex:1 1 var(--cp-panel-h);min-height:0;overflow-y:auto;overscroll-behavior:contain;--cp-bleed:calc(var(--cp-thumb-size) / 2 + 2px);padding-inline:var(--cp-bleed);margin-inline:calc(var(--cp-bleed) * -1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--cp-border) transparent}.cp-panel-host[data-cp-fade]{--cp-fade-t:0px;--cp-fade-b:0px;mask-image:linear-gradient(to bottom,transparent 0,#000 var(--cp-fade-t),#000 calc(100% - var(--cp-fade-b)),transparent 100%)}.cp-panel-host[data-cp-fade="start"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-t:18px}.cp-panel-host[data-cp-fade="end"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-b:18px}.cp-panel-host::-webkit-scrollbar{width:8px}.cp-panel-host::-webkit-scrollbar-track{background:transparent}.cp-panel-host::-webkit-scrollbar-thumb{background:var(--cp-border);border-radius:4px;border:2px solid transparent;background-clip:content-box}.cp-root[data-cp-modes="1"] .cp-panel-host{flex-basis:auto}.cp-panel{display:flex;flex-direction:column;gap:var(--cp-gap);flex:1 1 auto;min-height:0}.cp-disc-wrap{display:flex;justify-content:center;padding:2px 0}.cp-disc{position:relative;width:min(100%,var(--cp-disc-size));aspect-ratio:1;border-radius:50%;cursor:crosshair;outline:none;background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient( #f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100% );box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}@supports (background:conic-gradient(in hsl longer hue,red,red)){.cp-disc{background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient(in hsl longer hue,red,red)}}.cp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000;opacity:calc(1 - var(--cp-v) / 100%);pointer-events:none}.cp-disc:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-area{position:relative;width:100%;height:150px;border-radius:var(--cp-radius);cursor:crosshair;outline:none;background-color:var(--cp-hue-color);background-image:linear-gradient(to top,#000,rgb(0 0 0 / 0)),linear-gradient(to right,#fff,rgb(255 255 255 / 0));box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}.cp-area:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-thumb{position:absolute;left:var(--cp-thumb-x,50%);top:var(--cp-thumb-y,50%);width:var(--cp-thumb-size);height:var(--cp-thumb-size);margin:calc(var(--cp-thumb-size) / -2) 0 0 calc(var(--cp-thumb-size) / -2);border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgb(0 0 0 / 16%),0 1px 3px rgb(0 0 0 / 30%),0 0 0 1px rgb(0 0 0 / 12%);pointer-events:none}.cp-slider-row{display:flex;align-items:center;gap:10px}.cp-slider-label{width:14px;flex:none;text-align:center;color:var(--cp-text-muted);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.cp-slider{position:relative;flex:1;height:var(--cp-track-height);border-radius:calc(var(--cp-track-height) / 2);cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-slider:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-slider-fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(to right,#f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100%)}@supports (background:linear-gradient(in hsl longer hue,red,red)){.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(in hsl longer hue to right,red,red)}}.cp-slider .cp-thumb{top:50%}.cp-swatch,.cp-preview,.cp-trigger,.cp-slider[data-cp-channel="alpha"]{background-image:var(--cp-checker);background-size:var(--cp-checker-size) var(--cp-checker-size)}.cp-fields{display:flex;gap:8px;align-items:flex-end}.cp-field{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.cp-field-label{color:var(--cp-text-muted);font-size:11px;font-weight:500}.cp-input{width:100%;min-width:0;height:var(--cp-input-height);padding:0 8px;background:var(--cp-surface-sunken);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.cp-input:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-1px;border-color:transparent}.cp-input[aria-invalid="true"]{border-color:#e5484d}.cp-input::-webkit-outer-spin-button,.cp-input::-webkit-inner-spin-button{appearance:none;margin:0}.cp-input[type="number"]{appearance:textfield;-moz-appearance:textfield}.cp-input[type="file"]{height:auto;padding:6px 8px;font-size:11px}.cp-swatch{position:relative;width:100%;aspect-ratio:1;padding:0;display:block;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 14%),rgb(255 255 255 / 16%));outline-offset:-1px}.cp-swatch::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-swatch-color,transparent);box-shadow:inset 0 0 0 1px light-dark(rgb(255 255 255 / 22%),rgb(0 0 0 / 22%))}.cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-swatch[aria-pressed="true"]{outline:2px solid var(--cp-accent);outline-offset:2px}.cp-swatch-round,.cp-swatch-round::after{border-radius:50%}.cp-swatch-grid{display:grid;grid-template-columns:repeat(var(--cp-columns,10),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.cp-swatch-grid:not([data-cp-variant="mosaic"]){padding-block:var(--cp-ring-bleed)}.cp-swatch-grid>li{display:block;min-width:0}.cp-swatch-grid[data-cp-large="true"]>li{content-visibility:auto;contain-intrinsic-size:auto 28px}.cp-mosaic{padding:2px;border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-swatch-grid[data-cp-variant="mosaic"]{gap:0}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch{border-radius:0;outline:none;background-image:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch::after{box-shadow:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px;z-index:2}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch[aria-pressed="true"]{outline:3px solid var(--cp-surface);outline-offset:-1.5px;z-index:1}.cp-group{margin:0 0 12px}.cp-group:last-child{margin-bottom:0}.cp-group-title{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--cp-text-muted)}.cp-scroll{min-height:0}.cp-footer{display:flex;align-items:center;gap:10px;padding-top:var(--cp-gap);border-top:1px solid var(--cp-border-subtle)}.cp-footer-spacer{flex:1}.cp-preview{position:relative;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;border-radius:50%;outline:1px solid var(--cp-border-subtle);outline-offset:-1px}.cp-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-preview-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-recents{display:flex;gap:6px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.cp-recents::-webkit-scrollbar{display:none}.cp-recents[data-cp-fade]{--cp-fade-s:0px;--cp-fade-e:0px;mask-image:linear-gradient(to right,transparent 0,#000 var(--cp-fade-s),#000 calc(100% - var(--cp-fade-e)),transparent 100%)}.cp-recents[data-cp-fade="start"],.cp-recents[data-cp-fade="both"]{--cp-fade-s:14px}.cp-recents[data-cp-fade="end"],.cp-recents[data-cp-fade="both"]{--cp-fade-e:14px}.cp-recents>li{flex:none}.cp-recents .cp-swatch{width:22px;height:22px}.cp-icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;padding:0;background:var(--cp-surface-raised);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);cursor:pointer;transition:background-color 120ms ease}.cp-icon-button:hover{background:var(--cp-border-subtle)}.cp-icon-button:focus-visible{outline:2px solid var(--cp-focus);outline-offset:1px}.cp-icon-button svg{width:16px;height:16px;display:block}.cp-icon-button[disabled]{opacity:0.4;cursor:default}.cp-trigger{position:relative;width:36px;height:26px;padding:0;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 18%),rgb(255 255 255 / 20%));outline-offset:-1px}.cp-trigger::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-trigger-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-trigger:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-trigger[disabled]{opacity:0.5;cursor:default}.cp-popover{position:absolute;z-index:2147483000;margin:0;padding:0;border:0}.cp-popover .cp-root{box-shadow:var(--cp-elevation);max-height:var(--cp-available-h,none)}.cp-sheet-root{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end}.cp-scrim{position:absolute;inset:0;background:rgb(0 0 0 / 45%)}.cp-sheet{position:relative;width:100%;max-height:88svh;display:flex;flex-direction:column;overflow:hidden;background:var(--cp-surface);border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;box-shadow:0 -8px 32px rgb(0 0 0 / 35%);padding-bottom:max(8px,env(safe-area-inset-bottom))}.cp-grabber{width:36px;height:5px;flex:none;margin:8px auto 0;padding:0;border:0;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--cp-border);cursor:pointer}.cp-grabber:focus-visible{outline:2px solid var(--cp-focus);outline-offset:4px}.cp-grabber::after{content:"";position:absolute;left:50%;translate:-50% 0;margin-top:-14px;width:88px;height:32px}.cp-sheet{position:relative}.cp-dialog{display:flex;flex-direction:column;min-height:0;min-width:0}.cp-sheet>*,.cp-sheet .cp-dialog{min-height:0}.cp-sheet>.cp-dialog{flex:1 1 auto}.cp-sheet .cp-root{width:100%;max-width:none;border-radius:0;box-shadow:none;background:transparent;flex:1 1 auto;min-height:0}.cp-sheet .cp-lights{display:none}.cp-sheet .cp-titlebar{justify-content:center}.cp-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.cp-empty{margin:0;color:var(--cp-text-muted);padding:20px 12px;text-align:center;font-size:12px;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}.cp-dropzone{flex:1 1 auto;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;cursor:pointer;color:var(--cp-text-muted);font-size:12px;line-height:1.4;border:1px dashed var(--cp-border);border-radius:var(--cp-radius);background:transparent;transition:border-color 120ms ease,background-color 120ms ease}.cp-dropzone svg{width:26px;height:26px;opacity:0.65}.cp-dropzone-title{color:var(--cp-text);font-weight:550;font-size:12px}.cp-dropzone-hint{font-size:11px;opacity:0.8}.cp-dropzone:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}.cp-dropzone:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:2px}.cp-dropzone[data-cp-dragging="true"]{border-color:var(--cp-accent);border-style:solid;background:color-mix(in srgb,var(--cp-accent) 10%,transparent);color:var(--cp-text)}.cp-root[data-cp-disabled="true"] .cp-dropzone{cursor:default}.cp-image-preview{position:relative;flex:1 1 auto;min-height:72px;display:flex;border-radius:var(--cp-radius);overflow:hidden;background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-image-preview img{width:100%;height:auto;max-height:100%;margin:auto;display:block;object-fit:contain}.cp-image-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;background:rgb(0 0 0 / 62%);color:#fff}.cp-image-remove:hover{background:rgb(0 0 0 / 78%)}.cp-image-remove:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-image-remove svg{width:13px;height:13px;display:block}}body:has(.cp-sheet-root[data-cp-open="true"]){overflow:hidden}@layer chroma-panel{@media (pointer:coarse){.cp-root{--cp-control-height:36px;--cp-thumb-size:22px;--cp-panel-h:350px}.cp-tab::after,.cp-icon-button::after,.cp-trigger::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,44px);height:max(100%,44px)}.cp-icon-button,.cp-trigger{position:relative}.cp-recents .cp-swatch{width:28px;height:28px}.cp-titlebar{--cp-light-size:20px;--cp-light-gap:10px}.cp-light-glyph{width:11px;height:11px}}@media (max-width:640px){.cp-root{--cp-width:100%;--cp-disc-size:240px;--cp-pad:16px}}@media (forced-colors:active){.cp-swatch,.cp-preview,.cp-trigger,.cp-disc,.cp-area,.cp-slider-fill{forced-color-adjust:none}.cp-swatch{border:1px solid CanvasText}.cp-swatch[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:1px}.cp-seg::before{border:1px solid CanvasText}.cp-tab[aria-selected="true"]{border:1px solid Highlight}.cp-root{border:1px solid CanvasText}}@media (prefers-reduced-motion:reduce){.cp-root *,.cp-root *::before,.cp-root *::after,.cp-seg::before{transition-duration:0.01ms !important;animation-duration:0.01ms !important}}}
2
+ @layer chroma-panel{.cp-root,.cp-sheet-root,.cp-popover{color-scheme:light dark;--cp-surface:light-dark(#ffffff,#191919);--cp-surface-raised:light-dark(#f4f4f6,#222222);--cp-surface-sunken:light-dark(#eaeaee,#111111);--cp-surface-overlay:light-dark(#ffffff,#222222);--cp-border:light-dark(#d6d6da,#3a3a3a);--cp-border-subtle:light-dark(rgb(0 0 0 / 9%),rgb(255 255 255 / 10%));--cp-text:light-dark(#1c1c1e,#ededed);--cp-text-muted:light-dark(#6b6b70,#a0a0a6);--cp-accent:light-dark(#2d7ff9,#4d94ff);--cp-focus:light-dark(#2d7ff9,#5b9cff);--cp-radius-lg:16px;--cp-radius:10px;--cp-radius-sm:7px;--cp-seg-pad:3px;--cp-ring-bleed:4px;--cp-thumb-size:18px;--cp-track-height:12px;--cp-control-height:32px;--cp-input-height:calc(var(--cp-control-height) + 2 * var(--cp-seg-pad));--cp-gap:12px;--cp-pad:14px;--cp-width:320px;--cp-disc-size:196px;--cp-panel-h:344px;--cp-h:0;--cp-s:0%;--cp-v:0%;--cp-a:1;--cp-hue-color:hsl(var(--cp-h) 100% 50%);--cp-checker-size:12px;--cp-checker:repeating-conic-gradient( light-dark(#00000014,#ffffff14) 0% 25%,transparent 0% 50%);--cp-elevation:light-dark( 0 0 0 1px rgb(0 0 0 / 6%),0 0 0 1px #3a3a3a ),light-dark( 0 10px 30px -6px rgb(0 0 0 / 18%),0 10px 24px -6px rgb(0 0 0 / 60%) ),light-dark( 0 2px 6px -2px rgb(0 0 0 / 10%),0 24px 48px -12px rgb(0 0 0 / 70%) )}.cp-root{box-sizing:border-box;width:var(--cp-width);max-width:100%;padding:var(--cp-pad);display:flex;flex-direction:column;gap:var(--cp-gap);background:var(--cp-surface);color:var(--cp-text);border-radius:var(--cp-radius-lg);box-shadow:0 0 0 1px var(--cp-border-subtle);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}.cp-root[data-cp-theme="light"],.cp-sheet-root:has(.cp-root[data-cp-theme="light"]){color-scheme:light}.cp-root[data-cp-theme="dark"],.cp-sheet-root:has(.cp-root[data-cp-theme="dark"]){color-scheme:dark}.cp-root *,.cp-root *::before,.cp-root *::after{box-sizing:border-box}.cp-root[data-cp-disabled="true"]{opacity:0.5;pointer-events:none}.cp-titlebar{display:flex;align-items:center;gap:8px;min-height:13px;--cp-light-size:14px;--cp-light-gap:10px}.cp-lights{display:flex;gap:var(--cp-light-gap)}.cp-light{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--cp-light-size);height:var(--cp-light-size);padding:0;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;color:rgb(0 0 0 / 62%)}.cp-light[data-cp-light="close"]{background:#ff5f57}.cp-light[data-cp-light="min"]{background:#febc2e}.cp-light[data-cp-light="max"]{background:#28c840}.cp-light[disabled]{opacity:0.42;cursor:default}.cp-light:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-light-glyph{width:8px;height:8px;display:block;opacity:0;transition:opacity 100ms ease}.cp-titlebar:hover .cp-light:not([disabled]) .cp-light-glyph,.cp-light:focus-visible .cp-light-glyph{opacity:1}.cp-titlebar-spacer{flex:none;width:calc(3 * var(--cp-light-size) + 2 * var(--cp-light-gap))}.cp-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--cp-text-muted)}.cp-body{display:flex;flex-direction:column;gap:var(--cp-gap);min-width:0;flex:1 1 auto;min-height:0}.cp-root[data-cp-collapsed="true"] .cp-body{display:none}.cp-root[data-cp-size="expanded"]{--cp-width:420px;--cp-disc-size:260px;--cp-panel-h:372px}.cp-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;isolation:isolate;padding:var(--cp-seg-pad);border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-seg::before{content:"";position:absolute;z-index:-1;top:var(--cp-seg-pad);bottom:var(--cp-seg-pad);left:var(--cp-seg-pad);width:calc((100% - 2 * var(--cp-seg-pad)) / var(--cp-seg-count,1));translate:calc(var(--cp-seg-active,0) * 100%) 0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:var(--cp-surface-overlay);box-shadow:0 1px 2px rgb(0 0 0 / 12%),0 0 0 1px var(--cp-border-subtle);transition:translate 180ms cubic-bezier(0.445,0.05,0.55,0.95)}.cp-seg-sm{--cp-radius:var(--cp-radius-sm);--cp-seg-pad:2px}.cp-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--cp-control-height);padding:0 6px;border:0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:transparent;color:var(--cp-text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:500;transition:color 120ms ease}.cp-tab:hover{color:var(--cp-text)}.cp-tab[aria-selected="true"]{color:var(--cp-text)}.cp-tab:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px}.cp-tab[disabled]{cursor:default}.cp-seg-sm .cp-tab{height:calc(var(--cp-control-height) - 8px);font-size:11px;letter-spacing:0.02em}.cp-tab svg{width:17px;height:17px;display:block}.cp-panel-host{display:flex;flex-direction:column;flex:1 1 var(--cp-panel-h);min-height:0;overflow-y:auto;overscroll-behavior:contain;--cp-bleed:calc(var(--cp-thumb-size) / 2 + 2px);padding-inline:var(--cp-bleed);margin-inline:calc(var(--cp-bleed) * -1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--cp-border) transparent}.cp-panel-host[data-cp-fade]{--cp-fade-t:0px;--cp-fade-b:0px;mask-image:linear-gradient(to bottom,transparent 0,#000 var(--cp-fade-t),#000 calc(100% - var(--cp-fade-b)),transparent 100%)}.cp-panel-host[data-cp-fade="start"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-t:18px}.cp-panel-host[data-cp-fade="end"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-b:18px}.cp-panel-host::-webkit-scrollbar{width:8px}.cp-panel-host::-webkit-scrollbar-track{background:transparent}.cp-panel-host::-webkit-scrollbar-thumb{background:var(--cp-border);border-radius:4px;border:2px solid transparent;background-clip:content-box}.cp-root[data-cp-modes="1"] .cp-panel-host{flex-basis:auto}.cp-panel{display:flex;flex-direction:column;gap:var(--cp-gap);flex:1 1 auto;min-height:0}.cp-disc-wrap{display:flex;justify-content:center;padding:2px 0}.cp-disc{position:relative;width:min(100%,var(--cp-disc-size));aspect-ratio:1;border-radius:50%;cursor:crosshair;outline:none;background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient( #f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100% );box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}@supports (background:conic-gradient(in hsl longer hue,red,red)){.cp-disc{background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient(in hsl longer hue,red,red)}}.cp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000;opacity:calc(1 - var(--cp-v) / 100%);pointer-events:none}.cp-disc:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-area{position:relative;width:100%;height:150px;border-radius:var(--cp-radius);cursor:crosshair;outline:none;background-color:var(--cp-hue-color);background-image:linear-gradient(to top,#000,rgb(0 0 0 / 0)),linear-gradient(to right,#fff,rgb(255 255 255 / 0));box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}.cp-area:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-thumb{position:absolute;left:var(--cp-thumb-x,50%);top:var(--cp-thumb-y,50%);width:var(--cp-thumb-size);height:var(--cp-thumb-size);margin:calc(var(--cp-thumb-size) / -2) 0 0 calc(var(--cp-thumb-size) / -2);border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgb(0 0 0 / 16%),0 1px 3px rgb(0 0 0 / 30%),0 0 0 1px rgb(0 0 0 / 12%);pointer-events:none}.cp-slider-row{display:flex;align-items:center;gap:10px}.cp-slider-label{width:14px;flex:none;text-align:center;color:var(--cp-text-muted);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.cp-slider{position:relative;flex:1;height:var(--cp-track-height);border-radius:calc(var(--cp-track-height) / 2);cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-slider:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-slider-fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(to right,#f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100%)}@supports (background:linear-gradient(in hsl longer hue,red,red)){.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(in hsl longer hue to right,red,red)}}.cp-slider .cp-thumb{top:50%}.cp-swatch,.cp-preview,.cp-trigger,.cp-slider[data-cp-channel="alpha"]{background-image:var(--cp-checker);background-size:var(--cp-checker-size) var(--cp-checker-size)}.cp-fields{display:flex;gap:8px;align-items:flex-end}.cp-field{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.cp-palette-search{flex:none}.cp-field-label{color:var(--cp-text-muted);font-size:11px;font-weight:500}.cp-input{width:100%;min-width:0;height:var(--cp-input-height);padding:0 8px;background:var(--cp-surface-sunken);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.cp-input:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-1px;border-color:transparent}.cp-input[aria-invalid="true"]{border-color:#e5484d}.cp-input::-webkit-outer-spin-button,.cp-input::-webkit-inner-spin-button{appearance:none;margin:0}.cp-input[type="number"]{appearance:textfield;-moz-appearance:textfield}.cp-input[type="file"]{height:auto;padding:6px 8px;font-size:11px}.cp-swatch{position:relative;width:100%;aspect-ratio:1;padding:0;display:block;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 14%),rgb(255 255 255 / 16%));outline-offset:-1px}.cp-swatch::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-swatch-color,transparent);box-shadow:inset 0 0 0 1px light-dark(rgb(255 255 255 / 22%),rgb(0 0 0 / 22%))}.cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-swatch[aria-pressed="true"]{outline:2px solid var(--cp-accent);outline-offset:2px}.cp-swatch-round,.cp-swatch-round::after{border-radius:50%}.cp-swatch-grid{display:grid;grid-template-columns:repeat(var(--cp-columns,10),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.cp-swatch-grid:not([data-cp-variant="mosaic"]){padding-block:var(--cp-ring-bleed)}.cp-swatch-grid>li{display:block;min-width:0}.cp-swatch-grid[data-cp-large="true"]>li{content-visibility:auto;contain-intrinsic-size:auto 28px}.cp-mosaic{padding:2px;border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-swatch-grid[data-cp-variant="mosaic"]{gap:0}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch{border-radius:0;outline:none;background-image:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch::after{box-shadow:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px;z-index:2}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch[aria-pressed="true"]{outline:3px solid var(--cp-surface);outline-offset:-1.5px;z-index:1}.cp-group{margin:0 0 12px}.cp-group:last-child{margin-bottom:0}.cp-group-title{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--cp-text-muted)}.cp-scroll{min-height:0}.cp-footer{display:flex;align-items:center;gap:10px;padding-top:var(--cp-gap);border-top:1px solid var(--cp-border-subtle)}.cp-footer-spacer{flex:1}.cp-preview{position:relative;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;border-radius:50%;outline:1px solid var(--cp-border-subtle);outline-offset:-1px}.cp-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-preview-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-recents{display:flex;gap:6px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.cp-recents::-webkit-scrollbar{display:none}.cp-recents[data-cp-fade]{--cp-fade-s:0px;--cp-fade-e:0px;mask-image:linear-gradient(to right,transparent 0,#000 var(--cp-fade-s),#000 calc(100% - var(--cp-fade-e)),transparent 100%)}.cp-recents[data-cp-fade="start"],.cp-recents[data-cp-fade="both"]{--cp-fade-s:14px}.cp-recents[data-cp-fade="end"],.cp-recents[data-cp-fade="both"]{--cp-fade-e:14px}.cp-recents>li{flex:none}.cp-recents .cp-swatch{width:22px;height:22px}.cp-icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;padding:0;background:var(--cp-surface-raised);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);cursor:pointer;transition:background-color 120ms ease}.cp-icon-button:hover{background:var(--cp-border-subtle)}.cp-icon-button:focus-visible{outline:2px solid var(--cp-focus);outline-offset:1px}.cp-icon-button svg{width:16px;height:16px;display:block}.cp-icon-button[disabled]{opacity:0.4;cursor:default}.cp-trigger{position:relative;width:36px;height:26px;padding:0;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 18%),rgb(255 255 255 / 20%));outline-offset:-1px}.cp-trigger::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-trigger-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-trigger:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-trigger[disabled]{opacity:0.5;cursor:default}.cp-popover{position:absolute;z-index:2147483000;margin:0;padding:0;border:0}.cp-popover .cp-root{box-shadow:var(--cp-elevation);max-height:var(--cp-available-h,none)}.cp-sheet-root{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end}.cp-scrim{position:absolute;inset:0;background:rgb(0 0 0 / 45%)}.cp-sheet{position:relative;width:100%;max-height:88svh;display:flex;flex-direction:column;overflow:hidden;background:var(--cp-surface);border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;box-shadow:0 -8px 32px rgb(0 0 0 / 35%);padding-bottom:max(8px,env(safe-area-inset-bottom))}.cp-grabber{width:36px;height:5px;flex:none;margin:8px auto 0;padding:0;border:0;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--cp-border);cursor:pointer}.cp-grabber:focus-visible{outline:2px solid var(--cp-focus);outline-offset:4px}.cp-grabber::after{content:"";position:absolute;left:50%;translate:-50% 0;margin-top:-14px;width:88px;height:32px}.cp-sheet{position:relative}.cp-dialog{display:flex;flex-direction:column;min-height:0;min-width:0}.cp-sheet>*,.cp-sheet .cp-dialog{min-height:0}.cp-sheet>.cp-dialog{flex:1 1 auto}.cp-sheet .cp-root{width:100%;max-width:none;border-radius:0;box-shadow:none;background:transparent;flex:1 1 auto;min-height:0}.cp-sheet .cp-lights{display:none}.cp-sheet .cp-titlebar{justify-content:center}.cp-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.cp-empty{margin:0;color:var(--cp-text-muted);padding:20px 12px;text-align:center;font-size:12px;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}.cp-dropzone{flex:1 1 auto;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;cursor:pointer;color:var(--cp-text-muted);font-size:12px;line-height:1.4;border:1px dashed var(--cp-border);border-radius:var(--cp-radius);background:transparent;transition:border-color 120ms ease,background-color 120ms ease}.cp-dropzone svg{width:26px;height:26px;opacity:0.65}.cp-dropzone-title{color:var(--cp-text);font-weight:550;font-size:12px}.cp-dropzone-hint{font-size:11px;opacity:0.8}.cp-dropzone:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}.cp-dropzone:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:2px}.cp-dropzone[data-cp-dragging="true"]{border-color:var(--cp-accent);border-style:solid;background:color-mix(in srgb,var(--cp-accent) 10%,transparent);color:var(--cp-text)}.cp-root[data-cp-disabled="true"] .cp-dropzone{cursor:default}.cp-image-preview{position:relative;flex:1 1 auto;min-height:72px;display:flex;border-radius:var(--cp-radius);overflow:hidden;background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-image-preview img{width:100%;height:auto;max-height:100%;margin:auto;display:block;object-fit:contain}.cp-image-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;background:rgb(0 0 0 / 62%);color:#fff}.cp-image-remove:hover{background:rgb(0 0 0 / 78%)}.cp-image-remove:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-image-remove svg{width:13px;height:13px;display:block}}body:has(.cp-sheet-root[data-cp-open="true"]){overflow:hidden}@layer chroma-panel{@media (pointer:coarse){.cp-root{--cp-control-height:36px;--cp-thumb-size:22px;--cp-panel-h:350px}.cp-tab::after,.cp-icon-button::after,.cp-trigger::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,44px);height:max(100%,44px)}.cp-icon-button,.cp-trigger{position:relative}.cp-recents .cp-swatch{width:28px;height:28px}.cp-titlebar{--cp-light-size:20px;--cp-light-gap:10px}.cp-light-glyph{width:11px;height:11px}}@media (max-width:640px){.cp-root{--cp-width:100%;--cp-disc-size:240px;--cp-pad:16px}}@media (forced-colors:active){.cp-swatch,.cp-preview,.cp-trigger,.cp-disc,.cp-area,.cp-slider-fill{forced-color-adjust:none}.cp-swatch{border:1px solid CanvasText}.cp-swatch[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:1px}.cp-seg::before{border:1px solid CanvasText}.cp-tab[aria-selected="true"]{border:1px solid Highlight}.cp-root{border:1px solid CanvasText}}@media (prefers-reduced-motion:reduce){.cp-root *,.cp-root *::before,.cp-root *::after,.cp-seg::before{transition-duration:0.01ms !important;animation-duration:0.01ms !important}}}
package/dist/styles/css.cjs CHANGED
@@ -1,4 +1,4 @@
1
1
  //#region src/styles/css.ts
2
- const css = `@layer chroma-panel{.cp-root,.cp-sheet-root,.cp-popover{color-scheme:light dark;--cp-surface:light-dark(#ffffff,#191919);--cp-surface-raised:light-dark(#f4f4f6,#222222);--cp-surface-sunken:light-dark(#eaeaee,#111111);--cp-surface-overlay:light-dark(#ffffff,#222222);--cp-border:light-dark(#d6d6da,#3a3a3a);--cp-border-subtle:light-dark(rgb(0 0 0 / 9%),rgb(255 255 255 / 10%));--cp-text:light-dark(#1c1c1e,#ededed);--cp-text-muted:light-dark(#6b6b70,#a0a0a6);--cp-accent:light-dark(#2d7ff9,#4d94ff);--cp-focus:light-dark(#2d7ff9,#5b9cff);--cp-radius-lg:16px;--cp-radius:10px;--cp-radius-sm:7px;--cp-seg-pad:3px;--cp-ring-bleed:4px;--cp-thumb-size:18px;--cp-track-height:12px;--cp-control-height:32px;--cp-input-height:calc(var(--cp-control-height) + 2 * var(--cp-seg-pad));--cp-gap:12px;--cp-pad:14px;--cp-width:320px;--cp-disc-size:196px;--cp-panel-h:344px;--cp-h:0;--cp-s:0%;--cp-v:0%;--cp-a:1;--cp-hue-color:hsl(var(--cp-h) 100% 50%);--cp-checker-size:12px;--cp-checker:repeating-conic-gradient( light-dark(#00000014,#ffffff14) 0% 25%,transparent 0% 50%);--cp-elevation:light-dark( 0 0 0 1px rgb(0 0 0 / 6%),0 0 0 1px #3a3a3a ),light-dark( 0 10px 30px -6px rgb(0 0 0 / 18%),0 10px 24px -6px rgb(0 0 0 / 60%) ),light-dark( 0 2px 6px -2px rgb(0 0 0 / 10%),0 24px 48px -12px rgb(0 0 0 / 70%) )}.cp-root{box-sizing:border-box;width:var(--cp-width);max-width:100%;padding:var(--cp-pad);display:flex;flex-direction:column;gap:var(--cp-gap);background:var(--cp-surface);color:var(--cp-text);border-radius:var(--cp-radius-lg);box-shadow:0 0 0 1px var(--cp-border-subtle);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}.cp-root[data-cp-theme="light"],.cp-sheet-root:has(.cp-root[data-cp-theme="light"]){color-scheme:light}.cp-root[data-cp-theme="dark"],.cp-sheet-root:has(.cp-root[data-cp-theme="dark"]){color-scheme:dark}.cp-root *,.cp-root *::before,.cp-root *::after{box-sizing:border-box}.cp-root[data-cp-disabled="true"]{opacity:0.5;pointer-events:none}.cp-titlebar{display:flex;align-items:center;gap:8px;min-height:13px;--cp-light-size:14px;--cp-light-gap:10px}.cp-lights{display:flex;gap:var(--cp-light-gap)}.cp-light{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--cp-light-size);height:var(--cp-light-size);padding:0;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;color:rgb(0 0 0 / 62%)}.cp-light[data-cp-light="close"]{background:#ff5f57}.cp-light[data-cp-light="min"]{background:#febc2e}.cp-light[data-cp-light="max"]{background:#28c840}.cp-light[disabled]{opacity:0.42;cursor:default}.cp-light:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-light-glyph{width:8px;height:8px;display:block;opacity:0;transition:opacity 100ms ease}.cp-titlebar:hover .cp-light:not([disabled]) .cp-light-glyph,.cp-light:focus-visible .cp-light-glyph{opacity:1}.cp-titlebar-spacer{flex:none;width:calc(3 * var(--cp-light-size) + 2 * var(--cp-light-gap))}.cp-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--cp-text-muted)}.cp-body{display:flex;flex-direction:column;gap:var(--cp-gap);min-width:0;flex:1 1 auto;min-height:0}.cp-root[data-cp-collapsed="true"] .cp-body{display:none}.cp-root[data-cp-size="expanded"]{--cp-width:420px;--cp-disc-size:260px;--cp-panel-h:372px}.cp-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;isolation:isolate;padding:var(--cp-seg-pad);border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-seg::before{content:"";position:absolute;z-index:-1;top:var(--cp-seg-pad);bottom:var(--cp-seg-pad);left:var(--cp-seg-pad);width:calc((100% - 2 * var(--cp-seg-pad)) / var(--cp-seg-count,1));translate:calc(var(--cp-seg-active,0) * 100%) 0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:var(--cp-surface-overlay);box-shadow:0 1px 2px rgb(0 0 0 / 12%),0 0 0 1px var(--cp-border-subtle);transition:translate 180ms cubic-bezier(0.445,0.05,0.55,0.95)}.cp-seg-sm{--cp-radius:var(--cp-radius-sm);--cp-seg-pad:2px}.cp-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--cp-control-height);padding:0 6px;border:0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:transparent;color:var(--cp-text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:500;transition:color 120ms ease}.cp-tab:hover{color:var(--cp-text)}.cp-tab[aria-selected="true"]{color:var(--cp-text)}.cp-tab:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px}.cp-tab[disabled]{cursor:default}.cp-seg-sm .cp-tab{height:calc(var(--cp-control-height) - 8px);font-size:11px;letter-spacing:0.02em}.cp-tab svg{width:17px;height:17px;display:block}.cp-panel-host{display:flex;flex-direction:column;flex:1 1 var(--cp-panel-h);min-height:0;overflow-y:auto;overscroll-behavior:contain;--cp-bleed:calc(var(--cp-thumb-size) / 2 + 2px);padding-inline:var(--cp-bleed);margin-inline:calc(var(--cp-bleed) * -1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--cp-border) transparent}.cp-panel-host[data-cp-fade]{--cp-fade-t:0px;--cp-fade-b:0px;mask-image:linear-gradient(to bottom,transparent 0,#000 var(--cp-fade-t),#000 calc(100% - var(--cp-fade-b)),transparent 100%)}.cp-panel-host[data-cp-fade="start"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-t:18px}.cp-panel-host[data-cp-fade="end"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-b:18px}.cp-panel-host::-webkit-scrollbar{width:8px}.cp-panel-host::-webkit-scrollbar-track{background:transparent}.cp-panel-host::-webkit-scrollbar-thumb{background:var(--cp-border);border-radius:4px;border:2px solid transparent;background-clip:content-box}.cp-root[data-cp-modes="1"] .cp-panel-host{flex-basis:auto}.cp-panel{display:flex;flex-direction:column;gap:var(--cp-gap);flex:1 1 auto;min-height:0}.cp-disc-wrap{display:flex;justify-content:center;padding:2px 0}.cp-disc{position:relative;width:min(100%,var(--cp-disc-size));aspect-ratio:1;border-radius:50%;cursor:crosshair;outline:none;background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient( #f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100% );box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}@supports (background:conic-gradient(in hsl longer hue,red,red)){.cp-disc{background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient(in hsl longer hue,red,red)}}.cp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000;opacity:calc(1 - var(--cp-v) / 100%);pointer-events:none}.cp-disc:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-area{position:relative;width:100%;height:150px;border-radius:var(--cp-radius);cursor:crosshair;outline:none;background-color:var(--cp-hue-color);background-image:linear-gradient(to top,#000,rgb(0 0 0 / 0)),linear-gradient(to right,#fff,rgb(255 255 255 / 0));box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}.cp-area:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-thumb{position:absolute;left:var(--cp-thumb-x,50%);top:var(--cp-thumb-y,50%);width:var(--cp-thumb-size);height:var(--cp-thumb-size);margin:calc(var(--cp-thumb-size) / -2) 0 0 calc(var(--cp-thumb-size) / -2);border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgb(0 0 0 / 16%),0 1px 3px rgb(0 0 0 / 30%),0 0 0 1px rgb(0 0 0 / 12%);pointer-events:none}.cp-slider-row{display:flex;align-items:center;gap:10px}.cp-slider-label{width:14px;flex:none;text-align:center;color:var(--cp-text-muted);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.cp-slider{position:relative;flex:1;height:var(--cp-track-height);border-radius:calc(var(--cp-track-height) / 2);cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-slider:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-slider-fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(to right,#f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100%)}@supports (background:linear-gradient(in hsl longer hue,red,red)){.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(in hsl longer hue to right,red,red)}}.cp-slider .cp-thumb{top:50%}.cp-swatch,.cp-preview,.cp-trigger,.cp-slider[data-cp-channel="alpha"]{background-image:var(--cp-checker);background-size:var(--cp-checker-size) var(--cp-checker-size)}.cp-fields{display:flex;gap:8px;align-items:flex-end}.cp-field{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.cp-field-label{color:var(--cp-text-muted);font-size:11px;font-weight:500}.cp-input{width:100%;min-width:0;height:var(--cp-input-height);padding:0 8px;background:var(--cp-surface-sunken);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.cp-input:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-1px;border-color:transparent}.cp-input[aria-invalid="true"]{border-color:#e5484d}.cp-input::-webkit-outer-spin-button,.cp-input::-webkit-inner-spin-button{appearance:none;margin:0}.cp-input[type="number"]{appearance:textfield;-moz-appearance:textfield}.cp-input[type="file"]{height:auto;padding:6px 8px;font-size:11px}.cp-swatch{position:relative;width:100%;aspect-ratio:1;padding:0;display:block;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 14%),rgb(255 255 255 / 16%));outline-offset:-1px}.cp-swatch::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-swatch-color,transparent);box-shadow:inset 0 0 0 1px light-dark(rgb(255 255 255 / 22%),rgb(0 0 0 / 22%))}.cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-swatch[aria-pressed="true"]{outline:2px solid var(--cp-accent);outline-offset:2px}.cp-swatch-round,.cp-swatch-round::after{border-radius:50%}.cp-swatch-grid{display:grid;grid-template-columns:repeat(var(--cp-columns,10),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.cp-swatch-grid:not([data-cp-variant="mosaic"]){padding-block:var(--cp-ring-bleed)}.cp-swatch-grid>li{display:block;min-width:0}.cp-swatch-grid[data-cp-large="true"]>li{content-visibility:auto;contain-intrinsic-size:auto 28px}.cp-mosaic{padding:2px;border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-swatch-grid[data-cp-variant="mosaic"]{gap:0}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch{border-radius:0;outline:none;background-image:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch::after{box-shadow:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px;z-index:2}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch[aria-pressed="true"]{outline:3px solid var(--cp-surface);outline-offset:-1.5px;z-index:1}.cp-group{margin:0 0 12px}.cp-group:last-child{margin-bottom:0}.cp-group-title{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--cp-text-muted)}.cp-scroll{min-height:0}.cp-footer{display:flex;align-items:center;gap:10px;padding-top:var(--cp-gap);border-top:1px solid var(--cp-border-subtle)}.cp-footer-spacer{flex:1}.cp-preview{position:relative;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;border-radius:50%;outline:1px solid var(--cp-border-subtle);outline-offset:-1px}.cp-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-preview-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-recents{display:flex;gap:6px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.cp-recents::-webkit-scrollbar{display:none}.cp-recents[data-cp-fade]{--cp-fade-s:0px;--cp-fade-e:0px;mask-image:linear-gradient(to right,transparent 0,#000 var(--cp-fade-s),#000 calc(100% - var(--cp-fade-e)),transparent 100%)}.cp-recents[data-cp-fade="start"],.cp-recents[data-cp-fade="both"]{--cp-fade-s:14px}.cp-recents[data-cp-fade="end"],.cp-recents[data-cp-fade="both"]{--cp-fade-e:14px}.cp-recents>li{flex:none}.cp-recents .cp-swatch{width:22px;height:22px}.cp-icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;padding:0;background:var(--cp-surface-raised);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);cursor:pointer;transition:background-color 120ms ease}.cp-icon-button:hover{background:var(--cp-border-subtle)}.cp-icon-button:focus-visible{outline:2px solid var(--cp-focus);outline-offset:1px}.cp-icon-button svg{width:16px;height:16px;display:block}.cp-icon-button[disabled]{opacity:0.4;cursor:default}.cp-trigger{position:relative;width:36px;height:26px;padding:0;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 18%),rgb(255 255 255 / 20%));outline-offset:-1px}.cp-trigger::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-trigger-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-trigger:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-trigger[disabled]{opacity:0.5;cursor:default}.cp-popover{position:absolute;z-index:2147483000;margin:0;padding:0;border:0}.cp-popover .cp-root{box-shadow:var(--cp-elevation);max-height:var(--cp-available-h,none)}.cp-sheet-root{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end}.cp-scrim{position:absolute;inset:0;background:rgb(0 0 0 / 45%)}.cp-sheet{position:relative;width:100%;max-height:88svh;display:flex;flex-direction:column;overflow:hidden;background:var(--cp-surface);border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;box-shadow:0 -8px 32px rgb(0 0 0 / 35%);padding-bottom:max(8px,env(safe-area-inset-bottom))}.cp-grabber{width:36px;height:5px;flex:none;margin:8px auto 0;padding:0;border:0;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--cp-border);cursor:pointer}.cp-grabber:focus-visible{outline:2px solid var(--cp-focus);outline-offset:4px}.cp-grabber::after{content:"";position:absolute;left:50%;translate:-50% 0;margin-top:-14px;width:88px;height:32px}.cp-sheet{position:relative}.cp-dialog{display:flex;flex-direction:column;min-height:0;min-width:0}.cp-sheet>*,.cp-sheet .cp-dialog{min-height:0}.cp-sheet>.cp-dialog{flex:1 1 auto}.cp-sheet .cp-root{width:100%;max-width:none;border-radius:0;box-shadow:none;background:transparent;flex:1 1 auto;min-height:0}.cp-sheet .cp-lights{display:none}.cp-sheet .cp-titlebar{justify-content:center}.cp-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.cp-empty{margin:0;color:var(--cp-text-muted);padding:20px 12px;text-align:center;font-size:12px;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}.cp-dropzone{flex:1 1 auto;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;cursor:pointer;color:var(--cp-text-muted);font-size:12px;line-height:1.4;border:1px dashed var(--cp-border);border-radius:var(--cp-radius);background:transparent;transition:border-color 120ms ease,background-color 120ms ease}.cp-dropzone svg{width:26px;height:26px;opacity:0.65}.cp-dropzone-title{color:var(--cp-text);font-weight:550;font-size:12px}.cp-dropzone-hint{font-size:11px;opacity:0.8}.cp-dropzone:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}.cp-dropzone:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:2px}.cp-dropzone[data-cp-dragging="true"]{border-color:var(--cp-accent);border-style:solid;background:color-mix(in srgb,var(--cp-accent) 10%,transparent);color:var(--cp-text)}.cp-root[data-cp-disabled="true"] .cp-dropzone{cursor:default}.cp-image-preview{position:relative;flex:1 1 auto;min-height:72px;display:flex;border-radius:var(--cp-radius);overflow:hidden;background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-image-preview img{width:100%;height:auto;max-height:100%;margin:auto;display:block;object-fit:contain}.cp-image-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;background:rgb(0 0 0 / 62%);color:#fff}.cp-image-remove:hover{background:rgb(0 0 0 / 78%)}.cp-image-remove:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-image-remove svg{width:13px;height:13px;display:block}}body:has(.cp-sheet-root[data-cp-open="true"]){overflow:hidden}@layer chroma-panel{@media (pointer:coarse){.cp-root{--cp-control-height:36px;--cp-thumb-size:22px;--cp-panel-h:350px}.cp-tab::after,.cp-icon-button::after,.cp-trigger::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,44px);height:max(100%,44px)}.cp-icon-button,.cp-trigger{position:relative}.cp-recents .cp-swatch{width:28px;height:28px}.cp-titlebar{--cp-light-size:20px;--cp-light-gap:10px}.cp-light-glyph{width:11px;height:11px}}@media (max-width:640px){.cp-root{--cp-width:100%;--cp-disc-size:240px;--cp-pad:16px}}@media (forced-colors:active){.cp-swatch,.cp-preview,.cp-trigger,.cp-disc,.cp-area,.cp-slider-fill{forced-color-adjust:none}.cp-swatch{border:1px solid CanvasText}.cp-swatch[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:1px}.cp-seg::before{border:1px solid CanvasText}.cp-tab[aria-selected="true"]{border:1px solid Highlight}.cp-root{border:1px solid CanvasText}}@media (prefers-reduced-motion:reduce){.cp-root *,.cp-root *::before,.cp-root *::after,.cp-seg::before{transition-duration:0.01ms !important;animation-duration:0.01ms !important}}}`;
2
+ const css = `@layer chroma-panel{.cp-root,.cp-sheet-root,.cp-popover{color-scheme:light dark;--cp-surface:light-dark(#ffffff,#191919);--cp-surface-raised:light-dark(#f4f4f6,#222222);--cp-surface-sunken:light-dark(#eaeaee,#111111);--cp-surface-overlay:light-dark(#ffffff,#222222);--cp-border:light-dark(#d6d6da,#3a3a3a);--cp-border-subtle:light-dark(rgb(0 0 0 / 9%),rgb(255 255 255 / 10%));--cp-text:light-dark(#1c1c1e,#ededed);--cp-text-muted:light-dark(#6b6b70,#a0a0a6);--cp-accent:light-dark(#2d7ff9,#4d94ff);--cp-focus:light-dark(#2d7ff9,#5b9cff);--cp-radius-lg:16px;--cp-radius:10px;--cp-radius-sm:7px;--cp-seg-pad:3px;--cp-ring-bleed:4px;--cp-thumb-size:18px;--cp-track-height:12px;--cp-control-height:32px;--cp-input-height:calc(var(--cp-control-height) + 2 * var(--cp-seg-pad));--cp-gap:12px;--cp-pad:14px;--cp-width:320px;--cp-disc-size:196px;--cp-panel-h:344px;--cp-h:0;--cp-s:0%;--cp-v:0%;--cp-a:1;--cp-hue-color:hsl(var(--cp-h) 100% 50%);--cp-checker-size:12px;--cp-checker:repeating-conic-gradient( light-dark(#00000014,#ffffff14) 0% 25%,transparent 0% 50%);--cp-elevation:light-dark( 0 0 0 1px rgb(0 0 0 / 6%),0 0 0 1px #3a3a3a ),light-dark( 0 10px 30px -6px rgb(0 0 0 / 18%),0 10px 24px -6px rgb(0 0 0 / 60%) ),light-dark( 0 2px 6px -2px rgb(0 0 0 / 10%),0 24px 48px -12px rgb(0 0 0 / 70%) )}.cp-root{box-sizing:border-box;width:var(--cp-width);max-width:100%;padding:var(--cp-pad);display:flex;flex-direction:column;gap:var(--cp-gap);background:var(--cp-surface);color:var(--cp-text);border-radius:var(--cp-radius-lg);box-shadow:0 0 0 1px var(--cp-border-subtle);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}.cp-root[data-cp-theme="light"],.cp-sheet-root:has(.cp-root[data-cp-theme="light"]){color-scheme:light}.cp-root[data-cp-theme="dark"],.cp-sheet-root:has(.cp-root[data-cp-theme="dark"]){color-scheme:dark}.cp-root *,.cp-root *::before,.cp-root *::after{box-sizing:border-box}.cp-root[data-cp-disabled="true"]{opacity:0.5;pointer-events:none}.cp-titlebar{display:flex;align-items:center;gap:8px;min-height:13px;--cp-light-size:14px;--cp-light-gap:10px}.cp-lights{display:flex;gap:var(--cp-light-gap)}.cp-light{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--cp-light-size);height:var(--cp-light-size);padding:0;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;color:rgb(0 0 0 / 62%)}.cp-light[data-cp-light="close"]{background:#ff5f57}.cp-light[data-cp-light="min"]{background:#febc2e}.cp-light[data-cp-light="max"]{background:#28c840}.cp-light[disabled]{opacity:0.42;cursor:default}.cp-light:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-light-glyph{width:8px;height:8px;display:block;opacity:0;transition:opacity 100ms ease}.cp-titlebar:hover .cp-light:not([disabled]) .cp-light-glyph,.cp-light:focus-visible .cp-light-glyph{opacity:1}.cp-titlebar-spacer{flex:none;width:calc(3 * var(--cp-light-size) + 2 * var(--cp-light-gap))}.cp-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--cp-text-muted)}.cp-body{display:flex;flex-direction:column;gap:var(--cp-gap);min-width:0;flex:1 1 auto;min-height:0}.cp-root[data-cp-collapsed="true"] .cp-body{display:none}.cp-root[data-cp-size="expanded"]{--cp-width:420px;--cp-disc-size:260px;--cp-panel-h:372px}.cp-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;isolation:isolate;padding:var(--cp-seg-pad);border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-seg::before{content:"";position:absolute;z-index:-1;top:var(--cp-seg-pad);bottom:var(--cp-seg-pad);left:var(--cp-seg-pad);width:calc((100% - 2 * var(--cp-seg-pad)) / var(--cp-seg-count,1));translate:calc(var(--cp-seg-active,0) * 100%) 0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:var(--cp-surface-overlay);box-shadow:0 1px 2px rgb(0 0 0 / 12%),0 0 0 1px var(--cp-border-subtle);transition:translate 180ms cubic-bezier(0.445,0.05,0.55,0.95)}.cp-seg-sm{--cp-radius:var(--cp-radius-sm);--cp-seg-pad:2px}.cp-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--cp-control-height);padding:0 6px;border:0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:transparent;color:var(--cp-text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:500;transition:color 120ms ease}.cp-tab:hover{color:var(--cp-text)}.cp-tab[aria-selected="true"]{color:var(--cp-text)}.cp-tab:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px}.cp-tab[disabled]{cursor:default}.cp-seg-sm .cp-tab{height:calc(var(--cp-control-height) - 8px);font-size:11px;letter-spacing:0.02em}.cp-tab svg{width:17px;height:17px;display:block}.cp-panel-host{display:flex;flex-direction:column;flex:1 1 var(--cp-panel-h);min-height:0;overflow-y:auto;overscroll-behavior:contain;--cp-bleed:calc(var(--cp-thumb-size) / 2 + 2px);padding-inline:var(--cp-bleed);margin-inline:calc(var(--cp-bleed) * -1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--cp-border) transparent}.cp-panel-host[data-cp-fade]{--cp-fade-t:0px;--cp-fade-b:0px;mask-image:linear-gradient(to bottom,transparent 0,#000 var(--cp-fade-t),#000 calc(100% - var(--cp-fade-b)),transparent 100%)}.cp-panel-host[data-cp-fade="start"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-t:18px}.cp-panel-host[data-cp-fade="end"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-b:18px}.cp-panel-host::-webkit-scrollbar{width:8px}.cp-panel-host::-webkit-scrollbar-track{background:transparent}.cp-panel-host::-webkit-scrollbar-thumb{background:var(--cp-border);border-radius:4px;border:2px solid transparent;background-clip:content-box}.cp-root[data-cp-modes="1"] .cp-panel-host{flex-basis:auto}.cp-panel{display:flex;flex-direction:column;gap:var(--cp-gap);flex:1 1 auto;min-height:0}.cp-disc-wrap{display:flex;justify-content:center;padding:2px 0}.cp-disc{position:relative;width:min(100%,var(--cp-disc-size));aspect-ratio:1;border-radius:50%;cursor:crosshair;outline:none;background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient( #f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100% );box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}@supports (background:conic-gradient(in hsl longer hue,red,red)){.cp-disc{background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient(in hsl longer hue,red,red)}}.cp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000;opacity:calc(1 - var(--cp-v) / 100%);pointer-events:none}.cp-disc:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-area{position:relative;width:100%;height:150px;border-radius:var(--cp-radius);cursor:crosshair;outline:none;background-color:var(--cp-hue-color);background-image:linear-gradient(to top,#000,rgb(0 0 0 / 0)),linear-gradient(to right,#fff,rgb(255 255 255 / 0));box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}.cp-area:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-thumb{position:absolute;left:var(--cp-thumb-x,50%);top:var(--cp-thumb-y,50%);width:var(--cp-thumb-size);height:var(--cp-thumb-size);margin:calc(var(--cp-thumb-size) / -2) 0 0 calc(var(--cp-thumb-size) / -2);border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgb(0 0 0 / 16%),0 1px 3px rgb(0 0 0 / 30%),0 0 0 1px rgb(0 0 0 / 12%);pointer-events:none}.cp-slider-row{display:flex;align-items:center;gap:10px}.cp-slider-label{width:14px;flex:none;text-align:center;color:var(--cp-text-muted);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.cp-slider{position:relative;flex:1;height:var(--cp-track-height);border-radius:calc(var(--cp-track-height) / 2);cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-slider:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-slider-fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(to right,#f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100%)}@supports (background:linear-gradient(in hsl longer hue,red,red)){.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(in hsl longer hue to right,red,red)}}.cp-slider .cp-thumb{top:50%}.cp-swatch,.cp-preview,.cp-trigger,.cp-slider[data-cp-channel="alpha"]{background-image:var(--cp-checker);background-size:var(--cp-checker-size) var(--cp-checker-size)}.cp-fields{display:flex;gap:8px;align-items:flex-end}.cp-field{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.cp-palette-search{flex:none}.cp-field-label{color:var(--cp-text-muted);font-size:11px;font-weight:500}.cp-input{width:100%;min-width:0;height:var(--cp-input-height);padding:0 8px;background:var(--cp-surface-sunken);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.cp-input:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-1px;border-color:transparent}.cp-input[aria-invalid="true"]{border-color:#e5484d}.cp-input::-webkit-outer-spin-button,.cp-input::-webkit-inner-spin-button{appearance:none;margin:0}.cp-input[type="number"]{appearance:textfield;-moz-appearance:textfield}.cp-input[type="file"]{height:auto;padding:6px 8px;font-size:11px}.cp-swatch{position:relative;width:100%;aspect-ratio:1;padding:0;display:block;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 14%),rgb(255 255 255 / 16%));outline-offset:-1px}.cp-swatch::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-swatch-color,transparent);box-shadow:inset 0 0 0 1px light-dark(rgb(255 255 255 / 22%),rgb(0 0 0 / 22%))}.cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-swatch[aria-pressed="true"]{outline:2px solid var(--cp-accent);outline-offset:2px}.cp-swatch-round,.cp-swatch-round::after{border-radius:50%}.cp-swatch-grid{display:grid;grid-template-columns:repeat(var(--cp-columns,10),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.cp-swatch-grid:not([data-cp-variant="mosaic"]){padding-block:var(--cp-ring-bleed)}.cp-swatch-grid>li{display:block;min-width:0}.cp-swatch-grid[data-cp-large="true"]>li{content-visibility:auto;contain-intrinsic-size:auto 28px}.cp-mosaic{padding:2px;border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-swatch-grid[data-cp-variant="mosaic"]{gap:0}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch{border-radius:0;outline:none;background-image:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch::after{box-shadow:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px;z-index:2}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch[aria-pressed="true"]{outline:3px solid var(--cp-surface);outline-offset:-1.5px;z-index:1}.cp-group{margin:0 0 12px}.cp-group:last-child{margin-bottom:0}.cp-group-title{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--cp-text-muted)}.cp-scroll{min-height:0}.cp-footer{display:flex;align-items:center;gap:10px;padding-top:var(--cp-gap);border-top:1px solid var(--cp-border-subtle)}.cp-footer-spacer{flex:1}.cp-preview{position:relative;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;border-radius:50%;outline:1px solid var(--cp-border-subtle);outline-offset:-1px}.cp-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-preview-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-recents{display:flex;gap:6px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.cp-recents::-webkit-scrollbar{display:none}.cp-recents[data-cp-fade]{--cp-fade-s:0px;--cp-fade-e:0px;mask-image:linear-gradient(to right,transparent 0,#000 var(--cp-fade-s),#000 calc(100% - var(--cp-fade-e)),transparent 100%)}.cp-recents[data-cp-fade="start"],.cp-recents[data-cp-fade="both"]{--cp-fade-s:14px}.cp-recents[data-cp-fade="end"],.cp-recents[data-cp-fade="both"]{--cp-fade-e:14px}.cp-recents>li{flex:none}.cp-recents .cp-swatch{width:22px;height:22px}.cp-icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;padding:0;background:var(--cp-surface-raised);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);cursor:pointer;transition:background-color 120ms ease}.cp-icon-button:hover{background:var(--cp-border-subtle)}.cp-icon-button:focus-visible{outline:2px solid var(--cp-focus);outline-offset:1px}.cp-icon-button svg{width:16px;height:16px;display:block}.cp-icon-button[disabled]{opacity:0.4;cursor:default}.cp-trigger{position:relative;width:36px;height:26px;padding:0;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 18%),rgb(255 255 255 / 20%));outline-offset:-1px}.cp-trigger::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-trigger-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-trigger:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-trigger[disabled]{opacity:0.5;cursor:default}.cp-popover{position:absolute;z-index:2147483000;margin:0;padding:0;border:0}.cp-popover .cp-root{box-shadow:var(--cp-elevation);max-height:var(--cp-available-h,none)}.cp-sheet-root{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end}.cp-scrim{position:absolute;inset:0;background:rgb(0 0 0 / 45%)}.cp-sheet{position:relative;width:100%;max-height:88svh;display:flex;flex-direction:column;overflow:hidden;background:var(--cp-surface);border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;box-shadow:0 -8px 32px rgb(0 0 0 / 35%);padding-bottom:max(8px,env(safe-area-inset-bottom))}.cp-grabber{width:36px;height:5px;flex:none;margin:8px auto 0;padding:0;border:0;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--cp-border);cursor:pointer}.cp-grabber:focus-visible{outline:2px solid var(--cp-focus);outline-offset:4px}.cp-grabber::after{content:"";position:absolute;left:50%;translate:-50% 0;margin-top:-14px;width:88px;height:32px}.cp-sheet{position:relative}.cp-dialog{display:flex;flex-direction:column;min-height:0;min-width:0}.cp-sheet>*,.cp-sheet .cp-dialog{min-height:0}.cp-sheet>.cp-dialog{flex:1 1 auto}.cp-sheet .cp-root{width:100%;max-width:none;border-radius:0;box-shadow:none;background:transparent;flex:1 1 auto;min-height:0}.cp-sheet .cp-lights{display:none}.cp-sheet .cp-titlebar{justify-content:center}.cp-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.cp-empty{margin:0;color:var(--cp-text-muted);padding:20px 12px;text-align:center;font-size:12px;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}.cp-dropzone{flex:1 1 auto;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;cursor:pointer;color:var(--cp-text-muted);font-size:12px;line-height:1.4;border:1px dashed var(--cp-border);border-radius:var(--cp-radius);background:transparent;transition:border-color 120ms ease,background-color 120ms ease}.cp-dropzone svg{width:26px;height:26px;opacity:0.65}.cp-dropzone-title{color:var(--cp-text);font-weight:550;font-size:12px}.cp-dropzone-hint{font-size:11px;opacity:0.8}.cp-dropzone:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}.cp-dropzone:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:2px}.cp-dropzone[data-cp-dragging="true"]{border-color:var(--cp-accent);border-style:solid;background:color-mix(in srgb,var(--cp-accent) 10%,transparent);color:var(--cp-text)}.cp-root[data-cp-disabled="true"] .cp-dropzone{cursor:default}.cp-image-preview{position:relative;flex:1 1 auto;min-height:72px;display:flex;border-radius:var(--cp-radius);overflow:hidden;background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-image-preview img{width:100%;height:auto;max-height:100%;margin:auto;display:block;object-fit:contain}.cp-image-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;background:rgb(0 0 0 / 62%);color:#fff}.cp-image-remove:hover{background:rgb(0 0 0 / 78%)}.cp-image-remove:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-image-remove svg{width:13px;height:13px;display:block}}body:has(.cp-sheet-root[data-cp-open="true"]){overflow:hidden}@layer chroma-panel{@media (pointer:coarse){.cp-root{--cp-control-height:36px;--cp-thumb-size:22px;--cp-panel-h:350px}.cp-tab::after,.cp-icon-button::after,.cp-trigger::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,44px);height:max(100%,44px)}.cp-icon-button,.cp-trigger{position:relative}.cp-recents .cp-swatch{width:28px;height:28px}.cp-titlebar{--cp-light-size:20px;--cp-light-gap:10px}.cp-light-glyph{width:11px;height:11px}}@media (max-width:640px){.cp-root{--cp-width:100%;--cp-disc-size:240px;--cp-pad:16px}}@media (forced-colors:active){.cp-swatch,.cp-preview,.cp-trigger,.cp-disc,.cp-area,.cp-slider-fill{forced-color-adjust:none}.cp-swatch{border:1px solid CanvasText}.cp-swatch[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:1px}.cp-seg::before{border:1px solid CanvasText}.cp-tab[aria-selected="true"]{border:1px solid Highlight}.cp-root{border:1px solid CanvasText}}@media (prefers-reduced-motion:reduce){.cp-root *,.cp-root *::before,.cp-root *::after,.cp-seg::before{transition-duration:0.01ms !important;animation-duration:0.01ms !important}}}`;
3
3
  //#endregion
4
4
  exports.css = css;
package/dist/styles/css.js CHANGED
@@ -1,5 +1,5 @@
1
1
  //#region src/styles/css.ts
2
- const css = `@layer chroma-panel{.cp-root,.cp-sheet-root,.cp-popover{color-scheme:light dark;--cp-surface:light-dark(#ffffff,#191919);--cp-surface-raised:light-dark(#f4f4f6,#222222);--cp-surface-sunken:light-dark(#eaeaee,#111111);--cp-surface-overlay:light-dark(#ffffff,#222222);--cp-border:light-dark(#d6d6da,#3a3a3a);--cp-border-subtle:light-dark(rgb(0 0 0 / 9%),rgb(255 255 255 / 10%));--cp-text:light-dark(#1c1c1e,#ededed);--cp-text-muted:light-dark(#6b6b70,#a0a0a6);--cp-accent:light-dark(#2d7ff9,#4d94ff);--cp-focus:light-dark(#2d7ff9,#5b9cff);--cp-radius-lg:16px;--cp-radius:10px;--cp-radius-sm:7px;--cp-seg-pad:3px;--cp-ring-bleed:4px;--cp-thumb-size:18px;--cp-track-height:12px;--cp-control-height:32px;--cp-input-height:calc(var(--cp-control-height) + 2 * var(--cp-seg-pad));--cp-gap:12px;--cp-pad:14px;--cp-width:320px;--cp-disc-size:196px;--cp-panel-h:344px;--cp-h:0;--cp-s:0%;--cp-v:0%;--cp-a:1;--cp-hue-color:hsl(var(--cp-h) 100% 50%);--cp-checker-size:12px;--cp-checker:repeating-conic-gradient( light-dark(#00000014,#ffffff14) 0% 25%,transparent 0% 50%);--cp-elevation:light-dark( 0 0 0 1px rgb(0 0 0 / 6%),0 0 0 1px #3a3a3a ),light-dark( 0 10px 30px -6px rgb(0 0 0 / 18%),0 10px 24px -6px rgb(0 0 0 / 60%) ),light-dark( 0 2px 6px -2px rgb(0 0 0 / 10%),0 24px 48px -12px rgb(0 0 0 / 70%) )}.cp-root{box-sizing:border-box;width:var(--cp-width);max-width:100%;padding:var(--cp-pad);display:flex;flex-direction:column;gap:var(--cp-gap);background:var(--cp-surface);color:var(--cp-text);border-radius:var(--cp-radius-lg);box-shadow:0 0 0 1px var(--cp-border-subtle);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}.cp-root[data-cp-theme="light"],.cp-sheet-root:has(.cp-root[data-cp-theme="light"]){color-scheme:light}.cp-root[data-cp-theme="dark"],.cp-sheet-root:has(.cp-root[data-cp-theme="dark"]){color-scheme:dark}.cp-root *,.cp-root *::before,.cp-root *::after{box-sizing:border-box}.cp-root[data-cp-disabled="true"]{opacity:0.5;pointer-events:none}.cp-titlebar{display:flex;align-items:center;gap:8px;min-height:13px;--cp-light-size:14px;--cp-light-gap:10px}.cp-lights{display:flex;gap:var(--cp-light-gap)}.cp-light{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--cp-light-size);height:var(--cp-light-size);padding:0;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;color:rgb(0 0 0 / 62%)}.cp-light[data-cp-light="close"]{background:#ff5f57}.cp-light[data-cp-light="min"]{background:#febc2e}.cp-light[data-cp-light="max"]{background:#28c840}.cp-light[disabled]{opacity:0.42;cursor:default}.cp-light:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-light-glyph{width:8px;height:8px;display:block;opacity:0;transition:opacity 100ms ease}.cp-titlebar:hover .cp-light:not([disabled]) .cp-light-glyph,.cp-light:focus-visible .cp-light-glyph{opacity:1}.cp-titlebar-spacer{flex:none;width:calc(3 * var(--cp-light-size) + 2 * var(--cp-light-gap))}.cp-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--cp-text-muted)}.cp-body{display:flex;flex-direction:column;gap:var(--cp-gap);min-width:0;flex:1 1 auto;min-height:0}.cp-root[data-cp-collapsed="true"] .cp-body{display:none}.cp-root[data-cp-size="expanded"]{--cp-width:420px;--cp-disc-size:260px;--cp-panel-h:372px}.cp-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;isolation:isolate;padding:var(--cp-seg-pad);border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-seg::before{content:"";position:absolute;z-index:-1;top:var(--cp-seg-pad);bottom:var(--cp-seg-pad);left:var(--cp-seg-pad);width:calc((100% - 2 * var(--cp-seg-pad)) / var(--cp-seg-count,1));translate:calc(var(--cp-seg-active,0) * 100%) 0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:var(--cp-surface-overlay);box-shadow:0 1px 2px rgb(0 0 0 / 12%),0 0 0 1px var(--cp-border-subtle);transition:translate 180ms cubic-bezier(0.445,0.05,0.55,0.95)}.cp-seg-sm{--cp-radius:var(--cp-radius-sm);--cp-seg-pad:2px}.cp-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--cp-control-height);padding:0 6px;border:0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:transparent;color:var(--cp-text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:500;transition:color 120ms ease}.cp-tab:hover{color:var(--cp-text)}.cp-tab[aria-selected="true"]{color:var(--cp-text)}.cp-tab:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px}.cp-tab[disabled]{cursor:default}.cp-seg-sm .cp-tab{height:calc(var(--cp-control-height) - 8px);font-size:11px;letter-spacing:0.02em}.cp-tab svg{width:17px;height:17px;display:block}.cp-panel-host{display:flex;flex-direction:column;flex:1 1 var(--cp-panel-h);min-height:0;overflow-y:auto;overscroll-behavior:contain;--cp-bleed:calc(var(--cp-thumb-size) / 2 + 2px);padding-inline:var(--cp-bleed);margin-inline:calc(var(--cp-bleed) * -1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--cp-border) transparent}.cp-panel-host[data-cp-fade]{--cp-fade-t:0px;--cp-fade-b:0px;mask-image:linear-gradient(to bottom,transparent 0,#000 var(--cp-fade-t),#000 calc(100% - var(--cp-fade-b)),transparent 100%)}.cp-panel-host[data-cp-fade="start"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-t:18px}.cp-panel-host[data-cp-fade="end"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-b:18px}.cp-panel-host::-webkit-scrollbar{width:8px}.cp-panel-host::-webkit-scrollbar-track{background:transparent}.cp-panel-host::-webkit-scrollbar-thumb{background:var(--cp-border);border-radius:4px;border:2px solid transparent;background-clip:content-box}.cp-root[data-cp-modes="1"] .cp-panel-host{flex-basis:auto}.cp-panel{display:flex;flex-direction:column;gap:var(--cp-gap);flex:1 1 auto;min-height:0}.cp-disc-wrap{display:flex;justify-content:center;padding:2px 0}.cp-disc{position:relative;width:min(100%,var(--cp-disc-size));aspect-ratio:1;border-radius:50%;cursor:crosshair;outline:none;background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient( #f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100% );box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}@supports (background:conic-gradient(in hsl longer hue,red,red)){.cp-disc{background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient(in hsl longer hue,red,red)}}.cp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000;opacity:calc(1 - var(--cp-v) / 100%);pointer-events:none}.cp-disc:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-area{position:relative;width:100%;height:150px;border-radius:var(--cp-radius);cursor:crosshair;outline:none;background-color:var(--cp-hue-color);background-image:linear-gradient(to top,#000,rgb(0 0 0 / 0)),linear-gradient(to right,#fff,rgb(255 255 255 / 0));box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}.cp-area:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-thumb{position:absolute;left:var(--cp-thumb-x,50%);top:var(--cp-thumb-y,50%);width:var(--cp-thumb-size);height:var(--cp-thumb-size);margin:calc(var(--cp-thumb-size) / -2) 0 0 calc(var(--cp-thumb-size) / -2);border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgb(0 0 0 / 16%),0 1px 3px rgb(0 0 0 / 30%),0 0 0 1px rgb(0 0 0 / 12%);pointer-events:none}.cp-slider-row{display:flex;align-items:center;gap:10px}.cp-slider-label{width:14px;flex:none;text-align:center;color:var(--cp-text-muted);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.cp-slider{position:relative;flex:1;height:var(--cp-track-height);border-radius:calc(var(--cp-track-height) / 2);cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-slider:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-slider-fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(to right,#f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100%)}@supports (background:linear-gradient(in hsl longer hue,red,red)){.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(in hsl longer hue to right,red,red)}}.cp-slider .cp-thumb{top:50%}.cp-swatch,.cp-preview,.cp-trigger,.cp-slider[data-cp-channel="alpha"]{background-image:var(--cp-checker);background-size:var(--cp-checker-size) var(--cp-checker-size)}.cp-fields{display:flex;gap:8px;align-items:flex-end}.cp-field{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.cp-field-label{color:var(--cp-text-muted);font-size:11px;font-weight:500}.cp-input{width:100%;min-width:0;height:var(--cp-input-height);padding:0 8px;background:var(--cp-surface-sunken);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.cp-input:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-1px;border-color:transparent}.cp-input[aria-invalid="true"]{border-color:#e5484d}.cp-input::-webkit-outer-spin-button,.cp-input::-webkit-inner-spin-button{appearance:none;margin:0}.cp-input[type="number"]{appearance:textfield;-moz-appearance:textfield}.cp-input[type="file"]{height:auto;padding:6px 8px;font-size:11px}.cp-swatch{position:relative;width:100%;aspect-ratio:1;padding:0;display:block;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 14%),rgb(255 255 255 / 16%));outline-offset:-1px}.cp-swatch::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-swatch-color,transparent);box-shadow:inset 0 0 0 1px light-dark(rgb(255 255 255 / 22%),rgb(0 0 0 / 22%))}.cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-swatch[aria-pressed="true"]{outline:2px solid var(--cp-accent);outline-offset:2px}.cp-swatch-round,.cp-swatch-round::after{border-radius:50%}.cp-swatch-grid{display:grid;grid-template-columns:repeat(var(--cp-columns,10),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.cp-swatch-grid:not([data-cp-variant="mosaic"]){padding-block:var(--cp-ring-bleed)}.cp-swatch-grid>li{display:block;min-width:0}.cp-swatch-grid[data-cp-large="true"]>li{content-visibility:auto;contain-intrinsic-size:auto 28px}.cp-mosaic{padding:2px;border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-swatch-grid[data-cp-variant="mosaic"]{gap:0}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch{border-radius:0;outline:none;background-image:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch::after{box-shadow:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px;z-index:2}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch[aria-pressed="true"]{outline:3px solid var(--cp-surface);outline-offset:-1.5px;z-index:1}.cp-group{margin:0 0 12px}.cp-group:last-child{margin-bottom:0}.cp-group-title{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--cp-text-muted)}.cp-scroll{min-height:0}.cp-footer{display:flex;align-items:center;gap:10px;padding-top:var(--cp-gap);border-top:1px solid var(--cp-border-subtle)}.cp-footer-spacer{flex:1}.cp-preview{position:relative;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;border-radius:50%;outline:1px solid var(--cp-border-subtle);outline-offset:-1px}.cp-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-preview-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-recents{display:flex;gap:6px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.cp-recents::-webkit-scrollbar{display:none}.cp-recents[data-cp-fade]{--cp-fade-s:0px;--cp-fade-e:0px;mask-image:linear-gradient(to right,transparent 0,#000 var(--cp-fade-s),#000 calc(100% - var(--cp-fade-e)),transparent 100%)}.cp-recents[data-cp-fade="start"],.cp-recents[data-cp-fade="both"]{--cp-fade-s:14px}.cp-recents[data-cp-fade="end"],.cp-recents[data-cp-fade="both"]{--cp-fade-e:14px}.cp-recents>li{flex:none}.cp-recents .cp-swatch{width:22px;height:22px}.cp-icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;padding:0;background:var(--cp-surface-raised);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);cursor:pointer;transition:background-color 120ms ease}.cp-icon-button:hover{background:var(--cp-border-subtle)}.cp-icon-button:focus-visible{outline:2px solid var(--cp-focus);outline-offset:1px}.cp-icon-button svg{width:16px;height:16px;display:block}.cp-icon-button[disabled]{opacity:0.4;cursor:default}.cp-trigger{position:relative;width:36px;height:26px;padding:0;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 18%),rgb(255 255 255 / 20%));outline-offset:-1px}.cp-trigger::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-trigger-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-trigger:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-trigger[disabled]{opacity:0.5;cursor:default}.cp-popover{position:absolute;z-index:2147483000;margin:0;padding:0;border:0}.cp-popover .cp-root{box-shadow:var(--cp-elevation);max-height:var(--cp-available-h,none)}.cp-sheet-root{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end}.cp-scrim{position:absolute;inset:0;background:rgb(0 0 0 / 45%)}.cp-sheet{position:relative;width:100%;max-height:88svh;display:flex;flex-direction:column;overflow:hidden;background:var(--cp-surface);border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;box-shadow:0 -8px 32px rgb(0 0 0 / 35%);padding-bottom:max(8px,env(safe-area-inset-bottom))}.cp-grabber{width:36px;height:5px;flex:none;margin:8px auto 0;padding:0;border:0;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--cp-border);cursor:pointer}.cp-grabber:focus-visible{outline:2px solid var(--cp-focus);outline-offset:4px}.cp-grabber::after{content:"";position:absolute;left:50%;translate:-50% 0;margin-top:-14px;width:88px;height:32px}.cp-sheet{position:relative}.cp-dialog{display:flex;flex-direction:column;min-height:0;min-width:0}.cp-sheet>*,.cp-sheet .cp-dialog{min-height:0}.cp-sheet>.cp-dialog{flex:1 1 auto}.cp-sheet .cp-root{width:100%;max-width:none;border-radius:0;box-shadow:none;background:transparent;flex:1 1 auto;min-height:0}.cp-sheet .cp-lights{display:none}.cp-sheet .cp-titlebar{justify-content:center}.cp-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.cp-empty{margin:0;color:var(--cp-text-muted);padding:20px 12px;text-align:center;font-size:12px;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}.cp-dropzone{flex:1 1 auto;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;cursor:pointer;color:var(--cp-text-muted);font-size:12px;line-height:1.4;border:1px dashed var(--cp-border);border-radius:var(--cp-radius);background:transparent;transition:border-color 120ms ease,background-color 120ms ease}.cp-dropzone svg{width:26px;height:26px;opacity:0.65}.cp-dropzone-title{color:var(--cp-text);font-weight:550;font-size:12px}.cp-dropzone-hint{font-size:11px;opacity:0.8}.cp-dropzone:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}.cp-dropzone:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:2px}.cp-dropzone[data-cp-dragging="true"]{border-color:var(--cp-accent);border-style:solid;background:color-mix(in srgb,var(--cp-accent) 10%,transparent);color:var(--cp-text)}.cp-root[data-cp-disabled="true"] .cp-dropzone{cursor:default}.cp-image-preview{position:relative;flex:1 1 auto;min-height:72px;display:flex;border-radius:var(--cp-radius);overflow:hidden;background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-image-preview img{width:100%;height:auto;max-height:100%;margin:auto;display:block;object-fit:contain}.cp-image-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;background:rgb(0 0 0 / 62%);color:#fff}.cp-image-remove:hover{background:rgb(0 0 0 / 78%)}.cp-image-remove:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-image-remove svg{width:13px;height:13px;display:block}}body:has(.cp-sheet-root[data-cp-open="true"]){overflow:hidden}@layer chroma-panel{@media (pointer:coarse){.cp-root{--cp-control-height:36px;--cp-thumb-size:22px;--cp-panel-h:350px}.cp-tab::after,.cp-icon-button::after,.cp-trigger::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,44px);height:max(100%,44px)}.cp-icon-button,.cp-trigger{position:relative}.cp-recents .cp-swatch{width:28px;height:28px}.cp-titlebar{--cp-light-size:20px;--cp-light-gap:10px}.cp-light-glyph{width:11px;height:11px}}@media (max-width:640px){.cp-root{--cp-width:100%;--cp-disc-size:240px;--cp-pad:16px}}@media (forced-colors:active){.cp-swatch,.cp-preview,.cp-trigger,.cp-disc,.cp-area,.cp-slider-fill{forced-color-adjust:none}.cp-swatch{border:1px solid CanvasText}.cp-swatch[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:1px}.cp-seg::before{border:1px solid CanvasText}.cp-tab[aria-selected="true"]{border:1px solid Highlight}.cp-root{border:1px solid CanvasText}}@media (prefers-reduced-motion:reduce){.cp-root *,.cp-root *::before,.cp-root *::after,.cp-seg::before{transition-duration:0.01ms !important;animation-duration:0.01ms !important}}}`;
2
+ const css = `@layer chroma-panel{.cp-root,.cp-sheet-root,.cp-popover{color-scheme:light dark;--cp-surface:light-dark(#ffffff,#191919);--cp-surface-raised:light-dark(#f4f4f6,#222222);--cp-surface-sunken:light-dark(#eaeaee,#111111);--cp-surface-overlay:light-dark(#ffffff,#222222);--cp-border:light-dark(#d6d6da,#3a3a3a);--cp-border-subtle:light-dark(rgb(0 0 0 / 9%),rgb(255 255 255 / 10%));--cp-text:light-dark(#1c1c1e,#ededed);--cp-text-muted:light-dark(#6b6b70,#a0a0a6);--cp-accent:light-dark(#2d7ff9,#4d94ff);--cp-focus:light-dark(#2d7ff9,#5b9cff);--cp-radius-lg:16px;--cp-radius:10px;--cp-radius-sm:7px;--cp-seg-pad:3px;--cp-ring-bleed:4px;--cp-thumb-size:18px;--cp-track-height:12px;--cp-control-height:32px;--cp-input-height:calc(var(--cp-control-height) + 2 * var(--cp-seg-pad));--cp-gap:12px;--cp-pad:14px;--cp-width:320px;--cp-disc-size:196px;--cp-panel-h:344px;--cp-h:0;--cp-s:0%;--cp-v:0%;--cp-a:1;--cp-hue-color:hsl(var(--cp-h) 100% 50%);--cp-checker-size:12px;--cp-checker:repeating-conic-gradient( light-dark(#00000014,#ffffff14) 0% 25%,transparent 0% 50%);--cp-elevation:light-dark( 0 0 0 1px rgb(0 0 0 / 6%),0 0 0 1px #3a3a3a ),light-dark( 0 10px 30px -6px rgb(0 0 0 / 18%),0 10px 24px -6px rgb(0 0 0 / 60%) ),light-dark( 0 2px 6px -2px rgb(0 0 0 / 10%),0 24px 48px -12px rgb(0 0 0 / 70%) )}.cp-root{box-sizing:border-box;width:var(--cp-width);max-width:100%;padding:var(--cp-pad);display:flex;flex-direction:column;gap:var(--cp-gap);background:var(--cp-surface);color:var(--cp-text);border-radius:var(--cp-radius-lg);box-shadow:0 0 0 1px var(--cp-border-subtle);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}.cp-root[data-cp-theme="light"],.cp-sheet-root:has(.cp-root[data-cp-theme="light"]){color-scheme:light}.cp-root[data-cp-theme="dark"],.cp-sheet-root:has(.cp-root[data-cp-theme="dark"]){color-scheme:dark}.cp-root *,.cp-root *::before,.cp-root *::after{box-sizing:border-box}.cp-root[data-cp-disabled="true"]{opacity:0.5;pointer-events:none}.cp-titlebar{display:flex;align-items:center;gap:8px;min-height:13px;--cp-light-size:14px;--cp-light-gap:10px}.cp-lights{display:flex;gap:var(--cp-light-gap)}.cp-light{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--cp-light-size);height:var(--cp-light-size);padding:0;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;color:rgb(0 0 0 / 62%)}.cp-light[data-cp-light="close"]{background:#ff5f57}.cp-light[data-cp-light="min"]{background:#febc2e}.cp-light[data-cp-light="max"]{background:#28c840}.cp-light[disabled]{opacity:0.42;cursor:default}.cp-light:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-light-glyph{width:8px;height:8px;display:block;opacity:0;transition:opacity 100ms ease}.cp-titlebar:hover .cp-light:not([disabled]) .cp-light-glyph,.cp-light:focus-visible .cp-light-glyph{opacity:1}.cp-titlebar-spacer{flex:none;width:calc(3 * var(--cp-light-size) + 2 * var(--cp-light-gap))}.cp-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--cp-text-muted)}.cp-body{display:flex;flex-direction:column;gap:var(--cp-gap);min-width:0;flex:1 1 auto;min-height:0}.cp-root[data-cp-collapsed="true"] .cp-body{display:none}.cp-root[data-cp-size="expanded"]{--cp-width:420px;--cp-disc-size:260px;--cp-panel-h:372px}.cp-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;isolation:isolate;padding:var(--cp-seg-pad);border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-seg::before{content:"";position:absolute;z-index:-1;top:var(--cp-seg-pad);bottom:var(--cp-seg-pad);left:var(--cp-seg-pad);width:calc((100% - 2 * var(--cp-seg-pad)) / var(--cp-seg-count,1));translate:calc(var(--cp-seg-active,0) * 100%) 0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:var(--cp-surface-overlay);box-shadow:0 1px 2px rgb(0 0 0 / 12%),0 0 0 1px var(--cp-border-subtle);transition:translate 180ms cubic-bezier(0.445,0.05,0.55,0.95)}.cp-seg-sm{--cp-radius:var(--cp-radius-sm);--cp-seg-pad:2px}.cp-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--cp-control-height);padding:0 6px;border:0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:transparent;color:var(--cp-text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:500;transition:color 120ms ease}.cp-tab:hover{color:var(--cp-text)}.cp-tab[aria-selected="true"]{color:var(--cp-text)}.cp-tab:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px}.cp-tab[disabled]{cursor:default}.cp-seg-sm .cp-tab{height:calc(var(--cp-control-height) - 8px);font-size:11px;letter-spacing:0.02em}.cp-tab svg{width:17px;height:17px;display:block}.cp-panel-host{display:flex;flex-direction:column;flex:1 1 var(--cp-panel-h);min-height:0;overflow-y:auto;overscroll-behavior:contain;--cp-bleed:calc(var(--cp-thumb-size) / 2 + 2px);padding-inline:var(--cp-bleed);margin-inline:calc(var(--cp-bleed) * -1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--cp-border) transparent}.cp-panel-host[data-cp-fade]{--cp-fade-t:0px;--cp-fade-b:0px;mask-image:linear-gradient(to bottom,transparent 0,#000 var(--cp-fade-t),#000 calc(100% - var(--cp-fade-b)),transparent 100%)}.cp-panel-host[data-cp-fade="start"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-t:18px}.cp-panel-host[data-cp-fade="end"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-b:18px}.cp-panel-host::-webkit-scrollbar{width:8px}.cp-panel-host::-webkit-scrollbar-track{background:transparent}.cp-panel-host::-webkit-scrollbar-thumb{background:var(--cp-border);border-radius:4px;border:2px solid transparent;background-clip:content-box}.cp-root[data-cp-modes="1"] .cp-panel-host{flex-basis:auto}.cp-panel{display:flex;flex-direction:column;gap:var(--cp-gap);flex:1 1 auto;min-height:0}.cp-disc-wrap{display:flex;justify-content:center;padding:2px 0}.cp-disc{position:relative;width:min(100%,var(--cp-disc-size));aspect-ratio:1;border-radius:50%;cursor:crosshair;outline:none;background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient( #f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100% );box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}@supports (background:conic-gradient(in hsl longer hue,red,red)){.cp-disc{background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient(in hsl longer hue,red,red)}}.cp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000;opacity:calc(1 - var(--cp-v) / 100%);pointer-events:none}.cp-disc:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-area{position:relative;width:100%;height:150px;border-radius:var(--cp-radius);cursor:crosshair;outline:none;background-color:var(--cp-hue-color);background-image:linear-gradient(to top,#000,rgb(0 0 0 / 0)),linear-gradient(to right,#fff,rgb(255 255 255 / 0));box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}.cp-area:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-thumb{position:absolute;left:var(--cp-thumb-x,50%);top:var(--cp-thumb-y,50%);width:var(--cp-thumb-size);height:var(--cp-thumb-size);margin:calc(var(--cp-thumb-size) / -2) 0 0 calc(var(--cp-thumb-size) / -2);border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgb(0 0 0 / 16%),0 1px 3px rgb(0 0 0 / 30%),0 0 0 1px rgb(0 0 0 / 12%);pointer-events:none}.cp-slider-row{display:flex;align-items:center;gap:10px}.cp-slider-label{width:14px;flex:none;text-align:center;color:var(--cp-text-muted);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.cp-slider{position:relative;flex:1;height:var(--cp-track-height);border-radius:calc(var(--cp-track-height) / 2);cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-slider:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-slider-fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(to right,#f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100%)}@supports (background:linear-gradient(in hsl longer hue,red,red)){.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(in hsl longer hue to right,red,red)}}.cp-slider .cp-thumb{top:50%}.cp-swatch,.cp-preview,.cp-trigger,.cp-slider[data-cp-channel="alpha"]{background-image:var(--cp-checker);background-size:var(--cp-checker-size) var(--cp-checker-size)}.cp-fields{display:flex;gap:8px;align-items:flex-end}.cp-field{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.cp-palette-search{flex:none}.cp-field-label{color:var(--cp-text-muted);font-size:11px;font-weight:500}.cp-input{width:100%;min-width:0;height:var(--cp-input-height);padding:0 8px;background:var(--cp-surface-sunken);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.cp-input:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-1px;border-color:transparent}.cp-input[aria-invalid="true"]{border-color:#e5484d}.cp-input::-webkit-outer-spin-button,.cp-input::-webkit-inner-spin-button{appearance:none;margin:0}.cp-input[type="number"]{appearance:textfield;-moz-appearance:textfield}.cp-input[type="file"]{height:auto;padding:6px 8px;font-size:11px}.cp-swatch{position:relative;width:100%;aspect-ratio:1;padding:0;display:block;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 14%),rgb(255 255 255 / 16%));outline-offset:-1px}.cp-swatch::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-swatch-color,transparent);box-shadow:inset 0 0 0 1px light-dark(rgb(255 255 255 / 22%),rgb(0 0 0 / 22%))}.cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-swatch[aria-pressed="true"]{outline:2px solid var(--cp-accent);outline-offset:2px}.cp-swatch-round,.cp-swatch-round::after{border-radius:50%}.cp-swatch-grid{display:grid;grid-template-columns:repeat(var(--cp-columns,10),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.cp-swatch-grid:not([data-cp-variant="mosaic"]){padding-block:var(--cp-ring-bleed)}.cp-swatch-grid>li{display:block;min-width:0}.cp-swatch-grid[data-cp-large="true"]>li{content-visibility:auto;contain-intrinsic-size:auto 28px}.cp-mosaic{padding:2px;border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-swatch-grid[data-cp-variant="mosaic"]{gap:0}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch{border-radius:0;outline:none;background-image:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch::after{box-shadow:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px;z-index:2}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch[aria-pressed="true"]{outline:3px solid var(--cp-surface);outline-offset:-1.5px;z-index:1}.cp-group{margin:0 0 12px}.cp-group:last-child{margin-bottom:0}.cp-group-title{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--cp-text-muted)}.cp-scroll{min-height:0}.cp-footer{display:flex;align-items:center;gap:10px;padding-top:var(--cp-gap);border-top:1px solid var(--cp-border-subtle)}.cp-footer-spacer{flex:1}.cp-preview{position:relative;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;border-radius:50%;outline:1px solid var(--cp-border-subtle);outline-offset:-1px}.cp-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-preview-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-recents{display:flex;gap:6px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.cp-recents::-webkit-scrollbar{display:none}.cp-recents[data-cp-fade]{--cp-fade-s:0px;--cp-fade-e:0px;mask-image:linear-gradient(to right,transparent 0,#000 var(--cp-fade-s),#000 calc(100% - var(--cp-fade-e)),transparent 100%)}.cp-recents[data-cp-fade="start"],.cp-recents[data-cp-fade="both"]{--cp-fade-s:14px}.cp-recents[data-cp-fade="end"],.cp-recents[data-cp-fade="both"]{--cp-fade-e:14px}.cp-recents>li{flex:none}.cp-recents .cp-swatch{width:22px;height:22px}.cp-icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;padding:0;background:var(--cp-surface-raised);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);cursor:pointer;transition:background-color 120ms ease}.cp-icon-button:hover{background:var(--cp-border-subtle)}.cp-icon-button:focus-visible{outline:2px solid var(--cp-focus);outline-offset:1px}.cp-icon-button svg{width:16px;height:16px;display:block}.cp-icon-button[disabled]{opacity:0.4;cursor:default}.cp-trigger{position:relative;width:36px;height:26px;padding:0;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 18%),rgb(255 255 255 / 20%));outline-offset:-1px}.cp-trigger::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-trigger-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-trigger:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-trigger[disabled]{opacity:0.5;cursor:default}.cp-popover{position:absolute;z-index:2147483000;margin:0;padding:0;border:0}.cp-popover .cp-root{box-shadow:var(--cp-elevation);max-height:var(--cp-available-h,none)}.cp-sheet-root{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end}.cp-scrim{position:absolute;inset:0;background:rgb(0 0 0 / 45%)}.cp-sheet{position:relative;width:100%;max-height:88svh;display:flex;flex-direction:column;overflow:hidden;background:var(--cp-surface);border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;box-shadow:0 -8px 32px rgb(0 0 0 / 35%);padding-bottom:max(8px,env(safe-area-inset-bottom))}.cp-grabber{width:36px;height:5px;flex:none;margin:8px auto 0;padding:0;border:0;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--cp-border);cursor:pointer}.cp-grabber:focus-visible{outline:2px solid var(--cp-focus);outline-offset:4px}.cp-grabber::after{content:"";position:absolute;left:50%;translate:-50% 0;margin-top:-14px;width:88px;height:32px}.cp-sheet{position:relative}.cp-dialog{display:flex;flex-direction:column;min-height:0;min-width:0}.cp-sheet>*,.cp-sheet .cp-dialog{min-height:0}.cp-sheet>.cp-dialog{flex:1 1 auto}.cp-sheet .cp-root{width:100%;max-width:none;border-radius:0;box-shadow:none;background:transparent;flex:1 1 auto;min-height:0}.cp-sheet .cp-lights{display:none}.cp-sheet .cp-titlebar{justify-content:center}.cp-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.cp-empty{margin:0;color:var(--cp-text-muted);padding:20px 12px;text-align:center;font-size:12px;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}.cp-dropzone{flex:1 1 auto;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;cursor:pointer;color:var(--cp-text-muted);font-size:12px;line-height:1.4;border:1px dashed var(--cp-border);border-radius:var(--cp-radius);background:transparent;transition:border-color 120ms ease,background-color 120ms ease}.cp-dropzone svg{width:26px;height:26px;opacity:0.65}.cp-dropzone-title{color:var(--cp-text);font-weight:550;font-size:12px}.cp-dropzone-hint{font-size:11px;opacity:0.8}.cp-dropzone:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}.cp-dropzone:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:2px}.cp-dropzone[data-cp-dragging="true"]{border-color:var(--cp-accent);border-style:solid;background:color-mix(in srgb,var(--cp-accent) 10%,transparent);color:var(--cp-text)}.cp-root[data-cp-disabled="true"] .cp-dropzone{cursor:default}.cp-image-preview{position:relative;flex:1 1 auto;min-height:72px;display:flex;border-radius:var(--cp-radius);overflow:hidden;background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-image-preview img{width:100%;height:auto;max-height:100%;margin:auto;display:block;object-fit:contain}.cp-image-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;background:rgb(0 0 0 / 62%);color:#fff}.cp-image-remove:hover{background:rgb(0 0 0 / 78%)}.cp-image-remove:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-image-remove svg{width:13px;height:13px;display:block}}body:has(.cp-sheet-root[data-cp-open="true"]){overflow:hidden}@layer chroma-panel{@media (pointer:coarse){.cp-root{--cp-control-height:36px;--cp-thumb-size:22px;--cp-panel-h:350px}.cp-tab::after,.cp-icon-button::after,.cp-trigger::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,44px);height:max(100%,44px)}.cp-icon-button,.cp-trigger{position:relative}.cp-recents .cp-swatch{width:28px;height:28px}.cp-titlebar{--cp-light-size:20px;--cp-light-gap:10px}.cp-light-glyph{width:11px;height:11px}}@media (max-width:640px){.cp-root{--cp-width:100%;--cp-disc-size:240px;--cp-pad:16px}}@media (forced-colors:active){.cp-swatch,.cp-preview,.cp-trigger,.cp-disc,.cp-area,.cp-slider-fill{forced-color-adjust:none}.cp-swatch{border:1px solid CanvasText}.cp-swatch[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:1px}.cp-seg::before{border:1px solid CanvasText}.cp-tab[aria-selected="true"]{border:1px solid Highlight}.cp-root{border:1px solid CanvasText}}@media (prefers-reduced-motion:reduce){.cp-root *,.cp-root *::before,.cp-root *::after,.cp-seg::before{transition-duration:0.01ms !important;animation-duration:0.01ms !important}}}`;
3
3
  //#endregion
4
4
  export { css };
5
5
 
package/package.json CHANGED
@@ -1,30 +1,35 @@
1
1
  {
2
2
  "name": "chroma-panel",
3
- "version": "0.1.2",
4
- "description": "React color picker with wheel, sliders, palettes, image sampling and an eyedropper. Zero dependencies, accessible, TypeScript types included.",
3
+ "version": "0.1.4",
4
+ "description": "Accessible React color picker component with a color wheel, RGB, HSL and HSV sliders, palettes, image sampling and an eyedropper. Zero dependencies.",
5
5
  "keywords": [
6
- "react",
7
- "color",
8
- "color-picker",
9
- "colorpicker",
10
- "hsva",
11
- "hex",
12
- "rgba",
13
- "eyedropper",
14
- "palette",
15
- "accessible",
16
- "a11y",
17
- "typescript",
18
- "zero-dependency",
6
+ "react color picker",
7
+ "react color picker component",
8
+ "react color picker library",
9
+ "react color picker npm",
10
+ "react hex color picker",
11
+ "react rgb color picker",
12
+ "react color wheel picker",
13
+ "color picker input react",
14
+ "color picker with opacity react",
15
+ "rgba color picker react",
16
+ "eyedropper color picker react",
17
+ "color swatch picker react",
18
+ "custom color picker react",
19
+ "react color picker typescript",
20
+ "react color picker tailwind css",
21
+ "accessible react color picker",
22
+ "lightweight react color picker",
23
+ "react color picker mobile",
19
24
  "react-color-picker",
25
+ "color-picker",
20
26
  "colour-picker",
21
- "color-wheel",
22
- "swatch",
23
- "macos",
24
- "hsl"
27
+ "image-color-picker",
28
+ "eyedropper",
29
+ "zero-dependency"
25
30
  ],
26
31
  "license": "MIT",
27
- "author": "Sohail Khan (https://resohail.me)",
32
+ "author": "Sohail Khan (https://me.jscrate.dev)",
28
33
  "type": "module",
29
34
  "sideEffects": [
30
35
  "**/*.css",
@@ -169,6 +174,7 @@
169
174
  "lint:attw": "attw --pack . --profile node16 --exclude-entrypoints styles.css style.css image-worker",
170
175
  "verify:directives": "node scripts/verify-directives.mjs",
171
176
  "size": "node scripts/size-report.mjs",
177
+ "readme:images": "node scripts/capture-readme-images.mjs",
172
178
  "prepublishOnly": "npm run build && npm run verify:directives && npm run size",
173
179
  "release": "changeset publish",
174
180
  "build:fast": "tsdown && node scripts/emit-css.mjs && node scripts/strip-sourcemaps.mjs"
@@ -207,7 +213,7 @@
207
213
  "type": "git",
208
214
  "url": "git+https://github.com/re-sohail/chroma-panel.git"
209
215
  },
210
- "homepage": "https://github.com/re-sohail/chroma-panel#readme",
216
+ "homepage": "https://chroma-panel.jscrate.dev",
211
217
  "bugs": {
212
218
  "url": "https://github.com/re-sohail/chroma-panel/issues"
213
219
  },