openproject-primer_view_components 0.49.2 → 0.50.0

data/app/components/primer/alpha/action_bar.rb

@@ -88,9 +88,9 @@ module Primer
       def before_render
         @system_arguments[:tag] = render_overflow_menu? ? :"action-bar" : :div
         @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "overflow-visible": !render_overflow_menu?
+          @system_arguments[:classes]
         )
+        @system_arguments[:overflow] = :visible if render_overflow_menu?
         content
       end
     end

data/app/components/primer/alpha/action_bar_element.js

@@ -47,13 +47,6 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
         _ActionBarElement_focusZoneAbortController.set(this, null);
     }
     connectedCallback() {
-        // Calculate the width of all the items before hiding anything
-        for (const item of this.items) {
-            const width = item.getBoundingClientRect().width;
-            const marginLeft = parseInt(window.getComputedStyle(item)?.marginLeft, 10);
-            const marginRight = parseInt(window.getComputedStyle(item)?.marginRight, 10);
-            item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
-        }
         resizeObserver.observe(this);
         instersectionObserver.observe(this);
         requestAnimationFrame(() => {

data/app/components/primer/alpha/action_bar_element.ts

@@ -36,14 +36,6 @@ class ActionBarElement extends HTMLElement {
   #focusZoneAbortController: AbortController | null = null
 
   connectedCallback() {
-    // Calculate the width of all the items before hiding anything
-    for (const item of this.items) {
-      const width = item.getBoundingClientRect().width
-      const marginLeft = parseInt(window.getComputedStyle(item)?.marginLeft, 10)
-      const marginRight = parseInt(window.getComputedStyle(item)?.marginRight, 10)
-      item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`)
-    }
-
     resizeObserver.observe(this)
     instersectionObserver.observe(this)
 

data/app/components/primer/base_component.rb

@@ -151,6 +151,7 @@ module Primer
     # | :- | :- | :- |
     # | classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |
     # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
+    # | trim | Boolean | Calls `strip` on the content to remove trailing and leading white spaces. |
     def initialize(tag:, classes: nil, **system_arguments)
       @tag = tag
 
@@ -158,6 +159,8 @@ module Primer
 
       @result = Primer::Classify.call(**@system_arguments.merge(classes: classes))
 
+      @trim = !!@system_arguments.delete(:trim)
+
       @system_arguments[:"data-view-component"] = true
       # Filter out Primer keys so they don't get assigned as HTML attributes
       @content_tag_args = add_test_selector(@system_arguments).except(*Primer::Classify::Utilities::UTILITIES.keys)
@@ -167,7 +170,7 @@ module Primer
       if SELF_CLOSING_TAGS.include?(@tag)
         tag(@tag, @content_tag_args.merge(@result))
       else
-        content_tag(@tag, content, @content_tag_args.merge(@result))
+        content_tag(@tag, @trim ? trimmed_content : content, @content_tag_args.merge(@result))
       end
     end
   end

data/app/components/primer/beta/auto_complete.rb

@@ -44,6 +44,7 @@ module Primer
         system_arguments[:"allow-out-of-bounds"] = ""
         system_arguments[:id] = @list_id
         system_arguments[:popover] = ""
+        system_arguments[:overflow_y] = :auto
         system_arguments[:classes] = class_names(
           "ActionListWrap ActionListWrap--inset",
           @overlay_classes,

data/app/components/primer/beta/button.rb

@@ -159,17 +159,6 @@ module Primer
           "Button--invisible-noVisuals"
         )
       end
-
-      def trimmed_content
-        return if content.blank?
-
-        trimmed_content = content.strip
-
-        return trimmed_content unless content.html_safe?
-
-        # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
-        trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
-      end
     end
   end
 end

data/app/components/primer/beta/link.css

@@ -1 +1 @@
-.Link{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{-webkit-text-decoration:underline;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--underline{-webkit-text-decoration:underline;text-decoration:underline}.Link--primary{color:var(--fgColor-default)!important}.Link--primary:hover{color:var(--fgColor-accent)!important}.Link--secondary{color:var(--fgColor-muted)!important}.Link--secondary:hover{color:var(--fgColor-accent)!important}.Link--muted{color:var(--fgColor-muted)!important}.Link--muted:hover{color:var(--fgColor-accent)!important;-webkit-text-decoration:none;text-decoration:none}.Link--onHover:hover{color:var(--fgColor-accent)!important;cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline}:is(.Link--secondary,.Link--primary,.Link--muted):hover [class*=color-fg]{color:inherit!important}
+.Link{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{-webkit-text-decoration:underline;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--underline{-webkit-text-decoration:underline;text-decoration:underline}.Link--primary{color:var(--fgColor-default)!important}.Link--primary:hover{color:var(--fgColor-accent)!important}.Link--secondary{color:var(--fgColor-muted)!important}.Link--secondary:hover{color:var(--fgColor-accent)!important}.Link--muted{color:var(--fgColor-muted)!important}.Link--muted:hover{color:var(--fgColor-accent)!important;-webkit-text-decoration:none;text-decoration:none}.Link--onHover:hover{color:var(--fgColor-accent)!important;cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline}:is(.Link--secondary,.Link--primary,.Link--muted):hover [class*=color-fg]{color:inherit!important}.Link-content{align-items:center;display:inline-flex;gap:var(--base-size-4);line-height:normal;text-decoration:inherit}

data/app/components/primer/beta/link.css.json

@@ -13,6 +13,7 @@
     ".Link--muted",
     ".Link--muted:hover",
     ".Link--onHover:hover",
-    ":is(.Link--secondary,.Link--primary,.Link--muted):hover [class*=color-fg]"
+    ":is(.Link--secondary,.Link--primary,.Link--muted):hover [class*=color-fg]",
+    ".Link-content"
   ]
 }

data/app/components/primer/beta/link.css.map

@@ -1 +1 @@
-{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBAeF,CAbE,YAEE,cACF,CAEA,wBAJE,iCAA0B,CAA1B,yBAMF,CAEA,gCAEE,gBACF,CAGF,iBACE,iCAA0B,CAA1B,yBACF,CAEA,eACE,sCAKF,CAHE,qBACE,qCACF,CAGF,iBACE,oCAKF,CAHE,uBACE,qCACF,CAGF,aACE,oCAMF,CAJE,mBACE,qCAAuC,CACvC,4BAAqB,CAArB,oBACF,CAMA,qBACE,qCAAuC,CAEvC,cAAe,CADf,iCAA0B,CAA1B,yBAEF,CAQA,0EACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n  color: var(--fgColor-accent);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  &:focus {\n    text-decoration: underline;\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 0;\n  }\n}\n\n.Link--underline {\n  text-decoration: underline;\n}\n\n.Link--primary {\n  color: var(--fgColor-default) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--secondary {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--muted {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: none;\n  }\n}\n\n/* Set the link color only on hover\n   Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n}\n\n/* When using a color utility class inside of a link class\n   color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n  &:hover [class*='color-fg'] {\n    color: inherit !important;\n  }\n}\n"]}
+{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBAeF,CAbE,YAEE,cACF,CAEA,wBAJE,iCAA0B,CAA1B,yBAMF,CAEA,gCAEE,gBACF,CAGF,iBACE,iCAA0B,CAA1B,yBACF,CAEA,eACE,sCAKF,CAHE,qBACE,qCACF,CAGF,iBACE,oCAKF,CAHE,uBACE,qCACF,CAGF,aACE,oCAMF,CAJE,mBACE,qCAAuC,CACvC,4BAAqB,CAArB,oBACF,CAMA,qBACE,qCAAuC,CAEvC,cAAe,CADf,iCAA0B,CAA1B,yBAEF,CAQA,0EACE,uBACF,CAGF,cAEE,kBAAmB,CADnB,mBAAoB,CAIpB,sBAAuB,CADvB,kBAAmB,CAEnB,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n  color: var(--fgColor-accent);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  &:focus {\n    text-decoration: underline;\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 0;\n  }\n}\n\n.Link--underline {\n  text-decoration: underline;\n}\n\n.Link--primary {\n  color: var(--fgColor-default) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--secondary {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--muted {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: none;\n  }\n}\n\n/* Set the link color only on hover\n   Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n}\n\n/* When using a color utility class inside of a link class\n   color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n  &:hover [class*='color-fg'] {\n    color: inherit !important;\n  }\n}\n\n.Link-content {\n  display: inline-flex;\n  align-items: center;\n  /* stylelint-disable-next-line primer/typography */\n  line-height: normal;\n  gap: var(--base-size-4);\n  text-decoration: inherit;\n}\n"]}

data/app/components/primer/beta/link.html.erb

@@ -0,0 +1,18 @@
+<%= render Primer::ConditionalWrapper.new(condition: tooltip?, trim: true, tag: :span, position: :relative) do %>
+  <%= render(Primer::BaseComponent.new(trim: true, **@system_arguments)) do %>
+    <% if leading_visual || trailing_visual %>
+      <%= render(Primer::BaseComponent.new(tag: :span, classes: "Link-content", trim: true)) do %>
+        <% if leading_visual %>
+          <%= leading_visual %>
+        <% end %>
+        <%= content %>
+        <% if trailing_visual %>
+          <%= trailing_visual %>
+        <% end %>
+      <% end %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  <% end %>
+  <%= tooltip if tooltip? %>
+<% end %>

data/app/components/primer/beta/link.pcss

@@ -67,3 +67,12 @@
     color: inherit !important;
   }
 }
+
+.Link-content {
+  display: inline-flex;
+  align-items: center;
+  /* stylelint-disable-next-line primer/typography */
+  line-height: normal;
+  gap: var(--base-size-4);
+  text-decoration: inherit;
+}

data/app/components/primer/beta/link.rb

@@ -30,6 +30,32 @@ module Primer
         Primer::Alpha::Tooltip.new(**system_arguments)
       }
 
+      # Leading visuals appear to the left of the link text.
+      #
+      # Use:
+      #
+      # - `leading_visual_icon` which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
+      renders_one :leading_visual, types: {
+        icon: lambda { |**system_arguments|
+          Primer::Beta::Octicon.new(**system_arguments)
+        }
+      }
+
+      # Trailing visuals appear to the right of the link text.
+      #
+      # Use:
+      #
+      # - `trailing_visual_icon` which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
+      renders_one :trailing_visual, types: {
+        icon: lambda { |**system_arguments|
+          Primer::Beta::Octicon.new(**system_arguments)
+        }
+      }
+
       # @param href [String] URL to be used for the Link. Required. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
       # @param scheme [Symbol] <%= one_of(Primer::Beta::Link::SCHEME_MAPPINGS.keys) %>
       # @param muted [Boolean] Uses light gray for Link color, and blue on hover.
@@ -54,20 +80,6 @@ module Primer
       def before_render
         raise ArgumentError, "href is required" if @system_arguments[:href].nil? && !Rails.env.production?
       end
-
-      def call
-        if tooltip.present?
-          render Primer::BaseComponent.new(tag: :span, position: :relative) do
-            render(Primer::BaseComponent.new(**@system_arguments)) do
-              content
-            end.to_s + tooltip.to_s
-          end
-        else
-          render(Primer::BaseComponent.new(**@system_arguments)) do
-            content
-          end
-        end
-      end
     end
   end
 end

data/app/components/primer/button_component.rb

@@ -111,16 +111,5 @@ module Primer
     def link?
       @scheme == LINK_SCHEME
     end
-
-    def trimmed_content
-      return if content.blank?
-
-      trimmed_content = content.strip
-
-      return trimmed_content unless content.html_safe?
-
-      # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
-      trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
-    end
   end
 end

data/app/components/primer/component.rb

@@ -148,5 +148,12 @@ module Primer
     def should_raise_aria_error?
       !Rails.env.production? && raise_on_invalid_aria? && !ENV["PRIMER_WARNINGS_DISABLED"]
     end
+
+    def trimmed_content
+      return content unless content.present?
+
+      # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
+      content.html_safe? ? content.strip.html_safe : content.strip # rubocop:disable Rails/OutputSafety
+    end
   end
 end

data/app/components/primer/conditional_wrapper.rb

@@ -10,12 +10,15 @@ module Primer
     def initialize(condition:, **base_component_arguments)
       @condition = condition
       @base_component_arguments = base_component_arguments
+      @trim = !!@base_component_arguments.delete(:trim)
     end
 
     def call
-      return content unless @condition
+      unless @condition
+        return @trim ? trimmed_content : content
+      end
 
-      BaseComponent.new(**@base_component_arguments).render_in(self) { content }
+      BaseComponent.new(trim: @trim, **@base_component_arguments).render_in(self) { content }
     end
   end
 end

data/app/forms/horizontal_form.rb

@@ -3,6 +3,8 @@
 # :nodoc:
 class HorizontalForm < ApplicationForm
   form do |my_form|
+    my_form.hidden(name: :token, value: "abc123")
+
     my_form.group(layout: :horizontal) do |name_group|
       name_group.text_field(
         name: :first_name,

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

@@ -40,7 +40,8 @@ module Primer
             input_name: all_args[:name],
             input_id: all_args[:id],
             label_text: @input.label,
-            list_id: "#{all_args[:id]}-list"
+            list_id: "#{all_args[:id]}-list",
+            full_width: @input.full_width?
           )
       end
 

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

@@ -27,6 +27,10 @@ module Primer
         def supports_validation?
           false
         end
+
+        def hidden?
+          true
+        end
       end
     end
   end

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

@@ -18,9 +18,12 @@ module Primer
         @layout = layout
         @system_arguments = system_arguments
 
+        @system_arguments[:display] = :none if inputs.all?(&:hidden?)
+
         @system_arguments[:classes] = class_names(
           @system_arguments.delete(:classes),
-          "FormControl-horizontalGroup" => horizontal?
+          "FormControl-horizontalGroup" => horizontal?,
+          "FormControl-spacingWrapper" => !horizontal? && inputs.size > 1
         )
       end
 

data/lib/primer/classify/utilities.yml

@@ -1877,3 +1877,66 @@
   - flex-md-shrink-0
   - flex-lg-shrink-0
   - flex-xl-shrink-0
+:overflow:
+  :auto:
+  - overflow-auto
+  - overflow-sm-auto
+  - overflow-lg-auto
+  - overflow-xl-auto
+  :hidden:
+  - overflow-hidden
+  - overflow-sm-hidden
+  - overflow-lg-hidden
+  - overflow-xl-hidden
+  :scroll:
+  - overflow-scroll
+  - overflow-sm-scroll
+  - overflow-lg-scroll
+  - overflow-xl-scroll
+  :visible:
+  - overflow-visible
+  - overflow-sm-visible
+  - overflow-lg-visible
+  - overflow-xl-visible
+:overflow_x:
+  :auto:
+  - overflow-x-auto
+  - overflow-sm-x-auto
+  - overflow-lg-x-auto
+  - overflow-xl-x-auto
+  :hidden:
+  - overflow-x-hidden
+  - overflow-sm-x-hidden
+  - overflow-lg-x-hidden
+  - overflow-xl-x-hidden
+  :scroll:
+  - overflow-x-scroll
+  - overflow-sm-x-scroll
+  - overflow-lg-x-scroll
+  - overflow-xl-x-scroll
+  :visible:
+  - overflow-x-visible
+  - overflow-sm-x-visible
+  - overflow-lg-x-visible
+  - overflow-xl-x-visible
+:overflow_y:
+  :auto:
+  - overflow-y-auto
+  - overflow-sm-y-auto
+  - overflow-lg-y-auto
+  - overflow-xl-y-auto
+  :hidden:
+  - overflow-y-hidden
+  - overflow-sm-y-hidden
+  - overflow-lg-y-hidden
+  - overflow-xl-y-hidden
+  :scroll:
+  - overflow-y-scroll
+  - overflow-sm-y-scroll
+  - overflow-lg-y-scroll
+  - overflow-xl-y-scroll
+  :visible:
+  - overflow-y-visible
+  - overflow-sm-y-visible
+  - overflow-lg-y-visible
+  - overflow-xl-y-visible

data/lib/primer/classify.rb

@@ -49,9 +49,7 @@ module Primer
             case key
             when :classes
               # insert :classes first to avoid huge doc diffs
-              if (class_names = validated_class_names(val))
-                result.unshift(class_names)
-              end
+              result.unshift(val)
               next
             when :style
               style = val
@@ -105,29 +103,6 @@ module Primer
         brk_str = Primer::Classify::Utilities::BREAKPOINTS[brk]
         Primer::Classify::Utilities.validate(key, val, brk_str)
       end
-
-      def validated_class_names(classes)
-        return if classes.blank?
-
-        if raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
-          invalid_class_names =
-            classes.split.each_with_object([]) do |class_name, memo|
-              memo << class_name if Primer::Classify::Validation.invalid?(class_name)
-            end
-
-          if invalid_class_names.any?
-            raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) "\
-              "instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. "\
-              "This warning will not be raised in production. Set PRIMER_WARNINGS_DISABLED=1 to disable this warning."
-          end
-        end
-
-        classes
-      end
-
-      def raise_on_invalid_options?
-        Rails.application.config.primer_view_components.raise_on_invalid_options
-      end
     end
   end
 end

data/lib/primer/forms/primer_multi_input.d.ts

@@ -0,0 +1,10 @@
+export declare class PrimerMultiInputElement extends HTMLElement {
+    fields: HTMLInputElement[];
+    activateField(name: string): void;
+    private findField;
+}
+declare global {
+    interface Window {
+        PrimerMultiInputElement: typeof PrimerMultiInputElement;
+    }
+}

data/lib/primer/forms/primer_multi_input.js

@@ -0,0 +1,44 @@
+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;
+};
+/* eslint-disable custom-elements/expose-class-on-global */
+import { controller, targets } from '@github/catalyst';
+let PrimerMultiInputElement = class PrimerMultiInputElement extends HTMLElement {
+    activateField(name) {
+        const fieldWithName = this.findField(name);
+        if (!fieldWithName)
+            return;
+        for (const field of this.fields) {
+            if (field === fieldWithName)
+                continue;
+            field.setAttribute('disabled', 'disabled');
+            field.setAttribute('hidden', 'hidden');
+            field.parentElement?.setAttribute('hidden', 'hidden');
+        }
+        fieldWithName.removeAttribute('disabled');
+        fieldWithName.removeAttribute('hidden');
+        fieldWithName.parentElement?.removeAttribute('hidden');
+    }
+    findField(name) {
+        for (const field of this.fields) {
+            if (field.getAttribute('data-name') === name) {
+                return field;
+            }
+        }
+        return null;
+    }
+};
+__decorate([
+    targets
+], PrimerMultiInputElement.prototype, "fields", void 0);
+PrimerMultiInputElement = __decorate([
+    controller
+], PrimerMultiInputElement);
+export { PrimerMultiInputElement };
+if (!window.customElements.get('primer-multi-input')) {
+    Object.assign(window, { PrimerMultiInputElement });
+    window.customElements.define('primer-multi-input', PrimerMultiInputElement);
+}

data/lib/primer/forms/primer_text_field.d.ts

@@ -0,0 +1,28 @@
+import '@github/auto-check-element';
+import type { AutoCheckErrorEvent, AutoCheckSuccessEvent } from '@github/auto-check-element';
+declare global {
+    interface HTMLElementEventMap {
+        'auto-check-success': AutoCheckSuccessEvent;
+        'auto-check-error': AutoCheckErrorEvent;
+    }
+}
+export declare class PrimerTextFieldElement extends HTMLElement {
+    #private;
+    inputElement: HTMLInputElement;
+    validationElement: HTMLElement;
+    validationMessageElement: HTMLElement;
+    validationSuccessIcon: HTMLElement;
+    validationErrorIcon: HTMLElement;
+    leadingVisual: HTMLElement;
+    leadingSpinner: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    clearContents(): void;
+    clearError(): void;
+    setValidationMessage(message: string): void;
+    toggleValidationStyling(isError: boolean): void;
+    setSuccess(message: string): void;
+    setError(message: string): void;
+    showLeadingSpinner(): void;
+    hideLeadingSpinner(): void;
+}

data/lib/primer/forms/primer_text_field.js

@@ -0,0 +1,119 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+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 _PrimerTextFieldElement_abortController;
+import '@github/auto-check-element';
+import { controller, target } from '@github/catalyst';
+let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _PrimerTextFieldElement_abortController.set(this, void 0);
+    }
+    connectedCallback() {
+        __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
+        const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
+        this.addEventListener('auto-check-success', async (event) => {
+            const message = await event.detail.response.text();
+            if (message && message.length > 0) {
+                this.setSuccess(message);
+            }
+            else {
+                this.clearError();
+            }
+        }, { signal });
+        this.addEventListener('auto-check-error', async (event) => {
+            const errorMessage = await event.detail.response.text();
+            this.setError(errorMessage);
+        }, { signal });
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
+    }
+    clearContents() {
+        this.inputElement.value = '';
+        this.inputElement.focus();
+        this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: false }));
+    }
+    clearError() {
+        this.inputElement.removeAttribute('invalid');
+        this.validationElement.hidden = true;
+        this.validationMessageElement.replaceChildren();
+    }
+    setValidationMessage(message) {
+        const template = document.createElement('template');
+        // eslint-disable-next-line github/no-inner-html
+        template.innerHTML = message;
+        const fragment = document.importNode(template.content, true);
+        this.validationMessageElement.replaceChildren(fragment);
+    }
+    toggleValidationStyling(isError) {
+        if (isError) {
+            this.validationElement.classList.remove('FormControl-inlineValidation--success');
+        }
+        else {
+            this.validationElement.classList.add('FormControl-inlineValidation--success');
+        }
+        this.validationSuccessIcon.hidden = isError;
+        this.validationErrorIcon.hidden = !isError;
+        this.inputElement.setAttribute('invalid', isError ? 'true' : 'false');
+    }
+    setSuccess(message) {
+        this.toggleValidationStyling(false);
+        this.setValidationMessage(message);
+        this.validationElement.hidden = false;
+    }
+    setError(message) {
+        this.toggleValidationStyling(true);
+        this.setValidationMessage(message);
+        this.validationElement.hidden = false;
+    }
+    showLeadingSpinner() {
+        this.leadingSpinner?.removeAttribute('hidden');
+        this.leadingVisual?.setAttribute('hidden', '');
+    }
+    hideLeadingSpinner() {
+        this.leadingSpinner?.setAttribute('hidden', '');
+        this.leadingVisual?.removeAttribute('hidden');
+    }
+};
+_PrimerTextFieldElement_abortController = new WeakMap();
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "inputElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationMessageElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationSuccessIcon", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationErrorIcon", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "leadingVisual", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "leadingSpinner", void 0);
+PrimerTextFieldElement = __decorate([
+    controller
+], PrimerTextFieldElement);
+export { PrimerTextFieldElement };

data/lib/primer/forms/toggle_switch_input.d.ts

@@ -0,0 +1,5 @@
+export declare class ToggleSwitchInputElement extends HTMLElement {
+    validationElement: HTMLElement;
+    validationMessageElement: HTMLElement;
+    connectedCallback(): void;
+}