[ @sdxc/ui/mixins ]

colorPreview

Live-updates a ColorField's paired swatch preview as the person typing into its text control lands on a value the chosen color notation actually accepts, reflecting every keystroke a script can observe that no CSS selector or HTML attribute can react to on its own.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { colorPreview } from "@sdxc/ui/mixins";

Usage

Live-updates a ColorField's paired swatch preview as its text control's value changes, running each input event's value through parseColor() and writing successful parses onto the swatch found via findSwatch.

Signature

colorPreview(): MixinDescriptor<HTMLElement>

Returns a mixin descriptor for a ColorField wrapping host's mix prop.

Examples

<div mix={colorPreview()}>
  <input
    type="text"
    pattern="#[0-9a-fA-F]{6}"
    defaultValue="#3b82f6"
    aria-label={t("colorField.label")}
  />
  <ColorSwatch value="#3b82f6" />
</div>