primer_view_components 0.0.63 → 0.0.67

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

@@ -0,0 +1 @@
+import '@github/auto-complete-element';

data/app/components/primer/auto_complete/auto_complete.js

@@ -0,0 +1 @@
+import '@github/auto-complete-element';

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

@@ -5,9 +5,11 @@ module Primer
     # Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
     #
     # @accessibility
-    #   - Set the `heading` level based on what is appropriate for your page hierarchy. <%= link_to_heading_practices %>
-    #   - `secondary_action` can be set to provide more information that is relevant in the context of the `Blankslate`.
+    #   - The blankslate uses a semantic heading that must be set at the appropriate level based on the hierarchy of the page.
+    #   - All blankslate visuals have been programmed as decorative images, using `aria-hidden=”true”` and `img alt=””`,  which will hide the visual from screen reader users.
+    #   - The blankslate supports a primary and secondary action. Both actions have been built as semantic links with primary and secondary styling.
     #   - `secondary_action` text should be meaningful out of context and clearly describe the destination. Avoid using vague text like, "Learn more" or "Click here".
+    #   - The blankslate can leverage the spinner component, which will communicate to screen reader users that the content is still loading.
     class Blankslate < Primer::Component
       status :beta
 
@@ -81,7 +83,7 @@ module Primer
         system_arguments[:tag] = :a
         system_arguments[:href] = href
         system_arguments[:mt] = 5
-        system_arguments[:variant] = :medium
+        system_arguments[:size] = :medium
         system_arguments[:scheme] ||= :primary
 
         Primer::ButtonComponent.new(**system_arguments)

data/app/components/primer/button_component.html.erb

@@ -1,3 +1,3 @@
 <%= render Primer::BaseButton.new(**@system_arguments) do -%>
-  <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= primer_octicon("triangle-down", mr: -1) if @dropdown %>
+  <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= primer_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
 <% end -%>

data/app/components/primer/button_component.rb

@@ -17,12 +17,12 @@ module Primer
     }.freeze
     SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
-    DEFAULT_VARIANT = :medium
-    VARIANT_MAPPINGS = {
+    DEFAULT_SIZE = :medium
+    SIZE_MAPPINGS = {
       :small => "btn-sm",
-      DEFAULT_VARIANT => ""
+      DEFAULT_SIZE => ""
     }.freeze
-    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
     # Leading visuals appear to the left of the button text.
     #
@@ -64,9 +64,9 @@ module Primer
     #   <%= render(Primer::ButtonComponent.new(scheme: :invisible)) { "Invisible" } %>
     #   <%= render(Primer::ButtonComponent.new(scheme: :link)) { "Link" } %>
     #
-    # @example Variants
-    #   <%= render(Primer::ButtonComponent.new(variant: :small)) { "Small" } %>
-    #   <%= render(Primer::ButtonComponent.new(variant: :medium)) { "Medium" } %>
+    # @example Sizes
+    #   <%= render(Primer::ButtonComponent.new(size: :small)) { "Small" } %>
+    #   <%= render(Primer::ButtonComponent.new(size: :medium)) { "Medium" } %>
     #
     # @example Block
     #   <%= render(Primer::ButtonComponent.new(block: :true)) { "Block" } %>
@@ -97,7 +97,8 @@ module Primer
     #   <% end %>
     #
     # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
-    # @param variant [Symbol] <%= one_of(Primer::ButtonComponent::VARIANT_OPTIONS) %>
+    # @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
+    # @param size [Symbol] <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
     # @param tag [Symbol] (Primer::BaseButton::DEFAULT_TAG) <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
     # @param type [Symbol] (Primer::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
     # @param group_item [Boolean] Whether button is part of a ButtonGroup.
@@ -106,7 +107,8 @@ module Primer
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(
       scheme: DEFAULT_SCHEME,
-      variant: DEFAULT_VARIANT,
+      variant: nil,
+      size: DEFAULT_SIZE,
       group_item: false,
       block: false,
       dropdown: false,
@@ -119,7 +121,7 @@ module Primer
       @system_arguments[:classes] = class_names(
         system_arguments[:classes],
         SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
-        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, variant || size, DEFAULT_SIZE)],
         "btn" => !link?,
         "btn-block" => block,
         "BtnGroup-item" => group_item

data/app/components/primer/button_group.rb

@@ -7,10 +7,10 @@ module Primer
 
     # Required list of buttons to be rendered.
     #
-    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %> except for `variant` and `group_item`.
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %> except for `size` and `group_item`.
     renders_many :buttons, lambda { |**kwargs|
       kwargs[:group_item] = true
-      kwargs[:variant] = @variant
+      kwargs[:size] = @size
 
       Primer::ButtonComponent.new(**kwargs)
     }
@@ -25,19 +25,20 @@ module Primer
     #     <% component.button(classes: "custom-class") { "Custom class" } %>
     #   <% end %>
     #
-    # @example Variants
+    # @example Sizes
     #
-    #   <%= render(Primer::ButtonGroup.new(variant: :small)) do |component| %>
+    #   <%= render(Primer::ButtonGroup.new(size: :small)) do |component| %>
     #     <% component.button { "Default" } %>
     #     <% component.button(scheme: :primary) { "Primary" } %>
     #     <% component.button(scheme: :danger) { "Danger" } %>
     #     <% component.button(scheme: :outline) { "Outline" } %>
     #   <% end %>
     #
-    # @param variant [Symbol] <%= one_of(Primer::ButtonComponent::VARIANT_OPTIONS) %>
+    # @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
+    # @param size [Symbol] <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(variant: Primer::ButtonComponent::DEFAULT_VARIANT, **system_arguments)
-      @variant = variant
+    def initialize(variant: nil, size: Primer::ButtonComponent::DEFAULT_SIZE, **system_arguments)
+      @size = variant || size
       @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :div
 

data/app/components/primer/component.rb

@@ -23,6 +23,10 @@ module Primer
       Rails.application.config.primer_view_components.raise_on_invalid_options
     end
 
+    def raise_on_invalid_aria?
+      Rails.application.config.primer_view_components.raise_on_invalid_aria
+    end
+
     def deprecated_component_warning(new_class: nil, version: nil)
       return if Rails.env.production? || silence_deprecations?
 
@@ -101,10 +105,7 @@ module Primer
       return unless aria(:label, arguments)
       return unless INVALID_ARIA_LABEL_TAGS.include?(tag)
 
-      raise ArgumentError, "Don't use `aria-label` on `#{tag}` elements. See https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/" if should_raise_error?
-
-      arguments.except!(:"aria-label")
-      arguments[:aria] = arguments[:aria].except!(:label) if arguments[:aria]
+      raise ArgumentError, "Don't use `aria-label` on `#{tag}` elements. See https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/" if should_raise_aria_error?
     end
 
     def deny_tag_argument(**arguments)
@@ -114,5 +115,9 @@ module Primer
     def should_raise_error?
       raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
     end
+
+    def should_raise_aria_error?
+      raise_on_invalid_aria? && !ENV["PRIMER_WARNINGS_DISABLED"]
+    end
   end
 end

data/app/components/primer/content.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use `Content` as a helper to render content passed to a slot without adding any tags.
+  class Content < Primer::Component
+    status :stable
+
+    def call
+      content
+    end
+  end
+end

data/app/components/primer/dropdown.rb

@@ -6,12 +6,12 @@ module Primer
   class Dropdown < Primer::Component
     # Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Primer::ButtonComponent) %>,
     # but it is locked as a `summary` tag.
-    renders_one :button, lambda { |**system_arguments, &block|
+    renders_one :button, lambda { |**system_arguments|
       @button_arguments = system_arguments
       @button_arguments[:button] = true
       @button_arguments[:dropdown] = @with_caret
 
-      view_context.capture { block&.call }
+      Primer::Content.new
     }
 
     # Required context menu for the dropdown.
@@ -88,7 +88,7 @@ module Primer
     #
     # @example Customizing the button
     #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.button(scheme: :primary, variant: :small) do %>
+    #     <% c.button(scheme: :primary, size: :small) do %>
     #       Dropdown
     #     <% end %>
     #

data/app/components/primer/flash_component.rb

@@ -42,7 +42,7 @@ module Primer
     #   <%= render(Primer::FlashComponent.new) do |component| %>
     #     This is a flash message with actions!
     #     <% component.action do %>
-    #       <%= render(Primer::ButtonComponent.new(variant: :small)) { "Take action" } %>
+    #       <%= render(Primer::ButtonComponent.new(size: :small)) { "Take action" } %>
     #     <% end %>
     #   <% end %>
     #

data/app/components/primer/image.rb

@@ -29,8 +29,8 @@ module Primer
     def initialize(src:, alt:, lazy: false, **system_arguments)
       @system_arguments = deny_tag_argument(**system_arguments)
 
+      @src = src
       @system_arguments[:tag] = :img
-      @system_arguments[:src] = src
       @system_arguments[:alt] = alt
 
       return unless lazy
@@ -40,7 +40,7 @@ module Primer
     end
 
     def call
-      render(Primer::BaseComponent.new(**@system_arguments))
+      render(Primer::BaseComponent.new(src: image_path(@src), **@system_arguments))
     end
   end
 end

data/app/components/primer/label_component.rb

@@ -11,19 +11,26 @@ module Primer
     DEFAULT_TAG = :span
     TAG_OPTIONS = [DEFAULT_TAG, :summary, :a, :div].freeze
 
+    DEFAULT_SCHEME = :default
     SCHEME_MAPPINGS = {
-      primary: "Label--primary",
-      secondary: "Label--secondary",
-      info: "Label--info",
-      success: "Label--success",
-      warning: "Label--warning",
-      danger: "Label--danger",
+      DEFAULT_SCHEME => "",
+      :primary => "Label--primary",
+      :secondary => "Label--secondary",
+      :accent => "Label--accent",
+      :success => "Label--success",
+      :attention => "Label--attention",
+      :danger => "Label--danger",
+      :severe => "Label--severe",
+      :done => "Label--done",
+      :sponsors => "Label--sponsors",
       # deprecated
-      orange: "Label--orange",
-      purple: "Label--purple"
+      :info => "Label--info",
+      :warning => "Label--warning",
+      :orange => "Label--orange",
+      :purple => "Label--purple"
     }.freeze
-    DEPRECATED_SCHEME_OPTIONS = [:orange, :purple].freeze
-    SCHEME_OPTIONS = ([*SCHEME_MAPPINGS.keys, nil] - DEPRECATED_SCHEME_OPTIONS).freeze
+    DEPRECATED_SCHEME_OPTIONS = [:info, :warning, :orange, :purple].freeze
+    SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
 
     VARIANT_MAPPINGS = {
       large: "Label--large",
@@ -35,10 +42,13 @@ module Primer
     #   <%= render(Primer::LabelComponent.new) { "Default" } %>
     #   <%= render(Primer::LabelComponent.new(scheme: :primary)) { "Primary" } %>
     #   <%= render(Primer::LabelComponent.new(scheme: :secondary)) { "Secondary" } %>
-    #   <%= render(Primer::LabelComponent.new(scheme: :info)) { "Info" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :accent)) { "Accent" } %>
     #   <%= render(Primer::LabelComponent.new(scheme: :success)) { "Success" } %>
-    #   <%= render(Primer::LabelComponent.new(scheme: :warning)) { "Warning" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :attention)) { "Attention" } %>
     #   <%= render(Primer::LabelComponent.new(scheme: :danger)) { "Danger" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :severe)) { "Severe" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :done)) { "Done" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :sponsors)) { "Sponsors" } %>
     #
     # @example Variants
     #   <%= render(Primer::LabelComponent.new) { "Default" } %>
@@ -48,7 +58,7 @@ module Primer
     # @param scheme [Symbol] <%= one_of(Primer::LabelComponent::SCHEME_MAPPINGS.keys) %>
     # @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(tag: DEFAULT_TAG, scheme: nil, variant: nil, **system_arguments)
+    def initialize(tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, variant: nil, **system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
       @system_arguments[:classes] = class_names(

data/app/components/primer/octicon_component.rb

@@ -65,8 +65,10 @@ module Primer
         # Filter out classify options to prevent them from becoming invalid html attributes.
         # Note height and width are both classify options and valid html attributes.
         octicon_options = {
-          height: SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
-        }.merge(@system_arguments.slice(:height, :width))
+          height: @system_arguments[:height] || SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+          width: @system_arguments[:width]
+        }
+        octicon_options.compact!
 
         @icon = Octicons::Octicon.new(icon_key, octicon_options)
         Primer::Octicon::Cache.set(cache_key, @icon)

data/app/components/primer/popover_component.rb

@@ -41,22 +41,21 @@ module Primer
     # @param caret [Symbol] <%= one_of(Primer::PopoverComponent::CARET_MAPPINGS.keys) %>
     # @param large [Boolean] Whether to use the large version of the component.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :body, lambda { |caret: CARET_DEFAULT, large: false, **system_arguments, &block|
-      system_arguments[:classes] = class_names(
-        system_arguments[:classes],
+    renders_one :body, lambda { |caret: CARET_DEFAULT, large: false, **system_arguments|
+      @body_arguments = system_arguments
+      @body_arguments[:classes] = class_names(
+        @body_arguments[:classes],
         "Popover-message Box",
         CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
         "Popover-message--large" => large
       )
-      system_arguments[:p] ||= 4
-      system_arguments[:mt] ||= 2
-      system_arguments[:mx] ||= :auto
-      system_arguments[:text_align] ||= :left
-      system_arguments[:box_shadow] ||= :large
+      @body_arguments[:p] ||= 4
+      @body_arguments[:mt] ||= 2
+      @body_arguments[:mx] ||= :auto
+      @body_arguments[:text_align] ||= :left
+      @body_arguments[:box_shadow] ||= :large
 
-      # This is a hack to allow the parent to set the slot's content
-      @body_arguments = system_arguments
-      view_context.capture { block&.call }
+      Primer::Content.new
     }
 
     # @example Default

data/app/components/primer/spinner_component.html.erb

@@ -1,15 +1,4 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <span class="sr-only">Loading</span>
-  <%= render Primer::BaseComponent.new(
-    tag: :svg,
-    viewBox: '0 0 16 16',
-    fill: :none,
-    animation: :rotate,
-    width: @size,
-    height: @size,
-    vertical_align: :bottom
-  ) do %>
-    <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
-    <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
-  <% end %>
+  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
+  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
 <% end %>

data/app/components/primer/spinner_component.rb

@@ -31,12 +31,13 @@ module Primer
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(size: DEFAULT_SIZE, style: DEFAULT_STYLE, **system_arguments)
       @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :span
-      @system_arguments[:role] = :status
-      @system_arguments[:display] = :inline_block
+      @system_arguments[:tag] = :svg
       @system_arguments[:style] ||= style
-
-      @size = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+      @system_arguments[:animation] = :rotate
+      @system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+      @system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+      @system_arguments[:viewBox] = "0 0 16 16"
+      @system_arguments[:fill] = :none
     end
   end
 end

data/app/lib/primer/octicon/cache.rb

@@ -9,9 +9,10 @@ module Primer
       PRELOADED_ICONS = [:alert, :check, :"chevron-down", :paste, :clock, :"dot-fill", :info, :"kebab-horizontal", :link, :lock, :mail, :pencil, :plus, :question, :repo, :search, :"shield-lock", :star, :trash, :x].freeze
 
       class << self
-        def get_key(**kwargs)
-          correct_key_args?(**kwargs)
-          kwargs.hash
+        def get_key(symbol:, size:, width: nil, height: nil)
+          attrs = { symbol: symbol, size: size, width: width, height: height }
+          attrs.compact!
+          attrs.hash
         end
 
         def read(key)
@@ -37,13 +38,6 @@ module Primer
         def preload!
           PRELOADED_ICONS.each { |icon| Primer::OcticonComponent.new(icon: icon) }
         end
-
-        private
-
-        def correct_key_args?(symbol:, size:, width: nil, height: nil)
-          # This method does nothing but will raise an ArgumentError if the
-          # wrong args are passed.
-        end
       end
     end
   end

data/lib/primer/classify/utilities.rb

@@ -196,7 +196,6 @@ module Primer
           REPLACEMENT_KEYS.each do |k, v|
             return v.to_sym if selector.match?(Regexp.new(k))
           end
-
           selector.split("-").first.to_sym
         end
       end

data/lib/primer/classify/utilities.yml

@@ -1578,6 +1578,12 @@
   - border-x
   true:
   - border
+  0:
+  - border-0
+  false:
+  - border-0
+  :dashed:
+  - border-dashed
 :border_top:
   0:
   - border-top-0
@@ -1602,32 +1608,84 @@
 :justify_content:
   :flex_start:
   - flex-justify-start
+  - flex-sm-justify-start
+  - flex-md-justify-start
+  - flex-lg-justify-start
+  - flex-xl-justify-start
   :flex_end:
   - flex-justify-end
+  - flex-sm-justify-end
+  - flex-md-justify-end
+  - flex-lg-justify-end
+  - flex-xl-justify-end
   :center:
   - flex-justify-center
+  - flex-sm-justify-center
+  - flex-md-justify-center
+  - flex-lg-justify-center
+  - flex-xl-justify-center
   :space_between:
   - flex-justify-between
+  - flex-sm-justify-between
+  - flex-md-justify-between
+  - flex-lg-justify-between
+  - flex-xl-justify-between
   :space_around:
   - flex-justify-around
+  - flex-sm-justify-around
+  - flex-md-justify-around
+  - flex-lg-justify-around
+  - flex-xl-justify-around
 :align_items:
   :flex_start:
   - flex-items-start
+  - flex-sm-items-start
+  - flex-md-items-start
+  - flex-lg-items-start
+  - flex-xl-items-start
   :flex_end:
   - flex-items-end
+  - flex-sm-items-end
+  - flex-md-items-end
+  - flex-lg-items-end
+  - flex-xl-items-end
   :center:
   - flex-items-center
+  - flex-sm-items-center
+  - flex-md-items-center
+  - flex-lg-items-center
+  - flex-xl-items-center
   :baseline:
   - flex-items-baseline
+  - flex-sm-items-baseline
+  - flex-md-items-baseline
+  - flex-lg-items-baseline
+  - flex-xl-items-baseline
   :stretch:
   - flex-items-stretch
+  - flex-sm-items-stretch
+  - flex-md-items-stretch
+  - flex-lg-items-stretch
+  - flex-xl-items-stretch
 :flex_wrap:
   :wrap:
   - flex-wrap
+  - flex-sm-wrap
+  - flex-md-wrap
+  - flex-lg-wrap
+  - flex-xl-wrap
   :nowrap:
   - flex-nowrap
+  - flex-sm-nowrap
+  - flex-md-nowrap
+  - flex-lg-nowrap
+  - flex-xl-nowrap
   :reverse:
   - flex-wrap-reverse
+  - flex-sm-wrap-reverse
+  - flex-md-wrap-reverse
+  - flex-lg-wrap-reverse
+  - flex-xl-wrap-reverse
 :direction:
   :column:
   - flex-column
@@ -1656,24 +1714,64 @@
 :flex:
   1:
   - flex-1
+  - flex-sm-1
+  - flex-md-1
+  - flex-lg-1
+  - flex-xl-1
   :auto:
   - flex-auto
+  - flex-sm-auto
+  - flex-md-auto
+  - flex-lg-auto
+  - flex-xl-auto
 :align_self:
   :auto:
   - flex-self-auto
+  - flex-sm-self-auto
+  - flex-md-self-auto
+  - flex-lg-self-auto
+  - flex-xl-self-auto
   :start:
   - flex-self-start
+  - flex-sm-self-start
+  - flex-md-self-start
+  - flex-lg-self-start
+  - flex-xl-self-start
   :end:
   - flex-self-end
+  - flex-sm-self-end
+  - flex-md-self-end
+  - flex-lg-self-end
+  - flex-xl-self-end
   :center:
   - flex-self-center
+  - flex-sm-self-center
+  - flex-md-self-center
+  - flex-lg-self-center
+  - flex-xl-self-center
   :baseline:
   - flex-self-baseline
+  - flex-sm-self-baseline
+  - flex-md-self-baseline
+  - flex-lg-self-baseline
+  - flex-xl-self-baseline
   :stretch:
   - flex-self-stretch
+  - flex-sm-self-stretch
+  - flex-md-self-stretch
+  - flex-lg-self-stretch
+  - flex-xl-self-stretch
 :flex_grow:
   0:
   - flex-grow-0
+  - flex-sm-grow-0
+  - flex-md-grow-0
+  - flex-lg-grow-0
+  - flex-xl-grow-0
 :flex_shrink:
   0:
   - flex-shrink-0
+  - flex-sm-shrink-0
+  - flex-md-shrink-0
+  - flex-lg-shrink-0
+  - flex-xl-shrink-0

data/lib/primer/classify.rb

@@ -42,7 +42,7 @@ module Primer
       # extract_css_attrs(classes: "d-flex", mt: 4, py: 2) => { classes: "d-flex mt-4 py-2", style: nil }
       # extract_css_attrs(classes: "d-flex", style: "float: left", mt: 4, py: 2) => { classes: "d-flex mt-4 py-2", style: "float: left" }
       #
-      def call(**args)
+      def call(args = {})
         style = nil
         classes = [].tap do |result|
           args.each do |key, val|

data/lib/primer/view_components/engine.rb

@@ -18,6 +18,7 @@ module Primer
       config.primer_view_components.raise_on_invalid_options = false
       config.primer_view_components.silence_deprecations = false
       config.primer_view_components.validate_class_names = !Rails.env.production?
+      config.primer_view_components.raise_on_invalid_aria = false
 
       initializer "primer_view_components.assets" do |app|
         app.config.assets.precompile += %w[primer_view_components] if app.config.respond_to?(:assets)

data/lib/primer/view_components/linters/argument_mappers/button.rb

@@ -13,9 +13,9 @@ module ERBLint
           symbolize: true
         ).freeze
 
-        VARIANT_MAPPINGS = Primer::ViewComponents::Constants.get(
+        SIZE_MAPPINGS = Primer::ViewComponents::Constants.get(
           component: "Primer::ButtonComponent",
-          constant: "VARIANT_MAPPINGS",
+          constant: "SIZE_MAPPINGS",
           symbolize: true
         ).freeze
 
@@ -55,8 +55,8 @@ module ERBLint
 
             if SCHEME_MAPPINGS[class_name] && acc[:scheme].nil?
               acc[:scheme] = SCHEME_MAPPINGS[class_name]
-            elsif VARIANT_MAPPINGS[class_name] && acc[:variant].nil?
-              acc[:variant] = VARIANT_MAPPINGS[class_name]
+            elsif SIZE_MAPPINGS[class_name] && acc[:size].nil?
+              acc[:size] = SIZE_MAPPINGS[class_name]
             elsif class_name == "btn-block"
               acc[:block] = true
             elsif class_name == "BtnGroup-item"

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 63
+      PATCH = 67
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/rubocop/cop/primer/deprecated_arguments.rb

@@ -22,7 +22,7 @@ module RuboCop
         #
         #   * The top level key is the argument.
         #   * The second level key is the value.
-        #   * The seceond level value is a string of the full replacement. e.g. "new_argument: :new_value"
+        #   * The second level value is a string of the full replacement. e.g. "new_argument: :new_value"
         #     If the value is nil, then there is no replacement.
         #
         # e.g.