From 9ce7d1364a26fe777231fc35e192efec61e3a9c7 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 3 Dec 2025 15:19:37 +0000
Subject: [PATCH 01/33] Initial work to add character counts to TextField and
 TextArea components

---
 .erblint-rubocop20251203-37257-3idmxl         | 13 +++
 app/components/primer/alpha/form_control.rb   | 10 +-
 app/components/primer/alpha/text_field.pcss   |  6 ++
 app/components/primer/primer.ts               |  1 +
 .../text_area_with_character_limit_form.rb    | 13 +++
 .../text_field_with_character_limit_form.rb   | 13 +++
 app/lib/primer/forms/caption.html.erb         | 23 +++--
 app/lib/primer/forms/dsl/input.rb             |  4 +
 app/lib/primer/forms/dsl/text_area_input.rb   | 13 ++-
 app/lib/primer/forms/dsl/text_field_input.rb  | 11 ++-
 app/lib/primer/forms/primer_text_area.ts      | 97 +++++++++++++++++++
 app/lib/primer/forms/primer_text_field.ts     | 78 ++++++++++++++-
 app/lib/primer/forms/text_area.html.erb       | 22 ++++-
 app/lib/primer/forms/text_area.rb             |  7 ++
 app/lib/primer/forms/text_field.html.erb      |  6 ++
 app/lib/primer/forms/text_field.rb            |  7 ++
 package-lock.json                             | 62 ++++++++++--
 previews/primer/alpha/text_area_preview.rb    | 19 +++-
 previews/primer/alpha/text_field_preview.rb   | 19 +++-
 previews/primer/forms_preview.rb              |  6 ++
 ...xt_area_with_character_limit_form.html.erb |  3 +
 ...t_field_with_character_limit_form.html.erb |  3 +
 test/lib/primer/forms/text_area_input_test.rb | 34 +++++++
 .../lib/primer/forms/text_field_input_test.rb | 34 +++++++
 24 files changed, 474 insertions(+), 30 deletions(-)
 create mode 100644 .erblint-rubocop20251203-37257-3idmxl
 create mode 100644 app/forms/text_area_with_character_limit_form.rb
 create mode 100644 app/forms/text_field_with_character_limit_form.rb
 create mode 100644 app/lib/primer/forms/primer_text_area.ts
 create mode 100644 previews/primer/forms_preview/text_area_with_character_limit_form.html.erb
 create mode 100644 previews/primer/forms_preview/text_field_with_character_limit_form.html.erb

diff --git a/.erblint-rubocop20251203-37257-3idmxl b/.erblint-rubocop20251203-37257-3idmxl
new file mode 100644
index 0000000000..5977a9e86d
--- /dev/null
+++ b/.erblint-rubocop20251203-37257-3idmxl
@@ -0,0 +1,13 @@
+---
+inherit_from:
+- lib/rubocop/config/default.yml
+AllCops:
+  DisabledByDefault: true
+Primer/DeprecatedComponents:
+  Enabled: false
+  Exclude:
+  - app/components/primer/layout_component.html.erb
+Migrations/IconButtonComponent:
+  Enabled: true
+Migrations/TruncateComponent:
+  Enabled: true
diff --git a/app/components/primer/alpha/form_control.rb b/app/components/primer/alpha/form_control.rb
index 0433f9c1f9..7758b96f36 100644
--- a/app/components/primer/alpha/form_control.rb
+++ b/app/components/primer/alpha/form_control.rb
@@ -48,14 +48,16 @@ class FormControl < Primer::Component
       # @param visually_hide_label [Boolean] When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers.
       # @param full_width [Boolean] When set to `true`, the form control will take up all the horizontal space allowed by its container.
       # @param label_arguments [Hash] HTML attributes to attach to the `<label>` element that labels the input.
+      # @param character_limit [Number] Optional character limit for the input. If provided, a character counter will be displayed below the input.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(label:, caption: nil, validation_message: nil, required: false, visually_hide_label: false, full_width: false, label_arguments: {}, **system_arguments)
+      def initialize(label:, caption: nil, validation_message: nil, required: false, visually_hide_label: false, full_width: false, label_arguments: {}, character_limit: nil, **system_arguments)
         @label = label
         @init_caption = caption
         @validation_message = validation_message
         @required = required
         @visually_hide_label = visually_hide_label
         @full_width = full_width
+        @character_limit = character_limit
         @label_arguments = label_arguments
         @system_arguments = system_arguments
 
@@ -108,6 +110,12 @@ def full_width?
         @full_width
       end
 
+      # Returns the character limit for the input, if set.
+      # @returns [Number, nil]
+      def character_limit?
+        @character_limit
+      end
+
       private
 
       def before_render
diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
index 4cb6848c65..be148c99c0 100644
--- a/app/components/primer/alpha/text_field.pcss
+++ b/app/components/primer/alpha/text_field.pcss
@@ -34,6 +34,12 @@
   color: var(--fgColor-muted);
 }
 
+/* caption with character limit */
+.FormControl-caption--characterLimit {
+  margin-bottom: var(--base-size-4);
+}
+
+
 /* inline validation message */
 .FormControl-inlineValidation {
   display: flex;
diff --git a/app/components/primer/primer.ts b/app/components/primer/primer.ts
index e93e234afe..2ff0373455 100644
--- a/app/components/primer/primer.ts
+++ b/app/components/primer/primer.ts
@@ -22,6 +22,7 @@ import './beta/relative_time'
 import './alpha/tab_container'
 import '../../lib/primer/forms/primer_multi_input'
 import '../../lib/primer/forms/primer_text_field'
+import '../../lib/primer/forms/primer_text_area'
 import '../../lib/primer/forms/toggle_switch_input'
 import './alpha/action_menu/action_menu_element'
 import './alpha/select_panel_element'
diff --git a/app/forms/text_area_with_character_limit_form.rb b/app/forms/text_area_with_character_limit_form.rb
new file mode 100644
index 0000000000..32a46b9a0a
--- /dev/null
+++ b/app/forms/text_area_with_character_limit_form.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class TextAreaWithCharacterLimitForm < ApplicationForm
+  form do |my_form|
+    my_form.text_area(
+      name: :bio,
+      label: "Bio",
+      caption: "Tell us about yourself",
+      character_limit: 100
+    )
+  end
+end
diff --git a/app/forms/text_field_with_character_limit_form.rb b/app/forms/text_field_with_character_limit_form.rb
new file mode 100644
index 0000000000..28c41b47fe
--- /dev/null
+++ b/app/forms/text_field_with_character_limit_form.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class TextFieldWithCharacterLimitForm < ApplicationForm
+  form do |my_form|
+    my_form.text_field(
+      name: :username,
+      label: "Username",
+      caption: "Choose a unique username",
+      character_limit: 20
+    )
+  end
+end
diff --git a/app/lib/primer/forms/caption.html.erb b/app/lib/primer/forms/caption.html.erb
index 73e788d668..b963db9dc1 100644
--- a/app/lib/primer/forms/caption.html.erb
+++ b/app/lib/primer/forms/caption.html.erb
@@ -1,10 +1,15 @@
-<% if @input.caption? && !@input.caption.blank? %>
-  <span class="FormControl-caption" id="<%= @input.caption_id %>"><%= @input.caption %></span>
-<% elsif caption_template? %>
-  <% caption_template = render_caption_template %>
-  <% unless caption_template.blank? %>
-    <span class="FormControl-caption" id="<%= @input.caption_id %>">
-      <%= caption_template %>
-    </span>
-  <% end %>
+<% if @input.caption? || caption_template? || @input.character_limit? %>
+  <span class="FormControl-caption" id="<%= @input.caption_id %>">
+    <% if @input.character_limit? %>
+      <span class="sr-only" id="<%= @input.character_limit_sr_id %>" aria-live="polite" aria-atomic="true"></span>
+      <div class="FormControl-caption--characterLimit" data-target="primer-text-area.characterLimitElement" data-max-length="<%= @input.character_limit %>" data-sr-target="<%= @input.character_limit_sr_id %>">
+        <%= @input.character_limit %> characters remaining.
+      </div>
+    <% end %>
+    <% if @input.caption? && !@input.caption.blank? %>
+      <%= @input.caption %>
+    <% elsif caption_template? %>
+      <%= render_caption_template %>
+    <% end %>
+  </span>
 <% end %>
diff --git a/app/lib/primer/forms/dsl/input.rb b/app/lib/primer/forms/dsl/input.rb
index 14203a8364..ade0ae6400 100644
--- a/app/lib/primer/forms/dsl/input.rb
+++ b/app/lib/primer/forms/dsl/input.rb
@@ -196,6 +196,10 @@ def render_caption_template
           form.render_caption_template(caption_template_name)
         end
 
+        def character_limit?
+          false
+        end
+
         def valid?
           supports_validation? && validation_messages.empty? && !@invalid
         end
diff --git a/app/lib/primer/forms/dsl/text_area_input.rb b/app/lib/primer/forms/dsl/text_area_input.rb
index d0495e8bd7..e816f707fb 100644
--- a/app/lib/primer/forms/dsl/text_area_input.rb
+++ b/app/lib/primer/forms/dsl/text_area_input.rb
@@ -5,13 +5,16 @@ module Forms
     module Dsl
       # :nodoc:
       class TextAreaInput < Input
-        attr_reader :name, :label
+        attr_reader :name, :label, :character_limit
 
         def initialize(name:, label:, **system_arguments)
           @name = name
           @label = label
+          @character_limit = system_arguments.delete(:character_limit)
 
           super(**system_arguments)
+
+          add_input_data(:target, "primer-text-area.inputElement")
         end
 
         def to_component
@@ -22,6 +25,14 @@ def type
           :text_area
         end
 
+        def character_limit?
+          @character_limit.present?
+        end
+
+        def character_limit_sr_id
+          @character_limit_sr_id ||= "#{name}-character-count-sr-#{SecureRandom.hex(4)}"
+        end
+
         # :nocov:
         def focusable?
           true
diff --git a/app/lib/primer/forms/dsl/text_field_input.rb b/app/lib/primer/forms/dsl/text_field_input.rb
index 9558f63006..27b55810e5 100644
--- a/app/lib/primer/forms/dsl/text_field_input.rb
+++ b/app/lib/primer/forms/dsl/text_field_input.rb
@@ -6,7 +6,7 @@ class TextFieldInput < Input
         attr_reader(
           *%i[
             name label show_clear_button leading_visual leading_spinner trailing_visual clear_button_id
-            visually_hide_label inset monospace field_wrap_classes auto_check_src
+            visually_hide_label inset monospace field_wrap_classes auto_check_src character_limit
           ]
         )
 
@@ -24,6 +24,7 @@ def initialize(name:, label:, **system_arguments)
           @inset = system_arguments.delete(:inset)
           @monospace = system_arguments.delete(:monospace)
           @auto_check_src = system_arguments.delete(:auto_check_src)
+          @character_limit = system_arguments.delete(:character_limit)
 
           if @leading_visual
             @leading_visual[:classes] = class_names(
@@ -67,6 +68,14 @@ def focusable?
           true
         end
 
+        def character_limit?
+          @character_limit.present?
+        end
+
+        def character_limit_sr_id
+          @character_limit_sr_id ||= "#{name}-character-count-sr-#{SecureRandom.hex(4)}"
+        end
+
         def validation_arguments
           if auto_check_src.present?
             super.merge(
diff --git a/app/lib/primer/forms/primer_text_area.ts b/app/lib/primer/forms/primer_text_area.ts
new file mode 100644
index 0000000000..fdcdddeda0
--- /dev/null
+++ b/app/lib/primer/forms/primer_text_area.ts
@@ -0,0 +1,97 @@
+import {controller, target} from '@github/catalyst'
+
+@controller
+export class PrimerTextAreaElement extends HTMLElement {
+  @target inputElement: HTMLTextAreaElement
+  @target characterLimitElement: HTMLElement
+  @target validationElement: HTMLElement
+  @target validationMessageElement: HTMLElement
+
+  #announceTimeout: number | null = null
+
+  connectedCallback(): void {
+    this.inputElement.addEventListener('input', () => this.#updateCharacterCount())
+    // Initialize the count on load
+    this.#updateCharacterCount()
+  }
+
+  disconnectedCallback(): void {
+    if (this.#announceTimeout) {
+      clearTimeout(this.#announceTimeout)
+    }
+  }
+
+  #updateCharacterCount(): void {
+    if (!this.characterLimitElement) return
+
+    const maxLength = parseInt(this.characterLimitElement.getAttribute('data-max-length') || '0', 10)
+    if (maxLength === 0) return
+
+    const currentLength = this.inputElement.value.length
+    const remaining = maxLength - currentLength
+    let message = ''
+
+    if (remaining >= 0) {
+      // Still under or at the limit
+      const word = remaining === 1 ? 'character' : 'characters'
+      message = `${remaining} ${word} remaining.`
+      this.characterLimitElement.textContent = message
+      this.#clearError()
+    } else {
+      // Over the limit
+      const over = Math.abs(remaining)
+      const word = over === 1 ? 'character' : 'characters'
+      message = `${over} ${word} over.`
+      this.characterLimitElement.textContent = message
+      this.#setError()
+    }
+
+    // Debounce the aria-live announcement
+    this.#announceToScreenReader(message)
+  }
+
+  #announceToScreenReader(message: string): void {
+    // Clear any existing timeout
+    if (this.#announceTimeout) {
+      clearTimeout(this.#announceTimeout)
+    }
+
+    // Set a new timeout to announce after 150ms
+    this.#announceTimeout = window.setTimeout(() => {
+      const srTargetId = this.characterLimitElement?.getAttribute('data-sr-target')
+      if (srTargetId) {
+        const srElement = document.getElementById(srTargetId)
+        if (srElement) {
+          srElement.textContent = message
+        }
+      }
+    }, 150)
+  }
+
+  #setError(): void {
+    if (!this.validationElement || !this.validationMessageElement) return
+
+    this.inputElement.setAttribute('invalid', 'true')
+    this.validationMessageElement.textContent = "You've exceeded the character limit"
+    this.validationElement.hidden = false
+  }
+
+  #clearError(): void {
+    if (!this.validationElement || !this.validationMessageElement) return
+
+    this.inputElement.removeAttribute('invalid')
+    this.validationMessageElement.textContent = ''
+    this.validationElement.hidden = true
+  }
+}
+
+declare global {
+  interface Window {
+    PrimerTextAreaElement: typeof PrimerTextAreaElement
+  }
+}
+
+if (!window.customElements.get('primer-text-area')) {
+  Object.assign(window, {PrimerTextAreaElement})
+  window.customElements.define('primer-text-area', PrimerTextAreaElement)
+}
diff --git a/app/lib/primer/forms/primer_text_field.ts b/app/lib/primer/forms/primer_text_field.ts
index bce11220e6..5f2e46445e 100644
--- a/app/lib/primer/forms/primer_text_field.ts
+++ b/app/lib/primer/forms/primer_text_field.ts
@@ -20,8 +20,12 @@ export class PrimerTextFieldElement extends HTMLElement {
   @target validationErrorIcon: HTMLElement
   @target leadingVisual: HTMLElement
   @target leadingSpinner: HTMLElement
+  @target characterLimitElement: HTMLElement
+  @target characterLimitValidationElement: HTMLElement
+  @target characterLimitValidationMessageElement: HTMLElement
 
   #abortController: AbortController | null
+  #announceTimeout: number | null = null
 
   connectedCallback(): void {
     this.#abortController?.abort()
@@ -48,16 +52,25 @@ export class PrimerTextFieldElement extends HTMLElement {
       },
       {signal},
     )
+
+    // Set up character limit tracking if present
+    if (this.characterLimitElement) {
+      this.inputElement.addEventListener('input', () => this.#updateCharacterCount(), {signal})
+      this.#updateCharacterCount()
+    }
   }
 
   disconnectedCallback() {
     this.#abortController?.abort()
+    if (this.#announceTimeout) {
+      clearTimeout(this.#announceTimeout)
+    }
   }
 
   clearContents() {
     this.inputElement.value = ''
     this.inputElement.focus()
-    this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: false }))
+    this.inputElement.dispatchEvent(new Event('input', {bubbles: true, cancelable: false}))
   }
 
   clearError(): void {
@@ -106,4 +119,67 @@ export class PrimerTextFieldElement extends HTMLElement {
     this.leadingSpinner?.setAttribute('hidden', '')
     this.leadingVisual?.removeAttribute('hidden')
   }
+
+  #updateCharacterCount(): void {
+    if (!this.characterLimitElement) return
+
+    const maxLength = parseInt(this.characterLimitElement.getAttribute('data-max-length') || '0', 10)
+    if (maxLength === 0) return
+
+    const currentLength = this.inputElement.value.length
+    const remaining = maxLength - currentLength
+    let message = ''
+
+    if (remaining >= 0) {
+      // Still under or at the limit
+      const word = remaining === 1 ? 'character' : 'characters'
+      message = `${remaining} ${word} remaining.`
+      this.characterLimitElement.textContent = message
+      this.#clearCharacterLimitError()
+    } else {
+      // Over the limit
+      const over = Math.abs(remaining)
+      const word = over === 1 ? 'character' : 'characters'
+      message = `${over} ${word} over.`
+      this.characterLimitElement.textContent = message
+      this.#setCharacterLimitError()
+    }
+
+    // Debounce the aria-live announcement
+    this.#announceToScreenReader(message)
+  }
+
+  #announceToScreenReader(message: string): void {
+    // Clear any existing timeout
+    if (this.#announceTimeout) {
+      clearTimeout(this.#announceTimeout)
+    }
+
+    // Set a new timeout to announce after 150ms
+    this.#announceTimeout = window.setTimeout(() => {
+      const srTargetId = this.characterLimitElement?.getAttribute('data-sr-target')
+      if (srTargetId) {
+        const srElement = document.getElementById(srTargetId)
+        if (srElement) {
+          srElement.textContent = message
+        }
+      }
+    }, 150)
+  }
+
+  #setCharacterLimitError(): void {
+    if (!this.characterLimitValidationElement || !this.characterLimitValidationMessageElement) return
+
+    this.inputElement.setAttribute('invalid', 'true')
+    this.characterLimitValidationMessageElement.textContent = "You've exceeded the character limit"
+    this.characterLimitValidationElement.hidden = false
+  }
+
+  #clearCharacterLimitError(): void {
+    if (!this.characterLimitValidationElement || !this.characterLimitValidationMessageElement) return
+
+    this.inputElement.removeAttribute('invalid')
+    this.characterLimitValidationMessageElement.textContent = ''
+    this.characterLimitValidationElement.hidden = true
+  }
 }
diff --git a/app/lib/primer/forms/text_area.html.erb b/app/lib/primer/forms/text_area.html.erb
index 2e7bfe1fa3..a8bbaa7992 100644
--- a/app/lib/primer/forms/text_area.html.erb
+++ b/app/lib/primer/forms/text_area.html.erb
@@ -1,5 +1,21 @@
-<%= render(FormControl.new(input: @input)) do %>
-  <%= content_tag(:div, **@field_wrap_arguments) do %>
-    <%= builder.text_area(@input.name, **@input.input_arguments) %>
+<% if @input.character_limit? %>
+  <primer-text-area>
+    <%= render(FormControl.new(input: @input)) do %>
+      <%= content_tag(:div, **@field_wrap_arguments) do %>
+        <%= builder.text_area(@input.name, **@input.input_arguments) %>
+      <% end %>
+      <% if @input.character_limit? %>
+        <%= content_tag(:div, **character_limit_validation_arguments, data: { target: "primer-text-area.validationElement" }) do %>
+          <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+          <span data-target="primer-text-area.validationMessageElement"></span>
+        <% end %>
+      <% end %>
+    <% end %>
+  </primer-text-area>
+<% else %>
+  <%= render(FormControl.new(input: @input)) do %>
+    <%= content_tag(:div, **@field_wrap_arguments) do %>
+      <%= builder.text_area(@input.name, **@input.input_arguments) %>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/app/lib/primer/forms/text_area.rb b/app/lib/primer/forms/text_area.rb
index 2f3f0e715a..6c1bccdd27 100644
--- a/app/lib/primer/forms/text_area.rb
+++ b/app/lib/primer/forms/text_area.rb
@@ -15,6 +15,13 @@ def initialize(input:)
           hidden: @input.hidden?
         }
       end
+
+      def character_limit_validation_arguments
+        {
+          class: "FormControl-inlineValidation",
+          hidden: true
+        }
+      end
     end
   end
 end
diff --git a/app/lib/primer/forms/text_field.html.erb b/app/lib/primer/forms/text_field.html.erb
index 562f01098b..b9a061303b 100644
--- a/app/lib/primer/forms/text_field.html.erb
+++ b/app/lib/primer/forms/text_field.html.erb
@@ -23,4 +23,10 @@
       </div>
     <% end %>
   <% end %>
+  <% if @input.character_limit? %>
+    <%= content_tag(:div, **character_limit_validation_arguments, data: { target: "primer-text-field.characterLimitValidationElement" }) do %>
+      <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+      <span data-target="primer-text-field.characterLimitValidationMessageElement"></span>
+    <% end %>
+  <% end %>
 <% end %>
diff --git a/app/lib/primer/forms/text_field.rb b/app/lib/primer/forms/text_field.rb
index 0e715148d0..ac2992a2b6 100644
--- a/app/lib/primer/forms/text_field.rb
+++ b/app/lib/primer/forms/text_field.rb
@@ -77,6 +77,13 @@ def trailing_visual_component
             Primer::Beta::Truncate.new(**truncate_arguments).with_content(text)
           end
       end
+
+      def character_limit_validation_arguments
+        {
+          class: "FormControl-inlineValidation",
+          hidden: true
+        }
+      end
     end
   end
 end
diff --git a/package-lock.json b/package-lock.json
index a19ada9905..6f0d01348d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -817,6 +817,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -840,6 +841,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -950,6 +952,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -1376,6 +1379,7 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -3616,7 +3620,8 @@
       "version": "20.3.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
       "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
@@ -3674,6 +3679,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.45.0.tgz",
       "integrity": "sha512-TGf22kon8KW+DeKaUmOibKWktRY8b2NSAZNdtWh798COm1NWx8+xJ6iFBtk3IvLdv6+LGLJLRlyhrhEDZWargQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.45.0",
         "@typescript-eslint/types": "8.45.0",
@@ -3894,6 +3900,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4346,6 +4353,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -4890,6 +4898,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -5672,6 +5681,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.37.0.tgz",
       "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5732,6 +5742,7 @@
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
       "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
       "dev": true,
+      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -9285,6 +9296,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -10321,6 +10333,7 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -10950,6 +10963,7 @@
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -11204,6 +11218,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "dev": true,
+      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -11848,6 +11863,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@csstools/css-parser-algorithms": "^3.0.4",
         "@csstools/css-tokenizer": "^3.0.3",
@@ -12149,6 +12165,7 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -12424,6 +12441,7 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -12484,7 +12502,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -12581,6 +12600,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -12835,6 +12855,7 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13961,13 +13982,15 @@
       "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
       "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
       "dev": true,
+      "peer": true,
       "requires": {}
     },
     "@csstools/css-tokenizer": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
       "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@csstools/media-query-list-parser": {
       "version": "4.0.3",
@@ -14011,6 +14034,7 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
+          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -14193,6 +14217,7 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
+          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -15454,7 +15479,8 @@
       "version": "20.3.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
       "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@types/resolve": {
       "version": "1.20.2",
@@ -15498,6 +15524,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.45.0.tgz",
       "integrity": "sha512-TGf22kon8KW+DeKaUmOibKWktRY8b2NSAZNdtWh798COm1NWx8+xJ6iFBtk3IvLdv6+LGLJLRlyhrhEDZWargQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@typescript-eslint/scope-manager": "8.45.0",
         "@typescript-eslint/types": "8.45.0",
@@ -15625,7 +15652,8 @@
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "acorn-jsx": {
       "version": "5.3.2",
@@ -15907,6 +15935,7 @@
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz",
       "integrity": "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -16252,6 +16281,7 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
+          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -16799,6 +16829,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.37.0.tgz",
       "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -16865,6 +16896,7 @@
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
       "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
       "dev": true,
+      "peer": true,
       "requires": {}
     },
     "eslint-import-resolver-node": {
@@ -19169,6 +19201,7 @@
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
       "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -19728,6 +19761,7 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
+          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -20103,7 +20137,8 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "prettier-linter-helpers": {
       "version": "1.0.0",
@@ -20278,6 +20313,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -20722,6 +20758,7 @@
       "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.20.0.tgz",
       "integrity": "sha512-B5Myu9WRxrgKuLs3YyUXLP2H0mrbejwNxPmyADlACWwFsrL8Bmor/nTSh4OMae5sHjOz6gkSeccQH34gM4/nAw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@csstools/css-parser-algorithms": "^3.0.4",
         "@csstools/css-tokenizer": "^3.0.3",
@@ -20835,6 +20872,7 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
+          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -21105,7 +21143,8 @@
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
           "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -21153,7 +21192,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "type-check": {
       "version": "0.4.0",
@@ -21221,7 +21261,8 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "typescript-eslint": {
       "version": "8.45.0",
@@ -21329,7 +21370,8 @@
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
           "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-          "dev": true
+          "dev": true,
+          "peer": true
         },
         "rollup": {
           "version": "4.39.0",
diff --git a/previews/primer/alpha/text_area_preview.rb b/previews/primer/alpha/text_area_preview.rb
index dd60440115..40dae9bafe 100644
--- a/previews/primer/alpha/text_area_preview.rb
+++ b/previews/primer/alpha/text_area_preview.rb
@@ -16,6 +16,7 @@ class TextAreaPreview < ViewComponent::Preview
       # @param disabled toggle
       # @param invalid toggle
       # @param validation_message text
+      # @param character_limit number
       def playground(
         name: "my-text-area",
         id: "my-text-area",
@@ -26,7 +27,8 @@ def playground(
         full_width: true,
         disabled: false,
         invalid: false,
-        validation_message: nil
+        validation_message: nil,
+        character_limit: nil
       )
         system_arguments = {
           name: name,
@@ -38,7 +40,8 @@ def playground(
           full_width: full_width,
           disabled: disabled,
           invalid: invalid,
-          validation_message: validation_message
+          validation_message: validation_message,
+          character_limit: character_limit
         }
 
         render(Primer::Alpha::TextArea.new(**system_arguments))
@@ -93,6 +96,18 @@ def invalid
       def with_validation_message
         render(Primer::Alpha::TextArea.new(validation_message: "An error occurred!", name: "my-text-area", label: "Tell me about yourself"))
       end
+
+      # @label With character limit
+      # @snapshot
+      def with_character_limit
+        render(Primer::Alpha::TextArea.new(character_limit: 100, name: "my-text-area", label: "Tell me about yourself"))
+      end
+
+      # @label With character limit and caption
+      # @snapshot
+      def with_character_limit_and_caption
+        render(Primer::Alpha::TextArea.new(character_limit: 100, caption: "With a caption.", name: "my-text-area", label: "Tell me about yourself"))
+      end
       #
       # @!endgroup
     end
diff --git a/previews/primer/alpha/text_field_preview.rb b/previews/primer/alpha/text_field_preview.rb
index 85beea5ef2..68e2aae471 100644
--- a/previews/primer/alpha/text_field_preview.rb
+++ b/previews/primer/alpha/text_field_preview.rb
@@ -24,6 +24,7 @@ class TextFieldPreview < ViewComponent::Preview
       # @param monospace toggle
       # @param leading_visual_icon octicon
       # @param leading_spinner toggle
+      # @param character_limit number
       def playground(
         name: "my-text-field",
         id: "my-text-field",
@@ -42,7 +43,8 @@ def playground(
         inset: false,
         monospace: false,
         leading_visual_icon: nil,
-        leading_spinner: false
+        leading_spinner: false,
+        character_limit: nil
       )
         system_arguments = {
           name: name,
@@ -61,7 +63,8 @@ def playground(
           placeholder: placeholder,
           inset: inset,
           monospace: monospace,
-          leading_spinner: leading_spinner
+          leading_spinner: leading_spinner,
+          character_limit: character_limit
         }
 
         if leading_visual_icon
@@ -262,6 +265,18 @@ def input_group_trailing_button
       def input_group_leading_action_menu(route_format: :html)
         render_with_template(locals: { route_format: route_format })
       end
+
+      # @label With character limit
+      # @snapshot
+      def with_character_limit
+        render(Primer::Alpha::TextField.new(character_limit: 20, name: "my-text-field", label: "Username"))
+      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", label: "Username"))
+      end
     end
   end
 end
diff --git a/previews/primer/forms_preview.rb b/previews/primer/forms_preview.rb
index fa1ddaa6fe..1bcdaa1ac1 100644
--- a/previews/primer/forms_preview.rb
+++ b/previews/primer/forms_preview.rb
@@ -67,5 +67,11 @@ def example_toggle_switch_form; end
 
     # @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
diff --git a/previews/primer/forms_preview/text_area_with_character_limit_form.html.erb b/previews/primer/forms_preview/text_area_with_character_limit_form.html.erb
new file mode 100644
index 0000000000..e7f256b232
--- /dev/null
+++ b/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 %>
diff --git a/previews/primer/forms_preview/text_field_with_character_limit_form.html.erb b/previews/primer/forms_preview/text_field_with_character_limit_form.html.erb
new file mode 100644
index 0000000000..128b29eaf3
--- /dev/null
+++ b/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 %>
diff --git a/test/lib/primer/forms/text_area_input_test.rb b/test/lib/primer/forms/text_area_input_test.rb
index 4df92d3fdb..fa2cccc28e 100644
--- a/test/lib/primer/forms/text_area_input_test.rb
+++ b/test/lib/primer/forms/text_area_input_test.rb
@@ -32,4 +32,38 @@ def test_no_error_markup
 
     refute_selector ".field_with_errors", visible: :all
   end
+
+  def test_character_limit
+    render_in_view_context do
+      primer_form_with(url: "/foo") do |f|
+        render_inline_form(f) do |text_area_form|
+          text_area_form.text_area(name: :bio, label: "Bio", character_limit: 100)
+        end
+      end
+    end
+
+    assert_selector "primer-text-area"
+    assert_selector "div.FormControl-caption--characterLimit[data-target='primer-text-area.characterLimitElement'][data-max-length='100']", text: "100 characters remaining."
+    assert_selector "textarea[data-target='primer-text-area.inputElement']"
+    assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement'][hidden]"
+    assert_selector "span[data-target='primer-text-area.validationMessageElement']"
+    
+    # Check for aria-live region
+    assert_selector "span.sr-only[aria-live='polite'][aria-atomic='true']" do |span|
+      assert span["id"].start_with?("bio-character-count-sr-")
+    end
+  end
+
+  def test_character_limit_with_caption
+    render_in_view_context do
+      primer_form_with(url: "/foo") do |f|
+        render_inline_form(f) do |text_area_form|
+          text_area_form.text_area(name: :bio, label: "Bio", caption: "Tell us about yourself", character_limit: 100)
+        end
+      end
+    end
+
+    assert_selector "div.FormControl-caption--characterLimit", text: "100 characters remaining."
+    assert_selector "span.FormControl-caption", text: "Tell us about yourself"
+  end
 end
diff --git a/test/lib/primer/forms/text_field_input_test.rb b/test/lib/primer/forms/text_field_input_test.rb
index 98f3c9d84c..6fcd1f4e44 100644
--- a/test/lib/primer/forms/text_field_input_test.rb
+++ b/test/lib/primer/forms/text_field_input_test.rb
@@ -60,4 +60,38 @@ def test_enforces_leading_visual_when_spinner_requested
 
     assert_includes error.message, "must also specify a leading visual"
   end
+
+  def test_character_limit
+    render_in_view_context do
+      primer_form_with(url: "/foo") do |f|
+        render_inline_form(f) do |text_field_form|
+          text_field_form.text_field(name: :username, label: "Username", character_limit: 20)
+        end
+      end
+    end
+
+    assert_selector "primer-text-field"
+    assert_selector "div.FormControl-caption--characterLimit[data-target='primer-text-field.characterLimitElement'][data-max-length='20']", text: "20 characters remaining."
+    assert_selector "input[type=text][data-target*='primer-text-field.inputElement']"
+    assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement'][hidden]"
+    assert_selector "span[data-target='primer-text-field.characterLimitValidationMessageElement']"
+    
+    # Check for aria-live region
+    assert_selector "span.sr-only[aria-live='polite'][aria-atomic='true']" do |span|
+      assert span["id"].start_with?("username-character-count-sr-")
+    end
+  end
+
+  def test_character_limit_with_caption
+    render_in_view_context do
+      primer_form_with(url: "/foo") do |f|
+        render_inline_form(f) do |text_field_form|
+          text_field_form.text_field(name: :username, label: "Username", caption: "Choose a unique username", character_limit: 20)
+        end
+      end
+    end
+
+    assert_selector "div.FormControl-caption--characterLimit", text: "20 characters remaining."
+    assert_selector "span.FormControl-caption", text: "Choose a unique username"
+  end
 end

From 62fc2c9f25a9252ce8452e5469ecf8b90302303f Mon Sep 17 00:00:00 2001
From: primer-css <primer-css@users.noreply.github.com>
Date: Wed, 3 Dec 2025 15:21:10 +0000
Subject: [PATCH 02/33] Generating static files

---
 static/arguments.json     |  6 ++++
 static/classes.json       |  3 ++
 static/form_previews.json | 10 ++++++
 static/info_arch.json     | 66 +++++++++++++++++++++++++++++++++++++++
 static/previews.json      | 52 ++++++++++++++++++++++++++++++
 5 files changed, 137 insertions(+)

diff --git a/static/arguments.json b/static/arguments.json
index b1192f1bf4..0326f3b97f 100644
--- a/static/arguments.json
+++ b/static/arguments.json
@@ -1303,6 +1303,12 @@
         "default": "`{}`",
         "description": "HTML attributes to attach to the `<label>` element that labels the input."
       },
+      {
+        "name": "character_limit",
+        "type": "Number",
+        "default": "`nil`",
+        "description": "Optional character limit for the input. If provided, a character counter will be displayed below the input."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
diff --git a/static/classes.json b/static/classes.json
index f4b8108670..06520561a0 100644
--- a/static/classes.json
+++ b/static/classes.json
@@ -245,6 +245,9 @@
   "FormControl-caption": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-caption--characterLimit": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-check-group-wrap": [
     "Primer::Alpha::TextField"
   ],
diff --git a/static/form_previews.json b/static/form_previews.json
index 20ebd3bfed..eab9b39694 100644
--- a/static/form_previews.json
+++ b/static/form_previews.json
@@ -107,6 +107,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"
       }
     ]
   }
diff --git a/static/info_arch.json b/static/info_arch.json
index 804ca2603e..96851ff109 100644
--- a/static/info_arch.json
+++ b/static/info_arch.json
@@ -4254,6 +4254,12 @@
         "default": "`{}`",
         "description": "HTML attributes to attach to the `<label>` element that labels the input."
       },
+      {
+        "name": "character_limit",
+        "type": "Number",
+        "default": "`nil`",
+        "description": "Optional character limit for the input. If provided, a character counter will be displayed below the input."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -4297,6 +4303,14 @@
         "return_types": [
           "Boolean"
         ]
+      },
+      {
+        "name": "character_limit?",
+        "description": "Returns the character limit for the input, if set.",
+        "parameters": [],
+        "return_types": [
+          "Boolean"
+        ]
       }
     ],
     "previews": [
@@ -8812,6 +8826,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/text_area/with_character_limit",
+        "name": "with_character_limit",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/text_area/with_character_limit_and_caption",
+        "name": "with_character_limit_and_caption",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": []
@@ -9378,6 +9418,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/text_field/with_character_limit",
+        "name": "with_character_limit",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/text_field/with_character_limit_and_caption",
+        "name": "with_character_limit_and_caption",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": []
diff --git a/static/previews.json b/static/previews.json
index 855e45d38e..16e1b1094a 100644
--- a/static/previews.json
+++ b/static/previews.json
@@ -6989,6 +6989,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/text_area/with_character_limit",
+        "name": "with_character_limit",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/text_area/with_character_limit_and_caption",
+        "name": "with_character_limit_and_caption",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -7374,6 +7400,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/text_field/with_character_limit",
+        "name": "with_character_limit",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/text_field/with_character_limit_and_caption",
+        "name": "with_character_limit_and_caption",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

From 491b02baf982640215a3bd7df4c63389dd0b4abd Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 3 Dec 2025 15:56:43 +0000
Subject: [PATCH 03/33] Updates

---
 .erblint-rubocop20251203-37257-3idmxl        |  13 --
 app/lib/primer/forms/caption.html.erb        |   6 +-
 app/lib/primer/forms/character_counter.ts    | 133 +++++++++++++++++++
 app/lib/primer/forms/dsl/input.rb            |  11 ++
 app/lib/primer/forms/dsl/text_area_input.rb  |   4 +
 app/lib/primer/forms/dsl/text_field_input.rb |   4 +
 app/lib/primer/forms/primer_text_area.ts     |  82 ++----------
 app/lib/primer/forms/primer_text_field.ts    |  81 ++---------
 app/lib/primer/forms/text_area.rb            |   1 +
 app/lib/primer/forms/text_field.rb           |   1 +
 10 files changed, 180 insertions(+), 156 deletions(-)
 delete mode 100644 .erblint-rubocop20251203-37257-3idmxl
 create mode 100644 app/lib/primer/forms/character_counter.ts

diff --git a/.erblint-rubocop20251203-37257-3idmxl b/.erblint-rubocop20251203-37257-3idmxl
deleted file mode 100644
index 5977a9e86d..0000000000
--- a/.erblint-rubocop20251203-37257-3idmxl
+++ /dev/null
@@ -1,13 +0,0 @@
----
-inherit_from:
-- lib/rubocop/config/default.yml
-AllCops:
-  DisabledByDefault: true
-Primer/DeprecatedComponents:
-  Enabled: false
-  Exclude:
-  - app/components/primer/layout_component.html.erb
-Migrations/IconButtonComponent:
-  Enabled: true
-Migrations/TruncateComponent:
-  Enabled: true
diff --git a/app/lib/primer/forms/caption.html.erb b/app/lib/primer/forms/caption.html.erb
index b963db9dc1..89858e3624 100644
--- a/app/lib/primer/forms/caption.html.erb
+++ b/app/lib/primer/forms/caption.html.erb
@@ -1,8 +1,10 @@
+<% if @input.character_limit? %>
+  <span class="sr-only" id="<%= @input.character_limit_sr_id %>" aria-live="polite"></span>
+<% end %>
 <% if @input.caption? || caption_template? || @input.character_limit? %>
   <span class="FormControl-caption" id="<%= @input.caption_id %>">
     <% if @input.character_limit? %>
-      <span class="sr-only" id="<%= @input.character_limit_sr_id %>" aria-live="polite" aria-atomic="true"></span>
-      <div class="FormControl-caption--characterLimit" data-target="primer-text-area.characterLimitElement" data-max-length="<%= @input.character_limit %>" data-sr-target="<%= @input.character_limit_sr_id %>">
+      <div class="FormControl-caption--characterLimit" data-target="<%= @input.character_limit_target_prefix %>.characterLimitElement" data-max-length="<%= @input.character_limit %>" data-sr-target="<%= @input.character_limit_sr_id %>" aria-hidden="true">
         <%= @input.character_limit %> characters remaining.
       </div>
     <% end %>
diff --git a/app/lib/primer/forms/character_counter.ts b/app/lib/primer/forms/character_counter.ts
new file mode 100644
index 0000000000..5b03a08754
--- /dev/null
+++ b/app/lib/primer/forms/character_counter.ts
@@ -0,0 +1,133 @@
+/**
+ * Shared character counting functionality for text inputs with character limits.
+ * Handles real-time character count updates, validation, and aria-live announcements.
+ */
+export class CharacterCounter {
+  private announceTimeout: number | null = null
+
+  constructor(
+    private inputElement: HTMLInputElement | HTMLTextAreaElement,
+    private characterLimitElement: HTMLElement,
+    private validationElement: HTMLElement | undefined,
+    private validationMessageElement: HTMLElement | undefined,
+  ) {}
+
+  /**
+   * Initialize character counting by setting up event listener and initial count
+   */
+  initialize(signal?: AbortSignal): void {
+    this.inputElement.addEventListener('input', () => this.updateCharacterCount(), signal ? {signal} : undefined)
+    this.updateCharacterCount()
+  }
+
+  /**
+   * Clean up any pending timeouts
+   */
+  cleanup(): void {
+    if (this.announceTimeout) {
+      clearTimeout(this.announceTimeout)
+    }
+  }
+
+  /**
+   * Update the character count display and validation state
+   */
+  private updateCharacterCount(): void {
+    if (!this.characterLimitElement) return
+
+    const maxLength = parseInt(this.characterLimitElement.getAttribute('data-max-length') || '0', 10)
+    if (maxLength === 0) return
+
+    const currentLength = this.inputElement.value.length
+    const remaining = maxLength - currentLength
+    let message = ''
+
+    if (remaining >= 0) {
+      // Still under or at the limit
+      const word = remaining === 1 ? 'character' : 'characters'
+      message = `${remaining} ${word} remaining.`
+      this.characterLimitElement.textContent = message
+      this.clearError()
+    } else {
+      // Over the limit
+      const over = Math.abs(remaining)
+      const word = over === 1 ? 'character' : 'characters'
+      message = `${over} ${word} over.`
+      this.characterLimitElement.textContent = message
+      this.setError()
+    }
+
+    // Debounce the aria-live announcement
+    this.announceToScreenReader(message)
+  }
+
+  /**
+   * Announce character count to screen readers with debouncing
+   */
+  private announceToScreenReader(message: string): void {
+    // Clear any existing timeout
+    if (this.announceTimeout) {
+      clearTimeout(this.announceTimeout)
+    }
+
+    // Set a new timeout to announce after 150ms
+    this.announceTimeout = window.setTimeout(() => {
+      const srTargetId = this.characterLimitElement?.getAttribute('data-sr-target')
+      if (srTargetId) {
+        const srElement = document.getElementById(srTargetId)
+        if (srElement) {
+          srElement.textContent = message
+        }
+      }
+    }, 150)
+  }
+
+  /**
+   * Show validation error when character limit is exceeded
+   */
+  private setError(): void {
+    if (!this.validationElement || !this.validationMessageElement) return
+
+    this.inputElement.setAttribute('invalid', 'true')
+    this.inputElement.setAttribute('aria-invalid', 'true')
+    
+    // Add validation message ID to aria-describedby
+    const validationId = this.validationElement.id
+    if (validationId) {
+      const existingDescribedBy = this.inputElement.getAttribute('aria-describedby') || ''
+      const describedByIds = existingDescribedBy.split(' ').filter(id => id.length > 0)
+      if (!describedByIds.includes(validationId)) {
+        describedByIds.push(validationId)
+        this.inputElement.setAttribute('aria-describedby', describedByIds.join(' '))
+      }
+    }
+    
+    this.validationMessageElement.textContent = "You've exceeded the character limit"
+    this.validationElement.hidden = false
+  }
+
+  /**
+   * Clear validation error when back under character limit
+   */
+  private clearError(): void {
+    if (!this.validationElement || !this.validationMessageElement) return
+
+    this.inputElement.removeAttribute('invalid')
+    this.inputElement.removeAttribute('aria-invalid')
+    
+    // Remove validation message ID from aria-describedby
+    const validationId = this.validationElement.id
+    if (validationId) {
+      const existingDescribedBy = this.inputElement.getAttribute('aria-describedby') || ''
+      const describedByIds = existingDescribedBy.split(' ').filter(id => id.length > 0 && id !== validationId)
+      if (describedByIds.length > 0) {
+        this.inputElement.setAttribute('aria-describedby', describedByIds.join(' '))
+      } else {
+        this.inputElement.removeAttribute('aria-describedby')
+      }
+    }
+    
+    this.validationMessageElement.textContent = ''
+    this.validationElement.hidden = true
+  }
+}
diff --git a/app/lib/primer/forms/dsl/input.rb b/app/lib/primer/forms/dsl/input.rb
index ade0ae6400..48127415c4 100644
--- a/app/lib/primer/forms/dsl/input.rb
+++ b/app/lib/primer/forms/dsl/input.rb
@@ -200,6 +200,17 @@ def character_limit?
           false
         end
 
+        def character_limit_target_prefix
+          case type
+          when :text_field
+            "primer-text-field"
+          when :text_area
+            "primer-text-area"
+          else
+            ""
+          end
+        end
+
         def valid?
           supports_validation? && validation_messages.empty? && !@invalid
         end
diff --git a/app/lib/primer/forms/dsl/text_area_input.rb b/app/lib/primer/forms/dsl/text_area_input.rb
index e816f707fb..f7c92283ba 100644
--- a/app/lib/primer/forms/dsl/text_area_input.rb
+++ b/app/lib/primer/forms/dsl/text_area_input.rb
@@ -33,6 +33,10 @@ def character_limit_sr_id
           @character_limit_sr_id ||= "#{name}-character-count-sr-#{SecureRandom.hex(4)}"
         end
 
+        def character_limit_validation_id
+          @character_limit_validation_id ||= "#{name}-character-limit-validation-#{SecureRandom.hex(4)}"
+        end
+
         # :nocov:
         def focusable?
           true
diff --git a/app/lib/primer/forms/dsl/text_field_input.rb b/app/lib/primer/forms/dsl/text_field_input.rb
index 27b55810e5..192d074815 100644
--- a/app/lib/primer/forms/dsl/text_field_input.rb
+++ b/app/lib/primer/forms/dsl/text_field_input.rb
@@ -76,6 +76,10 @@ def character_limit_sr_id
           @character_limit_sr_id ||= "#{name}-character-count-sr-#{SecureRandom.hex(4)}"
         end
 
+        def character_limit_validation_id
+          @character_limit_validation_id ||= "#{name}-character-limit-validation-#{SecureRandom.hex(4)}"
+        end
+
         def validation_arguments
           if auto_check_src.present?
             super.merge(
diff --git a/app/lib/primer/forms/primer_text_area.ts b/app/lib/primer/forms/primer_text_area.ts
index fdcdddeda0..b2b02c9eb9 100644
--- a/app/lib/primer/forms/primer_text_area.ts
+++ b/app/lib/primer/forms/primer_text_area.ts
@@ -1,4 +1,5 @@
 import {controller, target} from '@github/catalyst'
+import {CharacterCounter} from './character_counter'
 
 @controller
 export class PrimerTextAreaElement extends HTMLElement {
@@ -7,81 +8,22 @@ export class PrimerTextAreaElement extends HTMLElement {
   @target validationElement: HTMLElement
   @target validationMessageElement: HTMLElement
 
-  #announceTimeout: number | null = null
+  #characterCounter: CharacterCounter | null = null
 
   connectedCallback(): void {
-    this.inputElement.addEventListener('input', () => this.#updateCharacterCount())
-    // Initialize the count on load
-    this.#updateCharacterCount()
-  }
-
-  disconnectedCallback(): void {
-    if (this.#announceTimeout) {
-      clearTimeout(this.#announceTimeout)
-    }
-  }
-
-  #updateCharacterCount(): void {
-    if (!this.characterLimitElement) return
-
-    const maxLength = parseInt(this.characterLimitElement.getAttribute('data-max-length') || '0', 10)
-    if (maxLength === 0) return
-
-    const currentLength = this.inputElement.value.length
-    const remaining = maxLength - currentLength
-    let message = ''
-
-    if (remaining >= 0) {
-      // Still under or at the limit
-      const word = remaining === 1 ? 'character' : 'characters'
-      message = `${remaining} ${word} remaining.`
-      this.characterLimitElement.textContent = message
-      this.#clearError()
-    } else {
-      // Over the limit
-      const over = Math.abs(remaining)
-      const word = over === 1 ? 'character' : 'characters'
-      message = `${over} ${word} over.`
-      this.characterLimitElement.textContent = message
-      this.#setError()
+    if (this.characterLimitElement) {
+      this.#characterCounter = new CharacterCounter(
+        this.inputElement,
+        this.characterLimitElement,
+        this.validationElement,
+        this.validationMessageElement,
+      )
+      this.#characterCounter.initialize()
     }
-
-    // Debounce the aria-live announcement
-    this.#announceToScreenReader(message)
   }
 
-  #announceToScreenReader(message: string): void {
-    // Clear any existing timeout
-    if (this.#announceTimeout) {
-      clearTimeout(this.#announceTimeout)
-    }
-
-    // Set a new timeout to announce after 150ms
-    this.#announceTimeout = window.setTimeout(() => {
-      const srTargetId = this.characterLimitElement?.getAttribute('data-sr-target')
-      if (srTargetId) {
-        const srElement = document.getElementById(srTargetId)
-        if (srElement) {
-          srElement.textContent = message
-        }
-      }
-    }, 150)
-  }
-
-  #setError(): void {
-    if (!this.validationElement || !this.validationMessageElement) return
-
-    this.inputElement.setAttribute('invalid', 'true')
-    this.validationMessageElement.textContent = "You've exceeded the character limit"
-    this.validationElement.hidden = false
-  }
-
-  #clearError(): void {
-    if (!this.validationElement || !this.validationMessageElement) return
-
-    this.inputElement.removeAttribute('invalid')
-    this.validationMessageElement.textContent = ''
-    this.validationElement.hidden = true
+  disconnectedCallback(): void {
+    this.#characterCounter?.cleanup()
   }
 }
 
diff --git a/app/lib/primer/forms/primer_text_field.ts b/app/lib/primer/forms/primer_text_field.ts
index 5f2e46445e..f445c4d072 100644
--- a/app/lib/primer/forms/primer_text_field.ts
+++ b/app/lib/primer/forms/primer_text_field.ts
@@ -1,8 +1,7 @@
-/* eslint-disable custom-elements/expose-class-on-global */
-
 import '@github/auto-check-element'
 import type {AutoCheckErrorEvent, AutoCheckSuccessEvent} from '@github/auto-check-element'
 import {controller, target} from '@github/catalyst'
+import {CharacterCounter} from './character_counter'
 
 declare global {
   interface HTMLElementEventMap {
@@ -25,7 +24,7 @@ export class PrimerTextFieldElement extends HTMLElement {
   @target characterLimitValidationMessageElement: HTMLElement
 
   #abortController: AbortController | null
-  #announceTimeout: number | null = null
+  #characterCounter: CharacterCounter | null = null
 
   connectedCallback(): void {
     this.#abortController?.abort()
@@ -55,16 +54,19 @@ export class PrimerTextFieldElement extends HTMLElement {
 
     // Set up character limit tracking if present
     if (this.characterLimitElement) {
-      this.inputElement.addEventListener('input', () => this.#updateCharacterCount(), {signal})
-      this.#updateCharacterCount()
+      this.#characterCounter = new CharacterCounter(
+        this.inputElement,
+        this.characterLimitElement,
+        this.characterLimitValidationElement,
+        this.characterLimitValidationMessageElement,
+      )
+      this.#characterCounter.initialize(signal)
     }
   }
 
   disconnectedCallback() {
     this.#abortController?.abort()
-    if (this.#announceTimeout) {
-      clearTimeout(this.#announceTimeout)
-    }
+    this.#characterCounter?.cleanup()
   }
 
   clearContents() {
@@ -119,67 +121,4 @@ export class PrimerTextFieldElement extends HTMLElement {
     this.leadingSpinner?.setAttribute('hidden', '')
     this.leadingVisual?.removeAttribute('hidden')
   }
-
-  #updateCharacterCount(): void {
-    if (!this.characterLimitElement) return
-
-    const maxLength = parseInt(this.characterLimitElement.getAttribute('data-max-length') || '0', 10)
-    if (maxLength === 0) return
-
-    const currentLength = this.inputElement.value.length
-    const remaining = maxLength - currentLength
-    let message = ''
-
-    if (remaining >= 0) {
-      // Still under or at the limit
-      const word = remaining === 1 ? 'character' : 'characters'
-      message = `${remaining} ${word} remaining.`
-      this.characterLimitElement.textContent = message
-      this.#clearCharacterLimitError()
-    } else {
-      // Over the limit
-      const over = Math.abs(remaining)
-      const word = over === 1 ? 'character' : 'characters'
-      message = `${over} ${word} over.`
-      this.characterLimitElement.textContent = message
-      this.#setCharacterLimitError()
-    }
-
-    // Debounce the aria-live announcement
-    this.#announceToScreenReader(message)
-  }
-
-  #announceToScreenReader(message: string): void {
-    // Clear any existing timeout
-    if (this.#announceTimeout) {
-      clearTimeout(this.#announceTimeout)
-    }
-
-    // Set a new timeout to announce after 150ms
-    this.#announceTimeout = window.setTimeout(() => {
-      const srTargetId = this.characterLimitElement?.getAttribute('data-sr-target')
-      if (srTargetId) {
-        const srElement = document.getElementById(srTargetId)
-        if (srElement) {
-          srElement.textContent = message
-        }
-      }
-    }, 150)
-  }
-
-  #setCharacterLimitError(): void {
-    if (!this.characterLimitValidationElement || !this.characterLimitValidationMessageElement) return
-
-    this.inputElement.setAttribute('invalid', 'true')
-    this.characterLimitValidationMessageElement.textContent = "You've exceeded the character limit"
-    this.characterLimitValidationElement.hidden = false
-  }
-
-  #clearCharacterLimitError(): void {
-    if (!this.characterLimitValidationElement || !this.characterLimitValidationMessageElement) return
-
-    this.inputElement.removeAttribute('invalid')
-    this.characterLimitValidationMessageElement.textContent = ''
-    this.characterLimitValidationElement.hidden = true
-  }
 }
diff --git a/app/lib/primer/forms/text_area.rb b/app/lib/primer/forms/text_area.rb
index 6c1bccdd27..860b6496c4 100644
--- a/app/lib/primer/forms/text_area.rb
+++ b/app/lib/primer/forms/text_area.rb
@@ -19,6 +19,7 @@ def initialize(input:)
       def character_limit_validation_arguments
         {
           class: "FormControl-inlineValidation",
+          id: @input.character_limit_validation_id,
           hidden: true
         }
       end
diff --git a/app/lib/primer/forms/text_field.rb b/app/lib/primer/forms/text_field.rb
index ac2992a2b6..5972810279 100644
--- a/app/lib/primer/forms/text_field.rb
+++ b/app/lib/primer/forms/text_field.rb
@@ -81,6 +81,7 @@ def trailing_visual_component
       def character_limit_validation_arguments
         {
           class: "FormControl-inlineValidation",
+          id: @input.character_limit_validation_id,
           hidden: true
         }
       end

From 6cc1993594695a88d8b29f415ef5e177b5039956 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 3 Dec 2025 16:11:58 +0000
Subject: [PATCH 04/33] Updates character_counter.ts

---
 app/lib/primer/forms/character_counter.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/lib/primer/forms/character_counter.ts b/app/lib/primer/forms/character_counter.ts
index 5b03a08754..756ecd429f 100644
--- a/app/lib/primer/forms/character_counter.ts
+++ b/app/lib/primer/forms/character_counter.ts
@@ -90,7 +90,7 @@ export class CharacterCounter {
 
     this.inputElement.setAttribute('invalid', 'true')
     this.inputElement.setAttribute('aria-invalid', 'true')
-    
+
     // Add validation message ID to aria-describedby
     const validationId = this.validationElement.id
     if (validationId) {
@@ -101,7 +101,7 @@ export class CharacterCounter {
         this.inputElement.setAttribute('aria-describedby', describedByIds.join(' '))
       }
     }
-    
+
     this.validationMessageElement.textContent = "You've exceeded the character limit"
     this.validationElement.hidden = false
   }
@@ -114,7 +114,7 @@ export class CharacterCounter {
 
     this.inputElement.removeAttribute('invalid')
     this.inputElement.removeAttribute('aria-invalid')
-    
+
     // Remove validation message ID from aria-describedby
     const validationId = this.validationElement.id
     if (validationId) {
@@ -126,7 +126,7 @@ export class CharacterCounter {
         this.inputElement.removeAttribute('aria-describedby')
       }
     }
-    
+
     this.validationMessageElement.textContent = ''
     this.validationElement.hidden = true
   }

From 1600987a26b90a5dbf0e1ea348e1ab22047abcbc Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 3 Dec 2025 16:51:55 +0000
Subject: [PATCH 05/33] Changes

---
 app/components/primer/alpha/text_field.pcss  |  1 -
 app/lib/primer/forms/character_counter.ts    | 25 +++++++-------
 app/lib/primer/forms/dsl/text_area_input.rb  |  4 +++
 app/lib/primer/forms/dsl/text_field_input.rb |  4 +++
 previews/primer/alpha/text_field_preview.rb  | 34 ++++++++++----------
 5 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
index be148c99c0..c1967c278a 100644
--- a/app/components/primer/alpha/text_field.pcss
+++ b/app/components/primer/alpha/text_field.pcss
@@ -39,7 +39,6 @@
   margin-bottom: var(--base-size-4);
 }
 
-
 /* inline validation message */
 .FormControl-inlineValidation {
   display: flex;
diff --git a/app/lib/primer/forms/character_counter.ts b/app/lib/primer/forms/character_counter.ts
index 756ecd429f..b99f519d34 100644
--- a/app/lib/primer/forms/character_counter.ts
+++ b/app/lib/primer/forms/character_counter.ts
@@ -3,6 +3,7 @@
  * Handles real-time character count updates, validation, and aria-live announcements.
  */
 export class CharacterCounter {
+  private SCREEN_READER_DELAY: number = 150
   private announceTimeout: number | null = null
 
   constructor(
@@ -39,30 +40,28 @@ export class CharacterCounter {
     if (maxLength === 0) return
 
     const currentLength = this.inputElement.value.length
-    const remaining = maxLength - currentLength
+    const charactersRemaining = maxLength - currentLength
     let message = ''
 
-    if (remaining >= 0) {
-      // Still under or at the limit
-      const word = remaining === 1 ? 'character' : 'characters'
-      message = `${remaining} ${word} remaining.`
+    if (charactersRemaining >= 0) {
+      const characterText = charactersRemaining === 1 ? 'character' : 'characters'
+      message = `${charactersRemaining} ${characterText} remaining.`
       this.characterLimitElement.textContent = message
       this.clearError()
     } else {
       // Over the limit
-      const over = Math.abs(remaining)
-      const word = over === 1 ? 'character' : 'characters'
-      message = `${over} ${word} over.`
+      const charactersOver = Math.abs(charactersRemaining)
+      const characterText = charactersOver === 1 ? 'character' : 'characters'
+      message = `${charactersOver} ${characterText} over.`
       this.characterLimitElement.textContent = message
       this.setError()
     }
 
-    // Debounce the aria-live announcement
     this.announceToScreenReader(message)
   }
 
   /**
-   * Announce character count to screen readers with debouncing
+   * Announce character count to screen readers
    */
   private announceToScreenReader(message: string): void {
     // Clear any existing timeout
@@ -70,7 +69,7 @@ export class CharacterCounter {
       clearTimeout(this.announceTimeout)
     }
 
-    // Set a new timeout to announce after 150ms
+    // Set a new timeout to announce after a delay
     this.announceTimeout = window.setTimeout(() => {
       const srTargetId = this.characterLimitElement?.getAttribute('data-sr-target')
       if (srTargetId) {
@@ -79,7 +78,7 @@ export class CharacterCounter {
           srElement.textContent = message
         }
       }
-    }, 150)
+    }, this.SCREEN_READER_DELAY)
   }
 
   /**
@@ -91,7 +90,7 @@ export class CharacterCounter {
     this.inputElement.setAttribute('invalid', 'true')
     this.inputElement.setAttribute('aria-invalid', 'true')
 
-    // Add validation message ID to aria-describedby
+    // Add validation message ID to aria-describedby to ensure it is read by screen readers
     const validationId = this.validationElement.id
     if (validationId) {
       const existingDescribedBy = this.inputElement.getAttribute('aria-describedby') || ''
diff --git a/app/lib/primer/forms/dsl/text_area_input.rb b/app/lib/primer/forms/dsl/text_area_input.rb
index f7c92283ba..0790b1d3b0 100644
--- a/app/lib/primer/forms/dsl/text_area_input.rb
+++ b/app/lib/primer/forms/dsl/text_area_input.rb
@@ -12,6 +12,10 @@ def initialize(name:, label:, **system_arguments)
           @label = label
           @character_limit = system_arguments.delete(:character_limit)
 
+          if @character_limit.present? && @character_limit.to_i <= 0
+            raise ArgumentError, "character_limit must be a positive integer, got #{@character_limit}"
+          end
+
           super(**system_arguments)
 
           add_input_data(:target, "primer-text-area.inputElement")
diff --git a/app/lib/primer/forms/dsl/text_field_input.rb b/app/lib/primer/forms/dsl/text_field_input.rb
index 192d074815..e11efe3a10 100644
--- a/app/lib/primer/forms/dsl/text_field_input.rb
+++ b/app/lib/primer/forms/dsl/text_field_input.rb
@@ -26,6 +26,10 @@ def initialize(name:, label:, **system_arguments)
           @auto_check_src = system_arguments.delete(:auto_check_src)
           @character_limit = system_arguments.delete(:character_limit)
 
+          if @character_limit.present? && @character_limit.to_i <= 0
+            raise ArgumentError, "character_limit must be a positive integer, got #{@character_limit}"
+          end
+
           if @leading_visual
             @leading_visual[:classes] = class_names(
               "FormControl-input-leadingVisual",
diff --git a/previews/primer/alpha/text_field_preview.rb b/previews/primer/alpha/text_field_preview.rb
index 68e2aae471..9b985adaaf 100644
--- a/previews/primer/alpha/text_field_preview.rb
+++ b/previews/primer/alpha/text_field_preview.rb
@@ -200,7 +200,7 @@ def with_trailing_counter
       end
 
       # @label With trailing label
-      # @snapshot 
+      # @snapshot
       def with_trailing_label
         render(Primer::Alpha::TextField.new(trailing_visual: { label: { text: "Hello" } }, name: "my-text-field-15", label: "My text field"))
       end
@@ -216,6 +216,18 @@ def with_leading_visual
       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
+      def with_character_limit
+        render(Primer::Alpha::TextField.new(character_limit: 20, name: "my-text-field-18", label: "Username"))
+      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-19", label: "Username"))
+      end
       #
       # @!endgroup
 
@@ -223,24 +235,24 @@ def with_validation_message
       #
       # @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-20", 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-21", 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-22", 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-23", label: "My text field", data: { target: "custom-component.inputElement" }))
       end
       #
       # @!endgroup
@@ -265,18 +277,6 @@ def input_group_trailing_button
       def input_group_leading_action_menu(route_format: :html)
         render_with_template(locals: { route_format: route_format })
       end
-
-      # @label With character limit
-      # @snapshot
-      def with_character_limit
-        render(Primer::Alpha::TextField.new(character_limit: 20, name: "my-text-field", label: "Username"))
-      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", label: "Username"))
-      end
     end
   end
 end

From 12f53b29e66a5b92f73eed28714582862a281dc1 Mon Sep 17 00:00:00 2001
From: primer-css <primer-css@users.noreply.github.com>
Date: Wed, 3 Dec 2025 16:52:59 +0000
Subject: [PATCH 06/33] Generating static files

---
 static/info_arch.json | 44 +++++++++++++++++++++----------------------
 static/previews.json  | 44 +++++++++++++++++++++----------------------
 2 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/static/info_arch.json b/static/info_arch.json
index 96851ff109..8d1513aef5 100644
--- a/static/info_arch.json
+++ b/static/info_arch.json
@@ -9329,9 +9329,9 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/with_auto_check_ok",
-        "name": "with_auto_check_ok",
-        "snapshot": "false",
+        "preview_path": "primer/alpha/text_field/with_character_limit",
+        "name": "with_character_limit",
+        "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -9342,9 +9342,9 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/with_auto_check_accepted",
-        "name": "with_auto_check_accepted",
-        "snapshot": "false",
+        "preview_path": "primer/alpha/text_field/with_character_limit_and_caption",
+        "name": "with_character_limit_and_caption",
+        "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -9355,8 +9355,8 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/with_auto_check_error",
-        "name": "with_auto_check_error",
+        "preview_path": "primer/alpha/text_field/with_auto_check_ok",
+        "name": "with_auto_check_ok",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -9368,8 +9368,8 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/with_data_target",
-        "name": "with_data_target",
+        "preview_path": "primer/alpha/text_field/with_auto_check_accepted",
+        "name": "with_auto_check_accepted",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -9381,9 +9381,9 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/input_group_leading_button",
-        "name": "input_group_leading_button",
-        "snapshot": "true",
+        "preview_path": "primer/alpha/text_field/with_auto_check_error",
+        "name": "with_auto_check_error",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -9394,9 +9394,9 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/input_group_trailing_button",
-        "name": "input_group_trailing_button",
-        "snapshot": "true",
+        "preview_path": "primer/alpha/text_field/with_data_target",
+        "name": "with_data_target",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -9407,8 +9407,8 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/input_group_leading_action_menu",
-        "name": "input_group_leading_action_menu",
+        "preview_path": "primer/alpha/text_field/input_group_leading_button",
+        "name": "input_group_leading_button",
         "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
@@ -9420,8 +9420,8 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/with_character_limit",
-        "name": "with_character_limit",
+        "preview_path": "primer/alpha/text_field/input_group_trailing_button",
+        "name": "input_group_trailing_button",
         "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
@@ -9433,8 +9433,8 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/with_character_limit_and_caption",
-        "name": "with_character_limit_and_caption",
+        "preview_path": "primer/alpha/text_field/input_group_leading_action_menu",
+        "name": "input_group_leading_action_menu",
         "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
diff --git a/static/previews.json b/static/previews.json
index 16e1b1094a..6265e1abfc 100644
--- a/static/previews.json
+++ b/static/previews.json
@@ -7311,9 +7311,9 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/with_auto_check_ok",
-        "name": "with_auto_check_ok",
-        "snapshot": "false",
+        "preview_path": "primer/alpha/text_field/with_character_limit",
+        "name": "with_character_limit",
+        "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7324,9 +7324,9 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/with_auto_check_accepted",
-        "name": "with_auto_check_accepted",
-        "snapshot": "false",
+        "preview_path": "primer/alpha/text_field/with_character_limit_and_caption",
+        "name": "with_character_limit_and_caption",
+        "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7337,8 +7337,8 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/with_auto_check_error",
-        "name": "with_auto_check_error",
+        "preview_path": "primer/alpha/text_field/with_auto_check_ok",
+        "name": "with_auto_check_ok",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -7350,8 +7350,8 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/with_data_target",
-        "name": "with_data_target",
+        "preview_path": "primer/alpha/text_field/with_auto_check_accepted",
+        "name": "with_auto_check_accepted",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -7363,9 +7363,9 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/input_group_leading_button",
-        "name": "input_group_leading_button",
-        "snapshot": "true",
+        "preview_path": "primer/alpha/text_field/with_auto_check_error",
+        "name": "with_auto_check_error",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7376,9 +7376,9 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/input_group_trailing_button",
-        "name": "input_group_trailing_button",
-        "snapshot": "true",
+        "preview_path": "primer/alpha/text_field/with_data_target",
+        "name": "with_data_target",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7389,8 +7389,8 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/input_group_leading_action_menu",
-        "name": "input_group_leading_action_menu",
+        "preview_path": "primer/alpha/text_field/input_group_leading_button",
+        "name": "input_group_leading_button",
         "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
@@ -7402,8 +7402,8 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/with_character_limit",
-        "name": "with_character_limit",
+        "preview_path": "primer/alpha/text_field/input_group_trailing_button",
+        "name": "input_group_trailing_button",
         "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
@@ -7415,8 +7415,8 @@
         }
       },
       {
-        "preview_path": "primer/alpha/text_field/with_character_limit_and_caption",
-        "name": "with_character_limit_and_caption",
+        "preview_path": "primer/alpha/text_field/input_group_leading_action_menu",
+        "name": "input_group_leading_action_menu",
         "snapshot": "true",
         "skip_rules": {
           "wont_fix": [

From 28441b0044513fd16520a0b79b4d0c34585d83b1 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 3 Dec 2025 16:59:37 +0000
Subject: [PATCH 07/33] Restores package-lock.json file

---
 package-lock.json | 62 ++++++++---------------------------------------
 1 file changed, 10 insertions(+), 52 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6f0d01348d..a19ada9905 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -817,7 +817,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -841,7 +840,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -952,7 +950,6 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -1379,7 +1376,6 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -3620,8 +3616,7 @@
       "version": "20.3.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
       "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
@@ -3679,7 +3674,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.45.0.tgz",
       "integrity": "sha512-TGf22kon8KW+DeKaUmOibKWktRY8b2NSAZNdtWh798COm1NWx8+xJ6iFBtk3IvLdv6+LGLJLRlyhrhEDZWargQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.45.0",
         "@typescript-eslint/types": "8.45.0",
@@ -3900,7 +3894,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4353,7 +4346,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -4898,7 +4890,6 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -5681,7 +5672,6 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.37.0.tgz",
       "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5742,7 +5732,6 @@
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
       "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
       "dev": true,
-      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -9296,7 +9285,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -10333,7 +10321,6 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -10963,7 +10950,6 @@
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -11218,7 +11204,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "dev": true,
-      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -11863,7 +11848,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@csstools/css-parser-algorithms": "^3.0.4",
         "@csstools/css-tokenizer": "^3.0.3",
@@ -12165,7 +12149,6 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -12441,7 +12424,6 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -12502,8 +12484,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -12600,7 +12581,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -12855,7 +12835,6 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13982,15 +13961,13 @@
       "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
       "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
       "dev": true,
-      "peer": true,
       "requires": {}
     },
     "@csstools/css-tokenizer": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
       "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "@csstools/media-query-list-parser": {
       "version": "4.0.3",
@@ -14034,7 +14011,6 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
-          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -14217,7 +14193,6 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
-          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -15479,8 +15454,7 @@
       "version": "20.3.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
       "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "@types/resolve": {
       "version": "1.20.2",
@@ -15524,7 +15498,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.45.0.tgz",
       "integrity": "sha512-TGf22kon8KW+DeKaUmOibKWktRY8b2NSAZNdtWh798COm1NWx8+xJ6iFBtk3IvLdv6+LGLJLRlyhrhEDZWargQ==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@typescript-eslint/scope-manager": "8.45.0",
         "@typescript-eslint/types": "8.45.0",
@@ -15652,8 +15625,7 @@
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "acorn-jsx": {
       "version": "5.3.2",
@@ -15935,7 +15907,6 @@
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz",
       "integrity": "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==",
       "dev": true,
-      "peer": true,
       "requires": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -16281,7 +16252,6 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
-          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -16829,7 +16799,6 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.37.0.tgz",
       "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -16896,7 +16865,6 @@
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
       "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
       "dev": true,
-      "peer": true,
       "requires": {}
     },
     "eslint-import-resolver-node": {
@@ -19201,7 +19169,6 @@
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
       "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "dev": true,
-      "peer": true,
       "requires": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -19761,7 +19728,6 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
-          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -20137,8 +20103,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "prettier-linter-helpers": {
       "version": "1.0.0",
@@ -20313,7 +20278,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "dev": true,
-      "peer": true,
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -20758,7 +20722,6 @@
       "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.20.0.tgz",
       "integrity": "sha512-B5Myu9WRxrgKuLs3YyUXLP2H0mrbejwNxPmyADlACWwFsrL8Bmor/nTSh4OMae5sHjOz6gkSeccQH34gM4/nAw==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@csstools/css-parser-algorithms": "^3.0.4",
         "@csstools/css-tokenizer": "^3.0.3",
@@ -20872,7 +20835,6 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
-          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -21143,8 +21105,7 @@
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
           "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-          "dev": true,
-          "peer": true
+          "dev": true
         }
       }
     },
@@ -21192,8 +21153,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "type-check": {
       "version": "0.4.0",
@@ -21261,8 +21221,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "typescript-eslint": {
       "version": "8.45.0",
@@ -21370,8 +21329,7 @@
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
           "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-          "dev": true,
-          "peer": true
+          "dev": true
         },
         "rollup": {
           "version": "4.39.0",

From a079ec39bce2e702bbe6ada0b2e7d685acaf2356 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 3 Dec 2025 17:16:09 +0000
Subject: [PATCH 08/33] Fixes tests

---
 test/lib/primer/forms/text_area_input_test.rb | 34 ++++++++++++++++---
 .../lib/primer/forms/text_field_input_test.rb | 34 ++++++++++++++++---
 2 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/test/lib/primer/forms/text_area_input_test.rb b/test/lib/primer/forms/text_area_input_test.rb
index fa2cccc28e..f457e955b8 100644
--- a/test/lib/primer/forms/text_area_input_test.rb
+++ b/test/lib/primer/forms/text_area_input_test.rb
@@ -45,15 +45,41 @@ def test_character_limit
     assert_selector "primer-text-area"
     assert_selector "div.FormControl-caption--characterLimit[data-target='primer-text-area.characterLimitElement'][data-max-length='100']", text: "100 characters remaining."
     assert_selector "textarea[data-target='primer-text-area.inputElement']"
-    assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement'][hidden]"
-    assert_selector "span[data-target='primer-text-area.validationMessageElement']"
-    
+
     # Check for aria-live region
-    assert_selector "span.sr-only[aria-live='polite'][aria-atomic='true']" do |span|
+    assert_selector "span.sr-only[aria-live='polite']" do |span|
       assert span["id"].start_with?("bio-character-count-sr-")
     end
   end
 
+  def test_character_limit_rejects_zero
+    error = assert_raises(ArgumentError) do
+      render_in_view_context do
+        primer_form_with(url: "/foo") do |f|
+          render_inline_form(f) do |text_area_form|
+            text_area_form.text_area(name: :bio, label: "Bio", character_limit: 0)
+          end
+        end
+      end
+    end
+
+    assert_includes error.message, "character_limit must be a positive integer"
+  end
+
+  def test_character_limit_rejects_negative
+    error = assert_raises(ArgumentError) do
+      render_in_view_context do
+        primer_form_with(url: "/foo") do |f|
+          render_inline_form(f) do |text_area_form|
+            text_area_form.text_area(name: :bio, label: "Bio", character_limit: -10)
+          end
+        end
+      end
+    end
+
+    assert_includes error.message, "character_limit must be a positive integer"
+  end
+
   def test_character_limit_with_caption
     render_in_view_context do
       primer_form_with(url: "/foo") do |f|
diff --git a/test/lib/primer/forms/text_field_input_test.rb b/test/lib/primer/forms/text_field_input_test.rb
index 6fcd1f4e44..bec0e33313 100644
--- a/test/lib/primer/forms/text_field_input_test.rb
+++ b/test/lib/primer/forms/text_field_input_test.rb
@@ -73,15 +73,41 @@ def test_character_limit
     assert_selector "primer-text-field"
     assert_selector "div.FormControl-caption--characterLimit[data-target='primer-text-field.characterLimitElement'][data-max-length='20']", text: "20 characters remaining."
     assert_selector "input[type=text][data-target*='primer-text-field.inputElement']"
-    assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement'][hidden]"
-    assert_selector "span[data-target='primer-text-field.characterLimitValidationMessageElement']"
-    
+
     # Check for aria-live region
-    assert_selector "span.sr-only[aria-live='polite'][aria-atomic='true']" do |span|
+    assert_selector "span.sr-only[aria-live='polite']" do |span|
       assert span["id"].start_with?("username-character-count-sr-")
     end
   end
 
+  def test_character_limit_rejects_zero
+    error = assert_raises(ArgumentError) do
+      render_in_view_context do
+        primer_form_with(url: "/foo") do |f|
+          render_inline_form(f) do |text_field_form|
+            text_field_form.text_field(name: :username, label: "Username", character_limit: 0)
+          end
+        end
+      end
+    end
+
+    assert_includes error.message, "character_limit must be a positive integer"
+  end
+
+  def test_character_limit_rejects_negative
+    error = assert_raises(ArgumentError) do
+      render_in_view_context do
+        primer_form_with(url: "/foo") do |f|
+          render_inline_form(f) do |text_field_form|
+            text_field_form.text_field(name: :username, label: "Username", character_limit: -5)
+          end
+        end
+      end
+    end
+
+    assert_includes error.message, "character_limit must be a positive integer"
+  end
+
   def test_character_limit_with_caption
     render_in_view_context do
       primer_form_with(url: "/foo") do |f|

From d723b4744bb9ca0135220f9bd003d4f4240d2080 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 3 Dec 2025 17:51:22 +0000
Subject: [PATCH 09/33] Adds form_control tests

---
 test/lib/primer/forms/form_control_test.rb | 51 ++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/test/lib/primer/forms/form_control_test.rb b/test/lib/primer/forms/form_control_test.rb
index 9eaf1af7d5..4831232c92 100644
--- a/test/lib/primer/forms/form_control_test.rb
+++ b/test/lib/primer/forms/form_control_test.rb
@@ -54,4 +54,55 @@ def test_labels_use_custom_ids_when_provided
     assert_selector "input[id=bazboo]"
     assert_selector "label[for=bazboo]"
   end
+
+  def test_character_limit_generates_aria_live_region
+    render_in_view_context do
+      primer_form_with(url: "/foo") do |f|
+        render_inline_form(f) do |test_form|
+          test_form.text_field(name: :username, label: "Username", character_limit: 50)
+        end
+      end
+    end
+
+    # Aria-live region exists and is configured correctly
+    assert_selector "span.sr-only[aria-live='polite']" do |element|
+      assert element["id"].start_with?("username-character-count-sr-")
+      # Should be empty initially (populated by JS)
+      assert_equal "", element.text.strip
+    end
+
+    # Character limit display is visible but hidden from screen readers
+    assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "50 characters remaining."
+  end
+
+  def test_character_limit_works_with_text_area
+    render_in_view_context do
+      primer_form_with(url: "/foo") do |f|
+        render_inline_form(f) do |test_form|
+          test_form.text_area(name: :bio, label: "Bio", character_limit: 200)
+        end
+      end
+    end
+
+    # Wrapped in primer-text-area custom element
+    assert_selector "primer-text-area"
+
+    # Character limit elements present
+    assert_selector "div.FormControl-caption--characterLimit[data-target='primer-text-area.characterLimitElement'][data-max-length='200']"
+    assert_selector "span.sr-only[aria-live='polite']"
+  end
+
+  def test_character_limit_with_caption_shows_both
+    render_in_view_context do
+      primer_form_with(url: "/foo") do |f|
+        render_inline_form(f) do |test_form|
+          test_form.text_field(name: :title, label: "Title", caption: "Keep it short and descriptive", character_limit: 100)
+        end
+      end
+    end
+
+    # Both caption text and character limit are present
+    assert_selector "span.FormControl-caption", text: "Keep it short and descriptive"
+    assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "100 characters remaining."
+  end
 end

From 7e2fd3e95b4f03990ba544afa20d23cf227c6ac0 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 3 Dec 2025 17:52:41 +0000
Subject: [PATCH 10/33] Adds changeset

---
 .changeset/plenty-regions-warn.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/plenty-regions-warn.md

diff --git a/.changeset/plenty-regions-warn.md b/.changeset/plenty-regions-warn.md
new file mode 100644
index 0000000000..19f5164b6c
--- /dev/null
+++ b/.changeset/plenty-regions-warn.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Adds character_limit option to TextArea and TextField components

From 066066b9232a9f21a2964e03a04e3aac1624f7ed Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 3 Dec 2025 18:12:06 +0000
Subject: [PATCH 11/33] Adds integration tests

---
 previews/primer/alpha/text_area_preview.rb  |   4 +-
 previews/primer/alpha/text_field_preview.rb |   4 +-
 test/system/alpha/text_area_test.rb         | 138 ++++++++++++++++++++
 test/system/alpha/text_field_test.rb        | 126 ++++++++++++++++++
 4 files changed, 268 insertions(+), 4 deletions(-)
 create mode 100644 test/system/alpha/text_area_test.rb

diff --git a/previews/primer/alpha/text_area_preview.rb b/previews/primer/alpha/text_area_preview.rb
index 40dae9bafe..239035a423 100644
--- a/previews/primer/alpha/text_area_preview.rb
+++ b/previews/primer/alpha/text_area_preview.rb
@@ -98,9 +98,9 @@ def with_validation_message
       end
 
       # @label With character limit
-      # @snapshot
+      # @snapshot interactive
       def with_character_limit
-        render(Primer::Alpha::TextArea.new(character_limit: 100, name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(character_limit: 10, name: "my-text-area", label: "Tell me about yourself"))
       end
 
       # @label With character limit and caption
diff --git a/previews/primer/alpha/text_field_preview.rb b/previews/primer/alpha/text_field_preview.rb
index 9b985adaaf..7f52e8e21d 100644
--- a/previews/primer/alpha/text_field_preview.rb
+++ b/previews/primer/alpha/text_field_preview.rb
@@ -218,9 +218,9 @@ def with_validation_message
       end
 
       # @label With character limit
-      # @snapshot
+      # @snapshot interactive
       def with_character_limit
-        render(Primer::Alpha::TextField.new(character_limit: 20, name: "my-text-field-18", label: "Username"))
+        render(Primer::Alpha::TextField.new(character_limit: 10, name: "my-text-field-18", label: "Username"))
       end
 
       # @label With character limit and caption
diff --git a/test/system/alpha/text_area_test.rb b/test/system/alpha/text_area_test.rb
new file mode 100644
index 0000000000..71c30fb658
--- /dev/null
+++ b/test/system/alpha/text_area_test.rb
@@ -0,0 +1,138 @@
+# frozen_string_literal: true
+
+require "system/test_case"
+
+module Alpha
+  class IntegrationTextAreaTest < System::TestCase
+    include Primer::JsTestHelpers
+
+    def test_character_limit_updates_on_input
+      visit_preview(:with_character_limit)
+
+      # Initial state - should show full limit remaining
+      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "10 characters remaining."
+
+      # Validation should be hidden initially
+      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :hidden
+
+      # Type some text (5 characters)
+      textarea = find("textarea[data-target='primer-text-area.inputElement']")
+      textarea.fill_in(with: "Hello")
+
+      # Wait for JS to update
+      sleep 0.2
+
+      # Character count should update to show 5 remaining
+      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "5 characters remaining."
+
+      # Validation should still be hidden
+      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :hidden
+    end
+
+    def test_character_limit_shows_validation_when_exceeded
+      visit_preview(:with_character_limit)
+
+      textarea = find("textarea[data-target='primer-text-area.inputElement']")
+
+      # Type text that exceeds the 10 character limit
+      textarea.fill_in(with: "Hello World!") # 12 characters
+
+      # Wait for JS to update (includes debounce time)
+      sleep 0.3
+
+      # Character count should show "over" message
+      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "2 characters over."
+
+      # Validation error should be visible
+      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :visible do |element|
+        assert_includes element.text, "You've exceeded the character limit"
+      end
+
+      # Input should be marked as invalid
+      assert_selector "textarea[invalid='true'][aria-invalid='true']"
+
+      # Check that aria-describedby includes the validation ID
+      validation_element = find("div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']")
+      validation_id = validation_element["id"]
+      
+      textarea_aria_describedby = textarea["aria-describedby"]
+      assert_includes textarea_aria_describedby, validation_id, "textarea aria-describedby should include validation element ID"
+    end
+
+    def test_character_limit_clears_validation_when_back_under_limit
+      visit_preview(:with_character_limit)
+
+      textarea = find("textarea[data-target='primer-text-area.inputElement']")
+      
+      # First, exceed the limit
+      textarea.fill_in(with: "Hello World!") # 12 characters
+      sleep 0.3
+
+      # Verify error is shown
+      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :visible
+      assert_selector "textarea[invalid='true'][aria-invalid='true']"
+
+      # Now delete characters to get back under the limit
+      textarea.fill_in(with: "Hello") # 5 characters
+      sleep 0.3
+
+      # Character count should update
+      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "5 characters remaining."
+
+      # Validation should be hidden again
+      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :hidden
+
+      # Input should not be marked as invalid
+      refute_selector "textarea[invalid='true']"
+      refute_selector "textarea[aria-invalid='true']"
+    end
+
+    def test_character_limit_screen_reader_text_updates
+      visit_preview(:with_character_limit)
+
+      textarea = find("textarea[data-target='primer-text-area.inputElement']")
+      
+      # Get the aria-live region
+      sr_element = find("span.sr-only[aria-live='polite']")
+      
+      # Initially should be empty (or match initial state)
+      initial_text = sr_element.text
+
+      # Type some text
+      textarea.fill_in(with: "Test")
+      
+      # Wait for debounced update (150ms + buffer)
+      sleep 0.3
+
+      # Screen reader text should be updated
+      assert_equal "6 characters remaining.", sr_element.text
+
+      # Type more to exceed limit
+      textarea.fill_in(with: "Hello World!") # 12 characters
+      sleep 0.3
+
+      # Screen reader should announce over limit
+      assert_equal "2 characters over.", sr_element.text
+    end
+
+    def test_character_limit_singular_vs_plural
+      visit_preview(:with_character_limit)
+
+      textarea = find("textarea[data-target='primer-text-area.inputElement']")
+      
+      # Type to leave exactly 1 character remaining
+      textarea.fill_in(with: "123456789") # 9 characters, limit is 10
+      sleep 0.3
+
+      # Should use singular "character"
+      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "1 character remaining."
+
+      # Type one more to exceed by exactly 1
+      textarea.fill_in(with: "12345678901") # 11 characters
+      sleep 0.3
+
+      # Should use singular "character" for over
+      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "1 character over."
+    end
+  end
+end
diff --git a/test/system/alpha/text_field_test.rb b/test/system/alpha/text_field_test.rb
index 69de8e3629..68c9008ecd 100644
--- a/test/system/alpha/text_field_test.rb
+++ b/test/system/alpha/text_field_test.rb
@@ -116,5 +116,131 @@ def test_shows_and_hides_screenreader_text
 
       refute_selector "[data-target='primer-text-field.leadingSpinner'] .sr-only"
     end
+
+    def test_character_limit_updates_on_input
+      visit_preview(:with_character_limit)
+
+      # Initial state - should show full limit remaining
+      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "10 characters remaining."
+      
+      # Validation should be hidden initially
+      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
+
+      # Type some text (5 characters)
+      input = find("input[type=text][data-target*='primer-text-field.inputElement']")
+      input.fill_in(with: "Hello")
+
+      # Wait for JS to update
+      sleep 0.2
+
+      # Character count should update to show 5 remaining
+      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "5 characters remaining."
+      
+      # Validation should still be hidden
+      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
+    end
+
+    def test_character_limit_shows_validation_when_exceeded
+      visit_preview(:with_character_limit)
+
+      input = find("input[type=text][data-target*='primer-text-field.inputElement']")
+      
+      # Type text that exceeds the 10 character limit
+      input.fill_in(with: "Hello World!") # 12 characters
+
+      # Wait for JS to update (includes debounce time)
+      sleep 0.3
+
+      # Character count should show "over" message
+      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "2 characters over."
+
+      # Validation error should be visible
+      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :visible do |element|
+        assert_includes element.text, "You've exceeded the character limit"
+      end
+
+      # Input should be marked as invalid
+      assert_selector "input[invalid='true'][aria-invalid='true']"
+
+      # Check that aria-describedby includes the validation ID
+      validation_element = find("div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']")
+      validation_id = validation_element["id"]
+      
+      input_aria_describedby = input["aria-describedby"]
+      assert_includes input_aria_describedby, validation_id, "input aria-describedby should include validation element ID"
+    end
+
+    def test_character_limit_clears_validation_when_back_under_limit
+      visit_preview(:with_character_limit)
+
+      input = find("input[type=text][data-target*='primer-text-field.inputElement']")
+      
+      # First, exceed the limit
+      input.fill_in(with: "Hello World!") # 12 characters
+      sleep 0.3
+
+      # Verify error is shown
+      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :visible
+      assert_selector "input[invalid='true'][aria-invalid='true']"
+
+      # Now delete characters to get back under the limit
+      input.fill_in(with: "Hello") # 5 characters
+      sleep 0.3
+
+      # Character count should update
+      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "5 characters remaining."
+
+      # Validation should be hidden again
+      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
+
+      # Input should not be marked as invalid
+      refute_selector "input[invalid='true']"
+      refute_selector "input[aria-invalid='true']"
+    end
+
+    def test_character_limit_screen_reader_text_updates
+      visit_preview(:with_character_limit)
+
+      input = find("input[type=text][data-target*='primer-text-field.inputElement']")
+      
+      # Get the aria-live region
+      sr_element = find("span.sr-only[aria-live='polite']")
+
+      # Type some text
+      input.fill_in(with: "Test")
+      
+      # Wait for debounced update (150ms + buffer)
+      sleep 0.3
+
+      # Screen reader text should be updated
+      assert_equal "6 characters remaining.", sr_element.text
+
+      # Type more to exceed limit
+      input.fill_in(with: "Hello World!") # 12 characters
+      sleep 0.3
+
+      # Screen reader should announce over limit
+      assert_equal "2 characters over.", sr_element.text
+    end
+
+    def test_character_limit_singular_vs_plural
+      visit_preview(:with_character_limit)
+
+      input = find("input[type=text][data-target*='primer-text-field.inputElement']")
+      
+      # Type to leave exactly 1 character remaining
+      input.fill_in(with: "123456789") # 9 characters, limit is 10
+      sleep 0.3
+
+      # Should use singular "character"
+      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "1 character remaining."
+
+      # Type one more to exceed by exactly 1
+      input.fill_in(with: "12345678901") # 11 characters
+      sleep 0.3
+
+      # Should use singular "character" for over
+      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "1 character over."
+    end
   end
 end

From 3530fbbdecc19a884b8b8b8d240f6d92ec1906da Mon Sep 17 00:00:00 2001
From: primer-css <primer-css@users.noreply.github.com>
Date: Wed, 3 Dec 2025 18:13:28 +0000
Subject: [PATCH 12/33] Generating static files

---
 static/info_arch.json | 4 ++--
 static/previews.json  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/static/info_arch.json b/static/info_arch.json
index 8d1513aef5..d02b92cca7 100644
--- a/static/info_arch.json
+++ b/static/info_arch.json
@@ -8830,7 +8830,7 @@
       {
         "preview_path": "primer/alpha/text_area/with_character_limit",
         "name": "with_character_limit",
-        "snapshot": "true",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -9331,7 +9331,7 @@
       {
         "preview_path": "primer/alpha/text_field/with_character_limit",
         "name": "with_character_limit",
-        "snapshot": "true",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"
diff --git a/static/previews.json b/static/previews.json
index 6265e1abfc..45c91827c8 100644
--- a/static/previews.json
+++ b/static/previews.json
@@ -6993,7 +6993,7 @@
       {
         "preview_path": "primer/alpha/text_area/with_character_limit",
         "name": "with_character_limit",
-        "snapshot": "true",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7313,7 +7313,7 @@
       {
         "preview_path": "primer/alpha/text_field/with_character_limit",
         "name": "with_character_limit",
-        "snapshot": "true",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"

From 3b60cbded92e575f512cb299f005da6614cdaa93 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Thu, 4 Dec 2025 15:52:08 +0000
Subject: [PATCH 13/33] Updates docs in Lookbook

---
 app/components/primer/alpha/text_area.rb  |  1 +
 app/components/primer/alpha/text_field.rb |  1 +
 app/lib/primer/forms/dsl/input.rb         |  3 ++
 package-lock.json                         | 62 +++++++++++++++++++----
 4 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/app/components/primer/alpha/text_area.rb b/app/components/primer/alpha/text_area.rb
index 93c216d59e..89ac365030 100644
--- a/app/components/primer/alpha/text_area.rb
+++ b/app/components/primer/alpha/text_area.rb
@@ -18,6 +18,7 @@ class TextArea < Primer::Component
       # @!method initialize
       #
       # @macro form_full_width_arguments
+      # @macro form_input_character_limit_arguments
       # @macro form_input_arguments
     end
   end
diff --git a/app/components/primer/alpha/text_field.rb b/app/components/primer/alpha/text_field.rb
index 3fc5590fc2..b33b9d2100 100644
--- a/app/components/primer/alpha/text_field.rb
+++ b/app/components/primer/alpha/text_field.rb
@@ -19,6 +19,7 @@ class TextField < Primer::Component
       #
       # @macro form_size_arguments
       # @macro form_full_width_arguments
+      # @macro form_input_character_limit_arguments
       # @macro form_input_arguments
       #
       # @param placeholder [String] Placeholder text.
diff --git a/app/lib/primer/forms/dsl/input.rb b/app/lib/primer/forms/dsl/input.rb
index 48127415c4..953ed9ec82 100644
--- a/app/lib/primer/forms/dsl/input.rb
+++ b/app/lib/primer/forms/dsl/input.rb
@@ -33,6 +33,9 @@ class Input
         # @!macro [new] form_full_width_arguments
         #   @param full_width [Boolean] When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`.
 
+        # @!macro [new] form_input_character_limit_arguments
+        #   @param character_limit [Number] Optional character limit for the input. If provided, a character counter will be displayed below the input.
+
         # @!macro [new] form_system_arguments
         #   @param system_arguments [Hash] A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details.
 
diff --git a/package-lock.json b/package-lock.json
index a19ada9905..6f0d01348d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -817,6 +817,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -840,6 +841,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -950,6 +952,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -1376,6 +1379,7 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -3616,7 +3620,8 @@
       "version": "20.3.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
       "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
@@ -3674,6 +3679,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.45.0.tgz",
       "integrity": "sha512-TGf22kon8KW+DeKaUmOibKWktRY8b2NSAZNdtWh798COm1NWx8+xJ6iFBtk3IvLdv6+LGLJLRlyhrhEDZWargQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.45.0",
         "@typescript-eslint/types": "8.45.0",
@@ -3894,6 +3900,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4346,6 +4353,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -4890,6 +4898,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -5672,6 +5681,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.37.0.tgz",
       "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5732,6 +5742,7 @@
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
       "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
       "dev": true,
+      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -9285,6 +9296,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -10321,6 +10333,7 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -10950,6 +10963,7 @@
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -11204,6 +11218,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "dev": true,
+      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -11848,6 +11863,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@csstools/css-parser-algorithms": "^3.0.4",
         "@csstools/css-tokenizer": "^3.0.3",
@@ -12149,6 +12165,7 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -12424,6 +12441,7 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -12484,7 +12502,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -12581,6 +12600,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -12835,6 +12855,7 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13961,13 +13982,15 @@
       "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
       "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
       "dev": true,
+      "peer": true,
       "requires": {}
     },
     "@csstools/css-tokenizer": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
       "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@csstools/media-query-list-parser": {
       "version": "4.0.3",
@@ -14011,6 +14034,7 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
+          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -14193,6 +14217,7 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
+          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -15454,7 +15479,8 @@
       "version": "20.3.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
       "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "@types/resolve": {
       "version": "1.20.2",
@@ -15498,6 +15524,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.45.0.tgz",
       "integrity": "sha512-TGf22kon8KW+DeKaUmOibKWktRY8b2NSAZNdtWh798COm1NWx8+xJ6iFBtk3IvLdv6+LGLJLRlyhrhEDZWargQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@typescript-eslint/scope-manager": "8.45.0",
         "@typescript-eslint/types": "8.45.0",
@@ -15625,7 +15652,8 @@
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "acorn-jsx": {
       "version": "5.3.2",
@@ -15907,6 +15935,7 @@
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz",
       "integrity": "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -16252,6 +16281,7 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
+          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -16799,6 +16829,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.37.0.tgz",
       "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -16865,6 +16896,7 @@
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
       "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
       "dev": true,
+      "peer": true,
       "requires": {}
     },
     "eslint-import-resolver-node": {
@@ -19169,6 +19201,7 @@
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
       "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -19728,6 +19761,7 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
+          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -20103,7 +20137,8 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "prettier-linter-helpers": {
       "version": "1.0.0",
@@ -20278,6 +20313,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -20722,6 +20758,7 @@
       "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.20.0.tgz",
       "integrity": "sha512-B5Myu9WRxrgKuLs3YyUXLP2H0mrbejwNxPmyADlACWwFsrL8Bmor/nTSh4OMae5sHjOz6gkSeccQH34gM4/nAw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@csstools/css-parser-algorithms": "^3.0.4",
         "@csstools/css-tokenizer": "^3.0.3",
@@ -20835,6 +20872,7 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
+          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -21105,7 +21143,8 @@
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
           "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-          "dev": true
+          "dev": true,
+          "peer": true
         }
       }
     },
@@ -21153,7 +21192,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "type-check": {
       "version": "0.4.0",
@@ -21221,7 +21261,8 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "typescript-eslint": {
       "version": "8.45.0",
@@ -21329,7 +21370,8 @@
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
           "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-          "dev": true
+          "dev": true,
+          "peer": true
         },
         "rollup": {
           "version": "4.39.0",

From 413f04c62213e43d53636c2bd1100423abece43b Mon Sep 17 00:00:00 2001
From: primer-css <primer-css@users.noreply.github.com>
Date: Thu, 4 Dec 2025 15:53:45 +0000
Subject: [PATCH 14/33] Generating static files

---
 static/arguments.json | 12 ++++++++++++
 static/info_arch.json | 12 ++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/static/arguments.json b/static/arguments.json
index 0326f3b97f..60080b0596 100644
--- a/static/arguments.json
+++ b/static/arguments.json
@@ -2852,6 +2852,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",
@@ -2982,6 +2988,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",
diff --git a/static/info_arch.json b/static/info_arch.json
index d02b92cca7..4492479e6b 100644
--- a/static/info_arch.json
+++ b/static/info_arch.json
@@ -8598,6 +8598,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",
@@ -8882,6 +8888,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",

From ab4378408decea362215d4bf560ef7da26031bcc Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Thu, 4 Dec 2025 18:02:20 +0000
Subject: [PATCH 15/33] Removes changes to form_control

---
 app/components/primer/alpha/form_control.rb | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/app/components/primer/alpha/form_control.rb b/app/components/primer/alpha/form_control.rb
index 7758b96f36..0433f9c1f9 100644
--- a/app/components/primer/alpha/form_control.rb
+++ b/app/components/primer/alpha/form_control.rb
@@ -48,16 +48,14 @@ class FormControl < Primer::Component
       # @param visually_hide_label [Boolean] When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers.
       # @param full_width [Boolean] When set to `true`, the form control will take up all the horizontal space allowed by its container.
       # @param label_arguments [Hash] HTML attributes to attach to the `<label>` element that labels the input.
-      # @param character_limit [Number] Optional character limit for the input. If provided, a character counter will be displayed below the input.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(label:, caption: nil, validation_message: nil, required: false, visually_hide_label: false, full_width: false, label_arguments: {}, character_limit: nil, **system_arguments)
+      def initialize(label:, caption: nil, validation_message: nil, required: false, visually_hide_label: false, full_width: false, label_arguments: {}, **system_arguments)
         @label = label
         @init_caption = caption
         @validation_message = validation_message
         @required = required
         @visually_hide_label = visually_hide_label
         @full_width = full_width
-        @character_limit = character_limit
         @label_arguments = label_arguments
         @system_arguments = system_arguments
 
@@ -110,12 +108,6 @@ def full_width?
         @full_width
       end
 
-      # Returns the character limit for the input, if set.
-      # @returns [Number, nil]
-      def character_limit?
-        @character_limit
-      end
-
       private
 
       def before_render

From e9595b35063b372c83b480d90c81f8571364c259 Mon Sep 17 00:00:00 2001
From: primer-css <primer-css@users.noreply.github.com>
Date: Thu, 4 Dec 2025 18:03:24 +0000
Subject: [PATCH 16/33] Generating static files

---
 static/arguments.json |  6 ------
 static/info_arch.json | 14 --------------
 2 files changed, 20 deletions(-)

diff --git a/static/arguments.json b/static/arguments.json
index 60080b0596..8b6db2c6d0 100644
--- a/static/arguments.json
+++ b/static/arguments.json
@@ -1303,12 +1303,6 @@
         "default": "`{}`",
         "description": "HTML attributes to attach to the `<label>` element that labels the input."
       },
-      {
-        "name": "character_limit",
-        "type": "Number",
-        "default": "`nil`",
-        "description": "Optional character limit for the input. If provided, a character counter will be displayed below the input."
-      },
       {
         "name": "system_arguments",
         "type": "Hash",
diff --git a/static/info_arch.json b/static/info_arch.json
index 4492479e6b..c43278fdf3 100644
--- a/static/info_arch.json
+++ b/static/info_arch.json
@@ -4254,12 +4254,6 @@
         "default": "`{}`",
         "description": "HTML attributes to attach to the `<label>` element that labels the input."
       },
-      {
-        "name": "character_limit",
-        "type": "Number",
-        "default": "`nil`",
-        "description": "Optional character limit for the input. If provided, a character counter will be displayed below the input."
-      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -4303,14 +4297,6 @@
         "return_types": [
           "Boolean"
         ]
-      },
-      {
-        "name": "character_limit?",
-        "description": "Returns the character limit for the input, if set.",
-        "parameters": [],
-        "return_types": [
-          "Boolean"
-        ]
       }
     ],
     "previews": [

From a65216fe943554f30b6b9c4bcfdaafea2412c0a2 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Thu, 4 Dec 2025 19:40:30 +0000
Subject: [PATCH 17/33] Adds render tests

---
 test/lib/primer/forms/text_area_input_test.rb  | 12 ++++++++++++
 test/lib/primer/forms/text_field_input_test.rb | 14 +++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/test/lib/primer/forms/text_area_input_test.rb b/test/lib/primer/forms/text_area_input_test.rb
index f457e955b8..2a858a6b17 100644
--- a/test/lib/primer/forms/text_area_input_test.rb
+++ b/test/lib/primer/forms/text_area_input_test.rb
@@ -33,6 +33,18 @@ def test_no_error_markup
     refute_selector ".field_with_errors", visible: :all
   end
 
+  def test_renders_character_limit_form
+    render_in_view_context do
+      primer_form_with(url: "/foo") do |f|
+        render(TextAreaWithCharacterLimitForm.new(f))
+      end
+    end
+
+    assert_selector "primer-text-area"
+    assert_selector "textarea[name=bio]"
+    assert_selector "div.FormControl-caption--characterLimit[data-max-length='100']"
+  end
+
   def test_character_limit
     render_in_view_context do
       primer_form_with(url: "/foo") do |f|
diff --git a/test/lib/primer/forms/text_field_input_test.rb b/test/lib/primer/forms/text_field_input_test.rb
index bec0e33313..452d1d0133 100644
--- a/test/lib/primer/forms/text_field_input_test.rb
+++ b/test/lib/primer/forms/text_field_input_test.rb
@@ -61,6 +61,18 @@ def test_enforces_leading_visual_when_spinner_requested
     assert_includes error.message, "must also specify a leading visual"
   end
 
+  def test_renders_character_limit_form
+    render_in_view_context do
+      primer_form_with(url: "/foo") do |f|
+        render(TextFieldWithCharacterLimitForm.new(f))
+      end
+    end
+
+    assert_selector "primer-text-field"
+    assert_selector "input[name=username]"
+    assert_selector "div.FormControl-caption--characterLimit[data-max-length='20']"
+  end
+
   def test_character_limit
     render_in_view_context do
       primer_form_with(url: "/foo") do |f|
@@ -117,7 +129,7 @@ def test_character_limit_with_caption
       end
     end
 
-    assert_selector "div.FormControl-caption--characterLimit", text: "20 characters remaining."
+    assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "20 characters remaining."
     assert_selector "span.FormControl-caption", text: "Choose a unique username"
   end
 end

From c2186f52e44db9a71733f8539f4dde20d638e3ed Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Thu, 4 Dec 2025 19:43:20 +0000
Subject: [PATCH 18/33] Updates tests

---
 test/lib/primer/forms/text_area_input_test.rb  | 14 ++++++--------
 test/lib/primer/forms/text_field_input_test.rb | 16 ----------------
 2 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/test/lib/primer/forms/text_area_input_test.rb b/test/lib/primer/forms/text_area_input_test.rb
index 2a858a6b17..7774362b58 100644
--- a/test/lib/primer/forms/text_area_input_test.rb
+++ b/test/lib/primer/forms/text_area_input_test.rb
@@ -41,8 +41,11 @@ def test_renders_character_limit_form
     end
 
     assert_selector "primer-text-area"
-    assert_selector "textarea[name=bio]"
-    assert_selector "div.FormControl-caption--characterLimit[data-max-length='100']"
+    assert_selector "div.FormControl-caption--characterLimit[data-target='primer-text-area.characterLimitElement'][data-max-length='100']", text: "100 characters remaining."
+    assert_selector "textarea[data-target='primer-text-area.inputElement']"
+    assert_selector "span.sr-only[aria-live='polite']" do |span|
+      assert span["id"].start_with?("bio-character-count-sr-")
+    end
   end
 
   def test_character_limit
@@ -54,14 +57,9 @@ def test_character_limit
       end
     end
 
-    assert_selector "primer-text-area"
-    assert_selector "div.FormControl-caption--characterLimit[data-target='primer-text-area.characterLimitElement'][data-max-length='100']", text: "100 characters remaining."
-    assert_selector "textarea[data-target='primer-text-area.inputElement']"
 
     # Check for aria-live region
-    assert_selector "span.sr-only[aria-live='polite']" do |span|
-      assert span["id"].start_with?("bio-character-count-sr-")
-    end
+
   end
 
   def test_character_limit_rejects_zero
diff --git a/test/lib/primer/forms/text_field_input_test.rb b/test/lib/primer/forms/text_field_input_test.rb
index 452d1d0133..0edb8af903 100644
--- a/test/lib/primer/forms/text_field_input_test.rb
+++ b/test/lib/primer/forms/text_field_input_test.rb
@@ -68,25 +68,9 @@ def test_renders_character_limit_form
       end
     end
 
-    assert_selector "primer-text-field"
-    assert_selector "input[name=username]"
-    assert_selector "div.FormControl-caption--characterLimit[data-max-length='20']"
-  end
-
-  def test_character_limit
-    render_in_view_context do
-      primer_form_with(url: "/foo") do |f|
-        render_inline_form(f) do |text_field_form|
-          text_field_form.text_field(name: :username, label: "Username", character_limit: 20)
-        end
-      end
-    end
-
     assert_selector "primer-text-field"
     assert_selector "div.FormControl-caption--characterLimit[data-target='primer-text-field.characterLimitElement'][data-max-length='20']", text: "20 characters remaining."
     assert_selector "input[type=text][data-target*='primer-text-field.inputElement']"
-
-    # Check for aria-live region
     assert_selector "span.sr-only[aria-live='polite']" do |span|
       assert span["id"].start_with?("username-character-count-sr-")
     end

From 8b09faf7f451de6087bf1833d6f24023732d9bf5 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Fri, 5 Dec 2025 18:30:29 +0000
Subject: [PATCH 19/33] Minor updates

---
 app/lib/primer/forms/character_counter.ts     | 25 +++++++++----------
 app/lib/primer/forms/dsl/text_area_input.rb   |  4 +++
 app/lib/primer/forms/dsl/text_field_input.rb  |  4 +++
 test/lib/primer/forms/text_area_input_test.rb |  4 ---
 test/system/alpha/text_field_test.rb          | 16 ++++++------
 5 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/app/lib/primer/forms/character_counter.ts b/app/lib/primer/forms/character_counter.ts
index b99f519d34..22b76bafa9 100644
--- a/app/lib/primer/forms/character_counter.ts
+++ b/app/lib/primer/forms/character_counter.ts
@@ -36,9 +36,10 @@ export class CharacterCounter {
   private updateCharacterCount(): void {
     if (!this.characterLimitElement) return
 
-    const maxLength = parseInt(this.characterLimitElement.getAttribute('data-max-length') || '0', 10)
-    if (maxLength === 0) return
+    const maxLengthAttr = this.characterLimitElement.getAttribute('data-max-length')
+    if (!maxLengthAttr) return
 
+    const maxLength = parseInt(maxLengthAttr, 10)
     const currentLength = this.inputElement.value.length
     const charactersRemaining = maxLength - currentLength
     let message = ''
@@ -49,8 +50,7 @@ export class CharacterCounter {
       this.characterLimitElement.textContent = message
       this.clearError()
     } else {
-      // Over the limit
-      const charactersOver = Math.abs(charactersRemaining)
+      const charactersOver = -charactersRemaining
       const characterText = charactersOver === 1 ? 'character' : 'characters'
       message = `${charactersOver} ${characterText} over.`
       this.characterLimitElement.textContent = message
@@ -61,28 +61,27 @@ export class CharacterCounter {
   }
 
   /**
-   * Announce character count to screen readers
+   * Announce character count to screen readers with debouncing
    */
   private announceToScreenReader(message: string): void {
-    // Clear any existing timeout
     if (this.announceTimeout) {
       clearTimeout(this.announceTimeout)
     }
 
-    // Set a new timeout to announce after a delay
     this.announceTimeout = window.setTimeout(() => {
       const srTargetId = this.characterLimitElement?.getAttribute('data-sr-target')
-      if (srTargetId) {
-        const srElement = document.getElementById(srTargetId)
-        if (srElement) {
-          srElement.textContent = message
-        }
+      if (!srTargetId) return
+
+      const srElement = document.getElementById(srTargetId)
+      if (srElement) {
+        srElement.textContent = message
       }
     }, this.SCREEN_READER_DELAY)
   }
 
   /**
-   * Show validation error when character limit is exceeded
+   * Show validation error when character limit is exceeded.
+   * Required since default validation on inputs only appears after an attempt to submit the form.
    */
   private setError(): void {
     if (!this.validationElement || !this.validationMessageElement) return
diff --git a/app/lib/primer/forms/dsl/text_area_input.rb b/app/lib/primer/forms/dsl/text_area_input.rb
index 0790b1d3b0..a7973c27c8 100644
--- a/app/lib/primer/forms/dsl/text_area_input.rb
+++ b/app/lib/primer/forms/dsl/text_area_input.rb
@@ -37,6 +37,10 @@ def character_limit_sr_id
           @character_limit_sr_id ||= "#{name}-character-count-sr-#{SecureRandom.hex(4)}"
         end
 
+        def character_limit_display_id
+          @character_limit_display_id ||= "#{name}-character-limit-display-#{SecureRandom.hex(4)}"
+        end
+
         def character_limit_validation_id
           @character_limit_validation_id ||= "#{name}-character-limit-validation-#{SecureRandom.hex(4)}"
         end
diff --git a/app/lib/primer/forms/dsl/text_field_input.rb b/app/lib/primer/forms/dsl/text_field_input.rb
index e11efe3a10..825cdfd75c 100644
--- a/app/lib/primer/forms/dsl/text_field_input.rb
+++ b/app/lib/primer/forms/dsl/text_field_input.rb
@@ -80,6 +80,10 @@ def character_limit_sr_id
           @character_limit_sr_id ||= "#{name}-character-count-sr-#{SecureRandom.hex(4)}"
         end
 
+        def character_limit_display_id
+          @character_limit_display_id ||= "#{name}-character-limit-display-#{SecureRandom.hex(4)}"
+        end
+
         def character_limit_validation_id
           @character_limit_validation_id ||= "#{name}-character-limit-validation-#{SecureRandom.hex(4)}"
         end
diff --git a/test/lib/primer/forms/text_area_input_test.rb b/test/lib/primer/forms/text_area_input_test.rb
index 7774362b58..7424cbb6ae 100644
--- a/test/lib/primer/forms/text_area_input_test.rb
+++ b/test/lib/primer/forms/text_area_input_test.rb
@@ -56,10 +56,6 @@ def test_character_limit
         end
       end
     end
-
-
-    # Check for aria-live region
-
   end
 
   def test_character_limit_rejects_zero
diff --git a/test/system/alpha/text_field_test.rb b/test/system/alpha/text_field_test.rb
index 68c9008ecd..8381a33933 100644
--- a/test/system/alpha/text_field_test.rb
+++ b/test/system/alpha/text_field_test.rb
@@ -122,7 +122,7 @@ def test_character_limit_updates_on_input
 
       # Initial state - should show full limit remaining
       assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "10 characters remaining."
-      
+
       # Validation should be hidden initially
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
 
@@ -135,7 +135,7 @@ def test_character_limit_updates_on_input
 
       # Character count should update to show 5 remaining
       assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "5 characters remaining."
-      
+
       # Validation should still be hidden
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
     end
@@ -144,7 +144,7 @@ def test_character_limit_shows_validation_when_exceeded
       visit_preview(:with_character_limit)
 
       input = find("input[type=text][data-target*='primer-text-field.inputElement']")
-      
+
       # Type text that exceeds the 10 character limit
       input.fill_in(with: "Hello World!") # 12 characters
 
@@ -165,7 +165,7 @@ def test_character_limit_shows_validation_when_exceeded
       # Check that aria-describedby includes the validation ID
       validation_element = find("div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']")
       validation_id = validation_element["id"]
-      
+
       input_aria_describedby = input["aria-describedby"]
       assert_includes input_aria_describedby, validation_id, "input aria-describedby should include validation element ID"
     end
@@ -174,7 +174,7 @@ def test_character_limit_clears_validation_when_back_under_limit
       visit_preview(:with_character_limit)
 
       input = find("input[type=text][data-target*='primer-text-field.inputElement']")
-      
+
       # First, exceed the limit
       input.fill_in(with: "Hello World!") # 12 characters
       sleep 0.3
@@ -202,13 +202,13 @@ def test_character_limit_screen_reader_text_updates
       visit_preview(:with_character_limit)
 
       input = find("input[type=text][data-target*='primer-text-field.inputElement']")
-      
+
       # Get the aria-live region
       sr_element = find("span.sr-only[aria-live='polite']")
 
       # Type some text
       input.fill_in(with: "Test")
-      
+
       # Wait for debounced update (150ms + buffer)
       sleep 0.3
 
@@ -227,7 +227,7 @@ def test_character_limit_singular_vs_plural
       visit_preview(:with_character_limit)
 
       input = find("input[type=text][data-target*='primer-text-field.inputElement']")
-      
+
       # Type to leave exactly 1 character remaining
       input.fill_in(with: "123456789") # 9 characters, limit is 10
       sleep 0.3

From a3c4625e3e726959db7bc9ef04ff01bfad7328ec Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Fri, 5 Dec 2025 20:41:19 +0000
Subject: [PATCH 20/33] Updates tests, moves caption

---
 app/components/primer/alpha/text_field.pcss   |  5 ----
 app/lib/primer/forms/caption.html.erb         | 12 ++++-----
 app/lib/primer/forms/character_counter.ts     |  2 +-
 app/lib/primer/forms/dsl/text_area_input.rb   |  4 ---
 app/lib/primer/forms/dsl/text_field_input.rb  |  4 ---
 test/lib/primer/forms/form_control_test.rb    |  7 +++---
 test/lib/primer/forms/text_area_input_test.rb |  4 +--
 .../lib/primer/forms/text_field_input_test.rb |  4 +--
 test/system/alpha/text_area_test.rb           | 25 +++++++++----------
 test/system/alpha/text_field_test.rb          | 12 ++++-----
 10 files changed, 31 insertions(+), 48 deletions(-)

diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
index c1967c278a..4cb6848c65 100644
--- a/app/components/primer/alpha/text_field.pcss
+++ b/app/components/primer/alpha/text_field.pcss
@@ -34,11 +34,6 @@
   color: var(--fgColor-muted);
 }
 
-/* caption with character limit */
-.FormControl-caption--characterLimit {
-  margin-bottom: var(--base-size-4);
-}
-
 /* inline validation message */
 .FormControl-inlineValidation {
   display: flex;
diff --git a/app/lib/primer/forms/caption.html.erb b/app/lib/primer/forms/caption.html.erb
index 89858e3624..1c458a7156 100644
--- a/app/lib/primer/forms/caption.html.erb
+++ b/app/lib/primer/forms/caption.html.erb
@@ -1,13 +1,11 @@
 <% if @input.character_limit? %>
-  <span class="sr-only" id="<%= @input.character_limit_sr_id %>" aria-live="polite"></span>
+  <span class="sr-only" id="<%= @input.character_limit_sr_id %>" aria-live="polite" aria-atomic="true"></span>
+  <span class="FormControl-caption" data-target="<%= @input.character_limit_target_prefix %>.characterLimitElement" data-max-length="<%= @input.character_limit %>" data-sr-target="<%= @input.character_limit_sr_id %>">
+    <%= @input.character_limit %> characters remaining.
+  </span>
 <% end %>
-<% if @input.caption? || caption_template? || @input.character_limit? %>
+<% if @input.caption? || caption_template? %>
   <span class="FormControl-caption" id="<%= @input.caption_id %>">
-    <% if @input.character_limit? %>
-      <div class="FormControl-caption--characterLimit" data-target="<%= @input.character_limit_target_prefix %>.characterLimitElement" data-max-length="<%= @input.character_limit %>" data-sr-target="<%= @input.character_limit_sr_id %>" aria-hidden="true">
-        <%= @input.character_limit %> characters remaining.
-      </div>
-    <% end %>
     <% if @input.caption? && !@input.caption.blank? %>
       <%= @input.caption %>
     <% elsif caption_template? %>
diff --git a/app/lib/primer/forms/character_counter.ts b/app/lib/primer/forms/character_counter.ts
index 22b76bafa9..f763c5481c 100644
--- a/app/lib/primer/forms/character_counter.ts
+++ b/app/lib/primer/forms/character_counter.ts
@@ -3,7 +3,7 @@
  * Handles real-time character count updates, validation, and aria-live announcements.
  */
 export class CharacterCounter {
-  private SCREEN_READER_DELAY: number = 150
+  private SCREEN_READER_DELAY: number = 500
   private announceTimeout: number | null = null
 
   constructor(
diff --git a/app/lib/primer/forms/dsl/text_area_input.rb b/app/lib/primer/forms/dsl/text_area_input.rb
index a7973c27c8..0790b1d3b0 100644
--- a/app/lib/primer/forms/dsl/text_area_input.rb
+++ b/app/lib/primer/forms/dsl/text_area_input.rb
@@ -37,10 +37,6 @@ def character_limit_sr_id
           @character_limit_sr_id ||= "#{name}-character-count-sr-#{SecureRandom.hex(4)}"
         end
 
-        def character_limit_display_id
-          @character_limit_display_id ||= "#{name}-character-limit-display-#{SecureRandom.hex(4)}"
-        end
-
         def character_limit_validation_id
           @character_limit_validation_id ||= "#{name}-character-limit-validation-#{SecureRandom.hex(4)}"
         end
diff --git a/app/lib/primer/forms/dsl/text_field_input.rb b/app/lib/primer/forms/dsl/text_field_input.rb
index 825cdfd75c..e11efe3a10 100644
--- a/app/lib/primer/forms/dsl/text_field_input.rb
+++ b/app/lib/primer/forms/dsl/text_field_input.rb
@@ -80,10 +80,6 @@ def character_limit_sr_id
           @character_limit_sr_id ||= "#{name}-character-count-sr-#{SecureRandom.hex(4)}"
         end
 
-        def character_limit_display_id
-          @character_limit_display_id ||= "#{name}-character-limit-display-#{SecureRandom.hex(4)}"
-        end
-
         def character_limit_validation_id
           @character_limit_validation_id ||= "#{name}-character-limit-validation-#{SecureRandom.hex(4)}"
         end
diff --git a/test/lib/primer/forms/form_control_test.rb b/test/lib/primer/forms/form_control_test.rb
index 4831232c92..e7e7a8c2da 100644
--- a/test/lib/primer/forms/form_control_test.rb
+++ b/test/lib/primer/forms/form_control_test.rb
@@ -71,8 +71,7 @@ def test_character_limit_generates_aria_live_region
       assert_equal "", element.text.strip
     end
 
-    # Character limit display is visible but hidden from screen readers
-    assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "50 characters remaining."
+    assert_selector "span.FormControl-caption[data-max-length='50']", text: "50 characters remaining."
   end
 
   def test_character_limit_works_with_text_area
@@ -88,7 +87,7 @@ def test_character_limit_works_with_text_area
     assert_selector "primer-text-area"
 
     # Character limit elements present
-    assert_selector "div.FormControl-caption--characterLimit[data-target='primer-text-area.characterLimitElement'][data-max-length='200']"
+    assert_selector "span.FormControl-caption[data-max-length='200']"
     assert_selector "span.sr-only[aria-live='polite']"
   end
 
@@ -103,6 +102,6 @@ def test_character_limit_with_caption_shows_both
 
     # Both caption text and character limit are present
     assert_selector "span.FormControl-caption", text: "Keep it short and descriptive"
-    assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "100 characters remaining."
+    assert_selector "span.FormControl-caption[data-max-length='100']", text: "100 characters remaining."
   end
 end
diff --git a/test/lib/primer/forms/text_area_input_test.rb b/test/lib/primer/forms/text_area_input_test.rb
index 7424cbb6ae..eb2ddfcc98 100644
--- a/test/lib/primer/forms/text_area_input_test.rb
+++ b/test/lib/primer/forms/text_area_input_test.rb
@@ -41,7 +41,7 @@ def test_renders_character_limit_form
     end
 
     assert_selector "primer-text-area"
-    assert_selector "div.FormControl-caption--characterLimit[data-target='primer-text-area.characterLimitElement'][data-max-length='100']", text: "100 characters remaining."
+    assert_selector "span.FormControl-caption[data-target='primer-text-area.characterLimitElement'][data-max-length='100']", text: "100 characters remaining."
     assert_selector "textarea[data-target='primer-text-area.inputElement']"
     assert_selector "span.sr-only[aria-live='polite']" do |span|
       assert span["id"].start_with?("bio-character-count-sr-")
@@ -95,7 +95,7 @@ def test_character_limit_with_caption
       end
     end
 
-    assert_selector "div.FormControl-caption--characterLimit", text: "100 characters remaining."
+    assert_selector "span.FormControl-caption[data-max-length='100']", text: "100 characters remaining."
     assert_selector "span.FormControl-caption", text: "Tell us about yourself"
   end
 end
diff --git a/test/lib/primer/forms/text_field_input_test.rb b/test/lib/primer/forms/text_field_input_test.rb
index 0edb8af903..15009abb97 100644
--- a/test/lib/primer/forms/text_field_input_test.rb
+++ b/test/lib/primer/forms/text_field_input_test.rb
@@ -69,7 +69,7 @@ def test_renders_character_limit_form
     end
 
     assert_selector "primer-text-field"
-    assert_selector "div.FormControl-caption--characterLimit[data-target='primer-text-field.characterLimitElement'][data-max-length='20']", text: "20 characters remaining."
+    assert_selector "span.FormControl-caption[data-max-length='20']", text: "20 characters remaining."
     assert_selector "input[type=text][data-target*='primer-text-field.inputElement']"
     assert_selector "span.sr-only[aria-live='polite']" do |span|
       assert span["id"].start_with?("username-character-count-sr-")
@@ -113,7 +113,7 @@ def test_character_limit_with_caption
       end
     end
 
-    assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "20 characters remaining."
+    assert_selector "span.FormControl-caption[data-max-length='20']", text: "20 characters remaining."
     assert_selector "span.FormControl-caption", text: "Choose a unique username"
   end
 end
diff --git a/test/system/alpha/text_area_test.rb b/test/system/alpha/text_area_test.rb
index 71c30fb658..0594719c52 100644
--- a/test/system/alpha/text_area_test.rb
+++ b/test/system/alpha/text_area_test.rb
@@ -10,7 +10,7 @@ def test_character_limit_updates_on_input
       visit_preview(:with_character_limit)
 
       # Initial state - should show full limit remaining
-      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "10 characters remaining."
+      assert_selector "span.FormControl-caption[data-max-length='10']", text: "10 characters remaining."
 
       # Validation should be hidden initially
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :hidden
@@ -23,7 +23,7 @@ def test_character_limit_updates_on_input
       sleep 0.2
 
       # Character count should update to show 5 remaining
-      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "5 characters remaining."
+      assert_selector "span.FormControl-caption[data-max-length='10']", text: "5 characters remaining."
 
       # Validation should still be hidden
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :hidden
@@ -41,7 +41,7 @@ def test_character_limit_shows_validation_when_exceeded
       sleep 0.3
 
       # Character count should show "over" message
-      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "2 characters over."
+      assert_selector "span.FormControl-caption[data-max-length='10']", text: "2 characters over."
 
       # Validation error should be visible
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :visible do |element|
@@ -54,7 +54,7 @@ def test_character_limit_shows_validation_when_exceeded
       # Check that aria-describedby includes the validation ID
       validation_element = find("div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']")
       validation_id = validation_element["id"]
-      
+
       textarea_aria_describedby = textarea["aria-describedby"]
       assert_includes textarea_aria_describedby, validation_id, "textarea aria-describedby should include validation element ID"
     end
@@ -63,7 +63,7 @@ def test_character_limit_clears_validation_when_back_under_limit
       visit_preview(:with_character_limit)
 
       textarea = find("textarea[data-target='primer-text-area.inputElement']")
-      
+
       # First, exceed the limit
       textarea.fill_in(with: "Hello World!") # 12 characters
       sleep 0.3
@@ -77,7 +77,7 @@ def test_character_limit_clears_validation_when_back_under_limit
       sleep 0.3
 
       # Character count should update
-      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "5 characters remaining."
+      assert_selector "span.FormControl-caption[data-max-length='10']", text: "5 characters remaining."
 
       # Validation should be hidden again
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :hidden
@@ -91,16 +91,16 @@ def test_character_limit_screen_reader_text_updates
       visit_preview(:with_character_limit)
 
       textarea = find("textarea[data-target='primer-text-area.inputElement']")
-      
+
       # Get the aria-live region
       sr_element = find("span.sr-only[aria-live='polite']")
-      
+
       # Initially should be empty (or match initial state)
       initial_text = sr_element.text
 
       # Type some text
       textarea.fill_in(with: "Test")
-      
+
       # Wait for debounced update (150ms + buffer)
       sleep 0.3
 
@@ -119,20 +119,19 @@ def test_character_limit_singular_vs_plural
       visit_preview(:with_character_limit)
 
       textarea = find("textarea[data-target='primer-text-area.inputElement']")
-      
-      # Type to leave exactly 1 character remaining
+            # Type to leave exactly 1 character remaining
       textarea.fill_in(with: "123456789") # 9 characters, limit is 10
       sleep 0.3
 
       # Should use singular "character"
-      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "1 character remaining."
+      assert_selector "span.FormControl-caption[data-max-length='10']", text: "1 character remaining."
 
       # Type one more to exceed by exactly 1
       textarea.fill_in(with: "12345678901") # 11 characters
       sleep 0.3
 
       # Should use singular "character" for over
-      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "1 character over."
+      assert_selector "span.FormControl-caption[data-max-length='10']", text: "1 character over."
     end
   end
 end
diff --git a/test/system/alpha/text_field_test.rb b/test/system/alpha/text_field_test.rb
index 8381a33933..062d6e646d 100644
--- a/test/system/alpha/text_field_test.rb
+++ b/test/system/alpha/text_field_test.rb
@@ -121,7 +121,7 @@ def test_character_limit_updates_on_input
       visit_preview(:with_character_limit)
 
       # Initial state - should show full limit remaining
-      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "10 characters remaining."
+      assert_selector "span.FormControl-caption[data-max-length='10']", text: "10 characters remaining."
 
       # Validation should be hidden initially
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
@@ -134,7 +134,7 @@ def test_character_limit_updates_on_input
       sleep 0.2
 
       # Character count should update to show 5 remaining
-      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "5 characters remaining."
+      assert_selector "span.FormControl-caption[data-max-length='10']", text: "5 characters remaining."
 
       # Validation should still be hidden
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
@@ -152,7 +152,7 @@ def test_character_limit_shows_validation_when_exceeded
       sleep 0.3
 
       # Character count should show "over" message
-      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "2 characters over."
+      assert_selector "span.FormControl-caption[data-max-length='10']", text: "2 characters over."
 
       # Validation error should be visible
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :visible do |element|
@@ -188,7 +188,7 @@ def test_character_limit_clears_validation_when_back_under_limit
       sleep 0.3
 
       # Character count should update
-      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "5 characters remaining."
+      assert_selector "span.FormControl-caption[data-max-length='10']", text: "5 characters remaining."
 
       # Validation should be hidden again
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
@@ -233,14 +233,14 @@ def test_character_limit_singular_vs_plural
       sleep 0.3
 
       # Should use singular "character"
-      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "1 character remaining."
+      assert_selector "span.FormControl-caption[data-max-length='10']", text: "1 character remaining."
 
       # Type one more to exceed by exactly 1
       input.fill_in(with: "12345678901") # 11 characters
       sleep 0.3
 
       # Should use singular "character" for over
-      assert_selector "div.FormControl-caption--characterLimit[aria-hidden='true']", text: "1 character over."
+      assert_selector "span.FormControl-caption[data-max-length='10']", text: "1 character over."
     end
   end
 end

From 3b19afb375b0d6e4ec1a27f9d0b64e1f33930dd5 Mon Sep 17 00:00:00 2001
From: primer-css <primer-css@users.noreply.github.com>
Date: Fri, 5 Dec 2025 20:42:18 +0000
Subject: [PATCH 21/33] Generating static files

---
 static/classes.json | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/static/classes.json b/static/classes.json
index 06520561a0..f4b8108670 100644
--- a/static/classes.json
+++ b/static/classes.json
@@ -245,9 +245,6 @@
   "FormControl-caption": [
     "Primer::Alpha::TextField"
   ],
-  "FormControl-caption--characterLimit": [
-    "Primer::Alpha::TextField"
-  ],
   "FormControl-check-group-wrap": [
     "Primer::Alpha::TextField"
   ],

From ee452f78f5797b1868d526b0f159c0f6fc3a0daf Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Mon, 8 Dec 2025 17:58:56 +0000
Subject: [PATCH 22/33] Copilot suggestions

---
 app/lib/primer/forms/caption.html.erb         |  2 +-
 app/lib/primer/forms/text_area.html.erb       |  8 ++--
 test/lib/primer/forms/text_area_input_test.rb | 10 -----
 test/system/alpha/text_area_test.rb           | 45 ++-----------------
 4 files changed, 8 insertions(+), 57 deletions(-)

diff --git a/app/lib/primer/forms/caption.html.erb b/app/lib/primer/forms/caption.html.erb
index 1c458a7156..9ac385c411 100644
--- a/app/lib/primer/forms/caption.html.erb
+++ b/app/lib/primer/forms/caption.html.erb
@@ -1,7 +1,7 @@
 <% if @input.character_limit? %>
   <span class="sr-only" id="<%= @input.character_limit_sr_id %>" aria-live="polite" aria-atomic="true"></span>
   <span class="FormControl-caption" data-target="<%= @input.character_limit_target_prefix %>.characterLimitElement" data-max-length="<%= @input.character_limit %>" data-sr-target="<%= @input.character_limit_sr_id %>">
-    <%= @input.character_limit %> characters remaining.
+    <%= @input.character_limit %> <%= @input.character_limit == 1 ? 'character' : 'characters' %> remaining.
   </span>
 <% end %>
 <% if @input.caption? || caption_template? %>
diff --git a/app/lib/primer/forms/text_area.html.erb b/app/lib/primer/forms/text_area.html.erb
index a8bbaa7992..f759fc7c0b 100644
--- a/app/lib/primer/forms/text_area.html.erb
+++ b/app/lib/primer/forms/text_area.html.erb
@@ -4,11 +4,9 @@
       <%= content_tag(:div, **@field_wrap_arguments) do %>
         <%= builder.text_area(@input.name, **@input.input_arguments) %>
       <% end %>
-      <% if @input.character_limit? %>
-        <%= content_tag(:div, **character_limit_validation_arguments, data: { target: "primer-text-area.validationElement" }) do %>
-          <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
-          <span data-target="primer-text-area.validationMessageElement"></span>
-        <% end %>
+      <%= content_tag(:div, **character_limit_validation_arguments, data: { target: "primer-text-area.validationElement" }) do %>
+        <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+        <span data-target="primer-text-area.validationMessageElement"></span>
       <% end %>
     <% end %>
   </primer-text-area>
diff --git a/test/lib/primer/forms/text_area_input_test.rb b/test/lib/primer/forms/text_area_input_test.rb
index eb2ddfcc98..44efe41164 100644
--- a/test/lib/primer/forms/text_area_input_test.rb
+++ b/test/lib/primer/forms/text_area_input_test.rb
@@ -48,16 +48,6 @@ def test_renders_character_limit_form
     end
   end
 
-  def test_character_limit
-    render_in_view_context do
-      primer_form_with(url: "/foo") do |f|
-        render_inline_form(f) do |text_area_form|
-          text_area_form.text_area(name: :bio, label: "Bio", character_limit: 100)
-        end
-      end
-    end
-  end
-
   def test_character_limit_rejects_zero
     error = assert_raises(ArgumentError) do
       render_in_view_context do
diff --git a/test/system/alpha/text_area_test.rb b/test/system/alpha/text_area_test.rb
index 0594719c52..8ed93d7742 100644
--- a/test/system/alpha/text_area_test.rb
+++ b/test/system/alpha/text_area_test.rb
@@ -9,23 +9,15 @@ class IntegrationTextAreaTest < System::TestCase
     def test_character_limit_updates_on_input
       visit_preview(:with_character_limit)
 
-      # Initial state - should show full limit remaining
       assert_selector "span.FormControl-caption[data-max-length='10']", text: "10 characters remaining."
-
-      # Validation should be hidden initially
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :hidden
 
-      # Type some text (5 characters)
       textarea = find("textarea[data-target='primer-text-area.inputElement']")
       textarea.fill_in(with: "Hello")
 
-      # Wait for JS to update
-      sleep 0.2
+      sleep 0.3
 
-      # Character count should update to show 5 remaining
       assert_selector "span.FormControl-caption[data-max-length='10']", text: "5 characters remaining."
-
-      # Validation should still be hidden
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :hidden
     end
 
@@ -33,25 +25,17 @@ def test_character_limit_shows_validation_when_exceeded
       visit_preview(:with_character_limit)
 
       textarea = find("textarea[data-target='primer-text-area.inputElement']")
-
-      # Type text that exceeds the 10 character limit
       textarea.fill_in(with: "Hello World!") # 12 characters
 
-      # Wait for JS to update (includes debounce time)
       sleep 0.3
 
-      # Character count should show "over" message
       assert_selector "span.FormControl-caption[data-max-length='10']", text: "2 characters over."
-
-      # Validation error should be visible
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :visible do |element|
         assert_includes element.text, "You've exceeded the character limit"
       end
 
-      # Input should be marked as invalid
       assert_selector "textarea[invalid='true'][aria-invalid='true']"
 
-      # Check that aria-describedby includes the validation ID
       validation_element = find("div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']")
       validation_id = validation_element["id"]
 
@@ -63,26 +47,18 @@ def test_character_limit_clears_validation_when_back_under_limit
       visit_preview(:with_character_limit)
 
       textarea = find("textarea[data-target='primer-text-area.inputElement']")
-
-      # First, exceed the limit
       textarea.fill_in(with: "Hello World!") # 12 characters
       sleep 0.3
 
-      # Verify error is shown
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :visible
       assert_selector "textarea[invalid='true'][aria-invalid='true']"
 
-      # Now delete characters to get back under the limit
       textarea.fill_in(with: "Hello") # 5 characters
       sleep 0.3
 
-      # Character count should update
       assert_selector "span.FormControl-caption[data-max-length='10']", text: "5 characters remaining."
-
-      # Validation should be hidden again
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :hidden
 
-      # Input should not be marked as invalid
       refute_selector "textarea[invalid='true']"
       refute_selector "textarea[aria-invalid='true']"
     end
@@ -92,26 +68,17 @@ def test_character_limit_screen_reader_text_updates
 
       textarea = find("textarea[data-target='primer-text-area.inputElement']")
 
-      # Get the aria-live region
       sr_element = find("span.sr-only[aria-live='polite']")
-
-      # Initially should be empty (or match initial state)
-      initial_text = sr_element.text
-
-      # Type some text
       textarea.fill_in(with: "Test")
 
-      # Wait for debounced update (150ms + buffer)
-      sleep 0.3
+      # Wait for debounced update (500ms + buffer)
+      sleep 0.6
 
-      # Screen reader text should be updated
       assert_equal "6 characters remaining.", sr_element.text
 
-      # Type more to exceed limit
       textarea.fill_in(with: "Hello World!") # 12 characters
-      sleep 0.3
+      sleep 0.6
 
-      # Screen reader should announce over limit
       assert_equal "2 characters over.", sr_element.text
     end
 
@@ -119,18 +86,14 @@ def test_character_limit_singular_vs_plural
       visit_preview(:with_character_limit)
 
       textarea = find("textarea[data-target='primer-text-area.inputElement']")
-            # Type to leave exactly 1 character remaining
       textarea.fill_in(with: "123456789") # 9 characters, limit is 10
       sleep 0.3
 
-      # Should use singular "character"
       assert_selector "span.FormControl-caption[data-max-length='10']", text: "1 character remaining."
 
-      # Type one more to exceed by exactly 1
       textarea.fill_in(with: "12345678901") # 11 characters
       sleep 0.3
 
-      # Should use singular "character" for over
       assert_selector "span.FormControl-caption[data-max-length='10']", text: "1 character over."
     end
   end

From 948c04701d3c27c7ba1a6a2949b932cd305b3f47 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Mon, 8 Dec 2025 18:12:08 +0000
Subject: [PATCH 23/33] More copilot suggestions

---
 app/lib/primer/forms/text_area.html.erb | 20 +++++--------
 test/system/alpha/text_field_test.rb    | 38 ++-----------------------
 2 files changed, 10 insertions(+), 48 deletions(-)

diff --git a/app/lib/primer/forms/text_area.html.erb b/app/lib/primer/forms/text_area.html.erb
index f759fc7c0b..5ed7f03a77 100644
--- a/app/lib/primer/forms/text_area.html.erb
+++ b/app/lib/primer/forms/text_area.html.erb
@@ -1,19 +1,13 @@
-<% if @input.character_limit? %>
-  <primer-text-area>
-    <%= render(FormControl.new(input: @input)) do %>
-      <%= content_tag(:div, **@field_wrap_arguments) do %>
-        <%= builder.text_area(@input.name, **@input.input_arguments) %>
-      <% end %>
+<primer-text-area>
+  <%= render(FormControl.new(input: @input)) do %>
+    <%= content_tag(:div, **@field_wrap_arguments) do %>
+      <%= builder.text_area(@input.name, **@input.input_arguments) %>
+    <% end %>
+    <% if @input.character_limit? %>
       <%= content_tag(:div, **character_limit_validation_arguments, data: { target: "primer-text-area.validationElement" }) do %>
         <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
         <span data-target="primer-text-area.validationMessageElement"></span>
       <% end %>
     <% end %>
-  </primer-text-area>
-<% else %>
-  <%= render(FormControl.new(input: @input)) do %>
-    <%= content_tag(:div, **@field_wrap_arguments) do %>
-      <%= builder.text_area(@input.name, **@input.input_arguments) %>
-    <% end %>
   <% end %>
-<% end %>
+</primer-text-area>
diff --git a/test/system/alpha/text_field_test.rb b/test/system/alpha/text_field_test.rb
index 062d6e646d..064588fea5 100644
--- a/test/system/alpha/text_field_test.rb
+++ b/test/system/alpha/text_field_test.rb
@@ -120,23 +120,15 @@ def test_shows_and_hides_screenreader_text
     def test_character_limit_updates_on_input
       visit_preview(:with_character_limit)
 
-      # Initial state - should show full limit remaining
       assert_selector "span.FormControl-caption[data-max-length='10']", text: "10 characters remaining."
-
-      # Validation should be hidden initially
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
 
-      # Type some text (5 characters)
       input = find("input[type=text][data-target*='primer-text-field.inputElement']")
       input.fill_in(with: "Hello")
 
-      # Wait for JS to update
       sleep 0.2
 
-      # Character count should update to show 5 remaining
       assert_selector "span.FormControl-caption[data-max-length='10']", text: "5 characters remaining."
-
-      # Validation should still be hidden
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
     end
 
@@ -145,24 +137,16 @@ def test_character_limit_shows_validation_when_exceeded
 
       input = find("input[type=text][data-target*='primer-text-field.inputElement']")
 
-      # Type text that exceeds the 10 character limit
       input.fill_in(with: "Hello World!") # 12 characters
 
-      # Wait for JS to update (includes debounce time)
       sleep 0.3
 
-      # Character count should show "over" message
       assert_selector "span.FormControl-caption[data-max-length='10']", text: "2 characters over."
-
-      # Validation error should be visible
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :visible do |element|
         assert_includes element.text, "You've exceeded the character limit"
       end
-
-      # Input should be marked as invalid
       assert_selector "input[invalid='true'][aria-invalid='true']"
 
-      # Check that aria-describedby includes the validation ID
       validation_element = find("div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']")
       validation_id = validation_element["id"]
 
@@ -175,25 +159,18 @@ def test_character_limit_clears_validation_when_back_under_limit
 
       input = find("input[type=text][data-target*='primer-text-field.inputElement']")
 
-      # First, exceed the limit
       input.fill_in(with: "Hello World!") # 12 characters
       sleep 0.3
 
-      # Verify error is shown
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :visible
       assert_selector "input[invalid='true'][aria-invalid='true']"
 
-      # Now delete characters to get back under the limit
       input.fill_in(with: "Hello") # 5 characters
       sleep 0.3
 
-      # Character count should update
       assert_selector "span.FormControl-caption[data-max-length='10']", text: "5 characters remaining."
-
-      # Validation should be hidden again
       assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
 
-      # Input should not be marked as invalid
       refute_selector "input[invalid='true']"
       refute_selector "input[aria-invalid='true']"
     end
@@ -203,23 +180,18 @@ def test_character_limit_screen_reader_text_updates
 
       input = find("input[type=text][data-target*='primer-text-field.inputElement']")
 
-      # Get the aria-live region
       sr_element = find("span.sr-only[aria-live='polite']")
 
-      # Type some text
       input.fill_in(with: "Test")
 
-      # Wait for debounced update (150ms + buffer)
-      sleep 0.3
+      # Wait for debounced update (500ms + buffer)
+      sleep 0.6
 
-      # Screen reader text should be updated
       assert_equal "6 characters remaining.", sr_element.text
 
-      # Type more to exceed limit
       input.fill_in(with: "Hello World!") # 12 characters
-      sleep 0.3
+      sleep 0.6
 
-      # Screen reader should announce over limit
       assert_equal "2 characters over.", sr_element.text
     end
 
@@ -228,18 +200,14 @@ def test_character_limit_singular_vs_plural
 
       input = find("input[type=text][data-target*='primer-text-field.inputElement']")
 
-      # Type to leave exactly 1 character remaining
       input.fill_in(with: "123456789") # 9 characters, limit is 10
       sleep 0.3
 
-      # Should use singular "character"
       assert_selector "span.FormControl-caption[data-max-length='10']", text: "1 character remaining."
 
-      # Type one more to exceed by exactly 1
       input.fill_in(with: "12345678901") # 11 characters
       sleep 0.3
 
-      # Should use singular "character" for over
       assert_selector "span.FormControl-caption[data-max-length='10']", text: "1 character over."
     end
   end

From b95295a14b5d051d411a22ff1b472fdb401e0966 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 10 Dec 2025 15:27:06 +0000
Subject: [PATCH 24/33] Updates to screen reader element, removes additional
 validation

---
 app/lib/primer/forms/caption.html.erb        |  6 +-
 app/lib/primer/forms/character_counter.ts    | 71 +++++++-------------
 app/lib/primer/forms/dsl/input.rb            |  5 ++
 app/lib/primer/forms/dsl/text_area_input.rb  |  4 --
 app/lib/primer/forms/dsl/text_field_input.rb |  4 --
 app/lib/primer/forms/primer_text_area.ts     |  6 +-
 app/lib/primer/forms/primer_text_field.ts    |  6 +-
 app/lib/primer/forms/text_area.html.erb      |  6 --
 app/lib/primer/forms/text_area.rb            |  8 ---
 app/lib/primer/forms/text_field.html.erb     |  6 --
 previews/primer/alpha/text_area_preview.rb   |  6 ++
 11 files changed, 42 insertions(+), 86 deletions(-)

diff --git a/app/lib/primer/forms/caption.html.erb b/app/lib/primer/forms/caption.html.erb
index 9ac385c411..c27a30a590 100644
--- a/app/lib/primer/forms/caption.html.erb
+++ b/app/lib/primer/forms/caption.html.erb
@@ -1,7 +1,7 @@
 <% if @input.character_limit? %>
-  <span class="sr-only" id="<%= @input.character_limit_sr_id %>" aria-live="polite" aria-atomic="true"></span>
-  <span class="FormControl-caption" data-target="<%= @input.character_limit_target_prefix %>.characterLimitElement" data-max-length="<%= @input.character_limit %>" data-sr-target="<%= @input.character_limit_sr_id %>">
-    <%= @input.character_limit %> <%= @input.character_limit == 1 ? 'character' : 'characters' %> remaining.
+  <span class="sr-only" data-target="<%= @input.character_limit_target_prefix %>.characterLimitSrElement" id="<%= @input.character_limit_sr_id %>" aria-live="polite" aria-atomic="true"></span>
+  <span class="FormControl-caption" data-target="<%= @input.character_limit_target_prefix %>.characterLimitElement" data-max-length="<%= @input.character_limit %>" id="<%= @input.character_limit_id %>">
+    <%= @input.character_limit %> <%= @input.character_limit == 1 ? 'character' : 'characters' %> remaining
   </span>
 <% end %>
 <% if @input.caption? || caption_template? %>
diff --git a/app/lib/primer/forms/character_counter.ts b/app/lib/primer/forms/character_counter.ts
index f763c5481c..fcf13ee680 100644
--- a/app/lib/primer/forms/character_counter.ts
+++ b/app/lib/primer/forms/character_counter.ts
@@ -5,12 +5,12 @@
 export class CharacterCounter {
   private SCREEN_READER_DELAY: number = 500
   private announceTimeout: number | null = null
+  private isInitialLoad: boolean = true
 
   constructor(
     private inputElement: HTMLInputElement | HTMLTextAreaElement,
     private characterLimitElement: HTMLElement,
-    private validationElement: HTMLElement | undefined,
-    private validationMessageElement: HTMLElement | undefined,
+    private characterLimitSrElement?: HTMLElement,
   ) {}
 
   /**
@@ -19,6 +19,7 @@ export class CharacterCounter {
   initialize(signal?: AbortSignal): void {
     this.inputElement.addEventListener('input', () => this.updateCharacterCount(), signal ? {signal} : undefined)
     this.updateCharacterCount()
+    this.isInitialLoad = false
   }
 
   /**
@@ -30,6 +31,13 @@ export class CharacterCounter {
     }
   }
 
+  /**
+   * Pluralizes a word based on the count
+   */
+  private pluralize(count: number, string: string): string {
+    return count === 1 ? string : `${string}s`
+  }
+
   /**
    * Update the character count display and validation state
    */
@@ -45,19 +53,22 @@ export class CharacterCounter {
     let message = ''
 
     if (charactersRemaining >= 0) {
-      const characterText = charactersRemaining === 1 ? 'character' : 'characters'
-      message = `${charactersRemaining} ${characterText} remaining.`
+      const characterText = this.pluralize(charactersRemaining, 'character')
+      message = `${charactersRemaining} ${characterText} remaining`
       this.characterLimitElement.textContent = message
       this.clearError()
     } else {
       const charactersOver = -charactersRemaining
-      const characterText = charactersOver === 1 ? 'character' : 'characters'
-      message = `${charactersOver} ${characterText} over.`
+      const characterText = this.pluralize(charactersOver, 'character')
+      message = `${charactersOver} ${characterText} over`
       this.characterLimitElement.textContent = message
       this.setError()
     }
 
-    this.announceToScreenReader(message)
+    // We don't want this announced on initial load
+    if (!this.isInitialLoad) {
+      this.announceToScreenReader(message)
+    }
   }
 
   /**
@@ -69,63 +80,29 @@ export class CharacterCounter {
     }
 
     this.announceTimeout = window.setTimeout(() => {
-      const srTargetId = this.characterLimitElement?.getAttribute('data-sr-target')
-      if (!srTargetId) return
-
-      const srElement = document.getElementById(srTargetId)
-      if (srElement) {
-        srElement.textContent = message
+      if (this.characterLimitSrElement) {
+        this.characterLimitSrElement.textContent = message
       }
     }, this.SCREEN_READER_DELAY)
   }
 
   /**
-   * Show validation error when character limit is exceeded.
-   * Required since default validation on inputs only appears after an attempt to submit the form.
+   * Set error when character limit is exceeded
    */
   private setError(): void {
-    if (!this.validationElement || !this.validationMessageElement) return
-
     this.inputElement.setAttribute('invalid', 'true')
     this.inputElement.setAttribute('aria-invalid', 'true')
 
-    // Add validation message ID to aria-describedby to ensure it is read by screen readers
-    const validationId = this.validationElement.id
-    if (validationId) {
-      const existingDescribedBy = this.inputElement.getAttribute('aria-describedby') || ''
-      const describedByIds = existingDescribedBy.split(' ').filter(id => id.length > 0)
-      if (!describedByIds.includes(validationId)) {
-        describedByIds.push(validationId)
-        this.inputElement.setAttribute('aria-describedby', describedByIds.join(' '))
-      }
-    }
-
-    this.validationMessageElement.textContent = "You've exceeded the character limit"
-    this.validationElement.hidden = false
+    // TODO: add error icon to character limit text and change color to red
   }
 
   /**
-   * Clear validation error when back under character limit
+   * Clear error when back under character limit
    */
   private clearError(): void {
-    if (!this.validationElement || !this.validationMessageElement) return
-
     this.inputElement.removeAttribute('invalid')
     this.inputElement.removeAttribute('aria-invalid')
 
-    // Remove validation message ID from aria-describedby
-    const validationId = this.validationElement.id
-    if (validationId) {
-      const existingDescribedBy = this.inputElement.getAttribute('aria-describedby') || ''
-      const describedByIds = existingDescribedBy.split(' ').filter(id => id.length > 0 && id !== validationId)
-      if (describedByIds.length > 0) {
-        this.inputElement.setAttribute('aria-describedby', describedByIds.join(' '))
-      } else {
-        this.inputElement.removeAttribute('aria-describedby')
-      }
-    }
-
-    this.validationMessageElement.textContent = ''
-    this.validationElement.hidden = true
+    // TODO: Undo error icon and color changes
   }
 }
diff --git a/app/lib/primer/forms/dsl/input.rb b/app/lib/primer/forms/dsl/input.rb
index 953ed9ec82..053572319c 100644
--- a/app/lib/primer/forms/dsl/input.rb
+++ b/app/lib/primer/forms/dsl/input.rb
@@ -115,6 +115,7 @@ def initialize(builder:, form:, **system_arguments)
 
           @ids = {}.tap do |id_map|
             id_map[:validation] = "validation-#{@base_id}" if supports_validation?
+            id_map[:character_limit_caption] = "character_limit-#{@base_id}" if character_limit?
             id_map[:caption] = "caption-#{@base_id}" if caption? || caption_template?
           end
 
@@ -203,6 +204,10 @@ def character_limit?
           false
         end
 
+        def character_limit_id
+          ids[:character_limit_caption]
+        end
+
         def character_limit_target_prefix
           case type
           when :text_field
diff --git a/app/lib/primer/forms/dsl/text_area_input.rb b/app/lib/primer/forms/dsl/text_area_input.rb
index 0790b1d3b0..ce50a1b64f 100644
--- a/app/lib/primer/forms/dsl/text_area_input.rb
+++ b/app/lib/primer/forms/dsl/text_area_input.rb
@@ -37,10 +37,6 @@ def character_limit_sr_id
           @character_limit_sr_id ||= "#{name}-character-count-sr-#{SecureRandom.hex(4)}"
         end
 
-        def character_limit_validation_id
-          @character_limit_validation_id ||= "#{name}-character-limit-validation-#{SecureRandom.hex(4)}"
-        end
-
         # :nocov:
         def focusable?
           true
diff --git a/app/lib/primer/forms/dsl/text_field_input.rb b/app/lib/primer/forms/dsl/text_field_input.rb
index e11efe3a10..8ace63c1c7 100644
--- a/app/lib/primer/forms/dsl/text_field_input.rb
+++ b/app/lib/primer/forms/dsl/text_field_input.rb
@@ -80,10 +80,6 @@ def character_limit_sr_id
           @character_limit_sr_id ||= "#{name}-character-count-sr-#{SecureRandom.hex(4)}"
         end
 
-        def character_limit_validation_id
-          @character_limit_validation_id ||= "#{name}-character-limit-validation-#{SecureRandom.hex(4)}"
-        end
-
         def validation_arguments
           if auto_check_src.present?
             super.merge(
diff --git a/app/lib/primer/forms/primer_text_area.ts b/app/lib/primer/forms/primer_text_area.ts
index b2b02c9eb9..d195bbafdc 100644
--- a/app/lib/primer/forms/primer_text_area.ts
+++ b/app/lib/primer/forms/primer_text_area.ts
@@ -5,8 +5,7 @@ import {CharacterCounter} from './character_counter'
 export class PrimerTextAreaElement extends HTMLElement {
   @target inputElement: HTMLTextAreaElement
   @target characterLimitElement: HTMLElement
-  @target validationElement: HTMLElement
-  @target validationMessageElement: HTMLElement
+  @target characterLimitSrElement: HTMLElement
 
   #characterCounter: CharacterCounter | null = null
 
@@ -15,8 +14,7 @@ export class PrimerTextAreaElement extends HTMLElement {
       this.#characterCounter = new CharacterCounter(
         this.inputElement,
         this.characterLimitElement,
-        this.validationElement,
-        this.validationMessageElement,
+        this.characterLimitSrElement,
       )
       this.#characterCounter.initialize()
     }
diff --git a/app/lib/primer/forms/primer_text_field.ts b/app/lib/primer/forms/primer_text_field.ts
index f445c4d072..4f3a59d865 100644
--- a/app/lib/primer/forms/primer_text_field.ts
+++ b/app/lib/primer/forms/primer_text_field.ts
@@ -20,8 +20,7 @@ export class PrimerTextFieldElement extends HTMLElement {
   @target leadingVisual: HTMLElement
   @target leadingSpinner: HTMLElement
   @target characterLimitElement: HTMLElement
-  @target characterLimitValidationElement: HTMLElement
-  @target characterLimitValidationMessageElement: HTMLElement
+  @target characterLimitSrElement: HTMLElement
 
   #abortController: AbortController | null
   #characterCounter: CharacterCounter | null = null
@@ -57,8 +56,7 @@ export class PrimerTextFieldElement extends HTMLElement {
       this.#characterCounter = new CharacterCounter(
         this.inputElement,
         this.characterLimitElement,
-        this.characterLimitValidationElement,
-        this.characterLimitValidationMessageElement,
+        this.characterLimitSrElement,
       )
       this.#characterCounter.initialize(signal)
     }
diff --git a/app/lib/primer/forms/text_area.html.erb b/app/lib/primer/forms/text_area.html.erb
index 5ed7f03a77..ad0132865a 100644
--- a/app/lib/primer/forms/text_area.html.erb
+++ b/app/lib/primer/forms/text_area.html.erb
@@ -3,11 +3,5 @@
     <%= content_tag(:div, **@field_wrap_arguments) do %>
       <%= builder.text_area(@input.name, **@input.input_arguments) %>
     <% end %>
-    <% if @input.character_limit? %>
-      <%= content_tag(:div, **character_limit_validation_arguments, data: { target: "primer-text-area.validationElement" }) do %>
-        <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
-        <span data-target="primer-text-area.validationMessageElement"></span>
-      <% end %>
-    <% end %>
   <% end %>
 </primer-text-area>
diff --git a/app/lib/primer/forms/text_area.rb b/app/lib/primer/forms/text_area.rb
index 860b6496c4..2f3f0e715a 100644
--- a/app/lib/primer/forms/text_area.rb
+++ b/app/lib/primer/forms/text_area.rb
@@ -15,14 +15,6 @@ def initialize(input:)
           hidden: @input.hidden?
         }
       end
-
-      def character_limit_validation_arguments
-        {
-          class: "FormControl-inlineValidation",
-          id: @input.character_limit_validation_id,
-          hidden: true
-        }
-      end
     end
   end
 end
diff --git a/app/lib/primer/forms/text_field.html.erb b/app/lib/primer/forms/text_field.html.erb
index b9a061303b..562f01098b 100644
--- a/app/lib/primer/forms/text_field.html.erb
+++ b/app/lib/primer/forms/text_field.html.erb
@@ -23,10 +23,4 @@
       </div>
     <% end %>
   <% end %>
-  <% if @input.character_limit? %>
-    <%= content_tag(:div, **character_limit_validation_arguments, data: { target: "primer-text-field.characterLimitValidationElement" }) do %>
-      <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
-      <span data-target="primer-text-field.characterLimitValidationMessageElement"></span>
-    <% end %>
-  <% end %>
 <% end %>
diff --git a/previews/primer/alpha/text_area_preview.rb b/previews/primer/alpha/text_area_preview.rb
index 239035a423..bae8c65d9a 100644
--- a/previews/primer/alpha/text_area_preview.rb
+++ b/previews/primer/alpha/text_area_preview.rb
@@ -103,6 +103,12 @@ def with_character_limit
         render(Primer::Alpha::TextArea.new(character_limit: 10, name: "my-text-area", 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(character_limit: 10, name: "my-text-area", 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

From e456f5fded4f99470996b3fc68e9e9f5531dd860 Mon Sep 17 00:00:00 2001
From: primer-css <primer-css@users.noreply.github.com>
Date: Wed, 10 Dec 2025 15:30:05 +0000
Subject: [PATCH 25/33] Generating static files

---
 static/info_arch.json | 13 +++++++++++++
 static/previews.json  | 13 +++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/static/info_arch.json b/static/info_arch.json
index c43278fdf3..22998c3cd7 100644
--- a/static/info_arch.json
+++ b/static/info_arch.json
@@ -8832,6 +8832,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_area/with_character_limit_over_limit",
+        "name": "with_character_limit_over_limit",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_area/with_character_limit_and_caption",
         "name": "with_character_limit_and_caption",
diff --git a/static/previews.json b/static/previews.json
index 45c91827c8..0ce658e1d9 100644
--- a/static/previews.json
+++ b/static/previews.json
@@ -7003,6 +7003,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_area/with_character_limit_over_limit",
+        "name": "with_character_limit_over_limit",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_area/with_character_limit_and_caption",
         "name": "with_character_limit_and_caption",

From 864e1be88814aabe16a45fde04f02120db3d29ab Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 10 Dec 2025 15:56:13 +0000
Subject: [PATCH 26/33] Adds / removes icon for error state

---
 app/lib/primer/forms/caption.html.erb       |  3 ++-
 app/lib/primer/forms/character_counter.ts   | 24 +++++++++++++++++----
 previews/primer/alpha/text_field_preview.rb | 16 +++++++++-----
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/app/lib/primer/forms/caption.html.erb b/app/lib/primer/forms/caption.html.erb
index c27a30a590..1d1381a11d 100644
--- a/app/lib/primer/forms/caption.html.erb
+++ b/app/lib/primer/forms/caption.html.erb
@@ -1,7 +1,8 @@
 <% if @input.character_limit? %>
   <span class="sr-only" data-target="<%= @input.character_limit_target_prefix %>.characterLimitSrElement" id="<%= @input.character_limit_sr_id %>" aria-live="polite" aria-atomic="true"></span>
   <span class="FormControl-caption" data-target="<%= @input.character_limit_target_prefix %>.characterLimitElement" data-max-length="<%= @input.character_limit %>" id="<%= @input.character_limit_id %>">
-    <%= @input.character_limit %> <%= @input.character_limit == 1 ? 'character' : 'characters' %> remaining
+    <span class="FormControl-caption-icon" hidden><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+    <span class="FormControl-caption-text"><%= @input.character_limit %> <%= @input.character_limit == 1 ? 'character' : 'characters' %> remaining</span>
   </span>
 <% end %>
 <% if @input.caption? || caption_template? %>
diff --git a/app/lib/primer/forms/character_counter.ts b/app/lib/primer/forms/character_counter.ts
index fcf13ee680..1f2503cac1 100644
--- a/app/lib/primer/forms/character_counter.ts
+++ b/app/lib/primer/forms/character_counter.ts
@@ -55,13 +55,19 @@ export class CharacterCounter {
     if (charactersRemaining >= 0) {
       const characterText = this.pluralize(charactersRemaining, 'character')
       message = `${charactersRemaining} ${characterText} remaining`
-      this.characterLimitElement.textContent = message
+      const textSpan = this.characterLimitElement.querySelector('.FormControl-caption-text')
+      if (textSpan) {
+        textSpan.textContent = message
+      }
       this.clearError()
     } else {
       const charactersOver = -charactersRemaining
       const characterText = this.pluralize(charactersOver, 'character')
       message = `${charactersOver} ${characterText} over`
-      this.characterLimitElement.textContent = message
+      const textSpan = this.characterLimitElement.querySelector('.FormControl-caption-text')
+      if (textSpan) {
+        textSpan.textContent = message
+      }
       this.setError()
     }
 
@@ -92,8 +98,13 @@ export class CharacterCounter {
   private setError(): void {
     this.inputElement.setAttribute('invalid', 'true')
     this.inputElement.setAttribute('aria-invalid', 'true')
+    this.characterLimitElement.classList.add('fgColor-danger')
 
-    // TODO: add error icon to character limit text and change color to red
+    // Show danger icon
+    const icon = this.characterLimitElement.querySelector('.FormControl-caption-icon')
+    if (icon) {
+      icon.removeAttribute('hidden')
+    }
   }
 
   /**
@@ -102,7 +113,12 @@ export class CharacterCounter {
   private clearError(): void {
     this.inputElement.removeAttribute('invalid')
     this.inputElement.removeAttribute('aria-invalid')
+    this.characterLimitElement.classList.remove('fgColor-danger')
 
-    // TODO: Undo error icon and color changes
+    // Hide danger icon
+    const icon = this.characterLimitElement.querySelector('.FormControl-caption-icon')
+    if (icon) {
+      icon.setAttribute('hidden', '')
+    }
   }
 }
diff --git a/previews/primer/alpha/text_field_preview.rb b/previews/primer/alpha/text_field_preview.rb
index 7f52e8e21d..fa7f371063 100644
--- a/previews/primer/alpha/text_field_preview.rb
+++ b/previews/primer/alpha/text_field_preview.rb
@@ -223,10 +223,16 @@ 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-19", label: "Username"))
+        render(Primer::Alpha::TextField.new(character_limit: 20, caption: "Choose a unique username.", name: "my-text-field-20", label: "Username"))
       end
       #
       # @!endgroup
@@ -235,24 +241,24 @@ def with_character_limit_and_caption
       #
       # @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-20", 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-21", 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-22", 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-23", 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

From 20eaed43e45c78b9e2a304401ab0fb3dbbe8d14c Mon Sep 17 00:00:00 2001
From: primer-css <primer-css@users.noreply.github.com>
Date: Wed, 10 Dec 2025 15:57:28 +0000
Subject: [PATCH 27/33] Generating static files

---
 static/info_arch.json | 13 +++++++++++++
 static/previews.json  | 13 +++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/static/info_arch.json b/static/info_arch.json
index 22998c3cd7..19485debae 100644
--- a/static/info_arch.json
+++ b/static/info_arch.json
@@ -9352,6 +9352,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_field/with_character_limit_over_limit",
+        "name": "with_character_limit_over_limit",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_field/with_character_limit_and_caption",
         "name": "with_character_limit_and_caption",
diff --git a/static/previews.json b/static/previews.json
index 0ce658e1d9..5a4b7c9522 100644
--- a/static/previews.json
+++ b/static/previews.json
@@ -7336,6 +7336,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_field/with_character_limit_over_limit",
+        "name": "with_character_limit_over_limit",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_field/with_character_limit_and_caption",
         "name": "with_character_limit_and_caption",

From 6410319002c70628f231685210ab329104ef160e Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 10 Dec 2025 16:24:29 +0000
Subject: [PATCH 28/33] Test fixes

---
 app/lib/primer/forms/caption.html.erb         |  2 +-
 app/lib/primer/forms/character_counter.ts     |  2 +-
 app/lib/primer/forms/dsl/text_area_input.rb   |  4 -
 app/lib/primer/forms/dsl/text_field_input.rb  |  4 -
 test/lib/primer/forms/form_control_test.rb    | 10 +--
 test/lib/primer/forms/text_area_input_test.rb |  8 +-
 .../lib/primer/forms/text_field_input_test.rb |  8 +-
 test/system/alpha/text_area_test.rb           | 77 ++++++++++++++-----
 test/system/alpha/text_field_test.rb          | 50 +++++++-----
 9 files changed, 97 insertions(+), 68 deletions(-)

diff --git a/app/lib/primer/forms/caption.html.erb b/app/lib/primer/forms/caption.html.erb
index 1d1381a11d..26efbeb5d5 100644
--- a/app/lib/primer/forms/caption.html.erb
+++ b/app/lib/primer/forms/caption.html.erb
@@ -1,5 +1,5 @@
 <% if @input.character_limit? %>
-  <span class="sr-only" data-target="<%= @input.character_limit_target_prefix %>.characterLimitSrElement" id="<%= @input.character_limit_sr_id %>" aria-live="polite" aria-atomic="true"></span>
+  <span class="sr-only" data-target="<%= @input.character_limit_target_prefix %>.characterLimitSrElement" aria-live="polite" aria-atomic="true"></span>
   <span class="FormControl-caption" data-target="<%= @input.character_limit_target_prefix %>.characterLimitElement" data-max-length="<%= @input.character_limit %>" id="<%= @input.character_limit_id %>">
     <span class="FormControl-caption-icon" hidden><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
     <span class="FormControl-caption-text"><%= @input.character_limit %> <%= @input.character_limit == 1 ? 'character' : 'characters' %> remaining</span>
diff --git a/app/lib/primer/forms/character_counter.ts b/app/lib/primer/forms/character_counter.ts
index 1f2503cac1..b64cc0c1cb 100644
--- a/app/lib/primer/forms/character_counter.ts
+++ b/app/lib/primer/forms/character_counter.ts
@@ -10,7 +10,7 @@ export class CharacterCounter {
   constructor(
     private inputElement: HTMLInputElement | HTMLTextAreaElement,
     private characterLimitElement: HTMLElement,
-    private characterLimitSrElement?: HTMLElement,
+    private characterLimitSrElement: HTMLElement,
   ) {}
 
   /**
diff --git a/app/lib/primer/forms/dsl/text_area_input.rb b/app/lib/primer/forms/dsl/text_area_input.rb
index ce50a1b64f..f55cce68b0 100644
--- a/app/lib/primer/forms/dsl/text_area_input.rb
+++ b/app/lib/primer/forms/dsl/text_area_input.rb
@@ -33,10 +33,6 @@ def character_limit?
           @character_limit.present?
         end
 
-        def character_limit_sr_id
-          @character_limit_sr_id ||= "#{name}-character-count-sr-#{SecureRandom.hex(4)}"
-        end
-
         # :nocov:
         def focusable?
           true
diff --git a/app/lib/primer/forms/dsl/text_field_input.rb b/app/lib/primer/forms/dsl/text_field_input.rb
index 8ace63c1c7..f9d555c2af 100644
--- a/app/lib/primer/forms/dsl/text_field_input.rb
+++ b/app/lib/primer/forms/dsl/text_field_input.rb
@@ -76,10 +76,6 @@ def character_limit?
           @character_limit.present?
         end
 
-        def character_limit_sr_id
-          @character_limit_sr_id ||= "#{name}-character-count-sr-#{SecureRandom.hex(4)}"
-        end
-
         def validation_arguments
           if auto_check_src.present?
             super.merge(
diff --git a/test/lib/primer/forms/form_control_test.rb b/test/lib/primer/forms/form_control_test.rb
index e7e7a8c2da..5bba41868f 100644
--- a/test/lib/primer/forms/form_control_test.rb
+++ b/test/lib/primer/forms/form_control_test.rb
@@ -65,13 +65,11 @@ def test_character_limit_generates_aria_live_region
     end
 
     # Aria-live region exists and is configured correctly
-    assert_selector "span.sr-only[aria-live='polite']" do |element|
-      assert element["id"].start_with?("username-character-count-sr-")
-      # Should be empty initially (populated by JS)
+    assert_selector "span.sr-only[data-target='primer-text-field.characterLimitSrElement'][aria-live='polite']" do |element|
       assert_equal "", element.text.strip
     end
 
-    assert_selector "span.FormControl-caption[data-max-length='50']", text: "50 characters remaining."
+    assert_selector "span.FormControl-caption[data-max-length='50'] .FormControl-caption-text", text: "50 characters remaining"
   end
 
   def test_character_limit_works_with_text_area
@@ -100,8 +98,8 @@ def test_character_limit_with_caption_shows_both
       end
     end
 
-    # Both caption text and character limit are present
+    # Both caption text and character limit are present (as separate spans)
     assert_selector "span.FormControl-caption", text: "Keep it short and descriptive"
-    assert_selector "span.FormControl-caption[data-max-length='100']", text: "100 characters remaining."
+    assert_selector "span.FormControl-caption[data-max-length='100'] .FormControl-caption-text", text: "100 characters remaining"
   end
 end
diff --git a/test/lib/primer/forms/text_area_input_test.rb b/test/lib/primer/forms/text_area_input_test.rb
index 44efe41164..bb237e4b01 100644
--- a/test/lib/primer/forms/text_area_input_test.rb
+++ b/test/lib/primer/forms/text_area_input_test.rb
@@ -41,11 +41,9 @@ def test_renders_character_limit_form
     end
 
     assert_selector "primer-text-area"
-    assert_selector "span.FormControl-caption[data-target='primer-text-area.characterLimitElement'][data-max-length='100']", text: "100 characters remaining."
+    assert_selector "span.FormControl-caption[data-target='primer-text-area.characterLimitElement'][data-max-length='100'] .FormControl-caption-text", text: "100 characters remaining"
     assert_selector "textarea[data-target='primer-text-area.inputElement']"
-    assert_selector "span.sr-only[aria-live='polite']" do |span|
-      assert span["id"].start_with?("bio-character-count-sr-")
-    end
+    assert_selector "span.sr-only[data-target='primer-text-area.characterLimitSrElement'][aria-live='polite']"
   end
 
   def test_character_limit_rejects_zero
@@ -85,7 +83,7 @@ def test_character_limit_with_caption
       end
     end
 
-    assert_selector "span.FormControl-caption[data-max-length='100']", text: "100 characters remaining."
+    assert_selector "span.FormControl-caption[data-max-length='100'] .FormControl-caption-text", text: "100 characters remaining"
     assert_selector "span.FormControl-caption", text: "Tell us about yourself"
   end
 end
diff --git a/test/lib/primer/forms/text_field_input_test.rb b/test/lib/primer/forms/text_field_input_test.rb
index 15009abb97..f8746c9cc2 100644
--- a/test/lib/primer/forms/text_field_input_test.rb
+++ b/test/lib/primer/forms/text_field_input_test.rb
@@ -69,11 +69,9 @@ def test_renders_character_limit_form
     end
 
     assert_selector "primer-text-field"
-    assert_selector "span.FormControl-caption[data-max-length='20']", text: "20 characters remaining."
+    assert_selector "span.FormControl-caption[data-max-length='20'] .FormControl-caption-text", text: "20 characters remaining"
     assert_selector "input[type=text][data-target*='primer-text-field.inputElement']"
-    assert_selector "span.sr-only[aria-live='polite']" do |span|
-      assert span["id"].start_with?("username-character-count-sr-")
-    end
+    assert_selector "span.sr-only[data-target='primer-text-field.characterLimitSrElement'][aria-live='polite']"
   end
 
   def test_character_limit_rejects_zero
@@ -113,7 +111,7 @@ def test_character_limit_with_caption
       end
     end
 
-    assert_selector "span.FormControl-caption[data-max-length='20']", text: "20 characters remaining."
+    assert_selector "span.FormControl-caption[data-max-length='20'] .FormControl-caption-text", text: "20 characters remaining"
     assert_selector "span.FormControl-caption", text: "Choose a unique username"
   end
 end
diff --git a/test/system/alpha/text_area_test.rb b/test/system/alpha/text_area_test.rb
index 8ed93d7742..145c63c84a 100644
--- a/test/system/alpha/text_area_test.rb
+++ b/test/system/alpha/text_area_test.rb
@@ -9,16 +9,16 @@ class IntegrationTextAreaTest < System::TestCase
     def test_character_limit_updates_on_input
       visit_preview(:with_character_limit)
 
-      assert_selector "span.FormControl-caption[data-max-length='10']", text: "10 characters remaining."
-      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :hidden
+      assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "10 characters remaining"
+      refute_selector "span.FormControl-caption .FormControl-caption-icon[hidden]", visible: :all
 
       textarea = find("textarea[data-target='primer-text-area.inputElement']")
       textarea.fill_in(with: "Hello")
 
       sleep 0.3
 
-      assert_selector "span.FormControl-caption[data-max-length='10']", text: "5 characters remaining."
-      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :hidden
+      assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "5 characters remaining"
+      refute_selector "span.FormControl-caption .FormControl-caption-icon[hidden]", visible: :all
     end
 
     def test_character_limit_shows_validation_when_exceeded
@@ -29,18 +29,11 @@ def test_character_limit_shows_validation_when_exceeded
 
       sleep 0.3
 
-      assert_selector "span.FormControl-caption[data-max-length='10']", text: "2 characters over."
-      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :visible do |element|
-        assert_includes element.text, "You've exceeded the character limit"
-      end
+      assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "2 characters over"
+      assert_selector "span.FormControl-caption .FormControl-caption-icon:not([hidden])", visible: :visible
+      assert_selector "span.FormControl-caption.fgColor-danger"
 
       assert_selector "textarea[invalid='true'][aria-invalid='true']"
-
-      validation_element = find("div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']")
-      validation_id = validation_element["id"]
-
-      textarea_aria_describedby = textarea["aria-describedby"]
-      assert_includes textarea_aria_describedby, validation_id, "textarea aria-describedby should include validation element ID"
     end
 
     def test_character_limit_clears_validation_when_back_under_limit
@@ -50,14 +43,15 @@ def test_character_limit_clears_validation_when_back_under_limit
       textarea.fill_in(with: "Hello World!") # 12 characters
       sleep 0.3
 
-      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :visible
+      assert_selector "span.FormControl-caption .FormControl-caption-icon:not([hidden])", visible: :visible
       assert_selector "textarea[invalid='true'][aria-invalid='true']"
 
       textarea.fill_in(with: "Hello") # 5 characters
       sleep 0.3
 
-      assert_selector "span.FormControl-caption[data-max-length='10']", text: "5 characters remaining."
-      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-area.validationElement']", visible: :hidden
+      assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "5 characters remaining"
+      refute_selector "span.FormControl-caption .FormControl-caption-icon[hidden]", visible: :all
+      refute_selector "span.FormControl-caption.fgColor-danger"
 
       refute_selector "textarea[invalid='true']"
       refute_selector "textarea[aria-invalid='true']"
@@ -74,12 +68,12 @@ def test_character_limit_screen_reader_text_updates
       # Wait for debounced update (500ms + buffer)
       sleep 0.6
 
-      assert_equal "6 characters remaining.", sr_element.text
+      assert_equal "6 characters remaining", sr_element.text
 
       textarea.fill_in(with: "Hello World!") # 12 characters
       sleep 0.6
 
-      assert_equal "2 characters over.", sr_element.text
+      assert_equal "2 characters over", sr_element.text
     end
 
     def test_character_limit_singular_vs_plural
@@ -89,12 +83,53 @@ def test_character_limit_singular_vs_plural
       textarea.fill_in(with: "123456789") # 9 characters, limit is 10
       sleep 0.3
 
-      assert_selector "span.FormControl-caption[data-max-length='10']", text: "1 character remaining."
+      assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "1 character remaining"
 
       textarea.fill_in(with: "12345678901") # 11 characters
       sleep 0.3
 
-      assert_selector "span.FormControl-caption[data-max-length='10']", text: "1 character over."
+      assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "1 character over"
+    end
+
+    def test_character_limit_screen_reader_not_announced_on_load
+      visit_preview(:with_character_limit)
+
+      sr_element = find("span.sr-only[aria-live='polite']")
+      
+      # Screen reader element should be empty on initial load
+      assert_equal "", sr_element.text
+      
+      # Only populated after user input
+      textarea = find("textarea[data-target='primer-text-area.inputElement']")
+      textarea.fill_in(with: "Test")
+      
+      sleep 0.6 # Wait for debounced update
+      
+      assert_equal "6 characters remaining", sr_element.text
+    end
+
+    def test_character_limit_icon_visibility
+      visit_preview(:with_character_limit)
+
+      # Icon should be hidden initially
+      assert_selector "span.FormControl-caption .FormControl-caption-icon[hidden]"
+      
+      textarea = find("textarea[data-target='primer-text-area.inputElement']")
+      
+      # Icon should remain hidden when under limit
+      textarea.fill_in(with: "Hello")
+      sleep 0.3
+      assert_selector "span.FormControl-caption .FormControl-caption-icon[hidden]"
+      
+      # Icon should be visible when over limit
+      textarea.fill_in(with: "Hello World!")
+      sleep 0.3
+      assert_selector "span.FormControl-caption .FormControl-caption-icon:not([hidden])", visible: :visible
+      
+      # Icon should be hidden again when back under limit
+      textarea.fill_in(with: "Hi")
+      sleep 0.3
+      assert_selector "span.FormControl-caption .FormControl-caption-icon[hidden]"
     end
   end
 end
diff --git a/test/system/alpha/text_field_test.rb b/test/system/alpha/text_field_test.rb
index 064588fea5..1f1f576abd 100644
--- a/test/system/alpha/text_field_test.rb
+++ b/test/system/alpha/text_field_test.rb
@@ -120,16 +120,16 @@ def test_shows_and_hides_screenreader_text
     def test_character_limit_updates_on_input
       visit_preview(:with_character_limit)
 
-      assert_selector "span.FormControl-caption[data-max-length='10']", text: "10 characters remaining."
-      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
+      assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "10 characters remaining"
+      refute_selector "span.FormControl-caption .FormControl-caption-icon[hidden]", visible: :all
 
       input = find("input[type=text][data-target*='primer-text-field.inputElement']")
       input.fill_in(with: "Hello")
 
       sleep 0.2
 
-      assert_selector "span.FormControl-caption[data-max-length='10']", text: "5 characters remaining."
-      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
+      assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "5 characters remaining"
+      refute_selector "span.FormControl-caption .FormControl-caption-icon[hidden]", visible: :all
     end
 
     def test_character_limit_shows_validation_when_exceeded
@@ -141,17 +141,10 @@ def test_character_limit_shows_validation_when_exceeded
 
       sleep 0.3
 
-      assert_selector "span.FormControl-caption[data-max-length='10']", text: "2 characters over."
-      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :visible do |element|
-        assert_includes element.text, "You've exceeded the character limit"
-      end
+      assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "2 characters over"
+      assert_selector "span.FormControl-caption .FormControl-caption-icon:not([hidden])", visible: :visible
+      assert_selector "span.FormControl-caption.fgColor-danger"
       assert_selector "input[invalid='true'][aria-invalid='true']"
-
-      validation_element = find("div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']")
-      validation_id = validation_element["id"]
-
-      input_aria_describedby = input["aria-describedby"]
-      assert_includes input_aria_describedby, validation_id, "input aria-describedby should include validation element ID"
     end
 
     def test_character_limit_clears_validation_when_back_under_limit
@@ -162,14 +155,15 @@ def test_character_limit_clears_validation_when_back_under_limit
       input.fill_in(with: "Hello World!") # 12 characters
       sleep 0.3
 
-      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :visible
+      assert_selector "span.FormControl-caption .FormControl-caption-icon:not([hidden])", visible: :visible
       assert_selector "input[invalid='true'][aria-invalid='true']"
 
       input.fill_in(with: "Hello") # 5 characters
       sleep 0.3
 
-      assert_selector "span.FormControl-caption[data-max-length='10']", text: "5 characters remaining."
-      assert_selector "div.FormControl-inlineValidation[data-target='primer-text-field.characterLimitValidationElement']", visible: :hidden
+      assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "5 characters remaining"
+      refute_selector "span.FormControl-caption .FormControl-caption-icon[hidden]", visible: :all
+      refute_selector "span.FormControl-caption.fgColor-danger"
 
       refute_selector "input[invalid='true']"
       refute_selector "input[aria-invalid='true']"
@@ -187,12 +181,12 @@ def test_character_limit_screen_reader_text_updates
       # Wait for debounced update (500ms + buffer)
       sleep 0.6
 
-      assert_equal "6 characters remaining.", sr_element.text
+      assert_equal "6 characters remaining", sr_element.text
 
       input.fill_in(with: "Hello World!") # 12 characters
       sleep 0.6
 
-      assert_equal "2 characters over.", sr_element.text
+      assert_equal "2 characters over", sr_element.text
     end
 
     def test_character_limit_singular_vs_plural
@@ -203,12 +197,26 @@ def test_character_limit_singular_vs_plural
       input.fill_in(with: "123456789") # 9 characters, limit is 10
       sleep 0.3
 
-      assert_selector "span.FormControl-caption[data-max-length='10']", text: "1 character remaining."
+      assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "1 character remaining"
 
       input.fill_in(with: "12345678901") # 11 characters
       sleep 0.3
 
-      assert_selector "span.FormControl-caption[data-max-length='10']", text: "1 character over."
+      assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "1 character over"
+    end
+
+    def test_character_limit_screen_reader_not_announced_on_load
+      visit_preview(:with_character_limit)
+
+      sr_element = find("span.sr-only[aria-live='polite']")
+
+      assert_equal "", sr_element.text
+
+      input = find("input[type=text][data-target*='primer-text-field.inputElement']")
+      input.fill_in(with: "Test")
+
+      sleep 0.6 # Wait for debounced update
+      assert_equal "6 characters remaining", sr_element.text
     end
   end
 end

From e5d538edeaf50fbb09906f6afe0c7fb5b616f9e3 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 10 Dec 2025 16:45:47 +0000
Subject: [PATCH 29/33] More test fixes

---
 test/system/alpha/text_area_test.rb  | 22 +++++++----------
 test/system/alpha/text_field_test.rb | 36 ----------------------------
 2 files changed, 8 insertions(+), 50 deletions(-)

diff --git a/test/system/alpha/text_area_test.rb b/test/system/alpha/text_area_test.rb
index 145c63c84a..283c6535f2 100644
--- a/test/system/alpha/text_area_test.rb
+++ b/test/system/alpha/text_area_test.rb
@@ -95,38 +95,32 @@ def test_character_limit_screen_reader_not_announced_on_load
       visit_preview(:with_character_limit)
 
       sr_element = find("span.sr-only[aria-live='polite']")
-      
-      # Screen reader element should be empty on initial load
+
       assert_equal "", sr_element.text
-      
-      # Only populated after user input
+
       textarea = find("textarea[data-target='primer-text-area.inputElement']")
       textarea.fill_in(with: "Test")
-      
+
       sleep 0.6 # Wait for debounced update
-      
+
       assert_equal "6 characters remaining", sr_element.text
     end
 
     def test_character_limit_icon_visibility
       visit_preview(:with_character_limit)
 
-      # Icon should be hidden initially
       assert_selector "span.FormControl-caption .FormControl-caption-icon[hidden]"
-      
+
       textarea = find("textarea[data-target='primer-text-area.inputElement']")
-      
-      # Icon should remain hidden when under limit
+
       textarea.fill_in(with: "Hello")
       sleep 0.3
       assert_selector "span.FormControl-caption .FormControl-caption-icon[hidden]"
-      
-      # Icon should be visible when over limit
+
       textarea.fill_in(with: "Hello World!")
       sleep 0.3
       assert_selector "span.FormControl-caption .FormControl-caption-icon:not([hidden])", visible: :visible
-      
-      # Icon should be hidden again when back under limit
+
       textarea.fill_in(with: "Hi")
       sleep 0.3
       assert_selector "span.FormControl-caption .FormControl-caption-icon[hidden]"
diff --git a/test/system/alpha/text_field_test.rb b/test/system/alpha/text_field_test.rb
index 1f1f576abd..f8d94a34bf 100644
--- a/test/system/alpha/text_field_test.rb
+++ b/test/system/alpha/text_field_test.rb
@@ -155,40 +155,18 @@ def test_character_limit_clears_validation_when_back_under_limit
       input.fill_in(with: "Hello World!") # 12 characters
       sleep 0.3
 
-      assert_selector "span.FormControl-caption .FormControl-caption-icon:not([hidden])", visible: :visible
       assert_selector "input[invalid='true'][aria-invalid='true']"
 
       input.fill_in(with: "Hello") # 5 characters
       sleep 0.3
 
       assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "5 characters remaining"
-      refute_selector "span.FormControl-caption .FormControl-caption-icon[hidden]", visible: :all
       refute_selector "span.FormControl-caption.fgColor-danger"
 
       refute_selector "input[invalid='true']"
       refute_selector "input[aria-invalid='true']"
     end
 
-    def test_character_limit_screen_reader_text_updates
-      visit_preview(:with_character_limit)
-
-      input = find("input[type=text][data-target*='primer-text-field.inputElement']")
-
-      sr_element = find("span.sr-only[aria-live='polite']")
-
-      input.fill_in(with: "Test")
-
-      # Wait for debounced update (500ms + buffer)
-      sleep 0.6
-
-      assert_equal "6 characters remaining", sr_element.text
-
-      input.fill_in(with: "Hello World!") # 12 characters
-      sleep 0.6
-
-      assert_equal "2 characters over", sr_element.text
-    end
-
     def test_character_limit_singular_vs_plural
       visit_preview(:with_character_limit)
 
@@ -204,19 +182,5 @@ def test_character_limit_singular_vs_plural
 
       assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "1 character over"
     end
-
-    def test_character_limit_screen_reader_not_announced_on_load
-      visit_preview(:with_character_limit)
-
-      sr_element = find("span.sr-only[aria-live='polite']")
-
-      assert_equal "", sr_element.text
-
-      input = find("input[type=text][data-target*='primer-text-field.inputElement']")
-      input.fill_in(with: "Test")
-
-      sleep 0.6 # Wait for debounced update
-      assert_equal "6 characters remaining", sr_element.text
-    end
   end
 end

From 66efdd65ce1b112661bb109888b0dcbc4bf55738 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 10 Dec 2025 16:56:45 +0000
Subject: [PATCH 30/33] More tets

---
 test/system/alpha/text_area_test.rb  | 22 ----------------------
 test/system/alpha/text_field_test.rb |  1 -
 2 files changed, 23 deletions(-)

diff --git a/test/system/alpha/text_area_test.rb b/test/system/alpha/text_area_test.rb
index 283c6535f2..8cba20e561 100644
--- a/test/system/alpha/text_area_test.rb
+++ b/test/system/alpha/text_area_test.rb
@@ -10,7 +10,6 @@ def test_character_limit_updates_on_input
       visit_preview(:with_character_limit)
 
       assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "10 characters remaining"
-      refute_selector "span.FormControl-caption .FormControl-caption-icon[hidden]", visible: :all
 
       textarea = find("textarea[data-target='primer-text-area.inputElement']")
       textarea.fill_in(with: "Hello")
@@ -50,7 +49,6 @@ def test_character_limit_clears_validation_when_back_under_limit
       sleep 0.3
 
       assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "5 characters remaining"
-      refute_selector "span.FormControl-caption .FormControl-caption-icon[hidden]", visible: :all
       refute_selector "span.FormControl-caption.fgColor-danger"
 
       refute_selector "textarea[invalid='true']"
@@ -105,25 +103,5 @@ def test_character_limit_screen_reader_not_announced_on_load
 
       assert_equal "6 characters remaining", sr_element.text
     end
-
-    def test_character_limit_icon_visibility
-      visit_preview(:with_character_limit)
-
-      assert_selector "span.FormControl-caption .FormControl-caption-icon[hidden]"
-
-      textarea = find("textarea[data-target='primer-text-area.inputElement']")
-
-      textarea.fill_in(with: "Hello")
-      sleep 0.3
-      assert_selector "span.FormControl-caption .FormControl-caption-icon[hidden]"
-
-      textarea.fill_in(with: "Hello World!")
-      sleep 0.3
-      assert_selector "span.FormControl-caption .FormControl-caption-icon:not([hidden])", visible: :visible
-
-      textarea.fill_in(with: "Hi")
-      sleep 0.3
-      assert_selector "span.FormControl-caption .FormControl-caption-icon[hidden]"
-    end
   end
 end
diff --git a/test/system/alpha/text_field_test.rb b/test/system/alpha/text_field_test.rb
index f8d94a34bf..82e6216473 100644
--- a/test/system/alpha/text_field_test.rb
+++ b/test/system/alpha/text_field_test.rb
@@ -121,7 +121,6 @@ def test_character_limit_updates_on_input
       visit_preview(:with_character_limit)
 
       assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "10 characters remaining"
-      refute_selector "span.FormControl-caption .FormControl-caption-icon[hidden]", visible: :all
 
       input = find("input[type=text][data-target*='primer-text-field.inputElement']")
       input.fill_in(with: "Hello")

From 342fb8495c98def1f0f01fd5eb96426a6f0fc061 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 10 Dec 2025 17:06:15 +0000
Subject: [PATCH 31/33] Tests...again

---
 test/system/alpha/text_area_test.rb  | 1 -
 test/system/alpha/text_field_test.rb | 1 -
 2 files changed, 2 deletions(-)

diff --git a/test/system/alpha/text_area_test.rb b/test/system/alpha/text_area_test.rb
index 8cba20e561..e1fc2f49fc 100644
--- a/test/system/alpha/text_area_test.rb
+++ b/test/system/alpha/text_area_test.rb
@@ -17,7 +17,6 @@ def test_character_limit_updates_on_input
       sleep 0.3
 
       assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "5 characters remaining"
-      refute_selector "span.FormControl-caption .FormControl-caption-icon[hidden]", visible: :all
     end
 
     def test_character_limit_shows_validation_when_exceeded
diff --git a/test/system/alpha/text_field_test.rb b/test/system/alpha/text_field_test.rb
index 82e6216473..49f9f82f75 100644
--- a/test/system/alpha/text_field_test.rb
+++ b/test/system/alpha/text_field_test.rb
@@ -128,7 +128,6 @@ def test_character_limit_updates_on_input
       sleep 0.2
 
       assert_selector "span.FormControl-caption[data-max-length='10'] .FormControl-caption-text", text: "5 characters remaining"
-      refute_selector "span.FormControl-caption .FormControl-caption-icon[hidden]", visible: :all
     end
 
     def test_character_limit_shows_validation_when_exceeded

From 213eaa60e9f70e4cdae8dbd37613472ca1375fdf Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 10 Dec 2025 17:19:15 +0000
Subject: [PATCH 32/33] Revert package-lock.json

---
 package-lock.json | 333 +++++++++++++++++++++++++---------------------
 1 file changed, 184 insertions(+), 149 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ac51839e1b..a19ada9905 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@primer/view-components",
-  "version": "0.48.0",
+  "version": "0.47.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@primer/view-components",
-      "version": "0.48.0",
+      "version": "0.47.0",
       "license": "MIT",
       "dependencies": {
         "@github/auto-check-element": "^6.0.0",
@@ -41,7 +41,7 @@
         "eslint": "^9.10.0",
         "eslint-plugin-github": "^6.0.0",
         "glob": "^11.0.2",
-        "markdownlint-cli2": "^0.19.1",
+        "markdownlint-cli2": "^0.18.1",
         "mocha": "^11.0.1",
         "playwright": "^1.49.1",
         "postcss": "^8.4.16",
@@ -523,6 +523,18 @@
         "js-yaml": "^4.1.1"
       }
     },
+    "node_modules/@changesets/parse/node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/@changesets/pre": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@changesets/pre/-/pre-2.0.2.tgz",
@@ -805,7 +817,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -829,7 +840,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -940,7 +950,6 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -1367,7 +1376,6 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -2681,6 +2689,7 @@
       "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
       "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "20 || >=22"
       }
@@ -2690,6 +2699,7 @@
       "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
       "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@isaacs/balanced-match": "^4.0.1"
       },
@@ -3105,9 +3115,9 @@
       }
     },
     "node_modules/@primer/behaviors": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.4.tgz",
-      "integrity": "sha512-+z7LNbijJqBnsz1u9Jcgrc9yPLwGmzYMnI+yBiS1oNuEW1zLH5ZE7Kp9UFRo7fqPgM/IZ8xbtdTAuBZq9DPs7g=="
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.3.tgz",
+      "integrity": "sha512-Cot5Jg5McTT4zg41omctzY60DygZ6qlhrBtD4rpDBM6vNi6CrCAs/2QSPAgYTW7Kz+jFp4BXJFhNcVqfqTgaxA=="
     },
     "node_modules/@primer/css": {
       "version": "22.0.2",
@@ -3547,10 +3557,11 @@
       "license": "MIT"
     },
     "node_modules/@sindresorhus/merge-streams": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
-      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=18"
       },
@@ -3563,6 +3574,7 @@
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
       "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/ms": "*"
       }
@@ -3590,20 +3602,21 @@
       "version": "0.16.7",
       "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
       "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
       "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/node": {
       "version": "20.3.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
       "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
@@ -3615,7 +3628,8 @@
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.45.0",
@@ -3660,7 +3674,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.45.0.tgz",
       "integrity": "sha512-TGf22kon8KW+DeKaUmOibKWktRY8b2NSAZNdtWh798COm1NWx8+xJ6iFBtk3IvLdv6+LGLJLRlyhrhEDZWargQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.45.0",
         "@typescript-eslint/types": "8.45.0",
@@ -3881,7 +3894,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4334,7 +4346,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -4531,6 +4542,7 @@
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
       "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -4541,6 +4553,7 @@
       "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
       "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -4551,6 +4564,7 @@
       "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
       "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -4876,7 +4890,6 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -5180,10 +5193,11 @@
       }
     },
     "node_modules/decode-named-character-reference": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz",
-      "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.1.0.tgz",
+      "integrity": "sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "character-entities": "^2.0.0"
       },
@@ -5258,6 +5272,7 @@
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -5276,6 +5291,7 @@
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
       "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "dequal": "^2.0.0"
       },
@@ -5656,7 +5672,6 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.37.0.tgz",
       "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5717,7 +5732,6 @@
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
       "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
       "dev": true,
-      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -6526,14 +6540,15 @@
       }
     },
     "node_modules/glob": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz",
-      "integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==",
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.3.tgz",
+      "integrity": "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.3.1",
         "jackspeak": "^4.1.1",
-        "minimatch": "^10.1.1",
+        "minimatch": "^10.0.3",
         "minipass": "^7.1.2",
         "package-json-from-dist": "^1.0.0",
         "path-scurry": "^2.0.0"
@@ -6587,10 +6602,11 @@
       }
     },
     "node_modules/glob/node_modules/minimatch": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.1.1.tgz",
-      "integrity": "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==",
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.3.tgz",
+      "integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "@isaacs/brace-expansion": "^5.0.0"
       },
@@ -6965,6 +6981,7 @@
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
       "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -6975,6 +6992,7 @@
       "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
       "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-alphabetical": "^2.0.0",
         "is-decimal": "^2.0.0"
@@ -7142,6 +7160,7 @@
       "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
       "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -7217,6 +7236,7 @@
       "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
       "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -7512,9 +7532,9 @@
       "dev": true
     },
     "node_modules/js-yaml": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dev": true,
       "dependencies": {
         "argparse": "^2.0.1"
@@ -7596,14 +7616,15 @@
       }
     },
     "node_modules/katex": {
-      "version": "0.16.25",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.25.tgz",
-      "integrity": "sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==",
+      "version": "0.16.22",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
+      "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
       "dev": true,
       "funding": [
         "https://opencollective.com/katex",
         "https://github.com/sponsors/katex"
       ],
+      "license": "MIT",
       "dependencies": {
         "commander": "^8.3.0"
       },
@@ -7616,6 +7637,7 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
       "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 12"
       }
@@ -7843,10 +7865,11 @@
       }
     },
     "node_modules/markdownlint": {
-      "version": "0.39.0",
-      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.39.0.tgz",
-      "integrity": "sha512-Xt/oY7bAiHwukL1iru2np5LIkhwD19Y7frlsiDILK62v3jucXCD6JXlZlwMG12HZOR+roHIVuJZrfCkOhp6k3g==",
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.38.0.tgz",
+      "integrity": "sha512-xaSxkaU7wY/0852zGApM8LdlIfGCW8ETZ0Rr62IQtAnUMlMuifsg09vWJcNYeL4f0anvr8Vo4ZQar8jGpV0btQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "micromark": "4.0.2",
         "micromark-core-commonmark": "2.0.3",
@@ -7865,17 +7888,18 @@
       }
     },
     "node_modules/markdownlint-cli2": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.19.1.tgz",
-      "integrity": "sha512-p3JTemJJbkiMjXEMiFwgm0v6ym5g8K+b2oDny+6xdl300tUKySxvilJQLSea48C6OaYNmO30kH9KxpiAg5bWJw==",
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.18.1.tgz",
+      "integrity": "sha512-/4Osri9QFGCZOCTkfA8qJF+XGjKYERSHkXzxSyS1hd3ZERJGjvsUao2h4wdnvpHp6Tu2Jh/bPHM0FE9JJza6ng==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "globby": "15.0.0",
-        "js-yaml": "4.1.1",
+        "globby": "14.1.0",
+        "js-yaml": "4.1.0",
         "jsonc-parser": "3.3.1",
         "markdown-it": "14.1.0",
-        "markdownlint": "0.39.0",
-        "markdownlint-cli2-formatter-default": "0.0.6",
+        "markdownlint": "0.38.0",
+        "markdownlint-cli2-formatter-default": "0.0.5",
         "micromatch": "4.0.8"
       },
       "bin": {
@@ -7889,9 +7913,9 @@
       }
     },
     "node_modules/markdownlint-cli2-formatter-default": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.6.tgz",
-      "integrity": "sha512-VVDGKsq9sgzu378swJ0fcHfSicUnMxnL8gnLm/Q4J/xsNJ4e5bA6lvAz7PCzIl0/No0lHyaWdqVD2jotxOSFMQ==",
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.5.tgz",
+      "integrity": "sha512-4XKTwQ5m1+Txo2kuQ3Jgpo/KmnG+X90dWt4acufg6HVGadTUG5hzHF/wssp9b5MBYOMCnZ9RMPaU//uHsszF8Q==",
       "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/DavidAnson"
@@ -7901,20 +7925,21 @@
       }
     },
     "node_modules/markdownlint-cli2/node_modules/globby": {
-      "version": "15.0.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-15.0.0.tgz",
-      "integrity": "sha512-oB4vkQGqlMl682wL1IlWd02tXCbquGWM4voPEI85QmNKCaw8zGTm1f1rubFgkg3Eli2PtKlFgrnmUqasbQWlkw==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz",
+      "integrity": "sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@sindresorhus/merge-streams": "^4.0.0",
+        "@sindresorhus/merge-streams": "^2.1.0",
         "fast-glob": "^3.3.3",
-        "ignore": "^7.0.5",
+        "ignore": "^7.0.3",
         "path-type": "^6.0.0",
         "slash": "^5.1.0",
         "unicorn-magic": "^0.3.0"
       },
       "engines": {
-        "node": ">=20"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -7925,6 +7950,7 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
       "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 4"
       }
@@ -7934,6 +7960,7 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-6.0.0.tgz",
       "integrity": "sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=18"
       },
@@ -7946,6 +7973,7 @@
       "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
       "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=14.16"
       },
@@ -8016,6 +8044,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "@types/debug": "^4.0.0",
         "debug": "^4.0.0",
@@ -8051,6 +8080,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "decode-named-character-reference": "^1.0.0",
         "devlop": "^1.0.0",
@@ -8075,6 +8105,7 @@
       "resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-4.0.0.tgz",
       "integrity": "sha512-/C2nqVmXXmiseSSuCdItCMho7ybwwop6RrrRPk0KbOHW21JKoCldC+8rFOaundDoRBUWBnJJcxeA/Kvi34WQXg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-factory-space": "^2.0.0",
@@ -8094,6 +8125,7 @@
       "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
       "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "micromark-util-character": "^2.0.0",
         "micromark-util-sanitize-uri": "^2.0.0",
@@ -8110,6 +8142,7 @@
       "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
       "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-core-commonmark": "^2.0.0",
@@ -8130,6 +8163,7 @@
       "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
       "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-factory-space": "^2.0.0",
@@ -8147,6 +8181,7 @@
       "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-3.1.0.tgz",
       "integrity": "sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/katex": "^0.16.0",
         "devlop": "^1.0.0",
@@ -8176,6 +8211,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-util-character": "^2.0.0",
         "micromark-util-symbol": "^2.0.0",
@@ -8197,6 +8233,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-util-character": "^2.0.0",
@@ -8219,6 +8256,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-util-character": "^2.0.0",
         "micromark-util-types": "^2.0.0"
@@ -8239,6 +8277,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-factory-space": "^2.0.0",
         "micromark-util-character": "^2.0.0",
@@ -8261,6 +8300,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-factory-space": "^2.0.0",
         "micromark-util-character": "^2.0.0",
@@ -8283,6 +8323,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-util-symbol": "^2.0.0",
         "micromark-util-types": "^2.0.0"
@@ -8303,6 +8344,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-util-symbol": "^2.0.0"
       }
@@ -8322,6 +8364,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-util-character": "^2.0.0",
         "micromark-util-symbol": "^2.0.0",
@@ -8343,6 +8386,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-util-chunked": "^2.0.0",
         "micromark-util-types": "^2.0.0"
@@ -8363,6 +8407,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-util-symbol": "^2.0.0"
       }
@@ -8381,7 +8426,8 @@
           "type": "OpenCollective",
           "url": "https://opencollective.com/unified"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/micromark-util-html-tag-name": {
       "version": "2.0.1",
@@ -8397,7 +8443,8 @@
           "type": "OpenCollective",
           "url": "https://opencollective.com/unified"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/micromark-util-normalize-identifier": {
       "version": "2.0.1",
@@ -8414,6 +8461,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-util-symbol": "^2.0.0"
       }
@@ -8433,6 +8481,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-util-types": "^2.0.0"
       }
@@ -8452,6 +8501,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-util-character": "^2.0.0",
         "micromark-util-encode": "^2.0.0",
@@ -8473,6 +8523,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-util-chunked": "^2.0.0",
@@ -8494,7 +8545,8 @@
           "type": "OpenCollective",
           "url": "https://opencollective.com/unified"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/micromark-util-types": {
       "version": "2.0.2",
@@ -8510,7 +8562,8 @@
           "type": "OpenCollective",
           "url": "https://opencollective.com/unified"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/micromatch": {
       "version": "4.0.8",
@@ -8631,9 +8684,9 @@
       }
     },
     "node_modules/mocha/node_modules/glob": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
-      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
       "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
@@ -9064,6 +9117,7 @@
       "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
       "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/unist": "^2.0.0",
         "character-entities-legacy": "^3.0.0",
@@ -9231,7 +9285,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -10268,7 +10321,6 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -10898,7 +10950,6 @@
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -11153,7 +11204,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "dev": true,
-      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -11798,7 +11848,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@csstools/css-parser-algorithms": "^3.0.4",
         "@csstools/css-tokenizer": "^3.0.3",
@@ -12100,7 +12149,6 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -12376,7 +12424,6 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -12437,8 +12484,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -12535,7 +12581,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -12598,6 +12643,7 @@
       "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
       "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=18"
       },
@@ -12789,7 +12835,6 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13723,6 +13768,17 @@
       "requires": {
         "@changesets/types": "^6.1.0",
         "js-yaml": "^4.1.1"
+      },
+      "dependencies": {
+        "js-yaml": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+          "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+          "dev": true,
+          "requires": {
+            "argparse": "^2.0.1"
+          }
+        }
       }
     },
     "@changesets/pre": {
@@ -13905,15 +13961,13 @@
       "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
       "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
       "dev": true,
-      "peer": true,
       "requires": {}
     },
     "@csstools/css-tokenizer": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
       "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "@csstools/media-query-list-parser": {
       "version": "4.0.3",
@@ -13957,7 +14011,6 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
-          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -14140,7 +14193,6 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
-          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -15105,9 +15157,9 @@
       }
     },
     "@primer/behaviors": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.4.tgz",
-      "integrity": "sha512-+z7LNbijJqBnsz1u9Jcgrc9yPLwGmzYMnI+yBiS1oNuEW1zLH5ZE7Kp9UFRo7fqPgM/IZ8xbtdTAuBZq9DPs7g=="
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.3.tgz",
+      "integrity": "sha512-Cot5Jg5McTT4zg41omctzY60DygZ6qlhrBtD4rpDBM6vNi6CrCAs/2QSPAgYTW7Kz+jFp4BXJFhNcVqfqTgaxA=="
     },
     "@primer/css": {
       "version": "22.0.2",
@@ -15354,9 +15406,9 @@
       "dev": true
     },
     "@sindresorhus/merge-streams": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
-      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
       "dev": true
     },
     "@types/debug": {
@@ -15402,8 +15454,7 @@
       "version": "20.3.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
       "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "@types/resolve": {
       "version": "1.20.2",
@@ -15447,7 +15498,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.45.0.tgz",
       "integrity": "sha512-TGf22kon8KW+DeKaUmOibKWktRY8b2NSAZNdtWh798COm1NWx8+xJ6iFBtk3IvLdv6+LGLJLRlyhrhEDZWargQ==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@typescript-eslint/scope-manager": "8.45.0",
         "@typescript-eslint/types": "8.45.0",
@@ -15575,8 +15625,7 @@
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "acorn-jsx": {
       "version": "5.3.2",
@@ -15858,7 +15907,6 @@
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz",
       "integrity": "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==",
       "dev": true,
-      "peer": true,
       "requires": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -16204,7 +16252,6 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
-          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -16403,9 +16450,9 @@
       "dev": true
     },
     "decode-named-character-reference": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz",
-      "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.1.0.tgz",
+      "integrity": "sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==",
       "dev": true,
       "requires": {
         "character-entities": "^2.0.0"
@@ -16752,7 +16799,6 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.37.0.tgz",
       "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -16819,7 +16865,6 @@
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
       "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
       "dev": true,
-      "peer": true,
       "requires": {}
     },
     "eslint-import-resolver-node": {
@@ -17354,14 +17399,14 @@
       }
     },
     "glob": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz",
-      "integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==",
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.3.tgz",
+      "integrity": "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==",
       "dev": true,
       "requires": {
         "foreground-child": "^3.3.1",
         "jackspeak": "^4.1.1",
-        "minimatch": "^10.1.1",
+        "minimatch": "^10.0.3",
         "minipass": "^7.1.2",
         "package-json-from-dist": "^1.0.0",
         "path-scurry": "^2.0.0"
@@ -17383,9 +17428,9 @@
           "dev": true
         },
         "minimatch": {
-          "version": "10.1.1",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.1.1.tgz",
-          "integrity": "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==",
+          "version": "10.0.3",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.3.tgz",
+          "integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==",
           "dev": true,
           "requires": {
             "@isaacs/brace-expansion": "^5.0.0"
@@ -17976,9 +18021,9 @@
       "dev": true
     },
     "js-yaml": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dev": true,
       "requires": {
         "argparse": "^2.0.1"
@@ -18046,9 +18091,9 @@
       }
     },
     "katex": {
-      "version": "0.16.25",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.25.tgz",
-      "integrity": "sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==",
+      "version": "0.16.22",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
+      "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
       "dev": true,
       "requires": {
         "commander": "^8.3.0"
@@ -18247,9 +18292,9 @@
       }
     },
     "markdownlint": {
-      "version": "0.39.0",
-      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.39.0.tgz",
-      "integrity": "sha512-Xt/oY7bAiHwukL1iru2np5LIkhwD19Y7frlsiDILK62v3jucXCD6JXlZlwMG12HZOR+roHIVuJZrfCkOhp6k3g==",
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.38.0.tgz",
+      "integrity": "sha512-xaSxkaU7wY/0852zGApM8LdlIfGCW8ETZ0Rr62IQtAnUMlMuifsg09vWJcNYeL4f0anvr8Vo4ZQar8jGpV0btQ==",
       "dev": true,
       "requires": {
         "micromark": "4.0.2",
@@ -18263,29 +18308,29 @@
       }
     },
     "markdownlint-cli2": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.19.1.tgz",
-      "integrity": "sha512-p3JTemJJbkiMjXEMiFwgm0v6ym5g8K+b2oDny+6xdl300tUKySxvilJQLSea48C6OaYNmO30kH9KxpiAg5bWJw==",
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.18.1.tgz",
+      "integrity": "sha512-/4Osri9QFGCZOCTkfA8qJF+XGjKYERSHkXzxSyS1hd3ZERJGjvsUao2h4wdnvpHp6Tu2Jh/bPHM0FE9JJza6ng==",
       "dev": true,
       "requires": {
-        "globby": "15.0.0",
-        "js-yaml": "4.1.1",
+        "globby": "14.1.0",
+        "js-yaml": "4.1.0",
         "jsonc-parser": "3.3.1",
         "markdown-it": "14.1.0",
-        "markdownlint": "0.39.0",
-        "markdownlint-cli2-formatter-default": "0.0.6",
+        "markdownlint": "0.38.0",
+        "markdownlint-cli2-formatter-default": "0.0.5",
         "micromatch": "4.0.8"
       },
       "dependencies": {
         "globby": {
-          "version": "15.0.0",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-15.0.0.tgz",
-          "integrity": "sha512-oB4vkQGqlMl682wL1IlWd02tXCbquGWM4voPEI85QmNKCaw8zGTm1f1rubFgkg3Eli2PtKlFgrnmUqasbQWlkw==",
+          "version": "14.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz",
+          "integrity": "sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==",
           "dev": true,
           "requires": {
-            "@sindresorhus/merge-streams": "^4.0.0",
+            "@sindresorhus/merge-streams": "^2.1.0",
             "fast-glob": "^3.3.3",
-            "ignore": "^7.0.5",
+            "ignore": "^7.0.3",
             "path-type": "^6.0.0",
             "slash": "^5.1.0",
             "unicorn-magic": "^0.3.0"
@@ -18312,9 +18357,9 @@
       }
     },
     "markdownlint-cli2-formatter-default": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.6.tgz",
-      "integrity": "sha512-VVDGKsq9sgzu378swJ0fcHfSicUnMxnL8gnLm/Q4J/xsNJ4e5bA6lvAz7PCzIl0/No0lHyaWdqVD2jotxOSFMQ==",
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.5.tgz",
+      "integrity": "sha512-4XKTwQ5m1+Txo2kuQ3Jgpo/KmnG+X90dWt4acufg6HVGadTUG5hzHF/wssp9b5MBYOMCnZ9RMPaU//uHsszF8Q==",
       "dev": true,
       "requires": {}
     },
@@ -18735,9 +18780,9 @@
           }
         },
         "glob": {
-          "version": "10.5.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
-          "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+          "version": "10.4.5",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+          "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
           "dev": true,
           "requires": {
             "foreground-child": "^3.1.0",
@@ -19124,7 +19169,6 @@
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
       "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "dev": true,
-      "peer": true,
       "requires": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -19684,7 +19728,6 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
-          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -20060,8 +20103,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "prettier-linter-helpers": {
       "version": "1.0.0",
@@ -20236,7 +20278,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "dev": true,
-      "peer": true,
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -20681,7 +20722,6 @@
       "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.20.0.tgz",
       "integrity": "sha512-B5Myu9WRxrgKuLs3YyUXLP2H0mrbejwNxPmyADlACWwFsrL8Bmor/nTSh4OMae5sHjOz6gkSeccQH34gM4/nAw==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@csstools/css-parser-algorithms": "^3.0.4",
         "@csstools/css-tokenizer": "^3.0.3",
@@ -20795,7 +20835,6 @@
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
           "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
           "dev": true,
-          "peer": true,
           "requires": {
             "cssesc": "^3.0.0",
             "util-deprecate": "^1.0.2"
@@ -21066,8 +21105,7 @@
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
           "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-          "dev": true,
-          "peer": true
+          "dev": true
         }
       }
     },
@@ -21115,8 +21153,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "type-check": {
       "version": "0.4.0",
@@ -21184,8 +21221,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "typescript-eslint": {
       "version": "8.45.0",
@@ -21293,8 +21329,7 @@
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
           "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-          "dev": true,
-          "peer": true
+          "dev": true
         },
         "rollup": {
           "version": "4.39.0",

From 8dfc2441e38e26a40bcbcdf09b859a37d4781a7f Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 10 Dec 2025 17:37:02 +0000
Subject: [PATCH 33/33] Revert package-lock.json again

---
 package-lock.json | 271 +++++++++++++++++-----------------------------
 1 file changed, 97 insertions(+), 174 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fb0ad806ec..1a1a32e92f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@primer/view-components",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@primer/view-components",
-      "version": "0.47.0",
+      "version": "0.48.0",
       "license": "MIT",
       "dependencies": {
         "@github/auto-check-element": "^6.0.0",
@@ -41,7 +41,7 @@
         "eslint": "^9.10.0",
         "eslint-plugin-github": "^6.0.0",
         "glob": "^11.0.2",
-        "markdownlint-cli2": "^0.18.1",
+        "markdownlint-cli2": "^0.19.1",
         "mocha": "^11.0.1",
         "playwright": "^1.49.1",
         "postcss": "^8.4.16",
@@ -523,18 +523,6 @@
         "js-yaml": "^4.1.1"
       }
     },
-    "node_modules/@changesets/parse/node_modules/js-yaml": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
     "node_modules/@changesets/pre": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@changesets/pre/-/pre-2.0.2.tgz",
@@ -2689,7 +2677,6 @@
       "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
       "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": "20 || >=22"
       }
@@ -2699,7 +2686,6 @@
       "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
       "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@isaacs/balanced-match": "^4.0.1"
       },
@@ -3115,9 +3101,9 @@
       }
     },
     "node_modules/@primer/behaviors": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.3.tgz",
-      "integrity": "sha512-Cot5Jg5McTT4zg41omctzY60DygZ6qlhrBtD4rpDBM6vNi6CrCAs/2QSPAgYTW7Kz+jFp4BXJFhNcVqfqTgaxA=="
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.4.tgz",
+      "integrity": "sha512-+z7LNbijJqBnsz1u9Jcgrc9yPLwGmzYMnI+yBiS1oNuEW1zLH5ZE7Kp9UFRo7fqPgM/IZ8xbtdTAuBZq9DPs7g=="
     },
     "node_modules/@primer/css": {
       "version": "22.0.2",
@@ -3557,11 +3543,10 @@
       "license": "MIT"
     },
     "node_modules/@sindresorhus/merge-streams": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
-      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
+      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=18"
       },
@@ -3574,7 +3559,6 @@
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
       "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@types/ms": "*"
       }
@@ -3602,15 +3586,13 @@
       "version": "0.16.7",
       "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
       "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==",
-      "dev": true,
-      "license": "MIT"
+      "dev": true
     },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
       "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
-      "dev": true,
-      "license": "MIT"
+      "dev": true
     },
     "node_modules/@types/node": {
       "version": "20.3.1",
@@ -3628,8 +3610,7 @@
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
-      "dev": true,
-      "license": "MIT"
+      "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.45.0",
@@ -4542,7 +4523,6 @@
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
       "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
       "dev": true,
-      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -4553,7 +4533,6 @@
       "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
       "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
       "dev": true,
-      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -4564,7 +4543,6 @@
       "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
       "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
       "dev": true,
-      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -5193,11 +5171,10 @@
       }
     },
     "node_modules/decode-named-character-reference": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.1.0.tgz",
-      "integrity": "sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz",
+      "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "character-entities": "^2.0.0"
       },
@@ -5272,7 +5249,6 @@
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -5291,7 +5267,6 @@
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
       "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "dequal": "^2.0.0"
       },
@@ -6540,15 +6515,14 @@
       }
     },
     "node_modules/glob": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.3.tgz",
-      "integrity": "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz",
+      "integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.3.1",
         "jackspeak": "^4.1.1",
-        "minimatch": "^10.0.3",
+        "minimatch": "^10.1.1",
         "minipass": "^7.1.2",
         "package-json-from-dist": "^1.0.0",
         "path-scurry": "^2.0.0"
@@ -6602,11 +6576,10 @@
       }
     },
     "node_modules/glob/node_modules/minimatch": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.3.tgz",
-      "integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==",
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.1.1.tgz",
+      "integrity": "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "@isaacs/brace-expansion": "^5.0.0"
       },
@@ -6981,7 +6954,6 @@
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
       "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
       "dev": true,
-      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -6992,7 +6964,6 @@
       "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
       "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "is-alphabetical": "^2.0.0",
         "is-decimal": "^2.0.0"
@@ -7160,7 +7131,6 @@
       "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
       "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
       "dev": true,
-      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -7236,7 +7206,6 @@
       "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
       "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
       "dev": true,
-      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -7532,9 +7501,9 @@
       "dev": true
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "dependencies": {
         "argparse": "^2.0.1"
@@ -7616,15 +7585,14 @@
       }
     },
     "node_modules/katex": {
-      "version": "0.16.22",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
-      "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
+      "version": "0.16.25",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.25.tgz",
+      "integrity": "sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==",
       "dev": true,
       "funding": [
         "https://opencollective.com/katex",
         "https://github.com/sponsors/katex"
       ],
-      "license": "MIT",
       "dependencies": {
         "commander": "^8.3.0"
       },
@@ -7637,7 +7605,6 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
       "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">= 12"
       }
@@ -7865,11 +7832,10 @@
       }
     },
     "node_modules/markdownlint": {
-      "version": "0.38.0",
-      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.38.0.tgz",
-      "integrity": "sha512-xaSxkaU7wY/0852zGApM8LdlIfGCW8ETZ0Rr62IQtAnUMlMuifsg09vWJcNYeL4f0anvr8Vo4ZQar8jGpV0btQ==",
+      "version": "0.39.0",
+      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.39.0.tgz",
+      "integrity": "sha512-Xt/oY7bAiHwukL1iru2np5LIkhwD19Y7frlsiDILK62v3jucXCD6JXlZlwMG12HZOR+roHIVuJZrfCkOhp6k3g==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "micromark": "4.0.2",
         "micromark-core-commonmark": "2.0.3",
@@ -7888,18 +7854,17 @@
       }
     },
     "node_modules/markdownlint-cli2": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.18.1.tgz",
-      "integrity": "sha512-/4Osri9QFGCZOCTkfA8qJF+XGjKYERSHkXzxSyS1hd3ZERJGjvsUao2h4wdnvpHp6Tu2Jh/bPHM0FE9JJza6ng==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.19.1.tgz",
+      "integrity": "sha512-p3JTemJJbkiMjXEMiFwgm0v6ym5g8K+b2oDny+6xdl300tUKySxvilJQLSea48C6OaYNmO30kH9KxpiAg5bWJw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "globby": "14.1.0",
-        "js-yaml": "4.1.0",
+        "globby": "15.0.0",
+        "js-yaml": "4.1.1",
         "jsonc-parser": "3.3.1",
         "markdown-it": "14.1.0",
-        "markdownlint": "0.38.0",
-        "markdownlint-cli2-formatter-default": "0.0.5",
+        "markdownlint": "0.39.0",
+        "markdownlint-cli2-formatter-default": "0.0.6",
         "micromatch": "4.0.8"
       },
       "bin": {
@@ -7913,9 +7878,9 @@
       }
     },
     "node_modules/markdownlint-cli2-formatter-default": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.5.tgz",
-      "integrity": "sha512-4XKTwQ5m1+Txo2kuQ3Jgpo/KmnG+X90dWt4acufg6HVGadTUG5hzHF/wssp9b5MBYOMCnZ9RMPaU//uHsszF8Q==",
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.6.tgz",
+      "integrity": "sha512-VVDGKsq9sgzu378swJ0fcHfSicUnMxnL8gnLm/Q4J/xsNJ4e5bA6lvAz7PCzIl0/No0lHyaWdqVD2jotxOSFMQ==",
       "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/DavidAnson"
@@ -7925,21 +7890,20 @@
       }
     },
     "node_modules/markdownlint-cli2/node_modules/globby": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz",
-      "integrity": "sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==",
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-15.0.0.tgz",
+      "integrity": "sha512-oB4vkQGqlMl682wL1IlWd02tXCbquGWM4voPEI85QmNKCaw8zGTm1f1rubFgkg3Eli2PtKlFgrnmUqasbQWlkw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@sindresorhus/merge-streams": "^2.1.0",
+        "@sindresorhus/merge-streams": "^4.0.0",
         "fast-glob": "^3.3.3",
-        "ignore": "^7.0.3",
+        "ignore": "^7.0.5",
         "path-type": "^6.0.0",
         "slash": "^5.1.0",
         "unicorn-magic": "^0.3.0"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -7950,7 +7914,6 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
       "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">= 4"
       }
@@ -7960,7 +7923,6 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-6.0.0.tgz",
       "integrity": "sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=18"
       },
@@ -7973,7 +7935,6 @@
       "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
       "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=14.16"
       },
@@ -8044,7 +8005,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "@types/debug": "^4.0.0",
         "debug": "^4.0.0",
@@ -8080,7 +8040,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "decode-named-character-reference": "^1.0.0",
         "devlop": "^1.0.0",
@@ -8105,7 +8064,6 @@
       "resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-4.0.0.tgz",
       "integrity": "sha512-/C2nqVmXXmiseSSuCdItCMho7ybwwop6RrrRPk0KbOHW21JKoCldC+8rFOaundDoRBUWBnJJcxeA/Kvi34WQXg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-factory-space": "^2.0.0",
@@ -8125,7 +8083,6 @@
       "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
       "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "micromark-util-character": "^2.0.0",
         "micromark-util-sanitize-uri": "^2.0.0",
@@ -8142,7 +8099,6 @@
       "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
       "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-core-commonmark": "^2.0.0",
@@ -8163,7 +8119,6 @@
       "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
       "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-factory-space": "^2.0.0",
@@ -8181,7 +8136,6 @@
       "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-3.1.0.tgz",
       "integrity": "sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@types/katex": "^0.16.0",
         "devlop": "^1.0.0",
@@ -8211,7 +8165,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "micromark-util-character": "^2.0.0",
         "micromark-util-symbol": "^2.0.0",
@@ -8233,7 +8186,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-util-character": "^2.0.0",
@@ -8256,7 +8208,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "micromark-util-character": "^2.0.0",
         "micromark-util-types": "^2.0.0"
@@ -8277,7 +8228,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "micromark-factory-space": "^2.0.0",
         "micromark-util-character": "^2.0.0",
@@ -8300,7 +8250,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "micromark-factory-space": "^2.0.0",
         "micromark-util-character": "^2.0.0",
@@ -8323,7 +8272,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "micromark-util-symbol": "^2.0.0",
         "micromark-util-types": "^2.0.0"
@@ -8344,7 +8292,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "micromark-util-symbol": "^2.0.0"
       }
@@ -8364,7 +8311,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "micromark-util-character": "^2.0.0",
         "micromark-util-symbol": "^2.0.0",
@@ -8386,7 +8332,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "micromark-util-chunked": "^2.0.0",
         "micromark-util-types": "^2.0.0"
@@ -8407,7 +8352,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "micromark-util-symbol": "^2.0.0"
       }
@@ -8426,8 +8370,7 @@
           "type": "OpenCollective",
           "url": "https://opencollective.com/unified"
         }
-      ],
-      "license": "MIT"
+      ]
     },
     "node_modules/micromark-util-html-tag-name": {
       "version": "2.0.1",
@@ -8443,8 +8386,7 @@
           "type": "OpenCollective",
           "url": "https://opencollective.com/unified"
         }
-      ],
-      "license": "MIT"
+      ]
     },
     "node_modules/micromark-util-normalize-identifier": {
       "version": "2.0.1",
@@ -8461,7 +8403,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "micromark-util-symbol": "^2.0.0"
       }
@@ -8481,7 +8422,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "micromark-util-types": "^2.0.0"
       }
@@ -8501,7 +8441,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "micromark-util-character": "^2.0.0",
         "micromark-util-encode": "^2.0.0",
@@ -8523,7 +8462,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-util-chunked": "^2.0.0",
@@ -8545,8 +8483,7 @@
           "type": "OpenCollective",
           "url": "https://opencollective.com/unified"
         }
-      ],
-      "license": "MIT"
+      ]
     },
     "node_modules/micromark-util-types": {
       "version": "2.0.2",
@@ -8562,8 +8499,7 @@
           "type": "OpenCollective",
           "url": "https://opencollective.com/unified"
         }
-      ],
-      "license": "MIT"
+      ]
     },
     "node_modules/micromatch": {
       "version": "4.0.8",
@@ -8684,9 +8620,9 @@
       }
     },
     "node_modules/mocha/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
       "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
@@ -9117,7 +9053,6 @@
       "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
       "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@types/unist": "^2.0.0",
         "character-entities-legacy": "^3.0.0",
@@ -12643,7 +12578,6 @@
       "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
       "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=18"
       },
@@ -13768,17 +13702,6 @@
       "requires": {
         "@changesets/types": "^6.1.0",
         "js-yaml": "^4.1.1"
-      },
-      "dependencies": {
-        "js-yaml": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-          "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
-          "dev": true,
-          "requires": {
-            "argparse": "^2.0.1"
-          }
-        }
       }
     },
     "@changesets/pre": {
@@ -15157,9 +15080,9 @@
       }
     },
     "@primer/behaviors": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.3.tgz",
-      "integrity": "sha512-Cot5Jg5McTT4zg41omctzY60DygZ6qlhrBtD4rpDBM6vNi6CrCAs/2QSPAgYTW7Kz+jFp4BXJFhNcVqfqTgaxA=="
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.4.tgz",
+      "integrity": "sha512-+z7LNbijJqBnsz1u9Jcgrc9yPLwGmzYMnI+yBiS1oNuEW1zLH5ZE7Kp9UFRo7fqPgM/IZ8xbtdTAuBZq9DPs7g=="
     },
     "@primer/css": {
       "version": "22.0.2",
@@ -15406,9 +15329,9 @@
       "dev": true
     },
     "@sindresorhus/merge-streams": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
-      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
+      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
       "dev": true
     },
     "@types/debug": {
@@ -16450,9 +16373,9 @@
       "dev": true
     },
     "decode-named-character-reference": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.1.0.tgz",
-      "integrity": "sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz",
+      "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==",
       "dev": true,
       "requires": {
         "character-entities": "^2.0.0"
@@ -17399,14 +17322,14 @@
       }
     },
     "glob": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.3.tgz",
-      "integrity": "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz",
+      "integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==",
       "dev": true,
       "requires": {
         "foreground-child": "^3.3.1",
         "jackspeak": "^4.1.1",
-        "minimatch": "^10.0.3",
+        "minimatch": "^10.1.1",
         "minipass": "^7.1.2",
         "package-json-from-dist": "^1.0.0",
         "path-scurry": "^2.0.0"
@@ -17428,9 +17351,9 @@
           "dev": true
         },
         "minimatch": {
-          "version": "10.0.3",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.3.tgz",
-          "integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==",
+          "version": "10.1.1",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.1.1.tgz",
+          "integrity": "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==",
           "dev": true,
           "requires": {
             "@isaacs/brace-expansion": "^5.0.0"
@@ -18021,9 +17944,9 @@
       "dev": true
     },
     "js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "requires": {
         "argparse": "^2.0.1"
@@ -18091,9 +18014,9 @@
       }
     },
     "katex": {
-      "version": "0.16.22",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
-      "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
+      "version": "0.16.25",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.25.tgz",
+      "integrity": "sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==",
       "dev": true,
       "requires": {
         "commander": "^8.3.0"
@@ -18292,9 +18215,9 @@
       }
     },
     "markdownlint": {
-      "version": "0.38.0",
-      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.38.0.tgz",
-      "integrity": "sha512-xaSxkaU7wY/0852zGApM8LdlIfGCW8ETZ0Rr62IQtAnUMlMuifsg09vWJcNYeL4f0anvr8Vo4ZQar8jGpV0btQ==",
+      "version": "0.39.0",
+      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.39.0.tgz",
+      "integrity": "sha512-Xt/oY7bAiHwukL1iru2np5LIkhwD19Y7frlsiDILK62v3jucXCD6JXlZlwMG12HZOR+roHIVuJZrfCkOhp6k3g==",
       "dev": true,
       "requires": {
         "micromark": "4.0.2",
@@ -18308,29 +18231,29 @@
       }
     },
     "markdownlint-cli2": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.18.1.tgz",
-      "integrity": "sha512-/4Osri9QFGCZOCTkfA8qJF+XGjKYERSHkXzxSyS1hd3ZERJGjvsUao2h4wdnvpHp6Tu2Jh/bPHM0FE9JJza6ng==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.19.1.tgz",
+      "integrity": "sha512-p3JTemJJbkiMjXEMiFwgm0v6ym5g8K+b2oDny+6xdl300tUKySxvilJQLSea48C6OaYNmO30kH9KxpiAg5bWJw==",
       "dev": true,
       "requires": {
-        "globby": "14.1.0",
-        "js-yaml": "4.1.0",
+        "globby": "15.0.0",
+        "js-yaml": "4.1.1",
         "jsonc-parser": "3.3.1",
         "markdown-it": "14.1.0",
-        "markdownlint": "0.38.0",
-        "markdownlint-cli2-formatter-default": "0.0.5",
+        "markdownlint": "0.39.0",
+        "markdownlint-cli2-formatter-default": "0.0.6",
         "micromatch": "4.0.8"
       },
       "dependencies": {
         "globby": {
-          "version": "14.1.0",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz",
-          "integrity": "sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==",
+          "version": "15.0.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-15.0.0.tgz",
+          "integrity": "sha512-oB4vkQGqlMl682wL1IlWd02tXCbquGWM4voPEI85QmNKCaw8zGTm1f1rubFgkg3Eli2PtKlFgrnmUqasbQWlkw==",
           "dev": true,
           "requires": {
-            "@sindresorhus/merge-streams": "^2.1.0",
+            "@sindresorhus/merge-streams": "^4.0.0",
             "fast-glob": "^3.3.3",
-            "ignore": "^7.0.3",
+            "ignore": "^7.0.5",
             "path-type": "^6.0.0",
             "slash": "^5.1.0",
             "unicorn-magic": "^0.3.0"
@@ -18357,9 +18280,9 @@
       }
     },
     "markdownlint-cli2-formatter-default": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.5.tgz",
-      "integrity": "sha512-4XKTwQ5m1+Txo2kuQ3Jgpo/KmnG+X90dWt4acufg6HVGadTUG5hzHF/wssp9b5MBYOMCnZ9RMPaU//uHsszF8Q==",
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.6.tgz",
+      "integrity": "sha512-VVDGKsq9sgzu378swJ0fcHfSicUnMxnL8gnLm/Q4J/xsNJ4e5bA6lvAz7PCzIl0/No0lHyaWdqVD2jotxOSFMQ==",
       "dev": true,
       "requires": {}
     },
@@ -18780,9 +18703,9 @@
           }
         },
         "glob": {
-          "version": "10.4.5",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-          "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+          "version": "10.5.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+          "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
           "dev": true,
           "requires": {
             "foreground-child": "^3.1.0",