primer_view_components 0.0.115 → 0.0.116

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

@@ -11,6 +11,7 @@ module Primer
     #   - `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
+      warn_on_deprecated_slot_setter
       status :beta
 
       VISUAL_OPTIONS = %i[icon spinner image].freeze
@@ -100,48 +101,48 @@ module Primer
       }
 
       # @example Basic
-      #   <%= render Primer::Beta::Blankslate.new do |c| %>
-      #     <% c.heading(tag: :h2).with_content("Title") %>
-      #     <% c.description { "Description"} %>
+      #   <%= render Primer::Beta::Blankslate.new do |component| %>
+      #     <% component.with_heading(tag: :h2).with_content("Title") %>
+      #     <% component.with_description { "Description"} %>
       #   <% end %>
       #
       # @example Icon
       #   @description
       #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |c| %>
-      #       <% c.visual_icon(icon: :globe) %>
-      #       <% c.heading(tag: :h2).with_content("Title") %>
-      #       <% c.description { "Description"} %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_icon(icon: :globe) %>
+      #       <% component.with_heading(tag: :h2).with_content("Title") %>
+      #       <% component.with_description { "Description"} %>
       #     <% end %>
       #
       # @example Loading
       #   @description
       #     Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |c| %>
-      #       <% c.visual_spinner(size: :large) %>
-      #       <% c.heading(tag: :h2).with_content("Title") %>
-      #       <% c.description { "Description"} %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_spinner(size: :large) %>
+      #       <% component.with_heading(tag: :h2).with_content("Title") %>
+      #       <% component.with_description { "Description"} %>
       #     <% end %>
       #
       # @example Using an image
       #   @description
       #     Add an `image` to give context that an Octicon couldn't.
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |c| %>
-      #       <% c.visual_image(src: Primer::ExampleImage::BASE64_SRC, alt: "Security - secure vault") %>
-      #       <% c.heading(tag: :h2).with_content("Title") %>
-      #       <% c.description { "Description"} %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_image(src: Primer::ExampleImage::BASE64_SRC, alt: "Security - secure vault") %>
+      #       <% component.with_heading(tag: :h2).with_content("Title") %>
+      #       <% component.with_description { "Description"} %>
       #     <% end %>
       #
       # @example Custom content
       #   @description
       #     Pass custom content to `description`.
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |c| %>
-      #       <% c.heading(tag: :h2).with_content("Title") %>
-      #       <% c.description do %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_heading(tag: :h2).with_content("Title") %>
+      #       <% component.with_description do %>
       #         <em>Your custom content here</em>
       #       <% end %>
       #     <% end %>
@@ -150,34 +151,34 @@ module Primer
       #   @description
       #     Provide a `primary_action` to guide users to take action from the blankslate. The `primary_action` appears below the description and custom content.
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |c| %>
-      #       <% c.visual_icon(icon: :book) %>
-      #       <% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% c.description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
-      #       <% c.primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
+      #       <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
       #     <% end %>
       #
       # @example Secondary action
       #   @description
       #     Add an additional `secondary_action` to help users learn more about a feature. See <%= link_to_accessibility %>. `secondary_action` will be shown at the very bottom:
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |c| %>
-      #       <% c.visual_icon(icon: :book) %>
-      #       <% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% c.description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
-      #       <% c.secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
+      #       <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
       #     <% end %>
       #
       # @example Primary and secondary actions
       #   @description
       #     `primary_action` and `secondary_action` can also be used together. The `primary_action` will always be rendered before the `secondary_action`:
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |c| %>
-      #       <% c.visual_icon(icon: :book) %>
-      #       <% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% c.description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
-      #       <% c.primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
-      #       <% c.secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
+      #       <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
+      #       <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
       #     <% end %>
       #
       # @example Variations
@@ -187,20 +188,20 @@ module Primer
       #     <%= render Primer::Beta::Blankslate.new(
       #       narrow: true,
       #       spacious: true,
-      #     ) do |c| %>
-      #       <% c.visual_icon(icon: :book) %>
-      #       <% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% c.description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
+      #     ) do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
       #     <% end %>
       #
       # @example With border
       #   @description
       #     It's possible to add a border around the Blankslate. This will wrap the Blankslate in a BorderBox.
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new(border: true) do |c| %>
-      #       <% c.visual_icon(icon: :book) %>
-      #       <% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% c.description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
+      #     <%= render Primer::Beta::Blankslate.new(border: true) do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
       #     <% end %>
       #
       # @param narrow [Boolean] Adds a maximum width of `485px` to the Blankslate.

data/app/components/primer/beta/border_box/header.rb

@@ -7,6 +7,8 @@ module Primer
       #
       # @accessibility When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
       class Header < Primer::Component
+        warn_on_deprecated_slot_setter
+
         status :beta
 
         TITLE_TAG_FALLBACK = :h2

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

@@ -4,6 +4,8 @@ module Primer
   module Beta
     # `BorderBox` is a Box component with a border.
     class BorderBox < Primer::Component
+      warn_on_deprecated_slot_setter
+
       status :beta
 
       DEFAULT_PADDING = :default

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

@@ -17,6 +17,7 @@ module Primer
     #
     #   For more information on the breadcrumbs pattern implemented by this component, see [WAI-ARIA 1.1 Breadcrumb](https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb).
     class Breadcrumbs < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       PADDING_MESSAGE = "Padding system arguments are not allowed on Breadcrumbs. Consider using margins instead."

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

@@ -1 +1 @@
-:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--primer-control-medium-gap,8px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}
+:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--primer-control-medium-gap,8px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--color-btn-counter-bg);color:inherit}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}

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

@@ -1 +1 @@
-{"name":"beta/button","selectors":[":root",".Button",".Button:before",".Button:hover",".Button:active",".Button:disabled",".Button[aria-disabled=true]",".Button-withTooltip","a.Button","summary.Button","a.Button:hover","summary.Button:hover",".Button-content",".Button-content>:not(:last-child)",".Button-content--alignStart",".Button-visual",".Button-label",".Button-leadingVisual",".Button-trailingVisual",".Button-trailingAction",".Button--small",".Button--small .Button-label",".Button--small .Button-content>:not(:last-child)",".Button--large",".Button--large .Button-label",".Button--large .Button-content>:not(:last-child)",".Button--fullWidth",".Button--primary",".Button--primary:hover:not(:disabled)",".Button--primary:focus",".Button--primary:focus:not(:focus-visible)",".Button--primary:focus-visible",".Button--primary:active:not(:disabled)",".Button--primary[aria-pressed=true]",".Button--primary:disabled",".Button--primary[aria-disabled=true]",".Button--secondary",".Button--secondary:hover:not(:disabled)",".Button--secondary:active:not(:disabled)",".Button--secondary[aria-pressed=true]",".Button--secondary:disabled",".Button--secondary[aria-disabled=true]",".Button--invisible",".Button--invisible:hover:not(:disabled)",".Button--invisible:active:not(:disabled)",".Button--invisible[aria-pressed=true]",".Button--invisible:disabled",".Button--invisible[aria-disabled=true]",".Button--invisible.Button--invisible-noVisuals .Button-label",".Button--invisible .Button-visual",".Button--link",".Button--link:hover:not(:disabled)",".Button--link:focus",".Button--link:focus-visible",".Button--link:disabled",".Button--link[aria-disabled=true]",".Button--danger",".Button--danger:hover:not(:disabled)",".Button--danger:active:not(:disabled)",".Button--danger[aria-pressed=true]",".Button--danger:disabled",".Button--danger[aria-disabled=true]",".Button--iconOnly",".Button--iconOnly.Button--small",".Button--iconOnly.Button--large"]}
+{"name":"beta/button","selectors":[":root",".Button",".Button:before",".Button:hover",".Button:active",".Button:disabled",".Button[aria-disabled=true]",".Button-withTooltip","a.Button","summary.Button","a.Button:hover","summary.Button:hover",".Button-content",".Button-content>:not(:last-child)",".Button-content--alignStart",".Button-visual",".Button-visual .Counter",".Button-label",".Button-leadingVisual",".Button-trailingVisual",".Button-trailingAction",".Button--small",".Button--small .Button-label",".Button--small .Button-content>:not(:last-child)",".Button--large",".Button--large .Button-label",".Button--large .Button-content>:not(:last-child)",".Button--fullWidth",".Button--primary",".Button--primary:hover:not(:disabled)",".Button--primary:focus",".Button--primary:focus:not(:focus-visible)",".Button--primary:focus-visible",".Button--primary:active:not(:disabled)",".Button--primary[aria-pressed=true]",".Button--primary:disabled",".Button--primary[aria-disabled=true]",".Button--secondary",".Button--secondary:hover:not(:disabled)",".Button--secondary:active:not(:disabled)",".Button--secondary[aria-pressed=true]",".Button--secondary:disabled",".Button--secondary[aria-disabled=true]",".Button--invisible",".Button--invisible:hover:not(:disabled)",".Button--invisible:active:not(:disabled)",".Button--invisible[aria-pressed=true]",".Button--invisible:disabled",".Button--invisible[aria-disabled=true]",".Button--invisible.Button--invisible-noVisuals .Button-label",".Button--invisible .Button-visual",".Button--link",".Button--link:hover:not(:disabled)",".Button--link:focus",".Button--link:focus-visible",".Button--link:disabled",".Button--link[aria-disabled=true]",".Button--danger",".Button--danger:hover:not(:disabled)",".Button--danger:active:not(:disabled)",".Button--danger[aria-pressed=true]",".Button--danger:disabled",".Button--danger[aria-disabled=true]",".Button--iconOnly",".Button--iconOnly.Button--small",".Button--iconOnly.Button--large"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button  */\n\n/* temporary, pre primitives release */\n:root {\n  --primer-duration-fast: 80ms;\n  --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--primer-borderWidth-thin, 1px) solid;\n  border-color: transparent;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  color: var(--color-btn-text);\n  transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  text-align: center;\n  height: var(--primer-control-medium-size, 32px);\n  padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--primer-control-medium-gap, 8px);\n  min-width: max-content;\n\n  /* mobile friendly sizing */\n  @media (pointer: course) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--primer-duration-fast);\n  }\n\n  &:active {\n    transition: none;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n}\n\n.Button-withTooltip {\n  position: relative;\n  display: inline-block;\n}\n\na.Button,\nsummary.Button {\n  display: inline-flex;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--primer-control-medium-gap, 8px);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--primer-text-body-size-small, 12px);\n  height: var(--primer-control-small-size, 28px);\n  padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n  gap: var(--primer-control-small-gap, 4px);\n\n  & .Button-label {\n    line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--primer-control-small-gap, 4px);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--primer-control-large-size, 40px);\n  padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n  gap: var(--primer-control-large-gap, 8px);\n\n  & .Button-label {\n    line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--primer-control-large-gap, 8px);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--color-btn-primary-text);\n  fill: var(--color-btn-primary-icon);\n  background-color: var(--color-btn-primary-bg);\n  border-color: var(--color-btn-primary-border);\n  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-btn-primary-hover-bg);\n    border-color: var(--color-btn-primary-hover-border);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    background-color: var(--color-btn-primary-selected-bg);\n    box-shadow: var(--color-btn-primary-selected-shadow);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-primary-disabled-text);\n    background-color: var(--color-btn-primary-disabled-bg);\n    border-color: var(--color-btn-primary-disabled-border);\n    fill: var(--color-btn-primary-disabled-text);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--color-btn-text);\n  fill: var(--color-fg-muted); /* help this */\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-btn-hover-bg);\n    border-color: var(--color-btn-hover-border);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--color-btn-active-bg);\n    border-color: var(--color-btn-active-border);\n  }\n\n  &[aria-pressed='true'] {\n    background-color: var(--color-btn-selected-bg);\n    box-shadow: var(--color-primer-shadow-inset);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--color-btn-text);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-action-list-item-default-hover-bg);\n  }\n\n  &[aria-pressed='true'],\n  &:active:not(:disabled) {\n    background-color: var(--color-action-list-item-default-active-bg);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n\n  /* if button has no visuals, use link blue for text */\n  &.Button--invisible-noVisuals .Button-label {\n    color: var(--color-accent-fg);\n  }\n\n  & .Button-visual {\n    color: var(--color-fg-muted);\n  }\n}\n\n.Button--link {\n  color: var(--color-accent-fg);\n  fill: var(--color-accent-fg);\n  display: inline-block;\n  font-size: inherit;\n  border: none;\n  height: unset;\n  padding: 0;\n\n  &:hover:not(:disabled) {\n    text-decoration: underline;\n  }\n\n  &:focus-visible, &:focus {\n    outline-offset: 2px;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: transparent;\n    border-color: transparent;\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--color-btn-danger-text);\n  fill: var(--color-btn-danger-icon);\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover:not(:disabled) {\n    color: var(--color-btn-danger-hover-text);\n    fill: var(--color-btn-danger-hover-text);\n    background-color: var(--color-btn-danger-hover-bg);\n    border-color: var(--color-btn-danger-hover-border);\n    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    color: var(--color-btn-danger-selected-text);\n    fill: var(--color-btn-danger-selected-text);\n    background-color: var(--color-btn-danger-selected-bg);\n    border-color: var(--color-btn-danger-selected-border);\n    box-shadow: var(--color-btn-danger-selected-shadow);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-danger-disabled-text);\n    fill: var(--color-btn-danger-disabled-text);\n    background-color: var(--color-btn-danger-disabled-bg);\n    border-color: var(--color-btn-border);\n  }\n}\n\n\n.Button--iconOnly {\n  display: grid;\n  place-content: center;\n  padding: unset;\n  width: var(--primer-control-medium-size, 32px);\n\n  &.Button--small {\n    width: var(--primer-control-small-size, 28px);\n  }\n\n  &.Button--large {\n    width: var(--primer-control-large-size, 40px);\n  }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
+{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"AAGA,MACE,2BAA4B,CAC5B,qDACF,CAGA,QAmBE,kBAAmB,CAbnB,wBAA6B,CAC7B,+CAAiD,CACjD,kBAAyB,CACzB,mDAAqD,CACrD,2BAA4B,CAN5B,cAAe,CAYf,YAAa,CACb,kBAAmB,CAfnB,kDAAoD,CACpD,8CAAgD,CAiBhD,wCAA0C,CAN1C,6CAA+C,CAI/C,6BAA8B,CAG9B,qBAAsB,CANtB,gEAAkE,CAdlE,iBAAkB,CAYlB,iBAAkB,CAFlB,qEAAsE,CACtE,4DAAgE,CAPhE,wBAAiB,CAAjB,gBAwCF,CArBE,wBAEI,eCnCN,WAAA,YAAA,SAAA,gBAAA,eAAA,kBAAA,QAAA,4CAAA,UDmCsC,CAEpC,CAIA,cACE,+CACF,CAEA,eACE,eACF,CAEA,6CAGE,eAAgB,CADhB,kBAEF,CAGF,oBAEE,oBAAqB,CADrB,iBAEF,CAEA,wBAEE,mBAKF,CAHE,oCACE,oBACF,CAIF,gBAKE,kBAAmB,CAHnB,YAAa,CADb,aAAc,CAEd,uDAAwD,CACxD,4DAA8D,CAE9D,oBAOF,CAHE,kCACE,iDACF,CAIF,4BACE,qBACF,CAKA,eACE,YAAa,CACb,mBAMF,CAJE,wBAEE,4CAA6C,CAD7C,aAEF,CAGF,cACE,cAAe,CAEf,6DAAqE,CADrE,kBAEF,CAEA,sBACE,uBACF,CAEA,uBACE,wBACF,CAEA,uBACE,6CACF,CAIA,eACE,iDAAmD,CAGnD,uCAAyC,CAFzC,4CAA8C,CAC9C,iEAYF,CATE,6BACE,4DACF,CAGE,iDACE,gDACF,CAIJ,eAGE,uCAAyC,CAFzC,4CAA8C,CAC9C,iEAYF,CATE,6BACE,wDACF,CAGE,iDACE,gDACF,CAIJ,mBACE,UACF,CAKA,iBAEE,kCAAmC,CACnC,4CAA6C,CAC7C,4CAA6C,CAC7C,gFAAkF,CAJlF,mCAwCF,CAlCE,sCACE,kDAAmD,CACnD,kDACF,CAGA,uBE7KA,sDAAuD,CAFvD,wCAAgC,CAChC,mBFsLA,CAJE,2CAEE,eAAgB,CADhB,uBAEF,CAIF,+BExLA,sDAAuD,CAFvD,wCAAgC,CAChC,mBF2LA,CAEA,2EAEE,qDAAsD,CACtD,mDACF,CAEA,+DAKE,2CAA4C,CAF5C,qDAAsD,CACtD,qDAAsD,CAFtD,4CAIF,CAIF,mBAEE,0BAA2B,CAC3B,oCAAqC,CACrC,oCAAqC,CACrC,gEAAkE,CAJlE,2BA4BF,CAtBE,wCACE,0CAA2C,CAC3C,0CACF,CAEA,yCACE,2CAA4C,CAC5C,2CACF,CAEA,sCACE,6CAA8C,CAC9C,2CACF,CAEA,mEAKE,oCAAqC,CAFrC,oCAAqC,CACrC,oCAAqC,CAFrC,qCAIF,CAGF,mBACE,2BA2BF,CAzBE,wCACE,+DACF,CAEA,+EAEE,gEACF,CAEA,mEAKE,oCAAqC,CAFrC,oCAAqC,CACrC,oCAAqC,CAFrC,qCAIF,CAGA,6DACE,4BACF,CAEA,kCACE,2BACF,CAGF,cAEE,2BAA4B,CAG5B,WAAY,CAJZ,4BAA6B,CAE7B,oBAAqB,CACrB,iBAAkB,CAElB,YAAa,CACb,SAiBF,CAfE,mCACE,yBACF,CAEA,gDACE,kBACF,CAEA,yDAKE,oCAAqC,CAFrC,wBAA6B,CAC7B,kBAAyB,CAFzB,qCAIF,CAIF,gBAEE,iCAAkC,CAClC,oCAAqC,CACrC,oCAAqC,CACrC,gEAAkE,CAJlE,kCA8BF,CAxBE,qCAEE,uCAAwC,CACxC,iDAAkD,CAClD,iDAAkD,CAClD,0FAA4F,CAJ5F,wCAKF,CAEA,yEAGE,0CAA2C,CAC3C,oDAAqD,CACrD,oDAAqD,CACrD,kDAAmD,CAJnD,2CAKF,CAEA,6DAGE,0CAA2C,CAC3C,oDAAqD,CACrD,oCAAqC,CAHrC,2CAIF,CAIF,kBACE,YAAa,CAEb,aAAc,CADd,oBAAqB,CAErB,4CASF,CAPE,gCACE,2CACF,CAEA,gCACE,2CACF","file":"button.css","sourcesContent":["/* CSS for Button  */\n\n/* temporary, pre primitives release */\n:root {\n  --primer-duration-fast: 80ms;\n  --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--primer-borderWidth-thin, 1px) solid;\n  border-color: transparent;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  color: var(--color-btn-text);\n  transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  text-align: center;\n  height: var(--primer-control-medium-size, 32px);\n  padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--primer-control-medium-gap, 8px);\n  min-width: max-content;\n\n  /* mobile friendly sizing */\n  @media (pointer: course) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--primer-duration-fast);\n  }\n\n  &:active {\n    transition: none;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n}\n\n.Button-withTooltip {\n  position: relative;\n  display: inline-block;\n}\n\na.Button,\nsummary.Button {\n  display: inline-flex;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--primer-control-medium-gap, 8px);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--color-btn-counter-bg);\n  }\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--primer-text-body-size-small, 12px);\n  height: var(--primer-control-small-size, 28px);\n  padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n  gap: var(--primer-control-small-gap, 4px);\n\n  & .Button-label {\n    line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--primer-control-small-gap, 4px);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--primer-control-large-size, 40px);\n  padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n  gap: var(--primer-control-large-gap, 8px);\n\n  & .Button-label {\n    line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--primer-control-large-gap, 8px);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--color-btn-primary-text);\n  fill: var(--color-btn-primary-icon);\n  background-color: var(--color-btn-primary-bg);\n  border-color: var(--color-btn-primary-border);\n  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-btn-primary-hover-bg);\n    border-color: var(--color-btn-primary-hover-border);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    background-color: var(--color-btn-primary-selected-bg);\n    box-shadow: var(--color-btn-primary-selected-shadow);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-primary-disabled-text);\n    background-color: var(--color-btn-primary-disabled-bg);\n    border-color: var(--color-btn-primary-disabled-border);\n    fill: var(--color-btn-primary-disabled-text);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--color-btn-text);\n  fill: var(--color-fg-muted); /* help this */\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-btn-hover-bg);\n    border-color: var(--color-btn-hover-border);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--color-btn-active-bg);\n    border-color: var(--color-btn-active-border);\n  }\n\n  &[aria-pressed='true'] {\n    background-color: var(--color-btn-selected-bg);\n    box-shadow: var(--color-primer-shadow-inset);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--color-btn-text);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-action-list-item-default-hover-bg);\n  }\n\n  &[aria-pressed='true'],\n  &:active:not(:disabled) {\n    background-color: var(--color-action-list-item-default-active-bg);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n\n  /* if button has no visuals, use link blue for text */\n  &.Button--invisible-noVisuals .Button-label {\n    color: var(--color-accent-fg);\n  }\n\n  & .Button-visual {\n    color: var(--color-fg-muted);\n  }\n}\n\n.Button--link {\n  color: var(--color-accent-fg);\n  fill: var(--color-accent-fg);\n  display: inline-block;\n  font-size: inherit;\n  border: none;\n  height: unset;\n  padding: 0;\n\n  &:hover:not(:disabled) {\n    text-decoration: underline;\n  }\n\n  &:focus-visible, &:focus {\n    outline-offset: 2px;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: transparent;\n    border-color: transparent;\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--color-btn-danger-text);\n  fill: var(--color-btn-danger-icon);\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover:not(:disabled) {\n    color: var(--color-btn-danger-hover-text);\n    fill: var(--color-btn-danger-hover-text);\n    background-color: var(--color-btn-danger-hover-bg);\n    border-color: var(--color-btn-danger-hover-border);\n    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    color: var(--color-btn-danger-selected-text);\n    fill: var(--color-btn-danger-selected-text);\n    background-color: var(--color-btn-danger-selected-bg);\n    border-color: var(--color-btn-danger-selected-border);\n    box-shadow: var(--color-btn-danger-selected-shadow);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-danger-disabled-text);\n    fill: var(--color-btn-danger-disabled-text);\n    background-color: var(--color-btn-danger-disabled-bg);\n    border-color: var(--color-btn-border);\n  }\n}\n\n\n.Button--iconOnly {\n  display: grid;\n  place-content: center;\n  padding: unset;\n  width: var(--primer-control-medium-size, 32px);\n\n  &.Button--small {\n    width: var(--primer-control-small-size, 28px);\n  }\n\n  &.Button--large {\n    width: var(--primer-control-large-size, 40px);\n  }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}

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

@@ -95,6 +95,11 @@ summary.Button {
 .Button-visual {
   display: flex;
   pointer-events: none; /* allow click handler to work, avoiding visuals */
+
+  & .Counter {
+    color: inherit;
+    background-color: var(--color-btn-counter-bg);
+  }
 }
 
 .Button-label {

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

@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
     class Button < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_SCHEME = :default

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

@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Use `ButtonGroup` to render a series of buttons.
     class ButtonGroup < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       # Required list of buttons to be rendered.
@@ -13,7 +14,9 @@ module Primer
         kwargs[:group_item] = true
         kwargs[:size] = @size
 
+        # rubocop:disable Primer/ComponentNameMigration
         Primer::ButtonComponent.new(**kwargs)
+        # rubocop:enable Primer/ComponentNameMigration
       }
 
       # @example Default

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

@@ -7,7 +7,6 @@ module Primer
     # @accessibility
     #   Always set an accessible label to help the user interact with the component.
     class ClipboardCopy < Primer::Component
-      warn_on_deprecated_slot_setter
       status :beta
 
       # @example Default

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

@@ -9,7 +9,6 @@ module Primer
     #   You may choose to override this label with something more descriptive via [system_arguments][0].
     # [0]: https://primer.style/view-components/system-arguments#html-attributes
     class CloseButton < Primer::Component
-      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_TYPE = :button

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

@@ -9,7 +9,6 @@ module Primer
     #   should be accompanied with text such as `issues` or `pull requests`.
     #
     class Counter < Primer::Component
-      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_SCHEME = :default

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

@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Use `DetailsComponent` to reveal content after clicking a button.
     class Details < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       BODY_TAG_DEFAULT = :div
@@ -25,7 +26,9 @@ module Primer
 
         return Primer::BaseComponent.new(**system_arguments) unless button
 
+        # rubocop:disable Primer/ComponentNameMigration
         Primer::ButtonComponent.new(**system_arguments)
+        # rubocop:enable Primer/ComponentNameMigration
       }
 
       # Use the Body slot as the main content to be shown when triggered by the Summary.
@@ -40,11 +43,11 @@ module Primer
 
       # @example Default
       #
-      #   <%= render Primer::Beta::Details.new do |c| %>
-      #     <% c.with_summary do %>
+      #   <%= render Primer::Beta::Details.new do |component| %>
+      #     <% component.with_summary do %>
       #       Summary
       #     <% end %>
-      #     <% c.with_body do %>
+      #     <% component.with_body do %>
       #       Body
       #     <% end %>
       #   <% end %>

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

@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Use `Flash` to inform users of successful or pending actions.
     class Flash < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       # Optional action content showed on the right side of the component.

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

@@ -18,7 +18,6 @@ module Primer
     #   Headings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.
     #   <%= link_to_heading_practices %>
     class Heading < Primer::Component
-      warn_on_deprecated_slot_setter
       status :beta
 
       TAG_FALLBACK = :h2

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

@@ -15,7 +15,6 @@ module Primer
     #   Either `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.
     #   [Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)
     class IconButton < Primer::Component
-      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_SCHEME = :default

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

@@ -7,7 +7,6 @@ module Primer
     # @accessibility
     #   Use `aria-label` if the `Label` or the context around it don't explain the label.
     class Label < Primer::Component
-      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_TAG = :span

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

@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Use `Link` for navigating from one page to another. `Link` styles anchor tags with default blue styling and hover text-decoration.
     class Link < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_SCHEME = :default

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

@@ -4,7 +4,6 @@ module Primer
   module Beta
     # Use `Markdown` to wrap markdown content.
     class Markdown < Primer::Component
-      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_TAG = :div

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

@@ -7,6 +7,7 @@ module Primer
     # `Octicon` renders an <%= link_to_octicons %> with <%= link_to_system_arguments_docs %>.
     # `Octicon` can also be rendered with the `primer_octicon` helper, which accepts the same arguments.
     class Octicon < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       SIZE_XSMALL = :xsmall

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

@@ -6,6 +6,7 @@ module Primer
     #
     # By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
     class Popover < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       CARET_DEFAULT = :top

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

@@ -32,24 +32,24 @@ module Primer
       SIZE_OPTIONS = SIZE_MAPPINGS.keys
       # @example Default
       #   <%= render(Primer::Beta::ProgressBar.new) do |component| %>
-      #     <% component.item(percentage: 25) %>
+      #     <% component.with_item(percentage: 25) %>
       #   <% end %>
       #
       # @example Small
       #   <%= render(Primer::Beta::ProgressBar.new(size: :small)) do |component| %>
-      #     <% component.item(bg: :accent_emphasis, percentage: 50) %>
+      #     <% component.with_item(bg: :accent_emphasis, percentage: 50) %>
       #   <% end %>
       #
       # @example Large
       #   <%= render(Primer::Beta::ProgressBar.new(size: :large)) do |component| %>
-      #     <% component.item(bg: :danger_emphasis, percentage: 75) %>
+      #     <% component.with_item(bg: :danger_emphasis, percentage: 75) %>
       #   <% end %>
       #
       # @example Multiple items
       #   <%= render(Primer::Beta::ProgressBar.new) do |component| %>
-      #     <% component.item(percentage: 10) %>
-      #     <% component.item(bg: :accent_emphasis, percentage: 20) %>
-      #     <% component.item(bg: :danger_emphasis, percentage: 30) %>
+      #     <% component.with_item(percentage: 10) %>
+      #     <% component.with_item(bg: :accent_emphasis, percentage: 20) %>
+      #     <% component.with_item(bg: :danger_emphasis, percentage: 30) %>
       #   <% end %>
       #
       # @param size [Symbol] <%= one_of(Primer::Beta::ProgressBar::SIZE_OPTIONS) %> Increases height.
@@ -65,7 +65,7 @@ module Primer
       end
 
       def render?
-        items.any?
+        items?
       end
     end
   end

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

@@ -4,7 +4,6 @@ module Primer
   module Beta
     # Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
     class RelativeTime < Primer::Component
-      warn_on_deprecated_slot_setter
       status :beta
 
       TENSE_DEFAULT = :auto

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

@@ -4,7 +4,6 @@ module Primer
   module Beta
     # Use `Spinner` to let users know that content is being loaded.
     class Spinner < Primer::Component
-      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_SIZE = :medium

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

@@ -4,7 +4,6 @@ module Primer
   module Beta
     # `Text` is a wrapper component that will apply typography styles to the text inside.
     class Text < Primer::Component
-      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_TAG = :span

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

@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Use `Truncate` to shorten overflowing text with an ellipsis.
     class Truncate < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       # Text slot used for the truncated text.
@@ -77,11 +78,11 @@ module Primer
       def before_render
         return unless content.present? && items.empty?
 
-        item { content }
+        with_item { content }
       end
 
       def render?
-        items.any?
+        items?
       end
 
       # This component is part of `Primer::Beta::Truncate` and should not be

data/app/components/primer/box.rb

@@ -3,7 +3,6 @@
 module Primer
   # `Box` is a basic wrapper component for most layout related needs.
   class Box < Primer::Component
-    warn_on_deprecated_slot_setter
     status :stable
 
     # @example Default

data/app/components/primer/button_component.rb

@@ -38,7 +38,7 @@ module Primer
         Primer::Beta::Octicon.new(**system_arguments)
       }
     }
-    alias icon leading_visual_icon # remove alias when all buttons are migrated to new slot names
+    alias icon with_leading_visual_icon # remove alias when all buttons are migrated to new slot names
 
     # Trailing visuals appear to the right of the button text.
     #
@@ -54,7 +54,7 @@ module Primer
         Primer::Beta::Counter.new(**system_arguments)
       }
     }
-    alias counter trailing_visual_counter # remove alias when all buttons are migrated to new slot names
+    alias counter with_trailing_visual_counter # remove alias when all buttons are migrated to new slot names
 
     # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
     # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.

data/app/components/primer/component.rb

@@ -6,6 +6,7 @@ module Primer
   # @private
   # :nocov:
   class Component < ViewComponent::Base
+    warn_on_deprecated_slot_setter
     include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
     include ViewComponent::PolymorphicSlots unless ViewComponent::Base < ViewComponent::PolymorphicSlots
     include ClassNameHelper

data/app/components/primer/conditional_wrapper.rb

@@ -22,8 +22,6 @@ module Primer
   # @param condition [Boolean] Whether or not to wrap the content in a `Primer::BaseComponent`.
   # @param base_component_arguments [Hash] The arguments to pass to `Primer::BaseComponent`.
   class ConditionalWrapper < Primer::Component
-    warn_on_deprecated_slot_setter
-
     def initialize(condition:, **base_component_arguments)
       @condition = condition
       @base_component_arguments = base_component_arguments

data/app/components/primer/dropdown_menu_component.rb

@@ -18,12 +18,12 @@ module Primer
 
     # @example With a header
     #   <div>
-    #     <%= render(Primer::Beta::Details.new(overlay: :default, reset: true, position: :relative)) do |c| %>
-    #       <% c.summary do %>
+    #     <%= render(Primer::Beta::Details.new(overlay: :default, reset: true, position: :relative)) do |component| %>
+    #       <% component.with_summary do %>
     #         Dropdown
     #       <% end %>
     #
-    #       <% c.body do %>
+    #       <% component.with_body do %>
     #         <%= render(Primer::DropdownMenuComponent.new(header: "Options")) do %>
     #           <ul>
     #             <li><a class="dropdown-item" href="#url">Dropdown item</a></li>