openproject-primer_view_components 0.6.3

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

@@ -0,0 +1,411 @@
+# typed: false
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when users interact with buttons, actions, or other controls.
+    #
+    # The only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. The default is `:button`.
+    #
+    # @accessibility
+    #   The action for the menu item needs to be on the element with `role="menuitem"`. Semantics are removed for everything nested inside of it. When a menu item is selected, the menu will close immediately.
+    #
+    #   Additional information around the keyboard functionality and implementation can be found on the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).
+    class ActionMenu < Primer::Component
+      status :alpha
+
+      DEFAULT_PRELOAD = false
+
+      DEFAULT_SELECT_VARIANT = :none
+      SELECT_VARIANT_OPTIONS = [
+        :single,
+        :multiple,
+        DEFAULT_SELECT_VARIANT
+      ].freeze
+
+      attr_reader :list, :preload
+
+      alias preload? preload
+
+      # @example Default
+      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-0") do |c| %>
+      #    <% c.with_show_button { "Menu" } %>
+      #    <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
+      #      Primer Design
+      #    <% end %>
+      #    <% c.with_item(tag: :button, type: "button", onclick: "() => {}") do %>
+      #      Quote Reply
+      #    <% end %>
+      #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
+      #      Copy Text
+      #    <% end %>
+      #    <% c.with_item(href: "https://google.com", form_arguments: { name: "foo", value: "bar", method: :post }) do %>
+      #      Submit form
+      #    <% end %>
+      #  <% end %>
+      #
+      # @example With caret
+      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-1") do |c| %>
+      #    <% c.with_show_button do |button| %>
+      #      <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #      Menu
+      #    <% end %>
+      #    <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
+      #      Primer Design
+      #    <% end %>
+      #    <% c.with_item(tag: :button, type: "button") do %>
+      #      Quote Reply
+      #    <% end %>
+      #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
+      #      Copy Text
+      #    <% end %>
+      #  <% end %>
+      #
+      # @example With `IconButton` trigger
+      #   @description
+      #     Set `icon:` to the octicon you want to use. Always provide an accessible name for the menu by setting `aria-label`.
+      #   @code
+      #    <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-2") do |c| %>
+      #      <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
+      #      <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
+      #        Primer Design Link
+      #      <% end %>
+      #      <% c.with_item(tag: :button, type: "button") do %>
+      #        Quote Reply
+      #      <% end %>
+      #      <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
+      #        Copy Text
+      #      <% end %>
+      #    <% end %>
+      #
+      # @example With divider
+      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-3") do |c| %>
+      #    <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
+      #    <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
+      #      Primer Design Link
+      #    <% end %>
+      #    <% c.with_item(tag: :button, type: "button") do %>
+      #      Quote Reply
+      #    <% end %>
+      #    <% c.with_divider %>
+      #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
+      #      Copy Text
+      #    <% end %>
+      #  <% end %>
+      #
+      # @example With danger item
+      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-4") do |c| %>
+      #    <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
+      #    <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
+      #      Primer Design Link
+      #    <% end %>
+      #    <% c.with_item(tag: :button, type: "button") do %>
+      #      Quote Reply
+      #    <% end %>
+      #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
+      #      Copy Text
+      #    <% end %>
+      #    <% c.with_item(tag: :button, type: "button", scheme: :danger) do %>
+      #      Delete
+      #    <% end %>
+      #  <% end %>
+      #
+      # @example With center align
+      #   @description
+      #     Align the menu to the center of the trigger button
+      #   @code
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-5", anchor_align: :center, anchor_side: :outside_top) do |c| %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside top
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-6", anchor_align: :center, anchor_side: :outside_left) do |c| %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside left
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-7", anchor_align: :center, anchor_side: :outside_right) do |c| %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside right
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-8", anchor_align: :center, anchor_side: :outside_bottom) do |c| %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside bottom
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #
+      # @example With start align
+      #   @description
+      #     Align the menu to the start of the trigger button
+      #   @code
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-9", anchor_align: :start, anchor_side: :outside_top) do |c| %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside top
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-10", anchor_align: :start, anchor_side: :outside_left) do |c| %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside left
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-11", anchor_align: :start, anchor_side: :outside_right) do |c| %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside right
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-12", anchor_align: :start, anchor_side: :outside_bottom) do |c| %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside bottom
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #
+      # @example With end align
+      #   @description
+      #     Align the menu to the end of the trigger button
+      #   @code
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-13", anchor_align: :end, anchor_side: :outside_top) do |c| %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside top
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-14", anchor_align: :end, anchor_side: :outside_left) do |c| %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside left
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-15", anchor_align: :end, anchor_side: :outside_right) do |c| %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside right
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-16", anchor_align: :end, anchor_side: :outside_bottom) do |c| %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside bottom
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 1 that does something
+      #       <% end %>
+      #       <% c.with_item do %>
+      #         Item 2 that does another thing
+      #       <% end %>
+      #     <% end %>
+      #
+      # @example With deferred menu content loaded with an `include-fragment`
+      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-17", src: "/") do |c| %>
+      #    <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
+      #  <% end %>
+      #
+      # @example Using a single-select ActionMenu as a form input
+      #   <%= form_with(url: action_menu_form_action_path) do |f| %>
+      #     <%= render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Strategy", form_arguments: { builder: f, name: "foo" })) do |menu| %>
+      #       <% menu.with_show_button { "Strategy" } %>
+      #       <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+      #       <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+      #       <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
+      #       <% menu.with_item(label: "Resolve", data: { value: "resolve" }) %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Using a multi-select ActionMenu as a form input
+      #   <%= form_with(url: action_menu_form_action_path) do |f| %>
+      #     <%= render(Primer::Alpha::ActionMenu.new(select_variant: :multiple, form_arguments: { builder: f, name: "foo" })) do |menu| %>
+      #       <% menu.with_show_button { "Strategy" } %>
+      #       <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+      #       <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+      #       <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
+      #       <% menu.with_item(label: "Resolve", data: { value: "resolve" }) %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param menu_id [String] Id of the menu.
+      # @param anchor_align [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>.
+      # @param anchor_side [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>.
+      # @param size [Symbol] <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %>.
+      # @param src [String] Used with an `include-fragment` element to load menu content from the given source URL.
+      # @param preload [Boolean] When true, and src is present, loads the `include-fragment` on trigger hover.
+      # @param dynamic_label [Boolean] Whether or not to display the text of the currently selected item in the show button.
+      # @param dynamic_label_prefix [String] If provided, the prefix is prepended to the dynamic label and displayed in the show button.
+      # @param select_variant [Symbol] <%= one_of(Primer::Alpha::ActionMenu::SELECT_VARIANT_OPTIONS) %>
+      # @param form_arguments [Hash] Allows an `ActionMenu` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>.
+      def initialize(
+        menu_id: self.class.generate_id,
+        anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN,
+        anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        size: Primer::Alpha::Overlay::DEFAULT_SIZE,
+        src: nil,
+        preload: DEFAULT_PRELOAD,
+        dynamic_label: false,
+        dynamic_label_prefix: nil,
+        select_variant: DEFAULT_SELECT_VARIANT,
+        form_arguments: {},
+        **system_arguments
+      )
+        @menu_id = menu_id
+        @src = src
+        @preload = fetch_or_fallback_boolean(preload, DEFAULT_PRELOAD)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        @system_arguments[:preload] = true if @src.present? && preload?
+
+        select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
+
+        @system_arguments[:tag] = :"action-menu"
+        @system_arguments[:"data-select-variant"] = select_variant
+        @system_arguments[:"data-dynamic-label"] = "" if dynamic_label
+        @system_arguments[:"data-dynamic-label-prefix"] = dynamic_label_prefix if dynamic_label_prefix.present?
+
+        @overlay = Primer::Alpha::Overlay.new(
+          id: "#{@menu_id}-overlay",
+          title: "Menu",
+          visually_hide_title: true,
+          anchor_align: anchor_align,
+          anchor_side: anchor_side,
+          size: size
+        )
+
+        @list = Primer::Alpha::ActionMenu::List.new(
+          menu_id: @menu_id,
+          select_variant: select_variant,
+          form_arguments: form_arguments
+        )
+      end
+
+      # @!parse
+      #   # Button to activate the menu.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Overlay) %>'s `show_button` slot.
+      #   renders_one(:show_button)
+
+      # Button to activate the menu.
+      #
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Overlay) %>'s `show_button` slot.
+      def with_show_button(**system_arguments, &block)
+        @overlay.with_show_button(**system_arguments, id: "#{@menu_id}-button", controls: "#{@menu_id}-list", &block)
+      end
+
+      # @!parse
+      #   # Adds a new item to the list.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
+      #   renders_many(:items)
+
+      # Adds a new item to the list.
+      #
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
+      def with_item(**system_arguments, &block)
+        @list.with_item(**system_arguments, &block)
+      end
+
+      # Adds a divider to the list.
+      #
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `divider` slot.
+      def with_divider(**system_arguments, &block)
+        @list.with_divider(**system_arguments, &block)
+      end
+
+      # Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.
+      #
+      # @param src [String] The source url of the avatar image.
+      # @param username [String] The username associated with the avatar.
+      # @param full_name [String] Optional. The user's full name.
+      # @param full_name_scheme [Symbol] Optional. How to display the user's full name.
+      # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>.
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
+      def with_avatar_item(**system_arguments, &block)
+        @list.with_avatar_item(**system_arguments, &block)
+      end
+
+      private
+
+      def before_render
+        content
+
+        raise ArgumentError, "`items` cannot be set when `src` is specified" if @src.present? && @list.items.any?
+      end
+
+      def render?
+        @list.items.any? || @src.present?
+      end
+    end
+  end
+end

data/app/components/primer/alpha/auto_complete/auto_complete.html.erb

@@ -0,0 +1,24 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <label for="<%= @input_id %>" class="<%= @label_classes %>">
+    <% if @is_label_visible %>
+      <%= @label_text %>
+    <% else %>
+      <span class="sr-only"><%= @label_text %></span>
+    <% end %>
+  </label>
+  <span class="autocomplete-body">
+    <% if @with_icon %>
+      <div class="form-control autocomplete-embedded-icon-wrap">
+        <%= render Primer::Beta::Octicon.new(:search) %>
+    <% end %>
+    <%= input %>
+    <% if @is_clearable %>
+      <button id="<%= @input_id %>-clear" class="btn-octicon" aria-label="Clear"><%= primer_octicon "x" %></button>
+    <% end %>
+    <% if @with_icon %>
+      </div>
+    <% end %>
+    <%= results %>
+  </span>
+  <div id="<%= @list_id %>-feedback" class="sr-only"></div>
+<% end %>

data/app/components/primer/alpha/auto_complete/item.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class AutoComplete
+      # Use `AutoCompleteItem` to list results of an auto-completed search.
+      class Item < Primer::Component
+        status :deprecated
+
+        # @example Default
+        #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |component| %>
+        #     <% component.results(classes: "custom-class") do %>
+        #       <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do %>
+        #         Apple
+        #       <% end %>
+        #       <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do %>
+        #         Orange
+        #       <% end %>
+        #     <% end %>
+        #   <% end %>
+        #
+        # @param value [String] Value of the item.
+        # @param selected [Boolean] Whether the item is selected.
+        # @param disabled [Boolean] Whether the item is disabled.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(value:, selected: false, disabled: false, **system_arguments)
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :li
+          @system_arguments[:role] = :option
+          @system_arguments[:"data-autocomplete-value"] = value
+          @system_arguments[:"aria-selected"] = true if selected
+          @system_arguments[:"aria-disabled"] = true if disabled
+          @system_arguments[:classes] = class_names(
+            "autocomplete-item",
+            system_arguments[:classes],
+            "disabled" => disabled
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/auto_complete.css

@@ -0,0 +1 @@
+.autocomplete-label-stacked{display:block;margin-bottom:6px}.autocomplete-label-inline{display:inline;margin-right:6px}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:6px}}.autocomplete-body{display:inline;position:relative}.autocomplete-embedded-icon-wrap{align-items:center;display:inline-flex;padding:4px 8px}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.autocomplete-embedded-icon-wrap .form-control{border:none;box-shadow:none;margin-left:8px;padding:0}.autocomplete-embedded-icon-wrap .form-control:focus{box-shadow:none}.autocomplete-embedded-icon-wrap .form-control:focus-visible{box-shadow:none}.autocomplete-results{background:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium));font-size:13px;left:0;list-style:none;max-height:20em;min-width:100%;overflow-y:auto;position:absolute;width:max-content;z-index:99}.autocomplete-item{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:0;color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:block;font-weight:var(--base-text-weight-semibold,600);overflow:hidden;padding:4px 8px;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:100%}.autocomplete-item:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));text-decoration:none}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{background-color:var(--bgColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));text-decoration:none}.autocomplete-item.navigation-focus *,.autocomplete-item.selected *,.autocomplete-item[aria-selected=true] *{color:inherit!important}

data/app/components/primer/alpha/auto_complete.css.json

@@ -0,0 +1,23 @@
+{
+  "name": "alpha/auto_complete",
+  "selectors": [
+    ".autocomplete-label-stacked",
+    ".autocomplete-label-inline",
+    ".autocomplete-body",
+    ".autocomplete-embedded-icon-wrap",
+    ".autocomplete-embedded-icon-wrap:focus-within",
+    ".autocomplete-embedded-icon-wrap .form-control",
+    ".autocomplete-embedded-icon-wrap .form-control:focus",
+    ".autocomplete-embedded-icon-wrap .form-control:focus-visible",
+    ".autocomplete-results",
+    ".autocomplete-item",
+    ".autocomplete-item:hover",
+    ".autocomplete-item:hover *",
+    ".autocomplete-item.navigation-focus",
+    ".autocomplete-item.selected",
+    ".autocomplete-item[aria-selected=true]",
+    ".autocomplete-item.navigation-focus *",
+    ".autocomplete-item.selected *",
+    ".autocomplete-item[aria-selected=true] *"
+  ]
+}

data/app/components/primer/alpha/auto_complete.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["auto_complete.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss"],"names":[],"mappings":"AAMA,4BACE,aAAc,CACd,iBACF,CAGA,2BACE,cAAe,CACf,gBACF,CAGA,4BACE,2BACE,aAAc,CACd,iBACF,CACF,CAGA,mBAEE,cAAe,CADf,iBAEF,CAGA,iCAGE,kBAAmB,CAFnB,mBAAoB,CACpB,eAuBF,CApBE,8CCnCA,6DAAuC,CAEvC,2EAAmD,CADnD,YDsCA,CAEA,+CAGE,WAAY,CACZ,eAAgB,CAFhB,eAAgB,CADhB,SAYF,CAPE,qDACE,eACF,CAEA,6DACE,eACF,CAKJ,sBAUE,6DAAkC,CAClC,6GAAgE,CAChE,4CAAyC,CACzC,kEAAwC,CALxC,cAAe,CANf,MAAO,CAOP,eAAgB,CAHhB,eAAgB,CADhB,cAAe,CAEf,eAAgB,CANhB,iBAAkB,CAGlB,iBAAkB,CADlB,UAWF,CAKA,mBAYE,mEAAwC,CACxC,QAAS,CAPT,oDAA6B,CAK7B,cAAe,CAVf,aAAc,CAId,gDAA6C,CAD7C,eAAgB,CADhB,eAAgB,CAIhB,eAAgB,CAChB,oBAAqB,CACrB,sBAAuB,CACvB,kBAAmB,CARnB,UAoCF,CAvBE,yBAGE,sEAAgD,CAFhD,2DAAgC,CAChC,oBAOF,CAHE,2BACE,uBACF,CAGF,uGAKE,sEAAgD,CAFhD,2DAAgC,CAChC,oBAOF,CAHE,6GACE,uBACF","file":"auto_complete.css","sourcesContent":["/* autocomplete */\n\n/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796\n** AutoComplete relies on FormControl, Overlay and ActionList CSS */\n\n/* Stacked label (default) */\n.autocomplete-label-stacked {\n  display: block;\n  margin-bottom: 6px;\n}\n\n/* Inline label (non-default) */\n.autocomplete-label-inline {\n  display: inline;\n  margin-right: 6px;\n}\n\n/* Switch to stacked at smaller viewport */\n@media (max-width: 543.98px) {\n  .autocomplete-label-inline {\n    display: block;\n    margin-bottom: 6px;\n  }\n}\n\n/* Wrapper for the input and result elements to ensure alignment */\n.autocomplete-body {\n  position: relative;\n  display: inline;\n}\n\n/* Wrapper and conditional styles for when an icon is added */\n.autocomplete-embedded-icon-wrap {\n  display: inline-flex;\n  padding: 4px 8px;\n  align-items: center;\n\n  &:focus-within {\n    border-color: var(--borderColor-accent-emphasis);\n\n    @mixin focusBoxShadowInset;\n  }\n\n  & .form-control {\n    padding: 0;\n    margin-left: 8px;\n    border: none;\n    box-shadow: none;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:focus-visible {\n      box-shadow: none;\n    }\n  }\n}\n\n/* A pop up list of items used to show autocompleted results */\n.autocomplete-results {\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  width: max-content;\n  min-width: 100%;\n  max-height: 20em;\n  overflow-y: auto;\n  font-size: 13px;\n  list-style: none;\n  background: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-resting-medium);\n}\n\n/* One of the items that appears within an autocomplete group\n** Bold black text on white background */\n\n.autocomplete-item {\n  display: block;\n  width: 100%;\n  padding: 4px 8px;\n  overflow: hidden;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  text-align: left;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: var(--overlay-bgColor);\n  border: 0;\n\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &.navigation-focus {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n  border-color: var(--focus-outlineColor);\n  outline: none;\n  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n"]}

data/app/components/primer/alpha/auto_complete.pcss

@@ -0,0 +1,118 @@
+/* autocomplete */
+
+/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796
+** AutoComplete relies on FormControl, Overlay and ActionList CSS */
+
+/* Stacked label (default) */
+.autocomplete-label-stacked {
+  display: block;
+  margin-bottom: 6px;
+}
+
+/* Inline label (non-default) */
+.autocomplete-label-inline {
+  display: inline;
+  margin-right: 6px;
+}
+
+/* Switch to stacked at smaller viewport */
+@media (max-width: 543.98px) {
+  .autocomplete-label-inline {
+    display: block;
+    margin-bottom: 6px;
+  }
+}
+
+/* Wrapper for the input and result elements to ensure alignment */
+.autocomplete-body {
+  position: relative;
+  display: inline;
+}
+
+/* Wrapper and conditional styles for when an icon is added */
+.autocomplete-embedded-icon-wrap {
+  display: inline-flex;
+  padding: 4px 8px;
+  align-items: center;
+
+  &:focus-within {
+    border-color: var(--borderColor-accent-emphasis);
+
+    @mixin focusBoxShadowInset;
+  }
+
+  & .form-control {
+    padding: 0;
+    margin-left: 8px;
+    border: none;
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    &:focus-visible {
+      box-shadow: none;
+    }
+  }
+}
+
+/* A pop up list of items used to show autocompleted results */
+.autocomplete-results {
+  position: absolute;
+  left: 0;
+  z-index: 99;
+  width: max-content;
+  min-width: 100%;
+  max-height: 20em;
+  overflow-y: auto;
+  font-size: 13px;
+  list-style: none;
+  background: var(--overlay-bgColor);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+  box-shadow: var(--shadow-resting-medium);
+}
+
+/* One of the items that appears within an autocomplete group
+** Bold black text on white background */
+
+.autocomplete-item {
+  display: block;
+  width: 100%;
+  padding: 4px 8px;
+  overflow: hidden;
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-default);
+  text-align: left;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: var(--overlay-bgColor);
+  border: 0;
+
+  &:hover {
+    color: var(--fgColor-onEmphasis);
+    text-decoration: none;
+    background-color: var(--bgColor-accent-emphasis);
+
+    /* Inherit color on all child elements to ensure enough contrast */
+    & * {
+      color: inherit !important;
+    }
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &.navigation-focus {
+    color: var(--fgColor-onEmphasis);
+    text-decoration: none;
+    background-color: var(--bgColor-accent-emphasis);
+
+    /* Inherit color on all child elements to ensure enough contrast */
+    & * {
+      color: inherit !important;
+    }
+  }
+}