primer_view_components 0.0.114 → 0.0.116

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

@@ -34,7 +34,7 @@ module Primer
 
         # An icon, avatar, SVG, or custom content that will render to the left of the label.
         #
-        # To render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>.
+        # To render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
         #
         # To render an avatar, call the `with_leading_visual_avatar` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>.
         #
@@ -42,7 +42,7 @@ module Primer
         #
         # To render custom content, call the `with_leading_visual_content` method and pass a block that returns a string.
         renders_one :leading_visual, types: {
-          icon: Primer::OcticonComponent,
+          icon: Primer::Beta::Octicon,
           avatar: ->(**kwargs) { Primer::Beta::Avatar.new(**{ **kwargs, size: 16 }) },
           svg: lambda { |**system_arguments|
             Primer::BaseComponent.new(tag: :svg, width: "16", height: "16", **system_arguments)
@@ -55,11 +55,11 @@ module Primer
         # Used internally.
         #
         # @private
-        renders_one :private_leading_action_icon, Primer::OcticonComponent
+        renders_one :private_leading_action_icon, Primer::Beta::Octicon
 
         # An icon, label, counter, or text to render to the right of the label.
         #
-        # To render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>.
+        # To render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
         #
         # To render a label, call the `with_leading_visual_label` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Label) %>.
         #
@@ -70,7 +70,7 @@ module Primer
         # with_leading_visual_text { "Text here" }`
         # ```
         renders_one :trailing_visual, types: {
-          icon: Primer::OcticonComponent,
+          icon: Primer::Beta::Octicon,
           label: Primer::Beta::Label,
           counter: Primer::Beta::Counter,
           text: ->(text) { text }
@@ -79,7 +79,7 @@ module Primer
         # Used internally.
         #
         # @private
-        renders_one :private_trailing_action_icon, Primer::OcticonComponent
+        renders_one :private_trailing_action_icon, Primer::Beta::Octicon
 
         # A button rendered after the trailing icon that can be used to show a menu, activate
         # a dialog, etc.

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

@@ -9,7 +9,7 @@
   <span class="autocomplete-body">
     <% if @with_icon %>
       <div class="form-control autocomplete-embedded-icon-wrap">
-        <%= render Primer::OcticonComponent.new(:search) %>
+        <%= render Primer::Beta::Octicon.new(:search) %>
     <% end %>
     <%= input %>
     <% if @is_clearable %>

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

@@ -66,39 +66,39 @@ module Primer
       #   @description
       #     Labels are stacked by default.
       #   @code
-      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
       #
       # @example With inline label
       #   @description
       #     Labels can be inline by setting `is_label_inline: true`. However, labels will always become stacked on smaller screen sizes.
       #   @code
-      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
       #
       # @example With non-visible label
       #   @description
       #     A non-visible label may be rendered with `is_label_visible: false`, but it is highly discouraged. See <%= link_to_accessibility %>.
       #   @code
-      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--non-visible-label", list_id: "fruits-popup--non-visible-label", is_label_visible: false)) %>
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--non-visible-label", list_id: "fruits-popup--non-visible-label", is_label_visible: false)) %>
       #
       # @example With icon
       #   @description
       #     To display a search icon, set `with_icon` to `true`.
       #   @code
-      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon", input_id: "fruits-input--icon", with_icon: true)) %>
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", list_id: "fruits-popup--icon", input_id: "fruits-input--icon", with_icon: true)) %>
       #
       # @example With icon and non-visible label
-      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon-no-label", input_id: "fruits-input--icon-no-label", with_icon: true, is_label_visible: false)) %>
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", list_id: "fruits-popup--icon-no-label", input_id: "fruits-input--icon-no-label", with_icon: true, is_label_visible: false)) %>
       #
       # @example With clear button
-      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
       #
       # @example With custom classes for the input
-      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
       #     <% c.with_input(classes: "custom-class") %>
       #   <% end %>
       #
       # @example With custom classes for the results
-      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
       #     <% c.with_results(classes: "custom-class") do %>
       #       <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
       #         Apple
@@ -136,8 +136,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
 
       private

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

@@ -2,7 +2,7 @@
   <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
     <% if @icon %>
       <div class="Banner-visual">
-        <%= render(Primer::OcticonComponent.new(icon: @icon)) %>
+        <%= render(Primer::Beta::Octicon.new(icon: @icon)) %>
       </div>
     <% end %>
     <%= render(Primer::BaseComponent.new(**@message_arguments)) do %>

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

@@ -58,7 +58,9 @@ module Primer
         )
         system_arguments[:id] = "dialog-show-#{@system_arguments[:id]}"
         system_arguments[:data] = (system_arguments[:data] || {}).merge({ "show-dialog-id": @system_arguments[:id] })
+        # rubocop:disable Primer/ComponentNameMigration
         Primer::ButtonComponent.new(**system_arguments)
+        # rubocop:enable Primer/ComponentNameMigration
       }
 
       # Header content.

data/app/components/primer/alpha/dropdown/menu.rb

@@ -80,7 +80,9 @@ module Primer
 
           def call
             component = if BUTTON_TAGS.include?(@system_arguments[:tag])
+                          # rubocop:disable Primer/ComponentNameMigration
                           Primer::ButtonComponent.new(scheme: :link, **@system_arguments)
+                          # rubocop:enable Primer/ComponentNameMigration
                         else
                           Primer::BaseComponent.new(**@system_arguments)
                         end

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

@@ -1,9 +1,9 @@
-<%= render(Primer::Beta::Details.new(**@system_arguments)) do |c| %>
-  <% c.summary(**@button_arguments) do %>
+<%= render(Primer::Beta::Details.new(**@system_arguments)) do |component| %>
+  <% component.with_summary(**@button_arguments) do %>
     <%= button %>
   <% end %>
 
-  <% c.body do %>
+  <% component.with_body do %>
     <%= menu %>
   <% end %>
 <% end %>

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

@@ -2,7 +2,7 @@
   <% if loading.present? %>
     <%= loading %>
   <% else %>
-    <%= render(Primer::SpinnerComponent.new(size: :large, flex: 1, "data-loading-slot": true)) %>
+    <%= render(Primer::Beta::Spinner.new(size: :large, flex: 1, "data-loading-slot": true)) %>
   <% end %>
 
   <input autocomplete="off" type="hidden" data-image-crop-input="x" name="cropped_x">

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

@@ -0,0 +1 @@
+.Layout{--Layout-sidebar-width:220px;--Layout-gutter:16px;display:grid}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout .Layout-divider,.Layout .Layout-main,.Layout .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--color-canvas-inset);border-color:var(--color-border-default);border-style:solid;border-width:var(--primer-borderWidth-thin,1px) 0;height:8px;margin-right:0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md .Layout-divider,.Layout.Layout--flowRow-until-md .Layout-main,.Layout.Layout--flowRow-until-md .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--color-canvas-inset);border-color:var(--color-border-default);border-style:solid;border-width:var(--primer-borderWidth-thin,1px) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg .Layout-divider,.Layout.Layout--flowRow-until-lg .Layout-main,.Layout.Layout--flowRow-until-lg .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--color-canvas-inset);border-color:var(--color-border-default);border-style:solid;border-width:var(--primer-borderWidth-thin,1px) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout{grid-gap:var(--Layout-gutter);grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)))}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{background:var(--color-border-default);display:block;grid-column:2;margin-right:-1px;width:1px}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-xl{margin-left:auto;margin-right:auto}.Layout-main .Layout-main-centered-lg>.container-lg,.Layout-main .Layout-main-centered-lg>.container-md,.Layout-main .Layout-main-centered-lg>.container-xl,.Layout-main .Layout-main-centered-md>.container-lg,.Layout-main .Layout-main-centered-md>.container-md,.Layout-main .Layout-main-centered-md>.container-xl,.Layout-main .Layout-main-centered-xl>.container-lg,.Layout-main .Layout-main-centered-xl>.container-md,.Layout-main .Layout-main-centered-xl>.container-xl{margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--primer-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--primer-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--primer-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter))}

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

@@ -0,0 +1 @@
+{"name":"alpha/layout","selectors":[".Layout",".Layout .Layout-divider",".Layout .Layout-main",".Layout .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--divided",".Layout.Layout--divided .Layout-divider",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--divided .Layout-main",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md",".Layout.Layout--flowRow-until-md .Layout-divider",".Layout.Layout--flowRow-until-md .Layout-main",".Layout.Layout--flowRow-until-md .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg",".Layout.Layout--flowRow-until-lg .Layout-divider",".Layout.Layout--flowRow-until-lg .Layout-main",".Layout.Layout--flowRow-until-lg .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--gutter-none",".Layout.Layout--gutter-condensed",".Layout.Layout--gutter-spacious",".Layout.Layout--sidebar-narrow",".Layout.Layout--sidebar-wide",".Layout.Layout--sidebarPosition-start .Layout-sidebar",".Layout.Layout--sidebarPosition-start .Layout-main",".Layout.Layout--sidebarPosition-end",".Layout.Layout--sidebarPosition-end .Layout-main",".Layout.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main",".Layout-divider",".Layout-sidebar",".Layout-main",".Layout-main .Layout-main-centered-lg",".Layout-main .Layout-main-centered-md",".Layout-main .Layout-main-centered-xl",".Layout-main .Layout-main-centered-lg>.container-lg",".Layout-main .Layout-main-centered-lg>.container-md",".Layout-main .Layout-main-centered-lg>.container-xl",".Layout-main .Layout-main-centered-md>.container-lg",".Layout-main .Layout-main-centered-md>.container-md",".Layout-main .Layout-main-centered-md>.container-xl",".Layout-main .Layout-main-centered-xl>.container-lg",".Layout-main .Layout-main-centered-xl>.container-md",".Layout-main .Layout-main-centered-xl>.container-xl"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QAGE,4BAA6B,CAC7B,oBAAqB,CAHrB,YAkJF,CA7IE,wCANF,QA7EE,kBAAmB,CACnB,mCA+NF,CA7NE,qEAIE,uBAAyB,CADzB,oBAEF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCAEE,UAAW,CADX,UAeF,CAZE,uEACE,YACF,CAEA,wEAGE,oCAAqC,CACrC,wCAAyC,CACzC,kBAAmB,CACnB,iDAAmD,CALnD,UAAW,CACX,cAKF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,oCAAqC,CACrC,wCAAyC,CACzC,kBAAmB,CACnB,iDAAmD,CALnD,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,oCAAqC,CACrC,wCAAyC,CACzC,kBAAmB,CACnB,iDAAmD,CALnD,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CAnBJ,QA0BE,6BAA8B,CAF9B,qBAAsB,CACtB,sGA0HF,CAvHE,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBAwGJ,CAvGE,CAEA,4BAEE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAlEF,QAmEI,4BAgFJ,CA/EE,CAEA,yBAtEF,QAuEI,4BA4EJ,CA3EE,CAEA,0BA1EF,QA2EI,4BAwEJ,CAvEE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCAKE,sCAAuC,CAJvC,aAAc,CACd,aAAc,CAEd,iBAAkB,CADlB,SAGF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,kHAIE,gBAAiB,CADjB,iBAQF,CALE,odAGE,aACF,CAGF,sCACE,2GACF,CAEA,sCACE,2GACF,CAEA,sCACE,4GACF","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n  grid-auto-flow: row;\n  grid-template-columns: 1fr !important;\n\n  & .Layout-sidebar,\n  & .Layout-divider,\n  & .Layout-main {\n    width: 100% !important;\n    grid-column: 1 !important;\n  }\n\n  &.Layout--sidebarPosition-flowRow-start {\n    & .Layout-sidebar {\n      grid-row: 1;\n    }\n\n    & .Layout-main {\n      grid-row: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-end {\n    & .Layout-sidebar {\n      grid-row: 2 / span 2;\n    }\n\n    & .Layout-main {\n      grid-row: 1;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-none {\n    & .Layout-sidebar {\n      display: none;\n    }\n  }\n\n  &.Layout--divided {\n    @mixin flow-as-row-divider;\n\n    & .Layout-main {\n      grid-row: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-flowRow-end {\n      & .Layout-sidebar {\n        grid-row: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-row: 1;\n      }\n    }\n  }\n}\n\n@define-mixin flow-as-row-divider {\n  --Layout-gutter: 0;\n\n  & .Layout-divider {\n    height: 1px;\n    grid-row: 2;\n\n    &.Layout-divider--flowRow-hidden {\n      display: none;\n    }\n\n    &.Layout-divider--flowRow-shallow {\n      height: 8px;\n      margin-right: 0;\n      background: var(--color-canvas-inset);\n      border-color: var(--color-border-default);\n      border-style: solid;\n      border-width: var(--primer-borderWidth-thin, 1px) 0;\n    }\n  }\n}\n\n.Layout {\n  display: grid;\n\n  --Layout-sidebar-width: 220px;\n  --Layout-gutter: 16px;\n\n  @media (max-width: calc(544px - 0.02px)) {\n    @mixin flow-as-row;\n  }\n\n  &.Layout--flowRow-until-md {\n    @media (max-width: calc(768px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  &.Layout--flowRow-until-lg {\n    @media (max-width: calc(1012px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  /* Flow as column */\n\n  grid-auto-flow: column;\n  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n  grid-gap: var(--Layout-gutter);\n\n  & .Layout-sidebar {\n    grid-column: 1;\n  }\n\n  & .Layout-divider {\n    display: none;\n  }\n\n  & .Layout-main {\n    grid-column: 2 / span 2;\n  }\n\n  /* Gutter spacing */\n\n  @media (min-width: 1012px) {\n    --Layout-gutter: 24px;\n  }\n\n  &.Layout--gutter-none {\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --Layout-gutter: 0px; /* Neds px in value */\n  }\n\n  &.Layout--gutter-condensed {\n    --Layout-gutter: 16px;\n  }\n\n  &.Layout--gutter-spacious {\n    @media (min-width: 1012px) {\n      --Layout-gutter: 32px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-gutter: 40px;\n    }\n  }\n\n  /* Sidebar width */\n  @media (min-width: 544px) {\n    --Layout-sidebar-width: 220px;\n  }\n\n  @media (min-width: 768px) {\n    --Layout-sidebar-width: 256px;\n  }\n\n  @media (min-width: 1012px) {\n    --Layout-sidebar-width: 296px;\n  }\n\n  &.Layout--sidebar-narrow {\n    @media (min-width: 768px) {\n      --Layout-sidebar-width: 240px;\n    }\n\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 256px;\n    }\n  }\n\n  &.Layout--sidebar-wide {\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 320px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-sidebar-width: 336px;\n    }\n  }\n\n  /* Sidebar position */\n\n  &.Layout--sidebarPosition-start {\n    & .Layout-sidebar {\n      grid-column: 1;\n    }\n\n    & .Layout-main {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-end {\n    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n    & .Layout-main {\n      grid-column: 1;\n    }\n\n    & .Layout-sidebar {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  /* Sidebar divider */\n\n  &.Layout--divided {\n    & .Layout-divider {\n      display: block;\n      grid-column: 2;\n      width: 1px;\n      margin-right: -1px;\n      background: var(--color-border-default);\n    }\n\n    & .Layout-main {\n      grid-column: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-end {\n      & .Layout-sidebar {\n        grid-column: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-column: 1;\n      }\n    }\n  }\n}\n\n.Layout-divider {\n  display: none;\n  width: 1px;\n}\n\n.Layout-sidebar {\n  width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n  min-width: 0;\n\n  /* Centered main column\n  ** FIXME: right-aligned sidebar */\n  & .Layout-main-centered-md,\n  & .Layout-main-centered-lg,\n  & .Layout-main-centered-xl {\n    margin-right: auto;\n    margin-left: auto;\n\n    & > .container-md,\n    & > .container-lg,\n    & > .container-xl {\n      margin-left: 0;\n    }\n  }\n\n  & .Layout-main-centered-md {\n    max-width: calc(var(--primer-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-lg {\n    max-width: calc(var(--primer-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-xl {\n    max-width: calc(var(--primer-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n}\n"]}

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

@@ -0,0 +1,268 @@
+/* Layout */
+
+@define-mixin flow-as-row {
+  grid-auto-flow: row;
+  grid-template-columns: 1fr !important;
+
+  & .Layout-sidebar,
+  & .Layout-divider,
+  & .Layout-main {
+    width: 100% !important;
+    grid-column: 1 !important;
+  }
+
+  &.Layout--sidebarPosition-flowRow-start {
+    & .Layout-sidebar {
+      grid-row: 1;
+    }
+
+    & .Layout-main {
+      grid-row: 2 / span 2;
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-end {
+    & .Layout-sidebar {
+      grid-row: 2 / span 2;
+    }
+
+    & .Layout-main {
+      grid-row: 1;
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-none {
+    & .Layout-sidebar {
+      display: none;
+    }
+  }
+
+  &.Layout--divided {
+    @mixin flow-as-row-divider;
+
+    & .Layout-main {
+      grid-row: 3 / span 1;
+    }
+
+    &.Layout--sidebarPosition-flowRow-end {
+      & .Layout-sidebar {
+        grid-row: 3 / span 1;
+      }
+
+      & .Layout-main {
+        grid-row: 1;
+      }
+    }
+  }
+}
+
+@define-mixin flow-as-row-divider {
+  --Layout-gutter: 0;
+
+  & .Layout-divider {
+    height: 1px;
+    grid-row: 2;
+
+    &.Layout-divider--flowRow-hidden {
+      display: none;
+    }
+
+    &.Layout-divider--flowRow-shallow {
+      height: 8px;
+      margin-right: 0;
+      background: var(--color-canvas-inset);
+      border-color: var(--color-border-default);
+      border-style: solid;
+      border-width: var(--primer-borderWidth-thin, 1px) 0;
+    }
+  }
+}
+
+.Layout {
+  display: grid;
+
+  --Layout-sidebar-width: 220px;
+  --Layout-gutter: 16px;
+
+  @media (max-width: calc(544px - 0.02px)) {
+    @mixin flow-as-row;
+  }
+
+  &.Layout--flowRow-until-md {
+    @media (max-width: calc(768px - 0.02px)) {
+      @mixin flow-as-row;
+    }
+  }
+
+  &.Layout--flowRow-until-lg {
+    @media (max-width: calc(1012px - 0.02px)) {
+      @mixin flow-as-row;
+    }
+  }
+
+  /* Flow as column */
+
+  grid-auto-flow: column;
+  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */
+  grid-gap: var(--Layout-gutter);
+
+  & .Layout-sidebar {
+    grid-column: 1;
+  }
+
+  & .Layout-divider {
+    display: none;
+  }
+
+  & .Layout-main {
+    grid-column: 2 / span 2;
+  }
+
+  /* Gutter spacing */
+
+  @media (min-width: 1012px) {
+    --Layout-gutter: 24px;
+  }
+
+  &.Layout--gutter-none {
+    /* stylelint-disable-next-line length-zero-no-unit */
+    --Layout-gutter: 0px; /* Neds px in value */
+  }
+
+  &.Layout--gutter-condensed {
+    --Layout-gutter: 16px;
+  }
+
+  &.Layout--gutter-spacious {
+    @media (min-width: 1012px) {
+      --Layout-gutter: 32px;
+    }
+
+    @media (min-width: 1280px) {
+      --Layout-gutter: 40px;
+    }
+  }
+
+  /* Sidebar width */
+  @media (min-width: 544px) {
+    --Layout-sidebar-width: 220px;
+  }
+
+  @media (min-width: 768px) {
+    --Layout-sidebar-width: 256px;
+  }
+
+  @media (min-width: 1012px) {
+    --Layout-sidebar-width: 296px;
+  }
+
+  &.Layout--sidebar-narrow {
+    @media (min-width: 768px) {
+      --Layout-sidebar-width: 240px;
+    }
+
+    @media (min-width: 1012px) {
+      --Layout-sidebar-width: 256px;
+    }
+  }
+
+  &.Layout--sidebar-wide {
+    @media (min-width: 1012px) {
+      --Layout-sidebar-width: 320px;
+    }
+
+    @media (min-width: 1280px) {
+      --Layout-sidebar-width: 336px;
+    }
+  }
+
+  /* Sidebar position */
+
+  &.Layout--sidebarPosition-start {
+    & .Layout-sidebar {
+      grid-column: 1;
+    }
+
+    & .Layout-main {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  &.Layout--sidebarPosition-end {
+    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;
+
+    & .Layout-main {
+      grid-column: 1;
+    }
+
+    & .Layout-sidebar {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  /* Sidebar divider */
+
+  &.Layout--divided {
+    & .Layout-divider {
+      display: block;
+      grid-column: 2;
+      width: 1px;
+      margin-right: -1px;
+      background: var(--color-border-default);
+    }
+
+    & .Layout-main {
+      grid-column: 3 / span 1;
+    }
+
+    &.Layout--sidebarPosition-end {
+      & .Layout-sidebar {
+        grid-column: 3 / span 1;
+      }
+
+      & .Layout-main {
+        grid-column: 1;
+      }
+    }
+  }
+}
+
+.Layout-divider {
+  display: none;
+  width: 1px;
+}
+
+.Layout-sidebar {
+  width: var(--Layout-sidebar-width);
+}
+
+.Layout-main {
+  min-width: 0;
+
+  /* Centered main column
+  ** FIXME: right-aligned sidebar */
+  & .Layout-main-centered-md,
+  & .Layout-main-centered-lg,
+  & .Layout-main-centered-xl {
+    margin-right: auto;
+    margin-left: auto;
+
+    & > .container-md,
+    & > .container-lg,
+    & > .container-xl {
+      margin-left: 0;
+    }
+  }
+
+  & .Layout-main-centered-md {
+    max-width: calc(var(--primer-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  & .Layout-main-centered-lg {
+    max-width: calc(var(--primer-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  & .Layout-main-centered-xl {
+    max-width: calc(var(--primer-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+}

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

@@ -215,7 +215,7 @@ module Primer
       end
 
       def render?
-        main.present? && sidebar.present?
+        main? && sidebar?
       end
 
       # The layout's main content.

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

@@ -0,0 +1 @@
+{"name":"alpha/menu","selectors":[".menu",".menu-item",".menu-item:first-child",".menu-item:first-child:before",".menu-item:last-child",".menu-item:last-child:before",".menu-item:hover",".menu-item:active",".menu-item.selected",".menu-item[aria-current]:not([aria-current=false])",".menu-item[aria-selected=true]",":is(.menu-item.selected",".menu-item[aria-current]:not([aria-current=false])):before",".menu-item .octicon",".menu-item .Counter",".menu-item .menu-warning",".menu-item .avatar",".menu-item.alert .Counter",".menu-heading",".menu-heading:hover",".menu-heading:first-child",".menu-heading:last-child"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,eAAgB,CADhB,iDAKF,CAEA,WAKE,gFAAkF,CADlF,6BAA8B,CAF9B,aAAc,CACd,yHAA4H,CAF5H,iBA+EF,CAzEE,uBACE,YAAa,CAEb,6DAKF,CAHE,qDAHA,4DAKA,CAGF,sBACE,eAAgB,CAChB,gEAMF,CAHE,mDAFA,+DAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,kHAOE,kDAAmD,CAJnD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,2BAA4B,CAD5B,iDAAmD,CAEnD,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,+CACF,CAEA,yBAEE,+BAAgC,CADhC,WAEF,CAEA,mBACE,UAAW,CACX,gDACF,CAGE,0BACE,4BACF,CAIJ,cAQE,gFAAkF,CADlF,6BAA8B,CAN9B,aAAc,CAId,iBAAkB,CAClB,gDAAkD,CAFlD,eAAgB,CADhB,YAAa,CADb,yHAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,4DAA8D,CAC9D,6DACF,CAEA,yBACE,eAAgB,CAEhB,+DAAiE,CADjE,gEAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  margin-bottom: var(--primer-stack-gap-normal, 16px);\n  list-style: none;\n  background-color: var(--color-canvas-default);\n  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  color: var(--color-fg-default);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n\n    &::before {\n      border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n\n    &::before {\n      border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--color-neutral-subtle);\n  }\n\n  &:active {\n    background-color: var(--color-canvas-subtle);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--color-menu-bg-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      background-color: var(--color-primer-border-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    margin-right: var(--primer-control-medium-gap, 8px);\n    color: var(--color-fg-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    margin-left: var(--primer-control-small-gap, 4px);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--color-attention-fg);\n  }\n\n  & .avatar {\n    float: left;\n    margin-right: var(--primer-control-small-gap, 4px);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--color-danger-fg);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-fg-default);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n}\n"]}

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

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `Menu` to create vertical lists of navigational links.
+    class Menu < Primer::Component
+      HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
+      HEADING_TAG_FALLBACK = :h2
+
+      # Optional menu heading
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Alpha::Menu::HEADING_TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :heading, lambda { |tag:, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, HEADING_TAG_FALLBACK)
+        system_arguments[:classes] = class_names(
+          "menu-heading",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Required list of navigational links
+      #
+      # @param href [String] URL to be used for the Link
+      # @param selected [Boolean] Whether the item is the current selection
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :items, lambda { |href:, selected: false, **system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :a
+        system_arguments[:href] = href
+        system_arguments[:"aria-current"] = :page if selected
+        system_arguments[:classes] = class_names(
+          "menu-item",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <%= render(Primer::Alpha::Menu.new) do |c| %>
+      #     <% c.with_heading(tag: :h2) do %>
+      #       Heading
+      #     <% end %>
+      #     <% c.with_item(selected: true, href: "#url") do %>
+      #       Item 1
+      #     <% end %>
+      #     <% c.with_item(href: "#url") do %>
+      #       <%= render(Primer::Beta::Octicon.new("check")) %>
+      #       With Icon
+      #     <% end %>
+      #     <% c.with_item(href: "#url") do %>
+      #       <%= render(Primer::Beta::Octicon.new("check")) %>
+      #       With Icon and Counter
+      #       <%= render(Primer::Beta::Counter.new(count: 25)) %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :nav
+        @system_arguments[:classes] = class_names(
+          "menu",
+          @system_arguments[:classes]
+        )
+      end
+
+      def render?
+        items.any?
+      end
+    end
+  end
+end