openproject-primer_view_components 0.92.0 → 0.93.0

data/app/components/primer/open_project/color_field.css

@@ -0,0 +1 @@
+.ColorField{display:block}.ColorField .ColorField-wrap .FormControl-input{padding-inline-start:calc(var(--base-size-4) + var(--base-size-24) + var(--base-size-8))}.ColorField .ColorField-swatch{position:absolute;inset-block:0;inset-inline-start:var(--base-size-4);display:flex;align-items:center}.ColorField .ColorField-picker{width:var(--base-size-24);height:var(--base-size-24);padding:0;cursor:pointer;background-color:var(--bgColor-muted);border:0;border-radius:var(--borderRadius-small);outline:var(--borderWidth-thin) solid var(--borderColor-translucent);outline-offset:calc(var(--borderWidth-thin)*-1);appearance:none;forced-color-adjust:none}:is(.ColorField .ColorField-picker):disabled{cursor:default}:is(.ColorField .ColorField-picker):focus-visible{outline:2px solid var(--focus-outlineColor);outline-offset:-2px;box-shadow:none}:is(.ColorField .ColorField-picker)::-webkit-color-swatch-wrapper{padding:0}:is(.ColorField .ColorField-picker)::-webkit-color-swatch{border:0;border-radius:var(--borderRadius-small)}:is(.ColorField .ColorField-picker)::-moz-color-swatch{border:0;border-radius:var(--borderRadius-small)}.ColorField[data-blank] .ColorField-picker{outline-style:dashed}.ColorField[data-empty] .ColorField-picker::-webkit-color-swatch{opacity:0}.ColorField[data-empty] .ColorField-picker::-moz-color-swatch{opacity:0}.ColorField:not(:defined) .ColorField-picker:disabled{opacity:1}

data/app/components/primer/open_project/color_field.css.json

@@ -0,0 +1,18 @@
+{
+  "name": "open_project/color_field",
+  "selectors": [
+    ".ColorField",
+    ".ColorField .ColorField-wrap .FormControl-input",
+    ".ColorField .ColorField-swatch",
+    ".ColorField .ColorField-picker",
+    ":is(.ColorField .ColorField-picker):disabled",
+    ":is(.ColorField .ColorField-picker):focus-visible",
+    ":is(.ColorField .ColorField-picker)::-webkit-color-swatch-wrapper",
+    ":is(.ColorField .ColorField-picker)::-webkit-color-swatch",
+    ":is(.ColorField .ColorField-picker)::-moz-color-swatch",
+    ".ColorField[data-blank] .ColorField-picker",
+    ".ColorField[data-empty] .ColorField-picker::-webkit-color-swatch",
+    ".ColorField[data-empty] .ColorField-picker::-moz-color-swatch",
+    ".ColorField:not(:defined) .ColorField-picker:disabled"
+  ]
+}

data/app/components/primer/open_project/color_field.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["color_field.pcss","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"AAAA,YACE,aAoEF,CAlEE,gDACE,wFACF,CAEA,+BACE,iBAAkB,CAClB,aAAc,CACd,qCAAsC,CACtC,YAAa,CACb,kBACF,CAEA,+BACE,yBAA0B,CAC1B,0BAA2B,CAC3B,SAAU,CACV,cAAe,CACf,qCAAsC,CACtC,QAAS,CACT,uCAAwC,CAIxC,oEAAqE,CACrE,+CAAkD,CAClD,eAAgB,CAChB,wBAuBF,CArBE,6CACE,cACF,CAEA,kDClCF,2CAAgC,CAChC,mBAA8B,CAC9B,eDkCE,CAEA,kEACE,SACF,CAEA,0DACE,QAAS,CACT,uCACF,CAEA,uDACE,QAAS,CACT,uCACF,CAGF,2CACE,oBACF,CAEA,iEACE,SACF,CAEA,8DACE,SACF,CAEA,sDACE,SACF","file":"color_field.css","sourcesContent":[".ColorField {\n  display: block;\n\n  & .ColorField-wrap .FormControl-input {\n    padding-inline-start: calc(var(--base-size-4) + var(--base-size-24) + var(--base-size-8));\n  }\n\n  & .ColorField-swatch {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: var(--base-size-4);\n    display: flex;\n    align-items: center;\n  }\n\n  & .ColorField-picker {\n    width: var(--base-size-24);\n    height: var(--base-size-24);\n    padding: 0;\n    cursor: pointer;\n    background-color: var(--bgColor-muted);\n    border: 0;\n    border-radius: var(--borderRadius-small);\n\n    /* An outline, not a border: it is painted over the native swatch, so\n       the color fills the whole box and the border sits on top of it. */\n    outline: var(--borderWidth-thin) solid var(--borderColor-translucent);\n    outline-offset: calc(var(--borderWidth-thin) * -1);\n    appearance: none;\n    forced-color-adjust: none;\n\n    &:disabled {\n      cursor: default;\n    }\n\n    &:focus-visible {\n      @mixin focusOutline;\n    }\n\n    &::-webkit-color-swatch-wrapper {\n      padding: 0;\n    }\n\n    &::-webkit-color-swatch {\n      border: 0;\n      border-radius: var(--borderRadius-small);\n    }\n\n    &::-moz-color-swatch {\n      border: 0;\n      border-radius: var(--borderRadius-small);\n    }\n  }\n\n  &[data-blank] .ColorField-picker {\n    outline-style: dashed;\n  }\n\n  &[data-empty] .ColorField-picker::-webkit-color-swatch {\n    opacity: 0;\n  }\n\n  &[data-empty] .ColorField-picker::-moz-color-swatch {\n    opacity: 0;\n  }\n\n  &:not(:defined) .ColorField-picker:disabled {\n    opacity: 1;\n  }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n"]}

data/app/components/primer/open_project/color_field.pcss

@@ -0,0 +1,70 @@
+.ColorField {
+  display: block;
+
+  & .ColorField-wrap .FormControl-input {
+    padding-inline-start: calc(var(--base-size-4) + var(--base-size-24) + var(--base-size-8));
+  }
+
+  & .ColorField-swatch {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--base-size-4);
+    display: flex;
+    align-items: center;
+  }
+
+  & .ColorField-picker {
+    width: var(--base-size-24);
+    height: var(--base-size-24);
+    padding: 0;
+    cursor: pointer;
+    background-color: var(--bgColor-muted);
+    border: 0;
+    border-radius: var(--borderRadius-small);
+
+    /* An outline, not a border: it is painted over the native swatch, so
+       the color fills the whole box and the border sits on top of it. */
+    outline: var(--borderWidth-thin) solid var(--borderColor-translucent);
+    outline-offset: calc(var(--borderWidth-thin) * -1);
+    appearance: none;
+    forced-color-adjust: none;
+
+    &:disabled {
+      cursor: default;
+    }
+
+    &:focus-visible {
+      @mixin focusOutline;
+    }
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border: 0;
+      border-radius: var(--borderRadius-small);
+    }
+
+    &::-moz-color-swatch {
+      border: 0;
+      border-radius: var(--borderRadius-small);
+    }
+  }
+
+  &[data-blank] .ColorField-picker {
+    outline-style: dashed;
+  }
+
+  &[data-empty] .ColorField-picker::-webkit-color-swatch {
+    opacity: 0;
+  }
+
+  &[data-empty] .ColorField-picker::-moz-color-swatch {
+    opacity: 0;
+  }
+
+  &:not(:defined) .ColorField-picker:disabled {
+    opacity: 1;
+  }
+}

data/app/components/primer/open_project/color_field.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    ColorField = Primer::FormComponents.from_input(Primer::Forms::Dsl::ColorFieldInput)
+
+    # Color fields are single-line text inputs for hex color codes, paired with a native color
+    # picker that doubles as a swatch. They render an `<input type="text">`, which is submitted,
+    # and an unnamed `<input type="color">`, which is not. The field can therefore be left blank.
+    #
+    # Typed text is previewed in the swatch as soon as it is a valid three- or six-digit hex code
+    # and is rewritten to uppercase `#RRGGBB` when the field loses focus. Invalid text is left
+    # alone; validate it on the server.
+    #
+    # Space color fields through their container, such as a form group or a stack. As with text
+    # fields, system arguments are applied to the text input itself, so a margin passed to the
+    # field moves the input away from its swatch.
+    #
+    # @form_usage
+    #   class ExampleForm < ApplicationForm
+    #     form do |example_form|
+    #       example_form.color_field(attributes)
+    #     end
+    #   end
+    class ColorField < Primer::Component
+      status :open_project
+
+      # @!method initialize
+      #
+      # @macro form_size_arguments
+      # @macro form_full_width_arguments
+      # @macro form_input_arguments
+      # @macro form_input_width_arguments
+      #
+      # @param maxlength [Integer] Maximum number of characters the text input accepts. Defaults to 7, the length of `#RRGGBB`.
+      # @param placeholder [String] Placeholder text. It is not previewed in the swatch, which stays empty while the field is blank.
+      # @param picker_label [String] Accessible name of the native color picker. Defaults to `I18n.t("color_field.picker_label", label: label)`, or to `I18n.t("color_field.picker_label_generic")` when there is no label.
+    end
+  end
+end

data/app/components/primer/primer.d.ts

@@ -23,6 +23,7 @@ import './alpha/tab_container';
 import '../../lib/primer/forms/primer_multi_input';
 import '../../lib/primer/forms/primer_text_field';
 import '../../lib/primer/forms/primer_text_area';
+import '../../lib/primer/forms/primer_color_input';
 import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';

data/app/components/primer/primer.js

@@ -23,6 +23,7 @@ import './alpha/tab_container';
 import '../../lib/primer/forms/primer_multi_input';
 import '../../lib/primer/forms/primer_text_field';
 import '../../lib/primer/forms/primer_text_area';
+import '../../lib/primer/forms/primer_color_input';
 import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';

data/app/components/primer/primer.pcss

@@ -50,6 +50,7 @@
 @import "./open_project/drag_handle.pcss";
 @import "./open_project/border_grid.pcss";
 @import "./open_project/input_group.pcss";
+@import "./open_project/color_field.pcss";
 @import "./open_project/inline_message.pcss";
 @import "./open_project/sub_header.pcss";
 @import "./open_project/side_panel/section.pcss";

data/app/components/primer/primer.ts

@@ -23,6 +23,7 @@ import './alpha/tab_container'
 import '../../lib/primer/forms/primer_multi_input'
 import '../../lib/primer/forms/primer_text_field'
 import '../../lib/primer/forms/primer_text_area'
+import '../../lib/primer/forms/primer_color_input'
 import '../../lib/primer/forms/toggle_switch_input'
 import './alpha/action_menu/action_menu_element'
 import './alpha/select_panel_element'

data/app/lib/primer/forms/color_field.html.erb

@@ -0,0 +1,10 @@
+<%= render(FormControl.new(input: @input)) do %>
+  <%= content_tag(:"primer-color-input", **@element_arguments) do %>
+    <%= content_tag(:div, **@field_wrap_arguments) do %>
+      <%= builder.text_field(@input.name, **@input.input_arguments) %>
+      <span class="ColorField-swatch">
+        <%= picker_tag %>
+      </span>
+    <% end %>
+  <% end %>
+<% end %>

data/app/lib/primer/forms/color_field.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class ColorField < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      INPUT_WRAP_SIZE = {
+        small: "FormControl-input-wrap--small",
+        large: "FormControl-input-wrap--large"
+      }.freeze
+
+      def initialize(input:)
+        @input = input
+
+        @input.add_input_classes(
+          "FormControl-input",
+          "FormControl-monospace",
+          Primer::Forms::Dsl::Input::SIZE_MAPPINGS[@input.size]
+        )
+
+        # The custom element is rendered inside FormControl rather than as its
+        # tag, so that it survives `form_control: false` (as set by `multi`).
+        #
+        # Catalyst boolean attributes are true when present, whatever their
+        # value, so false must render no attribute at all (nil), not "false".
+        @element_arguments = {
+          class: "ColorField",
+          data: {
+            blank: (@input.blank? ? "" : nil),
+            empty: (@input.empty? ? "" : nil)
+          }
+        }
+
+        wrap_classes = [
+          "FormControl-input-wrap",
+          "ColorField-wrap",
+          INPUT_WRAP_SIZE[@input.size]
+        ]
+        wrap_classes << Primer::Forms::Dsl::Input::INPUT_WIDTH_MAPPINGS[@input.input_width] if @input.input_width
+
+        @field_wrap_arguments = {
+          class: class_names(wrap_classes),
+          hidden: @input.hidden?
+        }
+      end
+
+      # The native color input. Always rendered disabled: without the
+      # controller nothing copies a picked color into the submitted text
+      # input, so the controller is what enables it.
+      def picker_tag
+        @view_context.tag.input(
+          type: :color,
+          class: "ColorField-picker",
+          value: @input.picker_value,
+          disabled: true,
+          aria: { label: @input.picker_label },
+          data: {
+            target: "primer-color-input.pickerElement",
+            action: "input:primer-color-input#syncInput change:primer-color-input#commit"
+          }
+        )
+      end
+    end
+  end
+end

data/app/lib/primer/forms/dsl/color_field_input.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    module Dsl
+      # :nodoc:
+      class ColorFieldInput < Input
+        HEX_FORMAT = /\A#?(\h{3}|\h{6})\z/
+
+        attr_reader :name, :label, :picker_label
+
+        # Returns the canonical uppercase `#RRGGBB` form of the given text, or
+        # `nil` if it is not a three- or six-digit hex color.
+        def self.parse_hex(text)
+          match = HEX_FORMAT.match(text.to_s.strip)
+          return nil unless match
+
+          digits = match[1]
+          digits = digits.gsub(/\h/) { |digit| digit * 2 } if digits.length == 3
+
+          "##{digits.upcase}"
+        end
+
+        def initialize(name:, label:, **system_arguments)
+          @name = name
+          @label = label
+          @picker_label = system_arguments.delete(:picker_label) || default_picker_label
+
+          caller_target = system_arguments.dig(:data, :target)
+          caller_action = system_arguments.dig(:data, :action)
+
+          super(**system_arguments)
+
+          input_arguments[:autocomplete] ||= "off"
+          # The longest text that parses, `#RRGGBB`.
+          input_arguments[:maxlength] ||= 7
+
+          add_input_data(:target, "primer-color-input.inputElement #{caller_target}".strip)
+          add_input_data(
+            :action,
+            "input:primer-color-input#syncPicker change:primer-color-input#normalize " \
+            "paste:primer-color-input#trimPaste #{caller_action}".strip
+          )
+
+          yield(self) if block_given?
+        end
+
+        # The value Rails will render into the text input: the explicit `value:`
+        # argument if given, otherwise the attribute of the form's model object.
+        def current_value
+          builder.text_field_attributes(
+            name, object: builder.object, **input_arguments.slice(:value)
+          )["value"]
+        end
+
+        def blank?
+          current_value.to_s.strip.empty?
+        end
+
+        # The color the native picker starts with: the current value, or `nil`
+        # if the field is blank or its value is not a hex color. A placeholder
+        # is never previewed.
+        def picker_value
+          return @picker_value if defined?(@picker_value)
+
+          @picker_value = blank? ? nil : self.class.parse_hex(current_value)
+        end
+
+        # Whether there is no color to show in the swatch at all.
+        def empty?
+          picker_value.nil?
+        end
+
+        def to_component
+          ColorField.new(input: self)
+        end
+
+        def type
+          :color_field
+        end
+
+        def focusable?
+          true
+        end
+
+        private
+
+        # Inputs inside `multi` have no label of their own.
+        def default_picker_label
+          return I18n.t("color_field.picker_label_generic") if label.blank?
+
+          I18n.t("color_field.picker_label", label: label)
+        end
+      end
+    end
+  end
+end

data/app/lib/primer/forms/dsl/input_methods.rb

@@ -86,6 +86,15 @@ module Primer
           add_input TextAreaInput.new(builder: builder, form: form, **options, &block)
         end
 
+        # Adds a color field to this form.
+        #
+        # @param options [Hash] The options accepted by the color field input (see forms docs).
+        # @param block [Proc] A block that will be yielded a reference to the input object so it can be customized.
+        def color_field(**options, &block)
+          options = decorate_options(**options)
+          add_input ColorFieldInput.new(builder: builder, form: form, **options, &block)
+        end
+
         # END text input methods
 
         # START select input methods

data/app/lib/primer/forms/primer_color_input.d.ts

@@ -0,0 +1,17 @@
+export declare function parseHex(text: string): string | null;
+export declare class PrimerColorInputElement extends HTMLElement {
+    #private;
+    inputElement: HTMLInputElement;
+    pickerElement: HTMLInputElement;
+    blank: boolean;
+    empty: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncDisabled;
+    syncPicker(): void;
+    normalize(): void;
+    trimPaste(event: ClipboardEvent): void;
+    syncInput(event: Event): void;
+    commit(event: Event): void;
+    sync(): void;
+}

data/app/lib/primer/forms/primer_color_input.js

@@ -0,0 +1,138 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _PrimerColorInputElement_abortController, _PrimerColorInputElement_observer;
+import { attr, controller, target } from '@github/catalyst';
+const HEX_PATTERN = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
+// Returns the canonical uppercase `#RRGGBB` form of the given text, or null
+// if it is not a three- or six-digit hex color.
+export function parseHex(text) {
+    const match = HEX_PATTERN.exec(text.trim());
+    if (!match)
+        return null;
+    let digits = match[1];
+    if (digits.length === 3)
+        digits = digits.replace(/./g, '$&$&');
+    return `#${digits.toUpperCase()}`;
+}
+let PrimerColorInputElement = class PrimerColorInputElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        // The text input is empty.
+        this.blank = false;
+        // There is no color to show in the swatch.
+        this.empty = false;
+        _PrimerColorInputElement_abortController.set(this, null);
+        _PrimerColorInputElement_observer.set(this, null);
+    }
+    connectedCallback() {
+        __classPrivateFieldGet(this, _PrimerColorInputElement_abortController, "f")?.abort();
+        const { signal } = (__classPrivateFieldSet(this, _PrimerColorInputElement_abortController, new AbortController(), "f"));
+        this.syncDisabled();
+        this.sync();
+        // The server always renders the picker disabled. Whatever rewrites
+        // attributes without reconnecting this element, a Turbo morph for one,
+        // puts that back, so the rule is re-applied on every such change.
+        __classPrivateFieldGet(this, _PrimerColorInputElement_observer, "f")?.disconnect();
+        __classPrivateFieldSet(this, _PrimerColorInputElement_observer, new MutationObserver(() => this.syncDisabled()), "f");
+        __classPrivateFieldGet(this, _PrimerColorInputElement_observer, "f").observe(this, { attributes: true, attributeFilter: ['disabled', 'readonly'], subtree: true });
+        // The form is outside this element's subtree, so data-action cannot
+        // reach it. Reset restores the text value after the event, hence the tick.
+        this.inputElement.form?.addEventListener('reset', () => setTimeout(() => this.sync()), { signal });
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _PrimerColorInputElement_abortController, "f")?.abort();
+        __classPrivateFieldGet(this, _PrimerColorInputElement_observer, "f")?.disconnect();
+    }
+    // The picker is operable only while its value can reach the submitted text
+    // input and that input accepts edits.
+    syncDisabled() {
+        const disabled = this.inputElement.disabled || this.inputElement.readOnly;
+        // Assigning the same value again would still rewrite the attribute and
+        // wake the observer, which would then never settle.
+        if (this.pickerElement.disabled !== disabled)
+            this.pickerElement.disabled = disabled;
+    }
+    // Text → picker. Bound to `input` on the text input, so the swatch follows
+    // every keystroke: text that is not a whole color yet shows none. The
+    // picker itself has no empty value and keeps the last color to open on.
+    syncPicker() {
+        const text = this.inputElement.value.trim();
+        const color = parseHex(text);
+        this.blank = text === '';
+        this.empty = color === null;
+        if (color)
+            this.pickerElement.value = color.toLowerCase();
+    }
+    // Bound to `change` on the text input.
+    normalize() {
+        const color = parseHex(this.inputElement.value);
+        if (color)
+            this.inputElement.value = color;
+    }
+    // Bound to `paste` on the text input. The browser cuts a paste to the
+    // input's `maxlength` first, so padding around a copied color would push
+    // its last digits out. The padding is dropped and the rest inserted as an
+    // edit of the user's own, which keeps undo, `maxlength` and read-only
+    // intact and still ends in a `change` event.
+    trimPaste(event) {
+        const text = event.clipboardData?.getData('text/plain') ?? '';
+        const trimmed = text.trim();
+        if (trimmed === text)
+            return;
+        event.preventDefault();
+        document.execCommand('insertText', false, trimmed);
+    }
+    // Picker → text. Bound to `input` on the picker. The picker's own event
+    // stops here: the one forwarded from the text input stands in for it, and
+    // listeners further up would otherwise hear of each pick twice.
+    syncInput(event) {
+        /* eslint-disable-next-line no-restricted-syntax */
+        event.stopPropagation();
+        this.inputElement.value = this.pickerElement.value.toUpperCase();
+        this.inputElement.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    // Bound to `change` on the picker, whose own event stops here as well.
+    commit(event) {
+        /* eslint-disable-next-line no-restricted-syntax */
+        event.stopPropagation();
+        this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    // Resynchronises from the text input's current value. Call this after
+    // setting the value from script, which fires no event.
+    sync() {
+        this.syncPicker();
+    }
+};
+_PrimerColorInputElement_abortController = new WeakMap();
+_PrimerColorInputElement_observer = new WeakMap();
+__decorate([
+    target
+], PrimerColorInputElement.prototype, "inputElement", void 0);
+__decorate([
+    target
+], PrimerColorInputElement.prototype, "pickerElement", void 0);
+__decorate([
+    attr
+], PrimerColorInputElement.prototype, "blank", void 0);
+__decorate([
+    attr
+], PrimerColorInputElement.prototype, "empty", void 0);
+PrimerColorInputElement = __decorate([
+    controller('primer-color-input')
+], PrimerColorInputElement);
+export { PrimerColorInputElement };

data/app/lib/primer/forms/primer_color_input.ts

@@ -0,0 +1,121 @@
+import {attr, controller, target} from '@github/catalyst'
+
+const HEX_PATTERN = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i
+
+// Returns the canonical uppercase `#RRGGBB` form of the given text, or null
+// if it is not a three- or six-digit hex color.
+export function parseHex(text: string): string | null {
+  const match = HEX_PATTERN.exec(text.trim())
+  if (!match) return null
+
+  let digits = match[1]
+  if (digits.length === 3) digits = digits.replace(/./g, '$&$&')
+
+  return `#${digits.toUpperCase()}`
+}
+
+@controller('primer-color-input')
+export class PrimerColorInputElement extends HTMLElement {
+  @target inputElement: HTMLInputElement
+  @target pickerElement: HTMLInputElement
+
+  // The text input is empty.
+  @attr blank = false
+  // There is no color to show in the swatch.
+  @attr empty = false
+
+  #abortController: AbortController | null = null
+  #observer: MutationObserver | null = null
+
+  connectedCallback(): void {
+    this.#abortController?.abort()
+    const {signal} = (this.#abortController = new AbortController())
+
+    this.syncDisabled()
+    this.sync()
+
+    // The server always renders the picker disabled. Whatever rewrites
+    // attributes without reconnecting this element, a Turbo morph for one,
+    // puts that back, so the rule is re-applied on every such change.
+    this.#observer?.disconnect()
+    this.#observer = new MutationObserver(() => this.syncDisabled())
+    this.#observer.observe(this, {attributes: true, attributeFilter: ['disabled', 'readonly'], subtree: true})
+
+    // The form is outside this element's subtree, so data-action cannot
+    // reach it. Reset restores the text value after the event, hence the tick.
+    this.inputElement.form?.addEventListener('reset', () => setTimeout(() => this.sync()), {signal})
+  }
+
+  disconnectedCallback(): void {
+    this.#abortController?.abort()
+    this.#observer?.disconnect()
+  }
+
+  // The picker is operable only while its value can reach the submitted text
+  // input and that input accepts edits.
+  private syncDisabled(): void {
+    const disabled = this.inputElement.disabled || this.inputElement.readOnly
+
+    // Assigning the same value again would still rewrite the attribute and
+    // wake the observer, which would then never settle.
+    if (this.pickerElement.disabled !== disabled) this.pickerElement.disabled = disabled
+  }
+
+  // Text → picker. Bound to `input` on the text input, so the swatch follows
+  // every keystroke: text that is not a whole color yet shows none. The
+  // picker itself has no empty value and keeps the last color to open on.
+  syncPicker(): void {
+    const text = this.inputElement.value.trim()
+    const color = parseHex(text)
+
+    this.blank = text === ''
+    this.empty = color === null
+
+    if (color) this.pickerElement.value = color.toLowerCase()
+  }
+
+  // Bound to `change` on the text input.
+  normalize(): void {
+    const color = parseHex(this.inputElement.value)
+    if (color) this.inputElement.value = color
+  }
+
+  // Bound to `paste` on the text input. The browser cuts a paste to the
+  // input's `maxlength` first, so padding around a copied color would push
+  // its last digits out. The padding is dropped and the rest inserted as an
+  // edit of the user's own, which keeps undo, `maxlength` and read-only
+  // intact and still ends in a `change` event.
+  trimPaste(event: ClipboardEvent): void {
+    const text = event.clipboardData?.getData('text/plain') ?? ''
+    const trimmed = text.trim()
+    if (trimmed === text) return
+
+    event.preventDefault()
+    document.execCommand('insertText', false, trimmed)
+  }
+
+  // Picker → text. Bound to `input` on the picker. The picker's own event
+  // stops here: the one forwarded from the text input stands in for it, and
+  // listeners further up would otherwise hear of each pick twice.
+  syncInput(event: Event): void {
+    /* eslint-disable-next-line no-restricted-syntax */
+    event.stopPropagation()
+
+    this.inputElement.value = this.pickerElement.value.toUpperCase()
+    this.inputElement.dispatchEvent(new Event('input', {bubbles: true}))
+  }
+
+  // Bound to `change` on the picker, whose own event stops here as well.
+  commit(event: Event): void {
+    /* eslint-disable-next-line no-restricted-syntax */
+    event.stopPropagation()
+
+    this.inputElement.dispatchEvent(new Event('change', {bubbles: true}))
+  }
+
+  // Resynchronises from the text input's current value. Call this after
+  // setting the value from script, which fires no event.
+  sync(): void {
+    this.syncPicker()
+  }
+}

data/config/locales/en.yml

@@ -9,6 +9,10 @@ en:
   button_filter: "Filter"
   button_save: "Save"
 
+  color_field:
+    picker_label: "Pick color for %{label}"
+    picker_label_generic: "Pick color"
+
   drag_handle:
     button_drag: "Drag to reorder"
 

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 92
+      MINOR = 93
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")