primer_view_components 0.1.0 → 0.1.2

data/lib/primer/forms/dsl/text_field_input.rb

@@ -32,7 +32,7 @@ module Primer
 
           super(**system_arguments)
 
-          add_input_data(:target, "primer-text-field.inputElement") if auto_check_src.present?
+          add_input_data(:target, "primer-text-field.inputElement")
           add_input_classes("FormControl-inset") if inset?
           add_input_classes("FormControl-monospace") if monospace?
         end

data/lib/primer/forms/primer_text_field.js

@@ -18,7 +18,10 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 var _PrimerTextFieldElement_abortController;
 import '@github/auto-check-element';
 import { controller, target } from '@github/catalyst';
-let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
+// eslint-disable-next-line custom-elements/expose-class-on-global
+let PrimerTextFieldElement = 
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+class PrimerTextFieldElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _PrimerTextFieldElement_abortController.set(this, void 0);
@@ -27,22 +30,29 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
         var _a;
         (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
         const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
-        this.inputElement.addEventListener('auto-check-success', () => { this.clearError(); }, { signal });
-        this.inputElement.addEventListener('auto-check-error', (event) => {
-            event.detail.response.text().then((error_message) => { this.setError(error_message); });
+        this.inputElement.addEventListener('auto-check-success', () => {
+            this.clearError();
+        }, { signal });
+        this.inputElement.addEventListener('auto-check-error', async (event) => {
+            const errorMessage = await event.detail.response.text();
+            this.setError(errorMessage);
         }, { signal });
     }
     disconnectedCallback() {
         var _a;
         (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
     }
+    clearContents() {
+        this.inputElement.value = '';
+        this.inputElement.focus();
+    }
     clearError() {
         this.inputElement.removeAttribute('invalid');
         this.validationElement.hidden = true;
-        this.validationMessageElement.innerText = '';
+        this.validationMessageElement.textContent = '';
     }
     setError(message) {
-        this.validationMessageElement.innerText = message;
+        this.validationMessageElement.textContent = message;
         this.validationElement.hidden = false;
         this.inputElement.setAttribute('invalid', 'true');
     }
@@ -59,4 +69,5 @@ __decorate([
 ], PrimerTextFieldElement.prototype, "validationMessageElement", void 0);
 PrimerTextFieldElement = __decorate([
     controller
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 ], PrimerTextFieldElement);

data/lib/primer/forms/primer_text_field.ts

@@ -1,7 +1,9 @@
 import '@github/auto-check-element'
 import {controller, target} from '@github/catalyst'
 
+// eslint-disable-next-line custom-elements/expose-class-on-global
 @controller
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 class PrimerTextFieldElement extends HTMLElement {
   @target inputElement: HTMLInputElement
   @target validationElement: HTMLElement
@@ -15,16 +17,17 @@ class PrimerTextFieldElement extends HTMLElement {
 
     this.inputElement.addEventListener(
       'auto-check-success',
-      () => { this.clearError() },
+      () => {
+        this.clearError()
+      },
       {signal}
     )
 
     this.inputElement.addEventListener(
       'auto-check-error',
-      (event: any) => {
-        event.detail.response.text().then(
-          (error_message: string) => { this.setError(error_message) }
-        )
+      async (event: any) => {
+        const errorMessage = await event.detail.response.text()
+        this.setError(errorMessage)
       },
       {signal}
     )
@@ -34,14 +37,19 @@ class PrimerTextFieldElement extends HTMLElement {
     this.#abortController?.abort()
   }
 
+  clearContents() {
+    this.inputElement.value = ''
+    this.inputElement.focus()
+  }
+
   clearError(): void {
     this.inputElement.removeAttribute('invalid')
     this.validationElement.hidden = true
-    this.validationMessageElement.innerText = ''
+    this.validationMessageElement.textContent = ''
   }
 
   setError(message: string): void {
-    this.validationMessageElement.innerText = message
+    this.validationMessageElement.textContent = message
     this.validationElement.hidden = false
     this.inputElement.setAttribute('invalid', 'true')
   }

data/lib/primer/forms/text_field.html.erb

@@ -1,4 +1,4 @@
-<%= render Primer::ConditionalWrapper.new(condition: @input.auto_check_src, tag: "primer-text-field") do %>
+<primer-text-field>
   <%= render(FormControl.new(input: @input)) do %>
     <%= content_tag(:div, **@field_wrap_arguments) do %>
       <% if @input.leading_visual %>
@@ -10,10 +10,10 @@
         <%= builder.text_field(@input.name, **@input.input_arguments) %>
       <% end %>
       <% if @input.show_clear_button? %>
-        <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear">
+        <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear" data-action="click:primer-text-field#clearContents">
           <%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
         </button>
       <% end %>
     <% end %>
   <% end %>
-<% end %>
+</primer-text-field>

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 1
-      PATCH = 0
+      PATCH = 2
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/yard/component_manifest.rb

@@ -45,6 +45,7 @@ module Primer
         Primer::Beta::Markdown => {},
         Primer::Alpha::Menu => {},
         Primer::Navigation::TabComponent => {},
+        Primer::Alpha::Navigation::Tab => {},
         Primer::Beta::Octicon => {},
         Primer::Beta::Popover => {},
         Primer::Beta::ProgressBar => {},
@@ -68,7 +69,7 @@ module Primer
         # Examples can be seen in the NavList docs
         Primer::Alpha::NavList => { js: true },
         Primer::Alpha::NavList::Item => { js: true, examples: false },
-        Primer::Alpha::NavList::Section => { js: true, examples: false },
+        Primer::Alpha::NavList::Group => { js: true, examples: false },
 
         # ActionList is a base component that should not be used by itself, and thus
         # does not have examples of its own

data/lib/tasks/docs.rake

@@ -64,7 +64,7 @@ namespace :docs do
 
     if components_needing_docs.any?
       puts
-      puts "The following components needs docs. Care to contribute them? #{components_needing_docs.map(&:name).join(', ')}"
+      puts "The following components need docs. Care to contribute them? #{components_needing_docs.map(&:name).join(', ')}"
     end
   end
 

data/previews/primer/alpha/action_list_preview.rb

@@ -17,8 +17,7 @@ module Primer
         render(Primer::Alpha::ActionList.new(
                  role: role,
                  scheme: scheme,
-                 show_dividers: show_dividers,
-                 aria: { label: "Action List" }
+                 show_dividers: show_dividers
                )) do |component|
           component.with_heading(title: "Action List")
           component.with_item(label: "Item one", href: "/") do |item|
@@ -46,8 +45,7 @@ module Primer
         render(Primer::Alpha::ActionList.new(
                  role: role,
                  scheme: scheme,
-                 show_dividers: show_dividers,
-                 aria: { label: "Action List" }
+                 show_dividers: show_dividers
                )) do |component|
           component.with_heading(title: "Action List")
           component.with_item(label: "Item one", href: "/") do |item|
@@ -75,8 +73,7 @@ module Primer
         render(Primer::Alpha::ActionList.new(
                  role: role,
                  scheme: scheme,
-                 show_dividers: show_dividers,
-                 aria: { label: "Action List" }
+                 show_dividers: show_dividers
                )) do |component|
           component.with_heading(title: "Action List")
           component.with_item(label: "Leading SVG visual", href: "/") do |item|
@@ -92,6 +89,39 @@ module Primer
         end
       end
 
+      # @label With manual dividers
+      #
+      # @param role text
+      # @param scheme [Symbol] select [full, inset]
+      # @param show_dividers toggle
+      def with_manual_dividers(
+        role: Primer::Alpha::ActionList::DEFAULT_ROLE,
+        scheme: Primer::Alpha::ActionList::DEFAULT_SCHEME,
+        show_dividers: false
+      )
+        render(Primer::Alpha::ActionList.new(
+          role: role,
+          scheme: scheme,
+          show_dividers: show_dividers
+        )) do |component|
+          component.with_heading(title: "Action List")
+          component.with_item(label: "Item one", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :gear)
+          end
+          component.with_divider
+          component.with_item(label: "Item two", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :star)
+          end
+          component.with_item(label: "Item three", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :heart)
+          end
+          component.with_divider
+          component.with_item(label: "Item four", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :bug)
+          end
+        end
+      end
+
       # @label Divider
       #
       # @param scheme [Symbol] select [subtle, filled]
@@ -113,14 +143,9 @@ module Primer
         list_id: "unique-id",
         subtitle: "This is a subtitle"
       )
-        render_with_template(
-          locals: {
-            scheme: scheme,
-            title: title,
-            list_id: list_id,
-            subtitle: subtitle
-          }
-        )
+        render(Primer::Alpha::ActionList::Heading.new(
+          scheme: scheme, list_id: list_id, title: title, subtitle: subtitle
+        ))
       end
 
       # @label Item [playground]
@@ -143,7 +168,6 @@ module Primer
       # @param private_leading_action_icon [Symbol] octicon
       # @param private_trailing_action_icon [Symbol] octicon
       # @param trailing_action toggle
-      # @param trailing_action_on_hover toggle
       # @param tooltip toggle
       def item(
         label: "Label",
@@ -164,7 +188,6 @@ module Primer
         trailing_visual_text: nil,
         private_leading_action_icon: nil,
         private_trailing_action_icon: nil,
-        trailing_action_on_hover: false,
         trailing_action: false,
         tooltip: false
       )
@@ -203,7 +226,7 @@ module Primer
             item.with_private_trailing_action_icon(icon: private_trailing_action_icon)
           end
 
-          item.with_trailing_action(show_on_hover: trailing_action_on_hover, icon: "plus", "aria-label": "Button tooltip", size: :medium) if trailing_action && trailing_action != :none
+          item.with_trailing_action(icon: "plus", "aria-label": "Button tooltip", size: :medium) if trailing_action && trailing_action != :none
 
           item.description { description } if description
 
@@ -302,18 +325,7 @@ module Primer
                  aria: { label: "List heading" }
                )) do |component|
           component.with_item(label: "Default item", href: "/") do |item|
-            item.with_trailing_action(show_on_hover: false, icon: "plus", "aria-label": "Button tooltip", size: :medium)
-          end
-        end
-      end
-
-      # @label Item [trailing action on hover]
-      def item_trailing_action_hover
-        render(Primer::Alpha::ActionList.new(
-                 aria: { label: "List heading" }
-               )) do |component|
-          component.with_item(label: "Default item", href: "/") do |item|
-            item.with_trailing_action(show_on_hover: true, icon: "plus", "aria-label": "Button tooltip", size: :medium)
+            item.with_trailing_action(icon: "plus", "aria-label": "Button tooltip", size: :medium)
           end
         end
       end

data/previews/primer/alpha/nav_list_preview/trailing_action.html.erb

@@ -0,0 +1,19 @@
+<%= render(Primer::Alpha::NavList.new) do |list| %>
+  <% list.with_group do |group| %>
+    <%= group.with_heading(title: "Shopping list") %>
+    <% group.with_item(label: "Bread", href: "/list/1") do |item| %>
+      <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "bread_button") %>
+    <% end %>
+    <% group.with_item(label: "Cheese", href: "/list/2") do |item| %>
+      <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "cheese_button") %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<script type="text/javascript" data-eval="true">
+  const breadButton = document.querySelector("[name=bread_button]")
+  breadButton.addEventListener("click", () => alert("You selected bread."))
+
+  const cheeseButton = document.querySelector("[name=cheese_button]")
+  cheeseButton.addEventListener("click", () => alert("You selected cheese."))
+</script>

data/previews/primer/alpha/nav_list_preview.rb

@@ -7,22 +7,22 @@ module Primer
       # @label Playground
       def playground
         render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
-          list.with_section(aria: { label: "Repository settings" }) do |section|
-            section.with_heading(title: "Repository settings")
+          list.with_group do |group|
+            group.with_heading(title: "Repository settings")
 
-            section.with_item(label: "General", href: "/general") do |item|
+            group.with_item(label: "General", href: "/general") do |item|
               item.with_leading_visual_icon(icon: :gear)
             end
           end
 
-          list.with_section(aria: { label: "Access" }) do |section|
-            section.with_heading(title: "Access")
+          list.with_group do |group|
+            group.with_heading(title: "Access")
 
-            section.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
+            group.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
               item.with_leading_visual_icon(icon: :people)
             end
 
-            section.with_item(label: "Moderation options", href: "/moderation") do |item|
+            group.with_item(label: "Moderation options") do |item|
               item.with_leading_visual_icon(icon: :"comment-discussion")
 
               item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
@@ -36,22 +36,22 @@ module Primer
       # @label Default
       def default
         render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
-          list.with_section(aria: { label: "Repository settings" }) do |section|
-            section.with_heading(title: "Repository settings")
+          list.with_group do |group|
+            group.with_heading(title: "Repository settings")
 
-            section.with_item(label: "General", href: "/general") do |item|
+            group.with_item(label: "General", href: "/general") do |item|
               item.with_leading_visual_icon(icon: :gear)
             end
           end
 
-          list.with_section(aria: { label: "Access" }) do |section|
-            section.with_heading(title: "Access")
+          list.with_group do |group|
+            group.with_heading(title: "Access")
 
-            section.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
+            group.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
               item.with_leading_visual_icon(icon: :people)
             end
 
-            section.with_item(label: "Moderation options", href: "/moderation") do |item|
+            group.with_item(label: "Moderation options") do |item|
               item.with_leading_visual_icon(icon: :"comment-discussion")
 
               item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
@@ -65,28 +65,17 @@ module Primer
       # @label Show more item
       def show_more_item
         render(Primer::Alpha::NavList.new) do |list|
-          list.with_section(aria: { label: "List of foods" }) do |section|
-            section.with_heading(title: "My favorite foods")
-            section.with_item(label: "Popplers", href: "/foods/popplers")
-            section.with_item(label: "Slurm", href: "/foods/slurm")
-            section.with_show_more_item(label: "Show more", src: "/nav_list_items", pages: 2)
+          list.with_group do |group|
+            group.with_heading(title: "My favorite foods")
+            group.with_item(label: "Popplers", href: "/foods/popplers")
+            group.with_item(label: "Slurm", href: "/foods/slurm")
+            group.with_show_more_item(label: "Show more", src: "/nav_list_items", pages: 2)
           end
         end
       end
 
       # @label Trailing action
       def trailing_action
-        render(Primer::Alpha::NavList.new) do |list|
-          list.with_section(aria: { label: "List of items to buy" }) do |section|
-            section.with_heading(title: "Shopping list")
-            section.with_item(label: "Bread", href: "/list/1") do |item|
-              item.with_trailing_action(show_on_hover: true, icon: :plus, aria: { label: "Button tooltip" })
-            end
-            section.with_item(label: "Cheese", href: "/list/2") do |item|
-              item.with_trailing_action(icon: :plus, aria: { label: "Button tooltip" })
-            end
-          end
-        end
       end
     end
   end

data/previews/primer/alpha/overlay_preview.rb

@@ -20,7 +20,8 @@ module Primer
       # @param header_size [Symbol] select [medium, large]
       # @param button_text [String] text
       # @param body_text [String] text
-      def playground(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, padding: :normal, anchor_align: :center, anchor_offset: :normal, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "")
+      # @param icon [Symbol] octicon
+      def playground(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, padding: :normal, anchor_align: :center, anchor_offset: :normal, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "", icon: :none)
         render(Primer::Alpha::Overlay.new(
                  title: title,
                  subtitle: subtitle,
@@ -31,10 +32,14 @@ module Primer
                  anchor_offset: anchor_offset,
                  anchor_side: anchor_side,
                  allow_out_of_bounds: allow_out_of_bounds,
-                 visually_hide_title: visually_hide_title,
+                 visually_hide_title: visually_hide_title
                )) do |d|
           d.with_header(title: title, size: header_size)
-          d.with_show_button { button_text }
+          if icon.present? && (icon != :none)
+            d.with_show_button(icon: icon, "aria-label": icon.to_s)
+          else
+            d.with_show_button { button_text }
+          end
           d.with_body { body_text }
         end
       end
@@ -64,7 +69,7 @@ module Primer
                  anchor_align: anchor_align,
                  anchor_side: anchor_side,
                  allow_out_of_bounds: allow_out_of_bounds,
-                 visually_hide_title: visually_hide_title,
+                 visually_hide_title: visually_hide_title
                )) do |d|
           d.with_header(title: title, size: header_size)
           d.with_show_button { button_text }
@@ -72,6 +77,31 @@ module Primer
         end
       end
 
+      # @label Menu No Header
+      #
+      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
+      # @param padding [Symbol] select [normal, condensed, none]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [inside_top, inside_bottom, inside_left, inside_right, inside_center, outside_top, outside_bottom, outside_left, outside_right]
+      # @param allow_out_of_bounds [Boolean] toggle
+      #
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def menu_no_header(size: :auto, padding: :normal, anchor_align: :center, anchor_side: :outside_bottom, allow_out_of_bounds: false, button_text: "Show Overlay Menu", body_text: "This is a menu")
+        render(Primer::Alpha::Overlay.new(
+                 title: "Menu",
+                 role: :menu,
+                 size: size,
+                 padding: padding,
+                 anchor_align: anchor_align,
+                 anchor_side: anchor_side,
+                 allow_out_of_bounds: allow_out_of_bounds
+               )) do |d|
+          d.with_show_button { button_text }
+          d.with_body { body_text }
+        end
+      end
+
       # @label Middle Of Page
       #
       # @param title [String] text

data/previews/primer/alpha/tab_nav_preview/with_extra.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) 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: align) do %>
+    <%= render(Primer::Beta::Button.new) { "Extra Button" } %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/tab_nav_preview.rb

@@ -50,6 +50,11 @@ module Primer
           end
         end
       end
+
+      # @param align [Symbol] select [left, right]
+      def with_extra(align: :right)
+        render_with_template(locals: { align: align })
+      end
     end
   end
 end

data/previews/primer/alpha/tab_panels_preview/with_extra.html.erb

@@ -0,0 +1,17 @@
+<%= render(Primer::Alpha::TabPanels.new(label: "label")) do |component| %>
+  <% component.with_tab(selected: true, id: "tab-1") do |tab| %>
+    <% tab.with_panel { "Panel 1" } %>
+    <% tab.with_text { "Tab 1" } %>
+  <% end %>
+  <% component.with_tab(id: "tab-2") do |tab| %>
+    <% tab.with_panel { "Panel 2" } %>
+    <% tab.with_text { "Tab 2" } %>
+  <% end %>
+  <% component.with_tab(id: "tab-3") do |tab| %>
+    <% tab.with_panel { "Panel 3" } %>
+    <% tab.with_text { "Tab 3" } %>
+  <% end %>
+  <% component.with_extra(align: align) do %>
+    <%= render(Primer::Beta::Button.new) { "Extra Button" } %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/tab_panels_preview.rb

@@ -33,6 +33,11 @@ module Primer
           end
         end
       end
+
+      # @param align [Symbol] select [left, right]
+      def with_extra(align: :right)
+        render_with_template(locals: { align: align })
+      end
     end
   end
 end

data/static/arguments.json

@@ -1445,7 +1445,7 @@
   },
   {
     "component": "Navigation::Tab",
-    "status": "alpha",
+    "status": "deprecated",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/navigation/tab/default/",
     "parameters": [
@@ -1493,6 +1493,56 @@
       }
     ]
   },
+  {
+    "component": "Navigation::Tab",
+    "status": "alpha",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/navigation/tab.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/navigation/tab/default/",
+    "parameters": [
+      {
+        "name": "list",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the Tab is an item in a `<ul>` list."
+      },
+      {
+        "name": "selected",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the Tab is selected or not."
+      },
+      {
+        "name": "with_panel",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the Tab has an associated panel."
+      },
+      {
+        "name": "panel_id",
+        "type": "String",
+        "default": "`\"\"`",
+        "description": "Only applies if `with_panel` is `true`. Unique id of panel."
+      },
+      {
+        "name": "icon_classes",
+        "type": "Boolean",
+        "default": "`\"\"`",
+        "description": "Classes that must always be applied to icons."
+      },
+      {
+        "name": "wrapper_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "[System arguments](/system-arguments) to be used in the `<li>` wrapper when the tab is an item in a list."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "Octicon",
     "status": "beta",
@@ -1755,7 +1805,7 @@
   },
   {
     "component": "Truncate",
-    "status": "beta",
+    "status": "deprecated",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/truncate.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/truncate/default/",
     "parameters": [
@@ -2196,10 +2246,10 @@
     ]
   },
   {
-    "component": "NavList::Section",
+    "component": "NavList::Group",
     "status": "alpha",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/section.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/section/default/",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/group.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/group/default/",
     "parameters": [
       {
         "name": "selected_item_id",
@@ -2291,6 +2341,12 @@
         "default": "N/A",
         "description": "Sub list title."
       },
+      {
+        "name": "heading_level",
+        "type": "Integer",
+        "default": "`3`",
+        "description": "Heading level. Level 2 results in an `<h2>` tag, level 3 an `<h3>` tag, etc."
+      },
       {
         "name": "subtitle",
         "type": "String",
@@ -2305,8 +2361,8 @@
       },
       {
         "name": "tag",
-        "type": "Symbol",
-        "default": "`:h3`",
+        "type": "Integer",
+        "default": "N/A",
         "description": "Semantic tag for the heading."
       },
       {
@@ -2374,7 +2430,7 @@
       {
         "name": "role",
         "type": "String",
-        "default": "`:listitem`",
+        "default": "`nil`",
         "description": "ARIA role describing the function of the item."
       },
       {