{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-picker",
  "type": "registry:ui",
  "title": "Color Picker",
  "description": "A native <input type=\"color\"> styled as a shadcn swatch, with an optional live hex readout. The browser supplies the entire picker UI and guarantees a valid CSS color value — we only restyle the swatch and never parse colors ourselves.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/color-picker.tsx",
      "type": "registry:ui",
      "target": "components/ui/color-picker.tsx",
      "content": "/** @jsxImportSource hono/jsx */\nimport { cn, type ClassValue } from \"@/registry/lib/cn\"\n\n// Color Picker — shadcn-htmx, htmx v4 + Tailwind v4.\n//\n// Built on native <input type=\"color\">. The browser owns the entire picker\n// UI (a platform color dialog or a validating text field) and guarantees the\n// value is a valid CSS color — we never reimplement any of that. shadcn/ui has\n// no color-picker; we mirror the Input anatomy\n// (repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/input.tsx) and lean on the\n// platform exactly like registry/ui/slider.tsx does for <input type=range>.\n//\n// What the platform gives us, per MDN:\n//   - the whole color-selection UI + value validation; an invalid value is\n//     coerced and :invalid is applied (we never parse colors ourselves)\n//   - `value` is a CSS <color>; default is #000000 when omitted/invalid\n//   - `alpha` (boolean) lets the user edit the alpha channel\n//   - `colorspace` (\"limited-srgb\" | \"display-p3\") hints the picker + gamut\n//   - `input` fires continuously as the color changes, `change` on dismiss\n//   - supported common attributes: autocomplete, list (a <datalist> of swatches)\n//   - it has NO implicit ARIA role, so a visible <label for> or ariaLabel is\n//     required for an accessible name\n//   See repos/mdn/files/en-us/web/html/reference/elements/input/color/index.md\n//       (Value:54, alpha/colorspace:63-69, events:96, common attrs:219,\n//        validation:121, Implicit ARIA Role: none:244)\n//\n// We hide the browser's default swatch chrome via Tailwind v4's pseudo-element\n// selectors ([&::-webkit-color-swatch] / [&::-moz-color-swatch]) so the control\n// reads as one rounded shadcn swatch — the same -webkit-/-moz- pairing the\n// Slider uses for its thumb. Both engines need separate rules.\n//\n// JS budget: none for the swatch itself (it is a real <input>). The optional\n// `showValue` hex readout is synced by a 6-line handler in public/site.js keyed\n// on data-slot=\"color-picker\"; with showValue={false} it is zero-JS.\n\nexport type ColorSpace = \"limited-srgb\" | \"display-p3\"\n\nconst swatchBase =\n  // The native <input type=color> styled as a single rounded swatch button.\n  \"size-9 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-1 shadow-xs outline-none transition-[color,box-shadow] \" +\n  \"dark:bg-input/30 \" +\n  \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 \" +\n  \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 \" +\n  \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 \" +\n  \"[&.htmx-request]:opacity-70 \" +\n  // Strip the platform swatch chrome so only our rounded fill shows.\n  \"[&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-sm [&::-webkit-color-swatch]:border-0 \" +\n  \"[&::-moz-color-swatch]:rounded-sm [&::-moz-color-swatch]:border-0\"\n\nconst valueText =\n  \"font-mono text-sm tabular-nums text-muted-foreground uppercase select-none\"\n\nexport function colorPickerClasses(opts?: { class?: ClassValue }): string {\n  return cn(swatchBase, opts?.class)\n}\n\ntype ColorPickerProps = {\n  id?: string\n  name?: string\n  // A CSS <color>. Defaults to #000000 if omitted or invalid (per MDN).\n  value?: string\n  required?: boolean\n  disabled?: boolean\n  autofocus?: boolean\n  form?: string\n  // Id of a <datalist> of preset color swatches the browser offers.\n  list?: string\n  autocomplete?: string\n\n  // Let the user edit the alpha channel (experimental; ignored where unsupported).\n  alpha?: boolean\n  // Hint the picker's color space + gamut.\n  colorspace?: ColorSpace\n\n  // Render the hex value next to the swatch as a live <output>. Defaults to\n  // true. With false the component is a bare swatch (zero JS).\n  showValue?: boolean\n\n  // ARIA / labelling. <input type=color> has no implicit role, so a visible\n  // <label for> or one of these is required for an accessible name.\n  ariaLabel?: string\n  ariaLabelledby?: string\n  ariaDescribedby?: string\n  ariaInvalid?: boolean | \"grammar\" | \"spelling\"\n  ariaRequired?: boolean\n\n  class?: ClassValue\n\n  // htmx v4 passthrough — fires on the input's change event by default (when\n  // the picker is dismissed). Use hx-trigger=\"input\" to push every adjustment.\n  // See repos/htmx/www/reference.md.\n  [key: `hx-${string}`]: any\n  [key: `data-${string}`]: any\n}\n\nexport function ColorPicker(props: ColorPickerProps) {\n  const {\n    id,\n    name,\n    value = \"#000000\",\n    required,\n    disabled,\n    autofocus,\n    form,\n    list,\n    autocomplete,\n    alpha,\n    colorspace,\n    showValue = true,\n    ariaLabel,\n    ariaLabelledby,\n    ariaDescribedby,\n    ariaInvalid,\n    ariaRequired,\n    class: className,\n    ...rest\n  } = props\n\n  const swatch = (\n    <input\n      type=\"color\"\n      id={id}\n      name={name}\n      value={value}\n      required={required}\n      disabled={disabled}\n      autofocus={autofocus}\n      form={form}\n      list={list}\n      autocomplete={autocomplete}\n      alpha={alpha ? \"\" : undefined}\n      colorspace={colorspace}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n      aria-invalid={ariaInvalid === undefined ? undefined : String(ariaInvalid)}\n      aria-required={ariaRequired === undefined ? undefined : String(ariaRequired)}\n      data-slot={showValue ? \"color-picker-swatch\" : \"color-picker\"}\n      class={cn(swatchBase, !showValue && className)}\n      {...(showValue ? {} : rest)}\n    />\n  )\n\n  if (!showValue) return swatch\n\n  // showValue on: a flex shell pairs the native swatch with a live hex\n  // <output> that public/site.js mirrors from the input's value (keyed on\n  // data-slot=\"color-picker\"). The output is decorative (aria-hidden) — the\n  // input is the labelled control and the source of truth for forms + AT.\n  return (\n    <span\n      data-slot=\"color-picker\"\n      data-disabled={disabled ? \"true\" : undefined}\n      class={cn(\"inline-flex items-center gap-2\", disabled && \"opacity-50\", className)}\n      {...rest}\n    >\n      {swatch}\n      <output data-slot=\"color-picker-value\" aria-hidden=\"true\" class={valueText}>\n        {value}\n      </output>\n    </span>\n  )\n}\n"
    },
    {
      "path": "registry/jinja2/color-picker.html",
      "type": "registry:file",
      "target": "templates/components/color-picker.html",
      "content": "{# Color Picker macro — shadcn-htmx, htmx v4 + Tailwind v4.\n   Mirrors registry/ui/color-picker.tsx for Python/Flask/FastAPI/Django/Jinja2.\n\n   The control is a native <input type=\"color\"> — the browser owns the whole\n   picker UI and validates the CSS color value. <input type=color> has no\n   implicit ARIA role, so pass a visible <label for> or aria_label. The optional\n   hex <output> is mirrored from the input's value by the shared handler in\n   public/site.js (keyed on data-slot=\"color-picker\"). With show_value=false the\n   component is a bare swatch (zero JS).\n\n   Usage:\n       {% from \"components/color-picker.html\" import color_picker %}\n       {{ color_picker(name=\"brand\", value=\"#e66465\", aria_label=\"Brand color\") }}\n       {{ color_picker(name=\"bg\", value=\"#1d4ed8\", show_value=false) }}\n\n   See repos/mdn/files/en-us/web/html/reference/elements/input/color/index.md. #}\n\n{% macro color_picker(\n    id=none,\n    name=none,\n    value=\"#000000\",\n    required=false,\n    disabled=false,\n    autofocus=false,\n    form=none,\n    list=none,\n    autocomplete=none,\n    alpha=false,\n    colorspace=none,\n    show_value=true,\n    aria_label=none,\n    aria_labelledby=none,\n    aria_describedby=none,\n    aria_invalid=none,\n    aria_required=none,\n    extra_class=\"\",\n    **attrs\n) %}\n{%- set swatch_base -%}\nsize-9 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-1 shadow-xs outline-none transition-[color,box-shadow] dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&.htmx-request]:opacity-70 [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-sm [&::-webkit-color-swatch]:border-0 [&::-moz-color-swatch]:rounded-sm [&::-moz-color-swatch]:border-0\n{%- endset -%}\n{%- set value_text -%}\nfont-mono text-sm tabular-nums text-muted-foreground uppercase select-none\n{%- endset -%}\n{%- macro swatch(slot) -%}\n<input type=\"color\"\n       {%- if id %} id=\"{{ id }}\"{% endif %}\n       {%- if name %} name=\"{{ name }}\"{% endif %}\n       value=\"{{ value }}\"\n       {%- if required %} required{% endif %}\n       {%- if disabled %} disabled{% endif %}\n       {%- if autofocus %} autofocus{% endif %}\n       {%- if form %} form=\"{{ form }}\"{% endif %}\n       {%- if list %} list=\"{{ list }}\"{% endif %}\n       {%- if autocomplete %} autocomplete=\"{{ autocomplete }}\"{% endif %}\n       {%- if alpha %} alpha{% endif %}\n       {%- if colorspace %} colorspace=\"{{ colorspace }}\"{% endif %}\n       {%- if aria_label %} aria-label=\"{{ aria_label }}\"{% endif %}\n       {%- if aria_labelledby %} aria-labelledby=\"{{ aria_labelledby }}\"{% endif %}\n       {%- if aria_describedby %} aria-describedby=\"{{ aria_describedby }}\"{% endif %}\n       {%- if aria_invalid is not none %} aria-invalid=\"{{ aria_invalid|string|lower }}\"{% endif %}\n       {%- if aria_required is not none %} aria-required=\"{{ aria_required|string|lower }}\"{% endif %}\n       data-slot=\"{{ slot }}\"\n       class=\"{{ swatch_base }}{% if not show_value %} {{ extra_class }}{% endif %}\"\n       {%- if not show_value %}{% for k, v in attrs.items() %} {{ k|replace('_', '-') }}=\"{{ v }}\"{% endfor %}{% endif -%}\n>\n{%- endmacro -%}\n{%- if show_value -%}\n<span data-slot=\"color-picker\"\n      {%- if disabled %} data-disabled=\"true\"{% endif %}\n      class=\"inline-flex items-center gap-2{% if disabled %} opacity-50{% endif %} {{ extra_class }}\"\n      {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}=\"{{ v }}\"{% endfor -%}\n>\n  {{ swatch(\"color-picker-swatch\") }}\n  <output data-slot=\"color-picker-value\" aria-hidden=\"true\" class=\"{{ value_text }}\">{{ value }}</output>\n</span>\n{%- else -%}\n{{ swatch(\"color-picker\") }}\n{%- endif -%}\n{% endmacro %}\n"
    },
    {
      "path": "registry/go-templates/color-picker.tmpl",
      "type": "registry:file",
      "target": "components/color-picker.tmpl",
      "content": "{{/*\n  Color Picker template — shadcn-htmx, htmx v4 + Tailwind v4.\n  Mirrors registry/ui/color-picker.tsx for Go projects using html/template.\n\n  The control is a native <input type=\"color\">: the browser owns the whole\n  picker UI and validates the CSS color value. <input type=color> has no\n  implicit ARIA role, so pass a visible <label for> or AriaLabel. The optional\n  hex <output> is mirrored from the input's value by the shared handler in\n  public/site.js (keyed on data-slot=\"color-picker\"). With NoValue, the\n  component is a bare swatch (zero JS).\n\n  Args (via dict):\n      ID, Name, Value              string  // Value is a CSS <color>, default #000000\n      Required, Disabled, Autofocus bool\n      Form, List, Autocomplete     string\n      Alpha                        bool    // allow editing the alpha channel\n      Colorspace                   string  // \"limited-srgb\" | \"display-p3\"\n      NoValue                      bool    // omit the hex readout (bare swatch)\n      AriaLabel, AriaLabelledby    string\n      AriaDescribedby              string\n      AriaInvalid, AriaRequired    string  // \"true\" | \"false\"\n      Attrs                        map[string]string // hx-*, data-*, …\n\n      {{template \"color-picker\" (dict \"Name\" \"brand\" \"Value\" \"#e66465\" \"AriaLabel\" \"Brand color\")}}\n\n  See repos/mdn/files/en-us/web/html/reference/elements/input/color/index.md.\n*/}}\n\n{{define \"color-picker\"}}\n{{- $showValue := not .NoValue -}}\n{{- $value := or .Value \"#000000\" -}}\n{{- $swatchBase := \"size-9 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-1 shadow-xs outline-none transition-[color,box-shadow] dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&.htmx-request]:opacity-70 [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-sm [&::-webkit-color-swatch]:border-0 [&::-moz-color-swatch]:rounded-sm [&::-moz-color-swatch]:border-0\" -}}\n{{- $valueText := \"font-mono text-sm tabular-nums text-muted-foreground uppercase select-none\" -}}\n{{- if $showValue -}}\n<span data-slot=\"color-picker\"\n      {{- if .Disabled}} data-disabled=\"true\"{{end}}\n      class=\"inline-flex items-center gap-2{{if .Disabled}} opacity-50{{end}}\"\n      {{- range $k, $v := .Attrs}} {{$k}}=\"{{$v}}\"{{end -}}\n>\n  <input type=\"color\"\n       {{- if .ID}} id=\"{{.ID}}\"{{end}}\n       {{- if .Name}} name=\"{{.Name}}\"{{end}}\n       value=\"{{$value}}\"\n       {{- if .Required}} required{{end}}\n       {{- if .Disabled}} disabled{{end}}\n       {{- if .Autofocus}} autofocus{{end}}\n       {{- if .Form}} form=\"{{.Form}}\"{{end}}\n       {{- if .List}} list=\"{{.List}}\"{{end}}\n       {{- if .Autocomplete}} autocomplete=\"{{.Autocomplete}}\"{{end}}\n       {{- if .Alpha}} alpha{{end}}\n       {{- if .Colorspace}} colorspace=\"{{.Colorspace}}\"{{end}}\n       {{- if .AriaLabel}} aria-label=\"{{.AriaLabel}}\"{{end}}\n       {{- if .AriaLabelledby}} aria-labelledby=\"{{.AriaLabelledby}}\"{{end}}\n       {{- if .AriaDescribedby}} aria-describedby=\"{{.AriaDescribedby}}\"{{end}}\n       {{- if .AriaInvalid}} aria-invalid=\"{{.AriaInvalid}}\"{{end}}\n       {{- if .AriaRequired}} aria-required=\"{{.AriaRequired}}\"{{end}}\n       data-slot=\"color-picker-swatch\"\n       class=\"{{$swatchBase}}\">\n  <output data-slot=\"color-picker-value\" aria-hidden=\"true\" class=\"{{$valueText}}\">{{$value}}</output>\n</span>\n{{- else -}}\n<input type=\"color\"\n     {{- if .ID}} id=\"{{.ID}}\"{{end}}\n     {{- if .Name}} name=\"{{.Name}}\"{{end}}\n     value=\"{{$value}}\"\n     {{- if .Required}} required{{end}}\n     {{- if .Disabled}} disabled{{end}}\n     {{- if .Autofocus}} autofocus{{end}}\n     {{- if .Form}} form=\"{{.Form}}\"{{end}}\n     {{- if .List}} list=\"{{.List}}\"{{end}}\n     {{- if .Autocomplete}} autocomplete=\"{{.Autocomplete}}\"{{end}}\n     {{- if .Alpha}} alpha{{end}}\n     {{- if .Colorspace}} colorspace=\"{{.Colorspace}}\"{{end}}\n     {{- if .AriaLabel}} aria-label=\"{{.AriaLabel}}\"{{end}}\n     {{- if .AriaLabelledby}} aria-labelledby=\"{{.AriaLabelledby}}\"{{end}}\n     {{- if .AriaDescribedby}} aria-describedby=\"{{.AriaDescribedby}}\"{{end}}\n     {{- if .AriaInvalid}} aria-invalid=\"{{.AriaInvalid}}\"{{end}}\n     {{- if .AriaRequired}} aria-required=\"{{.AriaRequired}}\"{{end}}\n     data-slot=\"color-picker\"\n     class=\"{{$swatchBase}}\"\n     {{- range $k, $v := .Attrs}} {{$k}}=\"{{$v}}\"{{end -}}\n>\n{{- end -}}\n{{end}}\n"
    },
    {
      "path": "registry/phoenix/color_picker.ex",
      "type": "registry:file",
      "target": "lib/my_app_web/components/color_picker.ex",
      "content": "defmodule ShadcnHtmx.Components.ColorPicker do\n  @moduledoc \"\"\"\n  Color Picker — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.\n\n  Mirrors registry/ui/color-picker.tsx. The control is a native\n  `<input type=\"color\">`, so the browser owns the whole picker UI and validates\n  the CSS color value. `<input type=color>` has no implicit ARIA role, so pass a\n  visible `<label for>` or `aria-label`. The optional hex `<output>` is mirrored\n  from the input's value by the shared handler in public/site.js (keyed on\n  `data-slot=\"color-picker\"`). With `show_value={false}` it is a bare swatch\n  (zero JS).\n\n  ## Examples\n\n      <.color_picker name=\"brand\" value=\"#e66465\" aria-label=\"Brand color\" />\n      <.color_picker name=\"bg\" value=\"#1d4ed8\" show_value={false} />\n\n  See repos/mdn/files/en-us/web/html/reference/elements/input/color/index.md.\n  \"\"\"\n\n  use Phoenix.Component\n\n  @swatch_base \"size-9 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-1 shadow-xs \" <>\n                 \"outline-none transition-[color,box-shadow] dark:bg-input/30 \" <>\n                 \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 \" <>\n                 \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 \" <>\n                 \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 \" <>\n                 \"[&.htmx-request]:opacity-70 \" <>\n                 \"[&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-sm [&::-webkit-color-swatch]:border-0 \" <>\n                 \"[&::-moz-color-swatch]:rounded-sm [&::-moz-color-swatch]:border-0\"\n\n  @value_text \"font-mono text-sm tabular-nums text-muted-foreground uppercase select-none\"\n\n  attr :value, :string, default: \"#000000\"\n  attr :show_value, :boolean, default: true\n  attr :disabled, :boolean, default: false\n  attr :class, :string, default: nil\n\n  attr :rest, :global,\n    include:\n      ~w(hx-get hx-post hx-put hx-patch hx-delete hx-target hx-swap hx-trigger hx-indicator hx-vals hx-include\n         id name required autofocus form list autocomplete alpha colorspace\n         aria-label aria-labelledby aria-describedby aria-invalid aria-required)\n\n  def color_picker(assigns) do\n    assigns =\n      assigns\n      |> assign(:swatch_base, @swatch_base)\n      |> assign(:value_text, @value_text)\n\n    ~H\"\"\"\n    <span\n      :if={@show_value}\n      data-slot=\"color-picker\"\n      data-disabled={@disabled && \"true\"}\n      class={[\"inline-flex items-center gap-2\", @disabled && \"opacity-50\", @class]}\n    >\n      <input\n        type=\"color\"\n        value={@value}\n        disabled={@disabled}\n        data-slot=\"color-picker-swatch\"\n        class={@swatch_base}\n        {@rest}\n      />\n      <output data-slot=\"color-picker-value\" aria-hidden=\"true\" class={@value_text}>{@value}</output>\n    </span>\n    <input\n      :if={!@show_value}\n      type=\"color\"\n      value={@value}\n      disabled={@disabled}\n      data-slot=\"color-picker\"\n      class={[@swatch_base, @class]}\n      {@rest}\n    />\n    \"\"\"\n  end\nend\n"
    },
    {
      "path": "registry/html/color-picker.html",
      "type": "registry:file",
      "target": "snippets/color-picker.html",
      "content": "<!--\n  shadcn-htmx — raw Color Picker snippets.\n\n  Mirrors registry/ui/color-picker.tsx. Drop onto any page that loads Tailwind\n  CSS v4 and the shadcn theme variables (background, foreground, input, ring,\n  destructive, muted-foreground). See app/styles/input.css for defaults.\n\n  The control is a native <input type=\"color\"> — the browser owns the whole\n  picker UI and validates the CSS color value (see MDN). It has no implicit ARIA\n  role, so pair it with a visible <label for> or aria-label. The hex <output>\n  next to the swatch is mirrored from the input's value by the inline boot\n  script below (data-slot=\"color-picker\"). In the docs app the same handler\n  lives in public/site.js, so you can delete the script there. The bare-swatch\n  variant has no JS at all.\n\n  SWATCH BASE (native <input type=color> styled as one rounded swatch; strips\n  the platform swatch chrome via -webkit-/-moz- pseudo-elements):\n    size-9 shrink-0 cursor-pointer rounded-md border border-input bg-transparent\n    p-1 shadow-xs outline-none transition-[color,box-shadow] dark:bg-input/30\n    focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\n    aria-invalid:border-destructive aria-invalid:ring-destructive/20\n    dark:aria-invalid:ring-destructive/40\n    disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\n    [&.htmx-request]:opacity-70\n    [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-sm\n    [&::-webkit-color-swatch]:border-0 [&::-moz-color-swatch]:rounded-sm\n    [&::-moz-color-swatch]:border-0\n-->\n\n<!-- ─── With hex readout (default) ──────────────────────────────────── -->\n<span data-slot=\"color-picker\" class=\"inline-flex items-center gap-2\">\n  <input type=\"color\" name=\"brand\" value=\"#e66465\" aria-label=\"Brand color\" data-slot=\"color-picker-swatch\"\n    class=\"size-9 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-1 shadow-xs outline-none transition-[color,box-shadow] dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&.htmx-request]:opacity-70 [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-sm [&::-webkit-color-swatch]:border-0 [&::-moz-color-swatch]:rounded-sm [&::-moz-color-swatch]:border-0\">\n  <output data-slot=\"color-picker-value\" aria-hidden=\"true\" class=\"font-mono text-sm tabular-nums text-muted-foreground uppercase select-none\">#e66465</output>\n</span>\n\n<!-- ─── Bare swatch, no readout — zero JS ───────────────────────────── -->\n<input type=\"color\" name=\"bg\" value=\"#1d4ed8\" aria-label=\"Background color\" data-slot=\"color-picker\"\n  class=\"size-9 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-1 shadow-xs outline-none transition-[color,box-shadow] dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&.htmx-request]:opacity-70 [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-sm [&::-webkit-color-swatch]:border-0 [&::-moz-color-swatch]:rounded-sm [&::-moz-color-swatch]:border-0\">\n\n<!-- ─── Alpha + a <datalist> of preset swatches ─────────────────────── -->\n<input type=\"color\" name=\"accent\" value=\"#22c55e\" alpha list=\"brand-swatches\" aria-label=\"Accent color\" data-slot=\"color-picker\"\n  class=\"size-9 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-1 shadow-xs outline-none transition-[color,box-shadow] dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-sm [&::-webkit-color-swatch]:border-0 [&::-moz-color-swatch]:rounded-sm [&::-moz-color-swatch]:border-0\">\n<datalist id=\"brand-swatches\">\n  <option value=\"#e66465\"></option>\n  <option value=\"#1d4ed8\"></option>\n  <option value=\"#22c55e\"></option>\n</datalist>\n\n<!--\n  Boot script — mirrors each color-picker's hex <output> from its input value.\n  Self-contained; safe to include once per page. (The docs site ships the same\n  logic in public/site.js, so omit this there.)\n-->\n<script>\n  (function () {\n    document.addEventListener('input', function (e) {\n      var input = e.target\n      if (!input.matches || !input.matches('[data-slot=\"color-picker\"] input[type=\"color\"], input[data-slot=\"color-picker-swatch\"]')) return\n      var root = input.closest('[data-slot=\"color-picker\"]')\n      var out = root && root.querySelector('[data-slot=\"color-picker-value\"]')\n      if (out) out.textContent = input.value\n    })\n  })()\n</script>\n"
    }
  ]
}