hdr-color-input 0.2.2

package/docs/src/styles/demos.css

@@ -0,0 +1,261 @@
+/* Demo container styles */
+.demo {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  background: var(--sl-color-bg-sidebar);
+  border-radius: 12px;
+  border: 1px solid var(--sl-color-hairline);
+}
+
+.demo-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.demo-row {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 0;
+
+  > * {
+    margin: 0;
+  }
+}
+
+.demo-controls {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.demo-controls button {
+  padding: 0.5rem 1rem;
+  background: var(--sl-color-bg-nav);
+  border: 1px solid var(--sl-color-hairline);
+  border-radius: 8px;
+  color: var(--sl-color-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.1s ease;
+}
+
+.demo-controls button:hover {
+  background: var(--sl-color-bg-sidebar);
+}
+
+.demo-controls button:active {
+  transform: scale(0.98);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .demo-controls button {
+    transition: none;
+  }
+
+  .demo-controls button:active {
+    transform: none;
+  }
+}
+
+.demo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+/* Readout panels */
+.readout {
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+  font-size: 0.875rem;
+  padding: 1rem;
+  background: var(--sl-color-bg-inline-code);
+  border-radius: 8px;
+  border: 1px solid var(--sl-color-hairline);
+}
+
+.readout dt {
+  font-weight: 600;
+  color: var(--sl-color-text-accent);
+  margin-bottom: 0.25rem;
+}
+
+.readout dd {
+  margin: 0 0 0.75rem 0;
+  color: var(--sl-color-text);
+}
+
+.readout dd:last-child {
+  margin-bottom: 0;
+}
+
+/* Swatch styles */
+.swatch {
+  display: inline-block;
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  border: 1px solid var(--sl-color-hairline);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
+}
+
+.swatch-sm {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+}
+
+.swatch-lg {
+  width: 72px;
+  height: 72px;
+  border-radius: 12px;
+}
+
+/* Badge styles */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  background: var(--sl-color-bg-inline-code);
+  border: 1px solid var(--sl-color-hairline);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.badge-gamut {
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Code toggle button */
+.code-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  min-height: 44px;
+  background: var(--sl-color-bg-nav);
+  border: 1px solid var(--sl-color-hairline);
+  border-radius: 8px;
+  color: var(--sl-color-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.1s ease;
+}
+
+.code-toggle:hover {
+  background: var(--sl-color-bg-sidebar);
+}
+
+.code-toggle:active {
+  transform: scale(0.98);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .code-toggle {
+    transition: none;
+  }
+
+  .code-toggle:active {
+    transform: none;
+  }
+}
+
+/* Event log */
+.event-log {
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 1rem;
+  background: var(--sl-color-bg-inline-code);
+  border-radius: 8px;
+  border: 1px solid var(--sl-color-hairline);
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.event-log-item {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--sl-color-hairline-light);
+}
+
+.event-log-item:last-child {
+  border-bottom: none;
+}
+
+.event-log-time {
+  color: var(--sl-color-text-accent);
+  opacity: 0.7;
+}
+
+.event-log-type {
+  font-weight: 600;
+  color: var(--sl-color-accent);
+}
+
+/* Styling showcase card */
+.showcase-card {
+  padding: 1.5rem;
+  background: var(--sl-color-bg-sidebar);
+  border-radius: 12px;
+  border: 1px solid var(--sl-color-hairline);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.showcase-card h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1rem;
+}
+
+.showcase-card p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--sl-color-gray-2);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .demo {
+    padding: 1rem;
+  }
+
+  .demo-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .swatch {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+/* Hit target enforcement */
+button,
+[role='button'],
+a:not(.sl-link),
+summary {
+  min-height: 44px;
+  min-width: 44px;
+}
+
+@media (min-width: 768px) {
+  button,
+  [role='button'],
+  a:not(.sl-link),
+  summary {
+    min-height: 24px;
+    min-width: 24px;
+  }
+}

package/docs/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "color-input": ["../src/index.ts"]
+    },
+    "types": ["vite/client"]
+  },
+  "include": [".astro/types.d.ts", "src", "src/content", "astro.config.mjs", "**/*.mdx", "**/*.astro"],
+  "exclude": ["dist"]
+}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "hdr-color-input",
+  "version": "0.2.2",
+  "description": "A standalone web component color picker using colorjs.io and preact signals.",
+  "type": "module",
+  "keywords": [
+    "color-picker",
+    "hdr-color",
+    "css-color",
+    "web-component",
+    "colorjs",
+    "oklch",
+    "oklab",
+    "rec2020",
+    "display-p3",
+    "color-input",
+    "custom-element",
+    "color-space",
+    "color",
+    "hdr-gamut",
+    "preact-signals"
+  ],
+  "author": "Adam Argyle",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/argyleink/css-color-component.git"
+  },
+  "bugs": {
+    "url": "https://github.com/argyleink/css-color-component/issues"
+  },
+  "homepage": "https://github.com/argyleink/css-color-component#readme",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "docs"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "cd docs && npm run dev",
+    "dev:component": "vite",
+    "build": "npm run build:lib && npm run build:docs",
+    "build:lib": "vite build",
+    "build:prod": "vite build --mode production",
+    "build:docs": "cd docs && npm run build",
+    "preview": "cd docs && npm run preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "npm run typecheck:lib && npm run typecheck:docs",
+    "typecheck:lib": "tsc -p tsconfig.json --noEmit",
+    "typecheck:docs": "cd docs && npm run typecheck",
+    "prepublishOnly": "npm run build:prod",
+    "release": "npm run build:prod && npm publish"
+  },
+  "dependencies": {
+    "@preact/signals-core": "^1.6.0",
+    "colorjs.io": "^0.5.2"
+  },
+  "devDependencies": {
+    "@astrojs/netlify": "^6.6.0",
+    "@astrojs/starlight": "^0.36.2",
+    "@types/jsdom": "^21.1.7",
+    "autoprefixer": "^10.4.19",
+    "jsdom": "^24.1.0",
+    "open-props": "^1.7.16",
+    "postcss": "^8.4.40",
+    "postcss-jit-props": "^1.0.14",
+    "terser": "^5.44.1",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.9",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^1.6.0"
+  }
+}