primer_view_components 0.0.115 → 0.0.117

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

@@ -48,52 +48,52 @@ module Primer
       #   @description
       #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
       #   @code
-      #     <%= render(Primer::Alpha::TabNav.new(label: "Default")) 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::TabNav.new(label: "Default")) do |component| %>
+      #       <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      #       <% component.with_tab(href: "#") { "Tab 2" } %>
+      #       <% component.with_tab(href: "#") { "Tab 3" } %>
       #     <% end %>
       #
       # @example Default with `<div>`
-      #   <%= render(Primer::Alpha::TabNav.new(label: "Default")) 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::TabNav.new(label: "Default")) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
       #   <% end %>
       #
       # @example With icons and counters
       #   <%= render(Primer::Alpha::TabNav.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 %>
       #   <% end %>
       #
       # @example With extra content
-      #   <%= render(Primer::Alpha::TabNav.new(label: "With extra content")) do |c| %>
-      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% c.with_tab(href: "#") { "Tab 2" } %>
-      #     <% c.with_tab(href: "#") { "Tab 3" } %>
-      #     <% c.with_extra do %>
+      #   <%= render(Primer::Alpha::TabNav.new(label: "With extra content")) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
+      #     <% component.with_extra do %>
       #       <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
       #     <% end %>
       #   <% end %>
       #
       # @example Adding extra content after the tabs
-      #   <%= render(Primer::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |c| %>
-      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
-      #     <% c.with_tab(href: "#") { "Tab 2" } %>
-      #     <% c.with_tab(href: "#") { "Tab 3" } %>
-      #     <% c.with_extra(align: :right) do %>
+      #   <%= render(Primer::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
+      #     <% component.with_extra(align: :right) do %>
       #       <div>
       #         <%= render(Primer::ButtonComponent.new) { "Button" } %>
       #       </div>
@@ -101,10 +101,10 @@ module Primer
       #   <% end %>
       #
       # @example Customizing the body
-      #   <%= render(Primer::Alpha::TabNav.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::TabNav.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::TabNav::TAG_OPTIONS) %>

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

@@ -43,15 +43,15 @@ module Primer
 
       # @example Default
       #   <%= render(Primer::Alpha::TabPanels.new(label: "With panels")) do |component| %>
-      #     <% component.with_tab(id: "tab-1", selected: true) do |t| %>
-      #       <% t.text { "Tab 1" } %>
-      #       <% t.panel do %>
+      #     <% component.with_tab(id: "tab-1", selected: true) do |tab| %>
+      #       <% tab.with_text { "Tab 1" } %>
+      #       <% tab.with_panel do %>
       #         Panel 1
       #       <% end %>
       #     <% end %>
-      #     <% component.with_tab(id: "tab-2") do |t| %>
-      #       <% t.text { "Tab 2" } %>
-      #       <% t.panel do %>
+      #     <% component.with_tab(id: "tab-2") do |tab| %>
+      #       <% tab.with_text { "Tab 2" } %>
+      #       <% tab.with_panel do %>
       #         Panel 2
       #       <% end %>
       #     <% end %>

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

@@ -7,7 +7,6 @@ module Primer
     # A text field suitable for use outside a form. For a text field input suitable for use
     # within an HTML form, see the `Primer::Forms` namespace.
     class TextField < Primer::Component
-      warn_on_deprecated_slot_setter
       status :alpha
 
       # @!method initialize

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

@@ -6,8 +6,6 @@ module Primer
     # settings that should cause an immediate update. If configured with a "src" attribute, the component will
     # make a POST request containing data of the form "value: 0 | 1".
     class ToggleSwitch < Primer::Component
-      warn_on_deprecated_slot_setter
-
       SIZE_DEFAULT = :medium
       SIZE_MAPPINGS = {
         SIZE_DEFAULT => nil,
@@ -23,22 +21,22 @@ module Primer
       STATUS_LABEL_POSITION_OPTIONS = STATUS_LABEL_POSITION_MAPPINGS.keys.freeze
 
       # @example Default
-      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo")) %>
+      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch")) %>
       #
       # @example Checked
-      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", checked: true)) %>
+      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", checked: true)) %>
       #
       # @example Disabled
-      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", enabled: false)) %>
+      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", enabled: false)) %>
       #
       # @example Checked and Disabled
-      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", checked: true, enabled: false)) %>
+      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", checked: true, enabled: false)) %>
       #
       # @example Small
-      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", size: :small)) %>
+      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", size: :small)) %>
       #
       # @example With status label positioned at the end
-      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", status_label_position: :end)) %>
+      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", status_label_position: :end)) %>
       #
       # @param src [String] The URL to POST to when the toggle switch is toggled. If `nil`, the toggle switch will not make any requests.
       # @param csrf_token [String] A CSRF token that will be sent to the server as "authenticity_token" when the toggle switch is toggled. Unused if `src` is `nil`.

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

@@ -191,13 +191,9 @@ class ToolTipElement extends HTMLElement {
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
         if (!this.shadowRoot) {
             const shadow = this.attachShadow({ mode: 'open' });
-            // eslint-disable-next-line github/no-inner-html
-            shadow.innerHTML = `
-        <style>
-          ${this.styles()}
-        </style>
-        <slot></slot>
-      `;
+            const style = shadow.appendChild(document.createElement('style'));
+            style.textContent = this.styles();
+            shadow.appendChild(document.createElement('slot'));
         }
         this.hiddenFromView = true;
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");

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

@@ -190,13 +190,9 @@ class ToolTipElement extends HTMLElement {
     this.#updateDirection()
     if (!this.shadowRoot) {
       const shadow = this.attachShadow({mode: 'open'})
-      // eslint-disable-next-line github/no-inner-html
-      shadow.innerHTML = `
-        <style>
-          ${this.styles()}
-        </style>
-        <slot></slot>
-      `
+      const style = shadow.appendChild(document.createElement('style'))
+      style.textContent = this.styles()
+      shadow.appendChild(document.createElement('slot'))
     }
     this.hiddenFromView = true
     this.#allowUpdatePosition = true

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

@@ -23,8 +23,6 @@ module Primer
     #   - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
     #   `label` type is usually only appropriate for an icon-only control.
     class Tooltip < Primer::Component
-      warn_on_deprecated_slot_setter
-
       DIRECTION_DEFAULT = :s
       DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :n, :e, :w, :ne, :nw, :se, :sw].freeze
 
@@ -35,8 +33,8 @@ module Primer
       #     In this example, the button has a visible label text, "Save". `type: :description` is set because the tooltip content is supplementary.
       #     A screen reader user who encounters this button will hear the accessible name, "Save" followed by the accessible description, "This will immediately impact all organization members".
       #   @code
-      #     <%= render(Primer::ButtonComponent.new(id: "save-button")) do |c| %>
-      #       <% c.with_tooltip(text: "This will immediately impact all organization members", type: :description, direction: :ne) %>
+      #     <%= render(Primer::ButtonComponent.new(id: "save-button")) do |component| %>
+      #       <% component.with_tooltip(text: "This will immediately impact all organization members", type: :description, direction: :ne) %>
       #       Save
       #     <% end %>
       # @example As a label for an `IconButton`
@@ -57,36 +55,36 @@ module Primer
       #   @description
       #     Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
       #   @code
-      #     <%= render(Primer::ButtonComponent.new(id: "North", m: 2)) do |c| %>
-      #       <% c.with_tooltip(text: "This is a North-facing tooltip, and is responsive.", type: :description, direction: :n) %>
+      #     <%= render(Primer::ButtonComponent.new(id: "North", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a North-facing tooltip, and is responsive.", type: :description, direction: :n) %>
       #       North
       #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "South", m: 2)) do |c| %>
-      #       <% c.with_tooltip(text: "This is a South-facing tooltip, and is responsive.", type: :description, direction: :s) %>
+      #     <%= render(Primer::ButtonComponent.new(id: "South", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a South-facing tooltip, and is responsive.", type: :description, direction: :s) %>
       #       South
       #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "East", m: 2)) do |c| %>
-      #       <% c.with_tooltip(text: "This is a East-facing tooltip, and is responsive.", type: :description, direction: :e) %>
+      #     <%= render(Primer::ButtonComponent.new(id: "East", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a East-facing tooltip, and is responsive.", type: :description, direction: :e) %>
       #       East
       #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "West", m: 2)) do |c| %>
-      #       <% c.with_tooltip(text: "This is a West-facing tooltip, and is responsive.", type: :description, direction: :w) %>
+      #     <%= render(Primer::ButtonComponent.new(id: "West", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a West-facing tooltip, and is responsive.", type: :description, direction: :w) %>
       #       West
       #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Northwest", m: 2)) do |c| %>
-      #       <% c.with_tooltip(text: "This is a Northwest-facing tooltip, and is responsive.", type: :description, direction: :nw) %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Northwest", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a Northwest-facing tooltip, and is responsive.", type: :description, direction: :nw) %>
       #       Northwest
       #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Southwest", m: 2)) do |c| %>
-      #       <% c.with_tooltip(text: "This is a Southwest-facing tooltip, and is responsive.", type: :description, direction: :sw) %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Southwest", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a Southwest-facing tooltip, and is responsive.", type: :description, direction: :sw) %>
       #       Southwest
       #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Northeast", m: 2)) do |c| %>
-      #       <% c.with_tooltip(text: "This is a Northeast-facing tooltip, and is responsive.", type: :description, direction: :ne) %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Northeast", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a Northeast-facing tooltip, and is responsive.", type: :description, direction: :ne) %>
       #       Northeast
       #     <% end %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Southeast", m: 2)) do |c| %>
-      #       <% c.with_tooltip(text: "This is a Southeast-facing tooltip, and is responsive.", type: :description, direction: :se) %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Southeast", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a Southeast-facing tooltip, and is responsive.", type: :description, direction: :se) %>
       #       Southeast
       #     <% end %>
       # @example Directly using `Tooltip`

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

@@ -1 +1 @@
-.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--primer-control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--primer-control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--primer-text-body-size-medium,14px);line-height:30px;padding:0 var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}:is(.UnderlineNav-item.selected,.UnderlineNav-item[role=tab][aria-selected=true],.UnderlineNav-item[aria-current]:not([aria-current=false])):after{background:var(--color-primer-border-active);border-radius:var(--primer-borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--primer-control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}
+.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--primer-control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--primer-control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--primer-text-body-size-medium,14px);line-height:30px;padding:0 var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--color-primer-border-active);border-radius:var(--primer-borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--primer-control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}

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

@@ -1 +1 @@
-{"name":"alpha/underline_nav","selectors":[".UnderlineNav",".UnderlineNav .Counter",".UnderlineNav .Counter--primary",".UnderlineNav-body",".UnderlineNav-item",".UnderlineNav-item:focus",".UnderlineNav-item:focus-visible",".UnderlineNav-item:hover",".UnderlineNav-item [data-content]:before",".UnderlineNav-item:before",".UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])",".UnderlineNav-item[role=tab][aria-selected=true]",":is(.UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])):after",".UnderlineNav--right",".UnderlineNav--right .UnderlineNav-actions",".UnderlineNav-actions",".UnderlineNav--full",".UnderlineNav--full .UnderlineNav-body",".UnderlineNav-octicon",".UnderlineNav-container"]}
+{"name":"alpha/underline_nav","selectors":[".UnderlineNav",".UnderlineNav .Counter",".UnderlineNav .Counter--primary",".UnderlineNav-body",".UnderlineNav-item",".UnderlineNav-item:focus",".UnderlineNav-item:focus-visible",".UnderlineNav-item:hover",".UnderlineNav-item [data-content]:before",".UnderlineNav-item:before",".UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])",".UnderlineNav-item[role=tab][aria-selected=true]",".UnderlineNav-item.selected:after",".UnderlineNav-item[aria-current]:not([aria-current=false]):after",".UnderlineNav-item[role=tab][aria-selected=true]:after",".UnderlineNav--right",".UnderlineNav--right .UnderlineNav-actions",".UnderlineNav-actions",".UnderlineNav--full",".UnderlineNav--full .UnderlineNav-body",".UnderlineNav-octicon",".UnderlineNav-container"]}

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/alpha/underline_panels.rb

@@ -38,15 +38,15 @@ module Primer
 
       # @example Default
       #   <%= render(Primer::Alpha::UnderlinePanels.new(label: "With panels")) do |component| %>
-      #     <% component.with_tab(id: "tab-1", selected: true) do |t| %>
-      #       <% t.text { "Tab 1" } %>
-      #       <% t.panel do %>
+      #     <% component.with_tab(id: "tab-1", selected: true) do |tab| %>
+      #       <% tab.with_text { "Tab 1" } %>
+      #       <% tab.with_panel do %>
       #         Panel 1
       #       <% end %>
       #     <% end %>
-      #     <% component.with_tab(id: "tab-2") do |t| %>
-      #       <% t.text { "Tab 2" } %>
-      #       <% t.panel do %>
+      #     <% component.with_tab(id: "tab-2") do |tab| %>
+      #       <% tab.with_text { "Tab 2" } %>
+      #       <% tab.with_panel do %>
       #         Panel 2
       #       <% end %>
       #     <% end %>

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

@@ -35,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

@@ -94,56 +94,56 @@ 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: "/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
       #   @description
       #     Show a clear button
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "list-id-2", src: "/auto_complete", show_clear_button: true )) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "list-id-2", src: "/view-components/rails-app/auto_complete", show_clear_button: true )) %>
       #
       # @example Visually hidden label
       #   @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: "/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: "/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: "/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: "/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: "/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: "/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.
@@ -192,8 +192,8 @@ module Primer
 
       # add `input` and `results` without needing to explicitly call them in the view
       def before_render
-        results(classes: "") unless results
-        input(classes: "") unless input
+        with_results(classes: "") unless results?
+        with_input(classes: "") unless input?
       end
     end
   end

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

@@ -17,7 +17,6 @@ module Primer
     #   rather than `@kittenuser`.
     #   [Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)
     class Avatar < Primer::Component
-      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_SIZE = 20

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

@@ -20,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/base_button.rb

@@ -4,7 +4,6 @@ module Primer
   module Beta
     # Use `BaseButton` to render an unstyled `<button>` tag that can be customized.
     class BaseButton < Primer::Component
-      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_TAG = :button