ColorField

A field for a color, as hex or as one channel.

<script>
  import { $bind, $signal } from 'brumate/signals';
  import ColorField from '@brumate/ui/ColorField.brm';
  import ColorSwatch from '@brumate/ui/ColorSwatch.brm';
  import Input from '@brumate/ui/Input.brm';
  import Label from '@brumate/ui/Label.brm';

  let accent = $signal<string | null>('#e2445a');
  let hue = $signal<string | null>('hsl(210, 50%, 40%)');
</script>

<div class="ui-stack">
  <div class="ui-row ui-color-row">
    <ColorField class="ui-field" value=$bind(accent)>
      <Label>Accent</Label>
      <Input class="ui-input" />
    </ColorField>
    <ColorSwatch class="ui-swatch" color=(accent ?? 'transparent') />
  </div>
  <div class="ui-row ui-color-row">
    <ColorField class="ui-field" channel="hue" colorSpace="hsl" value=$bind(hue)>
      <Label>Hue</Label>
      <Input class="ui-input" />
    </ColorField>
    <ColorSwatch class="ui-swatch" color=(hue ?? 'transparent') />
  </div>
</div>

<ColorField value=$bind(accent)>
  <Label>Accent</Label>
  <Input />
</ColorField>
<ColorField channel="hue" colorSpace="hsl" value=$bind(accent)>
  <Label>Hue</Label>
  <Input />
</ColorField>

• A ColorField holds a Label, an Input, and can hold a Text with slot="description" and a FieldError.
• value is a color of CSS, such as #e2445a, or null when the field is empty. It starts its own state, or binds with $bind, and onChange gets each change. See State.
• The value keeps the format it was given, such as hsl(210, 50%, 40%), and is hex when it started empty. Editing keeps the alpha of the color.
• A field of a channel edits a color at full precision, and gives back the format of the caller. value and onChange change only when an edit makes another color, so typed hex in another case, or a blur without typing, changes nothing.
• name sends the hex, or the channel value, as it reads in the input, also before the code of the page loads.
• A reset of the form gives back the first value.
• isRequired asks the browser to check the field on a submit, and the FieldError shows the message.
• It shows data-channel, which is hex without a channel, and data-disabled, data-readonly, data-invalid and data-required.

Hex

• Typing keeps only text that can become hex. When focus leaves the input, or on Enter, abc becomes #AABBCC.
• Text that is not a color reverts. An empty field clears the value to null.
• ArrowUp and ArrowDown add or take 1 from the hex number, and PageUp and PageDown 16. Home goes to #000000 and End to #FFFFFF.
• An empty field starts at #000000 going up, and at #FFFFFF going down.
• The wheel steps the color while the input has focus, unless isWheelDisabled.

Channel

• channel is red, green, blue, hue, saturation, lightness, brightness or alpha. colorSpace picks the space to read the color in.
• The field behaves as a NumberField with the range, the step and the page size of the channel: 0 to 255 for red, 0 to 360 for hue, 0 to 100 for the others, and 0 to 1 by 0.01 for alpha.
• The number shows in the format of the locale, such as 120° or 50%.
• A channel cannot be empty, so an empty field reverts.
• An input without a Label or aria-label is named by its channel, such as "Hue".

Names

aria-label and aria-labelledby on the field name its input. A channel field has the role description "Number field", as in React Aria.