openproject-primer_view_components 0.80.2 → 0.81.0

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

@@ -302,7 +302,8 @@ module Primer
           if @list.allows_selection?
             @content_arguments[:aria] = merge_aria(
               @content_arguments,
-              { aria: @list.aria_selection_variant == :selected ? { selected: active? } : { checked: active? } }
+              # Always use aria-selected for listbox (role="option" requires aria-selected per WAI-ARIA 1.2)
+              { aria: @list.acts_as_listbox? || @list.aria_selection_variant == :selected ? { selected: active? } : { checked: active? } }
             )
           end
 

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

@@ -7,16 +7,18 @@
     <% end %>
   </label>
   <span class="autocomplete-body">
+    <% clear_button = @is_clearable ? capture do %>
+      <button id="<%= @input_id %>-clear" class="btn-octicon" aria-label="Clear"><%= primer_octicon "x" %></button>
+    <% end : nil %>
     <% if @with_icon %>
       <div class="form-control autocomplete-embedded-icon-wrap">
         <%= render Primer::Beta::Octicon.new(:search) %>
-    <% end %>
-    <%= input %>
-    <% if @is_clearable %>
-      <button id="<%= @input_id %>-clear" class="btn-octicon" aria-label="Clear"><%= primer_octicon "x" %></button>
-    <% end %>
-    <% if @with_icon %>
+        <%= input %>
+        <%= clear_button %>
       </div>
+    <% else %>
+      <%= input %>
+      <%= clear_button %>
     <% end %>
     <%= results %>
   </span>

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

@@ -256,7 +256,7 @@ module Primer
           super(
             p: 2,
             role: "listbox",
-            aria_selection_variant: select_variant == :single ? :selected : :checked,
+            aria_selection_variant: :selected,
             select_variant: select_variant == :multiple ? :multiple_checkbox : :single,
             **system_arguments
           )

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

@@ -84,7 +84,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
         return this.getAttribute('data-select-variant');
     }
     get ariaSelectionType() {
-        return this.selectVariant === 'multiple' ? 'aria-checked' : 'aria-selected';
+        return 'aria-selected';
     }
     set selectVariant(variant) {
         if (variant) {

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

@@ -97,7 +97,7 @@ export class SelectPanelElement extends HTMLElement {
   }
 
   get ariaSelectionType(): string {
-    return this.selectVariant === 'multiple' ? 'aria-checked' : 'aria-selected'
+    return 'aria-selected'
   }
 
   set selectVariant(variant: SelectVariant) {

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

@@ -118,6 +118,7 @@ module Primer
         DEFAULT = nil
         OPTIONS = [
           DEFAULT,
+          :none,
           :condensed,
           :normal,
           :spacious

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

@@ -1 +1 @@
-.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:hidden}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:var(--base-size-2)}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}
+.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow-x:auto;overflow-y:hidden}.tabnav-tab,.tabnav-tabs>li{flex-shrink:0}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:var(--base-size-2)}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}

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

@@ -4,6 +4,7 @@
     ".tabnav",
     ".tabnav-tabs",
     ".tabnav-tab",
+    ".tabnav-tabs>li",
     ".tabnav-tab.selected",
     ".tabnav-tab[aria-current]:not([aria-current=false])",
     ".tabnav-tab[aria-selected=true]",

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

@@ -1 +1 @@
-{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAIE,sEAAuE,CADvE,qCAAsC,CAFtC,YAIF,CAEA,aACE,YAAa,CAEb,8CAAiD,CACjD,eACF,CAEA,YAUE,wBAA6B,CAE7B,0CAAgB,CAAhB,eAAgB,CAJhB,0BAA2B,CAP3B,oBAAqB,CACrB,aAAc,CAGd,sCAAuC,CAEvC,gBAAiB,CAHjB,uEAAwE,CAKxE,4BAAqB,CAArB,oBAAqB,CAIrB,4CA0CF,CAxCE,yGAIE,uCAAwC,CACxC,uCAAwC,CACxC,uEAAwE,CAHxE,4BAQF,CAHE,uHACE,aACF,CAGF,kBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iFAAmF,CACnF,mBACF,CAMA,wCAHE,0BAOF,CAJA,qBAEE,qCAEF,CAEA,qBAGE,aAAc,CADd,oCAEF,CAQF,cAOE,0BAA2B,CAN3B,oBAAqB,CAKrB,qCAAsC,CADtC,gBAAiB,CAFjB,gBASF,CAHE,uBACE,+BACF,CAKF,qBACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBACF,CAOA,YAEE,oDACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n  margin-top: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: calc(var(--borderWidth-thin) * -1);\n  overflow: hidden;\n}\n\n.tabnav-tab {\n  display: inline-block;\n  flex-shrink: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 23px;\n  color: var(--fgColor-muted);\n  text-decoration: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid transparent;\n  border-bottom: 0;\n  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    color: var(--fgColor-default);\n    background-color: var(--bgColor-default); /* cover bottom border */\n    border-color: var(--borderColor-default);\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n\n  &:hover {\n    color: var(--fgColor-default);\n    text-decoration: none;\n    transition-duration: 0.1s;\n  }\n\n  &:focus,\n  &:focus-visible {\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n    outline-offset: -6px;\n  }\n\n  &:active {\n    color: var(--fgColor-muted);\n  }\n\n  & .octicon {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  & .Counter {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: var(--control-small-gap);\n    color: inherit;\n  }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n  display: inline-block;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-top: 10px;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: 10px;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n\n  & > .octicon {\n    margin-right: var(--base-size-2);\n  }\n}\n\n/* When tabnav-extra are anchors */\n/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */\na.tabnav-extra:hover {\n  color: var(--fgColor-accent);\n  text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}
+{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAIE,sEAAuE,CADvE,qCAAsC,CAFtC,YAIF,CAEA,aACE,YAAa,CAEb,8CAAiD,CACjD,eAAgB,CAChB,iBAMF,CAEA,4BAJI,aA2DJ,CAvDA,YAUE,wBAA6B,CAE7B,0CAAgB,CAAhB,eAAgB,CAJhB,0BAA2B,CAP3B,oBAAqB,CAIrB,sCAAuC,CAEvC,gBAAiB,CAHjB,uEAAwE,CAKxE,4BAAqB,CAArB,oBAAqB,CAIrB,4CA0CF,CAxCE,yGAIE,uCAAwC,CACxC,uCAAwC,CACxC,uEAAwE,CAHxE,4BAQF,CAHE,uHACE,aACF,CAGF,kBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iFAAmF,CACnF,mBACF,CAMA,wCAHE,0BAOF,CAJA,qBAEE,qCAEF,CAEA,qBAGE,aAAc,CADd,oCAEF,CAQF,cAOE,0BAA2B,CAN3B,oBAAqB,CAKrB,qCAAsC,CADtC,gBAAiB,CAFjB,gBASF,CAHE,uBACE,+BACF,CAKF,qBACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBACF,CAOA,YAEE,oDACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n  margin-top: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: calc(var(--borderWidth-thin) * -1);\n  overflow-x: auto;\n  overflow-y: hidden;\n\n  /* stylelint-disable-next-line selector-max-type */\n  & > li {\n    flex-shrink: 0;\n  }\n}\n\n.tabnav-tab {\n  display: inline-block;\n  flex-shrink: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 23px;\n  color: var(--fgColor-muted);\n  text-decoration: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid transparent;\n  border-bottom: 0;\n  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    color: var(--fgColor-default);\n    background-color: var(--bgColor-default); /* cover bottom border */\n    border-color: var(--borderColor-default);\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n\n  &:hover {\n    color: var(--fgColor-default);\n    text-decoration: none;\n    transition-duration: 0.1s;\n  }\n\n  &:focus,\n  &:focus-visible {\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n    outline-offset: -6px;\n  }\n\n  &:active {\n    color: var(--fgColor-muted);\n  }\n\n  & .octicon {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  & .Counter {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: var(--control-small-gap);\n    color: inherit;\n  }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n  display: inline-block;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-top: 10px;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: 10px;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n\n  & > .octicon {\n    margin-right: var(--base-size-2);\n  }\n}\n\n/* When tabnav-extra are anchors */\n/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */\na.tabnav-extra:hover {\n  color: var(--fgColor-accent);\n  text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}

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

@@ -12,7 +12,13 @@
   display: flex;
   /* stylelint-disable-next-line primer/spacing */
   margin-bottom: calc(var(--borderWidth-thin) * -1);
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  /* stylelint-disable-next-line selector-max-type */
+  & > li {
+    flex-shrink: 0;
+  }
 }
 
 .tabnav-tab {

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

@@ -18,6 +18,7 @@ module Primer
       # @!method initialize
       #
       # @macro form_full_width_arguments
+      # @macro form_input_character_limit_arguments
       # @macro form_input_arguments
       # @macro form_input_width_arguments
     end

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

@@ -19,6 +19,7 @@ module Primer
       #
       # @macro form_size_arguments
       # @macro form_full_width_arguments
+      # @macro form_input_character_limit_arguments
       # @macro form_input_arguments
       # @macro form_input_width_arguments
       #

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

@@ -21,7 +21,7 @@
           aria: { hidden: true },
           focusable: false
         )) do %>
-          <path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z" />
+          <path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z"></path>
         <% end %>
       <% end %>
 
@@ -36,7 +36,7 @@
           aria: { hidden: true },
           focusable: false
         )) do %>
-          <path fill-rule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" />
+          <path fill-rule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z"></path>
         <% end %>
       <% end %>
     <% end %>

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

@@ -9,7 +9,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_showReason, _ToolTipElement_update, _ToolTipElement_updateControl, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
+var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_showReason, _ToolTipElement_isControlsPopoverOpen, _ToolTipElement_update, _ToolTipElement_updateControl, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
 import '@oddbird/popover-polyfill';
 import { getAnchoredPosition } from '@primer/behaviors';
 const isPopoverOpen = (() => {
@@ -78,6 +78,7 @@ class ToolTipElement extends HTMLElement {
         _ToolTipElement_side.set(this, 'outside-bottom');
         _ToolTipElement_allowUpdatePosition.set(this, false);
         _ToolTipElement_showReason.set(this, 'mouse');
+        _ToolTipElement_isControlsPopoverOpen.set(this, false);
     }
     styles() {
         return `
@@ -244,18 +245,24 @@ class ToolTipElement extends HTMLElement {
         if (!this.control)
             return;
         const showing = isPopoverOpen(this);
+        // Track when the control's popover (e.g an ActionMenu) is opened/closed
+        if (event.type === 'beforetoggle' && event.currentTarget !== this) {
+            __classPrivateFieldSet(this, _ToolTipElement_isControlsPopoverOpen, event.newState === 'open', "f");
+        }
         // Ensures that tooltip stays open when hovering between tooltip and element
         // WCAG Success Criterion 1.4.13 Hoverable
-        const shouldShow = event.type === 'mouseenter' ||
+        const shouldShow = (event.type === 'mouseenter' ||
             // Only show tooltip on focus if running in headless browser (for tests) or if focus ring
             // is visible (i.e. if user is using keyboard navigation)
-            (event.type === 'focus' && (navigator.webdriver || this.control.matches(':focus-visible')));
+            (event.type === 'focus' && (navigator.webdriver || this.control.matches(':focus-visible')))) &&
+            // Don't show tooltip if the control's popover is open (e.g. an ActionMenu)
+            !__classPrivateFieldGet(this, _ToolTipElement_isControlsPopoverOpen, "f");
         const isMouseLeaveFromButton = event.type === 'mouseleave' &&
             event.relatedTarget !== this.control &&
             event.relatedTarget !== this;
         const isEscapeKeydown = event.type === 'keydown' && event.key === 'Escape';
         const isMouseDownOnButton = event.type === 'mousedown' && event.currentTarget === this.control;
-        const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
+        const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this && event.newState === 'open';
         const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
         if (showing && isEscapeKeydown) {
             /* eslint-disable-next-line no-restricted-syntax */
@@ -288,7 +295,7 @@ class ToolTipElement extends HTMLElement {
         }
     }
 }
-_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_showReason = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update(isOpen) {
+_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_showReason = new WeakMap(), _ToolTipElement_isControlsPopoverOpen = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update(isOpen) {
     if (isOpen) {
         openTooltips.add(this);
         this.classList.remove(TOOLTIP_SR_ONLY_CLASS);

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

@@ -174,6 +174,7 @@ class ToolTipElement extends HTMLElement {
   #side: AnchorSide = 'outside-bottom'
   #allowUpdatePosition = false
   #showReason: 'focus' | 'mouse' = 'mouse'
+  #isControlsPopoverOpen = false
   get showReason() {
     return this.#showReason
   }
@@ -247,20 +248,28 @@ class ToolTipElement extends HTMLElement {
     if (!this.control) return
     const showing = isPopoverOpen(this)
 
+    // Track when the control's popover (e.g an ActionMenu) is opened/closed
+    if (event.type === 'beforetoggle' && event.currentTarget !== this) {
+      this.#isControlsPopoverOpen = (event as ToggleEvent).newState === 'open'
+    }
+
     // Ensures that tooltip stays open when hovering between tooltip and element
     // WCAG Success Criterion 1.4.13 Hoverable
     const shouldShow =
-      event.type === 'mouseenter' ||
-      // Only show tooltip on focus if running in headless browser (for tests) or if focus ring
-      // is visible (i.e. if user is using keyboard navigation)
-      (event.type === 'focus' && (navigator.webdriver || this.control.matches(':focus-visible')))
+      (event.type === 'mouseenter' ||
+        // Only show tooltip on focus if running in headless browser (for tests) or if focus ring
+        // is visible (i.e. if user is using keyboard navigation)
+        (event.type === 'focus' && (navigator.webdriver || this.control.matches(':focus-visible')))) &&
+      // Don't show tooltip if the control's popover is open (e.g. an ActionMenu)
+      !this.#isControlsPopoverOpen
     const isMouseLeaveFromButton =
       event.type === 'mouseleave' &&
       (event as MouseEvent).relatedTarget !== this.control &&
       (event as MouseEvent).relatedTarget !== this
     const isEscapeKeydown = event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape'
     const isMouseDownOnButton = event.type === 'mousedown' && event.currentTarget === this.control
-    const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this
+    const isOpeningOtherPopover =
+      event.type === 'beforetoggle' && event.currentTarget !== this && (event as ToggleEvent).newState === 'open'
     const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover
 
     if (showing && isEscapeKeydown) {

data/app/components/primer/beta/auto_complete/item.html.erb

@@ -1,9 +1,9 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <span class="ActionListContent">
     <% if leading_visual %>
-        <span class="ActionListItem-visual ActionListItem-visual--leading">
-            <%= leading_visual %>
-        </span>
+      <span class="ActionListItem-visual ActionListItem-visual--leading">
+        <%= leading_visual %>
+      </span>
     <% end %>
     <%= render(Primer::ConditionalWrapper.new(condition: description?, tag: :span, **@description_wrapper_arguments)) do %>
       <span class="ActionListItem-label"><%= content %></span>
@@ -13,9 +13,10 @@
         </span>
       <% end %>
     <% end %>
-   <% if trailing_visual %>
+    <% if trailing_visual %>
         <span class="ActionListItem-visual ActionListItem-visual--trailing">
             <%= trailing_visual %>
         </span>
     <% end %>
+  </span>
 <% end %>

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

@@ -19,6 +19,10 @@ module Primer
     class Avatar < Primer::Component
       status :beta
 
+      def link?
+        @href.present?
+      end
+
       DEFAULT_SIZE = 20
       SMALL_THRESHOLD = 24
 

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

@@ -79,6 +79,12 @@ module Primer
           "AvatarStack--two" => avatars.size == 2,
           "AvatarStack--three-plus" => avatars.size > 2
         )
+
+        # Make non-linked stacks keyboard-focusable so :focus-within triggers expansion (avoid extra focus stop when avatars are links).
+        unless @tooltipped || @disable_expand
+          has_linked_avatars = avatars.any?(&:link?)
+          @body_arguments[:tabindex] ||= 0 unless has_linked_avatars
+        end
       end
 
       def render?

data/app/components/primer/beta/blankslate.css

@@ -1 +1 @@
-.blankslate-container{container-type:inline-size;width:100%}.blankslate{--blankslate-outer-padding-block:var(--base-size-32);--blankslate-outer-padding-inline:var(--base-size-32);padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted);font-size:var(--text-body-size-large)}.blankslate code{background:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-muted);border-radius:var(--borderRadius-medium);font-size:var(--text-body-size-medium);padding:var(--base-size-2) var(--base-size-4) var(--base-size-4)}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted);margin-bottom:var(--stack-gap-condensed);margin-left:var(--control-small-gap);margin-right:var(--control-small-gap)}.blankslate-image{margin-bottom:var(--stack-gap-normal)}.blankslate-heading{font-size:var(--text-title-size-medium);font-weight:var(--text-title-weight-medium);margin-bottom:var(--base-size-4)}.blankslate-action{margin-top:var(--stack-gap-normal)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80);--blankslate-outer-padding-inline:var(--base-size-40)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal) 0}.blankslate-large p{font-size:var(--text-body-size-large)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20);--blankslate-outer-padding-inline:var(--base-size-20)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44);--blankslate-outer-padding-inline:var(--base-size-28)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed)}.blankslate-heading{font-size:var(--text-title-size-small)}.blankslate p{font-size:var(--text-body-size-medium)}.blankslate-action{margin-top:var(--stack-gap-condensed)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed)/2)}}
+.blankslate-container{container-type:inline-size;width:100%}.blankslate{--blankslate-outer-padding-block:var(--base-size-32);--blankslate-outer-padding-inline:var(--base-size-32);padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted);font-size:var(--text-body-size-large);margin:auto;max-width:56rem}.blankslate code{background:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-muted);border-radius:var(--borderRadius-medium);font-size:var(--text-body-size-medium);padding:var(--base-size-2) var(--base-size-4) var(--base-size-4)}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted);margin-bottom:var(--stack-gap-condensed);margin-left:var(--control-small-gap);margin-right:var(--control-small-gap)}.blankslate-image{margin-bottom:var(--stack-gap-normal)}.blankslate-heading{font-size:var(--text-title-size-medium);font-weight:var(--text-title-weight-medium);margin-bottom:var(--base-size-4)}.blankslate-action{margin-top:var(--stack-gap-normal)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80);--blankslate-outer-padding-inline:var(--base-size-40)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal) 0}.blankslate-large p{font-size:var(--text-body-size-large)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20);--blankslate-outer-padding-inline:var(--base-size-20)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44);--blankslate-outer-padding-inline:var(--base-size-28)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed)}.blankslate-heading{font-size:var(--text-title-size-small)}.blankslate p{font-size:var(--text-body-size-medium)}.blankslate-action{margin-top:var(--stack-gap-condensed)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed)/2)}}

data/app/components/primer/beta/blankslate.css.map

@@ -1 +1 @@
-{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,sBACE,0BAA2B,CAC3B,UACF,CAEA,YACE,oDAAqD,CACrD,qDAAsD,CAItD,oFAAqF,CAFrF,iBAAkB,CAGlB,iBAsBF,CAnBE,cAEE,0BAA2B,CAD3B,qCAEF,CAGA,iBAGE,iCAAkC,CAClC,6DAA8D,CAC9D,wCAAyC,CAHzC,sCAAuC,CADvC,gEAKF,CAGA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAOE,0BAA2B,CAH3B,wCAAyC,CAEzC,oCAAqC,CAJrC,qCAMF,CAEA,kBAEE,qCACF,CAEA,oBAEE,uCAAwC,CACxC,2CAA4C,CAF5C,gCAGF,CAEA,mBAEE,kCAWF,CATE,iCAEE,oCACF,CAEA,gCAEE,wCACF,CAGF,mBACE,uEACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAME,sBAEE,WAAY,CADZ,UAEF,CAGA,qBAME,cAAe,CAJf,gCAKF,CAGA,oBACE,qCACF,CAKF,6BACE,QACF,CAIA,8BACE,YACE,oDAAqD,CACrD,qDACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,iBAEE,wCACF,CAEA,oBACE,sCACF,CAGA,cACE,sCACF,CAEA,mBAEE,qCAWF,CATE,iCAEE,kCACF,CAEA,gCAEE,gDACF,CAEJ","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate-container {\n  container-type: inline-size;\n  width: 100%;\n}\n\n.blankslate {\n  --blankslate-outer-padding-block: var(--base-size-32);\n  --blankslate-outer-padding-inline: var(--base-size-32);\n\n  position: relative;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);\n  text-align: center;\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p {\n    font-size: var(--text-body-size-large);\n    color: var(--fgColor-muted);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & code {\n    padding: var(--base-size-2) var(--base-size-4) var(--base-size-4);\n    font-size: var(--text-body-size-medium);\n    background: var(--bgColor-default);\n    border: var(--borderWidth-thin) solid var(--borderColor-muted);\n    border-radius: var(--borderRadius-medium);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-right: var(--control-small-gap);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-condensed);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--control-small-gap);\n  color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4);\n  font-size: var(--text-title-size-medium);\n  font-weight: var(--text-title-weight-medium);\n}\n\n.blankslate-action {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: var(--stack-gap-normal);\n\n  &:first-of-type {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: var(--stack-gap-spacious);\n  }\n\n  &:last-of-type {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-bottom: var(--stack-gap-condensed);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n  --blankslate-outer-padding-block: var(--base-size-80);\n  --blankslate-outer-padding-inline: var(--base-size-40);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  /* stylelint-disable-next-line selector-max-type */\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & h3 {\n    /* stylelint-disable-next-line primer/spacing */\n    margin: var(--stack-gap-normal) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    /* stylelint-disable-next-line primer/typography */\n    font-size: 24px;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p {\n    font-size: var(--text-body-size-large);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}\n\n/* At the time these styles were written,\n   `34rem` was our \"small\" breakpoint width */\n@container (max-width: 34rem) {\n  .blankslate {\n    --blankslate-outer-padding-block: var(--base-size-20);\n    --blankslate-outer-padding-inline: var(--base-size-20);\n  }\n\n  .blankslate-spacious {\n    --blankslate-outer-padding-block: var(--base-size-44);\n    --blankslate-outer-padding-inline: var(--base-size-28);\n  }\n\n  .blankslate-icon {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-bottom: var(--stack-gap-condensed);\n  }\n\n  .blankslate-heading {\n    font-size: var(--text-title-size-small);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  .blankslate p {\n    font-size: var(--text-body-size-medium);\n  }\n\n  .blankslate-action {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: var(--stack-gap-condensed);\n\n    &:first-of-type {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-top: var(--stack-gap-normal);\n    }\n\n    &:last-of-type {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: calc(var(--stack-gap-condensed) / 2);\n    }\n  }\n}\n"]}
+{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,sBACE,0BAA2B,CAC3B,UACF,CAEA,YACE,oDAAqD,CACrD,qDAAsD,CAItD,oFAAqF,CAFrF,iBAAkB,CAGlB,iBAwBF,CArBE,cAEE,0BAA2B,CAD3B,qCAAsC,CAGtC,WAAY,CADZ,eAEF,CAGA,iBAGE,iCAAkC,CAClC,6DAA8D,CAC9D,wCAAyC,CAHzC,sCAAuC,CADvC,gEAKF,CAGA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAOE,0BAA2B,CAH3B,wCAAyC,CAEzC,oCAAqC,CAJrC,qCAMF,CAEA,kBAEE,qCACF,CAEA,oBAEE,uCAAwC,CACxC,2CAA4C,CAF5C,gCAGF,CAEA,mBAEE,kCAWF,CATE,iCAEE,oCACF,CAEA,gCAEE,wCACF,CAGF,mBACE,uEACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAME,sBAEE,WAAY,CADZ,UAEF,CAGA,qBAME,cAAe,CAJf,gCAKF,CAGA,oBACE,qCACF,CAKF,6BACE,QACF,CAIA,8BACE,YACE,oDAAqD,CACrD,qDACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,iBAEE,wCACF,CAEA,oBACE,sCACF,CAGA,cACE,sCACF,CAEA,mBAEE,qCAWF,CATE,iCAEE,kCACF,CAEA,gCAEE,gDACF,CAEJ","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate-container {\n  container-type: inline-size;\n  width: 100%;\n}\n\n.blankslate {\n  --blankslate-outer-padding-block: var(--base-size-32);\n  --blankslate-outer-padding-inline: var(--base-size-32);\n\n  position: relative;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);\n  text-align: center;\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p {\n    font-size: var(--text-body-size-large);\n    color: var(--fgColor-muted);\n    max-width: 56rem;\n    margin: auto;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & code {\n    padding: var(--base-size-2) var(--base-size-4) var(--base-size-4);\n    font-size: var(--text-body-size-medium);\n    background: var(--bgColor-default);\n    border: var(--borderWidth-thin) solid var(--borderColor-muted);\n    border-radius: var(--borderRadius-medium);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-right: var(--control-small-gap);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-condensed);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--control-small-gap);\n  color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4);\n  font-size: var(--text-title-size-medium);\n  font-weight: var(--text-title-weight-medium);\n}\n\n.blankslate-action {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: var(--stack-gap-normal);\n\n  &:first-of-type {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: var(--stack-gap-spacious);\n  }\n\n  &:last-of-type {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-bottom: var(--stack-gap-condensed);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n  --blankslate-outer-padding-block: var(--base-size-80);\n  --blankslate-outer-padding-inline: var(--base-size-40);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  /* stylelint-disable-next-line selector-max-type */\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & h3 {\n    /* stylelint-disable-next-line primer/spacing */\n    margin: var(--stack-gap-normal) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    /* stylelint-disable-next-line primer/typography */\n    font-size: 24px;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p {\n    font-size: var(--text-body-size-large);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}\n\n/* At the time these styles were written,\n   `34rem` was our \"small\" breakpoint width */\n@container (max-width: 34rem) {\n  .blankslate {\n    --blankslate-outer-padding-block: var(--base-size-20);\n    --blankslate-outer-padding-inline: var(--base-size-20);\n  }\n\n  .blankslate-spacious {\n    --blankslate-outer-padding-block: var(--base-size-44);\n    --blankslate-outer-padding-inline: var(--base-size-28);\n  }\n\n  .blankslate-icon {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-bottom: var(--stack-gap-condensed);\n  }\n\n  .blankslate-heading {\n    font-size: var(--text-title-size-small);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  .blankslate p {\n    font-size: var(--text-body-size-medium);\n  }\n\n  .blankslate-action {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: var(--stack-gap-condensed);\n\n    &:first-of-type {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-top: var(--stack-gap-normal);\n    }\n\n    &:last-of-type {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: calc(var(--stack-gap-condensed) / 2);\n    }\n  }\n}\n"]}

data/app/components/primer/beta/blankslate.pcss

@@ -18,6 +18,8 @@
   & p {
     font-size: var(--text-body-size-large);
     color: var(--fgColor-muted);
+    max-width: 56rem;
+    margin: auto;
   }
 
   /* stylelint-disable-next-line selector-max-type */

data/app/components/primer/beta/spinner.html.erb

@@ -1,7 +1,7 @@
 <%= render(Primer::BaseComponent.new(tag: :span, hidden: @hidden, data: { target: @target }, **@wrapper_arguments)) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-    <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" />
-    <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
+    <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none"></circle>
+    <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"></path>
   <% end %>
   <% if no_aria_label? %>
     <span class="sr-only"><%= @sr_text %></span>

data/app/components/primer/primer.d.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';

data/app/components/primer/primer.js

@@ -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';

data/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'

data/app/controllers/primer/view_components/toggle_switch_controller.rb

@@ -9,7 +9,7 @@ module Primer
         attr_accessor :last_request
       end
 
-      rescue_from ActionController::InvalidAuthenticityToken, with: :handle_invalid_authenticity_token
+      rescue_from ActionController::InvalidCrossOriginRequest, with: :handle_invalid_cross_origin_request
 
       before_action :reject_non_ajax_request
 
@@ -29,7 +29,7 @@ module Primer
 
       private
 
-      def handle_invalid_authenticity_token
+      def handle_invalid_cross_origin_request
         render status: :unauthorized, plain: "Bad CSRF token."
       end
 

data/app/forms/check_box_with_nested_form.rb

@@ -8,27 +8,31 @@ class CheckBoxWithNestedForm < ApplicationForm
       custom_cities_form.text_field(
         name: :custom_cities,
         label: "Custom cities",
-        description: "A space-separated list of cities"
+        caption: "A space-separated list of cities"
       )
     end
   end
 
   form do |check_form|
-    check_form.check_box_group(name: :city_categories) do |check_group|
+    check_form.check_box_group(
+      name: :city_categories,
+      label: "City categories",
+      caption: "Select all that apply."
+    ) do |check_group|
       check_group.check_box(
         value: "capital",
         label: "Capital",
-        description: "The capital city"
+        caption: "The capital city"
       )
       check_group.check_box(
         value: "populous",
         label: "Most-populous",
-        description: "The five most-populous cities"
+        caption: "The five most-populous cities"
       )
       check_group.check_box(
         value: "custom",
         label: "Custom",
-        description: "A custom list of cities"
+        caption: "A custom list of cities"
       ) do |custom_check_box|
         custom_check_box.nested_form do |builder|
           CustomCitiesForm.new(builder)

data/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

data/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

data/app/lib/primer/forms/caption.html.erb

@@ -1,10 +1,17 @@
-<% 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.character_limit? %>
+  <span class="sr-only" data-target="<%= @input.character_limit_target_prefix %>.characterLimitSrElement" aria-live="polite" role="status"></span>
+  <span class="sr-only" id="<%= @input.character_limit_id %>">You can enter up to <%= @input.character_limit %> <%= @input.character_limit == 1 ? 'character' : 'characters' %></span>
+  <span class="FormControl-caption" data-target="<%= @input.character_limit_target_prefix %>.characterLimitElement" data-max-length="<%= @input.character_limit %>" aria-hidden="true">
+    <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? %>
+  <span class="FormControl-caption" id="<%= @input.caption_id %>">
+    <% if @input.caption? && !@input.caption.blank? %>
+      <%= @input.caption %>
+    <% elsif caption_template? %>
+      <%= render_caption_template %>
+    <% end %>
+  </span>
 <% end %>

data/app/lib/primer/forms/character_counter.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Shared character counting functionality for text inputs with character limits.
+ * Handles real-time character count updates, validation, and aria-live announcements.
+ */
+export declare class CharacterCounter {
+    private inputElement;
+    private characterLimitElement;
+    private characterLimitSrElement;
+    private SCREEN_READER_DELAY;
+    private announceTimeout;
+    private isInitialLoad;
+    constructor(inputElement: HTMLInputElement | HTMLTextAreaElement, characterLimitElement: HTMLElement, characterLimitSrElement: HTMLElement);
+    /**
+     * Initialize character counting by setting up event listener and initial count
+     */
+    initialize(signal?: AbortSignal): void;
+    /**
+     * Clean up any pending timeouts
+     */
+    cleanup(): void;
+    /**
+     * Pluralizes a word based on the count
+     */
+    private pluralize;
+    /**
+     * Update the character count display and validation state
+     */
+    private updateCharacterCount;
+    /**
+     * Announce character count to screen readers with debouncing
+     */
+    private announceToScreenReader;
+    /**
+     * Set error when character limit is exceeded
+     */
+    private setError;
+    /**
+     * Clear error when back under character limit
+     */
+    private clearError;
+}