primer_view_components 0.0.116 → 0.0.117

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

@@ -1 +1 @@
-{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,gDAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,wCAA0C,CAC1C,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,mDAAqD,CANrD,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,kDAAoD,CACpD,gBAAiB,CAFjB,kEAAoE,CAFpE,iBAAkB,CAMlB,iBAAkB,CAClB,kBA6DF,CAtDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAgBF,CAXE,mJAOE,4CAA6C,CAC7C,mDAAqD,CALrD,uBAAwB,CAGxB,UAAW,CADX,UAAW,CAJX,iBAAkB,CAClB,SAAU,CAOV,6BAA+B,CAL/B,UAMF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,iDAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48, 48px);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--color-border-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--primer-control-medium-gap, 8px);\n    color: var(--color-fg-default);\n    background-color: var(--color-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--color-fg-on-emphasis);\n    background-color: var(--color-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--primer-control-medium-gap, 8px);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);\n  font-size: var(--primer-text-body-size-medium, 14px);\n  line-height: 30px;\n  color: var(--color-fg-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    border-bottom-color: var(--color-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold, 600);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--color-fg-default);\n      text-decoration: none;\n      background: var(--color-action-list-item-default-hover-bg);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-default);\n    border-bottom-color: var(--color-primer-border-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--color-primer-border-active);\n      border-radius: var(--primer-borderRadius-medium, 6px);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48, 48px);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--primer-control-medium-gap, 8px);\n  color: var(--color-fg-muted);\n  fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}\n",null]}
+{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,gDAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,wCAA0C,CAC1C,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,mDAAqD,CANrD,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,kDAAoD,CACpD,gBAAiB,CAFjB,kEAAoE,CAFpE,iBAAkB,CAMlB,iBAAkB,CAClB,kBA6DF,CAtDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAgBF,CAXE,0JAOE,4CAA6C,CAC7C,mDAAqD,CALrD,uBAAwB,CAGxB,UAAW,CADX,UAAW,CAJX,iBAAkB,CAClB,SAAU,CAOV,6BAA+B,CAL/B,UAMF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,iDAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48, 48px);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--color-border-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--primer-control-medium-gap, 8px);\n    color: var(--color-fg-default);\n    background-color: var(--color-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--color-fg-on-emphasis);\n    background-color: var(--color-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--primer-control-medium-gap, 8px);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);\n  font-size: var(--primer-text-body-size-medium, 14px);\n  line-height: 30px;\n  color: var(--color-fg-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    border-bottom-color: var(--color-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold, 600);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--color-fg-default);\n      text-decoration: none;\n      background: var(--color-action-list-item-default-hover-bg);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-default);\n    border-bottom-color: var(--color-primer-border-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--color-primer-border-active);\n      border-radius: var(--primer-borderRadius-medium, 6px);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48, 48px);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--primer-control-medium-gap, 8px);\n  color: var(--color-fg-muted);\n  fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}\n",null]}

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

@@ -71,18 +71,18 @@ module Primer
       #
       # @example With icons and counters
       #   <%= render(Primer::Alpha::UnderlineNav.new(label: "With icons and counters")) do |component| %>
-      #     <% component.with_tab(href: "#", selected: true) do |t| %>
-      #       <% t.icon(icon: :star) %>
-      #       <% t.text { "Item 1" } %>
+      #     <% component.with_tab(href: "#", selected: true) do |tab| %>
+      #       <% tab.with_icon(icon: :star) %>
+      #       <% tab.with_text { "Item 1" } %>
       #     <% end %>
-      #     <% component.with_tab(href: "#") do |t| %>
-      #       <% t.icon(icon: :star) %>
-      #       <% t.text { "Item 2" } %>
-      #       <% t.counter(count: 10) %>
+      #     <% component.with_tab(href: "#") do |tab| %>
+      #       <% tab.with_icon(icon: :star) %>
+      #       <% tab.with_text { "Item 2" } %>
+      #       <% tab.with_counter(count: 10) %>
       #     <% end %>
-      #     <% component.with_tab(href: "#") do |t| %>
-      #       <% t.text { "Item 3" } %>
-      #       <% t.counter(count: 10) %>
+      #     <% component.with_tab(href: "#") do |tab| %>
+      #       <% tab.with_text { "Item 3" } %>
+      #       <% tab.with_counter(count: 10) %>
       #     <% end %>
       #     <% component.with_actions do %>
       #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
@@ -91,11 +91,11 @@ module Primer
       #
       # @example Align right
       #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Align right", align: :right)) do |component| %>
-      #     <% component.with_tab(href: "#", selected: true) do |t| %>
-      #       <% t.text { "Item 1" } %>
+      #     <% component.with_tab(href: "#", selected: true) do |tab| %>
+      #       <% tab.with_text { "Item 1" } %>
       #     <% end %>
-      #     <% component.with_tab(href: "#") do |t| %>
-      #       <% t.text { "Item 2" } %>
+      #     <% component.with_tab(href: "#") do |tab| %>
+      #       <% tab.with_text { "Item 2" } %>
       #     <% end %>
       #     <% component.with_actions do %>
       #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
@@ -103,10 +103,10 @@ module Primer
       #   <% end %>
       #
       # @example Customizing the body
-      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |c| %>
-      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% c.with_tab(href: "#") { "Tab 2" } %>
-      #     <% c.with_tab(href: "#") { "Tab 3" } %>
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
       #   <% end %>
       #
       # @param tag [Symbol] <%= one_of(Primer::Alpha::UnderlineNav::TAG_OPTIONS) %>

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

@@ -6,7 +6,6 @@ module Primer
     class AutoComplete
       # Use `AutoCompleteItem` to list results of an auto-completed search.
       class Item < Primer::Component
-        warn_on_deprecated_slot_setter
         status :beta
 
         ALLOWED_DESCRIPTION_VARIANTS = [:inline, :block].freeze
@@ -36,10 +35,10 @@ module Primer
         renders_one :description
 
         # @example Default
-        #   <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
+        #   <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "value")) do %>
         #     Selected
         #   <% end %>
-        #   <%= render(Primer::Beta::AutoComplete::Item.new(value: "value")) do |c| %>
+        #   <%= render(Primer::Beta::AutoComplete::Item.new(value: "value")) do %>
         #     Not selected
         #   <% end %>
         #

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

@@ -12,8 +12,6 @@ module Primer
     #   However, please note that a visible label should almost always
     #   be used unless there is compelling reason not to. A placeholder is not a label.
     class AutoComplete < Primer::Component
-      warn_on_deprecated_slot_setter
-
       status :beta
 
       DEFAULT_SIZE = :medium
@@ -96,8 +94,8 @@ module Primer
       #   @description
       #     Display any Octicon as a leading visual within the field
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", src: "/view-components/rails-app/auto_complete", input_id:"input-id-1", list_id: "list-id-1")) do |c| %>
-      #       <% c.leading_visual_icon(icon: :search) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", src: "/view-components/rails-app/auto_complete", input_id:"input-id-1", list_id: "list-id-1")) do |component| %>
+      #       <% component.with_leading_visual_icon(icon: :search) %>
       #     <% end %>
       #
       # @example Trailing action
@@ -110,42 +108,42 @@ module Primer
       #   @description
       #     A non-visible label may be rendered with `visually_hide_label: true`, but it is highly discouraged. See <%= link_to_accessibility %>.
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-1", list_id: "fruits-popup--custom-result-1", src: "/view-components/rails-app/auto_complete", visually_hide_label: true)) do |c| %>
-      #       <% c.leading_visual_icon(icon: :search) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-1", list_id: "fruits-popup--custom-result-1", src: "/view-components/rails-app/auto_complete", visually_hide_label: true)) do |component| %>
+      #       <% component.with_leading_visual_icon(icon: :search) %>
       #     <% end %>
       #
       # @example Full width field
       #   @description
       #     To allow field to span width of its container, set `full_width` to `true`.
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", full_width: true)) do |c| %>
-      #       <% c.leading_visual_icon(icon: :search) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", full_width: true)) do |component| %>
+      #       <% component.with_leading_visual_icon(icon: :search) %>
       #     <% end %>
       #
       # @example Inset variant
       #   @description
       #     Use the `inset` variant to change the input background color to be subtle.
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", inset: true)) do |c| %>
-      #       <% c.leading_visual_icon(icon: :search) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", inset: true)) do |component| %>
+      #       <% component.with_leading_visual_icon(icon: :search) %>
       #     <% end %>
       #
       # @example Monospace variant
       #   @description
       #     Use the `monospace` variant to change the input font family.
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", monospace: true)) do |c| %>
-      #       <% c.leading_visual_icon(icon: :search) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", monospace: true)) do |component| %>
+      #       <% component.with_leading_visual_icon(icon: :search) %>
       #     <% end %>
       #
       # @example With custom classes for the input
-      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
-      #     <% c.with_input(classes: "custom-class") %>
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |component| %>
+      #     <% component.with_input(classes: "custom-class") %>
       #   <% end %>
       #
       # @example With custom classes for the results
-      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
-      #     <% c.with_results(classes: "custom-class") %>
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |component| %>
+      #     <% component.with_results(classes: "custom-class") %>
       #   <% end %>
       #
       # @param label_text [String] The label of the input.

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

@@ -4,8 +4,6 @@ module Primer
   module Beta
     # Use `AvatarStack` to stack multiple avatars together.
     class AvatarStack < Primer::Component
-      warn_on_deprecated_slot_setter
-
       status :beta
 
       ALIGN_DEFAULT = :left
@@ -22,24 +20,24 @@ module Primer
       renders_many :avatars, "Primer::Beta::Avatar"
 
       # @example Default
-      #   <%= render(Primer::Beta::AvatarStack.new) do |c| %>
-      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #   <%= render(Primer::Beta::AvatarStack.new) do |component| %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @example Align right
-      #   <%= render(Primer::Beta::AvatarStack.new(align: :right)) do |c| %>
-      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #   <%= render(Primer::Beta::AvatarStack.new(align: :right)) do |component| %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @example With tooltip
-      #   <%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
-      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
-      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #   <%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |component| %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @param tag [Symbol] <%= one_of(Primer::Beta::AvatarStack::TAG_OPTIONS) %>

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

@@ -11,7 +11,6 @@ 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

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

@@ -7,8 +7,6 @@ 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,8 +4,6 @@ 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.css

@@ -1 +1 @@
-.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--color-fg-muted);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg)}.breadcrumb-item:first-child{margin-left:0}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--color-fg-default)}
+.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--color-fg-muted);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg)}.breadcrumb-item:first-child{margin-left:0}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--color-fg-default)}

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

@@ -1 +1 @@
-{"name":"beta/breadcrumbs","selectors":[".breadcrumb-item",".breadcrumb-item:after",".breadcrumb-item:first-child",":is(.breadcrumb-item-selected",".breadcrumb-item[aria-current]:not([aria-current=false])):after",".breadcrumb-item-selected a"]}
+{"name":"beta/breadcrumbs","selectors":[".breadcrumb-item",".breadcrumb-item:after",".breadcrumb-item:first-child",".breadcrumb-item-selected:after",".breadcrumb-item[aria-current]:not([aria-current=false]):after",".breadcrumb-item-selected a"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CAFhB,kBAAoB,CACpB,kBAeF,CAZE,uBAKE,6CAA+C,CAD/C,UAAW,CAHX,oBAAqB,CACrB,WAAa,CACb,aAAe,CAGf,uBACF,CAEA,6BACE,aACF,CAKA,8FACE,YACF,CAGF,4BACE,6BACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  margin-left: -0.35em;\n  white-space: nowrap;\n  list-style: none;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    margin: 0 0.5em;\n    content: '';\n    border-right: 0.1em solid var(--color-fg-muted);\n    transform: rotate(15deg);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n.breadcrumb-item-selected a {\n  color: var(--color-fg-default);\n}\n"]}
+{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CAFhB,kBAAoB,CACpB,kBAeF,CAZE,uBAKE,6CAA+C,CAD/C,UAAW,CAHX,oBAAqB,CACrB,WAAa,CACb,aAAe,CAGf,uBACF,CAEA,6BACE,aACF,CAKA,+FACE,YACF,CAGF,4BACE,6BACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  margin-left: -0.35em;\n  white-space: nowrap;\n  list-style: none;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    margin: 0 0.5em;\n    content: '';\n    border-right: 0.1em solid var(--color-fg-muted);\n    transform: rotate(15deg);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n.breadcrumb-item-selected a {\n  color: var(--color-fg-default);\n}\n"]}

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

@@ -17,7 +17,6 @@ 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.rb

@@ -4,7 +4,6 @@ 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
@@ -103,21 +102,21 @@ module Primer
       #   <%= render(Primer::Beta::Button.new(block: :true, scheme: :primary)) { "Primary full width" } %>
       #
       # @example With leading visual
-      #   <%= render(Primer::Beta::Button.new) do |c| %>
-      #     <% c.with_leading_visual_icon(icon: :star) %>
+      #   <%= render(Primer::Beta::Button.new) do |component| %>
+      #     <% component.with_leading_visual_icon(icon: :star) %>
       #     Button
       #   <% end %>
       #
       # @example With trailing visual
-      #   <%= render(Primer::Beta::Button.new) do |c| %>
-      #     <% c.with_trailing_visual_counter(count: 15) %>
+      #   <%= render(Primer::Beta::Button.new) do |component| %>
+      #     <% component.with_trailing_visual_counter(count: 15) %>
       #     Button
       #   <% end %>
       #
       # @example With leading and trailing visuals
-      #   <%= render(Primer::Beta::Button.new) do |c| %>
-      #     <% c.with_leading_visual_icon(icon: :star) %>
-      #     <% c.with_trailing_visual_counter(count: 15) %>
+      #   <%= render(Primer::Beta::Button.new) do |component| %>
+      #     <% component.with_leading_visual_icon(icon: :star) %>
+      #     <% component.with_trailing_visual_counter(count: 15) %>
       #     Button
       #   <% end %>
       #
@@ -125,8 +124,8 @@ module Primer
       #   @description
       #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
       #   @code
-      #     <%= render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |c| %>
-      #       <% c.with_tooltip(text: "Tooltip text") %>
+      #     <%= render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component| %>
+      #       <% component.with_tooltip(text: "Tooltip text") %>
       #       Button
       #     <% end %>
       #

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

@@ -4,7 +4,6 @@ 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.

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

@@ -4,7 +4,6 @@ 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

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

@@ -4,7 +4,6 @@ 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/link.rb

@@ -4,7 +4,6 @@ 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
@@ -51,8 +50,8 @@ module Primer
       #   @description
       #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
       #   @code
-      #     <%= render(Primer::Beta::Link.new(href: "#", id: "link-with-tooltip")) do |c| %>
-      #       <% c.with_tooltip(text: "Tooltip text") %>
+      #     <%= render(Primer::Beta::Link.new(href: "#", id: "link-with-tooltip")) do |component| %>
+      #       <% component.with_tooltip(text: "Tooltip text") %>
       #       Link
       #     <% end %>
       #

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

@@ -7,7 +7,6 @@ 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,7 +6,6 @@ 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/state.css.json

@@ -0,0 +1 @@
+{"name":"beta/state","selectors":[".State",".state",".State--draft",".State--open",".State--merged",".State--closed",".State--small",".State--small .octicon"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,kDAAoD,CACpD,8CAAgD,CAChD,2DAA6D,CAH7D,kEAAoE,CAIpE,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,8CAA+C,CAC/C,qDAA6D,CAF7D,iCAGF,CAEA,aAEE,2CACF,CAEA,4BAJE,iCAOF,CAHA,eAEE,2CACF,CAEA,eAEE,6CAA8C,CAD9C,iCAEF,CAIA,cAEE,iDAAmD,CACnD,oCAAsC,CAFtC,cAOF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n  display: inline-block;\n  padding: 5px var(--primer-control-medium-paddingInline-normal, 12px);\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  line-height: var(--primer-control-medium-lineBoxHeight, 20px);\n  text-align: center;\n  white-space: nowrap;\n  border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-neutral-emphasis);\n  border: var(--primer-borderWidth-thin, 1px) solid transparent;\n}\n\n.State--open {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-open-emphasis);\n}\n\n.State--merged {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-done-emphasis);\n}\n\n.State--closed {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-closed-emphasis);\n}\n\n/* Small 24px */\n\n.State--small {\n  padding: 0 10px;\n  font-size: var(--primer-text-body-size-small, 12px);\n  line-height: var(--base-size-24, 24px);\n\n  & .octicon {\n    width: 1em; /* Ensures different icons don't change State indicator width */\n  }\n}\n"]}

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

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `State` for rendering the status of an item.
+    class State < Primer::Component
+      status :beta
+
+      SCHEME_DEFAULT = :default
+      NEW_SCHEME_MAPPINGS = {
+        open: "State--open",
+        closed: "State--closed",
+        merged: "State--merged"
+      }.freeze
+
+      DEPRECATED_SCHEME_MAPPINGS = {
+        SCHEME_DEFAULT => "",
+        :green => "State--open",
+        :red => "State--closed",
+        :purple => "State--merged"
+      }.freeze
+      SCHEME_MAPPINGS = NEW_SCHEME_MAPPINGS.merge(DEPRECATED_SCHEME_MAPPINGS)
+      SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+      SIZE_DEFAULT = :default
+      SIZE_MAPPINGS = {
+        SIZE_DEFAULT => "",
+        :small => "State--small"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      TAG_DEFAULT = :span
+      TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
+
+      # @example Default
+      #   <%= render(Primer::Beta::State.new(title: "title")) { "State" } %>
+      #
+      # @example Schemes
+      #   <%= render(Primer::Beta::State.new(title: "title")) { "Default" } %>
+      #   <%= render(Primer::Beta::State.new(title: "title", scheme: :open)) { "Open" } %>
+      #   <%= render(Primer::Beta::State.new(title: "title", scheme: :closed)) { "Closed" } %>
+      #   <%= render(Primer::Beta::State.new(title: "title", scheme: :merged)) { "Merged" } %>
+      #
+      # @example Sizes
+      #   <%= render(Primer::Beta::State.new(title: "title")) { "Default" } %>
+      #   <%= render(Primer::Beta::State.new(title: "title", size: :small)) { "Small" } %>
+      #
+      # @param title [String] `title` HTML attribute.
+      # @param scheme [Symbol] Background color. <%= one_of(Primer::Beta::State::SCHEME_OPTIONS) %>
+      # @param tag [Symbol] HTML tag for element. <%= one_of(Primer::Beta::State::TAG_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Primer::Beta::State::SIZE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        title:,
+        scheme: SCHEME_DEFAULT,
+        tag: TAG_DEFAULT,
+        size: SIZE_DEFAULT,
+        **system_arguments
+      )
+        @system_arguments = system_arguments
+        @system_arguments[:title] = title
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "State",
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, SCHEME_DEFAULT)],
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+        )
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+{"name":"beta/subhead","selectors":[".Subhead",".Subhead--spacious",".Subhead-heading",".Subhead-heading--danger",".Subhead-description",".Subhead-actions",".Subhead-actions+.Subhead-description"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,gFAAkF,CAHlF,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,iDAAmD,CADnD,wDAKF,CAGA,mBACE,mCACF,CAGA,iBAGE,aAAc,CAFd,cAAe,CACf,8CAAgD,CAEhD,OACF,CAGA,yBAEE,4BAA6B,CAD7B,gDAEF,CAGA,qBAEE,2BAA4B,CAC5B,WAAY,CAFZ,kDAAoD,CAGpD,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,6EAAiF,CAGjF,OAKF,CAHE,sCACE,iCACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  padding-bottom: var(--primer-stack-padding-condensed, 8px);\n  margin-bottom: var(--primer-stack-gap-normal, 16px);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n  margin-top: var(--base-size-40, 40px);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal, 400);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-danger-fg);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--primer-text-body-size-medium, 14px);\n  color: var(--color-fg-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n  margin: var(--base-size-4, 4px) 0 var(--base-size-4, 4px) var(--base-size-4, 4px);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4, 4px);\n  }\n}\n"]}