openproject-primer_view_components 0.80.2 → 0.81.0

data/app/lib/primer/forms/text_field.rb

@@ -80,6 +80,14 @@ module Primer
             Primer::Beta::Truncate.new(**truncate_arguments).with_content(text)
           end
       end
+
+      def character_limit_validation_arguments
+        {
+          class: "FormControl-inlineValidation",
+          id: @input.character_limit_validation_id,
+          hidden: true
+        }
+      end
     end
   end
 end

data/lib/primer/accessibility.rb

@@ -32,6 +32,10 @@ module Primer
         per_component: {
           Primer::Alpha::ToggleSwitch => {
             all_scenarios: %i[button-name]
+          },
+
+          Primer::Alpha::MultiInput => {
+            visually_hide_label: %i[label-title-only]
           }
         }
       }
@@ -46,6 +50,8 @@ module Primer
       end
 
       def axe_rules_to_skip(component: nil, scenario_name: nil, flatten: false)
+        scenario_key = scenario_name.is_a?(String) ? scenario_name.to_sym : scenario_name
+
         to_skip = {
           wont_fix: Set.new(AXE_RULES_TO_SKIP.dig(:wont_fix, :global) || []),
           will_fix: Set.new(AXE_RULES_TO_SKIP.dig(:will_fix, :global) || [])
@@ -55,9 +61,9 @@ module Primer
           to_skip[:wont_fix].merge(AXE_RULES_TO_SKIP.dig(:wont_fix, :per_component, component, :all_scenarios) || [])
           to_skip[:will_fix].merge(AXE_RULES_TO_SKIP.dig(:will_fix, :per_component, component, :all_scenarios) || [])
 
-          if scenario_name
-            to_skip[:wont_fix].merge(AXE_RULES_TO_SKIP.dig(:wont_fix, :per_component, component, scenario_name) || [])
-            to_skip[:will_fix].merge(AXE_RULES_TO_SKIP.dig(:will_fix, :per_component, component, scenario_name) || [])
+          if scenario_key
+            to_skip[:wont_fix].merge(AXE_RULES_TO_SKIP.dig(:wont_fix, :per_component, component, scenario_key) || [])
+            to_skip[:will_fix].merge(AXE_RULES_TO_SKIP.dig(:will_fix, :per_component, component, scenario_key) || [])
           end
         end
 

data/lib/primer/view_components/engine.rb

@@ -48,10 +48,7 @@ module Primer
 
       initializer "primer.forms.helpers" do
         ActiveSupport.on_load :action_controller_base do
-          begin
-            require "primer/form_helper"
-          rescue LoadError
-          end
+          require_relative "../../../app/helpers/primer/form_helper"
 
           helper Primer::FormHelper
 

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 80
-      PATCH = 2
+      MINOR = 81
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/action_menu_preview/submitting_forms.html.erb

@@ -8,7 +8,7 @@
   }) do |item| %>
     <% if params["time"] %>
       <% item.with_description.with_content("Last submitted at #{params["time"]}") %>
-    <% elsif %>
+    <% else %>
       <% item.with_description.with_content("Not yet submitted") %>
     <% end %>
   <% end %>

data/previews/primer/alpha/form_control_preview/playground.html.erb

@@ -8,10 +8,12 @@
 
 <br>
 
+<% field_id = "bar-#{SecureRandom.hex}" %>
+
 <%= form_with(url: "/foo") do |f| %>
-  <%= render(Primer::Alpha::FormControl.new(**system_arguments, label_arguments: { for: "bar" })) do |component| %>
+  <%= render(Primer::Alpha::FormControl.new(**system_arguments, label_arguments: { for: field_id })) do |component| %>
     <% component.with_input do |input_arguments| %>
-      <%= f.text_field(:bar, **input_arguments) %>
+      <%= f.text_field(:bar, id: field_id, **input_arguments) %>
     <% end %>
   <% end %>
 <% end %>

data/previews/primer/alpha/octicon_symbols_preview/playground.html.erb

@@ -1,7 +1,7 @@
 <p style="max-width: 500px">
   Below is an SVG image containing the chosen octicon surrounded by a green circle. The octicon has been emitted
   onto the page as an SVG &lt;symbol&gt; element and included into the SVG you see below with the &lt;use&gt; element.
-  See the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol" target="_blank">MDN docs</a> for
+  See the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol" target="_blank" style="text-decoration: underline">MDN docs</a> for
   more information.
 </p>
 

data/previews/primer/alpha/overlay_preview.rb

@@ -77,31 +77,6 @@ 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/text_area_preview.rb

@@ -16,6 +16,7 @@ module Primer
       # @param disabled toggle
       # @param invalid toggle
       # @param validation_message text
+      # @param character_limit number
       # @param input_width [Symbol] select [auto, xsmall, small, medium, large, xlarge, xxlarge]
       def playground(
         name: "my-text-area",
@@ -28,6 +29,7 @@ module Primer
         disabled: false,
         invalid: false,
         validation_message: nil,
+        character_limit: nil,
         input_width: nil
       )
         system_arguments = {
@@ -41,6 +43,7 @@ module Primer
           disabled: disabled,
           invalid: invalid,
           validation_message: validation_message,
+          character_limit: character_limit,
           input_width: input_width
         }
 
@@ -50,7 +53,7 @@ module Primer
       # @label Default
       # @snapshot
       def default
-        render(Primer::Alpha::TextArea.new(name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-default", name: "my-text-area-default", label: "Tell me about yourself"))
       end
 
       # @!group Options
@@ -58,43 +61,61 @@ module Primer
       # @label With caption
       # @snapshot
       def with_caption
-        render(Primer::Alpha::TextArea.new(caption: "With a caption", name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-with-caption", name: "my-text-area-with-caption", caption: "With a caption", label: "Tell me about yourself"))
       end
 
       # @label Visually hidden label
       # @snapshot
       def visually_hide_label
-        render(Primer::Alpha::TextArea.new(visually_hide_label: true, name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-visually-hide-label", name: "my-text-area-visually-hide-label", visually_hide_label: true, label: "Tell me about yourself"))
       end
 
       # @label Full width
       # @snapshot
       def full_width
-        render(Primer::Alpha::TextArea.new(full_width: true, name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-full-width", name: "my-text-area-full-width", full_width: true, label: "Tell me about yourself"))
       end
 
       # @label Not full width
       # @snapshot
       def not_full_width
-        render(Primer::Alpha::TextArea.new(full_width: false, name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-not-full-width", name: "my-text-area-not-full-width", full_width: false, label: "Tell me about yourself"))
       end
 
       # @label Disabled
       # @snapshot
       def disabled
-        render(Primer::Alpha::TextArea.new(disabled: true, name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-disabled", name: "my-text-area-disabled", disabled: true, label: "Tell me about yourself"))
       end
 
       # @label Invalid
       # @snapshot
       def invalid
-        render(Primer::Alpha::TextArea.new(invalid: true, name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-invalid", name: "my-text-area-invalid", invalid: true, label: "Tell me about yourself"))
       end
 
       # @label With validation message
       # @snapshot
       def with_validation_message
-        render(Primer::Alpha::TextArea.new(validation_message: "An error occurred!", name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-with-validation-message", name: "my-text-area-with-validation-message", validation_message: "An error occurred!", label: "Tell me about yourself"))
+      end
+
+      # @label With character limit
+      # @snapshot interactive
+      def with_character_limit
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-with-character-limit", name: "my-text-area-with-character-limit", character_limit: 10, label: "Tell me about yourself"))
+      end
+
+      # @label With character limit, over limit
+      # @snapshot interactive
+      def with_character_limit_over_limit
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-with-character-limit-over-limit", name: "my-text-area-with-character-limit-over-limit", character_limit: 10, label: "Tell me about yourself", value: "This text is definitely over the limit."))
+      end
+
+      # @label With character limit and caption
+      # @snapshot
+      def with_character_limit_and_caption
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-with-character-limit-and-caption", name: "my-text-area-with-character-limit-and-caption", character_limit: 100, caption: "With a caption.", label: "Tell me about yourself"))
       end
       #
       # @!endgroup

data/previews/primer/alpha/text_field_preview.rb

@@ -15,6 +15,7 @@ module Primer
       # @param size [Symbol] select [small, medium, large]
       # @param show_clear_button toggle
       # @param clear_button_id text
+      # @param clear_button_label text
       # @param full_width toggle
       # @param disabled toggle
       # @param invalid toggle
@@ -24,6 +25,7 @@ module Primer
       # @param monospace toggle
       # @param leading_visual_icon octicon
       # @param leading_spinner toggle
+      # @param character_limit number
       # @param input_width [Symbol] select [auto, xsmall, small, medium, large, xlarge, xxlarge]
       def playground(
         name: "my-text-field",
@@ -35,6 +37,7 @@ module Primer
         size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
         show_clear_button: false,
         clear_button_id: "my-text-field-clear-button",
+        clear_button_label: nil,
         full_width: true,
         disabled: false,
         invalid: false,
@@ -44,6 +47,7 @@ module Primer
         monospace: false,
         leading_visual_icon: nil,
         leading_spinner: false,
+        character_limit: nil,
         input_width: nil
       )
         system_arguments = {
@@ -56,6 +60,7 @@ module Primer
           size: size,
           show_clear_button: show_clear_button,
           clear_button_id: clear_button_id,
+          clear_button_label: clear_button_label,
           full_width: full_width,
           disabled: disabled,
           invalid: invalid,
@@ -64,6 +69,7 @@ module Primer
           inset: inset,
           monospace: monospace,
           leading_spinner: leading_spinner,
+          character_limit: character_limit,
           input_width: input_width
         }
 
@@ -133,6 +139,12 @@ module Primer
         render(Primer::Alpha::TextField.new(show_clear_button: true, name: "my-text-field-3", label: "My text field"))
       end
 
+      # @label Show clear button with custom label
+      # @snapshot
+      def show_clear_button_with_custom_label
+        render(Primer::Alpha::TextField.new(show_clear_button: true, clear_button_label: "Effacer", name: "my-text-field-3-custom", label: "Mon champ de texte"))
+      end
+
       # @label Full width
       # @snapshot
       def full_width
@@ -216,6 +228,24 @@ module Primer
       def with_validation_message
         render(Primer::Alpha::TextField.new(validation_message: "An error occurred!", name: "my-text-field-17", label: "My text field"))
       end
+
+      # @label With character limit
+      # @snapshot interactive
+      def with_character_limit
+        render(Primer::Alpha::TextField.new(character_limit: 10, name: "my-text-field-18", label: "Username"))
+      end
+
+      # @label With character limit, over limit
+      # @snapshot interactive
+      def with_character_limit_over_limit
+        render(Primer::Alpha::TextField.new(character_limit: 10, name: "my-text-field-19", label: "Tell me about yourself", value: "This text is definitely over the limit."))
+      end
+
+      # @label With character limit and caption
+      # @snapshot
+      def with_character_limit_and_caption
+        render(Primer::Alpha::TextField.new(character_limit: 20, caption: "Choose a unique username.", name: "my-text-field-20", label: "Username"))
+      end
       #
       # @!endgroup
 
@@ -223,24 +253,24 @@ module Primer
       #
       # @label Auto check request ok
       def with_auto_check_ok
-        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.primer_view_components.example_check_ok_path, name: "my-text-field-18", label: "My text field"))
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.primer_view_components.example_check_ok_path, name: "my-text-field-21", label: "My text field"))
       end
 
       # @label Auto check request accepted
       def with_auto_check_accepted
-        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.primer_view_components.example_check_accepted_path, name: "my-text-field-19", label: "My text field"))
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.primer_view_components.example_check_accepted_path, name: "my-text-field-22", label: "My text field"))
       end
 
       # @label Auto check request error
       def with_auto_check_error
-        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.primer_view_components.example_check_error_path, name: "my-text-field-20", label: "My text field"))
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.primer_view_components.example_check_error_path, name: "my-text-field-23", label: "My text field"))
       end
       #
       # @!endgroup
 
       # @label With data target attribute
       def with_data_target
-        render(Primer::Alpha::TextField.new(name: "my-text-field", label: "My text field", data: { target: "custom-component.inputElement" }))
+        render(Primer::Alpha::TextField.new(name: "my-text-field-24", label: "My text field", data: { target: "custom-component.inputElement" }))
       end
       #
       # @!endgroup

data/previews/primer/alpha/toggle_switch_preview.rb

@@ -9,67 +9,67 @@ module Primer
       include ActionView::Helpers::FormTagHelper
 
       def playground
-        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, "aria-label": "Toggle Switch"))
       end
 
       # @snapshot
       def default
-        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, "aria-label": "Default Toggle Switch"))
       end
 
       # @snapshot
       def checked
-        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, checked: true))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, checked: true, "aria-label": "Checked Toggle Switch"))
       end
 
       # @snapshot
       def disabled
-        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, enabled: false))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, enabled: false, "aria-label": "Disabled Toggle Switch"))
       end
 
       # @snapshot
       def checked_disabled
-        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, checked: true, enabled: false))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, checked: true, enabled: false, "aria-label": "Checked Disabled Toggle Switch"))
       end
 
       # @snapshot
       def small
-        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, size: :small))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, size: :small, "aria-label": "Small Toggle Switch"))
       end
 
       # @snapshot
       def with_status_label_position_end
-        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, status_label_position: :end))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, status_label_position: :end, "aria-label": "Toggle Switch with Status"))
       end
 
       # @snapshot
       def with_a_bad_src
-        render(Primer::Alpha::ToggleSwitch.new(src: "/foo"))
+        render(Primer::Alpha::ToggleSwitch.new(src: "/foo", "aria-label": "Toggle Switch"))
       end
 
       def with_no_src
-        render(Primer::Alpha::ToggleSwitch.new)
+        render(Primer::Alpha::ToggleSwitch.new("aria-label": "Toggle Switch"))
       end
 
       def with_csrf_token
-        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, "aria-label": "Toggle Switch"))
       end
 
       def with_bad_csrf_token
-        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, csrf_token: "i_am_a_criminal"))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, csrf_token: "i_am_a_criminal", "aria-label": "Toggle Switch"))
       end
 
       def with_turbo
-        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, turbo: true))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, turbo: true, "aria-label": "Toggle Switch"))
       end
 
       def with_autofocus
-        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, autofocus: true))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, autofocus: true, "aria-label": "Toggle Switch"))
       end
     end
 
     def with_custom_status_label
-      render Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, on_label: "Enabled", off_label: "Disabled")
+      render Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, on_label: "Enabled", off_label: "Disabled", "aria-label": "Toggle Switch")
     end
   end
 end

data/previews/primer/alpha/tree_view_preview/loading_failure.html.erb

@@ -29,8 +29,60 @@
     const includeFragment = subject.querySelector('tree-view-include-fragment')
     if (!includeFragment) return
 
-    includeFragment.addEventListener('loadend', (event) => {
+    function retryButton() {
+      return subject.querySelector("[data-target='tree-view-sub-tree-node.retryButton']")
+    }
+
+    function focusTreeItem() {
+      const treeItem = subject.querySelector("[role='treeitem']")
+      if (treeItem) treeItem.focus()
+    }
+
+    function makeRetryTabbable() {
+      const retry = retryButton()
+      if (!retry) return
+      // Remove tabindex="-1" so the button can be reached by keyboard.
+      retry.removeAttribute('tabindex')
+    }
+
+    function addRetryFocusHandler() {
+      const retry = retryButton()
+      if (!retry) return
+
+      if (retry.dataset.focusHandlerAttached === "true") return
+      retry.dataset.focusHandlerAttached = "true"
+
+      retry.addEventListener('click', () => {
+        focusTreeItem()
+      })
+    }
+
+    // When the failure UI loads, ensure Retry is tabbable
+    includeFragment.addEventListener('loadend', (_event) => {
+      makeRetryTabbable()
+      addRetryFocusHandler()
       subject.setAttribute('data-ready', 'true')
     })
+
+    // If include-fragment swaps in new markup on re-render, re-apply tabindex removal.
+    includeFragment.addEventListener('include-fragment-replaced', () => {
+      makeRetryTabbable()
+      addRetryFocusHandler()
+    })
+
+    // If Retry exists and the user presses Tab while focused inside this TreeView,
+    // redirect focus to Retry so it is reachable without requiring a mouse click.
+    subject.addEventListener('keydown', (event) => {
+      if (event.key !== 'Tab' || event.shiftKey) return
+      const active = document.activeElement
+      if (!(active instanceof HTMLElement)) return
+      if (!subject.contains(active)) return
+      if (active.getAttribute('role') !== 'treeitem') return
+      const retry = retryButton()
+      if (!retry) return
+      makeRetryTabbable()
+      event.preventDefault()
+      retry.focus()
+    })
   })
 </script>

data/previews/primer/alpha/tree_view_preview/stress_test.html.erb

@@ -0,0 +1,43 @@
+<div style="max-width: 400px">
+  <%= render(Primer::Alpha::TreeView.new) do |tree_view| %>
+    <% (1..100).each do %>
+      <% tree_view.with_sub_tree(label: "src", expanded: expanded, disabled: disabled, select_variant: select_variant, select_strategy: select_strategy) do |sub_tree| %>
+        <% sub_tree.with_leading_visual_icons(label: "Foobar") do |icons| %>
+          <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
+          <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+        <% end %>
+
+        <% sub_tree.with_sub_tree(label: "src", expanded: expanded, disabled: disabled, select_variant: select_variant, select_strategy: select_strategy) do |sub_tree2| %>
+          <% sub_tree2.with_leading_visual_icons(label: "Foobar") do |icons| %>
+            <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
+            <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+          <% end %>
+
+          <% sub_tree2.with_trailing_visual_icon(icon: :"diff-modified") unless select_variant == :single %>
+
+          <% sub_tree2.with_leaf(label: "button.rb", disabled: disabled, select_variant: select_variant) do |item| %>
+            <% item.with_leading_visual_icon(icon: :file) %>
+          <% end %>
+        <% end %>
+
+        <% tree_view.with_leaf(label: "action_menu.rb", disabled: disabled, select_variant: select_variant) do |item| %>
+          <% item.with_leading_visual_icon(icon: :file) %>
+        <% end %>
+
+        <% sub_tree.with_trailing_visual_icon(icon: :"diff-modified") unless select_variant == :single %>
+
+        <% sub_tree.with_leaf(label: "button.rb", disabled: disabled, select_variant: select_variant) do |item| %>
+          <% item.with_leading_visual_icon(icon: :file) %>
+        <% end %>
+
+        <% sub_tree.with_leaf(label: "icon_button.rb", current: true, disabled: disabled, select_variant: select_variant) do |item| %>
+          <% item.with_leading_visual_icon(icon: :file) %>
+        <% end %>
+      <% end %>
+
+      <% tree_view.with_leaf(label: "action_menu.rb", disabled: disabled, select_variant: select_variant) do |item| %>
+        <% item.with_leading_visual_icon(icon: :file) %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/previews/primer/beta/button_preview/all_schemes.html.erb

@@ -1,4 +1,4 @@
-<div style="display: flex; gap: 1rem;">
+<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
   <%= render(Primer::Beta::Button.new(
       scheme: :secondary,
       size: :medium,

data/previews/primer/beta/button_preview/invisible_all_visuals.html.erb

@@ -1,4 +1,4 @@
-<div style="display: flex; gap: 1rem;">
+<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
   <%= render(Primer::Beta::Button.new(
       scheme: :invisible,
       size: :medium,

data/previews/primer/beta/button_preview/summary_as_button.html.erb

@@ -1,4 +1,12 @@
-<details>
+<span
+  id="button-summary-live"
+  class="sr-only"
+  role="status"
+  aria-live="polite"
+  aria-atomic="true"></span>
+
+<details
+  ontoggle="document.getElementById('button-summary-live').textContent = this.open ? 'A wrapping `details` tag is required when using the button with the `:summary` tag' : ''">
   <%= render(Primer::Beta::Button.new(
       scheme: scheme,
       size: size,
@@ -9,5 +17,6 @@
   )) do %>
     Button
   <% end %>
+
   <p>A wrapping `details` tag is required when using the button with the `:summary` tag</p>
 </details>

data/previews/primer/forms_preview/text_area_with_character_limit_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(TextAreaWithCharacterLimitForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview/text_field_with_character_limit_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(TextFieldWithCharacterLimitForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview.rb

@@ -72,5 +72,11 @@ module Primer
 
     # @snapshot
     def auto_complete_form; end
+
+    # @snapshot
+    def text_area_with_character_limit_form; end
+
+    # @snapshot
+    def text_field_with_character_limit_form; end
   end
 end

data/static/arguments.json

@@ -2721,7 +2721,7 @@
         "name": "gap",
         "type": "Symbol",
         "default": "`GapArg::DEFAULT`",
-        "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:normal`, or `:spacious`."
+        "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
       },
       {
         "name": "direction",
@@ -2951,6 +2951,12 @@
         "default": "N/A",
         "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
+      {
+        "name": "character_limit",
+        "type": "Number",
+        "default": "N/A",
+        "description": "Optional character limit for the input. If provided, a character counter will be displayed below the input."
+      },
       {
         "name": "name",
         "type": "String",
@@ -3087,6 +3093,12 @@
         "default": "N/A",
         "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
+      {
+        "name": "character_limit",
+        "type": "Number",
+        "default": "N/A",
+        "description": "Optional character limit for the input. If provided, a character counter will be displayed below the input."
+      },
       {
         "name": "name",
         "type": "String",

data/static/form_previews.json

@@ -117,6 +117,16 @@
         "preview_path": "primer/forms/auto_complete_form",
         "name": "auto_complete_form",
         "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/text_area_with_character_limit_form",
+        "name": "text_area_with_character_limit_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/text_field_with_character_limit_form",
+        "name": "text_field_with_character_limit_form",
+        "snapshot": "true"
       }
     ]
   }